@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/TreeView/useTypeahead.js

@@ -1,120 +1,98 @@
-import { c } from 'react-compiler-runtime';
-import React from 'react';
-import useSafeTimeout from '../hooks/useSafeTimeout.js';
-import { getAccessibleName } from './shared.js';
-import { useTreeItemCache } from './useTreeItemCache.js';
-
+import useSafeTimeout from "../hooks/useSafeTimeout.js";
+import { getAccessibleName } from "./shared.js";
+import { useTreeItemCache } from "./useTreeItemCache.js";
+import { c } from "react-compiler-runtime";
+import React from "react";
+//#region src/TreeView/useTypeahead.ts
 function useTypeahead(t0) {
-  const $ = c(12);
-  const {
-    containerRef,
-    onFocusChange
-  } = t0;
-  const searchValue = React.useRef("");
-  const timeoutRef = React.useRef(0);
-  const onFocusChangeRef = React.useRef(onFocusChange);
-  const {
-    safeSetTimeout,
-    safeClearTimeout
-  } = useSafeTimeout();
-  const {
-    getTreeItems
-  } = useTreeItemCache(containerRef);
-  let t1;
-  let t2;
-  if ($[0] !== onFocusChange) {
-    t1 = () => {
-      onFocusChangeRef.current = onFocusChange;
-    };
-    t2 = [onFocusChange];
-    $[0] = onFocusChange;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  React.useEffect(t1, t2);
-  let t3;
-  if ($[3] !== containerRef || $[4] !== getTreeItems) {
-    t3 = searchValue_0 => {
-      if (!searchValue_0) {
-        return;
-      }
-      if (!containerRef.current) {
-        return;
-      }
-      const elements = getTreeItems();
-      const activeIndex = elements.findIndex(_temp);
-      let sortedElements = wrapArray(elements, activeIndex);
-      if (searchValue_0.length === 1) {
-        sortedElements = sortedElements.slice(1);
-      }
-      const nextElement = sortedElements.find(element_0 => {
-        const name = getAccessibleName(element_0).toLowerCase();
-        return name.startsWith(searchValue_0.toLowerCase());
-      });
-      if (nextElement) {
-        onFocusChangeRef.current(nextElement);
-      }
-    };
-    $[3] = containerRef;
-    $[4] = getTreeItems;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  const focusSearchValue = t3;
-  let t4;
-  let t5;
-  if ($[6] !== containerRef || $[7] !== focusSearchValue || $[8] !== safeClearTimeout || $[9] !== safeSetTimeout) {
-    t4 = () => {
-      if (!containerRef.current) {
-        return;
-      }
-      const container = containerRef.current;
-      const onKeyDown = function onKeyDown(event) {
-        if (!event.key || event.key.length > 1 || event.key === " ") {
-          return;
-        }
-        if (event.ctrlKey || event.altKey || event.metaKey) {
-          return;
-        }
-        searchValue.current = searchValue.current + event.key;
-        focusSearchValue(searchValue.current);
-        safeClearTimeout(timeoutRef.current);
-        timeoutRef.current = safeSetTimeout(() => searchValue.current = "", 300);
-        event.preventDefault();
-        event.stopPropagation();
-      };
-      container.addEventListener("keydown", onKeyDown);
-      return () => container.removeEventListener("keydown", onKeyDown);
-    };
-    t5 = [containerRef, focusSearchValue, safeClearTimeout, safeSetTimeout];
-    $[6] = containerRef;
-    $[7] = focusSearchValue;
-    $[8] = safeClearTimeout;
-    $[9] = safeSetTimeout;
-    $[10] = t4;
-    $[11] = t5;
-  } else {
-    t4 = $[10];
-    t5 = $[11];
-  }
-  React.useEffect(t4, t5);
+	const $ = c(12);
+	const { containerRef, onFocusChange } = t0;
+	const searchValue = React.useRef("");
+	const timeoutRef = React.useRef(0);
+	const onFocusChangeRef = React.useRef(onFocusChange);
+	const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
+	const { getTreeItems } = useTreeItemCache(containerRef);
+	let t1;
+	let t2;
+	if ($[0] !== onFocusChange) {
+		t1 = () => {
+			onFocusChangeRef.current = onFocusChange;
+		};
+		t2 = [onFocusChange];
+		$[0] = onFocusChange;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[3] !== containerRef || $[4] !== getTreeItems) {
+		t3 = (searchValue_0) => {
+			if (!searchValue_0) return;
+			if (!containerRef.current) return;
+			const elements = getTreeItems();
+			let sortedElements = wrapArray(elements, elements.findIndex(_temp));
+			if (searchValue_0.length === 1) sortedElements = sortedElements.slice(1);
+			const nextElement = sortedElements.find((element_0) => {
+				return getAccessibleName(element_0).toLowerCase().startsWith(searchValue_0.toLowerCase());
+			});
+			if (nextElement) onFocusChangeRef.current(nextElement);
+		};
+		$[3] = containerRef;
+		$[4] = getTreeItems;
+		$[5] = t3;
+	} else t3 = $[5];
+	const focusSearchValue = t3;
+	let t4;
+	let t5;
+	if ($[6] !== containerRef || $[7] !== focusSearchValue || $[8] !== safeClearTimeout || $[9] !== safeSetTimeout) {
+		t4 = () => {
+			if (!containerRef.current) return;
+			const container = containerRef.current;
+			const onKeyDown = function onKeyDown(event) {
+				if (!event.key || event.key.length > 1 || event.key === " ") return;
+				if (event.ctrlKey || event.altKey || event.metaKey) return;
+				searchValue.current = searchValue.current + event.key;
+				focusSearchValue(searchValue.current);
+				safeClearTimeout(timeoutRef.current);
+				timeoutRef.current = safeSetTimeout(() => searchValue.current = "", 300);
+				event.preventDefault();
+				event.stopPropagation();
+			};
+			container.addEventListener("keydown", onKeyDown);
+			return () => container.removeEventListener("keydown", onKeyDown);
+		};
+		t5 = [
+			containerRef,
+			focusSearchValue,
+			safeClearTimeout,
+			safeSetTimeout
+		];
+		$[6] = containerRef;
+		$[7] = focusSearchValue;
+		$[8] = safeClearTimeout;
+		$[9] = safeSetTimeout;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t4 = $[10];
+		t5 = $[11];
+	}
+	React.useEffect(t4, t5);
 }
-
 /**
- * Wraps an array around itself at a given start index
- *
- * @example
- * wrapArray(['a', 'b', 'c', 'd'], 2) // ['c', 'd', 'a', 'b']
- */
+* Wraps an array around itself at a given start index
+*
+* @example
+* wrapArray(['a', 'b', 'c', 'd'], 2) // ['c', 'd', 'a', 'b']
+*/
 function _temp(element) {
-  return element === document.activeElement;
+	return element === document.activeElement;
 }
 function wrapArray(array, startIndex) {
-  return array.map((_, index) => array[(startIndex + index) % array.length]);
+	return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
-
+//#endregion
 export { useTypeahead };

package/dist/Truncate/Truncate.d.ts

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

package/dist/Truncate/Truncate.js

@@ -1,35 +1,23 @@
-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
-  });
+import Truncate_module_css_default from "./Truncate.module.css.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+//#region src/Truncate/Truncate.tsx
+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,
+		className: clsx(className, Truncate_module_css_default.Truncate),
+		"data-expandable": expandable,
+		"data-inline": inline,
+		title,
+		style: {
+			...style,
+			[`--truncate-max-width`]: typeof maxWidth === "number" ? `${maxWidth}px` : typeof maxWidth === "string" ? maxWidth : void 0
+		},
+		children
+	});
 });
-if (process.env.NODE_ENV !== "production") {
-  Truncate.displayName = 'Truncate';
-}
-
+Truncate.displayName = "Truncate";
+//#endregion
 export { Truncate as default };

package/dist/Truncate/Truncate.module.css.js

@@ -1,5 +1,5 @@
-import './Truncate-030d5f52.css';
-
-var classes = {"Truncate":"prc-Truncate-Truncate-2G1eo"};
-
-export { classes as default };
+import "./Truncate-030d5f52.css";
+//#region src/Truncate/Truncate.module.css.js
+var Truncate_module_css_default = { "Truncate": "prc-Truncate-Truncate-2G1eo" };
+//#endregion
+export { Truncate_module_css_default as default };

package/dist/Truncate/index.d.ts

@@ -1,3 +1,2 @@
-export { default } from './Truncate';
-export type { TruncateProps } from './Truncate';
-//# sourceMappingURL=index.d.ts.map
+import Truncate, { TruncateProps } from "./Truncate.js";
+export { type TruncateProps, Truncate as default };

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -1,19 +1,21 @@
-import type 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';
+import React from "react";
+
+//#region src/UnderlineNav/UnderlineNav.d.ts
+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 UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;
-//# sourceMappingURL=UnderlineNav.d.ts.map
+//#endregion
+export { UnderlineNavProps };

package/dist/UnderlineNav/UnderlineNav.js

@@ -1,138 +1,96 @@
-import { forwardRef, useRef, useState, useMemo } from 'react';
-import VisuallyHidden from '../_VisuallyHidden.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 { 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';
-
-const UnderlineNav = /*#__PURE__*/forwardRef(({
-  as = 'nav',
-  'aria-label': ariaLabel,
-  loadingCounters = false,
-  variant = 'inset',
-  className,
-  children
-}, forwardedRef) => {
-  var _registeredItems$entr;
-  const backupRef = useRef(null);
-  const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
-  const listRef = useRef(null);
-
-  /** 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);
-
-  // 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 => 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]);
-  const contextValue = useMemo(() => ({
-    loadingCounters
-  }), [loadingCounters]);
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  // 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: contextValue,
-    children: [ariaLabel && /*#__PURE__*/jsx(VisuallyHidden, {
-      as: "h2",
-      children: `${ariaLabel} navigation`
-    }), /*#__PURE__*/jsxs(UnderlineWrapper, {
-      as: as,
-      "aria-label": ariaLabel,
-      className: clsx(classes.UnderlineWrapper, className),
-      ref: navRef,
-      "data-variant": variant,
-      "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",
-        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,
-            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(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
-                      })
-                    })
-                  })]
-                }, key);
-              })
-            })
-          })]
-        })]
-      })]
-    })]
-  });
+import CounterLabel from "../CounterLabel/CounterLabel.js";
+import { invariant } from "../utils/invariant.js";
+import VisuallyHidden from "../_VisuallyHidden.js";
+import { useDevOnlyEffect } from "../internal/hooks/useDevOnlyEffect.js";
+import { ActionList } from "../ActionList/index.js";
+import { ActionMenu } from "../ActionMenu/ActionMenu.js";
+import { SkeletonText } from "../SkeletonText/SkeletonText.js";
+import { LoadingCounter, UnderlineItemList, UnderlineWrapper } from "../internal/components/UnderlineTabbedInterface.js";
+import UnderlineNav_module_css_default from "./UnderlineNav.module.css.js";
+import { UnderlineNavContext } from "./UnderlineNavContext.js";
+import { UnderlineNavItemsRegistry } from "./UnderlineNavItemsRegistry.js";
+import { getValidChildren, isCurrent } from "./utils.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from "react";
+//#region src/UnderlineNav/UnderlineNav.tsx
+const UnderlineNav = /*#__PURE__*/ forwardRef(({ as = "nav", "aria-label": ariaLabel, loadingCounters = false, variant = "inset", className, children }, forwardedRef) => {
+	var _registeredItems$entr;
+	const backupRef = useRef(null);
+	const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+	const listRef = useRef(null);
+	/** 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);
+	const overflowingCurrentItem = overflowMenuItems.some(([, itemProps]) => isCurrent(itemProps));
+	const validChildren = getValidChildren(children);
+	useDevOnlyEffect(() => {
+		!(validChildren.filter((child) => isCurrent(child.props)).length <= 1) && invariant(false, "Only one current element is allowed");
+		!ariaLabel && invariant(false, "Use the `aria-label` prop to provide an accessible label for assistive technology");
+	}, [validChildren, ariaLabel]);
+	const contextValue = useMemo(() => ({ loadingCounters }), [loadingCounters]);
+	const [menuOpen, setMenuOpen] = useState(false);
+	if (menuOpen && !isOverflowing) setMenuOpen(false);
+	return /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
+		value: contextValue,
+		children: [ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
+			as: "h2",
+			children: `${ariaLabel} navigation`
+		}), /*#__PURE__*/ jsxs(UnderlineWrapper, {
+			as,
+			"aria-label": ariaLabel,
+			className: clsx(UnderlineNav_module_css_default.UnderlineWrapper, className),
+			ref: navRef,
+			"data-variant": variant,
+			"data-overflow-mode": "wrap",
+			"data-hide-icons": hasEverOverflowed ? "true" : void 0,
+			"data-has-overflow": isOverflowing ? "true" : void 0,
+			children: [/*#__PURE__*/ jsx(UnderlineItemList, {
+				ref: listRef,
+				role: "list",
+				className: UnderlineNav_module_css_default.ItemsList,
+				children: /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
+					setRegistry: setRegisteredItems,
+					children
+				})
+			}), /*#__PURE__*/ jsxs("div", {
+				className: UnderlineNav_module_css_default.MoreButtonContainer,
+				children: [/*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider }), /*#__PURE__*/ jsxs(ActionMenu, {
+					open: menuOpen,
+					onOpenChange: setMenuOpen,
+					children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
+						className: UnderlineNav_module_css_default.MoreButton,
+						variant: "invisible",
+						"data-component": "overflow-menu-button",
+						"data-current": overflowingCurrentItem ? "true" : void 0,
+						"aria-label": overflowingCurrentItem ? `More items, including current item` : void 0,
+						children: /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
+							as: "span",
+							children: " items"
+						})] })
+					}), /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: registeredItems === void 0 ? /*#__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: UnderlineNav_module_css_default.OverflowMenuItem,
+							children: [/*#__PURE__*/ jsx("span", {
+								className: UnderlineNav_module_css_default.OverflowMenuItemLabel,
+								children: menuItemChildren
+							}), loadingCounters ? /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx(LoadingCounter, {}) }) : counter !== void 0 && /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx("span", {
+								"data-component": "counter",
+								children: /*#__PURE__*/ jsx(CounterLabel, { children: counter })
+							}) })]
+						}, key);
+					}) }) })]
+				})]
+			})]
+		})]
+	});
 });
-UnderlineNav.displayName = 'UnderlineNav';
-
+UnderlineNav.displayName = "UnderlineNav";
+//#endregion
 export { UnderlineNav };

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

@@ -1,5 +1,14 @@
-import './UnderlineNav-47547980.css';
-
-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 };
+import "./UnderlineNav-47547980.css";
+//#region src/UnderlineNav/UnderlineNav.module.css.js
+var UnderlineNav_module_css_default = {
+	"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"
+};
+//#endregion
+export { UnderlineNav_module_css_default as default };

package/dist/UnderlineNav/UnderlineNavContext.js

@@ -1,7 +1,5 @@
-import { createContext } from 'react';
-
-const UnderlineNavContext = /*#__PURE__*/createContext({
-  loadingCounters: false
-});
-
+import { createContext } from "react";
+//#region src/UnderlineNav/UnderlineNavContext.tsx
+const UnderlineNavContext = /*#__PURE__*/ createContext({ loadingCounters: false });
+//#endregion
 export { UnderlineNavContext };