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

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 };

package/src/tabstrip/useKeyboardNavigation.js

@@ -0,0 +1,191 @@
+import { useControlled } from "@salt-ds/core";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home, dispatchMouseEvent, getElementByDataIndex, getFocusableElement } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef, useState } from "react";
+import { getIndexOfEditedItem } from "./tabstrip-dom-utils.js";
+const navigation = {
+    horizontal: {
+        [Home]: "start",
+        [End]: "end",
+        [ArrowLeft]: "bwd",
+        [ArrowRight]: "fwd"
+    },
+    vertical: {
+        [Home]: "start",
+        [End]: "end",
+        [ArrowUp]: "bwd",
+        [ArrowDown]: "fwd"
+    }
+};
+const isNavigationKey = (key, orientation = "horizontal")=>void 0 !== navigation[orientation][key];
+const isMenuActivationKey = (key)=>key === ArrowDown;
+function nextItemIdx(count, direction, idx) {
+    if ("start" === direction) return 0;
+    if ("end" === direction) return count - 1;
+    if ("bwd" === direction) if (idx > 0) return idx - 1;
+    else return idx;
+    if (null === idx) return 0;
+    if (idx === count - 1) return idx;
+    else return idx + 1;
+}
+const isEditing = (element)=>null != element && element.classList.contains("vuuTab-editing");
+const isNonWrappedElement = (element)=>null != element && !element.classList.contains("wrapped");
+const useKeyboardNavigation = ({ containerRef, defaultHighlightedIdx = -1, highlightedIdx: highlightedIdxProp, keyBoardActivation, orientation, selectedIndex: selectedTabIndex = 0 })=>{
+    const manualActivation = "manual" === keyBoardActivation;
+    const mouseClickPending = useRef(false);
+    const focusedRef = useRef(-1);
+    const [hasFocus, setHasFocus] = useState(false);
+    const [, forceRefresh] = useState({});
+    const [highlightedIdx, _setHighlightedIdx] = useControlled({
+        controlled: highlightedIdxProp,
+        default: defaultHighlightedIdx,
+        name: "UseKeyboardNavigation"
+    });
+    const setHighlightedIdx = useCallback((value)=>{
+        _setHighlightedIdx(focusedRef.current = value);
+    }, [
+        _setHighlightedIdx
+    ]);
+    const keyboardNavigation = useRef(false);
+    const focusTab = useCallback((tabIndex, immediateFocus = false, withKeyboard, delay = 70)=>{
+        setHighlightedIdx(tabIndex);
+        if (true === withKeyboard && !keyboardNavigation.current) keyboardNavigation.current = true;
+        const setFocus = ()=>{
+            if (-1 !== tabIndex) {
+                const element = getElementByDataIndex(containerRef.current, tabIndex);
+                if (element) {
+                    const focusableElement = getFocusableElement(element);
+                    if (!isEditing(focusableElement)) focusableElement?.focus();
+                }
+            }
+        };
+        if (immediateFocus) setFocus();
+        else setTimeout(setFocus, delay);
+    }, [
+        containerRef,
+        setHighlightedIdx
+    ]);
+    const onFocus = (e)=>{
+        if (-1 === focusedRef.current) if (-1 === e.target.tabIndex) ;
+        else {
+            const index = getIndexOfEditedItem(containerRef.current);
+            if (-1 !== index) requestAnimationFrame(()=>{
+                setHighlightedIdx(index);
+            });
+            else setTimeout(()=>{
+                if (-1 === focusedRef.current && null !== selectedTabIndex) setHighlightedIdx(selectedTabIndex);
+            }, 200);
+        }
+    };
+    const getIndexCount = useCallback(()=>containerRef.current?.querySelectorAll("[data-index]").length ?? 0, [
+        containerRef
+    ]);
+    const nextFocusableItemIdx = useCallback((direction = "fwd", idx)=>{
+        const indexCount = getIndexCount();
+        const index = "number" == typeof idx ? idx : indexCount;
+        let nextIdx = nextItemIdx(indexCount, direction, index);
+        const nextDirection = "start" === direction ? "fwd" : "end" === direction ? "bwd" : direction;
+        while(("fwd" === nextDirection && nextIdx < indexCount || "bwd" === nextDirection && nextIdx > 0) && !isNonWrappedElement(getElementByDataIndex(containerRef.current, nextIdx))){
+            const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);
+            if (newIdx === nextIdx) break;
+            nextIdx = newIdx;
+        }
+        return nextIdx;
+    }, [
+        containerRef,
+        getIndexCount
+    ]);
+    const navigateChildItems = useCallback((e, forceFocusVisible = false)=>{
+        const direction = navigation[orientation][e.key];
+        const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
+        if (nextIdx !== highlightedIdx) {
+            const immediateFocus = true;
+            if (manualActivation) focusTab(nextIdx, immediateFocus);
+        } else if (forceFocusVisible) forceRefresh({});
+    }, [
+        highlightedIdx,
+        manualActivation,
+        nextFocusableItemIdx,
+        focusTab,
+        orientation
+    ]);
+    const highlightedTabHasMenu = useCallback(()=>{
+        const el = getElementByDataIndex(containerRef.current, highlightedIdx);
+        if (el) return null != el.querySelector(".vuuPopupMenu");
+        return false;
+    }, [
+        containerRef,
+        highlightedIdx
+    ]);
+    const activateTabMenu = useCallback(()=>{
+        const el = getElementByDataIndex(containerRef.current, highlightedIdx);
+        const menuEl = el?.querySelector(".vuuPopupMenu");
+        if (menuEl) dispatchMouseEvent(menuEl, "click");
+        return false;
+    }, [
+        containerRef,
+        highlightedIdx
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
+            e.preventDefault();
+            if (keyboardNavigation.current) navigateChildItems(e);
+            else {
+                keyboardNavigation.current = true;
+                navigateChildItems(e, true);
+            }
+        } else if (isMenuActivationKey(e.key) && highlightedTabHasMenu()) activateTabMenu();
+    }, [
+        activateTabMenu,
+        getIndexCount,
+        highlightedTabHasMenu,
+        navigateChildItems,
+        orientation
+    ]);
+    const handleItemClick = (_, tabIndex)=>{
+        setHighlightedIdx(tabIndex);
+    };
+    const handleFocus = useCallback(()=>{
+        if (!hasFocus) {
+            setHasFocus(true);
+            if (mouseClickPending.current) mouseClickPending.current = false;
+            else keyboardNavigation.current = true;
+        }
+    }, [
+        hasFocus
+    ]);
+    const handleContainerMouseDown = useCallback(()=>{
+        if (!hasFocus) mouseClickPending.current = true;
+        keyboardNavigation.current = false;
+    }, [
+        hasFocus
+    ]);
+    const containerProps = {
+        onBlur: (e)=>{
+            const sourceTarget = e.target.closest(".vuuTabstrip");
+            const destTarget = e.relatedTarget;
+            if (sourceTarget && !sourceTarget?.contains(destTarget)) {
+                setHighlightedIdx(-1);
+                setHasFocus(false);
+            }
+        },
+        onMouseDownCapture: handleContainerMouseDown,
+        onFocus: handleFocus,
+        onMouseLeave: ()=>{
+            keyboardNavigation.current = true;
+            setHighlightedIdx(-1);
+            mouseClickPending.current = false;
+        }
+    };
+    return {
+        containerProps,
+        focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
+        focusIsWithinComponent: hasFocus,
+        highlightedIdx,
+        focusTab,
+        onClick: handleItemClick,
+        onFocus,
+        onKeyDown: handleKeyDown,
+        setHighlightedIdx
+    };
+};
+export { useKeyboardNavigation };

package/src/tabstrip/useSelection.js

@@ -0,0 +1,50 @@
+import { useControlled } from "@salt-ds/core";
+import { useCallback } from "react";
+const defaultSelectionKeys = [
+    "Enter",
+    " "
+];
+const isTabElement = (el)=>el && el.matches('[class*="vuuTab "]');
+const useSelection = ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp })=>{
+    const [selected, setSelected, isControlled] = useControlled({
+        controlled: selectedProp,
+        default: defaultSelected ?? 0,
+        name: "Tabstrip",
+        state: "value"
+    });
+    const isSelectionEvent = useCallback((evt)=>defaultSelectionKeys.includes(evt.key), []);
+    const selectItem = useCallback((tabIndex)=>{
+        setSelected(tabIndex);
+        onSelectionChange?.(tabIndex);
+    }, [
+        onSelectionChange,
+        setSelected
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        const targetElement = e.target;
+        if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
+            e.stopPropagation();
+            e.preventDefault();
+            selectItem(highlightedIdx);
+        }
+    }, [
+        isSelectionEvent,
+        highlightedIdx,
+        selected,
+        selectItem
+    ]);
+    const onClick = useCallback((e, tabIndex)=>{
+        if (tabIndex !== selected) selectItem(tabIndex);
+    }, [
+        selectItem,
+        selected
+    ]);
+    return {
+        activateTab: selectItem,
+        isControlled,
+        onClick,
+        onKeyDown: handleKeyDown,
+        selected
+    };
+};
+export { useSelection };