@vuu-ui/vuu-ui-controls 3.0.0 → 3.1.0-beta.2

package/src/tabstrip/Tab.css.js

@@ -0,0 +1,148 @@
+const css = `
+.vuuTab {
+  --saltEditableLabel-padding: 0;
+  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
+  --saltInputLegacy-minWidth: 4em;
+  --saltEditableLabel-top: 2px;
+  --tab-background: var(--vuuTab-background, transparent);
+  --tab-cursor: pointer;
+  --tab-position: relative;
+  background: var(--tab-background);
+  border-color: var(--vuuTab-borderColor, transparent);
+  border-style: var(--vuuTab-borderStyle, none);
+  border-width: var(--vuuTab-borderWidth, 0px);
+  border-radius: var(--vuuTab-borderRadius, 0);
+  color: var(--salt-content-primary-foreground);
+  cursor: var(--vuuTab-cursor, var(--tab-cursor));
+  display: var(--tabstrip-display);
+  height: var(--vuuTabHeight, var(--tab-height));
+  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
+  margin: 0 var(--tab-spacing) 0 0;
+  min-width: var(--vuuTab-minWidth, 40px);
+  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));
+  position: var(--vuuTab-position, var(--tab-position));
+  -webkit-user-select: none;
+  user-select: none;
+  width: var(--tab-width);
+  outline: none;
+  align-self: stretch;
+  align-items: center;
+  gap: 8px;
+}
+
+.vuuTab-selected {
+  background: var(--vuuTab-background-selected, var(--tab-background));
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-navigable-fontWeight-active);
+}
+
+.vuuTab-main {
+  color: inherit;
+  cursor: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  border: none;
+  outline: none;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.vuuTabstrip.vuuOrientation-horizontal {
+  & .vuuTab-main {
+    height: calc(var(--tab-height) - var(--tab-thumb-height));
+    margin-bottom: var(--tab-thumb-height);
+  }
+}
+
+.vuuTab-closeable .vuuTab-main {
+  border-right: solid transparent var(--salt-size-unit);
+}
+
+.vuuTab .vuuTab-closeButton {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.vuuTab-close-icon {
+  display: none;
+}
+
+.salt-density-touch .vuuTab-close-icon, .salt-density-low .vuuTab-close-icon {
+  display: block;
+}
+
+.salt-density-touch .vuuTab-close-icon-small, .salt-density-low .vuuTab-close-icon-small {
+  display: none;
+}
+
+.vuuTab .vuuTab-text {
+  height: 100%;
+  line-height: var(--tab-height);
+  text-align: var(--salt-text-textAlign-embedded);
+  text-overflow: ellipsis;
+  top: var(--vuuTab-top, var(--tab-top, auto));
+  white-space: nowrap;
+  z-index: var(--salt-zIndex-default);
+  flex-direction: column;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.vuuTab .vuuTab-text:before {
+  content: attr(data-text);
+  visibility: hidden;
+  height: 0;
+  font-weight: var(--salt-navigable-fontWeight-active);
+  display: block;
+}
+
+.vuuTab.vuuFocusVisible {
+  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
+  outline-offset: -1px;
+  outline-width: 1px;
+  outline-style: dashed;
+}
+
+.vuuTab:before {
+  content: var(--tab-before-content, none);
+  content: "";
+  background: var(--tab-before-background);
+  height: var(--tab-before-height);
+  inset: var(--tab-before-inset);
+  width: var(--tab-before-width);
+  z-index: 1;
+  position: absolute;
+}
+
+.vuuTabstrip-draggingTab .vuuTab-selected:before {
+  --tab-before-content: "";
+  --tab-before-background: var(--salt-navigable-indicator-color-active);
+  --tab-before-height: var(--tab-thumb-height);
+  --tab-before-inset: var(--tab-activationIndicator-inset);
+  --tab-before-width: var(--tab-activationIndicator-thumb-width);
+}
+
+.vuuTab-selected:before {
+  --tab-before-content: "";
+  background: var(--salt-navigable-indicator-active);
+  height: var(--tab-thumb-height);
+  left: var(--tab-thumb-left);
+  bottom: 0;
+  top: var(--tab-thumb-top, auto);
+  transition: var(--tab-thumb-transition, none);
+  width: var(--tab-thumb-width, 100%);
+  position: absolute;
+}
+
+.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
+  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+}
+
+
+`;
+export default css;

package/src/tabstrip/Tab.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback, useRef } from "react";
+import { EditableLabel } from "../editable-label/index.js";
+import { TabMenu } from "./TabMenu.js";
+import Tab_0 from "./Tab.css";
+const classBase = "vuuTab";
+const noop = ()=>void 0;
+const Tab_Tab = /*#__PURE__*/ forwardRef(function({ ariaControls, children, className, closeable = false, dragging, editable = false, editing, focusVisible, index = -1, label, location, onClick, onClose, onEnterEditMode = noop, onExitEditMode = noop, onFocus: onFocusProp, onKeyUp, onMenuAction, onMenuClose, orientation, selected, showMenuButton = closeable || editable || Boolean(location), tabIndex, ...props }, ref) {
+    if (showMenuButton && "function" != typeof onMenuAction) throw Error("Tab onMenuAction must be provided if showMenuButton is set");
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tabstrip-tab",
+        css: Tab_0,
+        window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const editableRef = useRef(null);
+    const setForkRef = useForkRef(ref, rootRef);
+    const handleClick = useCallback((e)=>{
+        if (!editing) {
+            e.preventDefault();
+            onClick?.(e, index);
+        }
+    }, [
+        editing,
+        index,
+        onClick
+    ]);
+    const handleOnExitEditMode = (originalValue = "", editedValue = "", allowDeactivation = true)=>onExitEditMode(originalValue, editedValue, allowDeactivation, index);
+    const handleKeyUp = (e)=>{
+        switch(e.key){
+            case "Backspace":
+            case "Delete":
+                if (closeable) {
+                    e.stopPropagation();
+                    onClose && onClose(index);
+                }
+                break;
+            default:
+                onKeyUp && onKeyUp(e, index);
+        }
+    };
+    const getLabel = ()=>{
+        if (editable) return /*#__PURE__*/ jsx(EditableLabel, {
+            "data-embedded": true,
+            editing: editing,
+            defaultValue: label,
+            onEnterEditMode: onEnterEditMode,
+            onExitEditMode: handleOnExitEditMode,
+            ref: editableRef
+        }, label);
+        return label;
+    };
+    const handleFocus = (evt)=>{
+        if (editableRef.current) {
+            const editable = editableRef.current;
+            const input = editable.querySelector(".vuuEditableLabel-input");
+            input?.focus();
+        }
+        onFocusProp?.(evt);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        "aria-controls": ariaControls,
+        "aria-label": label,
+        "aria-selected": selected,
+        className: clsx(classBase, className, {
+            [`${classBase}-closeable`]: closeable,
+            "vuuDraggable-dragAway": dragging,
+            [`${classBase}-editing`]: editing,
+            [`${classBase}-selected`]: selected || void 0,
+            [`${classBase}-vertical`]: "vertical" === orientation,
+            ["vuuFocusVisible"]: focusVisible
+        }),
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onKeyUp: handleKeyUp,
+        ref: setForkRef,
+        role: "tab",
+        tabIndex: tabIndex,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-main`,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: `${classBase}-text`,
+                    "data-text": editable ? void 0 : label,
+                    children: children ?? getLabel()
+                })
+            }),
+            showMenuButton ? /*#__PURE__*/ jsx(TabMenu, {
+                allowClose: closeable,
+                allowRename: editable,
+                controlledComponentId: ariaControls,
+                controlledComponentTitle: label,
+                location: location,
+                onMenuAction: onMenuAction,
+                onMenuClose: onMenuClose,
+                index: index
+            }) : null
+        ]
+    });
+});
+export { Tab_Tab as Tab };

package/src/tabstrip/TabMenu.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuTabMenu {
+  top: var(--vuuTabMenu-top, 0px);
+}
+
+
+`;
+export default css;

package/src/tabstrip/TabMenu.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { closeCommand, renameCommand } from "./TabMenuOptions.js";
+import TabMenu from "./TabMenu.css";
+const classBase = "vuuTabMenu";
+const TabMenu_TabMenu = ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tab-menu",
+        css: TabMenu,
+        window: targetWindow
+    });
+    const [menuBuilder, menuOptions] = useMemo(()=>[
+            (_location, options)=>{
+                const menuItems = [];
+                if (allowRename) menuItems.push(renameCommand(options));
+                if (allowClose) menuItems.push(closeCommand(options));
+                return menuItems;
+            },
+            {
+                controlledComponentId,
+                controlledComponentTitle,
+                tabIndex: index
+            }
+        ], [
+        allowClose,
+        allowRename,
+        controlledComponentId,
+        controlledComponentTitle,
+        index
+    ]);
+    return /*#__PURE__*/ jsx(PopupMenu, {
+        "aria-label": "context menu",
+        className: classBase,
+        "data-embedded": true,
+        menuBuilder: menuBuilder,
+        menuActionHandler: onMenuAction,
+        menuLocation: clsx("tab", location),
+        menuOptions: menuOptions,
+        onMenuClose: onMenuClose,
+        tabIndex: -1
+    });
+};
+export { TabMenu_TabMenu as TabMenu };

package/src/tabstrip/TabMenuOptions.js

@@ -0,0 +1,14 @@
+const isTabMenuOptions = (options)=>"object" == typeof options && null !== options && "tabIndex" in options && "number" == typeof options.tabIndex;
+const closeCommand = (options)=>({
+        label: "Close",
+        location: "tab",
+        id: "close-tab",
+        options
+    });
+const renameCommand = (options)=>({
+        label: "Rename",
+        location: "tab",
+        id: "rename-tab",
+        options
+    });
+export { closeCommand, isTabMenuOptions, renameCommand };

package/src/tabstrip/Tabstrip.css.js

@@ -0,0 +1,121 @@
+const css = `
+.vuuTabstrip {
+  --vuuOverflowContainer-background: transparent;
+  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
+  --vuuOverflowContainer-width: var(--tabstrip-width);
+  --tabstrip-dragging-display: none;
+  --tabstrip-display: inline-flex;
+  --tabstrip-background: transparent;
+  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));
+  min-width: 28px;
+  display: flex;
+  position: relative;
+  overflow: visible;
+}
+
+.vuuTabstrip.vuuOrientation-horizontal {
+  --vuuOverflowContainer-borderStyle: none none solid none;
+  --vuuOverflowContainer-borderBottomWidth: 1px;
+  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height, 28px));
+  --tabstrip-width: var(--vuuTabstrip-width, 100%);
+  --tab-height: var(--tabstrip-height);
+  --tab-width: auto;
+  --tab-thumb-height: 2px;
+  --tab-thumb-left: var(--tab-thumb-offset, 0);
+  --tab-thumb-top: auto;
+  --tab-thumb-width: var(--tab-thumb-size, 100%);
+  align-items: flex-start;
+}
+
+.vuuTabstrip.vuuOrientation-vertical {
+  --tabstrip-height: var(--vuuTabstrip-height, 100%);
+  --tabstrip-width: var(--vuuTabstrip-width, 100px);
+  --tab-height: 50px;
+  --tab-width: 100%;
+  --tab-thumb-height: 0;
+  --tab-thumb-left: 0;
+  --tab-thumb-top: var(--tab-thumb-offset, 0);
+  --tab-thumb-width: 2px;
+  align-self: flex-start;
+  display: inline-flex;
+}
+
+.vuuTabstrip-draggingTab .vuuTab {
+  pointer-events: none;
+}
+
+.vuuTabstrip-overflowMenu.vuuDropdown {
+  --saltIcon-margin: 2px 0 0 0px;
+}
+
+.vuuTabstrip-overflowMenu-open {
+  --saltButton-background: var(--salt-actionable-subtle-background-active);
+  --saltButton-text-color: var(--salt-actionable-subtle-text-color-active);
+}
+
+.vuuTabstrip-overflowMenu-open .saltButton {
+  --saltIcon-color: var(--salt-actionable-subtle-foreground-active);
+}
+
+.vuuTabstrip-inner {
+  width: 100%;
+  line-height: var(--tabstrip-height);
+  flex-wrap: wrap;
+  flex: 0 auto;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {
+  flex-direction: column;
+  height: auto;
+}
+
+.vuuTabstrip-centered .vuuTabstrip-inner {
+  justify-content: center;
+}
+
+.vuuDraggable[class*="vuuTabstrip"] {
+  --tabstrip-display: flex;
+  --tabstrip-height: 100%;
+  --tabstrip-dragging-display: block;
+  --tabs-tab-background: var(--salt-navigable-primary-background-hover);
+  --tabs-tab-before-content: "";
+  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
+  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);
+  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);
+  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);
+  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);
+  --tabs-tab-position: static;
+  font-size: 12px;
+}
+
+.vuuDraggable-tabstrip-horizontal {
+  --overflow-item-height: var(--tabstrip-height);
+  --tab-thumb-height: 2px;
+  --tab-thumb-left: 0px;
+  --tabstrip-display: inline-flex;
+  --tabstrip-height: 28px;
+  line-height: var(--tabstrip-height);
+}
+
+.vuuDraggable[class*="tabstrip"] .vuuTab[aria-selected="true"]:before {
+  --tabs-tab-before-background: var(--salt-navigable-indicator-active);
+}
+
+.vuuTabstrip-overflowMenu-dropTarget:after {
+  background: var(--salt-selectable-background-selected);
+  content: "";
+  height: 2px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+`;
+export default css;

package/src/tabstrip/Tabstrip.js

@@ -0,0 +1,106 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react, { createElement, useMemo, useRef } from "react";
+import { asReactElements, useId } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useTabstrip } from "./useTabstrip.js";
+import { IconButton } from "../icon-button/index.js";
+import { OverflowContainer } from "../overflow-container/index.js";
+import Tabstrip from "./Tabstrip.css";
+const classBase = "vuuTabstrip";
+const Tabstrip_Tabstrip = ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop = false, allowRenameTab = false, animateSelectionThumb = false, children, className: classNameProp, id: idProp, keyBoardActivation = "manual", location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation = "horizontal", showTabMenuButton, style: styleProp, tabClassName, variant = "secondary", ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tabstrip",
+        css: Tabstrip,
+        window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const { activeTabIndex, containerStyle, focusVisible, draggedItemIndex, onClickAddTab, interactedTabState, tabProps, ...tabstripHook } = useTabstrip({
+        activeTabIndex: activeTabIndexProp,
+        allowDragDrop,
+        animateSelectionThumb,
+        containerRef: rootRef,
+        keyBoardActivation,
+        onActiveChange,
+        onAddTab,
+        onCloseTab,
+        onExitEditMode,
+        onMoveTab,
+        orientation
+    });
+    const id = useId(idProp);
+    const className = clsx(classBase, classNameProp);
+    const style = styleProp || containerStyle ? {
+        ...styleProp,
+        ...containerStyle
+    } : void 0;
+    const tabs = useMemo(()=>asReactElements(children).map((child, index)=>{
+            const { id: tabId = `${id}-tab-${index}`, className, closeable = allowCloseTab, editable = allowRenameTab, location: tabLocation, showMenuButton = showTabMenuButton } = child.props;
+            const selected = index === activeTabIndex;
+            return /*#__PURE__*/ react.cloneElement(child, {
+                ...tabProps,
+                ...tabstripHook.navigationProps,
+                className: clsx(className, tabClassName),
+                closeable,
+                "data-overflow-priority": selected ? "1" : void 0,
+                dragging: draggedItemIndex === index,
+                editable,
+                editing: interactedTabState?.index === index,
+                focusVisible: focusVisible === index,
+                id: tabId,
+                index,
+                key: index,
+                location: clsx(location, tabLocation),
+                selected,
+                showMenuButton,
+                tabIndex: selected ? 0 : -1
+            });
+        }).concat(allowAddTab ? /*#__PURE__*/ createElement(IconButton, {
+            ...tabstripHook.navigationProps,
+            "aria-label": "Create Tab",
+            className: `${classBase}-addTabButton`,
+            "data-embedded": true,
+            icon: "add",
+            "data-overflow-priority": "1",
+            key: "addButton",
+            onClick: onClickAddTab,
+            variant: "secondary",
+            tabIndex: -1
+        }) : []), [
+        children,
+        allowAddTab,
+        tabstripHook.navigationProps,
+        onClickAddTab,
+        id,
+        allowCloseTab,
+        allowRenameTab,
+        showTabMenuButton,
+        activeTabIndex,
+        tabProps,
+        tabClassName,
+        draggedItemIndex,
+        interactedTabState,
+        focusVisible,
+        location
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowContainer, {
+                ...htmlAttributes,
+                ...tabstripHook.containerProps,
+                className: clsx(className, `${classBase}-${variant}`),
+                id: id,
+                orientation: orientation,
+                overflowIcon: "more-horiz",
+                ref: rootRef,
+                style: style,
+                role: "tablist",
+                children: tabs
+            }),
+            tabstripHook.draggable
+        ]
+    });
+};
+export { Tabstrip_Tabstrip as Tabstrip };

package/src/tabstrip/ThemeTabstrip.css.js

@@ -0,0 +1,20 @@
+const css = `
+.salt-density-touch {
+  --toolbar-depth: calc(var(--salt-size-basis-unit) * 13);
+}
+
+.salt-density-low {
+  --toolbar-depth: calc(var(--salt-size-basis-unit) * 11);
+}
+
+.salt-density-medium {
+  --toolbar-depth: calc(var(--salt-size-basis-unit) * 9);
+}
+
+.salt-density-high {
+  --toolbar-depth: calc(var(--salt-size-basis-unit) * 7);
+}
+
+
+`;
+export default css;

package/src/tabstrip/index.js

@@ -0,0 +1,4 @@
+export * from "./Tabstrip.js";
+export * from "./Tab.js";
+export * from "./TabsTypes.js";
+export * from "./tabstrip-dom-utils.js";

package/src/tabstrip/tabstrip-dom-utils.js

@@ -0,0 +1,11 @@
+import { getElementDataIndex } from "@vuu-ui/vuu-utils";
+const getIndexOfItem = (container, query)=>{
+    if (container) {
+        const targetTab = container.querySelector(`[data-index]:has(${query})`);
+        return getElementDataIndex(targetTab);
+    }
+    return -1;
+};
+const getIndexOfSelectedTab = (container)=>getIndexOfItem(container, '[aria-selected="true"]');
+const getIndexOfEditedItem = (container)=>getIndexOfItem(container, ".vuuEditableLabel-editing");
+export { getIndexOfEditedItem, getIndexOfSelectedTab };

package/src/tabstrip/useAnimatedSelectionThumb.js

@@ -0,0 +1,68 @@
+import { MEASURES, isValidNumber } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef } from "react";
+const useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal")=>{
+    const animationSuspendedRef = useRef(false);
+    const suspendAnimation = useCallback(()=>{
+        animationSuspendedRef.current = true;
+    }, []);
+    const resumeAnimation = useCallback(()=>{
+        animationSuspendedRef.current = false;
+    }, []);
+    const onTransitionEnd = useCallback(()=>{
+        containerRef.current?.style.setProperty("--tab-thumb-transition", "none");
+        containerRef.current?.removeEventListener("transitionend", onTransitionEnd);
+    }, [
+        containerRef
+    ]);
+    const lastSelectedRef = useRef(-1);
+    return useMemo(()=>{
+        let offset = 0;
+        let size = 0;
+        if (-1 !== lastSelectedRef.current) {
+            const oldSelected = containerRef.current?.querySelector(".vuuTab-selected");
+            const newSelected = containerRef.current?.querySelector(`[data-index="${activeTabIndex}"] .vuuTab`);
+            const { positionProp, sizeProp } = MEASURES[orientation];
+            if (oldSelected && newSelected && !animationSuspendedRef.current) {
+                const { [positionProp]: oldPosition, [sizeProp]: oldSize } = oldSelected.getBoundingClientRect();
+                const { [positionProp]: newPosition } = newSelected.getBoundingClientRect();
+                if (isValidNumber(oldPosition) && isValidNumber(newPosition) && isValidNumber(oldSize)) {
+                    offset = oldPosition - newPosition;
+                    size = oldSize;
+                    const speed = "horizontal" === orientation ? 1100 : 700;
+                    const duration = Math.abs(offset / speed);
+                    requestAnimationFrame(()=>{
+                        containerRef.current?.style.setProperty("--tab-thumb-offset", "0px");
+                        containerRef.current?.style.setProperty("--tab-thumb-size", "100%");
+                        containerRef.current?.style.setProperty("--tab-thumb-transition", `all ${duration}s ease`);
+                        containerRef.current?.addEventListener("transitionend", onTransitionEnd);
+                    });
+                }
+            }
+        }
+        lastSelectedRef.current = activeTabIndex;
+        if (animationSuspendedRef.current) return {
+            containerStyle: {
+                "--tab-thumb-offset": "0px",
+                "--tab-thumb-size": "100%"
+            },
+            resumeAnimation,
+            suspendAnimation
+        };
+        return {
+            containerStyle: {
+                "--tab-thumb-offset": `${offset}px`,
+                "--tab-thumb-size": size ? `${size}px` : void 0
+            },
+            resumeAnimation,
+            suspendAnimation
+        };
+    }, [
+        activeTabIndex,
+        containerRef,
+        orientation,
+        onTransitionEnd,
+        resumeAnimation,
+        suspendAnimation
+    ]);
+};
+export { useAnimatedSelectionThumb };