@primer/react 38.31.0 → 38.31.1-rc.52bfd2504

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/UnderlineNav/UnderlineNav.js

@@ -6,6 +6,7 @@ import { ActionList } from "../ActionList/index.js";
 import { ActionMenu } from "../ActionMenu/ActionMenu.js";
 import { SkeletonText } from "../SkeletonText/SkeletonText.js";
 import { LoadingCounter, UnderlineItemList, UnderlineWrapper } from "../internal/components/UnderlineTabbedInterface.js";
+import { OverflowObserverProvider } from "../internal/components/OverflowObserverProvider.js";
 import UnderlineNav_module_css_default from "./UnderlineNav.module.css.js";
 import { UnderlineNavContext } from "./UnderlineNavContext.js";
 import { UnderlineNavItemsRegistry } from "./UnderlineNavItemsRegistry.js";
@@ -16,7 +17,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState } from "react";
 //#region src/UnderlineNav/UnderlineNav.tsx
 const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
-	const $ = c(49);
+	const $ = c(52);
 	const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children } = t0;
 	const as = t1 === void 0 ? "nav" : t1;
 	const loadingCounters = t2 === void 0 ? false : t2;
@@ -98,52 +99,62 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const t12 = isOverflowing ? "true" : void 0;
 	let t13;
 	if ($[17] !== children || $[18] !== setRegisteredItems) {
-		t13 = /*#__PURE__*/ jsx(UnderlineItemList, {
-			ref: listRef,
-			role: "list",
-			className: UnderlineNav_module_css_default.ItemsList,
-			children: /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
-				setRegistry: setRegisteredItems,
-				children
-			})
+		t13 = /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
+			setRegistry: setRegisteredItems,
+			children
 		});
 		$[17] = children;
 		$[18] = setRegisteredItems;
 		$[19] = t13;
 	} else t13 = $[19];
 	let t14;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
-		$[20] = t14;
-	} else t14 = $[20];
-	const t15 = overflowingCurrentItem ? "true" : void 0;
-	const t16 = overflowingCurrentItem ? "More items, including current item" : void 0;
-	let t17;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
+	if ($[20] !== navRef || $[21] !== t13) {
+		t14 = /*#__PURE__*/ jsx(UnderlineItemList, {
+			ref: listRef,
+			role: "list",
+			className: UnderlineNav_module_css_default.ItemsList,
+			children: /*#__PURE__*/ jsx(OverflowObserverProvider, {
+				rootRef: navRef,
+				children: t13
+			})
+		});
+		$[20] = navRef;
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
+		$[23] = t15;
+	} else t15 = $[23];
+	const t16 = overflowingCurrentItem ? "true" : void 0;
+	const t17 = overflowingCurrentItem ? "More items, including current item" : void 0;
+	let t18;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
 			as: "span",
 			children: " items"
 		})] });
-		$[21] = t17;
-	} else t17 = $[21];
-	let t18;
-	if ($[22] !== t15 || $[23] !== t16) {
-		t18 = /*#__PURE__*/ jsx(ActionMenu.Button, {
+		$[24] = t18;
+	} else t18 = $[24];
+	let t19;
+	if ($[25] !== t16 || $[26] !== t17) {
+		t19 = /*#__PURE__*/ jsx(ActionMenu.Button, {
 			className: UnderlineNav_module_css_default.MoreButton,
 			variant: "invisible",
 			"data-component": "overflow-menu-button",
-			"data-current": t15,
-			"aria-label": t16,
-			children: t17
+			"data-current": t16,
+			"aria-label": t17,
+			children: t18
 		});
-		$[22] = t15;
-		$[23] = t16;
-		$[24] = t18;
-	} else t18 = $[24];
-	let t19;
-	if ($[25] !== loadingCounters || $[26] !== overflowMenuItems || $[27] !== registeredItems) {
-		t19 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t20) => {
-			const [key, allProps] = t20;
+		$[25] = t16;
+		$[26] = t17;
+		$[27] = t19;
+	} else t19 = $[27];
+	let t20;
+	if ($[28] !== loadingCounters || $[29] !== overflowMenuItems || $[30] !== registeredItems) {
+		t20 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t21) => {
+			const [key, allProps] = t21;
 			const { children: menuItemChildren, counter, onSelect, ...menuItemProps } = allProps;
 			return /*#__PURE__*/ jsxs(ActionList.LinkItem, {
 				onClick: (event) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
@@ -158,35 +169,35 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 				}) })]
 			}, key);
 		});
-		$[25] = loadingCounters;
-		$[26] = overflowMenuItems;
-		$[27] = registeredItems;
-		$[28] = t19;
-	} else t19 = $[28];
-	let t20;
-	if ($[29] !== t19) {
-		t20 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t19 }) });
-		$[29] = t19;
-		$[30] = t20;
-	} else t20 = $[30];
+		$[28] = loadingCounters;
+		$[29] = overflowMenuItems;
+		$[30] = registeredItems;
+		$[31] = t20;
+	} else t20 = $[31];
 	let t21;
-	if ($[31] !== menuOpen || $[32] !== t18 || $[33] !== t20) {
-		t21 = /*#__PURE__*/ jsxs("div", {
+	if ($[32] !== t20) {
+		t21 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t20 }) });
+		$[32] = t20;
+		$[33] = t21;
+	} else t21 = $[33];
+	let t22;
+	if ($[34] !== menuOpen || $[35] !== t19 || $[36] !== t21) {
+		t22 = /*#__PURE__*/ jsxs("div", {
 			className: UnderlineNav_module_css_default.MoreButtonContainer,
-			children: [t14, /*#__PURE__*/ jsxs(ActionMenu, {
+			children: [t15, /*#__PURE__*/ jsxs(ActionMenu, {
 				open: menuOpen,
 				onOpenChange: setMenuOpen,
-				children: [t18, t20]
+				children: [t19, t21]
 			})]
 		});
-		$[31] = menuOpen;
-		$[32] = t18;
-		$[33] = t20;
-		$[34] = t21;
-	} else t21 = $[34];
-	let t22;
-	if ($[35] !== ariaLabel || $[36] !== as || $[37] !== navRef || $[38] !== t10 || $[39] !== t11 || $[40] !== t12 || $[41] !== t13 || $[42] !== t21 || $[43] !== variant) {
-		t22 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
+		$[34] = menuOpen;
+		$[35] = t19;
+		$[36] = t21;
+		$[37] = t22;
+	} else t22 = $[37];
+	let t23;
+	if ($[38] !== ariaLabel || $[39] !== as || $[40] !== navRef || $[41] !== t10 || $[42] !== t11 || $[43] !== t12 || $[44] !== t14 || $[45] !== t22 || $[46] !== variant) {
+		t23 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
 			as,
 			"aria-label": ariaLabel,
 			className: t10,
@@ -195,31 +206,31 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 			"data-overflow-mode": "wrap",
 			"data-hide-icons": t11,
 			"data-has-overflow": t12,
-			children: [t13, t21]
+			children: [t14, t22]
 		});
-		$[35] = ariaLabel;
-		$[36] = as;
-		$[37] = navRef;
-		$[38] = t10;
-		$[39] = t11;
-		$[40] = t12;
-		$[41] = t13;
-		$[42] = t21;
-		$[43] = variant;
-		$[44] = t22;
-	} else t22 = $[44];
-	let t23;
-	if ($[45] !== contextValue || $[46] !== t22 || $[47] !== t9) {
-		t23 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
+		$[38] = ariaLabel;
+		$[39] = as;
+		$[40] = navRef;
+		$[41] = t10;
+		$[42] = t11;
+		$[43] = t12;
+		$[44] = t14;
+		$[45] = t22;
+		$[46] = variant;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== contextValue || $[49] !== t23 || $[50] !== t9) {
+		t24 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
 			value: contextValue,
-			children: [t9, t22]
+			children: [t9, t23]
 		});
-		$[45] = contextValue;
-		$[46] = t22;
-		$[47] = t9;
-		$[48] = t23;
-	} else t23 = $[48];
-	return t23;
+		$[48] = contextValue;
+		$[49] = t23;
+		$[50] = t9;
+		$[51] = t24;
+	} else t24 = $[51];
+	return t24;
 });
 UnderlineNav.displayName = "UnderlineNav";
 function _temp(entry) {

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -1,14 +1,15 @@
 import { UnderlineItem } from "../internal/components/UnderlineTabbedInterface.js";
+import { useIsClipped } from "../internal/hooks/useOverflowObserver.js";
 import { UnderlineNavContext } from "./UnderlineNavContext.js";
 import { UnderlineNavItemsRegistry } from "./UnderlineNavItemsRegistry.js";
 import UnderlineNavItem_module_css_default from "./UnderlineNavItem.module.css.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, useSyncExternalStore } from "react";
+import { forwardRef, useContext, useRef } from "react";
 //#region src/UnderlineNav/UnderlineNavItem.tsx
 const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 	var _leadingVisual;
-	const $ = c(32);
+	const $ = c(30);
 	let Icon;
 	let ariaCurrent;
 	let children;
@@ -45,46 +46,32 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 	const href = t1 === void 0 ? "#" : t1;
 	const ref = useRef(null);
 	const { loadingCounters } = useContext(UnderlineNavContext);
+	const isOverflowing = useIsClipped(ref);
+	UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
 	let t2;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = (onChange) => {
-			const observer = new IntersectionObserver(() => onChange(), { threshold: 1 });
-			if (ref.current) observer.observe(ref.current);
-			return () => observer.disconnect();
+	if ($[10] !== onSelect) {
+		t2 = (event) => {
+			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
 		};
-		$[10] = t2;
-	} else t2 = $[10];
+		$[10] = onSelect;
+		$[11] = t2;
+	} else t2 = $[11];
+	const keyDownHandler = t2;
 	let t3;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = () => ref.current ? ref.current.offsetTop > 0 : false;
-		$[11] = t3;
-	} else t3 = $[11];
-	const isOverflowing = useSyncExternalStore(t2, t3, _temp);
-	UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
-	let t4;
 	if ($[12] !== onSelect) {
-		t4 = (event) => {
-			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		};
-		$[12] = onSelect;
-		$[13] = t4;
-	} else t4 = $[13];
-	const keyDownHandler = t4;
-	let t5;
-	if ($[14] !== onSelect) {
-		t5 = (event_0) => {
+		t3 = (event_0) => {
 			if (!event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
 		};
-		$[14] = onSelect;
-		$[15] = t5;
-	} else t5 = $[15];
-	const clickHandler = t5;
-	const t6 = isOverflowing ? true : allProps["aria-hidden"];
-	const t7 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
-	const t8 = isOverflowing ? -1 : allProps.tabIndex;
-	let t9;
-	if ($[16] !== Component || $[17] !== ariaCurrent || $[18] !== children || $[19] !== clickHandler || $[20] !== counter || $[21] !== forwardedRef || $[22] !== href || $[23] !== keyDownHandler || $[24] !== loadingCounters || $[25] !== props || $[26] !== t7 || $[27] !== t8) {
-		t9 = /*#__PURE__*/ jsx(UnderlineItem, {
+		$[12] = onSelect;
+		$[13] = t3;
+	} else t3 = $[13];
+	const clickHandler = t3;
+	const t4 = isOverflowing ? true : allProps["aria-hidden"];
+	const t5 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
+	const t6 = isOverflowing ? -1 : allProps.tabIndex;
+	let t7;
+	if ($[14] !== Component || $[15] !== ariaCurrent || $[16] !== children || $[17] !== clickHandler || $[18] !== counter || $[19] !== forwardedRef || $[20] !== href || $[21] !== keyDownHandler || $[22] !== loadingCounters || $[23] !== props || $[24] !== t5 || $[25] !== t6) {
+		t7 = /*#__PURE__*/ jsx(UnderlineItem, {
 			ref: forwardedRef,
 			as: Component,
 			href,
@@ -92,43 +79,40 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 			onKeyDown: keyDownHandler,
 			onClick: clickHandler,
 			counter,
-			icon: t7,
+			icon: t5,
 			loadingCounters,
 			...props,
-			tabIndex: t8,
+			tabIndex: t6,
 			children
 		});
-		$[16] = Component;
-		$[17] = ariaCurrent;
-		$[18] = children;
-		$[19] = clickHandler;
-		$[20] = counter;
-		$[21] = forwardedRef;
-		$[22] = href;
-		$[23] = keyDownHandler;
-		$[24] = loadingCounters;
-		$[25] = props;
+		$[14] = Component;
+		$[15] = ariaCurrent;
+		$[16] = children;
+		$[17] = clickHandler;
+		$[18] = counter;
+		$[19] = forwardedRef;
+		$[20] = href;
+		$[21] = keyDownHandler;
+		$[22] = loadingCounters;
+		$[23] = props;
+		$[24] = t5;
+		$[25] = t6;
 		$[26] = t7;
-		$[27] = t8;
-		$[28] = t9;
-	} else t9 = $[28];
-	let t10;
-	if ($[29] !== t6 || $[30] !== t9) {
-		t10 = /*#__PURE__*/ jsx("li", {
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== t4 || $[28] !== t7) {
+		t8 = /*#__PURE__*/ jsx("li", {
 			className: UnderlineNavItem_module_css_default.UnderlineNavItem,
 			ref,
-			"aria-hidden": t6,
-			children: t9
+			"aria-hidden": t4,
+			children: t7
 		});
-		$[29] = t6;
-		$[30] = t9;
-		$[31] = t10;
-	} else t10 = $[31];
-	return t10;
+		$[27] = t4;
+		$[28] = t7;
+		$[29] = t8;
+	} else t8 = $[29];
+	return t8;
 });
 UnderlineNavItem.displayName = "UnderlineNavItem";
-function _temp() {
-	return false;
-}
 //#endregion
 export { UnderlineNavItem };

package/dist/internal/components/OverflowObserverProvider.js

@@ -0,0 +1,157 @@
+import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
+import { OverflowObserverContext } from "../hooks/useOverflowObserver.js";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+//#region src/internal/components/OverflowObserverProvider.tsx
+/**
+* Owns a single `IntersectionObserver` shared by every descendant that calls `useIsClipped`, instead of each item
+* creating its own observer. Each observed element maps to a set of change callbacks; one observer notification fans
+* out to all of them.
+*
+* `rootRef` must point to the element that clips overflowing children (typically a single-row, `overflow: hidden`
+* container). The observer is root-scoped to that element so children that wrap onto a clipped row are reported as
+* overflowing. Until the root is attached the provider stays inert (it never falls back to the viewport, which would
+* not reflect the container's clipping) and re-checks on later renders.
+*/
+function OverflowObserverProvider(t0) {
+	const $ = c(15);
+	const { children, rootRef } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ new Map();
+		$[0] = t1;
+	} else t1 = $[0];
+	const subscribersRef = useRef(t1);
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ new Set();
+		$[1] = t2;
+	} else t2 = $[1];
+	const observedElementsRef = useRef(t2);
+	const observerRef = useRef(null);
+	const observerRootRef = useRef(null);
+	let t3;
+	if ($[2] !== rootRef) {
+		t3 = () => {
+			var _observerRef$current;
+			if (!supportsIntersectionObserver()) return null;
+			const root = rootRef.current;
+			if (root === null) return null;
+			if (observerRef.current && observerRootRef.current === root) return observerRef.current;
+			(_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
+			observedElementsRef.current.clear();
+			observerRef.current = new IntersectionObserver((entries) => {
+				for (const entry of entries) {
+					const callbacks = subscribersRef.current.get(entry.target);
+					if (!callbacks) continue;
+					const isOverflowing = getIsOverflowing(entry);
+					for (const cb of callbacks) cb(isOverflowing);
+				}
+			}, {
+				root,
+				threshold: [0, 1]
+			});
+			observerRootRef.current = root;
+			return observerRef.current;
+		};
+		$[2] = rootRef;
+		$[3] = t3;
+	} else t3 = $[3];
+	const getObserver = t3;
+	let t4;
+	if ($[4] !== getObserver) {
+		t4 = () => {
+			const observer = getObserver();
+			if (!observer) return;
+			for (const element of subscribersRef.current.keys()) if (!observedElementsRef.current.has(element)) {
+				observer.observe(element);
+				observedElementsRef.current.add(element);
+			}
+		};
+		$[4] = getObserver;
+		$[5] = t4;
+	} else t4 = $[5];
+	const observeSubscribedElements = t4;
+	let t5;
+	if ($[6] !== observeSubscribedElements) {
+		t5 = (element_0, onOverflowChange) => {
+			let callbacks_0 = subscribersRef.current.get(element_0);
+			if (!callbacks_0) {
+				callbacks_0 = /* @__PURE__ */ new Set();
+				subscribersRef.current.set(element_0, callbacks_0);
+			}
+			callbacks_0.add(onOverflowChange);
+			observeSubscribedElements();
+			return () => {
+				const set = subscribersRef.current.get(element_0);
+				if (!set) return;
+				set.delete(onOverflowChange);
+				if (set.size === 0) {
+					var _observerRef$current2;
+					subscribersRef.current.delete(element_0);
+					observedElementsRef.current.delete(element_0);
+					(_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.unobserve(element_0);
+				}
+			};
+		};
+		$[6] = observeSubscribedElements;
+		$[7] = t5;
+	} else t5 = $[7];
+	const observe = t5;
+	let t6;
+	if ($[8] !== observeSubscribedElements) {
+		t6 = () => {
+			observeSubscribedElements();
+		};
+		$[8] = observeSubscribedElements;
+		$[9] = t6;
+	} else t6 = $[9];
+	useIsomorphicLayoutEffect(t6);
+	let t7;
+	let t8;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			const subscribers = subscribersRef.current;
+			const observedElements = observedElementsRef.current;
+			return () => {
+				var _observerRef$current3;
+				(_observerRef$current3 = observerRef.current) === null || _observerRef$current3 === void 0 || _observerRef$current3.disconnect();
+				observerRef.current = null;
+				observedElements.clear();
+				subscribers.clear();
+			};
+		};
+		t8 = [];
+		$[10] = t7;
+		$[11] = t8;
+	} else {
+		t7 = $[10];
+		t8 = $[11];
+	}
+	useEffect(t7, t8);
+	let t9;
+	if ($[12] !== children || $[13] !== observe) {
+		t9 = /*#__PURE__*/ jsx(OverflowObserverContext.Provider, {
+			value: observe,
+			children
+		});
+		$[12] = children;
+		$[13] = observe;
+		$[14] = t9;
+	} else t9 = $[14];
+	return t9;
+}
+/**
+* Treat any target that is not fully visible within the observer root as overflowing. Wrapped items should be fully
+* clipped (`isIntersecting: false`, `intersectionRatio: 0`), but partial ratios also count as overflowing to guard
+* against sub-pixel boundary cases.
+*/
+function getIsOverflowing(entry) {
+	return !entry.isIntersecting || entry.intersectionRatio < 1;
+}
+function supportsIntersectionObserver() {
+	return typeof IntersectionObserver !== "undefined";
+}
+//#endregion
+export { OverflowObserverProvider };

package/dist/internal/hooks/useOverflowObserver.js

@@ -0,0 +1,57 @@
+import { c } from "react-compiler-runtime";
+import { createContext, useContext, useRef, useSyncExternalStore } from "react";
+//#region src/internal/hooks/useOverflowObserver.ts
+/** Subscribe a single observed element to the shared `IntersectionObserver`. Returns an unsubscribe function. */
+/** Provided by `OverflowObserverProvider`; `null` when no provider is present. Consumed via `useIsClipped`. */
+const OverflowObserverContext = /*#__PURE__*/ createContext(null);
+/**
+* Track whether `ref`'s element is currently clipped (overflowing) by the nearest `OverflowObserverProvider`'s
+* root-scoped `IntersectionObserver`.
+*
+* Returns `false` when there is no surrounding provider, during SSR, when `IntersectionObserver` is unavailable, or when
+* `disabled` is set.
+*
+* @param ref Ref to the element whose overflow state should be tracked.
+* @param options.disabled When true, skips observer subscription entirely and always reports `false`. Useful for items
+*   whose overflow is determined by an ancestor (e.g. ActionBar items inside an overflowing group).
+*/
+function useIsClipped(ref, options) {
+	var _options$disabled;
+	const $ = c(6);
+	const disabled = (_options$disabled = options === null || options === void 0 ? void 0 : options.disabled) !== null && _options$disabled !== void 0 ? _options$disabled : false;
+	const observe = useContext(OverflowObserverContext);
+	const isOverflowingRef = useRef(false);
+	let t0;
+	if ($[0] !== disabled || $[1] !== observe || $[2] !== ref) {
+		t0 = (onChange) => {
+			if (disabled) return _temp;
+			const element = ref.current;
+			if (!element || observe === null) return _temp2;
+			const updateOverflowState = (isOverflowing) => {
+				if (isOverflowing !== isOverflowingRef.current) {
+					isOverflowingRef.current = isOverflowing;
+					onChange();
+				}
+			};
+			return observe(element, updateOverflowState);
+		};
+		$[0] = disabled;
+		$[1] = observe;
+		$[2] = ref;
+		$[3] = t0;
+	} else t0 = $[3];
+	const subscribe = t0;
+	let t1;
+	if ($[4] !== disabled) {
+		t1 = () => disabled ? false : isOverflowingRef.current;
+		$[4] = disabled;
+		$[5] = t1;
+	} else t1 = $[5];
+	return useSyncExternalStore(subscribe, t1, getOverflowServerSnapshot);
+}
+/** Stable server snapshot for `useIsClipped`: overflow is never measured during SSR. */
+function _temp2() {}
+function _temp() {}
+const getOverflowServerSnapshot = () => false;
+//#endregion
+export { OverflowObserverContext, useIsClipped };

package/dist/utils/descendant-registry.js

@@ -89,25 +89,57 @@ function createDescendantRegistry() {
 	const unsetValue = Symbol("unset");
 	/** Provide context for registering descendant components. This only needs to wrap `children`. */
 	function Provider(t0) {
-		const $ = c(14);
+		const $ = c(17);
 		const { children, setRegistry } = t0;
 		const workingRegistryRef = useRef("queued");
 		const [key, rebuildRegistry] = useReducer(_temp, 0);
+		const pendingRebuildRef = useRef(false);
+		const isMountedRef = useRef(true);
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = function instantiateNewRegistry() {
-				if (workingRegistryRef.current === "queued") workingRegistryRef.current = /* @__PURE__ */ new Map();
+			t1 = () => {
+				if (pendingRebuildRef.current) return;
+				pendingRebuildRef.current = true;
+				scheduleMicrotask(() => {
+					pendingRebuildRef.current = false;
+					if (isMountedRef.current) rebuildRegistry();
+				});
 			};
 			$[0] = t1;
 		} else t1 = $[0];
-		useIsomorphicLayoutEffect(t1);
+		const scheduleRebuild = t1;
 		let t2;
-		if ($[1] !== setRegistry) {
-			t2 = (id) => {
+		let t3;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = () => {
+				isMountedRef.current = true;
+				return () => {
+					isMountedRef.current = false;
+				};
+			};
+			t3 = [];
+			$[1] = t2;
+			$[2] = t3;
+		} else {
+			t2 = $[1];
+			t3 = $[2];
+		}
+		useEffect(t2, t3);
+		let t4;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = function instantiateNewRegistry() {
+				if (workingRegistryRef.current === "queued") workingRegistryRef.current = /* @__PURE__ */ new Map();
+			};
+			$[3] = t4;
+		} else t4 = $[3];
+		useIsomorphicLayoutEffect(t4);
+		let t5;
+		if ($[4] !== setRegistry) {
+			t5 = (id) => {
 				if (workingRegistryRef.current instanceof Map) workingRegistryRef.current.set(id, unsetValue);
 				else if (workingRegistryRef.current === "idle") {
 					workingRegistryRef.current = "queued";
-					rebuildRegistry();
+					scheduleRebuild();
 				}
 				return function unregister() {
 					if (workingRegistryRef.current instanceof Map) workingRegistryRef.current.delete(id);
@@ -118,57 +150,57 @@ function createDescendantRegistry() {
 					});
 				};
 			};
-			$[1] = setRegistry;
-			$[2] = t2;
-		} else t2 = $[2];
-		const register = t2;
-		let t3;
-		if ($[3] !== setRegistry) {
-			t3 = (id_0, value) => {
+			$[4] = setRegistry;
+			$[5] = t5;
+		} else t5 = $[5];
+		const register = t5;
+		let t6;
+		if ($[6] !== setRegistry) {
+			t6 = (id_0, value) => {
 				if (workingRegistryRef.current instanceof Map) workingRegistryRef.current.set(id_0, value);
 				else if (workingRegistryRef.current === "idle") setRegistry((prev_1) => new Map(prev_1).set(id_0, value));
 			};
-			$[3] = setRegistry;
-			$[4] = t3;
-		} else t3 = $[4];
-		const updateValue = t3;
-		let t4;
-		if ($[5] !== setRegistry) {
-			t4 = function commitWorkingRegistry() {
+			$[6] = setRegistry;
+			$[7] = t6;
+		} else t6 = $[7];
+		const updateValue = t6;
+		let t7;
+		if ($[8] !== setRegistry) {
+			t7 = function commitWorkingRegistry() {
 				if (workingRegistryRef.current instanceof Map) {
 					const setEntries = Array.from(workingRegistryRef.current.entries()).filter(_temp2);
 					setRegistry(new Map(setEntries));
 					workingRegistryRef.current = "idle";
 				}
 			};
-			$[5] = setRegistry;
-			$[6] = t4;
-		} else t4 = $[6];
-		useEffect(t4);
-		let t5;
-		if ($[7] !== key || $[8] !== register || $[9] !== updateValue) {
-			t5 = {
+			$[8] = setRegistry;
+			$[9] = t7;
+		} else t7 = $[9];
+		useEffect(t7);
+		let t8;
+		if ($[10] !== key || $[11] !== register || $[12] !== updateValue) {
+			t8 = {
 				register,
 				updateValue,
 				key
 			};
-			$[7] = key;
-			$[8] = register;
-			$[9] = updateValue;
-			$[10] = t5;
-		} else t5 = $[10];
-		const contextValue = t5;
-		let t6;
-		if ($[11] !== children || $[12] !== contextValue) {
-			t6 = /*#__PURE__*/ jsx(Context.Provider, {
+			$[10] = key;
+			$[11] = register;
+			$[12] = updateValue;
+			$[13] = t8;
+		} else t8 = $[13];
+		const contextValue = t8;
+		let t9;
+		if ($[14] !== children || $[15] !== contextValue) {
+			t9 = /*#__PURE__*/ jsx(Context.Provider, {
 				value: contextValue,
 				children
 			});
-			$[11] = children;
-			$[12] = contextValue;
-			$[13] = t6;
-		} else t6 = $[13];
-		return t6;
+			$[14] = children;
+			$[15] = contextValue;
+			$[16] = t9;
+		} else t9 = $[16];
+		return t9;
 	}
 	function _temp2(entry) {
 		return entry[1] !== unsetValue;
@@ -182,5 +214,10 @@ function createDescendantRegistry() {
 		useRegisterDescendant
 	};
 }
+/** Schedule a callback on a microtask, with a fallback for environments that lack `queueMicrotask`. */
+function scheduleMicrotask(callback) {
+	if (typeof queueMicrotask === "function") queueMicrotask(callback);
+	else setTimeout(callback);
+}
 //#endregion
 export { createDescendantRegistry };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.31.0",
+  "version": "38.31.1-rc.52bfd2504",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",