@extend-ai/react-xlsx 0.9.0 → 0.9.2

package/dist/index.cjs

@@ -21579,6 +21579,9 @@ function XlsxGrid({
   const selectionCommitFrameRef = React4.useRef(null);
   const selectionRef = React4.useRef(null);
   const editingCellRef = React4.useRef(null);
+  const commitEditingRef = React4.useRef(() => {
+  });
+  const editingInputRef = React4.useRef(null);
   const readOnlyRef = React4.useRef(readOnly);
   const committedZoomScaleRef = React4.useRef(zoomScale);
   const gestureZoomScaleRef = React4.useRef(zoomScale);
@@ -21602,8 +21605,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);
@@ -22456,6 +22461,18 @@ function XlsxGrid({
   React4.useEffect(() => {
     editingCellRef.current = editingCell;
   }, [editingCell]);
+  React4.useLayoutEffect(() => {
+    if (!editingCell) {
+      return;
+    }
+    const input = editingInputRef.current;
+    if (!input) {
+      return;
+    }
+    input.focus();
+    const caret = input.value.length;
+    input.setSelectionRange(caret, caret);
+  }, [editingCell]);
   React4.useEffect(() => {
     readOnlyRef.current = readOnly;
   }, [readOnly]);
@@ -22525,7 +22542,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)) {
@@ -23132,14 +23149,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;
@@ -23215,6 +23235,9 @@ function XlsxGrid({
     setEditingValue("");
     focusGrid();
   }, [focusGrid]);
+  React4.useEffect(() => {
+    commitEditingRef.current = commitEditing;
+  }, [commitEditing]);
   const [, startBatchTransition] = React4.useTransition();
   const [, startSelectionTransition] = React4.useTransition();
   const [asyncViewportRowBatch, setAsyncViewportRowBatch] = React4.useState(null);
@@ -24327,6 +24350,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;
@@ -24350,18 +24468,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) {
@@ -24517,12 +24624,16 @@ function XlsxGrid({
     const initialRange = normalizeRange2({ start: anchor, end: targetCell });
     const isActive = isSameCell(activeCellRef.current, targetCell);
     const committedOnPointerDown = !isActive || !editingCellRef.current;
+    if (editingCellRef.current && !isActive) {
+      commitEditingRef.current();
+    }
     const pointerOrigin = targetCell.row === cell.row && targetCell.col === cell.col ? resolveCellPointerOrigin(cell, event.currentTarget.getBoundingClientRect(), event.clientX, event.clientY) : resolveCellPointerOriginFromClient(targetCell, event.clientX, event.clientY);
     const originOverlayRect = targetCell.row === cell.row && targetCell.col === cell.col ? resolveMountedCellOverlayRect(event.currentTarget) : resolveOverlayRect(initialRange);
     if (!pointerOrigin) {
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       anchor,
       "cell",
@@ -24570,6 +24681,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
@@ -24600,6 +24712,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
@@ -24872,12 +24985,16 @@ function XlsxGrid({
     const initialRange = normalizeRange2({ start: anchor, end: cell });
     const isActive = isSameCell(activeCellRef.current, cell);
     const committedOnPointerDown = !isActive || !editingCellRef.current;
+    if (editingCellRef.current && !isActive) {
+      commitEditingRef.current();
+    }
     const rowIndex = rowIndexByActual.get(cell.row);
     const colIndex = colIndexByActual.get(cell.col);
     if (rowIndex === void 0 || colIndex === void 0) {
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       anchor,
       "cell",
@@ -24955,6 +25072,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
@@ -25012,6 +25130,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
@@ -27254,9 +27373,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,
@@ -27268,16 +27388,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);
@@ -27833,52 +27951,62 @@ function XlsxGrid({
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: cornerHeaderCanvasRef, style: canvasCornerHeaderStyle })
                   ] }),
-                  editingCell && editingOverlayRect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      style: {
-                        left: editingOverlayRect.left,
-                        position: "absolute",
-                        top: editingOverlayRect.top,
-                        width: editingOverlayRect.width,
-                        height: editingOverlayRect.height,
-                        zIndex: 28
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "input",
-                        {
-                          autoFocus: true,
-                          onBlur: commitEditing,
-                          onChange: (event) => setEditingValue(event.target.value),
-                          onKeyDown: (event) => {
-                            event.stopPropagation();
-                            if (event.key === "Enter") {
-                              event.preventDefault();
-                              commitEditing();
-                              return;
-                            }
-                            if (event.key === "Escape") {
-                              event.preventDefault();
-                              cancelEditing();
-                            }
-                          },
-                          style: {
-                            backgroundColor: resolveSheetSurface(activeSheet, palette),
-                            border: 0,
-                            boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
-                            color: "#000000",
-                            font: resolveCanvasFont(getCellData(editingCell.row, editingCell.col).style, 12 * zoomFactor),
-                            height: "100%",
-                            margin: 0,
-                            outline: "none",
-                            padding: scaleCssLengthExpression(DEFAULT_CELL_PADDING, zoomFactor),
-                            width: "100%"
-                          },
-                          value: editingValue
-                        }
-                      )
-                    }
-                  ) : null,
+                  editingCell && editingOverlayRect ? (() => {
+                    const editingCellStyle = getCellData(editingCell.row, editingCell.col).style;
+                    const editingBackground = typeof editingCellStyle.backgroundColor === "string" ? editingCellStyle.backgroundColor : resolveSheetSurface(activeSheet, palette);
+                    const editingColor = typeof editingCellStyle.color === "string" ? editingCellStyle.color : resolveReadableTextColor(null, editingBackground, palette);
+                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "div",
+                      {
+                        style: {
+                          left: editingOverlayRect.left,
+                          position: "absolute",
+                          top: editingOverlayRect.top,
+                          width: editingOverlayRect.width,
+                          height: editingOverlayRect.height,
+                          zIndex: 28
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "input",
+                          {
+                            ref: editingInputRef,
+                            autoFocus: true,
+                            onBlur: commitEditing,
+                            onChange: (event) => setEditingValue(event.target.value),
+                            onKeyDown: (event) => {
+                              event.stopPropagation();
+                              if (event.key === "Enter") {
+                                event.preventDefault();
+                                commitEditing();
+                                return;
+                              }
+                              if (event.key === "Escape") {
+                                event.preventDefault();
+                                cancelEditing();
+                              }
+                            },
+                            style: {
+                              backgroundColor: editingBackground,
+                              border: 0,
+                              boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
+                              boxSizing: "border-box",
+                              color: editingColor,
+                              display: "block",
+                              font: resolveCanvasFont(editingCellStyle, 12 * zoomFactor),
+                              height: "100%",
+                              margin: 0,
+                              minHeight: 0,
+                              outline: "none",
+                              overflow: "hidden",
+                              padding: scaleCssLengthExpression(DEFAULT_CELL_PADDING, zoomFactor),
+                              width: "100%"
+                            },
+                            value: editingValue
+                          }
+                        )
+                      }
+                    );
+                  })() : null,
                   activeCellAdornment && activeCellAdornmentRect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "div",
                     {