@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-sheet-change-handler.d.ts

@@ -0,0 +1,3 @@
+import type { ScrollCoords } from "@rowsncolumns/grid";
+export declare const useSheetChangeHandler: (sheetId: number, immediateCallback: () => void, effectCallback?: (scrollPosition: ScrollCoords) => void) => void;
+//# sourceMappingURL=use-sheet-change-handler.d.ts.map

package/dist/esm/hooks/use-sheet-change-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sheet-change-handler.d.ts","sourceRoot":"","sources":["../../../hooks/use-sheet-change-handler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAOvD,eAAO,MAAM,qBAAqB,GAChC,SAAS,MAAM,EACf,mBAAmB,MAAM,IAAI,EAC7B,iBAAiB,CAAC,cAAc,EAAE,YAAY,KAAK,IAAI,SAkCxD,CAAC"}

package/dist/esm/hooks/use-sheet-change-handler.js

@@ -0,0 +1,33 @@
+import { useRef } from "react";
+import { scrollSubscriber } from "../signals/scroll-subscriber";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+import { usePrevious } from "./use-previous";
+export const useSheetChangeHandler = (sheetId, immediateCallback, effectCallback) => {
+    const scrollPositionBySheetId = useRef({});
+    const previousSheetId = usePrevious(sheetId);
+    /**
+     * Callback fired during mount
+     * and when sheet changes
+     *
+     * Calls updateSelectionStartEndReference, which updates
+     * the selectionStart and selectionEnd based on the
+     * activeCell
+     */
+    if (previousSheetId !== sheetId) {
+        immediateCallback();
+    }
+    useIsomorphicLayoutEffect(() => {
+        if (previousSheetId && previousSheetId !== sheetId) {
+            effectCallback?.(scrollPositionBySheetId.current[sheetId] ?? {
+                scrollTop: 0,
+                scrollLeft: 0,
+            });
+        }
+    }, [sheetId, previousSheetId]);
+    useIsomorphicLayoutEffect(() => {
+        const scrollSubscription = scrollSubscriber.subscribe((scrollPos) => {
+            scrollPositionBySheetId.current[sheetId] = scrollPos;
+        });
+        return () => scrollSubscription.unsubscribe();
+    }, [sheetId]);
+};

package/dist/esm/hooks/use-sizer.d.ts

@@ -0,0 +1,164 @@
+import type { HiddenType, ViewPortProps } from "@rowsncolumns/grid";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { AXIS, Color, TextFormatRun } from "../types";
+type GetColumnWidthOptions = {
+    rowStartIndexRegion?: number;
+    rowStopIndexRegion?: number;
+    fallbackToDefaultIfEmpty?: boolean;
+};
+export interface UseSizerProps {
+    /**
+     * Value getter for a cell
+     */
+    getTextFormat(sheetId: number, rowIndex: number, columnIndex: number): TextFormat;
+    /**
+     * Per-segment rich-text runs for the cell. When present, the sizer
+     * measures each segment with its own font (bold/italic/fontSize all
+     * affect glyph width) and sums them per visual line. Without this,
+     * a cell like "Hello world" with bold "world" measures as plain
+     * Arial throughout — auto-fit columns end up too narrow.
+     */
+    getTextFormatRuns?(sheetId: number, rowIndex: number, columnIndex: number): TextFormatRun[] | null | undefined;
+    /**
+     * Visible rows when the grid is first visible, Since we do not know how many rows  can fit
+     */
+    initialVisibleRows?: number;
+    initialVisibleColumns?: number;
+    /**
+     * Restrict column width by this number
+     */
+    minColumnDimension?: number;
+    minRowDimension?: number;
+    /**
+     * Cell padding, used for width calculation
+     */
+    cellVerticalSpacing?: number;
+    cellHorizontalSpacing?: number;
+    /**
+     * Font used to calculate width
+     */
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    fontStyle?: string;
+    /**
+     * Strategy used to calculate column width
+     * lazy = visible rows
+     * full = all rows
+     *
+     * columns are always lazy
+     */
+    resizeStrategy?: ResizeStrategy;
+    /**
+     * No of rows in teh grid
+     */
+    rowCount?: number;
+    columnCount?: number;
+    getDataRowCount?: CanvasGridProps["getDataRowCount"];
+    /**
+     * Hidden rows
+     */
+    isHiddenRow: HiddenType;
+    /**
+     * Hidden columns
+     */
+    isHiddenColumn: HiddenType;
+    /**
+     * Should wrap a cell
+     * @param rowIndex
+     * @param columnIndex
+     */
+    shouldWrapCell(sheetId: number, rowIndex: number, columnIndex: number): boolean;
+    /**
+     * Number of frozen rows
+     */
+    frozenRows?: number;
+    frozenColumns?: number;
+    selectionLeftBound?: number;
+    selectionTopBound?: number;
+    /**
+     * Current scaling factor
+     */
+    scale?: number;
+    /**
+     * Get text value
+     */
+    getTextValue?(sheetId: number, rowIndex: number, columnIndex: number): string | undefined;
+    /**
+     * Get additonal spacing in cells
+     * @param rowIndex
+     * @param columnIndex
+     * @param axis
+     */
+    getSpacing?(sheetId: number, rowIndex: number, columnIndex: number, axis?: AXIS): number | undefined;
+    /**
+     * Get width of a column
+     * @param columnIndex
+     */
+    columnWidth(columnIndex: number): number;
+    /**
+     * Get current viewport
+     */
+    getViewPort(): ViewPortProps;
+    getActualCellWidth(sheetId: number, rowIndex: number, columnIndex: number): number;
+}
+export type ResizeStrategy = "lazy" | "full";
+export interface TextDimensions {
+    width: number;
+    height: number;
+}
+export type SizeType = {
+    [key: number]: number;
+};
+export interface TextFormat {
+    bold?: boolean | null;
+    spacing?: number;
+    fontSize?: number | null;
+    fontFamily?: string | null;
+    italic?: boolean | null;
+    color?: Color | null;
+    strikethrough?: boolean | null;
+    underline?: boolean | null;
+    shouldWrap?: boolean | null;
+    baselineOffset?: "superscript" | "subscript" | null;
+}
+export interface GetCellDimensionsOptions {
+    textOverride?: string;
+    textFormatOverride?: TextFormat;
+    shouldWrapOverride?: boolean;
+    boundedWidth?: number;
+    /**
+     * Rich-text runs to measure `textOverride` with. Row auto-height on
+     * commit measures the value being committed, which is not in the cell
+     * store yet — without this, the sizer reads the cell's *previous* runs
+     * and a run-level font-size change never affects the row height. Pass
+     * `null` to measure uniformly (explicitly "no runs") instead of falling
+     * back to the store.
+     */
+    textFormatRunsOverride?: TextFormatRun[] | null;
+}
+/**
+ * Auto sizer hook
+ * @param param
+ *
+ * TODO
+ * Dynamically resize columns after user has scrolled down/view port changed ?
+ */
+export declare const useSizer: ({ getTextFormat, getTextFormatRuns, initialVisibleRows, initialVisibleColumns, cellVerticalSpacing, cellHorizontalSpacing, minColumnDimension, minRowDimension, resizeStrategy, rowCount, columnCount, getDataRowCount, fontFamily, fontSize, fontWeight, fontStyle, frozenRows, frozenColumns, scale, isHiddenRow, isHiddenColumn, getTextValue, getSpacing, getViewPort, shouldWrapCell, columnWidth, getActualCellWidth, }: UseSizerProps) => {
+    getColumnWidth: (sheetId: number, columnIndex: number, options?: GetColumnWidthOptions) => number;
+    getTextDimension: (sheetId: number, rowIndex: number, columnIndex: number, formattedValue: string | undefined, customTextFormat?: TextFormat) => {
+        width: number;
+        height: number;
+    };
+    getRowHeight: (sheetId: number, rowIndex: number, shouldExclude?: (index: number) => boolean) => number;
+    getCellDimensions: (sheetId: number, rowIndex: number, columnIndex: number, axis?: AXIS, options?: GetCellDimensionsOptions) => {
+        width: number;
+        height: number;
+    };
+    getCellDimensionsStable: (sheetId: number, rowIndex: number, columnIndex: number, axis?: AXIS, options?: GetCellDimensionsOptions) => {
+        width: number;
+        height: number;
+    };
+};
+export {};
+//# sourceMappingURL=use-sizer.d.ts.map

package/dist/esm/hooks/use-sizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sizer.d.ts","sourceRoot":"","sources":["../../../hooks/use-sizer.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,357 @@
+import { autoSizerCanvas, isNull } from "@rowsncolumns/grid";
+import { useCallback, useRef } from "react";
+import { buildRichTextSegments, segmentsToLines, segmentToAtoms, } from "../components/cell/rich-text";
+import { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT } from "../config";
+import { pointToPixel } from "../helpers";
+import { useCallbackRef } from "./use-callback-ref";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+// CSS-equivalent scale for sup/sub baseline offset (matches browser default).
+const BASELINE_OFFSET_FONT_SCALE = 0.58;
+const defaultGetText = () => "";
+/**
+ * Auto sizer hook
+ * @param param
+ *
+ * TODO
+ * Dynamically resize columns after user has scrolled down/view port changed ?
+ */
+export const useSizer = ({ getTextFormat, getTextFormatRuns, initialVisibleRows = 20, initialVisibleColumns = 20, cellVerticalSpacing = 0, cellHorizontalSpacing = 10, minColumnDimension = DEFAULT_COLUMN_WIDTH, minRowDimension = DEFAULT_ROW_HEIGHT, resizeStrategy = "lazy", rowCount, columnCount, getDataRowCount, fontFamily = "Arial", fontSize = 12, fontWeight = "", fontStyle = "", frozenRows = 0, frozenColumns = 0, scale = 1, isHiddenRow, isHiddenColumn, getTextValue = defaultGetText, getSpacing, getViewPort, shouldWrapCell, columnWidth, getActualCellWidth, }) => {
+    const autoSizer = useRef(autoSizerCanvas);
+    const scaleRef = useRef(scale);
+    // Keep scale in sync
+    scaleRef.current = scale;
+    /* Update any styles, fonts if necessary */
+    useIsomorphicLayoutEffect(() => {
+        autoSizer.current.setFont({ fontFamily, fontSize, fontWeight, fontStyle });
+    }, [fontFamily, fontSize, fontWeight, fontStyle]);
+    const setAutoSizerTextFormat = useCallback((textFormat, scale) => {
+        const baseFontSize = pointToPixel(textFormat.fontSize ?? fontSize);
+        const textFontSize = textFormat.baselineOffset
+            ? baseFontSize * BASELINE_OFFSET_FONT_SCALE
+            : baseFontSize;
+        autoSizer.current.setFont({
+            fontWeight: textFormat.bold ? "bold" : "",
+            fontSize: textFontSize,
+            fontFamily: textFormat.fontFamily ?? fontFamily,
+            fontStyle: textFormat.italic ? "italic" : "",
+            scale,
+        });
+    }, [fontFamily, fontSize]);
+    /**
+     * Measure a single atom under its segment-merged format. We can't
+     * delegate to `autoSizer.measureText` here: that runs the input
+     * through `getMultilineTextDimensions.pushLine`, which strips
+     * trailing whitespace before calling `context.measureText`. That
+     * made every whitespace-only atom (the space between two words)
+     * report 0px width, so summing atoms for a cell like
+     * "Hello world" (with bold "world") produced a width as if the
+     * space didn't exist — auto-fit then sized the column too narrow
+     * and the bold run touched the right edge. Width comes from the
+     * raw 2D canvas API; height mirrors the autoSizer's
+     * `fontSize * 1.2 * scale` line-box.
+     */
+    const measureAtom = useCallback((atom, base, currentScale) => {
+        const merged = {
+            bold: atom.format.bold ?? base.bold,
+            italic: atom.format.italic ?? base.italic,
+            fontFamily: atom.format.fontFamily ?? base.fontFamily,
+            fontSize: atom.format.fontSize ?? base.fontSize,
+            baselineOffset: atom.format.baselineOffset ?? base.baselineOffset,
+        };
+        setAutoSizerTextFormat(merged, currentScale);
+        const ctx = autoSizer.current.context;
+        const width = ctx?.measureText(atom.text).width ?? 0;
+        const fontPx = pointToPixel(merged.fontSize ?? fontSize);
+        const height = fontPx * 1.2 * currentScale;
+        return { width, height };
+    }, [fontSize, setAutoSizerTextFormat]);
+    /**
+     * Measure a rich-text cell. Walks segments per line, sets the
+     * autoSizer font per atom, sums widths per line, takes the tallest
+     * atom's measured height as that line's height (Excel scales rows
+     * to fit the largest glyph in a mixed-format line). For wrapped
+     * cells it applies greedy whitespace-break wrap with per-atom font
+     * metrics, matching what `CellTextRuns` paints. Returns the raw
+     * scaled glyph box — caller adds cell-spacing padding afterwards.
+     */
+    const measureRichTextDimensions = useCallback((text, runs, base, shouldWrap, maxGlyphWidth, currentScale) => {
+        const segments = buildRichTextSegments(text, runs);
+        const inputLines = segmentsToLines(segments);
+        // Baseline height for empty lines — single-space measurement
+        // through the autoSizer so the scale + line-height ratio match.
+        const baseLineHeight = (() => {
+            setAutoSizerTextFormat(base, currentScale);
+            return autoSizer.current.measureText(" ")?.height ?? 0;
+        })();
+        let totalWidth = 0;
+        let totalHeight = 0;
+        for (const line of inputLines) {
+            if (line.length === 0) {
+                totalHeight += baseLineHeight;
+                continue;
+            }
+            const atoms = [];
+            for (const seg of line) {
+                for (const atom of segmentToAtoms(seg))
+                    atoms.push(atom);
+            }
+            if (!shouldWrap) {
+                // Single-line case: sum widths, max atom height = line height.
+                let lineWidth = 0;
+                let lineMaxHeight = baseLineHeight;
+                for (const atom of atoms) {
+                    const { width, height } = measureAtom(atom, base, currentScale);
+                    lineWidth += width;
+                    if (height > lineMaxHeight)
+                        lineMaxHeight = height;
+                }
+                if (lineWidth > totalWidth)
+                    totalWidth = lineWidth;
+                totalHeight += lineMaxHeight;
+                continue;
+            }
+            // Wrapped case: greedy whitespace-break wrap with per-atom
+            // metrics. Mirrors `wrapAtomsForWidth` in cell-text-runs.tsx
+            // (kept inline because we need running per-line max-height).
+            let cursorX = 0;
+            let lineWidth = 0;
+            let lineMaxHeight = baseLineHeight;
+            const flush = () => {
+                if (lineWidth > totalWidth)
+                    totalWidth = lineWidth;
+                totalHeight += lineMaxHeight;
+                cursorX = 0;
+                lineWidth = 0;
+                lineMaxHeight = baseLineHeight;
+            };
+            for (const atom of atoms) {
+                const { width: atomWidth, height: atomHeight } = measureAtom(atom, base, currentScale);
+                if (cursorX + atomWidth <= maxGlyphWidth || cursorX === 0) {
+                    cursorX += atomWidth;
+                    lineWidth = cursorX;
+                    if (atomHeight > lineMaxHeight)
+                        lineMaxHeight = atomHeight;
+                }
+                else if (atom.isWhitespace) {
+                    flush();
+                }
+                else {
+                    flush();
+                    cursorX = atomWidth;
+                    lineWidth = atomWidth;
+                    if (atomHeight > lineMaxHeight)
+                        lineMaxHeight = atomHeight;
+                }
+            }
+            flush();
+        }
+        return { width: totalWidth, height: totalHeight };
+    }, [measureAtom, setAutoSizerTextFormat]);
+    /**
+     * Get dimension of a single cell
+     * 1. Applies fonts and styles of a cell
+     * 2. Measures dimension of the text in the cell.
+     * 3. Allows which axis to measure (x or y), so we dont add additional
+     * spacing for Filter icons or Dropdown icon
+     * 4. Allows to override text
+     */
+    const getCellDimensions = useCallback((sheetId, rowIndex, columnIndex, axis = "y", options) => {
+        const { textOverride, textFormatOverride, shouldWrapOverride } = options ?? {};
+        const text = textOverride ?? getTextValue(sheetId, rowIndex, columnIndex);
+        let width = 0;
+        let height = 0;
+        /* Check if its null */
+        if (!isNull(text) && text !== void 0) {
+            const textFormat = textFormatOverride ?? getTextFormat(sheetId, rowIndex, columnIndex);
+            const cellAdditionalSpacing = getSpacing?.(sheetId, rowIndex, columnIndex, axis) ?? 0;
+            /* Reset fonts */
+            autoSizer.current.reset();
+            const shouldWrap = shouldWrapOverride ?? shouldWrapCell(sheetId, rowIndex, columnIndex);
+            // Update autosizer format
+            const scale = scaleRef.current;
+            setAutoSizerTextFormat(textFormat, scale);
+            const availableWidth = (options?.boundedWidth ??
+                getActualCellWidth(sheetId, rowIndex, columnIndex)) -
+                cellAdditionalSpacing -
+                cellHorizontalSpacing;
+            const scaledWidth = Math.max(availableWidth * scale, 0);
+            const horizontalSpacing = (cellAdditionalSpacing + cellHorizontalSpacing) * scale;
+            const verticalSpacing = cellVerticalSpacing * scale;
+            // If the cell carries per-segment rich-text runs, measure
+            // each segment with its own font. An explicit runs override
+            // (including `null` for "no runs") wins over the store — the
+            // store still holds the pre-commit runs while a new value is
+            // being measured. Falls back to the single-style measureText
+            // path when no runs are present OR the caller overrode the
+            // format (text+format pair always measures uniformly under
+            // the override).
+            const richRuns = options?.textFormatRunsOverride !== undefined
+                ? options.textFormatRunsOverride ?? undefined
+                : textFormatOverride == null
+                    ? getTextFormatRuns?.(sheetId, rowIndex, columnIndex)
+                    : undefined;
+            if (richRuns?.length) {
+                const richDims = measureRichTextDimensions(String(text), richRuns, textFormat, shouldWrap, scaledWidth, scale);
+                width += Math.ceil(richDims.width) + horizontalSpacing;
+                height += Math.ceil(richDims.height) + verticalSpacing;
+                return { width, height };
+            }
+            // Get height if wrapped
+            const metrics = autoSizer.current.measureText(text, shouldWrap, scaledWidth);
+            if (metrics) {
+                width += Math.ceil(metrics.width) + horizontalSpacing;
+                height += Math.ceil(metrics.height) + verticalSpacing;
+            }
+        }
+        return { width, height };
+    }, [
+        getTextFormat,
+        getTextFormatRuns,
+        getSpacing,
+        shouldWrapCell,
+        setAutoSizerTextFormat,
+        measureRichTextDimensions,
+        cellVerticalSpacing,
+        cellHorizontalSpacing,
+        getTextValue,
+        getActualCellWidth,
+    ]);
+    // For context
+    const getCellDimensionsStable = useCallbackRef(getCellDimensions);
+    /**
+     * Calculate column width
+     */
+    const getColumnWidth = useCallbackRef(useCallback((sheetId, columnIndex, options) => {
+        const { rowStartIndexRegion, rowStopIndexRegion, fallbackToDefaultIfEmpty, } = options ?? {};
+        const viewPort = getViewPort();
+        const { rowStartIndex = 0, rowStopIndex = 0 } = viewPort ?? {};
+        const visibleRows = (rowStopIndexRegion ?? resizeStrategy === "full")
+            ? getDataRowCount?.(sheetId) ?? rowCount
+            : rowStopIndex || initialVisibleRows;
+        let start = rowStartIndexRegion ?? resizeStrategy === "full"
+            ? frozenRows
+            : rowStartIndex;
+        let maxWidth = 0;
+        /* Calculate for frozen rows: Frozen rows are always on the screen */
+        for (let i = 1; i < frozenRows; i++) {
+            if (isHiddenRow(i)) {
+                continue;
+            }
+            const { width } = getCellDimensions(sheetId, i, columnIndex);
+            if (width > maxWidth)
+                maxWidth = width;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleRows) {
+            if (isHiddenRow(start)) {
+                start++;
+                continue;
+            }
+            const { width } = getCellDimensions(sheetId, start, columnIndex);
+            if (width > maxWidth)
+                maxWidth = width;
+            start++;
+        }
+        // This column is empty
+        if (maxWidth === 0) {
+            if (fallbackToDefaultIfEmpty) {
+                return DEFAULT_COLUMN_WIDTH;
+            }
+            return columnWidth(columnIndex);
+        }
+        return Math.max(minColumnDimension * scale, maxWidth) / scale;
+    }, [
+        initialVisibleRows,
+        minColumnDimension,
+        frozenRows,
+        scale,
+        getCellDimensions,
+        isHiddenRow,
+        getViewPort,
+        resizeStrategy,
+        rowCount,
+        columnWidth,
+        getDataRowCount,
+    ]));
+    /**
+     * Calculate Row height
+     * Exclude certain columns from being calculated.
+     * shouldExclude is used for resizing a row when user
+     * changes font Size. We can calculate row height
+     * by excluding the modified column and
+     *
+     * return Math.max(currentRowHeight, calculatedCellHeight)
+     */
+    const getRowHeight = useCallbackRef(useCallback((sheetId, rowIndex, shouldExclude) => {
+        const viewPort = getViewPort();
+        const { columnStartIndex = 0, columnStopIndex = 0 } = viewPort ?? {};
+        const visibleColumns = resizeStrategy === "full"
+            ? columnCount
+            : columnStopIndex || initialVisibleColumns;
+        let start = resizeStrategy === "full" ? frozenColumns : columnStartIndex;
+        let maxHeight = 0;
+        /* Calculate for frozen rows */
+        for (let i = 1; i <= frozenColumns; i++) {
+            if (isHiddenColumn(i)) {
+                continue;
+            }
+            const { height } = getCellDimensions(sheetId, rowIndex, i, "x");
+            if (height > maxHeight)
+                maxHeight = height;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleColumns) {
+            if (isHiddenColumn(start) || shouldExclude?.(start)) {
+                start++;
+                continue;
+            }
+            const { height } = getCellDimensions(sheetId, rowIndex, start, "x");
+            if (height > maxHeight)
+                maxHeight = height;
+            start++;
+        }
+        return Math.max(minRowDimension * scale, maxHeight) / scale;
+    }, [
+        initialVisibleColumns,
+        minRowDimension,
+        isHiddenColumn,
+        frozenColumns,
+        scale,
+        getCellDimensions,
+        columnCount,
+        isHiddenRow,
+        getViewPort,
+        resizeStrategy,
+    ]));
+    /**
+     * Get text dimension
+     * @param customTextFormat - Optional custom text format to use instead of the cell's format
+     */
+    const getTextDimension = useCallback((sheetId, rowIndex, columnIndex, formattedValue, customTextFormat) => {
+        let width = 0;
+        let height = 0;
+        /* Check if its null */
+        if (!isNull(formattedValue) && formattedValue !== void 0) {
+            // Use custom format if provided, otherwise get from cell
+            const textFormat = customTextFormat ?? getTextFormat(sheetId, rowIndex, columnIndex);
+            /* Reset fonts */
+            autoSizer.current.reset();
+            // Update autosizer format
+            setAutoSizerTextFormat(textFormat, scale);
+            // Get height if wrapped
+            const metrics = autoSizer.current.measureText(formattedValue);
+            if (metrics) {
+                width += Math.ceil(metrics.width) + cellHorizontalSpacing;
+                height += Math.ceil(metrics.height);
+            }
+        }
+        return { width, height };
+    }, [cellHorizontalSpacing, scale, getTextFormat, setAutoSizerTextFormat]);
+    return {
+        getColumnWidth,
+        getTextDimension,
+        getRowHeight,
+        getCellDimensions,
+        getCellDimensionsStable,
+    };
+};

package/dist/esm/hooks/use-spreadsheet-theme.d.ts

@@ -0,0 +1,17 @@
+import type { CanvasGridProps, SpreadsheetTheme } from "../components/canvas-grid/typings";
+export type ColorMode = "light" | "dark";
+type UseSpreadsheetThemeProps = {
+    colorMode?: ColorMode;
+    theme?: SpreadsheetTheme;
+    darkThemeClassName?: string;
+};
+/**
+ * Spreadsheet theme extended with color mode
+ * @param spreadsheetTheme
+ * @returns
+ */
+export declare const useSpreadsheetTheme: ({ colorMode, theme, darkThemeClassName, }: UseSpreadsheetThemeProps) => Pick<CanvasGridProps, "gridLineColor" | "cellBackgroundColor" | "cellColor" | "headerBackgroundColor" | "headerBorderColor" | "headerColor" | "headerActiveBackgroundColor" | "headerTableBackgroundColor" | "headerTableActiveBackgroundColor" | "chipBackgroundColor" | "selectionBorderColor" | "selectionBackgroundColor" | "selectionDragBorderColor" | "tableBorderColor" | "filterIconColor"> & {
+    isDarkMode: boolean;
+};
+export {};
+//# sourceMappingURL=use-spreadsheet-theme.d.ts.map

package/dist/esm/hooks/use-spreadsheet-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-spreadsheet-theme.d.ts","sourceRoot":"","sources":["../../../hooks/use-spreadsheet-theme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AA0B3C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,2CAIjC,wBAAwB,KAAG,IAAI,CAChC,eAAe,EACb,eAAe,GACf,qBAAqB,GACrB,WAAW,GACX,uBAAuB,GACvB,mBAAmB,GACnB,aAAa,GACb,6BAA6B,GAC7B,4BAA4B,GAC5B,kCAAkC,GAClC,qBAAqB,GACrB,sBAAsB,GACtB,0BAA0B,GAC1B,0BAA0B,GAC1B,kBAAkB,GAClB,iBAAiB,CACpB,GAAG;IACF,UAAU,EAAE,OAAO,CAAC;CAkDrB,CAAC"}

package/dist/esm/hooks/use-spreadsheet-theme.js

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { CHIP_COLOR, CHIP_COLOR_DARK, DEFAULT_CELL_BACKGROUND_COLOR, DEFAULT_CELL_BACKGROUND_COLOR_DARK, DEFAULT_HEADER_ACTIVE_BG, DEFAULT_HEADER_ACTIVE_BG_DARK, DEFAULT_HEADER_ACTIVE_TABLE_BG, DEFAULT_HEADER_ACTIVE_TABLE_BG_DARK, DEFAULT_HEADER_BG, DEFAULT_HEADER_BG_DARK, DEFAULT_HEADER_BORDER_COLOR, DEFAULT_HEADER_BORDER_COLOR_DARK, DEFAULT_HEADER_COLOR, DEFAULT_HEADER_COLOR_DARK, DEFAULT_HEADER_TABLE_BG, DEFAULT_HEADER_TABLE_BG_DARK, defaultSpreadsheetTheme, GRIDLINE_COLOR, GRIDLINE_COLOR_DARK, SELECTION_BG, SELECTION_BORDER, } from "../config";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+/**
+ * Spreadsheet theme extended with color mode
+ * @param spreadsheetTheme
+ * @returns
+ */
+export const useSpreadsheetTheme = ({ colorMode, theme = defaultSpreadsheetTheme, darkThemeClassName = "rnc-dark", }) => {
+    const isDarkMode = colorMode === "dark";
+    // Persist color mode
+    useIsomorphicLayoutEffect(() => {
+        // Update classname
+        document.documentElement.classList.toggle(darkThemeClassName, colorMode === "dark");
+    }, [colorMode, darkThemeClassName]);
+    return useMemo(() => ({
+        gridLineColor: isDarkMode ? GRIDLINE_COLOR_DARK : GRIDLINE_COLOR,
+        cellBackgroundColor: isDarkMode
+            ? DEFAULT_CELL_BACKGROUND_COLOR_DARK
+            : DEFAULT_CELL_BACKGROUND_COLOR,
+        headerBackgroundColor: isDarkMode
+            ? DEFAULT_HEADER_BG_DARK
+            : DEFAULT_HEADER_BG,
+        headerColor: isDarkMode
+            ? DEFAULT_HEADER_COLOR_DARK
+            : DEFAULT_HEADER_COLOR,
+        headerBorderColor: isDarkMode
+            ? DEFAULT_HEADER_BORDER_COLOR_DARK
+            : DEFAULT_HEADER_BORDER_COLOR,
+        headerActiveBackgroundColor: isDarkMode
+            ? DEFAULT_HEADER_ACTIVE_BG_DARK
+            : DEFAULT_HEADER_ACTIVE_BG,
+        headerTableBackgroundColor: isDarkMode
+            ? DEFAULT_HEADER_TABLE_BG_DARK
+            : DEFAULT_HEADER_TABLE_BG,
+        headerTableActiveBackgroundColor: isDarkMode
+            ? DEFAULT_HEADER_ACTIVE_TABLE_BG_DARK
+            : DEFAULT_HEADER_ACTIVE_TABLE_BG,
+        chipBackgroundColor: isDarkMode ? CHIP_COLOR_DARK : CHIP_COLOR,
+        selectionBorderColor: isDarkMode ? "#008000" : SELECTION_BORDER,
+        selectionBackgroundColor: isDarkMode
+            ? "rgba(0, 255, 0, 0.1)"
+            : SELECTION_BG,
+        selectionDragBorderColor: isDarkMode ? "#008000" : SELECTION_BORDER,
+        tableBorderColor: theme.themeColors.accent1,
+        filterIconColor: theme.themeColors.accent1,
+        cellColor: { theme: 1, tint: isDarkMode ? 1 : 0 },
+        isDarkMode,
+    }), [isDarkMode, theme]);
+};

package/dist/esm/hooks/use-stable-ref.d.ts

@@ -0,0 +1,2 @@
+export declare const useStableRef: <T>(value: T) => import("react").RefObject<T | undefined>;
+//# sourceMappingURL=use-stable-ref.d.ts.map

package/dist/esm/hooks/use-stable-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stable-ref.d.ts","sourceRoot":"","sources":["../../../hooks/use-stable-ref.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,6CAQvC,CAAC"}

package/dist/esm/hooks/use-stable-ref.js

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export const useStableRef = (value) => {
+    const ref = useRef(undefined);
+    // Escape from closures
+    useIsomorphicLayoutEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+};