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

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

package/src/tabstrip/Tab.css.js

@@ -0,0 +1,148 @@
+const css = `
+.vuuTab {
+  --saltEditableLabel-padding: 0;
+  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
+  --saltInputLegacy-minWidth: 4em;
+  --saltEditableLabel-top: 2px;
+  --tab-background: var(--vuuTab-background, transparent);
+  --tab-cursor: pointer;
+  --tab-position: relative;
+  background: var(--tab-background);
+  border-color: var(--vuuTab-borderColor, transparent);
+  border-style: var(--vuuTab-borderStyle, none);
+  border-width: var(--vuuTab-borderWidth, 0px);
+  border-radius: var(--vuuTab-borderRadius, 0);
+  color: var(--salt-content-primary-foreground);
+  cursor: var(--vuuTab-cursor, var(--tab-cursor));
+  display: var(--tabstrip-display);
+  height: var(--vuuTabHeight, var(--tab-height));
+  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
+  margin: 0 var(--tab-spacing) 0 0;
+  min-width: var(--vuuTab-minWidth, 40px);
+  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));
+  position: var(--vuuTab-position, var(--tab-position));
+  -webkit-user-select: none;
+  user-select: none;
+  width: var(--tab-width);
+  outline: none;
+  align-self: stretch;
+  align-items: center;
+  gap: 8px;
+}
+
+.vuuTab-selected {
+  background: var(--vuuTab-background-selected, var(--tab-background));
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-navigable-fontWeight-active);
+}
+
+.vuuTab-main {
+  color: inherit;
+  cursor: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  border: none;
+  outline: none;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.vuuTabstrip.vuuOrientation-horizontal {
+  & .vuuTab-main {
+    height: calc(var(--tab-height) - var(--tab-thumb-height));
+    margin-bottom: var(--tab-thumb-height);
+  }
+}
+
+.vuuTab-closeable .vuuTab-main {
+  border-right: solid transparent var(--salt-size-unit);
+}
+
+.vuuTab .vuuTab-closeButton {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.vuuTab-close-icon {
+  display: none;
+}
+
+.salt-density-touch .vuuTab-close-icon, .salt-density-low .vuuTab-close-icon {
+  display: block;
+}
+
+.salt-density-touch .vuuTab-close-icon-small, .salt-density-low .vuuTab-close-icon-small {
+  display: none;
+}
+
+.vuuTab .vuuTab-text {
+  height: 100%;
+  line-height: var(--tab-height);
+  text-align: var(--salt-text-textAlign-embedded);
+  text-overflow: ellipsis;
+  top: var(--vuuTab-top, var(--tab-top, auto));
+  white-space: nowrap;
+  z-index: var(--salt-zIndex-default);
+  flex-direction: column;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.vuuTab .vuuTab-text:before {
+  content: attr(data-text);
+  visibility: hidden;
+  height: 0;
+  font-weight: var(--salt-navigable-fontWeight-active);
+  display: block;
+}
+
+.vuuTab.vuuFocusVisible {
+  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
+  outline-offset: -1px;
+  outline-width: 1px;
+  outline-style: dashed;
+}
+
+.vuuTab:before {
+  content: var(--tab-before-content, none);
+  content: "";
+  background: var(--tab-before-background);
+  height: var(--tab-before-height);
+  inset: var(--tab-before-inset);
+  width: var(--tab-before-width);
+  z-index: 1;
+  position: absolute;
+}
+
+.vuuTabstrip-draggingTab .vuuTab-selected:before {
+  --tab-before-content: "";
+  --tab-before-background: var(--salt-navigable-indicator-color-active);
+  --tab-before-height: var(--tab-thumb-height);
+  --tab-before-inset: var(--tab-activationIndicator-inset);
+  --tab-before-width: var(--tab-activationIndicator-thumb-width);
+}
+
+.vuuTab-selected:before {
+  --tab-before-content: "";
+  background: var(--salt-navigable-indicator-active);
+  height: var(--tab-thumb-height);
+  left: var(--tab-thumb-left);
+  bottom: 0;
+  top: var(--tab-thumb-top, auto);
+  transition: var(--tab-thumb-transition, none);
+  width: var(--tab-thumb-width, 100%);
+  position: absolute;
+}
+
+.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
+  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+}
+
+
+`;
+export default css;

package/src/tabstrip/Tab.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback, useRef } from "react";
+import { EditableLabel } from "../editable-label/index.js";
+import { TabMenu } from "./TabMenu.js";
+import Tab_0 from "./Tab.css";
+const classBase = "vuuTab";
+const noop = ()=>void 0;
+const Tab_Tab = /*#__PURE__*/ forwardRef(function({ ariaControls, children, className, closeable = false, dragging, editable = false, editing, focusVisible, index = -1, label, location, onClick, onClose, onEnterEditMode = noop, onExitEditMode = noop, onFocus: onFocusProp, onKeyUp, onMenuAction, onMenuClose, orientation, selected, showMenuButton = closeable || editable || Boolean(location), tabIndex, ...props }, ref) {
+    if (showMenuButton && "function" != typeof onMenuAction) throw Error("Tab onMenuAction must be provided if showMenuButton is set");
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tabstrip-tab",
+        css: Tab_0,
+        window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const editableRef = useRef(null);
+    const setForkRef = useForkRef(ref, rootRef);
+    const handleClick = useCallback((e)=>{
+        if (!editing) {
+            e.preventDefault();
+            onClick?.(e, index);
+        }
+    }, [
+        editing,
+        index,
+        onClick
+    ]);
+    const handleOnExitEditMode = (originalValue = "", editedValue = "", allowDeactivation = true)=>onExitEditMode(originalValue, editedValue, allowDeactivation, index);
+    const handleKeyUp = (e)=>{
+        switch(e.key){
+            case "Backspace":
+            case "Delete":
+                if (closeable) {
+                    e.stopPropagation();
+                    onClose && onClose(index);
+                }
+                break;
+            default:
+                onKeyUp && onKeyUp(e, index);
+        }
+    };
+    const getLabel = ()=>{
+        if (editable) return /*#__PURE__*/ jsx(EditableLabel, {
+            "data-embedded": true,
+            editing: editing,
+            defaultValue: label,
+            onEnterEditMode: onEnterEditMode,
+            onExitEditMode: handleOnExitEditMode,
+            ref: editableRef
+        }, label);
+        return label;
+    };
+    const handleFocus = (evt)=>{
+        if (editableRef.current) {
+            const editable = editableRef.current;
+            const input = editable.querySelector(".vuuEditableLabel-input");
+            input?.focus();
+        }
+        onFocusProp?.(evt);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        "aria-controls": ariaControls,
+        "aria-label": label,
+        "aria-selected": selected,
+        className: clsx(classBase, className, {
+            [`${classBase}-closeable`]: closeable,
+            "vuuDraggable-dragAway": dragging,
+            [`${classBase}-editing`]: editing,
+            [`${classBase}-selected`]: selected || void 0,
+            [`${classBase}-vertical`]: "vertical" === orientation,
+            ["vuuFocusVisible"]: focusVisible
+        }),
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onKeyUp: handleKeyUp,
+        ref: setForkRef,
+        role: "tab",
+        tabIndex: tabIndex,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-main`,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: `${classBase}-text`,
+                    "data-text": editable ? void 0 : label,
+                    children: children ?? getLabel()
+                })
+            }),
+            showMenuButton ? /*#__PURE__*/ jsx(TabMenu, {
+                allowClose: closeable,
+                allowRename: editable,
+                controlledComponentId: ariaControls,
+                controlledComponentTitle: label,
+                location: location,
+                onMenuAction: onMenuAction,
+                onMenuClose: onMenuClose,
+                index: index
+            }) : null
+        ]
+    });
+});
+export { Tab_Tab as Tab };

package/src/tabstrip/TabMenu.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuTabMenu {
+  top: var(--vuuTabMenu-top, 0px);
+}
+
+
+`;
+export default css;