@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/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/cjs/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/cjs/hooks/use-sheet-change-handler.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSheetChangeHandler = void 0;
+var react_1 = require("react");
+var scroll_subscriber_1 = require("../signals/scroll-subscriber");
+var use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect");
+var use_previous_1 = require("./use-previous");
+var useSheetChangeHandler = function (sheetId, immediateCallback, effectCallback) {
+    var scrollPositionBySheetId = (0, react_1.useRef)({});
+    var previousSheetId = (0, use_previous_1.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();
+    }
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        if (previousSheetId && previousSheetId !== sheetId) {
+            effectCallback === null || effectCallback === void 0 ? void 0 : effectCallback((_a = scrollPositionBySheetId.current[sheetId]) !== null && _a !== void 0 ? _a : {
+                scrollTop: 0,
+                scrollLeft: 0,
+            });
+        }
+    }, [sheetId, previousSheetId]);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var scrollSubscription = scroll_subscriber_1.scrollSubscriber.subscribe(function (scrollPos) {
+            scrollPositionBySheetId.current[sheetId] = scrollPos;
+        });
+        return function () { return scrollSubscription.unsubscribe(); };
+    }, [sheetId]);
+};
+exports.useSheetChangeHandler = useSheetChangeHandler;

package/dist/cjs/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/cjs/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/cjs/hooks/use-sizer.js

@@ -0,0 +1,424 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSizer = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var react_1 = require("react");
+var rich_text_1 = require("../components/cell/rich-text");
+var config_1 = require("../config");
+var helpers_1 = require("../helpers");
+var use_callback_ref_1 = require("./use-callback-ref");
+var use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect");
+// CSS-equivalent scale for sup/sub baseline offset (matches browser default).
+var BASELINE_OFFSET_FONT_SCALE = 0.58;
+var defaultGetText = function () { return ""; };
+/**
+ * Auto sizer hook
+ * @param param
+ *
+ * TODO
+ * Dynamically resize columns after user has scrolled down/view port changed ?
+ */
+var useSizer = function (_a) {
+    var getTextFormat = _a.getTextFormat, getTextFormatRuns = _a.getTextFormatRuns, _b = _a.initialVisibleRows, initialVisibleRows = _b === void 0 ? 20 : _b, _c = _a.initialVisibleColumns, initialVisibleColumns = _c === void 0 ? 20 : _c, _d = _a.cellVerticalSpacing, cellVerticalSpacing = _d === void 0 ? 0 : _d, _e = _a.cellHorizontalSpacing, cellHorizontalSpacing = _e === void 0 ? 10 : _e, _f = _a.minColumnDimension, minColumnDimension = _f === void 0 ? config_1.DEFAULT_COLUMN_WIDTH : _f, _g = _a.minRowDimension, minRowDimension = _g === void 0 ? config_1.DEFAULT_ROW_HEIGHT : _g, _h = _a.resizeStrategy, resizeStrategy = _h === void 0 ? "lazy" : _h, rowCount = _a.rowCount, columnCount = _a.columnCount, getDataRowCount = _a.getDataRowCount, _j = _a.fontFamily, fontFamily = _j === void 0 ? "Arial" : _j, _k = _a.fontSize, fontSize = _k === void 0 ? 12 : _k, _l = _a.fontWeight, fontWeight = _l === void 0 ? "" : _l, _m = _a.fontStyle, fontStyle = _m === void 0 ? "" : _m, _o = _a.frozenRows, frozenRows = _o === void 0 ? 0 : _o, _p = _a.frozenColumns, frozenColumns = _p === void 0 ? 0 : _p, _q = _a.scale, scale = _q === void 0 ? 1 : _q, isHiddenRow = _a.isHiddenRow, isHiddenColumn = _a.isHiddenColumn, _r = _a.getTextValue, getTextValue = _r === void 0 ? defaultGetText : _r, getSpacing = _a.getSpacing, getViewPort = _a.getViewPort, shouldWrapCell = _a.shouldWrapCell, columnWidth = _a.columnWidth, getActualCellWidth = _a.getActualCellWidth;
+    var autoSizer = (0, react_1.useRef)(grid_1.autoSizerCanvas);
+    var scaleRef = (0, react_1.useRef)(scale);
+    // Keep scale in sync
+    scaleRef.current = scale;
+    /* Update any styles, fonts if necessary */
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        autoSizer.current.setFont({ fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, fontStyle: fontStyle });
+    }, [fontFamily, fontSize, fontWeight, fontStyle]);
+    var setAutoSizerTextFormat = (0, react_1.useCallback)(function (textFormat, scale) {
+        var _a, _b;
+        var baseFontSize = (0, helpers_1.pointToPixel)((_a = textFormat.fontSize) !== null && _a !== void 0 ? _a : fontSize);
+        var textFontSize = textFormat.baselineOffset
+            ? baseFontSize * BASELINE_OFFSET_FONT_SCALE
+            : baseFontSize;
+        autoSizer.current.setFont({
+            fontWeight: textFormat.bold ? "bold" : "",
+            fontSize: textFontSize,
+            fontFamily: (_b = textFormat.fontFamily) !== null && _b !== void 0 ? _b : fontFamily,
+            fontStyle: textFormat.italic ? "italic" : "",
+            scale: 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.
+     */
+    var measureAtom = (0, react_1.useCallback)(function (atom, base, currentScale) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var merged = {
+            bold: (_a = atom.format.bold) !== null && _a !== void 0 ? _a : base.bold,
+            italic: (_b = atom.format.italic) !== null && _b !== void 0 ? _b : base.italic,
+            fontFamily: (_c = atom.format.fontFamily) !== null && _c !== void 0 ? _c : base.fontFamily,
+            fontSize: (_d = atom.format.fontSize) !== null && _d !== void 0 ? _d : base.fontSize,
+            baselineOffset: (_e = atom.format.baselineOffset) !== null && _e !== void 0 ? _e : base.baselineOffset,
+        };
+        setAutoSizerTextFormat(merged, currentScale);
+        var ctx = autoSizer.current.context;
+        var width = (_f = ctx === null || ctx === void 0 ? void 0 : ctx.measureText(atom.text).width) !== null && _f !== void 0 ? _f : 0;
+        var fontPx = (0, helpers_1.pointToPixel)((_g = merged.fontSize) !== null && _g !== void 0 ? _g : fontSize);
+        var height = fontPx * 1.2 * currentScale;
+        return { width: width, height: 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.
+     */
+    var measureRichTextDimensions = (0, react_1.useCallback)(function (text, runs, base, shouldWrap, maxGlyphWidth, currentScale) {
+        var e_1, _a;
+        var segments = (0, rich_text_1.buildRichTextSegments)(text, runs);
+        var inputLines = (0, rich_text_1.segmentsToLines)(segments);
+        // Baseline height for empty lines — single-space measurement
+        // through the autoSizer so the scale + line-height ratio match.
+        var baseLineHeight = (function () {
+            var _a, _b;
+            setAutoSizerTextFormat(base, currentScale);
+            return (_b = (_a = autoSizer.current.measureText(" ")) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0;
+        })();
+        var totalWidth = 0;
+        var totalHeight = 0;
+        var _loop_1 = function (line) {
+            var e_2, _b, e_3, _c, e_4, _d, e_5, _e;
+            if (line.length === 0) {
+                totalHeight += baseLineHeight;
+                return "continue";
+            }
+            var atoms = [];
+            try {
+                for (var line_1 = (e_2 = void 0, tslib_1.__values(line)), line_1_1 = line_1.next(); !line_1_1.done; line_1_1 = line_1.next()) {
+                    var seg = line_1_1.value;
+                    try {
+                        for (var _f = (e_3 = void 0, tslib_1.__values((0, rich_text_1.segmentToAtoms)(seg))), _g = _f.next(); !_g.done; _g = _f.next()) {
+                            var atom = _g.value;
+                            atoms.push(atom);
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (line_1_1 && !line_1_1.done && (_b = line_1.return)) _b.call(line_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            if (!shouldWrap) {
+                // Single-line case: sum widths, max atom height = line height.
+                var lineWidth_1 = 0;
+                var lineMaxHeight_1 = baseLineHeight;
+                try {
+                    for (var atoms_1 = (e_4 = void 0, tslib_1.__values(atoms)), atoms_1_1 = atoms_1.next(); !atoms_1_1.done; atoms_1_1 = atoms_1.next()) {
+                        var atom = atoms_1_1.value;
+                        var _h = measureAtom(atom, base, currentScale), width = _h.width, height = _h.height;
+                        lineWidth_1 += width;
+                        if (height > lineMaxHeight_1)
+                            lineMaxHeight_1 = height;
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (atoms_1_1 && !atoms_1_1.done && (_d = atoms_1.return)) _d.call(atoms_1);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                if (lineWidth_1 > totalWidth)
+                    totalWidth = lineWidth_1;
+                totalHeight += lineMaxHeight_1;
+                return "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).
+            var cursorX = 0;
+            var lineWidth = 0;
+            var lineMaxHeight = baseLineHeight;
+            var flush = function () {
+                if (lineWidth > totalWidth)
+                    totalWidth = lineWidth;
+                totalHeight += lineMaxHeight;
+                cursorX = 0;
+                lineWidth = 0;
+                lineMaxHeight = baseLineHeight;
+            };
+            try {
+                for (var atoms_2 = (e_5 = void 0, tslib_1.__values(atoms)), atoms_2_1 = atoms_2.next(); !atoms_2_1.done; atoms_2_1 = atoms_2.next()) {
+                    var atom = atoms_2_1.value;
+                    var _j = measureAtom(atom, base, currentScale), atomWidth = _j.width, atomHeight = _j.height;
+                    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;
+                    }
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (atoms_2_1 && !atoms_2_1.done && (_e = atoms_2.return)) _e.call(atoms_2);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+            flush();
+        };
+        try {
+            for (var inputLines_1 = tslib_1.__values(inputLines), inputLines_1_1 = inputLines_1.next(); !inputLines_1_1.done; inputLines_1_1 = inputLines_1.next()) {
+                var line = inputLines_1_1.value;
+                _loop_1(line);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (inputLines_1_1 && !inputLines_1_1.done && (_a = inputLines_1.return)) _a.call(inputLines_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        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
+     */
+    var getCellDimensions = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex, axis, options) {
+        var _a, _b, _c;
+        if (axis === void 0) { axis = "y"; }
+        var _d = options !== null && options !== void 0 ? options : {}, textOverride = _d.textOverride, textFormatOverride = _d.textFormatOverride, shouldWrapOverride = _d.shouldWrapOverride;
+        var text = textOverride !== null && textOverride !== void 0 ? textOverride : getTextValue(sheetId, rowIndex, columnIndex);
+        var width = 0;
+        var height = 0;
+        /* Check if its null */
+        if (!(0, grid_1.isNull)(text) && text !== void 0) {
+            var textFormat = textFormatOverride !== null && textFormatOverride !== void 0 ? textFormatOverride : getTextFormat(sheetId, rowIndex, columnIndex);
+            var cellAdditionalSpacing = (_a = getSpacing === null || getSpacing === void 0 ? void 0 : getSpacing(sheetId, rowIndex, columnIndex, axis)) !== null && _a !== void 0 ? _a : 0;
+            /* Reset fonts */
+            autoSizer.current.reset();
+            var shouldWrap = shouldWrapOverride !== null && shouldWrapOverride !== void 0 ? shouldWrapOverride : shouldWrapCell(sheetId, rowIndex, columnIndex);
+            // Update autosizer format
+            var scale_1 = scaleRef.current;
+            setAutoSizerTextFormat(textFormat, scale_1);
+            var availableWidth = ((_b = options === null || options === void 0 ? void 0 : options.boundedWidth) !== null && _b !== void 0 ? _b : getActualCellWidth(sheetId, rowIndex, columnIndex)) -
+                cellAdditionalSpacing -
+                cellHorizontalSpacing;
+            var scaledWidth = Math.max(availableWidth * scale_1, 0);
+            var horizontalSpacing = (cellAdditionalSpacing + cellHorizontalSpacing) * scale_1;
+            var verticalSpacing = cellVerticalSpacing * scale_1;
+            // 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).
+            var richRuns = (options === null || options === void 0 ? void 0 : options.textFormatRunsOverride) !== undefined
+                ? (_c = options.textFormatRunsOverride) !== null && _c !== void 0 ? _c : undefined
+                : textFormatOverride == null
+                    ? getTextFormatRuns === null || getTextFormatRuns === void 0 ? void 0 : getTextFormatRuns(sheetId, rowIndex, columnIndex)
+                    : undefined;
+            if (richRuns === null || richRuns === void 0 ? void 0 : richRuns.length) {
+                var richDims = measureRichTextDimensions(String(text), richRuns, textFormat, shouldWrap, scaledWidth, scale_1);
+                width += Math.ceil(richDims.width) + horizontalSpacing;
+                height += Math.ceil(richDims.height) + verticalSpacing;
+                return { width: width, height: height };
+            }
+            // Get height if wrapped
+            var metrics = autoSizer.current.measureText(text, shouldWrap, scaledWidth);
+            if (metrics) {
+                width += Math.ceil(metrics.width) + horizontalSpacing;
+                height += Math.ceil(metrics.height) + verticalSpacing;
+            }
+        }
+        return { width: width, height: height };
+    }, [
+        getTextFormat,
+        getTextFormatRuns,
+        getSpacing,
+        shouldWrapCell,
+        setAutoSizerTextFormat,
+        measureRichTextDimensions,
+        cellVerticalSpacing,
+        cellHorizontalSpacing,
+        getTextValue,
+        getActualCellWidth,
+    ]);
+    // For context
+    var getCellDimensionsStable = (0, use_callback_ref_1.useCallbackRef)(getCellDimensions);
+    /**
+     * Calculate column width
+     */
+    var getColumnWidth = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, columnIndex, options) {
+        var _a;
+        var _b = options !== null && options !== void 0 ? options : {}, rowStartIndexRegion = _b.rowStartIndexRegion, rowStopIndexRegion = _b.rowStopIndexRegion, fallbackToDefaultIfEmpty = _b.fallbackToDefaultIfEmpty;
+        var viewPort = getViewPort();
+        var _c = viewPort !== null && viewPort !== void 0 ? viewPort : {}, _d = _c.rowStartIndex, rowStartIndex = _d === void 0 ? 0 : _d, _e = _c.rowStopIndex, rowStopIndex = _e === void 0 ? 0 : _e;
+        var visibleRows = (rowStopIndexRegion !== null && rowStopIndexRegion !== void 0 ? rowStopIndexRegion : resizeStrategy === "full")
+            ? (_a = getDataRowCount === null || getDataRowCount === void 0 ? void 0 : getDataRowCount(sheetId)) !== null && _a !== void 0 ? _a : rowCount
+            : rowStopIndex || initialVisibleRows;
+        var start = (rowStartIndexRegion !== null && rowStartIndexRegion !== void 0 ? rowStartIndexRegion : resizeStrategy === "full")
+            ? frozenRows
+            : rowStartIndex;
+        var maxWidth = 0;
+        /* Calculate for frozen rows: Frozen rows are always on the screen */
+        for (var i = 1; i < frozenRows; i++) {
+            if (isHiddenRow(i)) {
+                continue;
+            }
+            var width = getCellDimensions(sheetId, i, columnIndex).width;
+            if (width > maxWidth)
+                maxWidth = width;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleRows) {
+            if (isHiddenRow(start)) {
+                start++;
+                continue;
+            }
+            var width = getCellDimensions(sheetId, start, columnIndex).width;
+            if (width > maxWidth)
+                maxWidth = width;
+            start++;
+        }
+        // This column is empty
+        if (maxWidth === 0) {
+            if (fallbackToDefaultIfEmpty) {
+                return config_1.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)
+     */
+    var getRowHeight = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, rowIndex, shouldExclude) {
+        var viewPort = getViewPort();
+        var _a = viewPort !== null && viewPort !== void 0 ? viewPort : {}, _b = _a.columnStartIndex, columnStartIndex = _b === void 0 ? 0 : _b, _c = _a.columnStopIndex, columnStopIndex = _c === void 0 ? 0 : _c;
+        var visibleColumns = resizeStrategy === "full"
+            ? columnCount
+            : columnStopIndex || initialVisibleColumns;
+        var start = resizeStrategy === "full" ? frozenColumns : columnStartIndex;
+        var maxHeight = 0;
+        /* Calculate for frozen rows */
+        for (var i = 1; i <= frozenColumns; i++) {
+            if (isHiddenColumn(i)) {
+                continue;
+            }
+            var height = getCellDimensions(sheetId, rowIndex, i, "x").height;
+            if (height > maxHeight)
+                maxHeight = height;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleColumns) {
+            if (isHiddenColumn(start) || (shouldExclude === null || shouldExclude === void 0 ? void 0 : shouldExclude(start))) {
+                start++;
+                continue;
+            }
+            var height = getCellDimensions(sheetId, rowIndex, start, "x").height;
+            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
+     */
+    var getTextDimension = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex, formattedValue, customTextFormat) {
+        var width = 0;
+        var height = 0;
+        /* Check if its null */
+        if (!(0, grid_1.isNull)(formattedValue) && formattedValue !== void 0) {
+            // Use custom format if provided, otherwise get from cell
+            var textFormat = customTextFormat !== null && customTextFormat !== void 0 ? customTextFormat : getTextFormat(sheetId, rowIndex, columnIndex);
+            /* Reset fonts */
+            autoSizer.current.reset();
+            // Update autosizer format
+            setAutoSizerTextFormat(textFormat, scale);
+            // Get height if wrapped
+            var metrics = autoSizer.current.measureText(formattedValue);
+            if (metrics) {
+                width += Math.ceil(metrics.width) + cellHorizontalSpacing;
+                height += Math.ceil(metrics.height);
+            }
+        }
+        return { width: width, height: height };
+    }, [cellHorizontalSpacing, scale, getTextFormat, setAutoSizerTextFormat]);
+    return {
+        getColumnWidth: getColumnWidth,
+        getTextDimension: getTextDimension,
+        getRowHeight: getRowHeight,
+        getCellDimensions: getCellDimensions,
+        getCellDimensionsStable: getCellDimensionsStable,
+    };
+};
+exports.useSizer = useSizer;

package/dist/cjs/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/cjs/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"}