@rio-cloud/rio-uikit 2.3.0-beta.3 → 2.3.0

package/components/table/TableStickyRowButton.js

@@ -0,0 +1,32 @@
+import { jsx as o } from "react/jsx-runtime";
+import l from "../button/Button.js";
+import s from "../../utils/classNames.js";
+const u = (a) => {
+  const { active: t = !1, disabled: i = !1, onClick: r, className: e, ...n } = a;
+  return /* @__PURE__ */ o(
+    l,
+    {
+      ...n,
+      bsStyle: "muted",
+      bsSize: "sm",
+      iconOnly: !0,
+      active: t,
+      disabled: i,
+      className: s("table-sticky-row-button", e),
+      onClick: r,
+      children: /* @__PURE__ */ o(
+        "span",
+        {
+          className: s(
+            "rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center",
+            t ? "rotate-315" : "rotate-360"
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  u as default
+};
+//# sourceMappingURL=TableStickyRowButton.js.map

package/components/table/TableStickyRowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStickyRowButton.js","sources":["../../../src/components/table/TableStickyRowButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\n\nexport type TableStickyRowButtonProps = {\n    /**\n     * Controls whether the related row is currently sticky.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Disables the sticky row button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback triggered when the sticky row button is clicked.\n     */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n\n    /**\n     * Optional additional class names for the button element.\n     */\n    className?: string;\n};\n\nconst TableStickyRowButton = (props: TableStickyRowButtonProps) => {\n    const { active = false, disabled = false, onClick, className, ...remainingProps } = props;\n\n    return (\n        <Button\n            {...remainingProps}\n            bsStyle='muted'\n            bsSize='sm'\n            iconOnly\n            active={active}\n            disabled={disabled}\n            className={classNames('table-sticky-row-button', className)}\n            onClick={onClick}\n        >\n            <span\n                className={classNames(\n                    'rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center',\n                    active ? 'rotate-315' : 'rotate-360'\n                )}\n            />\n        </Button>\n    );\n};\n\nexport default TableStickyRowButton;\n"],"names":["TableStickyRowButton","props","active","disabled","onClick","className","remainingProps","jsx","Button","classNames"],"mappings":";;;AA+BA,MAAMA,IAAuB,CAACC,MAAqC;AAC/D,QAAM,EAAE,QAAAC,IAAS,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBL;AAEpF,SACI,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,UAAQ;AAAA,MACR,QAAAJ;AAAA,MACA,UAAAC;AAAA,MACA,WAAWM,EAAW,2BAA2BJ,CAAS;AAAA,MAC1D,SAAAD;AAAA,MAEA,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE;AAAA,YACP;AAAA,YACAP,IAAS,eAAe;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}

package/components/table/TableToolbar.d.ts

@@ -1,12 +1,33 @@
 import { PropsWithChildren } from 'react';
 import { default as TableToolbarColumn } from './TableToolbarColumn';
+export { TableToolbarColumn };
+export type { TableToolbarColumnHorizontalAlign, TableToolbarColumnProps, TableToolbarColumnVerticalAlign, } from './TableToolbarColumn';
 export type TableToolbarProps = {
     /**
      * Optional class names for the wrapper element.
      */
     className?: string;
+    /**
+     * Optional class names for the card that wraps collapsed toolbar controls
+     * in the compact mobile layout.
+     */
+    collapseCardClassName?: string;
+    /**
+     * Optional toolbar width in pixels at which the toolbar switches into its compact
+     * mobile/collapsible layout.
+     *
+     * @default 544
+     */
+    responsiveCollapseBreakpoint?: number;
+    /**
+     * Disables the compact mobile/collapsible toolbar layout.
+     *
+     * Use this as an escape hatch when a consuming service needs to keep the
+     * default wrapping toolbar behavior regardless of the available toolbar width.
+     *
+     * @default false
+     */
+    disableResponsiveCollapse?: boolean;
 };
-declare const TableToolbar: ({ className, children }: PropsWithChildren<TableToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+declare const TableToolbar: (props: PropsWithChildren<TableToolbarProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableToolbar;
-export { TableToolbarColumn };
-export type { TableToolbarColumnHorizontalAlign, TableToolbarColumnProps, TableToolbarColumnVerticalAlign, } from './TableToolbarColumn';

package/components/table/TableToolbar.js

@@ -1,52 +1,93 @@
-import { jsx as s, jsxs as T } from "react/jsx-runtime";
-import { useRef as f, useState as v, useLayoutEffect as x, Children as y, isValidElement as b, Fragment as z } from "react";
-import N from "../../hooks/useResizeObserver.js";
-import p from "../../utils/classNames.js";
-import w from "./TableToolbarColumn.js";
-const A = (o) => b(o) && o.type === w, h = (o) => {
-  const t = [];
-  for (const e of y.toArray(o)) {
-    if (b(e) && e.type === z) {
-      const r = h(e.props.children);
-      if (!r)
+import { jsx as o, jsxs as c, Fragment as k } from "react/jsx-runtime";
+import { useRef as C, useState as x, useLayoutEffect as D, useEffect as G, Children as w, isValidElement as N, Fragment as P } from "react";
+import I from "../../hooks/useResizeObserver.js";
+import K from "../../hooks/useMergeRefs.js";
+import m from "../../utils/classNames.js";
+import U from "../button/ToggleButton.js";
+import V from "../collapse/Collapse.js";
+import $ from "../card/Card.js";
+import q from "./TableSearch.js";
+import J from "./TableToolbarColumn.js";
+const Q = 544, X = (r) => N(r) && r.type === J, B = (r) => {
+  const e = [];
+  for (const l of w.toArray(r)) {
+    if (N(l) && l.type === P) {
+      const t = B(l.props.children);
+      if (!t)
         return null;
-      t.push(...r);
+      e.push(...t);
       continue;
     }
-    if (!A(e))
+    if (!X(l))
       return null;
-    t.push(e);
+    e.push(l);
   }
-  return t;
-}, u = (o) => {
-  if (!o)
+  return e;
+}, F = (r, e) => w.toArray(r).some((l) => N(l) ? l.type === e ? !0 : F(l.props.children, e) : !1), v = (r) => {
+  if (!r)
     return !1;
-  const t = Array.from(o.children);
-  if (t.length < 2)
+  const e = Array.from(r.children);
+  if (e.length < 2)
     return !1;
-  const e = (t[0]?.offsetTop ?? 0) + (t[0]?.offsetHeight ?? 0);
-  return t.some((r) => r.offsetTop + r.offsetHeight !== e);
-}, j = ({ className: o, children: t }) => {
-  const e = f(null), r = f(null), c = f(null), [g, d] = v(!1), [m, , { inlineSize: C }] = N(), n = h(t), a = (n ?? []).filter((l) => l.props.horizontalAlign !== "right"), i = (n ?? []).filter((l) => l.props.horizontalAlign === "right");
-  return x(() => {
-    const l = e.current;
-    l?.classList.add("table-toolbar-measuring");
-    const R = u(m.current) || u(r.current) || u(c.current);
-    l?.classList.remove("table-toolbar-measuring"), d(R);
-  }, [t, a.length, i.length, C]), n?.length ? /* @__PURE__ */ s(
+  const l = (e[0]?.offsetTop ?? 0) + (e[0]?.offsetHeight ?? 0);
+  return e.some((t) => t.offsetTop + t.offsetHeight !== l);
+}, ie = (r) => {
+  const {
+    className: e,
+    collapseCardClassName: l,
+    children: t,
+    responsiveCollapseBreakpoint: H = Q,
+    disableResponsiveCollapse: _ = !1
+  } = r, R = C(null), T = C(null), y = C(null), [M, S] = x(!1), [f, A] = x(!1), [W, , { inlineSize: z }] = I(), [p, , { inlineSize: j }] = I(), L = K(R, W), i = !_ && z !== void 0 && z <= H, u = B(t), s = (u ?? []).filter((a) => a.props.horizontalAlign !== "right"), n = (u ?? []).filter((a) => a.props.horizontalAlign === "right"), d = n.findIndex(
+    (a) => F(a.props.children, q)
+  ), h = d >= 0 ? n[d] : void 0, E = h ? n.filter((a, g) => g !== d) : n, b = i && E.length > 0, O = b && /* @__PURE__ */ o("div", { className: "table-toolbar-mobile-toggle", children: /* @__PURE__ */ o(
+    U,
+    {
+      active: f,
+      "aria-label": f ? "Hide toolbar filters" : "Show toolbar filters",
+      bsStyle: "default",
+      iconName: "rioglyph-option-horizontal",
+      iconOnly: !0,
+      onClick: A
+    }
+  ) });
+  return D(() => {
+    if (i) {
+      S(!1);
+      return;
+    }
+    const a = R.current;
+    a?.classList.add("table-toolbar-measuring");
+    const g = v(p.current) || v(T.current) || v(y.current);
+    a?.classList.remove("table-toolbar-measuring"), S(g);
+  }, [t, i, s.length, n.length, j]), G(() => {
+    (!i || !b) && A(!1);
+  }, [b, i]), u?.length ? i ? /* @__PURE__ */ o("div", { className: m("table-toolbar", "table-toolbar-mobile", e), ref: L, children: /* @__PURE__ */ c("div", { className: "table-toolbar-container table-toolbar-container-mobile", ref: p, children: [
+    h ? /* @__PURE__ */ c(k, { children: [
+      s.length > 0 && /* @__PURE__ */ o("div", { className: "table-toolbar-mobile-primary", children: /* @__PURE__ */ o("div", { className: "table-toolbar-group-left table-toolbar-group-left-mobile", children: s }) }),
+      /* @__PURE__ */ c("div", { className: "table-toolbar-mobile-search-row", children: [
+        /* @__PURE__ */ o("div", { className: "table-toolbar-mobile-search", children: h }),
+        O
+      ] })
+    ] }) : /* @__PURE__ */ c("div", { className: "table-toolbar-mobile-primary", children: [
+      s.length > 0 && /* @__PURE__ */ o("div", { className: "table-toolbar-group-left table-toolbar-group-left-mobile", children: s }),
+      O
+    ] }),
+    b && /* @__PURE__ */ o(V, { open: f, timeout: 220, children: /* @__PURE__ */ o($, { className: m("table-toolbar-mobile-collapse-card", l), children: /* @__PURE__ */ o("div", { className: "table-toolbar-mobile-collapse", children: E }) }) })
+  ] }) }) : /* @__PURE__ */ o(
     "div",
     {
-      className: p("table-toolbar", g && "table-toolbar-has-wrap", o),
-      ref: e,
-      children: /* @__PURE__ */ T("div", { className: "table-toolbar-container", ref: m, children: [
-        a.length > 0 && /* @__PURE__ */ s("div", { className: "table-toolbar-group-left", ref: r, children: a }),
-        i.length > 0 && /* @__PURE__ */ s("div", { className: "table-toolbar-group-right", ref: c, children: i })
+      className: m("table-toolbar", M && "table-toolbar-has-wrap", e),
+      ref: L,
+      children: /* @__PURE__ */ c("div", { className: "table-toolbar-container", ref: p, children: [
+        s.length > 0 && /* @__PURE__ */ o("div", { className: "table-toolbar-group-left", ref: T, children: s }),
+        n.length > 0 && /* @__PURE__ */ o("div", { className: "table-toolbar-group-right", ref: y, children: n })
       ] })
     }
-  ) : /* @__PURE__ */ s("div", { className: p("table-toolbar", o), children: t });
+  ) : /* @__PURE__ */ o("div", { className: m("table-toolbar", e), children: t });
 };
 export {
-  w as TableToolbarColumn,
-  j as default
+  J as TableToolbarColumn,
+  ie as default
 };
 //# sourceMappingURL=TableToolbar.js.map

package/components/table/TableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport classNames from '../../utils/classNames';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = ({ className, children }: PropsWithChildren<TableToolbarProps>) => {\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n\n    const [toolbarContainerRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    useLayoutEffect(() => {\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, leftColumns.length, rightColumns.length, toolbarInlineSize]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={toolbarRef}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n"],"names":["isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","className","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","toolbarContainerRef","toolbarInlineSize","useResizeObserver","toolbarColumns","leftColumns","column","rightColumns","useLayoutEffect","toolbarElement","nextHasWrappedRows","jsx","classNames","jsxs"],"mappings":";;;;;AAyBA,MAAMA,IAA8B,CAACC,MACjCC,EAAeD,CAAK,KAAKA,EAAM,SAASE,GAEtCC,IAAwB,CAACC,MAA4D;AACvF,QAAMC,IAAuC,CAAA;AAE7C,aAAWL,KAASM,EAAS,QAAQF,CAAQ,GAAG;AAC5C,QAAIH,EAAeD,CAAK,KAAKA,EAAM,SAASO,GAAU;AAClD,YAAMC,IAAkBL,EAAsBH,EAAM,MAAM,QAAQ;AAElE,UAAI,CAACQ;AACD,eAAO;AAGX,MAAAH,EAAQ,KAAK,GAAGG,CAAe;AAC/B;AAAA,IACJ;AAEA,QAAI,CAACT,EAA4BC,CAAK;AAClC,aAAO;AAGX,IAAAK,EAAQ,KAAKL,CAAK;AAAA,EACtB;AAEA,SAAOK;AACX,GAEMI,IAAsB,CAACC,MAA4C;AACrE,MAAI,CAACA;AACD,WAAO;AAGX,QAAMC,IAAe,MAAM,KAAKD,EAAiB,QAAQ;AAEzD,MAAIC,EAAa,SAAS;AACtB,WAAO;AAGX,QAAMC,KAAmBD,EAAa,CAAC,GAAG,aAAa,MAAMA,EAAa,CAAC,GAAG,gBAAgB;AAE9F,SAAOA,EAAa,KAAK,CAAAE,MAAeA,EAAY,YAAYA,EAAY,iBAAiBD,CAAe;AAChH,GAEME,IAAe,CAAC,EAAE,WAAAC,GAAW,UAAAX,QAAqD;AACpF,QAAMY,IAAaC,EAA8B,IAAI,GAC/CC,IAAeD,EAA8B,IAAI,GACjDE,IAAgBF,EAA8B,IAAI,GAElD,CAACG,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpD,CAACC,KAAuB,EAAE,YAAYC,EAAA,CAAmB,IAAIC,EAAA,GAE7DC,IAAiBvB,EAAsBC,CAAQ,GAE/CuB,KAAeD,KAAkB,CAAA,GAAI,OAAO,CAAAE,MAAUA,EAAO,MAAM,oBAAoB,OAAO,GAC9FC,KAAgBH,KAAkB,CAAA,GAAI,OAAO,CAAAE,MAAUA,EAAO,MAAM,oBAAoB,OAAO;AAiBrG,SAfAE,EAAgB,MAAM;AAClB,UAAMC,IAAiBf,EAAW;AAElC,IAAAe,GAAgB,UAAU,IAAI,yBAAyB;AAEvD,UAAMC,IACFvB,EAAoBc,EAAoB,OAAO,KAC/Cd,EAAoBS,EAAa,OAAO,KACxCT,EAAoBU,EAAc,OAAO;AAE7C,IAAAY,GAAgB,UAAU,OAAO,yBAAyB,GAE1DV,EAAkBW,CAAkB;AAAA,EACxC,GAAG,CAAC5B,GAAUuB,EAAY,QAAQE,EAAa,QAAQL,CAAiB,CAAC,GAEpEE,GAAgB,SAKjB,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAW,iBAAiBd,KAAkB,0BAA0BL,CAAS;AAAA,MAC5F,KAAKC;AAAA,MAEL,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,2BAA0B,KAAKZ,GACzC,UAAA;AAAA,QAAAI,EAAY,SAAS,KAClB,gBAAAM,EAAC,OAAA,EAAI,WAAU,4BAA2B,KAAKf,GAC1C,UAAAS,EAAA,CACL;AAAA,QAEHE,EAAa,SAAS,KACnB,gBAAAI,EAAC,SAAI,WAAU,6BAA4B,KAAKd,GAC3C,UAAAU,EAAA,CACL;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,EAAA,sBAnBI,OAAA,EAAI,WAAWK,EAAW,iBAAiBnB,CAAS,GAAI,UAAAX,GAAS;AAsBjF;"}
+{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    useEffect,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../useResizeObserver';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport Collapse from '../collapse/Collapse';\nimport Card from '../card/Card';\nimport TableSearch from './TableSearch';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n\n// Switch the toolbar into the compact mobile layout,\n// based on the available toolbar width instead of the overall viewport width.\nconst DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT = 544;\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Optional class names for the card that wraps collapsed toolbar controls\n     * in the compact mobile layout.\n     */\n    collapseCardClassName?: string;\n\n    /**\n     * Optional toolbar width in pixels at which the toolbar switches into its compact\n     * mobile/collapsible layout.\n     *\n     * @default 544\n     */\n    responsiveCollapseBreakpoint?: number;\n\n    /**\n     * Disables the compact mobile/collapsible toolbar layout.\n     *\n     * Use this as an escape hatch when a consuming service needs to keep the\n     * default wrapping toolbar behavior regardless of the available toolbar width.\n     *\n     * @default false\n     */\n    disableResponsiveCollapse?: boolean;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasDescendantType = (node: ReactNode, componentType: unknown): boolean =>\n    Children.toArray(node).some(child => {\n        if (!isValidElement(child)) {\n            return false;\n        }\n\n        if (child.type === componentType) {\n            return true;\n        }\n\n        return hasDescendantType(child.props.children, componentType);\n    });\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = (props: PropsWithChildren<TableToolbarProps>) => {\n    const {\n        className,\n        collapseCardClassName,\n        children,\n        responsiveCollapseBreakpoint = DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT,\n        disableResponsiveCollapse = false,\n    } = props;\n\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n    const [isMobileCollapseOpen, setIsMobileCollapseOpen] = useState(false);\n\n    const [toolbarSizeRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [toolbarContainerRef, , { inlineSize: toolbarContainerInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const mergedToolbarRefs = useMergeRefs(toolbarRef, toolbarSizeRef);\n\n    const isSmallScreen =\n        !disableResponsiveCollapse &&\n        toolbarInlineSize !== undefined &&\n        toolbarInlineSize <= responsiveCollapseBreakpoint;\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    const searchRightColumnIndex = rightColumns.findIndex(column =>\n        hasDescendantType(column.props.children, TableSearch)\n    );\n\n    const searchRightColumn = searchRightColumnIndex >= 0 ? rightColumns[searchRightColumnIndex] : undefined;\n\n    const mobileCollapsedRightColumns = searchRightColumn\n        ? rightColumns.filter((_, index) => index !== searchRightColumnIndex)\n        : rightColumns;\n\n    const hasMobileCollapseToggle = isSmallScreen && mobileCollapsedRightColumns.length > 0;\n\n    const mobileCollapseToggle = hasMobileCollapseToggle && (\n        <div className='table-toolbar-mobile-toggle'>\n            <ToggleButton\n                active={isMobileCollapseOpen}\n                aria-label={isMobileCollapseOpen ? 'Hide toolbar filters' : 'Show toolbar filters'}\n                bsStyle='default'\n                iconName={'rioglyph-option-horizontal'}\n                iconOnly\n                onClick={setIsMobileCollapseOpen}\n            />\n        </div>\n    );\n\n    useLayoutEffect(() => {\n        if (isSmallScreen) {\n            setHasWrappedRows(false);\n            return;\n        }\n\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, isSmallScreen, leftColumns.length, rightColumns.length, toolbarContainerInlineSize]);\n\n    useEffect(() => {\n        if (!isSmallScreen || !hasMobileCollapseToggle) {\n            setIsMobileCollapseOpen(false);\n        }\n    }, [hasMobileCollapseToggle, isSmallScreen]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    if (isSmallScreen) {\n        return (\n            <div className={classNames('table-toolbar', 'table-toolbar-mobile', className)} ref={mergedToolbarRefs}>\n                <div className='table-toolbar-container table-toolbar-container-mobile' ref={toolbarContainerRef}>\n                    {searchRightColumn ? (\n                        <>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-mobile-primary'>\n                                    <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                        {leftColumns}\n                                    </div>\n                                </div>\n                            )}\n                            <div className='table-toolbar-mobile-search-row'>\n                                <div className='table-toolbar-mobile-search'>{searchRightColumn}</div>\n                                {mobileCollapseToggle}\n                            </div>\n                        </>\n                    ) : (\n                        <div className='table-toolbar-mobile-primary'>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                    {leftColumns}\n                                </div>\n                            )}\n                            {mobileCollapseToggle}\n                        </div>\n                    )}\n\n                    {hasMobileCollapseToggle && (\n                        <Collapse open={isMobileCollapseOpen} timeout={220}>\n                            <Card className={classNames('table-toolbar-mobile-collapse-card', collapseCardClassName)}>\n                                <div className='table-toolbar-mobile-collapse'>{mobileCollapsedRightColumns}</div>\n                            </Card>\n                        </Collapse>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={mergedToolbarRefs}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\n"],"names":["DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT","isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasDescendantType","node","componentType","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","props","className","collapseCardClassName","responsiveCollapseBreakpoint","disableResponsiveCollapse","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","isMobileCollapseOpen","setIsMobileCollapseOpen","toolbarSizeRef","toolbarInlineSize","useResizeObserver","toolbarContainerRef","toolbarContainerInlineSize","mergedToolbarRefs","useMergeRefs","isSmallScreen","toolbarColumns","leftColumns","column","rightColumns","searchRightColumnIndex","TableSearch","searchRightColumn","mobileCollapsedRightColumns","_","index","hasMobileCollapseToggle","mobileCollapseToggle","jsx","ToggleButton","useLayoutEffect","toolbarElement","nextHasWrappedRows","useEffect","classNames","jsxs","Collapse","Card"],"mappings":"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"}

package/components/table/TableViewToggles.js

@@ -34,15 +34,15 @@ const o = {
       label: d ?? m ?? "",
       icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.TABLE}` })
     },
-    {
-      id: "SINGLE_CARD",
-      label: C ?? w ?? "",
-      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.SINGLE_CARD}` })
-    },
     {
       id: "MULTI_CARDS",
       label: g ?? L ?? "",
       icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.MULTI_CARDS}` })
+    },
+    {
+      id: "SINGLE_CARD",
+      label: C ?? w ?? "",
+      icon: /* @__PURE__ */ i("span", { className: `rioglyph ${o.SINGLE_CARD}` })
     }
   ], A = n.filter((e) => !T.includes(e.id)), _ = n.some((e) => e.label), h = S("TableViewToggles", a && a);
   return /* @__PURE__ */ i("div", { ...I, className: h, children: /* @__PURE__ */ i("div", { className: "form-group margin-bottom-0", children: /* @__PURE__ */ i(

package/components/table/TableViewToggles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select, { type SelectOption } from '../selects/Select';\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TableViewToggleOption = SelectOption & {\n    id: TableViewTogglesViewType;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     *\n     * @default TableViewToggles.VIEW_TYPE_TABLE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     *\n     * @deprecated Use `tableViewLabel` instead.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the table view select item.\n     */\n    tableViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     *\n     * @deprecated Use `singleCardViewLabel` instead.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the single card view select item.\n     */\n    singleCardViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     *\n     * @deprecated Use `multiCardsViewLabel` instead.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the multi cards view select item.\n     */\n    multiCardsViewLabel?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        tableViewLabel,\n        singleCardViewTooltipContent,\n        singleCardViewLabel,\n        multiCardsViewTooltipContent,\n        multiCardsViewLabel,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const allOptions: TableViewToggleOption[] = [\n        {\n            id: 'TABLE',\n            label: tableViewLabel ?? tableViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.TABLE}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.SINGLE_CARD}`} />,\n        },\n        {\n            id: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.MULTI_CARDS}`} />,\n        },\n    ];\n\n    const options = allOptions.filter(option => !disabledViewTypes.includes(option.id));\n    const hasOptionLabels = allOptions.some(option => option.label);\n\n    const wrapperClassNames = classNames('TableViewToggles', className && className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='form-group margin-bottom-0'>\n                <Select\n                    options={options}\n                    value={[internalViewType]}\n                    onChange={item => item && setViewType(item.id as TableViewTogglesViewType)}\n                    disabled={disabled}\n                    showSelectedItemIcon\n                    pullRight\n                    dropdownClassName={!hasOptionLabels ? 'width-auto' : undefined}\n                />\n            </div>\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["typeIcons","TableViewToggles","props","viewType","initialViewType","disabledViewTypes","onViewTypeChange","noop","tableViewTooltipContent","tableViewLabel","singleCardViewTooltipContent","singleCardViewLabel","multiCardsViewTooltipContent","multiCardsViewLabel","disabled","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","allOptions","jsx","options","option","hasOptionLabels","wrapperClassNames","classNames","Select","item"],"mappings":";;;;;AAMA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GA2GMC,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC,IAAoB,CAAA;AAAA,IACpB,kBAAAC,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAkBC,CAAmB,IAAIC,EAASf,CAAe;AAGxE,EAAAgB,EAAU,MAAM;AACZ,IAAIjB,KACAe,EAAoBf,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMkB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBhB,EAAiBgB,CAAE;AAAA,EACvB,GAEMC,IAAsC;AAAA,IACxC;AAAA,MACI,IAAI;AAAA,MACJ,OAAOd,KAAkBD,KAA2B;AAAA,MACpD,MAAM,gBAAAgB,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,KAAK,GAAA,CAAI;AAAA,IAAA;AAAA,IAE1D;AAAA,MACI,IAAI;AAAA,MACJ,OAAOW,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAc,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,IAAI;AAAA,MACJ,OAAOa,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAY,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,EAChE,GAGEyB,IAAUF,EAAW,OAAO,CAAAG,MAAU,CAACrB,EAAkB,SAASqB,EAAO,EAAE,CAAC,GAC5EC,IAAkBJ,EAAW,KAAK,CAAAG,MAAUA,EAAO,KAAK,GAExDE,IAAoBC,EAAW,oBAAoBd,KAAaA,CAAS;AAE/E,SACI,gBAAAS,EAAC,SAAK,GAAGR,GAAgB,WAAWY,GAChC,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,8BACX,UAAA,gBAAAA;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,SAAAL;AAAA,MACA,OAAO,CAACR,CAAgB;AAAA,MACxB,UAAU,CAAAc,MAAQA,KAAQV,EAAYU,EAAK,EAA8B;AAAA,MACzE,UAAAjB;AAAA,MACA,sBAAoB;AAAA,MACpB,WAAS;AAAA,MACT,mBAAoBa,IAAiC,SAAf;AAAA,IAAe;AAAA,EAAA,GAE7D,EAAA,CACJ;AAER;AAGA1B,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}
+{"version":3,"file":"TableViewToggles.js","sources":["../../../src/components/table/TableViewToggles.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select, { type SelectOption } from '../selects/Select';\n\nconst typeIcons: Record<TableViewTogglesViewType, string> = {\n    TABLE: 'rioglyph-table-view',\n    SINGLE_CARD: 'rioglyph-th-list',\n    MULTI_CARDS: 'rioglyph-split-view',\n};\n\ntype TableViewToggleOption = SelectOption & {\n    id: TableViewTogglesViewType;\n};\n\nexport type TableViewTogglesViewType = 'SINGLE_CARD' | 'MULTI_CARDS' | 'TABLE';\n\nexport type TableViewTogglesProps = {\n    /**\n     * The current viewType for controlling the TablesViewToggles component.\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     */\n    viewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the initial viewType (when viewType is not controlled from the outside).\n     *\n     * Possible values are:\n     *\n     * - `'SINGLE_CARD'`\n     * - `'MULTI_CARDS'`\n     * - `'TABLE'`\n     * - `TableViewToggles.VIEW_TYPE_TABLE`\n     * - `TableViewToggles.VIEW_TYPE_SINGLE_CARD`\n     * - `TableViewToggles.VIEW_TYPE_MULTI_CARDS`\n     *\n     * @default TableViewToggles.VIEW_TYPE_TABLE\n     */\n    initialViewType?: TableViewTogglesViewType;\n\n    /**\n     * Defines the view types which shall not be supported and are omitted.\n     *\n     * @default []\n     */\n    disabledViewTypes?: TableViewTogglesViewType[];\n\n    /**\n     * Callback function for when the user wants to change the viewType.\n     *\n     * Receives the new type as an argument.\n     *\n     * @param viewType The new viewType selected by the user.\n     */\n    onViewTypeChange: (viewType: TableViewTogglesViewType) => void;\n\n    /**\n     * Optional tooltip content for table view button.\n     *\n     * @deprecated Use `tableViewLabel` instead.\n     */\n    tableViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the table view select item.\n     */\n    tableViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for single card view button.\n     *\n     * @deprecated Use `singleCardViewLabel` instead.\n     */\n    singleCardViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the single card view select item.\n     */\n    singleCardViewLabel?: string | ReactNode;\n\n    /**\n     * Optional tooltip content for multi card view button.\n     *\n     * @deprecated Use `multiCardsViewLabel` instead.\n     */\n    multiCardsViewTooltipContent?: string | ReactNode;\n\n    /**\n     * Optional label content for the multi cards view select item.\n     */\n    multiCardsViewLabel?: string | ReactNode;\n\n    /**\n     * Disables all buttons.\n     *\n     * This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the\n     * corresponding table is empty.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableViewToggles = (props: TableViewTogglesProps) => {\n    const {\n        viewType,\n        initialViewType = 'TABLE',\n        disabledViewTypes = [],\n        onViewTypeChange = noop,\n        tableViewTooltipContent,\n        tableViewLabel,\n        singleCardViewTooltipContent,\n        singleCardViewLabel,\n        multiCardsViewTooltipContent,\n        multiCardsViewLabel,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [internalViewType, setInternalViewType] = useState(initialViewType);\n\n    // update internal state when external state changes - controlled component case\n    useEffect(() => {\n        if (viewType) {\n            setInternalViewType(viewType);\n        }\n    }, [viewType]);\n\n    const setViewType = (vt: TableViewTogglesViewType) => {\n        setInternalViewType(vt);\n        onViewTypeChange(vt);\n    };\n\n    const allOptions: TableViewToggleOption[] = [\n        {\n            id: 'TABLE',\n            label: tableViewLabel ?? tableViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.TABLE}`} />,\n        },\n        {\n            id: 'MULTI_CARDS',\n            label: multiCardsViewLabel ?? multiCardsViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.MULTI_CARDS}`} />,\n        },\n        {\n            id: 'SINGLE_CARD',\n            label: singleCardViewLabel ?? singleCardViewTooltipContent ?? '',\n            icon: <span className={`rioglyph ${typeIcons.SINGLE_CARD}`} />,\n        },\n    ];\n\n    const options = allOptions.filter(option => !disabledViewTypes.includes(option.id));\n    const hasOptionLabels = allOptions.some(option => option.label);\n\n    const wrapperClassNames = classNames('TableViewToggles', className && className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='form-group margin-bottom-0'>\n                <Select\n                    options={options}\n                    value={[internalViewType]}\n                    onChange={item => item && setViewType(item.id as TableViewTogglesViewType)}\n                    disabled={disabled}\n                    showSelectedItemIcon\n                    pullRight\n                    dropdownClassName={!hasOptionLabels ? 'width-auto' : undefined}\n                />\n            </div>\n        </div>\n    );\n};\n\n// Don't export values as string but as a distinct union type\nTableViewToggles.VIEW_TYPE_TABLE = 'TABLE' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_SINGLE_CARD = 'SINGLE_CARD' as TableViewTogglesViewType;\nTableViewToggles.VIEW_TYPE_MULTI_CARDS = 'MULTI_CARDS' as TableViewTogglesViewType;\n\nexport default TableViewToggles;\n"],"names":["typeIcons","TableViewToggles","props","viewType","initialViewType","disabledViewTypes","onViewTypeChange","noop","tableViewTooltipContent","tableViewLabel","singleCardViewTooltipContent","singleCardViewLabel","multiCardsViewTooltipContent","multiCardsViewLabel","disabled","className","remainingProps","internalViewType","setInternalViewType","useState","useEffect","setViewType","vt","allOptions","jsx","options","option","hasOptionLabels","wrapperClassNames","classNames","Select","item"],"mappings":";;;;;AAMA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GA2GMC,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,mBAAAC,IAAoB,CAAA;AAAA,IACpB,kBAAAC,IAAmBC;AAAA,IACnB,yBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAkBC,CAAmB,IAAIC,EAASf,CAAe;AAGxE,EAAAgB,EAAU,MAAM;AACZ,IAAIjB,KACAe,EAAoBf,CAAQ;AAAA,EAEpC,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAMkB,IAAc,CAACC,MAAiC;AAClD,IAAAJ,EAAoBI,CAAE,GACtBhB,EAAiBgB,CAAE;AAAA,EACvB,GAEMC,IAAsC;AAAA,IACxC;AAAA,MACI,IAAI;AAAA,MACJ,OAAOd,KAAkBD,KAA2B;AAAA,MACpD,MAAM,gBAAAgB,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,KAAK,GAAA,CAAI;AAAA,IAAA;AAAA,IAE1D;AAAA,MACI,IAAI;AAAA,MACJ,OAAOa,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAY,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,IAAI;AAAA,MACJ,OAAOW,KAAuBD,KAAgC;AAAA,MAC9D,MAAM,gBAAAc,EAAC,QAAA,EAAK,WAAW,YAAYxB,EAAU,WAAW,GAAA,CAAI;AAAA,IAAA;AAAA,EAChE,GAGEyB,IAAUF,EAAW,OAAO,CAAAG,MAAU,CAACrB,EAAkB,SAASqB,EAAO,EAAE,CAAC,GAC5EC,IAAkBJ,EAAW,KAAK,CAAAG,MAAUA,EAAO,KAAK,GAExDE,IAAoBC,EAAW,oBAAoBd,KAAaA,CAAS;AAE/E,SACI,gBAAAS,EAAC,SAAK,GAAGR,GAAgB,WAAWY,GAChC,UAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,8BACX,UAAA,gBAAAA;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,SAAAL;AAAA,MACA,OAAO,CAACR,CAAgB;AAAA,MACxB,UAAU,CAAAc,MAAQA,KAAQV,EAAYU,EAAK,EAA8B;AAAA,MACzE,UAAAjB;AAAA,MACA,sBAAoB;AAAA,MACpB,WAAS;AAAA,MACT,mBAAoBa,IAAiC,SAAf;AAAA,IAAe;AAAA,EAAA,GAE7D,EAAA,CACJ;AAER;AAGA1B,EAAiB,kBAAkB;AACnCA,EAAiB,wBAAwB;AACzCA,EAAiB,wBAAwB;"}

package/components/table/context/TableInteractionContext.d.ts

@@ -10,9 +10,12 @@ import { TableRowData, TableRowId, TableSortDirection } from '../Table.types';
 export type TableInteractionContextValue<RowType extends TableRowData> = {
     showSelectionColumn?: boolean;
     selectedRowIdSet: Set<TableRowId>;
+    selectableRowIdSet: Set<TableRowId>;
     selectionHeaderContent?: ReactNode;
     isAllRowsSelected?: boolean;
     isSomeRowsSelected?: boolean;
+    hasSelectableRows?: boolean;
+    hideSelectionCheckboxesForExcludedRows?: boolean;
     onToggleAllSelection?: () => void;
     onToggleRowSelection?: (rowId: TableRowId) => void;
     activeRowId?: TableRowId;

package/components/table/context/TableInteractionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableInteractionContext.js","sources":["../../../../src/components/table/context/TableInteractionContext.tsx"],"sourcesContent":["import { createContext, useContext, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';\n\nimport type { TableRowData, TableRowId, TableSortDirection } from '../Table.types';\n\n/**\n * User-facing table interaction state and callbacks consumed by header/body cells.\n *\n * These values are conceptually different from the normalized render model:\n * they describe selection, sorting, and row activation/click behavior rather than\n * the structural table draft.\n */\nexport type TableInteractionContextValue<RowType extends TableRowData> = {\n    showSelectionColumn?: boolean;\n    selectedRowIdSet: Set<TableRowId>;\n    selectionHeaderContent?: ReactNode;\n    isAllRowsSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    onToggleAllSelection?: () => void;\n    onToggleRowSelection?: (rowId: TableRowId) => void;\n    activeRowId?: TableRowId;\n    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    isClickable: boolean;\n    onSortChange?: (\n        columnKey: string,\n        direction: TableSortDirection,\n        event: ReactMouseEvent<HTMLButtonElement>\n    ) => void;\n};\n\nexport const TableInteractionContext = createContext<TableInteractionContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableInteractionContext = <RowType extends TableRowData>() =>\n    useContext(TableInteractionContext) as TableInteractionContextValue<RowType> | null;\n\nexport const useTableInteractionContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableInteractionContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table interaction context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableInteractionContext","createContext","useOptionalTableInteractionContext","useContext"],"mappings":";AA8BO,MAAMA,IAA0BC,EAAiE,IAAI,GAE/FC,IAAqC,MAC9CC,EAAWH,CAAuB;"}
+{"version":3,"file":"TableInteractionContext.js","sources":["../../../../src/components/table/context/TableInteractionContext.tsx"],"sourcesContent":["import { createContext, useContext, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';\n\nimport type { TableRowData, TableRowId, TableSortDirection } from '../Table.types';\n\n/**\n * User-facing table interaction state and callbacks consumed by header/body cells.\n *\n * These values are conceptually different from the normalized render model:\n * they describe selection, sorting, and row activation/click behavior rather than\n * the structural table draft.\n */\nexport type TableInteractionContextValue<RowType extends TableRowData> = {\n    showSelectionColumn?: boolean;\n    selectedRowIdSet: Set<TableRowId>;\n    selectableRowIdSet: Set<TableRowId>;\n    selectionHeaderContent?: ReactNode;\n    isAllRowsSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    hasSelectableRows?: boolean;\n    hideSelectionCheckboxesForExcludedRows?: boolean;\n    onToggleAllSelection?: () => void;\n    onToggleRowSelection?: (rowId: TableRowId) => void;\n    activeRowId?: TableRowId;\n    onActiveRowChange?: (rowId: TableRowId | undefined, row: RowType, rowIndex: number) => void;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    isClickable: boolean;\n    onSortChange?: (\n        columnKey: string,\n        direction: TableSortDirection,\n        event: ReactMouseEvent<HTMLButtonElement>\n    ) => void;\n};\n\nexport const TableInteractionContext = createContext<TableInteractionContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableInteractionContext = <RowType extends TableRowData>() =>\n    useContext(TableInteractionContext) as TableInteractionContextValue<RowType> | null;\n\nexport const useTableInteractionContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableInteractionContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table interaction context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableInteractionContext","createContext","useOptionalTableInteractionContext","useContext"],"mappings":";AAiCO,MAAMA,IAA0BC,EAAiE,IAAI,GAE/FC,IAAqC,MAC9CC,EAAWH,CAAuB;"}

package/components/table/context/TableRenderContext.d.ts

@@ -45,6 +45,7 @@ export type TableRenderDraft<RowType extends TableRowData> = {
         rowIndex: number;
         kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';
         disabled?: boolean;
+        selectable?: boolean;
         render: () => ReactNode;
     }[];
     bodyMaxHeight?: string;

package/components/table/context/TableRenderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRenderContext.js","sources":["../../../../src/components/table/context/TableRenderContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\n\nimport type {\n    TableColumnDefinition,\n    TableHorizontalAlign,\n    TableRowData,\n    TableRowId,\n    TableVerticalAlign,\n} from '../Table.types';\nimport type { TableViewHeader } from '../model/tableView.types';\n\nexport type RenderHeaderColumn<RowType extends TableRowData> = {\n    id: string;\n    columnKey?: string;\n    label: ReactNode;\n    icon?: string;\n    filter?: ReactNode;\n    hideLabel?: boolean;\n    width?: number | string;\n    mobileLabel?: string;\n    horizontalAlign?: TableHorizontalAlign;\n    verticalAlign?: TableVerticalAlign;\n    headerClassName?: string;\n    hideOnMobile?: boolean;\n    sortable?: boolean;\n    draggable?: boolean;\n    resizeable?: boolean;\n    minResizeWidth?: number;\n    maxResizeWidth?: number;\n    row: number;\n    colSpan: number;\n    rowSpan: number;\n    source?: RowType;\n};\n\n/**\n * Mutable draft of the current render pass.\n *\n * The table keeps React composability, but still needs a normalized table model\n * for features such as header placement, footer detection, virtualization, and\n * stable body-row rendering.\n *\n * The table therefore works in two internal stages:\n * 1. Header/body/footer sub-components register the structure they produce into this draft.\n * 2. `Table` promotes that draft into stable draft state and renders from that.\n *\n * The draft is intentionally recreated on every render pass and must not be treated\n * as persistent state.\n */\nexport type TableRenderDraft<RowType extends TableRowData> = {\n    headerColumns: RenderHeaderColumn<RowType>[];\n    bodyRows: {\n        rowId: TableRowId;\n        rowIndex: number;\n        kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';\n        disabled?: boolean;\n        render: () => ReactNode;\n    }[];\n    bodyMaxHeight?: string;\n    hasFooter?: boolean;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n};\n\nexport type RenderBodyRow<RowType extends TableRowData> = Omit<TableRenderDraft<RowType>['bodyRows'][number], 'render'>;\n\n/**\n * Structural render context.\n *\n * This context only carries the normalized render model built from the current\n * render pass. Public render configuration such as `rowClassName` or card/table\n * view mode lives in `TableRenderConfigContext`.\n */\nexport type TableRenderContextValue<RowType extends TableRowData> = {\n    header?: TableViewHeader<RowType>;\n    columns: RenderHeaderColumn<RowType>[];\n    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;\n    columnIndexByKey: Map<string, number>;\n    bodyRows: RenderBodyRow<RowType>[];\n    renderBodyRow?: (row: RenderBodyRow<RowType>) => ReactNode;\n    renderDraft: TableRenderDraft<RowType>;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n    /**\n     * Switches body rows into the registration pass.\n     *\n     * While this flag is true, row components register their normalized metadata in\n     * `renderDraft.bodyRows` and return `null` instead of rendering DOM directly.\n     * `TableBody` then performs the second pass by rendering the collected rows\n     * through `renderBodyRow(...)`.\n     */\n    isRegisteringBodyRows?: boolean;\n};\n\nexport const TableRenderContext = createContext<TableRenderContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderContext = <RowType extends TableRowData>() =>\n    useContext(TableRenderContext) as TableRenderContextValue<RowType> | null;\n\nexport const useTableRenderContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableRenderContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table render context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableRenderContext","createContext","useOptionalTableRenderContext","useContext"],"mappings":";AA8FO,MAAMA,IAAqBC,EAA4D,IAAI,GAErFC,IAAgC,MACzCC,EAAWH,CAAkB;"}
+{"version":3,"file":"TableRenderContext.js","sources":["../../../../src/components/table/context/TableRenderContext.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react';\n\nimport type {\n    TableColumnDefinition,\n    TableHorizontalAlign,\n    TableRowData,\n    TableRowId,\n    TableVerticalAlign,\n} from '../Table.types';\nimport type { TableViewHeader } from '../model/tableView.types';\n\nexport type RenderHeaderColumn<RowType extends TableRowData> = {\n    id: string;\n    columnKey?: string;\n    label: ReactNode;\n    icon?: string;\n    filter?: ReactNode;\n    hideLabel?: boolean;\n    width?: number | string;\n    mobileLabel?: string;\n    horizontalAlign?: TableHorizontalAlign;\n    verticalAlign?: TableVerticalAlign;\n    headerClassName?: string;\n    hideOnMobile?: boolean;\n    sortable?: boolean;\n    draggable?: boolean;\n    resizeable?: boolean;\n    minResizeWidth?: number;\n    maxResizeWidth?: number;\n    row: number;\n    colSpan: number;\n    rowSpan: number;\n    source?: RowType;\n};\n\n/**\n * Mutable draft of the current render pass.\n *\n * The table keeps React composability, but still needs a normalized table model\n * for features such as header placement, footer detection, virtualization, and\n * stable body-row rendering.\n *\n * The table therefore works in two internal stages:\n * 1. Header/body/footer sub-components register the structure they produce into this draft.\n * 2. `Table` promotes that draft into stable draft state and renders from that.\n *\n * The draft is intentionally recreated on every render pass and must not be treated\n * as persistent state.\n */\nexport type TableRenderDraft<RowType extends TableRowData> = {\n    headerColumns: RenderHeaderColumn<RowType>[];\n    bodyRows: {\n        rowId: TableRowId;\n        rowIndex: number;\n        kind: 'data' | 'expanded' | 'expanded-full-width' | 'group' | 'group-footer' | 'spacer';\n        disabled?: boolean;\n        selectable?: boolean;\n        render: () => ReactNode;\n    }[];\n    bodyMaxHeight?: string;\n    hasFooter?: boolean;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n};\n\nexport type RenderBodyRow<RowType extends TableRowData> = Omit<TableRenderDraft<RowType>['bodyRows'][number], 'render'>;\n\n/**\n * Structural render context.\n *\n * This context only carries the normalized render model built from the current\n * render pass. Public render configuration such as `rowClassName` or card/table\n * view mode lives in `TableRenderConfigContext`.\n */\nexport type TableRenderContextValue<RowType extends TableRowData> = {\n    header?: TableViewHeader<RowType>;\n    columns: RenderHeaderColumn<RowType>[];\n    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;\n    columnIndexByKey: Map<string, number>;\n    bodyRows: RenderBodyRow<RowType>[];\n    renderBodyRow?: (row: RenderBodyRow<RowType>) => ReactNode;\n    renderDraft: TableRenderDraft<RowType>;\n    hasFooterCells?: boolean;\n    hasExpandableRows?: boolean;\n    /**\n     * Switches body rows into the registration pass.\n     *\n     * While this flag is true, row components register their normalized metadata in\n     * `renderDraft.bodyRows` and return `null` instead of rendering DOM directly.\n     * `TableBody` then performs the second pass by rendering the collected rows\n     * through `renderBodyRow(...)`.\n     */\n    isRegisteringBodyRows?: boolean;\n};\n\nexport const TableRenderContext = createContext<TableRenderContextValue<TableRowData> | null>(null);\n\nexport const useOptionalTableRenderContext = <RowType extends TableRowData>() =>\n    useContext(TableRenderContext) as TableRenderContextValue<RowType> | null;\n\nexport const useTableRenderContext = <RowType extends TableRowData>() => {\n    const context = useOptionalTableRenderContext<RowType>();\n\n    if (!context) {\n        throw new Error('Table render context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableRenderContext","createContext","useOptionalTableRenderContext","useContext"],"mappings":";AA+FO,MAAMA,IAAqBC,EAA4D,IAAI,GAErFC,IAAgC,MACzCC,EAAWH,CAAkB;"}

package/components/table/layout/useMeasuredColumnMaxWidths.js

@@ -1,85 +1,83 @@
-import { useState as S, useRef as p, useMemo as w, useLayoutEffect as R } from "react";
-const A = 1, E = (t) => {
+import { useState as A, useRef as z, useMemo as F, useLayoutEffect as N } from "react";
+import a from "../../../hooks/useResizeObserver.js";
+const j = 1, x = (t) => {
   const e = t?.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
   return e ? Number(e[1]) : void 0;
-}, x = (t) => {
+}, C = (t) => {
   const e = t.getBoundingClientRect().width;
   return e > 0 ? Math.ceil(e) : t.scrollWidth;
-}, O = (t) => {
+}, P = (t) => {
   if (!t)
     return 0;
   const e = window.getComputedStyle(t), n = Number.parseFloat(e.columnGap || e.gap || "0");
   return Number.isFinite(n) ? Math.ceil(n) : 0;
-}, q = (t) => {
+}, T = (t) => {
   const e = t.querySelector(".table-head-label");
   if (e) {
-    const s = t.querySelector(".sort-arrows");
-    return x(e) + (s ? x(s) : 0) + (s ? O(t.querySelector(".table-head-button")) : 0);
+    const o = t.querySelector(".sort-arrows");
+    return C(e) + (o ? C(o) : 0) + (o ? P(t.querySelector(".table-head-button")) : 0);
   }
   return (t.querySelector(".table-cell-content, .table-head-button-label") ?? t).scrollWidth;
-}, z = (t, e) => Object.fromEntries(
-  Object.entries(e).map(([n, s]) => {
-    const i = t[n], u = E(i), r = E(s);
+}, _ = (t, e) => Object.fromEntries(
+  Object.entries(e).map(([n, o]) => {
+    const u = t[n], i = x(u), r = x(o);
     return [
       n,
-      u !== void 0 && r !== void 0 && Math.abs(u - r) <= A ? i : s
+      i !== void 0 && r !== void 0 && Math.abs(i - r) <= j ? u : o
     ];
   })
-), P = (t) => {
-  const { columns: e, enabled: n, tableWrapperRef: s } = t, [i, u] = S({}), r = p(""), a = p({}), y = w(
-    () => e.map((o) => `${o.key}:${o.width === void 0 ? "auto" : String(o.width)}`).join("|"),
+), D = (t) => {
+  const { columns: e, enabled: n, tableWrapperRef: o } = t, [u, i] = A({}), r = z(""), c = z({}), g = F(
+    () => e.map((l) => `${l.key}:${l.width === void 0 ? "auto" : String(l.width)}`).join("|"),
     [e]
-  );
-  return R(() => {
-    const o = s.current;
-    if (!n || !o) {
-      r.current && (r.current = "", a.current = {}, u({}));
+  ), s = o.current, v = s?.querySelector(".table-head") ?? null, w = s?.querySelector(".table-body") ?? null, R = s?.querySelector(".table-footer") ?? null, q = s?.querySelector(".table-scroll-content") ?? null, [, , b] = a(s), [, , S] = a(v), [, , M] = a(w), [, , f] = a(R), [, , p] = a(q);
+  return N(() => {
+    if (!n || !s) {
+      r.current && (r.current = "", c.current = {}, i({}));
       return;
     }
     if (e.length === 0) {
-      r.current && (r.current = "", a.current = {}, u({}));
+      r.current && (r.current = "", c.current = {}, i({}));
       return;
     }
-    const h = e.filter((c) => c.width === void 0);
-    if (h.length === 0) {
-      r.current && (r.current = "", a.current = {}, u({}));
+    const l = e.filter((d) => d.width === void 0);
+    if (l.length === 0) {
+      r.current && (r.current = "", c.current = {}, i({}));
       return;
     }
-    const m = () => {
-      const c = Array.from(o.querySelectorAll("[data-column]")), C = Object.fromEntries(
-        h.flatMap((M) => {
-          const W = c.filter((d) => d.dataset.column === M.key).reduce(
-            (d, g) => Math.max(d, q(g)),
+    (() => {
+      const d = Array.from(s.querySelectorAll("[data-column]")), k = Object.fromEntries(
+        l.flatMap((E) => {
+          const y = d.filter((h) => h.dataset.column === E.key).reduce(
+            (h, O) => Math.max(h, T(O)),
             0
           );
-          return W > 0 ? [[M.key, `${Math.ceil(W)}px`]] : [];
+          return y > 0 ? [[E.key, `${Math.ceil(y)}px`]] : [];
         })
-      ), l = z(
-        a.current,
-        C
-      ), f = JSON.stringify(l);
-      f !== r.current && (r.current = f, a.current = l, u(l));
-    };
-    m();
-    const v = [
-      o,
-      ...Array.from(
-        o.querySelectorAll(
-          ".table-head, .table-body, .table-footer, .table-scroll-content"
-        )
-      )
-    ], b = new ResizeObserver(() => {
-      m();
-    });
-    return v.forEach((c) => {
-      b.observe(c);
-    }), () => {
-      b.disconnect();
-    };
-  }, [y, n, s]), i;
+      ), m = _(
+        c.current,
+        k
+      ), W = JSON.stringify(m);
+      W !== r.current && (r.current = W, c.current = m, i(m));
+    })();
+  }, [
+    g,
+    n,
+    s,
+    b.blockSize,
+    b.inlineSize,
+    S.blockSize,
+    S.inlineSize,
+    M.blockSize,
+    M.inlineSize,
+    f.blockSize,
+    f.inlineSize,
+    p.blockSize,
+    p.inlineSize
+  ]), u;
 };
 export {
-  z as stabilizeMeasuredColumnMaxWidths,
-  P as useMeasuredColumnMaxWidths
+  _ as stabilizeMeasuredColumnMaxWidths,
+  D as useMeasuredColumnMaxWidths
 };
 //# sourceMappingURL=useMeasuredColumnMaxWidths.js.map

package/components/table/layout/useMeasuredColumnMaxWidths.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMeasuredColumnMaxWidths.js","sources":["../../../../src/components/table/layout/useMeasuredColumnMaxWidths.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from 'react';\n\nimport type { TableColumnDefinition, TableRowData } from '../Table.types';\n\nconst MEASURED_WIDTH_JITTER_TOLERANCE_PX = 1;\n\nconst parsePixelWidth = (width?: string) => {\n    const match = width?.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    return match ? Number(match[1]) : undefined;\n};\n\nconst measureRenderedWidth = (element: HTMLElement) => {\n    const renderedWidth = element.getBoundingClientRect().width;\n\n    return renderedWidth > 0 ? Math.ceil(renderedWidth) : element.scrollWidth;\n};\n\nconst resolveFlexGapWidth = (element: HTMLElement | null) => {\n    if (!element) {\n        return 0;\n    }\n\n    const styles = window.getComputedStyle(element);\n    const gap = Number.parseFloat(styles.columnGap || styles.gap || '0');\n\n    return Number.isFinite(gap) ? Math.ceil(gap) : 0;\n};\n\nconst measureColumnContentWidth = (element: HTMLElement) => {\n    const headerLabelElement = element.querySelector<HTMLElement>('.table-head-label');\n\n    if (headerLabelElement) {\n        const sortArrowsElement = element.querySelector<HTMLElement>('.sort-arrows');\n\n        return (\n            measureRenderedWidth(headerLabelElement) +\n            (sortArrowsElement ? measureRenderedWidth(sortArrowsElement) : 0) +\n            (sortArrowsElement ? resolveFlexGapWidth(element.querySelector<HTMLElement>('.table-head-button')) : 0)\n        );\n    }\n\n    const contentElement =\n        element.querySelector<HTMLElement>('.table-cell-content, .table-head-button-label') ?? element;\n\n    return contentElement.scrollWidth;\n};\n\nexport const stabilizeMeasuredColumnMaxWidths = (\n    previousMeasuredColumnMaxWidths: Record<string, string>,\n    nextMeasuredColumnMaxWidths: Record<string, string>\n) =>\n    Object.fromEntries(\n        Object.entries(nextMeasuredColumnMaxWidths).map(([columnKey, nextMeasuredWidth]) => {\n            const previousMeasuredWidth = previousMeasuredColumnMaxWidths[columnKey];\n            const previousMeasuredWidthPx = parsePixelWidth(previousMeasuredWidth);\n            const nextMeasuredWidthPx = parsePixelWidth(nextMeasuredWidth);\n\n            return [\n                columnKey,\n                previousMeasuredWidthPx !== undefined &&\n                nextMeasuredWidthPx !== undefined &&\n                Math.abs(previousMeasuredWidthPx - nextMeasuredWidthPx) <= MEASURED_WIDTH_JITTER_TOLERANCE_PX\n                    ? previousMeasuredWidth\n                    : nextMeasuredWidth,\n            ];\n        })\n    );\n\ntype UseMeasuredColumnMaxWidthsProps<RowType extends TableRowData> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    tableWrapperRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const useMeasuredColumnMaxWidths = <RowType extends TableRowData>(\n    props: UseMeasuredColumnMaxWidthsProps<RowType>\n) => {\n    const { columns, enabled, tableWrapperRef } = props;\n    const [measuredColumnMaxWidths, setMeasuredColumnMaxWidths] = useState<Record<string, string>>({});\n    const previousMeasuredWidthsRef = useRef('');\n    const previousMeasuredColumnMaxWidthsRef = useRef<Record<string, string>>({});\n    const columnsSignature = useMemo(\n        () =>\n            columns\n                .map(column => `${column.key}:${column.width === undefined ? 'auto' : String(column.width)}`)\n                .join('|'),\n        [columns]\n    );\n\n    useLayoutEffect(() => {\n        const wrapperElement = tableWrapperRef.current;\n\n        if (!enabled || !wrapperElement) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        if (columns.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const columnsWithoutWidth = columns.filter(column => column.width === undefined);\n\n        if (columnsWithoutWidth.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const measureColumnMaxWidths = () => {\n            const columnElements = Array.from(wrapperElement.querySelectorAll<HTMLElement>('[data-column]'));\n            const nextMeasuredColumnMaxWidths = Object.fromEntries(\n                columnsWithoutWidth.flatMap(column => {\n                    const matchingElements = columnElements.filter(element => element.dataset.column === column.key);\n                    const measuredWidth = matchingElements.reduce(\n                        (largestWidth, element) => Math.max(largestWidth, measureColumnContentWidth(element)),\n                        0\n                    );\n\n                    return measuredWidth > 0 ? [[column.key, `${Math.ceil(measuredWidth)}px`]] : [];\n                })\n            );\n            const stabilizedMeasuredColumnMaxWidths = stabilizeMeasuredColumnMaxWidths(\n                previousMeasuredColumnMaxWidthsRef.current,\n                nextMeasuredColumnMaxWidths\n            );\n            const serializedMeasuredWidths = JSON.stringify(stabilizedMeasuredColumnMaxWidths);\n\n            if (serializedMeasuredWidths !== previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = serializedMeasuredWidths;\n                previousMeasuredColumnMaxWidthsRef.current = stabilizedMeasuredColumnMaxWidths;\n                setMeasuredColumnMaxWidths(stabilizedMeasuredColumnMaxWidths);\n            }\n        };\n\n        measureColumnMaxWidths();\n\n        const observedElements = [\n            wrapperElement,\n            ...Array.from(\n                wrapperElement.querySelectorAll<HTMLElement>(\n                    '.table-head, .table-body, .table-footer, .table-scroll-content'\n                )\n            ),\n        ];\n        const resizeObserver = new ResizeObserver(() => {\n            measureColumnMaxWidths();\n        });\n\n        observedElements.forEach(element => {\n            resizeObserver.observe(element);\n        });\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, [columnsSignature, enabled, tableWrapperRef]);\n\n    return measuredColumnMaxWidths;\n};\n"],"names":["MEASURED_WIDTH_JITTER_TOLERANCE_PX","parsePixelWidth","width","match","measureRenderedWidth","element","renderedWidth","resolveFlexGapWidth","styles","gap","measureColumnContentWidth","headerLabelElement","sortArrowsElement","stabilizeMeasuredColumnMaxWidths","previousMeasuredColumnMaxWidths","nextMeasuredColumnMaxWidths","columnKey","nextMeasuredWidth","previousMeasuredWidth","previousMeasuredWidthPx","nextMeasuredWidthPx","useMeasuredColumnMaxWidths","props","columns","enabled","tableWrapperRef","measuredColumnMaxWidths","setMeasuredColumnMaxWidths","useState","previousMeasuredWidthsRef","useRef","previousMeasuredColumnMaxWidthsRef","columnsSignature","useMemo","column","useLayoutEffect","wrapperElement","columnsWithoutWidth","measureColumnMaxWidths","columnElements","measuredWidth","largestWidth","stabilizedMeasuredColumnMaxWidths","serializedMeasuredWidths","observedElements","resizeObserver"],"mappings":";AAIA,MAAMA,IAAqC,GAErCC,IAAkB,CAACC,MAAmB;AACxC,QAAMC,IAAQD,GAAO,KAAA,EAAO,MAAM,uBAAuB;AAEzD,SAAOC,IAAQ,OAAOA,EAAM,CAAC,CAAC,IAAI;AACtC,GAEMC,IAAuB,CAACC,MAAyB;AACnD,QAAMC,IAAgBD,EAAQ,sBAAA,EAAwB;AAEtD,SAAOC,IAAgB,IAAI,KAAK,KAAKA,CAAa,IAAID,EAAQ;AAClE,GAEME,IAAsB,CAACF,MAAgC;AACzD,MAAI,CAACA;AACD,WAAO;AAGX,QAAMG,IAAS,OAAO,iBAAiBH,CAAO,GACxCI,IAAM,OAAO,WAAWD,EAAO,aAAaA,EAAO,OAAO,GAAG;AAEnE,SAAO,OAAO,SAASC,CAAG,IAAI,KAAK,KAAKA,CAAG,IAAI;AACnD,GAEMC,IAA4B,CAACL,MAAyB;AACxD,QAAMM,IAAqBN,EAAQ,cAA2B,mBAAmB;AAEjF,MAAIM,GAAoB;AACpB,UAAMC,IAAoBP,EAAQ,cAA2B,cAAc;AAE3E,WACID,EAAqBO,CAAkB,KACtCC,IAAoBR,EAAqBQ,CAAiB,IAAI,MAC9DA,IAAoBL,EAAoBF,EAAQ,cAA2B,oBAAoB,CAAC,IAAI;AAAA,EAE7G;AAKA,UAFIA,EAAQ,cAA2B,+CAA+C,KAAKA,GAErE;AAC1B,GAEaQ,IAAmC,CAC5CC,GACAC,MAEA,OAAO;AAAA,EACH,OAAO,QAAQA,CAA2B,EAAE,IAAI,CAAC,CAACC,GAAWC,CAAiB,MAAM;AAChF,UAAMC,IAAwBJ,EAAgCE,CAAS,GACjEG,IAA0BlB,EAAgBiB,CAAqB,GAC/DE,IAAsBnB,EAAgBgB,CAAiB;AAE7D,WAAO;AAAA,MACHD;AAAA,MACAG,MAA4B,UAC5BC,MAAwB,UACxB,KAAK,IAAID,IAA0BC,CAAmB,KAAKpB,IACrDkB,IACAD;AAAA,IAAA;AAAA,EAEd,CAAC;AACL,GAQSI,IAA6B,CACtCC,MACC;AACD,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,iBAAAC,EAAA,IAAoBH,GACxC,CAACI,GAAyBC,CAA0B,IAAIC,EAAiC,CAAA,CAAE,GAC3FC,IAA4BC,EAAO,EAAE,GACrCC,IAAqCD,EAA+B,EAAE,GACtEE,IAAmBC;AAAA,IACrB,MACIV,EACK,IAAI,OAAU,GAAGW,EAAO,GAAG,IAAIA,EAAO,UAAU,SAAY,SAAS,OAAOA,EAAO,KAAK,CAAC,EAAE,EAC3F,KAAK,GAAG;AAAA,IACjB,CAACX,CAAO;AAAA,EAAA;AAGZ,SAAAY,EAAgB,MAAM;AAClB,UAAMC,IAAiBX,EAAgB;AAEvC,QAAI,CAACD,KAAW,CAACY,GAAgB;AAC7B,MAAIP,EAA0B,YAC1BA,EAA0B,UAAU,IACpCE,EAAmC,UAAU,CAAA,GAC7CJ,EAA2B,CAAA,CAAE;AAGjC;AAAA,IACJ;AAEA,QAAIJ,EAAQ,WAAW,GAAG;AACtB,MAAIM,EAA0B,YAC1BA,EAA0B,UAAU,IACpCE,EAAmC,UAAU,CAAA,GAC7CJ,EAA2B,CAAA,CAAE;AAGjC;AAAA,IACJ;AAEA,UAAMU,IAAsBd,EAAQ,OAAO,CAAAW,MAAUA,EAAO,UAAU,MAAS;AAE/E,QAAIG,EAAoB,WAAW,GAAG;AAClC,MAAIR,EAA0B,YAC1BA,EAA0B,UAAU,IACpCE,EAAmC,UAAU,CAAA,GAC7CJ,EAA2B,CAAA,CAAE;AAGjC;AAAA,IACJ;AAEA,UAAMW,IAAyB,MAAM;AACjC,YAAMC,IAAiB,MAAM,KAAKH,EAAe,iBAA8B,eAAe,CAAC,GACzFrB,IAA8B,OAAO;AAAA,QACvCsB,EAAoB,QAAQ,CAAAH,MAAU;AAElC,gBAAMM,IADmBD,EAAe,OAAO,CAAAlC,MAAWA,EAAQ,QAAQ,WAAW6B,EAAO,GAAG,EACxD;AAAA,YACnC,CAACO,GAAcpC,MAAY,KAAK,IAAIoC,GAAc/B,EAA0BL,CAAO,CAAC;AAAA,YACpF;AAAA,UAAA;AAGJ,iBAAOmC,IAAgB,IAAI,CAAC,CAACN,EAAO,KAAK,GAAG,KAAK,KAAKM,CAAa,CAAC,IAAI,CAAC,IAAI,CAAA;AAAA,QACjF,CAAC;AAAA,MAAA,GAECE,IAAoC7B;AAAA,QACtCkB,EAAmC;AAAA,QACnChB;AAAA,MAAA,GAEE4B,IAA2B,KAAK,UAAUD,CAAiC;AAEjF,MAAIC,MAA6Bd,EAA0B,YACvDA,EAA0B,UAAUc,GACpCZ,EAAmC,UAAUW,GAC7Cf,EAA2Be,CAAiC;AAAA,IAEpE;AAEA,IAAAJ,EAAA;AAEA,UAAMM,IAAmB;AAAA,MACrBR;AAAA,MACA,GAAG,MAAM;AAAA,QACLA,EAAe;AAAA,UACX;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAEES,IAAiB,IAAI,eAAe,MAAM;AAC5C,MAAAP,EAAA;AAAA,IACJ,CAAC;AAED,WAAAM,EAAiB,QAAQ,CAAAvC,MAAW;AAChC,MAAAwC,EAAe,QAAQxC,CAAO;AAAA,IAClC,CAAC,GAEM,MAAM;AACT,MAAAwC,EAAe,WAAA;AAAA,IACnB;AAAA,EACJ,GAAG,CAACb,GAAkBR,GAASC,CAAe,CAAC,GAExCC;AACX;"}
+{"version":3,"file":"useMeasuredColumnMaxWidths.js","sources":["../../../../src/components/table/layout/useMeasuredColumnMaxWidths.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from 'react';\n\nimport useResizeObserver from '../../../useResizeObserver';\nimport type { TableColumnDefinition, TableRowData } from '../Table.types';\n\nconst MEASURED_WIDTH_JITTER_TOLERANCE_PX = 1;\n\nconst parsePixelWidth = (width?: string) => {\n    const match = width?.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    return match ? Number(match[1]) : undefined;\n};\n\nconst measureRenderedWidth = (element: HTMLElement) => {\n    const renderedWidth = element.getBoundingClientRect().width;\n\n    return renderedWidth > 0 ? Math.ceil(renderedWidth) : element.scrollWidth;\n};\n\nconst resolveFlexGapWidth = (element: HTMLElement | null) => {\n    if (!element) {\n        return 0;\n    }\n\n    const styles = window.getComputedStyle(element);\n    const gap = Number.parseFloat(styles.columnGap || styles.gap || '0');\n\n    return Number.isFinite(gap) ? Math.ceil(gap) : 0;\n};\n\nconst measureColumnContentWidth = (element: HTMLElement) => {\n    const headerLabelElement = element.querySelector<HTMLElement>('.table-head-label');\n\n    if (headerLabelElement) {\n        const sortArrowsElement = element.querySelector<HTMLElement>('.sort-arrows');\n\n        return (\n            measureRenderedWidth(headerLabelElement) +\n            (sortArrowsElement ? measureRenderedWidth(sortArrowsElement) : 0) +\n            (sortArrowsElement ? resolveFlexGapWidth(element.querySelector<HTMLElement>('.table-head-button')) : 0)\n        );\n    }\n\n    const contentElement =\n        element.querySelector<HTMLElement>('.table-cell-content, .table-head-button-label') ?? element;\n\n    return contentElement.scrollWidth;\n};\n\nexport const stabilizeMeasuredColumnMaxWidths = (\n    previousMeasuredColumnMaxWidths: Record<string, string>,\n    nextMeasuredColumnMaxWidths: Record<string, string>\n) =>\n    Object.fromEntries(\n        Object.entries(nextMeasuredColumnMaxWidths).map(([columnKey, nextMeasuredWidth]) => {\n            const previousMeasuredWidth = previousMeasuredColumnMaxWidths[columnKey];\n            const previousMeasuredWidthPx = parsePixelWidth(previousMeasuredWidth);\n            const nextMeasuredWidthPx = parsePixelWidth(nextMeasuredWidth);\n\n            return [\n                columnKey,\n                previousMeasuredWidthPx !== undefined &&\n                nextMeasuredWidthPx !== undefined &&\n                Math.abs(previousMeasuredWidthPx - nextMeasuredWidthPx) <= MEASURED_WIDTH_JITTER_TOLERANCE_PX\n                    ? previousMeasuredWidth\n                    : nextMeasuredWidth,\n            ];\n        })\n    );\n\ntype UseMeasuredColumnMaxWidthsProps<RowType extends TableRowData> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    tableWrapperRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const useMeasuredColumnMaxWidths = <RowType extends TableRowData>(\n    props: UseMeasuredColumnMaxWidthsProps<RowType>\n) => {\n    const { columns, enabled, tableWrapperRef } = props;\n    const [measuredColumnMaxWidths, setMeasuredColumnMaxWidths] = useState<Record<string, string>>({});\n    const previousMeasuredWidthsRef = useRef('');\n    const previousMeasuredColumnMaxWidthsRef = useRef<Record<string, string>>({});\n    const columnsSignature = useMemo(\n        () =>\n            columns\n                .map(column => `${column.key}:${column.width === undefined ? 'auto' : String(column.width)}`)\n                .join('|'),\n        [columns]\n    );\n    const wrapperElement = tableWrapperRef.current;\n    const tableHeadElement = wrapperElement?.querySelector<HTMLDivElement>('.table-head') ?? null;\n    const tableBodyElement = wrapperElement?.querySelector<HTMLDivElement>('.table-body') ?? null;\n    const tableFooterElement = wrapperElement?.querySelector<HTMLDivElement>('.table-footer') ?? null;\n    const tableScrollContentElement = wrapperElement?.querySelector<HTMLDivElement>('.table-scroll-content') ?? null;\n    const [, , wrapperSize] = useResizeObserver(wrapperElement);\n    const [, , tableHeadSize] = useResizeObserver(tableHeadElement);\n    const [, , tableBodySize] = useResizeObserver(tableBodyElement);\n    const [, , tableFooterSize] = useResizeObserver(tableFooterElement);\n    const [, , tableScrollContentSize] = useResizeObserver(tableScrollContentElement);\n\n    useLayoutEffect(() => {\n        if (!enabled || !wrapperElement) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        if (columns.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const columnsWithoutWidth = columns.filter(column => column.width === undefined);\n\n        if (columnsWithoutWidth.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const measureColumnMaxWidths = () => {\n            const columnElements = Array.from(wrapperElement.querySelectorAll<HTMLElement>('[data-column]'));\n            const nextMeasuredColumnMaxWidths = Object.fromEntries(\n                columnsWithoutWidth.flatMap(column => {\n                    const matchingElements = columnElements.filter(element => element.dataset.column === column.key);\n                    const measuredWidth = matchingElements.reduce(\n                        (largestWidth, element) => Math.max(largestWidth, measureColumnContentWidth(element)),\n                        0\n                    );\n\n                    return measuredWidth > 0 ? [[column.key, `${Math.ceil(measuredWidth)}px`]] : [];\n                })\n            );\n            const stabilizedMeasuredColumnMaxWidths = stabilizeMeasuredColumnMaxWidths(\n                previousMeasuredColumnMaxWidthsRef.current,\n                nextMeasuredColumnMaxWidths\n            );\n            const serializedMeasuredWidths = JSON.stringify(stabilizedMeasuredColumnMaxWidths);\n\n            if (serializedMeasuredWidths !== previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = serializedMeasuredWidths;\n                previousMeasuredColumnMaxWidthsRef.current = stabilizedMeasuredColumnMaxWidths;\n                setMeasuredColumnMaxWidths(stabilizedMeasuredColumnMaxWidths);\n            }\n        };\n\n        measureColumnMaxWidths();\n    }, [\n        columnsSignature,\n        enabled,\n        wrapperElement,\n        wrapperSize.blockSize,\n        wrapperSize.inlineSize,\n        tableHeadSize.blockSize,\n        tableHeadSize.inlineSize,\n        tableBodySize.blockSize,\n        tableBodySize.inlineSize,\n        tableFooterSize.blockSize,\n        tableFooterSize.inlineSize,\n        tableScrollContentSize.blockSize,\n        tableScrollContentSize.inlineSize,\n    ]);\n\n    return measuredColumnMaxWidths;\n};\n"],"names":["MEASURED_WIDTH_JITTER_TOLERANCE_PX","parsePixelWidth","width","match","measureRenderedWidth","element","renderedWidth","resolveFlexGapWidth","styles","gap","measureColumnContentWidth","headerLabelElement","sortArrowsElement","stabilizeMeasuredColumnMaxWidths","previousMeasuredColumnMaxWidths","nextMeasuredColumnMaxWidths","columnKey","nextMeasuredWidth","previousMeasuredWidth","previousMeasuredWidthPx","nextMeasuredWidthPx","useMeasuredColumnMaxWidths","props","columns","enabled","tableWrapperRef","measuredColumnMaxWidths","setMeasuredColumnMaxWidths","useState","previousMeasuredWidthsRef","useRef","previousMeasuredColumnMaxWidthsRef","columnsSignature","useMemo","column","wrapperElement","tableHeadElement","tableBodyElement","tableFooterElement","tableScrollContentElement","wrapperSize","useResizeObserver","tableHeadSize","tableBodySize","tableFooterSize","tableScrollContentSize","useLayoutEffect","columnsWithoutWidth","columnElements","measuredWidth","largestWidth","stabilizedMeasuredColumnMaxWidths","serializedMeasuredWidths"],"mappings":";;AAKA,MAAMA,IAAqC,GAErCC,IAAkB,CAACC,MAAmB;AACxC,QAAMC,IAAQD,GAAO,KAAA,EAAO,MAAM,uBAAuB;AAEzD,SAAOC,IAAQ,OAAOA,EAAM,CAAC,CAAC,IAAI;AACtC,GAEMC,IAAuB,CAACC,MAAyB;AACnD,QAAMC,IAAgBD,EAAQ,sBAAA,EAAwB;AAEtD,SAAOC,IAAgB,IAAI,KAAK,KAAKA,CAAa,IAAID,EAAQ;AAClE,GAEME,IAAsB,CAACF,MAAgC;AACzD,MAAI,CAACA;AACD,WAAO;AAGX,QAAMG,IAAS,OAAO,iBAAiBH,CAAO,GACxCI,IAAM,OAAO,WAAWD,EAAO,aAAaA,EAAO,OAAO,GAAG;AAEnE,SAAO,OAAO,SAASC,CAAG,IAAI,KAAK,KAAKA,CAAG,IAAI;AACnD,GAEMC,IAA4B,CAACL,MAAyB;AACxD,QAAMM,IAAqBN,EAAQ,cAA2B,mBAAmB;AAEjF,MAAIM,GAAoB;AACpB,UAAMC,IAAoBP,EAAQ,cAA2B,cAAc;AAE3E,WACID,EAAqBO,CAAkB,KACtCC,IAAoBR,EAAqBQ,CAAiB,IAAI,MAC9DA,IAAoBL,EAAoBF,EAAQ,cAA2B,oBAAoB,CAAC,IAAI;AAAA,EAE7G;AAKA,UAFIA,EAAQ,cAA2B,+CAA+C,KAAKA,GAErE;AAC1B,GAEaQ,IAAmC,CAC5CC,GACAC,MAEA,OAAO;AAAA,EACH,OAAO,QAAQA,CAA2B,EAAE,IAAI,CAAC,CAACC,GAAWC,CAAiB,MAAM;AAChF,UAAMC,IAAwBJ,EAAgCE,CAAS,GACjEG,IAA0BlB,EAAgBiB,CAAqB,GAC/DE,IAAsBnB,EAAgBgB,CAAiB;AAE7D,WAAO;AAAA,MACHD;AAAA,MACAG,MAA4B,UAC5BC,MAAwB,UACxB,KAAK,IAAID,IAA0BC,CAAmB,KAAKpB,IACrDkB,IACAD;AAAA,IAAA;AAAA,EAEd,CAAC;AACL,GAQSI,IAA6B,CACtCC,MACC;AACD,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,iBAAAC,EAAA,IAAoBH,GACxC,CAACI,GAAyBC,CAA0B,IAAIC,EAAiC,CAAA,CAAE,GAC3FC,IAA4BC,EAAO,EAAE,GACrCC,IAAqCD,EAA+B,EAAE,GACtEE,IAAmBC;AAAA,IACrB,MACIV,EACK,IAAI,OAAU,GAAGW,EAAO,GAAG,IAAIA,EAAO,UAAU,SAAY,SAAS,OAAOA,EAAO,KAAK,CAAC,EAAE,EAC3F,KAAK,GAAG;AAAA,IACjB,CAACX,CAAO;AAAA,EAAA,GAENY,IAAiBV,EAAgB,SACjCW,IAAmBD,GAAgB,cAA8B,aAAa,KAAK,MACnFE,IAAmBF,GAAgB,cAA8B,aAAa,KAAK,MACnFG,IAAqBH,GAAgB,cAA8B,eAAe,KAAK,MACvFI,IAA4BJ,GAAgB,cAA8B,uBAAuB,KAAK,MACtG,KAAKK,CAAW,IAAIC,EAAkBN,CAAc,GACpD,KAAKO,CAAa,IAAID,EAAkBL,CAAgB,GACxD,KAAKO,CAAa,IAAIF,EAAkBJ,CAAgB,GACxD,KAAKO,CAAe,IAAIH,EAAkBH,CAAkB,GAC5D,KAAKO,CAAsB,IAAIJ,EAAkBF,CAAyB;AAEhF,SAAAO,EAAgB,MAAM;AAClB,QAAI,CAACtB,KAAW,CAACW,GAAgB;AAC7B,MAAIN,EAA0B,YAC1BA,EAA0B,UAAU,IACpCE,EAAmC,UAAU,CAAA,GAC7CJ,EAA2B,CAAA,CAAE;AAGjC;AAAA,IACJ;AAEA,QAAIJ,EAAQ,WAAW,GAAG;AACtB,MAAIM,EAA0B,YAC1BA,EAA0B,UAAU,IACpCE,EAAmC,UAAU,CAAA,GAC7CJ,EAA2B,CAAA,CAAE;AAGjC;AAAA,IACJ;AAEA,UAAMoB,IAAsBxB,EAAQ,OAAO,CAAAW,MAAUA,EAAO,UAAU,MAAS;AAE/E,QAAIa,EAAoB,WAAW,GAAG;AAClC,MAAIlB,EAA0B,YAC1BA,EAA0B,UAAU,IACpCE,EAAmC,UAAU,CAAA,GAC7CJ,EAA2B,CAAA,CAAE;AAGjC;AAAA,IACJ;AA4BA,KA1B+B,MAAM;AACjC,YAAMqB,IAAiB,MAAM,KAAKb,EAAe,iBAA8B,eAAe,CAAC,GACzFpB,IAA8B,OAAO;AAAA,QACvCgC,EAAoB,QAAQ,CAAAb,MAAU;AAElC,gBAAMe,IADmBD,EAAe,OAAO,CAAA3C,MAAWA,EAAQ,QAAQ,WAAW6B,EAAO,GAAG,EACxD;AAAA,YACnC,CAACgB,GAAc7C,MAAY,KAAK,IAAI6C,GAAcxC,EAA0BL,CAAO,CAAC;AAAA,YACpF;AAAA,UAAA;AAGJ,iBAAO4C,IAAgB,IAAI,CAAC,CAACf,EAAO,KAAK,GAAG,KAAK,KAAKe,CAAa,CAAC,IAAI,CAAC,IAAI,CAAA;AAAA,QACjF,CAAC;AAAA,MAAA,GAECE,IAAoCtC;AAAA,QACtCkB,EAAmC;AAAA,QACnChB;AAAA,MAAA,GAEEqC,IAA2B,KAAK,UAAUD,CAAiC;AAEjF,MAAIC,MAA6BvB,EAA0B,YACvDA,EAA0B,UAAUuB,GACpCrB,EAAmC,UAAUoB,GAC7CxB,EAA2BwB,CAAiC;AAAA,IAEpE,GAEA;AAAA,EACJ,GAAG;AAAA,IACCnB;AAAA,IACAR;AAAA,IACAW;AAAA,IACAK,EAAY;AAAA,IACZA,EAAY;AAAA,IACZE,EAAc;AAAA,IACdA,EAAc;AAAA,IACdC,EAAc;AAAA,IACdA,EAAc;AAAA,IACdC,EAAgB;AAAA,IAChBA,EAAgB;AAAA,IAChBC,EAAuB;AAAA,IACvBA,EAAuB;AAAA,EAAA,CAC1B,GAEMnB;AACX;"}