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

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

@@ -1,59 +1,60 @@
-import { jsx as s, jsxs as L, Fragment as j } from "react/jsx-runtime";
-import { useFloating as w, autoUpdate as D, offset as H, flip as U, shift as G, useHover as Y, safePolygon as k, useFocus as q, useDismiss as z, useInteractions as B, useMergeRefs as m, FloatingPortal as J, FloatingFocusManager as K } from "@floating-ui/react";
-import { useState as Q, useRef as W, useMemo as u, isValidElement as X, cloneElement as Z } from "react";
-import { useThemeScope as $ } from "../ThemeScope/ThemeScope.js";
-import { useIsMobileScreen as ee } from "../../../hooks/use-is-mobile-screen.js";
-import { TooltipPlacement as oe } from "../../../types/tooltip.js";
-import { mergeClasses as d } from "../../../utils/merge-classes.js";
-import { INTERACTIVE_TOOLTIP_GAP as te, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as se, interactiveTooltipClassName as ne } from "./constants.js";
-const ue = ({
+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 { 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 = ({
   content: a,
-  placement: g = oe.Right,
+  placement: g = se.Right,
   children: e,
   asChild: R = !1,
-  hideTooltip: T = !1,
-  initialOpen: h = !1,
+  hideTooltip: F = !1,
+  initialOpen: T = !1,
   open: n,
-  onOpenChange: F,
+  onOpenChange: h,
   triggerClassName: r,
-  contentClassName: E
+  contentClassName: I
 }) => {
-  const P = ee(), I = $(), [O, C] = Q(h), i = n ?? O, v = F ?? C, { refs: t, floatingStyles: N, context: o } = w({
+  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,
     open: i,
-    onOpenChange: v,
-    whileElementsMounted: D,
+    onOpenChange: N,
+    whileElementsMounted: U,
     middleware: [
-      H(te),
+      G(ne),
       /* 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.*/
-      U({ padding: 5 }),
-      G({ padding: 5 })
+      Y({ padding: 5 }),
+      k({ padding: 5 })
     ]
-  }), M = Y(o, {
+  }), _ = q(o, {
     enabled: n == 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: k(),
-    delay: { open: se, close: 0 }
-  }), _ = q(o, { enabled: n == null }), x = z(o), { getReferenceProps: c, getFloatingProps: S } = B([
-    M,
+    handleClose: z(),
+    delay: { open: le, close: 0 }
+  }), x = B(o, { enabled: n == null }), S = J(o), { getReferenceProps: c, getFloatingProps: V } = K([
     _,
-    x
-  ]), V = W(null), b = m(
-    u(() => [t.setFloating, V], [t.setFloating])
-  ), f = R && X(e), l = f ? e.props?.ref : null, p = m(
-    u(
+    x,
+    S
+  ]), b = Z(null), y = m(
+    d(() => [t.setFloating, b], [t.setFloating])
+  ), f = R && $(e), l = f ? e.props?.ref : null, p = m(
+    d(
       () => [t.setReference, ...l ? [l] : []],
       [t.setReference, l]
     )
-  ), y = !T && !P && !!a, A = f ? Z(
+  ), A = !F && !E && !!a, L = f ? ee(
     e,
     c({
       ...e.props,
       ref: p,
-      className: d(
+      className: u(
         e.props.className,
         r
       ) || void 0
@@ -67,10 +68,10 @@ const ue = ({
       children: e
     }
   );
-  return /* @__PURE__ */ L(j, { children: [
-    A,
-    i && y && /* @__PURE__ */ s(J, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ s(
-      K,
+  return /* @__PURE__ */ j(w, { children: [
+    L,
+    i && A && /* @__PURE__ */ s(Q, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ s(
+      W,
       {
         context: o,
         modal: !1,
@@ -80,14 +81,14 @@ const ue = ({
         children: /* @__PURE__ */ s(
           "div",
           {
-            ref: b,
+            ref: y,
             "data-placement": o.placement,
-            style: N,
-            ...S(),
-            className: d(
-              ne,
-              I,
-              E
+            style: M,
+            ...V(),
+            className: u(
+              ae,
+              P,
+              I
             ),
             children: a
           }
@@ -97,5 +98,5 @@ const ue = ({
   ] });
 };
 export {
-  ue as InteractiveTooltip
+  ge as InteractiveTooltip
 };

package/dist/components/New/Select/SelectSubMenuItem.js

@@ -1,26 +1,28 @@
-import { jsx as n, jsxs as g, Fragment as C } from "react/jsx-runtime";
-import { Fragment as T } from "react";
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { FloatingNode as T } from "@floating-ui/react";
+import { Fragment as M } from "react";
 import { InteractiveTooltip as s } from "../InteractiveTooltip/InteractiveTooltip.js";
 import { MenuItem as c } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as M } from "../../../types/menu-item.js";
+import { MenuItemMark as N } from "../../../types/menu-item.js";
 import { useSubMenuFloating as S, SubMenuPanel as x } from "../../../utils/sub-menu-floating.js";
-import { selectSubMenuGap as N, selectSubMenuCaretIcon as F, selectSubMenuClassName as I } from "./constants.js";
-const G = ({
+import { selectSubMenuGap as I, selectSubMenuCaretIcon as F, selectSubMenuClassName as P } from "./constants.js";
+const q = ({
   opt: t,
   selectedValues: a,
-  mark: m = M.Tint,
-  onSelect: u
+  mark: m = N.Tint,
+  onSelect: d
 }) => {
   const {
     isOpen: i,
+    nodeId: u,
     refs: l,
     floatingStyles: b,
-    context: d,
-    getReferenceProps: p,
+    context: p,
+    getReferenceProps: f,
     getFloatingProps: v
-  } = S(N, "listbox", !!t.disabled), f = t.children?.some(
+  } = S(I, "listbox", !!t.disabled), g = t.children?.some(
     (e) => a.includes(e.value)
-  ), r = (
+  ), o = (
     /*
       The trigger carries no mark of its own: the check belongs to the child
       that is actually chosen, one panel over. While its panel is open the row
@@ -33,18 +35,18 @@ const G = ({
         role: "option",
         "aria-haspopup": "listbox",
         "aria-expanded": i,
-        "aria-selected": !!f,
+        "aria-selected": !!g,
         "aria-disabled": !!t.disabled,
         disabled: t.disabled,
         ellipsisLabel: !0,
         icon: t.icon,
         label: t.labelNode ?? t.label,
         trailing: F,
-        ...p()
+        ...f()
       }
     )
   );
-  return /* @__PURE__ */ g(C, { children: [
+  return /* @__PURE__ */ C(T, { id: u, children: [
     t.interactiveTooltip ? /* @__PURE__ */ n(
       s,
       {
@@ -52,20 +54,20 @@ const G = ({
         placement: t.interactiveTooltip.placement,
         content: t.interactiveTooltip.content,
         contentClassName: t.interactiveTooltip.contentClassName,
-        children: r
+        children: o
       }
-    ) : r,
+    ) : o,
     i && /* @__PURE__ */ n(
       x,
       {
         refs: l,
         floatingStyles: b,
-        context: d,
+        context: p,
         getFloatingProps: v,
         role: "listbox",
-        surfaceClassName: I,
+        surfaceClassName: P,
         children: t.children.map((e) => {
-          const o = /* @__PURE__ */ n(
+          const r = /* @__PURE__ */ n(
             c,
             {
               role: "option",
@@ -78,24 +80,24 @@ const G = ({
               icon: e.icon,
               label: e.labelNode ?? e.label,
               rightControl: e.rightControl,
-              onClick: () => !e.disabled && u(e.value)
+              onClick: () => !e.disabled && d(e.value)
             }
           );
-          return /* @__PURE__ */ n(T, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
+          return /* @__PURE__ */ n(M, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
             s,
             {
               asChild: !0,
               placement: e.interactiveTooltip.placement,
               content: e.interactiveTooltip.content,
               contentClassName: e.interactiveTooltip.contentClassName,
-              children: o
+              children: r
             }
-          ) : o }, e.value);
+          ) : r }, e.value);
         })
       }
     )
   ] });
 };
 export {
-  G as SelectSubMenuItem
+  q as SelectSubMenuItem
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.41",
-  "generatedAt": "2026-09-09T12:45:15.102Z",
+  "version": "0.14.0-dev.44",
+  "generatedAt": "2026-09-10T09:28:48.353Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -4337,7 +4337,7 @@
           "name": "barClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for each bar's outer container."
+          "description": "Additional CSS classes for each bar's outer container. In compare mode they apply to the shared pair container (one continuous block); the entry is a Tailwind `group` — use `group-hover:` for pair hover; when `onBarClick` is set that container also gets a default accent fill on hover and `:focus-visible`."
         },
         {
           "name": "barDescriptions",
@@ -9834,6 +9834,10 @@
         {
           "name": "subMenuHoverOptions?",
           "value": "DropdownSubMenuHoverOptions"
+        },
+        {
+          "name": "interactiveTooltip?",
+          "value": "DropdownItemInteractiveTooltip"
         }
       ],
       "sourceFile": "models/dropdown.ts"