@epam/ai-dial-ui-kit 0.14.0-dev.32 → 0.14.0-dev.34

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

@@ -1,90 +1,73 @@
-import { jsxs as l, Fragment as g, jsx as a } from "react/jsx-runtime";
+import { jsxs as p, Fragment as f, jsx as r } from "react/jsx-runtime";
 import "react";
-import { DialIcon as o } from "../../Icon/Icon.js";
-import { EllipsisTooltip as c } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { mergeClasses as d } from "../../../utils/merge-classes.js";
-import { useSubMenuFloating as C, SubMenuPanel as v } from "../../../utils/sub-menu-floating.js";
-import { selectSubMenuGap as M, selectSubMenuCaretIcon as w, selectOptionDisabledClassName as m, selectOptionBaseClassName as b, selectSubMenuClassName as I, selectOptionCheckIcon as O } from "./constants.js";
-const R = ({
-  opt: s,
-  selectedValues: n,
-  onSelect: u
+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
 }) => {
   const {
     isOpen: i,
-    refs: t,
-    floatingStyles: p,
-    context: f,
-    getReferenceProps: x,
-    getFloatingProps: N
-  } = C(M, "listbox", !!s.disabled), S = s.children?.some(
-    (e) => n.includes(e.value)
+    refs: n,
+    floatingStyles: b,
+    context: u,
+    getReferenceProps: d,
+    getFloatingProps: m
+  } = M(x, "listbox", !!a.disabled), c = a.children?.some(
+    (e) => l.includes(e.value)
   );
-  return /* @__PURE__ */ l(g, { children: [
-    /* @__PURE__ */ l(
-      "button",
+  return /* @__PURE__ */ p(f, { children: [
+    /* @__PURE__ */ r(
+      s,
       {
-        ref: t.setReference,
-        type: "button",
+        ref: n.setReference,
         role: "option",
         "aria-haspopup": "listbox",
         "aria-expanded": i,
-        "aria-selected": !!S,
-        "aria-disabled": !!s.disabled,
-        disabled: s.disabled,
-        className: d(
-          b,
-          s.disabled && m
-        ),
-        ...x(),
-        children: [
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
-            s.icon && /* @__PURE__ */ a(o, { icon: s.icon }),
-            /* @__PURE__ */ a(c, { text: s.labelNode ?? s.label })
-          ] }),
-          /* @__PURE__ */ a("span", { className: "shrink-0", children: w })
-        ]
+        "aria-selected": !!c,
+        "aria-disabled": !!a.disabled,
+        disabled: a.disabled,
+        ellipsisLabel: !0,
+        icon: a.icon,
+        label: a.labelNode ?? a.label,
+        trailing: C,
+        ...d()
       }
     ),
-    i && /* @__PURE__ */ a(
-      v,
+    i && /* @__PURE__ */ r(
+      S,
       {
-        refs: t,
-        floatingStyles: p,
-        context: f,
-        getFloatingProps: N,
+        refs: n,
+        floatingStyles: b,
+        context: u,
+        getFloatingProps: m,
         role: "listbox",
-        surfaceClassName: I,
-        children: s.children.map((e) => {
-          const r = n.includes(e.value);
-          return /* @__PURE__ */ l(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": r,
-              "aria-disabled": !!e.disabled,
-              disabled: e.disabled,
-              className: d(
-                b,
-                e.disabled && m
-              ),
-              onClick: () => !e.disabled && u(e.value),
-              children: [
-                /* @__PURE__ */ l("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
-                  e.icon && /* @__PURE__ */ a(o, { icon: e.icon }),
-                  /* @__PURE__ */ a(c, { text: e.labelNode ?? e.label })
-                ] }),
-                r && O
-              ]
-            },
-            e.value
-          );
-        })
+        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
+        ))
       }
     )
   ] });
 };
 export {
-  R as SelectSubMenuItem
+  L as SelectSubMenuItem
 };

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

@@ -1,57 +1,42 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IconSearch as a, IconX as c, IconClipboardX as r, IconCheck as n, IconChevronRight as l } from "@tabler/icons-react";
-import { overlayItemDisabledClassName as i, overlayItemSelectedClassName as m, overlayItemClassName as d, overlayGap as C, overlaySubMenuClassName as I } from "../constants/overlay.js";
+import { IconSearch as o, IconX as a, IconClipboardX as r, IconChevronRight as c } from "@tabler/icons-react";
+import { overlayItemClassName as l, overlayGap as n, overlaySubMenuClassName as i } from "../constants/overlay.js";
 import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
-import { mergeClasses as o } from "../../../utils/merge-classes.js";
-const M = o("w-full flex flex-col"), y = o(
-  d,
-  // The row ends with a check icon, so label and mark sit at opposite edges.
-  "justify-between"
-), b = m, k = "!max-w-[var(--reference-width)]", v = i, O = 352, x = C, w = I, z = /* @__PURE__ */ e(
-  l,
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+const S = m("w-full flex flex-col"), f = l, N = "!max-w-[var(--reference-width)]", x = "max-h-[344px] overflow-y-auto", v = n, y = i, M = /* @__PURE__ */ e(
+  c,
   {
     size: s.SM,
     stroke: t,
     "aria-hidden": "true"
   }
-), D = "text-secondary transition-transform", _ = 8, L = /* @__PURE__ */ e(
-  a,
+), O = "text-secondary transition-transform", b = 8, _ = /* @__PURE__ */ e(
+  o,
   {
     size: s.MD,
     stroke: t,
     "aria-hidden": "true"
   }
-), g = /* @__PURE__ */ e(
-  c,
+), k = /* @__PURE__ */ e(
+  a,
   {
     size: s.SM,
     stroke: t,
     "aria-hidden": "true"
   }
-), E = /* @__PURE__ */ e(
-  n,
-  {
-    size: s.SM,
-    stroke: t,
-    className: "shrink-0",
-    "aria-hidden": !0
-  }
-), G = /* @__PURE__ */ e(r, { size: s.LG, stroke: 0.5, "aria-hidden": "true" });
+), w = /* @__PURE__ */ e(r, { size: s.LG, stroke: 0.5, "aria-hidden": "true" });
 export {
-  O as dropdownMenuMaxHeight,
-  g as selectCloseIcon,
-  G as selectEmptyStateIcon,
-  D as selectFieldIconClassName,
-  k as selectListWidthClassName,
-  y as selectOptionBaseClassName,
-  E as selectOptionCheckIcon,
-  v as selectOptionDisabledClassName,
-  b as selectOptionSelectedClassName,
-  M as selectOverlayBaseClassName,
-  L as selectSearchIcon,
-  _ as selectSearchThreshold,
-  z as selectSubMenuCaretIcon,
-  w as selectSubMenuClassName,
-  x as selectSubMenuGap
+  k as selectCloseIcon,
+  w as selectEmptyStateIcon,
+  O as selectFieldIconClassName,
+  N as selectListWidthClassName,
+  f as selectOptionBaseClassName,
+  x as selectOptionsScrollClassName,
+  S as selectOverlayBaseClassName,
+  _ as selectSearchIcon,
+  b as selectSearchThreshold,
+  M as selectSubMenuCaretIcon,
+  y as selectSubMenuClassName,
+  v as selectSubMenuGap
 };

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

@@ -1,8 +1,8 @@
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const a = "rounded-xl bg-layer-raised p-1 shadow-md", r = e(
+const a = "rounded-xl bg-layer-raised p-1 shadow-md", l = e(
   a,
   "w-max"
-), l = e(
+), r = e(
   "flex w-full cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
   "dial-small-text text-primary truncate",
   // Hover sits one step up the accent-alpha ramp from the selected tint, so a
@@ -10,14 +10,18 @@ const a = "rounded-xl bg-layer-raised p-1 shadow-md", r = e(
   "hover:bg-control-accent-alpha-hover",
   "focus-visible:outline focus-visible:outline-focus"
 ), t = "bg-control-accent-alpha", s = e(
+  t,
+  "text-accent"
+), n = e(
   "cursor-not-allowed text-control-disable-primary",
   "bg-transparent hover:bg-transparent"
-), n = 4;
+), c = 4;
 export {
-  n as overlayGap,
-  l as overlayItemClassName,
-  s as overlayItemDisabledClassName,
+  c as overlayGap,
+  r as overlayItemClassName,
+  n as overlayItemDisabledClassName,
+  s as overlayItemHighlightClassName,
   t as overlayItemSelectedClassName,
-  r as overlaySubMenuClassName,
+  l as overlaySubMenuClassName,
   a as overlaySurfaceClassName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.32",
-  "generatedAt": "2026-09-07T11:17:54.374Z",
+  "version": "0.14.0-dev.34",
+  "generatedAt": "2026-09-07T18:35:40.153Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1006,7 +1006,7 @@
       "name": "Select",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and it exposes the control as a `combobox`\nwhose popup is the option list.\n\nSingle mode:\n- The field shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border, a tinted background\n  and a trailing check icon.\n\nMultiple mode uses checkboxes (including Select All with indeterminate state) and\nrenders the selection as removable tags inside the field.\n\nThe field itself is never typeable: `searchable` puts a search field in the overlay\nheader that filters the options.",
+      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 2.0\n\nA list of **values to choose from**, opened from the field. It is not the\ncontrol for showing actions or navigation options — that is .\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and it exposes the control as a `combobox`\nwhose popup is the option list.\n\nSingle mode:\n- The field shows the selected option's leading icon + label.\n- In the list, the selected option is tinted; `selectedOptionMark` swaps that\n  for a trailing check or the navigation highlight.\n\nMultiple mode uses checkboxes (including Select All with indeterminate state) and\nrenders the selection as removable tags inside the field.\n\nThe field itself is never typeable: `searchable` puts a search field in the overlay\nheader that filters the options.",
       "props": [
         {
           "name": "options",
@@ -1123,6 +1123,13 @@
           "defaultValue": "'Select all'",
           "description": "Label for the \"Select All\" checkbox."
         },
+        {
+          "name": "selectedOptionMark",
+          "type": "| MenuItemMark.Tint\n    | MenuItemMark.Check\n    | MenuItemMark.Highlight",
+          "required": false,
+          "defaultValue": "MenuItemMark.Tint",
+          "description": "How the chosen option is marked in single mode."
+        },
         {
           "name": "emptyStateTitle",
           "type": "string",
@@ -1869,7 +1876,7 @@
       "name": "Dropdown",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.",
+      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nA menu of **actions or navigation options**, opened from a trigger. It is not\nthe control for picking a value out of a list — a country, a sort order, a\nfilter — which is what  is for.\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.\n\nA chosen row is marked through the item's `mark`: the design draws a menu's\nsingle-select and multiselect the same way, with a check at the trailing edge\n(`MenuItemMark.Check`). Pair it with `selectable` for a multiselect row, which\nkeeps the menu open across toggles. `MenuItemMark.Highlight` is the current\nitem of a navigation menu.",
       "props": [
         {
           "name": "children",
@@ -2052,6 +2059,93 @@
       ],
       "sourceFile": "components/New/ThemeScope/ThemeScope.tsx"
     },
+    {
+      "name": "MenuItem",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "One row of a floating overlay — a dropdown menu item or a select option.\nDesign system 2.0\n\nOwns the Menu-item states the design defines, so the dropdown and the select\ncannot drift apart: rest, hover, focus and disable, plus the three ways a\nchosen row is marked (`MenuItemMark`). The row itself is the control — the\ncheckbox box and the check icon are decorative, since the state already rides\non the `aria-checked`/`aria-selected` the caller sets alongside `role`.",
+      "props": [
+        {
+          "name": "ref",
+          "type": "Ref<HTMLButtonElement>",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The row's text"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label"
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary text at the row's trailing edge"
+        },
+        {
+          "name": "mark",
+          "type": "MenuItemMark",
+          "required": false,
+          "defaultValue": "MenuItemMark.None",
+          "description": "How a chosen row is marked"
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether this row is the chosen one"
+        },
+        {
+          "name": "danger",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Paints the row in the error colour"
+        },
+        {
+          "name": "trailing",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Node pinned to the trailing edge, e.g. a submenu caret"
+        },
+        {
+          "name": "rightControl",
+          "type": "ReactNode",
+          "required": false,
+          "description": "A control of its own at the trailing edge, rendered beside the row"
+        },
+        {
+          "name": "ellipsisLabel",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Truncate the label with a tooltip once clipped"
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the label element"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Replaces the icon + label content"
+        }
+      ],
+      "examples": [
+        "<MenuItem role=\"menuitem\" label=\"Rename\" icon={<IconPencil />} />\n\n// Single choice, marked with a trailing check\n<MenuItem role=\"option\" aria-selected label=\"English\" mark={MenuItemMark.Check} selected />\n\n// Current item of a navigation menu\n<MenuItem role=\"menuitem\" aria-current label=\"Settings\" mark={MenuItemMark.Highlight} selected />"
+      ],
+      "sourceFile": "components/New/MenuItem/MenuItem.tsx"
+    },
     {
       "name": "CaptionText",
       "category": "Components_2_0",
@@ -9038,6 +9132,39 @@
       ],
       "sourceFile": "types/dropdown.ts"
     },
+    {
+      "name": "MenuItemMark",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "None",
+          "value": "'none'",
+          "comment": "Nothing marks the row — it is only ever unselected."
+        },
+        {
+          "name": "Check",
+          "value": "'check'",
+          "comment": "A trailing check on the chosen row; the row keeps its plain background."
+        },
+        {
+          "name": "Tint",
+          "value": "'tint'",
+          "comment": "The chosen row is tinted, with no glyph — the select list's own mark."
+        },
+        {
+          "name": "Checkbox",
+          "value": "'checkbox'",
+          "comment": "A leading checkbox box, tinted while checked, for multiselect rows."
+        },
+        {
+          "name": "Highlight",
+          "value": "'highlight'",
+          "comment": "Accent label on a tinted row: the current item in a navigation menu."
+        }
+      ],
+      "sourceFile": "types/menu-item.ts",
+      "description": "How a chosen row inside an overlay (dropdown menu, select list) is marked.\n\nThe design marks a chosen row differently depending on what the overlay is.\nA **menu** puts a check at the trailing edge, single- and multi-select alike,\nand gives the current item of a navigation menu an accent label. A **select\nlist** tints the chosen row instead, with a checkbox in front of it when the\nlist is a multiselect."
+    },
     {
       "name": "ElementSize",
       "kind": "enum",
@@ -9491,6 +9618,10 @@
           "name": "icon?",
           "value": "ReactNode"
         },
+        {
+          "name": "rightControl?",
+          "value": "ReactNode"
+        },
         {
           "name": "children?",
           "value": "SelectOption[]"
@@ -9576,10 +9707,18 @@
           "name": "selectable?",
           "value": "boolean"
         },
+        {
+          "name": "mark?",
+          "value": "MenuItemMark"
+        },
         {
           "name": "checked?",
           "value": "boolean"
         },
+        {
+          "name": "rightControl?",
+          "value": "ReactNode"
+        },
         {
           "name": "type?",
           "value": "DropdownItemType"