@primer/react 38.42.0-rc.700f75ee0 → 38.42.0-rc.ebd425836

package/CHANGELOG.md

@@ -4,8 +4,14 @@
 
 ### Minor Changes
 
+- [#8513](https://github.com/primer/react/pull/8513) [`1bab81a`](https://github.com/primer/react/commit/1bab81a0eb3f613c8d6b4abd36bd92d0ac6cedc4) Thanks [@tay1orjones](https://github.com/tay1orjones)! - ActionMenu, Overlay: Add `preventFocusOnClose` to let consumers manage focus when an overlay closes.
+
 - [#8415](https://github.com/primer/react/pull/8415) [`66a9f31`](https://github.com/primer/react/commit/66a9f31611c642209f66ed68b7d43712b09dbd88) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add controlled and uncontrolled row selection.
 
+### Patch Changes
+
+- [#8508](https://github.com/primer/react/pull/8508) [`f71dce4`](https://github.com/primer/react/commit/f71dce4869dedf4cb8460ed2fa8e18edc0604198) Thanks [@namangoyal176-10](https://github.com/namangoyal176-10)! - FormControl: Prevent duplicate input rendering when layout is horizontal with non-choice inputs
+
 ## 38.41.0
 
 ### Minor Changes

package/dist/FormControl/FormControl.js

@@ -24,7 +24,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, ref) => {
 	var _slots$validation, _slots$label;
-	const $ = c(32);
+	const $ = c(23);
 	const { children, disabled: disabledProp, layout: t1, id: idProp, required, className, style } = t0;
 	const layout = t1 === void 0 ? "vertical" : t1;
 	let t2;
@@ -78,87 +78,65 @@ var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, re
 		warning(isRadioInput && childrenWithoutSlots.find(_temp), "An individual radio cannot be a required field.");
 	} else warning(!!slots.leadingVisual, "A leading visual is only rendered for a checkbox or radio form control. If you want to render a leading visual inside of your input, check if your input supports a leading visual.");
 	const isLabelHidden = (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.props.visuallyHidden;
-	const t4 = /*#__PURE__*/ React.isValidElement(InputComponent) ? /*#__PURE__*/ React.cloneElement(InputComponent, {
-		id,
-		disabled,
-		required: required && !isRadioInput,
-		"aria-describedby": captionId
-	}) : null;
-	let t5;
-	if ($[4] !== childrenWithoutSlots) {
-		t5 = childrenWithoutSlots.filter(_temp2);
-		$[4] = childrenWithoutSlots;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== t4 || $[7] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: FormControl_module_css_default.ControlChoiceInputs,
-			children: [t4, t5]
-		});
-		$[6] = t4;
-		$[7] = t5;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== disabled || $[10] !== slots.caption || $[11] !== slots.leadingVisual) {
-		t7 = slots.leadingVisual ? /* @__PURE__ */ jsx("div", {
+	let t4;
+	if ($[4] !== disabled || $[5] !== slots.caption || $[6] !== slots.leadingVisual) {
+		t4 = slots.leadingVisual ? /* @__PURE__ */ jsx("div", {
 			className: FormControl_module_css_default.LeadingVisual,
 			"data-disabled": disabled ? "" : void 0,
 			"data-has-caption": slots.caption ? "" : void 0,
 			children: slots.leadingVisual
 		}) : null;
-		$[9] = disabled;
-		$[10] = slots.caption;
-		$[11] = slots.leadingVisual;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== slots.caption || $[14] !== slots.label) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		$[4] = disabled;
+		$[5] = slots.caption;
+		$[6] = slots.leadingVisual;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== slots.caption || $[9] !== slots.label) {
+		t5 = /* @__PURE__ */ jsxs("div", {
 			className: FormControl_module_css_default.LabelContainer,
 			children: [slots.label, slots.caption]
 		});
-		$[13] = slots.caption;
-		$[14] = slots.label;
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			t6,
-			t7,
-			t8
-		] });
-		$[16] = t6;
-		$[17] = t7;
-		$[18] = t8;
-		$[19] = t9;
-	} else t9 = $[19];
-	const InputChildren = t9;
+		$[8] = slots.caption;
+		$[9] = slots.label;
+		$[10] = t5;
+	} else t5 = $[10];
+	const InputChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: FormControl_module_css_default.ControlChoiceInputs,
+			children: [/*#__PURE__*/ React.isValidElement(InputComponent) ? /*#__PURE__*/ React.cloneElement(InputComponent, {
+				id,
+				disabled,
+				required: required && !isRadioInput,
+				"aria-describedby": captionId
+			}) : null, childrenWithoutSlots.filter((child_1) => /*#__PURE__*/ React.isValidElement(child_1) && !expectedInputComponents.some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0)))]
+		}),
+		t4,
+		t5
+	] });
 	const T0 = FormControlContextProvider;
-	const t10 = !isSelectPanelInput;
-	let t11;
-	if ($[20] !== captionId || $[21] !== disabled || $[22] !== id || $[23] !== labelId || $[24] !== required || $[25] !== t10 || $[26] !== validationMessageId) {
-		t11 = {
+	const t6 = !isSelectPanelInput;
+	let t7;
+	if ($[11] !== captionId || $[12] !== disabled || $[13] !== id || $[14] !== labelId || $[15] !== required || $[16] !== t6 || $[17] !== validationMessageId) {
+		t7 = {
 			captionId,
 			disabled,
 			id,
 			required,
 			validationMessageId,
-			isReferenced: t10,
+			isReferenced: t6,
 			labelId
 		};
-		$[20] = captionId;
-		$[21] = disabled;
-		$[22] = id;
-		$[23] = labelId;
-		$[24] = required;
-		$[25] = t10;
-		$[26] = validationMessageId;
-		$[27] = t11;
-	} else t11 = $[27];
-	const t12 = isChoiceInput || layout === "horizontal" ? /* @__PURE__ */ jsx("div", {
+		$[11] = captionId;
+		$[12] = disabled;
+		$[13] = id;
+		$[14] = labelId;
+		$[15] = required;
+		$[16] = t6;
+		$[17] = validationMessageId;
+		$[18] = t7;
+	} else t7 = $[18];
+	const t8 = isChoiceInput || layout === "horizontal" ? /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-has-leading-visual": slots.leadingVisual ? "" : void 0,
 		className: clsx(className, FormControl_module_css_default.ControlHorizontalLayout),
@@ -188,18 +166,18 @@ var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, re
 			slots.caption
 		]
 	});
-	let t13;
-	if ($[28] !== T0 || $[29] !== t11 || $[30] !== t12) {
-		t13 = /* @__PURE__ */ jsx(T0, {
-			value: t11,
-			children: t12
+	let t9;
+	if ($[19] !== T0 || $[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			value: t7,
+			children: t8
 		});
-		$[28] = T0;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-	} else t13 = $[31];
-	return t13;
+		$[19] = T0;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
 }), {
 	__SLOT__: Symbol("FormControl"),
 	Caption: FormControlCaption,
@@ -211,8 +189,5 @@ function _temp(child_0) {
 	var _child_0$props;
 	return /*#__PURE__*/ React.isValidElement(child_0) && ((_child_0$props = child_0.props) === null || _child_0$props === void 0 ? void 0 : _child_0$props.required);
 }
-function _temp2(child_1) {
-	return /*#__PURE__*/ React.isValidElement(child_1) && ![Checkbox, Radio].some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0));
-}
 //#endregion
 export { FormControl_default as default };

package/dist/Overlay/Overlay.d.ts

@@ -54,6 +54,7 @@ type ContainerProps = {
   portalContainerName?: string;
   preventOverflow?: boolean;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
   returnFocusRef: React.RefObject<HTMLElement | null>;
 };
 type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
@@ -68,6 +69,7 @@ type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
  * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
  * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
  * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+ * @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
  * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
  * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.

package/dist/Overlay/Overlay.js

@@ -76,12 +76,13 @@ const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width,
 * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
 * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
 * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
 * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
 * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
 
 */
-const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
+const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, preventFocusOnClose, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
 	const overlayRef = useRef(null);
 	const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
 	const slideAnimationDistance = 8;
@@ -94,7 +95,8 @@ const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePor
 		ignoreClickRefs,
 		onClickOutside,
 		initialFocusRef,
-		preventFocusOnOpen
+		preventFocusOnOpen,
+		preventFocusOnClose
 	});
 	useEffect(() => {
 		var _overlayRef$current;

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/generated/components.json

@@ -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",
@@ -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>",

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.700f75ee0",
+  "version": "38.42.0-rc.ebd425836",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -157,7 +157,7 @@
     "mdast-util-to-string": "4.0.0",
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
-    "oxc-transform-react": "^0.152.0",
+    "oxc-transform-react": "^0.153.0",
     "postcss-preset-primer": "^0.0.0",
     "publint": "^0.3.15",
     "react": "18.3.1",