@frontify/fondue-components 8.0.0 → 8.0.2

package/dist/fondue-components53.js

@@ -1,75 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-popover";
-import { Slot as P } from "@radix-ui/react-slot";
-import { useRef as S, isValidElement as C } from "react";
-import { usePreventDropdownOverflow as M } from "./fondue-components40.js";
-import n from "./fondue-components55.js";
-import { recursiveMap as N, getSelectOptionValue as V } from "./fondue-components69.js";
-const x = ({
-  highlightedIndex: p,
-  getMenuProps: u,
-  getItemProps: m,
-  children: f,
-  filterText: c,
-  align: d,
-  selectedItem: r,
-  hasInteractedSinceOpening: v
-}) => {
-  const s = S(null), { setMaxHeight: h } = M(s), g = (e) => {
-    e.preventDefault(), h();
-  };
-  return /* @__PURE__ */ t(l.Portal, { children: /* @__PURE__ */ t(
-    l.Content,
-    {
-      align: d,
-      collisionPadding: 16,
-      onOpenAutoFocus: g,
-      className: n.portal,
-      children: /* @__PURE__ */ t(
-        "ul",
-        {
-          className: n.menu,
-          ...u(),
-          ref: s,
-          "data-has-interacted": v ? "true" : "false",
-          "data-test-id": "fondue-select-menu",
-          children: N(
-            f,
-            (e, i) => {
-              if (((o) => (
-                // @ts-expect-error - We are explicitly checking for ref
-                C(o) && o.ref !== void 0
-              ))(e)) {
-                const o = V(e.props), a = m({
-                  item: o,
-                  index: i,
-                  ...e.ref ? { ref: e.ref } : {}
-                });
-                return /* @__PURE__ */ t(
-                  P,
-                  {
-                    className: n.item,
-                    "data-highlighted": p === i,
-                    "data-selected": (r == null ? void 0 : r.value) === o.value,
-                    onTouchStart: (O) => {
-                      a.onClick && a.onClick(O);
-                    },
-                    ...a,
-                    children: e
-                  },
-                  e.props.value
-                );
-              }
-            },
-            c
-          ).parsedChildren
-        }
-      )
-    }
-  ) });
-};
-x.displayName = "Select.Menu";
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import m from "./fondue-components54.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 {
-  x as SelectMenu
+  S as ForwardedRefSelectSlot,
+  t as SelectSlot
 };
 //# sourceMappingURL=fondue-components53.js.map

package/dist/fondue-components53.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components53.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, useRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\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     * 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    selectedItem,\n    hasInteractedSinceOpening,\n}: SelectMenuProps) => {\n    const ref = useRef<HTMLUListElement | null>(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(ref);\n\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n        setMaxHeight();\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                align={align}\n                collisionPadding={16}\n                onOpenAutoFocus={handleOnOpenAutoFocus}\n                className={styles.portal}\n            >\n                <ul\n                    className={styles.menu}\n                    {...getMenuProps()}\n                    ref={ref}\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        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","selectedItem","hasInteractedSinceOpening","ref","useRef","setMaxHeight","usePreventDropdownOverflow","handleOnOpenAutoFocus","event","jsx","RadixPopover","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","RadixSlot"],"mappings":";;;;;;;AA2DO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AACJ,MAAuB;AACb,QAAAC,IAAMC,EAAgC,IAAI,GAE1C,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAG,GAEjDI,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe,GACRH,EAAA;AAAA,EACjB;AAGI,SAAA,gBAAAI,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAD;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACG,OAAAV;AAAA,MACA,kBAAkB;AAAA,MAClB,iBAAiBO;AAAA,MACjB,WAAWI,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UACjB,GAAGf,EAAa;AAAA,UACjB,KAAAO;AAAA,UACA,uBAAqBD,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAU;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,kBAAeb,KAAA,gBAAAA,EAAc,WAAUe,EAAW;AAAA,oBAGlD,cAAc,CAACR,MAAU;AACrB,sBAAIU,EAAU,WACVA,EAAU,QAAQV,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGU;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,EAAA,GAER;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components53.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-components54.js

@@ -1,11 +1,36 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components55.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 c = "_root_96frq_6", o = "_selectedValue_96frq_68", _ = "_input_96frq_80", r = "_slot_96frq_106", t = "_clear_96frq_158", e = "_icons_96frq_171", n = "_caret_96frq_177", s = "_iconSuccess_96frq_205", a = "_iconError_96frq_211", l = "_menu_96frq_217", u = "_portal_96frq_238", i = "_item_96frq_242", f = "_checkmarkIcon_96frq_267", q = "_itemValue_96frq_274", m = "_group_96frq_288", p = {
+  root: c,
+  selectedValue: o,
+  input: _,
+  slot: r,
+  clear: t,
+  icons: e,
+  caret: n,
+  iconSuccess: s,
+  iconError: a,
+  menu: l,
+  portal: u,
+  item: i,
+  checkmarkIcon: f,
+  itemValue: q,
+  group: m
+};
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  n as caret,
+  f as checkmarkIcon,
+  t as clear,
+  p as default,
+  m as group,
+  a as iconError,
+  s as iconSuccess,
+  e as icons,
+  _ as input,
+  i as item,
+  q as itemValue,
+  l as menu,
+  u as portal,
+  c as root,
+  o as selectedValue,
+  r as slot
 };
 //# sourceMappingURL=fondue-components54.js.map

package/dist/fondue-components54.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components54.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;"}
+{"version":3,"file":"fondue-components54.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/fondue-components55.js

@@ -1,36 +1,52 @@
-const c = "_root_1pv0q_6", o = "_selectedValue_1pv0q_68", _ = "_input_1pv0q_80", t = "_slot_1pv0q_106", e = "_clear_1pv0q_158", n = "_icons_1pv0q_171", s = "_caret_1pv0q_177", r = "_iconSuccess_1pv0q_205", p = "_iconError_1pv0q_211", a = "_menu_1pv0q_217", l = "_portal_1pv0q_237", u = "_item_1pv0q_241", i = "_checkmarkIcon_1pv0q_266", q = "_itemValue_1pv0q_273", v = "_group_1pv0q_287", m = {
-  root: c,
-  selectedValue: o,
-  input: _,
-  slot: t,
-  clear: e,
-  icons: n,
-  caret: s,
-  iconSuccess: r,
-  iconError: p,
-  menu: a,
-  portal: l,
-  item: u,
-  checkmarkIcon: i,
-  itemValue: q,
-  group: v
+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 a, cloneElement as E, useCallback as v } from "react";
+import { ForwardedRefSelectItem as F } from "./fondue-components51.js";
+import { ForwardedRefSelectSlot as c } from "./fondue-components53.js";
+import { getSelectOptionValue as I } from "./fondue-components68.js";
+const S = (r) => {
+  const t = [];
+  return f.forEach(r, (o) => {
+    if (a(o) && o.type === F)
+      t.push(I(o.props));
+    else if (a(o) && o.props.children) {
+      const u = S(o.props.children);
+      for (const l of u)
+        t.push(l);
+    }
+  }), t;
+}, z = (r) => {
+  const [t, o] = B(""), { inputSlots: u, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
+    const s = [], n = [];
+    let m;
+    f.toArray(r).some(
+      (e) => a(e) && e.type === c
+    ) ? f.forEach(r, (e) => {
+      a(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 = v(
+    (s) => s ? p.find((n) => n.value === s) : void 0,
+    [p]
+  );
+  return {
+    items: y,
+    menuSlots: l,
+    filterText: t,
+    inputSlots: u,
+    clearButton: V,
+    setFilterText: o,
+    getItemByValue: C
+  };
 };
 export {
-  s as caret,
-  i as checkmarkIcon,
-  e as clear,
-  m as default,
-  v as group,
-  p as iconError,
-  r as iconSuccess,
-  n as icons,
-  _ as input,
-  u as item,
-  q as itemValue,
-  a as menu,
-  l as portal,
-  c as root,
-  o as selectedValue,
-  t as slot
+  S as getRecursiveOptionValues,
+  z as useSelectData
 };
 //# sourceMappingURL=fondue-components55.js.map

package/dist/fondue-components55.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components55.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components55.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) => (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,MAAoBA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IAC/E,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;"}

package/dist/fondue-components56.js

@@ -1,52 +1,14 @@
-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 a, cloneElement as E, useCallback as v } from "react";
-import { ForwardedRefSelectItem as F } from "./fondue-components52.js";
-import { ForwardedRefSelectSlot as c } from "./fondue-components54.js";
-import { getSelectOptionValue as I } from "./fondue-components69.js";
-const S = (r) => {
-  const t = [];
-  return f.forEach(r, (o) => {
-    if (a(o) && o.type === F)
-      t.push(I(o.props));
-    else if (a(o) && o.props.children) {
-      const u = S(o.props.children);
-      for (const l of u)
-        t.push(l);
-    }
-  }), t;
-}, z = (r) => {
-  const [t, o] = B(""), { inputSlots: u, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
-    const s = [], n = [];
-    let m;
-    f.toArray(r).some(
-      (e) => a(e) && e.type === c
-    ) ? f.forEach(r, (e) => {
-      a(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 = v(
-    (s) => s ? p.find((n) => n.value === s) : void 0,
-    [p]
-  );
-  return {
-    items: y,
-    menuSlots: l,
-    filterText: t,
-    inputSlots: u,
-    clearButton: V,
-    setFilterText: o,
-    getItemByValue: C
-  };
+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 getRecursiveOptionValues,
-  z as useSelectData
+  r as default,
+  _ as range,
+  t as root,
+  o as thumb,
+  s as track
 };
 //# sourceMappingURL=fondue-components56.js.map

package/dist/fondue-components56.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components56.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) => (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,MAAoBA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IAC/E,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;"}
+{"version":3,"file":"fondue-components56.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components57.js

@@ -1,14 +1,16 @@
-const t = "_root_oitg9_5", o = "_thumb_oitg9_17", _ = "_track_oitg9_21", r = "_range_oitg9_28", a = {
+const t = "_root_2ajx7_5", _ = "_small_2ajx7_33", a = "_medium_2ajx7_37", o = "_large_2ajx7_41", m = "_thumb_2ajx7_55", s = {
   root: t,
-  thumb: o,
-  track: _,
-  range: r
+  small: _,
+  medium: a,
+  large: o,
+  thumb: m
 };
 export {
-  a as default,
-  r as range,
+  s as default,
+  o as large,
+  a as medium,
   t as root,
-  o as thumb,
-  _ as track
+  _ as small,
+  m as thumb
 };
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components58.js

@@ -1,16 +1,11 @@
-const t = "_root_1a16w_5", _ = "_small_1a16w_33", a = "_medium_1a16w_37", o = "_large_1a16w_41", m = "_thumb_1a16w_55", s = {
-  root: t,
-  small: _,
-  medium: a,
-  large: o,
-  thumb: m
+import { useEffect as f } from "react";
+import { syncRefs as o } from "./fondue-components37.js";
+const m = (s, e) => {
+  f(() => {
+    o(s, e);
+  }, [s]);
 };
 export {
-  s as default,
-  o as large,
-  a as medium,
-  t as root,
-  _ as small,
-  m as thumb
+  m as useSyncRefs
 };
 //# 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/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;"}

package/dist/fondue-components59.js

@@ -1,11 +1,16 @@
-import { useEffect as f } from "react";
-import { syncRefs as o } from "./fondue-components37.js";
-const m = (s, e) => {
-  f(() => {
-    o(s, e);
-  }, [s]);
+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 {
-  m as useSyncRefs
+  s as useTextTruncation
 };
 //# 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/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;"}

package/dist/fondue-components60.js

@@ -1,16 +1,24 @@
-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]);
+const t = "_table_4n7pf_4", o = "_headerCell_4n7pf_18", n = "_rowCell_4n7pf_19", _ = "_caption_4n7pf_40", e = "_sortButton_4n7pf_65", r = "_buttonText_4n7pf_83", s = "_sortIndicator_4n7pf_92", l = "_body_4n7pf_96", c = "_row_4n7pf_19", a = {
+  table: t,
+  headerCell: o,
+  rowCell: n,
+  caption: _,
+  sortButton: e,
+  buttonText: r,
+  sortIndicator: s,
+  body: l,
+  row: c
 };
 export {
-  s as useTextTruncation
+  l as body,
+  r as buttonText,
+  _ as caption,
+  a as default,
+  o as headerCell,
+  c as row,
+  n as rowCell,
+  e as sortButton,
+  s as sortIndicator,
+  t as table
 };
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components61.js

@@ -1,22 +1,18 @@
-const o = "_table_1pmcv_4", t = "_headerCell_1pmcv_18", _ = "_rowCell_1pmcv_19", c = "_caption_1pmcv_40", r = "_sortButton_1pmcv_65", e = "_sortIndicator_1pmcv_89", n = "_body_1pmcv_93", s = "_row_1pmcv_19", l = {
-  table: o,
-  headerCell: t,
-  rowCell: _,
-  caption: c,
-  sortButton: r,
-  sortIndicator: e,
-  body: n,
-  row: s
-};
+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());
+}
 export {
-  n as body,
-  c as caption,
-  l as default,
-  t as headerCell,
-  s as row,
-  _ as rowCell,
-  r as sortButton,
-  e as sortIndicator,
-  o as table
+  u as handleKeyDown
 };
 //# 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":["../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;"}

package/dist/fondue-components62.js

@@ -1,18 +1,56 @@
-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))
+import { useRef as v, useState as w, useEffect as W, useLayoutEffect as p } from "react";
+const b = (e, s) => e.filter((f) => {
+  var c;
+  const o = (c = f.ref) == null ? void 0 : c.current;
+  return o ? o.offsetLeft + o.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || o.offsetLeft - s.scrollLeft < 0 : !1;
+}), a = (e, s) => {
+  const f = s.current, o = e == null ? void 0 : e.querySelector('[data-state="active"]');
+  if (!e || !(o instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
     return;
-  const e = l(n, t.key);
-  e && (t.preventDefault(), e.focus());
-}
+  const c = (e == null ? void 0 : e.scrollLeft) > (o == null ? void 0 : o.offsetLeft), d = (o == null ? void 0 : o.offsetLeft) + (o == null ? void 0 : o.offsetWidth) > (e == null ? void 0 : e.offsetWidth);
+  c ? (e.offsetWidth > o.offsetWidth + o.offsetLeft ? f.style.left = `${o.offsetLeft}px` : f.style.left = `${e.offsetWidth - o.offsetWidth}px`, f.style.width = `${o == null ? void 0 : o.offsetWidth}px`) : d ? (f.style.left = `${e.clientWidth - o.offsetWidth}px`, f.style.width = `${o.offsetWidth}px`) : (f.style.left = `${o.offsetLeft}px`, f.style.width = `${o.offsetWidth}px`);
+}, O = ({
+  activeTab: e
+}) => {
+  const s = v(null), f = v(null), [o, c] = w([]), [d, u] = w([]);
+  return W(() => {
+    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
+    n instanceof HTMLButtonElement && t instanceof HTMLDivElement && (a(t, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
+  }, [e, f]), p(() => {
+    var l;
+    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
+    if (t instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
+      a(t, f);
+      const r = new MutationObserver(() => {
+        n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(t, f);
+      });
+      t.parentNode && r.observe(t.parentNode, { childList: !0 });
+      const h = new IntersectionObserver(
+        () => {
+          u(b(o, t)), a(t, f);
+        },
+        {
+          root: t,
+          threshold: 1
+        }
+      );
+      for (const i of o)
+        (l = i.ref) != null && l.current && h.observe(i.ref.current);
+      return () => {
+        h.disconnect(), r.disconnect();
+      };
+    }
+  }, [o, s, f]), {
+    triggerListRef: s,
+    activeIndicatorRef: f,
+    triggersOutOfView: d,
+    triggers: o,
+    addTrigger: (t) => {
+      c((n) => [...n, t]);
+    }
+  };
+};
 export {
-  u as handleKeyDown
+  O as useTabTriggers
 };
 //# sourceMappingURL=fondue-components62.js.map