@primer/react 38.36.0-rc.bd3520b7c → 38.36.0

package/dist/ActionList/LinkItem.js

@@ -1,9 +1,10 @@
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
+import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { Item } from "./Item.js";
 import Link from "../Link/Link.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ActionList/LinkItem.tsx
-const LinkItemComponent = fixedForwardRef(({ active, inactiveText, variant, size, as: Component, className, ...props }, forwardedRef) => {
+const LinkItemComponent = fixedForwardRef(({ active, inactiveText, variant, size, as: Component, className, _PrivateTooltipText, ...props }, forwardedRef) => {
 	return /*#__PURE__*/ jsx(Item, {
 		className,
 		active,
@@ -20,14 +21,21 @@ const LinkItemComponent = fixedForwardRef(({ active, inactiveText, variant, size
 				...rest,
 				children
 			});
-			return /*#__PURE__*/ jsx(Link, {
+			const link = /*#__PURE__*/ jsx(Link, {
 				as: Component,
 				...rest,
 				...props,
 				onClick: clickHandler,
-				ref: forwardedRef,
+				ref: _PrivateTooltipText ? void 0 : forwardedRef,
 				children
 			});
+			return _PrivateTooltipText ? /*#__PURE__*/ jsx(Tooltip, {
+				ref: forwardedRef,
+				text: _PrivateTooltipText,
+				direction: "e",
+				delay: "medium",
+				children: link
+			}) : link;
 		},
 		children: props.children
 	});

package/dist/ActionList/index.d.ts

@@ -60,6 +60,7 @@ declare const ActionList: (<As extends React.ElementType = "ul">(props: Distribu
       role?: string;
       className?: string;
     }>>;
+    _PrivateTooltipText?: string;
     className?: string;
     groupId?: string;
     renderItem?: (item: React.FC<React.PropsWithChildren<{
@@ -100,6 +101,8 @@ declare const ActionList: (<As extends React.ElementType = "ul">(props: Distribu
     className?: string;
   }, "as"> & {
     as?: As | undefined;
+  } & {
+    _PrivateTooltipText?: string;
   } & import("react").RefAttributes<unknown>) => React.ReactNode)>; /** Visually separates `Item`s or `Group`s in an `ActionList`. */
   Divider: FCWithSlotMarker<import("react").PropsWithChildren<ActionListDividerProps>>; /** Secondary text which provides additional information about an `Item`. */
   Description: FCWithSlotMarker<import("react").PropsWithChildren<ActionListDescriptionProps>>; /** Icon (or similar) positioned before `Item` text. */

package/dist/ActionList/shared.d.ts

@@ -55,6 +55,10 @@ type ActionListItemProps<As extends React.ElementType = 'li'> = ExcludeSelectEve
    * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
    */
   _PrivateItemWrapper?: React.FC<React.PropsWithChildren<MenuItemProps>>;
+  /**
+   * Private API for use internally only. Adds a tooltip to the interactive item.
+   */
+  _PrivateTooltipText?: string;
   className?: string;
   groupId?: string;
   renderItem?: (item: React.FC<React.PropsWithChildren<MenuItemProps>>) => React.ReactNode;

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/NavList/NavList.d.ts

@@ -24,6 +24,7 @@ type NavListItemProps<As extends React.ElementType = React.ElementType> = Polymo
   href?: string;
   'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
   inactiveText?: string;
+  tooltipText?: string;
 }>;
 type NavListSubNavProps = {
   children: React.ReactNode;
@@ -59,6 +60,7 @@ declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref">
     href?: string;
     'aria-current'?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean;
     inactiveText?: string;
+    tooltipText?: string;
   }, "as"> & {
     as?: As | undefined;
   } & React.RefAttributes<unknown>) => React.ReactNode) & {

package/dist/NavList/NavList.js

@@ -165,7 +165,7 @@ const Heading = (t0) => {
 };
 Heading.displayName = "NavList.Heading";
 Heading.__SLOT__ = Symbol("NavList.Heading");
-const ItemComponent = fixedForwardRef(({ "aria-current": ariaCurrent, children, defaultOpen, as: Component, ...props }, ref) => {
+const ItemComponent = fixedForwardRef(({ "aria-current": ariaCurrent, children, defaultOpen, tooltipText, as: Component, ...props }, ref) => {
 	const { depth } = React.useContext(SubNavContext);
 	const [slots, childrenWithoutSubNavOrTrailingAction] = useSlots(children, {
 		subNav: SubNav,
@@ -177,6 +177,7 @@ const ItemComponent = fixedForwardRef(({ "aria-current": ariaCurrent, children,
 		subNav,
 		depth,
 		defaultOpen,
+		tooltipText,
 		style: { "--subitem-depth": depth },
 		children: childrenWithoutSubNavOrTrailingAction
 	});
@@ -188,6 +189,7 @@ const ItemComponent = fixedForwardRef(({ "aria-current": ariaCurrent, children,
 		active: Boolean(ariaCurrent) && ariaCurrent !== "false",
 		style: { "--subitem-depth": depth },
 		"data-component": "NavList.Item",
+		_PrivateTooltipText: tooltipText,
 		...props,
 		children
 	});
@@ -207,8 +209,8 @@ function hasCurrentNavItem(node) {
 }
 function ItemWithSubNav(t0) {
 	var _ref;
-	const $ = c(29);
-	const { children, subNav, defaultOpen, style } = t0;
+	const $ = c(30);
+	const { children, subNav, defaultOpen, tooltipText, style } = t0;
 	const buttonId = useId$1();
 	const subNavId = useId$1();
 	let t1;
@@ -281,7 +283,7 @@ function ItemWithSubNav(t0) {
 		$[17] = t9;
 	} else t9 = $[17];
 	let t10;
-	if ($[18] !== buttonId || $[19] !== children || $[20] !== isOpen || $[21] !== style || $[22] !== subNavId || $[23] !== t5 || $[24] !== t9) {
+	if ($[18] !== buttonId || $[19] !== children || $[20] !== isOpen || $[21] !== style || $[22] !== subNavId || $[23] !== t5 || $[24] !== t9 || $[25] !== tooltipText) {
 		t10 = /*#__PURE__*/ jsxs(ActionList.Item, {
 			id: buttonId,
 			"aria-expanded": isOpen,
@@ -290,6 +292,7 @@ function ItemWithSubNav(t0) {
 			onSelect: t6,
 			style,
 			"data-component": "NavList.Item",
+			_PrivateTooltipText: tooltipText,
 			children: [
 				children,
 				t7,
@@ -303,18 +306,19 @@ function ItemWithSubNav(t0) {
 		$[22] = subNavId;
 		$[23] = t5;
 		$[24] = t9;
-		$[25] = t10;
-	} else t10 = $[25];
+		$[25] = tooltipText;
+		$[26] = t10;
+	} else t10 = $[26];
 	let t11;
-	if ($[26] !== t10 || $[27] !== t4) {
+	if ($[27] !== t10 || $[28] !== t4) {
 		t11 = /*#__PURE__*/ jsx(ItemWithSubNavContext.Provider, {
 			value: t4,
 			children: t10
 		});
-		$[26] = t10;
-		$[27] = t4;
-		$[28] = t11;
-	} else t11 = $[28];
+		$[27] = t10;
+		$[28] = t4;
+		$[29] = t11;
+	} else t11 = $[29];
 	return t11;
 }
 function _temp(open) {

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(() => {