@primer/react 0.0.0-20260619134534 → 0.0.0-20260619193118

package/CHANGELOG.md

@@ -1,10 +1,12 @@
 # @primer/react
 
-## 0.0.0-20260619134534
+## 0.0.0-20260619193118
 
-### Patch Changes
+### Minor Changes
 
-- [#7935](https://github.com/primer/react/pull/7935) [`2765933`](https://github.com/primer/react/commit/276593387ec84f72aeba02a940b5e0a4d0a026a9) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - ConfirmationDialog: `useConfirm`/`confirm` now removes its host element from `document.body` after the dialog is closed, and uses a fresh host element per call, so the empty container no longer lingers or leaks into other components and tests
+- [#7622](https://github.com/primer/react/pull/7622) [`4d8d5e6`](https://github.com/primer/react/commit/4d8d5e6b9b0b1d394d19154369f9c37eabe7cb87) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Refactors `UnderlineNav` overflow handling to use CSS-based overflow detection instead of JavaScript width measurements, eliminating layout shift (CLS) issues and improving performance. The overflow menu is now implemented with `ActionMenu`, and item registration uses a descendant registry instead of the `React.Children` API. Consumer-facing changes: items can now be wrapped in fragments or wrapper components; the current item may appear in the overflow menu when the viewport is narrow; and the overflow menu button is right-aligned.
+
+### Patch Changes
 
 - Fake entry to force publishing
 

package/dist/ConfirmationDialog/useConfirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfirm.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/useConfirm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAqB,KAAK,uBAAuB,EAAC,MAAM,sBAAsB,CAAA;AAErF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAuBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}
+{"version":3,"file":"useConfirm.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/useConfirm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAqB,KAAK,uBAAuB,EAAC,MAAM,sBAAsB,CAAA;AAIrF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AA0BlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}

package/dist/ConfirmationDialog/useConfirm.js

@@ -3,19 +3,23 @@ import { createRoot } from 'react-dom/client';
 import BaseStyles from '../BaseStyles.js';
 import { ConfirmationDialog } from './ConfirmationDialog.js';
 
+let hostElement = null;
 async function confirm(options) {
   const {
     content,
     ...confirmationDialogProps
   } = options;
   return new Promise(resolve => {
-    const hostElement = document.createElement('div');
-    document.body.append(hostElement);
+    hostElement ||= document.createElement('div');
+    if (!hostElement.isConnected) document.body.append(hostElement);
     const root = createRoot(hostElement);
     const onClose = gesture => {
       root.unmount();
-      hostElement.remove();
-      resolve(gesture === 'confirm');
+      if (gesture === 'confirm') {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
     };
     root.render(/*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
       ...confirmationDialogProps,

package/dist/UnderlineNav/UnderlineNav-263b4e8f.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineWrapper-GWONT{animation:prc-UnderlineNav-detect-overflow-6HuSH linear;animation-timeline:scroll(self block);--UnderlineNav_moreButton-visibility:hidden;--UnderlineNav_icons-display:inline}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons=true]{--UnderlineNav_icons-display:none}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-has-overflow=true]{--UnderlineNav_moreButton-visibility:visible}@keyframes prc-UnderlineNav-detect-overflow-6HuSH{0%,to{--UnderlineNav_moreButton-visibility:visible;--UnderlineNav_icons-display:none}}.prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:var(--UnderlineNav_icons-display)}.prc-UnderlineNav-MoreButtonContainer-Dnrq6{align-items:center;display:flex;visibility:var(--UnderlineNav_moreButton-visibility)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]{position:relative}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current] .prc-UnderlineNav-OverflowMenuItemLabel-F80v6{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]:after{background:var(--underlineNav-borderColor-active,#fd8c73);content:"";inset:var(--base-size-2,.125rem) auto var(--base-size-2,.125rem) 0;position:absolute;width:var(--base-size-2,.125rem)}.prc-UnderlineNav-MoreButtonDivider-dN0a-{border-left:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);display:inline-block;height:var(--base-size-24,1.5rem);margin-inline:var(--base-size-4,.25rem);width:0}.prc-UnderlineNav-MoreButton-Y8soj{font-weight:var(--base-text-weight-normal,400);margin:0;position:relative}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
+/*# sourceMappingURL=UnderlineNav-263b4e8f.css.map */

package/dist/UnderlineNav/UnderlineNav-263b4e8f.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,yCAIE,uDAAiC,CACjC,qCAAsC,CAEtC,2CAA4C,CAC5C,mCASF,CAPE,+DACE,iCACF,CAEA,iEACE,4CACF,CAGF,kDACE,MAEE,4CAA6C,CAC7C,iCACF,CACF,CAEA,wDACE,yCACF,CAEA,4CAGE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,wDACE,iBAcF,CAZE,sGACE,gDACF,CAEA,8DAME,yDAAkD,CALlD,UAAW,CAGX,kEAAmD,CADnD,iBAAkB,CADlB,gCAKF,CAGF,0CAEE,qFAAmE,CADnE,oBAAqB,CAIrB,iCAA2B,CAD3B,uCAAiC,CADjC,OAGF,CAEA,mCAEE,8CAA2C,CAD3C,QAAS,CAET,iBA2BF,CAzBE,mEACE,aACF,CAIA,sDACE,gDAiBF,CAfE,4DAQE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAaF,CAJE,8BAVF,4DAYI,yBAEJ,CADE","file":"UnderlineNav-263b4e8f.css","sourcesContent":[".UnderlineWrapper {\n  /* Progressive enhancement: Detect overflow using scroll-based animations.\n  The idiomatic way would be a scroll-state container query but browser support\n  is slightly better for animations. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  --UnderlineNav_moreButton-visibility: hidden;\n  --UnderlineNav_icons-display: inline;\n\n  &[data-hide-icons='true'] {\n    --UnderlineNav_icons-display: none;\n  }\n\n  &[data-has-overflow='true'] {\n    --UnderlineNav_moreButton-visibility: visible;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --UnderlineNav_moreButton-visibility: visible;\n    --UnderlineNav_icons-display: none;\n  }\n}\n\n.ItemsList [data-component='icon'] {\n  display: var(--UnderlineNav_icons-display);\n}\n\n.MoreButtonContainer {\n  display: flex;\n  visibility: var(--UnderlineNav_moreButton-visibility);\n  align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n  position: relative;\n\n  .OverflowMenuItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n  }\n\n  &::after {\n    content: '';\n    width: var(--base-size-2);\n    position: absolute;\n    inset: var(--base-size-2) auto var(--base-size-2) 0;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--underlineNav-borderColor-active);\n  }\n}\n\n.MoreButtonDivider {\n  display: inline-block;\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  width: 0;\n  margin-inline: var(--base-size-4);\n  height: var(--base-size-24);\n}\n\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  font-weight: var(--base-text-weight-normal);\n  position: relative;\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n\n  /* When the current item has overflowed into the menu, style the overflow\n   anchor so it looks like the current item (semibold text + active underline). */\n  &[data-current='true'] {\n    font-weight: var(--base-text-weight-semibold);\n\n    &::after {\n      position: absolute;\n      inset: auto 0 0;\n      margin-bottom: calc(-1 * var(--base-size-8));\n      height: 2px;\n      pointer-events: none;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n      @media (forced-colors: active) {\n        /* Support for Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n        background-color: LinkText;\n      }\n    }\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type UnderlineNavProps = {
     children: React.ReactNode;
     'aria-label'?: React.AriaAttributes['aria-label'];
@@ -15,6 +15,5 @@ export type UnderlineNavProps = {
      */
     variant?: 'inset' | 'flush';
 };
-export declare const MORE_BTN_WIDTH = 86;
 export declare const UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=UnderlineNav.d.ts.map

package/dist/UnderlineNav/UnderlineNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAqBtE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,cAAc,KAAK,CAAA;AAsGhC,eAAO,MAAM,YAAY,mFA0SxB,CAAA"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,YAAY,mFAiIxB,CAAA"}

package/dist/UnderlineNav/UnderlineNav.js

@@ -1,117 +1,19 @@
-import React, { forwardRef, useRef, useState, useCallback } from 'react';
-import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
-import { UnderlineNavContext } from './UnderlineNavContext.js';
-import { useResizeObserver } from '../hooks/useResizeObserver.js';
+import { forwardRef, useRef, useState, useMemo } from 'react';
 import VisuallyHidden from '../_VisuallyHidden.js';
-import { dividerStyles, baseMenuMinWidth, menuItemStyles } from './styles.js';
-import { UnderlineWrapper, UnderlineItemList, LoadingCounter, GAP } from '../internal/components/UnderlineTabbedInterface.js';
-import { TriangleDownIcon } from '@primer/octicons-react';
-import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
-import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
-import { useId } from '../hooks/useId.js';
 import { ActionList } from '../ActionList/index.js';
+import { UnderlineWrapper, UnderlineItemList, LoadingCounter } from '../internal/components/UnderlineTabbedInterface.js';
 import { invariant } from '../utils/invariant.js';
 import classes from './UnderlineNav.module.css.js';
-import { getAnchoredPosition } from '@primer/behaviors';
-import { getValidChildren } from './utils.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ButtonComponent } from '../Button/Button.js';
+import { UnderlineNavContext } from './UnderlineNavContext.js';
+import { UnderlineNavItemsRegistry } from './UnderlineNavItemsRegistry.js';
+import { clsx } from 'clsx';
+import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
+import { isCurrent, getValidChildren } from './utils.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SkeletonText } from '../SkeletonText/SkeletonText.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
+import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
-// When page is loaded, we don't have ref for the more button as it is not on the DOM yet.
-// However, we need to calculate number of possible items when the more button present as well. So using the width of the more button as a constant.
-const MORE_BTN_WIDTH = 86;
-// The height is needed to make sure we don't have a layout shift when the more button is the only item in the nav.
-const MORE_BTN_HEIGHT = 45;
-const overflowEffect = (navWidth, moreMenuWidth, childArray, childWidthArray, noIconChildWidthArray, updateListAndMenu) => {
-  let iconsVisible = true;
-  if (childWidthArray.length === 0) {
-    updateListAndMenu({
-      items: childArray,
-      menuItems: []
-    }, iconsVisible, false);
-    return;
-  }
-  const numberOfItemsPossible = calculatePossibleItems(childWidthArray, navWidth);
-  const numberOfItemsWithoutIconPossible = calculatePossibleItems(noIconChildWidthArray, navWidth);
-  // We need to take more menu width into account when calculating the number of items possible
-  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(noIconChildWidthArray, navWidth, moreMenuWidth || MORE_BTN_WIDTH);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const items = [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const menuItems = [];
-
-  // First, we check if we can fit all the items with their icons
-  if (childArray.length <= numberOfItemsPossible) {
-    items.push(...childArray);
-  } else if (childArray.length <= numberOfItemsWithoutIconPossible) {
-    // if we can't fit all the items with their icons, we check if we can fit all the items without their icons
-    iconsVisible = false;
-    items.push(...childArray);
-  } else {
-    // if we can't fit all the items without their icons, we keep the icons hidden and show the ones that doesn't fit into the list in the overflow menu
-    iconsVisible = false;
-
-    /* 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 = childArray.length - numberOfItemsPossibleWithMoreMenu;
-    const numberOfListItems = numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu;
-    for (const [index, child] of childArray.entries()) {
-      if (index < numberOfListItems) {
-        items.push(child);
-      } else {
-        const ariaCurrent = child.props['aria-current'];
-        const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false';
-        // We need to make sure to keep the selected item always visible.
-        // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
-        if (isCurrent && numberOfListItems > 0) {
-          // If selected item couldn't make in to the list, we swap it with the last item in the list.
-          const indexToReplaceAt = numberOfListItems - 1; // because we are replacing the last item in the list
-          // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
-          const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0];
-          menuItems.push(propsectiveAction);
-        } else {
-          menuItems.push(child);
-        }
-      }
-    }
-  }
-  updateListAndMenu({
-    items,
-    menuItems
-  }, iconsVisible, true);
-};
-const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) => {
-  const widthToFit = navWidth - moreMenuWidth;
-  let breakpoint = childWidthArray.length; // assume all items will fit
-  let sumsOfChildWidth = 0;
-  for (const [index, childWidth] of childWidthArray.entries()) {
-    sumsOfChildWidth = sumsOfChildWidth + childWidth.width + GAP;
-    if (sumsOfChildWidth > widthToFit) {
-      breakpoint = index;
-      break;
-    } else {
-      continue;
-    }
-  }
-  return breakpoint;
-};
-
-// Inline styles converted from baseMenuStyles for use as CSSProperties
-const baseMenuInlineStyles = {
-  position: 'absolute',
-  zIndex: 1,
-  top: '90%',
-  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-  borderRadius: 12,
-  background: 'var(--overlay-bgColor)',
-  listStyle: 'none',
-  minWidth: `${baseMenuMinWidth}px`,
-  maxWidth: '640px',
-  right: 0
-};
 const UnderlineNav = /*#__PURE__*/forwardRef(({
   as = 'nav',
   'aria-label': ariaLabel,
@@ -120,259 +22,111 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
   className,
   children
 }, forwardedRef) => {
-  var _listRef$current2;
+  var _registeredItems$entr;
   const backupRef = useRef(null);
   const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
   const listRef = useRef(null);
-  const moreMenuRef = useRef(null);
-  const moreMenuBtnRef = useRef(null);
-  const containerRef = React.useRef(null);
-  const disclosureWidgetId = useId();
-  const [isWidgetOpen, setIsWidgetOpen] = useState(false);
-  const [iconsVisible, setIconsVisible] = useState(true);
-  const [childWidthArray, setChildWidthArray] = useState([]);
-  const [noIconChildWidthArray, setNoIconChildWidthArray] = useState([]);
-  // Track whether the initial overflow calculation is complete to prevent CLS
-  const [isOverflowMeasured, setIsOverflowMeasured] = useState(false);
-  const validChildren = getValidChildren(children);
 
-  // Responsive props object manages which items are in the list and which items are in the menu.
-  const [responsiveProps, setResponsiveProps] = useState({
-    items: validChildren,
-    menuItems: []
-  });
+  /** Tracks whether any item has ever overflowed for the lifecycle of this component. Used to prevent flickering. */
+  const [hasEverOverflowed, setHasOverflowed] = useState(false);
+  const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState();
+  const overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter(entry => entry[1] !== null);
+  const isOverflowing = overflowMenuItems.length > 0;
+  if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
 
-  // Make sure to have the fresh props data for list items when children are changed (keeping aria-current up-to-date)
-  const listItems = responsiveProps.items.map(item => {
-    var _validChildren$find;
-    return (_validChildren$find = validChildren.find(child => child.key === item.key)) !== null && _validChildren$find !== void 0 ? _validChildren$find : item;
-  });
-
-  // Make sure to have the fresh props data for menu items when children are changed (keeping aria-current up-to-date)
-  const menuItems = responsiveProps.menuItems.map(menuItem => {
-    var _validChildren$find2;
-    return (_validChildren$find2 = validChildren.find(child => child.key === menuItem.key)) !== null && _validChildren$find2 !== void 0 ? _validChildren$find2 : menuItem;
-  });
-  // This is the case where the viewport is too narrow to show any list item with the more menu. In this case, we only show the dropdown
-  const onlyMenuVisible = responsiveProps.items.length === 0;
+  // Find the current item if it has overflowed into the menu, so we can reflect
+  // its "current" state on the overflow menu anchor.
+  const overflowingCurrentItem = overflowMenuItems.some(([, itemProps]) => isCurrent(itemProps));
+  const validChildren = getValidChildren(children);
   useDevOnlyEffect(() => {
     // Address illegal state where there are multiple items that have `aria-current='page'` attribute
-    const activeElements = validChildren.filter(child => {
-      return child.props['aria-current'] !== undefined;
-    });
+    const activeElements = validChildren.filter(child => isCurrent(child.props));
     !(activeElements.length <= 1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Only one current element is allowed') : invariant(false) : void 0;
     !ariaLabel ? process.env.NODE_ENV !== "production" ? invariant(false, 'Use the `aria-label` prop to provide an accessible label for assistive technology') : invariant(false) : void 0;
   }, [validChildren, ariaLabel]);
-  function getItemsWidth(itemText) {
-    var _noIconChildWidthArra, _noIconChildWidthArra2;
-    return (_noIconChildWidthArra = (_noIconChildWidthArra2 = noIconChildWidthArray.find(item => item.text === itemText)) === null || _noIconChildWidthArra2 === void 0 ? void 0 : _noIconChildWidthArra2.width) !== null && _noIconChildWidthArra !== void 0 ? _noIconChildWidthArra : 0;
-  }
-  const swapMenuItemWithListItem = (prospectiveListItem, indexOfProspectiveListItem, event, callback) => {
-    var _navRef$current$getBo, _navRef$current, _listRef$current$getB, _listRef$current;
-    // get the selected menu item's width
-    const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children);
-    // Check if there is any empty space on the right side of the list
-    const availableSpace = ((_navRef$current$getBo = (_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.getBoundingClientRect().width) !== null && _navRef$current$getBo !== void 0 ? _navRef$current$getBo : 0) - ((_listRef$current$getB = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.getBoundingClientRect().width) !== null && _listRef$current$getB !== void 0 ? _listRef$current$getB : 0);
-
-    // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
-    // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
-    const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace);
-    const indexToSliceAt = responsiveProps.items.length - 1 - index;
-    // Form the new list of items
-    const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt);
-    const updatedItemList = [...itemsLeftInList, prospectiveListItem];
-    // Form the new menu items
-    const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt);
-    const updatedMenuItems = [...menuItems];
-    // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
-    updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu);
-    callback({
-      items: updatedItemList,
-      menuItems: updatedMenuItems
-    }, false, true);
-  };
-  // How many items do we need to pull in to the menu to make room for the selected menu item.
-  function getBreakpointForItemSwapping(widthToFitIntoList, availableSpace) {
-    let widthToSwap = 0;
-    let breakpoint = 0;
-    for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
-      widthToSwap += getItemsWidth(item.props.children);
-      if (widthToFitIntoList < widthToSwap + availableSpace) {
-        breakpoint = index;
-        break;
-      }
-    }
-    return breakpoint;
-  }
-  const updateListAndMenu = useCallback((props, displayIcons, overflowMeasured) => {
-    setResponsiveProps(props);
-    setIconsVisible(displayIcons);
-    if (overflowMeasured) {
-      setIsOverflowMeasured(true);
-    }
-  }, []);
-  const setChildrenWidth = useCallback(size => {
-    setChildWidthArray(arr => {
-      const newArr = [...arr, size];
-      return newArr;
-    });
-  }, []);
-  const setNoIconChildrenWidth = useCallback(size => {
-    setNoIconChildWidthArray(arr => {
-      const newArr = [...arr, size];
-      return newArr;
-    });
-  }, []);
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false);
-  }, [setIsWidgetOpen]);
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    var _moreMenuBtnRef$curre;
-    (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
-  }, []);
-  const onAnchorClick = useCallback(event => {
-    if (event.defaultPrevented || event.button !== 0) {
-      return;
-    }
-    setIsWidgetOpen(isWidgetOpen => !isWidgetOpen);
-  }, []);
-  useOnEscapePress(event => {
-    if (isWidgetOpen) {
-      event.preventDefault();
-      closeOverlay();
-      focusOnMoreMenuBtn();
-    }
-  }, [isWidgetOpen]);
-  useOnOutsideClick({
-    onClickOutside: closeOverlay,
-    containerRef,
-    ignoreClickRefs: [moreMenuBtnRef]
-  });
-  useResizeObserver(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;
-    navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, noIconChildWidthArray, updateListAndMenu);
-  }, navRef);
-
-  // Compute menuInlineStyles if needed
-  let menuInlineStyles = {
-    ...baseMenuInlineStyles
-  };
-  if (containerRef.current && listRef.current) {
-    const {
-      left
-    } = getAnchoredPosition(containerRef.current, listRef.current, {
-      align: 'start',
-      side: 'outside-bottom'
-    });
-    menuInlineStyles = {
-      ...baseMenuInlineStyles,
-      right: undefined,
-      left
-    };
-  }
+  const contextValue = useMemo(() => ({
+    loadingCounters
+  }), [loadingCounters]);
   return /*#__PURE__*/jsxs(UnderlineNavContext.Provider, {
-    value: {
-      setChildrenWidth,
-      setNoIconChildrenWidth,
-      loadingCounters,
-      iconsVisible
-    },
+    value: contextValue,
     children: [ariaLabel && /*#__PURE__*/jsx(VisuallyHidden, {
       as: "h2",
       children: `${ariaLabel} navigation`
-    }), /*#__PURE__*/jsx(UnderlineWrapper, {
+    }), /*#__PURE__*/jsxs(UnderlineWrapper, {
       as: as,
       "aria-label": ariaLabel,
-      className: className,
+      className: clsx(classes.UnderlineWrapper, className),
       ref: navRef,
       "data-variant": variant,
-      "data-overflow-measured": isOverflowMeasured ? 'true' : 'false',
-      children: /*#__PURE__*/jsxs(UnderlineItemList, {
+      "data-overflow-mode": "wrap"
+      // Force icons to stay hidden, avoiding flickering as icons create/remove overflow
+      ,
+      "data-hide-icons": hasEverOverflowed ? 'true' : undefined
+      // Ensure button is shown (after initial render) on browsers that don't support scroll-driven animations
+      ,
+      "data-has-overflow": isOverflowing ? 'true' : undefined,
+      children: [/*#__PURE__*/jsx(UnderlineItemList, {
         ref: listRef,
         role: "list",
-        children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs("li", {
-          ref: moreMenuRef,
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            height: `${MORE_BTN_HEIGHT}px`
-          },
-          children: [!onlyMenuVisible && /*#__PURE__*/jsx("div", {
-            style: dividerStyles
-          }), /*#__PURE__*/jsx(ButtonComponent, {
-            ref: moreMenuBtnRef,
+        className: classes.ItemsList,
+        children: /*#__PURE__*/jsx(UnderlineNavItemsRegistry.Provider, {
+          setRegistry: setRegisteredItems,
+          children: children
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: classes.MoreButtonContainer,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classes.MoreButtonDivider
+        }), /*#__PURE__*/jsxs(ActionMenu, {
+          children: [/*#__PURE__*/jsx(ActionMenu.Button, {
             className: classes.MoreButton,
-            "aria-controls": disclosureWidgetId,
-            "aria-expanded": isWidgetOpen,
-            onClick: onAnchorClick,
-            trailingAction: TriangleDownIcon,
-            children: /*#__PURE__*/jsx("span", {
-              children: onlyMenuVisible ? /*#__PURE__*/jsxs(Fragment, {
-                children: [/*#__PURE__*/jsxs(VisuallyHidden, {
-                  as: "span",
-                  children: [`${ariaLabel}`, "\xA0"]
-                }), "Menu"]
-              }) : /*#__PURE__*/jsxs(Fragment, {
-                children: ["More", /*#__PURE__*/jsxs(VisuallyHidden, {
-                  as: "span",
-                  children: ["\xA0", `${ariaLabel} items`]
-                })]
-              })
+            variant: "invisible",
+            "data-component": "overflow-menu-button",
+            "data-current": overflowingCurrentItem ? 'true' : undefined,
+            "aria-label": overflowingCurrentItem ? `More items, including current item` : undefined,
+            children: /*#__PURE__*/jsxs("span", {
+              children: ["More", /*#__PURE__*/jsx(VisuallyHidden, {
+                as: "span",
+                children: " items"
+              })]
             })
-          }), /*#__PURE__*/jsx(ActionList, {
-            selectionVariant: "single",
-            ref: containerRef,
-            id: disclosureWidgetId,
-            style: {
-              ...((_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth ? baseMenuInlineStyles : menuInlineStyles),
-              display: isWidgetOpen ? 'block' : 'none'
-            },
-            children: menuItems.map((menuItem, index) => {
-              const {
-                children: menuItemChildren,
-                counter,
-                'aria-current': ariaCurrent,
-                onSelect,
-                ...menuItemProps
-              } = menuItem.props;
-
-              // This logic is used to pop the selected item out of the menu and into the list when the navigation is control externally
-              if (Boolean(ariaCurrent) && ariaCurrent !== 'false') {
-                const event = new MouseEvent('click');
-                !onlyMenuVisible && swapMenuItemWithListItem(menuItem, index,
-                // @ts-ignore - not a big deal because it is internally creating an event but ask help
-                event, updateListAndMenu);
-              }
-              return /*#__PURE__*/jsx(ActionList.LinkItem, {
-                style: menuItemStyles,
-                onClick: event => {
-                  // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
-                  !onlyMenuVisible && swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu);
-                  closeOverlay();
-                  focusOnMoreMenuBtn();
-                  // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
-                  typeof onSelect === 'function' && onSelect(event);
-                },
-                ...menuItemProps,
-                children: /*#__PURE__*/jsxs("span", {
-                  className: classes.MenuItemContent,
-                  children: [menuItemChildren, loadingCounters ? /*#__PURE__*/jsx(LoadingCounter, {}) : counter !== undefined && /*#__PURE__*/jsx("span", {
-                    "data-component": "counter",
-                    children: /*#__PURE__*/jsx(CounterLabel, {
-                      children: counter
+          }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+            children: /*#__PURE__*/jsx(ActionList, {
+              children: registeredItems === undefined ? /*#__PURE__*/jsx(ActionList.Item, {
+                children: /*#__PURE__*/jsx(SkeletonText, {})
+              }) : overflowMenuItems.map(([key, allProps]) => {
+                const {
+                  children: menuItemChildren,
+                  counter,
+                  onSelect,
+                  ...menuItemProps
+                } = allProps;
+                return /*#__PURE__*/jsxs(ActionList.LinkItem, {
+                  className: classes.OverflowMenuItem,
+                  onClick: event => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
+                  ...menuItemProps,
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: classes.OverflowMenuItemLabel,
+                    children: menuItemChildren
+                  }), loadingCounters ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+                    children: /*#__PURE__*/jsx(LoadingCounter, {})
+                  }) : counter !== undefined && /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+                    children: /*#__PURE__*/jsx("span", {
+                      "data-component": "counter",
+                      children: /*#__PURE__*/jsx(CounterLabel, {
+                        children: counter
+                      })
                     })
                   })]
-                })
-              }, menuItemChildren);
+                }, key);
+              })
             })
           })]
         })]
-      })
+      })]
     })]
   });
 });
 UnderlineNav.displayName = 'UnderlineNav';
 
-export { MORE_BTN_WIDTH, UnderlineNav };
+export { UnderlineNav };

package/dist/UnderlineNav/UnderlineNav.module.css.js

@@ -1,5 +1,5 @@
-import './UnderlineNav-4344d9b0.css';
+import './UnderlineNav-263b4e8f.css';
 
-var classes = {"MenuItemContent":"prc-UnderlineNav-MenuItemContent-3J7gB","MoreButton":"prc-UnderlineNav-MoreButton-Y8soj"};
+var classes = {"UnderlineWrapper":"prc-UnderlineNav-UnderlineWrapper-GWONT","detect-overflow":"prc-UnderlineNav-detect-overflow-6HuSH","ItemsList":"prc-UnderlineNav-ItemsList-oj8gN","MoreButtonContainer":"prc-UnderlineNav-MoreButtonContainer-Dnrq6","OverflowMenuItem":"prc-UnderlineNav-OverflowMenuItem-7SG7M","OverflowMenuItemLabel":"prc-UnderlineNav-OverflowMenuItemLabel-F80v6","MoreButtonDivider":"prc-UnderlineNav-MoreButtonDivider-dN0a-","MoreButton":"prc-UnderlineNav-MoreButton-Y8soj"};
 
 export { classes as default };

package/dist/UnderlineNav/UnderlineNavContext.d.ts

@@ -1,14 +1,4 @@
-import type React from 'react';
-export declare const UnderlineNavContext: React.Context<{
-    setChildrenWidth: React.Dispatch<{
-        text: string;
-        width: number;
-    }>;
-    setNoIconChildrenWidth: React.Dispatch<{
-        text: string;
-        width: number;
-    }>;
+export declare const UnderlineNavContext: import("react").Context<{
     loadingCounters: boolean;
-    iconsVisible: boolean;
 }>;
 //# sourceMappingURL=UnderlineNavContext.d.ts.map

package/dist/UnderlineNav/UnderlineNavContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNavContext.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,eAAO,MAAM,mBAAmB;sBACZ,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;4BACvC,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;qBACpD,OAAO;kBACV,OAAO;EAMrB,CAAA"}
+{"version":3,"file":"UnderlineNavContext.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavContext.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;qBACb,OAAO;EAGxB,CAAA"}

package/dist/UnderlineNav/UnderlineNavContext.js

@@ -1,10 +1,7 @@
 import { createContext } from 'react';
 
 const UnderlineNavContext = /*#__PURE__*/createContext({
-  setChildrenWidth: () => null,
-  setNoIconChildrenWidth: () => null,
-  loadingCounters: false,
-  iconsVisible: true
+  loadingCounters: false
 });
 
 export { UnderlineNavContext };

package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineNavItem-syRjR{align-items:center;display:flex;flex-direction:column;overflow:hidden}.prc-UnderlineNav-UnderlineNavItem-syRjR[aria-hidden]{visibility:hidden}
+/*# sourceMappingURL=UnderlineNavItem-402cd41c.css.map */

package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNavItem.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,kBAAmB,CAFnB,YAAa,CACb,qBAAsB,CAEtB,eAOF,CALE,sDAGE,iBACF","file":"UnderlineNavItem-402cd41c.css","sourcesContent":[".UnderlineNavItem {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n\n  &[aria-hidden] {\n    /* Overflowing items will already be clipped out of view, but might as well\n    also hide them for performance and to ensure they can't accidentally appear */\n    visibility: hidden;\n  }\n}\n"]}