@primer/react 38.36.0-rc.3fb350b1f → 38.36.0-rc.4403803d9

package/dist/ActionBar/ActionBar.js

@@ -133,15 +133,14 @@ 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: clickHandler,
+		onClick: useCallback((event) => {
+			if (disabled) return;
+			onClick === null || onClick === void 0 || onClick(event);
+		}, [disabled, onClick]),
 		...props,
 		variant: "invisible",
 		"data-overflowing": dataOverflowingAttr
@@ -164,15 +163,14 @@ 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: clickHandler,
+		onClick: useCallback((event) => {
+			if (disabled) return;
+			onClick === null || onClick === void 0 || onClick(event);
+		}, [disabled, onClick]),
 		...props,
 		variant: "invisible",
 		"data-overflowing": dataOverflowingAttr

package/dist/ActionList/Heading.js

@@ -37,8 +37,7 @@ const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		t1 = $[6];
 	}
 	const visuallyHidden = t1 === void 0 ? false : t1;
-	const innerRef = React.useRef(null);
-	const mergedRef = useMergedRefs(forwardedRef, innerRef);
+	const mergedRef = useMergedRefs(forwardedRef, React.useRef(null));
 	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,14 +11,11 @@ const CounterLabel = /*#__PURE__*/ forwardRef(({ variant, scheme, className, chi
 		")"
 	] });
 	const inferredVariant = variant || scheme || "secondary";
-	const counterProps = {
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
 		ref: forwardedRef,
 		["aria-hidden"]: "true",
 		["data-variant"]: inferredVariant,
-		...rest
-	};
-	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
-		...counterProps,
+		...rest,
 		"data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : "CounterLabel",
 		className: clsx(className, CounterLabel_module_css_default.CounterLabel),
 		children

package/dist/Details/Details.js

@@ -34,8 +34,7 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 		t1 = () => {
 			const { current: details } = detailsRef;
 			if (!details) return;
-			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.");
+			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.");
 		};
 		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;
-	const updateFooterButtonLayout = useCallback(() => {
+	useResizeObserver(useCallback(() => {
 		if (!hasFooter) return;
 		const dialogElement = dialogRef.current;
 		if (!(dialogElement instanceof HTMLElement)) return;
@@ -150,8 +150,7 @@ 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]);
-	useResizeObserver(updateFooterButtonLayout, backdropRef);
+	}, [hasFooter]), 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,8 +72,7 @@ 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;
 			}
-			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.");
+			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.");
 		};
 		t3 = [children, readRef];
 		$[0] = children;

package/dist/SelectPanel/SelectPanel.js

@@ -435,31 +435,6 @@ 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,
@@ -467,7 +442,31 @@ function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorR
 		open,
 		onOpen,
 		onClose,
-		overlayProps: mergedOverlayProps,
+		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
+		]),
 		focusTrapSettings,
 		focusZoneSettings,
 		height,

package/dist/TooltipV2/Tooltip.js

@@ -100,11 +100,10 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 				const trigger = readTriggerRef.current;
 				tooltip.showPopover();
 				setIsPopoverOpen(true);
-				const settings = {
+				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, {
 					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,6 +193,7 @@ const ItemImpl = fixedForwardRef(({ id: itemId, containIntrinsicSize, current: i
 			case "u":
 				if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
 				activateActionsDialog();
+				break;
 		}
 	}, [
 		onSelect,

package/dist/deprecated/ActionList/List.js

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

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -43,11 +43,10 @@ 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 responsiveVariants = Object.assign({
+	const currentVariant = useResponsiveValue(Object.assign({
 		regular: "anchored",
 		narrow: "full-screen"
-	}, typeof propsVariant === "string" ? { regular: propsVariant } : propsVariant);
-	const currentVariant = useResponsiveValue(responsiveVariants, "anchored");
+	}, typeof propsVariant === "string" ? { regular: propsVariant } : propsVariant), "anchored");
 	if (propsOpen !== void 0 && internalOpen !== propsOpen) setInternalOpen(propsOpen);
 	let Anchor;
 	const anchorRef = useProvidedRefOrCreate(providedAnchorRef);
@@ -349,20 +348,18 @@ 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,
+		size: useResponsiveValue(responsiveButtonSizes, "small"),
 		block: true,
 		...props
 	});
 };
 SecondaryButton.displayName = "SecondaryButton";
 const SecondaryLink = ({ className, ...props }) => {
-	const size = useResponsiveValue(responsiveButtonSizes, "small");
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		as: Link,
-		size,
+		size: useResponsiveValue(responsiveButtonSizes, "small"),
 		variant: "invisible",
 		block: true,
 		...props,

package/dist/hooks/useFocusZone.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.36.0-rc.3fb350b1f",
+  "version": "38.36.0-rc.4403803d9",
   "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.2",
+    "rolldown": "^1.2.0",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",