colibri-ui 0.8.97 → 0.8.98

package/NavigationMenu/splitItems.d.ts

@@ -0,0 +1,30 @@
+export interface SplitInput {
+    itemWidths: number[];
+    /** Pinned items are always visible and go after the main items. */
+    pinnedWidths: number[];
+    moreWidth: number;
+    containerWidth: number;
+    /** CSS gap between items. */
+    gap: number;
+    /** Index of the active item or -1. */
+    activeIndex: number;
+    /** "More" is needed anyway, for example for `moreItems`. */
+    forceMore: boolean;
+}
+export interface SplitResult {
+    /** Indexes of the items left in the row, in the original order. */
+    visible: number[];
+    /** Indexes of the items moved to "More", in the original order. */
+    hidden: number[];
+}
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+export declare const splitItems: ({ itemWidths, pinnedWidths, moreWidth, containerWidth, gap, activeIndex, forceMore, }: SplitInput) => SplitResult;
+export declare const isSameSplit: (a: SplitResult, b: SplitResult) => boolean;

package/NavigationMenu/splitItems.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const sum = list => list.reduce((acc, n) => acc + n, 0);
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+const splitItems = ({
+  itemWidths,
+  pinnedWidths,
+  moreWidth,
+  containerWidth,
+  gap,
+  activeIndex,
+  forceMore
+}) => {
+  const all = itemWidths.map((_, index) => index);
+  const cost = width => width + gap;
+  const pinnedCost = sum(pinnedWidths.map(cost));
+  if (!forceMore && sum(itemWidths.map(cost)) + pinnedCost <= containerWidth + gap) {
+    return {
+      visible: all,
+      hidden: []
+    };
+  }
+  const hasActive = activeIndex >= 0 && activeIndex < itemWidths.length;
+  let budget = containerWidth + gap - pinnedCost - cost(moreWidth);
+  if (hasActive) budget -= cost(itemWidths[activeIndex]);
+  const visible = [];
+  for (let index = 0; index < itemWidths.length; index++) {
+    if (index === activeIndex) continue;
+    if (cost(itemWidths[index]) > budget) break;
+    budget -= cost(itemWidths[index]);
+    visible.push(index);
+  }
+  if (hasActive) {
+    visible.push(activeIndex);
+    visible.sort((a, b) => a - b);
+  }
+  return {
+    visible,
+    hidden: all.filter(index => !visible.includes(index))
+  };
+};
+const isSameList = (a, b) => a.length === b.length && a.every((index, position) => index === b[position]);
+const isSameSplit = (a, b) => isSameList(a.visible, b.visible) && isSameList(a.hidden, b.hidden);
+
+exports.isSameSplit = isSameSplit;
+exports.splitItems = splitItems;

package/NavigationMenu/useOverflowSplit.d.ts

@@ -0,0 +1,25 @@
+import type { SplitResult } from "./splitItems";
+interface Options {
+    itemCount: number;
+    pinnedCount: number;
+    activeIndex: number;
+    forceMore: boolean;
+    /** Changes with the item labels to recalculate. */
+    contentKey: string;
+}
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+export declare const useOverflowSplit: ({ itemCount, pinnedCount, activeIndex, forceMore, contentKey, }: Options) => {
+    split: SplitResult | null;
+    containerRef: import("react").RefObject<HTMLElement | null>;
+    listRef: import("react").RefObject<HTMLUListElement | null>;
+    measurerRef: import("react").RefObject<HTMLDivElement | null>;
+    moreRef: import("react").RefObject<HTMLLIElement | null>;
+};
+export {};

package/NavigationMenu/useOverflowSplit.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var React = require('react');
+var helpers = require('./helpers.js');
+var splitItems = require('./splitItems.js');
+
+const getWidth = element => element ? element.getBoundingClientRect().width : 0;
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+const useOverflowSplit = ({
+  itemCount,
+  pinnedCount,
+  activeIndex,
+  forceMore,
+  contentKey
+}) => {
+  const containerRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const measurerRef = React.useRef(null);
+  const moreRef = React.useRef(null);
+  const [split, setSplit] = React.useState(null);
+  helpers.useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    const measurer = measurerRef.current;
+    if (!container || !measurer) return undefined;
+    const recalculate = () => {
+      const widths = Array.from(measurer.children, getWidth);
+      const gap = listRef.current ? parseFloat(getComputedStyle(listRef.current).columnGap) || 0 : 0;
+      const next = splitItems.splitItems({
+        itemWidths: widths.slice(0, itemCount),
+        pinnedWidths: widths.slice(itemCount, itemCount + pinnedCount),
+        moreWidth: getWidth(moreRef.current),
+        containerWidth: getWidth(container),
+        gap,
+        activeIndex,
+        forceMore
+      });
+      setSplit(prev => prev && splitItems.isSameSplit(prev, next) ? prev : next);
+    };
+    recalculate();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(container);
+    observer.observe(measurer);
+    if (moreRef.current) observer.observe(moreRef.current);
+    return () => observer.disconnect();
+  }, [itemCount, pinnedCount, activeIndex, forceMore, contentKey]);
+  return {
+    split,
+    containerRef,
+    listRef,
+    measurerRef,
+    moreRef
+  };
+};
+
+exports.useOverflowSplit = useOverflowSplit;

package/Theme/index.d.ts

@@ -692,7 +692,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;
@@ -1536,7 +1540,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;

package/Theme/themes/buenos_aires.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/Theme/themes/buenos_aires.js

@@ -619,7 +619,11 @@ var THEME_BA = {
   "component-pagination-bg-current": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-pagination-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
   "component-pagination-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-navigation-item-text": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-navigation-item-text-selected": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-navigation-item-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
   "component-navigation-item-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-navigation-item-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
   "component-chip-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": theme_buenos_aires.default.BRAND_BA_LIME,
   "palette-black": theme_buenos_aires.default.BRAND_BA_FOREST,

package/Theme/themes/jaipur.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/Theme/themes/jaipur.js

@@ -619,7 +619,11 @@ var theme_jaipur = {
   "component-pagination-bg-current": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-pagination-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-pagination-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-navigation-item-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-navigation-item-text-selected": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-navigation-item-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-navigation-item-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-navigation-item-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
   "component-chip-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": theme_jaipur$1.default.BRAND_JP_PINK,
   "palette-black": theme_jaipur$1.default.BRAND_JP_EGGPLANT,

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 {};

package/esm/NavigationMenu/components/MoreMenu/index.js

@@ -0,0 +1,147 @@
+import React, { useState, useRef } from 'react';
+import clsx from 'clsx';
+import { Dropdown } from '../../../Dropdown/index.js';
+import 'tslib';
+import { Chevron } from '../../../Icons/Chevron.js';
+import { useIsomorphicLayoutEffect, getItemKey } from '../../helpers.js';
+import { getLinkClassName, NavigationLink } from '../NavigationLink/index.js';
+import styles from './MoreMenu.module.css';
+
+const getLinkPosition = event => {
+  const links = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]'));
+  return {
+    links,
+    index: links.indexOf(event.target)
+  };
+};
+const MoreOptions = ({
+  items,
+  onItemClick,
+  renderLink,
+  rootRef,
+  onItemFocus,
+  onTabOut
+}) => {
+  // The dropdown is portaled to the end of the document: move focus into it,
+  // to the current section or to the first link.
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    const root = rootRef.current;
+    (_b = (_a = root === null || root === void 0 ? void 0 : root.querySelector('[aria-current="page"]')) !== null && _a !== void 0 ? _a : root === null || root === void 0 ? void 0 : root.querySelector('[role="menuitem"]')) === null || _b === void 0 ? void 0 : _b.focus();
+  }, [rootRef]);
+  // Focus events bubble from the links, whatever `renderLink` renders.
+  const handleFocus = event => {
+    const {
+      index
+    } = getLinkPosition(event);
+    if (index !== -1) onItemFocus(items[index]);
+  };
+  // Arrow keys move focus through the links, Home/End go to the first and the
+  // last one. Tab leaves through the trigger, so focus continues from it.
+  const handleKeyDown = event => {
+    var _a;
+    if (event.key === "Tab") {
+      onTabOut();
+      return;
+    }
+    const {
+      links,
+      index
+    } = getLinkPosition(event);
+    const last = links.length - 1;
+    const targets = {
+      ArrowDown: index === last ? 0 : index + 1,
+      ArrowUp: index === 0 ? last : index - 1,
+      Home: 0,
+      End: last
+    };
+    if (index === -1 || !(event.key in targets)) return;
+    event.preventDefault();
+    (_a = links[targets[event.key]]) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- events come from the focused links
+    React.createElement("div", {
+      ref: rootRef,
+      className: styles.options,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus
+    }, items.map((item, index) => (/*#__PURE__*/React.createElement(NavigationLink, {
+      key: getItemKey(item, index),
+      item: item,
+      view: "option",
+      role: "menuitem",
+      onClick: onItemClick,
+      renderLink: renderLink
+    }))))
+  );
+};
+/** "More" trigger with a dropdown of the items that do not fit. */
+const MoreMenu = ({
+  items,
+  label,
+  hidden,
+  onItemClick,
+  renderLink,
+  onFocusLost
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const overlayRef = useRef(null);
+  const focusedItemRef = useRef(null);
+  // A resize hides "More" and removes the dropdown with the focused link.
+  // Layout effect: focus moves before the browser paints the new row.
+  useIsomorphicLayoutEffect(() => {
+    if (!hidden) return;
+    const item = focusedItemRef.current;
+    const isFocusLost = !document.activeElement || document.activeElement === document.body;
+    focusedItemRef.current = null;
+    setOpen(false);
+    if (item && isFocusLost) onFocusLost(item);
+  }, [hidden]);
+  // Selection, Escape and Tab remove the focused link together with the
+  // dropdown: return focus to the trigger.
+  const close = () => {
+    var _a, _b;
+    const trigger = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (((_b = overlayRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) && trigger instanceof HTMLElement) {
+      trigger.focus();
+    }
+    focusedItemRef.current = null;
+    setOpen(false);
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    ref: rootRef,
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ["click"],
+    placement: "bottom-end",
+    visible: isOpen,
+    disabled: hidden,
+    onVisibleChange: visible => visible ? setOpen(true) : close(),
+    overlay: /*#__PURE__*/React.createElement(MoreOptions, {
+      items: items,
+      onItemClick: onItemClick,
+      renderLink: renderLink,
+      rootRef: overlayRef,
+      onItemFocus: item => {
+        focusedItemRef.current = item;
+      },
+      onTabOut: close
+    })
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: getLinkClassName(),
+    tabIndex: hidden ? -1 : undefined
+  }, label, /*#__PURE__*/React.createElement(Chevron, {
+    width: 16,
+    height: 16,
+    "aria-hidden": "true",
+    className: clsx(styles.chevron, {
+      [styles.chevron_open]: isOpen
+    })
+  }))));
+};
+
+export { MoreMenu };