@epam/ai-dial-ui-kit 0.14.0-dev.46 → 0.14.0-dev.49

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

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

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -1,65 +1,67 @@
-import { jsx as s, jsxs as j, Fragment as w } from "react/jsx-runtime";
-import { useFloatingNodeId as D, useFloating as H, autoUpdate as U, offset as G, flip as Y, shift as k, useHover as q, safePolygon as z, useFocus as B, useDismiss as J, useInteractions as K, useMergeRefs as m, FloatingPortal as Q, FloatingFocusManager as W } from "@floating-ui/react";
-import { useState as X, useRef as Z, useMemo as d, isValidElement as $, cloneElement as ee } from "react";
-import { useThemeScope as oe } from "../ThemeScope/ThemeScope.js";
+import { jsx as n, jsxs as w, Fragment as D } from "react/jsx-runtime";
+import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as Y, flip as k, shift as q, useHover as z, safePolygon as B, useFocus as J, useDismiss as K, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
+import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
+import { useThemeScope as se } from "../ThemeScope/ThemeScope.js";
 import { useIsMobileScreen as te } from "../../../hooks/use-is-mobile-screen.js";
-import { TooltipPlacement as se } from "../../../types/tooltip.js";
-import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { INTERACTIVE_TOOLTIP_GAP as ne, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as le, interactiveTooltipClassName as ae } from "./constants.js";
-const ge = ({
+import { TooltipPlacement as ne } from "../../../types/tooltip.js";
+import { mergeClasses as g } from "../../../utils/merge-classes.js";
+import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
+const Re = ({
   content: a,
-  placement: g = se.Right,
+  placement: R = ne.Right,
   children: e,
-  asChild: R = !1,
-  hideTooltip: F = !1,
-  initialOpen: T = !1,
-  open: n,
-  onOpenChange: h,
+  asChild: F = !1,
+  hideTooltip: T = !1,
+  initialOpen: h = !1,
+  open: s,
+  onOpenChange: I,
   triggerClassName: r,
-  contentClassName: I
+  contentClassName: E
 }) => {
-  const E = te(), P = oe(), [O, C] = X(T), i = n ?? O, N = h ?? C, v = D(), { refs: t, floatingStyles: M, context: o } = H({
-    nodeId: v,
-    placement: g,
+  const P = te(), C = se(), [N, O] = Z(h), i = s ?? N, v = (m) => {
+    I?.(m), s == null && O(m);
+  }, M = H(), { refs: t, floatingStyles: _, context: o } = U({
+    nodeId: M,
+    placement: R,
     open: i,
-    onOpenChange: N,
-    whileElementsMounted: U,
+    onOpenChange: v,
+    whileElementsMounted: G,
     middleware: [
-      G(ne),
+      Y(le),
       /* No `fallbackAxisSideDirection`: a panel placed to the right should
        flip to the left when it does not fit, not drop to the perpendicular
        top/bottom axis, which reads as the panel landing in the wrong place.*/
-      Y({ padding: 5 }),
-      k({ padding: 5 })
+      k({ padding: 5 }),
+      q({ padding: 5 })
     ]
-  }), _ = q(o, {
-    enabled: n == null,
+  }), S = z(o, {
+    enabled: s == null,
     /* Lets the pointer cross the gap between the trigger and the panel
        without closing it, so it can actually be reached and used. */
-    handleClose: z(),
-    delay: { open: le, close: 0 }
-  }), x = B(o, { enabled: n == null }), S = J(o), { getReferenceProps: c, getFloatingProps: V } = K([
-    _,
-    x,
-    S
-  ]), b = Z(null), y = m(
-    d(() => [t.setFloating, b], [t.setFloating])
-  ), f = R && $(e), l = f ? e.props?.ref : null, p = m(
+    handleClose: B(),
+    delay: { open: ae, close: 0 }
+  }), V = J(o, { enabled: s == null }), b = K(o), { getReferenceProps: c, getFloatingProps: x } = Q([
+    S,
+    V,
+    b
+  ]), y = $(null), A = u(
+    d(() => [t.setFloating, y], [t.setFloating])
+  ), f = F && ee(e), l = f ? e.props?.ref : null, p = u(
     d(
       () => [t.setReference, ...l ? [l] : []],
       [t.setReference, l]
     )
-  ), A = !F && !E && !!a, L = f ? ee(
+  ), L = !T && !P && !!a, j = f ? oe(
     e,
     c({
       ...e.props,
       ref: p,
-      className: u(
+      className: g(
         e.props.className,
         r
       ) || void 0
     })
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ n(
     "span",
     {
       ref: p,
@@ -68,27 +70,27 @@ const ge = ({
       children: e
     }
   );
-  return /* @__PURE__ */ j(w, { children: [
-    L,
-    i && A && /* @__PURE__ */ s(Q, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ s(
-      W,
+  return /* @__PURE__ */ w(D, { children: [
+    j,
+    i && L && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
+      X,
       {
         context: o,
         modal: !1,
         initialFocus: -1,
         returnFocus: !1,
         order: ["reference", "content"],
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ n(
           "div",
           {
-            ref: y,
+            ref: A,
             "data-placement": o.placement,
-            style: M,
-            ...V(),
-            className: u(
-              ae,
-              P,
-              I
+            style: _,
+            ...x(),
+            className: g(
+              re,
+              C,
+              E
             ),
             children: a
           }
@@ -98,5 +100,5 @@ const ge = ({
   ] });
 };
 export {
-  ge as InteractiveTooltip
+  Re as InteractiveTooltip
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.46",
-  "generatedAt": "2026-09-10T12:23:10.770Z",
+  "version": "0.14.0-dev.49",
+  "generatedAt": "2026-09-10T20:07:22.493Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -2028,6 +2028,12 @@
           "type": "number | null",
           "required": false,
           "description": "Maximum height of the dropdown menu; when omitted, no limit is applied"
+        },
+        {
+          "name": "initialFocus",
+          "type": "0 | -1 | RefObject<HTMLElement | null>",
+          "required": false,
+          "description": "Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior"
         }
       ],
       "examples": [