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

package/src/tabs-next/TabOverflowList.css.js

@@ -0,0 +1,77 @@
+const css = `
+.saltTabOverflow {
+  position: relative;
+}
+
+.saltTabOverflow-list {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+  position: absolute;
+  overflow: hidden auto;
+}
+
+.saltTabOverflow-listContainer {
+  gap: var(--salt-size-border);
+  max-height: inherit;
+  min-height: inherit;
+  flex-direction: column;
+  display: flex;
+}
+
+.saltTabOverflow-list[data-hidden="true"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.saltTabOverflow-list .saltTabNext {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-100);
+  gap: var(--salt-spacing-100);
+  cursor: var(--salt-selectable-cursor-hover);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {
+  justify-content: start;
+}
+
+.saltTabOverflow-list .saltTabNext:after {
+  display: none;
+}
+
+.saltTabOverflow-list .saltTabNext[aria-disabled="true"] {
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+
+.saltTabOverflow-list .saltTabNext-focusVisible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-border) * -2);
+}
+
+.saltTabOverflow-list .saltTabNext:hover {
+  background: var(--salt-selectable-background-hover);
+}
+
+.saltTabOverflow-list .saltTabNext:active {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
+}
+
+
+`;
+export default css;

package/src/tabs-next/TabOverflowList.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingTree, offset, size, useDismiss, useInteractions } from "@floating-ui/react";
+import { Button, makePrefixer, useFloatingUI, useForkRef, useIcon, useId } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Children, forwardRef, useCallback, useRef } from "react";
+import TabOverflowList_0 from "./TabOverflowList.css";
+import { useFocusOutside } from "./hooks/useFocusOutside.js";
+const withBaseName = makePrefixer("saltTabOverflow");
+const TabOverflowList_TabOverflowList = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { buttonRef, tabstripRef, children, isMeasuring, open, setOpen, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-tabs-next-overflow-list",
+        css: TabOverflowList_0,
+        window: targetWindow
+    });
+    const { OverflowIcon } = useIcon();
+    const { refs, x, y, strategy, context } = useFloatingUI({
+        open: open,
+        onOpenChange (open, _, reason) {
+            if ("escape-key" === reason) queueMicrotask(()=>{
+                const allTabs = tabstripRef.current?.querySelectorAll('[role="tab"]:not([aria-hidden])') ?? [];
+                const numberOfTabsInOverflow = listRef.current?.querySelectorAll('[role="tab"]').length ?? 0;
+                allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({
+                    preventScroll: true
+                });
+            });
+            setOpen(open);
+        },
+        placement: "bottom-start",
+        middleware: [
+            offset(1),
+            size({
+                apply ({ elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+                    });
+                }
+            })
+        ]
+    });
+    const { getFloatingProps } = useInteractions([
+        useDismiss(context)
+    ]);
+    const rootRef = useRef(null);
+    const handleRootRef = useForkRef(rootRef, ref);
+    const listRef = useRef(null);
+    const handleListRef = useForkRef(listRef, refs.setFloating);
+    const handleFocusOutside = useCallback(()=>{
+        setOpen(false);
+    }, [
+        setOpen
+    ]);
+    useFocusOutside(rootRef, handleFocusOutside, open, "[data-floating-ui-portal]");
+    const handleClick = ()=>{
+        if (open) setOpen(false);
+        else listRef.current?.querySelectorAll('[role="tab"]')[0]?.focus({
+            preventScroll: true
+        });
+    };
+    const handleFocus = ()=>{
+        setOpen(true);
+    };
+    const handleButtonRef = useForkRef(buttonRef, refs.setReference);
+    const listId = useId();
+    const childCount = Children.count(children);
+    if (0 === childCount && !isMeasuring) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: withBaseName(),
+        ref: handleRootRef,
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                "data-overflowbutton": true,
+                tabIndex: -1,
+                appearance: "transparent",
+                sentiment: "neutral",
+                onClick: handleClick,
+                ref: handleButtonRef,
+                "aria-label": `Overflow menu. ${childCount} tabs hidden`,
+                "aria-expanded": open,
+                "aria-controls": listId,
+                "aria-hidden": "true",
+                role: "tab",
+                "aria-haspopup": true,
+                ...rest,
+                children: /*#__PURE__*/ jsx(OverflowIcon, {
+                    "aria-hidden": true
+                })
+            }),
+            /*#__PURE__*/ jsx(FloatingTree, {
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: handleListRef,
+                    ...getFloatingProps({
+                        onFocus: handleFocus,
+                        role: "presentation"
+                    }),
+                    className: withBaseName("list"),
+                    "data-hidden": !open,
+                    style: open ? {
+                        left: x ?? 0,
+                        top: y ?? 0,
+                        position: strategy
+                    } : void 0,
+                    id: listId,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: withBaseName("listContainer"),
+                        children: children
+                    })
+                })
+            })
+        ]
+    });
+});
+export { TabOverflowList_TabOverflowList as TabOverflowList };

package/src/tabs-next/TabsNext.js

@@ -0,0 +1,149 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { makePrefixer, useControlled, useEventCallback, useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { clsx } from "clsx";
+import { TabsNextContext } from "./TabsNextContext.js";
+import { useCollection } from "./hooks/useCollection.js";
+const withBaseName = makePrefixer("saltTabsNext");
+const TabsNext_TabsNext = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, children, value, defaultValue, onChange, ...rest } = props;
+    const [valueToTabIdMap, setValueToIdMap] = useState({
+        map: new Map()
+    });
+    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({
+        map: new Map()
+    });
+    const { registerItem, item, getNext, getPrevious, getFirst, getLast, items } = useCollection({
+        wrap: true
+    });
+    const activeTab = useRef(void 0);
+    const returnFocus = useRef(void 0);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [selected, setSelectedState] = useControlled({
+        controlled: value,
+        default: defaultValue,
+        name: "TabListNext",
+        state: "selected"
+    });
+    const selectedRef = useRef(void 0);
+    useIsomorphicLayoutEffect(()=>{
+        selectedRef.current = selected;
+    }, [
+        selected
+    ]);
+    const setSelected = useCallback((event, value)=>{
+        setMenuOpen(false);
+        setSelectedState(value);
+        onChange?.(event, value);
+    }, [
+        onChange
+    ]);
+    const registerTab = useEventCallback((item)=>{
+        const cleanup = registerItem(item);
+        setValueToIdMap(({ map })=>{
+            map.set(item.value, item.id);
+            return {
+                map
+            };
+        });
+        return ()=>{
+            const items = cleanup();
+            setValueToIdMap(({ map })=>{
+                map.delete(item.value);
+                return {
+                    map
+                };
+            });
+            if (activeTab.current?.value !== item.value) return;
+            returnFocus.current = item.value;
+            const containFocus = ()=>{
+                const activeIndex = items.current.findIndex((i)=>item.value === i.value);
+                const nextIndex = activeIndex === items.current.length - 1 ? items.current.length - 2 : activeIndex + 1;
+                const nextActive = items.current[nextIndex];
+                returnFocus.current = nextActive.value;
+                if (selectedRef.current === item.value) setSelected(null, nextActive.value);
+                nextActive?.element?.focus();
+            };
+            if (document.activeElement === document.body) requestAnimationFrame(()=>{
+                if (document.activeElement === document.body) containFocus();
+            });
+            else {
+                const handleFocusOut = (event)=>{
+                    if (!event.relatedTarget) requestAnimationFrame(()=>{
+                        if (document.activeElement === document.body) containFocus();
+                    });
+                };
+                item.element.ownerDocument.addEventListener("focusout", handleFocusOut, {
+                    once: true
+                });
+                setTimeout(()=>{
+                    item.element.ownerDocument.removeEventListener("focusout", handleFocusOut);
+                }, 1000);
+            }
+        };
+    });
+    const registerPanel = useCallback((id, value)=>{
+        setValueToPanelIdMap(({ map })=>{
+            map.set(value, id);
+            return {
+                map
+            };
+        });
+        return ()=>{
+            setValueToIdMap(({ map })=>{
+                map.delete(value);
+                return {
+                    map
+                };
+            });
+        };
+    }, []);
+    const getPanelId = useCallback((value)=>valueToPanelIdMap.map.get(value), [
+        valueToPanelIdMap
+    ]);
+    const getTabId = useCallback((value)=>valueToTabIdMap.map.get(value), [
+        valueToTabIdMap
+    ]);
+    const context = useMemo(()=>({
+            registerTab,
+            registerPanel,
+            getPanelId,
+            getTabId,
+            selected,
+            setSelected,
+            item,
+            getNext,
+            getPrevious,
+            getFirst,
+            getLast,
+            items,
+            activeTab,
+            menuOpen,
+            setMenuOpen,
+            returnFocus
+        }), [
+        registerPanel,
+        registerTab,
+        getPanelId,
+        getTabId,
+        selected,
+        setSelected,
+        item,
+        getNext,
+        getPrevious,
+        getFirst,
+        getLast,
+        items,
+        menuOpen
+    ]);
+    return /*#__PURE__*/ jsx(TabsNextContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx("div", {
+            className: clsx(withBaseName(), className),
+            ref: ref,
+            ...rest,
+            children: children
+        })
+    });
+});
+export { TabsNext_TabsNext as TabsNext };

package/src/tabs-next/TabsNextContext.js

@@ -0,0 +1,28 @@
+import { createContext } from "@salt-ds/core";
+import { useContext } from "react";
+const TabsNextContext = createContext("TabsNextContext", {
+    getFirst: ()=>null,
+    getLast: ()=>null,
+    getNext: ()=>null,
+    getPrevious: ()=>null,
+    item: ()=>null,
+    items: [],
+    selected: void 0,
+    registerTab: ()=>()=>void 0,
+    registerPanel: ()=>()=>void 0,
+    getPanelId: ()=>void 0,
+    getTabId: ()=>void 0,
+    setSelected: ()=>void 0,
+    activeTab: {
+        current: void 0
+    },
+    returnFocus: {
+        current: void 0
+    },
+    menuOpen: false,
+    setMenuOpen: ()=>void 0
+});
+function useTabsNext() {
+    return useContext(TabsNextContext);
+}
+export { TabsNextContext, useTabsNext };

package/src/tabs-next/hooks/useCollection.js

@@ -0,0 +1,80 @@
+import { useCallback, useRef, useState } from "react";
+function sortBasedOnDOMPosition(items) {
+    const indexedItems = items.map((item, index)=>[
+            index,
+            item
+        ]);
+    let orderChanged = false;
+    indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB])=>{
+        const itemAElement = itemA.element;
+        const itemBElement = itemB.element;
+        if (itemAElement === itemBElement) return 0;
+        if (!itemAElement || !itemBElement) return 0;
+        if (itemAElement.compareDocumentPosition(itemBElement) & Node.DOCUMENT_POSITION_FOLLOWING) {
+            if (itemAIndex > itemBIndex) orderChanged = true;
+            return -1;
+        }
+        if (itemAIndex < itemBIndex) orderChanged = true;
+        return 1;
+    });
+    if (orderChanged) return indexedItems.map(([_, item])=>item);
+    return items;
+}
+function useCollection({ wrap }) {
+    const [items, setItems] = useState([]);
+    const itemsRef = useRef([]);
+    const itemMap = useRef(new Map());
+    const registerItem = useCallback((item)=>{
+        setItems((old)=>{
+            const newItems = old.slice();
+            const index = newItems.findIndex(({ id })=>id === item.id);
+            if (-1 !== index) {
+                const newItem = {
+                    ...newItems[index],
+                    ...item
+                };
+                newItems[index] = newItem;
+                itemMap.current.set(item.id, newItem);
+            } else {
+                newItems.push(item);
+                itemMap.current.set(item.id, item);
+            }
+            const value = sortBasedOnDOMPosition(newItems);
+            itemsRef.current = value;
+            return value;
+        });
+        return ()=>{
+            setItems((old)=>{
+                itemMap.current.delete(item.id);
+                return old.filter(({ id })=>id !== item.id);
+            });
+            return itemsRef;
+        };
+    }, []);
+    return {
+        registerItem,
+        item: (id)=>{
+            if (!id) return null;
+            let item = itemMap.current.get(id);
+            if (!item) {
+                item = items.find((item)=>item.id === id);
+                if (item) itemMap.current.set(item.id, item);
+            }
+            return item ?? null;
+        },
+        getNext: (current)=>{
+            const index = items.findIndex(({ id })=>id === current);
+            const newIndex = wrap ? (index + 1) % items.length : Math.min(index + 1, items.length - 1);
+            return items[newIndex] ?? null;
+        },
+        getPrevious: (current)=>{
+            const index = items.findIndex(({ id })=>id === current);
+            const newIndex = wrap ? (index - 1 + items.length) % items.length : Math.max(index - 1, 0);
+            return items[newIndex] ?? null;
+        },
+        getFirst: ()=>items[0] ?? null,
+        getLast: ()=>items[items.length - 1] ?? null,
+        items
+    };
+}
+export { useCollection };

package/src/tabs-next/hooks/useFocusOutside.js

@@ -0,0 +1,23 @@
+import { useWindow } from "@salt-ds/window";
+import { useEffect } from "react";
+function useFocusOutside(elementRef, onFocusOutside, enabled, ignore) {
+    const targetWindow = useWindow();
+    useEffect(()=>{
+        if (!enabled) return;
+        const handleFocus = (event)=>{
+            const ignoreElement = ignore ? elementRef.current?.ownerDocument?.querySelector(ignore) : void 0;
+            if (event.target instanceof HTMLElement && !elementRef.current?.contains(event.target) && !ignoreElement?.contains(event.target)) onFocusOutside();
+        };
+        targetWindow?.addEventListener("focusin", handleFocus);
+        return ()=>{
+            targetWindow?.removeEventListener("focusin", handleFocus);
+        };
+    }, [
+        targetWindow,
+        onFocusOutside,
+        elementRef,
+        enabled,
+        ignore
+    ]);
+}
+export { useFocusOutside };

package/src/tabs-next/hooks/useOverflow.js

@@ -0,0 +1,118 @@
+import { ownerWindow, useEventCallback, useIsomorphicLayoutEffect, useValueEffect } from "@salt-ds/core";
+import { useWindow } from "@salt-ds/window";
+import { Children, useEffect, useMemo } from "react";
+function getTabWidth(element) {
+    const { width } = element.getBoundingClientRect();
+    return Math.ceil(width);
+}
+function useOverflow({ tabs, container, overflowButton, children, selected }) {
+    const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({
+        visibleCount: tabs.length,
+        isMeasuring: false
+    });
+    const targetWindow = useWindow();
+    const updateOverflow = useEventCallback(()=>{
+        const computeVisible = (visibleCount)=>{
+            if (container.current && targetWindow) {
+                const items = Array.from(container.current.querySelectorAll("[data-overflowitem]"));
+                const selectedTab = container.current.querySelector("[role=tab][aria-selected=true]")?.parentElement;
+                let maxWidth = container.current.clientWidth ?? 0;
+                const containerStyles = targetWindow.getComputedStyle(container.current);
+                const gap = Number.parseInt(containerStyles.gap || "0");
+                let currentWidth = 0;
+                let newVisibleCount = 0;
+                const visible = [];
+                while(newVisibleCount < items.length){
+                    const element = items[newVisibleCount];
+                    if (element) {
+                        if (currentWidth + getTabWidth(element) + gap > maxWidth) break;
+                        currentWidth += getTabWidth(element) + gap;
+                        visible.push(element);
+                    }
+                    newVisibleCount++;
+                }
+                if (newVisibleCount >= items.length) return newVisibleCount;
+                const overflowButtonWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
+                maxWidth -= overflowButtonWidth;
+                while(currentWidth > maxWidth){
+                    const removed = visible.pop();
+                    if (!removed) break;
+                    currentWidth -= getTabWidth(removed) + gap;
+                    newVisibleCount--;
+                }
+                if (selectedTab && !visible.includes(selectedTab)) {
+                    const selectedTabWidth = getTabWidth(selectedTab) + gap;
+                    while(currentWidth + selectedTabWidth > maxWidth){
+                        const removed = visible.pop();
+                        if (!removed) break;
+                        currentWidth -= getTabWidth(selectedTab) + gap;
+                        newVisibleCount--;
+                    }
+                }
+                return Math.max(1, newVisibleCount);
+            }
+            return visibleCount;
+        };
+        setVisibleItems(function*() {
+            yield {
+                visibleCount: tabs.length,
+                isMeasuring: true
+            };
+            const newVisibleCount = computeVisible(tabs.length);
+            const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;
+            yield {
+                visibleCount: newVisibleCount,
+                isMeasuring
+            };
+            if (isMeasuring) yield {
+                visibleCount: computeVisible(newVisibleCount),
+                isMeasuring: false
+            };
+        });
+    });
+    useIsomorphicLayoutEffect(()=>{
+        updateOverflow();
+    }, [
+        selected
+    ]);
+    useEffect(()=>{
+        const element = container?.current;
+        if (!element) return;
+        const win = ownerWindow(element);
+        const resizeObserver = new win.ResizeObserver((entries)=>{
+            requestAnimationFrame(()=>{
+                if (0 === entries.length) return;
+                updateOverflow();
+            });
+        });
+        resizeObserver.observe(element);
+        if (element.parentElement) resizeObserver.observe(element.parentElement);
+        return ()=>{
+            if (element) resizeObserver.unobserve(element);
+        };
+    }, [
+        container,
+        updateOverflow
+    ]);
+    const childArray = useMemo(()=>Children.toArray(children), [
+        children
+    ]);
+    const visible = childArray.slice(0, visibleCount || 1);
+    const hidden = childArray.slice(visibleCount || 1);
+    const hiddenSelectedIndex = hidden.findIndex((child)=>child?.props?.value === selected);
+    if (selected && -1 !== hiddenSelectedIndex) {
+        const removed = hidden.splice(hiddenSelectedIndex, 1);
+        visible.push(removed[0]);
+    }
+    if (isMeasuring) return [
+        childArray,
+        [],
+        isMeasuring
+    ];
+    return [
+        visible,
+        hidden,
+        isMeasuring
+    ];
+}
+export { useOverflow };

package/src/tabs-next/index.js

@@ -0,0 +1,7 @@
+export * from "./TabNext.js";
+export * from "./TabListNext.js";
+export * from "./TabsNext.js";
+export * from "./TabNextPanel.js";
+export * from "./TabBar.js";
+export * from "./TabNextTrigger.js";
+export * from "./TabNextAction.js";