@primer/react 38.20.0-rc.8b2ab1a0a → 38.20.0-rc.b9447348d

package/CHANGELOG.md

@@ -8,8 +8,6 @@
 
 - [#7725](https://github.com/primer/react/pull/7725) [`d7b9313`](https://github.com/primer/react/commit/d7b9313b53e370e258c152084ac1f0402d64b77f) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Remove polyfill for CSS Anchor Positioning, use primer/behaviors as fallback. Ensure overlays take available space.
 
-- [#7752](https://github.com/primer/react/pull/7752) [`d7380a7`](https://github.com/primer/react/commit/d7380a7616a6c0cf861b5fe3dd9bd8d76470ca2e) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Breadcrumbs: Graduate `primer_react_breadcrumbs_overflow_menu` feature flag, making the overflow menu behavior always-on.
-
 - [#7733](https://github.com/primer/react/pull/7733) [`b9211db`](https://github.com/primer/react/commit/b9211db173841c9d9a531c777c5ce2c0cd8af60f) Thanks [@francinelucca](https://github.com/francinelucca)! - Overlay: Graduate `primer_react_overlay_max_height_clamp_to_viewport` feature flag
 
   The max-height of overlays is now clamped to the viewport height by default using `min(size, 100dvh)`. This prevents overlays from extending beyond the viewport on smaller screens.

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,qBA2LzG;kBA3LQ,WAAW;;;AAuMpB,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;AAsBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YAnBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;;;;AA2BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA3BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;CAgCuD,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,KAA6E,MAAM,OAAO,CAAA;AAWjG,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,qBA+MzG;kBA/MQ,WAAW;;;AA2NpB,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;AAsBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YAnBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;;;;AA2BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA3BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;CAgCuD,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

@@ -10,6 +10,7 @@ import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
 import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
 import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import Details from '../Details/Details.js';
 
 const BreadcrumbsList = t0 => {
@@ -212,6 +213,11 @@ function Breadcrumbs({
   overflow = 'wrap',
   variant = 'normal'
 }) {
+  const overflowMenuEnabled = useFeatureFlag('primer_react_breadcrumbs_overflow_menu');
+  const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/jsx("li", {
+    className: classes.ItemWrapper,
+    children: child
+  }));
   const containerRef = useRef(null);
   const measureMenuButton = useCallback(element => {
     if (element) {
@@ -240,13 +246,13 @@ function Breadcrumbs({
   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) {
+    if (overflowMenuEnabled && listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
       const listElementArray = Array.from(listElement.children);
-      const widths = listElementArray.map(child => child.offsetWidth);
+      const widths = listElementArray.map(child_0 => child_0.offsetWidth);
       setChildArrayWidths(widths);
       setRootItemWidth(listElementArray[0].offsetWidth);
     }
-  }, [childArray]);
+  }, [childArray, overflowMenuEnabled]);
   const calculateOverflow = useCallback(availableWidth => {
     let eHideRoot = effectiveHideRoot;
     const MENU_BUTTON_WIDTH = menuButtonWidth;
@@ -291,7 +297,7 @@ function Breadcrumbs({
     };
   }, [childArray, childArrayWidths, effectiveHideRoot, hideRoot, overflow, rootItemWidth, menuButtonWidth]);
   const handleResize = useCallback(entries => {
-    if (entries[0]) {
+    if (overflowMenuEnabled && 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) {
@@ -300,10 +306,10 @@ function Breadcrumbs({
         setEffectiveHideRoot(result.effectiveHideRoot);
       }
     }
-  }, [calculateOverflow, effectiveHideRoot, menuItems.length, visibleItems.length]);
+  }, [calculateOverflow, effectiveHideRoot, menuItems.length, overflowMenuEnabled, visibleItems.length]);
   useResizeObserver(handleResize, containerRef);
   useEffect(() => {
-    if ((overflow === 'menu' || overflow === 'menu-with-root') && childArray.length > 5 && menuItems.length === 0) {
+    if (overflowMenuEnabled && (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);
@@ -311,44 +317,46 @@ function Breadcrumbs({
       setMenuItems(result_0.menuItems);
       setEffectiveHideRoot(result_0.effectiveHideRoot);
     }
-  }, [overflow, childArray, calculateOverflow, menuItems.length]);
+  }, [overflow, childArray, calculateOverflow, menuItems.length, overflowMenuEnabled]);
   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];
-    } else {
-      // Show: [root breadcrumb, overflow menu, leaf breadcrumb]
-      return [rootElement, menuElement, ...visibleElements];
+    if (overflowMenuEnabled) {
+      if (overflow === 'wrap' || menuItems.length === 0) {
+        return React.Children.map(children, child_1 => /*#__PURE__*/jsx("li", {
+          className: classes.ItemWrapper,
+          children: child_1
+        }));
+      }
+      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_2, index) => /*#__PURE__*/jsxs("li", {
+        className: classes.BreadcrumbsItem,
+        children: [child_2, /*#__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];
+      } else {
+        // Show: [root breadcrumb, overflow menu, leaf breadcrumb]
+        return [rootElement, menuElement, ...visibleElements];
+      }
     }
-  }, [overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children]);
-  return /*#__PURE__*/jsx("nav", {
+  }, [overflowMenuEnabled, overflow, menuItems, effectiveHideRoot, measureMenuButton, visibleItems, rootItem, children]);
+  return overflowMenuEnabled ? /*#__PURE__*/jsx("nav", {
     className: clsx(className, classes.BreadcrumbsBase),
     "aria-label": "Breadcrumbs",
     style: style,
@@ -358,9 +366,16 @@ function Breadcrumbs({
     children: /*#__PURE__*/jsx(BreadcrumbsList, {
       children: finalChildren
     })
+  }) : /*#__PURE__*/jsx("nav", {
+    className: clsx(className, classes.BreadcrumbsBase),
+    "aria-label": "Breadcrumbs",
+    style: style,
+    "data-variant": variant,
+    children: /*#__PURE__*/jsx(BreadcrumbsList, {
+      children: wrappedChildren
+    })
   });
 }
-Breadcrumbs.displayName = "Breadcrumbs";
 const ItemSeparator = () => {
   const $ = c(1);
   let t0;

package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAK9B,CAAA"}
+{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAM9B,CAAA"}

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -1,6 +1,7 @@
 import { FeatureFlagScope } from './FeatureFlagScope.js';
 
 const DefaultFeatureFlags = FeatureFlagScope.create({
+  primer_react_breadcrumbs_overflow_menu: false,
   primer_react_css_anchor_positioning: false,
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.20.0-rc.8b2ab1a0a",
+  "version": "38.20.0-rc.b9447348d",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",