@primer/react 38.21.1 → 38.22.0-rc.984eec337

package/dist/ActionBar/ActionBar.js

@@ -1,29 +1,19 @@
 import { c } from 'react-compiler-runtime';
-import React, { useRef, useState, forwardRef, useMemo, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
-import { useResizeObserver } from '../hooks/useResizeObserver.js';
 import { IconButton } from '../Button/IconButton.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
 import { createDescendantRegistry } from '../utils/descendant-registry.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
-const ACTIONBAR_ITEM_GAP = 8;
-
-/**
- * Registry of descendants to render in the list or menu. To preserve insertion order across updates, children are
- * set to `null` when unregistered rather than fully dropped from the map.
- */
-
 const ActionBarContext = /*#__PURE__*/React.createContext({
   size: 'medium',
-  isVisibleChild: () => true,
   groupId: undefined
 });
 
@@ -31,23 +21,8 @@ const ActionBarContext = /*#__PURE__*/React.createContext({
 small (28px), medium (32px), large (40px)
 */
 
-const MORE_BTN_WIDTH = 32;
 const ActionBarItemsRegistry = createDescendantRegistry();
-const calculatePossibleItems = (registryEntries, navWidth, gap, moreMenuWidth = 0) => {
-  const widthToFit = navWidth - moreMenuWidth;
-  let breakpoint = registryEntries.length; // assume all items will fit
-  let sumsOfChildWidth = 0;
-  for (const [index, [, child]] of registryEntries.entries()) {
-    sumsOfChildWidth += index > 0 ? child.width + gap : child.width;
-    if (sumsOfChildWidth > widthToFit) {
-      breakpoint = index;
-      break;
-    } else {
-      continue;
-    }
-  }
-  return breakpoint;
-};
+const FOCUSABLE_ITEM_SELECTOR = ':is(button, a, input, [tabindex]):not(:disabled):not([data-overflowing]):not([data-more-button-inactive])';
 const renderMenuItem = (item, index) => {
   if (item.type === 'divider') {
     return /*#__PURE__*/jsx(ActionList.Divider, {}, index);
@@ -96,328 +71,256 @@ const renderMenuItem = (item, index) => {
   }, label);
 };
 renderMenuItem.displayName = "renderMenuItem";
-const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap) => {
-  var _childRegistry$entrie;
-  const registryEntries = Array.from((_childRegistry$entrie = childRegistry === null || childRegistry === void 0 ? void 0 : childRegistry.entries()) !== null && _childRegistry$entrie !== void 0 ? _childRegistry$entrie : []).filter(entry => entry[1] !== null && (entry[1].type !== 'action' || entry[1].groupId === undefined));
-  if (registryEntries.length === 0) return new Set();
-  const numberOfItemsPossible = calculatePossibleItems(registryEntries, navWidth, gap);
-  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(registryEntries, navWidth, gap, moreMenuWidth || MORE_BTN_WIDTH);
-  const menuItems = new Set();
-
-  // First, we check if we can fit all the items with their icons
-  if (registryEntries.length >= numberOfItemsPossible) {
-    /* Below is an accessibility requirement. Never show only one item in the overflow menu.
-     * If there is only one item left to display in the overflow menu according to the calculation,
-     * we need to pull another item from the list into the overflow menu.
-     */
-    const numberOfItemsInMenu = registryEntries.length - numberOfItemsPossibleWithMoreMenu;
-    const numberOfListItems = numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu;
-    for (const [index, [id, child]] of registryEntries.entries()) {
-      if (index < numberOfListItems) {
-        continue;
-        //if the last item is a divider
-      } else if (child.type === 'divider') {
-        if (index === numberOfListItems - 1 || index === numberOfListItems) {
-          continue;
-        } else {
-          menuItems.add(id);
-        }
-      } else {
-        menuItems.add(id);
-      }
-    }
-    return menuItems;
-  } else if (numberOfItemsPossible > registryEntries.length && hasActiveMenu) {
-    /* If the items fit in the list and there are items in the overflow menu, we need to move them back to the list */
-    return new Set();
-  }
-};
-const ActionBar = props => {
-  const $ = c(38);
+const ActionBar = t0 => {
+  const $ = c(40);
   const {
-    size: t0,
+    size: t1,
     children,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    flush: t1,
+    flush: t2,
     className,
-    gap: t2
-  } = props;
-  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);
+    gap: t3
+  } = t0;
+  const size = t1 === undefined ? "medium" : t1;
+  const flush = t2 === undefined ? false : t2;
+  const gap = t3 === undefined ? "condensed" : t3;
   const [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState();
-  const [menuItemIds, setMenuItemIds] = useState(_temp);
-  const navRef = useRef(null);
-  let t3;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
-      if (!listRef.current) {
-        return;
-      }
-      const g = window.getComputedStyle(listRef.current).gap;
-      const parsed = parseFloat(g);
-      if (!Number.isNaN(parsed)) {
-        setComputedGap(parsed);
-      }
-    };
-    $[0] = t3;
-  } else {
-    t3 = $[0];
-  }
   let t4;
-  if ($[1] !== gap) {
-    t4 = [gap];
-    $[1] = gap;
-    $[2] = t4;
+  if ($[0] !== childRegistry) {
+    t4 = childRegistry && Array.from(childRegistry.entries()).filter(_temp);
+    $[0] = childRegistry;
+    $[1] = t4;
   } else {
-    t4 = $[2];
+    t4 = $[1];
   }
-  useIsomorphicLayoutEffect(t3, t4);
-  const moreMenuRef = useRef(null);
+  const overflowItems = t4;
   let t5;
-  if ($[3] !== childRegistry || $[4] !== computedGap || $[5] !== menuItemIds.size) {
-    t5 = 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);
-        }
-      }
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: "wrap",
+      focusableElementFilter: _temp2
     };
-    $[3] = childRegistry;
-    $[4] = computedGap;
-    $[5] = menuItemIds.size;
-    $[6] = t5;
+    $[2] = t5;
   } else {
-    t5 = $[6];
+    t5 = $[2];
   }
-  useResizeObserver(t5, navRef);
   let t6;
-  if ($[7] !== menuItemIds) {
-    t6 = id => !menuItemIds.has(id);
-    $[7] = menuItemIds;
-    $[8] = t6;
+  if ($[3] !== overflowItems) {
+    t6 = [overflowItems];
+    $[3] = overflowItems;
+    $[4] = t6;
   } else {
-    t6 = $[8];
+    t6 = $[4];
   }
-  const isVisibleChild = t6;
+  const {
+    containerRef
+  } = useFocusZone(t5, t6);
   let t7;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[5] !== size) {
     t7 = {
-      containerRef: listRef,
-      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-      focusOutBehavior: "wrap"
+      size
     };
-    $[9] = t7;
-  } else {
-    t7 = $[9];
-  }
-  useFocusZone(t7);
-  let groupedItemsMap;
-  if ($[10] !== childRegistry) {
-    groupedItemsMap = new Map();
-    for (const [key, childProps] of childRegistry !== null && childRegistry !== void 0 ? childRegistry : []) {
-      if (childProps.type === "action" && childProps.groupId) {
-        const existingGroup = groupedItemsMap.get(childProps.groupId) || [];
-        existingGroup.push([key, childProps]);
-        groupedItemsMap.set(childProps.groupId, existingGroup);
-      }
-    }
-    $[10] = childRegistry;
-    $[11] = groupedItemsMap;
+    $[5] = size;
+    $[6] = t7;
   } else {
-    groupedItemsMap = $[11];
+    t7 = $[6];
   }
-  const groupedItems = groupedItemsMap;
   let t8;
-  if ($[12] !== isVisibleChild || $[13] !== size) {
-    t8 = {
-      size,
-      isVisibleChild
-    };
-    $[12] = isVisibleChild;
+  if ($[7] !== className) {
+    t8 = clsx(className, styles.Nav);
+    $[7] = className;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  const t9 = containerRef;
+  const t10 = overflowItems ? overflowItems.length > 0 : undefined;
+  let t11;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /*#__PURE__*/jsx("div", {});
+    $[9] = t11;
+  } else {
+    t11 = $[9];
+  }
+  let t12;
+  if ($[10] !== children || $[11] !== setChildRegistry) {
+    t12 = /*#__PURE__*/jsxs("div", {
+      className: styles.OverflowContainer,
+      children: [t11, /*#__PURE__*/jsx(ActionBarItemsRegistry.Provider, {
+        setRegistry: setChildRegistry,
+        children: children
+      })]
+    });
+    $[10] = children;
+    $[11] = setChildRegistry;
+    $[12] = t12;
+  } else {
+    t12 = $[12];
+  }
+  const t13 = `More ${ariaLabel} items ${overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length}`;
+  const t14 = overflowItems !== null && overflowItems !== void 0 && overflowItems.length ? undefined : true;
+  let t15;
+  if ($[13] !== size || $[14] !== t13 || $[15] !== t14) {
+    t15 = /*#__PURE__*/jsx(ActionMenu.Anchor, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        variant: "invisible",
+        "aria-label": t13,
+        icon: KebabHorizontalIcon,
+        className: styles.MoreButton,
+        "data-more-button-inactive": t14,
+        size: size
+      })
+    });
     $[13] = size;
-    $[14] = t8;
+    $[14] = t13;
+    $[15] = t14;
+    $[16] = t15;
   } else {
-    t8 = $[14];
+    t15 = $[16];
   }
-  let t9;
-  if ($[15] !== className) {
-    t9 = clsx(className, styles.Nav);
-    $[15] = className;
-    $[16] = t9;
+  let t16;
+  if ($[17] !== overflowItems) {
+    t16 = overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.map(_temp4);
+    $[17] = overflowItems;
+    $[18] = t16;
   } else {
-    t9 = $[16];
+    t16 = $[18];
   }
-  let t10;
-  if ($[17] !== children || $[18] !== setChildRegistry) {
-    t10 = /*#__PURE__*/jsx(ActionBarItemsRegistry.Provider, {
-      setRegistry: setChildRegistry,
-      children: children
+  let t17;
+  if ($[19] !== t16) {
+    t17 = /*#__PURE__*/jsx(ActionMenu.Overlay, {
+      children: /*#__PURE__*/jsx(ActionList, {
+        children: t16
+      })
     });
-    $[17] = children;
-    $[18] = setChildRegistry;
-    $[19] = t10;
+    $[19] = t16;
+    $[20] = t17;
   } else {
-    t10 = $[19];
+    t17 = $[20];
   }
-  let t11;
-  if ($[20] !== ariaLabel || $[21] !== childRegistry || $[22] !== groupedItems || $[23] !== menuItemIds) {
-    t11 = 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_0 => {
-            const menuItem = childRegistry === null || childRegistry === void 0 ? void 0 : childRegistry.get(id_0);
-            if (!menuItem) {
-              return null;
-            }
-            if (menuItem.type === "divider") {
-              return /*#__PURE__*/jsx(ActionList.Divider, {}, id_0);
-            } else {
-              if (menuItem.type === "action") {
-                const {
-                  onClick,
-                  icon: Icon,
-                  label,
-                  disabled
-                } = menuItem;
-                return /*#__PURE__*/jsxs(ActionList.Item, {
-                  onSelect: event => {
-                    typeof onClick === "function" && onClick(event);
-                  },
-                  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,
-                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(_temp2)
-                  })
-                })]
-              }, id_0);
-            }
-            const groupedMenuItems = groupedItems.get(id_0) || [];
-            if (menuItem.type === "group") {
-              return /*#__PURE__*/jsx(React.Fragment, {
-                children: groupedMenuItems.map(_temp3)
-              }, id_0);
-            }
-          })
-        })
-      })]
+  let t18;
+  if ($[21] !== t15 || $[22] !== t17) {
+    t18 = /*#__PURE__*/jsxs(ActionMenu, {
+      children: [t15, t17]
     });
-    $[20] = ariaLabel;
-    $[21] = childRegistry;
-    $[22] = groupedItems;
-    $[23] = menuItemIds;
-    $[24] = t11;
+    $[21] = t15;
+    $[22] = t17;
+    $[23] = t18;
   } else {
-    t11 = $[24];
+    t18 = $[23];
   }
-  let t12;
-  if ($[25] !== ariaLabel || $[26] !== ariaLabelledBy || $[27] !== gap || $[28] !== t10 || $[29] !== t11) {
-    t12 = /*#__PURE__*/jsxs("div", {
-      ref: listRef,
+  let t19;
+  if ($[24] !== ariaLabel || $[25] !== ariaLabelledBy || $[26] !== gap || $[27] !== size || $[28] !== t10 || $[29] !== t12 || $[30] !== t18 || $[31] !== t9) {
+    t19 = /*#__PURE__*/jsxs("div", {
+      ref: t9,
       role: "toolbar",
       className: styles.List,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "data-gap": gap,
-      children: [t10, t11]
+      "data-size": size,
+      "data-has-overflow": t10,
+      children: [t12, t18]
     });
-    $[25] = ariaLabel;
-    $[26] = ariaLabelledBy;
-    $[27] = gap;
+    $[24] = ariaLabel;
+    $[25] = ariaLabelledBy;
+    $[26] = gap;
+    $[27] = size;
     $[28] = t10;
-    $[29] = t11;
-    $[30] = t12;
+    $[29] = t12;
+    $[30] = t18;
+    $[31] = t9;
+    $[32] = t19;
   } else {
-    t12 = $[30];
+    t19 = $[32];
   }
-  let t13;
-  if ($[31] !== flush || $[32] !== t12 || $[33] !== t9) {
-    t13 = /*#__PURE__*/jsx("div", {
-      ref: navRef,
-      className: t9,
+  let t20;
+  if ($[33] !== flush || $[34] !== t19 || $[35] !== t8) {
+    t20 = /*#__PURE__*/jsx("div", {
+      className: t8,
       "data-component": "ActionBar",
       "data-flush": flush,
-      children: t12
+      children: t19
     });
-    $[31] = flush;
-    $[32] = t12;
-    $[33] = t9;
-    $[34] = t13;
+    $[33] = flush;
+    $[34] = t19;
+    $[35] = t8;
+    $[36] = t20;
   } else {
-    t13 = $[34];
+    t20 = $[36];
   }
-  let t14;
-  if ($[35] !== t13 || $[36] !== t8) {
-    t14 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
-      value: t8,
-      children: t13
+  let t21;
+  if ($[37] !== t20 || $[38] !== t7) {
+    t21 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
+      value: t7,
+      children: t20
     });
-    $[35] = t13;
-    $[36] = t8;
-    $[37] = t14;
+    $[37] = t20;
+    $[38] = t7;
+    $[39] = t21;
   } else {
-    t14 = $[37];
+    t21 = $[39];
   }
-  return t14;
+  return t21;
 };
-function useWidth(ref) {
-  const $ = c(3);
-  const [width, setWidth] = useState(-1);
+function useActionBarItem(ref, registryProps) {
+  var _useContext;
+  const $ = c(8);
+  const isGroupOverflowing = (_useContext = useContext(ActionBarGroupContext)) === null || _useContext === void 0 ? void 0 : _useContext.isOverflowing;
+  const isInGroup = isGroupOverflowing !== undefined;
   let t0;
+  if ($[0] !== isInGroup || $[1] !== ref) {
+    t0 = onChange => {
+      if (isInGroup) {
+        return _temp5;
+      }
+      const observer = new IntersectionObserver(() => onChange(), {
+        threshold: 1
+      });
+      if (ref.current) {
+        observer.observe(ref.current);
+      }
+      return () => observer.disconnect();
+    };
+    $[0] = isInGroup;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const subscribeIntersectionObserver = t0;
   let t1;
-  if ($[0] !== ref) {
-    t0 = () => {
-      var _ref$current$getBound, _ref$current;
-      return setWidth((_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().width) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : -1);
+  if ($[3] !== ref) {
+    t1 = () => ref.current ? ref.current.offsetTop > 0 : false;
+    $[3] = ref;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const isItemOverflowing = useSyncExternalStore(subscribeIntersectionObserver, t1, _temp6);
+  const isOverflowing = isGroupOverflowing || isItemOverflowing;
+  ActionBarItemsRegistry.useRegisterDescendant(isOverflowing ? registryProps : null);
+  const t2 = isOverflowing ? "" : undefined;
+  let t3;
+  if ($[5] !== isOverflowing || $[6] !== t2) {
+    t3 = {
+      isOverflowing,
+      dataOverflowingAttr: t2
     };
-    t1 = [ref];
-    $[0] = ref;
-    $[1] = t0;
-    $[2] = t1;
+    $[5] = isOverflowing;
+    $[6] = t2;
+    $[7] = t3;
   } else {
-    t0 = $[1];
-    t1 = $[2];
+    t3 = $[7];
   }
-  useIsomorphicLayoutEffect(t0, t1);
-  return width;
+  return t3;
+}
+function _temp6() {
+  return false;
 }
+function _temp5() {}
 const ActionBarIconButton = /*#__PURE__*/forwardRef(({
   disabled,
   onClick,
@@ -426,44 +329,36 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   useRefObjectAsForwardedRef(forwardedRef, ref);
   const {
-    size,
-    isVisibleChild
+    size
   } = React.useContext(ActionBarContext);
-  const {
-    groupId
-  } = React.useContext(ActionBarGroupContext);
-  const width = useWidth(ref);
   const {
     ['aria-label']: ariaLabel,
     icon
   } = props;
-  const registryProps = useMemo(() => ({
+  const {
+    dataOverflowingAttr
+  } = useActionBarItem(ref, useMemo(() => ({
     type: 'action',
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '',
     icon,
     disabled: !!disabled,
-    onClick: onClick,
-    width,
-    groupId: groupId !== null && groupId !== void 0 ? groupId : undefined
-  }), [ariaLabel, icon, disabled, onClick, groupId, width]);
-  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
+    onClick: onClick
+  }), [ariaLabel, icon, disabled, onClick]));
   const clickHandler = useCallback(event => {
     if (disabled) return;
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [disabled, onClick]);
-  if (!isVisibleChild(id) || groupId && !isVisibleChild(groupId)) return null;
   return /*#__PURE__*/jsx(IconButton, {
     "aria-disabled": disabled,
     ref: ref,
     size: size,
     onClick: clickHandler,
     ...props,
-    variant: "invisible"
+    variant: "invisible",
+    "data-overflowing": dataOverflowingAttr
   });
 });
-const ActionBarGroupContext = /*#__PURE__*/React.createContext({
-  groupId: null
-});
+const ActionBarGroupContext = /*#__PURE__*/React.createContext(null);
 const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(10);
   const {
@@ -471,39 +366,40 @@ const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   } = t0;
   const backupRef = useRef(null);
   const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
-  const width = useWidth(ref);
   let t1;
-  if ($[0] !== width) {
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = {
-      type: "group",
-      width
+      type: "group"
     };
-    $[0] = width;
-    $[1] = t1;
+    $[0] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[0];
   }
-  const registryProps = t1;
-  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
+  const {
+    dataOverflowingAttr,
+    isOverflowing
+  } = useActionBarItem(ref, t1);
   let t2;
-  if ($[2] !== id) {
+  if ($[1] !== isOverflowing) {
     t2 = {
-      groupId: id
+      isOverflowing
     };
-    $[2] = id;
-    $[3] = t2;
+    $[1] = isOverflowing;
+    $[2] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[2];
   }
   let t3;
-  if ($[4] !== children || $[5] !== ref) {
+  if ($[3] !== children || $[4] !== dataOverflowingAttr || $[5] !== ref) {
     t3 = /*#__PURE__*/jsx("div", {
       className: styles.Group,
       "data-component": "ActionBar.Group",
       ref: ref,
+      "data-overflowing": dataOverflowingAttr,
       children: children
     });
-    $[4] = children;
+    $[3] = children;
+    $[4] = dataOverflowingAttr;
     $[5] = ref;
     $[6] = t3;
   } else {
@@ -557,17 +453,12 @@ const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   }
   const backupRef = useRef(null);
   const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
-  const {
-    isVisibleChild
-  } = React.useContext(ActionBarContext);
   const [menuOpen, setMenuOpen] = useState(false);
-  const width = useWidth(ref);
   const t1 = overflowIcon ? overflowIcon : icon;
   let t2;
-  if ($[7] !== ariaLabel || $[8] !== items || $[9] !== returnFocusRef || $[10] !== t1 || $[11] !== width) {
+  if ($[7] !== ariaLabel || $[8] !== items || $[9] !== returnFocusRef || $[10] !== t1) {
     t2 = {
       type: "menu",
-      width,
       label: ariaLabel,
       icon: t1,
       returnFocusRef,
@@ -577,28 +468,27 @@ const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[8] = items;
     $[9] = returnFocusRef;
     $[10] = t1;
-    $[11] = width;
-    $[12] = t2;
+    $[11] = t2;
   } else {
-    t2 = $[12];
-  }
-  const registryProps = t2;
-  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
-  if (!isVisibleChild(id)) {
-    return null;
+    t2 = $[11];
   }
+  const {
+    dataOverflowingAttr
+  } = useActionBarItem(ref, t2);
   let t3;
-  if ($[13] !== ariaLabel || $[14] !== icon || $[15] !== props) {
+  if ($[12] !== ariaLabel || $[13] !== dataOverflowingAttr || $[14] !== icon || $[15] !== props) {
     t3 = /*#__PURE__*/jsx(ActionMenu.Anchor, {
       children: /*#__PURE__*/jsx(IconButton, {
         variant: "invisible",
         "aria-label": ariaLabel,
         icon: icon,
         ...props,
+        "data-overflowing": dataOverflowingAttr,
         "data-component": "ActionBar.Menu.IconButton"
       })
     });
-    $[13] = ariaLabel;
+    $[12] = ariaLabel;
+    $[13] = dataOverflowingAttr;
     $[14] = icon;
     $[15] = props;
     $[16] = t3;
@@ -617,7 +507,7 @@ const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   }
   let t5;
   if ($[19] !== items) {
-    t5 = items.map(_temp4);
+    t5 = items.map(_temp7);
     $[19] = items;
     $[20] = t5;
   } else {
@@ -666,68 +556,91 @@ const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
 const VerticalDivider = () => {
   const $ = c(3);
   const ref = useRef(null);
-  const {
-    isVisibleChild
-  } = React.useContext(ActionBarContext);
-  const width = useWidth(ref);
   let t0;
-  if ($[0] !== width) {
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = {
-      type: "divider",
-      width
+      type: "divider"
     };
-    $[0] = width;
-    $[1] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[1];
-  }
-  const registryProps = t0;
-  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
-  if (!isVisibleChild(id)) {
-    return null;
+    t0 = $[0];
   }
+  const {
+    dataOverflowingAttr
+  } = useActionBarItem(ref, t0);
   let t1;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[1] !== dataOverflowingAttr) {
     t1 = /*#__PURE__*/jsx("div", {
       ref: ref,
       "data-component": "ActionBar.VerticalDivider",
       "aria-hidden": "true",
-      className: styles.Divider
+      className: styles.Divider,
+      "data-overflowing": dataOverflowingAttr
     });
+    $[1] = dataOverflowingAttr;
     $[2] = t1;
   } else {
     t1 = $[2];
   }
   return t1;
 };
-function _temp() {
-  return new Set();
+function _temp(entry) {
+  return entry[1] !== null;
 }
-function _temp2(item, index) {
+function _temp2(element) {
+  return element.matches(FOCUSABLE_ITEM_SELECTOR);
+}
+function _temp3(item, index) {
   return renderMenuItem(item, index);
 }
-function _temp3(t0) {
-  const [key_0, childProps_0] = t0;
-  if (childProps_0.type === "action") {
+function _temp4(t0) {
+  const [id, menuItem] = t0;
+  if (menuItem.type === "divider") {
+    return /*#__PURE__*/jsx(ActionList.Divider, {}, id);
+  }
+  if (menuItem.type === "action") {
     const {
-      onClick: onClick_0,
-      icon: Icon_1,
-      label: label_1,
-      disabled: disabled_0
-    } = childProps_0;
+      onClick,
+      icon: Icon,
+      label,
+      disabled
+    } = menuItem;
     return /*#__PURE__*/jsxs(ActionList.Item, {
-      onSelect: event_0 => {
-        typeof onClick_0 === "function" && onClick_0(event_0);
+      onSelect: event => {
+        typeof onClick === "function" && onClick(event);
       },
-      disabled: disabled_0,
+      disabled: disabled,
       children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-        children: /*#__PURE__*/jsx(Icon_1, {})
-      }), label_1]
-    }, key_0);
+        children: /*#__PURE__*/jsx(Icon, {})
+      }), label]
+    }, label);
+  }
+  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);
   }
-  return null;
 }
-function _temp4(item, index) {
+function _temp7(item, index) {
   return renderMenuItem(item, index);
 }