@primer/react 38.36.0-rc.7156e7efc → 38.36.0-rc.a1228eda5

package/CHANGELOG.md

@@ -7,6 +7,12 @@
 - [#8212](https://github.com/primer/react/pull/8212) [`9ac9343`](https://github.com/primer/react/commit/9ac9343a70fd0f70413a42cd27baf562a74dd4fc) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ThemeProvider: Add a CSS-variable-based implementation to `@primer/react/next`
   and deprecate the legacy JavaScript theme implementation.
 
+### Patch Changes
+
+- [#8276](https://github.com/primer/react/pull/8276) [`5069f8a`](https://github.com/primer/react/commit/5069f8a7cb95544ce14122e97d67c8a1279f8a08) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Portal: Render nothing while server rendering and during hydration instead of accessing the DOM during render, fixing server rendering support. Client-only renders are unchanged and still mount portaled content in the same commit.
+
+- [#8260](https://github.com/primer/react/pull/8260) [`24d0831`](https://github.com/primer/react/commit/24d0831d34b13e3b4bac8afcfa2ccd5795cd9a9d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - UnderlineNav: Keep item icons visible by default at the medium breakpoint and above
+
 ## 38.35.1
 
 ### Patch Changes

package/dist/ActionBar/ActionBar.js

@@ -133,14 +133,15 @@ const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...pr
 		disabled,
 		onClick
 	]));
+	const clickHandler = useCallback((event) => {
+		if (disabled) return;
+		onClick === null || onClick === void 0 || onClick(event);
+	}, [disabled, onClick]);
 	return /*#__PURE__*/ jsx(IconButton, {
 		"aria-disabled": disabled,
 		ref: mergedRef,
 		size,
-		onClick: useCallback((event) => {
-			if (disabled) return;
-			onClick === null || onClick === void 0 || onClick(event);
-		}, [disabled, onClick]),
+		onClick: clickHandler,
 		...props,
 		variant: "invisible",
 		"data-overflowing": dataOverflowingAttr
@@ -163,14 +164,15 @@ const ActionBarButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props
 		disabled,
 		onClick
 	]));
+	const clickHandler = useCallback((event) => {
+		if (disabled) return;
+		onClick === null || onClick === void 0 || onClick(event);
+	}, [disabled, onClick]);
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		"aria-disabled": disabled,
 		ref: mergedRef,
 		size,
-		onClick: useCallback((event) => {
-			if (disabled) return;
-			onClick === null || onClick === void 0 || onClick(event);
-		}, [disabled, onClick]),
+		onClick: clickHandler,
 		...props,
 		variant: "invisible",
 		"data-overflowing": dataOverflowingAttr

package/dist/ActionList/Heading.js

@@ -37,7 +37,8 @@ const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		t1 = $[6];
 	}
 	const visuallyHidden = t1 === void 0 ? false : t1;
-	const mergedRef = useMergedRefs(forwardedRef, React.useRef(null));
+	const innerRef = React.useRef(null);
+	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.");

package/dist/CounterLabel/CounterLabel.js

@@ -11,11 +11,14 @@ const CounterLabel = /*#__PURE__*/ forwardRef(({ variant, scheme, className, chi
 		")"
 	] });
 	const inferredVariant = variant || scheme || "secondary";
-	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
+	const counterProps = {
 		ref: forwardedRef,
 		["aria-hidden"]: "true",
 		["data-variant"]: inferredVariant,
-		...rest,
+		...rest
+	};
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
+		...counterProps,
 		"data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : "CounterLabel",
 		className: clsx(className, CounterLabel_module_css_default.CounterLabel),
 		children

package/dist/Details/Details.js

@@ -34,7 +34,8 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 		t1 = () => {
 			const { current: details } = detailsRef;
 			if (!details) return;
-			warning(details.querySelector("summary:not([data-default-summary])") === null, "The <Details> component must have a <summary> child component. You can either use <Details.Summary> or a native <summary> element.");
+			const summary = details.querySelector("summary:not([data-default-summary])");
+			warning(summary === null, "The <Details> component must have a <summary> child component. You can either use <Details.Summary> or a native <summary> element.");
 		};
 		t2 = [];
 		$[5] = t1;

package/dist/Dialog/Dialog.js

@@ -140,7 +140,7 @@ const _Dialog = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 	});
 	const footer = (_slots$footer = slots.footer) !== null && _slots$footer !== void 0 ? _slots$footer : (renderFooter !== null && renderFooter !== void 0 ? renderFooter : DefaultFooter)(defaultedProps);
 	const hasFooter = footer != null;
-	useResizeObserver(useCallback(() => {
+	const updateFooterButtonLayout = useCallback(() => {
 		if (!hasFooter) return;
 		const dialogElement = dialogRef.current;
 		if (!(dialogElement instanceof HTMLElement)) return;
@@ -150,7 +150,8 @@ const _Dialog = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 		const newLayout = bodyWrapper.clientHeight >= MIN_BODY_HEIGHT ? "wrap" : "scroll";
 		dialogElement.setAttribute("data-footer-button-layout", newLayout);
 		setFooterButtonLayout(newLayout);
-	}, [hasFooter]), backdropRef);
+	}, [hasFooter]);
+	useResizeObserver(updateFooterButtonLayout, backdropRef);
 	const positionDataAttributes = typeof position === "string" ? { "data-position-regular": position } : Object.fromEntries(Object.entries(position).map(([key, value]) => {
 		return [`data-position-${key}`, value];
 	}));

package/dist/PageHeader/PageHeader.js

@@ -72,7 +72,8 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 				if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === ContextArea || isSlot(child_1, ContextArea))) hasContextArea = true;
 				if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === LeadingAction || isSlot(child_1, LeadingAction))) hasLeadingAction = true;
 			}
-			warning(Array.from(titleArea.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2) || Array.from(child_2.childNodes).some((child_3) => child_3 instanceof HTMLElement && isInteractive(child_3))) && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
+			const hasInteractiveContent = Array.from(titleArea.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2) || Array.from(child_2.childNodes).some((child_3) => child_3 instanceof HTMLElement && isInteractive(child_3)));
+			warning(hasInteractiveContent && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
 		};
 		t3 = [children, readRef];
 		$[0] = children;

package/dist/Portal/Portal.js

@@ -1,43 +1,105 @@
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { PortalContext } from "./PortalContext.js";
 import { DEFAULT_PORTAL_CONTAINER_NAME, ensureDefaultPortal, getPortalRoot } from "./portalRoot.js";
-import React, { useContext } from "react";
+import { c } from "react-compiler-runtime";
+import React, { useContext, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 //#region src/Portal/Portal.tsx
+const subscribe = () => () => {};
+const getSnapshot = () => true;
+const getServerSnapshot = () => false;
+/**
+* Returns `true` only when React is rendering on the client, and not as part of
+* hydrating server-rendered markup.
+*
+* `Portal` needs this because React's server renderer throws when it encounters a
+* portal, and portaled content is never part of the server-rendered markup.
+*
+* `useSyncExternalStore` is used rather than a `useEffect`/`useState` "is mounted"
+* flag because it only defers the portal for the renders that need it: it returns
+* `false` while server rendering and for the hydration pass (keeping hydration
+* consistent with the server markup), but `true` from the very first render of a
+* client-only render. That way client-rendered portals — the overwhelmingly common
+* case for overlays, dialogs and menus — still mount their children in the same
+* commit as the `Portal` itself, so refs into portaled content are populated by the
+* time the parent's layout effects run.
+*/
+function useIsClientRender() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
 /**
 * Creates a React Portal, placing all children in a separate physical DOM root node.
 * @see https://reactjs.org/docs/portals.html
 */
-const Portal = ({ children, onMount, containerName: _containerName }) => {
+const Portal = (t0) => {
+	const $ = c(12);
+	const { children, onMount, containerName: _containerName } = t0;
 	const { portalContainerName } = useContext(PortalContext);
-	const elementRef = React.useRef(null);
-	if (!elementRef.current) {
-		const div = document.createElement("div");
-		div.setAttribute("data-component", "Portal");
-		div.style.position = "relative";
-		div.style.zIndex = "1";
-		elementRef.current = div;
-	}
-	const element = elementRef.current;
-	useIsomorphicLayoutEffect(() => {
-		let containerName = _containerName !== null && _containerName !== void 0 ? _containerName : portalContainerName;
-		if (containerName === void 0) {
-			containerName = DEFAULT_PORTAL_CONTAINER_NAME;
-			ensureDefaultPortal();
-		}
-		const parentElement = getPortalRoot(containerName);
-		if (!parentElement) throw new Error(`Portal container '${containerName}' is not yet registered. Container must be registered with registerPortalRoot before use.`);
-		parentElement.appendChild(element);
-		onMount === null || onMount === void 0 || onMount();
-		return () => {
-			parentElement.removeChild(element);
+	const isClientRender = useIsClientRender();
+	const onMountRef = React.useRef(onMount);
+	let t1;
+	if ($[0] !== onMount) {
+		t1 = () => {
+			onMountRef.current = onMount;
 		};
-	}, [
-		element,
-		_containerName,
-		portalContainerName
-	]);
-	return /*#__PURE__*/ createPortal(children, element);
+		$[0] = onMount;
+		$[1] = t1;
+	} else t1 = $[1];
+	useIsomorphicLayoutEffect(t1);
+	const [element] = React.useState(_temp);
+	let t2;
+	let t3;
+	if ($[2] !== _containerName || $[3] !== element || $[4] !== isClientRender || $[5] !== portalContainerName) {
+		t2 = () => {
+			var _onMountRef$current;
+			if (!element || !isClientRender) return;
+			let containerName = _containerName !== null && _containerName !== void 0 ? _containerName : portalContainerName;
+			if (containerName === void 0) {
+				containerName = DEFAULT_PORTAL_CONTAINER_NAME;
+				ensureDefaultPortal();
+			}
+			const parentElement = getPortalRoot(containerName);
+			if (!parentElement) throw new Error(`Portal container '${containerName}' is not yet registered. Container must be registered with registerPortalRoot before use.`);
+			parentElement.appendChild(element);
+			(_onMountRef$current = onMountRef.current) === null || _onMountRef$current === void 0 || _onMountRef$current.call(onMountRef);
+			return () => {
+				parentElement.removeChild(element);
+			};
+		};
+		t3 = [
+			element,
+			isClientRender,
+			_containerName,
+			portalContainerName
+		];
+		$[2] = _containerName;
+		$[3] = element;
+		$[4] = isClientRender;
+		$[5] = portalContainerName;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useIsomorphicLayoutEffect(t2, t3);
+	let t4;
+	if ($[8] !== children || $[9] !== element || $[10] !== isClientRender) {
+		t4 = element && isClientRender ? /*#__PURE__*/ createPortal(children, element) : null;
+		$[8] = children;
+		$[9] = element;
+		$[10] = isClientRender;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
+function _temp() {
+	if (typeof document === "undefined") return null;
+	const div = document.createElement("div");
+	div.setAttribute("data-component", "Portal");
+	div.style.position = "relative";
+	div.style.zIndex = "1";
+	return div;
+}
 //#endregion
 export { Portal };

package/dist/SelectPanel/SelectPanel.js

@@ -435,6 +435,31 @@ function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorR
 		if (event.key !== "/" && !isAlphabetKey(event.nativeEvent)) return;
 		event.stopPropagation();
 	}, [overlayProps]);
+	const mergedOverlayProps = useMemo(() => ({
+		role: "dialog",
+		"aria-labelledby": titleId,
+		"aria-describedby": subtitle ? subtitleId : void 0,
+		...overlayProps,
+		...variant === "modal" ? {
+			top: "50vh",
+			left: "50vw",
+			anchorSide: void 0
+		} : {},
+		style: {
+			transform: variant === "modal" ? "translate(-50%, -50%)" : void 0,
+			...isKeyboardVisible ? { maxHeight: availablePanelHeight !== void 0 ? `${availablePanelHeight}px` : "auto" } : {}
+		},
+		onKeyDown: preventBubbling
+	}), [
+		titleId,
+		subtitle,
+		subtitleId,
+		overlayProps,
+		variant,
+		isKeyboardVisible,
+		availablePanelHeight,
+		preventBubbling
+	]);
 	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(AnchoredOverlay, {
 		renderAnchor: renderMenuAnchor,
 		anchorRef,
@@ -442,31 +467,7 @@ function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorR
 		open,
 		onOpen,
 		onClose,
-		overlayProps: useMemo(() => ({
-			role: "dialog",
-			"aria-labelledby": titleId,
-			"aria-describedby": subtitle ? subtitleId : void 0,
-			...overlayProps,
-			...variant === "modal" ? {
-				top: "50vh",
-				left: "50vw",
-				anchorSide: void 0
-			} : {},
-			style: {
-				transform: variant === "modal" ? "translate(-50%, -50%)" : void 0,
-				...isKeyboardVisible ? { maxHeight: availablePanelHeight !== void 0 ? `${availablePanelHeight}px` : "auto" } : {}
-			},
-			onKeyDown: preventBubbling
-		}), [
-			titleId,
-			subtitle,
-			subtitleId,
-			overlayProps,
-			variant,
-			isKeyboardVisible,
-			availablePanelHeight,
-			preventBubbling
-		]),
+		overlayProps: mergedOverlayProps,
 		focusTrapSettings,
 		focusZoneSettings,
 		height,

package/dist/TooltipV2/Tooltip.js

@@ -100,10 +100,11 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 				const trigger = readTriggerRef.current;
 				tooltip.showPopover();
 				setIsPopoverOpen(true);
-				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, {
+				const settings = {
 					side: directionToPosition[direction].side,
 					align: directionToPosition[direction].align
-				});
+				};
+				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, settings);
 				const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}`];
 				setCalculatedDirection(calculatedDirection);
 				tooltip.style.top = `${top}px`;

package/dist/TreeView/TreeView.js

@@ -193,7 +193,6 @@ const ItemImpl = fixedForwardRef(({ id: itemId, containIntrinsicSize, current: i
 			case "u":
 				if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
 				activateActionsDialog();
-				break;
 		}
 	}, [
 		onSelect,

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -17,8 +17,9 @@ type UnderlineNavProps = {
    */
   variant?: 'inset' | 'flush';
   /**
-   * Customize when the icons are hidden to save space. Set to `null` to always show icons.
-   * Defaults to `xxlarge`; if you know there won't be very many tabs you might set this to a smaller value.
+   * Controls the container width below which icons are hidden to save space. Defaults to `medium`.
+   * To keep icons visible in a narrow container, use a smaller breakpoint such as `xsmall`, or set to `null` to
+   * always show icons.
    */
   hideIconsBreakpoint?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null;
 };

package/dist/UnderlineNav/UnderlineNav.js

@@ -22,7 +22,7 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const as = t1 === void 0 ? "nav" : t1;
 	const loadingCounters = t2 === void 0 ? false : t2;
 	const variant = t3 === void 0 ? "inset" : t3;
-	const hideIconsBreakpoint = t4 === void 0 ? "xxlarge" : t4;
+	const hideIconsBreakpoint = t4 === void 0 ? "medium" : t4;
 	const backupRef = useRef(null);
 	const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const listRef = useRef(null);

package/dist/deprecated/ActionList/List.js

@@ -59,7 +59,8 @@ const List = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 	const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(restProps.variant);
 	const renderGroup = (groupProps) => {
 		var _ref;
-		return /*#__PURE__*/ createElement(((_ref = "renderGroup" in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : restProps.renderGroup) || Group, {
+		const GroupComponent = ((_ref = "renderGroup" in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : restProps.renderGroup) || Group;
+		return /*#__PURE__*/ createElement(GroupComponent, {
 			...groupProps,
 			key: groupProps.groupId
 		});

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -43,10 +43,11 @@ const responsiveButtonSizes = {
 const Panel = ({ title, description, variant: propsVariant, selectionVariant = "multiple", id, defaultOpen = false, open: propsOpen, anchorRef: providedAnchorRef, anchoredPositionSettings, onCancel: propsOnCancel, onClearSelection: propsOnClearSelection, onSubmit: propsOnSubmit, width = "medium", maxHeight = "large", className, ...props }) => {
 	var _position$top, _position$left, _slots$header;
 	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-	const currentVariant = useResponsiveValue(Object.assign({
+	const responsiveVariants = Object.assign({
 		regular: "anchored",
 		narrow: "full-screen"
-	}, typeof propsVariant === "string" ? { regular: propsVariant } : propsVariant), "anchored");
+	}, typeof propsVariant === "string" ? { regular: propsVariant } : propsVariant);
+	const currentVariant = useResponsiveValue(responsiveVariants, "anchored");
 	if (propsOpen !== void 0 && internalOpen !== propsOpen) setInternalOpen(propsOpen);
 	let Anchor;
 	const anchorRef = useProvidedRefOrCreate(providedAnchorRef);
@@ -348,18 +349,20 @@ const SelectPanelFooter = ({ ...props }) => {
 SelectPanelFooter.displayName = "SelectPanelFooter";
 SelectPanelFooter.__SLOT__ = Symbol("SelectPanel.Footer");
 const SecondaryButton = (props) => {
+	const size = useResponsiveValue(responsiveButtonSizes, "small");
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		type: "button",
-		size: useResponsiveValue(responsiveButtonSizes, "small"),
+		size,
 		block: true,
 		...props
 	});
 };
 SecondaryButton.displayName = "SecondaryButton";
 const SecondaryLink = ({ className, ...props }) => {
+	const size = useResponsiveValue(responsiveButtonSizes, "small");
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		as: Link,
-		size: useResponsiveValue(responsiveButtonSizes, "small"),
+		size,
 		variant: "invisible",
 		block: true,
 		...props,

package/dist/hooks/useFocusZone.js

@@ -5,7 +5,8 @@ import { FocusKeys as FocusKeys$1, focusZone } from "@primer/behaviors";
 function useFocusZone(settings = {}, dependencies = []) {
 	const containerRef = useProvidedRefOrCreate(settings.containerRef);
 	const useActiveDescendant = !!settings.activeDescendantFocus;
-	const activeDescendantControlRef = useProvidedRefOrCreate(typeof settings.activeDescendantFocus === "boolean" || !settings.activeDescendantFocus ? void 0 : settings.activeDescendantFocus);
+	const passedActiveDescendantRef = typeof settings.activeDescendantFocus === "boolean" || !settings.activeDescendantFocus ? void 0 : settings.activeDescendantFocus;
+	const activeDescendantControlRef = useProvidedRefOrCreate(passedActiveDescendantRef);
 	const disabled = settings.disabled;
 	const abortController = React.useRef();
 	useEffect(() => {

package/dist/hooks/useMenuInitialFocus.js

@@ -1,68 +1,83 @@
+import { c } from "react-compiler-runtime";
 import React from "react";
 import { iterateFocusableElements } from "@primer/behaviors/utils";
 //#region src/hooks/useMenuInitialFocus.ts
 const useMenuInitialFocus = (open, containerRef, anchorRef) => {
-	/**
-	* We need to pick the first element to focus based on how the menu was opened,
-	* however, we need to wait for the menu to be open to set focus.
-	* This is why we use set openingKey in state and have 2 effects
-	*/
+	const $ = c(9);
 	const [openingGesture, setOpeningGesture] = React.useState(void 0);
-	React.useEffect(function inferOpeningKey() {
-		const anchorElement = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-		const clickHandler = (event) => {
-			if (event.detail !== 0) setOpeningGesture("mouse-click");
+	let t0;
+	let t1;
+	if ($[0] !== anchorRef) {
+		t0 = function inferOpeningKey() {
+			const anchorElement = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+			const clickHandler = (event) => {
+				if (event.detail !== 0) setOpeningGesture("mouse-click");
+			};
+			const keydownHandler = (event_0) => {
+				if ([
+					"Space",
+					"Enter",
+					"ArrowDown",
+					"ArrowUp"
+				].includes(event_0.code)) setOpeningGesture(event_0.code);
+			};
+			anchorElement === null || anchorElement === void 0 || anchorElement.addEventListener("click", clickHandler);
+			anchorElement === null || anchorElement === void 0 || anchorElement.addEventListener("keydown", keydownHandler);
+			return () => {
+				anchorElement === null || anchorElement === void 0 || anchorElement.removeEventListener("click", clickHandler);
+				anchorElement === null || anchorElement === void 0 || anchorElement.removeEventListener("keydown", keydownHandler);
+			};
 		};
-		const keydownHandler = (event) => {
-			if ([
-				"Space",
-				"Enter",
+		t1 = [anchorRef];
+		$[0] = anchorRef;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[3] !== anchorRef || $[4] !== containerRef || $[5] !== open || $[6] !== openingGesture) {
+		t2 = function moveFocusOnOpen() {
+			if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+			const iterable = iterateFocusableElements(containerRef.current);
+			if (openingGesture === "mouse-click") if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
+			else throw new Error("For focus management, please attach anchorRef");
+			else if (openingGesture && [
 				"ArrowDown",
-				"ArrowUp"
-			].includes(event.code)) setOpeningGesture(event.code);
-		};
-		anchorElement === null || anchorElement === void 0 || anchorElement.addEventListener("click", clickHandler);
-		anchorElement === null || anchorElement === void 0 || anchorElement.addEventListener("keydown", keydownHandler);
-		return () => {
-			anchorElement === null || anchorElement === void 0 || anchorElement.removeEventListener("click", clickHandler);
-			anchorElement === null || anchorElement === void 0 || anchorElement.removeEventListener("keydown", keydownHandler);
+				"Space",
+				"Enter"
+			].includes(openingGesture)) {
+				const firstElement = iterable.next().value;
+				setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
+			} else if ("ArrowUp" === openingGesture) {
+				const elements = [...iterable];
+				const lastElement = elements[elements.length - 1];
+				setTimeout(() => lastElement.focus());
+			} else {
+				const firstElement_0 = iterable.next().value;
+				setTimeout(() => firstElement_0 === null || firstElement_0 === void 0 ? void 0 : firstElement_0.focus());
+			}
 		};
-	}, [anchorRef]);
-	/**
-	* Pick the first element to focus based on the key used to open the Menu
-	* Click: anchor
-	* ArrowDown | Space | Enter: first element
-	* ArrowUp: last element
-	*/
-	React.useEffect(function moveFocusOnOpen() {
-		if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
-		const iterable = iterateFocusableElements(containerRef.current);
-		if (openingGesture === "mouse-click") if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
-		else throw new Error("For focus management, please attach anchorRef");
-		else if (openingGesture && [
-			"ArrowDown",
-			"Space",
-			"Enter"
-		].includes(openingGesture)) {
-			const firstElement = iterable.next().value;
-			/** We push imperative focus to the next tick to prevent React's batching */
-			setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
-		} else if ("ArrowUp" === openingGesture) {
-			const elements = [...iterable];
-			const lastElement = elements[elements.length - 1];
-			setTimeout(() => lastElement.focus());
-		} else {
-			/** if the menu was not opened with the anchor, we default to the first element
-			*  for example: with keyboard shortcut (see stories/fixtures)
-			*/
-			const firstElement = iterable.next().value;
-			setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
-		}
-	}, [
-		open,
-		openingGesture,
-		anchorRef
-	]);
+		t3 = [
+			open,
+			openingGesture,
+			anchorRef,
+			containerRef
+		];
+		$[3] = anchorRef;
+		$[4] = containerRef;
+		$[5] = open;
+		$[6] = openingGesture;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t2 = $[7];
+		t3 = $[8];
+	}
+	React.useEffect(t2, t3);
 };
 //#endregion
 export { useMenuInitialFocus };

package/generated/components.json

@@ -9042,7 +9042,7 @@
         },
         {
           "id": "components-underlinenav-features--overflow-template",
-          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
+          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\" hideIconsBreakpoint=\"medium\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
         },
         {
           "id": "components-underlinenav-features--overflow-on-narrow-screen",
@@ -9078,6 +9078,12 @@
           "defaultValue": "false",
           "description": "Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
         },
+        {
+          "name": "hideIconsBreakpoint",
+          "type": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null",
+          "defaultValue": "'medium'",
+          "description": "Controls the container width below which icons are hidden to save space. To keep icons visible in a narrow container, use a smaller breakpoint such as `xsmall`, or set to `null` to always show icons."
+        },
         {
           "name": "variant",
           "type": "'inset' | 'flush'",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.36.0-rc.7156e7efc",
+  "version": "38.36.0-rc.a1228eda5",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -166,7 +166,7 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.2.0",
+    "rolldown": "^1.2.2",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",