@epam/ai-dial-ui-kit 0.16.0-dev.2 → 0.16.0-dev.20

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

@@ -1,316 +1,385 @@
-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) => {
+import { jsxs as S, Fragment as R, jsx as o } from "react/jsx-runtime";
+import { useFloatingNodeId as Te, useFloating as Le, autoUpdate as Oe, offset as Re, autoPlacement as be, flip as _e, shift as $e, size as Be, useClick as Ye, useHover as He, safePolygon as Ke, useDismiss as Ue, useRole as We, useInteractions as je, FloatingTree as ze, FloatingNode as Qe, FloatingPortal as qe, FloatingFocusManager as Xe } from "@floating-ui/react";
+import { useState as b, useRef as Ge, useCallback as h, useId as Je, useEffect as oe, useMemo as ne, Fragment as Ze } from "react";
+import { InteractiveTooltip as Ve } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
+import { DropdownTrigger as k, DropdownItemType as re } from "../../../types/dropdown.js";
+import { MenuItemMark as et } from "../../../types/menu-item.js";
+import { dropdownGap as N, dropdownSearchClassName as tt, dropdownNoResultsClassName as ot, dropdownDividerClassName as nt, getDropdownListHeight as rt, dropdownItemListClassName as st, dropdownBaseClassName as lt, dropdownListBaseClassName as it } from "./constants.js";
+import { CloseButton as ct } from "../CloseButton/CloseButton.js";
+import { MenuItem as at } from "../MenuItem/MenuItem.js";
+import { Search as dt } from "../Search/Search.js";
+import { useThemeScope as ut } from "../ThemeScope/ThemeScope.js";
+import { ElementSize as ft } from "../../../types/size.js";
+import { mergeClasses as y } from "../../../utils/merge-classes.js";
+import { DropdownSubMenuItem as pt } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as mt, getItemRole as ht } from "./item-mark.js";
+import { highlightDropdownItems as gt, filterDropdownItems as wt } from "./search.js";
+const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', vt = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", Ct = ["ArrowDown", "ArrowUp", "Home", "End"], xt = (l, d, f) => {
   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 = ({
+  if (l === "End") return f - 1;
+  const u = l === "ArrowDown" ? 1 : -1;
+  return d === -1 ? u === 1 ? 0 : f - 1 : (d + u + f) % f;
+}, kt = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, Yt = ({
   children: l,
   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: v,
+  renderOverlay: E,
+  trigger: g = [k.Click],
+  placement: $,
+  disabled: c = !1,
+  open: B,
+  defaultOpen: se = !1,
+  onOpenChange: Y,
+  closable: le = !1,
+  onClose: ie,
+  className: ce,
+  overlayContentClassName: H,
+  separatorClassName: K,
+  listClassName: ae,
+  listStyle: U,
+  outsidePressIgnoreRef: W,
+  outsideClosable: de = !0,
+  allowedPlacements: ue,
+  anchorToMouse: D = !1,
+  matchReferenceWidth: F = !0,
+  maxDropdownHeight: j,
+  initialFocus: z,
+  searchable: i = !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 fe = ut(), [pe, me] = b(se), O = B !== void 0, a = O ? !!B : pe, I = Ge(null), [he, ge] = b(""), p = T ?? he, M = h(
+    (t) => {
+      T === void 0 && ge(t), Q?.(t);
     },
-    [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,
+    [T, Q]
+  ), [we, ye] = b(!0), n = h(
+    (t, e, r) => {
+      t ? ye(r !== "hover" && r !== "safe-polygon") : i && p && M(""), O || me(t), Y?.(t);
+    },
+    [O, Y, i, p, M]
+  ), J = Je(), ve = $ === void 0, Z = Te(), { refs: w, floatingStyles: V, context: x } = Le({
+    nodeId: Z,
+    placement: $,
+    open: a,
+    onOpenChange: n,
+    whileElementsMounted: Oe,
     middleware: [
-      xe({ mainAxis: w, crossAxis: 0 }),
-      se ? Ce({
+      Re({ mainAxis: N, crossAxis: 0 }),
+      ve ? be({
         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);
+        padding: N,
+        allowedPlacements: ue
+      }) : _e({ padding: N }),
+      $e({ padding: N }),
+      Be({
+        padding: N,
+        apply({ availableWidth: t, availableHeight: e, elements: r }) {
+          const s = r.floating, m = kt(r.reference);
           s.style.setProperty(
             "--fui-available-height",
-            `${Math.floor(t)}px`
+            `${Math.floor(e)}px`
           ), s.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(m)}px` : "0px"
+          ), F ? s.style.minWidth = `${Math.round(m)}px` : s.style.removeProperty("min-width"), s.style.maxWidth = `${Math.floor(t)}px`;
+          const te = Math.floor(e);
+          s.style.maxHeight = `${j ? Math.min(te, j) : te}px`;
         }
       })
     ]
-  }), le = Pe(g, {
-    enabled: f.includes(y.Click) && !i
-  }), ie = Ee(g, {
-    enabled: f.includes(y.Hover) && !i,
+  }), Ce = Ye(x, {
+    enabled: g.includes(k.Click) && !c
+  }), xe = He(x, {
+    enabled: g.includes(k.Hover) && !c,
     move: !1,
     restMs: 40,
-    handleClose: Ne(),
+    handleClose: Ke(),
     delay: { open: 80, close: 80 }
-  }), ce = Ae(g, {
+  }), ke = Ue(x, {
     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: (t) => {
+      if (!de) return !1;
+      const e = t.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({
+  }), Ne = We(x, { role: "menu" }), { getReferenceProps: Ee, getFloatingProps: De } = je([
+    Ce,
+    xe,
+    ke,
+    Ne
+  ]), P = h(
+    (t, e) => {
+      w.setPositionReference({
         getBoundingClientRect: () => ({
           width: 0,
           height: 0,
-          x: e,
-          y: t,
-          top: t,
-          left: e,
-          right: e,
-          bottom: t
+          x: t,
+          y: e,
+          top: e,
+          left: t,
+          right: t,
+          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]
+  ), Ie = h(
+    (t) => {
+      !g.includes(k.ContextMenu) || c || (t.preventDefault(), D && (P(t.clientX, t.clientY), I.current = document.elementFromPoint(
+        t.clientX,
+        t.clientY
+      )), n(!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, c, n, P, g]
+  ), Me = h(
+    (t) => {
+      !D || c || (g.includes(k.ContextMenu) && a && n(!1), P(t.clientX, t.clientY), I.current = document.elementFromPoint(
+        t.clientX,
+        t.clientY
       ));
     },
-    [x, i, k, c, f, o]
+    [D, c, P, a, g, n]
   );
-  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
+  oe(() => {
+    c && a && n(!1);
+  }, [c, a, n]);
+  const Pe = h(
+    (t) => {
+      if (t.defaultPrevented || !Ct.includes(t.key) || !t.currentTarget.contains(t.target) || t.target instanceof HTMLInputElement && (t.key === "Home" || t.key === "End"))
+        return;
+      const e = Array.from(
+        t.currentTarget.querySelectorAll(
+          yt
         )
-      ).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(vt);
+      if (e.length === 0) return;
+      t.preventDefault();
+      const r = t.currentTarget.ownerDocument.activeElement, s = e.findIndex((m) => m === r);
+      e[xt(t.key, s, 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 = h(
+    (t) => (e) => {
+      t.disabled || (t.onClick?.({ key: t.key, domEvent: e }), f?.({ key: t.key, domEvent: e }), t.selectable || n(!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, n]
+  ), A = ne(() => !d || !i ? d : gt(
+    wt(d, p, G),
+    p
+  ), [d, i, p, G]), Ae = ne(() => {
+    if (E) return E();
+    if (!A) return null;
+    const t = i && A.length === 0;
+    return /* @__PURE__ */ S(R, { children: [
+      u && /* @__PURE__ */ o(R, { children: typeof u == "function" ? u() : u }),
+      i && /* @__PURE__ */ o(
+        "div",
+        {
+          className: y(
+            tt,
+            _.dropdownSearch
+          ),
+          children: /* @__PURE__ */ o(
+            dt,
             {
-              asChild: !0,
-              placement: e.interactiveTooltip.placement,
-              content: e.interactiveTooltip.content,
-              contentClassName: e.interactiveTooltip.contentClassName,
-              children: s
+              value: p,
+              placeholder: L,
+              "aria-label": L,
+              clearLabel: q,
+              size: ft.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: y(
+            st,
+            /* 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`. */
+            (i || C != null) && "min-h-0 flex-1 overflow-auto",
+            H,
+            _.dropdownList
+          ),
+          style: C != null ? { maxHeight: rt(C) } : void 0,
+          "aria-label": "dropdown",
+          children: [
+            i && /* Always mounted, so a screen reader announces the text when a
+            query empties the list rather than missing a fresh region. */
+            /* @__PURE__ */ o(
+              "div",
+              {
+                role: "status",
+                className: t ? ot : "sr-only",
+                children: t ? X : ""
+              }
+            ),
+            A.map((e) => {
+              if (e.type === re.Divider)
+                return /* @__PURE__ */ o(
+                  "div",
+                  {
+                    role: "separator",
+                    className: y(
+                      nt,
+                      K
+                    )
+                  },
+                  e.key
+                );
+              if (e.type === re.PlainText)
+                return /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: y(
+                      "px-3 py-2 text-secondary dial-caption-text",
+                      e.className
+                    ),
+                    children: e.label
+                  },
+                  e.key
+                );
+              if (e.children?.length)
+                return /* @__PURE__ */ o(
+                  pt,
+                  {
+                    item: e,
+                    onRootClose: () => n(!1)
+                  },
+                  e.key
+                );
+              const r = mt(e), s = ht(e), m = /* @__PURE__ */ o(
+                at,
+                {
+                  role: s,
+                  "aria-checked": s === "menuitem" ? void 0 : !!e.checked,
+                  "aria-current": r === et.Highlight && e.checked ? !0 : void 0,
+                  "aria-disabled": !!e.disabled,
+                  disabled: e.disabled,
+                  mark: r,
+                  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__ */ o(Ze, { children: e.interactiveTooltip ? /* @__PURE__ */ o(
+                Ve,
+                {
+                  asChild: !0,
+                  placement: e.interactiveTooltip.placement,
+                  content: e.interactiveTooltip.content,
+                  contentClassName: e.interactiveTooltip.contentClassName,
+                  children: m
+                }
+              ) : m }, e.key);
+            })
+          ]
+        }
+      ),
+      v && /* @__PURE__ */ o(R, { children: typeof v == "function" ? v() : v })
+    ] });
+  }, [
+    ee,
+    A,
+    v,
+    u,
+    E,
+    n,
+    H,
     K,
-    d,
-    h,
-    a,
-    I,
-    o,
-    T,
-    O
-  ]), ge = de({
-    onContextMenu: fe,
-    onMouseDown: pe
+    i,
+    p,
+    M,
+    L,
+    q,
+    X,
+    C
+  ]), Se = !E && (i || C != null), Fe = Ee({
+    onContextMenu: Ie,
+    onMouseDown: Me
   });
-  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;
+  return oe(() => {
+    if (!a) return;
+    const t = w.reference.current;
+    let e = null;
+    if (t instanceof Element ? e = t : I.current instanceof Element && (e = I.current), !e) return;
     const r = new IntersectionObserver(
       ([s]) => {
-        s.isIntersecting || o(!1);
+        s.isIntersecting || n(!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: [
-    /* @__PURE__ */ n(
+    return r.observe(e), () => r.disconnect();
+  }, [a, w.reference, n]), /* @__PURE__ */ o(ze, { children: /* @__PURE__ */ S(Qe, { id: Z, children: [
+    /* @__PURE__ */ o(
       "span",
       {
-        ref: p.setReference,
-        className: v(
-          je,
-          i && "!cursor-not-allowed opacity-75",
-          H,
-          V.dropdown
+        ref: w.setReference,
+        className: y(
+          lt,
+          c && "!cursor-not-allowed opacity-75",
+          ce,
+          _.dropdown
         ),
         "aria-haspopup": "menu",
-        "aria-expanded": c,
-        "aria-controls": $,
-        ...ge,
+        "aria-expanded": a,
+        "aria-controls": J,
+        ...Fe,
         children: l
       }
     ),
-    c && /* @__PURE__ */ n(Oe, { children: /* @__PURE__ */ n(
-      Re,
+    a && /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
+      Xe,
       {
-        context: g,
+        context: x,
         modal: !1,
-        initialFocus: _ !== void 0 ? _ : oe ? 0 : -1,
+        initialFocus: z !== void 0 ? z : we ? 0 : -1,
         returnFocus: !0,
-        children: /* @__PURE__ */ N(
+        children: /* @__PURE__ */ S(
           "div",
           {
-            id: $,
-            ref: p.setFloating,
-            style: R ? { ...R, ...Y } : Y,
-            className: v(
-              Ue,
-              !P && "w-max",
-              "overflow-auto",
-              ee,
-              J
+            id: J,
+            ref: w.setFloating,
+            style: U ? { ...U, ...V } : V,
+            className: y(
+              it,
+              !F && "w-max",
+              Se ? "flex flex-col overflow-hidden" : "overflow-auto",
+              fe,
+              ae
             ),
-            ...ue({ onKeyDown: me }),
+            ...De({ onKeyDown: Pe }),
             children: [
-              z && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
-                Ve,
+              le && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ o(
+                ct,
                 {
                   ariaLabel: "Close dropdown",
-                  onClose: (e) => {
-                    G?.(e), o(!1);
+                  onClose: (t) => {
+                    ie?.(t), n(!1);
                   }
                 }
               ) }),
-              he
+              Ae
             ]
           }
         )
@@ -319,5 +388,5 @@ const Je = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   ] }) });
 };
 export {
-  gt as Dropdown
+  Yt as Dropdown
 };