@frontify/fondue-components 12.0.1 → 13.0.1

package/dist/fondue-components57.js

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

package/dist/fondue-components57.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components57.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components57.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 { SelectMenu } 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 select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */;\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The aria label of the combobox component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n        alignMenu = 'start',\n        side = 'bottom',\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        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': ariaLabel,\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                            {...getToggleButtonProps()}\n                            type=\"button\"\n                            aria-label=\"toggle menu\"\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            >\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","ariaLabel","dataTestId","alignMenu","side","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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"}

package/dist/fondue-components58.js

@@ -1,16 +1,19 @@
-const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
-  root: m,
-  small: t,
-  medium: _,
-  large: o,
-  thumb: r
-};
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { IconCheckMark as l } from "@frontify/fondue-icons";
+import { forwardRef as c } from "react";
+import o from "./fondue-components61.js";
+const d = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ i("li", { "data-test-id": t, ref: r, ...e, children: [
+  /* @__PURE__ */ a("div", { className: o.itemValue, children: e.children }),
+  /* @__PURE__ */ a(l, { className: o.checkmarkIcon })
+] });
+d.displayName = "Select.Item";
+const I = c(d), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ a("div", { "data-test-id": r, className: o.group, ref: s, children: t }, e);
+m.displayName = "Select.Group";
+const S = c(m);
 export {
-  s as default,
-  o as large,
-  _ as medium,
-  m as root,
-  t as small,
-  r as thumb
+  I as ForwardedRefSelectItem,
+  S as ForwardedRefSelectItemGroup,
+  d as SelectItem,
+  m as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components58.js.map

package/dist/fondue-components58.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components58.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"fondue-components58.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,wBAGK,MAAG,EAAA,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAI,EAAA,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EACjD,gBAAAD,EAAAE,GAAA,EAAc,WAAWD,EAAO,cAAe,CAAA;AAAA,GACpD;AAGRL,EAAW,cAAc;AAEZ,MAAAO,IAAyBC,EAA2CR,CAAU,GAiB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBV,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAAO,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAG,IAA8BJ,EAAiDC,CAAe;"}

package/dist/fondue-components59.js

@@ -1,11 +1,76 @@
-import { useEffect as f } from "react";
-import { syncRefs as o } from "./fondue-components38.js";
-const m = (s, e) => {
-  f(() => {
-    o(s, e);
-  }, [s]);
+import { jsx as r } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-popover";
+import { Slot as g } from "@radix-ui/react-slot";
+import { isValidElement as C } from "react";
+import { useFondueTheme as N, ThemeProvider as O } from "./fondue-components27.js";
+import n from "./fondue-components61.js";
+import { recursiveMap as V, getSelectOptionValue as F } from "./fondue-components76.js";
+const M = ({
+  highlightedIndex: l,
+  getMenuProps: m,
+  getItemProps: p,
+  children: u,
+  filterText: c,
+  align: d,
+  side: f,
+  selectedItem: t,
+  hasInteractedSinceOpening: h
+}) => {
+  const v = (e) => {
+    e.preventDefault();
+  }, P = N();
+  return /* @__PURE__ */ r(s.Portal, { children: /* @__PURE__ */ r(O, { theme: P, children: /* @__PURE__ */ r(
+    s.Content,
+    {
+      align: d,
+      side: f,
+      collisionPadding: 16,
+      onOpenAutoFocus: v,
+      className: n.portal,
+      children: /* @__PURE__ */ r(
+        "ul",
+        {
+          className: n.menu,
+          ...m(),
+          "data-has-interacted": h ? "true" : "false",
+          "data-test-id": "fondue-select-menu",
+          children: V(
+            u,
+            (e, i) => {
+              if (((o) => (
+                // @ts-expect-error - We are explicitly checking for ref
+                C(o) && o.ref !== void 0
+              ))(e)) {
+                const o = F(e.props), a = p({
+                  item: o,
+                  index: i,
+                  ...e.ref ? { ref: e.ref } : {}
+                });
+                return /* @__PURE__ */ r(
+                  g,
+                  {
+                    className: n.item,
+                    "data-highlighted": l === i,
+                    "data-selected": (t == null ? void 0 : t.value) === o.value,
+                    onTouchStart: (S) => {
+                      a.onClick && a.onClick(S);
+                    },
+                    ...a,
+                    children: e
+                  },
+                  e.props.value
+                );
+              }
+            },
+            c
+          ).parsedChildren
+        }
+      )
+    }
+  ) }) });
 };
+M.displayName = "Select.Menu";
 export {
-  m as useSyncRefs
+  M as SelectMenu
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components59.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components59.js","sources":["../src/hooks/useSyncRefs.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, useEffect, type RefObject } from 'react';\n\nimport { syncRefs } from '#/utilities/domUtilities';\n\n/**\n * A custom React hook that synchronizes a local ref with a forwarded ref.\n * This is useful when you need to maintain both an internal reference to a DOM element\n * and allow external access through a forwarded ref.\n *\n * @template TElement - The type of the DOM element being referenced. Defaults to HTMLElement.\n * @param {RefObject<TElement>} localRef - The local ref object used internally by the component.\n * @param {ForwardedRef<TElement>} forwardedRef - The ref forwarded from a parent component.\n *\n * @example\n * ```tsx\n * const MyComponent = forwardRef<HTMLDivElement>((props, ref) => {\n *   const localRef = useRef<HTMLDivElement>(null);\n *   useSyncRefs(localRef, ref);\n *\n *   return <div ref={localRef}>Content</div>;\n * });\n * ```\n */\nexport const useSyncRefs = <TElement = HTMLElement>(\n    localRef: RefObject<TElement>,\n    forwardedRef: ForwardedRef<TElement>,\n) => {\n    useEffect(() => {\n        syncRefs<TElement>(localRef, forwardedRef);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [localRef]);\n};\n"],"names":["useSyncRefs","localRef","forwardedRef","useEffect","syncRefs"],"mappings":";;AAyBa,MAAAA,IAAc,CACvBC,GACAC,MACC;AACD,EAAAC,EAAU,MAAM;AACZ,IAAAC,EAAmBH,GAAUC,CAAY;AAAA,EAAA,GAE1C,CAACD,CAAQ,CAAC;AACjB;"}
+{"version":3,"file":"fondue-components59.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItem?: {\n        value: string;\n    } | null;\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixPopover.Content\n                    align={align}\n                    side={side}\n                    collisionPadding={16}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        {...getMenuProps()}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={selectedItem?.value === optionData.value}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","handleOnOpenAutoFocus","event","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AAiEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AACJ,MAAuB;AACb,QAAAC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe;AAAA,EACzB,GAEMC,IAAQC,EAAe;AAC7B,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAR;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkB;AAAA,MAClB,iBAAiBG;AAAA,MACjB,WAAWO,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UACjB,GAAGf,EAAa;AAAA,UACjB,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAS;AAAA,YACId;AAAA,YACA,CAACe,GAAOC,MAAU;AAOV,mBANY,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AAC3B,sBAAAG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYrB,EAAa;AAAA,kBAC3B,MAAMmB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC;AAGG,uBAAA,gBAAAJ;AAAA,kBAACU;AAAAA,kBAAA;AAAA,oBACG,WAAWR,EAAO;AAAA,oBAClB,oBAAkBhB,MAAqBmB;AAAA,oBACvC,kBAAeZ,KAAA,gBAAAA,EAAc,WAAUc,EAAW;AAAA,oBAGlD,cAAc,CAACX,MAAU;AACrB,sBAAIa,EAAU,WACVA,EAAU,QAAQb,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGa;AAAA,oBAEH,UAAAL;AAAA,kBAAA;AAAA,kBATIA,EAAM,MAAM;AAAA,gBAUrB;AAAA,cAAA;AAAA,YAGZ;AAAA,YACAd;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,KAER,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components6.js

@@ -1,11 +1,11 @@
 import { jsx as i } from "react/jsx-runtime";
 import { Slot as u } from "@radix-ui/react-slot";
 import { forwardRef as k, useState as R, Children as P } from "react";
-import { ForwardedRefColorGradientInput as F } from "./fondue-components33.js";
-import { ForwardedRefColorPickerInput as y } from "./fondue-components34.js";
-import { ForwardedRefColorValueInput as N } from "./fondue-components35.js";
-import I from "./fondue-components36.js";
-import { getColorWithName as d, DEFAULT_COLOR as w, DEFAULT_FORMAT as h } from "./fondue-components37.js";
+import { ForwardedRefColorGradientInput as F } from "./fondue-components36.js";
+import { ForwardedRefColorPickerInput as y } from "./fondue-components37.js";
+import { ForwardedRefColorValueInput as N } from "./fondue-components38.js";
+import I from "./fondue-components39.js";
+import { getColorWithName as d, DEFAULT_COLOR as w, DEFAULT_FORMAT as h } from "./fondue-components40.js";
 const m = ({
   children: t,
   currentColor: o = w,

package/dist/fondue-components60.js

@@ -1,16 +1,11 @@
-import { useEffect as c } from "react";
-const s = (t) => {
-  c(() => {
-    if (!t.current)
-      return;
-    const e = t.current, n = new ResizeObserver(() => {
-      const r = e.scrollWidth > e.clientWidth;
-      e.title = r && e.textContent || "";
-    });
-    return n.observe(e), () => n.disconnect();
-  }, [t]);
-};
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import m from "./fondue-components61.js";
+const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
+t.displayName = "Select.Slot";
+const S = d(t);
 export {
-  s as useTextTruncation
+  S as ForwardedRefSelectSlot,
+  t as SelectSlot
 };
 //# sourceMappingURL=fondue-components60.js.map

package/dist/fondue-components60.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components60.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBa,MAAAA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACR,QAAA,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AAChC,YAAAC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IAAK,CAC7D;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAW;AAAA,EAAA,GAClC,CAACH,CAAG,CAAC;AACZ;"}
+{"version":3,"file":"fondue-components60.js","sources":["../src/components/Select/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBa,MAAAA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9EC,MAGK,gBAAAC,EAAA,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAEZ,MAAAQ,IAAyBC,EAA4CT,CAAU;"}

package/dist/fondue-components61.js

@@ -1,24 +1,36 @@
-const t = "_table_tkqa4_4", o = "_headerCell_tkqa4_18", _ = "_rowCell_tkqa4_19", a = "_caption_tkqa4_46", n = "_sortButton_tkqa4_71", e = "_buttonText_tkqa4_89", r = "_sortIndicator_tkqa4_98", s = "_body_tkqa4_102", l = "_row_tkqa4_19", c = {
-  table: t,
-  headerCell: o,
-  rowCell: _,
-  caption: a,
-  sortButton: n,
-  buttonText: e,
-  sortIndicator: r,
-  body: s,
-  row: l
+const c = "_root_kbigm_6", o = "_selectedValue_kbigm_68", _ = "_input_kbigm_80", t = "_slot_kbigm_106", e = "_clear_kbigm_158", n = "_icons_kbigm_171", s = "_caret_kbigm_177", i = "_iconSuccess_kbigm_205", r = "_iconError_kbigm_211", m = "_menu_kbigm_217", k = "_portal_kbigm_238", a = "_item_kbigm_254", l = "_checkmarkIcon_kbigm_279", u = "_itemValue_kbigm_286", g = "_group_kbigm_300", b = {
+  root: c,
+  selectedValue: o,
+  input: _,
+  slot: t,
+  clear: e,
+  icons: n,
+  caret: s,
+  iconSuccess: i,
+  iconError: r,
+  menu: m,
+  portal: k,
+  item: a,
+  checkmarkIcon: l,
+  itemValue: u,
+  group: g
 };
 export {
-  s as body,
-  e as buttonText,
-  a as caption,
-  c as default,
-  o as headerCell,
-  l as row,
-  _ as rowCell,
-  n as sortButton,
-  r as sortIndicator,
-  t as table
+  s as caret,
+  l as checkmarkIcon,
+  e as clear,
+  b as default,
+  g as group,
+  r as iconError,
+  i as iconSuccess,
+  n as icons,
+  _ as input,
+  a as item,
+  u as itemValue,
+  m as menu,
+  k as portal,
+  c as root,
+  o as selectedValue,
+  t as slot
 };
 //# sourceMappingURL=fondue-components61.js.map

package/dist/fondue-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components61.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/fondue-components62.js

@@ -1,18 +1,52 @@
-function l(t, r) {
-  const n = 'tr[tabindex="0"]', e = t.closest("table");
-  if (!e)
-    return null;
-  const o = Array.from(e.querySelectorAll(n)), c = o.indexOf(t) + (r === "ArrowUp" ? -1 : 1);
-  return c >= 0 && c < o.length ? o[c] : null;
-}
-function u(t) {
-  const r = t.target, n = r.closest("tr");
-  if (!n || r !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
-    return;
-  const e = l(n, t.key);
-  e && (t.preventDefault(), e.focus());
-}
+import { jsx as w } from "react/jsx-runtime";
+import { IconCross as x } from "@frontify/fondue-icons";
+import { useState as B, useMemo as i, Children as f, isValidElement as u, cloneElement as E, useCallback as F } from "react";
+import { ForwardedRefSelectItem as I } from "./fondue-components58.js";
+import { ForwardedRefSelectSlot as c } from "./fondue-components60.js";
+import { getSelectOptionValue as R } from "./fondue-components76.js";
+const S = (r) => {
+  const t = [];
+  return f.forEach(r, (o) => {
+    if (u(o) && o.type === I)
+      t.push(R(o.props));
+    else if (u(o) && o.props.children) {
+      const a = S(o.props.children);
+      for (const l of a)
+        t.push(l);
+    }
+  }), t;
+}, z = (r) => {
+  const [t, o] = B(""), { inputSlots: a, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
+    const s = [], n = [];
+    let m;
+    f.toArray(r).some(
+      (e) => u(e) && e.type === c
+    ) ? f.forEach(r, (e) => {
+      u(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
+    }) : n.push(r);
+    const g = S(n);
+    return { inputSlots: s, menuSlots: n, itemValues: g, clearButton: m };
+  }, [r]), y = i(
+    () => p.filter(
+      (s) => t === "" || s.label.toLowerCase().includes(t.toLowerCase())
+    ),
+    [p, t]
+  ), C = F(
+    (s) => s ? p.find((n) => n.value === s) : void 0,
+    [p]
+  );
+  return {
+    items: y,
+    menuSlots: l,
+    filterText: t,
+    inputSlots: a,
+    clearButton: V,
+    setFilterText: o,
+    getItemByValue: C
+  };
+};
 export {
-  u as handleKeyDown
+  S as getRecursiveOptionValues,
+  z as useSelectData
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components62.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n    const selector = 'tr[tabindex=\"0\"]';\n    const table = currentRow.closest('table');\n    if (!table) {\n        return null;\n    }\n\n    const rows = Array.from(table.querySelectorAll(selector));\n    const currentIndex = rows.indexOf(currentRow);\n    const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n    return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    const target = event.target as HTMLElement;\n    const currentRow = target.closest('tr');\n\n    if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n        return;\n    }\n\n    const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n    if (nextRow) {\n        event.preventDefault();\n        nextRow.focus();\n    }\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAe,GACrBE,EAAQ,MAAM;AAEtB;"}
+{"version":3,"file":"fondue-components62.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        items,\n        menuSlots,\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}