@extend-ai/react-xlsx 0.9.1 → 0.10.0

package/dist/index.cjs

@@ -21465,6 +21465,7 @@ function XlsxGrid({
   renderImage,
   renderImageSelection,
   renderTableHeaderMenu,
+  renderScroller,
   enableGestureZoom = true,
   experimentalCanvas = true,
   selectionColor,
@@ -21605,8 +21606,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);
@@ -22540,7 +22543,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)) {
@@ -23147,14 +23150,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;
@@ -24345,6 +24351,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;
@@ -24368,18 +24469,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) {
@@ -24544,6 +24634,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       anchor,
       "cell",
@@ -24591,6 +24682,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
@@ -24621,6 +24713,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
@@ -24902,6 +24995,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       anchor,
       "cell",
@@ -24979,6 +25073,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
@@ -25036,6 +25131,7 @@ function XlsxGrid({
       return;
     }
     startCellSelection(
+      event.currentTarget,
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
@@ -27278,9 +27374,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,
@@ -27292,16 +27389,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);
@@ -27520,700 +27615,698 @@ function XlsxGrid({
     }
     selectCell({ row: nextRow, col: nextCol }, extend ? { extend: true } : void 0);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { backgroundColor: palette.canvas, display: "flex", flex: 1, minHeight: 0, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll: handleScrollerScroll,
-      onCopy: (event) => {
-        if (editingCell) {
-          return;
-        }
-        const clipboard = event.clipboardData;
-        const clipboardData = getClipboardData();
-        if (!clipboardData) {
-          return;
-        }
-        event.preventDefault();
-        if (clipboard) {
-          clipboard.setData("text/plain", clipboardData.text);
-          clipboard.setData("text/html", clipboardData.html);
-          clipboard.setData(INTERNAL_CLIPBOARD_MIME2, clipboardData.structured);
-          return;
-        }
-        void copySelectionToClipboard();
-      },
-      onKeyDown: (event) => {
-        if (editingCell) {
+  const scrollerViewportProps = {
+    key: activeTabIndex,
+    ref: scrollRef,
+    onScroll: handleScrollerScroll,
+    onCopy: (event) => {
+      if (editingCell) {
+        return;
+      }
+      const clipboard = event.clipboardData;
+      const clipboardData = getClipboardData();
+      if (!clipboardData) {
+        return;
+      }
+      event.preventDefault();
+      if (clipboard) {
+        clipboard.setData("text/plain", clipboardData.text);
+        clipboard.setData("text/html", clipboardData.html);
+        clipboard.setData(INTERNAL_CLIPBOARD_MIME2, clipboardData.structured);
+        return;
+      }
+      void copySelectionToClipboard();
+    },
+    onKeyDown: (event) => {
+      if (editingCell) {
+        return;
+      }
+      if (!readOnly && (event.metaKey || event.ctrlKey) && !event.altKey) {
+        const normalizedKey = event.key.toLowerCase();
+        if (normalizedKey === "z" && event.shiftKey) {
+          event.preventDefault();
+          redo();
           return;
         }
-        if (!readOnly && (event.metaKey || event.ctrlKey) && !event.altKey) {
-          const normalizedKey = event.key.toLowerCase();
-          if (normalizedKey === "z" && event.shiftKey) {
-            event.preventDefault();
-            redo();
-            return;
-          }
-          if (normalizedKey === "z") {
-            event.preventDefault();
-            undo();
-            return;
-          }
-          if (normalizedKey === "y") {
-            event.preventDefault();
-            redo();
-            return;
-          }
-        }
-        const currentCell = resolveCurrentCell();
-        if (!currentCell) {
+        if (normalizedKey === "z") {
+          event.preventDefault();
+          undo();
           return;
         }
-        const currentRowIndex = rowIndexByActual.get(currentCell.row) ?? 0;
-        const currentColIndex = colIndexByActual.get(currentCell.col) ?? 0;
-        if (!readOnly && isPrintableKey(event)) {
+        if (normalizedKey === "y") {
           event.preventDefault();
-          startEditing(currentCell, event.key);
+          redo();
           return;
         }
-        switch (event.key) {
-          case "ArrowDown":
-            event.preventDefault();
-            moveSelection(Math.min(currentRowIndex + 1, visibleRows.length - 1), currentColIndex, event.shiftKey);
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            moveSelection(Math.max(currentRowIndex - 1, 0), currentColIndex, event.shiftKey);
-            break;
-          case "ArrowLeft":
-            event.preventDefault();
-            moveSelection(currentRowIndex, Math.max(currentColIndex - 1, 0), event.shiftKey);
+      }
+      const currentCell = resolveCurrentCell();
+      if (!currentCell) {
+        return;
+      }
+      const currentRowIndex = rowIndexByActual.get(currentCell.row) ?? 0;
+      const currentColIndex = colIndexByActual.get(currentCell.col) ?? 0;
+      if (!readOnly && isPrintableKey(event)) {
+        event.preventDefault();
+        startEditing(currentCell, event.key);
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          moveSelection(Math.min(currentRowIndex + 1, visibleRows.length - 1), currentColIndex, event.shiftKey);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveSelection(Math.max(currentRowIndex - 1, 0), currentColIndex, event.shiftKey);
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          moveSelection(currentRowIndex, Math.max(currentColIndex - 1, 0), event.shiftKey);
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          moveSelection(currentRowIndex, Math.min(currentColIndex + 1, visibleCols.length - 1), event.shiftKey);
+          break;
+        case "Tab":
+          event.preventDefault();
+          moveSelection(
+            currentRowIndex,
+            event.shiftKey ? Math.max(currentColIndex - 1, 0) : Math.min(currentColIndex + 1, visibleCols.length - 1),
+            false
+          );
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (event.metaKey || event.ctrlKey || event.altKey) {
             break;
-          case "ArrowRight":
-            event.preventDefault();
-            moveSelection(currentRowIndex, Math.min(currentColIndex + 1, visibleCols.length - 1), event.shiftKey);
+          }
+          if (event.shiftKey) {
+            moveSelection(Math.max(currentRowIndex - 1, 0), currentColIndex, false);
             break;
-          case "Tab":
+          }
+          moveSelection(Math.min(currentRowIndex + 1, visibleRows.length - 1), currentColIndex, false);
+          break;
+        case "Backspace":
+        case "Delete":
+          if (!readOnly) {
             event.preventDefault();
-            moveSelection(
-              currentRowIndex,
-              event.shiftKey ? Math.max(currentColIndex - 1, 0) : Math.min(currentColIndex + 1, visibleCols.length - 1),
-              false
-            );
-            break;
-          case "Enter":
+            clearSelectedCells();
+          }
+          break;
+        case "F2":
+          if (!readOnly) {
             event.preventDefault();
-            if (event.metaKey || event.ctrlKey || event.altKey) {
-              break;
-            }
-            if (event.shiftKey) {
-              moveSelection(Math.max(currentRowIndex - 1, 0), currentColIndex, false);
-              break;
-            }
-            moveSelection(Math.min(currentRowIndex + 1, visibleRows.length - 1), currentColIndex, false);
-            break;
-          case "Backspace":
-          case "Delete":
-            if (!readOnly) {
-              event.preventDefault();
-              clearSelectedCells();
-            }
-            break;
-          case "F2":
-            if (!readOnly) {
-              event.preventDefault();
-              startEditing(currentCell);
-            }
-            break;
-          default:
-            break;
-        }
-      },
-      onPaste: (event) => {
-        if (editingCell || readOnly) {
-          return;
-        }
-        const clipboard = event.clipboardData;
-        if (!clipboard) {
-          event.preventDefault();
-          void pasteFromClipboard();
-          return;
-        }
-        const structuredPayload = clipboard.getData(INTERNAL_CLIPBOARD_MIME2);
-        const textPayload = clipboard.getData("text/plain");
-        if (!structuredPayload && !textPayload) {
-          return;
-        }
+            startEditing(currentCell);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    onPaste: (event) => {
+      if (editingCell || readOnly) {
+        return;
+      }
+      const clipboard = event.clipboardData;
+      if (!clipboard) {
         event.preventDefault();
-        if (structuredPayload) {
-          pasteStructuredClipboardData(structuredPayload);
-          return;
-        }
-        pasteText(textPayload);
-      },
-      tabIndex: 0,
+        void pasteFromClipboard();
+        return;
+      }
+      const structuredPayload = clipboard.getData(INTERNAL_CLIPBOARD_MIME2);
+      const textPayload = clipboard.getData("text/plain");
+      if (!structuredPayload && !textPayload) {
+        return;
+      }
+      event.preventDefault();
+      if (structuredPayload) {
+        pasteStructuredClipboardData(structuredPayload);
+        return;
+      }
+      pasteText(textPayload);
+    },
+    tabIndex: 0,
+    style: {
+      ["--xlsx-menu-active"]: selectionFill,
+      ["--xlsx-menu-border"]: palette.strongBorder,
+      ["--xlsx-menu-surface"]: palette.surface,
+      ["--xlsx-selection-header"]: selectionHeaderSurface,
+      backgroundColor: palette.canvas,
+      color: palette.text,
+      cursor: resizeGuide?.type === "column" ? "col-resize" : resizeGuide?.type === "row" ? "row-resize" : void 0,
+      flex: 1,
+      height: "100%",
+      minHeight: 0,
+      minWidth: 0,
+      outline: "none",
+      overflow: "auto",
+      width: "100%"
+    }
+  };
+  const scrollerContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
       style: {
-        ["--xlsx-menu-active"]: selectionFill,
-        ["--xlsx-menu-border"]: palette.strongBorder,
-        ["--xlsx-menu-surface"]: palette.surface,
-        ["--xlsx-selection-header"]: selectionHeaderSurface,
-        backgroundColor: palette.canvas,
-        color: palette.text,
-        cursor: resizeGuide?.type === "column" ? "col-resize" : resizeGuide?.type === "row" ? "row-resize" : void 0,
-        flex: 1,
-        height: "100%",
-        minHeight: 0,
-        minWidth: 0,
-        outline: "none",
-        overflow: "auto",
-        width: "100%"
+        backgroundColor: resolveSheetSurface(activeSheet, palette),
+        minHeight: "100%",
+        minWidth: "100%",
+        position: "relative",
+        width: totalWidth,
+        height: sheetContentHeight
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
+          ref: wrapperRef,
           style: {
-            backgroundColor: resolveSheetSurface(activeSheet, palette),
-            minHeight: "100%",
-            minWidth: "100%",
-            position: "relative",
-            width: totalWidth,
-            height: sheetContentHeight
+            height: sheetContentHeight,
+            left: 0,
+            position: "absolute",
+            top: 0,
+            transform: !experimentalCanvas && isLiveZooming ? `translate3d(${liveZoomTranslateX}px, ${liveZoomTranslateY}px, 0) scale(${liveZoomScale})` : void 0,
+            transformOrigin: "0 0",
+            transition: "none",
+            willChange: !experimentalCanvas && isLiveZooming ? "transform" : void 0,
+            width: totalWidth
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              ref: wrapperRef,
-              style: {
-                height: sheetContentHeight,
-                left: 0,
-                position: "absolute",
-                top: 0,
-                transform: !experimentalCanvas && isLiveZooming ? `translate3d(${liveZoomTranslateX}px, ${liveZoomTranslateY}px, 0) scale(${liveZoomScale})` : void 0,
-                transformOrigin: "0 0",
-                transition: "none",
-                willChange: !experimentalCanvas && isLiveZooming ? "transform" : void 0,
-                width: totalWidth
-              },
-              children: [
-                showImages && !experimentalCanvas ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: topOverlayStyle, children: paneDrawingNodes.top }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: leftOverlayStyle, children: paneDrawingNodes.left }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cornerOverlayStyle, children: paneDrawingNodes.corner }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: scrollOverlayStyle, children: paneDrawingNodes.scroll })
-                ] }) : null,
-                experimentalCanvas ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasBodyViewportLayerStyle, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: scrollBodyCanvasRef,
-                        onClick: handleCanvasBodyClick,
-                        onDoubleClick: handleCanvasBodyDoubleClick,
-                        onPointerDown: handleCanvasBodyPointerDown,
-                        style: canvasScrollBodyStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: topBodyCanvasRef,
-                        onClick: handleCanvasBodyClick,
-                        onDoubleClick: handleCanvasBodyDoubleClick,
-                        onPointerDown: handleCanvasBodyPointerDown,
-                        style: canvasTopBodyStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: leftBodyCanvasRef,
-                        onClick: handleCanvasBodyClick,
-                        onDoubleClick: handleCanvasBodyDoubleClick,
-                        onPointerDown: handleCanvasBodyPointerDown,
-                        style: canvasLeftBodyStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: cornerBodyCanvasRef,
-                        onClick: handleCanvasBodyClick,
-                        onDoubleClick: handleCanvasBodyDoubleClick,
-                        onPointerDown: handleCanvasBodyPointerDown,
-                        style: canvasCornerBodyStyle
-                      }
-                    ),
-                    hasCanvasDomDrawingOverlays ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasScrollOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "div",
-                        {
-                          ref: canvasScrollOverlayContentRef,
-                          style: {
-                            height: sheetContentHeight,
-                            left: 0,
-                            pointerEvents: "none",
-                            position: "absolute",
-                            top: 0,
-                            transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
-                            transformOrigin: "0 0",
-                            width: totalWidth
-                          },
-                          children: paneDrawingNodes.scroll
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasTopOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "div",
-                        {
-                          ref: canvasTopOverlayContentRef,
-                          style: {
-                            height: sheetContentHeight,
-                            left: 0,
-                            pointerEvents: "none",
-                            position: "absolute",
-                            top: 0,
-                            transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-displayHeaderHeight}px)`,
-                            transformOrigin: "0 0",
-                            width: totalWidth
-                          },
-                          children: paneDrawingNodes.top
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasLeftOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "div",
-                        {
-                          ref: canvasLeftOverlayContentRef,
-                          style: {
-                            height: sheetContentHeight,
-                            left: 0,
-                            pointerEvents: "none",
-                            position: "absolute",
-                            top: 0,
-                            transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
-                            transformOrigin: "0 0",
-                            width: totalWidth
-                          },
-                          children: paneDrawingNodes.left
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasCornerOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "div",
-                        {
-                          ref: canvasCornerOverlayContentRef,
-                          style: {
-                            height: sheetContentHeight,
-                            left: 0,
-                            pointerEvents: "none",
-                            position: "absolute",
-                            top: 0,
-                            transform: `translate(${-displayRowHeaderWidth}px, ${-displayHeaderHeight}px)`,
-                            transformOrigin: "0 0",
-                            width: totalWidth
-                          },
-                          children: paneDrawingNodes.corner
-                        }
-                      ) })
-                    ] }) : null
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasHeaderViewportLayerStyle, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: topFrozenHeaderCanvasRef,
-                        onPointerLeave: handleCanvasHeaderPointerLeave,
-                        onPointerMove: handleCanvasColumnHeaderPointerMove,
-                        onPointerDown: handleCanvasColumnHeaderPointerDown,
-                        style: canvasTopFrozenHeaderStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: topScrollHeaderCanvasRef,
-                        onPointerLeave: handleCanvasHeaderPointerLeave,
-                        onPointerMove: handleCanvasColumnHeaderPointerMove,
-                        onPointerDown: handleCanvasColumnHeaderPointerDown,
-                        style: canvasTopScrollHeaderStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: leftFrozenHeaderCanvasRef,
-                        onPointerLeave: handleCanvasHeaderPointerLeave,
-                        onPointerMove: handleCanvasRowHeaderPointerMove,
-                        onPointerDown: handleCanvasRowHeaderPointerDown,
-                        style: canvasLeftFrozenHeaderStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "canvas",
-                      {
-                        ref: leftScrollHeaderCanvasRef,
-                        onPointerLeave: handleCanvasHeaderPointerLeave,
-                        onPointerMove: handleCanvasRowHeaderPointerMove,
-                        onPointerDown: handleCanvasRowHeaderPointerDown,
-                        style: canvasLeftScrollHeaderStyle
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: cornerHeaderCanvasRef, style: canvasCornerHeaderStyle })
-                  ] }),
-                  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)(
+          children: [
+            showImages && !experimentalCanvas ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: topOverlayStyle, children: paneDrawingNodes.top }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: leftOverlayStyle, children: paneDrawingNodes.left }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cornerOverlayStyle, children: paneDrawingNodes.corner }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: scrollOverlayStyle, children: paneDrawingNodes.scroll })
+            ] }) : null,
+            experimentalCanvas ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasBodyViewportLayerStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "canvas",
+                  {
+                    ref: scrollBodyCanvasRef,
+                    onClick: handleCanvasBodyClick,
+                    onDoubleClick: handleCanvasBodyDoubleClick,
+                    onPointerDown: handleCanvasBodyPointerDown,
+                    style: canvasScrollBodyStyle
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "canvas",
+                  {
+                    ref: topBodyCanvasRef,
+                    onClick: handleCanvasBodyClick,
+                    onDoubleClick: handleCanvasBodyDoubleClick,
+                    onPointerDown: handleCanvasBodyPointerDown,
+                    style: canvasTopBodyStyle
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "canvas",
+                  {
+                    ref: leftBodyCanvasRef,
+                    onClick: handleCanvasBodyClick,
+                    onDoubleClick: handleCanvasBodyDoubleClick,
+                    onPointerDown: handleCanvasBodyPointerDown,
+                    style: canvasLeftBodyStyle
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "canvas",
+                  {
+                    ref: cornerBodyCanvasRef,
+                    onClick: handleCanvasBodyClick,
+                    onDoubleClick: handleCanvasBodyDoubleClick,
+                    onPointerDown: handleCanvasBodyPointerDown,
+                    style: canvasCornerBodyStyle
+                  }
+                ),
+                hasCanvasDomDrawingOverlays ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasScrollOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      ref: canvasScrollOverlayContentRef,
+                      style: {
+                        height: sheetContentHeight,
+                        left: 0,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        top: 0,
+                        transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
+                        transformOrigin: "0 0",
+                        width: totalWidth
+                      },
+                      children: paneDrawingNodes.scroll
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasTopOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "div",
                     {
+                      ref: canvasTopOverlayContentRef,
                       style: {
-                        height: activeCellAdornmentRect.height,
-                        left: activeCellAdornmentRect.left,
+                        height: sheetContentHeight,
+                        left: 0,
                         pointerEvents: "none",
                         position: "absolute",
-                        top: activeCellAdornmentRect.top,
-                        width: activeCellAdornmentRect.width,
-                        zIndex: 27
+                        top: 0,
+                        transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-displayHeaderHeight}px)`,
+                        transformOrigin: "0 0",
+                        width: totalWidth
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: "100%", pointerEvents: "auto", position: "relative", width: "100%" }, children: activeCellAdornment })
+                      children: paneDrawingNodes.top
                     }
-                  ) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                  "table",
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasLeftOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      ref: canvasLeftOverlayContentRef,
+                      style: {
+                        height: sheetContentHeight,
+                        left: 0,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        top: 0,
+                        transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
+                        transformOrigin: "0 0",
+                        width: totalWidth
+                      },
+                      children: paneDrawingNodes.left
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasCornerOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      ref: canvasCornerOverlayContentRef,
+                      style: {
+                        height: sheetContentHeight,
+                        left: 0,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        top: 0,
+                        transform: `translate(${-displayRowHeaderWidth}px, ${-displayHeaderHeight}px)`,
+                        transformOrigin: "0 0",
+                        width: totalWidth
+                      },
+                      children: paneDrawingNodes.corner
+                    }
+                  ) })
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasHeaderViewportLayerStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "canvas",
                   {
-                    ref: tableRef,
-                    style: {
-                      borderCollapse: "collapse",
-                      color: "#000000",
-                      flex: "0 0 auto",
-                      tableLayout: "fixed",
-                      width: totalWidth
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("colgroup", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: displayRowHeaderWidth } }),
-                        leadingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: leadingColumnSpacerWidth } }) : null,
-                        renderedCols.map((column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "col",
-                          {
-                            ref: (element) => {
-                              if (element) {
-                                colElementRefs.current.set(column.actualCol, element);
-                              } else {
-                                colElementRefs.current.delete(column.actualCol);
-                              }
-                            },
-                            style: { width: column.size }
-                          },
-                          column.key
-                        )),
-                        trailingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: trailingColumnSpacerWidth } }) : null
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { style: { position: "sticky", top: 0, zIndex: canvasHeaderOverlayZIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "th",
-                          {
-                            style: {
-                              ...headerCellStyle,
-                              backgroundColor: palette.headerSurface,
-                              left: 0,
-                              width: displayRowHeaderWidth,
-                              zIndex: cornerHeaderOverlayZIndex
-                            }
-                          }
-                        ),
-                        leadingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { "aria-hidden": "true", style: { ...headerCellStyle, padding: 0, width: leadingColumnSpacerWidth } }) : null,
-                        renderedCols.map((column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "th",
-                          {
-                            "data-xlsx-col-header": column.actualCol,
-                            ref: (element) => setColHeaderRef(column.actualCol, element),
-                            onPointerDown: (event) => handleColumnPointerDown(event, column.actualCol),
-                            style: {
-                              ...headerCellStyle,
-                              left: stickyLeftByCol.get(column.actualCol),
-                              zIndex: stickyLeftByCol.has(column.actualCol) ? stickyHeaderOverlayZIndex : headerCellStyle.zIndex
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                "span",
-                                {
-                                  style: {
-                                    display: "inline-block",
-                                    transform: headerLabelLiveScale !== 1 ? `scale(${1 / headerLabelLiveScale})` : void 0,
-                                    transformOrigin: "center center"
-                                  },
-                                  children: columnLabel2(column.actualCol)
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                "div",
-                                {
-                                  onPointerDown: (event) => {
-                                    if (!canResizeHeaders) {
-                                      return;
-                                    }
-                                    event.preventDefault();
-                                    event.stopPropagation();
-                                    startColumnResize(
-                                      event.pointerId,
-                                      column.actualCol,
-                                      column.size,
-                                      event.clientX
-                                    );
-                                  },
-                                  style: columnResizeHandleStyle
-                                }
-                              )
-                            ] })
-                          },
-                          column.key
-                        )),
-                        trailingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { "aria-hidden": "true", style: { ...headerCellStyle, padding: 0, width: trailingColumnSpacerWidth } }) : null
-                      ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tbody", { children: [
-                        virtualRows.map((virtualRow, index) => {
-                          const actualRow = visibleRows[virtualRow.index];
-                          if (actualRow === void 0) {
-                            return null;
-                          }
-                          const previousEnd = index === 0 ? 0 : virtualRows[index - 1]?.end ?? 0;
-                          const gapHeight = Math.max(0, virtualRow.start - previousEnd);
-                          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
-                            gapHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { "aria-hidden": "true", style: { height: gapHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: rowColSpan }) }) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                              MemoGridRow,
-                              {
-                                actualRow,
-                                editingCell,
-                                editingValue,
-                                frozenRowHeaderZIndex: frozenRowHeaderOverlayZIndex,
-                                getCellData,
-                                leadingSpacerWidth: leadingColumnSpacerWidth,
-                                onCellClick: handleCellClick,
-                                onCellDoubleClick: handleCellDoubleClick,
-                                onCellPointerDown: handleCellPointerDown,
-                                onEditingCancel: cancelEditing,
-                                onEditingCommit: commitEditing,
-                                onEditingValueChange: setEditingValue,
-                                headerLabelLiveScale,
-                                onRowHeaderRef: setRowHeaderRef,
-                                onRowPointerDown: handleRowPointerDown,
-                                onRowResizePointerDown: handleRowResizePointerDown,
-                                palette,
-                                readOnly,
-                                renderCellAdornment,
-                                rowHeight: virtualRow.size,
-                                rowHeaderZIndex: rowHeaderOverlayZIndex,
-                                rowHeaderWidth: displayRowHeaderWidth,
-                                stickyLeftByCol,
-                                stickyTop: stickyTopByRow.get(actualRow),
-                                trailingSpacerWidth: trailingColumnSpacerWidth,
-                                visibleCols: renderedCols,
-                                zoomFactor
-                              },
-                              virtualRow.key
-                            )
-                          ] }, `row-fragment-${virtualRow.key}`);
-                        }),
-                        virtualRows.length > 0 && totalHeight - (virtualRows[virtualRows.length - 1]?.end ?? totalHeight) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "tr",
-                          {
-                            style: {
-                              height: totalHeight - (virtualRows[virtualRows.length - 1]?.end ?? totalHeight)
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: rowColSpan })
-                          }
-                        ) : null
-                      ] })
-                    ]
+                    ref: topFrozenHeaderCanvasRef,
+                    onPointerLeave: handleCanvasHeaderPointerLeave,
+                    onPointerMove: handleCanvasColumnHeaderPointerMove,
+                    onPointerDown: handleCanvasColumnHeaderPointerDown,
+                    style: canvasTopFrozenHeaderStyle
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "div",
+                  "canvas",
                   {
-                    ref: selectionOverlayRef,
-                    style: {
-                      backgroundColor: selectionFill,
-                      boxSizing: "border-box",
-                      boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
-                      contain: "layout paint",
-                      height: resolvedSelectionOverlay?.height ?? 0,
-                      left: resolvedSelectionOverlay?.left ?? 0,
-                      opacity: resolvedSelectionOverlay ? 1 : 0,
-                      pointerEvents: "none",
-                      position: "absolute",
-                      top: resolvedSelectionOverlay?.top ?? 0,
-                      transition: canvasSelectionTransition,
-                      visibility: resolvedSelectionOverlay ? "visible" : "hidden",
-                      willChange: shouldAnimateCanvasSelection ? "left, top, width, height" : void 0,
-                      width: resolvedSelectionOverlay?.width ?? 0,
-                      zIndex: 24
-                    }
+                    ref: topScrollHeaderCanvasRef,
+                    onPointerLeave: handleCanvasHeaderPointerLeave,
+                    onPointerMove: handleCanvasColumnHeaderPointerMove,
+                    onPointerDown: handleCanvasColumnHeaderPointerDown,
+                    style: canvasTopScrollHeaderStyle
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "div",
+                  "canvas",
                   {
-                    ref: activeValidationOverlayRef,
-                    "aria-hidden": "true",
-                    style: {
-                      alignItems: "center",
-                      color: palette.mutedText,
-                      display: "inline-flex",
-                      fontSize: 10 * zoomFactor,
-                      fontWeight: 700,
-                      height: 16 * zoomFactor,
-                      justifyContent: "center",
-                      opacity: 0,
-                      pointerEvents: "none",
-                      position: "absolute",
-                      transform: "translateY(-50%)",
-                      visibility: "hidden",
-                      width: 12 * zoomFactor,
-                      zIndex: 26
-                    },
-                    children: "\u25BE"
+                    ref: leftFrozenHeaderCanvasRef,
+                    onPointerLeave: handleCanvasHeaderPointerLeave,
+                    onPointerMove: handleCanvasRowHeaderPointerMove,
+                    onPointerDown: handleCanvasRowHeaderPointerDown,
+                    style: canvasLeftFrozenHeaderStyle
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "div",
+                  "canvas",
                   {
-                    ref: fillHandleRef,
-                    onPointerDown: (event) => {
-                      if (readOnly || event.button !== 0 || !normalizedSelection || !resolvedSelectionOverlay) {
-                        return;
-                      }
-                      event.preventDefault();
-                      event.stopPropagation();
-                      startFillDrag(event.pointerId, normalizedSelection);
-                    },
-                    style: {
-                      backgroundColor: selectionStroke,
-                      border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
-                      contain: "layout paint",
-                      cursor: "crosshair",
-                      display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
-                      height: 8 * zoomFactor,
-                      left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
-                      pointerEvents: "auto",
-                      position: "absolute",
-                      top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
-                      transition: shouldAnimateCanvasSelection ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1)" : "none",
-                      willChange: shouldAnimateCanvasSelection ? "left, top" : void 0,
-                      width: 8 * zoomFactor,
-                      zIndex: 25
-                    }
+                    ref: leftScrollHeaderCanvasRef,
+                    onPointerLeave: handleCanvasHeaderPointerLeave,
+                    onPointerMove: handleCanvasRowHeaderPointerMove,
+                    onPointerDown: handleCanvasRowHeaderPointerDown,
+                    style: canvasLeftScrollHeaderStyle
                   }
                 ),
-                resizeGuide ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: cornerHeaderCanvasRef, style: canvasCornerHeaderStyle })
+              ] }),
+              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",
                   {
-                    "aria-hidden": "true",
                     style: {
-                      backgroundColor: selectionStroke,
-                      borderRadius: Math.max(999, 3 * zoomFactor),
-                      boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
-                      height: resizeGuide.type === "column" ? Math.max(12, 14 * zoomFactor) : Math.max(3, 2 * zoomFactor),
-                      left: resizeGuide.type === "column" ? resizeGuide.position - Math.max(2, 1.5 * zoomFactor) : Math.max(3, 4 * zoomFactor),
-                      pointerEvents: "none",
+                      left: editingOverlayRect.left,
                       position: "absolute",
-                      top: resizeGuide.type === "column" ? Math.max(2 * zoomFactor, displayHeaderHeight - Math.max(14, 16 * zoomFactor)) : resizeGuide.position - Math.max(2, 1.5 * zoomFactor),
-                      width: resizeGuide.type === "column" ? Math.max(3, 2 * zoomFactor) : Math.max(12, 14 * zoomFactor),
-                      zIndex: 52
-                    }
-                  }
-                ) : null,
-                !renderTableHeaderMenu && openTableMenuState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "div",
-                  {
-                    ref: tableMenuRef,
-                    style: {
-                      color: palette.text,
-                      left: Math.max(displayRowHeaderWidth + 4 * zoomFactor, openTableMenuState.left),
-                      position: "absolute",
-                      top: openTableMenuState.top,
-                      zIndex: 50
+                      top: editingOverlayRect.top,
+                      width: editingOverlayRect.width,
+                      height: editingOverlayRect.height,
+                      zIndex: 28
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      DefaultTableHeaderMenu,
+                      "input",
                       {
-                        cell: { col: openTableMenuState.column.index + openTableMenuState.table.start.col, row: openTableMenuState.table.start.row },
-                        column: openTableMenuState.column,
-                        direction: sortState && sortState.tableName === openTableMenuState.table.name && sortState.columnIndex === openTableMenuState.column.index ? sortState.direction : null,
-                        sortAscending: () => {
-                          sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "ascending");
-                          setOpenTableMenu(null);
+                        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();
+                          }
                         },
-                        sortDescending: () => {
-                          sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "descending");
-                          setOpenTableMenu(null);
+                        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%"
                         },
-                        table: openTableMenuState.table,
-                        triggerIcon: "\u25BE",
-                        triggerProps: { type: "button" }
+                        value: editingValue
                       }
                     )
                   }
-                ) : null
-              ]
-            }
-          )
+                );
+              })() : null,
+              activeCellAdornment && activeCellAdornmentRect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    height: activeCellAdornmentRect.height,
+                    left: activeCellAdornmentRect.left,
+                    pointerEvents: "none",
+                    position: "absolute",
+                    top: activeCellAdornmentRect.top,
+                    width: activeCellAdornmentRect.width,
+                    zIndex: 27
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: "100%", pointerEvents: "auto", position: "relative", width: "100%" }, children: activeCellAdornment })
+                }
+              ) : null
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "table",
+              {
+                ref: tableRef,
+                style: {
+                  borderCollapse: "collapse",
+                  color: "#000000",
+                  flex: "0 0 auto",
+                  tableLayout: "fixed",
+                  width: totalWidth
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("colgroup", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: displayRowHeaderWidth } }),
+                    leadingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: leadingColumnSpacerWidth } }) : null,
+                    renderedCols.map((column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "col",
+                      {
+                        ref: (element) => {
+                          if (element) {
+                            colElementRefs.current.set(column.actualCol, element);
+                          } else {
+                            colElementRefs.current.delete(column.actualCol);
+                          }
+                        },
+                        style: { width: column.size }
+                      },
+                      column.key
+                    )),
+                    trailingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: trailingColumnSpacerWidth } }) : null
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { style: { position: "sticky", top: 0, zIndex: canvasHeaderOverlayZIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "th",
+                      {
+                        style: {
+                          ...headerCellStyle,
+                          backgroundColor: palette.headerSurface,
+                          left: 0,
+                          width: displayRowHeaderWidth,
+                          zIndex: cornerHeaderOverlayZIndex
+                        }
+                      }
+                    ),
+                    leadingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { "aria-hidden": "true", style: { ...headerCellStyle, padding: 0, width: leadingColumnSpacerWidth } }) : null,
+                    renderedCols.map((column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "th",
+                      {
+                        "data-xlsx-col-header": column.actualCol,
+                        ref: (element) => setColHeaderRef(column.actualCol, element),
+                        onPointerDown: (event) => handleColumnPointerDown(event, column.actualCol),
+                        style: {
+                          ...headerCellStyle,
+                          left: stickyLeftByCol.get(column.actualCol),
+                          zIndex: stickyLeftByCol.has(column.actualCol) ? stickyHeaderOverlayZIndex : headerCellStyle.zIndex
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "span",
+                            {
+                              style: {
+                                display: "inline-block",
+                                transform: headerLabelLiveScale !== 1 ? `scale(${1 / headerLabelLiveScale})` : void 0,
+                                transformOrigin: "center center"
+                              },
+                              children: columnLabel2(column.actualCol)
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "div",
+                            {
+                              onPointerDown: (event) => {
+                                if (!canResizeHeaders) {
+                                  return;
+                                }
+                                event.preventDefault();
+                                event.stopPropagation();
+                                startColumnResize(
+                                  event.pointerId,
+                                  column.actualCol,
+                                  column.size,
+                                  event.clientX
+                                );
+                              },
+                              style: columnResizeHandleStyle
+                            }
+                          )
+                        ] })
+                      },
+                      column.key
+                    )),
+                    trailingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { "aria-hidden": "true", style: { ...headerCellStyle, padding: 0, width: trailingColumnSpacerWidth } }) : null
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tbody", { children: [
+                    virtualRows.map((virtualRow, index) => {
+                      const actualRow = visibleRows[virtualRow.index];
+                      if (actualRow === void 0) {
+                        return null;
+                      }
+                      const previousEnd = index === 0 ? 0 : virtualRows[index - 1]?.end ?? 0;
+                      const gapHeight = Math.max(0, virtualRow.start - previousEnd);
+                      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(React4.Fragment, { children: [
+                        gapHeight > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { "aria-hidden": "true", style: { height: gapHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: rowColSpan }) }) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          MemoGridRow,
+                          {
+                            actualRow,
+                            editingCell,
+                            editingValue,
+                            frozenRowHeaderZIndex: frozenRowHeaderOverlayZIndex,
+                            getCellData,
+                            leadingSpacerWidth: leadingColumnSpacerWidth,
+                            onCellClick: handleCellClick,
+                            onCellDoubleClick: handleCellDoubleClick,
+                            onCellPointerDown: handleCellPointerDown,
+                            onEditingCancel: cancelEditing,
+                            onEditingCommit: commitEditing,
+                            onEditingValueChange: setEditingValue,
+                            headerLabelLiveScale,
+                            onRowHeaderRef: setRowHeaderRef,
+                            onRowPointerDown: handleRowPointerDown,
+                            onRowResizePointerDown: handleRowResizePointerDown,
+                            palette,
+                            readOnly,
+                            renderCellAdornment,
+                            rowHeight: virtualRow.size,
+                            rowHeaderZIndex: rowHeaderOverlayZIndex,
+                            rowHeaderWidth: displayRowHeaderWidth,
+                            stickyLeftByCol,
+                            stickyTop: stickyTopByRow.get(actualRow),
+                            trailingSpacerWidth: trailingColumnSpacerWidth,
+                            visibleCols: renderedCols,
+                            zoomFactor
+                          },
+                          virtualRow.key
+                        )
+                      ] }, `row-fragment-${virtualRow.key}`);
+                    }),
+                    virtualRows.length > 0 && totalHeight - (virtualRows[virtualRows.length - 1]?.end ?? totalHeight) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "tr",
+                      {
+                        style: {
+                          height: totalHeight - (virtualRows[virtualRows.length - 1]?.end ?? totalHeight)
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: rowColSpan })
+                      }
+                    ) : null
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                ref: selectionOverlayRef,
+                style: {
+                  backgroundColor: selectionFill,
+                  boxSizing: "border-box",
+                  boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
+                  contain: "layout paint",
+                  height: resolvedSelectionOverlay?.height ?? 0,
+                  left: resolvedSelectionOverlay?.left ?? 0,
+                  opacity: resolvedSelectionOverlay ? 1 : 0,
+                  pointerEvents: "none",
+                  position: "absolute",
+                  top: resolvedSelectionOverlay?.top ?? 0,
+                  transition: canvasSelectionTransition,
+                  visibility: resolvedSelectionOverlay ? "visible" : "hidden",
+                  willChange: shouldAnimateCanvasSelection ? "left, top, width, height" : void 0,
+                  width: resolvedSelectionOverlay?.width ?? 0,
+                  zIndex: 24
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                ref: activeValidationOverlayRef,
+                "aria-hidden": "true",
+                style: {
+                  alignItems: "center",
+                  color: palette.mutedText,
+                  display: "inline-flex",
+                  fontSize: 10 * zoomFactor,
+                  fontWeight: 700,
+                  height: 16 * zoomFactor,
+                  justifyContent: "center",
+                  opacity: 0,
+                  pointerEvents: "none",
+                  position: "absolute",
+                  transform: "translateY(-50%)",
+                  visibility: "hidden",
+                  width: 12 * zoomFactor,
+                  zIndex: 26
+                },
+                children: "\u25BE"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                ref: fillHandleRef,
+                onPointerDown: (event) => {
+                  if (readOnly || event.button !== 0 || !normalizedSelection || !resolvedSelectionOverlay) {
+                    return;
+                  }
+                  event.preventDefault();
+                  event.stopPropagation();
+                  startFillDrag(event.pointerId, normalizedSelection);
+                },
+                style: {
+                  backgroundColor: selectionStroke,
+                  border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
+                  contain: "layout paint",
+                  cursor: "crosshair",
+                  display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
+                  height: 8 * zoomFactor,
+                  left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
+                  pointerEvents: "auto",
+                  position: "absolute",
+                  top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
+                  transition: shouldAnimateCanvasSelection ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1)" : "none",
+                  willChange: shouldAnimateCanvasSelection ? "left, top" : void 0,
+                  width: 8 * zoomFactor,
+                  zIndex: 25
+                }
+              }
+            ),
+            resizeGuide ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  backgroundColor: selectionStroke,
+                  borderRadius: Math.max(999, 3 * zoomFactor),
+                  boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
+                  height: resizeGuide.type === "column" ? Math.max(12, 14 * zoomFactor) : Math.max(3, 2 * zoomFactor),
+                  left: resizeGuide.type === "column" ? resizeGuide.position - Math.max(2, 1.5 * zoomFactor) : Math.max(3, 4 * zoomFactor),
+                  pointerEvents: "none",
+                  position: "absolute",
+                  top: resizeGuide.type === "column" ? Math.max(2 * zoomFactor, displayHeaderHeight - Math.max(14, 16 * zoomFactor)) : resizeGuide.position - Math.max(2, 1.5 * zoomFactor),
+                  width: resizeGuide.type === "column" ? Math.max(3, 2 * zoomFactor) : Math.max(12, 14 * zoomFactor),
+                  zIndex: 52
+                }
+              }
+            ) : null,
+            !renderTableHeaderMenu && openTableMenuState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                ref: tableMenuRef,
+                style: {
+                  color: palette.text,
+                  left: Math.max(displayRowHeaderWidth + 4 * zoomFactor, openTableMenuState.left),
+                  position: "absolute",
+                  top: openTableMenuState.top,
+                  zIndex: 50
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  DefaultTableHeaderMenu,
+                  {
+                    cell: { col: openTableMenuState.column.index + openTableMenuState.table.start.col, row: openTableMenuState.table.start.row },
+                    column: openTableMenuState.column,
+                    direction: sortState && sortState.tableName === openTableMenuState.table.name && sortState.columnIndex === openTableMenuState.column.index ? sortState.direction : null,
+                    sortAscending: () => {
+                      sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "ascending");
+                      setOpenTableMenu(null);
+                    },
+                    sortDescending: () => {
+                      sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "descending");
+                      setOpenTableMenu(null);
+                    },
+                    table: openTableMenuState.table,
+                    triggerIcon: "\u25BE",
+                    triggerProps: { type: "button" }
+                  }
+                )
+              }
+            ) : null
+          ]
         }
       )
-    },
-    activeTabIndex
-  ) });
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { backgroundColor: palette.canvas, display: "flex", flex: 1, minHeight: 0, minWidth: 0 }, children: renderScroller ? renderScroller({ children: scrollerContent, viewportProps: scrollerViewportProps }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...scrollerViewportProps, children: scrollerContent }) });
 }
 function XlsxViewerInner({
   allowResizeInReadOnly = false,
@@ -28232,6 +28325,7 @@ function XlsxViewerInner({
   renderChartLoading,
   renderImage,
   renderImageSelection,
+  renderScroller,
   renderTableHeaderMenu,
   rounded = true,
   selectionColor,
@@ -28293,6 +28387,7 @@ function XlsxViewerInner({
             renderChartLoading,
             renderImage,
             renderImageSelection,
+            renderScroller,
             renderTableHeaderMenu,
             selectionColor,
             selectionFillColor,