@infinite-table/infinite-react 8.0.1 → 8.0.3

package/index.dev.js

@@ -68,6 +68,7 @@ var require_binary_search = __commonJS({
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  AutoScroller: () => AutoScroller,
   CellSelectionState: () => CellSelectionState,
   DRAG_ITEM_ATTRIBUTE: () => DRAG_ITEM_ATTRIBUTE,
   DataClient: () => DataClient,
@@ -96,9 +97,11 @@ __export(index_exports, {
   WeakFixedSizeSet: () => WeakFixedSizeSet,
   alignNode: () => alignNode,
   components: () => components,
+  createDefaultProxy: () => createDefaultProxy,
   createFlashingColumnCellComponent: () => createFlashingColumnCellComponent,
   debounce: () => debounce,
   debug: () => debug,
+  defaultDragProxyMove: () => defaultDragProxyMove,
   defaultFilterTypes: () => defaultFilterTypes2,
   eventMatchesKeyboardShortcut: () => eventMatchesKeyboardShortcut,
   filterDataArray: () => filterDataArray,
@@ -2123,7 +2126,7 @@ function InfiniteTableFooter(props) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React51 = __toESM(require("react"));
 var import_react36 = require("react");
-var import_react_dom = require("react-dom");
+var import_react_dom2 = require("react-dom");
 
 // src/utils/keyMirror.ts
 function keyMirror(obj) {
@@ -3926,6 +3929,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_react15 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
@@ -5434,7 +5438,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 };
@@ -5463,12 +5467,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);
   }
@@ -5619,11 +5635,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 {
@@ -5942,13 +5960,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(
@@ -6009,27 +6020,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
+            });
+          }
+          (0, import_react_dom.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(
@@ -6038,30 +6070,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);
@@ -8253,6 +8263,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);
   }
@@ -8308,6 +8332,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,
@@ -8333,8 +8568,15 @@ var defaultUpdatePosition = (options) => {
 var getDraggableItemId = (node) => {
   return `${node.getAttribute(DRAG_ITEM_ATTRIBUTE)}`;
 };
-function getDraggableItems(domRef) {
+function getDraggableItemNodes(domRef, dragListId) {
   const dragItems = domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? [];
+  const result = Array.from(dragItems).filter(
+    (item) => item.getAttribute(DRAG_ITEM_LIST_ATTRIBUTE) === `${dragListId}`
+  );
+  return result;
+}
+function getDraggableItems(domRef, dragListId) {
+  const dragItems = getDraggableItemNodes(domRef, dragListId);
   if (!dragItems || dragItems.length === 0) {
   }
   const draggableItems = Array.from(dragItems).map((item) => {
@@ -8349,15 +8591,34 @@ function getDraggableItems(domRef) {
 }
 function getInteractionTargetData(params) {
   const { domRef, orientation, dragListId } = params;
-  const listRectangle = Rectangle.from(domRef.current.getBoundingClientRect());
+  const draggableItems = getDraggableItems(domRef, dragListId);
+  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;
 }
@@ -8415,8 +8676,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] = (0, import_react23.useState)(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);
@@ -8457,18 +8759,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,
@@ -8506,6 +8819,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) {
@@ -8535,10 +8854,58 @@ 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;
@@ -8547,13 +8914,11 @@ var DragList = (props) => {
   const getDragItems = (0, import_react23.useCallback)(() => {
     let dragItems = dragItemsRef.current;
     if (!dragItems || dragItems.length === 0) {
-      dragItems = Array.from(
-        domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? []
-      );
+      dragItems = getDraggableItemNodes(domRef, props.dragListId);
       dragItemsRef.current = dragItems;
     }
     return dragItems;
-  }, []);
+  }, [props.dragListId]);
   const onDragItemPointerDown = (0, import_react23.useCallback)(
     (e) => {
       const target = e.currentTarget;
@@ -8574,28 +8939,70 @@ var DragList = (props) => {
       }
       dragItemId2 = `${dragItemId2}`;
       let dragOperation = null;
-      const dragItems = Array.from(
-        domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? []
-      );
+      const dragItems = getDraggableItemNodes(domRef, props.dragListId);
       dragItemsRef.current = dragItems;
       const interactionTarget2 = createInteractionTarget({
         domRef,
         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(
             {
@@ -8605,15 +9012,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;
         }
@@ -8627,7 +9103,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;
@@ -8662,10 +9142,14 @@ 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";
+var DRAG_ITEM_LIST_ATTRIBUTE = "data-drag-item-list-id";
 var DRAG_ITEM_SELECTOR = `[${DRAG_ITEM_ATTRIBUTE}]`;
 var DragItemContext = React33.createContext({
   dragItemId: "",
@@ -8684,21 +9168,30 @@ var DraggableItem = (props) => {
     dragSourceListId,
     dropTargetListId
   } = useDragListContext();
-  const active = dragSourceListId === dragListId && dragItemId === `${props.id}`;
+  const dragItemListId = props.dragListId ?? dragListId;
+  const active = dragSourceListId === dragItemListId && dragItemId === `${props.id}`;
   const contextValue = React33.useMemo(
     () => ({
       dragItemId: props.id,
       active,
-      dragListId,
+      dragListId: dragItemListId,
       draggingInProgress,
       dragSourceListId,
       dropTargetListId
     }),
-    [props.id, active, draggingInProgress, dragSourceListId, dropTargetListId]
+    [
+      props.id,
+      active,
+      dragItemListId,
+      draggingInProgress,
+      dragSourceListId,
+      dropTargetListId
+    ]
   );
   const domProps = {
     // @ts-ignore
-    "data-drag-item-id": `${props.id}`,
+    [DRAG_ITEM_ATTRIBUTE]: `${props.id}`,
+    [DRAG_ITEM_LIST_ATTRIBUTE]: dragItemListId,
     onPointerDown: onDragItemPointerDown,
     className: join(
       "DraggableItem",
@@ -13366,6 +13859,7 @@ function InfiniteTableInternalHeaderFn(props) {
     {
       orientation: "horizontal",
       dragListId: "header",
+      dragStrategy: "inline",
       onDrop: emptyFn3,
       updatePosition: emptyFn3
     },
@@ -13617,7 +14111,8 @@ var InfiniteHeaderCellDataAttributes = keyMirror({
   "data-column-id": "",
   "data-sort": "",
   "data-sort-index": "",
-  [DRAG_ITEM_ATTRIBUTE]: ""
+  [DRAG_ITEM_ATTRIBUTE]: "",
+  [DRAG_ITEM_LIST_ATTRIBUTE]: ""
 });
 function InfiniteTableHeaderCellFn(props) {
   const column = props.column;
@@ -13932,6 +14427,7 @@ function InfiniteTableHeaderCellFn(props) {
     "data-field": `${column.field || ""}`,
     "data-column-id": column.id,
     [DRAG_ITEM_ATTRIBUTE]: column.id,
+    [DRAG_ITEM_LIST_ATTRIBUTE]: "header",
     "data-header-align": align2,
     "data-name": "HeaderCell",
     "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
@@ -13985,7 +14481,7 @@ function InfiniteTableHeaderCellFn(props) {
       ),
       currentHeader
     );
-    draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
+    draggingProxy = (0, import_react_dom2.createPortal)(draggingProxy, portalDOMRef.current);
   }
   return /* @__PURE__ */ React51.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React51.createElement(
     InfiniteTableCell,
@@ -26438,7 +26934,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "8.0.1"
+      version: "8.0.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -27303,7 +27799,7 @@ var import_react59 = require("react");
 // src/components/hooks/useOverlay/index.tsx
 var React57 = __toESM(require("react"));
 var import_react55 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 
 // src/utils/pageGeometry/alignment/index.ts
 function isHTMLElement(v) {
@@ -27555,7 +28051,7 @@ function useOverlayPortal(content, portalContainer) {
     }
     getContainer();
   }, [portalContainer]);
-  return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
+  return portalContainer ? container ? (0, import_react_dom3.createPortal)(content, container) : (
     // we're probably still fetching the container
     /* @__PURE__ */ React57.createElement(React57.Fragment, null)
   ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React57.createElement(DefaultOverlayPortal, null, content);
@@ -30525,6 +31021,7 @@ function GroupingToolbar(props) {
       dragListId: GROUPING_TOOLBAR_DRAG_LIST_ID,
       acceptDropsFrom: ["header", GROUPING_TOOLBAR_DRAG_LIST_ID],
       onDrop,
+      dragStrategy: "inline",
       onAcceptDrop,
       shouldAcceptDrop
     },
@@ -32270,7 +32767,7 @@ var FlashingColumnCell = createFlashingColumnCellComponent();
 // src/components/HeadlessTable/MatrixDebugger.tsx
 var React82 = __toESM(require("react"));
 var import_react77 = require("react");
-var import_react_dom3 = require("react-dom");
+var import_react_dom4 = require("react-dom");
 function INTERNAL_MatrixDebugger(props) {
   const [getState, setGetState] = React82.useState(null);
   (0, import_react77.useEffect)(() => {
@@ -32310,7 +32807,7 @@ function MatrixDebuggerUI() {
   const columnsIndexes = cellManager.getColumnsWithCells();
   const domRef = (0, import_react77.useRef)(null);
   const displayTimeoutRef = (0, import_react77.useRef)(null);
-  return /* @__PURE__ */ React82.createElement("div", { style: { overflow: "auto" } }, (0, import_react_dom3.createPortal)(
+  return /* @__PURE__ */ React82.createElement("div", { style: { overflow: "auto" } }, (0, import_react_dom4.createPortal)(
     /* @__PURE__ */ React82.createElement(
       "div",
       {
@@ -32402,6 +32899,7 @@ var components = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AutoScroller,
   CellSelectionState,
   DRAG_ITEM_ATTRIBUTE,
   DataClient,
@@ -32430,9 +32928,11 @@ var components = {
   WeakFixedSizeSet,
   alignNode,
   components,
+  createDefaultProxy,
   createFlashingColumnCellComponent,
   debounce,
   debug,
+  defaultDragProxyMove,
   defaultFilterTypes,
   eventMatchesKeyboardShortcut,
   filterDataArray,