@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.2

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

@@ -0,0 +1,403 @@
+/** Excel's category list, in Excel's order. */
+export var 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 var NEGATIVE_STYLES = [
+    "minus",
+    "red",
+    "parens",
+    "redParens",
+];
+var digits = function (decimals, thousands) {
+    var d = Math.max(0, Math.min(30, Math.floor(decimals)));
+    var base = thousands ? "#,##0" : "0";
+    return d > 0 ? "".concat(base, ".").concat("0".repeat(d)) : base;
+};
+/** `prefix` wraps a currency symbol in quotes so it never reads as a code. */
+var symbolPrefix = function (symbol) {
+    return symbol ? "\"".concat(symbol.replace(/"/g, ""), "\"") : "";
+};
+var withNegative = function (positive, style) {
+    switch (style) {
+        case "red":
+            return "".concat(positive, ";[Red]").concat(positive);
+        case "parens":
+            return "".concat(positive, "_);(").concat(positive, ")");
+        case "redParens":
+            return "".concat(positive, "_);[Red](").concat(positive, ")");
+        default:
+            return positive;
+    }
+};
+/** Number: decimal places, 1000 separator, negative numbers. */
+export var buildNumberPattern = function (_a) {
+    var decimals = _a.decimals, thousands = _a.thousands, negative = _a.negative;
+    return withNegative(digits(decimals, thousands), negative);
+};
+/** Currency: decimal places, symbol, negative numbers. */
+export var buildCurrencyPattern = function (_a) {
+    var decimals = _a.decimals, symbol = _a.symbol, negative = _a.negative;
+    return withNegative("".concat(symbolPrefix(symbol)).concat(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 var buildAccountingPattern = function (_a) {
+    var decimals = _a.decimals, symbol = _a.symbol;
+    var d = Math.max(0, Math.min(30, Math.floor(decimals)));
+    var num = digits(d, true);
+    var sym = symbolPrefix(symbol);
+    var zero = d > 0 ? "\"-\"".concat("?".repeat(d)) : "\"-\"";
+    return "_(".concat(sym, "* ").concat(num, "_);_(").concat(sym, "* \\(").concat(num, "\\);_(").concat(sym, "* ").concat(zero, "_);_(@_)");
+};
+export var buildPercentPattern = function (decimals) {
+    return "".concat(digits(decimals, false), "%");
+};
+export var buildScientificPattern = function (decimals) {
+    return "".concat(digits(decimals, false), "E+00");
+};
+/** Excel's Currency / Accounting symbol list (a representative subset). */
+export var 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 var 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 var 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 var 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 var findFormatLocale = function (tag) {
+    var _a, _b;
+    return (_b = (_a = FORMAT_LOCALES.find(function (l) { return l.tag === tag; })) !== null && _a !== void 0 ? _a : FORMAT_LOCALES.find(function (l) { return tag && l.tag.split("-")[0] === tag.split("-")[0]; })) !== null && _b !== void 0 ? _b : FORMAT_LOCALES[0];
+};
+/** Excel's Date types for English (United States). */
+var 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). */
+var 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`). */
+var dayFirst = function (pattern) {
+    return 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 var getDateTimeTypes = function (kind, locale, defaultLocale) {
+    var base = kind === "date" ? DATE_TYPES_US : TIME_TYPES_US;
+    var ordered = locale.dayFirst ? base.map(dayFirst) : base;
+    if (locale.tag === defaultLocale.tag)
+        return ordered;
+    return ordered.map(function (p) { return "[$-".concat(locale.lcid, "]").concat(p); });
+};
+var LOCALE_PREFIX = /^\[\$-([0-9A-Fa-f]+)\]/;
+/** The locale a format code's `[$-lcid]` prefix names, if any. */
+export var getPatternLocale = function (pattern) {
+    var _a, _b;
+    var lcid = (_b = (_a = pattern === null || pattern === void 0 ? void 0 : pattern.match(LOCALE_PREFIX)) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase();
+    return lcid
+        ? FORMAT_LOCALES.find(function (l) { return l.lcid.toUpperCase() === lcid; })
+        : undefined;
+};
+/** The pieces the Number / Currency options read back off a code. */
+export var parseNumericPattern = function (pattern) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var p = pattern !== null && pattern !== void 0 ? pattern : "";
+    var first = (_a = p.split(";")[0]) !== null && _a !== void 0 ? _a : "";
+    var decimals = (_d = (_c = (_b = first.match(/\.(0+)/)) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+    var thousands = /#,##0/.test(first);
+    var sections = p.split(";");
+    var second = (_e = sections[1]) !== null && _e !== void 0 ? _e : "";
+    var negative = !second
+        ? "minus"
+        : second.includes("[Red]")
+            ? second.includes("(")
+                ? "redParens"
+                : "red"
+            : second.includes("(")
+                ? "parens"
+                : "minus";
+    var symbol = (_g = (_f = first.match(/"([^"]+)"/)) === null || _f === void 0 ? void 0 : _f[1]) !== null && _g !== void 0 ? _g : "";
+    return { decimals: decimals, thousands: thousands, negative: negative, symbol: symbol };
+};
+/** Which category a cell's number format opens the Number tab on. */
+export var detectCategory = function (format) {
+    var _a;
+    var pattern = (_a = format === null || format === void 0 ? void 0 : format.pattern) !== null && _a !== void 0 ? _a : "";
+    if (SPECIAL_TYPES.some(function (t) { return t.pattern === pattern; }))
+        return "special";
+    switch (format === null || format === void 0 ? void 0 : 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 var defaultFormatForCategory = function (id, _a) {
+    var currencySymbol = _a.currencySymbol, locale = _a.locale, defaultLocale = _a.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 var 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 var inferTypeFromPattern = function (pattern) {
+    var 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/cjs/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/cjs/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/cjs/components/editors/cell-format/number-tab.js

@@ -0,0 +1,194 @@
+import { __assign, __read } from "tslib";
+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";
+var SAMPLE_NEGATIVE = -1234.1;
+var render = function (pattern, value) {
+    try {
+        return ssfFormat(pattern, value) || " ";
+    }
+    catch (_a) {
+        return " ";
+    }
+};
+var colorOf = function (pattern, value) {
+    try {
+        return ssfFormatColor(pattern, value);
+    }
+    catch (_a) {
+        return undefined;
+    }
+};
+/** Format Cells → Number. */
+export var NumberTab = function (_a) {
+    var _b;
+    var numberFormat = _a.numberFormat, onChange = _a.onChange, sampleValue = _a.sampleValue, locale = _a.locale, currencySymbol = _a.currencySymbol;
+    var defaultLocale = findFormatLocale(locale);
+    var _c = __read(useState(function () {
+        return detectCategory(numberFormat);
+    }), 2), category = _c[0], setCategory = _c[1];
+    var _d = __read(useState(function () { var _a; return (_a = getPatternLocale(numberFormat === null || numberFormat === void 0 ? void 0 : numberFormat.pattern)) !== null && _a !== void 0 ? _a : defaultLocale; }), 2), formatLocale = _d[0], setFormatLocale = _d[1];
+    var pattern = (_b = numberFormat === null || numberFormat === void 0 ? void 0 : numberFormat.pattern) !== null && _b !== void 0 ? _b : "General";
+    var parsed = parseNumericPattern(numberFormat === null || numberFormat === void 0 ? void 0 : numberFormat.pattern);
+    var definition = NUMBER_CATEGORIES.find(function (c) { return c.id === category; });
+    var sample = render(pattern, sampleValue);
+    var pickCategory = function (id) {
+        setCategory(id);
+        if (id === "custom")
+            return;
+        onChange(defaultFormatForCategory(id, {
+            currencySymbol: currencySymbol,
+            locale: formatLocale,
+            defaultLocale: defaultLocale,
+        }));
+    };
+    var dateTimeTypes = useMemo(function () {
+        return category === "date" || category === "time"
+            ? getDateTimeTypes(category, formatLocale, defaultLocale)
+            : [];
+    }, [category, formatLocale, defaultLocale]);
+    var decimalsField = function (onDecimals) { return (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: function (event) {
+                var n = parseInt(event.target.value, 10);
+                if (Number.isFinite(n))
+                    onDecimals(Math.max(0, Math.min(30, n)));
+            } }))); };
+    var symbolField = function (onSymbol) { return (React.createElement(SelectField, { label: "Symbol", value: parsed.symbol, options: CURRENCY_SYMBOLS.map(function (s) { return ({ value: s.symbol, label: s.label }); }), onChange: onSymbol })); };
+    var negativeList = function (build, selected) { return (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(function (style) {
+                var p = build(style);
+                return {
+                    value: style,
+                    label: (React.createElement("span", { style: { color: colorOf(p, SAMPLE_NEGATIVE) } }, render(p, SAMPLE_NEGATIVE))),
+                };
+            }), onChange: function (style) { var _a; return onChange({ type: (_a = numberFormat === null || numberFormat === void 0 ? void 0 : numberFormat.type) !== null && _a !== void 0 ? _a : "NUMBER", pattern: build(style) }); } }))); };
+    var localeField = (React.createElement(SelectField, { label: "Locale (location)", value: formatLocale.tag, options: FORMAT_LOCALES.map(function (l) { return ({ value: l.tag, label: l.label }); }), onChange: function (tag) {
+            var next = findFormatLocale(tag);
+            setFormatLocale(next);
+            if (category === "date" || category === "time") {
+                onChange({
+                    type: category === "date" ? "DATE" : "DATE_TIME",
+                    pattern: getDateTimeTypes(category, next, defaultLocale)[0],
+                });
+            }
+        } }));
+    var options = null;
+    switch (category) {
+        case "number":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField(function (decimals) {
+                    return onChange({
+                        type: "NUMBER",
+                        pattern: buildNumberPattern(__assign(__assign({}, parsed), { decimals: decimals })),
+                    });
+                }),
+                React.createElement(CheckboxField, { label: "Use 1000 Separator (,)", checked: parsed.thousands, onChange: function (thousands) {
+                        return onChange({
+                            type: "NUMBER",
+                            pattern: buildNumberPattern(__assign(__assign({}, parsed), { thousands: thousands })),
+                        });
+                    } }),
+                negativeList(function (negative) { return buildNumberPattern(__assign(__assign({}, parsed), { negative: negative })); }, parsed.negative)));
+            break;
+        case "currency":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField(function (decimals) {
+                    return onChange({
+                        type: "CURRENCY",
+                        pattern: buildCurrencyPattern(__assign(__assign({}, parsed), { decimals: decimals })),
+                    });
+                }),
+                symbolField(function (symbol) {
+                    return onChange({
+                        type: "CURRENCY",
+                        pattern: buildCurrencyPattern(__assign(__assign({}, parsed), { symbol: symbol })),
+                    });
+                }),
+                negativeList(function (negative) { return buildCurrencyPattern(__assign(__assign({}, parsed), { negative: negative })); }, parsed.negative)));
+            break;
+        case "accounting":
+            options = (React.createElement(React.Fragment, null,
+                decimalsField(function (decimals) {
+                    return onChange({
+                        type: "ACCOUNTING",
+                        pattern: buildAccountingPattern(__assign(__assign({}, parsed), { decimals: decimals })),
+                    });
+                }),
+                symbolField(function (symbol) {
+                    return onChange({
+                        type: "ACCOUNTING",
+                        pattern: buildAccountingPattern(__assign(__assign({}, parsed), { symbol: symbol })),
+                    });
+                })));
+            break;
+        case "percentage":
+            options = decimalsField(function (decimals) {
+                return onChange({ type: "PERCENT", pattern: buildPercentPattern(decimals) });
+            });
+            break;
+        case "scientific":
+            options = decimalsField(function (decimals) {
+                return 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(function (p) { return ({
+                            value: p,
+                            label: render(p, sampleDate()),
+                        }); }), onChange: function (p) {
+                            return 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(function (t) { return ({ value: t.pattern, label: t.label }); }), onChange: function (p) { return 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(function (t) { return ({ value: t.pattern, label: t.label }); }), onChange: function (p) { return onChange({ type: "SPECIAL", pattern: p }); } })),
+                React.createElement(SelectField, { label: "Locale (location)", value: "en-US", options: [{ value: "en-US", label: "English (United States)" }], onChange: function () { return 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: function (event) {
+                            return onChange({
+                                type: inferTypeFromPattern(event.target.value),
+                                pattern: event.target.value,
+                            });
+                        } })),
+                React.createElement(ListBox, { label: "Custom formats", value: pattern, items: CUSTOM_PATTERNS.map(function (p) { return ({ value: p, label: p }); }), onChange: function (p) {
+                        return 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(function (c) { return ({ 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 === null || definition === void 0 ? void 0 : 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.
+var sampleDate = function () { return new Date(2012, 2, 14, 13, 30, 55); };

package/dist/cjs/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/cjs/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/cjs/components/editors/cell-format/protection-tab.js

@@ -0,0 +1,13 @@
+import { __assign } from "tslib";
+import React from "react";
+import { CheckboxField } from "./list-box";
+/** Excel's note under the Protection tab's checkboxes. */
+export var 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 var ProtectionTab = function (_a) {
+    var protection = _a.protection, onChange = _a.onChange;
+    return (React.createElement("div", { className: "flex flex-col gap-2" },
+        React.createElement(CheckboxField, { label: "Locked", checked: protection.locked, onChange: function (locked) { return onChange(__assign(__assign({}, protection), { locked: locked })); } }),
+        React.createElement(CheckboxField, { label: "Hidden", checked: protection.hidden, onChange: function (hidden) { return onChange(__assign(__assign({}, protection), { hidden: hidden })); } }),
+        React.createElement("p", { className: "font-system text-xs text-rnc-muted-foreground" }, PROTECTION_NOTE)));
+};