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

package/components/table/TableGroupRow.js

@@ -1,36 +1,71 @@
-import { jsx as t } from "react/jsx-runtime";
-import b from "../../utils/classNames.js";
-import { useOptionalTableInteractionContext as w } from "./context/TableInteractionContext.js";
-import { useOptionalTableSection as x, useTableBodyContext as g } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as f } from "./context/TableRenderContext.js";
-const v = (s) => {
-  const { children: a, className: c, noHover: i, sticky: d, ...u } = s, o = f(), n = w(), m = x(), r = g();
-  if (!o || !n || o.columns.length === 0 || m !== "body" || !r)
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import T from "../checkbox/Checkbox.js";
+import h from "../../utils/classNames.js";
+import { getVerticalAlignClassName as N } from "./shared/getAlignClassName.js";
+import { useOptionalTableInteractionContext as v } from "./context/TableInteractionContext.js";
+import { useOptionalTableSection as I, useTableBodyContext as A } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as O } from "./context/TableRenderContext.js";
+import { useOptionalTableRenderConfigContext as V } from "./context/TableRenderConfigContext.js";
+const B = (r) => {
+  const { isSelected: c, onToggleSelection: s, selectionCheckboxVerticalAlignment: i } = r;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: h(
+        "table-cell table-selection-cell",
+        N(i)
+      ),
+      role: "cell",
+      "aria-colindex": 1,
+      style: { gridColumn: "1 / span 1", gridRow: "1 / span 1" },
+      onClick: (n) => n.stopPropagation(),
+      onKeyDown: (n) => n.stopPropagation(),
+      children: /* @__PURE__ */ t("div", { className: "table-selection-control", children: /* @__PURE__ */ t(T, { checked: c, onChange: s }) })
+    }
+  );
+}, q = (r) => {
+  const { children: c, className: s, id: i, noHover: n, selectable: m = !1, sticky: b, ...x } = r, g = V(), e = O(), o = v(), f = I(), p = A();
+  if (!e || !g || !o || e.columns.length === 0 || f !== "body" || !p)
     return null;
-  const e = r.nextRowIndex(), p = o.columns.length + (n.showSelectionColumn ? 1 : 0), l = /* @__PURE__ */ t(
+  const a = p.nextRowIndex(), l = i ?? `group-${a}`, u = m && o.selectableRowIdSet.has(l), C = u && o.selectedRowIdSet.has(l), d = o.showSelectionColumn && u, S = e.columns.length + (o.showSelectionColumn && !d ? 1 : 0), y = !!e.renderDraft.bodyMaxHeight, R = d && /* @__PURE__ */ t(
+    B,
+    {
+      isSelected: C,
+      onToggleSelection: () => o.onToggleRowSelection?.(l),
+      selectionCheckboxVerticalAlignment: g.selectionCheckboxVerticalAlignment
+    }
+  ), w = /* @__PURE__ */ k(
     "div",
     {
-      ...u,
-      className: b(
+      ...x,
+      className: h(
         "table-row",
         "table-row-group",
-        d && "table-row-group-sticky",
-        i && "table-row-no-hover",
-        c
+        d && "table-row-group-selectable",
+        b && "table-row-group-sticky",
+        b && y && "table-row-sticky-in-container",
+        C && "table-row-selected",
+        n && "table-row-no-hover",
+        s
       ),
-      "data-index": e,
+      "data-index": a,
+      "data-row-id": String(l),
       role: "row",
-      children: /* @__PURE__ */ t("div", { className: "table-cell table-group-cell", role: "cell", "aria-colspan": p, children: /* @__PURE__ */ t("div", { className: "table-cell-content", children: a }) })
+      children: [
+        R,
+        /* @__PURE__ */ t("div", { className: "table-cell table-group-cell", role: "cell", "aria-colspan": S, children: /* @__PURE__ */ t("div", { className: "table-cell-content", children: c }) })
+      ]
     }
   );
-  return o.renderDraft.bodyRows.push({
-    rowId: `group-${e}`,
-    rowIndex: e,
+  return e.renderDraft.bodyRows.push({
+    rowId: l,
+    rowIndex: a,
     kind: "group",
-    render: () => l
-  }), o.isRegisteringBodyRows ? null : l;
+    selectable: m,
+    render: () => w
+  }), e.isRegisteringBodyRows ? null : w;
 };
 export {
-  v as default
+  q as default
 };
 //# sourceMappingURL=TableGroupRow.js.map

package/components/table/TableGroupRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGroupRow.js","sources":["../../../src/components/table/TableGroupRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableGroupRowProps = TableHtmlAttributes & {\n    /**\n     * The content of the full-width group row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Keeps the group row sticky at the top of a scrollable table body.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Optional class names only for this group row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst TableGroupRow = (props: TableGroupRowProps) => {\n    const { children, className, noHover, sticky, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    if (\n        !renderContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowIndex = bodyContext.nextRowIndex();\n    const columnCount = renderContext.columns.length + (interactionContext.showSelectionColumn ? 1 : 0);\n\n    const rowNode = (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-row',\n                'table-row-group',\n                sticky && 'table-row-group-sticky',\n                noHover && 'table-row-no-hover',\n                className\n            )}\n            data-index={rowIndex}\n            role='row'\n        >\n            <div className='table-cell table-group-cell' role='cell' aria-colspan={columnCount}>\n                <div className='table-cell-content'>{children}</div>\n            </div>\n        </div>\n    );\n\n    renderContext.renderDraft.bodyRows.push({\n        rowId: `group-${rowIndex}`,\n        rowIndex,\n        kind: 'group',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableGroupRow;\n"],"names":["TableGroupRow","props","children","className","noHover","sticky","remainingProps","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","columnCount","rowNode","jsx","classNames"],"mappings":";;;;;AAgCA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,MAAmBL,GAE9DM,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAUC,EAAA,GACVC,IAAcC,EAAA;AAEpB,MACI,CAACP,KACD,CAACE,KACDF,EAAc,QAAQ,WAAW,KACjCI,MAAY,UACZ,CAACE;AAED,WAAO;AAGX,QAAME,IAAWF,EAAY,aAAA,GACvBG,IAAcT,EAAc,QAAQ,UAAUE,EAAmB,sBAAsB,IAAI,IAE3FQ,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWa;AAAA,QACP;AAAA,QACA;AAAA,QACAd,KAAU;AAAA,QACVD,KAAW;AAAA,QACXD;AAAA,MAAA;AAAA,MAEJ,cAAYY;AAAA,MACZ,MAAK;AAAA,MAEL,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAcF,GACnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAhB,GAAS,EAAA,CAClD;AAAA,IAAA;AAAA,EAAA;AAIR,SAAAK,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAO,SAASQ,CAAQ;AAAA,IACxB,UAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,MAAME;AAAA,EAAA,CACjB,GAEMV,EAAc,wBAAwB,OAAOU;AACxD;"}
+{"version":3,"file":"TableGroupRow.js","sources":["../../../src/components/table/TableGroupRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowId, TableVerticalAlign } from './Table.types';\nimport { getVerticalAlignClassName } from './shared/getAlignClassName';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\n\nexport type TableGroupRowProps = TableHtmlAttributes & {\n    /**\n     * Stable row key for selectable group rows.\n     */\n    id?: TableRowId;\n\n    /**\n     * The content of the full-width group row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Keeps the group row sticky at the top of the current table scroll context.\n     * When a sticky `TableHeader` is present, the row stacks below the measured header height.\n     * `TableBody maxHeight` continues to pin the row inside the internal body scroller.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Optional class names only for this group row.\n     */\n    className?: string;\n\n    /**\n     * Includes this group row in table selection.\n     *\n     * Group rows are not selectable by default so existing grouped tables keep their current full-width layout.\n     *\n     * @default false\n     */\n    selectable?: boolean;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\ntype TableGroupRowSelectionCellProps = {\n    isSelected: boolean;\n    onToggleSelection?: () => void;\n    selectionCheckboxVerticalAlignment?: TableVerticalAlign;\n};\n\nconst TableGroupRowSelectionCell = (props: TableGroupRowSelectionCellProps) => {\n    const { isSelected, onToggleSelection, selectionCheckboxVerticalAlignment } = props;\n\n    return (\n        <div\n            className={classNames(\n                'table-cell table-selection-cell',\n                getVerticalAlignClassName(selectionCheckboxVerticalAlignment)\n            )}\n            role='cell'\n            aria-colindex={1}\n            style={{ gridColumn: '1 / span 1', gridRow: '1 / span 1' }}\n            onClick={event => event.stopPropagation()}\n            onKeyDown={event => event.stopPropagation()}\n        >\n            <div className='table-selection-control'>\n                <Checkbox checked={isSelected} onChange={onToggleSelection} />\n            </div>\n        </div>\n    );\n};\n\nconst TableGroupRow = (props: TableGroupRowProps) => {\n    const { children, className, id, noHover, selectable = false, sticky, ...remainingProps } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowIndex = bodyContext.nextRowIndex();\n    const rowId = id ?? `group-${rowIndex}`;\n    const isSelectable = selectable && interactionContext.selectableRowIdSet.has(rowId);\n    const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n    const hasSelectionCell = interactionContext.showSelectionColumn && isSelectable;\n    const columnCount =\n        renderContext.columns.length + (interactionContext.showSelectionColumn && !hasSelectionCell ? 1 : 0);\n    const stickyInBodyScrollContainer = !!renderContext.renderDraft.bodyMaxHeight;\n    const selectionCell = hasSelectionCell && (\n        <TableGroupRowSelectionCell\n            isSelected={isSelected}\n            onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n            selectionCheckboxVerticalAlignment={renderConfigContext.selectionCheckboxVerticalAlignment}\n        />\n    );\n\n    const rowNode = (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-row',\n                'table-row-group',\n                hasSelectionCell && 'table-row-group-selectable',\n                sticky && 'table-row-group-sticky',\n                sticky && stickyInBodyScrollContainer && 'table-row-sticky-in-container',\n                isSelected && 'table-row-selected',\n                noHover && 'table-row-no-hover',\n                className\n            )}\n            data-index={rowIndex}\n            data-row-id={String(rowId)}\n            role='row'\n        >\n            {selectionCell}\n            <div className='table-cell table-group-cell' role='cell' aria-colspan={columnCount}>\n                <div className='table-cell-content'>{children}</div>\n            </div>\n        </div>\n    );\n\n    renderContext.renderDraft.bodyRows.push({\n        rowId,\n        rowIndex,\n        kind: 'group',\n        selectable,\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableGroupRow;\n"],"names":["TableGroupRowSelectionCell","props","isSelected","onToggleSelection","selectionCheckboxVerticalAlignment","jsx","classNames","getVerticalAlignClassName","event","Checkbox","TableGroupRow","children","className","id","noHover","selectable","sticky","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","rowId","isSelectable","hasSelectionCell","columnCount","stickyInBodyScrollContainer","selectionCell","rowNode","jsxs"],"mappings":";;;;;;;;AAyDA,MAAMA,IAA6B,CAACC,MAA2C;AAC3E,QAAM,EAAE,YAAAC,GAAY,mBAAAC,GAAmB,oCAAAC,EAAA,IAAuCH;AAE9E,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAC,EAA0BH,CAAkC;AAAA,MAAA;AAAA,MAEhE,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,OAAO,EAAE,YAAY,cAAc,SAAS,aAAA;AAAA,MAC5C,SAAS,CAAAI,MAASA,EAAM,gBAAA;AAAA,MACxB,WAAW,CAAAA,MAASA,EAAM,gBAAA;AAAA,MAE1B,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA,gBAAAA,EAACI,KAAS,SAASP,GAAY,UAAUC,EAAA,CAAmB,EAAA,CAChE;AAAA,IAAA;AAAA,EAAA;AAGZ,GAEMO,IAAgB,CAACT,MAA8B;AACjD,QAAM,EAAE,UAAAU,GAAU,WAAAC,GAAW,IAAAC,GAAI,SAAAC,GAAS,YAAAC,IAAa,IAAO,QAAAC,GAAQ,GAAGC,EAAA,IAAmBhB,GAEtFiB,IAAsBC,EAAA,GACtBC,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAUC,EAAA,GACVC,IAAcC,EAAA;AAEpB,MACI,CAACP,KACD,CAACF,KACD,CAACI,KACDF,EAAc,QAAQ,WAAW,KACjCI,MAAY,UACZ,CAACE;AAED,WAAO;AAGX,QAAME,IAAWF,EAAY,aAAA,GACvBG,IAAQhB,KAAM,SAASe,CAAQ,IAC/BE,IAAef,KAAcO,EAAmB,mBAAmB,IAAIO,CAAK,GAC5E3B,IAAa4B,KAAgBR,EAAmB,iBAAiB,IAAIO,CAAK,GAC1EE,IAAmBT,EAAmB,uBAAuBQ,GAC7DE,IACFZ,EAAc,QAAQ,UAAUE,EAAmB,uBAAuB,CAACS,IAAmB,IAAI,IAChGE,IAA8B,CAAC,CAACb,EAAc,YAAY,eAC1Dc,IAAgBH,KAClB,gBAAA1B;AAAA,IAACL;AAAA,IAAA;AAAA,MACG,YAAAE;AAAA,MACA,mBAAmB,MAAMoB,EAAmB,uBAAuBO,CAAK;AAAA,MACxE,oCAAoCX,EAAoB;AAAA,IAAA;AAAA,EAAA,GAI1DiB,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGnB;AAAA,MACJ,WAAWX;AAAA,QACP;AAAA,QACA;AAAA,QACAyB,KAAoB;AAAA,QACpBf,KAAU;AAAA,QACVA,KAAUiB,KAA+B;AAAA,QACzC/B,KAAc;AAAA,QACdY,KAAW;AAAA,QACXF;AAAA,MAAA;AAAA,MAEJ,cAAYgB;AAAA,MACZ,eAAa,OAAOC,CAAK;AAAA,MACzB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAA7B,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAc2B,GACnE,UAAA,gBAAA3B,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAM,GAAS,EAAA,CAClD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,SAAAS,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAAS;AAAA,IACA,UAAAD;AAAA,IACA,MAAM;AAAA,IACN,YAAAb;AAAA,IACA,QAAQ,MAAMoB;AAAA,EAAA,CACjB,GAEMf,EAAc,wBAAwB,OAAOe;AACxD;"}

package/components/table/TableHeader.d.ts

@@ -7,21 +7,13 @@ export type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes
     className?: string;
     /**
      * Keeps the table header sticky while the page scrolls.
+     * The sticky top reference follows `Table.stickyReference`.
      *
      * This applies in `TABLE` view only.
      *
      * @default false
      */
     sticky?: boolean;
-    /**
-     * Keeps the sticky header pinned to the top edge of an explicit scroll container.
-     *
-     * Use this when the table sits inside a wrapper with an overflow class like `overflow-y-scroll`.
-     * When omitted, sticky headers compensate the default `ApplicationLayout` body padding.
-     *
-     * @default false
-     */
-    stickyInContainer?: boolean;
     /**
      * Table header content.
      */

package/components/table/TableHeader.js

@@ -1,71 +1,86 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
-import { useSensors as k, useSensor as E, PointerSensor as N, DndContext as j, DragOverlay as z } from "@dnd-kit/core";
-import { restrictToHorizontalAxis as L } from "@dnd-kit/modifiers";
-import { SortableContext as W, horizontalListSortingStrategy as V } from "@dnd-kit/sortable";
-import { useRef as _, useState as f } from "react";
-import p from "../../utils/classNames.js";
-import $ from "./render/header/TableHeaderDragOverlay.js";
-import q from "./render/header/TableHeaderSelectionCell.js";
-import { resolveColumnCollisionDetection as B } from "./render/header/resolveColumnCollisionDetection.js";
-import { useOptionalTableInteractionContext as F } from "./context/TableInteractionContext.js";
-import { useOptionalTableLayoutContext as G } from "./context/TableLayoutContext.js";
-import { useOptionalTableRenderConfigContext as J } from "./context/TableRenderConfigContext.js";
-import { TableSectionContext as x, TableHeaderContext as S } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as M } from "./context/TableRenderContext.js";
-const de = (w) => {
-  const { children: s, className: b, sticky: d = !1, stickyInContainer: D = !1, ...y } = w, l = M(), c = J(), t = F(), n = G();
-  if (!l || !c || !t || !n)
+import { jsxs as S, jsx as o } from "react/jsx-runtime";
+import { useSensors as N, useSensor as V, PointerSensor as j, DndContext as B, DragOverlay as M } from "@dnd-kit/core";
+import { restrictToHorizontalAxis as W } from "@dnd-kit/modifiers";
+import { SortableContext as $, horizontalListSortingStrategy as G } from "@dnd-kit/sortable";
+import { useRef as Y, useState as b, useLayoutEffect as q } from "react";
+import F from "../../hooks/useMergeRefs.js";
+import J from "../../hooks/useResizeObserver.js";
+import y from "../../utils/classNames.js";
+import Q from "./render/header/TableHeaderDragOverlay.js";
+import U from "./render/header/TableHeaderSelectionCell.js";
+import { resolveColumnCollisionDetection as X } from "./render/header/resolveColumnCollisionDetection.js";
+import { useOptionalTableInteractionContext as Z } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as ee } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as te } from "./context/TableRenderConfigContext.js";
+import { TableSectionContext as R, TableHeaderContext as w } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as oe } from "./context/TableRenderContext.js";
+const m = "--table-sticky-header-height", xe = (D) => {
+  const { children: u, className: H, sticky: i = !1, ...T } = D, s = oe(), c = te(), t = Z(), n = ee();
+  if (!s || !c || !t || !n)
     return null;
-  const R = k(E(N, { activationConstraint: { distance: 6 } })), r = _(0);
+  const A = N(V(j, { activationConstraint: { distance: 6 } })), r = Y(0), [g, , { blockSize: C }] = J();
   r.current = 0;
-  const [m, u] = f(void 0), [H, g] = f(void 0), T = !!n.onColumnDragEnd && (n.draggableColumnKeys?.length ?? 0) > 1, i = l.header, a = i?.rowCount ?? 1, A = i ?? {
-    rowCount: a,
-    totalColumnCount: l.columns.length,
+  const [h, f] = b(void 0), [E, v] = b(void 0), P = F(
+    n.tableHeadRowRef,
+    g
+  ), k = !!n.onColumnDragEnd && (n.draggableColumnKeys?.length ?? 0) > 1, d = s.header, l = d?.rowCount ?? 1, I = d ?? {
+    rowCount: l,
+    totalColumnCount: s.columns.length,
     columns: []
-  }, I = m ? i?.columns.find((e) => (e.columnKey ?? String(e.key)) === m) : void 0, C = () => {
-    u(void 0), g(void 0);
-  }, K = (e) => {
-    u(String(e.active.id)), g(e.active.rect.current.initial?.width ?? void 0);
+  }, K = h ? d?.columns.find((e) => (e.columnKey ?? String(e.key)) === h) : void 0, p = () => {
+    f(void 0), v(void 0);
   }, O = (e) => {
-    C();
-  }, P = (e) => {
-    C(), n.onColumnDragEnd?.(e);
-  }, h = T && n.draggableColumnKeys ? /* @__PURE__ */ v(
-    j,
+    f(String(e.active.id)), v(e.active.rect.current.initial?.width ?? void 0);
+  }, z = (e) => {
+    p();
+  }, _ = (e) => {
+    p(), n.onColumnDragEnd?.(e);
+  };
+  q(() => {
+    const e = g.current, a = e?.closest(".table");
+    if (!a)
+      return;
+    if (!i || !e) {
+      a.style.removeProperty(m);
+      return;
+    }
+    const L = Math.max(C ?? e.getBoundingClientRect().height ?? 0, 0);
+    return a.style.setProperty(m, `${L}px`), () => {
+      a.style.removeProperty(m);
+    };
+  }, [C, i]);
+  const x = k && n.draggableColumnKeys ? /* @__PURE__ */ S(
+    B,
     {
-      sensors: R,
-      collisionDetection: B,
-      modifiers: [L],
-      onDragStart: K,
-      onDragCancel: O,
-      onDragEnd: P,
+      sensors: A,
+      collisionDetection: X,
+      modifiers: [W],
+      onDragStart: O,
+      onDragCancel: z,
+      onDragEnd: _,
       children: [
-        /* @__PURE__ */ o(W, { items: n.draggableColumnKeys, strategy: V, children: s }),
-        /* @__PURE__ */ o(z, { adjustScale: !1, dropAnimation: null, children: /* @__PURE__ */ o(
-          $,
+        /* @__PURE__ */ o($, { items: n.draggableColumnKeys, strategy: G, children: u }),
+        /* @__PURE__ */ o(M, { adjustScale: !1, dropAnimation: null, children: /* @__PURE__ */ o(
+          Q,
           {
-            column: I,
-            header: A,
+            column: K,
+            header: I,
             showSelectionColumn: t.showSelectionColumn,
-            width: H
+            width: E
           }
         ) })
       ]
     }
-  ) : s;
+  ) : u;
   return c.isTableView ? /* @__PURE__ */ o(
     "div",
     {
-      ...y,
-      className: p(
-        "table-head",
-        d && "table-head-sticky",
-        d && D && "table-head-sticky-in-container"
-      ),
+      ...T,
+      className: y("table-head", i && "table-head-sticky"),
       role: "rowgroup",
-      ref: n.tableHeadRowRef,
-      children: /* @__PURE__ */ o(x.Provider, { value: "header", children: /* @__PURE__ */ o(
-        S.Provider,
+      ref: P,
+      children: /* @__PURE__ */ o(R.Provider, { value: "header", children: /* @__PURE__ */ o(
+        w.Provider,
         {
           value: {
             nextHeaderRowIndex: () => {
@@ -73,36 +88,38 @@ const de = (w) => {
               return r.current += 1, e;
             }
           },
-          children: /* @__PURE__ */ v(
+          children: /* @__PURE__ */ S(
             "div",
             {
-              className: p(
+              className: y(
                 "table-head-grid",
                 t.selectionHeaderContent && "table-head-grid-custom-selection",
-                b
+                H
               ),
-              role: a === 1 ? "row" : "presentation",
-              style: { gridTemplateRows: `repeat(${a}, auto)` },
+              role: l === 1 ? "row" : "presentation",
+              style: { gridTemplateRows: `repeat(${l}, auto)` },
               children: [
                 t.showSelectionColumn && /* @__PURE__ */ o(
-                  q,
+                  U,
                   {
                     isAllSelected: t.isAllRowsSelected,
                     isSomeRowsSelected: t.isSomeRowsSelected,
                     onToggleAllSelection: t.onToggleAllSelection,
-                    rowCount: a,
-                    selectionHeaderContent: t.selectionHeaderContent
+                    disabled: !t.hasSelectableRows,
+                    rowCount: l,
+                    selectionHeaderContent: t.selectionHeaderContent,
+                    selectionCheckboxVerticalAlignment: c.selectionCheckboxVerticalAlignment
                   }
                 ),
-                h
+                x
               ]
             }
           )
         }
       ) })
     }
-  ) : /* @__PURE__ */ o(x.Provider, { value: "header", children: /* @__PURE__ */ o(
-    S.Provider,
+  ) : /* @__PURE__ */ o(R.Provider, { value: "header", children: /* @__PURE__ */ o(
+    w.Provider,
     {
       value: {
         nextHeaderRowIndex: () => {
@@ -110,11 +127,11 @@ const de = (w) => {
           return r.current += 1, e;
         }
       },
-      children: h
+      children: x
     }
   ) });
 };
 export {
-  de as default
+  xe as default
 };
 //# sourceMappingURL=TableHeader.js.map

package/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragOverlay,\n    PointerSensor,\n    type DragCancelEvent,\n    type DragEndEvent,\n    type DragStartEvent,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type ReactNode, useRef, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n    /**\n     * Additional class names for the header grid wrapper.\n     */\n    className?: string;\n\n    /**\n     * Keeps the table header sticky while the page scrolls.\n     *\n     * This applies in `TABLE` view only.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Keeps the sticky header pinned to the top edge of an explicit scroll container.\n     *\n     * Use this when the table sits inside a wrapper with an overflow class like `overflow-y-scroll`.\n     * When omitted, sticky headers compensate the default `ApplicationLayout` body padding.\n     *\n     * @default false\n     */\n    stickyInContainer?: boolean;\n\n    /**\n     * Table header content.\n     */\n    children?: ReactNode;\n};\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n    const { children, className, sticky = false, stickyInContainer = false, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n        return null;\n    }\n\n    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n    const headerRowIndexRef = useRef(0);\n    headerRowIndexRef.current = 0;\n\n    const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n    const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n\n    const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n    const header = renderContext.header;\n    const headerRowCount = header?.rowCount ?? 1;\n    const overlayHeader = header ?? {\n        rowCount: headerRowCount,\n        totalColumnCount: renderContext.columns.length,\n        columns: [],\n    };\n\n    const activeDraggedColumn = activeDraggedColumnKey\n        ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n        : undefined;\n\n    const clearActiveDraggedColumn = () => {\n        setActiveDraggedColumnKey(undefined);\n        setActiveDraggedColumnWidth(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setActiveDraggedColumnKey(String(event.active.id));\n        setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n    };\n\n    const handleDragCancel = (_event: DragCancelEvent) => {\n        clearActiveDraggedColumn();\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        clearActiveDraggedColumn();\n        layoutContext.onColumnDragEnd?.(event);\n    };\n\n    const content =\n        canDragColumns && layoutContext.draggableColumnKeys ? (\n            <DndContext\n                sensors={sensors}\n                collisionDetection={resolveColumnCollisionDetection}\n                modifiers={[restrictToHorizontalAxis]}\n                onDragStart={handleDragStart}\n                onDragCancel={handleDragCancel}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n                    {children}\n                </SortableContext>\n                <DragOverlay adjustScale={false} dropAnimation={null}>\n                    <TableHeaderDragOverlay\n                        column={activeDraggedColumn}\n                        header={overlayHeader}\n                        showSelectionColumn={interactionContext.showSelectionColumn}\n                        width={activeDraggedColumnWidth}\n                    />\n                </DragOverlay>\n            </DndContext>\n        ) : (\n            children\n        );\n\n    if (!renderConfigContext.isTableView) {\n        return (\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    {content}\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-head',\n                sticky && 'table-head-sticky',\n                sticky && stickyInContainer && 'table-head-sticky-in-container'\n            )}\n            role='rowgroup'\n            ref={layoutContext.tableHeadRowRef}\n        >\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    <div\n                        className={classNames(\n                            'table-head-grid',\n                            interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n                            className\n                        )}\n                        role={headerRowCount === 1 ? 'row' : 'presentation'}\n                        style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n                    >\n                        {interactionContext.showSelectionColumn && (\n                            <TableHeaderSelectionCell\n                                isAllSelected={interactionContext.isAllRowsSelected}\n                                isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n                                onToggleAllSelection={interactionContext.onToggleAllSelection}\n                                rowCount={headerRowCount}\n                                selectionHeaderContent={interactionContext.selectionHeaderContent}\n                            />\n                        )}\n                        {content}\n                    </div>\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        </div>\n    );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","props","children","className","sticky","stickyInContainer","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","classNames","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","TableHeaderSelectionCell"],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragOverlay,\n    PointerSensor,\n    type DragCancelEvent,\n    type DragEndEvent,\n    type DragStartEvent,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type MutableRefObject, type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport useResizeObserver from '../../useResizeObserver';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n    /**\n     * Additional class names for the header grid wrapper.\n     */\n    className?: string;\n\n    /**\n     * Keeps the table header sticky while the page scrolls.\n     * The sticky top reference follows `Table.stickyReference`.\n     *\n     * This applies in `TABLE` view only.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Table header content.\n     */\n    children?: ReactNode;\n};\n\nconst TABLE_STICKY_HEADER_HEIGHT_VAR = '--table-sticky-header-height';\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n    const { children, className, sticky = false, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n        return null;\n    }\n\n    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n    const headerRowIndexRef = useRef(0);\n    const [headerElementRef, , { blockSize: headerBlockSize }] = useResizeObserver<HTMLDivElement>();\n    headerRowIndexRef.current = 0;\n\n    const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n    const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n    const mergedHeaderRefs = useMergeRefs(\n        layoutContext.tableHeadRowRef as MutableRefObject<HTMLDivElement | null>,\n        headerElementRef\n    );\n\n    const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n    const header = renderContext.header;\n    const headerRowCount = header?.rowCount ?? 1;\n    const overlayHeader = header ?? {\n        rowCount: headerRowCount,\n        totalColumnCount: renderContext.columns.length,\n        columns: [],\n    };\n\n    const activeDraggedColumn = activeDraggedColumnKey\n        ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n        : undefined;\n\n    const clearActiveDraggedColumn = () => {\n        setActiveDraggedColumnKey(undefined);\n        setActiveDraggedColumnWidth(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setActiveDraggedColumnKey(String(event.active.id));\n        setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n    };\n\n    const handleDragCancel = (_event: DragCancelEvent) => {\n        clearActiveDraggedColumn();\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        clearActiveDraggedColumn();\n        layoutContext.onColumnDragEnd?.(event);\n    };\n\n    useLayoutEffect(() => {\n        const headerElement = headerElementRef.current;\n        const tableElement = headerElement?.closest<HTMLElement>('.table');\n\n        if (!tableElement) {\n            return;\n        }\n\n        if (!sticky || !headerElement) {\n            tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n            return;\n        }\n\n        const resolvedHeight = Math.max(headerBlockSize ?? headerElement.getBoundingClientRect().height ?? 0, 0);\n\n        tableElement.style.setProperty(TABLE_STICKY_HEADER_HEIGHT_VAR, `${resolvedHeight}px`);\n\n        return () => {\n            tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n        };\n    }, [headerBlockSize, sticky]);\n\n    const content =\n        canDragColumns && layoutContext.draggableColumnKeys ? (\n            <DndContext\n                sensors={sensors}\n                collisionDetection={resolveColumnCollisionDetection}\n                modifiers={[restrictToHorizontalAxis]}\n                onDragStart={handleDragStart}\n                onDragCancel={handleDragCancel}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n                    {children}\n                </SortableContext>\n                <DragOverlay adjustScale={false} dropAnimation={null}>\n                    <TableHeaderDragOverlay\n                        column={activeDraggedColumn}\n                        header={overlayHeader}\n                        showSelectionColumn={interactionContext.showSelectionColumn}\n                        width={activeDraggedColumnWidth}\n                    />\n                </DragOverlay>\n            </DndContext>\n        ) : (\n            children\n        );\n\n    if (!renderConfigContext.isTableView) {\n        return (\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    {content}\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames('table-head', sticky && 'table-head-sticky')}\n            role='rowgroup'\n            ref={mergedHeaderRefs}\n        >\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    <div\n                        className={classNames(\n                            'table-head-grid',\n                            interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n                            className\n                        )}\n                        role={headerRowCount === 1 ? 'row' : 'presentation'}\n                        style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n                    >\n                        {interactionContext.showSelectionColumn && (\n                            <TableHeaderSelectionCell\n                                isAllSelected={interactionContext.isAllRowsSelected}\n                                isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n                                onToggleAllSelection={interactionContext.onToggleAllSelection}\n                                disabled={!interactionContext.hasSelectableRows}\n                                rowCount={headerRowCount}\n                                selectionHeaderContent={interactionContext.selectionHeaderContent}\n                                selectionCheckboxVerticalAlignment={\n                                    renderConfigContext.selectionCheckboxVerticalAlignment\n                                }\n                            />\n                        )}\n                        {content}\n                    </div>\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        </div>\n    );\n};\n\nexport default TableHeader;\n"],"names":["TABLE_STICKY_HEADER_HEIGHT_VAR","TableHeader","props","children","className","sticky","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","headerElementRef","headerBlockSize","useResizeObserver","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","mergedHeaderRefs","useMergeRefs","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","useLayoutEffect","headerElement","tableElement","resolvedHeight","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","classNames","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","TableHeaderSelectionCell"],"mappings":"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"}

package/components/table/TableRow.d.ts

@@ -2,7 +2,9 @@ import { ReactNode } from 'react';
 import { TableHtmlAttributes, TableRowData } from './Table.types';
 export type TableRowProps<RowType extends TableRowData> = TableHtmlAttributes & Partial<RowType> & {
     /**
-     * Keeps the row sticky at the top of a scrollable table body.
+     * Keeps the row sticky at the top of the current table scroll context.
+     * When a sticky `TableHeader` is present, the row stacks below the measured header height.
+     * `TableBody maxHeight` continues to pin the row inside the internal body scroller.
      *
      * @default false
      */
@@ -17,6 +19,10 @@ export type TableRowProps<RowType extends TableRowData> = TableHtmlAttributes &
      * Optional class names only for this row.
      */
     className?: string;
+    /**
+     * Excludes this row from table selection while keeping the row interactive.
+     */
+    selectable?: boolean;
     /**
      * Disable table hover styling for this row.
      */