@linzjs/step-ag-grid 31.1.1 → 31.2.0

package/dist/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,

package/dist/src/components/gridDragUtil.d.ts

@@ -0,0 +1,10 @@
+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 declare function reorderRows<T extends GridBaseRow>(rows: T[], movedRows: T[], targetRow: T, direction: -1 | 1): T[];

package/dist/src/components/gridDragUtil.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/index.d.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/dist/src/components/types.d.ts

@@ -5,8 +5,12 @@ export interface GridBaseRow {
     id: string | number;
 }
 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;
 }
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {

package/dist/step-ag-grid.cjs

@@ -61748,10 +61748,36 @@ maxInitialWidth,
             el.classList.remove('ag-row-highlight-below');
         });
     }, []);
+    const clearDragRowClasses = React13.useCallback(() => {
+        document.querySelectorAll(`.ag-row-dragging`)?.forEach((el) => {
+            el.classList.remove('ag-row-dragging');
+        });
+    }, []);
     const gridElementRef = React13.useRef(undefined);
+    const multiDragAppliedRef = React13.useRef(false);
+    const multiDragCountRef = React13.useRef(0);
     const onRowDragMove = React13.useCallback((event) => {
         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;
+                    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;
         const data = event.overNode?.data;
@@ -61770,7 +61796,7 @@ maxInitialWidth,
                 el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
             });
         }
-    }, [clearHighlightRowClasses]);
+    }, [clearHighlightRowClasses, rowSelection]);
     const onCellFocused = React13.useCallback((event) => {
         if (event.rowIndex == null) {
             return;
@@ -61799,6 +61825,9 @@ maxInitialWidth,
     }, [paramsOnCellFocused]);
     const onRowDragEnd = React13.useCallback((event) => {
         clearHighlightRowClasses();
+        clearDragRowClasses();
+        multiDragAppliedRef.current = false;
+        multiDragCountRef.current = 0;
         gridElementRef.current = undefined;
         if (!params.onRowDragEnd || startDragYRef.current === null) {
             return;
@@ -61811,9 +61840,26 @@ maxInitialWidth,
             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;
+            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);
+            }
+            else {
+                movedRows = [movedRow];
+            }
+            // If targetRow is one of the moved rows, no-op
+            if (movedRows.some((r) => r.id === targetRow.id)) {
+                return;
+            }
+            const direction = yDiff > 0 ? 1 : -1;
+            void params.onRowDragEnd({ movedRow, movedRows, targetRow, direction });
         }
-    }, [params, clearHighlightRowClasses]);
+    }, [params, clearHighlightRowClasses, clearDragRowClasses, rowSelection]);
     React13.useEffect(() => {
         if ((setExternalSelectedItems || setExternalSelectedIds) && selectable == null) {
             console.warn('<Grid/> has setExternalSelectedItems/setExternalSelectedIds parameter, but is missing selectable parameter,' +
@@ -61883,7 +61929,20 @@ maxInitialWidth,
             event.api.sizeColumnsToFit();
         }
     }, [sizeColumns]);
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready', params.hideSelectedRow && 'Grid-hideSelectedRow'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsxRuntime.jsx(AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: clearHighlightRowClasses, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText, rowHeight: rowHeight, rowSelection: selectable
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready', params.hideSelectedRow && 'Grid-hideSelectedRow'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsxRuntime.jsx(AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: () => {
+                        clearHighlightRowClasses();
+                        clearDragRowClasses();
+                        multiDragAppliedRef.current = false;
+                        multiDragCountRef.current = 0;
+                    }, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText ??
+                        (rowSelection === 'multiple'
+                            ? () => {
+                                const count = multiDragCountRef.current;
+                                if (count > 1)
+                                    return `Moving ${count} rows`;
+                                return '';
+                            }
+                            : undefined), rowHeight: rowHeight, rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
@@ -62115,6 +62174,34 @@ const GridCellMultiEditor = (props, cellEditorSelector) => GridCell({
     ...props,
 });
 
+/**
+ * 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.
+ */
+function reorderRows(rows, movedRows, targetRow, direction) {
+    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;
+}
+
 const useGridFilter = (filter) => {
     const { addExternalFilter, removeExternalFilter } = useGridContext();
     React13.useEffect(() => {
@@ -64956,6 +65043,7 @@ exports.isFloat = isFloat;
 exports.isGridCellFiller = isGridCellFiller;
 exports.isNotEmpty = isNotEmpty;
 exports.primitiveToSelectOption = primitiveToSelectOption;
+exports.reorderRows = reorderRows;
 exports.sanitiseFileName = sanitiseFileName;
 exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
 exports.suppressCellKeyboardEvents = suppressCellKeyboardEvents;