@epam/ai-dial-ui-kit 0.14.0-dev.41 → 0.14.0-dev.45

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

@@ -1,102 +1,105 @@
-import { jsxs as A, Fragment as E, jsx as s } from "react/jsx-runtime";
-import { useFloating as pe, autoUpdate as me, offset as he, autoPlacement as ye, flip as ge, shift as we, size as xe, useClick as ve, useHover as ke, useDismiss as be, useRole as Ce, useInteractions as Ee, FloatingPortal as Pe, FloatingFocusManager as Me } from "@floating-ui/react";
-import { useState as _, useRef as De, useCallback as m, useId as Ae, useEffect as $, useMemo as Ie } from "react";
-import { DropdownTrigger as g, DropdownItemType as W } from "../../../types/dropdown.js";
-import { MenuItemMark as Ne } from "../../../types/menu-item.js";
-import { dropdownGap as w, dropdownDividerClassName as Oe, dropdownBaseClassName as Fe, dropdownListBaseClassName as Re } from "./constants.js";
-import { CloseButton as Se } from "../CloseButton/CloseButton.js";
-import { MenuItem as Le } from "../MenuItem/MenuItem.js";
-import { useThemeScope as Be } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as x } from "../../../utils/merge-classes.js";
-import { DropdownSubMenuItem as Te } from "./DropdownSubMenuItem.js";
-import { resolveItemMark as Ye, getItemRole as _e } from "./item-mark.js";
-const $e = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', We = (r) => !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true", je = ["ArrowDown", "ArrowUp", "Home", "End"], Ke = (r, u, d) => {
-  if (r === "Home") return 0;
-  if (r === "End") return d - 1;
-  const a = r === "ArrowDown" ? 1 : -1;
-  return u === -1 ? a === 1 ? 0 : d - 1 : (u + a + d) % d;
-}, Ue = (r) => "clientWidth" in r ? r.clientWidth : r.getBoundingClientRect?.()?.width ?? 0, ot = ({
-  children: r,
-  items: u,
-  onItemClick: d,
+import { jsxs as N, Fragment as F, jsx as n } from "react/jsx-runtime";
+import { useFloatingNodeId as me, useFloating as he, autoUpdate as ge, offset as ye, autoPlacement as we, flip as ve, shift as xe, size as Ce, useClick as ke, useHover as be, safePolygon as Pe, useDismiss as Ee, useRole as Ie, useInteractions as Ne, FloatingTree as Fe, FloatingNode as Me, FloatingPortal as De, FloatingFocusManager as Ae } from "@floating-ui/react";
+import { useState as _, useRef as Oe, useCallback as m, useId as Re, useEffect as W, useMemo as Te, Fragment as Se } from "react";
+import { InteractiveTooltip as Le } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { DropdownTrigger as y, DropdownItemType as j } from "../../../types/dropdown.js";
+import { MenuItemMark as $e } from "../../../types/menu-item.js";
+import { dropdownGap as w, dropdownDividerClassName as Be, dropdownBaseClassName as Ye, dropdownListBaseClassName as _e } from "./constants.js";
+import { CloseButton as We } from "../CloseButton/CloseButton.js";
+import { MenuItem as je } from "../MenuItem/MenuItem.js";
+import { useThemeScope as Ke } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as v } from "../../../utils/merge-classes.js";
+import { DropdownSubMenuItem as Ue } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as Ve, getItemRole as Xe } from "./item-mark.js";
+const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', ze = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", Ge = ["ArrowDown", "ArrowUp", "Home", "End"], He = (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;
+}, Je = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, ut = ({
+  children: l,
+  items: d,
+  onItemClick: u,
   menuHeader: a,
   menuFooter: h,
   renderOverlay: P,
-  trigger: f = [g.Click],
-  placement: I,
+  trigger: f = [y.Click],
+  placement: M,
   disabled: i = !1,
-  open: N,
-  defaultOpen: j = !1,
-  onOpenChange: O,
-  closable: K = !1,
-  onClose: U,
-  className: V,
-  overlayContentClassName: F,
+  open: D,
+  defaultOpen: K = !1,
+  onOpenChange: A,
+  closable: U = !1,
+  onClose: V,
+  className: X,
+  overlayContentClassName: O,
   separatorClassName: R,
-  listClassName: X,
-  outsidePressIgnoreRef: S,
-  outsideClosable: q = !0,
-  allowedPlacements: z,
-  anchorToMouse: v = !1,
-  matchReferenceWidth: M = !0,
-  maxDropdownHeight: L
+  listClassName: q,
+  outsidePressIgnoreRef: T,
+  outsideClosable: z = !0,
+  allowedPlacements: G,
+  anchorToMouse: x = !1,
+  matchReferenceWidth: E = !0,
+  maxDropdownHeight: S
 }) => {
-  const G = Be(), [H, J] = _(j), D = N !== void 0, c = D ? !!N : H, k = De(null), [Q, Z] = _(!0), n = m(
-    (e, t, o) => {
-      e && Z(o !== "hover" && o !== "safe-polygon"), D || J(e), O?.(e);
+  const H = Ke(), [J, Q] = _(K), I = D !== void 0, c = I ? !!D : J, C = Oe(null), [Z, ee] = _(!0), o = m(
+    (e, t, r) => {
+      e && ee(r !== "hover" && r !== "safe-polygon"), I || Q(e), A?.(e);
     },
-    [D, O]
-  ), B = Ae(), ee = I === void 0, { refs: p, floatingStyles: te, context: y } = pe({
-    placement: I,
+    [I, A]
+  ), L = Re(), te = M === void 0, $ = me(), { refs: p, floatingStyles: ne, context: g } = he({
+    nodeId: $,
+    placement: M,
     open: c,
-    onOpenChange: n,
-    whileElementsMounted: me,
+    onOpenChange: o,
+    whileElementsMounted: ge,
     middleware: [
-      he({ mainAxis: w, crossAxis: 0 }),
-      ee ? ye({
+      ye({ mainAxis: w, crossAxis: 0 }),
+      te ? we({
         alignment: "start",
         crossAxis: !0,
         padding: w,
-        allowedPlacements: z
-      }) : ge({ padding: w }),
-      we({ padding: w }),
-      xe({
+        allowedPlacements: G
+      }) : ve({ padding: w }),
+      xe({ padding: w }),
+      Ce({
         padding: w,
-        apply({ availableWidth: e, availableHeight: t, elements: o }) {
-          const l = o.floating, C = Ue(o.reference);
-          l.style.setProperty(
+        apply({ availableWidth: e, availableHeight: t, elements: r }) {
+          const s = r.floating, b = Je(r.reference);
+          s.style.setProperty(
             "--fui-available-height",
             `${Math.floor(t)}px`
-          ), l.style.setProperty(
+          ), s.style.setProperty(
             "--reference-width",
-            M ? `${Math.round(C)}px` : "0px"
-          ), M ? l.style.minWidth = `${Math.round(C)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
+            E ? `${Math.round(b)}px` : "0px"
+          ), E ? s.style.minWidth = `${Math.round(b)}px` : s.style.removeProperty("min-width"), s.style.maxWidth = `${Math.floor(e)}px`;
           const Y = Math.floor(t);
-          l.style.maxHeight = `${L ? Math.min(Y, L) : Y}px`;
+          s.style.maxHeight = `${S ? Math.min(Y, S) : Y}px`;
         }
       })
     ]
-  }), ne = ve(y, {
-    enabled: f.includes(g.Click) && !i
-  }), oe = ke(y, {
-    enabled: f.includes(g.Hover) && !i,
+  }), oe = ke(g, {
+    enabled: f.includes(y.Click) && !i
+  }), re = be(g, {
+    enabled: f.includes(y.Hover) && !i,
     move: !1,
     restMs: 40,
+    handleClose: Pe(),
     delay: { open: 80, close: 80 }
-  }), re = be(y, {
+  }), se = Ee(g, {
     bubbles: !0,
     referencePress: !1,
     outsidePress: (e) => {
-      if (!q) return !1;
+      if (!z) return !1;
       const t = e.target;
-      return !(S?.current && t instanceof Node && S.current.contains(t));
+      return !(T?.current && t instanceof Node && T.current.contains(t));
     }
-  }), se = Ce(y, { role: "menu" }), { getReferenceProps: le, getFloatingProps: ie } = Ee([
-    ne,
+  }), le = Ie(g, { role: "menu" }), { getReferenceProps: ie, getFloatingProps: ce } = Ne([
     oe,
     re,
-    se
-  ]), b = m(
+    se,
+    le
+  ]), k = m(
     (e, t) => {
       p.setPositionReference({
         getBoundingClientRect: () => ({
@@ -112,71 +115,71 @@ const $e = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       });
     },
     [p]
-  ), ce = m(
+  ), ae = m(
     (e) => {
-      !f.includes(g.ContextMenu) || i || (e.preventDefault(), v && (b(e.clientX, e.clientY), k.current = document.elementFromPoint(
+      !f.includes(y.ContextMenu) || i || (e.preventDefault(), x && (k(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
         e.clientY
-      )), n(!0));
+      )), o(!0));
     },
-    [v, i, n, b, f]
-  ), ae = m(
+    [x, i, o, k, f]
+  ), de = m(
     (e) => {
-      !v || i || (f.includes(g.ContextMenu) && c && n(!1), b(e.clientX, e.clientY), k.current = document.elementFromPoint(
+      !x || i || (f.includes(y.ContextMenu) && c && o(!1), k(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
         e.clientY
       ));
     },
-    [v, i, b, c, f, n]
+    [x, i, k, c, f, o]
   );
-  $(() => {
-    i && c && n(!1);
-  }, [i, c, n]);
+  W(() => {
+    i && c && o(!1);
+  }, [i, c, o]);
   const ue = m(
     (e) => {
-      if (e.defaultPrevented || !je.includes(e.key)) return;
+      if (e.defaultPrevented || !Ge.includes(e.key)) return;
       const t = Array.from(
         e.currentTarget.querySelectorAll(
-          $e
+          qe
         )
-      ).filter(We);
+      ).filter(ze);
       if (t.length === 0) return;
       e.preventDefault();
-      const o = e.currentTarget.ownerDocument.activeElement, l = t.findIndex((C) => C === o);
-      t[Ke(e.key, l, t.length)]?.focus();
+      const r = e.currentTarget.ownerDocument.activeElement, s = t.findIndex((b) => b === r);
+      t[He(e.key, s, t.length)]?.focus();
     },
     []
-  ), T = m(
+  ), B = m(
     (e) => (t) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), d?.({ key: e.key, domEvent: t }), e.selectable || n(!1));
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), u?.({ key: e.key, domEvent: t }), e.selectable || o(!1));
     },
-    [d, n]
-  ), de = Ie(() => P ? P() : u ? /* @__PURE__ */ A(E, { children: [
-    a && /* @__PURE__ */ s(E, { children: typeof a == "function" ? a() : a }),
-    /* @__PURE__ */ s(
+    [u, o]
+  ), fe = Te(() => P ? P() : d ? /* @__PURE__ */ N(F, { children: [
+    a && /* @__PURE__ */ n(F, { children: typeof a == "function" ? a() : a }),
+    /* @__PURE__ */ n(
       "div",
       {
         role: "none",
-        className: x("py-1", F),
+        className: v("py-1", O),
         "aria-label": "dropdown",
-        children: u.map((e) => {
-          if (e.type === W.Divider)
-            return /* @__PURE__ */ s(
+        children: d.map((e) => {
+          if (e.type === j.Divider)
+            return /* @__PURE__ */ n(
               "div",
               {
                 role: "separator",
-                className: x(
-                  Oe,
+                className: v(
+                  Be,
                   R
                 )
               },
               e.key
             );
-          if (e.type === W.PlainText)
-            return /* @__PURE__ */ s(
+          if (e.type === j.PlainText)
+            return /* @__PURE__ */ n(
               "div",
               {
-                className: x(
+                className: v(
                   "px-3 py-2 text-secondary dial-caption-text",
                   e.className
                 ),
@@ -185,21 +188,20 @@ const $e = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
               e.key
             );
           if (e.children?.length)
-            return /* @__PURE__ */ s(
-              Te,
+            return /* @__PURE__ */ n(
+              Ue,
               {
                 item: e,
-                onRootClose: () => n(!1)
+                onRootClose: () => o(!1)
               },
               e.key
             );
-          const t = Ye(e), o = _e(e);
-          return /* @__PURE__ */ s(
-            Le,
+          const t = Ve(e), r = Xe(e), s = /* @__PURE__ */ n(
+            je,
             {
-              role: o,
-              "aria-checked": o === "menuitem" ? void 0 : !!e.checked,
-              "aria-current": t === Ne.Highlight && e.checked ? !0 : void 0,
+              role: r,
+              "aria-checked": r === "menuitem" ? void 0 : !!e.checked,
+              "aria-current": t === $e.Highlight && e.checked ? !0 : void 0,
               "aria-disabled": !!e.disabled,
               disabled: e.disabled,
               mark: t,
@@ -209,96 +211,105 @@ const $e = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
               label: e.label,
               className: e.className,
               rightControl: e.rightControl,
-              onClick: T(e),
+              onClick: B(e),
               children: e.renderItem?.(e)
-            },
-            e.key
+            }
           );
+          return /* @__PURE__ */ n(Se, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
+            Le,
+            {
+              asChild: !0,
+              placement: e.interactiveTooltip.placement,
+              content: e.interactiveTooltip.content,
+              contentClassName: e.interactiveTooltip.contentClassName,
+              children: s
+            }
+          ) : s }, e.key);
         })
       }
     ),
-    h && /* @__PURE__ */ s(E, { children: typeof h == "function" ? h() : h })
+    h && /* @__PURE__ */ n(F, { children: typeof h == "function" ? h() : h })
   ] }) : null, [
-    T,
-    u,
+    B,
+    d,
     h,
     a,
     P,
-    n,
-    F,
+    o,
+    O,
     R
-  ]), fe = le({
-    onContextMenu: ce,
-    onMouseDown: ae
+  ]), pe = ie({
+    onContextMenu: ae,
+    onMouseDown: de
   });
-  return $(() => {
+  return W(() => {
     if (!c) return;
     const e = p.reference.current;
     let t = null;
-    if (e instanceof Element ? t = e : k.current instanceof Element && (t = k.current), !t) return;
-    const o = new IntersectionObserver(
-      ([l]) => {
-        l.isIntersecting || n(!1);
+    if (e instanceof Element ? t = e : C.current instanceof Element && (t = C.current), !t) return;
+    const r = new IntersectionObserver(
+      ([s]) => {
+        s.isIntersecting || o(!1);
       },
       { root: null, threshold: 0 }
     );
-    return o.observe(t), () => o.disconnect();
-  }, [c, p.reference, n]), /* @__PURE__ */ A(E, { children: [
-    /* @__PURE__ */ s(
+    return r.observe(t), () => r.disconnect();
+  }, [c, p.reference, o]), /* @__PURE__ */ n(Fe, { children: /* @__PURE__ */ N(Me, { id: $, children: [
+    /* @__PURE__ */ n(
       "span",
       {
         ref: p.setReference,
-        className: x(
-          Fe,
+        className: v(
+          Ye,
           i && "!cursor-not-allowed opacity-75",
-          V
+          X
         ),
         "aria-haspopup": "menu",
         "aria-expanded": c,
-        "aria-controls": B,
-        ...fe,
-        children: r
+        "aria-controls": L,
+        ...pe,
+        children: l
       }
     ),
-    c && /* @__PURE__ */ s(Pe, { children: /* @__PURE__ */ s(
-      Me,
+    c && /* @__PURE__ */ n(De, { children: /* @__PURE__ */ n(
+      Ae,
       {
-        context: y,
+        context: g,
         modal: !1,
-        initialFocus: Q ? 0 : -1,
+        initialFocus: Z ? 0 : -1,
         returnFocus: !0,
-        children: /* @__PURE__ */ A(
+        children: /* @__PURE__ */ N(
           "div",
           {
-            id: B,
+            id: L,
             ref: p.setFloating,
-            style: te,
-            className: x(
-              Re,
-              !M && "w-max",
+            style: ne,
+            className: v(
+              _e,
+              !E && "w-max",
               "overflow-auto",
-              G,
-              X
+              H,
+              q
             ),
-            ...ie({ onKeyDown: ue }),
+            ...ce({ onKeyDown: ue }),
             children: [
-              K && /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ s(
-                Se,
+              U && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
+                We,
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (e) => {
-                    U?.(e), n(!1);
+                    V?.(e), o(!1);
                   }
                 }
               ) }),
-              de
+              fe
             ]
           }
         )
       }
     ) })
-  ] });
+  ] }) });
 };
 export {
-  ot as Dropdown
+  ut as Dropdown
 };

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

@@ -1,64 +1,75 @@
-import { jsxs as t, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { useCallback as g } from "react";
-import { MenuItem as l } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as k } from "../../../types/menu-item.js";
-import { useSubMenuFloating as M, SubMenuPanel as C } from "../../../utils/sub-menu-floating.js";
-import { getItemRole as I, resolveItemMark as m } from "./item-mark.js";
-import { dropdownGap as F, submenuCaretIcon as S, dropdownSubMenuClassName as y } from "./constants.js";
-const R = ({
-  item: r,
-  onRootClose: o
+import { jsx as r, jsxs as c, Fragment as v } from "react/jsx-runtime";
+import { FloatingNode as N } from "@floating-ui/react";
+import { useCallback as F, Fragment as I } from "react";
+import { InteractiveTooltip as u } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { MenuItem as d } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as M } from "../../../types/menu-item.js";
+import { useSubMenuFloating as T, SubMenuPanel as S } from "../../../utils/sub-menu-floating.js";
+import { getItemRole as y, resolveItemMark as m } from "./item-mark.js";
+import { dropdownGap as x, submenuCaretIcon as H, dropdownSubMenuClassName as w } from "./constants.js";
+const q = ({
+  item: n,
+  onRootClose: a
 }) => {
   const {
-    isOpen: s,
-    refs: u,
+    isOpen: t,
+    nodeId: p,
+    refs: s,
     floatingStyles: b,
-    context: p,
-    getReferenceProps: c,
-    getFloatingProps: f
-  } = M(F, "menu", !!r.disabled), i = g(
-    (e) => (n) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: n }), e.selectable || o());
+    context: f,
+    getReferenceProps: g,
+    getFloatingProps: C
+  } = T(x, "menu", !!n.disabled), k = F(
+    (e) => (o) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: o }), e.selectable || a());
     },
-    [o]
+    [a]
+  ), l = /* @__PURE__ */ r(
+    d,
+    {
+      ref: s.setReference,
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": t,
+      "aria-disabled": !!n.disabled,
+      disabled: n.disabled,
+      icon: n.icon,
+      label: n.label,
+      trailing: H,
+      className: n.className,
+      ...g(),
+      children: n.renderItem?.(n)
+    }
   );
-  return /* @__PURE__ */ t(d, { children: [
-    /* @__PURE__ */ a(
-      l,
+  return /* @__PURE__ */ c(N, { id: p, children: [
+    n.interactiveTooltip ? /* @__PURE__ */ r(
+      u,
       {
-        ref: u.setReference,
-        role: "menuitem",
-        "aria-haspopup": "menu",
-        "aria-expanded": s,
-        "aria-disabled": !!r.disabled,
-        disabled: r.disabled,
-        icon: r.icon,
-        label: r.label,
-        trailing: S,
-        className: r.className,
-        ...c(),
-        children: r.renderItem?.(r)
+        asChild: !0,
+        placement: n.interactiveTooltip.placement,
+        content: n.interactiveTooltip.content,
+        contentClassName: n.interactiveTooltip.contentClassName,
+        children: l
       }
-    ),
-    s && /* @__PURE__ */ a(
-      C,
+    ) : l,
+    t && /* @__PURE__ */ r(
+      S,
       {
-        refs: u,
+        refs: s,
         floatingStyles: b,
-        context: p,
-        getFloatingProps: f,
+        context: f,
+        getFloatingProps: C,
         role: "menu",
-        surfaceClassName: y,
-        children: r.renderSubMenu ? r.renderSubMenu() : /* @__PURE__ */ t(d, { children: [
-          r.menuHeader && (typeof r.menuHeader == "function" ? r.menuHeader() : r.menuHeader),
-          r.children.map((e) => {
-            const n = I(e);
-            return /* @__PURE__ */ a(
-              l,
+        surfaceClassName: w,
+        children: n.renderSubMenu ? n.renderSubMenu() : /* @__PURE__ */ c(v, { children: [
+          n.menuHeader && (typeof n.menuHeader == "function" ? n.menuHeader() : n.menuHeader),
+          n.children.map((e) => {
+            const o = y(e), i = /* @__PURE__ */ r(
+              d,
               {
-                role: n,
-                "aria-checked": n === "menuitem" ? void 0 : !!e.checked,
-                "aria-current": m(e) === k.Highlight && e.checked ? !0 : void 0,
+                role: o,
+                "aria-checked": o === "menuitem" ? void 0 : !!e.checked,
+                "aria-current": m(e) === M.Highlight && e.checked ? !0 : void 0,
                 "aria-disabled": !!e.disabled,
                 disabled: e.disabled,
                 mark: m(e),
@@ -68,18 +79,27 @@ const R = ({
                 label: e.label,
                 className: e.className,
                 rightControl: e.rightControl,
-                onClick: i(e),
+                onClick: k(e),
                 children: e.renderItem?.(e)
-              },
-              e.key
+              }
             );
+            return /* @__PURE__ */ r(I, { children: e.interactiveTooltip ? /* @__PURE__ */ r(
+              u,
+              {
+                asChild: !0,
+                placement: e.interactiveTooltip.placement,
+                content: e.interactiveTooltip.content,
+                contentClassName: e.interactiveTooltip.contentClassName,
+                children: i
+              }
+            ) : i }, e.key);
           }),
-          r.menuFooter && (typeof r.menuFooter == "function" ? r.menuFooter() : r.menuFooter)
+          n.menuFooter && (typeof n.menuFooter == "function" ? n.menuFooter() : n.menuFooter)
         ] })
       }
     )
   ] });
 };
 export {
-  R as DropdownSubMenuItem
+  q as DropdownSubMenuItem
 };