niuma-ui 2.0.3 → 2.0.9

package/dist/components/menu/src/RsMenuItems.impl.js

@@ -1,44 +1,106 @@
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "../../_shared/src/reka.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { menuItemContainsKey } from "./menu-utils.js";
+import { placeSidePopup } from "../../_shared/src/overlay-utils.js";
+import { isMenuDivider, menuArrowKeys, menuItemContainsKey, mergeMenuLinkRel, resolveMenuItemHref, resolveMenuPortalTarget } from "./menu-utils.js";
 import RsMenuItems_default from "./RsMenuItems.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
 //#region src/components/menu/src/RsMenuItems.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
+	key: 0,
+	class: "rs-menu__divider"
+};
+var _hoisted_2 = ["onMouseenter", "onMouseleave"];
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-menu__collapsible"
+};
+var _hoisted_4 = [
+	"disabled",
+	"data-state",
+	"aria-expanded",
+	"aria-label",
+	"title",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_5 = {
 	key: 0,
 	class: "rs-menu__icon-slot",
 	"aria-hidden": "true"
 };
-var _hoisted_2 = {
+var _hoisted_6 = {
 	key: 1,
 	class: "rs-menu__label"
 };
-var _hoisted_3 = [
+var _hoisted_7 = {
+	key: 2,
+	class: "rs-menu__extra"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-menu__submenu"
+};
+var _hoisted_9 = [
 	"disabled",
+	"data-state",
 	"aria-label",
 	"aria-expanded",
+	"onClick",
 	"onMouseenter",
-	"onClick"
+	"onKeydown"
 ];
-var _hoisted_4 = { class: "rs-menu__flyout-title" };
-var _hoisted_5 = [
+var _hoisted_10 = [
+	"aria-label",
+	"data-rs-theme",
+	"onMouseenter"
+];
+var _hoisted_11 = { class: "rs-menu__flyout-title" };
+var _hoisted_12 = [
+	"href",
+	"target",
+	"rel",
+	"aria-current",
+	"aria-label",
+	"title",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_13 = {
+	key: 0,
+	class: "rs-menu__icon-slot",
+	"aria-hidden": "true"
+};
+var _hoisted_14 = {
+	key: 1,
+	class: "rs-menu__label"
+};
+var _hoisted_15 = {
+	key: 2,
+	class: "rs-menu__extra"
+};
+var _hoisted_16 = [
 	"disabled",
 	"aria-current",
 	"aria-label",
 	"title",
-	"onClick"
+	"onClick",
+	"onKeydown"
 ];
-var _hoisted_6 = {
+var _hoisted_17 = {
 	key: 0,
 	class: "rs-menu__icon-slot",
 	"aria-hidden": "true"
 };
-var _hoisted_7 = {
+var _hoisted_18 = {
 	key: 1,
 	class: "rs-menu__label"
 };
+var _hoisted_19 = {
+	key: 2,
+	class: "rs-menu__extra"
+};
 var RsMenuItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsMenuItems",
 	__name: "RsMenuItems",
 	props: {
 		items: {},
@@ -53,36 +115,75 @@ var RsMenuItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		highlightParent: {
 			type: Boolean,
 			default: false
-		}
+		},
+		triggerSubMenuAction: { default: "click" },
+		iconSize: { default: 16 },
+		getPopupContainer: {}
 	},
-	emits: ["select", "toggle-open"],
+	emits: [
+		"select",
+		"click",
+		"toggle-open"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
 		const isCollapsedVertical = computed(() => props.mode === "vertical" && props.collapsed);
 		const canExpandSubmenu = computed(() => !isCollapsedVertical.value);
+		const hoverExpand = computed(() => props.triggerSubMenuAction === "hover" && canExpandSubmenu.value);
 		/** 垂直折叠态：当前悬停展开的子菜单 key */
 		const flyoutKey = ref(null);
+		const flyoutTheme = ref();
+		const flyoutBox = ref({
+			top: 0,
+			left: 0,
+			width: 160,
+			placement: "right"
+		});
+		const flyoutEl = ref(null);
+		const triggerEls = /* @__PURE__ */ new Map();
 		let flyoutCloseTimer;
+		let hoverCloseTimer;
+		let placeFrame = 0;
+		let overlayBound = false;
+		let panelResize;
 		function isOpen(key) {
 			return props.openKeys.includes(key);
 		}
 		function isExactActive(key) {
 			return props.activeKey === key;
 		}
-		/** 开启 highlightParent 时：当前项是选中叶子的祖先（不含自身精确选中） */
 		function isParentActive(item) {
 			if (!props.highlightParent || !props.activeKey || !item.children?.length) return false;
 			if (item.key === props.activeKey) return false;
 			return menuItemContainsKey(item, props.activeKey);
 		}
-		/** 叶子精确选中，或开启 highlightParent 时祖先也视为高亮 */
 		function isActiveItem(item) {
 			return isExactActive(item.key) || isParentActive(item);
 		}
-		function selectLeaf(item) {
-			if (item.disabled) return;
+		function itemHref(item) {
+			return resolveMenuItemHref(item);
+		}
+		function itemRel(item) {
+			return mergeMenuLinkRel(item.rel, item.target);
+		}
+		function itemSlot(item) {
+			return {
+				item,
+				active: isExactActive(item.key),
+				parentActive: isParentActive(item),
+				open: isOpen(item.key) || flyoutKey.value === item.key,
+				collapsed: isCollapsedVertical.value,
+				depth: props.depth
+			};
+		}
+		function selectLeaf(item, event) {
+			emit("click", item, event);
+			if (item.disabled) {
+				event.preventDefault();
+				return;
+			}
 			emit("select", item.key);
 		}
 		function toggleOpen(key, open) {
@@ -95,22 +196,128 @@ var RsMenuItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				flyoutCloseTimer = void 0;
 			}
 		}
+		function clearHoverCloseTimer() {
+			if (hoverCloseTimer !== void 0) {
+				clearTimeout(hoverCloseTimer);
+				hoverCloseTimer = void 0;
+			}
+		}
+		function preferredFlyoutSide(el) {
+			if (!el) return "right";
+			return el.closest("[dir=\"rtl\"]") != null || el.closest("[data-rs-dir=\"rtl\"]") != null ? "left" : "right";
+		}
+		function syncFlyoutTheme(el) {
+			if (!el) {
+				flyoutTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			flyoutTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		function placeFlyout() {
+			if (typeof window === "undefined" || !flyoutKey.value) return;
+			const trigger = triggerEls.get(flyoutKey.value);
+			if (!trigger) return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = flyoutEl.value?.getBoundingClientRect();
+			flyoutBox.value = placeSidePopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: measured?.width || Math.min(256, window.innerWidth - 16),
+				height: measured?.height || 160
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, 8, preferredFlyoutSide(trigger));
+		}
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (placeFrame) return;
+			placeFrame = window.requestAnimationFrame(() => {
+				placeFrame = 0;
+				placeFlyout();
+			});
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if ((flyoutKey.value ? triggerEls.get(flyoutKey.value) : null)?.contains(target)) return;
+			if (flyoutEl.value?.contains(target)) return;
+			closeFlyout();
+		}
+		function onDocKeydown(event) {
+			if (event.key !== "Escape" || !flyoutKey.value) return;
+			event.preventDefault();
+			closeFlyout(true);
+		}
+		function onWindowChange() {
+			if (!flyoutKey.value) return;
+			requestPlace();
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			if (typeof document !== "undefined") {
+				document.addEventListener("pointerdown", onDocPointerDown);
+				document.addEventListener("keydown", onDocKeydown);
+			}
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			if (placeFrame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(placeFrame);
+				placeFrame = 0;
+			}
+			panelResize?.disconnect();
+			panelResize = void 0;
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") {
+				document.removeEventListener("pointerdown", onDocPointerDown);
+				document.removeEventListener("keydown", onDocKeydown);
+			}
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
 		function openFlyout(key) {
 			clearFlyoutCloseTimer();
 			flyoutKey.value = key;
+			syncFlyoutTheme(triggerEls.get(key) ?? null);
+			attachOverlay();
+			nextTick(() => {
+				if (flyoutEl.value && typeof ResizeObserver !== "undefined") {
+					panelResize?.disconnect();
+					panelResize = new ResizeObserver(() => requestPlace());
+					panelResize.observe(flyoutEl.value);
+				}
+				requestPlace();
+			});
+		}
+		function closeFlyout(restoreFocus = false) {
+			const key = flyoutKey.value;
+			clearFlyoutCloseTimer();
+			flyoutKey.value = null;
+			flyoutTheme.value = void 0;
+			detachOverlay();
+			if (restoreFocus && key) triggerEls.get(key)?.focus();
 		}
 		function scheduleCloseFlyout() {
 			clearFlyoutCloseTimer();
 			flyoutCloseTimer = setTimeout(() => {
 				flyoutKey.value = null;
+				flyoutTheme.value = void 0;
+				detachOverlay();
 				flyoutCloseTimer = void 0;
 			}, 120);
 		}
-		function closeFlyout() {
-			clearFlyoutCloseTimer();
-			flyoutKey.value = null;
-		}
-		function onFlyoutTriggerClick(item) {
+		function onFlyoutTriggerClick(item, event) {
+			emit("click", item, event);
 			if (item.disabled) return;
 			if (flyoutKey.value === item.key) {
 				closeFlyout();
@@ -118,162 +325,307 @@ var RsMenuItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			}
 			openFlyout(item.key);
 		}
-		function onFlyoutOpenChange(open) {
-			if (!open) closeFlyout();
-		}
 		function onFlyoutSelect(key) {
-			closeFlyout();
+			closeFlyout(true);
 			emit("select", key);
 		}
+		function onSubmenuTriggerClick(item, event) {
+			emit("click", item, event);
+			if (item.disabled) return;
+			toggleOpen(item.key, !isOpen(item.key));
+		}
+		function onEntryMouseEnter(item) {
+			if (item.disabled || !item.children?.length) return;
+			if (isCollapsedVertical.value) {
+				openFlyout(item.key);
+				return;
+			}
+			if (!hoverExpand.value) return;
+			clearHoverCloseTimer();
+			toggleOpen(item.key, true);
+		}
+		function onEntryMouseLeave(item) {
+			if (!item.children?.length) return;
+			if (isCollapsedVertical.value) {
+				scheduleCloseFlyout();
+				return;
+			}
+			if (!hoverExpand.value) return;
+			clearHoverCloseTimer();
+			hoverCloseTimer = setTimeout(() => {
+				toggleOpen(item.key, false);
+				hoverCloseTimer = void 0;
+			}, 120);
+		}
+		function setTriggerEl(key, el) {
+			if (el instanceof HTMLElement) triggerEls.set(key, el);
+			else triggerEls.delete(key);
+		}
+		function isRtlFromEl(el) {
+			if (!el) return false;
+			return el.closest("[dir=\"rtl\"]") != null || el.closest("[data-rs-dir=\"rtl\"]") != null;
+		}
+		function focusSibling(current, delta) {
+			const list = current.closest("ul.rs-menu__list");
+			if (!list) return;
+			const items = Array.from(list.querySelectorAll(":scope > li > .rs-menu__entry .rs-menu__item")).filter((el) => !el.hasAttribute("disabled") && el.getAttribute("aria-disabled") !== "true");
+			if (!items.length) return;
+			if (delta === "first") {
+				items[0]?.focus();
+				return;
+			}
+			if (delta === "last") {
+				items[items.length - 1]?.focus();
+				return;
+			}
+			const index = items.indexOf(current);
+			if (index < 0) return;
+			items[(index + delta + items.length) % items.length]?.focus();
+		}
+		function onItemKeydown(event, item) {
+			const current = event.currentTarget;
+			if (!(current instanceof HTMLElement)) return;
+			const rtl = isRtlFromEl(current);
+			const { next: nextKey, prev: prevKey, open: openKey } = menuArrowKeys(props.mode === "vertical" || props.depth > 0, rtl);
+			if (event.key === "Escape") {
+				if (flyoutKey.value) {
+					event.preventDefault();
+					closeFlyout(true);
+				}
+				return;
+			}
+			if (event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				focusSibling(current, event.key === "Home" ? "first" : "last");
+				return;
+			}
+			if (event.key === nextKey || event.key === prevKey) {
+				event.preventDefault();
+				focusSibling(current, event.key === nextKey ? 1 : -1);
+				return;
+			}
+			if (item.children?.length && event.key === openKey && !item.disabled) {
+				event.preventDefault();
+				if (isCollapsedVertical.value) openFlyout(item.key);
+				else toggleOpen(item.key, true);
+			}
+		}
+		const portalTarget = computed(() => resolveMenuPortalTarget(props.getPopupContainer));
+		const flyoutStyle = computed(() => ({
+			top: `${flyoutBox.value.top}px`,
+			left: `${flyoutBox.value.left}px`,
+			width: flyoutBox.value.width ? `${flyoutBox.value.width}px` : void 0
+		}));
+		watch(flyoutKey, (key) => {
+			if (!key) detachOverlay();
+		});
 		onBeforeUnmount(() => {
 			clearFlyoutCloseTimer();
+			clearHoverCloseTimer();
+			detachOverlay();
+			triggerEls.clear();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("ul", { class: normalizeClass(["rs-menu__list", { "rs-menu__list--nested": __props.depth > 0 }]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.key,
 					class: "rs-menu__node"
-				}, [createElementVNode("div", {
+				}, [unref(isMenuDivider)(item) ? (openBlock(), createElementBlock("hr", _hoisted_1)) : (openBlock(), createElementBlock("div", {
+					key: 1,
 					class: normalizeClass(["rs-menu__entry", {
 						"rs-menu__entry--submenu": !!item.children?.length,
 						"rs-menu__entry--active": isActiveItem(item),
 						"rs-menu__entry--disabled": item.disabled
 					}]),
-					style: normalizeStyle({ "--rs-menu-depth": __props.mode === "vertical" && !__props.collapsed ? __props.depth : 0 })
-				}, [item.children?.length && canExpandSubmenu.value ? (openBlock(), createBlock(unref(CollapsibleRoot), {
+					style: normalizeStyle({ "--rs-menu-depth": __props.mode === "vertical" && !__props.collapsed ? __props.depth : 0 }),
+					onMouseenter: ($event) => !isCollapsedVertical.value && onEntryMouseEnter(item),
+					onMouseleave: ($event) => !isCollapsedVertical.value && onEntryMouseLeave(item)
+				}, [item.children?.length && canExpandSubmenu.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("button", {
+					ref_for: true,
+					ref: (el) => setTriggerEl(item.key, el),
+					type: "button",
+					class: normalizeClass(["rs-menu__item rs-menu__item--submenu-trigger", {
+						"rs-menu__item--active": isExactActive(item.key),
+						"rs-menu__item--active-parent": isParentActive(item)
+					}]),
+					disabled: item.disabled,
+					"data-state": isOpen(item.key) ? "open" : "closed",
+					"aria-expanded": isOpen(item.key),
+					"aria-haspopup": true,
+					"aria-label": __props.collapsed ? item.label : void 0,
+					title: __props.collapsed ? item.label : void 0,
+					onClick: ($event) => onSubmenuTriggerClick(item, $event),
+					onKeydown: ($event) => onItemKeydown($event, item)
+				}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, itemSlot(item)), () => [
+					!__props.collapsed || item.icon ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, itemSlot(item)), () => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: item.icon,
+						size: __props.iconSize,
+						class: "rs-menu__icon"
+					}, null, 8, ["name", "size"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
+					!__props.collapsed ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.label), 1)) : createCommentVNode("", true),
+					!__props.collapsed && (item.extra || _ctx.$slots.extra) ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "extra", mergeProps({ ref_for: true }, itemSlot(item)), () => [createTextVNode(toDisplayString(item.extra), 1)])])) : createCommentVNode("", true),
+					!__props.collapsed ? (openBlock(), createBlock(RsIcon_default, {
+						key: 3,
+						name: "chevron-down",
+						size: Math.max(12, __props.iconSize - 2),
+						class: "rs-menu__submenu-arrow",
+						label: isOpen(item.key) ? unref(t)("menu.collapseSubmenu") : unref(t)("menu.expandSubmenu")
+					}, null, 8, ["size", "label"])) : createCommentVNode("", true)
+				])], 42, _hoisted_4), isOpen(item.key) ? (openBlock(), createElementBlock("div", _hoisted_8, [createVNode(RsMenuItems_default, {
+					items: item.children,
+					"active-key": __props.activeKey,
+					"open-keys": __props.openKeys,
+					collapsed: __props.collapsed,
+					mode: __props.mode,
+					depth: __props.depth + 1,
+					"highlight-parent": __props.highlightParent,
+					"trigger-sub-menu-action": __props.triggerSubMenuAction,
+					"icon-size": __props.iconSize,
+					"get-popup-container": __props.getPopupContainer,
+					onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event)),
+					onClick: _cache[1] || (_cache[1] = (child, event) => emit("click", child, event)),
+					onToggleOpen: _cache[2] || (_cache[2] = (key, open) => emit("toggle-open", key, open))
+				}, createSlots({ _: 2 }, [
+					_ctx.$slots.item ? {
+						name: "item",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, slotProps))]),
+						key: "0"
+					} : void 0,
+					_ctx.$slots.icon ? {
+						name: "icon",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, slotProps))]),
+						key: "1"
+					} : void 0,
+					_ctx.$slots.extra ? {
+						name: "extra",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "extra", mergeProps({ ref_for: true }, slotProps))]),
+						key: "2"
+					} : void 0
+				]), 1032, [
+					"items",
+					"active-key",
+					"open-keys",
+					"collapsed",
+					"mode",
+					"depth",
+					"highlight-parent",
+					"trigger-sub-menu-action",
+					"icon-size",
+					"get-popup-container"
+				])])) : createCommentVNode("", true)])) : item.children?.length && isCollapsedVertical.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+					ref_for: true,
+					ref: (el) => setTriggerEl(item.key, el),
+					type: "button",
+					class: normalizeClass(["rs-menu__item rs-menu__item--submenu-trigger", {
+						"rs-menu__item--active": isExactActive(item.key),
+						"rs-menu__item--active-parent": isParentActive(item)
+					}]),
+					disabled: item.disabled,
+					"data-state": flyoutKey.value === item.key ? "open" : "closed",
+					"aria-label": item.label,
+					"aria-expanded": flyoutKey.value === item.key,
+					"aria-haspopup": true,
+					onClick: ($event) => onFlyoutTriggerClick(item, $event),
+					onMouseenter: ($event) => !item.disabled && openFlyout(item.key),
+					onMouseleave: scheduleCloseFlyout,
+					onKeydown: ($event) => onItemKeydown($event, item)
+				}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, itemSlot(item)), () => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
 					key: 0,
-					open: isOpen(item.key),
-					class: "rs-menu__collapsible",
-					"onUpdate:open": (open) => toggleOpen(item.key, open)
-				}, {
-					default: withCtx(() => [createVNode(unref(CollapsibleTrigger), {
-						class: normalizeClass(["rs-menu__item rs-menu__item--submenu-trigger", {
-							"rs-menu__item--active": isExactActive(item.key),
-							"rs-menu__item--active-parent": isParentActive(item)
-						}]),
-						disabled: item.disabled,
-						"aria-label": __props.collapsed ? item.label : void 0,
-						title: __props.collapsed ? item.label : void 0
-					}, {
-						default: withCtx(() => [
-							!__props.collapsed || item.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [item.icon ? (openBlock(), createBlock(RsIcon_default, {
-								key: 0,
-								name: item.icon,
-								size: 16,
-								class: "rs-menu__icon"
-							}, null, 8, ["name"])) : createCommentVNode("", true)])) : createCommentVNode("", true),
-							!__props.collapsed ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(item.label), 1)) : createCommentVNode("", true),
-							!__props.collapsed ? (openBlock(), createBlock(RsIcon_default, {
-								key: 2,
-								name: "chevron-down",
-								size: 14,
-								class: "rs-menu__submenu-arrow",
-								label: isOpen(item.key) ? unref(t)("menu.collapseSubmenu") : unref(t)("menu.expandSubmenu")
-							}, null, 8, ["label"])) : createCommentVNode("", true)
-						]),
-						_: 2
-					}, 1032, [
-						"class",
-						"disabled",
-						"aria-label",
-						"title"
-					]), createVNode(unref(CollapsibleContent), { class: "rs-menu__submenu" }, {
-						default: withCtx(() => [createVNode(RsMenuItems_default, {
-							items: item.children,
-							"active-key": __props.activeKey,
-							"open-keys": __props.openKeys,
-							collapsed: __props.collapsed,
-							mode: __props.mode,
-							depth: __props.depth + 1,
-							"highlight-parent": __props.highlightParent,
-							onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event)),
-							onToggleOpen: _cache[1] || (_cache[1] = (key, open) => emit("toggle-open", key, open))
-						}, null, 8, [
-							"items",
-							"active-key",
-							"open-keys",
-							"collapsed",
-							"mode",
-							"depth",
-							"highlight-parent"
-						])]),
-						_: 2
-					}, 1024)]),
-					_: 2
-				}, 1032, ["open", "onUpdate:open"])) : item.children?.length && isCollapsedVertical.value ? (openBlock(), createBlock(unref(PopoverRoot), {
-					key: 1,
-					open: flyoutKey.value === item.key,
-					"onUpdate:open": onFlyoutOpenChange
-				}, {
-					default: withCtx(() => [createVNode(unref(PopoverTrigger), { "as-child": "" }, {
-						default: withCtx(() => [createElementVNode("button", {
-							type: "button",
-							class: normalizeClass(["rs-menu__item rs-menu__item--submenu-trigger", {
-								"rs-menu__item--active": isExactActive(item.key),
-								"rs-menu__item--active-parent": isParentActive(item)
-							}]),
-							disabled: item.disabled,
-							"aria-label": item.label,
-							"aria-expanded": flyoutKey.value === item.key,
-							"aria-haspopup": true,
-							onMouseenter: ($event) => !item.disabled && openFlyout(item.key),
-							onMouseleave: scheduleCloseFlyout,
-							onClick: ($event) => onFlyoutTriggerClick(item)
-						}, [item.icon ? (openBlock(), createBlock(RsIcon_default, {
-							key: 0,
-							name: item.icon,
-							size: 16,
-							class: "rs-menu__icon"
-						}, null, 8, ["name"])) : createCommentVNode("", true)], 42, _hoisted_3)]),
-						_: 2
-					}, 1024), flyoutKey.value === item.key ? (openBlock(), createBlock(unref(PopoverPortal), { key: 0 }, {
-						default: withCtx(() => [createVNode(unref(PopoverContent), {
-							class: "rs-menu__flyout",
-							side: "right",
-							align: "start",
-							"side-offset": 8,
-							"collision-padding": 8,
-							onMouseenter: ($event) => openFlyout(item.key),
-							onMouseleave: scheduleCloseFlyout,
-							onEscapeKeyDown: closeFlyout,
-							onPointerDownOutside: closeFlyout
-						}, {
-							default: withCtx(() => [createElementVNode("div", _hoisted_4, toDisplayString(item.label), 1), createVNode(RsMenuItems_default, {
-								items: item.children,
-								"active-key": __props.activeKey,
-								"open-keys": __props.openKeys,
-								collapsed: false,
-								mode: "vertical",
-								depth: 0,
-								"highlight-parent": __props.highlightParent,
-								onSelect: onFlyoutSelect,
-								onToggleOpen: _cache[2] || (_cache[2] = (key, open) => emit("toggle-open", key, open))
-							}, null, 8, [
-								"items",
-								"active-key",
-								"open-keys",
-								"highlight-parent"
-							])]),
-							_: 2
-						}, 1032, ["onMouseenter"])]),
-						_: 2
-					}, 1024)) : createCommentVNode("", true)]),
-					_: 2
-				}, 1032, ["open"])) : (openBlock(), createElementBlock("button", {
+					name: item.icon,
+					size: __props.iconSize,
+					class: "rs-menu__icon"
+				}, null, 8, ["name", "size"])) : createCommentVNode("", true)])], 42, _hoisted_9), flyoutKey.value === item.key ? (openBlock(), createBlock(Teleport, {
+					key: 0,
+					to: portalTarget.value
+				}, [createElementVNode("section", {
+					ref_for: true,
+					ref_key: "flyoutEl",
+					ref: flyoutEl,
+					class: "rs-menu__flyout",
+					"aria-label": item.label,
+					"data-rs-theme": flyoutTheme.value,
+					style: normalizeStyle(flyoutStyle.value),
+					onMouseenter: ($event) => openFlyout(item.key),
+					onMouseleave: scheduleCloseFlyout
+				}, [createElementVNode("div", _hoisted_11, toDisplayString(item.label), 1), createVNode(RsMenuItems_default, {
+					items: item.children,
+					"active-key": __props.activeKey,
+					"open-keys": __props.openKeys,
+					collapsed: false,
+					mode: "vertical",
+					depth: 0,
+					"highlight-parent": __props.highlightParent,
+					"trigger-sub-menu-action": __props.triggerSubMenuAction,
+					"icon-size": __props.iconSize,
+					"get-popup-container": __props.getPopupContainer,
+					onSelect: onFlyoutSelect,
+					onClick: _cache[3] || (_cache[3] = (child, event) => emit("click", child, event)),
+					onToggleOpen: _cache[4] || (_cache[4] = (key, open) => emit("toggle-open", key, open))
+				}, createSlots({ _: 2 }, [
+					_ctx.$slots.item ? {
+						name: "item",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, slotProps))]),
+						key: "0"
+					} : void 0,
+					_ctx.$slots.icon ? {
+						name: "icon",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, slotProps))]),
+						key: "1"
+					} : void 0,
+					_ctx.$slots.extra ? {
+						name: "extra",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "extra", mergeProps({ ref_for: true }, slotProps))]),
+						key: "2"
+					} : void 0
+				]), 1032, [
+					"items",
+					"active-key",
+					"open-keys",
+					"highlight-parent",
+					"trigger-sub-menu-action",
+					"icon-size",
+					"get-popup-container"
+				])], 44, _hoisted_10)], 8, ["to"])) : createCommentVNode("", true)], 64)) : itemHref(item) && !item.disabled ? (openBlock(), createElementBlock("a", {
 					key: 2,
+					href: itemHref(item),
+					target: item.target,
+					rel: itemRel(item),
+					class: normalizeClass(["rs-menu__item", { "rs-menu__item--active": isExactActive(item.key) }]),
+					"aria-current": isExactActive(item.key) ? "page" : void 0,
+					"aria-label": __props.collapsed ? item.label : void 0,
+					title: __props.collapsed ? item.label : void 0,
+					onClick: ($event) => selectLeaf(item, $event),
+					onKeydown: ($event) => onItemKeydown($event, item)
+				}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, itemSlot(item)), () => [
+					!__props.collapsed || item.icon ? (openBlock(), createElementBlock("span", _hoisted_13, [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, itemSlot(item)), () => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: item.icon,
+						size: __props.iconSize,
+						class: "rs-menu__icon"
+					}, null, 8, ["name", "size"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
+					!__props.collapsed ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(item.label), 1)) : createCommentVNode("", true),
+					!__props.collapsed && (item.extra || _ctx.$slots.extra) ? (openBlock(), createElementBlock("span", _hoisted_15, [renderSlot(_ctx.$slots, "extra", mergeProps({ ref_for: true }, itemSlot(item)), () => [createTextVNode(toDisplayString(item.extra), 1)])])) : createCommentVNode("", true)
+				])], 42, _hoisted_12)) : (openBlock(), createElementBlock("button", {
+					key: 3,
 					type: "button",
 					class: normalizeClass(["rs-menu__item", { "rs-menu__item--active": isExactActive(item.key) }]),
 					disabled: item.disabled,
 					"aria-current": isExactActive(item.key) ? "page" : void 0,
 					"aria-label": __props.collapsed ? item.label : void 0,
 					title: __props.collapsed ? item.label : void 0,
-					onClick: ($event) => selectLeaf(item)
-				}, [!__props.collapsed || item.icon ? (openBlock(), createElementBlock("span", _hoisted_6, [item.icon ? (openBlock(), createBlock(RsIcon_default, {
-					key: 0,
-					name: item.icon,
-					size: 16,
-					class: "rs-menu__icon"
-				}, null, 8, ["name"])) : createCommentVNode("", true)])) : createCommentVNode("", true), !__props.collapsed ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(item.label), 1)) : createCommentVNode("", true)], 10, _hoisted_5))], 6)]);
+					onClick: ($event) => selectLeaf(item, $event),
+					onKeydown: ($event) => onItemKeydown($event, item)
+				}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, itemSlot(item)), () => [
+					!__props.collapsed || item.icon ? (openBlock(), createElementBlock("span", _hoisted_17, [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, itemSlot(item)), () => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: item.icon,
+						size: __props.iconSize,
+						class: "rs-menu__icon"
+					}, null, 8, ["name", "size"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
+					!__props.collapsed ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(item.label), 1)) : createCommentVNode("", true),
+					!__props.collapsed && (item.extra || _ctx.$slots.extra) ? (openBlock(), createElementBlock("span", _hoisted_19, [renderSlot(_ctx.$slots, "extra", mergeProps({ ref_for: true }, itemSlot(item)), () => [createTextVNode(toDisplayString(item.extra), 1)])])) : createCommentVNode("", true)
+				])], 42, _hoisted_16))], 46, _hoisted_2))]);
 			}), 128))], 2);
 		};
 	}