@primer/react 38.37.1-rc.b8d706220 → 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/ActionList/Group.js

@@ -247,7 +247,7 @@ const GroupHeadingImpl = (t0) => {
 	const [slots, childrenWithoutSlots] = useSlots(children, t3);
 	const trailingAction = trailingActionEnabled ? slots.trailingAction : null;
 	const headingChildren = trailingActionEnabled ? childrenWithoutSlots : children;
-	if (trailingAction) !(listRole === void 0 || listRole === "list") && invariant(false, `ActionList.GroupHeading.TrailingAction can not be used inside an ActionList with an ARIA role of "${listRole}". Trailing actions on group headings are only supported in lists with the default "list" role.`);
+	if (trailingAction) listRole !== void 0 && listRole !== "list" && invariant(false, `ActionList.GroupHeading.TrailingAction can not be used inside an ActionList with an ARIA role of "${listRole}". Trailing actions on group headings are only supported in lists with the default "list" role.`);
 	const missingAsForList = (listRole === void 0 || listRole === "list") && children !== void 0 && as === void 0;
 	const unnecessaryAsForListboxOrMenu = listRole !== void 0 && listRole !== "list" && children !== void 0 && as !== void 0;
 	missingAsForList && invariant(false, "You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.");

package/dist/ActionList/Heading.js

@@ -41,7 +41,7 @@ const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const mergedRef = useMergedRefs(forwardedRef, innerRef);
 	const { headingId, variant: listVariant } = React.useContext(ListContext);
 	const { container } = React.useContext(ActionListContainerContext);
-	!(container !== "ActionMenu") && invariant(false, "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.");
+	container === "ActionMenu" && invariant(false, "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.");
 	const t2 = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : headingId;
 	let t3;
 	if ($[7] !== className || $[8] !== visuallyHidden) {

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/dist/experimental/SelectPanel2/SelectPanel.js

@@ -374,7 +374,7 @@ SecondaryLink.displayName = "SecondaryLink";
 const SecondaryCheckbox = ({ id, children, className, ...props }) => {
 	const checkboxId = useId$1(id);
 	const { selectionVariant } = React.useContext(SelectPanelContext);
-	!(selectionVariant !== "instant") && invariant(false, "Sorry! SelectPanel.SecondaryAction with variant=\"checkbox\" is not allowed inside selectionVariant=\"instant\"");
+	selectionVariant === "instant" && invariant(false, "Sorry! SelectPanel.SecondaryAction with variant=\"checkbox\" is not allowed inside selectionVariant=\"instant\"");
 	return /*#__PURE__*/ jsxs("div", {
 		className: SelectPanel_module_css_default.SecondaryCheckbox,
 		children: [/*#__PURE__*/ jsx(Checkbox, {

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -121,13 +121,13 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 			return ariaSelected === true || ariaSelected === "true";
 		});
 		!(selectedTabs.length <= 1) && invariant(false, "Only one tab can be selected at a time.");
-		!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
+		tabs.length !== tabPanels.length && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
 		const duplicateTabValue = tabValues.find((value, index) => tabValues.indexOf(value) !== index);
-		!(duplicateTabValue === void 0) && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
+		duplicateTabValue !== void 0 && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
 		const duplicatePanelValue = panelValues.find((value, index) => panelValues.indexOf(value) !== index);
-		!(duplicatePanelValue === void 0) && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
+		duplicatePanelValue !== void 0 && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
 		const unmatchedTabValue = tabValues.find((value) => !panelValues.includes(value));
-		!(unmatchedTabValue === void 0) && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
+		unmatchedTabValue !== void 0 && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
 		warning(isControlled && selectedTabs.length > 0, "UnderlinePanels: do not combine the controlled `value` prop with `aria-selected` on a tab. `value` takes precedence; use `value`/`onChange` (or `defaultValue`) to drive selection.");
 		warning(controlledValue !== void 0 && defaultValue !== void 0, "UnderlinePanels: do not combine the controlled `value` prop with `defaultValue`. `value` takes precedence; use one or the other.");
 		const providedValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.37.1-rc.b8d706220",
+  "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",
@@ -108,12 +108,12 @@
     "@primer/doc-gen": "^0.0.1",
     "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@storybook/addon-a11y": "10.5.7",
-    "@storybook/addon-docs": "10.5.7",
-    "@storybook/addon-links": "10.5.7",
+    "@storybook/addon-a11y": "10.5.8",
+    "@storybook/addon-docs": "10.5.8",
+    "@storybook/addon-links": "10.5.8",
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/icons": "^2.1.0",
-    "@storybook/react-vite": "10.5.7",
+    "@storybook/react-vite": "10.5.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -166,11 +166,11 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.2.3",
+    "rolldown": "^1.2.5",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",
-    "storybook": "10.5.7",
+    "storybook": "10.5.8",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",