@frontify/fondue-components 19.2.0 → 19.3.0

package/dist/fondue-components7.js

@@ -1,37 +1,43 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { IconMinus as m, IconCheckMark as h } from "@frontify/fondue-icons";
-import * as o from "@radix-ui/react-checkbox";
-import { forwardRef as k } from "react";
-import { cn as p } from "./fondue-components36.js";
-import { checkboxIndicatorStyles as l, checkboxStyles as w } from "./fondue-components40.js";
-const f = ({
-  className: a,
-  value: c,
-  onChange: i,
-  defaultValue: d,
-  "data-test-id": r = "fondue-checkbox",
-  ...e
-}, n) => /* @__PURE__ */ t(
-  o.Root,
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { IconMinus as k, IconCheckMark as l } from "@frontify/fondue-icons";
+import * as i from "@radix-ui/react-checkbox";
+import { forwardRef as f } from "react";
+import { cn as h } from "./fondue-components37.js";
+import { checkboxIndicatorStyles as w, checkboxStyles as u } from "./fondue-components41.js";
+const x = ({
+  className: r,
+  value: d,
+  onChange: t,
+  defaultValue: s,
+  "data-test-id": m = "fondue-checkbox",
+  readOnly: a,
+  ...o
+}, n) => /* @__PURE__ */ e(
+  i.Root,
   {
     ref: n,
-    checked: c,
-    defaultChecked: d,
-    className: p(w(e), a),
-    onClick: i,
-    "data-test-id": r,
-    ...e,
-    children: /* @__PURE__ */ s(o.Indicator, { className: l, children: [
-      /* @__PURE__ */ t(
-        m,
+    checked: d,
+    defaultChecked: s,
+    className: h(u(o), r),
+    onClick: (c) => {
+      if (a)
+        return c.preventDefault(), !1;
+      t == null || t(c);
+    },
+    "data-test-id": m,
+    "aria-readonly": a,
+    ...o,
+    children: /* @__PURE__ */ p(i.Indicator, { className: w, children: [
+      /* @__PURE__ */ e(
+        k,
         {
           size: 16,
           className: 'tw-hidden tw-opacity-0 group-data-[state="indeterminate"]:tw-block group-data-[state="indeterminate"]:tw-opacity-100 tw-transition-opacity',
           "data-test-id": "icon-indeterminate"
         }
       ),
-      /* @__PURE__ */ t(
-        h,
+      /* @__PURE__ */ e(
+        l,
         {
           size: 16,
           className: 'tw-hidden tw-opacity-0 group-data-[state="checked"]:tw-block group-data-[state="checked"]:tw-opacity-100 tw-transition-opacity',
@@ -40,10 +46,10 @@ const f = ({
       )
     ] })
   }
-), x = k(f);
-x.displayName = "Checkbox";
+), b = f(x);
+b.displayName = "Checkbox";
 export {
-  x as Checkbox,
-  f as CheckboxComponent
+  b as Checkbox,
+  x as CheckboxComponent
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={cn(checkboxStyles(props), className)}\n            onClick={onChange}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n                <IconMinus\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASL;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWM,EAAGC,EAAeL,CAAK,GAAGL,CAAS;AAAA,IAC9C,SAASE;AAAA,IACT,gBAAcE;AAAA,IACb,GAAGC;AAAA,IAEJ,UAAC,gBAAAM,EAAAH,EAAkB,WAAlB,EAA4B,WAAWI,GACpC,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,MAEA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EACJ,CAAA;AAAA,EAAA;AACJ,GAIKC,IAAWC,EAA6CjB,CAAiB;AACtFgB,EAAS,cAAc;"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        readOnly,\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={cn(checkboxStyles(props), className)}\n            onClick={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    return false;\n                }\n                onChange?.(event);\n            }}\n            data-test-id={dataTestId}\n            aria-readonly={readOnly}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n                <IconMinus\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","readOnly","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","event","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASN;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWO,EAAGC,EAAeL,CAAK,GAAGN,CAAS;AAAA,IAC9C,SAAS,CAACY,MAAU;AAChB,UAAIP;AACA,eAAAO,EAAM,eAAA,GACC;AAEX,MAAAV,KAAA,QAAAA,EAAWU;AAAA,IACf;AAAA,IACA,gBAAcR;AAAA,IACd,iBAAeC;AAAA,IACd,GAAGC;AAAA,IAEJ,UAAA,gBAAAO,EAACJ,EAAkB,WAAlB,EAA4B,WAAWK,GACpC,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjB,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACJ;AAAA,EAAA;AAAA,GAKCC,IAAWC,EAA6CnB,CAAiB;AACtFkB,EAAS,cAAc;"}

package/dist/fondue-components70.js

@@ -1,16 +1,14 @@
-const t = "_root_1g6pz_5", _ = "_small_1g6pz_16", o = "_medium_1g6pz_20", m = "_large_1g6pz_24", s = "_thumb_1g6pz_61", l = {
+const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
   root: t,
-  small: _,
-  medium: o,
-  large: m,
-  thumb: s
+  thumb: o,
+  track: s,
+  range: _
 };
 export {
-  l as default,
-  m as large,
-  o as medium,
+  r as default,
+  _ as range,
   t as root,
-  _ as small,
-  s as thumb
+  o as thumb,
+  s as track
 };
 //# sourceMappingURL=fondue-components70.js.map

package/dist/fondue-components70.js.map

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

package/dist/fondue-components71.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 t = "_root_1g6pz_5", _ = "_small_1g6pz_16", o = "_medium_1g6pz_20", m = "_large_1g6pz_24", s = "_thumb_1g6pz_61", l = {
+  root: t,
+  small: _,
+  medium: o,
+  large: m,
+  thumb: s
 };
 export {
-  s as useTextTruncation
+  l as default,
+  m as large,
+  o as medium,
+  t as root,
+  _ as small,
+  s as thumb
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components71.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBa,MAAAA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACR,QAAA,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AAChC,YAAAC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IAAK,CAC7D;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAW;AAAA,EAAA,GAClC,CAACH,CAAG,CAAC;AACZ;"}
+{"version":3,"file":"fondue-components71.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components72.js

@@ -1,24 +1,16 @@
-const t = "_table_1outv_4", o = "_headerCell_1outv_18", e = "_rowCell_1outv_19", _ = "_caption_1outv_46", n = "_cellContent_1outv_71", l = "_sortIndicator_1outv_96", c = "_body_1outv_100", r = "_row_1outv_19", s = "_buttonText_1outv_164", a = {
-  table: t,
-  headerCell: o,
-  rowCell: e,
-  caption: _,
-  cellContent: n,
-  sortIndicator: l,
-  body: c,
-  row: r,
-  buttonText: s
+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 {
-  c as body,
-  s as buttonText,
-  _ as caption,
-  n as cellContent,
-  a as default,
-  o as headerCell,
-  r as row,
-  e as rowCell,
-  l as sortIndicator,
-  t as table
+  s as useTextTruncation
 };
 //# 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/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-components73.js

@@ -1,32 +1,24 @@
-function c(t, e) {
-  const n = 'tr[tabindex="0"]', r = t.closest("table");
-  if (!r)
-    return null;
-  const o = Array.from(r.querySelectorAll(n)), l = o.indexOf(t) + (e === "ArrowUp" ? -1 : 1);
-  return l >= 0 && l < o.length ? o[l] : null;
-}
-function a(t) {
-  const e = t.target, n = e.closest("tr");
-  if (!n || e !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
-    return;
-  const r = c(n, t.key);
-  r && (t.preventDefault(), r.focus());
-}
-const s = [HTMLButtonElement, HTMLAnchorElement], u = ["button", "link"];
-function f(t) {
-  let e = (t == null ? void 0 : t.target) instanceof Element ? t.target : null;
-  for (; e && !(e instanceof HTMLTableRowElement); ) {
-    if (s.some((r) => e instanceof r))
-      return !0;
-    const n = e.getAttribute("role");
-    if (n && u.includes(n))
-      return !0;
-    e = e.parentElement;
-  }
-  return !1;
-}
+const t = "_table_1outv_4", o = "_headerCell_1outv_18", e = "_rowCell_1outv_19", _ = "_caption_1outv_46", n = "_cellContent_1outv_71", l = "_sortIndicator_1outv_96", c = "_body_1outv_100", r = "_row_1outv_19", s = "_buttonText_1outv_164", a = {
+  table: t,
+  headerCell: o,
+  rowCell: e,
+  caption: _,
+  cellContent: n,
+  sortIndicator: l,
+  body: c,
+  row: r,
+  buttonText: s
+};
 export {
-  a as handleKeyDown,
-  f as isEventFromInteractiveElement
+  c as body,
+  s as buttonText,
+  _ as caption,
+  n as cellContent,
+  a as default,
+  o as headerCell,
+  r as row,
+  e as rowCell,
+  l as sortIndicator,
+  t as table
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components73.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 isEventFromInteractiveElement(event?: MouseEvent): boolean {\n    let node = event?.target instanceof Element ? event.target : null;\n\n    while (node && !(node instanceof HTMLTableRowElement)) {\n        if (INTERACTIVE_ELEMENTS_LIST.some((interactiveElement) => node instanceof interactiveElement)) {\n            return true;\n        }\n\n        const role = node.getAttribute('role');\n        if (role && INTERACTIVE_ROLES_LIST.includes(role)) {\n            return true;\n        }\n\n        node = node.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","isEventFromInteractiveElement","node","interactiveElement","role"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAe,GACrBE,EAAQ,MAAM;AAEtB;AAEA,MAAMC,IAA4B,CAAC,mBAAmB,iBAAiB,GACjEC,IAAyB,CAAC,UAAU,MAAM;AAEzC,SAASC,EAA8BL,GAA6B;AACvE,MAAIM,KAAON,KAAA,gBAAAA,EAAO,mBAAkB,UAAUA,EAAM,SAAS;AAEtD,SAAAM,KAAQ,EAAEA,aAAgB,wBAAsB;AACnD,QAAIH,EAA0B,KAAK,CAACI,MAAuBD,aAAgBC,CAAkB;AAClF,aAAA;AAGL,UAAAC,IAAOF,EAAK,aAAa,MAAM;AACrC,QAAIE,KAAQJ,EAAuB,SAASI,CAAI;AACrC,aAAA;AAGX,IAAAF,IAAOA,EAAK;AAAA,EAAA;AAGT,SAAA;AACX;"}
+{"version":3,"file":"fondue-components73.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components74.js

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

package/dist/fondue-components74.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components74.js","sources":["../src/components/Tabs/hooks/useTabTriggers.tsx"],"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    const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n    const isOverflowingRight =\n        activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n    if (isOverflowingLeft) {\n        const willFitAllItemsToTheLeft =\n            triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n        if (willFitAllItemsToTheLeft) {\n            activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n        } else {\n            activeIndicatorElement.style.left = `${triggerListElement.offsetWidth - activeTriggerElement.offsetWidth}px`;\n        }\n        activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n    } else if (isOverflowingRight) {\n        activeIndicatorElement.style.left = `${triggerListElement.clientWidth - activeTriggerElement.offsetWidth}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    } else {\n        activeIndicatorElement.style.left = `${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","isOverflowingLeft","isOverflowingRight","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}
+{"version":3,"file":"fondue-components74.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-components75.js

@@ -1,18 +1,59 @@
-const t = "_triggerListWrapper_chl5v_5", r = "_trigger_chl5v_5", c = "_activeIndicator_chl5v_53", e = "_triggerList_chl5v_5", i = "_root_chl5v_143", o = "_content_chl5v_166", g = {
-  triggerListWrapper: t,
-  trigger: r,
-  activeIndicator: c,
-  triggerList: e,
-  root: i,
-  content: o
+import { useRef as v, useState as w, useEffect as W, useLayoutEffect as p } from "react";
+const T = (e, s) => e.filter((f) => {
+  var c;
+  const o = (c = f.ref) == null ? void 0 : c.current;
+  return o ? o.offsetLeft + o.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || o.offsetLeft - s.scrollLeft < 0 : !1;
+}), u = (e, s) => {
+  const f = s.current, o = e == null ? void 0 : e.querySelector('[data-state="active"]');
+  if (!e || !(o instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
+    return;
+  const c = (e == null ? void 0 : e.scrollLeft) > (o == null ? void 0 : o.offsetLeft), l = (o == null ? void 0 : o.offsetLeft) + (o == null ? void 0 : o.offsetWidth) > (e == null ? void 0 : e.offsetWidth);
+  c ? (e.offsetWidth > o.offsetWidth + o.offsetLeft ? f.style.left = `${o.offsetLeft}px` : f.style.left = `${e.offsetWidth - o.offsetWidth}px`, f.style.width = `${o == null ? void 0 : o.offsetWidth}px`) : l ? (f.style.left = `${e.clientWidth - o.offsetWidth}px`, f.style.width = `${o.offsetWidth}px`) : (f.style.left = `${o.offsetLeft}px`, f.style.width = `${o.offsetWidth}px`);
+}, O = ({
+  activeTab: e
+}) => {
+  const s = v(null), f = v(null), [o, c] = w([]), [l, i] = w([]);
+  return W(() => {
+    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
+    n instanceof HTMLButtonElement && t instanceof HTMLDivElement && (u(t, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
+  }, [e, f]), p(() => {
+    var d;
+    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
+    if (t instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
+      u(t, f);
+      const a = new MutationObserver(() => {
+        n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), u(t, f);
+      });
+      t.parentNode && a.observe(t.parentNode, { childList: !0 });
+      const r = new IntersectionObserver(
+        () => {
+          i(T(o, t)), u(t, f);
+        },
+        {
+          root: t,
+          threshold: 1
+        }
+      );
+      for (const h of o)
+        (d = h.ref) != null && d.current && r.observe(h.ref.current);
+      return () => {
+        r.disconnect(), a.disconnect();
+      };
+    }
+  }, [o, s, f]), {
+    triggerListRef: s,
+    activeIndicatorRef: f,
+    triggersOutOfView: l,
+    triggers: o,
+    addTrigger: (t) => {
+      t.previousElement || c((n) => [...n, t]), c((n) => {
+        const d = n.findIndex((a) => a.element === t.previousElement);
+        return n[d] = t, [...n];
+      });
+    }
+  };
 };
 export {
-  c as activeIndicator,
-  o as content,
-  g as default,
-  i as root,
-  r as trigger,
-  e as triggerList,
-  t as triggerListWrapper
+  O as useTabTriggers
 };
 //# 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/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    const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n    const isOverflowingRight =\n        activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n    if (isOverflowingLeft) {\n        const willFitAllItemsToTheLeft =\n            triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n        if (willFitAllItemsToTheLeft) {\n            activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n        } else {\n            activeIndicatorElement.style.left = `${triggerListElement.offsetWidth - activeTriggerElement.offsetWidth}px`;\n        }\n        activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n    } else if (isOverflowingRight) {\n        activeIndicatorElement.style.left = `${triggerListElement.clientWidth - activeTriggerElement.offsetWidth}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    } else {\n        activeIndicatorElement.style.left = `${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","isOverflowingLeft","isOverflowingRight","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev","index","element"],"mappings":"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"}

package/dist/fondue-components76.js

@@ -1,29 +1,18 @@
-const o = "_root_1cjgh_2", _ = {
-  root: o,
-  "weight-default": "_weight-default_1cjgh_7",
-  "weight-strong": "_weight-strong_1cjgh_11",
-  "weight-x-strong": "_weight-x-strong_1cjgh_15",
-  "size-x-small": "_size-x-small_1cjgh_19",
-  "size-small": "_size-small_1cjgh_24",
-  "size-medium": "_size-medium_1cjgh_29",
-  "size-large": "_size-large_1cjgh_34",
-  "color-default": "_color-default_1cjgh_39",
-  "color-weak": "_color-weak_1cjgh_43",
-  "color-x-weak": "_color-x-weak_1cjgh_47",
-  "color-disabled": "_color-disabled_1cjgh_51",
-  "color-negative": "_color-negative_1cjgh_55",
-  "color-positive": "_color-positive_1cjgh_59",
-  "color-warning": "_color-warning_1cjgh_63",
-  "color-interactive": "_color-interactive_1cjgh_67",
-  "color-box-neutral": "_color-box-neutral_1cjgh_71",
-  "color-box-selected": "_color-box-selected_1cjgh_75",
-  "color-box-disabled": "_color-box-disabled_1cjgh_79",
-  "color-box-positive": "_color-box-positive_1cjgh_83",
-  "color-box-negative": "_color-box-negative_1cjgh_87",
-  "color-box-warning": "_color-box-warning_1cjgh_91"
+const t = "_triggerListWrapper_chl5v_5", r = "_trigger_chl5v_5", c = "_activeIndicator_chl5v_53", e = "_triggerList_chl5v_5", i = "_root_chl5v_143", o = "_content_chl5v_166", g = {
+  triggerListWrapper: t,
+  trigger: r,
+  activeIndicator: c,
+  triggerList: e,
+  root: i,
+  content: o
 };
 export {
-  _ as default,
-  o as root
+  c as activeIndicator,
+  o as content,
+  g as default,
+  i as root,
+  r as trigger,
+  e as triggerList,
+  t as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components76.js.map

package/dist/fondue-components76.js.map

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