@linzjs/step-ag-grid 17.4.1 → 17.4.3

package/dist/GridTheme.scss

@@ -50,11 +50,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-cell[col-id="selection"] {
   display: flex;// Fix that when you click below checkbox it doesn't process a click
-  justify-content: end; // fix alignment of cell content when grabber is present
-
-  .ag-selection-checkbox {
-    margin-right:0;
-  }
 }
 
 // fix alignment of cell content when grabber is present
@@ -92,6 +87,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-header .ag-header-cell[aria-colindex="1"] {
   padding-left: 17px;
+  padding-right: 15px;
 }
 
 .ag-cell[role="gridcell"] {

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({