@frontify/fondue-components 7.0.1 → 8.0.1

package/dist/fondue-components10.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-components25.js";
-import x from "./fondue-components43.js";
+import x from "./fondue-components42.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components11.js

@@ -1,94 +1,84 @@
-import { jsx as a, jsxs as y, Fragment as C } from "react/jsx-runtime";
-import { IconCross as b } from "@frontify/fondue-icons";
+import { jsx as a, jsxs as l, Fragment as R } from "react/jsx-runtime";
+import { IconCross as w } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-popover";
-import { forwardRef as r, useRef as A } from "react";
-import { usePreventDropdownOverflow as H } from "./fondue-components40.js";
-import { addAutoFocusAttribute as P, syncRefs as c, addShowFocusRing as B } from "./fondue-components37.js";
-import d from "./fondue-components44.js";
-const f = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
-f.displayName = "Flyout.Root";
-const m = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...s }, l) => /* @__PURE__ */ a(
+import { forwardRef as s } from "react";
+import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components37.js";
+import d from "./fondue-components43.js";
+const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+n.displayName = "Flyout.Root";
+const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(
   i.Trigger,
   {
-    onMouseDown: P,
+    onMouseDown: x,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: l,
-    ...s,
+    ref: u,
+    ...r,
     children: o
   }
 );
-m.displayName = "Flyout.Trigger";
-const p = ({
+y.displayName = "Flyout.Trigger";
+const c = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
-  rounded: s = "medium",
-  width: l = "fit-content",
-  shadow: h = "medium",
-  "data-test-id": v = "fondue-flyout-content",
-  children: R,
-  ...w
-}, n) => {
-  const u = A(null), { setMaxHeight: x } = H(u);
-  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ y(C, { children: [
-    /* @__PURE__ */ a("div", { className: d.overlay }),
-    /* @__PURE__ */ a(
-      i.Content,
-      {
-        style: {
-          "--flyout-max-width": o,
-          "--flyout-width": l
-        },
-        ref: u,
-        align: t,
-        collisionPadding: 8,
-        sideOffset: 8,
-        onOpenAutoFocus: () => {
-          x(), c(u, n);
-        },
-        onCloseAutoFocus: () => {
-          c(u, n);
-        },
-        className: d.root,
-        "data-flyout-spacing": e,
-        "data-rounded": s,
-        "data-shadow": h,
-        "data-test-id": v,
-        onFocus: B,
-        ...w,
-        children: R
-      }
-    )
-  ] }) });
-};
-p.displayName = "Flyout.Content";
-const F = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ y("div", { "data-test-id": e, ref: s, className: d.header, children: [
+  rounded: r = "medium",
+  width: u = "fit-content",
+  shadow: p = "medium",
+  "data-test-id": g = "fondue-flyout-content",
+  children: N,
+  ...h
+}, v) => /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ l(R, { children: [
+  /* @__PURE__ */ a("div", { className: d.overlay }),
+  /* @__PURE__ */ a(
+    i.Content,
+    {
+      style: {
+        "--flyout-max-width": o,
+        "--flyout-width": u
+      },
+      ref: v,
+      align: t,
+      collisionPadding: 8,
+      sideOffset: 8,
+      className: d.root,
+      "data-flyout-spacing": e,
+      "data-rounded": r,
+      "data-shadow": p,
+      "data-test-id": g,
+      onFocus: C,
+      ...h,
+      children: N
+    }
+  )
+] }) });
+c.displayName = "Flyout.Content";
+const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, r) => /* @__PURE__ */ l("div", { "data-test-id": e, ref: r, className: d.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(b, { size: 20 }) })
+  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(w, { size: 20 }) })
 ] });
-F.displayName = "Flyout.Header";
-const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
-g.displayName = "Flyout.Footer";
-const N = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
-N.displayName = "Flyout.Body";
-const S = {
-  Root: f,
-  Trigger: r(m),
-  Content: r(p),
-  Header: r(F),
-  Footer: r(g),
-  Body: r(N)
+m.displayName = "Flyout.Header";
+const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+f.displayName = "Flyout.Footer";
+const F = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
+F.displayName = "Flyout.Body";
+const j = {
+  Root: n,
+  Trigger: s(y),
+  Content: s(c),
+  Header: s(m),
+  Footer: s(f),
+  Body: s(F)
 };
 export {
-  S as Flyout,
-  N as FlyoutBody,
-  p as FlyoutContent,
-  g as FlyoutFooter,
-  F as FlyoutHeader,
-  f as FlyoutRoot,
-  m as FlyoutTrigger
+  j as Flyout,
+  F as FlyoutBody,
+  c as FlyoutContent,
+  f as FlyoutFooter,
+  m as FlyoutHeader,
+  n as FlyoutRoot,
+  y as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef<HTMLDivElement>(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <>\n                <div className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={localRef}\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\n                    onOpenAutoFocus={() => {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                    }}\n                    onCloseAutoFocus={() => {\n                        syncRefs(localRef, ref);\n                    }}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","jsxs","Fragment","styles","syncRefs","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixPopover.Portal>\n            <>\n                <div className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","jsxs","Fragment","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;AA4BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MAGK,gBAAAC,EAAAL,EAAa,QAAb,EACG,UACI,gBAAAc,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAV,EAAA,OAAA,EAAI,WAAWW,EAAO,QAAS,CAAA;AAAA,EAChC,gBAAAX;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,QACtB,kBAAkBG;AAAA,MACtB;AAAA,MAEJ,KAAAR;AAAA,MACA,OAAAI;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,WAAWQ,EAAO;AAAA,MAClB,uBAAqBN;AAAA,MACrB,gBAAcC;AAAA,MACd,eAAaE;AAAA,MACb,gBAAcV;AAAA,MACd,SAASc;AAAA,MACR,GAAGlB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AACL,EAAA,CACJ,EACJ,CAAA;AAGRS,EAAc,cAAc;AAYf,MAAAW,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAArB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAX,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdqB,KACI,gBAAAd,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWa,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAAvB,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWY,EAAO,QACtD,UAAAlB,GACL;AAGRuB,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAAxB,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWY,EAAO,MACpF,UAAAlB,EACL,CAAA;AAGRwB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM1B;AAAA,EACN,SAAS2B,EAAkDvB,CAAa;AAAA,EACxE,SAASuB,EAA+CjB,CAAa;AAAA,EACrE,QAAQiB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}

package/dist/fondue-components12.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import { propsToCssVariables as y } from "./fondue-components25.js";
-import n from "./fondue-components45.js";
+import n from "./fondue-components44.js";
 const u = f(
   ({
     as: a = "div",

package/dist/fondue-components14.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-components46.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components45.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components15.js

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

package/dist/fondue-components16.js

@@ -1,7 +1,7 @@
 import { jsx as b } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import { propsToCssVariables as m } from "./fondue-components25.js";
-import c from "./fondue-components48.js";
+import c from "./fondue-components47.js";
 const f = n(
   ({
     "data-test-id": a = "fondue-section",

package/dist/fondue-components17.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-toggle-group";
 import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components49.js";
-import e from "./fondue-components50.js";
+import { useControllableState as N } from "./fondue-components48.js";
+import e from "./fondue-components49.js";
 const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
   const [g, C] = N({
     prop: o,

package/dist/fondue-components18.js

@@ -4,12 +4,12 @@ import * as S from "@radix-ui/react-popover";
 import { Slot as H } from "@radix-ui/react-slot";
 import { useSelect as T } from "downshift";
 import { forwardRef as V, useRef as $, useState as A } from "react";
-import { ForwardedRefCombobox as q } from "./fondue-components51.js";
-import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components52.js";
-import { SelectMenu as L } from "./fondue-components53.js";
-import { ForwardedRefSelectSlot as Q } from "./fondue-components54.js";
-import a from "./fondue-components55.js";
-import { useSelectData as U } from "./fondue-components56.js";
+import { ForwardedRefCombobox as q } from "./fondue-components50.js";
+import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components51.js";
+import { SelectMenu as L } from "./fondue-components52.js";
+import { ForwardedRefSelectSlot as Q } from "./fondue-components53.js";
+import a from "./fondue-components54.js";
+import { useSelectData as U } from "./fondue-components55.js";
 const g = ({
   children: h,
   onSelect: i,

package/dist/fondue-components19.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-components57.js";
+import r from "./fondue-components56.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components20.js

@@ -2,7 +2,7 @@ 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-components27.js";
-import t from "./fondue-components58.js";
+import t from "./fondue-components57.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components21.js

@@ -1,39 +1,39 @@
 import { jsx as n, jsxs as k } from "react/jsx-runtime";
-import { IconArrowUp as B, IconArrowDown as h, IconArrowBidirectional as A } from "@frontify/fondue-icons";
-import { forwardRef as u, useRef as y, useMemo as K } from "react";
-import { useSyncRefs as p } from "./fondue-components59.js";
-import { useTextTruncation as w } from "./fondue-components60.js";
-import o from "./fondue-components61.js";
-import { handleKeyDown as z } from "./fondue-components62.js";
-const N = u(
-  ({ layout: e = "auto", sticky: a, children: l, ...r }, t) => /* @__PURE__ */ n("div", { onKeyDown: z, role: "grid", tabIndex: -1, children: /* @__PURE__ */ n("table", { ref: t, className: o.table, "data-layout": e, "data-sticky": a, ...r, children: l }) })
+import { IconArrowUp as B, IconArrowDown as A, IconArrowBidirectional as K } from "@frontify/fondue-icons";
+import { forwardRef as m, useRef as y, useMemo as h } from "react";
+import { useSyncRefs as p } from "./fondue-components58.js";
+import { useTextTruncation as w } from "./fondue-components59.js";
+import o from "./fondue-components60.js";
+import { handleKeyDown as z } from "./fondue-components61.js";
+const N = m(
+  ({ layout: e = "auto", sticky: a, children: l, ...i }, t) => /* @__PURE__ */ n("div", { onKeyDown: z, role: "grid", tabIndex: -1, children: /* @__PURE__ */ n("table", { ref: t, className: o.table, "data-layout": e, "data-sticky": a, ...i, children: l }) })
 );
 N.displayName = "Table.Root";
-const g = u(({ children: e }, a) => /* @__PURE__ */ n("caption", { ref: a, className: o.caption, children: e }));
+const g = m(({ children: e }, a) => /* @__PURE__ */ n("caption", { ref: a, className: o.caption, children: e }));
 g.displayName = "Table.Caption";
-const R = u(
-  ({ children: e, "aria-label": a, "aria-busy": l }, r) => /* @__PURE__ */ n("thead", { ref: r, className: o.header, "aria-label": a, "aria-busy": l, children: e })
+const R = m(
+  ({ children: e, "aria-label": a, "aria-busy": l }, i) => /* @__PURE__ */ n("thead", { ref: i, className: o.header, "aria-label": a, "aria-busy": l, children: e })
 );
 R.displayName = "Table.Header";
-const C = u(
+const C = m(
   ({
     noShrink: e = !1,
     truncate: a = !1,
     align: l = "left",
-    scope: r = "col",
+    scope: i = "col",
     sortTranslations: t,
     sortDirection: d,
     colSpan: c,
     width: b,
-    onSortChange: i,
-    children: s
-  }, m) => {
+    onSortChange: s,
+    children: r
+  }, u) => {
     const f = y(null);
-    p(f, m), w(f);
-    const x = K(() => typeof s == "string" ? d === "ascending" ? (t == null ? void 0 : t.sortDescending) ?? `Sort by ${s} descending` : (t == null ? void 0 : t.sortAscending) ?? `Sort by ${s} ascending` : d === "ascending" ? "Sort descending" : "Sort ascending", [s, d, t]), H = () => {
-      if (!i)
+    p(f, u), w(f);
+    const I = h(() => typeof r == "string" ? d === "ascending" ? (t == null ? void 0 : t.sortDescending) ?? `Sort by ${r} descending` : (t == null ? void 0 : t.sortAscending) ?? `Sort by ${r} ascending` : d === "ascending" ? "Sort descending" : "Sort ascending", [r, d, t]), H = () => {
+      if (!s)
         return;
-      i(d === void 0 || d === "descending" ? "ascending" : "descending");
+      s(d === void 0 || d === "descending" ? "ascending" : "descending");
     };
     return /* @__PURE__ */ n(
       "th",
@@ -41,41 +41,41 @@ const C = u(
         ref: f,
         style: { width: b },
         className: o.headerCell,
-        scope: r,
+        scope: i,
         colSpan: c,
         "data-align": l,
         "data-truncate": a,
         "data-no-shrink": e,
-        "data-sortable": !!i,
-        "aria-sort": i ? d || "none" : void 0,
-        children: i ? /* @__PURE__ */ k(
+        "data-sortable": !!s,
+        "aria-sort": s ? d || "none" : void 0,
+        children: s ? /* @__PURE__ */ n("div", { className: o.cellContent, children: /* @__PURE__ */ k(
           "button",
           {
             className: o.sortButton,
-            "aria-label": x,
+            "aria-label": I,
             "data-active": !!d,
             onClick: H,
             children: [
-              s,
-              d === "ascending" ? /* @__PURE__ */ n(B, { size: "12" }) : d === "descending" ? /* @__PURE__ */ n(h, { size: "12" }) : /* @__PURE__ */ n(A, { className: o.sortIndicator, size: "12" })
+              typeof r == "string" && a ? /* @__PURE__ */ n("span", { className: o.buttonText, children: r }) : r,
+              d === "ascending" ? /* @__PURE__ */ n(B, { size: "12" }) : d === "descending" ? /* @__PURE__ */ n(A, { size: "12" }) : /* @__PURE__ */ n(K, { className: o.sortIndicator, size: "12" })
             ]
           }
-        ) : s
+        ) }) : r
       }
     );
   }
 );
 C.displayName = "Table.HeaderCell";
-const v = u(
+const v = m(
   ({ children: e, "aria-busy": a }, l) => /* @__PURE__ */ n("tbody", { ref: l, className: o.body, "aria-busy": a, children: e })
 );
 v.displayName = "Table.Body";
-const I = u(
-  ({ disabled: e = !1, selected: a = !1, onClick: l, children: r, "aria-label": t, "data-test-id": d }, c) => {
-    const b = l !== void 0 && !e, i = () => {
+const T = m(
+  ({ disabled: e = !1, selected: a = !1, onClick: l, children: i, "aria-label": t, "data-test-id": d }, c) => {
+    const b = l !== void 0 && !e, s = () => {
       e || l && l(a);
-    }, s = (m) => {
-      b && (m.key === "Enter" || m.key === " ") && (m.preventDefault(), i());
+    }, r = (u) => {
+      b && (u.key === "Enter" || u.key === " ") && (u.preventDefault(), s());
     };
     return /* @__PURE__ */ n(
       "tr",
@@ -90,17 +90,17 @@ const I = u(
         "aria-disabled": e,
         "aria-label": t,
         "aria-selected": a,
-        onClick: b ? i : void 0,
-        onKeyDown: b ? s : void 0,
+        onClick: b ? s : void 0,
+        onKeyDown: b ? r : void 0,
         "data-test-id": d,
-        children: r
+        children: i
       }
     );
   }
 );
-I.displayName = "Table.Row";
-const T = u(
-  ({ colSpan: e, truncate: a, align: l = "left", children: r, "aria-label": t }, d) => {
+T.displayName = "Table.Row";
+const x = m(
+  ({ colSpan: e, truncate: a, align: l = "left", children: i, "aria-label": t }, d) => {
     const c = y(null);
     return p(c, d), w(c), /* @__PURE__ */ n(
       "td",
@@ -111,20 +111,20 @@ const T = u(
         "data-align": l,
         "data-truncate": a,
         "aria-label": t,
-        children: r
+        children: i
       }
     );
   }
 );
-T.displayName = "Table.RowCell";
+x.displayName = "Table.RowCell";
 const q = {
   Root: N,
   Caption: g,
   Header: R,
   HeaderCell: C,
   Body: v,
-  Row: I,
-  RowCell: T
+  Row: T,
+  RowCell: x
 };
 export {
   q as Table,
@@ -133,7 +133,7 @@ export {
   R as TableHeader,
   C as TableHeaderCell,
   N as TableRoot,
-  I as TableRow,
-  T as TableRowCell
+  T as TableRow,
+  x as TableRowCell
 };
 //# sourceMappingURL=fondue-components21.js.map

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowDown, IconArrowUp, IconArrowBidirectional } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type ReactNode,\n    type KeyboardEvent,\n    type CSSProperties,\n    type ReactElement,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * 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', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table ref={ref} className={styles.table} data-layout={layout} data-sticky={sticky} {...props}>\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     * 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            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                {onSortChange ? (\n                    <button\n                        className={styles.sortButton}\n                        aria-label={sortLabel}\n                        data-active={!!sortDirection}\n                        onClick={handleSortChange}\n                    >\n                        {children}\n                        {sortDirection === 'ascending' ? (\n                            <IconArrowUp size=\"12\" />\n                        ) : sortDirection === 'descending' ? (\n                            <IconArrowDown size=\"12\" />\n                        ) : (\n                            <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                        )}\n                    </button>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\ntype ClickableTableRowProps = BaseTableRowProps & {\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick: (selected: boolean) => void;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = () => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","sticky","children","props","ref","jsx","handleKeyDown","styles","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","TableRowCell","Table"],"mappings":"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"}
+{"version":3,"file":"fondue-components21.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowDown, IconArrowUp, IconArrowBidirectional } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type ReactNode,\n    type KeyboardEvent,\n    type CSSProperties,\n    type ReactElement,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * 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', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table ref={ref} className={styles.table} data-layout={layout} data-sticky={sticky} {...props}>\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     * 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            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                {onSortChange ? (\n                    <div className={styles.cellContent}>\n                        <button\n                            className={styles.sortButton}\n                            aria-label={sortLabel}\n                            data-active={!!sortDirection}\n                            onClick={handleSortChange}\n                        >\n                            {typeof children === 'string' && truncate ? (\n                                <span className={styles.buttonText}>{children}</span>\n                            ) : (\n                                children\n                            )}\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </button>\n                    </div>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\ntype ClickableTableRowProps = BaseTableRowProps & {\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick: (selected: boolean) => void;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = () => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","sticky","children","props","ref","jsx","handleKeyDown","styles","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","TableRowCell","Table"],"mappings":"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"}

package/dist/fondue-components22.js

@@ -2,11 +2,11 @@ import { jsx as a, jsxs as p } from "react/jsx-runtime";
 import { createContext as x, forwardRef as i, useCallback as j, createElement as N, useContext as T, useRef as A, useEffect as D } from "react";
 import { IconDotsHorizontal as E } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-tabs";
-import { useControllableState as O } from "./fondue-components49.js";
+import { useControllableState as O } from "./fondue-components48.js";
 import { Button as V } from "./fondue-components4.js";
 import { Dropdown as l } from "./fondue-components9.js";
-import { useTabTriggers as q } from "./fondue-components63.js";
-import r from "./fondue-components64.js";
+import { useTabTriggers as q } from "./fondue-components62.js";
+import r from "./fondue-components63.js";
 const b = x({
   value: "",
   disabled: !1

package/dist/fondue-components23.js

@@ -2,7 +2,7 @@ import { jsxs as g, jsx as s } from "react/jsx-runtime";
 import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
 import { forwardRef as n, useRef as S } from "react";
 import { cn as m } from "./fondue-components27.js";
-import r from "./fondue-components65.js";
+import r from "./fondue-components64.js";
 const f = ({
   children: c,
   className: d,

package/dist/fondue-components24.js

@@ -2,7 +2,7 @@ import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import { forwardRef as n } from "react";
 import { cn as T } from "./fondue-components27.js";
-import d from "./fondue-components66.js";
+import d from "./fondue-components65.js";
 const l = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e, ...s }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, ...s, children: t }) });
 l.displayName = "Tooltip.Root";
 const p = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });