@acusti/dropdown 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/Dropdown.js

@@ -225,6 +225,7 @@ var compareDocumentOrder = (a, b) => {
 	if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0) return 1;
 	return 0;
 };
+var NON_MENU_CONTROL_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
 function Menubar(t0) {
 	const $ = c(15);
 	const { children, className, style } = t0;
@@ -234,6 +235,7 @@ function Menubar(t0) {
 		$[0] = t1;
 	} else t1 = $[0];
 	const membersRef = useRef(t1);
+	const engagedMemberRef = useRef(null);
 	let t2;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = () => Array.from(membersRef.current).sort(compareDocumentOrder);
@@ -254,8 +256,12 @@ function Menubar(t0) {
 				members[nextIndex].open();
 				members[nextIndex].focusTrigger();
 			},
-			notifyOpened(element) {
-				for (const member_0 of membersRef.current) if (member_0.element !== element && member_0.isOpen()) member_0.close();
+			notifyClosed(element) {
+				if (engagedMemberRef.current === element) engagedMemberRef.current = null;
+			},
+			notifyOpened(element_0) {
+				engagedMemberRef.current = element_0;
+				for (const member_0 of membersRef.current) if (member_0.element !== element_0 && member_0.isOpen()) member_0.close();
 			},
 			registerMember(member_1) {
 				membersRef.current.add(member_1);
@@ -288,11 +294,19 @@ function Menubar(t0) {
 	let t5;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = (eventTarget_0) => {
+			if (engagedMemberRef.current == null) return;
 			const members_1 = getOrderedMembers();
-			if (!members_1.some(_temp2)) return;
-			const member_5 = members_1.find((m) => m.element.contains(eventTarget_0));
-			if (!member_5 || member_5.isOpen()) return;
-			member_5.open();
+			if (!members_1.some((m) => m.element === engagedMemberRef.current)) {
+				engagedMemberRef.current = null;
+				return;
+			}
+			const member_4 = members_1.find((m_0) => m_0.element.contains(eventTarget_0));
+			if (member_4) {
+				if (!member_4.isOpen()) member_4.open();
+				return;
+			}
+			if (!eventTarget_0.closest(NON_MENU_CONTROL_SELECTOR)) return;
+			for (const openMember of members_1) if (openMember.isOpen()) openMember.close();
 		};
 		$[4] = t5;
 	} else t5 = $[4];
@@ -346,9 +360,6 @@ function Menubar(t0) {
 	} else t10 = $[14];
 	return t10;
 }
-function _temp2(member_4) {
-	return member_4.isOpen();
-}
 function _temp$1(member_2) {
 	return member_2.isOpen();
 }
@@ -360,6 +371,7 @@ var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
 var TEXT_INPUT_SELECTOR = "input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";
 var SUBMENU_DISCLOSURE_DELAY = 200;
 var SAFE_AREA_TIMEOUT = 300;
+var HOVER_CLOSE_DELAY = 150;
 function Dropdown(props) {
 	const $ = c(5);
 	const parentDropdown = useContext(DropdownContext);
@@ -385,8 +397,8 @@ function Dropdown(props) {
 	return t0;
 }
 function RootDropdown(t0) {
-	const $ = c(130);
-	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, placeholder, style: styleFromProps, tabIndex, value } = t0;
+	const $ = c(147);
+	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, 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;
 	const keepOpenOnSubmit = t3 === void 0 ? !hasItems : t3;
@@ -423,6 +435,7 @@ function RootDropdown(t0) {
 	const safeAreaRef = useRef(null);
 	const safeAreaTimerRef = useRef(null);
 	const wasInSafeAreaRef = useRef(false);
+	const hoverCloseTimerRef = useRef(null);
 	const allowCreateRef = useRef(allowCreate);
 	const allowEmptyRef = useRef(allowEmpty);
 	const hasItemsRef = useRef(hasItems);
@@ -701,74 +714,128 @@ function RootDropdown(t0) {
 	let t23;
 	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
 		t23 = () => {
+			if (hoverCloseTimerRef.current != null) {
+				clearTimeout(hoverCloseTimerRef.current);
+				hoverCloseTimerRef.current = null;
+			}
+		};
+		$[37] = t23;
+	} else t23 = $[37];
+	const clearHoverCloseTimer = t23;
+	let t24;
+	let t25;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = () => clearHoverCloseTimer;
+		t25 = [];
+		$[38] = t24;
+		$[39] = t25;
+	} else {
+		t24 = $[38];
+		t25 = $[39];
+	}
+	useEffect(t24, t25);
+	let t26;
+	if ($[40] !== dropdownElement || $[41] !== menubar) {
+		t26 = (options) => {
 			setIsOpen(false);
 			setIsOpening(false);
 			mouseDownPositionRef.current = null;
 			clearDisclosureTimer();
 			clearSafeAreaTimer();
+			clearHoverCloseTimer();
 			safeAreaRef.current = null;
 			wasInSafeAreaRef.current = false;
 			if (closingTimerRef.current != null) {
 				clearTimeout(closingTimerRef.current);
 				closingTimerRef.current = null;
 			}
+			if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
 		};
-		$[37] = t23;
-	} else t23 = $[37];
-	const closeDropdown = t23;
-	let t24;
-	if ($[38] !== dropdownElement?.firstElementChild) {
-		t24 = () => {
+		$[40] = dropdownElement;
+		$[41] = menubar;
+		$[42] = t26;
+	} else t26 = $[42];
+	const closeDropdown = t26;
+	let t27;
+	if ($[43] !== openOnHover) {
+		t27 = () => {
+			clearHoverCloseTimer();
+			if (!openOnHover || isOpenRef.current) return;
+			setIsOpen(true);
+			setIsOpening(false);
+		};
+		$[43] = openOnHover;
+		$[44] = t27;
+	} else t27 = $[44];
+	const handleDropdownMouseEnter = t27;
+	let t28;
+	if ($[45] !== closeDropdown || $[46] !== openOnHover) {
+		t28 = () => {
+			if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
+			hoverCloseTimerRef.current = setTimeout(() => {
+				hoverCloseTimerRef.current = null;
+				closeDropdown();
+			}, HOVER_CLOSE_DELAY);
+		};
+		$[45] = closeDropdown;
+		$[46] = openOnHover;
+		$[47] = t28;
+	} else t28 = $[47];
+	const handleDropdownMouseLeave = t28;
+	let t29;
+	if ($[48] !== dropdownElement?.firstElementChild) {
+		t29 = () => {
 			const firstChild = dropdownElement?.firstElementChild;
 			if (!firstChild) return;
 			(firstChild.matches(FOCUSABLE_SELECTOR) ? firstChild : firstChild.querySelector(FOCUSABLE_SELECTOR))?.focus();
 		};
-		$[38] = dropdownElement?.firstElementChild;
-		$[39] = t24;
-	} else t24 = $[39];
-	const focusTrigger = t24;
-	let t25;
-	if ($[40] !== dropdownElement || $[41] !== focusTrigger || $[42] !== menubar) {
-		t25 = () => {
+		$[48] = dropdownElement?.firstElementChild;
+		$[49] = t29;
+	} else t29 = $[49];
+	const focusTrigger = t29;
+	let t30;
+	if ($[50] !== closeDropdown || $[51] !== dropdownElement || $[52] !== focusTrigger || $[53] !== menubar) {
+		t30 = () => {
 			if (!menubar || !dropdownElement) return;
 			return menubar.registerMember({
-				close: closeDropdown,
+				close: () => closeDropdown({ keepMenubarEngaged: true }),
 				element: dropdownElement,
 				focusTrigger,
 				isOpen: () => isOpenRef.current,
 				open: () => setIsOpen(true)
 			});
 		};
-		$[40] = dropdownElement;
-		$[41] = focusTrigger;
-		$[42] = menubar;
-		$[43] = t25;
-	} else t25 = $[43];
-	useEffect(t25);
-	let t26;
-	let t27;
-	if ($[44] !== dropdownElement || $[45] !== isOpen || $[46] !== menubar) {
-		t26 = () => {
+		$[50] = closeDropdown;
+		$[51] = dropdownElement;
+		$[52] = focusTrigger;
+		$[53] = menubar;
+		$[54] = t30;
+	} else t30 = $[54];
+	useEffect(t30);
+	let t31;
+	let t32;
+	if ($[55] !== dropdownElement || $[56] !== isOpen || $[57] !== menubar) {
+		t31 = () => {
 			if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
 		};
-		t27 = [
+		t32 = [
 			dropdownElement,
 			isOpen,
 			menubar
 		];
-		$[44] = dropdownElement;
-		$[45] = isOpen;
-		$[46] = menubar;
-		$[47] = t26;
-		$[48] = t27;
+		$[55] = dropdownElement;
+		$[56] = isOpen;
+		$[57] = menubar;
+		$[58] = t31;
+		$[59] = t32;
 	} else {
-		t26 = $[47];
-		t27 = $[48];
+		t31 = $[58];
+		t32 = $[59];
 	}
-	useEffect(t26, t27);
-	let t28;
-	if ($[49] !== dropdownElement || $[50] !== handleActiveItem) {
-		t28 = (event_1) => {
+	useEffect(t31, t32);
+	let t33;
+	if ($[60] !== closeDropdown || $[61] !== dropdownElement || $[62] !== handleActiveItem) {
+		t33 = (event_1) => {
 			const element = hasItemsRef.current ? getActiveItemElement(dropdownElement) : null;
 			const submenuOfActive = element ? getSubmenuOfItem(element) : null;
 			if (element && submenuOfActive) {
@@ -823,14 +890,15 @@ function RootDropdown(t0) {
 			onSubmitItemRef.current?.(payload_1);
 			dispatchToSubmenus("onSubmitItem", payload_1);
 		};
-		$[49] = dropdownElement;
-		$[50] = handleActiveItem;
-		$[51] = t28;
-	} else t28 = $[51];
-	const handleSubmitItem = t28;
-	let t29;
-	if ($[52] !== trackSafeArea) {
-		t29 = (event_2) => {
+		$[60] = closeDropdown;
+		$[61] = dropdownElement;
+		$[62] = handleActiveItem;
+		$[63] = t33;
+	} else t33 = $[63];
+	const handleSubmitItem = t33;
+	let t34;
+	if ($[64] !== trackSafeArea) {
+		t34 = (event_2) => {
 			const { clientX, clientY } = event_2;
 			currentInputMethodRef.current = "mouse";
 			trackSafeArea(event_2);
@@ -839,13 +907,13 @@ function RootDropdown(t0) {
 			if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
 			setIsOpening(false);
 		};
-		$[52] = trackSafeArea;
-		$[53] = t29;
-	} else t29 = $[53];
-	const handleMouseMove = t29;
-	let t30;
-	if ($[54] !== dropdownElement || $[55] !== handleActiveItem || $[56] !== syncSubmenuDisclosure) {
-		t30 = (event_3) => {
+		$[64] = trackSafeArea;
+		$[65] = t34;
+	} else t34 = $[65];
+	const handleMouseMove = t34;
+	let t35;
+	if ($[66] !== dropdownElement || $[67] !== handleActiveItem || $[68] !== syncSubmenuDisclosure) {
+		t35 = (event_3) => {
 			if (!hasItemsRef.current) return;
 			if (currentInputMethodRef.current !== "mouse") return;
 			if (!dropdownElement) return;
@@ -864,15 +932,15 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[54] = dropdownElement;
-		$[55] = handleActiveItem;
-		$[56] = syncSubmenuDisclosure;
-		$[57] = t30;
-	} else t30 = $[57];
-	const handleMouseOver = t30;
-	let t31;
-	if ($[58] !== dropdownElement || $[59] !== syncSubmenuDisclosure) {
-		t31 = (event_4) => {
+		$[66] = dropdownElement;
+		$[67] = handleActiveItem;
+		$[68] = syncSubmenuDisclosure;
+		$[69] = t35;
+	} else t35 = $[69];
+	const handleMouseOver = t35;
+	let t36;
+	if ($[70] !== dropdownElement || $[71] !== syncSubmenuDisclosure) {
+		t36 = (event_4) => {
 			if (!hasItemsRef.current) return;
 			const relatedTarget = event_4.relatedTarget;
 			if (!dropdownElement?.contains(relatedTarget)) {
@@ -888,14 +956,14 @@ function RootDropdown(t0) {
 			delete activeItem.dataset.uktActive;
 			syncSubmenuDisclosure();
 		};
-		$[58] = dropdownElement;
-		$[59] = syncSubmenuDisclosure;
-		$[60] = t31;
-	} else t31 = $[60];
-	const handleMouseOut = t31;
-	let t32;
-	if ($[61] !== onMouseDown) {
-		t32 = (event_5) => {
+		$[70] = dropdownElement;
+		$[71] = syncSubmenuDisclosure;
+		$[72] = t36;
+	} else t36 = $[72];
+	const handleMouseOut = t36;
+	let t37;
+	if ($[73] !== onMouseDown) {
+		t37 = (event_5) => {
 			if (onMouseDown) onMouseDown(event_5);
 			if (isOpenRef.current) return;
 			setIsOpen(true);
@@ -909,13 +977,13 @@ function RootDropdown(t0) {
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[61] = onMouseDown;
-		$[62] = t32;
-	} else t32 = $[62];
-	const handleMouseDown = t32;
-	let t33;
-	if ($[63] !== dropdownElement || $[64] !== handleActiveItem || $[65] !== handleSubmitItem || $[66] !== onMouseUp) {
-		t33 = (event_6) => {
+		$[73] = onMouseDown;
+		$[74] = t37;
+	} else t37 = $[74];
+	const handleMouseDown = t37;
+	let t38;
+	if ($[75] !== closeDropdown || $[76] !== dropdownElement || $[77] !== handleActiveItem || $[78] !== handleSubmitItem || $[79] !== onMouseUp) {
+		t38 = (event_6) => {
 			if (onMouseUp) onMouseUp(event_6);
 			if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
 			const eventTarget_1 = event_6.target;
@@ -939,16 +1007,17 @@ function RootDropdown(t0) {
 			}
 			handleSubmitItem(event_6);
 		};
-		$[63] = dropdownElement;
-		$[64] = handleActiveItem;
-		$[65] = handleSubmitItem;
-		$[66] = onMouseUp;
-		$[67] = t33;
-	} else t33 = $[67];
-	const handleMouseUp = t33;
-	let t34;
-	if ($[68] !== dropdownElement || $[69] !== focusTrigger || $[70] !== handleActiveItem || $[71] !== handleSubmitItem || $[72] !== menubar || $[73] !== syncSubmenuDisclosure) {
-		t34 = (event_7) => {
+		$[75] = closeDropdown;
+		$[76] = dropdownElement;
+		$[77] = handleActiveItem;
+		$[78] = handleSubmitItem;
+		$[79] = onMouseUp;
+		$[80] = t38;
+	} else t38 = $[80];
+	const handleMouseUp = t38;
+	let t39;
+	if ($[81] !== closeDropdown || $[82] !== dropdownElement || $[83] !== focusTrigger || $[84] !== handleActiveItem || $[85] !== handleSubmitItem || $[86] !== menubar || $[87] !== syncSubmenuDisclosure) {
+		t39 = (event_7) => {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
@@ -1081,28 +1150,29 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[68] = dropdownElement;
-		$[69] = focusTrigger;
-		$[70] = handleActiveItem;
-		$[71] = handleSubmitItem;
-		$[72] = menubar;
-		$[73] = syncSubmenuDisclosure;
-		$[74] = t34;
-	} else t34 = $[74];
-	const handleKeyDown = t34;
-	let t35;
-	if ($[75] !== handleKeyDown) {
-		t35 = {
+		$[81] = closeDropdown;
+		$[82] = dropdownElement;
+		$[83] = focusTrigger;
+		$[84] = handleActiveItem;
+		$[85] = handleSubmitItem;
+		$[86] = menubar;
+		$[87] = syncSubmenuDisclosure;
+		$[88] = t39;
+	} else t39 = $[88];
+	const handleKeyDown = t39;
+	let t40;
+	if ($[89] !== handleKeyDown) {
+		t40 = {
 			ignoreUsedKeyboardEvents: false,
 			onKeyDown: handleKeyDown
 		};
-		$[75] = handleKeyDown;
-		$[76] = t35;
-	} else t35 = $[76];
-	useKeyboardEvents(t35);
-	let t36;
-	if ($[77] !== handleActiveItem || $[78] !== isOpenOnMount) {
-		t36 = (ref) => {
+		$[89] = handleKeyDown;
+		$[90] = t40;
+	} else t40 = $[90];
+	useKeyboardEvents(t40);
+	let t41;
+	if ($[91] !== closeDropdown || $[92] !== handleActiveItem || $[93] !== isOpenOnMount) {
+		t41 = (ref) => {
 			setDropdownElement(ref);
 			if (!ref) return;
 			const { ownerDocument } = ref;
@@ -1112,13 +1182,13 @@ function RootDropdown(t0) {
 				else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
 				inputElementRef.current = inputElement;
 			}
-			const handleGlobalMouseDown = (t37) => {
-				const { target: target_1 } = t37;
+			const handleGlobalMouseDown = (t42) => {
+				const { target: target_1 } = t42;
 				const eventTarget_3 = target_1;
 				if (!ref.contains(eventTarget_3)) closeDropdown();
 			};
-			const handleGlobalMouseUp = (t38) => {
-				const { target: target_2 } = t38;
+			const handleGlobalMouseUp = (t43) => {
+				const { target: target_2 } = t43;
 				if (!isOpenRef.current || closingTimerRef.current != null) return;
 				if (isOpeningRef.current) {
 					setIsOpening(false);
@@ -1131,12 +1201,12 @@ function RootDropdown(t0) {
 				const eventTarget_4 = target_2;
 				if (!ref.contains(eventTarget_4)) closeDropdown();
 			};
-			const handleGlobalFocusIn = (t39) => {
-				const { target: target_3 } = t39;
+			const handleGlobalFocusIn = (t44) => {
+				const { target: target_3 } = t44;
 				if (!isOpenRef.current) return;
 				const eventTarget_5 = target_3;
 				if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
-				closeDropdown();
+				closeDropdown({ keepMenubarEngaged: true });
 			};
 			document.addEventListener("focusin", handleGlobalFocusIn);
 			document.addEventListener("mousedown", handleGlobalMouseDown);
@@ -1174,51 +1244,52 @@ function RootDropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[77] = handleActiveItem;
-		$[78] = isOpenOnMount;
-		$[79] = t36;
-	} else t36 = $[79];
-	const handleRef = t36;
+		$[91] = closeDropdown;
+		$[92] = handleActiveItem;
+		$[93] = isOpenOnMount;
+		$[94] = t41;
+	} else t41 = $[94];
+	const handleRef = t41;
 	const handleBodyRef = _temp;
 	if (!isValidElement(trigger)) if (isSearchable) {
-		const t37 = value ?? "";
-		let t38;
-		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
-			t38 = () => setIsOpen(true);
-			$[80] = t38;
-		} else t38 = $[80];
-		let t39;
-		if ($[81] !== bodyId || $[82] !== disabled || $[83] !== isOpen || $[84] !== name || $[85] !== placeholder || $[86] !== popupRole || $[87] !== t37 || $[88] !== tabIndex) {
-			t39 = /* @__PURE__ */ jsx("input", {
+		const t42 = value ?? "";
+		let t43;
+		if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
+			t43 = () => setIsOpen(true);
+			$[95] = t43;
+		} else t43 = $[95];
+		let t44;
+		if ($[96] !== bodyId || $[97] !== disabled || $[98] !== isOpen || $[99] !== name || $[100] !== placeholder || $[101] !== popupRole || $[102] !== t42 || $[103] !== tabIndex) {
+			t44 = /* @__PURE__ */ jsx("input", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
 				"aria-haspopup": popupRole,
 				autoComplete: "off",
 				className: "uktdropdown-trigger",
-				defaultValue: t37,
+				defaultValue: t42,
 				disabled,
 				name,
-				onFocus: t38,
+				onFocus: t43,
 				placeholder,
 				ref: inputElementRef,
 				tabIndex,
 				type: "text"
 			});
-			$[81] = bodyId;
-			$[82] = disabled;
-			$[83] = isOpen;
-			$[84] = name;
-			$[85] = placeholder;
-			$[86] = popupRole;
-			$[87] = t37;
-			$[88] = tabIndex;
-			$[89] = t39;
-		} else t39 = $[89];
-		trigger = t39;
+			$[96] = bodyId;
+			$[97] = disabled;
+			$[98] = isOpen;
+			$[99] = name;
+			$[100] = placeholder;
+			$[101] = popupRole;
+			$[102] = t42;
+			$[103] = tabIndex;
+			$[104] = t44;
+		} else t44 = $[104];
+		trigger = t44;
 	} else {
-		let t37;
-		if ($[90] !== bodyId || $[91] !== isOpen || $[92] !== popupRole || $[93] !== trigger) {
-			t37 = /* @__PURE__ */ jsx("button", {
+		let t42;
+		if ($[105] !== bodyId || $[106] !== isOpen || $[107] !== popupRole || $[108] !== trigger) {
+			t42 = /* @__PURE__ */ jsx("button", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
 				"aria-haspopup": popupRole,
@@ -1227,82 +1298,82 @@ function RootDropdown(t0) {
 				type: "button",
 				children: trigger
 			});
-			$[90] = bodyId;
-			$[91] = isOpen;
-			$[92] = popupRole;
-			$[93] = trigger;
-			$[94] = t37;
-		} else t37 = $[94];
-		trigger = t37;
+			$[105] = bodyId;
+			$[106] = isOpen;
+			$[107] = popupRole;
+			$[108] = trigger;
+			$[109] = t42;
+		} else t42 = $[109];
+		trigger = t42;
 	}
 	else {
 		const triggerProps = trigger.props;
-		const t37 = trigger;
-		const t38 = triggerProps["aria-controls"] ?? bodyId;
-		const t39 = triggerProps["aria-expanded"] ?? isOpen;
-		const t40 = triggerProps["aria-haspopup"] ?? popupRole;
-		let t41;
-		if ($[95] !== t37 || $[96] !== t38 || $[97] !== t39 || $[98] !== t40) {
-			t41 = cloneElement(t37, {
-				"aria-controls": t38,
-				"aria-expanded": t39,
-				"aria-haspopup": t40
+		const t42 = trigger;
+		const t43 = triggerProps["aria-controls"] ?? bodyId;
+		const t44 = triggerProps["aria-expanded"] ?? isOpen;
+		const t45 = triggerProps["aria-haspopup"] ?? popupRole;
+		let t46;
+		if ($[110] !== t42 || $[111] !== t43 || $[112] !== t44 || $[113] !== t45) {
+			t46 = cloneElement(t42, {
+				"aria-controls": t43,
+				"aria-expanded": t44,
+				"aria-haspopup": t45
 			});
-			$[95] = t37;
-			$[96] = t38;
-			$[97] = t39;
-			$[98] = t40;
-			$[99] = t41;
-		} else t41 = $[99];
-		trigger = t41;
+			$[110] = t42;
+			$[111] = t43;
+			$[112] = t44;
+			$[113] = t45;
+			$[114] = t46;
+		} else t46 = $[114];
+		trigger = t46;
 	}
 	if (label != null) {
-		let t37;
-		if ($[100] !== label) {
-			t37 = /* @__PURE__ */ jsx("div", {
+		let t42;
+		if ($[115] !== label) {
+			t42 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				children: label
 			});
-			$[100] = label;
-			$[101] = t37;
-		} else t37 = $[101];
-		let t38;
-		if ($[102] !== t37 || $[103] !== trigger) {
-			t38 = /* @__PURE__ */ jsxs("label", {
+			$[115] = label;
+			$[116] = t42;
+		} else t42 = $[116];
+		let t43;
+		if ($[117] !== t42 || $[118] !== trigger) {
+			t43 = /* @__PURE__ */ jsxs("label", {
 				className: "uktdropdown-label",
-				children: [t37, trigger]
+				children: [t42, trigger]
 			});
-			$[102] = t37;
-			$[103] = trigger;
-			$[104] = t38;
-		} else t38 = $[104];
-		trigger = t38;
+			$[117] = t42;
+			$[118] = trigger;
+			$[119] = t43;
+		} else t43 = $[119];
+		trigger = t43;
 	}
-	let t37;
-	if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
-		t37 = /* @__PURE__ */ jsx("style", {
+	let t42;
+	if ($[120] === Symbol.for("react.memo_cache_sentinel")) {
+		t42 = /* @__PURE__ */ jsx("style", {
 			href: "@acusti/dropdown/Dropdown",
 			precedence: "medium",
 			children: Dropdown_default
 		});
-		$[105] = t37;
-	} else t37 = $[105];
-	let t38;
-	if ($[106] !== className || $[107] !== disabled || $[108] !== isOpen || $[109] !== isSearchable) {
-		t38 = clsx("uktdropdown", className, {
+		$[120] = t42;
+	} else t42 = $[120];
+	let t43;
+	if ($[121] !== className || $[122] !== disabled || $[123] !== isOpen || $[124] !== isSearchable) {
+		t43 = clsx("uktdropdown", className, {
 			disabled,
 			"is-open": isOpen,
 			"is-searchable": isSearchable
 		});
-		$[106] = className;
-		$[107] = disabled;
-		$[108] = isOpen;
-		$[109] = isSearchable;
-		$[110] = t38;
-	} else t38 = $[110];
-	let t39;
-	if ($[111] !== bodyId || $[112] !== children || $[113] !== childrenCount || $[114] !== hasItems || $[115] !== isOpen || $[116] !== popupRole) {
-		t39 = isOpen ? /* @__PURE__ */ jsx("div", {
+		$[121] = className;
+		$[122] = disabled;
+		$[123] = isOpen;
+		$[124] = isSearchable;
+		$[125] = t43;
+	} else t43 = $[125];
+	let t44;
+	if ($[126] !== bodyId || $[127] !== children || $[128] !== childrenCount || $[129] !== hasItems || $[130] !== isOpen || $[131] !== popupRole) {
+		t44 = isOpen ? /* @__PURE__ */ jsx("div", {
 			className: clsx("uktdropdown-body", { "has-items": hasItems }),
 			id: bodyId,
 			popover: "manual",
@@ -1316,42 +1387,46 @@ function RootDropdown(t0) {
 				})
 			})
 		}) : null;
-		$[111] = bodyId;
-		$[112] = children;
-		$[113] = childrenCount;
-		$[114] = hasItems;
-		$[115] = isOpen;
-		$[116] = popupRole;
-		$[117] = t39;
-	} else t39 = $[117];
-	let t40;
-	if ($[118] !== handleMouseDown || $[119] !== handleMouseMove || $[120] !== handleMouseOut || $[121] !== handleMouseOver || $[122] !== handleMouseUp || $[123] !== handleRef || $[124] !== onClick || $[125] !== styleFromProps || $[126] !== t38 || $[127] !== t39 || $[128] !== trigger) {
-		t40 = /* @__PURE__ */ jsxs(Fragment, { children: [t37, /* @__PURE__ */ jsxs("div", {
-			className: t38,
+		$[126] = bodyId;
+		$[127] = children;
+		$[128] = childrenCount;
+		$[129] = hasItems;
+		$[130] = isOpen;
+		$[131] = popupRole;
+		$[132] = t44;
+	} else t44 = $[132];
+	let t45;
+	if ($[133] !== handleDropdownMouseEnter || $[134] !== handleDropdownMouseLeave || $[135] !== handleMouseDown || $[136] !== handleMouseMove || $[137] !== handleMouseOut || $[138] !== handleMouseOver || $[139] !== handleMouseUp || $[140] !== handleRef || $[141] !== onClick || $[142] !== styleFromProps || $[143] !== t43 || $[144] !== t44 || $[145] !== trigger) {
+		t45 = /* @__PURE__ */ jsxs(Fragment, { children: [t42, /* @__PURE__ */ jsxs("div", {
+			className: t43,
 			onClick,
 			onMouseDown: handleMouseDown,
+			onMouseEnter: handleDropdownMouseEnter,
+			onMouseLeave: handleDropdownMouseLeave,
 			onMouseMove: handleMouseMove,
 			onMouseOut: handleMouseOut,
 			onMouseOver: handleMouseOver,
 			onMouseUp: handleMouseUp,
 			ref: handleRef,
 			style: styleFromProps,
-			children: [trigger, t39]
+			children: [trigger, t44]
 		})] });
-		$[118] = handleMouseDown;
-		$[119] = handleMouseMove;
-		$[120] = handleMouseOut;
-		$[121] = handleMouseOver;
-		$[122] = handleMouseUp;
-		$[123] = handleRef;
-		$[124] = onClick;
-		$[125] = styleFromProps;
-		$[126] = t38;
-		$[127] = t39;
-		$[128] = trigger;
-		$[129] = t40;
-	} else t40 = $[129];
-	return t40;
+		$[133] = handleDropdownMouseEnter;
+		$[134] = handleDropdownMouseLeave;
+		$[135] = handleMouseDown;
+		$[136] = handleMouseMove;
+		$[137] = handleMouseOut;
+		$[138] = handleMouseOver;
+		$[139] = handleMouseUp;
+		$[140] = handleRef;
+		$[141] = onClick;
+		$[142] = styleFromProps;
+		$[143] = t43;
+		$[144] = t44;
+		$[145] = trigger;
+		$[146] = t45;
+	} else t45 = $[146];
+	return t45;
 }
 function _temp(ref_0) {
 	if (!ref_0) return;
@@ -1365,6 +1440,7 @@ var INERT_SUBMENU_PROPS = [
 	"isSearchable",
 	"keepOpenOnSubmit",
 	"name",
+	"openOnHover",
 	"placeholder",
 	"tabIndex",
 	"value"