@rowsncolumns/spreadsheet 10.2.68

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

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

package/dist/cjs/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/cjs/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/cjs/components/sheet-tabs/sheet-tab.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetTab = void 0;
+var tslib_1 = require("tslib");
+var sortable_1 = require("@dnd-kit/sortable");
+var utilities_1 = require("@dnd-kit/utilities");
+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");
+var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
+var use_merge_refs_1 = require("../../hooks/use-merge.refs");
+var themes_1 = require("../../themes");
+var context_menu_1 = require("./context-menu");
+var style_1 = require("./style");
+function SheetTabComponent(_a, forwardedRef) {
+    var title = _a.title, sheetId = _a.sheetId, isSelected = _a.isSelected, onChangeActiveSheet = _a.onChangeActiveSheet, onRenameSheet = _a.onRenameSheet, tabClassName = _a.tabClassName, tabColor = _a.tabColor, theme = _a.theme, isProtected = _a.isProtected, onMoveSheet = _a.onMoveSheet, onHideSheet = _a.onHideSheet, onShowSheet = _a.onShowSheet, onUnProtectSheet = _a.onUnProtectSheet, onProtectSheet = _a.onProtectSheet, onDeleteSheet = _a.onDeleteSheet, onDuplicateSheet = _a.onDuplicateSheet, onChangeSheetTabColor = _a.onChangeSheetTabColor, canDelete = _a.canDelete, canRename = _a.canRename, canHide = _a.canHide, canMoveRight = _a.canMoveRight, canMoveLeft = _a.canMoveLeft, userDefinedColors = _a.userDefinedColors, onAddUserDefinedColor = _a.onAddUserDefinedColor, hiddenSheets = _a.hiddenSheets, _b = _a.ContextMenu, ContextMenu = _b === void 0 ? context_menu_1.SheetTabContextMenu : _b, ColorSelector = _a.ColorSelector, readonly = _a.readonly;
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), isEditing = _c[0], setIsEditing = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _d[0], setIsOpen = _d[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var isEditingRef = (0, react_1.useRef)(false);
+    var focusSheet = (0, atoms_1.useSpreadsheet)().focusSheet;
+    // For closure acccess
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        isEditingRef.current = isEditing;
+    }, [isEditing]);
+    // Focus on the input when user tries to edit
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        if (isEditing) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            requestAnimationFrame(function () {
+                (0, utils_1.moveSelectionToEndOfActiveInput)();
+            });
+        }
+    }, [isEditing]);
+    var startEditing = function () {
+        if (!readonly) {
+            setIsEditing(true);
+        }
+    };
+    var cancelEditing = function () {
+        if (inputRef.current) {
+            inputRef.current.innerText = title;
+        }
+    };
+    var stopEditing = function () {
+        isEditingRef.current = false;
+        setIsEditing(false);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    };
+    var selectSheet = function () {
+        if (!isSelected) {
+            onChangeActiveSheet === null || onChangeActiveSheet === void 0 ? void 0 : onChangeActiveSheet(sheetId);
+        }
+    };
+    var endEditing = function () {
+        var _a;
+        if (!isEditingRef.current) {
+            return;
+        }
+        var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
+        if (value !== title && canRename(sheetId, value)) {
+            onRenameSheet === null || onRenameSheet === void 0 ? void 0 : onRenameSheet(sheetId, value !== null && value !== void 0 ? value : title, title);
+        }
+        else {
+            // Restore
+            if (inputRef.current) {
+                inputRef.current.innerText = title;
+            }
+        }
+        stopEditing();
+        // Keep focus on teh sheet
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter") {
+            endEditing();
+        }
+        if (e.key === "Escape") {
+            stopEditing();
+            cancelEditing();
+        }
+    };
+    var handleBlur = function () {
+        if (isEditingRef.current) {
+            endEditing();
+        }
+        else {
+            stopEditing();
+        }
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    };
+    var handleContextMenu = function (e) {
+        e.preventDefault();
+        // Select sheet
+        selectSheet();
+        // Open menu
+        setIsOpen(true);
+    };
+    // Callback when user opens dropdown
+    var onOpenChange = function (value) {
+        if (value) {
+            selectSheet();
+        }
+        setIsOpen(value);
+    };
+    var _e = (0, sortable_1.useSortable)({ id: sheetId }), attributes = _e.attributes, listeners = _e.listeners, setNodeRef = _e.setNodeRef, transform = _e.transform, transition = _e.transition, isDragging = _e.isDragging;
+    var style = {
+        transform: transform
+            ? utilities_1.CSS.Translate.toString(tslib_1.__assign(tslib_1.__assign({}, transform), { y: 0 }))
+            : undefined,
+        transition: transition,
+        zIndex: isDragging ? 1 : 0,
+    };
+    var mergedRef = (0, use_merge_refs_1.useMergeRefs)(forwardedRef, setNodeRef);
+    return (react_1.default.createElement(style_1.StyledSheetTab, tslib_1.__assign({ isSelected: isSelected, "data-sheet-tab": "true", onKeyDown: function (e) {
+            if (e.key === "Space" || e.key === "Enter")
+                selectSheet();
+        }, onPointerDown: selectSheet, onContextMenu: handleContextMenu, className: tabClassName, ref: mergedRef, style: style }, attributes, listeners),
+        tabColor ? (react_1.default.createElement(style_1.StyledTabColor, { style: {
+                backgroundColor: (0, themes_1.getStringifiedColor)(tabColor, theme),
+            } })) : null,
+        isProtected ? (react_1.default.createElement(style_1.StyledIconWrapper, null,
+            react_1.default.createElement(icons_1.LockClosedIcon, null))) : null,
+        react_1.default.createElement(style_1.StyledSheetTabTitle, { role: "button", ref: inputRef, contentEditable: isEditing, onKeyDown: handleKeyDown, onDoubleClick: function () { return startEditing(); }, onBlur: handleBlur, suppressContentEditableWarning: true }, title),
+        isEditing || readonly ? null : (react_1.default.createElement(ui_1.DropdownMenu, { modal: false, open: isOpen, onOpenChange: onOpenChange },
+            react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+                react_1.default.createElement(ui_1.IconButton, null,
+                    react_1.default.createElement(icons_1.TriangleDownIcon, null))),
+            react_1.default.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: function () { return setIsOpen(false); }, onRequestRename: startEditing, onUnProtectSheet: onUnProtectSheet, tabColor: (0, themes_1.getStringifiedColor)(tabColor, theme) }))),
+        react_1.default.createElement(ui_1.Separator, { decorative: true, orientation: "vertical", className: "h-full -mr-2 ml-2" })));
+}
+exports.SheetTab = (0, react_1.memo)((0, react_1.forwardRef)(SheetTabComponent));

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIconWrapper = exports.StyledTabColor = exports.StyledSheetTabTitle = exports.StyledSheetTab = exports.StyledSheetTabWrapper = exports.StyledColorPickerWrapper = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.StyledColorPickerWrapper = 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_1.cn)("p-2", className) }, props)));
+});
+exports.StyledColorPickerWrapper.displayName = "StyledColorPickerWrapper";
+exports.StyledSheetTabWrapper = 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_1.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)));
+});
+exports.StyledSheetTabWrapper.displayName = "StyledSheetTabWrapper";
+exports.StyledSheetTab = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, isSelected = _a.isSelected, props = tslib_1.__rest(_a, ["className", "isSelected"]);
+    return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref, className: (0, ui_1.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)));
+});
+exports.StyledSheetTab.displayName = "StyledSheetTab";
+exports.StyledSheetTabTitle = 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_1.cn)("p-1 text-sm flex place-items-center  select-none whitespace-nowrap", className) }, props)));
+});
+exports.StyledSheetTabTitle.displayName = "StyledSheetTabTitle";
+exports.StyledTabColor = 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_1.cn)("absolute left-0 right-0 bottom-0 h-1", className) }, props)));
+});
+exports.StyledTabColor.displayName = "StyledTabColor";
+exports.StyledIconWrapper = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement("span", tslib_1.__assign({ ref: ref, className: (0, ui_1.cn)("mr-1 text-green-700 leading-none", className) }, props)));
+});
+exports.StyledIconWrapper.displayName = "StyledIconWrapper";

package/dist/cjs/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/cjs/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/cjs/components/sheet-tabs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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