@epam/ai-dial-ui-kit 0.16.0-dev.14 → 0.16.0-dev.15

package/dist/CHANGELOG.md

@@ -36,6 +36,8 @@ Versions match the git tags on the `development` branch.
 
 ### Fixed
 
+- **`FolderPath` (2.0) — a collapsed path shows the full path in a tooltip instead of a click menu** — a path of more than three segments collapsed its middle into a `…` button inherited from `DialBreadcrumb` that opened a dropdown of the hidden segments on click. In a read-only path every item in it was disabled, the menu listed only the hidden part, and inside a clickable card (the catalog card) the click also opened the card. The `…` is now plain, non-interactive text: hovering it shows the full path as `Shared > Team > Sub > Reports` in a `Tooltip`, and the hidden segments stay in the accessible text. Paths of three segments or fewer, the props and the public class are unchanged. Reported on the catalog cards in ai-dial-chat.
+
 - **`ConfirmationPopup` (2.0) — Cancel/Confirm split the row evenly on mobile** — the `Popup` mobile footer split did not reach `ConfirmationPopup`, which renders its own footer. Below the `mobile` breakpoint (768px) its Cancel and Confirm buttons now take an equal share of the row. Desktop is unchanged, `confirmClassName` still merges on top, and a caller's `footer` is not touched. Reported on the log-out confirmation in ai-dial-chat.
 
 - **Package — test declarations no longer published** — `dist/` carried 36 `.d.ts` files for specs, tests and mocks (`*.spec.ts`, `*.test.tsx`, `__tests__/`, `__mocks__/`), because the declaration build excluded only `*.spec.tsx` and stories. They are no longer emitted; the declarations `package.json` `exports` points to are unchanged.

package/dist/components/New/FolderPath/FolderPath.js

@@ -1,65 +1,111 @@
-import { jsx as r } from "react/jsx-runtime";
-import { IconFolder as I, IconChevronRight as f } from "@tabler/icons-react";
-import { DialBreadcrumb as h } from "../../Breadcrumb/Breadcrumb.js";
-import { DialIcon as t } from "../../Icon/Icon.js";
-import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as x } from "../../../constants/icon.js";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
-const y = ({
+import { jsx as r, jsxs as l, Fragment as C } from "react/jsx-runtime";
+import { IconFolder as S, IconDots as _, IconChevronRight as L } from "@tabler/icons-react";
+import { DialBreadcrumbItem as x } from "../../Breadcrumb/BreadcrumbItem.js";
+import { breadcrumbListClassName as D, breadcrumbSeparatorClassName as y, breadcrumbItemBaseClassName as A, breadcrumbBaseClassName as B } from "../../Breadcrumb/constants.js";
+import { DialIcon as m } from "../../Icon/Icon.js";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { Tooltip as E } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as n } from "../../../constants/icon.js";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as F } from "../../../constants/public-class-names.js";
+const T = 3, G = ({
   segments: e,
-  labelClassName: m = "dial-small-text",
-  leafClassName: i = "dial-small-semi-text",
-  className: c,
-  ariaLabel: d = "Folder path"
+  labelClassName: d = "dial-small-text",
+  leafClassName: h = "dial-small-semi-text",
+  className: p,
+  ariaLabel: N = "Folder path"
 }) => {
-  const n = /* @__PURE__ */ r(
-    t,
+  const I = /* @__PURE__ */ r(
+    m,
     {
       icon: /* @__PURE__ */ r(
-        I,
+        S,
         {
-          size: x.SM,
-          stroke: s,
+          size: n.SM,
+          stroke: t,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), p = e.map((o, a) => ({
-    label: a === e.length - 1 ? /* @__PURE__ */ r("span", { className: i, children: o }) : o,
-    disabled: !0,
-    ...a === 0 ? { iconBefore: n } : {}
-  }));
-  return /* @__PURE__ */ r(
-    h,
+  ), c = /* @__PURE__ */ r(
+    m,
     {
-      className: l(c, N.folderPath),
-      ariaLabel: d,
-      separator: /* @__PURE__ */ r(
-        t,
+      icon: /* @__PURE__ */ r(
+        L,
         {
-          icon: /* @__PURE__ */ r(
-            f,
-            {
-              size: 14,
-              stroke: s,
-              "aria-hidden": "true",
-              className: "rtl:scale-x-[-1]"
-            }
-          ),
-          className: "text-secondary"
+          size: 14,
+          stroke: t,
+          "aria-hidden": "true",
+          className: "rtl:scale-x-[-1]"
         }
       ),
-      pathItems: p,
-      labelClassName: l(
-        m,
-        "text-secondary",
-        "!cursor-default"
-      )
+      className: "text-secondary"
+    }
+  ), f = i(
+    d,
+    "text-secondary",
+    "!cursor-default"
+  ), o = (a) => {
+    const s = a === e.length - 1;
+    return /* @__PURE__ */ r(
+      x,
+      {
+        label: s ? /* @__PURE__ */ r("span", { className: h, children: e[a] }) : e[a],
+        disabled: !0,
+        iconBefore: a === 0 ? I : void 0,
+        isFirst: a === 0 && e.length > 1,
+        isLast: s,
+        separator: c,
+        labelClassName: f
+      },
+      `item-${a}`
+    );
+  }, u = e.length > T, b = e.slice(1, -2);
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      "aria-label": N,
+      className: i(
+        B,
+        p,
+        F.folderPath
+      ),
+      children: /* @__PURE__ */ r("ol", { className: D, children: u ? /* @__PURE__ */ l(C, { children: [
+        o(0),
+        /* @__PURE__ */ l(
+          "li",
+          {
+            className: i(A, "shrink-0"),
+            children: [
+              /* @__PURE__ */ l(
+                E,
+                {
+                  tooltip: e.join(" > "),
+                  triggerClassName: "inline-flex cursor-default items-center text-secondary",
+                  children: [
+                    /* @__PURE__ */ r(
+                      _,
+                      {
+                        size: n.SM,
+                        stroke: t,
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ r("span", { className: "sr-only", children: b.join(", ") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r("span", { className: y, children: c })
+            ]
+          }
+        ),
+        o(e.length - 2),
+        o(e.length - 1)
+      ] }) : e.map((a, s) => o(s)) })
     }
   );
 };
 export {
-  y as FolderPath
+  G as FolderPath
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.14",
-  "generatedAt": "2026-10-19T16:47:47.000Z",
+  "version": "0.16.0-dev.15",
+  "generatedAt": "2026-10-19T17:10:28.825Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -532,7 +532,7 @@
       "name": "FolderPath",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\nDesign system 2.0\n\nEvery segment is disabled (no navigation); the first segment gets a leading\nfolder icon and the last segment is styled as the current/leaf item.",
+      "description": "A read-only, non-clickable folder/location path styled like `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\nDesign system 2.0\n\nEvery segment is disabled (no navigation); the first segment gets a leading\nfolder icon and the last segment is styled as the current/leaf item. A path\nof more than three segments collapses its middle into a non-interactive `…`\nthat shows the full path (`Shared > Team > Sub > Reports`) in a tooltip on\nhover; the hidden segments stay in the accessible text.",
       "props": [
         {
           "name": "segments",
@@ -558,14 +558,14 @@
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes applied to the breadcrumb's `<nav>` element.\n`DialBreadcrumb` scrolls horizontally on overflow, so this must not shrink\nthe nav to content width (e.g. never `w-auto`)."
+          "description": "Additional CSS classes applied to the `<nav>` element.\nThe nav clips on overflow, so this must not shrink it to content width\n(e.g. never `w-auto`)."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false,
           "defaultValue": "'Folder path'",
-          "description": "Accessible name for the underlying `<nav>`.\n`DialBreadcrumb` would otherwise name it \"Breadcrumb\", which misdescribes a\npath with no navigable items; override it when a page shows more than one."
+          "description": "Accessible name for the `<nav>`. A path\nhas no navigable items, so it is not named \"Breadcrumb\"; override it when a\npage shows more than one."
         }
       ],
       "examples": [