@wallarm-org/design-system 2.3.3 → 2.4.0

package/dist/components/Table/TableContext/types.d.ts

@@ -24,6 +24,7 @@ export interface TableContextValue<T extends RowData> {
     expandingEnabled: boolean;
     visibilityEnabled: boolean;
     hasSubRowGrouping: boolean;
+    showEmptyGroups: boolean;
     virtualized: TableVirtualized | undefined;
     stretch: boolean;
     renderExpandedRow?: (row: Row<DSTableFeatures, T>) => ReactNode;

package/dist/components/Table/TableRow.js

@@ -4,7 +4,7 @@ import { memo } from "react";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { DROP_INDICATOR_BASE } from "./classes.js";
-import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, useRowDnd, useTableValue, withTableState } from "./lib/index.js";
+import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, isGroupRow, useRowDnd, useTableValue, withTableState } from "./lib/index.js";
 import { Td, Tr } from "./primitives/index.js";
 import { TableBodyCell } from "./TableBody/TableBodyCell.js";
 import { useRowDndIndicator } from "./TableBody/TableBodyRowDndContext.js";
@@ -16,50 +16,51 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
 const TableRowInner = (t0)=>{
-    const $ = compiler_runtime_c(96);
+    const $ = compiler_runtime_c(97);
     const { row, ref, "data-index": dataIndex } = t0;
-    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow, stretch, hasSubRowGrouping, allLeafColumns } = useTableContext();
+    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow, stretch, hasSubRowGrouping, showEmptyGroups, allLeafColumns } = useTableContext();
     const testId = useTestId("row");
     const { canDnd, isDragging, setNodeRef, style: dndStyle, attributes, listeners } = useRowDnd(row);
     const { activeId, overId } = useRowDndIndicator();
     let t1;
-    if ($[0] !== row.subRows.length) {
-        t1 = ()=>row.subRows.length > 0;
-        $[0] = row.subRows.length;
-        $[1] = t1;
-    } else t1 = $[1];
+    if ($[0] !== row || $[1] !== showEmptyGroups) {
+        t1 = ()=>isGroupRow(row, showEmptyGroups);
+        $[0] = row;
+        $[1] = showEmptyGroups;
+        $[2] = t1;
+    } else t1 = $[2];
     const isGroupParent = useTableValue(t1);
     let t2;
-    if ($[2] !== row) {
+    if ($[3] !== row) {
         t2 = ()=>row.subRows.length > 0 ? row.getIsAllSubRowsSelected() : row.getIsSelected();
-        $[2] = row;
-        $[3] = t2;
-    } else t2 = $[3];
+        $[3] = row;
+        $[4] = t2;
+    } else t2 = $[4];
     const isSelected = useTableValue(t2);
     let t3;
-    if ($[4] !== row) {
+    if ($[5] !== row) {
         t3 = ()=>row.getIsExpanded();
-        $[4] = row;
-        $[5] = t3;
-    } else t3 = $[5];
+        $[5] = row;
+        $[6] = t3;
+    } else t3 = $[6];
     const isExpanded = useTableValue(t3);
     let t4;
-    if ($[6] !== row) {
+    if ($[7] !== row) {
         t4 = ()=>row.getVisibleCells();
-        $[6] = row;
-        $[7] = t4;
-    } else t4 = $[7];
+        $[7] = row;
+        $[8] = t4;
+    } else t4 = $[8];
     const cells = useTableValue(t4);
     let t5;
-    if ($[8] !== row.id || $[9] !== table) {
+    if ($[9] !== row.id || $[10] !== table) {
         t5 = ()=>{
             const rows = table.getRowModel().rows;
             return rows[rows.length - 1]?.id === row.id;
         };
-        $[8] = row.id;
-        $[9] = table;
-        $[10] = t5;
-    } else t5 = $[10];
+        $[9] = row.id;
+        $[10] = table;
+        $[11] = t5;
+    } else t5 = $[11];
     const isLastModelRow = useTableValue(t5);
     const isPreviewActive = activeRowId === row.id;
     const isLastTableRow = !isLoading && isLastModelRow;
@@ -67,17 +68,17 @@ const TableRowInner = (t0)=>{
     const isLastRow = isLastTableRow && !hasExpandedContent;
     const isLastRowExpanded = isLastTableRow && hasExpandedContent;
     let t6;
-    if ($[11] !== canDnd || $[12] !== ref || $[13] !== setNodeRef) {
+    if ($[12] !== canDnd || $[13] !== ref || $[14] !== setNodeRef) {
         t6 = (node)=>{
             if (canDnd) setNodeRef(node);
             if ("function" == typeof ref) ref(node);
             else if (ref) ref.current = node;
         };
-        $[11] = canDnd;
-        $[12] = ref;
-        $[13] = setNodeRef;
-        $[14] = t6;
-    } else t6 = $[14];
+        $[12] = canDnd;
+        $[13] = ref;
+        $[14] = setNodeRef;
+        $[15] = t6;
+    } else t6 = $[15];
     const composedRef = t6;
     if (isGroupParent) {
         let T0;
@@ -93,22 +94,22 @@ const TableRowInner = (t0)=>{
         let t7;
         let t8;
         let t9;
-        if ($[15] !== allLeafColumns || $[16] !== cells || $[17] !== composedRef || $[18] !== dataIndex || $[19] !== hasSubRowGrouping || $[20] !== isExpanded || $[21] !== isLastRow || $[22] !== isPreviewActive || $[23] !== isSelected || $[24] !== row.id || $[25] !== table.state || $[26] !== testId) {
+        if ($[16] !== allLeafColumns || $[17] !== cells || $[18] !== composedRef || $[19] !== dataIndex || $[20] !== hasSubRowGrouping || $[21] !== isExpanded || $[22] !== isLastRow || $[23] !== isPreviewActive || $[24] !== isSelected || $[25] !== row.id || $[26] !== table.state || $[27] !== testId) {
             const systemCells = cells.filter(_temp);
             const dataCells = cells.filter(_temp2);
             const firstDataCell = dataCells[0];
             let t19;
-            if ($[40] !== allLeafColumns || $[41] !== hasSubRowGrouping || $[42] !== isExpanded) {
+            if ($[41] !== allLeafColumns || $[42] !== hasSubRowGrouping || $[43] !== isExpanded) {
                 t19 = hasSubRowGrouping && isExpanded ? {
                     position: "sticky",
                     top: allLeafColumns.some(_temp3) ? 48 : 32,
                     zIndex: 20
                 } : void 0;
-                $[40] = allLeafColumns;
-                $[41] = hasSubRowGrouping;
-                $[42] = isExpanded;
-                $[43] = t19;
-            } else t19 = $[43];
+                $[41] = allLeafColumns;
+                $[42] = hasSubRowGrouping;
+                $[43] = isExpanded;
+                $[44] = t19;
+            } else t19 = $[44];
             const stickyStyle = t19;
             T0 = Tr;
             t7 = composedRef;
@@ -121,15 +122,15 @@ const TableRowInner = (t0)=>{
             t14 = isSelected || void 0;
             t15 = stickyStyle;
             let t20;
-            if ($[44] !== isLastRow) {
+            if ($[45] !== isLastRow) {
                 t20 = (cell)=>/*#__PURE__*/ jsx(TableBodyCell, {
                         cell: cell,
                         disablePinnedShadow: true,
                         lastRow: isLastRow
                     }, cell.id);
-                $[44] = isLastRow;
-                $[45] = t20;
-            } else t20 = $[45];
+                $[45] = isLastRow;
+                $[46] = t20;
+            } else t20 = $[46];
             t16 = systemCells.map(t20);
             t17 = firstDataCell && /*#__PURE__*/ jsx(TableBodyCell, {
                 cell: firstDataCell,
@@ -144,57 +145,57 @@ const TableRowInner = (t0)=>{
                         },
                         "aria-hidden": "true"
                     }, cell_0.id)));
-            $[15] = allLeafColumns;
-            $[16] = cells;
-            $[17] = composedRef;
-            $[18] = dataIndex;
-            $[19] = hasSubRowGrouping;
-            $[20] = isExpanded;
-            $[21] = isLastRow;
-            $[22] = isPreviewActive;
-            $[23] = isSelected;
-            $[24] = row.id;
-            $[25] = table.state;
-            $[26] = testId;
-            $[27] = T0;
-            $[28] = t10;
-            $[29] = t11;
-            $[30] = t12;
-            $[31] = t13;
-            $[32] = t14;
-            $[33] = t15;
-            $[34] = t16;
-            $[35] = t17;
-            $[36] = t18;
-            $[37] = t7;
-            $[38] = t8;
-            $[39] = t9;
+            $[16] = allLeafColumns;
+            $[17] = cells;
+            $[18] = composedRef;
+            $[19] = dataIndex;
+            $[20] = hasSubRowGrouping;
+            $[21] = isExpanded;
+            $[22] = isLastRow;
+            $[23] = isPreviewActive;
+            $[24] = isSelected;
+            $[25] = row.id;
+            $[26] = table.state;
+            $[27] = testId;
+            $[28] = T0;
+            $[29] = t10;
+            $[30] = t11;
+            $[31] = t12;
+            $[32] = t13;
+            $[33] = t14;
+            $[34] = t15;
+            $[35] = t16;
+            $[36] = t17;
+            $[37] = t18;
+            $[38] = t7;
+            $[39] = t8;
+            $[40] = t9;
         } else {
-            T0 = $[27];
-            t10 = $[28];
-            t11 = $[29];
-            t12 = $[30];
-            t13 = $[31];
-            t14 = $[32];
-            t15 = $[33];
-            t16 = $[34];
-            t17 = $[35];
-            t18 = $[36];
-            t7 = $[37];
-            t8 = $[38];
-            t9 = $[39];
+            T0 = $[28];
+            t10 = $[29];
+            t11 = $[30];
+            t12 = $[31];
+            t13 = $[32];
+            t14 = $[33];
+            t15 = $[34];
+            t16 = $[35];
+            t17 = $[36];
+            t18 = $[37];
+            t7 = $[38];
+            t8 = $[39];
+            t9 = $[40];
         }
         let t19;
-        if ($[46] !== stretch) {
+        if ($[47] !== stretch) {
             t19 = !stretch && /*#__PURE__*/ jsx(Td, {
                 pinned: false,
                 "aria-hidden": true
             });
-            $[46] = stretch;
-            $[47] = t19;
-        } else t19 = $[47];
+            $[47] = stretch;
+            $[48] = t19;
+        } else t19 = $[48];
         let t20;
-        if ($[48] !== T0 || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t17 || $[57] !== t18 || $[58] !== t19 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
+        if ($[49] !== T0 || $[50] !== t10 || $[51] !== t11 || $[52] !== t12 || $[53] !== t13 || $[54] !== t14 || $[55] !== t15 || $[56] !== t16 || $[57] !== t17 || $[58] !== t18 || $[59] !== t19 || $[60] !== t7 || $[61] !== t8 || $[62] !== t9) {
             t20 = /*#__PURE__*/ jsxs(T0, {
                 ref: t7,
                 "data-index": t8,
@@ -212,49 +213,49 @@ const TableRowInner = (t0)=>{
                     t19
                 ]
             });
-            $[48] = T0;
-            $[49] = t10;
-            $[50] = t11;
-            $[51] = t12;
-            $[52] = t13;
-            $[53] = t14;
-            $[54] = t15;
-            $[55] = t16;
-            $[56] = t17;
-            $[57] = t18;
-            $[58] = t19;
-            $[59] = t7;
-            $[60] = t8;
-            $[61] = t9;
-            $[62] = t20;
-        } else t20 = $[62];
+            $[49] = T0;
+            $[50] = t10;
+            $[51] = t11;
+            $[52] = t12;
+            $[53] = t13;
+            $[54] = t14;
+            $[55] = t15;
+            $[56] = t16;
+            $[57] = t17;
+            $[58] = t18;
+            $[59] = t19;
+            $[60] = t7;
+            $[61] = t8;
+            $[62] = t9;
+            $[63] = t20;
+        } else t20 = $[63];
         let t21;
-        if ($[63] !== expandingEnabled || $[64] !== isLastRowExpanded || $[65] !== row) {
+        if ($[64] !== expandingEnabled || $[65] !== isLastRowExpanded || $[66] !== row) {
             t21 = expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
                 row: row,
                 lastRow: isLastRowExpanded
             });
-            $[63] = expandingEnabled;
-            $[64] = isLastRowExpanded;
-            $[65] = row;
-            $[66] = t21;
-        } else t21 = $[66];
+            $[64] = expandingEnabled;
+            $[65] = isLastRowExpanded;
+            $[66] = row;
+            $[67] = t21;
+        } else t21 = $[67];
         let t22;
-        if ($[67] !== t20 || $[68] !== t21) {
+        if ($[68] !== t20 || $[69] !== t21) {
             t22 = /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     t20,
                     t21
                 ]
             });
-            $[67] = t20;
-            $[68] = t21;
-            $[69] = t22;
-        } else t22 = $[69];
+            $[68] = t20;
+            $[69] = t21;
+            $[70] = t22;
+        } else t22 = $[70];
         return t22;
     }
     let t7;
-    if ($[70] !== activeId || $[71] !== attributes || $[72] !== cells || $[73] !== composedRef || $[74] !== dataIndex || $[75] !== dndStyle || $[76] !== isDragging || $[77] !== isLastRow || $[78] !== isPreviewActive || $[79] !== isSelected || $[80] !== listeners || $[81] !== overId || $[82] !== row.depth || $[83] !== row.id || $[84] !== stretch || $[85] !== table || $[86] !== testId) {
+    if ($[71] !== activeId || $[72] !== attributes || $[73] !== cells || $[74] !== composedRef || $[75] !== dataIndex || $[76] !== dndStyle || $[77] !== isDragging || $[78] !== isLastRow || $[79] !== isPreviewActive || $[80] !== isSelected || $[81] !== listeners || $[82] !== overId || $[83] !== row.depth || $[84] !== row.id || $[85] !== stretch || $[86] !== table || $[87] !== testId) {
         let dropIndicator;
         if (overId === row.id && null != activeId && activeId !== row.id) {
             const modelRows = table.getRowModel().rows;
@@ -295,50 +296,50 @@ const TableRowInner = (t0)=>{
                 })
             ]
         });
-        $[70] = activeId;
-        $[71] = attributes;
-        $[72] = cells;
-        $[73] = composedRef;
-        $[74] = dataIndex;
-        $[75] = dndStyle;
-        $[76] = isDragging;
-        $[77] = isLastRow;
-        $[78] = isPreviewActive;
-        $[79] = isSelected;
-        $[80] = listeners;
-        $[81] = overId;
-        $[82] = row.depth;
-        $[83] = row.id;
-        $[84] = stretch;
-        $[85] = table;
-        $[86] = testId;
-        $[87] = t7;
-    } else t7 = $[87];
+        $[71] = activeId;
+        $[72] = attributes;
+        $[73] = cells;
+        $[74] = composedRef;
+        $[75] = dataIndex;
+        $[76] = dndStyle;
+        $[77] = isDragging;
+        $[78] = isLastRow;
+        $[79] = isPreviewActive;
+        $[80] = isSelected;
+        $[81] = listeners;
+        $[82] = overId;
+        $[83] = row.depth;
+        $[84] = row.id;
+        $[85] = stretch;
+        $[86] = table;
+        $[87] = testId;
+        $[88] = t7;
+    } else t7 = $[88];
     let t8;
-    if ($[88] !== dndStyle || $[89] !== expandingEnabled || $[90] !== isLastRowExpanded || $[91] !== row) {
+    if ($[89] !== dndStyle || $[90] !== expandingEnabled || $[91] !== isLastRowExpanded || $[92] !== row) {
         t8 = expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
             row: row,
             dndStyle: dndStyle,
             lastRow: isLastRowExpanded
         });
-        $[88] = dndStyle;
-        $[89] = expandingEnabled;
-        $[90] = isLastRowExpanded;
-        $[91] = row;
-        $[92] = t8;
-    } else t8 = $[92];
+        $[89] = dndStyle;
+        $[90] = expandingEnabled;
+        $[91] = isLastRowExpanded;
+        $[92] = row;
+        $[93] = t8;
+    } else t8 = $[93];
     let t9;
-    if ($[93] !== t7 || $[94] !== t8) {
+    if ($[94] !== t7 || $[95] !== t8) {
         t9 = /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 t7,
                 t8
             ]
         });
-        $[93] = t7;
-        $[94] = t8;
-        $[95] = t9;
-    } else t9 = $[95];
+        $[94] = t7;
+        $[95] = t8;
+        $[96] = t9;
+    } else t9 = $[96];
     return t9;
 };
 TableRowInner.displayName = "TableRow";

package/dist/components/Table/lib/createDragHandleColumn.js

@@ -1,6 +1,33 @@
 import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { GripVertical } from "../../../icons/index.js";
+import { useTableContext } from "../TableContext/useTableContext.js";
 import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_DRAG_HANDLE_COLUMN_WIDTH } from "./constants.js";
+import { isGroupRow } from "./isGroupRow.js";
+import { useTableValue } from "./tableReactivity.js";
+const DragHandle = (t0)=>{
+    const $ = c(5);
+    const { row } = t0;
+    const { showEmptyGroups } = useTableContext();
+    let t1;
+    if ($[0] !== row || $[1] !== showEmptyGroups) {
+        t1 = ()=>isGroupRow(row, showEmptyGroups);
+        $[0] = row;
+        $[1] = showEmptyGroups;
+        $[2] = t1;
+    } else t1 = $[2];
+    const isGroup = useTableValue(t1);
+    let t2;
+    if ($[3] !== isGroup) {
+        t2 = isGroup ? null : /*#__PURE__*/ jsx(GripVertical, {
+            size: "sm",
+            className: "text-text-secondary"
+        });
+        $[3] = isGroup;
+        $[4] = t2;
+    } else t2 = $[4];
+    return t2;
+};
 const createDragHandleColumn = ()=>({
         id: TABLE_DRAG_HANDLE_COLUMN_ID,
         size: TABLE_DRAG_HANDLE_COLUMN_WIDTH,
@@ -11,13 +38,12 @@ const createDragHandleColumn = ()=>({
         enableHiding: false,
         enablePinning: false,
         meta: {
-            headerClassName: 'px-4 py-4',
-            cellClassName: 'px-4 py-8 align-middle text-center'
+            headerClassName: "px-4 py-4",
+            cellClassName: "px-4 py-8 align-middle text-center"
         },
         header: ()=>null,
-        cell: ()=>/*#__PURE__*/ jsx(GripVertical, {
-                size: "sm",
-                className: "text-text-secondary"
+        cell: ({ row })=>/*#__PURE__*/ jsx(DragHandle, {
+                row: row
             })
     });
 export { createDragHandleColumn };

package/dist/components/Table/lib/index.d.ts

@@ -9,6 +9,7 @@ export { detectDataChange } from './detectDataChange.js';
 export { type DSTableFeatures, dsTableFeatures } from './dsTableFeatures.js';
 export { getDndStyles } from './getDndStyles.js';
 export { getRowKey } from './getRowKey.js';
+export { isGroupRow } from './isGroupRow.js';
 export { isLastPinnedLeft } from './isLastPinnedLeft.js';
 export { getOffsetTopInScrollRoot, getScrollMetrics, getScrollRoot, isWindowScrollRoot, type ScrollRoot, scrollRootBy, } from './scrollRoot.js';
 export { useColumnPinning, useTableValue, withTableState } from './tableReactivity.js';

package/dist/components/Table/lib/index.js

@@ -9,6 +9,7 @@ export { detectDataChange } from "./detectDataChange.js";
 export { dsTableFeatures } from "./dsTableFeatures.js";
 export { getDndStyles } from "./getDndStyles.js";
 export { getRowKey } from "./getRowKey.js";
+export { isGroupRow } from "./isGroupRow.js";
 export { isLastPinnedLeft } from "./isLastPinnedLeft.js";
 export { getOffsetTopInScrollRoot, getScrollMetrics, getScrollRoot, isWindowScrollRoot, scrollRootBy } from "./scrollRoot.js";
 export { useColumnPinning, useTableValue, withTableState } from "./tableReactivity.js";

package/dist/components/Table/lib/isGroupRow.d.ts

@@ -0,0 +1,8 @@
+import type { Row, RowData } from '@tanstack/react-table';
+import type { DSTableFeatures } from './dsTableFeatures.js';
+/**
+ * Whether a row renders as a group parent: it has sub-rows, or — with
+ * `showEmptyGroups` — it is a top-level row whose `getSubRows` returned an
+ * array, empty or not.
+ */
+export declare const isGroupRow: <T extends RowData>(row: Row<DSTableFeatures, T>, showEmptyGroups: boolean) => boolean;

package/dist/components/Table/lib/isGroupRow.js

@@ -0,0 +1,2 @@
+const isGroupRow = (row, showEmptyGroups)=>row.subRows.length > 0 || showEmptyGroups && 0 === row.depth && void 0 !== row.originalSubRows;
+export { isGroupRow };

package/dist/components/Table/lib/useRowDnd.js

@@ -1,42 +1,44 @@
 import { c } from "react/compiler-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import { useTableContext } from "../TableContext/useTableContext.js";
+import { isGroupRow } from "./isGroupRow.js";
 import { useTableValue } from "./tableReactivity.js";
 const useRowDnd = (row)=>{
-    const $ = c(15);
-    const { rowDndEnabled } = useTableContext();
+    const $ = c(16);
+    const { rowDndEnabled, showEmptyGroups } = useTableContext();
     let t0;
-    if ($[0] !== row.subRows.length) {
-        t0 = ()=>row.subRows.length > 0;
-        $[0] = row.subRows.length;
-        $[1] = t0;
-    } else t0 = $[1];
-    const hasSubRows = useTableValue(t0);
-    const canDnd = rowDndEnabled && !hasSubRows;
+    if ($[0] !== row || $[1] !== showEmptyGroups) {
+        t0 = ()=>isGroupRow(row, showEmptyGroups);
+        $[0] = row;
+        $[1] = showEmptyGroups;
+        $[2] = t0;
+    } else t0 = $[2];
+    const isGroup = useTableValue(t0);
+    const canDnd = rowDndEnabled && !isGroup;
     const t1 = !canDnd;
     let t2;
-    if ($[2] !== row.id || $[3] !== t1) {
+    if ($[3] !== row.id || $[4] !== t1) {
         t2 = {
             id: row.id,
             disabled: t1
         };
-        $[2] = row.id;
-        $[3] = t1;
-        $[4] = t2;
-    } else t2 = $[4];
+        $[3] = row.id;
+        $[4] = t1;
+        $[5] = t2;
+    } else t2 = $[5];
     const { attributes, listeners, setNodeRef, isDragging } = useSortable(t2);
     let t3;
-    if ($[5] !== canDnd || $[6] !== isDragging) {
+    if ($[6] !== canDnd || $[7] !== isDragging) {
         t3 = canDnd && isDragging ? {
             opacity: 0.4
         } : {};
-        $[5] = canDnd;
-        $[6] = isDragging;
-        $[7] = t3;
-    } else t3 = $[7];
+        $[6] = canDnd;
+        $[7] = isDragging;
+        $[8] = t3;
+    } else t3 = $[8];
     const style = t3;
     let t4;
-    if ($[8] !== attributes || $[9] !== canDnd || $[10] !== isDragging || $[11] !== listeners || $[12] !== setNodeRef || $[13] !== style) {
+    if ($[9] !== attributes || $[10] !== canDnd || $[11] !== isDragging || $[12] !== listeners || $[13] !== setNodeRef || $[14] !== style) {
         t4 = {
             canDnd,
             isDragging,
@@ -45,14 +47,14 @@ const useRowDnd = (row)=>{
             attributes,
             listeners
         };
-        $[8] = attributes;
-        $[9] = canDnd;
-        $[10] = isDragging;
-        $[11] = listeners;
-        $[12] = setNodeRef;
-        $[13] = style;
-        $[14] = t4;
-    } else t4 = $[14];
+        $[9] = attributes;
+        $[10] = canDnd;
+        $[11] = isDragging;
+        $[12] = listeners;
+        $[13] = setNodeRef;
+        $[14] = style;
+        $[15] = t4;
+    } else t4 = $[15];
     return t4;
 };
 export { useRowDnd };

package/dist/components/Table/types.d.ts

@@ -223,6 +223,12 @@ export interface TableProps<T> extends TestableProps {
     renderGroupRow?: (row: TableRow<T>) => ReactNode;
     /** Sub-row accessor for hierarchical/tree data (used with renderGroupRow) */
     getSubRows?: (row: T) => T[] | undefined;
+    /**
+     * Render a top-level row whose `getSubRows` returns an empty array as an
+     * (empty) group row instead of a plain row — for groups that stay visible
+     * with nothing in them yet. Return `undefined` for rows that are not groups.
+     */
+    showEmptyGroups?: boolean;
     expanded?: TableExpandedState;
     onExpandedChange?: TableOnChangeFn<TableExpandedState>;
     renderExpandedRow?: (row: TableRow<T>) => ReactNode;
@@ -277,7 +283,8 @@ export interface TableProps<T> extends TestableProps {
     /**
      * Callback fired when a row is dragged to a new position. When provided,
      * a drag-handle column is auto-injected and row DnD is enabled.
-     * Disabled when `getSubRows` grouping is active.
+     * With `getSubRows` grouping, group rows stay put and a row moves only
+     * among the rows of its own group.
      */
     onRowReorder?: (event: TableRowReorderEvent) => void;
     /** Callback fired when the master cell is clicked. Receives the row ID. */

package/dist/icons/ArrowRightAlt.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon.js';
+export declare const ArrowRightAlt: FC<SvgIconProps>;

package/dist/icons/ArrowRightAlt.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const ArrowRightAlt = (props)=>{
+    const $ = c(3);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("path", {
+            d: "M5.98709 12.592C5.84309 12.604 5.70509 12.616 5.57309 12.628C5.44109 12.64 5.33309 12.646 5.24909 12.646C4.97309 12.646 4.76909 12.586 4.63709 12.466C4.51709 12.346 4.45709 12.208 4.45709 12.052C4.45709 11.932 4.52909 11.812 4.67309 11.692C4.82909 11.56 5.07509 11.434 5.41109 11.314C5.68709 11.218 6.13109 11.128 6.74309 11.044C7.35509 10.96 8.06309 10.888 8.86709 10.828C9.67109 10.756 10.5051 10.696 11.3691 10.648C12.2331 10.6 13.0491 10.564 13.8171 10.54C14.5971 10.516 15.2631 10.504 15.8151 10.504C16.1151 10.504 16.3791 10.51 16.6071 10.522C16.8351 10.522 17.0391 10.528 17.2191 10.54C16.8711 10.132 16.5291 9.712 16.1931 9.28C15.8691 8.836 15.5691 8.416 15.2931 8.02C15.0291 7.624 14.8131 7.282 14.6451 6.994C14.4891 6.694 14.4111 6.49 14.4111 6.382C14.4111 6.37 14.4111 6.358 14.4111 6.346C14.4111 6.19 14.4291 6.064 14.4651 5.968C14.5011 5.86 14.6331 5.806 14.8611 5.806C14.9931 5.806 15.1971 5.926 15.4731 6.166C15.7611 6.394 16.0791 6.694 16.4271 7.066C16.7871 7.438 17.1471 7.84 17.5071 8.272C17.8671 8.704 18.1971 9.124 18.4971 9.532C18.8091 9.928 19.0611 10.276 19.2531 10.576C19.4451 10.876 19.5411 11.074 19.5411 11.17C19.5411 11.302 19.4391 11.536 19.2351 11.872C19.0311 12.196 18.7611 12.58 18.4251 13.024C18.0891 13.456 17.7291 13.9 17.3451 14.356C16.9611 14.812 16.5891 15.238 16.2291 15.634C15.8691 16.018 15.5571 16.33 15.2931 16.57C15.0291 16.81 14.8491 16.93 14.7531 16.93C14.3091 16.93 14.0871 16.738 14.0871 16.354C14.0871 16.234 14.1651 16.042 14.3211 15.778C14.4891 15.502 14.7051 15.184 14.9691 14.824C15.2451 14.452 15.5391 14.068 15.8511 13.672C16.1631 13.264 16.4751 12.874 16.7871 12.502C17.0991 12.118 17.3811 11.782 17.6331 11.494C17.2011 11.59 16.6071 11.68 15.8511 11.764C15.0951 11.836 14.2611 11.914 13.3491 11.998C12.4371 12.07 11.5191 12.142 10.5951 12.214C9.67109 12.274 8.80109 12.34 7.98509 12.412C7.18109 12.472 6.51509 12.532 5.98709 12.592Z",
+            fill: "currentColor"
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    let t1;
+    if ($[1] !== props) {
+        t1 = /*#__PURE__*/ jsx(SvgIcon, {
+            ...props,
+            viewBox: "0 0 24 24",
+            children: t0
+        });
+        $[1] = props;
+        $[2] = t1;
+    } else t1 = $[2];
+    return t1;
+};
+ArrowRightAlt.displayName = "ArrowRightAltIcon";
+export { ArrowRightAlt };