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

package/src/tabstrip/useKeyboardNavigation.js

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

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

package/src/tabstrip/useTabstrip.js

@@ -1,181 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import { useDragDrop } from "../drag-drop/index.js";
-import { isTabMenuOptions } from "./TabMenuOptions.js";
-import { getIndexOfSelectedTab } from "./tabstrip-dom-utils.js";
-import { useAnimatedSelectionThumb } from "./useAnimatedSelectionThumb.js";
-import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
-import { useSelection } from "./useSelection.js";
-const editKeys = new Set([
-    "Enter",
-    " "
-]);
-const isEditKey = (key)=>editKeys.has(key);
-const useTabstrip = ({ activeTabIndex: activeTabIndexProp, allowDragDrop, animateSelectionThumb, containerRef, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, keyBoardActivation })=>{
-    const lastSelection = useRef(activeTabIndexProp);
-    const [interactedTabState, setInteractedTabState] = useState();
-    const { focusTab: keyboardHookFocusTab, highlightedIdx, onClick: keyboardHookHandleClick, onKeyDown: keyboardHookHandleKeyDown, setHighlightedIdx: keyboardHookSetHighlightedIndex, ...keyboardHook } = useKeyboardNavigation({
-        containerRef,
-        keyBoardActivation,
-        orientation,
-        selectedIndex: lastSelection.current
-    });
-    const { activateTab: selectionHookActivateTab, onClick: selectionHookHandleClick, onKeyDown: selectionHookHandleKeyDown, selected: selectionHookSelected } = useSelection({
-        highlightedIdx,
-        onSelectionChange: onActiveChange,
-        selected: activeTabIndexProp
-    });
-    lastSelection.current = selectionHookSelected;
-    const { containerStyle, resumeAnimation, suspendAnimation } = useAnimatedSelectionThumb(containerRef, animateSelectionThumb ? selectionHookSelected : -1, orientation);
-    const handleDrop = useCallback(({ fromIndex, toIndex })=>{
-        const { current: selected } = lastSelection;
-        console.log(`useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`);
-        onMoveTab?.(fromIndex, toIndex);
-        let nextSelectedTab = -1;
-        if (-1 !== toIndex) {
-            if (selected === fromIndex) nextSelectedTab = toIndex;
-            else if (fromIndex > selected && toIndex <= selected) nextSelectedTab = selected + 1;
-            else if (fromIndex < selected && toIndex >= selected) nextSelectedTab = selected - 1;
-            if (-1 !== nextSelectedTab) {
-                suspendAnimation();
-                selectionHookActivateTab(nextSelectedTab);
-                requestAnimationFrame(resumeAnimation);
-            }
-            keyboardHookFocusTab(toIndex, false, false, 350);
-        }
-    }, [
-        keyboardHookFocusTab,
-        onMoveTab,
-        resumeAnimation,
-        selectionHookActivateTab,
-        suspendAnimation
-    ]);
-    const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop({
-        allowDragDrop,
-        containerRef,
-        draggableClassName: `tabstrip-${orientation}`,
-        onDrop: handleDrop,
-        orientation: "horizontal",
-        itemQuery: ".vuuOverflowContainer-item"
-    });
-    const handleExitEditMode = useCallback((originalValue, editedValue, allowDeactivation, tabIndex)=>{
-        setInteractedTabState(void 0);
-        onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);
-        if (!allowDeactivation) keyboardHookFocusTab(tabIndex, false, true);
-    }, [
-        keyboardHookFocusTab,
-        onExitEditMode
-    ]);
-    const handleClick = useCallback((evt, tabIndex)=>{
-        keyboardHookHandleClick(evt, tabIndex);
-        selectionHookHandleClick(evt, tabIndex);
-    }, [
-        keyboardHookHandleClick,
-        selectionHookHandleClick
-    ]);
-    const editTab = useCallback((tabIndex = highlightedIdx)=>{
-        console.log(`set interacted tab state ${tabIndex}`);
-        setInteractedTabState({
-            index: tabIndex,
-            state: "rename"
-        });
-    }, [
-        highlightedIdx
-    ]);
-    const handleKeyDown = useCallback((evt)=>{
-        keyboardHookHandleKeyDown(evt);
-        if (!evt.defaultPrevented) selectionHookHandleKeyDown(evt);
-        if (!evt.defaultPrevented && isEditKey(evt.key)) editTab();
-    }, [
-        editTab,
-        keyboardHookHandleKeyDown,
-        selectionHookHandleKeyDown
-    ]);
-    const handleCloseTabFromMenu = useCallback((tabIndex)=>{
-        const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
-        const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
-        suspendAnimation();
-        onCloseTab?.(tabIndex, newActiveTabIndex);
-        setTimeout(()=>{
-            resumeAnimation();
-        }, 200);
-        return true;
-    }, [
-        containerRef,
-        onCloseTab,
-        resumeAnimation,
-        suspendAnimation
-    ]);
-    const handleRenameTabFromMenu = useCallback((tabIndex)=>{
-        editTab(tabIndex);
-        return true;
-    }, [
-        editTab
-    ]);
-    const handleTabMenuAction = useCallback((menuItemId, options)=>{
-        if (isTabMenuOptions(options)) switch(menuItemId){
-            case "close-tab":
-                return handleCloseTabFromMenu(options.tabIndex);
-            case "rename-tab":
-                return handleRenameTabFromMenu(options.tabIndex);
-            default:
-                console.log(`tab menu action ${menuItemId}`);
-        }
-        return false;
-    }, [
-        handleCloseTabFromMenu,
-        handleRenameTabFromMenu
-    ]);
-    const handleTabMenuClose = useCallback(()=>{
-        if (interactedTabState?.index === highlightedIdx) keyboardHookSetHighlightedIndex(highlightedIdx);
-        else keyboardHookFocusTab(highlightedIdx);
-    }, [
-        highlightedIdx,
-        interactedTabState?.index,
-        keyboardHookFocusTab,
-        keyboardHookSetHighlightedIndex
-    ]);
-    const onSwitchWrappedItemIntoView = useCallback((item)=>{
-        const index = parseInt(item.index);
-        if (!isNaN(index)) selectionHookActivateTab(index);
-    }, [
-        selectionHookActivateTab
-    ]);
-    const navigationProps = {
-        onFocus: keyboardHook.onFocus,
-        onKeyDown: handleKeyDown
-    };
-    const handleAddTabClick = useCallback(()=>{
-        onAddTab?.();
-        requestAnimationFrame(()=>{
-            const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
-            if (-1 !== selectedTabIndex) keyboardHookFocusTab(selectedTabIndex);
-        });
-    }, [
-        containerRef,
-        keyboardHookFocusTab,
-        onAddTab
-    ]);
-    const tabProps = {
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        onExitEditMode: handleExitEditMode,
-        onMenuAction: handleTabMenuAction,
-        onMenuClose: handleTabMenuClose,
-        onMouseDown: dragDropHookHandleMouseDown
-    };
-    return {
-        activeTabIndex: selectionHookSelected,
-        containerProps: {
-            ...keyboardHook.containerProps,
-            onSwitchWrappedItemIntoView
-        },
-        containerStyle,
-        focusVisible: keyboardHook.focusVisible,
-        interactedTabState,
-        navigationProps,
-        onClickAddTab: handleAddTabClick,
-        tabProps,
-        ...dragDropHook
-    };
-};
-export { useTabstrip };