@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

package/dist/TreeView/TreeView.module.css.js

@@ -0,0 +1,5 @@
+import './TreeView-bdf34914.css';
+
+var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-eZtxW","TreeViewItem":"prc-TreeView-TreeViewItem-ShJr0","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer--2Rkn","TreeViewItemSkeleton":"prc-TreeView-TreeViewItemSkeleton-fqk59","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-gWUdE","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-nEgP-","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-t-AEB","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-f0r0b","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-smZM-","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-dRlGq","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-VXx8I","TreeViewItemTrailingAction":"prc-TreeView-TreeViewItemTrailingAction-EZETP","TreeViewItemTrailingActionButton":"prc-TreeView-TreeViewItemTrailingActionButton-u87Ku","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-KPSSL","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-PHbeP","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-4-mPv","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-wnBY9"};
+
+export { classes as default };

package/dist/TreeView/shared.js

@@ -0,0 +1,13 @@
+/**
+ * Returns the accessible name of an element
+ */
+function getAccessibleName(element) {
+  var _document$getElementB, _document$getElementB2;
+  const label = element.getAttribute('aria-label');
+  const labelledby = element.getAttribute('aria-labelledby');
+  if (label) return label;
+  if (labelledby) return (_document$getElementB = (_document$getElementB2 = document.getElementById(labelledby)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.textContent) !== null && _document$getElementB !== void 0 ? _document$getElementB : '';
+  return element.textContent;
+}
+
+export { getAccessibleName };

package/dist/Truncate/Truncate.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+type TruncateProps = React.HTMLAttributes<HTMLElement> & {
+    title: string;
+    inline?: boolean;
+    expandable?: boolean;
+    maxWidth?: number | string;
+};
+declare const Truncate: PolymorphicForwardRefComponent<"div", TruncateProps>;
+export type { TruncateProps };
+export default Truncate;
+//# sourceMappingURL=Truncate.d.ts.map

package/dist/Truncate/Truncate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../src/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,QAAA,MAAM,QAAQ,EAuBR,8BAA8B,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AAM1D,YAAY,EAAC,aAAa,EAAC,CAAA;AAC3B,eAAe,QAAQ,CAAA"}

package/dist/Truncate/Truncate.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import classes from './Truncate.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Truncate = /*#__PURE__*/React.forwardRef(function Truncate({
+  as: Component = 'div',
+  children,
+  className,
+  title,
+  inline,
+  expandable,
+  maxWidth = 125,
+  style,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(Component, {
+    ...rest,
+    ref: ref,
+    className: clsx(className, classes.Truncate),
+    "data-expandable": expandable,
+    "data-inline": inline,
+    title: title,
+    style: {
+      ...style,
+      [`--truncate-max-width`]: typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined
+    },
+    children: children
+  });
+});
+if (process.env.NODE_ENV !== "production") {
+  Truncate.displayName = 'Truncate';
+}
+
+export { Truncate as default };

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-MenuItemContent-k4WNL{align-items:center;display:flex;justify-content:space-between}.prc-UnderlineNav-MoreButton-smema{background:transparent;border:0;box-shadow:none;font-weight:var(--base-text-weight-normal,400);margin:0;padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-UnderlineNav-MoreButton-smema>[data-component=trailingVisual]{margin-left:0}
+/*# sourceMappingURL=UnderlineNav-4344d9b0.css.map */

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css"],"names":[],"mappings":"AAAA,wCAEE,kBAAmB,CADnB,YAAa,CAEb,6BACF,CAGA,mCAGE,sBAAuB,CADvB,QAAS,CAGT,eAAgB,CADhB,8CAA2C,CAH3C,QAAS,CAQT,0DAKF,CAHE,mEACE,aACF","file":"UnderlineNav-4344d9b0.css","sourcesContent":[".MenuItemContent {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* More button styles migrated from styles.ts (was moreBtnStyles) */\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  border: 0;\n  background: transparent;\n  font-weight: var(--base-text-weight-normal);\n  box-shadow: none;\n  padding-top: var(--base-size-4);\n  padding-bottom: var(--base-size-4);\n  padding-left: var(--base-size-8);\n  padding-right: var(--base-size-8);\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type UnderlineNavProps = {
+    children: React.ReactNode;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    as?: React.ElementType;
+    className?: string;
+    /**
+     * loading state for all counters. It displays loading animation for individual counters (UnderlineNav.Item) until all are resolved. It is needed to prevent multiple layout shift.
+     */
+    loadingCounters?: boolean;
+    /**
+     * There are cases where you may not want the horizontal padding on items,
+     * and panels to make the tabs look horizontally aligned with the content above and below it.
+     * Setting this to `flush` will remove the horizontal padding on the items.
+     */
+    variant?: 'inset' | 'flush';
+};
+export declare const MORE_BTN_WIDTH = 86;
+export declare const getValidChildren: (children: React.ReactNode) => React.ReactElement[];
+export declare const UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=UnderlineNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6D,MAAM,OAAO,CAAA;AAmBjF,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;AAoEhC,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KACgC,KAAK,CAAC,YAAY,EAC3G,CAAA;AAgCD,eAAO,MAAM,YAAY,mFA8RxB,CAAA"}

package/dist/UnderlineNav/UnderlineNav.js

@@ -0,0 +1,375 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { UnderlineNavContext } from './UnderlineNavContext.js';
+import { useResizeObserver } from '../hooks/useResizeObserver.js';
+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 { invariant } from '../utils/invariant.js';
+import classes from './UnderlineNav.module.css.js';
+import { getAnchoredPosition } from '@primer/behaviors';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ButtonComponent } from '../Button/Button.js';
+import CounterLabel from '../CounterLabel/CounterLabel.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);
+  }
+  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);
+  const items = [];
+  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);
+};
+const getValidChildren = children => {
+  return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
+};
+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,
+  loadingCounters = false,
+  variant = 'inset',
+  className,
+  children
+}, forwardedRef) => {
+  var _listRef$current2;
+  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([]);
+  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;
+  });
+
+  // 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;
+  if (process.env.NODE_ENV !== "production") {
+    // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      // 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;
+      });
+      !(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;
+    });
+  }
+  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);
+  };
+  // 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) => {
+    setResponsiveProps(props);
+    setIconsVisible(displayIcons);
+  }, []);
+  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
+    };
+  }
+  return /*#__PURE__*/jsxs(UnderlineNavContext.Provider, {
+    value: {
+      setChildrenWidth,
+      setNoIconChildrenWidth,
+      loadingCounters,
+      iconsVisible
+    },
+    children: [ariaLabel && /*#__PURE__*/jsx(VisuallyHidden, {
+      as: "h2",
+      children: `${ariaLabel} navigation`
+    }), /*#__PURE__*/jsx(UnderlineWrapper, {
+      as: as,
+      "aria-label": ariaLabel,
+      className: className,
+      ref: navRef,
+      "data-variant": variant,
+      children: /*#__PURE__*/jsxs(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.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`]
+                })]
+              })
+            })
+          }), /*#__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
+                    })
+                  })]
+                })
+              }, menuItemChildren);
+            })
+          })]
+        })]
+      })
+    })]
+  });
+});
+UnderlineNav.displayName = 'UnderlineNav';
+
+export { MORE_BTN_WIDTH, UnderlineNav, getValidChildren };

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

@@ -0,0 +1,5 @@
+import './UnderlineNav-4344d9b0.css';
+
+var classes = {"MenuItemContent":"prc-UnderlineNav-MenuItemContent-k4WNL","MoreButton":"prc-UnderlineNav-MoreButton-smema"};
+
+export { classes as default };

package/dist/UnderlineNav/UnderlineNavContext.d.ts

@@ -0,0 +1,14 @@
+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;
+    }>;
+    loadingCounters: boolean;
+    iconsVisible: boolean;
+}>;
+//# sourceMappingURL=UnderlineNavContext.d.ts.map

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

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

package/dist/UnderlineNav/UnderlineNavContext.js

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

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineNavItem--xDk1{align-items:center;display:flex;flex-direction:column}
+/*# sourceMappingURL=UnderlineNavItem-b65e8fd3.css.map */

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNavItem.module.css"],"names":[],"mappings":"AAAA,yCAGE,kBAAmB,CAFnB,YAAa,CACb,qBAEF","file":"UnderlineNavItem-b65e8fd3.css","sourcesContent":[".UnderlineNavItem {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n"]}

package/dist/UnderlineNav/UnderlineNavItem.d.ts

@@ -0,0 +1,42 @@
+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
+     */
+    icon?: React.FunctionComponent<IconProps> | React.ReactElement;
+    /**
+     * Renders `UnderlineNav.Item` as given component i.e. react-router's Link
+     **/
+    as?: React.ElementType | 'a';
+    /**
+     * Counter
+     */
+    counter?: number | string;
+} & LinkProps;
+export declare const UnderlineNavItem: PolymorphicForwardRefComponent<"a", UnderlineNavItemProps>;
+//# sourceMappingURL=UnderlineNavItem.d.ts.map

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

@@ -0,0 +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;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAC9D;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,gBAAgB,EAsExB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}