@epam/ai-dial-ui-kit 0.15.0-dev.14 → 0.15.0-dev.16

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).
 
+- **`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`.
 
 - **`Tabs` — `tabListClassName`, and a public class on the selected tab** — `className` lands on whichever element is outermost, so a `Tabs` with a `sectionLabel` left its `role="tablist"` unreachable: a caller wanting to repad the list had to choose between that and styling the wrapper. `tabListClassName` reaches the list in either case, and is additive to `className` when there is no heading and the two elements are one. The selected tab now also carries `dial-kit-tab-selected` (`DIAL_KIT_CLASS.tabSelected`) in both orientations, additive to `dial-kit-tab` — a wrapping component could mark a tab but not its selection, since the horizontal row's `dial-kit-tab-selected-underline` carries the gradient rule and the vertical rail draws its selection in Tailwind utilities alone. Like every entry in the record it carries no declarations. Both are additive: nothing renders differently.

package/dist/components/FileManager/FileManager.js

@@ -620,10 +620,10 @@ const fn = (O) => /* @__PURE__ */ o(ni, { ...O, children: /* @__PURE__ */ o(Ai,
     [I, K]
   ), mo = f(
     () => ({
-      ...M.additionalGridOptions,
-      onCellClicked: ro,
       headerHeight: Co,
       rowHeight: Co,
+      ...M.additionalGridOptions,
+      onCellClicked: ro,
       rowClass: "group/grid-row",
       defaultColDef: {
         ...M.additionalGridOptions?.defaultColDef,

package/dist/components/New/Notification/Notification.js

@@ -1,63 +1,65 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as b } from "react";
-import { DialIcon as k } from "../../Icon/Icon.js";
-import { NotificationVariant as n, NotificationType as i } from "../../../types/notification.js";
-import { mergeClasses as c } from "../../../utils/merge-classes.js";
-import { CloseButton as u } from "../CloseButton/CloseButton.js";
-import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as v } from "./constants.js";
-import { DIAL_KIT_CLASS as L } from "../../../constants/public-class-names.js";
-const K = ({
-  variant: e = n.Info,
-  type: s = i.Toast,
+import { useMemo as k } from "react";
+import { DialIcon as u } from "../../Icon/Icon.js";
+import { NotificationVariant as c, NotificationType as s } from "../../../types/notification.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { CloseButton as v } from "../CloseButton/CloseButton.js";
+import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as L } from "./constants.js";
+import { DIAL_KIT_CLASS as V } from "../../../constants/public-class-names.js";
+const R = ({
+  variant: e = c.Info,
+  type: i = s.Toast,
   title: o,
-  message: t,
-  className: d,
-  iconSize: l = 24,
-  iconStroke: m = 2,
-  closable: f = !1,
-  onClose: p,
-  children: x,
-  textClassName: h,
+  message: l,
+  action: t,
+  className: f,
+  iconSize: m = 24,
+  iconStroke: n = 2,
+  closable: p = !1,
+  onClose: x,
+  children: h,
+  textClassName: N,
   ...w
 }) => {
-  const N = b(() => I({ size: l, stroke: m })[e], [e, l, m]), g = h ?? (s === i.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const g = k(() => I({ size: m, stroke: n })[e], [e, m, n]), C = N ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
       role: M[e],
       ...w,
-      className: c(
-        v,
+      className: d(
+        L,
         T[e],
-        s === i.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
-        s === i.SectionMessage && e === n.Loading && "border-secondary",
-        d,
-        L.notification
+        i === s.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
+        i === s.SectionMessage && e === c.Loading && "border-secondary",
+        f,
+        V.notification
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(k, { icon: N }) }),
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(u, { icon: g }) }),
           o ? /* @__PURE__ */ r(
             "div",
             {
-              className: c(
+              className: d(
                 "flex min-w-0 text-primary break-words",
-                g
+                C
               ),
               children: [
                 /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: o }),
-                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: t })
+                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: l })
               ]
             }
-          ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: t })
+          ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
-        x,
-        f && /* @__PURE__ */ a(
-          u,
+        t != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: t }),
+        h,
+        p && /* @__PURE__ */ a(
+          v,
           {
             className: "shrink-0 self-start",
             ariaLabel: "Close notification",
-            onClose: (C) => p?.(C)
+            onClose: (b) => x?.(b)
           }
         )
       ]
@@ -65,5 +67,5 @@ const K = ({
   );
 };
 export {
-  K as Notification
+  R as Notification
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.14",
-  "generatedAt": "2026-09-24T08:32:07.882Z",
+  "version": "0.15.0-dev.16",
+  "generatedAt": "2026-09-24T13:53:43.935Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -212,6 +212,12 @@
           "required": true,
           "description": "Message text to display inside the alert"
         },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional control (typically a small `Button`) rendered at the inline end, after the text and before the close button; the caller supplies its accessible name"
+        },
         {
           "name": "closable",
           "type": "boolean",
@@ -247,7 +253,7 @@
         }
       ],
       "examples": [
-        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>"
+        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  type={NotificationType.SectionMessage}\n  title=\"Couldn't finish this response\"\n  message=\"Something went wrong. Try again in a moment.\"\n  action={\n    <Button\n      variant={ButtonVariant.Neutral}\n      appearance={ButtonAppearance.Outlined}\n      size={ElementSize.Small}\n      label=\"Try again\"\n      onClick={handleRetry}\n    />\n  }\n/>"
       ],
       "sourceFile": "components/New/Notification/Notification.tsx"
     },