@primer/react 38.22.0-rc.fa8383854 → 38.22.0

package/dist/ActionBar/ActionBar.js

@@ -1,19 +1,29 @@
 import { c } from 'react-compiler-runtime';
-import React, { forwardRef, useRef, useState, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
+import React, { useRef, useState, forwardRef, useMemo, useCallback } 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 { 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';
 
+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
 });
 
@@ -21,8 +31,23 @@ const ActionBarContext = /*#__PURE__*/React.createContext({
 small (28px), medium (32px), large (40px)
 */
 
+const MORE_BTN_WIDTH = 32;
 const ActionBarItemsRegistry = createDescendantRegistry();
-const FOCUSABLE_ITEM_SELECTOR = ':is(button, a, input, [tabindex]):not(:disabled):not([data-overflowing]):not([data-more-button-inactive])';
+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 renderMenuItem = (item, index) => {
   if (item.type === 'divider') {
     return /*#__PURE__*/jsx(ActionList.Divider, {}, index);
@@ -71,256 +96,328 @@ const renderMenuItem = (item, index) => {
   }, label);
 };
 renderMenuItem.displayName = "renderMenuItem";
-const ActionBar = t0 => {
-  const $ = c(40);
+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 {
-    size: t1,
+    size: t0,
     children,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    flush: t2,
+    flush: t1,
     className,
-    gap: t3
-  } = t0;
-  const size = t1 === undefined ? "medium" : t1;
-  const flush = t2 === undefined ? false : t2;
-  const gap = t3 === undefined ? "condensed" : t3;
+    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);
   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 ($[0] !== childRegistry) {
-    t4 = childRegistry && Array.from(childRegistry.entries()).filter(_temp);
-    $[0] = childRegistry;
-    $[1] = t4;
+  if ($[1] !== gap) {
+    t4 = [gap];
+    $[1] = gap;
+    $[2] = t4;
   } else {
-    t4 = $[1];
+    t4 = $[2];
   }
-  const overflowItems = t4;
+  useIsomorphicLayoutEffect(t3, t4);
+  const moreMenuRef = useRef(null);
   let t5;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
-      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-      focusOutBehavior: "wrap",
-      focusableElementFilter: _temp2
+  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);
+        }
+      }
     };
-    $[2] = t5;
+    $[3] = childRegistry;
+    $[4] = computedGap;
+    $[5] = menuItemIds.size;
+    $[6] = t5;
   } else {
-    t5 = $[2];
+    t5 = $[6];
   }
+  useResizeObserver(t5, navRef);
   let t6;
-  if ($[3] !== overflowItems) {
-    t6 = [overflowItems];
-    $[3] = overflowItems;
-    $[4] = t6;
+  if ($[7] !== menuItemIds) {
+    t6 = id => !menuItemIds.has(id);
+    $[7] = menuItemIds;
+    $[8] = t6;
   } else {
-    t6 = $[4];
+    t6 = $[8];
   }
-  const {
-    containerRef
-  } = useFocusZone(t5, t6);
+  const isVisibleChild = t6;
   let t7;
-  if ($[5] !== size) {
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
     t7 = {
-      size
+      containerRef: listRef,
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: "wrap"
     };
-    $[5] = size;
-    $[6] = t7;
+    $[9] = t7;
   } else {
-    t7 = $[6];
-  }
-  let t8;
-  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;
+    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;
   } else {
-    t12 = $[12];
+    groupedItemsMap = $[11];
   }
-  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
-      })
-    });
+  const groupedItems = groupedItemsMap;
+  let t8;
+  if ($[12] !== isVisibleChild || $[13] !== size) {
+    t8 = {
+      size,
+      isVisibleChild
+    };
+    $[12] = isVisibleChild;
     $[13] = size;
-    $[14] = t13;
-    $[15] = t14;
-    $[16] = t15;
+    $[14] = t8;
   } else {
-    t15 = $[16];
+    t8 = $[14];
   }
-  let t16;
-  if ($[17] !== overflowItems) {
-    t16 = overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.map(_temp4);
-    $[17] = overflowItems;
-    $[18] = t16;
+  let t9;
+  if ($[15] !== className) {
+    t9 = clsx(className, styles.Nav);
+    $[15] = className;
+    $[16] = t9;
   } else {
-    t16 = $[18];
+    t9 = $[16];
   }
-  let t17;
-  if ($[19] !== t16) {
-    t17 = /*#__PURE__*/jsx(ActionMenu.Overlay, {
-      children: /*#__PURE__*/jsx(ActionList, {
-        children: t16
-      })
+  let t10;
+  if ($[17] !== children || $[18] !== setChildRegistry) {
+    t10 = /*#__PURE__*/jsx(ActionBarItemsRegistry.Provider, {
+      setRegistry: setChildRegistry,
+      children: children
     });
-    $[19] = t16;
-    $[20] = t17;
+    $[17] = children;
+    $[18] = setChildRegistry;
+    $[19] = t10;
   } else {
-    t17 = $[20];
+    t10 = $[19];
   }
-  let t18;
-  if ($[21] !== t15 || $[22] !== t17) {
-    t18 = /*#__PURE__*/jsxs(ActionMenu, {
-      children: [t15, t17]
+  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);
+            }
+          })
+        })
+      })]
     });
-    $[21] = t15;
-    $[22] = t17;
-    $[23] = t18;
+    $[20] = ariaLabel;
+    $[21] = childRegistry;
+    $[22] = groupedItems;
+    $[23] = menuItemIds;
+    $[24] = t11;
   } else {
-    t18 = $[23];
+    t11 = $[24];
   }
-  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,
+  let t12;
+  if ($[25] !== ariaLabel || $[26] !== ariaLabelledBy || $[27] !== gap || $[28] !== t10 || $[29] !== t11) {
+    t12 = /*#__PURE__*/jsxs("div", {
+      ref: listRef,
       role: "toolbar",
       className: styles.List,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "data-gap": gap,
-      "data-size": size,
-      "data-has-overflow": t10,
-      children: [t12, t18]
+      children: [t10, t11]
     });
-    $[24] = ariaLabel;
-    $[25] = ariaLabelledBy;
-    $[26] = gap;
-    $[27] = size;
+    $[25] = ariaLabel;
+    $[26] = ariaLabelledBy;
+    $[27] = gap;
     $[28] = t10;
-    $[29] = t12;
-    $[30] = t18;
-    $[31] = t9;
-    $[32] = t19;
+    $[29] = t11;
+    $[30] = t12;
   } else {
-    t19 = $[32];
+    t12 = $[30];
   }
-  let t20;
-  if ($[33] !== flush || $[34] !== t19 || $[35] !== t8) {
-    t20 = /*#__PURE__*/jsx("div", {
-      className: t8,
+  let t13;
+  if ($[31] !== flush || $[32] !== t12 || $[33] !== t9) {
+    t13 = /*#__PURE__*/jsx("div", {
+      ref: navRef,
+      className: t9,
       "data-component": "ActionBar",
       "data-flush": flush,
-      children: t19
+      children: t12
     });
-    $[33] = flush;
-    $[34] = t19;
-    $[35] = t8;
-    $[36] = t20;
+    $[31] = flush;
+    $[32] = t12;
+    $[33] = t9;
+    $[34] = t13;
   } else {
-    t20 = $[36];
+    t13 = $[34];
   }
-  let t21;
-  if ($[37] !== t20 || $[38] !== t7) {
-    t21 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
-      value: t7,
-      children: t20
+  let t14;
+  if ($[35] !== t13 || $[36] !== t8) {
+    t14 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
+      value: t8,
+      children: t13
     });
-    $[37] = t20;
-    $[38] = t7;
-    $[39] = t21;
+    $[35] = t13;
+    $[36] = t8;
+    $[37] = t14;
   } else {
-    t21 = $[39];
+    t14 = $[37];
   }
-  return t21;
+  return t14;
 };
-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;
+function useWidth(ref) {
+  const $ = c(3);
+  const [width, setWidth] = useState(-1);
   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 ($[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
+  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);
     };
-    $[5] = isOverflowing;
-    $[6] = t2;
-    $[7] = t3;
+    t1 = [ref];
+    $[0] = ref;
+    $[1] = t0;
+    $[2] = t1;
   } else {
-    t3 = $[7];
+    t0 = $[1];
+    t1 = $[2];
   }
-  return t3;
-}
-function _temp6() {
-  return false;
+  useIsomorphicLayoutEffect(t0, t1);
+  return width;
 }
-function _temp5() {}
 const ActionBarIconButton = /*#__PURE__*/forwardRef(({
   disabled,
   onClick,
@@ -329,36 +426,44 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   useRefObjectAsForwardedRef(forwardedRef, ref);
   const {
-    size
+    size,
+    isVisibleChild
   } = React.useContext(ActionBarContext);
+  const {
+    groupId
+  } = React.useContext(ActionBarGroupContext);
+  const width = useWidth(ref);
   const {
     ['aria-label']: ariaLabel,
     icon
   } = props;
-  const {
-    dataOverflowingAttr
-  } = useActionBarItem(ref, useMemo(() => ({
+  const registryProps = useMemo(() => ({
     type: 'action',
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '',
     icon,
     disabled: !!disabled,
-    onClick: onClick
-  }), [ariaLabel, icon, disabled, onClick]));
+    onClick: onClick,
+    width,
+    groupId: groupId !== null && groupId !== void 0 ? groupId : undefined
+  }), [ariaLabel, icon, disabled, onClick, groupId, width]);
+  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
   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",
-    "data-overflowing": dataOverflowingAttr
+    variant: "invisible"
   });
 });
-const ActionBarGroupContext = /*#__PURE__*/React.createContext(null);
+const ActionBarGroupContext = /*#__PURE__*/React.createContext({
+  groupId: null
+});
 const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(10);
   const {
@@ -366,40 +471,39 @@ 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] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] !== width) {
     t1 = {
-      type: "group"
+      type: "group",
+      width
     };
-    $[0] = t1;
+    $[0] = width;
+    $[1] = t1;
   } else {
-    t1 = $[0];
+    t1 = $[1];
   }
-  const {
-    dataOverflowingAttr,
-    isOverflowing
-  } = useActionBarItem(ref, t1);
+  const registryProps = t1;
+  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
   let t2;
-  if ($[1] !== isOverflowing) {
+  if ($[2] !== id) {
     t2 = {
-      isOverflowing
+      groupId: id
     };
-    $[1] = isOverflowing;
-    $[2] = t2;
+    $[2] = id;
+    $[3] = t2;
   } else {
-    t2 = $[2];
+    t2 = $[3];
   }
   let t3;
-  if ($[3] !== children || $[4] !== dataOverflowingAttr || $[5] !== ref) {
+  if ($[4] !== children || $[5] !== ref) {
     t3 = /*#__PURE__*/jsx("div", {
       className: styles.Group,
       "data-component": "ActionBar.Group",
       ref: ref,
-      "data-overflowing": dataOverflowingAttr,
       children: children
     });
-    $[3] = children;
-    $[4] = dataOverflowingAttr;
+    $[4] = children;
     $[5] = ref;
     $[6] = t3;
   } else {
@@ -453,12 +557,17 @@ 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) {
+  if ($[7] !== ariaLabel || $[8] !== items || $[9] !== returnFocusRef || $[10] !== t1 || $[11] !== width) {
     t2 = {
       type: "menu",
+      width,
       label: ariaLabel,
       icon: t1,
       returnFocusRef,
@@ -468,27 +577,28 @@ const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[8] = items;
     $[9] = returnFocusRef;
     $[10] = t1;
-    $[11] = t2;
+    $[11] = width;
+    $[12] = t2;
   } else {
-    t2 = $[11];
+    t2 = $[12];
+  }
+  const registryProps = t2;
+  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
+  if (!isVisibleChild(id)) {
+    return null;
   }
-  const {
-    dataOverflowingAttr
-  } = useActionBarItem(ref, t2);
   let t3;
-  if ($[12] !== ariaLabel || $[13] !== dataOverflowingAttr || $[14] !== icon || $[15] !== props) {
+  if ($[13] !== ariaLabel || $[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"
       })
     });
-    $[12] = ariaLabel;
-    $[13] = dataOverflowingAttr;
+    $[13] = ariaLabel;
     $[14] = icon;
     $[15] = props;
     $[16] = t3;
@@ -507,7 +617,7 @@ const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   }
   let t5;
   if ($[19] !== items) {
-    t5 = items.map(_temp7);
+    t5 = items.map(_temp4);
     $[19] = items;
     $[20] = t5;
   } else {
@@ -556,91 +666,68 @@ 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] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[0] !== width) {
     t0 = {
-      type: "divider"
+      type: "divider",
+      width
     };
-    $[0] = t0;
+    $[0] = width;
+    $[1] = t0;
   } else {
-    t0 = $[0];
+    t0 = $[1];
+  }
+  const registryProps = t0;
+  const id = ActionBarItemsRegistry.useRegisterDescendant(registryProps);
+  if (!isVisibleChild(id)) {
+    return null;
   }
-  const {
-    dataOverflowingAttr
-  } = useActionBarItem(ref, t0);
   let t1;
-  if ($[1] !== dataOverflowingAttr) {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = /*#__PURE__*/jsx("div", {
       ref: ref,
       "data-component": "ActionBar.VerticalDivider",
       "aria-hidden": "true",
-      className: styles.Divider,
-      "data-overflowing": dataOverflowingAttr
+      className: styles.Divider
     });
-    $[1] = dataOverflowingAttr;
     $[2] = t1;
   } else {
     t1 = $[2];
   }
   return t1;
 };
-function _temp(entry) {
-  return entry[1] !== null;
+function _temp() {
+  return new Set();
 }
-function _temp2(element) {
-  return element.matches(FOCUSABLE_ITEM_SELECTOR);
-}
-function _temp3(item, index) {
+function _temp2(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") {
+function _temp3(t0) {
+  const [key_0, childProps_0] = t0;
+  if (childProps_0.type === "action") {
     const {
-      onClick,
-      icon: Icon,
-      label,
-      disabled
-    } = menuItem;
+      onClick: onClick_0,
+      icon: Icon_1,
+      label: label_1,
+      disabled: disabled_0
+    } = childProps_0;
     return /*#__PURE__*/jsxs(ActionList.Item, {
-      onSelect: event => {
-        typeof onClick === "function" && onClick(event);
+      onSelect: event_0 => {
+        typeof onClick_0 === "function" && onClick_0(event_0);
       },
-      disabled: disabled,
+      disabled: disabled_0,
       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(_temp3)
-        })
-      })]
-    }, id);
+        children: /*#__PURE__*/jsx(Icon_1, {})
+      }), label_1]
+    }, key_0);
   }
+  return null;
 }
-function _temp7(item, index) {
+function _temp4(item, index) {
   return renderMenuItem(item, index);
 }