@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/hooks/use-cell-renderer.js

@@ -0,0 +1,361 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCellRenderer = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var colors_1 = require("../api/colors");
+var validation_1 = require("../api/validation");
+var cell_background_1 = require("../components/cell/cell-background");
+var cell_diff_1 = require("../components/cell-diff");
+var cell_overlay_1 = require("../components/cell-overlay");
+var config_1 = require("../config");
+var helpers_1 = require("../helpers");
+var merged_cell_borders_1 = require("../helpers/merged-cell-borders");
+var themes_1 = require("../themes");
+var show_zeros_1 = require("./show-zeros");
+var use_cell_diff_highlight_1 = require("./use-cell-diff-highlight");
+var useCellRenderer = function (_a) {
+    var sheetId = _a.sheetId, scale = _a.scale, showGridLines = _a.showGridLines, showZeros = _a.showZeros, isRowHeader = _a.isRowHeader, isColumnHeader = _a.isColumnHeader, selectedRows = _a.selectedRows, selectedColumns = _a.selectedColumns, selectedRowHeaders = _a.selectedRowHeaders, selectedColumnHeaders = _a.selectedColumnHeaders, cellBackgroundColor = _a.cellBackgroundColor, headerBorderColor = _a.headerBorderColor, headerBackgroundColor = _a.headerBackgroundColor, headerColor = _a.headerColor, headerActiveBackgroundColor = _a.headerActiveBackgroundColor, headerSelectedBackgroundColor = _a.headerSelectedBackgroundColor, headerSelectedColor = _a.headerSelectedColor, headerTableBackgroundColor = _a.headerTableBackgroundColor, headerTableActiveBackgroundColor = _a.headerTableActiveBackgroundColor, headerTableSelectedBackgroundColor = _a.headerTableSelectedBackgroundColor, chipBackgroundColor = _a.chipBackgroundColor, filterIconColor = _a.filterIconColor, showCalculatedColumnIcon = _a.showCalculatedColumnIcon, enableTextOverflow = _a.enableTextOverflow, showHeaders = _a.showHeaders, theme = _a.theme, getDefaultHorizontalAlignment = _a.getDefaultHorizontalAlignment, isTableFilterVisible = _a.isTableFilterVisible, columnContainsTable = _a.columnContainsTable, rowsContainsTable = _a.rowsContainsTable, canOverflowToNextCell = _a.canOverflowToNextCell, getTableHeaderSortOrder = _a.getTableHeaderSortOrder, getDataValidation = _a.getDataValidation, getErrorValue = _a.getErrorValue, getEffectiveValue = _a.getEffectiveValue, getFormattedValue = _a.getFormattedValue, getNote = _a.getNote, getComment = _a.getComment, getEffectiveCellFormat = _a.getEffectiveCellFormat, getCellBounds = _a.getCellBounds, getCellImageUrl = _a.getCellImageUrl, getCellMetaType = _a.getCellMetaType, getRowHeaderText = _a.getRowHeaderText, getColumnHeaderText = _a.getColumnHeaderText, getMaximumOverflowTextWidth = _a.getMaximumOverflowTextWidth, getTextDimension = _a.getTextDimension, getCellGroupingInfo = _a.getCellGroupingInfo, getTextFormatRuns = _a.getTextFormatRuns, onRequestEdit = _a.onRequestEdit, onFilterClick = _a.onFilterClick, onCheckboxClick = _a.onCheckboxClick, isTableHeader = _a.isTableHeader, isCalculatedColumnHeader = _a.isCalculatedColumnHeader, isTableHeaderFilterActive = _a.isTableHeaderFilterActive, HeaderCell = _a.HeaderCell, Cell = _a.Cell, StructuredResult = _a.StructuredResult, gridLineWidth = _a.gridLineWidth, showNotes = _a.showNotes, showComments = _a.showComments, defaultFontSizePoint = _a.defaultFontSizePoint, readonly = _a.readonly, onExpandCollapse = _a.onExpandCollapse, onOverflow = _a.onOverflow, _b = _a.isComparing, isComparing = _b === void 0 ? false : _b, getCellDiff = _a.getCellDiff;
+    // Version comparison diff highlighting - only active when isComparing is true
+    var _c = (0, use_cell_diff_highlight_1.useCellDiffHighlight)(isComparing ? getCellDiff : undefined), mergeCellFormatWithDiff = _c.mergeCellFormatWithDiff, getDiffHighlight = _c.getDiffHighlight;
+    // Edit
+    var onRequestEditCell = (0, react_1.useCallback)(function (cell) { return onRequestEdit === null || onRequestEdit === void 0 ? void 0 : onRequestEdit(sheetId, cell); }, [sheetId, onRequestEdit]);
+    var cellRenderer = (0, react_1.useCallback)(function (props) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var rowIndex = props.rowIndex, columnIndex = props.columnIndex, isMergedCell = props.isMergedCell;
+        // Body cell
+        var rawFormattedValue = getFormattedValue(sheetId, rowIndex, columnIndex);
+        // Formatting
+        var effectiveCellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        // Checkbox for boolean values (Checkbox icon)
+        var effectiveValue = getEffectiveValue(sheetId, rowIndex, columnIndex);
+        var formattedValue = (0, show_zeros_1.applyShowZeros)(rawFormattedValue, effectiveValue, showZeros);
+        var dataValidation = getDataValidation(sheetId, rowIndex, columnIndex);
+        var validationType = (_a = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation.condition) === null || _a === void 0 ? void 0 : _a.type;
+        var horizontalAlignment = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.horizontalAlignment;
+        // Expandable
+        var _k = tslib_1.__read(getCellGroupingInfo(sheetId, rowIndex, columnIndex), 2), expandable = _k[0], expanded = _k[1];
+        // Display style
+        var showChip = getCellMetaType(sheetId, rowIndex, columnIndex) === "people";
+        // Image url
+        var imageUrl = getCellImageUrl(sheetId, rowIndex, columnIndex);
+        // Show dropdown arrow
+        var showArrow = (0, validation_1.showValidationDropdownArrow)(dataValidation);
+        // Show filter icon for basicFilter and tables
+        var showFilter = isTableFilterVisible(rowIndex, columnIndex);
+        // Has notes
+        var showNote = showNotes
+            ? !!getNote(sheetId, rowIndex, columnIndex)
+            : false;
+        // Has comment
+        var showComment = showComments
+            ? !!getComment(sheetId, rowIndex, columnIndex)
+            : false;
+        // Calculated column
+        var isCalculatedColumn = isTableHeader(rowIndex, columnIndex) &&
+            isCalculatedColumnHeader(rowIndex, columnIndex);
+        // Cell overflow
+        var wrapStrategy = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.wrapStrategy;
+        var shouldWrap = wrapStrategy === "wrap";
+        var isWrapEnabled = (wrapStrategy !== null && wrapStrategy !== void 0 ? wrapStrategy : "overflow") === "overflow";
+        // Normalize display value for both rendering and overflow calculation
+        var displayFormattedValue = (0, helpers_1.normalizeDisplayText)(formattedValue, shouldWrap);
+        var shouldRecalcTextWidth = isWrapEnabled || wrapStrategy === "clip";
+        // Indent
+        var isRightAligned = horizontalAlignment === "right";
+        // Only strings which are right aligned can overflow to neighbours
+        var isStringValue = !(0, utils_1.isNil)((_b = effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.sv) !== null && _b !== void 0 ? _b : effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.stringValue);
+        var overflowRight = isRightAligned && isStringValue;
+        // shrinkToFit and rotated text both keep the text inside the cell,
+        // so they must not spill into neighbours regardless of wrapStrategy.
+        var numericRotation = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.textRotation;
+        var hasNumericRotation = typeof numericRotation === "number" &&
+            Number.isFinite(numericRotation) &&
+            numericRotation !== 0;
+        var containsTextInside = !!(effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.shrinkToFit) || hasNumericRotation;
+        var shouldOverflow = enableTextOverflow &&
+            isWrapEnabled &&
+            !dataValidation &&
+            !showFilter &&
+            !isCalculatedColumn &&
+            !showArrow &&
+            !expandable &&
+            !containsTextInside &&
+            // Following Excel and Google sheets behavior
+            // Text does not overflow merged cells
+            !isMergedCell &&
+            (isRightAligned ? isStringValue : true) &&
+            canOverflowToNextCell({
+                rowIndex: rowIndex,
+                columnIndex: columnIndex + (isRightAligned ? -1 : 1),
+            });
+        var _l = tslib_1.__read(shouldOverflow
+            ? getMaximumOverflowTextWidth(displayFormattedValue, sheetId, rowIndex, columnIndex, 
+            // Investigate why isHiddenCell and the instance from Sheet-Grid differs
+            canOverflowToNextCell, effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.textFormat, shouldWrap, isRightAligned ? grid_1.Direction.Left : grid_1.Direction.Right)
+            : [
+                props.width,
+                config_1.DEFAULT_ARRAY,
+            ], 2), cellWidth = _l[0], columnSpans = _l[1];
+        if (shouldOverflow && cellWidth > props.width) {
+            // Report the full visual width as the required buffer
+            // This ensures that even if we scroll to the far right of the overflow,
+            // the grid looks back far enough to render the origin cell.
+            onOverflow === null || onOverflow === void 0 ? void 0 : onOverflow(rowIndex, columnIndex, cellWidth);
+        }
+        else {
+            // Reset overflow for this cell if it no longer overflows
+            onOverflow === null || onOverflow === void 0 ? void 0 : onOverflow(rowIndex, columnIndex, 0);
+        }
+        // shrinkToFit needs the natural text width to compare against the
+        // cell's available width; rotated text uses it to size the (unrotated)
+        // text box that gets pivoted around the cell edge. Without this, the
+        // Konva Text renders with width 0 and the text disappears.
+        var textWidth = (overflowRight && shouldRecalcTextWidth) || containsTextInside
+            ? getTextDimension(sheetId, rowIndex, columnIndex, displayFormattedValue).width
+            : 0;
+        var enableOverflow = shouldOverflow && cellWidth > props.width;
+        // Is Filter active
+        var isFilterActive = showFilter
+            ? isTableHeaderFilterActive(rowIndex, columnIndex)
+            : false;
+        // Is Sort active
+        var sortOrder = showFilter
+            ? getTableHeaderSortOrder(rowIndex, columnIndex)
+            : undefined;
+        // Text format
+        var textFormatRuns = getTextFormatRuns === null || getTextFormatRuns === void 0 ? void 0 : getTextFormatRuns(sheetId, rowIndex, columnIndex);
+        // Data validation errors (Invalid icon)
+        var errorValue = getErrorValue(sheetId, rowIndex, columnIndex);
+        var isInvalid = (errorValue === null || errorValue === void 0 ? void 0 : errorValue.type) === "Invalid";
+        var showCheckbox = !errorValue && validationType === "BOOLEAN";
+        var isChecked = ((_c = effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.bv) !== null && _c !== void 0 ? _c : effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.boolValue) === true;
+        // Error from formula calculation (Error icon)
+        var isError = (errorValue === null || errorValue === void 0 ? void 0 : errorValue.type) === "Error";
+        // Version comparison diff highlighting
+        var diffHighlight = isComparing
+            ? getDiffHighlight(sheetId, rowIndex, columnIndex)
+            : null;
+        // If there's a diff, render CellDiff instead of Cell
+        if (isComparing &&
+            diffHighlight &&
+            diffHighlight.diffState !== "unchanged") {
+            // Get text color from format or use default
+            var textColor = ((_d = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.textFormat) === null || _d === void 0 ? void 0 : _d.color)
+                ? (0, themes_1.getStringifiedColor)(effectiveCellFormat.textFormat.color, theme)
+                : undefined;
+            // Measure old value width for proper spacing in modified cells
+            // Use the old format for accurate measurement (bold text is wider than normal)
+            var oldValueWidth = diffHighlight.oldFormattedValue
+                ? getTextDimension(sheetId, rowIndex, columnIndex, diffHighlight.oldFormattedValue, (_f = (_e = diffHighlight.oldFormat) === null || _e === void 0 ? void 0 : _e.textFormat) !== null && _f !== void 0 ? _f : undefined).width
+                : undefined;
+            return (react_1.default.createElement(cell_diff_1.CellDiff, tslib_1.__assign({ diffHighlight: diffHighlight, value: formattedValue, defaultColor: textColor, scale: scale, fontSizePt: defaultFontSizePoint, fontFamily: (_g = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.textFormat) === null || _g === void 0 ? void 0 : _g.fontFamily, bold: (_h = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.textFormat) === null || _h === void 0 ? void 0 : _h.bold, italic: (_j = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.textFormat) === null || _j === void 0 ? void 0 : _j.italic, horizontalAlignment: effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.horizontalAlignment, verticalAlignment: effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.verticalAlignment, oldValueWidth: oldValueWidth }, props)));
+        }
+        return (react_1.default.createElement(Cell, tslib_1.__assign({ value: displayFormattedValue, cellFormat: effectiveCellFormat, scale: scale, defaultBackgroundColor: cellBackgroundColor, onRequestEdit: onRequestEditCell, showArrow: showArrow, showFilter: showFilter, isCalculatedColumn: isCalculatedColumn, showCheckbox: showCheckbox, showChip: showChip, chipBackgroundColor: chipBackgroundColor, filterIconColor: filterIconColor, onFilterClick: onFilterClick, onCheckboxClick: onCheckboxClick, isChecked: isChecked, isInvalid: isInvalid, isError: isError, imageUrl: imageUrl, isFilterActive: isFilterActive, enableOverflow: enableOverflow, cellWidth: cellWidth, showNote: showNote, showComment: showComment, showCalculatedColumnIcon: showCalculatedColumnIcon, theme: theme, expandable: expandable, expanded: expanded, textWidth: textWidth, columnSpans: columnSpans, overflowRight: overflowRight, showGridLines: showGridLines, structuredValue: effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.structuredValue, defaultFontSizePoint: defaultFontSizePoint, sortOrder: sortOrder, StructuredResult: StructuredResult, textFormatRuns: textFormatRuns, readonly: readonly, onExpandCollapse: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return onExpandCollapse === null || onExpandCollapse === void 0 ? void 0 : onExpandCollapse.apply(void 0, tslib_1.__spreadArray([sheetId], tslib_1.__read(args), false));
+            }, getDefaultHorizontalAlignment: getDefaultHorizontalAlignment, sheetId: sheetId }, props)));
+    }, [
+        isComparing,
+        sheetId,
+        scale,
+        showGridLines,
+        theme,
+        showNotes,
+        showComments,
+        defaultFontSizePoint,
+        cellBackgroundColor,
+        chipBackgroundColor,
+        filterIconColor,
+        showCalculatedColumnIcon,
+        enableTextOverflow,
+        getTextFormatRuns,
+        getTableHeaderSortOrder,
+        isTableHeader,
+        isTableHeaderFilterActive,
+        isCalculatedColumnHeader,
+        isTableFilterVisible,
+        getDataValidation,
+        getErrorValue,
+        getEffectiveValue,
+        getFormattedValue,
+        getEffectiveCellFormat,
+        getCellImageUrl,
+        getCellMetaType,
+        getNote,
+        getComment,
+        getMaximumOverflowTextWidth,
+        getCellGroupingInfo,
+        onCheckboxClick,
+        onFilterClick,
+        canOverflowToNextCell,
+        getTextDimension,
+        onRequestEditCell,
+        Cell,
+        StructuredResult,
+        readonly,
+        onExpandCollapse,
+        onOverflow,
+        mergeCellFormatWithDiff,
+        getDiffHighlight,
+        getDefaultHorizontalAlignment,
+    ]);
+    var headerCellRenderer = (0, react_1.useCallback)(function (props) {
+        if (!showHeaders) {
+            return null;
+        }
+        var rowIndex = props.rowIndex, columnIndex = props.columnIndex;
+        var rowHeader = isRowHeader(columnIndex);
+        var colHeader = isColumnHeader(rowIndex);
+        /**
+         * Header Cell Renderer
+         */
+        if (rowHeader || colHeader) {
+            var isCorner = rowHeader === colHeader;
+            var isActive = colHeader
+                ? selectedColumns[columnIndex] || selectedColumns["all"]
+                : selectedRows[rowIndex] || selectedRows["all"];
+            var isEntireRowColumnSelected = colHeader
+                ? selectedColumnHeaders[columnIndex]
+                : selectedRowHeaders[rowIndex];
+            var containsTable = colHeader
+                ? columnContainsTable(columnIndex)
+                : rowsContainsTable(rowIndex);
+            var value = isCorner
+                ? ""
+                : colHeader
+                    ? getColumnHeaderText(columnIndex)
+                    : getRowHeaderText(rowIndex);
+            var fill = (0, colors_1.getHeaderFill)(isCorner, isEntireRowColumnSelected, isActive, containsTable, headerBackgroundColor, headerActiveBackgroundColor, headerSelectedBackgroundColor, headerTableBackgroundColor, headerTableActiveBackgroundColor, headerTableSelectedBackgroundColor);
+            var color = isEntireRowColumnSelected
+                ? headerSelectedColor
+                : headerColor;
+            return (react_1.default.createElement(HeaderCell, tslib_1.__assign({ backgroundColor: fill, color: color, stroke: headerBorderColor, scale: scale, value: value, strokeWidth: gridLineWidth }, props)));
+        }
+    }, [
+        scale,
+        showHeaders,
+        isRowHeader,
+        isColumnHeader,
+        selectedRows,
+        selectedColumns,
+        selectedRowHeaders,
+        selectedColumnHeaders,
+        headerBorderColor,
+        headerBackgroundColor,
+        headerColor,
+        headerActiveBackgroundColor,
+        headerSelectedBackgroundColor,
+        headerSelectedColor,
+        headerTableBackgroundColor,
+        headerTableActiveBackgroundColor,
+        headerTableSelectedBackgroundColor,
+        HeaderCell,
+        columnContainsTable,
+        rowsContainsTable,
+        getRowHeaderText,
+        getColumnHeaderText,
+        gridLineWidth,
+    ]);
+    var cellOverlayRenderer = (0, react_1.useCallback)(function (props) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+        var rowIndex = props.rowIndex, columnIndex = props.columnIndex, isMergedCell = props.isMergedCell;
+        var cellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        var borders = (0, merged_cell_borders_1.getCellBordersForRendering)(sheetId, { rowIndex: rowIndex, columnIndex: columnIndex }, isMergedCell, getCellBounds, getEffectiveCellFormat);
+        var finalCellBackgroundColor = (0, themes_1.getStringifiedColor)((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.backgroundColor) !== null && _a !== void 0 ? _a : cellBackgroundColor, theme);
+        /* Border colors */
+        var strokeTopColor = (0, themes_1.getStringifiedColor)((_b = borders === null || borders === void 0 ? void 0 : borders.top) === null || _b === void 0 ? void 0 : _b.color, theme);
+        var strokeBottomColor = (0, themes_1.getStringifiedColor)((_c = borders === null || borders === void 0 ? void 0 : borders.bottom) === null || _c === void 0 ? void 0 : _c.color, theme);
+        var strokeLeftColor = (0, themes_1.getStringifiedColor)((_d = borders === null || borders === void 0 ? void 0 : borders.left) === null || _d === void 0 ? void 0 : _d.color, theme);
+        var strokeRightColor = (0, themes_1.getStringifiedColor)((_e = borders === null || borders === void 0 ? void 0 : borders.right) === null || _e === void 0 ? void 0 : _e.color, theme);
+        var strokeDiagonalUpColor = (0, themes_1.getStringifiedColor)((_f = borders === null || borders === void 0 ? void 0 : borders.diagonalUp) === null || _f === void 0 ? void 0 : _f.color, theme);
+        var strokeDiagonalDownColor = (0, themes_1.getStringifiedColor)((_g = borders === null || borders === void 0 ? void 0 : borders.diagonalDown) === null || _g === void 0 ? void 0 : _g.color, theme);
+        /* Border style */
+        var strokeTopStyle = (_h = borders === null || borders === void 0 ? void 0 : borders.top) === null || _h === void 0 ? void 0 : _h.style;
+        var strokeBottomStyle = (_j = borders === null || borders === void 0 ? void 0 : borders.bottom) === null || _j === void 0 ? void 0 : _j.style;
+        var strokeLeftStyle = (_k = borders === null || borders === void 0 ? void 0 : borders.left) === null || _k === void 0 ? void 0 : _k.style;
+        var strokeRightStyle = (_l = borders === null || borders === void 0 ? void 0 : borders.right) === null || _l === void 0 ? void 0 : _l.style;
+        var strokeDiagonalUpStyle = (_m = borders === null || borders === void 0 ? void 0 : borders.diagonalUp) === null || _m === void 0 ? void 0 : _m.style;
+        var strokeDiagonalDownStyle = (_o = borders === null || borders === void 0 ? void 0 : borders.diagonalDown) === null || _o === void 0 ? void 0 : _o.style;
+        /* Border width */
+        var strokeTopWidth = (strokeTopStyle === "double" ? 3 : (_q = (_p = borders === null || borders === void 0 ? void 0 : borders.top) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : 0) * scale;
+        var strokeBottomWidth = (strokeBottomStyle === "double" ? 3 : (_s = (_r = borders === null || borders === void 0 ? void 0 : borders.bottom) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : 0) *
+            scale;
+        var strokeLeftWidth = (strokeLeftStyle === "double" ? 3 : (_u = (_t = borders === null || borders === void 0 ? void 0 : borders.left) === null || _t === void 0 ? void 0 : _t.width) !== null && _u !== void 0 ? _u : 0) * scale;
+        var strokeRightWidth = (strokeRightStyle === "double" ? 3 : (_w = (_v = borders === null || borders === void 0 ? void 0 : borders.right) === null || _v === void 0 ? void 0 : _v.width) !== null && _w !== void 0 ? _w : 0) *
+            scale;
+        var strokeDiagonalUpWidth = (strokeDiagonalUpStyle === "double"
+            ? 3
+            : (_y = (_x = borders === null || borders === void 0 ? void 0 : borders.diagonalUp) === null || _x === void 0 ? void 0 : _x.width) !== null && _y !== void 0 ? _y : 0) * scale;
+        var strokeDiagonalDownWidth = (strokeDiagonalDownStyle === "double"
+            ? 3
+            : (_0 = (_z = borders === null || borders === void 0 ? void 0 : borders.diagonalDown) === null || _z === void 0 ? void 0 : _z.width) !== null && _0 !== void 0 ? _0 : 0) * scale;
+        // Double inset
+        var strokeDoubleInsetWidth = 1 * scale;
+        /* Border style */
+        var strokeTopDash = (0, helpers_1.convertBorderStyleToDashArray)((_1 = borders === null || borders === void 0 ? void 0 : borders.top) === null || _1 === void 0 ? void 0 : _1.style);
+        var strokeBottomDash = (0, helpers_1.convertBorderStyleToDashArray)((_2 = borders === null || borders === void 0 ? void 0 : borders.bottom) === null || _2 === void 0 ? void 0 : _2.style);
+        var strokeLeftDash = (0, helpers_1.convertBorderStyleToDashArray)((_3 = borders === null || borders === void 0 ? void 0 : borders.left) === null || _3 === void 0 ? void 0 : _3.style);
+        var strokeRightDash = (0, helpers_1.convertBorderStyleToDashArray)((_4 = borders === null || borders === void 0 ? void 0 : borders.right) === null || _4 === void 0 ? void 0 : _4.style);
+        var strokeDiagonalUpDash = (0, helpers_1.convertBorderStyleToDashArray)((_5 = borders === null || borders === void 0 ? void 0 : borders.diagonalUp) === null || _5 === void 0 ? void 0 : _5.style);
+        var strokeDiagonalDownDash = (0, helpers_1.convertBorderStyleToDashArray)((_6 = borders === null || borders === void 0 ? void 0 : borders.diagonalDown) === null || _6 === void 0 ? void 0 : _6.style);
+        return (0, cell_overlay_1.CellOverlayRenderer)(tslib_1.__assign(tslib_1.__assign({}, props), { strokeDoubleInsetWidth: strokeDoubleInsetWidth, strokeTopColor: strokeTopColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeRightColor: strokeRightColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeTopWidth: strokeTopWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeRightWidth: strokeRightWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, strokeTopDash: strokeTopDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeRightDash: strokeRightDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopStyle: strokeTopStyle, strokeBottomStyle: strokeBottomStyle, strokeLeftStyle: strokeLeftStyle, strokeRightStyle: strokeRightStyle, cellBackgroundColor: finalCellBackgroundColor }));
+    }, [
+        getEffectiveCellFormat,
+        getCellBounds,
+        sheetId,
+        scale,
+        theme,
+        cellBackgroundColor,
+    ]);
+    var cellBackgroundRenderer = (0, react_1.useCallback)(function (props) {
+        var _a, _b, _c, _d;
+        var rowIndex = props.rowIndex, columnIndex = props.columnIndex, isMergedCell = props.isMergedCell;
+        // Formatting
+        var effectiveCellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        /**
+         * This is a hacky code for merged cells
+         * Cells are only drawn if they have any text content in them
+         *
+         * But Merged Cell is an exclusion. Merged cell has to be drawn
+         * above the gridlines with the grid background color
+         */
+        var fillPattern = (_a = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.fillPattern) !== null && _a !== void 0 ? _a : null;
+        var gradient = (_b = effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.gradient) !== null && _b !== void 0 ? _b : null;
+        var hasPaintedPattern = fillPattern && fillPattern !== "none" && fillPattern !== "solid"
+            ? !!(effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.foregroundColor)
+            : fillPattern === "solid"
+                ? !!(effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.foregroundColor)
+                : false;
+        var hasGradient = !!gradient && ((_d = (_c = gradient.stops) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
+        var showFillRectange = !(0, utils_1.isNil)(effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.backgroundColor) ||
+            isMergedCell ||
+            hasPaintedPattern ||
+            hasGradient;
+        var backgroundColor = (0, themes_1.getStringifiedColor)(effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.backgroundColor, theme);
+        var foregroundColor = (0, themes_1.getStringifiedColor)(effectiveCellFormat === null || effectiveCellFormat === void 0 ? void 0 : effectiveCellFormat.foregroundColor, theme);
+        if (!showFillRectange) {
+            return null;
+        }
+        return (react_1.default.createElement(cell_background_1.CellBackground, tslib_1.__assign({}, props, { showGridLines: showGridLines, scale: scale, backgroundColor: backgroundColor, defaultBackgroundColor: cellBackgroundColor, fillPattern: fillPattern, foregroundColor: foregroundColor, gradient: gradient })));
+    }, [
+        getEffectiveCellFormat,
+        scale,
+        showGridLines,
+        cellBackgroundColor,
+        theme,
+        sheetId,
+    ]);
+    return [
+        cellBackgroundRenderer,
+        cellRenderer,
+        cellOverlayRenderer,
+        headerCellRenderer,
+    ];
+};
+exports.useCellRenderer = useCellRenderer;

package/dist/cjs/hooks/use-column-color-icons.d.ts

@@ -0,0 +1,43 @@
+import type { SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { AvailableIcon } from "../components/filter-box";
+import type { CellFormat } from "../types";
+export type ColumnColorIcons = {
+    availableCellColors: string[] | undefined;
+    availableFontColors: string[] | undefined;
+    availableIcons: AvailableIcon[] | undefined;
+};
+export type UseColumnColorIconsProps = {
+    theme: SpreadsheetTheme;
+    /**
+     * When false (e.g. no active column), the hook short-circuits and
+     * returns all-undefined. Lets callers keep a stable hook order.
+     */
+    enabled?: boolean;
+    sheetId: number;
+    columnIndex: number | undefined;
+    /** First data row (inclusive). Typically `range.startRowIndex + 1`. */
+    startRowIndex: number;
+    /** Last data row (inclusive). Typically `range.endRowIndex`. */
+    endRowIndex: number;
+    /**
+     * Optional — user-entered fill / font colors come from the effective
+     * format. Without it those pickers stay empty.
+     */
+    getEffectiveFormat?(sheetId: number, rowIndex: number, columnIndex: number): CellFormat | undefined | null;
+    /**
+     * Optional — keyed by `cellIdentifier(rowIndex, columnIndex)`. CF icons
+     * and CF-painted fills live here (the effective format does not carry
+     * them). Pass the Map returned by `useConditionalFormatting`.
+     */
+    conditionalFormatByCell?: Map<string, CellFormat | undefined>;
+};
+/**
+ * Computes the distinct cell-background colors, font colors and CF icons
+ * present in a single column. Powers both the FilterBox "Filter by color"
+ * picker and the custom Sort dialog's "sort on color/icon" pickers.
+ *
+ * Behavior-preserving extraction of the useMemo previously inlined in
+ * `use-filter.ts` — the return shape is identical.
+ */
+export declare const useColumnColorIcons: ({ theme, enabled, sheetId, columnIndex, startRowIndex, endRowIndex, getEffectiveFormat, conditionalFormatByCell, }: UseColumnColorIconsProps) => ColumnColorIcons;
+//# sourceMappingURL=use-column-color-icons.d.ts.map

package/dist/cjs/hooks/use-column-color-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-column-color-icons.d.ts","sourceRoot":"","sources":["../../../hooks/use-column-color-icons.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mBAAmB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC1C,mBAAmB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC1C,cAAc,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,uEAAuE;IACvE,aAAa,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,GAAI,oHASjC,wBAAwB,KAAG,gBAuE1B,CAAC"}

package/dist/cjs/hooks/use-column-color-icons.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumnColorIcons = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var react_1 = require("react");
+var themes_1 = require("../themes");
+/**
+ * Computes the distinct cell-background colors, font colors and CF icons
+ * present in a single column. Powers both the FilterBox "Filter by color"
+ * picker and the custom Sort dialog's "sort on color/icon" pickers.
+ *
+ * Behavior-preserving extraction of the useMemo previously inlined in
+ * `use-filter.ts` — the return shape is identical.
+ */
+var useColumnColorIcons = function (_a) {
+    var theme = _a.theme, _b = _a.enabled, enabled = _b === void 0 ? true : _b, sheetId = _a.sheetId, columnIndex = _a.columnIndex, startRowIndex = _a.startRowIndex, endRowIndex = _a.endRowIndex, getEffectiveFormat = _a.getEffectiveFormat, conditionalFormatByCell = _a.conditionalFormatByCell;
+    return (0, react_1.useMemo)(function () {
+        var _a, _b;
+        if (!enabled || columnIndex == null) {
+            return {
+                availableCellColors: undefined,
+                availableFontColors: undefined,
+                availableIcons: undefined,
+            };
+        }
+        var cellColors = new Set();
+        var fontColors = new Set();
+        var iconKeyToTriple = new Map();
+        for (var r = startRowIndex; r <= endRowIndex; r++) {
+            // User-entered colors come from the effective format.
+            if (getEffectiveFormat) {
+                var fmt = getEffectiveFormat(sheetId, r, columnIndex);
+                if (fmt) {
+                    var cellColor = (0, themes_1.getStringifiedColor)(fmt.backgroundColor, theme);
+                    if (cellColor)
+                        cellColors.add(cellColor);
+                    var fontColor = (0, themes_1.getStringifiedColor)((_a = fmt.textFormat) === null || _a === void 0 ? void 0 : _a.color, theme);
+                    if (fontColor)
+                        fontColors.add(fontColor);
+                }
+            }
+            // CF icons + CF-painted fills live in `conditionalFormatByCell`
+            // (the overlay map produced by `useConditionalFormatting`). The
+            // effective format does NOT carry these — read them here so the
+            // picker reflects what the user actually sees rendered.
+            if (conditionalFormatByCell) {
+                var cfFmt = conditionalFormatByCell.get((0, grid_1.cellIdentifier)(r, columnIndex));
+                if (cfFmt === null || cfFmt === void 0 ? void 0 : cfFmt.backgroundColor) {
+                    var cfColor = (0, themes_1.getStringifiedColor)(cfFmt.backgroundColor, theme);
+                    if (cfColor)
+                        cellColors.add(cfColor);
+                }
+                var icon = cfFmt === null || cfFmt === void 0 ? void 0 : cfFmt.conditionalIcon;
+                if ((icon === null || icon === void 0 ? void 0 : icon.iconSet) && typeof icon.iconId === "number") {
+                    var key = "".concat(icon.iconSet).concat(icon.iconId);
+                    if (!iconKeyToTriple.has(key)) {
+                        // Resolve the CF-evaluator color through the theme so
+                        // theme-indexed icon colors render as the real hex the
+                        // canvas paints (otherwise all icons fall back to fg).
+                        var resolvedColor = icon.color
+                            ? (_b = (0, themes_1.getStringifiedColor)(icon.color, theme)) !== null && _b !== void 0 ? _b : undefined
+                            : undefined;
+                        iconKeyToTriple.set(key, tslib_1.__assign({ iconSet: icon.iconSet, iconId: icon.iconId, glyph: icon.glyph }, (resolvedColor ? { color: resolvedColor } : {})));
+                    }
+                }
+            }
+        }
+        return {
+            availableCellColors: cellColors.size ? tslib_1.__spreadArray([], tslib_1.__read(cellColors), false) : undefined,
+            availableFontColors: fontColors.size ? tslib_1.__spreadArray([], tslib_1.__read(fontColors), false) : undefined,
+            availableIcons: iconKeyToTriple.size
+                ? tslib_1.__spreadArray([], tslib_1.__read(iconKeyToTriple.values()), false) : undefined,
+        };
+    }, [
+        theme,
+        enabled,
+        sheetId,
+        columnIndex,
+        startRowIndex,
+        endRowIndex,
+        getEffectiveFormat,
+        conditionalFormatByCell,
+    ]);
+};
+exports.useColumnColorIcons = useColumnColorIcons;

package/dist/cjs/hooks/use-conditional-formatting.d.ts

@@ -0,0 +1,35 @@
+import { type GridRange } from "@rowsncolumns/grid";
+import type { CanvasGridProps, SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { CellData, CellFormat, ConditionalFormatRule, CustomFormulaResult } from "../types";
+export type UseConditionalFormattingProps<T extends CellData> = {
+    sheetId: number;
+    theme: SpreadsheetTheme;
+    conditionalFormats?: ConditionalFormatRule[];
+    locale?: string;
+    getValidationValue: (sheetId: number, rowIndex: number, columnIndex: number, rule?: ConditionalFormatRule) => CustomFormulaResult;
+    isNumberValue(sheetId: number, rowIndex: number, columnIndex: number): boolean;
+    getSheetRowCount: CanvasGridProps["getSheetRowCount"];
+    getSheetColumnCount: CanvasGridProps["getSheetColumnCount"];
+    /**
+     * Optional evaluation window (padded viewport bounds). When provided,
+     * rule ranges on `sheetId` whose covered-cell total exceeds
+     * {@link CF_WINDOW_CELL_THRESHOLD} are intersected with it, bounding the
+     * per-cell evaluation to O(window) instead of O(rule ranges) — the fix
+     * for multi-second stalls on whole-column rules over million-row sheets.
+     * Omit (or pass null) for exact full-range behavior.
+     */
+    window?: GridRange | null;
+    /**
+     * Per-cell engine result reader
+     * (`cellData.conditionalFormattingResultById[ruleId]`). Provided when the
+     * host's engine evaluates aggregate rules (TOP/BOTTOM-N, DUPLICATE/UNIQUE,
+     * above/below-average) — those branches then consume the engine's stamps
+     * (`result === true`, like the boolean formula branch) instead of
+     * recomputing the aggregate from loaded cell data, which is wrong on
+     * windowed large documents. Rules over the engine's coverage cap keep the
+     * JS computation. Omit for engine-free documents.
+     */
+    getConditionalFormatResult?: (sheetId: number, rowIndex: number, columnIndex: number, ruleId: ConditionalFormatRule["id"]) => unknown;
+};
+export declare const useConditionalFormatting: <T extends CellData>({ sheetId, theme, conditionalFormats, locale, getValidationValue, isNumberValue, getSheetRowCount, getSheetColumnCount, window: evaluationWindow, getConditionalFormatResult, }: UseConditionalFormattingProps<T>) => Map<string, CellFormat | undefined>;
+//# sourceMappingURL=use-conditional-formatting.d.ts.map

package/dist/cjs/hooks/use-conditional-formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-conditional-formatting.d.ts","sourceRoot":"","sources":["../../../hooks/use-conditional-formatting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAoBpE,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAGlB,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC9D,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,CAClB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,IAAI,CAAC,EAAE,qBAAqB,KACzB,mBAAmB,CAAC;IACzB,aAAa,CACX,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC;IACX,gBAAgB,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACtD,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B;;;;;;;;;OASG;IACH,0BAA0B,CAAC,EAAE,CAC3B,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,qBAAqB,CAAC,IAAI,CAAC,KAChC,OAAO,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,QAAQ,EAAE,iLAW1D,6BAA6B,CAAC,CAAC,CAAC,wCAmpBlC,CAAC"}