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

package/src/tabs-next/TabListNext.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { capitalize, makePrefixer, useForkRef, useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useRef } from "react";
+import TabListNext from "./TabListNext.css";
+import { TabOverflowList } from "./TabOverflowList.js";
+import { useTabsNext } from "./TabsNextContext.js";
+import { useOverflow } from "./hooks/useOverflow.js";
+const withBaseName = makePrefixer("saltTabListNext");
+const TabListNext_TabListNext = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { appearance = "bordered", activeColor = "primary", children, className, onKeyDown, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-tablist-next",
+        css: TabListNext,
+        window: targetWindow
+    });
+    const { selected, getNext, getPrevious, getFirst, getLast, items, activeTab, menuOpen, setMenuOpen, returnFocus } = useTabsNext();
+    const tabstripRef = useRef(null);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const overflowButtonRef = useRef(null);
+    const [visible, hidden, isMeasuring] = useOverflow({
+        container: tabstripRef,
+        tabs: items,
+        children,
+        selected,
+        overflowButton: overflowButtonRef
+    });
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        const actionMap = {
+            ArrowRight: getNext,
+            ArrowLeft: getPrevious,
+            Home: getFirst,
+            End: getLast,
+            ArrowUp: menuOpen ? getPrevious : void 0,
+            ArrowDown: menuOpen ? getNext : void 0
+        };
+        const action = actionMap[event.key];
+        if (action) {
+            event.preventDefault();
+            const activeTabId = activeTab.current?.id;
+            if (!activeTabId) return;
+            const nextItem = action(activeTabId);
+            if (nextItem) {
+                nextItem.element?.scrollIntoView({
+                    block: "nearest",
+                    inline: "nearest"
+                });
+                nextItem.element?.focus({
+                    preventScroll: true
+                });
+            }
+        }
+    };
+    useIsomorphicLayoutEffect(()=>{
+        if (!returnFocus.current || visible.length < 1 || void 0 === selected) return;
+        const itemToFocus = items.find((i)=>i.value === returnFocus.current);
+        itemToFocus?.element?.focus({
+            preventScroll: true
+        });
+        requestAnimationFrame(()=>{
+            if (targetWindow?.document?.activeElement === itemToFocus?.element) returnFocus.current = void 0;
+        });
+    }, [
+        visible,
+        returnFocus,
+        targetWindow,
+        items,
+        selected
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        role: "tablist",
+        className: clsx(withBaseName(), withBaseName(appearance), withBaseName("horizontal"), withBaseName(`activeColor${capitalize(activeColor)}`), className),
+        "data-ismeasuring": isMeasuring ? true : void 0,
+        ref: handleRef,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: [
+            visible,
+            /*#__PURE__*/ jsx(TabOverflowList, {
+                isMeasuring: isMeasuring,
+                buttonRef: overflowButtonRef,
+                tabstripRef: tabstripRef,
+                open: menuOpen,
+                setOpen: setMenuOpen,
+                children: hidden
+            })
+        ]
+    });
+});
+export { TabListNext_TabListNext as TabListNext };

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

@@ -0,0 +1,76 @@
+const css = `
+.saltTabNext {
+  appearance: none;
+  justify-content: center;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  border: none;
+  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
+  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
+  white-space: pre;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  box-sizing: border-box;
+  --tabNext-radius: var(--salt-palette-corner-weak, 0);
+  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
+  cursor: var(--salt-navigable-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-navigable-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+  font-size: var(--salt-text-fontSize);
+  flex-shrink: 0;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.saltTabNext:after {
+  content: "";
+  left: calc(var(--salt-size-border) * -1);
+  right: calc(var(--salt-size-border) * -1);
+  height: var(--salt-size-indicator);
+  position: absolute;
+}
+
+.saltTabListNext-bordered .saltTabNext:after {
+  top: 0;
+}
+
+.saltTabListNext-transparent .saltTabNext:after {
+  bottom: 0;
+}
+
+.saltTabNext:hover:after, .saltTabNext-focusVisible:after {
+  background: var(--salt-navigable-indicator-hover);
+}
+
+.saltTabNext-disabled:hover:after, .saltTabNext-disabled.saltTabNext-focusVisible:after {
+  background: none;
+}
+
+.saltTabNext-focusVisible {
+  outline: var(--salt-focused-outline);
+}
+
+.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {
+  background: var(--saltTabListNext-activeColor);
+  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
+}
+
+.saltTabNext.saltTabNext-selected:after {
+  background: var(--salt-navigable-indicator-active);
+}
+
+.saltTabNext.saltTabNext-disabled {
+  cursor: var(--salt-navigable-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+}
+
+
+`;
+export default css;

package/src/tabs-next/TabNext.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { makePrefixer, useId } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import TabNext from "./TabNext.css";
+import { TabNextContext } from "./TabNextContext.js";
+import { useTabsNext } from "./TabsNextContext.js";
+const withBaseName = makePrefixer("saltTabNext");
+const TabNext_TabNext = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { "aria-labelledby": ariaLabelledBy, children, className, disabled: disabledProp, onBlur, onMouseDown, onFocus, onFocusCapture, value, id: idProp, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-tab-next",
+        css: TabNext,
+        window: targetWindow
+    });
+    const { selected, activeTab } = useTabsNext();
+    const disabled = !!disabledProp;
+    const id = useId(idProp);
+    const wasMouseDown = useRef(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const handleFocusCapture = (event)=>{
+        onFocusCapture?.(event);
+        if (value && id) activeTab.current = {
+            value,
+            id
+        };
+    };
+    const handleFocus = (event)=>{
+        onFocus?.(event);
+        setFocused(true);
+        if (!wasMouseDown.current && "tab" === event.target.getAttribute("role")) setFocusVisible(true);
+        wasMouseDown.current = false;
+    };
+    const handleBlur = (event)=>{
+        onBlur?.(event);
+        setFocused(false);
+        setFocusVisible(false);
+    };
+    const handleMouseDown = (event)=>{
+        onMouseDown?.(event);
+        wasMouseDown.current = true;
+    };
+    const [actions, setActions] = useState([]);
+    const registerAction = useCallback((id)=>{
+        setActions((old)=>old.concat(id));
+        return ()=>{
+            setActions((old)=>old.filter((action)=>action !== id));
+        };
+    }, []);
+    const context = useMemo(()=>({
+            tabId: id,
+            selected: selected === value,
+            focused,
+            value,
+            disabled,
+            actions,
+            registerAction
+        }), [
+        id,
+        selected,
+        value,
+        focused,
+        disabled,
+        actions,
+        registerAction
+    ]);
+    return /*#__PURE__*/ jsx(TabNextContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx("div", {
+            className: clsx(withBaseName(), {
+                [withBaseName("selected")]: selected === value,
+                [withBaseName("disabled")]: disabled,
+                [withBaseName("focusVisible")]: focusVisible
+            }, className),
+            "data-overflowitem": "true",
+            ref: ref,
+            onMouseDown: handleMouseDown,
+            onFocusCapture: handleFocusCapture,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            role: "presentation",
+            ...rest,
+            children: children
+        })
+    });
+});
+export { TabNext_TabNext as TabNext };

package/src/tabs-next/TabNextAction.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, useId, useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { useTabNext } from "./TabNextContext.js";
+const TabNextAction_TabNextAction = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { "aria-labelledby": ariaLabelledBy, id: idProp, ...rest } = props;
+    const id = useId(idProp);
+    const { focused, selected, tabId, registerAction } = useTabNext();
+    useIsomorphicLayoutEffect(()=>{
+        if (id) return registerAction(id);
+    }, [
+        registerAction,
+        id
+    ]);
+    return /*#__PURE__*/ jsx(Button, {
+        id: id,
+        "aria-labelledby": clsx(ariaLabelledBy, tabId, id),
+        tabIndex: focused || selected ? void 0 : -1,
+        appearance: "transparent",
+        sentiment: "neutral",
+        ref: ref,
+        ...rest
+    });
+});
+export { TabNextAction_TabNextAction as TabNextAction };

package/src/tabs-next/TabNextContext.js

@@ -0,0 +1,14 @@
+import { createContext } from "@salt-ds/core";
+import { useContext } from "react";
+const TabNextContext = createContext("TabNextContext", {
+    focused: false,
+    selected: false,
+    disabled: false,
+    value: "",
+    actions: [],
+    registerAction: ()=>()=>void 0
+});
+function useTabNext() {
+    return useContext(TabNextContext);
+}
+export { TabNextContext, useTabNext };

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

@@ -0,0 +1,17 @@
+const css = `
+.saltTabNextPanel {
+  width: 100%;
+  height: 100%;
+}
+
+.saltTabNextPanel[hidden] {
+  display: none;
+}
+
+.saltTabNextPanel:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+
+`;
+export default css;

package/src/tabs-next/TabNextPanel.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { makePrefixer, useForkRef, useId, useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { tabbable } from "tabbable";
+import TabNextPanel_0 from "./TabNextPanel.css";
+import { useTabsNext } from "./TabsNextContext.js";
+const withBaseName = makePrefixer("saltTabNextPanel");
+const TabNextPanel_TabNextPanel = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, children, id: idProp, value, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-tab-next-panel",
+        css: TabNextPanel_0,
+        window: targetWindow
+    });
+    const id = useId(idProp);
+    const { registerPanel, getTabId, selected } = useTabsNext();
+    const panelRef = useRef(null);
+    const handleRef = useForkRef(panelRef, ref);
+    useIsomorphicLayoutEffect(()=>{
+        if (value && id) return registerPanel(id, value);
+    }, [
+        value,
+        id,
+        registerPanel
+    ]);
+    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);
+    useEffect(()=>{
+        if (!panelRef.current) return;
+        const detectFocusableChildren = ()=>{
+            requestAnimationFrame(()=>{
+                if (!panelRef.current) return;
+                const elements = tabbable(panelRef.current);
+                setHasFocusableChildren(elements.length > 0);
+            });
+        };
+        const observer = new MutationObserver(()=>{
+            detectFocusableChildren();
+        });
+        requestAnimationFrame(()=>{
+            detectFocusableChildren();
+        });
+        observer.observe(panelRef.current, {
+            childList: true,
+            subtree: true,
+            attributes: true
+        });
+        return ()=>{
+            observer.disconnect();
+        };
+    }, []);
+    const hidden = selected !== value;
+    const tabId = getTabId(value);
+    return /*#__PURE__*/ jsx("div", {
+        id: id,
+        ref: handleRef,
+        role: "tabpanel",
+        "aria-labelledby": tabId,
+        className: clsx(withBaseName(), className),
+        hidden: hidden || void 0,
+        tabIndex: hidden || hasFocusableChildren ? void 0 : 0,
+        ...rest,
+        children: children
+    });
+});
+export { TabNextPanel_TabNextPanel as TabNextPanel };

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

@@ -0,0 +1,22 @@
+const css = `
+.saltTabNextTrigger {
+  all: unset;
+  gap: var(--salt-spacing-100);
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.saltTabNextTrigger:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+
+`;
+export default css;

package/src/tabs-next/TabNextTrigger.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useRef } from "react";
+import { useTabNext } from "./TabNextContext.js";
+import TabNextTrigger_0 from "./TabNextTrigger.css";
+import { useTabsNext } from "./TabsNextContext.js";
+const withBaseName = makePrefixer("saltTabNextTrigger");
+function getAriaDescription(count) {
+    if (count < 1) return;
+    if (1 === count) return "1 action available";
+    return `${count} actions available`;
+}
+const TabNextTrigger_TabNextTrigger = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { children, id: idProp, onClick, onKeyDown, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-tab-next-trigger",
+        css: TabNextTrigger_0,
+        window: targetWindow
+    });
+    const { setSelected, registerTab, getPanelId } = useTabsNext();
+    const { selected, value, focused, disabled, tabId, actions } = useTabNext();
+    const tabRef = useRef(null);
+    const id = tabId;
+    useIsomorphicLayoutEffect(()=>{
+        if (value && id && tabRef.current) return registerTab({
+            id,
+            value,
+            element: tabRef.current
+        });
+    }, [
+        value,
+        id,
+        registerTab
+    ]);
+    const handleClick = (event)=>{
+        setSelected(event, value);
+    };
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if ("Enter" === event.key || " " === event.key) setSelected(event, value);
+    };
+    const handleRef = useForkRef(tabRef, ref);
+    const panelId = getPanelId(value);
+    return /*#__PURE__*/ jsx("button", {
+        "aria-selected": selected,
+        "aria-disabled": disabled,
+        "aria-controls": panelId,
+        "aria-actions": clsx(actions) || void 0,
+        "aria-description": getAriaDescription(actions.length),
+        tabIndex: focused || selected ? void 0 : -1,
+        role: "tab",
+        type: "button",
+        onClick: disabled ? void 0 : handleClick,
+        onKeyDown: disabled ? void 0 : handleKeyDown,
+        className: withBaseName(),
+        id: id,
+        ref: handleRef,
+        ...rest,
+        children: children
+    });
+});
+export { TabNextTrigger_TabNextTrigger as TabNextTrigger };

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