@linzjs/step-ag-grid 26.0.0 → 26.0.1

package/dist/step-ag-grid.cjs

@@ -3138,6 +3138,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             el.classList.remove('ag-row-highlight-below');
         });
     }, []);
+    const gridElementRef = React.useRef();
     const onRowDragMove = React.useCallback((event) => {
         if (startDragYRef.current === null) {
             startDragYRef.current = event.y;
@@ -3146,13 +3147,23 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         const data = event.overNode?.data;
         if (data) {
             clearHighlightRowClasses();
-            document.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
+            // Find the grid element, this can only be found on start drag.
+            // Once dragging is no progress the event target is the drag element not the start drag column.
+            const targetEl = event.event.target;
+            if (targetEl) {
+                const gridElement = targetEl.closest('.ag-body');
+                if (gridElement) {
+                    gridElementRef.current = gridElement;
+                }
+            }
+            gridElementRef.current?.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
                 el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
             });
         }
     }, [clearHighlightRowClasses]);
     const onRowDragEnd = React.useCallback((event) => {
         clearHighlightRowClasses();
+        gridElementRef.current = undefined;
         if (!params.onRowDragEnd || startDragYRef.current === null) {
             return;
         }