@infinite-table/infinite-react 8.0.0 → 8.0.2

package/index.dev.mjs

@@ -2055,7 +2055,7 @@ function InfiniteTableFooter(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import * as React51 from "react";
-import { useCallback as useCallback21, useContext as useContext10, useEffect as useEffect16, useRef as useRef21 } from "react";
+import { useCallback as useCallback22, useContext as useContext10, useEffect as useEffect16, useRef as useRef21 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/keyMirror.ts
@@ -3859,6 +3859,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 import { useCallback as useCallback10, useState as useState6 } from "react";
+import { flushSync } from "react-dom";
 
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
@@ -5367,7 +5368,7 @@ var handleOutsideOperation = (operation, interactionTarget) => {
       if (inside) {
         return { left: 0, top: 0 };
       }
-      if (index > dragIndex) {
+      if (index > dragIndex && !interactionTarget.getData().preserveDragSpace) {
         return orientation === "horizontal" ? { left: -dragItem.rect.width, top: 0 } : { left: 0, top: -dragItem.rect.height };
       }
       return { left: 0, top: 0 };
@@ -5396,12 +5397,24 @@ var _DragManager = class _DragManager {
       activeDragSource,
       startPoint
     });
+    _DragManager.currentDragOperation = dragOperation;
     dragOperation.on("start", _DragManager.onDragStart);
     dragOperation.on("move", _DragManager.onDragMove);
     dragOperation.on("drop", _DragManager.onDragDrop);
     dragOperation.start();
     return dragOperation;
   }
+  /**
+   * Re-evaluates the current drag position against all interaction targets.
+   * Used when a target list scrolls and its breakpoints change, requiring
+   * the drop index to be recalculated without a new pointer move.
+   */
+  static retriggerMove() {
+    const op = _DragManager.currentDragOperation;
+    if (op && op.phase === "move") {
+      _DragManager.onDragMove(op);
+    }
+  }
   static emit(event, ...params) {
     _DragManager.emitter.emit(event, ...params);
   }
@@ -5552,11 +5565,13 @@ var _DragManager = class _DragManager {
       dragIndex: event?.dragIndex ?? -1,
       dropIndex: event?.dropIndex ?? -1
     });
+    _DragManager.currentDragOperation = null;
     _DragManager.unregisterAll();
   }
 };
 // public static dragInteractionTargets: DragInteractionTarget[] = [];
 _DragManager.dragInteractionTargetsMap = /* @__PURE__ */ new Map();
+_DragManager.currentDragOperation = null;
 _DragManager.emitter = new EventEmitter();
 var DragManager = _DragManager;
 var ActiveDragSource = class _ActiveDragSource {
@@ -5875,13 +5890,6 @@ var useColumnPointerEvents = ({
         }
         const currentComputedColumnOrder = getComputed().computedColumnOrder;
         if (JSON.stringify(columnOrder, currentComputedColumnOrder)) {
-          computedVisibleColumns.forEach((col) => {
-            setInfiniteColumnOffsetWhileReordering(
-              col.computedVisibleIndex,
-              "",
-              rootRef.current
-            );
-          });
           actions.columnOrder = adjustColumnOrderForAllColumns({
             newColumnOrder: columnOrder,
             visibleColumnOrder: getComputed().computedVisibleColumns.map(
@@ -5942,27 +5950,48 @@ var useColumnPointerEvents = ({
         requestAnimationFrame(() => {
           const { multiSortBehavior } = getState();
           const target2 = domRef.current;
-          rootRef.current?.classList.remove(InfiniteClsShiftingColumns);
+          const rootNode = rootRef.current;
+          rootNode?.classList.remove(InfiniteClsShiftingColumns);
           dragger.stop();
           brain.update({
             ...initialAvailableSize
           });
           discardAlwaysRenderedColumn?.();
           restoreRenderRange?.();
+          target2.style.cursor = initialCursor;
+          target2.releasePointerCapture(pointerId);
+          target2.removeEventListener("pointermove", onPointerMove);
+          target2.removeEventListener("pointerup", onPointerUp);
+          setProxyPosition(null);
+          const dragColumnSortable = api.getColumnApi(dragColumn.id)?.isSortable() ?? false;
+          if (!didDragAtLeastOnce && dragColumnSortable) {
+            api.toggleSortingForColumn(dragColumn.id, {
+              multiSortBehavior: multiSortBehavior === "replace" && (e2.ctrlKey || e2.metaKey) ? "append" : multiSortBehavior
+            });
+          }
+          flushSync(() => {
+            if (reorderDragResult) {
+              persistColumnOrder(reorderDragResult);
+            } else if (didDragAtLeastOnce) {
+              if (allowColumnHideOnDrag) {
+                api.setVisibilityForColumn(dragColumn.id, false);
+              }
+            }
+            actions.columnReorderDragColumnId = false;
+            if (horizontalLayoutPageIndex != null) {
+              actions.columnReorderInPageIndex = null;
+            }
+          });
           computedVisibleColumns.forEach((col) => {
             clearInfiniteColumnReorderDuration(
               col.computedVisibleIndex,
-              rootRef.current
-            );
-            setInfiniteColumnVisibility(
-              col.computedVisibleIndex,
-              "",
-              rootRef.current
+              rootNode
             );
+            setInfiniteColumnVisibility(col.computedVisibleIndex, "", rootNode);
             setInfiniteColumnOffsetWhileReordering(
               col.computedVisibleIndex,
               "",
-              rootRef.current
+              rootNode
             );
           });
           setInfiniteColumnZIndex(
@@ -5971,30 +6000,8 @@ var useColumnPointerEvents = ({
               pinnedStartColsCount: computedPinnedStartColumns.length,
               visibleColsCount: computedVisibleColumns.length
             }),
-            rootRef.current
+            rootNode
           );
-          target2.style.cursor = initialCursor;
-          target2.releasePointerCapture(pointerId);
-          target2.removeEventListener("pointermove", onPointerMove);
-          target2.removeEventListener("pointerup", onPointerUp);
-          setProxyPosition(null);
-          const dragColumnSortable = api.getColumnApi(dragColumn.id)?.isSortable() ?? false;
-          if (!didDragAtLeastOnce && dragColumnSortable) {
-            api.toggleSortingForColumn(dragColumn.id, {
-              multiSortBehavior: multiSortBehavior === "replace" && (e2.ctrlKey || e2.metaKey) ? "append" : multiSortBehavior
-            });
-          }
-          if (reorderDragResult) {
-            persistColumnOrder(reorderDragResult);
-          } else if (didDragAtLeastOnce) {
-            if (allowColumnHideOnDrag) {
-              api.setVisibilityForColumn(dragColumn.id, false);
-            }
-          }
-          actions.columnReorderDragColumnId = false;
-          if (horizontalLayoutPageIndex != null) {
-            actions.columnReorderInPageIndex = null;
-          }
         });
       };
       target.addEventListener("pointermove", onPointerMove);
@@ -8124,7 +8131,7 @@ function useColumnResizeHandle(column, opts) {
 
 // src/components/InfiniteTable/components/draggable/DragList.tsx
 import * as React33 from "react";
-import { useCallback as useCallback16, useEffect as useEffect10 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect10, useState as useState12 } from "react";
 
 // src/components/InfiniteTable/components/draggable/DragList.css.ts
 var DragListRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw3a _16lm1iw1", variantClassNames: { dragging: { true: "_16lm1iwn _16lm1iw1x" } }, defaultVariants: {}, compoundVariants: [] });
@@ -8186,6 +8193,20 @@ var DragInteractionTarget = class extends EventEmitter {
     }
     return result;
   }
+  /**
+   * Adjusts breakpoints and listRectangle to compensate for container scroll.
+   * When the container scrolls by `scrollDelta`, items shift in the viewport
+   * but the pointer (in the source-adjusted coordinate space) doesn't change.
+   * Shifting breakpoints keeps the drop index calculation correct.
+   */
+  adjustForScroll(scrollDelta) {
+    this.breakpoints = this.breakpoints.map((bp) => bp - scrollDelta);
+    if (this.data.orientation === "vertical") {
+      this.data.listRectangle.shift({ top: -scrollDelta, left: 0 });
+    } else {
+      this.data.listRectangle.shift({ top: 0, left: -scrollDelta });
+    }
+  }
   move(params) {
     this.emit("move", params);
   }
@@ -8241,6 +8262,217 @@ var DragInteractionTarget = class extends EventEmitter {
   }
 };
 
+// src/components/InfiniteTable/components/draggable/AutoScroller.ts
+var defaultAutoScrollerConfig = {
+  startFromPercentage: 0.25,
+  maxScrollAtPercentage: 0.05,
+  maxPixelScroll: 28,
+  ease: (pct) => pct ** 2,
+  durationDampening: {
+    stopDampeningAt: 1200,
+    accelerateAt: 360
+  }
+};
+function isScrollable(element, orientation) {
+  const style2 = getComputedStyle(element);
+  const overflowProp = orientation === "vertical" ? style2.overflowY : style2.overflowX;
+  if (overflowProp !== "auto" && overflowProp !== "scroll") {
+    return false;
+  }
+  return orientation === "vertical" ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;
+}
+function findScrollableAncestor(element, orientation) {
+  let current = element;
+  while (current) {
+    if (current === document.documentElement || current === document.body) {
+      break;
+    }
+    if (isScrollable(current, orientation)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getThresholds(containerSize, config) {
+  return {
+    startScrollingFrom: containerSize * config.startFromPercentage,
+    maxScrollValueAt: containerSize * config.maxScrollAtPercentage
+  };
+}
+var MIN_SCROLL = 1;
+function getValueFromDistance(distanceToEdge, thresholds, config) {
+  if (distanceToEdge > thresholds.startScrollingFrom) {
+    return 0;
+  }
+  if (distanceToEdge <= thresholds.maxScrollValueAt) {
+    return config.maxPixelScroll;
+  }
+  if (distanceToEdge === thresholds.startScrollingFrom) {
+    return MIN_SCROLL;
+  }
+  const percentFromMax = (distanceToEdge - thresholds.maxScrollValueAt) / (thresholds.startScrollingFrom - thresholds.maxScrollValueAt);
+  const percentFromStart = 1 - percentFromMax;
+  return Math.ceil(config.maxPixelScroll * config.ease(percentFromStart));
+}
+function dampenByTime(proposedScroll, dragStartTime, config) {
+  const { accelerateAt, stopDampeningAt } = config.durationDampening;
+  const runTime = Date.now() - dragStartTime;
+  if (runTime >= stopDampeningAt) {
+    return proposedScroll;
+  }
+  if (runTime < accelerateAt) {
+    return MIN_SCROLL;
+  }
+  const pct = (runTime - accelerateAt) / (stopDampeningAt - accelerateAt);
+  return Math.ceil(proposedScroll * config.ease(pct));
+}
+function getScrollForAxis(point, containerStart, containerEnd, containerSize, config, dragStartTime, shouldUseDampening) {
+  if (point < containerStart || point > containerEnd) {
+    return 0;
+  }
+  const thresholds = getThresholds(containerSize, config);
+  const distToStart = point - containerStart;
+  const distToEnd = containerEnd - point;
+  const closerToEnd = distToEnd < distToStart;
+  let value;
+  if (closerToEnd) {
+    value = getValueFromDistance(distToEnd, thresholds, config);
+  } else {
+    value = -getValueFromDistance(distToStart, thresholds, config);
+  }
+  if (value === 0) {
+    return 0;
+  }
+  if (shouldUseDampening) {
+    const sign = value > 0 ? 1 : -1;
+    return sign * dampenByTime(Math.abs(value), dragStartTime, config);
+  }
+  return value;
+}
+var AutoScroller = class {
+  constructor(options) {
+    this.scrollContainer = null;
+    this.rafId = null;
+    this.lastPointer = { left: 0, top: 0 };
+    this.dragStartTime = 0;
+    this.shouldUseDampening = false;
+    this.active = false;
+    // captured at drag start before transforms inflate scrollHeight
+    this.maxScrollTop = 0;
+    this.maxScrollLeft = 0;
+    this.orientation = options.orientation;
+    this.onScroll = options.onScroll;
+    this.config = { ...defaultAutoScrollerConfig, ...options.config };
+  }
+  start(listElement) {
+    this.scrollContainer = findScrollableAncestor(
+      listElement,
+      this.orientation
+    );
+    if (this.scrollContainer) {
+      this.maxScrollTop = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
+      this.maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;
+    }
+    this.dragStartTime = Date.now();
+    this.shouldUseDampening = true;
+    this.active = true;
+  }
+  getScrollContainer() {
+    return this.scrollContainer;
+  }
+  updatePointer(point) {
+    this.lastPointer = point;
+    if (!this.rafId && this.active) {
+      this.scheduleScroll();
+    }
+  }
+  scheduleScroll() {
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      if (!this.active || !this.scrollContainer) {
+        return;
+      }
+      const delta = this.computeScroll();
+      if (delta.top === 0 && delta.left === 0) {
+        return;
+      }
+      const scrollBefore = {
+        top: this.scrollContainer.scrollTop,
+        left: this.scrollContainer.scrollLeft
+      };
+      const clampedTop = Math.max(
+        0,
+        Math.min(this.maxScrollTop, scrollBefore.top + delta.top)
+      );
+      const clampedLeft = Math.max(
+        0,
+        Math.min(this.maxScrollLeft, scrollBefore.left + delta.left)
+      );
+      this.scrollContainer.scrollTop = clampedTop;
+      this.scrollContainer.scrollLeft = clampedLeft;
+      const actualDelta = {
+        top: this.scrollContainer.scrollTop - scrollBefore.top,
+        left: this.scrollContainer.scrollLeft - scrollBefore.left
+      };
+      const didScroll = actualDelta.top !== 0 || actualDelta.left !== 0;
+      if (didScroll) {
+        this.onScroll(actualDelta);
+      }
+      if (this.active && didScroll) {
+        this.scheduleScroll();
+      }
+    });
+  }
+  computeScroll() {
+    if (!this.scrollContainer) {
+      return { top: 0, left: 0 };
+    }
+    const rect = this.scrollContainer.getBoundingClientRect();
+    if (this.orientation === "vertical") {
+      if (this.lastPointer.left < rect.left || this.lastPointer.left > rect.right) {
+        return { top: 0, left: 0 };
+      }
+    } else {
+      if (this.lastPointer.top < rect.top || this.lastPointer.top > rect.bottom) {
+        return { top: 0, left: 0 };
+      }
+    }
+    let scrollTop2 = 0;
+    let scrollLeft2 = 0;
+    if (this.orientation === "vertical") {
+      scrollTop2 = getScrollForAxis(
+        this.lastPointer.top,
+        rect.top,
+        rect.bottom,
+        rect.height,
+        this.config,
+        this.dragStartTime,
+        this.shouldUseDampening
+      );
+    } else {
+      scrollLeft2 = getScrollForAxis(
+        this.lastPointer.left,
+        rect.left,
+        rect.right,
+        rect.width,
+        this.config,
+        this.dragStartTime,
+        this.shouldUseDampening
+      );
+    }
+    return { top: scrollTop2, left: scrollLeft2 };
+  }
+  stop() {
+    this.active = false;
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.scrollContainer = null;
+  }
+};
+
 // src/components/InfiniteTable/components/draggable/DragList.tsx
 var DragListContext = React33.createContext({
   dragItemId: null,
@@ -8282,15 +8514,34 @@ function getDraggableItems(domRef) {
 }
 function getInteractionTargetData(params) {
   const { domRef, orientation, dragListId } = params;
-  const listRectangle = Rectangle.from(domRef.current.getBoundingClientRect());
+  const draggableItems = getDraggableItems(domRef);
+  const domRect = domRef.current.getBoundingClientRect();
+  let top2 = domRect.top;
+  let left2 = domRect.left;
+  let bottom = domRect.bottom;
+  let right = domRect.right;
+  for (const item of draggableItems) {
+    const r = item.rect;
+    if (r.top < top2) top2 = r.top;
+    if (r.left < left2) left2 = r.left;
+    if (r.bottom > bottom) bottom = r.bottom;
+    if (r.right > right) right = r.right;
+  }
+  const listRectangle = Rectangle.from({
+    top: top2,
+    left: left2,
+    width: right - left2,
+    height: bottom - top2
+  });
   const options = {
-    draggableItems: getDraggableItems(domRef),
+    draggableItems,
     orientation,
     listId: dragListId,
     listRectangle,
     acceptDropsFrom: params.acceptDropsFrom,
     shouldAcceptDrop: params.shouldAcceptDrop,
-    initial: params.initial
+    initial: params.initial,
+    preserveDragSpace: params.preserveDragSpace
   };
   return options;
 }
@@ -8301,7 +8552,7 @@ function createInteractionTarget(params) {
 function useInteractionTarget(domRef, props) {
   const getProps = useLatest(props);
   const [interactionTarget, doSetInteractionTarget] = React33.useState(null);
-  const setInteractionTarget = useCallback16(
+  const setInteractionTarget = useCallback17(
     (interactionTarget2) => {
       if (interactionTarget2) {
         DragManager.registerDragInteractionTarget(interactionTarget2);
@@ -8348,8 +8599,49 @@ function useInteractionTarget(domRef, props) {
     getInteractionTarget
   };
 }
+function createDefaultProxy(dragItemNode, initialRect) {
+  const proxy = dragItemNode.cloneNode(true);
+  proxy.removeAttribute(DRAG_ITEM_ATTRIBUTE);
+  proxy.style.position = "fixed";
+  proxy.style.top = `${initialRect.top}px`;
+  proxy.style.left = `${initialRect.left}px`;
+  proxy.style.width = `${initialRect.width}px`;
+  proxy.style.height = `${initialRect.height}px`;
+  proxy.style.zIndex = "999999";
+  proxy.style.pointerEvents = "none";
+  proxy.style.margin = "0";
+  proxy.style.boxSizing = "border-box";
+  proxy.style.transform = "none";
+  document.body.appendChild(proxy);
+  return proxy;
+}
+function defaultDragProxyMove({
+  proxyElement,
+  dx,
+  dy
+}) {
+  proxyElement.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+}
+function cleanupProxy(proxyStateRef) {
+  const state = proxyStateRef.current;
+  if (!state) return;
+  if (state.cleanup) {
+    state.cleanup({ proxyElement: state.proxyElement });
+  } else {
+    state.proxyElement.remove();
+  }
+  state.originalNode.style.visibility = "";
+  proxyStateRef.current = null;
+}
 var DragList = (props) => {
   const domRef = React33.useRef(null);
+  const proxyStateRef = React33.useRef(null);
+  const [dragProxyRenderState, setDragProxyRenderState] = useState12(null);
+  const sourceScrollOffsetRef = React33.useRef({ top: 0, left: 0 });
+  const proxyPortalNodeRef = React33.useRef(null);
+  const proxyRefCallback = React33.useCallback((node) => {
+    proxyPortalNodeRef.current = node;
+  }, []);
   const { dropTargetListId, dragSourceListId } = useDragDropProvider();
   const { updateDragOperationSourceAndTarget, dragItemId, status } = useDragDropProvider();
   const getOnDrop = useLatest(props.onDrop);
@@ -8390,18 +8682,29 @@ var DragList = (props) => {
       );
       const removeOnDragMove = interactionTarget.on(
         "move",
-        ({ offsetsForItems, items, status: status2 }) => {
+        ({ offsetsForItems, items, status: status2, dragItem }) => {
           if (status2 === "rejected") {
             return;
           }
           const dragItems = getDragItems();
           const updatePosition = getUpdatePosition();
+          const proxyState = proxyStateRef.current;
           items.forEach((item, index) => {
-            const offset = offsetsForItems[index];
+            let offset = offsetsForItems[index];
             const node = dragItems[index];
             if (!node) {
               return;
             }
+            if (proxyState && item.id === proxyState.dragItemId) {
+              return;
+            }
+            if (!proxyState && item.id === dragItem.id) {
+              const scrollOffset = sourceScrollOffsetRef.current;
+              offset = {
+                left: offset.left + scrollOffset.left,
+                top: offset.top + scrollOffset.top
+              };
+            }
             updatePosition({
               id: item.id,
               node,
@@ -8439,6 +8742,12 @@ var DragList = (props) => {
             offset: null
           });
         });
+        cleanupProxy(proxyStateRef);
+        setDragProxyRenderState((prev) => {
+          if (!prev) return prev;
+          requestAnimationFrame(() => setDragProxyRenderState(null));
+          return { ...prev, dragItemId: null };
+        });
         const accepted = status2 === "accepted";
         if (dragListId === dropTargetListId2 && dragSourceListId2 !== dragListId) {
           if (onAcceptDrop && accepted) {
@@ -8468,16 +8777,64 @@ var DragList = (props) => {
           });
         }
       });
+      let targetAutoScroller = null;
+      let targetScrollContainer = null;
+      let targetScrollHandler = null;
+      let targetPointermoveHandler = null;
+      if (!interactionTarget.getData().initial && domRef.current) {
+        targetAutoScroller = new AutoScroller({
+          orientation: props.orientation,
+          onScroll: () => {
+          }
+        });
+        targetAutoScroller.start(domRef.current);
+        targetScrollContainer = targetAutoScroller.getScrollContainer();
+        if (targetScrollContainer) {
+          let lastScroll = props.orientation === "vertical" ? targetScrollContainer.scrollTop : targetScrollContainer.scrollLeft;
+          targetScrollHandler = () => {
+            const current = props.orientation === "vertical" ? targetScrollContainer.scrollTop : targetScrollContainer.scrollLeft;
+            const delta = current - lastScroll;
+            lastScroll = current;
+            if (delta !== 0) {
+              interactionTarget.adjustForScroll(delta);
+              DragManager.retriggerMove();
+            }
+          };
+          targetScrollContainer.addEventListener("scroll", targetScrollHandler);
+        }
+        targetPointermoveHandler = (e) => {
+          targetAutoScroller.updatePointer({
+            left: e.clientX,
+            top: e.clientY
+          });
+        };
+        getGlobal().addEventListener("pointermove", targetPointermoveHandler);
+      }
       return () => {
         removeOnDragStart();
         removeOnDragMove();
         removeOnDragDrop();
+        if (targetAutoScroller) {
+          targetAutoScroller.stop();
+        }
+        if (targetScrollContainer && targetScrollHandler) {
+          targetScrollContainer.removeEventListener(
+            "scroll",
+            targetScrollHandler
+          );
+        }
+        if (targetPointermoveHandler) {
+          getGlobal().removeEventListener(
+            "pointermove",
+            targetPointermoveHandler
+          );
+        }
       };
     }
     return void 0;
   }, [interactionTarget, props.dragListId]);
   const dragItemsRef = React33.useRef([]);
-  const getDragItems = useCallback16(() => {
+  const getDragItems = useCallback17(() => {
     let dragItems = dragItemsRef.current;
     if (!dragItems || dragItems.length === 0) {
       dragItems = Array.from(
@@ -8487,7 +8844,7 @@ var DragList = (props) => {
     }
     return dragItems;
   }, []);
-  const onDragItemPointerDown = useCallback16(
+  const onDragItemPointerDown = useCallback17(
     (e) => {
       const target = e.currentTarget;
       let dragItemId2 = target.getAttribute(DRAG_ITEM_ATTRIBUTE);
@@ -8516,19 +8873,63 @@ var DragList = (props) => {
         orientation: props.orientation,
         dragListId: props.dragListId,
         acceptDropsFrom: props.acceptDropsFrom,
-        initial: true
+        initial: true,
+        preserveDragSpace: props.preserveDragSpace
       });
       const draggableItems = interactionTarget2.getData().draggableItems;
       const dragIndex = draggableItems.findIndex(
         (item) => item.id === dragItemId2
       );
       const dragItem = draggableItems[dragIndex];
+      const dragItemNode = dragItems[dragIndex].getAttribute(DRAG_ITEM_ATTRIBUTE) === `${dragItemId2}` ? dragItems[dragIndex] : dragItems.find(
+        (node) => node.getAttribute(DRAG_ITEM_ATTRIBUTE) === `${dragItemId2}`
+      );
       setInteractionTarget(interactionTarget2);
       const initialCoords = {
         left: e.clientX,
         top: e.clientY
       };
+      let lastPointer = { left: e.clientX, top: e.clientY };
+      sourceScrollOffsetRef.current = { top: 0, left: 0 };
+      const autoScroller = new AutoScroller({
+        orientation: props.orientation,
+        onScroll: () => {
+        }
+      });
+      if (domRef.current) {
+        autoScroller.start(domRef.current);
+      }
+      const scrollContainer = autoScroller.getScrollContainer();
+      let lastSourceScroll = scrollContainer ? props.orientation === "vertical" ? scrollContainer.scrollTop : scrollContainer.scrollLeft : 0;
+      function fireDragMove() {
+        if (!dragOperation) return;
+        dragOperation.move({
+          left: lastPointer.left,
+          top: lastPointer.top
+        });
+      }
+      const onContainerScroll = () => {
+        if (!scrollContainer) return;
+        const current = props.orientation === "vertical" ? scrollContainer.scrollTop : scrollContainer.scrollLeft;
+        const delta = current - lastSourceScroll;
+        lastSourceScroll = current;
+        if (delta !== 0) {
+          interactionTarget2.adjustForScroll(delta);
+          if (props.orientation === "vertical") {
+            sourceScrollOffsetRef.current.top += delta;
+          } else {
+            sourceScrollOffsetRef.current.left += delta;
+          }
+        }
+        fireDragMove();
+      };
+      scrollContainer?.addEventListener("scroll", onContainerScroll);
+      const dragStrategy = props.dragStrategy ?? "proxy";
+      const useProxy = dragStrategy === "proxy" && !props.renderDragProxy;
+      const useRenderProxy = dragStrategy === "proxy" && !!props.renderDragProxy;
+      const proxyMove = props.onDragProxyMove ?? defaultDragProxyMove;
       const onPointerMove = (e2) => {
+        lastPointer = { left: e2.clientX, top: e2.clientY };
         if (!dragOperation) {
           dragOperation = DragManager.startDrag(
             {
@@ -8538,15 +8939,84 @@ var DragList = (props) => {
             },
             initialCoords
           );
+          if (dragItemNode && useProxy) {
+            const rect = dragItemNode.getBoundingClientRect();
+            let cachedProxy = null;
+            const setupParams = {
+              dragItemNode,
+              dragItemId: `${dragItemId2}`,
+              initialRect: rect,
+              initialCoords,
+              get proxyElement() {
+                if (!cachedProxy) {
+                  cachedProxy = createDefaultProxy(dragItemNode, rect);
+                }
+                return cachedProxy;
+              }
+            };
+            const setupResult = props.onDragProxySetup?.(setupParams);
+            const proxyElement = setupResult?.proxyElement ?? setupParams.proxyElement;
+            dragItemNode.style.visibility = "hidden";
+            proxyStateRef.current = {
+              proxyElement,
+              originalNode: dragItemNode,
+              dragItemId: `${dragItemId2}`,
+              initialRect: rect,
+              cleanup: setupResult?.cleanup
+            };
+          }
+          if (dragItemNode && useRenderProxy) {
+            const rect = dragItemNode.getBoundingClientRect();
+            dragItemNode.style.visibility = "hidden";
+            proxyStateRef.current = {
+              proxyElement: dragItemNode,
+              originalNode: dragItemNode,
+              dragItemId: `${dragItemId2}`,
+              initialRect: rect,
+              // Portal handles its own DOM; only restore visibility.
+              cleanup: () => {
+              }
+            };
+            setDragProxyRenderState({
+              dragItemId: `${dragItemId2}`,
+              initialRect: rect,
+              dx: 0,
+              dy: 0
+            });
+          }
         }
-        dragOperation.move({
+        const dx = e2.clientX - initialCoords.left;
+        const dy = e2.clientY - initialCoords.top;
+        if (useRenderProxy) {
+          setDragProxyRenderState(
+            (prev) => prev ? { ...prev, dx, dy } : prev
+          );
+        } else {
+          const proxyState = proxyStateRef.current;
+          if (proxyState) {
+            proxyMove({ proxyElement: proxyState.proxyElement, dx, dy });
+          }
+        }
+        autoScroller.updatePointer({
           left: e2.clientX,
           top: e2.clientY
         });
+        fireDragMove();
       };
       const onPointerUp = () => {
+        autoScroller.stop();
+        scrollContainer?.removeEventListener("scroll", onContainerScroll);
         getGlobal().removeEventListener("pointermove", onPointerMove);
+        if (useRenderProxy) {
+          setDragProxyRenderState(
+            (prev) => prev ? { ...prev, dragItemId: null } : prev
+          );
+          requestAnimationFrame(() => {
+            setDragProxyRenderState(null);
+          });
+        }
         if (!dragOperation) {
+          cleanupProxy(proxyStateRef);
           setInteractionTarget(null);
           return;
         }
@@ -8560,7 +9030,11 @@ var DragList = (props) => {
       props.orientation,
       props.dragListId,
       props.acceptDropsFrom,
-      props.removeOnDropOutside
+      props.removeOnDropOutside,
+      props.dragStrategy,
+      props.renderDragProxy,
+      props.onDragProxySetup,
+      props.onDragProxyMove
     ]
   );
   const dragging = !!dragItemId;
@@ -8595,7 +9069,10 @@ var DragList = (props) => {
     [DRAG_LIST_ATTRIBUTE]: props.dragListId
   };
   const children = typeof props.children === "function" ? props.children(domProps, contextValue) : props.children;
-  return /* @__PURE__ */ React33.createElement(DragListContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React33.createElement(DragListContext.Provider, { value: contextValue }, children, dragProxyRenderState && props.renderDragProxy ? props.renderDragProxy({
+    ...dragProxyRenderState,
+    ref: proxyRefCallback
+  }) : null);
 };
 var DRAG_LIST_ATTRIBUTE = "data-drag-list-id";
 var DRAG_ITEM_ATTRIBUTE = "data-drag-item-id";
@@ -8678,7 +9155,7 @@ import * as React49 from "react";
 
 // src/components/HeadlessTable/index.tsx
 import * as React43 from "react";
-import { useCallback as useCallback17, useEffect as useEffect14, useRef as useRef18, useState as useState13 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef18, useState as useState14 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
 import * as React35 from "react";
@@ -8795,9 +9272,9 @@ import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo6 } from "react"
 
 // src/components/RawList/AvoidReactDiff.tsx
 import * as React37 from "react";
-import { useLayoutEffect as useLayoutEffect7, useRef as useRef15, useState as useState12 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef15, useState as useState13 } from "react";
 function AvoidReactDiffFn(props) {
-  const [children, setChildren] = useState12(props.updater.get);
+  const [children, setChildren] = useState13(props.updater.get);
   const rafId = useRef15(null);
   const afterCommitRef = useRef15(props.afterCommit);
   afterCommitRef.current = props.afterCommit;
@@ -12634,7 +13111,7 @@ function HeadlessTable(props) {
   } = props;
   const { autoFocus } = domProps;
   const domRef = useRef18(null);
-  const [scrollSize, setTotalScrollSize] = useState13({
+  const [scrollSize, setTotalScrollSize] = useState14({
     width: 0,
     height: 0
   });
@@ -12661,7 +13138,7 @@ function HeadlessTable(props) {
     const remove = setupResizeObserver(node, onResize, { debounce: 50 });
     return remove;
   }, [wrapRowsHorizontally, brain]);
-  const updateDOMTransform = useCallback17((scrollPos) => {
+  const updateDOMTransform = useCallback18((scrollPos) => {
     requestAnimationFrame(() => {
       if (!domRef.current) {
         return;
@@ -12673,7 +13150,7 @@ function HeadlessTable(props) {
       return;
     });
   }, []);
-  const onContainerScroll = useCallback17(
+  const onContainerScroll = useCallback18(
     (scrollPos) => {
       brain.setScrollPosition(scrollPos, updateDOMTransform);
     },
@@ -12840,23 +13317,23 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import * as React48 from "react";
-import { useCallback as useCallback19, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef20 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect15, useMemo as useMemo7, useRef as useRef20 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import * as React46 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
 import * as React45 from "react";
-import { useCallback as useCallback18 } from "react";
+import { useCallback as useCallback19 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-import { useRef as useRef19, useState as useState14 } from "react";
+import { useRef as useRef19, useState as useState15 } from "react";
 import * as React44 from "react";
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
   const domRef = useRef19(null);
-  const [constrained, setConstrained] = useState14(false);
+  const [constrained, setConstrained] = useState15(false);
   const constrainedRef = useRef19(constrained);
   constrainedRef.current = constrained;
   const col = props.groupColumns[0];
@@ -12960,7 +13437,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     };
   });
   const lastColumnInGroup = groupColumns[groupColumns.length - 1];
-  const computeResizeForDiff = useCallback18(
+  const computeResizeForDiff = useCallback19(
     (diff) => {
       const state = getState();
       const { columnSizing, viewportReservedWidth, bodySize } = state;
@@ -13002,7 +13479,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     },
     [lastColumnInGroup]
   );
-  const onColumnResize = useCallback18(
+  const onColumnResize = useCallback19(
     (diff) => {
       const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
       actions.viewportReservedWidth = reservedWidth;
@@ -13168,7 +13645,7 @@ function InfiniteTableInternalHeaderFn(props) {
     };
   });
   const domRef = useRef20(null);
-  const updateDOMTransform = useCallback19((scrollPosition) => {
+  const updateDOMTransform = useCallback20((scrollPosition) => {
     if (domRef.current) {
       domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
     }
@@ -13213,7 +13690,7 @@ function InfiniteTableInternalHeaderFn(props) {
       selectionMode
     };
   }, [allRowsSelected, someRowsSelected, selectionMode]);
-  const renderCell = useCallback19(
+  const renderCell = useCallback20(
     (params) => {
       const {
         rowIndex,
@@ -13299,6 +13776,7 @@ function InfiniteTableInternalHeaderFn(props) {
     {
       orientation: "horizontal",
       dragListId: "header",
+      dragStrategy: "inline",
       onDrop: emptyFn3,
       updatePosition: emptyFn3
     },
@@ -13601,7 +14079,7 @@ function InfiniteTableHeaderCellFn(props) {
   const { onResize, height: height2, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
   const header = column.header;
-  const ref = useCallback21(
+  const ref = useCallback22(
     (node) => {
       domRef.current = node;
       props.domRef?.(node);
@@ -13886,7 +14364,7 @@ function InfiniteTableHeaderCellFn(props) {
     }
   ) : /* @__PURE__ */ React51.createElement(InfiniteTableColumnHeaderFilterEmpty, null);
   renderParam.renderBag.filterEditor = columnFilterEditor;
-  const pointerDown = useCallback21(
+  const pointerDown = useCallback22(
     (e) => {
       onPointerDown(e);
       onDragItemPointerDown(e);
@@ -16958,7 +17436,7 @@ var Indexer = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect19, useMemo as useMemo10, useRef as useRef24, useState as useState15 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo10, useRef as useRef24, useState as useState16 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
 import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect11, useRef as useRef23 } from "react";
@@ -20552,7 +21030,7 @@ function useLoadData(options) {
     filterTypes,
     cursorId: stateCursorId
   } = dataSourceState;
-  const [scrollbars, setScrollbars] = useState15({
+  const [scrollbars, setScrollbars] = useState16({
     vertical: false,
     horizontal: false
   });
@@ -21912,10 +22390,10 @@ function getDataSourceStateRestoreForDetails(state) {
 
 // src/components/DataSource/privateHooks/useDataSource.tsx
 import React54, {
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect12,
-  useState as useState16
+  useState as useState17
 } from "react";
 
 // src/components/DataSource/DataSourceStore.ts
@@ -21937,7 +22415,7 @@ function useDataSourceInternal(props) {
   } = managedContextValue;
   dataSourceState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
   const getDataSourceState = useLatest(dataSourceState);
-  const [dataSourceApi] = useState16(
+  const [dataSourceApi] = useState17(
     () => getDataSourceApi({
       getState: getDataSourceState,
       actions: dataSourceActions
@@ -21954,10 +22432,10 @@ function useDataSourceInternal(props) {
   const getLatestManagedContextValue = useLatest(managedContextValue);
   const getLatestContextValue = useLatest(contextValue);
   const DataSourceContext = getDataSourceContext();
-  const DataSource2 = useCallback23(
+  const DataSource2 = useCallback24(
     ({ children }) => {
       const DataSourceStoreContext = getDataSourceStoreContext();
-      const [store] = useState16(() => createDataSourceStore());
+      const [store] = useState17(() => createDataSourceStore());
       if (typeof children === "function") {
         children = children(getDataSourceState());
       }
@@ -23976,7 +24454,7 @@ function getImperativeApi(context) {
 import {
   useEffect as useEffect21,
   useRef as useRef25,
-  useState as useState17
+  useState as useState18
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -24048,7 +24526,7 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useManagedComponentState();
-  const [refreshId, setRefreshId] = useState17(0);
+  const [refreshId, setRefreshId] = useState18(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef25(null);
@@ -24110,7 +24588,7 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect24, useMemo as useMemo15, useState as useState19 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo15, useState as useState20 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -24370,10 +24848,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-import { useCallback as useCallback24 } from "react";
+import { useCallback as useCallback25 } from "react";
 var debug3 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = useCallback24(
+  const columnSize = useCallback25(
     (index) => {
       const column = columns[index];
       if (false) {
@@ -25209,7 +25687,7 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-import { useCallback as useCallback25 } from "react";
+import { useCallback as useCallback26 } from "react";
 function useToggleGroupRow() {
   const { getDataSourceState, dataSourceActions, getDataSourceMasterContext } = useDataSourceSelector((ctx) => {
     return {
@@ -25218,7 +25696,7 @@ function useToggleGroupRow() {
       getDataSourceMasterContext: ctx.getDataSourceMasterContext
     };
   });
-  const toggleGroupRow = useCallback25((groupKeys) => {
+  const toggleGroupRow = useCallback26((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -25920,7 +26398,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState18, useEffect as useEffect23, useLayoutEffect as useLayoutEffect14 } from "react";
+import { useState as useState19, useEffect as useEffect23, useLayoutEffect as useLayoutEffect14 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -25928,7 +26406,7 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(getState) {
   const brain = getState().brain;
   const { getDataSourceState } = useDataSourceStableContext();
-  const [scrollbars, setScrollbars] = useState18(INITIAL_SCROLLBARS);
+  const [scrollbars, setScrollbars] = useState19(INITIAL_SCROLLBARS);
   useEffect23(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
@@ -26016,7 +26494,7 @@ function useComputed(options) {
       groupBy: ctx.dataSourceState.groupBy
     };
   });
-  useState19(() => {
+  useState20(() => {
     onRowHeightCSSVarChange.onChange((rowHeight2) => {
       if (rowHeight2) {
         componentActions.rowHeight = rowHeight2;
@@ -26108,7 +26586,7 @@ function useComputed(options) {
   const scrollbars = useScrollbars(getState);
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
-  const [multiRowSelector] = useState19(() => {
+  const [multiRowSelector] = useState20(() => {
     const multiRowSelector2 = new MultiRowSelector({
       isRowDisabledAt: (index) => {
         const dataItem = getDataSourceState().dataArray[index];
@@ -26122,7 +26600,7 @@ function useComputed(options) {
     return multiRowSelector2;
   });
   const getComputedVisibleColumns = useLatest(computedVisibleColumns);
-  const [multiCellSelector] = useState19(() => {
+  const [multiCellSelector] = useState20(() => {
     return new MultiCellSelector({
       getPrimaryKeyByIndex: dataSourceApi.getPrimaryKeyByIndex,
       getColumnIdByIndex: (colIndex) => {
@@ -26380,7 +26858,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "8.0.0"
+      version: "8.0.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -26475,7 +26953,7 @@ function createInfiniteTableStore() {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback26, useMemo as useMemo17, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback27, useMemo as useMemo17, useEffect as useEffect27 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -27229,7 +27707,7 @@ function subscribeToDOMEvents() {
       getState: ctx.getState
     };
   });
-  const onKeyDown2 = useCallback26((event) => {
+  const onKeyDown2 = useCallback27((event) => {
     getState().keyDown(event);
   }, []);
   return { onKeyDown: onKeyDown2 };
@@ -27245,10 +27723,10 @@ import { useEffect as useEffect31 } from "react";
 // src/components/hooks/useOverlay/index.tsx
 import * as React57 from "react";
 import {
-  useCallback as useCallback27,
+  useCallback as useCallback28,
   useEffect as useEffect29,
   useLayoutEffect as useLayoutEffect15,
-  useState as useState20
+  useState as useState21
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
@@ -27440,7 +27918,7 @@ function OverlayContent(props) {
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
-      ref: useCallback27((node) => {
+      ref: useCallback28((node) => {
         if (node) {
           alignNode(node, props);
         }
@@ -27489,7 +27967,7 @@ async function alignNode(node, params) {
   }
 }
 function useOverlayPortal(content, portalContainer) {
-  const [container, setContainer] = useState20(null);
+  const [container, setContainer] = useState21(null);
   useLayoutEffect15(() => {
     async function getContainer() {
       const container2 = portalContainer ? await retrieveElement(portalContainer) : null;
@@ -27534,10 +28012,10 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
 }
 function useOverlay(params) {
   const rootParams = params;
-  const [handles] = useState20(() => /* @__PURE__ */ new Map());
-  const [handleToRealign, setHandleToRealign] = useState20(null);
-  const [realignTimestamp, setRealignTimestamp] = useState20(0);
-  const getContentForPortal = useCallback27(() => {
+  const [handles] = useState21(() => /* @__PURE__ */ new Map());
+  const [handleToRealign, setHandleToRealign] = useState21(null);
+  const [realignTimestamp, setRealignTimestamp] = useState21(0);
+  const getContentForPortal = useCallback28(() => {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
@@ -27551,7 +28029,7 @@ function useOverlay(params) {
     getContentForPortal(),
     params.portalContainer
   );
-  const showOverlay = useCallback27(
+  const showOverlay = useCallback28(
     (content, params2) => {
       const id = params2.id || getIdForReactOnlyChild(content) || getChangeDetect();
       const key = `${id}`;
@@ -27793,10 +28271,10 @@ var deriveStateFromProps2 = (params) => {
 // src/components/Menu/Menu.tsx
 import * as React60 from "react";
 import {
-  useCallback as useCallback29,
+  useCallback as useCallback30,
   useLayoutEffect as useLayoutEffect16,
   useRef as useRef30,
-  useState as useState22
+  useState as useState23
 } from "react";
 
 // src/utils/pageGeometry/Triangle.ts
@@ -28024,7 +28502,7 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback28, useEffect as useEffect30, useRef as useRef29 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect30, useRef as useRef29 } from "react";
 function useMounted() {
   let mountedRef = useRef29(true);
   useEffect30(() => {
@@ -28033,7 +28511,7 @@ function useMounted() {
       mountedRef.current = false;
     };
   }, []);
-  const isMounted = useCallback28(() => mountedRef.current, []);
+  const isMounted = useCallback29(() => mountedRef.current, []);
   return isMounted;
 }
 
@@ -28126,7 +28604,7 @@ function useSubmenus({
   onItemActivate
 }) {
   const { getState } = useMenuContext();
-  const [{ onItemEnter, onItemLeave }] = useState22(() => {
+  const [{ onItemEnter, onItemLeave }] = useState23(() => {
     return new MenuTriangleContext({
       parentMenuId: getState().parentMenuId,
       onItemActivate: (itemKey) => {
@@ -28157,8 +28635,8 @@ function useSubmenus({
     }).getHandlers();
   });
   return {
-    onItemEnter: useCallback29(onItemEnter, []),
-    onItemLeave: useCallback29(onItemLeave, [])
+    onItemEnter: useCallback30(onItemEnter, []),
+    onItemLeave: useCallback30(onItemLeave, [])
   };
 }
 function MenuComponent(props) {
@@ -28183,14 +28661,14 @@ function MenuComponent(props) {
     componentActions,
     getState
   } = useMenuContext();
-  const setKeyboardActiveItemKey = useCallback29((key) => {
+  const setKeyboardActiveItemKey = useCallback30((key) => {
     componentActions.keyboardActiveItemKey = key;
   }, []);
-  const setActiveItemKey = useCallback29((key) => {
+  const setActiveItemKey = useCallback30((key) => {
     componentActions.activeItemKey = key;
   }, []);
   const isMounted = useMounted();
-  const [submenuApi, setSubmenuApi] = useState22(null);
+  const [submenuApi, setSubmenuApi] = useState23(null);
   let renderedChildren = null;
   useLayoutEffect16(() => {
     const { runtimeItems: runtimeItems2 } = getState();
@@ -28402,7 +28880,7 @@ function MenuComponent(props) {
   function onMenuBlur() {
     componentActions.focused = false;
   }
-  const onMenuFocus = useCallback29(function() {
+  const onMenuFocus = useCallback30(function() {
     componentActions.focused = true;
     setTimeout(() => {
       if (shouldSelectFirstItemOnFocus.current && domRef.current && domRef.current === document.activeElement && getState().keyboardActiveItemKey == null) {
@@ -28413,11 +28891,11 @@ function MenuComponent(props) {
     });
   }, []);
   const shouldSelectFirstItemOnFocus = useRef30(true);
-  const hideAll = useCallback29(() => {
+  const hideAll = useCallback30(() => {
     const state = getState();
     state.onHideIntent?.(state);
   }, [getState]);
-  const [api] = useState22(() => {
+  const [api] = useState23(() => {
     const result2 = {
       hideMenu: hideAll,
       focus: () => {
@@ -28436,7 +28914,7 @@ function MenuComponent(props) {
     };
     return result2;
   });
-  const refCallback = useCallback29((node) => {
+  const refCallback = useCallback30((node) => {
     if (node) {
       domRef.current = node;
       onShow?.(getState(), api);
@@ -28942,7 +29420,7 @@ function useColumnMenu() {
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
 import * as React64 from "react";
-import { useCallback as useCallback30 } from "react";
+import { useCallback as useCallback31 } from "react";
 var style = {
   width: 0,
   height: 0,
@@ -28962,7 +29440,7 @@ function FocusDetect() {
   } = useInfiniteTableStableContext();
   const { getDataSourceState, getDataSourceMasterContext } = useDataSourceStableContext();
   const { focusDetectDOMRef } = getState();
-  const onFocus = useCallback30(async () => {
+  const onFocus = useCallback31(async () => {
     const context = {
       getDataSourceState,
       getDataSourceMasterContext,
@@ -29673,14 +30151,14 @@ import { useRef as useRef31 } from "react";
 import * as React70 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-import { useCallback as useCallback31, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect35 } from "react";
 function useGridScroll(onScroll, deps) {
   const { brain } = useInfiniteTableSelector((ctx) => {
     return {
       brain: ctx.state.brain
     };
   });
-  const memoizedOnScroll = useCallback31(onScroll, deps);
+  const memoizedOnScroll = useCallback32(onScroll, deps);
   useEffect35(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
@@ -30267,7 +30745,7 @@ function useInfinitePortalContainer() {
 
 // src/components/InfiniteTable/components/GroupingToolbar/index.tsx
 import * as React72 from "react";
-import { useCallback as useCallback32 } from "react";
+import { useCallback as useCallback33 } from "react";
 
 // src/components/InfiniteTable/components/GroupingToolbar/index.css.ts
 var GroupingToolbarItemClearCls = "hs68h8j _16lm1iwk _16lm1iwx _16lm1iw2n";
@@ -30453,7 +30931,7 @@ function GroupingToolbar(props) {
     });
     dataSourceApi.setGroupBy(newGroupBy);
   };
-  const shouldAcceptDrop = useCallback32(
+  const shouldAcceptDrop = useCallback33(
     (event) => {
       const { computedColumnsMap: computedColumnsMap2 } = getComputed();
       const columnId = event.dragItem.id;
@@ -30477,6 +30955,7 @@ function GroupingToolbar(props) {
       dragListId: GROUPING_TOOLBAR_DRAG_LIST_ID,
       acceptDropsFrom: ["header", GROUPING_TOOLBAR_DRAG_LIST_ID],
       onDrop,
+      dragStrategy: "inline",
       onAcceptDrop,
       shouldAcceptDrop
     },
@@ -30515,7 +30994,7 @@ import * as React77 from "react";
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo19 } from "react";
-import { useCallback as useCallback33, useEffect as useEffect38, useRef as useRef34 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect38, useRef as useRef34 } from "react";
 import * as React74 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -30912,7 +31391,7 @@ function useCellRendering(param) {
       cellSelection
     };
   }, [isNodeReadOnly2, selectionMode, cellSelection]);
-  const renderCell = useCallback33(
+  const renderCell = useCallback34(
     (params) => {
       const {
         rowIndex,
@@ -32353,11 +32832,16 @@ var components = {
   NumberFilterEditor
 };
 export {
+  AutoScroller,
   CellSelectionState,
+  DRAG_ITEM_ATTRIBUTE,
   DataClient,
   DataSource,
   DataSourceActionType,
   DeepMap,
+  DragDropProvider,
+  DragInteractionTarget,
+  DragList,
   FixedSizeSet,
   FlashingColumnCell,
   GroupRowsState,
@@ -32377,9 +32861,11 @@ export {
   WeakFixedSizeSet,
   alignNode,
   components,
+  createDefaultProxy,
   createFlashingColumnCellComponent,
   debounce,
   debug,
+  defaultDragProxyMove,
   defaultFilterTypes2 as defaultFilterTypes,
   eventMatchesKeyboardShortcut,
   filterDataArray,
@@ -32397,6 +32883,8 @@ export {
   useDataSourceInternal,
   useDataSourceSelector,
   useDataSourceState,
+  useDragDropProvider,
+  useDragListContext,
   useEffectWhen,
   useEffectWhenSameDeps,
   useEffectWithChanges,