@primer/react 38.31.0-rc.55cc807a9 → 38.31.0-rc.bafdb665f

package/CHANGELOG.md

@@ -6,8 +6,12 @@
 
 - [#8057](https://github.com/primer/react/pull/8057) [`0b9c81e`](https://github.com/primer/react/commit/0b9c81e7e8fef1dfc98f3b86b5a375d4ec7fe204) Thanks [@francinelucca](https://github.com/francinelucca)! - ThemeProvider: Remove `primer_react_theme_provider_remove_ssr_handoff` feature flag.
 
+- [#8105](https://github.com/primer/react/pull/8105) [`be2950f`](https://github.com/primer/react/commit/be2950fd1ac268dd4e79258ab2cfe9241dd9e1c6) Thanks [@joshblack](https://github.com/joshblack)! - React Compiler: Enable compiler output for Banner, ConfirmationDialog, PageLayout, Pagination, UnderlineNav, `useMergedRefs`, and `useScrollFlash`
+
 ### Patch Changes
 
+- [#8066](https://github.com/primer/react/pull/8066) [`dd66aa2`](https://github.com/primer/react/commit/dd66aa27611f7ad56adb7429b50813d6af5a01d7) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Fix invalid HTML nesting in `ActionList.Heading` by applying the visually-hidden styles directly to the heading element instead of wrapping it in a `span`.
+
 - [#8054](https://github.com/primer/react/pull/8054) [`1775f2e`](https://github.com/primer/react/commit/1775f2e8b968d59a1189456b14cff15e527937cb) Thanks [@joshblack](https://github.com/joshblack)! - AvatarStack: Improve rendering performance with React Compiler support
 
 - [#8053](https://github.com/primer/react/pull/8053) [`b2151ae`](https://github.com/primer/react/commit/b2151ae2d5719f09efb0b89731e52e4ca50e8bf1) Thanks [@joshblack](https://github.com/joshblack)! - Checkbox, CheckboxGroup, and RadioGroup: Improve rendering performance with React Compiler support

package/dist/ActionList/Heading.js

@@ -1,6 +1,6 @@
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { invariant } from "../utils/invariant.js";
-import VisuallyHidden from "../_VisuallyHidden.js";
+import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
 import { ActionListContainerContext } from "./ActionListContainerContext.js";
 import Heading$1 from "../Heading/Heading.js";
 import { ListContext } from "./shared.js";
@@ -12,7 +12,7 @@ import React, { forwardRef } from "react";
 //#region src/ActionList/Heading.tsx
 const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	var _props$id;
-	const $ = c(21);
+	const $ = c(19);
 	let as;
 	let children;
 	let className;
@@ -41,48 +41,38 @@ const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	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.");
-	const t2 = !visuallyHidden;
-	const t3 = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : headingId;
-	let t4;
-	if ($[7] !== className) {
-		t4 = clsx(className, Heading_module_css_default.ActionListHeader);
+	const t2 = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : headingId;
+	let t3;
+	if ($[7] !== className || $[8] !== visuallyHidden) {
+		t3 = clsx(className, Heading_module_css_default.ActionListHeader, { [_VisuallyHidden_module_css_default.InternalVisuallyHidden]: visuallyHidden });
 		$[7] = className;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== as || $[10] !== children || $[11] !== listVariant || $[12] !== mergedRef || $[13] !== props || $[14] !== size || $[15] !== t3 || $[16] !== t4) {
-		t5 = /*#__PURE__*/ jsx(Heading$1, {
+		$[8] = visuallyHidden;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== as || $[11] !== children || $[12] !== listVariant || $[13] !== mergedRef || $[14] !== props || $[15] !== size || $[16] !== t2 || $[17] !== t3) {
+		t4 = /*#__PURE__*/ jsx(Heading$1, {
 			as,
 			variant: size,
 			ref: mergedRef,
-			id: t3,
-			className: t4,
+			id: t2,
+			className: t3,
 			"data-component": "ActionList.Heading",
 			"data-list-variant": listVariant,
 			...props,
 			children
 		});
-		$[9] = as;
-		$[10] = children;
-		$[11] = listVariant;
-		$[12] = mergedRef;
-		$[13] = props;
-		$[14] = size;
-		$[15] = t3;
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== t2 || $[19] !== t5) {
-		t6 = /*#__PURE__*/ jsx(VisuallyHidden, {
-			isVisible: t2,
-			children: t5
-		});
-		$[18] = t2;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
-	return t6;
+		$[10] = as;
+		$[11] = children;
+		$[12] = listVariant;
+		$[13] = mergedRef;
+		$[14] = props;
+		$[15] = size;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
+	return t4;
 });
 Heading.displayName = "ActionList.Heading";
 Heading.__SLOT__ = Symbol("ActionList.Heading");

package/dist/Autocomplete/Autocomplete.js

@@ -3,8 +3,9 @@ import { AutocompleteContext, AutocompleteDeferredInputContext, AutocompleteInpu
 import AutocompleteInput from "./AutocompleteInput.js";
 import AutocompleteMenu from "./AutocompleteMenu.js";
 import AutocompleteOverlay from "./AutocompleteOverlay.js";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useDeferredValue, useMemo, useReducer, useRef } from "react";
+import { useDeferredValue, useReducer, useRef } from "react";
 //#region src/Autocomplete/Autocomplete.tsx
 const initialState = {
 	inputValue: "",
@@ -39,88 +40,144 @@ const reducer = (state, action) => {
 		default: return state;
 	}
 };
-const Autocomplete = ({ children, id: idProp }) => {
+const Autocomplete = (t0) => {
+	const $ = c(24);
+	const { children, id: idProp } = t0;
 	const activeDescendantRef = useRef(null);
 	const scrollContainerRef = useRef(null);
 	const inputRef = useRef(null);
 	const [state, dispatch] = useReducer(reducer, initialState);
 	const { inputValue, showMenu, autocompleteSuggestion, isMenuDirectlyActivated, selectedItemLength } = state;
-	const setInputValue = useCallback((value) => {
-		dispatch({
-			type: "inputValue",
-			payload: value
-		});
-	}, []);
-	const setShowMenu = useCallback((value) => {
-		dispatch({
-			type: "showMenu",
-			payload: value
-		});
-	}, []);
-	const setAutocompleteSuggestion = useCallback((value) => {
-		dispatch({
-			type: "autocompleteSuggestion",
-			payload: value
-		});
-	}, []);
-	const setIsMenuDirectlyActivated = useCallback((value) => {
-		dispatch({
-			type: "isMenuDirectlyActivated",
-			payload: value
-		});
-	}, []);
-	const setSelectedItemLength = useCallback((value) => {
-		dispatch({
-			type: "selectedItemLength",
-			payload: value
-		});
-	}, []);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (value) => {
+			dispatch({
+				type: "inputValue",
+				payload: value
+			});
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const setInputValue = t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (value_0) => {
+			dispatch({
+				type: "showMenu",
+				payload: value_0
+			});
+		};
+		$[1] = t2;
+	} else t2 = $[1];
+	const setShowMenu = t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (value_1) => {
+			dispatch({
+				type: "autocompleteSuggestion",
+				payload: value_1
+			});
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const setAutocompleteSuggestion = t3;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (value_2) => {
+			dispatch({
+				type: "isMenuDirectlyActivated",
+				payload: value_2
+			});
+		};
+		$[3] = t4;
+	} else t4 = $[3];
+	const setIsMenuDirectlyActivated = t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (value_3) => {
+			dispatch({
+				type: "selectedItemLength",
+				payload: value_3
+			});
+		};
+		$[4] = t5;
+	} else t5 = $[4];
+	const setSelectedItemLength = t5;
 	const id = useId$1(idProp);
-	const autocompleteContextValue = useMemo(() => ({
-		activeDescendantRef,
-		id,
-		inputRef,
-		scrollContainerRef,
-		selectedItemLength,
-		setAutocompleteSuggestion,
-		setInputValue,
-		setIsMenuDirectlyActivated,
-		setShowMenu,
-		setSelectedItemLength,
-		showMenu
-	}), [
-		id,
-		selectedItemLength,
-		setAutocompleteSuggestion,
-		setInputValue,
-		setIsMenuDirectlyActivated,
-		setShowMenu,
-		setSelectedItemLength,
-		showMenu
-	]);
-	const autocompleteInputContextValue = useMemo(() => ({
-		autocompleteSuggestion,
-		inputValue,
-		isMenuDirectlyActivated
-	}), [
-		autocompleteSuggestion,
-		inputValue,
-		isMenuDirectlyActivated
-	]);
+	let t6;
+	if ($[5] !== id || $[6] !== selectedItemLength || $[7] !== showMenu) {
+		t6 = {
+			activeDescendantRef,
+			id,
+			inputRef,
+			scrollContainerRef,
+			selectedItemLength,
+			setAutocompleteSuggestion,
+			setInputValue,
+			setIsMenuDirectlyActivated,
+			setShowMenu,
+			setSelectedItemLength,
+			showMenu
+		};
+		$[5] = id;
+		$[6] = selectedItemLength;
+		$[7] = showMenu;
+		$[8] = t6;
+	} else t6 = $[8];
+	const autocompleteContextValue = t6;
+	let t7;
+	if ($[9] !== autocompleteSuggestion || $[10] !== inputValue || $[11] !== isMenuDirectlyActivated) {
+		t7 = {
+			autocompleteSuggestion,
+			inputValue,
+			isMenuDirectlyActivated
+		};
+		$[9] = autocompleteSuggestion;
+		$[10] = inputValue;
+		$[11] = isMenuDirectlyActivated;
+		$[12] = t7;
+	} else t7 = $[12];
+	const autocompleteInputContextValue = t7;
 	const deferredInputValue = useDeferredValue(inputValue);
-	const autocompleteDeferredInputContextValue = useMemo(() => ({ deferredInputValue }), [deferredInputValue]);
-	return /*#__PURE__*/ jsx(AutocompleteContext.Provider, {
-		value: autocompleteContextValue,
-		children: /*#__PURE__*/ jsx(AutocompleteInputContext.Provider, {
+	let t8;
+	if ($[13] !== deferredInputValue) {
+		t8 = { deferredInputValue };
+		$[13] = deferredInputValue;
+		$[14] = t8;
+	} else t8 = $[14];
+	const autocompleteDeferredInputContextValue = t8;
+	let t9;
+	if ($[15] !== autocompleteDeferredInputContextValue || $[16] !== children) {
+		t9 = /*#__PURE__*/ jsx(AutocompleteDeferredInputContext.Provider, {
+			value: autocompleteDeferredInputContextValue,
+			children
+		});
+		$[15] = autocompleteDeferredInputContextValue;
+		$[16] = children;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== autocompleteInputContextValue || $[19] !== t9) {
+		t10 = /*#__PURE__*/ jsx(AutocompleteInputContext.Provider, {
 			value: autocompleteInputContextValue,
-			children: /*#__PURE__*/ jsx(AutocompleteDeferredInputContext.Provider, {
-				value: autocompleteDeferredInputContextValue,
-				children
-			})
-		})
-	});
+			children: t9
+		});
+		$[18] = autocompleteInputContextValue;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== autocompleteContextValue || $[22] !== t10) {
+		t11 = /*#__PURE__*/ jsx(AutocompleteContext.Provider, {
+			value: autocompleteContextValue,
+			children: t10
+		});
+		$[21] = autocompleteContextValue;
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	return t11;
 };
-Autocomplete.displayName = "Autocomplete";
 var Autocomplete_default = Object.assign(Autocomplete, {
 	__SLOT__: Symbol("Autocomplete"),
 	Context: AutocompleteContext,