@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/toolbar/merge-cells-selector.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MergeCellsSelector = 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 ui_2 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var atoms_1 = require("../../atoms");
+var config_1 = require("../../config");
+var MergeCellsSelector = function (_a) {
+    var activeCell = _a.activeCell, _b = _a.selections, selections = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, sheetId = _a.sheetId, merges = _a.merges, onMerge = _a.onMerge, onUnMerge = _a.onUnMerge;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var isMerged = !!(merges === null || merges === void 0 ? void 0 : merges.find(function (merge) {
+        return (0, grid_1.isEqualCells)({ rowIndex: merge.startRowIndex, columnIndex: merge.startColumnIndex }, activeCell);
+    }));
+    var selection = selections[selections.length - 1];
+    var disableMenu = selections.length === 0 && !isMerged;
+    var canMergeHorizontally = selection &&
+        selection.range.startColumnIndex !== selection.range.endColumnIndex;
+    var canMergeVertically = selection && selection.range.startRowIndex !== selection.range.endRowIndex;
+    return (react_1.default.createElement(ui_1.Stack, null,
+        react_1.default.createElement(ui_1.IconButton, { onClick: function () {
+                if (isMerged) {
+                    onUnMerge(sheetId, activeCell, selections);
+                }
+                else {
+                    onMerge(sheetId, activeCell, selections);
+                }
+            }, isActive: isMerged, tooltip: isMerged ? "Unmerge All" : "Merge all", disabled: disableMenu },
+            react_1.default.createElement(icons_1.AiOutlineMergeCells, null)),
+        react_1.default.createElement(ui_2.DropdownMenu, { modal: false },
+            react_1.default.createElement(ui_2.DropdownMenuTrigger, { disabled: disableMenu, asChild: true },
+                react_1.default.createElement(ui_1.IconButton, { shrink: true, disabled: disableMenu },
+                    react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                react_1.default.createElement(ui_2.DropdownMenuContent, { align: "end" },
+                    react_1.default.createElement(ui_2.DropdownMenuItem, { disabled: isMerged, onClick: function () {
+                            onMerge(sheetId, activeCell, selections);
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        } }, "Merge all"),
+                    react_1.default.createElement(ui_2.DropdownMenuItem, { disabled: isMerged || !canMergeVertically, onClick: function () {
+                            onMerge(sheetId, activeCell, selections, grid_1.Direction.Down);
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        } }, "Merge vertically"),
+                    react_1.default.createElement(ui_2.DropdownMenuItem, { onClick: function () {
+                            onMerge(sheetId, activeCell, selections, grid_1.Direction.Right);
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        }, disabled: isMerged || !canMergeHorizontally }, "Merge horizontally"),
+                    react_1.default.createElement(ui_2.DropdownMenuItem, { disabled: !isMerged, onClick: function () {
+                            onUnMerge(sheetId, activeCell, selections);
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        } }, "Unmerge"))))));
+};
+exports.MergeCellsSelector = MergeCellsSelector;

package/dist/cjs/components/toolbar/scale-selector.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type ScaleSelectorProps = {
+    value?: number;
+    options?: number[];
+    /** Minimum scale (default 0.1 = 10%, matches Excel). */
+    minScale?: number;
+    /** Maximum scale (default 4 = 400%, matches Excel). */
+    maxScale?: number;
+    onChange?(value: number): void;
+};
+export declare const ScaleSelector: ({ value, onChange, options, minScale, maxScale, }: ScaleSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=scale-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scale-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/scale-selector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAeF,eAAO,MAAM,aAAa,GAAI,mDAM3B,kBAAkB,sBAgFpB,CAAC"}

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaleSelector = 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 atoms_1 = require("../../atoms");
+/**
+ * Parse a "90" / "90%" / " 125 % " input into a fractional scale
+ * (0.9 / 0.9 / 1.25). Returns `undefined` if the input doesn't
+ * resolve to a positive number.
+ */
+var parsePercentInput = function (input) {
+    var trimmed = input.trim().replace(/%$/, "").trim();
+    if (!trimmed)
+        return undefined;
+    var n = Number(trimmed);
+    if (!Number.isFinite(n) || n <= 0)
+        return undefined;
+    return n / 100;
+};
+var ScaleSelector = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? 1 : _b, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [0.5, 0.75, 1, 1.25, 1.5, 2] : _c, _d = _a.minScale, minScale = _d === void 0 ? 0.1 : _d, _e = _a.maxScale, maxScale = _e === void 0 ? 4 : _e;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var _f = tslib_1.__read((0, react_1.useState)(false), 2), open = _f[0], setOpen = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)("".concat(Math.round(value * 100), "%")), 2), inputValue = _g[0], setInputValue = _g[1];
+    // Reset the typed value whenever the source scale changes externally
+    // (e.g. host applies a preset, or Ctrl+scroll bumps it).
+    (0, react_1.useEffect)(function () {
+        setInputValue("".concat(Math.round(value * 100), "%"));
+    }, [value]);
+    var commitInput = function (closeAfter) {
+        var parsed = parsePercentInput(inputValue);
+        if (parsed === undefined) {
+            setInputValue("".concat(Math.round(value * 100), "%"));
+            return;
+        }
+        var clamped = Math.min(maxScale, Math.max(minScale, parsed));
+        onChange === null || onChange === void 0 ? void 0 : onChange(clamped);
+        setInputValue("".concat(Math.round(clamped * 100), "%"));
+        if (closeAfter) {
+            setOpen(false);
+            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+        }
+    };
+    return (react_1.default.createElement(ui_1.Popover, { open: open, onOpenChange: setOpen },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { tooltip: "Zoom" },
+                react_1.default.createElement("div", { className: "text-xs" },
+                    (value * 100).toFixed(0),
+                    "%"),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.PopoverPortal, null,
+            react_1.default.createElement(ui_1.PopoverContent, { align: "start", className: "p-1 min-w-[120px]", onCloseAutoFocus: function (event) {
+                    event.preventDefault();
+                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                } },
+                react_1.default.createElement("div", { className: "px-1 pb-1" },
+                    react_1.default.createElement(ui_1.Input, { value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: function (e) {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                commitInput(true);
+                            }
+                            else if (e.key === "Escape") {
+                                setInputValue("".concat(Math.round(value * 100), "%"));
+                                setOpen(false);
+                            }
+                        }, className: "w-full text-xs text-center", "aria-label": "Custom zoom percentage", autoFocus: true })),
+                options.map(function (presetValue) { return (react_1.default.createElement(ui_1.PopoverMenuItem, { key: presetValue, className: "justify-start w-full", onClick: function () {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(presetValue);
+                        setOpen(false);
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    presetValue * 100,
+                    "%")); })))));
+};
+exports.ScaleSelector = ScaleSelector;

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

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const StyledFontDropdown: ({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => React.JSX.Element;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,kBAAkB,GAAI,yBAGhC,KAAK,CAAC,iBAAiB,CACxB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc,CACf,sBAWA,CAAC"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledFontDropdown = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var StyledFontDropdown = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement("div", tslib_1.__assign({ "data-side": "bottom", className: (0, ui_1.cn)("absolute top-full border-solid border border-rnc-border left-0 shadow-lg bg-rnc-background flex flex-col rounded-sm p-1 z-50 animate-in data-[side=bottom]:slide-in-from-top-2 w-[40px] box-border", className) }, props)));
+};
+exports.StyledFontDropdown = StyledFontDropdown;

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

@@ -0,0 +1,15 @@
+import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
+import React from "react";
+import type { TableView } from "../../types";
+import type { SelectionAttributes } from "../canvas-grid/typings";
+type TableActionsProps = {
+    tables?: TableView[];
+    sheetId: number;
+    selections: SelectionArea<SelectionAttributes>[];
+    activeCell: CellInterface;
+    onRequestEditTable?(table: TableView): void;
+    onCreateTable?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[], tableProperties?: Partial<TableView>): void;
+};
+export declare const TableActions: ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, }: TableActionsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=table-actions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-actions.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAYvE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,kBAAkB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5C,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,eAAe,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GACnC,IAAI,CAAC;CACT,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,iFAO1B,iBAAiB,sBA6DnB,CAAC"}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableActions = 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 react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var TableActions = function (_a) {
+    var tables = _a.tables, sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, onRequestEditTable = _a.onRequestEditTable, onCreateTable = _a.onCreateTable;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var table = (0, react_1.useMemo)(function () {
+        return tables === null || tables === void 0 ? void 0 : tables.find(function (table) {
+            return table.sheetId === sheetId &&
+                (0, grid_1.isCellWithinBounds)(activeCell, table.range);
+        });
+    }, [tables, sheetId, activeCell]);
+    var disableMenu = !table;
+    var onConvertToRange = function () {
+        // Calling this will remove the table if present
+        onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections);
+    };
+    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+        react_1.default.createElement(ui_1.Stack, { className: "shrink-0" },
+            react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Convert selection to a table", className: "gap-1", onClick: function () { return onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections); } },
+                react_1.default.createElement(icons_1.TableIcon, null),
+                react_1.default.createElement("span", { className: "text-xs" }, "Insert table")),
+            react_1.default.createElement(ui_1.DropdownMenuTrigger, { disabled: disableMenu, asChild: true },
+                react_1.default.createElement(ui_1.IconButton, { size: "xl", disabled: disableMenu, shrink: true },
+                    react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                react_1.default.createElement(ui_1.DropdownMenuContent, { align: "end" },
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            if (table) {
+                                onRequestEditTable === null || onRequestEditTable === void 0 ? void 0 : onRequestEditTable(table);
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            }
+                        } }, "Edit table"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            if (table) {
+                                onConvertToRange();
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            }
+                        } }, "Convert to range"))))));
+};
+exports.TableActions = TableActions;

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

@@ -0,0 +1,25 @@
+import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
+import { findMatchingBandProperty } from "@rowsncolumns/utils";
+import React from "react";
+export { findMatchingBandProperty };
+import type { BandedDefinition, TableTheme, TableView } from "../../types";
+import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
+export type TableStyleSelectorProps = {
+    tables?: TableView[];
+    sheetId: number;
+    theme: SpreadsheetTheme;
+    selections: SelectionArea<SelectionAttributes>[];
+    activeCell: CellInterface;
+    onUpdateTable?(sheetId: number, tableId: TableView["id"], updatedTable: Partial<TableView>): void;
+    onCreateTable: CanvasGridProps["onCreateTable"];
+};
+type TableStyleList = [
+    theme: TableTheme,
+    firtBandStripeTint: number | undefined,
+    secondBandTint: number | undefined,
+    bandDefinition: BandedDefinition | undefined,
+    style?: React.CSSProperties
+];
+export declare const getTableBorderStyles: (showRowStripes: boolean | undefined, showColumnStripes: boolean | undefined, theme?: SpreadsheetTheme) => Map<string, TableStyleList[]>;
+export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, }: TableStyleSelectorProps) => React.JSX.Element>;
+//# sourceMappingURL=table-style-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAavE,OAAO,EAEL,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAMpC,OAAO,KAAK,EACV,gBAAgB,EAGhB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CACjD,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAiYzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gHAS1B,uBAAuB,uBAsI3B,CAAC"}