@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.3

package/dist/cjs/components/editors/cell-format-editor.js

@@ -1,657 +1,203 @@
-import { __read } from "tslib";
-import { Direction } from "@rowsncolumns/grid";
-import { AiOutlineMergeCells, Cross2Icon, TextOverflowWrapIcon, } from "@rowsncolumns/icons";
-import { BorderColorSelector, BorderLineStyleOptions, BorderLocationOptions, ButtonBold, ButtonItalic, ButtonStrikethrough, ButtonUnderline, FontFamilySelector, FontSizeSelector, TextColorSelector, useFocusSheet, } from "@rowsncolumns/spreadsheet";
-import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
-import { Tabs } from "@rowsncolumns/ui";
-import { TabsList } from "@rowsncolumns/ui";
-import { TabsTrigger } from "@rowsncolumns/ui";
-import { TabsContent } from "@rowsncolumns/ui";
-import { getDefaultDateFormat, getDefaultTimeFormat, ssfFormat, ssfFormatColor, supplant, } from "@rowsncolumns/utils";
-import { useFormik } from "formik";
-import React, { useCallback, useMemo, useState } from "react";
-import { addThousandSeparator, changeDecimals, getCurrentDecimalCountInPattern, hasThousandsSeparator, removeThousandSeparator, } from "../../api/decimals";
+import { __assign, __read, __spreadArray, __values } from "tslib";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from "@rowsncolumns/ui";
+import React, { useMemo, useState } from "react";
 import { useFormatCellsDialogState, useSetFormatCellsDialogState, } from "../../atoms/dialog-state.atom";
-var getNumberFormatCategories = function (locale) { return [
-    {
-        name: "General",
-        value: "GENERAL",
-        description: "General format cells have no specific number format.",
-    },
-    {
-        name: "Number",
-        value: "NUMBER",
-        description: "Number is used for general display of numbers.",
-        pattern: "#.00",
-        options: ["Decimal", "ThousandSeparator"],
-    },
-    {
-        name: "Currency",
-        value: "CURRENCY",
-        description: "Currency formats are used for general monetary values.",
-        pattern: "\"{currencySymbol}\"* #,##0.00;\"{currencySymbol}\"* (#,##0.00);\"{currencySymbol}\"* \"-\"??;@",
-        options: ["CurrencySymbol", "Decimal"],
-    },
-    {
-        name: "Accounting",
-        value: "ACCOUNTING",
-        pattern: "\"{currencySymbol}\"* #,##0.00;\"{currencySymbol}\"* (#,##0.00);\"{currencySymbol}\"* \"-\"??;@",
-        options: ["CurrencySymbol", "Decimal"],
-    },
-    {
-        name: "Date",
-        value: "DATE",
-        description: "Date formats display date and time serial numbers as date values.",
-        pattern: getDefaultDateFormat(locale),
-    },
-    {
-        name: "Time",
-        value: "DATE_TIME",
-        description: "Time formats display date and time serial numbers as date values.",
-        pattern: getDefaultTimeFormat(locale),
-    },
-    {
-        name: "Percentage",
-        value: "PERCENT",
-        pattern: "0%",
-        options: ["Decimal"],
-    },
-    {
-        name: "Fraction",
-        value: "FRACTION",
-        pattern: "#/#",
-    },
-    {
-        name: "Scientific",
-        value: "SCIENTIFIC",
-        pattern: "0.00E+00",
-        options: ["Decimal"],
-    },
-    {
-        name: "Text",
-        value: "TEXT",
-    },
-    {
-        name: "Custom",
-        value: "CUSTOM",
-        pattern: "General",
-    },
-]; };
-var horizontalAlignments = [
-    {
-        name: "General",
-        value: undefined,
-    },
-    {
-        name: "Left",
-        value: "left",
-    },
-    {
-        name: "Center",
-        value: "center",
-    },
-    {
-        name: "Right",
-        value: "right",
-    },
-];
-var verticalAlignments = [
-    {
-        name: "Top",
-        value: "top",
-    },
-    {
-        name: "Center",
-        value: "middle",
-    },
-    {
-        name: "Bottom",
-        value: "bottom",
-    },
-];
-var customFormats = [
-    {
-        type: "GENERAL",
-    },
-    {
-        type: "NUMBER",
-        pattern: "0",
-    },
-    {
-        type: "NUMBER",
-        pattern: "##.00",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0.00",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0;(#,##0)",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0;[Red](#,##0)",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0.00;(#,##0.00)",
-    },
-    {
-        type: "NUMBER",
-        pattern: "#,##0.00;[Red](#,##0.00)",
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0;("{currencySymbol}"#,##0)',
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0;[Red]("{currencySymbol}"#,##0)',
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0.00;("{currencySymbol}"#,##0.00)',
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"#,##0.00;[Red]("{currencySymbol}"#,##0.00)',
-    },
-    {
-        type: "PERCENT",
-        pattern: "0%",
-    },
-    {
-        type: "PERCENT",
-        pattern: "0.00%",
-    },
-    {
-        type: "SCIENTIFIC",
-        pattern: "0.00E+00",
-    },
-    {
-        type: "SCIENTIFIC",
-        pattern: "##0.0E+0",
-    },
-    {
-        type: "FRACTION",
-        pattern: "# ?/?",
-    },
-    {
-        type: "FRACTION",
-        pattern: "# ??/??",
-    },
-    {
-        type: "DATE",
-        pattern: "d/m/yy",
-    },
-    {
-        type: "DATE",
-        pattern: "d-mmm-yy",
-    },
-    {
-        type: "DATE",
-        pattern: "d-mmm",
-    },
-    {
-        type: "DATE",
-        pattern: "mmm-yy",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm AM/PM",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm:ss AM/PM",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "h:mm:ss",
-    },
-    {
-        type: "DATE",
-        pattern: "d/m/yy h:mm",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "mm:ss",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "mm:ss.0",
-    },
-    {
-        type: "TEXT",
-        pattern: "@",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[h]:mm:ss",
-    },
-    {
-        type: "CURRENCY",
-        pattern: '"{currencySymbol}"* #,##0;"{currencySymbol}"* (#,##0);"{currencySymbol}"* "-";@',
-    },
-    {
-        type: "ACCOUNTING",
-        pattern: '* #,##0;* (#,##0);* "-";@',
-    },
-    {
-        type: "CURRENCY",
-        pattern: "\"{currencySymbol}\"* #,##0.00;\"{currencySymbol}\"* (#,##0.00);\"{currencySymbol}\"* \"-\"??;@",
-    },
-    {
-        type: "ACCOUNTING",
-        pattern: '* #,##0.00;* (#,##0.00);* "-"??;@',
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[$-en-US]h:mm:ss AM/PM",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[$-en-US]hh:mm:ss AM/PM;@",
-    },
-    {
-        type: "DATE",
-        pattern: "[$-en-US]m/d/yy h:mm AM/PM;@",
-    },
-    {
-        type: "DATE_TIME",
-        pattern: "[$-en-US]h:mm AM/PM;@",
-    },
-    {
-        type: "DATE",
-        pattern: "d/m/yyyy",
-    },
-    {
-        type: "NUMBER",
-        pattern: "00000",
-    },
-];
-var dateFormats = [
-    {
-        pattern: "dd/m/yy",
-        type: "DATE",
-    },
-    {
-        pattern: "dddd, dd mmmm yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd/mm/yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd/mm/yy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd\\.mm\\.yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "yyyy-mm-dd",
-        type: "DATE",
-    },
-    {
-        pattern: "dd mmmm yyyy",
-        type: "DATE",
-    },
-    {
-        pattern: "dd-mmm",
-        type: "DATE",
-    },
-    {
-        pattern: "dd-mmm-yy",
-        type: "DATE",
-    },
-    {
-        pattern: "mmm-dd",
-        type: "DATE",
-    },
-    {
-        pattern: "mmmm-dd",
-        type: "DATE",
-    },
-    {
-        pattern: "mmm-dd, yyyy",
-        type: "DATE",
-    },
-];
-var timeFormats = [
-    {
-        pattern: "hh:mm",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "h:mm AM/PM",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "hh:mm:ss",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "h:mm:ss AM/PM",
-        type: "DATE_TIME",
-    },
-    {
-        pattern: "d/m/yy h:mm AM/PM",
-        type: "DATE",
-    },
-    {
-        pattern: "d/m/yy hh:mm",
-        type: "DATE",
-    },
-];
+import { AlignmentTab } from "./cell-format/alignment-tab";
+import { edgesFromBorders, toBorderCommands, } from "./cell-format/border-edges";
+import { BorderTab } from "./cell-format/border-tab";
+import { FillTab } from "./cell-format/fill-tab";
+import { FontTab } from "./cell-format/font-tab";
+import { NumberTab } from "./cell-format/number-tab";
+import { ProtectionTab, } from "./cell-format/protection-tab";
+var same = function (a, b) {
+    return JSON.stringify(a !== null && a !== void 0 ? a : null) === JSON.stringify(b !== null && b !== void 0 ? b : null);
+};
+/**
+ * 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 var diffCellFormat = function (initial, draft) {
+    var e_1, _a, e_2, _b;
+    var _c, _d;
+    var patch = {};
+    var keys = new Set(__spreadArray(__spreadArray([], __read(Object.keys(initial)), false), __read(Object.keys(draft)), false));
+    try {
+        for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+            var key = keys_1_1.value;
+            if (key === "textFormat" || key === "borders")
+                continue;
+            var before = initial[key];
+            var after = draft[key];
+            if (!same(before, after))
+                patch[key] = after;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var tfBefore = ((_c = initial.textFormat) !== null && _c !== void 0 ? _c : {});
+    var tfAfter = ((_d = draft.textFormat) !== null && _d !== void 0 ? _d : {});
+    var textFormat = {};
+    try {
+        for (var _e = __values(new Set(__spreadArray(__spreadArray([], __read(Object.keys(tfBefore)), false), __read(Object.keys(tfAfter)), false))), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var key = _f.value;
+            if (!same(tfBefore[key], tfAfter[key]))
+                textFormat[key] = tfAfter[key];
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    if (Object.keys(textFormat).length)
+        patch.textFormat = textFormat;
+    return patch;
+};
+var selectionSpans = function (activeCell, selections) {
+    var ranges = selections.length
+        ? selections.map(function (s) { return s.range; })
+        : [
+            {
+                startRowIndex: activeCell.rowIndex,
+                endRowIndex: activeCell.rowIndex,
+                startColumnIndex: activeCell.columnIndex,
+                endColumnIndex: activeCell.columnIndex,
+            },
+        ];
+    return {
+        rows: ranges.some(function (r) { return r.endRowIndex > r.startRowIndex; }),
+        columns: ranges.some(function (r) { return r.endColumnIndex > r.startColumnIndex; }),
+    };
+};
+/**
+ * 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 var CellFormatEditor = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var locale = _a.locale, cellFormat = _a.cellFormat, sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, _r = _a.currencySymbol, currencySymbol = _r === void 0 ? "$" : _r, theme = _a.theme, isDarkMode = _a.isDarkMode, onMergeCells = _a.onMergeCells, onChangeFormatting = _a.onChangeFormatting, onChangeBorder = _a.onChangeBorder, onCancel = _a.onCancel, getEffectiveValue = _a.getEffectiveValue;
-    var _s = __read(useState(false), 2), isCustom = _s[0], setIsCustom = _s[1];
-    var _t = __read(useState(undefined), 2), color = _t[0], setColorState = _t[1];
-    var _u = __read(useState("solid"), 2), borderStyle = _u[0], setStyleState = _u[1];
-    var _v = __read(useState(), 2), borderLocation = _v[0], setBorderLocationState = _v[1];
+    var _b;
+    var locale = _a.locale, cellFormat = _a.cellFormat, sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? "$" : _c, theme = _a.theme, isDarkMode = _a.isDarkMode, onMergeCells = _a.onMergeCells, onUnMergeCells = _a.onUnMergeCells, _d = _a.isMerged, isMerged = _d === void 0 ? false : _d, cellProtection = _a.cellProtection, onChangeCellProtection = _a.onChangeCellProtection, onChangeFormatting = _a.onChangeFormatting, onChangeBorder = _a.onChangeBorder, onCancel = _a.onCancel, getEffectiveValue = _a.getEffectiveValue, _e = _a.defaultTab, defaultTab = _e === void 0 ? "number" : _e;
     var setFormatCellDialogState = useSetFormatCellsDialogState();
-    // close dialog
     var onRequestCloseDialog = function () { return setFormatCellDialogState(false); };
+    var initial = useMemo(function () { return cellFormat !== null && cellFormat !== void 0 ? cellFormat : {}; }, [cellFormat]);
+    var _f = __read(useState(initial), 2), draft = _f[0], setDraft = _f[1];
+    var patchDraft = function (patch) {
+        return setDraft(function (prev) { return (__assign(__assign({}, prev), patch)); });
+    };
+    var patchText = function (patch) {
+        return setDraft(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), { textFormat: __assign(__assign({}, ((_a = prev.textFormat) !== null && _a !== void 0 ? _a : {})), patch) }));
+        });
+    };
+    var _g = __read(useState(isMerged), 2), merged = _g[0], setMerged = _g[1];
+    var initialProtection = {
+        locked: (cellProtection === null || cellProtection === void 0 ? void 0 : cellProtection.locked) !== false,
+        hidden: (cellProtection === null || cellProtection === void 0 ? void 0 : cellProtection.hidden) === true,
+    };
+    var _h = __read(useState(initialProtection), 2), protection = _h[0], setProtection = _h[1];
+    // Border: the edges the user edited, on top of the active cell's own.
+    var initialEdges = useMemo(function () { return edgesFromBorders(cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.borders); }, [cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.borders]);
+    var _j = __read(useState({}), 2), edgeEdits = _j[0], setEdgeEdits = _j[1];
+    var _k = __read(useState(false), 2), clearedAll = _k[0], setClearedAll = _k[1];
+    var _l = __read(useState("solid"), 2), lineStyle = _l[0], setLineStyle = _l[1];
+    var _m = __read(useState(function () { return ({
+        theme: 1,
+        tint: isDarkMode ? 1 : 0,
+    }); }), 2), borderColor = _m[0], setBorderColor = _m[1];
+    var shownEdges = clearedAll
+        ? __assign({}, edgeEdits) : __assign(__assign({}, initialEdges), edgeEdits);
+    var spans = selectionSpans(activeCell, selections);
     var effectiveValue = getEffectiveValue(sheetId, activeCell.rowIndex, activeCell.columnIndex);
-    var _w = __read(useState(), 2), customFormatValue = _w[0], setCustomFormatValue = _w[1];
-    var numberCategories = useMemo(function () { return getNumberFormatCategories(locale); }, [locale]);
-    var getDefaultBorderColor = useCallback(function () {
-        return { theme: 1, tint: isDarkMode ? 1 : 0 };
-    }, [isDarkMode]);
-    var overflowDivClass = "grid grid-cols-1 max-h-[200px] overflow-auto border-rnc-border border-solid rounded-sm border";
-    var sampleDate = new Date();
-    var _x = useFormik({
-        initialValues: cellFormat !== null && cellFormat !== void 0 ? cellFormat : {},
-        onSubmit: function (values) {
-            // Formatting
-            onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, values);
-            // Border TBD
-            // Merge cells TBD
-            onRequestCloseDialog();
-        },
-    }), handleSubmit = _x.handleSubmit, resetForm = _x.resetForm, setFieldValue = _x.setFieldValue, values = _x.values;
-    var type = (_b = values === null || values === void 0 ? void 0 : values.numberFormat) === null || _b === void 0 ? void 0 : _b.type;
-    var pattern = (_c = values === null || values === void 0 ? void 0 : values.numberFormat) === null || _c === void 0 ? void 0 : _c.pattern;
-    var formattedValue = ssfFormat(pattern !== null && pattern !== void 0 ? pattern : "General", effectiveValue) || "\u00A0";
-    var formattedColor = ssfFormatColor(pattern !== null && pattern !== void 0 ? pattern : "General", effectiveValue);
-    var selectedNumberFormat = type !== null && type !== void 0 ? type : "GENERAL";
-    var selectedOption = numberCategories.find(function (opt) { return opt.value === selectedNumberFormat; });
-    var decimalCount = getCurrentDecimalCountInPattern(pattern !== null && pattern !== void 0 ? pattern : undefined);
-    var thousandsSeparator = hasThousandsSeparator(pattern !== null && pattern !== void 0 ? pattern : undefined);
-    // Cancel
+    var fill = {
+        backgroundColor: draft.backgroundColor,
+        fillPattern: draft.fillPattern,
+        foregroundColor: draft.foregroundColor,
+        gradient: draft.gradient,
+    };
+    var onSave = function () {
+        var e_3, _a;
+        var patch = diffCellFormat(initial, draft);
+        if (Object.keys(patch).length) {
+            onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, patch);
+        }
+        try {
+            for (var _b = __values(toBorderCommands(edgeEdits, { clearedAll: clearedAll })), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var command = _c.value;
+                onChangeBorder === null || onChangeBorder === void 0 ? void 0 : onChangeBorder(sheetId, activeCell, selections, command.location, command.color, command.style);
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        if (merged !== isMerged) {
+            if (merged)
+                onMergeCells === null || onMergeCells === void 0 ? void 0 : onMergeCells(sheetId, activeCell, selections);
+            else
+                onUnMergeCells === null || onUnMergeCells === void 0 ? void 0 : onUnMergeCells(sheetId, activeCell, selections);
+        }
+        if (protection.locked !== initialProtection.locked ||
+            protection.hidden !== initialProtection.hidden) {
+            onChangeCellProtection === null || onChangeCellProtection === void 0 ? void 0 : onChangeCellProtection(sheetId, activeCell, selections, __assign(__assign({}, (protection.locked !== initialProtection.locked
+                ? { locked: protection.locked }
+                : {})), (protection.hidden !== initialProtection.hidden
+                ? { hidden: protection.hidden }
+                : {})));
+        }
+        onRequestCloseDialog();
+    };
     var onCancelForm = function () {
-        resetForm();
         onRequestCloseDialog();
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (React.createElement("form", { onSubmit: handleSubmit },
-        React.createElement(Tabs, { defaultValue: "number" },
+    return (React.createElement("form", { onSubmit: function (event) {
+            event.preventDefault();
+            onSave();
+        } },
+        React.createElement(Tabs, { defaultValue: defaultTab },
             React.createElement(TabsList, null,
                 React.createElement(TabsTrigger, { value: "number" }, "Number"),
                 React.createElement(TabsTrigger, { value: "alignment" }, "Alignment"),
                 React.createElement(TabsTrigger, { value: "font" }, "Font"),
-                React.createElement(TabsTrigger, { value: "border" }, "Border")),
+                React.createElement(TabsTrigger, { value: "border" }, "Border"),
+                React.createElement(TabsTrigger, { value: "fill" }, "Fill"),
+                React.createElement(TabsTrigger, { value: "protection" }, "Protection")),
             React.createElement(TabsContent, { value: "number" },
-                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                    React.createElement("label", { className: "font-system text-sm" }, "Sample"),
-                    React.createElement("div", { className: "text-rnc-foreground p-1 px-2 bg-rnc-muted rounded-sm", style: {
-                            color: formattedColor,
-                        } }, formattedValue)),
-                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                    React.createElement("label", { className: "font-system text-sm" }, "Choose category"),
-                    React.createElement(Select, { value: isCustom ? "CUSTOM" : selectedNumberFormat, onValueChange: function (value) {
-                            var format = numberCategories.find(function (n) { return n.value === value; });
-                            if ((format === null || format === void 0 ? void 0 : format.value) === "CUSTOM") {
-                                // Show custom options
-                                setIsCustom(true);
-                                setCustomFormatValue(values.numberFormat);
-                            }
-                            else if (format) {
-                                // Toggle custom
-                                setIsCustom(false);
-                                // Apply formatting
-                                setFieldValue("numberFormat", {
-                                    pattern: format.pattern
-                                        ? supplant(format.pattern, { currencySymbol: currencySymbol })
-                                        : undefined,
-                                    type: format.value,
-                                });
-                            }
-                        } },
-                        React.createElement(SelectTrigger, { className: "mb-1" },
-                            React.createElement(SelectValue, { placeholder: "None" })),
-                        React.createElement(SelectPortal, null,
-                            React.createElement(SelectContent, null, numberCategories.map(function (_a) {
-                                var name = _a.name, value = _a.value;
-                                return (React.createElement(SelectItem, { value: value, key: name }, name));
-                            }))))),
-                isCustom ? null : (React.createElement(Stack, { className: "grid grid-cols-2 gap-2" }, (_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.options) === null || _d === void 0 ? void 0 : _d.map(function (opt) {
-                    return opt === "Decimal" ? (React.createElement(Stack, { direction: "vertical", key: opt, className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Decimal places"),
-                        React.createElement(Input, { min: 0, max: 10, type: "number", className: "text-xs", value: decimalCount, onChange: function (event) {
-                                var numDecimals = parseInt(event.target.value, 10);
-                                if (type) {
-                                    setFieldValue("numberFormat", {
-                                        type: type,
-                                        pattern: changeDecimals(pattern !== null && pattern !== void 0 ? pattern : "#,##0.00", numDecimals, false),
-                                    });
-                                }
-                            } }))) : opt === "ThousandSeparator" ? (React.createElement(Stack, { direction: "vertical", key: opt, className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Thousands separator"),
-                        React.createElement("label", { className: "font-system text-xs flex items-center gap-1", key: opt },
-                            React.createElement("input", { type: "checkbox", checked: thousandsSeparator, onChange: function (e) {
-                                    var checked = e.target.checked;
-                                    var newPattern = checked
-                                        ? addThousandSeparator(pattern !== null && pattern !== void 0 ? pattern : undefined)
-                                        : removeThousandSeparator(pattern !== null && pattern !== void 0 ? pattern : undefined);
-                                    setFieldValue("numberFormat", {
-                                        type: type !== null && type !== void 0 ? type : "NUMBER",
-                                        pattern: newPattern,
-                                    });
-                                } }),
-                            "Use 1000 Separator (,)"))) : opt === "CurrencySymbol" ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3", key: opt },
-                        React.createElement("label", { className: "font-system text-sm" }, "Currency Symbol"),
-                        React.createElement(Input, { type: "text", defaultValue: currencySymbol, className: "text-xs", onChange: function (event) {
-                                var currencyPattern = numberCategories.find(function (n) { return n.value === "CURRENCY"; });
-                                if (currencyPattern && currencyPattern.pattern) {
-                                    setFieldValue("numberFormat", {
-                                        type: "CURRENCY",
-                                        pattern: supplant(currencyPattern.pattern, {
-                                            currencySymbol: event.target.value,
-                                        }),
-                                    });
-                                }
-                            } }))) : null;
-                }))),
-                isCustom ? (React.createElement("div", { className: "flex flex-col gap-2" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Type"),
-                        React.createElement(Input, { type: "text", className: "text-xs", value: (_e = customFormatValue === null || customFormatValue === void 0 ? void 0 : customFormatValue.pattern) !== null && _e !== void 0 ? _e : undefined, onChange: function (e) {
-                                var _a;
-                                setCustomFormatValue(function (prev) {
-                                    var _a;
-                                    return {
-                                        type: (_a = prev === null || prev === void 0 ? void 0 : prev.type) !== null && _a !== void 0 ? _a : "GENERAL",
-                                        pattern: e.target.value,
-                                    };
-                                });
-                                setFieldValue("numberFormat", {
-                                    type: (_a = customFormatValue === null || customFormatValue === void 0 ? void 0 : customFormatValue.type) !== null && _a !== void 0 ? _a : "GENERAL",
-                                    pattern: e.target.value,
-                                });
-                            } })),
-                    React.createElement("div", { className: overflowDivClass }, customFormats.map(function (format, idx) {
-                        var _a;
-                        return (React.createElement(Button, { key: idx, className: "text-xs py-1 px-1.5", onClick: function () {
-                                var _a, _b;
-                                setFieldValue("numberFormat", {
-                                    type: format.type,
-                                    pattern: supplant((_a = format.pattern) !== null && _a !== void 0 ? _a : "General", {
-                                        currencySymbol: currencySymbol,
-                                    }),
-                                });
-                                // Set current format type
-                                setCustomFormatValue({
-                                    type: format.type,
-                                    pattern: supplant((_b = format.pattern) !== null && _b !== void 0 ? _b : "General", {
-                                        currencySymbol: currencySymbol,
-                                    }),
-                                });
-                            } }, supplant((_a = format.pattern) !== null && _a !== void 0 ? _a : format.type, {
-                            currencySymbol: currencySymbol,
-                        })));
-                    })))) : null,
-                type === "DATE" && !isCustom ? (React.createElement("div", { className: overflowDivClass }, dateFormats.map(function (format, idx) {
-                    var _a;
-                    return (React.createElement(Button, { key: idx, className: "text-xs py-1 px-1.5", onClick: function () {
-                            var _a;
-                            setFieldValue("numberFormat", {
-                                type: format.type,
-                                pattern: supplant((_a = format.pattern) !== null && _a !== void 0 ? _a : "General", {
-                                    currencySymbol: currencySymbol,
-                                }),
-                            });
-                        } }, ssfFormat((_a = format.pattern) !== null && _a !== void 0 ? _a : getDefaultDateFormat(locale), sampleDate)));
-                }))) : null,
-                type === "DATE_TIME" && !isCustom ? (React.createElement("div", { className: overflowDivClass }, timeFormats.map(function (format, idx) {
-                    var _a;
-                    return (React.createElement(Button, { key: idx, className: "text-xs py-1 px-1.5", onClick: function () {
-                            var _a;
-                            setFieldValue("numberFormat", {
-                                type: format.type,
-                                pattern: supplant((_a = format.pattern) !== null && _a !== void 0 ? _a : "General", {
-                                    currencySymbol: currencySymbol,
-                                }),
-                            });
-                        } }, ssfFormat((_a = format.pattern) !== null && _a !== void 0 ? _a : getDefaultDateFormat(locale), sampleDate)));
-                }))) : null),
+                React.createElement(NumberTab, { numberFormat: draft.numberFormat, onChange: function (numberFormat) { return patchDraft({ numberFormat: numberFormat }); }, sampleValue: effectiveValue, locale: locale, currencySymbol: currencySymbol })),
             React.createElement(TabsContent, { value: "alignment" },
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2 pb-3" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Horizontal Alignment"),
-                        React.createElement(Select, { value: (_f = values === null || values === void 0 ? void 0 : values.horizontalAlignment) !== null && _f !== void 0 ? _f : "General", onValueChange: function (value) {
-                                return setFieldValue("horizontalAlignment", value);
-                            } },
-                            React.createElement(SelectTrigger, { className: "mb-1" },
-                                React.createElement(SelectValue, { placeholder: "General" })),
-                            React.createElement(SelectPortal, null,
-                                React.createElement(SelectContent, null, horizontalAlignments.map(function (_a) {
-                                    var name = _a.name, _b = _a.value, value = _b === void 0 ? "General" : _b;
-                                    return (React.createElement(SelectItem, { value: value, key: value }, name));
-                                }))))),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Indent"),
-                        React.createElement(Input, { value: (_g = values === null || values === void 0 ? void 0 : values.indent) !== null && _g !== void 0 ? _g : 0, min: 0, max: 10, type: "number", className: "text-xs", onChange: function (event) {
-                                setFieldValue("indent", Number(event.target.value));
-                            } }))),
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Vertical Alignment"),
-                        React.createElement(Select, { value: (_h = values === null || values === void 0 ? void 0 : values.verticalAlignment) !== null && _h !== void 0 ? _h : "bottom", onValueChange: function (value) {
-                                return setFieldValue("verticalAlignment", value);
-                            } },
-                            React.createElement(SelectTrigger, { className: "mb-1" },
-                                React.createElement(SelectValue, { placeholder: "General" })),
-                            React.createElement(SelectPortal, null,
-                                React.createElement(SelectContent, null, verticalAlignments.map(function (_a) {
-                                    var name = _a.name, value = _a.value;
-                                    return (React.createElement(SelectItem, { value: value, key: value }, name));
-                                })))))),
-                React.createElement("label", { className: "font-system text-sm pb-3" }, "Text control"),
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2" },
-                    React.createElement(Button, { className: "flex items-center gap-2", onClick: function () {
-                            setFieldValue("wrapStrategy", "wrap");
-                        }, variant: "ghost" },
-                        React.createElement("span", { className: "text-lg leading-none" },
-                            React.createElement(TextOverflowWrapIcon, null)),
-                        "Wrap text"),
-                    React.createElement(Button, { className: "flex items-center  gap-2", onClick: function () {
-                            onMergeCells === null || onMergeCells === void 0 ? void 0 : onMergeCells(sheetId, activeCell, selections, Direction.Right);
-                        }, variant: "ghost" },
-                        React.createElement("span", { className: "text-lg leading-none" },
-                            React.createElement(AiOutlineMergeCells, null)),
-                        "Merge"))),
+                React.createElement(AlignmentTab, { format: draft, onChange: patchDraft, merged: merged, onChangeMerged: setMerged })),
             React.createElement(TabsContent, { value: "font" },
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2 pb-3" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Font"),
-                        React.createElement(FontFamilySelector, { theme: theme, value: (_j = values === null || values === void 0 ? void 0 : values.textFormat) === null || _j === void 0 ? void 0 : _j.fontFamily, onChange: function (fontFamily) {
-                                setFieldValue("textFormat.fontFamily", fontFamily);
-                            }, triggerVariant: "outline" })),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Font size"),
-                        React.createElement(FontSizeSelector, { value: (_k = values === null || values === void 0 ? void 0 : values.textFormat) === null || _k === void 0 ? void 0 : _k.fontSize, onChange: function (fontSize) {
-                                setFieldValue("textFormat.fontSize", fontSize);
-                            } }))),
-                React.createElement(Stack, { className: "grid grid-cols-2 gap-2 pb-3" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Effects"),
-                        React.createElement(Stack, { direction: "horizontal", className: "gap-2" },
-                            React.createElement(ButtonBold, { isActive: (_l = values === null || values === void 0 ? void 0 : values.textFormat) === null || _l === void 0 ? void 0 : _l.bold, onClick: function () {
-                                    var _a;
-                                    setFieldValue("textFormat.bold", !((_a = values === null || values === void 0 ? void 0 : values.textFormat) === null || _a === void 0 ? void 0 : _a.bold));
-                                } }),
-                            React.createElement(ButtonItalic, { isActive: (_m = values === null || values === void 0 ? void 0 : values.textFormat) === null || _m === void 0 ? void 0 : _m.italic, onClick: function () {
-                                    var _a;
-                                    setFieldValue("textFormat.italic", !((_a = values === null || values === void 0 ? void 0 : values.textFormat) === null || _a === void 0 ? void 0 : _a.italic));
-                                } }),
-                            React.createElement(ButtonUnderline, { isActive: (_o = values === null || values === void 0 ? void 0 : values.textFormat) === null || _o === void 0 ? void 0 : _o.underline, onClick: function () {
-                                    var _a;
-                                    setFieldValue("textFormat.underline", !((_a = values === null || values === void 0 ? void 0 : values.textFormat) === null || _a === void 0 ? void 0 : _a.underline));
-                                } }),
-                            React.createElement(ButtonStrikethrough, { isActive: (_p = values === null || values === void 0 ? void 0 : values.textFormat) === null || _p === void 0 ? void 0 : _p.strikethrough, onClick: function () {
-                                    var _a;
-                                    setFieldValue("textFormat.strikethrough", !((_a = values === null || values === void 0 ? void 0 : values.textFormat) === null || _a === void 0 ? void 0 : _a.strikethrough));
-                                } }))),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Color"),
-                        React.createElement("div", null,
-                            React.createElement(TextColorSelector, { color: (_q = values === null || values === void 0 ? void 0 : values.textFormat) === null || _q === void 0 ? void 0 : _q.color, theme: theme, isDarkMode: isDarkMode, onChange: function (color) {
-                                    setFieldValue("textFormat.color", color);
-                                } }))))),
+                React.createElement(FontTab, { textFormat: (_b = draft.textFormat) !== null && _b !== void 0 ? _b : {}, onChange: patchText, theme: theme, isDarkMode: isDarkMode })),
             React.createElement(TabsContent, { value: "border" },
-                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                    React.createElement("label", { className: "font-system text-sm" }, "Border style"),
-                    React.createElement(Stack, { direction: "horizontal", className: "flex flex-wrap gap-2 pb-3" },
-                        React.createElement(BorderLocationOptions, { borderLocation: borderLocation, onChange: function (value) {
-                                setBorderLocationState(value);
-                                // Update border
-                                onChangeBorder === null || onChangeBorder === void 0 ? void 0 : onChangeBorder(sheetId, activeCell, selections, value, color !== null && color !== void 0 ? color : getDefaultBorderColor(), borderStyle);
-                            }, onClear: function () {
-                                // Update border
-                                onChangeBorder === null || onChangeBorder === void 0 ? void 0 : onChangeBorder(sheetId, activeCell, selections, "all", undefined, undefined);
-                            } }))),
-                React.createElement(Stack, { className: "grid grid-cols-3 gap-2" },
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3 col-span-2" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Border Style"),
-                        React.createElement("div", { className: "flex flex-wrap gap-2" },
-                            React.createElement(BorderLineStyleOptions, { borderStyle: borderStyle, onChange: function (value) {
-                                    setStyleState(value);
-                                    // Update border
-                                    onChangeBorder === null || onChangeBorder === void 0 ? void 0 : onChangeBorder(sheetId, activeCell, selections, borderLocation !== null && borderLocation !== void 0 ? borderLocation : "all", color !== null && color !== void 0 ? color : getDefaultBorderColor(), value);
-                                } }))),
-                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
-                        React.createElement("label", { className: "font-system text-sm" }, "Border color"),
-                        React.createElement("div", null,
-                            React.createElement(BorderColorSelector, { color: color !== null && color !== void 0 ? color : getDefaultBorderColor(), onChange: function (value) {
-                                    setColorState(value);
-                                    // Update border
-                                    onChangeBorder === null || onChangeBorder === void 0 ? void 0 : onChangeBorder(sheetId, activeCell, selections, borderLocation !== null && borderLocation !== void 0 ? borderLocation : "all", value, borderStyle);
-                                }, theme: theme })))))),
+                React.createElement(BorderTab, { edges: shownEdges, onEdit: function (edits, options) {
+                        if (options === null || options === void 0 ? void 0 : options.clearedAll) {
+                            setClearedAll(true);
+                            setEdgeEdits({});
+                            return;
+                        }
+                        setEdgeEdits(function (prev) { return (__assign(__assign({}, prev), edits)); });
+                    }, lineStyle: lineStyle, onLineStyle: setLineStyle, color: borderColor, onColor: setBorderColor, hasInsideRows: spans.rows, hasInsideColumns: spans.columns, theme: theme })),
+            React.createElement(TabsContent, { value: "fill" },
+                React.createElement(FillTab, { fill: fill, onChange: function (next) { return patchDraft(next); }, theme: theme })),
+            React.createElement(TabsContent, { value: "protection" },
+                React.createElement(ProtectionTab, { protection: protection, onChange: setProtection }))),
         React.createElement("div", { className: "flex gap-1 py-2" },
-            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "OK"),
             React.createElement(Button, { size: "xs", onClick: onCancelForm, type: "button" }, "Cancel"))));
 };
 export var CellFormatEditorDialog = function (_a) {