@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/embeds/shape-svg.js

@@ -0,0 +1,149 @@
+import { lightenColor } from "@rowsncolumns/utils";
+import React, { useId } from "react";
+import { getStringifiedColor } from "../../themes";
+import { presetShapePath } from "./shape-geometry";
+/** Excel's default style for an inserted shape references accent1. */
+const DEFAULT_STYLE_COLOR = { theme: 4 };
+const stringify = (color, theme, fallback) => getStringifiedColor(color ?? fallback, theme) ?? fallback;
+export const resolveShapeFill = (spec, theme) => {
+    const fill = spec.fill;
+    if (fill) {
+        switch (fill.kind) {
+            case "none":
+                return { kind: "none" };
+            case "solid":
+                return {
+                    kind: "solid",
+                    color: stringify(fill.color, theme, "#FFFFFF"),
+                    opacity: fill.opacity ?? undefined,
+                };
+            case "gradient":
+                return {
+                    kind: "gradient",
+                    stops: fill.stops.map((stop) => ({
+                        offset: stop.position,
+                        color: stringify(stop.color, theme, "#FFFFFF"),
+                        opacity: stop.opacity ?? undefined,
+                    })),
+                    angle: fill.angle ?? 90,
+                    shading: fill.shading ?? "linear",
+                };
+        }
+    }
+    const ref = spec.styleRefs?.fill;
+    if (ref && ref.index === 0) {
+        return { kind: "none" };
+    }
+    const base = stringify(ref?.color ?? DEFAULT_STYLE_COLOR, theme, "#4472C4");
+    // Format-scheme fills: idx 1 = plain, idx ≥ 2 = the subtle top-lit gradient
+    // Excel paints for its default shape styles.
+    if (!ref || ref.index >= 2) {
+        return {
+            kind: "gradient",
+            stops: [
+                { offset: 0, color: lightenColor(0.45, base) ?? base },
+                { offset: 1, color: base },
+            ],
+            angle: 90,
+            shading: "linear",
+        };
+    }
+    return { kind: "solid", color: base };
+};
+export const resolveShapeOutline = (spec, theme) => {
+    const outline = spec.outline;
+    if (outline) {
+        // width 0 = explicitly no outline.
+        if (outline.width === 0)
+            return null;
+        return {
+            color: stringify(outline.color, theme, "#808080"),
+            width: outline.width ?? 1,
+            dash: outline.dash ?? undefined,
+            opacity: outline.opacity ?? undefined,
+        };
+    }
+    const ref = spec.styleRefs?.line;
+    if (ref && ref.index === 0)
+        return null;
+    // Theme line styles stroke a darker take on the scheme color, 1px.
+    const base = stringify(ref?.color ?? DEFAULT_STYLE_COLOR, theme, "#4472C4");
+    return { color: lightenColor(-0.25, base) ?? base, width: 1 };
+};
+export const resolveShapeShadow = (spec, theme) => {
+    const shadow = spec.shadow;
+    if (shadow) {
+        return {
+            color: stringify(shadow.color, theme, "#000000"),
+            opacity: shadow.opacity ?? 0.4,
+            blurRadius: shadow.blurRadius ?? 4,
+            offsetX: shadow.offsetXPixels ?? 2,
+            offsetY: shadow.offsetYPixels ?? 2,
+        };
+    }
+    const ref = spec.styleRefs?.effect;
+    if (!ref || ref.index === 0)
+        return null;
+    // Effect refs resolve to Excel's subtle outer shadow.
+    return { color: "#000000", opacity: 0.35, blurRadius: 4, offsetX: 2, offsetY: 2 };
+};
+/** Dash pattern scaled by stroke width so heavier lines keep their rhythm. */
+const dashArray = (dash, strokeWidth) => {
+    const sw = Math.max(strokeWidth, 1);
+    switch (dash) {
+        case "dot":
+            return `${sw} ${sw * 3}`;
+        case "dash":
+            return `${sw * 4} ${sw * 3}`;
+        case "dashDot":
+            return `${sw * 4} ${sw * 3} ${sw} ${sw * 3}`;
+        case "longDash":
+            return `${sw * 8} ${sw * 3}`;
+        case "longDashDot":
+            return `${sw * 8} ${sw * 3} ${sw} ${sw * 3}`;
+        case "longDashDotDot":
+            return `${sw * 8} ${sw * 3} ${sw} ${sw * 3} ${sw} ${sw * 3}`;
+        default:
+            return undefined;
+    }
+};
+/** OOXML gradient angle (degrees clockwise from pointing right, y-down) → SVG endpoints. */
+const gradientVector = (angle) => {
+    const rad = (angle * Math.PI) / 180;
+    const dx = Math.cos(rad) / 2;
+    const dy = Math.sin(rad) / 2;
+    return { x1: 0.5 - dx, y1: 0.5 - dy, x2: 0.5 + dx, y2: 0.5 + dy };
+};
+/**
+ * Draws a shape spec as an SVG filling its embed frame: preset geometry path,
+ * resolved fill (solid/gradient), outline, drop shadow, and flips. Text is NOT
+ * drawn here — the embed component overlays its textbox renderer, so shape
+ * text gets selection/wrapping behavior identical to a plain text box.
+ */
+export const ShapeSvg = ({ spec, width, height, theme }) => {
+    const uid = useId();
+    const gradientId = `shape-fill-${uid}`;
+    const shadowId = `shape-shadow-${uid}`;
+    const fill = resolveShapeFill(spec, theme);
+    const outline = resolveShapeOutline(spec, theme);
+    const shadow = resolveShapeShadow(spec, theme);
+    const d = presetShapePath(spec.geometry.preset, width, height, spec.geometry.adjustments);
+    const fillAttr = fill.kind === "none"
+        ? "none"
+        : fill.kind === "solid"
+            ? fill.color
+            : `url(#${gradientId})`;
+    const flips = [];
+    if (spec.flipHorizontal)
+        flips.push(`translate(${width} 0) scale(-1 1)`);
+    if (spec.flipVertical)
+        flips.push(`translate(0 ${height}) scale(1 -1)`);
+    const vector = fill.kind === "gradient" ? gradientVector(fill.angle) : null;
+    return (React.createElement("svg", { width: "100%", height: "100%", viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-label": spec.name ?? undefined, role: "img" },
+        React.createElement("defs", null,
+            fill.kind === "gradient" ? (fill.shading === "radial" ? (React.createElement("radialGradient", { id: gradientId }, fill.stops.map((stop, index) => (React.createElement("stop", { key: index, offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity }))))) : (React.createElement("linearGradient", { id: gradientId, ...vector }, fill.stops.map((stop, index) => (React.createElement("stop", { key: index, offset: stop.offset, stopColor: stop.color, stopOpacity: stop.opacity })))))) : null,
+            shadow ? (React.createElement("filter", { id: shadowId, x: "-25%", y: "-25%", width: "150%", height: "150%" },
+                React.createElement("feDropShadow", { dx: shadow.offsetX, dy: shadow.offsetY, stdDeviation: shadow.blurRadius / 2, floodColor: shadow.color, floodOpacity: shadow.opacity }))) : null),
+        React.createElement("g", { transform: flips.length ? flips.join(" ") : undefined },
+            React.createElement("path", { d: d, fill: fillAttr, fillOpacity: fill.kind === "solid" ? fill.opacity : undefined, stroke: outline?.color ?? "none", strokeWidth: outline?.width, strokeOpacity: outline?.opacity, strokeDasharray: outline ? dashArray(outline.dash, outline.width) : undefined, strokeLinejoin: "round", filter: shadow ? `url(#${shadowId})` : undefined }))));
+};

package/dist/esm/components/embeds/slicer-component.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { PivotTable, Slicer, TableView } from "../../types";
+import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
+export type SlicerComponentProps = {
+    sheetId: number;
+    slicer: Slicer;
+    theme: SpreadsheetTheme;
+    backgroundColor?: string;
+    width: number;
+    height: number;
+    isSelected: boolean;
+    readonly?: boolean;
+    onDeleteSlicer: CanvasGridProps["onDeleteSlicer"];
+    onFilterTable?: CanvasGridProps["onFilterTable"];
+    /**
+     * Apply the slicer's selection to bound pivot tables. Mirrors
+     * `usePivot.applySlicerSelectionToPivots` — pass an empty array to
+     * clear the pivot's filter on the slicer's field, or a non-empty
+     * list of values to keep only those.
+     */
+    onFilterPivot?(pivotTableIds: (string | number)[], fieldName: string, selectedValues: string[]): void;
+    tables?: TableView[] | null;
+    pivotTables?: PivotTable[] | null;
+    getFormattedValue?: CanvasGridProps["getFormattedValue"];
+};
+export declare const SlicerComponent: React.MemoExoticComponent<({ slicer, tables, pivotTables, getFormattedValue, onFilterTable, onFilterPivot, onDeleteSlicer, readonly, }: SlicerComponentProps) => React.JSX.Element>;
+//# sourceMappingURL=slicer-component.d.ts.map

package/dist/esm/components/embeds/slicer-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slicer-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/slicer-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAMhF,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD;;;;;OAKG;IACH,aAAa,CAAC,CACZ,aAAa,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAClC,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,EAAE,GACvB,IAAI,CAAC;IAER,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,0IAUvB,oBAAoB,uBA2UxB,CAAC"}

package/dist/esm/components/embeds/slicer-component.js

@@ -0,0 +1,231 @@
+import React, { memo, useCallback, useMemo, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Button, IconButton } from "@rowsncolumns/ui";
+import { CheckIcon, Cross2Icon, ResetIcon } from "@rowsncolumns/icons";
+import { BLANK_LABEL } from "../../config";
+import { isNil } from "lodash";
+import { useIsomorphicLayoutEffect } from "../../hooks";
+export const SlicerComponent = memo(({ slicer, tables = [], pivotTables = [], getFormattedValue, onFilterTable, onFilterPivot, onDeleteSlicer, readonly, }) => {
+    const { spec } = slicer;
+    // Determine the title - use spec.title or derive from table header
+    const displayTitle = useMemo(() => {
+        if (spec.title)
+            return spec.title;
+        // Try to get title from table header
+        if (spec.type === "table") {
+            const relatedTables = tables?.filter((t) => spec.tableIds.includes(t.id)) ?? [];
+            const firstTable = relatedTables[0];
+            if (firstTable?.range && getFormattedValue) {
+                const headerRow = firstTable.headerRow ?? true;
+                if (headerRow) {
+                    const columnIndex = firstTable.range.startColumnIndex + spec.columnIndex;
+                    const headerValue = getFormattedValue(firstTable.sheetId, firstTable.range.startRowIndex, columnIndex);
+                    if (headerValue)
+                        return String(headerValue);
+                }
+            }
+        }
+        // Fallback to a generic title
+        return "Filter";
+    }, [spec, tables, getFormattedValue]);
+    // Extract unique values based on slicer type
+    const { availableValues, selectedValues } = useMemo(() => {
+        const values = new Set();
+        let selected = new Set();
+        if (spec.type === "table") {
+            // Get values from table columns
+            const relatedTables = tables?.filter((t) => spec.tableIds.includes(t.id)) ?? [];
+            if (relatedTables.length > 0) {
+                // Derive selected values from the first table's filter
+                // (all connected tables should have synchronized filters)
+                const firstTable = relatedTables[0];
+                if (firstTable?.filterSpecs) {
+                    const filterSpec = firstTable.filterSpecs.find((fs) => fs.columnIndex === spec.columnIndex);
+                    if (filterSpec?.filterCriteria?.visibleValues) {
+                        selected = new Set(filterSpec.filterCriteria.visibleValues);
+                    }
+                }
+                for (const table of relatedTables) {
+                    if (!table.range || !getFormattedValue)
+                        continue;
+                    const { startRowIndex, endRowIndex } = table.range;
+                    const columnIndex = table.range.startColumnIndex + spec.columnIndex;
+                    // Skip header row if table has one
+                    const headerRow = table.headerRow ?? true;
+                    const startRow = headerRow ? startRowIndex + 1 : startRowIndex;
+                    for (let row = startRow; row <= endRowIndex; row++) {
+                        const value = getFormattedValue(table.sheetId, row, columnIndex);
+                        if (!isNil(value)) {
+                            values.add(value);
+                        }
+                    }
+                }
+                // If no filter is set, all values are selected by default
+                if (selected.size === 0 && values.size > 0) {
+                    selected = new Set(values);
+                }
+            }
+        }
+        else if (spec.type === "pivot") {
+            // Pivot slicers connect to pivot tables by `fieldName`. The
+            // distinct values come from the pivot's SOURCE range (the
+            // column whose header equals `fieldName`); the currently-
+            // selected values come from the pivot's stored filter on the
+            // same field — written there by `applySlicerSelectionToPivots`
+            // via `addFilter`/`removeFilter`.
+            const relatedPivots = pivotTables?.filter((p) => spec.pivotTableIds.includes(p.pivotId)) ??
+                [];
+            // Derive selected values from the first bound pivot's filter
+            // (all connected pivots are kept in sync by
+            // `applySlicerSelectionToPivots`).
+            const firstPivot = relatedPivots[0];
+            const filterSpec = firstPivot?.filters?.[spec.fieldName];
+            if (filterSpec &&
+                Array.isArray(filterSpec.values) &&
+                filterSpec.values.length > 0) {
+                selected = new Set(filterSpec.values.map(String));
+            }
+            if (relatedPivots.length > 0 && getFormattedValue) {
+                const fieldKey = String(spec.fieldName).trim().toLowerCase();
+                for (const pivot of relatedPivots) {
+                    const source = pivot.source;
+                    if (!source)
+                        continue;
+                    const { sheetId: srcSheetId, startRowIndex, endRowIndex, startColumnIndex, endColumnIndex, } = source;
+                    // Pivot source ranges always have a header row (Excel
+                    // requires it). Walk the header row to find which column
+                    // matches `fieldName`.
+                    let matchedCol = -1;
+                    for (let c = startColumnIndex; c <= endColumnIndex; c++) {
+                        const header = getFormattedValue(srcSheetId, startRowIndex, c);
+                        if (!isNil(header) &&
+                            String(header).trim().toLowerCase() === fieldKey) {
+                            matchedCol = c;
+                            break;
+                        }
+                    }
+                    if (matchedCol < 0)
+                        continue;
+                    for (let r = startRowIndex + 1; r <= endRowIndex; r++) {
+                        const v = getFormattedValue(srcSheetId, r, matchedCol);
+                        if (!isNil(v) && String(v).length > 0) {
+                            values.add(String(v));
+                        }
+                    }
+                }
+                // If no filter is set on the pivot, all values are selected
+                // by default — same fallback as the table slicer above.
+                if (selected.size === 0 && values.size > 0) {
+                    selected = new Set(values);
+                }
+            }
+        }
+        return {
+            availableValues: Array.from(values).sort(),
+            selectedValues: selected,
+        };
+    }, [spec, tables, pivotTables, getFormattedValue]);
+    const allSelected = selectedValues.size === availableValues.length;
+    // Handle toggling a single value
+    const handleToggleValue = useCallback((value) => {
+        if (readonly || !onFilterTable)
+            return;
+        const newSelectedValues = new Set(selectedValues);
+        if (newSelectedValues.has(value)) {
+            newSelectedValues.delete(value);
+        }
+        else {
+            newSelectedValues.add(value);
+        }
+        const newSelectedArray = Array.from(newSelectedValues);
+        // Call onFilterTable for each connected table
+        if (spec.type === "table") {
+            const relatedTables = tables?.filter((t) => spec.tableIds.includes(t.id)) ?? [];
+            for (const table of relatedTables) {
+                onFilterTable(table.sheetId, table, spec.columnIndex, undefined, undefined, newSelectedArray.length > 0 ? newSelectedArray : null);
+            }
+        }
+        else if (spec.type === "pivot") {
+            // For pivot slicers route through the dedicated pivot-filter
+            // callback (the host wires it to
+            // `usePivot.applySlicerSelectionToPivots`). Empty array
+            // clears the bound pivots' filters; a non-empty list keeps
+            // only those values.
+            onFilterPivot?.(spec.pivotTableIds, spec.fieldName, newSelectedArray);
+        }
+    }, [
+        readonly,
+        onFilterTable,
+        onFilterPivot,
+        selectedValues,
+        spec,
+        tables,
+    ]);
+    // Handle Clear Filter - select all values (remove filter)
+    const handleClearFilter = useCallback(() => {
+        if (readonly)
+            return;
+        if (spec.type === "table") {
+            if (!onFilterTable)
+                return;
+            const relatedTables = tables?.filter((t) => spec.tableIds.includes(t.id)) ?? [];
+            for (const table of relatedTables) {
+                onFilterTable(table.sheetId, table, spec.columnIndex, undefined, undefined, []);
+            }
+        }
+        else if (spec.type === "pivot") {
+            // Empty array → `applySlicerSelectionToPivots` calls
+            // `removeFilter`, restoring the pivot's full data.
+            onFilterPivot?.(spec.pivotTableIds, spec.fieldName, []);
+        }
+    }, [readonly, onFilterTable, onFilterPivot, spec, tables]);
+    // Virtual scrolling with TanStack Virtual
+    const ITEM_HEIGHT = 28; // Height of each item in pixels
+    const parentRef = useRef(null);
+    const virtualizer = useVirtualizer({
+        count: availableValues.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => ITEM_HEIGHT,
+        overscan: 5,
+    });
+    // Disable wheel event
+    useIsomorphicLayoutEffect(() => {
+        if (parentRef.current) {
+            const handleWheel = (e) => {
+                e.stopImmediatePropagation();
+            };
+            parentRef.current.addEventListener("wheel", handleWheel);
+            return () => {
+                parentRef.current?.removeEventListener("wheel", handleWheel);
+            };
+        }
+    }, []);
+    return (React.createElement("div", { className: "flex flex-1 border border-solid border-rnc-border flex-col pointer-events-auto bg-rnc-background min-w-0" },
+        React.createElement("div", { className: "px-2 py-1 text-xs flex items-center justify-between border-solid border-t-0 border-l-0 border-r-0 border-b border-b-rnc-border" },
+            React.createElement("span", { className: "truncate" }, displayTitle),
+            React.createElement("div", { className: "flex items-center gap-1" },
+                React.createElement(IconButton, { onClick: handleClearFilter, disabled: readonly || allSelected, tooltip: "Clear filter" },
+                    React.createElement(ResetIcon, null)),
+                React.createElement(IconButton, { onClick: () => onDeleteSlicer?.(slicer.slicerId), disabled: readonly, tooltip: "Remove slicer" },
+                    React.createElement(Cross2Icon, null)))),
+        React.createElement("div", { ref: parentRef, className: "flex-1 overflow-auto  rnc-draggable-ignore" }, availableValues.length === 0 ? (React.createElement("div", { className: "px-2 py-2 text-sm text-gray-500 italic" }, "No data available")) : (React.createElement("div", { style: {
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative",
+            } }, virtualizer.getVirtualItems().map((virtualItem) => {
+            const value = availableValues[virtualItem.index];
+            const isSelected = selectedValues.has(value);
+            const displayValue = value.trim() === "" || isNil(value) ? BLANK_LABEL : value;
+            return (React.createElement(Button, { key: virtualItem.key, onClick: () => handleToggleValue(value), className: "justify-start px-2 py-0 gap-1 text-sm text-left", title: displayValue, style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualItem.size}px`,
+                    transform: `translateY(${virtualItem.start}px)`,
+                }, disabled: readonly },
+                React.createElement("span", { className: "min-w-[15px] block leading-none" }, isSelected ? React.createElement(CheckIcon, null) : null),
+                React.createElement("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, displayValue)));
+        }))))));
+});
+SlicerComponent.displayName = "SlicerComponent";

package/dist/esm/components/fill-handle/index.d.ts

@@ -0,0 +1,7 @@
+import type { ShapeConfig } from "konva/lib/Shape";
+import React from "react";
+/**
+ * Fill handle component
+ */
+export declare const FillHandle: React.FC<ShapeConfig>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/fill-handle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/fill-handle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoB5C,CAAC"}

package/dist/esm/components/fill-handle/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * Fill handle component
+ */
+export const FillHandle = ({ x = 0, y = 0, stroke, size = 6, borderColor, ...props }) => {
+    if (x === 0 || y === 0)
+        return null;
+    return (React.createElement("div", { className: "absolute select-none top-0 left-0 w-2 h-2 border-t border-l border-r-0 border-b-0 border-solid cursor-crosshair pointer-events-auto print:hidden", style: {
+            transform: `translate3d(${x - size / 2}px, ${y - size / 2}px, 0)`,
+            borderColor,
+            background: stroke,
+        }, ...props }));
+};

package/dist/esm/components/filter-box/filter-by-color.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { ColorFilterCriteria, IconFilterCriteria } from "../../types";
+export type AvailableIcon = {
+    iconSet: string;
+    iconId: number;
+    glyph: string;
+    /** Resolved hex color the renderer would paint for this icon. */
+    color?: string;
+};
+export type FilterByColorProps = {
+    /**
+     * Currently-selected color criterion (if any). When undefined, no
+     * color filter is active.
+     */
+    colorFilter?: ColorFilterCriteria | null;
+    /** Currently-selected icon criterion. */
+    iconFilter?: IconFilterCriteria | null;
+    /** Distinct cell-background hex colors present in the column. */
+    availableCellColors?: string[];
+    /** Distinct font hex colors present in the column. */
+    availableFontColors?: string[];
+    /** Distinct CF icons present in the column. */
+    availableIcons?: AvailableIcon[];
+    onChangeColorFilter(next: ColorFilterCriteria | null): void;
+    onChangeIconFilter(next: IconFilterCriteria | null): void;
+};
+export declare const FilterByColor: React.MemoExoticComponent<({ colorFilter, iconFilter, availableCellColors, availableFontColors, availableIcons, onChangeColorFilter, onChangeIconFilter, }: FilterByColorProps) => React.JSX.Element | null>;
+//# sourceMappingURL=filter-by-color.d.ts.map

package/dist/esm/components/filter-box/filter-by-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-by-color.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-color.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACzC,yCAAyC;IACzC,UAAU,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACvC,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,mBAAmB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5D,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3D,CAAC;AA6DF,eAAO,MAAM,aAAa,8JASrB,kBAAkB,8BA0JtB,CAAC"}

package/dist/esm/components/filter-box/filter-by-color.js

@@ -0,0 +1,88 @@
+// Filter-by-color / filter-by-icon UI section. Excel keeps these on the
+// same "Filter by Color" sub-menu of the column filter dropdown — they
+// share the same data model slot in our model.
+//
+// Auto-discovery (showing only the colors / icons actually present in
+// the column) is the integrator's responsibility: pass the available
+// colors/icons via props. When neither is supplied, the section hides.
+import { CheckIcon } from "@rowsncolumns/icons";
+import { Button } from "@rowsncolumns/ui";
+import React, { memo, useCallback } from "react";
+const Row = ({ selected, onClick, swatch, label, title, }) => (React.createElement(Button, { type: "button", "aria-pressed": selected, "aria-label": title, title: title, onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+    }, className: "justify-start px-2 py-0 gap-2 text-sm text-left w-full" },
+    React.createElement("span", { className: "min-w-[15px] block leading-none" }, selected ? React.createElement(CheckIcon, null) : null),
+    swatch,
+    React.createElement("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, label)));
+const ColorSwatch = ({ color }) => (React.createElement("span", { className: "inline-block h-4 w-4 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }));
+const IconSwatch = ({ glyph, color, }) => (React.createElement("span", { className: "inline-block h-4 w-4 leading-none text-center text-sm shrink-0", style: color ? { color } : undefined }, glyph));
+const sameColor = (a, b) => !!(a && b) && a.toLowerCase() === b.toLowerCase();
+export const FilterByColor = memo(({ colorFilter, iconFilter, availableCellColors, availableFontColors, availableIcons, onChangeColorFilter, onChangeIconFilter, }) => {
+    const cellColors = availableCellColors ?? [];
+    const fontColors = availableFontColors ?? [];
+    const icons = availableIcons ?? [];
+    if (cellColors.length === 0 &&
+        fontColors.length === 0 &&
+        icons.length === 0) {
+        return null;
+    }
+    const handleCellColor = useCallback((color) => {
+        if (colorFilter?.mode === "cellColor" &&
+            sameColor(colorFilter.color, color)) {
+            onChangeColorFilter(null);
+        }
+        else {
+            onChangeColorFilter({ color, mode: "cellColor" });
+        }
+    }, [colorFilter, onChangeColorFilter]);
+    const handleFontColor = useCallback((color) => {
+        if (colorFilter?.mode === "fontColor" &&
+            sameColor(colorFilter.color, color)) {
+            onChangeColorFilter(null);
+        }
+        else {
+            onChangeColorFilter({ color, mode: "fontColor" });
+        }
+    }, [colorFilter, onChangeColorFilter]);
+    const handleIcon = useCallback((icon) => {
+        if (iconFilter?.iconSet === icon.iconSet &&
+            iconFilter?.iconId === icon.iconId) {
+            onChangeIconFilter(null);
+        }
+        else {
+            onChangeIconFilter({ iconSet: icon.iconSet, iconId: icon.iconId });
+        }
+    }, [iconFilter, onChangeIconFilter]);
+    const hasColors = cellColors.length > 0 || fontColors.length > 0;
+    return (React.createElement(React.Fragment, null,
+        hasColors ? (React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by color")) : null,
+        cellColors.length > 0 ? (React.createElement("div", { className: "flex flex-col" },
+            React.createElement("div", { className: "text-xs text-rnc-muted-foreground px-2 pt-1 pb-0.5" }, "Cell color"),
+            React.createElement("div", { className: "flex flex-col max-h-44 overflow-y-auto" }, cellColors.map((color) => {
+                const selected = colorFilter?.mode === "cellColor" &&
+                    sameColor(colorFilter.color, color);
+                return (React.createElement(Row, { key: `cell-${color}`, selected: selected, onClick: () => handleCellColor(color), swatch: React.createElement(ColorSwatch, { color: color }), label: color, title: `Filter by cell color ${color}` }));
+            })))) : null,
+        fontColors.length > 0 ? (React.createElement("div", { className: "flex flex-col" },
+            React.createElement("div", { className: "text-xs text-rnc-muted-foreground px-2 pt-1 pb-0.5" }, "Font color"),
+            React.createElement("div", { className: "flex flex-col max-h-44 overflow-y-auto" }, fontColors.map((color) => {
+                const selected = colorFilter?.mode === "fontColor" &&
+                    sameColor(colorFilter.color, color);
+                return (React.createElement(Row, { key: `font-${color}`, selected: selected, onClick: () => handleFontColor(color), swatch: React.createElement(ColorSwatch, { color: color }), label: color, title: `Filter by font color ${color}` }));
+            })))) : null,
+        icons.length > 0 ? (React.createElement("div", { className: "flex flex-col" },
+            hasColors ? React.createElement("div", { className: "h-1" }) : null,
+            React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by icon"),
+            React.createElement("div", { className: "flex flex-wrap gap-1 px-2 pb-1" }, icons.map((icon) => {
+                const selected = iconFilter?.iconSet === icon.iconSet &&
+                    iconFilter?.iconId === icon.iconId;
+                const title = `Filter by ${icon.iconSet} icon ${icon.iconId}`;
+                return (React.createElement(Button, { key: `${icon.iconSet}-${icon.iconId}`, type: "button", "aria-pressed": selected, "aria-label": title, title: title, onClick: (e) => {
+                        e.stopPropagation();
+                        handleIcon(icon);
+                    }, className: `h-7 w-7 p-0 flex items-center justify-center ${selected ? "ring-2 ring-blue-500" : ""}` },
+                    React.createElement(IconSwatch, { glyph: icon.glyph, color: icon.color })));
+            })))) : null));
+});
+FilterByColor.displayName = "FilterByColor";

package/dist/esm/components/filter-box/filter-by-condition.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ConditionType } from "../../types";
+type FilterByConditionProps = {
+    conditionType?: ConditionType;
+    fromValue: string;
+    toValue: string;
+    onChangeFromValue(value: string): void;
+    onChangeToValue(value: string): void;
+    onChangeConditionType?(type: ConditionType | undefined): void;
+};
+export declare const FilterByCondition: ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, }: FilterByConditionProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=filter-by-condition.d.ts.map

package/dist/esm/components/filter-box/filter-by-condition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-by-condition.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-condition.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,sBAAsB,GAAG;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,qBAAqB,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,mGAO/B,sBAAsB,sBA2ExB,CAAC"}

package/dist/esm/components/filter-box/filter-by-condition.js

@@ -0,0 +1,34 @@
+import { Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+import { CONDITION_LABELS, CONDITION_NONE } from "../../config";
+import { shouldShowFromValue, shouldShowToValue } from "../../helpers";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+export const FilterByCondition = ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, }) => {
+    const [showToValue, setShowToValue] = useState(() => shouldShowToValue(conditionType));
+    const [showFromValue, setShowFromValue] = useState(() => shouldShowFromValue(conditionType));
+    useIsomorphicLayoutEffect(() => {
+        const showTo = shouldShowToValue(conditionType);
+        const showFrom = shouldShowFromValue(conditionType);
+        setShowToValue(showTo);
+        setShowFromValue(showFrom);
+        if (!showTo) {
+            onChangeToValue("");
+        }
+    }, [conditionType, onChangeToValue, onChangeFromValue]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by condition"),
+        React.createElement(Select, { value: conditionType ?? CONDITION_NONE, onValueChange: (value) => onChangeConditionType?.(value === CONDITION_NONE
+                ? undefined
+                : value) },
+            React.createElement(SelectTrigger, { className: "mb-1" },
+                React.createElement(SelectValue, { placeholder: "None" })),
+            React.createElement(SelectPortal, null,
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
+                    CONDITION_LABELS.map(({ condition, label }) => {
+                        return (React.createElement(SelectItem, { key: condition, value: condition }, label));
+                    })))),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+            showFromValue ? (React.createElement(Input, { value: fromValue, type: "text", name: "fromValue", onChange: (e) => onChangeFromValue?.(e.target.value), className: "text-xs", placeholder: "Enter value" })) : null,
+            showToValue ? (React.createElement(Input, { value: toValue, type: "text", name: "toValue", onChange: (e) => onChangeToValue?.(e.target.value), className: "text-xs", placeholder: "" })) : null)));
+};

package/dist/esm/components/filter-box/filter-by-value.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type FilterByValueProps = {
+    values?: string[];
+    visibleValues?: string[] | undefined | null;
+    onChangeVisibleValues: React.Dispatch<React.SetStateAction<string[] | undefined | null>>;
+};
+export declare const FilterByValue: ({ visibleValues, values, onChangeVisibleValues, }: FilterByValueProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=filter-by-value.d.ts.map

package/dist/esm/components/filter-box/filter-by-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-by-value.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-value.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;IAC5C,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,CAClD,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,mDAI3B,kBAAkB,sBA8GpB,CAAC"}