@extend-ai/react-xlsx 0.10.1 → 0.10.2

package/dist/index.cjs

@@ -17376,13 +17376,16 @@ function rangesEqual(left, right) {
 function isPrintableKey(event) {
   return event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
 }
-function isInteractiveFocusTarget(target, container) {
+function getInteractiveFocusTarget(target) {
   if (!(target instanceof Element)) {
-    return false;
+    return null;
   }
-  const interactiveElement = target.closest(
+  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) {
@@ -21088,8 +21091,10 @@ function GridRow({
   onCellClick,
   onCellDoubleClick,
   onCellPointerDown,
+  onEditingBlur,
   onEditingCancel,
   onEditingCommit,
+  onEditingNavigate,
   onEditingValueChange,
   onRowHeaderRef,
   onRowPointerDown,
@@ -21375,7 +21380,7 @@ function GridRow({
               "input",
               {
                 autoFocus: true,
-                onBlur: onEditingCommit,
+                onBlur: onEditingBlur,
                 onChange: (event) => onEditingValueChange(event.target.value),
                 onKeyDown: (event) => {
                   event.stopPropagation();
@@ -21387,6 +21392,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: {
@@ -21462,7 +21472,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;
@@ -21563,6 +21573,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);
@@ -23204,9 +23217,50 @@ function XlsxGrid({
     selectionPreviewRangeRef.current = null;
     setInteractionMode("idle");
   }, [activeSheetIndex, clearGlobalCursor, revision]);
-  const focusGrid = React4.useCallback((options) => {
-    scrollRef.current?.focus(options);
+  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) {
@@ -23245,21 +23299,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]);
@@ -24232,6 +24339,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;
@@ -24525,6 +24633,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;
@@ -24643,6 +24768,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;
@@ -24718,6 +24844,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) => {
@@ -24749,6 +24876,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) => {
@@ -25005,6 +25133,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 });
@@ -25114,6 +25243,7 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
+    axisSelectionRef.current = { axis: "column", startCol: anchorCol, endCol: actualCol };
     commitSelectionRange(initialRange);
   }, [
     colIndexByActual,
@@ -25172,6 +25302,7 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
+    axisSelectionRef.current = { axis: "row", startRow: anchorRow, endRow: actualRow };
     commitSelectionRange(initialRange);
   }, [
     colPrefixSums,
@@ -27678,6 +27809,11 @@ function XlsxGrid({
     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);
   }
@@ -27701,6 +27837,214 @@ function XlsxGrid({
     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,
@@ -27736,153 +28080,20 @@ function XlsxGrid({
       if (isInteractiveFocusTarget(event.target, event.currentTarget)) {
         return;
       }
-      if (document.activeElement !== event.currentTarget) {
-        event.currentTarget.focus({ preventScroll: true });
-      }
+      gridKeyboardActiveRef.current = true;
+      focusGridElement(event.currentTarget);
     },
-    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 (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);
+    onClickCapture: (event) => {
+      if (isInteractiveFocusTarget(event.target, event.currentTarget)) {
         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;
-          }
-          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;
-      }
+      gridKeyboardActiveRef.current = true;
+      focusGridElement(event.currentTarget);
+    },
+    onFocus: () => {
+      gridKeyboardActiveRef.current = true;
     },
+    onKeyDown: handleGridKeyDown,
     onPaste: (event) => {
       if (editingCell || readOnly) {
         return;
@@ -28132,7 +28343,7 @@ function XlsxGrid({
                       {
                         ref: editingInputRef,
                         autoFocus: true,
-                        onBlur: commitEditing,
+                        onBlur: handleEditingBlur,
                         onChange: (event) => setEditingValue(event.target.value),
                         onKeyDown: (event) => {
                           event.stopPropagation();
@@ -28144,6 +28355,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: {
@@ -28298,8 +28514,10 @@ function XlsxGrid({
                             onCellClick: handleCellClick,
                             onCellDoubleClick: handleCellDoubleClick,
                             onCellPointerDown: handleCellPointerDown,
+                            onEditingBlur: handleEditingBlur,
                             onEditingCancel: cancelEditing,
                             onEditingCommit: commitEditing,
+                            onEditingNavigate: handleEditingNavigate,
                             onEditingValueChange: setEditingValue,
                             headerLabelLiveScale,
                             onRowHeaderRef: setRowHeaderRef,