@epam/ai-dial-ui-kit 0.14.0-dev.5 → 0.14.0-dev.51

package/dist/components/Analytics/BarGroup/BarGroup.js

@@ -0,0 +1,142 @@
+import { jsx as t, jsxs as f, Fragment as J } from "react/jsx-runtime";
+import { Fragment as Q } from "react";
+import { DialAccordion as R } from "../../Accordion/Accordion.js";
+import { DialAnalyticsBar as b } from "../Bar/Bar.js";
+import { DialLoader as U } from "../../Loader/Loader.js";
+import { DialTooltip as g } from "../../Tooltip/Tooltip.js";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+const k = ({
+  title: x,
+  titleTooltip: h,
+  description: S,
+  data: i,
+  compareData: r,
+  compareLabels: m,
+  maxValue: p,
+  colorMap: u,
+  defaultExpanded: E = !0,
+  nonCollapsible: G,
+  isLoading: K,
+  onBarClick: o,
+  inline: c,
+  barTitleClassName: N,
+  barValueClassName: P,
+  barClassName: v,
+  barDescriptions: C,
+  className: T
+}) => {
+  const W = Object.entries(i), q = c ? a("text-secondary", N) : N, j = m ? "dial-tiny-text text-secondary" : void 0, z = h ? /* @__PURE__ */ t(g, { tooltip: h, children: x }) : x, H = r ? [.../* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])] : [], y = "cursor-pointer rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary", F = "group flex flex-col gap-1.5", I = a(
+    "flex flex-col gap-1.5 pl-2",
+    o && "group-hover:bg-accent-primary-alpha group-focus-visible:bg-accent-primary-alpha",
+    v
+  );
+  return /* @__PURE__ */ t(
+    R,
+    {
+      title: z,
+      description: S,
+      defaultExpanded: E,
+      nonCollapsible: G,
+      className: T,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: a(
+            "flex flex-col",
+            r ? "gap-4" : c ? "gap-2" : "gap-3"
+          ),
+          children: K ? /* @__PURE__ */ t(U, { fullWidth: !1, className: "self-center" }) : r ? H.map((e) => {
+            const l = e in i ? i[e] : null, n = e in r ? r[e] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, L = s != null && s !== 0, A = L && s > 0, D = L ? A ? `+${s}` : String(s) : null, O = C?.[e], $ = /* @__PURE__ */ t("span", { className: "dial-small-text text-secondary", children: e }), w = /* @__PURE__ */ f(J, { children: [
+              /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+                O ? /* @__PURE__ */ t(g, { tooltip: O, children: $ }) : $,
+                D != null && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: a(
+                      "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
+                      A ? "bg-success text-success" : "bg-error text-error"
+                    ),
+                    children: D
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ f("div", { className: I, children: [
+                /* @__PURE__ */ t(
+                  b,
+                  {
+                    title: m?.[0],
+                    value: l,
+                    maxValue: p,
+                    colorMap: u,
+                    inline: c,
+                    titleClassName: j,
+                    ariaLabel: e
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  b,
+                  {
+                    title: m?.[1],
+                    value: n,
+                    maxValue: p,
+                    colorMap: u,
+                    inline: c,
+                    titleClassName: j,
+                    ariaLabel: `${e} compare`
+                  }
+                )
+              ] })
+            ] });
+            return o ? /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => o(e, l),
+                className: a(
+                  F,
+                  y
+                ),
+                children: w
+              },
+              e
+            ) : /* @__PURE__ */ t("div", { className: F, children: w }, e);
+          }) : W.map(([e, l]) => {
+            const n = /* @__PURE__ */ t(
+              b,
+              {
+                title: e,
+                value: l,
+                maxValue: p,
+                colorMap: u,
+                inline: c,
+                titleClassName: q,
+                valueClassName: P,
+                className: v
+              }
+            ), d = o ? /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => o(e, l),
+                className: y,
+                children: n
+              }
+            ) : n, s = C?.[e];
+            return s ? /* @__PURE__ */ t(
+              g,
+              {
+                tooltip: s,
+                triggerClassName: "flex flex-col",
+                children: d
+              },
+              e
+            ) : /* @__PURE__ */ t(Q, { children: d }, e);
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  k as DialAnalyticsBarGroup
+};

package/dist/components/Analytics/Card/Card.js

@@ -0,0 +1,87 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { DialAnalyticsErrorTag as u } from "../ErrorTag/ErrorTag.js";
+import { DialEllipsisTooltip as m } from "../../EllipsisTooltip/EllipsisTooltip.js";
+import { DialLoader as g } from "../../Loader/Loader.js";
+import { AnalyticsCardVariant as c } from "../../../types/analytics.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+const b = {
+  [c.Default]: {
+    container: "bg-layer-3",
+    title: "dial-small-text text-secondary",
+    value: "dial-display2-text text-primary",
+    showDescription: !0
+  },
+  [c.Compact]: {
+    container: "bg-layer-2",
+    title: "dial-tiny-text text-secondary",
+    value: "dial-body-semi-text text-primary",
+    showDescription: !1
+  }
+}, E = ({
+  title: o,
+  value: p,
+  description: i,
+  variant: f = c.Default,
+  error: r,
+  isLoading: n,
+  className: y,
+  delta: t,
+  deltaPositive: d,
+  deltaUnit: h,
+  compareValues: l
+}) => {
+  const a = b[f], v = d !== void 0 ? d : (t ?? 0) >= 0, N = t === void 0 ? null : `${t >= 0 ? `+${t}` : String(t)}${h ?? ""}`;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: x(
+        "flex flex-col rounded-lg border border-secondary p-4",
+        r || n ? "gap-2" : "gap-1",
+        a.container,
+        y
+      ),
+      children: [
+        t !== void 0 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: a.title, children: o }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: x(
+                "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
+                v ? "bg-success text-success" : "bg-error text-error"
+              ),
+              children: N
+            }
+          )
+        ] }) : /* @__PURE__ */ e("span", { className: a.title, children: o }),
+        r ? /* @__PURE__ */ e(u, { className: "self-start" }) : n ? /* @__PURE__ */ e(g, { fullWidth: !1, className: "self-start" }) : l ? /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                text: l[0].title,
+                className: "dial-tiny-text text-secondary"
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: a.value, children: l[0].value })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-4 w-px flex-shrink-0 bg-controls-disable-accent" }),
+          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                text: l[1].title,
+                className: "dial-tiny-text text-secondary"
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: a.value, children: l[1].value })
+          ] })
+        ] }) : /* @__PURE__ */ e("span", { className: a.value, children: p }),
+        !r && !n && a.showDescription && i != null && i !== !1 && /* @__PURE__ */ e("span", { className: "dial-tiny-text text-secondary", children: i })
+      ]
+    }
+  );
+};
+export {
+  E as DialAnalyticsCard
+};

package/dist/components/Analytics/ErrorTag/ErrorTag.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { DialTag as t } from "../../Tag/Tag.js";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+const l = ({
+  label: r = "Error",
+  className: o
+}) => /* @__PURE__ */ e(
+  t,
+  {
+    label: r,
+    className: a(
+      "dial-tiny-semi-text cursor-default rounded-[120px] border-transparent bg-error text-error",
+      o
+    )
+  }
+);
+export {
+  l as DialAnalyticsErrorTag
+};

package/dist/components/Analytics/Histogram/Histogram.js

@@ -0,0 +1,200 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as D } from "../Bar/utils.js";
+import { DialLoader as I } from "../../Loader/Loader.js";
+import { DialTooltip as w } from "../../Tooltip/Tooltip.js";
+import { mergeClasses as H } from "../../../utils/merge-classes.js";
+import { buildHistogramColumns as A, formatHistogramColumnLabel as _, getHistogramYTicks as S, getHistogramYMax as B } from "./utils.js";
+const u = 128, O = (s, i) => {
+  const l = _(s, i);
+  return s === i ? `scored ${l}` : `scored between ${l}`;
+}, T = (s, i, l, o, d) => /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+  s && /* @__PURE__ */ t("strong", { children: s }),
+  /* @__PURE__ */ n("span", { children: [
+    i,
+    " out of ",
+    l,
+    " ",
+    o
+  ] }),
+  /* @__PURE__ */ t("span", { children: O(d.from, d.to) })
+] }), W = ({
+  title: s,
+  values: i,
+  colorMap: l = D,
+  valueTitle: o = "values",
+  showCount: d,
+  isLoading: L,
+  className: j,
+  compareValues: h,
+  valueSetLabel: M,
+  compareValueSetLabel: Y
+}) => {
+  const k = A(i, l), y = h ? A(h, l) : void 0, c = i.length, p = h?.length ?? 0, N = Math.max(c, p), b = B(N), m = S(N), v = (e) => e.map((r) => ({
+    ...r,
+    ratio: b > 0 ? r.count / b : 0
+  })), f = v(k), $ = y ? v(y) : void 0, C = (e, r, a, g) => {
+    if (e.count === 0)
+      return /* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-end", "aria-hidden": "true", children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: "min-h-2 w-full rounded-sm",
+          style: { height: `${e.ratio * 100}%` }
+        }
+      ) });
+    const x = g ? {
+      backgroundImage: `repeating-linear-gradient(135deg, ${e.color} 0px, ${e.color} 1px, transparent 1px, transparent 4px)`,
+      borderColor: e.color
+    } : { backgroundColor: e.color };
+    return /* @__PURE__ */ t(
+      w,
+      {
+        placement: "bottom",
+        tooltip: r,
+        triggerClassName: "flex h-full flex-1 items-end",
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            role: "img",
+            "aria-label": a,
+            className: "flex min-h-2 w-full items-center justify-center rounded-sm border border-transparent",
+            style: { height: `${e.ratio * 100}%`, ...x },
+            children: d && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ n("div", { className: H("flex flex-col gap-2", j), children: [
+    /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
+    L ? /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex items-center justify-center",
+        style: { height: u },
+        children: /* @__PURE__ */ t(I, { fullWidth: !1 })
+      }
+    ) : /* @__PURE__ */ n("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          "data-histogram-y-axis": !0,
+          "aria-hidden": "true",
+          className: "relative",
+          style: { height: u },
+          children: m.map((e, r) => /* @__PURE__ */ t(
+            "span",
+            {
+              className: "dial-tiny-text absolute right-0 whitespace-nowrap text-secondary",
+              style: {
+                top: `${r / (m.length - 1) * 100}%`,
+                transform: "translateY(-50%)"
+              },
+              children: e
+            },
+            e
+          ))
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "relative min-w-0", children: [
+        m.map((e, r) => /* @__PURE__ */ t(
+          "div",
+          {
+            "data-histogram-grid": !0,
+            className: "pointer-events-none absolute inset-x-0 border-t border-primary",
+            style: { top: `${r / (m.length - 1) * 100}%` }
+          },
+          e
+        )),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "relative flex items-end gap-1",
+            style: { height: u },
+            children: $ ? f.map((e, r) => {
+              const a = $[r], g = `${e.count} out of ${c} ${o}`, x = `${a.count} out of ${p} ${o}`;
+              return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
+                C(
+                  e,
+                  T(
+                    M,
+                    e.count,
+                    c,
+                    o,
+                    e
+                  ),
+                  g,
+                  !0
+                ),
+                C(
+                  a,
+                  T(
+                    Y,
+                    a.count,
+                    p,
+                    o,
+                    a
+                  ),
+                  x,
+                  !1
+                )
+              ] }, r);
+            }) : f.map((e, r) => {
+              const a = `${e.count} out of ${c} ${o}`;
+              return e.count === 0 ? /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "flex h-full flex-1 items-end",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: "min-h-2 w-full rounded-sm",
+                      style: { height: `${e.ratio * 100}%` }
+                    }
+                  )
+                },
+                r
+              ) : /* @__PURE__ */ t(
+                w,
+                {
+                  placement: "bottom",
+                  tooltip: a,
+                  triggerClassName: "flex h-full flex-1 items-end",
+                  children: /* @__PURE__ */ t(
+                    "div",
+                    {
+                      role: "img",
+                      "aria-label": a,
+                      className: H(
+                        "flex min-h-2 w-full items-center justify-center rounded-sm border",
+                        "border-transparent"
+                      ),
+                      style: {
+                        height: `${e.ratio * 100}%`,
+                        backgroundColor: e.color
+                      },
+                      children: d && e.count > 0 && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+                    }
+                  )
+                },
+                r
+              );
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", {}),
+      /* @__PURE__ */ t("div", { "data-histogram-x-axis": !0, className: "flex gap-1", children: f.map((e, r) => /* @__PURE__ */ t(
+        "span",
+        {
+          className: "dial-caption-text flex-1 text-center text-secondary",
+          children: _(e.from, e.to)
+        },
+        r
+      )) })
+    ] })
+  ] });
+};
+export {
+  W as DialAnalyticsHistogram
+};

package/dist/components/Analytics/Histogram/utils.js

@@ -0,0 +1,45 @@
+const f = "#FF4E50", g = (o, t) => {
+  let s = -1;
+  return t.forEach((r, c) => {
+    (r.from === r.to ? o >= r.from : o > r.from && o <= r.to) && (s = c);
+  }), s;
+}, x = (o, t) => {
+  const s = t.map(() => 0);
+  let r = 0;
+  o.forEach((n) => {
+    if (n <= 0) {
+      r += 1;
+      return;
+    }
+    const e = g(n, t);
+    e >= 0 && (s[e] += 1);
+  });
+  const c = Math.max(0, r, ...s), i = (n) => c > 0 ? n / c : 0, u = {
+    from: 0,
+    to: 0,
+    color: f,
+    count: r,
+    ratio: i(r),
+    isZeroBucket: !0
+  }, a = t.map((n, e) => ({
+    from: n.from,
+    to: n.to,
+    color: n.color,
+    count: s[e],
+    ratio: i(s[e]),
+    isZeroBucket: !1
+  }));
+  return [u, ...a];
+}, C = (o) => o <= 0 ? 2 : o % 2 === 0 ? o : o + 1, l = (o) => {
+  const t = C(o);
+  return [t, t / 2, 0];
+}, m = (o) => `${Math.round(o * 100) / 100}`, H = (o, t) => o === t ? m(o) : `${m(o)}-${m(t)}`;
+export {
+  f as ZERO_BUCKET_COLOR,
+  x as buildHistogramColumns,
+  H as formatHistogramColumnLabel,
+  m as formatHistogramInterval,
+  g as getHistogramColumnIndex,
+  C as getHistogramYMax,
+  l as getHistogramYTicks
+};

package/dist/components/AutocompleteInput/AutocompleteInputValue.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { DialTagInput as i } from "../TagInput/TagInput.js";
+const u = ({
+  selectedItems: a,
+  placeholder: t,
+  collapseTagOverflow: r = !1,
+  listClassName: e,
+  listElementClassName: l
+}) => a?.length ? /* @__PURE__ */ n(
+  i,
+  {
+    readOnly: !0,
+    initialTags: a,
+    collapseTagOverflow: r,
+    containerClassName: e,
+    tagClassName: l
+  }
+) : t ? /* @__PURE__ */ n("span", { className: "text-secondary", children: t }) : null;
+export {
+  u as DialAutocompleteInputValue
+};

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,126 @@
+import { jsxs as k, Fragment as w, jsx as i } from "react/jsx-runtime";
+import { useMemo as C, Children as E, isValidElement as L, useCallback as S, createElement as d } from "react";
+import { mergeClasses as y } from "../../utils/merge-classes.js";
+import { defaultSeparator as N, breadcrumbEllipsisButtonClassName as $, breadcrumbSeparatorClassName as F, breadcrumbItemBaseClassName as M, breadcrumbListClassName as j, breadcrumbBaseClassName as A } from "./constants.js";
+import { DialBreadcrumbItem as u } from "./BreadcrumbItem.js";
+import { DialDropdown as _ } from "../Dropdown/Dropdown.js";
+import { IconDots as x } from "@tabler/icons-react";
+import { DIAL_ICON_SIZE as z } from "../../constants/icon.js";
+const H = ({
+  pathItems: p,
+  separator: n = N,
+  ariaLabel: I = "Breadcrumb",
+  className: D,
+  children: b,
+  labelClassName: m,
+  onBeforeNavigate: e
+}) => {
+  const t = C(() => p?.length ? p : E.toArray(b).filter(L).map((r) => {
+    const c = r.props, { labelClassName: s, isLast: o, separator: f, ...l } = c;
+    return l;
+  }), [p, b]), h = S(
+    async (r) => {
+      const c = parseInt(r.key, 10), s = t[c];
+      if (e && !await e()) {
+        r.domEvent.preventDefault();
+        return;
+      }
+      s.onClick ? s.onClick(r.domEvent) : s.href && (window.location.href = s.href);
+    },
+    [t, e]
+  ), g = C(() => {
+    if (t.length === 0) return null;
+    if (t.length <= 3)
+      return t.map((l, a) => /* @__PURE__ */ d(
+        u,
+        {
+          ...l,
+          key: `item-${a}`,
+          isFirst: a === 0 && t.length > 1,
+          isLast: a === t.length - 1,
+          separator: n,
+          labelClassName: m,
+          onBeforeNavigate: e
+        }
+      ));
+    const r = t.at(0), c = t.slice(1, -2), s = t.at(-2), o = t.at(-1);
+    if (!r || !s || !o) return null;
+    const f = c.map((l, a) => ({
+      key: String(a + 1),
+      label: typeof l.label == "string" ? l.label : `Item ${a + 1}`,
+      disabled: l.disabled
+    }));
+    return /* @__PURE__ */ k(w, { children: [
+      /* @__PURE__ */ d(
+        u,
+        {
+          ...r,
+          key: "item-0",
+          isFirst: !0,
+          separator: n,
+          labelClassName: m,
+          onBeforeNavigate: e
+        }
+      ),
+      /* @__PURE__ */ k("li", { className: y(M, "shrink-0"), children: [
+        /* @__PURE__ */ i(
+          _,
+          {
+            items: f,
+            onItemClick: h,
+            placement: "bottom-start",
+            matchReferenceWidth: !1,
+            children: /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                "aria-label": "More breadcrumbs",
+                className: $,
+                children: /* @__PURE__ */ i(x, { size: z.SM })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i("span", { className: F, children: n })
+      ] }),
+      /* @__PURE__ */ d(
+        u,
+        {
+          ...s,
+          key: `item-${t.length - 2}`,
+          separator: n,
+          labelClassName: m,
+          onBeforeNavigate: e
+        }
+      ),
+      /* @__PURE__ */ d(
+        u,
+        {
+          ...o,
+          key: `item-${t.length - 1}`,
+          isLast: !0,
+          separator: n,
+          labelClassName: m,
+          onBeforeNavigate: e
+        }
+      )
+    ] });
+  }, [
+    t,
+    n,
+    m,
+    h,
+    e
+  ]);
+  return /* @__PURE__ */ i(
+    "nav",
+    {
+      "aria-label": I,
+      className: y(A, D),
+      children: /* @__PURE__ */ i("ol", { className: j, children: g })
+    }
+  );
+};
+export {
+  H as DialBreadcrumb
+};