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

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`.
@@ -41,6 +43,7 @@ Versions match the git tags on the `development` branch.
 
 - **`MarkdownEditor` (2.0) — the live preview is part of the card now, instead of a sheet of GitHub's own CSS laid over it** — the 2.0 restyle covered the card and the toolbar and stopped at the split: everything right of it was still `@uiw/react-md-editor`'s default stylesheet. Three things came out of that. The pane divider was the library's `inset` box-shadow in a hardcoded `#d0d7de`, drawn on the preview and then painted over by the markdown body's opaque white — and since that body is only as tall as its content, the divider survived as a hairline starting halfway down the pane, under the last rendered block. The white itself was the second: a `#ffffff` patch over the card's `bg-layer-raised`, which a dark theme would have kept white. And Tailwind's preflight, which the kit ships, had stripped the list markers and the task-list checkbox out of the rendered markdown — a bulleted list came out as indented lines, a `- [ ]` as a 0×0 box. The divider is now a real border on `border-secondary`, the body and its table rows are transparent, code, quotes, tables and headings take kit tokens, and lists and task boxes render again. The preview also inherits the host's font and `text-primary` instead of the library's `-apple-system` stack and `#24292f`; the edit pane keeps its monospace face. Both panes gained a 16px gutter beside the divider, so text no longer butts against it.
 - **`MarkdownEditor` (2.0) — the two panes no longer sit on top of each other in RTL** — live mode pins the preview with a physical `right: 0` while the edit pane is a plain block at the inline start, so under `dir="rtl"` both landed on the right unless the host knew to add the library's own `w-md-editor-rtl` class. The preview is now placed with logical insets and the panes' text aligns to `start`, so the edit pane and the preview swap sides with the document direction — divider, gutters and the quote bar included — with no class for the host to remember.
+- **`DialSchemaRenderer` — required-field errors quote the field label** — the message was `${label} is required`, so with a long schema `title` the reader could not tell where the field name ended and "is required" began. The label is now wrapped in double quotes (`"API key" is required`) wherever the renderer builds the message — the inline field error and the `validateRequired` result alike. The label is still the schema `title` (or the label derived from the property key), never the entered value. Consumers asserting the old text in their tests need to add the quotes. Requested in [ai-dial-admin-frontend#4731](https://github.com/epam/ai-dial-admin-frontend/issues/4731).
 
 ---
 

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/SchemaRenderer/components/SchemaField.js

@@ -1,71 +1,71 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { DialFormItem as g } from "../../FormItem/FormItem.js";
 import { JsonSchemaType as A } from "../types.js";
 import { useSchemaContext as C } from "../context.js";
-import { resolveRef as E, isObjectType as I, buildSummary as O, validateRequired as b, isMissingRequiredValue as k } from "../utils.js";
+import { resolveRef as E, isObjectType as I, buildSummary as M, validateRequired as O, isMissingRequiredValue as b, toRequiredMessage as k } from "../utils.js";
 import { SchemaSection as w } from "./SchemaSection.js";
 import { SchemaFieldContent as u } from "./SchemaFieldContent.js";
-const q = ({
-  schema: f,
+const B = ({
+  schema: a,
   value: t,
   onChange: d,
   path: e,
-  level: s = 0,
+  level: i = 0,
   required: r,
   label: n
 }) => {
   const {
     rootSchema: c,
-    defaultExpanded: S = !0,
+    defaultExpanded: f = !0,
     touchedPaths: m = /* @__PURE__ */ new Set(),
     skipUntouched: h = !1
-  } = C(), o = E(f, c), a = I(o), l = o.type === A.Array;
-  if (a || l) {
-    const j = O(t, o, c), x = b(
+  } = C(), o = E(a, c), S = I(o), l = o.type === A.Array;
+  if (S || l) {
+    const j = M(t, o, c), x = O(
       t,
       o,
       c,
       e.join(".")
     ), p = e.join("."), T = p + ".", F = !h || m.has(p) || [...m].some((R) => R.startsWith(T));
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ s(
       w,
       {
         title: n ?? o.title ?? e[e.length - 1] ?? "Section",
         description: o.description,
-        level: s,
+        level: i,
         summary: j,
         errorCount: F ? x.length : 0,
-        defaultExpanded: S,
-        children: /* @__PURE__ */ i(
+        defaultExpanded: f,
+        children: /* @__PURE__ */ s(
           u,
           {
             schema: o,
             value: t,
             onChange: d,
             path: e,
-            level: s + 1,
+            level: i + 1,
             required: r
           }
         )
       }
     );
   }
-  const y = (!h || m.has(e.join("."))) && r && k(t) ? `${n ?? "Field"} is required` : void 0;
-  return /* @__PURE__ */ i(
+  const y = (!h || m.has(e.join("."))) && r && b(t) ? k(n ?? "Field") : void 0;
+  return /* @__PURE__ */ s(
     g,
     {
       label: n,
       required: r,
       description: o.description,
       error: y,
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ s(
         u,
         {
           schema: o,
           value: t,
           onChange: d,
           path: e,
-          level: s,
+          level: i,
           required: r,
           suppressInlineError: !0
         }
@@ -74,5 +74,5 @@ const q = ({
   );
 };
 export {
-  q as SchemaField
+  B as SchemaField
 };

package/dist/components/SchemaRenderer/components/SchemaFieldContent.js

@@ -2,15 +2,15 @@ import { jsx as t, jsxs as O, Fragment as P } from "react/jsx-runtime";
 import { DialErrorText as x } from "../../CaptionText/CaptionText.js";
 import { JsonSchemaType as c } from "../types.js";
 import { useSchemaContext as F } from "../context.js";
-import { resolveRef as T, isObjectType as u, isMissingRequiredValue as A } from "../utils.js";
-import { SchemaObjectEditor as b } from "./SchemaObjectEditor.js";
-import { SchemaArrayEditor as k } from "./SchemaArrayEditor.js";
-import { SchemaOneOfEditor as q } from "./SchemaOneOfEditor.js";
-import { SchemaAnyOfEditor as M } from "./SchemaAnyOfEditor.js";
-import { SchemaKeyValueEditor as R } from "./SchemaKeyValueEditor.js";
-import { SchemaPrimitiveField as V } from "./SchemaPrimitiveField.js";
-import { SchemaAdditionalPropertiesEditor as w } from "./SchemaAdditionalPropertiesEditor.js";
-const Q = ({
+import { resolveRef as T, isObjectType as u, toRequiredMessage as A, isMissingRequiredValue as b } from "../utils.js";
+import { SchemaObjectEditor as k } from "./SchemaObjectEditor.js";
+import { SchemaArrayEditor as M } from "./SchemaArrayEditor.js";
+import { SchemaOneOfEditor as R } from "./SchemaOneOfEditor.js";
+import { SchemaAnyOfEditor as q } from "./SchemaAnyOfEditor.js";
+import { SchemaKeyValueEditor as V } from "./SchemaKeyValueEditor.js";
+import { SchemaPrimitiveField as w } from "./SchemaPrimitiveField.js";
+import { SchemaAdditionalPropertiesEditor as D } from "./SchemaAdditionalPropertiesEditor.js";
+const X = ({
   schema: h,
   value: i,
   onChange: f,
@@ -33,7 +33,7 @@ const Q = ({
   let o;
   if (e.oneOf)
     o = /* @__PURE__ */ t(
-      q,
+      R,
       {
         schema: e,
         value: i,
@@ -44,7 +44,7 @@ const Q = ({
     );
   else if (e.anyOf && e.type !== c.Object)
     o = /* @__PURE__ */ t(
-      M,
+      q,
       {
         schema: e,
         value: i,
@@ -56,7 +56,7 @@ const Q = ({
   else if (u(e)) {
     const n = e.additionalProperties != null && e.additionalProperties !== !1, a = !e.properties || Object.keys(e.properties).length === 0;
     n && a ? o = /* @__PURE__ */ t(
-      R,
+      V,
       {
         schema: e,
         value: i,
@@ -65,14 +65,14 @@ const Q = ({
         level: m
       }
     ) : a && e.additionalProperties !== !1 ? o = /* @__PURE__ */ t(
-      w,
+      D,
       {
         value: i,
         onChange: s,
         theme: E
       }
     ) : o = /* @__PURE__ */ t(
-      b,
+      k,
       {
         schema: e,
         value: i,
@@ -83,7 +83,7 @@ const Q = ({
     );
   } else if (e.type === c.Array)
     o = /* @__PURE__ */ t(
-      k,
+      M,
       {
         schema: e,
         value: i,
@@ -93,10 +93,10 @@ const Q = ({
       }
     );
   else {
-    const n = j && p && A(i), a = !l && n ? `${e.title ?? "Field"} is required` : void 0;
+    const n = j && p && b(i), a = !l && n ? A(e.title ?? "Field") : void 0;
     o = /* @__PURE__ */ O(P, { children: [
       /* @__PURE__ */ t(
-        V,
+        w,
         {
           schema: e,
           value: i,
@@ -110,5 +110,5 @@ const Q = ({
   return d ? d(r, e, o) : o;
 };
 export {
-  Q as SchemaFieldContent
+  X as SchemaFieldContent
 };

package/dist/components/SchemaRenderer/utils.js

@@ -26,7 +26,7 @@ function p(r, n, i = 0) {
   }
   return t;
 }
-function x(r) {
+function T(r) {
   return r.map((n, i) => ({ entry: n, index: i })).sort((n, i) => {
     const t = n.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0, e = i.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0;
     return t !== e ? t - e : n.index - i.index;
@@ -41,7 +41,8 @@ function O(r) {
 function N(r) {
   return r.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (n) => n.toUpperCase());
 }
-function T(r, n) {
+const I = (r) => `"${r}" is required`;
+function q(r, n) {
   return r.type === f.Null ? "null" : r.$ref ? p(r, n).title ?? r.$ref.split("/").pop() ?? "Option" : r.title ? r.title : r.type ? Array.isArray(r.type) ? r.type.join(" | ") : r.type : r.discriminator ? Object.keys(r.discriminator.mapping).join(" | ") : r.const != null ? String(r.const) : r.oneOf ? "One of options" : "Option";
 }
 function A(r, n, i = 0) {
@@ -128,7 +129,7 @@ function b(r, n, i, t = "", e = 0) {
     const a = t ? `${t}.${l}` : l, c = d?.[l];
     if (j(c)) {
       const g = u?.title ?? N(l);
-      o.push({ path: a, message: `${g} is required` });
+      o.push({ path: a, message: I(g) });
     }
   }
   if (d && s.properties)
@@ -177,7 +178,7 @@ function E(r, n, i) {
   }
   return "";
 }
-function q(r, n, i) {
+function R(r, n, i) {
   if (r == null) {
     const t = n.findIndex((e) => e.type === f.Null);
     return t >= 0 ? t : 0;
@@ -216,7 +217,7 @@ function q(r, n, i) {
   }
   return 0;
 }
-function R(r, n, i) {
+function B(r, n, i) {
   if (n && typeof r == "object" && r !== null) {
     const t = r[n];
     if (t) return `Item ${i + 1}: ${t}`;
@@ -227,7 +228,7 @@ function R(r, n, i) {
   }
   return `Item ${i + 1}`;
 }
-function B(r) {
+function D(r) {
   switch (Array.isArray(r.type) ? r.type[0] : r.type) {
     case f.String:
       return "";
@@ -242,7 +243,7 @@ function B(r) {
       return {};
   }
 }
-const D = [
+const V = [
   f.String,
   f.Number,
   f.Boolean,
@@ -250,10 +251,10 @@ const D = [
   f.Object,
   f.Array
 ];
-function V(r) {
+function k(r) {
   return Array.isArray(r) ? f.Array : typeof r == "object" && r !== null ? f.Object : typeof r == "boolean" ? f.Boolean : typeof r == "number" ? f.Number : r === null ? f.Null : f.String;
 }
-const I = {
+const P = {
   [f.String]: "",
   [f.Number]: 0,
   [f.Boolean]: !1,
@@ -261,23 +262,24 @@ const I = {
   [f.Object]: {},
   [f.Array]: []
 };
-function k(r) {
-  return I[r];
+function _(r) {
+  return P[r];
 }
 export {
-  D as ENTRY_TYPE_OPTIONS,
+  V as ENTRY_TYPE_OPTIONS,
   E as buildSummary,
-  q as detectAnyOfVariant,
+  R as detectAnyOfVariant,
   A as extractDefaults,
-  k as getEntryTypeDefault,
-  R as getItemTitle,
-  T as getOptionLabel,
-  B as getSchemaDefault,
-  V as inferEntryType,
+  _ as getEntryTypeDefault,
+  B as getItemTitle,
+  q as getOptionLabel,
+  D as getSchemaDefault,
+  k as inferEntryType,
   j as isMissingRequiredValue,
   O as isObjectType,
   p as resolveRef,
-  x as sortByPropertyOrder,
+  T as sortByPropertyOrder,
   N as toFieldLabel,
+  I as toRequiredMessage,
   b as validateRequired
 };

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.24",
+  "generatedAt": "2026-09-29T08:48:09.588Z",
   "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": [