@apple-pie/slice 0.1.60 → 0.2.0

package/dist/cjs/chunks/PopMenu-DkxhTcwD.js

@@ -0,0 +1,423 @@
+"use strict";
+
+var tslib_es6 = require("./tslib.es6-B8JY5ZGw.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), reactDom = require("react-dom"), hooks_useTheme = require("../hooks/useTheme.js");
+
+require("../theme/colors.js"), require("../theme/type.js"), require("./resolveColor-DkYThq2J.js"), 
+require("./breakpoints-BDw1OJh9.js");
+
+var misc = require("./misc-PmT7cZzC.js");
+
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./webRTCStore-OGkXAovD.js"), 
+require("./microphoneStore-D7DuvQeX.js"), require("./volumeStore-BoEoo9wA.js");
+
+var getWaterTransition = require("./getWaterTransition-s_55VKK2.js"), usePrefersReducedMotion = require("./usePrefersReducedMotion-GpD17CAE.js"), resolveColorProps = require("./resolveColorProps-DE1k1P-Z.js"), resolveShortcut = require("./resolveShortcut-DiQdb8VR.js"), Icon = require("./Icon-COY7IZkK.js"), 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 = React.createContext(void 0), PopMenuActiveSubMenuContext = React.createContext(void 0), noopDismiss = () => {};
+
+function usePopMenuActions() {
+    return React.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 = tslib_es6.__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 = React.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 = React.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.resolveShortcut(shortcut), handleClick = React.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 = React.useMemo(() => ({
+        "--item-icon-color": iconColor,
+        "--item-icon-color-hover": iconColorHover,
+        "--item-icon-color-disabled": iconColorDisabled,
+        "--icon-size": misc.setStyle(iconSize),
+        "--icon-gap": misc.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": misc.setStyle(padding),
+        "--item-gap": misc.setStyle(gap),
+        "--shortcut-color": isDisabled ? textColorDisabled : "var(--core-text-secondary)"
+    }), [ backgroundColor, backgroundColorHover, textColor, textColorHover, textColorDisabled, isDisabled, iconColor, iconColorHover, iconColorDisabled, iconSize, iconGap, padding, gap ]);
+    return jsxRuntime.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: misc.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: jsxRuntime.jsx("div", {
+            className: styles_popMenuItemWrapper,
+            children: null != children ? children : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [ jsxRuntime.jsxs("div", {
+                    className: styles_left,
+                    children: [ icon && jsxRuntime.jsx("div", {
+                        className: styles_icon,
+                        "aria-hidden": "true",
+                        children: jsxRuntime.jsx(Icon.Icon, {
+                            name: icon,
+                            size: iconSize,
+                            stroke: 1.5,
+                            strokeColor: "var(--item-icon-color-current)"
+                        })
+                    }), jsxRuntime.jsx("span", {
+                        className: styles_label,
+                        children: label
+                    }) ]
+                }), jsxRuntime.jsxs("div", {
+                    className: misc.classNames(styles_right, "body-s-regular"),
+                    children: [ toggle && toggled && jsxRuntime.jsx("div", {
+                        className: styles_icon,
+                        "aria-hidden": "true",
+                        children: jsxRuntime.jsx(Icon.Icon, {
+                            name: null != toggleIcon ? toggleIcon : void 0,
+                            size: 20,
+                            stroke: 1.5,
+                            strokeColor: "var(--item-toggle-color-current)"
+                        })
+                    }), subMenu && jsxRuntime.jsx("div", {
+                        className: styles_icon,
+                        "aria-hidden": "true",
+                        children: jsxRuntime.jsx(Icon.Icon, {
+                            name: null != subMenuIcon ? subMenuIcon : void 0,
+                            size: 20,
+                            stroke: 1.5,
+                            strokeColor: "var(--item-submenu-color-current)"
+                        })
+                    }), shortcutLabel && jsxRuntime.jsx("span", {
+                        className: styles_shortcut,
+                        children: shortcutLabel
+                    }) ]
+                }) ]
+            })
+        })
+    }));
+}
+
+function PopMenuGroup(rawProps) {
+    const _a = resolveColorProps.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 = tslib_es6.__rest(_a, [ "children", "title", "name", "id", "items", "dismissAll", "onClickItem", "onHoverItem", "textColor", "textColorHover", "textSize", "borderWidth", "borderColor", "className", "padding", "gap", "style", "aria-label", "aria-labelledby" ]), generatedId = React.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": misc.setStyle(borderWidth),
+        "--group-border-color": borderColor,
+        "--group-padding": misc.setStyle(padding),
+        "--group-margin-gap": misc.setStyle(gap),
+        "--group-wrapper-padding-top": hasTitle ? 0 : misc.setStyle(gap)
+    }, style), parent = usePopMenuActions(), groupActions = React.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 jsxRuntime.jsx(PopMenuContext.Provider, {
+        value: groupActions,
+        children: jsxRuntime.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: misc.classNames(styles_popMenuGroupWrapper, className),
+            style: groupStyle,
+            children: [ hasTitle && jsxRuntime.jsx("div", {
+                id: titleId,
+                className: misc.classNames(styles_groupTitle, `body-${textSize}-regular`),
+                children: title
+            }), null != children ? children : null == items ? void 0 : items.map((item, index) => {
+                var _a;
+                return jsxRuntime.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 = React.createContext(void 0), BranchDismissContext = React.createContext(void 0), RootCallerContext = React.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
+    }
+};
+
+exports.PopMenu = function(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 = tslib_es6.__rest(props, [ "level", "children", "id", "name", "options", "minWidth", "padding", "backgroundColor", "borderRadius", "borderWidth", "borderColor", "onClickItem", "onHoverItem", "onDismiss", "dismissAll", "motionValues", "transition", "caller", "portalContainer", "offset", "gap" ]), inheritedPortal = React.useContext(PortalContext), portalTarget = function(caller, preference, inherited) {
+        const automatic = "auto" === preference || void 0 === preference && void 0 === inherited, [managed, setManaged] = React.useState();
+        return React.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 = React.useContext(BranchDismissContext), rootCaller = null !== (_a = React.useContext(RootCallerContext)) && void 0 !== _a ? _a : caller, {current: current} = hooks_useTheme.useTheme(), {className: className, style: style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: onKeyDown} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "className", "style", "aria-label", "aria-labelledby", "onKeyDown" ]), divStyle = null != style ? style : {}, divClass = null != className ? className : "", generatedId = React.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 = React.useRef(null), layout = function(options) {
+        const {menuRef: menuRef, caller: caller, offset: offset, gap: gap, container: container, enabled: enabled = !0} = options, [coords, setCoords] = React.useState(), [constraints, setConstraints] = React.useState(), [visible, setVisible] = React.useState(!1), [resolved, setResolved] = React.useState(!1);
+        React.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 = React.useCallback(() => setResolved(!1), []);
+        return React.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.usePrefersReducedMotion(), dismissalNotified = React.useRef(!1), animationControls = react.useAnimationControls(), resolvedTransition = React.useMemo(() => reduceMotion ? {
+        type: "tween",
+        duration: 0,
+        delay: 0
+    } : getWaterTransition.getWaterTransition(current.motion, transition), [ reduceMotion, current.motion, transition ]), [activeSubMenu, setActiveSubMenu] = React.useState(), dismissSubMenu = React.useCallback(() => setActiveSubMenu(void 0), []);
+    React.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 = React.useMemo(() => reduceMotion ? reducedMotionValues : misc.mergedPresenceMotionValues(defaultMotionValues, motionValues), [ motionValues, reduceMotion ]), posStyles = React.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 = React.useMemo(() => ({
+        "--pop-background-color": backgroundColor,
+        "--pop-padding": misc.setStyle(padding),
+        "--pop-border-width": misc.setStyle(borderWidth),
+        "--pop-border-color": borderColor,
+        "--pop-gap": misc.setStyle(gap),
+        "--pop-border-radius": misc.setStyle(borderRadius),
+        "--pop-min-width": misc.setStyle(minWidth, "unset")
+    }), [ backgroundColor, borderWidth, borderColor, gap, padding, borderRadius, minWidth ]), handleDismissAll = React.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 = React.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 = React.useMemo(() => ({
+        dismissAll: handleDismissAll,
+        onClickItem: handleItemClick,
+        onHoverItem: onHoverItem
+    }), [ handleDismissAll, handleItemClick, onHoverItem ]), handleAnimationComplete = React.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 (React.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 ]), React.useEffect(() => {
+        reduceMotion && !resolved && visible && handleAnimationComplete("exit");
+    }, [ reduceMotion, resolved, visible, handleAnimationComplete ]), void 0 === portalTarget) return null;
+    const content = jsxRuntime.jsx(PortalContext.Provider, {
+        value: portalTarget,
+        children: jsxRuntime.jsx(RootCallerContext.Provider, {
+            value: rootCaller,
+            children: jsxRuntime.jsx(PopMenuContext.Provider, {
+                value: menuActions,
+                children: jsxRuntime.jsxs(PopMenuActiveSubMenuContext.Provider, {
+                    value: null == activeSubMenu ? void 0 : activeSubMenu.caller.id,
+                    children: [ jsxRuntime.jsx(react.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: misc.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 jsxRuntime.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 jsxRuntime.jsx(PopMenuGroup, Object.assign({}, item), (null === (_b = item.id) || void 0 === _b ? void 0 : _b.trim()) ? `id:${item.id.trim()}` : `index:${index}`);
+                        }) : null
+                    })), activeSubMenu && jsxRuntime.jsx(BranchDismissContext.Provider, {
+                        value: dismissSubMenu,
+                        children: activeSubMenu.render({
+                            caller: activeSubMenu.caller,
+                            level: level + 1,
+                            dismissAll: handleDismissAll
+                        })
+                    }, activeSubMenu.key) ]
+                })
+            })
+        })
+    });
+    return !1 === portalTarget ? content : reactDom.createPortal(content, portalTarget);
+}, exports.PopMenuGroup = PopMenuGroup, exports.PopMenuItem = PopMenuItem;

package/dist/cjs/chunks/PopMenuController-CmS28S4h.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+
+var React = require("react"), popMenuStore = require("./popMenuStore-DqyTqDrl.js"), PopMenu = require("./PopMenu-DkxhTcwD.js");
+
+require("./tslib.es6-B8JY5ZGw.js"), require("react/jsx-runtime"), require("./resolveColor-DkYThq2J.js"), 
+require("./broadcastChannel-DdPZ3LUB.js"), require("./files-RYD9L_pI.js"), require("./Icon-COY7IZkK.js"), 
+exports.PopMenuController = 
+/** Mount once to render the store's single active menu. Composed controls must forward dismissal props. */
+function() {
+    const menu = popMenuStore.usePopMenu(), version = popMenuStore.usePopMenuStore(state => state.version);
+    if (!menu) return null;
+    const composed = React.isValidElement(menu), props = composed ? menu.props : menu, clearCurrentMenu = () => {
+        const state = popMenuStore.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 ? React.cloneElement(menu, {
+        key: version,
+        onDismiss: onDismiss,
+        dismissAll: dismissAll
+    }) : React.createElement(PopMenu.PopMenu, Object.assign({}, props, {
+        key: version,
+        onDismiss: onDismiss,
+        dismissAll: dismissAll
+    }));
+};