niuma-ui 2.0.4 → 2.0.9

package/dist/components/context-menu/src/RsContextMenu.impl.js

@@ -1,13 +1,57 @@
-import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "../../_shared/src/reka.js";
-import { hasActionableContextMenuItems } from "./context-menu-utils.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { rsRadiusCss } from "../../_shared/src/resolve-radius.js";
+import { claimContextMenu, escapeContextMenuSelector, findContextMenuItem, firstEnabledContextMenuKey, hasActionableContextMenuItems, hasContextMenuChildren, isContextMenuSeparator, lastEnabledContextMenuKey, listContextMenuLayerItems, matchContextMenuTypeahead, placeContextMenuPoint, placeContextMenuSubmenu, releaseContextMenu, resolveContextMenuElement, resolveContextMenuKeys, resolveContextMenuLayers, resolveContextMenuPortalTarget, shouldCloseContextMenuOnSelect, stepContextMenuKey } from "./context-menu-utils.js";
 import RsContextMenuItems_default from "./RsContextMenuItems.js";
-import { computed, createBlock, createCommentVNode, createVNode, defineComponent, mergeModels, openBlock, renderSlot, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { Comment, Fragment, Teleport, Text, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isVNode, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 //#region src/components/context-menu/src/RsContextMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "rs-context-menu__portal" };
+var _hoisted_2 = [
+	"id",
+	"aria-label",
+	"dir",
+	"lang",
+	"data-rs-theme",
+	"data-placed",
+	"data-origin-x",
+	"data-origin-y"
+];
+var _hoisted_3 = { class: "rs-context-menu__label" };
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-context-menu__hint"
+};
+var SUB_OPEN_MS = 80;
+var SUB_CLOSE_MS = 160;
+var ESTIMATE_W = 176;
+var ESTIMATE_H = 32;
 var RsContextMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsContextMenu",
+	inheritAttrs: false,
 	__name: "RsContextMenu",
 	props: /*@__PURE__*/ mergeModels({
 		items: {},
-		disabled: { type: Boolean }
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		radius: {},
+		hideOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		getPopupContainer: {},
+		popupClassName: {},
+		maxHeight: {},
+		ariaLabel: {},
+		id: {},
+		destroyOnHide: {
+			type: Boolean,
+			default: true
+		}
 	}, {
 		"open": {
 			type: Boolean,
@@ -15,65 +59,768 @@ var RsContextMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		},
 		"openModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["select"], ["update:open"]),
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		/**
-		* 展开状态。不绑定时组件自行维护（与原行为一致）。
-		* 绑定后可由外部主动关闭——例如菜单所依赖的数据已失效时。
-		*/
+	emits: /*@__PURE__*/ mergeModels(["select", "openChange"], ["update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const open = useModel(__props, "open");
+		const props = __props;
 		const emit = __emit;
-		/** 无有效菜单项时不打开，避免空表/空白区右键出现空气泡 */
-		const hasActionableItems = computed(() => hasActionableContextMenuItems(props.items));
-		watch(hasActionableItems, (ok) => {
-			if (!ok && open.value) open.value = false;
+		const { t, locale } = useRsI18n();
+		const config = useRsConfigOptional();
+		const slots = useSlots();
+		const autoId = useId();
+		const menuId = computed(() => props.id || autoId);
+		const configRtl = computed(() => resolveDirMode(config?.dir.value ?? "auto", config?.locale.value ?? locale.value) === "rtl");
+		const menuLabel = computed(() => props.ariaLabel || t("contextMenu.menu"));
+		const iconSize = computed(() => props.size ? RS_COMPONENT_SIZE_ICON_PX[props.size] : 16);
+		const portalTarget = computed(() => resolveContextMenuPortalTarget(props.getPopupContainer, triggerEl.value));
+		const showPanel = computed(() => open.value || !props.destroyOnHide);
+		const triggerEl = ref(null);
+		const anchor = ref({
+			x: 0,
+			y: 0
 		});
-		function onUpdateOpen(next) {
-			if (next && !hasActionableItems.value) {
-				open.value = false;
+		const submenuPath = ref([]);
+		const rootHighlight = ref("");
+		const subHighlights = ref({});
+		const boxes = ref({});
+		const settled = ref({});
+		const panelTheme = ref();
+		const panelDir = ref("ltr");
+		const panelLang = ref();
+		const isRtl = computed(() => open.value ? panelDir.value === "rtl" : configRtl.value);
+		const layers = computed(() => resolveContextMenuLayers(props.items, submenuPath.value).map((layer, depth) => ({
+			...layer,
+			depth,
+			openKey: submenuPath.value[depth] ?? ""
+		})));
+		const layerEls = /* @__PURE__ */ new Map();
+		const layerRefs = /* @__PURE__ */ new Map();
+		const itemRefs = /* @__PURE__ */ new Map();
+		const itemLists = /* @__PURE__ */ new Map();
+		let frame = 0;
+		let overlayBound = false;
+		let openWatchReady = false;
+		let ignoreContextClose = false;
+		let pointLocked = false;
+		let restoreOnClose = false;
+		let restoreTarget = null;
+		let subOpenTimer;
+		let subCloseTimer;
+		let typeaheadTimer;
+		let typeaheadQuery = "";
+		let resizeObserver;
+		let swallowStop;
+		function requestClose() {
+			restoreOnClose = false;
+			pointLocked = false;
+			if (open.value) open.value = false;
+		}
+		function pointFromTrigger() {
+			const el = triggerEl.value;
+			if (!el) return {
+				x: 8,
+				y: 8
+			};
+			const rect = el.getBoundingClientRect();
+			return {
+				x: rect.left + 8,
+				y: rect.top + Math.min(rect.height, 24)
+			};
+		}
+		function setOpen(next, point) {
+			if (next) {
+				if (point) {
+					anchor.value = point;
+					pointLocked = true;
+				} else if (!open.value) {
+					pointLocked = false;
+					anchor.value = pointFromTrigger();
+				}
+				if (props.disabled || !hasActionableContextMenuItems(props.items)) {
+					pointLocked = false;
+					if (open.value) open.value = false;
+					return;
+				}
+			}
+			if (open.value === next) {
+				if (next) requestPlace();
 				return;
 			}
 			open.value = next;
 		}
+		function highlightOf(layerId) {
+			const live = itemLists.get(layerId)?.getHighlight();
+			if (live) return live;
+			if (layerId === "root") return rootHighlight.value;
+			return subHighlights.value[layerId] ?? "";
+		}
+		function setHighlight(layerId, key) {
+			if (!key || highlightOf(layerId) === key) return;
+			const list = itemLists.get(layerId);
+			if (list) {
+				list.setHighlight(key);
+				return;
+			}
+			if (layerId === "root") rootHighlight.value = key;
+			else subHighlights.value = {
+				...subHighlights.value,
+				[layerId]: key
+			};
+		}
+		function layerHighlight(id) {
+			if (id === "root") return rootHighlight.value;
+			return subHighlights.value[id] ?? "";
+		}
+		function setPath(next) {
+			const keep = new Set(next);
+			const settledNext = {};
+			for (const id of Object.keys(settled.value)) if (id === "root" || keep.has(id)) settledNext[id] = true;
+			if (Object.keys(settledNext).length !== Object.keys(settled.value).length) settled.value = settledNext;
+			const boxesNext = {};
+			for (const id of Object.keys(boxes.value)) {
+				const box = boxes.value[id];
+				if (box && (id === "root" || keep.has(id))) boxesNext[id] = box;
+			}
+			if (Object.keys(boxesNext).length !== Object.keys(boxes.value).length) boxes.value = boxesNext;
+			submenuPath.value = next;
+		}
+		function revealSettled() {
+			const next = {};
+			for (const layer of layers.value) if (boxes.value[layer.id]) next[layer.id] = true;
+			const prev = settled.value;
+			const nextKeys = Object.keys(next);
+			if (nextKeys.length === Object.keys(prev).length && nextKeys.every((id) => prev[id])) return;
+			settled.value = next;
+		}
+		function settleLayers(after, prepare) {
+			nextTick(() => {
+				if (!open.value) return;
+				prepare?.();
+				placeAll();
+				nextTick(() => {
+					if (!open.value) return;
+					placeAll();
+					revealSettled();
+					after?.();
+				});
+			});
+		}
+		function readPanelDir(el) {
+			const dirHost = el?.closest("[dir]");
+			if (dirHost instanceof HTMLElement && (dirHost.dir === "rtl" || dirHost.dir === "ltr")) return dirHost.dir;
+			return configRtl.value ? "rtl" : "ltr";
+		}
+		function syncPanelChrome() {
+			const el = triggerEl.value;
+			const themed = el?.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+			panelDir.value = readPanelDir(el);
+			const langHost = el?.closest("[lang]");
+			panelLang.value = langHost instanceof HTMLElement ? langHost.lang || void 0 : void 0;
+		}
+		function sameBoxes(prev, next) {
+			const keys = Object.keys(next);
+			if (keys.length !== Object.keys(prev).length) return false;
+			return keys.every((key) => {
+				const left = prev[key];
+				const right = next[key];
+				return left && right && left.top === right.top && left.left === right.left && left.maxHeight === right.maxHeight && left.originX === right.originX && left.originY === right.originY;
+			});
+		}
+		function placeAll() {
+			if (!open.value || typeof window === "undefined") return;
+			const viewport = {
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
+			const rtl = panelDir.value === "rtl";
+			const next = {};
+			for (const layer of layers.value) {
+				const measured = layerEls.get(layer.id)?.getBoundingClientRect();
+				const popup = {
+					width: measured?.width || ESTIMATE_W,
+					height: measured?.height || ESTIMATE_H
+				};
+				if (layer.id === "root") {
+					const placed = roundBox(placeContextMenuPoint(anchor.value, popup, viewport, 8, rtl));
+					next[layer.id] = props.maxHeight != null ? {
+						...placed,
+						maxHeight: Math.min(placed.maxHeight, Math.max(0, props.maxHeight))
+					} : placed;
+					continue;
+				}
+				const parent = layers.value[layer.depth - 1];
+				const trigger = (parent ? layerEls.get(parent.id) : void 0)?.querySelector(`[data-ctx-key="${escapeContextMenuSelector(layer.parentKey ?? "")}"]`);
+				if (!trigger) continue;
+				const rect = trigger.getBoundingClientRect();
+				const placed = roundBox(placeContextMenuSubmenu({
+					top: rect.top,
+					left: rect.left,
+					width: rect.width,
+					height: rect.height
+				}, popup, viewport, rtl));
+				next[layer.id] = props.maxHeight != null ? {
+					...placed,
+					maxHeight: Math.min(placed.maxHeight, Math.max(0, props.maxHeight))
+				} : placed;
+			}
+			if (!sameBoxes(boxes.value, next)) boxes.value = next;
+		}
+		function requestPlace() {
+			if (typeof window === "undefined" || !open.value) return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placeAll();
+			});
+		}
+		function observeLayers() {
+			if (typeof ResizeObserver === "undefined") return;
+			if (!resizeObserver) resizeObserver = new ResizeObserver(() => requestPlace());
+			resizeObserver.disconnect();
+			for (const el of layerEls.values()) resizeObserver.observe(el);
+		}
+		function setLayerEl(id, value) {
+			if (value instanceof HTMLElement) {
+				if (layerEls.get(id) === value) return;
+				layerEls.set(id, value);
+			} else {
+				if (!layerEls.has(id)) return;
+				layerEls.delete(id);
+				return;
+			}
+			if (open.value) {
+				observeLayers();
+				requestPlace();
+			}
+		}
+		function layerRefFor(id) {
+			const existing = layerRefs.get(id);
+			if (existing) return existing;
+			const fn = (el) => setLayerEl(id, el);
+			layerRefs.set(id, fn);
+			return fn;
+		}
+		function itemsRefFor(id) {
+			const existing = itemRefs.get(id);
+			if (existing) return existing;
+			const fn = (el) => bindItems(id, el);
+			itemRefs.set(id, fn);
+			return fn;
+		}
+		function bindItems(id, value) {
+			if (value && typeof value === "object" && "getHighlight" in value && "setHighlight" in value && typeof value.getHighlight === "function" && typeof value.setHighlight === "function") {
+				itemLists.set(id, value);
+				return;
+			}
+			itemLists.delete(id);
+		}
+		function layerStyle(id) {
+			const box = boxes.value[id];
+			const style = {
+				top: `${box?.top ?? anchor.value.y}px`,
+				left: `${box?.left ?? anchor.value.x}px`,
+				zIndex: "var(--rs-ctx-z)"
+			};
+			if (box) style.maxHeight = `${box.maxHeight}px`;
+			else if (props.maxHeight != null) style.maxHeight = `${Math.max(0, props.maxHeight)}px`;
+			if (props.radius) {
+				const radius = rsRadiusCss(props.radius);
+				style["--rs-ctx-radius"] = radius;
+				style["--rs-ctx-item-radius"] = radius;
+			}
+			return style;
+		}
+		function isInsideMenu(target) {
+			if (!(target instanceof Node)) return false;
+			for (const el of layerEls.values()) if (el === target || el.contains(target)) return true;
+			return false;
+		}
+		function layerIdFromTarget(target) {
+			if (target instanceof Node) for (const layer of [...layers.value].reverse()) {
+				const el = layerEls.get(layer.id);
+				if (el && (el === target || el.contains(target))) return layer.id;
+			}
+			return layers.value[layers.value.length - 1]?.id ?? "root";
+		}
+		function focusWithoutScroll(el) {
+			try {
+				el.focus({ preventScroll: true });
+			} catch {
+				el.focus();
+			}
+		}
+		function roundBox(box) {
+			return {
+				top: Math.round(box.top),
+				left: Math.round(box.left),
+				maxHeight: Math.round(box.maxHeight),
+				originX: box.originX,
+				originY: box.originY
+			};
+		}
+		function focusLayerItem(layerId, key) {
+			const root = layerEls.get(layerId);
+			if (!root) return;
+			if (!key) {
+				focusWithoutScroll(root);
+				return;
+			}
+			const el = root.querySelector(`[data-ctx-key="${escapeContextMenuSelector(key)}"]`);
+			if (el) focusWithoutScroll(el);
+			else focusWithoutScroll(root);
+		}
+		function clearSubOpen() {
+			if (!subOpenTimer) return;
+			clearTimeout(subOpenTimer);
+			subOpenTimer = void 0;
+		}
+		function clearSubClose() {
+			if (!subCloseTimer) return;
+			clearTimeout(subCloseTimer);
+			subCloseTimer = void 0;
+		}
+		function clearSubTimers() {
+			clearSubOpen();
+			clearSubClose();
+		}
+		function clearTypeahead() {
+			typeaheadQuery = "";
+			if (!typeaheadTimer) return;
+			clearTimeout(typeaheadTimer);
+			typeaheadTimer = void 0;
+		}
+		function openSubmenu(key, depth) {
+			clearSubTimers();
+			const next = submenuPath.value.slice(0, depth);
+			next.push(key);
+			const parent = findContextMenuItem(props.items, key);
+			if (!subHighlights.value[key]) subHighlights.value = {
+				...subHighlights.value,
+				[key]: firstEnabledContextMenuKey(parent?.children ?? [])
+			};
+			setPath(next);
+			const focusKey = subHighlights.value[key] ?? "";
+			settleLayers(() => focusLayerItem(key, focusKey));
+		}
+		function scheduleOpen(key, depth) {
+			clearSubOpen();
+			clearSubClose();
+			subOpenTimer = setTimeout(() => {
+				subOpenTimer = void 0;
+				openSubmenu(key, depth);
+			}, SUB_OPEN_MS);
+		}
+		function scheduleCloseFrom(depth) {
+			clearSubOpen();
+			clearSubClose();
+			subCloseTimer = setTimeout(() => {
+				subCloseTimer = void 0;
+				setPath(submenuPath.value.slice(0, depth));
+			}, SUB_CLOSE_MS);
+		}
+		function armLayerLeave() {
+			clearSubClose();
+			subCloseTimer = setTimeout(() => {
+				subCloseTimer = void 0;
+				clearSubOpen();
+				setPath([]);
+			}, SUB_CLOSE_MS);
+		}
+		function onItemHover(layerId, depth, item) {
+			clearSubClose();
+			if (item.disabled || !hasContextMenuChildren(item)) {
+				scheduleCloseFrom(depth);
+				return;
+			}
+			scheduleOpen(item.key, depth);
+		}
+		function onSelect(item, depth) {
+			if (item.disabled || isContextMenuSeparator(item)) return;
+			if (hasContextMenuChildren(item)) {
+				openSubmenu(item.key, depth);
+				return;
+			}
+			emit("select", item.key);
+			if (shouldCloseContextMenuOnSelect(item, props.hideOnSelect)) {
+				restoreOnClose = true;
+				setOpen(false);
+			}
+		}
+		function prunePath() {
+			const next = [];
+			let current = props.items;
+			for (const key of submenuPath.value) {
+				const parent = current.find((item) => item.key === key && hasContextMenuChildren(item));
+				if (!parent?.children?.length) break;
+				next.push(key);
+				current = parent.children;
+			}
+			if (next.length !== submenuPath.value.length) setPath(next);
+		}
+		function attach() {
+			if (overlayBound || typeof document === "undefined") return;
+			overlayBound = true;
+			document.addEventListener("pointerdown", onDocPointerDown, true);
+			document.addEventListener("keydown", onDocKeydown, true);
+			document.addEventListener("contextmenu", onDocContextMenu);
+			window.addEventListener("resize", requestPlace);
+			window.addEventListener("scroll", onWindowScroll, true);
+		}
+		function detach() {
+			if (typeof document !== "undefined" && overlayBound) {
+				document.removeEventListener("pointerdown", onDocPointerDown, true);
+				document.removeEventListener("keydown", onDocKeydown, true);
+				document.removeEventListener("contextmenu", onDocContextMenu);
+				window.removeEventListener("resize", requestPlace);
+				window.removeEventListener("scroll", onWindowScroll, true);
+			}
+			overlayBound = false;
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			resizeObserver?.disconnect();
+			resizeObserver = void 0;
+		}
+		function clearSwallow() {
+			if (swallowStop && typeof document !== "undefined") document.removeEventListener("click", swallowStop, true);
+			swallowStop = void 0;
+		}
+		function armSwallow() {
+			if (typeof document === "undefined") return;
+			clearSwallow();
+			const stop = (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				clearSwallow();
+			};
+			swallowStop = stop;
+			document.addEventListener("click", stop, true);
+			window.setTimeout(() => {
+				if (swallowStop === stop) clearSwallow();
+			}, 400);
+		}
+		function onDocPointerDown(event) {
+			if (!open.value || event.button !== 0) return;
+			if (isInsideMenu(event.target)) return;
+			armSwallow();
+			restoreOnClose = false;
+			setOpen(false);
+		}
+		function onDocContextMenu(event) {
+			if (!open.value || ignoreContextClose) return;
+			if (isInsideMenu(event.target)) {
+				event.preventDefault();
+				return;
+			}
+			if (triggerEl.value && event.target instanceof Node && triggerEl.value.contains(event.target)) return;
+			restoreOnClose = false;
+			setOpen(false);
+		}
+		function onWindowScroll(event) {
+			if (!open.value) return;
+			const target = event.target;
+			if (target instanceof Node && isInsideMenu(target)) return;
+			restoreOnClose = false;
+			setOpen(false);
+		}
+		function closeTopLayer() {
+			if (!submenuPath.value.length) {
+				restoreOnClose = true;
+				setOpen(false);
+				return;
+			}
+			setPath(submenuPath.value.slice(0, -1));
+			nextTick(() => {
+				const parent = layers.value.at(-1);
+				if (parent) focusLayerItem(parent.id, highlightOf(parent.id));
+			});
+		}
+		function moveHighlight(layerId, key) {
+			setHighlight(layerId, key);
+			focusLayerItem(layerId, key);
+		}
+		function onTypeahead(layerId, items, key) {
+			typeaheadQuery += key.toLowerCase();
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadQuery = "";
+				typeaheadTimer = void 0;
+			}, 500);
+			const list = listContextMenuLayerItems(items);
+			const from = list.findIndex((item) => item.key === highlightOf(layerId));
+			const index = matchContextMenuTypeahead(items, typeaheadQuery, from);
+			const next = index >= 0 ? list[index]?.key : "";
+			if (next) moveHighlight(layerId, next);
+		}
+		function onLayerKey(event, layer) {
+			const keys = resolveContextMenuKeys(isRtl.value);
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				closeTopLayer();
+				return;
+			}
+			if (event.key === "Tab") {
+				restoreOnClose = false;
+				setOpen(false);
+				return;
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				const delta = event.key === "ArrowDown" ? 1 : -1;
+				moveHighlight(layer.id, stepContextMenuKey(layer.items, highlightOf(layer.id), delta));
+				return;
+			}
+			if (event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				event.stopPropagation();
+				const next = event.key === "Home" ? firstEnabledContextMenuKey(layer.items) : lastEnabledContextMenuKey(layer.items);
+				moveHighlight(layer.id, next);
+				return;
+			}
+			if (event.key === keys.openSub) {
+				const current = listContextMenuLayerItems(layer.items).find((item) => item.key === highlightOf(layer.id));
+				if (current && hasContextMenuChildren(current) && !current.disabled) {
+					event.preventDefault();
+					event.stopPropagation();
+					openSubmenu(current.key, layer.depth);
+				}
+				return;
+			}
+			if (event.key === keys.closeSub && layer.depth > 0) {
+				event.preventDefault();
+				event.stopPropagation();
+				setPath(submenuPath.value.slice(0, layer.depth - 1));
+				nextTick(() => {
+					const parent = layers.value[layer.depth - 1];
+					if (parent) focusLayerItem(parent.id, highlightOf(parent.id));
+				});
+				return;
+			}
+			if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+				event.preventDefault();
+				onTypeahead(layer.id, layer.items, event.key);
+			}
+		}
+		function onDocKeydown(event) {
+			if (!open.value || event.isComposing) return;
+			const target = event.target;
+			if (target instanceof HTMLElement && target.closest("input, textarea, select, [contenteditable=\"true\"]")) {
+				if (event.key !== "Escape") return;
+				event.preventDefault();
+				event.stopPropagation();
+				restoreOnClose = true;
+				setOpen(false);
+				return;
+			}
+			const layerId = layerIdFromTarget(target);
+			const layer = layers.value.find((item) => item.id === layerId) ?? layers.value.at(-1);
+			if (!layer) return;
+			onLayerKey(event, layer);
+		}
 		function onTriggerContextMenu(event) {
-			if (!hasActionableItems.value) {
+			if (props.disabled) return;
+			if (!hasActionableContextMenuItems(props.items)) {
 				event.preventDefault();
-				open.value = false;
+				setOpen(false);
+				return;
 			}
+			event.preventDefault();
+			ignoreContextClose = true;
+			queueMicrotask(() => {
+				ignoreContextClose = false;
+			});
+			setOpen(true, {
+				x: event.clientX,
+				y: event.clientY
+			});
 		}
-		function onSelect(item) {
-			emit("select", item.key);
+		function onTriggerKeydown(event) {
+			if (props.disabled || event.isComposing || open.value) return;
+			if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+				event.preventDefault();
+				setOpen(true);
+			}
+		}
+		function assignTrigger(value) {
+			triggerEl.value = resolveContextMenuElement(value);
+		}
+		function flattenNodes(nodes, out = []) {
+			if (nodes == null || typeof nodes === "boolean") return out;
+			if (Array.isArray(nodes)) {
+				for (const node of nodes) flattenNodes(node, out);
+				return out;
+			}
+			if (!isVNode(nodes)) return out;
+			if (nodes.type === Comment || nodes.type === Text) return out;
+			if (nodes.type === Fragment && Array.isArray(nodes.children)) {
+				flattenNodes(nodes.children, out);
+				return out;
+			}
+			out.push(nodes);
+			return out;
+		}
+		function callListeners(existing, event) {
+			if (typeof existing === "function") existing(event);
+			else if (Array.isArray(existing)) {
+				for (const fn of existing) if (typeof fn === "function") fn(event);
+			}
 		}
+		const TriggerHost = defineComponent({
+			name: "RsContextMenuTrigger",
+			setup() {
+				return () => {
+					const nodes = flattenNodes(slots.default?.());
+					const target = nodes[0];
+					if (!target) return null;
+					const cloned = cloneVNode(target, {
+						ref: assignTrigger,
+						"aria-haspopup": "menu",
+						"aria-expanded": open.value ? "true" : "false",
+						"aria-controls": open.value ? menuId.value : void 0,
+						onContextmenu: (event) => {
+							callListeners(target.props?.onContextmenu, event);
+							onTriggerContextMenu(event);
+						},
+						onKeydown: (event) => {
+							callListeners(target.props?.onKeydown, event);
+							onTriggerKeydown(event);
+						}
+					}, true);
+					return nodes.length === 1 ? cloned : [cloned, ...nodes.slice(1)];
+				};
+			}
+		});
+		__expose({
+			open: (point) => setOpen(true, point),
+			close: () => {
+				restoreOnClose = false;
+				setOpen(false);
+			}
+		});
+		watch(open, (isOpen) => {
+			const skip = !openWatchReady;
+			openWatchReady = true;
+			if (isOpen) {
+				if (props.disabled || !hasActionableContextMenuItems(props.items)) {
+					open.value = false;
+					return;
+				}
+				claimContextMenu(requestClose);
+				settled.value = {};
+				submenuPath.value = [];
+				subHighlights.value = {};
+				rootHighlight.value = firstEnabledContextMenuKey(props.items);
+				syncPanelChrome();
+				if (!pointLocked) anchor.value = pointFromTrigger();
+				attach();
+				if (typeof document !== "undefined") restoreTarget = document.activeElement instanceof HTMLElement ? document.activeElement : triggerEl.value;
+				settleLayers(() => focusLayerItem("root", rootHighlight.value), () => {
+					if (!pointLocked) anchor.value = pointFromTrigger();
+					syncPanelChrome();
+					observeLayers();
+				});
+				if (!skip) emit("openChange", true);
+				return;
+			}
+			detach();
+			releaseContextMenu(requestClose);
+			clearSubTimers();
+			clearTypeahead();
+			submenuPath.value = [];
+			settled.value = {};
+			boxes.value = {};
+			const shouldRestore = restoreOnClose;
+			restoreOnClose = false;
+			const back = restoreTarget;
+			restoreTarget = null;
+			pointLocked = false;
+			if (shouldRestore && back) focusWithoutScroll(back);
+			if (!skip) emit("openChange", false);
+		}, { immediate: true });
+		watch(() => props.items, (items) => {
+			if (!hasActionableContextMenuItems(items)) {
+				if (open.value) open.value = false;
+				return;
+			}
+			if (!open.value) return;
+			prunePath();
+			if (!listContextMenuLayerItems(items).some((item) => item.key === highlightOf("root") && !item.disabled)) {
+				const next = firstEnabledContextMenuKey(items);
+				rootHighlight.value = next;
+				itemLists.get("root")?.setHighlight(next);
+			}
+			requestPlace();
+		});
+		watch(() => props.disabled, (disabled) => {
+			if (disabled && open.value) open.value = false;
+		});
+		onUnmounted(() => {
+			detach();
+			releaseContextMenu(requestClose);
+			clearSubTimers();
+			clearTypeahead();
+			clearSwallow();
+			layerRefs.clear();
+			itemRefs.clear();
+			itemLists.clear();
+		});
 		return (_ctx, _cache) => {
-			return !__props.disabled ? (openBlock(), createBlock(unref(ContextMenuRoot), {
-				key: 0,
-				open: open.value,
-				"onUpdate:open": onUpdateOpen
-			}, {
-				default: withCtx(() => [createVNode(unref(ContextMenuTrigger), {
-					"as-child": "",
-					onContextmenu: withModifiers(onTriggerContextMenu, ["stop"])
+			return openBlock(), createElementBlock(Fragment, null, [!__props.disabled ? (openBlock(), createBlock(unref(TriggerHost), { key: 0 })) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1), showPanel.value ? (openBlock(), createBlock(Teleport, {
+				key: 2,
+				to: portalTarget.value
+			}, [withDirectives(createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(layers.value, (layer) => {
+				return openBlock(), createElementBlock("div", {
+					id: layer.id === "root" ? menuId.value : void 0,
+					key: layer.id,
+					ref_for: true,
+					ref: layerRefFor(layer.id),
+					class: normalizeClass(["rs-context-menu__content rs-native-scrollbar rs-motion-reduce", [
+						layer.id !== "root" && "rs-context-menu__sub-content",
+						__props.size && `rs-context-menu--${__props.size}`,
+						__props.popupClassName
+					]]),
+					role: "menu",
+					"aria-label": layer.id === "root" ? menuLabel.value : unref(t)("contextMenu.submenu"),
+					dir: panelDir.value,
+					lang: panelLang.value,
+					"data-rs-theme": panelTheme.value,
+					"data-placed": settled.value[layer.id] ? "" : void 0,
+					"data-origin-x": boxes.value[layer.id]?.originX,
+					"data-origin-y": boxes.value[layer.id]?.originY,
+					style: normalizeStyle(layerStyle(layer.id)),
+					tabindex: "-1",
+					onPointerenter: clearSubClose,
+					onPointerleave: armLayerLeave,
+					onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				}, [createVNode(RsContextMenuItems_default, {
+					ref_for: true,
+					ref: itemsRefFor(layer.id),
+					items: layer.items,
+					highlight: layerHighlight(layer.id),
+					"open-key": layer.openKey,
+					"menu-id": menuId.value,
+					"layer-id": layer.id,
+					"icon-size": iconSize.value,
+					onSelect: ($event) => onSelect($event, layer.depth),
+					onHover: ($event) => onItemHover(layer.id, layer.depth, $event)
 				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					item: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, slotProps), () => [createElementVNode("span", _hoisted_3, toDisplayString(slotProps.item.label), 1), slotProps.item.hint ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(slotProps.item.hint), 1)) : createCommentVNode("", true)])]),
 					_: 3
-				}), createVNode(unref(ContextMenuPortal), null, {
-					default: withCtx(() => [createVNode(unref(ContextMenuContent), {
-						class: "rs-context-menu__content rs-native-scrollbar rs-motion-reduce",
-						"side-offset": 4,
-						"collision-padding": 8
-					}, {
-						default: withCtx(() => [hasActionableItems.value ? (openBlock(), createBlock(RsContextMenuItems_default, {
-							key: 0,
-							items: __props.items,
-							onSelect
-						}, null, 8, ["items"])) : createCommentVNode("", true)]),
-						_: 1
-					})]),
-					_: 1
-				})]),
-				_: 3
-			}, 8, ["open"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1);
+				}, 8, [
+					"items",
+					"highlight",
+					"open-key",
+					"menu-id",
+					"layer-id",
+					"icon-size",
+					"onSelect",
+					"onHover"
+				])], 46, _hoisted_2);
+			}), 128))], 512), [[vShow, open.value]])], 8, ["to"])) : createCommentVNode("", true)], 64);
 		};
 	}
 });