@rowsncolumns/grid 9.0.3 → 13.2.32

package/dist/cjs/Grid.js

@@ -0,0 +1,2446 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var tiny_invariant_1 = tslib_1.__importDefault(require("tiny-invariant"));
+var Cell_1 = require("./Cell");
+var CellOverlay_1 = require("./CellOverlay");
+var Context_1 = require("./Context");
+var FillHandle_1 = tslib_1.__importDefault(require("./FillHandle"));
+var GridLine_1 = tslib_1.__importDefault(require("./GridLine"));
+var helpers_1 = require("./helpers");
+var helpers_2 = require("./helpers");
+var helpers_3 = require("./helpers");
+var MemoizedGrid_1 = require("./MemoizedGrid");
+var Selection_1 = tslib_1.__importDefault(require("./Selection"));
+var types_1 = require("./types");
+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+var defaultShadowSettings = {
+    strokeWidth: 1,
+};
+var DEFAULT_ROW_HEIGHT = 21;
+var DEFAULT_COLUMN_WIDTH = 100;
+var defaultRowHeight = function () { return DEFAULT_COLUMN_WIDTH; };
+var defaultColumnWidth = function () { return 60; };
+var defaultSelectionRenderer = function (props) {
+    return react_1.default.createElement(Selection_1.default, tslib_1.__assign({}, props));
+};
+var defaultGridLineRenderer = function (props) {
+    return react_1.default.createElement(GridLine_1.default, tslib_1.__assign({}, props));
+};
+exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL = 150;
+/* Placeholder for empty array -> Prevents re-render */
+var EMPTY_ARRAY = [];
+/* Max scroll height */
+var MAX_SCROLLBAR_HEIGHT = 16777000;
+/**
+ * Grid component using React Konva
+ * @param props
+ *
+ * TODO: Fix bug with snapping, since onWheel is a global handler, rowCount, columnCount becomes state
+ */
+var Grid = (0, react_1.memo)((0, react_1.forwardRef)(function (props, forwardedRef) {
+    var _a = props.width, containerWidth = _a === void 0 ? 800 : _a, _b = props.height, containerHeight = _b === void 0 ? 600 : _b, estimatedColumnWidth = props.estimatedColumnWidth, estimatedRowHeight = props.estimatedRowHeight, _c = props.rowHeight, rowHeight = _c === void 0 ? defaultRowHeight : _c, _d = props.columnWidth, columnWidth = _d === void 0 ? defaultColumnWidth : _d, _e = props.rowCount, rowCount = _e === void 0 ? 0 : _e, _f = props.columnCount, columnCount = _f === void 0 ? 0 : _f, _g = props.scrollbarSize, scrollbarSize = _g === void 0 ? 15 : _g, _h = props.scrollToCellOffset, scrollToCellOffset = _h === void 0 ? 0 : _h, _j = props.extendScrollSize, extendScrollSize = _j === void 0 ? false : _j, autoFocus = props.autoFocus, onScroll = props.onScroll, onImmediateScroll = props.onImmediateScroll, _k = props.showScrollbar, showScrollbar = _k === void 0 ? true : _k, _l = props.selectionBackgroundColor, selectionBackgroundColor = _l === void 0 ? "rgb(14, 101, 235, 0.1)" : _l, _m = props.selectionBorderColor, selectionBorderColor = _m === void 0 ? "#1a73e8" : _m, _o = props.selectionStrokeWidth, selectionStrokeWidth = _o === void 0 ? 1 : _o, _p = props.activeCellStrokeWidth, activeCellStrokeWidth = _p === void 0 ? 2 : _p, activeCell = props.activeCell, _q = props.selections, selections = _q === void 0 ? EMPTY_ARRAY : _q, _r = props.frozenRows, frozenRows = _r === void 0 ? 0 : _r, _s = props.frozenColumns, frozenColumns = _s === void 0 ? 0 : _s, _t = props.itemRenderer, itemRenderer = _t === void 0 ? Cell_1.CellRenderer : _t, _u = props.headerRenderer, headerRenderer = _u === void 0 ? Cell_1.CellRenderer : _u, _v = props.enableCellOverlay, enableCellOverlay = _v === void 0 ? false : _v, _w = props.enableCellBackground, enableCellBackground = _w === void 0 ? true : _w, _x = props.overlayRenderer, overlayRenderer = _x === void 0 ? CellOverlay_1.CellRenderer : _x, backgroundRenderer = props.backgroundRenderer, _y = props.mergedCells, mergedCells = _y === void 0 ? EMPTY_ARRAY : _y, _z = props.snap, snap = _z === void 0 ? false : _z, _0 = props.scrollThrottleTimeout, scrollThrottleTimeout = _0 === void 0 ? 80 : _0, onViewPortChange = props.onViewPortChange, onDimensionsChange = props.onDimensionsChange, _1 = props.selectionRenderer, selectionRenderer = _1 === void 0 ? defaultSelectionRenderer : _1, onBeforeRenderRow = props.onBeforeRenderRow, onAfterScrollToCell = props.onAfterScrollToCell, _2 = props.showFrozenRowShadow, showFrozenRowShadow = _2 === void 0 ? false : _2, _3 = props.showFrozenColumnShadow, showFrozenColumnShadow = _3 === void 0 ? false : _3, _4 = props.shadowSettings, shadowSettings = _4 === void 0 ? defaultShadowSettings : _4, _5 = props.borderStyles, borderStyles = _5 === void 0 ? EMPTY_ARRAY : _5, children = props.children, gridChildren = props.gridChildren, stageProps = props.stageProps, wrapper = props.wrapper, _6 = props.showFillHandle, showFillHandle = _6 === void 0 ? false : _6, fillSelection = props.fillSelection, _7 = props.overscanCount, overscanCount = _7 === void 0 ? 1 : _7, _8 = props.fillHandleSize, fillHandleSize = _8 === void 0 ? 8 : _8, onFillHandleMouseDown = props.onFillHandleMouseDown, onFillHandleDoubleClick = props.onFillHandleDoubleClick, _9 = props.fillhandleBorderColor, fillhandleBorderColor = _9 === void 0 ? "white" : _9, _10 = props.fillHandleBackgroundColor, fillHandleBackgroundColor = _10 === void 0 ? selectionBorderColor : _10, _11 = props.showGridLines, showGridLines = _11 === void 0 ? false : _11, _12 = props.gridLineColor, gridLineColor = _12 === void 0 ? "#E3E2E2" : _12, _13 = props.gridLineWidth, gridLineWidth = _13 === void 0 ? 1 : _13, _14 = props.gridLineRenderer, gridLineRenderer = _14 === void 0 ? defaultGridLineRenderer : _14, isHiddenRow = props.isHiddenRow, visibleRowRanges = props.visibleRowRanges, isHiddenColumn = props.isHiddenColumn, isHiddenCell = props.isHiddenCell, isHiddenOverlay = props.isHiddenOverlay, isHiddenBackground = props.isHiddenBackground, _15 = props.scale, scale = _15 === void 0 ? 1 : _15, _16 = props.enableSelectionDrag, enableSelectionDrag = _16 === void 0 ? false : _16, _17 = props.isDraggingSelection, isDraggingSelection = _17 === void 0 ? false : _17, isTouchDevice = props.isTouchDevice, _18 = props.FillHandle, FillHandle = _18 === void 0 ? FillHandle_1.default : _18, showHeaders = props.showHeaders, _19 = props.frozenShadowThickness, frozenShadowThickness = _19 === void 0 ? 0 : _19, _20 = props.preventBrowserDefaultScroll, preventBrowserDefaultScroll = _20 === void 0 ? false : _20, _21 = props.footerHeight, footerHeight = _21 === void 0 ? 0 : _21, footerComponent = props.footerComponent, getOverflowBuffer = props.getOverflowBuffer, getFrozenColumnOverflowCells = props.getFrozenColumnOverflowCells, rest = tslib_1.__rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "scrollToCellOffset", "extendScrollSize", "autoFocus", "onScroll", "onImmediateScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "activeCellStrokeWidth", "activeCell", "selections", "frozenRows", "frozenColumns", "itemRenderer", "headerRenderer", "enableCellOverlay", "enableCellBackground", "overlayRenderer", "backgroundRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewPortChange", "onDimensionsChange", "selectionRenderer", "onBeforeRenderRow", "onAfterScrollToCell", "showFrozenRowShadow", "showFrozenColumnShadow", "shadowSettings", "borderStyles", "children", "gridChildren", "stageProps", "wrapper", "showFillHandle", "fillSelection", "overscanCount", "fillHandleSize", "onFillHandleMouseDown", "onFillHandleDoubleClick", "fillhandleBorderColor", "fillHandleBackgroundColor", "showGridLines", "gridLineColor", "gridLineWidth", "gridLineRenderer", "isHiddenRow", "visibleRowRanges", "isHiddenColumn", "isHiddenCell", "isHiddenOverlay", "isHiddenBackground", "scale", "enableSelectionDrag", "isDraggingSelection", "isTouchDevice", "FillHandle", "showHeaders", "frozenShadowThickness", "preventBrowserDefaultScroll", "footerHeight", "footerComponent", "getOverflowBuffer", "getFrozenColumnOverflowCells"]);
+    var instanceProps = (0, react_1.useRef)({
+        columnMetadataMap: new Map(),
+        rowMetadataMap: new Map(),
+        lastMeasuredColumnIndex: -1,
+        lastMeasuredRowIndex: -1,
+        estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+        estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+    });
+    var stageRef = (0, react_1.useRef)(null);
+    var rowHeaderStageRef = (0, react_1.useRef)(null);
+    var columnHeaderStageRef = (0, react_1.useRef)(null);
+    var containerRef = (0, react_1.useRef)(null);
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var verticalScrollRef = (0, react_1.useRef)(null);
+    var wheelingRef = (0, react_1.useRef)(null);
+    var horizontalScrollRef = (0, react_1.useRef)(null);
+    var isEndOfVerticalScrollRef = (0, react_1.useRef)(false);
+    var isStartOffVerticalScrollRef = (0, react_1.useRef)(false);
+    var _22 = tslib_1.__read((0, react_1.useReducer)(function (s) { return s + 1; }, 0), 2), _ = _22[0], forceRender = _22[1];
+    // Cell caching
+    var cellCacheRef = (0, react_1.useRef)(new Map());
+    var cellOverlayCacheRef = (0, react_1.useRef)(new Map());
+    var cellBackgroundCacheRef = (0, react_1.useRef)(new Map());
+    var _23 = tslib_1.__read((0, react_1.useState)({
+        scrollTop: 0,
+        scrollLeft: 0,
+        isScrolling: false,
+        verticalScrollDirection: types_1.Direction.Down,
+        horizontalScrollDirection: types_1.Direction.Right,
+    }), 2), scrollState = _23[0], setScrollState = _23[1];
+    var scrollSnapRefs = (0, react_1.useRef)(null);
+    var scrollTop = scrollState.scrollTop, scrollLeft = scrollState.scrollLeft, isScrolling = scrollState.isScrolling;
+    var isMounted = (0, react_1.useRef)(false);
+    /* Focus container */
+    var focusContainer = (0, react_1.useCallback)(function () {
+        var _a;
+        if (helpers_3.canUseDOM && document.activeElement !== containerRef.current) {
+            return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    /**
+     * Get top offset of rowIndex
+     */
+    var getRowOffset = (0, react_1.useCallback)(function (index, readonly) {
+        if (index < 0) {
+            return 0;
+        }
+        return (0, helpers_3.getRowOffset)({
+            index: index,
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            instanceProps: instanceProps.current,
+            scale: scale,
+            readonly: readonly,
+            visibleRowRanges: visibleRowRanges,
+        });
+    }, [rowHeight, columnWidth, scale, visibleRowRanges]);
+    /**
+     * Get lefft offset of columnIndex
+     */
+    var getColumnOffset = (0, react_1.useCallback)(function (index, readonly) {
+        if (index < 0) {
+            return 0;
+        }
+        return (0, helpers_3.getColumnOffset)({
+            index: index,
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            instanceProps: instanceProps.current,
+            scale: scale,
+            readonly: readonly,
+        });
+    }, [rowHeight, columnWidth, scale]);
+    /**
+     * Get height of rowIndex
+     */
+    var getRowHeight = (0, react_1.useCallback)(function (index) {
+        return (0, helpers_3.getRowHeight)(index, instanceProps.current);
+    }, []);
+    /**
+     * Get height of columNiondex
+     */
+    var getColumnWidth = (0, react_1.useCallback)(function (index) {
+        return (0, helpers_3.getColumnWidth)(index, instanceProps.current);
+    }, []);
+    /**
+     * onScroll callback
+     */
+    (0, react_1.useEffect)(function () {
+        if (!isMounted.current)
+            return;
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+    }, [scrollTop, scrollLeft, onScroll]);
+    /**
+     * Autofocus container
+     * Imperative focus, the `div` does not support autoFocus
+     * property
+     */
+    (0, react_1.useEffect)(function () {
+        if (autoFocus) {
+            focusContainer();
+        }
+    }, [autoFocus, focusContainer]);
+    /**
+     * Imperatively get the current scroll position
+     */
+    var getScrollPosition = (0, react_1.useCallback)(function () {
+        return {
+            scrollTop: scrollTop,
+            scrollLeft: scrollLeft,
+        };
+    }, [scrollTop, scrollLeft]);
+    /**
+     * Redraw grid
+     */
+    var redrawGrid = (0, react_1.useCallback)(function () {
+        var _a;
+        // Sync props
+        forceRender();
+        // Redraw camvas
+        (_a = stageRef.current) === null || _a === void 0 ? void 0 : _a.batchDraw();
+    }, []);
+    /**
+     * Create a map of merged cells
+     * [rowIndex, columnindex] => [parentRowIndex, parentColumnIndex]
+     */
+    var mergedCellMap = (0, react_1.useMemo)(function () {
+        var e_1, _a;
+        var mergedCellMap = new Map();
+        if (mergedCells) {
+            for (var i = 0; i < mergedCells.length; i++) {
+                var bounds = mergedCells[i];
+                try {
+                    for (var _b = (e_1 = void 0, tslib_1.__values((0, helpers_3.getBoundedCells)(bounds))), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var cell = _c.value;
+                        mergedCellMap.set(cell, bounds);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+        }
+        return mergedCellMap;
+    }, [mergedCells]);
+    /* Check if a cell is part of a merged cell */
+    var isMergedCell = (0, react_1.useCallback)(function (_a) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        return mergedCellMap.has((0, helpers_3.cellIdentifier)(rowIndex, columnIndex));
+    }, [mergedCellMap]);
+    /* Get top, left bounds of a cell */
+    var getCellBounds = (0, react_1.useCallback)(function (_a, spanMerges) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        if (spanMerges === void 0) { spanMerges = true; }
+        if (spanMerges) {
+            var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+            if (isMerged)
+                return mergedCellMap.get((0, helpers_3.cellIdentifier)(rowIndex, columnIndex));
+        }
+        return {
+            startRowIndex: rowIndex,
+            startColumnIndex: columnIndex,
+            endColumnIndex: columnIndex,
+            endRowIndex: rowIndex,
+        };
+    }, [mergedCellMap, isMergedCell]);
+    /* Get top, left bounds of a cell */
+    var getActualCellCoords = (0, react_1.useCallback)(function (_a) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+        if (isMerged) {
+            var cell = mergedCellMap.get((0, helpers_3.cellIdentifier)(rowIndex, columnIndex));
+            return {
+                rowIndex: cell === null || cell === void 0 ? void 0 : cell.startRowIndex,
+                columnIndex: cell === null || cell === void 0 ? void 0 : cell.startColumnIndex,
+            };
+        }
+        return {
+            rowIndex: rowIndex,
+            columnIndex: columnIndex,
+        };
+    }, [mergedCellMap, isMergedCell]);
+    /* Spacing for frozen row/column clip */
+    var frozenSpacing = 1;
+    var frozenColumnWidth = (0, react_1.useMemo)(function () { return getColumnOffset(frozenColumns); }, [frozenColumns, getColumnOffset]);
+    var frozenRowHeight = (0, react_1.useMemo)(function () { return getRowOffset(frozenRows); }, [frozenRows, getRowOffset]);
+    // Header columns dimensions: Only for Spreadsheet
+    var headerRowHeight = (0, react_1.useMemo)(function () { return getRowOffset(1) + frozenSpacing; }, [getRowOffset, frozenSpacing]);
+    var headerColumnWidth = (0, react_1.useMemo)(function () { return getColumnOffset(1) + frozenSpacing; }, [getColumnOffset, frozenSpacing]);
+    var _24 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var startIndex = (0, helpers_3.getRowStartIndexForOffset)({
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            rowCount: rowCount,
+            columnCount: columnCount,
+            instanceProps: instanceProps.current,
+            offset: scrollTop + frozenRowHeight,
+            scale: scale,
+        });
+        var stopIndex = (0, helpers_3.getRowStopIndexForStartIndex)({
+            startIndex: startIndex,
+            rowCount: rowCount,
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            scrollTop: scrollTop,
+            containerHeight: containerHeight,
+            instanceProps: instanceProps.current,
+            scale: scale,
+            visibleRowRanges: visibleRowRanges,
+        });
+        return [
+            Math.max(0, startIndex),
+            Math.max(0, Math.min(rowCount - 1, stopIndex)),
+            startIndex,
+            stopIndex,
+        ];
+    }, [
+        rowHeight,
+        columnWidth,
+        rowCount,
+        columnCount,
+        scale,
+        scrollTop,
+        containerHeight,
+        frozenRowHeight,
+        visibleRowRanges,
+    ]), 4), rowStartIndex = _24[0], rowStopIndex = _24[1], visibleRowStartIndex = _24[2], visibleRowStopIndex = _24[3];
+    var _25 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var _a;
+        var startIndex = (0, helpers_3.getColumnStartIndexForOffset)({
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            rowCount: rowCount,
+            columnCount: columnCount,
+            instanceProps: instanceProps.current,
+            offset: Math.max(0, scrollLeft +
+                frozenColumnWidth -
+                ((_a = getOverflowBuffer === null || getOverflowBuffer === void 0 ? void 0 : getOverflowBuffer(scrollLeft)) !== null && _a !== void 0 ? _a : 0)),
+            scale: scale,
+        });
+        var stopIndex = (0, helpers_3.getColumnStopIndexForStartIndex)({
+            startIndex: startIndex,
+            columnCount: columnCount,
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            scrollLeft: scrollLeft,
+            containerWidth: containerWidth,
+            instanceProps: instanceProps.current,
+            scale: scale,
+        });
+        // Text overflow can be made visible with a higher
+        // overscanCount
+        return [
+            Math.max(0, startIndex - overscanCount),
+            Math.max(0, Math.min(columnCount - 1, stopIndex)),
+            startIndex,
+            stopIndex,
+        ];
+    }, [
+        rowHeight,
+        columnWidth,
+        rowCount,
+        columnCount,
+        scale,
+        containerWidth,
+        scrollLeft,
+        overscanCount,
+        frozenColumnWidth,
+        getOverflowBuffer,
+    ]), 4), columnStartIndex = _25[0], columnStopIndex = _25[1], visibleColumnStartIndex = _25[2], visibleColumnStopIndex = _25[3];
+    /**
+     * Get visible row indices within the viewport range.
+     * Uses visibleRowRanges for O(r) iteration when available,
+     * otherwise falls back to checking isHiddenRow for each row.
+     */
+    var getVisibleRowIndices = (0, react_1.useCallback)(function (startIndex, stopIndex, skipFrozen) {
+        var e_2, _a;
+        if (skipFrozen === void 0) { skipFrozen = true; }
+        var indices = [];
+        if (visibleRowRanges) {
+            try {
+                // Use pre-computed ranges for efficient iteration
+                for (var visibleRowRanges_1 = tslib_1.__values(visibleRowRanges), visibleRowRanges_1_1 = visibleRowRanges_1.next(); !visibleRowRanges_1_1.done; visibleRowRanges_1_1 = visibleRowRanges_1.next()) {
+                    var range = visibleRowRanges_1_1.value;
+                    // Skip ranges entirely before our viewport
+                    if (range.end < startIndex)
+                        continue;
+                    // Stop if we've passed the viewport
+                    if (range.start > stopIndex)
+                        break;
+                    var effectiveStart = Math.max(range.start, startIndex);
+                    var effectiveEnd = Math.min(range.end, stopIndex);
+                    for (var rowIndex = effectiveStart; rowIndex <= effectiveEnd; rowIndex++) {
+                        if (skipFrozen && rowIndex < frozenRows)
+                            continue;
+                        indices.push(rowIndex);
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (visibleRowRanges_1_1 && !visibleRowRanges_1_1.done && (_a = visibleRowRanges_1.return)) _a.call(visibleRowRanges_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+        else {
+            // Fallback to checking each row
+            for (var rowIndex = startIndex; rowIndex <= stopIndex; rowIndex++) {
+                if (skipFrozen && rowIndex < frozenRows)
+                    continue;
+                if (isHiddenRow === null || isHiddenRow === void 0 ? void 0 : isHiddenRow(rowIndex))
+                    continue;
+                indices.push(rowIndex);
+            }
+        }
+        return indices;
+    }, [visibleRowRanges, isHiddenRow, frozenRows]);
+    var estimatedTotalHeight = (0, react_1.useMemo)(function () { return (0, helpers_3.getEstimatedTotalHeight)(rowCount, instanceProps.current); }, [rowCount, instanceProps.current.lastMeasuredRowIndex, rowHeight]);
+    var estimatedTotalWidth = (0, react_1.useMemo)(function () { return (0, helpers_3.getEstimatedTotalWidth)(columnCount, instanceProps.current); }, [columnCount, instanceProps.current.lastMeasuredColumnIndex, columnWidth]);
+    /* Method to get dimensions of the grid */
+    var getDimensions = (0, react_1.useCallback)(function () {
+        return {
+            containerWidth: containerWidth,
+            containerHeight: containerHeight,
+            estimatedTotalWidth: estimatedTotalWidth,
+            estimatedTotalHeight: estimatedTotalHeight,
+        };
+    }, [
+        containerWidth,
+        containerHeight,
+        estimatedTotalWidth,
+        estimatedTotalHeight,
+    ]);
+    /**
+     * Update snap properties if its active
+     * We need this because we are binding `onwheel` event to document
+     * So props go stale
+     */
+    (0, helpers_3.useIsomorphicLayoutEffect)(function () {
+        if (snap) {
+            scrollSnapRefs.current = {
+                visibleRowStartIndex: visibleRowStartIndex,
+                rowCount: rowCount,
+                visibleColumnStartIndex: visibleColumnStartIndex,
+                columnCount: columnCount,
+            };
+        }
+    }, [
+        snap,
+        visibleRowStartIndex,
+        rowCount,
+        visibleColumnStartIndex,
+        columnCount,
+    ]);
+    /**
+     * Snaps vertical scrollbar to the next/prev visible row
+     */
+    var snapToRowFn = (0, react_1.useCallback)(function (_a) {
+        var deltaY = _a.deltaY;
+        if (!verticalScrollRef.current || !scrollSnapRefs.current)
+            return;
+        if (deltaY !== 0) {
+            var direction = deltaY < 0 ? types_1.Direction.Up : types_1.Direction.Down;
+            var index = (0, helpers_2.getScrollIncrement)(deltaY, DEFAULT_ROW_HEIGHT);
+            var _b = scrollSnapRefs.current, visibleRowStartIndex_1 = _b.visibleRowStartIndex, rowCount_1 = _b.rowCount;
+            var nextVisibleRow = (0, helpers_3.clampIndex)(visibleRowStartIndex_1 + (direction === types_1.Direction.Down ? 1 : -1), isHiddenRow, direction);
+            var nextIndex = direction === types_1.Direction.Up
+                ? // User is scrolling up
+                    Math.max(0, nextVisibleRow - index)
+                : Math.min(nextVisibleRow + index, rowCount_1 - 1);
+            /* Ignore hidden row */
+            nextIndex = (0, helpers_3.clampIndex)(nextIndex, isHiddenRow, direction);
+            var rowOffset = getRowOffset(nextIndex) - frozenRowHeight;
+            verticalScrollRef.current.scrollTo({
+                top: rowOffset,
+                behavior: "auto",
+            });
+        }
+    }, [getRowOffset, isHiddenRow, frozenRowHeight]);
+    /**
+     * Snaps horizontal scrollbar to the next/prev visible column
+     */
+    var snapToColumnFn = (0, react_1.useCallback)(function (_a) {
+        var deltaX = _a.deltaX;
+        if (!horizontalScrollRef.current || !scrollSnapRefs.current)
+            return;
+        if (deltaX !== 0) {
+            var index = (0, helpers_2.getScrollIncrement)(deltaX, DEFAULT_COLUMN_WIDTH); // Min column width
+            var direction = deltaX < 0 ? types_1.Direction.Left : types_1.Direction.Right;
+            var _b = scrollSnapRefs.current, visibleColumnStartIndex_1 = _b.visibleColumnStartIndex, columnCount_1 = _b.columnCount;
+            var nextVisibleColumn = (0, helpers_3.clampIndex)(visibleColumnStartIndex_1 + (direction === types_1.Direction.Right ? 1 : -1), isHiddenColumn, direction);
+            var nextIndex = direction === types_1.Direction.Left
+                ? Math.max(0, nextVisibleColumn - index)
+                : Math.min(nextVisibleColumn + index, columnCount_1 - 1);
+            /* Ignore hidden column */
+            nextIndex = (0, helpers_3.clampIndex)(nextIndex, isHiddenColumn, direction);
+            var columnOffset = getColumnOffset(nextIndex) - frozenColumnWidth;
+            horizontalScrollRef.current.scrollTo({
+                left: columnOffset,
+                behavior: "auto",
+            });
+        }
+    }, [getColumnOffset, isHiddenColumn, frozenColumnWidth]);
+    var snapToRowThrottler = (0, react_1.useRef)(undefined);
+    var snapToColumnThrottler = (0, react_1.useRef)(undefined);
+    /**
+     * Register snap throttlers
+     */
+    (0, helpers_3.useIsomorphicLayoutEffect)(function () {
+        if (snap) {
+            snapToRowThrottler.current = (0, helpers_1.ricThrottle)(snapToRowFn);
+            snapToColumnThrottler.current = (0, helpers_1.ricThrottle)(snapToColumnFn);
+        }
+        return function () {
+            snapToRowThrottler.current = undefined;
+            snapToColumnThrottler.current = undefined;
+        };
+    }, [snap, scrollThrottleTimeout, snapToColumnFn, snapToRowFn]);
+    /* Find frozen column boundary */
+    var isWithinFrozenColumnBoundary = (0, react_1.useCallback)(function (x) {
+        return frozenColumns > 0 && x < frozenColumnWidth;
+    }, [frozenColumns, frozenColumnWidth]);
+    /* Find frozen row boundary */
+    var isWithinFrozenRowBoundary = (0, react_1.useCallback)(function (y) {
+        return frozenRows > 0 && y < frozenRowHeight;
+    }, [frozenRows, frozenRowHeight]);
+    /**
+     * Get relative mouse position
+     */
+    var getRelativePositionFromOffset = (0, react_1.useCallback)(function (left, top) {
+        var _a;
+        (0, tiny_invariant_1.default)(typeof left === "number" && typeof top === "number", "Top and left should be a number");
+        if (!stageRef.current) {
+            return undefined;
+        }
+        var stage = stageRef.current.getStage();
+        var rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            left = left - rect.x;
+            top = top - rect.y;
+        }
+        var _b = stage
+            .getAbsoluteTransform()
+            .copy()
+            .invert()
+            .point({ x: left, y: top }), x = _b.x, y = _b.y;
+        return { x: x, y: y };
+    }, []);
+    /**
+     * Get position absolute to document
+     * from relative grid coordinates
+     */
+    var getAbsolutePositionFromOffset = (0, react_1.useCallback)(function (x, y) {
+        var _a;
+        var rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            x = x + rect.x;
+            y = y + rect.y;
+        }
+        return {
+            x: x,
+            y: y,
+        };
+    }, []);
+    /**
+     * Get cell cordinates from current mouse x/y positions
+     */
+    var getCellCoordsFromOffset = (0, react_1.useCallback)(function (left, top, includeFrozen) {
+        if (includeFrozen === void 0) { includeFrozen = true; }
+        var pos = getRelativePositionFromOffset(left, top);
+        if (!pos)
+            return undefined;
+        var x = pos.x, y = pos.y;
+        var rowOffset = includeFrozen && isWithinFrozenRowBoundary(y) ? y : y + scrollTop;
+        var columnOffset = includeFrozen && isWithinFrozenColumnBoundary(x) ? x : x + scrollLeft;
+        if (rowOffset > estimatedTotalHeight ||
+            columnOffset > estimatedTotalWidth) {
+            return undefined;
+        }
+        var rowIndex = (0, helpers_3.getRowStartIndexForOffset)({
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            rowCount: rowCount,
+            columnCount: columnCount,
+            instanceProps: instanceProps.current,
+            offset: rowOffset,
+            scale: scale,
+        });
+        var columnIndex = (0, helpers_3.getColumnStartIndexForOffset)({
+            rowHeight: rowHeight,
+            columnWidth: columnWidth,
+            rowCount: rowCount,
+            columnCount: columnCount,
+            instanceProps: instanceProps.current,
+            offset: columnOffset,
+            scale: scale,
+        });
+        /* To be compatible with merged cells */
+        var bounds = getCellBounds({ rowIndex: rowIndex, columnIndex: columnIndex });
+        return {
+            rowIndex: bounds.startRowIndex,
+            columnIndex: bounds.startColumnIndex,
+        };
+    }, [
+        scale,
+        scrollLeft,
+        rowHeight,
+        columnWidth,
+        scrollTop,
+        rowCount,
+        estimatedTotalHeight,
+        estimatedTotalWidth,
+        columnCount,
+        isWithinFrozenRowBoundary,
+        isWithinFrozenColumnBoundary,
+        getRelativePositionFromOffset,
+        getCellBounds,
+    ]);
+    /**
+     * Get cell offset position from rowIndex, columnIndex
+     *
+     */
+    var getCellOffsetFromCoords = (0, react_1.useCallback)(function (cell, readonly) {
+        var _a = getCellBounds(cell), startRowIndex = _a.startRowIndex, startColumnIndex = _a.startColumnIndex, endColumnIndex = _a.endColumnIndex, endRowIndex = _a.endRowIndex;
+        var x = getColumnOffset(startColumnIndex, readonly);
+        var y = getRowOffset(startRowIndex, readonly);
+        var width = getColumnOffset(endColumnIndex + 1, readonly) - x;
+        var height = getRowOffset(endRowIndex + 1, readonly) - y;
+        return {
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+        };
+    }, [getColumnOffset, getRowOffset, getCellBounds]);
+    /* Get current view port of the grid */
+    var getViewPort = (0, helpers_2.useCallbackRef)((0, react_1.useCallback)(function () {
+        return {
+            rowStartIndex: rowStartIndex,
+            rowStopIndex: rowStopIndex,
+            columnStartIndex: columnStartIndex,
+            columnStopIndex: columnStopIndex,
+            visibleRowStartIndex: visibleRowStartIndex,
+            visibleRowStopIndex: visibleRowStopIndex,
+            visibleColumnStartIndex: visibleColumnStartIndex,
+            visibleColumnStopIndex: visibleColumnStopIndex,
+        };
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        visibleRowStartIndex,
+        visibleRowStopIndex,
+        visibleColumnStartIndex,
+        visibleColumnStopIndex,
+    ]));
+    // Scrollbars
+    var scrollbarXContainterWidth = containerWidth - frozenColumnWidth;
+    var scrollbarXWidth = estimatedTotalWidth -
+        frozenColumnWidth +
+        (extendScrollSize ? scrollbarSize : 0);
+    var scrollbarYContainterHeight = containerHeight - frozenRowHeight;
+    var scrollbarYHeight = estimatedTotalHeight -
+        frozenRowHeight +
+        (extendScrollSize ? scrollbarSize : 0) +
+        (footerHeight > 0 ? footerHeight - scrollbarSize : 0);
+    var showScrollbarX = showScrollbar && scrollbarXWidth > scrollbarXContainterWidth;
+    var showScrollbarY = showScrollbar && scrollbarYHeight > scrollbarYContainterHeight;
+    var needsScaling = scrollbarYHeight > MAX_SCROLLBAR_HEIGHT;
+    var effectiveScrollbarYHeight = Math.min(MAX_SCROLLBAR_HEIGHT, scrollbarYHeight);
+    /**
+     * Clears the cell cache
+     * when scrolling is done or when user changes sheet
+     */
+    var clearCache = (0, react_1.useCallback)(function () {
+        cellCacheRef.current.clear();
+        cellOverlayCacheRef.current.clear();
+        cellBackgroundCacheRef.current.clear();
+    }, []);
+    /**
+     * Conditionally get and set cell cache and return cell
+     */
+    var getCellCache = (0, react_1.useCallback)(function (cache, cellId, nodeGetter, isScrolling, isMerged) {
+        if (isMerged === void 0) { isMerged = false; }
+        var cell = isScrolling && !isMerged && cache.has(cellId)
+            ? cache.get(cellId)
+            : nodeGetter();
+        // Get it from cache
+        if (isScrolling && !cache.has(cellId)) {
+            cache.set(cellId, cell);
+        }
+        return cell;
+    }, []);
+    /* Redraw grid imperatively */
+    var resetAfterIndices = (0, react_1.useCallback)(function (_a, shouldForceUpdate) {
+        var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex;
+        if (shouldForceUpdate === void 0) { shouldForceUpdate = true; }
+        if (typeof columnIndex === "number") {
+            instanceProps.current.lastMeasuredColumnIndex = Math.min(instanceProps.current.lastMeasuredColumnIndex, columnIndex - 1);
+        }
+        if (typeof rowIndex === "number") {
+            instanceProps.current.lastMeasuredRowIndex = Math.min(instanceProps.current.lastMeasuredRowIndex, rowIndex - 1);
+        }
+        clearCache();
+        if (shouldForceUpdate)
+            forceRender();
+    }, [clearCache]);
+    /**
+     * Resize one or more columns
+     * Update columnMetadataMap
+     * lastMeasuredRowIndex or lastMeasuredColumnIndex
+     *
+     * This fixes unexpected rendering issue where
+     * 1. User resizes a column - And informs the grid that from column 2 needs to be repainted and updates the state
+     * 2. In the render, function, use uses getCellOffsetFromCoords, which changes the lastMeasured indexes
+     * 3. 2) Will happen before state has been updated and it wont queue column from 1) to be resized
+     */
+    var resizeColumn = (0, react_1.useCallback)(function (index, dimension) {
+        instanceProps.current.columnMetadataMap.get(index).size = dimension;
+        resetAfterIndices({ columnIndex: index }, false);
+    }, [resetAfterIndices]);
+    /**
+     * Resize one or more rows
+     */
+    var resizeRow = (0, react_1.useCallback)(function (index, dimension) {
+        instanceProps.current.rowMetadataMap.get(index).size = dimension;
+        resetAfterIndices({ rowIndex: index + 1 }, false);
+    }, [resetAfterIndices]);
+    /* Expose some methods in ref */
+    (0, react_1.useImperativeHandle)(forwardedRef, function () {
+        return {
+            scrollTo: scrollTo,
+            scrollBy: scrollBy,
+            scrollToCell: scrollToCell,
+            stage: stageRef.current,
+            rowHeaderStage: rowHeaderStageRef.current,
+            columnHeaderStage: columnHeaderStageRef.current,
+            container: containerRef.current,
+            resetAfterIndices: resetAfterIndices,
+            getScrollPosition: getScrollPosition,
+            isMergedCell: isMergedCell,
+            getCellBounds: getCellBounds,
+            getCellCoordsFromOffset: getCellCoordsFromOffset,
+            getCellOffsetFromCoords: getCellOffsetFromCoords,
+            getActualCellCoords: getActualCellCoords,
+            focus: focusContainer,
+            resizeColumn: resizeColumn,
+            resizeRow: resizeRow,
+            getViewPort: getViewPort,
+            getRelativePositionFromOffset: getRelativePositionFromOffset,
+            getAbsolutePositionFromOffset: getAbsolutePositionFromOffset,
+            scrollToTop: scrollToTop,
+            scrollToBottom: scrollToBottom,
+            getDimensions: getDimensions,
+            getRowOffset: getRowOffset,
+            getColumnOffset: getColumnOffset,
+            redrawGrid: redrawGrid,
+            clearCache: clearCache,
+        };
+    });
+    /**
+     * When the grid is scrolling,
+     * 1. Stage does not listen to any mouse events
+     * 2. Div container does not listen to pointer events
+     */
+    /* Reset isScrolling */
+    var resetIsScrolling = (0, react_1.useCallback)(function () {
+        resetIsScrollingTimeoutID.current = null;
+        // Reset cell cache
+        clearCache();
+        setScrollState(function (prev) {
+            // Only if required
+            if (prev.isScrolling === false) {
+                return prev;
+            }
+            return tslib_1.__assign(tslib_1.__assign({}, prev), { isScrolling: false });
+        });
+    }, [clearCache]);
+    var resetIsScrollingTimeoutID = (0, react_1.useRef)(null);
+    var resetIsScrollingDebounced = (0, react_1.useCallback)(function () {
+        if (resetIsScrollingTimeoutID.current !== null) {
+            (0, helpers_3.cancelTimeout)(resetIsScrollingTimeoutID.current);
+        }
+        resetIsScrollingTimeoutID.current = (0, helpers_3.requestTimeout)(resetIsScrolling, exports.RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL);
+    }, [resetIsScrolling]);
+    /* Handle vertical scroll */
+    var handleScroll = (0, react_1.useCallback)(function (e) {
+        var scrollTop = e.currentTarget.scrollTop;
+        // Calculate what percentage of the scrollable area has been scrolled
+        // Apply scaling if needed
+        var scaledScrollTop = needsScaling
+            ? (scrollTop /
+                (effectiveScrollbarYHeight - scrollbarYContainterHeight)) *
+                (scrollbarYHeight - scrollbarYContainterHeight)
+            : scrollTop;
+        setScrollState(function (prev) {
+            // Only setstate if required
+            if (prev.scrollTop === scaledScrollTop) {
+                return prev;
+            }
+            return tslib_1.__assign(tslib_1.__assign({}, prev), { isScrolling: true, verticalScrollDirection: prev.scrollTop > scaledScrollTop ? types_1.Direction.Up : types_1.Direction.Down, scrollTop: scaledScrollTop });
+        });
+        /* Scroll callbacks */
+        onImmediateScroll === null || onImmediateScroll === void 0 ? void 0 : onImmediateScroll({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+        /* Reset isScrolling if required */
+        resetIsScrollingDebounced();
+    }, [
+        scrollLeft,
+        needsScaling,
+        effectiveScrollbarYHeight,
+        scrollbarYHeight,
+        scrollbarYContainterHeight,
+        onImmediateScroll,
+        resetIsScrollingDebounced,
+    ]);
+    /* Handle horizontal scroll */
+    var handleScrollLeft = (0, react_1.useCallback)(function (e) {
+        var scrollLeft = e.currentTarget.scrollLeft;
+        setScrollState(function (prev) {
+            // Only setstate if required
+            if (prev.scrollLeft === scrollLeft) {
+                return prev;
+            }
+            return tslib_1.__assign(tslib_1.__assign({}, prev), { isScrolling: true, horizontalScrollDirection: prev.scrollLeft > scrollLeft ? types_1.Direction.Left : types_1.Direction.Right, scrollLeft: scrollLeft });
+        });
+        /* Scroll callbacks */
+        onImmediateScroll === null || onImmediateScroll === void 0 ? void 0 : onImmediateScroll({ scrollLeft: scrollLeft, scrollTop: scrollTop });
+        /* Reset isScrolling if required */
+        resetIsScrollingDebounced();
+    }, [scrollTop, onImmediateScroll, resetIsScrollingDebounced]);
+    /* Scroll based on left, top position */
+    var scrollTo = (0, react_1.useCallback)(function (_a, 
+    // On touch devices, moving the scrollbars causes
+    // scroll flicker
+    // But when a sheet is changed, we need to immediately
+    // update the scroll state
+    // immediate is only set, when user switches to a new sheet
+    // Use with care
+    immediate) {
+        var _b, _c;
+        var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
+        // Only update state in non-touch
+        // devices, otherwise it causes flickering
+        // because of scrollbar state updates
+        if (!isTouchDevice || immediate) {
+            setScrollState(function (prev) {
+                return tslib_1.__assign(tslib_1.__assign({}, prev), { scrollLeft: scrollLeft == void 0 ? prev.scrollLeft : scrollLeft, scrollTop: scrollTop == void 0 ? prev.scrollTop : scrollTop });
+            });
+        }
+        if (showScrollbar) {
+            /* If scrollbar is visible, lets update it which triggers a state change */
+            if (scrollLeft !== void 0) {
+                (_b = horizontalScrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                    left: scrollLeft,
+                    behavior: "auto",
+                });
+            }
+            if (scrollTop !== void 0) {
+                // Apply scaling if needed
+                var scaledScrollTop = needsScaling
+                    ? (scrollTop / (scrollbarYHeight - scrollbarYContainterHeight)) *
+                        (effectiveScrollbarYHeight - scrollbarYContainterHeight)
+                    : scrollTop;
+                (_c = verticalScrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollTo({
+                    top: scaledScrollTop,
+                    behavior: "auto",
+                });
+            }
+        }
+    }, [
+        showScrollbar,
+        needsScaling,
+        effectiveScrollbarYHeight,
+        scrollbarYHeight,
+        scrollbarYContainterHeight,
+        isTouchDevice,
+    ]);
+    /* Scroll grid to top */
+    var scrollToTop = (0, react_1.useCallback)(function () {
+        scrollTo({ scrollTop: 0, scrollLeft: 0 });
+    }, [scrollTo]);
+    /* Scroll grid to bottom */
+    var scrollToBottom = (0, react_1.useCallback)(function () {
+        scrollTo({
+            scrollTop: Math.floor(estimatedTotalHeight - containerHeight + footerHeight),
+        });
+    }, [estimatedTotalHeight, containerHeight, footerHeight, scrollTo]);
+    /**
+     * Scrollby utility
+     */
+    var scrollBy = (0, react_1.useCallback)(function (_a) {
+        var x = _a.x, y = _a.y;
+        setScrollState(function (prev) {
+            return tslib_1.__assign(tslib_1.__assign({}, prev), { scrollLeft: x == void 0 ? prev.scrollLeft : prev.scrollLeft + x, scrollTop: y == void 0 ? prev.scrollTop : prev.scrollTop + y });
+        });
+        if (showScrollbar) {
+            if (horizontalScrollRef.current && x !== void 0)
+                horizontalScrollRef.current.scrollBy({ left: x, behavior: "auto" });
+            if (verticalScrollRef.current && y !== void 0)
+                verticalScrollRef.current.scrollBy({ top: y, behavior: "auto" });
+        }
+    }, [showScrollbar]);
+    /**
+     * Scrolls to cell
+     * Respects frozen rows and columns
+     */
+    var scrollToCell = (0, react_1.useCallback)(function (_a, align) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        if (align === void 0) { align = helpers_3.Align.auto; }
+        var isFrozenRow = rowIndex !== void 0 && rowIndex < frozenRows;
+        var isFrozenColumn = columnIndex !== void 0 && columnIndex < frozenColumns;
+        var frozenColumnOffset = getColumnOffset(frozenColumns);
+        /* Making sure getColumnWidth works */
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var x = columnIndex !== void 0 ? getColumnOffset(columnIndex) : void 0;
+        /* Making sure getRowHeight works */
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var y = rowIndex !== void 0 ? getRowOffset(rowIndex) : void 0;
+        var width = columnIndex !== void 0 ? getColumnWidth(columnIndex) : 0;
+        var height = rowIndex !== void 0 ? getRowHeight(rowIndex) : 0;
+        var columnAlign = width > containerWidth ? helpers_3.Align.start : align;
+        var rowAlign = height > containerHeight ? helpers_3.Align.start : align;
+        var newScrollLeft = columnIndex !== void 0 && !isFrozenColumn
+            ? Math.floor((0, helpers_3.getOffsetForColumnAndAlignment)({
+                index: columnIndex,
+                containerHeight: containerHeight,
+                containerWidth: containerWidth,
+                columnCount: columnCount,
+                columnWidth: columnWidth,
+                rowCount: rowCount,
+                rowHeight: rowHeight,
+                scrollOffset: scrollLeft,
+                instanceProps: instanceProps.current,
+                scrollbarSize: scrollbarSize +
+                    (columnIndex === columnCount - 1 ? 0 : scrollToCellOffset),
+                frozenOffset: frozenColumnOffset,
+                align: columnAlign,
+                scale: scale,
+                estimatedTotalWidth: estimatedTotalWidth,
+                estimatedTotalHeight: estimatedTotalHeight,
+            }))
+            : void 0;
+        var frozenRowOffset = getRowOffset(frozenRows);
+        var newScrollTop = rowIndex !== void 0 && !isFrozenRow
+            ? Math.floor((0, helpers_3.getOffsetForRowAndAlignment)({
+                index: rowIndex,
+                containerHeight: containerHeight,
+                containerWidth: containerWidth,
+                columnCount: columnCount,
+                columnWidth: columnWidth,
+                rowCount: rowCount,
+                rowHeight: rowHeight,
+                scrollOffset: scrollTop,
+                instanceProps: instanceProps.current,
+                scrollbarSize: scrollbarSize +
+                    (rowIndex === rowCount - 1 ? 0 : scrollToCellOffset),
+                frozenOffset: frozenRowOffset,
+                align: rowAlign,
+                scale: scale,
+                estimatedTotalWidth: estimatedTotalWidth,
+                estimatedTotalHeight: estimatedTotalHeight + footerHeight,
+            }))
+            : void 0;
+        // We already reached bottom of the last cell
+        // If scrolling to last row and already at bottom, reveal the footer
+        // if (
+        //   scrollTop > 0 &&
+        //   newScrollTop !== void 0 &&
+        //   newScrollTop === scrollTop &&
+        //   rowIndex === rowCount - 1 &&
+        //   footerHeight > 0
+        // ) {
+        //   const maxContentScroll = estimatedTotalHeight - containerHeight;
+        //   const maxScrollWithFooter = maxContentScroll + footerHeight;
+        //   // Only reveal footer if we haven't scrolled past the content yet
+        //   if (scrollTop < maxScrollWithFooter) {
+        //     newScrollTop = scrollTop + footerHeight;
+        //   }
+        // }
+        var isOutsideViewport = (rowIndex !== void 0 &&
+            rowIndex > rowStopIndex + (rowStopIndex - rowStartIndex)) ||
+            (columnIndex !== void 0 &&
+                columnIndex >
+                    columnStopIndex + (columnStopIndex - columnStartIndex));
+        if (isOutsideViewport) {
+            requestAnimationFrame(function () {
+                scrollTo({
+                    scrollLeft: newScrollLeft,
+                    scrollTop: newScrollTop,
+                });
+            });
+        }
+        else {
+            scrollTo({
+                scrollLeft: newScrollLeft,
+                scrollTop: newScrollTop,
+            });
+        }
+        // After scroll to cell callback
+        onAfterScrollToCell === null || onAfterScrollToCell === void 0 ? void 0 : onAfterScrollToCell(newScrollLeft, newScrollTop);
+    }, [
+        containerHeight,
+        columnStartIndex,
+        columnStopIndex,
+        rowStartIndex,
+        rowStopIndex,
+        containerWidth,
+        estimatedTotalWidth,
+        estimatedTotalHeight,
+        rowCount,
+        columnCount,
+        scrollbarSize,
+        scrollToCellOffset,
+        scrollLeft,
+        scrollTop,
+        frozenRows,
+        frozenColumns,
+        columnWidth,
+        getColumnOffset,
+        getColumnWidth,
+        getRowHeight,
+        getRowOffset,
+        rowHeight,
+        scale,
+        scrollTo,
+        onAfterScrollToCell,
+        footerHeight,
+    ]);
+    /**
+     * React to changes in rowCount or columnCount
+     */
+    if (visibleRowStopIndex > rowCount ||
+        visibleColumnStopIndex > columnCount) {
+        scrollToTop();
+    }
+    // Check if we have reached end of vertical scroll
+    isEndOfVerticalScrollRef.current =
+        estimatedTotalHeight ===
+            scrollState.scrollTop + containerHeight - scrollbarSize;
+    isStartOffVerticalScrollRef.current = scrollState.scrollTop === 0;
+    /**
+     * Fired when user tries to scroll the canvas
+     */
+    var handleWheel = (0, react_1.useCallback)(function (event) {
+        var _a, _b;
+        /* If user presses shift key, scroll horizontally */
+        var isCtrlKey = event.ctrlKey;
+        var isMetaKey = event.metaKey;
+        // Ctrl and meta key are used for zooming
+        if (isCtrlKey || isMetaKey) {
+            // Disable wheel event on ctrl key
+            event.preventDefault();
+            return;
+        }
+        var isScrollingHorizontally = event.shiftKey;
+        var deltaX = event.deltaX, deltaY = event.deltaY, deltaMode = event.deltaMode;
+        var isVerticalEndOfScroll = !isScrollingHorizontally &&
+            ((isEndOfVerticalScrollRef.current && deltaY > 0) ||
+                (isStartOffVerticalScrollRef.current && deltaY < 0));
+        var isUserSwipingLeft = Math.abs(deltaX) > 0;
+        var shouldPreventDefault = preventBrowserDefaultScroll
+            ? true
+            : !isVerticalEndOfScroll || isUserSwipingLeft;
+        // There is a bug currently which enables swipe to back and forward
+        // when isStartOffVerticalScrollRef and isEndOfVerticalScrollRef is true
+        // Need more user research to understand what is the expectation here
+        // Should swipe back and forward be disabled completely in the grid?
+        // Or should it be enabled if user is at the top/bottom/left/right
+        // i.e. end of the grid ?
+        // deltaX === 0
+        /* Prevent browser back in Mac */
+        // Mac, swipe to back or forward will not work with
+        // this grid. But that can be achieved by checking
+        // StartOfHorizontalScroll and EndOfHorizontalScroll
+        // Todo: when users requests this
+        if (shouldPreventDefault) {
+            event.preventDefault();
+        }
+        /* Scroll natively */
+        if (wheelingRef.current) {
+            return;
+        }
+        var dx = isScrollingHorizontally
+            ? deltaY === 0
+                ? deltaX
+                : deltaY
+            : deltaX;
+        var dy = deltaY;
+        /* If snaps are active */
+        if (snap) {
+            /* Scroll only in one direction */
+            var isHorizontal = isScrollingHorizontally || Math.abs(dx) > Math.abs(dy);
+            if (isHorizontal) {
+                (_a = snapToColumnThrottler.current) === null || _a === void 0 ? void 0 : _a.call(snapToColumnThrottler, {
+                    deltaX: deltaX,
+                });
+            }
+            else {
+                (_b = snapToRowThrottler.current) === null || _b === void 0 ? void 0 : _b.call(snapToRowThrottler, {
+                    deltaY: deltaY,
+                });
+            }
+            return;
+        }
+        if (deltaMode === event.DOM_DELTA_LINE) {
+            if (isScrollingHorizontally) {
+                dx *= DEFAULT_COLUMN_WIDTH;
+            }
+            else {
+                dy *= DEFAULT_ROW_HEIGHT;
+            }
+        }
+        if (!horizontalScrollRef.current && !verticalScrollRef.current) {
+            return;
+        }
+        wheelingRef.current = window.requestAnimationFrame(function () {
+            var _a, _b, _c;
+            wheelingRef.current = null;
+            if (isScrollingHorizontally) {
+                (_a = horizontalScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
+                    left: dx,
+                    behavior: "auto",
+                });
+            }
+            else {
+                (_b = horizontalScrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollBy({
+                    left: dx,
+                    behavior: "auto",
+                });
+                (_c = verticalScrollRef.current) === null || _c === void 0 ? void 0 : _c.scrollBy({
+                    top: dy,
+                    behavior: "auto",
+                });
+            }
+        });
+    }, [snap, preventBrowserDefaultScroll]);
+    /**
+     * Handle mouse wheeel
+     */
+    (0, react_1.useEffect)(function () {
+        var scrollContainer = scrollContainerRef.current;
+        scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener("wheel", handleWheel, {
+            passive: false,
+        });
+        isMounted.current = true;
+        return function () {
+            scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener("wheel", handleWheel);
+        };
+    }, [handleWheel]);
+    /* Callback when visible rows or columns have changed */
+    (0, react_1.useEffect)(function () {
+        onViewPortChange === null || onViewPortChange === void 0 ? void 0 : onViewPortChange({
+            rowStartIndex: rowStartIndex,
+            rowStopIndex: rowStopIndex,
+            columnStartIndex: columnStartIndex,
+            columnStopIndex: columnStopIndex,
+            visibleRowStartIndex: visibleRowStartIndex,
+            visibleRowStopIndex: visibleRowStopIndex,
+            visibleColumnStartIndex: visibleColumnStartIndex,
+            visibleColumnStopIndex: visibleColumnStopIndex,
+        });
+    }, [
+        onViewPortChange,
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        visibleRowStartIndex,
+        visibleRowStopIndex,
+        visibleColumnStartIndex,
+        visibleColumnStopIndex,
+    ]);
+    // Callback when grid dimensions change
+    (0, react_1.useEffect)(function () {
+        if (!isScrolling) {
+            onDimensionsChange === null || onDimensionsChange === void 0 ? void 0 : onDimensionsChange({
+                containerWidth: containerWidth - frozenColumnWidth,
+                containerHeight: containerHeight - frozenRowHeight,
+                estimatedTotalWidth: estimatedTotalWidth -
+                    frozenColumnWidth +
+                    (extendScrollSize ? scrollbarSize : 0),
+                estimatedTotalHeight: estimatedTotalHeight -
+                    frozenRowHeight +
+                    (extendScrollSize ? scrollbarSize : 0),
+            });
+        }
+    }, [
+        containerWidth,
+        containerHeight,
+        estimatedTotalWidth,
+        estimatedTotalHeight,
+        isScrolling,
+        frozenRowHeight,
+        frozenColumnWidth,
+        extendScrollSize,
+        scrollbarSize,
+        onDimensionsChange,
+    ]);
+    /* Draw gridlines */
+    var _26 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var e_3, _a;
+        var gridLines = [];
+        var gridLinesFrozenRow = [];
+        var gridLinesFrozenColumn = [];
+        var gridLinesFrozenIntersection = [];
+        if (showGridLines) {
+            // Horizontal - use getVisibleRowIndices for efficient iteration
+            var visibleRows = getVisibleRowIndices(rowStartIndex, rowStopIndex);
+            try {
+                for (var visibleRows_1 = tslib_1.__values(visibleRows), visibleRows_1_1 = visibleRows_1.next(); !visibleRows_1_1.done; visibleRows_1_1 = visibleRows_1.next()) {
+                    var rowIndex = visibleRows_1_1.value;
+                    var x1 = getColumnOffset(frozenColumns);
+                    var x2 = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
+                    var y1 = getRowOffset(Math.min(rowIndex + 1, rowCount));
+                    var y2 = y1;
+                    gridLines.push(gridLineRenderer({
+                        points: [x1, y1, x2, y2],
+                        stroke: gridLineColor,
+                        strokeWidth: gridLineWidth,
+                        offsetY: -0.5,
+                        key: (0, helpers_3.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
+                    }));
+                    if (frozenColumns > 1) {
+                        gridLinesFrozenColumn.push(gridLineRenderer({
+                            points: [0, y1, x2, y2],
+                            stroke: gridLineColor,
+                            strokeWidth: gridLineWidth,
+                            offsetY: -0.5,
+                            key: (0, helpers_3.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
+                        }));
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (visibleRows_1_1 && !visibleRows_1_1.done && (_a = visibleRows_1.return)) _a.call(visibleRows_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            // Vertical
+            for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                /* Ignore frozen rows */
+                if (columnIndex < frozenColumns || (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(columnIndex)))
+                    continue;
+                var x1 = getColumnOffset(Math.min(columnIndex + 1, columnCount));
+                var x2 = x1;
+                var y1 = getRowOffset(frozenRows);
+                var y2 = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
+                gridLines.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetX: -0.5,
+                    key: (0, helpers_3.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
+                }));
+                if (frozenRows > 1) {
+                    gridLinesFrozenRow.push(gridLineRenderer({
+                        points: [x1, 0, x2, y2],
+                        stroke: gridLineColor,
+                        strokeWidth: gridLineWidth,
+                        offsetX: -0.5,
+                        key: (0, helpers_3.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
+                    }));
+                }
+            }
+            for (var rowIndex = 0; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+                if (isHiddenRow === null || isHiddenRow === void 0 ? void 0 : isHiddenRow(rowIndex)) {
+                    continue;
+                }
+                var x1 = getColumnOffset(1);
+                var x2 = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
+                var y1 = getRowOffset(Math.min(rowIndex + 1, rowCount));
+                var y2 = y1;
+                gridLinesFrozenRow.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetY: -0.5,
+                    key: (0, helpers_3.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
+                }));
+                gridLinesFrozenIntersection.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetY: -0.5,
+                    key: (0, helpers_3.itemKey)({ rowIndex: rowIndex, columnIndex: y1 }),
+                }));
+            }
+            for (var columnIndex = 0; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(columnIndex))
+                    continue;
+                var x1 = getColumnOffset(Math.min(columnIndex + 1, columnCount));
+                var x2 = x1;
+                var y1 = getRowOffset(1);
+                var y2 = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
+                gridLinesFrozenColumn.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetX: -0.5,
+                    key: (0, helpers_3.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
+                }));
+                gridLinesFrozenIntersection.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetX: -0.5,
+                    key: (0, helpers_3.itemKey)({ rowIndex: x1, columnIndex: columnIndex }),
+                }));
+            }
+        }
+        return [
+            gridLines,
+            gridLinesFrozenRow,
+            gridLinesFrozenColumn,
+            gridLinesFrozenIntersection,
+        ];
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        getRowOffset,
+        getColumnOffset,
+        gridLineColor,
+        gridLineWidth,
+        rowCount,
+        columnCount,
+        frozenRows,
+        frozenColumns,
+        showGridLines,
+        getVisibleRowIndices,
+        isHiddenRow,
+        isHiddenColumn,
+        gridLineRenderer,
+    ]), 4), gridLines = _26[0], gridLinesFrozenRow = _26[1], gridLinesFrozenColumn = _26[2], gridLinesFrozenIntersection = _26[3];
+    // A data update arrives as a NEW renderer identity (hosts recreate their getters per data
+    // version — e.g. a windowed engine loading cells asynchronously mid-scroll). The scroll cell
+    // cache keys only on cell id, so an entry computed against the OLD data keeps painting beside
+    // freshly rendered neighbours until the scroll-end clear — e.g. a long string that overflowed
+    // into a then-blank neighbour drawn OVER the neighbour's just-loaded text. Invalidate the
+    // cache the moment any renderer changes; a `useMemo` so it runs during render, BEFORE both
+    // cell useMemos below consume the cache. (Clearing on mount is a harmless no-op.)
+    (0, react_1.useMemo)(clearCache, [
+        clearCache,
+        itemRenderer,
+        overlayRenderer,
+        backgroundRenderer,
+    ]);
+    var mergedCellRenderMap = new Set();
+    var mergedCellFrozenRowMap = new Set();
+    // Get frozen column overflow cells - computed AFTER frozen cells useMemo
+    // so it has data from current render (itemRenderer just populated overflowMapRef)
+    var frozenColumnOverflowCells = getFrozenColumnOverflowCells === null || getFrozenColumnOverflowCells === void 0 ? void 0 : getFrozenColumnOverflowCells(frozenColumnWidth, frozenColumns);
+    // Frozen cells useMemo runs FIRST so itemRenderer populates overflowMapRef
+    var _27 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var e_4, _a;
+        /* Draw frozen rows */
+        var frozenRowCells = [];
+        var frozenRowCellOverlays = [];
+        var frozenRowCellBackgrounds = [];
+        for (var rowIndex = 1; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+            if (isHiddenRow === null || isHiddenRow === void 0 ? void 0 : isHiddenRow(rowIndex))
+                continue;
+            /**
+             * Do any pre-processing of the row before being renderered.
+             * Useful for `react-table` to call `prepareRow(row)`
+             */
+            onBeforeRenderRow === null || onBeforeRenderRow === void 0 ? void 0 : onBeforeRenderRow(rowIndex);
+            var _loop_1 = function (columnIndex) {
+                /* Skip merged cells columns */
+                if (columnIndex < frozenColumns &&
+                    !(frozenColumnOverflowCells === null || frozenColumnOverflowCells === void 0 ? void 0 : frozenColumnOverflowCells.has((0, helpers_3.cellIdentifier)(rowIndex, columnIndex)))) {
+                    return "continue";
+                }
+                var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+                var bounds = getCellBounds({ rowIndex: rowIndex, columnIndex: columnIndex });
+                var actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                var actualColumnIndex = isMerged
+                    ? bounds.startColumnIndex
+                    : columnIndex;
+                var actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                var actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(actualColumnIndex)) {
+                    return "continue";
+                }
+                if (!isMerged && (isHiddenCell === null || isHiddenCell === void 0 ? void 0 : isHiddenCell(actualRowIndex, actualColumnIndex))) {
+                    return "continue";
+                }
+                if (isMerged) {
+                    var cellId_1 = (0, helpers_3.cellIdentifier)(bounds.startRowIndex, bounds.startColumnIndex);
+                    if (mergedCellFrozenRowMap.has(cellId_1)) {
+                        return "continue";
+                    }
+                    mergedCellFrozenRowMap.add(cellId_1);
+                }
+                var y = getRowOffset(actualRowIndex);
+                var height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                var x = getColumnOffset(actualColumnIndex);
+                var width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                var cellId = (0, helpers_3.cellIdentifier)(actualRowIndex, actualColumnIndex);
+                var frozenRowCell = getCellCache(cellCacheRef.current, cellId, function () {
+                    return itemRenderer({
+                        x: x,
+                        y: y,
+                        width: width,
+                        height: height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: (0, helpers_3.itemKey)({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    });
+                }, isScrolling, isMerged);
+                frozenRowCells.push(frozenRowCell);
+                if (enableCellOverlay &&
+                    !(isHiddenOverlay === null || isHiddenOverlay === void 0 ? void 0 : isHiddenOverlay(actualRowIndex, actualColumnIndex))) {
+                    var frozenRowCellOverlay = getCellCache(cellOverlayCacheRef.current, cellId, function () {
+                        return overlayRenderer({
+                            x: x,
+                            y: y,
+                            width: width,
+                            height: height,
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                            isMergedCell: isMerged,
+                            key: (0, helpers_3.itemKey)({
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                            }),
+                        });
+                    }, isScrolling);
+                    frozenRowCellOverlays.push(frozenRowCellOverlay);
+                }
+                if (enableCellBackground &&
+                    !(isHiddenBackground === null || isHiddenBackground === void 0 ? void 0 : isHiddenBackground(actualRowIndex, actualColumnIndex))) {
+                    var frozenRowCellBackground = getCellCache(cellBackgroundCacheRef.current, cellId, function () {
+                        return backgroundRenderer === null || backgroundRenderer === void 0 ? void 0 : backgroundRenderer({
+                            x: x,
+                            y: y,
+                            width: width,
+                            height: height,
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                            isMergedCell: isMerged,
+                            key: (0, helpers_3.itemKey)({
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                            }),
+                        });
+                    }, isScrolling);
+                    frozenRowCellBackgrounds.push(frozenRowCellBackground);
+                }
+            };
+            for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                _loop_1(columnIndex);
+            }
+        }
+        /* Draw frozen columns */
+        var mergedCellFrozenColumnMap = new Set();
+        var frozenColumnCells = [];
+        var frozenColumnCellOverlays = [];
+        var frozenColumnCellBackgrounds = [];
+        // Use getVisibleRowIndices for efficient iteration over visible rows
+        var visibleRowsForFrozenCols = getVisibleRowIndices(rowStartIndex, rowStopIndex);
+        try {
+            for (var visibleRowsForFrozenCols_1 = tslib_1.__values(visibleRowsForFrozenCols), visibleRowsForFrozenCols_1_1 = visibleRowsForFrozenCols_1.next(); !visibleRowsForFrozenCols_1_1.done; visibleRowsForFrozenCols_1_1 = visibleRowsForFrozenCols_1.next()) {
+                var rowIndex = visibleRowsForFrozenCols_1_1.value;
+                var _loop_2 = function (columnIndex) {
+                    var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+                    var bounds = getCellBounds({ rowIndex: rowIndex, columnIndex: columnIndex });
+                    var actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                    var actualColumnIndex = isMerged
+                        ? bounds.startColumnIndex
+                        : columnIndex;
+                    var actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                    var actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                    if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(actualColumnIndex)) {
+                        return "continue";
+                    }
+                    if (!isMerged && (isHiddenCell === null || isHiddenCell === void 0 ? void 0 : isHiddenCell(actualRowIndex, actualColumnIndex))) {
+                        return "continue";
+                    }
+                    if (isMerged) {
+                        var cellId_2 = (0, helpers_3.cellIdentifier)(bounds.startRowIndex, bounds.startColumnIndex);
+                        if (mergedCellFrozenColumnMap.has(cellId_2)) {
+                            return "continue";
+                        }
+                        mergedCellFrozenColumnMap.add(cellId_2);
+                    }
+                    var y = getRowOffset(actualRowIndex);
+                    var height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                    var x = getColumnOffset(actualColumnIndex);
+                    var width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                    var cellId = (0, helpers_3.cellIdentifier)(actualRowIndex, actualColumnIndex);
+                    var frozenColumnCell = getCellCache(cellCacheRef.current, cellId, function () {
+                        return itemRenderer({
+                            x: x,
+                            y: y,
+                            width: width,
+                            height: height,
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                            isMergedCell: isMerged,
+                            key: (0, helpers_3.itemKey)({
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                            }),
+                        });
+                    }, isScrolling, isMerged);
+                    frozenColumnCells.push(frozenColumnCell);
+                    if (enableCellOverlay &&
+                        !(isHiddenOverlay === null || isHiddenOverlay === void 0 ? void 0 : isHiddenOverlay(actualRowIndex, actualColumnIndex))) {
+                        var frozenColumnCellOverlay = getCellCache(cellOverlayCacheRef.current, cellId, function () {
+                            return overlayRenderer({
+                                x: x,
+                                y: y,
+                                width: width,
+                                height: height,
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                                isMergedCell: isMerged,
+                                key: (0, helpers_3.itemKey)({
+                                    rowIndex: actualRowIndex,
+                                    columnIndex: actualColumnIndex,
+                                }),
+                            });
+                        }, isScrolling);
+                        frozenColumnCellOverlays.push(frozenColumnCellOverlay);
+                    }
+                    if (enableCellBackground &&
+                        !(isHiddenBackground === null || isHiddenBackground === void 0 ? void 0 : isHiddenBackground(actualRowIndex, actualColumnIndex))) {
+                        var frozenColumnCellBackground = getCellCache(cellBackgroundCacheRef.current, cellId, function () {
+                            return backgroundRenderer === null || backgroundRenderer === void 0 ? void 0 : backgroundRenderer({
+                                x: x,
+                                y: y,
+                                width: width,
+                                height: height,
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                                isMergedCell: isMerged,
+                                key: (0, helpers_3.itemKey)({
+                                    rowIndex: actualRowIndex,
+                                    columnIndex: actualColumnIndex,
+                                }),
+                            });
+                        }, isScrolling);
+                        frozenColumnCellBackgrounds.push(frozenColumnCellBackground);
+                    }
+                };
+                for (var columnIndex = 1; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                    _loop_2(columnIndex);
+                }
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (visibleRowsForFrozenCols_1_1 && !visibleRowsForFrozenCols_1_1.done && (_a = visibleRowsForFrozenCols_1.return)) _a.call(visibleRowsForFrozenCols_1);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        return [
+            frozenRowCellBackgrounds,
+            frozenColumnCellBackgrounds,
+            frozenRowCells,
+            frozenColumnCells,
+            frozenRowCellOverlays,
+            frozenColumnCellOverlays,
+        ];
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        isMergedCell,
+        getCellBounds,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        isHiddenCell,
+        isHiddenRow,
+        isHiddenColumn,
+        getVisibleRowIndices,
+        itemRenderer,
+        frozenRows,
+        frozenColumns,
+        enableCellOverlay,
+        onBeforeRenderRow,
+        isHiddenOverlay,
+        overlayRenderer,
+        isHiddenBackground,
+        backgroundRenderer,
+        enableCellBackground,
+        getCellCache,
+        isScrolling,
+        frozenColumnOverflowCells,
+    ]), 6), frozenRowCellBackgrounds = _27[0], frozenColumnCellBackgrounds = _27[1], frozenRowCells = _27[2], frozenColumnCells = _27[3], frozenRowCellOverlays = _27[4], frozenColumnCellOverlays = _27[5];
+    var _28 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var e_5, _a;
+        /* Draw all cells */
+        var cells = [];
+        /**
+         * Lets users draw cells on top of existing canvas
+         */
+        var cellOverlays = [];
+        // Lets users draw layers of cells
+        // 1. Background, 2. Text 3. Border
+        var cellBackgrounds = [];
+        if (columnCount > 0 && rowCount) {
+            // Use getVisibleRowIndices for efficient iteration over visible rows
+            var visibleRows = getVisibleRowIndices(rowStartIndex, rowStopIndex);
+            try {
+                for (var visibleRows_2 = tslib_1.__values(visibleRows), visibleRows_2_1 = visibleRows_2.next(); !visibleRows_2_1.done; visibleRows_2_1 = visibleRows_2.next()) {
+                    var rowIndex = visibleRows_2_1.value;
+                    var _loop_3 = function (columnIndex) {
+                        /**
+                         * Skip frozen columns unless they overflow into the body area
+                         * Skip merged cells that are out of bounds
+                         */
+                        if (columnIndex < frozenColumns &&
+                            !(frozenColumnOverflowCells === null || frozenColumnOverflowCells === void 0 ? void 0 : frozenColumnOverflowCells.has((0, helpers_3.cellIdentifier)(rowIndex, columnIndex)))) {
+                            return "continue";
+                        }
+                        var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+                        var bounds = getCellBounds({ rowIndex: rowIndex, columnIndex: columnIndex });
+                        var actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                        var actualColumnIndex = isMerged
+                            ? bounds.startColumnIndex
+                            : columnIndex;
+                        var actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                        var actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                        var cellId = (0, helpers_3.cellIdentifier)(bounds.startRowIndex, bounds.startColumnIndex);
+                        if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(actualColumnIndex)) {
+                            return "continue";
+                        }
+                        if (!isMerged &&
+                            (isHiddenCell === null || isHiddenCell === void 0 ? void 0 : isHiddenCell(actualRowIndex, actualColumnIndex))) {
+                            return "continue";
+                        }
+                        if (isMerged) {
+                            if (mergedCellRenderMap.has(cellId)) {
+                                return "continue";
+                            }
+                            mergedCellRenderMap.add(cellId);
+                        }
+                        var y = getRowOffset(actualRowIndex);
+                        var height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                        var x = getColumnOffset(actualColumnIndex);
+                        var width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                        var cell = getCellCache(cellCacheRef.current, cellId, function () {
+                            return itemRenderer({
+                                x: x,
+                                y: y,
+                                width: width,
+                                height: height,
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                                isMergedCell: isMerged,
+                                key: (0, helpers_3.itemKey)({
+                                    rowIndex: actualRowIndex,
+                                    columnIndex: actualColumnIndex,
+                                }),
+                            });
+                        }, isScrolling, isMerged);
+                        cells.push(cell);
+                        if (enableCellOverlay &&
+                            !(isHiddenOverlay === null || isHiddenOverlay === void 0 ? void 0 : isHiddenOverlay(actualRowIndex, actualColumnIndex))) {
+                            var cellOverlay = getCellCache(cellOverlayCacheRef.current, cellId, function () {
+                                return overlayRenderer({
+                                    x: x,
+                                    y: y,
+                                    width: width,
+                                    height: height,
+                                    rowIndex: actualRowIndex,
+                                    columnIndex: actualColumnIndex,
+                                    isMergedCell: isMerged,
+                                    key: (0, helpers_3.itemKey)({
+                                        rowIndex: actualRowIndex,
+                                        columnIndex: actualColumnIndex,
+                                    }),
+                                });
+                            }, isScrolling);
+                            cellOverlays.push(cellOverlay);
+                        }
+                        if (enableCellBackground &&
+                            !(isHiddenBackground === null || isHiddenBackground === void 0 ? void 0 : isHiddenBackground(actualRowIndex, actualColumnIndex))) {
+                            var cellBackground = getCellCache(cellBackgroundCacheRef.current, cellId, function () {
+                                return backgroundRenderer === null || backgroundRenderer === void 0 ? void 0 : backgroundRenderer({
+                                    x: x,
+                                    y: y,
+                                    width: width,
+                                    height: height,
+                                    rowIndex: actualRowIndex,
+                                    columnIndex: actualColumnIndex,
+                                    isMergedCell: isMerged,
+                                    key: (0, helpers_3.itemKey)({
+                                        rowIndex: actualRowIndex,
+                                        columnIndex: actualColumnIndex,
+                                    }),
+                                });
+                            }, isScrolling);
+                            cellBackgrounds.push(cellBackground);
+                        }
+                    };
+                    for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                        _loop_3(columnIndex);
+                    }
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (visibleRows_2_1 && !visibleRows_2_1.done && (_a = visibleRows_2.return)) _a.call(visibleRows_2);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        }
+        return [cellBackgrounds, cells, cellOverlays];
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        isScrolling,
+        isMergedCell,
+        getCellBounds,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        isHiddenOverlay,
+        itemRenderer,
+        rowCount,
+        columnCount,
+        frozenColumns,
+        getVisibleRowIndices,
+        isHiddenColumn,
+        isHiddenCell,
+        enableCellOverlay,
+        overlayRenderer,
+        backgroundRenderer,
+        enableCellBackground,
+        isHiddenBackground,
+        getCellCache,
+        frozenColumnOverflowCells,
+    ]), 3), cellBackgrounds = _28[0], cells = _28[1], cellOverlays = _28[2];
+    /**
+     * Get x offset of a cell
+     * takes into account frozen columns
+     * and scoll
+     */
+    var getXOffset = (0, react_1.useCallback)(function (columnIndex) {
+        var isInFrozenColumn = columnIndex < frozenColumns;
+        return (getColumnOffset(columnIndex) - (isInFrozenColumn ? 0 : scrollLeft));
+    }, [getColumnOffset, scrollLeft, frozenColumns]);
+    /**
+     * Get y offset of a cell
+     * takes into account frozen columns
+     * and scoll
+     */
+    var getYOffset = (0, react_1.useCallback)(function (rowIndex) {
+        var isInFrozenRow = rowIndex < frozenRows;
+        return getRowOffset(rowIndex) - (isInFrozenRow ? 0 : scrollTop);
+    }, [getRowOffset, scrollTop, frozenRows]);
+    // Frozen header cells
+    var _29 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var e_6, _a;
+        /* Draw frozen rows */
+        var frozenRowHeaderCells = [];
+        var frozenColumnHeaderCells = [];
+        for (var rowIndex = 0; rowIndex < 1; rowIndex++) {
+            for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                var y = getRowOffset(rowIndex);
+                var height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                var x = getColumnOffset(columnIndex);
+                var width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenColumnHeaderCells.push(headerRenderer({
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    rowIndex: rowIndex,
+                    columnIndex: columnIndex,
+                    key: (0, helpers_3.itemKey)({
+                        rowIndex: rowIndex,
+                        columnIndex: columnIndex,
+                    }),
+                }));
+            }
+        }
+        /* Draw frozen columns (row headers) */
+        // Use getVisibleRowIndices for efficient iteration
+        var visibleRowsForHeaders = getVisibleRowIndices(rowStartIndex, rowStopIndex, false);
+        try {
+            for (var visibleRowsForHeaders_1 = tslib_1.__values(visibleRowsForHeaders), visibleRowsForHeaders_1_1 = visibleRowsForHeaders_1.next(); !visibleRowsForHeaders_1_1.done; visibleRowsForHeaders_1_1 = visibleRowsForHeaders_1.next()) {
+                var rowIndex = visibleRowsForHeaders_1_1.value;
+                for (var columnIndex = 0; columnIndex < 1; columnIndex++) {
+                    var y = getRowOffset(rowIndex);
+                    var height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                    var x = getColumnOffset(columnIndex);
+                    var width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                    frozenRowHeaderCells.push(headerRenderer({
+                        x: x,
+                        y: y,
+                        width: width,
+                        height: height,
+                        rowIndex: rowIndex,
+                        columnIndex: columnIndex,
+                        key: (0, helpers_3.itemKey)({
+                            rowIndex: rowIndex,
+                            columnIndex: columnIndex,
+                        }),
+                    }));
+                }
+            }
+        }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        finally {
+            try {
+                if (visibleRowsForHeaders_1_1 && !visibleRowsForHeaders_1_1.done && (_a = visibleRowsForHeaders_1.return)) _a.call(visibleRowsForHeaders_1);
+            }
+            finally { if (e_6) throw e_6.error; }
+        }
+        return [frozenRowHeaderCells, frozenColumnHeaderCells];
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        headerRenderer,
+        getVisibleRowIndices,
+    ]), 2), frozenRowHeaderCells = _29[0], frozenColumnHeaderCells = _29[1];
+    /**
+     * Frozen column shadow
+     */
+    var frozenColumnShadow = (0, react_1.useMemo)(function () {
+        var frozenColumnLineX = getColumnOffset(frozenColumns);
+        var frozenColumnLineY = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
+        return (react_1.default.createElement(react_konva_1.Line, tslib_1.__assign({ points: [frozenColumnLineX, 0, frozenColumnLineX, frozenColumnLineY], offsetX: -0.5, strokeWidth: 1, shadowForStrokeEnabled: false, strokeScaleEnabled: false, hitStrokeWidth: 0, listening: false, perfectDrawEnabled: false }, shadowSettings)));
+    }, [
+        shadowSettings,
+        frozenColumns,
+        rowStopIndex,
+        rowCount,
+        getRowOffset,
+        getColumnOffset,
+    ]);
+    /**
+     * Frozen row shadow
+     */
+    var frozenRowShadow = (0, react_1.useMemo)(function () {
+        var frozenRowLineY = getRowOffset(frozenRows);
+        var frozenRowLineX = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
+        return (react_1.default.createElement(react_konva_1.Line, tslib_1.__assign({ points: [0, frozenRowLineY, frozenRowLineX, frozenRowLineY], offsetY: -0.5, strokeWidth: 1, shadowForStrokeEnabled: false, strokeScaleEnabled: false, hitStrokeWidth: 0, listening: false, perfectDrawEnabled: false }, shadowSettings)));
+    }, [
+        shadowSettings,
+        frozenRows,
+        columnStopIndex,
+        columnCount,
+        getRowOffset,
+        getColumnOffset,
+    ]);
+    /* Draw frozen intersection cells */
+    var _30 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var frozenIntersectionCellBackgrounds = [];
+        var frozenIntersectionCells = [];
+        var frozenIntersectionCellOverlays = [];
+        for (var rowIndex = 1; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+            if (isHiddenRow === null || isHiddenRow === void 0 ? void 0 : isHiddenRow(rowIndex))
+                continue;
+            for (var columnIndex = 1; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                var isMerged = isMergedCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+                var bounds = getCellBounds({ rowIndex: rowIndex, columnIndex: columnIndex });
+                var actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                var actualColumnIndex = isMerged
+                    ? bounds.startColumnIndex
+                    : columnIndex;
+                var actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                var actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(actualColumnIndex)) {
+                    continue;
+                }
+                if (!isMerged && (isHiddenCell === null || isHiddenCell === void 0 ? void 0 : isHiddenCell(actualRowIndex, actualColumnIndex))) {
+                    continue;
+                }
+                if (isMerged) {
+                    var cellId = (0, helpers_3.cellIdentifier)(bounds.startRowIndex, bounds.startColumnIndex);
+                    if (mergedCellRenderMap.has(cellId)) {
+                        continue;
+                    }
+                    mergedCellRenderMap.add(cellId);
+                }
+                var y = getRowOffset(actualRowIndex);
+                var height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                var x = getColumnOffset(actualColumnIndex);
+                var width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                frozenIntersectionCells.push(itemRenderer({
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    rowIndex: actualRowIndex,
+                    columnIndex: actualColumnIndex,
+                    isMergedCell: isMerged,
+                    key: (0, helpers_3.itemKey)({
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                    }),
+                }));
+                if (enableCellOverlay &&
+                    !(isHiddenOverlay === null || isHiddenOverlay === void 0 ? void 0 : isHiddenOverlay(actualRowIndex, actualColumnIndex))) {
+                    frozenIntersectionCellOverlays.push(overlayRenderer({
+                        x: x,
+                        y: y,
+                        width: width,
+                        height: height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: (0, helpers_3.itemKey)({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }));
+                }
+                if (enableCellBackground &&
+                    !(isHiddenBackground === null || isHiddenBackground === void 0 ? void 0 : isHiddenBackground(actualRowIndex, actualColumnIndex))) {
+                    frozenIntersectionCellBackgrounds.push(backgroundRenderer === null || backgroundRenderer === void 0 ? void 0 : backgroundRenderer({
+                        x: x,
+                        y: y,
+                        width: width,
+                        height: height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: (0, helpers_3.itemKey)({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }));
+                }
+            }
+        }
+        return [
+            frozenIntersectionCellBackgrounds,
+            frozenIntersectionCells,
+            frozenIntersectionCellOverlays,
+        ];
+    }, [
+        rowStopIndex,
+        columnStopIndex,
+        isMergedCell,
+        getCellBounds,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        itemRenderer,
+        frozenRows,
+        frozenColumns,
+        enableCellOverlay,
+        isHiddenRow,
+        isHiddenColumn,
+        isHiddenCell,
+        isHiddenOverlay,
+        isHiddenBackground,
+        enableCellBackground,
+        backgroundRenderer,
+        overlayRenderer,
+    ]), 3), frozenIntersectionCellBackgrounds = _30[0], frozenIntersectionCells = _30[1], frozenIntersectionCellOverlays = _30[2];
+    /* Draw frozen intersection cells */
+    var _31 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var frozenIntersectionColumnHeaderCells = [];
+        var frozenIntersectionRowHeaderCells = [];
+        for (var rowIndex = 0; rowIndex < 1; rowIndex++) {
+            if (isHiddenRow === null || isHiddenRow === void 0 ? void 0 : isHiddenRow(rowIndex))
+                continue;
+            for (var columnIndex = 0; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(columnIndex)) {
+                    continue;
+                }
+                var y = getRowOffset(rowIndex);
+                var height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                var x = getColumnOffset(columnIndex);
+                var width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenIntersectionColumnHeaderCells.push(headerRenderer({
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    rowIndex: rowIndex,
+                    columnIndex: columnIndex,
+                    key: (0, helpers_3.itemKey)({
+                        rowIndex: rowIndex,
+                        columnIndex: columnIndex,
+                    }),
+                }));
+            }
+        }
+        for (var rowIndex = 0; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+            if (isHiddenRow === null || isHiddenRow === void 0 ? void 0 : isHiddenRow(rowIndex))
+                continue;
+            for (var columnIndex = 0; columnIndex < 1; columnIndex++) {
+                if (isHiddenColumn === null || isHiddenColumn === void 0 ? void 0 : isHiddenColumn(columnIndex)) {
+                    continue;
+                }
+                var y = getRowOffset(rowIndex);
+                var height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                var x = getColumnOffset(columnIndex);
+                var width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenIntersectionRowHeaderCells.push(headerRenderer({
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    rowIndex: rowIndex,
+                    columnIndex: columnIndex,
+                    key: (0, helpers_3.itemKey)({
+                        rowIndex: rowIndex,
+                        columnIndex: columnIndex,
+                    }),
+                }));
+            }
+        }
+        return [
+            frozenIntersectionRowHeaderCells,
+            frozenIntersectionColumnHeaderCells,
+        ];
+    }, [
+        rowStopIndex,
+        columnStopIndex,
+        frozenColumns,
+        frozenRows,
+        isHiddenColumn,
+        isHiddenRow,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        headerRenderer,
+    ]), 2), frozenIntersectionRowHeaderCells = _31[0], frozenIntersectionColumnHeaderCells = _31[1];
+    /**
+     * Renders active cell
+     */
+    var _32 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var fillHandleDimension = {};
+        var activeCellSelection = null;
+        var activeCellSelectionFrozenColumn = null;
+        var activeCellSelectionFrozenRow = null;
+        var activeCellSelectionFrozenIntersection = null;
+        if (activeCell) {
+            var bounds = getCellBounds(activeCell);
+            var top_1 = bounds.startRowIndex, left = bounds.startColumnIndex, right = bounds.endColumnIndex, bottom = bounds.endRowIndex;
+            var actualBottom = Math.min(rowStopIndex, bottom);
+            var actualRight = Math.min(columnStopIndex, right);
+            var isInFrozenColumn = left < frozenColumns;
+            var isInFrozenRow = top_1 < frozenRows;
+            var isInFrozenIntersection = isInFrozenRow && isInFrozenColumn;
+            var isInBody = actualBottom >= frozenRows || actualRight >= frozenColumns;
+            var isMerged = isMergedCell(activeCell);
+            var y = getYOffset(top_1);
+            var height = getYOffset(actualBottom) - y + getRowHeight(actualBottom);
+            var x = getXOffset(left);
+            var width = getXOffset(actualRight) - x + getColumnWidth(actualRight);
+            var cell = selectionRenderer({
+                stroke: selectionBorderColor,
+                strokeWidth: activeCellStrokeWidth,
+                fill: "transparent",
+                x: x,
+                y: y,
+                width: width,
+                height: height,
+                type: "activeCell",
+                index: 0,
+                activeCell: activeCell,
+                isDragging: isDraggingSelection,
+                /* Active cell is draggable only there are no other selections */
+                draggable: enableSelectionDrag && selections.length === 0,
+            });
+            // Active cell is hidden when xuser is dragging selections
+            if (!(isDraggingSelection && selections.length > 0)) {
+                // Merged cell extends to main body
+                if (isInFrozenIntersection) {
+                    activeCellSelectionFrozenIntersection = cell;
+                    // Set fill handle position
+                    fillHandleDimension.position = "fi";
+                }
+                else if (isInFrozenRow) {
+                    activeCellSelectionFrozenRow = cell;
+                    // Set fill handle position
+                    fillHandleDimension.position = "fr";
+                }
+                else if (isInFrozenColumn) {
+                    activeCellSelectionFrozenColumn = cell;
+                    // Set fill handle position
+                    fillHandleDimension.position = "fc";
+                }
+                else {
+                    activeCellSelection = cell;
+                }
+                if (isMerged && isInBody) {
+                    activeCellSelection = cell;
+                }
+            }
+            fillHandleDimension.x = x + width;
+            fillHandleDimension.y = y + height;
+        }
+        return [
+            fillHandleDimension,
+            activeCellSelection,
+            activeCellSelectionFrozenColumn,
+            activeCellSelectionFrozenRow,
+            activeCellSelectionFrozenIntersection,
+        ];
+    }, [
+        getXOffset,
+        getYOffset,
+        activeCell,
+        frozenRows,
+        frozenColumns,
+        activeCellStrokeWidth,
+        columnStopIndex,
+        enableSelectionDrag,
+        isDraggingSelection,
+        rowStopIndex,
+        selectionBorderColor,
+        selections.length,
+        getColumnWidth,
+        getRowHeight,
+        getCellBounds,
+        isMergedCell,
+        selectionRenderer,
+    ]), 5), fillHandleDimension = _32[0], activeCellSelection = _32[1], activeCellSelectionFrozenColumn = _32[2], activeCellSelectionFrozenRow = _32[3], activeCellSelectionFrozenIntersection = _32[4];
+    /**
+     * Convert selections to area
+     * Removed useMemo as changes to lastMeasureRowIndex, lastMeasuredColumnIndex,
+     * does not trigger useMemo
+     * Dependencies : [selections, rowStopIndex, columnStopIndex, instanceProps]
+     */
+    var isSelectionInProgress = false;
+    var _33 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var selectionAreas = [];
+        var selectionAreasFrozenColumns = [];
+        var selectionAreasFrozenRows = [];
+        var selectionAreasIntersection = [];
+        for (var i = 0; i < selections.length; i++) {
+            var selection = selections[i];
+            var range = selection.range, inProgress = selection.inProgress, style = selection.style;
+            var top_2 = range.startRowIndex, left = range.startColumnIndex, right = range.endColumnIndex, bottom = range.endRowIndex;
+            // Detect full row/column selections - don't expand to merged cells
+            // to prevent selecting adjacent rows/columns due to merged cells at edges
+            var isFullRowSelection = right >= columnCount - 1;
+            var isFullColumnSelection = bottom >= rowCount - 1;
+            var spanMerges = !(isFullRowSelection || isFullColumnSelection);
+            var bounds = getCellBounds({ rowIndex: top_2, columnIndex: left }, spanMerges);
+            var selectionBounds = { x: 0, y: 0, width: 0, height: 0 };
+            var actualBottom = Math.max(bounds.endRowIndex, Math.min(rowStopIndex, bottom));
+            var actualRight = Math.max(bounds.endColumnIndex, Math.min(columnStopIndex, right));
+            var actualLeft = Math.min(bounds.startColumnIndex, left);
+            var isLeftBoundFrozen = left < frozenColumns;
+            var isTopBoundFrozen = top_2 < frozenRows;
+            var isRightBoundFrozen = right < frozenColumns;
+            var isBottomBoundFrozen = bottom < frozenRows;
+            var isIntersectionFrozen = top_2 < frozenRows && left < frozenColumns;
+            var isLast = i === selections.length - 1;
+            var styles = tslib_1.__assign({ stroke: inProgress ? selectionBackgroundColor : selectionBorderColor, fill: selectionBackgroundColor, strokeWidth: selectionStrokeWidth, isDragging: isDraggingSelection, draggable: inProgress ? false : enableSelectionDrag }, style);
+            /**
+             * If selection is in progress,
+             * use this variable to hide fill handle
+             */
+            if (inProgress) {
+                isSelectionInProgress = true;
+            }
+            selectionBounds.y = Math.max(0, getYOffset(top_2));
+            selectionBounds.height = Math.max(0, getYOffset(actualBottom) -
+                selectionBounds.y +
+                getRowHeight(actualBottom));
+            selectionBounds.x = Math.max(0, getXOffset(actualLeft));
+            selectionBounds.width =
+                getXOffset(actualRight) -
+                    selectionBounds.x +
+                    getColumnWidth(actualRight);
+            if (isLeftBoundFrozen) {
+                var frozenColumnSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                selectionAreasFrozenColumns.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign({}, styles), { type: "selection", index: i, x: selectionBounds.x, y: selectionBounds.y, width: frozenColumnSelectionWidth, height: selectionBounds.height, 
+                    // To counter selections that span frozen + floating cells
+                    strokeRightWidth: frozenColumnSelectionWidth === selectionBounds.width
+                        ? undefined // Take it from strokeWidth
+                        : 0, selection: selection, inProgress: inProgress })));
+            }
+            if (isTopBoundFrozen) {
+                var frozenRowSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top_2);
+                selectionAreasFrozenRows.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign({}, styles), { type: "selection", index: i, x: selectionBounds.x, y: selectionBounds.y, width: selectionBounds.width, height: frozenRowSelectionHeight, strokeBottomWidth: frozenRowSelectionHeight === selectionBounds.height
+                        ? undefined // Take it from strokeWidth
+                        : 0, selection: selection, inProgress: inProgress })));
+            }
+            if (isIntersectionFrozen) {
+                var frozenIntersectionSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top_2);
+                var frozenIntersectionSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                selectionAreasIntersection.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign({}, styles), { type: "selection", index: i, x: selectionBounds.x, y: selectionBounds.y, width: frozenIntersectionSelectionWidth, height: frozenIntersectionSelectionHeight, strokeBottomWidth: frozenIntersectionSelectionHeight === selectionBounds.height &&
+                        !isDraggingSelection
+                        ? undefined // Take it from strokeWidth
+                        : 0, strokeRightWidth: frozenIntersectionSelectionWidth === selectionBounds.width &&
+                        !isDraggingSelection
+                        ? undefined // Take it from strokeWidth
+                        : 0, selection: selection, inProgress: inProgress })));
+            }
+            selectionAreas.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign({}, styles), { type: "selection", index: i, x: selectionBounds.x, y: selectionBounds.y, width: selectionBounds.width, height: selectionBounds.height, selection: selection, inProgress: inProgress })));
+            if (isLast) {
+                fillHandleDimension.x = selectionBounds.x + selectionBounds.width;
+                fillHandleDimension.y = selectionBounds.y + selectionBounds.height;
+                // Set fill handle position
+                fillHandleDimension.position = isIntersectionFrozen
+                    ? "fi"
+                    : isRightBoundFrozen
+                        ? "fc"
+                        : isBottomBoundFrozen
+                            ? "fr"
+                            : undefined;
+            }
+        }
+        return [
+            selectionAreas,
+            selectionAreasFrozenColumns,
+            selectionAreasFrozenRows,
+            selectionAreasIntersection,
+        ];
+    }, [
+        getXOffset,
+        getYOffset,
+        selections,
+        columnStopIndex,
+        rowStopIndex,
+        frozenRows,
+        frozenColumns,
+        isDraggingSelection,
+        selectionRenderer,
+        getColumnOffset,
+        getColumnWidth,
+        getRowOffset,
+        getRowHeight,
+        getCellBounds,
+    ]), 4), selectionAreas = _33[0], selectionAreasFrozenColumns = _33[1], selectionAreasFrozenRows = _33[2], selectionAreasIntersection = _33[3];
+    /**
+     * Fillselection
+     */
+    var fillSelections = null;
+    if (fillSelection) {
+        var range = fillSelection.range;
+        var top_3 = range.startRowIndex, left = range.startColumnIndex, right = range.endColumnIndex, bottom = range.endRowIndex;
+        var actualBottom = Math.min(rowStopIndex, bottom);
+        var actualRight = Math.min(columnStopIndex, right);
+        var x = getXOffset(left);
+        var y = getYOffset(top_3);
+        var height = getYOffset(actualBottom) - y + getRowHeight(actualBottom);
+        var width = getXOffset(actualRight) - x + getColumnWidth(actualRight);
+        fillSelections = selectionRenderer({
+            type: "fill",
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            index: -1,
+            stroke: "gray",
+            strokeStyle: "dashed",
+            strokeWidth: 1,
+        });
+    }
+    var _34 = tslib_1.__read((0, react_1.useMemo)(function () {
+        var borderStyleCells = [];
+        var borderStyleCellsFrozenColumns = [];
+        var borderStyleCellsFrozenRows = [];
+        var borderStyleCellsIntersection = [];
+        for (var i = 0; i < borderStyles.length; i++) {
+            var _a = borderStyles[i], range = _a.range, style = _a.style, _b = _a.type, type = _b === void 0 ? "border" : _b, key = _a.index, title = _a.title, rest_1 = tslib_1.__rest(_a, ["range", "style", "type", "index", "title"]);
+            var top_4 = range.startRowIndex, left = range.startColumnIndex, right = range.endColumnIndex, bottom = range.endRowIndex;
+            // Ignore out of bounds
+            if (top_4 > rowStopIndex || bottom < rowStartIndex) {
+                // continue;
+            }
+            var isLeftBoundFrozen = left < frozenColumns;
+            var isTopBoundFrozen = top_4 < frozenRows;
+            var isIntersectionFrozen = top_4 < frozenRows && left < frozenColumns;
+            /**
+             * A border style renders a copy into every pane its range touches,
+             * each clipped by that pane's overflow container. The title must
+             * appear exactly once — otherwise the copies clipped at a frozen
+             * boundary show a duplicate, half-cut title that slides with the
+             * scroll. It goes to the single pane that fully contains the range
+             * (intersection → frozen columns → frozen rows → body).
+             */
+            var isFullyFrozenColumns = right < frozenColumns;
+            var isFullyFrozenRows = bottom < frozenRows;
+            var x = getXOffset(left);
+            var y = getYOffset(top_4);
+            var width = Math.max(0, getXOffset(Math.min(columnCount, right + 1)) - x);
+            var height = Math.max(0, getYOffset(bottom) - y + getRowHeight(bottom));
+            var startsOnFirstBodyRow = frozenRows > 0 && top_4 === frozenRows;
+            borderStyleCells.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, rest_1), style), { title: isFullyFrozenColumns || isFullyFrozenRows ? undefined : title, flipTitleToBottom: startsOnFirstBodyRow, range: range, x: x, y: y, index: key !== null && key !== void 0 ? key : i, width: width, height: height, type: type })));
+            if (isLeftBoundFrozen) {
+                var frozenColumnSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                borderStyleCellsFrozenColumns.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, rest_1), style), { title: isFullyFrozenColumns && !isFullyFrozenRows ? title : undefined, keepTitleWithinBounds: true, flipTitleToBottom: startsOnFirstBodyRow, range: range, type: type, x: x, y: y, index: key !== null && key !== void 0 ? key : i, width: frozenColumnSelectionWidth, height: height, strokeRightWidth: frozenColumnSelectionWidth === width
+                        ? (style === null || style === void 0 ? void 0 : style.strokeRightWidth) || (style === null || style === void 0 ? void 0 : style.strokeWidth)
+                        : 0 })));
+            }
+            if (isTopBoundFrozen) {
+                var frozenRowSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top_4);
+                borderStyleCellsFrozenRows.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, rest_1), style), { title: isFullyFrozenRows && !isFullyFrozenColumns ? title : undefined, keepTitleWithinVerticalBounds: true, range: range, type: type, x: x, y: y, index: key !== null && key !== void 0 ? key : i, width: width, height: frozenRowSelectionHeight, strokeBottomWidth: frozenRowSelectionHeight === height
+                        ? (style === null || style === void 0 ? void 0 : style.strokeBottomWidth) || (style === null || style === void 0 ? void 0 : style.strokeWidth)
+                        : 0 })));
+            }
+            if (isIntersectionFrozen) {
+                var frozenIntersectionSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top_4);
+                var frozenIntersectionSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                borderStyleCellsIntersection.push(selectionRenderer(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, rest_1), style), { title: isFullyFrozenColumns && isFullyFrozenRows ? title : undefined, keepTitleWithinBounds: true, keepTitleWithinVerticalBounds: true, range: range, type: type, x: x, y: y, index: key !== null && key !== void 0 ? key : i, width: frozenIntersectionSelectionWidth, height: frozenIntersectionSelectionHeight, strokeBottomWidth: frozenIntersectionSelectionHeight === height
+                        ? selectionStrokeWidth
+                        : 0, strokeRightWidth: frozenIntersectionSelectionWidth === width
+                        ? selectionStrokeWidth
+                        : 0 })));
+            }
+        }
+        return [
+            borderStyleCells,
+            borderStyleCellsFrozenColumns,
+            borderStyleCellsFrozenRows,
+            borderStyleCellsIntersection,
+        ];
+    }, [
+        getXOffset,
+        getYOffset,
+        borderStyles,
+        columnCount,
+        selectionStrokeWidth,
+        frozenRows,
+        frozenColumns,
+        selectionRenderer,
+        getColumnOffset,
+        getRowOffset,
+        getRowHeight,
+        rowStartIndex,
+        rowStopIndex,
+    ]), 4), borderStyleCells = _34[0], borderStyleCellsFrozenColumns = _34[1], borderStyleCellsFrozenRows = _34[2], borderStyleCellsIntersection = _34[3];
+    /**
+     * Prevents drawing hit region when scrolling
+     */
+    var listenToEvents = !isScrolling;
+    /* Frozen row shadow */
+    var frozenRowShadowComponent = showFrozenRowShadow && frozenRows !== 1 ? frozenRowShadow : null;
+    /* Frozen column shadow */
+    var frozenColumnShadowComponent = showFrozenColumnShadow && frozenColumns !== 1 ? frozenColumnShadow : null;
+    var fillHandleWidth = fillHandleSize;
+    var fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(FillHandle, tslib_1.__assign({}, fillHandleDimension, { stroke: fillHandleBackgroundColor, size: fillHandleWidth, borderColor: fillhandleBorderColor, onMouseDown: onFillHandleMouseDown, onDoubleClick: onFillHandleDoubleClick }))) : null;
+    var selectionChildren = (react_1.default.createElement("div", { className: "pointer-events-none" },
+        react_1.default.createElement("div", { className: "absolute right-0 bottom-0 overflow-hidden", style: {
+                left: frozenColumnWidth,
+                top: frozenRowHeight,
+            } },
+            react_1.default.createElement("div", { style: {
+                    transform: "translate(-".concat(frozenColumnWidth, "px, -").concat(frozenRowHeight, "px)"),
+                } },
+                activeCellSelection,
+                selectionAreas,
+                borderStyleCells,
+                fillhandleComponent,
+                fillSelections)),
+        frozenColumns ? (react_1.default.createElement("div", { className: "absolute left-0 bottom-0 overflow-hidden", style: {
+                top: frozenRowHeight,
+                width: frozenColumnWidth + fillHandleWidth,
+            } },
+            react_1.default.createElement("div", { style: {
+                    transform: "translate(0, -".concat(frozenRowHeight, "px)"),
+                } },
+                activeCellSelectionFrozenColumn,
+                selectionAreasFrozenColumns,
+                borderStyleCellsFrozenColumns,
+                fillHandleDimension.position === "fc"
+                    ? fillhandleComponent
+                    : null,
+                fillSelections))) : null,
+        frozenRows ? (react_1.default.createElement("div", { className: "absolute top-0 right-0 overflow-hidden", style: {
+                left: frozenColumnWidth,
+                height: frozenRowHeight + fillHandleWidth,
+            } },
+            react_1.default.createElement("div", { style: {
+                    transform: "translate(-".concat(frozenColumnWidth, "px, 0)"),
+                } },
+                activeCellSelectionFrozenRow,
+                selectionAreasFrozenRows,
+                borderStyleCellsFrozenRows,
+                fillHandleDimension.position === "fr"
+                    ? fillhandleComponent
+                    : null,
+                fillSelections))) : null,
+        frozenRows && frozenColumns ? (react_1.default.createElement("div", { className: "absolute left-0 top-0 overflow-hidden pointer-events-none", style: {
+                height: frozenRowHeight + fillHandleWidth,
+                width: frozenColumnWidth + fillHandleWidth,
+            } },
+            activeCellSelectionFrozenIntersection,
+            selectionAreasIntersection,
+            borderStyleCellsIntersection,
+            fillHandleDimension.position === "fi" ? fillhandleComponent : null,
+            fillSelections)) : null));
+    /**
+     * Context value of grid children
+     */
+    var contextValue = (0, react_1.useMemo)(function () { return ({
+        getCellOffsetFromCoords: getCellOffsetFromCoords,
+    }); }, [getCellOffsetFromCoords]);
+    // Print style
+    var containerStyle = {
+        width: containerWidth,
+        "--rnc-print-top-margin": "-".concat(headerRowHeight, "px"),
+        "--rnc-print-left-margin": "-".concat(headerColumnWidth, "px"),
+    };
+    // Footer final height - gradually reveal footer as user scrolls to bottom
+    var contentMaxScrollTop = estimatedTotalHeight - containerHeight;
+    var scrollPastBottom = Math.max(0, scrollTop - contentMaxScrollTop);
+    var footerRevealAmount = Math.min(scrollPastBottom, footerHeight);
+    return (react_1.default.createElement("div", { style: containerStyle, className: "rowsncolumns-grid print:w-full print:h-full print:block relative ", ref: scrollContainerRef },
+        react_1.default.createElement("div", tslib_1.__assign({ className: "rowsncolumns-grid-container outline-none touch-none select-none relative", tabIndex: 0, ref: containerRef }, rest),
+            react_1.default.createElement(MemoizedGrid_1.MemoizedGrid, { cells: cells, cellOverlays: cellOverlays, cellBackgrounds: cellBackgrounds, width: containerWidth, height: containerHeight, ref: stageRef, gridLines: gridLines, frozenRowCells: frozenRowCells, frozenColumnCells: frozenColumnCells, frozenColumnWidth: frozenColumnWidth, frozenRowHeight: frozenRowHeight, scrollTop: scrollTop, scrollLeft: scrollLeft, frozenSpacing: frozenSpacing, frozenIntersectionCells: frozenIntersectionCells, gridLinesFrozenColumn: gridLinesFrozenColumn, gridLinesFrozenRow: gridLinesFrozenRow, gridLinesFrozenIntersection: gridLinesFrozenIntersection, frozenColumnShadowComponent: frozenColumnShadowComponent, frozenRowShadowComponent: frozenRowShadowComponent, frozenIntersectionCellOverlays: frozenIntersectionCellOverlays, frozenIntersectionCellBackgrounds: frozenIntersectionCellBackgrounds, frozenRowCellOverlays: frozenRowCellOverlays, frozenRowCellBackgrounds: frozenRowCellBackgrounds, frozenColumnCellBackgrounds: frozenColumnCellBackgrounds, frozenColumnCellOverlays: frozenColumnCellOverlays, frozenRowHeaderCells: frozenRowHeaderCells, frozenColumnHeaderCells: frozenColumnHeaderCells, frozenIntersectionRowHeaderCells: frozenIntersectionRowHeaderCells, frozenIntersectionColumnHeaderCells: frozenIntersectionColumnHeaderCells, headerRowHeight: headerRowHeight, headerColumnWidth: headerColumnWidth, showHeaders: showHeaders, listening: listenToEvents, rowHeaderStageRef: rowHeaderStageRef, columnHeaderStageRef: columnHeaderStageRef })),
+        selectionChildren,
+        react_1.default.createElement(Context_1.GridContext.Provider, { value: contextValue },
+            gridChildren && typeof gridChildren === "function"
+                ? gridChildren({
+                    scrollLeft: scrollLeft,
+                    scrollTop: scrollTop,
+                    frozenRowHeight: frozenRowHeight,
+                    frozenColumnWidth: frozenColumnWidth,
+                    containerHeight: containerHeight,
+                    containerWidth: containerWidth,
+                })
+                : null,
+            children),
+        footerComponent ? (react_1.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none" },
+            react_1.default.createElement("div", { style: {
+                    height: footerHeight,
+                    bottom: 0,
+                    transform: "translateY(".concat(footerHeight - footerRevealAmount, "px)"),
+                    willChange: "transform",
+                }, className: "rnc-bottom-footer absolute left-0 right-0 overflow-hidden pointer-events-auto flex flex-col" }, react_1.default.isValidElement(footerComponent)
+                ? footerComponent
+                : react_1.default.createElement(footerComponent)))) : null,
+        showScrollbarX ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "rnc-scrollbar-shim bg-rnc-scrollbar-background print:hidden border-t border-l border-b border-t-rnc-scrollbar-border border-l-rnc-border border-b-rnc-scrollbar-border border-solid left-0 right-0 bottom-0 absolute", style: {
+                    height: scrollbarSize,
+                } }),
+            frozenColumnWidth === 0 ? null : (react_1.default.createElement("div", { className: "rnc-frozen-col-sep ml-px border-l-0 border-b-0 border-t-0 border-r border-solid border-r-rnc-border absolute bottom-0 left-0", style: {
+                    height: scrollbarSize,
+                    width: frozenColumnWidth,
+                } })),
+            react_1.default.createElement("div", { role: "scrollbar", "aria-orientation": "horizontal", className: "rnc-scrollbar print:hidden rnc-scrollbar-x absolute bottom-0 will-change-transform overflow-scroll", tabIndex: -1, style: {
+                    left: frozenColumnWidth,
+                    width: scrollbarXContainterWidth,
+                    height: scrollbarSize,
+                }, onScroll: handleScrollLeft, ref: horizontalScrollRef },
+                react_1.default.createElement("div", { style: {
+                        position: "absolute",
+                        width: scrollbarXWidth,
+                        height: 1,
+                    } })))) : null,
+        showScrollbarY ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "rnc-scrollbar-shim bg-rnc-scrollbar-background print:hidden border-t border-l border-r border-t-rnc-border border-l-rnc-scrollbar-border border-r-rnc-scrollbar-border border-solid absolute bottom-0 right-0 top-0", style: {
+                    width: scrollbarSize,
+                } }),
+            frozenRowHeight === 0 ? null : (react_1.default.createElement("div", { className: "rnc-frozen-row-sep mt-px border-l-0 border-r-0 border-t-0 border-b border-b-rnc-border border-solid absolute top-0 right-0", style: {
+                    width: scrollbarSize,
+                    height: frozenRowHeight,
+                } })),
+            react_1.default.createElement("div", { role: "scrollbar", "aria-orientation": "vertical", className: "rnc-scrollbar print:hidden rnc-scrollbar-y overflow-scroll absolute right-0 will-change-transform", tabIndex: -1, style: {
+                    height: scrollbarYContainterHeight,
+                    top: frozenRowHeight,
+                    width: scrollbarSize,
+                }, onScroll: handleScroll, ref: verticalScrollRef },
+                react_1.default.createElement("div", { className: "absolute", style: {
+                        height: effectiveScrollbarYHeight,
+                        width: 1,
+                    } })))) : null));
+}));
+Grid.displayName = "Grid";
+exports.default = Grid;