@rowsncolumns/spreadsheet 10.4.1 → 10.4.4

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

@@ -1,5 +1,5 @@
-import { Button, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
-import React, { useState } from "react";
+import { Button, Input, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
+import React, { useMemo, useState } from "react";
 import { CONDITION_LABELS, CONDITION_NONE } from "../../config";
 import { shouldShowFromValue, shouldShowToValue } from "../../helpers";
 import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
@@ -23,13 +23,79 @@ export const top10ConditionType = (direction, unit) => direction === "top"
 const SECOND_CLAUSE_LABELS = CONDITION_LABELS.filter(({ condition }) => !isTop10ConditionType(condition) &&
     condition !== "NUMBER_ABOVE_AVERAGE" &&
     condition !== "NUMBER_BELOW_AVERAGE");
-const ConditionSelect = ({ value, labels, onChange, ariaLabel, }) => (React.createElement(Select, { value: value ?? CONDITION_NONE, onValueChange: (next) => onChange(next === CONDITION_NONE ? undefined : next) },
-    React.createElement(SelectTrigger, { className: "mb-1", "aria-label": ariaLabel },
-        React.createElement(SelectValue, { placeholder: "None" })),
-    React.createElement(SelectPortal, null,
-        React.createElement(SelectContent, null,
-            React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
-            labels.map(({ condition, label }) => (React.createElement(SelectItem, { key: condition, value: condition }, label)))))));
+export const DATE_PERIOD_GROUP_LABEL = "All dates in the period";
+const FOREIGN_GROUP_LABEL = "Applied filter";
+const isDatePeriodCondition = (type) => /^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.
+ */
+const conditionFamily = (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.
+ */
+export const conditionOptionsFor = (labels, columnType, current) => {
+    const families = columnType
+        ? [columnType]
+        : ["text", "number", "date"];
+    const groups = [];
+    for (const family of families) {
+        groups.push({
+            key: family,
+            options: labels.filter(({ condition }) => conditionFamily(condition) === family),
+        });
+        if (family === "date") {
+            groups.push({
+                key: "period",
+                label: DATE_PERIOD_GROUP_LABEL,
+                options: labels.filter(({ condition }) => conditionFamily(condition) === "period"),
+            });
+        }
+    }
+    groups.push({
+        key: "generic",
+        options: labels.filter(({ condition }) => conditionFamily(condition) === "generic"),
+    });
+    const offered = groups.filter((group) => group.options.length > 0);
+    if (current &&
+        !offered.some((group) => group.options.some(({ condition }) => condition === current))) {
+        const foreign = labels.find(({ condition }) => condition === current) ??
+            CONDITION_LABELS.find(({ condition }) => condition === current);
+        if (foreign) {
+            offered.unshift({ key: "current", label: FOREIGN_GROUP_LABEL, options: [foreign] });
+        }
+    }
+    return offered;
+};
+const ConditionSelect = ({ value, labels, columnType, onChange, ariaLabel, }) => {
+    const groups = useMemo(() => conditionOptionsFor(labels, columnType, value), [labels, columnType, value]);
+    return (React.createElement(Select, { value: value ?? CONDITION_NONE, onValueChange: (next) => onChange(next === CONDITION_NONE ? undefined : next) },
+        React.createElement(SelectTrigger, { className: "mb-1", "aria-label": ariaLabel },
+            React.createElement(SelectValue, { placeholder: "None" })),
+        React.createElement(SelectPortal, null,
+            React.createElement(SelectContent, null,
+                React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
+                groups.map((group) => (React.createElement(React.Fragment, { key: group.key },
+                    React.createElement(SelectSeparator, null),
+                    React.createElement(SelectGroup, null,
+                        group.label ? React.createElement(SelectLabel, null, group.label) : null,
+                        group.options.map(({ condition, label }) => (React.createElement(SelectItem, { key: condition, value: condition }, label)))))))))));
+};
 const ValueInputs = ({ conditionType, fromValue, toValue, onChangeFromValue, onChangeToValue, namePrefix, }) => {
     const [showToValue, setShowToValue] = useState(() => shouldShowToValue(conditionType));
     const [showFromValue, setShowFromValue] = useState(() => shouldShowFromValue(conditionType));
@@ -72,19 +138,19 @@ const Top10Fields = ({ conditionType, count, onChangeConditionType, onChangeCoun
                     React.createElement(SelectItem, { value: "items" }, "Items"),
                     React.createElement(SelectItem, { value: "percent" }, "Percent"))))));
 };
-export const FilterByCondition = ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, condition2Type, condition2From, condition2To, conditionJoin, onChangeCondition2Type, onChangeCondition2From, onChangeCondition2To, onChangeConditionJoin, }) => {
+export const FilterByCondition = ({ columnType, conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, condition2Type, condition2From, condition2To, conditionJoin, onChangeCondition2Type, onChangeCondition2From, onChangeCondition2To, 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.
     const [showSecondClause, setShowSecondClause] = useState(() => condition2Type !== undefined);
     const isTop10 = isTop10ConditionType(conditionType);
     return (React.createElement(React.Fragment, null,
         React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by condition"),
-        React.createElement(ConditionSelect, { value: conditionType, labels: CONDITION_LABELS, onChange: (type) => onChangeConditionType?.(type), ariaLabel: "Condition" }),
+        React.createElement(ConditionSelect, { value: conditionType, labels: CONDITION_LABELS, columnType: columnType, onChange: (type) => onChangeConditionType?.(type), ariaLabel: "Condition" }),
         isTop10 && conditionType ? (React.createElement(Top10Fields, { conditionType: conditionType, count: fromValue, onChangeConditionType: (type) => onChangeConditionType?.(type), onChangeCount: onChangeFromValue })) : (React.createElement(ValueInputs, { conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeFromValue: onChangeFromValue, onChangeToValue: onChangeToValue, namePrefix: "" })),
         conditionType && !isTop10 ? (showSecondClause ? (React.createElement("div", { className: "mt-1 flex flex-col gap-1" },
             React.createElement("div", { role: "radiogroup", "aria-label": "Combine conditions", className: "flex gap-3 text-xs px-1" }, ["AND", "OR"].map((join) => (React.createElement("label", { key: join, className: "flex items-center gap-1 cursor-pointer" },
                 React.createElement("input", { type: "radio", name: "conditionJoin", value: join, checked: conditionJoin === join, onChange: () => onChangeConditionJoin(join) }),
                 join === "AND" ? "And" : "Or")))),
-            React.createElement(ConditionSelect, { value: condition2Type, labels: SECOND_CLAUSE_LABELS, onChange: onChangeCondition2Type, ariaLabel: "Second condition" }),
+            React.createElement(ConditionSelect, { value: condition2Type, labels: SECOND_CLAUSE_LABELS, columnType: columnType, onChange: onChangeCondition2Type, ariaLabel: "Second condition" }),
             React.createElement(ValueInputs, { conditionType: condition2Type, fromValue: condition2From, toValue: condition2To, onChangeFromValue: onChangeCondition2From, onChangeToValue: onChangeCondition2To, namePrefix: "second" }))) : (React.createElement(Button, { type: "button", variant: "link", className: "text-xs px-1 mt-1 self-start", onClick: () => setShowSecondClause(true) }, "Custom filter (And / Or)\u2026"))) : null));
 };

package/dist/esm/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/esm/components/filter-box/index.js

@@ -4,9 +4,11 @@ import { Button, cn, DropdownLeftSlot, DropdownMenuSeparator, Popover, PopoverCo
 import { isNil, number2Alpha } from "@rowsncolumns/utils";
 import React, { useEffect, useRef, useState } from "react";
 import { memo, useCallback, useMemo } from "react";
-import { useFocusSheet } from "../../atoms";
-import { StyledFakeTriggerButton } from "../context-menu/style";
+import { useFocusSheet, useGetFormattedValue } from "../../atoms";
 import { useOpenSortDialog } from "../../atoms/sort-dialog.atom";
+import { BLANK_LABEL } from "../../config";
+import { StyledFakeTriggerButton } from "../context-menu/style";
+import { classifyFilterColumn } from "./date-tree";
 import { FilterByColor } from "./filter-by-color";
 import { FilterByCondition } from "./filter-by-condition";
 import { FilterByValue } from "./filter-by-value";
@@ -76,6 +78,9 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
     const [conditionJoin, onChangeConditionJoin] = useState(filterCriteria?.conditionJoin ?? "AND");
     // "Sort by Color" is a collapsed sub-menu of the dropdown, like Excel's.
     const [showSortByColor, setShowSortByColor] = useState(false);
+    // Excel offers one condition family per column (Text / Number / Date
+    // Filters), read from the same displayed values the checklist shows.
+    const columnType = useMemo(() => classifyFilterColumn(values, 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.
@@ -122,15 +127,23 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
     // 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.
+    const getFormattedValue = useGetFormattedValue();
     const sortDialogColumns = useMemo(() => {
-        const { startColumnIndex, endColumnIndex } = filter.range;
+        const { startColumnIndex, endColumnIndex, startRowIndex } = filter.range;
         const cols = [];
         for (let c = startColumnIndex; c <= endColumnIndex; c++) {
             const dim = c - startColumnIndex;
             const isActive = dim === dimensionIndex;
+            const header = isTableView(filter)
+                ? filter.columns?.[dim]?.name
+                : getFormattedValue?.(sheetId, startRowIndex, c);
             cols.push({
                 dimensionIndex: dim,
                 label: `Column ${number2Alpha(c)}`,
+                header: header ?? undefined,
                 ...(isActive
                     ? {
                         availableCellColors,
@@ -142,7 +155,9 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
         }
         return cols;
     }, [
-        filter.range,
+        filter,
+        sheetId,
+        getFormattedValue,
         dimensionIndex,
         availableCellColors,
         availableFontColors,
@@ -347,6 +362,7 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
                 openSortDialog({
                     columns: sortDialogColumns,
                     customLists,
+                    initialHasHeader: true,
                     onApply: onApplySort,
                 });
                 onClose();
@@ -377,7 +393,7 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
                 React.createElement(Cross2Icon, null)),
             clearLabel),
         React.createElement("div", { className: "py-2 px-2" },
-            React.createElement(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.createElement(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.createElement(Separator, { className: "mt-2 mb-2" }),
             React.createElement(FilterByColor, { colorFilter: colorFilter === undefined
                     ? filterCriteria?.colorFilter

package/dist/esm/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/esm/components/formula-input/index.js

@@ -4,6 +4,7 @@ import { forwardRef, useCallback } from "react";
 import React, { useRef } from "react";
 import { useActiveEditor, useFormulaMode, useGetGridRef, useGetSelectionsFromFormula, useOnEditorKeyDown, useSetActiveEditor, useSetFormulaSelections, } from "../../atoms";
 import { useCellInputContext } from "../../atoms/cell-input-context.atom";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
 import { useMergeRefs } from "../../hooks/use-merge.refs";
 import { CellInput } from "../cell-input";
 /**
@@ -21,14 +22,35 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
     const getSelectionsFromFormula = useGetSelectionsFromFormula();
     const onEditorKeyDown = useOnEditorKeyDown();
     const { getTableNames, getTableColumnNames, getNamedRanges } = useCellInputContext();
+    // 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.
+    const ownsFormulaModeRef = useRef(false);
+    const enterFormulaMode = useCallback((nextValue) => {
+        const formulaMode = isAFormula(nextValue);
+        setFormulaMode(formulaMode);
+        ownsFormulaModeRef.current = formulaMode;
+    }, [setFormulaMode]);
     const closeFormulaMode = useCallback(() => {
         setFormulaMode(false);
         setFormulaSelections([]);
+        ownsFormulaModeRef.current = false;
         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.
+    useIsomorphicLayoutEffect(() => () => {
+        if (ownsFormulaModeRef.current) {
+            ownsFormulaModeRef.current = false;
+            setFormulaMode(false);
+            setFormulaSelections([]);
+        }
+    }, [setFormulaMode, setFormulaSelections]);
     const handleFocus = useCallback((e) => {
         // Set formula mode
-        setFormulaMode(isAFormula(value));
+        enterFormulaMode(value);
         // Get selections from formula
         const selections = getSelectionsFromFormula?.(value);
         if (selections) {
@@ -40,7 +62,7 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
         onChange?.(value);
         onFocus?.(e);
     }, [
-        setFormulaMode,
+        enterFormulaMode,
         setFormulaSelections,
         getSelectionsFromFormula,
         value,
@@ -66,7 +88,7 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
             return;
         }
         // Set formula mode
-        setFormulaMode(isAFormula(value));
+        enterFormulaMode(value);
         // Get selections from formula
         const selections = getSelectionsFromFormula?.(value);
         if (selections) {
@@ -75,7 +97,7 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
     }, [
         activeEditor,
         onChange,
-        setFormulaMode,
+        enterFormulaMode,
         setFormulaSelections,
         getSelectionsFromFormula,
     ]);

package/dist/esm/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/esm/components/sheet-tabs/index.js

@@ -3,10 +3,11 @@ import { restrictToHorizontalAxis, restrictToParentElement, } from "@dnd-kit/mod
 import { horizontalListSortingStrategy, SortableContext, } from "@dnd-kit/sortable";
 import { ChevronLeftIcon, ChevronRightIcon } from "@rowsncolumns/icons";
 import { IconButton, Separator } from "@rowsncolumns/ui";
-import { isNil, sortSheetsByIndex } from "@rowsncolumns/utils";
+import { isNil, sortSheetsByIndex, validateSheetName } from "@rowsncolumns/utils";
 import { useCallback, useId, useMemo, useRef, useState } from "react";
 import React, { Fragment, memo } from "react";
 import { isProtectedSheet } from "../../api/validation";
+import { useShowValidationAlert } from "../../atoms/validation-alert.atom";
 import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
 import { SheetTabContextMenu } from "./context-menu";
 import { SheetTab } from "./sheet-tab";
@@ -45,16 +46,29 @@ function SheetTabsComponent({ sheets, activeSheetId, onRenameSheet, protectedRan
         }
         return !isProtectedSheet(sheetId, protectedRanges);
     }, [protectedRanges, readonly]);
+    const showValidationAlert = useShowValidationAlert();
     const canRename = useCallback((sheetId, newName) => {
-        // Worksheet names cannot be empty or whitespace-only
-        if (isNil(newName) || newName.trim().length === 0) {
+        if (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.
+        const validation = 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((sheet) => sheet.title === newName);
-    }, [canEditSheet, sheets]);
+        return true;
+    }, [canEditSheet, sheets, showValidationAlert]);
     const canDeleteSheet = useCallback((sheetId) => {
         if (!canEditSheet(sheetId)) {
             return false;

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

package/dist/esm/components/sort-range-dialog/index.js

@@ -2,6 +2,11 @@ import { ArrowDownIcon, ArrowUpIcon, Cross1Icon, PlusIcon, SortDownIcon, SortUpI
 import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, IconButton, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Separator, } from "@rowsncolumns/ui";
 import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { useSortDialogState } from "../../atoms/sort-dialog.atom";
+/** The label a sort level shows for a column: its header while the data has headers, else its letter. */
+export const sortColumnLabel = (column, hasHeader) => {
+    const header = column.header?.trim();
+    return hasHeader && header ? header : column.label;
+};
 const CUSTOM_LIST_PREFIX = "custom:";
 const ColorSwatch = ({ color }) => (React.createElement("span", { className: "inline-block h-3.5 w-3.5 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }));
 const IconSwatch = ({ glyph, color }) => (React.createElement("span", { className: "inline-block h-3.5 w-3.5 leading-none text-center text-sm shrink-0", style: color ? { color } : undefined }, glyph));
@@ -36,17 +41,21 @@ const specToLevel = (spec, customLists) => {
  * `SortSpecs[]` via `onApply`; the host disambiguates table vs range and
  * routes through its existing sort callbacks.
  */
-export const SortRangeDialog = memo(({ open, onOpenChange, columns, customLists, initialSpecs, onApply, }) => {
+export const SortRangeDialog = memo(({ open, onOpenChange, columns, customLists, initialSpecs, initialHasHeader, onApply, }) => {
     const lists = useMemo(() => customLists ?? [], [customLists]);
     const [levels, setLevels] = useState(() => initialSpecs?.length
         ? initialSpecs.map((spec) => specToLevel(spec, lists))
         : [makeDefaultLevel(columns)]);
+    const showHeaderToggle = initialHasHeader !== undefined ||
+        columns.some((column) => column.header !== undefined);
+    const [hasHeader, setHasHeader] = useState(initialHasHeader ?? false);
     // Re-seed when reopened with different columns / specs.
     useEffect(() => {
         if (open) {
             setLevels(initialSpecs?.length
                 ? initialSpecs.map((spec) => specToLevel(spec, lists))
                 : [makeDefaultLevel(columns)]);
+            setHasHeader(initialHasHeader ?? false);
         }
         // Only reset on open transitions.
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -98,15 +107,18 @@ export const SortRangeDialog = memo(({ open, onOpenChange, columns, customLists,
             }
             return spec;
         });
-        onApply(specs);
+        onApply(specs, { hasHeader });
         onOpenChange(false);
-    }, [levels, lists, onApply, onOpenChange]);
+    }, [levels, lists, hasHeader, onApply, onOpenChange]);
     return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
         React.createElement(DialogContent, { className: "w-[640px] max-w-[92vw] pointer-events-auto" },
             React.createElement(DialogTitle, null, "Sort"),
             React.createElement(DialogCloseButton, { onClick: () => onOpenChange(false) },
                 React.createElement(Cross1Icon, null)),
             React.createElement(DialogBody, { className: "flex flex-col gap-3" },
+                showHeaderToggle ? (React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                    React.createElement("input", { type: "checkbox", name: "hasHeader", checked: hasHeader, onChange: (e) => setHasHeader(e.target.checked) }),
+                    "My data has headers")) : null,
                 React.createElement("div", { className: "flex flex-col gap-2" }, levels.map((lvl, rowIndex) => {
                     const col = columnByIndex.get(lvl.dimensionIndex);
                     const cellColors = col?.availableCellColors ?? [];
@@ -124,7 +136,7 @@ export const SortRangeDialog = memo(({ open, onOpenChange, columns, customLists,
                             React.createElement(SelectTrigger, { className: "w-[160px]" },
                                 React.createElement(SelectValue, { placeholder: "Column" })),
                             React.createElement(SelectPortal, null,
-                                React.createElement(SelectContent, null, columns.map((c) => (React.createElement(SelectItem, { key: c.dimensionIndex, value: String(c.dimensionIndex) }, c.label)))))),
+                                React.createElement(SelectContent, null, columns.map((c) => (React.createElement(SelectItem, { key: c.dimensionIndex, value: String(c.dimensionIndex) }, sortColumnLabel(c, hasHeader))))))),
                         React.createElement(Select, { value: lvl.customListIndex != null && lvl.sortBy === "value"
                                 ? `${CUSTOM_LIST_PREFIX}${lvl.customListIndex}`
                                 : lvl.sortBy, onValueChange: (v) => {
@@ -210,6 +222,6 @@ export const SortRangeDialogHost = () => {
     return (React.createElement(SortRangeDialog, { open: request != null, onOpenChange: (open) => {
             if (!open)
                 close();
-        }, columns: request?.columns ?? [], customLists: request?.customLists, initialSpecs: request?.initialSpecs, onApply: (specs) => request?.onApply(specs) }));
+        }, columns: request?.columns ?? [], customLists: request?.customLists, initialSpecs: request?.initialSpecs, initialHasHeader: request?.initialHasHeader, onApply: (specs, options) => request?.onApply(specs, options) }));
 };
 SortRangeDialogHost.displayName = "SortRangeDialogHost";

package/dist/esm/components/toolbar/cell-style-selector.d.ts

@@ -33,6 +33,15 @@ export declare const getGalleryNamedCellStyles: (namedCellStyles: NamedCellStyle
 /** CSS preview of a named style's format for the gallery swatch. */
 export declare const getNamedCellStylePreview: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
 export declare const getCellStyles: (theme: SpreadsheetTheme, currencySymbol?: string) => Map<string, StyleList[]>;
+/**
+ * Excel's built-in "Comma Style" / "Comma [0]" (numFmtId 43 / 41): accounting
+ * layout without a currency symbol — negatives in parentheses, zero as `-`,
+ * `_(`/`_)` padding so digits align. `-15` shows `(15.00)` in the cell's own
+ * colour; the `[Red]` parenthesised variants are separate built-ins (38/40)
+ * that the Format Cells dialog offers under Custom, not the toolbar style.
+ */
+export declare const PATTERN_COMMA_STYLE = "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)";
+export declare const PATTERN_COMMA_STYLE_ROUNDED = "_(* #,##0_);_(* (#,##0);_(* \"-\"??_);_(@_)";
 export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=cell-style-selector.d.ts.map

package/dist/esm/components/toolbar/cell-style-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GACpC,iBAAiB,cAAc,EAAE,GAAG,IAAI,GAAG,SAAS,KACnD,KAAK,CAAC,cAAc,GAAG;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAQ7C,CAAC;AAcJ,oEAAoE;AACpE,eAAO,MAAM,wBAAwB,GACnC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAqBR,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,sJAUzB,sBAAsB,uBAsO1B,CAAC"}
+{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GACpC,iBAAiB,cAAc,EAAE,GAAG,IAAI,GAAG,SAAS,KACnD,KAAK,CAAC,cAAc,GAAG;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAQ7C,CAAC;AAcJ,oEAAoE;AACpE,eAAO,MAAM,wBAAwB,GACnC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAqBR,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,sDAAoD,CAAC;AACrF,eAAO,MAAM,2BAA2B,gDAA8C,CAAC;AAEvF,eAAO,MAAM,iBAAiB,sJAUzB,sBAAsB,uBAsO1B,CAAC"}

package/dist/esm/components/toolbar/cell-style-selector.js

@@ -422,6 +422,15 @@ export const getCellStyles = (theme, currencySymbol) => {
         ],
     ]);
 };
+/**
+ * Excel's built-in "Comma Style" / "Comma [0]" (numFmtId 43 / 41): accounting
+ * layout without a currency symbol — negatives in parentheses, zero as `-`,
+ * `_(`/`_)` padding so digits align. `-15` shows `(15.00)` in the cell's own
+ * colour; the `[Red]` parenthesised variants are separate built-ins (38/40)
+ * that the Format Cells dialog offers under Custom, not the toolbar style.
+ */
+export const PATTERN_COMMA_STYLE = '_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)';
+export const PATTERN_COMMA_STYLE_ROUNDED = '_(* #,##0_);_(* (#,##0);_(* "-"??_);_(@_)';
 export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle = false, onChangeFormatting, onClearFormatting, }) => {
     const colorIndexes = [4, 5, 6, 7, 8, 9];
     const colorTints = [0.8, 0.6, 0.4, 0];
@@ -436,14 +445,14 @@ export const CellStyleSelector = memo(({ currency, locale, theme, selectedFormat
             "Comma",
             {
                 type: "NUMBER",
-                pattern: "#,##0.00",
+                pattern: PATTERN_COMMA_STYLE,
             },
         ],
         [
             "Comma[0]",
             {
                 type: "NUMBER",
-                pattern: "#,##0",
+                pattern: PATTERN_COMMA_STYLE_ROUNDED,
             },
         ],
         [

package/dist/esm/components/toolbar/merge-cells-selector.d.ts

@@ -1,5 +1,6 @@
 import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/grid";
 import { Direction } from "@rowsncolumns/grid";
+import type { Maybe } from "@rowsncolumns/utils";
 import React from "react";
 import type { TableView } from "../../types";
 import type { SelectionAttributes } from "../canvas-grid/typings";
@@ -12,7 +13,32 @@ type MergeCellsSelectorProps = {
     merges?: GridRange[] | null;
     /** Tables of the workbook — a selection touching one on `sheetId` cannot be merged (Excel). */
     tables?: TableView[] | null;
+    /**
+     * Cell value reader behind Excel's "Merging cells only keeps the upper-left value" warning.
+     * Defaults to the reader the grid publishes; the warning is skipped when neither is available.
+     */
+    getFormattedValue?: (sheetId: number, rowIndex: number, columnIndex: number) => Maybe<string>;
 };
-export declare const MergeCellsSelector: ({ activeCell, selections, sheetId, merges, tables, onMerge, onUnMerge, }: MergeCellsSelectorProps) => React.JSX.Element;
+/** Excel's wording for a merge that would drop cell values. */
+export declare const MERGE_DISCARDS_VALUES_TITLE = "Merge cells";
+export declare const MERGE_DISCARDS_VALUES_MESSAGE = "Merging cells only keeps the upper-left value and discards other values.";
+/**
+ * The regions `onMergeCells` merges for a toolbar request: each row (merge
+ * horizontally), each column (merge vertically), every area of a multi-area
+ * selection, or the last selection as one block — the store action's own rules.
+ */
+export declare const mergeRegionsForSelection: (selections: SelectionArea[], direction?: Direction) => GridRange[];
+/**
+ * Would this merge discard values? Excel warns when more than one cell of a
+ * merged block holds a value (the merge keeps only the upper-left one). A
+ * headless / programmatic merge never asks — this gate lives in the toolbar.
+ */
+export declare const mergeDiscardsValues: ({ sheetId, selections, direction, getFormattedValue, }: {
+    sheetId: number;
+    selections: SelectionArea[];
+    direction?: Direction;
+    getFormattedValue: (sheetId: number, rowIndex: number, columnIndex: number) => Maybe<string>;
+}) => boolean;
+export declare const MergeCellsSelector: ({ activeCell, selections, sheetId, merges, tables, onMerge, onUnMerge, getFormattedValue: getFormattedValueProp, }: MergeCellsSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=merge-cells-selector.d.ts.map

package/dist/esm/components/toolbar/merge-cells-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"merge-cells-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/merge-cells-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAkB,SAAS,EAAgB,MAAM,oBAAoB,CAAC;AAY7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CACL,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,SAAS,CAAC,EAAE,SAAS,GACpB,IAAI,CAAC;IACR,SAAS,CACP,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC5B,+FAA+F;IAC/F,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,0EAQhC,uBAAuB,sBAgGzB,CAAC"}
+{"version":3,"file":"merge-cells-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/merge-cells-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAkB,SAAS,EAAgB,MAAM,oBAAoB,CAAC;AAyB7E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CACL,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,SAAS,CAAC,EAAE,SAAS,GACpB,IAAI,CAAC;IACR,SAAS,CACP,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC5B,+FAA+F;IAC/F,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,KAAK,CAAC,MAAM,CAAC,CAAC;CACpB,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,2BAA2B,gBAAgB,CAAC;AACzD,eAAO,MAAM,6BAA6B,6EACkC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,aAAa,EAAE,EAC3B,YAAY,SAAS,KACpB,SAAS,EAmBX,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,wDAKjC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,EAAE,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,KAAK,CAAC,MAAM,CAAC,CAAC;CACpB,KAAG,OAcH,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAAI,oHAShC,uBAAuB,sBA8IzB,CAAC"}