@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,283 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlicerComponent = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_virtual_1 = require("@tanstack/react-virtual");
+var ui_1 = require("@rowsncolumns/ui");
+var icons_1 = require("@rowsncolumns/icons");
+var config_1 = require("../../config");
+var lodash_1 = require("lodash");
+var hooks_1 = require("../../hooks");
+exports.SlicerComponent = (0, react_1.memo)(function (_a) {
+    var slicer = _a.slicer, _b = _a.tables, tables = _b === void 0 ? [] : _b, _c = _a.pivotTables, pivotTables = _c === void 0 ? [] : _c, getFormattedValue = _a.getFormattedValue, onFilterTable = _a.onFilterTable, onFilterPivot = _a.onFilterPivot, onDeleteSlicer = _a.onDeleteSlicer, readonly = _a.readonly;
+    var spec = slicer.spec;
+    // Determine the title - use spec.title or derive from table header
+    var displayTitle = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        if (spec.title)
+            return spec.title;
+        // Try to get title from table header
+        if (spec.type === "table") {
+            var relatedTables = (_a = tables === null || tables === void 0 ? void 0 : tables.filter(function (t) { return spec.tableIds.includes(t.id); })) !== null && _a !== void 0 ? _a : [];
+            var firstTable = relatedTables[0];
+            if ((firstTable === null || firstTable === void 0 ? void 0 : firstTable.range) && getFormattedValue) {
+                var headerRow = (_b = firstTable.headerRow) !== null && _b !== void 0 ? _b : true;
+                if (headerRow) {
+                    var columnIndex = firstTable.range.startColumnIndex + spec.columnIndex;
+                    var 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
+    var _d = (0, react_1.useMemo)(function () {
+        var e_1, _a, e_2, _b;
+        var _c, _d, _e, _f, _g;
+        var values = new Set();
+        var selected = new Set();
+        if (spec.type === "table") {
+            // Get values from table columns
+            var relatedTables = (_c = tables === null || tables === void 0 ? void 0 : tables.filter(function (t) { return spec.tableIds.includes(t.id); })) !== null && _c !== void 0 ? _c : [];
+            if (relatedTables.length > 0) {
+                // Derive selected values from the first table's filter
+                // (all connected tables should have synchronized filters)
+                var firstTable = relatedTables[0];
+                if (firstTable === null || firstTable === void 0 ? void 0 : firstTable.filterSpecs) {
+                    var filterSpec = firstTable.filterSpecs.find(function (fs) { return fs.columnIndex === spec.columnIndex; });
+                    if ((_d = filterSpec === null || filterSpec === void 0 ? void 0 : filterSpec.filterCriteria) === null || _d === void 0 ? void 0 : _d.visibleValues) {
+                        selected = new Set(filterSpec.filterCriteria.visibleValues);
+                    }
+                }
+                try {
+                    for (var relatedTables_1 = tslib_1.__values(relatedTables), relatedTables_1_1 = relatedTables_1.next(); !relatedTables_1_1.done; relatedTables_1_1 = relatedTables_1.next()) {
+                        var table = relatedTables_1_1.value;
+                        if (!table.range || !getFormattedValue)
+                            continue;
+                        var _h = table.range, startRowIndex = _h.startRowIndex, endRowIndex = _h.endRowIndex;
+                        var columnIndex = table.range.startColumnIndex + spec.columnIndex;
+                        // Skip header row if table has one
+                        var headerRow = (_e = table.headerRow) !== null && _e !== void 0 ? _e : true;
+                        var startRow = headerRow ? startRowIndex + 1 : startRowIndex;
+                        for (var row = startRow; row <= endRowIndex; row++) {
+                            var value = getFormattedValue(table.sheetId, row, columnIndex);
+                            if (!(0, lodash_1.isNil)(value)) {
+                                values.add(value);
+                            }
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (relatedTables_1_1 && !relatedTables_1_1.done && (_a = relatedTables_1.return)) _a.call(relatedTables_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                // 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`.
+            var relatedPivots = (_f = pivotTables === null || pivotTables === void 0 ? void 0 : pivotTables.filter(function (p) { return spec.pivotTableIds.includes(p.pivotId); })) !== null && _f !== void 0 ? _f : [];
+            // Derive selected values from the first bound pivot's filter
+            // (all connected pivots are kept in sync by
+            // `applySlicerSelectionToPivots`).
+            var firstPivot = relatedPivots[0];
+            var filterSpec = (_g = firstPivot === null || firstPivot === void 0 ? void 0 : firstPivot.filters) === null || _g === void 0 ? void 0 : _g[spec.fieldName];
+            if (filterSpec &&
+                Array.isArray(filterSpec.values) &&
+                filterSpec.values.length > 0) {
+                selected = new Set(filterSpec.values.map(String));
+            }
+            if (relatedPivots.length > 0 && getFormattedValue) {
+                var fieldKey = String(spec.fieldName).trim().toLowerCase();
+                try {
+                    for (var relatedPivots_1 = tslib_1.__values(relatedPivots), relatedPivots_1_1 = relatedPivots_1.next(); !relatedPivots_1_1.done; relatedPivots_1_1 = relatedPivots_1.next()) {
+                        var pivot = relatedPivots_1_1.value;
+                        var source = pivot.source;
+                        if (!source)
+                            continue;
+                        var srcSheetId = source.sheetId, startRowIndex = source.startRowIndex, endRowIndex = source.endRowIndex, startColumnIndex = source.startColumnIndex, endColumnIndex = source.endColumnIndex;
+                        // Pivot source ranges always have a header row (Excel
+                        // requires it). Walk the header row to find which column
+                        // matches `fieldName`.
+                        var matchedCol = -1;
+                        for (var c = startColumnIndex; c <= endColumnIndex; c++) {
+                            var header = getFormattedValue(srcSheetId, startRowIndex, c);
+                            if (!(0, lodash_1.isNil)(header) &&
+                                String(header).trim().toLowerCase() === fieldKey) {
+                                matchedCol = c;
+                                break;
+                            }
+                        }
+                        if (matchedCol < 0)
+                            continue;
+                        for (var r = startRowIndex + 1; r <= endRowIndex; r++) {
+                            var v = getFormattedValue(srcSheetId, r, matchedCol);
+                            if (!(0, lodash_1.isNil)(v) && String(v).length > 0) {
+                                values.add(String(v));
+                            }
+                        }
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (relatedPivots_1_1 && !relatedPivots_1_1.done && (_b = relatedPivots_1.return)) _b.call(relatedPivots_1);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+                // 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]), availableValues = _d.availableValues, selectedValues = _d.selectedValues;
+    var allSelected = selectedValues.size === availableValues.length;
+    // Handle toggling a single value
+    var handleToggleValue = (0, react_1.useCallback)(function (value) {
+        var e_3, _a;
+        var _b;
+        if (readonly || !onFilterTable)
+            return;
+        var newSelectedValues = new Set(selectedValues);
+        if (newSelectedValues.has(value)) {
+            newSelectedValues.delete(value);
+        }
+        else {
+            newSelectedValues.add(value);
+        }
+        var newSelectedArray = Array.from(newSelectedValues);
+        // Call onFilterTable for each connected table
+        if (spec.type === "table") {
+            var relatedTables = (_b = tables === null || tables === void 0 ? void 0 : tables.filter(function (t) { return spec.tableIds.includes(t.id); })) !== null && _b !== void 0 ? _b : [];
+            try {
+                for (var relatedTables_2 = tslib_1.__values(relatedTables), relatedTables_2_1 = relatedTables_2.next(); !relatedTables_2_1.done; relatedTables_2_1 = relatedTables_2.next()) {
+                    var table = relatedTables_2_1.value;
+                    onFilterTable(table.sheetId, table, spec.columnIndex, undefined, undefined, newSelectedArray.length > 0 ? newSelectedArray : null);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (relatedTables_2_1 && !relatedTables_2_1.done && (_a = relatedTables_2.return)) _a.call(relatedTables_2);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
+        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 === null || onFilterPivot === void 0 ? void 0 : onFilterPivot(spec.pivotTableIds, spec.fieldName, newSelectedArray);
+        }
+    }, [
+        readonly,
+        onFilterTable,
+        onFilterPivot,
+        selectedValues,
+        spec,
+        tables,
+    ]);
+    // Handle Clear Filter - select all values (remove filter)
+    var handleClearFilter = (0, react_1.useCallback)(function () {
+        var e_4, _a;
+        var _b;
+        if (readonly)
+            return;
+        if (spec.type === "table") {
+            if (!onFilterTable)
+                return;
+            var relatedTables = (_b = tables === null || tables === void 0 ? void 0 : tables.filter(function (t) { return spec.tableIds.includes(t.id); })) !== null && _b !== void 0 ? _b : [];
+            try {
+                for (var relatedTables_3 = tslib_1.__values(relatedTables), relatedTables_3_1 = relatedTables_3.next(); !relatedTables_3_1.done; relatedTables_3_1 = relatedTables_3.next()) {
+                    var table = relatedTables_3_1.value;
+                    onFilterTable(table.sheetId, table, spec.columnIndex, undefined, undefined, []);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (relatedTables_3_1 && !relatedTables_3_1.done && (_a = relatedTables_3.return)) _a.call(relatedTables_3);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
+        else if (spec.type === "pivot") {
+            // Empty array → `applySlicerSelectionToPivots` calls
+            // `removeFilter`, restoring the pivot's full data.
+            onFilterPivot === null || onFilterPivot === void 0 ? void 0 : onFilterPivot(spec.pivotTableIds, spec.fieldName, []);
+        }
+    }, [readonly, onFilterTable, onFilterPivot, spec, tables]);
+    // Virtual scrolling with TanStack Virtual
+    var ITEM_HEIGHT = 28; // Height of each item in pixels
+    var parentRef = (0, react_1.useRef)(null);
+    var virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: availableValues.length,
+        getScrollElement: function () { return parentRef.current; },
+        estimateSize: function () { return ITEM_HEIGHT; },
+        overscan: 5,
+    });
+    // Disable wheel event
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        if (parentRef.current) {
+            var handleWheel_1 = function (e) {
+                e.stopImmediatePropagation();
+            };
+            parentRef.current.addEventListener("wheel", handleWheel_1);
+            return function () {
+                var _a;
+                (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("wheel", handleWheel_1);
+            };
+        }
+    }, []);
+    return (react_1.default.createElement("div", { className: "flex flex-1 border border-solid border-rnc-border flex-col pointer-events-auto bg-rnc-background min-w-0" },
+        react_1.default.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_1.default.createElement("span", { className: "truncate" }, displayTitle),
+            react_1.default.createElement("div", { className: "flex items-center gap-1" },
+                react_1.default.createElement(ui_1.IconButton, { onClick: handleClearFilter, disabled: readonly || allSelected, tooltip: "Clear filter" },
+                    react_1.default.createElement(icons_1.ResetIcon, null)),
+                react_1.default.createElement(ui_1.IconButton, { onClick: function () { return onDeleteSlicer === null || onDeleteSlicer === void 0 ? void 0 : onDeleteSlicer(slicer.slicerId); }, disabled: readonly, tooltip: "Remove slicer" },
+                    react_1.default.createElement(icons_1.Cross2Icon, null)))),
+        react_1.default.createElement("div", { ref: parentRef, className: "flex-1 overflow-auto  rnc-draggable-ignore" }, availableValues.length === 0 ? (react_1.default.createElement("div", { className: "px-2 py-2 text-sm text-gray-500 italic" }, "No data available")) : (react_1.default.createElement("div", { style: {
+                height: "".concat(virtualizer.getTotalSize(), "px"),
+                width: "100%",
+                position: "relative",
+            } }, virtualizer.getVirtualItems().map(function (virtualItem) {
+            var value = availableValues[virtualItem.index];
+            var isSelected = selectedValues.has(value);
+            var displayValue = value.trim() === "" || (0, lodash_1.isNil)(value) ? config_1.BLANK_LABEL : value;
+            return (react_1.default.createElement(ui_1.Button, { key: virtualItem.key, onClick: function () { return 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: "".concat(virtualItem.size, "px"),
+                    transform: "translateY(".concat(virtualItem.start, "px)"),
+                }, disabled: readonly },
+                react_1.default.createElement("span", { className: "min-w-[15px] block leading-none" }, isSelected ? react_1.default.createElement(icons_1.CheckIcon, null) : null),
+                react_1.default.createElement("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, displayValue)));
+        }))))));
+});
+exports.SlicerComponent.displayName = "SlicerComponent";

package/dist/cjs/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/cjs/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/cjs/components/fill-handle/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FillHandle = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+/**
+ * Fill handle component
+ */
+var FillHandle = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, stroke = _a.stroke, _d = _a.size, size = _d === void 0 ? 6 : _d, borderColor = _a.borderColor, props = tslib_1.__rest(_a, ["x", "y", "stroke", "size", "borderColor"]);
+    if (x === 0 || y === 0)
+        return null;
+    return (react_1.default.createElement("div", tslib_1.__assign({ 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(".concat(x - size / 2, "px, ").concat(y - size / 2, "px, 0)"),
+            borderColor: borderColor,
+            background: stroke,
+        } }, props)));
+};
+exports.FillHandle = FillHandle;

package/dist/cjs/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/cjs/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/cjs/components/filter-box/filter-by-color.js

@@ -0,0 +1,104 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterByColor = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var Row = function (_a) {
+    var selected = _a.selected, onClick = _a.onClick, swatch = _a.swatch, label = _a.label, title = _a.title;
+    return (react_1.default.createElement(ui_1.Button, { type: "button", "aria-pressed": selected, "aria-label": title, title: title, onClick: function (e) {
+            e.stopPropagation();
+            onClick();
+        }, className: "justify-start px-2 py-0 gap-2 text-sm text-left w-full" },
+        react_1.default.createElement("span", { className: "min-w-[15px] block leading-none" }, selected ? react_1.default.createElement(icons_1.CheckIcon, null) : null),
+        swatch,
+        react_1.default.createElement("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, label)));
+};
+var ColorSwatch = function (_a) {
+    var color = _a.color;
+    return (react_1.default.createElement("span", { className: "inline-block h-4 w-4 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }));
+};
+var IconSwatch = function (_a) {
+    var glyph = _a.glyph, color = _a.color;
+    return (react_1.default.createElement("span", { className: "inline-block h-4 w-4 leading-none text-center text-sm shrink-0", style: color ? { color: color } : undefined }, glyph));
+};
+var sameColor = function (a, b) {
+    return !!(a && b) && a.toLowerCase() === b.toLowerCase();
+};
+exports.FilterByColor = (0, react_1.memo)(function (_a) {
+    var colorFilter = _a.colorFilter, iconFilter = _a.iconFilter, availableCellColors = _a.availableCellColors, availableFontColors = _a.availableFontColors, availableIcons = _a.availableIcons, onChangeColorFilter = _a.onChangeColorFilter, onChangeIconFilter = _a.onChangeIconFilter;
+    var cellColors = availableCellColors !== null && availableCellColors !== void 0 ? availableCellColors : [];
+    var fontColors = availableFontColors !== null && availableFontColors !== void 0 ? availableFontColors : [];
+    var icons = availableIcons !== null && availableIcons !== void 0 ? availableIcons : [];
+    if (cellColors.length === 0 &&
+        fontColors.length === 0 &&
+        icons.length === 0) {
+        return null;
+    }
+    var handleCellColor = (0, react_1.useCallback)(function (color) {
+        if ((colorFilter === null || colorFilter === void 0 ? void 0 : colorFilter.mode) === "cellColor" &&
+            sameColor(colorFilter.color, color)) {
+            onChangeColorFilter(null);
+        }
+        else {
+            onChangeColorFilter({ color: color, mode: "cellColor" });
+        }
+    }, [colorFilter, onChangeColorFilter]);
+    var handleFontColor = (0, react_1.useCallback)(function (color) {
+        if ((colorFilter === null || colorFilter === void 0 ? void 0 : colorFilter.mode) === "fontColor" &&
+            sameColor(colorFilter.color, color)) {
+            onChangeColorFilter(null);
+        }
+        else {
+            onChangeColorFilter({ color: color, mode: "fontColor" });
+        }
+    }, [colorFilter, onChangeColorFilter]);
+    var handleIcon = (0, react_1.useCallback)(function (icon) {
+        if ((iconFilter === null || iconFilter === void 0 ? void 0 : iconFilter.iconSet) === icon.iconSet &&
+            (iconFilter === null || iconFilter === void 0 ? void 0 : iconFilter.iconId) === icon.iconId) {
+            onChangeIconFilter(null);
+        }
+        else {
+            onChangeIconFilter({ iconSet: icon.iconSet, iconId: icon.iconId });
+        }
+    }, [iconFilter, onChangeIconFilter]);
+    var hasColors = cellColors.length > 0 || fontColors.length > 0;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        hasColors ? (react_1.default.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by color")) : null,
+        cellColors.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col" },
+            react_1.default.createElement("div", { className: "text-xs text-rnc-muted-foreground px-2 pt-1 pb-0.5" }, "Cell color"),
+            react_1.default.createElement("div", { className: "flex flex-col max-h-44 overflow-y-auto" }, cellColors.map(function (color) {
+                var selected = (colorFilter === null || colorFilter === void 0 ? void 0 : colorFilter.mode) === "cellColor" &&
+                    sameColor(colorFilter.color, color);
+                return (react_1.default.createElement(Row, { key: "cell-".concat(color), selected: selected, onClick: function () { return handleCellColor(color); }, swatch: react_1.default.createElement(ColorSwatch, { color: color }), label: color, title: "Filter by cell color ".concat(color) }));
+            })))) : null,
+        fontColors.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col" },
+            react_1.default.createElement("div", { className: "text-xs text-rnc-muted-foreground px-2 pt-1 pb-0.5" }, "Font color"),
+            react_1.default.createElement("div", { className: "flex flex-col max-h-44 overflow-y-auto" }, fontColors.map(function (color) {
+                var selected = (colorFilter === null || colorFilter === void 0 ? void 0 : colorFilter.mode) === "fontColor" &&
+                    sameColor(colorFilter.color, color);
+                return (react_1.default.createElement(Row, { key: "font-".concat(color), selected: selected, onClick: function () { return handleFontColor(color); }, swatch: react_1.default.createElement(ColorSwatch, { color: color }), label: color, title: "Filter by font color ".concat(color) }));
+            })))) : null,
+        icons.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col" },
+            hasColors ? react_1.default.createElement("div", { className: "h-1" }) : null,
+            react_1.default.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by icon"),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-1 px-2 pb-1" }, icons.map(function (icon) {
+                var selected = (iconFilter === null || iconFilter === void 0 ? void 0 : iconFilter.iconSet) === icon.iconSet &&
+                    (iconFilter === null || iconFilter === void 0 ? void 0 : iconFilter.iconId) === icon.iconId;
+                var title = "Filter by ".concat(icon.iconSet, " icon ").concat(icon.iconId);
+                return (react_1.default.createElement(ui_1.Button, { key: "".concat(icon.iconSet, "-").concat(icon.iconId), type: "button", "aria-pressed": selected, "aria-label": title, title: title, onClick: function (e) {
+                        e.stopPropagation();
+                        handleIcon(icon);
+                    }, className: "h-7 w-7 p-0 flex items-center justify-center ".concat(selected ? "ring-2 ring-blue-500" : "") },
+                    react_1.default.createElement(IconSwatch, { glyph: icon.glyph, color: icon.color })));
+            })))) : null));
+});
+exports.FilterByColor.displayName = "FilterByColor";

package/dist/cjs/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/cjs/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/cjs/components/filter-box/filter-by-condition.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterByCondition = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
+var FilterByCondition = function (_a) {
+    var conditionType = _a.conditionType, fromValue = _a.fromValue, toValue = _a.toValue, onChangeToValue = _a.onChangeToValue, onChangeFromValue = _a.onChangeFromValue, onChangeConditionType = _a.onChangeConditionType;
+    var _b = tslib_1.__read((0, react_1.useState)(function () {
+        return (0, helpers_1.shouldShowToValue)(conditionType);
+    }), 2), showToValue = _b[0], setShowToValue = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(function () {
+        return (0, helpers_1.shouldShowFromValue)(conditionType);
+    }), 2), showFromValue = _c[0], setShowFromValue = _c[1];
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var showTo = (0, helpers_1.shouldShowToValue)(conditionType);
+        var showFrom = (0, helpers_1.shouldShowFromValue)(conditionType);
+        setShowToValue(showTo);
+        setShowFromValue(showFrom);
+        if (!showTo) {
+            onChangeToValue("");
+        }
+    }, [conditionType, onChangeToValue, onChangeFromValue]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by condition"),
+        react_1.default.createElement(ui_1.Select, { value: conditionType !== null && conditionType !== void 0 ? conditionType : config_1.CONDITION_NONE, onValueChange: function (value) {
+                return onChangeConditionType === null || onChangeConditionType === void 0 ? void 0 : onChangeConditionType(value === config_1.CONDITION_NONE
+                    ? undefined
+                    : value);
+            } },
+            react_1.default.createElement(ui_1.SelectTrigger, { className: "mb-1" },
+                react_1.default.createElement(ui_1.SelectValue, { placeholder: "None" })),
+            react_1.default.createElement(ui_1.SelectPortal, null,
+                react_1.default.createElement(ui_1.SelectContent, null,
+                    react_1.default.createElement(ui_1.SelectItem, { value: config_1.CONDITION_NONE }, "None"),
+                    config_1.CONDITION_LABELS.map(function (_a) {
+                        var condition = _a.condition, label = _a.label;
+                        return (react_1.default.createElement(ui_1.SelectItem, { key: condition, value: condition }, label));
+                    })))),
+        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+            showFromValue ? (react_1.default.createElement(ui_1.Input, { value: fromValue, type: "text", name: "fromValue", onChange: function (e) { return onChangeFromValue === null || onChangeFromValue === void 0 ? void 0 : onChangeFromValue(e.target.value); }, className: "text-xs", placeholder: "Enter value" })) : null,
+            showToValue ? (react_1.default.createElement(ui_1.Input, { value: toValue, type: "text", name: "toValue", onChange: function (e) { return onChangeToValue === null || onChangeToValue === void 0 ? void 0 : onChangeToValue(e.target.value); }, className: "text-xs", placeholder: "" })) : null)));
+};
+exports.FilterByCondition = FilterByCondition;

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

package/dist/cjs/components/filter-box/filter-by-value.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterByValue = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_virtual_1 = require("@tanstack/react-virtual");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("react");
+var react_3 = require("react");
+var react_4 = require("react");
+var config_1 = require("../../config");
+var FilterByValue = function (_a) {
+    var visibleValues = _a.visibleValues, _b = _a.values, values = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, onChangeVisibleValues = _a.onChangeVisibleValues;
+    var _c = tslib_1.__read((0, react_4.useState)(""), 2), query = _c[0], setQuery = _c[1];
+    var parentRef = (0, react_3.useRef)(null);
+    var filteredValues = (0, react_1.useMemo)(function () {
+        var regex = new RegExp((0, utils_1.escapeCharacters)(query), "i");
+        return values.filter(function (value) {
+            return regex.test(String(value));
+        });
+    }, [values, query]);
+    var rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: filteredValues.length,
+        getScrollElement: function () { return parentRef.current; },
+        estimateSize: (0, react_2.useCallback)(function () { return 24; }, []),
+        overscan: 5,
+    });
+    var onCheck = function (value) {
+        onChangeVisibleValues(function (prev) {
+            if (prev === void 0) { prev = []; }
+            var newVisibleValues = prev === null || prev === void 0 ? void 0 : prev.concat(value);
+            if ((newVisibleValues === null || newVisibleValues === void 0 ? void 0 : newVisibleValues.length) === values.length) {
+                return undefined;
+            }
+            return newVisibleValues;
+        });
+    };
+    var onUnCheck = function (value) {
+        onChangeVisibleValues(function (prev) {
+            if (prev === void 0) { prev = values; }
+            return prev === null || prev === void 0 ? void 0 : prev.filter(function (cur) { return cur !== value; });
+        });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by value"),
+        react_1.default.createElement(ui_2.Stack, { className: "pb-2 gap-2" },
+            react_1.default.createElement(ui_2.Button, { variant: "link", onClick: function () { return onChangeVisibleValues(undefined); } }, "Select all"),
+            react_1.default.createElement(ui_2.Button, { variant: "link", onClick: function () { return onChangeVisibleValues([]); } }, "Clear")),
+        react_1.default.createElement(ui_1.Input, { type: "text", value: query, onChange: function (e) { return setQuery(e.target.value); }, className: "text-xs" }),
+        react_1.default.createElement("div", { className: "overflow-auto mt-1", style: { maxHeight: 160 }, ref: parentRef },
+            react_1.default.createElement("div", { style: {
+                    height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+                    width: "100%",
+                    position: "relative",
+                } }, rowVirtualizer.getVirtualItems().map(function (virtualItem) {
+                var value = filteredValues[virtualItem.index];
+                var isVisible = visibleValues
+                    ? visibleValues.indexOf(value) !== -1
+                    : true;
+                return (react_1.default.createElement(ui_2.Button, { key: virtualItem.key, type: "button", onMouseDown: function (e) {
+                        e.stopPropagation();
+                    }, onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (isVisible) {
+                            onUnCheck(value);
+                        }
+                        else {
+                            onCheck(value);
+                        }
+                    }, className: "justify-start px-2 py-0 gap-1 text-sm text-left", title: value, style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: "".concat(virtualItem.size, "px"),
+                        transform: "translateY(".concat(virtualItem.start, "px)"),
+                    } },
+                    react_1.default.createElement("span", { className: "min-w-[15px] block leading-none" }, isVisible ? react_1.default.createElement(icons_1.CheckIcon, null) : null),
+                    react_1.default.createElement("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, String(value))));
+            })))));
+};
+exports.FilterByValue = FilterByValue;