@frontify/fondue-components 22.0.0 → 22.1.0

package/dist/fondue-components19.js

@@ -1,8 +1,9 @@
-import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-scroll-area";
-import { forwardRef as h } from "react";
+import { forwardRef as p } from "react";
+import { useFondueTheme as u } from "./fondue-components31.js";
 import o from "./fondue-components62.js";
-const p = ({
+const f = ({
   type: t = "hover",
   maxHeight: e = "100%",
   maxWidth: s = "100%",
@@ -11,64 +12,68 @@ const p = ({
   padding: m,
   children: n,
   "data-test-id": r = "fondue-scroll-area"
-}, d) => /* @__PURE__ */ b(
-  a.Root,
-  {
-    type: t,
-    className: o.root,
-    style: { maxWidth: s },
-    "data-test-id": r,
-    ref: d,
-    children: [
-      /* @__PURE__ */ l(
-        a.Viewport,
-        {
-          className: o.viewport,
-          style: { maxHeight: e },
-          "data-scroll-padding": m,
-          "data-show-shadow": c,
-          "data-scrollbar-type": t,
-          "data-scrollbar-gutter": i,
-          "data-test-id": `${r}-viewport`,
-          children: n
-        }
-      ),
-      /* @__PURE__ */ l(
-        a.Scrollbar,
-        {
-          className: o.scrollbar,
-          orientation: "vertical",
-          "data-test-id": `${r}-vertical-scrollbar`,
-          children: /* @__PURE__ */ l(
-            a.Thumb,
-            {
-              className: o.thumb,
-              "data-test-id": `${r}-vertical-scrollbar-thumb`
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(
-        a.Scrollbar,
-        {
-          className: o.scrollbar,
-          orientation: "horizontal",
-          "data-test-id": `${r}-horizontal-scrollbar`,
-          children: /* @__PURE__ */ l(
-            a.Thumb,
-            {
-              className: o.thumb,
-              "data-test-id": `${r}-horizontal-scrollbar-thumb`
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(a.Corner, { className: o.corner, "data-test-id": `${r}-corner` })
-    ]
-  }
-), u = h(p);
-u.displayName = "ScrollArea";
+}, d) => {
+  const { dir: b } = u();
+  return /* @__PURE__ */ h(
+    a.Root,
+    {
+      type: t,
+      dir: b,
+      className: o.root,
+      style: { maxWidth: s },
+      "data-test-id": r,
+      ref: d,
+      children: [
+        /* @__PURE__ */ l(
+          a.Viewport,
+          {
+            className: o.viewport,
+            style: { maxHeight: e },
+            "data-scroll-padding": m,
+            "data-show-shadow": c,
+            "data-scrollbar-type": t,
+            "data-scrollbar-gutter": i,
+            "data-test-id": `${r}-viewport`,
+            children: n
+          }
+        ),
+        /* @__PURE__ */ l(
+          a.Scrollbar,
+          {
+            className: o.scrollbar,
+            orientation: "vertical",
+            "data-test-id": `${r}-vertical-scrollbar`,
+            children: /* @__PURE__ */ l(
+              a.Thumb,
+              {
+                className: o.thumb,
+                "data-test-id": `${r}-vertical-scrollbar-thumb`
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ l(
+          a.Scrollbar,
+          {
+            className: o.scrollbar,
+            orientation: "horizontal",
+            "data-test-id": `${r}-horizontal-scrollbar`,
+            children: /* @__PURE__ */ l(
+              a.Thumb,
+              {
+                className: o.thumb,
+                "data-test-id": `${r}-horizontal-scrollbar-thumb`
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ l(a.Corner, { className: o.corner, "data-test-id": `${r}-corner` })
+      ]
+    }
+  );
+}, N = p(f);
+N.displayName = "ScrollArea";
 export {
-  u as ScrollArea
+  N as ScrollArea
 };
 //# sourceMappingURL=fondue-components19.js.map

package/dist/fondue-components19.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components19.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Determines if the scrollbar should take up space in the content area\n     * @default 'auto'\n     */\n    scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Define the padding of the scroll area\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type = 'hover',\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        scrollbarGutter = 'auto',\n        padding,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-scrollbar-type={type}\n                data-scrollbar-gutter={scrollbarGutter}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA4CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAV;AAAA,IACA,WAAWW,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAT,EAAA;AAAA,IACT,gBAAcK;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAV,EAAA;AAAA,UACT,uBAAqBI;AAAA,UACrB,oBAAkBF;AAAA,UAClB,uBAAqBH;AAAA,UACrB,yBAAuBI;AAAA,UACvB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MAAA;AAAA,MAEJ,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MAAA;AAAA,MAEJ,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAA,CAAW;AAAA,IAAA;AAAA,EAAA;AAAA,GAKvFM,IAAaC,EAA4Cf,CAAmB;AACzFc,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components19.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Determines if the scrollbar should take up space in the content area\n     * @default 'auto'\n     */\n    scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Define the padding of the scroll area\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type = 'hover',\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        scrollbarGutter = 'auto',\n        padding,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    const { dir } = useFondueTheme();\n\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            dir={dir}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-scrollbar-type={type}\n                data-scrollbar-gutter={scrollbarGutter}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","dir","useFondueTheme","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;;AA8CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MACe;AACf,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA;AAEhB,SACI,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACG,MAAAZ;AAAA,MACA,KAAAS;AAAA,MACA,WAAWI,EAAO;AAAA,MAClB,OAAO,EAAE,UAAAX,EAAA;AAAA,MACT,gBAAcK;AAAA,MACd,KAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,OAAO,EAAE,WAAAZ,EAAA;AAAA,YACT,uBAAqBI;AAAA,YACrB,oBAAkBF;AAAA,YAClB,uBAAqBH;AAAA,YACrB,yBAAuBI;AAAA,YACvB,gBAAc,GAAGG,CAAU;AAAA,YAE1B,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,gBAAAQ;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGN,CAAU,UAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpG,GAEaQ,IAAaC,EAA4CjB,CAAmB;AACzFgB,EAAW,cAAc;"}

package/dist/fondue-components25.js

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

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    type AriaAttributes,\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, shouldIgnoreRowClick } 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    Pick<AriaAttributes, 'aria-multiselectable'>;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        return (\n            // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions\n            <table\n                ref={ref}\n                className={styles.table}\n                data-layout={layout}\n                data-font-size={fontSize}\n                data-sticky={sticky}\n                onKeyDown={handleKeyDown}\n                {...props}\n            >\n                {children}\n            </table>\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                        type=\"button\"\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 TableRowProps = {\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     * 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    /**\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\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 (shouldIgnoreRowClick(event)) {\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={!isInteractive ? selected : undefined}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={!isInteractive ? selected : undefined}\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","jsx","styles","handleKeyDown","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","shouldIgnoreRowClick","TableRowCell","Table"],"mappings":"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"}
+{"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    type AriaAttributes,\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, shouldIgnoreRowClick } 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     * @deprecated Use `Table.Header sticky` prop instead. For sticky columns, use `Table.Body firstColumnSticky` or `lastColumnSticky` props\n     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs &\n    Pick<AriaAttributes, 'aria-multiselectable'>;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        // Handle deprecated `sticky` prop for backward compatibility\n        const legacyStickyHeader = sticky === 'head' || sticky === 'both';\n        const legacyStickyLeftColumn = sticky === 'col' || sticky === 'both';\n\n        return (\n            // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions\n            <table\n                ref={ref}\n                className={styles.table}\n                data-layout={layout}\n                data-font-size={fontSize}\n                data-sticky-header={legacyStickyHeader}\n                data-sticky-left-column={legacyStickyLeftColumn}\n                onKeyDown={handleKeyDown}\n                {...props}\n            >\n                {children}\n            </table>\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    /**\n     * Whether the header should stick to the top when scrolling\n     * @default false\n     */\n    sticky?: boolean;\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ sticky = false, children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} data-sticky={sticky} 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                        type=\"button\"\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    /**\n     * Whether the first column should stick to the left when scrolling horizontally\n     * @default false\n     */\n    firstColumnSticky?: boolean;\n    /**\n     * Whether the last column should stick to the right when scrolling horizontally\n     * @default false\n     */\n    lastColumnSticky?: boolean;\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ firstColumnSticky = false, lastColumnSticky = false, children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody\n                ref={ref}\n                className={styles.body}\n                data-first-column-sticky={firstColumnSticky}\n                data-last-column-sticky={lastColumnSticky}\n                aria-busy={ariaBusy}\n            >\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype TableRowProps = {\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     * 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    /**\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\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 (shouldIgnoreRowClick(event)) {\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={!isInteractive ? selected : undefined}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={!isInteractive ? selected : undefined}\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","legacyStickyHeader","legacyStickyLeftColumn","jsx","styles","handleKeyDown","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","firstColumnSticky","lastColumnSticky","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","shouldIgnoreRowClick","TableRowCell","Table"],"mappings":"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"}