@rowsncolumns/spreadsheet 10.4.1 → 10.4.2

package/dist/cjs/components/filter-box/date-tree.d.ts

@@ -2,10 +2,14 @@
  * 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
+ * one — three digit groups separated by `/ - .` or a month name — which keeps
+ * plain numbers ("2026"), fractions / ranges ("1/2", "3-4") 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.
+ * text column would).
+ *
+ * Every level — years, months, days — is listed oldest-first (chronological).
+ * This deliberately diverges from Excel, which lists newest-first: product
+ * decision by Vinay, 2026-09-24. Do not "fix" it back to match Excel.
  */
 export type DateTreeNode = {
     /** Stable key: `y:2026`, `m:2026-09`, `d:2026-09-29`. */
@@ -19,10 +23,24 @@ export type DateTreeNode = {
 export declare const parseFilterDateValue: (value: string) => Date | undefined;
 /**
  * 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.
+ * not a date column — the same `classifyFilterColumn` verdict the condition
+ * menu uses, so a column of decimals or ranges ("1.5", "3-4", which V8 also
+ * parses as 2001 dates) stays a flat list. `blankLabel` (the "(Blanks)"
+ * entry) is skipped; callers render it beside the tree.
  */
 export declare const buildDateTree: (values: readonly string[], blankLabel: string) => DateTreeNode[] | undefined;
 /** `true` all checked, `false` none, `"mixed"` some — the tri-state of a node or the whole list. */
 export declare const triState: (values: readonly string[], isVisible: (value: string) => boolean) => boolean | "mixed";
+/**
+ * The family of AutoFilter conditions Excel offers for a column — "Text
+ * Filters", "Number Filters" or "Date Filters" — decided from the same
+ * displayed values the checklist shows. A column is a number column when every
+ * non-blank value is numeric, a date column when every non-blank value is a
+ * date (the rule `buildDateTree` uses), and a text column otherwise (mixed
+ * columns and empty columns included).
+ */
+export type FilterColumnType = "text" | "number" | "date";
+/** `true` when a displayed value reads as a number: "42", "-1,234.5", "$1,200", "12%", "(300)". */
+export declare const isFilterNumberValue: (value: string) => boolean;
+export declare const classifyFilterColumn: (values: readonly string[], blankLabel: string) => FilterColumnType;
 //# sourceMappingURL=date-tree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"date-tree.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/date-tree.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B,CAAC;AAqBF,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,SAS3D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,SAAS,MAAM,EAAE,EACzB,YAAY,MAAM,KACjB,YAAY,EAAE,GAAG,SAgDnB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,QAAQ,GACnB,QAAQ,SAAS,MAAM,EAAE,EACzB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,KACpC,OAAO,GAAG,OAOZ,CAAC"}
+{"version":3,"file":"date-tree.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/date-tree.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B,CAAC;AAwBF,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,SAS3D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,SAAS,MAAM,EAAE,EACzB,YAAY,MAAM,KACjB,YAAY,EAAE,GAAG,SAiDnB,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,QAAQ,GACnB,QAAQ,SAAS,MAAM,EAAE,EACzB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,KACpC,OAAO,GAAG,OAOZ,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAO1D,mGAAmG;AACnG,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,KAAG,OASnD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,SAAS,MAAM,EAAE,EACzB,YAAY,MAAM,KACjB,gBAiBF,CAAC"}

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

@@ -3,17 +3,24 @@
  * 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
+ * one — three digit groups separated by `/ - .` or a month name — which keeps
+ * plain numbers ("2026"), fractions / ranges ("1/2", "3-4") 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.
+ * text column would).
+ *
+ * Every level — years, months, days — is listed oldest-first (chronological).
+ * This deliberately diverges from Excel, which lists newest-first: product
+ * decision by Vinay, 2026-09-24. Do not "fix" it back to match Excel.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.triState = exports.buildDateTree = exports.parseFilterDateValue = void 0;
+exports.classifyFilterColumn = exports.isFilterNumberValue = 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,})/;
+// An all-digit date needs three parts ("9/29/2026", "3.4.26"): two-part
+// shapes ("3-4", "1/2") are ranges or fractions, though V8 parses them as
+// 2001 dates. Month-name shapes ("4-Mar", "15 Mar 2026") need no year.
+var DATE_SHAPE = /(\d[/.\-]\d+[/.\-]\d)|([A-Za-z]{3,}.*\d)|(\d.*[A-Za-z]{3,})/;
 var MONTH_NAMES = [
     "January",
     "February",
@@ -45,12 +52,16 @@ var parseFilterDateValue = function (value) {
 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.
+ * not a date column — the same `classifyFilterColumn` verdict the condition
+ * menu uses, so a column of decimals or ranges ("1.5", "3-4", which V8 also
+ * parses as 2001 dates) stays a flat list. `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;
+    if ((0, exports.classifyFilterColumn)(values, blankLabel) !== "date")
+        return undefined;
     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()) {
@@ -96,12 +107,12 @@ var buildDateTree = function (values, blankLabel) {
         }
         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 asc = function (a, b) { return a - b; };
+    return tslib_1.__spreadArray([], tslib_1.__read(years.keys()), false).sort(asc).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 monthNodes = tslib_1.__spreadArray([], tslib_1.__read(months.keys()), false).sort(asc).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 ({
+            var dayNodes = tslib_1.__spreadArray([], tslib_1.__read(days.keys()), false).sort(asc).map(function (d) { return ({
                 key: "d:".concat(y, "-").concat(m + 1, "-").concat(d),
                 label: String(d),
                 values: days.get(d),
@@ -145,3 +156,57 @@ var triState = function (values, isVisible) {
     return checked === values.length ? true : "mixed";
 };
 exports.triState = triState;
+var CURRENCY_SYMBOLS = /^[$€£¥₹]|[$€£¥₹]$/g;
+// `\s` already covers the no-break and narrow no-break spaces locales pad thousands with.
+var THOUSANDS_SEPARATORS = /[,\s']/g;
+var NUMBER_SHAPE = /^[-+]?(\d+\.?\d*|\.\d+)(e[-+]?\d+)?%?$/i;
+/** `true` when a displayed value reads as a number: "42", "-1,234.5", "$1,200", "12%", "(300)". */
+var isFilterNumberValue = function (value) {
+    var text = value.trim();
+    if (!text)
+        return false;
+    if (text.startsWith("(") && text.endsWith(")")) {
+        text = text.slice(1, -1).trim();
+    }
+    text = text.replace(CURRENCY_SYMBOLS, "").trim();
+    text = text.replace(THOUSANDS_SEPARATORS, "");
+    return NUMBER_SHAPE.test(text) && Number.isFinite(Number(text.replace(/%$/, "")));
+};
+exports.isFilterNumberValue = isFilterNumberValue;
+var classifyFilterColumn = function (values, blankLabel) {
+    var e_4, _a;
+    var seen = 0;
+    var allDates = true;
+    var allNumbers = true;
+    try {
+        for (var values_3 = tslib_1.__values(values), values_3_1 = values_3.next(); !values_3_1.done; values_3_1 = values_3.next()) {
+            var value = values_3_1.value;
+            if (value === blankLabel || !value.trim())
+                continue;
+            seen++;
+            if (allDates && !(0, exports.parseFilterDateValue)(value))
+                allDates = false;
+            if (allNumbers && !(0, exports.isFilterNumberValue)(value))
+                allNumbers = false;
+            if (!allDates && !allNumbers)
+                return "text";
+        }
+    }
+    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+    finally {
+        try {
+            if (values_3_1 && !values_3_1.done && (_a = values_3.return)) _a.call(values_3);
+        }
+        finally { if (e_4) throw e_4.error; }
+    }
+    if (!seen)
+        return "text";
+    // Numbers first: V8 also parses "1.5" or "3-4" as a date (Jan 5 / Mar 4,
+    // 2001), so a decimals column would otherwise be offered date filters.
+    if (allNumbers)
+        return "number";
+    if (allDates)
+        return "date";
+    return "text";
+};
+exports.classifyFilterColumn = classifyFilterColumn;

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

@@ -1,9 +1,34 @@
 import React from "react";
+import { CONDITION_LABELS } from "../../config";
 import type { ConditionType, FilterConditionJoin } from "../../types";
+import type { FilterColumnType } from "./date-tree";
 /** 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 ConditionLabel = (typeof CONDITION_LABELS)[number];
+/** One section of the condition menu; `label` renders as a group heading (Excel's "All Dates in the Period ▸"). */
+export type ConditionOptionGroup = {
+    key: string;
+    label?: string;
+    options: ConditionLabel[];
+};
+export declare const DATE_PERIOD_GROUP_LABEL = "All dates in the period";
+/**
+ * The condition menu Excel shows for a column: one family — "Text Filters",
+ * "Number Filters" or "Date Filters" (with the sixteen period conditions
+ * grouped under "All Dates in the Period") — plus the generic items. With no
+ * `columnType` (an unclassified column) every family is offered, grouped.
+ * A `current` condition from another family (a date filter stored on a column
+ * that now holds text) stays listed and selected so the user can see and
+ * clear it instead of it silently vanishing from the menu.
+ */
+export declare const conditionOptionsFor: (labels: readonly ConditionLabel[], columnType: FilterColumnType | undefined, current: ConditionType | undefined) => ConditionOptionGroup[];
 type FilterByConditionProps = {
+    /**
+     * The column's predominant value type — picks the Excel family the
+     * condition menu offers. Omit to offer every family.
+     */
+    columnType?: FilterColumnType;
     conditionType?: ConditionType;
     fromValue: string;
     toValue: string;
@@ -20,6 +45,6 @@ type FilterByConditionProps = {
     onChangeCondition2To(value: string): void;
     onChangeConditionJoin(join: FilterConditionJoin): void;
 };
-export declare const FilterByCondition: ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, condition2Type, condition2From, condition2To, conditionJoin, onChangeCondition2Type, onChangeCondition2From, onChangeCondition2To, onChangeConditionJoin, }: FilterByConditionProps) => React.JSX.Element;
+export declare const FilterByCondition: ({ columnType, 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":"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"}
+{"version":3,"file":"filter-by-condition.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-condition.tsx"],"names":[],"mappings":"AAcA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAkB,MAAM,cAAc,CAAC;AAGhE,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,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,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,mHAAmH;AACnH,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAoBjE;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,SAAS,cAAc,EAAE,EACjC,YAAY,gBAAgB,GAAG,SAAS,EACxC,SAAS,aAAa,GAAG,SAAS,KACjC,oBAAoB,EAmCtB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,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;AAsLF,eAAO,MAAM,iBAAiB,GAAI,yQAgB/B,sBAAsB,sBAyFxB,CAAC"}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterByCondition = exports.top10ConditionType = exports.isTop10ConditionType = void 0;
+exports.FilterByCondition = exports.conditionOptionsFor = exports.DATE_PERIOD_GROUP_LABEL = 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"));
@@ -36,8 +36,103 @@ var SECOND_CLAUSE_LABELS = config_1.CONDITION_LABELS.filter(function (_a) {
         condition !== "NUMBER_ABOVE_AVERAGE" &&
         condition !== "NUMBER_BELOW_AVERAGE";
 });
+exports.DATE_PERIOD_GROUP_LABEL = "All dates in the period";
+var FOREIGN_GROUP_LABEL = "Applied filter";
+var isDatePeriodCondition = function (type) {
+    return /^DATE_IN_[QM]\d+$/.test(type);
+};
+/**
+ * Which Excel AutoFilter family a condition belongs to. Anything outside the
+ * text / number / date prefixes ("Is empty", "Errors", "Custom formula") is
+ * offered on every column.
+ */
+var conditionFamily = function (type) {
+    if (type.startsWith("TEXT_"))
+        return "text";
+    if (type.startsWith("NUMBER_"))
+        return "number";
+    if (type.startsWith("DATE_"))
+        return isDatePeriodCondition(type) ? "period" : "date";
+    return "generic";
+};
+/**
+ * The condition menu Excel shows for a column: one family — "Text Filters",
+ * "Number Filters" or "Date Filters" (with the sixteen period conditions
+ * grouped under "All Dates in the Period") — plus the generic items. With no
+ * `columnType` (an unclassified column) every family is offered, grouped.
+ * A `current` condition from another family (a date filter stored on a column
+ * that now holds text) stays listed and selected so the user can see and
+ * clear it instead of it silently vanishing from the menu.
+ */
+var conditionOptionsFor = function (labels, columnType, current) {
+    var e_1, _a;
+    var _b;
+    var families = columnType
+        ? [columnType]
+        : ["text", "number", "date"];
+    var groups = [];
+    var _loop_1 = function (family) {
+        groups.push({
+            key: family,
+            options: labels.filter(function (_a) {
+                var condition = _a.condition;
+                return conditionFamily(condition) === family;
+            }),
+        });
+        if (family === "date") {
+            groups.push({
+                key: "period",
+                label: exports.DATE_PERIOD_GROUP_LABEL,
+                options: labels.filter(function (_a) {
+                    var condition = _a.condition;
+                    return conditionFamily(condition) === "period";
+                }),
+            });
+        }
+    };
+    try {
+        for (var families_1 = tslib_1.__values(families), families_1_1 = families_1.next(); !families_1_1.done; families_1_1 = families_1.next()) {
+            var family = families_1_1.value;
+            _loop_1(family);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (families_1_1 && !families_1_1.done && (_a = families_1.return)) _a.call(families_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    groups.push({
+        key: "generic",
+        options: labels.filter(function (_a) {
+            var condition = _a.condition;
+            return conditionFamily(condition) === "generic";
+        }),
+    });
+    var offered = groups.filter(function (group) { return group.options.length > 0; });
+    if (current &&
+        !offered.some(function (group) { return group.options.some(function (_a) {
+            var condition = _a.condition;
+            return condition === current;
+        }); })) {
+        var foreign = (_b = labels.find(function (_a) {
+            var condition = _a.condition;
+            return condition === current;
+        })) !== null && _b !== void 0 ? _b : config_1.CONDITION_LABELS.find(function (_a) {
+            var condition = _a.condition;
+            return condition === current;
+        });
+        if (foreign) {
+            offered.unshift({ key: "current", label: FOREIGN_GROUP_LABEL, options: [foreign] });
+        }
+    }
+    return offered;
+};
+exports.conditionOptionsFor = conditionOptionsFor;
 var ConditionSelect = function (_a) {
-    var value = _a.value, labels = _a.labels, onChange = _a.onChange, ariaLabel = _a.ariaLabel;
+    var value = _a.value, labels = _a.labels, columnType = _a.columnType, onChange = _a.onChange, ariaLabel = _a.ariaLabel;
+    var groups = (0, react_1.useMemo)(function () { return (0, exports.conditionOptionsFor)(labels, columnType, value); }, [labels, columnType, value]);
     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);
         } },
@@ -46,10 +141,14 @@ var ConditionSelect = function (_a) {
         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));
-                })))));
+                groups.map(function (group) { return (react_1.default.createElement(react_1.default.Fragment, { key: group.key },
+                    react_1.default.createElement(ui_1.SelectSeparator, null),
+                    react_1.default.createElement(ui_1.SelectGroup, null,
+                        group.label ? react_1.default.createElement(ui_1.SelectLabel, null, group.label) : null,
+                        group.options.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;
@@ -104,20 +203,20 @@ var Top10Fields = function (_a) {
                     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;
+    var columnType = _a.columnType, 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" }),
+        react_1.default.createElement(ConditionSelect, { value: conditionType, labels: config_1.CONDITION_LABELS, columnType: columnType, 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(ConditionSelect, { value: condition2Type, labels: SECOND_CLAUSE_LABELS, columnType: columnType, 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/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,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,uBAmlBlB,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"}

package/dist/cjs/components/filter-box/index.js

@@ -9,8 +9,10 @@ var utils_1 = require("@rowsncolumns/utils");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_2 = require("react");
 var atoms_1 = require("../../atoms");
-var style_1 = require("../context-menu/style");
 var sort_dialog_atom_1 = require("../../atoms/sort-dialog.atom");
+var config_1 = require("../../config");
+var style_1 = require("../context-menu/style");
+var date_tree_1 = require("./date-tree");
 var filter_by_color_1 = require("./filter-by-color");
 var filter_by_condition_1 = require("./filter-by-condition");
 var filter_by_value_1 = require("./filter-by-value");
@@ -89,6 +91,9 @@ exports.FilterBoxWrapper = (0, react_2.memo)(function (_a) {
     var _11 = tslib_1.__read((0, react_1.useState)((_z = filterCriteria === null || filterCriteria === void 0 ? void 0 : filterCriteria.conditionJoin) !== null && _z !== void 0 ? _z : "AND"), 2), conditionJoin = _11[0], onChangeConditionJoin = _11[1];
     // "Sort by Color" is a collapsed sub-menu of the dropdown, like Excel's.
     var _12 = tslib_1.__read((0, react_1.useState)(false), 2), showSortByColor = _12[0], setShowSortByColor = _12[1];
+    // Excel offers one condition family per column (Text / Number / Date
+    // Filters), read from the same displayed values the checklist shows.
+    var columnType = (0, react_2.useMemo)(function () { return (0, date_tree_1.classifyFilterColumn)(values, config_1.BLANK_LABEL); }, [values]);
     // Auto apply (Excel parity). `pendingAutoApplyTick` counts user edits made
     // while auto apply is on; the debounced effect below applies the newest
     // state once per burst.
@@ -401,7 +406,7 @@ exports.FilterBoxWrapper = (0, react_2.memo)(function (_a) {
                 react_1.default.createElement(icons_1.Cross2Icon, null)),
             clearLabel),
         react_1.default.createElement("div", { className: "py-2 px-2" },
-            react_1.default.createElement(filter_by_condition_1.FilterByCondition, { conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeConditionType: onUserChangeConditionType, onChangeFromValue: onUserChangeFromValue, onChangeToValue: onUserChangeToValue, condition2Type: condition2Type, condition2From: condition2From, condition2To: condition2To, conditionJoin: conditionJoin, onChangeCondition2Type: onUserChangeCondition2Type, onChangeCondition2From: onUserChangeCondition2From, onChangeCondition2To: onUserChangeCondition2To, onChangeConditionJoin: onUserChangeConditionJoin }),
+            react_1.default.createElement(filter_by_condition_1.FilterByCondition, { columnType: columnType, conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeConditionType: onUserChangeConditionType, onChangeFromValue: onUserChangeFromValue, onChangeToValue: onUserChangeToValue, condition2Type: condition2Type, condition2From: condition2From, condition2To: condition2To, conditionJoin: conditionJoin, onChangeCondition2Type: onUserChangeCondition2Type, onChangeCondition2From: onUserChangeCondition2From, onChangeCondition2To: onUserChangeCondition2To, onChangeConditionJoin: onUserChangeConditionJoin }),
             react_1.default.createElement(ui_1.Separator, { className: "mt-2 mb-2" }),
             react_1.default.createElement(filter_by_color_1.FilterByColor, { colorFilter: colorFilter === undefined
                     ? filterCriteria === null || filterCriteria === void 0 ? void 0 : filterCriteria.colorFilter

package/dist/cjs/components/formula-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,sGAiIxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAiB,MAAM,OAAO,CAAC;AActC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,sGA8JxB,CAAC"}

package/dist/cjs/components/formula-input/index.js

@@ -8,6 +8,7 @@ var react_1 = require("react");
 var react_2 = tslib_1.__importStar(require("react"));
 var atoms_1 = require("../../atoms");
 var cell_input_context_atom_1 = require("../../atoms/cell-input-context.atom");
+var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
 var use_merge_refs_1 = require("../../hooks/use-merge.refs");
 var cell_input_1 = require("../cell-input");
 /**
@@ -26,15 +27,36 @@ exports.FormulaInput = (0, react_1.forwardRef)(function (_a, forwardedRef) {
     var getSelectionsFromFormula = (0, atoms_1.useGetSelectionsFromFormula)();
     var onEditorKeyDown = (0, atoms_1.useOnEditorKeyDown)();
     var _e = (0, cell_input_context_atom_1.useCellInputContext)(), getTableNames = _e.getTableNames, getTableColumnNames = _e.getTableColumnNames, getNamedRanges = _e.getNamedRanges;
+    // Whether THIS input is the one holding formula mode on. `handleBlur` keeps the mode
+    // alive when focus moves to the grid — that is how a range gets picked — so an input
+    // that unmounts while the grid holds focus (Cancel / Save / the dialog's X / Esc) has
+    // to be the one to turn it off; otherwise the picked range keeps rendering and the
+    // grid stays in formula-selection mode with no editor left to receive the picks.
+    var ownsFormulaModeRef = (0, react_2.useRef)(false);
+    var enterFormulaMode = (0, react_1.useCallback)(function (nextValue) {
+        var formulaMode = (0, utils_1.isAFormula)(nextValue);
+        setFormulaMode(formulaMode);
+        ownsFormulaModeRef.current = formulaMode;
+    }, [setFormulaMode]);
     var closeFormulaMode = (0, react_1.useCallback)(function () {
         setFormulaMode(false);
         setFormulaSelections([]);
+        ownsFormulaModeRef.current = false;
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     }, [onCancel, setFormulaMode, setFormulaSelections]);
+    // Layout (not passive) cleanup: when a host re-keys its range inputs ("Add range"),
+    // the departing input must release the mode before the new one's autoFocus claims it.
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () { return function () {
+        if (ownsFormulaModeRef.current) {
+            ownsFormulaModeRef.current = false;
+            setFormulaMode(false);
+            setFormulaSelections([]);
+        }
+    }; }, [setFormulaMode, setFormulaSelections]);
     var handleFocus = (0, react_1.useCallback)(function (e) {
         var _a;
         // Set formula mode
-        setFormulaMode((0, utils_1.isAFormula)(value));
+        enterFormulaMode(value);
         // Get selections from formula
         var selections = getSelectionsFromFormula === null || getSelectionsFromFormula === void 0 ? void 0 : getSelectionsFromFormula(value);
         if (selections) {
@@ -46,7 +68,7 @@ exports.FormulaInput = (0, react_1.forwardRef)(function (_a, forwardedRef) {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
     }, [
-        setFormulaMode,
+        enterFormulaMode,
         setFormulaSelections,
         getSelectionsFromFormula,
         value,
@@ -73,7 +95,7 @@ exports.FormulaInput = (0, react_1.forwardRef)(function (_a, forwardedRef) {
             return;
         }
         // Set formula mode
-        setFormulaMode((0, utils_1.isAFormula)(value));
+        enterFormulaMode(value);
         // Get selections from formula
         var selections = getSelectionsFromFormula === null || getSelectionsFromFormula === void 0 ? void 0 : getSelectionsFromFormula(value);
         if (selections) {
@@ -82,7 +104,7 @@ exports.FormulaInput = (0, react_1.forwardRef)(function (_a, forwardedRef) {
     }, [
         activeEditor,
         onChange,
-        setFormulaMode,
+        enterFormulaMode,
         setFormulaSelections,
         getSelectionsFromFormula,
     ]);

package/dist/cjs/components/toolbar/table-style-editor.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+import type { BandingProperties, CustomTableStyle, Maybe } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/**
+ * The style elements a custom table style can colour — the `rowProperties` fields the grid's
+ * banding resolves (`api/banded-ranges.ts`), in the order of Excel's New Table Style dialog.
+ * The first three are what the gallery swatches show and what every created style carries; the
+ * rest are only written when the user picks a colour for them.
+ */
+export declare const TABLE_STYLE_ELEMENTS: readonly [{
+    readonly key: "header";
+    readonly label: "Header row";
+    readonly property: "headerColor";
+}, {
+    readonly key: "firstBand";
+    readonly label: "First row stripe";
+    readonly property: "firstBandColor";
+}, {
+    readonly key: "secondBand";
+    readonly label: "Second row stripe";
+    readonly property: "secondBandColor";
+}, {
+    readonly key: "firstColumn";
+    readonly label: "First column";
+    readonly property: "firstColumnColor";
+}, {
+    readonly key: "lastColumn";
+    readonly label: "Last column";
+    readonly property: "lastColumnColor";
+}, {
+    readonly key: "totalRow";
+    readonly label: "Total row";
+    readonly property: "totalRowColor";
+}];
+export type TableStyleElementKey = (typeof TABLE_STYLE_ELEMENTS)[number]["key"];
+/** The colour picked for each element; `undefined` leaves the element unpainted. */
+export type TableStyleColors = Partial<Record<TableStyleElementKey, string>>;
+/** The colours a fresh style starts from (the default palette's accent 1 and its light tint). */
+export declare const DEFAULT_TABLE_STYLE_COLORS: TableStyleColors;
+/**
+ * The banding a custom table style paints from its element colours. Header and the two stripes
+ * are always present (unset ones stay unpainted); the optional elements are written only when
+ * coloured, so a style that only picks the first three keeps its historical shape.
+ */
+export declare const buildCustomTableStyle: (name: string, colors: TableStyleColors) => CustomTableStyle;
+/** The element colours of an existing custom style (theme colours resolved to hex). */
+export declare const getTableStyleColors: (style: CustomTableStyle, theme: SpreadsheetTheme) => TableStyleColors;
+/**
+ * Why a style name cannot be used, or `undefined` when it can: empty, a built-in style's name
+ * (the gallery tells the two apart by name), or another custom style's name (case-insensitive,
+ * like Excel). `currentName` is the style being edited, which may keep its own name.
+ */
+export declare const getTableStyleNameError: (name: string, existingNames: readonly string[], currentName?: string) => string | undefined;
+export type TableStyleEditorProps = {
+    /** The custom style being modified; omit to create a new one. */
+    style?: CustomTableStyle;
+    /** The name a new style starts with (ignored when `style` is given). */
+    defaultName?: string;
+    theme: SpreadsheetTheme;
+    /** Names of the workbook's custom styles, for the duplicate-name check. */
+    existingNames?: readonly string[];
+    /** Create (or, when `style` is given, save) — receives the style the picks produce. */
+    onSubmit(style: CustomTableStyle): void;
+    onCancel(): void;
+    /** Offered as "Delete style" while editing; the footer omits it when absent. */
+    onDelete?(style: CustomTableStyle): void;
+    className?: string;
+};
+/**
+ * Excel's New Table Style / Modify Table Style dialog, laid out for the Format as Table gallery:
+ * name row, the table elements with a colour button each (the toolbar's colour popover), a live
+ * preview of the table the picks produce, and an Excel-ordered footer.
+ */
+export declare const TableStyleEditor: ({ style, defaultName, theme, existingNames, onSubmit, onCancel, onDelete, className, }: TableStyleEditorProps) => React.JSX.Element;
+/**
+ * The table a style paints: a header row over four banded rows, with the first / last column and
+ * total row emphasis when the style colours them. Uses the grid's banding rules
+ * (`api/banded-ranges.ts`): the first body row is the first stripe, the last body row is the
+ * total row, and an edge column's colour outranks the stripe under it.
+ */
+export declare const TableStylePreviewCard: ({ rowProperties, theme, }: {
+    rowProperties: Maybe<BandingProperties>;
+    theme: SpreadsheetTheme;
+}) => React.JSX.Element;
+//# sourceMappingURL=table-style-editor.d.ts.map

package/dist/cjs/components/toolbar/table-style-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-style-editor.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-editor.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EACV,iBAAiB,EAEjB,gBAAgB,EAChB,KAAK,EACN,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;EAW/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhF,oFAAoF;AACpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE7E,iGAAiG;AACjG,eAAO,MAAM,0BAA0B,EAAE,gBAIxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,QAAQ,gBAAgB,KACvB,gBAUF,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,gBAAgB,EACvB,OAAO,gBAAgB,KACtB,gBAWF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,MAAM,MAAM,EACZ,eAAe,SAAS,MAAM,EAAE,EAChC,cAAc,MAAM,KACnB,MAAM,GAAG,SAaX,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,QAAQ,IAAI,IAAI,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,wFAS9B,qBAAqB,sBAuIvB,CAAC;AAkEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,2BAGnC;IACD,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACxC,KAAK,EAAE,gBAAgB,CAAC;CACzB,sBA2EA,CAAC"}