@primer/react 38.24.0-rc.76f4c2c0c → 38.24.0-rc.98bb12ac8

package/CHANGELOG.md

@@ -22,10 +22,14 @@
 
 - [#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
 
+- [#7824](https://github.com/primer/react/pull/7824) [`6889235`](https://github.com/primer/react/commit/6889235fac93f17cfd0354758f4f9a1e6ff01942) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix `usePaneWidth` triggering unnecessary React re-renders on every window resize
+
 - [#7833](https://github.com/primer/react/pull/7833) [`dfed7ca`](https://github.com/primer/react/commit/dfed7ca73532922ec0526dd85afcf7ae471c566e) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Timeline: Remove border override from TimelineBadge when variant is set
 
 ## 38.23.0

package/dist/ActionBar/ActionBar-e63def3c.css

@@ -0,0 +1,2 @@
+.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

@@ -0,0 +1 @@
+{"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"]}

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 | null;
+export declare const VerticalDivider: () => React.JSX.Element;
 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,53 +1,27 @@
 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
+  size: 'medium'
 });
 
 /*
 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 +70,258 @@ 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", {
+      className: styles.OverflowSpacer
+    });
+    $[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: 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 ($[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 +330,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 +367,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 +454,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 +469,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 +508,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 +557,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);
 }
 

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

@@ -1,5 +1,5 @@
-import './ActionBar-a41224b2.css';
+import './ActionBar-e63def3c.css';
 
-var styles = {"List":"prc-ActionBar-List-9uz46","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk"};
+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"};
 
 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 | null;
+    Divider: () => import("react").JSX.Element;
     Group: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<unknown>>;

package/dist/PageLayout/usePaneWidth.d.ts.map

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

package/dist/PageLayout/usePaneWidth.js

@@ -246,6 +246,7 @@ function usePaneWidth(t0) {
     t6 = $[16];
   }
   const [maxPaneWidth, setMaxPaneWidth] = React.useState(t6);
+  const maxPaneWidthRef = React.useRef(maxPaneWidth);
   let t7;
   let t8;
   if ($[17] !== currentWidth) {
@@ -335,15 +336,20 @@ function usePaneWidth(t0) {
           max: actualMax,
           current: currentWidthRef.current
         });
-        startTransition(() => {
-          setMaxPaneWidth(actualMax);
-          if (wasClamped) {
-            setCurrentWidthState(actualMax);
-          }
-        });
+        const maxChanged = actualMax !== maxPaneWidthRef.current;
+        if (maxChanged || wasClamped) {
+          maxPaneWidthRef.current = actualMax;
+          startTransition(() => {
+            setMaxPaneWidth(actualMax);
+            if (wasClamped) {
+              setCurrentWidthState(actualMax);
+            }
+          });
+        }
       };
       maxWidthDiffRef.current = getMaxWidthDiffFromViewport();
       const initialMax = getMaxPaneWidthRef.current();
+      maxPaneWidthRef.current = initialMax;
       setMaxPaneWidth(initialMax);
       (_paneRef$current3 = paneRef.current) === null || _paneRef$current3 === void 0 ? void 0 : _paneRef$current3.style.setProperty("--pane-max-width", `${initialMax}px`);
       updateAriaValues(handleRef.current, {

package/package.json

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

package/dist/ActionBar/ActionBar-a41224b2.css

@@ -1,2 +0,0 @@
-.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

@@ -1 +0,0 @@
-{"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"]}