@rowsncolumns/spreadsheet 10.4.1 → 10.4.2

package/dist/cjs/components/toolbar/table-style-editor.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableStylePreviewCard = exports.TableStyleEditor = exports.getTableStyleNameError = exports.getTableStyleColors = exports.buildCustomTableStyle = exports.DEFAULT_TABLE_STYLE_COLORS = exports.TABLE_STYLE_ELEMENTS = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var banded_ranges_1 = require("../../api/banded-ranges");
+var themes_1 = require("../../themes");
+var color_selector_1 = require("./color-selector");
+/**
+ * The style elements a custom table style can colour — the `rowProperties` fields the grid's
+ * banding resolves (`api/banded-ranges.ts`), in the order of Excel's New Table Style dialog.
+ * The first three are what the gallery swatches show and what every created style carries; the
+ * rest are only written when the user picks a colour for them.
+ */
+exports.TABLE_STYLE_ELEMENTS = [
+    { key: "header", label: "Header row", property: "headerColor" },
+    { key: "firstBand", label: "First row stripe", property: "firstBandColor" },
+    { key: "secondBand", label: "Second row stripe", property: "secondBandColor" },
+    { key: "firstColumn", label: "First column", property: "firstColumnColor" },
+    { key: "lastColumn", label: "Last column", property: "lastColumnColor" },
+    { key: "totalRow", label: "Total row", property: "totalRowColor" },
+];
+/** The colours a fresh style starts from (the default palette's accent 1 and its light tint). */
+exports.DEFAULT_TABLE_STYLE_COLORS = {
+    header: "#4472c4",
+    firstBand: "#b4c6e7",
+    secondBand: "#ffffff",
+};
+/**
+ * The banding a custom table style paints from its element colours. Header and the two stripes
+ * are always present (unset ones stay unpainted); the optional elements are written only when
+ * coloured, so a style that only picks the first three keeps its historical shape.
+ */
+var buildCustomTableStyle = function (name, colors) {
+    var rowProperties = {
+        headerColor: colors.header,
+        firstBandColor: colors.firstBand,
+        secondBandColor: colors.secondBand,
+    };
+    if (colors.firstColumn)
+        rowProperties.firstColumnColor = colors.firstColumn;
+    if (colors.lastColumn)
+        rowProperties.lastColumnColor = colors.lastColumn;
+    if (colors.totalRow)
+        rowProperties.totalRowColor = colors.totalRow;
+    return { name: name, bandedRange: { rowProperties: rowProperties } };
+};
+exports.buildCustomTableStyle = buildCustomTableStyle;
+/** The element colours of an existing custom style (theme colours resolved to hex). */
+var getTableStyleColors = function (style, theme) {
+    var e_1, _a;
+    var _b;
+    var rowProperties = (_b = style.bandedRange.rowProperties) !== null && _b !== void 0 ? _b : {};
+    var colors = {};
+    try {
+        for (var TABLE_STYLE_ELEMENTS_1 = tslib_1.__values(exports.TABLE_STYLE_ELEMENTS), TABLE_STYLE_ELEMENTS_1_1 = TABLE_STYLE_ELEMENTS_1.next(); !TABLE_STYLE_ELEMENTS_1_1.done; TABLE_STYLE_ELEMENTS_1_1 = TABLE_STYLE_ELEMENTS_1.next()) {
+            var _c = TABLE_STYLE_ELEMENTS_1_1.value, key = _c.key, property = _c.property;
+            var color = (0, themes_1.getStringifiedColor)((0, banded_ranges_1.parseTintedColor)(rowProperties[property]), theme);
+            if (color)
+                colors[key] = color;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (TABLE_STYLE_ELEMENTS_1_1 && !TABLE_STYLE_ELEMENTS_1_1.done && (_a = TABLE_STYLE_ELEMENTS_1.return)) _a.call(TABLE_STYLE_ELEMENTS_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return colors;
+};
+exports.getTableStyleColors = getTableStyleColors;
+var BUILT_IN_STYLE_NAME = /^TableStyle(Light|Medium|Dark)\d+$/i;
+/**
+ * Why a style name cannot be used, or `undefined` when it can: empty, a built-in style's name
+ * (the gallery tells the two apart by name), or another custom style's name (case-insensitive,
+ * like Excel). `currentName` is the style being edited, which may keep its own name.
+ */
+var getTableStyleNameError = function (name, existingNames, currentName) {
+    var trimmed = name.trim();
+    if (!trimmed)
+        return "Enter a name for the style.";
+    if (BUILT_IN_STYLE_NAME.test(trimmed)) {
+        return "That name belongs to a built-in style.";
+    }
+    var lower = trimmed.toLowerCase();
+    var taken = existingNames.some(function (existing) {
+        return existing.toLowerCase() === lower &&
+            existing.toLowerCase() !== (currentName === null || currentName === void 0 ? void 0 : currentName.toLowerCase());
+    });
+    return taken ? "A table style named \u201C".concat(trimmed, "\u201D already exists.") : undefined;
+};
+exports.getTableStyleNameError = getTableStyleNameError;
+/**
+ * Excel's New Table Style / Modify Table Style dialog, laid out for the Format as Table gallery:
+ * name row, the table elements with a colour button each (the toolbar's colour popover), a live
+ * preview of the table the picks produce, and an Excel-ordered footer.
+ */
+var TableStyleEditor = function (_a) {
+    var _b;
+    var style = _a.style, _c = _a.defaultName, defaultName = _c === void 0 ? "" : _c, theme = _a.theme, _d = _a.existingNames, existingNames = _d === void 0 ? [] : _d, onSubmit = _a.onSubmit, onCancel = _a.onCancel, onDelete = _a.onDelete, className = _a.className;
+    var isEditing = !!style;
+    var nameId = (0, react_1.useId)();
+    var _e = tslib_1.__read((0, react_1.useState)((_b = style === null || style === void 0 ? void 0 : style.name) !== null && _b !== void 0 ? _b : defaultName), 2), name = _e[0], setName = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)(function () {
+        return style ? (0, exports.getTableStyleColors)(style, theme) : exports.DEFAULT_TABLE_STYLE_COLORS;
+    }), 2), colors = _f[0], setColors = _f[1];
+    var nameError = (0, exports.getTableStyleNameError)(name, existingNames, style === null || style === void 0 ? void 0 : style.name);
+    var preview = (0, react_1.useMemo)(function () { return (0, exports.buildCustomTableStyle)(name.trim(), colors); }, [name, colors]);
+    var setColor = function (key, color) {
+        return setColors(function (prev) {
+            var _a;
+            return (tslib_1.__assign(tslib_1.__assign({}, prev), (_a = {}, _a[key] = color, _a)));
+        });
+    };
+    var hasAnyColor = exports.TABLE_STYLE_ELEMENTS.some(function (_a) {
+        var key = _a.key;
+        return colors[key];
+    });
+    return (react_1.default.createElement("form", { "data-testid": "table-style-editor", "aria-label": isEditing ? "Edit table style" : "New table style", className: (0, ui_1.cn)("m-0 p-2 flex flex-col gap-3 font-system text-xs", className), 
+        // The gallery is a Radix menu: keep typing in the fields from driving its typeahead.
+        onKeyDown: function (event) { return event.stopPropagation(); }, onSubmit: function (event) {
+            event.preventDefault();
+            if (!nameError) {
+                onSubmit(preview);
+            }
+        } },
+        react_1.default.createElement("div", { className: "font-medium text-sm" }, isEditing ? "Edit table style" : "New table style"),
+        react_1.default.createElement("div", { className: "grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-x-3 gap-y-1" },
+            react_1.default.createElement("label", { htmlFor: nameId, className: "truncate whitespace-nowrap" }, "Name"),
+            react_1.default.createElement(ui_1.Input, { id: nameId, value: name, onChange: function (event) { return setName(event.target.value); }, autoComplete: "off", "aria-invalid": nameError ? true : undefined, "aria-describedby": nameError ? "".concat(nameId, "-error") : undefined, className: "text-xs" }),
+            nameError ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { "aria-hidden": "true" }),
+                react_1.default.createElement("p", { id: "".concat(nameId, "-error"), role: "alert", className: "m-0 text-rnc-destructive" }, nameError))) : null),
+        react_1.default.createElement("div", { className: "flex items-start gap-4" },
+            react_1.default.createElement("div", { role: "group", "aria-label": "Table elements", className: "flex-1 min-w-0 flex flex-col gap-1.5" },
+                react_1.default.createElement("div", { className: "text-rnc-muted-foreground" }, "Table element"),
+                exports.TABLE_STYLE_ELEMENTS.map(function (_a) {
+                    var key = _a.key, label = _a.label;
+                    return (react_1.default.createElement("div", { key: key, className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 h-7" },
+                        react_1.default.createElement("span", { className: "truncate whitespace-nowrap", title: label }, label),
+                        react_1.default.createElement(ElementColorButton, { label: label, color: colors[key], theme: theme, onChange: function (color) { return setColor(key, color); } })));
+                })),
+            react_1.default.createElement("div", { className: "w-[180px] shrink-0 flex flex-col gap-1.5" },
+                react_1.default.createElement("div", { className: "text-rnc-muted-foreground" }, "Preview"),
+                react_1.default.createElement(exports.TableStylePreviewCard, { rowProperties: preview.bandedRange.rowProperties, theme: theme }),
+                react_1.default.createElement(ui_1.Button, { type: "button", variant: "link", size: "xs", className: "self-start no-underline hover:underline", disabled: !hasAnyColor, onClick: function () { return setColors({}); } }, "Clear all colors"))),
+        react_1.default.createElement(ui_1.Separator, null),
+        react_1.default.createElement("div", { className: "flex items-center gap-2" },
+            isEditing && onDelete ? (react_1.default.createElement(ui_1.Button, { type: "button", variant: "ghost", size: "xs", className: "text-rnc-destructive hover:text-rnc-destructive", onClick: function () { return onDelete(style); } }, "Delete style")) : null,
+            react_1.default.createElement("div", { className: "ml-auto flex items-center gap-2" },
+                react_1.default.createElement(ui_1.Button, { type: "button", variant: "ghost", size: "xs", onClick: onCancel }, "Cancel"),
+                react_1.default.createElement(ui_1.Button, { type: "submit", variant: "primary", size: "xs", disabled: !!nameError }, isEditing ? "Save" : "Create")))));
+};
+exports.TableStyleEditor = TableStyleEditor;
+/** "No colour" swatch: a red diagonal on the popover background, as the toolbar's fill button. */
+var NO_COLOR_BACKGROUND = "linear-gradient(to top right, transparent 44%, #d32f2f 44%, #d32f2f 56%, transparent 56%)";
+/**
+ * One element's colour: a swatch button (current colour + chevron) opening the shared colour
+ * popover the toolbar's fill / text colour buttons use (theme colours, standard colours, custom,
+ * and "No color").
+ */
+var ElementColorButton = function (_a) {
+    var label = _a.label, color = _a.color, theme = _a.theme, onChange = _a.onChange;
+    var _b = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    return (react_1.default.createElement(ui_1.Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.Button, { type: "button", variant: "outline", size: "xs", "aria-label": "".concat(label, " color: ").concat(color ? color.toUpperCase() : "No color"), "aria-haspopup": "dialog", "aria-expanded": isOpen, className: "h-7 w-14 px-1 py-0 gap-1 justify-between rounded-sm" },
+                react_1.default.createElement("span", { "data-testid": "element-color-swatch", "aria-hidden": "true", className: "block w-5 h-5 rounded-sm border border-solid border-rnc-border", style: color
+                        ? { backgroundColor: color }
+                        : { backgroundImage: NO_COLOR_BACKGROUND } }),
+                react_1.default.createElement(icons_1.ChevronDownIcon, { className: "w-3 h-3 text-rnc-muted-foreground" }))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "end" },
+            react_1.default.createElement(color_selector_1.ColorSelector, { color: color, theme: theme, resetButtonTitle: "No color", onChange: function (next) {
+                    onChange(next ? (0, themes_1.getStringifiedColor)(next, theme) : undefined);
+                    setIsOpen(false);
+                } }))));
+};
+var PREVIEW_COLUMNS = 5;
+var PREVIEW_BODY_ROWS = 4;
+/**
+ * The table a style paints: a header row over four banded rows, with the first / last column and
+ * total row emphasis when the style colours them. Uses the grid's banding rules
+ * (`api/banded-ranges.ts`): the first body row is the first stripe, the last body row is the
+ * total row, and an edge column's colour outranks the stripe under it.
+ */
+var TableStylePreviewCard = function (_a) {
+    var rowProperties = _a.rowProperties, theme = _a.theme;
+    var resolve = function (color) { var _a; return (_a = (0, themes_1.getStringifiedColor)((0, banded_ranges_1.parseTintedColor)(color), theme)) !== null && _a !== void 0 ? _a : undefined; };
+    var headerColor = resolve(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerColor);
+    var firstBand = resolve(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.firstBandColor);
+    var secondBand = resolve(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.secondBandColor);
+    var firstColumn = resolve(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.firstColumnColor);
+    var lastColumn = resolve(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.lastColumnColor);
+    var totalRow = resolve(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.totalRowColor);
+    var dark = (0, themes_1.getStringifiedColor)({ theme: 1 }, theme);
+    var light = (0, themes_1.getStringifiedColor)({ theme: 0 }, theme);
+    var barColor = function (background) {
+        return background ? (0, utils_1.getContrastColor)(background, dark, light) : undefined;
+    };
+    var cellClass = "table-cell border border-solid border-rnc-border/70 align-middle px-1.5";
+    return (react_1.default.createElement("div", { "data-testid": "table-style-preview", className: "table border-collapse table-fixed w-full h-[108px] rounded-sm bg-rnc-popover" },
+        react_1.default.createElement("div", { className: "table-row", "data-testid": "preview-header-row" }, Array.from({ length: PREVIEW_COLUMNS }, function (_, column) {
+            var _a;
+            return (react_1.default.createElement("div", { key: column, className: cellClass, style: { backgroundColor: headerColor } },
+                react_1.default.createElement("span", { className: "block h-1.5 w-3/4 rounded-full", style: {
+                        backgroundColor: (_a = barColor(headerColor)) !== null && _a !== void 0 ? _a : dark,
+                        opacity: headerColor ? 0.9 : 0.6,
+                    } })));
+        })),
+        Array.from({ length: PREVIEW_BODY_ROWS }, function (_, row) {
+            var isTotalRow = row === PREVIEW_BODY_ROWS - 1;
+            var stripe = row % 2 === 0 ? firstBand : secondBand;
+            var rowBackground = isTotalRow ? totalRow !== null && totalRow !== void 0 ? totalRow : stripe : stripe;
+            return (react_1.default.createElement("div", { className: "table-row", key: row, "data-testid": "preview-body-row" }, Array.from({ length: PREVIEW_COLUMNS }, function (_, column) {
+                var _a;
+                var edge = column === 0
+                    ? firstColumn
+                    : column === PREVIEW_COLUMNS - 1
+                        ? lastColumn
+                        : undefined;
+                var background = edge !== null && edge !== void 0 ? edge : rowBackground;
+                return (react_1.default.createElement("div", { key: column, className: cellClass, style: { backgroundColor: background } },
+                    react_1.default.createElement("span", { className: "block h-1 rounded-full", style: {
+                            width: "".concat(55 + ((row * 3 + column * 5) % 4) * 10, "%"),
+                            backgroundColor: (_a = barColor(background)) !== null && _a !== void 0 ? _a : dark,
+                            opacity: 0.35,
+                        } })));
+            })));
+        })));
+};
+exports.TableStylePreviewCard = TableStylePreviewCard;

package/dist/cjs/components/toolbar/table-style-selector.d.ts

@@ -2,6 +2,7 @@ import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
 import { findMatchingBandProperty } from "@rowsncolumns/utils";
 import React from "react";
 export { findMatchingBandProperty };
+export { buildCustomTableStyle } from "./table-style-editor";
 import type { BandedDefinition, CustomTableStyle, TableStylePreview, TableTheme, TableView } from "../../types";
 import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
 export type TableStyleSelectorProps = {
@@ -26,6 +27,11 @@ export type TableStyleSelectorProps = {
      * without it the selector keeps the styles it created for the session.
      */
     onCreateCustomTableStyle?(style: CustomTableStyle): void;
+    /**
+     * Called with a host-kept custom style the user deletes from the style editor (right-click a
+     * Custom swatch → Delete style); without it host-kept styles cannot be deleted from the gallery.
+     */
+    onDeleteCustomTableStyle?(style: CustomTableStyle): void;
 };
 /** Excel's Table Style Options (Table Design tab), in ribbon order. */
 declare const STYLE_OPTIONS: Array<{
@@ -39,12 +45,6 @@ declare const STYLE_OPTIONS: Array<{
  * does); a custom style has no palette to re-resolve from and keeps its banding.
  */
 export declare const getStyleOptionUpdate: (table: TableView, key: (typeof STYLE_OPTIONS)[number]["key"], checked: boolean) => Partial<TableView>;
-/** The banding a New Table Style paints from its three colours (unset elements stay unpainted). */
-export declare const buildCustomTableStyle: (name: string, colors: {
-    header?: string;
-    firstBand?: string;
-    secondBand?: string;
-}) => CustomTableStyle;
 type TableStyleList = [
     theme: TableTheme,
     firtBandStripeTint: number | undefined,
@@ -57,5 +57,5 @@ type TableStyleList = [
  * importers and both engines resolve a theme name into) plus a per-swatch preview style.
  */
 export declare const getTableBorderStyles: (showRowStripes: boolean | undefined, showColumnStripes: boolean | undefined, theme?: SpreadsheetTheme) => Map<string, TableStyleList[]>;
-export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
+export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, onDeleteCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
 //# sourceMappingURL=table-style-selector.d.ts.map

package/dist/cjs/components/toolbar/table-style-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkBvE,OAAO,EACL,wBAAwB,EAGzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAKpC,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAEhB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9D,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,uEAAuE;AACvE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC;IACzB,GAAG,EACC,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAQA,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,SAAS,EAChB,KAAK,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAC1C,SAAS,OAAO,KACf,OAAO,CAAC,SAAS,CAqBnB,CAAC;AAsBF,mGAAmG;AACnG,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,QAAQ;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,KACnE,gBASD,CAAC;AAEH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAoBzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,wMAa1B,uBAAuB,uBAoS3B,CAAC"}
+{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAevE,OAAO,EACL,wBAAwB,EAGzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,wBAAwB,EAAE,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAEhB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9D,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzD;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,uEAAuE;AACvE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC;IACzB,GAAG,EACC,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAQA,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,SAAS,EAChB,KAAK,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAC1C,SAAS,OAAO,KACf,OAAO,CAAC,SAAS,CAqBnB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAoBzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kOAc1B,uBAAuB,uBA+W3B,CAAC"}

package/dist/cjs/components/toolbar/table-style-selector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableStyleSelector = exports.getTableBorderStyles = exports.buildCustomTableStyle = exports.getStyleOptionUpdate = exports.findMatchingBandProperty = void 0;
+exports.TableStyleSelector = exports.getTableBorderStyles = exports.getStyleOptionUpdate = exports.buildCustomTableStyle = exports.findMatchingBandProperty = void 0;
 var tslib_1 = require("tslib");
 var grid_1 = require("@rowsncolumns/grid");
 var icons_1 = require("@rowsncolumns/icons");
@@ -8,9 +8,12 @@ var ui_1 = require("@rowsncolumns/ui");
 var utils_1 = require("@rowsncolumns/utils");
 Object.defineProperty(exports, "findMatchingBandProperty", { enumerable: true, get: function () { return utils_1.findMatchingBandProperty; } });
 var react_1 = tslib_1.__importStar(require("react"));
+var table_style_editor_1 = require("./table-style-editor");
+Object.defineProperty(exports, "buildCustomTableStyle", { enumerable: true, get: function () { return table_style_editor_1.buildCustomTableStyle; } });
 var banded_ranges_1 = require("../../api/banded-ranges");
 var sheet_context_atom_1 = require("../../atoms/sheet-context.atom");
 var themes_1 = require("../../themes");
+var table_style_editor_2 = require("./table-style-editor");
 /** Excel's Table Style Options (Table Design tab), in ribbon order. */
 var STYLE_OPTIONS = [
     { key: "headerRow", label: "Header Row", defaultValue: true },
@@ -45,37 +48,6 @@ var getStyleOptionUpdate = function (table, key, checked) {
     return update;
 };
 exports.getStyleOptionUpdate = getStyleOptionUpdate;
-/** The colours "New Table Style…" offers for each element (the workbook palette's accents). */
-var NEW_STYLE_COLORS = [
-    "#000000",
-    "#595959",
-    "#a6a6a6",
-    "#d9d9d9",
-    "#ffffff",
-    "#4472c4",
-    "#b4c6e7",
-    "#ed7d31",
-    "#f8cbad",
-    "#a5a5a5",
-    "#ffc000",
-    "#ffe699",
-    "#5b9bd5",
-    "#bdd7ee",
-    "#70ad47",
-    "#c6e0b4",
-];
-/** The banding a New Table Style paints from its three colours (unset elements stay unpainted). */
-var buildCustomTableStyle = function (name, colors) { return ({
-    name: name,
-    bandedRange: {
-        rowProperties: {
-            headerColor: colors.header,
-            firstBandColor: colors.firstBand,
-            secondBandColor: colors.secondBand,
-        },
-    },
-}); };
-exports.buildCustomTableStyle = buildCustomTableStyle;
 /** Gallery groups whose swatch is outlined in the style's accent colour (filled-header styles). */
 var OUTLINED_SWATCH_THEMES = /^TableStyle(?:Light(?:[89]|1[0-4])|Medium(?:1[5-9]|2[01]))$/;
 /**
@@ -110,7 +82,8 @@ var getTableBorderStyles = function (showRowStripes, showColumnStripes, theme) {
 };
 exports.getTableBorderStyles = getTableBorderStyles;
 exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
-    var tables = _a.tables, sheetId = _a.sheetId, theme = _a.theme, activeCell = _a.activeCell, selections = _a.selections, onUpdateTable = _a.onUpdateTable, onCreateTable = _a.onCreateTable, onRequestCreateTable = _a.onRequestCreateTable, onPreviewTableStyle = _a.onPreviewTableStyle, customTableStyles = _a.customTableStyles, onCreateCustomTableStyle = _a.onCreateCustomTableStyle;
+    var _b, _c;
+    var tables = _a.tables, sheetId = _a.sheetId, theme = _a.theme, activeCell = _a.activeCell, selections = _a.selections, onUpdateTable = _a.onUpdateTable, onCreateTable = _a.onCreateTable, onRequestCreateTable = _a.onRequestCreateTable, onPreviewTableStyle = _a.onPreviewTableStyle, customTableStyles = _a.customTableStyles, onCreateCustomTableStyle = _a.onCreateCustomTableStyle, onDeleteCustomTableStyle = _a.onDeleteCustomTableStyle;
     var shouldFocusSheetRef = (0, react_1.useRef)(true);
     var focusSheet = (0, sheet_context_atom_1.useFocusSheet)();
     var table = (0, react_1.useMemo)(function () {
@@ -124,9 +97,14 @@ exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
     // Default showColumnStripes
     var showColumnStripes = table ? Boolean(table.showColumnStripes) : false;
     // Styles created here when the host does not keep them.
-    var _b = tslib_1.__read((0, react_1.useState)([]), 2), sessionCustomStyles = _b[0], setSessionCustomStyles = _b[1];
+    var _d = tslib_1.__read((0, react_1.useState)([]), 2), sessionCustomStyles = _d[0], setSessionCustomStyles = _d[1];
     var allCustomStyles = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((customTableStyles !== null && customTableStyles !== void 0 ? customTableStyles : [])), false), tslib_1.__read(sessionCustomStyles), false); }, [customTableStyles, sessionCustomStyles]);
-    var _c = tslib_1.__read((0, react_1.useState)(false), 2), isCreatingStyle = _c[0], setIsCreatingStyle = _c[1];
+    /**
+     * The style editor: `{}` creates a new style, `{ style }` edits an existing custom one, `null`
+     * shows the "New Table Style…" item.
+     */
+    var _e = tslib_1.__read((0, react_1.useState)(null), 2), styleEditor = _e[0], setStyleEditor = _e[1];
+    var isSessionStyle = (0, react_1.useCallback)(function (style) { return sessionCustomStyles.includes(style); }, [sessionCustomStyles]);
     // Classes
     var hoverClass = "rounded-none hover:outline-solid hover:outline-1 hover:outline hover:outline-offset-1 hover:outline-rnc-primary focus:outline focus:outline-offset-1 focus:outline-rnc-primary hover:bg-transparent focus:bg-transparent text-rnc-foreground p-1";
     var headingClass = "text-xs font-system pt-2 pb-1 text-rnc-foreground";
@@ -178,27 +156,59 @@ exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
             onUpdateTable === null || onUpdateTable === void 0 ? void 0 : onUpdateTable(sheetId, table.id, (0, exports.getStyleOptionUpdate)(table, key, checked));
         }
     }, [table, sheetId, onUpdateTable]);
-    /** "New Table Style…" created a style: keep it and apply it like a picked swatch. */
-    var onCreateStyle = (0, react_1.useCallback)(function (style) {
+    /** Remove a custom style: the host's when it keeps them, otherwise this session's. */
+    var onDeleteStyle = (0, react_1.useCallback)(function (style) {
+        if (isSessionStyle(style)) {
+            setSessionCustomStyles(function (prev) { return prev.filter(function (s) { return s !== style; }); });
+        }
+        else {
+            onDeleteCustomTableStyle === null || onDeleteCustomTableStyle === void 0 ? void 0 : onDeleteCustomTableStyle(style);
+        }
+        setStyleEditor(null);
+    }, [isSessionStyle, onDeleteCustomTableStyle]);
+    /**
+     * The style editor created or saved a style: keep it (a same-named style is replaced; a
+     * renamed one replaces the style being edited) and apply it like a picked swatch.
+     */
+    var onSubmitStyle = (0, react_1.useCallback)(function (style) {
+        var previous = styleEditor === null || styleEditor === void 0 ? void 0 : styleEditor.style;
         if (onCreateCustomTableStyle) {
+            if (previous && previous.name !== style.name) {
+                onDeleteCustomTableStyle === null || onDeleteCustomTableStyle === void 0 ? void 0 : onDeleteCustomTableStyle(previous);
+            }
             onCreateCustomTableStyle(style);
         }
         else {
-            setSessionCustomStyles(function (prev) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), [style], false); });
+            setSessionCustomStyles(function (prev) {
+                var next = prev.filter(function (s) { return s !== previous && s.name !== style.name; });
+                var index = previous ? prev.indexOf(previous) : -1;
+                if (index === -1) {
+                    next.push(style);
+                }
+                else {
+                    next.splice(index, 0, style);
+                }
+                return next;
+            });
         }
-        setIsCreatingStyle(false);
+        setStyleEditor(null);
         onSelectStyle(style.name, style.bandedRange);
-    }, [onCreateCustomTableStyle, onSelectStyle]);
+    }, [
+        styleEditor,
+        onCreateCustomTableStyle,
+        onDeleteCustomTableStyle,
+        onSelectStyle,
+    ]);
     /**
      * Get all table border styles
      */
     var tableBorderstyles = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray([], tslib_1.__read((0, exports.getTableBorderStyles)(showRowStripes, showColumnStripes, theme).entries()), false); }, [showRowStripes, showColumnStripes, theme]);
-    var swatch = function (key, tableTheme, bandProperties, style) { return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: key, onClick: function () { return onSelectStyle(tableTheme, bandProperties); }, onPointerEnter: function () { return previewStyle(tableTheme, bandProperties); }, onPointerLeave: clearPreview, onFocus: function () { return previewStyle(tableTheme, bandProperties); }, onBlur: clearPreview, className: hoverClass, title: tableTheme },
+    var swatch = function (key, tableTheme, bandProperties, style, onContextMenu) { return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: key, onClick: function () { return onSelectStyle(tableTheme, bandProperties); }, onContextMenu: onContextMenu, onPointerEnter: function () { return previewStyle(tableTheme, bandProperties); }, onPointerLeave: clearPreview, onFocus: function () { return previewStyle(tableTheme, bandProperties); }, onBlur: clearPreview, className: hoverClass, title: tableTheme },
         react_1.default.createElement(TableSkeleton, { rowProperties: bandProperties === null || bandProperties === void 0 ? void 0 : bandProperties.rowProperties, columnProperties: bandProperties === null || bandProperties === void 0 ? void 0 : bandProperties.columnProperties, theme: theme, style: style }))); };
     return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false, onOpenChange: function (open) {
             if (!open) {
                 clearPreview();
-                setIsCreatingStyle(false);
+                setStyleEditor(null);
             }
         } },
         react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
@@ -233,10 +243,18 @@ exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
                                 label));
                         })))) : null,
                     allCustomStyles.length ? (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: headingClass }, "Custom"),
+                        react_1.default.createElement("div", { className: (0, ui_1.cn)(headingClass, "flex items-baseline gap-2") },
+                            "Custom",
+                            react_1.default.createElement("span", { className: "ml-auto text-rnc-muted-foreground" }, "Right-click a style to edit it")),
                         react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
                         react_1.default.createElement("div", { className: gridClass }, allCustomStyles.map(function (style, index) {
-                            return swatch("custom-".concat(index), style.name, style.bandedRange);
+                            return swatch("custom-".concat(index), style.name, style.bandedRange, undefined, 
+                            // Excel: right-click a custom style → Modify Table Style… / Delete.
+                            function (event) {
+                                event.preventDefault();
+                                clearPreview();
+                                setStyleEditor({ style: style });
+                            });
                         })))) : null,
                     tableBorderstyles.map(function (_a) {
                         var _b = tslib_1.__read(_a, 2), category = _b[0], tableStyles = _b[1];
@@ -253,53 +271,25 @@ exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
                             }))));
                     }),
                     react_1.default.createElement(ui_1.Separator, { className: "my-1" }),
-                    isCreatingStyle ? (react_1.default.createElement(NewTableStyleForm, { defaultName: "Table Style ".concat(allCustomStyles.length + 1), theme: theme, onCreate: onCreateStyle, onCancel: function () { return setIsCreatingStyle(false); } })) : (react_1.default.createElement(ui_1.DropdownMenuItem, { className: "text-xs", 
-                        // Keep the menu open: the form replaces this item in place.
+                    styleEditor ? (react_1.default.createElement(table_style_editor_2.TableStyleEditor
+                    // Remount per style so the fields seed from the style being edited.
+                    , { 
+                        // Remount per style so the fields seed from the style being edited.
+                        key: (_c = (_b = styleEditor.style) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "", style: styleEditor.style, defaultName: "Table Style ".concat(allCustomStyles.length + 1), existingNames: allCustomStyles.map(function (style) { return style.name; }), theme: theme, onSubmit: onSubmitStyle, onCancel: function () { return setStyleEditor(null); }, onDelete: styleEditor.style &&
+                            (isSessionStyle(styleEditor.style) ||
+                                onDeleteCustomTableStyle)
+                            ? onDeleteStyle
+                            : undefined })) : (react_1.default.createElement(ui_1.DropdownMenuItem, { className: "text-xs", 
+                        // Keep the menu open: the editor replaces this item in place.
                         onSelect: function (event) {
                             event.preventDefault();
-                            setIsCreatingStyle(true);
+                            setStyleEditor({});
                         } }, "New Table Style\u2026")),
-                    react_1.default.createElement(ui_1.DropdownMenuItem, { className: "text-xs", onClick: function () { return onSelectStyle("None", undefined); }, onPointerEnter: function () { return previewStyle("None", undefined); }, onPointerLeave: clearPreview, onFocus: function () { return previewStyle("None", undefined); }, onBlur: clearPreview }, "Clear"))))));
+                    styleEditor ? null : (
+                    // Clear (no table style) belongs to the gallery, not to the style editor: while
+                    // the editor is open its footer ends the panel.
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { className: "text-xs", onClick: function () { return onSelectStyle("None", undefined); }, onPointerEnter: function () { return previewStyle("None", undefined); }, onPointerLeave: clearPreview, onFocus: function () { return previewStyle("None", undefined); }, onBlur: clearPreview }, "Clear")))))));
 });
-/**
- * "New Table Style…" — Excel's dialog reduced to the three elements the gallery swatches show:
- * header, first banded row, second banded row. Inline in the gallery so the picked colours
- * preview in the same place they will be offered.
- */
-var NewTableStyleForm = function (_a) {
-    var defaultName = _a.defaultName, theme = _a.theme, onCreate = _a.onCreate, onCancel = _a.onCancel;
-    var _b = tslib_1.__read((0, react_1.useState)(defaultName), 2), name = _b[0], setName = _b[1];
-    var _c = tslib_1.__read((0, react_1.useState)("#4472c4"), 2), header = _c[0], setHeader = _c[1];
-    var _d = tslib_1.__read((0, react_1.useState)("#b4c6e7"), 2), firstBand = _d[0], setFirstBand = _d[1];
-    var _e = tslib_1.__read((0, react_1.useState)("#ffffff"), 2), secondBand = _e[0], setSecondBand = _e[1];
-    var preview = (0, react_1.useMemo)(function () { return (0, exports.buildCustomTableStyle)(name, { header: header, firstBand: firstBand, secondBand: secondBand }); }, [name, header, firstBand, secondBand]);
-    var rows = [
-        ["Header Row", header, setHeader],
-        ["First Row Stripe", firstBand, setFirstBand],
-        ["Second Row Stripe", secondBand, setSecondBand],
-    ];
-    return (react_1.default.createElement("form", { "data-testid": "new-table-style-form", className: "m-0 p-1 flex flex-col gap-2", 
-        // The gallery is a Radix menu: keep typing in the fields from driving its typeahead.
-        onKeyDown: function (event) { return event.stopPropagation(); }, onSubmit: function (event) {
-            event.preventDefault();
-            if (name.trim()) {
-                onCreate((0, exports.buildCustomTableStyle)(name.trim(), { header: header, firstBand: firstBand, secondBand: secondBand }));
-            }
-        } },
-        react_1.default.createElement("div", { className: "flex items-center gap-2" },
-            react_1.default.createElement("label", { className: "font-system text-xs w-24", htmlFor: "rnc-new-table-style-name" }, "Name"),
-            react_1.default.createElement(ui_1.Input, { id: "rnc-new-table-style-name", value: name, onChange: function (event) { return setName(event.target.value); }, required: true }),
-            react_1.default.createElement(TableSkeleton, { rowProperties: preview.bandedRange.rowProperties, theme: theme })),
-        rows.map(function (_a) {
-            var _b = tslib_1.__read(_a, 3), label = _b[0], value = _b[1], setValue = _b[2];
-            return (react_1.default.createElement("div", { className: "flex items-center gap-2", key: label },
-                react_1.default.createElement("span", { className: "font-system text-xs w-24" }, label),
-                react_1.default.createElement(ui_1.ColorPicker, { colors: NEW_STYLE_COLORS, value: value, onChange: setValue, size: 14, className: "flex-wrap", direction: "horizontal" })));
-        }),
-        react_1.default.createElement("div", { className: "flex gap-1" },
-            react_1.default.createElement(ui_1.Button, { type: "submit", variant: "primary", size: "xs", disabled: !name.trim() }, "Create"),
-            react_1.default.createElement(ui_1.Button, { size: "xs", type: "button", onClick: onCancel }, "Cancel"))));
-};
 /**
  * Table skeleton
  * @param param0