npm - @frontify/fondue - Versions diffs - 12.0.0-beta.361 → 12.0.0-beta.362 - Mend

@frontify/fondue 12.0.0-beta.361 → 12.0.0-beta.362

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/SegmentedControls/SegmentedControls.es.js +62 -61
package/dist/components/SegmentedControls/SegmentedControls.es.js.map +1 -1
package/dist/index.cjs.js +1 -1
package/dist/index.cjs.js.map +1 -1
package/dist/index.umd.js +1 -1
package/dist/index.umd.js.map +1 -1
package/package.json +1 -1

package/dist/components/SegmentedControls/SegmentedControls.es.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import { useMemoizedId as j } from "../../hooks/useMemoizedId.es.js";
 import { useFocusRing as F } from "@react-aria/focus";
 import { setInteractionModality as M } from "@react-aria/interactions";
@@ -6,25 +6,25 @@ import { useRadio as P, useRadioGroup as $ } from "@react-aria/radio";
 import { VisuallyHidden as H } from "@react-aria/visually-hidden";
 import { useRadioGroupState as O } from "@react-stately/radio";
 import { FOCUS_STYLE as A } from "../../utilities/focusStyle.es.js";
-import { merge as h } from "../../utilities/merge.es.js";
+import { merge as v } from "../../utilities/merge.es.js";
 import { motion as B } from "framer-motion";
-import { forwardRef as T, useRef as L, useState as W, useMemo as X, useCallback as I, useEffect as z } from "react";
-const b = (u) => u.icon !== void 0, R = T((u, m) => {
-  const { id: p, item: e, disabled: s, radioGroupState: t, size: i } = u, o = L(null), l = e.id === t.selectedValue, { inputProps: x } = P(
+import { forwardRef as T, useRef as E, useState as W, useMemo as X, useCallback as N, useEffect as z } from "react";
+const h = (m) => m.icon !== void 0, k = T((m, f) => {
+  const { id: p, item: e, disabled: a, radioGroupState: t, size: d } = m, o = E(null), c = e.id === t.selectedValue, { inputProps: x } = P(
     {
       value: e.id,
-      "aria-label": b(e) ? e.ariaLabel : e.value.toString(),
-      isDisabled: s,
-      id: l ? p : void 0
+      "aria-label": h(e) ? e.ariaLabel : e.value.toString(),
+      isDisabled: a,
+      id: c ? p : void 0
     },
     t,
     o
-  ), { isFocusVisible: a, focusProps: v } = F(), d = () => {
+  ), { isFocusVisible: w, focusProps: S } = F(), s = () => {
     var g;
-    s || (t.setSelectedValue(e.id), (g = o.current) == null || g.focus(), M("pointer"));
-  }, S = () => {
+    a || (t.setSelectedValue(e.id), (g = o.current) == null || g.focus(), M("pointer"));
+  }, y = () => {
     switch (!0) {
-      case b(e):
+      case h(e):
         return "fondue-segmented-controls-item-icon";
       case typeof e.value == "string":
         return "fondue-segmented-controls-item-text";
@@ -35,37 +35,37 @@ const b = (u) => u.icon !== void 0, R = T((u, m) => {
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: m,
-      className: h([
+      ref: f,
+      className: v([
         "tw-relative",
         "after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden",
-        a && A
+        w && A
       ]),
-      children: /* @__PURE__ */ N(
+      children: /* @__PURE__ */ I(
         "div",
         {
           role: "none",
-          onClick: d,
-          "data-test-id": S(),
-          className: h([
+          onClick: s,
+          "data-test-id": y(),
+          className: v([
             "tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center",
-            i === "small" ? "tw-px-2" : "tw-px-4",
-            l && !s ? "tw-text-text" : "tw-text-text-weak",
-            s ? "tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed" : "hover:tw-text-text hover:tw-cursor-pointer"
+            d === "small" ? "tw-px-2" : "tw-px-4",
+            c && !a ? "tw-text-text" : "tw-text-text-weak",
+            a ? "tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed" : "hover:tw-text-text hover:tw-cursor-pointer"
           ]),
           children: [
             /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
               "input",
               {
                 ...x,
-                ...v,
+                ...S,
                 "data-test-id": "fondue-segmented-controls-input",
                 ref: o
               }
             ) }),
-            /* @__PURE__ */ N("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex", children: [
-              b(e) && /* @__PURE__ */ r("span", { className: "tw-leading-3", "aria-label": e.ariaLabel, children: e.icon }),
-              e.value && /* @__PURE__ */ r("span", { className: b(e) ? "tw-ml-2" : "", children: e.value.toString() })
+            /* @__PURE__ */ I("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex", children: [
+              h(e) && /* @__PURE__ */ r("span", { className: "tw-leading-3", "aria-label": e.ariaLabel, children: e.icon }),
+              e.value && /* @__PURE__ */ r("span", { className: h(e) ? "tw-ml-2" : "", children: e.value.toString() })
             ] })
           ]
         }
@@ -74,69 +74,70 @@ const b = (u) => u.icon !== void 0, R = T((u, m) => {
     e.id
   );
 });
-R.displayName = "SegmentedControlsItem";
+k.displayName = "SegmentedControlsItem";
 const U = ({
-  id: u,
-  items: m,
+  id: m,
+  items: f,
   activeItemId: p,
   onChange: e,
-  ariaLabel: s = "SegmentedControls",
+  ariaLabel: a = "SegmentedControls",
   disabled: t = !1,
-  hugWidth: i = !1,
+  hugWidth: d = !1,
   size: o
 }) => {
-  const l = j(u), x = { onChange: e, value: p, label: s, isDisabled: t }, a = O(x), { radioGroupProps: v } = $(x, a), d = L([]), [S, g] = W(null), E = X(() => m.map((c, w) => /* @__PURE__ */ r(
-    R,
+  const c = j(m), x = { onChange: e, value: p, label: a, isDisabled: t }, w = O(x), { radioGroupProps: S } = $(x, w), s = E([]), [y, g] = W(null), D = X(() => f.map((n, u) => /* @__PURE__ */ r(
+    k,
     {
-      id: l,
-      item: c,
+      id: c,
+      item: n,
       disabled: t,
-      radioGroupState: a,
-      ref: (n) => d.current[w] = n,
+      radioGroupState: w,
+      ref: (l) => s.current[u] = l,
       size: o
     },
-    `fondue-segmented-controls-${l}-item-${c.id}`
-  )), [m, l, t, a, o]), f = m.findIndex((c) => c.id === a.selectedValue), k = i ? "" : "tw-w-full", D = i ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly", G = I(() => {
-    var n;
-    let w = o === "small" || i ? -1 : 0;
-    for (let C = 0; C < f; C++)
-      w += ((n = d.current[C]) == null ? void 0 : n.clientWidth) ?? 0;
-    return `${w}px`;
-  }, [i, f, o]), V = I(() => {
-    var n;
-    const w = f === d.current.length - 1 ? 1 : -1;
-    return `${(((n = d.current[f]) == null ? void 0 : n.clientWidth) ?? 0) + w}px`;
-  }, [f]), y = () => {
-    g({ x: G(), width: V() });
-  };
-  return z(() => (y(), window.addEventListener("resize", y), () => {
-    window.removeEventListener("resize", y);
-  })), /* @__PURE__ */ r("div", { className: "tw-flex", children: /* @__PURE__ */ N(
+    `fondue-segmented-controls-${c}-item-${n.id}`
+  )), [f, c, t, w, o]), i = f.findIndex((n) => n.id === w.selectedValue), G = d ? "" : "tw-w-full", V = d ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly", L = N(() => {
+    var l;
+    let u = o === "small" || d ? -1 : 0;
+    for (let C = 0; C < i; C++)
+      u += ((l = s.current[C]) == null ? void 0 : l.clientWidth) ?? 0;
+    return `${u}px`;
+  }, [d, i, o]), R = N(() => {
+    var l;
+    const u = i === s.current.length - 1 ? 1 : -1;
+    return `${(((l = s.current[i]) == null ? void 0 : l.clientWidth) ?? 0) + u}px`;
+  }, [i]), b = N(() => {
+    const n = s.current ? { x: L(), width: R() } : { x: "0px", width: "0px" };
+    g(n);
+  }, [R, L]);
+  return z(() => (i >= 0 && b(), window.addEventListener("resize", b), () => {
+    window.removeEventListener("resize", b);
+  }), [i, b]), /* @__PURE__ */ r("div", { className: "tw-flex", children: /* @__PURE__ */ I(
     "fieldset",
     {
-      ...v,
+      ...S,
       "data-test-id": "fondue-segmented-controls",
-      className: h([
+      className: v([
         "tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none",
-        k,
-        D
+        G,
+        V
       ]),
       children: [
         /* @__PURE__ */ r(
           B.div,
           {
             "aria-hidden": "true",
-            animate: S ?? { x: "0px", width: "0px" },
+            animate: y ?? { x: "0px", width: "0px" },
             initial: !1,
             transition: { type: "tween", duration: 0.3 },
             hidden: !p,
-            className: h([
+            className: v([
               "tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none",
               t ? "tw-border-line-x-strong hover:tw-cursor-not-allowed" : "tw-border-line-xx-strong tw-bg-base"
             ])
           }
         ),
-        E
+        D
       ]
     }
   ) });

package/dist/components/SegmentedControls/SegmentedControls.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport { ReactElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string \| number;\n};\n\nexport type SegmentSize = 'small' \| 'medium';\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem \| IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n hugWidth?: boolean;\n size?: SegmentSize;\n};\n\nconst isIconItem = (item: TextOrNumberItem \| IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem \| IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n size?: SegmentSize;\n}\n\nconst SegmentedControlsItem = forwardRef<HTMLDivElement, SegmentedControlsItemProps>((props, ref) => {\n const { id, item, disabled, radioGroupState, size } = props;\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n inputRef,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n inputRef.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div\n key={item.id}\n ref={ref}\n className={merge([\n 'tw-relative',\n \"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden\",\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n size === 'small' ? 'tw-px-2' : 'tw-px-4',\n isActive && !disabled ? 'tw-text-text' : 'tw-text-text-weak',\n disabled\n ? 'tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed'\n : 'hover:tw-text-text hover:tw-cursor-pointer',\n ])}\n >\n <VisuallyHidden>\n <input\n {...inputProps}\n {...focusProps}\n data-test-id=\"fondue-segmented-controls-input\"\n ref={inputRef}\n />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n});\n\nSegmentedControlsItem.displayName = 'SegmentedControlsItem';\n\nexport const SegmentedControls = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n hugWidth = false,\n size,\n}: SegmentedControlsProps): ReactElement => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemsRef = useRef<(HTMLDivElement \| null)[]>([]);\n const [activeBorderDimensions, setActiveBorderDimensions] = useState<{ x: string; width: string } \| null>(null);\n const itemElements = useMemo(() => {\n return items.map((item, index) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n ref={(el) => (itemsRef.current[index] = el)}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n size={size}\n />\n ));\n }, [items, id, disabled, radioGroupState, size]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n const width = hugWidth ? '' : 'tw-w-full';\n const alignment = hugWidth ? 'tw-flex' : 'tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly';\n\n const getSliderX = useCallback(() => {\n const isSmallOrHugWidth = size === 'small' \|\| hugWidth;\n let translateX = isSmallOrHugWidth ? -1 : 0;\n for (let i = 0; i < selectedIndex; i++) {\n translateX += itemsRef.current[i]?.clientWidth ?? 0;\n }\n\n return `${translateX}px`;\n }, [hugWidth, selectedIndex, size]);\n\n const getSliderWidth = useCallback(() => {\n const isLastElement = selectedIndex === itemsRef.current.length - 1;\n const width = isLastElement ? 1 : -1;\n\n return `${(itemsRef.current[selectedIndex]?.clientWidth ?? 0) + width}px`;\n }, [selectedIndex]);\n\n const setSliderDimensions = () => {\n setActiveBorderDimensions({ x: getSliderX(), width: getSliderWidth() });\n };\n\n useEffect(() => {\n setSliderDimensions();\n window.addEventListener('resize', setSliderDimensions);\n\n return () => {\n window.removeEventListener('resize', setSliderDimensions);\n };\n });\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className={merge([\n 'tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none',\n width,\n alignment,\n ])}\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={activeBorderDimensions ?? { x: '0px', width: '0px' }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong hover:tw-cursor-not-allowed'\n : 'tw-border-line-xx-strong tw-bg-base',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","forwardRef","props","ref","id","disabled","radioGroupState","size","inputRef","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","jsx","merge","FOCUS_STYLE","jsxs","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","hugWidth","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemsRef","activeBorderDimensions","setActiveBorderDimensions","useState","itemElements","useMemo","index","el","selectedIndex","width","alignment","getSliderX","useCallback","translateX","i","getSliderWidth","setSliderDimensions","useEffect","motion"],"mappings":"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"}
1	+ {"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport { ReactElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string \| number;\n};\n\nexport type SegmentSize = 'small' \| 'medium';\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem \| IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n hugWidth?: boolean;\n size?: SegmentSize;\n};\n\nconst isIconItem = (item: TextOrNumberItem \| IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem \| IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n size?: SegmentSize;\n}\n\nconst SegmentedControlsItem = forwardRef<HTMLDivElement, SegmentedControlsItemProps>((props, ref) => {\n const { id, item, disabled, radioGroupState, size } = props;\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n inputRef,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n inputRef.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div\n key={item.id}\n ref={ref}\n className={merge([\n 'tw-relative',\n \"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden\",\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n size === 'small' ? 'tw-px-2' : 'tw-px-4',\n isActive && !disabled ? 'tw-text-text' : 'tw-text-text-weak',\n disabled\n ? 'tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed'\n : 'hover:tw-text-text hover:tw-cursor-pointer',\n ])}\n >\n <VisuallyHidden>\n <input\n {...inputProps}\n {...focusProps}\n data-test-id=\"fondue-segmented-controls-input\"\n ref={inputRef}\n />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n});\n\nSegmentedControlsItem.displayName = 'SegmentedControlsItem';\n\nexport const SegmentedControls = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n hugWidth = false,\n size,\n}: SegmentedControlsProps): ReactElement => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemsRef = useRef<(HTMLDivElement \| null)[]>([]);\n const [activeBorderDimensions, setActiveBorderDimensions] = useState<{ x: string; width: string } \| null>(null);\n const itemElements = useMemo(() => {\n return items.map((item, index) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n ref={(el) => (itemsRef.current[index] = el)}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n size={size}\n />\n ));\n }, [items, id, disabled, radioGroupState, size]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n const width = hugWidth ? '' : 'tw-w-full';\n const alignment = hugWidth ? 'tw-flex' : 'tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly';\n\n const getSliderX = useCallback(() => {\n const isSmallOrHugWidth = size === 'small' \|\| hugWidth;\n let translateX = isSmallOrHugWidth ? -1 : 0;\n for (let i = 0; i < selectedIndex; i++) {\n translateX += itemsRef.current[i]?.clientWidth ?? 0;\n }\n\n return `${translateX}px`;\n }, [hugWidth, selectedIndex, size]);\n\n const getSliderWidth = useCallback(() => {\n const isLastElement = selectedIndex === itemsRef.current.length - 1;\n const width = isLastElement ? 1 : -1;\n\n return `${(itemsRef.current[selectedIndex]?.clientWidth ?? 0) + width}px`;\n }, [selectedIndex]);\n\n const setSliderDimensions = useCallback(() => {\n const dimensions = itemsRef.current ? { x: getSliderX(), width: getSliderWidth() } : { x: '0px', width: '0px' };\n setActiveBorderDimensions(dimensions);\n }, [getSliderWidth, getSliderX]);\n\n useEffect(() => {\n if (selectedIndex >= 0) {\n setSliderDimensions();\n }\n window.addEventListener('resize', setSliderDimensions);\n\n return () => {\n window.removeEventListener('resize', setSliderDimensions);\n };\n }, [selectedIndex, setSliderDimensions]);\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className={merge([\n 'tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none',\n width,\n alignment,\n ])}\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={activeBorderDimensions ?? { x: '0px', width: '0px' }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong hover:tw-cursor-not-allowed'\n : 'tw-border-line-xx-strong tw-bg-base',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","forwardRef","props","ref","id","disabled","radioGroupState","size","inputRef","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","jsx","merge","FOCUS_STYLE","jsxs","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","hugWidth","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemsRef","activeBorderDimensions","setActiveBorderDimensions","useState","itemElements","useMemo","index","el","selectedIndex","width","alignment","getSliderX","useCallback","translateX","i","getSliderWidth","setSliderDimensions","dimensions","useEffect","motion"],"mappings":"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"}