@epam/ai-dial-ui-kit 0.15.0-dev.7 → 0.15.0

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

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

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

@@ -1,12 +1,12 @@
-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 { jsx as r, jsxs as u, Fragment as v } from "react/jsx-runtime";
+import { FloatingNode as M } from "@floating-ui/react";
+import { useCallback as N, Fragment as F } from "react";
+import { InteractiveTooltip as c } 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 { MenuItemMark as I } from "../../../types/menu-item.js";
+import { useSubMenuFloating as S, SubMenuPanel as T } 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";
+import { dropdownGap as w, submenuCaretIcon as x, dropdownSubMenuClassName as H, dropdownSubMenuListClassName as P } from "./constants.js";
 const q = ({
   item: n,
   onRootClose: a
@@ -19,7 +19,7 @@ const q = ({
     context: f,
     getReferenceProps: g,
     getFloatingProps: C
-  } = T(x, "menu", !!n.disabled), k = F(
+  } = S(w, "menu", !!n.disabled), k = N(
     (e) => (o) => {
       e.disabled || (e.onClick?.({ key: e.key, domEvent: o }), e.selectable || a());
     },
@@ -35,15 +35,15 @@ const q = ({
       disabled: n.disabled,
       icon: n.icon,
       label: n.label,
-      trailing: H,
+      trailing: x,
       className: n.className,
       ...g(),
       children: n.renderItem?.(n)
     }
   );
-  return /* @__PURE__ */ c(N, { id: p, children: [
+  return /* @__PURE__ */ u(M, { id: p, children: [
     n.interactiveTooltip ? /* @__PURE__ */ r(
-      u,
+      c,
       {
         asChild: !0,
         placement: n.interactiveTooltip.placement,
@@ -53,15 +53,15 @@ const q = ({
       }
     ) : l,
     t && /* @__PURE__ */ r(
-      S,
+      T,
       {
         refs: s,
         floatingStyles: b,
         context: f,
         getFloatingProps: C,
         role: "menu",
-        surfaceClassName: w,
-        children: n.renderSubMenu ? n.renderSubMenu() : /* @__PURE__ */ c(v, { children: [
+        surfaceClassName: n.renderSubMenu ? H : P,
+        children: n.renderSubMenu ? n.renderSubMenu() : /* @__PURE__ */ u(v, { children: [
           n.menuHeader && (typeof n.menuHeader == "function" ? n.menuHeader() : n.menuHeader),
           n.children.map((e) => {
             const o = y(e), i = /* @__PURE__ */ r(
@@ -69,7 +69,7 @@ const q = ({
               {
                 role: o,
                 "aria-checked": o === "menuitem" ? void 0 : !!e.checked,
-                "aria-current": m(e) === M.Highlight && e.checked ? !0 : void 0,
+                "aria-current": m(e) === I.Highlight && e.checked ? !0 : void 0,
                 "aria-disabled": !!e.disabled,
                 disabled: e.disabled,
                 mark: m(e),
@@ -83,8 +83,8 @@ const q = ({
                 children: e.renderItem?.(e)
               }
             );
-            return /* @__PURE__ */ r(I, { children: e.interactiveTooltip ? /* @__PURE__ */ r(
-              u,
+            return /* @__PURE__ */ r(F, { children: e.interactiveTooltip ? /* @__PURE__ */ r(
+              c,
               {
                 asChild: !0,
                 placement: e.interactiveTooltip.placement,

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

@@ -1,28 +1,33 @@
-import { jsx as r } from "react/jsx-runtime";
-import { IconChevronRight as e } from "@tabler/icons-react";
-import { overlayGap as s, overlaySubMenuClassName as a, overlaySurfaceClassName as t } from "../constants/overlay.js";
-import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { jsx as e } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { overlayGap as r, overlaySubMenuClassName as a, overlaySubMenuListClassName as t, overlayListClassName as n, overlaySurfaceClassName as m } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as d } from "../../../constants/icon.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
-const C = o(
+const b = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
 ), f = o(
-  "z-[53] focus-visible:outline-none",
-  t
-), b = a, I = "my-1 border-t border-tertiary", N = s, v = /* @__PURE__ */ r(
-  e,
+  "z-floating focus-visible:outline-none",
+  m
+), I = a, v = t, y = o(
+  n,
+  "py-1"
+), S = "my-1 border-t border-tertiary", w = r, L = /* @__PURE__ */ e(
+  s,
   {
-    size: m.SM,
-    stroke: n,
+    size: d.SM,
+    stroke: i,
     "aria-hidden": "true"
   }
 );
 export {
-  C as dropdownBaseClassName,
-  I as dropdownDividerClassName,
-  N as dropdownGap,
+  b as dropdownBaseClassName,
+  S as dropdownDividerClassName,
+  w as dropdownGap,
+  y as dropdownItemListClassName,
   f as dropdownListBaseClassName,
-  b as dropdownSubMenuClassName,
-  v as submenuCaretIcon
+  I as dropdownSubMenuClassName,
+  v as dropdownSubMenuListClassName,
+  L as submenuCaretIcon
 };

package/dist/components/New/EllipsisTooltip/EllipsisTooltip.js

@@ -30,9 +30,9 @@ const _ = ({
             ref: u,
             "aria-label": t && o ? o : void 0,
             className: d(
-              j.ellipsisTooltip,
               "block min-w-0 max-w-full flex-1 truncate text-start",
-              m
+              m,
+              j.ellipsisTooltip
             ),
             children: r
           }