@acusti/dropdown 1.0.0 → 1.1.1

package/dist/Dropdown.js

@@ -19,6 +19,18 @@ var LIST_CONTAINER_SELECTOR = "menu, ol, ul";
 var DISABLED_ITEM_SELECTOR = "[aria-disabled=\"true\"]";
 var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
 var getBodyElement = (dropdownElement) => dropdownElement?.querySelector(".uktdropdown-body") ?? null;
+var isInOwnBody = (dropdownElement, element) => {
+	const bodyElement = element.closest(BODY_SELECTOR);
+	return bodyElement != null && bodyElement.closest(".uktdropdown") === dropdownElement;
+};
+var isFormlessTextInput = (element) => {
+	if (element.tagName !== "INPUT") return false;
+	const { form, type } = element;
+	return form == null && !NON_TEXT_INPUT_TYPES.includes(type);
+};
+var isMultilineTextField = (element) => element.tagName === "TEXTAREA" || element.isContentEditable;
+var isIMEKeyEvent = (event) => event.isComposing || event.keyCode === 229;
+var isSubmitKey = (event) => event.key === "Enter" && !event.defaultPrevented;
 var getLevelRoot = (element) => element.closest(SUBMENU_SELECTOR);
 var getSubmenuOfItem = (item) => {
 	const submenu = item.querySelector(SUBMENU_SELECTOR);
@@ -569,7 +581,7 @@ function Dropdown(props) {
 	return t0;
 }
 function RootDropdown(t0) {
-	const $ = c(193);
+	const $ = c(199);
 	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;
@@ -1042,7 +1054,7 @@ function RootDropdown(t0) {
 	}
 	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) {
+	if ($[71] !== allowCreate || $[72] !== allowEmpty || $[73] !== closeDropdown || $[74] !== dropdownElement || $[75] !== focusTrigger || $[76] !== handleActiveItem || $[77] !== hasItems || $[78] !== keepOpenOnSubmit || $[79] !== onSubmitItem || $[80] !== popupRole || $[81] !== valueIdentity) {
 		t38 = (event_1) => {
 			const element_0 = hasItems ? getActiveItemElement(dropdownElement) : null;
 			const submenuOfActive = element_0 ? getSubmenuOfItem(element_0) : null;
@@ -1060,7 +1072,11 @@ function RootDropdown(t0) {
 				}
 				return;
 			}
-			if (isOpenRef.current && !keepOpenOnSubmit) closingTimerRef.current = setTimeout(closeDropdown, 90);
+			if (isOpenRef.current && !keepOpenOnSubmit) closingTimerRef.current = setTimeout(() => {
+				const activeElement_0 = dropdownElement?.ownerDocument.activeElement;
+				if (!hasItems && activeElement_0 && isInOwnBody(dropdownElement, activeElement_0)) focusTrigger();
+				closeDropdown();
+			}, 90);
 			if (!hasItems) return;
 			if (!element_0) {
 				if (!inputElementRef.current) return;
@@ -1107,17 +1123,18 @@ function RootDropdown(t0) {
 		$[72] = allowEmpty;
 		$[73] = closeDropdown;
 		$[74] = dropdownElement;
-		$[75] = handleActiveItem;
-		$[76] = hasItems;
-		$[77] = keepOpenOnSubmit;
-		$[78] = onSubmitItem;
-		$[79] = popupRole;
-		$[80] = valueIdentity;
-		$[81] = t38;
-	} else t38 = $[81];
+		$[75] = focusTrigger;
+		$[76] = handleActiveItem;
+		$[77] = hasItems;
+		$[78] = keepOpenOnSubmit;
+		$[79] = onSubmitItem;
+		$[80] = popupRole;
+		$[81] = valueIdentity;
+		$[82] = t38;
+	} else t38 = $[82];
 	const handleSubmitItem = t38;
 	let t39;
-	if ($[82] !== trackSafeArea) {
+	if ($[83] !== trackSafeArea) {
 		t39 = (event_2) => {
 			const { clientX, clientY } = event_2;
 			currentInputMethodRef.current = "mouse";
@@ -1127,12 +1144,12 @@ function RootDropdown(t0) {
 			if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
 			endOpeningPress();
 		};
-		$[82] = trackSafeArea;
-		$[83] = t39;
-	} else t39 = $[83];
+		$[83] = trackSafeArea;
+		$[84] = t39;
+	} else t39 = $[84];
 	const handleMouseMove = t39;
 	let t40;
-	if ($[84] !== dropdownElement || $[85] !== handleActiveItem || $[86] !== hasItems || $[87] !== syncSubmenuDisclosure) {
+	if ($[85] !== dropdownElement || $[86] !== handleActiveItem || $[87] !== hasItems || $[88] !== syncSubmenuDisclosure) {
 		t40 = (event_3) => {
 			if (!hasItems) return;
 			if (currentInputMethodRef.current !== "mouse") return;
@@ -1152,15 +1169,15 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[84] = dropdownElement;
-		$[85] = handleActiveItem;
-		$[86] = hasItems;
-		$[87] = syncSubmenuDisclosure;
-		$[88] = t40;
-	} else t40 = $[88];
+		$[85] = dropdownElement;
+		$[86] = handleActiveItem;
+		$[87] = hasItems;
+		$[88] = syncSubmenuDisclosure;
+		$[89] = t40;
+	} else t40 = $[89];
 	const handleMouseOver = t40;
 	let t41;
-	if ($[89] !== dropdownElement || $[90] !== hasItems || $[91] !== syncSubmenuDisclosure) {
+	if ($[90] !== dropdownElement || $[91] !== hasItems || $[92] !== syncSubmenuDisclosure) {
 		t41 = (event_4) => {
 			if (!hasItems) return;
 			const relatedTarget = event_4.relatedTarget;
@@ -1177,14 +1194,14 @@ function RootDropdown(t0) {
 			clearActiveItems(dropdownElement, activeItem);
 			syncSubmenuDisclosure();
 		};
-		$[89] = dropdownElement;
-		$[90] = hasItems;
-		$[91] = syncSubmenuDisclosure;
-		$[92] = t41;
-	} else t41 = $[92];
+		$[90] = dropdownElement;
+		$[91] = hasItems;
+		$[92] = syncSubmenuDisclosure;
+		$[93] = t41;
+	} else t41 = $[93];
 	const handleMouseOut = t41;
 	let t42;
-	if ($[93] !== disabled || $[94] !== onMouseDown) {
+	if ($[94] !== disabled || $[95] !== onMouseDown) {
 		t42 = (event_5) => {
 			if (onMouseDown) onMouseDown(event_5);
 			if (disabled || isOpenRef.current) return;
@@ -1199,21 +1216,20 @@ function RootDropdown(t0) {
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[93] = disabled;
-		$[94] = onMouseDown;
-		$[95] = t42;
-	} else t42 = $[95];
+		$[94] = disabled;
+		$[95] = onMouseDown;
+		$[96] = t42;
+	} else t42 = $[96];
 	const handleMouseDown = t42;
 	let t43;
-	if ($[96] !== closeDropdown || $[97] !== dropdownElement || $[98] !== handleActiveItem || $[99] !== handleSubmitItem || $[100] !== hasItems || $[101] !== onMouseUp) {
+	if ($[97] !== closeDropdown || $[98] !== dropdownElement || $[99] !== handleActiveItem || $[100] !== handleSubmitItem || $[101] !== hasItems || $[102] !== onMouseUp) {
 		t43 = (event_6) => {
 			if (onMouseUp) onMouseUp(event_6);
 			if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
 			const eventTarget_1 = event_6.target;
 			const clickedRoot = eventTarget_1.closest(".uktdropdown");
 			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 (!isInOwnBody(dropdownElement, eventTarget_1)) {
 				if (inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
 				return;
 			}
@@ -1230,21 +1246,22 @@ function RootDropdown(t0) {
 			}
 			handleSubmitItem(event_6);
 		};
-		$[96] = closeDropdown;
-		$[97] = dropdownElement;
-		$[98] = handleActiveItem;
-		$[99] = handleSubmitItem;
-		$[100] = hasItems;
-		$[101] = onMouseUp;
-		$[102] = t43;
-	} else t43 = $[102];
+		$[97] = closeDropdown;
+		$[98] = dropdownElement;
+		$[99] = handleActiveItem;
+		$[100] = handleSubmitItem;
+		$[101] = hasItems;
+		$[102] = onMouseUp;
+		$[103] = t43;
+	} else t43 = $[103];
 	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) {
+	if ($[104] !== allowCreate || $[105] !== closeDropdown || $[106] !== disabled || $[107] !== dropdownElement || $[108] !== focusTrigger || $[109] !== handleActiveItem || $[110] !== handleSubmitItem || $[111] !== hasItems || $[112] !== menubar || $[113] !== syncSubmenuDisclosure) {
 		t44 = (event_7) => {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
+			if (isIMEKeyEvent(event_7)) return;
 			const onEventHandled = () => {
 				event_7.stopPropagation();
 				event_7.preventDefault();
@@ -1258,7 +1275,7 @@ function RootDropdown(t0) {
 				if (disabled) return;
 				if (key_0 === " " || key_0 === "Enter" || hasItems && (key_0 === "ArrowUp" || key_0 === "ArrowDown")) {
 					onEventHandled();
-					setIsOpen(true);
+					if (!event_7.repeat) setIsOpen(true);
 				}
 				return;
 			}
@@ -1286,12 +1303,26 @@ function RootDropdown(t0) {
 					return;
 				}
 			}
+			if (!hasItems && (key_0 === "Enter" || key_0 === " ")) {
+				if (isEventTargetingDropdown) {
+					if (isInOwnBody(dropdownElement, eventTarget_2)) {
+						if (isSubmitKey(event_7) && eventTarget_2.closest(".uktdropdown") === dropdownElement && isFormlessTextInput(eventTarget_2)) handleSubmitItem(event_7);
+						return;
+					}
+					if (!isTargetUsingKeyEvents || eventTarget_2.matches(CLICKABLE_SELECTOR)) {
+						onEventHandled();
+						if (!event_7.repeat) closeDropdown();
+						return;
+					}
+					if (isMultilineTextField(eventTarget_2) || !isSubmitKey(event_7)) return;
+				} else if (isTargetUsingKeyEvents || !eventTarget_2.contains(dropdownElement)) return;
+			}
 			if (key_0 === "Enter" || key_0 === " " && !inputElementRef.current) {
 				onEventHandled();
-				handleSubmitItem(event_7);
+				if (!event_7.repeat) handleSubmitItem(event_7);
 				return;
 			}
-			if (key_0 === "Escape" || isEventTargetingDropdown && key_0 === " " && !hasItems) {
+			if (key_0 === "Escape") {
 				if (hasItems || !isTargetUsingKeyEvents) {
 					focusTrigger();
 					closeDropdown();
@@ -1346,12 +1377,12 @@ function RootDropdown(t0) {
 				}
 				if (!isTargetUsingKeyEvents) {
 					if (key_0 === "ArrowRight") {
-						const activeElement_0 = getActiveItemElement(dropdownElement);
-						const submenu_3 = activeElement_0 ? getSubmenuOfItem(activeElement_0) : null;
-						if (activeElement_0 && submenu_3) {
+						const activeElement_1 = getActiveItemElement(dropdownElement);
+						const submenu_3 = activeElement_1 ? getSubmenuOfItem(activeElement_1) : null;
+						if (activeElement_1 && submenu_3) {
 							onEventHandled();
 							clearDisclosureTimer();
-							expandItem(activeElement_0, handleToggleSubmenu);
+							expandItem(activeElement_1, handleToggleSubmenu);
 							const firstItem_0 = getItemElements(dropdownElement, submenu_3)?.[0];
 							if (firstItem_0) setActiveItem({
 								dropdownElement,
@@ -1368,8 +1399,8 @@ function RootDropdown(t0) {
 						return;
 					}
 					if (key_0 === "ArrowLeft") {
-						const activeElement_1 = getActiveItemElement(dropdownElement);
-						const levelRoot = activeElement_1 ? getLevelRoot(activeElement_1) : null;
+						const activeElement_2 = getActiveItemElement(dropdownElement);
+						const levelRoot = activeElement_2 ? getLevelRoot(activeElement_2) : null;
 						if (levelRoot) {
 							onEventHandled();
 							clearDisclosureTimer();
@@ -1386,32 +1417,44 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[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];
+		$[104] = allowCreate;
+		$[105] = closeDropdown;
+		$[106] = disabled;
+		$[107] = dropdownElement;
+		$[108] = focusTrigger;
+		$[109] = handleActiveItem;
+		$[110] = handleSubmitItem;
+		$[111] = hasItems;
+		$[112] = menubar;
+		$[113] = syncSubmenuDisclosure;
+		$[114] = t44;
+	} else t44 = $[114];
 	const handleKeyDown = t44;
 	let t45;
-	if ($[114] !== handleKeyDown) {
+	if ($[115] !== handleKeyDown) {
 		t45 = {
 			ignoreUsedKeyboardEvents: false,
 			onKeyDown: handleKeyDown
 		};
-		$[114] = handleKeyDown;
-		$[115] = t45;
-	} else t45 = $[115];
+		$[115] = handleKeyDown;
+		$[116] = t45;
+	} else t45 = $[116];
 	useKeyboardEvents(t45);
 	let t46;
-	if ($[116] !== allowCreate || $[117] !== closeDropdown || $[118] !== disabled || $[119] !== handleActiveItem) {
-		t46 = (ref) => {
+	if ($[117] !== dropdownElement || $[118] !== handleSubmitItem || $[119] !== hasItems) {
+		t46 = (event_8) => {
+			if (hasItems || !isInOwnBody(dropdownElement, event_8.target)) return;
+			handleSubmitItem(event_8);
+		};
+		$[117] = dropdownElement;
+		$[118] = handleSubmitItem;
+		$[119] = hasItems;
+		$[120] = t46;
+	} else t46 = $[120];
+	const handleBodySubmit = t46;
+	let t47;
+	if ($[121] !== allowCreate || $[122] !== closeDropdown || $[123] !== disabled || $[124] !== handleActiveItem) {
+		t47 = (ref) => {
 			setDropdownElement(ref);
 			if (!ref) return;
 			const { ownerDocument } = ref;
@@ -1421,13 +1464,13 @@ function RootDropdown(t0) {
 				else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
 				inputElementRef.current = inputElement;
 			}
-			const handleGlobalMouseDown = (t47) => {
-				const { target: target_1 } = t47;
+			const handleGlobalMouseDown = (t48) => {
+				const { target: target_1 } = t48;
 				const eventTarget_3 = target_1;
 				if (!ref.contains(eventTarget_3)) closeDropdown();
 			};
-			const handleGlobalMouseUp = (t48) => {
-				const { target: target_2 } = t48;
+			const handleGlobalMouseUp = (t49) => {
+				const { target: target_2 } = t49;
 				if (!isOpenRef.current || closingTimerRef.current != null) return;
 				if (isOpeningRef.current) {
 					endOpeningPress();
@@ -1436,8 +1479,8 @@ function RootDropdown(t0) {
 				const eventTarget_4 = target_2;
 				if (!ref.contains(eventTarget_4)) closeDropdown();
 			};
-			const handleGlobalFocusIn = (t49) => {
-				const { target: target_3 } = t49;
+			const handleGlobalFocusIn = (t50) => {
+				const { target: target_3 } = t50;
 				if (!isOpenRef.current) return;
 				const eventTarget_5 = target_3;
 				if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
@@ -1451,16 +1494,16 @@ function RootDropdown(t0) {
 				ownerDocument.addEventListener("mousedown", handleGlobalMouseDown);
 				ownerDocument.addEventListener("mouseup", handleGlobalMouseUp);
 			}
-			const handleInput = (event_8) => {
+			const handleInput = (event_9) => {
 				if (disabled) return;
 				if (!isOpenRef.current) setIsOpen(true);
-				const input = event_8.target;
+				const input = event_9.target;
 				const isDeleting = enteredCharactersRef.current.length > input.value.length;
 				enteredCharactersRef.current = input.value;
 				if (isDeleting && input.value.length && getActiveItemElement(ref)) return;
 				setActiveItem({
 					dropdownElement: ref,
-					event: event_8,
+					event: event_9,
 					isExactMatch: allowCreate,
 					onActiveItem: handleActiveItem,
 					text: enteredCharactersRef.current
@@ -1479,16 +1522,16 @@ function RootDropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[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) => {
+		$[121] = allowCreate;
+		$[122] = closeDropdown;
+		$[123] = disabled;
+		$[124] = handleActiveItem;
+		$[125] = t47;
+	} else t47 = $[125];
+	const handleRef = t47;
+	let t48;
+	if ($[126] !== dropdownElement || $[127] !== popupRole || $[128] !== valueIdentity) {
+		t48 = (ref_0) => {
 			if (!ref_0) return;
 			if (annotatedElementsRef.current.has(ref_0)) return;
 			annotatedElementsRef.current.add(ref_0);
@@ -1506,82 +1549,82 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[121] = dropdownElement;
-		$[122] = popupRole;
-		$[123] = valueIdentity;
-		$[124] = t47;
-	} else t47 = $[124];
-	const handleBodyRef = t47;
+		$[126] = dropdownElement;
+		$[127] = popupRole;
+		$[128] = valueIdentity;
+		$[129] = t48;
+	} else t48 = $[129];
+	const handleBodyRef = t48;
 	let bodyLabelledBy;
 	if (!isValidElement(trigger)) {
 		if (isSearchable) {
-			const t48 = valueLabel ?? "";
-			let t49;
-			if ($[125] === Symbol.for("react.memo_cache_sentinel")) {
-				t49 = () => setIsOpen(true);
-				$[125] = t49;
-			} else t49 = $[125];
+			const t49 = valueLabel ?? "";
 			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", {
+			if ($[130] === Symbol.for("react.memo_cache_sentinel")) {
+				t50 = () => setIsOpen(true);
+				$[130] = t50;
+			} else t50 = $[130];
+			let t51;
+			if ($[131] !== bodyId || $[132] !== disabled || $[133] !== isOpen || $[134] !== name || $[135] !== placeholder || $[136] !== popupRole || $[137] !== t49 || $[138] !== tabIndex || $[139] !== triggerId) {
+				t51 = /* @__PURE__ */ jsx("input", {
 					"aria-autocomplete": "list",
 					"aria-controls": bodyId,
 					"aria-expanded": isOpen,
 					"aria-haspopup": popupRole,
 					autoComplete: "off",
 					className: "uktdropdown-trigger",
-					defaultValue: t48,
+					defaultValue: t49,
 					disabled,
 					id: triggerId,
 					name,
-					onFocus: t49,
+					onFocus: t50,
 					placeholder,
 					ref: inputElementRef,
 					role: "combobox",
 					tabIndex,
 					type: "text"
 				});
-				$[126] = bodyId;
-				$[127] = disabled;
-				$[128] = isOpen;
-				$[129] = name;
-				$[130] = placeholder;
-				$[131] = popupRole;
-				$[132] = t48;
-				$[133] = tabIndex;
-				$[134] = triggerId;
-				$[135] = t50;
-			} else t50 = $[135];
-			trigger = t50;
+				$[131] = bodyId;
+				$[132] = disabled;
+				$[133] = isOpen;
+				$[134] = name;
+				$[135] = placeholder;
+				$[136] = popupRole;
+				$[137] = t49;
+				$[138] = tabIndex;
+				$[139] = triggerId;
+				$[140] = t51;
+			} else t51 = $[140];
+			trigger = t51;
 		} else {
 			bodyLabelledBy = triggerId;
-			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", {
+			const t49 = isMenubarItem ? "menuitem" : void 0;
+			const t50 = menubarTabIndex ?? 0;
+			let t51;
+			if ($[141] !== bodyId || $[142] !== disabled || $[143] !== isOpen || $[144] !== popupRole || $[145] !== t49 || $[146] !== t50 || $[147] !== trigger || $[148] !== triggerId) {
+				t51 = /* @__PURE__ */ jsx("button", {
 					"aria-controls": bodyId,
 					"aria-expanded": isOpen,
 					"aria-haspopup": popupRole,
 					className: "uktdropdown-trigger",
 					disabled,
 					id: triggerId,
-					role: t48,
-					tabIndex: t49,
+					role: t49,
+					tabIndex: t50,
 					type: "button",
 					children: trigger
 				});
-				$[136] = bodyId;
-				$[137] = disabled;
-				$[138] = isOpen;
-				$[139] = popupRole;
-				$[140] = t48;
-				$[141] = t49;
-				$[142] = trigger;
-				$[143] = triggerId;
-				$[144] = t50;
-			} else t50 = $[144];
-			trigger = t50;
+				$[141] = bodyId;
+				$[142] = disabled;
+				$[143] = isOpen;
+				$[144] = popupRole;
+				$[145] = t49;
+				$[146] = t50;
+				$[147] = trigger;
+				$[148] = triggerId;
+				$[149] = t51;
+			} else t51 = $[149];
+			trigger = t51;
 		}
 	} else {
 		const triggerProps = trigger.props;
@@ -1591,98 +1634,99 @@ 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 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,
+		const t49 = trigger;
+		const t50 = triggerProps["aria-autocomplete"] ?? (isCombobox ? "list" : void 0);
+		const t51 = triggerProps["aria-controls"] ?? bodyId;
+		const t52 = triggerProps["aria-disabled"] ?? (disabled || void 0);
+		const t53 = triggerProps["aria-expanded"] ?? (canExpand ? isOpen : void 0);
+		const t54 = triggerProps["aria-haspopup"] ?? popupRole;
+		const t55 = triggerProps.tabIndex ?? menubarTabIndex;
+		let t56;
+		if ($[150] !== resolvedTriggerId || $[151] !== t49 || $[152] !== t50 || $[153] !== t51 || $[154] !== t52 || $[155] !== t53 || $[156] !== t54 || $[157] !== t55 || $[158] !== triggerRole) {
+			t56 = cloneElement(t49, {
+				"aria-autocomplete": t50,
+				"aria-controls": t51,
+				"aria-disabled": t52,
+				"aria-expanded": t53,
+				"aria-haspopup": t54,
 				id: resolvedTriggerId,
 				role: triggerRole,
-				tabIndex: t54
+				tabIndex: t55
 			});
-			$[145] = resolvedTriggerId;
-			$[146] = t48;
-			$[147] = t49;
-			$[148] = t50;
-			$[149] = t51;
-			$[150] = t52;
-			$[151] = t53;
-			$[152] = t54;
-			$[153] = triggerRole;
-			$[154] = t55;
-		} else t55 = $[154];
-		trigger = t55;
+			$[150] = resolvedTriggerId;
+			$[151] = t49;
+			$[152] = t50;
+			$[153] = t51;
+			$[154] = t52;
+			$[155] = t53;
+			$[156] = t54;
+			$[157] = t55;
+			$[158] = triggerRole;
+			$[159] = t56;
+		} else t56 = $[159];
+		trigger = t56;
 	}
 	if (label != null) {
 		bodyLabelledBy = labelId;
-		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", {
+		const t50 = isMenubarMember ? "none" : void 0;
+		let t51;
+		if ($[160] !== label || $[161] !== labelId || $[162] !== t50) {
+			t51 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				id: labelId,
-				role: t49,
+				role: t50,
 				children: 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", {
+			$[160] = label;
+			$[161] = labelId;
+			$[162] = t50;
+			$[163] = t51;
+		} else t51 = $[163];
+		let t52;
+		if ($[164] !== t49 || $[165] !== t51 || $[166] !== trigger) {
+			t52 = /* @__PURE__ */ jsxs("label", {
 				className: "uktdropdown-label",
-				role: t48,
-				children: [t50, trigger]
+				role: t49,
+				children: [t51, trigger]
 			});
-			$[159] = t48;
-			$[160] = t50;
-			$[161] = trigger;
-			$[162] = t51;
-		} else t51 = $[162];
-		trigger = t51;
+			$[164] = t49;
+			$[165] = t51;
+			$[166] = trigger;
+			$[167] = t52;
+		} else t52 = $[167];
+		trigger = t52;
 	}
-	let t48;
-	if ($[163] === Symbol.for("react.memo_cache_sentinel")) {
-		t48 = /* @__PURE__ */ jsx("style", {
+	let t49;
+	if ($[168] === Symbol.for("react.memo_cache_sentinel")) {
+		t49 = /* @__PURE__ */ jsx("style", {
 			href: "@acusti/dropdown/Dropdown",
 			precedence: "medium",
 			children: Dropdown_default
 		});
-		$[163] = t48;
-	} else t48 = $[163];
-	let t49;
-	if ($[164] !== className || $[165] !== disabled || $[166] !== isOpen || $[167] !== isSearchable) {
-		t49 = clsx("uktdropdown", className, {
+		$[168] = t49;
+	} else t49 = $[168];
+	let t50;
+	if ($[169] !== className || $[170] !== disabled || $[171] !== isOpen || $[172] !== isSearchable) {
+		t50 = clsx("uktdropdown", className, {
 			"is-disabled": disabled,
 			"is-open": isOpen,
 			"is-searchable": isSearchable
 		});
-		$[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", {
+		$[169] = className;
+		$[170] = disabled;
+		$[171] = isOpen;
+		$[172] = isSearchable;
+		$[173] = t50;
+	} else t50 = $[173];
+	const t51 = isMenubarMember ? "none" : void 0;
+	let t52;
+	if ($[174] !== body || $[175] !== bodyId || $[176] !== bodyLabelledBy || $[177] !== dropdownContextValue || $[178] !== handleBodyRef || $[179] !== handleBodySubmit || $[180] !== hasItems || $[181] !== isOpen || $[182] !== popupRole) {
+		t52 = isOpen ? /* @__PURE__ */ jsx("div", {
 			"aria-labelledby": bodyLabelledBy,
 			className: clsx("uktdropdown-body", { "has-items": hasItems }),
 			id: bodyId,
+			onSubmit: handleBodySubmit,
 			popover: "manual",
 			ref: handleBodyRef,
 			role: popupRole,
@@ -1694,22 +1738,23 @@ function RootDropdown(t0) {
 				})
 			})
 		}) : null;
-		$[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,
+		$[174] = body;
+		$[175] = bodyId;
+		$[176] = bodyLabelledBy;
+		$[177] = dropdownContextValue;
+		$[178] = handleBodyRef;
+		$[179] = handleBodySubmit;
+		$[180] = hasItems;
+		$[181] = isOpen;
+		$[182] = popupRole;
+		$[183] = t52;
+	} else t52 = $[183];
+	let t53;
+	if ($[184] !== handleDropdownMouseEnter || $[185] !== handleDropdownMouseLeave || $[186] !== handleMouseDown || $[187] !== handleMouseMove || $[188] !== handleMouseOut || $[189] !== handleMouseOver || $[190] !== handleMouseUp || $[191] !== handleRef || $[192] !== onClick || $[193] !== styleFromProps || $[194] !== t50 || $[195] !== t51 || $[196] !== t52 || $[197] !== trigger) {
+		t53 = /* @__PURE__ */ jsxs(Fragment, { children: [t49, /* @__PURE__ */ jsxs("div", {
+			className: t50,
 			onClick,
-			role: t50,
+			role: t51,
 			onMouseDown: handleMouseDown,
 			onMouseEnter: handleDropdownMouseEnter,
 			onMouseLeave: handleDropdownMouseLeave,
@@ -1719,25 +1764,25 @@ function RootDropdown(t0) {
 			onMouseUp: handleMouseUp,
 			ref: handleRef,
 			style: styleFromProps,
-			children: [trigger, t51]
+			children: [trigger, t52]
 		})] });
-		$[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;
-		$[192] = t52;
-	} else t52 = $[192];
-	return t52;
+		$[184] = handleDropdownMouseEnter;
+		$[185] = handleDropdownMouseLeave;
+		$[186] = handleMouseDown;
+		$[187] = handleMouseMove;
+		$[188] = handleMouseOut;
+		$[189] = handleMouseOver;
+		$[190] = handleMouseUp;
+		$[191] = handleRef;
+		$[192] = onClick;
+		$[193] = styleFromProps;
+		$[194] = t50;
+		$[195] = t51;
+		$[196] = t52;
+		$[197] = trigger;
+		$[198] = t53;
+	} else t53 = $[198];
+	return t53;
 }
 var INERT_SUBMENU_PROPS = [
 	"allowCreate",