@linzjs/step-ag-grid 17.4.2 → 17.4.4

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

@@ -28,7 +28,7 @@ export interface GridProps {
     autoSelectFirstRow?: boolean;
     onColumnMoved?: GridOptions["onColumnMoved"];
     rowDragText?: GridOptions["rowDragText"];
-    onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => void;
+    onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => Promise<void>;
     alwaysShowVerticalScroll?: boolean;
     suppressColumnVirtualization?: GridOptions["suppressColumnVirtualisation"];
     /**

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

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lui = require('@linzjs/lui');
+var agGridCommunity = require('ag-grid-community');
 var agGridReact = require('ag-grid-react');
 var lodashEs = require('lodash-es');
 var React = require('react');
@@ -2544,7 +2545,6 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                     },
                     checkboxSelection: params.selectable,
                     headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
-                    //headerCheckboxSelection:true,
                     suppressHeaderKeyboardEvent: (e) => {
                         if (!params.selectable)
                             return false;
@@ -2760,13 +2760,34 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
     }, []);
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
-    const onRowDragEnd = React.useCallback((event) => {
-        const moved = event.node.data;
-        const target = event.overNode?.data;
-        moved.id != target.id &&
-            event.node.rowIndex != null &&
-            params.onRowDragEnd &&
-            params.onRowDragEnd(moved, target, event.node.rowIndex);
+    const onRowDragLeave = React.useCallback((event) => {
+        const clientSideRowModel = event.api.getModel();
+        clientSideRowModel.highlightRowAtPixel(null);
+    }, []);
+    const onRowDragMove = React.useCallback((event) => {
+        const clientSideRowModel = event.api.getModel();
+        clientSideRowModel.highlightRowAtPixel(event.node, event.y);
+    }, []);
+    const onRowDragEnd = React.useCallback(async (event) => {
+        const clientSideRowModel = event.api.getModel();
+        if (event.node.rowIndex) {
+            const lastHighlightedRowNode = clientSideRowModel.getLastHighlightedRowNode();
+            const isBelow = lastHighlightedRowNode && lastHighlightedRowNode.highlighted === agGridCommunity.RowHighlightPosition.Below;
+            let targetIndex = event.overIndex;
+            if (event.node.rowIndex > event.overIndex) {
+                targetIndex += isBelow ? 1 : 0;
+            }
+            else {
+                targetIndex += isBelow ? 0 : -1;
+            }
+            const moved = event.node.data;
+            const target = event.overNode?.data;
+            moved.id != target.id && //moved over a different row
+                moved.rowIndex != targetIndex && //moved to a different index
+                params.onRowDragEnd &&
+                (await params.onRowDragEnd(moved, target, targetIndex));
+        }
+        clientSideRowModel.highlightRowAtPixel(null);
     }, [params]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
@@ -2776,7 +2797,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
-                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, rowDragManaged: !!params.onRowDragEnd, suppressMoveWhenRowDragging: true, onRowDragEnd: onRowDragEnd }) })] }));
+                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave }) })] }));
 };
 
 const GridPopoverContext = React.createContext({
@@ -3569,7 +3590,7 @@ const GridFormDropDown = (props) => {
     }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
     const { popoverWrapper } = useGridPopoverHook({
         className: props.className,
-        invalid: () => !!(selectedItem && !subComponentIsValid.current),
+        invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
         save,
         dontSaveOnExternalClick: true,
     });