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

package/dist/components/New/SchemaRenderer/components/SchemaKeyValueEditor.js

@@ -0,0 +1,250 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as I, useMemo as A } from "react";
+import { IconPlus as Z, IconTrash as Q } from "@tabler/icons-react";
+import { GhostButton as X } from "../../Button/ButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as F } from "../../constants/icon.js";
+import { DangerIconButton as U } from "../../IconButton/IconButtonWrappers.js";
+import { Input as B } from "../../Input/Input.js";
+import { Select as D } from "../../Select/Select.js";
+import { Tooltip as ee } from "../../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as H } from "../../../../constants/icon.js";
+import { JsonSchemaType as n } from "../../../../types/json-schema.js";
+import { ElementSize as te } from "../../../../types/size.js";
+import { resolveRef as oe, isObjectType as ae, inferEntryType as le, ENTRY_TYPE_OPTIONS as re, validateRequired as ne, buildSummary as ie, extractDefaults as se, getSchemaDefault as ce, getEntryTypeDefault as me } from "../../../../utils/json-schema.js";
+import { useSchemaContext as M, isPathTouched as de } from "../context.js";
+import { SchemaFieldContent as ue } from "./SchemaFieldContent.js";
+import { SchemaJsonEditor as ye } from "./SchemaJsonEditor.js";
+import { SchemaPrimitiveField as pe } from "./SchemaPrimitiveField.js";
+import { SchemaSection as fe } from "./SchemaSection.js";
+const K = (e, s) => ({
+  id: Math.random().toString(36).slice(2),
+  key: e,
+  value: s
+}), R = (e) => !!(e.oneOf || e.anyOf || e.type === n.Array || ae(e)), he = {
+  [n.String]: "entryTypeString",
+  [n.Number]: "entryTypeNumber",
+  [n.Boolean]: "entryTypeBoolean",
+  [n.Null]: "entryTypeNull",
+  [n.Object]: "entryTypeObject",
+  [n.Array]: "entryTypeArray"
+}, _ = (e) => typeof e == "string" ? e : e[0], ve = ({
+  pair: e,
+  valueSchema: s,
+  isUnschematizedValue: m,
+  onKeyChange: g,
+  onValueChange: d,
+  onRemove: x,
+  path: c,
+  level: k
+}) => {
+  const {
+    rootSchema: p,
+    texts: o,
+    readonly: u = !1,
+    inputClassName: y,
+    defaultExpanded: T = !0,
+    touchedPaths: C,
+    markTouched: N,
+    skipUntouched: S
+  } = M(), [l, a] = I(e.key), [r, f] = I(
+    () => le(e.value)
+  ), J = R(s), j = m && (r === n.Object || r === n.Array), Y = m && r === n.Null, $ = m && r === n.Boolean, O = J || j, w = [...c, e.id, "key"].join("."), P = de(w, C, S) && e.key === "", h = e.key || o.valueColumnHeader, q = (i) => {
+    d(me(i)), f(i);
+  }, V = A(
+    () => re.map((i) => ({
+      value: i,
+      label: o[he[i]]
+    })),
+    [o]
+  ), z = A(
+    () => [
+      { value: "true", label: o.booleanTrueOption },
+      { value: "false", label: o.booleanFalseOption }
+    ],
+    [o]
+  ), G = () => Y ? /* @__PURE__ */ t(B, { "aria-label": h, value: "null", disabled: !0 }) : $ ? /* @__PURE__ */ t(
+    D,
+    {
+      ariaLabel: h,
+      options: z,
+      value: e.value ? "true" : "false",
+      disabled: u,
+      onChange: (i) => {
+        const v = _(i);
+        v && d(v === "true");
+      }
+    }
+  ) : /* @__PURE__ */ t(
+    pe,
+    {
+      schema: m ? { type: r } : s,
+      value: e.value,
+      onChange: d,
+      ariaLabel: h
+    }
+  ), E = /* @__PURE__ */ b("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ t("div", { className: O ? "min-w-0 flex-1" : "w-2/5 min-w-0", children: /* @__PURE__ */ t(
+      B,
+      {
+        "aria-label": o.keyColumnHeader,
+        value: l,
+        disabled: u,
+        invalid: P,
+        error: P ? `${o.keyColumnHeader} is required` : void 0,
+        onChange: (i) => a(i ?? ""),
+        onBlur: () => {
+          N?.(w), l !== e.key && g(l);
+        },
+        placeholder: o.keyInputPlaceholder,
+        containerClassName: y
+      }
+    ) }),
+    !O && /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: G() }),
+    m && /* @__PURE__ */ t("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ t(
+      ee,
+      {
+        tooltip: o.entryTypeChangeWarning,
+        triggerClassName: "block",
+        children: /* @__PURE__ */ t(
+          D,
+          {
+            ariaLabel: o.typeColumnHeader,
+            options: V,
+            value: r,
+            disabled: u,
+            onChange: (i) => {
+              const v = _(i);
+              v && q(v);
+            }
+          }
+        )
+      }
+    ) }),
+    !u && // The controls in this row are 40px tall; a 24px button keeps the row
+    // dense, and the margin centres it on the first line of the row.
+    /* @__PURE__ */ t(
+      U,
+      {
+        size: te.Small,
+        icon: /* @__PURE__ */ t(
+          Q,
+          {
+            size: H.SM,
+            stroke: F,
+            "aria-hidden": "true"
+          }
+        ),
+        "aria-label": e.key ? `${o.removeFieldAriaLabel}: ${e.key}` : o.removeFieldAriaLabel,
+        onClick: x,
+        className: "mt-2 shrink-0"
+      }
+    )
+  ] });
+  if (!O) return E;
+  if (j)
+    return /* @__PURE__ */ b("div", { className: "flex flex-col gap-2", children: [
+      E,
+      /* @__PURE__ */ t(
+        ye,
+        {
+          value: e.value,
+          onChange: d,
+          ariaLabel: h
+        },
+        r
+      )
+    ] });
+  const L = [...c, e.key], W = ne(
+    e.value,
+    s,
+    p,
+    L.join(".")
+  );
+  return /* @__PURE__ */ b("div", { className: "flex flex-col gap-2", children: [
+    E,
+    /* @__PURE__ */ t(
+      fe,
+      {
+        title: e.key,
+        level: k,
+        summary: ie(e.value, s, p),
+        errorCount: W.length + (P ? 1 : 0),
+        defaultExpanded: T,
+        children: /* @__PURE__ */ t(
+          ue,
+          {
+            schema: s,
+            value: e.value,
+            onChange: d,
+            path: L,
+            level: k + 1,
+            ariaLabel: h
+          }
+        )
+      }
+    )
+  ] });
+}, Ke = ({
+  schema: e,
+  value: s,
+  onChange: m,
+  path: g,
+  level: d
+}) => {
+  const { rootSchema: x, texts: c, readonly: k = !1 } = M(), p = e.additionalProperties === !0 || e.additionalProperties == null, o = !p && typeof e.additionalProperties == "object" ? oe(e.additionalProperties, x) : { type: n.String }, u = R(o), [y, T] = I(
+    () => Object.entries(s ?? {}).map(
+      ([l, a]) => K(l, a)
+    )
+  ), C = (l) => {
+    T(l), m(
+      Object.fromEntries(
+        l.filter((a) => a.key !== "").map((a) => [a.key, a.value])
+      )
+    );
+  }, N = (l, a) => C(y.map((r, f) => f === l ? { ...r, ...a } : r)), S = () => {
+    const l = u ? se(o, x) ?? ce(o) : "";
+    T((a) => [...a, K("", l)]);
+  };
+  return /* @__PURE__ */ b("div", { className: "flex flex-col gap-2", children: [
+    y.length === 0 && /* @__PURE__ */ t("p", { className: "dial-small-text text-secondary", children: c.noFieldsYet }),
+    y.length > 0 && !u && // Column headings for sighted users; each control carries its own
+    // accessible name, so the headings are hidden from assistive tech.
+    /* @__PURE__ */ b("div", { "aria-hidden": "true", className: "flex gap-2 pr-8", children: [
+      /* @__PURE__ */ t("span", { className: "w-2/5 dial-tiny-semi-text text-secondary", children: c.keyColumnHeader }),
+      /* @__PURE__ */ t("span", { className: "flex-1 dial-tiny-semi-text text-secondary", children: c.valueColumnHeader }),
+      p && /* @__PURE__ */ t("span", { className: "w-28 shrink-0 dial-tiny-semi-text text-secondary", children: c.typeColumnHeader })
+    ] }),
+    y.map((l, a) => /* @__PURE__ */ t(
+      ve,
+      {
+        pair: l,
+        valueSchema: o,
+        isUnschematizedValue: p,
+        onKeyChange: (r) => N(a, { key: r }),
+        onValueChange: (r) => N(a, { value: r }),
+        onRemove: () => C(y.filter((r, f) => f !== a)),
+        path: g,
+        level: d
+      },
+      l.id
+    )),
+    !k && /* @__PURE__ */ t("div", { className: "pt-1", children: /* @__PURE__ */ t(
+      X,
+      {
+        label: c.addField,
+        iconBefore: /* @__PURE__ */ t(
+          Z,
+          {
+            size: H.SM,
+            stroke: F,
+            "aria-hidden": "true"
+          }
+        ),
+        onClick: S
+      }
+    ) })
+  ] });
+};
+export {
+  Ke as SchemaKeyValueEditor
+};

package/dist/components/New/SchemaRenderer/components/SchemaObjectEditor.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import { resolveRef as s, sortByPropertyOrder as b, toFieldLabel as v } from "../../../../utils/json-schema.js";
+import { useSchemaContext as g } from "../context.js";
+import { SchemaField as j } from "./SchemaField.js";
+const F = ({
+  schema: c,
+  value: a,
+  onChange: d,
+  path: m,
+  level: p
+}) => {
+  const { rootSchema: r, texts: f } = g(), i = s(c, r), l = b(
+    Object.entries(i.properties ?? {}).filter(
+      ([, e]) => !s(e, r).isHidden
+    )
+  ), u = i.required ?? [], n = a ?? {};
+  return l.length === 0 ? /* @__PURE__ */ o("p", { className: "dial-small-text text-secondary", children: f.noConfigurableProperties }) : /* @__PURE__ */ o("div", { className: "flex flex-col gap-4", children: l.map(([e, t]) => {
+    const h = s(t, r);
+    return /* @__PURE__ */ o(
+      j,
+      {
+        schema: t,
+        value: n[e],
+        onChange: (x) => d({ ...n, [e]: x }),
+        path: [...m, e],
+        level: p,
+        required: u.includes(e),
+        label: h.title ?? t.title ?? v(e)
+      },
+      e
+    );
+  }) });
+};
+export {
+  F as SchemaObjectEditor
+};

package/dist/components/New/SchemaRenderer/components/SchemaOneOfEditor.js

@@ -0,0 +1,163 @@
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { useId as _ } from "react";
+import { RadioGroup as D } from "../../RadioGroup/RadioGroup.js";
+import { Select as E } from "../../Select/Select.js";
+import { SchemaDisplayMode as q, SchemaOrientation as F } from "../../../../types/json-schema.js";
+import { RadioGroupOrientation as G } from "../../../../types/radio-group.js";
+import { resolveRef as f, getOptionLabel as M, extractDefaults as T } from "../../../../utils/json-schema.js";
+import { useSchemaContext as z } from "../context.js";
+import { SchemaFieldContent as V } from "./SchemaFieldContent.js";
+import { SchemaObjectEditor as $ } from "./SchemaObjectEditor.js";
+const A = (i) => typeof i == "string" ? i : i[0], B = (i, t) => {
+  const { [t]: s, ...l } = i.properties ?? {};
+  return { ...i, properties: l };
+}, te = ({
+  schema: i,
+  value: t,
+  onChange: s,
+  path: l,
+  level: u,
+  ariaLabel: g
+}) => {
+  const { rootSchema: a, texts: v, readonly: b = !1 } = z(), R = _(), h = g ?? v.selectTypePlaceholder, j = i.discriminatorDisplay === q.Radio, y = i.discriminator;
+  if (y) {
+    const e = y.propertyName, o = y.mapping, m = (r) => f({ $ref: o[r] }, a), x = typeof t == "object" && t !== null ? t[e] : void 0, S = x ? m(x) : void 0, P = (r) => {
+      const c = T(m(r), a) ?? {};
+      s({ ...c, [e]: r });
+    };
+    if (j) {
+      const r = i.discriminatorOrientation === F.Row, c = (p) => /* @__PURE__ */ n(
+        $,
+        {
+          schema: B(p, e),
+          value: t,
+          onChange: s,
+          path: l,
+          level: u
+        }
+      ), C = /* @__PURE__ */ n(
+        D,
+        {
+          id: R,
+          ariaLabel: h,
+          value: x,
+          onChange: P,
+          disabled: b,
+          orientation: r ? G.Row : G.Column,
+          items: Object.keys(o).map((p) => {
+            const L = m(p);
+            return {
+              value: p,
+              label: L.title ?? p,
+              content: r ? void 0 : c(L)
+            };
+          })
+        }
+      );
+      return r ? /* @__PURE__ */ N("div", { className: "flex flex-col gap-3", children: [
+        C,
+        S && c(S)
+      ] }) : C;
+    }
+    return /* @__PURE__ */ N("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ n(
+        E,
+        {
+          ariaLabel: h,
+          options: Object.keys(o).map((r) => ({
+            value: r,
+            label: r
+          })),
+          value: x,
+          placeholder: v.selectTypePlaceholder,
+          disabled: b,
+          onChange: (r) => {
+            const c = A(r);
+            c && P(c);
+          },
+          className: "max-w-[280px]"
+        }
+      ),
+      S && /* @__PURE__ */ n("div", { className: "pl-3", children: /* @__PURE__ */ n(
+        $,
+        {
+          schema: S,
+          value: t,
+          onChange: s,
+          path: l,
+          level: u
+        }
+      ) })
+    ] });
+  }
+  const d = i.oneOf ?? [], O = (() => {
+    if (typeof t != "object" || t === null || Array.isArray(t))
+      return 0;
+    const e = d.findIndex(
+      (o) => f(o, a).required?.every(
+        (m) => m in t
+      )
+    );
+    return e >= 0 ? e : 0;
+  })(), I = d[O], w = (e) => {
+    const o = T(
+      f(d[e], a),
+      a
+    );
+    s(o ?? null);
+  };
+  return j ? /* @__PURE__ */ n(
+    D,
+    {
+      id: R,
+      ariaLabel: h,
+      value: String(O),
+      onChange: (e) => w(Number(e)),
+      disabled: b,
+      items: d.map((e, o) => ({
+        value: String(o),
+        label: M(e, a) ?? `Option ${o + 1}`,
+        content: /* @__PURE__ */ n(
+          V,
+          {
+            schema: f(e, a),
+            value: t,
+            onChange: s,
+            path: l,
+            level: u,
+            ariaLabel: g
+          }
+        )
+      }))
+    }
+  ) : /* @__PURE__ */ N("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ n(
+      E,
+      {
+        ariaLabel: h,
+        options: d.map((e, o) => ({
+          value: String(o),
+          label: f(e, a).title ?? `Option ${o + 1}`
+        })),
+        value: String(O),
+        disabled: b,
+        onChange: (e) => w(Number(A(e))),
+        className: "max-w-[280px]"
+      }
+    ),
+    I && /* @__PURE__ */ n("div", { className: "border-l-2 border-tertiary pl-3", children: /* @__PURE__ */ n(
+      V,
+      {
+        schema: I,
+        value: t,
+        onChange: s,
+        path: l,
+        level: u,
+        ariaLabel: g
+      }
+    ) })
+  ] });
+};
+export {
+  te as SchemaOneOfEditor
+};

package/dist/components/New/SchemaRenderer/components/SchemaPrimitiveField.js

@@ -0,0 +1,150 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Input as b } from "../../Input/Input.js";
+import { NumberInput as A } from "../../NumberInput/NumberInput.js";
+import { PasswordInput as w } from "../../PasswordInput/PasswordInput.js";
+import { RadioGroup as O } from "../../RadioGroup/RadioGroup.js";
+import { Select as I } from "../../Select/Select.js";
+import { Switch as T } from "../../Switch/Switch.js";
+import { JsonSchemaType as p, SchemaDisplayMode as v, SchemaOrientation as V } from "../../../../types/json-schema.js";
+import { RadioGroupOrientation as N } from "../../../../types/radio-group.js";
+import { useSchemaContext as F } from "../context.js";
+const R = (e) => typeof e == "string" ? e : e[0], g = (e) => e != null ? String(e) : "", B = (e) => e !== void 0 ? Number(e) : void 0, K = ({
+  schema: e,
+  value: t,
+  onChange: i,
+  invalid: c,
+  id: o,
+  ariaLabel: n
+}) => {
+  const {
+    texts: a,
+    readonly: s = !1,
+    inputClassName: u,
+    acceptableResourceTypes: C
+  } = F(), P = e.const !== void 0, d = Array.isArray(e.enum) ? e.enum : [], S = d.length > 0;
+  if (e["dial:resource"] === !0 && Array.isArray(e.acceptableResourceTypes) && e.acceptableResourceTypes.length > 0 && (e.type === p.String || e.type === void 0)) {
+    const r = (e.acceptableResourceTypes ?? []).flatMap(
+      (m) => {
+        const y = C?.[m];
+        return Array.isArray(y) ? y.map((h) => {
+          const f = String(h);
+          return { value: f, label: f };
+        }) : [];
+      }
+    );
+    return /* @__PURE__ */ l(
+      I,
+      {
+        id: o,
+        ariaLabel: n,
+        options: r,
+        value: t != null ? String(t) : void 0,
+        invalid: c,
+        disabled: s,
+        onChange: (m) => i(R(m)),
+        placeholder: a.enumSelectPlaceholder,
+        className: u
+      }
+    );
+  }
+  if (P)
+    return /* @__PURE__ */ l(
+      b,
+      {
+        id: o,
+        "aria-label": n,
+        value: String(e.const ?? ""),
+        disabled: !0,
+        containerClassName: u
+      }
+    );
+  if (S && e.enumDisplay === v.Radio)
+    return /* @__PURE__ */ l(
+      O,
+      {
+        id: o,
+        ariaLabel: n,
+        items: d.map((r) => ({ value: String(r), label: String(r) })),
+        value: t != null ? String(t) : void 0,
+        orientation: e.enumOrientation === V.Row ? N.Row : N.Column,
+        disabled: s,
+        onChange: (r) => i(r)
+      }
+    );
+  if (S)
+    return /* @__PURE__ */ l(
+      I,
+      {
+        id: o,
+        ariaLabel: n,
+        options: d.map((r) => ({
+          value: String(r),
+          label: String(r)
+        })),
+        value: t != null ? String(t) : void 0,
+        invalid: c,
+        disabled: s,
+        onChange: (r) => i(R(r)),
+        placeholder: a.enumSelectPlaceholder,
+        className: u
+      }
+    );
+  switch (e.type) {
+    case p.Boolean:
+      return /* @__PURE__ */ l(
+        T,
+        {
+          id: o,
+          "aria-label": n,
+          isOn: !!t,
+          disabled: s,
+          onChange: (r) => i(r)
+        }
+      );
+    case p.Integer:
+    case p.Number:
+      return /* @__PURE__ */ l(
+        A,
+        {
+          id: o,
+          "aria-label": n,
+          integer: e.type === p.Integer,
+          value: g(t),
+          invalid: c,
+          disabled: s,
+          onChange: (r) => i(B(r)),
+          placeholder: e.type === p.Integer ? a.integerInputPlaceholder : a.numberInputPlaceholder,
+          containerClassName: u
+        }
+      );
+    default:
+      return e.isProtected ? /* @__PURE__ */ l(
+        w,
+        {
+          id: o,
+          "aria-label": n,
+          value: g(t),
+          invalid: c,
+          disabled: s,
+          onChange: (r) => i(r ?? void 0),
+          placeholder: a.stringInputPlaceholder,
+          containerClassName: u
+        }
+      ) : /* @__PURE__ */ l(
+        b,
+        {
+          id: o,
+          "aria-label": n,
+          value: g(t),
+          invalid: c,
+          disabled: s,
+          onChange: (r) => i(r ?? void 0),
+          placeholder: a.stringInputPlaceholder,
+          containerClassName: u
+        }
+      );
+  }
+};
+export {
+  K as SchemaPrimitiveField
+};