niuma-ui 2.0.4 → 2.0.9

package/dist/components/dropdown/src/RsDropdown.impl.js

@@ -1,12 +1,37 @@
-import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger } from "../../_shared/src/reka.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { flattenDropdownItems } from "./dropdown-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import { placeSidePopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
+import { escapeDropdownSelector, flattenDropdownItems, hasDropdownChildren, listDropdownLayerItems, matchDropdownTypeahead, normalizeDropdownTriggers, placeDropdownPopup, resolveDropdownMenuKeys, resolveDropdownPortalTarget } from "./dropdown-utils.js";
 import RsDropdownItems_default from "./RsDropdownItems.js";
-import { computed, createBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, mergeModels, nextTick, normalizeClass, normalizeProps, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
 //#region src/components/dropdown/src/RsDropdown.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-dropdown__value" };
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["data-disabled"];
+var _hoisted_3 = [
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"aria-label"
+];
+var _hoisted_4 = { class: "rs-dropdown__value" };
+var _hoisted_5 = [
+	"id",
+	"data-rs-theme",
+	"data-placement",
+	"aria-label"
+];
+var _hoisted_6 = [
+	"data-rs-theme",
+	"data-placement",
+	"aria-label"
+];
 var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDropdown",
 	__name: "RsDropdown",
 	props: /*@__PURE__*/ mergeModels({
 		items: {},
@@ -19,20 +44,82 @@ var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			type: Boolean,
 			default: true
 		},
-		size: { default: "md" },
-		contentWidth: { default: "trigger" }
+		size: {},
+		radius: {},
+		contentWidth: { default: "trigger" },
+		trigger: { default: "click" },
+		placement: { default: "bottom" },
+		hideOnClick: {
+			type: Boolean,
+			default: true
+		},
+		getPopupContainer: {},
+		popupClassName: {},
+		maxHeight: {},
+		ariaLabel: {},
+		id: {},
+		destroyOnHide: {
+			type: Boolean,
+			default: true
+		}
 	}, {
 		"modelValue": {},
-		"modelModifiers": {}
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
+	emits: /*@__PURE__*/ mergeModels([
+		"select",
+		"change",
+		"openChange"
+	], ["update:modelValue", "update:open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
 		const props = __props;
-		const { t } = useRsI18n();
-		const resolvedPlaceholder = computed(() => props.placeholder ?? t("dropdown.placeholder"));
 		const emit = __emit;
+		const { t, locale } = useRsI18n();
+		const config = useRsConfigOptional();
+		const menuId = useId();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
+		const resolvedPlaceholder = computed(() => props.placeholder ?? t("dropdown.placeholder"));
+		const menuLabel = computed(() => props.ariaLabel || t("dropdown.menu"));
+		const isRtl = computed(() => resolveDirMode(config?.dir.value ?? "auto", config?.locale.value ?? locale.value) === "rtl");
+		const triggers = computed(() => normalizeDropdownTriggers(props.trigger));
+		const hasClick = computed(() => triggers.value.includes("click"));
+		const hasHover = computed(() => triggers.value.includes("hover"));
+		const hasContext = computed(() => triggers.value.includes("contextmenu"));
+		const iconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const rootRef = useTemplateRef("rootRef");
+		const triggerRef = useTemplateRef("triggerRef");
+		const contentRef = useTemplateRef("contentRef");
+		const submenuRef = useTemplateRef("submenuRef");
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "bottom"
+		});
+		const submenuBox = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "right"
+		});
+		const panelTheme = ref();
+		const highlightedValue = ref("");
+		const openSubmenuValue = ref("");
+		const submenuHighlight = ref("");
 		const flatItems = computed(() => flattenDropdownItems(props.items));
+		const layerItems = computed(() => listDropdownLayerItems(props.items));
+		const submenuItem = computed(() => layerItems.value.find((item) => item.value === openSubmenuValue.value && hasDropdownChildren(item)));
+		const submenuItems = computed(() => submenuItem.value?.children ?? []);
+		const activeLayerItems = computed(() => openSubmenuValue.value ? listDropdownLayerItems(submenuItems.value) : layerItems.value);
+		const activeHighlight = computed(() => openSubmenuValue.value ? submenuHighlight.value : highlightedValue.value);
 		const selectedItem = computed(() => flatItems.value.find((item) => item.value === model.value));
 		const displayLabel = computed(() => {
 			if (!props.showSelected) return resolvedPlaceholder.value;
@@ -42,61 +129,604 @@ var RsDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			if (!props.showSelected) return false;
 			return !selectedItem.value;
 		});
-		function onSelect(value) {
-			if (typeof value === "string") {
-				model.value = value;
-				emit("select", value);
+		const showPanel = computed(() => open.value || !props.destroyOnHide);
+		const portalTarget = computed(() => resolveDropdownPortalTarget(props.getPopupContainer, triggerRef.value));
+		const slots = useSlots();
+		const hasTriggerSlot = computed(() => Boolean(slots.trigger));
+		const rootClass = computed(() => ({
+			"rs-dropdown--action": !props.showSelected || hasTriggerSlot.value,
+			[`rs-dropdown--${resolvedSize.value}`]: true
+		}));
+		const rootStyle = computed(() => ({ "--rs-dropdown-item-radius": rsRadiusCss(resolvedRadius.value) }));
+		const panelStyle = computed(() => ({
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`,
+			width: props.contentWidth === "trigger" ? `${popup.value.width}px` : void 0,
+			maxHeight: props.maxHeight != null ? `${Math.max(0, props.maxHeight)}px` : void 0,
+			"--rs-dropdown-item-radius": rsRadiusCss(resolvedRadius.value),
+			"--rs-dropdown-trigger-width": `${popup.value.width}px`
+		}));
+		const submenuStyle = computed(() => ({
+			top: `${submenuBox.value.top}px`,
+			left: `${submenuBox.value.left}px`,
+			"--rs-dropdown-item-radius": rsRadiusCss(resolvedRadius.value)
+		}));
+		function setOpen(next) {
+			if (props.disabled && next) return;
+			if (open.value === next) return;
+			open.value = next;
+		}
+		function pickInitialHighlight() {
+			const selected = props.showSelected ? selectedItem.value?.value : void 0;
+			if (selected && layerItems.value.some((item) => item.value === selected && !item.disabled)) return selected;
+			return layerItems.value.find((item) => !item.disabled)?.value ?? "";
+		}
+		function commitSelect(value) {
+			const prev = model.value;
+			model.value = value;
+			emit("select", value);
+			if (props.showSelected && prev !== value) emit("change", value);
+			if (props.hideOnClick) setOpen(false);
+		}
+		function onItemSelect(value) {
+			commitSelect(value);
+		}
+		function onHighlight(value) {
+			if (openSubmenuValue.value) {
+				submenuHighlight.value = value;
+				return;
+			}
+			highlightedValue.value = value;
+		}
+		function onOpenSubmenu(value) {
+			openSubmenuValue.value = value;
+			highlightedValue.value = value;
+			const children = layerItems.value.find((item) => item.value === value)?.children ?? [];
+			submenuHighlight.value = listDropdownLayerItems(children).find((item) => !item.disabled)?.value ?? "";
+			nextTick(() => placeSubmenu());
+		}
+		function onItemEnter(item) {
+			if (openSubmenuValue.value) {
+				submenuHighlight.value = item.value;
+				return;
+			}
+			highlightedValue.value = item.value;
+			if (hasDropdownChildren(item)) {
+				clearSubmenuCloseTimer();
+				scheduleSubmenuOpen(item.value);
+				return;
+			}
+			scheduleSubmenuClose();
+		}
+		function exposeOpen() {
+			if (props.disabled) return;
+			setOpen(true);
+		}
+		function exposeClose() {
+			setOpen(false);
+		}
+		function focus() {
+			resolveTriggerControl()?.focus();
+		}
+		function blur() {
+			resolveTriggerControl()?.blur();
+		}
+		__expose({
+			open: exposeOpen,
+			close: exposeClose,
+			focus,
+			blur
+		});
+		function resolveTriggerControl() {
+			const host = triggerRef.value;
+			if (!host) return null;
+			if (host.matches("button, [href], [role=\"button\"]")) return host;
+			return host.querySelector("button, [href], [role=\"button\"]") ?? host;
+		}
+		function syncTriggerAria() {
+			if (!triggerRef.value) return;
+			if (!hasTriggerSlot.value) return;
+			const control = resolveTriggerControl();
+			if (!control) return;
+			control.setAttribute("aria-haspopup", "menu");
+			control.setAttribute("aria-expanded", open.value ? "true" : "false");
+			control.setAttribute("aria-controls", menuId);
+			if (props.disabled) control.setAttribute("aria-disabled", "true");
+			else control.removeAttribute("aria-disabled");
+		}
+		function onTriggerClick(event) {
+			if (props.disabled) {
+				event.preventDefault();
+				return;
 			}
+			if (!hasClick.value) return;
+			if (hasHover.value && open.value) return;
+			setOpen(!open.value);
+		}
+		function onTriggerContextMenu(event) {
+			if (props.disabled || !hasContext.value) return;
+			event.preventDefault();
+			setOpen(true);
+		}
+		function onTriggerKeydown(event) {
+			if (props.disabled || event.isComposing) return;
+			if (event.key === "Escape" && open.value) {
+				event.preventDefault();
+				setOpen(false);
+				return;
+			}
+			if (open.value) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				setOpen(true);
+			}
+		}
+		function onTriggerEnter() {
+			if (props.disabled || !hasHover.value) return;
+			clearHoverCloseTimer();
+			scheduleHoverOpen();
+		}
+		function onTriggerLeave() {
+			if (!hasHover.value) return;
+			scheduleHoverClose();
+		}
+		function onPanelEnter() {
+			if (hasHover.value) clearHoverCloseTimer();
+			clearSubmenuCloseTimer();
+		}
+		function onPanelLeave() {
+			if (hasHover.value) scheduleHoverClose();
+			scheduleSubmenuClose();
+		}
+		function syncPanelTheme() {
+			const el = triggerRef.value ?? rootRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const content = contentRef.value;
+			if (!trigger || !open.value || typeof window === "undefined") return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = content?.getBoundingClientRect();
+			const minFit = 10.5 * 16;
+			const prefWidth = props.contentWidth === "trigger" ? Math.max(anchor.width, measured?.width || anchor.width) : Math.max(measured?.width || minFit, minFit);
+			popup.value = placeDropdownPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height: measured?.height || 0
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, props.placement, isRtl.value, 4);
+			if (openSubmenuValue.value) placeSubmenu();
+		}
+		function placeSubmenu() {
+			const parent = contentRef.value?.querySelector(`.rs-dropdown__item[data-dropdown-value="${escapeDropdownSelector(openSubmenuValue.value)}"]`);
+			const flyout = submenuRef.value;
+			if (!parent || !flyout || typeof window === "undefined") return;
+			const anchor = parent.getBoundingClientRect();
+			const measured = flyout.getBoundingClientRect();
+			submenuBox.value = placeSidePopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: measured.width || 168,
+				height: measured.height || 80
+			}, {
+				width: window.innerWidth,
+				height: window.innerHeight
+			}, 4, isRtl.value ? "left" : "right");
 		}
+		let frame = 0;
+		let overlayBound = false;
+		let openWatchReady = false;
+		let panelResize;
+		let hoverOpenTimer;
+		let hoverCloseTimer;
+		let submenuOpenTimer;
+		let submenuCloseTimer;
+		let typeaheadTimer;
+		let typeaheadQuery = "";
+		let restoreFocus = false;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function clearHoverOpenTimer() {
+			if (hoverOpenTimer) {
+				clearTimeout(hoverOpenTimer);
+				hoverOpenTimer = void 0;
+			}
+		}
+		function clearHoverCloseTimer() {
+			if (hoverCloseTimer) {
+				clearTimeout(hoverCloseTimer);
+				hoverCloseTimer = void 0;
+			}
+		}
+		function clearSubmenuOpenTimer() {
+			if (submenuOpenTimer) {
+				clearTimeout(submenuOpenTimer);
+				submenuOpenTimer = void 0;
+			}
+		}
+		function clearSubmenuCloseTimer() {
+			if (submenuCloseTimer) {
+				clearTimeout(submenuCloseTimer);
+				submenuCloseTimer = void 0;
+			}
+		}
+		function clearTypeahead() {
+			typeaheadQuery = "";
+			if (typeaheadTimer) {
+				clearTimeout(typeaheadTimer);
+				typeaheadTimer = void 0;
+			}
+		}
+		function scheduleHoverOpen() {
+			clearHoverOpenTimer();
+			hoverOpenTimer = setTimeout(() => {
+				hoverOpenTimer = void 0;
+				setOpen(true);
+			}, 100);
+		}
+		function scheduleHoverClose() {
+			clearHoverCloseTimer();
+			hoverCloseTimer = setTimeout(() => {
+				hoverCloseTimer = void 0;
+				setOpen(false);
+			}, 200);
+		}
+		function scheduleSubmenuOpen(value) {
+			clearSubmenuOpenTimer();
+			submenuOpenTimer = setTimeout(() => {
+				submenuOpenTimer = void 0;
+				onOpenSubmenu(value);
+			}, 150);
+		}
+		function scheduleSubmenuClose() {
+			clearSubmenuOpenTimer();
+			clearSubmenuCloseTimer();
+			submenuCloseTimer = setTimeout(() => {
+				submenuCloseTimer = void 0;
+				openSubmenuValue.value = "";
+				submenuHighlight.value = "";
+			}, 200);
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (rootRef.value?.contains(target)) return;
+			if (contentRef.value?.contains(target)) return;
+			if (submenuRef.value?.contains(target)) return;
+			setOpen(false);
+		}
+		function onWindowChange() {
+			if (!open.value) return;
+			requestPlace();
+		}
+		function attachPanelObserver() {
+			if (typeof ResizeObserver === "undefined") return;
+			panelResize?.disconnect();
+			if (!contentRef.value) return;
+			panelResize = new ResizeObserver(() => requestPlace());
+			panelResize.observe(contentRef.value);
+			if (submenuRef.value) panelResize.observe(submenuRef.value);
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			if (typeof document !== "undefined") {
+				document.addEventListener("pointerdown", onDocPointerDown);
+				document.addEventListener("keydown", onDocTypeahead, true);
+			}
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			panelResize?.disconnect();
+			panelResize = void 0;
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") {
+				document.removeEventListener("pointerdown", onDocPointerDown);
+				document.removeEventListener("keydown", onDocTypeahead, true);
+			}
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		function focusHighlighted() {
+			const root = openSubmenuValue.value ? submenuRef.value : contentRef.value;
+			const value = activeHighlight.value;
+			(value ? root?.querySelector(`.rs-dropdown__item[data-dropdown-value="${escapeDropdownSelector(value)}"]`) : root?.querySelector(".rs-dropdown__item:not([data-disabled])"))?.focus();
+		}
+		function moveHighlight(delta) {
+			const items = activeLayerItems.value;
+			if (!items.length) return;
+			const value = items[stepEnabledIndex(items, items.findIndex((item) => item.value === activeHighlight.value), delta)]?.value;
+			if (!value) return;
+			if (openSubmenuValue.value) submenuHighlight.value = value;
+			else highlightedValue.value = value;
+			nextTick(() => focusHighlighted());
+		}
+		function jumpHighlight(edge) {
+			const enabled = activeLayerItems.value.filter((item) => !item.disabled);
+			const target = edge === "start" ? enabled[0] : enabled[enabled.length - 1];
+			if (!target) return;
+			if (openSubmenuValue.value) submenuHighlight.value = target.value;
+			else highlightedValue.value = target.value;
+			nextTick(() => focusHighlighted());
+		}
+		function activateHighlighted() {
+			const current = activeLayerItems.value.find((item) => item.value === activeHighlight.value);
+			if (!current || current.disabled) return;
+			if (hasDropdownChildren(current)) {
+				onOpenSubmenu(current.value);
+				nextTick(() => focusHighlighted());
+				return;
+			}
+			commitSelect(current.value);
+		}
+		function closeSubmenuLayer() {
+			openSubmenuValue.value = "";
+			submenuHighlight.value = "";
+			nextTick(() => focusHighlighted());
+		}
+		function handleEscape() {
+			if (openSubmenuValue.value) {
+				closeSubmenuLayer();
+				return;
+			}
+			setOpen(false);
+		}
+		function handleOpenSubmenuKey() {
+			const current = layerItems.value.find((item) => item.value === highlightedValue.value);
+			if (!current || !hasDropdownChildren(current)) return;
+			onOpenSubmenu(current.value);
+			nextTick(() => focusHighlighted());
+		}
+		function onMenuKeydown(event) {
+			if (!open.value || event.isComposing) return;
+			const keys = resolveDropdownMenuKeys(isRtl.value);
+			const action = (/* @__PURE__ */ new Map([
+				["Escape", handleEscape],
+				["Tab", () => setOpen(false)],
+				[keys.next, () => moveHighlight(1)],
+				[keys.prev, () => moveHighlight(-1)],
+				["Home", () => jumpHighlight("start")],
+				["End", () => jumpHighlight("end")],
+				[keys.openSub, handleOpenSubmenuKey],
+				[keys.closeSub, () => {
+					if (openSubmenuValue.value) closeSubmenuLayer();
+				}],
+				["Enter", activateHighlighted],
+				[" ", activateHighlighted]
+			])).get(event.key);
+			if (!action) return;
+			if (event.key !== "Tab") event.preventDefault();
+			action();
+		}
+		function onDocTypeahead(event) {
+			if (!open.value || event.isComposing || event.metaKey || event.ctrlKey || event.altKey) return;
+			if (event.key.length !== 1 || event.key === " ") return;
+			const target = event.target;
+			if (target instanceof Node) {
+				if (!contentRef.value?.contains(target) && !submenuRef.value?.contains(target)) return;
+			}
+			typeaheadQuery += event.key;
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadQuery = "";
+				typeaheadTimer = void 0;
+			}, 500);
+			const items = activeLayerItems.value;
+			const current = items.findIndex((item) => item.value === activeHighlight.value);
+			const next = matchDropdownTypeahead(items, typeaheadQuery, current);
+			if (next < 0) return;
+			const value = items[next]?.value;
+			if (!value) return;
+			if (openSubmenuValue.value) submenuHighlight.value = value;
+			else highlightedValue.value = value;
+			nextTick(() => focusHighlighted());
+		}
+		function resetLayerState() {
+			openSubmenuValue.value = "";
+			submenuHighlight.value = "";
+			highlightedValue.value = pickInitialHighlight();
+			clearTypeahead();
+		}
+		watch(open, (isOpen) => {
+			const skipEvent = !openWatchReady;
+			openWatchReady = true;
+			if (typeof document === "undefined" || typeof window === "undefined") return;
+			if (isOpen) {
+				if (props.disabled) {
+					open.value = false;
+					return;
+				}
+				restoreFocus = document.activeElement instanceof HTMLElement;
+				syncPanelTheme();
+				resetLayerState();
+				attachOverlay();
+				nextTick(() => {
+					placePopup();
+					attachPanelObserver();
+					focusHighlighted();
+					syncTriggerAria();
+				});
+				if (!skipEvent) emit("openChange", true);
+				return;
+			}
+			detachOverlay();
+			openSubmenuValue.value = "";
+			submenuHighlight.value = "";
+			clearHoverOpenTimer();
+			clearSubmenuOpenTimer();
+			clearSubmenuCloseTimer();
+			clearTypeahead();
+			syncTriggerAria();
+			if (restoreFocus) {
+				restoreFocus = false;
+				resolveTriggerControl()?.focus();
+			}
+			if (!skipEvent) emit("openChange", false);
+		}, { immediate: true });
+		watch(() => [props.items, model.value], () => {
+			if (!open.value) return;
+			if (!activeLayerItems.value.some((item) => item.value === activeHighlight.value)) resetLayerState();
+		});
+		watch(() => [
+			open.value,
+			hasTriggerSlot.value,
+			props.disabled
+		], () => syncTriggerAria());
+		onUnmounted(() => {
+			detachOverlay();
+			clearHoverOpenTimer();
+			clearHoverCloseTimer();
+			clearSubmenuOpenTimer();
+			clearSubmenuCloseTimer();
+			clearTypeahead();
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DropdownMenuRoot), { class: normalizeClass(["rs-dropdown", { "rs-dropdown--action": !__props.showSelected || Boolean(_ctx.$slots.trigger) }]) }, {
-				default: withCtx(() => [_ctx.$slots.trigger ? (openBlock(), createBlock(unref(DropdownMenuTrigger), {
-					key: 0,
-					class: "rs-dropdown__trigger-slot",
-					disabled: __props.disabled,
-					"as-child": ""
-				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
-					_: 3
-				}, 8, ["disabled"])) : (openBlock(), createBlock(unref(DropdownMenuTrigger), {
-					key: 1,
-					class: "rs-dropdown__trigger",
-					disabled: __props.disabled
-				}, {
-					default: withCtx(() => [createElementVNode("span", _hoisted_1, [createElementVNode("span", { class: normalizeClass(["rs-dropdown__label", { "rs-dropdown__label--placeholder": isPlaceholderDisplay.value }]) }, toDisplayString(displayLabel.value), 3)]), createVNode(RsIcon_default, {
-						name: "chevron-down",
-						size: 16,
-						class: "rs-dropdown__icon"
-					})]),
-					_: 1
-				}, 8, ["disabled"])), createVNode(unref(DropdownMenuPortal), null, {
-					default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
-						class: normalizeClass(["rs-dropdown__content", [`rs-dropdown__content--${__props.size}`, `rs-dropdown__content--${__props.contentWidth}`]]),
-						"side-offset": 4
-					}, {
-						default: withCtx(() => [__props.showSelected ? (openBlock(), createBlock(unref(DropdownMenuRadioGroup), {
-							key: 0,
-							modelValue: model.value,
-							"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => model.value = $event), onSelect]
-						}, {
-							default: withCtx(() => [createVNode(RsDropdownItems_default, {
-								items: __props.items,
-								size: __props.size,
-								selectable: ""
-							}, null, 8, ["items", "size"])]),
-							_: 1
-						}, 8, ["modelValue"])) : (openBlock(), createBlock(RsDropdownItems_default, {
-							key: 1,
-							items: __props.items,
-							size: __props.size,
-							onSelect
-						}, null, 8, ["items", "size"]))]),
-						_: 1
-					}, 8, ["class"])]),
-					_: 1
-				})]),
-				_: 3
-			}, 8, ["class"]);
+			return openBlock(), createElementBlock("div", {
+				id: __props.id,
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-dropdown", rootClass.value]),
+				style: normalizeStyle(rootStyle.value)
+			}, [hasTriggerSlot.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				ref_key: "triggerRef",
+				ref: triggerRef,
+				class: "rs-dropdown__trigger-slot",
+				"data-disabled": __props.disabled ? "" : void 0,
+				onClick: onTriggerClick,
+				onContextmenu: onTriggerContextMenu,
+				onKeydown: onTriggerKeydown,
+				onMouseenter: onTriggerEnter,
+				onMouseleave: onTriggerLeave
+			}, [renderSlot(_ctx.$slots, "trigger")], 40, _hoisted_2)) : (openBlock(), createElementBlock("button", {
+				key: 1,
+				ref_key: "triggerRef",
+				ref: triggerRef,
+				type: "button",
+				class: "rs-dropdown__trigger",
+				disabled: __props.disabled,
+				"aria-haspopup": "menu",
+				"aria-expanded": open.value,
+				"aria-controls": unref(menuId),
+				"aria-label": __props.showSelected ? void 0 : resolvedPlaceholder.value,
+				onClick: onTriggerClick,
+				onContextmenu: onTriggerContextMenu,
+				onKeydown: onTriggerKeydown,
+				onMouseenter: onTriggerEnter,
+				onMouseleave: onTriggerLeave
+			}, [createElementVNode("span", _hoisted_4, [createElementVNode("span", { class: normalizeClass(["rs-dropdown__label", { "rs-dropdown__label--placeholder": isPlaceholderDisplay.value }]) }, toDisplayString(displayLabel.value), 3)]), createVNode(RsIcon_default, {
+				name: "chevron-down",
+				size: iconSize.value,
+				class: "rs-dropdown__icon",
+				"aria-hidden": "true"
+			}, null, 8, ["size"])], 40, _hoisted_3)), showPanel.value ? (openBlock(), createBlock(Teleport, {
+				key: 2,
+				to: portalTarget.value
+			}, [withDirectives(createElementVNode("div", {
+				id: unref(menuId),
+				ref_key: "contentRef",
+				ref: contentRef,
+				class: normalizeClass(["rs-dropdown__content", [
+					`rs-dropdown__content--${unref(resolvedSize)}`,
+					`rs-dropdown__content--${__props.contentWidth}`,
+					__props.popupClassName
+				]]),
+				style: normalizeStyle(panelStyle.value),
+				"data-rs-theme": panelTheme.value,
+				"data-placement": popup.value.placement,
+				role: "menu",
+				"aria-label": menuLabel.value,
+				onKeydown: onMenuKeydown,
+				onMouseenter: onPanelEnter,
+				onMouseleave: onPanelLeave
+			}, [createVNode(RsDropdownItems_default, {
+				items: __props.items,
+				selectable: __props.showSelected,
+				size: unref(resolvedSize),
+				"selected-value": model.value,
+				"highlighted-value": highlightedValue.value,
+				"open-submenu-value": openSubmenuValue.value,
+				onSelect: onItemSelect,
+				onHighlight,
+				onOpenSubmenu,
+				onItemEnter
+			}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
+				name: "item",
+				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"items",
+				"selectable",
+				"size",
+				"selected-value",
+				"highlighted-value",
+				"open-submenu-value"
+			])], 46, _hoisted_5), [[vShow, open.value]]), open.value && submenuItem.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "submenuRef",
+				ref: submenuRef,
+				class: normalizeClass(["rs-dropdown__content rs-dropdown__submenu", [
+					`rs-dropdown__content--${unref(resolvedSize)}`,
+					`rs-dropdown__content--fit`,
+					__props.popupClassName
+				]]),
+				style: normalizeStyle(submenuStyle.value),
+				"data-rs-theme": panelTheme.value,
+				"data-placement": submenuBox.value.placement,
+				role: "menu",
+				"aria-label": submenuItem.value.label,
+				onKeydown: onMenuKeydown,
+				onMouseenter: onPanelEnter,
+				onMouseleave: onPanelLeave
+			}, [createVNode(RsDropdownItems_default, {
+				items: submenuItems.value,
+				selectable: __props.showSelected,
+				size: unref(resolvedSize),
+				"selected-value": model.value,
+				"highlighted-value": submenuHighlight.value,
+				onSelect: onItemSelect,
+				onHighlight,
+				onItemEnter
+			}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
+				name: "item",
+				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"items",
+				"selectable",
+				"size",
+				"selected-value",
+				"highlighted-value"
+			])], 46, _hoisted_6)) : createCommentVNode("", true)], 8, ["to"])) : createCommentVNode("", true)], 14, _hoisted_1);
 		};
 	}
 });