@linzjs/step-ag-grid 31.1.1 → 31.2.1

package/dist/step-ag-grid.esm.js

@@ -61746,10 +61746,36 @@ maxInitialWidth,
             el.classList.remove('ag-row-highlight-below');
         });
     }, []);
+    const clearDragRowClasses = useCallback(() => {
+        document.querySelectorAll(`.ag-row-dragging`)?.forEach((el) => {
+            el.classList.remove('ag-row-dragging');
+        });
+    }, []);
     const gridElementRef = useRef(undefined);
+    const multiDragAppliedRef = useRef(false);
+    const multiDragCountRef = useRef(0);
     const onRowDragMove = 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;
@@ -61768,7 +61794,7 @@ maxInitialWidth,
                 el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
             });
         }
-    }, [clearHighlightRowClasses]);
+    }, [clearHighlightRowClasses, rowSelection]);
     const onCellFocused = useCallback((event) => {
         if (event.rowIndex == null) {
             return;
@@ -61797,6 +61823,9 @@ maxInitialWidth,
     }, [paramsOnCellFocused]);
     const onRowDragEnd = useCallback((event) => {
         clearHighlightRowClasses();
+        clearDragRowClasses();
+        multiDragAppliedRef.current = false;
+        multiDragCountRef.current = 0;
         gridElementRef.current = undefined;
         if (!params.onRowDragEnd || startDragYRef.current === null) {
             return;
@@ -61809,9 +61838,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]);
     useEffect(() => {
         if ((setExternalSelectedItems || setExternalSelectedIds) && selectable == null) {
             console.warn('<Grid/> has setExternalSelectedItems/setExternalSelectedIds parameter, but is missing selectable parameter,' +
@@ -61881,7 +61927,20 @@ maxInitialWidth,
             event.api.sizeColumnsToFit();
         }
     }, [sizeColumns]);
-    return (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, jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: 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 (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, jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: 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'
+                            ? (dragItem) => {
+                                const count = multiDragCountRef.current;
+                                if (count > 1)
+                                    return `Moving ${count} rows`;
+                                return `${dragItem.rowNode?.data?.id ?? ''}`;
+                            }
+                            : undefined), rowHeight: rowHeight, rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
@@ -62113,6 +62172,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();
     useEffect(() => {
@@ -64854,5 +64941,5 @@ const useDeferredPromise = () => {
     };
 };
 
-export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellBearingValueFormatter, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormInlineTextInput, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridInlineTextInput, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, TextInputValidator, agGridSelectRowColId, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, colStateFlexed, colStateId, colStateNotFlexed, compareNaturalInsensitive, convertDDToDMS, createCheckboxMultiFilterParams, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
+export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellBearingValueFormatter, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormInlineTextInput, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridInlineTextInput, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, TextInputValidator, agGridSelectRowColId, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, colStateFlexed, colStateId, colStateNotFlexed, compareNaturalInsensitive, convertDDToDMS, createCheckboxMultiFilterParams, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, reorderRows, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
 //# sourceMappingURL=step-ag-grid.esm.js.map