@frontify/fondue-components 19.4.0 → 19.6.0

package/dist/fondue-components.js

@@ -2,9 +2,9 @@
 import { Accordion as t } from "./fondue-components3.js";
 import { Badge as m } from "./fondue-components4.js";
 import { Box as f } from "./fondue-components5.js";
-import { Button as l } from "./fondue-components6.js";
+import { Button as a } from "./fondue-components6.js";
 import { Checkbox as d } from "./fondue-components7.js";
-import { ColorPicker as c } from "./fondue-components8.js";
+import { ColorPicker as T } from "./fondue-components8.js";
 import { Dialog as g } from "./fondue-components9.js";
 import { Divider as h } from "./fondue-components10.js";
 import { Dropdown as C } from "./fondue-components11.js";
@@ -22,19 +22,20 @@ import { Select as M } from "./fondue-components22.js";
 import { Slider as O } from "./fondue-components23.js";
 import { Switch as R } from "./fondue-components24.js";
 import { Table as V } from "./fondue-components25.js";
-import { Tabs as X } from "./fondue-components26.js";
-import { Text as Z } from "./fondue-components27.js";
-import { TextInput as $ } from "./fondue-components28.js";
-import { Textarea as ro } from "./fondue-components29.js";
-import { ThemeContext as to, ThemeProvider as xo, useFondueTheme as mo } from "./fondue-components30.js";
-import { Tooltip as fo } from "./fondue-components31.js";
+import { Tag as X } from "./fondue-components26.js";
+import { Tabs as Z } from "./fondue-components27.js";
+import { Text as $ } from "./fondue-components28.js";
+import { TextInput as ro } from "./fondue-components29.js";
+import { Textarea as to } from "./fondue-components30.js";
+import { ThemeContext as mo, ThemeProvider as po, useFondueTheme as fo } from "./fondue-components31.js";
+import { Tooltip as ao } from "./fondue-components32.js";
 export {
   t as Accordion,
   m as Badge,
   f as Box,
-  l as Button,
+  a as Button,
   d as Checkbox,
-  c as ColorPicker,
+  T as ColorPicker,
   g as Dialog,
   h as Divider,
   C as Dropdown,
@@ -52,13 +53,14 @@ export {
   O as Slider,
   R as Switch,
   V as Table,
-  X as Tabs,
-  Z as Text,
-  $ as TextInput,
-  ro as Textarea,
-  to as ThemeContext,
-  xo as ThemeProvider,
-  fo as Tooltip,
-  mo as useFondueTheme
+  Z as Tabs,
+  X as Tag,
+  $ as Text,
+  ro as TextInput,
+  to as Textarea,
+  mo as ThemeContext,
+  po as ThemeProvider,
+  ao as Tooltip,
+  fo as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

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

package/dist/fondue-components10.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as p from "@radix-ui/react-separator";
 import { forwardRef as f } from "react";
-import { cn as l } from "./fondue-components37.js";
-import v from "./fondue-components50.js";
-import { dividerStyles as c } from "./fondue-components51.js";
+import { cn as l } from "./fondue-components38.js";
+import v from "./fondue-components51.js";
+import { dividerStyles as c } from "./fondue-components52.js";
 const h = f(
   ({
     "data-test-id": i = "fondue-divider",

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as n, jsxs as g } from "react/jsx-runtime";
 import { IconCaretRight as M } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dropdown-menu";
 import { forwardRef as i, useMemo as G, Children as A, useRef as v } from "react";
-import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components30.js";
-import { useProcessedChildren as h } from "./fondue-components52.js";
-import s from "./fondue-components53.js";
+import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components31.js";
+import { useProcessedChildren as h } from "./fondue-components53.js";
+import s from "./fondue-components54.js";
 const N = ({
   children: o,
   open: t,

package/dist/fondue-components12.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as y } from "./fondue-components35.js";
-import x from "./fondue-components54.js";
+import { propsToCssVariables as y } from "./fondue-components36.js";
+import x from "./fondue-components55.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components13.js

@@ -2,9 +2,9 @@ import { jsx as a, jsxs as u } from "react/jsx-runtime";
 import { IconCross as R } from "@frontify/fondue-icons";
 import * as l from "@radix-ui/react-popover";
 import { forwardRef as i } from "react";
-import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components48.js";
-import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components30.js";
-import s from "./fondue-components55.js";
+import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components49.js";
+import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components31.js";
+import s from "./fondue-components56.js";
 const n = ({ children: t, ...o }) => /* @__PURE__ */ a(l.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
 const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, r) => /* @__PURE__ */ a(

package/dist/fondue-components14.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { propsToCssVariables as n } from "./fondue-components35.js";
-import u from "./fondue-components56.js";
+import { propsToCssVariables as n } from "./fondue-components36.js";
+import u from "./fondue-components57.js";
 const c = y(
   ({
     as: a = "div",

package/dist/fondue-components15.js

@@ -1,7 +1,7 @@
 import { jsx as y } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { cn as x } from "./fondue-components37.js";
-import a from "./fondue-components57.js";
+import { cn as x } from "./fondue-components38.js";
+import a from "./fondue-components58.js";
 const $ = g(
   ({
     as: e = "span",

package/dist/fondue-components16.js

@@ -1,31 +1,29 @@
-import { jsx as l } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-label";
-import { forwardRef as s } from "react";
-import { cn as w } from "./fondue-components37.js";
-const m = ({ className: r, "data-test-id": d = "fondue-label", ...a }, i) => /* @__PURE__ */ l(
-  n.Root,
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-label";
+import { forwardRef as f } from "react";
+import { cn as p } from "./fondue-components38.js";
+import o from "./fondue-components59.js";
+const b = ({ className: l, "data-test-id": m = "fondue-label", children: a, ...r }, d) => /* @__PURE__ */ n(
+  c.Root,
   {
-    ref: i,
-    "data-required": a.required,
-    className: w(
-      'tw-group tw-flex tw-gap-1 tw-font-body--stack tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',
-      // Disabled state if siblings has disabled state
-      "has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed",
-      // Required asterisk
-      'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-body--stack after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
-      r
-    ),
-    "data-test-id": d,
+    ref: d,
+    "data-required": r.required,
+    className: p(o.root, l),
+    "data-test-id": m,
     onClick: (t) => {
-      const o = t.target.getAttribute("for"), e = o ? document.getElementById(o) : null;
+      const i = t.target.getAttribute("for"), e = i ? document.getElementById(i) : null;
       e && e.getAttribute("role") === "combobox" && (t.preventDefault(), t.stopPropagation(), e.click());
     },
-    ...a
+    ...r,
+    children: [
+      /* @__PURE__ */ s("span", { className: o.hiddenText, "aria-hidden": "true", children: a }),
+      /* @__PURE__ */ s("span", { className: o.visibleText, children: a })
+    ]
   }
-), f = s(m);
-f.displayName = "Label";
+), u = f(b);
+u.displayName = "Label";
 export {
-  f as Label,
-  m as LabelComponent
+  u as Label,
+  b as LabelComponent
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-body--stack tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-body--stack after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","event","targetId","target","Label","forwardRef"],"mappings":";;;;AAwBO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAA,GAC7DC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IAAA;AAAA,IAEJ,gBAAcC;AAAA,IACd,SAAS,CAACM,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,IAEf;AAAA,IACC,GAAGP;AAAA,EAAA;AAAA,GAKHQ,IAAQC,EAAyCZ,CAAc;AAC5EW,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/label.module.scss';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', children, ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(styles.root, className)}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        >\n            {/* Hidden version with medium font weight to reserve space */}\n            <span className={styles.hiddenText} aria-hidden=\"true\">\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={styles.visibleText}>{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","props","ref","jsxs","LabelPrimitive","cn","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,GAAGC,EAAA,GACvEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI,EAAGC,EAAO,MAAMR,CAAS;AAAA,IACpC,gBAAcC;AAAA,IACd,SAAS,CAACQ,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,IAEf;AAAA,IACC,GAAGR;AAAA,IAGJ,UAAA;AAAA,MAAA,gBAAAS,EAAC,UAAK,WAAWJ,EAAO,YAAY,eAAY,QAC3C,UAAAN,GACL;AAAA,MAEA,gBAAAU,EAAC,QAAA,EAAK,WAAWJ,EAAO,aAAc,UAAAN,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAAA,GAK9CW,IAAQC,EAAyCf,CAAc;AAC5Ec,EAAM,cAAc;"}

package/dist/fondue-components17.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-progress";
 import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components58.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components60.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components18.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import d from "./fondue-components59.js";
+import d from "./fondue-components61.js";
 const s = i(
   ({
     variant: t = "progress",

package/dist/fondue-components19.js

@@ -1,7 +1,7 @@
 import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-scroll-area";
 import { forwardRef as h } from "react";
-import o from "./fondue-components60.js";
+import o from "./fondue-components62.js";
 const p = ({
   type: t = "hover",
   maxHeight: e = "100%",

package/dist/fondue-components20.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { propsToCssVariables as c } from "./fondue-components35.js";
-import f from "./fondue-components61.js";
+import { propsToCssVariables as c } from "./fondue-components36.js";
+import f from "./fondue-components63.js";
 const y = m(
   ({
     "data-test-id": a = "fondue-section",

package/dist/fondue-components21.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-toggle-group";
 import { forwardRef as i } from "react";
-import { useControllableState as N } from "./fondue-components62.js";
-import e from "./fondue-components63.js";
+import { useControllableState as N } from "./fondue-components64.js";
+import e from "./fondue-components65.js";
 const d = ({
   children: a,
   value: o,

package/dist/fondue-components22.js

@@ -4,12 +4,12 @@ import * as g from "@radix-ui/react-popover";
 import { Slot as q } from "@radix-ui/react-slot";
 import { useSelect as J } from "downshift";
 import { forwardRef as K, useRef as L, useState as Q } from "react";
-import { ForwardedRefCombobox as U } from "./fondue-components64.js";
-import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components65.js";
-import { SelectMenu as Y } from "./fondue-components66.js";
-import { ForwardedRefSelectSlot as Z } from "./fondue-components67.js";
-import o from "./fondue-components68.js";
-import { useSelectData as _ } from "./fondue-components69.js";
+import { ForwardedRefCombobox as U } from "./fondue-components66.js";
+import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components67.js";
+import { SelectMenu as Y } from "./fondue-components68.js";
+import { ForwardedRefSelectSlot as Z } from "./fondue-components69.js";
+import o from "./fondue-components70.js";
+import { useSelectData as _ } from "./fondue-components71.js";
 const S = ({
   children: h,
   onSelect: s,

package/dist/fondue-components23.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components70.js";
+import r from "./fondue-components72.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components24.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
-import { cn as f } from "./fondue-components37.js";
-import t from "./fondue-components71.js";
+import { cn as f } from "./fondue-components38.js";
+import t from "./fondue-components73.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components25.js

@@ -1,34 +1,38 @@
 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 m, useRef as w, useMemo as j } from "react";
-import { useSyncRefs as g } from "./fondue-components47.js";
-import { useTextTruncation as N } from "./fondue-components72.js";
+import { forwardRef as b, useRef as w, useMemo as j } 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 n from "./fondue-components73.js";
-import { handleKeyDown as $, shouldIgnoreRowClick as D } from "./fondue-components74.js";
-const R = m(
-  ({ layout: a = "auto", fontSize: e = "medium", sticky: o, children: s, ...d }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
-    "table",
-    {
-      ref: l,
-      className: n.table,
-      "data-layout": a,
-      "data-font-size": e,
-      "data-sticky": o,
-      ...d,
-      children: s
-    }
-  ) })
+import i 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
+      }
+    )
+  )
 );
 R.displayName = "Table.Root";
-const C = m(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: n.caption, children: a }));
+const C = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: i.caption, children: a }));
 C.displayName = "Table.Caption";
-const x = m(
-  ({ children: a, "aria-label": e, "aria-busy": o }, s) => /* @__PURE__ */ t("thead", { ref: s, className: n.header, "aria-label": e, "aria-busy": o, children: a })
+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 })
 );
-x.displayName = "Table.Header";
-const v = m(
+v.displayName = "Table.Header";
+const x = b(
   ({
     noShrink: a = !1,
     truncate: e = !1,
@@ -36,47 +40,47 @@ const v = m(
     scope: s = "col",
     sortTranslations: d,
     sortDirection: l,
-    colSpan: c,
-    width: b,
+    colSpan: m,
+    width: c,
     state: f = "idle",
     loadingStateAriaLabel: u,
-    onSortChange: i,
+    onSortChange: n,
     children: r
   }, H) => {
     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 (!i)
+      if (!n)
         return;
-      i(l === void 0 || l === "descending" ? "ascending" : "descending");
+      n(l === void 0 || l === "descending" ? "ascending" : "descending");
     };
     return /* @__PURE__ */ t(
       "th",
       {
         ref: y,
-        style: { width: b },
-        className: n.headerCell,
+        style: { width: c },
+        className: i.headerCell,
         scope: s,
-        colSpan: c,
+        colSpan: m,
         "data-align": o,
         "data-truncate": e,
         "data-no-shrink": a,
-        "data-sortable": !!i,
-        "aria-sort": i ? l || "none" : void 0,
-        children: f === "loading" ? /* @__PURE__ */ p("div", { className: n.cellContent, "aria-live": "polite", "aria-label": u, children: [
-          typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: n.buttonText, children: r }) : r,
+        "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" })
-        ] }) : i ? /* @__PURE__ */ p(
+        ] }) : n ? /* @__PURE__ */ p(
           "button",
           {
-            className: n.cellContent,
+            className: i.cellContent,
             "aria-label": z,
             "data-active": !!l,
             onClick: B,
             type: "button",
             children: [
-              typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: n.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: n.sortIndicator, size: "12" }) })
+              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" }) })
             ]
           }
         ) : r
@@ -84,33 +88,33 @@ const v = m(
     );
   }
 );
-v.displayName = "Table.HeaderCell";
-const T = m(
-  ({ children: a, "aria-busy": e }, o) => /* @__PURE__ */ t("tbody", { ref: o, className: n.body, "aria-busy": e, children: a })
+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 })
 );
 T.displayName = "Table.Body";
-const I = m(
-  ({ disabled: a = !1, selected: e = !1, onClick: o, children: s, "aria-label": d, "data-test-id": l }, c) => {
-    const b = o !== void 0 && !a, f = (i) => {
-      a || D(i) || o && o(e);
-    }, u = (i) => {
-      b && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), f());
+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());
     };
     return /* @__PURE__ */ t(
       "tr",
       {
-        ref: c,
-        className: n.row,
+        ref: m,
+        className: i.row,
         tabIndex: 0,
-        role: b ? "button" : "row",
+        role: c ? "button" : "row",
         "data-disabled": a,
-        "data-interactive": b,
-        "data-selected": e,
+        "data-interactive": c,
+        "data-selected": c ? void 0 : e,
         "aria-disabled": a,
         "aria-label": d,
-        "aria-selected": e,
-        onClick: b ? f : void 0,
-        onKeyDown: b ? u : void 0,
+        "aria-selected": c ? void 0 : e,
+        onClick: c ? f : void 0,
+        onKeyDown: c ? u : void 0,
         "data-test-id": l,
         children: s
       }
@@ -118,14 +122,14 @@ const I = m(
   }
 );
 I.displayName = "Table.Row";
-const k = m(
+const k = b(
   ({ colSpan: a, truncate: e, align: o = "left", children: s, "aria-label": d }, l) => {
-    const c = w(null);
-    return g(c, l), N(c), /* @__PURE__ */ t(
+    const m = w(null);
+    return g(m, l), N(m), /* @__PURE__ */ t(
       "td",
       {
-        ref: c,
-        className: n.rowCell,
+        ref: m,
+        className: i.rowCell,
         colSpan: a,
         "data-align": o,
         "data-truncate": e,
@@ -139,8 +143,8 @@ k.displayName = "Table.RowCell";
 const V = {
   Root: R,
   Caption: C,
-  Header: x,
-  HeaderCell: v,
+  Header: v,
+  HeaderCell: x,
   Body: T,
   Row: I,
   RowCell: k
@@ -149,8 +153,8 @@ export {
   V as Table,
   T as TableBody,
   C as TableCaption,
-  x as TableHeader,
-  v as TableHeaderCell,
+  v as TableHeader,
+  x as TableHeaderCell,
   R as TableRoot,
   I as TableRow,
   k 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 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\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                        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 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 TableRowProps = 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};\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={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","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     */\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":";;;;;;;;;AA4CO,MAAMA,IAAYC;AAAA,EACrB,CAAC,EAAE,QAAAC,IAAS,QAAQ,UAAAC,IAAW,UAAU,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC;AAAA;AAAA,IAG/D,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAD;AAAA,QACA,WAAWE,EAAO;AAAA,QAClB,eAAaP;AAAA,QACb,kBAAgBC;AAAA,QAChB,eAAaC;AAAA,QACb,WAAWM;AAAA,QACV,GAAGJ;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA;AAIjB;AACAL,EAAU,cAAc;AAEjB,MAAMW,IAAeV,EAA6D,CAAC,EAAE,UAAAI,EAAA,GAAYE,wBAE/F,WAAA,EAAQ,KAAAA,GAAU,WAAWE,EAAO,SAChC,UAAAJ,GACL,CAEP;AACDM,EAAa,cAAc;AAQpB,MAAMC,IAAcX;AAAA,EACvB,CAAC,EAAE,UAAAI,GAAU,cAAcQ,GAAW,aAAaC,EAAA,GAAYP,MAEvD,gBAAAC,EAAC,SAAA,EAAM,KAAAD,GAAU,WAAWE,EAAO,QAAQ,cAAYI,GAAW,aAAWC,GACxE,UAAAT,EAAA,CACL;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,EAAA,GAEJE,MACC;AACD,UAAMoB,IAAUC,EAA6B,IAAI;AACjD,IAAAC,EAAkCF,GAASpB,CAAG,GAE9CuB,EAAkBH,CAAO;AAEzB,UAAMI,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;AAEA,WACI,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKmB;AAAA,QACL,OAAO,EAAE,OAAAJ,EAAA;AAAA,QACT,WAAWd,EAAO;AAAA,QAClB,OAAAU;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,OAAA,EAAI,WAAWzB,EAAO,aAAa,aAAU,UAAS,cAAYgB,GAC9D,UAAA;AAAA,UAAA,OAAOpB,KAAa,YAAYY,IAC7B,gBAAAT,EAAC,UAAK,WAAWC,EAAO,YAAa,UAAAJ,EAAA,CAAS,IAE9CA;AAAA,UAEJ,gBAAAG,EAAC2B,GAAA,EAAc,gBAAa,yBAAwB,MAAK,WAAA,CAAW;AAAA,QAAA,EAAA,CACxE,IACAT,IACA,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWzB,EAAO;AAAA,YAClB,cAAYsB;AAAA,YACZ,eAAa,CAAC,CAACV;AAAA,YACf,SAASY;AAAA,YACT,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAA,OAAO5B,KAAa,YAAYY,IAC7B,gBAAAT,EAAC,UAAK,WAAWC,EAAO,YAAa,UAAAJ,EAAA,CAAS,IAE9CA;AAAA,cAEJ,gBAAAG,EAAC4B,GAAA,EAAI,OAAO,GACP,UAAAf,MAAkB,cACf,gBAAAb,EAAC6B,GAAA,EAAY,MAAK,KAAA,CAAK,IACvBhB,MAAkB,eAClB,gBAAAb,EAAC8B,GAAA,EAAc,MAAK,KAAA,CAAK,IAEzB,gBAAA9B,EAAC+B,GAAA,EAAuB,WAAW9B,EAAO,eAAe,MAAK,KAAA,CAAK,EAAA,CAE3E;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,IAGJJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIhB;AACJ;AACAU,EAAgB,cAAc;AAOvB,MAAMyB,IAAYvC;AAAA,EACrB,CAAC,EAAE,UAAAI,GAAU,aAAaS,EAAA,GAAYP,MAE9B,gBAAAC,EAAC,WAAM,KAAAD,GAAU,WAAWE,EAAO,MAAM,aAAWK,GAC/C,UAAAT,GACL;AAGZ;AACAmC,EAAU,cAAc;AA6BjB,MAAMC,IAAWxC;AAAA,EACpB,CACI,EAAE,UAAAyC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,UAAAvC,GAAU,cAAcQ,GAAW,gBAAgBgC,EAAA,GAClGtC,MACC;AACD,UAAMuC,IAAgBF,MAAY,UAAa,CAACF,GAE1CK,IAAc,CAACC,MAAuB;AACxC,MAAIN,KAIAO,EAAqBD,CAAK,KAI1BJ,KACAA,EAAQD,CAAQ;AAAA,IAExB,GAEMjC,IAAgB,CAACsC,MAA8C;AACjE,MAAKF,MAIDE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACND,EAAA;AAAA,IAER;AAEA,WACI,gBAAAvC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAD;AAAA,QACA,WAAWE,EAAO;AAAA,QAClB,UAAU;AAAA,QACV,MAAMqC,IAAgB,WAAW;AAAA,QACjC,iBAAeJ;AAAA,QACf,oBAAkBI;AAAA,QAClB,iBAAgBA,IAA2B,SAAXH;AAAA,QAChC,iBAAeD;AAAA,QACf,cAAY7B;AAAA,QACZ,iBAAgBiC,IAA2B,SAAXH;AAAA,QAChC,SAASG,IAAgBC,IAAc;AAAA,QACvC,WAAWD,IAAgBpC,IAAgB;AAAA,QAC3C,gBAAcmC;AAAA,QAEb,UAAAxC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAoC,EAAS,cAAc;AAqBhB,MAAMS,IAAejD;AAAA,EACxB,CAAC,EAAE,SAAAqB,GAAS,UAAAL,GAAU,OAAAC,IAAQ,QAAQ,UAAAb,GAAU,cAAcQ,EAAA,GAAaN,MAAsB;AAC7F,UAAMoB,IAAUC,EAA6B,IAAI;AACjD,WAAAC,EAAkCF,GAASpB,CAAG,GAE9CuB,EAAkBH,CAAO,GAGrB,gBAAAnB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKmB;AAAA,QACL,WAAWlB,EAAO;AAAA,QAClB,SAAAa;AAAA,QACA,cAAYJ;AAAA,QACZ,iBAAeD;AAAA,QACf,cAAYJ;AAAA,QAEX,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACA6C,EAAa,cAAc;AAEpB,MAAMC,IAAQ;AAAA,EACjB,MAAMnD;AAAA,EACN,SAASW;AAAA,EACT,QAAQC;AAAA,EACR,YAAYG;AAAA,EACZ,MAAMyB;AAAA,EACN,KAAKC;AAAA,EACL,SAASS;AACb;"}