@epam/ai-dial-ui-kit 0.16.0-dev.4 → 0.16.0-dev.41

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

@@ -1,33 +1,36 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IconChevronRight as s } from "@tabler/icons-react";
-import { overlayGap as r, overlaySubMenuClassName as a, overlaySubMenuListClassName as t, overlayListClassName as n, overlaySurfaceClassName as m } from "../constants/overlay.js";
-import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as d } from "../../../constants/icon.js";
+import { IconChevronRight as t } from "@tabler/icons-react";
+import { overlayGap as a, overlaySubMenuClassName as r, overlaySubMenuListClassName as n, overlayListClassName as d, overlaySurfaceClassName as i } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as p } from "../../../constants/icon.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
 const b = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
 ), f = o(
-  "z-floating focus-visible:outline-none",
-  m
-), I = a, v = t, y = o(
-  n,
+  "z-floating focus-visible:outline-hidden",
+  i
+), y = r, D = n, h = o(
+  d,
   "py-1"
-), S = "my-1 border-t border-tertiary", w = r, L = /* @__PURE__ */ e(
-  s,
+), w = "my-1 border-t border-tertiary", x = "shrink-0 px-1 pt-1", L = "px-3 py-2 text-secondary dial-caption-text", l = 40, c = 2, N = 8, g = (s) => s * l + Math.max(s - 1, 0) * c + N, v = a, R = /* @__PURE__ */ e(
+  t,
   {
-    size: d.SM,
-    stroke: i,
+    size: p.SM,
+    stroke: m,
     "aria-hidden": "true"
   }
 );
 export {
   b as dropdownBaseClassName,
-  S as dropdownDividerClassName,
-  w as dropdownGap,
-  y as dropdownItemListClassName,
+  w as dropdownDividerClassName,
+  v as dropdownGap,
+  h as dropdownItemListClassName,
   f as dropdownListBaseClassName,
-  I as dropdownSubMenuClassName,
-  v as dropdownSubMenuListClassName,
-  L as submenuCaretIcon
+  L as dropdownNoResultsClassName,
+  x as dropdownSearchClassName,
+  y as dropdownSubMenuClassName,
+  D as dropdownSubMenuListClassName,
+  g as getDropdownListHeight,
+  R as submenuCaretIcon
 };

package/dist/components/New/Dropdown/search.js

@@ -0,0 +1,37 @@
+import { jsx as f } from "react/jsx-runtime";
+import { Highlight as a } from "../Highlight/Highlight.js";
+import { DropdownItemType as c } from "../../../types/dropdown.js";
+const h = (r, e) => typeof r.label == "string" && r.label.toLocaleLowerCase().includes(e), s = (r) => r.type === c.Divider || r.type === c.PlainText, g = (r, e, l) => {
+  if (!r.children?.length) return l(r, e) ? r : null;
+  if (l(r, e)) return r;
+  const n = p(r.children, e, l);
+  return n.length > 0 ? { ...r, children: n } : null;
+}, p = (r, e, l) => {
+  const n = [];
+  let t = [];
+  return r.forEach((o) => {
+    if (s(o)) {
+      o.type === c.Divider && (t = []), t.push(o);
+      return;
+    }
+    const i = g(o, e, l);
+    if (i == null) return;
+    const u = n.length === 0 ? t.filter((d) => d.type !== c.Divider) : t;
+    n.push(...u, i), t = [];
+  }), n;
+}, I = (r, e, l = h) => {
+  const n = e.trim().toLocaleLowerCase();
+  return n ? p(r, n, l) : r;
+}, b = (r, e) => {
+  const l = e.trim();
+  return l ? r.map((n) => s(n) ? n : {
+    ...n,
+    label: typeof n.label == "string" ? /* @__PURE__ */ f(a, { text: n.label, query: l, maxLines: 1 }) : n.label,
+    children: n.children ? b(n.children, l) : void 0
+  }) : r;
+};
+export {
+  I as filterDropdownItems,
+  b as highlightDropdownItems,
+  h as matchDropdownItemLabel
+};

package/dist/components/New/EntityIdentity/EntityIdentity.js

@@ -1,128 +1,130 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
-import { AvatarShape as _ } from "../../../types/avatar.js";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
+import { AvatarShape as w } from "../../../types/avatar.js";
 import { EntityType as e } from "../../../types/entity-type.js";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-import { Avatar as w } from "../Avatar/Avatar.js";
-import { EllipsisTooltip as d } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { Highlight as L } from "../Highlight/Highlight.js";
-const M = {
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { Avatar as C } from "../Avatar/Avatar.js";
+import { EllipsisTooltip as x } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { Highlight as M } from "../Highlight/Highlight.js";
+const P = {
   [e.Model]: "Model",
   [e.Agent]: "Agent",
   [e.Toolset]: "Toolset",
   [e.Skill]: "Skill",
   [e.Prompt]: "Prompt"
-}, p = {
+}, h = {
   [e.Model]: "text-blue",
   [e.Agent]: "text-green-1",
   [e.Toolset]: "text-brown-2",
   [e.Skill]: "text-violet-1",
   [e.Prompt]: "text-violet-2"
-}, P = {
+}, k = {
   [e.Model]: "bg-blue",
   [e.Agent]: "bg-green-2",
   [e.Toolset]: "bg-brown",
   [e.Skill]: "bg-violet-2",
   [e.Prompt]: "bg-violet-1"
-}, k = ["h1", "h2", "h3", "h4", "h5", "h6"], C = (t) => k[Math.min(6, Math.max(1, Math.round(t))) - 1], z = ({
+}, I = ["h1", "h2", "h3", "h4", "h5", "h6"], j = (t) => I[Math.min(6, Math.max(1, Math.round(t))) - 1], K = ({
   item: t,
-  labels: i,
-  showVersion: x = !0,
-  hasFeaturedTag: h = !0,
-  iconSize: g = 48,
-  headingLevel: u = 3,
+  labels: o,
+  showType: g = !0,
+  showVersion: u = !0,
+  hasFeaturedTag: f = !0,
+  iconSize: y = 48,
+  headingLevel: v = 3,
   query: r,
   footer: a,
-  statusBadge: o,
-  className: f,
-  nameClassName: v = "dial-h3-text",
-  typeClassName: T = "dial-caption-lead-semi-text",
-  versionClassName: y = "dial-tiny-text",
-  iconClassName: A,
-  featuredChipClassName: S
+  statusBadge: c,
+  className: T,
+  nameClassName: A = "dial-h3-text",
+  typeClassName: S = "dial-caption-lead-semi-text",
+  versionClassName: b = "dial-tiny-text",
+  iconClassName: N,
+  featuredChipClassName: E
 }) => {
-  const N = C(u), c = h && !!t.isFeatured, b = o != null || c, m = x ? t.version : void 0;
+  const L = j(v), m = f && !!t.isFeatured, d = c != null || m, p = u ? t.version : void 0, i = g ? o?.type ?? P[t.type] : void 0;
   return /* @__PURE__ */ s(
     "div",
     {
-      className: n(
+      className: l(
         "flex items-start gap-2",
-        f,
-        E.entityIdentity
+        T,
+        _.entityIdentity
       ),
       children: [
-        /* @__PURE__ */ l(
-          w,
+        /* @__PURE__ */ n(
+          C,
           {
             name: t.name,
             src: t.iconUrl,
-            size: g,
-            shape: _.Square,
-            className: n("rounded-[14px]", A)
+            size: y,
+            shape: w.Square,
+            imageClassName: "bg-entity-icon",
+            className: l("rounded-[14px]", N)
           }
         ),
         /* @__PURE__ */ s(
           "div",
           {
-            className: n(
+            className: l(
               "flex min-w-0 flex-1 flex-col gap-1",
               a != null && "self-stretch"
             ),
             children: [
-              /* @__PURE__ */ s("div", { className: "relative flex items-center justify-between", children: [
-                /* @__PURE__ */ l(
+              (d || i) && /* @__PURE__ */ s("div", { className: "relative flex items-center justify-between", children: [
+                i && /* @__PURE__ */ n(
                   "span",
                   {
-                    className: n(
+                    className: l(
                       "uppercase",
-                      T,
-                      p[t.type]
+                      S,
+                      h[t.type]
                     ),
-                    children: i?.type ?? M[t.type]
+                    children: i
                   }
                 ),
-                b && /* @__PURE__ */ s("div", { className: "absolute end-0 top-[-6px] flex items-center gap-2", children: [
-                  o,
-                  c && /* @__PURE__ */ l(
+                d && /* @__PURE__ */ s("div", { className: "absolute end-0 top-[-6px] flex items-center gap-2", children: [
+                  c,
+                  m && /* @__PURE__ */ n(
                     "span",
                     {
-                      className: n(
+                      className: l(
                         "flex h-6 items-center justify-center rounded-2xl px-2",
                         "dial-caption-lead-semi-text",
-                        P[t.type],
-                        p[t.type],
-                        S
+                        k[t.type],
+                        h[t.type],
+                        E
                       ),
-                      children: i?.featured ?? "Featured"
+                      children: o?.featured ?? "Featured"
                     }
                   )
                 ] })
               ] }),
               /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-2", children: [
-                /* @__PURE__ */ l(
-                  N,
+                /* @__PURE__ */ n(
+                  L,
                   {
-                    className: n(
+                    className: l(
                       "min-w-0 shrink text-primary",
-                      v
+                      A
                     ),
-                    children: r ? /* @__PURE__ */ l(L, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ l(d, { text: t.name })
+                    children: r ? /* @__PURE__ */ n(M, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ n(x, { text: t.name })
                   }
                 ),
-                m != null && /* Capped at 30% of the row so a long version truncates instead of
+                p != null && /* Capped at 30% of the row so a long version truncates instead of
                 squeezing the name out. */
-                /* @__PURE__ */ l(
-                  d,
+                /* @__PURE__ */ n(
+                  x,
                   {
-                    className: n(
+                    className: l(
                       "max-w-[30%] shrink-0 text-secondary",
-                      y
+                      b
                     ),
-                    text: m
+                    text: p
                   }
                 )
               ] }),
-              a != null && /* @__PURE__ */ l("div", { className: "mt-auto pt-1", children: a })
+              a != null && a
             ]
           }
         )
@@ -131,5 +133,5 @@ const M = {
   );
 };
 export {
-  z as EntityIdentity
+  K as EntityIdentity
 };

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

@@ -1,65 +1,170 @@
-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 = ({
-  segments: e,
-  labelClassName: m = "dial-small-text",
-  leafClassName: i = "dial-small-semi-text",
-  className: c,
-  ariaLabel: d = "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 n = /* @__PURE__ */ r(
-    t,
+  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(
-        I,
+      icon: /* @__PURE__ */ s(
+        O,
         {
-          size: x.SM,
-          stroke: s,
+          size: k.SM,
+          stroke: b,
           "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,
+  ), _ = /* @__PURE__ */ s("span", { className: J, children: /* @__PURE__ */ s(
+    E,
     {
-      className: l(c, N.folderPath),
-      ariaLabel: d,
-      separator: /* @__PURE__ */ r(
-        t,
+      icon: /* @__PURE__ */ s(
+        V,
         {
-          icon: /* @__PURE__ */ r(
-            f,
+          size: 14,
+          stroke: b,
+          "aria-hidden": "true",
+          className: "rtl:scale-x-[-1]"
+        }
+      ),
+      className: "text-secondary"
+    }
+  ) }), 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",
+      {
+        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",
             {
-              size: 14,
-              stroke: s,
-              "aria-hidden": "true",
-              className: "rtl:scale-x-[-1]"
+              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
+                  }
+                )
+              ]
             }
           ),
-          className: "text-secondary"
-        }
+          !r && _
+        ]
+      },
+      `item-${e}`
+    );
+  }, z = () => /* @__PURE__ */ h(
+    "li",
+    {
+      className: o(x, "shrink-0"),
+      children: [
+        /* @__PURE__ */ h(
+          Q,
+          {
+            tooltip: t.join(" > "),
+            triggerClassName: "inline-flex cursor-default items-center text-secondary",
+            children: [
+              /* @__PURE__ */ s(
+                G,
+                {
+                  size: k.SM,
+                  stroke: b,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ s("span", { className: "sr-only", children: w.join(", ") })
+            ]
+          }
+        ),
+        _
+      ]
+    },
+    "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
       ),
-      pathItems: p,
-      labelClassName: l(
-        m,
-        "text-secondary",
-        "!cursor-default"
-      )
+      children: /* @__PURE__ */ s("ol", { className: Z, children: m })
     }
   );
 };
 export {
-  y as FolderPath
+  fe as FolderPath
 };

package/dist/components/New/FormSection/FormSection.js

@@ -0,0 +1,87 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as S } from "../../../constants/public-class-names.js";
+import { FormSectionVariant as i } from "../../../types/form-section.js";
+const N = {
+  [i.Row]: {
+    header: "gap-2",
+    title: "dial-small-semi-text",
+    description: "dial-small-text"
+  },
+  [i.Caption]: {
+    header: "gap-4",
+    title: "dial-caption-lead-semi-text",
+    description: "dial-tiny-text"
+  },
+  [i.Setting]: {
+    header: "gap-4",
+    title: "dial-tiny-semi-text",
+    description: "dial-tiny-text"
+  }
+}, b = ({
+  title: d,
+  action: l,
+  description: s,
+  variant: m = i.Row,
+  headingLevel: c = 3,
+  children: r,
+  className: p,
+  titleClassName: x,
+  descriptionClassName: h,
+  contentClassName: f
+}) => {
+  const n = y(), a = N[m], g = `h${c}`;
+  return /* @__PURE__ */ o(
+    "section",
+    {
+      "aria-labelledby": n,
+      className: e(
+        "flex flex-col gap-3",
+        p,
+        S.formSection
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: e(
+              "flex items-center justify-between",
+              a.header
+            ),
+            children: [
+              /* @__PURE__ */ t(
+                g,
+                {
+                  id: n,
+                  className: e(
+                    "min-w-0 text-primary",
+                    a.title,
+                    x
+                  ),
+                  children: d
+                }
+              ),
+              l != null && /* @__PURE__ */ t("div", { className: "shrink-0", children: l })
+            ]
+          }
+        ),
+        s != null && /* @__PURE__ */ t(
+          "p",
+          {
+            className: e(
+              "text-secondary",
+              a.description,
+              h
+            ),
+            children: s
+          }
+        ),
+        r != null && /* @__PURE__ */ t("div", { className: e("relative", f), children: r })
+      ]
+    }
+  );
+};
+export {
+  b as FormSection
+};