@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.3

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)));
+};

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