@epam/ai-dial-ui-kit 0.16.0-dev.7 → 0.16.0-dev.70

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-hidden",
-  m
-), I = a, v = t, y = o(
-  n,
+  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/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,67 @@
+import { jsxs as E, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { IconAlertTriangle as I } from "@tabler/icons-react";
+import { useState as v, useRef as A, useEffect as L, Component as S } from "react";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { LiveRegionPoliteness as O } from "../../../types/live-region.js";
+import { PrimaryButton as F } from "../Button/ButtonWrappers.js";
+import { LiveRegion as T } from "../LiveRegion/LiveRegion.js";
+import { StateScreen as j } from "../StateScreen/StateScreen.js";
+class x extends S {
+  state = { hasError: !1 };
+  static getDerivedStateFromError = () => ({ hasError: !0 });
+  componentDidCatch(r, o) {
+    this.props.onCatch(r, o);
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+const N = /* @__PURE__ */ e(I, { size: D.LG, stroke: _ }), R = (t = [], r = []) => t.length !== r.length || t.some((o, i) => !Object.is(o, r[i])), K = ({
+  children: t,
+  title: r,
+  description: o,
+  actionLabel: i,
+  onReset: c,
+  resetKeys: n,
+  onError: m,
+  icon: h = N,
+  className: f
+}) => {
+  const [s, a] = v(!1), l = A(n);
+  L(() => {
+    s && R(l.current, n) && a(!1), l.current = n;
+  }, [s, n]);
+  const u = (d, C) => {
+    a(!0), m?.(d, C);
+  }, p = () => {
+    if (!c) {
+      window.location.reload();
+      return;
+    }
+    c(), a(!1);
+  };
+  return /* @__PURE__ */ E(g, { children: [
+    /* @__PURE__ */ e(T, { politeness: O.Assertive, visuallyHidden: !0, children: s && r }),
+    s ? /* @__PURE__ */ e(
+      j,
+      {
+        icon: h,
+        title: r,
+        description: o,
+        className: f,
+        action: /* @__PURE__ */ e(
+          F,
+          {
+            autoFocus: !0,
+            label: i,
+            onClick: p
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(x, { onCatch: u, children: t })
+  ] });
+};
+export {
+  K as ErrorBoundary
+};

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
 };