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

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-rc.f96563b64",
+  "version": "38.31.1-rc.43134a516",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",