@rowsncolumns/spreadsheet-state 29.1.19 → 29.3.2

package/dist/esm/components/editors/cell-format/number-formats.js

@@ -0,0 +1,383 @@
+/** Excel's category list, in Excel's order. */
+export const NUMBER_CATEGORIES = [
+    {
+        id: "general",
+        name: "General",
+        type: "GENERAL",
+        description: "General format cells have no specific number format.",
+    },
+    {
+        id: "number",
+        name: "Number",
+        type: "NUMBER",
+        description: "Number is used for general display of numbers. Currency and Accounting offer specialized formatting for monetary value.",
+    },
+    {
+        id: "currency",
+        name: "Currency",
+        type: "CURRENCY",
+        description: "Currency formats are used for general monetary values. Use Accounting formats to align decimal points in a column.",
+    },
+    {
+        id: "accounting",
+        name: "Accounting",
+        type: "ACCOUNTING",
+        description: "Accounting formats line up the currency symbols and decimal points in a column.",
+    },
+    {
+        id: "date",
+        name: "Date",
+        type: "DATE",
+        description: "Date formats display date and time serial numbers as date values.",
+    },
+    {
+        id: "time",
+        name: "Time",
+        type: "DATE_TIME",
+        description: "Time formats display date and time serial numbers as time values.",
+    },
+    {
+        id: "percentage",
+        name: "Percentage",
+        type: "PERCENT",
+        description: "Percentage formats multiply the cell value by 100 and display the result with a percent symbol.",
+    },
+    {
+        id: "fraction",
+        name: "Fraction",
+        type: "FRACTION",
+        description: "Fraction formats display a number as a fraction.",
+    },
+    {
+        id: "scientific",
+        name: "Scientific",
+        type: "SCIENTIFIC",
+        description: "Scientific formats display a number in exponential notation.",
+    },
+    {
+        id: "text",
+        name: "Text",
+        type: "TEXT",
+        description: "Text format cells are treated as text even when a number is in the cell. The cell is displayed exactly as entered.",
+    },
+    {
+        id: "special",
+        name: "Special",
+        type: "SPECIAL",
+        description: "Special formats are useful for tracking list and database values.",
+    },
+    {
+        id: "custom",
+        name: "Custom",
+        type: "NUMBER",
+        description: "Type the number format code, using one of the existing codes as a starting point.",
+    },
+];
+export const NEGATIVE_STYLES = [
+    "minus",
+    "red",
+    "parens",
+    "redParens",
+];
+const digits = (decimals, thousands) => {
+    const d = Math.max(0, Math.min(30, Math.floor(decimals)));
+    const base = thousands ? "#,##0" : "0";
+    return d > 0 ? `${base}.${"0".repeat(d)}` : base;
+};
+/** `prefix` wraps a currency symbol in quotes so it never reads as a code. */
+const symbolPrefix = (symbol) => symbol ? `"${symbol.replace(/"/g, "")}"` : "";
+const withNegative = (positive, style) => {
+    switch (style) {
+        case "red":
+            return `${positive};[Red]${positive}`;
+        case "parens":
+            return `${positive}_);(${positive})`;
+        case "redParens":
+            return `${positive}_);[Red](${positive})`;
+        default:
+            return positive;
+    }
+};
+/** Number: decimal places, 1000 separator, negative numbers. */
+export const buildNumberPattern = ({ decimals, thousands, negative, }) => withNegative(digits(decimals, thousands), negative);
+/** Currency: decimal places, symbol, negative numbers. */
+export const buildCurrencyPattern = ({ decimals, symbol, negative, }) => withNegative(`${symbolPrefix(symbol)}${digits(decimals, true)}`, negative);
+/**
+ * Accounting: decimal places and symbol. The symbol sits at the left edge
+ * (`* ` repeats the space to fill the cell), zero shows a dash, and the `_(`
+ * / `_)` paddings line the decimal points up across positive and negative.
+ */
+export const buildAccountingPattern = ({ decimals, symbol, }) => {
+    const d = Math.max(0, Math.min(30, Math.floor(decimals)));
+    const num = digits(d, true);
+    const sym = symbolPrefix(symbol);
+    const zero = d > 0 ? `"-"${"?".repeat(d)}` : `"-"`;
+    return `_(${sym}* ${num}_);_(${sym}* \\(${num}\\);_(${sym}* ${zero}_);_(@_)`;
+};
+export const buildPercentPattern = (decimals) => `${digits(decimals, false)}%`;
+export const buildScientificPattern = (decimals) => `${digits(decimals, false)}E+00`;
+/** Excel's Currency / Accounting symbol list (a representative subset). */
+export const CURRENCY_SYMBOLS = [
+    { symbol: "", label: "None" },
+    { symbol: "$", label: "$" },
+    { symbol: "€", label: "€ Euro" },
+    { symbol: "£", label: "£ English (United Kingdom)" },
+    { symbol: "¥", label: "¥ Japanese" },
+    { symbol: "₹", label: "₹ English (India)" },
+    { symbol: "CHF", label: "CHF Swiss" },
+    { symbol: "kr", label: "kr Swedish" },
+    { symbol: "R$", label: "R$ Portuguese (Brazil)" },
+    { symbol: "₩", label: "₩ Korean" },
+];
+export const FRACTION_TYPES = [
+    { label: "Up to one digit (1/4)", pattern: "# ?/?" },
+    { label: "Up to two digits (21/25)", pattern: "# ??/??" },
+    { label: "Up to three digits (312/943)", pattern: "# ???/???" },
+    { label: "As halves (1/2)", pattern: "# ?/2" },
+    { label: "As quarters (2/4)", pattern: "# ?/4" },
+    { label: "As eighths (4/8)", pattern: "# ?/8" },
+    { label: "As sixteenths (8/16)", pattern: "# ??/16" },
+    { label: "As tenths (3/10)", pattern: "# ?/10" },
+    { label: "As hundredths (30/100)", pattern: "# ??/100" },
+];
+/** Excel's Special types for English (United States). */
+export const SPECIAL_TYPES = [
+    { label: "Zip Code", pattern: "00000" },
+    { label: "Zip Code + 4", pattern: "00000-0000" },
+    { label: "Phone Number", pattern: "[<=9999999]###-####;(###) ###-####" },
+    { label: "Social Security Number", pattern: "000-00-0000" },
+];
+export const FORMAT_LOCALES = [
+    { tag: "en-US", label: "English (United States)", lcid: "409", dayFirst: false },
+    { tag: "en-GB", label: "English (United Kingdom)", lcid: "809", dayFirst: true },
+    { tag: "en-IN", label: "English (India)", lcid: "4009", dayFirst: true },
+    { tag: "en-AU", label: "English (Australia)", lcid: "C09", dayFirst: true },
+    { tag: "en-CA", label: "English (Canada)", lcid: "1009", dayFirst: true },
+    { tag: "fr-FR", label: "French (France)", lcid: "40C", dayFirst: true },
+    { tag: "de-DE", label: "German (Germany)", lcid: "407", dayFirst: true },
+    { tag: "es-ES", label: "Spanish (Spain)", lcid: "C0A", dayFirst: true },
+    { tag: "it-IT", label: "Italian (Italy)", lcid: "410", dayFirst: true },
+    { tag: "ja-JP", label: "Japanese", lcid: "411", dayFirst: false },
+    { tag: "zh-CN", label: "Chinese (PRC)", lcid: "804", dayFirst: false },
+];
+export const findFormatLocale = (tag) => FORMAT_LOCALES.find((l) => l.tag === tag) ??
+    FORMAT_LOCALES.find((l) => tag && l.tag.split("-")[0] === tag.split("-")[0]) ??
+    FORMAT_LOCALES[0];
+/** Excel's Date types for English (United States). */
+const DATE_TYPES_US = [
+    "m/d/yyyy",
+    "dddd, mmmm d, yyyy",
+    "m/d;@",
+    "m/d/yy;@",
+    "mm/dd/yy;@",
+    "d-mmm;@",
+    "d-mmm-yy;@",
+    "dd-mmm-yy;@",
+    "mmm-yy;@",
+    "mmmm-yy;@",
+    "mmmm d, yyyy;@",
+    "m/d/yy h:mm AM/PM;@",
+    "m/d/yy h:mm;@",
+    "mmmmm;@",
+    "mmmmm-yy;@",
+    "m/d/yyyy;@",
+    "d-mmm-yyyy;@",
+];
+/** Excel's Time types for English (United States). */
+const TIME_TYPES_US = [
+    "h:mm:ss AM/PM",
+    "h:mm;@",
+    "h:mm AM/PM;@",
+    "h:mm:ss;@",
+    "h:mm:ss AM/PM;@",
+    "mm:ss.0;@",
+    "[h]:mm:ss;@",
+    "m/d/yy h:mm AM/PM;@",
+    "m/d/yy h:mm;@",
+];
+/** A month-first numeric date code reordered day-first (`m/d/yy` → `d/m/yy`). */
+const dayFirst = (pattern) => pattern.replace(/\b(m{1,2})\/(d{1,2})\b/g, "$2/$1");
+/**
+ * The Date / Time types for a locale. The default locale's codes are written
+ * bare (they follow the workbook); another locale's carry Excel's
+ * `[$-lcid]` prefix so the cell keeps that locale's names and order.
+ */
+export const getDateTimeTypes = (kind, locale, defaultLocale) => {
+    const base = kind === "date" ? DATE_TYPES_US : TIME_TYPES_US;
+    const ordered = locale.dayFirst ? base.map(dayFirst) : base;
+    if (locale.tag === defaultLocale.tag)
+        return ordered;
+    return ordered.map((p) => `[$-${locale.lcid}]${p}`);
+};
+const LOCALE_PREFIX = /^\[\$-([0-9A-Fa-f]+)\]/;
+/** The locale a format code's `[$-lcid]` prefix names, if any. */
+export const getPatternLocale = (pattern) => {
+    const lcid = pattern?.match(LOCALE_PREFIX)?.[1]?.toUpperCase();
+    return lcid
+        ? FORMAT_LOCALES.find((l) => l.lcid.toUpperCase() === lcid)
+        : undefined;
+};
+/** The pieces the Number / Currency options read back off a code. */
+export const parseNumericPattern = (pattern) => {
+    const p = pattern ?? "";
+    const first = p.split(";")[0] ?? "";
+    const decimals = first.match(/\.(0+)/)?.[1]?.length ?? 0;
+    const thousands = /#,##0/.test(first);
+    const sections = p.split(";");
+    const second = sections[1] ?? "";
+    const negative = !second
+        ? "minus"
+        : second.includes("[Red]")
+            ? second.includes("(")
+                ? "redParens"
+                : "red"
+            : second.includes("(")
+                ? "parens"
+                : "minus";
+    const symbol = first.match(/"([^"]+)"/)?.[1] ?? "";
+    return { decimals, thousands, negative, symbol };
+};
+/** Which category a cell's number format opens the Number tab on. */
+export const detectCategory = (format) => {
+    const pattern = format?.pattern ?? "";
+    if (SPECIAL_TYPES.some((t) => t.pattern === pattern))
+        return "special";
+    switch (format?.type) {
+        case undefined:
+        case "GENERAL":
+            return pattern && pattern !== "General" ? "custom" : "general";
+        case "NUMBER":
+            return "number";
+        case "CURRENCY":
+            return pattern.startsWith("_(") ? "accounting" : "currency";
+        case "ACCOUNTING":
+            return "accounting";
+        case "DATE":
+            return "date";
+        case "TIME":
+        case "DATE_TIME":
+            return "time";
+        case "PERCENT":
+            return "percentage";
+        case "FRACTION":
+            return "fraction";
+        case "SCIENTIFIC":
+            return "scientific";
+        case "TEXT":
+            return "text";
+        case "SPECIAL":
+            return "special";
+        default:
+            return "custom";
+    }
+};
+/** The format a category gets when it is first picked (Excel's defaults). */
+export const defaultFormatForCategory = (id, { currencySymbol, locale, defaultLocale, }) => {
+    switch (id) {
+        case "general":
+            return null;
+        case "number":
+            return {
+                type: "NUMBER",
+                pattern: buildNumberPattern({
+                    decimals: 2,
+                    thousands: false,
+                    negative: "minus",
+                }),
+            };
+        case "currency":
+            return {
+                type: "CURRENCY",
+                pattern: buildCurrencyPattern({
+                    decimals: 2,
+                    symbol: currencySymbol,
+                    negative: "minus",
+                }),
+            };
+        case "accounting":
+            return {
+                type: "ACCOUNTING",
+                pattern: buildAccountingPattern({ decimals: 2, symbol: currencySymbol }),
+            };
+        case "date":
+            return {
+                type: "DATE",
+                pattern: getDateTimeTypes("date", locale, defaultLocale)[0],
+            };
+        case "time":
+            return {
+                type: "DATE_TIME",
+                pattern: getDateTimeTypes("time", locale, defaultLocale)[0],
+            };
+        case "percentage":
+            return { type: "PERCENT", pattern: buildPercentPattern(2) };
+        case "fraction":
+            return { type: "FRACTION", pattern: FRACTION_TYPES[0].pattern };
+        case "scientific":
+            return { type: "SCIENTIFIC", pattern: buildScientificPattern(2) };
+        case "text":
+            return { type: "TEXT", pattern: "@" };
+        case "special":
+            return { type: "SPECIAL", pattern: SPECIAL_TYPES[0].pattern };
+        case "custom":
+            return null;
+    }
+};
+/** Excel's Custom type list (the built-in codes). */
+export const CUSTOM_PATTERNS = [
+    "General",
+    "0",
+    "0.00",
+    "#,##0",
+    "#,##0.00",
+    "#,##0_);(#,##0)",
+    "#,##0_);[Red](#,##0)",
+    "#,##0.00_);(#,##0.00)",
+    "#,##0.00_);[Red](#,##0.00)",
+    '"$"#,##0_);("$"#,##0)',
+    '"$"#,##0_);[Red]("$"#,##0)',
+    '"$"#,##0.00_);("$"#,##0.00)',
+    '"$"#,##0.00_);[Red]("$"#,##0.00)',
+    "0%",
+    "0.00%",
+    "0.00E+00",
+    "##0.0E+0",
+    "# ?/?",
+    "# ??/??",
+    "m/d/yyyy",
+    "d-mmm-yy",
+    "d-mmm",
+    "mmm-yy",
+    "h:mm AM/PM",
+    "h:mm:ss AM/PM",
+    "h:mm",
+    "h:mm:ss",
+    "m/d/yyyy h:mm",
+    "mm:ss",
+    "mm:ss.0",
+    "@",
+    "[h]:mm:ss",
+    '_("$"* #,##0_);_("$"* \\(#,##0\\);_("$"* "-"_);_(@_)',
+    '_(* #,##0_);_(* \\(#,##0\\);_(* "-"_);_(@_)',
+    '_("$"* #,##0.00_);_("$"* \\(#,##0.00\\);_("$"* "-"??_);_(@_)',
+    '_(* #,##0.00_);_(* \\(#,##0.00\\);_(* "-"??_);_(@_)',
+];
+/** The NumberFormatType a typed custom code is closest to. */
+export const inferTypeFromPattern = (pattern) => {
+    const p = pattern.replace(/"[^"]*"/g, "").replace(/\[[^\]]*\]/g, "");
+    if (!pattern || pattern === "General")
+        return "GENERAL";
+    if (p === "@")
+        return "TEXT";
+    if (/[yd]/i.test(p) || /m{3,}/i.test(p))
+        return "DATE";
+    if (/[hs]/i.test(p) || /AM\/PM/i.test(p))
+        return "DATE_TIME";
+    if (/E[+-]/i.test(p))
+        return "SCIENTIFIC";
+    if (p.includes("%"))
+        return "PERCENT";
+    if (/\?\/[?\d]/.test(p))
+        return "FRACTION";
+    return "NUMBER";
+};

package/dist/esm/components/editors/cell-format/number-tab.d.ts

@@ -0,0 +1,12 @@
+import type { NumberFormat } from "@rowsncolumns/spreadsheet";
+import React from "react";
+export type NumberTabProps = {
+    numberFormat: NumberFormat | null | undefined;
+    onChange(numberFormat: NumberFormat | null): void;
+    sampleValue: unknown;
+    locale?: string;
+    currencySymbol: string;
+};
+/** Format Cells → Number. */
+export declare const NumberTab: ({ numberFormat, onChange, sampleValue, locale, currencySymbol, }: NumberTabProps) => React.JSX.Element;
+//# sourceMappingURL=number-tab.d.ts.map

package/dist/esm/components/editors/cell-format/number-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/number-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAG9D,OAAO,KAA4B,MAAM,OAAO,CAAC;AA6CjD,MAAM,MAAM,cAAc,GAAG;IAC3B,YAAY,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;IAClD,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,SAAS,GAAI,kEAMvB,cAAc,sBAiThB,CAAC"}

package/dist/esm/components/editors/cell-format/number-tab.js

@@ -0,0 +1,165 @@
+import { Input } from "@rowsncolumns/ui";
+import { ssfFormat, ssfFormatColor } from "@rowsncolumns/utils";
+import React, { useMemo, useState } from "react";
+import { CheckboxField, ListBox, SelectField } from "./list-box";
+import { buildAccountingPattern, buildCurrencyPattern, buildNumberPattern, buildPercentPattern, buildScientificPattern, CURRENCY_SYMBOLS, CUSTOM_PATTERNS, defaultFormatForCategory, detectCategory, findFormatLocale, FORMAT_LOCALES, FRACTION_TYPES, getDateTimeTypes, getPatternLocale, inferTypeFromPattern, NEGATIVE_STYLES, NUMBER_CATEGORIES, parseNumericPattern, SPECIAL_TYPES, } from "./number-formats";
+const SAMPLE_NEGATIVE = -1234.1;
+const render = (pattern, value) => {
+    try {
+        return ssfFormat(pattern, value) || " ";
+    }
+    catch {
+        return " ";
+    }
+};
+const colorOf = (pattern, value) => {
+    try {
+        return ssfFormatColor(pattern, value);
+    }
+    catch {
+        return undefined;
+    }
+};
+/** Format Cells → Number. */
+export const NumberTab = ({ numberFormat, onChange, sampleValue, locale, currencySymbol, }) => {
+    const defaultLocale = findFormatLocale(locale);
+    const [category, setCategory] = useState(() => detectCategory(numberFormat));
+    const [formatLocale, setFormatLocale] = useState(() => getPatternLocale(numberFormat?.pattern) ?? defaultLocale);
+    const pattern = numberFormat?.pattern ?? "General";
+    const parsed = parseNumericPattern(numberFormat?.pattern);
+    const definition = NUMBER_CATEGORIES.find((c) => c.id === category);
+    const sample = render(pattern, sampleValue);
+    const pickCategory = (id) => {
+        setCategory(id);
+        if (id === "custom")
+            return;
+        onChange(defaultFormatForCategory(id, {
+            currencySymbol,
+            locale: formatLocale,
+            defaultLocale,
+        }));
+    };
+    const dateTimeTypes = useMemo(() => category === "date" || category === "time"
+        ? getDateTimeTypes(category, formatLocale, defaultLocale)
+        : [], [category, formatLocale, defaultLocale]);
+    const decimalsField = (onDecimals) => (React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+        "Decimal places",
+        React.createElement(Input, { "aria-label": "Decimal places", type: "number", min: 0, max: 30, className: "text-xs", value: parsed.decimals, onChange: (event) => {
+                const n = parseInt(event.target.value, 10);
+                if (Number.isFinite(n))
+                    onDecimals(Math.max(0, Math.min(30, n)));
+            } })));
+    const symbolField = (onSymbol) => (React.createElement(SelectField, { label: "Symbol", value: parsed.symbol, options: CURRENCY_SYMBOLS.map((s) => ({ value: s.symbol, label: s.label })), onChange: onSymbol }));
+    const negativeList = (build, selected) => (React.createElement("div", { className: "flex flex-col gap-1" },
+        React.createElement("span", { className: "font-system text-sm" }, "Negative numbers"),
+        React.createElement(ListBox, { label: "Negative numbers", value: selected, items: NEGATIVE_STYLES.map((style) => {
+                const p = build(style);
+                return {
+                    value: style,
+                    label: (React.createElement("span", { style: { color: colorOf(p, SAMPLE_NEGATIVE) } }, render(p, SAMPLE_NEGATIVE))),
+                };
+            }), onChange: (style) => onChange({ type: numberFormat?.type ?? "NUMBER", pattern: build(style) }) })));
+    const localeField = (React.createElement(SelectField, { label: "Locale (location)", value: formatLocale.tag, options: FORMAT_LOCALES.map((l) => ({ value: l.tag, label: l.label })), onChange: (tag) => {
+            const next = findFormatLocale(tag);
+            setFormatLocale(next);
+            if (category === "date" || category === "time") {
+                onChange({
+                    type: category === "date" ? "DATE" : "DATE_TIME",
+                    pattern: getDateTimeTypes(category, next, defaultLocale)[0],
+                });
+            }
+        } }));
+    let options = null;
+    switch (category) {
+        case "number":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField((decimals) => onChange({
+                    type: "NUMBER",
+                    pattern: buildNumberPattern({ ...parsed, decimals }),
+                })),
+                React.createElement(CheckboxField, { label: "Use 1000 Separator (,)", checked: parsed.thousands, onChange: (thousands) => onChange({
+                        type: "NUMBER",
+                        pattern: buildNumberPattern({ ...parsed, thousands }),
+                    }) }),
+                negativeList((negative) => buildNumberPattern({ ...parsed, negative }), parsed.negative)));
+            break;
+        case "currency":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField((decimals) => onChange({
+                    type: "CURRENCY",
+                    pattern: buildCurrencyPattern({ ...parsed, decimals }),
+                })),
+                symbolField((symbol) => onChange({
+                    type: "CURRENCY",
+                    pattern: buildCurrencyPattern({ ...parsed, symbol }),
+                })),
+                negativeList((negative) => buildCurrencyPattern({ ...parsed, negative }), parsed.negative)));
+            break;
+        case "accounting":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField((decimals) => onChange({
+                    type: "ACCOUNTING",
+                    pattern: buildAccountingPattern({ ...parsed, decimals }),
+                })),
+                symbolField((symbol) => onChange({
+                    type: "ACCOUNTING",
+                    pattern: buildAccountingPattern({ ...parsed, symbol }),
+                }))));
+            break;
+        case "percentage":
+            options = decimalsField((decimals) => onChange({ type: "PERCENT", pattern: buildPercentPattern(decimals) }));
+            break;
+        case "scientific":
+            options = decimalsField((decimals) => onChange({ type: "SCIENTIFIC", pattern: buildScientificPattern(decimals) }));
+            break;
+        case "date":
+        case "time":
+            options = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "font-system text-sm" }, "Type"),
+                    React.createElement(ListBox, { label: "Type", value: pattern, items: dateTimeTypes.map((p) => ({
+                            value: p,
+                            label: render(p, sampleDate()),
+                        })), onChange: (p) => onChange({
+                            type: category === "date" ? "DATE" : "DATE_TIME",
+                            pattern: p,
+                        }) })),
+                localeField));
+            break;
+        case "fraction":
+            options = (React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Type"),
+                React.createElement(ListBox, { label: "Type", value: pattern, items: FRACTION_TYPES.map((t) => ({ value: t.pattern, label: t.label })), onChange: (p) => onChange({ type: "FRACTION", pattern: p }) })));
+            break;
+        case "special":
+            options = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("span", { className: "font-system text-sm" }, "Type"),
+                    React.createElement(ListBox, { label: "Type", value: pattern, items: SPECIAL_TYPES.map((t) => ({ value: t.pattern, label: t.label })), onChange: (p) => onChange({ type: "SPECIAL", pattern: p }) })),
+                React.createElement(SelectField, { label: "Locale (location)", value: "en-US", options: [{ value: "en-US", label: "English (United States)" }], onChange: () => undefined })));
+            break;
+        case "custom":
+            options = (React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+                    "Type",
+                    React.createElement(Input, { "aria-label": "Custom format code", type: "text", className: "text-xs", value: pattern, onChange: (event) => onChange({
+                            type: inferTypeFromPattern(event.target.value),
+                            pattern: event.target.value,
+                        }) })),
+                React.createElement(ListBox, { label: "Custom formats", value: pattern, items: CUSTOM_PATTERNS.map((p) => ({ value: p, label: p })), onChange: (p) => onChange(p === "General" ? null : { type: inferTypeFromPattern(p), pattern: p }) })));
+            break;
+    }
+    return (React.createElement("div", { className: "grid grid-cols-[140px_1fr] gap-3" },
+        React.createElement("div", { className: "flex flex-col gap-1" },
+            React.createElement("span", { className: "font-system text-sm" }, "Category"),
+            React.createElement(ListBox, { label: "Category", value: category, items: NUMBER_CATEGORIES.map((c) => ({ value: c.id, label: c.name })), onChange: pickCategory, className: "max-h-[260px]" })),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Sample"),
+                React.createElement("div", { "data-testid": "number-sample", className: "rounded-sm bg-rnc-muted p-1 px-2 text-rnc-foreground", style: { color: colorOf(pattern, sampleValue) } }, sample)),
+            options,
+            React.createElement("p", { className: "font-system text-xs text-rnc-muted-foreground" }, definition?.description))));
+};
+// Excel previews date and time types on the active cell's value when it is a
+// date; a fixed date keeps the list stable otherwise.
+const sampleDate = () => new Date(2012, 2, 14, 13, 30, 55);

package/dist/esm/components/editors/cell-format/protection-tab.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export type CellProtectionDraft = {
+    locked: boolean;
+    hidden: boolean;
+};
+/** Excel's note under the Protection tab's checkboxes. */
+export declare const PROTECTION_NOTE = "Locking cells or hiding formulas has no effect until you protect the worksheet (Review tab, Protect group, Protect Sheet button).";
+/** Format Cells → Protection: Locked (default on) and Hidden. */
+export declare const ProtectionTab: ({ protection, onChange, }: {
+    protection: CellProtectionDraft;
+    onChange(protection: CellProtectionDraft): void;
+}) => React.JSX.Element;
+//# sourceMappingURL=protection-tab.d.ts.map

package/dist/esm/components/editors/cell-format/protection-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"protection-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/protection-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAEvE,0DAA0D;AAC1D,eAAO,MAAM,eAAe,sIACyG,CAAC;AAEtI,iEAAiE;AACjE,eAAO,MAAM,aAAa,GAAI,2BAG3B;IACD,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACjD,sBAcA,CAAC"}

package/dist/esm/components/editors/cell-format/protection-tab.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { CheckboxField } from "./list-box";
+/** Excel's note under the Protection tab's checkboxes. */
+export const PROTECTION_NOTE = "Locking cells or hiding formulas has no effect until you protect the worksheet (Review tab, Protect group, Protect Sheet button).";
+/** Format Cells → Protection: Locked (default on) and Hidden. */
+export const ProtectionTab = ({ protection, onChange, }) => (React.createElement("div", { className: "flex flex-col gap-2" },
+    React.createElement(CheckboxField, { label: "Locked", checked: protection.locked, onChange: (locked) => onChange({ ...protection, locked }) }),
+    React.createElement(CheckboxField, { label: "Hidden", checked: protection.hidden, onChange: (hidden) => onChange({ ...protection, hidden }) }),
+    React.createElement("p", { className: "font-system text-xs text-rnc-muted-foreground" }, PROTECTION_NOTE)));

package/dist/esm/components/editors/cell-format-editor.d.ts

@@ -1,8 +1,8 @@
 import type { CellInterface, SelectionArea } from "@rowsncolumns/common-types";
-import type { SelectionAttributes, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
-import type { CellFormat } from "@rowsncolumns/spreadsheet";
+import type { CellFormat, SelectionAttributes, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
 import React from "react";
 import type { useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+export type CellFormatTab = "number" | "alignment" | "font" | "border" | "fill" | "protection";
 type CellFormatEditorProps = {
     sheetId: number;
     activeCell: CellInterface;
@@ -16,9 +16,37 @@ type CellFormatEditorProps = {
     onChangeFormatting: ReturnType<typeof useSpreadsheetState>["onChangeFormatting"];
     getEffectiveValue: ReturnType<typeof useSpreadsheetState>["getEffectiveValue"];
     onMergeCells: ReturnType<typeof useSpreadsheetState>["onMergeCells"];
+    /** Alignment → Merge cells unchecked on a merged cell. */
+    onUnMergeCells?: ReturnType<typeof useSpreadsheetState>["onUnMergeCells"];
+    /** Whether the active cell is part of a merge (Merge cells opens checked). */
+    isMerged?: boolean;
+    /** The active cell's `CellData.protection` (Protection tab; absent = Locked, not Hidden). */
+    cellProtection?: {
+        locked?: boolean | null;
+        hidden?: boolean | null;
+    } | null;
+    /** Protection tab: write `locked` / `hidden` onto the selection. */
+    onChangeCellProtection?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[], protection: {
+        locked?: boolean;
+        hidden?: boolean;
+    }): void;
+    /** The tab the dialog opens on (Excel reopens on the last one used). */
+    defaultTab?: CellFormatTab;
     onCancel?(): void;
 };
-export declare const CellFormatEditor: ({ locale, cellFormat, sheetId, activeCell, selections, currencySymbol, theme, isDarkMode, onMergeCells, onChangeFormatting, onChangeBorder, onCancel, getEffectiveValue, }: CellFormatEditorProps) => React.JSX.Element;
+/**
+ * The properties the dialog changed, and only those — Excel's Format Cells
+ * applies what you edited to every selected cell and leaves the rest of each
+ * cell's format alone. A removed value is sent as `undefined` (the engines'
+ * clear for that property).
+ */
+export declare const diffCellFormat: (initial: CellFormat, draft: CellFormat) => CellFormat;
+/**
+ * Excel's Format Cells dialog (Ctrl+1 / ⌘1): Number, Alignment, Font,
+ * Border, Fill and Protection. Every tab edits a draft; OK applies the
+ * edits to the selection, Cancel drops them.
+ */
+export declare const CellFormatEditor: ({ locale, cellFormat, sheetId, activeCell, selections, currencySymbol, theme, isDarkMode, onMergeCells, onUnMergeCells, isMerged, cellProtection, onChangeCellProtection, onChangeFormatting, onChangeBorder, onCancel, getEffectiveValue, defaultTab, }: CellFormatEditorProps) => React.JSX.Element;
 export declare const CellFormatEditorDialog: ({ children, }: {
     children: React.ReactNode;
 }) => React.JSX.Element;

package/dist/esm/components/editors/cell-format-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-format-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/cell-format-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO/E,OAAO,KAAK,EAOV,mBAAmB,EACnB,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AA0C5D,OAAO,KAAyC,MAAM,OAAO,CAAC;AAa9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACzE,kBAAkB,EAAE,UAAU,CAC5B,OAAO,mBAAmB,CAC3B,CAAC,oBAAoB,CAAC,CAAC;IACxB,iBAAiB,EAAE,UAAU,CAC3B,OAAO,mBAAmB,CAC3B,CAAC,mBAAmB,CAAC,CAAC;IACvB,YAAY,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,cAAc,CAAC,CAAC;IACrE,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB,CAAC;AAyWF,eAAO,MAAM,gBAAgB,GAAI,4KAc9B,qBAAqB,sBAwlBvB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,eAEpC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAwBA,CAAC"}
+{"version":3,"file":"cell-format-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/cell-format-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,KAAK,EAEV,UAAU,EAEV,mBAAmB,EACnB,gBAAgB,EAEjB,MAAM,2BAA2B,CAAC;AAcnC,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAiB7E,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,WAAW,GACX,MAAM,GACN,QAAQ,GACR,MAAM,GACN,YAAY,CAAC;AAEjB,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACzE,kBAAkB,EAAE,UAAU,CAC5B,OAAO,mBAAmB,CAC3B,CAAC,oBAAoB,CAAC,CAAC;IACxB,iBAAiB,EAAE,UAAU,CAC3B,OAAO,mBAAmB,CAC3B,CAAC,mBAAmB,CAAC,CAAC;IACvB,YAAY,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,cAAc,CAAC,CAAC;IACrE,0DAA0D;IAC1D,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC1E,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,cAAc,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;IAC7E,oEAAoE;IACpE,sBAAsB,CAAC,CACrB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,UAAU,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GACjD,IAAI,CAAC;IACR,wEAAwE;IACxE,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB,CAAC;AAKF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,UAAU,EACnB,OAAO,UAAU,KAChB,UAoBF,CAAC;AAsBF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,0PAmB9B,qBAAqB,sBAqLvB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,eAEpC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAwBA,CAAC"}