@epam/ai-dial-ui-kit 0.16.0-dev.16 → 0.16.0-dev.18

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

@@ -1,111 +1,170 @@
-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: d = "dial-small-text",
-  leafClassName: h = "dial-small-semi-text",
-  className: p,
-  ariaLabel: N = "Folder path"
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { IconFolder as O, IconDots as G, IconChevronRight as V } from "@tabler/icons-react";
+import { useRef as f, useState as X, useCallback as v, useEffect as N } from "react";
+import { breadcrumbListClassName as Z, breadcrumbBaseClassName as $, breadcrumbCurrentClassName as q, breadcrumbLinkBaseClassName as H, breadcrumbItemBaseClassName as x, breadcrumbSeparatorClassName as J } from "../../Breadcrumb/constants.js";
+import { DialIcon as E } from "../../Icon/Icon.js";
+import { DIAL_KIT_ICON_STROKE as b } from "../constants/icon.js";
+import { Tooltip as Q } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as U } from "../../../constants/public-class-names.js";
+import { observeElementSize as Y, scheduleMeasure as y } from "../../../utils/element-size-observer.js";
+const ee = 3, fe = ({
+  segments: t,
+  labelClassName: R = "dial-small-text",
+  leafClassName: W = "dial-small-semi-text",
+  className: F,
+  ariaLabel: M = "Folder path"
 }) => {
-  const I = /* @__PURE__ */ r(
-    m,
+  const p = f(null), L = f(null), I = f(null), [i, P] = X(!1), C = f(!1), S = f(0), c = v((e) => {
+    C.current = e, P(e);
+  }, []), n = v(() => {
+    const e = p.current;
+    if (!e) return;
+    if (C.current) {
+      e.clientWidth >= S.current && c(!1);
+      return;
+    }
+    const r = L.current, a = I.current;
+    if (!r || !a) return;
+    const d = r.scrollWidth - r.clientWidth, B = parseFloat(getComputedStyle(a).minWidth) || 0, K = a.clientWidth <= B + 1;
+    d > 0 && K && (S.current = e.clientWidth + d, c(!0));
+  }, [c]);
+  N(() => {
+    const e = p.current;
+    if (e)
+      return Y(e, n);
+  }, [n]);
+  const A = t.join("\0");
+  N(() => {
+    c(!1), y(n);
+  }, [A, n, c]), N(() => {
+    i || y(n);
+  }, [i, n]);
+  const D = /* @__PURE__ */ s(
+    E,
     {
-      icon: /* @__PURE__ */ r(
-        S,
+      icon: /* @__PURE__ */ s(
+        O,
         {
-          size: n.SM,
-          stroke: t,
+          size: k.SM,
+          stroke: b,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), c = /* @__PURE__ */ r(
-    m,
+  ), _ = /* @__PURE__ */ s("span", { className: J, children: /* @__PURE__ */ s(
+    E,
     {
-      icon: /* @__PURE__ */ r(
-        L,
+      icon: /* @__PURE__ */ s(
+        V,
         {
           size: 14,
-          stroke: t,
+          stroke: b,
           "aria-hidden": "true",
           className: "rtl:scale-x-[-1]"
         }
       ),
       className: "text-secondary"
     }
-  ), f = i(
-    d,
-    "text-secondary",
-    "!cursor-default"
-  ), o = (a) => {
-    const s = a === e.length - 1;
-    return /* @__PURE__ */ r(
-      x,
+  ) }), j = o(
+    R,
+    "text-secondary cursor-default"
+  ), l = t.length - 1, T = t.length >= 3 ? l - 1 : -1, g = t.length > ee || i, w = t.slice(
+    1,
+    i ? l : l - 1
+  ), u = (e) => {
+    const r = e === l, a = e === T;
+    let d = t[e];
+    return r && (d = /* @__PURE__ */ s("span", { className: W, children: t[e] })), /* @__PURE__ */ h(
+      "li",
       {
-        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
+        className: o(
+          x,
+          r && "min-w-0",
+          // Gives up its width long before the leaf does.
+          a && "shrink-[1000]",
+          !r && !a && "shrink-0"
+        ),
+        children: [
+          /* @__PURE__ */ h(
+            "span",
+            {
+              className: o(
+                H,
+                q,
+                "pointer-events-none opacity-75",
+                // Lets the label's own minimum width hold the folder at one character.
+                a && "min-w-auto"
+              ),
+              "aria-current": r ? "page" : void 0,
+              "aria-disabled": "true",
+              children: [
+                e === 0 && D,
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    ref: r && L || a && I || void 0,
+                    className: o(
+                      "truncate",
+                      r && "min-w-0 flex-1",
+                      a && "min-w-[2ch]",
+                      j
+                    ),
+                    children: d
+                  }
+                )
+              ]
+            }
+          ),
+          !r && _
+        ]
       },
-      `item-${a}`
+      `item-${e}`
     );
-  }, u = e.length > T, b = e.slice(1, -2);
-  return /* @__PURE__ */ r(
-    "nav",
+  }, z = () => /* @__PURE__ */ h(
+    "li",
     {
-      "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: o(x, "shrink-0"),
+      children: [
+        /* @__PURE__ */ h(
+          Q,
           {
-            className: i(A, "shrink-0"),
+            tooltip: t.join(" > "),
+            triggerClassName: "inline-flex cursor-default items-center text-secondary",
             children: [
-              /* @__PURE__ */ l(
-                E,
+              /* @__PURE__ */ s(
+                G,
                 {
-                  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(", ") })
-                  ]
+                  size: k.SM,
+                  stroke: b,
+                  "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ r("span", { className: y, children: c })
+              /* @__PURE__ */ s("span", { className: "sr-only", children: w.join(", ") })
             ]
           }
         ),
-        o(e.length - 2),
-        o(e.length - 1)
-      ] }) : e.map((a, s) => o(s)) })
+        _
+      ]
+    },
+    "ellipsis"
+  ), m = [];
+  return g ? (m.push(u(0), z()), i || m.push(u(l - 1)), m.push(u(l))) : t.forEach((e, r) => m.push(u(r))), /* @__PURE__ */ s(
+    "nav",
+    {
+      ref: p,
+      "aria-label": M,
+      className: o(
+        $,
+        F,
+        U.folderPath
+      ),
+      children: /* @__PURE__ */ s("ol", { className: Z, children: m })
     }
   );
 };
 export {
-  G as FolderPath
+  fe as FolderPath
 };

package/dist/components/New/Popup/constants.js

@@ -1,5 +1,5 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.16",
-  "generatedAt": "2026-10-19T18:22:01.303Z",
+  "version": "0.16.0-dev.18",
+  "generatedAt": "2026-10-19T21:01:06.483Z",
   "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 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.",
+      "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.\n\nWhen the path is too wide, the leaf keeps its width longest: the folder\nbefore it truncates first, down to about one character, and if the leaf\nstill does not fit, that folder joins the `…` as well. Only then does the\nleaf truncate.",
       "props": [
         {
           "name": "segments",