@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,106 @@
+import { ChevronDownIcon, ChevronUpIcon, Cross2Icon, } from "@rowsncolumns/icons";
+import { Button, IconButton, Input } from "@rowsncolumns/ui";
+import { cn } from "@rowsncolumns/ui";
+import { canUseDOM } from "@rowsncolumns/utils";
+import React, { useRef, useState } from "react";
+import { useSpreadsheet } from "../../atoms";
+import { useIsomorphicLayoutEffect } from "../../hooks";
+export const SheetSearch = ({ onSubmit, onReset, onNext, onPrevious, searchQuery, isActive, disablePrevious, disableNext, placeholder = "Find in sheet", totalResults = 0, currentResult = 0, showReplaceByDefault = false, onReplace, onReplaceAll, replacePlaceholder = "Replace with", }) => {
+    const inputRef = useRef(null);
+    const replaceRef = useRef(null);
+    const { focusSheet } = useSpreadsheet();
+    const supportsReplace = !!(onReplace || onReplaceAll);
+    const [isReplaceOpen, setReplaceOpen] = useState(supportsReplace && showReplaceByDefault);
+    const [matchCase, setMatchCase] = useState(false);
+    const [wholeWord, setWholeWord] = useState(false);
+    const [useRegex, setUseRegex] = useState(false);
+    const 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.
+    useIsomorphicLayoutEffect(() => {
+        const current = inputRef.current?.value;
+        if (current) {
+            onSubmit(current, { matchCase, wholeWord, 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).
+    useIsomorphicLayoutEffect(() => {
+        if (supportsReplace && showReplaceByDefault) {
+            setReplaceOpen(true);
+        }
+    }, [showReplaceByDefault, supportsReplace]);
+    const onResetSearch = () => {
+        onReset();
+        focusSheet?.();
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        if (replaceRef.current) {
+            replaceRef.current.value = "";
+        }
+        setReplaceOpen(supportsReplace && showReplaceByDefault);
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (canUseDOM && isActive) {
+            const handler = (e) => {
+                if (e.key === "Escape") {
+                    onResetSearch();
+                }
+            };
+            document.addEventListener("keydown", handler);
+            return () => {
+                document.removeEventListener("keydown", handler);
+            };
+        }
+    }, [isActive]);
+    if (!isActive) {
+        return null;
+    }
+    return (React.createElement("div", { className: cn("absolute top-0 right-0 w-[320px] transition-all font-system") },
+        React.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.createElement("div", { className: "flex gap-1 items-center" },
+                React.createElement("div", { className: "relative flex-1" },
+                    React.createElement(Input, { type: "text", className: cn("text-xs font-system", hasCounter ? "pr-14" : undefined), placeholder: placeholder, ref: inputRef, onChange: (e) => {
+                            onSubmit(e.target.value, { matchCase, wholeWord, useRegex });
+                        }, onKeyDown: (e) => {
+                            if (e.key === "Escape") {
+                                onResetSearch();
+                            }
+                            if (e.key === "Enter") {
+                                onNext();
+                            }
+                        }, autoFocus: true }),
+                    hasCounter ? (React.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.createElement(IconButton, { tooltip: "Previous match (Shift+Enter)", onClick: onPrevious, disabled: disablePrevious },
+                    React.createElement(ChevronUpIcon, null)),
+                React.createElement(IconButton, { tooltip: "Next match (Enter)", onClick: onNext, disabled: disableNext },
+                    React.createElement(ChevronDownIcon, null)),
+                React.createElement(IconButton, { tooltip: "Close (Esc)", onClick: onResetSearch },
+                    React.createElement(Cross2Icon, null))),
+            React.createElement("div", { className: "flex items-center gap-0.5" },
+                React.createElement(IconButton, { tooltip: "Match case", isActive: matchCase, onClick: () => setMatchCase((prev) => !prev), className: "text-xs font-mono px-1.5" }, "Aa"),
+                React.createElement(IconButton, { tooltip: useRegex
+                        ? "Whole word is disabled while Regex is on"
+                        : "Whole word", isActive: wholeWord, disabled: useRegex, onClick: () => setWholeWord((prev) => !prev), className: "text-xs font-mono px-1.5" }, "ab|"),
+                React.createElement(IconButton, { tooltip: "Use regular expression", isActive: useRegex, onClick: () => setUseRegex((prev) => !prev), className: "text-xs font-mono px-1.5" }, ".*")),
+            supportsReplace ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "h-px bg-rnc-border my-0.5" }),
+                !isReplaceOpen ? (React.createElement(Button, { onClick: () => setReplaceOpen(true), size: "xs", variant: "link", className: "self-start py-0 px-0 h-auto" }, "Replace\u2026")) : (React.createElement("div", { className: "flex gap-1 items-center" },
+                    React.createElement(Input, { type: "text", className: "text-xs font-system flex-1", placeholder: replacePlaceholder, ref: replaceRef, onKeyDown: (e) => {
+                            if (e.key === "Escape")
+                                onResetSearch();
+                        } }),
+                    onReplace ? (React.createElement(Button, { size: "xs", variant: "outline", onClick: () => {
+                            onReplace(replaceRef.current?.value ?? "");
+                        }, disabled: totalResults === 0, className: "py-1" }, "Replace")) : null,
+                    onReplaceAll ? (React.createElement(Button, { size: "xs", variant: "outline", onClick: () => {
+                            onReplaceAll(replaceRef.current?.value ?? "");
+                        }, disabled: totalResults === 0, className: "py-1" }, "All")) : null)))) : null)));
+};

package/dist/esm/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/esm/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/esm/components/sheet-status/index.js

@@ -0,0 +1,155 @@
+import { CheckIcon, TriangleDownIcon } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuTrigger, IconButton, useIsomorphicLayoutEffect, } from "@rowsncolumns/ui";
+import { isNil } from "@rowsncolumns/utils";
+import React, { useState } from "react";
+import { scheduleIdlePriorityCallback } from "../../api/scheduler";
+import { selectionToAddress } from "@rowsncolumns/utils";
+import { useFocusSheet, useFormulaModeValue, useSheetStatusDisplay, } from "../../atoms";
+import { StyledStack, StyledStackColumn } from "./style";
+const defaultStatus = [
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+];
+/**
+ * Sheet Status component
+ * @param param0
+ * @returns
+ */
+export const SheetStatus = ({ sheetId, activeCell, selections, merges, rowCount, columnCount, onRequestCalculate, }) => {
+    const [{ showAverage, showCount, showSum, showMin, showMax, showNumericalCount, }, setSheetStatusDisplay,] = useSheetStatusDisplay();
+    const isFormulaMode = useFormulaModeValue();
+    const [values, setValues] = useState(defaultStatus);
+    const focusSheet = useFocusSheet();
+    // Side effect
+    useIsomorphicLayoutEffect(() => {
+        const fetchSum = () => {
+            const { rowIndex, columnIndex } = activeCell;
+            getCalculatedValues(onRequestCalculate, selections, sheetId, merges, rowIndex, columnIndex, rowCount, columnCount).then(setValues);
+        };
+        if (!isFormulaMode && selections?.length) {
+            scheduleIdlePriorityCallback(() => fetchSum());
+        }
+    }, [isFormulaMode, selections, sheetId, rowCount, columnCount, activeCell]);
+    if (!values) {
+        return null;
+    }
+    // Exit early
+    if (!selections?.length) {
+        return null;
+    }
+    const [sum, count, average, min, max, numericalCount] = values;
+    return (React.createElement(StyledStack, { className: "gap-2 animate-fade-in font-system" },
+        showAverage && !isNil(average) ? (React.createElement(StyledStackColumn, null,
+            "Avg: ",
+            average?.toFixed(2))) : null,
+        showCount && !isNil(count) ? (React.createElement(StyledStackColumn, null,
+            "Count: ",
+            count)) : null,
+        showNumericalCount && !isNil(numericalCount) ? (React.createElement(StyledStackColumn, null,
+            "Numerical Count: ",
+            numericalCount)) : null,
+        showMin && !isNil(min) ? (React.createElement(StyledStackColumn, null,
+            "Min: ",
+            min?.toFixed(2))) : null,
+        showMax && !isNil(max) ? (React.createElement(StyledStackColumn, null,
+            "Max: ",
+            max?.toFixed(2))) : null,
+        showSum && !isNil(sum) ? (React.createElement(StyledStackColumn, null,
+            "Sum: ",
+            sum?.toFixed(2))) : null,
+        React.createElement(DropdownMenu, { modal: false },
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(IconButton, { className: "hover:bg-rnc-border focus:bg-rnc-border" },
+                    React.createElement(TriangleDownIcon, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "end", onFocusOutside: (event) => event.preventDefault(), onCloseAutoFocus: (event) => {
+                        event.preventDefault();
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuLabel, null, "Customize Status Bar"),
+                    React.createElement(DropdownMenuCheckboxItem, { checked: showAverage === true, onCheckedChange: (checked) => {
+                            setSheetStatusDisplay((prev) => ({
+                                ...prev,
+                                showAverage: checked,
+                            }));
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        React.createElement("div", { className: "flex-1 text-xs pr-4" }, "Average")),
+                    React.createElement(DropdownMenuCheckboxItem, { checked: showCount === true, onCheckedChange: (checked) => {
+                            setSheetStatusDisplay((prev) => ({
+                                ...prev,
+                                showCount: checked,
+                            }));
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        React.createElement("div", { className: "flex-1 text-xs pr-4" }, "Count")),
+                    React.createElement(DropdownMenuCheckboxItem, { checked: showNumericalCount === true, onCheckedChange: (checked) => {
+                            setSheetStatusDisplay((prev) => ({
+                                ...prev,
+                                showNumericalCount: checked,
+                            }));
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        React.createElement("div", { className: "flex-1 text-xs pr-4" }, "Numerical Count")),
+                    React.createElement(DropdownMenuCheckboxItem, { checked: showMin === true, onCheckedChange: (checked) => {
+                            setSheetStatusDisplay((prev) => ({
+                                ...prev,
+                                showMin: checked,
+                            }));
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        React.createElement("div", { className: "flex-1 text-xs pr-4" }, "Min")),
+                    React.createElement(DropdownMenuCheckboxItem, { checked: showMax === true, onCheckedChange: (checked) => {
+                            setSheetStatusDisplay((prev) => ({
+                                ...prev,
+                                showMax: checked,
+                            }));
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        React.createElement("div", { className: "flex-1 text-xs pr-4" }, "Max")),
+                    React.createElement(DropdownMenuCheckboxItem, { checked: showSum === true, onCheckedChange: (checked) => {
+                            setSheetStatusDisplay((prev) => ({
+                                ...prev,
+                                showSum: checked,
+                            }));
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        React.createElement("div", { className: "flex-1 text-xs pr-4" }, "Sum")))))));
+};
+/**
+ * Get all numerical values from the calculator
+ * @param onRequestCalculate
+ * @param selections
+ * @param sheetId
+ * @param rowIndex
+ * @param columnIndex
+ * @param rowCount
+ * @param columnCount
+ * @returns
+ */
+export const getCalculatedValues = async (onRequestCalculate, selections, sheetId, merges, rowIndex, columnIndex, rowCount, columnCount) => {
+    if (!selections?.length || !onRequestCalculate) {
+        return defaultStatus;
+    }
+    const selectionFormula = selections?.map((sel) => selectionToAddress(sel, undefined, merges, rowCount, columnCount));
+    const statsFormula = `=SELECTION_STATUS(${selectionFormula})`;
+    const result = await onRequestCalculate(statsFormula, sheetId, rowIndex, columnIndex, {
+        isArray: true,
+        disablePreview: true,
+    });
+    // Formula errors resolve as FormulaError values rather than the
+    // stats tuple — show nothing instead of destructuring an error.
+    return Array.isArray(result)
+        ? result
+        : defaultStatus;
+};

package/dist/esm/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/esm/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/esm/components/sheet-status/style.js

@@ -0,0 +1,7 @@
+import { Stack } from "@rowsncolumns/ui";
+import { cn } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledStackColumn = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("text-xs py-1 px-2 text-rnc-foreground bg-rnc-background rounded-sm", className), ...props })));
+StyledStackColumn.displayName = "StyledStackColumn";
+export const StyledStack = React.forwardRef(({ className, ...props }, ref) => (React.createElement(Stack, { ref: ref, className: cn("flex ml-auto pr-2 place-items-center", className), ...props })));
+StyledStack.displayName = "StyledStack";

package/dist/esm/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/esm/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/esm/components/sheet-switcher/index.js

@@ -0,0 +1,33 @@
+import { CheckIcon, HamburgerMenuIcon } from "@rowsncolumns/icons";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, IconButton, Popover, PopoverContent, PopoverTrigger, } from "@rowsncolumns/ui";
+import { sortSheetsByIndex } from "@rowsncolumns/utils";
+import React, { memo, useMemo, useState } from "react";
+import { useFocusSheet } from "../../atoms";
+function SheetSwitcherComponent({ sheets, onChangeActiveSheet, onShowSheet, activeSheetId, }) {
+    const sortedSheets = useMemo(() => sortSheetsByIndex(sheets, true), [sheets]);
+    const focusSheet = useFocusSheet();
+    const [open, setOpen] = useState(false);
+    return (React.createElement(Popover, { open: open, onOpenChange: setOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { tooltip: "All sheets", className: "hover:bg-rnc-border focus:bg-rnc-border" },
+                React.createElement(HamburgerMenuIcon, null))),
+        React.createElement(PopoverContent, { align: "start", side: "top", className: "w-[200px] p-0" },
+            React.createElement(Command, null,
+                React.createElement(CommandInput, { placeholder: "Search sheets..." }),
+                React.createElement(CommandList, null,
+                    React.createElement(CommandEmpty, null, "No sheets found."),
+                    React.createElement(CommandGroup, null, sortedSheets.map(({ title, sheetId, hidden }) => {
+                        const isActive = sheetId === activeSheetId;
+                        return (React.createElement(CommandItem, { key: sheetId, value: title, onSelect: () => {
+                                if (hidden) {
+                                    onShowSheet?.(sheetId);
+                                }
+                                onChangeActiveSheet?.(sheetId);
+                                focusSheet?.();
+                                setOpen(false);
+                            } },
+                            React.createElement(CheckIcon, { className: isActive ? "opacity-100" : "opacity-0" }),
+                            React.createElement("span", { className: hidden ? "opacity-40" : undefined }, title)));
+                    })))))));
+}
+export const SheetSwitcher = memo(SheetSwitcherComponent);

package/dist/esm/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/esm/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/esm/components/sheet-switcher/new-sheet-button.js

@@ -0,0 +1,7 @@
+import { PlusIcon } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+export const NewSheetButton = (props) => {
+    return (React.createElement(IconButton, { ...props, className: "hover:bg-rnc-border focus:bg-rnc-border", tooltip: "Add a new sheet" },
+        React.createElement(PlusIcon, null)));
+};

package/dist/esm/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/esm/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/esm/components/sheet-tabs/context-menu.js

@@ -0,0 +1,50 @@
+import { ChevronRightIcon } from "@rowsncolumns/icons";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownRightSlot, } from "@rowsncolumns/ui";
+import React from "react";
+import { ColorSelector } from "../toolbar/color-selector";
+import { StyledColorPickerWrapper } from "./style";
+export const SheetTabContextMenu = ({ sheetId, canDelete, canHide, canMoveRight, canMoveLeft, isProtected, tabColor, theme, userDefinedColors, hiddenSheets, ColorSelector: ColorSelectorComponent = ColorSelector, onRequestClose, onAddUserDefinedColor, onMoveSheet, onHideSheet, onShowSheet, onRequestRename, onDeleteSheet, onDuplicateSheet, onProtectSheet, onUnProtectSheet, onChangeSheetTabColor, }) => {
+    return (React.createElement(DropdownMenuPortal, null,
+        React.createElement(DropdownMenuContent, { align: "start" },
+            React.createElement(DropdownMenuItem, { onClick: () => onDeleteSheet?.(sheetId), disabled: !canDelete }, "Delete"),
+            React.createElement(DropdownMenuItem, { onClick: () => {
+                    onDuplicateSheet?.(sheetId);
+                } }, "Duplicate"),
+            React.createElement(DropdownMenuItem, { onClick: () => onRequestRename?.(sheetId) }, "Rename"),
+            React.createElement(DropdownMenuSub, null,
+                React.createElement(DropdownMenuSubTrigger, null,
+                    "Change color",
+                    React.createElement(DropdownRightSlot, null,
+                        React.createElement(ChevronRightIcon, null))),
+                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    React.createElement(StyledColorPickerWrapper, null,
+                        React.createElement(ColorSelectorComponent, { color: tabColor, theme: theme, resetButtonTitle: "Reset", onChange: (color) => {
+                                // Close context menu
+                                onRequestClose?.();
+                                onChangeSheetTabColor?.(sheetId, color);
+                            }, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor })))),
+            React.createElement(DropdownMenuItem, { onClick: () => isProtected
+                    ? onUnProtectSheet?.(sheetId)
+                    : onProtectSheet?.(sheetId) },
+                isProtected ? "Unlock" : "Protect",
+                " sheet"),
+            React.createElement(DropdownMenuItem, { onClick: () => {
+                    onHideSheet?.(sheetId);
+                }, disabled: !canHide }, "Hide sheet"),
+            hiddenSheets && hiddenSheets.length > 0 && onShowSheet ? (React.createElement(DropdownMenuSub, null,
+                React.createElement(DropdownMenuSubTrigger, null,
+                    "Hidden sheets",
+                    React.createElement(DropdownRightSlot, null,
+                        React.createElement(ChevronRightIcon, null))),
+                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, hiddenSheets.map((entry) => (React.createElement(DropdownMenuItem, { key: entry.sheetId, onClick: () => {
+                        onShowSheet(entry.sheetId);
+                        onRequestClose?.();
+                    } }, entry.title)))))) : null,
+            React.createElement(DropdownMenuSeparator, null),
+            React.createElement(DropdownMenuItem, { onClick: () => {
+                    onMoveSheet?.(sheetId, "right");
+                }, disabled: !canMoveRight }, "Move right"),
+            React.createElement(DropdownMenuItem, { onClick: () => {
+                    onMoveSheet?.(sheetId, "left");
+                }, disabled: !canMoveLeft }, "Move left"))));
+};

package/dist/esm/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/esm/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"}