@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,1515 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelection = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var grid_2 = require("@rowsncolumns/grid");
+var grid_3 = require("@rowsncolumns/grid");
+var grid_4 = require("@rowsncolumns/grid");
+var react_1 = require("react");
+var scheduler_1 = require("../api/scheduler");
+var config_1 = require("../config");
+var use_callback_ref_1 = require("./use-callback-ref");
+var defaultIsHidden = function () { return false; };
+var defaultSelectionSpan = function () { return true; };
+var getPossibleActiveCellFromSelections = function (selections) {
+    if (!selections.length)
+        return null;
+    var range = selections[selections.length - 1].range;
+    return {
+        rowIndex: range.startRowIndex,
+        columnIndex: range.startColumnIndex,
+    };
+};
+var cellIndexInSelection = function (cell, selections, selectionLeftBound, selectionTopBound) {
+    var id = (0, grid_4.cellIdentifier)(Math.max(selectionTopBound, cell.rowIndex), Math.max(selectionLeftBound, cell.columnIndex));
+    return selections.findIndex(function (sel) {
+        var boundedCells = (0, grid_4.getBoundedCells)(sel.range);
+        return boundedCells.has(id);
+    });
+};
+var cellEqualsSelection = function (cell, selections) {
+    if (cell === null)
+        return false;
+    return selections.some(function (sel) {
+        return (sel.range.startColumnIndex === cell.columnIndex &&
+            sel.range.startRowIndex === cell.rowIndex &&
+            sel.range.endColumnIndex === cell.columnIndex &&
+            sel.range.endRowIndex === cell.rowIndex);
+    });
+};
+var boundsSubsetOfSelection = function (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
+ */
+var useSelection = function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, onChangeActiveCell = _a.onChangeActiveCell, selections = _a.selections, onChangeSelections = _a.onChangeSelections, _b = _a.columnCount, columnCount = _b === void 0 ? 0 : _b, _c = _a.rowCount, rowCount = _c === void 0 ? 0 : _c, _d = _a.selectionPolicy, selectionPolicy = _d === void 0 ? "multiple" : _d, _e = _a.newSelectionMode, newSelectionMode = _e === void 0 ? "clear" : _e, _f = _a.allowDeselectSelection, allowDeselectSelection = _f === void 0 ? true : _f, onFill = _a.onFill, _g = _a.isHiddenRow, isHiddenRow = _g === void 0 ? defaultIsHidden : _g, _h = _a.isHiddenColumn, isHiddenColumn = _h === void 0 ? defaultIsHidden : _h, _j = _a.alwaysScrollToActiveCell, alwaysScrollToActiveCell = _j === void 0 ? true : _j, _k = _a.selectionTopBound, selectionTopBound = _k === void 0 ? 0 : _k, _l = _a.selectionBottomBound, selectionBottomBound = _l === void 0 ? rowCount : _l, _m = _a.selectionLeftBound, selectionLeftBound = _m === void 0 ? 0 : _m, _o = _a.selectionRightBound, selectionRightBound = _o === void 0 ? columnCount : _o, mouseDownInterceptor = _a.mouseDownInterceptor, mouseMoveInterceptor = _a.mouseMoveInterceptor, _p = _a.mergedCells, mergedCells = _p === void 0 ? config_1.DEFAULT_ARRAY : _p, _q = _a.canSelectionSpanMergedCells, canSelectionSpanMergedCells = _q === void 0 ? defaultSelectionSpan : _q, getValue = _a.getValue, onMoveSelection = _a.onMoveSelection, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getCellBounds = _a.getCellBounds, getViewPort = _a.getViewPort, focus = _a.focus, scrollToCell = _a.scrollToCell, isMergedCell = _a.isMergedCell, enableSelectOnEnterKey = _a.enableSelectOnEnterKey, formulaMode = _a.formulaMode, isTouchDevice = _a.isTouchDevice, getDataRowCount = _a.getDataRowCount, isRowHeader = _a.isRowHeader, isColumnHeader = _a.isColumnHeader, _r = _a.enableDataBoundaryNavigation, enableDataBoundaryNavigation = _r === void 0 ? false : _r;
+    var _s = tslib_1.__read((0, react_1.useState)(), 2), fillSelection = _s[0], setFillSelection = _s[1];
+    var selectionStart = (0, react_1.useRef)(null);
+    var selectionEnd = (0, react_1.useRef)(null);
+    var isSelecting = (0, react_1.useRef)(false);
+    var isFilling = (0, react_1.useRef)(false);
+    var selectionsRef = (0, react_1.useRef)([]);
+    var fillSelectionRef = (0, react_1.useRef)(undefined);
+    var onChangeSelectionsRef = (0, use_callback_ref_1.useCallbackRef)(onChangeSelections);
+    /* Drag drop selection */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _t = tslib_1.__read((0, react_1.useReducer)(function (s) { return s + 1; }, 0), 2), _ = _t[0], forceRender = _t[1];
+    var isDragging = (0, react_1.useRef)(false);
+    var hasUserMovedSelection = (0, react_1.useRef)(false);
+    var initialDraggedSelection = (0, react_1.useRef)(undefined);
+    var initialDraggedCell = (0, react_1.useRef)(undefined);
+    var draggedSelection = (0, react_1.useRef)(undefined);
+    var draggedSelectionIndex = (0, react_1.useRef)(undefined);
+    /**
+     * Need to store in ref because on mousemove and mouseup event that are
+     * registered in document
+     */
+    var activeCellRef = (0, react_1.useRef)(activeCell);
+    var mergedCellsRef = (0, react_1.useRef)(mergedCells);
+    (0, grid_3.useIsomorphicLayoutEffect)(function () {
+        activeCellRef.current = activeCell;
+    }, [activeCell]);
+    (0, grid_3.useIsomorphicLayoutEffect)(function () {
+        mergedCellsRef.current = mergedCells;
+    }, [mergedCells]);
+    (0, grid_3.useIsomorphicLayoutEffect)(function () {
+        selectionsRef.current = selections;
+    }, [selections]);
+    (0, grid_3.useIsomorphicLayoutEffect)(function () {
+        fillSelectionRef.current = fillSelection;
+    }, [fillSelection]);
+    /* Check if cell is out of bounds */
+    var isCellOutOfBounds = (0, react_1.useCallback)(function (cell) {
+        return cell.rowIndex < 0 || cell.columnIndex < 0;
+    }, []);
+    /**
+     * selection object from start, end
+     * @param start
+     * @param end
+     */
+    var selectionFromStartEnd = (0, react_1.useCallback)(function (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
+        var isFullRowSelection = start.columnIndex === selectionLeftBound &&
+            end.columnIndex === selectionRightBound;
+        var isFullColumnSelection = start.rowIndex === selectionTopBound &&
+            end.rowIndex === selectionBottomBound;
+        var spanMerges = isFullRowSelection || isFullColumnSelection
+            ? false
+            : canSelectionSpanMergedCells === null || canSelectionSpanMergedCells === void 0 ? void 0 : canSelectionSpanMergedCells(start, end);
+        return (0, grid_4.cellRangeToBounds)(start, end, spanMerges, getCellBounds, selectionLeftBound, selectionTopBound);
+    }, [
+        canSelectionSpanMergedCells,
+        getCellBounds,
+        selectionLeftBound,
+        selectionTopBound,
+        selectionRightBound,
+        selectionBottomBound,
+    ]);
+    var clearSelections = (0, react_1.useCallback)(function () {
+        // 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 === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(config_1.DEFAULT_ARRAY);
+    }, [onChangeSelections]);
+    /* Modify current selection */
+    var modifySelection = (0, react_1.useCallback)(function (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 &&
+            (0, grid_4.isEqualCells)(selectionStart.current, selectionEnd.current)) {
+            clearSelections();
+            return;
+        }
+        var range = selectionFromStartEnd(selectionStart.current, coords);
+        if (!range) {
+            return;
+        }
+        /**
+         * 1. Multiple selections on mousedown/mousemove
+         * 2. Move the activeCell to newly selection. Done by appendSelection
+         */
+        var curSelections = selectionsRef.current;
+        var len = curSelections.length;
+        var newSelections = len
+            ? curSelections.map(function (sel, i) {
+                if (len - 1 === i) {
+                    return tslib_1.__assign(tslib_1.__assign({}, sel), { range: range, inProgress: setInProgress ? true : false });
+                }
+                return sel;
+            })
+            : [
+                { range: range, inProgress: setInProgress ? true : false },
+            ];
+        // Update selections
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(newSelections);
+    }, [
+        onChangeSelections,
+        selectionFromStartEnd,
+        isCellOutOfBounds,
+        selectionPolicy,
+        formulaMode,
+        clearSelections,
+    ]);
+    /* Adds a new selection, CMD key */
+    var appendSelection = (0, react_1.useCallback)(function (start, end) {
+        if (end === void 0) { end = start; }
+        if (selectionPolicy !== "multiple" ||
+            !start ||
+            isCellOutOfBounds(start)) {
+            return;
+        }
+        selectionStart.current = start;
+        selectionEnd.current = end;
+        var range = selectionFromStartEnd(start, end);
+        if (!range) {
+            return;
+        }
+        onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, {
+            rowIndex: range.startRowIndex,
+            columnIndex: range.startColumnIndex,
+        });
+        var curSelections = selectionsRef.current;
+        var newSelections = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(curSelections), false), [{ range: range }], false);
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(newSelections);
+    }, [
+        sheetId,
+        onChangeSelections,
+        onChangeActiveCell,
+        selectionFromStartEnd,
+        isCellOutOfBounds,
+        selectionPolicy,
+    ]);
+    var removeSelectionByIndex = (0, react_1.useCallback)(function (index) {
+        var newSelection = selections.filter(function (_, idx) { return idx !== index; });
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(newSelection);
+        return newSelection;
+    }, [selections, onChangeSelections]);
+    /* New selection */
+    var newSelection = (0, react_1.useCallback)(function (start, end) {
+        if (end === void 0) { end = start; }
+        /* Validate bounds */
+        if (isCellOutOfBounds(start)) {
+            return;
+        }
+        selectionStart.current = start;
+        selectionEnd.current = end;
+        var bounds = selectionFromStartEnd(start, end);
+        if (!bounds)
+            return;
+        var coords = {
+            rowIndex: bounds.startRowIndex,
+            columnIndex: bounds.startColumnIndex,
+        };
+        /* Keep track  of first cell that was selected by user */
+        onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : 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
+     */
+    var handleMouseMove = (0, react_1.useCallback)(function (e) {
+        /* Exit if user is not in selection mode */
+        if (!isSelecting.current) {
+            return;
+        }
+        var coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        if ((mouseMoveInterceptor === null || mouseMoveInterceptor === void 0 ? void 0 : mouseMoveInterceptor(e, coords, selectionStart, selectionEnd, modifySelection)) === false) {
+            return;
+        }
+        if ((0, grid_4.isEqualCells)(selectionEnd.current, coords)) {
+            return;
+        }
+        modifySelection(coords, true);
+        // Prevent a bug when setState is
+        // called repeatedly
+        (0, scheduler_1.scheduleNormalPriorityCallback)(function () {
+            scrollToCell(coords);
+        });
+    }, [
+        modifySelection,
+        getCellCoordsFromOffset,
+        scrollToCell,
+        mouseMoveInterceptor,
+    ]);
+    /**
+     * Mouse up handler
+     */
+    var handleMouseUp = (0, react_1.useCallback)(function () {
+        /* Reset selection mode */
+        isSelecting.current = false;
+        /* Remove listener */
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        /* Update last selection */
+        var curSelections = selectionsRef.current;
+        var len = curSelections.length;
+        var anySelectonInProgress = curSelections.find(function (sel) { return sel.inProgress; });
+        var newSelections = !anySelectonInProgress
+            ? curSelections
+            : len
+                ? curSelections.map(function (sel, i) {
+                    if (len - 1 === i && sel.inProgress !== false) {
+                        return tslib_1.__assign(tslib_1.__assign({}, 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
+        var finishedSelection = true;
+        onChangeSelectionsRef === null || onChangeSelectionsRef === void 0 ? void 0 : onChangeSelectionsRef(newSelections, finishedSelection);
+    }, [onChangeSelectionsRef, handleMouseMove]);
+    /**
+     * User modified active cell deliberately
+     */
+    var handleSetActiveCell = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, coords, shouldScroll, align) {
+        if (shouldScroll === void 0) { shouldScroll = true; }
+        selectionStart.current = coords;
+        selectionEnd.current = coords;
+        onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, coords);
+        /* Scroll to the cell */
+        if (shouldScroll && coords) {
+            scrollToCell(coords, align);
+        }
+    }, [onChangeActiveCell, scrollToCell]));
+    /**
+     * Navigate selection using keyboard
+     * @param direction
+     * @param modify
+     */
+    var keyNavigate = (0, react_1.useCallback)(function (direction, modify, metaKeyPressed) {
+        var _a, _b;
+        if (!selectionStart.current || !selectionEnd.current) {
+            selectionStart.current = selectionEnd.current = activeCell;
+        }
+        var currentCell = modify
+            ? selectionEnd.current
+            : (_a = selectionStart.current) !== null && _a !== void 0 ? _a : activeCell;
+        var rowIndex = currentCell.rowIndex, columnIndex = currentCell.columnIndex;
+        var isMerged = isMergedCell({
+            rowIndex: rowIndex,
+            columnIndex: columnIndex,
+        });
+        var currentBounds = getCellBounds({
+            rowIndex: rowIndex,
+            columnIndex: columnIndex,
+        });
+        switch (direction) {
+            case grid_4.Direction.Up:
+                if (isMerged)
+                    rowIndex = currentBounds.startRowIndex;
+                rowIndex = (0, grid_4.clampIndex)(Math.max(rowIndex - 1, selectionTopBound), isHiddenRow, direction);
+                /**
+                 * If user hides column 1
+                 */
+                if (rowIndex < selectionTopBound) {
+                    rowIndex = (0, grid_4.clampIndex)(selectionTopBound, isHiddenRow, grid_4.Direction.Down);
+                }
+                // Shift + Ctrl/Commmand
+                // TODO: Scroll to last contentful cell
+                if (metaKeyPressed) {
+                    var startCell = tslib_1.__assign(tslib_1.__assign({}, currentCell), { 
+                        // Expand from the starting cell
+                        columnIndex: selectionStart.current.columnIndex });
+                    rowIndex = (0, grid_4.findNextCellInDataRegion)(sheetId, startCell, getValue, isHiddenRow, direction, selectionTopBound);
+                }
+                break;
+            case grid_4.Direction.Down:
+                if (isMerged)
+                    rowIndex = currentBounds.endRowIndex;
+                rowIndex = (0, grid_4.clampIndex)(Math.min(rowIndex + 1, selectionBottomBound), isHiddenRow, direction);
+                // Shift + Ctrl/Commmand
+                if (metaKeyPressed) {
+                    var bottomBound = selectionBottomBound;
+                    // Data boundary
+                    if (enableDataBoundaryNavigation) {
+                        var dataRowCount = (_b = getDataRowCount === null || getDataRowCount === void 0 ? void 0 : getDataRowCount(sheetId)) !== null && _b !== void 0 ? _b : rowCount;
+                        bottomBound =
+                            rowIndex < dataRowCount
+                                ? Math.min(dataRowCount - 1, rowCount)
+                                : selectionBottomBound;
+                    }
+                    var startCell = tslib_1.__assign(tslib_1.__assign({}, currentCell), { 
+                        // Expand from the starting cell
+                        columnIndex: selectionStart.current.columnIndex });
+                    rowIndex = (0, grid_4.findNextCellInDataRegion)(sheetId, startCell, getValue, isHiddenRow, direction, bottomBound);
+                }
+                break;
+            case grid_4.Direction.Left:
+                if (isMerged)
+                    columnIndex = currentBounds.startColumnIndex;
+                columnIndex = (0, grid_4.clampIndex)(Math.max(columnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
+                /**
+                 * If user hides column 1
+                 */
+                if (columnIndex < selectionLeftBound) {
+                    columnIndex = (0, grid_4.clampIndex)(selectionLeftBound, isHiddenColumn, grid_4.Direction.Right);
+                }
+                // Shift + Ctrl/Commmand
+                if (metaKeyPressed) {
+                    var startCell = tslib_1.__assign(tslib_1.__assign({}, currentCell), { 
+                        // Expand from the starting cell
+                        rowIndex: selectionStart.current.rowIndex });
+                    columnIndex = (0, grid_4.findNextCellInDataRegion)(sheetId, startCell, getValue, isHiddenColumn, direction, selectionLeftBound);
+                }
+                break;
+            case grid_4.Direction.Right:
+                if (isMerged)
+                    columnIndex = currentBounds.endColumnIndex;
+                columnIndex = (0, grid_4.clampIndex)(Math.min(columnIndex + 1, selectionRightBound), isHiddenColumn, direction);
+                // Shift + Ctrl/Commmand
+                if (metaKeyPressed) {
+                    var startCell = tslib_1.__assign(tslib_1.__assign({}, currentCell), { 
+                        // Expand from the starting cell
+                        rowIndex: selectionStart.current.rowIndex });
+                    columnIndex = (0, grid_4.findNextCellInDataRegion)(sheetId, startCell, getValue, isHiddenColumn, direction, selectionRightBound);
+                }
+                break;
+        }
+        var newBounds = getCellBounds({
+            rowIndex: rowIndex,
+            columnIndex: columnIndex,
+        });
+        var coords = {
+            rowIndex: newBounds.startRowIndex,
+            columnIndex: newBounds.startColumnIndex,
+        };
+        var nextCellToScrollTo = modify
+            ? selectionEnd.current.rowIndex === coords.rowIndex
+                ? // Scroll to a column
+                    { columnIndex: coords.columnIndex }
+                : // Scroll to row
+                    { rowIndex: coords.rowIndex }
+            : // Scroll to cell
+                { rowIndex: rowIndex, columnIndex: 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
+    var findLastContentfulCellInDirection = (0, react_1.useCallback)(function (sheetId, startCell, endCell, direction) {
+        var isSingleBound = (0, grid_4.isEqualCells)(startCell, endCell);
+        var isVertical = direction === grid_4.Direction.Up || direction === grid_4.Direction.Down;
+        var cell = direction === grid_4.Direction.Up || direction === grid_4.Direction.Left
+            ? startCell
+            : endCell;
+        var isHidden = isVertical ? isHiddenRow : isHiddenColumn;
+        var limit = direction === grid_4.Direction.Up
+            ? selectionTopBound
+            : direction === grid_4.Direction.Down
+                ? selectionBottomBound
+                : direction === grid_4.Direction.Left
+                    ? selectionLeftBound
+                    : selectionRightBound;
+        var key = isVertical ? "rowIndex" : "columnIndex";
+        var startIndex = (0, grid_1.findLastContentfulCell)(sheetId, startCell, getValue, isHidden, direction, limit)[key];
+        var endIndex = isSingleBound
+            ? startIndex
+            : (0, grid_1.findLastContentfulCell)(sheetId, endCell, getValue, isHidden, direction, limit)[key];
+        var boundedCellIndex = direction === grid_4.Direction.Up || direction === grid_4.Direction.Left
+            ? Math.min(startIndex, endIndex)
+            : Math.max(startIndex, endIndex);
+        if (!isSingleBound && (cell === null || cell === void 0 ? void 0 : cell[key]) === boundedCellIndex) {
+            return limit;
+        }
+        return boundedCellIndex;
+    }, [
+        getValue,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionTopBound,
+        selectionBottomBound,
+        selectionLeftBound,
+        selectionRightBound,
+    ]);
+    // ⌘A or ⌘+Shift+Space
+    // Select all cells in bounding area
+    var selectAllBoundedCells = (0, react_1.useCallback)(function () {
+        if (!selectionEnd.current || !selectionStart.current) {
+            return;
+        }
+        var topBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Up);
+        var bottomBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Down);
+        var leftBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Left);
+        var rightBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Right);
+        var isSameHorizontalBounds = leftBound === rightBound;
+        var 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
+    var selectAll = (0, react_1.useCallback)(function () {
+        selectionStart.current = {
+            rowIndex: selectionTopBound,
+            columnIndex: selectionLeftBound,
+        };
+        modifySelection({
+            rowIndex: selectionBottomBound,
+            columnIndex: selectionRightBound,
+        });
+    }, [
+        selectionTopBound,
+        selectionLeftBound,
+        selectionRightBound,
+        selectionBottomBound,
+        modifySelection,
+    ]);
+    // Ctrl+Space
+    var selectColumn = (0, react_1.useCallback)(function (columnIndex) {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            columnIndex === void 0)
+            return;
+        var topBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Up);
+        var bottomBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Down);
+        var isSameVerticalBounds = topBound === bottomBound;
+        if (isSameVerticalBounds) {
+            topBound = selectionTopBound;
+            bottomBound = selectionBottomBound;
+        }
+        selectionStart.current = tslib_1.__assign(tslib_1.__assign({}, selectionStart.current), { rowIndex: Math.max(selectionTopBound, topBound) });
+        modifySelection(tslib_1.__assign(tslib_1.__assign({}, selectionEnd.current), { rowIndex: bottomBound }));
+    }, [
+        findLastContentfulCellInDirection,
+        modifySelection,
+        sheetId,
+        selectionTopBound,
+        selectionBottomBound,
+    ]);
+    // Select entire column
+    var selectEntireColumn = (0, react_1.useCallback)(function (columnIndex) {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            columnIndex === void 0)
+            return;
+        selectionStart.current = tslib_1.__assign(tslib_1.__assign({}, selectionStart.current), { rowIndex: selectionTopBound });
+        modifySelection(tslib_1.__assign(tslib_1.__assign({}, selectionEnd.current), { rowIndex: selectionBottomBound }));
+    }, [modifySelection, selectionBottomBound, selectionTopBound]);
+    // Shift+Space
+    var selectRow = (0, react_1.useCallback)(function (rowIndex) {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            rowIndex === void 0) {
+            return;
+        }
+        var leftBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Left);
+        var rightBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Right);
+        var isSameHorizontalBounds = leftBound === rightBound;
+        if (isSameHorizontalBounds) {
+            leftBound = selectionLeftBound;
+            rightBound = selectionRightBound;
+        }
+        selectionStart.current = tslib_1.__assign(tslib_1.__assign({}, selectionStart.current), { columnIndex: leftBound });
+        modifySelection(tslib_1.__assign(tslib_1.__assign({}, selectionEnd.current), { columnIndex: rightBound }));
+    }, [
+        findLastContentfulCellInDirection,
+        modifySelection,
+        sheetId,
+        selectionRightBound,
+        selectionLeftBound,
+    ]);
+    //  Home
+    var selectFirstCellInRow = (0, react_1.useCallback)(function () {
+        if (!selectionStart.current)
+            return;
+        var cell = {
+            rowIndex: selectionStart.current.rowIndex,
+            columnIndex: selectionLeftBound,
+        };
+        newSelection(cell);
+        scrollToCell(cell);
+    }, [scrollToCell, newSelection, selectionLeftBound]);
+    //  End
+    var selectLastCellInRow = (0, react_1.useCallback)(function () {
+        if (!selectionStart.current)
+            return;
+        var 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
+    var selectFirstCellInSheet = (0, react_1.useCallback)(function () {
+        if (!selectionStart.current)
+            return;
+        var cell = {
+            rowIndex: selectionTopBound,
+            columnIndex: selectionLeftBound,
+        };
+        newSelection(cell);
+        scrollToCell(cell);
+    }, [scrollToCell, newSelection, selectionTopBound, selectionLeftBound]);
+    //  fn+⌘+End
+    var selectLastCellInSheet = (0, react_1.useCallback)(function () {
+        if (!selectionStart.current)
+            return;
+        var 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
+    var scrollToActiveCell = (0, react_1.useCallback)(function () {
+        if (!activeCell)
+            return;
+        scrollToCell(activeCell, grid_4.Align.smart);
+    }, [scrollToCell, activeCell]);
+    // Page down
+    var pageDown = (0, react_1.useCallback)(function () {
+        if (!activeCell)
+            return;
+        var _a = getViewPort(), visibleRowStartIndex = _a.visibleRowStartIndex, visibleRowStopIndex = _a.visibleRowStopIndex;
+        var pageSize = visibleRowStopIndex - visibleRowStartIndex;
+        var rowIndex = Math.min(activeCell.rowIndex + pageSize, rowCount);
+        var newActiveCell = {
+            rowIndex: rowIndex,
+            columnIndex: activeCell.columnIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ rowIndex: rowIndex }, grid_4.Align.end);
+    }, [
+        getViewPort,
+        scrollToCell,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        rowCount,
+    ]);
+    // Page up
+    var pageUp = (0, react_1.useCallback)(function () {
+        if (!activeCell)
+            return;
+        var _a = getViewPort(), visibleRowStartIndex = _a.visibleRowStartIndex, visibleRowStopIndex = _a.visibleRowStopIndex;
+        var pageSize = visibleRowStopIndex - visibleRowStartIndex;
+        var rowIndex = Math.max(activeCell.rowIndex - pageSize, selectionTopBound);
+        var newActiveCell = {
+            rowIndex: rowIndex,
+            columnIndex: activeCell.columnIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ rowIndex: rowIndex }, grid_4.Align.end);
+    }, [
+        scrollToCell,
+        getViewPort,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        selectionTopBound,
+    ]);
+    // Page right
+    var pageRight = (0, react_1.useCallback)(function () {
+        if (!activeCell)
+            return;
+        var _a = getViewPort(), visibleColumnStartIndex = _a.visibleColumnStartIndex, visibleColumnStopIndex = _a.visibleColumnStopIndex;
+        var pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
+        var columnIndex = Math.min(activeCell.columnIndex + pageSize, selectionRightBound);
+        var newActiveCell = {
+            columnIndex: columnIndex,
+            rowIndex: activeCell.rowIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ columnIndex: columnIndex }, grid_4.Align.end);
+    }, [
+        scrollToCell,
+        getViewPort,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        selectionRightBound,
+    ]);
+    // Page left
+    var pageLeft = (0, react_1.useCallback)(function () {
+        if (!activeCell)
+            return;
+        var _a = getViewPort(), visibleColumnStartIndex = _a.visibleColumnStartIndex, visibleColumnStopIndex = _a.visibleColumnStopIndex;
+        var pageSize = visibleColumnStopIndex - visibleColumnStartIndex;
+        var columnIndex = Math.max(activeCell.columnIndex - pageSize, selectionLeftBound);
+        var newActiveCell = {
+            columnIndex: columnIndex,
+            rowIndex: activeCell.rowIndex,
+        };
+        handleSetActiveCell(sheetId, newActiveCell, false);
+        /* Scroll to the new row */
+        scrollToCell({ columnIndex: columnIndex }, grid_4.Align.end);
+    }, [
+        scrollToCell,
+        getViewPort,
+        handleSetActiveCell,
+        sheetId,
+        activeCell,
+        selectionLeftBound,
+    ]);
+    /**
+     * Triggers a new selection start
+     */
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        var coords = getCellCoordsFromOffset(e.clientX, e.clientY, true);
+        if (!coords)
+            return;
+        /* Check if its context menu click */
+        var isContextMenuClick = e.button === grid_4.MouseButtonCodes.right ||
+            (e.button == grid_4.MouseButtonCodes.left && e.ctrlKey);
+        if (isContextMenuClick &&
+            !isRowHeader(coords.columnIndex) &&
+            !isColumnHeader(coords.rowIndex)) {
+            var cellIndex = cellIndexInSelection(coords, selections, selectionLeftBound, selectionTopBound);
+            if (cellIndex !== -1)
+                return;
+        }
+        var isCtrlKey = e.ctrlKey;
+        var isShiftKey = e.shiftKey;
+        var isMetaKey = e.metaKey || isCtrlKey;
+        var allowMultiple = isMetaKey;
+        var allowDeselect = allowDeselectSelection;
+        var hasSelections = selectionsRef.current.length > 0;
+        var 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 === null || mouseDownInterceptor === void 0 ? void 0 : 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 */
+        var isSameAsActiveCell = (0, grid_4.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) {
+                var cellIndex = cellIndexInSelection(coords, selections, selectionLeftBound, selectionTopBound);
+                if (cellIndex !== -1) {
+                    var newSelection_1 = removeSelectionByIndex(cellIndex);
+                    var nextActiveCell = getPossibleActiveCellFromSelections(newSelection_1);
+                    if (nextActiveCell !== null) {
+                        onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, nextActiveCell);
+                    }
+                    if (newSelection_1.length === 1 &&
+                        cellEqualsSelection(nextActiveCell, newSelection_1)) {
+                        /* 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
+             */
+            (0, scheduler_1.scheduleImmediatePriorityCallback)(function () {
+                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
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        var nativeEvent = "nativeEvent" in e ? e.nativeEvent : e;
+        var isShiftKey = nativeEvent.shiftKey;
+        var isAltKey = nativeEvent.altKey;
+        var isMetaKey = nativeEvent.ctrlKey || nativeEvent.metaKey;
+        // TODO ctrl + space
+        // Ignore alt
+        if (isAltKey) {
+            return;
+        }
+        switch (nativeEvent.key) {
+            case "ArrowRight":
+                keyNavigate(grid_4.Direction.Right, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            case "ArrowLeft":
+                keyNavigate(grid_4.Direction.Left, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            // Up
+            case "ArrowUp":
+                keyNavigate(grid_4.Direction.Up, isShiftKey, isMetaKey);
+                e.preventDefault();
+                break;
+            case "ArrowDown":
+                keyNavigate(grid_4.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((_a = selectionEnd.current) === null || _a === void 0 ? void 0 : _a.columnIndex);
+                }
+                else if (isShiftKey) {
+                    selectRow((_b = selectionEnd.current) === null || _b === void 0 ? void 0 : _b.rowIndex);
+                }
+                break;
+            // Add support for cycling multiple selections
+            case "Enter":
+                if (selections.length && activeCell) {
+                    var range = selections[selections.length - 1].range;
+                    var activeCellBounds = getCellBounds(activeCell);
+                    var direction = isShiftKey ? grid_4.Direction.Up : grid_4.Direction.Down;
+                    var nextCell = (0, grid_4.findNextCellWithinBounds)(activeCellBounds, range, direction);
+                    if (nextCell) {
+                        onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, nextCell);
+                        scrollToCell(nextCell);
+                    }
+                }
+                else if (enableSelectOnEnterKey) {
+                    if (isShiftKey) {
+                        keyNavigate(grid_4.Direction.Up);
+                    }
+                    else {
+                        keyNavigate(grid_4.Direction.Down);
+                    }
+                }
+                break;
+            case "Tab":
+                /* Cycle through the selections if selections.length > 0 */
+                if (selections.length && activeCell) {
+                    var range = selections[selections.length - 1].range;
+                    var activeCellBounds = getCellBounds(activeCell);
+                    var direction = isShiftKey ? grid_4.Direction.Left : grid_4.Direction.Right;
+                    var nextCell = (0, grid_4.findNextCellWithinBounds)(activeCellBounds, range, direction);
+                    if (nextCell) {
+                        onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, nextCell);
+                        scrollToCell(nextCell);
+                    }
+                }
+                else {
+                    if (isShiftKey) {
+                        keyNavigate(grid_4.Direction.Left);
+                    }
+                    else {
+                        keyNavigate(grid_4.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
+     */
+    var handleFillMouseMove = (0, react_1.useCallback)(function (e) {
+        /* Exit if user is not in selection mode */
+        if (!isFilling.current || !activeCellRef.current)
+            return;
+        var coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords)
+            return;
+        var selections = selectionsRef.current;
+        var range = selectionFromStartEnd(activeCellRef.current, coords);
+        var hasSelections = selections.length > 0;
+        var activeCellBounds = hasSelections
+            ? selections[selections.length - 1].range
+            : getCellBounds(activeCellRef.current);
+        if (!range)
+            return;
+        var direction = range.startRowIndex < activeCellBounds.startRowIndex
+            ? grid_4.Direction.Up
+            : range.endRowIndex > activeCellBounds.endRowIndex
+                ? grid_4.Direction.Down
+                : range.endColumnIndex > activeCellBounds.endColumnIndex
+                    ? grid_4.Direction.Right
+                    : grid_4.Direction.Left;
+        if (direction === grid_4.Direction.Right) {
+            range = tslib_1.__assign(tslib_1.__assign({}, activeCellBounds), { endColumnIndex: Math.min(selectionRightBound, range.endColumnIndex) });
+        }
+        if (direction === grid_4.Direction.Up) {
+            range = tslib_1.__assign(tslib_1.__assign({}, activeCellBounds), { startRowIndex: Math.max(selectionTopBound, range.startRowIndex) });
+        }
+        if (direction === grid_4.Direction.Left) {
+            range = tslib_1.__assign(tslib_1.__assign({}, activeCellBounds), { startColumnIndex: Math.max(selectionLeftBound, range.startColumnIndex) });
+        }
+        if (direction === grid_4.Direction.Down) {
+            range = tslib_1.__assign(tslib_1.__assign({}, 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;
+        }
+        var newFillSelection = { range: range };
+        setFillSelection(newFillSelection);
+        scrollToCell(coords);
+    }, [
+        getCellCoordsFromOffset,
+        scrollToCell,
+        getCellBounds,
+        selectionBottomBound,
+        selectionFromStartEnd,
+        selectionLeftBound,
+        selectionRightBound,
+        selectionTopBound,
+    ]);
+    /**
+     * When user releases mouse on the fill handle
+     */
+    var handleFillMouseUp = (0, react_1.useCallback)(function () {
+        isFilling.current = false;
+        /* Remove listener */
+        document.removeEventListener("mousemove", handleFillMouseMove);
+        document.removeEventListener("mouseup", handleFillMouseUp);
+        /* Exit early */
+        if (!activeCellRef.current) {
+            return;
+        }
+        // Active fill selection
+        var fillSelection = fillSelectionRef.current;
+        /* Update last selection */
+        setFillSelection(undefined);
+        /* Use ref, as we are binding to document */
+        var selections = selectionsRef.current;
+        var activeCell = activeCellRef.current;
+        if (!activeCell || !fillSelection) {
+            return;
+        }
+        var newBounds = fillSelection.range;
+        if (!newBounds ||
+            // If the new selection is same as activecell, ignore, since
+            // user has not any action
+            (0, grid_4.isAreasEqual)((0, grid_2.cellToArea)(activeCellRef.current), newBounds)) {
+            return;
+        }
+        /* Focus on the grid */
+        focus();
+        /* Callback */
+        onFill === null || onFill === void 0 ? void 0 : onFill(sheetId, activeCell, fillSelection, selections);
+        /* Modify last selection */
+        var curSelections = selectionsRef.current;
+        var len = curSelections.length;
+        var newSelections = len
+            ? curSelections.map(function (sel, i) {
+                if (len - 1 === i) {
+                    return tslib_1.__assign(tslib_1.__assign({}, sel), { range: newBounds });
+                }
+                return sel;
+            })
+            : [{ range: newBounds }];
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(newSelections);
+    }, [focus, handleFillMouseMove, onChangeSelections, onFill, sheetId]);
+    var handleFillMouseDown = (0, react_1.useCallback)(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        isFilling.current = true;
+        document.addEventListener("mousemove", handleFillMouseMove);
+        document.addEventListener("mouseup", handleFillMouseUp);
+    }, [handleFillMouseMove, handleFillMouseUp]);
+    /**
+     * Remove the last selection from state
+     */
+    var handleClearLastSelection = (0, react_1.useCallback)(function () {
+        var curSelections = selectionsRef.current;
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(curSelections.slice(0, -1));
+    }, [onChangeSelections]);
+    /**
+     * Ond drag move
+     */
+    var handleSelectionMouseMove = (0, react_1.useCallback)(function (e) {
+        var _a;
+        var 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 &&
+            (0, grid_4.isEqualCells)(initialDraggedCell.current, coords)) {
+            return;
+        }
+        var sel = (0, grid_4.newSelectionFromDrag)(initialDraggedSelection.current, initialDraggedCell.current, coords, selectionTopBound, selectionLeftBound, rowCount, columnCount);
+        if ((0, grid_4.isAreasEqual)((_a = draggedSelection.current) === null || _a === void 0 ? void 0 : _a.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
+     */
+    var handleSelectionMouseUp = (0, react_1.useCallback)(function () {
+        var fromSelection = initialDraggedSelection.current;
+        var toSelection = draggedSelection.current;
+        /**
+         * If the from and to selection area
+         */
+        if (toSelection &&
+            fromSelection &&
+            !(0, grid_4.isAreasEqual)(toSelection.range, fromSelection.range)) {
+            /* Select the first cell in the selection area */
+            var coords = {
+                rowIndex: toSelection.range.startRowIndex,
+                columnIndex: toSelection.range.startColumnIndex,
+            };
+            /* Pick the first cell as activee cell */
+            onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, coords);
+            /* Update selection start */
+            selectionStart.current = coords;
+            if ((0, grid_4.selectionSpansCells)(toSelection === null || toSelection === void 0 ? void 0 : toSelection.range)) {
+                var curSelections = selectionsRef.current;
+                var newSelections = curSelections.map(function (cur, index) {
+                    if (index === draggedSelectionIndex.current) {
+                        return toSelection;
+                    }
+                    return cur;
+                });
+                onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(newSelections);
+                /* Update selection end */
+                selectionEnd.current = {
+                    rowIndex: toSelection.range.endRowIndex,
+                    columnIndex: toSelection.range.endColumnIndex,
+                };
+            }
+        }
+        // Callback
+        if (fromSelection &&
+            toSelection &&
+            !(0, grid_4.isAreasEqual)(fromSelection.range, toSelection.range)) {
+            onMoveSelection === null || onMoveSelection === void 0 ? void 0 : 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
+     */
+    var handleSelectionMouseDown = (0, react_1.useCallback)(function (e, activeCell, selection, index, shouldClamp) {
+        if (shouldClamp === void 0) { shouldClamp = true; }
+        if (e.isDefaultPrevented()) {
+            return;
+        }
+        var isContextMenu = e.button === grid_4.MouseButtonCodes.right || e.ctrlKey;
+        if (isContextMenu) {
+            return;
+        }
+        var 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 = (0, grid_4.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
+     */
+    var updateSelectionStartEndReference = (0, react_1.useCallback)(function (cell, selections) {
+        var lastSelection = selections === null || selections === void 0 ? void 0 : 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
+     */
+    var findLastContentfulIndex = (0, react_1.useCallback)(function (sheetId, startCell, direction) {
+        var isVertical = direction === grid_4.Direction.Up || direction === grid_4.Direction.Down;
+        var hiddenFn = isVertical ? isHiddenRow : isHiddenColumn;
+        var selectionBound = direction === grid_4.Direction.Up
+            ? selectionTopBound
+            : direction === grid_4.Direction.Down
+                ? selectionBottomBound
+                : direction === grid_4.Direction.Left
+                    ? selectionLeftBound
+                    : selectionRightBound;
+        var nextCell = direction === grid_4.Direction.Up
+            ? tslib_1.__assign(tslib_1.__assign({}, startCell), { rowIndex: startCell.rowIndex - 1 }) : direction === grid_4.Direction.Down
+            ? tslib_1.__assign(tslib_1.__assign({}, startCell), { rowIndex: startCell.rowIndex + 1 }) : direction === grid_4.Direction.Left
+            ? tslib_1.__assign(tslib_1.__assign({}, startCell), { columnIndex: startCell.columnIndex - 1 }) : tslib_1.__assign(tslib_1.__assign({}, startCell), { columnIndex: startCell.columnIndex + 1 });
+        if ((0, grid_1.isNull)(getValue(sheetId, nextCell.rowIndex, nextCell.columnIndex))) {
+            return;
+        }
+        return (0, grid_4.findNextCellInDataRegion)(sheetId, startCell, getValue, hiddenFn, direction, selectionBound);
+    }, [
+        getValue,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionBottomBound,
+        selectionRightBound,
+        selectionTopBound,
+        selectionLeftBound,
+    ]);
+    var getContentfulGridRangeAroundCell = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, startCell) {
+        var _a, _b, _c, _d;
+        return {
+            startRowIndex: (_a = findLastContentfulIndex(sheetId, startCell, grid_4.Direction.Up)) !== null && _a !== void 0 ? _a : startCell.rowIndex,
+            endRowIndex: (_b = findLastContentfulIndex(sheetId, startCell, grid_4.Direction.Down)) !== null && _b !== void 0 ? _b : startCell.rowIndex,
+            startColumnIndex: (_c = findLastContentfulIndex(sheetId, startCell, grid_4.Direction.Left)) !== null && _c !== void 0 ? _c : startCell.columnIndex,
+            endColumnIndex: (_d = findLastContentfulIndex(sheetId, startCell, grid_4.Direction.Right)) !== null && _d !== void 0 ? _d : startCell.columnIndex,
+        };
+    }, [findLastContentfulIndex]));
+    // Pointer down
+    var startTimeRef = (0, react_1.useRef)(0);
+    var startPosRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    var onPointerUp = (0, react_1.useCallback)(function (event) {
+        var endTime = Date.now();
+        var maxDuration = 200;
+        var maxDistance = 10;
+        var clientX = event.clientX, clientY = event.clientY;
+        var timeDiff = endTime - startTimeRef.current;
+        var 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]);
+    var onPointerDown = (0, react_1.useCallback)(function (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
+    var handleKeyDownRef = (0, use_callback_ref_1.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
+     */
+    var handleFillDoubleClick = (0, react_1.useCallback)(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        var activeCell = activeCellRef.current;
+        if (!activeCell)
+            return;
+        var selections = selectionsRef.current;
+        var hasSelections = selections.length > 0;
+        // Get the current selection bounds or active cell bounds
+        var currentBounds = hasSelections
+            ? selections[selections.length - 1].range
+            : getCellBounds(activeCell);
+        var startRow = currentBounds.startRowIndex;
+        var endRow = currentBounds.endRowIndex;
+        var leftCol = currentBounds.startColumnIndex;
+        var 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)
+        var hasAdjacentData = false;
+        // Check for data in left adjacent column
+        if (leftCol > selectionLeftBound) {
+            var leftValue = getValue(sheetId, startRow, leftCol - 1);
+            if (!(0, grid_1.isNull)(leftValue)) {
+                hasAdjacentData = true;
+            }
+        }
+        // Check for data in right adjacent column
+        if (!hasAdjacentData && rightCol < selectionRightBound) {
+            var rightValue = getValue(sheetId, startRow, rightCol + 1);
+            if (!(0, grid_1.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
+        var dataRowCount = getDataRowCount === null || getDataRowCount === void 0 ? void 0 : getDataRowCount(sheetId);
+        var targetRow = dataRowCount !== undefined
+            ? Math.min(dataRowCount - 1, selectionBottomBound)
+            : endRow;
+        // No additional rows to fill
+        if (targetRow <= endRow)
+            return;
+        // Create fill selection
+        var fillRange = {
+            startRowIndex: startRow,
+            startColumnIndex: leftCol,
+            endRowIndex: targetRow,
+            endColumnIndex: rightCol,
+        };
+        var newFillSelection = { range: fillRange };
+        // Focus on the grid
+        focus();
+        // Callback to perform the fill
+        onFill === null || onFill === void 0 ? void 0 : onFill(sheetId, activeCell, newFillSelection, selections);
+        // Update selection to the new range
+        var curSelections = selectionsRef.current;
+        var len = curSelections.length;
+        var newSelections = len
+            ? curSelections.map(function (sel, i) {
+                if (len - 1 === i) {
+                    return tslib_1.__assign(tslib_1.__assign({}, sel), { range: fillRange });
+                }
+                return sel;
+            })
+            : [{ range: fillRange }];
+        onChangeSelections === null || onChangeSelections === void 0 ? void 0 : 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: newSelection,
+        onFillHandleMouseDown: handleFillMouseDown,
+        onFillHandleDoubleClick: handleFillDoubleClick,
+        fillSelection: fillSelection,
+        clearLastSelection: handleClearLastSelection,
+        modifySelection: modifySelection,
+        selectAll: selectAll,
+        appendSelection: appendSelection,
+        clearSelections: clearSelections,
+        scrollToActiveCell: scrollToActiveCell,
+        setActiveCell: handleSetActiveCell,
+        setActiveCellState: onChangeActiveCell,
+        updateSelectionStartEndReference: updateSelectionStartEndReference,
+        selectionFromStartEnd: selectionFromStartEnd,
+        selectColumn: selectEntireColumn,
+        getContentfulGridRangeAroundCell: getContentfulGridRangeAroundCell,
+    };
+};
+exports.useSelection = useSelection;