@rowsncolumns/spreadsheet 10.3.1 → 10.4.1

package/dist/cjs/components/filter-box/date-tree.js

@@ -0,0 +1,147 @@
+"use strict";
+/**
+ * Excel groups a date column's AutoFilter checklist into a Year → Month → Day
+ * tree with tri-state parents. The checklist only knows each cell's DISPLAYED
+ * text, so a value is treated as a date when it parses as one AND looks like
+ * one — digits separated by `/ - .` or a month name — which keeps plain
+ * numbers ("2026") and text out. The tree is built only when every non-blank
+ * value in the column is such a date (a mixed column stays a flat list, as a
+ * text column would). Newest first at every level, matching Excel.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.triState = exports.buildDateTree = exports.parseFilterDateValue = void 0;
+var tslib_1 = require("tslib");
+var MIN_YEAR = 1900;
+var MAX_YEAR = 2199;
+var DATE_SHAPE = /(\d[/.\-]\d)|([A-Za-z]{3,}.*\d)|(\d.*[A-Za-z]{3,})/;
+var MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+/** The calendar date a checklist value displays, or `undefined` when it is not a date. */
+var parseFilterDateValue = function (value) {
+    var trimmed = value.trim();
+    if (!trimmed || !DATE_SHAPE.test(trimmed))
+        return undefined;
+    var parsed = new Date(trimmed);
+    var time = parsed.getTime();
+    if (Number.isNaN(time))
+        return undefined;
+    var year = parsed.getFullYear();
+    if (year < MIN_YEAR || year > MAX_YEAR)
+        return undefined;
+    return parsed;
+};
+exports.parseFilterDateValue = parseFilterDateValue;
+/**
+ * Year → Month → Day nodes for `values`, or `undefined` when the column is
+ * not a date column. `blankLabel` (the "(Blanks)" entry) is skipped; callers
+ * render it beside the tree.
+ */
+var buildDateTree = function (values, blankLabel) {
+    var e_1, _a, e_2, _b;
+    var _c, _d, _e;
+    var dated = [];
+    try {
+        for (var values_1 = tslib_1.__values(values), values_1_1 = values_1.next(); !values_1_1.done; values_1_1 = values_1.next()) {
+            var value = values_1_1.value;
+            if (value === blankLabel)
+                continue;
+            var date = (0, exports.parseFilterDateValue)(value);
+            if (!date)
+                return undefined;
+            dated.push({ value: value, date: date });
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (values_1_1 && !values_1_1.done && (_a = values_1.return)) _a.call(values_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    if (!dated.length)
+        return undefined;
+    var years = new Map();
+    try {
+        for (var dated_1 = tslib_1.__values(dated), dated_1_1 = dated_1.next(); !dated_1_1.done; dated_1_1 = dated_1.next()) {
+            var _f = dated_1_1.value, value = _f.value, date = _f.date;
+            var y = date.getFullYear();
+            var m = date.getMonth();
+            var d = date.getDate();
+            var months = (_c = years.get(y)) !== null && _c !== void 0 ? _c : new Map();
+            years.set(y, months);
+            var days = (_d = months.get(m)) !== null && _d !== void 0 ? _d : new Map();
+            months.set(m, days);
+            var bucket = (_e = days.get(d)) !== null && _e !== void 0 ? _e : [];
+            days.set(d, bucket);
+            if (!bucket.includes(value))
+                bucket.push(value);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (dated_1_1 && !dated_1_1.done && (_b = dated_1.return)) _b.call(dated_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    var desc = function (a, b) { return b - a; };
+    return tslib_1.__spreadArray([], tslib_1.__read(years.keys()), false).sort(desc).map(function (y) {
+        var months = years.get(y);
+        var monthNodes = tslib_1.__spreadArray([], tslib_1.__read(months.keys()), false).sort(desc).map(function (m) {
+            var days = months.get(m);
+            var dayNodes = tslib_1.__spreadArray([], tslib_1.__read(days.keys()), false).sort(desc).map(function (d) { return ({
+                key: "d:".concat(y, "-").concat(m + 1, "-").concat(d),
+                label: String(d),
+                values: days.get(d),
+            }); });
+            return {
+                key: "m:".concat(y, "-").concat(m + 1),
+                label: MONTH_NAMES[m],
+                values: dayNodes.flatMap(function (node) { return node.values; }),
+                children: dayNodes,
+            };
+        });
+        return {
+            key: "y:".concat(y),
+            label: String(y),
+            values: monthNodes.flatMap(function (node) { return node.values; }),
+            children: monthNodes,
+        };
+    });
+};
+exports.buildDateTree = buildDateTree;
+/** `true` all checked, `false` none, `"mixed"` some — the tri-state of a node or the whole list. */
+var triState = function (values, isVisible) {
+    var e_3, _a;
+    var checked = 0;
+    try {
+        for (var values_2 = tslib_1.__values(values), values_2_1 = values_2.next(); !values_2_1.done; values_2_1 = values_2.next()) {
+            var value = values_2_1.value;
+            if (isVisible(value))
+                checked++;
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (values_2_1 && !values_2_1.done && (_a = values_2.return)) _a.call(values_2);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    if (checked === 0)
+        return values.length === 0 ? true : false;
+    return checked === values.length ? true : "mixed";
+};
+exports.triState = triState;

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

@@ -1,5 +1,8 @@
 import React from "react";
-import type { ConditionType } from "../../types";
+import type { ConditionType, FilterConditionJoin } from "../../types";
+/** Excel's "Top 10…" AutoFilter: the four `NUMBER_TOP_*` / `NUMBER_BOTTOM_*` condition types. */
+export declare const isTop10ConditionType: (type: ConditionType | undefined) => type is "NUMBER_TOP_N" | "NUMBER_BOTTOM_N" | "NUMBER_TOP_PERCENT" | "NUMBER_BOTTOM_PERCENT";
+export declare const top10ConditionType: (direction: "top" | "bottom", unit: "items" | "percent") => ConditionType;
 type FilterByConditionProps = {
     conditionType?: ConditionType;
     fromValue: string;
@@ -7,7 +10,16 @@ type FilterByConditionProps = {
     onChangeFromValue(value: string): void;
     onChangeToValue(value: string): void;
     onChangeConditionType?(type: ConditionType | undefined): void;
+    /** Excel's Custom AutoFilter second clause and its And / Or join. */
+    condition2Type?: ConditionType;
+    condition2From: string;
+    condition2To: string;
+    conditionJoin: FilterConditionJoin;
+    onChangeCondition2Type(type: ConditionType | undefined): void;
+    onChangeCondition2From(value: string): void;
+    onChangeCondition2To(value: string): void;
+    onChangeConditionJoin(join: FilterConditionJoin): void;
 };
-export declare const FilterByCondition: ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, }: FilterByConditionProps) => React.JSX.Element;
+export declare const FilterByCondition: ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, condition2Type, condition2From, condition2To, conditionJoin, onChangeCondition2Type, onChangeCondition2From, onChangeCondition2To, onChangeConditionJoin, }: FilterByConditionProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=filter-by-condition.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"filter-by-condition.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-condition.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEtE,iGAAiG;AACjG,eAAO,MAAM,oBAAoB,GAAI,MAAM,aAAa,GAAG,SAAS,gGAIlC,CAAC;AAEnC,eAAO,MAAM,kBAAkB,GAC7B,WAAW,KAAK,GAAG,QAAQ,EAC3B,MAAM,OAAO,GAAG,SAAS,KACxB,aAO4B,CAAC;AAchC,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;IAC9D,qEAAqE;IACrE,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,mBAAmB,CAAC;IACnC,sBAAsB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9D,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,qBAAqB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACxD,CAAC;AAsKF,eAAO,MAAM,iBAAiB,GAAI,6PAe/B,sBAAsB,sBAuFxB,CAAC"}

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

@@ -1,14 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterByCondition = void 0;
+exports.FilterByCondition = exports.top10ConditionType = exports.isTop10ConditionType = 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;
+/** Excel's "Top 10…" AutoFilter: the four `NUMBER_TOP_*` / `NUMBER_BOTTOM_*` condition types. */
+var isTop10ConditionType = function (type) {
+    return type === "NUMBER_TOP_N" ||
+        type === "NUMBER_BOTTOM_N" ||
+        type === "NUMBER_TOP_PERCENT" ||
+        type === "NUMBER_BOTTOM_PERCENT";
+};
+exports.isTop10ConditionType = isTop10ConditionType;
+var top10ConditionType = function (direction, unit) {
+    return direction === "top"
+        ? unit === "items"
+            ? "NUMBER_TOP_N"
+            : "NUMBER_TOP_PERCENT"
+        : unit === "items"
+            ? "NUMBER_BOTTOM_N"
+            : "NUMBER_BOTTOM_PERCENT";
+};
+exports.top10ConditionType = top10ConditionType;
+/**
+ * Conditions Excel's Custom AutoFilter offers for its second clause: the
+ * per-cell comparisons. Column-ranked filters (Top 10, above / below
+ * average) are whole-column criteria and can't be And/Or-ed with another.
+ */
+var SECOND_CLAUSE_LABELS = config_1.CONDITION_LABELS.filter(function (_a) {
+    var condition = _a.condition;
+    return !(0, exports.isTop10ConditionType)(condition) &&
+        condition !== "NUMBER_ABOVE_AVERAGE" &&
+        condition !== "NUMBER_BELOW_AVERAGE";
+});
+var ConditionSelect = function (_a) {
+    var value = _a.value, labels = _a.labels, onChange = _a.onChange, ariaLabel = _a.ariaLabel;
+    return (react_1.default.createElement(ui_1.Select, { value: value !== null && value !== void 0 ? value : config_1.CONDITION_NONE, onValueChange: function (next) {
+            return onChange(next === config_1.CONDITION_NONE ? undefined : next);
+        } },
+        react_1.default.createElement(ui_1.SelectTrigger, { className: "mb-1", "aria-label": ariaLabel },
+            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"),
+                labels.map(function (_a) {
+                    var condition = _a.condition, label = _a.label;
+                    return (react_1.default.createElement(ui_1.SelectItem, { key: condition, value: condition }, label));
+                })))));
+};
+var ValueInputs = function (_a) {
+    var conditionType = _a.conditionType, fromValue = _a.fromValue, toValue = _a.toValue, onChangeFromValue = _a.onChangeFromValue, onChangeToValue = _a.onChangeToValue, namePrefix = _a.namePrefix;
     var _b = tslib_1.__read((0, react_1.useState)(function () {
         return (0, helpers_1.shouldShowToValue)(conditionType);
     }), 2), showToValue = _b[0], setShowToValue = _b[1];
@@ -24,24 +68,56 @@ var FilterByCondition = function (_a) {
             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);
+    return (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: "".concat(namePrefix, "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: "".concat(namePrefix, "toValue"), onChange: function (e) { return onChangeToValue === null || onChangeToValue === void 0 ? void 0 : onChangeToValue(e.target.value); }, className: "text-xs", placeholder: "" })) : null));
+};
+/** Excel's Top 10 AutoFilter dialog: [Top | Bottom] [N] [Items | Percent]. */
+var Top10Fields = function (_a) {
+    var conditionType = _a.conditionType, count = _a.count, onChangeConditionType = _a.onChangeConditionType, onChangeCount = _a.onChangeCount;
+    var direction = conditionType === "NUMBER_TOP_N" || conditionType === "NUMBER_TOP_PERCENT"
+        ? "top"
+        : "bottom";
+    var unit = conditionType === "NUMBER_TOP_PERCENT" ||
+        conditionType === "NUMBER_BOTTOM_PERCENT"
+        ? "percent"
+        : "items";
+    return (react_1.default.createElement(ui_1.Stack, { className: "gap-1 items-center" },
+        react_1.default.createElement(ui_1.Select, { value: direction, onValueChange: function (next) {
+                return onChangeConditionType((0, exports.top10ConditionType)(next === "bottom" ? "bottom" : "top", unit));
             } },
-            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.SelectTrigger, { className: "w-24", "aria-label": "Top or bottom" },
+                react_1.default.createElement(ui_1.SelectValue, null)),
             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)));
+                    react_1.default.createElement(ui_1.SelectItem, { value: "top" }, "Top"),
+                    react_1.default.createElement(ui_1.SelectItem, { value: "bottom" }, "Bottom")))),
+        react_1.default.createElement(ui_1.Input, { value: count, type: "number", min: 1, name: "top10Count", "aria-label": "Top 10 count", onChange: function (e) { return onChangeCount(e.target.value); }, className: "text-xs w-16" }),
+        react_1.default.createElement(ui_1.Select, { value: unit, onValueChange: function (next) {
+                return onChangeConditionType((0, exports.top10ConditionType)(direction, next === "percent" ? "percent" : "items"));
+            } },
+            react_1.default.createElement(ui_1.SelectTrigger, { className: "w-24", "aria-label": "Items or percent" },
+                react_1.default.createElement(ui_1.SelectValue, null)),
+            react_1.default.createElement(ui_1.SelectPortal, null,
+                react_1.default.createElement(ui_1.SelectContent, null,
+                    react_1.default.createElement(ui_1.SelectItem, { value: "items" }, "Items"),
+                    react_1.default.createElement(ui_1.SelectItem, { value: "percent" }, "Percent"))))));
+};
+var FilterByCondition = function (_a) {
+    var conditionType = _a.conditionType, fromValue = _a.fromValue, toValue = _a.toValue, onChangeToValue = _a.onChangeToValue, onChangeFromValue = _a.onChangeFromValue, onChangeConditionType = _a.onChangeConditionType, condition2Type = _a.condition2Type, condition2From = _a.condition2From, condition2To = _a.condition2To, conditionJoin = _a.conditionJoin, onChangeCondition2Type = _a.onChangeCondition2Type, onChangeCondition2From = _a.onChangeCondition2From, onChangeCondition2To = _a.onChangeCondition2To, onChangeConditionJoin = _a.onChangeConditionJoin;
+    // Excel's Custom AutoFilter shows the second clause row only on request;
+    // it stays open while a second clause is stored on the column.
+    var _b = tslib_1.__read((0, react_1.useState)(function () { return condition2Type !== undefined; }), 2), showSecondClause = _b[0], setShowSecondClause = _b[1];
+    var isTop10 = (0, exports.isTop10ConditionType)(conditionType);
+    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(ConditionSelect, { value: conditionType, labels: config_1.CONDITION_LABELS, onChange: function (type) { return onChangeConditionType === null || onChangeConditionType === void 0 ? void 0 : onChangeConditionType(type); }, ariaLabel: "Condition" }),
+        isTop10 && conditionType ? (react_1.default.createElement(Top10Fields, { conditionType: conditionType, count: fromValue, onChangeConditionType: function (type) { return onChangeConditionType === null || onChangeConditionType === void 0 ? void 0 : onChangeConditionType(type); }, onChangeCount: onChangeFromValue })) : (react_1.default.createElement(ValueInputs, { conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeFromValue: onChangeFromValue, onChangeToValue: onChangeToValue, namePrefix: "" })),
+        conditionType && !isTop10 ? (showSecondClause ? (react_1.default.createElement("div", { className: "mt-1 flex flex-col gap-1" },
+            react_1.default.createElement("div", { role: "radiogroup", "aria-label": "Combine conditions", className: "flex gap-3 text-xs px-1" }, ["AND", "OR"].map(function (join) { return (react_1.default.createElement("label", { key: join, className: "flex items-center gap-1 cursor-pointer" },
+                react_1.default.createElement("input", { type: "radio", name: "conditionJoin", value: join, checked: conditionJoin === join, onChange: function () { return onChangeConditionJoin(join); } }),
+                join === "AND" ? "And" : "Or")); })),
+            react_1.default.createElement(ConditionSelect, { value: condition2Type, labels: SECOND_CLAUSE_LABELS, onChange: onChangeCondition2Type, ariaLabel: "Second condition" }),
+            react_1.default.createElement(ValueInputs, { conditionType: condition2Type, fromValue: condition2From, toValue: condition2To, onChangeFromValue: onChangeCondition2From, onChangeToValue: onChangeCondition2To, namePrefix: "second" }))) : (react_1.default.createElement(ui_1.Button, { type: "button", variant: "link", className: "text-xs px-1 mt-1 self-start", onClick: function () { return setShowSecondClause(true); } }, "Custom filter (And / Or)\u2026"))) : null));
 };
 exports.FilterByCondition = FilterByCondition;

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

@@ -1 +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"}
+{"version":3,"file":"filter-by-value.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-value.tsx"],"names":[],"mappings":"AASA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,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;AAcF,eAAO,MAAM,aAAa,GAAI,mDAI3B,kBAAkB,sBA+PpB,CAAC"}

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

@@ -4,73 +4,159 @@ 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 date_tree_1 = require("./date-tree");
+/** Excel's checklist glyph: checked, unchecked, or the "some children" dash. */
+var TriStateMark = function (_a) {
+    var state = _a.state;
+    return (react_1.default.createElement("span", { className: "min-w-[15px] h-[15px] block leading-none border border-gray-400 rounded-sm text-center shrink-0", "aria-hidden": true }, state === true ? react_1.default.createElement(icons_1.CheckIcon, null) : state === "mixed" ? react_1.default.createElement(icons_1.DividerHorizontalIcon, null) : null));
+};
+var rowClassName = "justify-start px-2 py-0 gap-1 text-sm text-left w-full h-6";
 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 _c = tslib_1.__read((0, react_1.useState)(""), 2), query = _c[0], setQuery = _c[1];
+    // Excel's "Add current selection to filter": while searching, checking the
+    // results ADDS them to the values already shown instead of replacing them.
+    var _d = tslib_1.__read((0, react_1.useState)(false), 2), addToSelection = _d[0], setAddToSelection = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(function () { return new Set(); }), 2), expanded = _e[0], setExpanded = _e[1];
+    var parentRef = (0, react_1.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));
-        });
+        return values.filter(function (value) { return regex.test(String(value)); });
     }, [values, query]);
+    // A date column's checklist is a Year → Month → Day tree; a search flattens
+    // it to the matching values, as Excel does.
+    var dateTree = (0, react_1.useMemo)(function () { return (query ? undefined : (0, date_tree_1.buildDateTree)(values, config_1.BLANK_LABEL)); }, [values, query]);
+    var hasBlank = values.includes(config_1.BLANK_LABEL);
+    var visibleSet = (0, react_1.useMemo)(function () { return (visibleValues ? new Set(visibleValues) : undefined); }, [visibleValues]);
+    var isVisible = (0, react_1.useCallback)(function (value) { return !visibleSet || visibleSet.has(value); }, [visibleSet]);
+    // `undefined` visible values = everything shown; collapse back to it once
+    // every value is checked so a full checklist never becomes a whitelist.
+    var normalize = (0, react_1.useCallback)(function (next) {
+        return values.every(function (value) { return next.has(value); }) ? undefined : tslib_1.__spreadArray([], tslib_1.__read(next), false);
+    }, [values]);
+    var setChecked = (0, react_1.useCallback)(function (targets, checked) {
+        onChangeVisibleValues(function (prev) {
+            var e_1, _a;
+            var next = new Set(prev !== null && prev !== void 0 ? prev : values);
+            try {
+                for (var targets_1 = tslib_1.__values(targets), targets_1_1 = targets_1.next(); !targets_1_1.done; targets_1_1 = targets_1.next()) {
+                    var value = targets_1_1.value;
+                    if (checked)
+                        next.add(value);
+                    else
+                        next.delete(value);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (targets_1_1 && !targets_1_1.done && (_a = targets_1.return)) _a.call(targets_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return normalize(next);
+        });
+    }, [onChangeVisibleValues, values, normalize]);
+    var selectAllState = (0, date_tree_1.triState)(filteredValues, isVisible);
+    var onToggleSelectAll = (0, react_1.useCallback)(function () {
+        if (selectAllState === true) {
+            setChecked(filteredValues, false);
+            return;
+        }
+        if (query && !addToSelection) {
+            // Checking the search results shows ONLY them (Excel replaces the
+            // selection unless "Add current selection to filter" is on).
+            onChangeVisibleValues(normalize(new Set(filteredValues)));
+            return;
+        }
+        setChecked(filteredValues, true);
+    }, [
+        selectAllState,
+        setChecked,
+        filteredValues,
+        query,
+        addToSelection,
+        onChangeVisibleValues,
+        normalize,
+    ]);
     var rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
         count: filteredValues.length,
         getScrollElement: function () { return parentRef.current; },
-        estimateSize: (0, react_2.useCallback)(function () { return 24; }, []),
+        estimateSize: (0, react_1.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 toggleExpanded = function (key) {
+        return setExpanded(function (prev) {
+            var next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
         });
     };
-    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; });
-        });
+    var renderTreeNode = function (node, depth) {
+        var _a;
+        var state = (0, date_tree_1.triState)(node.values, isVisible);
+        var isExpanded = expanded.has(node.key);
+        return (react_1.default.createElement(react_1.default.Fragment, { key: node.key },
+            react_1.default.createElement("div", { className: "flex items-center", style: { paddingLeft: depth * 14 } },
+                node.children ? (react_1.default.createElement("button", { type: "button", "aria-expanded": isExpanded, "aria-label": "".concat(isExpanded ? "Collapse" : "Expand", " ").concat(node.label), className: "w-4 h-4 flex items-center justify-center shrink-0", onClick: function (e) {
+                        e.stopPropagation();
+                        toggleExpanded(node.key);
+                    } }, isExpanded ? react_1.default.createElement(icons_1.ChevronDownIcon, null) : react_1.default.createElement(icons_1.ChevronRightIcon, null))) : (react_1.default.createElement("span", { className: "w-4 shrink-0" })),
+                react_1.default.createElement(ui_1.Button, { type: "button", role: "checkbox", "aria-checked": state, onMouseDown: function (e) { return e.stopPropagation(); }, onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setChecked(node.values, state !== true);
+                    }, className: rowClassName, title: node.label },
+                    react_1.default.createElement(TriStateMark, { state: state }),
+                    react_1.default.createElement("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, node.label))),
+            isExpanded
+                ? (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(function (child) { return renderTreeNode(child, depth + 1); })
+                : null));
     };
     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(ui_1.Input, { type: "text", value: query, onChange: function (e) { return setQuery(e.target.value); }, placeholder: "Search", "aria-label": "Search values", className: "text-xs" }),
+        react_1.default.createElement(ui_1.Button, { type: "button", role: "checkbox", "aria-checked": selectAllState, onMouseDown: function (e) { return e.stopPropagation(); }, onClick: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                onToggleSelectAll();
+            }, className: "".concat(rowClassName, " mt-1 font-medium") },
+            react_1.default.createElement(TriStateMark, { state: selectAllState }),
+            react_1.default.createElement("span", null, query ? "(Select All Search Results)" : "(Select All)")),
+        query ? (react_1.default.createElement("label", { className: "flex items-center gap-2 text-xs px-2 py-0.5 select-none cursor-pointer" },
+            react_1.default.createElement("input", { type: "checkbox", checked: addToSelection, onChange: function (e) { return setAddToSelection(e.target.checked); } }),
+            "Add current selection to filter")) : null,
+        dateTree ? (react_1.default.createElement("div", { className: "overflow-auto mt-1 flex flex-col", style: { maxHeight: 160 } },
+            dateTree.map(function (node) { return renderTreeNode(node, 0); }),
+            hasBlank ? (react_1.default.createElement("div", { className: "flex items-center" },
+                react_1.default.createElement("span", { className: "w-4 shrink-0" }),
+                react_1.default.createElement(ui_1.Button, { type: "button", role: "checkbox", "aria-checked": isVisible(config_1.BLANK_LABEL), onMouseDown: function (e) { return e.stopPropagation(); }, onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setChecked([config_1.BLANK_LABEL], !isVisible(config_1.BLANK_LABEL));
+                    }, className: rowClassName, title: config_1.BLANK_LABEL },
+                    react_1.default.createElement(TriStateMark, { state: isVisible(config_1.BLANK_LABEL) }),
+                    react_1.default.createElement("span", null, config_1.BLANK_LABEL)))) : null)) : (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) {
+                var checked = isVisible(value);
+                return (react_1.default.createElement(ui_1.Button, { key: virtualItem.key, type: "button", role: "checkbox", "aria-checked": checked, onMouseDown: function (e) {
                         e.stopPropagation();
                     }, onClick: function (e) {
                         e.preventDefault();
                         e.stopPropagation();
-                        if (isVisible) {
-                            onUnCheck(value);
-                        }
-                        else {
-                            onCheck(value);
-                        }
+                        setChecked([value], !checked);
                     }, className: "justify-start px-2 py-0 gap-1 text-sm text-left", title: value, style: {
                         position: "absolute",
                         top: 0,
@@ -79,8 +165,8 @@ var FilterByValue = function (_a) {
                         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(TriStateMark, { state: checked }),
                     react_1.default.createElement("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, String(value))));
-            })))));
+            }))))));
 };
 exports.FilterByValue = FilterByValue;

package/dist/cjs/components/filter-box/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { UseFilterProps } from "../../hooks/use-filter";
-import type { FilterView, TableView } from "../../types";
+import type { FilterCriteria, FilterView, TableView } from "../../types";
 import type { AvailableIcon } from "./filter-by-color";
 export type { AvailableIcon } from "./filter-by-color";
 export type FilterBoxBaseProps = {
@@ -32,6 +32,12 @@ export type FilterBoxBaseProps = {
     customLists?: string[][];
 };
 export declare const isTableView: (filter: FilterView | TableView) => filter is TableView;
+/**
+ * Whether a column's stored criteria still filter anything — what enables
+ * Excel's "Clear Filter From <column>" item. Same test as the state layer's
+ * `isFilterCriteriaActive`.
+ */
+export declare const hasActiveFilterCriteria: (criteria: FilterCriteria | undefined) => boolean;
 export declare const FilterBoxWrapper: React.MemoExoticComponent<({ dimensionIndex, onOpenChange, onSort, onFilter, onDeleteTableColumn, onInsertTableColumn, sheetId, filter, values, availableCellColors, availableFontColors, availableIcons, customLists, }: FilterBoxProps) => React.JSX.Element>;
 export type FilterBoxProps = FilterBoxBaseProps & {
     sheetId: number;

package/dist/cjs/components/filter-box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAIV,UAAU,EAGV,SAAS,EACV,MAAM,aAAa,CAAC;AAIrB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IACtC,QAAQ,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC1C,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC3D,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,sEAAsE;IACtE,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,WAAW,GACtB,QAAQ,UAAU,GAAG,SAAS,KAC7B,MAAM,IAAI,SAEZ,CAAC;AA0BF,eAAO,MAAM,gBAAgB,4NAexB,cAAc,uBAkalB,CAAC;AAIF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS;YAAW,cAAc;;CAuC9C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAMV,cAAc,EACd,UAAU,EAGV,SAAS,EACV,MAAM,aAAa,CAAC;AAKrB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IACtC,QAAQ,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC1C,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC3D,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,sEAAsE;IACtE,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,WAAW,GACtB,QAAQ,UAAU,GAAG,SAAS,KAC7B,MAAM,IAAI,SAEZ,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,cAAc,GAAG,SAAS,KACnC,OAQA,CAAC;AA0BJ,eAAO,MAAM,gBAAgB,4NAexB,cAAc,uBA4kBlB,CAAC;AAIF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS;YAAW,cAAc;;CAuC9C,CAAC"}