@wallarm-org/design-system 2.4.0 → 2.5.0

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

@@ -50,6 +50,9 @@ export interface TableContextValue<T extends RowData> {
     onStartReachedThreshold?: number;
     initialScrollToRowId?: string;
     onRowReorder?: (event: TableRowReorderEvent) => void;
+    getRowCanDrag?: (row: Row<DSTableFeatures, T>) => boolean;
+    renderFullWidthGroupRow?: (row: Row<DSTableFeatures, T>) => ReactNode;
+    renderFullWidthRow?: (row: Row<DSTableFeatures, T>) => ReactNode | undefined;
     onMasterCellClick?: (rowId: string) => void;
     activeRowId: string | null;
     onSettingsOpenChange?: (open: boolean) => void;

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

@@ -1,6 +1,17 @@
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import type { Row, RowData } from '@tanstack/react-table';
 import { type DSTableFeatures } from './lib/index.js';
+interface TableFullWidthCellProps {
+    colSpan: number;
+    lastRow?: boolean;
+    dropIndicator?: 'above' | 'below';
+    children: ReactNode;
+}
+/**
+ * One cell spanning every data column — the body of a full-width row
+ * (`renderFullWidthRow`) or of a full-width group row (`groupRowSpan: 'full'`).
+ */
+export declare const TableFullWidthCell: ({ colSpan, lastRow, dropIndicator, children, }: TableFullWidthCellProps) => import("react").JSX.Element;
 interface TableRowProps<T extends RowData> {
     row: Row<DSTableFeatures, T>;
     ref?: Ref<HTMLTableRowElement>;

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, isGroupRow, useRowDnd, useTableValue, withTableState } from "./lib/index.js";
+import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, isGroupRow, useRenderEveryTime, 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";
@@ -15,10 +15,51 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_SELECT_COLUMN_ID,
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
+const TableFullWidthCell = (t0)=>{
+    const $ = compiler_runtime_c(12);
+    const { colSpan, lastRow, dropIndicator, children } = t0;
+    const t1 = dropIndicator && DROP_INDICATOR_BASE;
+    const t2 = "above" === dropIndicator && "after:top-0";
+    const t3 = "below" === dropIndicator && "after:-bottom-px";
+    let t4;
+    if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3) {
+        t4 = cn("align-middle", t1, t2, t3);
+        $[0] = t1;
+        $[1] = t2;
+        $[2] = t3;
+        $[3] = t4;
+    } else t4 = $[3];
+    let t5;
+    if ($[4] !== dropIndicator) {
+        t5 = dropIndicator ? {
+            overflow: "visible"
+        } : void 0;
+        $[4] = dropIndicator;
+        $[5] = t5;
+    } else t5 = $[5];
+    let t6;
+    if ($[6] !== children || $[7] !== colSpan || $[8] !== lastRow || $[9] !== t4 || $[10] !== t5) {
+        t6 = /*#__PURE__*/ jsx(Td, {
+            pinned: false,
+            lastRow: lastRow,
+            colSpan: colSpan,
+            className: t4,
+            style: t5,
+            children: children
+        });
+        $[6] = children;
+        $[7] = colSpan;
+        $[8] = lastRow;
+        $[9] = t4;
+        $[10] = t5;
+        $[11] = t6;
+    } else t6 = $[11];
+    return t6;
+};
 const TableRowInner = (t0)=>{
-    const $ = compiler_runtime_c(97);
+    const $ = compiler_runtime_c(112);
     const { row, ref, "data-index": dataIndex } = t0;
-    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow, stretch, hasSubRowGrouping, showEmptyGroups, allLeafColumns } = useTableContext();
+    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow, stretch, hasSubRowGrouping, showEmptyGroups, allLeafColumns, renderFullWidthGroupRow, renderFullWidthRow } = useTableContext();
     const testId = useTestId("row");
     const { canDnd, isDragging, setNodeRef, style: dndStyle, attributes, listeners } = useRowDnd(row);
     const { activeId, overId } = useRowDndIndicator();
@@ -63,23 +104,34 @@ const TableRowInner = (t0)=>{
     } else t5 = $[11];
     const isLastModelRow = useTableValue(t5);
     const isPreviewActive = activeRowId === row.id;
+    let t6;
+    if ($[12] !== isGroupParent || $[13] !== renderFullWidthGroupRow || $[14] !== renderFullWidthRow || $[15] !== row) {
+        t6 = ()=>isGroupParent ? renderFullWidthGroupRow?.(row) : renderFullWidthRow?.(row);
+        $[12] = isGroupParent;
+        $[13] = renderFullWidthGroupRow;
+        $[14] = renderFullWidthRow;
+        $[15] = row;
+        $[16] = t6;
+    } else t6 = $[16];
+    const fullWidthContent = useRenderEveryTime(t6);
+    const isFullWidth = void 0 !== fullWidthContent;
     const isLastTableRow = !isLoading && isLastModelRow;
     const hasExpandedContent = expandingEnabled && !!renderExpandedRow && isExpanded;
     const isLastRow = isLastTableRow && !hasExpandedContent;
     const isLastRowExpanded = isLastTableRow && hasExpandedContent;
-    let t6;
-    if ($[12] !== canDnd || $[13] !== ref || $[14] !== setNodeRef) {
-        t6 = (node)=>{
+    let t7;
+    if ($[17] !== canDnd || $[18] !== ref || $[19] !== setNodeRef) {
+        t7 = (node)=>{
             if (canDnd) setNodeRef(node);
             if ("function" == typeof ref) ref(node);
             else if (ref) ref.current = node;
         };
-        $[12] = canDnd;
-        $[13] = ref;
-        $[14] = setNodeRef;
-        $[15] = t6;
-    } else t6 = $[15];
-    const composedRef = t6;
+        $[17] = canDnd;
+        $[18] = ref;
+        $[19] = setNodeRef;
+        $[20] = t7;
+    } else t7 = $[20];
+    const composedRef = t7;
     if (isGroupParent) {
         let T0;
         let t10;
@@ -91,171 +143,183 @@ const TableRowInner = (t0)=>{
         let t16;
         let t17;
         let t18;
-        let t7;
+        let t19;
+        let t20;
         let t8;
         let t9;
-        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) {
+        if ($[21] !== allLeafColumns || $[22] !== cells || $[23] !== composedRef || $[24] !== dataIndex || $[25] !== fullWidthContent || $[26] !== hasSubRowGrouping || $[27] !== isExpanded || $[28] !== isFullWidth || $[29] !== isLastRow || $[30] !== isPreviewActive || $[31] !== isSelected || $[32] !== row.id || $[33] !== table.state || $[34] !== testId) {
             const systemCells = cells.filter(_temp);
             const dataCells = cells.filter(_temp2);
             const firstDataCell = dataCells[0];
-            let t19;
-            if ($[41] !== allLeafColumns || $[42] !== hasSubRowGrouping || $[43] !== isExpanded) {
-                t19 = hasSubRowGrouping && isExpanded ? {
+            let t21;
+            if ($[49] !== allLeafColumns || $[50] !== hasSubRowGrouping || $[51] !== isExpanded) {
+                t21 = hasSubRowGrouping && isExpanded ? {
                     position: "sticky",
                     top: allLeafColumns.some(_temp3) ? 48 : 32,
                     zIndex: 20
                 } : void 0;
-                $[41] = allLeafColumns;
-                $[42] = hasSubRowGrouping;
-                $[43] = isExpanded;
-                $[44] = t19;
-            } else t19 = $[44];
-            const stickyStyle = t19;
+                $[49] = allLeafColumns;
+                $[50] = hasSubRowGrouping;
+                $[51] = isExpanded;
+                $[52] = t21;
+            } else t21 = $[52];
+            const stickyStyle = t21;
             T0 = Tr;
-            t7 = composedRef;
-            t8 = dataIndex;
-            t9 = row.id;
-            t10 = testId;
-            t11 = "group/row";
-            t12 = isSelected || void 0;
-            t13 = isPreviewActive || void 0;
-            t14 = isSelected || void 0;
-            t15 = stickyStyle;
-            let t20;
-            if ($[45] !== isLastRow) {
-                t20 = (cell)=>/*#__PURE__*/ jsx(TableBodyCell, {
+            t8 = composedRef;
+            t9 = dataIndex;
+            t10 = row.id;
+            t11 = testId;
+            t12 = "group/row";
+            t13 = isSelected || void 0;
+            t14 = isPreviewActive || void 0;
+            t15 = isSelected || void 0;
+            t16 = stickyStyle;
+            let t22;
+            if ($[53] !== isLastRow) {
+                t22 = (cell)=>/*#__PURE__*/ jsx(TableBodyCell, {
                         cell: cell,
                         disablePinnedShadow: true,
                         lastRow: isLastRow
                     }, cell.id);
-                $[45] = isLastRow;
-                $[46] = t20;
-            } else t20 = $[46];
-            t16 = systemCells.map(t20);
-            t17 = firstDataCell && /*#__PURE__*/ jsx(TableBodyCell, {
+                $[53] = isLastRow;
+                $[54] = t22;
+            } else t22 = $[54];
+            t17 = systemCells.map(t22);
+            t18 = isFullWidth && /*#__PURE__*/ jsx(TableFullWidthCell, {
+                colSpan: dataCells.length,
+                lastRow: isLastRow,
+                children: fullWidthContent
+            });
+            t19 = !isFullWidth && firstDataCell && /*#__PURE__*/ jsx(TableBodyCell, {
                 cell: firstDataCell,
                 className: "border-r-0",
                 disablePinnedShadow: true,
                 lastRow: isLastRow
             });
-            t18 = withTableState(table.state, ()=>dataCells.slice(1).map((cell_0)=>/*#__PURE__*/ jsx(Td, {
+            t20 = withTableState(table.state, ()=>(isFullWidth ? [] : dataCells).slice(1).map((cell_0)=>/*#__PURE__*/ jsx(Td, {
                         className: cn("border-b border-border-primary-light bg-bg-surface-2 overlay", "group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active", "group-data-[preview-active]/row:overlay-states-primary-hover group-has-[[data-state=open]]/row:overlay-states-primary-hover", isLastRow && "border-b-0"),
                         style: {
                             width: cell_0.column.getSize()
                         },
                         "aria-hidden": "true"
                     }, cell_0.id)));
-            $[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;
+            $[21] = allLeafColumns;
+            $[22] = cells;
+            $[23] = composedRef;
+            $[24] = dataIndex;
+            $[25] = fullWidthContent;
+            $[26] = hasSubRowGrouping;
+            $[27] = isExpanded;
+            $[28] = isFullWidth;
+            $[29] = isLastRow;
+            $[30] = isPreviewActive;
+            $[31] = isSelected;
+            $[32] = row.id;
+            $[33] = table.state;
+            $[34] = testId;
+            $[35] = T0;
+            $[36] = t10;
+            $[37] = t11;
+            $[38] = t12;
+            $[39] = t13;
+            $[40] = t14;
+            $[41] = t15;
+            $[42] = t16;
+            $[43] = t17;
+            $[44] = t18;
+            $[45] = t19;
+            $[46] = t20;
+            $[47] = t8;
+            $[48] = t9;
         } else {
-            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];
+            T0 = $[35];
+            t10 = $[36];
+            t11 = $[37];
+            t12 = $[38];
+            t13 = $[39];
+            t14 = $[40];
+            t15 = $[41];
+            t16 = $[42];
+            t17 = $[43];
+            t18 = $[44];
+            t19 = $[45];
+            t20 = $[46];
+            t8 = $[47];
+            t9 = $[48];
         }
-        let t19;
-        if ($[47] !== stretch) {
-            t19 = !stretch && /*#__PURE__*/ jsx(Td, {
+        let t21;
+        if ($[55] !== stretch) {
+            t21 = !stretch && /*#__PURE__*/ jsx(Td, {
                 pinned: false,
                 "aria-hidden": true
             });
-            $[47] = stretch;
-            $[48] = t19;
-        } else t19 = $[48];
-        let t20;
-        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,
-                "data-row-id": t9,
-                "data-testid": t10,
-                className: t11,
-                "data-selected": t12,
-                "data-preview-active": t13,
-                "aria-selected": t14,
-                style: t15,
+            $[55] = stretch;
+            $[56] = t21;
+        } else t21 = $[56];
+        let t22;
+        if ($[57] !== T0 || $[58] !== t10 || $[59] !== t11 || $[60] !== t12 || $[61] !== t13 || $[62] !== t14 || $[63] !== t15 || $[64] !== t16 || $[65] !== t17 || $[66] !== t18 || $[67] !== t19 || $[68] !== t20 || $[69] !== t21 || $[70] !== t8 || $[71] !== t9) {
+            t22 = /*#__PURE__*/ jsxs(T0, {
+                ref: t8,
+                "data-index": t9,
+                "data-row-id": t10,
+                "data-testid": t11,
+                className: t12,
+                "data-selected": t13,
+                "data-preview-active": t14,
+                "aria-selected": t15,
+                style: t16,
                 children: [
-                    t16,
                     t17,
                     t18,
-                    t19
+                    t19,
+                    t20,
+                    t21
                 ]
             });
-            $[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 ($[64] !== expandingEnabled || $[65] !== isLastRowExpanded || $[66] !== row) {
-            t21 = expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
+            $[57] = T0;
+            $[58] = t10;
+            $[59] = t11;
+            $[60] = t12;
+            $[61] = t13;
+            $[62] = t14;
+            $[63] = t15;
+            $[64] = t16;
+            $[65] = t17;
+            $[66] = t18;
+            $[67] = t19;
+            $[68] = t20;
+            $[69] = t21;
+            $[70] = t8;
+            $[71] = t9;
+            $[72] = t22;
+        } else t22 = $[72];
+        let t23;
+        if ($[73] !== expandingEnabled || $[74] !== isLastRowExpanded || $[75] !== row) {
+            t23 = expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
                 row: row,
                 lastRow: isLastRowExpanded
             });
-            $[64] = expandingEnabled;
-            $[65] = isLastRowExpanded;
-            $[66] = row;
-            $[67] = t21;
-        } else t21 = $[67];
-        let t22;
-        if ($[68] !== t20 || $[69] !== t21) {
-            t22 = /*#__PURE__*/ jsxs(Fragment, {
+            $[73] = expandingEnabled;
+            $[74] = isLastRowExpanded;
+            $[75] = row;
+            $[76] = t23;
+        } else t23 = $[76];
+        let t24;
+        if ($[77] !== t22 || $[78] !== t23) {
+            t24 = /*#__PURE__*/ jsxs(Fragment, {
                 children: [
-                    t20,
-                    t21
+                    t22,
+                    t23
                 ]
             });
-            $[68] = t20;
-            $[69] = t21;
-            $[70] = t22;
-        } else t22 = $[70];
-        return t22;
+            $[77] = t22;
+            $[78] = t23;
+            $[79] = t24;
+        } else t24 = $[79];
+        return t24;
     }
-    let t7;
-    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 t8;
+    if ($[80] !== activeId || $[81] !== attributes || $[82] !== canDnd || $[83] !== cells || $[84] !== composedRef || $[85] !== dataIndex || $[86] !== dndStyle || $[87] !== fullWidthContent || $[88] !== isDragging || $[89] !== isFullWidth || $[90] !== isLastRow || $[91] !== isPreviewActive || $[92] !== isSelected || $[93] !== listeners || $[94] !== overId || $[95] !== row.depth || $[96] !== row.id || $[97] !== stretch || $[98] !== table || $[99] !== testId) {
         let dropIndicator;
         if (overId === row.id && null != activeId && activeId !== row.id) {
             const modelRows = table.getRowModel().rows;
@@ -263,7 +327,14 @@ const TableRowInner = (t0)=>{
             const overIndex = modelRows.findIndex((r_0)=>r_0.id === row.id);
             if (-1 !== activeIndex && -1 !== overIndex) dropIndicator = activeIndex < overIndex ? "below" : "above";
         }
-        t7 = /*#__PURE__*/ jsxs(Tr, {
+        let t9;
+        if ($[101] !== cells || $[102] !== isFullWidth) {
+            t9 = isFullWidth ? cells.filter(_temp4) : cells;
+            $[101] = cells;
+            $[102] = isFullWidth;
+            $[103] = t9;
+        } else t9 = $[103];
+        t8 = /*#__PURE__*/ jsxs(Tr, {
             ref: composedRef,
             "data-index": dataIndex,
             "data-row-id": row.id,
@@ -276,16 +347,23 @@ const TableRowInner = (t0)=>{
             "data-depth": row.depth > 0 ? row.depth : void 0,
             style: dndStyle,
             children: [
-                cells.map((cell_1)=>{
-                    const isDragHandle = cell_1.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
+                t9.map((cell_1)=>{
+                    const isDragHandle = canDnd && cell_1.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
                     return /*#__PURE__*/ jsx(TableBodyCell, {
                         cell: cell_1,
                         dragListeners: isDragHandle ? listeners : void 0,
                         dragAttributes: isDragHandle ? attributes : void 0,
+                        disablePinnedShadow: isFullWidth,
                         lastRow: isLastRow,
                         dropIndicator: dropIndicator
                     }, cell_1.id);
                 }),
+                isFullWidth && /*#__PURE__*/ jsx(TableFullWidthCell, {
+                    colSpan: cells.filter(_temp5).length,
+                    lastRow: isLastRow,
+                    dropIndicator: dropIndicator,
+                    children: fullWidthContent
+                }),
                 !stretch && /*#__PURE__*/ jsx(Td, {
                     pinned: false,
                     "aria-hidden": true,
@@ -296,51 +374,54 @@ const TableRowInner = (t0)=>{
                 })
             ]
         });
-        $[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 ($[89] !== dndStyle || $[90] !== expandingEnabled || $[91] !== isLastRowExpanded || $[92] !== row) {
-        t8 = expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
+        $[80] = activeId;
+        $[81] = attributes;
+        $[82] = canDnd;
+        $[83] = cells;
+        $[84] = composedRef;
+        $[85] = dataIndex;
+        $[86] = dndStyle;
+        $[87] = fullWidthContent;
+        $[88] = isDragging;
+        $[89] = isFullWidth;
+        $[90] = isLastRow;
+        $[91] = isPreviewActive;
+        $[92] = isSelected;
+        $[93] = listeners;
+        $[94] = overId;
+        $[95] = row.depth;
+        $[96] = row.id;
+        $[97] = stretch;
+        $[98] = table;
+        $[99] = testId;
+        $[100] = t8;
+    } else t8 = $[100];
+    let t9;
+    if ($[104] !== dndStyle || $[105] !== expandingEnabled || $[106] !== isLastRowExpanded || $[107] !== row) {
+        t9 = expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
             row: row,
             dndStyle: dndStyle,
             lastRow: isLastRowExpanded
         });
-        $[89] = dndStyle;
-        $[90] = expandingEnabled;
-        $[91] = isLastRowExpanded;
-        $[92] = row;
-        $[93] = t8;
-    } else t8 = $[93];
-    let t9;
-    if ($[94] !== t7 || $[95] !== t8) {
-        t9 = /*#__PURE__*/ jsxs(Fragment, {
+        $[104] = dndStyle;
+        $[105] = expandingEnabled;
+        $[106] = isLastRowExpanded;
+        $[107] = row;
+        $[108] = t9;
+    } else t9 = $[108];
+    let t10;
+    if ($[109] !== t8 || $[110] !== t9) {
+        t10 = /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                t7,
-                t8
+                t8,
+                t9
             ]
         });
-        $[94] = t7;
-        $[95] = t8;
-        $[96] = t9;
-    } else t9 = $[96];
-    return t9;
+        $[109] = t8;
+        $[110] = t9;
+        $[111] = t10;
+    } else t10 = $[111];
+    return t10;
 };
 TableRowInner.displayName = "TableRow";
 const TableRow = /*#__PURE__*/ memo(TableRowInner);
@@ -353,4 +434,10 @@ function _temp2(c_0) {
 function _temp3(c_1) {
     return c_1.columnDef.meta?.description?.type === "text";
 }
-export { TableRow };
+function _temp4(c_2) {
+    return SYSTEM_COLUMN_IDS.has(c_2.column.id);
+}
+function _temp5(c_3) {
+    return !SYSTEM_COLUMN_IDS.has(c_3.column.id);
+}
+export { TableFullWidthCell, TableRow };

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

@@ -1,32 +1,13 @@
 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";
+import { useRowCanDrag } from "./useRowDnd.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;
+    return useRowCanDrag(row) ? /*#__PURE__*/ jsx(GripVertical, {
+        size: "sm",
+        className: "text-text-secondary"
+    }) : null;
 };
 const createDragHandleColumn = ()=>({
         id: TABLE_DRAG_HANDLE_COLUMN_ID,

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

@@ -11,5 +11,7 @@ export interface UseRowDndResult {
     attributes: UseSortableReturn['attributes'];
     listeners: UseSortableReturn['listeners'];
 }
+/** Whether the row can be dragged: never a group row, and only if `getRowCanDrag` allows it. */
+export declare const useRowCanDrag: <T extends RowData>(row: Row<DSTableFeatures, T>) => boolean;
 export declare const useRowDnd: <T extends RowData>(row: Row<DSTableFeatures, T>) => UseRowDndResult;
 export {};