@primer/react 38.30.0-rc.dc0369509 → 38.30.1-rc.2d1806208

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,117 @@ 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: []
-  });
 
-  // 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;
-  });
+  /** 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 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);
+  const contextValue = useMemo(() => ({
+    loadingCounters
+  }), [loadingCounters]);
+  const [menuOpen, setMenuOpen] = useState(false);
 
-    // 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
-    };
-  }
+  // Edge case to avoid empty menu: close the menu if it's open but there's no longer an overflow (window resized or items removed)
+  if (menuOpen && !isOverflowing) setMenuOpen(false);
   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, {
+          open: menuOpen,
+          onOpenChange: setMenuOpen,
+          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, {
+                  onClick: event => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
+                  ...menuItemProps,
+                  className: classes.OverflowMenuItem,
+                  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-47547980.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"]}

package/dist/UnderlineNav/UnderlineNavItem.d.ts

@@ -1,47 +1,4 @@
-import React from 'react';
-import type { IconProps } from '@primer/octicons-react';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-export type LinkProps = {
-    download?: string;
-    href?: string;
-    hrefLang?: string;
-    media?: string;
-    ping?: string;
-    rel?: string;
-    target?: string;
-    type?: string;
-    referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
-};
-export type UnderlineNavItemProps = {
-    /**
-     * Primary content for an UnderlineNav
-     */
-    children?: React.ReactNode;
-    /**
-     * Callback that will trigger both on click selection and keyboard selection.
-     */
-    onSelect?: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => void;
-    /**
-     * Is `UnderlineNav.Item` current page?
-     */
-    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
-    /**
-     *  Icon before the text
-     *  @deprecated Use the `leadingVisual` prop instead
-     */
-    icon?: React.FunctionComponent<IconProps> | React.ReactElement<any>;
-    /**
-     * Render a visual before the text
-     */
-    leadingVisual?: React.ReactElement;
-    /**
-     * Renders `UnderlineNav.Item` as given component i.e. react-router's Link
-     **/
-    as?: React.ElementType | 'a';
-    /**
-     * Counter
-     */
-    counter?: number | string;
-} & LinkProps;
+import { type UnderlineNavItemProps } from './UnderlineNavItemsRegistry';
 export declare const UnderlineNavItem: PolymorphicForwardRefComponent<"a", UnderlineNavItemProps>;
 //# sourceMappingURL=UnderlineNavItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNavItem.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAExG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAE5F;;;OAGG;IAEH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAEnE;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAElC;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,gBAAgB,EAgFxB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}
+{"version":3,"file":"UnderlineNavItem.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,EAAC,KAAK,qBAAqB,EAA4B,MAAM,6BAA6B,CAAA;AAEjG,eAAO,MAAM,gBAAgB,EA0EvB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}