@rowsncolumns/spreadsheet 10.2.74 → 10.2.76

package/dist/cjs/components/subtotal-dialog/index.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubtotalDialogHost = exports.SubtotalDialog = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var subtotal_dialog_atom_1 = require("../../atoms/subtotal-dialog.atom");
+var types_1 = require("../../types");
+/**
+ * Excel's "Use function" labels. Excel's "Count" is COUNTA (non-empty cells,
+ * `SUBTOTAL(3,…)`) and "Count Numbers" is COUNT (`SUBTOTAL(2,…)`).
+ */
+var FUNCTION_LABELS = {
+    SUM: "Sum",
+    COUNTA: "Count",
+    AVERAGE: "Average",
+    MAX: "Max",
+    MIN: "Min",
+    PRODUCT: "Product",
+    COUNT: "Count Numbers",
+    STDEV: "StdDev",
+    STDEVP: "StdDevp",
+    VAR: "Var",
+    VARP: "Varp",
+};
+/**
+ * Excel's Subtotal dialog: "At each change in" (group column), "Use
+ * function", "Add subtotal to" (aggregate columns), "Replace current
+ * subtotals". Summary rows are always placed below the data.
+ */
+exports.SubtotalDialog = (0, react_1.memo)(function (_a) {
+    var _b;
+    var open = _a.open, onOpenChange = _a.onOpenChange, columns = _a.columns, _c = _a.initialHasHeader, initialHasHeader = _c === void 0 ? true : _c, onApply = _a.onApply;
+    var _d = tslib_1.__read((0, react_1.useState)(initialHasHeader), 2), hasHeader = _d[0], setHasHeader = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)((_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columnIndex), 2), groupBy = _e[0], setGroupBy = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)("SUM"), 2), fn = _f[0], setFn = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)(function () { return new Set(columns.length ? [columns[columns.length - 1].columnIndex] : []); }), 2), aggregates = _g[0], setAggregates = _g[1];
+    var _h = tslib_1.__read((0, react_1.useState)(true), 2), replaceCurrent = _h[0], setReplaceCurrent = _h[1];
+    // Re-seed when reopened for a different range.
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (open) {
+            setHasHeader(initialHasHeader);
+            setGroupBy((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.columnIndex);
+            setFn("SUM");
+            setAggregates(new Set(columns.length ? [columns[columns.length - 1].columnIndex] : []));
+            setReplaceCurrent(true);
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    var labelOf = (0, react_1.useCallback)(function (column) {
+        return hasHeader && column.header ? column.header : column.label;
+    }, [hasHeader]);
+    var toggleAggregate = (0, react_1.useCallback)(function (columnIndex) {
+        setAggregates(function (prev) {
+            var next = new Set(prev);
+            if (next.has(columnIndex))
+                next.delete(columnIndex);
+            else
+                next.add(columnIndex);
+            return next;
+        });
+    }, []);
+    var canApply = groupBy !== undefined && aggregates.size > 0;
+    var orderedAggregates = (0, react_1.useMemo)(function () { return columns.map(function (c) { return c.columnIndex; }).filter(function (c) { return aggregates.has(c); }); }, [columns, aggregates]);
+    var commit = (0, react_1.useCallback)(function () {
+        if (groupBy === undefined)
+            return;
+        onApply({
+            groupByColumnIndex: groupBy,
+            aggregateColumnIndices: orderedAggregates,
+            fn: fn,
+            hasHeader: hasHeader,
+            replaceCurrent: replaceCurrent,
+        });
+        onOpenChange(false);
+    }, [groupBy, orderedAggregates, fn, hasHeader, replaceCurrent, onApply, onOpenChange]);
+    return (react_1.default.createElement(ui_1.Dialog, { open: open, onOpenChange: onOpenChange },
+        react_1.default.createElement(ui_1.DialogContent, { className: "w-[420px] max-w-[92vw] pointer-events-auto" },
+            react_1.default.createElement(ui_1.DialogTitle, null, "Subtotal"),
+            react_1.default.createElement(ui_1.DialogDescription, null, "Insert a total row after every change in a column, plus a grand total, and outline the groups."),
+            react_1.default.createElement(ui_1.DialogCloseButton, { onClick: function () { return onOpenChange(false); } },
+                react_1.default.createElement(icons_1.Cross1Icon, null)),
+            react_1.default.createElement(ui_1.DialogBody, { className: "flex flex-col gap-3 font-system text-sm" },
+                react_1.default.createElement("label", { className: "flex items-center gap-1" },
+                    react_1.default.createElement("input", { type: "checkbox", name: "hasHeader", checked: hasHeader, onChange: function (e) { return setHasHeader(e.target.checked); } }),
+                    "My data has headers"),
+                react_1.default.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "At each change in:",
+                    react_1.default.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", "aria-label": "At each change in", value: groupBy !== null && groupBy !== void 0 ? groupBy : "", onChange: function (e) { return setGroupBy(Number(e.target.value)); } }, columns.map(function (column) { return (react_1.default.createElement("option", { key: column.columnIndex, value: column.columnIndex }, labelOf(column))); }))),
+                react_1.default.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                    "Use function:",
+                    react_1.default.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", "aria-label": "Use function", value: fn, onChange: function (e) { return setFn(e.target.value); } }, types_1.SUBTOTAL_FUNCTIONS.map(function (name) { return (react_1.default.createElement("option", { key: name, value: name }, FUNCTION_LABELS[name])); }))),
+                react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+                    react_1.default.createElement("span", { className: "text-xs font-medium" }, "Add subtotal to:"),
+                    react_1.default.createElement("div", { className: "flex flex-col gap-1 max-h-[180px] overflow-y-auto border border-rnc-border rounded p-2", role: "group", "aria-label": "Add subtotal to" }, columns.map(function (column) { return (react_1.default.createElement("label", { key: column.columnIndex, className: "flex items-center gap-1" },
+                        react_1.default.createElement("input", { type: "checkbox", name: "subtotal-column-".concat(column.columnIndex), checked: aggregates.has(column.columnIndex), onChange: function () { return toggleAggregate(column.columnIndex); } }),
+                        react_1.default.createElement("span", { className: "truncate", title: labelOf(column) }, labelOf(column)))); }))),
+                react_1.default.createElement("label", { className: "flex items-center gap-1" },
+                    react_1.default.createElement("input", { type: "checkbox", name: "replaceCurrent", checked: replaceCurrent, onChange: function (e) { return setReplaceCurrent(e.target.checked); } }),
+                    "Replace current subtotals"),
+                react_1.default.createElement(ui_1.Separator, null),
+                react_1.default.createElement("div", { className: "flex justify-end gap-2" },
+                    react_1.default.createElement(ui_1.Button, { variant: "outline", size: "sm", type: "button", onClick: function () { return onOpenChange(false); } }, "Cancel"),
+                    react_1.default.createElement(ui_1.Button, { size: "sm", type: "button", onClick: commit, disabled: !canApply }, "OK"))))));
+});
+exports.SubtotalDialog.displayName = "SubtotalDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link SubtotalDialog}. Mount
+ * once in the host; the context menu opens it via `useOpenSubtotalDialog`
+ * and only offers the item while a host is mounted.
+ */
+var SubtotalDialogHost = function () {
+    var _a;
+    (0, subtotal_dialog_atom_1.useRegisterSubtotalDialogHost)();
+    var _b = tslib_1.__read((0, subtotal_dialog_atom_1.useSubtotalDialogState)(), 2), request = _b[0], setRequest = _b[1];
+    var close = (0, react_1.useCallback)(function () { return setRequest(null); }, [setRequest]);
+    return (react_1.default.createElement(exports.SubtotalDialog, { open: request != null, onOpenChange: function (open) {
+            if (!open)
+                close();
+        }, columns: (_a = request === null || request === void 0 ? void 0 : request.columns) !== null && _a !== void 0 ? _a : [], initialHasHeader: request === null || request === void 0 ? void 0 : request.hasHeader, onApply: function (choices) { return request === null || request === void 0 ? void 0 : request.onApply(choices); } }));
+};
+exports.SubtotalDialogHost = SubtotalDialogHost;
+exports.SubtotalDialogHost.displayName = "SubtotalDialogHost";

package/dist/cjs/components/text-to-columns-dialog/index.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { SplitTextOptions } from "../../types";
+export type TextToColumnsMode = "delimited" | "fixed";
+export type TextToColumnsDialogProps = {
+    /** Controls visibility. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** Texts of the first cells of the selected column — the preview / ruler. */
+    preview: string[];
+    /** Initial wizard step-1 choice (default Delimited). */
+    initialMode?: TextToColumnsMode;
+    /**
+     * Emits the chosen delimiter (Delimited) or column breaks (Fixed width).
+     * The host routes it to `onSplitTextToColumns`.
+     */
+    onApply(options: {
+        delimiter: string;
+    } & SplitTextOptions): void;
+};
+/**
+ * Excel's Convert Text to Columns wizard, condensed: choose Delimited (pick
+ * a delimiter or type another) or Fixed width (click the ruler to add or
+ * remove break lines, or type the positions), with a live preview of the
+ * first rows.
+ */
+export declare const TextToColumnsDialog: React.MemoExoticComponent<({ open, onOpenChange, preview, initialMode, onApply, }: TextToColumnsDialogProps) => React.JSX.Element>;
+/**
+ * Host-mounted, atom-driven wrapper around {@link TextToColumnsDialog}.
+ * Mount once in the host (alongside the other editor dialogs); the context
+ * menu opens it via `useOpenTextToColumnsDialog`. Without a host the menu
+ * keeps its one-click delimiter items only.
+ */
+export declare const TextToColumnsDialogHost: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/text-to-columns-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/text-to-columns-dialog/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,wBAAwB,GAAG;IACrC,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,gBAAgB,GAAG,IAAI,CAAC;CAClE,CAAC;AAiCF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,qFAO3B,wBAAwB,uBAgO5B,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;;;CAenC,CAAC"}

package/dist/cjs/components/text-to-columns-dialog/index.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextToColumnsDialogHost = exports.TextToColumnsDialog = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var text_to_columns_dialog_atom_1 = require("../../atoms/text-to-columns-dialog.atom");
+var DELIMITERS = [
+    { label: "Comma", value: "," },
+    { label: "Semicolon", value: ";" },
+    { label: "Tab", value: "\t" },
+    { label: "Space", value: " " },
+    { label: "Period", value: "." },
+    { label: "Pipe", value: "|" },
+];
+/** Cuts `text` at ascending character positions (the dialog's own preview). */
+var cutAt = function (text, breaks) {
+    var e_1, _a;
+    var parts = [];
+    var start = 0;
+    try {
+        for (var breaks_1 = tslib_1.__values(breaks), breaks_1_1 = breaks_1.next(); !breaks_1_1.done; breaks_1_1 = breaks_1.next()) {
+            var position = breaks_1_1.value;
+            parts.push(text.slice(start, position));
+            start = position;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (breaks_1_1 && !breaks_1_1.done && (_a = breaks_1.return)) _a.call(breaks_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    parts.push(text.slice(start));
+    return parts;
+};
+var parseBreaks = function (text) {
+    return tslib_1.__spreadArray([], tslib_1.__read(new Set(text
+        .split(/[\s,;]+/)
+        .map(function (part) { return Number.parseInt(part, 10); })
+        .filter(function (n) { return Number.isInteger(n) && n > 0; }))), false).sort(function (a, b) { return a - b; });
+};
+/**
+ * Excel's Convert Text to Columns wizard, condensed: choose Delimited (pick
+ * a delimiter or type another) or Fixed width (click the ruler to add or
+ * remove break lines, or type the positions), with a live preview of the
+ * first rows.
+ */
+exports.TextToColumnsDialog = (0, react_1.memo)(function (_a) {
+    var open = _a.open, onOpenChange = _a.onOpenChange, preview = _a.preview, _b = _a.initialMode, initialMode = _b === void 0 ? "delimited" : _b, onApply = _a.onApply;
+    var _c = tslib_1.__read((0, react_1.useState)(initialMode), 2), mode = _c[0], setMode = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(","), 2), delimiter = _d[0], setDelimiter = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(""), 2), customDelimiter = _e[0], setCustomDelimiter = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)([]), 2), breaks = _f[0], setBreaks = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)(""), 2), breaksText = _g[0], setBreaksText = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            setMode(initialMode);
+            setDelimiter(",");
+            setCustomDelimiter("");
+            setBreaks([]);
+            setBreaksText("");
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    var sample = (0, react_1.useMemo)(function () { return preview.slice(0, 6); }, [preview]);
+    var rulerLength = (0, react_1.useMemo)(function () { return Math.min(120, Math.max.apply(Math, tslib_1.__spreadArray([10], tslib_1.__read(sample.map(function (text) { return text.length; })), false))); }, [sample]);
+    var toggleBreak = (0, react_1.useCallback)(function (position) {
+        setBreaks(function (prev) {
+            var next = prev.includes(position)
+                ? prev.filter(function (p) { return p !== position; })
+                : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), [position], false).sort(function (a, b) { return a - b; });
+            setBreaksText(next.join(", "));
+            return next;
+        });
+    }, []);
+    var effectiveDelimiter = delimiter === "custom" ? customDelimiter : delimiter;
+    var canApply = mode === "delimited" ? effectiveDelimiter.length > 0 : breaks.length > 0;
+    var commit = (0, react_1.useCallback)(function () {
+        if (mode === "fixed") {
+            onApply({ delimiter: ",", columnBreaks: breaks });
+        }
+        else {
+            onApply({ delimiter: effectiveDelimiter });
+        }
+        onOpenChange(false);
+    }, [mode, breaks, effectiveDelimiter, onApply, onOpenChange]);
+    return (react_1.default.createElement(ui_1.Dialog, { open: open, onOpenChange: onOpenChange },
+        react_1.default.createElement(ui_1.DialogContent, { className: "w-[520px] max-w-[92vw] pointer-events-auto" },
+            react_1.default.createElement(ui_1.DialogTitle, null, "Text to columns"),
+            react_1.default.createElement(ui_1.DialogDescription, null, "Split the selected column into several columns."),
+            react_1.default.createElement(ui_1.DialogCloseButton, { onClick: function () { return onOpenChange(false); } },
+                react_1.default.createElement(icons_1.Cross1Icon, null)),
+            react_1.default.createElement(ui_1.DialogBody, { className: "flex flex-col gap-3 font-system text-sm" },
+                react_1.default.createElement("div", { className: "flex gap-4", role: "radiogroup", "aria-label": "Original data type" },
+                    react_1.default.createElement("label", { className: "flex items-center gap-1" },
+                        react_1.default.createElement("input", { type: "radio", name: "text-to-columns-mode", value: "delimited", checked: mode === "delimited", onChange: function () { return setMode("delimited"); } }),
+                        "Delimited"),
+                    react_1.default.createElement("label", { className: "flex items-center gap-1" },
+                        react_1.default.createElement("input", { type: "radio", name: "text-to-columns-mode", value: "fixed", checked: mode === "fixed", onChange: function () { return setMode("fixed"); } }),
+                        "Fixed width")),
+                mode === "delimited" ? (react_1.default.createElement("div", { className: "flex flex-col gap-2" },
+                    react_1.default.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Delimiter",
+                        react_1.default.createElement("select", { className: "h-8 rounded border border-rnc-border bg-transparent px-2 text-sm", value: delimiter, onChange: function (e) { return setDelimiter(e.target.value); }, "aria-label": "Delimiter" },
+                            DELIMITERS.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); }),
+                            react_1.default.createElement("option", { value: "custom" }, "Other\u2026"))),
+                    delimiter === "custom" ? (react_1.default.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Other delimiter",
+                        react_1.default.createElement(ui_1.Input, { value: customDelimiter, maxLength: 5, "aria-label": "Other delimiter", onChange: function (e) { return setCustomDelimiter(e.target.value); } }))) : null)) : (react_1.default.createElement("div", { className: "flex flex-col gap-2" },
+                    react_1.default.createElement("div", { className: "text-xs text-rnc-foreground/70" }, "Click the ruler to create a break line; click it again to remove it."),
+                    react_1.default.createElement("div", { className: "overflow-x-auto rounded border border-rnc-border p-2 font-mono text-xs leading-5", "data-testid": "fixed-width-ruler" },
+                        react_1.default.createElement("div", { className: "flex select-none" }, Array.from({ length: rulerLength }, function (_, index) {
+                            var position = index + 1;
+                            var active = breaks.includes(position);
+                            return (react_1.default.createElement("button", { key: position, type: "button", "aria-label": "Break after character ".concat(position), "aria-pressed": active, className: "w-[1ch] shrink-0 border-r ".concat(active ? "border-rnc-primary bg-rnc-primary/20" : "border-transparent", " hover:bg-rnc-accent"), onClick: function () { return toggleBreak(position); } }, position % 10 === 0 ? String(position / 10) : "·"));
+                        })),
+                        sample.map(function (text, rowIndex) { return (react_1.default.createElement("div", { key: rowIndex, className: "flex whitespace-pre" }, Array.from({ length: rulerLength }, function (_, index) {
+                            var _a;
+                            var position = index + 1;
+                            var active = breaks.includes(position);
+                            return (react_1.default.createElement("span", { key: position, className: "w-[1ch] shrink-0 border-r ".concat(active ? "border-rnc-primary" : "border-transparent") }, (_a = text[index]) !== null && _a !== void 0 ? _a : " "));
+                        }))); })),
+                    react_1.default.createElement("label", { className: "flex flex-col gap-1 text-xs font-medium" },
+                        "Break positions (characters before each break)",
+                        react_1.default.createElement(ui_1.Input, { value: breaksText, placeholder: "e.g. 4, 10", "aria-label": "Break positions", onChange: function (e) {
+                                setBreaksText(e.target.value);
+                                setBreaks(parseBreaks(e.target.value));
+                            } })))),
+                react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+                    react_1.default.createElement("span", { className: "text-xs font-medium" }, "Data preview"),
+                    react_1.default.createElement("div", { className: "max-h-[120px] overflow-auto rounded border border-rnc-border p-2 font-mono text-xs", "data-testid": "text-to-columns-preview" }, sample.map(function (text, rowIndex) {
+                        var parts = mode === "fixed"
+                            ? cutAt(text, breaks)
+                            : effectiveDelimiter
+                                ? text.split(effectiveDelimiter)
+                                : [text];
+                        return (react_1.default.createElement("div", { key: rowIndex, className: "flex gap-1 whitespace-pre" }, parts.map(function (part, partIndex) { return (react_1.default.createElement("span", { key: partIndex, className: "border-r border-rnc-border pr-1 last:border-r-0" }, part.trim() || " ")); })));
+                    }))),
+                react_1.default.createElement(ui_1.Separator, null),
+                react_1.default.createElement("div", { className: "flex justify-end gap-2" },
+                    react_1.default.createElement(ui_1.Button, { variant: "outline", size: "sm", type: "button", onClick: function () { return onOpenChange(false); } }, "Cancel"),
+                    react_1.default.createElement(ui_1.Button, { size: "sm", type: "button", onClick: commit, disabled: !canApply }, "Finish"))))));
+});
+exports.TextToColumnsDialog.displayName = "TextToColumnsDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link TextToColumnsDialog}.
+ * Mount once in the host (alongside the other editor dialogs); the context
+ * menu opens it via `useOpenTextToColumnsDialog`. Without a host the menu
+ * keeps its one-click delimiter items only.
+ */
+var TextToColumnsDialogHost = function () {
+    var _a;
+    (0, text_to_columns_dialog_atom_1.useRegisterTextToColumnsDialogHost)();
+    var _b = tslib_1.__read((0, text_to_columns_dialog_atom_1.useTextToColumnsDialogState)(), 2), request = _b[0], setRequest = _b[1];
+    var close = (0, react_1.useCallback)(function () { return setRequest(null); }, [setRequest]);
+    return (react_1.default.createElement(exports.TextToColumnsDialog, { open: request != null, onOpenChange: function (open) {
+            if (!open)
+                close();
+        }, preview: (_a = request === null || request === void 0 ? void 0 : request.preview) !== null && _a !== void 0 ? _a : [], initialMode: "fixed", onApply: function (options) { return request === null || request === void 0 ? void 0 : request.onApply(options); } }));
+};
+exports.TextToColumnsDialogHost = TextToColumnsDialogHost;
+exports.TextToColumnsDialogHost.displayName = "TextToColumnsDialogHost";

package/dist/cjs/components/toolbar/background-color-selector.d.ts

@@ -4,16 +4,28 @@ import type { Color } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 import type { ColorSelectorProps } from "./color-selector";
 import { ColorSelector } from "./color-selector";
+import { type CellFill } from "./fill-selectors";
 type BackgroundColorSelectorProps = {
     disabled?: boolean;
     color?: Color | null;
     theme?: SpreadsheetTheme;
     onChange?(color: Color | undefined): void;
+    /**
+     * The active cell's fill (pattern / gradient fields) — enables the
+     * Pattern and Gradient tabs together with `onChangeFill`. Without
+     * `onChangeFill` the popover is the solid colour picker only.
+     */
+    fill?: CellFill | null;
+    /**
+     * Apply a pattern or gradient fill (Excel: Format Cells → Fill → Pattern /
+     * Fill Effects). Receives the full fill slice so cleared fields reset.
+     */
+    onChangeFill?(fill: CellFill): void;
     /**
      * Custom color selector component
      */
     ColorSelector?: ComponentType<ColorSelectorProps>;
 } & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
-export declare const BackgroundColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
+export declare const BackgroundColorSelector: ({ color, theme, onChange, fill, onChangeFill, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=background-color-selector.d.ts.map

package/dist/cjs/components/toolbar/background-color-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,wHAQrC,4BAA4B,sBAqC9B,CAAC"}
+{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,kBAAkB,CAAC;AAE1B,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,4IAUrC,4BAA4B,sBA+G9B,CAAC"}

package/dist/cjs/components/toolbar/background-color-selector.js

@@ -11,24 +11,70 @@ var atoms_1 = require("../../atoms");
 var config_1 = require("../../config");
 var themes_1 = require("../../themes");
 var color_selector_1 = require("./color-selector");
+var fill_selectors_1 = require("./fill-selectors");
 var BackgroundColorSelector = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "transparent" : _b, _c = _a.theme, theme = _c === void 0 ? config_1.defaultSpreadsheetTheme : _c, onChange = _a.onChange, onAddUserDefinedColor = _a.onAddUserDefinedColor, userDefinedColors = _a.userDefinedColors, disabled = _a.disabled, _d = _a.ColorSelector, ColorSelectorComponent = _d === void 0 ? color_selector_1.ColorSelector : _d;
-    var _e = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _e[0], setIsOpen = _e[1];
+    var _b, _c;
+    var _d = _a.color, color = _d === void 0 ? "transparent" : _d, _e = _a.theme, theme = _e === void 0 ? config_1.defaultSpreadsheetTheme : _e, onChange = _a.onChange, fill = _a.fill, onChangeFill = _a.onChangeFill, onAddUserDefinedColor = _a.onAddUserDefinedColor, userDefinedColors = _a.userDefinedColors, disabled = _a.disabled, _f = _a.ColorSelector, ColorSelectorComponent = _f === void 0 ? color_selector_1.ColorSelector : _f;
+    var _g = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _g[0], setIsOpen = _g[1];
     var close = function () { return setIsOpen(false); };
     var open = function () { return setIsOpen(true); };
     var colorString = (0, themes_1.getStringifiedColor)(color, theme);
     var focusSheet = (0, atoms_1.useFocusSheet)();
+    // The trigger underline previews the effective fill: gradient, then the
+    // pattern colour, then the solid colour.
+    var swatchStyle = (fill === null || fill === void 0 ? void 0 : fill.gradient)
+        ? {
+            borderBottom: "4px solid transparent",
+            borderImage: "".concat((0, fill_selectors_1.gradientToCss)(fill.gradient), " 1"),
+        }
+        : {
+            borderBottom: "4px ".concat((fill === null || fill === void 0 ? void 0 : fill.fillPattern) &&
+                fill.fillPattern !== "none" &&
+                fill.foregroundColor
+                ? (0, themes_1.getStringifiedColor)(fill.foregroundColor, theme)
+                : colorString, " solid"),
+        };
+    var solidPicker = (react_1.default.createElement(ColorSelectorComponent, { color: color, onChange: function (color) {
+            var _a, _b;
+            // A solid pick replaces a gradient (Excel keeps them exclusive) and,
+            // with "No fill", clears the pattern too.
+            if (onChangeFill && ((fill === null || fill === void 0 ? void 0 : fill.gradient) || (!color && (fill === null || fill === void 0 ? void 0 : fill.fillPattern)))) {
+                onChangeFill({
+                    backgroundColor: color,
+                    fillPattern: color ? (_a = fill === null || fill === void 0 ? void 0 : fill.fillPattern) !== null && _a !== void 0 ? _a : undefined : undefined,
+                    foregroundColor: color
+                        ? (_b = fill === null || fill === void 0 ? void 0 : fill.foregroundColor) !== null && _b !== void 0 ? _b : undefined
+                        : undefined,
+                    gradient: undefined,
+                });
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(color);
+            }
+            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+            close();
+        }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }));
+    var applyFill = function (next) {
+        onChangeFill === null || onChangeFill === void 0 ? void 0 : onChangeFill(next);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    };
     return (react_1.default.createElement(ui_1.Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
         react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
-            react_1.default.createElement(ui_2.IconButton, { className: "text-base flex-row", style: {
-                    borderBottom: "4px ".concat(colorString, " solid"),
-                }, tooltip: "Fill color", onClick: open, disabled: disabled },
+            react_1.default.createElement(ui_2.IconButton, { className: "text-base flex-row", style: swatchStyle, tooltip: "Fill color", "aria-label": "Fill color", onClick: open, disabled: disabled },
                 react_1.default.createElement(icons_1.IoMdColorFill, null))),
-        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
-            react_1.default.createElement(ColorSelectorComponent, { color: color, onChange: function (color) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
-                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
-                    close();
-                }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" }, onChangeFill ? (react_1.default.createElement(ui_2.Tabs, { defaultValue: (fill === null || fill === void 0 ? void 0 : fill.gradient)
+                ? "gradient"
+                : (fill === null || fill === void 0 ? void 0 : fill.fillPattern) && fill.fillPattern !== "none"
+                    ? "pattern"
+                    : "solid" },
+            react_1.default.createElement(ui_2.TabsList, { className: "grid-cols-3 mb-2" },
+                react_1.default.createElement(ui_2.TabsTrigger, { value: "solid" }, "Solid"),
+                react_1.default.createElement(ui_2.TabsTrigger, { value: "pattern" }, "Pattern"),
+                react_1.default.createElement(ui_2.TabsTrigger, { value: "gradient" }, "Gradient")),
+            react_1.default.createElement(ui_2.TabsContent, { value: "solid" }, solidPicker),
+            react_1.default.createElement(ui_2.TabsContent, { value: "pattern" },
+                react_1.default.createElement(fill_selectors_1.PatternFillPicker, { fill: tslib_1.__assign(tslib_1.__assign({}, fill), { backgroundColor: (_b = fill === null || fill === void 0 ? void 0 : fill.backgroundColor) !== null && _b !== void 0 ? _b : color }), theme: theme, onChangeFill: applyFill })),
+            react_1.default.createElement(ui_2.TabsContent, { value: "gradient" },
+                react_1.default.createElement(fill_selectors_1.GradientFillPicker, { fill: tslib_1.__assign(tslib_1.__assign({}, fill), { backgroundColor: (_c = fill === null || fill === void 0 ? void 0 : fill.backgroundColor) !== null && _c !== void 0 ? _c : color }), theme: theme, onChangeFill: applyFill })))) : (solidPicker))));
 };
 exports.BackgroundColorSelector = BackgroundColorSelector;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CellFormat } from "../../types";
+import type { CellFormat, NamedCellStyle } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 type WithCellFormat = (value: CellFormat) => void;
 type WithTypeValue<T extends keyof CellFormat> = (type: T, value: CellFormat[T]) => void;
@@ -8,6 +8,13 @@ export type CellStyleSelectorProps = {
     locale?: string;
     theme: SpreadsheetTheme;
     userDefinedStyles?: [string, CellFormat][];
+    /**
+     * Workbook named cell styles imported from `<cellStyles>` ("Heading 1",
+     * "Good", "Accent 1", …). Shown as a "Workbook styles" section ahead of
+     * the built-in gallery; hidden entries and the "Normal" base style are
+     * skipped, as is any entry whose xf resolved to no formatting.
+     */
+    namedCellStyles?: NamedCellStyle[] | null;
     selectedFormat?: CellFormat | null;
     onAddUserDefinedStyle?(name: string): void;
     onChangeFormatting: (...args: Parameters<WithCellFormat | WithTypeValue<keyof CellFormat>>) => void;
@@ -19,7 +26,13 @@ type StyleList = [
     format: CellFormat,
     style?: React.CSSProperties
 ];
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+export declare const getGalleryNamedCellStyles: (namedCellStyles: NamedCellStyle[] | null | undefined) => Array<NamedCellStyle & {
+    format: CellFormat;
+}>;
+/** CSS preview of a named style's format for the gallery swatch. */
+export declare const getNamedCellStylePreview: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
 export declare const getCellStyles: (theme: SpreadsheetTheme, currencySymbol?: string) => Map<string, StyleList[]>;
-export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
+export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=cell-style-selector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,aAAa,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qIASzB,sBAAsB,uBAwM1B,CAAC"}
+{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GACpC,iBAAiB,cAAc,EAAE,GAAG,IAAI,GAAG,SAAS,KACnD,KAAK,CAAC,cAAc,GAAG;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAQ7C,CAAC;AAcJ,oEAAoE;AACpE,eAAO,MAAM,wBAAwB,GACnC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAqBR,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,sJAUzB,sBAAsB,uBAsO1B,CAAC"}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CellStyleSelector = exports.getCellStyles = void 0;
+exports.CellStyleSelector = exports.getCellStyles = exports.getNamedCellStylePreview = exports.getGalleryNamedCellStyles = void 0;
 var tslib_1 = require("tslib");
 var icons_1 = require("@rowsncolumns/icons");
 var icons_2 = require("@rowsncolumns/icons");
@@ -12,6 +12,54 @@ var react_1 = tslib_1.__importStar(require("react"));
 var atoms_1 = require("../../atoms");
 var helpers_1 = require("../../helpers");
 var themes_1 = require("../../themes");
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+var getGalleryNamedCellStyles = function (namedCellStyles) {
+    return (namedCellStyles !== null && namedCellStyles !== void 0 ? namedCellStyles : []).filter(function (style) {
+        return !style.hidden &&
+            style.builtinId !== 0 &&
+            style.name !== "Normal" &&
+            !!style.format &&
+            Object.keys(style.format).length > 0;
+    });
+};
+exports.getGalleryNamedCellStyles = getGalleryNamedCellStyles;
+var previewBorder = function (border, theme) {
+    var _a;
+    return border
+        ? "".concat((_a = border.width) !== null && _a !== void 0 ? _a : 1, "px ").concat(border.style === "double" ? "double" : "solid", " ").concat((0, themes_1.getStringifiedColor)(border.color, theme))
+        : undefined;
+};
+/** CSS preview of a named style's format for the gallery swatch. */
+var getNamedCellStylePreview = function (format, theme) {
+    if (!format)
+        return {};
+    var style = {};
+    if (format.backgroundColor) {
+        style.backgroundColor = (0, themes_1.getStringifiedColor)(format.backgroundColor, theme);
+    }
+    var text = format.textFormat;
+    if (text === null || text === void 0 ? void 0 : text.color)
+        style.color = (0, themes_1.getStringifiedColor)(text.color, theme);
+    if (text === null || text === void 0 ? void 0 : text.bold)
+        style.fontWeight = "bold";
+    if (text === null || text === void 0 ? void 0 : text.italic)
+        style.fontStyle = "italic";
+    if (text === null || text === void 0 ? void 0 : text.underline)
+        style.textDecoration = "underline";
+    if (text === null || text === void 0 ? void 0 : text.fontSize)
+        style.fontSize = text.fontSize;
+    if (text === null || text === void 0 ? void 0 : text.fontFamily)
+        style.fontFamily = text.fontFamily;
+    var borders = format.borders;
+    if (borders) {
+        style.borderTop = previewBorder(borders.top, theme);
+        style.borderBottom = previewBorder(borders.bottom, theme);
+        style.borderLeft = previewBorder(borders.left, theme);
+        style.borderRight = previewBorder(borders.right, theme);
+    }
+    return style;
+};
+exports.getNamedCellStylePreview = getNamedCellStylePreview;
 var getCellStyles = function (theme, currencySymbol) {
     return new Map([
         [
@@ -389,13 +437,14 @@ var getCellStyles = function (theme, currencySymbol) {
 };
 exports.getCellStyles = getCellStyles;
 exports.CellStyleSelector = (0, react_1.memo)(function (_a) {
-    var currency = _a.currency, locale = _a.locale, theme = _a.theme, selectedFormat = _a.selectedFormat, _b = _a.canAddCustomStyle, canAddCustomStyle = _b === void 0 ? false : _b, onChangeFormatting = _a.onChangeFormatting, onClearFormatting = _a.onClearFormatting;
+    var currency = _a.currency, locale = _a.locale, theme = _a.theme, selectedFormat = _a.selectedFormat, namedCellStyles = _a.namedCellStyles, _b = _a.canAddCustomStyle, canAddCustomStyle = _b === void 0 ? false : _b, onChangeFormatting = _a.onChangeFormatting, onClearFormatting = _a.onClearFormatting;
     var colorIndexes = [4, 5, 6, 7, 8, 9];
     var colorTints = [0.8, 0.6, 0.4, 0];
     var currencySymbol = (0, helpers_1.getCurrencySymbol)(locale, currency);
     var shouldFocusSheetRef = (0, react_1.useRef)(true);
     var focusSheet = (0, atoms_1.useFocusSheet)();
     var cellStyles = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray([], tslib_1.__read((0, exports.getCellStyles)(theme, currencySymbol).entries()), false); }, [theme, currencySymbol]);
+    var workbookStyles = (0, react_1.useMemo)(function () { return (0, exports.getGalleryNamedCellStyles)(namedCellStyles); }, [namedCellStyles]);
     // Number formats
     var numberFormats = [
         [
@@ -440,7 +489,7 @@ exports.CellStyleSelector = (0, react_1.memo)(function (_a) {
     var gridClass = "grid grid-cols-3 md:grid-cols-6 gap-1 pb-1";
     return (react_1.default.createElement(ui_2.DropdownMenu, { modal: false },
         react_1.default.createElement(ui_2.DropdownMenuTrigger, { asChild: true },
-            react_1.default.createElement(ui_2.IconButton, { size: "xl", tooltip: "Cell styles", className: "gap-1" },
+            react_1.default.createElement(ui_2.IconButton, { size: "xl", tooltip: "Cell styles", "aria-label": "Cell styles", className: "gap-1" },
                 react_1.default.createElement(icons_2.MdBrush, null),
                 react_1.default.createElement("div", { className: "text-xs" }, "Cell styles"),
                 react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
@@ -454,6 +503,10 @@ exports.CellStyleSelector = (0, react_1.memo)(function (_a) {
                     shouldFocusSheetRef.current = false;
                 } },
                 react_1.default.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    workbookStyles.length ? (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: headingClass }, "Workbook styles"),
+                        react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                        react_1.default.createElement("div", { className: gridClass }, workbookStyles.map(function (namedStyle) { return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onChangeFormatting(namedStyle.format); }, className: hoverClass, key: "".concat(namedStyle.name, "-").concat(namedStyle.xfId), style: (0, exports.getNamedCellStylePreview)(namedStyle.format, theme) }, namedStyle.name)); })))) : null,
                     cellStyles.map(function (_a) {
                         var _b = tslib_1.__read(_a, 2), category = _b[0], cellStyleList = _b[1];
                         return (react_1.default.createElement("div", { key: category },