@epam/ai-dial-ui-kit 0.16.0-dev.50 → 0.16.0-dev.51

package/dist/CHANGELOG.md

@@ -31,6 +31,8 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`FileName` (2.0) — `icon`** — replaces the type icon with your own, for example to mark a special folder in a tree. The icon's wrapper is `aria-hidden`, the `loading` spinner still takes its place, and the shared badge (part of the type icon) is not drawn, while `sharedLabel` still announces the state. Without `icon` nothing changes.
+
 - **`Grid` (2.0) — `appearance` (`GridAppearance.Default` / `Chat`)** — `GridAppearance.Chat` draws the design's "Chat table": a borderless card with a 12px corner and the MD shadow, 12px of padding on both sides of every header and row cell, a full-width 1px line under the header, dividers between data rows that stop at the cell padding on both sides and sit on the 0.5px `stroke-tertiary` stroke, and hover and selected rows with a 12px corner and no divider. It ignores `wrapperBorder`. The root carries `dial-kit-grid-chat`. ai-dial-chat's usage and catalog tables wrapped the grid in their own card and could not inset the dividers or round the rows without restyling ag-Grid's markup. Additive.
 
 - **`FormSection` (2.0)** — a titled section of a form or a builder column: a heading with an optional action at its inline end, an optional description and the content, in a `section` named by its heading. `variant` (`FormSectionVariant.Row` / `Caption` / `Setting`) sets the type scale; `headingLevel` (2–6, default 3) picks the heading element so the section fits the host's outline. Quick Apps' builder `SectionRow` and the DIAL Loop editor's copy of it were two copies of it. The root carries `dial-kit-form-section` (`DIAL_KIT_CLASS.formSection`). Additive.

package/dist/components/New/FileName/FileName.js

@@ -1,72 +1,73 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { FileIcon as g } from "../FileIcon/FileIcon.js";
+import { FileIcon as j } from "../FileIcon/FileIcon.js";
 import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
 import { DialItemType as w } from "../../../types/item.js";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
-const D = ({
-  name: s,
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+const L = ({
+  name: r,
   type: o = w.File,
-  fileExtension: t,
-  shared: i = !1,
-  loading: m = !1,
+  fileExtension: f,
+  icon: i,
+  shared: t = !1,
+  loading: l = !1,
   loadingLabel: p,
-  iconSize: f,
-  details: r,
-  isInvalidName: c = !1,
-  className: n,
-  nameClassName: x,
-  sharedIndicatorClassName: d,
+  iconSize: c,
+  details: a,
+  isInvalidName: n = !1,
+  className: x,
+  nameClassName: d,
+  sharedIndicatorClassName: h,
   sharedIndicatorTooltip: N,
-  sharedLabel: h = "Shared",
+  sharedLabel: u = "Shared",
   hideTooltip: y = !1,
   tooltipContent: I
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ m(
   "div",
   {
-    className: l(
+    className: s(
       "flex w-full min-w-0 items-center gap-2",
-      n,
+      x,
       v.fileName
     ),
     children: [
-      /* @__PURE__ */ e(
-        g,
+      i != null && !l ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex shrink-0 items-center justify-center", children: i }) : /* @__PURE__ */ e(
+        j,
         {
-          name: s,
+          name: r,
           type: o,
-          fileExtension: t,
-          shared: i,
-          loading: m,
+          fileExtension: f,
+          shared: t,
+          loading: l,
           loadingLabel: p,
-          size: f,
-          sharedIndicatorClassName: d,
+          size: c,
+          sharedIndicatorClassName: h,
           sharedIndicatorTooltip: N,
-          decorative: !m
+          decorative: !l
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ m(
         "div",
         {
-          className: l("flex min-w-0 flex-1", {
-            "flex-col gap-1": !!r
+          className: s("flex min-w-0 flex-1", {
+            "flex-col gap-1": !!a
           }),
           children: [
             /* @__PURE__ */ e(
               T,
               {
-                className: l(
+                className: s(
                   "dial-small-paragraph-text",
-                  c ? "text-secondary" : "text-primary",
-                  x
+                  n ? "text-secondary" : "text-primary",
+                  d
                 ),
-                text: s,
+                text: r,
                 hideTooltip: y,
                 customTooltipContent: I
               }
             ),
-            i && /* @__PURE__ */ e("span", { className: "sr-only", children: h }),
-            r
+            t && /* @__PURE__ */ e("span", { className: "sr-only", children: u }),
+            a
           ]
         }
       )
@@ -74,5 +75,5 @@ const D = ({
   }
 );
 export {
-  D as FileName
+  L as FileName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.50",
-  "generatedAt": "2026-10-27T10:32:17.686Z",
+  "version": "0.16.0-dev.51",
+  "generatedAt": "2026-10-28T10:08:15.738Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3863,7 +3863,7 @@
       "name": "FileName",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A file or folder name with its type icon, truncated with a tooltip when it\ndoes not fit.\naliases: FileDisplay|NameDisplay\nDesign system 2.0\n\nThe visible name already says what the item is, so the icon is decorative;\nthe shared state, which only the badge shows, is announced by a\nvisually-hidden `sharedLabel` after the name instead.\n\nWhile `loading` the icon is swapped for a `Spinner`, which is left in the\naccessibility tree so the busy state is announced.\n\nWith `details` the text switches to two lines — the name, then the metadata.",
+      "description": "A file or folder name with its type icon, truncated with a tooltip when it\ndoes not fit.\naliases: FileDisplay|NameDisplay\nDesign system 2.0\n\nThe visible name already says what the item is, so the icon is decorative;\nthe shared state, which only the badge shows, is announced by a\nvisually-hidden `sharedLabel` after the name instead.\n\nPass `icon` to draw your own in place of the type icon. The shared badge is\npart of the type icon, so it is not drawn then; the visually-hidden\n`sharedLabel` still announces the state.\n\nWhile `loading` the icon is swapped for a `Spinner`, which is left in the\naccessibility tree so the busy state is announced.\n\nWith `details` the text switches to two lines — the name, then the metadata.",
       "props": [
         {
           "name": "name",
@@ -3884,6 +3884,12 @@
           "required": false,
           "description": "Extension overriding the one in `name`"
         },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Replaces the type icon; the `loading` spinner still takes its place"
+        },
         {
           "name": "shared",
           "type": "boolean",