@rowsncolumns/spreadsheet 10.3.1 → 10.4.0

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

@@ -1,395 +1,93 @@
 import { isCellWithinBounds } from "@rowsncolumns/grid";
-import { MdOutlineArrowDropDown, TableIcon } from "@rowsncolumns/icons";
-import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, Separator, } from "@rowsncolumns/ui";
-import { getContrastColor, findMatchingBandProperty, } from "@rowsncolumns/utils";
-import React, { memo, useCallback, useMemo, useRef } from "react";
+import { CheckIcon, MdOutlineArrowDropDown, TableIcon } from "@rowsncolumns/icons";
+import { Button, cn, ColorPicker, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuTrigger, IconButton, Input, Separator, } from "@rowsncolumns/ui";
+import { findMatchingBandProperty, getContrastColor, getTableBorderStyles as getSharedTableStyles, } from "@rowsncolumns/utils";
+import React, { memo, useCallback, useMemo, useRef, useState } from "react";
 // Re-export the shared function for backwards compatibility
 export { findMatchingBandProperty };
 import { parseTintedColor } from "../../api/banded-ranges";
 import { useFocusSheet } from "../../atoms/sheet-context.atom";
 import { getStringifiedColor } from "../../themes";
-const stripeTint = 0.8;
-const colorIndexes = [1, 4, 5, 6, 7, 8, 9];
+/** Excel's Table Style Options (Table Design tab), in ribbon order. */
+const 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 },
+];
+const isBuiltInTheme = (theme) => !!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.
+ */
+export const getStyleOptionUpdate = (table, key, checked) => {
+    const update = { [key]: checked };
+    if ((key === "showRowStripes" || key === "showColumnStripes") &&
+        isBuiltInTheme(table.theme)) {
+        const showRowStripes = key === "showRowStripes" ? checked : table.showRowStripes !== false;
+        const showColumnStripes = key === "showColumnStripes" ? checked : table.showColumnStripes === true;
+        const bandedRange = findMatchingBandProperty(table.theme, showRowStripes, showColumnStripes);
+        if (bandedRange && !showColumnStripes) {
+            delete bandedRange.columnProperties;
+        }
+        update.bandedRange = bandedRange;
+    }
+    return update;
+};
+/** The colours "New Table Style…" offers for each element (the workbook palette's accents). */
+const 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). */
+export const buildCustomTableStyle = (name, colors) => ({
+    name,
+    bandedRange: {
+        rowProperties: {
+            headerColor: colors.header,
+            firstBandColor: colors.firstBand,
+            secondBandColor: colors.secondBand,
+        },
+    },
+});
+/** Gallery groups whose swatch is outlined in the style's accent colour (filled-header styles). */
+const 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.
+ */
 export const getTableBorderStyles = (showRowStripes, showColumnStripes, theme) => {
-    let runningLightIndex = 1;
-    let runningMediumIndex = 1;
-    let runningDarkIndex = 1;
-    return new Map([
-        [
-            "Light",
-            [
-                ["None", 0, 0, undefined],
-                ...colorIndexes.map((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,
-                        },
-                    ];
-                }),
-                ...colorIndexes.map((value) => {
-                    return [
-                        "TableStyleLight" + runningLightIndex++,
-                        undefined,
-                        undefined,
-                        {
-                            rowProperties: {
-                                headerColor: {
-                                    theme: value,
-                                },
-                            },
-                        },
-                        {
-                            border: theme
-                                ? `1px solid ${getStringifiedColor({ theme: value }, theme)}`
-                                : undefined,
-                        },
-                    ];
-                }),
-                ...colorIndexes.map((value) => {
-                    const 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,
-                        },
-                    ];
-                }),
-            ],
-        ],
-        [
-            "Medium",
-            [
-                ...colorIndexes.map((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,
-                        },
-                    ];
-                }),
-                ...colorIndexes.map((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,
-                        },
-                    ];
-                }),
-                ...colorIndexes.map((value) => {
-                    const 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,
-                        },
-                    ];
-                }),
-                ...colorIndexes.map((value) => {
-                    const 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 ${getStringifiedColor({ theme: value }, theme)}`
-                                : undefined,
-                        },
-                    ];
-                }),
-            ],
-        ],
-        [
-            "Dark",
-            [
-                ...colorIndexes.map((value) => {
-                    const firstTint = value - 1 === 0 ? 0.25 : -0.25;
-                    const 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,
-                        },
-                    ];
-                }),
-                ...[1, 5, 7, 9].map((value) => {
-                    const firstTint = value - 1 === 0 ? -0.35 : 0.6;
-                    const 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,
-                        },
-                    ];
-                }),
-            ],
-        ],
-    ]);
+    const entries = new Map();
+    for (const [category, styles] of getSharedTableStyles(showRowStripes, showColumnStripes)) {
+        entries.set(category, styles.map(([tableTheme, firstBandTint, secondBandTint, definition]) => {
+            const accent = definition?.rowProperties?.headerColor;
+            const style = theme && accent && OUTLINED_SWATCH_THEMES.test(tableTheme)
+                ? { border: `1px solid ${getStringifiedColor(accent, theme)}` }
+                : undefined;
+            return [tableTheme, firstBandTint, secondBandTint, definition, style];
+        }));
+    }
+    return entries;
 };
-export const TableStyleSelector = memo(({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, }) => {
+export const TableStyleSelector = memo(({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, }) => {
     const shouldFocusSheetRef = useRef(true);
     const focusSheet = useFocusSheet();
     const table = useMemo(() => {
@@ -397,17 +95,39 @@ export const TableStyleSelector = memo(({ tables, sheetId, theme, activeCell, se
             isCellWithinBounds(activeCell, table.range));
     }, [tables, sheetId, activeCell]);
     // Default showstripes is always true
-    const showRowStripes = table ? Boolean(table.showRowStripes) : true;
+    const showRowStripes = table ? table.showRowStripes !== false : true;
     // Default showColumnStripes
     const showColumnStripes = table ? Boolean(table.showColumnStripes) : false;
+    // Styles created here when the host does not keep them.
+    const [sessionCustomStyles, setSessionCustomStyles] = useState([]);
+    const allCustomStyles = useMemo(() => [...(customTableStyles ?? []), ...sessionCustomStyles], [customTableStyles, sessionCustomStyles]);
+    const [isCreatingStyle, setIsCreatingStyle] = useState(false);
     // Classes
     const 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";
     const headingClass = "text-xs font-system pt-2 pb-1 text-rnc-foreground";
     const gridClass = "grid grid-cols-3 md:grid-cols-7 gap-1 pb-1";
+    const 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).
+     */
+    const previewStyle = useCallback((theme, bandedRange) => {
+        if (table) {
+            onPreviewTableStyle?.({
+                sheetId,
+                tableId: table.id,
+                theme,
+                bandedRange,
+            });
+        }
+    }, [table, sheetId, onPreviewTableStyle]);
+    const clearPreview = useCallback(() => {
+        onPreviewTableStyle?.(null);
+    }, [onPreviewTableStyle]);
     /**
      * On Select style
      */
     const onSelectStyle = useCallback((theme, bandedRange) => {
+        clearPreview();
         if (table) {
             onUpdateTable?.(sheetId, table.id, {
                 ...table,
@@ -415,17 +135,53 @@ export const TableStyleSelector = memo(({ tables, sheetId, theme, activeCell, se
                 bandedRange,
             });
         }
+        else if (onRequestCreateTable) {
+            onRequestCreateTable(sheetId, activeCell, selections, theme, bandedRange);
+        }
         else {
             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). */
+    const onToggleStyleOption = useCallback((key, checked) => {
+        if (table) {
+            onUpdateTable?.(sheetId, table.id, getStyleOptionUpdate(table, key, checked));
+        }
+    }, [table, sheetId, onUpdateTable]);
+    /** "New Table Style…" created a style: keep it and apply it like a picked swatch. */
+    const onCreateStyle = useCallback((style) => {
+        if (onCreateCustomTableStyle) {
+            onCreateCustomTableStyle(style);
+        }
+        else {
+            setSessionCustomStyles((prev) => [...prev, style]);
+        }
+        setIsCreatingStyle(false);
+        onSelectStyle(style.name, style.bandedRange);
+    }, [onCreateCustomTableStyle, onSelectStyle]);
     /**
      * Get all table border styles
      */
     const tableBorderstyles = useMemo(() => [
         ...getTableBorderStyles(showRowStripes, showColumnStripes, theme).entries(),
     ], [showRowStripes, showColumnStripes, theme]);
-    return (React.createElement(DropdownMenu, { modal: false },
+    const swatch = (key, tableTheme, bandProperties, style) => (React.createElement(DropdownMenuItem, { key: key, onClick: () => onSelectStyle(tableTheme, bandProperties), onPointerEnter: () => previewStyle(tableTheme, bandProperties), onPointerLeave: clearPreview, onFocus: () => previewStyle(tableTheme, bandProperties), onBlur: clearPreview, className: hoverClass, title: tableTheme },
+        React.createElement(TableSkeleton, { rowProperties: bandProperties?.rowProperties, columnProperties: bandProperties?.columnProperties, theme: theme, style: style })));
+    return (React.createElement(DropdownMenu, { modal: false, onOpenChange: (open) => {
+            if (!open) {
+                clearPreview();
+                setIsCreatingStyle(false);
+            }
+        } },
         React.createElement(DropdownMenuTrigger, { asChild: true },
             React.createElement(IconButton, { size: "xl", tooltip: "Format as Table", className: "gap-1" },
                 React.createElement(TableIcon, null),
@@ -440,20 +196,75 @@ export const TableStyleSelector = memo(({ tables, sheetId, theme, activeCell, se
                 }, onInteractOutside: () => {
                     shouldFocusSheetRef.current = false;
                 } },
-                React.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" }, tableBorderstyles.map(([category, tableStyles]) => {
-                    return (React.createElement("div", { key: category },
-                        React.createElement("div", { className: headingClass }, category),
+                React.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    table ? (React.createElement("div", { "data-testid": "table-style-options" },
+                        React.createElement("div", { className: headingClass }, "Style Options"),
+                        React.createElement(Separator, { className: "mb-1" }),
+                        React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 pb-1" }, STYLE_OPTIONS.map(({ key, label, defaultValue }) => (React.createElement(DropdownMenuCheckboxItem, { key: key, className: optionClass, checked: table[key] ?? defaultValue, disabled: key === "filterButton" && table.headerRow === false, 
+                            // Keep the gallery open across toggles (a checkbox item closes the menu on
+                            // select by default).
+                            onSelect: (event) => event.preventDefault(), onCheckedChange: (checked) => onToggleStyleOption(key, checked === true) },
+                            React.createElement(DropdownMenuItemIndicator, null,
+                                React.createElement(CheckIcon, null)),
+                            label)))))) : null,
+                    allCustomStyles.length ? (React.createElement("div", null,
+                        React.createElement("div", { className: headingClass }, "Custom"),
                         React.createElement(Separator, { className: "mb-2" }),
-                        React.createElement("div", { className: gridClass }, tableStyles.map(([tableTheme, 
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        firstBandTint, 
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        secondBandTint, bandProperties, style,], index) => {
-                            return (React.createElement(DropdownMenuItem, { key: index, onClick: () => onSelectStyle(tableTheme, bandProperties), className: hoverClass, title: tableTheme },
-                                React.createElement(TableSkeleton, { rowProperties: bandProperties?.rowProperties, columnProperties: bandProperties?.columnProperties, theme: theme, style: style })));
-                        }))));
-                }))))));
+                        React.createElement("div", { className: gridClass }, allCustomStyles.map((style, index) => swatch(`custom-${index}`, style.name, style.bandedRange))))) : null,
+                    tableBorderstyles.map(([category, tableStyles]) => {
+                        return (React.createElement("div", { key: category },
+                            React.createElement("div", { className: headingClass }, category),
+                            React.createElement(Separator, { className: "mb-2" }),
+                            React.createElement("div", { className: gridClass }, tableStyles.map(([tableTheme, 
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            firstBandTint, 
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            secondBandTint, bandProperties, style,], index) => swatch(index, tableTheme, bandProperties, style)))));
+                    }),
+                    React.createElement(Separator, { className: "my-1" }),
+                    isCreatingStyle ? (React.createElement(NewTableStyleForm, { defaultName: `Table Style ${allCustomStyles.length + 1}`, theme: theme, onCreate: onCreateStyle, onCancel: () => setIsCreatingStyle(false) })) : (React.createElement(DropdownMenuItem, { className: "text-xs", 
+                        // Keep the menu open: the form replaces this item in place.
+                        onSelect: (event) => {
+                            event.preventDefault();
+                            setIsCreatingStyle(true);
+                        } }, "New Table Style\u2026")),
+                    React.createElement(DropdownMenuItem, { className: "text-xs", onClick: () => onSelectStyle("None", undefined), onPointerEnter: () => previewStyle("None", undefined), onPointerLeave: clearPreview, onFocus: () => 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.
+ */
+const NewTableStyleForm = ({ defaultName, theme, onCreate, onCancel, }) => {
+    const [name, setName] = useState(defaultName);
+    const [header, setHeader] = useState("#4472c4");
+    const [firstBand, setFirstBand] = useState("#b4c6e7");
+    const [secondBand, setSecondBand] = useState("#ffffff");
+    const preview = useMemo(() => buildCustomTableStyle(name, { header, firstBand, secondBand }), [name, header, firstBand, secondBand]);
+    const rows = [
+        ["Header Row", header, setHeader],
+        ["First Row Stripe", firstBand, setFirstBand],
+        ["Second Row Stripe", secondBand, setSecondBand],
+    ];
+    return (React.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: (event) => event.stopPropagation(), onSubmit: (event) => {
+            event.preventDefault();
+            if (name.trim()) {
+                onCreate(buildCustomTableStyle(name.trim(), { header, firstBand, secondBand }));
+            }
+        } },
+        React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("label", { className: "font-system text-xs w-24", htmlFor: "rnc-new-table-style-name" }, "Name"),
+            React.createElement(Input, { id: "rnc-new-table-style-name", value: name, onChange: (event) => setName(event.target.value), required: true }),
+            React.createElement(TableSkeleton, { rowProperties: preview.bandedRange.rowProperties, theme: theme })),
+        rows.map(([label, value, setValue]) => (React.createElement("div", { className: "flex items-center gap-2", key: label },
+            React.createElement("span", { className: "font-system text-xs w-24" }, label),
+            React.createElement(ColorPicker, { colors: NEW_STYLE_COLORS, value: value, onChange: setValue, size: 14, className: "flex-wrap", direction: "horizontal" })))),
+        React.createElement("div", { className: "flex gap-1" },
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs", disabled: !name.trim() }, "Create"),
+            React.createElement(Button, { size: "xs", type: "button", onClick: onCancel }, "Cancel"))));
+};
 /**
  * Table skeleton
  * @param param0

package/dist/esm/config.d.ts

@@ -75,6 +75,8 @@ export declare const CALCULATED_ICON_HEIGHT = 16;
 export declare const FITLER_ICON_PATH = "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z";
 export declare const FUNNEL_ICON_PATH = "M19 6h-14c-1.1 0-1.4.6-.6 1.4l4.2 4.2c.8.8 1.4 2.3 1.4 3.4v5l4-2v-3.5c0-.8.6-2.1 1.4-2.9l4.2-4.2c.8-.8.5-1.4-.6-1.4z";
 export declare const FILTER_ICON_WIDTH = 15;
+export declare const SORT_ASCENDING_ICON_PATH = "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z";
+export declare const SORT_DESCENDING_ICON_PATH = "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z";
 export declare const CHECKBOX_ICON_PATH = "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z";
 export declare const CHECKBOX_CHECKED_ICON_PATH = "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z";
 export declare const CHECKBOX_ICON_COLOR = "#808080";