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

package/README.md

@@ -1,9 +1,10 @@
 # @acusti/dropdown
 
-[![latest version](https://img.shields.io/npm/v/@acusti/dropdown?style=for-the-badge)](https://www.npmjs.com/package/@acusti/dropdown)
-[![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/dropdown?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fdropdown)
-[![downloads per month](https://img.shields.io/npm/dm/@acusti/dropdown?style=for-the-badge)](https://www.npmjs.com/package/@acusti/dropdown)
-[![bundle size](https://deno.bundlejs.com/badge?q=@acusti/dropdown)](https://bundlejs.com/?q=%40acusti%2Fdropdown)
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/@acusti/dropdown)](https://npmx.dev/package/@acusti/dropdown)
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/size/@acusti/dropdown)](https://npmx.dev/package/@acusti/dropdown)
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/dependencies/@acusti/dropdown)](https://npmx.dev/package/@acusti/dropdown)
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/downloads-month/@acusti/dropdown)](https://npmx.dev/package/@acusti/dropdown)
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/updated/@acusti/dropdown)](https://npmx.dev/package/@acusti/dropdown)
 
 `Dropdown` is a React component that renders a menu-like UI with a trigger
 that the user clicks to disclose a dropdown anchored to that trigger. The
@@ -1042,7 +1043,8 @@ Menubar behaviors:
   tabbing away and back returns you where you were; it starts on (and falls
   back to) the first enabled member. A searchable member sits outside this
   — it’s a `combobox`, not a menu item, so it keeps its own native tab stop
-  and never takes the bar’s
+  and never takes the bar’s. ←/→ inside its input stay caret movement, and
+  the bar’s roving passes over it rather than landing in it
 - at most one menu in the bar is open at a time
 - opening a trigger’s menu (by click or keyboard) engages the bar
   (menu-mode). While engaged, hovering or focusing another trigger switches

package/dist/Dropdown.js

@@ -309,15 +309,15 @@ var compareDocumentOrder = (a, b) => {
 	return 0;
 };
 var NON_MENU_CONTROL_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
-var findNextEnabledMember = (members, fromIndex, direction) => {
+var canHoldTabStop = (member) => !member.isDisabled() && member.isMenuPopup();
+var findNextTargetMember = (members, fromIndex, direction) => {
 	const { length } = members;
 	for (let step = 1; step < length; step++) {
 		const member = members[((fromIndex + direction * step) % length + length) % length];
-		if (!member.isDisabled()) return member;
+		if (canHoldTabStop(member)) return member;
 	}
 	return null;
 };
-var canHoldTabStop = (member) => !member.isDisabled() && member.isMenuPopup();
 function Menubar(t0) {
 	const $ = c(22);
 	const { children, className, style } = t0;
@@ -365,7 +365,7 @@ function Menubar(t0) {
 				if (members_0.length < 2) return;
 				const index = members_0.findIndex((member_0) => member_0.element === fromElement);
 				if (index === -1) return;
-				const next = findNextEnabledMember(members_0, index, direction);
+				const next = findNextTargetMember(members_0, index, direction);
 				if (!next) return;
 				members_0[index].close();
 				next.open();
@@ -380,10 +380,18 @@ function Menubar(t0) {
 			},
 			registerMember(member_2) {
 				membersRef.current.add(member_2);
-				setTabbableElement((current) => current == null && canHoldTabStop(member_2) ? member_2.element : current);
+				setTabbableElement((current) => {
+					if (current == null) return canHoldTabStop(member_2) ? member_2.element : current;
+					if (current === member_2.element && !canHoldTabStop(member_2)) return null;
+					return current;
+				});
 				return () => {
 					membersRef.current.delete(member_2);
-					reconcile();
+					if (member_2.element !== tabbableElement) return;
+					queueMicrotask(() => {
+						for (const registered of membersRef.current) if (registered.element === member_2.element) return;
+						reconcile();
+					});
 				};
 			},
 			tabbableElement
@@ -397,15 +405,16 @@ function Menubar(t0) {
 		t6 = (event) => {
 			const { key } = event;
 			if (key !== "ArrowLeft" && key !== "ArrowRight") return;
+			if (isEventTargetUsingKeyEvent(event.nativeEvent)) return;
 			const members_1 = getOrderedMembers();
 			if (members_1.length < 2) return;
 			if (members_1.some(_temp2)) return;
 			const eventTarget = event.target;
 			const index_0 = members_1.findIndex((member_4) => member_4.element.contains(eventTarget));
-			if (index_0 === -1) return;
+			if (index_0 === -1 || !members_1[index_0].isMenuPopup()) return;
 			event.preventDefault();
 			event.stopPropagation();
-			const next_0 = findNextEnabledMember(members_1, index_0, key === "ArrowRight" ? 1 : -1);
+			const next_0 = findNextTargetMember(members_1, index_0, key === "ArrowRight" ? 1 : -1);
 			if (!next_0) return;
 			next_0.focusTrigger();
 		};
@@ -538,7 +547,7 @@ function RootDropdown(t0) {
 	const keepOpenOnSubmit = t3 === void 0 ? !hasItems : t3;
 	const childrenCount = Children.count(children);
 	if (childrenCount !== 1 && childrenCount !== 2) {
-		if (childrenCount === 0) throw new Error("@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body. Received no children.");
+		if (childrenCount === 0) throw new Error(CHILDREN_ERROR + " Received no children.");
 		console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
 	}
 	let trigger;
@@ -1468,76 +1477,77 @@ function RootDropdown(t0) {
 	} else t45 = $[120];
 	const handleBodyRef = t45;
 	let bodyLabelledBy;
-	if (!isValidElement(trigger)) if (isSearchable) {
-		const t46 = valueLabel ?? "";
-		let t47;
-		if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
-			t47 = () => setIsOpen(true);
-			$[121] = t47;
-		} else t47 = $[121];
-		let t48;
-		if ($[122] !== bodyId || $[123] !== disabled || $[124] !== isOpen || $[125] !== name || $[126] !== placeholder || $[127] !== popupRole || $[128] !== t46 || $[129] !== tabIndex || $[130] !== triggerId) {
-			t48 = /* @__PURE__ */ jsx("input", {
-				"aria-autocomplete": "list",
-				"aria-controls": bodyId,
-				"aria-expanded": isOpen,
-				"aria-haspopup": popupRole,
-				autoComplete: "off",
-				className: "uktdropdown-trigger",
-				defaultValue: t46,
-				disabled,
-				id: triggerId,
-				name,
-				onFocus: t47,
-				placeholder,
-				ref: inputElementRef,
-				role: "combobox",
-				tabIndex,
-				type: "text"
-			});
-			$[122] = bodyId;
-			$[123] = disabled;
-			$[124] = isOpen;
-			$[125] = name;
-			$[126] = placeholder;
-			$[127] = popupRole;
-			$[128] = t46;
-			$[129] = tabIndex;
-			$[130] = triggerId;
-			$[131] = t48;
-		} else t48 = $[131];
-		trigger = t48;
+	if (!isValidElement(trigger)) {
+		if (isSearchable) {
+			const t46 = valueLabel ?? "";
+			let t47;
+			if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
+				t47 = () => setIsOpen(true);
+				$[121] = t47;
+			} else t47 = $[121];
+			let t48;
+			if ($[122] !== bodyId || $[123] !== disabled || $[124] !== isOpen || $[125] !== name || $[126] !== placeholder || $[127] !== popupRole || $[128] !== t46 || $[129] !== tabIndex || $[130] !== triggerId) {
+				t48 = /* @__PURE__ */ jsx("input", {
+					"aria-autocomplete": "list",
+					"aria-controls": bodyId,
+					"aria-expanded": isOpen,
+					"aria-haspopup": popupRole,
+					autoComplete: "off",
+					className: "uktdropdown-trigger",
+					defaultValue: t46,
+					disabled,
+					id: triggerId,
+					name,
+					onFocus: t47,
+					placeholder,
+					ref: inputElementRef,
+					role: "combobox",
+					tabIndex,
+					type: "text"
+				});
+				$[122] = bodyId;
+				$[123] = disabled;
+				$[124] = isOpen;
+				$[125] = name;
+				$[126] = placeholder;
+				$[127] = popupRole;
+				$[128] = t46;
+				$[129] = tabIndex;
+				$[130] = triggerId;
+				$[131] = t48;
+			} else t48 = $[131];
+			trigger = t48;
+		} else {
+			bodyLabelledBy = triggerId;
+			const t46 = isMenubarItem ? "menuitem" : void 0;
+			const t47 = menubarTabIndex ?? 0;
+			let t48;
+			if ($[132] !== bodyId || $[133] !== disabled || $[134] !== isOpen || $[135] !== popupRole || $[136] !== t46 || $[137] !== t47 || $[138] !== trigger || $[139] !== triggerId) {
+				t48 = /* @__PURE__ */ jsx("button", {
+					"aria-controls": bodyId,
+					"aria-expanded": isOpen,
+					"aria-haspopup": popupRole,
+					className: "uktdropdown-trigger",
+					disabled,
+					id: triggerId,
+					role: t46,
+					tabIndex: t47,
+					type: "button",
+					children: trigger
+				});
+				$[132] = bodyId;
+				$[133] = disabled;
+				$[134] = isOpen;
+				$[135] = popupRole;
+				$[136] = t46;
+				$[137] = t47;
+				$[138] = trigger;
+				$[139] = triggerId;
+				$[140] = t48;
+			} else t48 = $[140];
+			trigger = t48;
+		}
 	} else {
-		bodyLabelledBy = triggerId;
-		const t46 = isMenubarItem ? "menuitem" : void 0;
-		const t47 = menubarTabIndex ?? 0;
-		let t48;
-		if ($[132] !== bodyId || $[133] !== disabled || $[134] !== isOpen || $[135] !== popupRole || $[136] !== t46 || $[137] !== t47 || $[138] !== trigger || $[139] !== triggerId) {
-			t48 = /* @__PURE__ */ jsx("button", {
-				"aria-controls": bodyId,
-				"aria-expanded": isOpen,
-				"aria-haspopup": popupRole,
-				className: "uktdropdown-trigger",
-				disabled,
-				id: triggerId,
-				role: t46,
-				tabIndex: t47,
-				type: "button",
-				children: trigger
-			});
-			$[132] = bodyId;
-			$[133] = disabled;
-			$[134] = isOpen;
-			$[135] = popupRole;
-			$[136] = t46;
-			$[137] = t47;
-			$[138] = trigger;
-			$[139] = triggerId;
-			$[140] = t48;
-		} else t48 = $[140];
-		trigger = t48;
-	}
-	else {
 		const triggerProps = trigger.props;
 		const resolvedTriggerId = triggerProps.id ?? triggerId;
 		const isTextInputTrigger = isTextInputElement(trigger);