@primer/react 38.37.1-rc.f8f4193e4 → 38.38.0-rc.8cc0fbde1

package/CHANGELOG.md

@@ -1,11 +1,19 @@
 # @primer/react
 
-## 38.37.1
+## 38.38.0
+
+### Minor Changes
+
+- [#8300](https://github.com/primer/react/pull/8300) [`3a32d6f`](https://github.com/primer/react/commit/3a32d6ff015b11dd2ac9bf299f8f558bb1e46ef5) Thanks [@joshblack](https://github.com/joshblack)! - Promote AriaStatus and AriaAlert from experimental to stable
 
 ### 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
 
+- [#8340](https://github.com/primer/react/pull/8340) [`a79d6c6`](https://github.com/primer/react/commit/a79d6c60ca23abce6f85502e1db78458f5fc3e90) Thanks [@ShiyunXu](https://github.com/ShiyunXu)! - UnderlineNav: Prevent external borders from incorrectly triggering the overflow menu
+
 ## 38.37.0
 
 ### Minor Changes

package/dist/ActionBar/ActionBar.js

@@ -8,9 +8,9 @@ import { useIsClipped } from "../internal/hooks/useOverflowObserver.js";
 import { OverflowObserverProvider } from "../internal/components/OverflowObserverProvider.js";
 import { createDescendantRegistry } from "../utils/descendant-registry.js";
 import ActionBar_module_css_default from "./ActionBar.module.css.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { KebabHorizontalIcon } from "@primer/octicons-react";
 //#region src/ActionBar/ActionBar.tsx
 const ActionBarContext = /*#__PURE__*/ React.createContext({ size: "medium" });

package/dist/ActionList/Description.js

@@ -2,9 +2,9 @@ import { ItemContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import Truncate from "../Truncate/Truncate.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/Description.tsx
 const Description = (t0) => {
 	const $ = c(26);

package/dist/ActionList/Divider.js

@@ -1,7 +1,7 @@
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/Divider.tsx
 /**
 * Visually separates `Items` or `Groups` in an `ActionList`.

package/dist/ActionList/Group.js

@@ -8,9 +8,9 @@ import Group_module_css_default from "./Group.module.css.js";
 import { GroupHeadingTrailingAction } from "./GroupHeadingTrailingAction.js";
 import { GroupContext } from "./GroupContext.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/Group.tsx
 const GROUP_HEADING_TRAILING_ACTION_FEATURE_FLAG = "primer_react_action_list_group_heading_trailing_action";
 const Heading = (t0) => {
@@ -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.");
@@ -255,7 +255,7 @@ const GroupHeadingImpl = (t0) => {
 	let t4;
 	if ($[10] !== _internalBackwardCompatibleTitle || $[11] !== as || $[12] !== auxiliaryText || $[13] !== className || $[14] !== groupHeadingId || $[15] !== headingChildren || $[16] !== headingWrapElement || $[17] !== listRole || $[18] !== props || $[19] !== trailingAction || $[20] !== variant) {
 		var _internalBackwardComp, _internalBackwardComp2;
-		t4 = /*#__PURE__*/ jsx(Fragment, { children: listRole && listRole !== "list" ? /*#__PURE__*/ jsxs(HeadingWrap, {
+		t4 = /*#__PURE__*/ jsx(Fragment$1, { children: listRole && listRole !== "list" ? /*#__PURE__*/ jsxs(HeadingWrap, {
 			role: "presentation",
 			className: Group_module_css_default.GroupHeadingWrap,
 			"aria-hidden": "true",

package/dist/ActionList/GroupHeadingTrailingAction.js

@@ -1,7 +1,7 @@
 import { IconButton } from "../Button/IconButton.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/ActionList/GroupHeadingTrailingAction.tsx
 /**
 * Props for `ActionList.GroupHeading.TrailingAction`.

package/dist/ActionList/Heading.js

@@ -6,9 +6,9 @@ import Heading$1 from "../Heading/Heading.js";
 import { ListContext } from "./shared.js";
 import Heading_module_css_default from "./Heading.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/Heading.tsx
 const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	var _props$id;
@@ -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/ActionList/Item.js

@@ -15,9 +15,9 @@ import { LeadingVisual, TrailingVisual, VisualOrIndicator } from "./Visuals.js";
 import { Selection } from "./Selection.js";
 import { TrailingAction } from "./TrailingAction.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/Item.tsx
 /**
 * Wraps button-semantic items with Tooltip, disabled when not truncated
@@ -49,7 +49,7 @@ const SubItem = (t0) => {
 	const { children } = t0;
 	let t1;
 	if ($[0] !== children) {
-		t1 = /*#__PURE__*/ jsx(Fragment, { children });
+		t1 = /*#__PURE__*/ jsx(Fragment$1, { children });
 		$[0] = children;
 		$[1] = t1;
 	} else t1 = $[1];

package/dist/ActionList/List.js

@@ -11,9 +11,9 @@ import { ListContext } from "./shared.js";
 import { Heading } from "./Heading.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/List.tsx
 const UnwrappedList = (props, forwardedRef) => {
 	var _slots$heading$props$;

package/dist/ActionList/Selection.js

@@ -5,8 +5,8 @@ import ActionList_module_css_default from "./ActionList.module.css.js";
 import { GroupContext } from "./GroupContext.js";
 import { VisualContainer } from "./Visuals.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 import { CheckIcon } from "@primer/octicons-react";
 //#region src/ActionList/Selection.tsx
 const Selection = (t0) => {

package/dist/ActionList/TrailingAction.js

@@ -2,9 +2,9 @@ import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/ActionList/TrailingAction.tsx
 const TrailingAction = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const $ = c(25);

package/dist/ActionList/Visuals.js

@@ -3,9 +3,9 @@ import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { ItemContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { AlertIcon } from "@primer/octicons-react";
 //#region src/ActionList/Visuals.tsx
 const VisualContainer = (t0) => {

package/dist/ActionMenu/ActionMenu.js

@@ -11,9 +11,9 @@ import { ActionListContainerContext } from "../ActionList/ActionListContainerCon
 import { Divider } from "../ActionList/Divider.js";
 import { AnchoredOverlay } from "../AnchoredOverlay/AnchoredOverlay.js";
 import ActionMenu_module_css_default from "./ActionMenu.module.css.js";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { ChevronRightIcon, TriangleDownIcon } from "@primer/octicons-react";
 //#region src/ActionMenu/ActionMenu.tsx
 const MenuContext = /*#__PURE__*/ React.createContext({

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -11,9 +11,9 @@ import { useFocusZone } from "../hooks/useFocusZone.js";
 import Overlay from "../Overlay/Overlay.js";
 import AnchoredOverlay_module_css_default from "./AnchoredOverlay.module.css.js";
 import { widthMap } from "../Overlay/constants.js";
-import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { XIcon } from "@primer/octicons-react";
 //#region src/AnchoredOverlay/AnchoredOverlay.tsx
 const defaultVariant = {
@@ -164,7 +164,7 @@ const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, anchorId:
 	const XButtonAriaLabelledBy = closeButtonProps["aria-labelledby"];
 	const XButtonAriaLabel = closeButtonProps["aria-label"];
 	const { className: overlayClassName, _PrivateDisablePortal, ...restOverlayProps } = overlayProps || {};
-	return /*#__PURE__*/ jsxs(Fragment, { children: [renderAnchor && renderAnchor({
+	return /*#__PURE__*/ jsxs(Fragment$1, { children: [renderAnchor && renderAnchor({
 		ref: anchorRef,
 		id: anchorId,
 		"aria-haspopup": "true",

package/dist/Autocomplete/Autocomplete.js

@@ -4,8 +4,8 @@ import AutocompleteInput from "./AutocompleteInput.js";
 import AutocompleteMenu from "./AutocompleteMenu.js";
 import AutocompleteOverlay from "./AutocompleteOverlay.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { useDeferredValue, useReducer, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/Autocomplete/Autocomplete.tsx
 const initialState = {
 	inputValue: "",

package/dist/Autocomplete/AutocompleteInput.js

@@ -2,11 +2,11 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import useSafeTimeout from "../hooks/useSafeTimeout.js";
 import { AutocompleteContext, AutocompleteInputContext } from "./AutocompleteContext.js";
 import TextInput_default from "../TextInput/TextInput.js";
-import { jsx } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#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

@@ -6,10 +6,10 @@ import { ActionList } from "../ActionList/index.js";
 import { AutocompleteContext, AutocompleteDeferredInputContext } from "./AutocompleteContext.js";
 import AutocompleteMenu_module_css_default from "./AutocompleteMenu.module.css.js";
 import { c } from "react-compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { announce } from "@primer/live-region-element";
 import React, { useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { scrollIntoView } from "@primer/behaviors";
-import { announce } from "@primer/live-region-element";
 import { isElement } from "react-is";
 import { PlusIcon } from "@primer/octicons-react";
 import { debounce } from "@github/mini-throttle";
@@ -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/Autocomplete/AutocompleteOverlay.js

@@ -5,9 +5,9 @@ import Overlay from "../Overlay/Overlay.js";
 import { AutocompleteContext } from "./AutocompleteContext.js";
 import AutocompleteOverlay_module_css_default from "./AutocompleteOverlay.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/Autocomplete/AutocompleteOverlay.tsx
 function AutocompleteOverlay(t0) {
 	const $ = c(29);

package/dist/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import Avatar_module_css_default from "./Avatar.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 const Avatar = /*#__PURE__*/ React.forwardRef(function Avatar(t0, ref) {
 	const $ = c(29);
 	let className;

package/dist/AvatarStack/AvatarStack.js

@@ -2,9 +2,9 @@ import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import AvatarStack_module_css_default from "./AvatarStack.module.css.js";
 import { hasInteractiveNodes } from "../internal/utils/hasInteractiveNodes.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/AvatarStack/AvatarStack.tsx
 const transformChildren = (children, shape) => {
 	return React.Children.map(children, (child) => {

package/dist/Banner/Banner.js

@@ -6,9 +6,9 @@ import { ButtonComponent } from "../Button/Button.js";
 import { useDevOnlyEffect } from "../internal/hooks/useDevOnlyEffect.js";
 import Banner_module_css_default from "./Banner.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { AlertIcon, CheckCircleIcon, InfoIcon, StopIcon, XIcon } from "@primer/octicons-react";
 //#region src/Banner/Banner.tsx
 const BannerContext = /*#__PURE__*/ React.createContext(void 0);

package/dist/BaseStyles.js

@@ -1,8 +1,8 @@
 import BaseStyles_module_css_default from "./BaseStyles.module.css.js";
 import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import "focus-visible";
-import { jsx } from "react/jsx-runtime";
 //#region src/BaseStyles.tsx
 function BaseStyles(t0) {
 	const $ = c(20);

package/dist/Blankslate/Blankslate.js

@@ -3,9 +3,9 @@ import Link from "../Link/Link.js";
 import { Provider, useBlankslate } from "./BlankslateContext.js";
 import Blankslate_module_css_default from "./Blankslate.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/Blankslate/Blankslate.tsx
 function Blankslate(t0) {
 	const $ = c(25);

package/dist/BranchName/BranchName.js

@@ -1,8 +1,8 @@
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import BranchName_module_css_default from "./BranchName.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/BranchName/BranchName.tsx
 function BranchName(props, ref) {
 	const $ = c(13);

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -8,9 +8,9 @@ import { ActionList } from "../ActionList/index.js";
 import Breadcrumbs_module_css_default from "./Breadcrumbs.module.css.js";
 import Details from "../Details/Details.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { KebabHorizontalIcon } from "@primer/octicons-react";
 //#region src/Breadcrumbs/Breadcrumbs.tsx
 const BreadcrumbsList = (t0) => {

package/dist/Button/Button.js

@@ -1,7 +1,7 @@
 import { ButtonBase } from "./ButtonBase.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/Button/Button.tsx
 const ButtonComponent = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const $ = c(7);