@epam/ai-dial-ui-kit 0.16.0-dev.25 → 0.16.0-dev.32

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

@@ -1,53 +1,53 @@
-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 { 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 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 f - 1;
-  const u = l === "ArrowDown" ? 1 : -1;
+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 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;
-}, kt = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, Yt = ({
-  children: l,
+}, Fo = (t) => "clientWidth" in t ? t.clientWidth : t.getBoundingClientRect?.()?.width ?? 0, Xo = ({
+  children: t,
   items: d,
   onItemClick: f,
   menuHeader: u,
-  menuFooter: v,
+  menuFooter: x,
   renderOverlay: E,
-  trigger: g = [k.Click],
+  trigger: p = [y.Click],
   placement: $,
-  disabled: c = !1,
+  disabled: a = !1,
   open: B,
-  defaultOpen: se = !1,
-  onOpenChange: Y,
-  closable: le = !1,
-  onClose: ie,
-  className: ce,
-  overlayContentClassName: H,
+  defaultOpen: ce = !1,
+  onOpenChange: H,
+  closable: de = !1,
+  onClose: ue,
+  className: fe,
+  overlayContentClassName: Y,
   separatorClassName: K,
-  listClassName: ae,
+  listClassName: pe,
   listStyle: U,
   outsidePressIgnoreRef: W,
-  outsideClosable: de = !0,
-  allowedPlacements: ue,
+  outsideClosable: me = !0,
+  allowedPlacements: he,
   anchorToMouse: D = !1,
   matchReferenceWidth: F = !0,
   maxDropdownHeight: j,
   initialFocus: z,
-  searchable: i = !1,
+  searchable: l = !1,
   searchValue: T,
   onSearchChange: Q,
   searchPlaceholder: L = "Search",
@@ -56,148 +56,148 @@ const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   filterItem: G,
   maxVisibleItems: C
 }) => {
-  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);
+  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);
     },
     [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);
+  ), [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, Y, i, p, M]
-  ), J = Je(), ve = $ === void 0, Z = Te(), { refs: w, floatingStyles: V, context: x } = Le({
+    [O, H, l, m, M]
+  ), J = no(), ke = $ === void 0, Z = $e(), { refs: w, floatingStyles: V, context: N } = Be({
     nodeId: Z,
     placement: $,
-    open: a,
-    onOpenChange: n,
-    whileElementsMounted: Oe,
+    open: c,
+    onOpenChange: r,
+    whileElementsMounted: He,
     middleware: [
-      Re({ mainAxis: N, crossAxis: 0 }),
-      ve ? be({
+      Ye({ mainAxis: k, crossAxis: 0 }),
+      ke ? Ke({
         alignment: "start",
         crossAxis: !0,
-        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(
+        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(e)}px`
-          ), s.style.setProperty(
+          ), i.style.setProperty(
             "--reference-width",
-            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`;
+            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`;
         }
       })
     ]
-  }), Ce = Ye(x, {
-    enabled: g.includes(k.Click) && !c
-  }), xe = He(x, {
-    enabled: g.includes(k.Hover) && !c,
+  }), Ee = ze(N, {
+    enabled: p.includes(y.Click) && !a
+  }), De = Qe(N, {
+    enabled: p.includes(y.Hover) && !a,
     move: !1,
     restMs: 40,
-    handleClose: Ke(),
+    handleClose: qe(),
     delay: { open: 80, close: 80 }
-  }), ke = Ue(x, {
+  }), Ie = Xe(N, {
     bubbles: !0,
     referencePress: !1,
-    outsidePress: (t) => {
-      if (!de) return !1;
-      const e = t.target;
+    outsidePress: (o) => {
+      if (!me) return !1;
+      const e = o.target;
       return !(W?.current && e instanceof Node && W.current.contains(e));
     }
-  }), Ne = We(x, { role: "menu" }), { getReferenceProps: Ee, getFloatingProps: De } = je([
-    Ce,
-    xe,
-    ke,
-    Ne
-  ]), P = h(
-    (t, e) => {
+  }), 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: t,
+          x: o,
           y: e,
           top: e,
-          left: t,
-          right: t,
+          left: o,
+          right: o,
           bottom: e
         })
       });
     },
     [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));
+  ), 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));
     },
-    [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
+    [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
       ));
     },
-    [D, c, P, a, g, n]
+    [D, a, P, c, p, r]
   );
-  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"))
+  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(
-        t.currentTarget.querySelectorAll(
-          yt
+        o.currentTarget.querySelectorAll(
+          Mo
         )
-      ).filter(vt);
+      ).filter(Po);
       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();
+      o.preventDefault();
+      const s = o.currentTarget.ownerDocument.activeElement, i = e.findIndex((h) => h === s);
+      e[So(o.key, i, e.length)]?.focus();
     },
     []
-  ), ee = h(
-    (t) => (e) => {
-      t.disabled || (t.onClick?.({ key: t.key, domEvent: e }), f?.({ key: t.key, domEvent: e }), t.selectable || n(!1));
+  ), ee = g(
+    (o) => (e) => {
+      o.disabled || (o.onClick?.({ key: o.key, domEvent: e }), f?.({ key: o.key, domEvent: e }), o.selectable || r(!1));
     },
-    [f, n]
-  ), A = ne(() => !d || !i ? d : gt(
-    wt(d, p, G),
-    p
-  ), [d, i, p, G]), Ae = ne(() => {
+    [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 t = i && A.length === 0;
+    const o = l && A.length === 0;
     return /* @__PURE__ */ S(R, { children: [
-      u && /* @__PURE__ */ o(R, { children: typeof u == "function" ? u() : u }),
-      i && /* @__PURE__ */ o(
+      u && /* @__PURE__ */ n(R, { children: typeof u == "function" ? u() : u }),
+      l && /* @__PURE__ */ n(
         "div",
         {
-          className: y(
-            tt,
+          className: v(
+            co,
             _.dropdownSearch
           ),
-          children: /* @__PURE__ */ o(
-            dt,
+          children: /* @__PURE__ */ n(
+            vo,
             {
-              value: p,
+              value: m,
               placeholder: L,
               "aria-label": L,
               clearLabel: q,
-              size: ft.Small,
+              size: Co.Small,
               onChange: (e) => M(e ?? "")
             }
           )
@@ -207,46 +207,46 @@ const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
         "div",
         {
           role: "none",
-          className: y(
-            st,
+          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`. */
-            (i || C != null) && "min-h-0 flex-1 overflow-auto",
-            H,
+            (l || C != null) && "min-h-0 flex-1 overflow-auto",
+            Y,
             _.dropdownList
           ),
-          style: C != null ? { maxHeight: rt(C) } : void 0,
+          style: C != null ? { maxHeight: po(C) } : void 0,
           "aria-label": "dropdown",
           children: [
-            i && /* Always mounted, so a screen reader announces the text when a
+            l && /* Always mounted, so a screen reader announces the text when a
             query empties the list rather than missing a fresh region. */
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ n(
               "div",
               {
                 role: "status",
-                className: t ? ot : "sr-only",
-                children: t ? X : ""
+                className: o ? uo : "sr-only",
+                children: o ? X : ""
               }
             ),
             A.map((e) => {
-              if (e.type === re.Divider)
-                return /* @__PURE__ */ o(
+              if (e.type === ae.Divider)
+                return /* @__PURE__ */ n(
                   "div",
                   {
                     role: "separator",
-                    className: y(
-                      nt,
+                    className: v(
+                      fo,
                       K
                     )
                   },
                   e.key
                 );
-              if (e.type === re.PlainText)
-                return /* @__PURE__ */ o(
+              if (e.type === ae.PlainText)
+                return /* @__PURE__ */ n(
                   "div",
                   {
-                    className: y(
+                    className: v(
                       "px-3 py-2 text-secondary dial-caption-text",
                       e.className
                     ),
@@ -255,23 +255,23 @@ const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
                   e.key
                 );
               if (e.children?.length)
-                return /* @__PURE__ */ o(
-                  pt,
+                return /* @__PURE__ */ n(
+                  No,
                   {
                     item: e,
-                    onRootClose: () => n(!1)
+                    onRootClose: () => r(!1)
                   },
                   e.key
                 );
-              const r = mt(e), s = ht(e), m = /* @__PURE__ */ o(
-                at,
+              const s = ko(e), i = Eo(e), h = /* @__PURE__ */ n(
+                yo,
                 {
-                  role: s,
-                  "aria-checked": s === "menuitem" ? void 0 : !!e.checked,
-                  "aria-current": r === et.Highlight && e.checked ? !0 : void 0,
+                  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: r,
+                  mark: s,
                   selected: !!e.checked,
                   danger: e.danger,
                   icon: e.icon,
@@ -282,78 +282,89 @@ const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
                   children: e.renderItem?.(e)
                 }
               );
-              return /* @__PURE__ */ o(Ze, { children: e.interactiveTooltip ? /* @__PURE__ */ o(
-                Ve,
+              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: m
+                  children: h
                 }
-              ) : m }, e.key);
+              ) : h }, e.key);
             })
           ]
         }
       ),
-      v && /* @__PURE__ */ o(R, { children: typeof v == "function" ? v() : v })
+      x && /* @__PURE__ */ n(R, { children: typeof x == "function" ? x() : x })
     ] });
   }, [
     ee,
     A,
-    v,
+    x,
     u,
     E,
-    n,
-    H,
+    r,
+    Y,
     K,
-    i,
-    p,
+    l,
+    m,
     M,
     L,
     q,
     X,
     C
-  ]), Se = !E && (i || C != null), Fe = Ee({
-    onContextMenu: Ie,
-    onMouseDown: Me
-  });
-  return oe(() => {
-    if (!a) return;
-    const t = w.reference.current;
+  ]), 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 o = 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 || n(!1);
+    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(e), () => r.disconnect();
-  }, [a, w.reference, n]), /* @__PURE__ */ o(ze, { children: /* @__PURE__ */ S(Qe, { id: Z, children: [
-    /* @__PURE__ */ o(
+    return s.observe(e), () => s.disconnect();
+  }, [c, w.reference, r]), /* @__PURE__ */ n(Ze, { children: /* @__PURE__ */ S(Ve, { id: Z, children: [
+    /* @__PURE__ */ n(
       "span",
       {
         ref: w.setReference,
-        className: y(
-          lt,
-          c && "!cursor-not-allowed opacity-75",
-          ce,
+        className: v(
+          ho,
+          a && "!cursor-not-allowed opacity-75",
+          fe,
           _.dropdown
         ),
-        "aria-haspopup": "menu",
-        "aria-expanded": a,
-        "aria-controls": J,
-        ...Fe,
-        children: l
+        ...re ? void 0 : be,
+        ...Re,
+        children: _e
       }
     ),
-    a && /* @__PURE__ */ o(qe, { children: /* @__PURE__ */ o(
-      Xe,
+    c && /* @__PURE__ */ n(eo, { children: /* @__PURE__ */ n(
+      oo,
       {
-        context: x,
+        context: N,
         modal: !1,
-        initialFocus: z !== void 0 ? z : we ? 0 : -1,
+        initialFocus: z !== void 0 ? z : Ce ? 0 : -1,
         returnFocus: !0,
         children: /* @__PURE__ */ S(
           "div",
@@ -361,25 +372,25 @@ const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
             id: J,
             ref: w.setFloating,
             style: U ? { ...U, ...V } : V,
-            className: y(
-              it,
+            className: v(
+              go,
               !F && "w-max",
-              Se ? "flex flex-col overflow-hidden" : "overflow-auto",
-              fe,
-              ae
+              Oe ? "flex flex-col overflow-hidden" : "overflow-auto",
+              ge,
+              pe
             ),
-            ...De({ onKeyDown: Pe }),
+            ...Ae({ onKeyDown: Te }),
             children: [
-              le && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ o(
-                ct,
+              de && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
+                wo,
                 {
                   ariaLabel: "Close dropdown",
-                  onClose: (t) => {
-                    ie?.(t), n(!1);
+                  onClose: (o) => {
+                    ue?.(o), r(!1);
                   }
                 }
               ) }),
-              Ae
+              Le
             ]
           }
         )
@@ -388,5 +399,5 @@ const yt = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   ] }) });
 };
 export {
-  Yt as Dropdown
+  Xo as Dropdown
 };