@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/sheet-search/index.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetSearch = 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 utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var hooks_1 = require("../../hooks");
+var SheetSearch = function (_a) {
+    var onSubmit = _a.onSubmit, onReset = _a.onReset, onNext = _a.onNext, onPrevious = _a.onPrevious, searchQuery = _a.searchQuery, isActive = _a.isActive, disablePrevious = _a.disablePrevious, disableNext = _a.disableNext, _b = _a.placeholder, placeholder = _b === void 0 ? "Find in sheet" : _b, _c = _a.totalResults, totalResults = _c === void 0 ? 0 : _c, _d = _a.currentResult, currentResult = _d === void 0 ? 0 : _d, _e = _a.showReplaceByDefault, showReplaceByDefault = _e === void 0 ? false : _e, onReplace = _a.onReplace, onReplaceAll = _a.onReplaceAll, _f = _a.replacePlaceholder, replacePlaceholder = _f === void 0 ? "Replace with" : _f;
+    var inputRef = (0, react_1.useRef)(null);
+    var replaceRef = (0, react_1.useRef)(null);
+    var focusSheet = (0, atoms_1.useSpreadsheet)().focusSheet;
+    var supportsReplace = !!(onReplace || onReplaceAll);
+    var _g = tslib_1.__read((0, react_1.useState)(supportsReplace && showReplaceByDefault), 2), isReplaceOpen = _g[0], setReplaceOpen = _g[1];
+    var _h = tslib_1.__read((0, react_1.useState)(false), 2), matchCase = _h[0], setMatchCase = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(false), 2), wholeWord = _j[0], setWholeWord = _j[1];
+    var _k = tslib_1.__read((0, react_1.useState)(false), 2), useRegex = _k[0], setUseRegex = _k[1];
+    var hasCounter = !!searchQuery || totalResults > 0;
+    // Re-run search whenever the toggles flip — without this the user
+    // would need to retype the query for the new match settings to apply.
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        var current = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        if (current) {
+            onSubmit(current, { matchCase: matchCase, wholeWord: wholeWord, useRegex: useRegex });
+        }
+        // We intentionally depend only on toggles — input changes already
+        // call onSubmit directly from the onChange handler.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [matchCase, wholeWord, useRegex]);
+    // Sync open state when the host flips showReplaceByDefault (e.g. user
+    // hit Cmd+H while the Find pane was already open).
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        if (supportsReplace && showReplaceByDefault) {
+            setReplaceOpen(true);
+        }
+    }, [showReplaceByDefault, supportsReplace]);
+    var onResetSearch = function () {
+        onReset();
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        if (replaceRef.current) {
+            replaceRef.current.value = "";
+        }
+        setReplaceOpen(supportsReplace && showReplaceByDefault);
+    };
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        if (utils_1.canUseDOM && isActive) {
+            var handler_1 = function (e) {
+                if (e.key === "Escape") {
+                    onResetSearch();
+                }
+            };
+            document.addEventListener("keydown", handler_1);
+            return function () {
+                document.removeEventListener("keydown", handler_1);
+            };
+        }
+    }, [isActive]);
+    if (!isActive) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: (0, ui_2.cn)("absolute top-0 right-0 w-[320px] transition-all font-system") },
+        react_1.default.createElement("div", { className: "flex flex-col p-2 bg-rnc-background border-rnc-border border-solid border-[1px] rounded-sm rounded-tl-none rounded-tr-none gap-1.5 shadow-sm" },
+            react_1.default.createElement("div", { className: "flex gap-1 items-center" },
+                react_1.default.createElement("div", { className: "relative flex-1" },
+                    react_1.default.createElement(ui_1.Input, { type: "text", className: (0, ui_2.cn)("text-xs font-system", hasCounter ? "pr-14" : undefined), placeholder: placeholder, ref: inputRef, onChange: function (e) {
+                            onSubmit(e.target.value, { matchCase: matchCase, wholeWord: wholeWord, useRegex: useRegex });
+                        }, onKeyDown: function (e) {
+                            if (e.key === "Escape") {
+                                onResetSearch();
+                            }
+                            if (e.key === "Enter") {
+                                onNext();
+                            }
+                        }, autoFocus: true }),
+                    hasCounter ? (react_1.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-[11px] leading-none text-rnc-muted-foreground pointer-events-none tabular-nums" },
+                        currentResult,
+                        " of ",
+                        totalResults)) : null),
+                react_1.default.createElement(ui_1.IconButton, { tooltip: "Previous match (Shift+Enter)", onClick: onPrevious, disabled: disablePrevious },
+                    react_1.default.createElement(icons_1.ChevronUpIcon, null)),
+                react_1.default.createElement(ui_1.IconButton, { tooltip: "Next match (Enter)", onClick: onNext, disabled: disableNext },
+                    react_1.default.createElement(icons_1.ChevronDownIcon, null)),
+                react_1.default.createElement(ui_1.IconButton, { tooltip: "Close (Esc)", onClick: onResetSearch },
+                    react_1.default.createElement(icons_1.Cross2Icon, null))),
+            react_1.default.createElement("div", { className: "flex items-center gap-0.5" },
+                react_1.default.createElement(ui_1.IconButton, { tooltip: "Match case", isActive: matchCase, onClick: function () { return setMatchCase(function (prev) { return !prev; }); }, className: "text-xs font-mono px-1.5" }, "Aa"),
+                react_1.default.createElement(ui_1.IconButton, { tooltip: useRegex
+                        ? "Whole word is disabled while Regex is on"
+                        : "Whole word", isActive: wholeWord, disabled: useRegex, onClick: function () { return setWholeWord(function (prev) { return !prev; }); }, className: "text-xs font-mono px-1.5" }, "ab|"),
+                react_1.default.createElement(ui_1.IconButton, { tooltip: "Use regular expression", isActive: useRegex, onClick: function () { return setUseRegex(function (prev) { return !prev; }); }, className: "text-xs font-mono px-1.5" }, ".*")),
+            supportsReplace ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "h-px bg-rnc-border my-0.5" }),
+                !isReplaceOpen ? (react_1.default.createElement(ui_1.Button, { onClick: function () { return setReplaceOpen(true); }, size: "xs", variant: "link", className: "self-start py-0 px-0 h-auto" }, "Replace\u2026")) : (react_1.default.createElement("div", { className: "flex gap-1 items-center" },
+                    react_1.default.createElement(ui_1.Input, { type: "text", className: "text-xs font-system flex-1", placeholder: replacePlaceholder, ref: replaceRef, onKeyDown: function (e) {
+                            if (e.key === "Escape")
+                                onResetSearch();
+                        } }),
+                    onReplace ? (react_1.default.createElement(ui_1.Button, { size: "xs", variant: "outline", onClick: function () {
+                            var _a, _b;
+                            onReplace((_b = (_a = replaceRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+                        }, disabled: totalResults === 0, className: "py-1" }, "Replace")) : null,
+                    onReplaceAll ? (react_1.default.createElement(ui_1.Button, { size: "xs", variant: "outline", onClick: function () {
+                            var _a, _b;
+                            onReplaceAll((_b = (_a = replaceRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+                        }, disabled: totalResults === 0, className: "py-1" }, "All")) : null)))) : null)));
+};
+exports.SheetSearch = SheetSearch;

package/dist/cjs/components/sheet-status/index.d.ts

@@ -0,0 +1,40 @@
+import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps, SelectionAttributes } from "../canvas-grid/typings";
+type SheetStatusProps = {
+    sheetId: number;
+    activeCell: CellInterface;
+    selections?: SelectionArea<SelectionAttributes>[];
+    merges?: GridRange[] | null;
+    rowCount: number;
+    columnCount: number;
+    onRequestCalculate: CanvasGridProps["onRequestCalculate"];
+};
+type SheetStatus = [
+    number | undefined,
+    number | undefined,
+    number | undefined,
+    number | undefined,
+    number | undefined,
+    number | undefined
+];
+/**
+ * Sheet Status component
+ * @param param0
+ * @returns
+ */
+export declare const SheetStatus: ({ sheetId, activeCell, selections, merges, rowCount, columnCount, onRequestCalculate, }: SheetStatusProps) => React.JSX.Element | null;
+/**
+ * Get all numerical values from the calculator
+ * @param onRequestCalculate
+ * @param selections
+ * @param sheetId
+ * @param rowIndex
+ * @param columnIndex
+ * @param rowCount
+ * @param columnCount
+ * @returns
+ */
+export declare const getCalculatedValues: (onRequestCalculate: CanvasGridProps["onRequestCalculate"], selections: SelectionArea<SelectionAttributes>[] | undefined, sheetId: number, merges: GridRange[] | undefined | null, rowIndex: number, columnIndex: number, rowCount: number, columnCount: number) => Promise<SheetStatus | undefined>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/sheet-status/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sheet-status/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAc5B,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAGhC,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC3D,CAAC;AAGF,KAAK,WAAW,GAAG;IACjB,MAAM,GAAG,SAAS;IAClB,MAAM,GAAG,SAAS;IAClB,MAAM,GAAG,SAAS;IAClB,MAAM,GAAG,SAAS;IAClB,MAAM,GAAG,SAAS;IAClB,MAAM,GAAG,SAAS;CACnB,CAAC;AAUF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,yFAQzB,gBAAgB,6BAoLlB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,GAC9B,oBAAoB,eAAe,CAAC,oBAAoB,CAAC,EACzD,YAAY,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,SAAS,EAC5D,SAAS,MAAM,EACf,QAAQ,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,EACtC,UAAU,MAAM,EAChB,aAAa,MAAM,EACnB,UAAU,MAAM,EAChB,aAAa,MAAM,KAClB,OAAO,CAAC,WAAW,GAAG,SAAS,CAwBjC,CAAC"}

package/dist/cjs/components/sheet-status/index.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCalculatedValues = exports.SheetStatus = 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 scheduler_1 = require("../../api/scheduler");
+var utils_2 = require("@rowsncolumns/utils");
+var atoms_1 = require("../../atoms");
+var style_1 = require("./style");
+var defaultStatus = [
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+];
+/**
+ * Sheet Status component
+ * @param param0
+ * @returns
+ */
+var SheetStatus = function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, merges = _a.merges, rowCount = _a.rowCount, columnCount = _a.columnCount, onRequestCalculate = _a.onRequestCalculate;
+    var _b = tslib_1.__read((0, atoms_1.useSheetStatusDisplay)(), 2), _c = _b[0], showAverage = _c.showAverage, showCount = _c.showCount, showSum = _c.showSum, showMin = _c.showMin, showMax = _c.showMax, showNumericalCount = _c.showNumericalCount, setSheetStatusDisplay = _b[1];
+    var isFormulaMode = (0, atoms_1.useFormulaModeValue)();
+    var _d = tslib_1.__read((0, react_1.useState)(defaultStatus), 2), values = _d[0], setValues = _d[1];
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    // Side effect
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        var fetchSum = function () {
+            var rowIndex = activeCell.rowIndex, columnIndex = activeCell.columnIndex;
+            (0, exports.getCalculatedValues)(onRequestCalculate, selections, sheetId, merges, rowIndex, columnIndex, rowCount, columnCount).then(setValues);
+        };
+        if (!isFormulaMode && (selections === null || selections === void 0 ? void 0 : selections.length)) {
+            (0, scheduler_1.scheduleIdlePriorityCallback)(function () { return fetchSum(); });
+        }
+    }, [isFormulaMode, selections, sheetId, rowCount, columnCount, activeCell]);
+    if (!values) {
+        return null;
+    }
+    // Exit early
+    if (!(selections === null || selections === void 0 ? void 0 : selections.length)) {
+        return null;
+    }
+    var _e = tslib_1.__read(values, 6), sum = _e[0], count = _e[1], average = _e[2], min = _e[3], max = _e[4], numericalCount = _e[5];
+    return (react_1.default.createElement(style_1.StyledStack, { className: "gap-2 animate-fade-in font-system" },
+        showAverage && !(0, utils_1.isNil)(average) ? (react_1.default.createElement(style_1.StyledStackColumn, null,
+            "Avg: ", average === null || average === void 0 ? void 0 :
+            average.toFixed(2))) : null,
+        showCount && !(0, utils_1.isNil)(count) ? (react_1.default.createElement(style_1.StyledStackColumn, null,
+            "Count: ",
+            count)) : null,
+        showNumericalCount && !(0, utils_1.isNil)(numericalCount) ? (react_1.default.createElement(style_1.StyledStackColumn, null,
+            "Numerical Count: ",
+            numericalCount)) : null,
+        showMin && !(0, utils_1.isNil)(min) ? (react_1.default.createElement(style_1.StyledStackColumn, null,
+            "Min: ", min === null || min === void 0 ? void 0 :
+            min.toFixed(2))) : null,
+        showMax && !(0, utils_1.isNil)(max) ? (react_1.default.createElement(style_1.StyledStackColumn, null,
+            "Max: ", max === null || max === void 0 ? void 0 :
+            max.toFixed(2))) : null,
+        showSum && !(0, utils_1.isNil)(sum) ? (react_1.default.createElement(style_1.StyledStackColumn, null,
+            "Sum: ", sum === null || sum === void 0 ? void 0 :
+            sum.toFixed(2))) : null,
+        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, { className: "hover:bg-rnc-border focus:bg-rnc-border" },
+                    react_1.default.createElement(icons_1.TriangleDownIcon, null))),
+            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                react_1.default.createElement(ui_1.DropdownMenuContent, { align: "end", onFocusOutside: function (event) { return event.preventDefault(); }, onCloseAutoFocus: function (event) {
+                        event.preventDefault();
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuLabel, null, "Customize Status Bar"),
+                    react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: showAverage === true, onCheckedChange: function (checked) {
+                            setSheetStatusDisplay(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { showAverage: checked })); });
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, "Average")),
+                    react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: showCount === true, onCheckedChange: function (checked) {
+                            setSheetStatusDisplay(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { showCount: checked })); });
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, "Count")),
+                    react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: showNumericalCount === true, onCheckedChange: function (checked) {
+                            setSheetStatusDisplay(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { showNumericalCount: checked })); });
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, "Numerical Count")),
+                    react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: showMin === true, onCheckedChange: function (checked) {
+                            setSheetStatusDisplay(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { showMin: checked })); });
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, "Min")),
+                    react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: showMax === true, onCheckedChange: function (checked) {
+                            setSheetStatusDisplay(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { showMax: checked })); });
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, "Max")),
+                    react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: showSum === true, onCheckedChange: function (checked) {
+                            setSheetStatusDisplay(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { showSum: checked })); });
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                            react_1.default.createElement(icons_1.CheckIcon, null)),
+                        react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, "Sum")))))));
+};
+exports.SheetStatus = SheetStatus;
+/**
+ * Get all numerical values from the calculator
+ * @param onRequestCalculate
+ * @param selections
+ * @param sheetId
+ * @param rowIndex
+ * @param columnIndex
+ * @param rowCount
+ * @param columnCount
+ * @returns
+ */
+var getCalculatedValues = function (onRequestCalculate, selections, sheetId, merges, rowIndex, columnIndex, rowCount, columnCount) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var selectionFormula, statsFormula, result;
+    return tslib_1.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!(selections === null || selections === void 0 ? void 0 : selections.length) || !onRequestCalculate) {
+                    return [2 /*return*/, defaultStatus];
+                }
+                selectionFormula = selections === null || selections === void 0 ? void 0 : selections.map(function (sel) {
+                    return (0, utils_2.selectionToAddress)(sel, undefined, merges, rowCount, columnCount);
+                });
+                statsFormula = "=SELECTION_STATUS(".concat(selectionFormula, ")");
+                return [4 /*yield*/, onRequestCalculate(statsFormula, sheetId, rowIndex, columnIndex, {
+                        isArray: true,
+                        disablePreview: true,
+                    })];
+            case 1:
+                result = _a.sent();
+                // Formula errors resolve as FormulaError values rather than the
+                // stats tuple — show nothing instead of destructuring an error.
+                return [2 /*return*/, Array.isArray(result)
+                        ? result
+                        : defaultStatus];
+        }
+    });
+}); };
+exports.getCalculatedValues = getCalculatedValues;

package/dist/cjs/components/sheet-status/style.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const StyledStackColumn: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledStack: React.ForwardRefExoticComponent<Omit<import("@rowsncolumns/ui").StackProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/cjs/components/sheet-status/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/sheet-status/style.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,iBAAiB,mKAY5B,CAAC;AAIH,eAAO,MAAM,WAAW,iKAStB,CAAC"}

package/dist/cjs/components/sheet-status/style.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledStack = exports.StyledStackColumn = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.StyledStackColumn = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref, className: (0, ui_2.cn)("text-xs py-1 px-2 text-rnc-foreground bg-rnc-background rounded-sm", className) }, props)));
+});
+exports.StyledStackColumn.displayName = "StyledStackColumn";
+exports.StyledStack = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(ui_1.Stack, tslib_1.__assign({ ref: ref, className: (0, ui_2.cn)("flex ml-auto pr-2 place-items-center", className) }, props)));
+});
+exports.StyledStack.displayName = "StyledStack";

package/dist/cjs/components/sheet-switcher/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { Sheet } from "../../types";
+type SheetSwitcherProps<S extends Sheet> = {
+    sheets: S[];
+    onChangeActiveSheet?(sheetId: number): void;
+    onShowSheet?(sheetId: number): void;
+    activeSheetId: number;
+};
+declare function SheetSwitcherComponent<S extends Sheet>({ sheets, onChangeActiveSheet, onShowSheet, activeSheetId, }: SheetSwitcherProps<S>): React.JSX.Element;
+export declare const SheetSwitcher: typeof SheetSwitcherComponent;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/sheet-switcher/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sheet-switcher/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,kBAAkB,CAAC,CAAC,SAAS,KAAK,IAAI;IACzC,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,mBAAmB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,iBAAS,sBAAsB,CAAC,CAAC,SAAS,KAAK,EAAE,EAC/C,MAAM,EACN,mBAAmB,EACnB,WAAW,EACX,aAAa,GACd,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAuDvB;AAED,eAAO,MAAM,aAAa,EAErB,OAAO,sBAAsB,CAAC"}

package/dist/cjs/components/sheet-switcher/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetSwitcher = 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 atoms_1 = require("../../atoms");
+function SheetSwitcherComponent(_a) {
+    var sheets = _a.sheets, onChangeActiveSheet = _a.onChangeActiveSheet, onShowSheet = _a.onShowSheet, activeSheetId = _a.activeSheetId;
+    var sortedSheets = (0, react_1.useMemo)(function () { return (0, utils_1.sortSheetsByIndex)(sheets, true); }, [sheets]);
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var _b = tslib_1.__read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
+    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: "All sheets", className: "hover:bg-rnc-border focus:bg-rnc-border" },
+                react_1.default.createElement(icons_1.HamburgerMenuIcon, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start", side: "top", className: "w-[200px] p-0" },
+            react_1.default.createElement(ui_1.Command, null,
+                react_1.default.createElement(ui_1.CommandInput, { placeholder: "Search sheets..." }),
+                react_1.default.createElement(ui_1.CommandList, null,
+                    react_1.default.createElement(ui_1.CommandEmpty, null, "No sheets found."),
+                    react_1.default.createElement(ui_1.CommandGroup, null, sortedSheets.map(function (_a) {
+                        var title = _a.title, sheetId = _a.sheetId, hidden = _a.hidden;
+                        var isActive = sheetId === activeSheetId;
+                        return (react_1.default.createElement(ui_1.CommandItem, { key: sheetId, value: title, onSelect: function () {
+                                if (hidden) {
+                                    onShowSheet === null || onShowSheet === void 0 ? void 0 : onShowSheet(sheetId);
+                                }
+                                onChangeActiveSheet === null || onChangeActiveSheet === void 0 ? void 0 : onChangeActiveSheet(sheetId);
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                                setOpen(false);
+                            } },
+                            react_1.default.createElement(icons_1.CheckIcon, { className: isActive ? "opacity-100" : "opacity-0" }),
+                            react_1.default.createElement("span", { className: hidden ? "opacity-40" : undefined }, title)));
+                    })))))));
+}
+exports.SheetSwitcher = (0, react_1.memo)(SheetSwitcherComponent);

package/dist/cjs/components/sheet-switcher/new-sheet-button.d.ts

@@ -0,0 +1,4 @@
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+export declare const NewSheetButton: (props: React.ComponentProps<typeof IconButton>) => React.JSX.Element;
+//# sourceMappingURL=new-sheet-button.d.ts.map

package/dist/cjs/components/sheet-switcher/new-sheet-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"new-sheet-button.d.ts","sourceRoot":"","sources":["../../../../components/sheet-switcher/new-sheet-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,sBAW/C,CAAC"}

package/dist/cjs/components/sheet-switcher/new-sheet-button.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewSheetButton = 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 NewSheetButton = function (props) {
+    return (react_1.default.createElement(ui_1.IconButton, tslib_1.__assign({}, props, { className: "hover:bg-rnc-border focus:bg-rnc-border", tooltip: "Add a new sheet" }),
+        react_1.default.createElement(icons_1.PlusIcon, null)));
+};
+exports.NewSheetButton = NewSheetButton;

package/dist/cjs/components/sheet-tabs/context-menu.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentType } from "react";
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelectorProps } from "../toolbar/color-selector";
+export type HiddenSheetEntry = {
+    sheetId: number;
+    title: string;
+};
+export type SheetTabContextMenuProps = {
+    sheetId: number;
+    canDelete?: boolean;
+    canHide?: boolean;
+    canMoveRight?: boolean;
+    canMoveLeft?: boolean;
+    isProtected?: boolean;
+    tabColor?: string;
+    theme: SpreadsheetTheme;
+    userDefinedColors?: string[];
+    /**
+     * Sheets currently hidden in the workbook. When present + non-empty
+     * the menu shows a "Hidden sheets ▸" submenu offering one-click
+     * unhide, matching Excel and Sheets behaviour.
+     */
+    hiddenSheets?: HiddenSheetEntry[];
+    /**
+     * Custom color selector component for the tab color picker
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+    onRequestClose?(): void;
+    onAddUserDefinedColor?(color: string): void;
+    onRequestRename?(sheetId: number): void;
+    onDeleteSheet?(sheetId: number): void;
+    onDuplicateSheet?(sheetId: number): void;
+    onHideSheet?(sheetId: number): void;
+    onShowSheet?(sheetId: number): void;
+    onMoveSheet?(sheetId: number, direction: "left" | "right"): void;
+    onProtectSheet?(sheetId: number): void;
+    onUnProtectSheet?(sheetId: number): void;
+    onChangeSheetTabColor?(sheetId: number, color: Color | undefined): void;
+};
+export declare const SheetTabContextMenu: ({ sheetId, canDelete, canHide, canMoveRight, canMoveLeft, isProtected, tabColor, theme, userDefinedColors, hiddenSheets, ColorSelector: ColorSelectorComponent, onRequestClose, onAddUserDefinedColor, onMoveSheet, onHideSheet, onShowSheet, onRequestRename, onDeleteSheet, onDuplicateSheet, onProtectSheet, onUnProtectSheet, onChangeSheetTabColor, }: SheetTabContextMenuProps) => React.JSX.Element;
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/cjs/components/sheet-tabs/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/context-menu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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,2BAA2B,CAAC;AAIpE,MAAM,MAAM,gBAAgB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAElE,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAClD,cAAc,CAAC,IAAI,IAAI,CAAC;IACxB,qBAAqB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,eAAe,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,gBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACjE,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,gBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,qBAAqB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;CACzE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,4VAuBjC,wBAAwB,sBA0G1B,CAAC"}

package/dist/cjs/components/sheet-tabs/context-menu.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetTabContextMenu = 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 color_selector_1 = require("../toolbar/color-selector");
+var style_1 = require("./style");
+var SheetTabContextMenu = function (_a) {
+    var sheetId = _a.sheetId, canDelete = _a.canDelete, canHide = _a.canHide, canMoveRight = _a.canMoveRight, canMoveLeft = _a.canMoveLeft, isProtected = _a.isProtected, tabColor = _a.tabColor, theme = _a.theme, userDefinedColors = _a.userDefinedColors, hiddenSheets = _a.hiddenSheets, _b = _a.ColorSelector, ColorSelectorComponent = _b === void 0 ? color_selector_1.ColorSelector : _b, onRequestClose = _a.onRequestClose, onAddUserDefinedColor = _a.onAddUserDefinedColor, onMoveSheet = _a.onMoveSheet, onHideSheet = _a.onHideSheet, onShowSheet = _a.onShowSheet, onRequestRename = _a.onRequestRename, onDeleteSheet = _a.onDeleteSheet, onDuplicateSheet = _a.onDuplicateSheet, onProtectSheet = _a.onProtectSheet, onUnProtectSheet = _a.onUnProtectSheet, onChangeSheetTabColor = _a.onChangeSheetTabColor;
+    return (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 () { return onDeleteSheet === null || onDeleteSheet === void 0 ? void 0 : onDeleteSheet(sheetId); }, disabled: !canDelete }, "Delete"),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                    onDuplicateSheet === null || onDuplicateSheet === void 0 ? void 0 : onDuplicateSheet(sheetId);
+                } }, "Duplicate"),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onRequestRename === null || onRequestRename === void 0 ? void 0 : onRequestRename(sheetId); } }, "Rename"),
+            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                    "Change color",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    react_1.default.createElement(style_1.StyledColorPickerWrapper, null,
+                        react_1.default.createElement(ColorSelectorComponent, { color: tabColor, theme: theme, resetButtonTitle: "Reset", onChange: function (color) {
+                                // Close context menu
+                                onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+                                onChangeSheetTabColor === null || onChangeSheetTabColor === void 0 ? void 0 : onChangeSheetTabColor(sheetId, color);
+                            }, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor })))),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                    return isProtected
+                        ? onUnProtectSheet === null || onUnProtectSheet === void 0 ? void 0 : onUnProtectSheet(sheetId)
+                        : onProtectSheet === null || onProtectSheet === void 0 ? void 0 : onProtectSheet(sheetId);
+                } },
+                isProtected ? "Unlock" : "Protect",
+                " sheet"),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                    onHideSheet === null || onHideSheet === void 0 ? void 0 : onHideSheet(sheetId);
+                }, disabled: !canHide }, "Hide sheet"),
+            hiddenSheets && hiddenSheets.length > 0 && onShowSheet ? (react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                    "Hidden sheets",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, hiddenSheets.map(function (entry) { return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: entry.sheetId, onClick: function () {
+                        onShowSheet(entry.sheetId);
+                        onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+                    } }, entry.title)); })))) : null,
+            react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                    onMoveSheet === null || onMoveSheet === void 0 ? void 0 : onMoveSheet(sheetId, "right");
+                }, disabled: !canMoveRight }, "Move right"),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                    onMoveSheet === null || onMoveSheet === void 0 ? void 0 : onMoveSheet(sheetId, "left");
+                }, disabled: !canMoveLeft }, "Move left"))));
+};
+exports.SheetTabContextMenu = SheetTabContextMenu;

package/dist/cjs/components/sheet-tabs/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Sheet } from "../../types";
+import type { SheetTabsProps } from "./types";
+/**
+ * Get initial sheet ID
+ * @param sheets
+ * @returns
+ */
+export declare const getInitialActiveSheetId: <S extends Sheet>(sheets: S[]) => number;
+/**
+ * Entry point to sheets component
+ * @param param0
+ * @returns
+ */
+declare function SheetTabsComponent<S extends Sheet>({ sheets, activeSheetId, onRenameSheet, protectedRanges, ContextMenu, ColorSelector, containerClassName, onMoveSheet, onHideSheet, onShowSheet, onChangeActiveSheet, onAddUserDefinedColor, onChangeSheetTabColor, onCopySheet, onDeleteSheet, onDuplicateSheet, onProtectSheet, onUnProtectSheet, tabClassName, userDefinedColors, theme, readonly, enableNavigationButton, }: SheetTabsProps<S>): React.JSX.Element;
+export declare const SheetTabs: typeof SheetTabsComponent;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/sheet-tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,KAAK,EAAE,QAAQ,CAAC,EAAE,KAClB,MACjD,CAAC;AAEF;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,KAAK,EAAE,EAC3C,MAAM,EACN,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAiC,EACjC,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,sBAA8B,GAC/B,EAAE,cAAc,CAAC,CAAC,CAAC,qBAoUnB;AAED,eAAO,MAAM,SAAS,EAA+B,OAAO,kBAAkB,CAAC"}