@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,372 @@
+import { Direction } from "@rowsncolumns/grid";
+import { isNil } from "@rowsncolumns/utils";
+import React, { useCallback } from "react";
+import { getHeaderFill } from "../api/colors";
+import { showValidationDropdownArrow } from "../api/validation";
+import { CellBackground } from "../components/cell/cell-background";
+import { CellDiff as CellDiffRenderer } from "../components/cell-diff";
+import { CellOverlayRenderer } from "../components/cell-overlay";
+import { DEFAULT_ARRAY } from "../config";
+import { convertBorderStyleToDashArray, normalizeDisplayText, } from "../helpers";
+import { getCellBordersForRendering } from "../helpers/merged-cell-borders";
+import { getStringifiedColor } from "../themes";
+import { applyShowZeros } from "./show-zeros";
+import { useCellDiffHighlight } from "./use-cell-diff-highlight";
+export const useCellRenderer = ({ sheetId, scale, showGridLines, showZeros, isRowHeader, isColumnHeader, selectedRows, selectedColumns, selectedRowHeaders, selectedColumnHeaders, cellBackgroundColor, headerBorderColor, headerBackgroundColor, headerColor, headerActiveBackgroundColor, headerSelectedBackgroundColor, headerSelectedColor, headerTableBackgroundColor, headerTableActiveBackgroundColor, headerTableSelectedBackgroundColor, chipBackgroundColor, filterIconColor, showCalculatedColumnIcon, enableTextOverflow, showHeaders, theme, getDefaultHorizontalAlignment, isTableFilterVisible, columnContainsTable, rowsContainsTable, canOverflowToNextCell, getTableHeaderSortOrder, getDataValidation, getErrorValue, getEffectiveValue, getFormattedValue, getNote, getComment, getEffectiveCellFormat, getCellBounds, getCellImageUrl, getCellMetaType, getRowHeaderText, getColumnHeaderText, getMaximumOverflowTextWidth, getTextDimension, getCellGroupingInfo, getTextFormatRuns, onRequestEdit, onFilterClick, onCheckboxClick, isTableHeader, isCalculatedColumnHeader, isTableHeaderFilterActive, HeaderCell, Cell, StructuredResult, gridLineWidth, showNotes, showComments, defaultFontSizePoint, readonly, onExpandCollapse, onOverflow, isComparing = false, getCellDiff, }) => {
+    // Version comparison diff highlighting - only active when isComparing is true
+    const { mergeCellFormatWithDiff, getDiffHighlight } = useCellDiffHighlight(isComparing ? getCellDiff : undefined);
+    // Edit
+    const onRequestEditCell = useCallback((cell) => onRequestEdit?.(sheetId, cell), [sheetId, onRequestEdit]);
+    const cellRenderer = useCallback((props) => {
+        const { rowIndex, columnIndex, isMergedCell } = props;
+        // Body cell
+        const rawFormattedValue = getFormattedValue(sheetId, rowIndex, columnIndex);
+        // Formatting
+        const effectiveCellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        // Checkbox for boolean values (Checkbox icon)
+        const effectiveValue = getEffectiveValue(sheetId, rowIndex, columnIndex);
+        const formattedValue = applyShowZeros(rawFormattedValue, effectiveValue, showZeros);
+        const dataValidation = getDataValidation(sheetId, rowIndex, columnIndex);
+        const validationType = dataValidation?.condition?.type;
+        const horizontalAlignment = effectiveCellFormat?.horizontalAlignment;
+        // Expandable
+        const [expandable, expanded] = getCellGroupingInfo(sheetId, rowIndex, columnIndex);
+        // Display style
+        const showChip = getCellMetaType(sheetId, rowIndex, columnIndex) === "people";
+        // Image url
+        const imageUrl = getCellImageUrl(sheetId, rowIndex, columnIndex);
+        // Show dropdown arrow
+        const showArrow = showValidationDropdownArrow(dataValidation);
+        // Show filter icon for basicFilter and tables
+        const showFilter = isTableFilterVisible(rowIndex, columnIndex);
+        // Has notes
+        const showNote = showNotes
+            ? !!getNote(sheetId, rowIndex, columnIndex)
+            : false;
+        // Has comment
+        const showComment = showComments
+            ? !!getComment(sheetId, rowIndex, columnIndex)
+            : false;
+        // Calculated column
+        const isCalculatedColumn = isTableHeader(rowIndex, columnIndex) &&
+            isCalculatedColumnHeader(rowIndex, columnIndex);
+        // Cell overflow
+        const wrapStrategy = effectiveCellFormat?.wrapStrategy;
+        const shouldWrap = wrapStrategy === "wrap";
+        const isWrapEnabled = (wrapStrategy ?? "overflow") === "overflow";
+        // Normalize display value for both rendering and overflow calculation
+        const displayFormattedValue = normalizeDisplayText(formattedValue, shouldWrap);
+        const shouldRecalcTextWidth = isWrapEnabled || wrapStrategy === "clip";
+        // Indent
+        const isRightAligned = horizontalAlignment === "right";
+        // Only strings which are right aligned can overflow to neighbours
+        const isStringValue = !isNil(effectiveValue?.sv ?? effectiveValue?.stringValue);
+        const overflowRight = isRightAligned && isStringValue;
+        // shrinkToFit and rotated text both keep the text inside the cell,
+        // so they must not spill into neighbours regardless of wrapStrategy.
+        const numericRotation = effectiveCellFormat?.textRotation;
+        const hasNumericRotation = typeof numericRotation === "number" &&
+            Number.isFinite(numericRotation) &&
+            numericRotation !== 0;
+        const containsTextInside = !!effectiveCellFormat?.shrinkToFit || hasNumericRotation;
+        const 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,
+                columnIndex: columnIndex + (isRightAligned ? -1 : 1),
+            });
+        const [cellWidth, columnSpans] = shouldOverflow
+            ? getMaximumOverflowTextWidth(displayFormattedValue, sheetId, rowIndex, columnIndex, 
+            // Investigate why isHiddenCell and the instance from Sheet-Grid differs
+            canOverflowToNextCell, effectiveCellFormat?.textFormat, shouldWrap, isRightAligned ? Direction.Left : Direction.Right)
+            : [
+                props.width,
+                DEFAULT_ARRAY,
+            ];
+        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?.(rowIndex, columnIndex, cellWidth);
+        }
+        else {
+            // Reset overflow for this cell if it no longer overflows
+            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.
+        const textWidth = (overflowRight && shouldRecalcTextWidth) || containsTextInside
+            ? getTextDimension(sheetId, rowIndex, columnIndex, displayFormattedValue).width
+            : 0;
+        const enableOverflow = shouldOverflow && cellWidth > props.width;
+        // Is Filter active
+        const isFilterActive = showFilter
+            ? isTableHeaderFilterActive(rowIndex, columnIndex)
+            : false;
+        // Is Sort active
+        const sortOrder = showFilter
+            ? getTableHeaderSortOrder(rowIndex, columnIndex)
+            : undefined;
+        // Text format
+        const textFormatRuns = getTextFormatRuns?.(sheetId, rowIndex, columnIndex);
+        // Data validation errors (Invalid icon)
+        const errorValue = getErrorValue(sheetId, rowIndex, columnIndex);
+        const isInvalid = errorValue?.type === "Invalid";
+        const showCheckbox = !errorValue && validationType === "BOOLEAN";
+        const isChecked = (effectiveValue?.bv ?? effectiveValue?.boolValue) === true;
+        // Error from formula calculation (Error icon)
+        const isError = errorValue?.type === "Error";
+        // Version comparison diff highlighting
+        const 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
+            const textColor = effectiveCellFormat?.textFormat?.color
+                ? 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)
+            const oldValueWidth = diffHighlight.oldFormattedValue
+                ? getTextDimension(sheetId, rowIndex, columnIndex, diffHighlight.oldFormattedValue, diffHighlight.oldFormat?.textFormat ?? undefined).width
+                : undefined;
+            return (React.createElement(CellDiffRenderer, { diffHighlight: diffHighlight, value: formattedValue, defaultColor: textColor, scale: scale, fontSizePt: defaultFontSizePoint, fontFamily: effectiveCellFormat?.textFormat?.fontFamily, bold: effectiveCellFormat?.textFormat?.bold, italic: effectiveCellFormat?.textFormat?.italic, horizontalAlignment: effectiveCellFormat?.horizontalAlignment, verticalAlignment: effectiveCellFormat?.verticalAlignment, oldValueWidth: oldValueWidth, ...props }));
+        }
+        return (React.createElement(Cell, { 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?.structuredValue, defaultFontSizePoint: defaultFontSizePoint, sortOrder: sortOrder, StructuredResult: StructuredResult, textFormatRuns: textFormatRuns, readonly: readonly, onExpandCollapse: (...args) => onExpandCollapse?.(sheetId, ...args), 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,
+    ]);
+    const headerCellRenderer = useCallback((props) => {
+        if (!showHeaders) {
+            return null;
+        }
+        const { rowIndex, columnIndex } = props;
+        const rowHeader = isRowHeader(columnIndex);
+        const colHeader = isColumnHeader(rowIndex);
+        /**
+         * Header Cell Renderer
+         */
+        if (rowHeader || colHeader) {
+            const isCorner = rowHeader === colHeader;
+            const isActive = colHeader
+                ? selectedColumns[columnIndex] || selectedColumns["all"]
+                : selectedRows[rowIndex] || selectedRows["all"];
+            const isEntireRowColumnSelected = colHeader
+                ? selectedColumnHeaders[columnIndex]
+                : selectedRowHeaders[rowIndex];
+            const containsTable = colHeader
+                ? columnContainsTable(columnIndex)
+                : rowsContainsTable(rowIndex);
+            const value = isCorner
+                ? ""
+                : colHeader
+                    ? getColumnHeaderText(columnIndex)
+                    : getRowHeaderText(rowIndex);
+            const fill = getHeaderFill(isCorner, isEntireRowColumnSelected, isActive, containsTable, headerBackgroundColor, headerActiveBackgroundColor, headerSelectedBackgroundColor, headerTableBackgroundColor, headerTableActiveBackgroundColor, headerTableSelectedBackgroundColor);
+            const color = isEntireRowColumnSelected
+                ? headerSelectedColor
+                : headerColor;
+            return (React.createElement(HeaderCell, { 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,
+    ]);
+    const cellOverlayRenderer = useCallback((props) => {
+        const { rowIndex, columnIndex, isMergedCell } = props;
+        const cellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        const borders = getCellBordersForRendering(sheetId, { rowIndex, columnIndex }, isMergedCell, getCellBounds, getEffectiveCellFormat);
+        const finalCellBackgroundColor = getStringifiedColor(cellFormat?.backgroundColor ?? cellBackgroundColor, theme);
+        /* Border colors */
+        const strokeTopColor = getStringifiedColor(borders?.top?.color, theme);
+        const strokeBottomColor = getStringifiedColor(borders?.bottom?.color, theme);
+        const strokeLeftColor = getStringifiedColor(borders?.left?.color, theme);
+        const strokeRightColor = getStringifiedColor(borders?.right?.color, theme);
+        const strokeDiagonalUpColor = getStringifiedColor(borders?.diagonalUp?.color, theme);
+        const strokeDiagonalDownColor = getStringifiedColor(borders?.diagonalDown?.color, theme);
+        /* Border style */
+        const strokeTopStyle = borders?.top?.style;
+        const strokeBottomStyle = borders?.bottom?.style;
+        const strokeLeftStyle = borders?.left?.style;
+        const strokeRightStyle = borders?.right?.style;
+        const strokeDiagonalUpStyle = borders?.diagonalUp?.style;
+        const strokeDiagonalDownStyle = borders?.diagonalDown?.style;
+        /* Border width */
+        const strokeTopWidth = (strokeTopStyle === "double" ? 3 : borders?.top?.width ?? 0) * scale;
+        const strokeBottomWidth = (strokeBottomStyle === "double" ? 3 : borders?.bottom?.width ?? 0) *
+            scale;
+        const strokeLeftWidth = (strokeLeftStyle === "double" ? 3 : borders?.left?.width ?? 0) * scale;
+        const strokeRightWidth = (strokeRightStyle === "double" ? 3 : borders?.right?.width ?? 0) *
+            scale;
+        const strokeDiagonalUpWidth = (strokeDiagonalUpStyle === "double"
+            ? 3
+            : borders?.diagonalUp?.width ?? 0) * scale;
+        const strokeDiagonalDownWidth = (strokeDiagonalDownStyle === "double"
+            ? 3
+            : borders?.diagonalDown?.width ?? 0) * scale;
+        // Double inset
+        const strokeDoubleInsetWidth = 1 * scale;
+        /* Border style */
+        const strokeTopDash = convertBorderStyleToDashArray(borders?.top?.style);
+        const strokeBottomDash = convertBorderStyleToDashArray(borders?.bottom?.style);
+        const strokeLeftDash = convertBorderStyleToDashArray(borders?.left?.style);
+        const strokeRightDash = convertBorderStyleToDashArray(borders?.right?.style);
+        const strokeDiagonalUpDash = convertBorderStyleToDashArray(borders?.diagonalUp?.style);
+        const strokeDiagonalDownDash = convertBorderStyleToDashArray(borders?.diagonalDown?.style);
+        return CellOverlayRenderer({
+            ...props,
+            strokeDoubleInsetWidth,
+            strokeTopColor,
+            strokeBottomColor,
+            strokeLeftColor,
+            strokeRightColor,
+            strokeDiagonalUpColor,
+            strokeDiagonalDownColor,
+            strokeTopWidth,
+            strokeBottomWidth,
+            strokeLeftWidth,
+            strokeRightWidth,
+            strokeDiagonalUpWidth,
+            strokeDiagonalDownWidth,
+            strokeTopDash,
+            strokeBottomDash,
+            strokeLeftDash,
+            strokeRightDash,
+            strokeDiagonalUpDash,
+            strokeDiagonalDownDash,
+            strokeTopStyle,
+            strokeBottomStyle,
+            strokeLeftStyle,
+            strokeRightStyle,
+            cellBackgroundColor: finalCellBackgroundColor,
+        });
+    }, [
+        getEffectiveCellFormat,
+        getCellBounds,
+        sheetId,
+        scale,
+        theme,
+        cellBackgroundColor,
+    ]);
+    const cellBackgroundRenderer = useCallback((props) => {
+        const { rowIndex, columnIndex, isMergedCell } = props;
+        // Formatting
+        const 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
+         */
+        const fillPattern = effectiveCellFormat?.fillPattern ?? null;
+        const gradient = effectiveCellFormat?.gradient ?? null;
+        const hasPaintedPattern = fillPattern && fillPattern !== "none" && fillPattern !== "solid"
+            ? !!effectiveCellFormat?.foregroundColor
+            : fillPattern === "solid"
+                ? !!effectiveCellFormat?.foregroundColor
+                : false;
+        const hasGradient = !!gradient && (gradient.stops?.length ?? 0) > 0;
+        const showFillRectange = !isNil(effectiveCellFormat?.backgroundColor) ||
+            isMergedCell ||
+            hasPaintedPattern ||
+            hasGradient;
+        const backgroundColor = getStringifiedColor(effectiveCellFormat?.backgroundColor, theme);
+        const foregroundColor = getStringifiedColor(effectiveCellFormat?.foregroundColor, theme);
+        if (!showFillRectange) {
+            return null;
+        }
+        return (React.createElement(CellBackground, { ...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,
+    ];
+};

package/dist/esm/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/esm/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/esm/hooks/use-column-color-icons.js

@@ -0,0 +1,83 @@
+import { cellIdentifier } from "@rowsncolumns/grid";
+import { useMemo } from "react";
+import { getStringifiedColor } from "../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.
+ */
+export const useColumnColorIcons = ({ theme, enabled = true, sheetId, columnIndex, startRowIndex, endRowIndex, getEffectiveFormat, conditionalFormatByCell, }) => useMemo(() => {
+    if (!enabled || columnIndex == null) {
+        return {
+            availableCellColors: undefined,
+            availableFontColors: undefined,
+            availableIcons: undefined,
+        };
+    }
+    const cellColors = new Set();
+    const fontColors = new Set();
+    const iconKeyToTriple = new Map();
+    for (let r = startRowIndex; r <= endRowIndex; r++) {
+        // User-entered colors come from the effective format.
+        if (getEffectiveFormat) {
+            const fmt = getEffectiveFormat(sheetId, r, columnIndex);
+            if (fmt) {
+                const cellColor = getStringifiedColor(fmt.backgroundColor, theme);
+                if (cellColor)
+                    cellColors.add(cellColor);
+                const fontColor = getStringifiedColor(fmt.textFormat?.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) {
+            const cfFmt = conditionalFormatByCell.get(cellIdentifier(r, columnIndex));
+            if (cfFmt?.backgroundColor) {
+                const cfColor = getStringifiedColor(cfFmt.backgroundColor, theme);
+                if (cfColor)
+                    cellColors.add(cfColor);
+            }
+            const icon = cfFmt?.conditionalIcon;
+            if (icon?.iconSet && typeof icon.iconId === "number") {
+                const key = `${icon.iconSet}${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).
+                    const resolvedColor = icon.color
+                        ? getStringifiedColor(icon.color, theme) ?? undefined
+                        : undefined;
+                    iconKeyToTriple.set(key, {
+                        iconSet: icon.iconSet,
+                        iconId: icon.iconId,
+                        glyph: icon.glyph,
+                        ...(resolvedColor ? { color: resolvedColor } : {}),
+                    });
+                }
+            }
+        }
+    }
+    return {
+        availableCellColors: cellColors.size ? [...cellColors] : undefined,
+        availableFontColors: fontColors.size ? [...fontColors] : undefined,
+        availableIcons: iconKeyToTriple.size
+            ? [...iconKeyToTriple.values()]
+            : undefined,
+    };
+}, [
+    theme,
+    enabled,
+    sheetId,
+    columnIndex,
+    startRowIndex,
+    endRowIndex,
+    getEffectiveFormat,
+    conditionalFormatByCell,
+]);

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