@rowsncolumns/spreadsheet 10.3.0 → 10.4.0

package/dist/esm/components/toolbar/sparkline-actions.js

@@ -0,0 +1,238 @@
+import { CheckIcon, ChevronRightIcon, MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { ColorPicker, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, Stack, } from "@rowsncolumns/ui";
+import { iterateCellsInRange } from "@rowsncolumns/utils";
+import React, { useCallback, useMemo, useRef } from "react";
+import { getUserSelections } from "../../api/selections";
+import { useFocusSheet } from "../../atoms";
+import { useOpenSparklineDialog } from "../../atoms/sparkline-dialog.atom";
+import { STANDARD_COLORS } from "../../themes";
+export const SPARKLINE_TYPES = [
+    { value: "line", label: "Line" },
+    { value: "column", label: "Column" },
+    { value: "winloss", label: "Win/Loss" },
+];
+/** Excel's Show group: each point toggle and the colour option it highlights with. */
+const POINT_TOGGLES = [
+    { key: "high", colorKey: "colorHigh", label: "High Point" },
+    { key: "low", colorKey: "colorLow", label: "Low Point" },
+    { key: "negative", colorKey: "colorNegative", label: "Negative Points" },
+    { key: "first", colorKey: "colorFirst", label: "First Point" },
+    { key: "last", colorKey: "colorLast", label: "Last Point" },
+    { key: "markers", colorKey: "colorMarkers", label: "Markers" },
+];
+const EMPTY_CELLS = [
+    { value: undefined, label: "Gaps" },
+    { value: "zero", label: "Zero" },
+    { value: "span", label: "Connect data points with line" },
+];
+const AXIS_TYPES = [
+    { value: "individual", label: "Automatic for Each Sparkline" },
+    { value: "group", label: "Same for All Sparklines" },
+];
+const SparklineIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+    React.createElement("polyline", { points: "1,12 4,7 7,9 10,3 13,8 15,5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+const Check = () => (React.createElement(DropdownMenuItemIndicator, null,
+    React.createElement(CheckIcon, null)));
+/**
+ * Excel's Sparklines ribbon: Insert → Sparklines (Line / Column / Win-Loss → the Create
+ * Sparklines dialog) and, when the active cell is in a sparkline group, the Sparkline Design tab —
+ * Edit Data & Location, Type, Show (points + markers), Sparkline / marker colours, Axis (show
+ * axis, right-to-left, hidden data, empty cells, vertical min/max) and Group / Clear.
+ */
+export const SparklineActions = ({ sheetId, activeCell, selections, getSparklineGroup, onUpdateSparklineGroup, onDeleteSparklineGroup, onClearSparklines, onGroupSparklines, readonly, }) => {
+    const focusSheet = useFocusSheet();
+    const openDialog = useOpenSparklineDialog();
+    const shouldFocusSheetRef = useRef(true);
+    const group = useMemo(() => getSparklineGroup?.(sheetId, activeCell), [getSparklineGroup, sheetId, activeCell]);
+    const selectedCells = useMemo(() => {
+        const cells = [];
+        for (const selection of getUserSelections(activeCell, selections)) {
+            for (const [rowIndex, columnIndex] of iterateCellsInRange(selection.range)) {
+                cells.push({ rowIndex, columnIndex });
+            }
+        }
+        return cells;
+    }, [activeCell, selections]);
+    const update = useCallback((patch) => {
+        if (group)
+            onUpdateSparklineGroup?.(group, patch);
+    }, [group, onUpdateSparklineGroup]);
+    const setOption = useCallback((key, value) => {
+        if (!group)
+            return;
+        const options = { ...group.options };
+        if (value === undefined || value === false) {
+            delete options[key];
+        }
+        else {
+            options[key] = value;
+        }
+        update({ options });
+    }, [group, update]);
+    const colorSubmenu = (label, key) => (React.createElement(DropdownMenuSub, null,
+        React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+            label,
+            React.createElement(DropdownRightSlot, null,
+                React.createElement(ChevronRightIcon, null))),
+        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+            React.createElement("div", { className: "p-2 flex flex-col gap-2" },
+                React.createElement(ColorPicker, { colors: STANDARD_COLORS, value: group?.options[key], onChange: (color) => setOption(key, color) }),
+                React.createElement(DropdownMenuItem, { onSelect: () => setOption(key, undefined) }, "Automatic")))));
+    const axisBoundSubmenu = (label, typeKey, valueKey) => {
+        const current = group?.options[typeKey] ??
+            (group?.options[valueKey] != null ? "custom" : "individual");
+        return (React.createElement(DropdownMenuSub, null,
+            React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                label,
+                React.createElement(DropdownRightSlot, null,
+                    React.createElement(ChevronRightIcon, null))),
+            React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                AXIS_TYPES.map((entry) => (React.createElement(DropdownMenuCheckboxItem, { key: entry.value, checked: current === entry.value, onSelect: () => {
+                        if (!group)
+                            return;
+                        const options = { ...group.options };
+                        delete options[valueKey];
+                        if (entry.value === "individual")
+                            delete options[typeKey];
+                        else
+                            options[typeKey] = entry.value;
+                        update({ options });
+                    } },
+                    React.createElement(Check, null),
+                    entry.label))),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { onSelect: (event) => event.preventDefault(), className: "flex items-center gap-2" },
+                    current === "custom" ? React.createElement(Check, null) : null,
+                    React.createElement("span", null, "Custom Value"),
+                    React.createElement("input", { type: "number", "aria-label": `${label} custom value`, className: "w-[70px] text-xs border border-rnc-border rounded px-1 bg-transparent", defaultValue: group?.options[valueKey] ?? "", onKeyDown: (event) => {
+                            event.stopPropagation();
+                            if (event.key !== "Enter" || !group)
+                                return;
+                            const value = Number(event.target.value);
+                            if (!Number.isFinite(value))
+                                return;
+                            update({
+                                options: { ...group.options, [typeKey]: "custom", [valueKey]: value },
+                            });
+                        } })))));
+    };
+    const hasGroup = !!group;
+    const sparklineCellsSelected = hasGroup &&
+        selectedCells.filter((cell) => getSparklineGroup?.(sheetId, cell)).length > 1;
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(Stack, { className: "shrink-0" },
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(IconButton, { size: "lg", tooltip: hasGroup ? "Sparkline Design" : "Insert sparklines", className: "gap-1", disabled: readonly },
+                    React.createElement(SparklineIcon, null),
+                    React.createElement("span", { className: "text-xs" }, "Sparklines"),
+                    React.createElement(MdOutlineArrowDropDown, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => {
+                        event.preventDefault();
+                        if (shouldFocusSheetRef.current)
+                            focusSheet?.();
+                        shouldFocusSheetRef.current = true;
+                    } },
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                            "Insert",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, SPARKLINE_TYPES.map((entry) => (React.createElement(DropdownMenuItem, { key: entry.value, onSelect: () => {
+                                shouldFocusSheetRef.current = false;
+                                openDialog({
+                                    mode: "create",
+                                    sheetId,
+                                    type: entry.value,
+                                    activeCell,
+                                    selections,
+                                });
+                            } }, entry.label))))),
+                    React.createElement(DropdownMenuSeparator, null),
+                    React.createElement(DropdownMenuItem, { disabled: !hasGroup || readonly, onSelect: () => {
+                            if (!group)
+                                return;
+                            shouldFocusSheetRef.current = false;
+                            openDialog({ mode: "edit", group });
+                        } }, "Edit Group Location & Data\u2026"),
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Type",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, SPARKLINE_TYPES.map((entry) => (React.createElement(DropdownMenuCheckboxItem, { key: entry.value, checked: group?.type === entry.value, onSelect: () => update({ type: entry.value }) },
+                            React.createElement(Check, null),
+                            entry.label))))),
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Show",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, POINT_TOGGLES.map((entry) => (React.createElement(DropdownMenuCheckboxItem, { key: entry.key, checked: !!group?.options[entry.key], onSelect: () => setOption(entry.key, !group?.options[entry.key]) },
+                            React.createElement(Check, null),
+                            entry.label))))),
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Style",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            colorSubmenu("Sparkline Color", "color"),
+                            React.createElement(DropdownMenuSub, null,
+                                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                                    "Marker Color",
+                                    React.createElement(DropdownRightSlot, null,
+                                        React.createElement(ChevronRightIcon, null))),
+                                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, POINT_TOGGLES.map((entry) => colorSubmenu(entry.label, entry.colorKey)))),
+                            React.createElement(DropdownMenuSub, null,
+                                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                                    "Weight",
+                                    React.createElement(DropdownRightSlot, null,
+                                        React.createElement(ChevronRightIcon, null))),
+                                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, [0.25, 0.5, 0.75, 1, 1.5, 2.25, 3, 4.5, 6].map((weight) => (React.createElement(DropdownMenuCheckboxItem, { key: weight, checked: (group?.options.lineweight ?? 1) === weight, onSelect: () => setOption("lineweight", weight === 1 ? undefined : weight) },
+                                    React.createElement(Check, null),
+                                    weight,
+                                    " pt"))))))),
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Axis",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            React.createElement(DropdownMenuCheckboxItem, { checked: !!group?.options.axis, onSelect: () => setOption("axis", !group?.options.axis) },
+                                React.createElement(Check, null),
+                                "Show Axis"),
+                            React.createElement(DropdownMenuCheckboxItem, { checked: !!group?.options.rtl, onSelect: () => setOption("rtl", !group?.options.rtl) },
+                                React.createElement(Check, null),
+                                "Plot Data Right-to-Left"),
+                            React.createElement(DropdownMenuCheckboxItem, { checked: !!group?.options.displayhidden, onSelect: () => setOption("displayhidden", !group?.options.displayhidden) },
+                                React.createElement(Check, null),
+                                "Show Data in Hidden Rows and Columns"),
+                            React.createElement(DropdownMenuSeparator, null),
+                            React.createElement(DropdownMenuSub, null,
+                                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                                    "Show Empty Cells As",
+                                    React.createElement(DropdownRightSlot, null,
+                                        React.createElement(ChevronRightIcon, null))),
+                                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, EMPTY_CELLS.map((entry) => (React.createElement(DropdownMenuCheckboxItem, { key: entry.label, checked: entry.value === undefined
+                                        ? group?.options.emptycells === undefined ||
+                                            group?.options.emptycells === "gap"
+                                        : group?.options.emptycells === entry.value, onSelect: () => setOption("emptycells", entry.value) },
+                                    React.createElement(Check, null),
+                                    entry.label))))),
+                            axisBoundSubmenu("Vertical Axis Minimum", "minaxistype", "min"),
+                            axisBoundSubmenu("Vertical Axis Maximum", "maxaxistype", "max"))),
+                    React.createElement(DropdownMenuSeparator, null),
+                    React.createElement(DropdownMenuItem, { disabled: !sparklineCellsSelected || readonly, onSelect: () => onGroupSparklines?.(sheetId, activeCell, selectedCells) }, "Group"),
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Clear",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            React.createElement(DropdownMenuItem, { onSelect: () => onClearSparklines?.(sheetId, selectedCells) }, "Clear Selected Sparklines"),
+                            React.createElement(DropdownMenuItem, { onSelect: () => {
+                                    if (group)
+                                        onDeleteSparklineGroup?.(group);
+                                } }, "Clear Selected Sparkline Groups"))))))));
+};

package/dist/esm/components/toolbar/table-actions.d.ts

@@ -9,7 +9,15 @@ type TableActionsProps = {
     activeCell: CellInterface;
     onRequestEditTable?(table: TableView): void;
     onCreateTable?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[], tableProperties?: Partial<TableView>): void;
+    /** Opens the Create Table dialog; when absent, "Insert table" calls `onCreateTable` directly. */
+    onRequestCreateTable?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    /** "Convert to range" — same path as the context menu's item. */
+    onRemoveTable?(table: TableView): void;
+    /** "Resize table" — opens Excel's Resize Table dialog for the active table. */
+    onRequestResizeTable?(table: TableView): void;
+    /** "Insert slicer" — opens Excel's Insert Slicers dialog for the active table. */
+    onRequestInsertSlicer?(table: TableView): void;
 };
-export declare const TableActions: ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, }: TableActionsProps) => React.JSX.Element;
+export declare const TableActions: ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, onRequestCreateTable, onRemoveTable, onRequestResizeTable, onRequestInsertSlicer, }: TableActionsProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=table-actions.d.ts.map

package/dist/esm/components/toolbar/table-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-actions.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAYvE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,kBAAkB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5C,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,eAAe,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GACnC,IAAI,CAAC;CACT,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,iFAO1B,iBAAiB,sBA6DnB,CAAC"}
+{"version":3,"file":"table-actions.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAYvE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,kBAAkB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5C,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,eAAe,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GACnC,IAAI,CAAC;IACR,iGAAiG;IACjG,oBAAoB,CAAC,CACnB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,iEAAiE;IACjE,aAAa,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACvC,+EAA+E;IAC/E,oBAAoB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9C,kFAAkF;IAClF,qBAAqB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,mKAW1B,iBAAiB,sBAmFnB,CAAC"}

package/dist/esm/components/toolbar/table-actions.js

@@ -3,18 +3,16 @@ import { MdOutlineArrowDropDown, TableIcon } from "@rowsncolumns/icons";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, Stack, } from "@rowsncolumns/ui";
 import React, { useMemo } from "react";
 import { useFocusSheet } from "../../atoms";
-export const TableActions = ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, }) => {
+export const TableActions = ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, onRequestCreateTable, onRemoveTable, onRequestResizeTable, onRequestInsertSlicer, }) => {
     const focusSheet = useFocusSheet();
     const table = useMemo(() => tables?.find((table) => table.sheetId === sheetId &&
         isCellWithinBounds(activeCell, table.range)), [tables, sheetId, activeCell]);
     const disableMenu = !table;
-    const onConvertToRange = () => {
-        // Calling this will remove the table if present
-        onCreateTable?.(sheetId, activeCell, selections);
-    };
     return (React.createElement(DropdownMenu, { modal: false },
         React.createElement(Stack, { className: "shrink-0" },
-            React.createElement(IconButton, { size: "lg", tooltip: "Convert selection to a table", className: "gap-1", onClick: () => onCreateTable?.(sheetId, activeCell, selections) },
+            React.createElement(IconButton, { size: "lg", tooltip: "Convert selection to a table", className: "gap-1", onClick: () => onRequestCreateTable
+                    ? onRequestCreateTable(sheetId, activeCell, selections)
+                    : onCreateTable?.(sheetId, activeCell, selections) },
                 React.createElement(TableIcon, null),
                 React.createElement("span", { className: "text-xs" }, "Insert table")),
             React.createElement(DropdownMenuTrigger, { disabled: disableMenu, asChild: true },
@@ -28,9 +26,19 @@ export const TableActions = ({ tables, sheetId, activeCell, selections, onReques
                                 focusSheet?.();
                             }
                         } }, "Edit table"),
+                    onRequestResizeTable ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                            if (table) {
+                                onRequestResizeTable(table);
+                            }
+                        } }, "Resize table")) : null,
+                    onRequestInsertSlicer ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                            if (table) {
+                                onRequestInsertSlicer(table);
+                            }
+                        } }, "Insert slicer")) : null,
                     React.createElement(DropdownMenuItem, { onClick: () => {
                             if (table) {
-                                onConvertToRange();
+                                onRemoveTable?.(table);
                                 focusSheet?.();
                             }
                         } }, "Convert to range"))))));

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

@@ -2,7 +2,7 @@ import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
 import { findMatchingBandProperty } from "@rowsncolumns/utils";
 import React from "react";
 export { findMatchingBandProperty };
-import type { BandedDefinition, TableTheme, TableView } from "../../types";
+import type { BandedDefinition, CustomTableStyle, TableStylePreview, TableTheme, TableView } from "../../types";
 import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
 export type TableStyleSelectorProps = {
     tables?: TableView[];
@@ -12,7 +12,39 @@ export type TableStyleSelectorProps = {
     activeCell: CellInterface;
     onUpdateTable?(sheetId: number, tableId: TableView["id"], updatedTable: Partial<TableView>): void;
     onCreateTable: CanvasGridProps["onCreateTable"];
+    /** Format as Table on a plain range opens the Create Table dialog with the picked style. */
+    onRequestCreateTable?: CanvasGridProps["onRequestCreateTable"];
+    /**
+     * Live preview: the hovered swatch's style is painted over the active table while the pointer
+     * rests on it (`null` reverts). UI-only — nothing is written to the table or its history.
+     */
+    onPreviewTableStyle?(preview: TableStylePreview | null): void;
+    /** Styles created with "New Table Style…", offered in the gallery's Custom section. */
+    customTableStyles?: CustomTableStyle[];
+    /**
+     * Called with the style "New Table Style…" creates so the host can keep it with the workbook;
+     * without it the selector keeps the styles it created for the session.
+     */
+    onCreateCustomTableStyle?(style: CustomTableStyle): void;
 };
+/** Excel's Table Style Options (Table Design tab), in ribbon order. */
+declare const STYLE_OPTIONS: Array<{
+    key: "headerRow" | "totalRow" | "showRowStripes" | "showColumnStripes" | "showFirstColumn" | "showLastColumn" | "filterButton";
+    label: string;
+    defaultValue: boolean;
+}>;
+/**
+ * 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 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,
@@ -20,6 +52,10 @@ type TableStyleList = [
     bandDefinition: BandedDefinition | undefined,
     style?: React.CSSProperties
 ];
+/**
+ * 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 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, }: TableStyleSelectorProps) => React.JSX.Element>;
+export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
 //# sourceMappingURL=table-style-selector.d.ts.map

package/dist/esm/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;AAavE,OAAO,EAEL,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAMpC,OAAO,KAAK,EACV,gBAAgB,EAGhB,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;CACjD,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;AAIF,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAiYzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gHAS1B,uBAAuB,uBAsI3B,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;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"}