@primer/react 38.43.0-rc.9f4d27bc2 → 38.43.0-rc.d8a41c875

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 
 - [#8545](https://github.com/primer/react/pull/8545) [`c29b6fe`](https://github.com/primer/react/commit/c29b6fec94c8b18b4f59f7935740ab7b94598ecc) Thanks [@tay1orjones](https://github.com/tay1orjones)! - TextInput and Textarea: Deprecate the `contrast` prop. Omit it to use the default background.
 
+- [#8558](https://github.com/primer/react/pull/8558) [`6f52273`](https://github.com/primer/react/commit/6f522732b1370954fd1de47b806864c6a46886c5) Thanks [@joshblack](https://github.com/joshblack)! - useControllableState, useOnOutsideClick: Support automatic memoization with React Compiler.
+
+- [#8555](https://github.com/primer/react/pull/8555) [`746d76a`](https://github.com/primer/react/commit/746d76ae7a21ba675ebb4282dd5771c351aeb8f3) Thanks [@joshblack](https://github.com/joshblack)! - useSafeTimeout: Support automatic memoization with React Compiler.
+
+- [#8555](https://github.com/primer/react/pull/8555) [`746d76a`](https://github.com/primer/react/commit/746d76ae7a21ba675ebb4282dd5771c351aeb8f3) Thanks [@joshblack](https://github.com/joshblack)! - Token, IssueLabelToken: Improve rendering performance with React Compiler support.
+
+- [#8555](https://github.com/primer/react/pull/8555) [`746d76a`](https://github.com/primer/react/commit/746d76ae7a21ba675ebb4282dd5771c351aeb8f3) Thanks [@joshblack](https://github.com/joshblack)! - UnderlinePanels: Improve rendering performance with React Compiler support.
+
 ### Patch Changes
 
 - [#8545](https://github.com/primer/react/pull/8545) [`c29b6fe`](https://github.com/primer/react/commit/c29b6fec94c8b18b4f59f7935740ab7b94598ecc) Thanks [@tay1orjones](https://github.com/tay1orjones)! - SelectPanel: Use the default filter input background. Enable `primer_react_select_panel_legacy_contrast` to restore the previous appearance.

package/dist/Token/_RemoveTokenButton.js

@@ -1,29 +1,124 @@
+import { c } from "../utils/react-compiler-runtime.js";
 import { defaultTokenSize } from "./constants.js";
 import _RemoveTokenButton_module_css_default from "./_RemoveTokenButton.module.css.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { XIcon } from "@primer/octicons-react";
 //#region src/Token/_RemoveTokenButton.tsx
-const RemoveTokenButton = ({ "aria-label": ariaLabel, isParentInteractive, size = defaultTokenSize, className, borderOffset = 0, as: _as, children: _children, ...rest }) => {
-	if (isParentInteractive) return /* @__PURE__ */ jsx("span", {
-		...rest,
-		tabIndex: -1,
-		"aria-label": ariaLabel,
-		"data-size": size,
-		className: clsx(_RemoveTokenButton_module_css_default.TokenButton, className),
-		style: { transform: `translate(${borderOffset}px, -${borderOffset}px)` },
-		children: /* @__PURE__ */ jsx(XIcon, { size: size === "small" || size === "medium" ? 12 : 16 })
-	});
-	return /* @__PURE__ */ jsx("button", {
-		...rest,
-		"aria-label": "Remove token",
-		"data-size": size,
-		className: clsx(_RemoveTokenButton_module_css_default.TokenButton, className),
-		style: { transform: `translate(${borderOffset}px, -${borderOffset}px)` },
-		ref: rest.ref,
-		type: "button",
-		children: /* @__PURE__ */ jsx(XIcon, { size: size === "small" || size === "medium" ? 12 : 16 })
-	});
+const RemoveTokenButton = (t0) => {
+	const $ = c(32);
+	let ariaLabel;
+	let className;
+	let isParentInteractive;
+	let rest;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { "aria-label": t3, isParentInteractive: t4, size: t5, className: t6, borderOffset: t7, as: _as, children: _children, ...t8 } = t0;
+		ariaLabel = t3;
+		isParentInteractive = t4;
+		t1 = t5;
+		className = t6;
+		t2 = t7;
+		rest = t8;
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = className;
+		$[3] = isParentInteractive;
+		$[4] = rest;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		ariaLabel = $[1];
+		className = $[2];
+		isParentInteractive = $[3];
+		rest = $[4];
+		t1 = $[5];
+		t2 = $[6];
+	}
+	const size = t1 === void 0 ? defaultTokenSize : t1;
+	const borderOffset = t2 === void 0 ? 0 : t2;
+	if (isParentInteractive) {
+		let t3;
+		if ($[7] !== className) {
+			t3 = clsx(_RemoveTokenButton_module_css_default.TokenButton, className);
+			$[7] = className;
+			$[8] = t3;
+		} else t3 = $[8];
+		const t4 = `translate(${borderOffset}px, -${borderOffset}px)`;
+		let t5;
+		if ($[9] !== t4) {
+			t5 = { transform: t4 };
+			$[9] = t4;
+			$[10] = t5;
+		} else t5 = $[10];
+		const t6 = size === "small" || size === "medium" ? 12 : 16;
+		let t7;
+		if ($[11] !== t6) {
+			t7 = /* @__PURE__ */ jsx(XIcon, { size: t6 });
+			$[11] = t6;
+			$[12] = t7;
+		} else t7 = $[12];
+		let t8;
+		if ($[13] !== ariaLabel || $[14] !== rest || $[15] !== size || $[16] !== t3 || $[17] !== t5 || $[18] !== t7) {
+			t8 = /* @__PURE__ */ jsx("span", {
+				...rest,
+				tabIndex: -1,
+				"aria-label": ariaLabel,
+				"data-size": size,
+				className: t3,
+				style: t5,
+				children: t7
+			});
+			$[13] = ariaLabel;
+			$[14] = rest;
+			$[15] = size;
+			$[16] = t3;
+			$[17] = t5;
+			$[18] = t7;
+			$[19] = t8;
+		} else t8 = $[19];
+		return t8;
+	}
+	let t3;
+	if ($[20] !== className) {
+		t3 = clsx(_RemoveTokenButton_module_css_default.TokenButton, className);
+		$[20] = className;
+		$[21] = t3;
+	} else t3 = $[21];
+	const t4 = `translate(${borderOffset}px, -${borderOffset}px)`;
+	let t5;
+	if ($[22] !== t4) {
+		t5 = { transform: t4 };
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	const t6 = size === "small" || size === "medium" ? 12 : 16;
+	let t7;
+	if ($[24] !== t6) {
+		t7 = /* @__PURE__ */ jsx(XIcon, { size: t6 });
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] !== rest || $[27] !== size || $[28] !== t3 || $[29] !== t5 || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsx("button", {
+			...rest,
+			"aria-label": "Remove token",
+			"data-size": size,
+			className: t3,
+			style: t5,
+			type: "button",
+			children: t7
+		});
+		$[26] = rest;
+		$[27] = size;
+		$[28] = t3;
+		$[29] = t5;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	return t8;
 };
 //#endregion
 export { RemoveTokenButton as default };

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -1,3 +1,4 @@
+import { c } from "../../utils/react-compiler-runtime.js";
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
@@ -10,7 +11,7 @@ import { useTab } from "../Tabs/useTab.js";
 import { useTabList } from "../Tabs/useTabList.js";
 import { useTabPanel } from "../Tabs/useTabPanel.js";
 import { Tabs } from "../Tabs/Tabs.js";
-import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
+import React, { Children, cloneElement, createContext, isValidElement, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -18,172 +19,460 @@ const UnderlinePanelsContext = /*#__PURE__*/ createContext({
 	iconsVisible: true,
 	loadingCounters: void 0
 });
-const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, loadingCounters, className, value: controlledValue, defaultValue, onChange, activationMode = "automatic", ...props }) => {
-	var _tabValues$;
+const UnderlinePanels = (t0) => {
+	const $ = c(75);
+	let ariaLabel;
+	let ariaLabelledBy;
+	let children;
+	let className;
+	let controlledValue;
+	let defaultValue;
+	let loadingCounters;
+	let onChange;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, loadingCounters, className, value: controlledValue, defaultValue, onChange, activationMode: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = ariaLabelledBy;
+		$[3] = children;
+		$[4] = className;
+		$[5] = controlledValue;
+		$[6] = defaultValue;
+		$[7] = loadingCounters;
+		$[8] = onChange;
+		$[9] = props;
+		$[10] = t1;
+	} else {
+		ariaLabel = $[1];
+		ariaLabelledBy = $[2];
+		children = $[3];
+		className = $[4];
+		controlledValue = $[5];
+		defaultValue = $[6];
+		loadingCounters = $[7];
+		onChange = $[8];
+		props = $[9];
+		t1 = $[10];
+	}
+	const activationMode = t1 === void 0 ? "automatic" : t1;
 	const [iconsVisible, setIconsVisible] = useState(true);
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps, tabValues, panelValues] = useMemo(() => {
-		let tabIndex = 0;
-		let panelIndex = 0;
+	let panelValues;
+	let selectedFromProps;
+	let t2;
+	let tabPanels;
+	let tabValues;
+	let tabs;
+	if ($[11] !== children) {
+		const indices = {
+			tab: 0,
+			panel: 0
+		};
 		const childrenWithProps = Children.map(children, (child) => {
 			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) {
 				var _child$props$value;
-				const value = (_child$props$value = child.props.value) !== null && _child$props$value !== void 0 ? _child$props$value : `${tabIndex}`;
-				tabIndex++;
+				const value = (_child$props$value = child.props.value) !== null && _child$props$value !== void 0 ? _child$props$value : `${indices.tab}`;
+				indices.tab = indices.tab + 1;
 				return /*#__PURE__*/ cloneElement(child, { value });
 			}
 			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) {
 				var _child$props$value2;
-				const value = (_child$props$value2 = child.props.value) !== null && _child$props$value2 !== void 0 ? _child$props$value2 : `${panelIndex}`;
-				panelIndex++;
-				return /*#__PURE__*/ cloneElement(child, { value });
+				const value_0 = (_child$props$value2 = child.props.value) !== null && _child$props$value2 !== void 0 ? _child$props$value2 : `${indices.panel}`;
+				indices.panel = indices.panel + 1;
+				return /*#__PURE__*/ cloneElement(child, { value: value_0 });
 			}
 			return child;
 		});
-		const tabs = [];
-		const tabPanels = [];
-		const tabValues = [];
-		const panelValues = [];
-		let selectedFromProps;
-		for (const child of Children.toArray(childrenWithProps)) {
-			if (!/*#__PURE__*/ isValidElement(child)) continue;
-			if (child.type === Tab || isSlot(child, Tab)) {
-				const value = child.props.value;
-				if (value !== void 0) tabValues.push(value);
-				const ariaSelected = child.props["aria-selected"];
-				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = value;
-				tabs.push(child);
-			} else if (child.type === Panel || isSlot(child, Panel)) {
-				const value = child.props.value;
-				if (value !== void 0) panelValues.push(value);
-				tabPanels.push(child);
+		tabs = [];
+		tabPanels = [];
+		tabValues = [];
+		panelValues = [];
+		for (const child_0 of Children.toArray(childrenWithProps)) {
+			if (!/*#__PURE__*/ isValidElement(child_0)) continue;
+			if (child_0.type === Tab || isSlot(child_0, Tab)) {
+				const value_1 = child_0.props.value;
+				if (value_1 !== void 0) tabValues.push(value_1);
+				const ariaSelected = child_0.props["aria-selected"];
+				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = value_1;
+				tabs.push(child_0);
+			} else if (child_0.type === Panel || isSlot(child_0, Panel)) {
+				const value_2 = child_0.props.value;
+				if (value_2 !== void 0) panelValues.push(value_2);
+				tabPanels.push(child_0);
 			}
 		}
-		return [
+		t2 = tabs.some(_temp);
+		$[11] = children;
+		$[12] = panelValues;
+		$[13] = selectedFromProps;
+		$[14] = t2;
+		$[15] = tabPanels;
+		$[16] = tabValues;
+		$[17] = tabs;
+	} else {
+		panelValues = $[12];
+		selectedFromProps = $[13];
+		t2 = $[14];
+		tabPanels = $[15];
+		tabValues = $[16];
+		tabs = $[17];
+	}
+	const tabsHaveIcons = t2;
+	let t3;
+	if ($[18] !== panelValues || $[19] !== selectedFromProps || $[20] !== tabPanels || $[21] !== tabValues || $[22] !== tabs || $[23] !== tabsHaveIcons) {
+		t3 = [
 			tabs,
 			tabPanels,
-			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon),
+			tabsHaveIcons,
 			selectedFromProps,
 			tabValues,
 			panelValues
 		];
-	}, [children]);
+		$[18] = panelValues;
+		$[19] = selectedFromProps;
+		$[20] = tabPanels;
+		$[21] = tabValues;
+		$[22] = tabs;
+		$[23] = tabsHaveIcons;
+		$[24] = t3;
+	} else t3 = $[24];
+	const [tabs_0, tabPanels_0, tabsHaveIcons_0, selectedFromProps_0, tabValues_0, panelValues_0] = t3;
 	const isControlled = controlledValue !== void 0;
-	const [uncontrolledValue, setUncontrolledValue] = useState(() => {
-		var _ref;
-		return (_ref = defaultValue !== null && defaultValue !== void 0 ? defaultValue : selectedFromProps) !== null && _ref !== void 0 ? _ref : "0";
-	});
-	const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps);
-	if (!isControlled && selectedFromProps !== prevSelectedFromProps) {
-		setPrevSelectedFromProps(selectedFromProps);
-		if (selectedFromProps !== void 0 && selectedFromProps !== uncontrolledValue) setUncontrolledValue(selectedFromProps);
+	let t4;
+	if ($[25] !== defaultValue || $[26] !== selectedFromProps_0) {
+		t4 = () => {
+			var _ref;
+			return (_ref = defaultValue !== null && defaultValue !== void 0 ? defaultValue : selectedFromProps_0) !== null && _ref !== void 0 ? _ref : "0";
+		};
+		$[25] = defaultValue;
+		$[26] = selectedFromProps_0;
+		$[27] = t4;
+	} else t4 = $[27];
+	const [uncontrolledValue, setUncontrolledValue] = useState(t4);
+	const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps_0);
+	if (!isControlled && selectedFromProps_0 !== prevSelectedFromProps) {
+		setPrevSelectedFromProps(selectedFromProps_0);
+		if (selectedFromProps_0 !== void 0 && selectedFromProps_0 !== uncontrolledValue) setUncontrolledValue(selectedFromProps_0);
 	}
 	const selectedValue = isControlled ? controlledValue : uncontrolledValue;
-	const effectiveValue = tabValues.includes(selectedValue) ? selectedValue : (_tabValues$ = tabValues[0]) !== null && _tabValues$ !== void 0 ? _tabValues$ : selectedValue;
-	const handleValueChange = (value) => {
-		if (!isControlled) setUncontrolledValue(value);
-		onChange === null || onChange === void 0 || onChange({ value });
-	};
-	const { tabListProps } = useTabList({
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		ref: listRef
-	});
-	const contextValue = useMemo(() => ({
-		iconsVisible,
-		loadingCounters
-	}), [iconsVisible, loadingCounters]);
+	let t5;
+	if ($[28] !== selectedValue || $[29] !== tabValues_0) {
+		var _tabValues_0$;
+		t5 = tabValues_0.includes(selectedValue) ? selectedValue : (_tabValues_0$ = tabValues_0[0]) !== null && _tabValues_0$ !== void 0 ? _tabValues_0$ : selectedValue;
+		$[28] = selectedValue;
+		$[29] = tabValues_0;
+		$[30] = t5;
+	} else t5 = $[30];
+	const effectiveValue = t5;
+	let t6;
+	if ($[31] !== isControlled || $[32] !== onChange) {
+		t6 = (value_3) => {
+			var _onChange;
+			if (!isControlled) setUncontrolledValue(value_3);
+			(_onChange = onChange) === null || _onChange === void 0 || _onChange({ value: value_3 });
+		};
+		$[31] = isControlled;
+		$[32] = onChange;
+		$[33] = t6;
+	} else t6 = $[33];
+	const handleValueChange = t6;
+	let t7;
+	if ($[34] !== ariaLabel || $[35] !== ariaLabelledBy) {
+		t7 = {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			ref: listRef
+		};
+		$[34] = ariaLabel;
+		$[35] = ariaLabelledBy;
+		$[36] = t7;
+	} else t7 = $[36];
+	const { tabListProps } = useTabList(t7);
+	let t8;
+	if ($[37] !== iconsVisible || $[38] !== loadingCounters) {
+		t8 = {
+			iconsVisible,
+			loadingCounters
+		};
+		$[37] = iconsVisible;
+		$[38] = loadingCounters;
+		$[39] = t8;
+	} else t8 = $[39];
+	const contextValue = t8;
 	const iconsVisibleRef = useRef(iconsVisible);
-	useIsomorphicLayoutEffect(() => {
-		iconsVisibleRef.current = iconsVisible;
-	}, [iconsVisible]);
+	let t10;
+	let t9;
+	if ($[40] !== iconsVisible) {
+		t9 = () => {
+			iconsVisibleRef.current = iconsVisible;
+		};
+		t10 = [iconsVisible];
+		$[40] = iconsVisible;
+		$[41] = t10;
+		$[42] = t9;
+	} else {
+		t10 = $[41];
+		t9 = $[42];
+	}
+	useIsomorphicLayoutEffect(t9, t10);
 	const listWidthRef = useRef(0);
-	useResizeObserver((entries) => {
-		if (!tabsHaveIcons) return;
-		if (!iconsVisibleRef.current) return;
-		listWidthRef.current = entries[0].contentRect.width;
-	}, listRef, []);
-	useResizeObserver((resizeObserverEntries) => {
-		if (!tabsHaveIcons) return;
-		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
-		setIconsVisible(wrapperWidth > listWidthRef.current);
-	}, wrapperRef, []);
+	let t11;
+	if ($[43] !== tabsHaveIcons_0) {
+		t11 = (entries) => {
+			if (!tabsHaveIcons_0) return;
+			if (!iconsVisibleRef.current) return;
+			listWidthRef.current = entries[0].contentRect.width;
+		};
+		$[43] = tabsHaveIcons_0;
+		$[44] = t11;
+	} else t11 = $[44];
+	let t12;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = [];
+		$[45] = t12;
+	} else t12 = $[45];
+	useResizeObserver(t11, listRef, t12);
+	let t13;
+	if ($[46] !== tabsHaveIcons_0) {
+		t13 = (resizeObserverEntries) => {
+			if (!tabsHaveIcons_0) return;
+			const wrapperWidth = resizeObserverEntries[0].contentRect.width;
+			setIconsVisible(wrapperWidth > listWidthRef.current);
+		};
+		$[46] = tabsHaveIcons_0;
+		$[47] = t13;
+	} else t13 = $[47];
+	let t14;
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = [];
+		$[48] = t14;
+	} else t14 = $[48];
+	useResizeObserver(t13, wrapperRef, t14);
 	{
-		const selectedTabs = tabs.filter((tab) => {
-			const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
-			return ariaSelected === true || ariaSelected === "true";
-		});
+		const selectedTabs = tabs_0.filter(_temp2);
 		!(selectedTabs.length <= 1) && invariant(false, "Only one tab can be selected at a time.");
-		tabs.length !== tabPanels.length && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
-		const duplicateTabValue = tabValues.find((value, index) => tabValues.indexOf(value) !== index);
+		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.`);
+		const duplicateTabValue = tabValues_0.find((value_4, index) => tabValues_0.indexOf(value_4) !== index);
 		duplicateTabValue !== void 0 && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
-		const duplicatePanelValue = panelValues.find((value, index) => panelValues.indexOf(value) !== index);
+		const duplicatePanelValue = panelValues_0.find((value_5, index_0) => panelValues_0.indexOf(value_5) !== index_0);
 		duplicatePanelValue !== void 0 && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
-		const unmatchedTabValue = tabValues.find((value) => !panelValues.includes(value));
+		const unmatchedTabValue = tabValues_0.find((value_6) => !panelValues_0.includes(value_6));
 		unmatchedTabValue !== void 0 && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
 		warning(isControlled && selectedTabs.length > 0, "UnderlinePanels: do not combine the controlled `value` prop with `aria-selected` on a tab. `value` takes precedence; use `value`/`onChange` (or `defaultValue`) to drive selection.");
 		warning(controlledValue !== void 0 && defaultValue !== void 0, "UnderlinePanels: do not combine the controlled `value` prop with `defaultValue`. `value` takes precedence; use one or the other.");
 		const providedValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue;
-		warning(providedValue !== void 0 && tabValues.length > 0 && !tabValues.includes(providedValue), `UnderlinePanels: the selected value "${providedValue}" does not match any tab, so the first tab is selected instead. Provide a \`value\`/\`defaultValue\` that matches a \`UnderlinePanels.Tab\` \`value\`.`);
+		warning(providedValue !== void 0 && tabValues_0.length > 0 && !tabValues_0.includes(providedValue), `UnderlinePanels: the selected value "${providedValue}" does not match any tab, so the first tab is selected instead. Provide a \`value\`/\`defaultValue\` that matches a \`UnderlinePanels.Tab\` \`value\`.`);
 	}
-	return /* @__PURE__ */ jsx(UnderlinePanelsContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsxs(Tabs, {
+	let t15;
+	if ($[49] !== handleValueChange) {
+		t15 = (t16) => {
+			const { value: value_7 } = t16;
+			return handleValueChange(value_7);
+		};
+		$[49] = handleValueChange;
+		$[50] = t15;
+	} else t15 = $[50];
+	let t16;
+	if ($[51] !== className) {
+		t16 = clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper);
+		$[51] = className;
+		$[52] = t16;
+	} else t16 = $[52];
+	const t17 = tabListProps["aria-label"];
+	const t18 = tabListProps["aria-labelledby"];
+	const t19 = tabListProps["aria-orientation"];
+	let t20;
+	if ($[53] !== t17 || $[54] !== t18 || $[55] !== t19 || $[56] !== tabListProps.onKeyDown || $[57] !== tabListProps.role || $[58] !== tabs_0) {
+		t20 = /* @__PURE__ */ jsx(UnderlineItemList, {
+			ref: listRef,
+			role: tabListProps.role,
+			"aria-label": t17,
+			"aria-labelledby": t18,
+			"aria-orientation": t19,
+			onKeyDown: tabListProps.onKeyDown,
+			children: tabs_0
+		});
+		$[53] = t17;
+		$[54] = t18;
+		$[55] = t19;
+		$[56] = tabListProps.onKeyDown;
+		$[57] = tabListProps.role;
+		$[58] = tabs_0;
+		$[59] = t20;
+	} else t20 = $[59];
+	let t21;
+	if ($[60] !== iconsVisible || $[61] !== props || $[62] !== t16 || $[63] !== t20) {
+		t21 = /* @__PURE__ */ jsx(UnderlineWrapper, {
+			ref: wrapperRef,
+			"data-icons-visible": iconsVisible,
+			className: t16,
+			...props,
+			children: t20
+		});
+		$[60] = iconsVisible;
+		$[61] = props;
+		$[62] = t16;
+		$[63] = t20;
+		$[64] = t21;
+	} else t21 = $[64];
+	let t22;
+	if ($[65] !== activationMode || $[66] !== effectiveValue || $[67] !== parentId || $[68] !== t15 || $[69] !== t21 || $[70] !== tabPanels_0) {
+		t22 = /* @__PURE__ */ jsxs(Tabs, {
 			id: parentId,
 			value: effectiveValue,
 			activationMode,
-			onValueChange: ({ value }) => handleValueChange(value),
-			children: [/* @__PURE__ */ jsx(UnderlineWrapper, {
-				ref: wrapperRef,
-				"data-icons-visible": iconsVisible,
-				className: clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper),
-				...props,
-				children: /* @__PURE__ */ jsx(UnderlineItemList, {
-					ref: listRef,
-					role: tabListProps.role,
-					"aria-label": tabListProps["aria-label"],
-					"aria-labelledby": tabListProps["aria-labelledby"],
-					"aria-orientation": tabListProps["aria-orientation"],
-					onKeyDown: tabListProps.onKeyDown,
-					children: tabs
-				})
-			}), tabPanels]
-		})
-	});
+			onValueChange: t15,
+			children: [t21, tabPanels_0]
+		});
+		$[65] = activationMode;
+		$[66] = effectiveValue;
+		$[67] = parentId;
+		$[68] = t15;
+		$[69] = t21;
+		$[70] = tabPanels_0;
+		$[71] = t22;
+	} else t22 = $[71];
+	let t23;
+	if ($[72] !== contextValue || $[73] !== t22) {
+		t23 = /* @__PURE__ */ jsx(UnderlinePanelsContext.Provider, {
+			value: contextValue,
+			children: t22
+		});
+		$[72] = contextValue;
+		$[73] = t22;
+		$[74] = t23;
+	} else t23 = $[74];
+	return t23;
 };
-const TabImpl = ({ onSelect, value, ...itemProps }) => {
+const TabImpl = (t0) => {
+	const $ = c(24);
+	let itemProps;
+	let onSelect;
+	let value;
+	if ($[0] !== t0) {
+		({onSelect, value, ...itemProps} = t0);
+		$[0] = t0;
+		$[1] = itemProps;
+		$[2] = onSelect;
+		$[3] = value;
+	} else {
+		itemProps = $[1];
+		onSelect = $[2];
+		value = $[3];
+	}
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	const { tabProps } = useTab({ value: value !== null && value !== void 0 ? value : "" });
-	const { onKeyDown: tabOnKeyDown, onMouseDown: tabOnMouseDown, onFocus: tabOnFocus, ...restTabProps } = tabProps;
-	return /* @__PURE__ */ jsx(UnderlineItem, {
-		as: "button",
-		...itemProps,
-		...restTabProps,
-		type: "button",
-		onClick: (event) => {
+	const t1 = value !== null && value !== void 0 ? value : "";
+	let t2;
+	if ($[4] !== t1) {
+		t2 = { value: t1 };
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	const { tabProps } = useTab(t2);
+	let restTabProps;
+	let tabOnFocus;
+	let tabOnKeyDown;
+	let tabOnMouseDown;
+	if ($[6] !== tabProps) {
+		({onKeyDown: tabOnKeyDown, onMouseDown: tabOnMouseDown, onFocus: tabOnFocus, ...restTabProps} = tabProps);
+		$[6] = tabProps;
+		$[7] = restTabProps;
+		$[8] = tabOnFocus;
+		$[9] = tabOnKeyDown;
+		$[10] = tabOnMouseDown;
+	} else {
+		restTabProps = $[7];
+		tabOnFocus = $[8];
+		tabOnKeyDown = $[9];
+		tabOnMouseDown = $[10];
+	}
+	let t3;
+	if ($[11] !== onSelect) {
+		t3 = (event) => {
 			if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		},
-		onKeyDown: (event) => {
-			tabOnKeyDown === null || tabOnKeyDown === void 0 || tabOnKeyDown(event);
-			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		},
-		onMouseDown: tabOnMouseDown,
-		onFocus: tabOnFocus,
-		loadingCounters
-	});
+		};
+		$[11] = onSelect;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== onSelect || $[14] !== tabOnKeyDown) {
+		t4 = (event_0) => {
+			var _tabOnKeyDown;
+			(_tabOnKeyDown = tabOnKeyDown) === null || _tabOnKeyDown === void 0 || _tabOnKeyDown(event_0);
+			if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
+		};
+		$[13] = onSelect;
+		$[14] = tabOnKeyDown;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== itemProps || $[17] !== loadingCounters || $[18] !== restTabProps || $[19] !== t3 || $[20] !== t4 || $[21] !== tabOnFocus || $[22] !== tabOnMouseDown) {
+		t5 = /* @__PURE__ */ jsx(UnderlineItem, {
+			as: "button",
+			...itemProps,
+			...restTabProps,
+			type: "button",
+			onClick: t3,
+			onKeyDown: t4,
+			onMouseDown: tabOnMouseDown,
+			onFocus: tabOnFocus,
+			loadingCounters
+		});
+		$[16] = itemProps;
+		$[17] = loadingCounters;
+		$[18] = restTabProps;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = tabOnFocus;
+		$[22] = tabOnMouseDown;
+		$[23] = t5;
+	} else t5 = $[23];
+	return t5;
 };
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const PanelImpl = ({ children, value, ...panelRest }) => {
-	const { tabPanelProps } = useTabPanel({ value: value !== null && value !== void 0 ? value : "" });
-	return /* @__PURE__ */ jsx("div", {
-		...panelRest,
-		...tabPanelProps,
-		children
-	});
+const PanelImpl = (t0) => {
+	const $ = c(10);
+	let children;
+	let panelRest;
+	let value;
+	if ($[0] !== t0) {
+		({children, value, ...panelRest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = panelRest;
+		$[3] = value;
+	} else {
+		children = $[1];
+		panelRest = $[2];
+		value = $[3];
+	}
+	const t1 = value !== null && value !== void 0 ? value : "";
+	let t2;
+	if ($[4] !== t1) {
+		t2 = { value: t1 };
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	const { tabPanelProps } = useTabPanel(t2);
+	let t3;
+	if ($[6] !== children || $[7] !== panelRest || $[8] !== tabPanelProps) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			...panelRest,
+			...tabPanelProps,
+			children
+		});
+		$[6] = children;
+		$[7] = panelRest;
+		$[8] = tabPanelProps;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 };
 PanelImpl.displayName = "UnderlinePanels.Panel";
 const Panel = PanelImpl;
@@ -194,5 +483,12 @@ var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 });
 Tab.__SLOT__ = Symbol("UnderlinePanels.Tab");
 Panel.__SLOT__ = Symbol("UnderlinePanels.Panel");
+function _temp(tab) {
+	return /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon;
+}
+function _temp2(tab_0) {
+	const ariaSelected_0 = /*#__PURE__*/ React.isValidElement(tab_0) && tab_0.props["aria-selected"];
+	return ariaSelected_0 === true || ariaSelected_0 === "true";
+}
 //#endregion
 export { UnderlinePanels_default as default };

package/dist/hooks/useControllableState.js

@@ -1,3 +1,4 @@
+import { c } from "../utils/react-compiler-runtime.js";
 import { warning } from "../utils/warning.js";
 import React from "react";
 //#region src/hooks/useControllableState.ts
@@ -11,27 +12,77 @@ import React from "react";
 * Note: This hook will warn if a component is switching from controlled to
 * uncontrolled, or vice-versa.
 */
-function useControllableState({ name = "custom", defaultValue, value, onChange }) {
+function useControllableState(t0) {
+	const $ = c(16);
+	const { name: t1, defaultValue, value, onChange } = t0;
+	const name = t1 === void 0 ? "custom" : t1;
 	const [state, internalSetState] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
-	const controlled = React.useRef(null);
+	const [controlled] = React.useState(value !== void 0);
 	const stableOnChange = React.useRef(onChange);
-	React.useEffect(() => {
-		stableOnChange.current = onChange;
-	});
-	if (controlled.current === null) controlled.current = value !== void 0;
-	const setState = React.useCallback((stateOrUpdater) => {
-		var _stableOnChange$curre;
-		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;
-		if (controlled.current === false && controlledValue) warning(true, "A component is changing an uncontrolled %s component to be controlled. This is likely caused by the value changing to a defined value from undefined. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components", name);
-		if (controlled.current === true && !controlledValue) warning(true, "A component is changing a controlled %s component to be uncontrolled. This is likely caused by the value changing to an undefined value from a defined one. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components", name);
-	}, [name, value]);
-	if (controlled.current === true) return [value, setState];
-	return [state, setState];
+	let t2;
+	if ($[0] !== onChange) {
+		t2 = () => {
+			stableOnChange.current = onChange;
+		};
+		$[0] = onChange;
+		$[1] = t2;
+	} else t2 = $[1];
+	React.useEffect(t2);
+	let t3;
+	if ($[2] !== controlled || $[3] !== state) {
+		t3 = (stateOrUpdater) => {
+			var _stableOnChange$curre;
+			const value_0 = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
+			if (controlled === false) internalSetState(value_0);
+			(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value_0);
+		};
+		$[2] = controlled;
+		$[3] = state;
+		$[4] = t3;
+	} else t3 = $[4];
+	const setState = t3;
+	let t4;
+	let t5;
+	if ($[5] !== controlled || $[6] !== name || $[7] !== value) {
+		t4 = () => {
+			const controlledValue = value !== void 0;
+			if (controlled === false && controlledValue) warning(true, "A component is changing an uncontrolled %s component to be controlled. This is likely caused by the value changing to a defined value from undefined. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components", name);
+			if (controlled === true && !controlledValue) warning(true, "A component is changing a controlled %s component to be uncontrolled. This is likely caused by the value changing to an undefined value from a defined one. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components", name);
+		};
+		t5 = [
+			name,
+			value,
+			controlled
+		];
+		$[5] = controlled;
+		$[6] = name;
+		$[7] = value;
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	React.useEffect(t4, t5);
+	if (controlled === true) {
+		const t6 = value;
+		let t7;
+		if ($[10] !== setState || $[11] !== t6) {
+			t7 = [t6, setState];
+			$[10] = setState;
+			$[11] = t6;
+			$[12] = t7;
+		} else t7 = $[12];
+		return t7;
+	}
+	let t6;
+	if ($[13] !== setState || $[14] !== state) {
+		t6 = [state, setState];
+		$[13] = setState;
+		$[14] = state;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 }
 //#endregion
 export { useControllableState };

package/dist/hooks/useOnOutsideClick.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { c } from "../utils/react-compiler-runtime.js";
+import { useEffect, useState } from "react";
 //#region src/hooks/useOnOutsideClick.tsx
 const stopPropagation = true;
 /**
@@ -18,27 +19,53 @@ function deregister(id) {
 	delete registry[id];
 }
 let handlerId = 0;
-const useOnOutsideClick = ({ containerRef, ignoreClickRefs, onClickOutside }) => {
-	const id = useMemo(() => handlerId++, []);
-	const handler = useCallback((event) => {
-		var _containerRef$current;
-		if (event instanceof MouseEvent && event.button > 0) return stopPropagation;
-		if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) return stopPropagation;
-		if (ignoreClickRefs && ignoreClickRefs.some(({ current }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) return stopPropagation;
-		onClickOutside(event);
-	}, [
-		containerRef,
-		ignoreClickRefs,
-		onClickOutside
-	]);
-	useEffect(() => {
-		if (Object.keys(registry).length === 0) document.addEventListener("mousedown", handleClick, { capture: true });
-		register(id, handler);
-		return () => {
-			deregister(id);
-			if (Object.keys(registry).length === 0) document.removeEventListener("mousedown", handleClick, { capture: true });
+const useOnOutsideClick = (t0) => {
+	const $ = c(8);
+	const { containerRef, ignoreClickRefs, onClickOutside } = t0;
+	const [id_0] = useState(_temp);
+	let t1;
+	if ($[0] !== containerRef || $[1] !== ignoreClickRefs || $[2] !== onClickOutside) {
+		t1 = (event) => {
+			var _containerRef$current;
+			if (event instanceof MouseEvent && event.button > 0) return stopPropagation;
+			if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) return stopPropagation;
+			if (ignoreClickRefs && ignoreClickRefs.some((t2) => {
+				const { current } = t2;
+				return current === null || current === void 0 ? void 0 : current.contains(event.target);
+			})) return stopPropagation;
+			onClickOutside(event);
 		};
-	}, [id, handler]);
+		$[0] = containerRef;
+		$[1] = ignoreClickRefs;
+		$[2] = onClickOutside;
+		$[3] = t1;
+	} else t1 = $[3];
+	const handler = t1;
+	let t2;
+	let t3;
+	if ($[4] !== handler || $[5] !== id_0) {
+		t2 = () => {
+			if (Object.keys(registry).length === 0) document.addEventListener("mousedown", handleClick, { capture: true });
+			register(id_0, handler);
+			return () => {
+				deregister(id_0);
+				if (Object.keys(registry).length === 0) document.removeEventListener("mousedown", handleClick, { capture: true });
+			};
+		};
+		t3 = [id_0, handler];
+		$[4] = handler;
+		$[5] = id_0;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
 };
+function _temp() {
+	handlerId = handlerId + 1;
+	return handlerId;
+}
 //#endregion
 export { useOnOutsideClick };

package/dist/hooks/useSafeTimeout.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef } from "react";
+import { c } from "../utils/react-compiler-runtime.js";
+import { useEffect, useRef } from "react";
 //#region src/hooks/useSafeTimeout.ts
 /**
 * Safely call `setTimeout` and `clearTimeout` within a component.
@@ -6,25 +7,59 @@ import { useCallback, useEffect, useRef } from "react";
 * This hook ensures that all timeouts are cleared when the component unmounts.
 */
 function useSafeTimeout() {
-	const timers = useRef(/* @__PURE__ */ new Set());
-	const safeSetTimeout = useCallback((handler, timeout, ...args) => {
-		const id = window.setTimeout(handler, timeout, ...args);
-		timers.current.add(id);
-		return id;
-	}, []);
-	const safeClearTimeout = useCallback((id) => {
-		clearTimeout(id);
-		timers.current.delete(id);
-	}, []);
-	useEffect(() => {
-		return () => {
-			for (const id of timers.current) clearTimeout(id);
+	const $ = c(6);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ new Set();
+		$[0] = t0;
+	} else t0 = $[0];
+	const timers = useRef(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (handler, timeout, ...t2) => {
+			const args = t2;
+			const id = window.setTimeout(handler, timeout, ...args);
+			timers.current.add(id);
+			return id;
 		};
-	}, []);
-	return {
-		safeSetTimeout,
-		safeClearTimeout
-	};
+		$[1] = t1;
+	} else t1 = $[1];
+	const safeSetTimeout = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (id_0) => {
+			clearTimeout(id_0);
+			timers.current.delete(id_0);
+		};
+		$[2] = t2;
+	} else t2 = $[2];
+	const safeClearTimeout = t2;
+	let t3;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			const timerSet = timers.current;
+			return () => {
+				for (const id_1 of timerSet) clearTimeout(id_1);
+			};
+		};
+		t4 = [];
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t3 = $[3];
+		t4 = $[4];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			safeSetTimeout,
+			safeClearTimeout
+		};
+		$[5] = t5;
+	} else t5 = $[5];
+	return t5;
 }
 //#endregion
 export { useSafeTimeout as default };

package/dist/internal/hooks/useDevOnlyEffect.js

@@ -1,11 +1,8 @@
 import { useEffect } from "react";
 //#region src/internal/hooks/useDevOnlyEffect.ts
 /**
-* Runs an effect only in development. Wrapping `useEffect` in a regular hook
-* with an outer `__DEV__` guard keeps the production cost to zero (the entire
-* call is dropped by the consumer's `process.env.NODE_ENV` replacement) while
-* centralising the `eslint-disable react-hooks/rules-of-hooks` to one place
-* instead of every call site.
+* Runs an effect only in development. Selecting the implementation at module
+* initialization avoids conditional Hook calls and uses a no-op in production.
 *
 * `exhaustive-deps` is wired up to also check call sites of this hook via
 * `additionalEffectHooks` in `eslint.config.mjs`, so callers get the same
@@ -14,8 +11,6 @@ import { useEffect } from "react";
 * @param effect The effect callback to run in development.
 * @param deps Dependency list, same semantics as `useEffect`.
 */
-const useDevOnlyEffect = (effect, deps) => {
-	useEffect(effect, deps);
-};
+const useDevOnlyEffect = useEffect;
 //#endregion
 export { useDevOnlyEffect };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.43.0-rc.9f4d27bc2",
+  "version": "38.43.0-rc.d8a41c875",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -95,14 +95,14 @@
   "devDependencies": {
     "@actions/core": "1.11.1",
     "@babel/cli": "8.0.6",
-    "@babel/core": "8.0.6",
+    "@babel/core": "8.0.7",
     "@babel/generator": "8.0.6",
-    "@babel/parser": "8.0.6",
+    "@babel/parser": "8.0.7",
     "@babel/plugin-transform-nullish-coalescing-operator": "8.0.1",
     "@babel/plugin-transform-optional-chaining": "8.0.5",
     "@babel/plugin-transform-modules-commonjs": "8.0.1",
     "@babel/preset-react": "8.0.1",
-    "@babel/preset-typescript": "8.0.1",
+    "@babel/preset-typescript": "8.0.7",
     "@babel/types": "8.0.6",
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",