@primer/react 38.32.0-rc.4bb4bba69 → 38.32.0-rc.55b6eaf9c

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -6,6 +6,7 @@ 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";
@@ -21,7 +22,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, tabPanels, tabsHaveIcons] = useMemo(() => {
+	const [tabs_0, tabPanels_0, tabsHaveIcons_0] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
@@ -31,10 +32,10 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 		});
 		const tabs = [];
 		const tabPanels = [];
-		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);
+		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);
 		}
 		return [
 			tabs,
@@ -52,20 +53,20 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	}, [iconsVisible]);
 	const listWidthRef = useRef(0);
 	useResizeObserver((entries) => {
-		if (!tabsHaveIcons) return;
+		if (!tabsHaveIcons_0) return;
 		if (!iconsVisibleRef.current) return;
 		listWidthRef.current = entries[0].contentRect.width;
 	}, listRef, []);
 	useResizeObserver((resizeObserverEntries) => {
-		if (!tabsHaveIcons) return;
+		if (!tabsHaveIcons_0) return;
 		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
 		setIconsVisible(wrapperWidth > listWidthRef.current);
 	}, wrapperRef, []);
-	!(tabs.filter((tab) => {
-		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
+	!(tabs_0.filter((tab_0) => {
+		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab_0) && tab_0.props["aria-selected"];
 		return ariaSelected === true || ariaSelected === "true";
 	}).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.`);
+	!(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.`);
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
 		children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
@@ -79,44 +80,100 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy,
 				role: "tablist",
-				children: tabs
+				children: tabs_0
 			})
-		}), tabPanels] })
+		}), tabPanels_0] })
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
+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 { loadingCounters } = useContext(UnderlinePanelsContext);
-	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
-	});
+	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;
 };
-TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const Panel = ({ children, ...rest }) => {
-	return /*#__PURE__*/ jsx("div", {
-		role: "tabpanel",
-		...rest,
-		children
-	});
+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;
 };
-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 = 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);
+		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);
 	}, [state]);
 	React.useEffect(() => {
 		const controlledValue = value !== void 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.0-rc.4bb4bba69",
+  "version": "38.32.0-rc.55b6eaf9c",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,7 +47,6 @@
     "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"
@@ -109,7 +108,6 @@
     "@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",