@primer/react 38.42.0-rc.fcbfbaea1 → 38.42.0

package/dist/hooks/useOpenAndCloseFocus.d.ts

@@ -6,12 +6,14 @@ type UseOpenAndCloseFocusSettings = {
   containerRef: React.RefObject<HTMLElement | null>;
   returnFocusRef: React.RefObject<HTMLElement | null>;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
 };
 declare function useOpenAndCloseFocus({
   initialFocusRef,
   returnFocusRef,
   containerRef,
-  preventFocusOnOpen
+  preventFocusOnOpen,
+  preventFocusOnClose
 }: UseOpenAndCloseFocusSettings): void;
 //#endregion
 export { UseOpenAndCloseFocusSettings, useOpenAndCloseFocus };

package/dist/hooks/useOpenAndCloseFocus.js

@@ -1,14 +1,24 @@
 import { c } from "../utils/react-compiler-runtime.js";
+import { useEffectCallback } from "../internal/hooks/useEffectCallback.js";
 import { useEffect } from "react";
 import { iterateFocusableElements } from "@primer/behaviors/utils";
 //#region src/hooks/useOpenAndCloseFocus.ts
 function useOpenAndCloseFocus(t0) {
-	const $ = c(6);
-	const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen } = t0;
+	const $ = c(9);
+	const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen, preventFocusOnClose } = t0;
 	let t1;
+	if ($[0] !== preventFocusOnClose) {
+		t1 = (element) => {
+			if (!preventFocusOnClose) element === null || element === void 0 || element.focus();
+		};
+		$[0] = preventFocusOnClose;
+		$[1] = t1;
+	} else t1 = $[1];
+	const restoreFocus = useEffectCallback(t1);
 	let t2;
-	if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
-		t1 = () => {
+	let t3;
+	if ($[2] !== containerRef || $[3] !== initialFocusRef || $[4] !== preventFocusOnOpen || $[5] !== restoreFocus || $[6] !== returnFocusRef) {
+		t2 = () => {
 			if (!preventFocusOnOpen) {
 				if (initialFocusRef && initialFocusRef.current) initialFocusRef.current.focus();
 				else if (containerRef.current) {
@@ -18,26 +28,28 @@ function useOpenAndCloseFocus(t0) {
 			}
 			const returnFocusRefCurrent = returnFocusRef.current;
 			return function() {
-				returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 || returnFocusRefCurrent.focus();
+				restoreFocus(returnFocusRefCurrent);
 			};
 		};
-		t2 = [
+		t3 = [
 			initialFocusRef,
 			returnFocusRef,
 			containerRef,
-			preventFocusOnOpen
+			preventFocusOnOpen,
+			restoreFocus
 		];
-		$[0] = containerRef;
-		$[1] = initialFocusRef;
-		$[2] = preventFocusOnOpen;
-		$[3] = returnFocusRef;
-		$[4] = t1;
-		$[5] = t2;
+		$[2] = containerRef;
+		$[3] = initialFocusRef;
+		$[4] = preventFocusOnOpen;
+		$[5] = restoreFocus;
+		$[6] = returnFocusRef;
+		$[7] = t2;
+		$[8] = t3;
 	} else {
-		t1 = $[4];
-		t2 = $[5];
+		t2 = $[7];
+		t3 = $[8];
 	}
-	useEffect(t1, t2);
+	useEffect(t2, t3);
 }
 //#endregion
 export { useOpenAndCloseFocus };

package/dist/hooks/useOverlay.d.ts

@@ -9,6 +9,7 @@ type UseOverlaySettings = {
   onClickOutside: (e: TouchOrMouseEvent) => void;
   overlayRef?: React.RefObject<HTMLDivElement | null>;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
 };
 type OverlayReturnProps = {
   ref: React.RefObject<HTMLDivElement | null>;
@@ -20,7 +21,8 @@ declare const useOverlay: ({
   onEscape,
   ignoreClickRefs,
   onClickOutside,
-  preventFocusOnOpen
+  preventFocusOnOpen,
+  preventFocusOnClose
 }: UseOverlaySettings) => OverlayReturnProps;
 //#endregion
 export { OverlayReturnProps, UseOverlaySettings, useOverlay };

package/dist/hooks/useOverlay.js

@@ -5,53 +5,55 @@ import { useOnEscapePress } from "./useOnEscapePress.js";
 import { useOpenAndCloseFocus } from "./useOpenAndCloseFocus.js";
 //#region src/hooks/useOverlay.tsx
 const useOverlay = (t0) => {
-	const $ = c(13);
-	const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen } = t0;
+	const $ = c(14);
+	const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen, preventFocusOnClose } = t0;
 	const overlayRef = useProvidedRefOrCreate(_overlayRef);
 	let t1;
-	if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
+	if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !== preventFocusOnClose || $[3] !== preventFocusOnOpen || $[4] !== returnFocusRef) {
 		t1 = {
 			containerRef: overlayRef,
 			returnFocusRef,
 			initialFocusRef,
-			preventFocusOnOpen
+			preventFocusOnOpen,
+			preventFocusOnClose
 		};
 		$[0] = initialFocusRef;
 		$[1] = overlayRef;
-		$[2] = preventFocusOnOpen;
-		$[3] = returnFocusRef;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[2] = preventFocusOnClose;
+		$[3] = preventFocusOnOpen;
+		$[4] = returnFocusRef;
+		$[5] = t1;
+	} else t1 = $[5];
 	useOpenAndCloseFocus(t1);
 	let t2;
-	if ($[5] !== ignoreClickRefs || $[6] !== onClickOutside || $[7] !== overlayRef) {
+	if ($[6] !== ignoreClickRefs || $[7] !== onClickOutside || $[8] !== overlayRef) {
 		t2 = {
 			containerRef: overlayRef,
 			ignoreClickRefs,
 			onClickOutside
 		};
-		$[5] = ignoreClickRefs;
-		$[6] = onClickOutside;
-		$[7] = overlayRef;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[6] = ignoreClickRefs;
+		$[7] = onClickOutside;
+		$[8] = overlayRef;
+		$[9] = t2;
+	} else t2 = $[9];
 	useOnOutsideClick(t2);
 	let t3;
-	if ($[9] !== onEscape) {
+	if ($[10] !== onEscape) {
 		t3 = (event) => {
 			onEscape(event);
 			event.preventDefault();
 		};
-		$[9] = onEscape;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[10] = onEscape;
+		$[11] = t3;
+	} else t3 = $[11];
 	useOnEscapePress(t3);
 	let t4;
-	if ($[11] !== overlayRef) {
+	if ($[12] !== overlayRef) {
 		t4 = { ref: overlayRef };
-		$[11] = overlayRef;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[12] = overlayRef;
+		$[13] = t4;
+	} else t4 = $[13];
 	return t4;
 };
 //#endregion

package/dist/internal/components/InputLabel.js

@@ -54,12 +54,11 @@ function InputLabel(t0) {
 	} else t4 = $[13];
 	let t5;
 	if ($[14] !== children || $[15] !== required || $[16] !== requiredIndicator || $[17] !== requiredText) {
-		var _requiredText;
 		t5 = required || requiredText ? /* @__PURE__ */ jsxs("span", {
 			className: InputLabel_module_css_default.RequiredText,
 			children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": requiredIndicator ? void 0 : true,
-				children: (_requiredText = requiredText) !== null && _requiredText !== void 0 ? _requiredText : "*"
+				children: requiredText !== null && requiredText !== void 0 ? requiredText : "*"
 			})]
 		}) : children;
 		$[14] = children;

package/dist/internal/components/TextInputInnerAction.js

@@ -94,13 +94,12 @@ const TextInputAction = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	} else t6 = $[17];
 	let t7;
 	if ($[18] !== accessibleLabel || $[19] !== ariaLabel || $[20] !== children || $[21] !== forwardedRef || $[22] !== icon || $[23] !== rest || $[24] !== styleProps || $[25] !== tooltipDirection || $[26] !== variant) {
-		var _tooltipDirection;
 		t7 = /* @__PURE__ */ jsx("span", {
 			className: t6,
 			"data-component": "TextInput.Action",
 			children: icon && !children && ariaLabel ? /* @__PURE__ */ jsx(IconButton, {
 				...accessibleLabel,
-				tooltipDirection: (_tooltipDirection = tooltipDirection) !== null && _tooltipDirection !== void 0 ? _tooltipDirection : "s",
+				tooltipDirection: tooltipDirection !== null && tooltipDirection !== void 0 ? tooltipDirection : "s",
 				variant,
 				type: "button",
 				icon,

package/dist/internal/components/TextInputWrapper.d.ts

@@ -5,6 +5,9 @@ import React, { ComponentProps } from "react";
 type TextInputSizes = 'small' | 'medium' | 'large';
 type StyledTextInputBaseWrapperProps = {
   block?: boolean;
+  /**
+   * @deprecated Omit this prop to use the default background.
+   */
   contrast?: boolean;
   disabled?: boolean;
   hasTrailingAction?: boolean;

package/dist/internal/hooks/useThemeProvider.js

@@ -53,7 +53,7 @@ function useThemeProvider(props) {
 }
 function subscribeToSystemColorMode(callback) {
 	var _window, _window$matchMedia;
-	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
+	const media = (_window = window) === null || _window === void 0 || (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
 	media === null || media === void 0 || media.addEventListener("change", callback);
 	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
 }
@@ -64,8 +64,8 @@ function _temp() {
 	return "day";
 }
 function getSystemColorMode() {
-	var _window2, _window2$matchMedia, _window2$matchMedia$c;
-	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
+	var _window2, _window2$matchMedia;
+	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia !== void 0 && _window2$matchMedia.matches ? "night" : "day";
 }
 //#endregion
 export { useThemeProvider };

package/generated/components.json

@@ -10,7 +10,7 @@
       "stories": [
         {
           "id": "experimental-components-actionbar--default",
-          "code": "() => (\n  <ActionBar aria-label=\"Toolbar\">\n    <ActionBar.IconButton\n      icon={BoldIcon}\n      aria-label=\"Bold\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ItalicIcon}\n      aria-label=\"Italic\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={CodeIcon}\n      aria-label=\"Code\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={LinkIcon}\n      aria-label=\"Link\"\n    ></ActionBar.IconButton>\n    <ActionBar.Divider />\n    <ActionBar.IconButton\n      icon={FileAddedIcon}\n      aria-label=\"File Added\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={SearchIcon}\n      aria-label=\"Search\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={QuoteIcon}\n      aria-label=\"Insert Quote\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ListUnorderedIcon}\n      aria-label=\"Unordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ListOrderedIcon}\n      aria-label=\"Ordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={TasklistIcon}\n      aria-label=\"Task List\"\n      onClick={() => alert('Task List clicked')}\n    ></ActionBar.IconButton>\n  </ActionBar>\n)"
+          "code": "() => (\n  <ActionBar aria-label=\"Toolbar\">\n    <ActionBar.IconButton\n      icon={<BoldIcon />}\n      aria-label=\"Bold\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ItalicIcon />}\n      aria-label=\"Italic\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<CodeIcon />}\n      aria-label=\"Code\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<LinkIcon />}\n      aria-label=\"Link\"\n    ></ActionBar.IconButton>\n    <ActionBar.Divider />\n    <ActionBar.IconButton\n      icon={<FileAddedIcon />}\n      aria-label=\"File Added\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<SearchIcon />}\n      aria-label=\"Search\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<QuoteIcon />}\n      aria-label=\"Insert Quote\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ListUnorderedIcon />}\n      aria-label=\"Unordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ListOrderedIcon />}\n      aria-label=\"Ordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<TasklistIcon />}\n      aria-label=\"Task List\"\n      onClick={() => alert('Task List clicked')}\n    ></ActionBar.IconButton>\n  </ActionBar>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -832,6 +832,12 @@
               "defaultValue": "",
               "description": "Callback that is called when the position of the overlay changes"
             },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to the anchor or returnFocusRef when the menu closes. Consumers must manage focus themselves."
+            },
             {
               "name": "data-test-id",
               "type": "unknown",
@@ -1997,63 +2003,63 @@
       "stories": [
         {
           "id": "components-iconbutton--default",
-          "code": "() => <IconButton icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--primary",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"primary\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"primary\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--danger",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"danger\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"danger\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--invisible",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"invisible\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"invisible\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--disabled",
-          "code": "() => <IconButton disabled icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton disabled icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--small",
-          "code": "() => <IconButton size=\"small\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"small\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--medium",
-          "code": "() => <IconButton size=\"medium\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"medium\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--large",
-          "code": "() => <IconButton size=\"large\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"large\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--with-description",
-          "code": "() => (\n  <IconButton\n    icon={InboxIcon}\n    aria-label=\"Notifications\"\n    description=\"You have no unread notifications.\"\n  />\n)"
+          "code": "() => (\n  <IconButton\n    icon={<InboxIcon />}\n    aria-label=\"Notifications\"\n    description=\"You have no unread notifications.\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--external-tooltip",
-          "code": "() => (\n  <Tooltip\n    text=\"this is a supportive description for icon button\"\n    direction=\"se\"\n  >\n    <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n  </Tooltip>\n)"
+          "code": "() => (\n  <Tooltip\n    text=\"this is a supportive description for icon button\"\n    direction=\"se\"\n  >\n    <IconButton icon={<HeartIcon />} aria-label=\"HeartIcon\" />\n  </Tooltip>\n)"
         },
         {
           "id": "components-iconbutton-features--as-a-menu-anchor",
-          "code": "() => (\n  <ActionMenu>\n    <ActionMenu.Anchor>\n      <IconButton icon={ChevronDownIcon} aria-label=\"Something\" />\n    </ActionMenu.Anchor>\n\n    <ActionMenu.Overlay width=\"medium\">\n      <ActionList>\n        <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n          Copy link\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n          Quote reply\n          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n          Edit comment\n          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Divider />\n        <ActionList.Item\n          variant=\"danger\"\n          onSelect={() => alert('Delete file clicked')}\n        >\n          Delete file\n          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>\n)"
+          "code": "() => (\n  <ActionMenu>\n    <ActionMenu.Anchor>\n      <IconButton icon={<ChevronDownIcon />} aria-label=\"Something\" />\n    </ActionMenu.Anchor>\n\n    <ActionMenu.Overlay width=\"medium\">\n      <ActionList>\n        <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n          Copy link\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n          Quote reply\n          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n          Edit comment\n          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Divider />\n        <ActionList.Item\n          variant=\"danger\"\n          onSelect={() => alert('Delete file clicked')}\n        >\n          Delete file\n          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>\n)"
         },
         {
           "id": "components-iconbutton-features--loading",
-          "code": "() => (\n  <IconButton loading icon={HeartIcon} variant=\"primary\" aria-label=\"Primary\" />\n)"
+          "code": "() => (\n  <IconButton\n    loading\n    icon={<HeartIcon />}\n    variant=\"primary\"\n    aria-label=\"Primary\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--loading-trigger",
-          "code": "() => {\n  const [isLoading, setIsLoading] = useState(false)\n  const handleClick = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 3000)\n  }\n  return (\n    <IconButton\n      loading={isLoading}\n      onClick={handleClick}\n      icon={DownloadIcon}\n      aria-label=\"Download\"\n    />\n  )\n}"
+          "code": "() => {\n  const [isLoading, setIsLoading] = useState(false)\n  const handleClick = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 3000)\n  }\n  return (\n    <IconButton\n      loading={isLoading}\n      onClick={handleClick}\n      icon={<DownloadIcon />}\n      aria-label=\"Download\"\n    />\n  )\n}"
         },
         {
           "id": "components-iconbutton-features--keybinding-hint-on-description",
-          "code": "() => (\n  <IconButton\n    icon={InboxIcon}\n    aria-label=\"Notifications\"\n    description=\"You have unread notifications\"\n    keybindingHint=\"G+N\"\n  />\n)"
+          "code": "() => (\n  <IconButton\n    icon={<InboxIcon />}\n    aria-label=\"Notifications\"\n    description=\"You have unread notifications\"\n    keybindingHint=\"G+N\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--keybinding-hint",
-          "code": "() => <IconButton icon={BoldIcon} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />"
+          "code": "() => (\n  <IconButton icon={<BoldIcon />} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -2094,9 +2100,9 @@
         },
         {
           "name": "icon",
-          "type": "Component",
+          "type": "React.ReactNode | React.ComponentType<IconProps> | React.ExoticComponent<IconProps>",
           "defaultValue": "",
-          "description": "provide an octicon. It will be placed in the center of the button"
+          "description": "Provide an icon component or React node. It will be placed in the center of the button. Use a React element when passing an icon from a Server Component."
         },
         {
           "name": "aria-label",
@@ -4739,6 +4745,12 @@
       ],
       "importPath": "@primer/react",
       "props": [
+        {
+          "name": "preventFocusOnClose",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "If true, focus will not be returned to returnFocusRef when the Overlay is unmounted. Consumers must manage focus themselves."
+        },
         {
           "name": "returnFocusRef",
           "type": "React.RefObject<HTMLElement>",
@@ -8036,7 +8048,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "size",
@@ -8386,7 +8399,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "validationStatus",

package/generated/hooks.json

@@ -696,6 +696,12 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, focus will not be set when the container is opened."
+            },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to returnFocusRef when the hook is cleaned up. Consumers must manage focus themselves."
             }
           ]
         }
@@ -769,6 +775,12 @@
               "name": "preventFocusOnOpen",
               "type": "boolean",
               "description": "Flag to prevent focus on the overlay when it is opened."
+            },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to returnFocusRef when the overlay is unmounted. Consumers must manage focus themselves."
             }
           ]
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.42.0-rc.fcbfbaea1",
+  "version": "38.42.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -94,14 +94,16 @@
   },
   "devDependencies": {
     "@actions/core": "1.11.1",
-    "@babel/cli": "7.28.6",
-    "@babel/core": "7.29.6",
-    "@babel/parser": "7.29.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "@babel/plugin-transform-modules-commonjs": "7.28.6",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
+    "@babel/cli": "8.0.6",
+    "@babel/core": "8.0.6",
+    "@babel/generator": "8.0.6",
+    "@babel/parser": "8.0.6",
+    "@babel/plugin-transform-nullish-coalescing-operator": "8.0.1",
+    "@babel/plugin-transform-optional-chaining": "8.0.5",
+    "@babel/plugin-transform-modules-commonjs": "8.0.1",
+    "@babel/preset-react": "8.0.1",
+    "@babel/preset-typescript": "8.0.1",
+    "@babel/types": "8.0.6",
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
@@ -118,7 +120,6 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/babel__core": "^7.20.5",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.isempty": "4.4.9",
     "@types/lodash.isobject": "3.0.9",
@@ -131,13 +132,11 @@
     "afterframe": "^1.0.2",
     "ajv": "8.18.0",
     "axe-core": "4.9.1",
-    "babel-core": "7.0.0-bridge.0",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
     "babel-plugin-transform-replace-expressions": "0.2.0",
-    "babel-polyfill": "6.26.0",
     "chalk": "^5.4.1",
     "change-case": "5.4.4",
     "concurrently": "9.1.2",
@@ -166,7 +165,7 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.2.11",
+    "rolldown": "^1.2.12",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",