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

package/dist/components/SchemaRenderer/utils.js

@@ -0,0 +1,258 @@
+import { JsonSchemaType as d } from "./types.js";
+function b(r, n) {
+  const i = { ...r, ...n };
+  return (r.properties || n.properties) && (i.properties = { ...r.properties, ...n.properties }), (r.required || n.required) && (i.required = Array.from(
+    /* @__PURE__ */ new Set([...r.required ?? [], ...n.required ?? []])
+  )), i;
+}
+function u(r, n, i = 0) {
+  if (i > 10) return r;
+  let t = r;
+  if (t.$ref) {
+    const e = t.$ref.replace(/^#\//, "").split("/");
+    let o = n;
+    for (const l of e)
+      o = o?.[l];
+    if (!o || typeof o != "object") return r;
+    const { $ref: f, ...y } = t, p = o;
+    t = { ...p.$ref ? u(p, n, i + 1) : p, ...y };
+  }
+  if (t.allOf && t.allOf.length > 0) {
+    const { allOf: e, ...o } = t;
+    let f = {};
+    for (const y of e)
+      f = b(f, u(y, n, i + 1));
+    t = b(f, o);
+  }
+  return t;
+}
+function P(r) {
+  return r.map((n, i) => ({ entry: n, index: i })).sort((n, i) => {
+    const t = n.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0, e = i.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0;
+    return t !== e ? t - e : n.index - i.index;
+  }).map(({ entry: n }) => n);
+}
+function A(r) {
+  return r == null || r === "";
+}
+function O(r) {
+  return r.type === d.Object || r.properties != null && r.oneOf == null && r.anyOf == null && r.type == null;
+}
+function I(r) {
+  return r.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (n) => n.toUpperCase());
+}
+function q(r, n) {
+  return r.type === d.Null ? "null" : r.$ref ? u(r, n).title ?? r.$ref.split("/").pop() ?? "Option" : r.title ? r.title : r.type ? Array.isArray(r.type) ? r.type.join(" | ") : r.type : r.discriminator ? Object.keys(r.discriminator.mapping).join(" | ") : r.const != null ? String(r.const) : r.oneOf ? "One of options" : "Option";
+}
+function j(r, n, i = 0) {
+  if (i > 15) return;
+  const t = u(r, n);
+  if ("default" in t)
+    return t.default;
+  if (t.discriminator && t.oneOf) {
+    const e = Object.keys(t.discriminator.mapping)[0];
+    if (e) {
+      const o = u(
+        { $ref: t.discriminator.mapping[e] },
+        n
+      );
+      return {
+        ...j(o, n, i + 1) ?? {},
+        [t.discriminator.propertyName]: e
+      };
+    }
+  }
+  if (O(t)) {
+    if (t.properties) {
+      const e = {};
+      let o = !1;
+      for (const [f, y] of Object.entries(t.properties)) {
+        const p = j(y, n, i + 1);
+        p !== void 0 && (e[f] = p, o = !0);
+      }
+      return o ? e : void 0;
+    }
+    if (t.additionalProperties != null && t.additionalProperties !== !1)
+      return {};
+  }
+}
+function $(r, n, i, t = "", e = 0) {
+  if (e > 15) return [];
+  const o = [], f = u(n, i);
+  if (f.anyOf) {
+    const s = f.anyOf.filter(
+      (l) => l.type !== d.Null
+    );
+    return r != null && s.length === 1 ? $(
+      r,
+      s[0],
+      i,
+      t,
+      e + 1
+    ) : o;
+  }
+  if (f.oneOf && f.discriminator) {
+    const s = f.discriminator.propertyName, l = r?.[s];
+    if (l && f.discriminator.mapping[l]) {
+      const a = { $ref: f.discriminator.mapping[l] }, c = u(a, i);
+      return $(
+        r,
+        c,
+        i,
+        t,
+        e + 1
+      );
+    }
+    return o;
+  }
+  if (f.type === d.Array || !f.type && Array.isArray(r)) {
+    if (Array.isArray(r) && f.items)
+      for (let s = 0; s < r.length; s++) {
+        const l = $(
+          r[s],
+          f.items,
+          i,
+          `${t}[${s}]`,
+          e + 1
+        );
+        o.push(...l);
+      }
+    return o;
+  }
+  if (!O(f)) return o;
+  const y = f.required ?? [], p = r;
+  for (const s of y) {
+    const l = f.properties?.[s];
+    if (l && u(l, i).isHidden)
+      continue;
+    const a = t ? `${t}.${s}` : s, c = p?.[s];
+    if (A(c)) {
+      const g = l?.title ?? I(s);
+      o.push({ path: a, message: `${g} is required` });
+    }
+  }
+  if (p && f.properties)
+    for (const [s, l] of Object.entries(f.properties)) {
+      if (u(l, i).isHidden)
+        continue;
+      const a = t ? `${t}.${s}` : s, c = p[s];
+      if (c != null) {
+        const g = $(
+          c,
+          l,
+          i,
+          a,
+          e + 1
+        );
+        o.push(...g);
+      }
+    }
+  if (p && f.additionalProperties != null && f.additionalProperties !== !1 && typeof f.additionalProperties == "object") {
+    const s = f.additionalProperties;
+    for (const [l, a] of Object.entries(p)) {
+      const c = t ? `${t}.${l}` : l, g = $(
+        a,
+        s,
+        i,
+        c,
+        e + 1
+      );
+      o.push(...g);
+    }
+  }
+  return o;
+}
+function v(r, n, i) {
+  const t = u(n, i);
+  if (Array.isArray(r))
+    return `${r.length} item${r.length !== 1 ? "s" : ""}`;
+  if (O(t) && t.properties) {
+    const e = Object.entries(t.properties).filter(
+      ([, p]) => !u(p, i).isHidden
+    ), o = e.length, f = r;
+    return `${e.filter(([p]) => {
+      const s = f?.[p];
+      return s != null && s !== "";
+    }).length}/${o} fields`;
+  }
+  return "";
+}
+function N(r, n, i) {
+  if (r == null) {
+    const t = n.findIndex((e) => e.type === d.Null);
+    return t >= 0 ? t : 0;
+  }
+  if (Array.isArray(r)) {
+    const t = n.findIndex((e) => u(e, i).type === d.Array);
+    return t >= 0 ? t : 0;
+  }
+  if (typeof r == "boolean") {
+    const t = n.findIndex((e) => u(e, i).type === d.Boolean);
+    return t >= 0 ? t : 0;
+  }
+  if (typeof r == "number") {
+    const t = n.findIndex((e) => {
+      const o = u(e, i);
+      return o.type === d.Number || o.type === d.Integer;
+    });
+    return t >= 0 ? t : 0;
+  }
+  if (typeof r == "string") {
+    const t = n.findIndex((e) => u(e, i).type === d.String);
+    return t >= 0 ? t : 0;
+  }
+  if (typeof r == "object") {
+    const t = r;
+    for (let e = 0; e < n.length; e++) {
+      const o = u(n[e], i);
+      if (o.discriminator && o.discriminator.propertyName in t)
+        return e;
+    }
+    for (let e = 0; e < n.length; e++) {
+      const o = u(n[e], i);
+      if (O(o) || o.oneOf) return e;
+    }
+    return 0;
+  }
+  return 0;
+}
+function V(r, n, i) {
+  if (n && typeof r == "object" && r !== null) {
+    const t = r[n];
+    if (t) return `Item ${i + 1}: ${t}`;
+  }
+  if (typeof r == "object" && r !== null) {
+    const t = r, e = t.name ?? t.title ?? t.id;
+    if (e) return `Item ${i + 1}: ${e}`;
+  }
+  return `Item ${i + 1}`;
+}
+function k(r) {
+  switch (Array.isArray(r.type) ? r.type[0] : r.type) {
+    case d.String:
+      return "";
+    case d.Boolean:
+      return !1;
+    case d.Array:
+      return [];
+    case d.Integer:
+    case d.Number:
+      return;
+    default:
+      return {};
+  }
+}
+export {
+  v as buildSummary,
+  N as detectAnyOfVariant,
+  j as extractDefaults,
+  V as getItemTitle,
+  q as getOptionLabel,
+  k as getSchemaDefault,
+  A as isMissingRequiredValue,
+  O as isObjectType,
+  u as resolveRef,
+  P as sortByPropertyOrder,
+  I as toFieldLabel,
+  $ as validateRequired
+};

package/dist/components/Search/Search.js

@@ -0,0 +1,63 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconX as u, IconSearch as N } from "@tabler/icons-react";
+import { useState as b, useEffect as k, useCallback as p, useMemo as z } from "react";
+import { ElementSize as I } from "../../types/size.js";
+import { DialInput as d } from "../Input/Input.js";
+import { SIZE_CONFIG as g } from "./constants.js";
+import { mergeClasses as h } from "../../utils/merge-classes.js";
+const v = ({
+  size: r = I.Standard,
+  placeholder: C = "Search...",
+  value: o,
+  onChange: i,
+  withoutBorder: a,
+  ...f
+}) => {
+  const [s, c] = b(o || "");
+  k(() => {
+    c(o || "");
+  }, [o]);
+  const n = p(
+    (l) => {
+      c(l || ""), i?.(l || "");
+    },
+    [i]
+  ), e = g[r], m = p(() => {
+    n("");
+  }, [n]), S = z(() => {
+    if (s)
+      return {
+        icon: /* @__PURE__ */ t(
+          u,
+          {
+            size: e.iconSize,
+            "aria-label": "Clear search",
+            role: "button"
+          }
+        ),
+        className: a ? "bg-transparent" : "",
+        onClick: m,
+        size: r
+      };
+  }, [m, s, r, e.iconSize, a]);
+  return /* @__PURE__ */ t(
+    d,
+    {
+      placeholder: C,
+      iconBefore: /* @__PURE__ */ t(N, { size: e.iconSize, stroke: e.iconStroke }),
+      value: s,
+      onChange: n,
+      inputButtonProps: S,
+      containerClassName: e.containerClassName,
+      className: e.className,
+      wrapperClassName: h(
+        e.wrapperClassName,
+        a ? "!border-0 ps-5 [&>div]:!border-0" : ""
+      ),
+      ...f
+    }
+  );
+};
+export {
+  v as DialSearch
+};

package/dist/components/Search/constants.js

@@ -0,0 +1,27 @@
+import { ElementSize as a } from "../../types/size.js";
+const s = {
+  [a.Small]: {
+    className: "dial-tiny-text",
+    wrapperClassName: "pl-2 py-0",
+    containerClassName: "h-[24px]",
+    iconSize: 16,
+    iconStroke: 1
+  },
+  [a.Standard]: {
+    className: "dial-small-text",
+    wrapperClassName: "",
+    containerClassName: "",
+    iconSize: 20,
+    iconStroke: 1.5
+  },
+  [a.Large]: {
+    className: "",
+    wrapperClassName: "",
+    containerClassName: "",
+    iconSize: 0,
+    iconStroke: 0
+  }
+};
+export {
+  s as SIZE_CONFIG
+};

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,87 @@
+import { jsx as f, jsxs as g } from "react/jsx-runtime";
+import { useCallback as h } from "react";
+import { mergeClasses as i } from "../../utils/merge-classes.js";
+import { segmentDisabledClassName as x, segmentSelectedClassName as w, segmentUnselectedClassName as k, segmentBaseClassName as C, containerBaseClassName as D } from "./constants.js";
+const A = ({
+  options: n,
+  value: c,
+  onChange: d,
+  disabled: m,
+  className: o,
+  ariaLabel: u
+}) => {
+  const b = h(
+    (s) => {
+      if (m)
+        return;
+      const e = n.filter((l) => !l.disabled);
+      if (e.length === 0)
+        return;
+      const a = e.findIndex(
+        (l) => l.value === c
+      );
+      let t = null;
+      switch (s.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          t = (a + 1) % e.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          t = (a - 1 + e.length) % e.length;
+          break;
+        case "Home":
+          t = 0;
+          break;
+        case "End":
+          t = e.length - 1;
+          break;
+        default:
+          return;
+      }
+      s.preventDefault();
+      const r = e[t];
+      r && r.value !== c && d(r.value);
+    },
+    [m, n, c, d]
+  );
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": u,
+      className: i(D, o),
+      children: n.map((s, e) => {
+        const a = s.value === c, t = e === 0, r = e === n.length - 1, l = m || s.disabled;
+        return /* @__PURE__ */ g(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": a,
+            tabIndex: a ? 0 : -1,
+            disabled: l,
+            onClick: () => d(s.value),
+            onKeyDown: b,
+            className: i(
+              C,
+              !r && "-mr-px",
+              t && "rounded-l",
+              r && "rounded-r",
+              a ? w : k,
+              l && x
+            ),
+            children: [
+              s.icon,
+              s.label
+            ]
+          },
+          s.value
+        );
+      })
+    }
+  );
+};
+export {
+  A as DialSegmentedControl
+};

package/dist/components/SegmentedControl/constants.js

@@ -0,0 +1,8 @@
+const e = "inline-flex items-center rounded bg-layer-3", t = "flex flex-1 items-center justify-center gap-2 h-7 px-3 py-1 border border-primary dial-small-text whitespace-nowrap focus-visible:outline outline-offset-0 focus-visible:relative focus-visible:z-10", s = "relative z-10 bg-controls-accent-primary-alpha-active text-primary", a = "text-secondary hover:text-primary", l = "text-controls-disable-accent cursor-not-allowed hover:text-controls-disable-accent";
+export {
+  e as containerBaseClassName,
+  t as segmentBaseClassName,
+  l as segmentDisabledClassName,
+  s as segmentSelectedClassName,
+  a as segmentUnselectedClassName
+};

package/dist/components/Select/MultiSelectTags.js

@@ -0,0 +1,23 @@
+import { jsx as a } from "react/jsx-runtime";
+import { DialTag as m } from "../Tag/Tag.js";
+import { DialIcon as t } from "../Icon/Icon.js";
+const p = ({
+  options: i,
+  selectedValues: o,
+  handleRemoveTag: r
+}) => /* @__PURE__ */ a("div", { className: "flex flex-wrap w-full items-center gap-1", children: o.map((l) => {
+  const c = i.find((e) => e.value === l)?.label ?? l, n = i.find((e) => e.value === l)?.icon;
+  return /* @__PURE__ */ a(
+    m,
+    {
+      label: c,
+      onRemove: (e) => r?.(e, l),
+      icon: n ? /* @__PURE__ */ a(t, { icon: n }) : null,
+      className: "max-w-full"
+    },
+    l
+  );
+}) });
+export {
+  p as DialMultiSelectTags
+};