@primer/react 38.32.0-rc.57a990042 → 38.32.0-rc.68e0ffa22

package/CHANGELOG.md

@@ -17,18 +17,8 @@
 
 ### 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,6 +8,7 @@ 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";
@@ -40,81 +41,188 @@ const renderMenuItem = (item, index) => {
 	}, label);
 };
 renderMenuItem.displayName = "renderMenuItem";
-const ActionBar = ({ size = "medium", children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, flush = false, className, gap = "condensed" }) => {
+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 [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState();
-	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),
+	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,
 			"data-component": "ActionBar",
 			"data-flush": flush,
-			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);
-					}
-				}) }) })] })]
-			})
-		})
-	});
+			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;
 };
-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 isItemOverflowing = useIsClipped(ref, { disabled: isGroupOverflowing !== void 0 });
+	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 isOverflowing = isGroupOverflowing || isItemOverflowing;
 	ActionBarItemsRegistry.useRegisterDescendant(isOverflowing ? registryProps : null);
-	return {
-		isOverflowing,
-		dataOverflowingAttr: isOverflowing ? "" : void 0
-	};
+	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;
 }
 const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props }, forwardedRef) => {
 	const ref = useRef(null);
@@ -146,97 +254,283 @@ const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...pr
 		"data-overflowing": dataOverflowingAttr
 	});
 });
-const ActionBarButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props }, forwardedRef) => {
+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 ref = useRef(null);
 	const mergedRef = useMergedRefs(forwardedRef, ref);
 	const { size } = React.useContext(ActionBarContext);
 	const { children, leadingVisual } = props;
-	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) => {
+	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;
 			if (disabled) return;
-			onClick === null || onClick === void 0 || onClick(event);
-		}, [disabled, onClick]),
-		...props,
-		variant: "invisible",
-		"data-overflowing": dataOverflowingAttr
-	});
+			(_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;
 });
 const ActionBarGroupContext = /*#__PURE__*/ React.createContext(null);
-const ActionBarGroup = /*#__PURE__*/ forwardRef(({ children }, forwardedRef) => {
+const ActionBarGroup = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
+	const $ = c(10);
+	const { children } = t0;
 	const backupRef = useRef(null);
 	const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
-	const { dataOverflowingAttr, isOverflowing } = useActionBarItem(ref, useMemo(() => ({ type: "group" }), []));
-	return /*#__PURE__*/ jsx(ActionBarGroupContext.Provider, {
-		value: { isOverflowing },
-		children: /*#__PURE__*/ jsx("div", {
+	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", {
 			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(({ "aria-label": ariaLabel, icon, overflowIcon, items, returnFocusRef, ...props }, forwardedRef) => {
+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 backupRef = useRef(null);
 	const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const [menuOpen, setMenuOpen] = useState(false);
-	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, {
+	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, {
 			variant: "invisible",
 			"aria-label": ariaLabel,
 			icon,
 			...props,
 			"data-overflowing": dataOverflowingAttr,
 			"data-component": "ActionBar.Menu.IconButton"
-		}) }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
-			...returnFocusRef && { returnFocusRef },
-			children: /*#__PURE__*/ jsx(ActionList, { children: items.map((item, index) => renderMenuItem(item, index)) })
-		})]
-	});
+		}) });
+		$[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;
 });
 const VerticalDivider = () => {
+	const $ = c(3);
 	const ref = useRef(null);
-	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
-	});
+	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;
 };
-VerticalDivider.displayName = "VerticalDivider";
+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);
+}
 //#endregion
 export { ActionBar, ActionBarButton, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };