@frontify/fondue-components 27.0.1 → 28.0.0

package/dist/fondue-components76.js

@@ -1,11 +1,23 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components99.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);
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { ComboboxBase as a } from "./fondue-components98.js";
+import { useSingleSelect as b } from "./fondue-components100.js";
+const p = ({ value: e, onSelect: o, defaultValue: t, ...m }, l) => {
+  const { selectedItemValues: r, selectItem: s, clear: n } = b(o, e, t);
+  return /* @__PURE__ */ c(
+    a,
+    {
+      ref: l,
+      multiple: !1,
+      selectedItemValues: r,
+      onItemSelect: s,
+      onClear: n,
+      ...m
+    }
+  );
+}, f = i(p);
+f.displayName = "Select.Combobox";
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  f as ComboboxSingle
 };
 //# sourceMappingURL=fondue-components76.js.map

package/dist/fondue-components76.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components76.js","sources":["../src/components/Select/components/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components76.js","sources":["../src/components/Select/ComboboxSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst ComboboxSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxSingle = forwardRef<HTMLDivElement, ComboboxSingleProps>(ComboboxSingleInput);\nComboboxSingle.displayName = 'Select.Combobox';\n"],"names":["ComboboxSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","ComboboxBase","ComboboxSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}

package/dist/fondue-components77.js

@@ -1,14 +1,23 @@
-const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
-  root: t,
-  thumb: c,
-  track: o,
-  range: s
-};
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { SelectBase as u } from "./fondue-components101.js";
+import { useMultiselect as a } from "./fondue-components99.js";
+const n = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
+  const { selectedItemValues: m, toggleSelectedItem: c, clear: i } = a(t, e, l);
+  return /* @__PURE__ */ p(
+    u,
+    {
+      ref: r,
+      multiple: !0,
+      selectedItemValues: m,
+      onItemSelect: c,
+      onClear: i,
+      ...o
+    }
+  );
+}, f = s(n);
+f.displayName = "Select.Multi";
 export {
-  _ as default,
-  s as range,
-  t as root,
-  c as thumb,
-  o as track
+  f as SelectMultiple
 };
 //# 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/Select/SelectMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type SelectMultipleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst SelectMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectMultiple = forwardRef<HTMLDivElement, SelectMultipleProps>(SelectMultipleInput);\nSelectMultiple.displayName = 'Select.Multi';\n"],"names":["SelectMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","SelectBase","SelectMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}

package/dist/fondue-components78.js

@@ -1,14 +1,23 @@
-const t = "_root_gywoe_3", o = "_content_gywoe_18", n = "_action_gywoe_22", c = "_actionButton_gywoe_200", _ = {
-  root: t,
-  content: o,
-  action: n,
-  actionButton: c
-};
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { SelectBase as S } from "./fondue-components101.js";
+import { useSingleSelect as a } from "./fondue-components100.js";
+const p = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
+  const { selectedItemValues: m, selectItem: c, clear: s } = a(t, e, l);
+  return /* @__PURE__ */ n(
+    S,
+    {
+      ref: r,
+      multiple: !1,
+      selectedItemValues: m,
+      onItemSelect: c,
+      onClear: s,
+      ...o
+    }
+  );
+}, f = i(p);
+f.displayName = "Select";
 export {
-  n as action,
-  c as actionButton,
-  o as content,
-  _ as default,
-  t as root
+  f as SelectSingle
 };
 //# sourceMappingURL=fondue-components78.js.map

package/dist/fondue-components78.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components78.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components78.js","sources":["../src/components/Select/SelectSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type SelectSingleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst SelectSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectSingle = forwardRef<HTMLDivElement, SelectSingleProps>(SelectSingleInput);\nSelectSingle.displayName = 'Select';\n"],"names":["SelectSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","SelectBase","SelectSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAoB,CACtB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAeC,EAA8Cb,CAAiB;AAC3FY,EAAa,cAAc;"}

package/dist/fondue-components79.js

@@ -1,10 +1,22 @@
-const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
-  root: t,
-  thumb: o
-};
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { IconCheckMark as n } from "@frontify/fondue-icons";
+import { forwardRef as l } from "react";
+import a from "./fondue-components102.js";
+const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
+  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
+  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
+] });
+o.displayName = "Select.Item";
+const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
+  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
+  c
+] }, e);
+s.displayName = "Select.Group";
+const N = l(s);
 export {
-  s as default,
-  t as root,
-  o as thumb
+  I as ForwardedRefSelectItem,
+  N as ForwardedRefSelectItemGroup,
+  o as SelectItem,
+  s as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components79.js.map

package/dist/fondue-components79.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components79.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components79.js","sources":["../src/components/Select/components/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The groups heading\n     */\n    heading?: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, heading, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}

package/dist/fondue-components8.js

@@ -1,11 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
 import { Slot as P } from "@radix-ui/react-slot";
 import { forwardRef as F, useState as y, useMemo as N, Children as I } from "react";
-import { ForwardedRefColorGradientInput as w } from "./fondue-components46.js";
-import { ForwardedRefColorPickerInput as h } from "./fondue-components47.js";
-import { ForwardedRefColorValueInput as G } from "./fondue-components48.js";
-import V from "./fondue-components49.js";
-import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components50.js";
+import { ForwardedRefColorGradientInput as w } from "./fondue-components47.js";
+import { ForwardedRefColorPickerInput as h } from "./fondue-components48.js";
+import { ForwardedRefColorValueInput as G } from "./fondue-components49.js";
+import V from "./fondue-components50.js";
+import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components51.js";
 const p = ({
   children: t,
   currentColor: r = A,

package/dist/fondue-components80.js

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

package/dist/fondue-components80.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components80.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-components80.js","sources":["../src/components/Select/components/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}

package/dist/fondue-components81.js

@@ -1,26 +1,14 @@
-const t = "_table_1v3sd_4", o = "_headerCell_1v3sd_18", e = "_rowCell_1v3sd_19", _ = "_row_1v3sd_19", s = "_caption_1v3sd_76", n = "_header_1v3sd_18", d = "_cellContent_1v3sd_124", l = "_sortIndicator_1v3sd_152", c = "_body_1v3sd_162", r = "_buttonText_1v3sd_235", a = {
-  table: t,
-  headerCell: o,
-  rowCell: e,
-  row: _,
-  caption: s,
-  header: n,
-  cellContent: d,
-  sortIndicator: l,
-  body: c,
-  buttonText: r
+const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
+  root: t,
+  thumb: c,
+  track: o,
+  range: s
 };
 export {
-  c as body,
-  r as buttonText,
-  s as caption,
-  d as cellContent,
-  a as default,
-  n as header,
-  o as headerCell,
-  _ as row,
-  e as rowCell,
-  l as sortIndicator,
-  t as table
+  _ as default,
+  s as range,
+  t as root,
+  c as thumb,
+  o as track
 };
 //# sourceMappingURL=fondue-components81.js.map

package/dist/fondue-components81.js.map

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

package/dist/fondue-components82.js

@@ -1,37 +1,14 @@
-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 = "_root_gywoe_3", o = "_content_gywoe_18", n = "_action_gywoe_22", c = "_actionButton_gywoe_200", _ = {
+  root: t,
+  content: o,
+  action: n,
+  actionButton: c
+};
 export {
-  a as handleKeyDown,
-  f as shouldIgnoreRowClick
+  n as action,
+  c as actionButton,
+  o as content,
+  _ as default,
+  t as root
 };
 //# sourceMappingURL=fondue-components82.js.map

package/dist/fondue-components82.js.map

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

package/dist/fondue-components83.js

@@ -1,14 +1,10 @@
-const n = "_root_bn9za_3", t = "_mainContent_bn9za_15", o = "_actionButton_bn9za_28", a = "_secondaryContent_bn9za_123", e = {
-  root: n,
-  mainContent: t,
-  actionButton: o,
-  secondaryContent: a
+const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
+  root: t,
+  thumb: o
 };
 export {
-  o as actionButton,
-  e as default,
-  t as mainContent,
-  n as root,
-  a as secondaryContent
+  s as default,
+  t as root,
+  o as thumb
 };
 //# sourceMappingURL=fondue-components83.js.map

package/dist/fondue-components83.js.map

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

package/dist/fondue-components84.js

@@ -1,71 +1,16 @@
-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];
-      });
-    }
-  };
+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 {
-  b as useTabTriggers
+  s as useTextTruncation
 };
 //# sourceMappingURL=fondue-components84.js.map

package/dist/fondue-components84.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components84.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-components84.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-components85.js

@@ -1,18 +1,26 @@
-const t = "_root_ujssn_5", r = "_triggerListWrapper_ujssn_17", s = "_trigger_ujssn_17", n = "_activeIndicator_ujssn_65", e = "_triggerList_ujssn_17", i = "_content_ujssn_159", o = {
-  root: t,
-  triggerListWrapper: r,
-  trigger: s,
-  activeIndicator: n,
-  triggerList: e,
-  content: i
+const t = "_table_1v3sd_4", o = "_headerCell_1v3sd_18", e = "_rowCell_1v3sd_19", _ = "_row_1v3sd_19", s = "_caption_1v3sd_76", n = "_header_1v3sd_18", d = "_cellContent_1v3sd_124", l = "_sortIndicator_1v3sd_152", c = "_body_1v3sd_162", r = "_buttonText_1v3sd_235", a = {
+  table: t,
+  headerCell: o,
+  rowCell: e,
+  row: _,
+  caption: s,
+  header: n,
+  cellContent: d,
+  sortIndicator: l,
+  body: c,
+  buttonText: r
 };
 export {
-  n as activeIndicator,
-  i as content,
-  o as default,
-  t as root,
-  s as trigger,
-  e as triggerList,
-  r as triggerListWrapper
+  c as body,
+  r as buttonText,
+  s as caption,
+  d as cellContent,
+  a as default,
+  n as header,
+  o as headerCell,
+  _ as row,
+  e as rowCell,
+  l as sortIndicator,
+  t as table
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components85.js.map

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

package/dist/fondue-components86.js

@@ -1,28 +1,37 @@
-const o = "_root_1m55x_2", _ = {
-  root: o,
-  "weight-default": "_weight-default_1m55x_7",
-  "weight-strong": "_weight-strong_1m55x_11",
-  "weight-x-strong": "_weight-x-strong_1m55x_15",
-  "size-x-small": "_size-x-small_1m55x_19",
-  "size-small": "_size-small_1m55x_24",
-  "size-medium": "_size-medium_1m55x_29",
-  "size-large": "_size-large_1m55x_34",
-  "color-default": "_color-default_1m55x_39",
-  "color-weak": "_color-weak_1m55x_43",
-  "color-disabled": "_color-disabled_1m55x_47",
-  "color-negative": "_color-negative_1m55x_51",
-  "color-positive": "_color-positive_1m55x_55",
-  "color-warning": "_color-warning_1m55x_59",
-  "color-interactive": "_color-interactive_1m55x_63",
-  "color-box-neutral": "_color-box-neutral_1m55x_67",
-  "color-box-selected": "_color-box-selected_1m55x_71",
-  "color-box-disabled": "_color-box-disabled_1m55x_75",
-  "color-box-positive": "_color-box-positive_1m55x_79",
-  "color-box-negative": "_color-box-negative_1m55x_83",
-  "color-box-warning": "_color-box-warning_1m55x_87"
-};
+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 {
-  _ as default,
-  o as root
+  a as handleKeyDown,
+  f as shouldIgnoreRowClick
 };
 //# sourceMappingURL=fondue-components86.js.map

package/dist/fondue-components86.js.map

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