@wallarm-org/design-system 2.5.0 → 2.6.0

package/dist/components/Table/TableContext/TableProvider.js

@@ -17,16 +17,17 @@ const toTanStackPinning = (p, pinnedLeft)=>({
     });
 const TableProvider = (props)=>{
     const $ = compiler_runtime_c(168);
-    const { data, columns, isLoading: t0, isLoadingPrevious: t1, skeletonCount: t2, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting: t3, rowSelection: rowSelectionProp, onRowSelectionChange, enableSelectAllRows: t4, onSelectAllRows, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, groupRowSpan: t5, getSubRows, showEmptyGroups: t6, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, columnGroups, virtualized, stretch: t7, estimateRowHeight, overscan: t8, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onRowReorder, getRowCanDrag, renderFullWidthRow, onMasterCellClick, activeRowId: activeRowIdProp, onSettingsOpenChange } = props;
+    const { data, columns, isLoading: t0, isLoadingPrevious: t1, skeletonCount: t2, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting: t3, rowSelection: rowSelectionProp, onRowSelectionChange, enableSelectAllRows: t4, onSelectAllRows, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, groupRowSpan: t5, groupExpandColumn: t6, getSubRows, showEmptyGroups: t7, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, columnGroups, virtualized, stretch: t8, estimateRowHeight, overscan: t9, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onRowReorder, getRowCanDrag, renderFullWidthRow, onMasterCellClick, activeRowId: activeRowIdProp, onSettingsOpenChange } = props;
     const isLoading = void 0 === t0 ? false : t0;
     const isLoadingPrevious = void 0 === t1 ? false : t1;
     const skeletonCount = void 0 === t2 ? TABLE_SKELETON_ROWS : t2;
     const manualSorting = void 0 === t3 ? false : t3;
     const enableSelectAllRows = void 0 === t4 ? true : t4;
     const groupRowSpan = void 0 === t5 ? "master" : t5;
-    const showEmptyGroups = void 0 === t6 ? false : t6;
-    const stretch = void 0 === t7 ? true : t7;
-    const overscan = void 0 === t8 ? TABLE_VIRTUALIZATION_OVERSCAN : t8;
+    const groupExpandColumn = void 0 === t6 ? false : t6;
+    const showEmptyGroups = void 0 === t7 ? false : t7;
+    const stretch = void 0 === t8 ? true : t8;
+    const overscan = void 0 === t9 ? TABLE_VIRTUALIZATION_OVERSCAN : t9;
     const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
@@ -38,47 +39,51 @@ const TableProvider = (props)=>{
     const rowDndEnabled = !!onRowReorder;
     const expandingEnabled = !!renderExpandedRow || !!onExpandedChange || subRowGroupingEnabled;
     const visibilityEnabled = !!onColumnVisibilityChange;
-    let t9;
-    if ($[0] !== columns || $[1] !== data[0] || $[2] !== expandingEnabled || $[3] !== rowDndEnabled || $[4] !== selectionEnabled || $[5] !== subRowGroupingEnabled) {
+    const expandColumnEnabled = expandingEnabled && (!subRowGroupingEnabled || groupExpandColumn);
+    let t10;
+    if ($[0] !== columns || $[1] !== data[0] || $[2] !== expandColumnEnabled || $[3] !== rowDndEnabled || $[4] !== selectionEnabled || $[5] !== subRowGroupingEnabled) {
         bb0: {
             const cols = columns;
             let prefix;
-            if ($[7] !== expandingEnabled || $[8] !== rowDndEnabled || $[9] !== selectionEnabled || $[10] !== subRowGroupingEnabled) {
+            if ($[7] !== expandColumnEnabled || $[8] !== rowDndEnabled || $[9] !== selectionEnabled || $[10] !== subRowGroupingEnabled) {
                 prefix = [];
-                if (expandingEnabled && !subRowGroupingEnabled) {
-                    let t10;
-                    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-                        t10 = createExpandColumn();
-                        $[12] = t10;
-                    } else t10 = $[12];
-                    prefix.push(t10);
+                if (expandColumnEnabled) {
+                    let t11;
+                    if ($[12] !== subRowGroupingEnabled) {
+                        t11 = createExpandColumn({
+                            groupsOnly: subRowGroupingEnabled
+                        });
+                        $[12] = subRowGroupingEnabled;
+                        $[13] = t11;
+                    } else t11 = $[13];
+                    prefix.push(t11);
                 }
                 if (selectionEnabled) {
-                    let t10;
-                    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-                        t10 = createSelectionColumn();
-                        $[13] = t10;
-                    } else t10 = $[13];
-                    prefix.push(t10);
+                    let t11;
+                    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+                        t11 = createSelectionColumn();
+                        $[14] = t11;
+                    } else t11 = $[14];
+                    prefix.push(t11);
                 }
                 if (rowDndEnabled) {
-                    let t10;
-                    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-                        t10 = createDragHandleColumn();
-                        $[14] = t10;
-                    } else t10 = $[14];
-                    prefix.push(t10);
+                    let t11;
+                    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+                        t11 = createDragHandleColumn();
+                        $[15] = t11;
+                    } else t11 = $[15];
+                    prefix.push(t11);
                 }
-                $[7] = expandingEnabled;
+                $[7] = expandColumnEnabled;
                 $[8] = rowDndEnabled;
                 $[9] = selectionEnabled;
                 $[10] = subRowGroupingEnabled;
                 $[11] = prefix;
             } else prefix = $[11];
             const firstRow = data[0];
-            let t10;
-            if ($[15] !== firstRow) {
-                t10 = (col)=>{
+            let t11;
+            if ($[16] !== firstRow) {
+                t11 = (col)=>{
                     if (!firstRow || !("accessorKey" in col) || col.meta?.sortType) return col;
                     const value = firstRow[col.accessorKey];
                     if ("number" == typeof value) return {
@@ -90,17 +95,17 @@ const TableProvider = (props)=>{
                     };
                     return col;
                 };
-                $[15] = firstRow;
-                $[16] = t10;
-            } else t10 = $[16];
-            const withAutoMeta = cols.map(t10);
+                $[16] = firstRow;
+                $[17] = t11;
+            } else t11 = $[17];
+            const withAutoMeta = cols.map(t11);
             const masterOverrides = {
                 enableColumnPinning: false,
                 enableHiding: false
             };
             if (0 === prefix.length) {
                 if (withAutoMeta.length > 0) {
-                    t9 = [
+                    t10 = [
                         {
                             ...withAutoMeta[0],
                             ...masterOverrides
@@ -109,118 +114,117 @@ const TableProvider = (props)=>{
                     ];
                     break bb0;
                 }
-                t9 = withAutoMeta;
+                t10 = withAutoMeta;
                 break bb0;
             }
             const userCols = withAutoMeta.length > 0 ? withAutoMeta.map((col_0, index)=>0 === index ? {
                     ...col_0,
                     ...masterOverrides
                 } : col_0) : withAutoMeta;
-            t9 = [
+            t10 = [
                 ...prefix,
                 ...userCols
             ];
         }
         $[0] = columns;
         $[1] = data[0];
-        $[2] = expandingEnabled;
+        $[2] = expandColumnEnabled;
         $[3] = rowDndEnabled;
         $[4] = selectionEnabled;
         $[5] = subRowGroupingEnabled;
-        $[6] = t9;
-    } else t9 = $[6];
-    const mergedColumns = t9;
-    let t10;
+        $[6] = t10;
+    } else t10 = $[6];
+    const mergedColumns = t10;
+    let t11;
     bb1: {
         if (0 === columns.length) {
-            t10 = null;
+            t11 = null;
             break bb1;
         }
         const firstCol = columns[0];
         if (!firstCol) {
-            t10 = null;
+            t11 = null;
             break bb1;
         }
-        t10 = ("accessorKey" in firstCol ? String(firstCol.accessorKey) : firstCol.id) ?? null;
+        t11 = ("accessorKey" in firstCol ? String(firstCol.accessorKey) : firstCol.id) ?? null;
     }
-    const masterColumnId = t10;
+    const masterColumnId = t11;
     let ids;
-    if ($[17] !== expandingEnabled || $[18] !== masterColumnId || $[19] !== rowDndEnabled || $[20] !== selectionEnabled || $[21] !== subRowGroupingEnabled) {
+    if ($[18] !== expandColumnEnabled || $[19] !== masterColumnId || $[20] !== rowDndEnabled || $[21] !== selectionEnabled) {
         ids = [];
-        if (expandingEnabled && !subRowGroupingEnabled) ids.push(TABLE_EXPAND_COLUMN_ID);
+        if (expandColumnEnabled) ids.push(TABLE_EXPAND_COLUMN_ID);
         if (selectionEnabled) ids.push(TABLE_SELECT_COLUMN_ID);
         if (rowDndEnabled) ids.push(TABLE_DRAG_HANDLE_COLUMN_ID);
         if (masterColumnId) ids.push(masterColumnId);
-        $[17] = expandingEnabled;
-        $[18] = masterColumnId;
-        $[19] = rowDndEnabled;
-        $[20] = selectionEnabled;
-        $[21] = subRowGroupingEnabled;
+        $[18] = expandColumnEnabled;
+        $[19] = masterColumnId;
+        $[20] = rowDndEnabled;
+        $[21] = selectionEnabled;
         $[22] = ids;
     } else ids = $[22];
     const alwaysPinnedLeft = ids;
-    let t11;
-    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-        t11 = [];
-        $[23] = t11;
-    } else t11 = $[23];
-    const [sorting, handleSortingChange] = useTableState(sortingProp, t11, onSortingChange);
     let t12;
-    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-        t12 = {};
-        $[24] = t12;
-    } else t12 = $[24];
-    const [rowSelection, handleRowSelectionChange] = useTableState(rowSelectionProp, t12, onRowSelectionChange);
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+        t12 = [];
+        $[23] = t12;
+    } else t12 = $[23];
+    const [sorting, handleSortingChange] = useTableState(sortingProp, t12, onSortingChange);
     let t13;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
         t13 = {};
-        $[25] = t13;
-    } else t13 = $[25];
-    const [columnSizing, handleColumnSizingChange] = useTableState(columnSizingProp, t13, onColumnSizingChange);
+        $[24] = t13;
+    } else t13 = $[24];
+    const [rowSelection, handleRowSelectionChange] = useTableState(rowSelectionProp, t13, onRowSelectionChange);
     let t14;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = {};
+        $[25] = t14;
+    } else t14 = $[25];
+    const [columnSizing, handleColumnSizingChange] = useTableState(columnSizingProp, t14, onColumnSizingChange);
+    let t15;
     if ($[26] !== defaultColumnOrder) {
-        t14 = defaultColumnOrder ?? [];
+        t15 = defaultColumnOrder ?? [];
         $[26] = defaultColumnOrder;
-        $[27] = t14;
-    } else t14 = $[27];
-    const [columnOrder, handleColumnOrderChange] = useTableState(columnOrderProp, t14, onColumnOrderChange);
-    let t15;
-    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-        t15 = [];
-        $[28] = t15;
-    } else t15 = $[28];
-    const [grouping, handleGroupingChange] = useTableState(groupingProp, t15, onGroupingChange);
+        $[27] = t15;
+    } else t15 = $[27];
+    const [columnOrder, handleColumnOrderChange] = useTableState(columnOrderProp, t15, onColumnOrderChange);
     let t16;
-    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-        t16 = {};
-        $[29] = t16;
-    } else t16 = $[29];
-    const [expanded, handleExpandedChange] = useTableState(expandedProp, t16, onExpandedChange);
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+        t16 = [];
+        $[28] = t16;
+    } else t16 = $[28];
+    const [grouping, handleGroupingChange] = useTableState(groupingProp, t16, onGroupingChange);
     let t17;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+        t17 = {};
+        $[29] = t17;
+    } else t17 = $[29];
+    const [expanded, handleExpandedChange] = useTableState(expandedProp, t17, onExpandedChange);
+    let t18;
     if ($[30] !== defaultColumnVisibility) {
-        t17 = defaultColumnVisibility ?? {};
+        t18 = defaultColumnVisibility ?? {};
         $[30] = defaultColumnVisibility;
-        $[31] = t17;
-    } else t17 = $[31];
-    const [columnVisibility, handleColumnVisibilityChange] = useTableState(columnVisibilityProp, t17, onColumnVisibilityChange);
-    let t18;
-    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-        t18 = {};
-        $[32] = t18;
-    } else t18 = $[32];
+        $[31] = t18;
+    } else t18 = $[31];
+    const [columnVisibility, handleColumnVisibilityChange] = useTableState(columnVisibilityProp, t18, onColumnVisibilityChange);
     let t19;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+        t19 = {};
+        $[32] = t19;
+    } else t19 = $[32];
+    let t20;
     if ($[33] !== columnPinningProp) {
-        t19 = {
+        t20 = {
             controlled: columnPinningProp,
-            default: t18
+            default: t19
         };
         $[33] = columnPinningProp;
-        $[34] = t19;
-    } else t19 = $[34];
-    const [columnPinning, setColumnPinningInternal] = useControlled(t19);
-    let t20;
+        $[34] = t20;
+    } else t20 = $[34];
+    const [columnPinning, setColumnPinningInternal] = useControlled(t20);
+    let t21;
     if ($[35] !== alwaysPinnedLeft || $[36] !== columnPinning || $[37] !== onColumnPinningChange || $[38] !== setColumnPinningInternal) {
-        t20 = (updater)=>{
+        t21 = (updater)=>{
             const prevTanStackShape = toTanStackPinning(columnPinning, alwaysPinnedLeft);
             const newValue = "function" == typeof updater ? updater(prevTanStackShape) : updater;
             const enforcedStart = [
@@ -238,12 +242,12 @@ const TableProvider = (props)=>{
         $[36] = columnPinning;
         $[37] = onColumnPinningChange;
         $[38] = setColumnPinningInternal;
-        $[39] = t20;
-    } else t20 = $[39];
-    const handleColumnPinningChange = t20;
-    let t21;
+        $[39] = t21;
+    } else t21 = $[39];
+    const handleColumnPinningChange = t21;
+    let t22;
     if ($[40] !== alwaysPinnedLeft || $[41] !== handleColumnOrderChange) {
-        t21 = (newOrder)=>{
+        t22 = (newOrder)=>{
             const rest = newOrder.filter((id_0)=>!alwaysPinnedLeft.includes(id_0));
             handleColumnOrderChange([
                 ...alwaysPinnedLeft,
@@ -252,142 +256,142 @@ const TableProvider = (props)=>{
         };
         $[40] = alwaysPinnedLeft;
         $[41] = handleColumnOrderChange;
-        $[42] = t21;
-    } else t21 = $[42];
-    const setColumnOrder = t21;
-    let t22;
+        $[42] = t22;
+    } else t22 = $[42];
+    const setColumnOrder = t22;
+    let t23;
     if ($[43] !== sorting) {
-        t22 = sorting ?? [];
+        t23 = sorting ?? [];
         $[43] = sorting;
-        $[44] = t22;
-    } else t22 = $[44];
-    let t23;
+        $[44] = t23;
+    } else t23 = $[44];
+    let t24;
     if ($[45] !== rowSelection) {
-        t23 = rowSelection ?? {};
+        t24 = rowSelection ?? {};
         $[45] = rowSelection;
-        $[46] = t23;
-    } else t23 = $[46];
-    let t24;
+        $[46] = t24;
+    } else t24 = $[46];
+    let t25;
     if ($[47] !== columnSizing) {
-        t24 = columnSizing ?? {};
+        t25 = columnSizing ?? {};
         $[47] = columnSizing;
-        $[48] = t24;
-    } else t24 = $[48];
-    let t25;
+        $[48] = t25;
+    } else t25 = $[48];
+    let t26;
     if ($[49] !== alwaysPinnedLeft || $[50] !== columnPinning) {
-        t25 = toTanStackPinning(columnPinning, alwaysPinnedLeft);
+        t26 = toTanStackPinning(columnPinning, alwaysPinnedLeft);
         $[49] = alwaysPinnedLeft;
         $[50] = columnPinning;
-        $[51] = t25;
-    } else t25 = $[51];
-    let t26;
+        $[51] = t26;
+    } else t26 = $[51];
+    let t27;
     if ($[52] !== columnOrder) {
-        t26 = columnOrder ?? [];
+        t27 = columnOrder ?? [];
         $[52] = columnOrder;
-        $[53] = t26;
-    } else t26 = $[53];
-    let t27;
+        $[53] = t27;
+    } else t27 = $[53];
+    let t28;
     if ($[54] !== grouping) {
-        t27 = grouping ?? [];
+        t28 = grouping ?? [];
         $[54] = grouping;
-        $[55] = t27;
-    } else t27 = $[55];
-    let t28;
+        $[55] = t28;
+    } else t28 = $[55];
+    let t29;
     if ($[56] !== expanded) {
-        t28 = expanded ?? {};
+        t29 = expanded ?? {};
         $[56] = expanded;
-        $[57] = t28;
-    } else t28 = $[57];
-    let t29;
+        $[57] = t29;
+    } else t29 = $[57];
+    let t30;
     if ($[58] !== columnVisibility) {
-        t29 = columnVisibility ?? {};
+        t30 = columnVisibility ?? {};
         $[58] = columnVisibility;
-        $[59] = t29;
-    } else t29 = $[59];
-    let t30;
-    if ($[60] !== t22 || $[61] !== t23 || $[62] !== t24 || $[63] !== t25 || $[64] !== t26 || $[65] !== t27 || $[66] !== t28 || $[67] !== t29) {
-        t30 = {
-            sorting: t22,
-            rowSelection: t23,
-            columnSizing: t24,
-            columnPinning: t25,
-            columnOrder: t26,
-            grouping: t27,
-            expanded: t28,
-            columnVisibility: t29
+        $[59] = t30;
+    } else t30 = $[59];
+    let t31;
+    if ($[60] !== t23 || $[61] !== t24 || $[62] !== t25 || $[63] !== t26 || $[64] !== t27 || $[65] !== t28 || $[66] !== t29 || $[67] !== t30) {
+        t31 = {
+            sorting: t23,
+            rowSelection: t24,
+            columnSizing: t25,
+            columnPinning: t26,
+            columnOrder: t27,
+            grouping: t28,
+            expanded: t29,
+            columnVisibility: t30
         };
-        $[60] = t22;
-        $[61] = t23;
-        $[62] = t24;
-        $[63] = t25;
-        $[64] = t26;
-        $[65] = t27;
-        $[66] = t28;
-        $[67] = t29;
-        $[68] = t30;
-    } else t30 = $[68];
-    const t31 = sortingEnabled ? handleSortingChange : void 0;
-    const t32 = selectionEnabled ? handleRowSelectionChange : void 0;
-    const t33 = resizingEnabled ? handleColumnSizingChange : void 0;
-    const t34 = pinningEnabled ? handleColumnPinningChange : void 0;
-    const t35 = columnDndEnabled ? handleColumnOrderChange : void 0;
-    const t36 = groupingEnabled ? handleGroupingChange : void 0;
-    const t37 = expandingEnabled ? handleExpandedChange : void 0;
-    const t38 = visibilityEnabled ? handleColumnVisibilityChange : void 0;
-    let t39;
+        $[60] = t23;
+        $[61] = t24;
+        $[62] = t25;
+        $[63] = t26;
+        $[64] = t27;
+        $[65] = t28;
+        $[66] = t29;
+        $[67] = t30;
+        $[68] = t31;
+    } else t31 = $[68];
+    const t32 = sortingEnabled ? handleSortingChange : void 0;
+    const t33 = selectionEnabled ? handleRowSelectionChange : void 0;
+    const t34 = resizingEnabled ? handleColumnSizingChange : void 0;
+    const t35 = pinningEnabled ? handleColumnPinningChange : void 0;
+    const t36 = columnDndEnabled ? handleColumnOrderChange : void 0;
+    const t37 = groupingEnabled ? handleGroupingChange : void 0;
+    const t38 = expandingEnabled ? handleExpandedChange : void 0;
+    const t39 = visibilityEnabled ? handleColumnVisibilityChange : void 0;
+    let t40;
     if ($[69] !== expandingEnabled) {
-        t39 = expandingEnabled ? {
+        t40 = expandingEnabled ? {
             autoResetExpanded: false
         } : {};
         $[69] = expandingEnabled;
-        $[70] = t39;
-    } else t39 = $[70];
-    let t40;
+        $[70] = t40;
+    } else t40 = $[70];
+    let t41;
     if ($[71] !== expandingEnabled || $[72] !== renderExpandedRow || $[73] !== subRowGroupingEnabled) {
-        t40 = expandingEnabled && (renderExpandedRow || subRowGroupingEnabled) ? {
+        t41 = expandingEnabled && (renderExpandedRow || subRowGroupingEnabled) ? {
             getRowCanExpand: _temp
         } : {};
         $[71] = expandingEnabled;
         $[72] = renderExpandedRow;
         $[73] = subRowGroupingEnabled;
-        $[74] = t40;
-    } else t40 = $[74];
-    let t41;
+        $[74] = t41;
+    } else t41 = $[74];
+    let t42;
     if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
-        t41 = {
+        t42 = {
             minSize: TABLE_MIN_COLUMN_WIDTH
         };
-        $[75] = t41;
-    } else t41 = $[75];
-    let t42;
-    if ($[76] !== data || $[77] !== expandingEnabled || $[78] !== getRowId || $[79] !== getSubRows || $[80] !== groupingEnabled || $[81] !== manualSorting || $[82] !== mergedColumns || $[83] !== resizingEnabled || $[84] !== selectionEnabled || $[85] !== sortingEnabled || $[86] !== t30 || $[87] !== t31 || $[88] !== t32 || $[89] !== t33 || $[90] !== t34 || $[91] !== t35 || $[92] !== t36 || $[93] !== t37 || $[94] !== t38 || $[95] !== t39 || $[96] !== t40 || $[97] !== visibilityEnabled) {
-        t42 = {
+        $[75] = t42;
+    } else t42 = $[75];
+    let t43;
+    if ($[76] !== data || $[77] !== expandingEnabled || $[78] !== getRowId || $[79] !== getSubRows || $[80] !== groupingEnabled || $[81] !== manualSorting || $[82] !== mergedColumns || $[83] !== resizingEnabled || $[84] !== selectionEnabled || $[85] !== sortingEnabled || $[86] !== t31 || $[87] !== t32 || $[88] !== t33 || $[89] !== t34 || $[90] !== t35 || $[91] !== t36 || $[92] !== t37 || $[93] !== t38 || $[94] !== t39 || $[95] !== t40 || $[96] !== t41 || $[97] !== visibilityEnabled) {
+        t43 = {
             features: dsTableFeatures,
             data,
             columns: mergedColumns,
             getRowId,
             getSubRows,
             manualSorting,
-            state: t30,
-            onSortingChange: t31,
-            onRowSelectionChange: t32,
-            onColumnSizingChange: t33,
-            onColumnPinningChange: t34,
-            onColumnOrderChange: t35,
-            onGroupingChange: t36,
-            onExpandedChange: t37,
-            onColumnVisibilityChange: t38,
+            state: t31,
+            onSortingChange: t32,
+            onRowSelectionChange: t33,
+            onColumnSizingChange: t34,
+            onColumnPinningChange: t35,
+            onColumnOrderChange: t36,
+            onGroupingChange: t37,
+            onExpandedChange: t38,
+            onColumnVisibilityChange: t39,
             enableSorting: sortingEnabled,
             enableRowSelection: selectionEnabled,
             enableColumnResizing: resizingEnabled,
             enableColumnPinning: true,
             enableGrouping: groupingEnabled,
             enableExpanding: expandingEnabled,
-            ...t39,
             ...t40,
+            ...t41,
             enableHiding: visibilityEnabled,
             columnResizeMode: "onChange",
-            defaultColumn: t41
+            defaultColumn: t42
         };
         $[76] = data;
         $[77] = expandingEnabled;
@@ -399,41 +403,41 @@ const TableProvider = (props)=>{
         $[83] = resizingEnabled;
         $[84] = selectionEnabled;
         $[85] = sortingEnabled;
-        $[86] = t30;
-        $[87] = t31;
-        $[88] = t32;
-        $[89] = t33;
-        $[90] = t34;
-        $[91] = t35;
-        $[92] = t36;
-        $[93] = t37;
-        $[94] = t38;
-        $[95] = t39;
-        $[96] = t40;
+        $[86] = t31;
+        $[87] = t32;
+        $[88] = t33;
+        $[89] = t34;
+        $[90] = t35;
+        $[91] = t36;
+        $[92] = t37;
+        $[93] = t38;
+        $[94] = t39;
+        $[95] = t40;
+        $[96] = t41;
         $[97] = visibilityEnabled;
-        $[98] = t42;
-    } else t42 = $[98];
-    const table = useTable(t42);
-    let t43;
+        $[98] = t43;
+    } else t43 = $[98];
+    const table = useTable(t43);
+    let t44;
     if ($[99] !== table) {
-        t43 = table.getAllLeafColumns();
+        t44 = table.getAllLeafColumns();
         $[99] = table;
-        $[100] = t43;
-    } else t43 = $[100];
-    const allLeafColumns = t43;
+        $[100] = t44;
+    } else t44 = $[100];
+    const allLeafColumns = t44;
     const lastSelectedRowIndexRef = useRef(null);
     const containerRef = useRef(null);
     const headerScrollRef = useRef(null);
     const tbodyRef = useRef(null);
     const virtualizerRef = useRef(null);
-    const t44 = !!getSubRows;
-    const t45 = renderExpandedRow;
-    const t46 = getRowCanDrag;
-    const t47 = "full" === groupRowSpan ? renderGroupRow : void 0;
-    const t48 = renderFullWidthRow;
-    let t49;
-    if ($[101] !== allLeafColumns || $[102] !== alwaysPinnedLeft || $[103] !== columnDndEnabled || $[104] !== columnGroups || $[105] !== defaultColumnOrder || $[106] !== defaultColumnVisibility || $[107] !== enableSelectAllRows || $[108] !== estimateRowHeight || $[109] !== expandingEnabled || $[110] !== groupingEnabled || $[111] !== initialScrollToRowId || $[112] !== isLoading || $[113] !== isLoadingPrevious || $[114] !== masterCellActiveRowId || $[115] !== masterColumnId || $[116] !== onEndReached || $[117] !== onEndReachedThreshold || $[118] !== onMasterCellClick || $[119] !== onRowReorder || $[120] !== onSelectAllRows || $[121] !== onSettingsOpenChange || $[122] !== onStartReached || $[123] !== onStartReachedThreshold || $[124] !== overscan || $[125] !== pinningEnabled || $[126] !== resizingEnabled || $[127] !== rowDndEnabled || $[128] !== selectionEnabled || $[129] !== setColumnOrder || $[130] !== showEmptyGroups || $[131] !== skeletonCount || $[132] !== sortingEnabled || $[133] !== stretch || $[134] !== t44 || $[135] !== t45 || $[136] !== t46 || $[137] !== t47 || $[138] !== t48 || $[139] !== table || $[140] !== virtualized || $[141] !== visibilityEnabled) {
-        t49 = {
+    const t45 = !!getSubRows;
+    const t46 = renderExpandedRow;
+    const t47 = getRowCanDrag;
+    const t48 = "full" === groupRowSpan ? renderGroupRow : void 0;
+    const t49 = renderFullWidthRow;
+    let t50;
+    if ($[101] !== allLeafColumns || $[102] !== alwaysPinnedLeft || $[103] !== columnDndEnabled || $[104] !== columnGroups || $[105] !== defaultColumnOrder || $[106] !== defaultColumnVisibility || $[107] !== enableSelectAllRows || $[108] !== estimateRowHeight || $[109] !== expandingEnabled || $[110] !== groupingEnabled || $[111] !== initialScrollToRowId || $[112] !== isLoading || $[113] !== isLoadingPrevious || $[114] !== masterCellActiveRowId || $[115] !== masterColumnId || $[116] !== onEndReached || $[117] !== onEndReachedThreshold || $[118] !== onMasterCellClick || $[119] !== onRowReorder || $[120] !== onSelectAllRows || $[121] !== onSettingsOpenChange || $[122] !== onStartReached || $[123] !== onStartReachedThreshold || $[124] !== overscan || $[125] !== pinningEnabled || $[126] !== resizingEnabled || $[127] !== rowDndEnabled || $[128] !== selectionEnabled || $[129] !== setColumnOrder || $[130] !== showEmptyGroups || $[131] !== skeletonCount || $[132] !== sortingEnabled || $[133] !== stretch || $[134] !== t45 || $[135] !== t46 || $[136] !== t47 || $[137] !== t48 || $[138] !== t49 || $[139] !== table || $[140] !== virtualized || $[141] !== visibilityEnabled) {
+        t50 = {
             table,
             isLoading,
             isLoadingPrevious,
@@ -447,11 +451,11 @@ const TableProvider = (props)=>{
             groupingEnabled,
             expandingEnabled,
             visibilityEnabled,
-            hasSubRowGrouping: t44,
+            hasSubRowGrouping: t45,
             showEmptyGroups,
             virtualized,
             stretch,
-            renderExpandedRow: t45,
+            renderExpandedRow: t46,
             estimateRowHeight,
             overscan,
             allLeafColumns,
@@ -474,9 +478,9 @@ const TableProvider = (props)=>{
             onStartReachedThreshold,
             initialScrollToRowId,
             onRowReorder,
-            getRowCanDrag: t46,
-            renderFullWidthGroupRow: t47,
-            renderFullWidthRow: t48,
+            getRowCanDrag: t47,
+            renderFullWidthGroupRow: t48,
+            renderFullWidthRow: t49,
             onMasterCellClick,
             activeRowId: masterCellActiveRowId,
             onSettingsOpenChange
@@ -514,21 +518,21 @@ const TableProvider = (props)=>{
         $[131] = skeletonCount;
         $[132] = sortingEnabled;
         $[133] = stretch;
-        $[134] = t44;
-        $[135] = t45;
-        $[136] = t46;
-        $[137] = t47;
-        $[138] = t48;
+        $[134] = t45;
+        $[135] = t46;
+        $[136] = t47;
+        $[137] = t48;
+        $[138] = t49;
         $[139] = table;
         $[140] = virtualized;
         $[141] = visibilityEnabled;
-        $[142] = t49;
-    } else t49 = $[142];
-    const contextValue = t49;
-    let t50;
+        $[142] = t50;
+    } else t50 = $[142];
+    const contextValue = t50;
     let t51;
+    let t52;
     if ($[143] !== selectionEnabled || $[144] !== table) {
-        t50 = ()=>{
+        t51 = ()=>{
             if (!selectionEnabled) return;
             const container = containerRef.current;
             if (!container) return;
@@ -538,39 +542,39 @@ const TableProvider = (props)=>{
             container.addEventListener("keydown", handleKeyDown);
             return ()=>container.removeEventListener("keydown", handleKeyDown);
         };
-        t51 = [
+        t52 = [
             selectionEnabled,
             table
         ];
         $[143] = selectionEnabled;
         $[144] = table;
-        $[145] = t50;
-        $[146] = t51;
+        $[145] = t51;
+        $[146] = t52;
     } else {
-        t50 = $[145];
-        t51 = $[146];
+        t51 = $[145];
+        t52 = $[146];
     }
-    useEffect(t50, t51);
-    let t52;
+    useEffect(t51, t52);
+    let t53;
     if ($[147] === Symbol.for("react.memo_cache_sentinel")) {
-        t52 = {
+        t53 = {
             activationConstraint: {
                 distance: 5
             }
         };
-        $[147] = t52;
-    } else t52 = $[147];
-    let t53;
+        $[147] = t53;
+    } else t53 = $[147];
+    let t54;
     if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
-        t53 = {
+        t54 = {
             coordinateGetter: sortableKeyboardCoordinates
         };
-        $[148] = t53;
-    } else t53 = $[148];
-    const sensors = useSensors(useSensor(PointerSensor, t52), useSensor(KeyboardSensor, t53));
-    let t54;
+        $[148] = t54;
+    } else t54 = $[148];
+    const sensors = useSensors(useSensor(PointerSensor, t53), useSensor(KeyboardSensor, t54));
+    let t55;
     if ($[149] !== allLeafColumns || $[150] !== setColumnOrder || $[151] !== table.atoms) {
-        t54 = (event)=>{
+        t55 = (event)=>{
             const { active, over } = event;
             if (!over || active.id === over.id) return;
             const columnOrderAtom = table.atoms.columnOrder.get();
@@ -583,57 +587,57 @@ const TableProvider = (props)=>{
         $[149] = allLeafColumns;
         $[150] = setColumnOrder;
         $[151] = table.atoms;
-        $[152] = t54;
-    } else t54 = $[152];
-    const handleDragEnd = t54;
-    let t55;
+        $[152] = t55;
+    } else t55 = $[152];
+    const handleDragEnd = t55;
+    let t56;
     if ($[153] !== allLeafColumns || $[154] !== alwaysPinnedLeft || $[155] !== columnDndEnabled) {
-        t55 = columnDndEnabled ? allLeafColumns.filter((c_0)=>!alwaysPinnedLeft.includes(c_0.id)).map(_temp3) : [];
+        t56 = columnDndEnabled ? allLeafColumns.filter((c_0)=>!alwaysPinnedLeft.includes(c_0.id)).map(_temp3) : [];
         $[153] = allLeafColumns;
         $[154] = alwaysPinnedLeft;
         $[155] = columnDndEnabled;
-        $[156] = t55;
-    } else t55 = $[156];
-    const columnIds = t55;
-    const t56 = columnDndEnabled ? sensors : void 0;
-    const t57 = columnDndEnabled ? closestCenter : void 0;
-    const t58 = columnDndEnabled ? handleDragEnd : void 0;
-    let t59;
+        $[156] = t56;
+    } else t56 = $[156];
+    const columnIds = t56;
+    const t57 = columnDndEnabled ? sensors : void 0;
+    const t58 = columnDndEnabled ? closestCenter : void 0;
+    const t59 = columnDndEnabled ? handleDragEnd : void 0;
+    let t60;
     if ($[157] !== children || $[158] !== columnIds) {
-        t59 = /*#__PURE__*/ jsx(SortableContext, {
+        t60 = /*#__PURE__*/ jsx(SortableContext, {
             items: columnIds,
             strategy: horizontalListSortingStrategy,
             children: children
         });
         $[157] = children;
         $[158] = columnIds;
-        $[159] = t59;
-    } else t59 = $[159];
-    let t60;
-    if ($[160] !== t56 || $[161] !== t57 || $[162] !== t58 || $[163] !== t59) {
-        t60 = /*#__PURE__*/ jsx(DndContext, {
-            sensors: t56,
-            collisionDetection: t57,
-            onDragEnd: t58,
-            children: t59
-        });
-        $[160] = t56;
-        $[161] = t57;
-        $[162] = t58;
-        $[163] = t59;
-        $[164] = t60;
-    } else t60 = $[164];
+        $[159] = t60;
+    } else t60 = $[159];
     let t61;
-    if ($[165] !== contextValue || $[166] !== t60) {
-        t61 = /*#__PURE__*/ jsx(TableContext.Provider, {
-            value: contextValue,
+    if ($[160] !== t57 || $[161] !== t58 || $[162] !== t59 || $[163] !== t60) {
+        t61 = /*#__PURE__*/ jsx(DndContext, {
+            sensors: t57,
+            collisionDetection: t58,
+            onDragEnd: t59,
             children: t60
         });
+        $[160] = t57;
+        $[161] = t58;
+        $[162] = t59;
+        $[163] = t60;
+        $[164] = t61;
+    } else t61 = $[164];
+    let t62;
+    if ($[165] !== contextValue || $[166] !== t61) {
+        t62 = /*#__PURE__*/ jsx(TableContext.Provider, {
+            value: contextValue,
+            children: t61
+        });
         $[165] = contextValue;
-        $[166] = t60;
-        $[167] = t61;
-    } else t61 = $[167];
-    return t61;
+        $[166] = t61;
+        $[167] = t62;
+    } else t62 = $[167];
+    return t62;
 };
 function _temp() {
     return true;

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

@@ -2,6 +2,10 @@ import type { ColumnDef, RowData } from '@tanstack/react-table';
 import type { DSTableFeatures } from './dsTableFeatures.js';
 /**
  * Creates an expand/collapse column for use in Table.
- * Automatically injected by Table when `renderExpandedRow` is provided.
+ * Automatically injected by Table when `renderExpandedRow` is provided, or
+ * with `groupExpandColumn` in sub-row grouping mode — where every row can
+ * expand, so `groupsOnly` limits the toggle to rows that have sub-rows.
  */
-export declare const createExpandColumn: <T extends RowData>() => ColumnDef<DSTableFeatures, T, unknown>;
+export declare const createExpandColumn: <T extends RowData>({ groupsOnly, }?: {
+    groupsOnly?: boolean;
+}) => ColumnDef<DSTableFeatures, T, unknown>;

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

@@ -3,7 +3,7 @@ import { ChevronDown, ChevronRight } from "../../../icons/index.js";
 import { ToggleButton } from "../../ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
 import { TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH } from "./constants.js";
-const createExpandColumn = ()=>({
+const createExpandColumn = ({ groupsOnly = false } = {})=>({
         id: TABLE_EXPAND_COLUMN_ID,
         size: TABLE_EXPAND_COLUMN_WIDTH,
         minSize: TABLE_EXPAND_COLUMN_WIDTH,
@@ -18,7 +18,7 @@ const createExpandColumn = ()=>({
         },
         header: ()=>null,
         cell: ({ row })=>{
-            if (!row.getCanExpand()) return null;
+            if (!row.getCanExpand() || groupsOnly && 0 === row.subRows.length) return null;
             const expanded = row.getIsExpanded();
             return /*#__PURE__*/ jsxs(Tooltip, {
                 children: [

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

@@ -241,6 +241,13 @@ export interface TableProps<T> extends TestableProps {
      *   right edge of the table. Requires `renderGroupRow`.
      */
     groupRowSpan?: 'master' | 'full';
+    /**
+     * Keep the expand column in sub-row grouping mode (`renderGroupRow`), which
+     * otherwise drops it and leaves the toggle to the group row's content. The
+     * column comes first, ahead of the drag handle, and shows a toggle on group
+     * rows only — so the rows of a group, drag handle included, sit inside it.
+     */
+    groupExpandColumn?: boolean;
     /** Sub-row accessor for hierarchical/tree data (used with renderGroupRow) */
     getSubRows?: (row: T) => T[] | undefined;
     /**

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.4.0",
-  "generatedAt": "2026-10-13T09:13:52.244Z",
+  "version": "2.5.0",
+  "generatedAt": "2026-10-13T13:29:53.372Z",
   "components": [
     {
       "name": "Accordion",
@@ -101537,6 +101537,12 @@
           "required": false,
           "description": "How a group row lays out its content.\n\n- `'master'` (default): the master column's cell, then empty filler cells —\n  the content is confined to the master column width.\n- `'full'`: `renderGroupRow(row)` in a single cell spanning every data\n  column (system cells — selection, drag handle — keep their own cells).\n  Use for a group header with a title on the left and actions pinned to the\n  right edge of the table. Requires `renderGroupRow`."
         },
+        {
+          "name": "groupExpandColumn",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Keep the expand column in sub-row grouping mode (`renderGroupRow`), which\notherwise drops it and leaves the toggle to the group row's content. The\ncolumn comes first, ahead of the drag handle, and shows a toggle on group\nrows only — so the rows of a group, drag handle included, sit inside it."
+        },
         {
           "name": "getSubRows",
           "type": "((row: T) => T[] | undefined) | undefined",
@@ -107828,6 +107834,11 @@
           "code": "() => {\n  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [\n    {\n      ...groupedHeaderData[0]!,\n      children: [\n        { ...groupedHeaderData[0]!, id: `${BANNER_ROW_PREFIX}csp`, children: undefined },\n        ...(groupedHeaderData[0]!.children ?? []),\n      ],\n    },\n    ...groupedHeaderData.slice(1, 3),\n    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },\n  ]);\n  const [expanded, setExpanded] = useState<TableExpandedState>(true);\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev =>\n      prev.map(group => {\n        const children = group.children ?? [];\n        const oldIndex = children.findIndex(row => row.id === event.activeRowId);\n        const newIndex = children.findIndex(row => row.id === event.overRowId);\n        if (oldIndex === -1 || newIndex === -1) return group;\n        return { ...group, children: arrayMove(children, oldIndex, newIndex) };\n      }),\n    );\n  }, []);\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={data}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      showEmptyGroups\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      onRowReorder={handleRowReorder}\n      groupRowSpan='full'\n      renderGroupRow={row => {\n        const isExpanded = row.getIsExpanded();\n        return (\n          <HStack gap={8} align='center'>\n            <Button\n              variant='ghost'\n              color='neutral'\n              size='small'\n              aria-expanded={isExpanded}\n              aria-label={isExpanded ? 'Collapse group' : 'Expand group'}\n              onClick={row.getToggleExpandedHandler()}\n            >\n              {isExpanded ? <ChevronDown /> : <ChevronRight />}\n            </Button>\n            <Text weight='medium'>{row.original.objectName}</Text>\n            <Badge color='gray' type='secondary' size='medium'>\n              {row.subRows.filter(r => !r.id.startsWith(BANNER_ROW_PREFIX)).length}\n            </Badge>\n            <HStack gap={4} className='ml-auto'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <Plus />\n                Add header\n              </Button>\n              <Button variant='ghost' color='neutral' size='small' aria-label='More actions'>\n                <Ellipsis />\n              </Button>\n            </HStack>\n          </HStack>\n        );\n      }}\n      renderFullWidthRow={row =>\n        row.id.startsWith(BANNER_ROW_PREFIX) ? (\n          <HStack gap={8} align='center'>\n            <Shield size='sm' />\n            <Text size='sm' weight='medium'>\n              Wallarm baseline headers\n            </Text>\n            <Text size='sm' color='secondary'>\n              · applied first · built-in, always on\n            </Text>\n            <Button variant='ghost' color='neutral' size='small' className='ml-auto'>\n              Manage baseline →\n            </Button>\n          </HStack>\n        ) : undefined\n      }\n      getRowCanDrag={row => !row.id.startsWith(BANNER_ROW_PREFIX) && !LOCKED_ROW_IDS.has(row.id)}\n      data-testid='grouped-full-width-table'\n    />\n  );\n}",
           "description": "`groupRowSpan: 'full'` draws `renderGroupRow` across every data column — title on the left,\nactions on the right edge; the content owns the collapse toggle. `renderFullWidthRow` turns a\nregular row into a single spanning banner, and `getRowCanDrag` keeps the banner and the locked\nfirst header in place while the other rows of the group reorder around them."
         },
+        {
+          "name": "GroupedWithExpandColumn",
+          "code": "() => {\n  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [\n    ...groupedHeaderData,\n    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },\n  ]);\n  const [expanded, setExpanded] = useState<TableExpandedState>(true);\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev =>\n      prev.map(group => {\n        const children = group.children ?? [];\n        const oldIndex = children.findIndex(row => row.id === event.activeRowId);\n        const newIndex = children.findIndex(row => row.id === event.overRowId);\n        if (oldIndex === -1 || newIndex === -1) return group;\n        return { ...group, children: arrayMove(children, oldIndex, newIndex) };\n      }),\n    );\n  }, []);\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={data}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      showEmptyGroups\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      onRowReorder={handleRowReorder}\n      groupRowSpan='full'\n      groupExpandColumn\n      renderGroupRow={row => (\n        <HStack gap={8} align='center'>\n          <Text weight='medium'>{row.original.objectName}</Text>\n          <Badge color='gray' type='secondary' size='medium'>\n            {row.subRows.length}\n          </Badge>\n          <Button variant='ghost' color='neutral' size='small' className='ml-auto'>\n            <Plus />\n            Add header\n          </Button>\n        </HStack>\n      )}\n      data-testid='grouped-expand-column-table'\n    />\n  );\n}",
+          "description": "`groupExpandColumn` keeps the expand column in grouping mode: the toggle sits in its own column,\nfirst, and every row of a group — drag handle included — sits to the right of it, while\n`renderGroupRow` keeps the title and the actions."
+        },
         {
           "name": "RowReorderingWithSelection",
           "code": "() => {\n  const [data, setData] = useState(() => securityEvents.slice(0, 6));\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev => {\n      const oldIndex = prev.findIndex(row => row.id === event.activeRowId);\n      const newIndex = prev.findIndex(row => row.id === event.overRowId);\n      if (oldIndex === -1 || newIndex === -1) return prev;\n      return arrayMove(prev, oldIndex, newIndex);\n    });\n  }, []);\n\n  return (\n    <Table\n      data={data}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      onRowReorder={handleRowReorder}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    />\n  );\n}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",