@primer/react 38.37.1-rc.c2576f920 → 38.37.1-rc.f1c7ced7b

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Patch Changes
 
+- [#8343](https://github.com/primer/react/pull/8343) [`7034e1f`](https://github.com/primer/react/commit/7034e1fbb754883b29a05fdf75eea8704359e7bb) Thanks [@llastflowers](https://github.com/llastflowers)! - Don't focus Autocomplete menu items while menu is closed: fix SR announcement bug and menu item skipping bug
+
 - [#8339](https://github.com/primer/react/pull/8339) [`1f5b99e`](https://github.com/primer/react/commit/1f5b99edc63e3989eb470d258c4d7b8703540f6b) Thanks [@ShiyunXu](https://github.com/ShiyunXu)! - Pin `box-sizing` with `!important` on the underline tabbed interface wrapper in wrap mode so external overrides can no longer offset its height budget and incorrectly trigger the overflow "more" menu
 
 ## 38.37.0

package/dist/Autocomplete/AutocompleteInput.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useState } from "react";
 //#region src/Autocomplete/AutocompleteInput.tsx
 const ARROW_KEYS_NAV = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown"]);
-const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = TextInput_default, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, openOnFocus = false, ...props }, forwardedRef) => {
+const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = TextInput_default, onFocus, onBlur, onChange, onKeyDown, onKeyDownCapture, onKeyUp, onKeyPress, value, openOnFocus = false, ...props }, forwardedRef) => {
 	const autocompleteContext = useContext(AutocompleteContext);
 	const inputContext = useContext(AutocompleteInputContext);
 	if (autocompleteContext === null || inputContext === null) throw new Error("AutocompleteContext returned null values");
@@ -60,6 +60,10 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
 		showMenu,
 		setShowMenu
 	]);
+	const handleInputKeyDownCapture = (event) => {
+		onKeyDownCapture === null || onKeyDownCapture === void 0 || onKeyDownCapture(event);
+		if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) event.preventDefault();
+	};
 	const handleInputKeyUp = useCallback((event) => {
 		onKeyUp === null || onKeyUp === void 0 || onKeyUp(event);
 		if (event.key === "Backspace") setHighlightRemainingText(true);
@@ -98,6 +102,7 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
 		onBlur: handleInputBlur,
 		onChange: handleInputChange,
 		onKeyDown: handleInputKeyDown,
+		onKeyDownCapture: handleInputKeyDownCapture,
 		onKeyPress: onInputKeyPress,
 		onKeyUp: handleInputKeyUp,
 		ref: mergedRef,

package/dist/Autocomplete/AutocompleteMenu.js

@@ -43,7 +43,7 @@ const debounceAnnouncement = debounce((announcement) => {
 	announce(announcement);
 }, 250);
 function AutocompleteMenu(props) {
-	const $ = c(78);
+	const $ = c(80);
 	const autocompleteContext = useContext(AutocompleteContext);
 	const deferredInputContext = useContext(AutocompleteDeferredInputContext);
 	if (autocompleteContext === null || deferredInputContext === null) throw new Error("AutocompleteContext returned null values");
@@ -188,9 +188,10 @@ function AutocompleteMenu(props) {
 		t11 = $[38];
 	}
 	React.useEffect(t10, t11);
-	let t12;
+	const t12 = !showMenu;
+	let t13;
 	if ($[39] !== activeDescendantRef || $[40] !== customScrollContainerRef || $[41] !== scrollContainerRef || $[42] !== setIsMenuDirectlyActivated) {
-		t12 = (current, _previous, directlyActivated) => {
+		t13 = (current, _previous, directlyActivated) => {
 			activeDescendantRef.current = current || null;
 			if (current) {
 				const selectedItem = allItemsToRenderRef.current.find((item_1) => {
@@ -207,102 +208,105 @@ function AutocompleteMenu(props) {
 		$[40] = customScrollContainerRef;
 		$[41] = scrollContainerRef;
 		$[42] = setIsMenuDirectlyActivated;
-		$[43] = t12;
-	} else t12 = $[43];
-	let t13;
-	if ($[44] !== inputRef || $[45] !== t12) {
-		t13 = {
+		$[43] = t13;
+	} else t13 = $[43];
+	let t14;
+	if ($[44] !== inputRef || $[45] !== t12 || $[46] !== t13) {
+		t14 = {
 			containerRef: listContainerRef,
+			disabled: t12,
 			focusOutBehavior: "wrap",
 			focusableElementFilter: _temp4,
 			activeDescendantFocus: inputRef,
-			onActiveDescendantChanged: t12
+			onActiveDescendantChanged: t13
 		};
 		$[44] = inputRef;
 		$[45] = t12;
 		$[46] = t13;
-	} else t13 = $[46];
-	let t14;
-	if ($[47] !== loading) {
-		t14 = [loading];
-		$[47] = loading;
-		$[48] = t14;
-	} else t14 = $[48];
-	useFocusZone(t13, t14);
+		$[47] = t14;
+	} else t14 = $[47];
 	let t15;
+	if ($[48] !== loading) {
+		t15 = [loading];
+		$[48] = loading;
+		$[49] = t15;
+	} else t15 = $[49];
+	useFocusZone(t14, t15);
 	let t16;
-	if ($[49] !== deferredInputValue || $[50] !== highlightedItem || $[51] !== selectedItemIds || $[52] !== setAutocompleteSuggestion) {
-		t15 = () => {
+	let t17;
+	if ($[50] !== deferredInputValue || $[51] !== highlightedItem || $[52] !== selectedItemIds || $[53] !== setAutocompleteSuggestion) {
+		t16 = () => {
 			var _highlightedItem$text;
 			if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(deferredInputValue) && !selectedItemIds.includes(highlightedItem.id)) setAutocompleteSuggestion(highlightedItem.text);
 			else setAutocompleteSuggestion("");
 		};
-		t16 = [
+		t17 = [
 			highlightedItem,
 			deferredInputValue,
 			selectedItemIds,
 			setAutocompleteSuggestion
 		];
-		$[49] = deferredInputValue;
-		$[50] = highlightedItem;
-		$[51] = selectedItemIds;
-		$[52] = setAutocompleteSuggestion;
-		$[53] = t15;
+		$[50] = deferredInputValue;
+		$[51] = highlightedItem;
+		$[52] = selectedItemIds;
+		$[53] = setAutocompleteSuggestion;
 		$[54] = t16;
+		$[55] = t17;
 	} else {
-		t15 = $[53];
 		t16 = $[54];
+		t17 = $[55];
 	}
-	useEffect(t15, t16);
-	let t17;
+	useEffect(t16, t17);
 	let t18;
-	if ($[55] !== onOpenChange || $[56] !== selectedItemIds || $[57] !== showMenu || $[58] !== sortOnCloseFn || $[59] !== sortedItemIds) {
-		t17 = () => {
+	let t19;
+	if ($[56] !== onOpenChange || $[57] !== selectedItemIds || $[58] !== showMenu || $[59] !== sortOnCloseFn || $[60] !== sortedItemIds) {
+		t18 = () => {
 			const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn((itemId_0) => isItemSelected(itemId_0, selectedItemIds)));
 			const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element_0, index) => element_0 === sortedItemIds[index]);
 			if (showMenu === false && !sortResultMatchesState) setSortedItemIds(itemIdSortResult);
 			onOpenChange && onOpenChange(Boolean(showMenu));
 		};
-		t18 = [
+		t19 = [
 			showMenu,
 			onOpenChange,
 			selectedItemIds,
 			sortOnCloseFn,
 			sortedItemIds
 		];
-		$[55] = onOpenChange;
-		$[56] = selectedItemIds;
-		$[57] = showMenu;
-		$[58] = sortOnCloseFn;
-		$[59] = sortedItemIds;
-		$[60] = t17;
+		$[56] = onOpenChange;
+		$[57] = selectedItemIds;
+		$[58] = showMenu;
+		$[59] = sortOnCloseFn;
+		$[60] = sortedItemIds;
 		$[61] = t18;
+		$[62] = t19;
 	} else {
-		t17 = $[60];
 		t18 = $[61];
+		t19 = $[62];
 	}
-	useEffect(t17, t18);
-	let t19;
-	if ($[62] !== selectedItemIds.length || $[63] !== setSelectedItemLength) {
-		t19 = () => {
+	useEffect(t18, t19);
+	let t20;
+	if ($[63] !== selectedItemIds.length || $[64] !== setSelectedItemLength) {
+		t20 = () => {
 			if (selectedItemIds.length) setSelectedItemLength(selectedItemIds.length);
 		};
-		$[62] = selectedItemIds.length;
-		$[63] = setSelectedItemLength;
-		$[64] = t19;
-	} else t19 = $[64];
-	let t20;
-	if ($[65] !== selectedItemIds || $[66] !== setSelectedItemLength) {
-		t20 = [selectedItemIds, setSelectedItemLength];
-		$[65] = selectedItemIds;
-		$[66] = setSelectedItemLength;
-		$[67] = t20;
-	} else t20 = $[67];
-	useEffect(t19, t20);
-	if (selectionVariant === "single" && selectedItemIds.length > 1) throw new Error("Autocomplete: selectionVariant \"single\" cannot be used with multiple selected items");
+		$[63] = selectedItemIds.length;
+		$[64] = setSelectedItemLength;
+		$[65] = t20;
+	} else t20 = $[65];
 	let t21;
-	if ($[68] !== allItemsToRender || $[69] !== ariaLabelledBy || $[70] !== emptyStateText || $[71] !== id || $[72] !== loading || $[73] !== selectionVariant) {
-		t21 = loading ? /*#__PURE__*/ jsx("div", {
+	if ($[66] !== selectedItemIds || $[67] !== setSelectedItemLength) {
+		t21 = [selectedItemIds, setSelectedItemLength];
+		$[66] = selectedItemIds;
+		$[67] = setSelectedItemLength;
+		$[68] = t21;
+	} else t21 = $[68];
+	useEffect(t20, t21);
+	if (selectionVariant === "single" && selectedItemIds.length > 1) throw new Error("Autocomplete: selectionVariant \"single\" cannot be used with multiple selected items");
+	const t22 = !showMenu;
+	let t23;
+	if ($[69] !== allItemsToRender || $[70] !== ariaLabelledBy || $[71] !== emptyStateText || $[72] !== id || $[73] !== loading || $[74] !== selectionVariant) {
+		t23 = loading ? /*#__PURE__*/ jsx("div", {
 			className: AutocompleteMenu_module_css_default.SpinnerWrapper,
 			children: /*#__PURE__*/ jsx(Spinner, {})
 		}) : /*#__PURE__*/ jsx("div", {
@@ -319,25 +323,27 @@ function AutocompleteMenu(props) {
 				children: emptyStateText
 			}) : null
 		});
-		$[68] = allItemsToRender;
-		$[69] = ariaLabelledBy;
-		$[70] = emptyStateText;
-		$[71] = id;
-		$[72] = loading;
-		$[73] = selectionVariant;
-		$[74] = t21;
-	} else t21 = $[74];
-	let t22;
-	if ($[75] !== showMenu || $[76] !== t21) {
-		t22 = /*#__PURE__*/ jsx(VisuallyHidden, {
+		$[69] = allItemsToRender;
+		$[70] = ariaLabelledBy;
+		$[71] = emptyStateText;
+		$[72] = id;
+		$[73] = loading;
+		$[74] = selectionVariant;
+		$[75] = t23;
+	} else t23 = $[75];
+	let t24;
+	if ($[76] !== showMenu || $[77] !== t22 || $[78] !== t23) {
+		t24 = /*#__PURE__*/ jsx(VisuallyHidden, {
 			isVisible: showMenu,
-			children: t21
+			hidden: t22,
+			children: t23
 		});
-		$[75] = showMenu;
-		$[76] = t21;
+		$[76] = showMenu;
 		$[77] = t22;
-	} else t22 = $[77];
-	return t22;
+		$[78] = t23;
+		$[79] = t24;
+	} else t24 = $[79];
+	return t24;
 }
 function _temp5(item_2) {
 	const { id: id_0, onAction, children, text, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, key, role, ...itemProps } = item_2;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.37.1-rc.c2576f920",
+  "version": "38.37.1-rc.f1c7ced7b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",