@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/overlay/Menu.js

@@ -0,0 +1,816 @@
+import { defaultLabelledBy, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { transitions } from "../utils/style/transitions.js";
+import { rippleHostStyles, useRipple } from "../utils/dom/ripple.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { useRouterLink } from "../utils/dom/link.js";
+import { toElement } from "../utils/dom/element.js";
+import { useLazyContent } from "../utils/motion/presence.js";
+import { childNodes } from "../utils/data/text.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { floatingStyles, pointAnchor, useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { ariaKeyShortcut, formatHotkey, useHotkeys } from "../utils/dom/hotkeys.js";
+import { itemStyles } from "../utils/style/item-styles.js";
+import { rovingFocus } from "../utils/dom/roving-focus.js";
+import { Fragment, createVNode, isVNode, mergeProps, onBeforeUnmount, shallowRef, useId } from "vue";
+import { _component, bindable, childrenProp, childrenStable, createContext, effect, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check, ChevronRight, Dot } from "@lucide/icons";
+//#region src/overlay/Menu.tsx
+/**
+* 菜单（WAI-ARIA 的 Menu Button 模式）：按钮弹出一列操作，复合组件，参考 Radix DropdownMenu、React Aria Menu。
+*
+*   <Menu trigger={(props) => <Button {...props} iconEnd={ChevronDown}>操作</Button>}>
+*     <MenuItem icon={Pencil} onAction={edit}>编辑</MenuItem>
+*     <MenuItem icon={Copy} shortcut="Ctrl+D" onAction={duplicate}>复制</MenuItem>
+*     <Separator decorative={false} />
+*     <MenuGroup label="视图">
+*       <MenuCheckboxItem _checked={showGrid}>显示网格</MenuCheckboxItem>
+*     </MenuGroup>
+*     <MenuRadioGroup _value={sort} label="排序">
+*       <MenuRadioItem value="name">名称</MenuRadioItem>
+*       <MenuRadioItem value="date">日期</MenuRadioItem>
+*     </MenuRadioGroup>
+*     <MenuLinkItem href="/settings">设置</MenuLinkItem>
+*     <MenuItem icon={Trash2} tone="danger" onAction={remove}>删除</MenuItem>
+*   </Menu>
+*
+* 键盘：触发器上 Enter / 空格 / ↓ 打开并聚焦第一项，↑ 打开并聚焦最后一项；菜单里 ↑↓ 移动（循环）、Home / End、
+* 按字母跳到以它开头的项（rovingFocus 的 typeahead），Enter / 空格执行，Esc 关闭并回到触发器，Tab 关闭并继续往后。
+* 执行普通项后关闭菜单；复选项默认不关（常连续勾选几项），单选项默认关闭；都可以用 closeOnSelect 改。
+* 原生 popover="auto" 负责顶层、点击外部关闭与嵌套顺序，定位与焦点进出见 utils/dom/floating。
+*/
+/** Menu 交给菜单项的状态 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Menu 的上下文：自定义菜单项用 useMenuItem 读取 */
+var MenuContext = createContext("Menu");
+/** MenuRadioGroup 交给组内单选项的状态 */
+/** MenuRadioGroup 的上下文 */
+var MenuRadioGroupContext = createContext("MenuRadioGroup");
+/** 交给触发器的属性：展开到按钮上（`{...props}`） */
+/** 未声明的属性落到菜单（role="menu" 的 div）上 */
+/** 菜单项的选择器（漫游焦点、打开时聚焦第一项 / 最后一项） */
+var ITEMS = "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]";
+/** 菜单自己的可用项：不含子菜单里的 */
+function menuItemsOf(panel) {
+	return [...panel?.querySelectorAll(ITEMS) ?? []].filter((item) => item.parentElement?.closest("[role=\"menu\"]") === panel && !item.matches(":disabled, [aria-disabled=\"true\"]"));
+}
+/** Menu 的样式：panel、content、label、indicator、hidden、shortcut、groupLabel */
+var menuStyles = css.create({
+	panel: {
+		minWidth: "12em",
+		maxWidth: "calc(100vw - 2em)",
+		lineHeight: "_normal"
+	},
+	content: { padding: "_xs" },
+	label: {
+		flexGrow: 1,
+		minWidth: 0
+	},
+	text: {
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	description: { display: "block" },
+	indicator: {
+		flexShrink: 0,
+		width: "1em"
+	},
+	hidden: { visibility: "hidden" },
+	shortcut: {
+		flexShrink: 0,
+		marginInlineStart: "_lg"
+	},
+	groupLabel: {
+		display: "block",
+		paddingBlock: "_xs",
+		paddingInline: "_sm",
+		fontWeight: "_semibold"
+	}
+});
+/** 菜单：触发器 + 弹出的一列菜单项 */
+var Menu$1 = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placement = readonlyProp(_props, "placement", "bottom-start");
+	const offset = readonlyProp(_props, "offset");
+	const size = readonlyProp(_props, "size");
+	const ripple = readonlyProp(_props, "ripple");
+	const trigger = readonlyProp(_props, "trigger");
+	const point = readonlyProp(_props, "point");
+	const lazy = readonlyProp(_props, "lazy", true);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const id = useId();
+	const showContent = useLazyContent(() => open.value, () => lazy.value);
+	const triggerId = `${id}-trigger`;
+	let anchor = shallowRef(null);
+	let panel = shallowRef(null);
+	let focusOnOpen = "first";
+	let restoreFocus = true;
+	const enabledItems = () => menuItemsOf(panel.value);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	MenuContext.provide({
+		get ripple() {
+			return ripple.value;
+		},
+		close: (event) => setOpen(false, "select", event)
+	});
+	function onTriggerKeydown(event) {
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		focusOnOpen = event.key === "ArrowDown" ? "first" : "last";
+		setOpen(true, "trigger", event);
+	}
+	function onPanelKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			setOpen(false, "escape", event);
+			return;
+		}
+		if (event.key !== "Tab") return;
+		restoreFocus = false;
+		setOpen(false, "focus", event);
+	}
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: open.value,
+		anchor: point.value ? pointAnchor(point.value.x, point.value.y) : anchor.value,
+		panel: panel.value,
+		floating: {
+			placement: placement.value,
+			offset: offset.value,
+			fitHeight: true
+		},
+		restoreFocus
+	}), {
+		close: (reason, event) => setOpen(false, reason, event),
+		shown: () => {
+			const items = enabledItems();
+			(focusOnOpen === "first" ? items[0] : items.at(-1))?.focus();
+			focusOnOpen = "first";
+			restoreFocus = true;
+		}
+	});
+	effect(() => panel.value ? rovingFocus(panel.value, {
+		items: ITEMS,
+		orientation: "vertical",
+		loop: true,
+		typeahead: true
+	}) : void 0);
+	return () => createVNode(Fragment, null, [trigger.value({
+		id: triggerId,
+		ref: (value) => anchor.value = toElement(value),
+		onClick: (event) => setOpen(!open.value, "trigger", event),
+		onKeydown: onTriggerKeydown,
+		"aria-haspopup": "menu",
+		"aria-expanded": open.value,
+		"aria-controls": id
+	}), createVNode("div", mergeProps(mergeAttrs({
+		sx: [
+			floatingStyles.anchored,
+			floatingStyles.surface,
+			floatingStyles.scrollPanel,
+			menuStyles.panel,
+			size.value && fontSizeStyles[size.value],
+			transitions.scale
+		],
+		"aria-labelledby": anchor.value ? defaultLabelledBy(rest, triggerId) : void 0
+	}, rest, {
+		ref: panel,
+		id,
+		popover: "auto",
+		role: "menu",
+		onToggle,
+		onKeydown: onPanelKeydown
+	}), { "data-state": open.value ? "open" : "closed" }), [createVNode(ScrollArea, {
+		"focusable": false,
+		"sx": floatingStyles.scrollArea,
+		"propsContent": _cache[0] || (_cache[0] = { sx: menuStyles.content }),
+		"key": "__site0"
+	}, {
+		default: () => [(showContent() || hasShortcut(children.value)) && children.value],
+		$stable: childrenStable()
+	})])]);
+}, {
+	name: "Menu",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placement",
+		"offset",
+		"size",
+		"ripple",
+		"trigger",
+		"point",
+		"lazy"
+	]
+});
+/** 菜单项内容（图标、文字、快捷键）的选项，各种菜单项共有 */
+/** 复选、单选项的标记：占一列，没勾选时只占位，各项文字对齐 */
+/** 有说明的菜单项：文字与说明各自的 id（名称只取文字，说明作为描述） */
+/** 菜单项文字与说明的 id；在菜单项的 setup 里调用 */
+function useMenuItemContentIds() {
+	const id = useId();
+	return {
+		label: `${id}-label`,
+		description: `${id}-description`
+	};
+}
+/** 有说明时菜单项的名称只取文字、说明作为描述；没有说明时名称就是全部内容 */
+function menuItemDescribedBy(description, ids) {
+	return description == null ? {} : {
+		"aria-labelledby": ids.label,
+		"aria-describedby": ids.description
+	};
+}
+/** 菜单项的内容：标记 + 图标 + 文字（与说明）+ 快捷键 */
+function menuItemContent({ icon, shortcut, description, propsIcon, propsLabel, propsShortcut, propsDescription, children }, mark, ids) {
+	let _slot;
+	return [
+		mark && createVNode(Icon, mergePartProps({
+			icon: mark.icon,
+			sx: [menuStyles.indicator, !mark.checked && menuStyles.hidden]
+		}, mark.props), null),
+		icon && createVNode(Icon, mergePartProps({ icon }, propsIcon), null),
+		description == null ? createVNode("span", mergeAttrs({ sx: menuStyles.label }, propsLabel), [children]) : createVNode("span", css.attrs(menuStyles.text), [createVNode("span", mergeAttrs({ id: ids?.label }, propsLabel), [children]), createVNode(Text$1, mergePartProps({
+			tone: "muted",
+			size: "sm",
+			id: ids?.description,
+			sx: menuStyles.description
+		}, propsDescription), _isSlot(description) ? description : { default: () => [description] })]),
+		shortcut && createVNode(Text$1, mergePartProps({
+			tone: "muted",
+			size: "sm",
+			sx: menuStyles.shortcut
+		}, propsShortcut, { "aria-hidden": keyShortcuts(shortcut) ? true : void 0 }), _isSlot(_slot = formatHotkey(shortcut)) ? _slot : { default: () => [_slot] })
+	];
+}
+/** 快捷键交给读屏（aria-keyshortcuts）：右侧显示的快捷键文字对读屏隐藏，不重复念 */
+var keyShortcuts = (shortcut) => shortcut ? ariaKeyShortcut(shortcut) : void 0;
+/** 菜单项的快捷键：不可用时不触发；按下时和点击这一项一样执行（不关心菜单是否打开） */
+function useItemShortcut(read, run) {
+	useHotkeys(() => {
+		const { shortcut, disabled } = read();
+		return shortcut && !disabled ? { [shortcut]: run } : {};
+	});
+}
+/** 菜单项的色调：菜单里只区分普通操作与破坏性操作，其余状态色会让一列选项显得像警报 */
+/** 菜单项的外观：幽灵按钮，内容靠起始边排列 */
+function menuItemSx(tone, disabled) {
+	return [
+		itemStyles.row,
+		tone === "danger" ? itemStyles.danger : itemStyles.hoverable,
+		focusRingStyles.visible,
+		rippleHostStyles.host,
+		disabled && itemStyles.disabled
+	];
+}
+/** 菜单项共用的：所在的菜单、按下的波纹（链接项用；按钮项由 ButtonBase 给出）、执行后关闭菜单 */
+function useMenuItem() {
+	const menu = MenuContext.inject();
+	return {
+		menu,
+		ripple: useRipple(() => menu.ripple),
+		close: (event) => menu.close(event)
+	};
+}
+/** 按钮类菜单项这一次渲染的取值 */
+/**
+* 按钮类菜单项（MenuItem、MenuCheckboxItem、MenuRadioItem）共用的：快捷键、说明的关联、外观与角色，
+* 执行（点击、Enter、空格、快捷键）时调用 run，点击后按 closeOnSelect 关闭菜单。返回渲染函数
+*/
+function useButtonItem(read, run) {
+	const item = useMenuItem();
+	const ids = useMenuItemContentIds();
+	useItemShortcut(read, run);
+	return ({ role, tone = "neutral", disabled, closeOnSelect, checked, indicator, content, attrs }) => {
+		let _slot2;
+		return createVNode(ButtonBase, mergeProps(mergePartProps({
+			sx: menuItemSx(tone, disabled),
+			ripple: item.menu.ripple
+		}, attrs, {
+			role,
+			disabled,
+			"aria-keyshortcuts": keyShortcuts(content.shortcut),
+			"aria-checked": checked,
+			...menuItemDescribedBy(content.description, ids),
+			onClick: (event) => {
+				run();
+				if (closeOnSelect) item.close(event);
+			}
+		}), { "data-state": checked == null ? void 0 : checked ? "checked" : "unchecked" }), _isSlot(_slot2 = menuItemContent(content, indicator, ids)) ? _slot2 : { default: () => [_slot2] });
+	};
+}
+/** 按钮类菜单项共有的属性；未声明的属性落到 button 上 */
+/** 未声明的属性落到 button（role="menuitem"）上 */
+/** 普通菜单项：执行一个操作 */
+var MenuItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const tone = readonlyProp(_props2, "tone", "neutral");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const closeOnSelect = readonlyProp(_props2, "closeOnSelect", true);
+	const onAction = readonlyProp(_props2, "onAction");
+	const icon = readonlyProp(_props2, "icon");
+	const shortcut = readonlyProp(_props2, "shortcut");
+	const description = readonlyProp(_props2, "description");
+	const propsIcon = readonlyProp(_props2, "propsIcon");
+	const propsLabel = readonlyProp(_props2, "propsLabel");
+	const propsShortcut = readonlyProp(_props2, "propsShortcut");
+	const propsDescription = readonlyProp(_props2, "propsDescription");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const render = useButtonItem(() => ({
+		shortcut: shortcut.value,
+		disabled: disabled.value
+	}), () => onAction.value?.());
+	return () => render({
+		role: "menuitem",
+		tone: tone.value,
+		disabled: disabled.value,
+		closeOnSelect: closeOnSelect.value,
+		attrs: rest,
+		content: {
+			icon: icon.value,
+			shortcut: shortcut.value,
+			description: description.value,
+			propsIcon: propsIcon.value,
+			propsLabel: propsLabel.value,
+			propsShortcut: propsShortcut.value,
+			propsDescription: propsDescription.value,
+			children: children.value
+		}
+	});
+}, {
+	name: "MenuItem",
+	props: [
+		"tone",
+		"disabled",
+		"closeOnSelect",
+		"onAction",
+		"icon",
+		"shortcut",
+		"description",
+		"propsIcon",
+		"propsLabel",
+		"propsShortcut",
+		"propsDescription"
+	]
+});
+/** 未声明的属性落到 a（role="menuitem"）上 */
+/** 链接菜单项（a）：跳转到一个地址，随后关闭菜单 */
+var MenuLinkItem = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const href = readonlyProp(_props3, "href");
+	const disabled = readonlyProp(_props3, "disabled", false);
+	const icon = readonlyProp(_props3, "icon");
+	const shortcut = readonlyProp(_props3, "shortcut");
+	const description = readonlyProp(_props3, "description");
+	const propsIcon = readonlyProp(_props3, "propsIcon");
+	const propsLabel = readonlyProp(_props3, "propsLabel");
+	const propsShortcut = readonlyProp(_props3, "propsShortcut");
+	const propsDescription = readonlyProp(_props3, "propsDescription");
+	const children = childrenProp(_props3);
+	const rest = restProps(_props3, _ctx3, false);
+	const item = useMenuItem();
+	const ids = useMenuItemContentIds();
+	const router = useRouterLink();
+	return () => createVNode("a", mergeProps(mergeAttrs({ sx: menuItemSx("neutral", disabled.value) }, rest, {
+		role: "menuitem",
+		href: disabled.value ? void 0 : router.href(href.value),
+		"aria-keyshortcuts": keyShortcuts(shortcut.value),
+		"aria-disabled": disabled.value || void 0,
+		...menuItemDescribedBy(description.value, ids),
+		onClick: (event) => {
+			if (disabled.value) return event.preventDefault();
+			router.onClick(event, href.value);
+			item.close(event);
+		},
+		...item.ripple
+	}), { "data-disabled": disabled.value || void 0 }), [menuItemContent({
+		icon: icon.value,
+		shortcut: shortcut.value,
+		description: description.value,
+		propsIcon: propsIcon.value,
+		propsLabel: propsLabel.value,
+		propsShortcut: propsShortcut.value,
+		propsDescription: propsDescription.value,
+		children: children.value
+	}, void 0, ids)]);
+}, {
+	name: "MenuLinkItem",
+	props: [
+		"href",
+		"disabled",
+		"icon",
+		"shortcut",
+		"description",
+		"propsIcon",
+		"propsLabel",
+		"propsShortcut",
+		"propsDescription"
+	]
+});
+/** 未声明的属性落到 button（role="menuitemcheckbox"）上 */
+/** 复选菜单项：切换一个开关；默认执行后不关闭菜单 */
+var MenuCheckboxItem = /*#__PURE__*/ _component((_props4, _ctx4) => {
+	const checked = bindable(_props4, "_checked", () => false, _ctx4.emit);
+	const disabled = readonlyProp(_props4, "disabled", false);
+	const closeOnSelect = readonlyProp(_props4, "closeOnSelect", false);
+	const propsIndicator = readonlyProp(_props4, "propsIndicator");
+	const icon = readonlyProp(_props4, "icon");
+	const shortcut = readonlyProp(_props4, "shortcut");
+	const description = readonlyProp(_props4, "description");
+	const propsIcon = readonlyProp(_props4, "propsIcon");
+	const propsLabel = readonlyProp(_props4, "propsLabel");
+	const propsShortcut = readonlyProp(_props4, "propsShortcut");
+	const propsDescription = readonlyProp(_props4, "propsDescription");
+	const children = childrenProp(_props4);
+	const rest = restProps(_props4, _ctx4, false);
+	const render = useButtonItem(() => ({
+		shortcut: shortcut.value,
+		disabled: disabled.value
+	}), () => checked.value = !checked.value);
+	return () => render({
+		role: "menuitemcheckbox",
+		disabled: disabled.value,
+		closeOnSelect: closeOnSelect.value,
+		checked: checked.value,
+		indicator: {
+			icon: Check,
+			checked: checked.value,
+			props: propsIndicator.value
+		},
+		attrs: rest,
+		content: {
+			icon: icon.value,
+			shortcut: shortcut.value,
+			description: description.value,
+			propsIcon: propsIcon.value,
+			propsLabel: propsLabel.value,
+			propsShortcut: propsShortcut.value,
+			propsDescription: propsDescription.value,
+			children: children.value
+		}
+	});
+}, {
+	name: "MenuCheckboxItem",
+	props: [
+		"_checked",
+		"onUpdate:_checked",
+		"disabled",
+		"closeOnSelect",
+		"propsIndicator",
+		"icon",
+		"shortcut",
+		"description",
+		"propsIcon",
+		"propsLabel",
+		"propsShortcut",
+		"propsDescription"
+	]
+});
+/** 未声明的属性落到分组的 div（role="group"）上 */
+/** 渲染分组：role="group"，有标题时 aria-labelledby 指向它 */
+function renderGroup(labelId, { label, propsLabel, children, ...rest }) {
+	return createVNode("div", mergeAttrs({}, rest, {
+		role: "group",
+		"aria-labelledby": hasContent(label) ? labelId : void 0
+	}), [hasContent(label) && createVNode(Text$1, mergePartProps({
+		tone: "muted",
+		size: "sm",
+		sx: menuStyles.groupLabel
+	}, propsLabel, { id: labelId }), _isSlot(label) ? label : { default: () => [label] }), children]);
+}
+/** 菜单里的一组项，带可选的标题 */
+var MenuGroup = /*#__PURE__*/ _component((_props5, _ctx5) => {
+	const label = readonlyProp(_props5, "label");
+	const propsLabel = readonlyProp(_props5, "propsLabel");
+	const children = childrenProp(_props5);
+	const rest = restProps(_props5, _ctx5, false);
+	const labelId = useId();
+	return () => renderGroup(labelId, {
+		label: label.value,
+		propsLabel: propsLabel.value,
+		children: children.value,
+		...rest
+	});
+}, {
+	name: "MenuGroup",
+	props: ["label", "propsLabel"]
+});
+/** 未声明的属性落到分组的 div（role="group"）上 */
+/** 一组单选菜单项：同一时间只选中一项 */
+var MenuRadioGroup = /*#__PURE__*/ _component((_props6, _ctx6) => {
+	const value = bindable(_props6, "_value", () => void 0, _ctx6.emit);
+	const label = readonlyProp(_props6, "label");
+	const propsLabel = readonlyProp(_props6, "propsLabel");
+	const children = childrenProp(_props6);
+	const rest = restProps(_props6, _ctx6, false);
+	const labelId = useId();
+	MenuRadioGroupContext.provide({
+		get value() {
+			return value.value;
+		},
+		select: (next) => value.value = next
+	});
+	return () => renderGroup(labelId, {
+		label: label.value,
+		propsLabel: propsLabel.value,
+		children: children.value,
+		...rest
+	});
+}, {
+	name: "MenuRadioGroup",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"label",
+		"propsLabel"
+	]
+});
+/** 未声明的属性落到 button（role="menuitemradio"）上 */
+/** 单选菜单项：放在 MenuRadioGroup 里；默认执行后关闭菜单 */
+var MenuRadioItem = /*#__PURE__*/ _component((_props7, _ctx7) => {
+	const value = readonlyProp(_props7, "value");
+	const disabled = readonlyProp(_props7, "disabled", false);
+	const closeOnSelect = readonlyProp(_props7, "closeOnSelect", true);
+	const propsIndicator = readonlyProp(_props7, "propsIndicator");
+	const icon = readonlyProp(_props7, "icon");
+	const shortcut = readonlyProp(_props7, "shortcut");
+	const description = readonlyProp(_props7, "description");
+	const propsIcon = readonlyProp(_props7, "propsIcon");
+	const propsLabel = readonlyProp(_props7, "propsLabel");
+	const propsShortcut = readonlyProp(_props7, "propsShortcut");
+	const propsDescription = readonlyProp(_props7, "propsDescription");
+	const children = childrenProp(_props7);
+	const rest = restProps(_props7, _ctx7, false);
+	const group = MenuRadioGroupContext.inject();
+	const render = useButtonItem(() => ({
+		shortcut: shortcut.value,
+		disabled: disabled.value
+	}), () => group.select(value.value));
+	return () => {
+		const checked = group.value === value.value;
+		return render({
+			role: "menuitemradio",
+			disabled: disabled.value,
+			closeOnSelect: closeOnSelect.value,
+			checked,
+			indicator: {
+				icon: Dot,
+				checked,
+				props: propsIndicator.value
+			},
+			attrs: rest,
+			content: {
+				icon: icon.value,
+				shortcut: shortcut.value,
+				description: description.value,
+				propsIcon: propsIcon.value,
+				propsLabel: propsLabel.value,
+				propsShortcut: propsShortcut.value,
+				propsDescription: propsDescription.value,
+				children: children.value
+			}
+		});
+	};
+}, {
+	name: "MenuRadioItem",
+	props: [
+		"value",
+		"disabled",
+		"closeOnSelect",
+		"propsIndicator",
+		"icon",
+		"shortcut",
+		"description",
+		"propsIcon",
+		"propsLabel",
+		"propsShortcut",
+		"propsDescription"
+	]
+});
+/** 未声明的属性落到打开子菜单的 button（role="menuitem"）上 */
+/** 指针停在子菜单项上多久后打开（毫秒） */
+var SUBMENU_OPEN_DELAY = 100;
+/** 指针离开后，在安全三角里最多保持多久（毫秒） */
+var SUBMENU_GRACE = 400;
+/** 点 p 是否在三角形 abc 里（三条边的同侧判断） */
+function inTriangle(p, a, b, c) {
+	const side = (from, to) => (p[0] - to[0]) * (from[1] - to[1]) - (from[0] - to[0]) * (p[1] - to[1]);
+	const d1 = side(a, b);
+	const d2 = side(b, c);
+	const d3 = side(c, a);
+	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
+}
+/**
+* 子菜单：菜单里的一项，打开另一列菜单（WAI-ARIA 的子菜单）。→（从右到左排版时 ←）、Enter、空格打开并聚焦第一项，
+* 子菜单里 ←（→）或 Esc 关闭并回到这一项；指针停一会儿打开，朝子菜单斜着移动时经过别的项也不关（安全三角）。
+* 子菜单里执行一项后，整串菜单都关闭。
+*
+*   <MenuSub label="分享" icon={Share}>
+*     <MenuItem onAction={copyLink}>复制链接</MenuItem>
+*   </MenuSub>
+*/
+var MenuSub = /*#__PURE__*/ _component((_props8, _ctx8) => {
+	const _cache2 = [];
+	const label = readonlyProp(_props8, "label");
+	const open = bindable(_props8, "_open", () => false, _ctx8.emit);
+	const onOpenChange = readonlyProp(_props8, "onOpenChange");
+	const disabled = readonlyProp(_props8, "disabled", false);
+	const icon = readonlyProp(_props8, "icon");
+	const propsIcon = readonlyProp(_props8, "propsIcon");
+	const propsLabel = readonlyProp(_props8, "propsLabel");
+	const propsPanel = readonlyProp(_props8, "propsPanel");
+	const propsChevron = readonlyProp(_props8, "propsChevron");
+	childrenProp(_props8);
+	const rest = restProps(_props8, _ctx8, false);
+	const parent = MenuContext.inject();
+	const id = useId();
+	const triggerId = `${id}-trigger`;
+	let trigger = shallowRef(null);
+	let panel = shallowRef(null);
+	let focusOnOpen = false;
+	let openTimer;
+	let stopGrace;
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	MenuContext.provide({
+		get ripple() {
+			return parent.ripple;
+		},
+		close: (event) => {
+			setOpen(false, "select", event);
+			parent.close(event);
+		}
+	});
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: open.value,
+		anchor: trigger.value,
+		panel: panel.value,
+		floating: {
+			placement: trigger.value && isRtl(trigger.value) ? "left-start" : "right-start",
+			offset: 2,
+			fitHeight: true
+		}
+	}), {
+		close: (reason, event) => setOpen(false, reason, event),
+		shown: () => {
+			if (focusOnOpen) menuItemsOf(panel.value)[0]?.focus();
+			focusOnOpen = false;
+		}
+	});
+	effect(() => panel.value ? rovingFocus(panel.value, {
+		items: ITEMS,
+		orientation: "vertical",
+		loop: true,
+		typeahead: true
+	}) : void 0);
+	onBeforeUnmount(() => {
+		clearTimeout(openTimer);
+		stopGrace?.();
+	});
+	const rtl = () => !!trigger.value && isRtl(trigger.value);
+	function openWithFocus(event) {
+		if (disabled.value) return;
+		focusOnOpen = true;
+		if (open.value) menuItemsOf(panel.value)[0]?.focus();
+		setOpen(true, "trigger", event);
+	}
+	function onTriggerKeydown(event) {
+		if (event.key !== inlineArrows(rtl()).forward) return;
+		event.preventDefault();
+		openWithFocus(event);
+	}
+	function onPanelKeydown(event) {
+		if (event.key !== "Escape" && event.key !== inlineArrows(rtl()).backward) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setOpen(false, "escape", event);
+	}
+	function onTriggerPointerleave(event) {
+		clearTimeout(openTimer);
+		if (!open.value || !panel.value) return;
+		stopGrace?.();
+		const rect = panel.value.getBoundingClientRect();
+		const edge = rect.left >= event.clientX ? rect.left : rect.right;
+		const start = [event.clientX, event.clientY];
+		const close = () => {
+			stopGrace?.();
+			setOpen(false, "hover", event);
+		};
+		const onMove = (move) => {
+			const target = move.target;
+			if (panel.value?.contains(target) || trigger.value?.contains(target)) {
+				stopGrace?.();
+				return;
+			}
+			if (!inTriangle([move.clientX, move.clientY], start, [edge, rect.top], [edge, rect.bottom])) close();
+		};
+		const timer = setTimeout(close, SUBMENU_GRACE);
+		document.addEventListener("pointermove", onMove);
+		stopGrace = () => {
+			clearTimeout(timer);
+			document.removeEventListener("pointermove", onMove);
+			stopGrace = void 0;
+		};
+	}
+	function onTriggerPointerenter(event) {
+		if (disabled.value || event.pointerType === "touch") return;
+		stopGrace?.();
+		clearTimeout(openTimer);
+		openTimer = setTimeout(() => setOpen(true, "hover", event), SUBMENU_OPEN_DELAY);
+	}
+	return () => {
+		let _slot3;
+		return createVNode(Fragment, null, [createVNode(ButtonBase, mergeProps(mergePartProps({
+			sx: menuItemSx("neutral", disabled.value),
+			ripple: parent.ripple
+		}, rest, {
+			ref: (value) => trigger.value = toElement(value),
+			id: triggerId,
+			role: "menuitem",
+			disabled: disabled.value,
+			"aria-haspopup": "menu",
+			"aria-expanded": open.value,
+			"aria-controls": id,
+			onClick: openWithFocus,
+			onKeydown: onTriggerKeydown,
+			onPointerenter: onTriggerPointerenter,
+			onPointerleave: onTriggerPointerleave
+		}), {
+			"data-state": open.value ? "open" : "closed",
+			"key": "__site1"
+		}), {
+			default: () => [menuItemContent({
+				icon: icon.value,
+				propsIcon: propsIcon.value,
+				propsLabel: propsLabel.value,
+				children: label.value
+			}), createVNode(Icon, mergePartProps({
+				icon: ChevronRight,
+				flipInRtl: true,
+				sx: menuStyles.shortcut
+			}, propsChevron.value), null)],
+			$stable: true
+		}), createVNode("div", mergeProps(mergeAttrs({
+			sx: [
+				floatingStyles.anchored,
+				floatingStyles.surface,
+				floatingStyles.scrollPanel,
+				menuStyles.panel,
+				transitions.scale
+			],
+			"aria-labelledby": defaultLabelledBy(propsPanel.value ?? {}, triggerId)
+		}, propsPanel.value, {
+			ref: panel,
+			id,
+			popover: "auto",
+			role: "menu",
+			onToggle,
+			onKeydown: onPanelKeydown,
+			onPointerenter: () => stopGrace?.()
+		}), { "data-state": open.value ? "open" : "closed" }), [createVNode(ScrollArea, {
+			"focusable": false,
+			"sx": floatingStyles.scrollArea,
+			"propsContent": _cache2[0] || (_cache2[0] = { sx: menuStyles.content })
+		}, _isSlot(_slot3 = forwardChildren(_props8)) ? _slot3 : { default: () => [_slot3] })])]);
+	};
+}, {
+	name: "MenuSub",
+	props: [
+		"label",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"disabled",
+		"icon",
+		"propsIcon",
+		"propsLabel",
+		"propsPanel",
+		"propsChevron"
+	]
+});
+/**
+* 内容里有没有带快捷键的菜单项（含分组、子菜单里的）：只生成虚拟节点、不挂载。
+* 快捷键由菜单项注册，延迟渲染时菜单没打开就没有注册，所以这样的菜单不延迟
+*/
+function hasShortcut(content) {
+	return childNodes(content).some((node) => {
+		if (node.props?.shortcut != null) return true;
+		const slot = node.children?.default;
+		return typeof node.type === "object" && typeof slot === "function" && slot.length === 0 ? hasShortcut(slot()) : false;
+	});
+}
+//#endregion
+export { Menu$1 as Menu, MenuCheckboxItem, MenuContext, MenuGroup, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioGroupContext, MenuRadioItem, MenuSub, menuItemContent, menuItemDescribedBy, menuItemSx, menuStyles, useMenuItem, useMenuItemContentIds };
+
+//# sourceMappingURL=Menu.js.map