@primer/react 38.29.0-rc.87f864386 → 38.29.0-rc.9dc2e199b

package/CHANGELOG.md

@@ -25,8 +25,12 @@
 
 - [#7976](https://github.com/primer/react/pull/7976) [`1fac927`](https://github.com/primer/react/commit/1fac9270c497c1904acbb3eb60805630aab82a97) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - NavList: add a small gap between items for readability, including before expanded sub-navs, behind the `primer_react_action_list_item_gap` feature flag
 
+- [#7999](https://github.com/primer/react/pull/7999) [`eada357`](https://github.com/primer/react/commit/eada3574ff15bfd7680602f34e19308ea766a972) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Breadcrumbs: Improve rendering performance and refresh the overflow menu when breadcrumb content changes without changing the number of items.
+
 - [#7929](https://github.com/primer/react/pull/7929) [`48c34ca`](https://github.com/primer/react/commit/48c34ca452a5449b0ba901783edb169b6a1e1882) Thanks [@joshblack](https://github.com/joshblack)! - FilteredActionList: Make body skeleton widths stable for server rendering
 
+- [#7985](https://github.com/primer/react/pull/7985) [`969c874`](https://github.com/primer/react/commit/969c8749b40a8f5075dd9ca91314cde5c41e3814) Thanks [@joshblack](https://github.com/joshblack)! - AnchoredOverlay: Render the popover target attribute correctly for popover anchors
+
 - [#7984](https://github.com/primer/react/pull/7984) [`06fdad4`](https://github.com/primer/react/commit/06fdad432ad274878b15921d3ee25a157c61e70d) Thanks [@joshblack](https://github.com/joshblack)! - CircleBadge, ActionList: Prevent internal props from rendering on DOM elements
 
 - [#7978](https://github.com/primer/react/pull/7978) [`e3f655c`](https://github.com/primer/react/commit/e3f655c6735ffd1bd105b8e7599e273bb1eee4d1) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - PageHeader.ParentLink: Forward unknown props (e.g. `to`) to the underlying element, enabling client-side routing with polymorphic `as`.

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map

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

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -7,6 +7,7 @@ import { XIcon } from '@primer/octicons-react';
 import classes from './AnchoredOverlay.module.css.js';
 import { clsx } from 'clsx';
 import { widthMap } from '../Overlay/constants.js';
+import { reactMajorVersion } from '../utils/environment.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
@@ -138,6 +139,11 @@ const AnchoredOverlay = ({
     ...focusTrapSettings
   });
   const popoverId = useId();
+  const popoverTargetProps = shouldRenderAsPopover ? reactMajorVersion >= 19 ? {
+    popoverTarget: popoverId
+  } : {
+    popovertarget: popoverId
+  } : {};
   const id = popoverId.replaceAll(':', '_'); // popoverId can contain colons which are invalid in CSS custom property names, so we replace them with underscores
   const anchorName = `--anchored-overlay-anchor-${id}`;
 
@@ -234,9 +240,7 @@ const AnchoredOverlay = ({
       tabIndex: 0,
       onClick: onAnchorClick,
       onKeyDown: onAnchorKeyDown,
-      ...(shouldRenderAsPopover ? {
-        popoverTarget: popoverId
-      } : {})
+      ...popoverTargetProps
     }), open ? /*#__PURE__*/jsxs(Overlay, {
       returnFocusRef: anchorRef,
       onClickOutside: onClickOutside,

package/dist/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA6E,MAAM,OAAO,CAAA;AAUjG,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AA8GF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBAwMzG;kBAxMQ,WAAW;;;AAoNpB,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,gBAAgB,CACpF,EAAE,EACF,GAAG,EACH;IACE,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CACF,CAAA;AAuBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YApBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;;;;;;AA4BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA5BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;;;CAiCuD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAkE,MAAM,OAAO,CAAA;AAWtF,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AAwLF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBA4IzG;kBA5IQ,WAAW;;;AAwJpB,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,gBAAgB,CACpF,EAAE,EACF,GAAG,EACH;IACE,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CACF,CAAA;AAuBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YApBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;;;;;;AA4BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA5BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;;;CAiCuD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,7 +1,8 @@
 import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
-import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useRef, useState } from 'react';
 import classes from './Breadcrumbs.module.css.js';
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { ActionList } from '../ActionList/index.js';
 import { IconButton } from '../Button/IconButton.js';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
@@ -206,177 +207,350 @@ const getValidChildren = children => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 };
-function Breadcrumbs({
-  className,
-  children,
-  style,
-  overflow = 'wrap',
-  variant = 'normal'
+const MENU_BUTTON_FALLBACK_WIDTH = 32; // Design system small IconButton
+const CONTAINER_FALLBACK_WIDTH = 800; // Used before the container has been measured
+
+// Pure derivation of how many leading breadcrumb items collapse into the
+// overflow menu, given the measured widths. Returns counts/flags (primitives)
+// rather than element arrays so the render memo below only invalidates when the
+// split actually changes, not on every sub-threshold resize. Kept outside the
+// component so it has no hidden dependency on previous state and can be called
+// directly during render.
+function calculateOverflow({
+  availableWidth,
+  itemCount,
+  childArrayWidths,
+  menuButtonWidth,
+  overflow,
+  hideRoot
 }) {
-  const containerRef = useRef(null);
-  const measureMenuButton = useCallback(element => {
-    if (element) {
-      const iconButtonElement = element.querySelector('button[data-component="IconButton"]');
-      if (iconButtonElement) {
-        const measuredWidth = iconButtonElement.offsetWidth;
-        // eslint-disable-next-line react-hooks/immutability
-        setMenuButtonWidth(measuredWidth);
+  var _childArrayWidths$;
+  let eHideRoot = hideRoot;
+  const rootItemWidth = (_childArrayWidths$ = childArrayWidths[0]) !== null && _childArrayWidths$ !== void 0 ? _childArrayWidths$ : 0;
+  const NARROW_BREAKPOINT = 544;
+  const isNarrow = availableWidth < NARROW_BREAKPOINT;
+  let MIN_VISIBLE_ITEMS = 4;
+  if (!eHideRoot) {
+    MIN_VISIBLE_ITEMS = 3;
+  } else if (isNarrow && itemCount > 2) {
+    MIN_VISIBLE_ITEMS = 1;
+  }
+  const calculateVisibleItemsWidth = w => {
+    const widths = w.reduce((sum, width) => sum + width + 16, 0);
+    return !eHideRoot ? rootItemWidth + widths : widths;
+  };
+  let currentVisibleItemWidths = [...childArrayWidths];
+  let menuItemCount = 0;
+  if (availableWidth > 0 && currentVisibleItemWidths.length > 0) {
+    let visibleItemsWidthTotal = calculateVisibleItemsWidth(currentVisibleItemWidths);
+    while ((overflow === 'menu' || overflow === 'menu-with-root') && (visibleItemsWidthTotal > availableWidth || currentVisibleItemWidths.length > MIN_VISIBLE_ITEMS)) {
+      menuItemCount += 1;
+      currentVisibleItemWidths = currentVisibleItemWidths.slice(1);
+
+      // A menu button is now shown, so its width is always part of the total.
+      visibleItemsWidthTotal = calculateVisibleItemsWidth(currentVisibleItemWidths) + menuButtonWidth;
+      if (currentVisibleItemWidths.length === 1 && visibleItemsWidthTotal > availableWidth) {
+        eHideRoot = true;
+        break;
+      } else {
+        eHideRoot = hideRoot;
       }
     }
-  }, []);
-  const hideRoot = !(overflow === 'menu-with-root');
-  const [effectiveHideRoot, setEffectiveHideRoot] = useState(hideRoot);
-  const childArray = useMemo(() => getValidChildren(children), [children]);
+  }
+  return {
+    menuItemCount,
+    effectiveHideRoot: eHideRoot
+  };
+}
+function Breadcrumbs(t0) {
+  const $ = c(48);
+  const {
+    className,
+    children,
+    style,
+    overflow: t1,
+    variant: t2
+  } = t0;
+  const overflow = t1 === undefined ? "wrap" : t1;
+  const variant = t2 === undefined ? "normal" : t2;
+  const containerRef = useRef(null);
+  const hideRoot = !(overflow === "menu-with-root");
+  let t3;
+  if ($[0] !== children) {
+    t3 = getValidChildren(children);
+    $[0] = children;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const childArray = t3;
   const rootItem = childArray[0];
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [visibleItems, setVisibleItems] = useState(() => childArray);
-  const [childArrayWidths, setChildArrayWidths] = useState(() => []);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [menuItems, setMenuItems] = useState([]);
-  const [rootItemWidth, setRootItemWidth] = useState(0);
-  const MENU_BUTTON_FALLBACK_WIDTH = 32; // Design system small IconButton
+  const [childArrayWidths, setChildArrayWidths] = useState(_temp2);
+  const [containerWidth, setContainerWidth] = useState(null);
   const [menuButtonWidth, setMenuButtonWidth] = useState(MENU_BUTTON_FALLBACK_WIDTH);
-  useEffect(() => {
-    var _containerRef$current;
-    const listElement = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('ol');
-    if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
-      const listElementArray = Array.from(listElement.children);
-      const widths = listElementArray.map(child => child.offsetWidth);
-      setChildArrayWidths(widths);
-      setRootItemWidth(listElementArray[0].offsetWidth);
-    }
-  }, [childArray]);
-  const calculateOverflow = useCallback(availableWidth => {
-    let eHideRoot = effectiveHideRoot;
-    const MENU_BUTTON_WIDTH = menuButtonWidth;
-    const NARROW_BREAKPOINT = 544;
-    const isNarrow = availableWidth < NARROW_BREAKPOINT;
-    let MIN_VISIBLE_ITEMS = 4;
-    if (!eHideRoot) {
-      MIN_VISIBLE_ITEMS = 3;
-    } else if (isNarrow && childArray.length > 2) {
-      MIN_VISIBLE_ITEMS = 1;
-    }
-    const calculateVisibleItemsWidth = w => {
-      const widths_0 = w.reduce((sum, width) => sum + width + 16, 0);
-      return !eHideRoot ? rootItemWidth + widths_0 : widths_0;
+  let t4;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = element => {
+      if (element) {
+        const iconButtonElement = element.querySelector("button[data-component=\"IconButton\"]");
+        if (iconButtonElement) {
+          const measuredWidth = iconButtonElement.offsetWidth;
+          setMenuButtonWidth(prev => prev === measuredWidth ? prev : measuredWidth);
+        }
+      }
     };
-    let currentVisibleItems = [...childArray];
-    let currentVisibleItemWidths = [...childArrayWidths];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let currentMenuItems = [];
-    let currentMenuItemsWidths = [];
-    if (availableWidth > 0 && currentVisibleItemWidths.length > 0) {
-      let visibleItemsWidthTotal = calculateVisibleItemsWidth(currentVisibleItemWidths);
-      if (currentMenuItems.length > 0) {
-        visibleItemsWidthTotal += MENU_BUTTON_WIDTH;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const measureMenuButton = t4;
+  let t5;
+  if ($[3] !== childArray.length || $[4] !== overflow) {
+    t5 = () => {
+      if (overflow === "wrap") {
+        return;
       }
-      while ((overflow === 'menu' || overflow === 'menu-with-root') && (visibleItemsWidthTotal > availableWidth || currentVisibleItems.length > MIN_VISIBLE_ITEMS)) {
-        const itemToHide = currentVisibleItems[0];
-        const itemToHideWidth = currentVisibleItemWidths[0];
-        currentMenuItems = [...currentMenuItems, itemToHide];
-        currentMenuItemsWidths = [...currentMenuItemsWidths, itemToHideWidth];
-        currentVisibleItems = currentVisibleItems.slice(1);
-        currentVisibleItemWidths = currentVisibleItemWidths.slice(1);
-        visibleItemsWidthTotal = calculateVisibleItemsWidth(currentVisibleItemWidths);
-        if (currentMenuItems.length > 0) {
-          visibleItemsWidthTotal += MENU_BUTTON_WIDTH;
-        }
-        if (currentVisibleItems.length === 1 && visibleItemsWidthTotal > availableWidth) {
-          eHideRoot = true;
-          break;
-        } else {
-          eHideRoot = hideRoot;
-        }
+      const containerElement = containerRef.current;
+      if (!containerElement) {
+        return;
+      }
+      const measuredContainerWidth = containerElement.offsetWidth;
+      setContainerWidth(prev_0 => prev_0 === measuredContainerWidth ? prev_0 : measuredContainerWidth);
+      const listElement = containerElement.querySelector("ol");
+      if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
+        const widths = Array.from(listElement.children).map(_temp3);
+        setChildArrayWidths(widths);
       }
-    }
-    return {
-      visibleItems: currentVisibleItems,
-      menuItems: currentMenuItems,
-      effectiveHideRoot: eHideRoot
     };
-  }, [childArray, childArrayWidths, effectiveHideRoot, hideRoot, overflow, rootItemWidth, menuButtonWidth]);
-  const handleResize = useCallback(entries => {
-    if (entries[0]) {
-      const containerWidth = entries[0].contentRect.width;
-      const result = calculateOverflow(containerWidth);
-      if (visibleItems.length !== result.visibleItems.length && menuItems.length !== result.menuItems.length || result.effectiveHideRoot !== effectiveHideRoot) {
-        setVisibleItems(result.visibleItems);
-        setMenuItems(result.menuItems);
-        setEffectiveHideRoot(result.effectiveHideRoot);
+    $[3] = childArray.length;
+    $[4] = overflow;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== childArray || $[7] !== overflow) {
+    t6 = [childArray, overflow];
+    $[6] = childArray;
+    $[7] = overflow;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  useIsomorphicLayoutEffect(t5, t6);
+  let t7;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = entries => {
+      if (entries[0]) {
+        const width = Math.round(entries[0].contentRect.width);
+        setContainerWidth(prev_1 => prev_1 === width ? prev_1 : width);
       }
+    };
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = [];
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  useResizeObserver(t7, containerRef, t8, overflow !== "wrap");
+  let t9;
+  bb0: {
+    if (overflow === "wrap" || childArrayWidths.length !== childArray.length) {
+      let t10;
+      if ($[11] !== hideRoot) {
+        t10 = {
+          menuItemCount: 0,
+          effectiveHideRoot: hideRoot
+        };
+        $[11] = hideRoot;
+        $[12] = t10;
+      } else {
+        t10 = $[12];
+      }
+      t9 = t10;
+      break bb0;
     }
-  }, [calculateOverflow, effectiveHideRoot, menuItems.length, visibleItems.length]);
-  useResizeObserver(handleResize, containerRef);
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if ((overflow === 'menu' || overflow === 'menu-with-root') && childArray.length > 5 && menuItems.length === 0) {
-      var _containerRef$current2;
-      const containerWidth_0 = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) || 800;
-      const result_0 = calculateOverflow(containerWidth_0);
-
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, react-you-might-not-need-an-effect/no-chain-state-updates
-      setVisibleItems(result_0.visibleItems);
-
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, react-you-might-not-need-an-effect/no-chain-state-updates
-      setMenuItems(result_0.menuItems);
-
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates, react-you-might-not-need-an-effect/no-derived-state
-      setEffectiveHideRoot(result_0.effectiveHideRoot);
-    }
-  }, [overflow, childArray, calculateOverflow, menuItems.length]);
-  const finalChildren = React.useMemo(() => {
-    if (overflow === 'wrap' || menuItems.length === 0) {
-      return React.Children.map(children, child_0 => /*#__PURE__*/jsx("li", {
-        className: classes.ItemWrapper,
-        children: child_0
-      }));
-    }
-    let effectiveMenuItems = [...menuItems];
-    // In 'menu-with-root' mode, include the root item inside the menu even if it's visible in the breadcrumbs
-    if (!effectiveHideRoot) {
-      effectiveMenuItems = [...menuItems.slice(1)];
-    }
-    const menuElement = /*#__PURE__*/jsxs("li", {
-      className: classes.BreadcrumbsItem,
-      children: [/*#__PURE__*/jsx(BreadcrumbsMenuItem, {
-        ref: measureMenuButton,
-        items: effectiveMenuItems,
-        "aria-label": `${effectiveMenuItems.length} more breadcrumb items`
-      }), /*#__PURE__*/jsx(ItemSeparator, {})]
-    }, "breadcrumbs-menu");
-    const visibleElements = visibleItems.map((child_1, index) => /*#__PURE__*/jsxs("li", {
-      className: classes.BreadcrumbsItem,
-      children: [child_1, /*#__PURE__*/jsx(ItemSeparator, {})]
-    }, `visible + ${index}`));
-    const rootElement = /*#__PURE__*/jsxs("li", {
-      className: classes.BreadcrumbsItem,
-      children: [rootItem, /*#__PURE__*/jsx(ItemSeparator, {})]
-    }, `rootElement`);
-    if (effectiveHideRoot) {
-      // Show: [overflow menu, leaf breadcrumb]
-      return [menuElement, ...visibleElements];
+    const t10 = containerWidth !== null && containerWidth !== void 0 ? containerWidth : CONTAINER_FALLBACK_WIDTH;
+    let t11;
+    if ($[13] !== childArray.length || $[14] !== childArrayWidths || $[15] !== hideRoot || $[16] !== menuButtonWidth || $[17] !== overflow || $[18] !== t10) {
+      t11 = calculateOverflow({
+        availableWidth: t10,
+        itemCount: childArray.length,
+        childArrayWidths,
+        menuButtonWidth,
+        overflow,
+        hideRoot
+      });
+      $[13] = childArray.length;
+      $[14] = childArrayWidths;
+      $[15] = hideRoot;
+      $[16] = menuButtonWidth;
+      $[17] = overflow;
+      $[18] = t10;
+      $[19] = t11;
     } else {
-      // Show: [root breadcrumb, overflow menu, leaf breadcrumb]
-      return [rootElement, menuElement, ...visibleElements];
+      t11 = $[19];
     }
-  }, [overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children]);
-  return /*#__PURE__*/jsx("nav", {
-    className: clsx(className, classes.BreadcrumbsBase),
-    "aria-label": "Breadcrumbs",
-    style: style,
-    ref: containerRef,
-    "data-overflow": overflow,
-    "data-variant": variant,
-    "data-component": "Breadcrumbs",
-    children: /*#__PURE__*/jsx(BreadcrumbsList, {
+    t9 = t11;
+  }
+  const {
+    menuItemCount,
+    effectiveHideRoot
+  } = t9;
+  let t10;
+  if ($[20] !== childArray || $[21] !== children || $[22] !== effectiveHideRoot || $[23] !== menuItemCount || $[24] !== overflow || $[25] !== rootItem) {
+    bb1: {
+      if (overflow === "wrap" || menuItemCount === 0) {
+        let t11;
+        if ($[27] !== children) {
+          t11 = React.Children.map(children, _temp4);
+          $[27] = children;
+          $[28] = t11;
+        } else {
+          t11 = $[28];
+        }
+        t10 = t11;
+        break bb1;
+      }
+      const menuItems = childArray.slice(0, menuItemCount);
+      const visibleItems = childArray.slice(menuItemCount);
+      const effectiveMenuItems = effectiveHideRoot ? menuItems : menuItems.slice(1);
+      const t11 = `${effectiveMenuItems.length} more breadcrumb items`;
+      let t12;
+      if ($[29] !== effectiveMenuItems || $[30] !== t11) {
+        t12 = /*#__PURE__*/jsx(BreadcrumbsMenuItem, {
+          ref: measureMenuButton,
+          items: effectiveMenuItems,
+          "aria-label": t11
+        });
+        $[29] = effectiveMenuItems;
+        $[30] = t11;
+        $[31] = t12;
+      } else {
+        t12 = $[31];
+      }
+      let t13;
+      if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+        t13 = /*#__PURE__*/jsx(ItemSeparator, {});
+        $[32] = t13;
+      } else {
+        t13 = $[32];
+      }
+      let t14;
+      if ($[33] !== t12) {
+        t14 = /*#__PURE__*/jsxs("li", {
+          className: classes.BreadcrumbsItem,
+          children: [t12, t13]
+        }, "breadcrumbs-menu");
+        $[33] = t12;
+        $[34] = t14;
+      } else {
+        t14 = $[34];
+      }
+      const menuElement = t14;
+      const visibleElements = visibleItems.map(_temp5);
+      let t15;
+      if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+        t15 = /*#__PURE__*/jsx(ItemSeparator, {});
+        $[35] = t15;
+      } else {
+        t15 = $[35];
+      }
+      let t16;
+      if ($[36] !== rootItem) {
+        t16 = /*#__PURE__*/jsxs("li", {
+          className: classes.BreadcrumbsItem,
+          children: [rootItem, t15]
+        }, "rootElement");
+        $[36] = rootItem;
+        $[37] = t16;
+      } else {
+        t16 = $[37];
+      }
+      const rootElement = t16;
+      if (effectiveHideRoot) {
+        t10 = [menuElement, ...visibleElements];
+      } else {
+        t10 = [rootElement, menuElement, ...visibleElements];
+      }
+    }
+    $[20] = childArray;
+    $[21] = children;
+    $[22] = effectiveHideRoot;
+    $[23] = menuItemCount;
+    $[24] = overflow;
+    $[25] = rootItem;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  const finalChildren = t10;
+  let t11;
+  if ($[38] !== className) {
+    t11 = clsx(className, classes.BreadcrumbsBase);
+    $[38] = className;
+    $[39] = t11;
+  } else {
+    t11 = $[39];
+  }
+  let t12;
+  if ($[40] !== finalChildren) {
+    t12 = /*#__PURE__*/jsx(BreadcrumbsList, {
       children: finalChildren
-    })
+    });
+    $[40] = finalChildren;
+    $[41] = t12;
+  } else {
+    t12 = $[41];
+  }
+  let t13;
+  if ($[42] !== overflow || $[43] !== style || $[44] !== t11 || $[45] !== t12 || $[46] !== variant) {
+    t13 = /*#__PURE__*/jsx("nav", {
+      className: t11,
+      "aria-label": "Breadcrumbs",
+      style: style,
+      ref: containerRef,
+      "data-overflow": overflow,
+      "data-variant": variant,
+      "data-component": "Breadcrumbs",
+      children: t12
+    });
+    $[42] = overflow;
+    $[43] = style;
+    $[44] = t11;
+    $[45] = t12;
+    $[46] = variant;
+    $[47] = t13;
+  } else {
+    t13 = $[47];
+  }
+  return t13;
+}
+function _temp5(child_1, index) {
+  return /*#__PURE__*/jsxs("li", {
+    className: classes.BreadcrumbsItem,
+    children: [child_1, /*#__PURE__*/jsx(ItemSeparator, {})]
+  }, `visible + ${index}`);
+}
+_temp5.displayName = "_temp5";
+function _temp4(child_0) {
+  return /*#__PURE__*/jsx("li", {
+    className: classes.ItemWrapper,
+    children: child_0
   });
 }
-Breadcrumbs.displayName = "Breadcrumbs";
+_temp4.displayName = "_temp4";
+function _temp3(child) {
+  return child.offsetWidth;
+}
+function _temp2() {
+  return [];
+}
 const ItemSeparator = () => {
   const $ = c(1);
   let t0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.29.0-rc.87f864386",
+  "version": "38.29.0-rc.9dc2e199b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",