ropav 0.0.6 → 0.0.7

package/dist/dropdown-menu.js

@@ -0,0 +1,903 @@
+import './dropdown-menu.css';
+import { t as bem } from "./bem.js";
+import { t as useClickOutside } from "./useClickOutside.js";
+import { VaporTransition, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineComponent, defineVaporComponent, extend, h, markRaw, nextTick, onUnmounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, template, toDisplayString, txt, unref, useId, watch } from "vue";
+//#region ~icons/lucide/chevron-right
+var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m9 18l6-6l-6-6\">", 3, 1);
+function render(_ctx) {
+	return t0$1();
+}
+var chevron_right_default = markRaw(defineVaporComponent({
+	name: "lucide-chevron-right",
+	render
+}));
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-items.ts
+var dropdown_menu_items_default = defineComponent({
+	name: "RpDropdownMenuItems",
+	props: { items: {
+		type: Array,
+		required: true
+	} },
+	setup(props, { slots }) {
+		function renderItems(items) {
+			return items.map((renderedItem) => {
+				const children = [h("button", renderedItem.props, slots.item?.(renderedItem.slotProps))];
+				if (renderedItem.hasSubmenu && renderedItem.submenuOpen) children.push(h("div", renderedItem.submenuProps, renderItems(renderedItem.children)));
+				return h("div", {
+					key: renderedItem.key,
+					class: "rp-dropdown-menu__item-wrap",
+					role: "none"
+				}, children);
+			});
+		}
+		return () => renderItems(props.items);
+	}
+});
+var DEFAULT_FOCUS_TARGET = "first";
+function getOpenFocusTarget(options) {
+	if (typeof options === "string") return options;
+	return options?.focus ?? "first";
+}
+function getItemClass(item, focused, disabled, hasSubmenu, submenuOpen) {
+	return bem("rp-dropdown-menu__item", {
+		focused,
+		disabled,
+		destructive: item.destructive,
+		submenu: hasSubmenu,
+		open: submenuOpen
+	});
+}
+function hasItemSubmenu(item) {
+	return (item.children?.length ?? 0) > 0;
+}
+function hasNestedItems(items) {
+	return items.some((item) => hasItemSubmenu(item) || hasNestedItems(item.children ?? []));
+}
+function getPathKey(path) {
+	return path.length === 0 ? "root" : path.join("-");
+}
+function getParentPath(path) {
+	return path.slice(0, -1);
+}
+function arePathsEqual(a, b) {
+	return a.length === b.length && a.every((part, index) => part === b[index]);
+}
+function isPathPrefix(prefix, path) {
+	return prefix.length <= path.length && prefix.every((part, index) => part === path[index]);
+}
+function normalizePath(indexOrPath) {
+	return Array.isArray(indexOrPath) ? indexOrPath : [indexOrPath];
+}
+function getEventPoint(event) {
+	return {
+		x: event.clientX,
+		y: event.clientY
+	};
+}
+function hasMeasuredRect(rect) {
+	return rect.width > 0 || rect.height > 0;
+}
+function isPointInRect(point, rect, padding = 0) {
+	return point.x >= rect.left - padding && point.x <= rect.right + padding && point.y >= rect.top - padding && point.y <= rect.bottom + padding;
+}
+function getEnabledIndexes(items) {
+	return items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
+}
+function getNextEnabledIndex(items, index, direction) {
+	const enabledIndexes = getEnabledIndexes(items);
+	if (enabledIndexes.length === 0) return void 0;
+	if (direction === 1) return enabledIndexes.find((candidate) => candidate > index) ?? enabledIndexes[0];
+	for (let i = enabledIndexes.length - 1; i >= 0; i -= 1) {
+		const candidate = enabledIndexes[i];
+		if (candidate < index) return candidate;
+	}
+	return enabledIndexes[enabledIndexes.length - 1];
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
+function useDropdownMenuDisclosure({ props, emit, rootRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger }) {
+	function setOpen(nextOpen) {
+		if (nextOpen && isDisabled.value) return;
+		const previousOpen = isOpen.value;
+		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
+		if (previousOpen !== nextOpen) emit.openChange?.(nextOpen);
+	}
+	function resetMenuFocus() {
+		resetFocus();
+		resetSubmenus();
+		resetHoverIntent();
+	}
+	function open(options) {
+		if (isDisabled.value) return;
+		setOpen(true);
+		focusItem(getOpenFocusTarget(options));
+		resetSubmenus();
+		resetHoverIntent();
+		focusMenu();
+	}
+	function close(options = {}) {
+		setOpen(false);
+		resetMenuFocus();
+		if (options.focusTrigger) focusTrigger();
+	}
+	function toggle() {
+		if (isVisible.value) close({ focusTrigger: true });
+		else open();
+	}
+	watch(isDisabled, (disabled) => {
+		if (disabled) close();
+	});
+	watch(isVisible, (visible) => {
+		if (visible) {
+			if (focusedPath.value.length === 0) focusItem(DEFAULT_FOCUS_TARGET);
+			focusMenu();
+		} else resetMenuFocus();
+	});
+	useClickOutside(rootRef, isVisible, () => close());
+	return {
+		open,
+		close,
+		toggle,
+		resetMenuFocus
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuDom.ts
+function useDropdownMenuDom({ menuId, rootRef, menuRef, placement, focusedPath }) {
+	const activeDescendantId = computed(() => focusedPath.value.length === 0 ? void 0 : getItemId(focusedPath.value));
+	function focusMenu() {
+		nextTick(() => menuRef.value?.focus());
+	}
+	function focusTrigger() {
+		nextTick(() => {
+			(rootRef.value?.querySelector("[aria-haspopup=\"menu\"]"))?.focus();
+		});
+	}
+	function getItemId(indexOrPath) {
+		return `${menuId.value}-item-${getPathKey(normalizePath(indexOrPath))}`;
+	}
+	function getSubmenuId(path) {
+		return `${menuId.value}-submenu-${getPathKey(path)}`;
+	}
+	function getItemElement(path) {
+		return document.getElementById(getItemId(path));
+	}
+	function getSubmenuElement(path) {
+		return document.getElementById(getSubmenuId(path));
+	}
+	function isSubmenuOpeningLeft(path) {
+		const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();
+		const itemRect = getItemElement(path)?.getBoundingClientRect();
+		if (submenuRect && itemRect && hasMeasuredRect(submenuRect) && hasMeasuredRect(itemRect)) return submenuRect.right <= itemRect.left;
+		return placement.value.endsWith("end");
+	}
+	function getMenuActiveDescendant(menuPath) {
+		return arePathsEqual(getParentPath(focusedPath.value), menuPath) ? getItemId(focusedPath.value) : void 0;
+	}
+	watch(focusedPath, (path) => {
+		if (path.length === 0) return;
+		const targetPath = [...path];
+		nextTick(() => {
+			if (!arePathsEqual(targetPath, focusedPath.value)) return;
+			getItemElement(targetPath)?.scrollIntoView?.({ block: "nearest" });
+		});
+	});
+	return {
+		activeDescendantId,
+		focusMenu,
+		focusTrigger,
+		getItemId,
+		getSubmenuId,
+		getItemElement,
+		getSubmenuElement,
+		isSubmenuOpeningLeft,
+		getMenuActiveDescendant
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuHoverIntent.ts
+var SAFE_TRIANGLE_PADDING = 2;
+var SAFE_TRIANGLE_ORIGIN_OFFSET = 2;
+var SAFE_TRIANGLE_TIMEOUT = 400;
+function getTriangleArea(a, b, c) {
+	return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2);
+}
+function isPointInTriangle(point, triangle) {
+	const [a, b, c] = triangle;
+	const area = getTriangleArea(a, b, c);
+	const area1 = getTriangleArea(point, b, c);
+	const area2 = getTriangleArea(a, point, c);
+	const area3 = getTriangleArea(a, b, point);
+	return Math.abs(area - (area1 + area2 + area3)) < .5;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function clampPointToRect(point, rect) {
+	return {
+		x: clamp(point.x, rect.left, rect.right),
+		y: clamp(point.y, rect.top, rect.bottom)
+	};
+}
+function getDropdownMenuSafeTriangle({ itemRect, submenuRect, origin }) {
+	const measuredItemRect = itemRect && hasMeasuredRect(itemRect) ? itemRect : null;
+	const opensRight = !measuredItemRect || submenuRect.left >= measuredItemRect.right;
+	const edgeX = opensRight ? submenuRect.left : submenuRect.right;
+	const boundedOrigin = measuredItemRect ? clampPointToRect(origin, measuredItemRect) : origin;
+	return [
+		{
+			x: boundedOrigin.x + (opensRight ? -2 : SAFE_TRIANGLE_ORIGIN_OFFSET),
+			y: boundedOrigin.y
+		},
+		{
+			x: edgeX,
+			y: submenuRect.top - SAFE_TRIANGLE_PADDING
+		},
+		{
+			x: edgeX,
+			y: submenuRect.bottom + SAFE_TRIANGLE_PADDING
+		}
+	];
+}
+function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmenuElement }) {
+	const safeTriangleOrigin = ref(null);
+	let latestPointerPoint = null;
+	let pendingHover = null;
+	let pendingHoverTimer;
+	function clearPendingHover() {
+		pendingHover = null;
+		if (pendingHoverTimer !== void 0) {
+			window.clearTimeout(pendingHoverTimer);
+			pendingHoverTimer = void 0;
+		}
+	}
+	function resetHoverIntent() {
+		safeTriangleOrigin.value = null;
+		latestPointerPoint = null;
+		clearPendingHover();
+	}
+	function getFallbackTriangleOrigin(path) {
+		const itemRect = getItemElement(path)?.getBoundingClientRect();
+		if (!itemRect) return null;
+		const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();
+		return {
+			x: !submenuRect || submenuRect.left >= itemRect.right ? itemRect.right : itemRect.left,
+			y: itemRect.top + itemRect.height / 2
+		};
+	}
+	function trackSubmenuOpen(path, point) {
+		safeTriangleOrigin.value = point ?? getFallbackTriangleOrigin(path);
+		clearPendingHover();
+	}
+	function isPointInCurrentSubmenu(point) {
+		if (openSubmenuPath.value.length === 0) return false;
+		const submenuRect = getSubmenuElement(openSubmenuPath.value)?.getBoundingClientRect();
+		return submenuRect ? isPointInRect(point, submenuRect, SAFE_TRIANGLE_PADDING) : false;
+	}
+	function getSafeTriangle(path) {
+		const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();
+		const itemRect = getItemElement(path)?.getBoundingClientRect();
+		const origin = safeTriangleOrigin.value ?? getFallbackTriangleOrigin(path);
+		if (!submenuRect || !origin) return null;
+		return getDropdownMenuSafeTriangle({
+			itemRect: itemRect ?? null,
+			submenuRect,
+			origin
+		});
+	}
+	function updateSafeTriangleOrigin(point) {
+		if (openSubmenuPath.value.length === 0) return;
+		const itemRect = getItemElement(openSubmenuPath.value)?.getBoundingClientRect();
+		if (itemRect && isPointInRect(point, itemRect)) safeTriangleOrigin.value = point;
+	}
+	function shouldDelayHover(path, point) {
+		if (openSubmenuPath.value.length === 0) return false;
+		if (arePathsEqual(path, openSubmenuPath.value)) return false;
+		if (isPathPrefix(openSubmenuPath.value, path)) return false;
+		if (isPointInCurrentSubmenu(point)) return true;
+		const triangle = getSafeTriangle(openSubmenuPath.value);
+		return triangle ? isPointInTriangle(point, triangle) : false;
+	}
+	function delayHoveredItem(item, path, commit) {
+		pendingHover = {
+			item,
+			path
+		};
+		if (pendingHoverTimer !== void 0) window.clearTimeout(pendingHoverTimer);
+		pendingHoverTimer = window.setTimeout(() => {
+			if (!pendingHover) return;
+			const nextHover = pendingHover;
+			if (latestPointerPoint && isPointInCurrentSubmenu(latestPointerPoint)) {
+				clearPendingHover();
+				return;
+			}
+			commit(nextHover.item, nextHover.path);
+		}, SAFE_TRIANGLE_TIMEOUT);
+	}
+	function handleItemHover(item, path, event, commit) {
+		const point = event ? getEventPoint(event) : void 0;
+		latestPointerPoint = point ?? latestPointerPoint;
+		if (point && shouldDelayHover(path, point)) {
+			delayHoveredItem(item, path, commit);
+			return;
+		}
+		commit(item, path, point);
+	}
+	function handleMenuMousemove(event, commit) {
+		const point = getEventPoint(event);
+		latestPointerPoint = point;
+		updateSafeTriangleOrigin(point);
+		if (!pendingHover) return;
+		if (shouldDelayHover(pendingHover.path, point)) return;
+		const nextHover = pendingHover;
+		commit(nextHover.item, nextHover.path, point);
+	}
+	onUnmounted(clearPendingHover);
+	return {
+		clearPendingHover,
+		resetHoverIntent,
+		trackSubmenuOpen,
+		handleItemHover,
+		handleMenuMousemove
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuInteractions.ts
+function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft }) {
+	function activateItem(item, path, event) {
+		if (item.disabled) return;
+		if (hasItemSubmenu(item)) {
+			openSubmenu(path, DEFAULT_FOCUS_TARGET, event ? getEventPoint(event) : void 0);
+			return;
+		}
+		selectItem(item);
+	}
+	function selectItem(item) {
+		if (item.disabled) return;
+		emit.select?.(item);
+		if (props.closeOnSelect !== false) disclosure.close({ focusTrigger: true });
+	}
+	function closeSubmenusAfter(menuPath) {
+		submenus.closeSubmenusAfter(menuPath);
+		hoverIntent.resetHoverIntent();
+	}
+	function openSubmenu(path, focus = DEFAULT_FOCUS_TARGET, point) {
+		const opened = submenus.openSubmenu(path, focus);
+		if (opened) hoverIntent.trackSubmenuOpen(path, point);
+		return opened;
+	}
+	function closeSubmenu(path) {
+		const closed = submenus.closeSubmenu(path);
+		if (closed) hoverIntent.resetHoverIntent();
+		return closed;
+	}
+	function closeCurrentSubmenu() {
+		const closed = submenus.closeCurrentSubmenu();
+		if (closed) hoverIntent.resetHoverIntent();
+		return closed;
+	}
+	function commitHoveredItem(item, path, point) {
+		hoverIntent.clearPendingHover();
+		focusedPath.value = [...path];
+		if (hasItemSubmenu(item)) openSubmenu(path, false, point);
+		else closeSubmenusAfter(getParentPath(path));
+	}
+	function focusHoveredItem(item, indexOrPath, event) {
+		if (item.disabled) return;
+		const path = normalizePath(indexOrPath);
+		hoverIntent.handleItemHover(item, path, event, commitHoveredItem);
+	}
+	function selectFocusedItem() {
+		const item = getItemAtPath(focusedPath.value);
+		if (!item) return;
+		activateItem(item, focusedPath.value);
+	}
+	function moveFocusedItem(direction) {
+		const menuPath = moveFocus(direction);
+		if (menuPath) closeSubmenusAfter(menuPath);
+	}
+	function onTriggerClick() {
+		disclosure.toggle();
+	}
+	function onTriggerKeydown(event) {
+		if (isDisabled.value) return;
+		switch (event.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				event.preventDefault();
+				disclosure.open();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				disclosure.open({ focus: "last" });
+				break;
+			case "Escape":
+				disclosure.close({ focusTrigger: true });
+				break;
+		}
+	}
+	function onMenuKeydown(event) {
+		hoverIntent.resetHoverIntent();
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				moveFocusedItem(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				moveFocusedItem(-1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusItem("first", getParentPath(focusedPath.value));
+				break;
+			case "End":
+				event.preventDefault();
+				focusItem("last", getParentPath(focusedPath.value));
+				break;
+			case "ArrowRight":
+			case "ArrowLeft":
+				onMenuHorizontalKeydown(event);
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				selectFocusedItem();
+				break;
+			case "Escape":
+				event.preventDefault();
+				if (!closeCurrentSubmenu()) disclosure.close({ focusTrigger: true });
+				break;
+			case "Tab":
+				disclosure.close();
+				break;
+		}
+	}
+	function onMenuHorizontalKeydown(event) {
+		const isRight = event.key === "ArrowRight";
+		const currentMenuPath = getParentPath(focusedPath.value);
+		const closePath = focusedPath.value.length > 1 ? currentMenuPath : arePathsEqual(focusedPath.value, openSubmenuPath.value) ? focusedPath.value : void 0;
+		if (closePath && isRight === isSubmenuOpeningLeft(closePath)) {
+			event.preventDefault();
+			closeSubmenu(closePath);
+			return;
+		}
+		const item = getItemAtPath(focusedPath.value);
+		if (!item || item.disabled || !hasItemSubmenu(item)) return;
+		if (isRight === isSubmenuOpeningLeft(focusedPath.value)) return;
+		event.preventDefault();
+		openSubmenu(focusedPath.value);
+	}
+	function onMenuMousemove(event) {
+		hoverIntent.handleMenuMousemove(event, commitHoveredItem);
+	}
+	function onMenuMouseleave() {
+		hoverIntent.resetHoverIntent();
+	}
+	return {
+		activateItem,
+		selectItem,
+		openSubmenu,
+		closeSubmenu,
+		focusHoveredItem,
+		onTriggerClick,
+		onTriggerKeydown,
+		onMenuKeydown,
+		onMenuMousemove,
+		onMenuMouseleave
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuNavigation.ts
+function useDropdownMenuNavigation(items) {
+	const focusedPath = ref([]);
+	const focusedIndex = computed(() => focusedPath.value[0] ?? -1);
+	function getItemsAtPath(path) {
+		let currentItems = items.value;
+		for (const index of path) {
+			const item = currentItems[index];
+			if (!item) return [];
+			currentItems = item.children ?? [];
+		}
+		return currentItems;
+	}
+	function getItemAtPath(path) {
+		if (path.length === 0) return void 0;
+		return getItemsAtPath(getParentPath(path))[path[path.length - 1]];
+	}
+	function focusItem(target, menuPath = []) {
+		const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath));
+		const index = target === "last" ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
+		if (index === void 0) {
+			if (menuPath.length === 0) focusedPath.value = [];
+			return false;
+		}
+		focusedPath.value = [...menuPath, index];
+		return true;
+	}
+	function resetFocus() {
+		focusedPath.value = [];
+	}
+	function isItemFocused(indexOrPath) {
+		return arePathsEqual(normalizePath(indexOrPath), focusedPath.value);
+	}
+	function moveFocus(direction) {
+		const menuPath = getParentPath(focusedPath.value);
+		const itemsAtPath = getItemsAtPath(menuPath);
+		const nextIndex = getNextEnabledIndex(itemsAtPath, focusedPath.value.length === 0 ? direction === 1 ? -1 : itemsAtPath.length : focusedPath.value[focusedPath.value.length - 1], direction);
+		if (nextIndex === void 0) {
+			focusedPath.value = [];
+			return;
+		}
+		focusedPath.value = [...menuPath, nextIndex];
+		return menuPath;
+	}
+	return {
+		focusedPath,
+		focusedIndex,
+		getItemsAtPath,
+		getItemAtPath,
+		focusItem,
+		resetFocus,
+		isItemFocused,
+		moveFocus
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuRenderItems.ts
+function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuActiveDescendant, isItemFocused, isSubmenuOpen, activateItem, focusHoveredItem, selectItem, openSubmenu, closeSubmenu, close }) {
+	const renderedItems = computed(() => getRenderedItems(items.value));
+	function getRenderedItems(dropdownItems, parentPath = []) {
+		return dropdownItems.map((item, index) => {
+			const path = [...parentPath, index];
+			const level = parentPath.length;
+			const focused = isItemFocused(path);
+			const disabled = Boolean(item.disabled);
+			const hasSubmenu = hasItemSubmenu(item);
+			const submenuOpen = hasSubmenu && isSubmenuOpen(path);
+			return {
+				item,
+				index,
+				key: `${getPathKey(path)}:${String(item.value)}`,
+				path,
+				level,
+				focused,
+				disabled,
+				hasSubmenu,
+				submenuOpen,
+				props: getItemProps(item, path, focused, disabled),
+				submenuProps: hasSubmenu ? getSubmenuProps(item, path) : void 0,
+				slotProps: getItemSlotProps(item, path, focused, disabled),
+				children: hasSubmenu ? getRenderedItems(item.children ?? [], path) : []
+			};
+		});
+	}
+	function getItemProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled)) {
+		const path = normalizePath(indexOrPath);
+		const hasSubmenu = hasItemSubmenu(item);
+		const submenuOpen = hasSubmenu && isSubmenuOpen(path);
+		return {
+			id: getItemId(path),
+			type: "button",
+			role: "menuitem",
+			tabindex: -1,
+			class: getItemClass(item, focused, disabled, hasSubmenu, submenuOpen),
+			"aria-controls": hasSubmenu ? getSubmenuId(path) : void 0,
+			"aria-expanded": hasSubmenu ? submenuOpen : void 0,
+			"aria-haspopup": hasSubmenu ? "menu" : void 0,
+			"aria-disabled": disabled || void 0,
+			"data-disabled": disabled || void 0,
+			"data-focused": focused || void 0,
+			"data-submenu": hasSubmenu || void 0,
+			onClick: (event) => activateItem(item, path, event),
+			onMouseenter: (event) => focusHoveredItem(item, path, event)
+		};
+	}
+	function getSubmenuProps(item, path) {
+		return {
+			id: getSubmenuId(path),
+			role: "menu",
+			class: bem("rp-dropdown-menu__submenu", {
+				open: isSubmenuOpen(path),
+				"has-submenu": hasNestedItems(item.children ?? [])
+			}),
+			"aria-label": item.label,
+			"aria-activedescendant": getMenuActiveDescendant(path)
+		};
+	}
+	function getItemSlotProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled)) {
+		const path = normalizePath(indexOrPath);
+		const hasSubmenu = hasItemSubmenu(item);
+		return {
+			item,
+			index: path[path.length - 1] ?? -1,
+			path,
+			level: path.length - 1,
+			focused,
+			disabled,
+			hasSubmenu,
+			isSubmenuOpen: hasSubmenu && isSubmenuOpen(path),
+			select: () => selectItem(item),
+			openSubmenu: (focus = DEFAULT_FOCUS_TARGET) => openSubmenu(path, focus),
+			closeSubmenu: () => closeSubmenu(path),
+			close
+		};
+	}
+	return {
+		renderedItems,
+		getItemProps,
+		getItemSlotProps
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownSubmenus.ts
+function useDropdownSubmenus({ focusedPath, getItemAtPath, focusItem }) {
+	const openSubmenuPath = ref([]);
+	function resetSubmenus() {
+		openSubmenuPath.value = [];
+	}
+	function isSubmenuOpen(path) {
+		return path.length > 0 && isPathPrefix(path, openSubmenuPath.value);
+	}
+	function closeSubmenusAfter(menuPath) {
+		openSubmenuPath.value = [...menuPath];
+	}
+	function openSubmenu(path, focus = DEFAULT_FOCUS_TARGET) {
+		const item = getItemAtPath(path);
+		if (!item || item.disabled || !hasItemSubmenu(item)) return false;
+		openSubmenuPath.value = [...path];
+		if (focus && !focusItem(focus, path)) focusedPath.value = [...path];
+		return true;
+	}
+	function closeSubmenu(path) {
+		if (!isSubmenuOpen(path)) return false;
+		openSubmenuPath.value = getParentPath(path);
+		if (isPathPrefix(path, focusedPath.value) && focusedPath.value.length > path.length) focusedPath.value = [...path];
+		return true;
+	}
+	function closeCurrentSubmenu() {
+		const path = focusedPath.value.length > 1 ? getParentPath(focusedPath.value) : focusedPath.value;
+		if (path.length === 0 || !isSubmenuOpen(path)) return false;
+		return closeSubmenu(path);
+	}
+	return {
+		openSubmenuPath,
+		resetSubmenus,
+		isSubmenuOpen,
+		closeSubmenusAfter,
+		openSubmenu,
+		closeSubmenu,
+		closeCurrentSubmenu
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenu.ts
+function useDropdownMenu(props, emit = {}) {
+	const rootRef = ref(null);
+	const menuRef = ref(null);
+	const uncontrolledOpen = ref(false);
+	const generatedId = useId();
+	const menuId = computed(() => props.id ?? `${generatedId}-menu`);
+	const placement = computed(() => props.placement ?? "bottom-start");
+	const visibleItems = computed(() => props.items ?? []);
+	const isDisabled = computed(() => Boolean(props.disabled));
+	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+	const isVisible = computed(() => isOpen.value && !isDisabled.value);
+	const contentHasSubmenu = computed(() => hasNestedItems(visibleItems.value));
+	const isEmpty = computed(() => visibleItems.value.length === 0);
+	const { focusedPath, focusedIndex, getItemAtPath, focusItem, resetFocus, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
+	const submenus = useDropdownSubmenus({
+		focusedPath,
+		getItemAtPath,
+		focusItem
+	});
+	const { openSubmenuPath, isSubmenuOpen } = submenus;
+	const { activeDescendantId, focusMenu, focusTrigger, getItemId, getSubmenuId, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, getMenuActiveDescendant } = useDropdownMenuDom({
+		menuId,
+		rootRef,
+		menuRef,
+		placement,
+		focusedPath
+	});
+	const hoverIntent = useDropdownMenuHoverIntent({
+		openSubmenuPath,
+		getItemElement,
+		getSubmenuElement
+	});
+	const disclosure = useDropdownMenuDisclosure({
+		props,
+		emit,
+		rootRef,
+		uncontrolledOpen,
+		isDisabled,
+		isOpen,
+		isVisible,
+		focusedPath,
+		resetFocus,
+		resetSubmenus: submenus.resetSubmenus,
+		resetHoverIntent: hoverIntent.resetHoverIntent,
+		focusItem,
+		focusMenu,
+		focusTrigger
+	});
+	const { open, close, toggle } = disclosure;
+	const { activateItem, selectItem, openSubmenu, closeSubmenu, focusHoveredItem, onTriggerClick, onTriggerKeydown, onMenuKeydown, onMenuMousemove, onMenuMouseleave } = useDropdownMenuInteractions({
+		props,
+		emit,
+		isDisabled,
+		focusedPath,
+		openSubmenuPath,
+		getItemAtPath,
+		focusItem,
+		moveFocus,
+		submenus,
+		hoverIntent,
+		disclosure,
+		isSubmenuOpeningLeft
+	});
+	const rootClass = computed(() => bem("rp-dropdown-menu", {
+		[`placement-${placement.value}`]: true,
+		open: isVisible.value,
+		disabled: isDisabled.value
+	}));
+	const contentClass = computed(() => bem("rp-dropdown-menu__content", { "has-submenu": contentHasSubmenu.value }));
+	const triggerProps = computed(() => ({
+		"aria-controls": isDisabled.value ? void 0 : menuId.value,
+		"aria-expanded": isDisabled.value ? void 0 : isVisible.value,
+		"aria-haspopup": "menu",
+		disabled: isDisabled.value || void 0,
+		onClick: onTriggerClick,
+		onKeydown: onTriggerKeydown
+	}));
+	const contentProps = computed(() => ({
+		id: menuId.value,
+		role: "menu",
+		tabindex: -1,
+		"aria-label": props.ariaLabel || void 0,
+		"aria-activedescendant": activeDescendantId.value,
+		onKeydown: onMenuKeydown,
+		onMousemove: onMenuMousemove,
+		onMouseleave: onMenuMouseleave
+	}));
+	const slotProps = computed(() => ({
+		triggerProps: triggerProps.value,
+		isOpen: isVisible.value,
+		open,
+		close,
+		toggle
+	}));
+	const { renderedItems, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
+		items: visibleItems,
+		getItemId,
+		getSubmenuId,
+		getMenuActiveDescendant,
+		isItemFocused,
+		isSubmenuOpen,
+		activateItem,
+		focusHoveredItem,
+		selectItem,
+		openSubmenu,
+		closeSubmenu,
+		close
+	});
+	return {
+		rootRef,
+		menuRef,
+		menuId,
+		isVisible,
+		isEmpty,
+		visibleItems,
+		renderedItems,
+		focusedIndex,
+		focusedPath,
+		activeDescendantId,
+		rootClass,
+		contentClass,
+		triggerProps,
+		contentProps,
+		slotProps,
+		open,
+		close,
+		toggle,
+		selectItem,
+		openSubmenu,
+		closeSubmenu,
+		onItemMouseenter: focusHoveredItem,
+		onTriggerKeydown,
+		onMenuKeydown,
+		getItemProps,
+		getItemSlotProps
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("No actions", 2);
+var t1 = template("<div class=rp-dropdown-menu__empty>");
+var t2 = template("<span class=rp-dropdown-menu__label> </span>");
+var t3 = template("<kbd class=rp-dropdown-menu__shortcut> ");
+var t4 = template("<span class=rp-dropdown-menu__submenu-icon aria-hidden=true>");
+var t5 = template("<div>");
+var t6 = template("<span>", 1);
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.vue
+var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenu",
+	__name: "dropdown-menu",
+	props: {
+		id: {},
+		items: { default: () => [] },
+		placement: { default: "bottom-start" },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		ariaLabel: {}
+	},
+	emits: ["update:open", "select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { rootRef, menuRef, isVisible, isEmpty, renderedItems, rootClass, contentClass, contentProps, slotProps } = useDropdownMenu(props, {
+			openChange: (open) => emit("update:open", open),
+			select: (item) => emit("select", item)
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n23 = t6();
+		renderEffect(() => setClass(n23, unref(rootClass)));
+		setInsertionState(n23, null, 0);
+		createSlot("default", { $: [() => unref(slotProps)] });
+		setInsertionState(n23, null, 1);
+		createComponent(VaporTransition, { name: "rp-dropdown-menu-content" }, extend(() => {
+			return createIf(() => unref(isVisible), () => {
+				const n21 = t5();
+				renderEffect(() => setDynamicProps(n21, [{ class: unref(contentClass) }, unref(contentProps)]));
+				setInsertionState(n21, null, 0);
+				createIf(() => unref(isEmpty), () => {
+					const n8 = t1();
+					setInsertionState(n8, null, 0);
+					createSlot("empty", null, () => {
+						return t0();
+					});
+					return n8;
+				});
+				setInsertionState(n21, null, 1);
+				createComponent(unref(dropdown_menu_items_default), { items: () => unref(renderedItems) }, { "item": extend((itemSlotProps) => {
+					return [createSlot("item", { $: [() => itemSlotProps] }, () => {
+						const n11 = t2();
+						const x11 = txt(n11);
+						renderEffect(() => setText(x11, toDisplayString(itemSlotProps.item.label)));
+						return [n11, createIf(() => itemSlotProps.item.shortcut, () => {
+							const n14 = t3();
+							const x14 = txt(n14);
+							renderEffect(() => setText(x14, toDisplayString(itemSlotProps.item.shortcut)));
+							return n14;
+						}, null, 129)];
+					}), createIf(() => itemSlotProps.hasSubmenu, () => {
+						const n18 = t4();
+						setInsertionState(n18, null, 0);
+						createComponent(unref(chevron_right_default));
+						return n18;
+					}, null, 129)];
+				}, { _: 8 }) });
+				_setTemplateRef(n21, menuRef, null, "menuRef");
+				return n21;
+			}, null, 129);
+		}, { _: 8 }));
+		setStaticTemplateRef(n23, rootRef, null, "rootRef");
+		return n23;
+	}
+});
+//#endregion
+export { useDropdownMenu as n, dropdown_menu_default as t };
+
+//# sourceMappingURL=dropdown-menu.js.map