colibri-ui 0.8.96 → 0.8.98

package/ColorPicker/utils/color.js

@@ -0,0 +1,162 @@
+'use strict';
+
+const clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+const round1 = value => Math.round(value * 10) / 10;
+const hsv2rgb = ({
+  h,
+  s,
+  v
+}) => {
+  const sat = s / 100;
+  const val = v / 100;
+  const channel = n => {
+    const k = (n + h / 60) % 6;
+    return Math.round((val - val * sat * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+  };
+  return {
+    r: channel(5),
+    g: channel(3),
+    b: channel(1)
+  };
+};
+// Not rounded, so repeated conversions do not accumulate errors.
+const rgb2hsv = ({
+  r,
+  g,
+  b
+}) => {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rn) {
+      h = (gn - bn) / delta % 6;
+    } else if (max === gn) {
+      h = (bn - rn) / delta + 2;
+    } else {
+      h = (rn - gn) / delta + 4;
+    }
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return {
+    h,
+    s: max === 0 ? 0 : delta / max * 100,
+    v: max * 100
+  };
+};
+/** HSV → `hsl(...)` for inline styles. */
+const hsv2css = ({
+  h,
+  s,
+  v
+}) => {
+  const sat = s / 100;
+  const val = v / 100;
+  const l = val * (1 - sat / 2);
+  const sl = l === 0 || l === 1 ? 0 : (val - l) / Math.min(l, 1 - l);
+  return `hsl(${round1(h)}, ${round1(sl * 100)}%, ${round1(l * 100)}%)`;
+};
+const HEX_RE = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+/** `#ABC`, `abc`, `#aabbcc` → `#aabbcc`. Invalid input → `null`. */
+const normalizeHex = input => {
+  const match = HEX_RE.exec(input.trim());
+  if (!match) return null;
+  const digits = match[1].length === 3 ? match[1].replace(/./g, c => c + c) : match[1];
+  return `#${digits.toLowerCase()}`;
+};
+const hex2rgb = hex => {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const int = parseInt(normalized.slice(1), 16);
+  return {
+    r: int >> 16 & 255,
+    g: int >> 8 & 255,
+    b: int & 255
+  };
+};
+const rgb2hex = ({
+  r,
+  g,
+  b
+}) => `#${[r, g, b].map(c => Math.round(clamp(c, 0, 255)).toString(16).padStart(2, "0")).join("")}`;
+const hsv2hex = hsv => rgb2hex(hsv2rgb(hsv));
+const hex2hsv = hex => {
+  const rgb = hex2rgb(hex);
+  return rgb ? rgb2hsv(rgb) : null;
+};
+const RGB_RE = /^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})/i;
+/** HEX or `rgb()`/`rgba()` → `#rrggbb`. Invalid input → `null`. */
+const toHex = input => {
+  const rgbMatch = RGB_RE.exec(input.trim());
+  if (rgbMatch) {
+    const [r, g, b] = rgbMatch.slice(1).map(Number);
+    return rgb2hex({
+      r,
+      g,
+      b
+    });
+  }
+  return normalizeHex(input);
+};
+/**
+ * HEX → HSV that keeps hue and saturation from `prev` where the color has
+ * none: grey has no hue, black has neither. Without this, typing `#000000`
+ * would jump the hue slider to 0 (red).
+ */
+const toHsvPreservingHue = (hex, prev) => {
+  const next = hex2hsv(hex);
+  if (!next) return null;
+  if (next.v === 0) return {
+    h: prev.h,
+    s: prev.s,
+    v: 0
+  };
+  if (next.s === 0) return {
+    h: prev.h,
+    s: 0,
+    v: next.v
+  };
+  return next;
+};
+/** WCAG 2.x relative luminance, 0–1. */
+const relativeLuminance = ({
+  r,
+  g,
+  b
+}) => {
+  const [lr, lg, lb] = [r, g, b].map(c => {
+    const x = c / 255;
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+};
+const WHITE_LUMINANCE = 1;
+const BLACK_LUMINANCE = 0;
+const contrast = (a, b) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+/** Whether light text reads better than dark text on `background` (HEX). */
+const prefersLightText = background => {
+  const rgb = hex2rgb(background);
+  if (!rgb) return false;
+  const luminance = relativeLuminance(rgb);
+  return contrast(luminance, WHITE_LUMINANCE) >= contrast(luminance, BLACK_LUMINANCE);
+};
+/** A light color that merges with a light surface and needs an outline. */
+const isLightColor = (hex, threshold = 0.85) => {
+  const rgb = hex2rgb(hex);
+  return rgb ? relativeLuminance(rgb) >= threshold : false;
+};
+
+exports.clamp = clamp;
+exports.hex2hsv = hex2hsv;
+exports.hsv2css = hsv2css;
+exports.hsv2hex = hsv2hex;
+exports.isLightColor = isLightColor;
+exports.normalizeHex = normalizeHex;
+exports.prefersLightText = prefersLightText;
+exports.toHex = toHex;
+exports.toHsvPreservingHue = toHsvPreservingHue;

package/Icons/Pipette.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { Props } from "./index.props";
+export declare const Pipette: ({ fill, width, height, ref, ...props }: Props) => React.JSX.Element;

package/Icons/Pipette.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Pipette = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
+    props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height
+  }, props, {
+    ref: ref,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    stroke: fill,
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M14.5 4.5l5 5M17 2.5a2.12 2.12 0 0 1 3 3L17.5 8l1 1-1.5 1.5-5-5L13.5 4l1 1L17 2.5zM12 7l-8 8v4h4l8-8"
+  }));
+};
+
+exports.Pipette = Pipette;

package/Icons/index.d.ts

@@ -14,6 +14,7 @@ export { Help } from "./Help";
 export { Info } from "./Info";
 export { Minus } from "./Minus";
 export { More } from "./More";
+export { Pipette } from "./Pipette";
 export { Plus } from "./Plus";
 export { Setting } from "./Setting";
 export { Shield } from "./Shield";

package/Icons/index.js

@@ -16,6 +16,7 @@ var Help = require('./Help.js');
 var Info = require('./Info.js');
 var Minus = require('./Minus.js');
 var More = require('./More.js');
+var Pipette = require('./Pipette.js');
 var Plus = require('./Plus.js');
 var Setting = require('./Setting.js');
 var Shield = require('./Shield.js');
@@ -40,6 +41,7 @@ exports.Help = Help.Help;
 exports.Info = Info.Info;
 exports.Minus = Minus.Minus;
 exports.More = More.More;
+exports.Pipette = Pipette.Pipette;
 exports.Plus = Plus.Plus;
 exports.Setting = Setting.Setting;
 exports.Shield = Shield.Shield;

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;