@frontify/fondue-components 16.0.4 → 17.0.0

package/dist/fondue-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components20.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Specify if the segmented control should only take the width of its content\n     * @default true\n     */\n    hugWidth?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    {\n        children,\n        value: propsValue,\n        defaultValue,\n        onValueChange,\n        hugWidth = true,\n        ...rootProps\n    }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            data-hug-width={hugWidth}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","hugWidth","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAqCO,MAAMA,IAAuB,CAChC;AAAA,EACI,UAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMR;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAO;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,kBAAgBH;AAAA,MAChB,iBAAeC,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAL;AAAA,QAEA,gBAAAa,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAER;AACAb,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAZ,GAAS;AAAA,IAGlD,gBAAAa,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAZ,EAAS,CAAA;AAAA,EAAA,EACzD,CAAA;AAAA,EACJ,CAAA;AAEJc,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAsDlB,CAAoB;AAAA,EAChF,MAAMkB,EAAyDH,CAAoB;AACvF;"}
+{"version":3,"file":"fondue-components20.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps<TValue extends string = string> = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: TValue;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: TValue;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: TValue) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Specify if the segmented control should only take the width of its content\n     * @default true\n     */\n    hugWidth?: boolean;\n};\n\nexport const SegmentedControlRoot = <TValue extends string = string>(\n    {\n        children,\n        value: propsValue,\n        defaultValue,\n        onValueChange,\n        hugWidth = true,\n        ...rootProps\n    }: SegmentedControlRootProps<TValue>,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value as TValue);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            data-hug-width={hugWidth}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef(SegmentedControlRoot) as <TValue extends string = string>(\n        props: SegmentedControlRootProps<TValue> & { ref?: ForwardedRef<HTMLDivElement> },\n    ) => ReactElement,\n    Item: forwardRef(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","hugWidth","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAqCO,MAAMA,IAAuB,CAChC;AAAA,EACI,UAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMR;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAO;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAe;AAAA,MAEhC;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,kBAAgBH;AAAA,MAChB,iBAAeC,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAL;AAAA,QAEA,gBAAAa,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAER;AACAb,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAZ,GAAS;AAAA,IAGlD,gBAAAa,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAZ,EAAS,CAAA;AAAA,EAAA,EACzD,CAAA;AAAA,EACJ,CAAA;AAEJc,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAWlB,CAAoB;AAAA,EAGrC,MAAMkB,EAAWH,CAAoB;AACzC;"}

package/dist/fondue-components32.js

@@ -1,4 +1,4 @@
-const o = "_root_yrjuz_5", t = {
+const o = "_root_5sic9_5", t = {
   root: o
 };
 export {

package/dist/fondue-components49.js

@@ -1,4 +1,4 @@
-const o = "_root_gh190_5", t = {
+const o = "_root_1l1i0_5", t = {
   root: o
 };
 export {

package/dist/fondue-components51.js

@@ -1,4 +1,4 @@
-const o = "_root_umks5_5", t = {
+const o = "_root_1hsz1_5", t = {
   root: o
 };
 export {

package/dist/fondue-components56.js

@@ -1,4 +1,4 @@
-const o = "_root_yrjuz_5", t = {
+const o = "_root_5sic9_5", t = {
   root: o
 };
 export {

package/dist/fondue-components59.js

@@ -1,66 +1,66 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { IconCaretDown as q, IconCheckMark as G, IconExclamationMarkTriangle as J } from "@frontify/fondue-icons";
-import * as w from "@radix-ui/react-popover";
+import * as N from "@radix-ui/react-popover";
 import { Slot as K } from "@radix-ui/react-slot";
 import { useCombobox as Q } from "downshift";
 import { forwardRef as U, useState as W, useRef as X, useMemo as Y } from "react";
 import { SelectMenu as Z } from "./fondue-components61.js";
 import o from "./fondue-components63.js";
 import { useSelectData as _ } from "./fondue-components64.js";
-const N = ({
-  children: S,
+const S = ({
+  children: B,
   onSelect: l,
-  value: B,
-  defaultValue: O,
-  placeholder: R = "",
+  value: O,
+  defaultValue: R,
+  placeholder: v = "",
   status: s = "neutral",
   disabled: g,
   "data-test-id": i = "fondue-select-combobox",
-  alignMenu: v = "start",
-  side: M = "bottom",
-  id: y,
-  viewportCollisionPadding: F = "compact",
+  alignMenu: M = "start",
+  side: y = "bottom",
+  id: F,
+  viewportCollisionPadding: L = "compact",
   ...a
-}, L) => {
-  const { inputSlots: P, menuSlots: k, items: c, filterText: D, clearButton: f, getItemByValue: p, setFilterText: H } = _(S), [T, h] = W(!1), {
+}, P) => {
+  const { inputSlots: k, menuSlots: D, items: c, filterText: H, clearButton: f, getItemByValue: p, setFilterText: h } = _(B), [T, b] = W(!1), {
     getInputProps: u,
     getToggleButtonProps: V,
     getMenuProps: z,
     getItemProps: j,
-    reset: b,
+    reset: C,
     selectedItem: r,
     isOpen: $,
     highlightedIndex: A,
     inputValue: d
   } = Q({
     items: c,
-    selectedItem: p(B),
-    defaultSelectedItem: p(O),
+    selectedItem: p(O),
+    defaultSelectedItem: p(R),
     defaultHighlightedIndex: 0,
-    toggleButtonId: y,
+    toggleButtonId: F,
     labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
     onSelectedItemChange: ({ selectedItem: e }) => {
       l == null || l((e == null ? void 0 : e.value) ?? null);
     },
     onInputValueChange: ({ inputValue: e }) => {
-      H(e);
+      h(e);
     },
     onIsOpenChange: () => {
-      h(!1);
+      b(!1), h("");
     },
     onHighlightedIndexChange: () => {
-      h(!0);
+      b(!0);
     },
     itemToString: (e) => e ? e.label : ""
-  }), n = X(!1), C = Y(
+  }), n = X(!1), x = Y(
     () => !c.find((e) => e.label.toLowerCase().includes(d.toLowerCase())),
     [d, c]
   ), E = (e) => {
-    var x, I;
-    e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && b(), u().onBlur && ((I = (x = u()).onBlur) == null || I.call(x, e));
+    var I, w;
+    e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && C(), u().onBlur && ((w = (I = u()).onBlur) == null || w.call(I, e));
   };
-  return /* @__PURE__ */ m(w.Root, { open: $, children: [
-    /* @__PURE__ */ t(w.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: L, className: o.root, "data-status": C ? "error" : s, children: [
+  return /* @__PURE__ */ m(N.Root, { open: $, children: [
+    /* @__PURE__ */ t(N.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: P, className: o.root, "data-status": x ? "error" : s, children: [
       /* @__PURE__ */ t(
         "input",
         {
@@ -68,7 +68,7 @@ const N = ({
             "aria-label": "aria-label" in a ? a["aria-label"] : void 0
           }),
           "data-test-id": i,
-          placeholder: R,
+          placeholder: v,
           className: o.input,
           disabled: g,
           onMouseDown: (e) => {
@@ -80,12 +80,12 @@ const N = ({
           onBlur: E
         }
       ),
-      P,
+      k,
       f && /* @__PURE__ */ t(
         K,
         {
           onClick: (e) => {
-            e.stopPropagation(), b();
+            e.stopPropagation(), C();
           },
           className: o.clear,
           role: "button",
@@ -114,7 +114,7 @@ const N = ({
             "data-test-id": `${i}-success-icon`
           }
         ) : null,
-        C || s === "error" ? /* @__PURE__ */ t(
+        x || s === "error" ? /* @__PURE__ */ t(
           J,
           {
             size: 16,
@@ -127,24 +127,24 @@ const N = ({
     /* @__PURE__ */ t(
       Z,
       {
-        align: v,
-        side: M,
+        align: M,
+        side: y,
         highlightedIndex: A,
-        filterText: D,
+        filterText: H,
         getMenuProps: z,
         getItemProps: j,
         selectedItem: r,
         hasInteractedSinceOpening: T,
-        viewportCollisionPadding: F,
-        children: k
+        viewportCollisionPadding: L,
+        children: D
       }
     )
   ] });
 };
-N.displayName = "Select.Combobox";
-const ce = U(N);
+S.displayName = "Select.Combobox";
+const ce = U(S);
 export {
   ce as ForwardedRefCombobox,
-  N as SelectCombobox
+  S as SelectCombobox
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components59.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        viewportCollisionPadding = 'compact',\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end' /**\n     * Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * Id of the combobox component\n     */\n    id?: string;\n    /**\n     * The data test id of the combobox component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        viewportCollisionPadding = 'compact',\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        selectedItem,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        selectedItem: getItemByValue(value),\n        defaultSelectedItem: getItemByValue(defaultValue),\n        defaultHighlightedIndex: 0,\n        toggleButtonId: id,\n        labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect?.(selectedItem?.value ?? null);\n        },\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        onIsOpenChange: () => {\n            setHasInteractedSinceOpening(false);\n            setFilterText('');\n        },\n        onHighlightedIndexChange: () => {\n            setHasInteractedSinceOpening(true);\n        },\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n\n    const valueInvalid = useMemo(\n        () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n        blurEvent.target.dataset.showFocusRing = 'false';\n        wasClicked.current = false;\n\n        const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n        if (selectedItemNullOrOutdated) {\n            // if there is no selection or\n            // the existing selected value is not the same as the input value (old),\n            // reset the input\n            reset();\n        }\n\n        if (getInputProps().onBlur) {\n            getInputProps().onBlur?.(blurEvent);\n        }\n    };\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n                    <input\n                        {...getInputProps({\n                            'aria-label': 'aria-label' in props ? props['aria-label'] : undefined,\n                        })}\n                        data-test-id={dataTestId}\n                        placeholder={placeholder}\n                        className={styles.input}\n                        disabled={disabled}\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={onBlurHandler}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <button\n                            aria-label=\"toggle menu\"\n                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            disabled={disabled}\n                            onMouseDown={() => {\n                                wasClicked.current = true;\n                            }}\n                        >\n                            <IconCaretDown size={16} className={styles.caret} />\n                        </button>\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {valueInvalid || status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","dataTestId","alignMenu","side","id","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;AAoEO,MAAMA,IAAiB,CAC1B;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,IAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACP,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,EAAA,IAC3EC,EAAcrB,CAAQ,GAEpB,CAACsB,GAA2BC,CAA4B,IAAIC,EAAS,EAAK,GAE1E;AAAA,IACF,eAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,MACAC,EAAY;AAAA,IACZ,OAAAlB;AAAA,IACA,cAAcG,EAAejB,CAAK;AAAA,IAClC,qBAAqBiB,EAAehB,CAAY;AAAA,IAChD,yBAAyB;AAAA,IACzB,gBAAgBO;AAAA,IAChB,SAAS,qBAAqBE,IAAQA,EAAM,iBAAiB,IAAI;AAAA,IACjE,sBAAsB,CAAC,EAAE,cAAAkB,QAAmB;AAC7BA,MAAAA,KAAAA,QAAAA,GAAAA,KAAAA,gBAAAA,EAAc,UAAS;AAAA,IACtC;AAAA,IACA,oBAAoB,CAAC,EAAE,YAAAG,QAAiB;AACpC,MAAAb,EAAca,CAAU;AAAA,IAC5B;AAAA,IACA,gBAAgB,MAAM;AAClB,MAAAV,EAA6B,EAAK,GAClCH,EAAc,EAAE;AAAA,IACpB;AAAA,IACA,0BAA0B,MAAM;AAC5B,MAAAG,EAA6B,EAAI;AAAA,IACrC;AAAA,IACA,cAAc,CAACY,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,EAAO,EAAK,GAEzBC,IAAeC;AAAA,IACjB,MAAM,CAACvB,EAAM,KAAK,CAACmB,MAASA,EAAK,MAAM,YAAc,EAAA,SAASF,EAAW,YAAa,CAAA,CAAC;AAAA,IACvF,CAACA,GAAYjB,CAAK;AAAA,EACtB,GAEMwB,IAAgB,CAACC,MAAqD;;AAC9D,IAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCL,EAAW,UAAU,KAEcN,KAAA,gBAAAA,EAAc,MAAM,yBAAwBG,EAAW,kBAAkB,KAMlGJ,EAAA,GAGNJ,IAAgB,YACFiB,KAAAC,IAAAlB,EAAA,GAAE,WAAF,QAAAiB,EAAA,KAAAC,GAAWF;AAAA,EAEjC;AAEA,SACK,gBAAAG,EAAAC,EAAa,MAAb,EAAkB,MAAMd,GACrB,UAAA;AAAA,IAAA,gBAAAe,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAC,gBAAAD,EAAA,OAAA,EAAI,KAAK/B,GAAc,WAAWkC,EAAO,MAAM,eAAaT,IAAe,UAAUjC,GAClF,UAAA;AAAA,MAAA,gBAAAyC;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGrB,EAAc;AAAA,YACd,cAAc,gBAAgBb,IAAQA,EAAM,YAAY,IAAI;AAAA,UAAA,CAC/D;AAAA,UACD,gBAAcL;AAAA,UACd,aAAAH;AAAA,UACA,WAAW2C,EAAO;AAAA,UAClB,UAAAzC;AAAA,UACA,aAAa,CAAC0C,MAAe;AACzB,YAAAZ,EAAW,UAAU,IACVY,EAAA,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,SAAS,CAACC,MAAe;AACjB,YAACb,EAAW,YACDa,EAAA,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQT;AAAA,QAAA;AAAA,MACZ;AAAA,MACC1B;AAAA,MACAI,KACG,gBAAA4B;AAAA,QAACI;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAgB,GAChBtB,EAAA;AAAA,UACV;AAAA,UACA,WAAWkB,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAA7B;AAAA,QAAA;AAAA,MACL;AAAA,MAEH,gBAAA0B,EAAA,OAAA,EAAI,WAAWG,EAAO,OACnB,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,cAAW;AAAA,YACV,GAAGpB,EAAqB;AAAA,YACzB,MAAK;AAAA,YACL,UAAApB;AAAA,YACA,aAAa,MAAM;AACf,cAAA8B,EAAW,UAAU;AAAA,YACzB;AAAA,YAEA,4BAACgB,GAAc,EAAA,MAAM,IAAI,WAAWL,EAAO,MAAO,CAAA;AAAA,UAAA;AAAA,QACtD;AAAA,QACC1C,MAAW,YACR,gBAAAyC;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWN,EAAO;AAAA,YAClB,gBAAc,GAAGxC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QACH+B,KAAgBjC,MAAW,UACxB,gBAAAyC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWP,EAAO;AAAA,YAClB,gBAAc,GAAGxC,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,MAAA,EACR,CAAA;AAAA,IAAA,EAAA,CACJ,EACJ,CAAA;AAAA,IAEA,gBAAAuC;AAAA,MAACS;AAAA,MAAA;AAAA,QACG,OAAO/C;AAAA,QACP,MAAAC;AAAA,QACA,kBAAAuB;AAAA,QACA,YAAAf;AAAA,QACA,cAAAU;AAAA,QACA,cAAAC;AAAA,QACA,cAAAE;AAAA,QACA,2BAAAR;AAAA,QACA,0BAAAX;AAAA,QAEC,UAAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AACAhB,EAAe,cAAc;AAEhB,MAAAyD,KAAuBC,EAA0C1D,CAAc;"}

package/dist/index.d.ts

@@ -1310,7 +1310,9 @@ children?: ReactNode;
 } & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 export declare const SegmentedControl: {
-    Root: ForwardRefExoticComponent<SegmentedControlRootProps & RefAttributes<HTMLDivElement>>;
+    Root: <TValue extends string = string>(props: SegmentedControlRootProps<TValue> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }) => ReactElement;
     Item: ForwardRefExoticComponent<SegmentedControlItemProps & RefAttributes<HTMLButtonElement>>;
 };
 
@@ -1319,22 +1321,22 @@ declare type SegmentedControlItemProps = {
     value: string;
 };
 
-declare type SegmentedControlRootProps = {
+declare type SegmentedControlRootProps<TValue extends string = string> = {
     id?: string;
     children: ReactNode;
     /**
      * The default value of the segmented control
      * Used for uncontrolled components
      */
-    defaultValue: string;
+    defaultValue: TValue;
     /**
      * The controlled value of the segmented control
      */
-    value?: string;
+    value?: TValue;
     /**
      * Event handler called when the value changes
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: TValue) => void;
     /**
      * Disable the segmented control
      * @default false