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

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

package/src/tabstrip/useTabstrip.js

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