ropav 0.1.7 → 0.1.8

package/dist/dropdown-menu.js

@@ -3,17 +3,16 @@ import { t as useControllableValue } from "./useControllableValue.js";
 import { t as useStylesApi } from "./styles-api.js";
 import { n as toPresenceAttribute, t as toOptionalAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
-import { t as isElement } from "./query.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as clamp } from "./number.js";
-import { a as snapshotAttributes, i as restoreAttributes } from "./attributes2.js";
+import { t as chevron_right_default } from "./chevron-right.js";
 import { t as resolveHTMLElementRef } from "./componentRef.js";
-import { n as isEventWithinElement, r as isEventWithinTargets, t as createCancelableCustomEvent } from "./events.js";
+import { r as isEventWithinTargets, t as createCancelableCustomEvent } from "./events.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
-import { n as useFloatingTarget, t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingTargetLifecycle } from "./useFloatingTargetLifecycle.js";
 import { n as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
 import { t as useTypeahead } from "./useTypeahead.js";
-import { t as chevron_right_default } from "./chevron-right.js";
 import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
 //#region src/utils/geometry.ts
 function getClientPoint(event) {
@@ -75,29 +74,25 @@ function createSelectEvent(originalEvent, value) {
 	}, originalEvent);
 }
 function createMenuContext(options) {
-	const id = options.parentSub?.menuId ?? options.root.interaction.rootMenuId;
-	const interaction = options.root.interaction;
-	const activeId = interaction.getActiveId(id);
-	const cleanupMenu = interaction.registerMenu({
-		id,
-		parentItemId: () => options.parentSub?.trigger.value?.id,
+	const id = options.parentSub?.menuId ?? options.root.interactionRootMenuId;
+	const interaction = options.parentSub ? options.parentSub.interaction.connectContent({
+		element: () => options.element.value,
+		placement: () => options.actualPlacement.value,
+		stopKeyPropagation: true,
+		onEscape: options.onEscape
+	}) : options.root.interaction.connectRootMenu({
 		element: () => options.element.value,
 		placement: () => options.actualPlacement.value,
-		isOpen: () => options.parentSub?.isOpen.value ?? options.root.isOpen.value,
-		setOpen: options.parentSub?.setOpen,
 		stopKeyPropagation: true,
 		onEscape: options.onEscape
 	});
-	function registerItem(item) {
-		interaction.registerItem({
-			get id() {
-				return item.id;
-			},
-			menuId: id,
+	function connectItem(item) {
+		return interaction.connectItem({
+			id: item.id,
 			element: item.element,
 			textValue: item.textValue,
 			disabled: item.disabled,
-			submenuId: () => item.submenu?.menuId,
+			submenu: item.submenu?.interaction,
 			submenuDirection: () => item.submenu?.actualPlacement.value.startsWith("left") ? "left" : "right",
 			select: item.activate,
 			closeOnSelect: item.closeOnSelect
@@ -107,23 +102,12 @@ function createMenuContext(options) {
 		root: options.root,
 		id,
 		element: options.element,
-		activeId,
 		actualPlacement: options.actualPlacement,
 		parentSub: options.parentSub,
-		registerItem,
-		unregisterItem: interaction.unregisterItem,
-		closeSubmenus: (except) => interaction.closeSubmenus(id, except?.menuId),
-		setActive: (itemId) => {
-			interaction.setActive(itemId);
-		},
-		isActive: interaction.isActive,
-		focus: (target = "first") => interaction.focusMenu(id, target),
-		focusElement: () => interaction.focusMenuElement(id),
-		activate: interaction.activateItem,
-		hover: interaction.hoverItem,
-		onKeydown: (event) => interaction.onMenuKeydown(id, event)
+		interaction,
+		connectItem
 	};
-	onBeforeUnmount(cleanupMenu);
+	onBeforeUnmount(interaction.dispose);
 	return context;
 }
 function usePrimitiveItem(componentName, props, emitSelect, options) {
@@ -132,7 +116,6 @@ function usePrimitiveItem(componentName, props, emitSelect, options) {
 	const id = computed(() => props.id ?? `${generatedId}-item`);
 	const element = ref(null);
 	const isDisabled = computed(() => Boolean(menu.root.disabled.value || props.disabled));
-	const focused = computed(() => menu.isActive(id.value));
 	function emitSelection(originalEvent) {
 		if (isDisabled.value) return void 0;
 		const selectEvent = createSelectEvent(originalEvent, props.value);
@@ -150,30 +133,32 @@ function usePrimitiveItem(componentName, props, emitSelect, options) {
 		activate: emitSelection,
 		closeOnSelect: () => props.closeOnSelect ?? options.defaultCloseOnSelect
 	};
-	menu.registerItem(registration);
-	watch(id, (nextId, previousId) => {
-		const wasActive = menu.activeId.value === previousId;
-		menu.unregisterItem(previousId);
-		menu.registerItem(registration);
-		if (wasActive) menu.setActive(nextId);
+	let itemInteraction = menu.connectItem(registration);
+	const focused = computed(() => {
+		return id.value === registration.id && itemInteraction.active.value;
+	});
+	watch(id, () => {
+		const previous = itemInteraction;
+		const wasActive = previous.active.value;
+		itemInteraction = menu.connectItem(registration);
+		previous.dispose();
+		if (wasActive) itemInteraction.setActive();
 	}, { flush: "sync" });
-	watch(isDisabled, () => menu.root.interaction.reconcile(menu.id));
-	onBeforeUnmount(() => menu.unregisterItem(id.value));
+	onBeforeUnmount(() => itemInteraction.dispose());
 	function setElement(value) {
 		resolveHTMLElementRef(value, id.value, (resolved) => {
 			element.value = resolved;
-			menu.root.interaction.reconcile(menu.id);
 		});
 	}
 	function activate(originalEvent) {
-		menu.activate(id.value, originalEvent);
+		itemInteraction.activate(originalEvent);
 	}
 	function onPointerenter() {
 		if (isDisabled.value) return;
-		menu.hover(id.value);
+		itemInteraction.hover();
 	}
 	function select() {
-		menu.activate(id.value, new Event("select"));
+		itemInteraction.activate(new Event("select"));
 	}
 	return {
 		menu,
@@ -304,7 +289,7 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 			return !customEvent.defaultPrevented;
 		}
 	});
-	const cleanupDismissal = submenu ? void 0 : root.interaction.registerDismissal({
+	const cleanupDismissal = submenu ? void 0 : root.interaction.connectDismissal({
 		ignoredTargets: () => props.ignore ?? [],
 		pointerDownOutside: events.pointerDownOutside,
 		focusOutside: events.focusOutside,
@@ -329,29 +314,24 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 	}, { immediate: true });
 	const shouldRender = computed(() => props.forceMount === true || isOpen.value);
 	let layerBranchCleanup;
+	let disconnectInside;
 	provide(menuKey, menu);
 	if (sub) sub.menu = menu;
 	function setElement(value) {
 		resolveHTMLElementRef(value, id.value, (resolved) => {
-			const previous = element.value;
-			if (previous) root.unregisterInside(previous);
+			disconnectInside?.();
+			disconnectInside = void 0;
 			layerBranchCleanup?.();
 			layerBranchCleanup = void 0;
 			element.value = resolved;
-			if (resolved) root.registerInside(resolved);
+			if (resolved) disconnectInside = root.connectInside(resolved);
 			if (!sub) root.layer.element.value = resolved;
 			else if (resolved) layerBranchCleanup = root.layer.registerBranch(resolved);
 		});
 	}
 	watch(isOpen, (open) => {
-		if (!open) {
-			if (sub) root.interaction.closeMenu(menu.id, false);
-			return;
-		}
-		nextTick(() => {
-			const focus = sub ? sub.pendingFocus.value : root.pendingFocus.value;
-			menu.focus(focus || "first");
-		});
+		if (!open) return;
+		nextTick(menu.interaction.focusPending);
 	}, {
 		flush: "post",
 		immediate: true
@@ -359,12 +339,12 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 	onMounted(() => {
 		if (sub) sub.contentId.value = id.value;
 		else root.contentId.value = id.value;
-		if (isOpen.value) menu.focus((sub ? sub.pendingFocus.value : root.pendingFocus.value) || "first");
+		if (isOpen.value) menu.interaction.focusPending();
 	});
 	onBeforeUnmount(() => {
 		cleanupDismissal?.();
+		disconnectInside?.();
 		layerBranchCleanup?.();
-		if (element.value) root.unregisterInside(element.value);
 		if (!sub && root.layer.element.value === element.value) root.layer.element.value = null;
 		if (sub) sub.menu = null;
 		else if (root.contentId.value === id.value) root.contentId.value = void 0;
@@ -391,12 +371,12 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		"aria-label": props.ariaLabel,
 		"aria-labelledby": props.ariaLabelledby ?? (submenu ? void 0 : root.triggerId.value),
 		"aria-describedby": props.ariaDescribedby,
-		"aria-activedescendant": menu.activeId.value ?? void 0,
+		"aria-activedescendant": menu.interaction.activeId.value ?? void 0,
 		"data-state": isOpen.value ? "open" : "closed",
 		"data-placement": floating.actualPlacement.value,
 		"data-side": placementSide.value,
 		"data-align": placementAlign.value,
-		onKeydown: menu.onKeydown
+		onKeydown: menu.interaction.onKeydown
 	}));
 	function close() {
 		if (sub) sub.close(true);
@@ -507,12 +487,13 @@ function useDropdownMenuContextTrigger(props) {
 	let startPoint;
 	let longPressOpened = false;
 	let suppressUntil = 0;
+	let disconnectInside;
 	function setElement(value) {
 		resolveHTMLElementRef(value, id.value, (resolved) => {
-			const previous = element.value;
-			if (previous) root.unregisterInside(previous);
+			disconnectInside?.();
+			disconnectInside = void 0;
 			element.value = resolved;
-			if (resolved) root.registerInside(resolved);
+			if (resolved) disconnectInside = root.connectInside(resolved);
 			if (!root.triggerId.value) root.triggerId.value = id.value;
 		});
 	}
@@ -595,7 +576,7 @@ function useDropdownMenuContextTrigger(props) {
 	}));
 	onBeforeUnmount(() => {
 		clearLongPress();
-		if (element.value) root.unregisterInside(element.value);
+		disconnectInside?.();
 		if (root.triggerId.value === id.value) root.triggerId.value = void 0;
 	});
 	return {
@@ -1216,28 +1197,26 @@ function createDropdownMenuInteractionRegistry(host, navigation) {
 function createOutsideEvent(originalEvent) {
 	return createCancelableCustomEvent("dropdown-menu-interact-outside", { originalEvent }, originalEvent);
 }
-function blockDocumentClick(event) {
-	if (event.cancelable) event.preventDefault();
-	event.stopPropagation();
-	document.removeEventListener("click", blockDocumentClick, true);
-}
-function blockNextDocumentClick() {
-	if (typeof document === "undefined") return;
+function blockNextDocumentClick(document) {
+	function blockDocumentClick(event) {
+		if (event.cancelable) event.preventDefault();
+		event.stopPropagation();
+		document.removeEventListener("click", blockDocumentClick, true);
+	}
 	document.addEventListener("click", blockDocumentClick, true);
-	window.setTimeout(() => document.removeEventListener("click", blockDocumentClick, true), 1e3);
+	document.defaultView?.setTimeout(() => document.removeEventListener("click", blockDocumentClick, true), 1e3);
 }
 function useDropdownMenuInteractionDismissal({ host, registry, closeRoot }) {
 	const inside = /* @__PURE__ */ new Set();
 	let dismissal;
-	let isListening = false;
+	let layerInteraction;
 	function registerInside(element) {
 		inside.add(element);
+		layerInteraction?.refresh();
 	}
 	function unregisterInside(element) {
 		inside.delete(element);
-	}
-	function isInside(event) {
-		return [...inside].some((element) => isEventWithinElement(event, element));
+		layerInteraction?.refresh();
 	}
 	function emitOutside(type, originalEvent) {
 		const outsideEvent = createOutsideEvent(originalEvent);
@@ -1250,43 +1229,40 @@ function useDropdownMenuInteractionDismissal({ host, registry, closeRoot }) {
 		if (!host.modal.value) return;
 		if (event.cancelable) event.preventDefault();
 		event.stopPropagation();
-		if (event.type === "pointerdown") blockNextDocumentClick();
+		const listenerDocument = event.currentTarget;
+		if (event.type === "pointerdown" && listenerDocument?.nodeType === 9) blockNextDocumentClick(listenerDocument);
 	}
 	function shouldIgnoreOutside(event) {
-		const ignoredTargets = (dismissal?.ignoredTargets() ?? []).map((target) => isRef(target) ? target.value : target);
-		return isInside(event) || isEventWithinTargets(event, ignoredTargets);
+		return isEventWithinTargets(event, (dismissal?.ignoredTargets() ?? []).map((target) => isRef(target) ? target.value : target));
 	}
 	function onDocumentPointer(event) {
-		if (!host.isTopLayer() || shouldIgnoreOutside(event)) return;
+		if (shouldIgnoreOutside(event)) return;
 		const outsideEvent = emitOutside("pointer", event);
 		blockModalInteraction(event);
 		if (!outsideEvent.defaultPrevented) closeRoot({ focusTrigger: host.modal.value });
 	}
 	function onDocumentFocus(event) {
-		if (!host.isTopLayer() || shouldIgnoreOutside(event)) return;
+		if (shouldIgnoreOutside(event)) return;
 		const outsideEvent = emitOutside("focus", event);
 		blockModalInteraction(event);
 		if (!outsideEvent.defaultPrevented) closeRoot({ focusTrigger: host.modal.value });
 		else if (host.modal.value) registry.focusMenuElement(registry.activeMenuId.value);
 	}
-	function setDocumentListeners(active) {
-		if (typeof document === "undefined" || active === isListening) return;
-		isListening = active;
-		const method = active ? "addEventListener" : "removeEventListener";
-		document[method]("pointerdown", onDocumentPointer, true);
-		document[method]("focusin", onDocumentFocus, true);
-	}
 	function registerDismissal(registration) {
+		layerInteraction?.();
 		dismissal = registration;
-		setDocumentListeners(host.isOpen.value);
+		layerInteraction = host.connectLayerInteraction({
+			inside: () => [...inside],
+			pointerDownOutside: onDocumentPointer,
+			focusOutside: onDocumentFocus
+		});
 		return () => {
 			if (dismissal !== registration) return;
 			dismissal = void 0;
-			setDocumentListeners(false);
+			layerInteraction?.();
+			layerInteraction = void 0;
 		};
 	}
-	watch(host.isOpen, (open) => setDocumentListeners(open && Boolean(dismissal)));
-	onBeforeUnmount(() => setDocumentListeners(false));
 	return {
 		registerInside,
 		unregisterInside,
@@ -1433,6 +1409,22 @@ function resolveOpenFocusTarget(options) {
 	if (typeof options === "string") return options;
 	return options?.focus ?? "first";
 }
+function resolveKeyboardMenuId(rootMenuId, registry, event) {
+	const activeItemId = registry.activeItemId.value;
+	const activeItem = activeItemId ? registry.getItem(activeItemId) : void 0;
+	const openSubmenuId = activeItem?.submenuId?.();
+	if (openSubmenuId && registry.isMenuOpen(openSubmenuId)) {
+		if (event.key === "Escape") return openSubmenuId;
+		const opensLeft = activeItem?.submenuDirection?.() === "left" || registry.getMenu(openSubmenuId)?.placement().startsWith("left");
+		if (event.key === (opensLeft ? "ArrowRight" : "ArrowLeft")) return openSubmenuId;
+	}
+	if ([
+		"ArrowLeft",
+		"ArrowRight",
+		"Escape"
+	].includes(event.key) && registry.activeMenuId.value !== rootMenuId) return registry.activeMenuId.value;
+	return activeItem?.menuId ?? registry.activeMenuId.value;
+}
 function useDropdownMenuInteraction(host) {
 	let navigation;
 	const registry = createDropdownMenuInteractionRegistry(host, {
@@ -1485,6 +1477,129 @@ function useDropdownMenuInteraction(host) {
 		registry,
 		closeRoot: close
 	});
+	function connectItem(menuId, options) {
+		const registration = {
+			id: options.id,
+			menuId,
+			element: options.element,
+			textValue: options.textValue,
+			disabled: options.disabled,
+			order: options.order,
+			submenuId: options.submenu ? () => options.submenu?.id : void 0,
+			submenuDirection: options.submenuDirection,
+			select: options.select,
+			closeOnSelect: options.closeOnSelect
+		};
+		const disconnect = registry.registerItem(registration);
+		const stopReconciliation = watch([
+			options.disabled,
+			options.element,
+			() => options.submenu?.id
+		], () => navigation.reconcile(menuId), { flush: "sync" });
+		let disposed = false;
+		return {
+			active: computed(() => registry.isActive(options.id)),
+			submenuOpen: computed(() => options.submenu ? registry.isMenuOpen(options.submenu.id) : false),
+			setActive: (focusElement = false) => registry.setActive(options.id, focusElement),
+			openSubmenu: (focus = "first") => options.submenu?.open(focus) ?? false,
+			closeSubmenu: (focusParent = false) => options.submenu?.close(focusParent) ?? false,
+			select: (originalEvent) => navigation.selectItem(options.id, originalEvent),
+			activate: (originalEvent) => navigation.activateItem(options.id, originalEvent),
+			hover(openSubmenu = false) {
+				navigation.hoverItem(options.id, openSubmenu);
+				return Boolean(options.submenu && registry.isMenuOpen(options.submenu.id));
+			},
+			dispose() {
+				if (disposed) return;
+				disposed = true;
+				stopReconciliation();
+				disconnect();
+			}
+		};
+	}
+	function connectMenu(id, options, state, getRequestedFocus) {
+		const disconnect = registry.registerMenu({
+			id,
+			...options,
+			...state
+		});
+		const items = /* @__PURE__ */ new Set();
+		let disposed = false;
+		return {
+			activeId: registry.getActiveId(id),
+			connectItem(itemOptions) {
+				const item = connectItem(id, itemOptions);
+				const dispose = item.dispose;
+				item.dispose = () => {
+					dispose();
+					items.delete(item);
+				};
+				items.add(item);
+				return item;
+			},
+			clearActive: () => {
+				registry.setActive(null);
+			},
+			focusPending() {
+				const pending = id === host.rootMenuId ? registry.pendingRootFocus.value : getRequestedFocus?.() ?? registry.state.getPendingMenuFocus(id);
+				return navigation.focusMenu(id, pending || "first");
+			},
+			onKeydown: (event) => keyboard.onMenuKeydown(id, event),
+			dispose() {
+				if (disposed) return;
+				disposed = true;
+				for (const item of items) item.dispose();
+				disconnect();
+			}
+		};
+	}
+	function connectRootMenu(options) {
+		return connectMenu(host.rootMenuId, options, { isOpen: () => host.isOpen.value });
+	}
+	function connectSubmenu(options) {
+		const disconnectState = registry.registerMenuState(options);
+		let requestedFocus;
+		const stopStateSync = watch(options.isOpen, (isOpen) => {
+			if (isOpen) return;
+			requestedFocus = void 0;
+			navigation.closeMenu(options.id, false);
+		}, { flush: "sync" });
+		let content;
+		let disposed = false;
+		return {
+			id: options.id,
+			open(focus = "first") {
+				requestedFocus = focus;
+				return navigation.openMenu(options.id, focus);
+			},
+			close(focusParent = false) {
+				requestedFocus = void 0;
+				return navigation.closeMenu(options.id, focusParent);
+			},
+			connectContent(menuOptions) {
+				const previous = content;
+				content = connectMenu(options.id, menuOptions, options, () => requestedFocus);
+				previous?.dispose();
+				return content;
+			},
+			dispose() {
+				if (disposed) return;
+				disposed = true;
+				content?.dispose();
+				stopStateSync();
+				disconnectState();
+			}
+		};
+	}
+	function connectInside(element) {
+		dismissal.registerInside(element);
+		let connected = true;
+		return () => {
+			if (!connected) return;
+			connected = false;
+			dismissal.unregisterInside(element);
+		};
+	}
 	watch(host.disabled, (disabled) => {
 		if (disabled) close();
 	});
@@ -1501,39 +1616,17 @@ function useDropdownMenuInteraction(host) {
 		navigation.focusMenu(host.rootMenuId, focus);
 	}, { immediate: true });
 	return {
-		rootMenuId: host.rootMenuId,
 		activeItemId: registry.activeItemId,
-		activeMenuId: registry.activeMenuId,
-		pendingRootFocus: registry.pendingRootFocus,
-		registerMenu: registry.registerMenu,
-		unregisterMenu: registry.unregisterMenu,
-		registerMenuState: registry.registerMenuState,
-		registerItem: registry.registerItem,
-		unregisterItem: registry.unregisterItem,
-		registerInside: dismissal.registerInside,
-		unregisterInside: dismissal.unregisterInside,
-		registerDismissal: dismissal.registerDismissal,
-		getActiveId: registry.getActiveId,
-		getItem: registry.getItem,
-		getMenu: registry.getMenu,
-		isActive: registry.isActive,
-		isMenuOpen: registry.isMenuOpen,
-		setActive: registry.setActive,
-		focusMenu: navigation.focusMenu,
-		focusMenuElement: registry.focusMenuElement,
+		connectRootMenu,
+		connectSubmenu,
+		connectInside,
+		connectDismissal: dismissal.registerDismissal,
 		open,
 		close,
 		toggle,
-		openMenu: navigation.openMenu,
-		closeMenu: navigation.closeMenu,
-		closeSubmenus: navigation.closeSubmenus,
-		selectItem: navigation.selectItem,
-		activateItem: navigation.activateItem,
-		hoverItem: navigation.hoverItem,
-		reconcile: navigation.reconcile,
 		onTriggerClick,
 		onTriggerKeydown: keyboard.onTriggerKeydown,
-		onMenuKeydown: keyboard.onMenuKeydown
+		onMenuKeydown: (event) => keyboard.onMenuKeydown(resolveKeyboardMenuId(host.rootMenuId, registry, event), event)
 	};
 }
 //#endregion
@@ -1581,7 +1674,10 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		const triggerId = ref();
 		const contentId = ref();
 		const activeReference = shallowRef(null);
-		const { reference: configuredReference } = useFloatingTarget(() => props.target ?? props.virtualAnchor, trigger);
+		const { reference: configuredReference } = useFloatingTargetLifecycle({
+			target: () => props.target ?? props.virtualAnchor,
+			fallback: trigger
+		});
 		const reference = computed(() => activeReference.value ?? configuredReference.value);
 		const contentElement = ref(null);
 		let returnFocusElement = null;
@@ -1608,26 +1704,29 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			const target = returnFocusElement ?? trigger.value;
 			nextTick(() => target?.focus());
 		}
+		const interactionRootMenuId = `${generatedId}-interaction-root`;
 		const interaction = useDropdownMenuInteraction({
-			rootMenuId: `${generatedId}-interaction-root`,
+			rootMenuId: interactionRootMenuId,
 			isOpen,
 			disabled,
 			modal,
 			setOpen,
-			isTopLayer: layer.isTopLayer,
+			connectLayerInteraction: layer.connectInteraction,
 			focusTrigger: focusReturnTarget,
 			beforeOpen: rememberFocus
 		});
-		const { pendingRootFocus: pendingFocus, open, close, toggle } = interaction;
+		const { open, close, toggle } = interaction;
 		function openAt(point, options) {
 			activeReference.value = createVirtualAnchor(point);
 			open(options);
 		}
+		let disconnectTrigger;
 		function setTrigger(element, nextId) {
-			if (trigger.value && trigger.value !== element) interaction.unregisterInside(trigger.value);
+			disconnectTrigger?.();
+			disconnectTrigger = void 0;
 			trigger.value = element;
 			triggerId.value = nextId;
-			if (element) interaction.registerInside(element);
+			if (element) disconnectTrigger = interaction.connectInside(element);
 		}
 		const context = {
 			id,
@@ -1638,7 +1737,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			triggerId,
 			contentId,
 			reference,
-			pendingFocus,
+			interactionRootMenuId,
 			layer,
 			interaction,
 			open,
@@ -1652,12 +1751,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			setReturnFocus(element) {
 				returnFocusElement = element;
 			},
-			registerInside(element) {
-				interaction.registerInside(element);
-			},
-			unregisterInside(element) {
-				interaction.unregisterInside(element);
-			}
+			connectInside: interaction.connectInside
 		};
 		const slotProps = computed(() => ({
 			isOpen: isOpen.value,
@@ -1670,6 +1764,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			if (!value) activeReference.value = null;
 		}, { flush: "sync" });
 		provide(rootKey, context);
+		onBeforeUnmount(() => disconnectTrigger?.());
 		__expose({
 			open,
 			close,
@@ -1734,12 +1829,12 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		const trigger = ref(null);
 		const contentId = ref();
 		const actualPlacement = ref("right-start");
-		const pendingFocus = ref(false);
 		function setOpen(value) {
 			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
-		const cleanupMenuState = parentMenu.root.interaction.registerMenuState({
+		const interaction = parentMenu.root.interaction.connectSubmenu({
 			id: menuId,
+			parentItemId: () => trigger.value?.id,
 			isOpen: () => isOpen.value,
 			setOpen
 		});
@@ -1749,20 +1844,17 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 			trigger,
 			contentId,
 			actualPlacement,
-			pendingFocus,
 			menu: null,
-			setOpen,
+			interaction,
 			open(focus = "first") {
-				pendingFocus.value = focus;
-				if (!parentMenu.root.interaction.openMenu(menuId, focus)) setOpen(true);
+				if (!interaction.open(focus)) setOpen(true);
 			},
 			close(focusParent = false) {
-				pendingFocus.value = false;
-				if (!parentMenu.root.interaction.closeMenu(menuId, focusParent)) setOpen(false);
+				if (!interaction.close(focusParent)) setOpen(false);
 			}
 		};
 		provide(subKey, context);
-		onBeforeUnmount(cleanupMenuState);
+		onBeforeUnmount(interaction.dispose);
 		return createSlot("default", {
 			isOpen: () => unref(isOpen),
 			open: () => context.open,
@@ -1852,7 +1944,6 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		const generatedId = useId();
 		const id = computed(() => props.id ?? `${generatedId}-sub-trigger`);
 		const isDisabled = computed(() => menu.root.disabled.value || props.disabled);
-		const focused = computed(() => menu.isActive(id.value));
 		const registration = {
 			get id() {
 				return id.value;
@@ -1863,15 +1954,18 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 			activate: () => void 0,
 			submenu: sub
 		};
-		menu.registerItem(registration);
-		watch(id, (nextId, previousId) => {
-			const wasActive = menu.activeId.value === previousId;
-			menu.unregisterItem(previousId);
-			menu.registerItem(registration);
-			if (wasActive) menu.setActive(nextId);
+		let itemInteraction = menu.connectItem(registration);
+		const focused = computed(() => {
+			return id.value === registration.id && itemInteraction.active.value;
+		});
+		watch(id, () => {
+			const previous = itemInteraction;
+			const wasActive = previous.active.value;
+			itemInteraction = menu.connectItem(registration);
+			previous.dispose();
+			if (wasActive) itemInteraction.setActive();
 		}, { flush: "sync" });
-		watch(isDisabled, () => menu.root.interaction.reconcile(menu.id));
-		onBeforeUnmount(() => menu.unregisterItem(id.value));
+		onBeforeUnmount(() => itemInteraction.dispose());
 		function setElement(value) {
 			resolveHTMLElementRef(value, id.value, (resolved) => {
 				sub.trigger.value = resolved;
@@ -1879,10 +1973,10 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		}
 		function onMouseenter() {
 			if (isDisabled.value) return;
-			menu.hover(id.value, true);
+			itemInteraction.hover(true);
 		}
 		function onClick(event) {
-			if (!event.defaultPrevented && !isDisabled.value) menu.activate(id.value, event);
+			if (!event.defaultPrevented && !isDisabled.value) itemInteraction.activate(event);
 		}
 		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
@@ -2204,12 +2298,13 @@ function getDropdownMenuDataCollectionState(items) {
 function getCurrentPath(index, entry) {
 	return index.pathByItemId.get(entry.itemId) ?? entry.path;
 }
-function useDropdownMenuDataRegistration({ props, items, rootMenuId, interaction, menuRef, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, onSelect }) {
+function useDropdownMenuDataRegistration({ props, items, rootMenuId, interaction, rootMenu, menuRef, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, onSelect }) {
 	const openMenuIds = ref(/* @__PURE__ */ new Set());
 	const itemIdentity = /* @__PURE__ */ new WeakMap();
 	let nextItemIdentity = 0;
-	let registeredItemIds = /* @__PURE__ */ new Set();
-	let registeredMenuIds = /* @__PURE__ */ new Set();
+	let itemInteractions = /* @__PURE__ */ new Map();
+	let menuInteractions = /* @__PURE__ */ new Map([[rootMenuId, rootMenu]]);
+	let submenuInteractions = /* @__PURE__ */ new Map();
 	function getStableItemId(item) {
 		const existing = itemIdentity.get(item);
 		if (existing) return existing;
@@ -2226,19 +2321,24 @@ function useDropdownMenuDataRegistration({ props, items, rootMenuId, interaction
 		else next.delete(id);
 		openMenuIds.value = next;
 	}
-	function createMenuRegistration(index, entry) {
+	function connectSubmenu(index, entry) {
 		const submenuMenuId = entry.submenuMenuId;
 		if (!submenuMenuId) return void 0;
-		return {
+		const submenu = interaction.connectSubmenu({
 			id: submenuMenuId,
 			parentItemId: () => entry.itemId,
-			element: () => getSubmenuElement(getCurrentPath(index, entry)),
-			focusTarget: () => menuRef.value,
-			placement: () => {
-				return getSubmenuElement(getCurrentPath(index, entry))?.dataset.placement ?? "right-start";
-			},
 			isOpen: () => openMenuIds.value.has(submenuMenuId),
 			setOpen: (open) => setMenuOpen(submenuMenuId, open)
+		});
+		return {
+			menu: submenu.connectContent({
+				element: () => getSubmenuElement(getCurrentPath(index, entry)),
+				focusTarget: () => menuRef.value,
+				placement: () => {
+					return getSubmenuElement(getCurrentPath(index, entry))?.dataset.placement ?? "right-start";
+				}
+			}),
+			submenu
 		};
 	}
 	function createSelectEvent(entry, originalEvent) {
@@ -2252,45 +2352,53 @@ function useDropdownMenuDataRegistration({ props, items, rootMenuId, interaction
 		onSelect?.(entry.item, event);
 		return event;
 	}
-	function registerEntry(index, entry) {
-		const menuRegistration = createMenuRegistration(index, entry);
-		if (menuRegistration) interaction.registerMenu(menuRegistration);
-		interaction.registerItem({
+	function connectItem(index, entry, nextMenus, nextSubmenus) {
+		const menu = nextMenus.get(entry.ownerMenuId);
+		if (!menu) return void 0;
+		return menu.connectItem({
 			id: entry.itemId,
-			menuId: entry.ownerMenuId,
 			element: () => getItemElement(getCurrentPath(index, entry)),
 			textValue: () => entry.item.label,
 			disabled: () => Boolean(entry.item.disabled || props.disabled),
 			order: () => entry.order,
-			submenuId: () => entry.submenuMenuId,
+			submenu: entry.submenuMenuId ? nextSubmenus.get(entry.submenuMenuId) : void 0,
 			submenuDirection: () => isSubmenuOpeningLeft(getCurrentPath(index, entry)) ? "left" : "right",
 			select: (originalEvent) => createSelectEvent(entry, originalEvent),
 			closeOnSelect: () => props.closeOnSelect !== false
 		});
 	}
-	function unregisterStaleEntries(nextRegisteredItemIds, nextRegisteredMenuIds) {
-		for (const id of registeredItemIds) if (!nextRegisteredItemIds.has(id)) interaction.unregisterItem(id);
-		for (const id of registeredMenuIds) {
-			if (nextRegisteredMenuIds.has(id)) continue;
-			interaction.unregisterMenu(id);
-			setMenuOpen(id, false);
-		}
-	}
 	function registerItems() {
 		const nextIndex = buildDropdownMenuDataIndex(items.value, rootMenuId, getStableItemId);
-		const nextRegisteredItemIds = new Set(nextIndex.entries.map((entry) => entry.itemId));
-		const nextRegisteredMenuIds = new Set(nextIndex.entries.flatMap((entry) => entry.submenuMenuId ? [entry.submenuMenuId] : []));
-		for (const entry of nextIndex.entries) registerEntry(nextIndex, entry);
-		unregisterStaleEntries(nextRegisteredItemIds, nextRegisteredMenuIds);
-		registeredItemIds = nextRegisteredItemIds;
-		registeredMenuIds = nextRegisteredMenuIds;
+		const nextItems = /* @__PURE__ */ new Map();
+		const nextMenus = /* @__PURE__ */ new Map([[rootMenuId, rootMenu]]);
+		const nextSubmenus = /* @__PURE__ */ new Map();
+		for (const entry of nextIndex.entries) {
+			const connection = connectSubmenu(nextIndex, entry);
+			if (!entry.submenuMenuId || !connection) continue;
+			nextMenus.set(entry.submenuMenuId, connection.menu);
+			nextSubmenus.set(entry.submenuMenuId, connection.submenu);
+		}
+		for (const entry of nextIndex.entries) {
+			const item = connectItem(nextIndex, entry, nextMenus, nextSubmenus);
+			if (item) nextItems.set(entry.itemId, item);
+		}
+		for (const item of itemInteractions.values()) item.dispose();
+		for (const submenu of submenuInteractions.values()) submenu.dispose();
+		itemInteractions = nextItems;
+		menuInteractions = nextMenus;
+		submenuInteractions = nextSubmenus;
 		registrationIndex.value = nextIndex;
-		interaction.reconcile();
 	}
 	watch(collectionState, registerItems, { immediate: true });
+	onBeforeUnmount(() => {
+		for (const item of itemInteractions.values()) item.dispose();
+		for (const submenu of submenuInteractions.values()) submenu.dispose();
+	});
 	return {
 		openMenuIds,
-		registrationIndex
+		registrationIndex,
+		getItemInteraction: (id) => itemInteractions.get(id),
+		getMenuInteraction: (id) => menuInteractions.get(id)
 	};
 }
 //#endregion
@@ -2422,7 +2530,7 @@ function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmen
 }
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDataController.ts
-function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuRef, actualPlacement, interaction, onSelect }) {
+function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuRef, actualPlacement, interaction, rootMenu, onSelect }) {
 	function getItemId(path) {
 		return `${menuId.value}-item-${getPathKey(path)}`;
 	}
@@ -2441,11 +2549,12 @@ function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuR
 		if (submenuRect && itemRect && hasMeasuredRect(submenuRect) && hasMeasuredRect(itemRect)) return submenuRect.right <= itemRect.left;
 		return actualPlacement.value.endsWith("end");
 	}
-	const { openMenuIds, registrationIndex } = useDropdownMenuDataRegistration({
+	const { openMenuIds, registrationIndex, getItemInteraction, getMenuInteraction } = useDropdownMenuDataRegistration({
 		props,
 		items,
 		rootMenuId,
 		interaction,
+		rootMenu,
 		menuRef,
 		getItemElement,
 		getSubmenuElement,
@@ -2461,7 +2570,9 @@ function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuR
 			return id ? [...registrationIndex.value.pathByItemId.get(id) ?? []] : [];
 		},
 		set(path) {
-			interaction.setActive(path.length > 0 ? getDataItemId(path) ?? null : null);
+			const itemId = path.length > 0 ? getDataItemId(path) : void 0;
+			if (itemId) getItemInteraction(itemId)?.setActive();
+			else rootMenu.clearActive();
 		}
 	});
 	const focusedIndex = computed(() => focusedPath.value[0] ?? -1);
@@ -2480,31 +2591,28 @@ function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuR
 	}
 	function isSubmenuOpen(path) {
 		const itemId = getDataItemId(path);
-		const submenuId = itemId ? interaction.getItem(itemId)?.submenuId?.() : void 0;
-		return Boolean(submenuId && interaction.isMenuOpen(submenuId));
+		return itemId ? getItemInteraction(itemId)?.submenuOpen.value ?? false : false;
 	}
 	function openSubmenu(path, focus = DEFAULT_FOCUS_TARGET, point) {
 		const itemId = getDataItemId(path);
-		const submenuId = itemId ? interaction.getItem(itemId)?.submenuId?.() : void 0;
-		if (!submenuId || !interaction.openMenu(submenuId, focus)) return false;
+		if (!(itemId ? getItemInteraction(itemId) : void 0)?.openSubmenu(focus)) return false;
 		hoverIntent.trackSubmenuOpen(path, point);
 		return true;
 	}
 	function closeSubmenu(path) {
 		const itemId = getDataItemId(path);
-		const submenuId = itemId ? interaction.getItem(itemId)?.submenuId?.() : void 0;
-		const closed = submenuId ? interaction.closeMenu(submenuId, false) : false;
+		const closed = itemId ? getItemInteraction(itemId)?.closeSubmenu(false) ?? false : false;
 		if (closed) hoverIntent.resetHoverIntent();
 		return closed;
 	}
 	function commitHoveredItem(item, path, point) {
 		const itemId = getDataItemId(path);
-		const itemRegistration = itemId ? interaction.getItem(itemId) : void 0;
-		if (!itemRegistration) return;
+		const itemInteraction = itemId ? getItemInteraction(itemId) : void 0;
+		if (!itemInteraction) return;
 		hoverIntent.clearPendingHover();
-		interaction.setActive(itemRegistration.id);
-		if (hasItemSubmenu(item)) openSubmenu(path, false, point);
-		else interaction.closeSubmenus(itemRegistration.menuId);
+		const hasSubmenu = hasItemSubmenu(item);
+		const opened = itemInteraction.hover(hasSubmenu);
+		if (hasSubmenu && opened) hoverIntent.trackSubmenuOpen(path, point);
 	}
 	const hoverIntent = useDropdownMenuHoverIntent({
 		openSubmenuPath,
@@ -2517,15 +2625,15 @@ function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuR
 	}
 	function selectItem(item, originalEvent = new Event("select")) {
 		const id = registrationIndex.value.primaryItemId.get(item);
-		if (id) interaction.selectItem(id, originalEvent);
+		if (id) getItemInteraction(id)?.select(originalEvent);
 	}
 	function activateItem(_item, path, event) {
 		const id = getDataItemId(path);
-		if (id) interaction.activateItem(id, event);
+		if (id) getItemInteraction(id)?.activate(event);
 	}
 	function getMenuActiveDescendant(path) {
 		const pathKey = getPathKey(path);
-		const activeId = interaction.getActiveId(registrationIndex.value.menuIdByPath.get(pathKey) ?? rootMenuId).value;
+		const activeId = getMenuInteraction(registrationIndex.value.menuIdByPath.get(pathKey) ?? rootMenuId)?.activeId.value;
 		const activePath = activeId ? registrationIndex.value.pathByItemId.get(activeId) : void 0;
 		return activePath ? getItemId(activePath) : void 0;
 	}
@@ -2573,7 +2681,7 @@ function useDropdownMenuPortalPosition(options) {
 }
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuPresentation.ts
-function useDropdownMenuPresentation({ props, rootMenuId, menuId, isDisabled, isVisible, isExplicitTarget, actualPlacement, contentHasSubmenu, activeDescendantId, interaction, resetHoverIntent, onMenuMousemove, open, close, toggle }) {
+function useDropdownMenuPresentation({ props, menuId, isDisabled, isVisible, isExplicitTarget, actualPlacement, contentHasSubmenu, activeDescendantId, interaction, resetHoverIntent, onMenuMousemove, open, close, toggle }) {
 	const rootClass = computed(() => bem("rp-dropdown-menu", {
 		[`placement-${actualPlacement.value}`]: true,
 		target: isExplicitTarget.value,
@@ -2589,24 +2697,9 @@ function useDropdownMenuPresentation({ props, rootMenuId, menuId, isDisabled, is
 		onClick: () => interaction.onTriggerClick(),
 		onKeydown: (event) => interaction.onTriggerKeydown(event)
 	}));
-	function getKeyboardMenuId(event) {
-		const activeItem = interaction.activeItemId.value ? interaction.getItem(interaction.activeItemId.value) : void 0;
-		const openSubmenuId = activeItem?.submenuId?.();
-		if (openSubmenuId && interaction.isMenuOpen(openSubmenuId)) {
-			if (event.key === "Escape") return openSubmenuId;
-			const opensLeft = activeItem?.submenuDirection?.() === "left" || interaction.getMenu(openSubmenuId)?.placement().startsWith("left");
-			if (event.key === (opensLeft ? "ArrowRight" : "ArrowLeft")) return openSubmenuId;
-		}
-		if ([
-			"ArrowLeft",
-			"ArrowRight",
-			"Escape"
-		].includes(event.key) && interaction.activeMenuId.value !== rootMenuId) return interaction.activeMenuId.value;
-		return activeItem?.menuId ?? interaction.activeMenuId.value;
-	}
 	function onMenuKeydown(event) {
 		resetHoverIntent();
-		interaction.onMenuKeydown(getKeyboardMenuId(event), event);
+		interaction.onMenuKeydown(event);
 	}
 	return {
 		rootClass,
@@ -2755,45 +2848,32 @@ function syncTargetAttributes(target, id, visible, disabled) {
 	target.setAttribute("aria-haspopup", "menu");
 	target.removeAttribute("aria-disabled");
 }
-function useDropdownMenuTargetBindings({ interaction, rootRef, menuRef, targetElement, isExplicitTarget, menuId, isVisible, isDisabled, ignoredTargets, pointerDownOutside, focusOutside, interactOutside }) {
+function useDropdownMenuTargetBindings({ interaction, rootRef, menuRef, targetLifecycle, menuId, isVisible, isDisabled, ignoredTargets, pointerDownOutside, focusOutside, interactOutside }) {
 	function watchInside(source) {
-		watch(source, (element, previous) => {
-			if (previous) interaction.unregisterInside(previous);
-			if (element) interaction.registerInside(element);
+		watch(source, (element, _previous, onCleanup) => {
+			if (element) onCleanup(interaction.connectInside(element));
 		}, { immediate: true });
 	}
 	watchInside(rootRef);
 	watchInside(menuRef);
-	watchInside(targetElement);
-	const cleanupDismissal = interaction.registerDismissal({
+	const cleanupDismissal = interaction.connectDismissal({
 		ignoredTargets,
 		pointerDownOutside,
 		focusOutside,
 		interactOutside
 	});
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		const onClick = () => interaction.onTriggerClick();
-		const onKeydown = (event) => interaction.onTriggerKeydown(event);
-		target.addEventListener("click", onClick);
-		target.addEventListener("keydown", onKeydown);
-		onCleanup(() => {
-			target.removeEventListener("click", onClick);
-			target.removeEventListener("keydown", onKeydown);
-		});
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
-		targetElement,
-		menuId,
-		isVisible,
-		isDisabled
-	], ([explicit, target, id, visible, disabled], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		const snapshot = snapshotAttributes(target, TARGET_ATTRIBUTES);
-		syncTargetAttributes(target, id, visible, disabled);
-		onCleanup(() => restoreAttributes(target, snapshot));
-	}, { flush: "sync" });
+	const onClick = () => interaction.onTriggerClick();
+	const onKeydown = (event) => interaction.onTriggerKeydown(event);
+	targetLifecycle.bindTarget({
+		connect: (target) => interaction.connectInside(target),
+		listeners: [["click", onClick], ["keydown", onKeydown]],
+		attributes: {
+			names: TARGET_ATTRIBUTES,
+			apply: (target) => {
+				syncTargetAttributes(target, menuId.value, isVisible.value, isDisabled.value);
+			}
+		}
+	});
 	onBeforeUnmount(cleanupDismissal);
 }
 //#endregion
@@ -2813,8 +2893,11 @@ function useDropdownMenu(props, emit = {}) {
 	const placement = computed(() => props.placement ?? "bottom-start");
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
 	const shouldTeleport = computed(() => props.teleport !== false);
-	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
-	const targetElement = computed(() => isElement(resolvedTarget.value) ? resolvedTarget.value : null);
+	const targetLifecycle = useFloatingTargetLifecycle({
+		target: () => props.target,
+		fallback: rootRef
+	});
+	const { isExplicitTarget, reference, targetElement } = targetLifecycle;
 	const visibleItems = computed(() => props.items ?? []);
 	const isDisabled = computed(() => Boolean(props.disabled));
 	const modal = computed(() => Boolean(props.modal));
@@ -2860,7 +2943,7 @@ function useDropdownMenu(props, emit = {}) {
 		disabled: isDisabled,
 		modal,
 		setOpen,
-		isTopLayer: layer.isTopLayer,
+		connectLayerInteraction: layer.connectInteraction,
 		focusTrigger,
 		beforeOpen: () => resetHoverIntent(),
 		beforeClose: () => resetHoverIntent()
@@ -2868,11 +2951,9 @@ function useDropdownMenu(props, emit = {}) {
 	const open = interaction.open;
 	const close = (options = {}) => interaction.close(options);
 	const toggle = interaction.toggle;
-	const cleanupRootMenu = interaction.registerMenu({
-		id: interactionRootMenuId,
+	const rootMenu = interaction.connectRootMenu({
 		element: () => menuRef.value,
-		placement: () => actualPlacement.value,
-		isOpen: () => isVisible.value
+		placement: () => actualPlacement.value
 	});
 	const dataController = useDropdownMenuDataController({
 		props,
@@ -2882,6 +2963,7 @@ function useDropdownMenu(props, emit = {}) {
 		menuRef,
 		actualPlacement,
 		interaction,
+		rootMenu,
 		onSelect: (item, event) => emit.select?.(item, event)
 	});
 	resetHoverIntent = dataController.resetHoverIntent;
@@ -2904,7 +2986,6 @@ function useDropdownMenu(props, emit = {}) {
 	});
 	const presentation = useDropdownMenuPresentation({
 		props,
-		rootMenuId: interactionRootMenuId,
 		menuId,
 		isDisabled,
 		isVisible,
@@ -2923,8 +3004,7 @@ function useDropdownMenu(props, emit = {}) {
 		interaction,
 		rootRef,
 		menuRef,
-		targetElement,
-		isExplicitTarget,
+		targetLifecycle,
 		menuId,
 		isVisible,
 		isDisabled,
@@ -2937,7 +3017,7 @@ function useDropdownMenu(props, emit = {}) {
 		...contentStyle.value,
 		zIndex: layer.zIndex.value
 	}));
-	onBeforeUnmount(cleanupRootMenu);
+	onBeforeUnmount(rootMenu.dispose);
 	return {
 		rootRef,
 		menuRef,