@extend-ai/react-xlsx 0.9.2 → 0.10.1

package/dist/index.cjs

@@ -17376,6 +17376,15 @@ function rangesEqual(left, right) {
 function isPrintableKey(event) {
   return event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
 }
+function isInteractiveFocusTarget(target, container) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  const interactiveElement = target.closest(
+    "a[href], button, input, select, textarea, [contenteditable=''], [contenteditable='true'], [role='button'], [role='menu'], [role='menuitem'], [role='textbox'], [tabindex]:not([tabindex='-1'])"
+  );
+  return Boolean(interactiveElement && interactiveElement !== container && container.contains(interactiveElement));
+}
 function buildPrefixSums(values) {
   const prefix = new Array(values.length + 1).fill(0);
   for (let index = 0; index < values.length; index += 1) {
@@ -21053,6 +21062,21 @@ function resolveFirstUsedVisibleIndex(visibleIndices, minUsedIndex) {
   const firstVisibleUsed = visibleIndices.find((index) => index >= minUsedIndex);
   return firstVisibleUsed ?? visibleIndices[0] ?? -1;
 }
+function resolveLastUsedVisibleIndex(visibleIndices, maxUsedIndex) {
+  if (visibleIndices.length === 0) {
+    return -1;
+  }
+  if (maxUsedIndex < 0) {
+    return visibleIndices[visibleIndices.length - 1] ?? -1;
+  }
+  for (let index = visibleIndices.length - 1; index >= 0; index -= 1) {
+    const visibleIndex = visibleIndices[index];
+    if (visibleIndex !== void 0 && visibleIndex <= maxUsedIndex) {
+      return visibleIndex;
+    }
+  }
+  return visibleIndices[visibleIndices.length - 1] ?? -1;
+}
 function GridRow({
   actualRow,
   editingCell,
@@ -21465,6 +21489,7 @@ function XlsxGrid({
   renderImage,
   renderImageSelection,
   renderTableHeaderMenu,
+  renderScroller,
   enableGestureZoom = true,
   experimentalCanvas = true,
   selectionColor,
@@ -23179,8 +23204,8 @@ function XlsxGrid({
     selectionPreviewRangeRef.current = null;
     setInteractionMode("idle");
   }, [activeSheetIndex, clearGlobalCursor, revision]);
-  const focusGrid = React4.useCallback(() => {
-    scrollRef.current?.focus();
+  const focusGrid = React4.useCallback((options) => {
+    scrollRef.current?.focus(options);
   }, []);
   const openHyperlink = React4.useCallback((target, location) => {
     const internalTarget = parseInternalSheetLink(location ?? target);
@@ -27606,708 +27631,842 @@ function XlsxGrid({
     }
     return { row: firstVisibleRow, col: firstVisibleCol };
   }
+  function ensureCellVisible(rowIndex, colIndex) {
+    const scroller = scrollRef.current;
+    if (!scroller) {
+      return;
+    }
+    let nextScrollTop = scroller.scrollTop;
+    let nextScrollLeft = scroller.scrollLeft;
+    const rowStart = displayHeaderHeight + (rowPrefixSums[rowIndex] ?? 0);
+    const rowEnd = displayHeaderHeight + (rowPrefixSums[rowIndex + 1] ?? rowStart);
+    const colStart = displayRowHeaderWidth + (colPrefixSums[colIndex] ?? 0);
+    const colEnd = displayRowHeaderWidth + (colPrefixSums[colIndex + 1] ?? colStart);
+    if (rowEnd > frozenPaneBottom) {
+      const visibleTop = scroller.scrollTop + frozenPaneBottom;
+      const visibleBottom = scroller.scrollTop + scroller.clientHeight;
+      if (rowStart < visibleTop) {
+        nextScrollTop = rowStart - frozenPaneBottom;
+      } else if (rowEnd > visibleBottom) {
+        nextScrollTop = rowEnd - scroller.clientHeight;
+      }
+    }
+    if (colEnd > frozenPaneRight) {
+      const visibleLeft = scroller.scrollLeft + frozenPaneRight;
+      const visibleRight = scroller.scrollLeft + scroller.clientWidth;
+      if (colStart < visibleLeft) {
+        nextScrollLeft = colStart - frozenPaneRight;
+      } else if (colEnd > visibleRight) {
+        nextScrollLeft = colEnd - scroller.clientWidth;
+      }
+    }
+    nextScrollTop = Math.max(0, Math.min(nextScrollTop, scroller.scrollHeight - scroller.clientHeight));
+    nextScrollLeft = Math.max(0, Math.min(nextScrollLeft, scroller.scrollWidth - scroller.clientWidth));
+    if (nextScrollTop !== scroller.scrollTop) {
+      scroller.scrollTop = nextScrollTop;
+    }
+    if (nextScrollLeft !== scroller.scrollLeft) {
+      scroller.scrollLeft = nextScrollLeft;
+    }
+    syncDrawingViewport(scroller, { immediate: true });
+  }
   function moveSelection(nextRowIndex, nextColIndex, extend) {
-    const nextRow = visibleRows[nextRowIndex];
-    const nextCol = visibleCols[nextColIndex];
+    const clampedRowIndex = Math.max(0, Math.min(nextRowIndex, visibleRows.length - 1));
+    const clampedColIndex = Math.max(0, Math.min(nextColIndex, visibleCols.length - 1));
+    const nextRow = visibleRows[clampedRowIndex];
+    const nextCol = visibleCols[clampedColIndex];
     if (nextRow === void 0 || nextCol === void 0) {
       return;
     }
     selectCell({ row: nextRow, col: nextCol }, extend ? { extend: true } : void 0);
+    ensureCellVisible(clampedRowIndex, clampedColIndex);
   }
-  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) {
+  function resolvePageRowIndex(currentRowIndex, direction) {
+    const scroller = scrollRef.current;
+    const viewportHeight = Math.max(
+      displayDefaultRowHeight,
+      (scroller?.clientHeight ?? displayDefaultRowHeight * 20) - frozenPaneBottom
+    );
+    const currentOffset = rowPrefixSums[currentRowIndex] ?? 0;
+    const targetOffset = direction > 0 ? currentOffset + viewportHeight : currentOffset - viewportHeight;
+    return Math.max(0, Math.min(findIndexForOffsetPrefix(rowPrefixSums, targetOffset), visibleRows.length - 1));
+  }
+  function resolvePageColIndex(currentColIndex, direction) {
+    const scroller = scrollRef.current;
+    const viewportWidth = Math.max(
+      displayDefaultColWidth,
+      (scroller?.clientWidth ?? displayDefaultColWidth * 8) - frozenPaneRight
+    );
+    const currentOffset = colPrefixSums[currentColIndex] ?? 0;
+    const targetOffset = direction > 0 ? currentOffset + viewportWidth : currentOffset - viewportWidth;
+    return Math.max(0, Math.min(findIndexForOffsetPrefix(colPrefixSums, targetOffset), visibleCols.length - 1));
+  }
+  const scrollerViewportProps = {
+    key: activeTabIndex,
+    ref: scrollRef,
+    "aria-colcount": Math.max(activeSheet?.colCount ?? 0, displayColLimit),
+    "aria-keyshortcuts": "ArrowUp ArrowDown ArrowLeft ArrowRight Home End PageUp PageDown Control+Home Control+End",
+    "aria-label": activeSheet ? `${activeSheet.name} worksheet grid` : "Workbook grid",
+    "aria-readonly": readOnly,
+    "aria-rowcount": Math.max(activeSheet?.rowCount ?? 0, displayRowLimit),
+    role: "grid",
+    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();
+    },
+    onPointerDownCapture: (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      if (isInteractiveFocusTarget(event.target, event.currentTarget)) {
+        return;
+      }
+      if (document.activeElement !== event.currentTarget) {
+        event.currentTarget.focus({ preventScroll: true });
+      }
+    },
+    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;
+      const isCommandNavigation = event.ctrlKey || event.metaKey;
+      if (!readOnly && isPrintableKey(event)) {
+        event.preventDefault();
+        startEditing(currentCell, event.key);
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          moveSelection(
+            isCommandNavigation ? rowIndexByActual.get(resolveLastUsedVisibleIndex(visibleRows, activeSheet?.maxUsedRow ?? -1)) ?? visibleRows.length - 1 : currentRowIndex + 1,
+            currentColIndex,
+            event.shiftKey
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveSelection(
+            isCommandNavigation ? rowIndexByActual.get(resolveFirstUsedVisibleIndex(visibleRows, activeSheet?.minUsedRow ?? -1)) ?? 0 : currentRowIndex - 1,
+            currentColIndex,
+            event.shiftKey
+          );
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          moveSelection(
+            currentRowIndex,
+            isCommandNavigation ? colIndexByActual.get(resolveFirstUsedVisibleIndex(visibleCols, activeSheet?.minUsedCol ?? -1)) ?? 0 : currentColIndex - 1,
+            event.shiftKey
+          );
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          moveSelection(
+            currentRowIndex,
+            isCommandNavigation ? colIndexByActual.get(resolveLastUsedVisibleIndex(visibleCols, activeSheet?.maxUsedCol ?? -1)) ?? visibleCols.length - 1 : currentColIndex + 1,
+            event.shiftKey
+          );
+          break;
+        case "Home":
+          event.preventDefault();
+          moveSelection(
+            isCommandNavigation ? rowIndexByActual.get(resolveFirstUsedVisibleIndex(visibleRows, activeSheet?.minUsedRow ?? -1)) ?? 0 : currentRowIndex,
+            colIndexByActual.get(resolveFirstUsedVisibleIndex(visibleCols, activeSheet?.minUsedCol ?? -1)) ?? 0,
+            event.shiftKey
+          );
+          break;
+        case "End":
+          event.preventDefault();
+          moveSelection(
+            isCommandNavigation ? rowIndexByActual.get(resolveLastUsedVisibleIndex(visibleRows, activeSheet?.maxUsedRow ?? -1)) ?? visibleRows.length - 1 : currentRowIndex,
+            colIndexByActual.get(resolveLastUsedVisibleIndex(visibleCols, activeSheet?.maxUsedCol ?? -1)) ?? visibleCols.length - 1,
+            event.shiftKey
+          );
+          break;
+        case "PageDown":
+          event.preventDefault();
+          if (event.altKey) {
+            moveSelection(currentRowIndex, resolvePageColIndex(currentColIndex, 1), event.shiftKey);
             break;
-          case "ArrowRight":
-            event.preventDefault();
-            moveSelection(currentRowIndex, Math.min(currentColIndex + 1, visibleCols.length - 1), event.shiftKey);
+          }
+          moveSelection(resolvePageRowIndex(currentRowIndex, 1), currentColIndex, event.shiftKey);
+          break;
+        case "PageUp":
+          event.preventDefault();
+          if (event.altKey) {
+            moveSelection(currentRowIndex, resolvePageColIndex(currentColIndex, -1), event.shiftKey);
             break;
-          case "Tab":
-            event.preventDefault();
+          }
+          moveSelection(resolvePageRowIndex(currentRowIndex, -1), currentColIndex, event.shiftKey);
+          break;
+        case "Tab":
+          event.preventDefault();
+          if (event.shiftKey) {
             moveSelection(
-              currentRowIndex,
-              event.shiftKey ? Math.max(currentColIndex - 1, 0) : Math.min(currentColIndex + 1, visibleCols.length - 1),
+              currentColIndex > 0 ? currentRowIndex : currentRowIndex - 1,
+              currentColIndex > 0 ? currentColIndex - 1 : visibleCols.length - 1,
               false
             );
+          } else {
+            moveSelection(
+              currentColIndex < visibleCols.length - 1 ? currentRowIndex : currentRowIndex + 1,
+              currentColIndex < visibleCols.length - 1 ? currentColIndex + 1 : 0,
+              false
+            );
+          }
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (event.metaKey || event.ctrlKey || event.altKey) {
             break;
-          case "Enter":
-            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:
+          }
+          if (event.shiftKey) {
+            moveSelection(currentRowIndex - 1, currentColIndex, false);
             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;
-        }
+          }
+          moveSelection(currentRowIndex + 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();
-        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: 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: 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(${-displayRowHeaderWidth}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.corner
                     }
-                  ) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                  "table",
+                  ) })
+                ] }) : 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,
@@ -28326,6 +28485,7 @@ function XlsxViewerInner({
   renderChartLoading,
   renderImage,
   renderImageSelection,
+  renderScroller,
   renderTableHeaderMenu,
   rounded = true,
   selectionColor,
@@ -28387,6 +28547,7 @@ function XlsxViewerInner({
             renderChartLoading,
             renderImage,
             renderImageSelection,
+            renderScroller,
             renderTableHeaderMenu,
             selectionColor,
             selectionFillColor,