@frontify/fondue-components 22.2.0 → 23.0.0

package/dist/fondue-components71.js

@@ -1,74 +1,40 @@
-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-components90.js";
-import { ForwardedRefSelectItem as L } from "./fondue-components67.js";
-import { ForwardedRefSelectSlot as y } from "./fondue-components69.js";
-import { getSelectOptionValue as I } from "./fondue-components89.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
-    }
-  };
+const n = "_root_1a48n_7", c = "_selectedValue_1a48n_57", o = "_input_1a48n_74", _ = "_slot_1a48n_100", e = "_clear_1a48n_150", t = "_clearIcon_1a48n_157", a = "_icons_1a48n_161", s = "_caret_1a48n_167", r = "_iconSuccess_1a48n_195", l = "_iconError_1a48n_201", u = "_menu_1a48n_207", i = "_portal_1a48n_230", p = "_item_1a48n_246", m = "_checkmarkIcon_1a48n_276", g = "_itemValue_1a48n_283", d = "_group_1a48n_297", k = "_groupHeading_1a48n_308", I = {
+  root: n,
+  selectedValue: c,
+  input: o,
+  slot: _,
+  clear: e,
+  clearIcon: t,
+  icons: a,
+  caret: s,
+  iconSuccess: r,
+  iconError: l,
+  menu: u,
+  portal: i,
+  item: p,
+  checkmarkIcon: m,
+  itemValue: g,
+  group: d,
+  groupHeading: k
 };
 export {
-  g as getRecursiveOptionValues,
-  q as useSelectData
+  s as caret,
+  m as checkmarkIcon,
+  e as clear,
+  t as clearIcon,
+  I as default,
+  d as group,
+  k as groupHeading,
+  l as iconError,
+  r as iconSuccess,
+  a as icons,
+  o as input,
+  p as item,
+  g as itemValue,
+  u as menu,
+  i as portal,
+  n as root,
+  c as selectedValue,
+  _ as slot
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

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

package/dist/fondue-components72.js

@@ -1,14 +1,74 @@
-const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
-  root: t,
-  thumb: o,
-  track: s,
-  range: _
+import { 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-components68.js";
+import { ForwardedRefSelectSlot as y } from "./fondue-components70.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
+    }
+  };
 };
 export {
-  r as default,
-  _ as range,
-  t as root,
-  o as thumb,
-  s as track
+  g as getRecursiveOptionValues,
+  q as useSelectData
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

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

@@ -1,16 +1,14 @@
-const s = "_root_6is9j_5", t = "_small_6is9j_16", _ = "_medium_6is9j_20", o = "_large_6is9j_24", m = "_thumb_6is9j_61", l = {
-  root: s,
-  small: t,
-  medium: _,
-  large: o,
-  thumb: m
+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 {
-  l as default,
-  o as large,
-  _ as medium,
-  s as root,
-  t as small,
-  m as thumb
+  r as default,
+  _ as range,
+  t as root,
+  o as thumb,
+  s as track
 };
 //# 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,16 +1,16 @@
-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 s = "_root_6is9j_5", t = "_small_6is9j_16", _ = "_medium_6is9j_20", o = "_large_6is9j_24", m = "_thumb_6is9j_61", l = {
+  root: s,
+  small: t,
+  medium: _,
+  large: o,
+  thumb: m
 };
 export {
-  s as useTextTruncation
+  l as default,
+  o as large,
+  _ as medium,
+  s as root,
+  t as small,
+  m as thumb
 };
 //# sourceMappingURL=fondue-components74.js.map

package/dist/fondue-components74.js.map

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

package/dist/fondue-components75.js

@@ -1,26 +1,16 @@
-const o = "_table_sabol_4", t = "_headerCell_sabol_18", e = "_rowCell_sabol_19", l = "_caption_sabol_61", _ = "_header_sabol_18", a = "_cellContent_sabol_93", s = "_sortIndicator_sabol_118", n = "_body_sabol_122", c = "_row_sabol_19", b = "_buttonText_sabol_186", r = {
-  table: o,
-  headerCell: t,
-  rowCell: e,
-  caption: l,
-  header: _,
-  cellContent: a,
-  sortIndicator: s,
-  body: n,
-  row: c,
-  buttonText: b
+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 {
-  n as body,
-  b as buttonText,
-  l as caption,
-  a as cellContent,
-  r as default,
-  _ as header,
-  t as headerCell,
-  c as row,
-  e as rowCell,
-  s as sortIndicator,
-  o as table
+  s as useTextTruncation
 };
 //# 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":["../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-components76.js

@@ -1,37 +1,26 @@
-function s(e, n) {
-  const r = 'tr[tabindex="0"]', t = e.closest("table");
-  if (!t)
-    return null;
-  const o = Array.from(t.querySelectorAll(r)), l = o.indexOf(e) + (n === "ArrowUp" ? -1 : 1);
-  return l >= 0 && l < o.length ? o[l] : null;
-}
-function a(e) {
-  const n = e.target, r = n.closest("tr");
-  if (!r || n !== r || !["ArrowUp", "ArrowDown"].includes(e.key))
-    return;
-  const t = s(r, e.key);
-  t && (e.preventDefault(), t.focus());
-}
-const u = [HTMLButtonElement, HTMLAnchorElement], i = ["button", "link"];
-function f(e) {
-  if (!e)
-    return !1;
-  const { target: n, currentTarget: r } = e;
-  let t = n instanceof Element ? n : null;
-  if (!r.contains(t))
-    return !0;
-  for (; t && !(t instanceof HTMLTableRowElement); ) {
-    if (u.some((c) => t instanceof c))
-      return !0;
-    const o = t.getAttribute("role");
-    if (o && i.includes(o))
-      return !0;
-    t = t.parentElement;
-  }
-  return !1;
-}
+const t = "_table_ynid2_4", n = "_headerCell_ynid2_18", o = "_rowCell_ynid2_19", e = "_row_ynid2_19", _ = "_caption_ynid2_76", d = "_header_ynid2_18", l = "_cellContent_ynid2_117", c = "_sortIndicator_ynid2_151", r = "_body_ynid2_155", a = "_buttonText_ynid2_228", s = {
+  table: t,
+  headerCell: n,
+  rowCell: o,
+  row: e,
+  caption: _,
+  header: d,
+  cellContent: l,
+  sortIndicator: c,
+  body: r,
+  buttonText: a
+};
 export {
-  a as handleKeyDown,
-  f as shouldIgnoreRowClick
+  r as body,
+  a as buttonText,
+  _ as caption,
+  l as cellContent,
+  s as default,
+  d as header,
+  n as headerCell,
+  e as row,
+  o as rowCell,
+  c as sortIndicator,
+  t as table
 };
 //# sourceMappingURL=fondue-components76.js.map

package/dist/fondue-components76.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components76.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent, type MouseEvent } 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\nconst INTERACTIVE_ELEMENTS_LIST = [HTMLButtonElement, HTMLAnchorElement];\nconst INTERACTIVE_ROLES_LIST = ['button', 'link'];\n\nexport function shouldIgnoreRowClick(event?: MouseEvent): boolean {\n    if (!event) {\n        return false;\n    }\n\n    const { target, currentTarget } = event;\n\n    let element = target instanceof Element ? target : null;\n\n    if (!currentTarget.contains(element)) {\n        return true;\n    }\n\n    while (element && !(element instanceof HTMLTableRowElement)) {\n        if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => element instanceof interactiveElement)) {\n            return true;\n        }\n\n        const role = element.getAttribute('role');\n        if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n            return true;\n        }\n\n        element = element.parentElement;\n    }\n\n    return false;\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow","INTERACTIVE_ELEMENTS_LIST","INTERACTIVE_ROLES_LIST","shouldIgnoreRowClick","currentTarget","element","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACD,WAAO;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,eAAA,GACNE,EAAQ,MAAA;AAEhB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAAqBL,GAA6B;AAC9D,MAAI,CAACA;AACD,WAAO;AAGX,QAAM,EAAE,QAAAC,GAAQ,eAAAK,EAAA,IAAkBN;AAElC,MAAIO,IAAUN,aAAkB,UAAUA,IAAS;AAEnD,MAAI,CAACK,EAAc,SAASC,CAAO;AAC/B,WAAO;AAGX,SAAOA,KAAW,EAAEA,aAAmB,wBAAsB;AACzD,QAAIJ,EAA0B,KAAK,CAACK,MAAuBD,aAAmBC,CAAkB;AAC5F,aAAO;AAGX,UAAMC,IAAOF,EAAQ,aAAa,MAAM;AACxC,QAAIE,KAAQL,EAAuB,SAASK,CAAI;AAC5C,aAAO;AAGX,IAAAF,IAAUA,EAAQ;AAAA,EACtB;AAEA,SAAO;AACX;"}
+{"version":3,"file":"fondue-components76.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/fondue-components77.js

@@ -1,14 +1,37 @@
-const n = "_root_1nybm_3", t = "_mainContent_1nybm_15", o = "_actionButton_1nybm_28", e = "_secondaryContent_1nybm_123", _ = {
-  root: n,
-  mainContent: t,
-  actionButton: o,
-  secondaryContent: e
-};
+function s(e, n) {
+  const r = 'tr[tabindex="0"]', t = e.closest("table");
+  if (!t)
+    return null;
+  const o = Array.from(t.querySelectorAll(r)), l = o.indexOf(e) + (n === "ArrowUp" ? -1 : 1);
+  return l >= 0 && l < o.length ? o[l] : null;
+}
+function a(e) {
+  const n = e.target, r = n.closest("tr");
+  if (!r || n !== r || !["ArrowUp", "ArrowDown"].includes(e.key))
+    return;
+  const t = s(r, e.key);
+  t && (e.preventDefault(), t.focus());
+}
+const u = [HTMLButtonElement, HTMLAnchorElement], i = ["button", "link"];
+function f(e) {
+  if (!e)
+    return !1;
+  const { target: n, currentTarget: r } = e;
+  let t = n instanceof Element ? n : null;
+  if (!r.contains(t))
+    return !0;
+  for (; t && !(t instanceof HTMLTableRowElement); ) {
+    if (u.some((c) => t instanceof c))
+      return !0;
+    const o = t.getAttribute("role");
+    if (o && i.includes(o))
+      return !0;
+    t = t.parentElement;
+  }
+  return !1;
+}
 export {
-  o as actionButton,
-  _ as default,
-  t as mainContent,
-  n as root,
-  e as secondaryContent
+  a as handleKeyDown,
+  f as shouldIgnoreRowClick
 };
 //# sourceMappingURL=fondue-components77.js.map

package/dist/fondue-components77.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components77.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent, type MouseEvent } 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\nconst INTERACTIVE_ELEMENTS_LIST = [HTMLButtonElement, HTMLAnchorElement];\nconst INTERACTIVE_ROLES_LIST = ['button', 'link'];\n\nexport function shouldIgnoreRowClick(event?: MouseEvent): boolean {\n    if (!event) {\n        return false;\n    }\n\n    const { target, currentTarget } = event;\n\n    let element = target instanceof Element ? target : null;\n\n    if (!currentTarget.contains(element)) {\n        return true;\n    }\n\n    while (element && !(element instanceof HTMLTableRowElement)) {\n        if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => element instanceof interactiveElement)) {\n            return true;\n        }\n\n        const role = element.getAttribute('role');\n        if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n            return true;\n        }\n\n        element = element.parentElement;\n    }\n\n    return false;\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow","INTERACTIVE_ELEMENTS_LIST","INTERACTIVE_ROLES_LIST","shouldIgnoreRowClick","currentTarget","element","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACD,WAAO;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,eAAA,GACNE,EAAQ,MAAA;AAEhB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAAqBL,GAA6B;AAC9D,MAAI,CAACA;AACD,WAAO;AAGX,QAAM,EAAE,QAAAC,GAAQ,eAAAK,EAAA,IAAkBN;AAElC,MAAIO,IAAUN,aAAkB,UAAUA,IAAS;AAEnD,MAAI,CAACK,EAAc,SAASC,CAAO;AAC/B,WAAO;AAGX,SAAOA,KAAW,EAAEA,aAAmB,wBAAsB;AACzD,QAAIJ,EAA0B,KAAK,CAACK,MAAuBD,aAAmBC,CAAkB;AAC5F,aAAO;AAGX,UAAMC,IAAOF,EAAQ,aAAa,MAAM;AACxC,QAAIE,KAAQL,EAAuB,SAASK,CAAI;AAC5C,aAAO;AAGX,IAAAF,IAAUA,EAAQ;AAAA,EACtB;AAEA,SAAO;AACX;"}

package/dist/fondue-components78.js

@@ -1,71 +1,14 @@
-import { useRef as W, useState as p, useEffect as w, useLayoutEffect as I } from "react";
-const T = (e, s) => e.filter((f) => {
-  var c;
-  const t = (c = f.ref) == null ? void 0 : c.current;
-  return t ? t.offsetLeft + t.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || t.offsetLeft - s.scrollLeft < 0 : !1;
-}), a = (e, s) => {
-  const f = s.current, t = e == null ? void 0 : e.querySelector('[data-state="active"]');
-  if (!e || !(t instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
-    return;
-  const u = getComputedStyle(e).direction === "rtl", r = (e == null ? void 0 : e.scrollLeft) > (t == null ? void 0 : t.offsetLeft), l = (t == null ? void 0 : t.offsetLeft) + (t == null ? void 0 : t.offsetWidth) > (e == null ? void 0 : e.offsetWidth), o = (n) => u ? e.offsetWidth - n - t.offsetWidth : n;
-  if (r) {
-    if (e.offsetWidth > t.offsetWidth + t.offsetLeft)
-      f.style.insetInlineStart = `${o(t.offsetLeft)}px`;
-    else {
-      const i = e.offsetWidth - t.offsetWidth;
-      f.style.insetInlineStart = `${o(i)}px`;
-    }
-    f.style.width = `${t == null ? void 0 : t.offsetWidth}px`;
-  } else if (l) {
-    const n = e.clientWidth - t.offsetWidth;
-    f.style.insetInlineStart = `${o(n)}px`, f.style.width = `${t.offsetWidth}px`;
-  } else
-    f.style.insetInlineStart = `${o(t.offsetLeft)}px`, f.style.width = `${t.offsetWidth}px`;
-}, b = ({
-  activeTab: e
-}) => {
-  const s = W(null), f = W(null), [t, c] = p([]), [u, r] = p([]);
-  return w(() => {
-    const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
-    n instanceof HTMLButtonElement && o instanceof HTMLDivElement && (a(o, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
-  }, [e, f]), I(() => {
-    var i;
-    const o = s.current, n = o == null ? void 0 : o.querySelector('[data-state="active"]');
-    if (o instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
-      a(o, f);
-      const d = new MutationObserver(() => {
-        n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(o, f);
-      });
-      o.parentNode && d.observe(o.parentNode, { childList: !0 });
-      const h = new IntersectionObserver(
-        () => {
-          r(T(t, o)), a(o, f);
-        },
-        {
-          root: o,
-          threshold: 1
-        }
-      );
-      for (const v of t)
-        (i = v.ref) != null && i.current && h.observe(v.ref.current);
-      return () => {
-        h.disconnect(), d.disconnect();
-      };
-    }
-  }, [t, s, f]), {
-    triggerListRef: s,
-    activeIndicatorRef: f,
-    triggersOutOfView: u,
-    triggers: t,
-    addTrigger: (o) => {
-      o.previousElement || c((n) => [...n, o]), c((n) => {
-        const i = n.findIndex((d) => d.element === o.previousElement);
-        return n[i] = o, [...n];
-      });
-    }
-  };
+const n = "_root_1nybm_3", t = "_mainContent_1nybm_15", o = "_actionButton_1nybm_28", e = "_secondaryContent_1nybm_123", _ = {
+  root: n,
+  mainContent: t,
+  actionButton: o,
+  secondaryContent: e
 };
 export {
-  b as useTabTriggers
+  o as actionButton,
+  _ as default,
+  t as mainContent,
+  n as root,
+  e as secondaryContent
 };
 //# sourceMappingURL=fondue-components78.js.map

package/dist/fondue-components78.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components78.js","sources":["../src/components/Tabs/hooks/useTabTriggers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { type TabTrigger } from '../types';\n\nconst getOverflowingTriggers = (triggers: TabTrigger[], triggerListElement: HTMLDivElement) => {\n    return triggers.filter((trigger) => {\n        const triggerElement = trigger.ref?.current;\n        if (!triggerElement) {\n            return false;\n        }\n        return (\n            triggerElement.offsetLeft + triggerElement.offsetWidth >\n                triggerListElement?.scrollLeft + triggerListElement.offsetWidth ||\n            triggerElement.offsetLeft - triggerListElement.scrollLeft < 0\n        );\n    });\n};\n\nconst moveActiveIndicator = (triggerListElement: HTMLDivElement, activeIndicatorRef: RefObject<HTMLSpanElement>) => {\n    const activeIndicatorElement = activeIndicatorRef.current;\n    const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n    if (\n        !triggerListElement ||\n        !(activeTriggerElement instanceof HTMLButtonElement) ||\n        !(activeIndicatorElement instanceof HTMLSpanElement)\n    ) {\n        return;\n    }\n\n    // Get the computed direction to handle RTL correctly\n    const direction = getComputedStyle(triggerListElement).direction;\n    const isRTL = direction === 'rtl';\n\n    const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n    const isOverflowingRight =\n        activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n    // Helper function to calculate position based on direction\n    const getInlineStartPosition = (position: number) => {\n        if (isRTL) {\n            // In RTL, insetInlineStart maps to 'right', so we need to calculate from the right edge\n            return triggerListElement.offsetWidth - position - activeTriggerElement.offsetWidth;\n        }\n        return position;\n    };\n\n    if (isOverflowingLeft) {\n        const willFitAllItemsToTheLeft =\n            triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n        if (willFitAllItemsToTheLeft) {\n            activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n        } else {\n            const position = triggerListElement.offsetWidth - activeTriggerElement.offsetWidth;\n            activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n        }\n        activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n    } else if (isOverflowingRight) {\n        const position = triggerListElement.clientWidth - activeTriggerElement.offsetWidth;\n        activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(position)}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    } else {\n        activeIndicatorElement.style.insetInlineStart = `${getInlineStartPosition(activeTriggerElement.offsetLeft)}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    }\n};\n\nexport const useTabTriggers = ({\n    activeTab,\n}: {\n    activeTab?: string;\n}): {\n    triggerListRef: RefObject<HTMLDivElement>;\n    activeIndicatorRef: RefObject<HTMLSpanElement>;\n    triggers: TabTrigger[];\n    triggersOutOfView: TabTrigger[];\n    addTrigger: (trigger: TabTrigger) => void;\n} => {\n    const triggerListRef = useRef<HTMLDivElement | null>(null);\n    const activeIndicatorRef = useRef<HTMLSpanElement | null>(null);\n    const [triggers, setTriggers] = useState<TabTrigger[]>([]);\n    const [triggersOutOfView, setTriggersOutOfView] = useState<TabTrigger[]>([]);\n\n    // move the active indicator and scroll to the correct position when the tab changes\n    useEffect(() => {\n        const triggerListElement = triggerListRef.current;\n        const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n        if (activeTriggerElement instanceof HTMLButtonElement && triggerListElement instanceof HTMLDivElement) {\n            moveActiveIndicator(triggerListElement, activeIndicatorRef);\n            activeTriggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });\n        }\n    }, [activeTab, activeIndicatorRef]);\n\n    useLayoutEffect(() => {\n        const triggerListElement = triggerListRef.current;\n        const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n        if (triggerListElement instanceof HTMLDivElement && activeTriggerElement instanceof HTMLButtonElement) {\n            // move the active indicator to the initial active tab\n            moveActiveIndicator(triggerListElement, activeIndicatorRef);\n\n            // observe addition of the dropdown trigger which reduces the available width\n            const mutationObserver = new MutationObserver(() => {\n                activeTriggerElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'end' });\n                moveActiveIndicator(triggerListElement, activeIndicatorRef);\n            });\n            if (triggerListElement.parentNode) {\n                mutationObserver.observe(triggerListElement.parentNode, { childList: true });\n            }\n\n            // calculate the overflowing elements when item starts overflowing the parent\n            const intersectionObserver = new IntersectionObserver(\n                () => {\n                    setTriggersOutOfView(getOverflowingTriggers(triggers, triggerListElement));\n                    moveActiveIndicator(triggerListElement, activeIndicatorRef);\n                },\n                {\n                    root: triggerListElement,\n                    threshold: 1,\n                },\n            );\n            for (const trigger of triggers) {\n                if (trigger.ref?.current) {\n                    intersectionObserver.observe(trigger.ref.current);\n                }\n            }\n\n            return () => {\n                intersectionObserver.disconnect();\n                mutationObserver.disconnect();\n            };\n        }\n    }, [triggers, triggerListRef, activeIndicatorRef]);\n\n    const addTrigger = (trigger: TabTrigger) => {\n        if (!trigger.previousElement) {\n            setTriggers((prev) => [...prev, trigger]);\n        }\n\n        setTriggers((prev) => {\n            const index = prev.findIndex((element) => element.element === trigger.previousElement);\n            prev[index] = trigger;\n            return [...prev];\n        });\n    };\n\n    return {\n        triggerListRef,\n        activeIndicatorRef,\n        triggersOutOfView,\n        triggers,\n        addTrigger,\n    };\n};\n"],"names":["getOverflowingTriggers","triggers","triggerListElement","trigger","triggerElement","_a","moveActiveIndicator","activeIndicatorRef","activeIndicatorElement","activeTriggerElement","isRTL","isOverflowingLeft","isOverflowingRight","getInlineStartPosition","position","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}
+{"version":3,"file":"fondue-components78.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}