@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.50

package/dist/components/New/Dropdown/Dropdown.js

@@ -1,316 +1,396 @@
-import { jsxs as N, Fragment as A, jsx as n } from "react/jsx-runtime";
-import { useFloatingNodeId as ye, useFloating as we, autoUpdate as ve, offset as xe, autoPlacement as Ce, flip as ke, shift as be, size as Ie, useClick as Pe, useHover as Ee, safePolygon as Ne, useDismiss as Ae, useRole as De, useInteractions as Me, FloatingTree as Fe, FloatingNode as Te, FloatingPortal as Oe, FloatingFocusManager as Re } from "@floating-ui/react";
-import { useState as j, useRef as Le, useCallback as m, useId as Se, useEffect as U, useMemo as _e, Fragment as $e } from "react";
-import { InteractiveTooltip as Be } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { DIAL_KIT_CLASS as V } from "../../../constants/public-class-names.js";
-import { DropdownTrigger as y, DropdownItemType as X } from "../../../types/dropdown.js";
-import { MenuItemMark as Ye } from "../../../types/menu-item.js";
-import { dropdownGap as w, dropdownDividerClassName as Ke, dropdownItemListClassName as We, dropdownBaseClassName as je, dropdownListBaseClassName as Ue } from "./constants.js";
-import { CloseButton as Ve } from "../CloseButton/CloseButton.js";
-import { MenuItem as Xe } from "../MenuItem/MenuItem.js";
-import { useThemeScope as qe } from "../ThemeScope/ThemeScope.js";
+import { jsxs as S, Fragment as R, jsx as n } from "react/jsx-runtime";
+import { useFloatingNodeId as $e, useFloating as Be, autoUpdate as He, offset as Ye, autoPlacement as Ke, flip as Ue, shift as We, size as je, useClick as ze, useHover as Qe, safePolygon as qe, useDismiss as Xe, useRole as Ge, useInteractions as Je, FloatingTree as Ze, FloatingNode as Ve, FloatingPortal as eo, FloatingFocusManager as oo } from "@floating-ui/react";
+import { useState as b, useRef as to, useCallback as g, useId as no, useEffect as ie, useMemo as le, Fragment as ro, isValidElement as so, cloneElement as io } from "react";
+import { InteractiveTooltip as lo } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
+import { DropdownTrigger as y, DropdownItemType as ae } from "../../../types/dropdown.js";
+import { MenuItemMark as ao } from "../../../types/menu-item.js";
+import { dropdownGap as k, dropdownSearchClassName as co, dropdownNoResultsClassName as uo, dropdownDividerClassName as fo, getDropdownListHeight as po, dropdownItemListClassName as mo, dropdownBaseClassName as ho, dropdownListBaseClassName as go } from "./constants.js";
+import { CloseButton as wo } from "../CloseButton/CloseButton.js";
+import { MenuItem as yo } from "../MenuItem/MenuItem.js";
+import { Search as vo } from "../Search/Search.js";
+import { useThemeScope as xo } from "../ThemeScope/ThemeScope.js";
+import { ElementSize as Co } from "../../../types/size.js";
 import { mergeClasses as v } from "../../../utils/merge-classes.js";
-import { DropdownSubMenuItem as ze } from "./DropdownSubMenuItem.js";
-import { resolveItemMark as Ge, getItemRole as He } from "./item-mark.js";
-const Je = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', Qe = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", Ze = ["ArrowDown", "ArrowUp", "Home", "End"], et = (l, d, u) => {
-  if (l === "Home") return 0;
-  if (l === "End") return u - 1;
-  const a = l === "ArrowDown" ? 1 : -1;
-  return d === -1 ? a === 1 ? 0 : u - 1 : (d + a + u) % u;
-}, tt = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, gt = ({
-  children: l,
+import { DropdownSubMenuItem as No } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as ko, getItemRole as Eo } from "./item-mark.js";
+import { highlightDropdownItems as Do, filterDropdownItems as Io } from "./search.js";
+const Mo = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', Po = (t) => !t.hasAttribute("disabled") && t.getAttribute("aria-disabled") !== "true", Ao = ["ArrowDown", "ArrowUp", "Home", "End"], So = (t, d, f) => {
+  if (t === "Home") return 0;
+  if (t === "End") return f - 1;
+  const u = t === "ArrowDown" ? 1 : -1;
+  return d === -1 ? u === 1 ? 0 : f - 1 : (d + u + f) % f;
+}, Fo = (t) => "clientWidth" in t ? t.clientWidth : t.getBoundingClientRect?.()?.width ?? 0, Xo = ({
+  children: t,
   items: d,
-  onItemClick: u,
-  menuHeader: a,
-  menuFooter: h,
-  renderOverlay: I,
-  trigger: f = [y.Click],
-  placement: D,
-  disabled: i = !1,
-  open: M,
-  defaultOpen: q = !1,
-  onOpenChange: F,
-  closable: z = !1,
-  onClose: G,
-  className: H,
-  overlayContentClassName: T,
-  separatorClassName: O,
-  listClassName: J,
-  listStyle: R,
-  outsidePressIgnoreRef: L,
-  outsideClosable: Q = !0,
-  allowedPlacements: Z,
-  anchorToMouse: x = !1,
-  matchReferenceWidth: P = !0,
-  maxDropdownHeight: S,
-  initialFocus: _
+  onItemClick: f,
+  menuHeader: u,
+  menuFooter: x,
+  renderOverlay: E,
+  trigger: p = [y.Click],
+  placement: $,
+  disabled: a = !1,
+  open: B,
+  defaultOpen: ce = !1,
+  onOpenChange: H,
+  closable: de = !1,
+  onClose: ue,
+  className: fe,
+  overlayContentClassName: Y,
+  separatorClassName: K,
+  listClassName: pe,
+  listStyle: U,
+  outsidePressIgnoreRef: W,
+  outsideClosable: me = !0,
+  allowedPlacements: he,
+  anchorToMouse: D = !1,
+  matchReferenceWidth: F = !0,
+  maxDropdownHeight: j,
+  initialFocus: z,
+  searchable: l = !1,
+  searchValue: T,
+  onSearchChange: Q,
+  searchPlaceholder: L = "Search",
+  searchClearLabel: q = "Clear search",
+  noResultsLabel: X = "No results found",
+  filterItem: G,
+  maxVisibleItems: C
 }) => {
-  const ee = qe(), [te, ne] = j(q), E = M !== void 0, c = E ? !!M : te, C = Le(null), [oe, re] = j(!0), o = m(
-    (e, t, r) => {
-      e && re(r !== "hover" && r !== "safe-polygon"), E || ne(e), F?.(e);
+  const ge = xo(), [we, ye] = b(ce), O = B !== void 0, c = O ? !!B : we, I = to(null), [ve, xe] = b(""), m = T ?? ve, M = g(
+    (o) => {
+      T === void 0 && xe(o), Q?.(o);
     },
-    [E, F]
-  ), $ = Se(), se = D === void 0, B = ye(), { refs: p, floatingStyles: Y, context: g } = we({
-    nodeId: B,
-    placement: D,
+    [T, Q]
+  ), [Ce, Ne] = b(!0), r = g(
+    (o, e, s) => {
+      o ? Ne(s !== "hover" && s !== "safe-polygon") : l && m && M(""), O || ye(o), H?.(o);
+    },
+    [O, H, l, m, M]
+  ), J = no(), ke = $ === void 0, Z = $e(), { refs: w, floatingStyles: V, context: N } = Be({
+    nodeId: Z,
+    placement: $,
     open: c,
-    onOpenChange: o,
-    whileElementsMounted: ve,
+    onOpenChange: r,
+    whileElementsMounted: He,
     middleware: [
-      xe({ mainAxis: w, crossAxis: 0 }),
-      se ? Ce({
+      Ye({ mainAxis: k, crossAxis: 0 }),
+      ke ? Ke({
         alignment: "start",
         crossAxis: !0,
-        padding: w,
-        allowedPlacements: Z
-      }) : ke({ padding: w }),
-      be({ padding: w }),
-      Ie({
-        padding: w,
-        apply({ availableWidth: e, availableHeight: t, elements: r }) {
-          const s = r.floating, b = tt(r.reference);
-          s.style.setProperty(
+        padding: k,
+        allowedPlacements: he
+      }) : Ue({ padding: k }),
+      We({ padding: k }),
+      je({
+        padding: k,
+        apply({ availableWidth: o, availableHeight: e, elements: s }) {
+          const i = s.floating, h = Fo(s.reference);
+          i.style.setProperty(
             "--fui-available-height",
-            `${Math.floor(t)}px`
-          ), s.style.setProperty(
+            `${Math.floor(e)}px`
+          ), i.style.setProperty(
             "--reference-width",
-            P ? `${Math.round(b)}px` : "0px"
-          ), P ? s.style.minWidth = `${Math.round(b)}px` : s.style.removeProperty("min-width"), s.style.maxWidth = `${Math.floor(e)}px`;
-          const W = Math.floor(t);
-          s.style.maxHeight = `${S ? Math.min(W, S) : W}px`;
+            F ? `${Math.round(h)}px` : "0px"
+          ), F ? i.style.minWidth = `${Math.round(h)}px` : i.style.removeProperty("min-width"), i.style.maxWidth = `${Math.floor(o)}px`;
+          const se = Math.floor(e);
+          i.style.maxHeight = `${j ? Math.min(se, j) : se}px`;
         }
       })
     ]
-  }), le = Pe(g, {
-    enabled: f.includes(y.Click) && !i
-  }), ie = Ee(g, {
-    enabled: f.includes(y.Hover) && !i,
+  }), Ee = ze(N, {
+    enabled: p.includes(y.Click) && !a
+  }), De = Qe(N, {
+    enabled: p.includes(y.Hover) && !a,
     move: !1,
     restMs: 40,
-    handleClose: Ne(),
+    handleClose: qe(),
     delay: { open: 80, close: 80 }
-  }), ce = Ae(g, {
+  }), Ie = Xe(N, {
     bubbles: !0,
     referencePress: !1,
-    outsidePress: (e) => {
-      if (!Q) return !1;
-      const t = e.target;
-      return !(L?.current && t instanceof Node && L.current.contains(t));
+    outsidePress: (o) => {
+      if (!me) return !1;
+      const e = o.target;
+      return !(W?.current && e instanceof Node && W.current.contains(e));
     }
-  }), ae = De(g, { role: "menu" }), { getReferenceProps: de, getFloatingProps: ue } = Me([
-    le,
-    ie,
-    ce,
-    ae
-  ]), k = m(
-    (e, t) => {
-      p.setPositionReference({
+  }), Me = Ge(N, { role: "menu" }), { getReferenceProps: Pe, getFloatingProps: Ae } = Je([
+    Ee,
+    De,
+    Ie,
+    Me
+  ]), P = g(
+    (o, e) => {
+      w.setPositionReference({
         getBoundingClientRect: () => ({
           width: 0,
           height: 0,
-          x: e,
-          y: t,
-          top: t,
-          left: e,
-          right: e,
-          bottom: t
+          x: o,
+          y: e,
+          top: e,
+          left: o,
+          right: o,
+          bottom: e
         })
       });
     },
-    [p]
-  ), fe = m(
-    (e) => {
-      !f.includes(y.ContextMenu) || i || (e.preventDefault(), x && (k(e.clientX, e.clientY), C.current = document.elementFromPoint(
-        e.clientX,
-        e.clientY
-      )), o(!0));
+    [w]
+  ), Se = g(
+    (o) => {
+      !p.includes(y.ContextMenu) || a || (o.preventDefault(), D && (P(o.clientX, o.clientY), I.current = document.elementFromPoint(
+        o.clientX,
+        o.clientY
+      )), r(!0));
     },
-    [x, i, o, k, f]
-  ), pe = m(
-    (e) => {
-      !x || i || (f.includes(y.ContextMenu) && c && o(!1), k(e.clientX, e.clientY), C.current = document.elementFromPoint(
-        e.clientX,
-        e.clientY
+    [D, a, r, P, p]
+  ), Fe = g(
+    (o) => {
+      !D || a || (p.includes(y.ContextMenu) && c && r(!1), P(o.clientX, o.clientY), I.current = document.elementFromPoint(
+        o.clientX,
+        o.clientY
       ));
     },
-    [x, i, k, c, f, o]
+    [D, a, P, c, p, r]
   );
-  U(() => {
-    i && c && o(!1);
-  }, [i, c, o]);
-  const me = m(
-    (e) => {
-      if (e.defaultPrevented || !Ze.includes(e.key) || !e.currentTarget.contains(e.target)) return;
-      const t = Array.from(
-        e.currentTarget.querySelectorAll(
-          Je
+  ie(() => {
+    a && c && r(!1);
+  }, [a, c, r]);
+  const Te = g(
+    (o) => {
+      if (o.defaultPrevented || !Ao.includes(o.key) || !o.currentTarget.contains(o.target) || o.target instanceof HTMLInputElement && (o.key === "Home" || o.key === "End"))
+        return;
+      const e = Array.from(
+        o.currentTarget.querySelectorAll(
+          Mo
         )
-      ).filter(Qe);
-      if (t.length === 0) return;
-      e.preventDefault();
-      const r = e.currentTarget.ownerDocument.activeElement, s = t.findIndex((b) => b === r);
-      t[et(e.key, s, t.length)]?.focus();
+      ).filter(Po);
+      if (e.length === 0) return;
+      o.preventDefault();
+      const s = o.currentTarget.ownerDocument.activeElement, i = e.findIndex((h) => h === s);
+      e[So(o.key, i, e.length)]?.focus();
     },
     []
-  ), K = m(
-    (e) => (t) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), u?.({ key: e.key, domEvent: t }), e.selectable || o(!1));
+  ), ee = g(
+    (o) => (e) => {
+      o.disabled || (o.onClick?.({ key: o.key, domEvent: e }), f?.({ key: o.key, domEvent: e }), o.selectable || r(!1));
     },
-    [u, o]
-  ), he = _e(() => I ? I() : d ? /* @__PURE__ */ N(A, { children: [
-    a && /* @__PURE__ */ n(A, { children: typeof a == "function" ? a() : a }),
-    /* @__PURE__ */ n(
-      "div",
-      {
-        role: "none",
-        className: v(
-          We,
-          T,
-          V.dropdownList
-        ),
-        "aria-label": "dropdown",
-        children: d.map((e) => {
-          if (e.type === X.Divider)
-            return /* @__PURE__ */ n(
-              "div",
-              {
-                role: "separator",
-                className: v(
-                  Ke,
-                  O
-                )
-              },
-              e.key
-            );
-          if (e.type === X.PlainText)
-            return /* @__PURE__ */ n(
-              "div",
-              {
-                className: v(
-                  "px-3 py-2 text-secondary dial-caption-text",
-                  e.className
-                ),
-                children: e.label
-              },
-              e.key
-            );
-          if (e.children?.length)
-            return /* @__PURE__ */ n(
-              ze,
-              {
-                item: e,
-                onRootClose: () => o(!1)
-              },
-              e.key
-            );
-          const t = Ge(e), r = He(e), s = /* @__PURE__ */ n(
-            Xe,
-            {
-              role: r,
-              "aria-checked": r === "menuitem" ? void 0 : !!e.checked,
-              "aria-current": t === Ye.Highlight && e.checked ? !0 : void 0,
-              "aria-disabled": !!e.disabled,
-              disabled: e.disabled,
-              mark: t,
-              selected: !!e.checked,
-              danger: e.danger,
-              icon: e.icon,
-              label: e.label,
-              className: e.className,
-              rightControl: e.rightControl,
-              onClick: K(e),
-              children: e.renderItem?.(e)
-            }
-          );
-          return /* @__PURE__ */ n($e, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
-            Be,
+    [f, r]
+  ), A = le(() => !d || !l ? d : Do(
+    Io(d, m, G),
+    m
+  ), [d, l, m, G]), Le = le(() => {
+    if (E) return E();
+    if (!A) return null;
+    const o = l && A.length === 0;
+    return /* @__PURE__ */ S(R, { children: [
+      u && /* @__PURE__ */ n(R, { children: typeof u == "function" ? u() : u }),
+      l && /* @__PURE__ */ n(
+        "div",
+        {
+          className: v(
+            co,
+            _.dropdownSearch
+          ),
+          children: /* @__PURE__ */ n(
+            vo,
             {
-              asChild: !0,
-              placement: e.interactiveTooltip.placement,
-              content: e.interactiveTooltip.content,
-              contentClassName: e.interactiveTooltip.contentClassName,
-              children: s
+              value: m,
+              placeholder: L,
+              "aria-label": L,
+              clearLabel: q,
+              size: Co.Small,
+              onChange: (e) => M(e ?? "")
             }
-          ) : s }, e.key);
-        })
-      }
-    ),
-    h && /* @__PURE__ */ n(A, { children: typeof h == "function" ? h() : h })
-  ] }) : null, [
+          )
+        }
+      ),
+      /* @__PURE__ */ S(
+        "div",
+        {
+          role: "none",
+          className: v(
+            mo,
+            /* Under a search field or a row cap the list scrolls by itself,
+               so the field stays in view; the panel's own height cap still
+               shrinks it through `min-h-0`. */
+            (l || C != null) && "min-h-0 flex-1 overflow-auto",
+            Y,
+            _.dropdownList
+          ),
+          style: C != null ? { maxHeight: po(C) } : void 0,
+          "aria-label": "dropdown",
+          children: [
+            l && /* Always mounted, so a screen reader announces the text when a
+            query empties the list rather than missing a fresh region. */
+            /* @__PURE__ */ n(
+              "div",
+              {
+                role: "status",
+                className: o ? uo : "sr-only",
+                children: o ? X : ""
+              }
+            ),
+            A.map((e) => {
+              if (e.type === ae.Divider)
+                return /* @__PURE__ */ n(
+                  "div",
+                  {
+                    role: "separator",
+                    className: v(
+                      fo,
+                      K
+                    )
+                  },
+                  e.key
+                );
+              if (e.type === ae.PlainText)
+                return /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: v(
+                      "px-3 py-2 text-secondary dial-caption-text",
+                      e.className
+                    ),
+                    children: e.label
+                  },
+                  e.key
+                );
+              if (e.children?.length)
+                return /* @__PURE__ */ n(
+                  No,
+                  {
+                    item: e,
+                    onRootClose: () => r(!1)
+                  },
+                  e.key
+                );
+              const s = ko(e), i = Eo(e), h = /* @__PURE__ */ n(
+                yo,
+                {
+                  role: i,
+                  "aria-checked": i === "menuitem" ? void 0 : !!e.checked,
+                  "aria-current": s === ao.Highlight && e.checked ? !0 : void 0,
+                  "aria-disabled": !!e.disabled,
+                  disabled: e.disabled,
+                  mark: s,
+                  selected: !!e.checked,
+                  danger: e.danger,
+                  icon: e.icon,
+                  label: e.label,
+                  className: e.className,
+                  rightControl: e.rightControl,
+                  onClick: ee(e),
+                  children: e.renderItem?.(e)
+                }
+              );
+              return /* @__PURE__ */ n(ro, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
+                lo,
+                {
+                  asChild: !0,
+                  placement: e.interactiveTooltip.placement,
+                  content: e.interactiveTooltip.content,
+                  contentClassName: e.interactiveTooltip.contentClassName,
+                  children: h
+                }
+              ) : h }, e.key);
+            })
+          ]
+        }
+      ),
+      x && /* @__PURE__ */ n(R, { children: typeof x == "function" ? x() : x })
+    ] });
+  }, [
+    ee,
+    A,
+    x,
+    u,
+    E,
+    r,
+    Y,
     K,
-    d,
-    h,
-    a,
-    I,
-    o,
-    T,
-    O
-  ]), ge = de({
-    onContextMenu: fe,
-    onMouseDown: pe
-  });
-  return U(() => {
+    l,
+    m,
+    M,
+    L,
+    q,
+    X,
+    C
+  ]), Oe = !E && (l || C != null), {
+    "aria-haspopup": oe = "menu",
+    "aria-expanded": te = c,
+    "aria-controls": ne = J,
+    ...Re
+  } = Pe({
+    onContextMenu: Se,
+    onMouseDown: Fe
+  }), be = {
+    "aria-haspopup": oe,
+    "aria-expanded": te,
+    "aria-controls": ne
+  }, re = so(t) && p.some((o) => o !== y.ContextMenu), _e = re ? io(t, {
+    "aria-haspopup": t.props["aria-haspopup"] ?? oe,
+    "aria-expanded": t.props["aria-expanded"] ?? te,
+    "aria-controls": t.props["aria-controls"] ?? ne
+  }) : t;
+  return ie(() => {
     if (!c) return;
-    const e = p.reference.current;
-    let t = null;
-    if (e instanceof Element ? t = e : C.current instanceof Element && (t = C.current), !t) return;
-    const r = new IntersectionObserver(
-      ([s]) => {
-        s.isIntersecting || o(!1);
+    const o = w.reference.current;
+    let e = null;
+    if (o instanceof Element ? e = o : I.current instanceof Element && (e = I.current), !e) return;
+    const s = new IntersectionObserver(
+      ([i]) => {
+        i.isIntersecting || r(!1);
       },
       { root: null, threshold: 0 }
     );
-    return r.observe(t), () => r.disconnect();
-  }, [c, p.reference, o]), /* @__PURE__ */ n(Fe, { children: /* @__PURE__ */ N(Te, { id: B, children: [
+    return s.observe(e), () => s.disconnect();
+  }, [c, w.reference, r]), /* @__PURE__ */ n(Ze, { children: /* @__PURE__ */ S(Ve, { id: Z, children: [
     /* @__PURE__ */ n(
       "span",
       {
-        ref: p.setReference,
+        ref: w.setReference,
         className: v(
-          je,
-          i && "!cursor-not-allowed opacity-75",
-          H,
-          V.dropdown
+          ho,
+          a && "!cursor-not-allowed opacity-75",
+          fe,
+          _.dropdown
         ),
-        "aria-haspopup": "menu",
-        "aria-expanded": c,
-        "aria-controls": $,
-        ...ge,
-        children: l
+        ...re ? void 0 : be,
+        ...Re,
+        children: _e
       }
     ),
-    c && /* @__PURE__ */ n(Oe, { children: /* @__PURE__ */ n(
-      Re,
+    c && /* @__PURE__ */ n(eo, { children: /* @__PURE__ */ n(
+      oo,
       {
-        context: g,
+        context: N,
         modal: !1,
-        initialFocus: _ !== void 0 ? _ : oe ? 0 : -1,
+        initialFocus: z !== void 0 ? z : Ce ? 0 : -1,
         returnFocus: !0,
-        children: /* @__PURE__ */ N(
+        children: /* @__PURE__ */ S(
           "div",
           {
-            id: $,
-            ref: p.setFloating,
-            style: R ? { ...R, ...Y } : Y,
+            id: J,
+            ref: w.setFloating,
+            style: U ? { ...U, ...V } : V,
             className: v(
-              Ue,
-              !P && "w-max",
-              "overflow-auto",
-              ee,
-              J
+              go,
+              !F && "w-max",
+              Oe ? "flex flex-col overflow-hidden" : "overflow-auto",
+              ge,
+              pe
             ),
-            ...ue({ onKeyDown: me }),
+            ...Ae({ onKeyDown: Te }),
             children: [
-              z && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
-                Ve,
+              de && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
+                wo,
                 {
                   ariaLabel: "Close dropdown",
-                  onClose: (e) => {
-                    G?.(e), o(!1);
+                  onClose: (o) => {
+                    ue?.(o), r(!1);
                   }
                 }
               ) }),
-              he
+              Le
             ]
           }
         )
@@ -319,5 +399,5 @@ const Je = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   ] }) });
 };
 export {
-  gt as Dropdown
+  Xo as Dropdown
 };