@acusti/dropdown 1.0.0-rc.4 → 1.0.0

package/dist/Dropdown.js

@@ -1,7 +1,7 @@
 import { c } from "react/compiler-runtime";
 import useKeyboardEvents, { NON_TEXT_INPUT_TYPES, isEventTargetUsingKeyEvent } from "@acusti/use-keyboard-events";
 import clsx from "clsx";
-import { Children, Fragment, cloneElement, createContext, isValidElement, useContext, useEffect, useId, useLayoutEffect, useReducer, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { getBestMatch } from "@acusti/matchmaking";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/context.ts
@@ -569,7 +569,7 @@ function Dropdown(props) {
 	return t0;
 }
 function RootDropdown(t0) {
-	const $ = c(190);
+	const $ = c(193);
 	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, itemAs: itemElementName, keepOpenOnSubmit: t3, label, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, openOnHover, placeholder, style: styleFromProps, tabIndex, value } = t0;
 	const allowEmpty = t1 === void 0 ? true : t1;
 	const hasItems = t2 === void 0 ? true : t2;
@@ -592,7 +592,6 @@ function RootDropdown(t0) {
 	} else t4 = $[4];
 	const valueLabel = t4;
 	const [isOpen, setIsOpen] = useState(isOpenOnMount ?? false);
-	const [isOpening, setIsOpening] = useState(!isOpenOnMount);
 	const [dropdownElement, setDropdownElement] = useState(null);
 	const bodyId = useId();
 	const triggerId = `${bodyId}-trigger`;
@@ -611,6 +610,7 @@ function RootDropdown(t0) {
 	} else t5 = $[5];
 	const annotatedElementsRef = useRef(t5);
 	const closingTimerRef = useRef(null);
+	const isOpeningRef = useRef(false);
 	const isOpeningTimerRef = useRef(null);
 	const currentInputMethodRef = useRef("mouse");
 	const clearEnteredCharactersTimerRef = useRef(null);
@@ -631,71 +631,65 @@ function RootDropdown(t0) {
 	const wasInSafeAreaRef = useRef(false);
 	const hoverCloseTimerRef = useRef(null);
 	const isOpenRef = useRef(isOpen);
-	const isOpeningRef = useRef(isOpening);
-	const onCloseRef = useRef(onClose);
-	const onOpenRef = useRef(onOpen);
 	let t7;
 	let t8;
-	if ($[7] !== isOpen || $[8] !== isOpening || $[9] !== onClose || $[10] !== onOpen) {
+	if ($[7] !== isOpen) {
 		t7 = () => {
 			isOpenRef.current = isOpen;
-			isOpeningRef.current = isOpening;
-			onCloseRef.current = onClose;
-			onOpenRef.current = onOpen;
 		};
-		t8 = [
-			isOpen,
-			isOpening,
-			onClose,
-			onOpen
-		];
+		t8 = [isOpen];
 		$[7] = isOpen;
-		$[8] = isOpening;
-		$[9] = onClose;
-		$[10] = onOpen;
-		$[11] = t7;
-		$[12] = t8;
+		$[8] = t7;
+		$[9] = t8;
 	} else {
-		t7 = $[11];
-		t8 = $[12];
+		t7 = $[8];
+		t8 = $[9];
 	}
-	useEffect(t7, t8);
+	useLayoutEffect(t7, t8);
 	let t9;
-	if ($[13] !== dropdownElement || $[14] !== isOpen) {
+	if ($[10] !== dropdownElement || $[11] !== isOpen) {
 		t9 = () => {
 			if (isOpen) syncActiveDescendant(dropdownElement);
 		};
-		$[13] = dropdownElement;
-		$[14] = isOpen;
-		$[15] = t9;
-	} else t9 = $[15];
+		$[10] = dropdownElement;
+		$[11] = isOpen;
+		$[12] = t9;
+	} else t9 = $[12];
 	useLayoutEffect(t9);
 	useWarnOnce(itemElementName === void 0 ? null : "itemAs only applies to a submenu Dropdown (one nested in a dropdown where hasItems is true) and is ignored anywhere else.");
-	const isMountedRef = useRef(false);
 	let t10;
+	if ($[13] !== onClose || $[14] !== onOpen) {
+		t10 = (nextIsOpen) => {
+			if (nextIsOpen) onOpen?.();
+			else onClose?.();
+		};
+		$[13] = onClose;
+		$[14] = onOpen;
+		$[15] = t10;
+	} else t10 = $[15];
+	const handleOpenChange = useEffectEvent(t10);
+	const reportedIsOpenRef = useRef(false);
 	let t11;
-	if ($[16] !== isOpen) {
-		t10 = () => {
-			if (!isMountedRef.current) {
-				isMountedRef.current = true;
-				if (isOpenRef.current && onOpenRef.current) onOpenRef.current();
-				return;
-			}
-			if (isOpen && onOpenRef.current) onOpenRef.current();
-			else if (!isOpen && onCloseRef.current) onCloseRef.current();
+	if ($[16] !== handleOpenChange || $[17] !== isOpen) {
+		t11 = () => {
+			if (reportedIsOpenRef.current === isOpen) return;
+			reportedIsOpenRef.current = isOpen;
+			handleOpenChange(isOpen);
 		};
-		t11 = [isOpen];
-		$[16] = isOpen;
-		$[17] = t10;
+		$[16] = handleOpenChange;
+		$[17] = isOpen;
 		$[18] = t11;
-	} else {
-		t10 = $[17];
-		t11 = $[18];
-	}
-	useEffect(t10, t11);
+	} else t11 = $[18];
 	let t12;
-	if ($[19] !== popupRole) {
-		t12 = { registerSubmenu(registration) {
+	if ($[19] !== isOpen) {
+		t12 = [isOpen];
+		$[19] = isOpen;
+		$[20] = t12;
+	} else t12 = $[20];
+	useEffect(t11, t12);
+	let t13;
+	if ($[21] !== popupRole) {
+		t13 = { registerSubmenu(registration) {
 			submenuRegistrationsRef.current.add(registration);
 			const { element } = registration;
 			if (!annotatedElementsRef.current.has(element)) {
@@ -707,32 +701,32 @@ function RootDropdown(t0) {
 				submenuRegistrationsRef.current.delete(registration);
 			};
 		} };
-		$[19] = popupRole;
-		$[20] = t12;
-	} else t12 = $[20];
-	const dropdownContextValue = t12;
-	let t13;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = (key, payload) => {
+		$[21] = popupRole;
+		$[22] = t13;
+	} else t13 = $[22];
+	const dropdownContextValue = t13;
+	let t14;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (key, payload) => {
 			if (!payload.element) return;
 			for (const registration_0 of submenuRegistrationsRef.current) if (registration_0.element.contains(payload.element)) registration_0[key]?.(payload);
 		};
-		$[21] = t13;
-	} else t13 = $[21];
-	const dispatchToSubmenus = t13;
-	let t14;
-	if ($[22] !== onActiveItem) {
-		t14 = (payload_0) => {
-			onActiveItem?.(payload_0);
-			dispatchToSubmenus("onActiveItem", payload_0);
-		};
-		$[22] = onActiveItem;
 		$[23] = t14;
 	} else t14 = $[23];
-	const handleActiveItem = t14;
+	const dispatchToSubmenus = t14;
 	let t15;
-	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = (item, isExpanded) => {
+	if ($[24] !== onActiveItem) {
+		t15 = (payload_0) => {
+			onActiveItem?.(payload_0);
+			dispatchToSubmenus("onActiveItem", payload_0);
+		};
+		$[24] = onActiveItem;
+		$[25] = t15;
+	} else t15 = $[25];
+	const handleActiveItem = t15;
+	let t16;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = (item, isExpanded) => {
 			const submenu = getSubmenuOfItem(item);
 			if (submenu) {
 				const isShown = submenu.matches(":popover-open");
@@ -741,36 +735,36 @@ function RootDropdown(t0) {
 			}
 			for (const registration_1 of submenuRegistrationsRef.current) if (registration_1.element === item) (isExpanded ? registration_1.onOpen : registration_1.onClose)?.();
 		};
-		$[24] = t15;
-	} else t15 = $[24];
-	const handleToggleSubmenu = t15;
-	let t16;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = () => {
+		$[26] = t16;
+	} else t16 = $[26];
+	const handleToggleSubmenu = t16;
+	let t17;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = () => {
 			if (disclosureTimerRef.current != null) {
 				clearTimeout(disclosureTimerRef.current);
 				disclosureTimerRef.current = null;
 			}
 			pendingDisclosureItemRef.current = null;
 		};
-		$[25] = t16;
-	} else t16 = $[25];
-	const clearDisclosureTimer = t16;
-	let t17;
+		$[27] = t17;
+	} else t17 = $[27];
+	const clearDisclosureTimer = t17;
 	let t18;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = () => clearDisclosureTimer;
-		t18 = [];
-		$[26] = t17;
-		$[27] = t18;
+	let t19;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = () => clearDisclosureTimer;
+		t19 = [];
+		$[28] = t18;
+		$[29] = t19;
 	} else {
-		t17 = $[26];
-		t18 = $[27];
+		t18 = $[28];
+		t19 = $[29];
 	}
-	useEffect(t17, t18);
-	let t19;
-	if ($[28] !== dropdownElement) {
-		t19 = () => {
+	useEffect(t18, t19);
+	let t20;
+	if ($[30] !== dropdownElement) {
+		t20 = () => {
 			if (!dropdownElement) return;
 			const activeElement = getActiveItemElement(dropdownElement);
 			collapseItemsOutsidePath(dropdownElement, activeElement, handleToggleSubmenu);
@@ -789,36 +783,36 @@ function RootDropdown(t0) {
 			}
 			clearDisclosureTimer();
 		};
-		$[28] = dropdownElement;
-		$[29] = t19;
-	} else t19 = $[29];
-	const syncSubmenuDisclosure = t19;
-	let t20;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t20 = () => {
+		$[30] = dropdownElement;
+		$[31] = t20;
+	} else t20 = $[31];
+	const syncSubmenuDisclosure = t20;
+	let t21;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = () => {
 			if (safeAreaTimerRef.current != null) {
 				clearTimeout(safeAreaTimerRef.current);
 				safeAreaTimerRef.current = null;
 			}
 		};
-		$[30] = t20;
-	} else t20 = $[30];
-	const clearSafeAreaTimer = t20;
-	let t21;
+		$[32] = t21;
+	} else t21 = $[32];
+	const clearSafeAreaTimer = t21;
 	let t22;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = () => clearSafeAreaTimer;
-		t22 = [];
-		$[31] = t21;
-		$[32] = t22;
-	} else {
-		t21 = $[31];
-		t22 = $[32];
-	}
-	useEffect(t21, t22);
 	let t23;
 	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-		t23 = (x, y) => {
+		t22 = () => clearSafeAreaTimer;
+		t23 = [];
+		$[33] = t22;
+		$[34] = t23;
+	} else {
+		t22 = $[33];
+		t23 = $[34];
+	}
+	useEffect(t22, t23);
+	let t24;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = (x, y) => {
 			const safeArea = safeAreaRef.current;
 			if (!safeArea || !isItemExpanded(safeArea.parent)) return false;
 			const submenu_1 = getSubmenuOfItem(safeArea.parent);
@@ -837,12 +831,12 @@ function RootDropdown(t0) {
 				y: submenuRect.bottom
 			});
 		};
-		$[33] = t23;
-	} else t23 = $[33];
-	const isPointerInSafeArea = t23;
-	let t24;
-	if ($[34] !== dropdownElement || $[35] !== handleActiveItem || $[36] !== syncSubmenuDisclosure) {
-		t24 = (targetElement) => {
+		$[35] = t24;
+	} else t24 = $[35];
+	const isPointerInSafeArea = t24;
+	let t25;
+	if ($[36] !== dropdownElement || $[37] !== handleActiveItem || $[38] !== syncSubmenuDisclosure) {
+		t25 = (targetElement) => {
 			clearSafeAreaTimer();
 			safeAreaRef.current = null;
 			wasInSafeAreaRef.current = false;
@@ -859,15 +853,15 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[34] = dropdownElement;
-		$[35] = handleActiveItem;
-		$[36] = syncSubmenuDisclosure;
-		$[37] = t24;
-	} else t24 = $[37];
-	const commitPointerTarget = t24;
-	let t25;
-	if ($[38] !== commitPointerTarget || $[39] !== dropdownElement || $[40] !== hasItems) {
-		t25 = (event_0) => {
+		$[36] = dropdownElement;
+		$[37] = handleActiveItem;
+		$[38] = syncSubmenuDisclosure;
+		$[39] = t25;
+	} else t25 = $[39];
+	const commitPointerTarget = t25;
+	let t26;
+	if ($[40] !== commitPointerTarget || $[41] !== dropdownElement || $[42] !== hasItems) {
+		t26 = (event_0) => {
 			if (!dropdownElement || !isOpenRef.current || !hasItems) return;
 			const pointer_0 = {
 				x: event_0.clientX,
@@ -900,41 +894,53 @@ function RootDropdown(t0) {
 				safeAreaTimerRef.current = setTimeout(commitPointerTarget, SAFE_AREA_TIMEOUT);
 			} else if (wasInSafeAreaRef.current) commitPointerTarget(target_0);
 		};
-		$[38] = commitPointerTarget;
-		$[39] = dropdownElement;
-		$[40] = hasItems;
-		$[41] = t25;
-	} else t25 = $[41];
-	const trackSafeArea = t25;
-	let t26;
-	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-		t26 = () => {
+		$[40] = commitPointerTarget;
+		$[41] = dropdownElement;
+		$[42] = hasItems;
+		$[43] = t26;
+	} else t26 = $[43];
+	const trackSafeArea = t26;
+	let t27;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = () => {
 			if (hoverCloseTimerRef.current != null) {
 				clearTimeout(hoverCloseTimerRef.current);
 				hoverCloseTimerRef.current = null;
 			}
 		};
-		$[42] = t26;
-	} else t26 = $[42];
-	const clearHoverCloseTimer = t26;
-	let t27;
+		$[44] = t27;
+	} else t27 = $[44];
+	const clearHoverCloseTimer = t27;
 	let t28;
-	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
-		t27 = () => clearHoverCloseTimer;
-		t28 = [];
-		$[43] = t27;
-		$[44] = t28;
+	let t29;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = () => clearHoverCloseTimer;
+		t29 = [];
+		$[45] = t28;
+		$[46] = t29;
 	} else {
-		t27 = $[43];
-		t28 = $[44];
+		t28 = $[45];
+		t29 = $[46];
 	}
-	useEffect(t27, t28);
-	let t29;
-	if ($[45] !== dropdownElement || $[46] !== menubar) {
-		t29 = (options) => {
+	useEffect(t28, t29);
+	let t30;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t30 = () => {
+			isOpeningRef.current = false;
+			if (isOpeningTimerRef.current != null) {
+				clearTimeout(isOpeningTimerRef.current);
+				isOpeningTimerRef.current = null;
+			}
+		};
+		$[47] = t30;
+	} else t30 = $[47];
+	const endOpeningPress = t30;
+	let t31;
+	if ($[48] !== dropdownElement || $[49] !== menubar) {
+		t31 = (options) => {
 			getTriggerElement(dropdownElement)?.removeAttribute("aria-activedescendant");
 			setIsOpen(false);
-			setIsOpening(false);
+			endOpeningPress();
 			mouseDownPositionRef.current = null;
 			clearDisclosureTimer();
 			clearSafeAreaTimer();
@@ -947,50 +953,50 @@ function RootDropdown(t0) {
 			}
 			if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
 		};
-		$[45] = dropdownElement;
-		$[46] = menubar;
-		$[47] = t29;
-	} else t29 = $[47];
-	const closeDropdown = t29;
-	let t30;
-	if ($[48] !== disabled || $[49] !== openOnHover) {
-		t30 = () => {
+		$[48] = dropdownElement;
+		$[49] = menubar;
+		$[50] = t31;
+	} else t31 = $[50];
+	const closeDropdown = t31;
+	let t32;
+	if ($[51] !== disabled || $[52] !== openOnHover) {
+		t32 = () => {
 			clearHoverCloseTimer();
 			if (disabled || !openOnHover || isOpenRef.current) return;
 			setIsOpen(true);
-			setIsOpening(false);
+			endOpeningPress();
 		};
-		$[48] = disabled;
-		$[49] = openOnHover;
-		$[50] = t30;
-	} else t30 = $[50];
-	const handleDropdownMouseEnter = t30;
-	let t31;
-	if ($[51] !== closeDropdown || $[52] !== openOnHover) {
-		t31 = () => {
+		$[51] = disabled;
+		$[52] = openOnHover;
+		$[53] = t32;
+	} else t32 = $[53];
+	const handleDropdownMouseEnter = t32;
+	let t33;
+	if ($[54] !== closeDropdown || $[55] !== openOnHover) {
+		t33 = () => {
 			if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
 			hoverCloseTimerRef.current = setTimeout(() => {
 				hoverCloseTimerRef.current = null;
 				closeDropdown();
 			}, HOVER_CLOSE_DELAY);
 		};
-		$[51] = closeDropdown;
-		$[52] = openOnHover;
-		$[53] = t31;
-	} else t31 = $[53];
-	const handleDropdownMouseLeave = t31;
-	let t32;
-	if ($[54] !== dropdownElement) {
-		t32 = () => {
+		$[54] = closeDropdown;
+		$[55] = openOnHover;
+		$[56] = t33;
+	} else t33 = $[56];
+	const handleDropdownMouseLeave = t33;
+	let t34;
+	if ($[57] !== dropdownElement) {
+		t34 = () => {
 			getTriggerElement(dropdownElement)?.focus();
 		};
-		$[54] = dropdownElement;
-		$[55] = t32;
-	} else t32 = $[55];
-	const focusTrigger = t32;
-	let t33;
-	if ($[56] !== closeDropdown || $[57] !== disabled || $[58] !== dropdownElement || $[59] !== focusTrigger || $[60] !== isMenubarItem || $[61] !== menubar) {
-		t33 = () => {
+		$[57] = dropdownElement;
+		$[58] = t34;
+	} else t34 = $[58];
+	const focusTrigger = t34;
+	let t35;
+	if ($[59] !== closeDropdown || $[60] !== disabled || $[61] !== dropdownElement || $[62] !== focusTrigger || $[63] !== isMenubarItem || $[64] !== menubar) {
+		t35 = () => {
 			if (!menubar || !dropdownElement) return;
 			return menubar.registerMember({
 				close: () => closeDropdown({ keepMenubarEngaged: true }),
@@ -1005,39 +1011,39 @@ function RootDropdown(t0) {
 				}
 			});
 		};
-		$[56] = closeDropdown;
-		$[57] = disabled;
-		$[58] = dropdownElement;
-		$[59] = focusTrigger;
-		$[60] = isMenubarItem;
-		$[61] = menubar;
-		$[62] = t33;
-	} else t33 = $[62];
-	useEffect(t33);
-	let t34;
-	let t35;
-	if ($[63] !== dropdownElement || $[64] !== isOpen || $[65] !== menubar) {
-		t34 = () => {
+		$[59] = closeDropdown;
+		$[60] = disabled;
+		$[61] = dropdownElement;
+		$[62] = focusTrigger;
+		$[63] = isMenubarItem;
+		$[64] = menubar;
+		$[65] = t35;
+	} else t35 = $[65];
+	useEffect(t35);
+	let t36;
+	let t37;
+	if ($[66] !== dropdownElement || $[67] !== isOpen || $[68] !== menubar) {
+		t36 = () => {
 			if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
 		};
-		t35 = [
+		t37 = [
 			dropdownElement,
 			isOpen,
 			menubar
 		];
-		$[63] = dropdownElement;
-		$[64] = isOpen;
-		$[65] = menubar;
-		$[66] = t34;
-		$[67] = t35;
+		$[66] = dropdownElement;
+		$[67] = isOpen;
+		$[68] = menubar;
+		$[69] = t36;
+		$[70] = t37;
 	} else {
-		t34 = $[66];
-		t35 = $[67];
+		t36 = $[69];
+		t37 = $[70];
 	}
-	useEffect(t34, t35);
-	let t36;
-	if ($[68] !== allowCreate || $[69] !== allowEmpty || $[70] !== closeDropdown || $[71] !== dropdownElement || $[72] !== handleActiveItem || $[73] !== hasItems || $[74] !== keepOpenOnSubmit || $[75] !== onSubmitItem || $[76] !== popupRole || $[77] !== valueIdentity) {
-		t36 = (event_1) => {
+	useEffect(t36, t37);
+	let t38;
+	if ($[71] !== allowCreate || $[72] !== allowEmpty || $[73] !== closeDropdown || $[74] !== dropdownElement || $[75] !== handleActiveItem || $[76] !== hasItems || $[77] !== keepOpenOnSubmit || $[78] !== onSubmitItem || $[79] !== popupRole || $[80] !== valueIdentity) {
+		t38 = (event_1) => {
 			const element_0 = hasItems ? getActiveItemElement(dropdownElement) : null;
 			const submenuOfActive = element_0 ? getSubmenuOfItem(element_0) : null;
 			if (element_0 && submenuOfActive) {
@@ -1097,37 +1103,37 @@ function RootDropdown(t0) {
 			onSubmitItem?.(payload_1);
 			dispatchToSubmenus("onSubmitItem", payload_1);
 		};
-		$[68] = allowCreate;
-		$[69] = allowEmpty;
-		$[70] = closeDropdown;
-		$[71] = dropdownElement;
-		$[72] = handleActiveItem;
-		$[73] = hasItems;
-		$[74] = keepOpenOnSubmit;
-		$[75] = onSubmitItem;
-		$[76] = popupRole;
-		$[77] = valueIdentity;
-		$[78] = t36;
-	} else t36 = $[78];
-	const handleSubmitItem = t36;
-	let t37;
-	if ($[79] !== trackSafeArea) {
-		t37 = (event_2) => {
+		$[71] = allowCreate;
+		$[72] = allowEmpty;
+		$[73] = closeDropdown;
+		$[74] = dropdownElement;
+		$[75] = handleActiveItem;
+		$[76] = hasItems;
+		$[77] = keepOpenOnSubmit;
+		$[78] = onSubmitItem;
+		$[79] = popupRole;
+		$[80] = valueIdentity;
+		$[81] = t38;
+	} else t38 = $[81];
+	const handleSubmitItem = t38;
+	let t39;
+	if ($[82] !== trackSafeArea) {
+		t39 = (event_2) => {
 			const { clientX, clientY } = event_2;
 			currentInputMethodRef.current = "mouse";
 			trackSafeArea(event_2);
 			const initialPosition = mouseDownPositionRef.current;
 			if (!initialPosition) return;
 			if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
-			setIsOpening(false);
+			endOpeningPress();
 		};
-		$[79] = trackSafeArea;
-		$[80] = t37;
-	} else t37 = $[80];
-	const handleMouseMove = t37;
-	let t38;
-	if ($[81] !== dropdownElement || $[82] !== handleActiveItem || $[83] !== hasItems || $[84] !== syncSubmenuDisclosure) {
-		t38 = (event_3) => {
+		$[82] = trackSafeArea;
+		$[83] = t39;
+	} else t39 = $[83];
+	const handleMouseMove = t39;
+	let t40;
+	if ($[84] !== dropdownElement || $[85] !== handleActiveItem || $[86] !== hasItems || $[87] !== syncSubmenuDisclosure) {
+		t40 = (event_3) => {
 			if (!hasItems) return;
 			if (currentInputMethodRef.current !== "mouse") return;
 			if (!dropdownElement) return;
@@ -1146,16 +1152,16 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[81] = dropdownElement;
-		$[82] = handleActiveItem;
-		$[83] = hasItems;
-		$[84] = syncSubmenuDisclosure;
-		$[85] = t38;
-	} else t38 = $[85];
-	const handleMouseOver = t38;
-	let t39;
-	if ($[86] !== dropdownElement || $[87] !== hasItems || $[88] !== syncSubmenuDisclosure) {
-		t39 = (event_4) => {
+		$[84] = dropdownElement;
+		$[85] = handleActiveItem;
+		$[86] = hasItems;
+		$[87] = syncSubmenuDisclosure;
+		$[88] = t40;
+	} else t40 = $[88];
+	const handleMouseOver = t40;
+	let t41;
+	if ($[89] !== dropdownElement || $[90] !== hasItems || $[91] !== syncSubmenuDisclosure) {
+		t41 = (event_4) => {
 			if (!hasItems) return;
 			const relatedTarget = event_4.relatedTarget;
 			if (!dropdownElement?.contains(relatedTarget)) {
@@ -1171,36 +1177,36 @@ function RootDropdown(t0) {
 			clearActiveItems(dropdownElement, activeItem);
 			syncSubmenuDisclosure();
 		};
-		$[86] = dropdownElement;
-		$[87] = hasItems;
-		$[88] = syncSubmenuDisclosure;
-		$[89] = t39;
-	} else t39 = $[89];
-	const handleMouseOut = t39;
-	let t40;
-	if ($[90] !== disabled || $[91] !== onMouseDown) {
-		t40 = (event_5) => {
+		$[89] = dropdownElement;
+		$[90] = hasItems;
+		$[91] = syncSubmenuDisclosure;
+		$[92] = t41;
+	} else t41 = $[92];
+	const handleMouseOut = t41;
+	let t42;
+	if ($[93] !== disabled || $[94] !== onMouseDown) {
+		t42 = (event_5) => {
 			if (onMouseDown) onMouseDown(event_5);
 			if (disabled || isOpenRef.current) return;
 			setIsOpen(true);
-			setIsOpening(true);
+			isOpeningRef.current = true;
 			mouseDownPositionRef.current = {
 				clientX: event_5.clientX,
 				clientY: event_5.clientY
 			};
 			isOpeningTimerRef.current = setTimeout(() => {
-				setIsOpening(false);
+				isOpeningRef.current = false;
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[90] = disabled;
-		$[91] = onMouseDown;
-		$[92] = t40;
-	} else t40 = $[92];
-	const handleMouseDown = t40;
-	let t41;
-	if ($[93] !== closeDropdown || $[94] !== dropdownElement || $[95] !== handleActiveItem || $[96] !== handleSubmitItem || $[97] !== hasItems || $[98] !== onMouseUp) {
-		t41 = (event_6) => {
+		$[93] = disabled;
+		$[94] = onMouseDown;
+		$[95] = t42;
+	} else t42 = $[95];
+	const handleMouseDown = t42;
+	let t43;
+	if ($[96] !== closeDropdown || $[97] !== dropdownElement || $[98] !== handleActiveItem || $[99] !== handleSubmitItem || $[100] !== hasItems || $[101] !== onMouseUp) {
+		t43 = (event_6) => {
 			if (onMouseUp) onMouseUp(event_6);
 			if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
 			const eventTarget_1 = event_6.target;
@@ -1208,7 +1214,7 @@ function RootDropdown(t0) {
 			if (clickedRoot !== dropdownElement && clickedRoot?.classList.contains("is-open") && dropdownElement?.contains(clickedRoot)) return;
 			const targetBody = eventTarget_1.closest(BODY_SELECTOR);
 			if (!Boolean(targetBody && targetBody.closest(".uktdropdown") === dropdownElement)) {
-				if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
+				if (inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
 				return;
 			}
 			if (!hasItems) return;
@@ -1224,18 +1230,18 @@ function RootDropdown(t0) {
 			}
 			handleSubmitItem(event_6);
 		};
-		$[93] = closeDropdown;
-		$[94] = dropdownElement;
-		$[95] = handleActiveItem;
-		$[96] = handleSubmitItem;
-		$[97] = hasItems;
-		$[98] = onMouseUp;
-		$[99] = t41;
-	} else t41 = $[99];
-	const handleMouseUp = t41;
-	let t42;
-	if ($[100] !== allowCreate || $[101] !== closeDropdown || $[102] !== disabled || $[103] !== dropdownElement || $[104] !== focusTrigger || $[105] !== handleActiveItem || $[106] !== handleSubmitItem || $[107] !== hasItems || $[108] !== menubar || $[109] !== syncSubmenuDisclosure) {
-		t42 = (event_7) => {
+		$[96] = closeDropdown;
+		$[97] = dropdownElement;
+		$[98] = handleActiveItem;
+		$[99] = handleSubmitItem;
+		$[100] = hasItems;
+		$[101] = onMouseUp;
+		$[102] = t43;
+	} else t43 = $[102];
+	const handleMouseUp = t43;
+	let t44;
+	if ($[103] !== allowCreate || $[104] !== closeDropdown || $[105] !== disabled || $[106] !== dropdownElement || $[107] !== focusTrigger || $[108] !== handleActiveItem || $[109] !== handleSubmitItem || $[110] !== hasItems || $[111] !== menubar || $[112] !== syncSubmenuDisclosure) {
+		t44 = (event_7) => {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
@@ -1380,32 +1386,32 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[100] = allowCreate;
-		$[101] = closeDropdown;
-		$[102] = disabled;
-		$[103] = dropdownElement;
-		$[104] = focusTrigger;
-		$[105] = handleActiveItem;
-		$[106] = handleSubmitItem;
-		$[107] = hasItems;
-		$[108] = menubar;
-		$[109] = syncSubmenuDisclosure;
-		$[110] = t42;
-	} else t42 = $[110];
-	const handleKeyDown = t42;
-	let t43;
-	if ($[111] !== handleKeyDown) {
-		t43 = {
+		$[103] = allowCreate;
+		$[104] = closeDropdown;
+		$[105] = disabled;
+		$[106] = dropdownElement;
+		$[107] = focusTrigger;
+		$[108] = handleActiveItem;
+		$[109] = handleSubmitItem;
+		$[110] = hasItems;
+		$[111] = menubar;
+		$[112] = syncSubmenuDisclosure;
+		$[113] = t44;
+	} else t44 = $[113];
+	const handleKeyDown = t44;
+	let t45;
+	if ($[114] !== handleKeyDown) {
+		t45 = {
 			ignoreUsedKeyboardEvents: false,
 			onKeyDown: handleKeyDown
 		};
-		$[111] = handleKeyDown;
-		$[112] = t43;
-	} else t43 = $[112];
-	useKeyboardEvents(t43);
-	let t44;
-	if ($[113] !== allowCreate || $[114] !== closeDropdown || $[115] !== disabled || $[116] !== handleActiveItem) {
-		t44 = (ref) => {
+		$[114] = handleKeyDown;
+		$[115] = t45;
+	} else t45 = $[115];
+	useKeyboardEvents(t45);
+	let t46;
+	if ($[116] !== allowCreate || $[117] !== closeDropdown || $[118] !== disabled || $[119] !== handleActiveItem) {
+		t46 = (ref) => {
 			setDropdownElement(ref);
 			if (!ref) return;
 			const { ownerDocument } = ref;
@@ -1415,27 +1421,23 @@ function RootDropdown(t0) {
 				else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
 				inputElementRef.current = inputElement;
 			}
-			const handleGlobalMouseDown = (t45) => {
-				const { target: target_1 } = t45;
+			const handleGlobalMouseDown = (t47) => {
+				const { target: target_1 } = t47;
 				const eventTarget_3 = target_1;
 				if (!ref.contains(eventTarget_3)) closeDropdown();
 			};
-			const handleGlobalMouseUp = (t46) => {
-				const { target: target_2 } = t46;
+			const handleGlobalMouseUp = (t48) => {
+				const { target: target_2 } = t48;
 				if (!isOpenRef.current || closingTimerRef.current != null) return;
 				if (isOpeningRef.current) {
-					setIsOpening(false);
-					if (isOpeningTimerRef.current != null) {
-						clearTimeout(isOpeningTimerRef.current);
-						isOpeningTimerRef.current = null;
-					}
+					endOpeningPress();
 					return;
 				}
 				const eventTarget_4 = target_2;
 				if (!ref.contains(eventTarget_4)) closeDropdown();
 			};
-			const handleGlobalFocusIn = (t47) => {
-				const { target: target_3 } = t47;
+			const handleGlobalFocusIn = (t49) => {
+				const { target: target_3 } = t49;
 				if (!isOpenRef.current) return;
 				const eventTarget_5 = target_3;
 				if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
@@ -1477,16 +1479,16 @@ function RootDropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[113] = allowCreate;
-		$[114] = closeDropdown;
-		$[115] = disabled;
-		$[116] = handleActiveItem;
-		$[117] = t44;
-	} else t44 = $[117];
-	const handleRef = t44;
-	let t45;
-	if ($[118] !== dropdownElement || $[119] !== popupRole || $[120] !== valueIdentity) {
-		t45 = (ref_0) => {
+		$[116] = allowCreate;
+		$[117] = closeDropdown;
+		$[118] = disabled;
+		$[119] = handleActiveItem;
+		$[120] = t46;
+	} else t46 = $[120];
+	const handleRef = t46;
+	let t47;
+	if ($[121] !== dropdownElement || $[122] !== popupRole || $[123] !== valueIdentity) {
+		t47 = (ref_0) => {
 			if (!ref_0) return;
 			if (annotatedElementsRef.current.has(ref_0)) return;
 			annotatedElementsRef.current.add(ref_0);
@@ -1504,82 +1506,82 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[118] = dropdownElement;
-		$[119] = popupRole;
-		$[120] = valueIdentity;
-		$[121] = t45;
-	} else t45 = $[121];
-	const handleBodyRef = t45;
+		$[121] = dropdownElement;
+		$[122] = popupRole;
+		$[123] = valueIdentity;
+		$[124] = t47;
+	} else t47 = $[124];
+	const handleBodyRef = t47;
 	let bodyLabelledBy;
 	if (!isValidElement(trigger)) {
 		if (isSearchable) {
-			const t46 = valueLabel ?? "";
-			let t47;
-			if ($[122] === Symbol.for("react.memo_cache_sentinel")) {
-				t47 = () => setIsOpen(true);
-				$[122] = t47;
-			} else t47 = $[122];
-			let t48;
-			if ($[123] !== bodyId || $[124] !== disabled || $[125] !== isOpen || $[126] !== name || $[127] !== placeholder || $[128] !== popupRole || $[129] !== t46 || $[130] !== tabIndex || $[131] !== triggerId) {
-				t48 = /* @__PURE__ */ jsx("input", {
+			const t48 = valueLabel ?? "";
+			let t49;
+			if ($[125] === Symbol.for("react.memo_cache_sentinel")) {
+				t49 = () => setIsOpen(true);
+				$[125] = t49;
+			} else t49 = $[125];
+			let t50;
+			if ($[126] !== bodyId || $[127] !== disabled || $[128] !== isOpen || $[129] !== name || $[130] !== placeholder || $[131] !== popupRole || $[132] !== t48 || $[133] !== tabIndex || $[134] !== triggerId) {
+				t50 = /* @__PURE__ */ jsx("input", {
 					"aria-autocomplete": "list",
 					"aria-controls": bodyId,
 					"aria-expanded": isOpen,
 					"aria-haspopup": popupRole,
 					autoComplete: "off",
 					className: "uktdropdown-trigger",
-					defaultValue: t46,
+					defaultValue: t48,
 					disabled,
 					id: triggerId,
 					name,
-					onFocus: t47,
+					onFocus: t49,
 					placeholder,
 					ref: inputElementRef,
 					role: "combobox",
 					tabIndex,
 					type: "text"
 				});
-				$[123] = bodyId;
-				$[124] = disabled;
-				$[125] = isOpen;
-				$[126] = name;
-				$[127] = placeholder;
-				$[128] = popupRole;
-				$[129] = t46;
-				$[130] = tabIndex;
-				$[131] = triggerId;
+				$[126] = bodyId;
+				$[127] = disabled;
+				$[128] = isOpen;
+				$[129] = name;
+				$[130] = placeholder;
+				$[131] = popupRole;
 				$[132] = t48;
-			} else t48 = $[132];
-			trigger = t48;
+				$[133] = tabIndex;
+				$[134] = triggerId;
+				$[135] = t50;
+			} else t50 = $[135];
+			trigger = t50;
 		} else {
 			bodyLabelledBy = triggerId;
-			const t46 = isMenubarItem ? "menuitem" : void 0;
-			const t47 = menubarTabIndex ?? 0;
-			let t48;
-			if ($[133] !== bodyId || $[134] !== disabled || $[135] !== isOpen || $[136] !== popupRole || $[137] !== t46 || $[138] !== t47 || $[139] !== trigger || $[140] !== triggerId) {
-				t48 = /* @__PURE__ */ jsx("button", {
+			const t48 = isMenubarItem ? "menuitem" : void 0;
+			const t49 = menubarTabIndex ?? 0;
+			let t50;
+			if ($[136] !== bodyId || $[137] !== disabled || $[138] !== isOpen || $[139] !== popupRole || $[140] !== t48 || $[141] !== t49 || $[142] !== trigger || $[143] !== triggerId) {
+				t50 = /* @__PURE__ */ jsx("button", {
 					"aria-controls": bodyId,
 					"aria-expanded": isOpen,
 					"aria-haspopup": popupRole,
 					className: "uktdropdown-trigger",
 					disabled,
 					id: triggerId,
-					role: t46,
-					tabIndex: t47,
+					role: t48,
+					tabIndex: t49,
 					type: "button",
 					children: trigger
 				});
-				$[133] = bodyId;
-				$[134] = disabled;
-				$[135] = isOpen;
-				$[136] = popupRole;
-				$[137] = t46;
-				$[138] = t47;
-				$[139] = trigger;
-				$[140] = triggerId;
-				$[141] = t48;
-			} else t48 = $[141];
-			trigger = t48;
+				$[136] = bodyId;
+				$[137] = disabled;
+				$[138] = isOpen;
+				$[139] = popupRole;
+				$[140] = t48;
+				$[141] = t49;
+				$[142] = trigger;
+				$[143] = triggerId;
+				$[144] = t50;
+			} else t50 = $[144];
+			trigger = t50;
 		}
 	} else {
 		const triggerProps = trigger.props;
@@ -1589,95 +1591,95 @@ function RootDropdown(t0) {
 		const isCombobox = isSearchable && isTextInputTrigger && trigger.type !== "textarea";
 		const triggerRole = triggerProps.role ?? (isCombobox ? "combobox" : isMenubarItem ? "menuitem" : void 0);
 		const canExpand = !isTextInputTrigger || triggerRole != null;
-		const t46 = trigger;
-		const t47 = triggerProps["aria-autocomplete"] ?? (isCombobox ? "list" : void 0);
-		const t48 = triggerProps["aria-controls"] ?? bodyId;
-		const t49 = triggerProps["aria-disabled"] ?? (disabled || void 0);
-		const t50 = triggerProps["aria-expanded"] ?? (canExpand ? isOpen : void 0);
-		const t51 = triggerProps["aria-haspopup"] ?? popupRole;
-		const t52 = triggerProps.tabIndex ?? menubarTabIndex;
-		let t53;
-		if ($[142] !== resolvedTriggerId || $[143] !== t46 || $[144] !== t47 || $[145] !== t48 || $[146] !== t49 || $[147] !== t50 || $[148] !== t51 || $[149] !== t52 || $[150] !== triggerRole) {
-			t53 = cloneElement(t46, {
-				"aria-autocomplete": t47,
-				"aria-controls": t48,
-				"aria-disabled": t49,
-				"aria-expanded": t50,
-				"aria-haspopup": t51,
+		const t48 = trigger;
+		const t49 = triggerProps["aria-autocomplete"] ?? (isCombobox ? "list" : void 0);
+		const t50 = triggerProps["aria-controls"] ?? bodyId;
+		const t51 = triggerProps["aria-disabled"] ?? (disabled || void 0);
+		const t52 = triggerProps["aria-expanded"] ?? (canExpand ? isOpen : void 0);
+		const t53 = triggerProps["aria-haspopup"] ?? popupRole;
+		const t54 = triggerProps.tabIndex ?? menubarTabIndex;
+		let t55;
+		if ($[145] !== resolvedTriggerId || $[146] !== t48 || $[147] !== t49 || $[148] !== t50 || $[149] !== t51 || $[150] !== t52 || $[151] !== t53 || $[152] !== t54 || $[153] !== triggerRole) {
+			t55 = cloneElement(t48, {
+				"aria-autocomplete": t49,
+				"aria-controls": t50,
+				"aria-disabled": t51,
+				"aria-expanded": t52,
+				"aria-haspopup": t53,
 				id: resolvedTriggerId,
 				role: triggerRole,
-				tabIndex: t52
+				tabIndex: t54
 			});
-			$[142] = resolvedTriggerId;
-			$[143] = t46;
-			$[144] = t47;
-			$[145] = t48;
-			$[146] = t49;
-			$[147] = t50;
-			$[148] = t51;
-			$[149] = t52;
-			$[150] = triggerRole;
+			$[145] = resolvedTriggerId;
+			$[146] = t48;
+			$[147] = t49;
+			$[148] = t50;
+			$[149] = t51;
+			$[150] = t52;
 			$[151] = t53;
-		} else t53 = $[151];
-		trigger = t53;
+			$[152] = t54;
+			$[153] = triggerRole;
+			$[154] = t55;
+		} else t55 = $[154];
+		trigger = t55;
 	}
 	if (label != null) {
 		bodyLabelledBy = labelId;
-		const t46 = isMenubarMember ? "none" : void 0;
-		const t47 = isMenubarMember ? "none" : void 0;
-		let t48;
-		if ($[152] !== label || $[153] !== labelId || $[154] !== t47) {
-			t48 = /* @__PURE__ */ jsx("div", {
+		const t48 = isMenubarMember ? "none" : void 0;
+		const t49 = isMenubarMember ? "none" : void 0;
+		let t50;
+		if ($[155] !== label || $[156] !== labelId || $[157] !== t49) {
+			t50 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				id: labelId,
-				role: t47,
+				role: t49,
 				children: label
 			});
-			$[152] = label;
-			$[153] = labelId;
-			$[154] = t47;
-			$[155] = t48;
-		} else t48 = $[155];
-		let t49;
-		if ($[156] !== t46 || $[157] !== t48 || $[158] !== trigger) {
-			t49 = /* @__PURE__ */ jsxs("label", {
+			$[155] = label;
+			$[156] = labelId;
+			$[157] = t49;
+			$[158] = t50;
+		} else t50 = $[158];
+		let t51;
+		if ($[159] !== t48 || $[160] !== t50 || $[161] !== trigger) {
+			t51 = /* @__PURE__ */ jsxs("label", {
 				className: "uktdropdown-label",
-				role: t46,
-				children: [t48, trigger]
+				role: t48,
+				children: [t50, trigger]
 			});
-			$[156] = t46;
-			$[157] = t48;
-			$[158] = trigger;
-			$[159] = t49;
-		} else t49 = $[159];
-		trigger = t49;
+			$[159] = t48;
+			$[160] = t50;
+			$[161] = trigger;
+			$[162] = t51;
+		} else t51 = $[162];
+		trigger = t51;
 	}
-	let t46;
-	if ($[160] === Symbol.for("react.memo_cache_sentinel")) {
-		t46 = /* @__PURE__ */ jsx("style", {
+	let t48;
+	if ($[163] === Symbol.for("react.memo_cache_sentinel")) {
+		t48 = /* @__PURE__ */ jsx("style", {
 			href: "@acusti/dropdown/Dropdown",
 			precedence: "medium",
 			children: Dropdown_default
 		});
-		$[160] = t46;
-	} else t46 = $[160];
-	let t47;
-	if ($[161] !== className || $[162] !== disabled || $[163] !== isOpen || $[164] !== isSearchable) {
-		t47 = clsx("uktdropdown", className, {
+		$[163] = t48;
+	} else t48 = $[163];
+	let t49;
+	if ($[164] !== className || $[165] !== disabled || $[166] !== isOpen || $[167] !== isSearchable) {
+		t49 = clsx("uktdropdown", className, {
 			"is-disabled": disabled,
 			"is-open": isOpen,
 			"is-searchable": isSearchable
 		});
-		$[161] = className;
-		$[162] = disabled;
-		$[163] = isOpen;
-		$[164] = isSearchable;
-		$[165] = t47;
-	} else t47 = $[165];
-	const t48 = isMenubarMember ? "none" : void 0;
-	let t49;
-	if ($[166] !== body || $[167] !== bodyId || $[168] !== bodyLabelledBy || $[169] !== dropdownContextValue || $[170] !== handleBodyRef || $[171] !== hasItems || $[172] !== isOpen || $[173] !== popupRole) {
-		t49 = isOpen ? /* @__PURE__ */ jsx("div", {
+		$[164] = className;
+		$[165] = disabled;
+		$[166] = isOpen;
+		$[167] = isSearchable;
+		$[168] = t49;
+	} else t49 = $[168];
+	const t50 = isMenubarMember ? "none" : void 0;
+	let t51;
+	if ($[169] !== body || $[170] !== bodyId || $[171] !== bodyLabelledBy || $[172] !== dropdownContextValue || $[173] !== handleBodyRef || $[174] !== hasItems || $[175] !== isOpen || $[176] !== popupRole) {
+		t51 = isOpen ? /* @__PURE__ */ jsx("div", {
 			"aria-labelledby": bodyLabelledBy,
 			className: clsx("uktdropdown-body", { "has-items": hasItems }),
 			id: bodyId,
@@ -1692,22 +1694,22 @@ function RootDropdown(t0) {
 				})
 			})
 		}) : null;
-		$[166] = body;
-		$[167] = bodyId;
-		$[168] = bodyLabelledBy;
-		$[169] = dropdownContextValue;
-		$[170] = handleBodyRef;
-		$[171] = hasItems;
-		$[172] = isOpen;
-		$[173] = popupRole;
-		$[174] = t49;
-	} else t49 = $[174];
-	let t50;
-	if ($[175] !== handleDropdownMouseEnter || $[176] !== handleDropdownMouseLeave || $[177] !== handleMouseDown || $[178] !== handleMouseMove || $[179] !== handleMouseOut || $[180] !== handleMouseOver || $[181] !== handleMouseUp || $[182] !== handleRef || $[183] !== onClick || $[184] !== styleFromProps || $[185] !== t47 || $[186] !== t48 || $[187] !== t49 || $[188] !== trigger) {
-		t50 = /* @__PURE__ */ jsxs(Fragment, { children: [t46, /* @__PURE__ */ jsxs("div", {
-			className: t47,
+		$[169] = body;
+		$[170] = bodyId;
+		$[171] = bodyLabelledBy;
+		$[172] = dropdownContextValue;
+		$[173] = handleBodyRef;
+		$[174] = hasItems;
+		$[175] = isOpen;
+		$[176] = popupRole;
+		$[177] = t51;
+	} else t51 = $[177];
+	let t52;
+	if ($[178] !== handleDropdownMouseEnter || $[179] !== handleDropdownMouseLeave || $[180] !== handleMouseDown || $[181] !== handleMouseMove || $[182] !== handleMouseOut || $[183] !== handleMouseOver || $[184] !== handleMouseUp || $[185] !== handleRef || $[186] !== onClick || $[187] !== styleFromProps || $[188] !== t49 || $[189] !== t50 || $[190] !== t51 || $[191] !== trigger) {
+		t52 = /* @__PURE__ */ jsxs(Fragment, { children: [t48, /* @__PURE__ */ jsxs("div", {
+			className: t49,
 			onClick,
-			role: t48,
+			role: t50,
 			onMouseDown: handleMouseDown,
 			onMouseEnter: handleDropdownMouseEnter,
 			onMouseLeave: handleDropdownMouseLeave,
@@ -1717,25 +1719,25 @@ function RootDropdown(t0) {
 			onMouseUp: handleMouseUp,
 			ref: handleRef,
 			style: styleFromProps,
-			children: [trigger, t49]
+			children: [trigger, t51]
 		})] });
-		$[175] = handleDropdownMouseEnter;
-		$[176] = handleDropdownMouseLeave;
-		$[177] = handleMouseDown;
-		$[178] = handleMouseMove;
-		$[179] = handleMouseOut;
-		$[180] = handleMouseOver;
-		$[181] = handleMouseUp;
-		$[182] = handleRef;
-		$[183] = onClick;
-		$[184] = styleFromProps;
-		$[185] = t47;
-		$[186] = t48;
-		$[187] = t49;
-		$[188] = trigger;
+		$[178] = handleDropdownMouseEnter;
+		$[179] = handleDropdownMouseLeave;
+		$[180] = handleMouseDown;
+		$[181] = handleMouseMove;
+		$[182] = handleMouseOut;
+		$[183] = handleMouseOver;
+		$[184] = handleMouseUp;
+		$[185] = handleRef;
+		$[186] = onClick;
+		$[187] = styleFromProps;
+		$[188] = t49;
 		$[189] = t50;
-	} else t50 = $[189];
-	return t50;
+		$[190] = t51;
+		$[191] = trigger;
+		$[192] = t52;
+	} else t52 = $[192];
+	return t52;
 }
 var INERT_SUBMENU_PROPS = [
 	"allowCreate",