@rowsncolumns/spreadsheet-state 28.0.66

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

@@ -0,0 +1,671 @@
+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 { 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",
+    },
+];
+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 setFormatCellDialogState = useSetFormatCellsDialogState();
+    // close dialog
+    var onRequestCloseDialog = function () { return setFormatCellDialogState(false); };
+    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 onCancelForm = function () {
+        resetForm();
+        onRequestCloseDialog();
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        React.createElement(Tabs, { defaultValue: "number" },
+            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(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(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(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(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("div", { className: "flex gap-1 py-2" },
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            React.createElement(Button, { size: "xs", onClick: onCancelForm, type: "button" }, "Cancel"))));
+};
+export var CellFormatEditorDialog = function (_a) {
+    var children = _a.children;
+    var _b = __read(useFormatCellsDialogState(), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var focusSheet = useFocusSheet();
+    var closeDialog = function () {
+        onOpenChange(false);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    };
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, className: "translate-y-1/2", onCloseAutoFocus: function (e) { return e.preventDefault(); } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Format cells"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};