colibri-ui 0.8.97 → 0.8.98

package/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/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var index$1 = require('./components/MoreMenu/index.js');
+var index = require('./components/NavigationLink/index.js');
+var helpers = require('./helpers.js');
+var useOverflowSplit = require('./useOverflowSplit.js');
+var styles = require('./NavigationMenu.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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 = tslib.__rest(_a, ["items", "pinnedItems", "moreItems", "moreLabel", "onItemClick", "renderLink", "navRef", "rootClassName"]);
+  const {
+    split,
+    containerRef,
+    listRef,
+    measurerRef,
+    moreRef
+  } = useOverflowSplit.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 => helpers.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$1) => (/*#__PURE__*/React__default.default.createElement("li", {
+    key: helpers.getItemKey(item, index$1),
+    className: styles__default.default.list_item
+  }, /*#__PURE__*/React__default.default.createElement(index.NavigationLink, {
+    item: item,
+    onClick: onItemClick,
+    renderLink: renderLink
+  })));
+  return /*#__PURE__*/React__default.default.createElement("nav", Object.assign({}, props, {
+    ref: node => {
+      containerRef.current = node;
+      helpers.assignRef(navRef, node);
+    },
+    className: clsx__default.default(rootClassName, styles__default.default.overflow, {
+      [styles__default.default.overflow_measuring]: !split
+    })
+  }), /*#__PURE__*/React__default.default.createElement("ul", {
+    ref: listRef,
+    className: styles__default.default.list
+  }, visibleItems.map(renderItem), pinnedItems.map(renderItem), /*#__PURE__*/React__default.default.createElement("li", {
+    ref: moreRef,
+    className: clsx__default.default(styles__default.default.list_item, {
+      [styles__default.default.more_hidden]: isMoreHidden
+    }),
+    "aria-hidden": isMoreHidden || undefined
+  }, /*#__PURE__*/React__default.default.createElement(index$1.MoreMenu, {
+    items: hiddenItems,
+    label: moreLabel,
+    hidden: isMoreHidden,
+    onItemClick: onItemClick,
+    renderLink: renderLink,
+    onFocusLost: restoreFocus
+  }))), /*#__PURE__*/React__default.default.createElement("div", {
+    ref: measurerRef,
+    className: styles__default.default.measurer,
+    "aria-hidden": "true"
+  }, [...items, ...pinnedItems].map((item, index$1) => (/*#__PURE__*/React__default.default.createElement("span", {
+    key: helpers.getItemKey(item, index$1),
+    className: index.getLinkClassName("item", item.active)
+  }, /*#__PURE__*/React__default.default.createElement(index.LinkContent, {
+    item: item
+  }))))));
+};
+const ScrollMenu = _a => {
+  var {
+      items,
+      pinnedItems = [],
+      moreItems = [],
+      onItemClick,
+      renderLink,
+      navRef,
+      rootClassName
+    } = _a,
+    props = tslib.__rest(_a, ["items", "pinnedItems", "moreItems", "onItemClick", "renderLink", "navRef", "rootClassName"]);
+  const scrollRef = React.useRef(null);
+  const activeRef = React.useRef(null);
+  const allItems = [...items, ...pinnedItems, ...moreItems];
+  const activeIndex = getActiveIndex(allItems);
+  // Center the active item when it is not fully visible.
+  helpers.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__default.default.createElement("nav", Object.assign({}, props, {
+    ref: navRef,
+    className: clsx__default.default(rootClassName, styles__default.default.scroll)
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    ref: scrollRef,
+    className: styles__default.default.scroll_area
+  }, /*#__PURE__*/React__default.default.createElement("ul", {
+    className: styles__default.default.list
+  }, allItems.map((item, index$1) => (/*#__PURE__*/React__default.default.createElement("li", {
+    key: helpers.getItemKey(item, index$1),
+    ref: index$1 === activeIndex ? activeRef : undefined,
+    className: styles__default.default.list_item
+  }, /*#__PURE__*/React__default.default.createElement(index.NavigationLink, {
+    item: item,
+    onClick: onItemClick,
+    renderLink: renderLink
+  })))))));
+};
+const NavigationMenu = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      layout = "overflow",
+      size = "m",
+      moreLabel = "More",
+      className
+    } = _a,
+    props = tslib.__rest(_a, ["layout", "size", "moreLabel", "className"]);
+  const rootClassName = clsx__default.default(styles__default.default.root, styles__default.default[`size_${size}`], className);
+  return layout === "scroll" ? (/*#__PURE__*/React__default.default.createElement(ScrollMenu, Object.assign({}, props, {
+    navRef: ref,
+    rootClassName: rootClassName
+  }))) : (/*#__PURE__*/React__default.default.createElement(OverflowMenu, Object.assign({}, props, {
+    moreLabel: moreLabel,
+    navRef: ref,
+    rootClassName: rootClassName
+  })));
+});
+NavigationMenu.displayName = "NavigationMenu";
+
+exports.NavigationMenu = NavigationMenu;

package/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/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/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/NavigationMenu/components/MoreMenu/index.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var index$1 = require('../../../Dropdown/index.js');
+require('../../../Icons/index.js');
+var helpers = require('../../helpers.js');
+var index = require('../NavigationLink/index.js');
+var styles = require('./MoreMenu.module.css');
+var Chevron = require('../../../Icons/Chevron.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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.
+  helpers.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__default.default.createElement("div", {
+      ref: rootRef,
+      className: styles__default.default.options,
+      onKeyDown: handleKeyDown,
+      onFocus: handleFocus
+    }, items.map((item, index$1) => (/*#__PURE__*/React__default.default.createElement(index.NavigationLink, {
+      key: helpers.getItemKey(item, index$1),
+      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] = React.useState(false);
+  const rootRef = React.useRef(null);
+  const overlayRef = React.useRef(null);
+  const focusedItemRef = React.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.
+  helpers.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__default.default.createElement("span", {
+    ref: rootRef,
+    className: styles__default.default.root
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Dropdown, {
+    trigger: ["click"],
+    placement: "bottom-end",
+    visible: isOpen,
+    disabled: hidden,
+    onVisibleChange: visible => visible ? setOpen(true) : close(),
+    overlay: /*#__PURE__*/React__default.default.createElement(MoreOptions, {
+      items: items,
+      onItemClick: onItemClick,
+      renderLink: renderLink,
+      rootRef: overlayRef,
+      onItemFocus: item => {
+        focusedItemRef.current = item;
+      },
+      onTabOut: close
+    })
+  }, /*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    className: index.getLinkClassName(),
+    tabIndex: hidden ? -1 : undefined
+  }, label, /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
+    width: 16,
+    height: 16,
+    "aria-hidden": "true",
+    className: clsx__default.default(styles__default.default.chevron, {
+      [styles__default.default.chevron_open]: isOpen
+    })
+  }))));
+};
+
+exports.MoreMenu = MoreMenu;

package/NavigationMenu/components/NavigationLink/NavigationLink.module.css

@@ -0,0 +1,59 @@
+.item {
+  align-items: center;
+  background: transparent;
+  block-size: var(--navigation-item-height);
+  border: none;
+  border-radius: var(--radius-full);
+  box-sizing: border-box;
+  color: var(--component-navigation-item-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--navigation-item-font-size);
+  gap: var(--space-2);
+  line-height: var(--navigation-item-line-height);
+  padding: 0 var(--navigation-item-padding);
+  text-decoration: none;
+  transition: background-color 0.15s ease;
+  white-space: nowrap;
+}
+.item:hover {
+  background: var(--component-navigation-item-bg-hover);
+}
+.item:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-navigation-item-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+.item_selected, .item_selected:hover {
+  background: var(--component-navigation-item-bg-selected);
+  color: var(--component-navigation-item-text-selected);
+}
+
+.option {
+  align-items: center;
+  border-radius: var(--radius-xs);
+  color: var(--component-menu-text);
+  display: flex;
+  font-size: var(--font-size-text-sm);
+  gap: var(--space-2);
+  line-height: var(--line-height-text-sm);
+  outline: none;
+  padding: var(--space-2) var(--space-3);
+  text-decoration: none;
+}
+.option:hover, .option:focus-visible {
+  background: var(--component-menu-item-bg-hover);
+}
+.option_selected, .option_selected:hover, .option_selected:focus-visible {
+  background: var(--component-navigation-item-bg-selected);
+  color: var(--component-navigation-item-text-selected);
+}
+.option_selected:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-navigation-item-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}

package/NavigationMenu/components/NavigationLink/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { NavigationMenuItem, NavigationMenuRenderLink } from "../../index.props";
+interface NavigationLinkProps {
+    item: NavigationMenuItem;
+    /** `item` is a pill in the row, `option` is a line inside "More". */
+    view?: "item" | "option";
+    role?: "menuitem";
+    onClick?: (item: NavigationMenuItem) => void;
+    renderLink?: NavigationMenuRenderLink;
+}
+export declare const getLinkClassName: (view?: NavigationLinkProps["view"], active?: boolean) => string;
+export declare const LinkContent: ({ item }: {
+    item: NavigationMenuItem;
+}) => React.JSX.Element;
+export declare const NavigationLink: ({ item, view, role, onClick, renderLink, }: NavigationLinkProps) => React.JSX.Element;
+export {};

package/NavigationMenu/components/NavigationLink/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./NavigationLink.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const getLinkClassName = (view = "item", active) => clsx__default.default(styles__default.default[view], {
+  [styles__default.default[`${view}_selected`]]: active
+});
+const LinkContent = ({
+  item
+}) => (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, item.icon && (/*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.icon,
+  "aria-hidden": "true"
+}, item.icon)), /*#__PURE__*/React__default.default.createElement("span", null, item.label)));
+const NavigationLink = ({
+  item,
+  view,
+  role,
+  onClick,
+  renderLink
+}) => {
+  const props = {
+    item,
+    className: getLinkClassName(view, item.active),
+    children: /*#__PURE__*/React__default.default.createElement(LinkContent, {
+      item: item
+    }),
+    onClick: onClick ? () => onClick(item) : undefined,
+    role,
+    "aria-current": item.active ? "page" : undefined
+  };
+  if (renderLink) return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, renderLink(props));
+  return /*#__PURE__*/React__default.default.createElement("a", {
+    href: item.href,
+    className: props.className,
+    onClick: props.onClick,
+    role: role,
+    "aria-current": props["aria-current"]
+  }, props.children);
+};
+
+exports.LinkContent = LinkContent;
+exports.NavigationLink = NavigationLink;
+exports.getLinkClassName = getLinkClassName;

package/NavigationMenu/helpers.d.ts

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from "react";
+import type { Ref } from "react";
+import type { NavigationMenuItem } from "./index.props";
+export declare const getItemKey: (item: NavigationMenuItem, index: number) => string;
+/** Items are often recreated on every render: compare them by content. */
+export declare const isSameItem: (a: NavigationMenuItem, b: NavigationMenuItem) => boolean;
+/** `useLayoutEffect` without the server rendering warning. */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const assignRef: <T>(ref: Ref<T> | undefined, value: T | null) => void;

package/NavigationMenu/helpers.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+const getItemKey = (item, index) => {
+  var _a, _b;
+  return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item.href) !== null && _b !== void 0 ? _b : `${item.label}-${index}`;
+};
+/** Items are often recreated on every render: compare them by content. */
+const isSameItem = (a, b) => getItemKey(a, 0) === getItemKey(b, 0);
+/** `useLayoutEffect` without the server rendering warning. */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const assignRef = (ref, value) => {
+  if (typeof ref === "function") ref(value);else if (ref) ref.current = value;
+};
+
+exports.assignRef = assignRef;
+exports.getItemKey = getItemKey;
+exports.isSameItem = isSameItem;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/NavigationMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationMenu } from "./NavigationMenu";
+export type { NavigationMenuItem, NavigationMenuLayout, NavigationMenuLinkProps, NavigationMenuProps, NavigationMenuRenderLink, NavigationMenuSize, } from "./index.props";

package/NavigationMenu/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var NavigationMenu = require('./NavigationMenu.js');
+
+
+
+exports.NavigationMenu = NavigationMenu.NavigationMenu;

package/NavigationMenu/index.props.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+/** `overflow` keeps items in a row and moves the rest to "More", `scroll` is a horizontal strip. */
+export type NavigationMenuLayout = "overflow" | "scroll";
+export type NavigationMenuSize = "s" | "m";
+export interface NavigationMenuItem {
+    /** Unique key. Defaults to `href`, then to `label`. */
+    id?: string;
+    label: string;
+    href?: string;
+    /** Current section: highlighted, gets `aria-current="page"` and never moves to "More". */
+    active?: boolean;
+    /** Icon before the label. */
+    icon?: ReactNode;
+}
+export interface NavigationMenuLinkProps {
+    item: NavigationMenuItem;
+    className: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement>;
+    tabIndex?: number;
+    /** Set for links inside the "More" dropdown. */
+    role?: "menuitem";
+    "aria-current"?: "page";
+}
+/** Renders an item link, for example a router `Link`. Pass every prop except `item` to the element. */
+export type NavigationMenuRenderLink = (props: NavigationMenuLinkProps) => ReactNode;
+export interface NavigationMenuProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    items: NavigationMenuItem[];
+    /** Always visible after `items`. */
+    pinnedItems?: NavigationMenuItem[];
+    /** Always inside "More", after the items that do not fit. In the `scroll` layout they end the strip. */
+    moreItems?: NavigationMenuItem[];
+    layout?: NavigationMenuLayout;
+    size?: NavigationMenuSize;
+    moreLabel?: ReactNode;
+    /** Called on a click on any item, including the ones inside "More". */
+    onItemClick?: (item: NavigationMenuItem) => void;
+    /** Custom link. Defaults to `<a href>`. */
+    renderLink?: NavigationMenuRenderLink;
+}

package/NavigationMenu/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/NavigationMenu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}