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

package/README.md

@@ -709,12 +709,22 @@ The default rule, shown here for reference:
 }
 ```
 
-### Nested non-menu dropdowns
+### Nested independent dropdowns
 
-Nesting means submenu only for menus. A nested `Dropdown` with
-`hasItems={false}` isn’t a menu, so it renders as an independent anchored
-dropdown instead of a parent item — for example, an ℹ️ button next to an
-input in a form dropdown that opens an info popover about the input:
+Submenus are a menu concept: a `Dropdown` becomes a submenu only when it’s
+a menu nested inside another menu. Anything else nests as an
+**independent** anchored dropdown — opening on click and selecting items on
+click (no hover-disclosed parent item), with its interactions never
+touching the outer dropdown. Two cases qualify:
+
+- a `hasItems={false}` `Dropdown` (a dialog/popover) nested anywhere — e.g.
+  an ℹ️ info popover next to an input in a form dropdown (below);
+- any `Dropdown` nested inside a `hasItems={false}` dropdown — e.g. a
+  self-contained picker embedded in a larger dialog, which keeps full
+  click-to-select on its `data-ukt-value` items.
+
+For example, an ℹ️ button next to an input in a form dropdown that opens an
+info popover about the input:
 
 ```tsx
 <Dropdown hasItems={false}>
@@ -756,8 +766,16 @@ Menubar behaviors:
 
 - renders `role="menubar"`; each dropdown trigger is a menubar item
 - at most one menu in the bar is open at a time
-- once any menu is open, hovering another trigger switches to that menu
-  without a click (matching macOS menubar behavior)
+- opening a trigger’s menu (by click or keyboard) engages the bar
+  (menu-mode). While engaged, hovering or focusing another trigger switches
+  to that menu without a click, matching the macOS menu bar
+- while engaged, hovering a non-menu control in the bar (e.g. a plain
+  button placed alongside the dropdowns) closes the open menu but keeps the
+  bar engaged, so hovering back onto a trigger reopens a menu; sliding
+  across the gaps between triggers leaves the open menu alone
+- a deliberate dismissal — **Escape**, a click outside the bar, or
+  selecting an item — leaves menu-mode, after which hovering a trigger no
+  longer opens its menu until a menu is opened again to re-engage the bar
 - **←/→** move between menus, wrapping at the ends: with the bar focused
   they move focus between triggers, and while a menu is open they slide the
   open menu to the adjacent trigger — unless the active item is a parent

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();
 }
@@ -385,7 +396,7 @@ function Dropdown(props) {
 	return t0;
 }
 function RootDropdown(t0) {
-	const $ = c(130);
+	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 allowEmpty = t1 === void 0 ? true : t1;
 	const hasItems = t2 === void 0 ? true : t2;
@@ -699,8 +710,8 @@ function RootDropdown(t0) {
 	} else t22 = $[36];
 	const trackSafeArea = t22;
 	let t23;
-	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-		t23 = () => {
+	if ($[37] !== dropdownElement || $[38] !== menubar) {
+		t23 = (options) => {
 			setIsOpen(false);
 			setIsOpening(false);
 			mouseDownPositionRef.current = null;
@@ -712,42 +723,46 @@ function RootDropdown(t0) {
 				clearTimeout(closingTimerRef.current);
 				closingTimerRef.current = null;
 			}
+			if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
 		};
-		$[37] = t23;
-	} else t23 = $[37];
+		$[37] = dropdownElement;
+		$[38] = menubar;
+		$[39] = t23;
+	} else t23 = $[39];
 	const closeDropdown = t23;
 	let t24;
-	if ($[38] !== dropdownElement?.firstElementChild) {
+	if ($[40] !== dropdownElement?.firstElementChild) {
 		t24 = () => {
 			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];
+		$[40] = dropdownElement?.firstElementChild;
+		$[41] = t24;
+	} else t24 = $[41];
 	const focusTrigger = t24;
 	let t25;
-	if ($[40] !== dropdownElement || $[41] !== focusTrigger || $[42] !== menubar) {
+	if ($[42] !== closeDropdown || $[43] !== dropdownElement || $[44] !== focusTrigger || $[45] !== menubar) {
 		t25 = () => {
 			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];
+		$[42] = closeDropdown;
+		$[43] = dropdownElement;
+		$[44] = focusTrigger;
+		$[45] = menubar;
+		$[46] = t25;
+	} else t25 = $[46];
 	useEffect(t25);
 	let t26;
 	let t27;
-	if ($[44] !== dropdownElement || $[45] !== isOpen || $[46] !== menubar) {
+	if ($[47] !== dropdownElement || $[48] !== isOpen || $[49] !== menubar) {
 		t26 = () => {
 			if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
 		};
@@ -756,18 +771,18 @@ function RootDropdown(t0) {
 			isOpen,
 			menubar
 		];
-		$[44] = dropdownElement;
-		$[45] = isOpen;
-		$[46] = menubar;
-		$[47] = t26;
-		$[48] = t27;
+		$[47] = dropdownElement;
+		$[48] = isOpen;
+		$[49] = menubar;
+		$[50] = t26;
+		$[51] = t27;
 	} else {
-		t26 = $[47];
-		t27 = $[48];
+		t26 = $[50];
+		t27 = $[51];
 	}
 	useEffect(t26, t27);
 	let t28;
-	if ($[49] !== dropdownElement || $[50] !== handleActiveItem) {
+	if ($[52] !== closeDropdown || $[53] !== dropdownElement || $[54] !== handleActiveItem) {
 		t28 = (event_1) => {
 			const element = hasItemsRef.current ? getActiveItemElement(dropdownElement) : null;
 			const submenuOfActive = element ? getSubmenuOfItem(element) : null;
@@ -823,13 +838,14 @@ function RootDropdown(t0) {
 			onSubmitItemRef.current?.(payload_1);
 			dispatchToSubmenus("onSubmitItem", payload_1);
 		};
-		$[49] = dropdownElement;
-		$[50] = handleActiveItem;
-		$[51] = t28;
-	} else t28 = $[51];
+		$[52] = closeDropdown;
+		$[53] = dropdownElement;
+		$[54] = handleActiveItem;
+		$[55] = t28;
+	} else t28 = $[55];
 	const handleSubmitItem = t28;
 	let t29;
-	if ($[52] !== trackSafeArea) {
+	if ($[56] !== trackSafeArea) {
 		t29 = (event_2) => {
 			const { clientX, clientY } = event_2;
 			currentInputMethodRef.current = "mouse";
@@ -839,12 +855,12 @@ 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];
+		$[56] = trackSafeArea;
+		$[57] = t29;
+	} else t29 = $[57];
 	const handleMouseMove = t29;
 	let t30;
-	if ($[54] !== dropdownElement || $[55] !== handleActiveItem || $[56] !== syncSubmenuDisclosure) {
+	if ($[58] !== dropdownElement || $[59] !== handleActiveItem || $[60] !== syncSubmenuDisclosure) {
 		t30 = (event_3) => {
 			if (!hasItemsRef.current) return;
 			if (currentInputMethodRef.current !== "mouse") return;
@@ -864,14 +880,14 @@ function RootDropdown(t0) {
 			});
 			syncSubmenuDisclosure();
 		};
-		$[54] = dropdownElement;
-		$[55] = handleActiveItem;
-		$[56] = syncSubmenuDisclosure;
-		$[57] = t30;
-	} else t30 = $[57];
+		$[58] = dropdownElement;
+		$[59] = handleActiveItem;
+		$[60] = syncSubmenuDisclosure;
+		$[61] = t30;
+	} else t30 = $[61];
 	const handleMouseOver = t30;
 	let t31;
-	if ($[58] !== dropdownElement || $[59] !== syncSubmenuDisclosure) {
+	if ($[62] !== dropdownElement || $[63] !== syncSubmenuDisclosure) {
 		t31 = (event_4) => {
 			if (!hasItemsRef.current) return;
 			const relatedTarget = event_4.relatedTarget;
@@ -888,13 +904,13 @@ function RootDropdown(t0) {
 			delete activeItem.dataset.uktActive;
 			syncSubmenuDisclosure();
 		};
-		$[58] = dropdownElement;
-		$[59] = syncSubmenuDisclosure;
-		$[60] = t31;
-	} else t31 = $[60];
+		$[62] = dropdownElement;
+		$[63] = syncSubmenuDisclosure;
+		$[64] = t31;
+	} else t31 = $[64];
 	const handleMouseOut = t31;
 	let t32;
-	if ($[61] !== onMouseDown) {
+	if ($[65] !== onMouseDown) {
 		t32 = (event_5) => {
 			if (onMouseDown) onMouseDown(event_5);
 			if (isOpenRef.current) return;
@@ -909,12 +925,12 @@ function RootDropdown(t0) {
 				isOpeningTimerRef.current = null;
 			}, 1e3);
 		};
-		$[61] = onMouseDown;
-		$[62] = t32;
-	} else t32 = $[62];
+		$[65] = onMouseDown;
+		$[66] = t32;
+	} else t32 = $[66];
 	const handleMouseDown = t32;
 	let t33;
-	if ($[63] !== dropdownElement || $[64] !== handleActiveItem || $[65] !== handleSubmitItem || $[66] !== onMouseUp) {
+	if ($[67] !== closeDropdown || $[68] !== dropdownElement || $[69] !== handleActiveItem || $[70] !== handleSubmitItem || $[71] !== onMouseUp) {
 		t33 = (event_6) => {
 			if (onMouseUp) onMouseUp(event_6);
 			if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
@@ -939,15 +955,16 @@ function RootDropdown(t0) {
 			}
 			handleSubmitItem(event_6);
 		};
-		$[63] = dropdownElement;
-		$[64] = handleActiveItem;
-		$[65] = handleSubmitItem;
-		$[66] = onMouseUp;
-		$[67] = t33;
-	} else t33 = $[67];
+		$[67] = closeDropdown;
+		$[68] = dropdownElement;
+		$[69] = handleActiveItem;
+		$[70] = handleSubmitItem;
+		$[71] = onMouseUp;
+		$[72] = t33;
+	} else t33 = $[72];
 	const handleMouseUp = t33;
 	let t34;
-	if ($[68] !== dropdownElement || $[69] !== focusTrigger || $[70] !== handleActiveItem || $[71] !== handleSubmitItem || $[72] !== menubar || $[73] !== syncSubmenuDisclosure) {
+	if ($[73] !== closeDropdown || $[74] !== dropdownElement || $[75] !== focusTrigger || $[76] !== handleActiveItem || $[77] !== handleSubmitItem || $[78] !== menubar || $[79] !== syncSubmenuDisclosure) {
 		t34 = (event_7) => {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
@@ -1081,27 +1098,28 @@ function RootDropdown(t0) {
 				}
 			}
 		};
-		$[68] = dropdownElement;
-		$[69] = focusTrigger;
-		$[70] = handleActiveItem;
-		$[71] = handleSubmitItem;
-		$[72] = menubar;
-		$[73] = syncSubmenuDisclosure;
-		$[74] = t34;
-	} else t34 = $[74];
+		$[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 ($[75] !== handleKeyDown) {
+	if ($[81] !== handleKeyDown) {
 		t35 = {
 			ignoreUsedKeyboardEvents: false,
 			onKeyDown: handleKeyDown
 		};
-		$[75] = handleKeyDown;
-		$[76] = t35;
-	} else t35 = $[76];
+		$[81] = handleKeyDown;
+		$[82] = t35;
+	} else t35 = $[82];
 	useKeyboardEvents(t35);
 	let t36;
-	if ($[77] !== handleActiveItem || $[78] !== isOpenOnMount) {
+	if ($[83] !== closeDropdown || $[84] !== handleActiveItem || $[85] !== isOpenOnMount) {
 		t36 = (ref) => {
 			setDropdownElement(ref);
 			if (!ref) return;
@@ -1136,7 +1154,7 @@ function RootDropdown(t0) {
 				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,21 +1192,22 @@ function RootDropdown(t0) {
 				if (inputElement) inputElement.removeEventListener("input", handleInput);
 			};
 		};
-		$[77] = handleActiveItem;
-		$[78] = isOpenOnMount;
-		$[79] = t36;
-	} else t36 = $[79];
+		$[83] = closeDropdown;
+		$[84] = handleActiveItem;
+		$[85] = isOpenOnMount;
+		$[86] = t36;
+	} else t36 = $[86];
 	const handleRef = t36;
 	const handleBodyRef = _temp;
 	if (!isValidElement(trigger)) if (isSearchable) {
 		const t37 = value ?? "";
 		let t38;
-		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
 			t38 = () => setIsOpen(true);
-			$[80] = t38;
-		} else t38 = $[80];
+			$[87] = t38;
+		} else t38 = $[87];
 		let t39;
-		if ($[81] !== bodyId || $[82] !== disabled || $[83] !== isOpen || $[84] !== name || $[85] !== placeholder || $[86] !== popupRole || $[87] !== t37 || $[88] !== tabIndex) {
+		if ($[88] !== bodyId || $[89] !== disabled || $[90] !== isOpen || $[91] !== name || $[92] !== placeholder || $[93] !== popupRole || $[94] !== t37 || $[95] !== tabIndex) {
 			t39 = /* @__PURE__ */ jsx("input", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
@@ -1204,20 +1223,20 @@ function RootDropdown(t0) {
 				tabIndex,
 				type: "text"
 			});
-			$[81] = bodyId;
-			$[82] = disabled;
-			$[83] = isOpen;
-			$[84] = name;
-			$[85] = placeholder;
-			$[86] = popupRole;
-			$[87] = t37;
-			$[88] = tabIndex;
-			$[89] = t39;
-		} else t39 = $[89];
+			$[88] = bodyId;
+			$[89] = disabled;
+			$[90] = isOpen;
+			$[91] = name;
+			$[92] = placeholder;
+			$[93] = popupRole;
+			$[94] = t37;
+			$[95] = tabIndex;
+			$[96] = t39;
+		} else t39 = $[96];
 		trigger = t39;
 	} else {
 		let t37;
-		if ($[90] !== bodyId || $[91] !== isOpen || $[92] !== popupRole || $[93] !== trigger) {
+		if ($[97] !== bodyId || $[98] !== isOpen || $[99] !== popupRole || $[100] !== trigger) {
 			t37 = /* @__PURE__ */ jsx("button", {
 				"aria-controls": bodyId,
 				"aria-expanded": isOpen,
@@ -1227,12 +1246,12 @@ function RootDropdown(t0) {
 				type: "button",
 				children: trigger
 			});
-			$[90] = bodyId;
-			$[91] = isOpen;
-			$[92] = popupRole;
-			$[93] = trigger;
-			$[94] = t37;
-		} else t37 = $[94];
+			$[97] = bodyId;
+			$[98] = isOpen;
+			$[99] = popupRole;
+			$[100] = trigger;
+			$[101] = t37;
+		} else t37 = $[101];
 		trigger = t37;
 	}
 	else {
@@ -1242,66 +1261,66 @@ function RootDropdown(t0) {
 		const t39 = triggerProps["aria-expanded"] ?? isOpen;
 		const t40 = triggerProps["aria-haspopup"] ?? popupRole;
 		let t41;
-		if ($[95] !== t37 || $[96] !== t38 || $[97] !== t39 || $[98] !== t40) {
+		if ($[102] !== t37 || $[103] !== t38 || $[104] !== t39 || $[105] !== t40) {
 			t41 = cloneElement(t37, {
 				"aria-controls": t38,
 				"aria-expanded": t39,
 				"aria-haspopup": t40
 			});
-			$[95] = t37;
-			$[96] = t38;
-			$[97] = t39;
-			$[98] = t40;
-			$[99] = t41;
-		} else t41 = $[99];
+			$[102] = t37;
+			$[103] = t38;
+			$[104] = t39;
+			$[105] = t40;
+			$[106] = t41;
+		} else t41 = $[106];
 		trigger = t41;
 	}
 	if (label != null) {
 		let t37;
-		if ($[100] !== label) {
+		if ($[107] !== label) {
 			t37 = /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-label-text",
 				children: label
 			});
-			$[100] = label;
-			$[101] = t37;
-		} else t37 = $[101];
+			$[107] = label;
+			$[108] = t37;
+		} else t37 = $[108];
 		let t38;
-		if ($[102] !== t37 || $[103] !== trigger) {
+		if ($[109] !== t37 || $[110] !== trigger) {
 			t38 = /* @__PURE__ */ jsxs("label", {
 				className: "uktdropdown-label",
 				children: [t37, trigger]
 			});
-			$[102] = t37;
-			$[103] = trigger;
-			$[104] = t38;
-		} else t38 = $[104];
+			$[109] = t37;
+			$[110] = trigger;
+			$[111] = t38;
+		} else t38 = $[111];
 		trigger = t38;
 	}
 	let t37;
-	if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[112] === Symbol.for("react.memo_cache_sentinel")) {
 		t37 = /* @__PURE__ */ jsx("style", {
 			href: "@acusti/dropdown/Dropdown",
 			precedence: "medium",
 			children: Dropdown_default
 		});
-		$[105] = t37;
-	} else t37 = $[105];
+		$[112] = t37;
+	} else t37 = $[112];
 	let t38;
-	if ($[106] !== className || $[107] !== disabled || $[108] !== isOpen || $[109] !== isSearchable) {
+	if ($[113] !== className || $[114] !== disabled || $[115] !== isOpen || $[116] !== isSearchable) {
 		t38 = clsx("uktdropdown", className, {
 			disabled,
 			"is-open": isOpen,
 			"is-searchable": isSearchable
 		});
-		$[106] = className;
-		$[107] = disabled;
-		$[108] = isOpen;
-		$[109] = isSearchable;
-		$[110] = t38;
-	} else t38 = $[110];
+		$[113] = className;
+		$[114] = disabled;
+		$[115] = isOpen;
+		$[116] = isSearchable;
+		$[117] = t38;
+	} else t38 = $[117];
 	let t39;
-	if ($[111] !== bodyId || $[112] !== children || $[113] !== childrenCount || $[114] !== hasItems || $[115] !== isOpen || $[116] !== popupRole) {
+	if ($[118] !== bodyId || $[119] !== children || $[120] !== childrenCount || $[121] !== hasItems || $[122] !== isOpen || $[123] !== popupRole) {
 		t39 = isOpen ? /* @__PURE__ */ jsx("div", {
 			className: clsx("uktdropdown-body", { "has-items": hasItems }),
 			id: bodyId,
@@ -1311,21 +1330,21 @@ function RootDropdown(t0) {
 			children: /* @__PURE__ */ jsx("div", {
 				className: "uktdropdown-content",
 				children: /* @__PURE__ */ jsx(DropdownContext.Provider, {
-					value: dropdownContextValue,
+					value: hasItems ? dropdownContextValue : null,
 					children: childrenCount > 1 ? children[1] : children
 				})
 			})
 		}) : null;
-		$[111] = bodyId;
-		$[112] = children;
-		$[113] = childrenCount;
-		$[114] = hasItems;
-		$[115] = isOpen;
-		$[116] = popupRole;
-		$[117] = t39;
-	} else t39 = $[117];
+		$[118] = bodyId;
+		$[119] = children;
+		$[120] = childrenCount;
+		$[121] = hasItems;
+		$[122] = isOpen;
+		$[123] = popupRole;
+		$[124] = t39;
+	} else t39 = $[124];
 	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) {
+	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,
 			onClick,
@@ -1338,19 +1357,19 @@ function RootDropdown(t0) {
 			style: styleFromProps,
 			children: [trigger, t39]
 		})] });
-		$[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];
+		$[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;
 }
 function _temp(ref_0) {