@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/toolbar/border-selector.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var ui_3 = require("@rowsncolumns/ui");
+var ui_4 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("react");
+var border_color_selector_1 = require("./border-color-selector");
+var border_line_style_selector_1 = require("./border-line-style-selector");
+var border_location_options_1 = require("./border-location-options");
+var BorderSelector = function (_a) {
+    var isDarkMode = _a.isDarkMode, theme = _a.theme, onChange = _a.onChange, userDefinedColors = _a.userDefinedColors, onAddUserDefinedColor = _a.onAddUserDefinedColor, disabledBorderLocations = _a.disabledBorderLocations, ColorSelectorComponent = _a.ColorSelector;
+    var _b = tslib_1.__read((0, react_2.useState)(undefined), 2), color = _b[0], setColorState = _b[1];
+    var _c = tslib_1.__read((0, react_2.useState)("solid"), 2), style = _c[0], setStyleState = _c[1];
+    var _d = tslib_1.__read((0, react_2.useState)(), 2), borderLocation = _d[0], setBorderLocationState = _d[1];
+    var getDefaultBorderColor = (0, react_1.useCallback)(function () {
+        return { theme: 1, tint: isDarkMode ? 1 : 0 };
+    }, [isDarkMode]);
+    var setColor = (0, react_1.useCallback)(function (col) {
+        setColorState(col);
+        // Upstream change
+        if (borderLocation) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(borderLocation, col !== null && col !== void 0 ? col : getDefaultBorderColor(), style);
+        }
+    }, [getDefaultBorderColor, borderLocation, style, onChange]);
+    var setStyle = (0, react_1.useCallback)(function (styl) {
+        setStyleState(styl);
+        // Upstream change
+        if (borderLocation) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(borderLocation, color !== null && color !== void 0 ? color : getDefaultBorderColor(), styl);
+        }
+    }, [getDefaultBorderColor, color, borderLocation, onChange]);
+    var setBorderLocation = (0, react_1.useCallback)(function (location) {
+        setBorderLocationState(location);
+        // Upstream change
+        if (location) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(location, color !== null && color !== void 0 ? color : getDefaultBorderColor(), style);
+        }
+    }, [getDefaultBorderColor, color, style, onChange]);
+    // Remove all borders
+    var clearBorder = function () {
+        // Remove border location
+        setBorderLocationState(undefined);
+        // Upstream
+        onChange === null || onChange === void 0 ? void 0 : onChange("all", undefined, undefined);
+    };
+    return (react_1.default.createElement(ui_1.Popover, null,
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_2.IconButton, { size: "xl", tooltip: "Borders" },
+                react_1.default.createElement(icons_1.MdBorderAll, null),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
+            react_1.default.createElement(ui_3.Stack, { className: "gap-2", direction: "horizontal" },
+                react_1.default.createElement(ui_3.Stack, { direction: "horizontal", className: "gap-0 max-w-[140px] flex-wrap" },
+                    react_1.default.createElement(border_location_options_1.BorderLocationOptions, { borderLocation: borderLocation, onChange: setBorderLocation, onClear: clearBorder, disabledBorderLocations: disabledBorderLocations })),
+                react_1.default.createElement(ui_4.Separator, { orientation: "vertical", color: "$gray6" }),
+                react_1.default.createElement(ui_3.Stack, { direction: "vertical", className: "gap-1" },
+                    react_1.default.createElement(border_color_selector_1.BorderColorSelector, { color: color !== null && color !== void 0 ? color : getDefaultBorderColor(), onChange: setColor, theme: theme, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor, ColorSelector: ColorSelectorComponent }),
+                    react_1.default.createElement(border_line_style_selector_1.BorderLineStyleSelector, { borderStyle: style, onChange: setStyle }))))));
+};
+exports.BorderSelector = BorderSelector;

package/dist/cjs/components/toolbar/buttons.d.ts

@@ -0,0 +1,55 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import type { ColorMode } from "../../hooks";
+export declare const ButtonUndo: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonRedo: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonBold: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonItalic: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonUnderline: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonFormatCurrency: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonFormatPercent: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonIncreaseDecimal: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonDecreaseDecimal: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonMerge: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonStrikethrough: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonSuperscript: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonSubscript: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonClearFormatting: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonRemoveDuplicates: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonPrint: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonPaintFormat: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonCopyToClipboard: (props: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonSwitchColorMode: ({ colorMode, ...props }: ComponentProps<typeof ToolbarIconButton> & {
+    colorMode?: ColorMode;
+}) => React.JSX.Element;
+export declare const ButtonInsertLink: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonInsertChart: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonInsertRowBelow: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonInsertColumnRight: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonIncreaseIndent: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonDecreaseIndent: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonTraceDependents: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonTracePrecedents: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonRemoveArrows: ({ className, ...props }: ComponentProps<typeof ToolbarIconButton>) => React.JSX.Element;
+export declare const ButtonInsertImage: ({ className, onInsertFile, ...props }: ComponentProps<typeof ToolbarIconButton> & {
+    onInsertFile?: (file: File) => void;
+}) => React.JSX.Element;
+/**
+ * AutoSum (Σ) button. Defaults to SUM on click; opens a dropdown
+ * with SUM / AVERAGE / COUNT / MAX / MIN matching Excel and
+ * Google Sheets. The host wires `onInsertAutoSum` from
+ * `useSpreadsheetState`.
+ */
+type AutoSumFunction = "SUM" | "AVERAGE" | "COUNT" | "MAX" | "MIN";
+export declare const ButtonAutoSum: ({ className, onSelect, disabled, }: {
+    className?: string;
+    /**
+     * Fired when the user picks an aggregate from the dropdown. The
+     * host should call `onInsertAutoSum(sheetId, activeCell, fn)`.
+     */
+    onSelect: (functionName: AutoSumFunction) => void;
+    disabled?: boolean;
+}) => React.JSX.Element;
+export declare const ToolbarIconButton: React.ForwardRefExoticComponent<Omit<import("@rowsncolumns/ui").IconButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=buttons.d.ts.map

package/dist/cjs/components/toolbar/buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/buttons.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/toolbar/buttons.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarIconButton = exports.ButtonAutoSum = exports.ButtonInsertImage = exports.ButtonRemoveArrows = exports.ButtonTracePrecedents = exports.ButtonTraceDependents = exports.ButtonDecreaseIndent = exports.ButtonIncreaseIndent = exports.ButtonInsertColumnRight = exports.ButtonInsertRowBelow = exports.ButtonInsertChart = exports.ButtonInsertLink = exports.ButtonSwitchColorMode = exports.ButtonCopyToClipboard = exports.ButtonPaintFormat = exports.ButtonPrint = exports.ButtonRemoveDuplicates = exports.ButtonClearFormatting = exports.ButtonSubscript = exports.ButtonSuperscript = exports.ButtonStrikethrough = exports.ButtonMerge = exports.ButtonDecreaseDecimal = exports.ButtonIncreaseDecimal = exports.ButtonFormatPercent = exports.ButtonFormatCurrency = exports.ButtonUnderline = exports.ButtonItalic = exports.ButtonBold = exports.ButtonRedo = exports.ButtonUndo = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var atoms_1 = require("../../atoms");
+var ButtonUndo = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ size: "md", tooltip: "Undo" }, props),
+        react_1.default.createElement(icons_1.MdUndo, null)));
+};
+exports.ButtonUndo = ButtonUndo;
+var ButtonRedo = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ size: "md", tooltip: "Redo" }, props),
+        react_1.default.createElement(icons_1.MdRedo, null)));
+};
+exports.ButtonRedo = ButtonRedo;
+var ButtonBold = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Bold" }, props),
+        react_1.default.createElement(icons_1.MdFormatBold, null)));
+};
+exports.ButtonBold = ButtonBold;
+var ButtonItalic = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Italic" }, props),
+        react_1.default.createElement(icons_1.MdFormatItalic, null)));
+};
+exports.ButtonItalic = ButtonItalic;
+var ButtonUnderline = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Underline" }, props),
+        react_1.default.createElement(icons_1.MdFormatUnderlined, null)));
+};
+exports.ButtonUnderline = ButtonUnderline;
+var ButtonFormatCurrency = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ size: "md", tooltip: "Format as currency" }, props),
+        react_1.default.createElement(icons_1.MdAttachMoney, null)));
+};
+exports.ButtonFormatCurrency = ButtonFormatCurrency;
+var ButtonFormatPercent = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ size: "sm", tooltip: "Format as percent" }, props), "%"));
+};
+exports.ButtonFormatPercent = ButtonFormatPercent;
+var ButtonIncreaseDecimal = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Increase decimal places" }, props),
+        react_1.default.createElement(icons_1.IncreaseDecimalIcon, null)));
+};
+exports.ButtonIncreaseDecimal = ButtonIncreaseDecimal;
+var ButtonDecreaseDecimal = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Decrease decimal places" }, props),
+        react_1.default.createElement(icons_1.DecreaseDecimalIcon, null)));
+};
+exports.ButtonDecreaseDecimal = ButtonDecreaseDecimal;
+var ButtonMerge = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Merge cells" }, props),
+        react_1.default.createElement(icons_1.AiOutlineMergeCells, null)));
+};
+exports.ButtonMerge = ButtonMerge;
+var ButtonStrikethrough = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Strikethrough" }, props),
+        react_1.default.createElement(icons_1.MdStrikethroughS, null)));
+};
+exports.ButtonStrikethrough = ButtonStrikethrough;
+var ButtonSuperscript = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Superscript" }, props),
+        react_1.default.createElement(icons_1.MdSuperscript, null)));
+};
+exports.ButtonSuperscript = ButtonSuperscript;
+var ButtonSubscript = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Subscript" }, props),
+        react_1.default.createElement(icons_1.MdSubscript, null)));
+};
+exports.ButtonSubscript = ButtonSubscript;
+var ButtonClearFormatting = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Clear formatting" }, props),
+        react_1.default.createElement(icons_1.MdClearFormatting, null)));
+};
+exports.ButtonClearFormatting = ButtonClearFormatting;
+var ButtonRemoveDuplicates = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Remove duplicates" }, props),
+        react_1.default.createElement(icons_1.RemoveDuplicatesIcon, null)));
+};
+exports.ButtonRemoveDuplicates = ButtonRemoveDuplicates;
+var ButtonPrint = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Print" }, props),
+        react_1.default.createElement(icons_1.MdPrintOutline, null)));
+};
+exports.ButtonPrint = ButtonPrint;
+var ButtonPaintFormat = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Paint format" }, props),
+        react_1.default.createElement(icons_1.PaintBrush, null)));
+};
+exports.ButtonPaintFormat = ButtonPaintFormat;
+var ButtonCopyToClipboard = function (props) {
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Copy selection to clipboard" }, props),
+        react_1.default.createElement(icons_1.ClipboardCopyIcon, null)));
+};
+exports.ButtonCopyToClipboard = ButtonCopyToClipboard;
+var ButtonSwitchColorMode = function (_a) {
+    var colorMode = _a.colorMode, props = tslib_1.__rest(_a, ["colorMode"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Switch color mode" }, props), colorMode === "dark" ? react_1.default.createElement(icons_1.SunIcon, null) : react_1.default.createElement(icons_1.MoonIcon, null)));
+};
+exports.ButtonSwitchColorMode = ButtonSwitchColorMode;
+var ButtonInsertLink = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Insert link", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.Link2Icon, null)));
+};
+exports.ButtonInsertLink = ButtonInsertLink;
+var ButtonInsertChart = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Insert chart", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.BarChartIcon, null)));
+};
+exports.ButtonInsertChart = ButtonInsertChart;
+var ButtonInsertRowBelow = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Insert row below", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.InsertRowBelowIcon, null)));
+};
+exports.ButtonInsertRowBelow = ButtonInsertRowBelow;
+var ButtonInsertColumnRight = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Insert column right", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.InsertColumnRightIcon, null)));
+};
+exports.ButtonInsertColumnRight = ButtonInsertColumnRight;
+var ButtonIncreaseIndent = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Increase indent", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.MdIncreaseIndentIcon, null)));
+};
+exports.ButtonIncreaseIndent = ButtonIncreaseIndent;
+var ButtonDecreaseIndent = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Decrease indent", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.MdDecreaseIndentIcon, null)));
+};
+exports.ButtonDecreaseIndent = ButtonDecreaseIndent;
+var ButtonTraceDependents = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    var label = "Trace dependents";
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.TraceDependentsIcon, null),
+        react_1.default.createElement("div", { className: "text-xs" }, label)));
+};
+exports.ButtonTraceDependents = ButtonTraceDependents;
+var ButtonTracePrecedents = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    var label = "Trace precedents";
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Trace precedents", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.TracePrecedentsIcon, null),
+        react_1.default.createElement("div", { className: "text-xs" }, label)));
+};
+exports.ButtonTracePrecedents = ButtonTracePrecedents;
+var ButtonRemoveArrows = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    var label = "Remove arrows";
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Remove arrows", className: (0, ui_1.cn)(className) }, props),
+        react_1.default.createElement(icons_1.RemoveArrowsIcon, null),
+        react_1.default.createElement("div", { className: "text-xs" }, label)));
+};
+exports.ButtonRemoveArrows = ButtonRemoveArrows;
+var ButtonInsertImage = function (_a) {
+    var className = _a.className, onInsertFile = _a.onInsertFile, props = tslib_1.__rest(_a, ["className", "onInsertFile"]);
+    return (react_1.default.createElement(exports.ToolbarIconButton, tslib_1.__assign({ tooltip: "Insert image", className: (0, ui_1.cn)("relative overflow-hidden", className), type: "button" }, props),
+        react_1.default.createElement(icons_1.ImageIcon, null),
+        react_1.default.createElement("input", { type: "file", accept: "image/*", className: "absolute left-0 top-0 right-0 bottom-0 opacity-0 w-full", title: "", onChange: function (e) {
+                var _a;
+                var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                if (file)
+                    onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(file);
+            } })));
+};
+exports.ButtonInsertImage = ButtonInsertImage;
+var AUTO_SUM_FUNCTIONS = [
+    { name: "SUM", label: "Sum" },
+    { name: "AVERAGE", label: "Average" },
+    { name: "COUNT", label: "Count" },
+    { name: "MAX", label: "Max" },
+    { name: "MIN", label: "Min" },
+];
+var ButtonAutoSum = function (_a) {
+    var className = _a.className, onSelect = _a.onSelect, disabled = _a.disabled;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+        react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { tooltip: "Functions", className: (0, ui_1.cn)(className), type: "button", disabled: disabled },
+                react_1.default.createElement("span", { className: "font-serif text-base leading-none" }, "\u03A3"))),
+        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", onCloseAutoFocus: function (event) {
+                    event.preventDefault();
+                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                } }, AUTO_SUM_FUNCTIONS.map(function (_a) {
+                var name = _a.name, label = _a.label;
+                return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: name, onClick: function () { return onSelect(name); } }, label));
+            })))));
+};
+exports.ButtonAutoSum = ButtonAutoSum;
+exports.ToolbarIconButton = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, onClick = _a.onClick, onMouseDown = _a.onMouseDown, props = tslib_1.__rest(_a, ["className", "onClick", "onMouseDown"]);
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    return (react_1.default.createElement(ui_1.IconButton, tslib_1.__assign({ ref: ref, className: (0, ui_1.cn)(className), onMouseDown: function (event) {
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+            // Toolbar controls act on the grid/editor selection, so they must
+            // not take focus: focusing the button blurs the cell editor's
+            // contenteditable and the browser stops painting the very text
+            // selection the command is about to format. Cancelling mousedown's
+            // default action (focus) keeps focus where it is; click still fires
+            // and keyboard focus via Tab is unaffected.
+            event.preventDefault();
+        }, onClick: function (event) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+        }, type: "button" }, props)));
+});
+exports.ToolbarIconButton.displayName = "ToolbarIconButton";

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { CellFormat } 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;
+export type CellStyleSelectorProps = {
+    currency: string;
+    locale?: string;
+    theme: SpreadsheetTheme;
+    userDefinedStyles?: [string, CellFormat][];
+    selectedFormat?: CellFormat | null;
+    onAddUserDefinedStyle?(name: string): void;
+    onChangeFormatting: (...args: Parameters<WithCellFormat | WithTypeValue<keyof CellFormat>>) => void;
+    canAddCustomStyle?: boolean;
+    onClearFormatting: () => void;
+};
+type StyleList = [
+    category: string,
+    format: CellFormat,
+    style?: 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 {};
+//# sourceMappingURL=cell-style-selector.d.ts.map

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

@@ -0,0 +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"}