@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-selection.js

@@ -0,0 +1,1559 @@
+import { findLastContentfulCell, isNull } from "@rowsncolumns/grid";
+import { cellToArea } from "@rowsncolumns/grid";
+import { useIsomorphicLayoutEffect } from "@rowsncolumns/grid";
+import { Align, cellIdentifier, cellRangeToBounds, clampCellCoords, clampIndex, Direction, findNextCellInDataRegion, findNextCellWithinBounds, getBoundedCells, isAreasEqual, isEqualCells, MouseButtonCodes, newSelectionFromDrag, selectionSpansCells, } from "@rowsncolumns/grid";
+import { useCallback, useReducer, useRef, useState } from "react";
+import { scheduleImmediatePriorityCallback, scheduleNormalPriorityCallback, } from "../api/scheduler";
+import { DEFAULT_ARRAY } from "../config";
+import { useCallbackRef } from "./use-callback-ref";
+const defaultIsHidden = () => false;
+const defaultSelectionSpan = () => true;
+const getPossibleActiveCellFromSelections = (selections) => {
+    if (!selections.length)
+        return null;
+    const { range } = selections[selections.length - 1];
+    return {
+        rowIndex: range.startRowIndex,
+        columnIndex: range.startColumnIndex,
+    };
+};
+const cellIndexInSelection = (cell, selections, selectionLeftBound, selectionTopBound) => {
+    const id = cellIdentifier(Math.max(selectionTopBound, cell.rowIndex), Math.max(selectionLeftBound, cell.columnIndex));
+    return selections.findIndex((sel) => {
+        const boundedCells = getBoundedCells(sel.range);
+        return boundedCells.has(id);
+    });
+};
+const cellEqualsSelection = (cell, selections) => {
+    if (cell === null)
+        return false;
+    return selections.some((sel) => {
+        return (sel.range.startColumnIndex === cell.columnIndex &&
+            sel.range.startRowIndex === cell.rowIndex &&
+            sel.range.endColumnIndex === cell.columnIndex &&
+            sel.range.endRowIndex === cell.rowIndex);
+    });
+};
+const boundsSubsetOfSelection = (range, selection) => {
+    return (range.startRowIndex >= selection.startRowIndex &&
+        range.endRowIndex <= selection.endRowIndex &&
+        range.startColumnIndex >= selection.startColumnIndex &&
+        range.endColumnIndex <= selection.endColumnIndex);
+};
+/**
+ * Hook to enable selection in datagrid
+ * @param initialSelection
+ */
+export const useSelection = ({ sheetId, activeCell, onChangeActiveCell, selections, onChangeSelections, columnCount = 0, rowCount = 0, selectionPolicy = "multiple", newSelectionMode = "clear", allowDeselectSelection = true, onFill, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, alwaysScrollToActiveCell = true, selectionTopBound = 0, selectionBottomBound = rowCount, selectionLeftBound = 0, selectionRightBound = columnCount, mouseDownInterceptor, mouseMoveInterceptor, mergedCells = DEFAULT_ARRAY, canSelectionSpanMergedCells = defaultSelectionSpan, getValue, onMoveSelection, getCellCoordsFromOffset, getCellBounds, getViewPort, focus, scrollToCell, isMergedCell, enableSelectOnEnterKey, formulaMode, isTouchDevice, getDataRowCount, isRowHeader, isColumnHeader, enableDataBoundaryNavigation = false, }) => {
+    const [fillSelection, setFillSelection] = useState();
+    const selectionStart = useRef(null);
+    const selectionEnd = useRef(null);
+    const isSelecting = useRef(false);
+    const isFilling = useRef(false);
+    const selectionsRef = useRef([]);
+    const fillSelectionRef = useRef(undefined);
+    const onChangeSelectionsRef = useCallbackRef(onChangeSelections);
+    /* Drag drop selection */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, forceRender] = useReducer((s) => s + 1, 0);
+    const isDragging = useRef(false);
+    const hasUserMovedSelection = useRef(false);
+    const initialDraggedSelection = useRef(undefined);
+    const initialDraggedCell = useRef(undefined);
+    const draggedSelection = useRef(undefined);
+    const draggedSelectionIndex = useRef(undefined);
+    /**
+     * Need to store in ref because on mousemove and mouseup event that are
+     * registered in document
+     */
+    const activeCellRef = useRef(activeCell);
+    const mergedCellsRef = useRef(mergedCells);
+    useIsomorphicLayoutEffect(() => {
+        activeCellRef.current = activeCell;
+    }, [activeCell]);
+    useIsomorphicLayoutEffect(() => {
+        mergedCellsRef.current = mergedCells;
+    }, [mergedCells]);
+    useIsomorphicLayoutEffect(() => {
+        selectionsRef.current = selections;
+    }, [selections]);
+    useIsomorphicLayoutEffect(() => {
+        fillSelectionRef.current = fillSelection;
+    }, [fillSelection]);
+    /* Check if cell is out of bounds */
+    const isCellOutOfBounds = useCallback((cell) => {
+        return cell.rowIndex < 0 || cell.columnIndex < 0;
+    }, []);
+    /**
+     * selection object from start, end
+     * @param start
+     * @param end
+     */
+    const selectionFromStartEnd = useCallback((start, end) => {
+        // Detect full row or column selection - don't expand to merged cells
+        // to prevent selecting adjacent rows/columns due to merged cells at edges
+        const isFullRowSelection = start.columnIndex === selectionLeftBound &&
+            end.columnIndex === selectionRightBound;
+        const isFullColumnSelection = start.rowIndex === selectionTopBound &&
+            end.rowIndex === selectionBottomBound;
+        const spanMerges = isFullRowSelection || isFullColumnSelection
+            ? false
+            : canSelectionSpanMergedCells?.(start, end);
+        return cellRangeToBounds(start, end, spanMerges, getCellBounds, selectionLeftBound, selectionTopBound);
+    }, [
+        canSelectionSpanMergedCells,
+        getCellBounds,
+        selectionLeftBound,
+        selectionTopBound,
+        selectionRightBound,
+        selectionBottomBound,
+    ]);
+    const clearSelections = useCallback(() => {
+        // Reset ref, so we dont have to wait for useEffect to fire
+        // selectionsRef.current.length = 0;
+        // Above code can mutate the selections array, hence removed
+        onChangeSelections?.(DEFAULT_ARRAY);
+    }, [onChangeSelections]);
+    /* Modify current selection */
+    const modifySelection = useCallback((coords, setInProgress) => {
+        if (selectionPolicy === "single" ||
+            !selectionStart.current ||
+            isCellOutOfBounds(coords)
+        // isEqualCells(selectionEnd.current, coords) // No idea why we have this.. Investigate
+        ) {
+            return;
+        }
+        selectionEnd.current = coords;
+        // If user is navigation to the same cell
+        // lets clear all selections
+        // Only if user
+        if (!formulaMode &&
+            selectionsRef.current.length <= 1 &&
+            isEqualCells(selectionStart.current, selectionEnd.current)) {
+            clearSelections();
+            return;
+        }
+        const range = selectionFromStartEnd(selectionStart.current, coords);
+        if (!range) {
+            return;
+        }
+        /**
+         * 1. Multiple selections on mousedown/mousemove
+         * 2. Move the activeCell to newly selection. Done by appendSelection
+         */
+        const curSelections = selectionsRef.current;
+        const len = curSelections.length;
+        const newSelections = len
+            ? curSelections.map((sel, i) => {
+                if (len - 1 === i) {
+                    return {
+                        ...sel,
+                        range,
+                        inProgress: setInProgress ? true : false,
+                    };
+                }
+                return sel;
+            })
+            : [
+                { range, inProgress: setInProgress ? true : false },
+            ];
+        // Update selections
+        onChangeSelections?.(newSelections);
+    }, [
+        onChangeSelections,
+        selectionFromStartEnd,
+        isCellOutOfBounds,
+        selectionPolicy,
+        formulaMode,
+        clearSelections,
+    ]);
+    /* Adds a new selection, CMD key */
+    const appendSelection = useCallback((start, end = start) => {
+        if (selectionPolicy !== "multiple" ||
+            !start ||
+            isCellOutOfBounds(start)) {
+            return;
+        }
+        selectionStart.current = start;
+        selectionEnd.current = end;
+        const range = selectionFromStartEnd(start, end);
+        if (!range) {
+            return;
+        }
+        onChangeActiveCell?.(sheetId, {
+            rowIndex: range.startRowIndex,
+            columnIndex: range.startColumnIndex,
+        });
+        const curSelections = selectionsRef.current;
+        const newSelections = [...curSelections, { range }];
+        onChangeSelections?.(newSelections);
+    }, [
+        sheetId,
+        onChangeSelections,
+        onChangeActiveCell,
+        selectionFromStartEnd,
+        isCellOutOfBounds,
+        selectionPolicy,
+    ]);
+    const removeSelectionByIndex = useCallback((index) => {
+        const newSelection = selections.filter((_, idx) => idx !== index);
+        onChangeSelections?.(newSelection);
+        return newSelection;
+    }, [selections, onChangeSelections]);
+    /* New selection */
+    const newSelection = useCallback((start, end = start) => {
+        /* Validate bounds */
+        if (isCellOutOfBounds(start)) {
+            return;
+        }
+        selectionStart.current = start;
+        selectionEnd.current = end;
+        const bounds = selectionFromStartEnd(start, end);
+        if (!bounds)
+            return;
+        const coords = {
+            rowIndex: bounds.startRowIndex,
+            columnIndex: bounds.startColumnIndex,
+        };
+        /* Keep track  of first cell that was selected by user */
+        onChangeActiveCell?.(sheetId, coords);
+        if (newSelectionMode === "clear") {
+            clearSelections();
+        }
+        else if (newSelectionMode === "modify") {
+            modifySelection(coords);
+        }
+        else {
+            appendSelection(coords);
+        }
+    }, [
+        sheetId,
+        modifySelection,
+        appendSelection,
+        newSelectionMode,
+        clearSelections,
+        onChangeActiveCell,
+        selectionFromStartEnd,
+        isCellOutOfBounds,
+    ]);
+    /**
+     * Mousemove handler
+     */
+    const handleMouseMove = useCallback((e) => {
+        /* Exit if user is not in selection mode */
+        if (!isSelecting.current) {
+            return;
+        }
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        if (mouseMoveInterceptor?.(e, coords, selectionStart, selectionEnd, modifySelection) === false) {
+            return;
+        }
+        if (isEqualCells(selectionEnd.current, coords)) {
+            return;
+        }
+        modifySelection(coords, true);
+        // Prevent a bug when setState is
+        // called repeatedly
+        scheduleNormalPriorityCallback(() => {
+            scrollToCell(coords);
+        });
+    }, [
+        modifySelection,
+        getCellCoordsFromOffset,
+        scrollToCell,
+        mouseMoveInterceptor,
+    ]);
+    /**
+     * Mouse up handler
+     */
+    const handleMouseUp = useCallback(() => {
+        /* Reset selection mode */
+        isSelecting.current = false;
+        /* Remove listener */
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        /* Update last selection */
+        const curSelections = selectionsRef.current;
+        const len = curSelections.length;
+        const anySelectonInProgress = curSelections.find((sel) => sel.inProgress);
+        const newSelections = !anySelectonInProgress
+            ? curSelections
+            : len
+                ? curSelections.map((sel, i) => {
+                    if (len - 1 === i && sel.inProgress !== false) {
+                        return {
+                            ...sel,
+                            inProgress: false,
+                        };
+                    }
+                    return sel;
+                })
+                : curSelections;
+        // Force render so isSelecting.current is propagated
+        forceRender();
+        // Focu grid
+        // This causes a bug where filter menu
+        // dropdown never shows up, since we trigger
+        // focus on the cell editor
+        // focus();
+        // Callback
+        const finishedSelection = true;
+        onChangeSelectionsRef?.(newSelections, finishedSelection);
+    }, [onChangeSelectionsRef, handleMouseMove]);
+    /**
+     * User modified active cell deliberately
+     */
+    const handleSetActiveCell = useCallbackRef(useCallback((sheetId, coords, shouldScroll = true, align) => {
+        selectionStart.current = coords;
+        selectionEnd.current = coords;
+        onChangeActiveCell?.(sheetId, coords);
+        /* Scroll to the cell */
+        if (shouldScroll && coords) {
+            scrollToCell(coords, align);
+        }
+    }, [onChangeActiveCell, scrollToCell]));
+    /**
+     * Navigate selection using keyboard
+     * @param direction
+     * @param modify
+     */
+    const keyNavigate = useCallback((direction, modify, metaKeyPressed) => {
+        if (!selectionStart.current || !selectionEnd.current) {
+            selectionStart.current = selectionEnd.current = activeCell;
+        }
+        const currentCell = modify
+            ? selectionEnd.current
+            : selectionStart.current ?? activeCell;
+        let { rowIndex, columnIndex } = currentCell;
+        const isMerged = isMergedCell({
+            rowIndex,
+            columnIndex,
+        });
+        const currentBounds = getCellBounds({
+            rowIndex,
+            columnIndex,
+        });
+        switch (direction) {
+            case Direction.Up:
+                if (isMerged)
+                    rowIndex = currentBounds.startRowIndex;
+                rowIndex = clampIndex(Math.max(rowIndex - 1, selectionTopBound), isHiddenRow, direction);
+                /**
+                 * If user hides column 1
+                 */
+                if (rowIndex < selectionTopBound) {
+                    rowIndex = clampIndex(selectionTopBound, isHiddenRow, Direction.Down);
+                }
+                // Shift + Ctrl/Commmand
+                // TODO: Scroll to last contentful cell
+                if (metaKeyPressed) {
+                    const startCell = {
+                        ...currentCell,
+                        // Expand from the starting cell
+                        columnIndex: selectionStart.current.columnIndex,
+                    };
+                    rowIndex = findNextCellInDataRegion(sheetId, startCell, getValue, isHiddenRow, direction, selectionTopBound);
+                }
+                break;
+            case Direction.Down:
+                if (isMerged)
+                    rowIndex = currentBounds.endRowIndex;
+                rowIndex = clampIndex(Math.min(rowIndex + 1, selectionBottomBound), isHiddenRow, direction);
+                // Shift + Ctrl/Commmand
+                if (metaKeyPressed) {
+                    let bottomBound = selectionBottomBound;
+                    // Data boundary
+                    if (enableDataBoundaryNavigation) {
+                        const dataRowCount = getDataRowCount?.(sheetId) ?? rowCount;
+                        bottomBound =
+                            rowIndex < dataRowCount
+                                ? Math.min(dataRowCount - 1, rowCount)
+                                : selectionBottomBound;
+                    }
+                    const startCell = {
+                        ...currentCell,
+                        // Expand from the starting cell
+                        columnIndex: selectionStart.current.columnIndex,
+                    };
+                    rowIndex = findNextCellInDataRegion(sheetId, startCell, getValue, isHiddenRow, direction, bottomBound);
+                }
+                break;
+            case Direction.Left:
+                if (isMerged)
+                    columnIndex = currentBounds.startColumnIndex;
+                columnIndex = clampIndex(Math.max(columnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
+                /**
+                 * If user hides column 1
+                 */
+                if (columnIndex < selectionLeftBound) {
+                    columnIndex = clampIndex(selectionLeftBound, isHiddenColumn, Direction.Right);
+                }
+                // Shift + Ctrl/Commmand
+                if (metaKeyPressed) {
+                    const startCell = {
+                        ...currentCell,
+                        // Expand from the starting cell
+                        rowIndex: selectionStart.current.rowIndex,
+                    };
+                    columnIndex = findNextCellInDataRegion(sheetId, startCell, getValue, isHiddenColumn, direction, selectionLeftBound);
+                }
+                break;
+            case Direction.Right:
+                if (isMerged)
+                    columnIndex = currentBounds.endColumnIndex;
+                columnIndex = clampIndex(Math.min(columnIndex + 1, selectionRightBound), isHiddenColumn, direction);
+                // Shift + Ctrl/Commmand
+                if (metaKeyPressed) {
+                    const startCell = {
+                        ...currentCell,
+                        // Expand from the starting cell
+                        rowIndex: selectionStart.current.rowIndex,
+                    };
+                    columnIndex = findNextCellInDataRegion(sheetId, startCell, getValue, isHiddenColumn, direction, selectionRightBound);
+                }
+                break;
+        }
+        const newBounds = getCellBounds({
+            rowIndex,
+            columnIndex,
+        });
+        const coords = {
+            rowIndex: newBounds.startRowIndex,
+            columnIndex: newBounds.startColumnIndex,
+        };
+        const nextCellToScrollTo = modify
+            ? selectionEnd.current.rowIndex === coords.rowIndex
+                ? // Scroll to a column
+                    { columnIndex: coords.columnIndex }
+                : // Scroll to row
+                    { rowIndex: coords.rowIndex }
+            : // Scroll to cell
+                { rowIndex, columnIndex };
+        if (modify) {
+            modifySelection(coords);
+        }
+        else {
+            newSelection(coords);
+        }
+        /* Keep the item in view */
+        scrollToCell(nextCellToScrollTo);
+    }, [
+        sheetId,
+        activeCell,
+        rowCount,
+        getValue,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionLeftBound,
+        selectionTopBound,
+        getCellBounds,
+        scrollToCell,
+        modifySelection,
+        newSelection,
+        selectionBottomBound,
+        selectionRightBound,
+        isMergedCell,
+        getDataRowCount,
+        enableDataBoundaryNavigation,
+    ]);
+    // Find contentful cell
+    const findLastContentfulCellInDirection = useCallback((sheetId, startCell, endCell, direction) => {
+        const isSingleBound = isEqualCells(startCell, endCell);
+        const isVertical = direction === Direction.Up || direction === Direction.Down;
+        const cell = direction === Direction.Up || direction === Direction.Left
+            ? startCell
+            : endCell;
+        const isHidden = isVertical ? isHiddenRow : isHiddenColumn;
+        const limit = direction === Direction.Up
+            ? selectionTopBound
+            : direction === Direction.Down
+                ? selectionBottomBound
+                : direction === Direction.Left
+                    ? selectionLeftBound
+                    : selectionRightBound;
+        const key = isVertical ? "rowIndex" : "columnIndex";
+        const startIndex = findLastContentfulCell(sheetId, startCell, getValue, isHidden, direction, limit)[key];
+        const endIndex = isSingleBound
+            ? startIndex
+            : findLastContentfulCell(sheetId, endCell, getValue, isHidden, direction, limit)[key];
+        const boundedCellIndex = direction === Direction.Up || direction === Direction.Left
+            ? Math.min(startIndex, endIndex)
+            : Math.max(startIndex, endIndex);
+        if (!isSingleBound && cell?.[key] === boundedCellIndex) {
+            return limit;
+        }
+        return boundedCellIndex;
+    }, [
+        getValue,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionTopBound,
+        selectionBottomBound,
+        selectionLeftBound,
+        selectionRightBound,
+    ]);
+    // ⌘A or ⌘+Shift+Space
+    // Select all cells in bounding area
+    const selectAllBoundedCells = useCallback(() => {
+        if (!selectionEnd.current || !selectionStart.current) {
+            return;
+        }
+        let topBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Up);
+        let bottomBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Down);
+        let leftBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Left);
+        let rightBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Right);
+        const isSameHorizontalBounds = leftBound === rightBound;
+        const isSameVerticalBounds = topBound === bottomBound;
+        if (isSameHorizontalBounds) {
+            leftBound = selectionLeftBound;
+            rightBound = selectionRightBound;
+        }
+        if (isSameVerticalBounds) {
+            topBound = selectionTopBound;
+            bottomBound = selectionBottomBound;
+        }
+        selectionStart.current = {
+            rowIndex: topBound,
+            columnIndex: leftBound,
+        };
+        modifySelection({
+            rowIndex: bottomBound,
+            columnIndex: rightBound,
+        });
+    }, [
+        modifySelection,
+        findLastContentfulCellInDirection,
+        sheetId,
+        selectionBottomBound,
+        selectionTopBound,
+        selectionLeftBound,
+        selectionRightBound,
+    ]);
+    // Select all
+    const selectAll = useCallback(() => {
+        selectionStart.current = {
+            rowIndex: selectionTopBound,
+            columnIndex: selectionLeftBound,
+        };
+        modifySelection({
+            rowIndex: selectionBottomBound,
+            columnIndex: selectionRightBound,
+        });
+    }, [
+        selectionTopBound,
+        selectionLeftBound,
+        selectionRightBound,
+        selectionBottomBound,
+        modifySelection,
+    ]);
+    // Ctrl+Space
+    const selectColumn = useCallback((columnIndex) => {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            columnIndex === void 0)
+            return;
+        let topBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Up);
+        let bottomBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Down);
+        const isSameVerticalBounds = topBound === bottomBound;
+        if (isSameVerticalBounds) {
+            topBound = selectionTopBound;
+            bottomBound = selectionBottomBound;
+        }
+        selectionStart.current = {
+            ...selectionStart.current,
+            rowIndex: Math.max(selectionTopBound, topBound),
+        };
+        modifySelection({
+            ...selectionEnd.current,
+            rowIndex: bottomBound,
+        });
+    }, [
+        findLastContentfulCellInDirection,
+        modifySelection,
+        sheetId,
+        selectionTopBound,
+        selectionBottomBound,
+    ]);
+    // Select entire column
+    const selectEntireColumn = useCallback((columnIndex) => {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            columnIndex === void 0)
+            return;
+        selectionStart.current = {
+            ...selectionStart.current,
+            rowIndex: selectionTopBound,
+        };
+        modifySelection({
+            ...selectionEnd.current,
+            rowIndex: selectionBottomBound,
+        });
+    }, [modifySelection, selectionBottomBound, selectionTopBound]);
+    // Shift+Space
+    const selectRow = useCallback((rowIndex) => {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            rowIndex === void 0) {
+            return;
+        }
+        let leftBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Left);
+        let rightBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, Direction.Right);
+        const isSameHorizontalBounds = leftBound === rightBound;
+        if (isSameHorizontalBounds) {
+            leftBound = selectionLeftBound;
+            rightBound = selectionRightBound;
+        }
+        selectionStart.current = {
+            ...selectionStart.current,
+            columnIndex: leftBound,
+        };
+        modifySelection({
+            ...selectionEnd.current,
+            columnIndex: rightBound,
+        });
+    }, [
+        findLastContentfulCellInDirection,
+        modifySelection,
+        sheetId,
+        selectionRightBound,
+        selectionLeftBound,
+    ]);
+    //  Home
+    const selectFirstCellInRow = useCallback(() => {
+        if (!selectionStart.current)
+            return;
+        const cell = {
+            rowIndex: selectionStart.current.rowIndex,
+            columnIndex: selectionLeftBound,
+        };
+        newSelection(cell);
+        scrollToCell(cell);
+    }, [scrollToCell, newSelection, selectionLeftBound]);
+    //  End
+    const selectLastCellInRow = useCallback(() => {
+        if (!selectionStart.current)
+            return;
+        const cell = {
+            rowIndex: selectionStart.current.rowIndex,
+            columnIndex: selectionRightBound,
+        };
+        newSelection(cell);
+        scrollToCell(cell);
+    }, [scrollToCell, newSelection, selectionRightBound]);
+    //  ⌘+Home
+    // const selectFirstCellInColumn = useCallback(() => {
+    //   if (!selectionStart.current) return;
+    //   const cell = {
+    //     rowIndex: selectionTopBound,
+    //     columnIndex: selectionStart.current.columnIndex,
+    //   };
+    //   newSelection(cell);
+    //   scrollToCell(cell);
+    // }, [scrollToCell, newSelection, selectionTopBound]);
+    //  fn+⌘+Home
+    const selectFirstCellInSheet = useCallback(() => {
+        if (!selectionStart.current)
+            return;
+        const cell = {
+            rowIndex: selectionTopBound,
+            columnIndex: selectionLeftBound,
+        };
+        newSelection(cell);
+        scrollToCell(cell);
+    }, [scrollToCell, newSelection, selectionTopBound, selectionLeftBound]);
+    //  fn+⌘+End
+    const selectLastCellInSheet = useCallback(() => {
+        if (!selectionStart.current)
+            return;
+        const cell = {
+            rowIndex: selectionBottomBound,
+            columnIndex: selectionRightBound,
+        };
+        newSelection(cell);
+        scrollToCell(cell);
+    }, [scrollToCell, newSelection, selectionBottomBound, selectionRightBound]);
+    //  ⌘+End
+    // const selectLastCellInColumn = useCallback(() => {
+    //   if (!selectionStart.current) return;
+    //   const cell = {
+    //     rowIndex: rowCount,
+    //     columnIndex: selectionStart.current.columnIndex,
+    //   };
+    //   newSelection(cell);
+    //   scrollToCell(cell);
+    // }, [scrollToCell, newSelection, rowCount]);
+    //  ⌘+Backspace
+    const scrollToActiveCell = useCallback(() => {
+        if (!activeCell)
+            return;
+        scrollToCell(activeCell, Align.smart);
+    }, [scrollToCell, activeCell]);
+    // Page down
+    const pageDown = useCallback(() => {
+        if (!activeCell)
+            return;
+        const { visibleRowStartIndex, visibleRowStopIndex } = getViewPort();
+        const pageSize = visibleRowStopIndex - visibleRowStartIndex;
+        const rowIndex = Math.min(activeCell.rowIndex + pageSize, rowCount);
+        const newActiveCell = {
+            rowIndex,
+            columnIndex: activeCell.columnIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ rowIndex }, Align.end);
+    }, [
+        getViewPort,
+        scrollToCell,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        rowCount,
+    ]);
+    // Page up
+    const pageUp = useCallback(() => {
+        if (!activeCell)
+            return;
+        const { visibleRowStartIndex, visibleRowStopIndex } = getViewPort();
+        const pageSize = visibleRowStopIndex - visibleRowStartIndex;
+        const rowIndex = Math.max(activeCell.rowIndex - pageSize, selectionTopBound);
+        const newActiveCell = {
+            rowIndex,
+            columnIndex: activeCell.columnIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ rowIndex }, Align.end);
+    }, [
+        scrollToCell,
+        getViewPort,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        selectionTopBound,
+    ]);
+    // Page right
+    const pageRight = useCallback(() => {
+        if (!activeCell)
+            return;
+        const { visibleColumnStartIndex, visibleColumnStopIndex } = getViewPort();
+        const pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
+        const columnIndex = Math.min(activeCell.columnIndex + pageSize, selectionRightBound);
+        const newActiveCell = {
+            columnIndex,
+            rowIndex: activeCell.rowIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ columnIndex }, Align.end);
+    }, [
+        scrollToCell,
+        getViewPort,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        selectionRightBound,
+    ]);
+    // Page left
+    const pageLeft = useCallback(() => {
+        if (!activeCell)
+            return;
+        const { visibleColumnStartIndex, visibleColumnStopIndex } = getViewPort();
+        const pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
+        const columnIndex = Math.max(activeCell.columnIndex - pageSize, selectionLeftBound);
+        const newActiveCell = {
+            columnIndex,
+            rowIndex: activeCell.rowIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ columnIndex }, Align.end);
+    }, [
+        scrollToCell,
+        getViewPort,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        selectionLeftBound,
+    ]);
+    /**
+     * Triggers a new selection start
+     */
+    const handleMouseDown = useCallback((e) => {
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, true);
+        if (!coords)
+            return;
+        /* Check if its context menu click */
+        const isContextMenuClick = e.button === MouseButtonCodes.right ||
+            (e.button == MouseButtonCodes.left && e.ctrlKey);
+        if (isContextMenuClick &&
+            !isRowHeader(coords.columnIndex) &&
+            !isColumnHeader(coords.rowIndex)) {
+            const cellIndex = cellIndexInSelection(coords, selections, selectionLeftBound, selectionTopBound);
+            if (cellIndex !== -1)
+                return;
+        }
+        const isCtrlKey = e.ctrlKey;
+        const isShiftKey = e.shiftKey;
+        const isMetaKey = e.metaKey || isCtrlKey;
+        const allowMultiple = isMetaKey;
+        const allowDeselect = allowDeselectSelection;
+        const hasSelections = selectionsRef.current.length > 0;
+        const isDeselecting = isMetaKey && allowDeselect;
+        if (!isContextMenuClick && selectionPolicy !== "single") {
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("mousemove", handleMouseMove);
+        }
+        /* Activate selection mode */
+        // Disable flag for context menu
+        if (!isContextMenuClick) {
+            isSelecting.current = true;
+        }
+        if (mouseDownInterceptor?.(e, coords, selectionStart, selectionEnd, modifySelection, appendSelection, clearSelections, selectAll) === false) {
+            return;
+        }
+        /* Shift key */
+        if (isShiftKey) {
+            modifySelection(coords);
+            return;
+        }
+        /* Is the current cell same as active cell */
+        const isSameAsActiveCell = isEqualCells(coords, activeCell);
+        /* Command  or Control key */
+        if (activeCell && allowMultiple) {
+            /**
+             * User is adding activeCell to selection
+             *
+             * 1. User is selecting and not de-selecting
+             * 2. User has not made any selection
+             * 3. Trying to add active cell to selection
+             */
+            if (isSameAsActiveCell && (!isDeselecting || !hasSelections)) {
+                return;
+            }
+            /**
+             * User is manually trying to select multiple selections,
+             * So add the current active cell to the list
+             */
+            if (isMetaKey && !hasSelections && !formulaMode) {
+                appendSelection(activeCell);
+            }
+            /**
+             * Check if this cell has already been selected (only for manual deselect)
+             * Remove it from selection
+             *
+             * Future enhancements -> Split selection, so that 1 cell can be removed from range
+             */
+            if (isMetaKey && allowDeselect) {
+                const cellIndex = cellIndexInSelection(coords, selections, selectionLeftBound, selectionTopBound);
+                if (cellIndex !== -1) {
+                    const newSelection = removeSelectionByIndex(cellIndex);
+                    const nextActiveCell = getPossibleActiveCellFromSelections(newSelection);
+                    if (nextActiveCell !== null) {
+                        onChangeActiveCell?.(sheetId, nextActiveCell);
+                    }
+                    if (newSelection.length === 1 &&
+                        cellEqualsSelection(nextActiveCell, newSelection)) {
+                        /* Since we only have 1 cell, lets clear the selections and only keep activeCell */
+                        clearSelections();
+                    }
+                    return;
+                }
+            }
+            /**
+             * TODO
+             * 1. Ability to remove selection
+             * 2. Ability to remove from selection area
+             * 3. Ability to switch activeCell if its part of removed selection
+             */
+            /**
+             * Multiple calls to appendSelection causes
+             * stale state issues, since we dont use a
+             * state(prev => newState) approach anymore
+             *
+             * Scheduling is required
+             */
+            scheduleImmediatePriorityCallback(() => {
+                appendSelection(coords);
+            });
+            return;
+        }
+        /* Trigger new selection */
+        /**
+         * Scroll to the selected cell
+         */
+        if (alwaysScrollToActiveCell) {
+            scrollToCell(coords);
+        }
+        /* Create a new selection */
+        newSelection(coords);
+    }, [
+        sheetId,
+        activeCell,
+        selections,
+        selectionPolicy,
+        allowDeselectSelection,
+        alwaysScrollToActiveCell,
+        isRowHeader,
+        isColumnHeader,
+        appendSelection,
+        clearSelections,
+        handleMouseMove,
+        handleMouseUp,
+        modifySelection,
+        mouseDownInterceptor,
+        newSelection,
+        onChangeActiveCell,
+        removeSelectionByIndex,
+        selectionLeftBound,
+        selectionTopBound,
+        getCellCoordsFromOffset,
+        scrollToCell,
+        selectAll,
+        formulaMode,
+    ]);
+    // Keydown handler
+    const handleKeyDown = useCallback((e) => {
+        const nativeEvent = "nativeEvent" in e ? e.nativeEvent : e;
+        const isShiftKey = nativeEvent.shiftKey;
+        const isAltKey = nativeEvent.altKey;
+        const isMetaKey = nativeEvent.ctrlKey || nativeEvent.metaKey;
+        // TODO ctrl + space
+        // Ignore alt
+        if (isAltKey) {
+            return;
+        }
+        switch (nativeEvent.key) {
+            case "ArrowRight":
+                keyNavigate(Direction.Right, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            case "ArrowLeft":
+                keyNavigate(Direction.Left, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            // Up
+            case "ArrowUp":
+                keyNavigate(Direction.Up, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            case "ArrowDown":
+                keyNavigate(Direction.Down, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            case "a":
+                if (isMetaKey) {
+                    selectAllBoundedCells();
+                    e.preventDefault();
+                }
+                break;
+            case "Home":
+                if (isMetaKey) {
+                    selectFirstCellInSheet();
+                }
+                else {
+                    selectFirstCellInRow();
+                }
+                break;
+            case "End":
+                if (isMetaKey) {
+                    selectLastCellInSheet();
+                }
+                else {
+                    selectLastCellInRow();
+                }
+                break;
+            case "Backspace":
+                if (isMetaKey)
+                    scrollToActiveCell();
+                break;
+            case " ":
+                if (isMetaKey && isShiftKey) {
+                    selectAllBoundedCells();
+                }
+                else if (isMetaKey) {
+                    selectColumn(selectionEnd.current?.columnIndex);
+                }
+                else if (isShiftKey) {
+                    selectRow(selectionEnd.current?.rowIndex);
+                }
+                break;
+            // Add support for cycling multiple selections
+            case "Enter":
+                if (selections.length && activeCell) {
+                    const { range } = selections[selections.length - 1];
+                    const activeCellBounds = getCellBounds(activeCell);
+                    const direction = isShiftKey ? Direction.Up : Direction.Down;
+                    const nextCell = findNextCellWithinBounds(activeCellBounds, range, direction);
+                    if (nextCell) {
+                        onChangeActiveCell?.(sheetId, nextCell);
+                        scrollToCell(nextCell);
+                    }
+                }
+                else if (enableSelectOnEnterKey) {
+                    if (isShiftKey) {
+                        keyNavigate(Direction.Up);
+                    }
+                    else {
+                        keyNavigate(Direction.Down);
+                    }
+                }
+                break;
+            case "Tab":
+                /* Cycle through the selections if selections.length > 0 */
+                if (selections.length && activeCell) {
+                    const { range } = selections[selections.length - 1];
+                    const activeCellBounds = getCellBounds(activeCell);
+                    const direction = isShiftKey ? Direction.Left : Direction.Right;
+                    const nextCell = findNextCellWithinBounds(activeCellBounds, range, direction);
+                    if (nextCell) {
+                        onChangeActiveCell?.(sheetId, nextCell);
+                        scrollToCell(nextCell);
+                    }
+                }
+                else {
+                    if (isShiftKey) {
+                        keyNavigate(Direction.Left);
+                    }
+                    else {
+                        keyNavigate(Direction.Right);
+                    }
+                }
+                e.preventDefault();
+                break;
+            case "PageDown":
+                // Ctrl + PageDown => Select next sheet
+                if (!isMetaKey) {
+                    if (isAltKey) {
+                        pageRight();
+                    }
+                    else
+                        pageDown();
+                }
+                break;
+            case "PageUp":
+                // Ctrl + PageDown => Select previous sheet
+                if (!isMetaKey) {
+                    if (isAltKey) {
+                        pageLeft();
+                    }
+                    else
+                        pageUp();
+                }
+                break;
+        }
+    }, [
+        sheetId,
+        activeCell,
+        selections,
+        keyNavigate,
+        onChangeActiveCell,
+        pageDown,
+        pageLeft,
+        pageRight,
+        pageUp,
+        scrollToActiveCell,
+        selectAllBoundedCells,
+        selectColumn,
+        selectLastCellInRow,
+        selectRow,
+        selectFirstCellInRow,
+        getCellBounds,
+        scrollToCell,
+        selectFirstCellInSheet,
+        selectLastCellInSheet,
+        enableSelectOnEnterKey,
+    ]);
+    /**
+     * TODO
+     * 1. Fill does not extend to merged cells
+     */
+    const handleFillMouseMove = useCallback((e) => {
+        /* Exit if user is not in selection mode */
+        if (!isFilling.current || !activeCellRef.current)
+            return;
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords)
+            return;
+        const selections = selectionsRef.current;
+        let range = selectionFromStartEnd(activeCellRef.current, coords);
+        const hasSelections = selections.length > 0;
+        const activeCellBounds = hasSelections
+            ? selections[selections.length - 1].range
+            : getCellBounds(activeCellRef.current);
+        if (!range)
+            return;
+        const direction = range.startRowIndex < activeCellBounds.startRowIndex
+            ? Direction.Up
+            : range.endRowIndex > activeCellBounds.endRowIndex
+                ? Direction.Down
+                : range.endColumnIndex > activeCellBounds.endColumnIndex
+                    ? Direction.Right
+                    : Direction.Left;
+        if (direction === Direction.Right) {
+            range = {
+                ...activeCellBounds,
+                endColumnIndex: Math.min(selectionRightBound, range.endColumnIndex),
+            };
+        }
+        if (direction === Direction.Up) {
+            range = {
+                ...activeCellBounds,
+                startRowIndex: Math.max(selectionTopBound, range.startRowIndex),
+            };
+        }
+        if (direction === Direction.Left) {
+            range = {
+                ...activeCellBounds,
+                startColumnIndex: Math.max(selectionLeftBound, range.startColumnIndex),
+            };
+        }
+        if (direction === Direction.Down) {
+            range = {
+                ...activeCellBounds,
+                endRowIndex: Math.min(selectionBottomBound, range.endRowIndex),
+            };
+        }
+        /**
+         * If user moves back to the same selection, clear
+         */
+        if (hasSelections &&
+            boundsSubsetOfSelection(range, selections[0].range)) {
+            setFillSelection(undefined);
+            return;
+        }
+        const newFillSelection = { range };
+        setFillSelection(newFillSelection);
+        scrollToCell(coords);
+    }, [
+        getCellCoordsFromOffset,
+        scrollToCell,
+        getCellBounds,
+        selectionBottomBound,
+        selectionFromStartEnd,
+        selectionLeftBound,
+        selectionRightBound,
+        selectionTopBound,
+    ]);
+    /**
+     * When user releases mouse on the fill handle
+     */
+    const handleFillMouseUp = useCallback(() => {
+        isFilling.current = false;
+        /* Remove listener */
+        document.removeEventListener("mousemove", handleFillMouseMove);
+        document.removeEventListener("mouseup", handleFillMouseUp);
+        /* Exit early */
+        if (!activeCellRef.current) {
+            return;
+        }
+        // Active fill selection
+        const fillSelection = fillSelectionRef.current;
+        /* Update last selection */
+        setFillSelection(undefined);
+        /* Use ref, as we are binding to document */
+        const selections = selectionsRef.current;
+        const activeCell = activeCellRef.current;
+        if (!activeCell || !fillSelection) {
+            return;
+        }
+        const newBounds = fillSelection.range;
+        if (!newBounds ||
+            // If the new selection is same as activecell, ignore, since
+            // user has not any action
+            isAreasEqual(cellToArea(activeCellRef.current), newBounds)) {
+            return;
+        }
+        /* Focus on the grid */
+        focus();
+        /* Callback */
+        onFill?.(sheetId, activeCell, fillSelection, selections);
+        /* Modify last selection */
+        const curSelections = selectionsRef.current;
+        const len = curSelections.length;
+        const newSelections = len
+            ? curSelections.map((sel, i) => {
+                if (len - 1 === i) {
+                    return {
+                        ...sel,
+                        range: newBounds,
+                    };
+                }
+                return sel;
+            })
+            : [{ range: newBounds }];
+        onChangeSelections?.(newSelections);
+    }, [focus, handleFillMouseMove, onChangeSelections, onFill, sheetId]);
+    const handleFillMouseDown = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        isFilling.current = true;
+        document.addEventListener("mousemove", handleFillMouseMove);
+        document.addEventListener("mouseup", handleFillMouseUp);
+    }, [handleFillMouseMove, handleFillMouseUp]);
+    /**
+     * Remove the last selection from state
+     */
+    const handleClearLastSelection = useCallback(() => {
+        const curSelections = selectionsRef.current;
+        onChangeSelections?.(curSelections.slice(0, -1));
+    }, [onChangeSelections]);
+    /**
+     * Ond drag move
+     */
+    const handleSelectionMouseMove = useCallback((e) => {
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        if (!initialDraggedSelection.current || !initialDraggedCell.current) {
+            return;
+        }
+        /**
+         * Skip if user is moving the selection
+         * to the same starting position
+         */
+        if (!hasUserMovedSelection.current &&
+            isEqualCells(initialDraggedCell.current, coords)) {
+            return;
+        }
+        const sel = newSelectionFromDrag(initialDraggedSelection.current, initialDraggedCell.current, coords, selectionTopBound, selectionLeftBound, rowCount, columnCount);
+        if (isAreasEqual(draggedSelection.current?.range, sel.range)) {
+            return;
+        }
+        // Not required
+        // sel = { bounds : extendAreaToMergedCells(sel.bounds, mergedCellsRef.current) }
+        draggedSelection.current = sel;
+        // User has now moved the selection,
+        hasUserMovedSelection.current = true;
+        /* Scroll to the cell */
+        scrollToCell(coords);
+        /* Re-render */
+        forceRender();
+    }, [
+        rowCount,
+        columnCount,
+        getCellCoordsFromOffset,
+        scrollToCell,
+        selectionLeftBound,
+        selectionTopBound,
+    ]);
+    /**
+     * When drag/drop is complete
+     */
+    const handleSelectionMouseUp = useCallback(() => {
+        const fromSelection = initialDraggedSelection.current;
+        const toSelection = draggedSelection.current;
+        /**
+         * If the from and to selection area
+         */
+        if (toSelection &&
+            fromSelection &&
+            !isAreasEqual(toSelection.range, fromSelection.range)) {
+            /* Select the first cell in the selection area */
+            const coords = {
+                rowIndex: toSelection.range.startRowIndex,
+                columnIndex: toSelection.range.startColumnIndex,
+            };
+            /* Pick the first cell as activee cell */
+            onChangeActiveCell?.(sheetId, coords);
+            /* Update selection start */
+            selectionStart.current = coords;
+            if (selectionSpansCells(toSelection?.range)) {
+                const curSelections = selectionsRef.current;
+                const newSelections = curSelections.map((cur, index) => {
+                    if (index === draggedSelectionIndex.current) {
+                        return toSelection;
+                    }
+                    return cur;
+                });
+                onChangeSelections?.(newSelections);
+                /* Update selection end */
+                selectionEnd.current = {
+                    rowIndex: toSelection.range.endRowIndex,
+                    columnIndex: toSelection.range.endColumnIndex,
+                };
+            }
+        }
+        // Callback
+        if (fromSelection &&
+            toSelection &&
+            !isAreasEqual(fromSelection.range, toSelection.range)) {
+            onMoveSelection?.(sheetId, fromSelection, toSelection);
+        }
+        /* Focus on the grid */
+        focus();
+        /* Reset all references */
+        isDragging.current = false;
+        draggedSelection.current = void 0;
+        draggedSelectionIndex.current = void 0;
+        hasUserMovedSelection.current = false;
+        /* Remove event handlers */
+        document.removeEventListener("mouseup", handleSelectionMouseUp);
+        document.removeEventListener("mousemove", handleSelectionMouseMove);
+        /* Force render */
+        forceRender();
+    }, [
+        sheetId,
+        onMoveSelection,
+        handleSelectionMouseMove,
+        focus,
+        onChangeActiveCell,
+        onChangeSelections,
+    ]);
+    /**
+     * When user mouse downs on selection
+     */
+    const handleSelectionMouseDown = useCallback((e, activeCell, selection, index, shouldClamp = true) => {
+        if (e.isDefaultPrevented()) {
+            return;
+        }
+        const isContextMenu = e.button === MouseButtonCodes.right || e.ctrlKey;
+        if (isContextMenu) {
+            return;
+        }
+        let coords = getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY, false);
+        if (!coords) {
+            return;
+        }
+        /* Initial cell that is selected by user */
+        initialDraggedCell.current = coords;
+        /* Make sure the coords do not extend selection bounds */
+        if (shouldClamp) {
+            coords = clampCellCoords(coords, activeCell, selection);
+        }
+        /* Set selection */
+        if (activeCell) {
+            initialDraggedSelection.current = draggedSelection.current = {
+                range: getCellBounds(activeCell),
+            };
+        }
+        if (selection) {
+            initialDraggedSelection.current = draggedSelection.current =
+                selection;
+            draggedSelectionIndex.current = index;
+        }
+        /* Set dragging flag */
+        isDragging.current = true;
+        /* Listen to mousemove and mousedown events */
+        document.addEventListener("mouseup", handleSelectionMouseUp);
+        document.addEventListener("mousemove", handleSelectionMouseMove);
+        /* Force a re-render */
+        forceRender();
+    }, [
+        getCellCoordsFromOffset,
+        getCellBounds,
+        handleSelectionMouseMove,
+        handleSelectionMouseUp,
+    ]);
+    /**
+     * Set selection start and end reference
+     */
+    const updateSelectionStartEndReference = useCallback((cell, selections) => {
+        const lastSelection = selections?.[selections.length - 1];
+        if (lastSelection) {
+            selectionStart.current = {
+                rowIndex: lastSelection.range.startRowIndex,
+                columnIndex: lastSelection.range.startColumnIndex,
+            };
+            selectionEnd.current = {
+                rowIndex: lastSelection.range.endRowIndex,
+                columnIndex: lastSelection.range.endColumnIndex,
+            };
+        }
+        else if (cell) {
+            selectionStart.current = cell;
+            selectionEnd.current = cell;
+        }
+    }, []);
+    /**
+     * Find contentful in an area
+     */
+    const findLastContentfulIndex = useCallback((sheetId, startCell, direction) => {
+        const isVertical = direction === Direction.Up || direction === Direction.Down;
+        const hiddenFn = isVertical ? isHiddenRow : isHiddenColumn;
+        const selectionBound = direction === Direction.Up
+            ? selectionTopBound
+            : direction === Direction.Down
+                ? selectionBottomBound
+                : direction === Direction.Left
+                    ? selectionLeftBound
+                    : selectionRightBound;
+        const nextCell = direction === Direction.Up
+            ? { ...startCell, rowIndex: startCell.rowIndex - 1 }
+            : direction === Direction.Down
+                ? { ...startCell, rowIndex: startCell.rowIndex + 1 }
+                : direction === Direction.Left
+                    ? { ...startCell, columnIndex: startCell.columnIndex - 1 }
+                    : { ...startCell, columnIndex: startCell.columnIndex + 1 };
+        if (isNull(getValue(sheetId, nextCell.rowIndex, nextCell.columnIndex))) {
+            return;
+        }
+        return findNextCellInDataRegion(sheetId, startCell, getValue, hiddenFn, direction, selectionBound);
+    }, [
+        getValue,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionBottomBound,
+        selectionRightBound,
+        selectionTopBound,
+        selectionLeftBound,
+    ]);
+    const getContentfulGridRangeAroundCell = useCallbackRef(useCallback((sheetId, startCell) => {
+        return {
+            startRowIndex: findLastContentfulIndex(sheetId, startCell, Direction.Up) ??
+                startCell.rowIndex,
+            endRowIndex: findLastContentfulIndex(sheetId, startCell, Direction.Down) ??
+                startCell.rowIndex,
+            startColumnIndex: findLastContentfulIndex(sheetId, startCell, Direction.Left) ??
+                startCell.columnIndex,
+            endColumnIndex: findLastContentfulIndex(sheetId, startCell, Direction.Right) ??
+                startCell.columnIndex,
+        };
+    }, [findLastContentfulIndex]));
+    // Pointer down
+    const startTimeRef = useRef(0);
+    const startPosRef = useRef({ x: 0, y: 0 });
+    const onPointerUp = useCallback((event) => {
+        const endTime = Date.now();
+        const maxDuration = 200;
+        const maxDistance = 10;
+        const { clientX, clientY } = event;
+        const timeDiff = endTime - startTimeRef.current;
+        const distanceDiff = Math.sqrt(Math.pow(clientX - startPosRef.current.x, 2) +
+            Math.pow(clientY - startPosRef.current.y, 2));
+        if (timeDiff <= maxDuration && distanceDiff <= maxDistance) {
+            handleMouseDown(event);
+            handleMouseUp();
+        }
+        document.removeEventListener("pointerup", onPointerUp);
+    }, [handleMouseDown, handleMouseUp]);
+    const onPointerDown = useCallback((event) => {
+        startTimeRef.current = Date.now();
+        startPosRef.current = { x: event.clientX, y: event.clientY };
+        document.addEventListener("pointerup", onPointerUp);
+    }, [onPointerUp]);
+    // Add a ref. makeEditable renders way too often
+    const handleKeyDownRef = useCallbackRef(handleKeyDown);
+    /**
+     * Double-click fill handle - Excel standard behavior:
+     * 1. Look at adjacent column (left first, then right if empty)
+     * 2. Find last row with contiguous data in that column
+     * 3. Fill down to match that extent
+     */
+    const handleFillDoubleClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const activeCell = activeCellRef.current;
+        if (!activeCell)
+            return;
+        const selections = selectionsRef.current;
+        const hasSelections = selections.length > 0;
+        // Get the current selection bounds or active cell bounds
+        const currentBounds = hasSelections
+            ? selections[selections.length - 1].range
+            : getCellBounds(activeCell);
+        const startRow = currentBounds.startRowIndex;
+        const endRow = currentBounds.endRowIndex;
+        const leftCol = currentBounds.startColumnIndex;
+        const rightCol = currentBounds.endColumnIndex;
+        // Excel behavior:
+        // 1. Check if there's any data in adjacent columns (left or right)
+        // 2. If yes, fill down to the sheet's overall data extent (last row with any data)
+        let hasAdjacentData = false;
+        // Check for data in left adjacent column
+        if (leftCol > selectionLeftBound) {
+            const leftValue = getValue(sheetId, startRow, leftCol - 1);
+            if (!isNull(leftValue)) {
+                hasAdjacentData = true;
+            }
+        }
+        // Check for data in right adjacent column
+        if (!hasAdjacentData && rightCol < selectionRightBound) {
+            const rightValue = getValue(sheetId, startRow, rightCol + 1);
+            if (!isNull(rightValue)) {
+                hasAdjacentData = true;
+            }
+        }
+        // No adjacent data to reference
+        if (!hasAdjacentData)
+            return;
+        // Use the sheet's data extent as the target row
+        // This matches Excel behavior where it fills to the last row with any data
+        const dataRowCount = getDataRowCount?.(sheetId);
+        const targetRow = dataRowCount !== undefined
+            ? Math.min(dataRowCount - 1, selectionBottomBound)
+            : endRow;
+        // No additional rows to fill
+        if (targetRow <= endRow)
+            return;
+        // Create fill selection
+        const fillRange = {
+            startRowIndex: startRow,
+            startColumnIndex: leftCol,
+            endRowIndex: targetRow,
+            endColumnIndex: rightCol,
+        };
+        const newFillSelection = { range: fillRange };
+        // Focus on the grid
+        focus();
+        // Callback to perform the fill
+        onFill?.(sheetId, activeCell, newFillSelection, selections);
+        // Update selection to the new range
+        const curSelections = selectionsRef.current;
+        const len = curSelections.length;
+        const newSelections = len
+            ? curSelections.map((sel, i) => {
+                if (len - 1 === i) {
+                    return {
+                        ...sel,
+                        range: fillRange,
+                    };
+                }
+                return sel;
+            })
+            : [{ range: fillRange }];
+        onChangeSelections?.(newSelections);
+    }, [
+        sheetId,
+        focus,
+        onFill,
+        onChangeSelections,
+        getValue,
+        getCellBounds,
+        selectionLeftBound,
+        selectionRightBound,
+        selectionBottomBound,
+        getDataRowCount,
+    ]);
+    return {
+        isDragging: isDragging.current,
+        draggedSelection: draggedSelection.current,
+        initialDraggedSelection: initialDraggedSelection.current,
+        isFilling: isFilling.current,
+        isSelectionInProgress: isSelecting.current,
+        onSelectionMouseDown: handleSelectionMouseDown,
+        onPointerDown: isTouchDevice ? onPointerDown : undefined,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDownRef,
+        newSelection,
+        onFillHandleMouseDown: handleFillMouseDown,
+        onFillHandleDoubleClick: handleFillDoubleClick,
+        fillSelection,
+        clearLastSelection: handleClearLastSelection,
+        modifySelection,
+        selectAll,
+        appendSelection,
+        clearSelections,
+        scrollToActiveCell,
+        setActiveCell: handleSetActiveCell,
+        setActiveCellState: onChangeActiveCell,
+        updateSelectionStartEndReference,
+        selectionFromStartEnd,
+        selectColumn: selectEntireColumn,
+        getContentfulGridRangeAroundCell,
+    };
+};