@wallarm-org/design-system 2.7.2 → 2.8.0-rc-fix-table-dnd.1

package/dist/components/Table/TableBody/TableBodyCell.d.ts

@@ -12,8 +12,10 @@ interface TableBodyCellProps<T extends RowData> {
     dragAttributes?: ReturnType<typeof useSortable>['attributes'];
     /** Orange line indicator for row drag-and-drop placement */
     dropIndicator?: 'above' | 'below';
+    /** Keep the cell (column alignment, borders) but render no content */
+    empty?: boolean;
 }
-export declare function TableBodyCell<T extends RowData>({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator, }: TableBodyCellProps<T>): import("react").JSX.Element;
+export declare function TableBodyCell<T extends RowData>({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator, empty, }: TableBodyCellProps<T>): import("react").JSX.Element;
 export declare namespace TableBodyCell {
     var displayName: string;
 }

package/dist/components/Table/TableBody/TableBodyCell.js

@@ -11,8 +11,8 @@ import { Td } from "../primitives/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableMasterCellActions } from "../TableMasterCellActions.js";
 const TableBodyCell = (t0)=>{
-    const $ = c(54);
-    const { cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator } = t0;
+    const $ = c(55);
+    const { cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator, empty } = t0;
     const { masterColumnId } = useTableContext();
     const testId = useTestId("body-cell");
     const column = cell.column;
@@ -153,13 +153,14 @@ const TableBodyCell = (t0)=>{
         $[37] = t13;
     } else t13 = $[37];
     let t14;
-    if ($[38] !== renderContent) {
-        t14 = renderContent();
-        $[38] = renderContent;
-        $[39] = t14;
-    } else t14 = $[39];
+    if ($[38] !== empty || $[39] !== renderContent) {
+        t14 = !empty && renderContent();
+        $[38] = empty;
+        $[39] = renderContent;
+        $[40] = t14;
+    } else t14 = $[40];
     let t15;
-    if ($[40] !== colSpan || $[41] !== dragAttributes || $[42] !== dragListeners || $[43] !== isExpandedToggle || $[44] !== lastRow || $[45] !== t10 || $[46] !== t13 || $[47] !== t14 || $[48] !== t6 || $[49] !== t7 || $[50] !== t8 || $[51] !== t9 || $[52] !== testId) {
+    if ($[41] !== colSpan || $[42] !== dragAttributes || $[43] !== dragListeners || $[44] !== isExpandedToggle || $[45] !== lastRow || $[46] !== t10 || $[47] !== t13 || $[48] !== t14 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8 || $[52] !== t9 || $[53] !== testId) {
         t15 = /*#__PURE__*/ jsx(Td, {
             "data-testid": testId,
             className: t6,
@@ -175,21 +176,21 @@ const TableBodyCell = (t0)=>{
             ...dragAttributes,
             children: t14
         });
-        $[40] = colSpan;
-        $[41] = dragAttributes;
-        $[42] = dragListeners;
-        $[43] = isExpandedToggle;
-        $[44] = lastRow;
-        $[45] = t10;
-        $[46] = t13;
-        $[47] = t14;
-        $[48] = t6;
-        $[49] = t7;
-        $[50] = t8;
-        $[51] = t9;
-        $[52] = testId;
-        $[53] = t15;
-    } else t15 = $[53];
+        $[41] = colSpan;
+        $[42] = dragAttributes;
+        $[43] = dragListeners;
+        $[44] = isExpandedToggle;
+        $[45] = lastRow;
+        $[46] = t10;
+        $[47] = t13;
+        $[48] = t14;
+        $[49] = t6;
+        $[50] = t7;
+        $[51] = t8;
+        $[52] = t9;
+        $[53] = testId;
+        $[54] = t15;
+    } else t15 = $[54];
     return t15;
 };
 TableBodyCell.displayName = "TableBodyCell";

package/dist/components/Table/TableRow.js

@@ -348,9 +348,11 @@ const TableRowInner = (t0)=>{
             style: dndStyle,
             children: [
                 t9.map((cell_1)=>{
-                    const isDragHandle = canDnd && cell_1.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
+                    const isDragHandleColumn = cell_1.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
+                    const isDragHandle = canDnd && isDragHandleColumn;
                     return /*#__PURE__*/ jsx(TableBodyCell, {
                         cell: cell_1,
+                        empty: isFullWidth && isDragHandleColumn && !canDnd,
                         dragListeners: isDragHandle ? listeners : void 0,
                         dragAttributes: isDragHandle ? attributes : void 0,
                         disablePinnedShadow: isFullWidth,

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

@@ -1,13 +1,43 @@
 import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { GripVertical } from "../../../icons/index.js";
+import { cn } from "../../../utils/cn.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(7);
     const { row } = t0;
-    return useRowCanDrag(row) ? /*#__PURE__*/ jsx(GripVertical, {
-        size: "sm",
-        className: "text-text-secondary"
-    }) : null;
+    const { showEmptyGroups } = useTableContext();
+    const canDrag = useRowCanDrag(row);
+    let t1;
+    if ($[0] !== row || $[1] !== showEmptyGroups) {
+        t1 = ()=>isGroupRow(row, showEmptyGroups);
+        $[0] = row;
+        $[1] = showEmptyGroups;
+        $[2] = t1;
+    } else t1 = $[2];
+    const isGroup = useTableValue(t1);
+    if (isGroup) return null;
+    const t2 = !canDrag && "cursor-not-allowed opacity-50";
+    let t3;
+    if ($[3] !== t2) {
+        t3 = cn("text-text-secondary", t2);
+        $[3] = t2;
+        $[4] = t3;
+    } else t3 = $[4];
+    let t4;
+    if ($[5] !== t3) {
+        t4 = /*#__PURE__*/ jsx(GripVertical, {
+            size: "sm",
+            className: t3
+        });
+        $[5] = t3;
+        $[6] = t4;
+    } else t4 = $[6];
+    return t4;
 };
 const createDragHandleColumn = ()=>({
         id: TABLE_DRAG_HANDLE_COLUMN_ID,

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

@@ -323,7 +323,7 @@ export interface TableProps<T> extends TestableProps {
     onRowReorder?: (event: TableRowReorderEvent) => void;
     /**
      * Per-row drag control for `onRowReorder`. A row for which it returns
-     * `false` shows no grip, cannot be dragged and is not a drop target — the
+     * `false` shows a disabled grip (none on a full-width row), cannot be dragged and is not a drop target — the
      * other rows of its group move around it. Group rows never move regardless.
      *
      * Default: every non-group row can be dragged.

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.7.1",
-  "generatedAt": "2026-10-14T08:28:47.451Z",
+  "version": "2.7.2",
+  "generatedAt": "2026-10-14T09:31:48.262Z",
   "components": [
     {
       "name": "Accordion",
@@ -101624,7 +101624,7 @@
           "name": "getRowCanDrag",
           "type": "((row: TableRow<T>) => boolean) | undefined",
           "required": false,
-          "description": "Per-row drag control for `onRowReorder`. A row for which it returns\n`false` shows no grip, cannot be dragged and is not a drop target — the\nother rows of its group move around it. Group rows never move regardless.\n\nDefault: every non-group row can be dragged."
+          "description": "Per-row drag control for `onRowReorder`. A row for which it returns\n`false` shows a disabled grip (none on a full-width row), cannot be dragged and is not a drop target — the\nother rows of its group move around it. Group rows never move regardless.\n\nDefault: every non-group row can be dragged."
         },
         {
           "name": "renderFullWidthRow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.7.2",
+  "version": "2.8.0-rc-fix-table-dnd.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",