@rowsncolumns/grid 9.0.4 → 13.2.32

package/dist/esm/Grid.js

@@ -0,0 +1,2451 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, } from "react";
+import { Line } from "react-konva";
+import invariant from "tiny-invariant";
+import { CellRenderer as defaultItemRenderer } from "./Cell";
+import { CellRenderer as defaultOverlayRenderer } from "./CellOverlay";
+import { GridContext } from "./Context";
+import DefaultFillHandle from "./FillHandle";
+import GridLine from "./GridLine";
+import { ricThrottle } from "./helpers";
+import { getScrollIncrement, useCallbackRef } from "./helpers";
+import { Align, cancelTimeout, canUseDOM, cellIdentifier, clampIndex, getBoundedCells, getColumnOffset as getColumnOffsetHelper, getColumnStartIndexForOffset, getColumnStopIndexForStartIndex, getColumnWidth as getColumnWidthHelper, getEstimatedTotalHeight, getEstimatedTotalWidth, getOffsetForColumnAndAlignment, getOffsetForRowAndAlignment, getRowHeight as getRowHeightHelper, getRowOffset as getRowOffsetHelper, getRowStartIndexForOffset, getRowStopIndexForStartIndex, itemKey, requestTimeout, useIsomorphicLayoutEffect, } from "./helpers";
+import { MemoizedGrid } from "./MemoizedGrid";
+import Selection from "./Selection";
+import { Direction } from "./types";
+const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
+const defaultShadowSettings = {
+    strokeWidth: 1,
+};
+const DEFAULT_ROW_HEIGHT = 21;
+const DEFAULT_COLUMN_WIDTH = 100;
+const defaultRowHeight = () => DEFAULT_COLUMN_WIDTH;
+const defaultColumnWidth = () => 60;
+const defaultSelectionRenderer = (props) => {
+    return React.createElement(Selection, { ...props });
+};
+const defaultGridLineRenderer = (props) => {
+    return React.createElement(GridLine, { ...props });
+};
+export const RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL = 150;
+/* Placeholder for empty array -> Prevents re-render */
+const EMPTY_ARRAY = [];
+/* Max scroll height */
+const 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
+ */
+const Grid = memo(forwardRef((props, forwardedRef) => {
+    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 15, scrollToCellOffset = 0, extendScrollSize = false, autoFocus, onScroll, onImmediateScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = EMPTY_ARRAY, frozenRows = 0, frozenColumns = 0, itemRenderer = defaultItemRenderer, headerRenderer = defaultItemRenderer, enableCellOverlay = false, enableCellBackground = true, overlayRenderer = defaultOverlayRenderer, backgroundRenderer, mergedCells = EMPTY_ARRAY, snap = false, scrollThrottleTimeout = 80, onViewPortChange, onDimensionsChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, onAfterScrollToCell, showFrozenRowShadow = false, showFrozenColumnShadow = false, shadowSettings = defaultShadowSettings, borderStyles = EMPTY_ARRAY, children, gridChildren, stageProps, wrapper, showFillHandle = false, fillSelection, overscanCount = 1, fillHandleSize = 8, onFillHandleMouseDown, onFillHandleDoubleClick, fillhandleBorderColor = "white", fillHandleBackgroundColor = selectionBorderColor, showGridLines = false, gridLineColor = "#E3E2E2", gridLineWidth = 1, gridLineRenderer = defaultGridLineRenderer, isHiddenRow, visibleRowRanges, isHiddenColumn, isHiddenCell, isHiddenOverlay, isHiddenBackground, scale = 1, enableSelectionDrag = false, isDraggingSelection = false, isTouchDevice, FillHandle = DefaultFillHandle, showHeaders, frozenShadowThickness = 0, preventBrowserDefaultScroll = false, footerHeight = 0, footerComponent, getOverflowBuffer, getFrozenColumnOverflowCells, ...rest } = props;
+    const instanceProps = useRef({
+        columnMetadataMap: new Map(),
+        rowMetadataMap: new Map(),
+        lastMeasuredColumnIndex: -1,
+        lastMeasuredRowIndex: -1,
+        estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
+        estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
+    });
+    const stageRef = useRef(null);
+    const rowHeaderStageRef = useRef(null);
+    const columnHeaderStageRef = useRef(null);
+    const containerRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const verticalScrollRef = useRef(null);
+    const wheelingRef = useRef(null);
+    const horizontalScrollRef = useRef(null);
+    const isEndOfVerticalScrollRef = useRef(false);
+    const isStartOffVerticalScrollRef = useRef(false);
+    const [_, forceRender] = useReducer((s) => s + 1, 0);
+    // Cell caching
+    const cellCacheRef = useRef(new Map());
+    const cellOverlayCacheRef = useRef(new Map());
+    const cellBackgroundCacheRef = useRef(new Map());
+    const [scrollState, setScrollState] = useState({
+        scrollTop: 0,
+        scrollLeft: 0,
+        isScrolling: false,
+        verticalScrollDirection: Direction.Down,
+        horizontalScrollDirection: Direction.Right,
+    });
+    const scrollSnapRefs = useRef(null);
+    const { scrollTop, scrollLeft, isScrolling } = scrollState;
+    const isMounted = useRef(false);
+    /* Focus container */
+    const focusContainer = useCallback(() => {
+        if (canUseDOM && document.activeElement !== containerRef.current) {
+            return containerRef.current?.focus();
+        }
+    }, []);
+    /**
+     * Get top offset of rowIndex
+     */
+    const getRowOffset = useCallback((index, readonly) => {
+        if (index < 0) {
+            return 0;
+        }
+        return getRowOffsetHelper({
+            index,
+            rowHeight,
+            columnWidth,
+            instanceProps: instanceProps.current,
+            scale,
+            readonly,
+            visibleRowRanges,
+        });
+    }, [rowHeight, columnWidth, scale, visibleRowRanges]);
+    /**
+     * Get lefft offset of columnIndex
+     */
+    const getColumnOffset = useCallback((index, readonly) => {
+        if (index < 0) {
+            return 0;
+        }
+        return getColumnOffsetHelper({
+            index,
+            rowHeight,
+            columnWidth,
+            instanceProps: instanceProps.current,
+            scale,
+            readonly,
+        });
+    }, [rowHeight, columnWidth, scale]);
+    /**
+     * Get height of rowIndex
+     */
+    const getRowHeight = useCallback((index) => {
+        return getRowHeightHelper(index, instanceProps.current);
+    }, []);
+    /**
+     * Get height of columNiondex
+     */
+    const getColumnWidth = useCallback((index) => {
+        return getColumnWidthHelper(index, instanceProps.current);
+    }, []);
+    /**
+     * onScroll callback
+     */
+    useEffect(() => {
+        if (!isMounted.current)
+            return;
+        onScroll?.({ scrollTop, scrollLeft });
+    }, [scrollTop, scrollLeft, onScroll]);
+    /**
+     * Autofocus container
+     * Imperative focus, the `div` does not support autoFocus
+     * property
+     */
+    useEffect(() => {
+        if (autoFocus) {
+            focusContainer();
+        }
+    }, [autoFocus, focusContainer]);
+    /**
+     * Imperatively get the current scroll position
+     */
+    const getScrollPosition = useCallback(() => {
+        return {
+            scrollTop,
+            scrollLeft,
+        };
+    }, [scrollTop, scrollLeft]);
+    /**
+     * Redraw grid
+     */
+    const redrawGrid = useCallback(() => {
+        // Sync props
+        forceRender();
+        // Redraw camvas
+        stageRef.current?.batchDraw();
+    }, []);
+    /**
+     * Create a map of merged cells
+     * [rowIndex, columnindex] => [parentRowIndex, parentColumnIndex]
+     */
+    const mergedCellMap = useMemo(() => {
+        const mergedCellMap = new Map();
+        if (mergedCells) {
+            for (let i = 0; i < mergedCells.length; i++) {
+                const bounds = mergedCells[i];
+                for (const cell of getBoundedCells(bounds)) {
+                    mergedCellMap.set(cell, bounds);
+                }
+            }
+        }
+        return mergedCellMap;
+    }, [mergedCells]);
+    /* Check if a cell is part of a merged cell */
+    const isMergedCell = useCallback(({ rowIndex, columnIndex }) => {
+        return mergedCellMap.has(cellIdentifier(rowIndex, columnIndex));
+    }, [mergedCellMap]);
+    /* Get top, left bounds of a cell */
+    const getCellBounds = useCallback(({ rowIndex, columnIndex }, spanMerges = true) => {
+        if (spanMerges) {
+            const isMerged = isMergedCell({ rowIndex, columnIndex });
+            if (isMerged)
+                return mergedCellMap.get(cellIdentifier(rowIndex, columnIndex));
+        }
+        return {
+            startRowIndex: rowIndex,
+            startColumnIndex: columnIndex,
+            endColumnIndex: columnIndex,
+            endRowIndex: rowIndex,
+        };
+    }, [mergedCellMap, isMergedCell]);
+    /* Get top, left bounds of a cell */
+    const getActualCellCoords = useCallback(({ rowIndex, columnIndex }) => {
+        const isMerged = isMergedCell({ rowIndex, columnIndex });
+        if (isMerged) {
+            const cell = mergedCellMap.get(cellIdentifier(rowIndex, columnIndex));
+            return {
+                rowIndex: cell?.startRowIndex,
+                columnIndex: cell?.startColumnIndex,
+            };
+        }
+        return {
+            rowIndex,
+            columnIndex,
+        };
+    }, [mergedCellMap, isMergedCell]);
+    /* Spacing for frozen row/column clip */
+    const frozenSpacing = 1;
+    const frozenColumnWidth = useMemo(() => getColumnOffset(frozenColumns), [frozenColumns, getColumnOffset]);
+    const frozenRowHeight = useMemo(() => getRowOffset(frozenRows), [frozenRows, getRowOffset]);
+    // Header columns dimensions: Only for Spreadsheet
+    const headerRowHeight = useMemo(() => getRowOffset(1) + frozenSpacing, [getRowOffset, frozenSpacing]);
+    const headerColumnWidth = useMemo(() => getColumnOffset(1) + frozenSpacing, [getColumnOffset, frozenSpacing]);
+    const [rowStartIndex, rowStopIndex, visibleRowStartIndex, visibleRowStopIndex,] = useMemo(() => {
+        const startIndex = getRowStartIndexForOffset({
+            rowHeight,
+            columnWidth,
+            rowCount,
+            columnCount,
+            instanceProps: instanceProps.current,
+            offset: scrollTop + frozenRowHeight,
+            scale,
+        });
+        const stopIndex = getRowStopIndexForStartIndex({
+            startIndex,
+            rowCount,
+            rowHeight,
+            columnWidth,
+            scrollTop,
+            containerHeight,
+            instanceProps: instanceProps.current,
+            scale,
+            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,
+    ]);
+    const [columnStartIndex, columnStopIndex, visibleColumnStartIndex, visibleColumnStopIndex,] = useMemo(() => {
+        const startIndex = getColumnStartIndexForOffset({
+            rowHeight,
+            columnWidth,
+            rowCount,
+            columnCount,
+            instanceProps: instanceProps.current,
+            offset: Math.max(0, scrollLeft +
+                frozenColumnWidth -
+                (getOverflowBuffer?.(scrollLeft) ?? 0)),
+            scale,
+        });
+        const stopIndex = getColumnStopIndexForStartIndex({
+            startIndex,
+            columnCount,
+            rowHeight,
+            columnWidth,
+            scrollLeft,
+            containerWidth,
+            instanceProps: instanceProps.current,
+            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,
+    ]);
+    /**
+     * 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.
+     */
+    const getVisibleRowIndices = useCallback((startIndex, stopIndex, skipFrozen = true) => {
+        const indices = [];
+        if (visibleRowRanges) {
+            // Use pre-computed ranges for efficient iteration
+            for (const range of visibleRowRanges) {
+                // Skip ranges entirely before our viewport
+                if (range.end < startIndex)
+                    continue;
+                // Stop if we've passed the viewport
+                if (range.start > stopIndex)
+                    break;
+                const effectiveStart = Math.max(range.start, startIndex);
+                const effectiveEnd = Math.min(range.end, stopIndex);
+                for (let rowIndex = effectiveStart; rowIndex <= effectiveEnd; rowIndex++) {
+                    if (skipFrozen && rowIndex < frozenRows)
+                        continue;
+                    indices.push(rowIndex);
+                }
+            }
+        }
+        else {
+            // Fallback to checking each row
+            for (let rowIndex = startIndex; rowIndex <= stopIndex; rowIndex++) {
+                if (skipFrozen && rowIndex < frozenRows)
+                    continue;
+                if (isHiddenRow?.(rowIndex))
+                    continue;
+                indices.push(rowIndex);
+            }
+        }
+        return indices;
+    }, [visibleRowRanges, isHiddenRow, frozenRows]);
+    const estimatedTotalHeight = useMemo(() => getEstimatedTotalHeight(rowCount, instanceProps.current), [rowCount, instanceProps.current.lastMeasuredRowIndex, rowHeight]);
+    const estimatedTotalWidth = useMemo(() => getEstimatedTotalWidth(columnCount, instanceProps.current), [columnCount, instanceProps.current.lastMeasuredColumnIndex, columnWidth]);
+    /* Method to get dimensions of the grid */
+    const getDimensions = useCallback(() => {
+        return {
+            containerWidth,
+            containerHeight,
+            estimatedTotalWidth,
+            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
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (snap) {
+            scrollSnapRefs.current = {
+                visibleRowStartIndex,
+                rowCount,
+                visibleColumnStartIndex,
+                columnCount,
+            };
+        }
+    }, [
+        snap,
+        visibleRowStartIndex,
+        rowCount,
+        visibleColumnStartIndex,
+        columnCount,
+    ]);
+    /**
+     * Snaps vertical scrollbar to the next/prev visible row
+     */
+    const snapToRowFn = useCallback(({ deltaY }) => {
+        if (!verticalScrollRef.current || !scrollSnapRefs.current)
+            return;
+        if (deltaY !== 0) {
+            const direction = deltaY < 0 ? Direction.Up : Direction.Down;
+            const index = getScrollIncrement(deltaY, DEFAULT_ROW_HEIGHT);
+            const { visibleRowStartIndex, rowCount } = scrollSnapRefs.current;
+            const nextVisibleRow = clampIndex(visibleRowStartIndex + (direction === Direction.Down ? 1 : -1), isHiddenRow, direction);
+            let nextIndex = direction === Direction.Up
+                ? // User is scrolling up
+                    Math.max(0, nextVisibleRow - index)
+                : Math.min(nextVisibleRow + index, rowCount - 1);
+            /* Ignore hidden row */
+            nextIndex = clampIndex(nextIndex, isHiddenRow, direction);
+            const rowOffset = getRowOffset(nextIndex) - frozenRowHeight;
+            verticalScrollRef.current.scrollTo({
+                top: rowOffset,
+                behavior: "auto",
+            });
+        }
+    }, [getRowOffset, isHiddenRow, frozenRowHeight]);
+    /**
+     * Snaps horizontal scrollbar to the next/prev visible column
+     */
+    const snapToColumnFn = useCallback(({ deltaX }) => {
+        if (!horizontalScrollRef.current || !scrollSnapRefs.current)
+            return;
+        if (deltaX !== 0) {
+            const index = getScrollIncrement(deltaX, DEFAULT_COLUMN_WIDTH); // Min column width
+            const direction = deltaX < 0 ? Direction.Left : Direction.Right;
+            const { visibleColumnStartIndex, columnCount } = scrollSnapRefs.current;
+            const nextVisibleColumn = clampIndex(visibleColumnStartIndex + (direction === Direction.Right ? 1 : -1), isHiddenColumn, direction);
+            let nextIndex = direction === Direction.Left
+                ? Math.max(0, nextVisibleColumn - index)
+                : Math.min(nextVisibleColumn + index, columnCount - 1);
+            /* Ignore hidden column */
+            nextIndex = clampIndex(nextIndex, isHiddenColumn, direction);
+            const columnOffset = getColumnOffset(nextIndex) - frozenColumnWidth;
+            horizontalScrollRef.current.scrollTo({
+                left: columnOffset,
+                behavior: "auto",
+            });
+        }
+    }, [getColumnOffset, isHiddenColumn, frozenColumnWidth]);
+    const snapToRowThrottler = useRef(undefined);
+    const snapToColumnThrottler = useRef(undefined);
+    /**
+     * Register snap throttlers
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (snap) {
+            snapToRowThrottler.current = ricThrottle(snapToRowFn);
+            snapToColumnThrottler.current = ricThrottle(snapToColumnFn);
+        }
+        return () => {
+            snapToRowThrottler.current = undefined;
+            snapToColumnThrottler.current = undefined;
+        };
+    }, [snap, scrollThrottleTimeout, snapToColumnFn, snapToRowFn]);
+    /* Find frozen column boundary */
+    const isWithinFrozenColumnBoundary = useCallback((x) => {
+        return frozenColumns > 0 && x < frozenColumnWidth;
+    }, [frozenColumns, frozenColumnWidth]);
+    /* Find frozen row boundary */
+    const isWithinFrozenRowBoundary = useCallback((y) => {
+        return frozenRows > 0 && y < frozenRowHeight;
+    }, [frozenRows, frozenRowHeight]);
+    /**
+     * Get relative mouse position
+     */
+    const getRelativePositionFromOffset = useCallback((left, top) => {
+        invariant(typeof left === "number" && typeof top === "number", "Top and left should be a number");
+        if (!stageRef.current) {
+            return undefined;
+        }
+        const stage = stageRef.current.getStage();
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+            left = left - rect.x;
+            top = top - rect.y;
+        }
+        const { x, y } = stage
+            .getAbsoluteTransform()
+            .copy()
+            .invert()
+            .point({ x: left, y: top });
+        return { x, y };
+    }, []);
+    /**
+     * Get position absolute to document
+     * from relative grid coordinates
+     */
+    const getAbsolutePositionFromOffset = useCallback((x, y) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+            x = x + rect.x;
+            y = y + rect.y;
+        }
+        return {
+            x,
+            y,
+        };
+    }, []);
+    /**
+     * Get cell cordinates from current mouse x/y positions
+     */
+    const getCellCoordsFromOffset = useCallback((left, top, includeFrozen = true) => {
+        const pos = getRelativePositionFromOffset(left, top);
+        if (!pos)
+            return undefined;
+        const { x, y } = pos;
+        const rowOffset = includeFrozen && isWithinFrozenRowBoundary(y) ? y : y + scrollTop;
+        const columnOffset = includeFrozen && isWithinFrozenColumnBoundary(x) ? x : x + scrollLeft;
+        if (rowOffset > estimatedTotalHeight ||
+            columnOffset > estimatedTotalWidth) {
+            return undefined;
+        }
+        const rowIndex = getRowStartIndexForOffset({
+            rowHeight,
+            columnWidth,
+            rowCount,
+            columnCount,
+            instanceProps: instanceProps.current,
+            offset: rowOffset,
+            scale,
+        });
+        const columnIndex = getColumnStartIndexForOffset({
+            rowHeight,
+            columnWidth,
+            rowCount,
+            columnCount,
+            instanceProps: instanceProps.current,
+            offset: columnOffset,
+            scale,
+        });
+        /* To be compatible with merged cells */
+        const bounds = getCellBounds({ rowIndex, 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
+     *
+     */
+    const getCellOffsetFromCoords = useCallback((cell, readonly) => {
+        const { startRowIndex, startColumnIndex, endColumnIndex, endRowIndex } = getCellBounds(cell);
+        const x = getColumnOffset(startColumnIndex, readonly);
+        const y = getRowOffset(startRowIndex, readonly);
+        const width = getColumnOffset(endColumnIndex + 1, readonly) - x;
+        const height = getRowOffset(endRowIndex + 1, readonly) - y;
+        return {
+            x,
+            y,
+            width,
+            height,
+        };
+    }, [getColumnOffset, getRowOffset, getCellBounds]);
+    /* Get current view port of the grid */
+    const getViewPort = useCallbackRef(useCallback(() => {
+        return {
+            rowStartIndex,
+            rowStopIndex,
+            columnStartIndex,
+            columnStopIndex,
+            visibleRowStartIndex,
+            visibleRowStopIndex,
+            visibleColumnStartIndex,
+            visibleColumnStopIndex,
+        };
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        visibleRowStartIndex,
+        visibleRowStopIndex,
+        visibleColumnStartIndex,
+        visibleColumnStopIndex,
+    ]));
+    // Scrollbars
+    const scrollbarXContainterWidth = containerWidth - frozenColumnWidth;
+    const scrollbarXWidth = estimatedTotalWidth -
+        frozenColumnWidth +
+        (extendScrollSize ? scrollbarSize : 0);
+    const scrollbarYContainterHeight = containerHeight - frozenRowHeight;
+    const scrollbarYHeight = estimatedTotalHeight -
+        frozenRowHeight +
+        (extendScrollSize ? scrollbarSize : 0) +
+        (footerHeight > 0 ? footerHeight - scrollbarSize : 0);
+    const showScrollbarX = showScrollbar && scrollbarXWidth > scrollbarXContainterWidth;
+    const showScrollbarY = showScrollbar && scrollbarYHeight > scrollbarYContainterHeight;
+    const needsScaling = scrollbarYHeight > MAX_SCROLLBAR_HEIGHT;
+    const effectiveScrollbarYHeight = Math.min(MAX_SCROLLBAR_HEIGHT, scrollbarYHeight);
+    /**
+     * Clears the cell cache
+     * when scrolling is done or when user changes sheet
+     */
+    const clearCache = useCallback(() => {
+        cellCacheRef.current.clear();
+        cellOverlayCacheRef.current.clear();
+        cellBackgroundCacheRef.current.clear();
+    }, []);
+    /**
+     * Conditionally get and set cell cache and return cell
+     */
+    const getCellCache = useCallback((cache, cellId, nodeGetter, isScrolling, isMerged = false) => {
+        const 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 */
+    const resetAfterIndices = useCallback(({ columnIndex, rowIndex }, 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
+     */
+    const resizeColumn = useCallback((index, dimension) => {
+        instanceProps.current.columnMetadataMap.get(index).size = dimension;
+        resetAfterIndices({ columnIndex: index }, false);
+    }, [resetAfterIndices]);
+    /**
+     * Resize one or more rows
+     */
+    const resizeRow = useCallback((index, dimension) => {
+        instanceProps.current.rowMetadataMap.get(index).size = dimension;
+        resetAfterIndices({ rowIndex: index + 1 }, false);
+    }, [resetAfterIndices]);
+    /* Expose some methods in ref */
+    useImperativeHandle(forwardedRef, () => {
+        return {
+            scrollTo,
+            scrollBy,
+            scrollToCell,
+            stage: stageRef.current,
+            rowHeaderStage: rowHeaderStageRef.current,
+            columnHeaderStage: columnHeaderStageRef.current,
+            container: containerRef.current,
+            resetAfterIndices,
+            getScrollPosition,
+            isMergedCell,
+            getCellBounds,
+            getCellCoordsFromOffset,
+            getCellOffsetFromCoords,
+            getActualCellCoords,
+            focus: focusContainer,
+            resizeColumn,
+            resizeRow,
+            getViewPort,
+            getRelativePositionFromOffset,
+            getAbsolutePositionFromOffset,
+            scrollToTop,
+            scrollToBottom,
+            getDimensions,
+            getRowOffset,
+            getColumnOffset,
+            redrawGrid,
+            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 */
+    const resetIsScrolling = useCallback(() => {
+        resetIsScrollingTimeoutID.current = null;
+        // Reset cell cache
+        clearCache();
+        setScrollState((prev) => {
+            // Only if required
+            if (prev.isScrolling === false) {
+                return prev;
+            }
+            return {
+                ...prev,
+                isScrolling: false,
+            };
+        });
+    }, [clearCache]);
+    const resetIsScrollingTimeoutID = useRef(null);
+    const resetIsScrollingDebounced = useCallback(() => {
+        if (resetIsScrollingTimeoutID.current !== null) {
+            cancelTimeout(resetIsScrollingTimeoutID.current);
+        }
+        resetIsScrollingTimeoutID.current = requestTimeout(resetIsScrolling, RESET_SCROLL_EVENTS_DEBOUNCE_INTERVAL);
+    }, [resetIsScrolling]);
+    /* Handle vertical scroll */
+    const handleScroll = useCallback((e) => {
+        const { scrollTop } = e.currentTarget;
+        // Calculate what percentage of the scrollable area has been scrolled
+        // Apply scaling if needed
+        const scaledScrollTop = needsScaling
+            ? (scrollTop /
+                (effectiveScrollbarYHeight - scrollbarYContainterHeight)) *
+                (scrollbarYHeight - scrollbarYContainterHeight)
+            : scrollTop;
+        setScrollState((prev) => {
+            // Only setstate if required
+            if (prev.scrollTop === scaledScrollTop) {
+                return prev;
+            }
+            return {
+                ...prev,
+                isScrolling: true,
+                verticalScrollDirection: prev.scrollTop > scaledScrollTop ? Direction.Up : Direction.Down,
+                scrollTop: scaledScrollTop,
+            };
+        });
+        /* Scroll callbacks */
+        onImmediateScroll?.({ scrollTop, scrollLeft });
+        /* Reset isScrolling if required */
+        resetIsScrollingDebounced();
+    }, [
+        scrollLeft,
+        needsScaling,
+        effectiveScrollbarYHeight,
+        scrollbarYHeight,
+        scrollbarYContainterHeight,
+        onImmediateScroll,
+        resetIsScrollingDebounced,
+    ]);
+    /* Handle horizontal scroll */
+    const handleScrollLeft = useCallback((e) => {
+        const { scrollLeft } = e.currentTarget;
+        setScrollState((prev) => {
+            // Only setstate if required
+            if (prev.scrollLeft === scrollLeft) {
+                return prev;
+            }
+            return {
+                ...prev,
+                isScrolling: true,
+                horizontalScrollDirection: prev.scrollLeft > scrollLeft ? Direction.Left : Direction.Right,
+                scrollLeft,
+            };
+        });
+        /* Scroll callbacks */
+        onImmediateScroll?.({ scrollLeft, scrollTop });
+        /* Reset isScrolling if required */
+        resetIsScrollingDebounced();
+    }, [scrollTop, onImmediateScroll, resetIsScrollingDebounced]);
+    /* Scroll based on left, top position */
+    const scrollTo = useCallback(({ scrollTop, scrollLeft }, 
+    // 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) => {
+        // Only update state in non-touch
+        // devices, otherwise it causes flickering
+        // because of scrollbar state updates
+        if (!isTouchDevice || immediate) {
+            setScrollState((prev) => {
+                return {
+                    ...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) {
+                horizontalScrollRef.current?.scrollTo({
+                    left: scrollLeft,
+                    behavior: "auto",
+                });
+            }
+            if (scrollTop !== void 0) {
+                // Apply scaling if needed
+                const scaledScrollTop = needsScaling
+                    ? (scrollTop / (scrollbarYHeight - scrollbarYContainterHeight)) *
+                        (effectiveScrollbarYHeight - scrollbarYContainterHeight)
+                    : scrollTop;
+                verticalScrollRef.current?.scrollTo({
+                    top: scaledScrollTop,
+                    behavior: "auto",
+                });
+            }
+        }
+    }, [
+        showScrollbar,
+        needsScaling,
+        effectiveScrollbarYHeight,
+        scrollbarYHeight,
+        scrollbarYContainterHeight,
+        isTouchDevice,
+    ]);
+    /* Scroll grid to top */
+    const scrollToTop = useCallback(() => {
+        scrollTo({ scrollTop: 0, scrollLeft: 0 });
+    }, [scrollTo]);
+    /* Scroll grid to bottom */
+    const scrollToBottom = useCallback(() => {
+        scrollTo({
+            scrollTop: Math.floor(estimatedTotalHeight - containerHeight + footerHeight),
+        });
+    }, [estimatedTotalHeight, containerHeight, footerHeight, scrollTo]);
+    /**
+     * Scrollby utility
+     */
+    const scrollBy = useCallback(({ x, y }) => {
+        setScrollState((prev) => {
+            return {
+                ...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
+     */
+    const scrollToCell = useCallback(({ rowIndex, columnIndex }, align = Align.auto) => {
+        const isFrozenRow = rowIndex !== void 0 && rowIndex < frozenRows;
+        const isFrozenColumn = columnIndex !== void 0 && columnIndex < frozenColumns;
+        const frozenColumnOffset = getColumnOffset(frozenColumns);
+        /* Making sure getColumnWidth works */
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const x = columnIndex !== void 0 ? getColumnOffset(columnIndex) : void 0;
+        /* Making sure getRowHeight works */
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const y = rowIndex !== void 0 ? getRowOffset(rowIndex) : void 0;
+        const width = columnIndex !== void 0 ? getColumnWidth(columnIndex) : 0;
+        const height = rowIndex !== void 0 ? getRowHeight(rowIndex) : 0;
+        const columnAlign = width > containerWidth ? Align.start : align;
+        const rowAlign = height > containerHeight ? Align.start : align;
+        const newScrollLeft = columnIndex !== void 0 && !isFrozenColumn
+            ? Math.floor(getOffsetForColumnAndAlignment({
+                index: columnIndex,
+                containerHeight,
+                containerWidth,
+                columnCount,
+                columnWidth,
+                rowCount,
+                rowHeight,
+                scrollOffset: scrollLeft,
+                instanceProps: instanceProps.current,
+                scrollbarSize: scrollbarSize +
+                    (columnIndex === columnCount - 1 ? 0 : scrollToCellOffset),
+                frozenOffset: frozenColumnOffset,
+                align: columnAlign,
+                scale,
+                estimatedTotalWidth,
+                estimatedTotalHeight,
+            }))
+            : void 0;
+        const frozenRowOffset = getRowOffset(frozenRows);
+        let newScrollTop = rowIndex !== void 0 && !isFrozenRow
+            ? Math.floor(getOffsetForRowAndAlignment({
+                index: rowIndex,
+                containerHeight: containerHeight,
+                containerWidth,
+                columnCount,
+                columnWidth,
+                rowCount,
+                rowHeight,
+                scrollOffset: scrollTop,
+                instanceProps: instanceProps.current,
+                scrollbarSize: scrollbarSize +
+                    (rowIndex === rowCount - 1 ? 0 : scrollToCellOffset),
+                frozenOffset: frozenRowOffset,
+                align: rowAlign,
+                scale,
+                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;
+        //   }
+        // }
+        const isOutsideViewport = (rowIndex !== void 0 &&
+            rowIndex > rowStopIndex + (rowStopIndex - rowStartIndex)) ||
+            (columnIndex !== void 0 &&
+                columnIndex >
+                    columnStopIndex + (columnStopIndex - columnStartIndex));
+        if (isOutsideViewport) {
+            requestAnimationFrame(() => {
+                scrollTo({
+                    scrollLeft: newScrollLeft,
+                    scrollTop: newScrollTop,
+                });
+            });
+        }
+        else {
+            scrollTo({
+                scrollLeft: newScrollLeft,
+                scrollTop: newScrollTop,
+            });
+        }
+        // After scroll to cell callback
+        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
+     */
+    const handleWheel = useCallback((event) => {
+        /* If user presses shift key, scroll horizontally */
+        const isCtrlKey = event.ctrlKey;
+        const isMetaKey = event.metaKey;
+        // Ctrl and meta key are used for zooming
+        if (isCtrlKey || isMetaKey) {
+            // Disable wheel event on ctrl key
+            event.preventDefault();
+            return;
+        }
+        const isScrollingHorizontally = event.shiftKey;
+        const { deltaX, deltaY, deltaMode } = event;
+        const isVerticalEndOfScroll = !isScrollingHorizontally &&
+            ((isEndOfVerticalScrollRef.current && deltaY > 0) ||
+                (isStartOffVerticalScrollRef.current && deltaY < 0));
+        const isUserSwipingLeft = Math.abs(deltaX) > 0;
+        const 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;
+        }
+        let dx = isScrollingHorizontally
+            ? deltaY === 0
+                ? deltaX
+                : deltaY
+            : deltaX;
+        let dy = deltaY;
+        /* If snaps are active */
+        if (snap) {
+            /* Scroll only in one direction */
+            const isHorizontal = isScrollingHorizontally || Math.abs(dx) > Math.abs(dy);
+            if (isHorizontal) {
+                snapToColumnThrottler.current?.({
+                    deltaX,
+                });
+            }
+            else {
+                snapToRowThrottler.current?.({
+                    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(() => {
+            wheelingRef.current = null;
+            if (isScrollingHorizontally) {
+                horizontalScrollRef.current?.scrollBy({
+                    left: dx,
+                    behavior: "auto",
+                });
+            }
+            else {
+                horizontalScrollRef.current?.scrollBy({
+                    left: dx,
+                    behavior: "auto",
+                });
+                verticalScrollRef.current?.scrollBy({
+                    top: dy,
+                    behavior: "auto",
+                });
+            }
+        });
+    }, [snap, preventBrowserDefaultScroll]);
+    /**
+     * Handle mouse wheeel
+     */
+    useEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        scrollContainer?.addEventListener("wheel", handleWheel, {
+            passive: false,
+        });
+        isMounted.current = true;
+        return () => {
+            scrollContainer?.removeEventListener("wheel", handleWheel);
+        };
+    }, [handleWheel]);
+    /* Callback when visible rows or columns have changed */
+    useEffect(() => {
+        onViewPortChange?.({
+            rowStartIndex,
+            rowStopIndex,
+            columnStartIndex,
+            columnStopIndex,
+            visibleRowStartIndex,
+            visibleRowStopIndex,
+            visibleColumnStartIndex,
+            visibleColumnStopIndex,
+        });
+    }, [
+        onViewPortChange,
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        visibleRowStartIndex,
+        visibleRowStopIndex,
+        visibleColumnStartIndex,
+        visibleColumnStopIndex,
+    ]);
+    // Callback when grid dimensions change
+    useEffect(() => {
+        if (!isScrolling) {
+            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 */
+    const [gridLines, gridLinesFrozenRow, gridLinesFrozenColumn, gridLinesFrozenIntersection,] = useMemo(() => {
+        const gridLines = [];
+        const gridLinesFrozenRow = [];
+        const gridLinesFrozenColumn = [];
+        const gridLinesFrozenIntersection = [];
+        if (showGridLines) {
+            // Horizontal - use getVisibleRowIndices for efficient iteration
+            const visibleRows = getVisibleRowIndices(rowStartIndex, rowStopIndex);
+            for (const rowIndex of visibleRows) {
+                const x1 = getColumnOffset(frozenColumns);
+                const x2 = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
+                const y1 = getRowOffset(Math.min(rowIndex + 1, rowCount));
+                const y2 = y1;
+                gridLines.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetY: -0.5,
+                    key: itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
+                }));
+                if (frozenColumns > 1) {
+                    gridLinesFrozenColumn.push(gridLineRenderer({
+                        points: [0, y1, x2, y2],
+                        stroke: gridLineColor,
+                        strokeWidth: gridLineWidth,
+                        offsetY: -0.5,
+                        key: itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
+                    }));
+                }
+            }
+            // Vertical
+            for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                /* Ignore frozen rows */
+                if (columnIndex < frozenColumns || isHiddenColumn?.(columnIndex))
+                    continue;
+                const x1 = getColumnOffset(Math.min(columnIndex + 1, columnCount));
+                const x2 = x1;
+                const y1 = getRowOffset(frozenRows);
+                const y2 = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
+                gridLines.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetX: -0.5,
+                    key: itemKey({ rowIndex: x1, columnIndex: columnIndex }),
+                }));
+                if (frozenRows > 1) {
+                    gridLinesFrozenRow.push(gridLineRenderer({
+                        points: [x1, 0, x2, y2],
+                        stroke: gridLineColor,
+                        strokeWidth: gridLineWidth,
+                        offsetX: -0.5,
+                        key: itemKey({ rowIndex: x1, columnIndex: columnIndex }),
+                    }));
+                }
+            }
+            for (let rowIndex = 0; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+                if (isHiddenRow?.(rowIndex)) {
+                    continue;
+                }
+                const x1 = getColumnOffset(1);
+                const x2 = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
+                const y1 = getRowOffset(Math.min(rowIndex + 1, rowCount));
+                const y2 = y1;
+                gridLinesFrozenRow.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetY: -0.5,
+                    key: itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
+                }));
+                gridLinesFrozenIntersection.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetY: -0.5,
+                    key: itemKey({ rowIndex: rowIndex, columnIndex: y1 }),
+                }));
+            }
+            for (let columnIndex = 0; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                if (isHiddenColumn?.(columnIndex))
+                    continue;
+                const x1 = getColumnOffset(Math.min(columnIndex + 1, columnCount));
+                const x2 = x1;
+                const y1 = getRowOffset(1);
+                const y2 = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
+                gridLinesFrozenColumn.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetX: -0.5,
+                    key: itemKey({ rowIndex: x1, columnIndex: columnIndex }),
+                }));
+                gridLinesFrozenIntersection.push(gridLineRenderer({
+                    points: [x1, y1, x2, y2],
+                    stroke: gridLineColor,
+                    strokeWidth: gridLineWidth,
+                    offsetX: -0.5,
+                    key: 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,
+    ]);
+    // 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.)
+    useMemo(clearCache, [
+        clearCache,
+        itemRenderer,
+        overlayRenderer,
+        backgroundRenderer,
+    ]);
+    const mergedCellRenderMap = new Set();
+    const mergedCellFrozenRowMap = new Set();
+    // Get frozen column overflow cells - computed AFTER frozen cells useMemo
+    // so it has data from current render (itemRenderer just populated overflowMapRef)
+    const frozenColumnOverflowCells = getFrozenColumnOverflowCells?.(frozenColumnWidth, frozenColumns);
+    // Frozen cells useMemo runs FIRST so itemRenderer populates overflowMapRef
+    const [frozenRowCellBackgrounds, frozenColumnCellBackgrounds, frozenRowCells, frozenColumnCells, frozenRowCellOverlays, frozenColumnCellOverlays,] = useMemo(() => {
+        /* Draw frozen rows */
+        const frozenRowCells = [];
+        const frozenRowCellOverlays = [];
+        const frozenRowCellBackgrounds = [];
+        for (let rowIndex = 1; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+            if (isHiddenRow?.(rowIndex))
+                continue;
+            /**
+             * Do any pre-processing of the row before being renderered.
+             * Useful for `react-table` to call `prepareRow(row)`
+             */
+            onBeforeRenderRow?.(rowIndex);
+            for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                /* Skip merged cells columns */
+                if (columnIndex < frozenColumns &&
+                    !frozenColumnOverflowCells?.has(cellIdentifier(rowIndex, columnIndex))) {
+                    continue;
+                }
+                const isMerged = isMergedCell({ rowIndex, columnIndex });
+                const bounds = getCellBounds({ rowIndex, columnIndex });
+                const actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                const actualColumnIndex = isMerged
+                    ? bounds.startColumnIndex
+                    : columnIndex;
+                const actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                const actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                if (isHiddenColumn?.(actualColumnIndex)) {
+                    continue;
+                }
+                if (!isMerged && isHiddenCell?.(actualRowIndex, actualColumnIndex)) {
+                    continue;
+                }
+                if (isMerged) {
+                    const cellId = cellIdentifier(bounds.startRowIndex, bounds.startColumnIndex);
+                    if (mergedCellFrozenRowMap.has(cellId)) {
+                        continue;
+                    }
+                    mergedCellFrozenRowMap.add(cellId);
+                }
+                const y = getRowOffset(actualRowIndex);
+                const height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                const x = getColumnOffset(actualColumnIndex);
+                const width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                const cellId = cellIdentifier(actualRowIndex, actualColumnIndex);
+                const frozenRowCell = getCellCache(cellCacheRef.current, cellId, () => itemRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex: actualRowIndex,
+                    columnIndex: actualColumnIndex,
+                    isMergedCell: isMerged,
+                    key: itemKey({
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                    }),
+                }), isScrolling, isMerged);
+                frozenRowCells.push(frozenRowCell);
+                if (enableCellOverlay &&
+                    !isHiddenOverlay?.(actualRowIndex, actualColumnIndex)) {
+                    const frozenRowCellOverlay = getCellCache(cellOverlayCacheRef.current, cellId, () => overlayRenderer({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: itemKey({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }), isScrolling);
+                    frozenRowCellOverlays.push(frozenRowCellOverlay);
+                }
+                if (enableCellBackground &&
+                    !isHiddenBackground?.(actualRowIndex, actualColumnIndex)) {
+                    const frozenRowCellBackground = getCellCache(cellBackgroundCacheRef.current, cellId, () => backgroundRenderer?.({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: itemKey({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }), isScrolling);
+                    frozenRowCellBackgrounds.push(frozenRowCellBackground);
+                }
+            }
+        }
+        /* Draw frozen columns */
+        const mergedCellFrozenColumnMap = new Set();
+        const frozenColumnCells = [];
+        const frozenColumnCellOverlays = [];
+        const frozenColumnCellBackgrounds = [];
+        // Use getVisibleRowIndices for efficient iteration over visible rows
+        const visibleRowsForFrozenCols = getVisibleRowIndices(rowStartIndex, rowStopIndex);
+        for (const rowIndex of visibleRowsForFrozenCols) {
+            for (let columnIndex = 1; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                const isMerged = isMergedCell({ rowIndex, columnIndex });
+                const bounds = getCellBounds({ rowIndex, columnIndex });
+                const actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                const actualColumnIndex = isMerged
+                    ? bounds.startColumnIndex
+                    : columnIndex;
+                const actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                const actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                if (isHiddenColumn?.(actualColumnIndex)) {
+                    continue;
+                }
+                if (!isMerged && isHiddenCell?.(actualRowIndex, actualColumnIndex)) {
+                    continue;
+                }
+                if (isMerged) {
+                    const cellId = cellIdentifier(bounds.startRowIndex, bounds.startColumnIndex);
+                    if (mergedCellFrozenColumnMap.has(cellId)) {
+                        continue;
+                    }
+                    mergedCellFrozenColumnMap.add(cellId);
+                }
+                const y = getRowOffset(actualRowIndex);
+                const height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                const x = getColumnOffset(actualColumnIndex);
+                const width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                const cellId = cellIdentifier(actualRowIndex, actualColumnIndex);
+                const frozenColumnCell = getCellCache(cellCacheRef.current, cellId, () => itemRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex: actualRowIndex,
+                    columnIndex: actualColumnIndex,
+                    isMergedCell: isMerged,
+                    key: itemKey({
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                    }),
+                }), isScrolling, isMerged);
+                frozenColumnCells.push(frozenColumnCell);
+                if (enableCellOverlay &&
+                    !isHiddenOverlay?.(actualRowIndex, actualColumnIndex)) {
+                    const frozenColumnCellOverlay = getCellCache(cellOverlayCacheRef.current, cellId, () => overlayRenderer({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: itemKey({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }), isScrolling);
+                    frozenColumnCellOverlays.push(frozenColumnCellOverlay);
+                }
+                if (enableCellBackground &&
+                    !isHiddenBackground?.(actualRowIndex, actualColumnIndex)) {
+                    const frozenColumnCellBackground = getCellCache(cellBackgroundCacheRef.current, cellId, () => backgroundRenderer?.({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: itemKey({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }), isScrolling);
+                    frozenColumnCellBackgrounds.push(frozenColumnCellBackground);
+                }
+            }
+        }
+        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,
+    ]);
+    const [cellBackgrounds, cells, cellOverlays] = useMemo(() => {
+        /* Draw all cells */
+        const cells = [];
+        /**
+         * Lets users draw cells on top of existing canvas
+         */
+        const cellOverlays = [];
+        // Lets users draw layers of cells
+        // 1. Background, 2. Text 3. Border
+        const cellBackgrounds = [];
+        if (columnCount > 0 && rowCount) {
+            // Use getVisibleRowIndices for efficient iteration over visible rows
+            const visibleRows = getVisibleRowIndices(rowStartIndex, rowStopIndex);
+            for (const rowIndex of visibleRows) {
+                for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                    /**
+                     * Skip frozen columns unless they overflow into the body area
+                     * Skip merged cells that are out of bounds
+                     */
+                    if (columnIndex < frozenColumns &&
+                        !frozenColumnOverflowCells?.has(cellIdentifier(rowIndex, columnIndex))) {
+                        continue;
+                    }
+                    const isMerged = isMergedCell({ rowIndex, columnIndex });
+                    const bounds = getCellBounds({ rowIndex, columnIndex });
+                    const actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                    const actualColumnIndex = isMerged
+                        ? bounds.startColumnIndex
+                        : columnIndex;
+                    const actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                    const actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                    const cellId = cellIdentifier(bounds.startRowIndex, bounds.startColumnIndex);
+                    if (isHiddenColumn?.(actualColumnIndex)) {
+                        continue;
+                    }
+                    if (!isMerged &&
+                        isHiddenCell?.(actualRowIndex, actualColumnIndex)) {
+                        continue;
+                    }
+                    if (isMerged) {
+                        if (mergedCellRenderMap.has(cellId)) {
+                            continue;
+                        }
+                        mergedCellRenderMap.add(cellId);
+                    }
+                    const y = getRowOffset(actualRowIndex);
+                    const height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                    const x = getColumnOffset(actualColumnIndex);
+                    const width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                    const cell = getCellCache(cellCacheRef.current, cellId, () => itemRenderer({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: itemKey({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }), isScrolling, isMerged);
+                    cells.push(cell);
+                    if (enableCellOverlay &&
+                        !isHiddenOverlay?.(actualRowIndex, actualColumnIndex)) {
+                        const cellOverlay = getCellCache(cellOverlayCacheRef.current, cellId, () => overlayRenderer({
+                            x,
+                            y,
+                            width,
+                            height,
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                            isMergedCell: isMerged,
+                            key: itemKey({
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                            }),
+                        }), isScrolling);
+                        cellOverlays.push(cellOverlay);
+                    }
+                    if (enableCellBackground &&
+                        !isHiddenBackground?.(actualRowIndex, actualColumnIndex)) {
+                        const cellBackground = getCellCache(cellBackgroundCacheRef.current, cellId, () => backgroundRenderer?.({
+                            x,
+                            y,
+                            width,
+                            height,
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                            isMergedCell: isMerged,
+                            key: itemKey({
+                                rowIndex: actualRowIndex,
+                                columnIndex: actualColumnIndex,
+                            }),
+                        }), isScrolling);
+                        cellBackgrounds.push(cellBackground);
+                    }
+                }
+            }
+        }
+        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,
+    ]);
+    /**
+     * Get x offset of a cell
+     * takes into account frozen columns
+     * and scoll
+     */
+    const getXOffset = useCallback((columnIndex) => {
+        const 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
+     */
+    const getYOffset = useCallback((rowIndex) => {
+        const isInFrozenRow = rowIndex < frozenRows;
+        return getRowOffset(rowIndex) - (isInFrozenRow ? 0 : scrollTop);
+    }, [getRowOffset, scrollTop, frozenRows]);
+    // Frozen header cells
+    const [frozenRowHeaderCells, frozenColumnHeaderCells] = useMemo(() => {
+        /* Draw frozen rows */
+        const frozenRowHeaderCells = [];
+        const frozenColumnHeaderCells = [];
+        for (let rowIndex = 0; rowIndex < 1; rowIndex++) {
+            for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+                const y = getRowOffset(rowIndex);
+                const height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                const x = getColumnOffset(columnIndex);
+                const width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenColumnHeaderCells.push(headerRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex,
+                    columnIndex,
+                    key: itemKey({
+                        rowIndex,
+                        columnIndex,
+                    }),
+                }));
+            }
+        }
+        /* Draw frozen columns (row headers) */
+        // Use getVisibleRowIndices for efficient iteration
+        const visibleRowsForHeaders = getVisibleRowIndices(rowStartIndex, rowStopIndex, false);
+        for (const rowIndex of visibleRowsForHeaders) {
+            for (let columnIndex = 0; columnIndex < 1; columnIndex++) {
+                const y = getRowOffset(rowIndex);
+                const height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                const x = getColumnOffset(columnIndex);
+                const width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenRowHeaderCells.push(headerRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex,
+                    columnIndex,
+                    key: itemKey({
+                        rowIndex,
+                        columnIndex,
+                    }),
+                }));
+            }
+        }
+        return [frozenRowHeaderCells, frozenColumnHeaderCells];
+    }, [
+        rowStartIndex,
+        rowStopIndex,
+        columnStartIndex,
+        columnStopIndex,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        headerRenderer,
+        getVisibleRowIndices,
+    ]);
+    /**
+     * Frozen column shadow
+     */
+    const frozenColumnShadow = useMemo(() => {
+        const frozenColumnLineX = getColumnOffset(frozenColumns);
+        const frozenColumnLineY = getRowOffset(Math.min(rowStopIndex + 1, rowCount));
+        return (React.createElement(Line, { 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
+     */
+    const frozenRowShadow = useMemo(() => {
+        const frozenRowLineY = getRowOffset(frozenRows);
+        const frozenRowLineX = getColumnOffset(Math.min(columnStopIndex + 1, columnCount));
+        return (React.createElement(Line, { 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 */
+    const [frozenIntersectionCellBackgrounds, frozenIntersectionCells, frozenIntersectionCellOverlays,] = useMemo(() => {
+        const frozenIntersectionCellBackgrounds = [];
+        const frozenIntersectionCells = [];
+        const frozenIntersectionCellOverlays = [];
+        for (let rowIndex = 1; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+            if (isHiddenRow?.(rowIndex))
+                continue;
+            for (let columnIndex = 1; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                const isMerged = isMergedCell({ rowIndex, columnIndex });
+                const bounds = getCellBounds({ rowIndex, columnIndex });
+                const actualRowIndex = isMerged ? bounds.startRowIndex : rowIndex;
+                const actualColumnIndex = isMerged
+                    ? bounds.startColumnIndex
+                    : columnIndex;
+                const actualBottom = Math.max(rowIndex, bounds.endRowIndex);
+                const actualRight = Math.max(columnIndex, bounds.endColumnIndex);
+                if (isHiddenColumn?.(actualColumnIndex)) {
+                    continue;
+                }
+                if (!isMerged && isHiddenCell?.(actualRowIndex, actualColumnIndex)) {
+                    continue;
+                }
+                if (isMerged) {
+                    const cellId = cellIdentifier(bounds.startRowIndex, bounds.startColumnIndex);
+                    if (mergedCellRenderMap.has(cellId)) {
+                        continue;
+                    }
+                    mergedCellRenderMap.add(cellId);
+                }
+                const y = getRowOffset(actualRowIndex);
+                const height = getRowOffset(actualBottom) - y + getRowHeight(actualBottom);
+                const x = getColumnOffset(actualColumnIndex);
+                const width = getColumnOffset(actualRight) - x + getColumnWidth(actualRight);
+                frozenIntersectionCells.push(itemRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex: actualRowIndex,
+                    columnIndex: actualColumnIndex,
+                    isMergedCell: isMerged,
+                    key: itemKey({
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                    }),
+                }));
+                if (enableCellOverlay &&
+                    !isHiddenOverlay?.(actualRowIndex, actualColumnIndex)) {
+                    frozenIntersectionCellOverlays.push(overlayRenderer({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: itemKey({
+                            rowIndex: actualRowIndex,
+                            columnIndex: actualColumnIndex,
+                        }),
+                    }));
+                }
+                if (enableCellBackground &&
+                    !isHiddenBackground?.(actualRowIndex, actualColumnIndex)) {
+                    frozenIntersectionCellBackgrounds.push(backgroundRenderer?.({
+                        x,
+                        y,
+                        width,
+                        height,
+                        rowIndex: actualRowIndex,
+                        columnIndex: actualColumnIndex,
+                        isMergedCell: isMerged,
+                        key: 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,
+    ]);
+    /* Draw frozen intersection cells */
+    const [frozenIntersectionRowHeaderCells, frozenIntersectionColumnHeaderCells,] = useMemo(() => {
+        const frozenIntersectionColumnHeaderCells = [];
+        const frozenIntersectionRowHeaderCells = [];
+        for (let rowIndex = 0; rowIndex < 1; rowIndex++) {
+            if (isHiddenRow?.(rowIndex))
+                continue;
+            for (let columnIndex = 0; columnIndex < Math.min(columnStopIndex, frozenColumns); columnIndex++) {
+                if (isHiddenColumn?.(columnIndex)) {
+                    continue;
+                }
+                const y = getRowOffset(rowIndex);
+                const height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                const x = getColumnOffset(columnIndex);
+                const width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenIntersectionColumnHeaderCells.push(headerRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex,
+                    columnIndex,
+                    key: itemKey({
+                        rowIndex,
+                        columnIndex,
+                    }),
+                }));
+            }
+        }
+        for (let rowIndex = 0; rowIndex < Math.min(rowStopIndex, frozenRows); rowIndex++) {
+            if (isHiddenRow?.(rowIndex))
+                continue;
+            for (let columnIndex = 0; columnIndex < 1; columnIndex++) {
+                if (isHiddenColumn?.(columnIndex)) {
+                    continue;
+                }
+                const y = getRowOffset(rowIndex);
+                const height = getRowOffset(rowIndex) - y + getRowHeight(rowIndex);
+                const x = getColumnOffset(columnIndex);
+                const width = getColumnOffset(columnIndex) - x + getColumnWidth(columnIndex);
+                frozenIntersectionRowHeaderCells.push(headerRenderer({
+                    x,
+                    y,
+                    width,
+                    height,
+                    rowIndex,
+                    columnIndex,
+                    key: itemKey({
+                        rowIndex,
+                        columnIndex,
+                    }),
+                }));
+            }
+        }
+        return [
+            frozenIntersectionRowHeaderCells,
+            frozenIntersectionColumnHeaderCells,
+        ];
+    }, [
+        rowStopIndex,
+        columnStopIndex,
+        frozenColumns,
+        frozenRows,
+        isHiddenColumn,
+        isHiddenRow,
+        getRowOffset,
+        getRowHeight,
+        getColumnOffset,
+        getColumnWidth,
+        headerRenderer,
+    ]);
+    /**
+     * Renders active cell
+     */
+    const [fillHandleDimension, activeCellSelection, activeCellSelectionFrozenColumn, activeCellSelectionFrozenRow, activeCellSelectionFrozenIntersection,] = useMemo(() => {
+        const fillHandleDimension = {};
+        let activeCellSelection = null;
+        let activeCellSelectionFrozenColumn = null;
+        let activeCellSelectionFrozenRow = null;
+        let activeCellSelectionFrozenIntersection = null;
+        if (activeCell) {
+            const bounds = getCellBounds(activeCell);
+            const { startRowIndex: top, startColumnIndex: left, endColumnIndex: right, endRowIndex: bottom, } = bounds;
+            const actualBottom = Math.min(rowStopIndex, bottom);
+            const actualRight = Math.min(columnStopIndex, right);
+            const isInFrozenColumn = left < frozenColumns;
+            const isInFrozenRow = top < frozenRows;
+            const isInFrozenIntersection = isInFrozenRow && isInFrozenColumn;
+            const isInBody = actualBottom >= frozenRows || actualRight >= frozenColumns;
+            const isMerged = isMergedCell(activeCell);
+            const y = getYOffset(top);
+            const height = getYOffset(actualBottom) - y + getRowHeight(actualBottom);
+            const x = getXOffset(left);
+            const width = getXOffset(actualRight) - x + getColumnWidth(actualRight);
+            const cell = selectionRenderer({
+                stroke: selectionBorderColor,
+                strokeWidth: activeCellStrokeWidth,
+                fill: "transparent",
+                x: x,
+                y: y,
+                width: width,
+                height: height,
+                type: "activeCell",
+                index: 0,
+                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,
+    ]);
+    /**
+     * Convert selections to area
+     * Removed useMemo as changes to lastMeasureRowIndex, lastMeasuredColumnIndex,
+     * does not trigger useMemo
+     * Dependencies : [selections, rowStopIndex, columnStopIndex, instanceProps]
+     */
+    let isSelectionInProgress = false;
+    const [selectionAreas, selectionAreasFrozenColumns, selectionAreasFrozenRows, selectionAreasIntersection,] = useMemo(() => {
+        const selectionAreas = [];
+        const selectionAreasFrozenColumns = [];
+        const selectionAreasFrozenRows = [];
+        const selectionAreasIntersection = [];
+        for (let i = 0; i < selections.length; i++) {
+            const selection = selections[i];
+            const { range, inProgress, style } = selection;
+            const { startRowIndex: top, startColumnIndex: left, endColumnIndex: right, endRowIndex: bottom, } = range;
+            // Detect full row/column selections - don't expand to merged cells
+            // to prevent selecting adjacent rows/columns due to merged cells at edges
+            const isFullRowSelection = right >= columnCount - 1;
+            const isFullColumnSelection = bottom >= rowCount - 1;
+            const spanMerges = !(isFullRowSelection || isFullColumnSelection);
+            const bounds = getCellBounds({ rowIndex: top, columnIndex: left }, spanMerges);
+            const selectionBounds = { x: 0, y: 0, width: 0, height: 0 };
+            const actualBottom = Math.max(bounds.endRowIndex, Math.min(rowStopIndex, bottom));
+            const actualRight = Math.max(bounds.endColumnIndex, Math.min(columnStopIndex, right));
+            const actualLeft = Math.min(bounds.startColumnIndex, left);
+            const isLeftBoundFrozen = left < frozenColumns;
+            const isTopBoundFrozen = top < frozenRows;
+            const isRightBoundFrozen = right < frozenColumns;
+            const isBottomBoundFrozen = bottom < frozenRows;
+            const isIntersectionFrozen = top < frozenRows && left < frozenColumns;
+            const isLast = i === selections.length - 1;
+            const styles = {
+                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));
+            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) {
+                const frozenColumnSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                selectionAreasFrozenColumns.push(selectionRenderer({
+                    ...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,
+                    inProgress,
+                }));
+            }
+            if (isTopBoundFrozen) {
+                const frozenRowSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top);
+                selectionAreasFrozenRows.push(selectionRenderer({
+                    ...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,
+                    inProgress,
+                }));
+            }
+            if (isIntersectionFrozen) {
+                const frozenIntersectionSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top);
+                const frozenIntersectionSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                selectionAreasIntersection.push(selectionRenderer({
+                    ...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,
+                    inProgress,
+                }));
+            }
+            selectionAreas.push(selectionRenderer({
+                ...styles,
+                type: "selection",
+                index: i,
+                x: selectionBounds.x,
+                y: selectionBounds.y,
+                width: selectionBounds.width,
+                height: selectionBounds.height,
+                selection,
+                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,
+    ]);
+    /**
+     * Fillselection
+     */
+    let fillSelections = null;
+    if (fillSelection) {
+        const { range } = fillSelection;
+        const { startRowIndex: top, startColumnIndex: left, endColumnIndex: right, endRowIndex: bottom, } = range;
+        const actualBottom = Math.min(rowStopIndex, bottom);
+        const actualRight = Math.min(columnStopIndex, right);
+        const x = getXOffset(left);
+        const y = getYOffset(top);
+        const height = getYOffset(actualBottom) - y + getRowHeight(actualBottom);
+        const width = getXOffset(actualRight) - x + getColumnWidth(actualRight);
+        fillSelections = selectionRenderer({
+            type: "fill",
+            x,
+            y,
+            width,
+            height,
+            index: -1,
+            stroke: "gray",
+            strokeStyle: "dashed",
+            strokeWidth: 1,
+        });
+    }
+    const [borderStyleCells, borderStyleCellsFrozenColumns, borderStyleCellsFrozenRows, borderStyleCellsIntersection,] = useMemo(() => {
+        const borderStyleCells = [];
+        const borderStyleCellsFrozenColumns = [];
+        const borderStyleCellsFrozenRows = [];
+        const borderStyleCellsIntersection = [];
+        for (let i = 0; i < borderStyles.length; i++) {
+            const { range, style, type = "border", index: key, title, ...rest } = borderStyles[i];
+            const { startRowIndex: top, startColumnIndex: left, endColumnIndex: right, endRowIndex: bottom, } = range;
+            // Ignore out of bounds
+            if (top > rowStopIndex || bottom < rowStartIndex) {
+                // continue;
+            }
+            const isLeftBoundFrozen = left < frozenColumns;
+            const isTopBoundFrozen = top < frozenRows;
+            const isIntersectionFrozen = top < 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).
+             */
+            const isFullyFrozenColumns = right < frozenColumns;
+            const isFullyFrozenRows = bottom < frozenRows;
+            const x = getXOffset(left);
+            const y = getYOffset(top);
+            const width = Math.max(0, getXOffset(Math.min(columnCount, right + 1)) - x);
+            const height = Math.max(0, getYOffset(bottom) - y + getRowHeight(bottom));
+            const startsOnFirstBodyRow = frozenRows > 0 && top === frozenRows;
+            borderStyleCells.push(selectionRenderer({
+                ...rest,
+                ...style,
+                title: isFullyFrozenColumns || isFullyFrozenRows ? undefined : title,
+                flipTitleToBottom: startsOnFirstBodyRow,
+                range,
+                x,
+                y,
+                index: key ?? i,
+                width,
+                height,
+                type,
+            }));
+            if (isLeftBoundFrozen) {
+                const frozenColumnSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                borderStyleCellsFrozenColumns.push(selectionRenderer({
+                    ...rest,
+                    ...style,
+                    title: isFullyFrozenColumns && !isFullyFrozenRows ? title : undefined,
+                    keepTitleWithinBounds: true,
+                    flipTitleToBottom: startsOnFirstBodyRow,
+                    range,
+                    type,
+                    x,
+                    y,
+                    index: key ?? i,
+                    width: frozenColumnSelectionWidth,
+                    height,
+                    strokeRightWidth: frozenColumnSelectionWidth === width
+                        ? style?.strokeRightWidth || style?.strokeWidth
+                        : 0,
+                }));
+            }
+            if (isTopBoundFrozen) {
+                const frozenRowSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top);
+                borderStyleCellsFrozenRows.push(selectionRenderer({
+                    ...rest,
+                    ...style,
+                    title: isFullyFrozenRows && !isFullyFrozenColumns ? title : undefined,
+                    keepTitleWithinVerticalBounds: true,
+                    range,
+                    type,
+                    x,
+                    y,
+                    index: key ?? i,
+                    width,
+                    height: frozenRowSelectionHeight,
+                    strokeBottomWidth: frozenRowSelectionHeight === height
+                        ? style?.strokeBottomWidth || style?.strokeWidth
+                        : 0,
+                }));
+            }
+            if (isIntersectionFrozen) {
+                const frozenIntersectionSelectionHeight = getRowOffset(Math.min(bottom + 1, frozenRows)) - getRowOffset(top);
+                const frozenIntersectionSelectionWidth = getColumnOffset(Math.min(right + 1, frozenColumns)) -
+                    getColumnOffset(left);
+                borderStyleCellsIntersection.push(selectionRenderer({
+                    ...rest,
+                    ...style,
+                    title: isFullyFrozenColumns && isFullyFrozenRows ? title : undefined,
+                    keepTitleWithinBounds: true,
+                    keepTitleWithinVerticalBounds: true,
+                    range,
+                    type,
+                    x,
+                    y,
+                    index: 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,
+    ]);
+    /**
+     * Prevents drawing hit region when scrolling
+     */
+    const listenToEvents = !isScrolling;
+    /* Frozen row shadow */
+    const frozenRowShadowComponent = showFrozenRowShadow && frozenRows !== 1 ? frozenRowShadow : null;
+    /* Frozen column shadow */
+    const frozenColumnShadowComponent = showFrozenColumnShadow && frozenColumns !== 1 ? frozenColumnShadow : null;
+    const fillHandleWidth = fillHandleSize;
+    const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (React.createElement(FillHandle, { ...fillHandleDimension, stroke: fillHandleBackgroundColor, size: fillHandleWidth, borderColor: fillhandleBorderColor, onMouseDown: onFillHandleMouseDown, onDoubleClick: onFillHandleDoubleClick })) : null;
+    const selectionChildren = (React.createElement("div", { className: "pointer-events-none" },
+        React.createElement("div", { className: "absolute right-0 bottom-0 overflow-hidden", style: {
+                left: frozenColumnWidth,
+                top: frozenRowHeight,
+            } },
+            React.createElement("div", { style: {
+                    transform: `translate(-${frozenColumnWidth}px, -${frozenRowHeight}px)`,
+                } },
+                activeCellSelection,
+                selectionAreas,
+                borderStyleCells,
+                fillhandleComponent,
+                fillSelections)),
+        frozenColumns ? (React.createElement("div", { className: "absolute left-0 bottom-0 overflow-hidden", style: {
+                top: frozenRowHeight,
+                width: frozenColumnWidth + fillHandleWidth,
+            } },
+            React.createElement("div", { style: {
+                    transform: `translate(0, -${frozenRowHeight}px)`,
+                } },
+                activeCellSelectionFrozenColumn,
+                selectionAreasFrozenColumns,
+                borderStyleCellsFrozenColumns,
+                fillHandleDimension.position === "fc"
+                    ? fillhandleComponent
+                    : null,
+                fillSelections))) : null,
+        frozenRows ? (React.createElement("div", { className: "absolute top-0 right-0 overflow-hidden", style: {
+                left: frozenColumnWidth,
+                height: frozenRowHeight + fillHandleWidth,
+            } },
+            React.createElement("div", { style: {
+                    transform: `translate(-${frozenColumnWidth}px, 0)`,
+                } },
+                activeCellSelectionFrozenRow,
+                selectionAreasFrozenRows,
+                borderStyleCellsFrozenRows,
+                fillHandleDimension.position === "fr"
+                    ? fillhandleComponent
+                    : null,
+                fillSelections))) : null,
+        frozenRows && frozenColumns ? (React.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
+     */
+    const contextValue = useMemo(() => ({
+        getCellOffsetFromCoords,
+    }), [getCellOffsetFromCoords]);
+    // Print style
+    const containerStyle = {
+        width: containerWidth,
+        "--rnc-print-top-margin": `-${headerRowHeight}px`,
+        "--rnc-print-left-margin": `-${headerColumnWidth}px`,
+    };
+    // Footer final height - gradually reveal footer as user scrolls to bottom
+    const contentMaxScrollTop = estimatedTotalHeight - containerHeight;
+    const scrollPastBottom = Math.max(0, scrollTop - contentMaxScrollTop);
+    const footerRevealAmount = Math.min(scrollPastBottom, footerHeight);
+    return (React.createElement("div", { style: containerStyle, className: "rowsncolumns-grid print:w-full print:h-full print:block relative ", ref: scrollContainerRef },
+        React.createElement("div", { className: "rowsncolumns-grid-container outline-none touch-none select-none relative", tabIndex: 0, ref: containerRef, ...rest },
+            React.createElement(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.createElement(GridContext.Provider, { value: contextValue },
+            gridChildren && typeof gridChildren === "function"
+                ? gridChildren({
+                    scrollLeft,
+                    scrollTop,
+                    frozenRowHeight,
+                    frozenColumnWidth,
+                    containerHeight,
+                    containerWidth,
+                })
+                : null,
+            children),
+        footerComponent ? (React.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none" },
+            React.createElement("div", { style: {
+                    height: footerHeight,
+                    bottom: 0,
+                    transform: `translateY(${footerHeight - footerRevealAmount}px)`,
+                    willChange: "transform",
+                }, className: "rnc-bottom-footer absolute left-0 right-0 overflow-hidden pointer-events-auto flex flex-col" }, React.isValidElement(footerComponent)
+                ? footerComponent
+                : React.createElement(footerComponent)))) : null,
+        showScrollbarX ? (React.createElement(React.Fragment, null,
+            React.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.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.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.createElement("div", { style: {
+                        position: "absolute",
+                        width: scrollbarXWidth,
+                        height: 1,
+                    } })))) : null,
+        showScrollbarY ? (React.createElement(React.Fragment, null,
+            React.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.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.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.createElement("div", { className: "absolute", style: {
+                        height: effectiveScrollbarYHeight,
+                        width: 1,
+                    } })))) : null));
+}));
+Grid.displayName = "Grid";
+export default Grid;