@primer/react 38.1.0-rc.6118e2738 → 38.1.0-rc.63925902f

package/dist/ActionBar/ActionBar.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import React, { forwardRef, useRef, useState, useCallback, useId } from 'react';
+import React, { forwardRef, useRef, useState, useId } from 'react';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -10,7 +10,7 @@ import { IconButton } from '../Button/IconButton.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
@@ -50,6 +50,54 @@ const calculatePossibleItems = (registryEntries, navWidth, gap, moreMenuWidth =
   }
   return breakpoint;
 };
+const renderMenuItem = (item, index) => {
+  if (item.type === 'divider') {
+    return /*#__PURE__*/jsx(ActionList.Divider, {}, index);
+  }
+  const {
+    label,
+    onClick,
+    disabled,
+    trailingVisual: TrailingIcon,
+    leadingVisual: LeadingIcon,
+    items,
+    variant
+  } = item;
+  if (items && items.length > 0) {
+    return /*#__PURE__*/jsxs(ActionMenu, {
+      children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
+        children: /*#__PURE__*/jsxs(ActionList.Item, {
+          disabled: disabled,
+          variant: variant,
+          children: [LeadingIcon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+            children: /*#__PURE__*/jsx(LeadingIcon, {})
+          }) : null, label, TrailingIcon ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+            children: typeof TrailingIcon === 'string' ? /*#__PURE__*/jsx("span", {
+              children: TrailingIcon
+            }) : /*#__PURE__*/jsx(TrailingIcon, {})
+          }) : null]
+        })
+      }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+        children: /*#__PURE__*/jsx(ActionList, {
+          children: items.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
+        })
+      })]
+    }, label);
+  }
+  return /*#__PURE__*/jsxs(ActionList.Item, {
+    onSelect: onClick,
+    disabled: disabled,
+    variant: variant,
+    children: [LeadingIcon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: /*#__PURE__*/jsx(LeadingIcon, {})
+    }) : null, label, TrailingIcon ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+      children: typeof TrailingIcon === 'string' ? /*#__PURE__*/jsx("span", {
+        children: TrailingIcon
+      }) : /*#__PURE__*/jsx(TrailingIcon, {})
+    }) : null]
+  }, label);
+};
+renderMenuItem.displayName = "renderMenuItem";
 const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap) => {
   const registryEntries = Array.from(childRegistry).filter(entry => entry[1] !== null && (entry[1].type !== 'action' || entry[1].groupId === undefined));
   if (registryEntries.length === 0) return new Set();
@@ -86,178 +134,352 @@ const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap
   }
 };
 const ActionBar = props => {
+  const $ = c(43);
   const {
-    size = 'medium',
+    size: t0,
     children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    flush = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    flush: t1,
     className,
-    gap = 'condensed'
+    gap: t2
   } = props;
-
-  // We derive the numeric gap from computed style so layout math stays in sync with CSS
+  const size = t0 === undefined ? "medium" : t0;
+  const flush = t1 === undefined ? false : t1;
+  const gap = t2 === undefined ? "condensed" : t2;
   const listRef = useRef(null);
   const [computedGap, setComputedGap] = useState(ACTIONBAR_ITEM_GAP);
-  const [childRegistry, setChildRegistry] = useState(() => new Map());
-  const registerChild = useCallback((id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)), []);
-  const unregisterChild = useCallback(id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null)), []);
-  const [menuItemIds, setMenuItemIds] = useState(() => new Set());
+  const [childRegistry, setChildRegistry] = useState(_temp);
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps));
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  const registerChild = t3;
+  let t4;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null));
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const unregisterChild = t4;
+  const [menuItemIds, setMenuItemIds] = useState(_temp2);
   const navRef = useRef(null);
-  // measure gap after first render & whenever gap scale changes
-  useIsomorphicLayoutEffect(() => {
-    if (!listRef.current) return;
-    const g = window.getComputedStyle(listRef.current).gap;
-    const parsed = parseFloat(g);
-    if (!Number.isNaN(parsed)) setComputedGap(parsed);
-  }, [gap]);
+  let t5;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      if (!listRef.current) {
+        return;
+      }
+      const g = window.getComputedStyle(listRef.current).gap;
+      const parsed = parseFloat(g);
+      if (!Number.isNaN(parsed)) {
+        setComputedGap(parsed);
+      }
+    };
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  let t6;
+  if ($[3] !== gap) {
+    t6 = [gap];
+    $[3] = gap;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  useIsomorphicLayoutEffect(t5, t6);
   const moreMenuRef = useRef(null);
   const moreMenuBtnRef = useRef(null);
   const containerRef = React.useRef(null);
-  useResizeObserver(resizeObserverEntries => {
-    var _moreMenuRef$current$, _moreMenuRef$current;
-    const navWidth = resizeObserverEntries[0].contentRect.width;
-    const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
-    const hasActiveMenu = menuItemIds.size > 0;
-    if (navWidth > 0) {
-      const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
-      if (newMenuItemIds) setMenuItemIds(newMenuItemIds);
-    }
-  }, navRef);
-  const isVisibleChild = useCallback(id_1 => {
-    return !menuItemIds.has(id_1);
-  }, [menuItemIds]);
+  let t7;
+  if ($[5] !== childRegistry || $[6] !== computedGap || $[7] !== menuItemIds.size) {
+    t7 = resizeObserverEntries => {
+      var _moreMenuRef$current$, _moreMenuRef$current;
+      const navWidth = resizeObserverEntries[0].contentRect.width;
+      const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
+      const hasActiveMenu = menuItemIds.size > 0;
+      if (navWidth > 0) {
+        const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
+        if (newMenuItemIds) {
+          setMenuItemIds(newMenuItemIds);
+        }
+      }
+    };
+    $[5] = childRegistry;
+    $[6] = computedGap;
+    $[7] = menuItemIds.size;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  useResizeObserver(t7, navRef);
+  let t8;
+  if ($[9] !== menuItemIds) {
+    t8 = id_1 => !menuItemIds.has(id_1);
+    $[9] = menuItemIds;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  const isVisibleChild = t8;
   const [isWidgetOpen, setIsWidgetOpen] = useState(false);
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false);
-  }, [setIsWidgetOpen]);
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    var _moreMenuBtnRef$curre;
-    (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
-  }, []);
-  useOnEscapePress(event => {
-    if (isWidgetOpen) {
-      event.preventDefault();
-      closeOverlay();
-      focusOnMoreMenuBtn();
-    }
-  }, [isWidgetOpen]);
-  useOnOutsideClick({
-    onClickOutside: closeOverlay,
-    containerRef,
-    ignoreClickRefs: [moreMenuBtnRef]
-  });
-  useFocusZone({
-    containerRef: listRef,
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusOutBehavior: 'wrap'
-  });
-  const groupedItems = React.useMemo(() => {
-    const groupedItemsMap = new Map();
+  let t9;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => {
+      setIsWidgetOpen(false);
+    };
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const closeOverlay = t9;
+  let t10;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => {
+      var _moreMenuBtnRef$curre;
+      (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
+    };
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  const focusOnMoreMenuBtn = t10;
+  let t11;
+  let t12;
+  if ($[13] !== isWidgetOpen) {
+    t11 = event => {
+      if (isWidgetOpen) {
+        event.preventDefault();
+        closeOverlay();
+        focusOnMoreMenuBtn();
+      }
+    };
+    t12 = [isWidgetOpen];
+    $[13] = isWidgetOpen;
+    $[14] = t11;
+    $[15] = t12;
+  } else {
+    t11 = $[14];
+    t12 = $[15];
+  }
+  useOnEscapePress(t11, t12);
+  let t13;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      onClickOutside: closeOverlay,
+      containerRef,
+      ignoreClickRefs: [moreMenuBtnRef]
+    };
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  useOnOutsideClick(t13);
+  let t14;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      containerRef: listRef,
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: "wrap"
+    };
+    $[17] = t14;
+  } else {
+    t14 = $[17];
+  }
+  useFocusZone(t14);
+  let groupedItemsMap;
+  if ($[18] !== childRegistry) {
+    groupedItemsMap = new Map();
     for (const [key, childProps_0] of childRegistry) {
-      if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === 'action' && childProps_0.groupId) {
+      if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === "action" && childProps_0.groupId) {
         const existingGroup = groupedItemsMap.get(childProps_0.groupId) || [];
         existingGroup.push([key, childProps_0]);
         groupedItemsMap.set(childProps_0.groupId, existingGroup);
       }
     }
-    return groupedItemsMap;
-  }, [childRegistry]);
-  return /*#__PURE__*/jsx(ActionBarContext.Provider, {
-    value: {
+    $[18] = childRegistry;
+    $[19] = groupedItemsMap;
+  } else {
+    groupedItemsMap = $[19];
+  }
+  const groupedItems = groupedItemsMap;
+  let t15;
+  if ($[20] !== isVisibleChild || $[21] !== size) {
+    t15 = {
       size,
       registerChild,
       unregisterChild,
       isVisibleChild
-    },
-    children: /*#__PURE__*/jsx("div", {
+    };
+    $[20] = isVisibleChild;
+    $[21] = size;
+    $[22] = t15;
+  } else {
+    t15 = $[22];
+  }
+  let t16;
+  if ($[23] !== className) {
+    t16 = clsx(className, styles.Nav);
+    $[23] = className;
+    $[24] = t16;
+  } else {
+    t16 = $[24];
+  }
+  let t17;
+  if ($[25] !== ariaLabel || $[26] !== childRegistry || $[27] !== groupedItems || $[28] !== menuItemIds) {
+    t17 = menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
+      children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
+        children: /*#__PURE__*/jsx(IconButton, {
+          variant: "invisible",
+          "aria-label": `More ${ariaLabel} items`,
+          icon: KebabHorizontalIcon
+        })
+      }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+        children: /*#__PURE__*/jsx(ActionList, {
+          children: Array.from(menuItemIds).map(id_2 => {
+            const menuItem = childRegistry.get(id_2);
+            if (!menuItem) {
+              return null;
+            }
+            if (menuItem.type === "divider") {
+              return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
+            } else {
+              if (menuItem.type === "action") {
+                const {
+                  onClick,
+                  icon: Icon,
+                  label,
+                  disabled
+                } = menuItem;
+                return /*#__PURE__*/jsxs(ActionList.Item, {
+                  onClick: event_0 => {
+                    closeOverlay();
+                    focusOnMoreMenuBtn();
+                    typeof onClick === "function" && onClick(event_0);
+                  },
+                  disabled: disabled,
+                  children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                    children: /*#__PURE__*/jsx(Icon, {})
+                  }), label]
+                }, label);
+              }
+            }
+            if (menuItem.type === "menu") {
+              const menuItems = menuItem.items;
+              const {
+                icon: Icon_0,
+                label: label_0
+              } = 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, {
+                  children: /*#__PURE__*/jsx(ActionList, {
+                    children: menuItems.map(_temp3)
+                  })
+                })]
+              }, id_2);
+            }
+            const groupedMenuItems = groupedItems.get(id_2) || [];
+            if (menuItem.type === "group") {
+              return /*#__PURE__*/jsx(React.Fragment, {
+                children: groupedMenuItems.map(t18 => {
+                  const [key_0, childProps_1] = t18;
+                  if (childProps_1.type === "action") {
+                    const {
+                      onClick: onClick_0,
+                      icon: Icon_1,
+                      label: label_1,
+                      disabled: disabled_0
+                    } = childProps_1;
+                    return /*#__PURE__*/jsxs(ActionList.Item, {
+                      onSelect: event_1 => {
+                        closeOverlay();
+                        focusOnMoreMenuBtn();
+                        typeof onClick_0 === "function" && onClick_0(event_1);
+                      },
+                      disabled: disabled_0,
+                      children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                        children: /*#__PURE__*/jsx(Icon_1, {})
+                      }), label_1]
+                    }, key_0);
+                  }
+                  return null;
+                })
+              }, id_2);
+            }
+          })
+        })
+      })]
+    });
+    $[25] = ariaLabel;
+    $[26] = childRegistry;
+    $[27] = groupedItems;
+    $[28] = menuItemIds;
+    $[29] = t17;
+  } else {
+    t17 = $[29];
+  }
+  let t18;
+  if ($[30] !== ariaLabel || $[31] !== ariaLabelledBy || $[32] !== children || $[33] !== gap || $[34] !== t17) {
+    t18 = /*#__PURE__*/jsxs("div", {
+      ref: listRef,
+      role: "toolbar",
+      className: styles.List,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "data-gap": gap,
+      children: [children, t17]
+    });
+    $[30] = ariaLabel;
+    $[31] = ariaLabelledBy;
+    $[32] = children;
+    $[33] = gap;
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== flush || $[37] !== t16 || $[38] !== t18) {
+    t19 = /*#__PURE__*/jsx("div", {
       ref: navRef,
-      className: clsx(className, styles.Nav),
+      className: t16,
       "data-flush": flush,
-      children: /*#__PURE__*/jsxs("div", {
-        ref: listRef,
-        role: "toolbar",
-        className: styles.List,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "data-gap": gap,
-        children: [children, menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
-          children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
-            children: /*#__PURE__*/jsx(IconButton, {
-              variant: "invisible",
-              "aria-label": `More ${ariaLabel} items`,
-              icon: KebabHorizontalIcon
-            })
-          }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
-            children: /*#__PURE__*/jsx(ActionList, {
-              children: Array.from(menuItemIds).map(id_2 => {
-                const menuItem = childRegistry.get(id_2);
-                if (!menuItem) return null;
-                if (menuItem.type === 'divider') {
-                  return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
-                } else if (menuItem.type === 'action') {
-                  const {
-                    onClick,
-                    icon: Icon,
-                    label,
-                    disabled
-                  } = menuItem;
-                  return /*#__PURE__*/jsxs(ActionList.Item, {
-                    // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
-                    onClick: event_0 => {
-                      closeOverlay();
-                      focusOnMoreMenuBtn();
-                      typeof onClick === 'function' && onClick(event_0);
-                    },
-                    disabled: disabled,
-                    children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-                      children: /*#__PURE__*/jsx(Icon, {})
-                    }), label]
-                  }, label);
-                }
-
-                // Use the memoized map instead of filtering each time
-                const groupedMenuItems = groupedItems.get(id_2) || [];
-
-                // If we ever add additional types, this condition will be necessary
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (menuItem.type === 'group') {
-                  return /*#__PURE__*/jsx(React.Fragment, {
-                    children: groupedMenuItems.map(([key_0, childProps_1]) => {
-                      if (childProps_1.type === 'action') {
-                        const {
-                          onClick: onClick_0,
-                          icon: Icon_0,
-                          label: label_0,
-                          disabled: disabled_0
-                        } = childProps_1;
-                        return /*#__PURE__*/jsxs(ActionList.Item, {
-                          onSelect: event_1 => {
-                            closeOverlay();
-                            focusOnMoreMenuBtn();
-                            typeof onClick_0 === 'function' && onClick_0(event_1);
-                          },
-                          disabled: disabled_0,
-                          children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-                            children: /*#__PURE__*/jsx(Icon_0, {})
-                          }), label_0]
-                        }, key_0);
-                      }
-                      return null;
-                    })
-                  }, id_2);
-                }
-              })
-            })
-          })]
-        })]
-      })
-    })
-  });
+      children: t18
+    });
+    $[36] = flush;
+    $[37] = t16;
+    $[38] = t18;
+    $[39] = t19;
+  } else {
+    t19 = $[39];
+  }
+  let t20;
+  if ($[40] !== t15 || $[41] !== t19) {
+    t20 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
+      value: t15,
+      children: t19
+    });
+    $[40] = t15;
+    $[41] = t19;
+    $[42] = t20;
+  } else {
+    t20 = $[42];
+  }
+  return t20;
 };
-ActionBar.displayName = "ActionBar";
 const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(28);
+  const $ = c(27);
   let disabled;
   let onClick;
   let props;
@@ -359,24 +581,22 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     return null;
   }
   let t5;
-  if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== id || $[25] !== props || $[26] !== size) {
+  if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== props || $[25] !== size) {
     t5 = /*#__PURE__*/jsx(IconButton, {
       "aria-disabled": disabled,
       ref: ref,
       size: size,
       onClick: clickHandler,
       ...props,
-      variant: "invisible",
-      "data-testid": id
+      variant: "invisible"
     });
     $[22] = clickHandler;
     $[23] = disabled;
-    $[24] = id;
-    $[25] = props;
-    $[26] = size;
-    $[27] = t5;
+    $[24] = props;
+    $[25] = size;
+    $[26] = t5;
   } else {
-    t5 = $[27];
+    t5 = $[26];
   }
   return t5;
 });
@@ -470,6 +690,150 @@ const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   }
   return t5;
 });
+const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(35);
+  let ariaLabel;
+  let icon;
+  let items;
+  let overflowIcon;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      "aria-label": ariaLabel,
+      icon,
+      overflowIcon,
+      items,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = ariaLabel;
+    $[2] = icon;
+    $[3] = items;
+    $[4] = overflowIcon;
+    $[5] = props;
+  } else {
+    ariaLabel = $[1];
+    icon = $[2];
+    items = $[3];
+    overflowIcon = $[4];
+    props = $[5];
+  }
+  const backupRef = useRef(null);
+  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const id = useId();
+  const {
+    registerChild,
+    unregisterChild,
+    isVisibleChild
+  } = React.useContext(ActionBarContext);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const widthRef = useRef();
+  let t1;
+  if ($[6] !== ariaLabel || $[7] !== icon || $[8] !== id || $[9] !== items || $[10] !== overflowIcon || $[11] !== ref || $[12] !== registerChild || $[13] !== unregisterChild) {
+    t1 = () => {
+      var _ref$current3;
+      const width = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getBoundingClientRect().width;
+      if (width) {
+        widthRef.current = width;
+      }
+      if (!widthRef.current) {
+        return;
+      }
+      registerChild(id, {
+        type: "menu",
+        width: widthRef.current,
+        label: ariaLabel,
+        icon: overflowIcon ? overflowIcon : icon,
+        items
+      });
+      return () => {
+        unregisterChild(id);
+      };
+    };
+    $[6] = ariaLabel;
+    $[7] = icon;
+    $[8] = id;
+    $[9] = items;
+    $[10] = overflowIcon;
+    $[11] = ref;
+    $[12] = registerChild;
+    $[13] = unregisterChild;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  let t2;
+  if ($[15] !== ariaLabel || $[16] !== icon || $[17] !== items || $[18] !== overflowIcon || $[19] !== registerChild || $[20] !== unregisterChild) {
+    t2 = [registerChild, unregisterChild, ariaLabel, overflowIcon, icon, items];
+    $[15] = ariaLabel;
+    $[16] = icon;
+    $[17] = items;
+    $[18] = overflowIcon;
+    $[19] = registerChild;
+    $[20] = unregisterChild;
+    $[21] = t2;
+  } else {
+    t2 = $[21];
+  }
+  useIsomorphicLayoutEffect(t1, t2);
+  if (!isVisibleChild(id)) {
+    return null;
+  }
+  let t3;
+  if ($[22] !== ariaLabel || $[23] !== icon || $[24] !== props) {
+    t3 = /*#__PURE__*/jsx(ActionMenu.Anchor, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        variant: "invisible",
+        "aria-label": ariaLabel,
+        icon: icon,
+        ...props
+      })
+    });
+    $[22] = ariaLabel;
+    $[23] = icon;
+    $[24] = props;
+    $[25] = t3;
+  } else {
+    t3 = $[25];
+  }
+  let t4;
+  if ($[26] !== items) {
+    t4 = items.map(_temp4);
+    $[26] = items;
+    $[27] = t4;
+  } else {
+    t4 = $[27];
+  }
+  let t5;
+  if ($[28] !== t4) {
+    t5 = /*#__PURE__*/jsx(ActionMenu.Overlay, {
+      children: /*#__PURE__*/jsx(ActionList, {
+        children: t4
+      })
+    });
+    $[28] = t4;
+    $[29] = t5;
+  } else {
+    t5 = $[29];
+  }
+  let t6;
+  if ($[30] !== menuOpen || $[31] !== ref || $[32] !== t3 || $[33] !== t5) {
+    t6 = /*#__PURE__*/jsxs(ActionMenu, {
+      anchorRef: ref,
+      open: menuOpen,
+      onOpenChange: setMenuOpen,
+      children: [t3, t5]
+    });
+    $[30] = menuOpen;
+    $[31] = ref;
+    $[32] = t3;
+    $[33] = t5;
+    $[34] = t6;
+  } else {
+    t6 = $[34];
+  }
+  return t6;
+});
 const VerticalDivider = () => {
   const $ = c(8);
   const ref = useRef(null);
@@ -483,8 +847,8 @@ const VerticalDivider = () => {
   let t0;
   if ($[0] !== id || $[1] !== registerChild || $[2] !== unregisterChild) {
     t0 = () => {
-      var _ref$current3;
-      const width = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getBoundingClientRect().width;
+      var _ref$current4;
+      const width = (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.getBoundingClientRect().width;
       if (width) {
         widthRef.current = width;
       }
@@ -531,5 +895,17 @@ const VerticalDivider = () => {
   }
   return t2;
 };
+function _temp() {
+  return new Map();
+}
+function _temp2() {
+  return new Set();
+}
+function _temp3(item, index) {
+  return renderMenuItem(item, index);
+}
+function _temp4(item, index) {
+  return renderMenuItem(item, index);
+}
 
-export { ActionBar, ActionBarGroup, ActionBarIconButton, VerticalDivider };
+export { ActionBar, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };