@frontify/fondue-components 19.0.0 → 19.1.0

package/dist/fondue-components10.js

@@ -1,39 +1,41 @@
 import { jsx as r } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-separator";
-import { forwardRef as p } from "react";
-import { cn as f } from "./fondue-components36.js";
-import { dividerStyles as l } from "./fondue-components49.js";
-const c = p(
+import * as p from "@radix-ui/react-separator";
+import { forwardRef as f } from "react";
+import { cn as l } from "./fondue-components36.js";
+import { dividerStyles as c } from "./fondue-components49.js";
+const v = f(
   ({
     "data-test-id": o = "fondue-divider",
     direction: t = "horizontal",
     className: i,
     variant: e,
     as: d = "div",
-    ...a
-  }, m) => {
-    const s = d;
+    decorative: a,
+    ...m
+  }, s) => {
+    const n = d;
     return /* @__PURE__ */ r(
-      n.Root,
+      p.Root,
       {
-        ref: m,
-        className: f(
-          l({
+        ref: s,
+        className: l(
+          c({
             direction: t,
             variant: e,
-            ...a
+            ...m
           }),
           i
         ),
         "data-test-id": o,
+        decorative: a,
         asChild: !0,
-        children: /* @__PURE__ */ r(s, {})
+        children: /* @__PURE__ */ r(n, {})
       }
     );
   }
 );
-c.displayName = "Divider";
+v.displayName = "Divider";
 export {
-  c as Divider
+  v as Divider
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            as = 'div',\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","as","props","ref","Component","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AA4CO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,GAAGC;AAAA,KAEPC,MACe;AACf,UAAMC,IAAYH;AAGd,WAAA,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAV;AAAA,YACA,SAAAE;AAAA,YACA,GAAGE;AAAA,UAAA,CACN;AAAA,UACDH;AAAA,QACJ;AAAA,QACA,gBAAcF;AAAA,QACd,SAAO;AAAA,QAEP,4BAACO,GAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAAA;AAGZ;AAEAT,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            as = 'div',\n            decorative,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","as","decorative","props","ref","Component","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AAkDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MACe;AACf,UAAMC,IAAYJ;AAGd,WAAA,gBAAAK;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAX;AAAA,YACA,SAAAE;AAAA,YACA,GAAGG;AAAA,UAAA,CACN;AAAA,UACDJ;AAAA,QACJ;AAAA,QACA,gBAAcF;AAAA,QACd,YAAAK;AAAA,QACA,SAAO;AAAA,QAEP,4BAACG,GAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAAA;AAGZ;AAEAV,EAAQ,cAAc;"}

package/dist/fondue-components25.js

@@ -1,155 +1,155 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as h } from "@frontify/fondue-icons";
-import { forwardRef as b, useRef as w, useMemo as j } from "react";
+import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as E } from "@frontify/fondue-icons";
+import { forwardRef as b, useRef as w, useMemo as h } from "react";
 import { useSyncRefs as g } from "./fondue-components46.js";
 import { useTextTruncation as N } from "./fondue-components70.js";
-import { Box as L } from "./fondue-components5.js";
-import { LoadingCircle as S } from "./fondue-components18.js";
-import i from "./fondue-components71.js";
-import { handleKeyDown as $ } from "./fondue-components72.js";
+import { Box as j } from "./fondue-components5.js";
+import { LoadingCircle as L } from "./fondue-components18.js";
+import o from "./fondue-components71.js";
+import { handleKeyDown as S, isEventFromInteractiveElement as $ } from "./fondue-components72.js";
 const R = b(
-  ({ layout: a = "auto", fontSize: e = "medium", sticky: d, children: r, ...o }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
+  ({ layout: a = "auto", fontSize: e = "medium", sticky: d, children: s, ...n }, l) => /* @__PURE__ */ t("div", { onKeyDown: S, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
     "table",
     {
       ref: l,
-      className: i.table,
+      className: o.table,
       "data-layout": a,
       "data-font-size": e,
       "data-sticky": d,
-      ...o,
-      children: r
+      ...n,
+      children: s
     }
   ) })
 );
 R.displayName = "Table.Root";
-const C = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: i.caption, children: a }));
-C.displayName = "Table.Caption";
-const x = b(
-  ({ children: a, "aria-label": e, "aria-busy": d }, r) => /* @__PURE__ */ t("thead", { ref: r, className: i.header, "aria-label": e, "aria-busy": d, children: a })
+const v = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: o.caption, children: a }));
+v.displayName = "Table.Caption";
+const C = b(
+  ({ children: a, "aria-label": e, "aria-busy": d }, s) => /* @__PURE__ */ t("thead", { ref: s, className: o.header, "aria-label": e, "aria-busy": d, children: a })
 );
-x.displayName = "Table.Header";
-const v = b(
+C.displayName = "Table.Header";
+const x = b(
   ({
     noShrink: a = !1,
     truncate: e = !1,
     align: d = "left",
-    scope: r = "col",
-    sortTranslations: o,
+    scope: s = "col",
+    sortTranslations: n,
     sortDirection: l,
     colSpan: c,
     width: m,
     state: f = "idle",
     loadingStateAriaLabel: u,
-    onSortChange: s,
-    children: n
+    onSortChange: i,
+    children: r
   }, k) => {
     const y = w(null);
     g(y, k), N(y);
-    const z = j(() => typeof n == "string" ? l === "ascending" ? (o == null ? void 0 : o.sortDescending) ?? `Sort by ${n} descending` : (o == null ? void 0 : o.sortAscending) ?? `Sort by ${n} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [n, l, o]), B = () => {
-      if (!s)
+    const z = h(() => typeof r == "string" ? l === "ascending" ? (n == null ? void 0 : n.sortDescending) ?? `Sort by ${r} descending` : (n == null ? void 0 : n.sortAscending) ?? `Sort by ${r} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [r, l, n]), B = () => {
+      if (!i)
         return;
-      s(l === void 0 || l === "descending" ? "ascending" : "descending");
+      i(l === void 0 || l === "descending" ? "ascending" : "descending");
     };
     return /* @__PURE__ */ t(
       "th",
       {
         ref: y,
         style: { width: m },
-        className: i.headerCell,
-        scope: r,
+        className: o.headerCell,
+        scope: s,
         colSpan: c,
         "data-align": d,
         "data-truncate": e,
         "data-no-shrink": a,
-        "data-sortable": !!s,
-        "aria-sort": s ? l || "none" : void 0,
-        children: f === "loading" ? /* @__PURE__ */ p("div", { className: i.cellContent, "aria-live": "polite", "aria-label": u, children: [
-          typeof n == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: n }) : n,
-          /* @__PURE__ */ t(S, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
-        ] }) : s ? /* @__PURE__ */ p(
+        "data-sortable": !!i,
+        "aria-sort": i ? l || "none" : void 0,
+        children: f === "loading" ? /* @__PURE__ */ p("div", { className: o.cellContent, "aria-live": "polite", "aria-label": u, children: [
+          typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: o.buttonText, children: r }) : r,
+          /* @__PURE__ */ t(L, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
+        ] }) : i ? /* @__PURE__ */ p(
           "button",
           {
-            className: i.cellContent,
+            className: o.cellContent,
             "aria-label": z,
             "data-active": !!l,
             onClick: B,
             children: [
-              typeof n == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: n }) : n,
-              /* @__PURE__ */ t(L, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(h, { className: i.sortIndicator, size: "12" }) })
+              typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: o.buttonText, children: r }) : r,
+              /* @__PURE__ */ t(j, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(E, { className: o.sortIndicator, size: "12" }) })
             ]
           }
-        ) : n
+        ) : r
       }
     );
   }
 );
-v.displayName = "Table.HeaderCell";
+x.displayName = "Table.HeaderCell";
 const T = b(
-  ({ children: a, "aria-busy": e }, d) => /* @__PURE__ */ t("tbody", { ref: d, className: i.body, "aria-busy": e, children: a })
+  ({ children: a, "aria-busy": e }, d) => /* @__PURE__ */ t("tbody", { ref: d, className: o.body, "aria-busy": e, children: a })
 );
 T.displayName = "Table.Body";
 const I = b(
-  ({ disabled: a = !1, selected: e = !1, onClick: d, children: r, "aria-label": o, "data-test-id": l }, c) => {
-    const m = d !== void 0 && !a, f = () => {
-      a || d && d(e);
-    }, u = (s) => {
-      m && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), f());
+  ({ disabled: a = !1, selected: e = !1, onClick: d, children: s, "aria-label": n, "data-test-id": l }, c) => {
+    const m = d !== void 0 && !a, f = (i) => {
+      a || d && !$(i) && d(e);
+    }, u = (i) => {
+      m && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), f());
     };
     return /* @__PURE__ */ t(
       "tr",
       {
         ref: c,
-        className: i.row,
+        className: o.row,
         tabIndex: 0,
         role: m ? "button" : "row",
         "data-disabled": a,
         "data-interactive": m,
         "data-selected": e,
         "aria-disabled": a,
-        "aria-label": o,
+        "aria-label": n,
         "aria-selected": e,
         onClick: m ? f : void 0,
         onKeyDown: m ? u : void 0,
         "data-test-id": l,
-        children: r
+        children: s
       }
     );
   }
 );
 I.displayName = "Table.Row";
 const H = b(
-  ({ colSpan: a, truncate: e, align: d = "left", children: r, "aria-label": o }, l) => {
+  ({ colSpan: a, truncate: e, align: d = "left", children: s, "aria-label": n }, l) => {
     const c = w(null);
     return g(c, l), N(c), /* @__PURE__ */ t(
       "td",
       {
         ref: c,
-        className: i.rowCell,
+        className: o.rowCell,
         colSpan: a,
         "data-align": d,
         "data-truncate": e,
-        "aria-label": o,
-        children: r
+        "aria-label": n,
+        children: s
       }
     );
   }
 );
 H.displayName = "Table.RowCell";
-const Q = {
+const V = {
   Root: R,
-  Caption: C,
-  Header: x,
-  HeaderCell: v,
+  Caption: v,
+  Header: C,
+  HeaderCell: x,
   Body: T,
   Row: I,
   RowCell: H
 };
 export {
-  Q as Table,
+  V as Table,
   T as TableBody,
-  C as TableCaption,
-  x as TableHeader,
-  v as TableHeaderCell,
+  v as TableCaption,
+  C as TableHeader,
+  x as TableHeaderCell,
   R as TableRoot,
   I as TableRow,
   H as TableRowCell

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Box } from '../Box/Box';\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * Font size of the table content\n     * @default 'small'\n     */\n    fontSize?: 'small' | 'medium';\n    /**\n     * Whether header should stick to the top when scrolling\n     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table\n                    ref={ref}\n                    className={styles.table}\n                    data-layout={layout}\n                    data-font-size={fontSize}\n                    data-sticky={sticky}\n                    {...props}\n                >\n                    {children}\n                </table>\n            </div>\n        );\n    },\n);\nTableRoot.displayName = 'Table.Root';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <caption ref={ref} className={styles.caption}>\n            {children}\n        </caption>\n    );\n});\nTableCaption.displayName = 'Table.Caption';\n\ntype TableHeaderProps = {\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} aria-label={ariaLabel} aria-busy={ariaBusy}>\n                {children}\n            </thead>\n        );\n    },\n);\nTableHeader.displayName = 'Table.Header';\n\ntype SortDirection = 'ascending' | 'descending' | undefined;\ntype HorizontalAlignment = 'left' | 'center' | 'right';\n\ntype TableHeaderCellProps = {\n    /**\n     * Scope of the column\n     * @default 'col'\n     */\n    scope?: HTMLTableCellElement['scope'];\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Width of the column\n     */\n    width?: CSSProperties['width'];\n    /**\n     * Current sort direction of the column\n     */\n    sortDirection?: SortDirection;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Aria label for asceding/descending sort. Variables: {column} - column name\n     * @default \"Sort by {column} ascending/descending\"\n     */\n    sortTranslations?: {\n        sortAscending?: string;\n        sortDescending?: string;\n    };\n    /**\n     * Whether the column should have a minimum width\n     * @default false\n     */\n    noShrink?: boolean;\n    /**\n     * State of the cell, used for displaying loading state\n     * @default 'idle'\n     */\n    state?: 'idle' | 'loading';\n    /**\n     * The aria-label to be applied when state='loading'\n     */\n    loadingStateAriaLabel?: string;\n    /**\n     * Handler called when the sort direction changes\n     * @param direction - The new sort direction\n     */\n    onSortChange?: (direction: SortDirection) => void;\n    children: ReactNode;\n};\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n    (\n        {\n            noShrink = false,\n            truncate = false,\n            align = 'left',\n            scope = 'col',\n            sortTranslations,\n            sortDirection,\n            colSpan,\n            width,\n            state = 'idle',\n            loadingStateAriaLabel,\n            onSortChange,\n            children,\n        },\n        ref,\n    ) => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        const sortLabel = useMemo(() => {\n            if (typeof children === 'string') {\n                if (sortDirection === 'ascending') {\n                    return sortTranslations?.sortDescending ?? `Sort by ${children} descending`;\n                }\n                return sortTranslations?.sortAscending ?? `Sort by ${children} ascending`;\n            }\n\n            return sortDirection === 'ascending' ? 'Sort descending' : 'Sort ascending';\n        }, [children, sortDirection, sortTranslations]);\n\n        const handleSortChange = () => {\n            if (!onSortChange) {\n                return;\n            }\n\n            const newDirection: SortDirection =\n                sortDirection === undefined || sortDirection === 'descending' ? 'ascending' : 'descending';\n\n            onSortChange(newDirection);\n        };\n\n        return (\n            <th\n                ref={cellRef}\n                style={{ width }}\n                className={styles.headerCell}\n                scope={scope}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                data-no-shrink={noShrink}\n                data-sortable={!!onSortChange}\n                aria-sort={onSortChange ? sortDirection || 'none' : undefined}\n            >\n                {state === 'loading' ? (\n                    <div className={styles.cellContent} aria-live=\"polite\" aria-label={loadingStateAriaLabel}>\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <LoadingCircle data-test-id=\"fondue-loading-circle\" size=\"xx-small\" />\n                    </div>\n                ) : onSortChange ? (\n                    <button\n                        className={styles.cellContent}\n                        aria-label={sortLabel}\n                        data-active={!!sortDirection}\n                        onClick={handleSortChange}\n                    >\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <Box width={3}>\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </Box>\n                    </button>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\ntype ClickableTableRowProps = BaseTableRowProps & {\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick: (selected: boolean) => void;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = () => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","fontSize","sticky","children","props","ref","handleKeyDown","jsx","styles","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","state","loadingStateAriaLabel","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","LoadingCircle","Box","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","TableRowCell","Table"],"mappings":";;;;;;;;;AAyCO,MAAMA,IAAYC;AAAA,EACrB,CAAC,EAAE,QAAAC,IAAS,QAAQ,UAAAC,IAAW,UAAU,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAM,GAAGC,wBAE9D,OAAI,EAAA,WAAWC,GAAe,MAAK,QAAO,UAAU,IACjD,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG,EAAO;AAAA,MAClB,eAAaR;AAAA,MACb,kBAAgBC;AAAA,MAChB,eAAaC;AAAA,MACZ,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAET;AAGZ;AACAL,EAAU,cAAc;AAEjB,MAAMW,IAAeV,EAA6D,CAAC,EAAE,UAAAI,EAAA,GAAYE,wBAE/F,WAAQ,EAAA,KAAAA,GAAU,WAAWG,EAAO,SAChC,UAAAL,GACL,CAEP;AACDM,EAAa,cAAc;AAQpB,MAAMC,IAAcX;AAAA,EACvB,CAAC,EAAE,UAAAI,GAAU,cAAcQ,GAAW,aAAaC,KAAYP,MAEvD,gBAAAE,EAAC,SAAM,EAAA,KAAAF,GAAU,WAAWG,EAAO,QAAQ,cAAYG,GAAW,aAAWC,GACxE,UAAAT,EACL,CAAA;AAGZ;AACAO,EAAY,cAAc;AA+DnB,MAAMG,IAAkBd;AAAA,EAC3B,CACI;AAAA,IACI,UAAAe,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAArB;AAAA,KAEJE,MACC;AACK,UAAAoB,IAAUC,EAA6B,IAAI;AACjD,IAAAC,EAAkCF,GAASpB,CAAG,GAE9CuB,EAAkBH,CAAO;AAEnB,UAAAI,IAAYC,EAAQ,MAClB,OAAO3B,KAAa,WAChBgB,MAAkB,eACXD,KAAA,gBAAAA,EAAkB,mBAAkB,WAAWf,CAAQ,iBAE3De,KAAA,gBAAAA,EAAkB,kBAAiB,WAAWf,CAAQ,eAG1DgB,MAAkB,cAAc,oBAAoB,kBAC5D,CAAChB,GAAUgB,GAAeD,CAAgB,CAAC,GAExCa,IAAmB,MAAM;AAC3B,UAAI,CAACP;AACD;AAMJ,MAAAA,EAFIL,MAAkB,UAAaA,MAAkB,eAAe,cAAc,YAEzD;AAAA,IAC7B;AAGI,WAAA,gBAAAZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKkB;AAAA,QACL,OAAO,EAAE,OAAAJ,EAAM;AAAA,QACf,WAAWb,EAAO;AAAA,QAClB,OAAAS;AAAA,QACA,SAAAG;AAAA,QACA,cAAYJ;AAAA,QACZ,iBAAeD;AAAA,QACf,kBAAgBD;AAAA,QAChB,iBAAe,CAAC,CAACU;AAAA,QACjB,aAAWA,IAAeL,KAAiB,SAAS;AAAA,QAEnD,UAAAG,MAAU,YACP,gBAAAU,EAAC,OAAI,EAAA,WAAWxB,EAAO,aAAa,aAAU,UAAS,cAAYe,GAC9D,UAAA;AAAA,UAAO,OAAApB,KAAa,YAAYY,IAC7B,gBAAAR,EAAC,UAAK,WAAWC,EAAO,YAAa,UAAAL,EAAA,CAAS,IAE9CA;AAAA,UAEH,gBAAAI,EAAA0B,GAAA,EAAc,gBAAa,yBAAwB,MAAK,WAAW,CAAA;AAAA,QAAA,EACxE,CAAA,IACAT,IACA,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWxB,EAAO;AAAA,YAClB,cAAYqB;AAAA,YACZ,eAAa,CAAC,CAACV;AAAA,YACf,SAASY;AAAA,YAER,UAAA;AAAA,cAAO,OAAA5B,KAAa,YAAYY,IAC7B,gBAAAR,EAAC,UAAK,WAAWC,EAAO,YAAa,UAAAL,EAAA,CAAS,IAE9CA;AAAA,cAEJ,gBAAAI,EAAC2B,GAAI,EAAA,OAAO,GACP,UAAAf,MAAkB,cACd,gBAAAZ,EAAA4B,GAAA,EAAY,MAAK,KAAA,CAAK,IACvBhB,MAAkB,eACjB,gBAAAZ,EAAA6B,GAAA,EAAc,MAAK,KAAA,CAAK,IAEzB,gBAAA7B,EAAC8B,GAAuB,EAAA,WAAW7B,EAAO,eAAe,MAAK,KAAK,CAAA,EAE3E,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,IAGJL;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGZ;AACAU,EAAgB,cAAc;AAOvB,MAAMyB,IAAYvC;AAAA,EACrB,CAAC,EAAE,UAAAI,GAAU,aAAaS,EAAA,GAAYP,MAE9B,gBAAAE,EAAC,WAAM,KAAAF,GAAU,WAAWG,EAAO,MAAM,aAAWI,GAC/C,UAAAT,GACL;AAGZ;AACAmC,EAAU,cAAc;AAwDjB,MAAMC,IAAWxC;AAAA,EACpB,CACI,EAAE,UAAAyC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,UAAAvC,GAAU,cAAcQ,GAAW,gBAAgBgC,EAAA,GAClGtC,MACC;AACK,UAAAuC,IAAgBF,MAAY,UAAa,CAACF,GAE1CK,IAAc,MAAM;AACtB,MAAIL,KAIAE,KACAA,EAAQD,CAAQ;AAAA,IAExB,GAEMnC,IAAgB,CAACwC,MAA8C;AACjE,MAAKF,MAIDE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAe,GACTD,EAAA;AAAA,IAEpB;AAGI,WAAA,gBAAAtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAF;AAAA,QACA,WAAWG,EAAO;AAAA,QAClB,UAAU;AAAA,QACV,MAAMoC,IAAgB,WAAW;AAAA,QACjC,iBAAeJ;AAAA,QACf,oBAAkBI;AAAA,QAClB,iBAAeH;AAAA,QACf,iBAAeD;AAAA,QACf,cAAY7B;AAAA,QACZ,iBAAe8B;AAAA,QACf,SAASG,IAAgBC,IAAc;AAAA,QACvC,WAAWD,IAAgBtC,IAAgB;AAAA,QAC3C,gBAAcqC;AAAA,QAEb,UAAAxC;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AACAoC,EAAS,cAAc;AAqBhB,MAAMQ,IAAehD;AAAA,EACxB,CAAC,EAAE,SAAAqB,GAAS,UAAAL,GAAU,OAAAC,IAAQ,QAAQ,UAAAb,GAAU,cAAcQ,EAAU,GAAGN,MAAsB;AACvF,UAAAoB,IAAUC,EAA6B,IAAI;AACjD,WAAAC,EAAkCF,GAASpB,CAAG,GAE9CuB,EAAkBH,CAAO,GAGrB,gBAAAlB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKkB;AAAA,QACL,WAAWjB,EAAO;AAAA,QAClB,SAAAY;AAAA,QACA,cAAYJ;AAAA,QACZ,iBAAeD;AAAA,QACf,cAAYJ;AAAA,QAEX,UAAAR;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AACA4C,EAAa,cAAc;AAEpB,MAAMC,IAAQ;AAAA,EACjB,MAAMlD;AAAA,EACN,SAASW;AAAA,EACT,QAAQC;AAAA,EACR,YAAYG;AAAA,EACZ,MAAMyB;AAAA,EACN,KAAKC;AAAA,EACL,SAASQ;AACb;"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Box } from '../Box/Box';\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown, isEventFromInteractiveElement } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * Font size of the table content\n     * @default 'small'\n     */\n    fontSize?: 'small' | 'medium';\n    /**\n     * Whether header should stick to the top when scrolling\n     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table\n                    ref={ref}\n                    className={styles.table}\n                    data-layout={layout}\n                    data-font-size={fontSize}\n                    data-sticky={sticky}\n                    {...props}\n                >\n                    {children}\n                </table>\n            </div>\n        );\n    },\n);\nTableRoot.displayName = 'Table.Root';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <caption ref={ref} className={styles.caption}>\n            {children}\n        </caption>\n    );\n});\nTableCaption.displayName = 'Table.Caption';\n\ntype TableHeaderProps = {\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} aria-label={ariaLabel} aria-busy={ariaBusy}>\n                {children}\n            </thead>\n        );\n    },\n);\nTableHeader.displayName = 'Table.Header';\n\ntype SortDirection = 'ascending' | 'descending' | undefined;\ntype HorizontalAlignment = 'left' | 'center' | 'right';\n\ntype TableHeaderCellProps = {\n    /**\n     * Scope of the column\n     * @default 'col'\n     */\n    scope?: HTMLTableCellElement['scope'];\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Width of the column\n     */\n    width?: CSSProperties['width'];\n    /**\n     * Current sort direction of the column\n     */\n    sortDirection?: SortDirection;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Aria label for asceding/descending sort. Variables: {column} - column name\n     * @default \"Sort by {column} ascending/descending\"\n     */\n    sortTranslations?: {\n        sortAscending?: string;\n        sortDescending?: string;\n    };\n    /**\n     * Whether the column should have a minimum width\n     * @default false\n     */\n    noShrink?: boolean;\n    /**\n     * State of the cell, used for displaying loading state\n     * @default 'idle'\n     */\n    state?: 'idle' | 'loading';\n    /**\n     * The aria-label to be applied when state='loading'\n     */\n    loadingStateAriaLabel?: string;\n    /**\n     * Handler called when the sort direction changes\n     * @param direction - The new sort direction\n     */\n    onSortChange?: (direction: SortDirection) => void;\n    children: ReactNode;\n};\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n    (\n        {\n            noShrink = false,\n            truncate = false,\n            align = 'left',\n            scope = 'col',\n            sortTranslations,\n            sortDirection,\n            colSpan,\n            width,\n            state = 'idle',\n            loadingStateAriaLabel,\n            onSortChange,\n            children,\n        },\n        ref,\n    ) => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        const sortLabel = useMemo(() => {\n            if (typeof children === 'string') {\n                if (sortDirection === 'ascending') {\n                    return sortTranslations?.sortDescending ?? `Sort by ${children} descending`;\n                }\n                return sortTranslations?.sortAscending ?? `Sort by ${children} ascending`;\n            }\n\n            return sortDirection === 'ascending' ? 'Sort descending' : 'Sort ascending';\n        }, [children, sortDirection, sortTranslations]);\n\n        const handleSortChange = () => {\n            if (!onSortChange) {\n                return;\n            }\n\n            const newDirection: SortDirection =\n                sortDirection === undefined || sortDirection === 'descending' ? 'ascending' : 'descending';\n\n            onSortChange(newDirection);\n        };\n\n        return (\n            <th\n                ref={cellRef}\n                style={{ width }}\n                className={styles.headerCell}\n                scope={scope}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                data-no-shrink={noShrink}\n                data-sortable={!!onSortChange}\n                aria-sort={onSortChange ? sortDirection || 'none' : undefined}\n            >\n                {state === 'loading' ? (\n                    <div className={styles.cellContent} aria-live=\"polite\" aria-label={loadingStateAriaLabel}>\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <LoadingCircle data-test-id=\"fondue-loading-circle\" size=\"xx-small\" />\n                    </div>\n                ) : onSortChange ? (\n                    <button\n                        className={styles.cellContent}\n                        aria-label={sortLabel}\n                        data-active={!!sortDirection}\n                        onClick={handleSortChange}\n                    >\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <Box width={3}>\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </Box>\n                    </button>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\ntype ClickableTableRowProps = BaseTableRowProps & {\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick: (selected: boolean) => void;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = (event?: MouseEvent) => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick && !isEventFromInteractiveElement(event)) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","fontSize","sticky","children","props","ref","handleKeyDown","jsx","styles","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","state","loadingStateAriaLabel","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","LoadingCircle","Box","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","isEventFromInteractiveElement","TableRowCell","Table"],"mappings":"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"}

package/dist/fondue-components72.js

@@ -1,18 +1,32 @@
-function l(t, r) {
-  const n = 'tr[tabindex="0"]', e = t.closest("table");
-  if (!e)
+function c(t, e) {
+  const n = 'tr[tabindex="0"]', r = t.closest("table");
+  if (!r)
     return null;
-  const o = Array.from(e.querySelectorAll(n)), c = o.indexOf(t) + (r === "ArrowUp" ? -1 : 1);
-  return c >= 0 && c < o.length ? o[c] : null;
+  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 u(t) {
-  const r = t.target, n = r.closest("tr");
-  if (!n || r !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
+function a(t) {
+  const e = t.target, n = e.closest("tr");
+  if (!n || e !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
     return;
-  const e = l(n, t.key);
-  e && (t.preventDefault(), e.focus());
+  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;
 }
 export {
-  u as handleKeyDown
+  a as handleKeyDown,
+  f as isEventFromInteractiveElement
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components72.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n    const selector = 'tr[tabindex=\"0\"]';\n    const table = currentRow.closest('table');\n    if (!table) {\n        return null;\n    }\n\n    const rows = Array.from(table.querySelectorAll(selector));\n    const currentIndex = rows.indexOf(currentRow);\n    const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n    return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    const target = event.target as HTMLElement;\n    const currentRow = target.closest('tr');\n\n    if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n        return;\n    }\n\n    const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n    if (nextRow) {\n        event.preventDefault();\n        nextRow.focus();\n    }\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAe,GACrBE,EAAQ,MAAM;AAEtB;"}
+{"version":3,"file":"fondue-components72.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;"}

package/dist/index.d.ts

@@ -643,6 +643,12 @@ declare type DividerProps = {
      * @default "div"
      */
     as?: 'div' | 'li';
+    /**
+     * When `true`, signifies that it is purely visual, carries no semantic
+     * meaning, and ensures it is not present in the accessibility tree.
+     * @default false
+     */
+    decorative?: boolean;
     'data-test-id'?: string;
     className?: string;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "19.0.0",
+  "version": "19.1.0",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",
@@ -30,8 +30,8 @@
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "@frontify/fondue-tokens": "^4.2.0",
-    "@frontify/fondue-icons": "^0.17.0"
+    "@frontify/fondue-icons": "^0.17.0",
+    "@frontify/fondue-tokens": "^4.2.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.4",