@primer/react 38.31.0-rc.f96563b64 → 38.31.1-rc.43134a516

package/CHANGELOG.md

@@ -1,11 +1,19 @@
 # @primer/react
 
+## 38.31.1
+
+### Patch Changes
+
+- [#8035](https://github.com/primer/react/pull/8035) [`723f4d6`](https://github.com/primer/react/commit/723f4d6db12710e2b94f56b945a937158fcbb127) Thanks [@mattcosta7](https://github.com/mattcosta7)! - UnderlineNav, ActionBar: Detect item overflow with a single shared IntersectionObserver per component instead of one observer per item, reducing observer churn during resize. No public API changes.
+
 ## 38.31.0
 
 ### Minor Changes
 
 - [#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`.

package/dist/ActionBar/ActionBar.js

@@ -4,12 +4,14 @@ import { ButtonComponent } from "../Button/Button.js";
 import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
 import { ActionList } from "../ActionList/index.js";
 import { ActionMenu } from "../ActionMenu/ActionMenu.js";
+import { useIsClipped } from "../internal/hooks/useOverflowObserver.js";
+import { OverflowObserverProvider } from "../internal/components/OverflowObserverProvider.js";
 import { createDescendantRegistry } from "../utils/descendant-registry.js";
 import ActionBar_module_css_default from "./ActionBar.module.css.js";
 import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useContext, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import React, { forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { KebabHorizontalIcon } from "@primer/octicons-react";
 //#region src/ActionBar/ActionBar.tsx
 const ActionBarContext = /*#__PURE__*/ React.createContext({ size: "medium" });
@@ -40,7 +42,7 @@ const renderMenuItem = (item, index) => {
 };
 renderMenuItem.displayName = "renderMenuItem";
 const ActionBar = (t0) => {
-	const $ = c(40);
+	const $ = c(43);
 	const { size: t1, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, flush: t2, className, gap: t3 } = t0;
 	const size = t1 === void 0 ? "medium" : t1;
 	const flush = t2 === void 0 ? false : t2;
@@ -90,56 +92,66 @@ const ActionBar = (t0) => {
 	} else t11 = $[9];
 	let t12;
 	if ($[10] !== children || $[11] !== setChildRegistry) {
-		t12 = /*#__PURE__*/ jsxs("div", {
-			className: ActionBar_module_css_default.OverflowContainer,
-			children: [t11, /*#__PURE__*/ jsx(ActionBarItemsRegistry.Provider, {
-				setRegistry: setChildRegistry,
-				children
-			})]
+		t12 = /*#__PURE__*/ jsx(ActionBarItemsRegistry.Provider, {
+			setRegistry: setChildRegistry,
+			children
 		});
 		$[10] = children;
 		$[11] = setChildRegistry;
 		$[12] = t12;
 	} else t12 = $[12];
-	const t13 = `More ${ariaLabel} items ${overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length}`;
-	const t14 = overflowItems !== null && overflowItems !== void 0 && overflowItems.length ? void 0 : true;
-	let t15;
-	if ($[13] !== size || $[14] !== t13 || $[15] !== t14) {
-		t15 = /*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsx(IconButton, {
+	let t13;
+	if ($[13] !== containerRef || $[14] !== t12) {
+		t13 = /*#__PURE__*/ jsxs("div", {
+			className: ActionBar_module_css_default.OverflowContainer,
+			children: [t11, /*#__PURE__*/ jsx(OverflowObserverProvider, {
+				rootRef: containerRef,
+				children: t12
+			})]
+		});
+		$[13] = containerRef;
+		$[14] = t12;
+		$[15] = t13;
+	} else t13 = $[15];
+	const t14 = `More ${ariaLabel} items ${overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length}`;
+	const t15 = overflowItems !== null && overflowItems !== void 0 && overflowItems.length ? void 0 : true;
+	let t16;
+	if ($[16] !== size || $[17] !== t14 || $[18] !== t15) {
+		t16 = /*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsx(IconButton, {
 			variant: "invisible",
-			"aria-label": t13,
+			"aria-label": t14,
 			icon: KebabHorizontalIcon,
 			className: ActionBar_module_css_default.MoreButton,
-			"data-more-button-inactive": t14,
+			"data-more-button-inactive": t15,
 			size
 		}) });
-		$[13] = size;
-		$[14] = t13;
-		$[15] = t14;
-		$[16] = t15;
-	} else t15 = $[16];
-	let t16;
-	if ($[17] !== overflowItems) {
-		t16 = overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.map(_temp4);
-		$[17] = overflowItems;
-		$[18] = t16;
-	} else t16 = $[18];
-	let t17;
-	if ($[19] !== t16) {
-		t17 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t16 }) });
+		$[16] = size;
+		$[17] = t14;
+		$[18] = t15;
 		$[19] = t16;
-		$[20] = t17;
-	} else t17 = $[20];
+	} else t16 = $[19];
+	let t17;
+	if ($[20] !== overflowItems) {
+		t17 = overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.map(_temp4);
+		$[20] = overflowItems;
+		$[21] = t17;
+	} else t17 = $[21];
 	let t18;
-	if ($[21] !== t15 || $[22] !== t17) {
-		t18 = /*#__PURE__*/ jsxs(ActionMenu, { children: [t15, t17] });
-		$[21] = t15;
+	if ($[22] !== t17) {
+		t18 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t17 }) });
 		$[22] = t17;
 		$[23] = t18;
 	} else t18 = $[23];
 	let t19;
-	if ($[24] !== ariaLabel || $[25] !== ariaLabelledBy || $[26] !== gap || $[27] !== size || $[28] !== t10 || $[29] !== t12 || $[30] !== t18 || $[31] !== t9) {
-		t19 = /*#__PURE__*/ jsxs("div", {
+	if ($[24] !== t16 || $[25] !== t18) {
+		t19 = /*#__PURE__*/ jsxs(ActionMenu, { children: [t16, t18] });
+		$[24] = t16;
+		$[25] = t18;
+		$[26] = t19;
+	} else t19 = $[26];
+	let t20;
+	if ($[27] !== ariaLabel || $[28] !== ariaLabelledBy || $[29] !== gap || $[30] !== size || $[31] !== t10 || $[32] !== t13 || $[33] !== t19 || $[34] !== t9) {
+		t20 = /*#__PURE__*/ jsxs("div", {
 			ref: t9,
 			role: "toolbar",
 			className: ActionBar_module_css_default.List,
@@ -148,87 +160,70 @@ const ActionBar = (t0) => {
 			"data-gap": gap,
 			"data-size": size,
 			"data-has-overflow": t10,
-			children: [t12, t18]
+			children: [t13, t19]
 		});
-		$[24] = ariaLabel;
-		$[25] = ariaLabelledBy;
-		$[26] = gap;
-		$[27] = size;
-		$[28] = t10;
-		$[29] = t12;
-		$[30] = t18;
-		$[31] = t9;
-		$[32] = t19;
-	} else t19 = $[32];
-	let t20;
-	if ($[33] !== flush || $[34] !== t19 || $[35] !== t8) {
-		t20 = /*#__PURE__*/ jsx("div", {
+		$[27] = ariaLabel;
+		$[28] = ariaLabelledBy;
+		$[29] = gap;
+		$[30] = size;
+		$[31] = t10;
+		$[32] = t13;
+		$[33] = t19;
+		$[34] = t9;
+		$[35] = t20;
+	} else t20 = $[35];
+	let t21;
+	if ($[36] !== flush || $[37] !== t20 || $[38] !== t8) {
+		t21 = /*#__PURE__*/ jsx("div", {
 			className: t8,
 			"data-component": "ActionBar",
 			"data-flush": flush,
-			children: t19
-		});
-		$[33] = flush;
-		$[34] = t19;
-		$[35] = t8;
-		$[36] = t20;
-	} else t20 = $[36];
-	let t21;
-	if ($[37] !== t20 || $[38] !== t7) {
-		t21 = /*#__PURE__*/ jsx(ActionBarContext.Provider, {
-			value: t7,
 			children: t20
 		});
+		$[36] = flush;
 		$[37] = t20;
-		$[38] = t7;
+		$[38] = t8;
 		$[39] = t21;
 	} else t21 = $[39];
-	return t21;
+	let t22;
+	if ($[40] !== t21 || $[41] !== t7) {
+		t22 = /*#__PURE__*/ jsx(ActionBarContext.Provider, {
+			value: t7,
+			children: t21
+		});
+		$[40] = t21;
+		$[41] = t7;
+		$[42] = t22;
+	} else t22 = $[42];
+	return t22;
 };
 function useActionBarItem(ref, registryProps) {
 	var _useContext;
-	const $ = c(8);
+	const $ = c(5);
 	const isGroupOverflowing = (_useContext = useContext(ActionBarGroupContext)) === null || _useContext === void 0 ? void 0 : _useContext.isOverflowing;
 	const isInGroup = isGroupOverflowing !== void 0;
 	let t0;
-	if ($[0] !== isInGroup || $[1] !== ref) {
-		t0 = (onChange) => {
-			if (isInGroup) return _temp5;
-			const observer = new IntersectionObserver(() => onChange(), { threshold: .75 });
-			if (ref.current) observer.observe(ref.current);
-			return () => observer.disconnect();
-		};
+	if ($[0] !== isInGroup) {
+		t0 = { disabled: isInGroup };
 		$[0] = isInGroup;
-		$[1] = ref;
-		$[2] = t0;
-	} else t0 = $[2];
-	const subscribeIntersectionObserver = t0;
-	let t1;
-	if ($[3] !== ref) {
-		t1 = () => ref.current ? ref.current.offsetTop > 0 : false;
-		$[3] = ref;
-		$[4] = t1;
-	} else t1 = $[4];
-	const isItemOverflowing = useSyncExternalStore(subscribeIntersectionObserver, t1, _temp6);
+		$[1] = t0;
+	} else t0 = $[1];
+	const isItemOverflowing = useIsClipped(ref, t0);
 	const isOverflowing = isGroupOverflowing || isItemOverflowing;
 	ActionBarItemsRegistry.useRegisterDescendant(isOverflowing ? registryProps : null);
-	const t2 = isOverflowing ? "" : void 0;
-	let t3;
-	if ($[5] !== isOverflowing || $[6] !== t2) {
-		t3 = {
+	const t1 = isOverflowing ? "" : void 0;
+	let t2;
+	if ($[2] !== isOverflowing || $[3] !== t1) {
+		t2 = {
 			isOverflowing,
-			dataOverflowingAttr: t2
+			dataOverflowingAttr: t1
 		};
-		$[5] = isOverflowing;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
-}
-function _temp6() {
-	return false;
+		$[2] = isOverflowing;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 }
-function _temp5() {}
 const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props }, forwardedRef) => {
 	const ref = useRef(null);
 	const mergedRef = useMergedRefs(forwardedRef, ref);
@@ -444,7 +439,7 @@ const ActionBarMenu = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	} else t4 = $[18];
 	let t5;
 	if ($[19] !== items) {
-		t5 = items.map(_temp7);
+		t5 = items.map(_temp5);
 		$[19] = items;
 		$[20] = t5;
 	} else t5 = $[20];
@@ -534,7 +529,7 @@ function _temp4(t0) {
 		})] }, id);
 	}
 }
-function _temp7(item, index) {
+function _temp5(item, index) {
 	return renderMenuItem(item, index);
 }
 //#endregion

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,