@frontify/fondue-components 20.0.0-rc.0 → 20.0.0

package/dist/fondue-components69.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components69.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 { LoadingCircle } from '#/components/LoadingCircle/LoadingCircle.tsx';\nimport { ForwardedRefSelectSlot } from '#/components/Select/SelectSlot.tsx';\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData, type AsyncItemsFetcher } 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    /**\n     * Function to fetch items asynchronously.\n     */\n    getAsyncItems?: AsyncItemsFetcher;\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        getAsyncItems,\n        ...props\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText, asyncItemStatus } =\n        useSelectData(children, getAsyncItems);\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        () => !getAsyncItems && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items, getAsyncItems],\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    const hasError = valueInvalid || !!asyncItemStatus.error || status === 'error';\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-status={hasError ? '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                    ) : null}\n                    {asyncItemStatus.isLoading && isOpen ? (\n                        <ForwardedRefSelectSlot name=\"right\" data-test-id={`${dataTestId}-right-slot`}>\n                            <LoadingCircle size=\"x-small\" data-test-id={`${dataTestId}-loading-circle`} />\n                        </ForwardedRefSelectSlot>\n                    ) : null}\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                        {hasError ? (\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","getAsyncItems","props","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","asyncItemStatus","useSelectData","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","hasError","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","ForwardedRefSelectSlot","LoadingCircle","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components69.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":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}

package/dist/fondue-components7.js

@@ -2,8 +2,8 @@ import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { IconMinus as f, IconCheckMark as u } from "@frontify/fondue-icons";
 import * as r from "@radix-ui/react-checkbox";
 import { forwardRef as h } from "react";
-import { cn as w } from "./fondue-components40.js";
-import { checkboxIndicatorStyles as b, checkboxStyles as x } from "./fondue-components44.js";
+import { cn as w } from "./fondue-components38.js";
+import { checkboxIndicatorStyles as b, checkboxStyles as x } from "./fondue-components42.js";
 const p = ({
   className: d,
   value: s,

package/dist/fondue-components70.js

@@ -1,22 +1,40 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as n } from "@frontify/fondue-icons";
-import { forwardRef as l } from "react";
-import a from "./fondue-components73.js";
-const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
-  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
-  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
-] });
-o.displayName = "Select.Item";
-const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
-  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
-  c
-] }, e);
-s.displayName = "Select.Group";
-const N = l(s);
+const c = "_root_1qbdb_7", o = "_selectedValue_1qbdb_57", _ = "_input_1qbdb_75", e = "_slot_1qbdb_101", t = "_clear_1qbdb_153", n = "_clearIcon_1qbdb_160", s = "_icons_1qbdb_164", b = "_caret_1qbdb_170", r = "_iconSuccess_1qbdb_198", a = "_iconError_1qbdb_204", d = "_menu_1qbdb_210", l = "_portal_1qbdb_233", u = "_item_1qbdb_249", i = "_checkmarkIcon_1qbdb_278", q = "_itemValue_1qbdb_285", p = "_group_1qbdb_299", m = "_groupHeading_1qbdb_310", g = {
+  root: c,
+  selectedValue: o,
+  input: _,
+  slot: e,
+  clear: t,
+  clearIcon: n,
+  icons: s,
+  caret: b,
+  iconSuccess: r,
+  iconError: a,
+  menu: d,
+  portal: l,
+  item: u,
+  checkmarkIcon: i,
+  itemValue: q,
+  group: p,
+  groupHeading: m
+};
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  b as caret,
+  i as checkmarkIcon,
+  t as clear,
+  n as clearIcon,
+  g as default,
+  p as group,
+  m as groupHeading,
+  a as iconError,
+  r as iconSuccess,
+  s as icons,
+  _ as input,
+  u as item,
+  q as itemValue,
+  d as menu,
+  l as portal,
+  c as root,
+  o as selectedValue,
+  e as slot
 };
 //# sourceMappingURL=fondue-components70.js.map

package/dist/fondue-components70.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components70.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 groups heading\n     */\n    heading?: 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, heading, '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            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\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","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components70.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components71.js

@@ -1,81 +1,74 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-popover";
-import { Slot as V } from "@radix-ui/react-slot";
-import { isValidElement as g } from "react";
-import { useFondueTheme as A, ThemeProvider as D } from "./fondue-components33.js";
-import s from "./fondue-components73.js";
-import { recursiveMap as M, getSelectOptionValue as T } from "./fondue-components91.js";
-const E = ({
-  highlightedIndex: p,
-  getMenuProps: c,
-  getItemProps: m,
-  children: u,
-  filterText: d,
-  align: f,
-  side: h,
-  selectedItem: r,
-  hasInteractedSinceOpening: v,
-  viewportCollisionPadding: P = "compact"
-}) => {
-  const O = (e) => {
-    e.preventDefault();
-  }, S = {
-    compact: 8,
-    spacious: 24
-  }, N = A();
-  return /* @__PURE__ */ t(l.Portal, { children: /* @__PURE__ */ t(D, { theme: N, children: /* @__PURE__ */ t(
-    l.Content,
-    {
-      align: f,
-      side: h,
-      collisionPadding: S[P] + 8,
-      onOpenAutoFocus: O,
-      className: s.portal,
-      children: /* @__PURE__ */ t(
-        "ul",
-        {
-          className: s.menu,
-          ...c({}, { suppressRefError: !0 }),
-          "data-has-interacted": v ? "true" : "false",
-          "data-test-id": "fondue-select-menu",
-          children: M(
-            u,
-            (e, n) => {
-              if (((o) => (
-                // @ts-expect-error - We are explicitly checking for ref
-                g(o) && o.ref !== void 0
-              ))(e)) {
-                const o = T(e.props), a = m({
-                  item: o,
-                  index: n,
-                  ...e.ref ? { ref: e.ref } : {}
-                }), i = (r == null ? void 0 : r.value) === o.value;
-                return /* @__PURE__ */ t(
-                  V,
-                  {
-                    className: s.item,
-                    "data-highlighted": p === n,
-                    "data-selected": i,
-                    onTouchStart: (C) => {
-                      a.onClick && a.onClick(C);
-                    },
-                    ...a,
-                    "aria-selected": i,
-                    children: e
-                  },
-                  e.props.value
-                );
-              }
-            },
-            d
-          ).parsedChildren
-        }
-      )
+import { jsx as E } from "react/jsx-runtime";
+import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
+import { SelectClear as F } from "./fondue-components89.js";
+import { ForwardedRefSelectItem as L } from "./fondue-components67.js";
+import { ForwardedRefSelectSlot as y } from "./fondue-components69.js";
+import { getSelectOptionValue as I } from "./fondue-components88.js";
+const O = (n, s) => {
+  const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
+    menuComponents: [],
+    items: []
+  });
+  return x(() => {
+    i(null), s || f({
+      menuComponents: [],
+      items: []
+    }), s && (r(!0), s(n).then((u) => {
+      f({
+        menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
+        items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
+      }), r(!1);
+    }).catch((u) => {
+      i(u), r(!1);
+    }));
+  }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
+}, g = (n) => {
+  const s = [];
+  return v.forEach(n, (e) => {
+    if (C(e) && e.type === L)
+      s.push(I(e.props));
+    else if (C(e) && e.props.children) {
+      const r = g(e.props.children);
+      for (const m of r)
+        s.push(m);
     }
-  ) }) });
+  }), s;
+}, q = (n, s) => {
+  const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
+    const a = [], p = [];
+    let V;
+    v.toArray(n).some(
+      (t) => C(t) && t.type === y
+    ) ? v.forEach(n, (t) => {
+      C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? V = t : V = w(t, { children: /* @__PURE__ */ E(F, {}) })));
+    }) : p.push(n);
+    const R = g(p);
+    return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: V };
+  }, [n]), u = b(
+    () => l.filter(
+      (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
+    ),
+    [l, e]
+  ), o = B(
+    (a) => a ? l.find((p) => p.value === a) : void 0,
+    [l]
+  ), c = O(e, s);
+  return {
+    items: [...u, ...c.items],
+    menuSlots: [...i, ...c.menuComponents],
+    filterText: e,
+    inputSlots: m,
+    clearButton: f,
+    setFilterText: r,
+    getItemByValue: o,
+    asyncItemStatus: {
+      isLoading: c.isLoading,
+      error: c.error
+    }
+  };
 };
-E.displayName = "Select.Menu";
 export {
-  E as SelectMenu
+  g as getRecursiveOptionValues,
+  q as useSelectData
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components71.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 SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\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     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\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={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\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                                        const isSelected = selectedItem?.value === optionData.value;\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\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                                                aria-selected={isSelected}\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","viewportCollisionPadding","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AAwEO,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;AAAA,EACA,0BAAAC,IAA2B;AAC/B,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGRC,IAAQC,EAAA;AACd,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAV;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkBM,EAA+BH,CAAwB,IAAI;AAAA,MAC7E,iBAAiBC;AAAA,MACjB,WAAWQ,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGjB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAW;AAAA,YACIhB;AAAA,YACA,CAACiB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYvB,EAAa;AAAA,kBAC3B,MAAMqB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,KAAanB,KAAA,gBAAAA,EAAc,WAAUgB,EAAW;AAEtD,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBlB,MAAqBqB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACf,MAAU;AACrB,sBAAIc,EAAU,WACVA,EAAU,QAAQd,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGc;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAhB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components71.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n} from 'react';\n\nimport { SelectClear } from './SelectClear';\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\nexport type AsyncItem = { label: string; value: string; content?: ReactNode };\n\nexport type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;\n\nconst useAsyncItems = (filterText: string, getAsyncItems?: AsyncItemsFetcher) => {\n    const [isLoading, setIsLoading] = useState(false);\n    const [error, setError] = useState<Error | null>(null);\n    const [asyncResult, setAsyncResult] = useState<{\n        menuComponents: ReactNode[];\n        items: { value: string; label: string; children?: ReactNode }[];\n    }>({\n        menuComponents: [],\n        items: [],\n    });\n\n    useEffect(() => {\n        setError(null);\n        if (!getAsyncItems) {\n            setAsyncResult({\n                menuComponents: [],\n                items: [],\n            });\n        }\n\n        if (getAsyncItems) {\n            setIsLoading(true);\n            getAsyncItems(filterText)\n                .then((items) => {\n                    setAsyncResult({\n                        menuComponents: items.map((item) => (\n                            <ForwardedRefSelectItem key={item.value} label={item.label} value={item.value}>\n                                {item.content ? item.content : item.label}\n                            </ForwardedRefSelectItem>\n                        )),\n                        items: items.map((item) => ({ value: item.value, label: item.label, children: item.content })),\n                    });\n                    setIsLoading(false);\n                })\n                .catch((error: Error) => {\n                    setError(error);\n                    setIsLoading(false);\n                });\n        }\n    }, [filterText, getAsyncItems]);\n\n    return { isLoading, error, menuComponents: asyncResult.menuComponents, items: asyncResult.items };\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 = (\n    children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\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 * @param {AsyncItemsFetcher} [getAsyncItems] - Optional function to fetch items asynchronously based on filter text.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode, getAsyncItems?: AsyncItemsFetcher) => {\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: <SelectClear /> });\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    const asyncItems = useAsyncItems(filterText, getAsyncItems);\n\n    return {\n        items: [...items, ...asyncItems.items],\n        menuSlots: [...menuSlots, ...asyncItems.menuComponents],\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n        asyncItemStatus: {\n            isLoading: asyncItems.isLoading,\n            error: asyncItems.error,\n        },\n    };\n};\n"],"names":["useAsyncItems","filterText","getAsyncItems","isLoading","setIsLoading","useState","error","setError","asyncResult","setAsyncResult","useEffect","items","item","jsx","ForwardedRefSelectItem","getRecursiveOptionValues","children","values","Children","child","isValidElement","getSelectOptionValue","optionValues","optionValue","useSelectData","setFilterText","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","SelectClear","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}

package/dist/fondue-components72.js

@@ -1,11 +1,14 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components73.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);
+const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
+  root: t,
+  thumb: o,
+  track: s,
+  range: _
+};
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  r as default,
+  _ as range,
+  t as root,
+  o as thumb,
+  s as track
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components72.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":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components72.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components73.js

@@ -1,40 +1,16 @@
-const c = "_root_1m7fk_7", o = "_selectedValue_1m7fk_57", _ = "_input_1m7fk_75", e = "_slot_1m7fk_101", t = "_clear_1m7fk_153", n = "_clearIcon_1m7fk_160", s = "_icons_1m7fk_164", r = "_caret_1m7fk_170", m = "_iconSuccess_1m7fk_198", a = "_iconError_1m7fk_204", k = "_menu_1m7fk_210", l = "_portal_1m7fk_233", u = "_item_1m7fk_249", i = "_checkmarkIcon_1m7fk_277", f = "_itemValue_1m7fk_283", p = "_group_1m7fk_297", g = "_groupHeading_1m7fk_308", d = {
-  root: c,
-  selectedValue: o,
-  input: _,
-  slot: e,
-  clear: t,
-  clearIcon: n,
-  icons: s,
-  caret: r,
-  iconSuccess: m,
-  iconError: a,
-  menu: k,
-  portal: l,
-  item: u,
-  checkmarkIcon: i,
-  itemValue: f,
-  group: p,
-  groupHeading: g
+const m = "_root_eum1z_5", t = "_small_eum1z_16", _ = "_medium_eum1z_20", e = "_large_eum1z_24", o = "_thumb_eum1z_61", s = {
+  root: m,
+  small: t,
+  medium: _,
+  large: e,
+  thumb: o
 };
 export {
-  r as caret,
-  i as checkmarkIcon,
-  t as clear,
-  n as clearIcon,
-  d as default,
-  p as group,
-  g as groupHeading,
-  a as iconError,
-  m as iconSuccess,
-  s as icons,
-  _ as input,
-  u as item,
-  f as itemValue,
-  k as menu,
-  l as portal,
-  c as root,
-  o as selectedValue,
-  e as slot
+  s as default,
+  e as large,
+  _ as medium,
+  m as root,
+  t as small,
+  o as thumb
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

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

package/dist/fondue-components74.js

@@ -1,74 +1,16 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
-import { SelectClear as F } from "./fondue-components92.js";
-import { ForwardedRefSelectItem as L } from "./fondue-components70.js";
-import { ForwardedRefSelectSlot as y } from "./fondue-components72.js";
-import { getSelectOptionValue as I } from "./fondue-components91.js";
-const O = (n, s) => {
-  const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
-    menuComponents: [],
-    items: []
-  });
-  return x(() => {
-    i(null), s || f({
-      menuComponents: [],
-      items: []
-    }), s && (r(!0), s(n).then((u) => {
-      f({
-        menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
-        items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
-      }), r(!1);
-    }).catch((u) => {
-      i(u), r(!1);
-    }));
-  }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
-}, g = (n) => {
-  const s = [];
-  return v.forEach(n, (e) => {
-    if (C(e) && e.type === L)
-      s.push(I(e.props));
-    else if (C(e) && e.props.children) {
-      const r = g(e.props.children);
-      for (const m of r)
-        s.push(m);
-    }
-  }), s;
-}, q = (n, s) => {
-  const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
-    const a = [], p = [];
-    let V;
-    v.toArray(n).some(
-      (t) => C(t) && t.type === y
-    ) ? v.forEach(n, (t) => {
-      C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? V = t : V = w(t, { children: /* @__PURE__ */ E(F, {}) })));
-    }) : p.push(n);
-    const R = g(p);
-    return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: V };
-  }, [n]), u = b(
-    () => l.filter(
-      (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
-    ),
-    [l, e]
-  ), o = B(
-    (a) => a ? l.find((p) => p.value === a) : void 0,
-    [l]
-  ), c = O(e, s);
-  return {
-    items: [...u, ...c.items],
-    menuSlots: [...i, ...c.menuComponents],
-    filterText: e,
-    inputSlots: m,
-    clearButton: f,
-    setFilterText: r,
-    getItemByValue: o,
-    asyncItemStatus: {
-      isLoading: c.isLoading,
-      error: c.error
-    }
-  };
+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]);
 };
 export {
-  g as getRecursiveOptionValues,
-  q as useSelectData
+  s as useTextTruncation
 };
 //# sourceMappingURL=fondue-components74.js.map

package/dist/fondue-components74.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components74.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n} from 'react';\n\nimport { SelectClear } from './SelectClear';\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\nexport type AsyncItem = { label: string; value: string; content?: ReactNode };\n\nexport type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;\n\nconst useAsyncItems = (filterText: string, getAsyncItems?: AsyncItemsFetcher) => {\n    const [isLoading, setIsLoading] = useState(false);\n    const [error, setError] = useState<Error | null>(null);\n    const [asyncResult, setAsyncResult] = useState<{\n        menuComponents: ReactNode[];\n        items: { value: string; label: string; children?: ReactNode }[];\n    }>({\n        menuComponents: [],\n        items: [],\n    });\n\n    useEffect(() => {\n        setError(null);\n        if (!getAsyncItems) {\n            setAsyncResult({\n                menuComponents: [],\n                items: [],\n            });\n        }\n\n        if (getAsyncItems) {\n            setIsLoading(true);\n            getAsyncItems(filterText)\n                .then((items) => {\n                    setAsyncResult({\n                        menuComponents: items.map((item) => (\n                            <ForwardedRefSelectItem key={item.value} label={item.label} value={item.value}>\n                                {item.content ? item.content : item.label}\n                            </ForwardedRefSelectItem>\n                        )),\n                        items: items.map((item) => ({ value: item.value, label: item.label, children: item.content })),\n                    });\n                    setIsLoading(false);\n                })\n                .catch((error: Error) => {\n                    setError(error);\n                    setIsLoading(false);\n                });\n        }\n    }, [filterText, getAsyncItems]);\n\n    return { isLoading, error, menuComponents: asyncResult.menuComponents, items: asyncResult.items };\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 = (\n    children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\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 * @param {AsyncItemsFetcher} [getAsyncItems] - Optional function to fetch items asynchronously based on filter text.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode, getAsyncItems?: AsyncItemsFetcher) => {\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: <SelectClear /> });\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    const asyncItems = useAsyncItems(filterText, getAsyncItems);\n\n    return {\n        items: [...items, ...asyncItems.items],\n        menuSlots: [...menuSlots, ...asyncItems.menuComponents],\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n        asyncItemStatus: {\n            isLoading: asyncItems.isLoading,\n            error: asyncItems.error,\n        },\n    };\n};\n"],"names":["useAsyncItems","filterText","getAsyncItems","isLoading","setIsLoading","useState","error","setError","asyncResult","setAsyncResult","useEffect","items","item","jsx","ForwardedRefSelectItem","getRecursiveOptionValues","children","values","Children","child","isValidElement","getSelectOptionValue","optionValues","optionValue","useSelectData","setFilterText","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","SelectClear","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}
+{"version":3,"file":"fondue-components74.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":";AAqBO,MAAMA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACZ,QAAI,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AACtC,YAAMC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IACzD,CAAC;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACH,CAAG,CAAC;AACZ;"}

package/dist/fondue-components75.js

@@ -1,14 +1,24 @@
-const t = "_root_wajsq_5", a = "_thumb_wajsq_17", o = "_track_wajsq_21", s = "_range_wajsq_28", _ = {
-  root: t,
-  thumb: a,
-  track: o,
-  range: s
+const t = "_table_1outv_4", o = "_headerCell_1outv_18", e = "_rowCell_1outv_19", _ = "_caption_1outv_46", n = "_cellContent_1outv_71", l = "_sortIndicator_1outv_96", c = "_body_1outv_100", r = "_row_1outv_19", s = "_buttonText_1outv_164", a = {
+  table: t,
+  headerCell: o,
+  rowCell: e,
+  caption: _,
+  cellContent: n,
+  sortIndicator: l,
+  body: c,
+  row: r,
+  buttonText: s
 };
 export {
-  _ as default,
-  s as range,
-  t as root,
-  a as thumb,
-  o as track
+  c as body,
+  s as buttonText,
+  _ as caption,
+  n as cellContent,
+  a as default,
+  o as headerCell,
+  r as row,
+  e as rowCell,
+  l as sortIndicator,
+  t as table
 };
 //# sourceMappingURL=fondue-components75.js.map

package/dist/fondue-components75.js.map

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