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

package/dist/CHANGELOG.md

@@ -19,6 +19,8 @@ Versions match the git tags on the `development` branch.
 
 - **`Dropdown` (2.0) — `listStyle`** — the floating panel renders in a portal at the end of `<body>`, so CSS custom properties a caller sets on its own wrapper never reach the panel's rows or `menuHeader`, and `listClassName` can carry a class but not a runtime value. A wrapping component that themes its menu through `var(--…)` — a composer's model picker colouring its selected row and check — had no way to deliver the values. `listStyle` is an inline style on that panel. Positioning stays the dropdown's own: `floatingStyles` is applied on top, so a caller's `position`, `top` or `transform` cannot unanchor it. Additive; nothing renders differently without it. Requested in [ai-dial-chat#8943](https://github.com/epam/ai-dial-chat/issues/8943).
 
+- **`ButtonDropdown` (2.0) — `dropdownProps`**: until now `ButtonDropdown` built its menu `Dropdown` with fixed options, so a caller could neither class the menu panel nor stop the panel from taking the button's width. A short label like "Add" produced a menu as narrow as the button. `dropdownProps` forwards `listClassName` and `matchReferenceWidth` to that `Dropdown`. With `matchReferenceWidth: false` and a `min-w-*` class, the menu gets a width of its own. Additive; a `ButtonDropdown` without it renders exactly as before.
+
 - **`Notification` (2.0) — `action` slot** — a notification had nowhere to put a control of its own: a "Try again" or "Reload" button had to be packed into `message`, where it sat inside the text column, wrapped with the copy and could not line up against a title. `action` takes any node and renders it at the inline end of the notification, after the text and before the close button, vertically centred and never shrunk by a long message. It sits inside the live region, so the control is reachable right where the error is announced; the caller supplies its visible label and handler. The slot is additive — a notification without `action` renders exactly as before. Requested in [ai-dial-chat#8979](https://github.com/epam/ai-dial-chat/issues/8979), where a failed chat response offers "Try again" inside its error banner.
 
 - **`FilterChips` (2.0)** — a row of filter chips that picks one value out of a few, the chip-shaped sibling of `Tabs` and `SegmentedControl`. It draws `TagAppearance.Selectable` tags: no fill until selected, a semibold label once selected. Each chip is a toggle button carrying its state on `aria-pressed` inside a named `role="group"`, so every chip is its own tab stop and arrowing across the row never changes the filter by accident — unlike a `radiogroup`. `stretch` grows the chips to share the row width equally for a filter row spanning a side panel; without it they hug their labels. There is no disabled chip: an option the user must not pick is left out of `items`. Labels carry no English defaults, so the caller translates them. The row carries the public class `dial-kit-filter-chips` (`DIAL_KIT_CLASS.filterChips`); its chips are `Tag` pills, so they carry `dial-kit-tag`.

package/dist/JsonEditor-CpSpVa0v.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-Bc9xzKuR.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-FVzYMdkC.cjs → MarkdownEditor-CPzMv3lE.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-BEsZqouS.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-Cy9WobJf.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;

package/dist/{MarkdownEditor-C7BONfsl.cjs → MarkdownEditor-NYMcKLJy.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-BEsZqouS.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-Cy9WobJf.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/MarkdownEditorContainer-DSL5-_hG.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-Bc9xzKuR.cjs");const E=require("./lazy-Cy9WobJf.cjs");require("@monaco-editor/react");const m=require("./Switch-CfxMs3AZ.cjs"),N=require("./MarkdownEditor-CPzMv3lE.cjs"),b=({value:o,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-CpSpVa0v.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),r=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||r)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,r&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,26 +1,28 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as g, useState as x, useEffect as J, useCallback as u } from "react";
-import { DialSwitch as S } from "../Switch/Switch.js";
-import { EditorThemes as b } from "../../types/editor.js";
+import "../../constants/editor.js";
+import { EditorThemes as S } from "../../types/editor.js";
+import "@monaco-editor/react";
+import { DialSwitch as b } from "../Switch/Switch.js";
 import { DialMarkdownEditor as v } from "./MarkdownEditor.js";
 import { DialLabel as y } from "../Label/Label.js";
-const z = ({
+const $ = ({
   value: s,
   onChangeValue: l,
-  label: i,
+  label: t,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = b.dark,
+  theme: m = S.dark,
   onValidateJSON: f,
   preview: C = "edit"
 }) => {
-  const N = g(), [n, w] = x(!1), [p, D] = x(null);
+  const N = g(), [i, w] = x(!1), [p, D] = x(null);
   J(() => {
-    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    i && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       D(() => o.DialJsonEditor);
     });
-  }, [n]);
+  }, [i]);
   const h = u(
     (o) => {
       l?.(o);
@@ -31,16 +33,16 @@ const z = ({
       f?.(o);
     },
     [f]
-  ), t = !!a;
+  ), n = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (i || d || t) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      i && /* @__PURE__ */ e(y, { label: i }),
+    (t || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      t && /* @__PURE__ */ e(y, { label: t }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        t && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          S,
+        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          b,
           {
-            isOn: n,
+            isOn: i,
             label: a,
             switchId: N,
             onChange: (o) => w(o)
@@ -48,7 +50,7 @@ const z = ({
         ) })
       ] })
     ] }),
-    t && n ? /* @__PURE__ */ e(
+    n && i ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -76,5 +78,5 @@ const z = ({
   ] }) }) });
 };
 export {
-  z as DialMarkdownEditorContainer
+  $ as DialMarkdownEditorContainer
 };

package/dist/components/New/ButtonDropdown/ButtonDropdown.js

@@ -1,29 +1,38 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as s, useMemo as u } from "react";
-import { ButtonAppearance as d, ButtonVariant as c } from "../../../types/button.js";
-import { Button as f } from "../Button/Button.js";
-import { Dropdown as D } from "../Dropdown/Dropdown.js";
-import { getButtonChevron as h } from "./constants.js";
-import { DIAL_KIT_CLASS as l } from "../../../constants/public-class-names.js";
-const I = ({
+import { useState as u, useMemo as d } from "react";
+import { ButtonAppearance as c, ButtonVariant as f } from "../../../types/button.js";
+import { Button as D } from "../Button/Button.js";
+import { Dropdown as h } from "../Dropdown/Dropdown.js";
+import { getButtonChevron as l } from "./constants.js";
+import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
+const O = ({
   variant: n,
   appearance: t,
   items: e,
-  ...p
+  dropdownProps: p,
+  ...a
 }) => {
-  const [o, a] = s(!1), i = u(() => h(o), [o]);
-  return /* @__PURE__ */ r("div", { className: l.buttonDropdown, children: /* @__PURE__ */ r(D, { items: e, onOpenChange: (m) => a(m), children: /* @__PURE__ */ r(
-    f,
+  const [o, i] = u(!1), m = d(() => l(o), [o]);
+  return /* @__PURE__ */ r("div", { className: w.buttonDropdown, children: /* @__PURE__ */ r(
+    h,
     {
       ...p,
-      iconAfter: i,
-      variant: n || c.Primary,
-      appearance: t || d.Solid,
-      "aria-haspopup": "menu",
-      "aria-expanded": o
+      items: e,
+      onOpenChange: (s) => i(s),
+      children: /* @__PURE__ */ r(
+        D,
+        {
+          ...a,
+          iconAfter: m,
+          variant: n || f.Primary,
+          appearance: t || c.Solid,
+          "aria-haspopup": "menu",
+          "aria-expanded": o
+        }
+      )
     }
-  ) }) });
+  ) });
 };
 export {
-  I as ButtonDropdown
+  O as ButtonDropdown
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.22",
-  "generatedAt": "2026-09-28T06:50:57.410Z",
+  "version": "0.15.0-dev.23",
+  "generatedAt": "2026-09-28T14:52:31.794Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -910,6 +910,12 @@
           "type": "DropdownItem[]",
           "required": true,
           "description": "DropdownItems with actions"
+        },
+        {
+          "name": "dropdownProps",
+          "type": "Pick<DropdownProps, 'listClassName' | 'matchReferenceWidth'>",
+          "required": false,
+          "description": "`listClassName` and `matchReferenceWidth` forwarded to the menu `Dropdown`"
         }
       ],
       "examples": [