@primer/react 38.32.0-rc.68e0ffa22 → 38.32.0-rc.85de10233

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Minor Changes
 
+- [#8133](https://github.com/primer/react/pull/8133) [`0cb8e17`](https://github.com/primer/react/commit/0cb8e17219f61f853fcf06ce9ee09c755c9ef5ff) Thanks [@iansan5653](https://github.com/iansan5653)! - `UnderlineNav`: Replaced dynamic icon visibility with static breakpoints to avoid flickering. Breakpoints customizable via the `hideIconsBreakpoint` prop.
+
 - [#8112](https://github.com/primer/react/pull/8112) [`50face0`](https://github.com/primer/react/commit/50face041d55eb800d643b0d264d23fc12fd4121) Thanks [@llastflowers](https://github.com/llastflowers)! - Add data-component attributes and associated tests for:
 
   SplitPageLayout
@@ -17,8 +19,18 @@
 
 ### Patch Changes
 
+- [#7901](https://github.com/primer/react/pull/7901) [`8288ed9`](https://github.com/primer/react/commit/8288ed9d88668f93cf3b1eb70ee61edac6217367) Thanks [@mattcosta7](https://github.com/mattcosta7)! - PageHeader: improve rendering performance by removing expensive `:has()` selectors. No visual or API changes.
+
+- [#8115](https://github.com/primer/react/pull/8115) [`07c530a`](https://github.com/primer/react/commit/07c530a1686ef16b68b2f2fe692b7a3327bdc02b) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Improve rendering performance in Safari by removing expensive `:has()` selectors from ActionList/NavList, Breadcrumbs, SelectPanel, and SegmentedControl. No visual or API changes.
+
+- [#8024](https://github.com/primer/react/pull/8024) [`18e3b7d`](https://github.com/primer/react/commit/18e3b7d7a7b54275b99d2562eb279722f5cdd60e) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ToggleSwitch: Fire `onChange` from the user interaction instead of an effect, so it no longer fires on mount or when a controlled `checked` value changes externally.
+
 - [#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.
 
+- [#8001](https://github.com/primer/react/pull/8001) [`4edc824`](https://github.com/primer/react/commit/4edc8242da557eedd41d71b242674b33254029ec) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `useMedia` now reads the live `matchMedia` value on the first client render instead of after an effect, removing a redundant render pass. `defaultState` is only used for the SSR/hydration snapshot (no public API changes).
+
+- [#8023](https://github.com/primer/react/pull/8023) [`71fa75c`](https://github.com/primer/react/commit/71fa75c861c55bf29dd30ddf4a83549bf81369f8) Thanks [@mattcosta7](https://github.com/mattcosta7)! - FormControl: Avoid an extra re-render when showing a validation message.
+
 ## 38.31.0
 
 ### Minor Changes

package/dist/ActionBar/ActionBar.js

@@ -8,7 +8,6 @@ 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 } from "react";
@@ -41,188 +40,81 @@ const renderMenuItem = (item, index) => {
 	}, label);
 };
 renderMenuItem.displayName = "renderMenuItem";
-const ActionBar = (t0) => {
-	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;
-	const gap = t3 === void 0 ? "condensed" : t3;
+const ActionBar = ({ size = "medium", children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, flush = false, className, gap = "condensed" }) => {
 	const [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState();
-	let t4;
-	if ($[0] !== childRegistry) {
-		t4 = childRegistry && Array.from(childRegistry.entries()).filter(_temp);
-		$[0] = childRegistry;
-		$[1] = t4;
-	} else t4 = $[1];
-	const overflowItems = t4;
-	let t5;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
-			bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-			focusOutBehavior: "wrap",
-			focusableElementFilter: _temp2
-		};
-		$[2] = t5;
-	} else t5 = $[2];
-	let t6;
-	if ($[3] !== overflowItems) {
-		t6 = [overflowItems];
-		$[3] = overflowItems;
-		$[4] = t6;
-	} else t6 = $[4];
-	const { containerRef } = useFocusZone(t5, t6);
-	let t7;
-	if ($[5] !== size) {
-		t7 = { size };
-		$[5] = size;
-		$[6] = t7;
-	} else t7 = $[6];
-	let t8;
-	if ($[7] !== className) {
-		t8 = clsx(className, ActionBar_module_css_default.Nav);
-		$[7] = className;
-		$[8] = t8;
-	} else t8 = $[8];
-	const t9 = containerRef;
-	const t10 = overflowItems ? overflowItems.length > 0 : void 0;
-	let t11;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /*#__PURE__*/ jsx("div", { className: ActionBar_module_css_default.OverflowSpacer });
-		$[9] = t11;
-	} else t11 = $[9];
-	let t12;
-	if ($[10] !== children || $[11] !== setChildRegistry) {
-		t12 = /*#__PURE__*/ jsx(ActionBarItemsRegistry.Provider, {
-			setRegistry: setChildRegistry,
-			children
-		});
-		$[10] = children;
-		$[11] = setChildRegistry;
-		$[12] = t12;
-	} else t12 = $[12];
-	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": t14,
-			icon: KebabHorizontalIcon,
-			className: ActionBar_module_css_default.MoreButton,
-			"data-more-button-inactive": t15,
-			size
-		}) });
-		$[16] = size;
-		$[17] = t14;
-		$[18] = t15;
-		$[19] = t16;
-	} 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 ($[22] !== t17) {
-		t18 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t17 }) });
-		$[22] = t17;
-		$[23] = t18;
-	} else t18 = $[23];
-	let t19;
-	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,
-			"aria-label": ariaLabel,
-			"aria-labelledby": ariaLabelledBy,
-			"data-gap": gap,
-			"data-size": size,
-			"data-has-overflow": t10,
-			children: [t13, t19]
-		});
-		$[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,
+	const overflowItems = useMemo(() => childRegistry && Array.from(childRegistry.entries()).filter((entry) => entry[1] !== null), [childRegistry]);
+	const { containerRef } = useFocusZone({
+		bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+		focusOutBehavior: "wrap",
+		focusableElementFilter: (element) => element.matches(FOCUSABLE_ITEM_SELECTOR)
+	}, [overflowItems]);
+	return /*#__PURE__*/ jsx(ActionBarContext.Provider, {
+		value: { size },
+		children: /*#__PURE__*/ jsx("div", {
+			className: clsx(className, ActionBar_module_css_default.Nav),
 			"data-component": "ActionBar",
 			"data-flush": flush,
-			children: t20
-		});
-		$[36] = flush;
-		$[37] = t20;
-		$[38] = t8;
-		$[39] = t21;
-	} else t21 = $[39];
-	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;
+			children: /*#__PURE__*/ jsxs("div", {
+				ref: containerRef,
+				role: "toolbar",
+				className: ActionBar_module_css_default.List,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"data-gap": gap,
+				"data-size": size,
+				"data-has-overflow": overflowItems ? overflowItems.length > 0 : void 0,
+				children: [/*#__PURE__*/ jsxs("div", {
+					className: ActionBar_module_css_default.OverflowContainer,
+					children: [/*#__PURE__*/ jsx("div", { className: ActionBar_module_css_default.OverflowSpacer }), /*#__PURE__*/ jsx(OverflowObserverProvider, {
+						rootRef: containerRef,
+						children: /*#__PURE__*/ jsx(ActionBarItemsRegistry.Provider, {
+							setRegistry: setChildRegistry,
+							children
+						})
+					})]
+				}), /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsx(IconButton, {
+					variant: "invisible",
+					"aria-label": `More ${ariaLabel} items ${overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length}`,
+					icon: KebabHorizontalIcon,
+					className: ActionBar_module_css_default.MoreButton,
+					"data-more-button-inactive": overflowItems !== null && overflowItems !== void 0 && overflowItems.length ? void 0 : true,
+					size
+				}) }), /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.map(([id, menuItem]) => {
+					if (menuItem.type === "divider") return /*#__PURE__*/ jsx(ActionList.Divider, {}, id);
+					if (menuItem.type === "action") {
+						const { onClick, icon: Icon, label, disabled } = menuItem;
+						return /*#__PURE__*/ jsxs(ActionList.Item, {
+							onSelect: (event) => {
+								typeof onClick === "function" && onClick(event);
+							},
+							disabled,
+							children: [Icon ? /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) }) : null, label]
+						}, id);
+					}
+					if (menuItem.type === "menu") {
+						const menuItems = menuItem.items;
+						const { icon: Icon, label, returnFocusRef } = menuItem;
+						return /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsxs(ActionList.Item, { children: [Icon !== "none" ? /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) }) : null, label] }) }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
+							...returnFocusRef && { returnFocusRef },
+							children: /*#__PURE__*/ jsx(ActionList, { children: menuItems.map((item, index) => renderMenuItem(item, index)) })
+						})] }, id);
+					}
+				}) }) })] })]
+			})
+		})
+	});
 };
+ActionBar.displayName = "ActionBar";
 function useActionBarItem(ref, registryProps) {
 	var _useContext;
-	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) {
-		t0 = { disabled: isInGroup };
-		$[0] = isInGroup;
-		$[1] = t0;
-	} else t0 = $[1];
-	const isItemOverflowing = useIsClipped(ref, t0);
+	const isItemOverflowing = useIsClipped(ref, { disabled: isGroupOverflowing !== void 0 });
 	const isOverflowing = isGroupOverflowing || isItemOverflowing;
 	ActionBarItemsRegistry.useRegisterDescendant(isOverflowing ? registryProps : null);
-	const t1 = isOverflowing ? "" : void 0;
-	let t2;
-	if ($[2] !== isOverflowing || $[3] !== t1) {
-		t2 = {
-			isOverflowing,
-			dataOverflowingAttr: t1
-		};
-		$[2] = isOverflowing;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+	return {
+		isOverflowing,
+		dataOverflowingAttr: isOverflowing ? "" : void 0
+	};
 }
 const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props }, forwardedRef) => {
 	const ref = useRef(null);
@@ -254,283 +146,97 @@ const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...pr
 		"data-overflowing": dataOverflowingAttr
 	});
 });
-const ActionBarButton = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
-	const $ = c(19);
-	let disabled;
-	let onClick;
-	let props;
-	if ($[0] !== t0) {
-		({disabled, onClick, ...props} = t0);
-		$[0] = t0;
-		$[1] = disabled;
-		$[2] = onClick;
-		$[3] = props;
-	} else {
-		disabled = $[1];
-		onClick = $[2];
-		props = $[3];
-	}
+const ActionBarButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props }, forwardedRef) => {
 	const ref = useRef(null);
 	const mergedRef = useMergedRefs(forwardedRef, ref);
 	const { size } = React.useContext(ActionBarContext);
 	const { children, leadingVisual } = props;
-	const t1 = typeof leadingVisual === "function" ? leadingVisual : void 0;
-	const t2 = !!disabled;
-	const t3 = onClick;
-	let t4;
-	if ($[4] !== children || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
-		t4 = {
-			type: "action",
-			label: children,
-			icon: t1,
-			disabled: t2,
-			onClick: t3
-		};
-		$[4] = children;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	const { dataOverflowingAttr } = useActionBarItem(ref, t4);
-	let t5;
-	if ($[9] !== disabled || $[10] !== onClick) {
-		t5 = (event) => {
-			var _onClick;
+	const { dataOverflowingAttr } = useActionBarItem(ref, useMemo(() => ({
+		type: "action",
+		label: children,
+		icon: typeof leadingVisual === "function" ? leadingVisual : void 0,
+		disabled: !!disabled,
+		onClick
+	}), [
+		children,
+		leadingVisual,
+		disabled,
+		onClick
+	]));
+	return /*#__PURE__*/ jsx(ButtonComponent, {
+		"aria-disabled": disabled,
+		ref: mergedRef,
+		size,
+		onClick: useCallback((event) => {
 			if (disabled) return;
-			(_onClick = onClick) === null || _onClick === void 0 || _onClick(event);
-		};
-		$[9] = disabled;
-		$[10] = onClick;
-		$[11] = t5;
-	} else t5 = $[11];
-	const clickHandler = t5;
-	let t6;
-	if ($[12] !== clickHandler || $[13] !== dataOverflowingAttr || $[14] !== disabled || $[15] !== mergedRef || $[16] !== props || $[17] !== size) {
-		t6 = /*#__PURE__*/ jsx(ButtonComponent, {
-			"aria-disabled": disabled,
-			ref: mergedRef,
-			size,
-			onClick: clickHandler,
-			...props,
-			variant: "invisible",
-			"data-overflowing": dataOverflowingAttr
-		});
-		$[12] = clickHandler;
-		$[13] = dataOverflowingAttr;
-		$[14] = disabled;
-		$[15] = mergedRef;
-		$[16] = props;
-		$[17] = size;
-		$[18] = t6;
-	} else t6 = $[18];
-	return t6;
+			onClick === null || onClick === void 0 || onClick(event);
+		}, [disabled, onClick]),
+		...props,
+		variant: "invisible",
+		"data-overflowing": dataOverflowingAttr
+	});
 });
 const ActionBarGroupContext = /*#__PURE__*/ React.createContext(null);
-const ActionBarGroup = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
-	const $ = c(10);
-	const { children } = t0;
+const ActionBarGroup = /*#__PURE__*/ forwardRef(({ children }, forwardedRef) => {
 	const backupRef = useRef(null);
 	const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { type: "group" };
-		$[0] = t1;
-	} else t1 = $[0];
-	const { dataOverflowingAttr, isOverflowing } = useActionBarItem(ref, t1);
-	let t2;
-	if ($[1] !== isOverflowing) {
-		t2 = { isOverflowing };
-		$[1] = isOverflowing;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== children || $[4] !== dataOverflowingAttr || $[5] !== ref) {
-		t3 = /*#__PURE__*/ jsx("div", {
+	const { dataOverflowingAttr, isOverflowing } = useActionBarItem(ref, useMemo(() => ({ type: "group" }), []));
+	return /*#__PURE__*/ jsx(ActionBarGroupContext.Provider, {
+		value: { isOverflowing },
+		children: /*#__PURE__*/ jsx("div", {
 			className: ActionBar_module_css_default.Group,
 			"data-component": "ActionBar.Group",
 			ref,
 			"data-overflowing": dataOverflowingAttr,
 			children
-		});
-		$[3] = children;
-		$[4] = dataOverflowingAttr;
-		$[5] = ref;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== t2 || $[8] !== t3) {
-		t4 = /*#__PURE__*/ jsx(ActionBarGroupContext.Provider, {
-			value: t2,
-			children: t3
-		});
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+		})
+	});
 });
-const ActionBarMenu = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
-	const $ = c(31);
-	let ariaLabel;
-	let icon;
-	let items;
-	let overflowIcon;
-	let props;
-	let returnFocusRef;
-	if ($[0] !== t0) {
-		({"aria-label": ariaLabel, icon, overflowIcon, items, returnFocusRef, ...props} = t0);
-		$[0] = t0;
-		$[1] = ariaLabel;
-		$[2] = icon;
-		$[3] = items;
-		$[4] = overflowIcon;
-		$[5] = props;
-		$[6] = returnFocusRef;
-	} else {
-		ariaLabel = $[1];
-		icon = $[2];
-		items = $[3];
-		overflowIcon = $[4];
-		props = $[5];
-		returnFocusRef = $[6];
-	}
+const ActionBarMenu = /*#__PURE__*/ forwardRef(({ "aria-label": ariaLabel, icon, overflowIcon, items, returnFocusRef, ...props }, forwardedRef) => {
 	const backupRef = useRef(null);
 	const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const [menuOpen, setMenuOpen] = useState(false);
-	const t1 = overflowIcon ? overflowIcon : icon;
-	let t2;
-	if ($[7] !== ariaLabel || $[8] !== items || $[9] !== returnFocusRef || $[10] !== t1) {
-		t2 = {
-			type: "menu",
-			label: ariaLabel,
-			icon: t1,
-			returnFocusRef,
-			items
-		};
-		$[7] = ariaLabel;
-		$[8] = items;
-		$[9] = returnFocusRef;
-		$[10] = t1;
-		$[11] = t2;
-	} else t2 = $[11];
-	const { dataOverflowingAttr } = useActionBarItem(ref, t2);
-	let t3;
-	if ($[12] !== ariaLabel || $[13] !== dataOverflowingAttr || $[14] !== icon || $[15] !== props) {
-		t3 = /*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsx(IconButton, {
+	const { dataOverflowingAttr } = useActionBarItem(ref, useMemo(() => ({
+		type: "menu",
+		label: ariaLabel,
+		icon: overflowIcon ? overflowIcon : icon,
+		returnFocusRef,
+		items
+	}), [
+		ariaLabel,
+		overflowIcon,
+		icon,
+		items,
+		returnFocusRef
+	]));
+	return /*#__PURE__*/ jsxs(ActionMenu, {
+		anchorRef: ref,
+		open: menuOpen,
+		onOpenChange: setMenuOpen,
+		children: [/*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsx(IconButton, {
 			variant: "invisible",
 			"aria-label": ariaLabel,
 			icon,
 			...props,
 			"data-overflowing": dataOverflowingAttr,
 			"data-component": "ActionBar.Menu.IconButton"
-		}) });
-		$[12] = ariaLabel;
-		$[13] = dataOverflowingAttr;
-		$[14] = icon;
-		$[15] = props;
-		$[16] = t3;
-	} else t3 = $[16];
-	let t4;
-	if ($[17] !== returnFocusRef) {
-		t4 = returnFocusRef && { returnFocusRef };
-		$[17] = returnFocusRef;
-		$[18] = t4;
-	} else t4 = $[18];
-	let t5;
-	if ($[19] !== items) {
-		t5 = items.map(_temp5);
-		$[19] = items;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== t5) {
-		t6 = /*#__PURE__*/ jsx(ActionList, { children: t5 });
-		$[21] = t5;
-		$[22] = t6;
-	} else t6 = $[22];
-	let t7;
-	if ($[23] !== t4 || $[24] !== t6) {
-		t7 = /*#__PURE__*/ jsx(ActionMenu.Overlay, {
-			...t4,
-			children: t6
-		});
-		$[23] = t4;
-		$[24] = t6;
-		$[25] = t7;
-	} else t7 = $[25];
-	let t8;
-	if ($[26] !== menuOpen || $[27] !== ref || $[28] !== t3 || $[29] !== t7) {
-		t8 = /*#__PURE__*/ jsxs(ActionMenu, {
-			anchorRef: ref,
-			open: menuOpen,
-			onOpenChange: setMenuOpen,
-			children: [t3, t7]
-		});
-		$[26] = menuOpen;
-		$[27] = ref;
-		$[28] = t3;
-		$[29] = t7;
-		$[30] = t8;
-	} else t8 = $[30];
-	return t8;
+		}) }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
+			...returnFocusRef && { returnFocusRef },
+			children: /*#__PURE__*/ jsx(ActionList, { children: items.map((item, index) => renderMenuItem(item, index)) })
+		})]
+	});
 });
 const VerticalDivider = () => {
-	const $ = c(3);
 	const ref = useRef(null);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = { type: "divider" };
-		$[0] = t0;
-	} else t0 = $[0];
-	const { dataOverflowingAttr } = useActionBarItem(ref, t0);
-	let t1;
-	if ($[1] !== dataOverflowingAttr) {
-		t1 = /*#__PURE__*/ jsx("div", {
-			ref,
-			"data-component": "ActionBar.VerticalDivider",
-			"aria-hidden": "true",
-			className: ActionBar_module_css_default.Divider,
-			"data-overflowing": dataOverflowingAttr
-		});
-		$[1] = dataOverflowingAttr;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
+	const { dataOverflowingAttr } = useActionBarItem(ref, useMemo(() => ({ type: "divider" }), []));
+	return /*#__PURE__*/ jsx("div", {
+		ref,
+		"data-component": "ActionBar.VerticalDivider",
+		"aria-hidden": "true",
+		className: ActionBar_module_css_default.Divider,
+		"data-overflowing": dataOverflowingAttr
+	});
 };
-function _temp(entry) {
-	return entry[1] !== null;
-}
-function _temp2(element) {
-	return element.matches(FOCUSABLE_ITEM_SELECTOR);
-}
-function _temp3(item, index) {
-	return renderMenuItem(item, index);
-}
-function _temp4(t0) {
-	const [id, menuItem] = t0;
-	if (menuItem.type === "divider") return /*#__PURE__*/ jsx(ActionList.Divider, {}, id);
-	if (menuItem.type === "action") {
-		const { onClick, icon: Icon, label, disabled } = menuItem;
-		return /*#__PURE__*/ jsxs(ActionList.Item, {
-			onSelect: (event) => {
-				typeof onClick === "function" && onClick(event);
-			},
-			disabled,
-			children: [Icon ? /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) }) : null, label]
-		}, id);
-	}
-	if (menuItem.type === "menu") {
-		const menuItems = menuItem.items;
-		const { icon: Icon_0, label: label_0, returnFocusRef } = menuItem;
-		return /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsxs(ActionList.Item, { children: [Icon_0 !== "none" ? /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon_0, {}) }) : null, label_0] }) }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
-			...returnFocusRef && { returnFocusRef },
-			children: /*#__PURE__*/ jsx(ActionList, { children: menuItems.map(_temp3) })
-		})] }, id);
-	}
-}
-function _temp5(item, index) {
-	return renderMenuItem(item, index);
-}
+VerticalDivider.displayName = "VerticalDivider";
 //#endregion
 export { ActionBar, ActionBarButton, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };