@primer/react 38.32.0-rc.7fd08e0cc → 38.32.0-rc.94f147e58

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -6,7 +6,6 @@ import { isSlot } from "../../utils/is-slot.js";
 import { createComponent } from "../../utils/create-component.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
-import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
@@ -22,7 +21,7 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs_0, tabPanels_0, tabsHaveIcons_0] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
@@ -32,10 +31,10 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 		});
 		const tabs = [];
 		const tabPanels = [];
-		for (const child_0 of Children.toArray(childrenWithProps)) {
-			if (!/*#__PURE__*/ isValidElement(child_0)) continue;
-			if (child_0.type === Tab || isSlot(child_0, Tab)) tabs.push(child_0);
-			else if (child_0.type === Panel || isSlot(child_0, Panel)) tabPanels.push(child_0);
+		for (const child of Children.toArray(childrenWithProps)) {
+			if (!/*#__PURE__*/ isValidElement(child)) continue;
+			if (child.type === Tab || isSlot(child, Tab)) tabs.push(child);
+			else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
 		}
 		return [
 			tabs,
@@ -53,20 +52,20 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	}, [iconsVisible]);
 	const listWidthRef = useRef(0);
 	useResizeObserver((entries) => {
-		if (!tabsHaveIcons_0) return;
+		if (!tabsHaveIcons) return;
 		if (!iconsVisibleRef.current) return;
 		listWidthRef.current = entries[0].contentRect.width;
 	}, listRef, []);
 	useResizeObserver((resizeObserverEntries) => {
-		if (!tabsHaveIcons_0) return;
+		if (!tabsHaveIcons) return;
 		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
 		setIconsVisible(wrapperWidth > listWidthRef.current);
 	}, wrapperRef, []);
-	!(tabs_0.filter((tab_0) => {
-		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab_0) && tab_0.props["aria-selected"];
+	!(tabs.filter((tab) => {
+		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
 		return ariaSelected === true || ariaSelected === "true";
 	}).length <= 1) && invariant(false, "Only one tab can be selected at a time.");
-	!(tabs_0.length === tabPanels_0.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs_0.length} tabs and ${tabPanels_0.length} panels.`);
+	!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
 		children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
@@ -80,100 +79,44 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy,
 				role: "tablist",
-				children: tabs_0
+				children: tabs
 			})
-		}), tabPanels_0] })
+		}), tabPanels] })
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = (t0) => {
-	const $ = c(15);
-	let ariaSelected;
-	let onSelect;
-	let props;
-	if ($[0] !== t0) {
-		({"aria-selected": ariaSelected, onSelect, ...props} = t0);
-		$[0] = t0;
-		$[1] = ariaSelected;
-		$[2] = onSelect;
-		$[3] = props;
-	} else {
-		ariaSelected = $[1];
-		onSelect = $[2];
-		props = $[3];
-	}
+const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	let t1;
-	if ($[4] !== onSelect) {
-		t1 = (event) => {
-			if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		};
-		$[4] = onSelect;
-		$[5] = t1;
-	} else t1 = $[5];
-	const clickHandler = t1;
-	let t2;
-	if ($[6] !== onSelect) {
-		t2 = (event_0) => {
-			if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
-		};
-		$[6] = onSelect;
-		$[7] = t2;
-	} else t2 = $[7];
-	const keyDownHandler = t2;
-	const t3 = ariaSelected ? 0 : -1;
-	let t4;
-	if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== loadingCounters || $[12] !== props || $[13] !== t3) {
-		t4 = /*#__PURE__*/ jsx(UnderlineItem, {
-			as: "button",
-			role: "tab",
-			tabIndex: t3,
-			"aria-selected": ariaSelected,
-			type: "button",
-			onClick: clickHandler,
-			onKeyDown: keyDownHandler,
-			loadingCounters,
-			...props
-		});
-		$[8] = ariaSelected;
-		$[9] = clickHandler;
-		$[10] = keyDownHandler;
-		$[11] = loadingCounters;
-		$[12] = props;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+	const clickHandler = React.useCallback((event) => {
+		if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+	}, [onSelect]);
+	const keyDownHandler = React.useCallback((event) => {
+		if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+	}, [onSelect]);
+	return /*#__PURE__*/ jsx(UnderlineItem, {
+		as: "button",
+		role: "tab",
+		tabIndex: ariaSelected ? 0 : -1,
+		"aria-selected": ariaSelected,
+		type: "button",
+		onClick: clickHandler,
+		onKeyDown: keyDownHandler,
+		loadingCounters,
+		...props
+	});
 };
+TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const Panel = (t0) => {
-	const $ = c(6);
-	let children;
-	let rest;
-	if ($[0] !== t0) {
-		({children, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = rest;
-	} else {
-		children = $[1];
-		rest = $[2];
-	}
-	let t1;
-	if ($[3] !== children || $[4] !== rest) {
-		t1 = /*#__PURE__*/ jsx("div", {
-			role: "tabpanel",
-			...rest,
-			children
-		});
-		$[3] = children;
-		$[4] = rest;
-		$[5] = t1;
-	} else t1 = $[5];
-	return t1;
+const Panel = ({ children, ...rest }) => {
+	return /*#__PURE__*/ jsx("div", {
+		role: "tabpanel",
+		...rest,
+		children
+	});
 };
+Panel.displayName = "Panel";
 Panel.displayName = "UnderlinePanels.Panel";
 var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 	Panel,

package/dist/hooks/useControllableState.js

@@ -21,9 +21,9 @@ function useControllableState({ name = "custom", defaultValue, value, onChange }
 	if (controlled.current === null) controlled.current = value !== void 0;
 	const setState = React.useCallback((stateOrUpdater) => {
 		var _stableOnChange$curre;
-		const value_0 = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
-		if (controlled.current === false) internalSetState(value_0);
-		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value_0);
+		const value = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
+		if (controlled.current === false) internalSetState(value);
+		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value);
 	}, [state]);
 	React.useEffect(() => {
 		const controlledValue = value !== void 0;

package/dist/hooks/useMedia.js

@@ -1,8 +1,7 @@
-import { canUseDOM } from "../utils/environment.js";
 import { warning } from "../utils/warning.js";
 import { MatchMediaContext } from "./MatchMediaContext.js";
 import { c } from "react-compiler-runtime";
-import React, { useContext, useEffect } from "react";
+import { useContext, useSyncExternalStore } from "react";
 //#region src/hooks/useMedia.ts
 /**
 * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
@@ -18,52 +17,54 @@ import React, { useContext, useEffect } from "react";
 * }
 */
 function useMedia(mediaQueryString, defaultState) {
-	const $ = c(8);
-	const features = useContext(MatchMediaContext);
+	const $ = c(9);
+	const contextValue = useContext(MatchMediaContext)[mediaQueryString];
 	let t0;
-	if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
-		t0 = () => {
-			if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
-			if (defaultState !== void 0) return defaultState;
-			if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
-			warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
-			return false;
-		};
-		$[0] = defaultState;
-		$[1] = features;
-		$[2] = mediaQueryString;
-		$[3] = t0;
-	} else t0 = $[3];
-	const [matches, setMatches] = React.useState(t0);
-	if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
-	let t1;
-	let t2;
-	if ($[4] !== features || $[5] !== mediaQueryString) {
-		t1 = () => {
-			if (features[mediaQueryString] !== void 0) return;
-			const listener = function listener(event) {
-				setMatches(event.matches);
-			};
+	if ($[0] !== contextValue || $[1] !== mediaQueryString) {
+		t0 = (onStoreChange) => {
+			if (contextValue !== void 0) return _temp;
 			const mediaQueryList = window.matchMedia(mediaQueryString);
-			if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", listener);
-			else mediaQueryList.addListener(listener);
-			setMatches(mediaQueryList.matches);
+			if (mediaQueryList.addEventListener) {
+				mediaQueryList.addEventListener("change", onStoreChange);
+				return () => {
+					mediaQueryList.removeEventListener("change", onStoreChange);
+				};
+			}
+			mediaQueryList.addListener(onStoreChange);
 			return () => {
-				if (mediaQueryList.addEventListener) mediaQueryList.removeEventListener("change", listener);
-				else mediaQueryList.removeListener(listener);
+				mediaQueryList.removeListener(onStoreChange);
 			};
 		};
-		t2 = [features, mediaQueryString];
-		$[4] = features;
-		$[5] = mediaQueryString;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t1 = $[6];
-		t2 = $[7];
-	}
-	useEffect(t1, t2);
-	return matches;
+		$[0] = contextValue;
+		$[1] = mediaQueryString;
+		$[2] = t0;
+	} else t0 = $[2];
+	const subscribe = t0;
+	let t1;
+	if ($[3] !== contextValue || $[4] !== mediaQueryString) {
+		t1 = () => {
+			if (contextValue !== void 0) return contextValue;
+			return window.matchMedia(mediaQueryString).matches;
+		};
+		$[3] = contextValue;
+		$[4] = mediaQueryString;
+		$[5] = t1;
+	} else t1 = $[5];
+	const getSnapshot = t1;
+	let t2;
+	if ($[6] !== contextValue || $[7] !== defaultState) {
+		t2 = () => {
+			if (contextValue !== void 0) return contextValue;
+			if (defaultState !== void 0) return defaultState;
+			warning(typeof window === "undefined", "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
+			return false;
+		};
+		$[6] = contextValue;
+		$[7] = defaultState;
+		$[8] = t2;
+	} else t2 = $[8];
+	return useSyncExternalStore(subscribe, getSnapshot, t2);
 }
+function _temp() {}
 //#endregion
 export { useMedia };

package/dist/internal/components/ValidationAnimationContainer.js

@@ -1,40 +1,44 @@
 import ValidationAnimationContainer_module_css_default from "./ValidationAnimationContainer.module.css.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 //#region src/internal/components/ValidationAnimationContainer.tsx
 const ValidationAnimationContainer = (t0) => {
-	const $ = c(10);
-	const { show, children } = t0;
-	const [shouldRender, setRender] = useState(show);
-	let t1;
-	let t2;
-	if ($[0] !== show) {
-		t1 = () => {
-			if (show) setRender(true);
-		};
-		t2 = [show];
-		$[0] = show;
-		$[1] = t1;
-		$[2] = t2;
+	const $ = c(14);
+	let children;
+	let rest;
+	let show;
+	let style;
+	if ($[0] !== t0) {
+		({show, children, style, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+		$[3] = show;
+		$[4] = style;
 	} else {
-		t1 = $[1];
-		t2 = $[2];
+		children = $[1];
+		rest = $[2];
+		show = $[3];
+		style = $[4];
 	}
-	useEffect(t1, t2);
-	let t3;
-	if ($[3] !== show) {
-		t3 = () => {
+	const [shouldRender, setRender] = useState(Boolean(show));
+	if (show && !shouldRender) setRender(true);
+	let t1;
+	if ($[5] !== show) {
+		t1 = () => {
 			if (!show) setRender(false);
 		};
-		$[3] = show;
-		$[4] = t3;
-	} else t3 = $[4];
-	const onAnimationEnd = t3;
-	let t4;
-	if ($[5] !== children || $[6] !== onAnimationEnd || $[7] !== shouldRender || $[8] !== show) {
-		t4 = shouldRender ? /*#__PURE__*/ jsx("div", {
+		$[5] = show;
+		$[6] = t1;
+	} else t1 = $[6];
+	const onAnimationEnd = t1;
+	let t2;
+	if ($[7] !== children || $[8] !== onAnimationEnd || $[9] !== rest || $[10] !== shouldRender || $[11] !== show || $[12] !== style) {
+		t2 = shouldRender ? /*#__PURE__*/ jsx("div", {
+			...rest,
 			style: {
+				...style,
 				height: show ? "auto" : 0,
 				overflow: "hidden"
 			},
@@ -45,13 +49,15 @@ const ValidationAnimationContainer = (t0) => {
 				children
 			})
 		}) : null;
-		$[5] = children;
-		$[6] = onAnimationEnd;
-		$[7] = shouldRender;
-		$[8] = show;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+		$[7] = children;
+		$[8] = onAnimationEnd;
+		$[9] = rest;
+		$[10] = shouldRender;
+		$[11] = show;
+		$[12] = style;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
 };
 //#endregion
 export { ValidationAnimationContainer as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.0-rc.7fd08e0cc",
+  "version": "38.32.0-rc.94f147e58",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,6 +47,7 @@
     "build:hooks.json": "tsx script/hooks-json/build.ts",
     "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "lint:npm": "publint --types",
+    "lint:react-compiler": "node script/lint-react-compiler.ts",
     "storybook": "storybook",
     "type-check": "tsc --noEmit",
     "type-css-modules": "tcm -p src/**/*.module.css"
@@ -108,6 +109,7 @@
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
+    "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",