@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,217 @@
+import { closestCenter, DndContext, MouseSensor, TouchSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToParentElement, } from "@dnd-kit/modifiers";
+import { horizontalListSortingStrategy, SortableContext, } from "@dnd-kit/sortable";
+import { ChevronLeftIcon, ChevronRightIcon } from "@rowsncolumns/icons";
+import { IconButton, Separator } from "@rowsncolumns/ui";
+import { isNil, sortSheetsByIndex } from "@rowsncolumns/utils";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import React, { Fragment, memo } from "react";
+import { isProtectedSheet } from "../../api/validation";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+import { SheetTabContextMenu } from "./context-menu";
+import { SheetTab } from "./sheet-tab";
+import { StyledSheetTabWrapper } from "./style";
+/**
+ * Get initial sheet ID
+ * @param sheets
+ * @returns
+ */
+export const getInitialActiveSheetId = (sheets) => {
+    return sortSheetsByIndex(sheets)[0]?.sheetId;
+};
+/**
+ * Entry point to sheets component
+ * @param param0
+ * @returns
+ */
+function SheetTabsComponent({ sheets, activeSheetId, onRenameSheet, protectedRanges, ContextMenu = SheetTabContextMenu, ColorSelector, containerClassName, onMoveSheet, onHideSheet, onShowSheet, onChangeActiveSheet, onAddUserDefinedColor, onChangeSheetTabColor, onCopySheet, onDeleteSheet, onDuplicateSheet, onProtectSheet, onUnProtectSheet, tabClassName, userDefinedColors, theme, readonly, enableNavigationButton = false, }) {
+    const dndContextId = useId();
+    const sortedSheets = useMemo(() => sortSheetsByIndex(sheets), [sheets]);
+    const visibleSheets = useMemo(() => sortedSheets.filter((sheet) => !sheet.hidden), [sortedSheets]);
+    const visibleLen = visibleSheets.length;
+    // Pluck hidden sheets so the per-tab context menu can offer
+    // one-click unhide instead of forcing users into SheetSwitcher.
+    const hiddenSheets = useMemo(() => sortedSheets
+        // Excel parity: very-hidden sheets are NOT offered in the Unhide
+        // list — they're only reachable via code (the VBA object model).
+        .filter((sheet) => sheet.hidden && sheet.visibility !== "veryHidden")
+        .map((sheet) => ({
+        sheetId: sheet.sheetId,
+        title: sheet.title ?? `Sheet ${sheet.sheetId}`,
+    })), [sortedSheets]);
+    const canEditSheet = useCallback((sheetId) => {
+        if (readonly) {
+            return false;
+        }
+        return !isProtectedSheet(sheetId, protectedRanges);
+    }, [protectedRanges, readonly]);
+    const canRename = useCallback((sheetId, newName) => {
+        // Worksheet names cannot be empty or whitespace-only
+        if (isNil(newName) || newName.trim().length === 0) {
+            return false;
+        }
+        if (!canEditSheet(sheetId)) {
+            return false;
+        }
+        return !sheets.find((sheet) => sheet.title === newName);
+    }, [canEditSheet, sheets]);
+    const canDeleteSheet = useCallback((sheetId) => {
+        if (!canEditSheet(sheetId)) {
+            return false;
+        }
+        return visibleLen !== 1;
+    }, [canEditSheet, visibleLen]);
+    const canMoveToLeft = useCallback((sheetId, index) => {
+        if (!canEditSheet(sheetId)) {
+            return false;
+        }
+        return index !== 0;
+    }, [canEditSheet]);
+    const canMoveToRight = useCallback((sheetId, index) => {
+        if (!canEditSheet(sheetId)) {
+            return false;
+        }
+        return index !== visibleLen - 1;
+    }, [canEditSheet, visibleLen]);
+    /**
+     * Move sheet
+     */
+    const handleMoveSheet = useCallback((sheetId, direction) => {
+        const currentPosition = sortedSheets.findIndex((sheet) => sheet.sheetId === sheetId);
+        if (currentPosition !== -1) {
+            // Determine the new position, skipping hidden sheets
+            const counter = direction === "left" ? -1 : 1;
+            let newPosition = currentPosition;
+            do {
+                newPosition += counter;
+            } while (newPosition >= 0 &&
+                newPosition < sortedSheets.length &&
+                sortedSheets[newPosition].hidden === true);
+            if (newPosition === currentPosition ||
+                newPosition < 0 ||
+                newPosition >= sortedSheets.length) {
+                return;
+            }
+            onMoveSheet?.(sheetId, currentPosition, newPosition);
+        }
+    }, [sortedSheets, onMoveSheet]);
+    const scrollContainerRef = useRef(null);
+    const separatorRef = useRef(null);
+    const [scrollState, setScrollState] = useState({
+        canScrollLeft: false,
+        canScrollRight: false,
+    });
+    const updateScrollState = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container) {
+            setScrollState({ canScrollLeft: false, canScrollRight: false });
+            return;
+        }
+        const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+        setScrollState({
+            canScrollLeft: container.scrollLeft > 0,
+            canScrollRight: container.scrollLeft < maxScrollLeft - 1,
+        });
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        updateScrollState();
+        const container = scrollContainerRef.current;
+        if (!container) {
+            return;
+        }
+        const handleScroll = () => updateScrollState();
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        let resizeObserver;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(() => updateScrollState());
+            resizeObserver.observe(container);
+        }
+        return () => {
+            container.removeEventListener("scroll", handleScroll);
+            resizeObserver?.disconnect();
+        };
+    }, [updateScrollState, visibleLen]);
+    const scrollTabs = useCallback((direction) => {
+        const container = scrollContainerRef.current;
+        if (!container) {
+            return;
+        }
+        const tabs = Array.from(container.querySelectorAll("[data-sheet-tab]"));
+        if (!tabs.length) {
+            return;
+        }
+        const viewStart = container.scrollLeft;
+        const containerRect = container.getBoundingClientRect();
+        const tabLefts = tabs.map((tab) => {
+            const rect = tab.getBoundingClientRect();
+            return rect.left - containerRect.left + container.scrollLeft;
+        });
+        const tabWidths = tabs.map((tab) => tab.getBoundingClientRect().width);
+        const viewRight = viewStart + container.clientWidth;
+        const targetIndex = direction === "left"
+            ? tabs
+                .map((_, index) => index)
+                .reverse()
+                .find((index) => tabLefts[index] < viewStart - 1)
+            : tabs.findIndex((_, index) => tabLefts[index] + tabWidths[index] > viewRight + 1);
+        if (targetIndex === -1 || targetIndex === undefined) {
+            return;
+        }
+        const targetLeft = tabLefts[targetIndex] ?? 0;
+        const targetRight = targetLeft + (tabWidths[targetIndex] ?? 0);
+        const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+        let nextScrollLeft = targetLeft;
+        if (targetRight > viewRight) {
+            nextScrollLeft = Math.min(maxScrollLeft, targetRight - container.clientWidth);
+        }
+        if (targetLeft < viewStart) {
+            nextScrollLeft = targetLeft;
+        }
+        if (direction === "left") {
+            const separatorWidth = separatorRef.current?.getBoundingClientRect().width ?? 0;
+            if (separatorWidth > 0) {
+                nextScrollLeft = Math.max(0, nextScrollLeft - separatorWidth);
+            }
+        }
+        if (targetIndex === 0) {
+            nextScrollLeft = 0;
+        }
+        container.scrollTo({ left: nextScrollLeft, behavior: "smooth" });
+    }, []);
+    const sensors = useSensors(useSensor(MouseSensor, {
+        activationConstraint: { distance: 5 },
+    }), useSensor(TouchSensor, {
+        activationConstraint: { delay: 250, tolerance: 5 },
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!isNil(active.id) && !isNil(over?.id) && active.id !== over?.id) {
+            const currentPosition = sortedSheets.findIndex((sheet) => sheet.sheetId === active.id);
+            const newPosition = sortedSheets.findIndex((sheet) => sheet.sheetId === over?.id);
+            onMoveSheet?.(Number(active.id), currentPosition, newPosition);
+        }
+    };
+    return (React.createElement(DndContext, { id: dndContextId, sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToParentElement, restrictToHorizontalAxis] },
+        React.createElement(SortableContext, { items: visibleSheets.map((sheet) => sheet.sheetId), strategy: horizontalListSortingStrategy },
+            React.createElement("div", { className: "flex items-center min-w-0 flex-1" },
+                enableNavigationButton ? (React.createElement("div", { className: "flex items-center gap-1 px-1 pr-2" },
+                    React.createElement(IconButton, { "aria-label": "Scroll sheets left", tooltip: "Scroll sheets left", disabled: !scrollState.canScrollLeft, onClick: () => scrollTabs("left"), className: "hover:bg-rnc-border focus:bg-rnc-border" },
+                        React.createElement(ChevronLeftIcon, null)),
+                    React.createElement(IconButton, { "aria-label": "Scroll sheets right", tooltip: "Scroll sheets right", disabled: !scrollState.canScrollRight, onClick: () => scrollTabs("right"), className: "hover:bg-rnc-border focus:bg-rnc-border" },
+                        React.createElement(ChevronRightIcon, null)))) : null,
+                React.createElement(StyledSheetTabWrapper, { ref: scrollContainerRef, className: containerClassName },
+                    React.createElement(Separator, { ref: separatorRef, decorative: true, orientation: "vertical" }),
+                    visibleSheets.map(({ sheetId, title, tabColor }, index) => {
+                        const isSelected = sheetId === activeSheetId;
+                        const canMoveLeft = canMoveToLeft(sheetId, index);
+                        const canMoveRight = canMoveToRight(sheetId, index);
+                        const canHide = canDeleteSheet(sheetId);
+                        const canDelete = canDeleteSheet(sheetId);
+                        const isProtected = protectedRanges
+                            ? isProtectedSheet(sheetId, protectedRanges)
+                            : false;
+                        return (React.createElement(Fragment, { key: sheetId },
+                            React.createElement(SheetTab, { canDelete: canDelete, canHide: canHide, isSelected: isSelected, sheetId: sheetId, title: title, tabColor: tabColor, canMoveLeft: canMoveLeft, canMoveRight: canMoveRight, isProtected: isProtected, onRenameSheet: onRenameSheet, canRename: canRename, ContextMenu: ContextMenu, ColorSelector: ColorSelector, onMoveSheet: handleMoveSheet, onHideSheet: onHideSheet, onShowSheet: onShowSheet, hiddenSheets: hiddenSheets, onAddUserDefinedColor: onAddUserDefinedColor, onChangeSheetTabColor: onChangeSheetTabColor, onCopySheet: onCopySheet, onDeleteSheet: onDeleteSheet, onDuplicateSheet: onDuplicateSheet, onProtectSheet: onProtectSheet, onUnProtectSheet: onUnProtectSheet, userDefinedColors: userDefinedColors, tabClassName: tabClassName, onChangeActiveSheet: onChangeActiveSheet, theme: theme, readonly: readonly })));
+                    }))))));
+}
+export const SheetTabs = memo(SheetTabsComponent);

package/dist/esm/components/sheet-tabs/sheet-tab.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { Sheet } from "../../types";
+import type { SheetTabsProps } from "./types";
+type SheetTabProps<S extends Sheet> = Omit<SheetTabsProps<S>, "sheets" | "activeSheetId" | "onMoveSheet"> & Pick<Sheet, "title" | "sheetId" | "tabColor"> & {
+    isSelected?: boolean;
+    canDelete?: boolean;
+    canHide?: boolean;
+    canMoveLeft?: boolean;
+    canMoveRight?: boolean;
+    onMoveSheet?: (sheetId: number, direction: "left" | "right") => void;
+    canRename: (sheetId: number, newName: string | undefined) => boolean;
+    hiddenSheets?: {
+        sheetId: number;
+        title: string;
+    }[];
+};
+export declare const SheetTab: <S extends Sheet>(props: SheetTabProps<S> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=sheet-tab.d.ts.map

package/dist/esm/components/sheet-tabs/sheet-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-tab.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/sheet-tab.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAMlE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAQzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,aAAa,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,CACxC,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,eAAe,GAAG,aAAa,CAC3C,GACC,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACrE,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;IACrE,YAAY,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACrD,CAAC;AA0OJ,eAAO,MAAM,QAAQ,EAA0C,CAC7D,CAAC,SAAS,KAAK,EAEf,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC1D,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC"}

package/dist/esm/components/sheet-tabs/sheet-tab.js

@@ -0,0 +1,131 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { LockClosedIcon, TriangleDownIcon } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuTrigger, IconButton, Separator, } from "@rowsncolumns/ui";
+import { moveSelectionToEndOfActiveInput } from "@rowsncolumns/utils";
+import React, { forwardRef, memo, useRef, useState } from "react";
+import { useSpreadsheet } from "../../atoms";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+import { useMergeRefs } from "../../hooks/use-merge.refs";
+import { getStringifiedColor } from "../../themes";
+import { SheetTabContextMenu } from "./context-menu";
+import { StyledIconWrapper, StyledSheetTab, StyledSheetTabTitle, StyledTabColor, } from "./style";
+function SheetTabComponent({ title, sheetId, isSelected, onChangeActiveSheet, onRenameSheet, tabClassName, tabColor, theme, isProtected, onMoveSheet, onHideSheet, onShowSheet, onUnProtectSheet, onProtectSheet, onDeleteSheet, onDuplicateSheet, onChangeSheetTabColor, canDelete, canRename, canHide, canMoveRight, canMoveLeft, userDefinedColors, onAddUserDefinedColor, hiddenSheets, ContextMenu = SheetTabContextMenu, ColorSelector, readonly, }, forwardedRef) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const inputRef = useRef(null);
+    const isEditingRef = useRef(false);
+    const { focusSheet } = useSpreadsheet();
+    // For closure acccess
+    useIsomorphicLayoutEffect(() => {
+        isEditingRef.current = isEditing;
+    }, [isEditing]);
+    // Focus on the input when user tries to edit
+    useIsomorphicLayoutEffect(() => {
+        if (isEditing) {
+            inputRef.current?.focus();
+            requestAnimationFrame(() => {
+                moveSelectionToEndOfActiveInput();
+            });
+        }
+    }, [isEditing]);
+    const startEditing = () => {
+        if (!readonly) {
+            setIsEditing(true);
+        }
+    };
+    const cancelEditing = () => {
+        if (inputRef.current) {
+            inputRef.current.innerText = title;
+        }
+    };
+    const stopEditing = () => {
+        isEditingRef.current = false;
+        setIsEditing(false);
+        focusSheet?.();
+    };
+    const selectSheet = () => {
+        if (!isSelected) {
+            onChangeActiveSheet?.(sheetId);
+        }
+    };
+    const endEditing = () => {
+        if (!isEditingRef.current) {
+            return;
+        }
+        const value = inputRef.current?.innerText;
+        if (value !== title && canRename(sheetId, value)) {
+            onRenameSheet?.(sheetId, value ?? title, title);
+        }
+        else {
+            // Restore
+            if (inputRef.current) {
+                inputRef.current.innerText = title;
+            }
+        }
+        stopEditing();
+        // Keep focus on teh sheet
+        focusSheet?.();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            endEditing();
+        }
+        if (e.key === "Escape") {
+            stopEditing();
+            cancelEditing();
+        }
+    };
+    const handleBlur = () => {
+        if (isEditingRef.current) {
+            endEditing();
+        }
+        else {
+            stopEditing();
+        }
+        focusSheet?.();
+    };
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+        // Select sheet
+        selectSheet();
+        // Open menu
+        setIsOpen(true);
+    };
+    // Callback when user opens dropdown
+    const onOpenChange = (value) => {
+        if (value) {
+            selectSheet();
+        }
+        setIsOpen(value);
+    };
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: sheetId });
+    const style = {
+        transform: transform
+            ? CSS.Translate.toString({
+                ...transform,
+                y: 0,
+            })
+            : undefined,
+        transition,
+        zIndex: isDragging ? 1 : 0,
+    };
+    const mergedRef = useMergeRefs(forwardedRef, setNodeRef);
+    return (React.createElement(StyledSheetTab, { isSelected: isSelected, "data-sheet-tab": "true", onKeyDown: (e) => {
+            if (e.key === "Space" || e.key === "Enter")
+                selectSheet();
+        }, onPointerDown: selectSheet, onContextMenu: handleContextMenu, className: tabClassName, ref: mergedRef, style: style, ...attributes, ...listeners },
+        tabColor ? (React.createElement(StyledTabColor, { style: {
+                backgroundColor: getStringifiedColor(tabColor, theme),
+            } })) : null,
+        isProtected ? (React.createElement(StyledIconWrapper, null,
+            React.createElement(LockClosedIcon, null))) : null,
+        React.createElement(StyledSheetTabTitle, { role: "button", ref: inputRef, contentEditable: isEditing, onKeyDown: handleKeyDown, onDoubleClick: () => startEditing(), onBlur: handleBlur, suppressContentEditableWarning: true }, title),
+        isEditing || readonly ? null : (React.createElement(DropdownMenu, { modal: false, open: isOpen, onOpenChange: onOpenChange },
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(IconButton, null,
+                    React.createElement(TriangleDownIcon, null))),
+            React.createElement(ContextMenu, { sheetId: sheetId, theme: theme, ColorSelector: ColorSelector, userDefinedColors: userDefinedColors, canDelete: canDelete, canHide: canHide, canMoveLeft: canMoveLeft, canMoveRight: canMoveRight, isProtected: isProtected, hiddenSheets: hiddenSheets, onAddUserDefinedColor: onAddUserDefinedColor, onChangeSheetTabColor: onChangeSheetTabColor, onDeleteSheet: onDeleteSheet, onDuplicateSheet: onDuplicateSheet, onHideSheet: onHideSheet, onShowSheet: onShowSheet, onMoveSheet: onMoveSheet, onProtectSheet: onProtectSheet, onRequestClose: () => setIsOpen(false), onRequestRename: startEditing, onUnProtectSheet: onUnProtectSheet, tabColor: getStringifiedColor(tabColor, theme) }))),
+        React.createElement(Separator, { decorative: true, orientation: "vertical", className: "h-full -mr-2 ml-2" })));
+}
+export const SheetTab = memo(forwardRef(SheetTabComponent));

package/dist/esm/components/sheet-tabs/style.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const StyledColorPickerWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledSheetTabWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledSheetTab: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    isSelected?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledSheetTabTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledTabColor: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledIconWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/components/sheet-tabs/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,wBAAwB,mKAKnC,CAAC;AAIH,eAAO,MAAM,qBAAqB,mKAYhC,CAAC;AAIH,eAAO,MAAM,cAAc;iBAE8B,OAAO;wCAa9D,CAAC;AAIH,eAAO,MAAM,mBAAmB,mKAY9B,CAAC;AAIH,eAAO,MAAM,cAAc,mKASzB,CAAC;AAIH,eAAO,MAAM,iBAAiB,sKAS5B,CAAC"}

package/dist/esm/components/sheet-tabs/style.js

@@ -0,0 +1,16 @@
+import { cn } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledColorPickerWrapper = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("p-2", className), ...props })));
+StyledColorPickerWrapper.displayName = "StyledColorPickerWrapper";
+export const StyledSheetTabWrapper = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("flex flex-1 min-w-0 overflow-auto flex-nowrap whitespace-nowrap mr-1 rnc-hide-scrollbar [scrollbar-width:none] [-ms-overflow-style:none] relative", className), ...props })));
+StyledSheetTabWrapper.displayName = "StyledSheetTabWrapper";
+export const StyledSheetTab = React.forwardRef(({ className, isSelected, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("flex relative rounded-none items-center text-rnc-foreground min-h-[40px] hover:bg-rnc-border/40 focus:bg-rnc-border/40 pl-2 pr-2 font-system cursor-pointer", isSelected
+        ? "bg-rnc-background hover:bg-rnc-background focus:bg-rnc-background active:bg-rnc-background"
+        : undefined, className), ...props })));
+StyledSheetTab.displayName = "StyledSheetTab";
+export const StyledSheetTabTitle = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("p-1 text-sm flex place-items-center  select-none whitespace-nowrap", className), ...props })));
+StyledSheetTabTitle.displayName = "StyledSheetTabTitle";
+export const StyledTabColor = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("absolute left-0 right-0 bottom-0 h-1", className), ...props })));
+StyledTabColor.displayName = "StyledTabColor";
+export const StyledIconWrapper = React.forwardRef(({ className, ...props }, ref) => (React.createElement("span", { ref: ref, className: cn("mr-1 text-green-700 leading-none", className), ...props })));
+StyledIconWrapper.displayName = "StyledIconWrapper";

package/dist/esm/components/sheet-tabs/types.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentProps, ComponentType, ElementType } from "react";
+import type { Color, ProtectedRange, Sheet } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelector, ColorSelectorProps } from "../toolbar/color-selector";
+import type { SheetTabContextMenuProps } from "./context-menu";
+export type SheetTabsProps<S extends Sheet> = {
+    sheets: S[];
+    activeSheetId: number;
+    theme: SpreadsheetTheme;
+    protectedRanges?: ProtectedRange[];
+    containerClassName?: string;
+    tabClassName?: string;
+    /**
+     * Indicates all the sheet and tabs are readonly
+     */
+    readonly?: boolean;
+    /**
+     * Custom context menu for sheet tabs
+     */
+    ContextMenu?: ElementType<SheetTabContextMenuProps>;
+    /**
+     * Custom color selector for the tab color picker
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+    onChangeActiveSheet?(sheetId: number): void;
+    onDeleteSheet?(sheetId: number): void;
+    onHideSheet?(sheetId: number): void;
+    /**
+     * Unhide a previously hidden sheet. Surfaced from the tab
+     * right-click menu as "Hidden sheets ▸". Falls back to the
+     * standalone SheetSwitcher when omitted.
+     */
+    onShowSheet?(sheetId: number): void;
+    onProtectSheet?(sheetId: number): void;
+    onUnProtectSheet?(sheetId: number): void;
+    onDuplicateSheet?(sheetId: number): void;
+    onChangeSheetTabColor?(sheetId: number, color: Color | undefined): void;
+    onRenameSheet?(sheetId: number, newName: string, oldName: string): void;
+    onMoveSheet?(sheetId: number, fromPosition: number, newPosition: number): void;
+    onCopySheet?(sheetId: number, sink: "new" | "existing"): void;
+    enableNavigationButton?: boolean;
+    isHidden?: boolean;
+    isProtected?: boolean;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/sheet-tabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/sheet-tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,KAAK,IAAI;IAC5C,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,wBAAwB,CAAC,CAAC;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAClD,mBAAmB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,aAAa,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,cAAc,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,gBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,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;IACxE,aAAa,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACxE,WAAW,CAAC,CACV,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,GAClB,IAAI,CAAC;IACR,WAAW,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,UAAU,GAAG,IAAI,CAAC;IAC9D,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC"}

package/dist/esm/components/sheet-tabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/sort-range-dialog/index.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import type { AvailableIcon } from "../filter-box";
+import type { SortSpecs } from "../../types";
+/**
+ * A column the user can sort on. `dimensionIndex` is the column's offset
+ * from the range/table's start column (the same value persisted in
+ * `SortSpecs.dimensionIndex`). The optional color/icon arrays power the
+ * "sort on color/icon" pickers for that column — when absent those modes
+ * are hidden for the column.
+ */
+export type SortDialogColumn = {
+    dimensionIndex: number;
+    label: string;
+    availableCellColors?: string[];
+    availableFontColors?: string[];
+    availableIcons?: AvailableIcon[];
+};
+export type SortDialogProps = {
+    /** Controls visibility. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** Columns available to sort on. */
+    columns: SortDialogColumn[];
+    /**
+     * Pre-defined custom orders (e.g. Mon, Tue, Wed…). Surfaced as
+     * selectable "sort by custom list" options. Typically the host's
+     * `customAutofillLists`.
+     */
+    customLists?: string[][];
+    /**
+     * Initial levels to seed the dialog with — e.g. the table's existing
+     * `sortSpecs`. When empty the dialog starts with one value level on the
+     * first column.
+     */
+    initialSpecs?: SortSpecs[];
+    /**
+     * Emits the assembled ordered `SortSpecs[]` (primary first, then
+     * tiebreakers). The host routes these to `onSortTable` / `onSortRange`.
+     * The dialog never touches state directly.
+     */
+    onApply(specs: SortSpecs[]): void;
+};
+/**
+ * Custom multi-level sort dialog. Mirrors Excel's "Sort…" dialog and
+ * Google Sheets' "Sort range — advanced". Each row is a sort level:
+ * pick a column, what to sort on (value / cell color / font color /
+ * icon), and the direction (A→Z / Z→A) or — for color/icon — the
+ * swatch to surface. Levels apply as "then by" tiebreakers in order.
+ *
+ * UI-only: the dialog never mutates state. It emits the assembled
+ * `SortSpecs[]` via `onApply`; the host disambiguates table vs range and
+ * routes through its existing sort callbacks.
+ */
+export declare const SortRangeDialog: React.MemoExoticComponent<({ open, onOpenChange, columns, customLists, initialSpecs, onApply, }: SortDialogProps) => React.JSX.Element>;
+/**
+ * Host-mounted, atom-driven wrapper around {@link SortRangeDialog}. Mount this
+ * once in the host (alongside the other editor dialogs); the filter box opens
+ * it via `useOpenSortDialog`. This indirection is required because the filter
+ * box lives inside a popover that unmounts when it closes — a dialog rendered
+ * there would be torn down before it could appear.
+ */
+export declare const SortRangeDialogHost: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/sort-range-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sort-range-dialog/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxD;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,oCAAoC;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;CACnC,CAAC;AA2DF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,mGAQvB,eAAe,uBAiVnB,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAe/B,CAAC"}