@primer/react 38.24.0-rc.4089ee5c5 → 38.24.0-rc.76f4c2c0c

package/CHANGELOG.md

@@ -22,8 +22,6 @@
 
 - [#7776](https://github.com/primer/react/pull/7776) [`d6f61c1`](https://github.com/primer/react/commit/d6f61c1e197b52eb75cff97299bfac4caedcc1ac) Thanks [@llastflowers](https://github.com/llastflowers)! - Add `data-component` attributes for Blankslate, BranchName, Breadcrumbs, ButtonGroup, Checkbox, CheckboxGroup, CircleBadge, ConfirmationDialog, CounterLabel, and Dialog to provide stable selectors.
 
-- [#7816](https://github.com/primer/react/pull/7816) [`aef8548`](https://github.com/primer/react/commit/aef85486a77a544ab36fcc18470dc06bf2502b09) Thanks [@iansan5653](https://github.com/iansan5653)! - Replace `ActionBar` overflow calculations with CSS wrapping approach to improve performance and stability
-
 - [#7819](https://github.com/primer/react/pull/7819) [`8ed6149`](https://github.com/primer/react/commit/8ed6149b45093449c6e12a71a374618fe282d6a1) Thanks [@llastflowers](https://github.com/llastflowers)! - Add `data-component` attributes for Details, Flash, FormControl (+ update InputValidation to forward from FormControl.Validation), Header, and Heading.
 
 ### Patch Changes

package/dist/ActionBar/ActionBar-a41224b2.css

@@ -0,0 +1,2 @@
+.prc-ActionBar-List-9uz46{align-items:center;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));list-style:none;margin-bottom:-1px;min-width:0;position:relative;white-space:nowrap}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk{display:flex;gap:inherit}
+/*# sourceMappingURL=ActionBar-a41224b2.css.map */

package/dist/ActionBar/ActionBar-a41224b2.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BAUE,kBAAmB,CARnB,YAAa,CASb,yDAAqD,CAFrD,eAAgB,CAFhB,kBAAmB,CAJnB,WAAY,CAFZ,iBAAkB,CAOlB,kBAiBF,CAXE,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAGF,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAD3B,sCAKF,CAGF,2BACE,YAAa,CACb,WACF","file":"ActionBar-a41224b2.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n"]}

package/dist/ActionBar/ActionBar.d.ts

@@ -120,6 +120,6 @@ export declare const ActionBarMenu: React.ForwardRefExoticComponent<{
     keyshortcuts?: string;
     keybindingHint?: string | string[];
 } & Omit<import("..").ButtonBaseProps, "aria-label" | "aria-labelledby"> & React.RefAttributes<unknown>>;
-export declare const VerticalDivider: () => React.JSX.Element;
+export declare const VerticalDivider: () => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=ActionBar.d.ts.map

package/dist/ActionBar/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}

package/dist/ActionBar/ActionBar.js

@@ -1,27 +1,53 @@
 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'
+  size: 'medium',
+  isVisibleChild: () => true,
+  groupId: undefined
 });
 
 /*
 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);
@@ -70,258 +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;
-  } 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", {
-      className: styles.OverflowSpacer
-    });
-    $[9] = t11;
+    $[9] = t7;
   } 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: 0.75
-      });
-      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,
@@ -330,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 {
@@ -367,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 {
@@ -454,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,
@@ -469,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;
@@ -508,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 {
@@ -557,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);
 }
 

package/dist/ActionBar/ActionBar.module.css.js

@@ -1,5 +1,5 @@
-import './ActionBar-e63def3c.css';
+import './ActionBar-a41224b2.css';
 
-var styles = {"List":"prc-ActionBar-List-9uz46","detect-overflow":"prc-ActionBar-detect-overflow-mAuJu","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk","OverflowContainer":"prc-ActionBar-OverflowContainer-AkYZs","OverflowSpacer":"prc-ActionBar-OverflowSpacer-tbHkV","MoreButton":"prc-ActionBar-MoreButton-RHqpx"};
+var styles = {"List":"prc-ActionBar-List-9uz46","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk"};
 
 export { styles as default };

package/dist/ActionBar/index.d.ts

@@ -1,7 +1,7 @@
 export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
 declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
     IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
-    Divider: () => import("react").JSX.Element;
+    Divider: () => import("react").JSX.Element | null;
     Group: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<unknown>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.24.0-rc.4089ee5c5",
+  "version": "38.24.0-rc.76f4c2c0c",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/ActionBar/ActionBar-e63def3c.css

@@ -1,2 +0,0 @@
-.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block)}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
-/*# sourceMappingURL=ActionBar-e63def3c.css.map */

package/dist/ActionBar/ActionBar-e63def3c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAaF,CAVA,uCAEE,cAAe,CAEf,wBAAyB,CACzB,eAKF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-e63def3c.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}