@versini/ui-menu 5.3.3 → 6.0.0

package/dist/index.js

@@ -1,49 +1,179 @@
 /*!
-  @versini/ui-menu v5.3.3
-  © 2025 gizmette.com
+  @versini/ui-menu v6.0.0
+  © 2026 gizmette.com
 */
-try {
-  if (!window.__VERSINI_UI_MENU__) {
-    window.__VERSINI_UI_MENU__ = {
-      version: "5.3.3",
-      buildTime: "12/10/2025 08:22 AM EST",
-      homepage: "https://www.npmjs.com/package/@versini/ui-menu",
-      license: "MIT",
-    };
-  }
-} catch (error) {
-  // nothing to declare officer
-}
 
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead } from "@floating-ui/react";
-import { IconNext, IconSelected, IconUnSelected } from "@versini/ui-icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
-import react, { createContext, forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { IconNext, IconSelected, IconUnSelected } from "@versini/ui-icons";
 
-;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "@floating-ui/react"
 
-;// CONCATENATED MODULE: external "@versini/ui-icons"
 
-;// CONCATENATED MODULE: external "clsx"
 
-;// CONCATENATED MODULE: external "react"
+/* v8 ignore start - default context values are fallbacks, never used directly */ const MenuRootContext = createContext({
+    closeAll: ()=>{}
+});
+const MenuContentContext = createContext({
+    registerItem: ()=>{},
+    unregisterItem: ()=>{},
+    getItems: ()=>[],
+    activeIndex: -1,
+    setActiveIndex: ()=>{},
+    openSubMenuId: null,
+    setOpenSubMenuId: ()=>{},
+    close: ()=>{},
+    isSubMenu: false
+}); /* v8 ignore stop */ 
 
-;// CONCATENATED MODULE: ./src/components/Menu/MenuContext.tsx
 
-const MenuContext = /*#__PURE__*/ createContext({
-    getItemProps: ()=>({}),
-    activeIndex: null,
-    /* v8 ignore next 2 */ setActiveIndex: ()=>{},
-    setHasFocusInside: ()=>{},
-    isOpen: false,
-    allowHover: false,
-    parent: null
-});
+function getNextEnabledIndex(items, currentIndex, direction) {
+    const count = items.length;
+    /* v8 ignore start - empty items edge case */ if (count === 0) {
+        return -1;
+    }
+    /* v8 ignore stop */ let index = currentIndex;
+    for(let i = 0; i < count; i++){
+        index = (index + direction + count) % count;
+        if (!items[index].disabled) {
+            return index;
+        }
+    }
+    /* v8 ignore start - all items disabled edge case */ return currentIndex;
+/* v8 ignore stop */ }
+/* v8 ignore start - Home/End handlers with disabled item edge cases */ function getFirstEnabledIndex(items) {
+    for(let i = 0; i < items.length; i++){
+        if (!items[i].disabled) {
+            return i;
+        }
+    }
+    return -1;
+}
+function getLastEnabledIndex(items) {
+    for(let i = items.length - 1; i >= 0; i--){
+        if (!items[i].disabled) {
+            return i;
+        }
+    }
+    return -1;
+}
+/* v8 ignore stop */ function useMenuKeyboard({ menuRef, isOpen, activeIndex, setActiveIndex, getItems, onClose, isSubMenu = false, onOpenSubMenu, onCloseToParent }) {
+    /* v8 ignore start - focusItem bounds guard */ const focusItem = useCallback((index)=>{
+        const items = getItems();
+        if (index >= 0 && index < items.length) {
+            items[index].element.focus();
+        }
+    }, [
+        getItems
+    ]);
+    /* v8 ignore stop */ useEffect(()=>{
+        if (!isOpen || !menuRef.current) {
+            return;
+        }
+        const handleKeyDown = (event)=>{
+            const items = getItems();
+            /* v8 ignore start - items always exist when menu is open */ if (items.length === 0) {
+                return;
+            }
+            /* v8 ignore stop */ /* v8 ignore start - switch default branch (unmatched keys) */ switch(event.key){
+                /* v8 ignore stop */ case "ArrowDown":
+                    {
+                        event.preventDefault();
+                        const nextIndex = getNextEnabledIndex(items, activeIndex, 1);
+                        setActiveIndex(nextIndex);
+                        focusItem(nextIndex);
+                        break;
+                    }
+                case "ArrowUp":
+                    {
+                        event.preventDefault();
+                        const prevIndex = getNextEnabledIndex(items, activeIndex, -1);
+                        setActiveIndex(prevIndex);
+                        focusItem(prevIndex);
+                        break;
+                    }
+                case "Home":
+                    {
+                        event.preventDefault();
+                        const firstIndex = getFirstEnabledIndex(items);
+                        setActiveIndex(firstIndex);
+                        focusItem(firstIndex);
+                        break;
+                    }
+                case "End":
+                    {
+                        event.preventDefault();
+                        const lastIndex = getLastEnabledIndex(items);
+                        setActiveIndex(lastIndex);
+                        focusItem(lastIndex);
+                        break;
+                    }
+                case "Enter":
+                case " ":
+                    {
+                        event.preventDefault();
+                        /* v8 ignore start - activeIndex bounds and disabled guard */ if (activeIndex >= 0 && activeIndex < items.length && !items[activeIndex].disabled) {
+                            items[activeIndex].element.click();
+                        }
+                        break;
+                    }
+                case "Escape":
+                    {
+                        event.preventDefault();
+                        onClose();
+                        break;
+                    }
+                /* v8 ignore start - sub-menu keyboard nav requires full browser env */ case "ArrowRight":
+                    {
+                        if (activeIndex >= 0 && activeIndex < items.length && onOpenSubMenu) {
+                            const item = items[activeIndex].element;
+                            if (item.getAttribute("aria-haspopup") === "menu") {
+                                event.preventDefault();
+                                onOpenSubMenu(item);
+                            }
+                        }
+                        break;
+                    }
+                case "ArrowLeft":
+                    {
+                        if (isSubMenu && onCloseToParent) {
+                            event.preventDefault();
+                            onCloseToParent();
+                        }
+                        break;
+                    }
+                case "Tab":
+                    {
+                        event.preventDefault();
+                        onClose();
+                        break;
+                    }
+            }
+        };
+        const menuElement = menuRef.current;
+        menuElement.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            menuElement.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        isOpen,
+        activeIndex,
+        setActiveIndex,
+        getItems,
+        onClose,
+        focusItem,
+        menuRef,
+        isSubMenu,
+        onOpenSubMenu,
+        onCloseToParent
+    ]);
+    return {
+        focusItem
+    };
+}
 
-;// CONCATENATED MODULE: ./src/components/Menu/utilities.ts
 const getDisplayName = (element)=>{
     if (typeof element === "string") {
         return element;
@@ -54,13 +184,131 @@ const getDisplayName = (element)=>{
     if (typeof element === "object" && element !== null && "type" in element) {
         const type = element.type;
         if (typeof type === "function" || typeof type === "object") {
-            return type.displayName || type.name || "Component";
-        }
+            /* v8 ignore start */ return type.displayName || type.name || "Component";
+        /* v8 ignore stop */ }
     }
     return "Element";
 };
+const calculatePosition = (triggerRect, menuRect, placement, sideOffset, viewportWidth, viewportHeight)=>{
+    /* v8 ignore start - split always returns non-empty for valid placements */ const side = placement.split("-")[0] || "bottom";
+    /* v8 ignore stop */ const alignment = placement.includes("-") ? placement.split("-")[1] : "center";
+    let top = 0;
+    let left = 0;
+    // Calculate base position based on side
+    switch(side){
+        case "bottom":
+            top = triggerRect.bottom + sideOffset;
+            break;
+        case "top":
+            top = triggerRect.top - menuRect.height - sideOffset;
+            break;
+        case "right":
+            left = triggerRect.right + sideOffset;
+            break;
+        case "left":
+            left = triggerRect.left - menuRect.width - sideOffset;
+            break;
+    }
+    // Calculate alignment
+    if (side === "bottom" || side === "top") {
+        switch(alignment){
+            case "start":
+                left = triggerRect.left;
+                break;
+            case "end":
+                left = triggerRect.right - menuRect.width;
+                break;
+            default:
+                left = triggerRect.left + (triggerRect.width - menuRect.width) / 2;
+                break;
+        }
+    } else {
+        switch(alignment){
+            case "start":
+                top = triggerRect.top;
+                break;
+            case "end":
+                top = triggerRect.bottom - menuRect.height;
+                break;
+            default:
+                top = triggerRect.top + (triggerRect.height - menuRect.height) / 2;
+                break;
+        }
+    }
+    // Auto-flip if overflowing viewport
+    /* v8 ignore start - auto-flip with fallback when flipped position also overflows */ if (side === "bottom" && top + menuRect.height > viewportHeight) {
+        const flippedTop = triggerRect.top - menuRect.height - sideOffset;
+        if (flippedTop >= 0) {
+            top = flippedTop;
+        }
+    } else if (side === "top" && top < 0) {
+        const flippedTop = triggerRect.bottom + sideOffset;
+        if (flippedTop + menuRect.height <= viewportHeight) {
+            top = flippedTop;
+        }
+    } else if (side === "right" && left + menuRect.width > viewportWidth) {
+        const flippedLeft = triggerRect.left - menuRect.width - sideOffset;
+        if (flippedLeft >= 0) {
+            left = flippedLeft;
+        }
+    } else if (side === "left" && left < 0) {
+        const flippedLeft = triggerRect.right + sideOffset;
+        if (flippedLeft + menuRect.width <= viewportWidth) {
+            left = flippedLeft;
+        }
+    }
+    /* v8 ignore stop */ // Clamp to viewport bounds
+    left = Math.max(0, Math.min(left, viewportWidth - menuRect.width));
+    top = Math.max(0, Math.min(top, viewportHeight - menuRect.height));
+    return {
+        top,
+        left
+    };
+};
+
+
+
+function useMenuPosition({ triggerRef, menuRef, placement, sideOffset, isOpen }) {
+    const positionRef = useRef({
+        top: 0,
+        left: 0
+    });
+    const updatePosition = useCallback(()=>{
+        /* v8 ignore start - positioning requires real DOM layout */ if (!triggerRef.current || !menuRef.current) {
+            return;
+        }
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const position = calculatePosition(triggerRect, menuRect, placement, sideOffset, viewportWidth, viewportHeight);
+        positionRef.current = position;
+        menuRef.current.style.position = "fixed";
+        menuRef.current.style.top = `${position.top}px`;
+        menuRef.current.style.left = `${position.left}px`;
+        menuRef.current.style.margin = "0";
+    /* v8 ignore stop */ }, [
+        triggerRef,
+        menuRef,
+        placement,
+        sideOffset
+    ]);
+    useEffect(()=>{
+        if (isOpen) {
+            requestAnimationFrame(()=>{
+                updatePosition();
+            });
+        }
+    }, [
+        isOpen,
+        updatePosition
+    ]);
+    return {
+        updatePosition,
+        positionRef
+    };
+}
 
-;// CONCATENATED MODULE: ./src/components/Menu/Menu.tsx
 
 
 
@@ -68,362 +316,359 @@ const getDisplayName = (element)=>{
 
 
 
-const MenuComponent = /*#__PURE__*/ forwardRef(({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", ...props }, forwardedRef)=>{
+
+const CONTENT_CLASS = "z-100 rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2 plume plume-dark";
+const Menu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10 })=>{
     const [isOpen, setIsOpen] = useState(false);
-    const [hasFocusInside, setHasFocusInside] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(null);
-    const [allowHover, setAllowHover] = useState(false);
-    const elementsRef = useRef([]);
-    const labelsRef = useRef([]);
-    const parent = useContext(MenuContext);
-    const tree = useFloatingTree();
-    const nodeId = useFloatingNodeId();
-    const parentId = useFloatingParentNodeId();
-    const item = useListItem({
-        label: label !== "Open menu" ? label : null
-    });
-    const isNested = parentId != null;
-    const { floatingStyles, refs, context } = useFloating({
-        nodeId,
-        open: isOpen,
-        onOpenChange: (args)=>{
-            setIsOpen(args);
-            onOpenChange?.(args);
-        },
-        placement: isNested ? "right-start" : defaultPlacement,
-        strategy: "fixed",
-        middleware: [
-            offset(()=>{
-                /**
-					 * For nested menus, account for responsive padding differences.
-					 * The menu has p-4 (16px) on mobile and p-2 (8px) on sm+ breakpoints.
-					 * At 640px (Tailwind's sm breakpoint), padding changes from 16px to 8px.
-					 * We increase the offset at mobile sizes to compensate for the larger padding.
-					 */ if (isNested) {
-                    const isMobile = window.innerWidth < 640;
-                    return {
-                        mainAxis: isMobile ? 22 : 14,
-                        alignmentAxis: -4
-                    };
-                }
-                return {
-                    mainAxis: 10,
-                    alignmentAxis: 0
-                };
-            }),
-            flip(),
-            shift()
-        ],
-        whileElementsMounted: autoUpdate
-    });
-    const hover = useHover(context, {
-        enabled: isNested && allowHover,
-        delay: {
-            open: 75
-        },
-        handleClose: safePolygon({
-            blockPointerEvents: true
-        })
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [openSubMenuId, setOpenSubMenuId] = useState(null);
+    const menuId = useUniqueId("av-menu-");
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const itemsRef = useRef([]);
+    const isTogglingRef = useRef(false);
+    useMenuPosition({
+        triggerRef,
+        menuRef,
+        /* v8 ignore start - defaultPlacement always has a default value */ placement: defaultPlacement || "bottom-start",
+        /* v8 ignore stop */ sideOffset,
+        isOpen
     });
-    const click = useClick(context, {
-        event: "mousedown",
-        toggle: !isNested || !allowHover,
-        ignoreMouse: isNested && allowHover
-    });
-    const role = useRole(context, {
-        role: "menu"
-    });
-    const dismiss = useDismiss(context, {
-        bubbles: true
-    });
-    const listNavigation = useListNavigation(context, {
-        listRef: elementsRef,
-        activeIndex,
-        nested: isNested,
-        onNavigate: setActiveIndex,
-        loop: true
-    });
-    const typeahead = useTypeahead(context, {
-        listRef: labelsRef,
-        onMatch: isOpen ? setActiveIndex : undefined,
-        activeIndex
-    });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        hover,
-        click,
-        role,
-        dismiss,
-        listNavigation,
-        typeahead
-    ]);
-    const mergedRef = useMergeRefs([
-        refs.setReference,
-        item.ref,
-        forwardedRef
+    // Show/hide popover after the menu element is mounted/unmounted
+    /* v8 ignore start - popover API may not be available in test env */ useEffect(()=>{
+        if (isOpen && menuRef.current && typeof menuRef.current.showPopover === "function") {
+            try {
+                menuRef.current.showPopover();
+            } catch  {
+            // Popover might already be shown
+            }
+        }
+    }, [
+        isOpen
     ]);
-    // Event emitter allows you to communicate across tree components.
-    // This effect closes all menus when an item gets clicked anywhere in the tree.
-    useEffect(()=>{
-        /* v8 ignore next 3 */ if (!tree) {
+    /* v8 ignore stop */ const handleClose = useCallback(()=>{
+        /* v8 ignore start - guard against double-close */ if (!isOpen) {
             return;
         }
-        function handleTreeClick() {
-            setIsOpen(false);
-            onOpenChange?.(false);
+        /* v8 ignore stop */ setIsOpen(false);
+        setActiveIndex(-1);
+        setOpenSubMenuId(null);
+        onOpenChange?.(false);
+        /* v8 ignore start - popover API may not be available in test env */ if (menuRef.current && typeof menuRef.current.hidePopover === "function") {
+            try {
+                menuRef.current.hidePopover();
+            } catch  {
+            // Popover might already be hidden
+            }
         }
-        function onSubMenuOpen(event) {
-            if (event.nodeId !== nodeId && event.parentId === parentId) {
+        /* v8 ignore stop */ triggerRef.current?.focus();
+    }, [
+        isOpen,
+        onOpenChange
+    ]);
+    // Click-outside detection: only active when menu is open
+    /* v8 ignore start - click-outside detection requires full browser env */ useEffect(()=>{
+        if (!isOpen) {
+            return;
+        }
+        const handleClickOutside = (event)=>{
+            const target = event.target;
+            if (menuRef.current && !menuRef.current.contains(target) && triggerRef.current && !triggerRef.current.contains(target)) {
                 setIsOpen(false);
+                setActiveIndex(-1);
+                setOpenSubMenuId(null);
+                onOpenChange?.(false);
+                triggerRef.current?.focus();
             }
-        }
-        tree.events.on("click", handleTreeClick);
-        tree.events.on("menuopen", onSubMenuOpen);
+        };
+        // Use a timeout to avoid catching the opening click itself
+        const timeoutId = setTimeout(()=>{
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
         return ()=>{
-            tree.events.off("click", handleTreeClick);
-            tree.events.off("menuopen", onSubMenuOpen);
+            clearTimeout(timeoutId);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [
-        tree,
-        nodeId,
-        parentId,
+        isOpen,
         onOpenChange
     ]);
-    useEffect(()=>{
-        if (isOpen && tree) {
-            tree.events.emit("menuopen", {
-                parentId,
-                nodeId
-            });
+    /* v8 ignore stop */ const getItems = useCallback(()=>itemsRef.current, []);
+    const registerItem = useCallback((element, disabled)=>{
+        // Maintain DOM order by using compareDocumentPosition
+        const existing = itemsRef.current.findIndex((item)=>item.element === element);
+        /* v8 ignore start - re-registration on re-render */ if (existing >= 0) {
+            itemsRef.current[existing].disabled = disabled;
+            return;
         }
+        /* v8 ignore stop */ const newItem = {
+            element,
+            disabled
+        };
+        // Insert in DOM order
+        const insertIndex = itemsRef.current.findIndex((item)=>item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
+        /* v8 ignore start */ if (insertIndex === -1) {
+            itemsRef.current.push(newItem);
+        } else {
+            itemsRef.current.splice(insertIndex, 0, newItem);
+        }
+    /* v8 ignore stop */ }, []);
+    const unregisterItem = useCallback((element)=>{
+        itemsRef.current = itemsRef.current.filter((item)=>item.element !== element);
+    }, []);
+    /* v8 ignore start - sub-menu keyboard nav requires full browser env */ const handleOpenSubMenu = useCallback((element)=>{
+        element.click();
+    }, []);
+    /* v8 ignore stop */ const { focusItem } = useMenuKeyboard({
+        menuRef,
+        isOpen,
+        activeIndex,
+        setActiveIndex,
+        getItems,
+        onClose: handleClose,
+        onOpenSubMenu: handleOpenSubMenu
+    });
+    const handleOpen = useCallback(()=>{
+        setIsOpen(true);
+        onOpenChange?.(true);
+        // Focus first enabled item after menu renders
+        /* v8 ignore start - rAF does not execute in test env */ requestAnimationFrame(()=>{
+            const items = getItems();
+            for(let i = 0; i < items.length; i++){
+                if (!items[i].disabled) {
+                    setActiveIndex(i);
+                    focusItem(i);
+                    break;
+                }
+            }
+        });
+    /* v8 ignore stop */ }, [
+        onOpenChange,
+        getItems,
+        focusItem
+    ]);
+    const handleToggle = useCallback(()=>{
+        /* v8 ignore start - re-entrant guard for synthetic click dispatch */ if (isTogglingRef.current) {
+            return;
+        }
+        /* v8 ignore stop */ isTogglingRef.current = true;
+        /* v8 ignore start - toggle close when clicking trigger while menu is open */ if (isOpen) {
+            handleClose();
+        } else {
+            /* v8 ignore stop */ handleOpen();
+            /**
+			 * Dispatch a click event to parent elements.
+			 * This ensures that parent components like Tooltip can detect the
+			 * interaction and respond appropriately (e.g., disable tooltip display).
+			 */ /* v8 ignore start */ if (triggerRef.current) {
+                const clickEvent = new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window
+                });
+                triggerRef.current.dispatchEvent(clickEvent);
+            }
+        /* v8 ignore stop */ }
+        isTogglingRef.current = false;
     }, [
-        tree,
         isOpen,
-        nodeId,
-        parentId
+        handleClose,
+        handleOpen
     ]);
-    // Determine if "hover" logic can run based on input modality.
-    // This prevents unwanted focus sync as menus open/close with keyboard nav.
-    useEffect(()=>{
-        function onPointerMove({ pointerType }) {
-            if (pointerType !== "touch") {
-                setAllowHover(true);
+    /* v8 ignore start - trigger keyboard handler tested via integration */ const handleTriggerKeyDown = useCallback((event)=>{
+        if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+            event.preventDefault();
+            if (!isOpen) {
+                handleOpen();
             }
         }
-        function onKeyDown() {
-            setAllowHover(false);
-        }
-        window.addEventListener("pointermove", onPointerMove, {
-            once: true,
-            capture: true
-        });
-        window.addEventListener("keydown", onKeyDown, true);
-        return ()=>{
-            window.removeEventListener("pointermove", onPointerMove, {
-                capture: true
-            });
-            window.removeEventListener("keydown", onKeyDown, true);
-        };
-    }, []);
+    }, [
+        isOpen,
+        handleOpen
+    ]);
+    /* v8 ignore stop */ // Build trigger element with props
     const noInternalClick = getDisplayName(trigger) === "Button" || getDisplayName(trigger) === "ButtonIcon";
     const uiButtonsExtraProps = noInternalClick ? {
         noInternalClick,
         focusMode,
         mode
     } : {};
-    // For nested menus (sub-menus), render as a menu item trigger
-    if (isNested && !trigger) {
-        const buttonClass = clsx("flex items-center flex-row justify-between", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", {
-            "bg-surface-lighter": isOpen && !hasFocusInside
-        });
-        return /*#__PURE__*/ jsxs(FloatingNode, {
-            id: nodeId,
+    /* v8 ignore start - trigger is required in practice */ const triggerElement = /*#__PURE__*/ isValidElement(trigger) ? /*#__PURE__*/ cloneElement(trigger, {
+        ...uiButtonsExtraProps,
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-controls": menuId,
+        "data-state": isOpen ? "open" : "closed",
+        ref: triggerRef,
+        onClick: handleToggle,
+        onKeyDown: handleTriggerKeyDown
+    }) : null;
+    /* v8 ignore stop */ const contentContextValue = {
+        registerItem,
+        unregisterItem,
+        getItems,
+        activeIndex,
+        setActiveIndex,
+        openSubMenuId,
+        setOpenSubMenuId,
+        close: handleClose,
+        isSubMenu: false
+    };
+    return /*#__PURE__*/ jsx(MenuRootContext.Provider, {
+        value: {
+            closeAll: handleClose
+        },
+        children: /*#__PURE__*/ jsxs(MenuContentContext.Provider, {
+            value: contentContextValue,
             children: [
-                /*#__PURE__*/ jsxs("button", {
-                    ref: mergedRef,
-                    "data-open": isOpen ? "" : undefined,
-                    ...getReferenceProps(parent.getItemProps({
-                        ...props,
-                        className: buttonClass,
-                        onFocus (event) {
-                            props.onFocus?.(event);
-                            setHasFocusInside(false);
-                            parent.setHasFocusInside(true);
-                        },
-                        onMouseEnter (event) {
-                            props.onMouseEnter?.(event);
-                            if (parent.allowHover && parent.isOpen) {
-                                parent.setActiveIndex(item.index);
-                            }
-                        }
-                    })),
-                    children: [
-                        /*#__PURE__*/ jsx("span", {
-                            children: label
-                        }),
-                        /*#__PURE__*/ jsx(IconNext, {
-                            className: "ml-2",
-                            size: "size-3",
-                            monotone: true
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(MenuContext.Provider, {
-                    value: {
-                        activeIndex,
-                        setActiveIndex,
-                        getItemProps,
-                        setHasFocusInside,
-                        isOpen,
-                        allowHover,
-                        parent
-                    },
-                    children: /*#__PURE__*/ jsx(FloatingList, {
-                        elementsRef: elementsRef,
-                        labelsRef: labelsRef,
-                        children: isOpen && /*#__PURE__*/ jsx(FloatingPortal, {
-                            children: /*#__PURE__*/ jsx(FloatingFocusManager, {
-                                context: context,
-                                modal: false,
-                                initialFocus: -1,
-                                returnFocus: false,
-                                children: /*#__PURE__*/ jsx("div", {
-                                    ref: refs.setFloating,
-                                    className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
-                                    style: floatingStyles,
-                                    ...getFloatingProps(),
-                                    children: children
-                                })
-                            })
-                        })
-                    })
+                triggerElement,
+                isOpen && /*#__PURE__*/ jsx("div", {
+                    ref: menuRef,
+                    id: menuId,
+                    popover: "manual",
+                    role: "menu",
+                    className: CONTENT_CLASS,
+                    children: children
                 })
             ]
-        });
-    }
-    const triggerElement = /*#__PURE__*/ react.cloneElement(trigger, {
-        ...uiButtonsExtraProps,
-        "aria-label": label,
-        "data-open": isOpen ? "" : undefined,
-        "data-focus-inside": hasFocusInside ? "" : undefined,
-        ref: mergedRef,
-        ...getReferenceProps(parent.getItemProps({
-            ...props
-        }))
+        })
     });
-    return /*#__PURE__*/ jsxs(FloatingNode, {
-        id: nodeId,
+};
+Menu.displayName = "Menu";
+
+
+
+
+const MenuGroupLabel = ({ className, icon, children, ...props })=>{
+    const groupLabelClass = clsx(className, "pt-1 pb-2 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium", {
+        "flex items-center": icon
+    });
+    const labelSpanClass = icon ? "px-2" : "";
+    return /*#__PURE__*/ jsxs("div", {
+        className: groupLabelClass,
+        ...props,
         children: [
-            triggerElement,
-            /*#__PURE__*/ jsx(MenuContext.Provider, {
-                value: {
-                    activeIndex,
-                    setActiveIndex,
-                    getItemProps,
-                    setHasFocusInside,
-                    isOpen,
-                    allowHover,
-                    parent
-                },
-                children: /*#__PURE__*/ jsx(FloatingList, {
-                    elementsRef: elementsRef,
-                    labelsRef: labelsRef,
-                    children: isOpen && /*#__PURE__*/ jsx(FloatingPortal, {
-                        children: /*#__PURE__*/ jsx(FloatingFocusManager, {
-                            context: context,
-                            modal: false,
-                            initialFocus: 0,
-                            returnFocus: true,
-                            children: /*#__PURE__*/ jsx("div", {
-                                ref: refs.setFloating,
-                                className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
-                                style: floatingStyles,
-                                ...getFloatingProps(),
-                                children: children
-                            })
-                        })
-                    })
-                })
+            icon,
+            /*#__PURE__*/ jsx("span", {
+                className: labelSpanClass,
+                children: children
             })
         ]
     });
-});
-const Menu = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const parentId = useFloatingParentNodeId();
-    // If parentId is null, this is a root menu - wrap in FloatingTree
-    if (parentId === null) {
-        return /*#__PURE__*/ jsx(FloatingTree, {
-            children: /*#__PURE__*/ jsx(MenuComponent, {
-                ...props,
-                ref: ref
-            })
-        });
-    }
-    // This is a nested sub-menu - don't wrap in FloatingTree
-    return /*#__PURE__*/ jsx(MenuComponent, {
-        ...props,
-        ref: ref
-    });
-});
-Menu.displayName = "Menu";
-MenuComponent.displayName = "MenuComponent";
+};
+MenuGroupLabel.displayName = "MenuGroupLabel";
 
-;// CONCATENATED MODULE: ./src/components/Menu/MenuItem.tsx
 
 
 
 
 
 
-const MenuItem = /*#__PURE__*/ forwardRef(({ label, disabled, icon, raw = false, children, ignoreClick = false, selected, ...props }, forwardedRef)=>{
-    let buttonSpanClass = "";
-    const menu = useContext(MenuContext);
-    const item = useListItem({
-        label: disabled ? null : label
-    });
-    const tree = useFloatingTree();
-    const mergedRef = useMergeRefs([
-        item.ref,
-        forwardedRef
+const ITEM_CLASS = clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-highlighted:bg-surface-lighter data-highlighted:border-border-medium data-highlighted:underline", "data-disabled:cursor-not-allowed data-disabled:text-copy-medium");
+const MenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick = false, selected, onSelect, onClick, onFocus, onMouseEnter, ...props })=>{
+    const itemRef = useRef(null);
+    const { closeAll } = useContext(MenuRootContext);
+    const { registerItem, unregisterItem, getItems, activeIndex, setActiveIndex, setOpenSubMenuId } = useContext(MenuContentContext);
+    useEffect(()=>{
+        const element = itemRef.current;
+        /* v8 ignore start - ref is always set after mount */ if (element) {
+            registerItem(element, !!disabled);
+            return ()=>{
+                unregisterItem(element);
+            };
+        }
+    /* v8 ignore stop */ }, [
+        disabled,
+        registerItem,
+        unregisterItem
     ]);
-    if (raw && children) {
+    const getMyIndex = ()=>{
+        const items = getItems();
+        return items.findIndex((item)=>item.element === itemRef.current);
+    };
+    const myIndex = getMyIndex();
+    const isHighlighted = myIndex >= 0 && activeIndex === myIndex;
+    const handleSelect = (event)=>{
+        /* v8 ignore start - disabled items are not clickable in practice */ if (disabled) {
+            return;
+        }
+        /* v8 ignore stop */ const syntheticEvent = new Event("select", {
+            bubbles: true,
+            cancelable: true
+        });
+        if (ignoreClick) {
+            syntheticEvent.preventDefault();
+        }
+        onSelect?.(syntheticEvent);
+        /* v8 ignore start - optional onClick may not be provided */ onClick?.(event);
+        /* v8 ignore stop */ if (!ignoreClick) {
+            closeAll();
+        }
+    };
+    const handleMouseEnter = (event)=>{
+        /* v8 ignore start - disabled items do not receive hover highlight */ if (disabled) {
+            return;
+        }
+        /* v8 ignore stop */ const myIndex = getMyIndex();
+        /* v8 ignore start - item is always registered when mouse enters */ if (myIndex >= 0) {
+            setActiveIndex(myIndex);
+            itemRef.current?.focus();
+        }
+        /* v8 ignore stop */ // Close any open sub-menu when hovering a regular item
+        setOpenSubMenuId(null);
+        onMouseEnter?.(event);
+    };
+    /* v8 ignore start - raw items with disabled attribute */ if (raw && children) {
         return /*#__PURE__*/ jsx("div", {
+            ref: itemRef,
             role: "menuitem",
-            ...menu.getItemProps({
-                onClick (event) {
-                    if (!ignoreClick) {
-                        props.onClick?.(event);
-                        tree?.events.emit("click");
-                    }
+            tabIndex: isHighlighted ? 0 : -1,
+            className: "outline-hidden",
+            "data-highlighted": isHighlighted ? "" : undefined,
+            "data-disabled": disabled ? "" : undefined,
+            "aria-disabled": disabled || undefined,
+            onClick: (event)=>{
+                /* v8 ignore start - disabled items are not clickable in practice */ if (disabled) {
+                    return;
                 }
-            }),
+                /* v8 ignore stop */ const syntheticEvent = new Event("select", {
+                    bubbles: true,
+                    cancelable: true
+                });
+                if (ignoreClick) {
+                    syntheticEvent.preventDefault();
+                }
+                onSelect?.(syntheticEvent);
+                /* v8 ignore start - optional onClick may not be provided */ onClick?.(event);
+                /* v8 ignore stop */ if (!ignoreClick) {
+                    closeAll();
+                }
+            },
+            onMouseEnter: handleMouseEnter,
+            ...props,
             children: children
         });
     }
+    /* v8 ignore stop */ let buttonSpanClass = "";
     if (icon) {
         buttonSpanClass = "pl-2";
     }
-    const buttonClass = clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", {
+    const itemClass = clsx(ITEM_CLASS, {
         "bg-none": !disabled && !selected
     });
-    return /*#__PURE__*/ jsxs("button", {
-        ...props,
-        ref: mergedRef,
+    return /*#__PURE__*/ jsxs("div", {
+        ref: itemRef,
         role: "menuitem",
-        className: buttonClass,
-        tabIndex: 0,
-        disabled: disabled,
-        ...menu.getItemProps({
-            onClick (event) {
-                if (!ignoreClick) {
-                    props.onClick?.(event);
-                    tree?.events.emit("click");
-                }
-            },
-            onFocus (event) {
-                props.onFocus?.(event);
-                menu.setHasFocusInside(true);
-            }
-        }),
+        tabIndex: isHighlighted ? 0 : -1,
+        className: itemClass,
+        "data-highlighted": isHighlighted ? "" : undefined,
+        "data-disabled": disabled ? "" : undefined,
+        "aria-disabled": disabled || undefined,
+        onClick: handleSelect,
+        onFocus: onFocus,
+        onMouseEnter: handleMouseEnter,
+        ...props,
         children: [
             selected === true && /*#__PURE__*/ jsx(IconSelected, {
                 className: "text-copy-success mr-2",
@@ -440,25 +685,253 @@ const MenuItem = /*#__PURE__*/ forwardRef(({ label, disabled, icon, raw = false,
             })
         ]
     });
-});
+};
 MenuItem.displayName = "MenuItem";
+
+
+
 const MenuSeparator = ({ className, ...props })=>{
     const separatorClass = clsx(className, "my-1 border-t border-border-medium");
     return /*#__PURE__*/ jsx("div", {
+        role: "separator",
         className: separatorClass,
         ...props
     });
 };
-const MenuGroupLabel = ({ className, ...props })=>{
-    const groupLabelClass = clsx(className, "pt-1 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium");
-    return /*#__PURE__*/ jsx("div", {
-        className: groupLabelClass,
-        ...props
+MenuSeparator.displayName = "MenuSeparator";
+
+
+
+
+
+
+
+
+
+const SUB_CONTENT_CLASS = "z-[60] rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2 mx-3";
+const SUB_TRIGGER_CLASS = clsx("flex items-center flex-row justify-between", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-highlighted:bg-surface-lighter data-highlighted:border-border-medium data-highlighted:underline", "data-[state=open]:bg-surface-lighter");
+const MenuSub = ({ label, icon, children, disabled = false, sideOffset = 14 })=>{
+    const subMenuId = useUniqueId("av-menu-sub-");
+    const [isSubOpen, setIsSubOpen] = useState(false);
+    const [subActiveIndex, setSubActiveIndex] = useState(-1);
+    const [subOpenSubMenuId, setSubOpenSubMenuId] = useState(null);
+    const triggerItemRef = useRef(null);
+    const subMenuRef = useRef(null);
+    const subItemsRef = useRef([]);
+    const parentContext = useContext(MenuContentContext);
+    const rootContext = useContext(MenuRootContext);
+    // Register as an item in the parent menu
+    useEffect(()=>{
+        const element = triggerItemRef.current;
+        /* v8 ignore start - ref is always set after mount */ if (element) {
+            parentContext.registerItem(element, !!disabled);
+            return ()=>{
+                parentContext.unregisterItem(element);
+            };
+        }
+    /* v8 ignore stop */ }, [
+        disabled,
+        parentContext.registerItem,
+        parentContext.unregisterItem
+    ]);
+    // Close if a sibling sub-menu opens or parent signals close (openSubMenuId set to null)
+    useEffect(()=>{
+        if (isSubOpen && parentContext.openSubMenuId !== subMenuId) {
+            setIsSubOpen(false);
+            setSubActiveIndex(-1);
+            /* v8 ignore start */ if (subMenuRef.current && typeof subMenuRef.current.hidePopover === "function") {
+                try {
+                    subMenuRef.current.hidePopover();
+                } catch  {
+                // Already hidden
+                }
+            }
+        /* v8 ignore stop */ }
+    }, [
+        parentContext.openSubMenuId,
+        subMenuId,
+        isSubOpen
+    ]);
+    useMenuPosition({
+        triggerRef: triggerItemRef,
+        menuRef: subMenuRef,
+        placement: "right-start",
+        sideOffset,
+        isOpen: isSubOpen
+    });
+    // Show popover after the sub-menu element is mounted
+    /* v8 ignore start - popover API may not be available in test env */ useEffect(()=>{
+        if (isSubOpen && subMenuRef.current && typeof subMenuRef.current.showPopover === "function") {
+            try {
+                subMenuRef.current.showPopover();
+            } catch  {
+            // Popover might already be shown
+            }
+        }
+    }, [
+        isSubOpen
+    ]);
+    /* v8 ignore stop */ const getSubItems = useCallback(()=>subItemsRef.current, []);
+    const registerSubItem = useCallback((element, itemDisabled)=>{
+        const existing = subItemsRef.current.findIndex((item)=>item.element === element);
+        /* v8 ignore start - re-registration on re-render */ if (existing >= 0) {
+            subItemsRef.current[existing].disabled = itemDisabled;
+            return;
+        }
+        /* v8 ignore stop */ const newItem = {
+            element,
+            disabled: itemDisabled
+        };
+        const insertIndex = subItemsRef.current.findIndex((item)=>item.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
+        /* v8 ignore start */ if (insertIndex === -1) {
+            subItemsRef.current.push(newItem);
+        } else {
+            subItemsRef.current.splice(insertIndex, 0, newItem);
+        }
+    /* v8 ignore stop */ }, []);
+    const unregisterSubItem = useCallback((element)=>{
+        subItemsRef.current = subItemsRef.current.filter((item)=>item.element !== element);
+    }, []);
+    /* v8 ignore start - closeSubMenu requires full browser env */ const closeSubMenu = useCallback(()=>{
+        setIsSubOpen(false);
+        setSubActiveIndex(-1);
+        setSubOpenSubMenuId(null);
+        if (subMenuRef.current && typeof subMenuRef.current.hidePopover === "function") {
+            try {
+                subMenuRef.current.hidePopover();
+            } catch  {
+            // Already hidden
+            }
+        }
+        triggerItemRef.current?.focus();
+    }, []);
+    /* v8 ignore stop */ const openSubMenu = useCallback(()=>{
+        /* v8 ignore start - disabled sub-triggers cannot be opened */ if (disabled) {
+            return;
+        }
+        /* v8 ignore stop */ setIsSubOpen(true);
+        parentContext.setOpenSubMenuId(subMenuId);
+        // Focus first enabled item after render
+        /* v8 ignore start - rAF does not execute in test env */ requestAnimationFrame(()=>{
+            const items = getSubItems();
+            for(let i = 0; i < items.length; i++){
+                if (!items[i].disabled) {
+                    setSubActiveIndex(i);
+                    items[i].element.focus();
+                    break;
+                }
+            }
+        });
+    /* v8 ignore stop */ }, [
+        disabled,
+        parentContext,
+        subMenuId,
+        getSubItems
+    ]);
+    /* v8 ignore start - sub-menu keyboard nav requires full browser env */ const handleSubOpenSubMenu = useCallback((element)=>{
+        element.click();
+    }, []);
+    /* v8 ignore stop */ useMenuKeyboard({
+        menuRef: subMenuRef,
+        isOpen: isSubOpen,
+        activeIndex: subActiveIndex,
+        setActiveIndex: setSubActiveIndex,
+        getItems: getSubItems,
+        /* v8 ignore start - sub-menu escape close */ onClose: ()=>{
+            rootContext.closeAll();
+        },
+        /* v8 ignore stop */ isSubMenu: true,
+        onOpenSubMenu: handleSubOpenSubMenu,
+        onCloseToParent: closeSubMenu
+    });
+    const handleTriggerClick = ()=>{
+        /* v8 ignore start - disabled sub-triggers are not clickable in practice */ if (disabled) {
+            return;
+        }
+        /* v8 ignore stop */ /* v8 ignore start - click always follows mouseenter which already opens */ if (!isSubOpen) {
+            openSubMenu();
+        }
+    /* v8 ignore stop */ };
+    /* v8 ignore start - mouse enter always finds registered item */ const handleTriggerMouseEnter = ()=>{
+        const items = parentContext.getItems();
+        const myIndex = items.findIndex((item)=>item.element === triggerItemRef.current);
+        if (myIndex >= 0) {
+            parentContext.setActiveIndex(myIndex);
+            triggerItemRef.current?.focus();
+        }
+        // Open sub-menu on hover (WAI-ARIA: hover opens sub-menus when parent menu is already open)
+        if (!isSubOpen && !disabled) {
+            openSubMenu();
+        }
+    };
+    /* v8 ignore stop */ const myIndex = parentContext.getItems().findIndex((item)=>item.element === triggerItemRef.current);
+    const isHighlighted = myIndex >= 0 && parentContext.activeIndex === myIndex;
+    const labelSpanClass = icon ? "pl-2" : "";
+    const subContentContextValue = {
+        registerItem: registerSubItem,
+        unregisterItem: unregisterSubItem,
+        getItems: getSubItems,
+        activeIndex: subActiveIndex,
+        setActiveIndex: setSubActiveIndex,
+        openSubMenuId: subOpenSubMenuId,
+        setOpenSubMenuId: setSubOpenSubMenuId,
+        close: closeSubMenu,
+        isSubMenu: true
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                ref: triggerItemRef,
+                role: "menuitem",
+                "aria-haspopup": "menu",
+                "aria-expanded": isSubOpen,
+                "aria-controls": subMenuId,
+                tabIndex: isHighlighted ? 0 : -1,
+                className: SUB_TRIGGER_CLASS,
+                "data-state": isSubOpen ? "open" : "closed",
+                "data-highlighted": isHighlighted ? "" : undefined,
+                /* v8 ignore start - disabled sub-trigger not tested */ "data-disabled": disabled ? "" : undefined,
+                "aria-disabled": disabled || undefined,
+                /* v8 ignore stop */ onClick: handleTriggerClick,
+                onMouseEnter: handleTriggerMouseEnter,
+                children: [
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "flex items-center",
+                        children: [
+                            icon,
+                            /*#__PURE__*/ jsx("span", {
+                                className: labelSpanClass,
+                                children: label
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(IconNext, {
+                        className: "ml-2",
+                        size: "size-3",
+                        monotone: true
+                    })
+                ]
+            }),
+            isSubOpen && /*#__PURE__*/ jsx("div", {
+                ref: subMenuRef,
+                id: subMenuId,
+                popover: "manual",
+                role: "menu",
+                className: SUB_CONTENT_CLASS,
+                children: /*#__PURE__*/ jsx(MenuContentContext.Provider, {
+                    value: subContentContextValue,
+                    children: children
+                })
+            })
+        ]
     });
 };
+MenuSub.displayName = "MenuSub";
+
+
+
 
-;// CONCATENATED MODULE: ./src/components/index.ts
 
 
 
-export { Menu, MenuGroupLabel, MenuItem, MenuSeparator };
+export { Menu, MenuGroupLabel, MenuItem, MenuSeparator, MenuSub };