@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.61

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

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