@linzjs/step-ag-grid 31.1.1 → 31.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "31.1.1",
+  "version": "31.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -860,11 +860,39 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     });
   }, []);
 
+  const clearDragRowClasses = useCallback(() => {
+    document.querySelectorAll(`.ag-row-dragging`)?.forEach((el) => {
+      el.classList.remove('ag-row-dragging');
+    });
+  }, []);
+
   const gridElementRef = useRef<Element>(undefined);
+  const multiDragAppliedRef = useRef(false);
+  const multiDragCountRef = useRef(0);
   const onRowDragMove = useCallback(
     (event: RowDragMoveEvent) => {
       if (startDragYRef.current === null) {
         startDragYRef.current = event.y;
+
+        // On first move event, apply ag-row-dragging class to all selected rows for multi-drag
+        if (rowSelection === 'multiple' && event.node.isSelected()) {
+          const selectedNodes = event.api.getSelectedNodes().filter((n) => n.displayed && n.data != null);
+          if (selectedNodes.length > 1) {
+            multiDragAppliedRef.current = true;
+            multiDragCountRef.current = selectedNodes.length;
+            // Find the grid body element for scoped queries
+            const targetEl = event.event.target as Element | undefined;
+            const gridElement = targetEl?.closest('.ag-body');
+            if (gridElement) {
+              gridElementRef.current = gridElement;
+              for (const node of selectedNodes) {
+                gridElement.querySelectorAll(`[row-id='${node.data.id}']`)?.forEach((el) => {
+                  el.classList.add('ag-row-dragging');
+                });
+              }
+            }
+          }
+        }
       }
 
       const yDiff = event.y - startDragYRef.current;
@@ -885,7 +913,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         });
       }
     },
-    [clearHighlightRowClasses],
+    [clearHighlightRowClasses, rowSelection],
   );
 
   const onCellFocused = useCallback(
@@ -922,6 +950,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const onRowDragEnd = useCallback(
     (event: RowDragEndEvent<TData>) => {
       clearHighlightRowClasses();
+      clearDragRowClasses();
+      multiDragAppliedRef.current = false;
+      multiDragCountRef.current = 0;
       gridElementRef.current = undefined;
       if (!params.onRowDragEnd || startDragYRef.current === null) {
         return;
@@ -934,10 +965,29 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         if (!movedRow || !targetRow || movedRow === targetRow || yDiff === 0) {
           return;
         }
-        void params.onRowDragEnd({ movedRow, targetRow, direction: yDiff > 0 ? 1 : -1 });
+
+        // Determine movedRows: if dragged row is part of a multi-selection, include all selected & displayed rows
+        let movedRows: TData[];
+        if (rowSelection === 'multiple' && event.node.isSelected()) {
+          movedRows = event.api
+            .getSelectedNodes()
+            .filter((n) => n.displayed && n.data != null)
+            .sort((a, b) => (a.rowIndex ?? 0) - (b.rowIndex ?? 0))
+            .map((n) => n.data as TData);
+        } else {
+          movedRows = [movedRow];
+        }
+
+        // If targetRow is one of the moved rows, no-op
+        if (movedRows.some((r) => r.id === targetRow.id)) {
+          return;
+        }
+
+        const direction: -1 | 1 = yDiff > 0 ? 1 : -1;
+        void params.onRowDragEnd({ movedRow, movedRows, targetRow, direction });
       }
     },
-    [params, clearHighlightRowClasses],
+    [params, clearHighlightRowClasses, clearDragRowClasses, rowSelection],
   );
 
   useEffect(
@@ -1081,7 +1131,12 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           onRowClicked={params.onRowClicked}
           onRowDataUpdated={onRowDataUpdated}
           onRowDoubleClicked={params.onRowDoubleClicked}
-          onRowDragCancel={clearHighlightRowClasses}
+          onRowDragCancel={() => {
+            clearHighlightRowClasses();
+            clearDragRowClasses();
+            multiDragAppliedRef.current = false;
+            multiDragCountRef.current = 0;
+          }}
           onRowDragEnd={onRowDragEnd}
           onRowDragMove={onRowDragMove}
           onSelectionChanged={synchroniseExternalStateToGridSelection}
@@ -1092,7 +1147,16 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           preventDefaultOnContextMenu={true}
           quickFilterParser={quickFilterParser}
           rowClassRules={params.rowClassRules}
-          rowDragText={params.rowDragText}
+          rowDragText={
+            params.rowDragText ??
+            (rowSelection === 'multiple'
+              ? () => {
+                  const count = multiDragCountRef.current;
+                  if (count > 1) return `Moving ${count} rows`;
+                  return '';
+                }
+              : undefined)
+          }
           rowHeight={rowHeight}
           rowSelection={
             selectable

package/src/components/gridDragUtil.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, test } from 'vitest';
+
+import { reorderRows } from './gridDragUtil';
+
+interface TestRow {
+  id: number;
+  name: string;
+}
+
+const makeRows = (...ids: number[]): TestRow[] => ids.map((id) => ({ id, name: `row-${id}` }));
+const row = (id: number): TestRow => ({ id, name: `row-${id}` });
+const ids = (rows: TestRow[]) => rows.map((r) => r.id);
+
+describe('reorderRows', () => {
+  const rows = makeRows(1, 2, 3, 4, 5);
+
+  describe('single row move', () => {
+    test('move row down (below target)', () => {
+      // Drag row 1 below row 3: [2, 3, 1, 4, 5]
+      expect(ids(reorderRows(rows, [row(1)], row(3), 1))).toEqual([2, 3, 1, 4, 5]);
+    });
+
+    test('move row up (above target)', () => {
+      // Drag row 4 above row 2: [1, 4, 2, 3, 5]
+      expect(ids(reorderRows(rows, [row(4)], row(2), -1))).toEqual([1, 4, 2, 3, 5]);
+    });
+
+    test('move to first position', () => {
+      // Drag row 3 above row 1: [3, 1, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(3)], row(1), -1))).toEqual([3, 1, 2, 4, 5]);
+    });
+
+    test('move to last position', () => {
+      // Drag row 2 below row 5: [1, 3, 4, 5, 2]
+      expect(ids(reorderRows(rows, [row(2)], row(5), 1))).toEqual([1, 3, 4, 5, 2]);
+    });
+
+    test('move to adjacent position down', () => {
+      // Drag row 2 below row 3: [1, 3, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(2)], row(3), 1))).toEqual([1, 3, 2, 4, 5]);
+    });
+
+    test('move to adjacent position up', () => {
+      // Drag row 3 above row 2: [1, 3, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(3)], row(2), -1))).toEqual([1, 3, 2, 4, 5]);
+    });
+  });
+
+  describe('multi-row move', () => {
+    test('move multiple contiguous rows down', () => {
+      // Drag rows 1,2 below row 4: [3, 4, 1, 2, 5]
+      expect(ids(reorderRows(rows, [row(1), row(2)], row(4), 1))).toEqual([3, 4, 1, 2, 5]);
+    });
+
+    test('move multiple contiguous rows up', () => {
+      // Drag rows 4,5 above row 2: [1, 4, 5, 2, 3]
+      expect(ids(reorderRows(rows, [row(4), row(5)], row(2), -1))).toEqual([1, 4, 5, 2, 3]);
+    });
+
+    test('move rows with gaps — gaps are collapsed', () => {
+      // Drag rows 1,3,5 below row 4: [2, 4, 1, 3, 5]
+      expect(ids(reorderRows(rows, [row(1), row(3), row(5)], row(4), 1))).toEqual([2, 4, 1, 3, 5]);
+    });
+
+    test('move rows with gaps above target', () => {
+      // Drag rows 2,4 above row 5: [1, 3, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(2), row(4)], row(5), -1))).toEqual([1, 3, 2, 4, 5]);
+    });
+
+    test('move rows with gaps to first position', () => {
+      // Drag rows 3,5 above row 1: [3, 5, 1, 2, 4]
+      expect(ids(reorderRows(rows, [row(3), row(5)], row(1), -1))).toEqual([3, 5, 1, 2, 4]);
+    });
+
+    test('move rows with gaps to last position', () => {
+      // Drag rows 1,3 below row 5: [2, 4, 5, 1, 3]
+      expect(ids(reorderRows(rows, [row(1), row(3)], row(5), 1))).toEqual([2, 4, 5, 1, 3]);
+    });
+
+    test('preserves insertion order of movedRows', () => {
+      // movedRows given in display order [2,4] should insert as [2,4] not [4,2]
+      const result = reorderRows(rows, [row(2), row(4)], row(1), -1);
+      expect(ids(result)).toEqual([2, 4, 1, 3, 5]);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('target is one of the moved rows — returns original array', () => {
+      const result = reorderRows(rows, [row(2), row(3)], row(2), 1);
+      expect(result).toBe(rows);
+    });
+
+    test('empty movedRows — returns original array', () => {
+      const result = reorderRows(rows, [], row(3), 1);
+      expect(result).toBe(rows);
+    });
+
+    test('target not found in rows — returns original array', () => {
+      const result = reorderRows(rows, [row(1)], row(99), 1);
+      expect(result).toBe(rows);
+    });
+
+    test('single row array — move is no-op (target is the moved row)', () => {
+      const single = makeRows(1);
+      const result = reorderRows(single, [row(1)], row(1), 1);
+      expect(result).toBe(single);
+    });
+
+    test('two row array — swap positions', () => {
+      const two = makeRows(1, 2);
+      expect(ids(reorderRows(two, [row(1)], row(2), 1))).toEqual([2, 1]);
+      expect(ids(reorderRows(two, [row(2)], row(1), -1))).toEqual([2, 1]);
+    });
+  });
+});

package/src/components/gridDragUtil.ts

@@ -0,0 +1,32 @@
+import { GridBaseRow } from './types';
+
+/**
+ * Reorders rows by removing movedRows from the array and inserting them at the target position.
+ * @param rows - The current row array.
+ * @param movedRows - Rows to move, in desired insertion order (typically display order).
+ * @param targetRow - The row to insert relative to.
+ * @param direction - -1 inserts above targetRow, 1 inserts below targetRow.
+ * @returns A new array with the rows reordered, or the original array if the operation is a no-op.
+ */
+export function reorderRows<T extends GridBaseRow>(rows: T[], movedRows: T[], targetRow: T, direction: -1 | 1): T[] {
+  if (movedRows.length === 0) return rows;
+
+  const movedIds = new Set(movedRows.map((r) => r.id));
+
+  // If targetRow is one of the moved rows, no-op
+  if (movedIds.has(targetRow.id)) return rows;
+
+  // Remove moved rows from the array
+  const remaining = rows.filter((r) => !movedIds.has(r.id));
+
+  // Find where to insert relative to the target
+  const targetIndex = remaining.findIndex((r) => r.id === targetRow.id);
+  if (targetIndex === -1) return rows;
+
+  const insertIndex = direction === 1 ? targetIndex + 1 : targetIndex;
+
+  // Insert movedRows at the calculated position
+  const result = [...remaining];
+  result.splice(insertIndex, 0, ...movedRows);
+  return result;
+}

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './GridCell';
 export * from './GridCellFiller';
 export * from './GridCellMultiEditor';
 export * from './GridCellMultiSelectClassRules';
+export * from './gridDragUtil';
 export * from './gridFilter';
 export * from './gridForm';
 export * from './gridHook';

package/src/components/types.ts

@@ -8,8 +8,12 @@ export interface GridBaseRow {
 }
 
 export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+  /** The row the user physically grabbed by its drag handle. */
   movedRow: TData;
+  /** All rows being moved, ordered by display index. Single-element array when dragging an unselected row. */
+  movedRows: TData[];
   targetRow: TData;
+  /** -1 = dropped above target, 1 = dropped below target. */
   direction: -1 | 1;
 }
 

package/src/stories/grid/GridDragRow.stories.tsx

@@ -15,6 +15,7 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
+  reorderRows,
 } from '../..';
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
@@ -98,14 +99,8 @@ const GridDragRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<IT
     { id: 1003, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
   ]);
 
-  const onRowDragEnd = useCallback(({ movedRow, targetRow }: GridOnRowDragEndProps<ITestRow>) => {
-    setRowData((rowData) =>
-      rowData.map((r) => {
-        if (r.id === movedRow.id) return targetRow;
-        if (r.id === targetRow.id) return movedRow;
-        return r;
-      }),
-    );
+  const onRowDragEnd = useCallback(({ movedRows, targetRow, direction }: GridOnRowDragEndProps<ITestRow>) => {
+    setRowData((rowData) => reorderRows(rowData, movedRows, targetRow, direction));
   }, []);
 
   return (
@@ -128,3 +123,61 @@ const GridDragRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<IT
 
 export const DragRowSingleSelection = GridDragRowTemplate.bind({});
 DragRowSingleSelection.play = waitForGridReady;
+
+const GridDragRowMultiTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
+      }),
+      GridCell({
+        field: 'age',
+        headerName: 'Age',
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        flex: 1,
+      }),
+    ],
+    [],
+  );
+
+  const [rowData, setRowData] = useState<ITestRow[]>([
+    { id: 1, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
+    { id: 2, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
+    { id: 3, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
+    { id: 4, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
+    { id: 5, position: 'Designer', age: 28, height: `5'6"`, desc: 'Designs', dd: '5' },
+    { id: 6, position: 'DevOps', age: 35, height: `5'11"`, desc: 'Deploys', dd: '6' },
+  ]);
+
+  const onRowDragEnd = useCallback(({ movedRows, targetRow, direction }: GridOnRowDragEndProps<ITestRow>) => {
+    setRowData((rowData) => reorderRows(rowData, movedRows, targetRow, direction));
+  }, []);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={'drag-multi'}
+        {...props}
+        selectable={true}
+        rowSelection="multiple"
+        animateRows={true}
+        columnDefs={columnDefs}
+        defaultColDef={{ sortable: false }}
+        rowData={rowData}
+        onRowDragEnd={onRowDragEnd}
+      />
+    </GridWrapper>
+  );
+};
+
+export const DragRowMultiSelection = GridDragRowMultiTemplate.bind({});
+DragRowMultiSelection.play = waitForGridReady;

package/src/styles/GridTheme.scss

@@ -259,6 +259,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     border-bottom: 2px dashed lui.$andrea;
   }
 
+  .ag-row-dragging {
+    opacity: 0.5;
+  }
+
   .ag-pinned-left-header,
   .ag-pinned-right-header,
   .ag-pinned-right-cols-container,