@linzjs/step-ag-grid 17.4.2 → 17.4.4

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
+import { RowHighlightPosition } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { negate, isEmpty, findIndex, defer as defer$1, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, compact, filter, sumBy, pull, remove, castArray, flatten } from 'lodash-es';
 import React, { createContext, useContext, useRef, useEffect, useCallback, useState, useMemo, useLayoutEffect, memo, forwardRef, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
@@ -2523,7 +2524,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;
@@ -2739,13 +2739,34 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
     }, []);
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
-    const onRowDragEnd = 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 = useCallback((event) => {
+        const clientSideRowModel = event.api.getModel();
+        clientSideRowModel.highlightRowAtPixel(null);
+    }, []);
+    const onRowDragMove = useCallback((event) => {
+        const clientSideRowModel = event.api.getModel();
+        clientSideRowModel.highlightRowAtPixel(event.node, event.y);
+    }, []);
+    const onRowDragEnd = useCallback(async (event) => {
+        const clientSideRowModel = event.api.getModel();
+        if (event.node.rowIndex) {
+            const lastHighlightedRowNode = clientSideRowModel.getLastHighlightedRowNode();
+            const isBelow = lastHighlightedRowNode && lastHighlightedRowNode.highlighted === 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);
@@ -2755,7 +2776,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (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 = createContext({
@@ -3548,7 +3569,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,
     });