@extend-ai/react-xlsx 0.10.0 → 0.10.2

package/dist/index.js

@@ -17344,6 +17344,18 @@ function rangesEqual(left, right) {
 function isPrintableKey(event) {
   return event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
 }
+function getInteractiveFocusTarget(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  return target.closest(
+    "a[href], button, input, select, textarea, [contenteditable=''], [contenteditable='true'], [role='button'], [role='menu'], [role='menuitem'], [role='textbox'], [tabindex]:not([tabindex='-1'])"
+  );
+}
+function isInteractiveFocusTarget(target, container) {
+  const interactiveElement = getInteractiveFocusTarget(target);
+  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) {
@@ -21021,6 +21033,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,
@@ -21032,8 +21059,10 @@ function GridRow({
   onCellClick,
   onCellDoubleClick,
   onCellPointerDown,
+  onEditingBlur,
   onEditingCancel,
   onEditingCommit,
+  onEditingNavigate,
   onEditingValueChange,
   onRowHeaderRef,
   onRowPointerDown,
@@ -21319,7 +21348,7 @@ function GridRow({
               "input",
               {
                 autoFocus: true,
-                onBlur: onEditingCommit,
+                onBlur: onEditingBlur,
                 onChange: (event) => onEditingValueChange(event.target.value),
                 onKeyDown: (event) => {
                   event.stopPropagation();
@@ -21331,6 +21360,11 @@ function GridRow({
                   if (event.key === "Escape") {
                     event.preventDefault();
                     onEditingCancel();
+                    return;
+                  }
+                  if (event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp") {
+                    event.preventDefault();
+                    onEditingNavigate(event.key, event.currentTarget.value);
                   }
                 },
                 style: {
@@ -21406,7 +21440,7 @@ function GridRow({
   ] });
 }
 var MemoGridRow = React4.memo(GridRow, (prev, next) => {
-  if (prev.actualRow !== next.actualRow || prev.rowHeight !== next.rowHeight || prev.headerLabelLiveScale !== next.headerLabelLiveScale || prev.palette !== next.palette || prev.readOnly !== next.readOnly || prev.visibleCols !== next.visibleCols || prev.leadingSpacerWidth !== next.leadingSpacerWidth || prev.rowHeaderWidth !== next.rowHeaderWidth || prev.stickyLeftByCol !== next.stickyLeftByCol || prev.stickyTop !== next.stickyTop || prev.trailingSpacerWidth !== next.trailingSpacerWidth || prev.zoomFactor !== next.zoomFactor || prev.getCellData !== next.getCellData || prev.onCellClick !== next.onCellClick || prev.onCellDoubleClick !== next.onCellDoubleClick || prev.onCellPointerDown !== next.onCellPointerDown || prev.onEditingCancel !== next.onEditingCancel || prev.onEditingCommit !== next.onEditingCommit || prev.onEditingValueChange !== next.onEditingValueChange || prev.onRowHeaderRef !== next.onRowHeaderRef || prev.onRowPointerDown !== next.onRowPointerDown || prev.onRowResizePointerDown !== next.onRowResizePointerDown || prev.renderCellAdornment !== next.renderCellAdornment) {
+  if (prev.actualRow !== next.actualRow || prev.rowHeight !== next.rowHeight || prev.headerLabelLiveScale !== next.headerLabelLiveScale || prev.palette !== next.palette || prev.readOnly !== next.readOnly || prev.visibleCols !== next.visibleCols || prev.leadingSpacerWidth !== next.leadingSpacerWidth || prev.rowHeaderWidth !== next.rowHeaderWidth || prev.stickyLeftByCol !== next.stickyLeftByCol || prev.stickyTop !== next.stickyTop || prev.trailingSpacerWidth !== next.trailingSpacerWidth || prev.zoomFactor !== next.zoomFactor || prev.getCellData !== next.getCellData || prev.onCellClick !== next.onCellClick || prev.onCellDoubleClick !== next.onCellDoubleClick || prev.onCellPointerDown !== next.onCellPointerDown || prev.onEditingBlur !== next.onEditingBlur || prev.onEditingCancel !== next.onEditingCancel || prev.onEditingCommit !== next.onEditingCommit || prev.onEditingNavigate !== next.onEditingNavigate || prev.onEditingValueChange !== next.onEditingValueChange || prev.onRowHeaderRef !== next.onRowHeaderRef || prev.onRowPointerDown !== next.onRowPointerDown || prev.onRowResizePointerDown !== next.onRowResizePointerDown || prev.renderCellAdornment !== next.renderCellAdornment) {
     return false;
   }
   const prevEditingCol = prev.editingCell?.row === prev.actualRow ? prev.editingCell.col : -1;
@@ -21507,6 +21541,9 @@ function XlsxGrid({
   const scrollRef = React4.useRef(null);
   const wrapperRef = React4.useRef(null);
   const tableRef = React4.useRef(null);
+  const gridKeyboardActiveRef = React4.useRef(false);
+  const gridKeyboardHandlerRef = React4.useRef(null);
+  const axisSelectionRef = React4.useRef(null);
   const scrollBodyCanvasRef = React4.useRef(null);
   const topBodyCanvasRef = React4.useRef(null);
   const leftBodyCanvasRef = React4.useRef(null);
@@ -23148,9 +23185,50 @@ function XlsxGrid({
     selectionPreviewRangeRef.current = null;
     setInteractionMode("idle");
   }, [activeSheetIndex, clearGlobalCursor, revision]);
-  const focusGrid = React4.useCallback(() => {
-    scrollRef.current?.focus();
+  const focusGridElement = React4.useCallback((element, options) => {
+    if (document.activeElement !== element) {
+      element.focus(options ?? { preventScroll: true });
+    }
   }, []);
+  const focusGrid = React4.useCallback((options) => {
+    const scroller = scrollRef.current;
+    if (scroller) {
+      gridKeyboardActiveRef.current = true;
+      focusGridElement(scroller, options);
+    }
+  }, [focusGridElement]);
+  React4.useEffect(() => {
+    const handleDocumentPointerDown = (event) => {
+      const scroller = scrollRef.current;
+      if (!scroller || !(event.target instanceof Node) || !scroller.contains(event.target)) {
+        gridKeyboardActiveRef.current = false;
+        return;
+      }
+      if (isInteractiveFocusTarget(event.target, scroller)) {
+        gridKeyboardActiveRef.current = false;
+        return;
+      }
+      gridKeyboardActiveRef.current = true;
+      focusGridElement(scroller);
+    };
+    const handleDocumentKeyDown = (event) => {
+      if (!gridKeyboardActiveRef.current || event.defaultPrevented) {
+        return;
+      }
+      const scroller = scrollRef.current;
+      const interactiveTarget = getInteractiveFocusTarget(event.target);
+      if (!scroller || interactiveTarget && interactiveTarget !== scroller) {
+        return;
+      }
+      gridKeyboardHandlerRef.current?.(event);
+    };
+    document.addEventListener("pointerdown", handleDocumentPointerDown, true);
+    document.addEventListener("keydown", handleDocumentKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleDocumentPointerDown, true);
+      document.removeEventListener("keydown", handleDocumentKeyDown);
+    };
+  }, [focusGridElement]);
   const openHyperlink = React4.useCallback((target, location) => {
     const internalTarget = parseInternalSheetLink(location ?? target);
     if (internalTarget) {
@@ -23189,21 +23267,74 @@ function XlsxGrid({
       return;
     }
     if (readOnly) {
+      editingCellRef.current = null;
       setEditingCell(null);
       setEditingValue("");
       focusGrid();
       return;
     }
     setCellValue(editingCell, editingValue);
+    editingCellRef.current = null;
     setEditingCell(null);
     setEditingValue("");
     focusGrid();
   }, [editingCell, editingValue, focusGrid, readOnly, setCellValue]);
   const cancelEditing = React4.useCallback(() => {
+    editingCellRef.current = null;
     setEditingCell(null);
     setEditingValue("");
     focusGrid();
   }, [focusGrid]);
+  const handleEditingBlur = React4.useCallback(() => {
+    if (!editingCellRef.current) {
+      return;
+    }
+    commitEditing();
+  }, [commitEditing]);
+  const handleEditingNavigate = React4.useCallback((key, value) => {
+    const cell = editingCellRef.current;
+    if (!cell) {
+      return;
+    }
+    const currentRowIndex = rowIndexByActual.get(cell.row);
+    const currentColIndex = colIndexByActual.get(cell.col);
+    if (currentRowIndex === void 0 || currentColIndex === void 0) {
+      if (!readOnlyRef.current) {
+        setCellValue(cell, value);
+      }
+      editingCellRef.current = null;
+      setEditingCell(null);
+      setEditingValue("");
+      focusGrid();
+      return;
+    }
+    let nextRowIndex = currentRowIndex;
+    let nextColIndex = currentColIndex;
+    switch (key) {
+      case "ArrowDown":
+        nextRowIndex += 1;
+        break;
+      case "ArrowLeft":
+        nextColIndex -= 1;
+        break;
+      case "ArrowRight":
+        nextColIndex += 1;
+        break;
+      case "ArrowUp":
+        nextRowIndex -= 1;
+        break;
+      default:
+        return;
+    }
+    if (!readOnlyRef.current) {
+      setCellValue(cell, value);
+    }
+    editingCellRef.current = null;
+    setEditingCell(null);
+    setEditingValue("");
+    moveSelection(nextRowIndex, nextColIndex, false);
+    focusGrid();
+  }, [colIndexByActual, focusGrid, rowIndexByActual, setCellValue, visibleCols, visibleRows]);
   React4.useEffect(() => {
     commitEditingRef.current = commitEditing;
   }, [commitEditing]);
@@ -24176,6 +24307,7 @@ function XlsxGrid({
     overlay.style.visibility = "visible";
   }, [getCellData, resolveOverlayRect, zoomFactor]);
   const commitSelectionRange = React4.useCallback((range) => {
+    gridKeyboardActiveRef.current = true;
     const normalized = normalizeRange2(range);
     if (selectionRef.current && rangesEqual(selectionRef.current, normalized) && isSameCell(activeCellRef.current, normalized.end) && selectedChartIdRef.current === null && selectedImageIdRef.current === null) {
       return;
@@ -24469,6 +24601,23 @@ function XlsxGrid({
       if (nextRange && (dragState?.didDrag || !dragState?.committedOnPointerDown)) {
         selectionPreviewRangeRef.current = nextRange;
         displayedSelectionRef.current = nextRange;
+        if (dragState?.axis === "column") {
+          const normalized = normalizeRange2(nextRange);
+          axisSelectionRef.current = {
+            axis: "column",
+            startCol: normalized.start.col,
+            endCol: normalized.end.col
+          };
+        } else if (dragState?.axis === "row") {
+          const normalized = normalizeRange2(nextRange);
+          axisSelectionRef.current = {
+            axis: "row",
+            startRow: normalized.start.row,
+            endRow: normalized.end.row
+          };
+        } else {
+          axisSelectionRef.current = null;
+        }
         commitSelectionRange(nextRange);
       } else if (!nextRange) {
         selectionPreviewRangeRef.current = null;
@@ -24587,6 +24736,7 @@ function XlsxGrid({
     }
     event.preventDefault();
     focusGrid();
+    axisSelectionRef.current = null;
     const targetCell = event.currentTarget.colSpan > 1 || event.currentTarget.rowSpan > 1 ? resolvePointerCellFromGeometry(event.clientX, event.clientY) ?? cell : cell;
     const currentSelection = selectionRef.current;
     const anchor = event.shiftKey && currentSelection ? currentSelection.start : targetCell;
@@ -24662,6 +24812,7 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
+    axisSelectionRef.current = { axis: "row", startRow: anchorRow, endRow: actualRow };
     commitSelectionRange(initialRange);
   }, [commitSelectionRange, firstVisibleCol, focusGrid, lastVisibleCol, resolveRowPointerOrigin]);
   const handleColumnPointerDown = React4.useCallback((event, actualCol) => {
@@ -24693,6 +24844,7 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
+    axisSelectionRef.current = { axis: "column", startCol: anchorCol, endCol: actualCol };
     commitSelectionRange(initialRange);
   }, [commitSelectionRange, firstVisibleRow, focusGrid, lastVisibleRow, resolveColumnPointerOrigin]);
   const handleRowResizePointerDown = React4.useCallback((event, actualRow, rowHeight) => {
@@ -24949,6 +25101,7 @@ function XlsxGrid({
     }
     event.preventDefault();
     focusGrid();
+    axisSelectionRef.current = null;
     const currentSelection = selectionRef.current;
     const anchor = event.shiftKey && currentSelection ? currentSelection.start : cell;
     const initialRange = normalizeRange2({ start: anchor, end: cell });
@@ -25058,6 +25211,7 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
+    axisSelectionRef.current = { axis: "column", startCol: anchorCol, endCol: actualCol };
     commitSelectionRange(initialRange);
   }, [
     colIndexByActual,
@@ -25116,6 +25270,7 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
+    axisSelectionRef.current = { axis: "row", startRow: anchorRow, endRow: actualRow };
     commitSelectionRange(initialRange);
   }, [
     colPrefixSums,
@@ -27575,17 +27730,298 @@ 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;
     }
+    const nextRange = { start: { row: nextRow, col: nextCol }, end: { row: nextRow, col: nextCol } };
+    axisSelectionRef.current = null;
+    selectionPreviewRangeRef.current = null;
+    displayedSelectionRef.current = nextRange;
+    applyPreviewOverlay(nextRange);
     selectCell({ row: nextRow, col: nextCol }, extend ? { extend: true } : void 0);
+    ensureCellVisible(clampedRowIndex, clampedColIndex);
   }
+  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));
+  }
+  function resolveColumnSelectionNavigation(eventKey) {
+    const axisSelection = axisSelectionRef.current;
+    if (axisSelection?.axis !== "column" || firstVisibleRow === void 0) {
+      return null;
+    }
+    const startCol = Math.min(axisSelection.startCol, axisSelection.endCol);
+    const endCol = Math.max(axisSelection.startCol, axisSelection.endCol);
+    const targetCol = eventKey === "ArrowLeft" ? startCol - 1 : eventKey === "ArrowRight" ? endCol + 1 : null;
+    if (targetCol === null) {
+      return null;
+    }
+    const rowIndex = rowIndexByActual.get(firstVisibleRow);
+    const colIndex = colIndexByActual.get(targetCol);
+    if (rowIndex === void 0 || colIndex === void 0) {
+      return null;
+    }
+    return { colIndex, rowIndex };
+  }
+  function resolveRowSelectionNavigation(eventKey) {
+    const axisSelection = axisSelectionRef.current;
+    if (axisSelection?.axis !== "row" || firstVisibleCol === void 0) {
+      return null;
+    }
+    const startRow = Math.min(axisSelection.startRow, axisSelection.endRow);
+    const endRow = Math.max(axisSelection.startRow, axisSelection.endRow);
+    const targetRow = eventKey === "ArrowUp" ? startRow - 1 : eventKey === "ArrowDown" ? endRow + 1 : null;
+    if (targetRow === null) {
+      return null;
+    }
+    const rowIndex = rowIndexByActual.get(targetRow);
+    const colIndex = colIndexByActual.get(firstVisibleCol);
+    if (rowIndex === void 0 || colIndex === void 0) {
+      return null;
+    }
+    return { colIndex, rowIndex };
+  }
+  function handleGridKeyDown(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 (normalizedKey === "z") {
+        event.preventDefault();
+        undo();
+        return;
+      }
+      if (normalizedKey === "y") {
+        event.preventDefault();
+        redo();
+        return;
+      }
+    }
+    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();
+        if (!event.shiftKey && !isCommandNavigation) {
+          const target = resolveRowSelectionNavigation(event.key);
+          if (target) {
+            moveSelection(target.rowIndex, target.colIndex, false);
+            break;
+          }
+        }
+        moveSelection(
+          isCommandNavigation ? rowIndexByActual.get(resolveLastUsedVisibleIndex(visibleRows, activeSheet?.maxUsedRow ?? -1)) ?? visibleRows.length - 1 : currentRowIndex + 1,
+          currentColIndex,
+          event.shiftKey
+        );
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!event.shiftKey && !isCommandNavigation) {
+          const target = resolveRowSelectionNavigation(event.key);
+          if (target) {
+            moveSelection(target.rowIndex, target.colIndex, false);
+            break;
+          }
+        }
+        moveSelection(
+          isCommandNavigation ? rowIndexByActual.get(resolveFirstUsedVisibleIndex(visibleRows, activeSheet?.minUsedRow ?? -1)) ?? 0 : currentRowIndex - 1,
+          currentColIndex,
+          event.shiftKey
+        );
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        if (!event.shiftKey && !isCommandNavigation) {
+          const target = resolveColumnSelectionNavigation(event.key);
+          if (target) {
+            moveSelection(target.rowIndex, target.colIndex, false);
+            break;
+          }
+        }
+        moveSelection(
+          currentRowIndex,
+          isCommandNavigation ? colIndexByActual.get(resolveFirstUsedVisibleIndex(visibleCols, activeSheet?.minUsedCol ?? -1)) ?? 0 : currentColIndex - 1,
+          event.shiftKey
+        );
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (!event.shiftKey && !isCommandNavigation) {
+          const target = resolveColumnSelectionNavigation(event.key);
+          if (target) {
+            moveSelection(target.rowIndex, target.colIndex, false);
+            break;
+          }
+        }
+        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;
+        }
+        moveSelection(resolvePageRowIndex(currentRowIndex, 1), currentColIndex, event.shiftKey);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        if (event.altKey) {
+          moveSelection(currentRowIndex, resolvePageColIndex(currentColIndex, -1), event.shiftKey);
+          break;
+        }
+        moveSelection(resolvePageRowIndex(currentRowIndex, -1), currentColIndex, event.shiftKey);
+        break;
+      case "Tab":
+        event.preventDefault();
+        if (event.shiftKey) {
+          moveSelection(
+            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;
+        }
+        if (event.shiftKey) {
+          moveSelection(currentRowIndex - 1, currentColIndex, false);
+          break;
+        }
+        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;
+    }
+  }
+  gridKeyboardHandlerRef.current = handleGridKeyDown;
   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) {
@@ -27605,92 +28041,27 @@ function XlsxGrid({
       }
       void copySelectionToClipboard();
     },
-    onKeyDown: (event) => {
-      if (editingCell) {
+    onPointerDownCapture: (event) => {
+      if (event.button !== 0) {
         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 (isInteractiveFocusTarget(event.target, event.currentTarget)) {
         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);
+      gridKeyboardActiveRef.current = true;
+      focusGridElement(event.currentTarget);
+    },
+    onClickCapture: (event) => {
+      if (isInteractiveFocusTarget(event.target, event.currentTarget)) {
         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;
-          }
-          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;
-      }
+      gridKeyboardActiveRef.current = true;
+      focusGridElement(event.currentTarget);
+    },
+    onFocus: () => {
+      gridKeyboardActiveRef.current = true;
     },
+    onKeyDown: handleGridKeyDown,
     onPaste: (event) => {
       if (editingCell || readOnly) {
         return;
@@ -27940,7 +28311,7 @@ function XlsxGrid({
                       {
                         ref: editingInputRef,
                         autoFocus: true,
-                        onBlur: commitEditing,
+                        onBlur: handleEditingBlur,
                         onChange: (event) => setEditingValue(event.target.value),
                         onKeyDown: (event) => {
                           event.stopPropagation();
@@ -27952,6 +28323,11 @@ function XlsxGrid({
                           if (event.key === "Escape") {
                             event.preventDefault();
                             cancelEditing();
+                            return;
+                          }
+                          if (event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp") {
+                            event.preventDefault();
+                            handleEditingNavigate(event.key, event.currentTarget.value);
                           }
                         },
                         style: {
@@ -28106,8 +28482,10 @@ function XlsxGrid({
                             onCellClick: handleCellClick,
                             onCellDoubleClick: handleCellDoubleClick,
                             onCellPointerDown: handleCellPointerDown,
+                            onEditingBlur: handleEditingBlur,
                             onEditingCancel: cancelEditing,
                             onEditingCommit: commitEditing,
+                            onEditingNavigate: handleEditingNavigate,
                             onEditingValueChange: setEditingValue,
                             headerLabelLiveScale,
                             onRowHeaderRef: setRowHeaderRef,