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

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

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

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

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

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

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

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

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

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