@rowsncolumns/spreadsheet 10.4.1 → 10.4.4

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,uBA8lBlB,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.
@@ -135,13 +140,21 @@ exports.FilterBoxWrapper = (0, react_2.memo)(function (_a) {
     // filter box is currently anchored on (that's the column we computed
     // distinct colors/icons for). Other columns expose value + custom-list
     // sort only.
+    // Excel labels sort levels by the header row — a table's column names, or
+    // the first row of a filtered range (an AutoFilter range always starts on
+    // its header row). A blank header falls back to the column letter.
+    var getFormattedValue = (0, atoms_1.useGetFormattedValue)();
     var sortDialogColumns = (0, react_2.useMemo)(function () {
-        var _a = filter.range, startColumnIndex = _a.startColumnIndex, endColumnIndex = _a.endColumnIndex;
+        var _a, _b;
+        var _c = filter.range, startColumnIndex = _c.startColumnIndex, endColumnIndex = _c.endColumnIndex, startRowIndex = _c.startRowIndex;
         var cols = [];
         for (var c = startColumnIndex; c <= endColumnIndex; c++) {
             var dim = c - startColumnIndex;
             var isActive = dim === dimensionIndex;
-            cols.push(tslib_1.__assign({ dimensionIndex: dim, label: "Column ".concat((0, utils_1.number2Alpha)(c)) }, (isActive
+            var header = (0, exports.isTableView)(filter)
+                ? (_b = (_a = filter.columns) === null || _a === void 0 ? void 0 : _a[dim]) === null || _b === void 0 ? void 0 : _b.name
+                : getFormattedValue === null || getFormattedValue === void 0 ? void 0 : getFormattedValue(sheetId, startRowIndex, c);
+            cols.push(tslib_1.__assign({ dimensionIndex: dim, label: "Column ".concat((0, utils_1.number2Alpha)(c)), header: header !== null && header !== void 0 ? header : undefined }, (isActive
                 ? {
                     availableCellColors: availableCellColors,
                     availableFontColors: availableFontColors,
@@ -151,7 +164,9 @@ exports.FilterBoxWrapper = (0, react_2.memo)(function (_a) {
         }
         return cols;
     }, [
-        filter.range,
+        filter,
+        sheetId,
+        getFormattedValue,
         dimensionIndex,
         availableCellColors,
         availableFontColors,
@@ -369,6 +384,7 @@ exports.FilterBoxWrapper = (0, react_2.memo)(function (_a) {
                 openSortDialog({
                     columns: sortDialogColumns,
                     customLists: customLists,
+                    initialHasHeader: true,
                     onApply: onApplySort,
                 });
                 onClose();
@@ -401,7 +417,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/sheet-tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,KAAK,EAAE,QAAQ,CAAC,EAAE,KAClB,MACjD,CAAC;AAEF;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,KAAK,EAAE,EAC3C,MAAM,EACN,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAiC,EACjC,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,sBAA8B,GAC/B,EAAE,cAAc,CAAC,CAAC,CAAC,qBAqUnB;AAED,eAAO,MAAM,SAAS,EAA+B,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAK9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,KAAK,EAAE,QAAQ,CAAC,EAAE,KAClB,MACjD,CAAC;AAEF;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,KAAK,EAAE,EAC3C,MAAM,EACN,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAiC,EACjC,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,sBAA8B,GAC/B,EAAE,cAAc,CAAC,CAAC,CAAC,qBAkVnB;AAED,eAAO,MAAM,SAAS,EAA+B,OAAO,kBAAkB,CAAC"}

package/dist/cjs/components/sheet-tabs/index.js

@@ -11,6 +11,7 @@ var utils_1 = require("@rowsncolumns/utils");
 var react_1 = require("react");
 var react_2 = tslib_1.__importStar(require("react"));
 var validation_1 = require("../../api/validation");
+var validation_alert_atom_1 = require("../../atoms/validation-alert.atom");
 var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
 var context_menu_1 = require("./context-menu");
 var sheet_tab_1 = require("./sheet-tab");
@@ -57,16 +58,29 @@ function SheetTabsComponent(_a) {
         }
         return !(0, validation_1.isProtectedSheet)(sheetId, protectedRanges);
     }, [protectedRanges, readonly]);
+    var showValidationAlert = (0, validation_alert_atom_1.useShowValidationAlert)();
     var canRename = (0, react_1.useCallback)(function (sheetId, newName) {
-        // Worksheet names cannot be empty or whitespace-only
-        if ((0, utils_1.isNil)(newName) || newName.trim().length === 0) {
+        if ((0, utils_1.isNil)(newName) || !canEditSheet(sheetId)) {
             return false;
         }
-        if (!canEditSheet(sheetId)) {
+        // Excel's worksheet-name rules (rowsncolumns/spreadsheet#939 U-01): at most 31 characters,
+        // none of `\ / ? * [ ] :`, no leading / trailing apostrophe, not `History`, and unique
+        // case-insensitively (a sheet may re-case its own title). Every refusal shows Excel's own
+        // dialog; a blank name is the editor's "nothing typed" and just restores the title.
+        var validation = (0, utils_1.validateSheetName)(newName, sheets, sheetId);
+        if (!validation.ok) {
+            if (validation.reason !== "blank") {
+                void showValidationAlert({
+                    style: "stop",
+                    title: "Error",
+                    message: validation.message,
+                    confirm: false,
+                });
+            }
             return false;
         }
-        return !sheets.find(function (sheet) { return sheet.title === newName; });
-    }, [canEditSheet, sheets]);
+        return true;
+    }, [canEditSheet, sheets, showValidationAlert]);
     var canDeleteSheet = (0, react_1.useCallback)(function (sheetId) {
         if (!canEditSheet(sheetId)) {
             return false;

package/dist/cjs/components/sort-range-dialog/index.d.ts

@@ -10,7 +10,13 @@ import type { SortSpecs } from "../../types";
  */
 export type SortDialogColumn = {
     dimensionIndex: number;
+    /** Positional label ("Column B") — the fallback when the header cell is blank. */
     label: string;
+    /**
+     * Text of the column's first-row cell. Shown instead of `label` while
+     * "My data has headers" is on (Excel labels sort levels by header).
+     */
+    header?: string | null;
     availableCellColors?: string[];
     availableFontColors?: string[];
     availableIcons?: AvailableIcon[];
@@ -33,13 +39,24 @@ export type SortDialogProps = {
      * first column.
      */
     initialSpecs?: SortSpecs[];
+    /**
+     * Initial state of Excel's "My data has headers". The toggle renders when
+     * this is set or any column carries a `header`; a host that omits both keeps
+     * the header-less dialog.
+     */
+    initialHasHeader?: boolean;
     /**
      * Emits the assembled ordered `SortSpecs[]` (primary first, then
-     * tiebreakers). The host routes these to `onSortTable` / `onSortRange`.
+     * tiebreakers) plus the header choice. The host routes these to
+     * `onSortTable` / `onSortRange` (trimming the header row when `hasHeader`).
      * The dialog never touches state directly.
      */
-    onApply(specs: SortSpecs[]): void;
+    onApply(specs: SortSpecs[], options: {
+        hasHeader: boolean;
+    }): void;
 };
+/** The label a sort level shows for a column: its header while the data has headers, else its letter. */
+export declare const sortColumnLabel: (column: Pick<SortDialogColumn, "label" | "header">, hasHeader: boolean) => string;
 /**
  * Custom multi-level sort dialog. Mirrors Excel's "Sort…" dialog and
  * Google Sheets' "Sort range — advanced". Each row is a sort level:
@@ -51,7 +68,7 @@ export type SortDialogProps = {
  * `SortSpecs[]` via `onApply`; the host disambiguates table vs range and
  * routes through its existing sort callbacks.
  */
-export declare const SortRangeDialog: React.MemoExoticComponent<({ open, onOpenChange, columns, customLists, initialSpecs, onApply, }: SortDialogProps) => React.JSX.Element>;
+export declare const SortRangeDialog: React.MemoExoticComponent<({ open, onOpenChange, columns, customLists, initialSpecs, initialHasHeader, onApply, }: SortDialogProps) => React.JSX.Element>;
 /**
  * Host-mounted, atom-driven wrapper around {@link SortRangeDialog}. Mount this
  * once in the host (alongside the other editor dialogs); the filter box opens

package/dist/cjs/components/sort-range-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sort-range-dialog/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxD;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,oCAAoC;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;CACnC,CAAC;AA2DF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,mGAQvB,eAAe,uBAiVnB,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAe/B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sort-range-dialog/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxD;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,oCAAoC;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;CACpE,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,eAAe,GAC1B,QAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,QAAQ,CAAC,EAClD,WAAW,OAAO,KACjB,MAGF,CAAC;AA2DF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,qHASvB,eAAe,uBAiWnB,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAgB/B,CAAC"}