@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/src/tabstrip/Tab.css.js

@@ -1,148 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

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

package/src/tabstrip/TabMenu.js

@@ -1,48 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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 };