@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/PopMenu-BkXfm6Sz.mjs

@@ -0,0 +1,455 @@
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+
+import { useAnimationControls, motion } from "motion/react";
+
+import { createContext, useContext, useId, useCallback, useMemo, useState, useLayoutEffect, useEffect, useRef } from "react";
+
+import { createPortal } from "react-dom";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import "../theme/colors.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import { s as setStyle, a as classNames, m as mergedPresenceMotionValues } from "./misc-DI5GSqkt.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { r as resolveShortcut } from "./resolveShortcut-C43ivgMc.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+var styles_popMenu = "PopMenu-module_popMenu__1-rbw", styles_popMenuItem = "PopMenu-module_popMenuItem__bhsKz", styles_popMenuItemWrapper = "PopMenu-module_popMenuItemWrapper__gbolk", styles_left = "PopMenu-module_left__lZQ04", styles_label = "PopMenu-module_label__R7jJ8", styles_right = "PopMenu-module_right__T09dT", styles_icon = "PopMenu-module_icon__2HnQ5", styles_shortcut = "PopMenu-module_shortcut__5yH1I", styles_popMenuGroupWrapper = "PopMenu-module_popMenuGroupWrapper__2P2cs", styles_groupTitle = "PopMenu-module_groupTitle__C7tWI";
+
+const PopMenuContext = createContext(void 0), PopMenuActiveSubMenuContext = createContext(void 0), noopDismiss = () => {};
+
+function usePopMenuActions() {
+    return useContext(PopMenuContext);
+}
+
+function PopMenuItem(props) {
+    var _a, _b, _c, _d;
+    const {children: children, data: data, dismissAll: dismissAllProp, onClick: onClick, autoDismiss: autoDismiss, onHover: onHover, id: id, name: name, icon: icon, label: label, toggle: toggle, toggled: toggled = !1, shortcut: shortcut, subMenu: subMenu, backgroundColor: backgroundColor = "var(--core-surface-secondary)", backgroundColorHover: backgroundColorHover = "var(--core-fill-secondary)", textColor: textColor = "var(--core-text-primary)", textColorHover: textColorHover = "var(--core-text-primary)", textColorDisabled: textColorDisabled = "var(--core-text-tertiary)", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-primary)", iconColorDisabled: iconColorDisabled = "var(--core-text-tertiary)", toggleIcon: toggleIcon = "basic.check", subMenuIcon: subMenuIcon = "arrows.chevron-right", iconSize: iconSize = 16, iconGap: iconGap = 6, gap: gap = 24, padding: padding = "3px 4px", textSize: textSize = "m", level: level, className: className = "", style: style, disabled: disabled, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "aria-label": ariaLabel} = props, rest = __rest(props, [ "children", "data", "dismissAll", "onClick", "autoDismiss", "onHover", "id", "name", "icon", "label", "toggle", "toggled", "shortcut", "subMenu", "backgroundColor", "backgroundColorHover", "textColor", "textColorHover", "textColorDisabled", "iconColor", "iconColorHover", "iconColorDisabled", "toggleIcon", "subMenuIcon", "iconSize", "iconGap", "gap", "padding", "textSize", "level", "className", "style", "disabled", "onMouseEnter", "onMouseLeave", "aria-label" ]), menu = usePopMenuActions(), activeSubMenuId = useContext(PopMenuActiveSubMenuContext), dismissAll = null !== (_b = null !== (_a = null == menu ? void 0 : menu.dismissAll) && void 0 !== _a ? _a : dismissAllProp) && void 0 !== _b ? _b : noopDismiss, isDisabled = Boolean(disabled || !0 === props["aria-disabled"] || "true" === props["aria-disabled"]), generatedId = useId(), itemId = (null == id ? void 0 : id.trim()) || generatedId, itemName = (null == name ? void 0 : name.trim()) || (null == label ? void 0 : label.trim()) || (null == id ? void 0 : id.trim()), accessibleName = null != ariaLabel ? ariaLabel : itemName || (null != children ? void 0 : "Menu item"), shortcutLabel = "string" == typeof shortcut ? shortcut : shortcut && resolveShortcut(shortcut), handleClick = useCallback(event => {
+        var _a;
+        if (event.stopPropagation(), isDisabled) return;
+        const item = {
+            id: id,
+            label: label,
+            dismissAll: dismissAll
+        };
+        void 0 !== data && (item.data = data), void 0 !== autoDismiss && (item.autoDismiss = autoDismiss), 
+        toggle && (item.toggle = !0, item.toggled = !toggled), subMenu && (item.subMenu = subMenu), 
+        null == onClick || onClick(event, item), null === (_a = null == menu ? void 0 : menu.onClickItem) || void 0 === _a || _a.call(menu, event, item);
+    }, [ onClick, data, id, label, toggle, toggled, subMenu, dismissAll, autoDismiss, isDisabled, menu ]), cssVars = useMemo(() => ({
+        "--item-icon-color": iconColor,
+        "--item-icon-color-hover": iconColorHover,
+        "--item-icon-color-disabled": iconColorDisabled,
+        "--icon-size": setStyle(iconSize),
+        "--icon-gap": setStyle(iconGap),
+        "--background-color": backgroundColor,
+        "--background-color-hover": isDisabled ? backgroundColor : backgroundColorHover,
+        "--text-color": isDisabled ? textColorDisabled : textColor,
+        "--text-color-hover": isDisabled ? textColorDisabled : textColorHover,
+        "--item-wrapper-padding": setStyle(padding),
+        "--item-gap": setStyle(gap),
+        "--shortcut-color": isDisabled ? textColorDisabled : "var(--core-text-secondary)"
+    }), [ backgroundColor, backgroundColorHover, textColor, textColorHover, textColorDisabled, isDisabled, iconColor, iconColorHover, iconColorDisabled, iconSize, iconGap, padding, gap ]);
+    return jsx("button", Object.assign({}, rest, {
+        disabled: disabled,
+        role: toggle ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": toggle ? toggled : void 0,
+        "aria-haspopup": subMenu ? "menu" : void 0,
+        "aria-expanded": subMenu ? activeSubMenuId === itemId || null !== (_c = props["aria-expanded"]) && void 0 !== _c && _c : void 0,
+        tabIndex: null !== (_d = props.tabIndex) && void 0 !== _d ? _d : -1,
+        id: itemId,
+        "aria-label": accessibleName,
+        type: "button",
+        className: classNames(styles_popMenuItem, `body-${textSize}-regular`, className),
+        onClick: handleClick,
+        style: Object.assign(Object.assign({}, cssVars), style),
+        onMouseEnter: e => {
+            var _a;
+            isDisabled || (null == onHover || onHover(e, {
+                id: id,
+                label: label
+            }), null === (_a = null == menu ? void 0 : menu.onHoverItem) || void 0 === _a || _a.call(menu, e, {
+                id: id,
+                label: label
+            }), null == onMouseEnter || onMouseEnter(e));
+        },
+        onMouseLeave: e => {
+            isDisabled || null == onMouseLeave || onMouseLeave(e);
+        },
+        children: jsx("div", {
+            className: styles_popMenuItemWrapper,
+            children: null != children ? children : jsxs(Fragment, {
+                children: [ jsxs("div", {
+                    className: styles_left,
+                    children: [ icon && jsx("div", {
+                        className: styles_icon,
+                        "aria-hidden": "true",
+                        children: jsx(Icon, {
+                            name: icon,
+                            size: iconSize,
+                            stroke: 1.5,
+                            strokeColor: "var(--item-icon-color-current)"
+                        })
+                    }), jsx("span", {
+                        className: styles_label,
+                        children: label
+                    }) ]
+                }), jsxs("div", {
+                    className: classNames(styles_right, "body-s-regular"),
+                    children: [ toggle && toggled && jsx("div", {
+                        className: styles_icon,
+                        "aria-hidden": "true",
+                        children: jsx(Icon, {
+                            name: null != toggleIcon ? toggleIcon : void 0,
+                            size: 20,
+                            stroke: 1.5,
+                            strokeColor: "var(--item-toggle-color-current)"
+                        })
+                    }), subMenu && jsx("div", {
+                        className: styles_icon,
+                        "aria-hidden": "true",
+                        children: jsx(Icon, {
+                            name: null != subMenuIcon ? subMenuIcon : void 0,
+                            size: 20,
+                            stroke: 1.5,
+                            strokeColor: "var(--item-submenu-color-current)"
+                        })
+                    }), shortcutLabel && jsx("span", {
+                        className: styles_shortcut,
+                        children: shortcutLabel
+                    }) ]
+                }) ]
+            })
+        })
+    }));
+}
+
+function PopMenuGroup(rawProps) {
+    const _a = resolveColorProps(rawProps), {children: children, title: title, name: name, id: id, items: items, dismissAll: dismissAll, onClickItem: onClickItem, onHoverItem: onHoverItem, textColor: textColor = "var(--core-text-secondary)", textColorHover: textColorHover = textColor, textSize: textSize = "s", borderWidth: borderWidth = 1, borderColor: borderColor = "var(--core-fill-primary)", className: className = "", padding: padding = "var(--spacing-s) calc(var(--spacing-s) + var(--spacing-xxs)) 0", gap: gap = "var(--spacing-xxs)", style: style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy} = _a, rest = __rest(_a, [ "children", "title", "name", "id", "items", "dismissAll", "onClickItem", "onHoverItem", "textColor", "textColorHover", "textSize", "borderWidth", "borderColor", "className", "padding", "gap", "style", "aria-label", "aria-labelledby" ]), generatedId = useId(), groupId = (null == id ? void 0 : id.trim()) || generatedId, hasTitle = Boolean(null == title ? void 0 : title.trim()), titleId = `${groupId}-title`, groupName = (null == ariaLabel ? void 0 : ariaLabel.trim()) || (null == name ? void 0 : name.trim()) || (null == title ? void 0 : title.trim()) || (null == id ? void 0 : id.trim()) || "Menu group", groupStyle = Object.assign({
+        "--group-text-color": textColor,
+        "--group-text-color-hover": textColorHover,
+        "--group-border-width": setStyle(borderWidth),
+        "--group-border-color": borderColor,
+        "--group-padding": setStyle(padding),
+        "--group-margin-gap": setStyle(gap),
+        "--group-wrapper-padding-top": hasTitle ? 0 : setStyle(gap)
+    }, style), parent = usePopMenuActions(), groupActions = useMemo(() => {
+        var _a, _b;
+        return {
+            dismissAll: null !== (_b = null !== (_a = null == parent ? void 0 : parent.dismissAll) && void 0 !== _a ? _a : dismissAll) && void 0 !== _b ? _b : noopDismiss,
+            onClickItem: (event, info) => {
+                var _a;
+                null == onClickItem || onClickItem(event, info), null === (_a = null == parent ? void 0 : parent.onClickItem) || void 0 === _a || _a.call(parent, event, info);
+            },
+            onHoverItem: (event, info) => {
+                var _a;
+                null == onHoverItem || onHoverItem(event, info), null === (_a = null == parent ? void 0 : parent.onHoverItem) || void 0 === _a || _a.call(parent, event, info);
+            }
+        };
+    }, [ parent, dismissAll, onClickItem, onHoverItem ]);
+    return jsx(PopMenuContext.Provider, {
+        value: groupActions,
+        children: jsxs("div", Object.assign({}, rest, {
+            role: "group",
+            id: groupId,
+            "aria-label": groupName,
+            "aria-labelledby": ariaLabelledBy || ((null == ariaLabel ? void 0 : ariaLabel.trim()) || (null == name ? void 0 : name.trim()) ? void 0 : hasTitle ? titleId : void 0),
+            className: classNames(styles_popMenuGroupWrapper, className),
+            style: groupStyle,
+            children: [ hasTitle && jsx("div", {
+                id: titleId,
+                className: classNames(styles_groupTitle, `body-${textSize}-regular`),
+                children: title
+            }), null != children ? children : null == items ? void 0 : items.map((item, index) => {
+                var _a;
+                return jsx(PopMenuItem, Object.assign({}, item), (null === (_a = item.id) || void 0 === _a ? void 0 : _a.trim()) ? `id:${item.id.trim()}` : `index:${index}`);
+            }) ]
+        }))
+    });
+}
+
+const hosts = new WeakMap;
+
+const PortalContext = createContext(void 0), BranchDismissContext = createContext(void 0), RootCallerContext = createContext(void 0), reducedMotionState = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    scale: 1,
+    scaleX: 1,
+    scaleY: 1,
+    rotate: 0,
+    rotateX: 0,
+    rotateY: 0,
+    skewX: 0,
+    skewY: 0
+}, reducedMotionValues = {
+    initial: reducedMotionState,
+    animate: reducedMotionState,
+    exit: reducedMotionState
+}, defaultMotionValues = {
+    initial: {
+        y: 5,
+        opacity: 0
+    },
+    animate: {
+        y: 0,
+        opacity: 1
+    },
+    exit: {
+        y: 5,
+        opacity: 0
+    }
+};
+
+function PopMenu(props) {
+    var _a, _b;
+    const {level: level = 0, children: children, id: id, name: name, options: options, minWidth: minWidth, padding: padding = "4px 2px", backgroundColor: backgroundColor = "var(--core-surface-secondary)", borderRadius: borderRadius = "var(--corner-l)", borderWidth: borderWidth = 1, borderColor: borderColor = "var(--core-fill-primary)", onClickItem: onClickItem, onHoverItem: onHoverItem, onDismiss: onDismiss, dismissAll: dismissAll, motionValues: motionValues, transition: transition, caller: caller, portalContainer: portalContainer, offset: offset = (level > 0 ? "right" : "bottom"), gap: gap = (level > 0 ? -24 : 2)} = props, divAttributes = __rest(props, [ "level", "children", "id", "name", "options", "minWidth", "padding", "backgroundColor", "borderRadius", "borderWidth", "borderColor", "onClickItem", "onHoverItem", "onDismiss", "dismissAll", "motionValues", "transition", "caller", "portalContainer", "offset", "gap" ]), inheritedPortal = useContext(PortalContext), portalTarget = function(caller, preference, inherited) {
+        const automatic = "auto" === preference || void 0 === preference && void 0 === inherited, [managed, setManaged] = useState();
+        return useLayoutEffect(() => {
+            if (!automatic || !caller) return;
+            const root = caller.getRootNode(), scope = caller.closest('[data-slice-theme-scope], dialog, [role="dialog"]'), parent = null != scope ? scope : root.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? root : caller.ownerDocument.body;
+            let host = hosts.get(parent);
+            if (!host) {
+                const element = caller.ownerDocument.createElement("div");
+                element.dataset.slicePopMenuHost = "", parent.appendChild(element), host = {
+                    element: element,
+                    users: 0
+                }, hosts.set(parent, host);
+            }
+            const acquired = host;
+            return acquired.users += 1, setManaged({
+                caller: caller,
+                element: acquired.element
+            }), () => {
+                acquired.users -= 1, 0 === acquired.users && (acquired.element.remove(), hosts.delete(parent));
+            };
+        }, [ automatic, caller ]), !1 !== preference && (void 0 !== preference && "auto" !== preference ? preference : automatic ? (null == managed ? void 0 : managed.caller) === caller ? null == managed ? void 0 : managed.element : void 0 : inherited);
+    }(caller, portalContainer, inheritedPortal), dismissBranch = useContext(BranchDismissContext), rootCaller = null !== (_a = useContext(RootCallerContext)) && void 0 !== _a ? _a : caller, {current: current} = useTheme(), {className: className, style: style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: onKeyDown} = divAttributes, rest = __rest(divAttributes, [ "className", "style", "aria-label", "aria-labelledby", "onKeyDown" ]), divStyle = null != style ? style : {}, divClass = null != className ? className : "", generatedId = useId(), menuId = (null == id ? void 0 : id.trim()) || generatedId, menuName = (null == name ? void 0 : name.trim()) || (null == id ? void 0 : id.trim()) || "Pop Menu", menuRef = useRef(null), layout = function(options) {
+        const {menuRef: menuRef, caller: caller, offset: offset, gap: gap, container: container, enabled: enabled = !0} = options, [coords, setCoords] = useState(), [constraints, setConstraints] = useState(), [visible, setVisible] = useState(!1), [resolved, setResolved] = useState(!1);
+        useLayoutEffect(() => {
+            setResolved(!1);
+            const menu = null == menuRef ? void 0 : menuRef.current;
+            if (!enabled || !caller || !menu) return;
+            if (container && !container.contains(menu)) return;
+            const callerRect = caller.getBoundingClientRect(), menuRect = menu.getBoundingClientRect(), windowWidth = window.innerWidth, windowHeight = window.innerHeight;
+            if (callerRect.bottom <= 0 || callerRect.top >= windowHeight || callerRect.right <= 0 || callerRect.left >= windowWidth) return;
+            const menuGap = null != gap ? gap : 0, topEdge = Math.min(windowHeight, Math.max(0, callerRect.top - menuGap));
+            let downwardAnchor = callerRect.bottom + menuGap, horizontalAnchor = callerRect.left;
+            "right" !== offset && "left" !== offset || (downwardAnchor = callerRect.top, horizontalAnchor = callerRect.right + menuGap, 
+            ("left" === offset || horizontalAnchor + menuRect.width > windowWidth) && (horizontalAnchor = callerRect.left - menuGap - menuRect.width, 
+            horizontalAnchor < 0 && "left" === offset && (horizontalAnchor = callerRect.right + menuGap)));
+            const bottomEdge = Math.min(windowHeight, Math.max(0, downwardAnchor)), topSpace = topEdge, bottomSpace = windowHeight - bottomEdge;
+            let placement = null != offset ? offset : "bottom";
+            "top" === placement && menuRect.height > topSpace && menuRect.height <= bottomSpace ? placement = "bottom" : "bottom" === placement && menuRect.height > bottomSpace && menuRect.height <= topSpace && (placement = "top");
+            let maxHeight = bottomSpace, y = bottomEdge;
+            "top" === placement && (maxHeight = topSpace, y = topEdge - Math.min(menuRect.height, maxHeight));
+            const displayedWidth = Math.min(menuRect.width, windowWidth), x = Math.max(0, Math.min(horizontalAnchor, windowWidth - displayedWidth));
+            setCoords({
+                x: x,
+                y: y
+            }), setConstraints({
+                maxHeight: maxHeight,
+                maxWidth: windowWidth
+            }), setResolved(!0), setVisible(!0);
+        }, [ caller, menuRef, offset, gap, container, enabled ]);
+        const dismissMenu = useCallback(() => setResolved(!1), []);
+        return useEffect(() => {
+            if (!resolved) return;
+            const isInsideMenu = target => {
+                var _a, _b, _c;
+                if (!(target instanceof Node)) return !1;
+                if (null === (_a = null == menuRef ? void 0 : menuRef.current) || void 0 === _a ? void 0 : _a.contains(target)) return !0;
+                let branch = target instanceof Element ? target.closest("[data-pop-menu-parent]") : null === (_b = target.parentElement) || void 0 === _b ? void 0 : _b.closest("[data-pop-menu-parent]");
+                const visited = new Set;
+                for (;null == branch ? void 0 : branch.dataset.popMenuParent; ) {
+                    const parentId = branch.dataset.popMenuParent;
+                    if (visited.has(parentId)) break;
+                    if (visited.add(parentId), parentId === (null === (_c = null == menuRef ? void 0 : menuRef.current) || void 0 === _c ? void 0 : _c.id)) return !0;
+                    branch = branch.getRootNode().getElementById(parentId);
+                }
+                return !1;
+            }, handleScroll = event => {
+                var _a;
+                isInsideMenu(null !== (_a = event.composedPath()[0]) && void 0 !== _a ? _a : event.target) || dismissMenu();
+            }, handleClick = event => {
+                var _a;
+                const target = null !== (_a = event.composedPath()[0]) && void 0 !== _a ? _a : event.target;
+                target instanceof Node && ((null == caller ? void 0 : caller.contains(target)) || isInsideMenu(target) || dismissMenu());
+            };
+            return window.addEventListener("resize", dismissMenu), document.addEventListener("scroll", handleScroll, !0), 
+            window.addEventListener("click", handleClick), () => {
+                window.removeEventListener("resize", dismissMenu), document.removeEventListener("scroll", handleScroll, !0), 
+                window.removeEventListener("click", handleClick);
+            };
+        }, [ menuRef, resolved, caller, dismissMenu ]), {
+            coords: coords,
+            constraints: constraints,
+            resolved: resolved,
+            visible: visible,
+            resetMenu: function() {
+                setCoords(void 0), setConstraints(void 0), setResolved(!1), setVisible(!1);
+            },
+            dismissMenu: dismissMenu
+        };
+    }({
+        menuRef: menuRef,
+        caller: caller,
+        offset: offset,
+        gap: gap,
+        container: portalTarget,
+        enabled: void 0 !== portalTarget
+    }), {coords: coords, resolved: resolved, constraints: constraints, visible: visible, resetMenu: resetMenu} = layout, reduceMotion = usePrefersReducedMotion(), dismissalNotified = useRef(!1), animationControls = useAnimationControls(), resolvedTransition = useMemo(() => reduceMotion ? {
+        type: "tween",
+        duration: 0,
+        delay: 0
+    } : getWaterTransition(current.motion, transition), [ reduceMotion, current.motion, transition ]), [activeSubMenu, setActiveSubMenu] = useState(), dismissSubMenu = useCallback(() => setActiveSubMenu(void 0), []);
+    useEffect(() => {
+        var _a, _b;
+        if (!resolved) return;
+        dismissalNotified.current = !1;
+        const firstItem = null === (_a = menuRef.current) || void 0 === _a ? void 0 : _a.querySelector('[role^="menuitem"]:not(:disabled)');
+        null === (_b = null != firstItem ? firstItem : menuRef.current) || void 0 === _b || _b.focus({
+            preventScroll: !0
+        });
+    }, [ resolved ]);
+    const resolvedVariants = useMemo(() => reduceMotion ? reducedMotionValues : mergedPresenceMotionValues(defaultMotionValues, motionValues), [ motionValues, reduceMotion ]), posStyles = useMemo(() => ({
+        "--pop-left": coords ? `${coords.x}px` : "unset",
+        "--pop-top": coords ? `${coords.y}px` : "unset",
+        "--pop-max-width": constraints ? `${constraints.maxWidth}px` : "unset",
+        "--pop-max-height": constraints ? `${constraints.maxHeight}px` : "unset",
+        visibility: visible ? "visible" : "hidden",
+        pointerEvents: resolved ? "auto" : "none",
+        zIndex: visible ? 10 + level : -10
+    }), [ coords, constraints, resolved, visible, level ]), appearanceStyles = useMemo(() => ({
+        "--pop-background-color": backgroundColor,
+        "--pop-padding": setStyle(padding),
+        "--pop-border-width": setStyle(borderWidth),
+        "--pop-border-color": borderColor,
+        "--pop-gap": setStyle(gap),
+        "--pop-border-radius": setStyle(borderRadius),
+        "--pop-min-width": setStyle(minWidth, "unset")
+    }), [ backgroundColor, borderWidth, borderColor, gap, padding, borderRadius, minWidth ]), handleDismissAll = useCallback(() => {
+        const menu = menuRef.current;
+        (null == menu ? void 0 : menu.contains(menu.getRootNode().activeElement)) && (null == rootCaller || rootCaller.focus());
+        const dismiss = null != dismissAll ? dismissAll : onDismiss;
+        null == dismiss || dismiss();
+    }, [ rootCaller, dismissAll, onDismiss ]), handleItemClick = useCallback((event, item) => {
+        var _a;
+        const caller = event.currentTarget, render = item.subMenu;
+        setActiveSubMenu(render ? previous => {
+            var _a;
+            return {
+                caller: caller,
+                render: render,
+                key: (null !== (_a = null == previous ? void 0 : previous.key) && void 0 !== _a ? _a : 0) + 1
+            };
+        } : void 0), null == onClickItem || onClickItem(event, item);
+        (null !== (_a = item.autoDismiss) && void 0 !== _a ? _a : !(item.toggle || item.subMenu)) && handleDismissAll();
+    }, [ onClickItem, handleDismissAll ]), menuActions = useMemo(() => ({
+        dismissAll: handleDismissAll,
+        onClickItem: handleItemClick,
+        onHoverItem: onHoverItem
+    }), [ handleDismissAll, handleItemClick, onHoverItem ]), handleAnimationComplete = useCallback(definition => {
+        "exit" !== definition || resolved || !visible || dismissalNotified.current || (dismissalNotified.current = !0, 
+        setActiveSubMenu(void 0), resetMenu(), null == onDismiss || onDismiss(), null == dismissBranch || dismissBranch());
+    }, [ resolved, visible, onDismiss, resetMenu, dismissBranch ]);
+    if (useEffect(() => {
+        if (!visible) return;
+        if (reduceMotion) return animationControls.stop(), void animationControls.set(reducedMotionState);
+        const animation = resolved ? "animate" : "exit";
+        resolvedVariants[animation] && animationControls.start(animation);
+    }, [ animationControls, reduceMotion, visible, resolved, resolvedVariants ]), useEffect(() => {
+        reduceMotion && !resolved && visible && handleAnimationComplete("exit");
+    }, [ reduceMotion, resolved, visible, handleAnimationComplete ]), void 0 === portalTarget) return null;
+    const content = jsx(PortalContext.Provider, {
+        value: portalTarget,
+        children: jsx(RootCallerContext.Provider, {
+            value: rootCaller,
+            children: jsx(PopMenuContext.Provider, {
+                value: menuActions,
+                children: jsxs(PopMenuActiveSubMenuContext.Provider, {
+                    value: null == activeSubMenu ? void 0 : activeSubMenu.caller.id,
+                    children: [ jsx(motion.div, Object.assign({}, rest, {
+                        id: menuId,
+                        "data-pop-menu-parent": (null === (_b = null == caller ? void 0 : caller.closest('[role="menu"]')) || void 0 === _b ? void 0 : _b.id) || void 0,
+                        onKeyDown: event => {
+                            var _a, _b, _c;
+                            if (null == onKeyDown || onKeyDown(event), event.defaultPrevented || event.target.closest('[role="menu"]') !== menuRef.current) return;
+                            const items = Array.from(null !== (_b = null === (_a = menuRef.current) || void 0 === _a ? void 0 : _a.querySelectorAll('[role^="menuitem"]:not(:disabled)')) && void 0 !== _b ? _b : []), index = items.indexOf(event.target);
+                            let next;
+                            if ("ArrowDown" === event.key && (next = items[(index + 1) % items.length]), "ArrowUp" === event.key && (next = items[(index - 1 + items.length) % items.length]), 
+                            "Home" === event.key && (next = items[0]), "End" === event.key && (next = items.at(-1)), 
+                            next && (event.preventDefault(), next.focus()), ("Escape" === event.key || "ArrowLeft" === event.key && level > 0) && (event.preventDefault(), 
+                            event.stopPropagation(), null == caller || caller.focus(), layout.dismissMenu()), 
+                            "ArrowRight" === event.key && "menu" === event.target.getAttribute("aria-haspopup") && (event.preventDefault(), 
+                            event.target.click()), "Tab" === event.key) {
+                                const stops = Array.from((null !== (_c = null == rootCaller ? void 0 : rootCaller.getRootNode()) && void 0 !== _c ? _c : document).querySelectorAll("button, a[href], input, select, textarea, [tabindex]")).filter(element => element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest('[role="menu"], [inert]') && element.getClientRects().length > 0), triggerIndex = rootCaller ? stops.indexOf(rootCaller) : -1, destination = stops[triggerIndex + (event.shiftKey ? -1 : 1)];
+                                null == rootCaller || rootCaller.focus(), handleDismissAll(), layout.dismissMenu(), 
+                                triggerIndex >= 0 && destination && (event.preventDefault(), destination.focus());
+                            }
+                        },
+                        ref: menuRef,
+                        variants: resolvedVariants,
+                        initial: !reduceMotion && "initial",
+                        animate: animationControls,
+                        exit: "exit",
+                        transition: resolvedTransition,
+                        className: classNames(divClass, styles_popMenu),
+                        style: Object.assign(Object.assign(Object.assign({}, divStyle), appearanceStyles), posStyles),
+                        onScroll: e => e.stopPropagation(),
+                        inert: !resolved,
+                        onAnimationComplete: handleAnimationComplete,
+                        role: "menu",
+                        tabIndex: -1,
+                        "aria-label": (null == ariaLabel ? void 0 : ariaLabel.trim()) || menuName,
+                        "aria-labelledby": ariaLabelledBy,
+                        children: null != children ? children : options && 0 !== (null == options ? void 0 : options.length) ? options.map((option, index) => {
+                            var _a, _b;
+                            if ("label" in option) {
+                                const item = option;
+                                return jsx(PopMenuItem, Object.assign({}, item), (null === (_a = item.id) || void 0 === _a ? void 0 : _a.trim()) ? `id:${item.id.trim()}` : `index:${index}`);
+                            }
+                            const item = option;
+                            return jsx(PopMenuGroup, Object.assign({}, item), (null === (_b = item.id) || void 0 === _b ? void 0 : _b.trim()) ? `id:${item.id.trim()}` : `index:${index}`);
+                        }) : null
+                    })), activeSubMenu && jsx(BranchDismissContext.Provider, {
+                        value: dismissSubMenu,
+                        children: activeSubMenu.render({
+                            caller: activeSubMenu.caller,
+                            level: level + 1,
+                            dismissAll: handleDismissAll
+                        })
+                    }, activeSubMenu.key) ]
+                })
+            })
+        })
+    });
+    return !1 === portalTarget ? content : createPortal(content, portalTarget);
+}
+
+export { PopMenu as P, PopMenuGroup as a, PopMenuItem as b };

package/dist/esm/chunks/PopMenuController-Dj3uvc8F.mjs

@@ -0,0 +1,44 @@
+'use client';
+import { isValidElement, cloneElement, createElement } from "react";
+
+import { u as usePopMenu, b as usePopMenuStore } from "./popMenuStore-DtApFGaq.mjs";
+
+import { P as PopMenu } from "./PopMenu-BkXfm6Sz.mjs";
+
+import "./tslib.es6-CpnJrDBv.mjs";
+
+import "react/jsx-runtime";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./Icon-43T0fkr6.mjs";
+
+/** Mount once to render the store's single active menu. Composed controls must forward dismissal props. */ function PopMenuController() {
+    const menu = usePopMenu(), version = usePopMenuStore(state => state.version);
+    if (!menu) return null;
+    const composed = isValidElement(menu), props = composed ? menu.props : menu, clearCurrentMenu = () => {
+        const state = usePopMenuStore.getState();
+        state.version === version && state.actions.clear();
+    }, onDismiss = () => {
+        var _a;
+        null === (_a = props.onDismiss) || void 0 === _a || _a.call(props), clearCurrentMenu();
+    }, dismissAll = () => {
+        var _a;
+        null === (_a = props.dismissAll) || void 0 === _a || _a.call(props), clearCurrentMenu();
+    };
+    return composed ? cloneElement(menu, {
+        key: version,
+        onDismiss: onDismiss,
+        dismissAll: dismissAll
+    }) : createElement(PopMenu, Object.assign({}, props, {
+        key: version,
+        onDismiss: onDismiss,
+        dismissAll: dismissAll
+    }));
+}
+
+export { PopMenuController as P };