@rowsncolumns/grid 9.0.3 → 13.2.32

package/dist/esm/helpers.js

@@ -0,0 +1,1260 @@
+// Utilities extracted from https://github.com/bvaughn/react-window
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { unstable_IdlePriority, unstable_scheduleCallback } from "scheduler";
+import { Direction } from "./types";
+export var Align;
+(function (Align) {
+    Align["start"] = "start";
+    Align["end"] = "end";
+    Align["center"] = "center";
+    Align["auto"] = "auto";
+    Align["smart"] = "smart";
+})(Align || (Align = {}));
+export var ItemType;
+(function (ItemType) {
+    ItemType["row"] = "row";
+    ItemType["column"] = "column";
+})(ItemType || (ItemType = {}));
+export const getRowStartIndexForOffset = ({ rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
+    return findNearestItem({
+        itemType: ItemType.row,
+        rowHeight,
+        columnWidth,
+        rowCount,
+        columnCount,
+        instanceProps,
+        offset,
+        scale,
+    });
+};
+export const getRowStopIndexForStartIndex = ({ startIndex, rowCount, rowHeight, columnWidth, scrollTop, containerHeight, instanceProps, scale, visibleRowRanges, }) => {
+    const itemMetadata = getItemMetadata({
+        itemType: ItemType.row,
+        rowHeight,
+        columnWidth,
+        index: startIndex,
+        instanceProps,
+        scale,
+    });
+    const maxOffset = scrollTop + containerHeight;
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+    // If visibleRowRanges provided, use it to skip hidden rows efficiently
+    if (visibleRowRanges && visibleRowRanges.length > 0) {
+        // Find which range we're currently in
+        let currentRangeIdx = 0;
+        for (let i = 0; i < visibleRowRanges.length; i++) {
+            if (visibleRowRanges[i].end >= stopIndex) {
+                currentRangeIdx = i;
+                break;
+            }
+        }
+        while (stopIndex < rowCount - 1 && offset < maxOffset) {
+            const currentRange = visibleRowRanges[currentRangeIdx];
+            if (currentRange && stopIndex < currentRange.end) {
+                // Still within current visible range, move to next row
+                stopIndex++;
+                offset += getItemMetadata({
+                    itemType: ItemType.row,
+                    rowHeight,
+                    columnWidth,
+                    index: stopIndex,
+                    instanceProps,
+                    scale,
+                    visibleRowRanges,
+                }).size;
+            }
+            else {
+                // At end of current range, jump to next visible range
+                currentRangeIdx++;
+                if (currentRangeIdx >= visibleRowRanges.length) {
+                    // No more visible ranges
+                    break;
+                }
+                const nextRange = visibleRowRanges[currentRangeIdx];
+                stopIndex = nextRange.start;
+                offset = getItemMetadata({
+                    itemType: ItemType.row,
+                    rowHeight,
+                    columnWidth,
+                    index: stopIndex,
+                    instanceProps,
+                    scale,
+                    visibleRowRanges,
+                }).offset;
+            }
+        }
+    }
+    else {
+        // Fallback to original behavior
+        while (stopIndex < rowCount - 1 && offset < maxOffset) {
+            stopIndex++;
+            offset += getItemMetadata({
+                itemType: ItemType.row,
+                rowHeight,
+                columnWidth,
+                index: stopIndex,
+                instanceProps,
+                scale,
+            }).size;
+        }
+    }
+    return stopIndex;
+};
+export const getColumnStartIndexForOffset = ({ rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
+    return findNearestItem({
+        itemType: ItemType.column,
+        rowHeight,
+        columnWidth,
+        rowCount,
+        columnCount,
+        instanceProps,
+        offset,
+        scale,
+    });
+};
+export const getColumnStopIndexForStartIndex = ({ startIndex, rowHeight, columnWidth, instanceProps, containerWidth, scrollLeft, columnCount, scale, }) => {
+    const itemMetadata = getItemMetadata({
+        itemType: ItemType.column,
+        index: startIndex,
+        rowHeight,
+        columnWidth,
+        instanceProps,
+        scale,
+    });
+    const maxOffset = scrollLeft + containerWidth;
+    let offset = itemMetadata.offset + itemMetadata.size;
+    let stopIndex = startIndex;
+    while (stopIndex < columnCount - 1 && offset < maxOffset) {
+        stopIndex++;
+        offset += getItemMetadata({
+            itemType: ItemType.column,
+            rowHeight,
+            columnWidth,
+            index: stopIndex,
+            instanceProps,
+            scale,
+        }).size;
+    }
+    return stopIndex;
+};
+export const getBoundedCells = (area) => {
+    const cells = new Set();
+    if (!area)
+        return cells;
+    const { startRowIndex: top, startColumnIndex: left, endColumnIndex: right, endRowIndex: bottom, } = area;
+    for (let i = top; i <= bottom; i++) {
+        for (let j = left; j <= right; j++) {
+            cells.add(cellIdentifier(i, j));
+        }
+    }
+    return cells;
+};
+export const itemKey = ({ rowIndex, columnIndex }) => `${rowIndex}:${columnIndex}`;
+export const getRowOffset = ({ index, rowHeight, columnWidth, instanceProps, scale, readonly, visibleRowRanges, }) => {
+    return getItemMetadata({
+        itemType: ItemType.row,
+        index,
+        rowHeight,
+        columnWidth,
+        instanceProps,
+        scale,
+        readonly,
+        visibleRowRanges,
+    }).offset;
+};
+export const getColumnOffset = ({ index, rowHeight, columnWidth, instanceProps, scale, readonly, }) => {
+    return getItemMetadata({
+        itemType: ItemType.column,
+        index,
+        rowHeight,
+        columnWidth,
+        instanceProps,
+        scale,
+        readonly,
+    }).offset;
+};
+export const getRowHeight = (index, instanceProps) => {
+    return instanceProps.rowMetadataMap.get(index)?.size ?? 0;
+};
+export const getColumnWidth = (index, instanceProps) => {
+    return instanceProps.columnMetadataMap.get(index)?.size ?? 0;
+};
+export const getItemMetadata = ({ itemType, index, rowHeight, columnWidth, instanceProps, scale = 1, readonly, visibleRowRanges, }) => {
+    let itemMetadataMap, itemSize, lastMeasuredIndex, recalcIndices;
+    if (itemType === "column") {
+        itemMetadataMap = instanceProps.columnMetadataMap;
+        itemSize = columnWidth;
+        lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+    }
+    else {
+        itemMetadataMap = instanceProps.rowMetadataMap;
+        itemSize = rowHeight;
+        lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+    }
+    if (index > lastMeasuredIndex) {
+        let offset = 0;
+        if (lastMeasuredIndex >= 0) {
+            const itemMetadata = itemMetadataMap.get(lastMeasuredIndex);
+            if (itemMetadata) {
+                offset = itemMetadata.offset + itemMetadata.size;
+            }
+        }
+        // If visibleRowRanges provided for rows, skip expensive itemSize() calls for hidden rows
+        // We still store metadata for all rows (required by binary search), but hidden rows get size=0
+        if (itemType === "row" && visibleRowRanges && visibleRowRanges.length > 0) {
+            // Build a quick lookup for which ranges we're in
+            let rangeIdx = 0;
+            for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+                // Advance to the appropriate range
+                while (rangeIdx < visibleRowRanges.length && visibleRowRanges[rangeIdx].end < i) {
+                    rangeIdx++;
+                }
+                // Check if i is in the current range (visible) or in a gap (hidden)
+                const currentRange = visibleRowRanges[rangeIdx];
+                const isVisible = currentRange && i >= currentRange.start && i <= currentRange.end;
+                // Only call itemSize for visible rows - hidden rows have size 0
+                const size = isVisible ? itemSize(i) * scale : 0;
+                itemMetadataMap.set(i, { offset, size });
+                offset += size;
+            }
+        }
+        else {
+            // Original behavior for columns or when no visibleRowRanges
+            for (let i = lastMeasuredIndex + 1; i <= index; i++) {
+                const size = itemSize(i) * scale;
+                itemMetadataMap.set(i, {
+                    offset,
+                    size,
+                });
+                offset += size;
+            }
+        }
+        if (!readonly) {
+            if (itemType === "column") {
+                instanceProps.lastMeasuredColumnIndex = index;
+            }
+            else {
+                instanceProps.lastMeasuredRowIndex = index;
+            }
+        }
+    }
+    return itemMetadataMap.get(index);
+};
+const findNearestItem = ({ itemType, rowHeight, columnWidth, rowCount, columnCount, instanceProps, offset, scale, }) => {
+    let itemMetadataMap, lastMeasuredIndex;
+    if (itemType === "column") {
+        itemMetadataMap = instanceProps.columnMetadataMap;
+        lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
+    }
+    else {
+        itemMetadataMap = instanceProps.rowMetadataMap;
+        lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
+    }
+    const lastMeasuredItemOffset = lastMeasuredIndex > 0
+        ? itemMetadataMap.get(lastMeasuredIndex)?.offset ?? 0
+        : 0;
+    if (lastMeasuredItemOffset >= offset) {
+        // If we've already measured items within this range just use a binary search as it's faster.
+        return findNearestItemBinarySearch({
+            itemType,
+            rowHeight,
+            columnWidth,
+            instanceProps,
+            high: lastMeasuredIndex,
+            low: 0,
+            offset,
+            scale,
+        });
+    }
+    else {
+        // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+        // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
+        // The overall complexity for this approach is O(log n).
+        return findNearestItemExponentialSearch({
+            itemType,
+            rowHeight,
+            rowCount,
+            columnCount,
+            columnWidth,
+            instanceProps,
+            index: Math.max(0, lastMeasuredIndex),
+            offset,
+            scale,
+        });
+    }
+};
+const findNearestItemBinarySearch = ({ itemType, rowHeight, columnWidth, instanceProps, high, low, offset, scale, }) => {
+    while (low <= high) {
+        const middle = low + Math.floor((high - low) / 2);
+        const currentOffset = getItemMetadata({
+            itemType,
+            rowHeight,
+            columnWidth,
+            index: middle,
+            instanceProps,
+            scale,
+        }).offset;
+        if (currentOffset === offset) {
+            return middle;
+        }
+        else if (currentOffset < offset) {
+            low = middle + 1;
+        }
+        else if (currentOffset > offset) {
+            high = middle - 1;
+        }
+    }
+    if (low > 0) {
+        return low - 1;
+    }
+    else {
+        return 0;
+    }
+};
+const findNearestItemExponentialSearch = ({ itemType, rowHeight, columnWidth, rowCount, columnCount, instanceProps, index, offset, scale, }) => {
+    const itemCount = itemType === "column" ? columnCount : rowCount;
+    let interval = 1;
+    while (index < itemCount &&
+        getItemMetadata({
+            itemType,
+            rowHeight,
+            columnWidth,
+            index,
+            instanceProps,
+            scale,
+        }).offset < offset) {
+        index += interval;
+        interval *= 2;
+    }
+    return findNearestItemBinarySearch({
+        itemType,
+        rowHeight,
+        columnWidth,
+        instanceProps,
+        high: Math.min(index, itemCount - 1),
+        low: Math.floor(index / 2),
+        offset,
+        scale,
+    });
+};
+export const getEstimatedTotalHeight = (rowCount, instanceProps) => {
+    const { estimatedRowHeight } = instanceProps;
+    let totalSizeOfMeasuredRows = 0;
+    let { lastMeasuredRowIndex } = instanceProps;
+    const { rowMetadataMap } = instanceProps;
+    // Edge case check for when the number of items decreases while a scroll is in progress.
+    // https://github.com/bvaughn/react-window/pull/138
+    if (lastMeasuredRowIndex >= rowCount) {
+        lastMeasuredRowIndex = rowCount - 1;
+    }
+    if (lastMeasuredRowIndex >= 0) {
+        const itemMetadata = rowMetadataMap.get(lastMeasuredRowIndex);
+        if (itemMetadata) {
+            totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+        }
+    }
+    const numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
+    const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+export const getEstimatedTotalWidth = (columnCount, instanceProps) => {
+    const { estimatedColumnWidth } = instanceProps;
+    let totalSizeOfMeasuredRows = 0;
+    let { lastMeasuredColumnIndex } = instanceProps;
+    const { columnMetadataMap } = instanceProps;
+    // Edge case check for when the number of items decreases while a scroll is in progress.
+    // https://github.com/bvaughn/react-window/pull/138
+    if (lastMeasuredColumnIndex >= columnCount) {
+        lastMeasuredColumnIndex = columnCount - 1;
+    }
+    if (lastMeasuredColumnIndex >= 0) {
+        const itemMetadata = columnMetadataMap.get(lastMeasuredColumnIndex);
+        if (itemMetadata) {
+            totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
+        }
+    }
+    const numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
+    const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
+    return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
+};
+/* Create a stringified cell identifier */
+export const cellIdentifier = (rowIndex, columnIndex) => `${rowIndex},${columnIndex}`;
+/**
+ * @desc Throttle fn
+ * @param func function
+ * @param limit Delay in milliseconds
+ */
+export function throttle(func, limit) {
+    let lastEventTimestamp = null;
+    const callable = (...args) => {
+        const now = Date.now();
+        if (!lastEventTimestamp || now - lastEventTimestamp >= limit) {
+            lastEventTimestamp = now;
+            func(...args);
+        }
+    };
+    return callable;
+}
+export function debounce(cb, wait = 300) {
+    let h = 0;
+    const callable = (...args) => {
+        clearTimeout(h);
+        h = window.setTimeout(() => cb(...args), wait);
+    };
+    return callable;
+}
+export function rafThrottle(callback) {
+    let active = false; // a simple flag
+    let evt; // to keep track of the last event
+    const handler = function () {
+        // fired only when screen has refreshed
+        active = false; // release our flag
+        callback(evt);
+    };
+    return function handleEvent(e) {
+        // the actual event handler
+        evt = e; // save our event at each call
+        evt && evt.persist && evt.persist();
+        if (!active) {
+            // only if we weren't already doing it
+            active = true; // raise the flag
+            requestAnimationFrame(handler); // wait for next screen refresh
+        }
+    };
+}
+export const scheduleIdlePriorityCallback = (callback) => unstable_scheduleCallback(unstable_IdlePriority, callback);
+export function ricThrottle(callback) {
+    let active = false; // a simple flag
+    let evt; // to keep track of the last event
+    const handler = function () {
+        // fired only when screen has refreshed
+        active = false; // release our flag
+        callback(evt);
+    };
+    return function handleEvent(e) {
+        // the actual event handler
+        evt = e; // save our event at each call
+        evt && evt.persist && evt.persist();
+        if (!active) {
+            // only if we weren't already doing it
+            active = true; // raise the flag
+            scheduleIdlePriorityCallback(handler); // wait for next screen refresh
+        }
+    };
+}
+export const getOffsetForIndexAndAlignment = ({ itemType, containerHeight, containerWidth, rowHeight, columnWidth, columnCount, rowCount, index, align = Align.smart, scrollOffset, instanceProps, scrollbarSize, frozenOffset = 0, scale, estimatedTotalHeight, estimatedTotalWidth, }) => {
+    const size = itemType === "column" ? containerWidth : containerHeight;
+    const itemMetadata = getItemMetadata({
+        itemType,
+        rowHeight,
+        columnWidth,
+        index,
+        instanceProps,
+        scale,
+    });
+    // Get estimated total size after ItemMetadata is computed,
+    // To ensure it reflects actual measurements instead of just estimates.
+    const estimatedTotalSize = itemType === "column" ? estimatedTotalWidth : estimatedTotalHeight;
+    const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size + scrollbarSize, itemMetadata.offset - frozenOffset));
+    const minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
+    if (align === Align.smart) {
+        if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+            align = Align.auto;
+        }
+        else {
+            align = Align.center;
+        }
+    }
+    switch (align) {
+        case Align.start:
+            return maxOffset;
+        case Align.end:
+            return minOffset;
+        case Align.center:
+            return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        case Align.auto:
+        default:
+            if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+                return scrollOffset;
+            }
+            else if (minOffset > maxOffset) {
+                // Because we only take into account the scrollbar size when calculating minOffset
+                // this value can be larger than maxOffset when at the end of the list
+                return minOffset;
+            }
+            else if (scrollOffset < minOffset) {
+                return minOffset;
+            }
+            else {
+                return maxOffset;
+            }
+    }
+};
+export const getOffsetForColumnAndAlignment = (props) => {
+    return getOffsetForIndexAndAlignment({
+        itemType: ItemType.column,
+        ...props,
+    });
+};
+export const getOffsetForRowAndAlignment = (props) => {
+    return getOffsetForIndexAndAlignment({
+        itemType: ItemType.row,
+        ...props,
+    });
+};
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+const hasNativePerformanceNow = typeof performance === "object" && typeof performance.now === "function";
+const now = hasNativePerformanceNow
+    ? () => performance.now()
+    : () => Date.now();
+export function cancelTimeout(timeoutID) {
+    cancelAnimationFrame(timeoutID.id);
+}
+/**
+ * Create a throttler based on RAF
+ * @param callback
+ * @param delay
+ */
+export function requestTimeout(callback, delay) {
+    const start = now();
+    function tick() {
+        if (now() - start >= delay) {
+            callback.call(null);
+        }
+        else {
+            timeoutID.id = requestAnimationFrame(tick);
+        }
+    }
+    const timeoutID = {
+        id: requestAnimationFrame(tick),
+    };
+    return timeoutID;
+}
+export const selectionFromActiveCell = (activeCell) => {
+    if (!activeCell)
+        return [];
+    return [
+        {
+            range: {
+                startRowIndex: activeCell.rowIndex,
+                startColumnIndex: activeCell.columnIndex,
+                endRowIndex: activeCell.rowIndex,
+                endColumnIndex: activeCell.columnIndex,
+            },
+        },
+    ];
+};
+/**
+ * Check if a selection are spans multiple cells
+ * @param sel
+ */
+export const selectionSpansCells = (sel) => {
+    if (!sel)
+        return false;
+    return (sel.endRowIndex !== sel.startRowIndex ||
+        sel.startColumnIndex !== sel.endColumnIndex);
+};
+/**
+ * When user tries to drag a selection
+ * @param initialSelection
+ * @param from
+ * @param to
+ */
+export const newSelectionFromDrag = (initialSelection, from, to, topBound = 0, leftBound = 0, rowCount, columnCount) => {
+    const currentBounds = initialSelection.range;
+    const startRowIndex = Math.max(topBound, Math.min(rowCount, to.rowIndex + currentBounds.startRowIndex - from.rowIndex));
+    const startColumnIndex = Math.max(leftBound, Math.min(columnCount, to.columnIndex + currentBounds.startColumnIndex - from.columnIndex));
+    return {
+        range: {
+            startRowIndex,
+            startColumnIndex,
+            endRowIndex: startRowIndex +
+                (currentBounds.endRowIndex - currentBounds.startRowIndex),
+            endColumnIndex: startColumnIndex +
+                (currentBounds.endColumnIndex - currentBounds.startColumnIndex),
+        },
+    };
+};
+/**
+ * Clamp cell coordinates to be inside activeCell and selection
+ * @param coords
+ * @param activeCell
+ * @param selection
+ */
+export const clampCellCoords = (coords, activeCell, selection) => {
+    if (activeCell) {
+        coords.rowIndex = Math.max(activeCell.rowIndex, coords.rowIndex);
+        coords.columnIndex = Math.min(activeCell.columnIndex, coords.columnIndex);
+    }
+    if (selection) {
+        coords.rowIndex = Math.min(selection.range.endRowIndex, Math.max(selection.range.startRowIndex, coords.rowIndex));
+        coords.columnIndex = Math.min(selection.range.endColumnIndex, Math.max(selection.range.startColumnIndex, coords.columnIndex));
+    }
+    return coords;
+};
+/**
+ * Converts a number to alphabet
+ * @param i
+ */
+export const numberToAlphabet = (i) => {
+    return ((i >= 26 ? numberToAlphabet(((i / 26) >> 0) - 1) : "") +
+        "abcdefghijklmnopqrstuvwxyz"[i % 26 >> 0]).toUpperCase();
+};
+/**
+ * Convert selections to html and csv data
+ * @param rows
+ */
+export const prepareClipboardData = (rows) => {
+    const html = ["<table>"];
+    const csv = [];
+    const sanitizeCell = (value) => {
+        if (isNull(value))
+            return "";
+        return value;
+    };
+    rows.forEach((row) => {
+        html.push("<tr>");
+        const csvRow = [];
+        row.forEach((cell) => {
+            html.push(`<td>${sanitizeCell(cell)}</td>`);
+            csvRow.push(`${castToString(cell)?.replace(/"/g, '""')}`);
+        });
+        csv.push(csvRow.join(","));
+        html.push("</tr>");
+    });
+    html.push("</table>");
+    return [html.join(""), csv.join("\n")];
+};
+/**
+ * Cycles active cell within selecton bounds
+ * @param activeCellBounds
+ * @param selectionBounds
+ * @param direction
+ */
+export const findNextCellWithinBounds = (activeCellBounds, selectionBounds, direction = Direction.Right) => {
+    const intersects = areaIntersects(activeCellBounds, selectionBounds);
+    if (!intersects)
+        return null;
+    let rowIndex, columnIndex;
+    let nextActiveCell = null;
+    if (direction === Direction.Right) {
+        rowIndex = activeCellBounds.startRowIndex;
+        columnIndex = activeCellBounds.startColumnIndex + 1;
+        if (columnIndex > selectionBounds.endColumnIndex) {
+            rowIndex = rowIndex + 1;
+            columnIndex = selectionBounds.startColumnIndex;
+            if (rowIndex > selectionBounds.endRowIndex) {
+                rowIndex = selectionBounds.startRowIndex;
+            }
+        }
+        nextActiveCell = { rowIndex, columnIndex };
+    }
+    if (direction === Direction.Left) {
+        rowIndex = activeCellBounds.endRowIndex;
+        columnIndex = activeCellBounds.startColumnIndex - 1;
+        if (columnIndex < selectionBounds.startColumnIndex) {
+            rowIndex = rowIndex - 1;
+            columnIndex = selectionBounds.endColumnIndex;
+            if (rowIndex < selectionBounds.startRowIndex) {
+                rowIndex = selectionBounds.endRowIndex;
+            }
+        }
+        nextActiveCell = { rowIndex, columnIndex };
+    }
+    if (direction === Direction.Down) {
+        rowIndex = activeCellBounds.endRowIndex + 1;
+        columnIndex = activeCellBounds.startColumnIndex;
+        if (rowIndex > selectionBounds.endRowIndex) {
+            columnIndex = activeCellBounds.startColumnIndex + 1;
+            rowIndex = selectionBounds.startRowIndex;
+            if (columnIndex > selectionBounds.endColumnIndex) {
+                columnIndex = selectionBounds.startColumnIndex;
+            }
+        }
+        nextActiveCell = { rowIndex, columnIndex };
+    }
+    if (direction === Direction.Up) {
+        rowIndex = activeCellBounds.startRowIndex - 1;
+        columnIndex = activeCellBounds.startColumnIndex;
+        if (rowIndex < selectionBounds.startRowIndex) {
+            columnIndex = activeCellBounds.startColumnIndex - 1;
+            rowIndex = selectionBounds.endRowIndex;
+            if (columnIndex < selectionBounds.startColumnIndex) {
+                columnIndex = selectionBounds.endColumnIndex;
+            }
+        }
+        nextActiveCell = { rowIndex, columnIndex };
+    }
+    return nextActiveCell;
+};
+/**
+ * Check if 2 areas overlap
+ * @param area1
+ * @param area2
+ */
+export const areaIntersects = (area1, area2) => {
+    if (!area2) {
+        return false;
+    }
+    if (area1.startColumnIndex > area2.endColumnIndex ||
+        area2.startColumnIndex > area1.endColumnIndex) {
+        return false;
+    }
+    if (area1.startRowIndex > area2.endRowIndex ||
+        area2.startRowIndex > area1.endRowIndex) {
+        return false;
+    }
+    return true;
+};
+/**
+ * Check if area is inside another area
+ * @param needle
+ * @param haystack
+ */
+export const areaInsideArea = (needle, haystack) => {
+    return (needle.startRowIndex >= haystack.startRowIndex &&
+        needle.endRowIndex <= haystack.endRowIndex &&
+        needle.startColumnIndex >= haystack.startColumnIndex &&
+        needle.endColumnIndex <= haystack.endColumnIndex);
+};
+/**
+ * Check if two areas are equal
+ * @param area1
+ * @param area2
+ */
+export const isAreasEqual = (area1, area2) => {
+    if (area1 === void 0 || area2 === void 0) {
+        return false;
+    }
+    return (area1.endRowIndex === area2.endRowIndex &&
+        area1.startRowIndex === area2.startRowIndex &&
+        area1.startColumnIndex === area2.startColumnIndex &&
+        area1.endColumnIndex === area2.endColumnIndex);
+};
+/**
+ * Get maximum bound of an area, caters to merged cells
+ * @param area
+ * @param boundGetter
+ */
+export const extendAreaToMergedCells = (_area, mergedCells) => {
+    const area = { ..._area };
+    for (const bounds of mergedCells) {
+        if (areaIntersects(area, bounds)) {
+            area.startRowIndex = Math.min(area.startRowIndex, bounds.startRowIndex);
+            area.endRowIndex = Math.max(area.endRowIndex, bounds.endRowIndex);
+            area.endColumnIndex = Math.max(area.endColumnIndex, bounds.endColumnIndex);
+            area.startColumnIndex = Math.min(area.startColumnIndex, bounds.startColumnIndex);
+        }
+    }
+    return area;
+};
+/**
+ * Convert 2 cells to bounds
+ * @param start
+ * @param end
+ * @returns
+ *
+ * 2 loops O(n)
+ */
+export const cellRangeToBounds = (start, end, spanMerges = true, getCellBounds, selectionLeftbound = 1, selectionTopBound = 1) => {
+    let top = Math.min(Math.max(selectionTopBound, start.rowIndex), Math.max(selectionTopBound, end.rowIndex));
+    let bottom = Math.max(start.rowIndex, end.rowIndex);
+    let left = Math.min(Math.max(selectionLeftbound, start.columnIndex), Math.max(selectionLeftbound, end.columnIndex));
+    let right = Math.max(start.columnIndex, end.columnIndex);
+    /**
+     * The idea is that
+     * We do 2 loops >
+     * Left to Right and then top to bottom
+     *  => Find top cell and bottom cell and check
+     * if there are any merged cells at the edge
+     * Then keep extending our top and bottom bounds accordingly
+     *
+     * Same goes for Top to bottom
+     *  => Find left most and right most cells
+     */
+    if (spanMerges) {
+        for (let columnIndex = left; columnIndex <= right; columnIndex++) {
+            const topCell = getCellBounds({ rowIndex: top, columnIndex });
+            const bottomCell = getCellBounds({ rowIndex: bottom, columnIndex });
+            bottom = Math.max(topCell.endRowIndex, bottomCell.endRowIndex, bottom);
+            top = Math.min(topCell.startRowIndex, bottomCell.startRowIndex, top);
+        }
+        for (let rowIndex = top; rowIndex <= bottom; rowIndex++) {
+            const topCell = getCellBounds({ rowIndex, columnIndex: left });
+            const bottomCell = getCellBounds({ rowIndex, columnIndex: right });
+            right = Math.max(topCell.endColumnIndex, bottomCell.endColumnIndex, right);
+            left = Math.min(topCell.startColumnIndex, bottomCell.startColumnIndex, left);
+        }
+    }
+    return {
+        startRowIndex: top,
+        startColumnIndex: left,
+        endColumnIndex: right,
+        endRowIndex: bottom,
+    };
+};
+/**
+ * Create a range out of a cell
+ * @param param0
+ * @returns
+ */
+export const cellToArea = ({ rowIndex, columnIndex, }) => {
+    return {
+        startRowIndex: rowIndex,
+        startColumnIndex: columnIndex,
+        endColumnIndex: columnIndex,
+        endRowIndex: rowIndex,
+    };
+};
+/**
+ * Check if its being rendered in Browser or SSR
+ */
+export const canUseDOM = typeof window !== "undefined" &&
+    typeof document !== "undefined" &&
+    typeof window.document !== "undefined";
+/**
+ * Make a font-family value safe for CSS font shorthand (canvas
+ * `ctx.font`). Family names that aren't a single safe identifier
+ * (leading digit, spaces with odd characters, slashes, …) must be
+ * quoted or the shorthand is invalid; generic families (sans-serif,
+ * serif, monospace, …) must stay unquoted to keep their generic
+ * meaning. Accepts a single family or a comma-separated stack.
+ */
+export const toCssFontFamily = (family) => family
+    .split(",")
+    .map((part) => {
+    const trimmed = part.trim().replace(/^["']|["']$/g, "");
+    if (!trimmed)
+        return "";
+    return /^[a-zA-Z][a-zA-Z0-9-]*$/.test(trimmed)
+        ? trimmed
+        : `"${trimmed.replace(/"/g, "")}"`;
+})
+    .filter(Boolean)
+    .join(", ");
+export const AutoSizerCanvas = (defaults = {}) => {
+    const { fontFamily = "Arial", fontSize = 12, fontWeight = "", fontStyle = "", lineHeight = 16, scale = 1, } = defaults;
+    const o = {
+        fontFamily,
+        fontSize,
+        fontWeight,
+        fontStyle,
+        lineHeight,
+        scale,
+    };
+    const canvas = canUseDOM && document.createElement("canvas");
+    const context = canvas ? canvas.getContext("2d") : null;
+    const SegmenterCtor = typeof Intl !== "undefined" && "Segmenter" in Intl
+        ? Intl.Segmenter
+        : undefined;
+    const wordSegmenter = SegmenterCtor
+        ? new SegmenterCtor(undefined, { granularity: "word" })
+        : undefined;
+    const graphemeSegmenter = SegmenterCtor
+        ? new SegmenterCtor(undefined, { granularity: "grapheme" })
+        : undefined;
+    const setFont = (options = {}) => {
+        for (const key in options) {
+            o[key] = options[key] ?? o[key];
+        }
+        if (context) {
+            // Canvas `ctx.font` takes CSS font shorthand — an unquoted family
+            // that needs quoting (leading digit, slash, …) makes the whole
+            // assignment silently no-op, so the sizer keeps measuring with the
+            // PREVIOUS font. Quote non-identifier families (generic families
+            // must stay unquoted) and always end on a sans-serif fallback so
+            // painter and sizer agree on unknown fonts.
+            const family = o.fontFamily
+                ? `${toCssFontFamily(String(o.fontFamily))}, sans-serif`
+                : "sans-serif";
+            context.font = `${o.fontStyle} ${o.fontWeight} ${o.fontSize * o.scale}px ${family}`;
+        }
+    };
+    const getWidthOfLongestText = (text, shouldWrap, width) => {
+        if (text == null) {
+            return { width: 0, height: 0 };
+        }
+        return getMultilineTextDimensions(text, shouldWrap, width);
+    };
+    // Get width and height of multi-line text
+    const getMultilineTextDimensions = (text, shouldWrap, width) => {
+        const lines = text.split("\n");
+        let textWidth = 0;
+        // Keep this in-sync with the default line-height used by <Cell /> (1.15)
+        const lineHeightRatio = 1.2;
+        const lineHeightPx = o.fontSize * lineHeightRatio * o.scale;
+        let currentHeightPx = 0;
+        const maxWidth = width ?? 0;
+        const wrapAtWord = shouldWrap;
+        const SPACE = " ";
+        const DASH = "-";
+        const measureWidth = (value) => context?.measureText(value).width ?? 0;
+        const pushLine = (content, clampToWidth) => {
+            const normalized = content.replace(/\s+$/g, "");
+            const measured = normalized.length ? measureWidth(normalized) : 0;
+            const finalWidth = clampToWidth && maxWidth > 0 ? Math.min(measured, maxWidth) : measured;
+            textWidth = Math.max(textWidth, finalWidth);
+            currentHeightPx += lineHeightPx;
+        };
+        const getWordSegments = (value) => {
+            if (wordSegmenter) {
+                return Array.from(wordSegmenter.segment(value), (segment) => segment.segment);
+            }
+            return value.match(/\S+|\s+/g) ?? [value];
+        };
+        const getGraphemeSegments = (value) => {
+            if (graphemeSegmenter) {
+                return Array.from(graphemeSegmenter.segment(value), (segment) => segment.segment);
+            }
+            return Array.from(value);
+        };
+        const splitSegment = (segment) => {
+            if (maxWidth <= 0) {
+                return [segment];
+            }
+            const graphemes = getGraphemeSegments(segment);
+            const pieces = [];
+            let buffer = "";
+            for (const grapheme of graphemes) {
+                const tentative = buffer + grapheme;
+                const tentativeWidth = measureWidth(tentative);
+                if (tentativeWidth <= maxWidth || !buffer) {
+                    buffer = tentative;
+                }
+                else {
+                    pieces.push(buffer);
+                    buffer = grapheme;
+                }
+            }
+            if (buffer) {
+                pieces.push(buffer);
+            }
+            return pieces;
+        };
+        const wrapLine = (line) => {
+            if (!shouldWrap || maxWidth <= 0) {
+                pushLine(line, false);
+                return;
+            }
+            const segments = getWordSegments(line);
+            let currentLine = "";
+            for (const segment of segments) {
+                const tentative = currentLine + segment;
+                const tentativeWidth = measureWidth(tentative);
+                if (tentativeWidth <= maxWidth || tentative.trim().length === 0) {
+                    currentLine = tentative;
+                    continue;
+                }
+                if (currentLine.trim().length) {
+                    pushLine(currentLine, true);
+                    currentLine = segment.trimStart();
+                    if (!currentLine.length) {
+                        continue;
+                    }
+                    if (measureWidth(currentLine) > maxWidth) {
+                        const pieces = splitSegment(currentLine);
+                        for (let i = 0; i < pieces.length - 1; i++) {
+                            pushLine(pieces[i], true);
+                        }
+                        currentLine = pieces[pieces.length - 1] ?? "";
+                    }
+                    continue;
+                }
+                const trimmedSegment = segment.trim();
+                const pieces = splitSegment(trimmedSegment);
+                for (let i = 0; i < pieces.length; i++) {
+                    const piece = pieces[i];
+                    if (i === pieces.length - 1) {
+                        currentLine = piece;
+                    }
+                    else {
+                        pushLine(piece, true);
+                    }
+                }
+            }
+            const trimmedLine = currentLine.trim();
+            if (trimmedLine.length) {
+                pushLine(trimmedLine, true);
+            }
+            else if (currentLine.length) {
+                currentHeightPx += lineHeightPx;
+            }
+        };
+        for (const line of lines) {
+            wrapLine(line);
+        }
+        return {
+            width: textWidth,
+            height: currentHeightPx,
+        };
+    };
+    const measureText = (text, shouldWrap, boundedWidth) => getWidthOfLongestText(castToString(text), shouldWrap, boundedWidth);
+    const reset = () => setFont(defaults);
+    /* Set font in constructor */
+    setFont(o);
+    return {
+        context,
+        measureText,
+        setFont,
+        reset,
+    };
+};
+/* Export a singleton */
+export const autoSizerCanvas = AutoSizerCanvas();
+/* Check if a value is null */
+export const isNull = (value) => value === void 0 || value === null || value === "";
+export const isEqualCells = (a, b) => {
+    if (isNull(a) ||
+        isNull(b) ||
+        a === null ||
+        b === null ||
+        a === void 0 ||
+        b === void 0)
+        return false;
+    return a.rowIndex === b.rowIndex && a.columnIndex === b.columnIndex;
+};
+/**
+ * Simple utility function to check if cell is within bounds
+ * @param cell
+ * @param bounds
+ */
+export const isCellWithinBounds = (cell, bounds) => {
+    if (!bounds) {
+        return false;
+    }
+    if (cell.rowIndex < bounds.startRowIndex ||
+        cell.rowIndex > bounds.endRowIndex) {
+        return false;
+    }
+    if (cell.columnIndex < bounds.startColumnIndex ||
+        cell.columnIndex > bounds.endColumnIndex) {
+        return false;
+    }
+    return true;
+};
+export const clampIndex = (index, isHidden, direction) => {
+    switch (direction) {
+        case Direction.Right:
+        case Direction.Down: {
+            let hidden = isHidden?.(index);
+            while (hidden === true) {
+                hidden = isHidden?.(++index);
+            }
+            break;
+        }
+        case Direction.Left:
+        case Direction.Up: {
+            let hidden = isHidden?.(index);
+            while (hidden === true) {
+                hidden = isHidden?.(--index);
+            }
+            break;
+        }
+    }
+    return Math.max(0, index);
+};
+/**
+ * Find a cell with content if the current cell is out of the current dataregion
+ * [
+ *  1, 2, 3,
+ *  x, x, x
+ *  7, 8, 9
+ * ]
+ * activeCel = 2
+ * direction = Down
+ * New Cell = 8
+ *
+ * @param activeCell
+ * @param getValue
+ * @param isHidden
+ * @param direction
+ * @param limit
+ */
+export const findNextContentfulCell = (sheetId, activeCell, getValue, isHidden, direction, limit) => {
+    let { rowIndex, columnIndex } = activeCell;
+    switch (direction) {
+        case Direction.Down: {
+            rowIndex = clampIndex(Math.min(rowIndex + 1, limit), isHidden, direction);
+            while (isNull(getValue(sheetId, rowIndex, columnIndex)) &&
+                rowIndex < limit) {
+                rowIndex = clampIndex(Math.min(rowIndex + 1, limit), isHidden, direction);
+            }
+            return { rowIndex: rowIndex, columnIndex };
+        }
+        case Direction.Up: {
+            rowIndex = clampIndex(Math.max(rowIndex - 1, limit), isHidden, direction);
+            while (isNull(getValue(sheetId, rowIndex, columnIndex)) &&
+                rowIndex > limit) {
+                rowIndex = clampIndex(Math.max(rowIndex - 1, limit), isHidden, direction);
+            }
+            return { rowIndex, columnIndex };
+        }
+        case Direction.Right: {
+            columnIndex = clampIndex(Math.min(columnIndex + 1, limit), isHidden, direction);
+            while (isNull(getValue(sheetId, rowIndex, columnIndex)) &&
+                columnIndex < limit) {
+                columnIndex = clampIndex(Math.min(columnIndex + 1, limit), isHidden, direction);
+            }
+            return { rowIndex, columnIndex };
+        }
+        case Direction.Left: {
+            columnIndex = clampIndex(Math.max(columnIndex - 1, limit), isHidden, direction);
+            while (isNull(getValue(sheetId, rowIndex, columnIndex)) &&
+                columnIndex > limit) {
+                columnIndex = clampIndex(Math.max(columnIndex - 1, limit), isHidden, direction);
+            }
+            return { rowIndex, columnIndex };
+        }
+        default:
+            return activeCell;
+    }
+};
+/**
+ * Find the next cell
+ * @param activeCell
+ * @param getValue
+ * @param isHidden
+ * @param direction
+ * @param limit
+ */
+export const findLastContentfulCell = (sheetId, activeCell, getValue, isHidden, direction, limit) => {
+    let { rowIndex, columnIndex } = activeCell;
+    switch (direction) {
+        case Direction.Down: {
+            while (!isNull(getValue(sheetId, clampIndex(Math.min(rowIndex + 1, limit), isHidden, direction), columnIndex)) &&
+                rowIndex < limit) {
+                clampIndex(Math.min(++rowIndex, limit), isHidden, direction);
+            }
+            return {
+                columnIndex,
+                rowIndex,
+            };
+        }
+        case Direction.Up: {
+            while (!isNull(getValue(sheetId, clampIndex(Math.max(rowIndex - 1, limit), isHidden, direction), columnIndex)) &&
+                rowIndex > limit) {
+                rowIndex = clampIndex(Math.max(--rowIndex, limit), isHidden, direction);
+            }
+            return {
+                columnIndex,
+                rowIndex,
+            };
+        }
+        case Direction.Right: {
+            while (!isNull(getValue(sheetId, rowIndex, clampIndex(Math.min(columnIndex + 1, limit), isHidden, direction))) &&
+                columnIndex < limit) {
+                columnIndex = clampIndex(Math.min(++columnIndex, limit), isHidden, direction);
+            }
+            return {
+                rowIndex,
+                columnIndex,
+            };
+        }
+        case Direction.Left: {
+            while (!isNull(getValue(sheetId, rowIndex, clampIndex(Math.max(columnIndex - 1, limit), isHidden, direction))) &&
+                columnIndex > limit) {
+                columnIndex = clampIndex(Math.max(--columnIndex, limit), isHidden, direction);
+            }
+            return {
+                rowIndex,
+                columnIndex,
+            };
+        }
+        default:
+            return activeCell;
+    }
+};
+/**
+ * Ex
+ */
+export const findNextCellInDataRegion = (sheetId, activeCell, getValue, isHidden, direction, limit) => {
+    const { rowIndex, columnIndex } = activeCell;
+    const isCurrentCellEmpty = isNull(getValue(sheetId, rowIndex, columnIndex));
+    const didWeReachTheEdge = (cur, next) => {
+        return (cur && next) || (cur && !next) || (!cur && next);
+    };
+    switch (direction) {
+        case Direction.Down: {
+            const nextIndex = clampIndex(Math.min(rowIndex + 1, limit), isHidden, direction);
+            const nextCellValue = getValue(sheetId, nextIndex, columnIndex);
+            const isNextCellEmpty = isNull(nextCellValue);
+            const isEdge = didWeReachTheEdge(isCurrentCellEmpty, isNextCellEmpty);
+            const nextCell = isEdge
+                ? findNextContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit)
+                : findLastContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit);
+            return nextCell?.rowIndex;
+        }
+        case Direction.Up: {
+            const nextIndex = clampIndex(Math.max(rowIndex - 1, limit), isHidden, direction);
+            const nextCellValue = getValue(sheetId, nextIndex, columnIndex);
+            const isNextCellEmpty = isNull(nextCellValue);
+            const isEdge = didWeReachTheEdge(isCurrentCellEmpty, isNextCellEmpty);
+            const nextCell = isEdge
+                ? findNextContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit)
+                : findLastContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit);
+            return nextCell?.rowIndex;
+        }
+        case Direction.Right: {
+            const nextIndex = clampIndex(Math.min(columnIndex + 1, limit), isHidden, direction);
+            const nextCellValue = getValue(sheetId, rowIndex, nextIndex);
+            const isNextCellEmpty = isNull(nextCellValue);
+            const isEdge = didWeReachTheEdge(isCurrentCellEmpty, isNextCellEmpty);
+            const nextCell = isEdge
+                ? findNextContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit)
+                : findLastContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit);
+            return nextCell?.columnIndex;
+        }
+        case Direction.Left: {
+            const nextIndex = clampIndex(Math.max(columnIndex - 1, limit), isHidden, direction);
+            const nextCellValue = getValue(sheetId, rowIndex, nextIndex);
+            const isNextCellEmpty = isNull(nextCellValue);
+            const isEdge = didWeReachTheEdge(isCurrentCellEmpty, isNextCellEmpty);
+            const nextCell = isEdge
+                ? findNextContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit)
+                : findLastContentfulCell(sheetId, activeCell, getValue, isHidden, direction, limit);
+            return nextCell?.columnIndex;
+        }
+    }
+};
+/**
+ * Converts a value to string
+ * @param value
+ */
+export const castToString = (value) => {
+    if (value === null || value === void 0)
+        return void 0;
+    return typeof value !== "string" ? "" + value : value;
+};
+export const isArrowKey = (key) => {
+    return (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(key) !== -1);
+};
+export const getScrollIncrement = (delta, minDim = 8) => Math.max(1, Math.round(Math.abs(delta) / minDim));
+export const useIsomorphicLayoutEffect = canUseDOM
+    ? useLayoutEffect
+    : useEffect;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useCallbackRef = (callback) => {
+    const callbackRef = useRef(callback);
+    useIsomorphicLayoutEffect(() => {
+        callbackRef.current = callback;
+    });
+    // https://github.com/facebook/react/issues/19240
+    return useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+};
+export const getDevicePixelRatio = () => canUseDOM && typeof window !== "undefined" ? window.devicePixelRatio : 1;
+export const getPreviousCellInDirection = (cell, direction = Direction.Down) => {
+    if (direction === Direction.Down) {
+        return {
+            ...cell,
+            rowIndex: cell.rowIndex - 1,
+        };
+    }
+    if (direction === Direction.Right) {
+        return {
+            ...cell,
+            columnIndex: cell.columnIndex - 1,
+        };
+    }
+};