@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/toolbar/font-family-selector.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFamilySelector = 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 react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var use_fonts_1 = require("../../hooks/use-fonts");
+var DEFAULT_FONT_LIST = [
+    {
+        value: "Arial",
+        label: "Arial",
+    },
+    {
+        value: "Calibri",
+        label: "Calibri",
+    },
+    {
+        value: "Cambria",
+        label: "Cambria",
+    },
+    {
+        value: "Caveat",
+        label: "Caveat",
+    },
+    {
+        value: "Comfortaa",
+        label: "Comfortaa",
+    },
+    {
+        value: "Comic Sans MS",
+        label: "Comic Sans MS",
+    },
+    {
+        value: "Consolas",
+        label: "Consolas",
+    },
+    {
+        value: "Corsiva",
+        label: "Corsiva",
+    },
+    {
+        value: "Courier New",
+        label: "Courier New",
+    },
+    {
+        value: "Droid Sans",
+        label: "Droid Sans",
+    },
+    {
+        value: "Droid Serif",
+        label: "Droid Serif",
+    },
+    {
+        value: "Georgia",
+        label: "Georgia",
+    },
+    {
+        value: "Impact",
+        label: "Impact",
+    },
+    {
+        value: "Lexend",
+        label: "Lexend",
+    },
+    {
+        value: "Lobster",
+        label: "Lobster",
+    },
+    {
+        value: "Lora",
+        label: "Lora",
+    },
+    {
+        value: "Merriweather",
+        label: "Merriweather",
+    },
+    {
+        value: "Montserrat",
+        label: "Montserrat",
+    },
+    {
+        value: "Nunito",
+        label: "Nunito",
+    },
+    {
+        value: "Oswald",
+        label: "Oswald",
+    },
+    {
+        value: "Pacifico",
+        label: "Pacifico",
+    },
+    {
+        value: "Proxima Nova",
+        label: "Proxima Nova",
+    },
+    {
+        value: "Roboto",
+        label: "Roboto",
+    },
+    {
+        value: "Roboto Mono",
+        label: "Roboto Mono",
+    },
+    {
+        value: "Roboto Serif",
+        label: "Roboto Serif",
+    },
+    {
+        value: "Source Sans 3",
+        label: "Source Sans 3",
+    },
+    {
+        value: "Times New Roman",
+        label: "Times New Roman",
+    },
+    {
+        value: "Trebuchet MS",
+        label: "Trebuchet MS",
+    },
+    {
+        value: "Ubuntu",
+        label: "Ubuntu",
+    },
+    {
+        value: "Verdana",
+        label: "Verdana",
+    },
+];
+exports.FontFamilySelector = (0, react_1.memo)(function (_a) {
+    var theme = _a.theme, _b = _a.value, value = _b === void 0 ? theme.primaryFontFamily : _b, _c = _a.fontList, fontList = _c === void 0 ? DEFAULT_FONT_LIST : _c, triggerVariant = _a.triggerVariant, onRequestFonts = _a.onRequestFonts, onChange = _a.onChange;
+    var defaultFontFamily = theme.primaryFontFamily;
+    var isDefault = value === defaultFontFamily;
+    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_2.IconButton, { tooltip: "Font", className: "justify-between", variant: triggerVariant },
+                react_1.default.createElement("div", { className: "text-xs py-1 w-[80px] overflow-hidden text-ellipsis whitespace-nowrap text-left" }, isDefault ? "Default (".concat(value, ")") : value),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start" },
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        onChange(defaultFontFamily);
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    "Default (",
+                    defaultFontFamily,
+                    ")"),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                fontList.map(function (_a, idx) {
+                    var label = _a.label, fontValue = _a.value;
+                    var isChecked = value === fontValue;
+                    return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: idx, checked: isChecked, onClick: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                            return tslib_1.__generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!onRequestFonts) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, onRequestFonts([fontValue])];
+                                    case 1:
+                                        _a.sent();
+                                        return [3 /*break*/, 4];
+                                    case 2: return [4 /*yield*/, (0, use_fonts_1.loadWebFont)([
+                                            "".concat(fontValue, ":400"),
+                                            "".concat(fontValue, ":700"),
+                                        ])];
+                                    case 3:
+                                        _a.sent();
+                                        _a.label = 4;
+                                    case 4:
+                                        onChange(fontValue);
+                                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        label));
+                })))));
+});

package/dist/cjs/components/toolbar/font-size-selector.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type FontSizeSelectorProps = {
+    defaultFontSizePoint?: number;
+    value?: number | null;
+    onChange(value: number): void;
+    options?: string[];
+};
+export declare const FontSizeSelector: ({ defaultFontSizePoint, value: fontSizeValue, onChange, options, }: FontSizeSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=font-size-selector.d.ts.map

package/dist/cjs/components/toolbar/font-size-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-size-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/font-size-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,KAAK,qBAAqB,GAAG;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,gBAAgB,GAAI,oEAK9B,qBAAqB,sBAyLvB,CAAC"}

package/dist/cjs/components/toolbar/font-size-selector.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontSizeSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("react");
+var active_editor_atom_1 = require("../../atoms/active-editor.atom");
+var atoms_1 = require("../../atoms");
+var config_1 = require("../../config");
+var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
+var buttons_1 = require("./buttons");
+var fontSizeOptions = [6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 36].map(String);
+var FontSizeSelector = function (_a) {
+    var _b = _a.defaultFontSizePoint, defaultFontSizePoint = _b === void 0 ? config_1.DEFAULT_FONT_SIZE_PT : _b, fontSizeValue = _a.value, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? fontSizeOptions : _c;
+    var numberValue = fontSizeValue !== null && fontSizeValue !== void 0 ? fontSizeValue : defaultFontSizePoint;
+    var value = String(numberValue);
+    var inputRef = (0, react_2.useRef)(null);
+    var _d = tslib_1.__read((0, react_1.useState)(""), 2), inputValue = _d[0], setInputValue = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)(function () {
+        return options.indexOf(value);
+    }), 2), highlightedIndex = _f[0], setHighlightedIndex = _f[1];
+    var openMenu = (0, react_1.useCallback)(function () { return setIsOpen(true); }, []);
+    var closeMenu = (0, react_1.useCallback)(function () { return setIsOpen(false); }, []);
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var activeEditor = (0, active_editor_atom_1.useActiveEditor)();
+    /**
+     * Hand focus back after the size input/dropdown is done. When a cell is
+     * being edited, focus the editor directly — ProseMirror re-paints the
+     * kept selection on focus — rather than `focusSheet`, which suppresses
+     * refocus while focus sits on toolbar chrome outside the grid.
+     */
+    var returnFocus = (0, react_1.useCallback)(function () {
+        if (activeEditor) {
+            activeEditor.focus();
+        }
+        else {
+            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+        }
+    }, [activeEditor, focusSheet]);
+    var valueRef = (0, react_2.useRef)("");
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var len = options.length - 1;
+        switch (e.key) {
+            case "ArrowDown": {
+                if (!isOpen) {
+                    openMenu();
+                    return;
+                }
+                setHighlightedIndex(function (prev) {
+                    if (prev === len) {
+                        return 0;
+                    }
+                    return Math.min(prev + 1, len);
+                });
+                e.preventDefault();
+                break;
+            }
+            case "ArrowUp":
+                if (!isOpen) {
+                    openMenu();
+                }
+                setHighlightedIndex(function (prev) {
+                    if (prev === 0) {
+                        return len;
+                    }
+                    return Math.max(0, prev - 1);
+                });
+                e.preventDefault();
+                break;
+            case "Escape":
+                closeMenu();
+                break;
+            case "Enter":
+                onChange(Number(valueRef.current));
+                closeMenu();
+                returnFocus();
+                break;
+            case "Tab":
+                onChange(Number(valueRef.current));
+                closeMenu();
+                break;
+        }
+    }, [options, isOpen, onChange, closeMenu, openMenu, returnFocus]);
+    /**
+     * Steppers increment from the size the selection actually has. While a
+     * cell is being edited, the last fontSize applied to the editor selection
+     * lives in the run marks, not in the cell-level `value` prop — stepping
+     * from `value` would re-apply the same size on every click.
+     */
+    var stepBase = function () {
+        var _a, _b;
+        return (_b = (_a = activeEditor === null || activeEditor === void 0 ? void 0 : activeEditor.getSelectionFontSize) === null || _a === void 0 ? void 0 : _a.call(activeEditor)) !== null && _b !== void 0 ? _b : (Number(inputValue) || numberValue);
+    };
+    var applySize = function (size) {
+        setInputValue(String(size));
+        onChange(size);
+    };
+    var onIncrement = function () {
+        applySize(stepBase() + 1);
+    };
+    var onDecrement = function () {
+        applySize(Math.max(1, stepBase() - 1));
+    };
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        valueRef.current = inputValue;
+    }, [inputValue]);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        if (!(0, utils_1.isNil)(options[highlightedIndex])) {
+            setInputValue(options[highlightedIndex]);
+        }
+    }, [highlightedIndex]);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        setInputValue(String(value));
+        setHighlightedIndex(options.indexOf(value));
+    }, [value, options]);
+    return (react_1.default.createElement(ui_1.Stack, { className: "gap-1" },
+        react_1.default.createElement(buttons_1.ToolbarIconButton, { shrink: true, size: "xs", onClick: onDecrement, tooltip: "Decrease font size" },
+            react_1.default.createElement(icons_1.MinusIcon, null)),
+        react_1.default.createElement(ui_1.Popover, { open: isOpen },
+            react_1.default.createElement(ui_1.PopoverAnchor, { asChild: true },
+                react_1.default.createElement(ui_1.Input, { ref: inputRef, value: inputValue, onChange: function (e) {
+                        setInputValue(e.target.value);
+                    }, onKeyDown: handleKeyDown, onFocus: function () {
+                        openMenu();
+                    }, onBlur: function () {
+                        closeMenu();
+                    }, className: "w-[40px] text-xs text-center" })),
+            react_1.default.createElement(ui_1.PopoverPortal, null,
+                react_1.default.createElement(ui_1.PopoverContent, { align: "start", sideOffset: 2, className: "w-[40px] min-w-0 p-1", onOpenAutoFocus: function (event) {
+                        event.preventDefault();
+                    } }, options.map(function (item, index) { return (react_1.default.createElement(ui_1.Button, { key: item, onMouseDown: function (event) {
+                        // Don't let the option button take focus (that blurs the
+                        // size input mid-gesture); apply, close, and hand focus
+                        // back to the editor/grid explicitly instead.
+                        event.preventDefault();
+                        onChange === null || onChange === void 0 ? void 0 : onChange(Number(item));
+                        closeMenu();
+                        returnFocus();
+                    }, className: (0, ui_1.cn)(highlightedIndex === index
+                        ? "bg-rnc-foreground/10"
+                        : undefined, "text-xs pr-1.5 pl-1.5 justify-center") }, item)); })))),
+        react_1.default.createElement(buttons_1.ToolbarIconButton, { shrink: true, size: "xs", onClick: onIncrement, tooltip: "Increase font size" },
+            react_1.default.createElement(icons_1.PlusIcon, null))));
+};
+exports.FontSizeSelector = FontSizeSelector;

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

@@ -0,0 +1,25 @@
+export * from "./toolbar";
+export * from "./buttons";
+export * from "./scale-selector";
+export * from "./font-size-selector";
+export * from "./text-color-selector";
+export * from "./background-color-selector";
+export * from "./merge-cells-selector";
+export * from "./border-selector";
+export * from "./font-family-selector";
+export * from "./text-horizontal-align-selector";
+export * from "./text-vertical-align-selector";
+export * from "./text-wrap-selector";
+export * from "./text-format-selector";
+export * from "./theme-selector";
+export * from "./table-actions";
+export * from "./cell-style-selector";
+export * from "./table-style-selector";
+export * from "./border-color-selector";
+export * from "./color-selector";
+export * from "./border-line-style-options";
+export * from "./border-location-options";
+export * from "./insert-menu";
+export * from "./view-menu";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./toolbar"), exports);
+tslib_1.__exportStar(require("./buttons"), exports);
+tslib_1.__exportStar(require("./scale-selector"), exports);
+tslib_1.__exportStar(require("./font-size-selector"), exports);
+tslib_1.__exportStar(require("./text-color-selector"), exports);
+tslib_1.__exportStar(require("./background-color-selector"), exports);
+tslib_1.__exportStar(require("./merge-cells-selector"), exports);
+tslib_1.__exportStar(require("./border-selector"), exports);
+tslib_1.__exportStar(require("./font-family-selector"), exports);
+tslib_1.__exportStar(require("./text-horizontal-align-selector"), exports);
+tslib_1.__exportStar(require("./text-vertical-align-selector"), exports);
+tslib_1.__exportStar(require("./text-wrap-selector"), exports);
+tslib_1.__exportStar(require("./text-format-selector"), exports);
+tslib_1.__exportStar(require("./theme-selector"), exports);
+tslib_1.__exportStar(require("./table-actions"), exports);
+tslib_1.__exportStar(require("./cell-style-selector"), exports);
+tslib_1.__exportStar(require("./table-style-selector"), exports);
+tslib_1.__exportStar(require("./border-color-selector"), exports);
+tslib_1.__exportStar(require("./color-selector"), exports);
+tslib_1.__exportStar(require("./border-line-style-options"), exports);
+tslib_1.__exportStar(require("./border-location-options"), exports);
+tslib_1.__exportStar(require("./insert-menu"), exports);
+tslib_1.__exportStar(require("./view-menu"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/dist/cjs/components/toolbar/insert-menu.d.ts

@@ -0,0 +1,22 @@
+import { type CellInterface, type SelectionArea } from "@rowsncolumns/grid";
+import React from "react";
+import type { PivotTable } from "../../types";
+import type { CanvasGridProps, SelectionAttributes } from "../canvas-grid/typings";
+type InsertMenuProps = {
+    sheetId: number;
+    activeCell: CellInterface;
+    selections: SelectionArea<SelectionAttributes>[];
+    onRequestCreatePivotTable?(pivotTable: PivotTable): void;
+    onCreateNewSheet?: CanvasGridProps["onCreateNewSheet"];
+    onInsertCellsShiftRight?: CanvasGridProps["onInsertCellsShiftRight"];
+    onInsertCellsShiftDown?: CanvasGridProps["onInsertCellsShiftDown"];
+    onInsertRow?: CanvasGridProps["onInsertRow"];
+    onInsertColumn?: CanvasGridProps["onInsertColumn"];
+    onCreateChart?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    onRequestInsertImage?(sheetId: number, activeCell: CellInterface, insertOverCells?: boolean): void;
+    onRequestInsertLink?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    onRequestDataValidation: CanvasGridProps["onRequestDataValidation"];
+};
+export declare const InsertMenu: React.MemoExoticComponent<({ sheetId, activeCell, selections, onCreateNewSheet, onInsertCellsShiftRight, onInsertCellsShiftDown, onInsertRow, onInsertColumn, onCreateChart, onRequestInsertImage, onRequestInsertLink, onRequestDataValidation, onRequestCreatePivotTable, }: InsertMenuProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=insert-menu.d.ts.map

package/dist/cjs/components/toolbar/insert-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-menu.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/insert-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAEnB,MAAM,oBAAoB,CAAC;AAgB5B,OAAO,KAAuB,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAA4B,UAAU,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,yBAAyB,CAAC,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,uBAAuB,CAAC,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;IACrE,sBAAsB,CAAC,EAAE,eAAe,CAAC,wBAAwB,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,oBAAoB,CAAC,CACnB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,eAAe,CAAC,EAAE,OAAO,GACxB,IAAI,CAAC;IACR,mBAAmB,CAAC,CAClB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,uBAAuB,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;CACrE,CAAC;AAEF,eAAO,MAAM,UAAU,iRAelB,eAAe,uBA2PnB,CAAC"}

package/dist/cjs/components/toolbar/insert-menu.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertMenu = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var selections_1 = require("../../api/selections");
+var atoms_1 = require("../../atoms");
+exports.InsertMenu = (0, react_1.memo)(function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, onCreateNewSheet = _a.onCreateNewSheet, onInsertCellsShiftRight = _a.onInsertCellsShiftRight, onInsertCellsShiftDown = _a.onInsertCellsShiftDown, onInsertRow = _a.onInsertRow, onInsertColumn = _a.onInsertColumn, onCreateChart = _a.onCreateChart, onRequestInsertImage = _a.onRequestInsertImage, onRequestInsertLink = _a.onRequestInsertLink, onRequestDataValidation = _a.onRequestDataValidation, onRequestCreatePivotTable = _a.onRequestCreatePivotTable;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var onInsertNote = (0, atoms_1.useInsertNote)();
+    var shouldFocusSheetRef = (0, react_1.useRef)(true);
+    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, { size: "xl", tooltip: "Insert", className: "gap-1" },
+                react_1.default.createElement("div", { className: "text-xs" }, "Insert"),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", onCloseAutoFocus: function (event) {
+                    event.preventDefault();
+                    if (shouldFocusSheetRef.current) {
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    }
+                } },
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                        "Cells",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertCellsShiftRight === null || onInsertCellsShiftRight === void 0 ? void 0 : onInsertCellsShiftRight(sheetId, activeCell, selections);
+                            } }, "Insert cells and shift right"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertCellsShiftDown === null || onInsertCellsShiftDown === void 0 ? void 0 : onInsertCellsShiftDown(sheetId, activeCell, selections);
+                            } }, "Insert cells and shift down"))),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                        "Rows",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onInsertRow === null || onInsertRow === void 0 ? void 0 : onInsertRow(sheetId, activeCell.rowIndex, 1); } }, "Insert 1 row above"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertRow === null || onInsertRow === void 0 ? void 0 : onInsertRow(sheetId, activeCell.rowIndex + 1, 1);
+                            } }, "Insert 1 row below"))),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                        "Columns",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertColumn === null || onInsertColumn === void 0 ? void 0 : onInsertColumn(sheetId, activeCell.columnIndex, 1);
+                            } }, "Insert 1 column left"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertColumn === null || onInsertColumn === void 0 ? void 0 : onInsertColumn(sheetId, activeCell.columnIndex + 1, 1);
+                            } }, "Insert 1 column right"))),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onCreateNewSheet === null || onCreateNewSheet === void 0 ? void 0 : onCreateNewSheet(); } },
+                    "Sheet",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "Shift+F11")),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                onRequestCreatePivotTable ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = false;
+                        var sel = selections.length
+                            ? selections
+                            : (0, grid_1.selectionFromActiveCell)(activeCell);
+                        var pivotTable = {
+                            pivotId: (0, utils_1.uuidString)(),
+                            columns: [],
+                            rows: [],
+                            values: [],
+                            source: tslib_1.__assign(tslib_1.__assign({}, sel[0].range), { sheetId: sheetId }),
+                            targetPosition: tslib_1.__assign(tslib_1.__assign({}, activeCell), { sheetId: sheetId }),
+                        };
+                        onRequestCreatePivotTable === null || onRequestCreatePivotTable === void 0 ? void 0 : onRequestCreatePivotTable(pivotTable);
+                    } }, "Pivot Table")) : null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = false;
+                        onCreateChart === null || onCreateChart === void 0 ? void 0 : onCreateChart(sheetId, activeCell, selections);
+                    } }, "Chart"),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                        "Image",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                shouldFocusSheetRef.current = false;
+                                onRequestInsertImage === null || onRequestInsertImage === void 0 ? void 0 : onRequestInsertImage(sheetId, activeCell, false);
+                            } }, "Insert image in cell"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                shouldFocusSheetRef.current = false;
+                                onRequestInsertImage === null || onRequestInsertImage === void 0 ? void 0 : onRequestInsertImage(sheetId, activeCell, true);
+                            } }, "Insert image over cell"))),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = false;
+                        onRequestInsertLink === null || onRequestInsertLink === void 0 ? void 0 : onRequestInsertLink(sheetId, activeCell, selections);
+                    } }, "Link"),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = false;
+                        var finalSelections = (0, selections_1.getUserSelections)(activeCell, selections);
+                        var dropdownValidationRule = {
+                            id: (0, utils_1.uuid)(),
+                            ranges: finalSelections.map(function (sel) { return (tslib_1.__assign(tslib_1.__assign({}, sel.range), { sheetId: sheetId })); }),
+                            condition: {
+                                type: "ONE_OF_LIST",
+                                values: [
+                                    {
+                                        userEnteredValue: "Option 1, Option 2",
+                                    },
+                                ],
+                            },
+                            // Excel parity: UI-created rules ignore blanks by default.
+                            allowBlank: true,
+                        };
+                        onRequestDataValidation === null || onRequestDataValidation === void 0 ? void 0 : onRequestDataValidation(sheetId, activeCell, selections, dropdownValidationRule);
+                    } }, "Dropdown"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = true;
+                        var finalSelections = (0, selections_1.getUserSelections)(activeCell, selections);
+                        var dropdownValidationRule = {
+                            id: (0, utils_1.uuid)(),
+                            ranges: finalSelections.map(function (sel) { return (tslib_1.__assign(tslib_1.__assign({}, sel.range), { sheetId: sheetId })); }),
+                            condition: {
+                                type: "BOOLEAN",
+                            },
+                            // Excel parity: UI-created rules ignore blanks by default.
+                            allowBlank: true,
+                        };
+                        onRequestDataValidation === null || onRequestDataValidation === void 0 ? void 0 : onRequestDataValidation(sheetId, activeCell, selections, dropdownValidationRule, false);
+                    } }, "Checkbox"),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = false;
+                        onInsertNote === null || onInsertNote === void 0 ? void 0 : onInsertNote(sheetId, activeCell, selections);
+                    } },
+                    "Note",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "Shift+F2"))))));
+});

package/dist/cjs/components/toolbar/merge-cells-selector.d.ts

@@ -0,0 +1,15 @@
+import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/grid";
+import { Direction } from "@rowsncolumns/grid";
+import React from "react";
+import type { SelectionAttributes } from "../canvas-grid/typings";
+type MergeCellsSelectorProps = {
+    activeCell: CellInterface;
+    selections: SelectionArea[];
+    sheetId: number;
+    onMerge(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[], direction?: Direction): void;
+    onUnMerge(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    merges?: GridRange[] | null;
+};
+export declare const MergeCellsSelector: ({ activeCell, selections, sheetId, merges, onMerge, onUnMerge, }: MergeCellsSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=merge-cells-selector.d.ts.map

package/dist/cjs/components/toolbar/merge-cells-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-cells-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/merge-cells-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAgB,MAAM,oBAAoB,CAAC;AAY7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CACL,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,SAAS,CAAC,EAAE,SAAS,GACpB,IAAI,CAAC;IACR,SAAS,CACP,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kEAOhC,uBAAuB,sBAqFzB,CAAC"}