@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/hooks/use-export-range.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExportRange = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var grid_2 = require("@rowsncolumns/grid");
+var react_1 = require("react");
+var use_callback_ref_1 = require("./use-callback-ref");
+var useExportRange = function (_a) {
+    var sheetId = _a.sheetId, gridLineWidth = _a.gridLineWidth, cellBackgroundColor = _a.cellBackgroundColor, getCanvasLayers = _a.getCanvasLayers, getColumnHeaderCanvasLayer = _a.getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer = _a.getRowHeaderCanvasLayer, getSheetName = _a.getSheetName, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getR1C1AddressFromSelection = _a.getR1C1AddressFromSelection, getScrollPosition = _a.getScrollPosition, getViewPort = _a.getViewPort, getRowOffset = _a.getRowOffset, getColumnOffset = _a.getColumnOffset, getSheetDimensions = _a.getSheetDimensions, scrollTo = _a.scrollTo, scrollToCell = _a.scrollToCell, scale = _a.scale, onChangeScale = _a.onChangeScale;
+    return (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (range, options) {
+        var layers = getCanvasLayers();
+        if (!(layers === null || layers === void 0 ? void 0 : layers.length))
+            return undefined;
+        var _a = options || {}, filename = _a.filename, format = _a.format, includeHeaders = _a.includeHeaders;
+        var baseScale = scale !== null && scale !== void 0 ? scale : 1;
+        var minExportScale = 0.25;
+        var waitForPaint = function () {
+            return new Promise(function (resolve) {
+                requestAnimationFrame(function () {
+                    requestAnimationFrame(function () { return resolve(); });
+                });
+            });
+        };
+        var normalizeRangeStart = function (rangeValue) { return (tslib_1.__assign(tslib_1.__assign({}, rangeValue), { startRowIndex: Math.max(1, rangeValue.startRowIndex), startColumnIndex: Math.max(1, rangeValue.startColumnIndex) })); };
+        var isStartInViewport = function (viewport, normalizedRange) {
+            return normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
+                normalizedRange.startRowIndex <= viewport.visibleRowStopIndex &&
+                normalizedRange.startColumnIndex >=
+                    viewport.visibleColumnStartIndex &&
+                normalizedRange.startColumnIndex <= viewport.visibleColumnStopIndex;
+        };
+        var isRangeInViewport = function (viewport, normalizedRange) {
+            return normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
+                normalizedRange.endRowIndex <= viewport.visibleRowStopIndex &&
+                normalizedRange.startColumnIndex >=
+                    viewport.visibleColumnStartIndex &&
+                normalizedRange.endColumnIndex <= viewport.visibleColumnStopIndex;
+        };
+        var exportRangeAsync = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var initialScrollCoords, nextScale, didScroll, startX, endX, startY, endY, currentWidth, currentHeight, _a, viewWidth, viewHeight, unscaledWidth, unscaledHeight, fitScale, minScale, normalizedRange, viewport, viewportAfterStart, scrollCoords, tl, br, sheetName, dpr, baseX, baseY, baseWidth, baseHeight, headerWidth, headerHeight, destX, destY, width, height, finalFileName, getFileExtension, bodyCanvas, rowHeaderCanvas, columnHeaderCanvas, canvas, tempCanvas_1, tempCtx, intermediateCanvas, intermediateCtx, bodySourceX, bodySourceY, dataURL, anchor, shouldRestoreScale;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            return tslib_1.__generator(this, function (_q) {
+                switch (_q.label) {
+                    case 0:
+                        initialScrollCoords = getScrollPosition();
+                        nextScale = baseScale;
+                        didScroll = false;
+                        if (onChangeScale) {
+                            startX = getColumnOffset(range.startColumnIndex);
+                            endX = getColumnOffset(range.endColumnIndex + 1);
+                            startY = getRowOffset(range.startRowIndex);
+                            endY = getRowOffset(range.endRowIndex + 1);
+                            currentWidth = Math.max(endX - startX, 0);
+                            currentHeight = Math.max(endY - startY, 0);
+                            _a = tslib_1.__read(getSheetDimensions(), 2), viewWidth = _a[0], viewHeight = _a[1];
+                            if (currentWidth > 0 && currentHeight > 0) {
+                                unscaledWidth = currentWidth / baseScale;
+                                unscaledHeight = currentHeight / baseScale;
+                                fitScale = Math.min(viewWidth / unscaledWidth, viewHeight / unscaledHeight, baseScale);
+                                minScale = Math.min(minExportScale, baseScale);
+                                nextScale = Math.min(Math.max(fitScale, minScale), baseScale);
+                            }
+                        }
+                        _q.label = 1;
+                    case 1:
+                        _q.trys.push([1, , 10, 15]);
+                        if (!(onChangeScale && nextScale !== baseScale)) return [3 /*break*/, 3];
+                        onChangeScale(nextScale);
+                        return [4 /*yield*/, waitForPaint()];
+                    case 2:
+                        _q.sent();
+                        _q.label = 3;
+                    case 3:
+                        normalizedRange = normalizeRangeStart(range);
+                        viewport = getViewPort();
+                        if (!!isStartInViewport(viewport, normalizedRange)) return [3 /*break*/, 5];
+                        scrollToCell === null || scrollToCell === void 0 ? void 0 : scrollToCell({
+                            rowIndex: normalizedRange.startRowIndex,
+                            columnIndex: normalizedRange.startColumnIndex,
+                        }, grid_1.Align.start);
+                        didScroll = true;
+                        return [4 /*yield*/, waitForPaint()];
+                    case 4:
+                        _q.sent();
+                        _q.label = 5;
+                    case 5:
+                        viewportAfterStart = getViewPort();
+                        if (!!isRangeInViewport(viewportAfterStart, normalizedRange)) return [3 /*break*/, 7];
+                        scrollToCell === null || scrollToCell === void 0 ? void 0 : scrollToCell({
+                            rowIndex: normalizedRange.endRowIndex,
+                            columnIndex: normalizedRange.endColumnIndex,
+                        }, grid_1.Align.end);
+                        didScroll = true;
+                        return [4 /*yield*/, waitForPaint()];
+                    case 6:
+                        _q.sent();
+                        _q.label = 7;
+                    case 7:
+                        scrollCoords = getScrollPosition();
+                        tl = getCellOffsetFromCoords({
+                            rowIndex: normalizedRange.startRowIndex,
+                            columnIndex: normalizedRange.startColumnIndex,
+                        });
+                        br = getCellOffsetFromCoords({
+                            rowIndex: normalizedRange.endRowIndex,
+                            columnIndex: normalizedRange.endColumnIndex,
+                        });
+                        // @ts-ignore
+                        tl.x -= scrollCoords.scrollLeft;
+                        // @ts-ignore
+                        tl.y -= scrollCoords.scrollTop;
+                        // @ts-ignore
+                        br.x -= scrollCoords.scrollLeft;
+                        // @ts-ignore
+                        br.y -= scrollCoords.scrollTop;
+                        sheetName = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName((_b = range.sheetId) !== null && _b !== void 0 ? _b : sheetId);
+                        dpr = (0, grid_2.getDevicePixelRatio)();
+                        baseX = (_c = tl === null || tl === void 0 ? void 0 : tl.x) !== null && _c !== void 0 ? _c : 0;
+                        baseY = (_d = tl === null || tl === void 0 ? void 0 : tl.y) !== null && _d !== void 0 ? _d : 0;
+                        baseWidth = ((_e = br === null || br === void 0 ? void 0 : br.x) !== null && _e !== void 0 ? _e : 0) - baseX + ((_f = br === null || br === void 0 ? void 0 : br.width) !== null && _f !== void 0 ? _f : 0) + gridLineWidth;
+                        baseHeight = ((_g = br === null || br === void 0 ? void 0 : br.y) !== null && _g !== void 0 ? _g : 0) - baseY + ((_h = br === null || br === void 0 ? void 0 : br.height) !== null && _h !== void 0 ? _h : 0) + gridLineWidth;
+                        headerWidth = includeHeaders ? getColumnOffset(1) : 0;
+                        headerHeight = includeHeaders ? getRowOffset(1) : 0;
+                        destX = headerWidth;
+                        destY = headerHeight;
+                        width = baseWidth + headerWidth;
+                        height = baseHeight + headerHeight;
+                        finalFileName = filename !== null && filename !== void 0 ? filename : (_j = getR1C1AddressFromSelection === null || getR1C1AddressFromSelection === void 0 ? void 0 : getR1C1AddressFromSelection(normalizedRange, sheetName)) === null || _j === void 0 ? void 0 : _j.substring(1);
+                        getFileExtension = function (fmt) {
+                            switch (fmt) {
+                                case "image/jpeg":
+                                case "image/jpg":
+                                    return ".jpg";
+                                case "image/webp":
+                                    return ".webp";
+                                case "image/png":
+                                default:
+                                    return ".png";
+                            }
+                        };
+                        bodyCanvas = (_k = layers[0]) === null || _k === void 0 ? void 0 : _k.getCanvas()._canvas;
+                        rowHeaderCanvas = includeHeaders
+                            ? (_m = (_l = getRowHeaderCanvasLayer()) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.getCanvas()._canvas
+                            : null;
+                        columnHeaderCanvas = includeHeaders
+                            ? (_p = (_o = getColumnHeaderCanvasLayer()) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.getCanvas()._canvas
+                            : null;
+                        if (!bodyCanvas)
+                            return [2 /*return*/, undefined];
+                        canvas = bodyCanvas;
+                        tempCanvas_1 = document.createElement("canvas");
+                        tempCanvas_1.width = width * dpr;
+                        tempCanvas_1.height = height * dpr;
+                        tempCtx = tempCanvas_1.getContext("2d");
+                        intermediateCanvas = document.createElement("canvas");
+                        intermediateCanvas.width = width * dpr;
+                        intermediateCanvas.height = height * dpr;
+                        intermediateCtx = intermediateCanvas.getContext("2d");
+                        bodySourceX = baseX;
+                        bodySourceY = baseY;
+                        if (intermediateCtx) {
+                            intermediateCtx.drawImage(canvas, bodySourceX * dpr, bodySourceY * dpr, baseWidth * dpr, baseHeight * dpr, destX * dpr, destY * dpr, baseWidth * dpr, baseHeight * dpr);
+                        }
+                        if (tempCtx) {
+                            tempCtx.fillStyle = cellBackgroundColor;
+                            tempCtx.fillRect(0, 0, tempCanvas_1.width, tempCanvas_1.height);
+                            tempCtx.drawImage(intermediateCanvas, 0, 0);
+                            if (includeHeaders) {
+                                if (columnHeaderCanvas) {
+                                    tempCtx.drawImage(columnHeaderCanvas, baseX * dpr, 0, baseWidth * dpr, headerHeight * dpr, destX * dpr, 0, baseWidth * dpr, headerHeight * dpr);
+                                }
+                                if (rowHeaderCanvas) {
+                                    tempCtx.drawImage(rowHeaderCanvas, 0, baseY * dpr, headerWidth * dpr, baseHeight * dpr, 0, destY * dpr, headerWidth * dpr, baseHeight * dpr);
+                                }
+                            }
+                        }
+                        if (!(format === "clipboard")) return [3 /*break*/, 9];
+                        return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                tempCanvas_1.toBlob(function (blob) {
+                                    if (!blob) {
+                                        reject(new Error("Failed to create blob from canvas"));
+                                        return;
+                                    }
+                                    var item = new ClipboardItem({ "image/png": blob });
+                                    navigator.clipboard.write([item]).then(resolve).catch(reject);
+                                }, "image/png");
+                            })];
+                    case 8:
+                        _q.sent();
+                        return [2 /*return*/, undefined];
+                    case 9:
+                        if (format === "blob") {
+                            return [2 /*return*/, new Promise(function (resolve, reject) {
+                                    tempCanvas_1.toBlob(function (blob) {
+                                        if (!blob) {
+                                            reject(new Error("Failed to create blob from canvas"));
+                                            return;
+                                        }
+                                        resolve(blob);
+                                    }, "image/png");
+                                })];
+                        }
+                        if (format) {
+                            dataURL = tempCanvas_1.toDataURL(format);
+                            anchor = document.createElement("a");
+                            anchor.download = "".concat(finalFileName, ".").concat(getFileExtension(format));
+                            anchor.href = dataURL;
+                            anchor.dispatchEvent(new MouseEvent("click"));
+                            return [2 /*return*/, undefined];
+                        }
+                        return [2 /*return*/, new Promise(function (resolve) {
+                                tempCanvas_1.toBlob(function (blob) {
+                                    blob === null || blob === void 0 ? void 0 : blob.arrayBuffer().then(resolve);
+                                });
+                            })];
+                    case 10:
+                        shouldRestoreScale = onChangeScale && nextScale !== baseScale;
+                        if (!shouldRestoreScale) return [3 /*break*/, 12];
+                        onChangeScale(baseScale);
+                        return [4 /*yield*/, waitForPaint()];
+                    case 11:
+                        _q.sent();
+                        _q.label = 12;
+                    case 12:
+                        if (!(didScroll || shouldRestoreScale)) return [3 /*break*/, 14];
+                        scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo(initialScrollCoords, true);
+                        return [4 /*yield*/, waitForPaint()];
+                    case 13:
+                        _q.sent();
+                        _q.label = 14;
+                    case 14: return [7 /*endfinally*/];
+                    case 15: return [2 /*return*/];
+                }
+            });
+        }); };
+        return exportRangeAsync();
+    }, [
+        sheetId,
+        gridLineWidth,
+        cellBackgroundColor,
+        getCanvasLayers,
+        getCellOffsetFromCoords,
+        getSheetName,
+        getR1C1AddressFromSelection,
+        getScrollPosition,
+        getViewPort,
+        getColumnHeaderCanvasLayer,
+        getRowHeaderCanvasLayer,
+        getRowOffset,
+        getColumnOffset,
+        getSheetDimensions,
+        scrollTo,
+        scrollToCell,
+        scale,
+        onChangeScale,
+    ]));
+};
+exports.useExportRange = useExportRange;

package/dist/cjs/hooks/use-filter.d.ts

@@ -0,0 +1,46 @@
+import { type CellInterface, type CellPosition, type ScrollCoords } from "@rowsncolumns/grid";
+import type { ReactElement } from "react";
+import type { CanvasGridProps, SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { FilterBoxBaseProps } from "../components/filter-box";
+import type { CellFormat, FilterView, TableView } from "../types";
+export type UseFilterProps = {
+    scale?: number;
+    sheetId: number;
+    theme: SpreadsheetTheme;
+    getActualCellCoords(coords: CellInterface): CellInterface | undefined;
+    getScrollPosition(): ScrollCoords | undefined;
+    getCellOffsetFromCoords(coords: CellInterface): CellPosition | undefined;
+    getFormattedValue(sheetId: number, rowIndex: number, columnIndex: number): string | undefined;
+    /**
+     * Optional — when provided, the filter box auto-populates its
+     * "Filter by color" picker with distinct cell + font colors present
+     * in the column. Icons come from `conditionalFormatByCell` instead
+     * (CF overlays don't ride along on the effective format).
+     */
+    getEffectiveFormat?(sheetId: number, rowIndex: number, columnIndex: number): CellFormat | undefined | null;
+    /**
+     * Optional — keyed by `cellIdentifier(rowIndex, columnIndex)`. When
+     * provided, distinct CF iconSet/iconId triples present in the column
+     * power the "Filter by icon" picker. Pass the Map returned by
+     * `useConditionalFormatting`.
+     */
+    conditionalFormatByCell?: Map<string, CellFormat | undefined>;
+    getFilterComponent(props: FilterBoxBaseProps): ReactElement | null;
+    isFrozenRow(rowIndex: number): boolean;
+    isFrozenColumn(columnIndex: number): boolean;
+    isHiddenRowByFilter(rowIndex: number): boolean;
+    onSortTable: CanvasGridProps["onSortTable"];
+    onFilterTable: CanvasGridProps["onFilterTable"];
+    onInsertTableColumn: CanvasGridProps["onInsertTableColumn"];
+    onDeleteTableColumn: CanvasGridProps["onDeleteTableColumn"];
+    getFilterValues?: CanvasGridProps["getFilterValues"];
+    getFilterColors?: CanvasGridProps["getFilterColors"];
+    basicFilter?: FilterView | null;
+    tables?: TableView[] | null;
+};
+export declare const useFilter: ({ scale, sheetId, theme, getActualCellCoords, getScrollPosition, getCellOffsetFromCoords, getFormattedValue, getEffectiveFormat, conditionalFormatByCell, getFilterComponent, isFrozenRow, isFrozenColumn, isHiddenRowByFilter, onSortTable, onFilterTable, onInsertTableColumn, onDeleteTableColumn, getFilterValues, getFilterColors, basicFilter, tables, }: UseFilterProps) => {
+    showFilter: (cell: CellInterface, filterOrTable: FilterView | TableView) => void;
+    hideFilter: () => void;
+    filterComponent: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+};
+//# sourceMappingURL=use-filter.d.ts.map

package/dist/cjs/hooks/use-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filter.d.ts","sourceRoot":"","sources":["../../../hooks/use-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGlE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,aAAa,GAAG,SAAS,CAAC;IACtE,iBAAiB,IAAI,YAAY,GAAG,SAAS,CAAC;IAC9C,uBAAuB,CAAC,MAAM,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACzE,iBAAiB,CACf,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,MAAM,GAAG,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9D,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAAC;IACnE,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7C,mBAAmB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/C,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAG5D,eAAe,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IAIrD,eAAe,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IAIrD,WAAW,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;CAC7B,CAAC;AAQF,eAAO,MAAM,SAAS,GAAI,gWAsBvB,cAAc;uBAyBN,aAAa,iBAAiB,UAAU,GAAG,SAAS;;;CAgN9D,CAAC"}

package/dist/cjs/hooks/use-filter.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilter = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = require("react");
+var config_1 = require("../config");
+var use_column_color_icons_1 = require("./use-column-color-icons");
+// For sorting
+var collator = new Intl.Collator("en", {
+    numeric: true,
+    sensitivity: "base",
+});
+var useFilter = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var _g = _a.scale, scale = _g === void 0 ? 1 : _g, sheetId = _a.sheetId, theme = _a.theme, getActualCellCoords = _a.getActualCellCoords, getScrollPosition = _a.getScrollPosition, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getFormattedValue = _a.getFormattedValue, getEffectiveFormat = _a.getEffectiveFormat, conditionalFormatByCell = _a.conditionalFormatByCell, getFilterComponent = _a.getFilterComponent, isFrozenRow = _a.isFrozenRow, isFrozenColumn = _a.isFrozenColumn, isHiddenRowByFilter = _a.isHiddenRowByFilter, onSortTable = _a.onSortTable, onFilterTable = _a.onFilterTable, onInsertTableColumn = _a.onInsertTableColumn, onDeleteTableColumn = _a.onDeleteTableColumn, getFilterValues = _a.getFilterValues, getFilterColors = _a.getFilterColors, basicFilter = _a.basicFilter, tables = _a.tables;
+    var _h = tslib_1.__read((0, react_1.useState)(), 2), filterCell = _h[0], setFilterCell = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _j[0], setIsOpen = _j[1];
+    var _k = tslib_1.__read((0, react_1.useState)({ x: 0, y: 0 }), 2), cellPosition = _k[0], setCellPosition = _k[1];
+    var _l = tslib_1.__read((0, react_1.useState)(), 2), activeFilter = _l[0], setActiveFilter = _l[1];
+    // `activeFilter` is a snapshot from when the popup opened, but Auto apply
+    // rewrites the specs while it stays open — the values scan below must see
+    // the column's just-applied filter or it skips the rows that filter hid
+    // and the checklist collapses to only the displayed values. Re-resolve
+    // the live object by id on every render.
+    var currentFilter = (0, react_1.useMemo)(function () {
+        var _a;
+        if (!activeFilter) {
+            return activeFilter;
+        }
+        if (basicFilter && basicFilter.id === activeFilter.id) {
+            return basicFilter;
+        }
+        return ((_a = tables === null || tables === void 0 ? void 0 : tables.find(function (table) { return table.id === activeFilter.id; })) !== null && _a !== void 0 ? _a : activeFilter);
+    }, [activeFilter, basicFilter, tables]);
+    // Show filter
+    var showFilter = (0, react_1.useCallback)(function (cell, filterOrTable) {
+        var _a;
+        var coords = (_a = getActualCellCoords(cell)) !== null && _a !== void 0 ? _a : cell;
+        var scrollPosition = getScrollPosition();
+        var cellPosition = getCellOffsetFromCoords(coords);
+        // Stop if cell is not available
+        if ((0, utils_1.isNil)(cellPosition) || (0, utils_1.isNil)(scrollPosition)) {
+            return;
+        }
+        // Set filter cell
+        setFilterCell(coords);
+        // Set active filter
+        setActiveFilter(filterOrTable);
+        // Update cell position
+        var _b = cellPosition.x, x = _b === void 0 ? 0 : _b, _c = cellPosition.y, y = _c === void 0 ? 0 : _c, _d = cellPosition.height, height = _d === void 0 ? 0 : _d, _e = cellPosition.width, width = _e === void 0 ? 0 : _e;
+        var frozenRow = isFrozenRow(coords.rowIndex);
+        var frozenColumn = isFrozenColumn(coords.columnIndex);
+        var scrollX = frozenColumn ? 0 : scrollPosition.scrollLeft;
+        var scrollY = frozenRow ? 0 : scrollPosition.scrollTop;
+        setCellPosition({
+            x: x + width - config_1.FILTER_ICON_WIDTH * scale - scrollX,
+            y: y + height - scrollY,
+        });
+        // Show filter
+        setIsOpen(true);
+    }, [
+        getActualCellCoords,
+        getScrollPosition,
+        getCellOffsetFromCoords,
+        isFrozenRow,
+        isFrozenColumn,
+        scale,
+    ]);
+    // Hide filter
+    var hideFilter = (0, react_1.useCallback)(function () {
+        setIsOpen(false);
+        setActiveFilter(undefined);
+    }, []);
+    // Update values
+    var values = (0, react_1.useMemo)(function () {
+        if (!currentFilter || !filterCell) {
+            return [];
+        }
+        // When the host computes the column's distinct
+        // values off-thread (windowed sheets), use them instead of scanning every row via
+        // getFormattedValue — that scan returns blanks for unloaded rows AND notes a
+        // window miss per row, flooding the tile-fetcher until the grid blanks.
+        // `undefined` = host not driving (non-windowed) → fall through.
+        if (getFilterValues) {
+            var hostValues = getFilterValues(sheetId, filterCell.columnIndex, currentFilter.range);
+            if (hostValues !== undefined) {
+                return hostValues;
+            }
+        }
+        var values = [];
+        var range = currentFilter.range, filterSpecs = currentFilter.filterSpecs;
+        var dimensionIndex = filterCell.columnIndex - range.startColumnIndex;
+        var startRow = range.startRowIndex + 1;
+        var columnHasActiveFilter = filterSpecs === null || filterSpecs === void 0 ? void 0 : filterSpecs.find(function (spec) { return spec.columnIndex === dimensionIndex; });
+        var hasBlank = false;
+        for (var i = startRow; i <= range.endRowIndex; i++) {
+            if (!columnHasActiveFilter && isHiddenRowByFilter(i)) {
+                continue;
+            }
+            var value = getFormattedValue(sheetId, i, filterCell.columnIndex);
+            if (value)
+                values.push(value);
+            else
+                hasBlank = true;
+        }
+        // Only surface the "(Blanks)" entry when the column actually contains a blank cell.
+        if (hasBlank)
+            values.push(config_1.BLANK_LABEL);
+        // Unique
+        return tslib_1.__spreadArray([], tslib_1.__read(new Set(values)), false).sort(collator.compare);
+    }, [
+        currentFilter,
+        sheetId,
+        filterCell,
+        getFormattedValue,
+        isHiddenRowByFilter,
+        getFilterValues,
+    ]);
+    // CF-painted fills / font colors never ride on the effective format, so
+    // hand the state layer a reader for the rendered CF overlay — the same
+    // Map the "Filter by color" picker sources its swatches from. Without
+    // it, picking a CF-painted swatch matches no row and hides everything.
+    var onFilterTableWithConditionalFormat = (0, react_1.useCallback)(function (filterSheetId, filter, columnIndex, conditionType, conditionValue, visibleValues, extras) {
+        var getCellConditionalFormat = conditionalFormatByCell
+            ? function (cfSheetId, rowIndex, cfColumnIndex) {
+                return cfSheetId === sheetId
+                    ? conditionalFormatByCell.get((0, grid_1.cellIdentifier)(rowIndex, cfColumnIndex))
+                    : undefined;
+            }
+            : undefined;
+        return onFilterTable === null || onFilterTable === void 0 ? void 0 : onFilterTable(filterSheetId, filter, columnIndex, conditionType, conditionValue, visibleValues, getCellConditionalFormat
+            ? tslib_1.__assign(tslib_1.__assign({}, extras), { getCellConditionalFormat: getCellConditionalFormat }) : extras);
+    }, [onFilterTable, conditionalFormatByCell, sheetId]);
+    // Distinct colors / icons present in the filter column. Powers the
+    // FilterBox's "Filter by color" picker. Only computed when an
+    // effective-format reader is wired in. Shared with the custom Sort
+    // dialog via `useColumnColorIcons`.
+    // Host-computed swatches win when the hook is provided (one engine-side column scan —
+    // the windowed path); the JS per-row scan below stays the default for JS-graph hosts.
+    var hostColorIcons = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        if (!getFilterColors || !currentFilter || !filterCell || !isOpen) {
+            return undefined;
+        }
+        return getFilterColors(sheetId, filterCell.columnIndex, {
+            startRowIndex: ((_a = currentFilter.range.startRowIndex) !== null && _a !== void 0 ? _a : 0) + 1,
+            endRowIndex: (_b = currentFilter.range.endRowIndex) !== null && _b !== void 0 ? _b : -1,
+        });
+    }, [getFilterColors, currentFilter, filterCell, isOpen, sheetId]);
+    var jsColorIcons = (0, use_column_color_icons_1.useColumnColorIcons)({
+        theme: theme,
+        // The color/icon picker also scans the whole
+        // column via getEffectiveFormat — skip it when the host drives filter values
+        // (windowed) to avoid the same per-row flood, or when the host computes the
+        // swatches itself (getFilterColors).
+        enabled: !!currentFilter && !!filterCell && !getFilterValues && !getFilterColors,
+        sheetId: sheetId,
+        columnIndex: filterCell === null || filterCell === void 0 ? void 0 : filterCell.columnIndex,
+        startRowIndex: ((_b = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.range.startRowIndex) !== null && _b !== void 0 ? _b : 0) + 1,
+        endRowIndex: (_c = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.range.endRowIndex) !== null && _c !== void 0 ? _c : -1,
+        getEffectiveFormat: getEffectiveFormat,
+        conditionalFormatByCell: conditionalFormatByCell,
+    });
+    var availableCellColors = (_d = hostColorIcons === null || hostColorIcons === void 0 ? void 0 : hostColorIcons.availableCellColors) !== null && _d !== void 0 ? _d : jsColorIcons.availableCellColors;
+    var availableFontColors = (_e = hostColorIcons === null || hostColorIcons === void 0 ? void 0 : hostColorIcons.availableFontColors) !== null && _e !== void 0 ? _e : jsColorIcons.availableFontColors;
+    var availableIcons = (_f = hostColorIcons === null || hostColorIcons === void 0 ? void 0 : hostColorIcons.availableIcons) !== null && _f !== void 0 ? _f : jsColorIcons.availableIcons;
+    // Final component
+    // Filter is displayed in a popover
+    // Keep it mounted
+    var filterComponent = filterCell && currentFilter
+        ? getFilterComponent(tslib_1.__assign(tslib_1.__assign({}, cellPosition), { isOpen: isOpen, dimensionIndex: (filterCell === null || filterCell === void 0 ? void 0 : filterCell.columnIndex) - currentFilter.range.startColumnIndex, onOpenChange: setIsOpen, filter: currentFilter, onSort: onSortTable, onFilter: onFilterTableWithConditionalFormat, onInsertTableColumn: onInsertTableColumn, onDeleteTableColumn: onDeleteTableColumn, values: values, availableCellColors: availableCellColors, availableFontColors: availableFontColors, availableIcons: availableIcons }))
+        : null;
+    return (0, react_1.useMemo)(function () { return ({
+        showFilter: showFilter,
+        hideFilter: hideFilter,
+        filterComponent: filterComponent,
+    }); }, [showFilter, hideFilter, filterComponent]);
+};
+exports.useFilter = useFilter;

package/dist/cjs/hooks/use-flash.d.ts

@@ -0,0 +1,18 @@
+import type { SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { Color, SheetRange } from "../types";
+type UseFlashProps = {
+    theme: SpreadsheetTheme;
+};
+export declare const useFlash: ({ theme }: UseFlashProps) => {
+    flash: (range: SheetRange, color?: Color, duration?: number) => void;
+    flashingBorders: (Omit<import("../components/canvas-grid/typings").RangeBorderStyle, "range"> & {
+        range: SheetRange;
+    } & {
+        startTime?: number;
+    })[];
+    onFlashEnd: (id: string) => void;
+    mark: (ranges: SheetRange[], borderColor?: Color, borderWidth?: number) => void;
+    unmark: () => void;
+};
+export {};
+//# sourceMappingURL=use-flash.d.ts.map

package/dist/cjs/hooks/use-flash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-flash.d.ts","sourceRoot":"","sources":["../../../hooks/use-flash.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,WAAW,aAAa;mBAOrC,UAAU,UAAS,KAAK;;;;oBALO,MAAM;;qBAqCX,MAAM;mBAO9B,UAAU,EAAE,gBACP,KAAK,gBACL,MAAM;;CAiCxB,CAAC"}

package/dist/cjs/hooks/use-flash.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlash = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = require("react");
+var themes_1 = require("../themes");
+var useFlash = function (_a) {
+    var theme = _a.theme;
+    var _b = tslib_1.__read((0, react_1.useState)([]), 2), flashingBorders = _b[0], setFlashingBorders = _b[1];
+    // Flash a cell range
+    var flash = (0, react_1.useCallback)(function (range, color, duration) {
+        if (color === void 0) { color = "#ffcc00"; }
+        if (duration === void 0) { duration = 1500; }
+        var rgbaStr = (0, themes_1.getStringifiedColor)(color, theme);
+        var rgba = (0, utils_1.normalizeColor)(rgbaStr);
+        if (!rgba) {
+            console.warn("Cannot parse color to a rgba value", color);
+            return;
+        }
+        // Flash should always contain alpha channel
+        if (!(rgba === null || rgba === void 0 ? void 0 : rgba.a) || (rgba === null || rgba === void 0 ? void 0 : rgba.a) === 0 || (rgba === null || rgba === void 0 ? void 0 : rgba.a) === 1) {
+            rgba.a = 0.5;
+        }
+        var rgbaString = "rgba(".concat(rgba.r, ",").concat(rgba.g, ",").concat(rgba.b, ",").concat(rgba.a, ")");
+        setFlashingBorders(function (prev) {
+            return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), [
+                {
+                    id: (0, utils_1.uuid)(),
+                    range: range,
+                    type: "flash",
+                    style: {
+                        fill: rgbaString,
+                    },
+                    startTime: new Date().getTime(),
+                    duration: duration,
+                },
+            ], false);
+        });
+    }, [theme]);
+    // After flash callback
+    var onFlashEnd = (0, react_1.useCallback)(function (id) {
+        setFlashingBorders(function (prev) { return prev.filter(function (item) { return item.id !== id; }); });
+    }, []);
+    // Highlight
+    var mark = (0, react_1.useCallback)(function (ranges, borderColor, borderWidth) {
+        if (borderColor === void 0) { borderColor = { theme: 9 }; }
+        if (borderWidth === void 0) { borderWidth = 2; }
+        var markedRanges = ranges.map(function (range) {
+            return {
+                id: (0, utils_1.uuid)(),
+                range: range,
+                type: "mark",
+                style: {
+                    stroke: (0, themes_1.getStringifiedColor)(borderColor, theme),
+                    strokeWidth: borderWidth,
+                    strokeStyle: "solid",
+                },
+            };
+        });
+        setFlashingBorders(function (prev) {
+            return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), tslib_1.__read(markedRanges), false);
+        });
+    }, [theme]);
+    // Remove highlight
+    var unmark = (0, react_1.useCallback)(function () {
+        setFlashingBorders(function (prev) { return prev.filter(function (item) { return item.type !== "mark"; }); });
+    }, []);
+    return {
+        flash: flash,
+        flashingBorders: flashingBorders,
+        onFlashEnd: onFlashEnd,
+        mark: mark,
+        unmark: unmark,
+    };
+};
+exports.useFlash = useFlash;

package/dist/cjs/hooks/use-fonts.d.ts

@@ -0,0 +1,8 @@
+import { FontLoader } from "../api/font-loader";
+export type UseFontResults = {
+    isFontActive: boolean;
+};
+export declare const getWebFont: () => FontLoader | undefined;
+export declare const loadWebFont: (fonts: string[]) => Promise<void | undefined>;
+export declare const useFonts: (fonts?: string) => void;
+//# sourceMappingURL=use-fonts.d.ts.map

package/dist/cjs/hooks/use-fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fonts.d.ts","sourceRoot":"","sources":["../../../hooks/use-fonts.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,UAAU,8BAAmD,CAAC;AAE3E,eAAO,MAAM,WAAW,GAAU,OAAO,MAAM,EAAE,8BAEhD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,QAAQ,MAAM,SAMtC,CAAC"}

package/dist/cjs/hooks/use-fonts.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFonts = exports.loadWebFont = exports.getWebFont = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var react_1 = require("react");
+var font_loader_1 = require("../api/font-loader");
+var getWebFont = function () { return (grid_1.canUseDOM ? new font_loader_1.FontLoader() : undefined); };
+exports.getWebFont = getWebFont;
+var loadWebFont = function (fonts) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var _a;
+    return tslib_1.__generator(this, function (_b) {
+        return [2 /*return*/, (_a = (0, exports.getWebFont)()) === null || _a === void 0 ? void 0 : _a.loadFonts(fonts)];
+    });
+}); };
+exports.loadWebFont = loadWebFont;
+var useFonts = function (fonts) {
+    (0, react_1.useEffect)(function () {
+        var defaultFonts = ["Inconsolata:400"];
+        var finalFonts = fonts === null || fonts === void 0 ? void 0 : fonts.split(",").map(function (value) { return String(value).trim(); });
+        (0, exports.loadWebFont)(defaultFonts.concat(finalFonts ? finalFonts : []));
+    }, [fonts]);
+};
+exports.useFonts = useFonts;