@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/menu/Menu.js

@@ -0,0 +1,715 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { TriggerContext } from "../../primitives/TriggerContext.js";
+import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { ContextMenuTrigger, MenuTrigger, MenuTriggerContext } from "./menu-trigger.js";
+import { localeWithDirection } from "../../primitives/locale-with-direction.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { toAriaPlacement } from "../../utils/placement.js";
+import { assertCollectionChildren } from "../../utils/assert-collection-children.js";
+import { splitRootProps } from "../../utils/root-props.js";
+import { useTypeaheadDelegate } from "../../utils/typeahead.js";
+import { COMPACT_WINDOW, useMediaQuery } from "../date-picker/use-media-query.js";
+import { Divider } from "../divider/Divider.js";
+import { LazyBottomSheet, usePreloadBottomSheet } from "../sheet/lazy-bottom-sheet.js";
+import { BackIcon } from "../sheet/sheet-icons.js";
+import { useRevealEntering } from "./use-reveal-entering.js";
+import { menuOwnWidth, menuStyles } from "./menu-styles.js";
+import { cloneElement, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DismissButton, I18nProvider, mergeProps, useButton, useLocale, useMenu, useMenuItem, useMenuSection, useObjectRef, usePopover, useSubmenuTrigger } from "react-aria";
+import { Item, Section, useSubmenuTriggerState, useTreeState } from "react-stately";
+//#region src/components/menu/Menu.tsx
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	children: /* @__PURE__ */ jsx("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
+});
+/** The default submenu arrow (Material Symbols `arrow_right`), mirrored in RTL. */
+const SubmenuIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 -960 960 960",
+	fill: "currentColor",
+	className: "rtl:-scale-x-100",
+	children: /* @__PURE__ */ jsx("path", { d: "M400-280v-400l200 200-200 200Z" })
+});
+/** An item in a `Menu` (a React Stately collection item: identify it with `key`). */
+const MenuItem = Item;
+/**
+* A group of items (a React Stately collection section): set off by dividers in the
+* `divider` layout, its own surface in the `gap` layout.
+*/
+const MenuGroup = Section;
+/** A {@link MenuItem} that can opt out of the menu's selection (library-internal). */
+const CheckableMenuItem = Item;
+/** Only a menu collection reads a `SubmenuTrigger`; rendered on its own it's nothing. */
+function SubmenuTriggerElement() {
+	return null;
+}
+/** React Stately builds the item's node from this, with the submenu on its props. */
+SubmenuTriggerElement.getCollectionNode = function* getCollectionNode({ children: [item, submenu], delay }) {
+	yield { element: cloneElement(item, {
+		submenu,
+		submenuDelay: delay
+	}) };
+};
+/**
+* Gives a menu item a submenu (M3: "On web, menus can open submenus"). It opens beside the
+* item, without covering it, on hover, press, Enter, Space or the arrow key pointing away
+* from the menu (Left in right-to-left), and closes with the opposite arrow or Escape.
+* While it's open, the item shows its active (pressed) layer, and the menu holding focus
+* takes rounder corners than the other one.
+*
+* @example
+* <SubmenuTrigger>
+*   <MenuItem key="share">Share</MenuItem>
+*   <Menu onAction={(key) => share(key)}>
+*     <MenuItem key="email">Email</MenuItem>
+*     <MenuItem key="link">Copy link</MenuItem>
+*   </Menu>
+* </SubmenuTrigger>
+*/
+const SubmenuTrigger = SubmenuTriggerElement;
+const DEFAULT_LABELS = { back: "Back" };
+/**
+* M3 Expressive menu: items on one surface with dividers between groups (or on grouped
+* surfaces), standard or vibrant colours, optional single or multiple selection with a
+* selected shape and check, submenus, keyboard navigation and typeahead (React Aria
+* `useMenu`). Must be inside a `MenuTrigger` or `ContextMenuTrigger`; it opens anchored to
+* the trigger in a portal that keeps the surrounding theme and direction.
+*
+* @example
+* <MenuTrigger>
+*   <IconButton icon={<MoreIcon />} aria-label="More" />
+*   <Menu onAction={(key) => run(key)}>
+*     <MenuGroup>
+*       <MenuItem key="copy" shortcut="⌘C">Copy</MenuItem>
+*       <MenuItem key="paste" shortcut="⌘V">Paste</MenuItem>
+*     </MenuGroup>
+*     <MenuGroup>
+*       <MenuItem key="delete">Delete</MenuItem>
+*     </MenuGroup>
+*   </Menu>
+* </MenuTrigger>
+*/
+function Menu({ presentation = "popover", instant = false, ...props }) {
+	const trigger = useContext(MenuTriggerContext);
+	if (!trigger) throw new Error("[@windmorph/react] <Menu> must be used inside <MenuTrigger>.");
+	const compact = useMediaQuery(COMPACT_WINDOW);
+	const presence = usePresence(trigger.state.isOpen);
+	const asSheet = presentation === "sheet" || presentation === "auto" && compact;
+	usePreloadBottomSheet(trigger.triggerRef, asSheet);
+	if (asSheet) return /* @__PURE__ */ jsx(MenuSheet, {
+		...props,
+		trigger
+	});
+	const isPresent = instant ? trigger.state.isOpen : presence.isPresent;
+	const isExiting = !instant && presence.isExiting;
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		children: /* @__PURE__ */ jsx(MenuPopover, {
+			...props,
+			trigger,
+			instant,
+			isExiting,
+			exitProps: presence.exitProps
+		})
+	});
+}
+/**
+* The menu in a modal bottom sheet (M3: menus can adapt into bottom sheets on small
+* screens). The sheet is a dialog named like the menu; the menu inside keeps its role,
+* keyboard, typeahead and initial focus, and spans the sheet without a surface of its own.
+* The sheet's code loads on first open (or when the trigger is hovered or focused), so a
+* menu that only opens as a popover doesn't carry it.
+*/
+function MenuSheet({ trigger, layout: _layout, placement: _placement, offset: _offset, variant = "standard", labels, className, style, ...props }) {
+	const [container, setContainer] = useState(null);
+	const [activeLevel, setActiveLevel] = useState(0);
+	const menuProps = mergeProps(trigger.menuProps, props);
+	const label = menuProps["aria-label"];
+	const naming = label != null ? { "aria-label": label } : { "aria-labelledby": menuProps["aria-labelledby"] ?? "" };
+	return /* @__PURE__ */ jsx(LazyBottomSheet, {
+		...naming,
+		skipPartiallyExpanded: true,
+		open: trigger.state.isOpen,
+		onOpenChange: (open) => open ? trigger.state.open() : trigger.state.close(),
+		className,
+		style,
+		classNames: props.classNames?.sheet ? { panel: props.classNames.sheet } : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setContainer,
+			className: menuStyles().sheetContent(),
+			children: /* @__PURE__ */ jsx(TriggerContext, {
+				value: null,
+				children: /* @__PURE__ */ jsx(MenuTreeContext, {
+					value: {
+						rootState: trigger.state,
+						container,
+						activeLevel,
+						setActiveLevel,
+						layout: "divider",
+						variant,
+						density: props.density,
+						instant: false,
+						sheet: true,
+						labels: {
+							...DEFAULT_LABELS,
+							...labels
+						}
+					},
+					children: /* @__PURE__ */ jsx(MenuList, {
+						...menuProps,
+						layout: "divider",
+						variant,
+						level: 0,
+						embedded: true,
+						onClose: trigger.state.close,
+						autoFocus: trigger.state.focusStrategy ?? "first"
+					})
+				})
+			})
+		})
+	});
+}
+const MenuTreeContext = createContext(null);
+/** The menu element an item is rendered in (a submenu's parent). */
+const MenuListContext = createContext(null);
+const subscribeToNothing = () => () => {};
+/**
+* React Aria resolves `start` / `end` from its locale context, not the DOM `dir`, so an
+* RTL region without an `I18nProvider` would align the menu to the wrong edge. Resolve
+* them to physical sides from the trigger's computed direction instead.
+*/
+function toPhysicalPlacement(placement, direction) {
+	return toAriaPlacement(placement, direction === "rtl");
+}
+function MenuPopover({ trigger, instant, isExiting, exitProps, placement = "bottom-start", offset = 0, containerPadding = 12, layout = "divider", variant = "standard", labels, className, style, ...props }) {
+	const popoverRef = useRef(null);
+	const [container, setContainer] = useState(null);
+	const setPopover = useCallback((element) => {
+		popoverRef.current = element;
+		setContainer(element);
+	}, []);
+	const [activeLevel, setActiveLevel] = useState(0);
+	const direction = useSyncExternalStore(subscribeToNothing, () => trigger.triggerRef.current ? getComputedStyle(trigger.triggerRef.current).direction : "ltr", () => "ltr");
+	const { locale, direction: localeDirection } = useLocale();
+	const menuLocale = direction === localeDirection ? locale : localeWithDirection(locale, direction === "rtl" ? "rtl" : "ltr");
+	const { popoverProps, underlayProps, placement: actualPlacement } = usePopover({
+		triggerRef: trigger.triggerRef,
+		popoverRef,
+		placement: toPhysicalPlacement(placement, direction),
+		offset,
+		containerPadding
+	}, trigger.state);
+	const revealRef = useRef(null);
+	const entering = useRevealEntering(actualPlacement, revealRef);
+	const close = trigger.state.close;
+	useEffect(() => {
+		const view = container?.ownerDocument.defaultView;
+		if (!container || !view) return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (container.contains(container.ownerDocument.activeElement)) close();
+		};
+		view.addEventListener("keydown", onKeyDown, true);
+		return () => view.removeEventListener("keydown", onKeyDown, true);
+	}, [container, close]);
+	const styles = menuStyles();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		className: "fixed inset-0"
+	}), /* @__PURE__ */ jsxs("div", {
+		...popoverProps,
+		ref: setPopover,
+		style: {
+			...style,
+			...popoverProps.style
+		},
+		"data-overlay-placement": "",
+		className: styles.popover({ class: cn(menuOwnWidth, className) }),
+		children: [
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: trigger.state.close }),
+			/* @__PURE__ */ jsx("div", {
+				...exitProps,
+				ref: revealRef,
+				"data-entering": entering || void 0,
+				"data-exiting": isExiting || void 0,
+				"data-placement": actualPlacement ?? void 0,
+				className: menuStyles({ instant }).reveal(),
+				children: /* @__PURE__ */ jsx(TriggerContext, {
+					value: null,
+					children: /* @__PURE__ */ jsx(I18nProvider, {
+						locale: menuLocale,
+						children: /* @__PURE__ */ jsx(MenuTreeContext, {
+							value: {
+								rootState: trigger.state,
+								container,
+								activeLevel,
+								setActiveLevel,
+								layout,
+								variant,
+								density: props.density,
+								instant,
+								sheet: false,
+								labels: {
+									...DEFAULT_LABELS,
+									...labels
+								}
+							},
+							children: /* @__PURE__ */ jsx(MenuList, {
+								...mergeProps(trigger.menuProps, props),
+								layout,
+								variant,
+								level: 0,
+								onClose: trigger.state.close,
+								autoFocus: trigger.state.focusStrategy ?? "first"
+							})
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: trigger.state.close })
+		]
+	})] });
+}
+const positionOf = (index, count) => count === 1 ? "only" : index === 0 ? "first" : index === count - 1 ? "last" : "middle";
+/** Which of a group's edges have the outer corners (the others have 8px). */
+const roundEdges = (position) => ({
+	top: position === "only" || position === "first",
+	bottom: position === "only" || position === "last"
+});
+/** Sections become groups; runs of loose items between them form implicit groups. */
+function toGroups(nodes) {
+	const groups = [];
+	let run = [];
+	for (const node of nodes) if (node.type === "section") {
+		if (run.length) groups.push(run);
+		run = [];
+		groups.push(node);
+	} else run.push(node);
+	if (run.length) groups.push(run);
+	return groups;
+}
+/**
+* Whether the list has had to scroll, from a `ResizeObserver` (so it's measured only when
+* its size changes). Once true it stays true while the menu is open, so a `gap` menu that
+* switches to dividers can't flip back and forth.
+*/
+function useHasScrolled(ref, enabled) {
+	const [scrolls, setScrolls] = useState(false);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!enabled || scrolls || !element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			if (element.scrollHeight > element.clientHeight + 1) setScrolls(true);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		ref,
+		enabled,
+		scrolls
+	]);
+	return scrolls;
+}
+function MenuList({ deselectable = true, variant, layout: requestedLayout, density, level, classNames, listRef, embedded = false, ref: forwardedRef, ...allProps }) {
+	const { root, rest: props } = splitRootProps(allProps);
+	assertCollectionChildren(props.children, "Menu", "MenuItem, MenuGroup and SubmenuTrigger elements");
+	const tree = useContext(MenuTreeContext);
+	const state = useTreeState({
+		...props,
+		disallowEmptySelection: !deselectable,
+		disabledBehavior: "selection"
+	});
+	const ownRef = useObjectRef(forwardedRef);
+	const ref = listRef ?? ownRef;
+	const keyboardDelegate = useTypeaheadDelegate(state, ref);
+	const { menuProps } = useMenu({
+		...props,
+		keyboardDelegate,
+		shouldFocusWrap: true
+	}, state, ref);
+	const groups = toGroups([...state.collection]);
+	const layout = useHasScrolled(ref, requestedLayout === "gap") ? "divider" : requestedLayout;
+	const styles = menuStyles({
+		variant,
+		layout,
+		embedded
+	});
+	const shape = !Boolean(tree && tree.rootState.expandedKeysStack.length > 0) ? void 0 : tree?.activeLevel === level ? "active" : "inactive";
+	const setActive = tree?.setActiveLevel;
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(root, menuProps, { onFocus: (event) => {
+			if (event.currentTarget.contains(event.target)) setActive?.(level);
+		} }),
+		ref,
+		...densityAttribute(density),
+		"data-tokens": mergeDataTokens("md-comp-menus", root),
+		"data-variant": variant,
+		"data-layout": layout,
+		"data-shape": shape,
+		className: styles.menu({ class: classNames?.panel }),
+		children: /* @__PURE__ */ jsx(MenuListContext, {
+			value: ref,
+			children: groups.map((group, index) => {
+				const position = positionOf(index, groups.length);
+				const edges = layout === "divider" ? {
+					top: index === 0,
+					bottom: index === groups.length - 1
+				} : roundEdges(position);
+				const groupStyles = menuStyles({
+					variant,
+					layout,
+					groupPosition: position,
+					morph: true
+				});
+				return /* @__PURE__ */ jsx(GroupWithDivider, {
+					divider: layout === "divider" && index > 0 ? /* @__PURE__ */ jsx(Divider, {
+						decorative: false,
+						className: styles.divider({ class: classNames?.divider })
+					}) : null,
+					children: Array.isArray(group) ? /* @__PURE__ */ jsx("div", {
+						role: "presentation",
+						className: groupStyles.group({ class: classNames?.group }),
+						children: /* @__PURE__ */ jsx(MenuItems, {
+							nodes: group,
+							state,
+							variant,
+							edges,
+							classNames
+						})
+					}) : /* @__PURE__ */ jsx(MenuSection, {
+						section: group,
+						state,
+						variant,
+						className: groupStyles.group({ class: classNames?.group }),
+						headingClassName: groupStyles.heading({ class: classNames?.heading }),
+						edges,
+						classNames
+					})
+				}, Array.isArray(group) ? group[0].key : group.key);
+			})
+		})
+	});
+}
+function GroupWithDivider({ divider, children }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [divider, children] });
+}
+function MenuSection({ section, state, variant, className, headingClassName, edges, classNames }) {
+	const { itemProps, headingProps, groupProps } = useMenuSection({
+		heading: section.rendered,
+		"aria-label": section["aria-label"]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...itemProps,
+		className,
+		children: [section.rendered && /* @__PURE__ */ jsx("span", {
+			...headingProps,
+			className: headingClassName,
+			children: section.rendered
+		}), /* @__PURE__ */ jsx("div", {
+			...groupProps,
+			className: "flex flex-col",
+			children: /* @__PURE__ */ jsx(MenuItems, {
+				nodes: [...section.childNodes],
+				state,
+				variant,
+				edges: {
+					...edges,
+					top: !section.rendered && edges.top
+				},
+				classNames
+			})
+		})]
+	});
+}
+/**
+* Items nest their corners inside the container's: an item on an outer edge gets the
+* outer corner less the 4px padding, and every other corner is 4px.
+*/
+function MenuItems({ nodes, state, variant, edges, classNames }) {
+	return nodes.map((node, index) => {
+		const itemProps = {
+			node,
+			state,
+			variant,
+			top: index === 0 && edges.top ? "outer" : "plain",
+			bottom: index === nodes.length - 1 && edges.bottom ? "outer" : "plain",
+			classNames
+		};
+		return node.props.submenu ? /* @__PURE__ */ jsx(SubmenuItemView, { ...itemProps }, node.key) : /* @__PURE__ */ jsx(MenuItemView, { ...itemProps }, node.key);
+	});
+}
+/** An item that opens a submenu, and the submenu's popover. */
+function SubmenuItemView(props) {
+	const tree = useContext(MenuTreeContext);
+	const parentMenuRef = useContext(MenuListContext);
+	const { submenu, submenuDelay } = props.node.props;
+	const submenuState = useSubmenuTriggerState({ triggerKey: props.node.key }, tree.rootState);
+	const itemRef = useRef(null);
+	const submenuRef = useRef(null);
+	const { submenuTriggerProps, submenuProps, popoverProps } = useSubmenuTrigger({
+		parentMenuRef,
+		submenuRef,
+		delay: submenuDelay,
+		isDisabled: props.state.disabledKeys.has(props.node.key)
+	}, submenuState, itemRef);
+	const { isOpen, onHoverChange, ...triggerProps } = submenuTriggerProps;
+	const wasOpen = useRef(isOpen);
+	useLayoutEffect(() => {
+		const closed = wasOpen.current && !isOpen;
+		wasOpen.current = isOpen;
+		const item = itemRef.current;
+		if (!closed || !tree.sheet || !tree.rootState.isOpen || !item) return;
+		const active = item.ownerDocument.activeElement;
+		if (active == null || active === item.ownerDocument.body) item.focus();
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuItemView, {
+		...props,
+		triggerProps: tree.sheet ? triggerProps : {
+			...triggerProps,
+			onHoverChange
+		},
+		itemRef,
+		submenuOpen: isOpen
+	}), tree.sheet ? /* @__PURE__ */ jsx(SubmenuSheetPanel, {
+		state: submenuState,
+		submenuRef,
+		menuProps: submenuProps,
+		submenu,
+		title: props.node.rendered
+	}) : /* @__PURE__ */ jsx(SubmenuPopover, {
+		state: submenuState,
+		triggerRef: itemRef,
+		submenuRef,
+		menuProps: submenuProps,
+		popoverProps,
+		submenu
+	})] });
+}
+/**
+* A submenu in a sheet (M3 adapts menus into bottom sheets on small screens, where there's
+* no room beside an item): it takes the place of the menu that opened it, which the sheet
+* hides while it's open, below a back button and its item's label. ← (→ in right-to-left),
+* Escape and the back button go back. It's portalled into the sheet after its menu, so the
+* sheet's focus scope covers it.
+*/
+function SubmenuSheetPanel({ state, submenuRef, menuProps, submenu, title }) {
+	const tree = useContext(MenuTreeContext);
+	if (!state.isOpen || !tree.container) return null;
+	const { submenuLevel, ...ariaMenuProps } = menuProps;
+	const own = submenu.props;
+	const variant = own.variant ?? tree.variant;
+	const styles = menuStyles({ variant });
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		portalContainer: tree.container,
+		disableFocusManagement: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-submenu-panel": "",
+			className: styles.sheetPanel(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.sheetHeader(),
+				children: [/* @__PURE__ */ jsx(SheetBackButton, {
+					label: tree.labels.back,
+					onPress: () => state.close(),
+					className: styles.sheetBack()
+				}), /* @__PURE__ */ jsx("span", {
+					className: styles.sheetTitle(),
+					children: title
+				})]
+			}), /* @__PURE__ */ jsx(MenuList, {
+				...mergeProps(ariaMenuProps, own),
+				listRef: submenuRef,
+				layout: "divider",
+				variant,
+				density: own.density ?? tree.density,
+				level: submenuLevel + 1,
+				embedded: true,
+				autoFocus: state.focusStrategy ?? "first"
+			})]
+		})
+	});
+}
+/** The back button above a sheet's submenu: 48px, with an outline focus ring. */
+function SheetBackButton({ label, onPress, className }) {
+	const ref = useRef(null);
+	const { buttonProps, isPressed } = useButton({
+		onPress,
+		"aria-label": label
+	}, ref);
+	const { interactionProps, dataAttributes } = useM3Interaction({ isPressed }, ref);
+	return /* @__PURE__ */ jsx("button", {
+		...mergeProps(buttonProps, interactionProps),
+		...dataAttributes,
+		ref,
+		className,
+		children: /* @__PURE__ */ jsx(BackIcon, {})
+	});
+}
+function SubmenuPopover(props) {
+	const tree = useContext(MenuTreeContext);
+	const presence = usePresence(props.state.isOpen);
+	const isPresent = tree.instant ? props.state.isOpen : presence.isPresent;
+	const isExiting = !tree.instant && presence.isExiting;
+	const { exitProps } = presence;
+	if (!isPresent || !tree.container) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		portalContainer: tree.container,
+		disableFocusManagement: true,
+		exiting: isExiting,
+		children: /* @__PURE__ */ jsx(SubmenuPopoverContent, {
+			...props,
+			isExiting,
+			exitProps
+		})
+	});
+}
+function SubmenuPopoverContent({ state, triggerRef, submenuRef, menuProps, popoverProps, submenu, isExiting, exitProps }) {
+	const tree = useContext(MenuTreeContext);
+	const popoverRef = useRef(null);
+	const { submenuLevel, ...ariaMenuProps } = menuProps;
+	const { popoverProps: positionProps, placement } = usePopover({
+		...popoverProps,
+		trigger: "SubmenuTrigger",
+		triggerRef,
+		popoverRef,
+		placement: "end top",
+		offset: 6,
+		crossOffset: -4
+	}, state);
+	const revealRef = useRef(null);
+	const entering = useRevealEntering(placement, revealRef);
+	const { className, style, ...own } = submenu.props;
+	const styles = menuStyles();
+	return /* @__PURE__ */ jsx("div", {
+		...positionProps,
+		ref: popoverRef,
+		style: {
+			...style,
+			...positionProps.style
+		},
+		"data-overlay-placement": "",
+		className: styles.popover({ class: cn(menuOwnWidth, className) }),
+		children: /* @__PURE__ */ jsx("div", {
+			...exitProps,
+			ref: revealRef,
+			"data-entering": entering || void 0,
+			"data-exiting": isExiting || void 0,
+			"data-placement": placement ?? void 0,
+			className: menuStyles({ instant: tree.instant }).reveal(),
+			children: /* @__PURE__ */ jsx(MenuList, {
+				...mergeProps(ariaMenuProps, own),
+				listRef: submenuRef,
+				layout: own.layout ?? tree.layout,
+				variant: own.variant ?? tree.variant,
+				density: own.density ?? tree.density,
+				level: submenuLevel + 1
+			})
+		})
+	});
+}
+function MenuItemView({ node, state, variant, top, bottom, classNames, triggerProps, itemRef, submenuOpen = false }) {
+	const ownRef = useRef(null);
+	const ref = itemRef ?? ownRef;
+	const props = node.props;
+	const isDisabled = state.disabledKeys.has(node.key);
+	const selectable = state.selectionManager.selectionMode !== "none" && props.checkable !== false;
+	const plainInSelectable = state.selectionManager.selectionMode !== "none" && !selectable;
+	const multiple = selectable && state.selectionManager.selectionMode === "multiple";
+	const { menuItemProps: ariaItemProps, keyboardShortcutProps, isSelected, isPressed } = useMenuItem({
+		...triggerProps,
+		key: node.key,
+		"aria-label": props["aria-label"],
+		isDisabled,
+		isSelected: plainInSelectable ? false : void 0,
+		closeOnSelect: multiple ? false : plainInSelectable ? true : void 0
+	}, state, ref);
+	const menuItemProps = plainInSelectable && !props.submenu ? {
+		...ariaItemProps,
+		role: "menuitem",
+		"aria-checked": void 0
+	} : ariaItemProps;
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isPressed,
+		isDisabled,
+		isSelected
+	}, ref);
+	const styles = menuStyles({
+		variant,
+		itemTop: top,
+		itemBottom: bottom,
+		hasDescription: Boolean(props.description)
+	});
+	const selectedIcon = props.selectedIcon ?? (selectable ? /* @__PURE__ */ jsx(CheckIcon, {}) : null);
+	const trailingIcon = props.trailingIcon ?? (props.submenu ? /* @__PURE__ */ jsx(SubmenuIcon, {}) : null);
+	const badgeId = useId();
+	const describedBy = [props.shortcut ? keyboardShortcutProps.id : void 0, props.badge ? badgeId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		...mergeProps(menuItemProps, interactionProps),
+		...dataAttributes,
+		"aria-labelledby": void 0,
+		"aria-describedby": describedBy,
+		"data-menu-open": submenuOpen || void 0,
+		"data-tokens": mergeDataTokens("md-comp-menus", menuItemProps),
+		"data-variant": variant,
+		"data-slot": "item",
+		ref,
+		className: styles.item({ class: cn(classNames?.item, props.className) }),
+		children: [
+			props.leadingIcon && selectedIcon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "leading-icon",
+				className: styles.icon({ class: classNames?.icon }),
+				children: isSelected ? selectedIcon : props.leadingIcon
+			}) : props.leadingIcon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "leading-icon",
+				className: styles.icon({ class: classNames?.icon }),
+				children: props.leadingIcon
+			}) : selectedIcon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: styles.selectedIcon(),
+				children: /* @__PURE__ */ jsx("span", {
+					className: styles.selectedIconInner(),
+					children: /* @__PURE__ */ jsx("span", {
+						className: styles.icon({ class: classNames?.icon }),
+						children: selectedIcon
+					})
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: styles.text(),
+				children: [/* @__PURE__ */ jsx("span", { children: node.rendered }), props.description && /* @__PURE__ */ jsx("span", {
+					className: styles.description({ class: classNames?.description }),
+					children: props.description
+				})]
+			}),
+			props.badge && /* @__PURE__ */ jsx("span", {
+				id: badgeId,
+				"aria-hidden": "true",
+				className: styles.badge(),
+				children: props.badge
+			}),
+			props.shortcut && /* @__PURE__ */ jsx("kbd", {
+				...keyboardShortcutProps,
+				"aria-hidden": "true",
+				className: styles.trailing({ class: cn("font-plain", classNames?.shortcut) }),
+				children: props.shortcut
+			}),
+			trailingIcon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "trailing-icon",
+				className: styles.trailing({ class: classNames?.trailingIcon }),
+				children: trailingIcon
+			})
+		]
+	});
+}
+//#endregion
+export { CheckableMenuItem, ContextMenuTrigger, Menu, MenuGroup, MenuItem, MenuTrigger, SubmenuTrigger };
+
+//# sourceMappingURL=Menu.js.map