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

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

@@ -1,73 +1,103 @@
-import { jsxs as p, Fragment as f, jsx as r } from "react/jsx-runtime";
-import "react";
-import { MenuItem as s } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as g } from "../../../types/menu-item.js";
-import { useSubMenuFloating as M, SubMenuPanel as S } from "../../../utils/sub-menu-floating.js";
-import { selectSubMenuGap as x, selectSubMenuCaretIcon as C, selectSubMenuClassName as v } from "./constants.js";
-const L = ({
-  opt: a,
-  selectedValues: l,
-  mark: o = g.Tint,
-  onSelect: t
+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 N } from "../../../types/menu-item.js";
+import { useSubMenuFloating as S, SubMenuPanel as x } from "../../../utils/sub-menu-floating.js";
+import { selectSubMenuGap as I, selectSubMenuCaretIcon as F, selectSubMenuClassName as P } from "./constants.js";
+const q = ({
+  opt: t,
+  selectedValues: a,
+  mark: m = N.Tint,
+  onSelect: d
 }) => {
   const {
     isOpen: i,
-    refs: n,
+    nodeId: u,
+    refs: l,
     floatingStyles: b,
-    context: u,
-    getReferenceProps: d,
-    getFloatingProps: m
-  } = M(x, "listbox", !!a.disabled), c = a.children?.some(
-    (e) => l.includes(e.value)
-  );
-  return /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ r(
-      s,
+    context: p,
+    getReferenceProps: f,
+    getFloatingProps: v
+  } = S(I, "listbox", !!t.disabled), g = t.children?.some(
+    (e) => a.includes(e.value)
+  ), 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
+      stays tinted, which is what the design shows for an open parent.
+    */
+    /* @__PURE__ */ n(
+      c,
       {
-        ref: n.setReference,
+        ref: l.setReference,
         role: "option",
         "aria-haspopup": "listbox",
         "aria-expanded": i,
-        "aria-selected": !!c,
-        "aria-disabled": !!a.disabled,
-        disabled: a.disabled,
+        "aria-selected": !!g,
+        "aria-disabled": !!t.disabled,
+        disabled: t.disabled,
         ellipsisLabel: !0,
-        icon: a.icon,
-        label: a.labelNode ?? a.label,
-        trailing: C,
-        ...d()
+        icon: t.icon,
+        label: t.labelNode ?? t.label,
+        trailing: F,
+        ...f()
+      }
+    )
+  );
+  return /* @__PURE__ */ C(T, { id: u, children: [
+    t.interactiveTooltip ? /* @__PURE__ */ n(
+      s,
+      {
+        asChild: !0,
+        placement: t.interactiveTooltip.placement,
+        content: t.interactiveTooltip.content,
+        contentClassName: t.interactiveTooltip.contentClassName,
+        children: o
       }
-    ),
-    i && /* @__PURE__ */ r(
-      S,
+    ) : o,
+    i && /* @__PURE__ */ n(
+      x,
       {
-        refs: n,
+        refs: l,
         floatingStyles: b,
-        context: u,
-        getFloatingProps: m,
+        context: p,
+        getFloatingProps: v,
         role: "listbox",
-        surfaceClassName: v,
-        children: a.children.map((e) => /* @__PURE__ */ r(
-          s,
-          {
-            role: "option",
-            "aria-selected": l.includes(e.value),
-            "aria-disabled": !!e.disabled,
-            disabled: e.disabled,
-            mark: o,
-            selected: l.includes(e.value),
-            ellipsisLabel: !0,
-            icon: e.icon,
-            label: e.labelNode ?? e.label,
-            rightControl: e.rightControl,
-            onClick: () => !e.disabled && t(e.value)
-          },
-          e.value
-        ))
+        surfaceClassName: P,
+        children: t.children.map((e) => {
+          const r = /* @__PURE__ */ n(
+            c,
+            {
+              role: "option",
+              "aria-selected": a.includes(e.value),
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              mark: m,
+              selected: a.includes(e.value),
+              ellipsisLabel: !0,
+              icon: e.icon,
+              label: e.labelNode ?? e.label,
+              rightControl: e.rightControl,
+              onClick: () => !e.disabled && d(e.value)
+            }
+          );
+          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: r
+            }
+          ) : r }, e.value);
+        })
       }
     )
   ] });
 };
 export {
-  L as SelectSubMenuItem
+  q as SelectSubMenuItem
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.40",
-  "generatedAt": "2026-09-09T10:20:21.750Z",
+  "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",
@@ -3390,6 +3390,82 @@
       "examples": [],
       "sourceFile": "components/New/Tooltip/TooltipTrigger.tsx"
     },
+    {
+      "name": "InteractiveTooltip",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A hover panel that, unlike , can hold its own interactive\ncontent.\naliases: HoverCard|InfoPopover\nDesign system 2.0\n\nOpens next to the trigger on hover or focus, the way a tooltip does, but\nstays open while the pointer moves into the panel so its content — links,\nbuttons, anything — can be hovered and clicked. It carries no `role`, since\nARIA's `tooltip` role forbids focusable content and this is meant to hold\nsome; a panel with meaningfully interactive content should still be\nreachable without a mouse (Tab from the trigger reaches it), but a purely\ndecorative one is fine to leave out of the tab order entirely.\n\nRenders nothing on a mobile screen, where there is no hover to reveal it —\nso, as with , a control must never depend on this panel alone\nto be understood or operated.",
+      "props": [
+        {
+          "name": "content",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The panel's content"
+        },
+        {
+          "name": "placement",
+          "type": "TooltipPlacement",
+          "required": false,
+          "defaultValue": "TooltipPlacement.Right",
+          "description": "Side of the trigger the panel is placed on"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The element that triggers the panel"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Use the child as the trigger instead of wrapping it in a `<span>`"
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppress the panel while keeping the trigger rendered"
+        },
+        {
+          "name": "initialOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the panel starts open (uncontrolled only)"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state; disables the hover and focus triggers"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false,
+          "description": "Callback fired when the open state should change"
+        },
+        {
+          "name": "triggerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the trigger element"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the panel"
+        }
+      ],
+      "examples": [
+        "<InteractiveTooltip\n  placement={TooltipPlacement.Right}\n  content={\n    <>\n      <p>Lets the model write and execute Python in an isolated sandbox.</p>\n      <Button variant={ButtonVariant.Primary} appearance={ButtonAppearance.Link}>\n        View details\n      </Button>\n    </>\n  }\n>\n  <MenuItem label=\"code-interpreter\" />\n</InteractiveTooltip>"
+      ],
+      "sourceFile": "components/New/InteractiveTooltip/InteractiveTooltip.tsx"
+    },
     {
       "name": "EllipsisTooltip",
       "category": "Components_2_0",
@@ -4261,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",
@@ -9622,6 +9698,10 @@
           "name": "rightControl?",
           "value": "ReactNode"
         },
+        {
+          "name": "interactiveTooltip?",
+          "value": "SelectOptionInteractiveTooltip"
+        },
         {
           "name": "children?",
           "value": "SelectOption[]"
@@ -9754,6 +9834,10 @@
         {
           "name": "subMenuHoverOptions?",
           "value": "DropdownSubMenuHoverOptions"
+        },
+        {
+          "name": "interactiveTooltip?",
+          "value": "DropdownItemInteractiveTooltip"
         }
       ],
       "sourceFile": "models/dropdown.ts"