fix 'jiggling' issues and debounce dragOver

src/components/Table/GridTable.tsx

@@ -352,7 +352,8 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
     evt.preventDefault();
 
     // set flags for css spacer
-    recursiveSetDraggedOver(rows, DraggedOver.None);
+    // don't set none for the row we are entering
+    recursiveSetDraggedOver(rows.filter((r) => r.id !== row.id), DraggedOver.None);
 
     if (draggedRowRef.current) {
       if (draggedRowRef.current.id === row.id) {
@@ -373,7 +374,8 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
     evt.preventDefault();
 
     if (draggedRowRef.current) {
-      if (draggedRowRef.current.id === row.id) {
+      if (draggedRowRef.current.id === row.id || !evt.currentTarget) {
+        tableState.maybeSetRowDraggedOver(row.id, DraggedOver.None, draggedRowRef.current);
         return;
       }
 

src/components/Table/components/Row.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { ReactElement, useContext, useRef } from "react";
+import { ReactElement, useContext, useRef, useCallback } from "react";
 import {
   defaultRenderFn,
   headerRenderFn,
@@ -31,6 +31,7 @@ import {
 import { Css, Palette } from "src/Css";
 import { AnyObject } from "src/types";
 import { isFunction } from "src/utils";
+import { useDebouncedCallback } from "use-debounce";
 
 interface RowProps<R extends Kinded> {
   as: RenderAs;
@@ -94,8 +95,8 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
 
   const containerCss = {
     ...Css.add("transition", "padding 0.25s ease-in-out").$,
-    ...(rs.isDraggedOver === DraggedOver.Above && Css.ptPx(35).$),
-    ...(rs.isDraggedOver === DraggedOver.Below && Css.pbPx(35).$),
+    ...(rs.isDraggedOver === DraggedOver.Above && Css.ptPx(25).$),
+    ...(rs.isDraggedOver === DraggedOver.Below && Css.pbPx(25).$),
   };
 
   const rowCss = {
@@ -133,6 +134,14 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
   // used to render the whole row when dragging with the handle
   const ref = useRef<HTMLTableRowElement>(null);
 
+  // debounce drag over callback to avoid excessive re-renders
+  const dragOverCallback = useCallback(
+    onDragOver ?? (() => {}),
+    [row],
+  );
+  // when the event is not called, we still need to call preventDefault
+  const onDragOverDebounced = useDebouncedCallback(dragOverCallback, 100);
+
   const RowContent = () => (
     <RowTag css={rowCss} {...others} data-gridrow {...getCount(row.id)}>
       {isKeptGroupRow ? (
@@ -201,7 +210,7 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
             onDragEnd,
             onDrop,
             onDragEnter,
-            onDragOver,
+            onDragOver: onDragOverDebounced,
           });
 
           // Only use the `numExpandedColumns` as the `colspan` when rendering the "Expandable Header"
@@ -354,7 +363,12 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
       // and spacer styling
       onDrop={(evt) => onDrop?.(row, evt)}
       onDragEnter={(evt) => onDragEnter?.(row, evt)}
-      onDragOver={(evt) => onDragOver?.(row, evt)}
+      onDragOver={(evt) => {
+        // when the event isn't called due to debounce, we still need to 
+        // call preventDefault for the drop event to fire
+        evt.preventDefault();
+        onDragOverDebounced(row, evt);
+      }}
       ref={ref}
     >
       {RowContent()}

src/components/Table/utils/RowStates.ts

@@ -203,6 +203,7 @@ export class RowStates<R extends Kinded> {
     }
 
     // this allows a single-row re-render
+    if(rs.isDraggedOver === draggedOver) return;
     rs.isDraggedOver = draggedOver;
   }
 }

src/components/Table/utils/utils.tsx

@@ -273,8 +273,8 @@ export function isCursorBelowMidpoint(target: HTMLElement, clientY: number) {
   const style = window.getComputedStyle(target);
   const rect = target.getBoundingClientRect();
 
-  const pt = parseInt(style.getPropertyValue("padding-top")) / 2;
-  const pb = parseInt(style.getPropertyValue("padding-bottom"));
+  let pt = parseFloat(style.getPropertyValue("padding-top"));
+  const pb = parseFloat(style.getPropertyValue("padding-bottom"));
 
   return clientY > rect.top + pt + (rect.height - pb) / 2;
 }