colibri-ui 0.8.97 → 0.8.99

package/esm/Chip/index.js

@@ -11,13 +11,11 @@ const Chip = _a => {
       onClick,
       onClickIcon,
       size = "m",
-      testID = "chip",
       variant = "primary"
     } = _a,
-    props = __rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID", "variant"]);
+    props = __rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "variant"]);
   return /*#__PURE__*/React.createElement("span", Object.assign({
-    className: styles.chip,
-    "data-testid": testID
+    className: styles.chip
   }, props), /*#__PURE__*/React.createElement("span", {
     className: clsx(styles.inner, styles[`inner_variant_${variant}`], {
       [styles["inner_active"]]: iconEnd || isActive,

package/esm/Chip/index.props.d.ts

@@ -1,9 +1,9 @@
+import type { TestIdProps } from "../helpers/testId";
 export type ChipSize = "s" | "m" | "l";
 export type ChipVariant = "primary" | "secondary" | "outline" | "pseudo" | "alert" | "success" | "clear";
-export type ChipProps = {
+export type ChipProps = TestIdProps & {
     size?: ChipSize;
     variant?: ChipVariant;
-    testID?: string;
     isActive?: boolean;
     iconEnd?: React.ReactNode;
     onClick?: () => void;

package/esm/ColorPicker/ColorPicker.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ColorPickerProps } from "./index.props";
-export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, }: ColorPickerProps) => React.JSX.Element;
+export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, "data-testid": testId, }: ColorPickerProps) => React.JSX.Element;

package/esm/ColorPicker/ColorPicker.js

@@ -23,7 +23,8 @@ const ColorPicker = ({
   placement = "bottom-start",
   zIndex,
   labels: labelsProp,
-  children
+  children,
+  "data-testid": testId
 }) => {
   var _a, _b;
   const [isOpen, setOpen] = useState(false);
@@ -77,7 +78,8 @@ const ColorPicker = ({
   }));
   return /*#__PURE__*/React.createElement("span", {
     ref: rootRef,
-    className: styles.root
+    className: styles.root,
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ["click"],
     visible: isOpen,

package/esm/ColorPicker/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import type { Placement } from "@floating-ui/react";
+import type { TestIdProps } from "../helpers/testId";
 export interface ColorPickerPreset {
     /** HEX color, for example `#d81b60`. */
     value: string;
@@ -24,7 +25,7 @@ export interface ColorPickerLabels {
     cancel: string;
     save: string;
 }
-export interface ColorPickerProps {
+export interface ColorPickerProps extends TestIdProps {
     /** Current color in HEX. A color missing from `presets` is shown as an extra swatch. */
     value?: string;
     /** Called with the chosen color as lowercase `#rrggbb`. */

package/esm/Counter/index.js

@@ -12,7 +12,8 @@ const Counter = ({
   fullWidth,
   onChange,
   disabled,
-  className
+  className,
+  "data-testid": testId
 }) => {
   const minusDisabled = disabled || value <= min;
   const plusDisabled = disabled || value >= max;
@@ -25,7 +26,8 @@ const Counter = ({
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.root, {
       [styles["root_fullWidth"]]: Boolean(fullWidth)
-    }, className)
+    }, className),
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx(styles.control, {
       [styles["control_fullWidth"]]: Boolean(fullWidth)

package/esm/Counter/index.props.d.ts

@@ -1,4 +1,5 @@
-export type CounterProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type CounterProps = TestIdProps & {
     value: number;
     max: number;
     min: number;

package/esm/Datepicker/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, ...calendarProps }: Props) => React.JSX.Element;
+export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, "data-testid": testId, ...calendarProps }: Props) => React.JSX.Element;

package/esm/Datepicker/index.js

@@ -20,11 +20,13 @@ const Datepicker = _a => {
       size = "m",
       startPlaceholder,
       onChangeDate,
-      onChangeRange
+      onChangeRange,
+      "data-testid": testId
     } = _a,
-    calendarProps = __rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange"]);
+    calendarProps = __rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange", "data-testid"]);
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.root, className)
+    className: clsx(styles.root, className),
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, calendarProps, {
     disabled: disabled,
     endPlaceholder: endPlaceholder,

package/esm/Datepicker/index.props.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
 import type { CalendarCommonProps } from "../Calendar";
+import type { TestIdProps } from "../helpers/testId";
 export type DatepickerSize = "s" | "m" | "l";
 export type DatepickerSelectionMode = "single" | "range";
 export type DatepickerRangeValue = [string, string];
 export type DatepickerCalendarProps = Omit<CalendarCommonProps, "className" | "size">;
-export type Props = DatepickerCalendarProps & {
+export type Props = DatepickerCalendarProps & TestIdProps & {
     className?: string;
     disabled?: boolean;
     endPlaceholder?: string;

package/esm/DotsLoader/index.js

@@ -2,8 +2,11 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './DotsLoader.module.css';
 
-const DotsLoader = () => (/*#__PURE__*/React.createElement("div", {
-  className: styles.wrapper
+const DotsLoader = ({
+  "data-testid": testId
+}) => (/*#__PURE__*/React.createElement("div", {
+  className: styles.wrapper,
+  "data-testid": testId
 }, /*#__PURE__*/React.createElement("div", {
   className: clsx({
     [styles.dot]: true,

package/esm/DotsLoader/index.props.d.ts

@@ -1 +1,2 @@
-export type DotsLoaderProps = Record<string, never>;
+import type { TestIdProps } from "../helpers/testId";
+export type DotsLoaderProps = TestIdProps;

package/esm/Dropdown/index.js

@@ -6,6 +6,7 @@ import styles from './Dropdown.module.css';
 
 const Dropdown = ({
   children,
+  "data-testid": testId,
   zIndex,
   fontSize,
   disabled,
@@ -87,7 +88,7 @@ const Dropdown = ({
     onClick: () => setOpen(false)
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     ref: refs.setFloating,
-    "data-testid": "popper-container",
+    "data-testid": testId,
     className: clsx(styles["popper-container"], styles[`placement-${finalPlacement}`]),
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex,
@@ -97,7 +98,6 @@ const Dropdown = ({
     role: "menu",
     tabIndex: 0
   }, getFloatingProps()), /*#__PURE__*/React.createElement("div", {
-    "data-testid": "overlay-container",
     className: styles["overlay-container"],
     onClick: onClickOverlay
   }, overlay))))));

package/esm/Dropdown/index.props.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import type { Placement, Strategy } from "@floating-ui/react";
+import type { PopupTestIdProps } from "../helpers/testId";
 export type Trigger = "click" | "hover" | "focus";
-export type DropdownProps = {
+export type DropdownProps = PopupTestIdProps & {
     defaultVisible?: boolean;
     disabled?: boolean;
     flip?: boolean;

package/esm/Grid/index.js

@@ -8,9 +8,11 @@ const Grid = ({
   gridRowGap = "6",
   gridColumnGap = "4",
   gridItemMinWidth = "var(--component-grid-item-min-width)",
-  className
+  className,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
   className: clsx(styles.root, className),
+  "data-testid": testId,
   style: {
     rowGap: `var(--space-${gridRowGap})`,
     columnGap: `var(--space-${gridColumnGap})`,

package/esm/Grid/index.props.d.ts

@@ -1,5 +1,6 @@
+import type { TestIdProps } from "../helpers/testId";
 export type Space = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32";
-export type GridProps = {
+export type GridProps = TestIdProps & {
     className?: string;
     gridRowGap?: Space;
     gridColumnGap?: Space;

package/esm/InputRadio/index.js

@@ -23,9 +23,9 @@ const InputRadio = /*#__PURE__*/memo(_a => {
       style,
       text,
       value,
-      testid
+      "data-testid": testId
     } = _a,
-    rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+    rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "data-testid"]);
   return (
     /*#__PURE__*/
     // Keyboard activation of the nested radio dispatches a click that bubbles to the label.
@@ -36,7 +36,7 @@ const InputRadio = /*#__PURE__*/memo(_a => {
       style: style,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
-      "data-testid": testid
+      "data-testid": testId
     }, /*#__PURE__*/React.createElement("div", {
       className: clsx(styles.container, {
         [styles["container_disabled"]]: Boolean(disabled),

package/esm/InputRadio/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, CSSProperties, FocusEvent, PropsWithChildren } from "react";
-export type InputRadioProps = PropsWithChildren<{
+import type { TestIdProps } from "../helpers/testId";
+export type InputRadioProps = PropsWithChildren<TestIdProps & {
     checked?: boolean;
     className?: string;
     containerClassName?: string;
@@ -16,5 +17,4 @@ export type InputRadioProps = PropsWithChildren<{
     style?: CSSProperties;
     text?: string;
     value: string | number;
-    testid?: string;
 }>;

package/esm/Menu/components/MenuItem/index.js

@@ -25,7 +25,6 @@ const MenuItem = _a => {
     ref: ref,
     role: "menuitem",
     tabIndex: disabled ? -1 : 0,
-    "data-testid": "menuitem",
     "aria-disabled": disabled || undefined,
     className: clsx(styles.item, {
       [styles["item_disabled"]]: Boolean(disabled),

package/esm/Menu/components/MenuItem/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { KeyboardEvent, MouseEvent } from "react";
 import type { MenuVariant } from "../../index.props";
-export interface MenuItemProps {
+import type { TestIdProps } from "../../../helpers/testId";
+export interface MenuItemProps extends TestIdProps {
     className?: string;
     isSelected?: boolean;
     onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;

package/esm/Menu/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
+export declare const Menu: ({ selected, variant, className, onClick, children, ref, "data-testid": testId, }: Props) => React.JSX.Element;

package/esm/Menu/index.js

@@ -8,7 +8,8 @@ const Menu = ({
   className,
   onClick,
   children,
-  ref
+  ref,
+  "data-testid": testId
 }) => {
   const renderChild = useMemo(() => Children.map(children, child => {
     if (! /*#__PURE__*/isValidElement(child)) return child;
@@ -28,7 +29,8 @@ const Menu = ({
   return /*#__PURE__*/React.createElement("ul", {
     ref: ref,
     className: clsx(styles.menu, className),
-    role: "menu"
+    role: "menu",
+    "data-testid": testId
   }, renderChild);
 };
 

package/esm/Menu/index.props.d.ts

@@ -1,7 +1,8 @@
 import type { ReactElement, KeyboardEvent, MouseEvent } from "react";
 import type { MenuItemProps } from "./components/MenuItem/index.props";
+import type { TestIdProps } from "../helpers/testId";
 export type MenuVariant = "primary";
-export type Props = {
+export type Props = TestIdProps & {
     selected?: string[];
     variant?: MenuVariant;
     className?: string;

package/esm/Modal/index.js

@@ -23,7 +23,8 @@ const ModalRoot = ({
   onClose,
   title,
   withinParent = false,
-  fillParent = false
+  fillParent = false,
+  "data-testid": testId
 }) => {
   const [dialog, setDialog] = useState(null);
   const [container, setContainer] = useState(null);
@@ -91,6 +92,7 @@ const ModalRoot = ({
     ref: setDialog,
     role: "dialog",
     "aria-modal": "true",
+    "data-testid": testId,
     tabIndex: -1,
     "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React.createElement("div", {

package/esm/Modal/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from "react";
-export type ModalProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type ModalProps = TestIdProps & {
     className?: string;
     onClose?: () => void;
     /**

package/esm/MultiSelect/index.js

@@ -32,7 +32,8 @@ const MultiSelect = ({
   value = [],
   type,
   onChange,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const id = useId();
@@ -72,6 +73,7 @@ const MultiSelect = ({
     })
   }))), [preparedGroups]);
   return /*#__PURE__*/React.createElement(FormField, {
+    "data-testid": testId,
     className: clsx(styles["form-field"], {
       [styles["full-width"]]: Boolean(fullWidth)
     }, className),

package/esm/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { NavigationMenuProps } from "./index.props";
+export declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;

package/esm/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,162 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef } from 'react';
+import clsx from 'clsx';
+import { MoreMenu } from './components/MoreMenu/index.js';
+import { NavigationLink, getLinkClassName, LinkContent } from './components/NavigationLink/index.js';
+import { useIsomorphicLayoutEffect, getItemKey, assignRef, isSameItem } from './helpers.js';
+import { useOverflowSplit } from './useOverflowSplit.js';
+import styles from './NavigationMenu.module.css';
+
+const FOCUSABLE = "a[href], button, [tabindex]";
+const getActiveIndex = items => items.findIndex(item => item.active);
+const OverflowMenu = _a => {
+  var {
+      items,
+      pinnedItems = [],
+      moreItems = [],
+      moreLabel,
+      onItemClick,
+      renderLink,
+      navRef,
+      rootClassName
+    } = _a,
+    props = __rest(_a, ["items", "pinnedItems", "moreItems", "moreLabel", "onItemClick", "renderLink", "navRef", "rootClassName"]);
+  const {
+    split,
+    containerRef,
+    listRef,
+    measurerRef,
+    moreRef
+  } = useOverflowSplit({
+    itemCount: items.length,
+    pinnedCount: pinnedItems.length,
+    activeIndex: getActiveIndex(items),
+    forceMore: moreItems.length > 0,
+    contentKey: [...items, ...pinnedItems].map(item => item.label).join("\n")
+  });
+  // After `items` change and before the layout effect remeasures, the old
+  // split may point to missing indexes: drop them, new items go to "More".
+  const visibleIndexes = split === null || split === void 0 ? void 0 : split.visible.filter(index => index < items.length);
+  const visibleItems = visibleIndexes ? visibleIndexes.map(index => items[index]) : items;
+  const hiddenItems = visibleIndexes ? [...items.filter((_, index) => !visibleIndexes.includes(index)), ...moreItems] : [];
+  const isMoreHidden = hiddenItems.length === 0;
+  // "More" disappeared with a focused link inside: focus the same item in the
+  // row, or the first row link when it is not there.
+  const restoreFocus = item => {
+    var _a, _b, _c, _d, _e;
+    const rows = Array.from((_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
+    const rowItems = [...visibleItems, ...pinnedItems];
+    const row = rows[rowItems.findIndex(rowItem => isSameItem(rowItem, item))];
+    (_e = (_c = row === null || row === void 0 ? void 0 : row.querySelector(FOCUSABLE)) !== null && _c !== void 0 ? _c : (_d = listRef.current) === null || _d === void 0 ? void 0 : _d.querySelector(FOCUSABLE)) === null || _e === void 0 ? void 0 : _e.focus();
+  };
+  const renderItem = (item, index) => (/*#__PURE__*/React.createElement("li", {
+    key: getItemKey(item, index),
+    className: styles.list_item
+  }, /*#__PURE__*/React.createElement(NavigationLink, {
+    item: item,
+    onClick: onItemClick,
+    renderLink: renderLink
+  })));
+  return /*#__PURE__*/React.createElement("nav", Object.assign({}, props, {
+    ref: node => {
+      containerRef.current = node;
+      assignRef(navRef, node);
+    },
+    className: clsx(rootClassName, styles.overflow, {
+      [styles.overflow_measuring]: !split
+    })
+  }), /*#__PURE__*/React.createElement("ul", {
+    ref: listRef,
+    className: styles.list
+  }, visibleItems.map(renderItem), pinnedItems.map(renderItem), /*#__PURE__*/React.createElement("li", {
+    ref: moreRef,
+    className: clsx(styles.list_item, {
+      [styles.more_hidden]: isMoreHidden
+    }),
+    "aria-hidden": isMoreHidden || undefined
+  }, /*#__PURE__*/React.createElement(MoreMenu, {
+    items: hiddenItems,
+    label: moreLabel,
+    hidden: isMoreHidden,
+    onItemClick: onItemClick,
+    renderLink: renderLink,
+    onFocusLost: restoreFocus
+  }))), /*#__PURE__*/React.createElement("div", {
+    ref: measurerRef,
+    className: styles.measurer,
+    "aria-hidden": "true"
+  }, [...items, ...pinnedItems].map((item, index) => (/*#__PURE__*/React.createElement("span", {
+    key: getItemKey(item, index),
+    className: getLinkClassName("item", item.active)
+  }, /*#__PURE__*/React.createElement(LinkContent, {
+    item: item
+  }))))));
+};
+const ScrollMenu = _a => {
+  var {
+      items,
+      pinnedItems = [],
+      moreItems = [],
+      onItemClick,
+      renderLink,
+      navRef,
+      rootClassName
+    } = _a,
+    props = __rest(_a, ["items", "pinnedItems", "moreItems", "onItemClick", "renderLink", "navRef", "rootClassName"]);
+  const scrollRef = useRef(null);
+  const activeRef = useRef(null);
+  const allItems = [...items, ...pinnedItems, ...moreItems];
+  const activeIndex = getActiveIndex(allItems);
+  // Center the active item when it is not fully visible.
+  useIsomorphicLayoutEffect(() => {
+    const container = scrollRef.current;
+    const active = activeRef.current;
+    if (!container || !active) return;
+    const {
+      offsetLeft,
+      offsetWidth
+    } = active;
+    const isVisible = offsetLeft >= container.scrollLeft && offsetLeft + offsetWidth <= container.scrollLeft + container.clientWidth;
+    if (!isVisible) {
+      container.scrollLeft = offsetLeft + offsetWidth / 2 - container.clientWidth / 2;
+    }
+  }, [activeIndex]);
+  return /*#__PURE__*/React.createElement("nav", Object.assign({}, props, {
+    ref: navRef,
+    className: clsx(rootClassName, styles.scroll)
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    className: styles.scroll_area
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles.list
+  }, allItems.map((item, index) => (/*#__PURE__*/React.createElement("li", {
+    key: getItemKey(item, index),
+    ref: index === activeIndex ? activeRef : undefined,
+    className: styles.list_item
+  }, /*#__PURE__*/React.createElement(NavigationLink, {
+    item: item,
+    onClick: onItemClick,
+    renderLink: renderLink
+  })))))));
+};
+const NavigationMenu = /*#__PURE__*/forwardRef((_a, ref) => {
+  var {
+      layout = "overflow",
+      size = "m",
+      moreLabel = "More",
+      className
+    } = _a,
+    props = __rest(_a, ["layout", "size", "moreLabel", "className"]);
+  const rootClassName = clsx(styles.root, styles[`size_${size}`], className);
+  return layout === "scroll" ? (/*#__PURE__*/React.createElement(ScrollMenu, Object.assign({}, props, {
+    navRef: ref,
+    rootClassName: rootClassName
+  }))) : (/*#__PURE__*/React.createElement(OverflowMenu, Object.assign({}, props, {
+    moreLabel: moreLabel,
+    navRef: ref,
+    rootClassName: rootClassName
+  })));
+});
+NavigationMenu.displayName = "NavigationMenu";
+
+export { NavigationMenu };

package/esm/NavigationMenu/NavigationMenu.module.css

@@ -0,0 +1,67 @@
+.root {
+  font-family: var(--font-family-ui);
+  min-inline-size: 0;
+}
+.root.size_m {
+  --navigation-item-height: calc(var(--space-8) + var(--space-1));
+  --navigation-item-font-size: var(--font-size-text-md);
+  --navigation-item-line-height: var(--line-height-text-md);
+  --navigation-item-padding: var(--space-4);
+  --navigation-menu-gap: var(--space-2);
+}
+.root.size_s {
+  --navigation-item-height: var(--space-8);
+  --navigation-item-font-size: var(--font-size-text-sm);
+  --navigation-item-line-height: var(--line-height-text-sm);
+  --navigation-item-padding: var(--space-3);
+  --navigation-menu-gap: var(--space-1);
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: var(--navigation-menu-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.list_item {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.overflow {
+  display: block;
+  position: relative;
+}
+.overflow_measuring {
+  overflow: hidden;
+}
+
+.more_hidden {
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+}
+
+.measurer {
+  block-size: 0;
+  display: flex;
+  inline-size: max-content;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+}
+
+.scroll_area {
+  overflow: auto hidden;
+  overscroll-behavior-x: contain;
+  position: relative;
+  scrollbar-width: none;
+}
+.scroll_area::-webkit-scrollbar {
+  display: none;
+}

package/esm/NavigationMenu/components/MoreMenu/MoreMenu.module.css

@@ -0,0 +1,19 @@
+.root {
+  display: contents;
+}
+
+.chevron {
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family-ui);
+  min-inline-size: calc(var(--space-32) + var(--space-16));
+  padding: var(--space-1);
+}

package/esm/NavigationMenu/components/MoreMenu/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { NavigationMenuItem, NavigationMenuRenderLink } from "../../index.props";
+interface MoreMenuProps {
+    items: NavigationMenuItem[];
+    label: ReactNode;
+    /** Nothing to show: the trigger stays in the DOM only to be measured. */
+    hidden: boolean;
+    onItemClick?: (item: NavigationMenuItem) => void;
+    renderLink?: NavigationMenuRenderLink;
+    /** The menu became hidden while this item had focus inside the dropdown. */
+    onFocusLost: (item: NavigationMenuItem) => void;
+}
+/** "More" trigger with a dropdown of the items that do not fit. */
+export declare const MoreMenu: ({ items, label, hidden, onItemClick, renderLink, onFocusLost, }: MoreMenuProps) => React.JSX.Element;
+export {};