@rowsncolumns/spreadsheet 10.3.1 → 10.4.0

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.findMatchingBandProperty = void 0;
+exports.TableStyleSelector = exports.getTableBorderStyles = exports.buildCustomTableStyle = exports.getStyleOptionUpdate = exports.findMatchingBandProperty = void 0;
 var tslib_1 = require("tslib");
 var grid_1 = require("@rowsncolumns/grid");
 var icons_1 = require("@rowsncolumns/icons");
@@ -11,379 +11,106 @@ var react_1 = tslib_1.__importStar(require("react"));
 var banded_ranges_1 = require("../../api/banded-ranges");
 var sheet_context_atom_1 = require("../../atoms/sheet-context.atom");
 var themes_1 = require("../../themes");
-var stripeTint = 0.8;
-var colorIndexes = [1, 4, 5, 6, 7, 8, 9];
+/** Excel's Table Style Options (Table Design tab), in ribbon order. */
+var STYLE_OPTIONS = [
+    { key: "headerRow", label: "Header Row", defaultValue: true },
+    { key: "totalRow", label: "Total Row", defaultValue: false },
+    { key: "showRowStripes", label: "Banded Rows", defaultValue: true },
+    { key: "showColumnStripes", label: "Banded Columns", defaultValue: false },
+    { key: "showFirstColumn", label: "First Column", defaultValue: false },
+    { key: "showLastColumn", label: "Last Column", defaultValue: false },
+    { key: "filterButton", label: "Filter Button", defaultValue: true },
+];
+var isBuiltInTheme = function (theme) {
+    return !!theme && /^TableStyle(Light|Medium|Dark)\d+$/.test(theme);
+};
+/**
+ * The table update a Style Options toggle produces. Flipping Banded Rows / Banded Columns on a
+ * built-in style re-resolves the banding for the new stripe toggles (what the Edit Table dialog
+ * does); a custom style has no palette to re-resolve from and keeps its banding.
+ */
+var getStyleOptionUpdate = function (table, key, checked) {
+    var _a;
+    var update = (_a = {}, _a[key] = checked, _a);
+    if ((key === "showRowStripes" || key === "showColumnStripes") &&
+        isBuiltInTheme(table.theme)) {
+        var showRowStripes = key === "showRowStripes" ? checked : table.showRowStripes !== false;
+        var showColumnStripes = key === "showColumnStripes" ? checked : table.showColumnStripes === true;
+        var bandedRange = (0, utils_1.findMatchingBandProperty)(table.theme, showRowStripes, showColumnStripes);
+        if (bandedRange && !showColumnStripes) {
+            delete bandedRange.columnProperties;
+        }
+        update.bandedRange = bandedRange;
+    }
+    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]))$/;
+/**
+ * The gallery's table styles: the shared palette (`@rowsncolumns/utils` — the same banding the
+ * importers and both engines resolve a theme name into) plus a per-swatch preview style.
+ */
 var getTableBorderStyles = function (showRowStripes, showColumnStripes, theme) {
-    var runningLightIndex = 1;
-    var runningMediumIndex = 1;
-    var runningDarkIndex = 1;
-    return new Map([
-        [
-            "Light",
-            tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([
-                ["None", 0, 0, undefined]
-            ], tslib_1.__read(colorIndexes.map(function (value) {
-                return [
-                    "TableStyleLight" + runningLightIndex++,
-                    stripeTint,
-                    1,
-                    {
-                        rowProperties: {
-                            firstBandColor: {
-                                theme: value,
-                                tint: showRowStripes ? stripeTint : 1,
-                            },
-                            secondBandColor: showRowStripes
-                                ? {
-                                    theme: 0,
-                                }
-                                : undefined,
-                            headerBorder: {
-                                top: {
-                                    width: 1,
-                                    style: "solid",
-                                    color: {
-                                        theme: value,
-                                    },
-                                },
-                                bottom: {
-                                    width: 1,
-                                    style: "solid",
-                                    color: {
-                                        theme: value,
-                                    },
-                                },
-                            },
-                            footerBorder: {
-                                bottom: {
-                                    width: 1,
-                                    style: "solid",
-                                    color: {
-                                        theme: value,
-                                    },
-                                },
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value,
-                                    tint: showColumnStripes ? stripeTint : 1,
-                                },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false), tslib_1.__read(colorIndexes.map(function (value) {
-                return [
-                    "TableStyleLight" + runningLightIndex++,
-                    undefined,
-                    undefined,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: value,
-                            },
-                        },
-                    },
-                    {
-                        border: theme
-                            ? "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: value }, theme))
-                            : undefined,
-                    },
-                ];
-            })), false), tslib_1.__read(colorIndexes.map(function (value) {
-                var border = {
-                    width: 1,
-                    style: "solid",
-                    color: {
-                        theme: value,
-                    },
-                };
-                return [
-                    "TableStyleLight" + runningLightIndex++,
-                    stripeTint,
-                    1,
-                    {
-                        rowProperties: {
-                            firstBandColor: {
-                                theme: value,
-                                tint: showRowStripes ? stripeTint : 1,
-                            },
-                            secondBandColor: showRowStripes
-                                ? {
-                                    theme: 0,
-                                }
-                                : undefined,
-                            firstBandBorder: {
-                                top: border,
-                                left: border,
-                                right: border,
-                                bottom: border,
-                            },
-                            headerBorder: {
-                                top: border,
-                                left: border,
-                                right: border,
-                                bottom: border,
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value,
-                                    tint: showColumnStripes ? stripeTint : 1,
-                                },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false),
-        ],
-        [
-            "Medium",
-            tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(colorIndexes.map(function (value) {
-                return [
-                    "TableStyleMedium" + runningMediumIndex++,
-                    stripeTint,
-                    1,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: value,
-                            },
-                            firstBandColor: {
-                                theme: value,
-                                tint: showRowStripes ? stripeTint : 1,
-                            },
-                            secondBandColor: showRowStripes
-                                ? {
-                                    theme: 0,
-                                }
-                                : undefined,
-                            firstBandBorder: {
-                                bottom: {
-                                    width: 1,
-                                    style: "solid",
-                                    color: {
-                                        theme: value,
-                                    },
-                                },
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value,
-                                    tint: showColumnStripes ? stripeTint : 1,
-                                },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false), tslib_1.__read(colorIndexes.map(function (value) {
-                return [
-                    "TableStyleMedium" + runningMediumIndex++,
-                    0.6,
-                    0.8,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: value,
-                            },
-                            firstBandColor: {
-                                theme: value,
-                                tint: showRowStripes ? 0.6 : 0.8,
-                            },
-                            secondBandColor: {
-                                theme: value,
-                                tint: 0.8,
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value,
-                                    tint: showColumnStripes ? 0.6 : 0.8,
-                                },
-                                // secondBandColor: {
-                                //   theme: value,
-                                //   tint: 0.8,
-                                // },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false), tslib_1.__read(colorIndexes.map(function (value) {
-                var border = {
-                    width: 2,
-                    style: "solid",
-                    color: {
-                        theme: 1,
-                    },
-                };
-                return [
-                    "TableStyleMedium" + runningMediumIndex++,
-                    -0.15,
-                    1,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: value,
-                            },
-                            firstBandColor: {
-                                theme: 0,
-                                tint: showRowStripes ? -0.15 : 1,
-                            },
-                            secondBandColor: showRowStripes
-                                ? {
-                                    theme: 0,
-                                }
-                                : undefined,
-                            headerBorder: {
-                                top: border,
-                            },
-                            footerBorder: {
-                                bottom: border,
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: 0,
-                                    tint: showColumnStripes ? -0.15 : 1,
-                                },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false), tslib_1.__read(colorIndexes.map(function (value) {
-                var border = {
-                    width: 1,
-                    style: "solid",
-                    color: {
-                        theme: value,
-                    },
-                };
-                return [
-                    "TableStyleMedium" + runningMediumIndex++,
-                    stripeTint,
-                    0.9,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: value,
-                                tint: 0.9,
-                            },
-                            firstBandColor: {
-                                theme: value,
-                                tint: showRowStripes ? stripeTint : 0.9,
-                            },
-                            secondBandColor: {
-                                theme: value,
-                                tint: 0.9,
-                            },
-                            firstBandBorder: {
-                                top: border,
-                                left: border,
-                                right: border,
-                                bottom: border,
-                            },
-                            headerBorder: {
-                                top: border,
-                                left: border,
-                                right: border,
-                                bottom: border,
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value,
-                                    tint: showColumnStripes ? stripeTint : 0.9,
-                                },
-                            }
-                            : undefined,
-                    },
-                    {
-                        border: theme
-                            ? "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: value }, theme))
-                            : undefined,
-                    },
-                ];
-            })), false),
-        ],
-        [
-            "Dark",
-            tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(colorIndexes.map(function (value) {
-                var firstTint = value - 1 === 0 ? 0.25 : -0.25;
-                var secondTint = value - 1 === 0 ? 0.5 : 0;
-                return [
-                    "TableStyleDark" + runningDarkIndex++,
-                    firstTint,
-                    secondTint,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: 1,
-                            },
-                            firstBandColor: {
-                                theme: value,
-                                tint: showRowStripes ? firstTint : secondTint,
-                            },
-                            secondBandColor: {
-                                theme: value,
-                                tint: secondTint,
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value,
-                                    tint: showColumnStripes ? firstTint : secondTint,
-                                },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false), tslib_1.__read([1, 5, 7, 9].map(function (value) {
-                var firstTint = value - 1 === 0 ? -0.35 : 0.6;
-                var secondTint = value - 1 === 0 ? -0.15 : 0.8;
-                return [
-                    "TableStyleDark" + runningDarkIndex++,
-                    firstTint,
-                    secondTint,
-                    {
-                        rowProperties: {
-                            headerColor: {
-                                theme: value,
-                            },
-                            firstBandColor: {
-                                theme: value - 1,
-                                tint: showRowStripes ? firstTint : secondTint,
-                            },
-                            secondBandColor: {
-                                theme: value - 1,
-                                tint: secondTint,
-                            },
-                        },
-                        columnProperties: showColumnStripes
-                            ? {
-                                firstBandColor: {
-                                    theme: value - 1,
-                                    tint: showColumnStripes ? firstTint : secondTint,
-                                },
-                            }
-                            : undefined,
-                    },
-                ];
-            })), false),
-        ],
-    ]);
+    var e_1, _a;
+    var entries = new Map();
+    try {
+        for (var _b = tslib_1.__values((0, utils_1.getTableBorderStyles)(showRowStripes, showColumnStripes)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = tslib_1.__read(_c.value, 2), category = _d[0], styles = _d[1];
+            entries.set(category, styles.map(function (_a) {
+                var _b;
+                var _c = tslib_1.__read(_a, 4), tableTheme = _c[0], firstBandTint = _c[1], secondBandTint = _c[2], definition = _c[3];
+                var accent = (_b = definition === null || definition === void 0 ? void 0 : definition.rowProperties) === null || _b === void 0 ? void 0 : _b.headerColor;
+                var style = theme && accent && OUTLINED_SWATCH_THEMES.test(tableTheme)
+                    ? { border: "1px solid ".concat((0, themes_1.getStringifiedColor)(accent, theme)) }
+                    : undefined;
+                return [tableTheme, firstBandTint, secondBandTint, definition, style];
+            }));
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return entries;
 };
 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;
+    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 shouldFocusSheetRef = (0, react_1.useRef)(true);
     var focusSheet = (0, sheet_context_atom_1.useFocusSheet)();
     var table = (0, react_1.useMemo)(function () {
@@ -393,29 +120,87 @@ exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
         });
     }, [tables, sheetId, activeCell]);
     // Default showstripes is always true
-    var showRowStripes = table ? Boolean(table.showRowStripes) : true;
+    var showRowStripes = table ? table.showRowStripes !== false : true;
     // 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 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];
     // 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";
     var gridClass = "grid grid-cols-3 md:grid-cols-7 gap-1 pb-1";
+    var optionClass = "pl-6 pr-2 py-1 text-xs";
+    /**
+     * Live preview of the hovered swatch on the active table (a plain range has nothing to paint).
+     */
+    var previewStyle = (0, react_1.useCallback)(function (theme, bandedRange) {
+        if (table) {
+            onPreviewTableStyle === null || onPreviewTableStyle === void 0 ? void 0 : onPreviewTableStyle({
+                sheetId: sheetId,
+                tableId: table.id,
+                theme: theme,
+                bandedRange: bandedRange,
+            });
+        }
+    }, [table, sheetId, onPreviewTableStyle]);
+    var clearPreview = (0, react_1.useCallback)(function () {
+        onPreviewTableStyle === null || onPreviewTableStyle === void 0 ? void 0 : onPreviewTableStyle(null);
+    }, [onPreviewTableStyle]);
     /**
      * On Select style
      */
     var onSelectStyle = (0, react_1.useCallback)(function (theme, bandedRange) {
+        clearPreview();
         if (table) {
             onUpdateTable === null || onUpdateTable === void 0 ? void 0 : onUpdateTable(sheetId, table.id, tslib_1.__assign(tslib_1.__assign({}, table), { theme: theme, bandedRange: bandedRange }));
         }
+        else if (onRequestCreateTable) {
+            onRequestCreateTable(sheetId, activeCell, selections, theme, bandedRange);
+        }
         else {
             onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections, undefined, theme, bandedRange);
         }
-    }, [table, sheetId, activeCell, selections, onCreateTable, onUpdateTable]);
+    }, [
+        table,
+        sheetId,
+        activeCell,
+        selections,
+        onCreateTable,
+        onRequestCreateTable,
+        onUpdateTable,
+        clearPreview,
+    ]);
+    /** A Style Options toggle → the table update (banding re-resolved for stripe toggles). */
+    var onToggleStyleOption = (0, react_1.useCallback)(function (key, checked) {
+        if (table) {
+            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) {
+        if (onCreateCustomTableStyle) {
+            onCreateCustomTableStyle(style);
+        }
+        else {
+            setSessionCustomStyles(function (prev) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), [style], false); });
+        }
+        setIsCreatingStyle(false);
+        onSelectStyle(style.name, style.bandedRange);
+    }, [onCreateCustomTableStyle, 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]);
-    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+    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 },
+        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);
+            }
+        } },
         react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
             react_1.default.createElement(ui_1.IconButton, { size: "xl", tooltip: "Format as Table", className: "gap-1" },
                 react_1.default.createElement(icons_1.TableIcon, null),
@@ -430,24 +215,91 @@ exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
                 }, onInteractOutside: function () {
                     shouldFocusSheetRef.current = false;
                 } },
-                react_1.default.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" }, tableBorderstyles.map(function (_a) {
-                    var _b = tslib_1.__read(_a, 2), category = _b[0], tableStyles = _b[1];
-                    return (react_1.default.createElement("div", { key: category },
-                        react_1.default.createElement("div", { className: headingClass }, category),
+                react_1.default.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    table ? (react_1.default.createElement("div", { "data-testid": "table-style-options" },
+                        react_1.default.createElement("div", { className: headingClass }, "Style Options"),
+                        react_1.default.createElement(ui_1.Separator, { className: "mb-1" }),
+                        react_1.default.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 pb-1" }, STYLE_OPTIONS.map(function (_a) {
+                            var _b;
+                            var key = _a.key, label = _a.label, defaultValue = _a.defaultValue;
+                            return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: key, className: optionClass, checked: (_b = table[key]) !== null && _b !== void 0 ? _b : defaultValue, disabled: key === "filterButton" && table.headerRow === false, 
+                                // Keep the gallery open across toggles (a checkbox item closes the menu on
+                                // select by default).
+                                onSelect: function (event) { return event.preventDefault(); }, onCheckedChange: function (checked) {
+                                    return onToggleStyleOption(key, checked === true);
+                                } },
+                                react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                                    react_1.default.createElement(icons_1.CheckIcon, null)),
+                                label));
+                        })))) : null,
+                    allCustomStyles.length ? (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: headingClass }, "Custom"),
                         react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
-                        react_1.default.createElement("div", { className: gridClass }, tableStyles.map(function (_a, index) {
-                            var _b = tslib_1.__read(_a, 5), tableTheme = _b[0], 
-                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                            firstBandTint = _b[1], 
-                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                            secondBandTint = _b[2], bandProperties = _b[3], style = _b[4];
-                            return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: index, onClick: function () {
-                                    return onSelectStyle(tableTheme, bandProperties);
-                                }, 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 })));
-                        }))));
-                }))))));
+                        react_1.default.createElement("div", { className: gridClass }, allCustomStyles.map(function (style, index) {
+                            return swatch("custom-".concat(index), style.name, style.bandedRange);
+                        })))) : null,
+                    tableBorderstyles.map(function (_a) {
+                        var _b = tslib_1.__read(_a, 2), category = _b[0], tableStyles = _b[1];
+                        return (react_1.default.createElement("div", { key: category },
+                            react_1.default.createElement("div", { className: headingClass }, category),
+                            react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                            react_1.default.createElement("div", { className: gridClass }, tableStyles.map(function (_a, index) {
+                                var _b = tslib_1.__read(_a, 5), tableTheme = _b[0], 
+                                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                firstBandTint = _b[1], 
+                                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                secondBandTint = _b[2], bandProperties = _b[3], style = _b[4];
+                                return swatch(index, tableTheme, bandProperties, style);
+                            }))));
+                    }),
+                    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.
+                        onSelect: function (event) {
+                            event.preventDefault();
+                            setIsCreatingStyle(true);
+                        } }, "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"))))));
 });
+/**
+ * "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