@extend-ai/react-xlsx 0.9.1 → 0.9.2

package/dist/index.js

@@ -21573,8 +21573,10 @@ function XlsxGrid({
   const resizeFrameRef = React4.useRef(null);
   const pendingResizePreviewRef = React4.useRef(null);
   const selectionDragRef = React4.useRef(null);
+  const pendingSelectionDragRef = React4.useRef(null);
   const fillDragRef = React4.useRef(null);
   const selectionDragCleanupRef = React4.useRef(null);
+  const pendingSelectionDragCleanupRef = React4.useRef(null);
   const fillDragCleanupRef = React4.useRef(null);
   const cachedScrollerRectRef = React4.useRef(null);
   const imageInteractionCleanupRef = React4.useRef(null);
@@ -22508,7 +22510,7 @@ function XlsxGrid({
   }, [displayedSelection]);
   React4.useEffect(() => {
     const previewRange = selectionPreviewRangeRef.current;
-    if (!previewRange || selectionDragRef.current || fillDragRef.current) {
+    if (!previewRange || pendingSelectionDragRef.current || selectionDragRef.current || fillDragRef.current) {
       return;
     }
     if (normalizedSelection && rangesEqual(previewRange, normalizedSelection)) {
@@ -23115,14 +23117,17 @@ function XlsxGrid({
     }
   }, []);
   React4.useEffect(() => {
+    pendingSelectionDragCleanupRef.current?.();
     selectionDragCleanupRef.current?.();
     fillDragCleanupRef.current?.();
     chartInteractionCleanupRef.current?.();
     imageInteractionCleanupRef.current?.();
+    pendingSelectionDragCleanupRef.current = null;
     selectionDragCleanupRef.current = null;
     fillDragCleanupRef.current = null;
     chartInteractionCleanupRef.current = null;
     imageInteractionCleanupRef.current = null;
+    pendingSelectionDragRef.current = null;
     selectionDragRef.current = null;
     fillDragRef.current = null;
     chartInteractionRef.current = null;
@@ -24313,6 +24318,101 @@ function XlsxGrid({
     }
     return normalizeRange2({ start: dragState.anchor, end: cell });
   }
+  function updateSelectionDragPreview(clientX, clientY) {
+    const dragState = selectionDragRef.current;
+    if (!dragState) {
+      return;
+    }
+    const nextCell = resolveDraggedSelectionCell(dragState, clientX, clientY);
+    if (!nextCell) {
+      return;
+    }
+    const nextRange = buildDraggedSelectionRange(dragState, nextCell);
+    if (!nextRange || rangesEqual(nextRange, dragState.previewRange)) {
+      return;
+    }
+    dragState.previewRange = nextRange;
+    selectionPreviewRangeRef.current = nextRange;
+    displayedSelectionRef.current = nextRange;
+    applyPreviewOverlay(nextRange);
+  }
+  function clearPendingSelectionDrag() {
+    const cleanup = pendingSelectionDragCleanupRef.current;
+    pendingSelectionDragCleanupRef.current = null;
+    pendingSelectionDragRef.current = null;
+    cleanup?.();
+  }
+  function finishPendingSelectionDrag() {
+    const pendingState = pendingSelectionDragRef.current;
+    clearPendingSelectionDrag();
+    if (pendingState && !pendingState.committedOnPointerDown) {
+      commitSelectionRange(pendingState.previewRange);
+    }
+  }
+  function promotePendingSelectionDrag(clientX, clientY) {
+    const pendingState = pendingSelectionDragRef.current;
+    if (!pendingState) {
+      return;
+    }
+    clearPendingSelectionDrag();
+    cachedScrollerRectRef.current = scrollRef.current?.getBoundingClientRect() ?? null;
+    pendingState.didDrag = true;
+    selectionDragRef.current = pendingState;
+    selectionPreviewRangeRef.current = pendingState.previewRange;
+    displayedSelectionRef.current = pendingState.previewRange;
+    setInteractionMode("select");
+    document.body.style.userSelect = "none";
+    installSelectionDragListeners(pendingState.pointerId);
+    updateSelectionDragPreview(clientX, clientY);
+  }
+  function installPendingSelectionDragListeners(pointerId, target) {
+    const existingCleanup = pendingSelectionDragCleanupRef.current;
+    pendingSelectionDragCleanupRef.current = null;
+    existingCleanup?.();
+    const pointerTarget = target;
+    try {
+      pointerTarget.setPointerCapture?.(pointerId);
+    } catch {
+    }
+    const handlePointerMove = (event) => {
+      const pointerEvent = event;
+      if (pointerEvent.pointerId !== pointerId) {
+        return;
+      }
+      const pendingState = pendingSelectionDragRef.current;
+      if (!pendingState) {
+        return;
+      }
+      const deltaX = Math.abs(pointerEvent.clientX - pendingState.startClientX);
+      const deltaY = Math.abs(pointerEvent.clientY - pendingState.startClientY);
+      if (deltaX < SELECTION_DRAG_THRESHOLD_PX && deltaY < SELECTION_DRAG_THRESHOLD_PX) {
+        return;
+      }
+      event.preventDefault();
+      promotePendingSelectionDrag(pointerEvent.clientX, pointerEvent.clientY);
+    };
+    const handlePointerEnd = (event) => {
+      const pointerEvent = event;
+      if (pointerEvent.pointerId !== pointerId) {
+        return;
+      }
+      finishPendingSelectionDrag();
+    };
+    target.addEventListener("pointermove", handlePointerMove);
+    target.addEventListener("pointerup", handlePointerEnd);
+    target.addEventListener("pointercancel", handlePointerEnd);
+    pendingSelectionDragCleanupRef.current = () => {
+      target.removeEventListener("pointermove", handlePointerMove);
+      target.removeEventListener("pointerup", handlePointerEnd);
+      target.removeEventListener("pointercancel", handlePointerEnd);
+      try {
+        if (pointerTarget.hasPointerCapture?.(pointerId)) {
+          pointerTarget.releasePointerCapture?.(pointerId);
+        }
+      } catch {
+      }
+    };
+  }
   function installSelectionDragListeners(pointerId) {
     selectionDragCleanupRef.current?.();
     let pendingClientPoint = null;
@@ -24336,18 +24436,7 @@ function XlsxGrid({
         }
         dragState.didDrag = true;
       }
-      const nextCell = resolveDraggedSelectionCell(dragState, pendingPoint.x, pendingPoint.y);
-      if (!nextCell) {
-        return;
-      }
-      const nextRange = buildDraggedSelectionRange(dragState, nextCell);
-      if (!nextRange || rangesEqual(nextRange, dragState.previewRange)) {
-        return;
-      }
-      dragState.previewRange = nextRange;
-      selectionPreviewRangeRef.current = nextRange;
-      displayedSelectionRef.current = nextRange;
-      applyPreviewOverlay(nextRange);
+      updateSelectionDragPreview(pendingPoint.x, pendingPoint.y);
     };
     const handlePointerMove = (event) => {
       if (event.pointerId !== pointerId) {
@@ -24512,6 +24601,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       anchor,
       "cell",
@@ -24559,6 +24649,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
@@ -24589,6 +24680,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
@@ -24870,6 +24962,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       anchor,
       "cell",
@@ -24947,6 +25040,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
@@ -25004,6 +25098,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
@@ -27246,9 +27341,10 @@ function XlsxGrid({
     setGlobalCursor("row-resize");
     document.body.style.userSelect = "none";
   }
-  function startCellSelection(pointerId, anchor, axis, originCell, pointerOrigin, originOverlayRect, committedOnPointerDown, initialRange, startClientX, startClientY) {
-    cachedScrollerRectRef.current = scrollRef.current?.getBoundingClientRect() ?? null;
-    selectionDragRef.current = {
+  function startCellSelection(target, pointerId, anchor, axis, originCell, pointerOrigin, originOverlayRect, committedOnPointerDown, initialRange, startClientX, startClientY) {
+    clearPendingSelectionDrag();
+    const previewRange = normalizeRange2(initialRange);
+    pendingSelectionDragRef.current = {
       anchor,
       axis,
       contentScaleX: pointerOrigin.contentScaleX,
@@ -27260,16 +27356,14 @@ function XlsxGrid({
       originContentX: pointerOrigin.originContentX,
       originContentY: pointerOrigin.originContentY,
       pointerId,
-      previewRange: normalizeRange2(initialRange),
+      previewRange,
       startClientX,
       startClientY
     };
-    selectionPreviewRangeRef.current = normalizeRange2(initialRange);
-    displayedSelectionRef.current = selectionPreviewRangeRef.current;
-    applyPreviewOverlay(selectionPreviewRangeRef.current);
-    setInteractionMode("select");
-    document.body.style.userSelect = "none";
-    installSelectionDragListeners(pointerId);
+    selectionPreviewRangeRef.current = previewRange;
+    displayedSelectionRef.current = previewRange;
+    applyPreviewOverlay(previewRange);
+    installPendingSelectionDragListeners(pointerId, target);
   }
   function resolveFillRange(sourceRange, cell) {
     const normalizedSource = normalizeRange2(sourceRange);