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

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/TableLayoutContext.d.ts

@@ -15,6 +15,7 @@ export type TableLayoutContextValue = {
     lastResizableColumnKey?: string;
     resettableColumnKeys?: Set<string>;
     stickyLeftColumnCount?: number;
+    stickyRightColumnCount?: number;
     stickyFooter?: boolean;
     onColumnDragEnd?: (event: DragEndEvent) => void;
     onColumnResizeReset?: (columnKey: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"TableLayoutContext.js","sources":["../../../../src/components/table/context/TableLayoutContext.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    type PointerEvent as ReactPointerEvent,\n    type RefObject,\n    type UIEvent as ReactUIEvent,\n} from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\n/**\n * Layout and column-behavior context.\n *\n * This groups scroll synchronization, sticky-column metadata, and drag/resize\n * callbacks so header/footer/cell components do not need the full render model\n * just to participate in layout behavior.\n */\nexport type TableLayoutContextValue = {\n    handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;\n    tableHeadRowRef: RefObject<HTMLDivElement>;\n    tableFooterRowRef: RefObject<HTMLDivElement>;\n    draggableColumnKeys?: string[];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys?: Set<string>;\n    stickyLeftColumnCount?: number;\n    stickyFooter?: boolean;\n    onColumnDragEnd?: (event: DragEndEvent) => void;\n    onColumnResizeReset?: (columnKey: string) => void;\n    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;\n};\n\nexport const TableLayoutContext = createContext<TableLayoutContextValue | null>(null);\n\nexport const useOptionalTableLayoutContext = () => useContext(TableLayoutContext);\n\nexport const useTableLayoutContext = () => {\n    const context = useOptionalTableLayoutContext();\n\n    if (!context) {\n        throw new Error('Table layout context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableLayoutContext","createContext","useOptionalTableLayoutContext","useContext"],"mappings":";AA8BO,MAAMA,IAAqBC,EAA8C,IAAI,GAEvEC,IAAgC,MAAMC,EAAWH,CAAkB;"}
+{"version":3,"file":"TableLayoutContext.js","sources":["../../../../src/components/table/context/TableLayoutContext.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    type PointerEvent as ReactPointerEvent,\n    type RefObject,\n    type UIEvent as ReactUIEvent,\n} from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\n\n/**\n * Layout and column-behavior context.\n *\n * This groups scroll synchronization, sticky-column metadata, and drag/resize\n * callbacks so header/footer/cell components do not need the full render model\n * just to participate in layout behavior.\n */\nexport type TableLayoutContextValue = {\n    handleBodyScroll?: (event: ReactUIEvent<HTMLElement> | undefined) => void;\n    tableHeadRowRef: RefObject<HTMLDivElement>;\n    tableFooterRowRef: RefObject<HTMLDivElement>;\n    draggableColumnKeys?: string[];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys?: Set<string>;\n    stickyLeftColumnCount?: number;\n    stickyRightColumnCount?: number;\n    stickyFooter?: boolean;\n    onColumnDragEnd?: (event: DragEndEvent) => void;\n    onColumnResizeReset?: (columnKey: string) => void;\n    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;\n};\n\nexport const TableLayoutContext = createContext<TableLayoutContextValue | null>(null);\n\nexport const useOptionalTableLayoutContext = () => useContext(TableLayoutContext);\n\nexport const useTableLayoutContext = () => {\n    const context = useOptionalTableLayoutContext();\n\n    if (!context) {\n        throw new Error('Table layout context is missing.');\n    }\n\n    return context;\n};\n"],"names":["TableLayoutContext","createContext","useOptionalTableLayoutContext","useContext"],"mappings":";AA+BO,MAAMA,IAAqBC,EAA8C,IAAI,GAEvEC,IAAgC,MAAMC,EAAWH,CAAkB;"}

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/useHorizontalSectionSync.d.ts

@@ -6,7 +6,8 @@ type UseHorizontalSectionSyncProps = {
 };
 export declare const useHorizontalSectionSync: ({ enabled, hasFooterCells }: UseHorizontalSectionSyncProps) => {
     handleBodyScroll: (event: UIEvent<HTMLElement> | undefined) => void;
-    hasHorizontalScrollOffset: boolean;
+    hasHorizontalScrollEndOffset: boolean;
+    hasHorizontalScrollStartOffset: boolean;
     tableFooterRowRef: import('react').RefObject<HTMLDivElement>;
     tableHeadRowRef: import('react').RefObject<HTMLDivElement>;
 };

package/components/table/layout/useHorizontalSectionSync.js

@@ -1,43 +1,44 @@
-import { useRef as a, useState as p, useCallback as i, useEffect as y } from "react";
-const m = "table-horizontal-scroll", R = (t) => {
-  const e = t?.currentTarget;
-  if (e && "scrollLeft" in e)
-    return e.scrollLeft;
-  const o = t?.target;
-  return o && "scrollLeft" in o ? o.scrollLeft : 0;
-}, H = ({ enabled: t, hasFooterCells: e = !0 }) => {
-  const o = a(null), n = a(null), l = a(0), [L, u] = p(!1), s = i(
-    (c) => {
-      const r = (f) => {
-        if (f) {
-          if (c === 0) {
-            f.style.removeProperty("transform");
+import { useRef as f, useState as S, useCallback as m, useEffect as g } from "react";
+const h = "table-horizontal-scroll", R = (r) => {
+  const o = r?.currentTarget;
+  if (o && "scrollLeft" in o)
+    return o.scrollLeft;
+  const e = r?.target;
+  return e && "scrollLeft" in e ? e.scrollLeft : 0;
+}, z = ({ enabled: r, hasFooterCells: o = !0 }) => {
+  const e = f(null), c = f(null), a = f(0), [L, i] = S(!1), [H, u] = S(!1), l = m(
+    (s) => {
+      const n = (t) => {
+        if (t) {
+          if (s === 0) {
+            t.style.removeProperty("transform");
             return;
           }
-          f.style.transform = `translateX(-${c}px)`;
+          t.style.transform = `translateX(-${s}px)`;
         }
       };
-      r(o.current), e ? r(n.current) : n.current && n.current.style.removeProperty("transform");
+      n(e.current), o ? n(c.current) : c.current && c.current.style.removeProperty("transform");
     },
-    [e]
-  ), S = i(
-    (c) => {
-      const r = R(c);
-      u(r > 0), t && s(r), r !== l.current && (l.current = r, window.dispatchEvent(new CustomEvent(m)));
+    [o]
+  ), p = m(
+    (s) => {
+      const n = s?.currentTarget, t = R(s), y = n ? Math.max(n.scrollWidth - n.clientWidth, 0) : 0, E = Math.max(y - t, 0);
+      i(t > 0), u(E > 1), r && l(t), t !== a.current && (a.current = t, window.dispatchEvent(new CustomEvent(h)));
     },
-    [t, s]
+    [r, l]
   );
-  return y(() => {
-    t || (l.current = 0, u(!1), s(0));
-  }, [t, s]), {
-    handleBodyScroll: S,
-    hasHorizontalScrollOffset: L,
-    tableFooterRowRef: n,
-    tableHeadRowRef: o
+  return g(() => {
+    r || (a.current = 0, i(!1), u(!1), l(0));
+  }, [r, l]), {
+    handleBodyScroll: p,
+    hasHorizontalScrollEndOffset: H,
+    hasHorizontalScrollStartOffset: L,
+    tableFooterRowRef: c,
+    tableHeadRowRef: e
   };
 };
 export {
-  m as TABLE_HORIZONTAL_SCROLL_EVENT,
-  H as useHorizontalSectionSync
+  h as TABLE_HORIZONTAL_SCROLL_EVENT,
+  z as useHorizontalSectionSync
 };
 //# sourceMappingURL=useHorizontalSectionSync.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type UIEvent } from 'react';\n\nexport const TABLE_HORIZONTAL_SCROLL_EVENT = 'table-horizontal-scroll';\n\nconst getScrollLeftFromEvent = (event: UIEvent<HTMLElement> | undefined) => {\n    const currentTarget = event?.currentTarget;\n\n    if (currentTarget && 'scrollLeft' in currentTarget) {\n        return (currentTarget as HTMLElement).scrollLeft;\n    }\n\n    const target = event?.target;\n\n    if (target && 'scrollLeft' in target) {\n        return (target as HTMLElement).scrollLeft;\n    }\n\n    return 0;\n};\n\ntype UseHorizontalSectionSyncProps = {\n    enabled: boolean;\n    hasFooterCells?: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled, hasFooterCells = true }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n    const [hasHorizontalScrollOffset, setHasHorizontalScrollOffset] = useState(false);\n\n    const syncHorizontalSections = useCallback(\n        (scrollLeft: number) => {\n            const applyTransform = (element: HTMLDivElement | null) => {\n                if (!element) {\n                    return;\n                }\n\n                if (scrollLeft === 0) {\n                    element.style.removeProperty('transform');\n                    return;\n                }\n\n                element.style.transform = `translateX(-${scrollLeft}px)`;\n            };\n\n            applyTransform(tableHeadRowRef.current);\n\n            if (hasFooterCells) {\n                applyTransform(tableFooterRowRef.current);\n            } else if (tableFooterRowRef.current) {\n                tableFooterRowRef.current.style.removeProperty('transform');\n            }\n        },\n        [hasFooterCells]\n    );\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const scrollLeft = getScrollLeftFromEvent(event);\n            setHasHorizontalScrollOffset(scrollLeft > 0);\n\n            if (enabled) {\n                syncHorizontalSections(scrollLeft);\n            }\n\n            if (scrollLeft !== previousScrollLeftRef.current) {\n                previousScrollLeftRef.current = scrollLeft;\n                window.dispatchEvent(new CustomEvent(TABLE_HORIZONTAL_SCROLL_EVENT));\n            }\n        },\n        [enabled, syncHorizontalSections]\n    );\n\n    useEffect(() => {\n        if (!enabled) {\n            previousScrollLeftRef.current = 0;\n            setHasHorizontalScrollOffset(false);\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        hasHorizontalScrollOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","hasFooterCells","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","hasHorizontalScrollOffset","setHasHorizontalScrollOffset","useState","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","useEffect"],"mappings":";AAEO,MAAMA,IAAgC,2BAEvCC,IAAyB,CAACC,MAA4C;AACxE,QAAMC,IAAgBD,GAAO;AAE7B,MAAIC,KAAiB,gBAAgBA;AACjC,WAAQA,EAA8B;AAG1C,QAAMC,IAASF,GAAO;AAEtB,SAAIE,KAAU,gBAAgBA,IAClBA,EAAuB,aAG5B;AACX,GAOaC,IAA2B,CAAC,EAAE,SAAAC,GAAS,gBAAAC,IAAiB,SAA0C;AAC3G,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAChC,CAACG,GAA2BC,CAA4B,IAAIC,EAAS,EAAK,GAE1EC,IAAyBC;AAAA,IAC3B,CAACC,MAAuB;AACpB,YAAMC,IAAiB,CAACC,MAAmC;AACvD,YAAKA,GAIL;AAAA,cAAIF,MAAe,GAAG;AAClB,YAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,UACJ;AAEA,UAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,MACvD;AAEA,MAAAC,EAAeV,EAAgB,OAAO,GAElCD,IACAW,EAAeR,EAAkB,OAAO,IACjCA,EAAkB,WACzBA,EAAkB,QAAQ,MAAM,eAAe,WAAW;AAAA,IAElE;AAAA,IACA,CAACH,CAAc;AAAA,EAAA,GAGba,IAAmBJ;AAAA,IACrB,CAACd,MAA4C;AACzC,YAAMe,IAAahB,EAAuBC,CAAK;AAC/C,MAAAW,EAA6BI,IAAa,CAAC,GAEvCX,KACAS,EAAuBE,CAAU,GAGjCA,MAAeN,EAAsB,YACrCA,EAAsB,UAAUM,GAChC,OAAO,cAAc,IAAI,YAAYjB,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASS,CAAsB;AAAA,EAAA;AAGpC,SAAAM,EAAU,MAAM;AACZ,IAAKf,MACDK,EAAsB,UAAU,GAChCE,EAA6B,EAAK,GAClCE,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACT,GAASS,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,2BAAAR;AAAA,IACA,mBAAAF;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type UIEvent } from 'react';\n\nexport const TABLE_HORIZONTAL_SCROLL_EVENT = 'table-horizontal-scroll';\n\nconst getScrollLeftFromEvent = (event: UIEvent<HTMLElement> | undefined) => {\n    const currentTarget = event?.currentTarget;\n\n    if (currentTarget && 'scrollLeft' in currentTarget) {\n        return (currentTarget as HTMLElement).scrollLeft;\n    }\n\n    const target = event?.target;\n\n    if (target && 'scrollLeft' in target) {\n        return (target as HTMLElement).scrollLeft;\n    }\n\n    return 0;\n};\n\ntype UseHorizontalSectionSyncProps = {\n    enabled: boolean;\n    hasFooterCells?: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled, hasFooterCells = true }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n\n    const [hasHorizontalScrollStartOffset, setHasHorizontalScrollStartOffset] = useState(false);\n    const [hasHorizontalScrollEndOffset, setHasHorizontalScrollEndOffset] = useState(false);\n\n    const syncHorizontalSections = useCallback(\n        (scrollLeft: number) => {\n            const applyTransform = (element: HTMLDivElement | null) => {\n                if (!element) {\n                    return;\n                }\n\n                if (scrollLeft === 0) {\n                    element.style.removeProperty('transform');\n                    return;\n                }\n\n                element.style.transform = `translateX(-${scrollLeft}px)`;\n            };\n\n            applyTransform(tableHeadRowRef.current);\n\n            if (hasFooterCells) {\n                applyTransform(tableFooterRowRef.current);\n            } else if (tableFooterRowRef.current) {\n                tableFooterRowRef.current.style.removeProperty('transform');\n            }\n        },\n        [hasFooterCells]\n    );\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const currentTarget = event?.currentTarget as HTMLElement | undefined;\n            const scrollLeft = getScrollLeftFromEvent(event);\n            const maxScrollLeft = currentTarget\n                ? Math.max(currentTarget.scrollWidth - currentTarget.clientWidth, 0)\n                : 0;\n            const remainingScrollLeft = Math.max(maxScrollLeft - scrollLeft, 0);\n\n            setHasHorizontalScrollStartOffset(scrollLeft > 0);\n            setHasHorizontalScrollEndOffset(remainingScrollLeft > 1);\n\n            if (enabled) {\n                syncHorizontalSections(scrollLeft);\n            }\n\n            if (scrollLeft !== previousScrollLeftRef.current) {\n                previousScrollLeftRef.current = scrollLeft;\n                window.dispatchEvent(new CustomEvent(TABLE_HORIZONTAL_SCROLL_EVENT));\n            }\n        },\n        [enabled, syncHorizontalSections]\n    );\n\n    useEffect(() => {\n        if (!enabled) {\n            previousScrollLeftRef.current = 0;\n            setHasHorizontalScrollStartOffset(false);\n            setHasHorizontalScrollEndOffset(false);\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","hasFooterCells","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","hasHorizontalScrollStartOffset","setHasHorizontalScrollStartOffset","useState","hasHorizontalScrollEndOffset","setHasHorizontalScrollEndOffset","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","maxScrollLeft","remainingScrollLeft","useEffect"],"mappings":";AAEO,MAAMA,IAAgC,2BAEvCC,IAAyB,CAACC,MAA4C;AACxE,QAAMC,IAAgBD,GAAO;AAE7B,MAAIC,KAAiB,gBAAgBA;AACjC,WAAQA,EAA8B;AAG1C,QAAMC,IAASF,GAAO;AAEtB,SAAIE,KAAU,gBAAgBA,IAClBA,EAAuB,aAG5B;AACX,GAOaC,IAA2B,CAAC,EAAE,SAAAC,GAAS,gBAAAC,IAAiB,SAA0C;AAC3G,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAEhC,CAACG,GAAgCC,CAAiC,IAAIC,EAAS,EAAK,GACpF,CAACC,GAA8BC,CAA+B,IAAIF,EAAS,EAAK,GAEhFG,IAAyBC;AAAA,IAC3B,CAACC,MAAuB;AACpB,YAAMC,IAAiB,CAACC,MAAmC;AACvD,YAAKA,GAIL;AAAA,cAAIF,MAAe,GAAG;AAClB,YAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,UACJ;AAEA,UAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,MACvD;AAEA,MAAAC,EAAeZ,EAAgB,OAAO,GAElCD,IACAa,EAAeV,EAAkB,OAAO,IACjCA,EAAkB,WACzBA,EAAkB,QAAQ,MAAM,eAAe,WAAW;AAAA,IAElE;AAAA,IACA,CAACH,CAAc;AAAA,EAAA,GAGbe,IAAmBJ;AAAA,IACrB,CAAChB,MAA4C;AACzC,YAAMC,IAAgBD,GAAO,eACvBiB,IAAalB,EAAuBC,CAAK,GACzCqB,IAAgBpB,IAChB,KAAK,IAAIA,EAAc,cAAcA,EAAc,aAAa,CAAC,IACjE,GACAqB,IAAsB,KAAK,IAAID,IAAgBJ,GAAY,CAAC;AAElE,MAAAN,EAAkCM,IAAa,CAAC,GAChDH,EAAgCQ,IAAsB,CAAC,GAEnDlB,KACAW,EAAuBE,CAAU,GAGjCA,MAAeR,EAAsB,YACrCA,EAAsB,UAAUQ,GAChC,OAAO,cAAc,IAAI,YAAYnB,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASW,CAAsB;AAAA,EAAA;AAGpC,SAAAQ,EAAU,MAAM;AACZ,IAAKnB,MACDK,EAAsB,UAAU,GAChCE,EAAkC,EAAK,GACvCG,EAAgC,EAAK,GACrCC,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACX,GAASW,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,8BAAAP;AAAA,IACA,gCAAAH;AAAA,IACA,mBAAAF;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}