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

package/dist/Dropdown.js

@@ -371,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);
@@ -396,8 +397,8 @@ function Dropdown(props) {
 	return t0;
 }
 function RootDropdown(t0) {
-	const $ = c(137);
-	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;
@@ -434,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);
@@ -710,13 +712,37 @@ function RootDropdown(t0) {
 	} else t22 = $[36];
 	const trackSafeArea = t22;
 	let t23;
-	if ($[37] !== dropdownElement || $[38] !== menubar) {
-		t23 = (options) => {
+	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) {
@@ -725,25 +751,51 @@ function RootDropdown(t0) {
 			}
 			if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
 		};
-		$[37] = dropdownElement;
-		$[38] = menubar;
-		$[39] = t23;
-	} else t23 = $[39];
-	const closeDropdown = t23;
-	let t24;
-	if ($[40] !== 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();
 		};
-		$[40] = dropdownElement?.firstElementChild;
-		$[41] = t24;
-	} else t24 = $[41];
-	const focusTrigger = t24;
-	let t25;
-	if ($[42] !== closeDropdown || $[43] !== dropdownElement || $[44] !== focusTrigger || $[45] !== 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({ keepMenubarEngaged: true }),
@@ -753,37 +805,37 @@ function RootDropdown(t0) {
 				open: () => setIsOpen(true)
 			});
 		};
-		$[42] = closeDropdown;
-		$[43] = dropdownElement;
-		$[44] = focusTrigger;
-		$[45] = menubar;
-		$[46] = t25;
-	} else t25 = $[46];
-	useEffect(t25);
-	let t26;
-	let t27;
-	if ($[47] !== dropdownElement || $[48] !== isOpen || $[49] !== 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
 		];
-		$[47] = dropdownElement;
-		$[48] = isOpen;
-		$[49] = menubar;
-		$[50] = t26;
-		$[51] = t27;
+		$[55] = dropdownElement;
+		$[56] = isOpen;
+		$[57] = menubar;
+		$[58] = t31;
+		$[59] = t32;
 	} else {
-		t26 = $[50];
-		t27 = $[51];
+		t31 = $[58];
+		t32 = $[59];
 	}
-	useEffect(t26, t27);
-	let t28;
-	if ($[52] !== closeDropdown || $[53] !== dropdownElement || $[54] !== 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) {
@@ -838,15 +890,15 @@ function RootDropdown(t0) {
 			onSubmitItemRef.current?.(payload_1);
 			dispatchToSubmenus("onSubmitItem", payload_1);
 		};
-		$[52] = closeDropdown;
-		$[53] = dropdownElement;
-		$[54] = handleActiveItem;
-		$[55] = t28;
-	} else t28 = $[55];
-	const handleSubmitItem = t28;
-	let t29;
-	if ($[56] !== 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);
@@ -855,13 +907,13 @@ function RootDropdown(t0) {
 			if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
 			setIsOpening(false);
 		};
-		$[56] = trackSafeArea;
-		$[57] = t29;
-	} else t29 = $[57];
-	const handleMouseMove = t29;
-	let t30;
-	if ($[58] !== dropdownElement || $[59] !== handleActiveItem || $[60] !== 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;
@@ -880,15 +932,15 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[58] = dropdownElement;
-		$[59] = handleActiveItem;
-		$[60] = syncSubmenuDisclosure;
-		$[61] = t30;
-	} else t30 = $[61];
-	const handleMouseOver = t30;
-	let t31;
-	if ($[62] !== dropdownElement || $[63] !== 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)) {
@@ -904,14 +956,14 @@ function RootDropdown(t0) {
 			delete activeItem.dataset.uktActive;
 			syncSubmenuDisclosure();
 		};
-		$[62] = dropdownElement;
-		$[63] = syncSubmenuDisclosure;
-		$[64] = t31;
-	} else t31 = $[64];
-	const handleMouseOut = t31;
-	let t32;
-	if ($[65] !== 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);
@@ -925,13 +977,13 @@ function RootDropdown(t0) {
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[65] = onMouseDown;
-		$[66] = t32;
-	} else t32 = $[66];
-	const handleMouseDown = t32;
-	let t33;
-	if ($[67] !== closeDropdown || $[68] !== dropdownElement || $[69] !== handleActiveItem || $[70] !== handleSubmitItem || $[71] !== 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;
@@ -955,17 +1007,17 @@ function RootDropdown(t0) {
 			}
 			handleSubmitItem(event_6);
 		};
-		$[67] = closeDropdown;
-		$[68] = dropdownElement;
-		$[69] = handleActiveItem;
-		$[70] = handleSubmitItem;
-		$[71] = onMouseUp;
-		$[72] = t33;
-	} else t33 = $[72];
-	const handleMouseUp = t33;
-	let t34;
-	if ($[73] !== closeDropdown || $[74] !== dropdownElement || $[75] !== focusTrigger || $[76] !== handleActiveItem || $[77] !== handleSubmitItem || $[78] !== menubar || $[79] !== 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;
@@ -1098,29 +1150,29 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[73] = closeDropdown;
-		$[74] = dropdownElement;
-		$[75] = focusTrigger;
-		$[76] = handleActiveItem;
-		$[77] = handleSubmitItem;
-		$[78] = menubar;
-		$[79] = syncSubmenuDisclosure;
-		$[80] = t34;
-	} else t34 = $[80];
-	const handleKeyDown = t34;
-	let t35;
-	if ($[81] !== 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
 		};
-		$[81] = handleKeyDown;
-		$[82] = t35;
-	} else t35 = $[82];
-	useKeyboardEvents(t35);
-	let t36;
-	if ($[83] !== closeDropdown || $[84] !== handleActiveItem || $[85] !== 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;
@@ -1130,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);
@@ -1149,8 +1201,8 @@ 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;
@@ -1192,52 +1244,52 @@ function RootDropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[83] = closeDropdown;
-		$[84] = handleActiveItem;
-		$[85] = isOpenOnMount;
-		$[86] = t36;
-	} else t36 = $[86];
-	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 ($[87] === Symbol.for("react.memo_cache_sentinel")) {
-			t38 = () => setIsOpen(true);
-			$[87] = t38;
-		} else t38 = $[87];
-		let t39;
-		if ($[88] !== bodyId || $[89] !== disabled || $[90] !== isOpen || $[91] !== name || $[92] !== placeholder || $[93] !== popupRole || $[94] !== t37 || $[95] !== 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"
 			});
-			$[88] = bodyId;
-			$[89] = disabled;
-			$[90] = isOpen;
-			$[91] = name;
-			$[92] = placeholder;
-			$[93] = popupRole;
-			$[94] = t37;
-			$[95] = tabIndex;
-			$[96] = t39;
-		} else t39 = $[96];
-		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 ($[97] !== bodyId || $[98] !== isOpen || $[99] !== popupRole || $[100] !== 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,
@@ -1246,82 +1298,82 @@ function RootDropdown(t0) {
 				type: "button",
 				children: trigger
 			});
-			$[97] = bodyId;
-			$[98] = isOpen;
-			$[99] = popupRole;
-			$[100] = trigger;
-			$[101] = t37;
-		} else t37 = $[101];
-		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 ($[102] !== t37 || $[103] !== t38 || $[104] !== t39 || $[105] !== 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
 			});
-			$[102] = t37;
-			$[103] = t38;
-			$[104] = t39;
-			$[105] = t40;
-			$[106] = t41;
-		} else t41 = $[106];
-		trigger = t41;
+			$[110] = t42;
+			$[111] = t43;
+			$[112] = t44;
+			$[113] = t45;
+			$[114] = t46;
+		} else t46 = $[114];
+		trigger = t46;
 	}
 	if (label != null) {
-		let t37;
-		if ($[107] !== label) {
-			t37 = /* @__PURE__ */ jsx("div", {
+		let t42;
+		if ($[115] !== label) {
+			t42 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				children: label
 			});
-			$[107] = label;
-			$[108] = t37;
-		} else t37 = $[108];
-		let t38;
-		if ($[109] !== t37 || $[110] !== 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]
 			});
-			$[109] = t37;
-			$[110] = trigger;
-			$[111] = t38;
-		} else t38 = $[111];
-		trigger = t38;
+			$[117] = t42;
+			$[118] = trigger;
+			$[119] = t43;
+		} else t43 = $[119];
+		trigger = t43;
 	}
-	let t37;
-	if ($[112] === 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
 		});
-		$[112] = t37;
-	} else t37 = $[112];
-	let t38;
-	if ($[113] !== className || $[114] !== disabled || $[115] !== isOpen || $[116] !== 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
 		});
-		$[113] = className;
-		$[114] = disabled;
-		$[115] = isOpen;
-		$[116] = isSearchable;
-		$[117] = t38;
-	} else t38 = $[117];
-	let t39;
-	if ($[118] !== bodyId || $[119] !== children || $[120] !== childrenCount || $[121] !== hasItems || $[122] !== isOpen || $[123] !== 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",
@@ -1335,42 +1387,46 @@ function RootDropdown(t0) {
 				})
 			})
 		}) : null;
-		$[118] = bodyId;
-		$[119] = children;
-		$[120] = childrenCount;
-		$[121] = hasItems;
-		$[122] = isOpen;
-		$[123] = popupRole;
-		$[124] = t39;
-	} else t39 = $[124];
-	let t40;
-	if ($[125] !== handleMouseDown || $[126] !== handleMouseMove || $[127] !== handleMouseOut || $[128] !== handleMouseOver || $[129] !== handleMouseUp || $[130] !== handleRef || $[131] !== onClick || $[132] !== styleFromProps || $[133] !== t38 || $[134] !== t39 || $[135] !== 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]
 		})] });
-		$[125] = handleMouseDown;
-		$[126] = handleMouseMove;
-		$[127] = handleMouseOut;
-		$[128] = handleMouseOver;
-		$[129] = handleMouseUp;
-		$[130] = handleRef;
-		$[131] = onClick;
-		$[132] = styleFromProps;
-		$[133] = t38;
-		$[134] = t39;
-		$[135] = trigger;
-		$[136] = t40;
-	} else t40 = $[136];
-	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;
@@ -1384,6 +1440,7 @@ var INERT_SUBMENU_PROPS = [
 	"isSearchable",
 	"keepOpenOnSubmit",
 	"name",
+	"openOnHover",
 	"placeholder",
 	"tabIndex",
 	"value"