@primer/react 38.42.0-rc.fcbfbaea1 → 38.42.0

package/dist/FilteredActionList/useAnnouncements.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef } from "react";
+import { c } from "../utils/react-compiler-runtime.js";
+import { useEffect, useRef } from "react";
 import { announce } from "@primer/live-region-element";
 //#region src/FilteredActionList/useAnnouncements.tsx
 const delayMs = 500;
@@ -43,91 +44,157 @@ const getAnnouncementState = (items, loading, message, filterValue) => JSON.stri
 	message,
 	filterValue
 });
-const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loading = false, message, focusManagement, filterValue) => {
+const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message, focusManagement, filterValue) => {
+	const $ = c(37);
+	const enabled = t0 === void 0 ? true : t0;
+	const loading = t1 === void 0 ? false : t1;
 	const usingRovingTabindex = focusManagement === "roving-tabindex";
-	const liveRegion = document.querySelector("live-region");
-	const selectedItems = items.filter((item) => item.selected).length;
-	const announce$1 = useCallback((...args) => {
-		if (enabled) return announce(...args);
-	}, [enabled]);
-	const onInputFocus = useCallback(() => {
-		if (usingRovingTabindex) {
-			const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
-			announce$1(announcementText, {
-				delayMs,
-				from: liveRegion ? liveRegion : void 0
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = document.querySelector("live-region");
+		$[0] = t2;
+	} else t2 = $[0];
+	const liveRegion = t2;
+	let t3;
+	if ($[1] !== items) {
+		t3 = items.filter(_temp);
+		$[1] = items;
+		$[2] = t3;
+	} else t3 = $[2];
+	const selectedItems = t3.length;
+	let t4;
+	if ($[3] !== enabled) {
+		t4 = (...t5) => {
+			const args = t5;
+			if (enabled) return announce(...args);
+		};
+		$[3] = enabled;
+		$[4] = t4;
+	} else t4 = $[4];
+	const announce$1 = t4;
+	let t5;
+	if ($[5] !== announce$1 || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRovingTabindex) {
+		t5 = () => {
+			if (usingRovingTabindex) {
+				const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+				announce$1(announcementText, {
+					delayMs,
+					from: liveRegion ? liveRegion : void 0
+				});
+				return;
+			}
+			window.setTimeout(() => {
+				const activeItem = getItemWithActiveDescendant(listContainerRef, items);
+				if (!activeItem) return;
+				const { index, text, selected } = activeItem;
+				const inputLabel = getInputLabel(inputRef.current);
+				const announcementText_0 = [
+					inputLabel ? `${inputLabel}, filter text box and list of items` : "Focus on filter text box and list of items",
+					`Focused item: ${text}`,
+					`${selected ? "selected" : "not selected"}`,
+					`${index + 1} of ${items.length}`
+				].join(", ");
+				announce$1(announcementText_0, {
+					delayMs,
+					from: liveRegion ? liveRegion : void 0
+				});
 			});
-			return;
-		}
-		window.setTimeout(() => {
-			const activeItem = getItemWithActiveDescendant(listContainerRef, items);
-			if (!activeItem) return;
-			const { index, text, selected } = activeItem;
-			const inputLabel = getInputLabel(inputRef.current);
-			const announcementText = [
-				inputLabel ? `${inputLabel}, filter text box and list of items` : "Focus on filter text box and list of items",
-				`Focused item: ${text}`,
-				`${selected ? "selected" : "not selected"}`,
-				`${index + 1} of ${items.length}`
-			].join(", ");
-			announce$1(announcementText, {
-				delayMs,
-				from: liveRegion ? liveRegion : void 0
-			});
-		});
-	}, [
-		announce$1,
-		inputRef,
-		items,
-		listContainerRef,
-		liveRegion,
-		selectedItems,
-		usingRovingTabindex
-	]);
-	const announcementState = getAnnouncementState(items, loading, message, filterValue);
+		};
+		$[5] = announce$1;
+		$[6] = inputRef;
+		$[7] = items;
+		$[8] = listContainerRef;
+		$[9] = selectedItems;
+		$[10] = usingRovingTabindex;
+		$[11] = t5;
+	} else t5 = $[11];
+	const onInputFocus = t5;
+	let t6;
+	if ($[12] !== filterValue || $[13] !== items || $[14] !== loading || $[15] !== message) {
+		t6 = getAnnouncementState(items, loading, message, filterValue);
+		$[12] = filterValue;
+		$[13] = items;
+		$[14] = loading;
+		$[15] = message;
+		$[16] = t6;
+	} else t6 = $[16];
+	const announcementState = t6;
 	const previousAnnouncementState = useRef(announcementState);
-	useEffect(function announceListUpdates() {
-		if (previousAnnouncementState.current === announcementState) return;
-		previousAnnouncementState.current = announcementState;
-		liveRegion === null || liveRegion === void 0 || liveRegion.clear();
-		if (items.length === 0 && !loading) {
-			announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
-			return;
-		}
-		if (usingRovingTabindex) {
-			const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
-			announce$1(announcementText, {
-				delayMs,
-				from: liveRegion ? liveRegion : void 0
-			});
-		} else window.requestAnimationFrame(() => {
-			const activeItem = getItemWithActiveDescendant(listContainerRef, items);
-			if (!activeItem) return;
-			const { index, text, selected } = activeItem;
-			const announcementText = [
-				`List updated`,
-				`Focused item: ${text}`,
-				`${selected ? "selected" : "not selected"}`,
-				`${index + 1} of ${items.length}`
-			].join(", ");
-			announce$1(announcementText, {
-				delayMs,
-				from: liveRegion ? liveRegion : void 0
+	let t7;
+	if ($[17] !== announce$1 || $[18] !== announcementState || $[19] !== items || $[20] !== listContainerRef || $[21] !== loading || $[22] !== (message === null || message === void 0 ? void 0 : message.description) || $[23] !== (message === null || message === void 0 ? void 0 : message.title) || $[24] !== selectedItems || $[25] !== usingRovingTabindex) {
+		t7 = function announceListUpdates() {
+			if (previousAnnouncementState.current === announcementState) return;
+			previousAnnouncementState.current = announcementState;
+			liveRegion === null || liveRegion === void 0 || liveRegion.clear();
+			if (items.length === 0 && !loading) {
+				announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
+				return;
+			}
+			if (usingRovingTabindex) {
+				const announcementText_1 = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+				announce$1(announcementText_1, {
+					delayMs,
+					from: liveRegion ? liveRegion : void 0
+				});
+			} else window.requestAnimationFrame(() => {
+				const activeItem_0 = getItemWithActiveDescendant(listContainerRef, items);
+				if (!activeItem_0) return;
+				const { index: index_0, text: text_0, selected: selected_0 } = activeItem_0;
+				const announcementText_2 = [
+					"List updated",
+					`Focused item: ${text_0}`,
+					`${selected_0 ? "selected" : "not selected"}`,
+					`${index_0 + 1} of ${items.length}`
+				].join(", ");
+				announce$1(announcementText_2, {
+					delayMs,
+					from: liveRegion ? liveRegion : void 0
+				});
 			});
-		});
-	}, [
-		announce$1,
-		announcementState,
-		items,
-		listContainerRef,
-		liveRegion,
-		usingRovingTabindex,
-		message === null || message === void 0 ? void 0 : message.title,
-		message === null || message === void 0 ? void 0 : message.description,
-		loading,
-		selectedItems
-	]);
+		};
+		$[17] = announce$1;
+		$[18] = announcementState;
+		$[19] = items;
+		$[20] = listContainerRef;
+		$[21] = loading;
+		$[22] = message === null || message === void 0 ? void 0 : message.description;
+		$[23] = message === null || message === void 0 ? void 0 : message.title;
+		$[24] = selectedItems;
+		$[25] = usingRovingTabindex;
+		$[26] = t7;
+	} else t7 = $[26];
+	const t8 = message === null || message === void 0 ? void 0 : message.title;
+	const t9 = message === null || message === void 0 ? void 0 : message.description;
+	let t10;
+	if ($[27] !== announce$1 || $[28] !== announcementState || $[29] !== items || $[30] !== listContainerRef || $[31] !== loading || $[32] !== selectedItems || $[33] !== t8 || $[34] !== t9 || $[35] !== usingRovingTabindex) {
+		t10 = [
+			announce$1,
+			announcementState,
+			items,
+			listContainerRef,
+			liveRegion,
+			usingRovingTabindex,
+			t8,
+			t9,
+			loading,
+			selectedItems
+		];
+		$[27] = announce$1;
+		$[28] = announcementState;
+		$[29] = items;
+		$[30] = listContainerRef;
+		$[31] = loading;
+		$[32] = selectedItems;
+		$[33] = t8;
+		$[34] = t9;
+		$[35] = usingRovingTabindex;
+		$[36] = t10;
+	} else t10 = $[36];
+	useEffect(t7, t10);
 	return onInputFocus;
 };
+function _temp(item) {
+	return item.selected;
+}
 //#endregion
 export { useAnnouncements };

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/FormControl/FormControlLabel.js

@@ -4,7 +4,6 @@ import { InputLabel } from "../internal/components/InputLabel.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/FormControl/FormControlLabel.tsx
 const FormControlLabel = (t0) => {
-	var _id;
 	const $ = c(26);
 	let as;
 	let children;
@@ -40,7 +39,7 @@ const FormControlLabel = (t0) => {
 	}
 	const requiredIndicator = t1 === void 0 ? true : t1;
 	const { disabled, id: formControlId, required, isReferenced, labelId } = useFormControlContext();
-	const resolvedId = (_id = id) !== null && _id !== void 0 ? _id : labelId;
+	const resolvedId = id !== null && id !== void 0 ? id : labelId;
 	let t2;
 	if ($[10] !== as || $[11] !== className || $[12] !== disabled || $[13] !== formControlId || $[14] !== htmlFor || $[15] !== isReferenced || $[16] !== props || $[17] !== required || $[18] !== requiredIndicator || $[19] !== requiredText || $[20] !== resolvedId || $[21] !== visuallyHidden) {
 		t2 = as === "legend" || as === "span" ? {

package/dist/InlineMessage/InlineMessage.js

@@ -30,7 +30,6 @@ const smallIcons = {
 	})
 };
 function InlineMessage(t0) {
-	var _variant;
 	const $ = c(19);
 	let LeadingVisual;
 	let children;
@@ -82,7 +81,7 @@ function InlineMessage(t0) {
 		$[10] = className;
 		$[11] = t2;
 	} else t2 = $[11];
-	const t3 = (_variant = variant) !== null && _variant !== void 0 ? _variant : void 0;
+	const t3 = variant !== null && variant !== void 0 ? variant : void 0;
 	let t4;
 	if ($[12] !== children || $[13] !== icon || $[14] !== rest || $[15] !== size || $[16] !== t2 || $[17] !== t3) {
 		t4 = /* @__PURE__ */ jsxs("div", {

package/dist/NavList/NavList.js

@@ -25,7 +25,7 @@ function levelToHeadingTag(level) {
 	return `h${Math.min(Math.max(level, 1), 4)}`;
 }
 const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
-	var _heading$props$id, _ariaLabelledby;
+	var _heading$props$id;
 	const $ = c(26);
 	let ariaLabel;
 	let ariaLabelledby;
@@ -64,7 +64,7 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
 		$[8] = t2;
 	} else t2 = $[8];
 	const headingLevel = t2;
-	const navLabelledby = (_ariaLabelledby = ariaLabelledby) !== null && _ariaLabelledby !== void 0 ? _ariaLabelledby : ariaLabel ? void 0 : headingId;
+	const navLabelledby = ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : ariaLabel ? void 0 : headingId;
 	let t3;
 	if ($[9] !== heading || $[10] !== headingId) {
 		t3 = heading ? /*#__PURE__*/ React.cloneElement(heading, { id: headingId }) : null;
@@ -601,8 +601,7 @@ const GroupHeadingImpl = (t0) => {
 	const headingLevel = React.useContext(NavListHeadingLevelContext);
 	let t1;
 	if ($[4] !== as || $[5] !== headingLevel) {
-		var _as;
-		t1 = (_as = as) !== null && _as !== void 0 ? _as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+		t1 = as !== null && as !== void 0 ? as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
 		$[4] = as;
 		$[5] = headingLevel;
 		$[6] = t1;

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`.