Expanding Segmented Tabs

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  motion,
7  useReducedMotion,
8  type Transition,
9} from "motion/react";
10 
11import { cn } from "@/lib/utils";
12 
13export type ExpandingSegmentedTabsItem = {
14  value: string;
15  label: React.ReactNode;
16  icon: React.ReactNode;
17  disabled?: boolean;
18  ariaLabel?: string;
19};
20 
21export type ExpandingSegmentedTabsProps = Omit<
22  React.ComponentPropsWithoutRef<"div">,
23  "defaultValue" | "onChange"
24> & {
25  items: ExpandingSegmentedTabsItem[];
26  value?: string;
27  defaultValue?: string;
28  onValueChange?: (
29    value: string,
30    item: ExpandingSegmentedTabsItem,
31  ) => void;
32  onValueIntent?: (
33    value: string,
34    item: ExpandingSegmentedTabsItem,
35  ) => void;
36  /**
37   * Preserves the last selected value across unmount/remount for this key, so
38   * route-driven mode switches can still animate from the previous tab.
39   */
40  transitionKey?: string | null;
41  listClassName?: string;
42  itemClassName?: string;
43  activeItemClassName?: string;
44  iconClassName?: string;
45  labelClassName?: string;
46  indicatorClassName?: string;
47  "aria-label"?: string;
48};
49 
50type FlexTarget = {
51  flexGrow: number;
52  flexShrink: number;
53  flexBasis: string;
54};
55 
56const EXPAND_TRANSITION: Transition = {
57  duration: 0.28,
58  ease: [0.77, 0, 0.175, 1],
59};
60 
61const ACTIVE_FLEX: FlexTarget = {
62  flexGrow: 1,
63  flexShrink: 1,
64  flexBasis: "0px",
65};
66 
67const INACTIVE_FLEX: FlexTarget = {
68  flexGrow: 0,
69  flexShrink: 0,
70  flexBasis: "2.25rem",
71};
72 
73const selectedValueByTransitionKey = new Map<string, string>();
74 
75function getEnabledItems(items: ExpandingSegmentedTabsItem[]) {
76  return items.filter((item) => !item.disabled);
77}
78 
79function getSelectableValue(
80  items: ExpandingSegmentedTabsItem[],
81  value: string | undefined,
82) {
83  const enabledItems = getEnabledItems(items);
84 
85  return enabledItems.some((item) => item.value === value)
86    ? value
87    : enabledItems[0]?.value;
88}
89 
90function getItemByValue(
91  items: ExpandingSegmentedTabsItem[],
92  value: string,
93) {
94  return items.find((item) => item.value === value);
95}
96 
97export function ExpandingSegmentedTabs({
98  items,
99  value,
100  defaultValue,
101  onValueChange,
102  onValueIntent,
103  transitionKey,
104  className,
105  listClassName,
106  itemClassName,
107  activeItemClassName,
108  iconClassName,
109  labelClassName,
110  indicatorClassName,
111  "aria-label": ariaLabel = "Options",
112  ...props
113}: ExpandingSegmentedTabsProps) {
114  const shouldReduceMotion = useReducedMotion();
115  const isControlled = value !== undefined;
116// … truncated