@primer/react 38.42.0-rc.ebd425836 → 38.42.0

package/dist/ActionBar/ActionBar.js

@@ -1,3 +1,4 @@
+import { c } from "../utils/react-compiler-runtime.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
@@ -8,11 +9,13 @@ 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 React, { forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { isValidElementType } from "react-is";
 import { KebabHorizontalIcon } from "@primer/octicons-react";
 //#region src/ActionBar/ActionBar.tsx
+const renderIcon = (icon) => isValidElementType(icon) && typeof icon !== "string" ? /*#__PURE__*/ React.createElement(icon) : icon;
 const ActionBarContext = /*#__PURE__*/ React.createContext({ size: "medium" });
 const ActionBarItemsRegistry = createDescendantRegistry();
 const FOCUSABLE_ITEM_SELECTOR = ":is(button, a, input, [tabindex]):not(:disabled):not([data-overflowing]):not([data-more-button-inactive])";
@@ -23,9 +26,9 @@ const renderMenuItem = (item, index) => {
 		disabled,
 		variant,
 		children: [
-			LeadingIcon ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: /* @__PURE__ */ jsx(LeadingIcon, {}) }) : null,
+			LeadingIcon !== void 0 && LeadingIcon !== null ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(LeadingIcon) }) : null,
 			label,
-			TrailingIcon ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : /* @__PURE__ */ jsx(TrailingIcon, {}) }) : null
+			TrailingIcon !== void 0 && TrailingIcon !== null ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : renderIcon(TrailingIcon) }) : null
 		]
 	}) }), /* @__PURE__ */ jsx(ActionMenu.Overlay, { children: /* @__PURE__ */ jsx(ActionList, { children: items.map((subItem, subIndex) => renderMenuItem(subItem, subIndex)) }) })] }, label);
 	return /* @__PURE__ */ jsxs(ActionList.Item, {
@@ -33,209 +36,542 @@ const renderMenuItem = (item, index) => {
 		disabled,
 		variant,
 		children: [
-			LeadingIcon ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: /* @__PURE__ */ jsx(LeadingIcon, {}) }) : null,
+			LeadingIcon !== void 0 && LeadingIcon !== null ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(LeadingIcon) }) : null,
 			label,
-			TrailingIcon ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : /* @__PURE__ */ jsx(TrailingIcon, {}) }) : null
+			TrailingIcon !== void 0 && TrailingIcon !== null ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : renderIcon(TrailingIcon) }) : null
 		]
 	}, label);
 };
-const ActionBar = ({ size = "medium", children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, flush = false, className, gap = "condensed" }) => {
+const ActionBar = (t0) => {
+	const $ = c(42);
+	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 = overflowItems !== null && overflowItems !== void 0 && overflowItems.length ? void 0 : true;
+	let t15;
+	if ($[16] !== size || $[17] !== t14) {
+		t15 = /* @__PURE__ */ jsx(ActionMenu.Anchor, { children: /* @__PURE__ */ jsx(IconButton, {
+			variant: "invisible",
+			"aria-label": "More items",
+			icon: KebabHorizontalIcon,
+			className: ActionBar_module_css_default.MoreButton,
+			"data-more-button-inactive": t14,
+			size
+		}) });
+		$[16] = size;
+		$[17] = t14;
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] !== overflowItems) {
+		t16 = overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.map(_temp4);
+		$[19] = overflowItems;
+		$[20] = t16;
+	} else t16 = $[20];
+	let t17;
+	if ($[21] !== t16) {
+		t17 = /* @__PURE__ */ jsx(ActionMenu.Overlay, { children: /* @__PURE__ */ jsx(ActionList, { children: t16 }) });
+		$[21] = t16;
+		$[22] = t17;
+	} else t17 = $[22];
+	let t18;
+	if ($[23] !== t15 || $[24] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(ActionMenu, { children: [t15, t17] });
+		$[23] = t15;
+		$[24] = t17;
+		$[25] = t18;
+	} else t18 = $[25];
+	let t19;
+	if ($[26] !== ariaLabel || $[27] !== ariaLabelledBy || $[28] !== gap || $[29] !== size || $[30] !== t10 || $[31] !== t13 || $[32] !== t18 || $[33] !== t9) {
+		t19 = /* @__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, t18]
+		});
+		$[26] = ariaLabel;
+		$[27] = ariaLabelledBy;
+		$[28] = gap;
+		$[29] = size;
+		$[30] = t10;
+		$[31] = t13;
+		$[32] = t18;
+		$[33] = t9;
+		$[34] = t19;
+	} else t19 = $[34];
+	let t20;
+	if ($[35] !== flush || $[36] !== t19 || $[37] !== t8) {
+		t20 = /* @__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 items",
-					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: t19
+		});
+		$[35] = flush;
+		$[36] = t19;
+		$[37] = t8;
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== t20 || $[40] !== t7) {
+		t21 = /* @__PURE__ */ jsx(ActionBarContext.Provider, {
+			value: t7,
+			children: t20
+		});
+		$[39] = t20;
+		$[40] = t7;
+		$[41] = t21;
+	} else t21 = $[41];
+	return t21;
 };
 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 ActionBarIconButton = /*#__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 { ["aria-label"]: ariaLabel, icon } = props;
-	const { dataOverflowingAttr } = useActionBarItem(ref, useMemo(() => ({
-		type: "action",
-		label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "",
-		icon,
-		disabled: !!disabled,
-		onClick
-	}), [
-		ariaLabel,
-		icon,
-		disabled,
-		onClick
-	]));
-	const clickHandler = useCallback((event) => {
-		if (disabled) return;
-		onClick === null || onClick === void 0 || onClick(event);
-	}, [disabled, onClick]);
-	return /* @__PURE__ */ jsx(IconButton, {
-		"aria-disabled": disabled,
-		ref: mergedRef,
-		size,
-		onClick: clickHandler,
-		...props,
-		variant: "invisible",
-		"data-overflowing": dataOverflowingAttr
-	});
+	const { "aria-label": ariaLabel, icon } = props;
+	const t1 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "";
+	const t2 = !!disabled;
+	const t3 = onClick;
+	let t4;
+	if ($[4] !== icon || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+		t4 = {
+			type: "action",
+			label: t1,
+			icon,
+			disabled: t2,
+			onClick: t3
+		};
+		$[4] = icon;
+		$[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 = 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(IconButton, {
+			"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 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
-	]));
-	const clickHandler = useCallback((event) => {
-		if (disabled) return;
-		onClick === null || onClick === void 0 || onClick(event);
-	}, [disabled, onClick]);
-	return /* @__PURE__ */ jsx(ButtonComponent, {
-		"aria-disabled": disabled,
-		ref: mergedRef,
-		size,
-		onClick: clickHandler,
-		...props,
-		variant: "invisible",
-		"data-overflowing": dataOverflowingAttr
-	});
+	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 _onClick2;
+			if (disabled) return;
+			(_onClick2 = onClick) === null || _onClick2 === void 0 || _onClick2(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 !== void 0 ? 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;
 };
+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 !== void 0 && Icon !== null ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(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: renderIcon(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 };