@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.9

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

@@ -1,184 +1,272 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import { useState as T } from "react";
-import { IconPlus as K } from "@tabler/icons-react";
-import { DialInput as A } from "../../Input/Input.js";
-import { DialErrorText as V } from "../../CaptionText/CaptionText.js";
-import { DialGhostButton as z } from "../../Button/ButtonWrappers.js";
-import { DialRemoveButton as H } from "../../RemoveButton/RemoveButton.js";
-import { ElementSize as q } from "../../../types/size.js";
-import { JsonSchemaType as L } from "../types.js";
-import { useSchemaContext as E } from "../context.js";
-import { resolveRef as G, isObjectType as J, buildSummary as M, validateRequired as U, extractDefaults as Y, getSchemaDefault as _ } from "../utils.js";
-import { SchemaPrimitiveField as $ } from "./SchemaPrimitiveField.js";
-import { SchemaSection as Q } from "./SchemaSection.js";
-import { SchemaFieldContent as W } from "./SchemaFieldContent.js";
-const R = (n, i) => ({
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { useState as R, useCallback as U, useMemo as M } from "react";
+import { IconPlus as V } from "@tabler/icons-react";
+import { DialInput as L } from "../../Input/Input.js";
+import { DialErrorText as ee } from "../../CaptionText/CaptionText.js";
+import { DialGhostButton as te } from "../../Button/ButtonWrappers.js";
+import { DialRemoveButton as oe } from "../../RemoveButton/RemoveButton.js";
+import { DialSelect as Y } from "../../Select/Select.js";
+import { DialTooltip as ne } from "../../Tooltip/Tooltip.js";
+import { ElementSize as re } from "../../../types/size.js";
+import { JsonSchemaType as c } from "../types.js";
+import { useSchemaContext as q } from "../context.js";
+import { resolveRef as le, isObjectType as ae, inferEntryType as ie, getEntryTypeDefault as se, ENTRY_TYPE_OPTIONS as ce, buildSummary as de, validateRequired as me, extractDefaults as pe, getSchemaDefault as ye } from "../utils.js";
+import { SchemaPrimitiveField as ue } from "./SchemaPrimitiveField.js";
+import { SchemaSection as fe } from "./SchemaSection.js";
+import { SchemaFieldContent as he } from "./SchemaFieldContent.js";
+import { SchemaAdditionalPropertiesEditor as be } from "./SchemaAdditionalPropertiesEditor.js";
+const _ = (l, d) => ({
   id: Math.random().toString(36).slice(2),
-  key: n,
-  value: i
-}), F = (n) => !!(n.oneOf || n.anyOf || n.type === L.Array || J(n)), X = ({
-  pairId: n,
-  pairKey: i,
-  pairValue: s,
-  valueSchema: c,
-  onKeyChange: k,
+  key: l,
+  value: d
+}), J = (l) => !!(l.oneOf || l.anyOf || l.type === c.Array || ae(l)), ve = {
+  [c.String]: "entryTypeString",
+  [c.Number]: "entryTypeNumber",
+  [c.Boolean]: "entryTypeBoolean",
+  [c.Null]: "entryTypeNull",
+  [c.Object]: "entryTypeObject",
+  [c.Array]: "entryTypeArray"
+}, xe = ({
+  pairId: l,
+  pairKey: d,
+  pairValue: i,
+  valueSchema: u,
+  isUnschematizedValue: f,
+  jsonEditorTheme: C,
+  onKeyChange: m,
   onValueChange: p,
-  onRemove: d,
-  keyInputPlaceholder: x,
-  removeFieldAriaLabel: C,
-  path: m,
-  level: h,
-  readonly: l = !1,
-  inputClassName: u
+  onRemove: P,
+  keyInputPlaceholder: O,
+  removeFieldAriaLabel: T,
+  path: h,
+  level: N,
+  readonly: s = !1,
+  inputClassName: b
 }) => {
   const {
-    rootSchema: f,
-    texts: g,
-    defaultExpanded: N = !0,
-    touchedPaths: S = /* @__PURE__ */ new Set(),
-    markTouched: b = () => {
+    rootSchema: v,
+    texts: y,
+    defaultExpanded: E = !0,
+    touchedPaths: j = /* @__PURE__ */ new Set(),
+    markTouched: w = () => {
     },
-    skipUntouched: P = !1
-  } = E(), [e, t] = T(i), o = F(c), r = [...m, n, "key"].join("."), w = (!P || S.has(r)) && i === "", j = /* @__PURE__ */ y("div", { className: "flex gap-2 items-start", children: [
-    /* @__PURE__ */ y("div", { className: o ? "flex-1 min-w-0" : "w-2/5 min-w-0", children: [
-      /* @__PURE__ */ a(
-        A,
+    skipUntouched: D = !1
+  } = q(), [t, o] = R(d), a = J(u), [n, g] = R(
+    () => ie(i)
+  ), B = f && (n === c.Object || n === c.Array), $ = f && n === c.Null, F = a || B, I = [...h, l, "key"].join("."), S = (!D || j.has(I)) && d === "", z = U(
+    (r) => {
+      p(se(r)), g(r);
+    },
+    [p]
+  ), G = M(
+    () => ce.map((r) => ({
+      value: r,
+      label: y[ve[r]]
+    })),
+    [y]
+  ), W = M(
+    () => [
+      { value: "true", label: y.booleanTrueOption },
+      { value: "false", label: y.booleanFalseOption }
+    ],
+    [y]
+  ), K = `${l}-key-error`, Q = f && n === c.Boolean, A = /* @__PURE__ */ x("div", { className: "flex gap-2 items-start", children: [
+    /* @__PURE__ */ x("div", { className: F ? "flex-1 min-w-0" : "w-2/5 min-w-0", children: [
+      /* @__PURE__ */ e(
+        L,
         {
-          value: e,
-          disabled: l,
-          invalid: w,
-          onChange: (I) => t(I ?? ""),
+          value: t,
+          disabled: s,
+          invalid: S,
+          "aria-describedby": S ? K : void 0,
+          onChange: (r) => o(r ?? ""),
           onBlur: () => {
-            b(r), e !== i && k(e);
+            w(I), t !== d && m(t);
           },
-          placeholder: x,
-          containerClassName: u
+          placeholder: O,
+          containerClassName: b
         }
       ),
-      /* @__PURE__ */ a(
-        V,
+      /* @__PURE__ */ e(
+        ee,
         {
-          text: w ? `${g.keyColumnHeader} is required` : void 0
+          id: K,
+          text: S ? `${y.keyColumnHeader} is required` : void 0
         }
       )
     ] }),
-    !o && /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ a(
-      $,
+    !a && !B && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: $ ? /* @__PURE__ */ e(
+      L,
+      {
+        value: "null",
+        disabled: !0,
+        onChange: void 0,
+        className: "opacity-60"
+      }
+    ) : Q ? /* @__PURE__ */ e(
+      Y,
       {
-        schema: c,
-        value: s,
+        options: W,
+        value: i ? "true" : "false",
+        disabled: s,
+        onChange: (r) => {
+          const k = typeof r == "string" ? r : r[0];
+          k && p(k === "true");
+        }
+      }
+    ) : /* @__PURE__ */ e(
+      ue,
+      {
+        schema: f ? { type: n } : u,
+        value: i,
         onChange: p
       }
     ) }),
-    !l && /* @__PURE__ */ a(
-      H,
+    f && /* @__PURE__ */ e("div", { className: "w-28 shrink-0", children: /* @__PURE__ */ e(
+      ne,
+      {
+        tooltip: y.entryTypeChangeWarning,
+        triggerClassName: "block",
+        children: /* @__PURE__ */ e(
+          Y,
+          {
+            options: G,
+            value: n,
+            disabled: s,
+            onChange: (r) => {
+              const k = typeof r == "string" ? r : r[0];
+              k && z(k);
+            }
+          }
+        )
+      }
+    ) }),
+    !s && /* @__PURE__ */ e(
+      oe,
       {
-        size: q.Small,
-        onClick: d,
-        "aria-label": C,
+        size: re.Small,
+        onClick: P,
+        "aria-label": T,
         className: "shrink-0 p-1"
       }
     )
   ] });
-  if (!o) return j;
-  const D = [...m, i], O = M(s, c, f), B = U(
-    s,
-    c,
-    f,
-    D.join(".")
+  if (!F) return A;
+  if (B)
+    return /* @__PURE__ */ x("div", { className: "flex flex-col gap-2", children: [
+      A,
+      /* @__PURE__ */ e(
+        be,
+        {
+          value: i,
+          onChange: p,
+          theme: C
+        },
+        n
+      )
+    ] });
+  const H = [...h, d], X = de(i, u, v), Z = me(
+    i,
+    u,
+    v,
+    H.join(".")
   );
-  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-2", children: [
-    j,
-    /* @__PURE__ */ a(
-      Q,
+  return /* @__PURE__ */ x("div", { className: "flex flex-col gap-2", children: [
+    A,
+    /* @__PURE__ */ e(
+      fe,
       {
-        title: i,
-        level: h,
-        summary: O,
-        errorCount: B.length + (w ? 1 : 0),
-        defaultExpanded: N,
-        children: /* @__PURE__ */ a(
-          W,
+        title: d,
+        level: N,
+        summary: X,
+        errorCount: Z.length + (S ? 1 : 0),
+        defaultExpanded: E,
+        children: /* @__PURE__ */ e(
+          he,
           {
-            schema: c,
-            value: s,
+            schema: u,
+            value: i,
             onChange: p,
-            path: D,
-            level: h + 1
+            path: H,
+            level: N + 1
           }
         )
       }
     )
   ] });
-}, fe = ({
-  schema: n,
-  value: i,
-  onChange: s,
-  path: c,
-  level: k
+}, He = ({
+  schema: l,
+  value: d,
+  onChange: i,
+  path: u,
+  level: f
 }) => {
   const {
-    rootSchema: p,
-    texts: d,
-    readonly: x = !1,
-    inputClassName: C
-  } = E(), m = n.additionalProperties === !0 || n.additionalProperties == null ? { type: "string" } : typeof n.additionalProperties == "object" ? G(n.additionalProperties, p) : { type: "string" }, h = F(m), [l, u] = T(
-    () => Object.entries(i ?? {}).map(
-      ([e, t]) => R(e, t)
+    rootSchema: C,
+    texts: m,
+    readonly: p = !1,
+    inputClassName: P,
+    jsonEditorTheme: O
+  } = q(), T = l.additionalProperties === !0 || l.additionalProperties == null, h = T ? { type: "string" } : typeof l.additionalProperties == "object" ? le(l.additionalProperties, C) : { type: "string" }, N = J(h), [s, b] = R(
+    () => Object.entries(d ?? {}).map(
+      ([t, o]) => _(t, o)
     )
-  ), f = (e) => Object.fromEntries(
-    e.filter((t) => t.key !== "").map((t) => [t.key, t.value])
-  ), g = (e, t) => {
-    const o = l.map(
-      (r, v) => v === e ? { ...r, key: t } : r
+  ), v = (t) => Object.fromEntries(
+    t.filter((o) => o.key !== "").map((o) => [o.key, o.value])
+  ), y = (t, o) => {
+    const a = s.map(
+      (n, g) => g === t ? { ...n, key: o } : n
     );
-    u(o), s(f(o));
-  }, N = (e, t) => {
-    const o = l.map(
-      (r, v) => v === e ? { ...r, value: t } : r
+    b(a), i(v(a));
+  }, E = (t, o) => {
+    const a = s.map(
+      (n, g) => g === t ? { ...n, value: o } : n
     );
-    u(o), s(f(o));
-  }, S = () => h ? Y(m, p) ?? _(m) : "", b = () => {
-    u((e) => [...e, R("", S())]);
-  }, P = (e) => {
-    const t = l.filter((o, r) => r !== e);
-    u(t), s(f(t));
+    b(a), i(v(a));
+  }, j = () => N ? pe(h, C) ?? ye(h) : "", w = () => {
+    b((t) => [...t, _("", j())]);
+  }, D = (t) => {
+    const o = s.filter((a, n) => n !== t);
+    b(o), i(v(o));
   };
-  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-2", children: [
-    l.length === 0 && /* @__PURE__ */ a("p", { className: "dial-tiny-text text-secondary italic", children: d.noFieldsYet }),
-    l.length > 0 && !h && /* @__PURE__ */ y("div", { className: "flex gap-2 mb-1 pr-7", children: [
-      /* @__PURE__ */ a("span", { className: "w-2/5 dial-tiny-text text-secondary font-medium", children: d.keyColumnHeader }),
-      /* @__PURE__ */ a("span", { className: "flex-1 dial-tiny-text text-secondary font-medium", children: d.valueColumnHeader })
+  return /* @__PURE__ */ x("div", { className: "flex flex-col gap-2", children: [
+    s.length === 0 && /* @__PURE__ */ e("p", { className: "dial-tiny-text text-secondary italic", children: m.noFieldsYet }),
+    s.length > 0 && !N && /* @__PURE__ */ x("div", { className: "flex gap-2 mb-1 pr-7", children: [
+      /* @__PURE__ */ e("span", { className: "w-2/5 dial-tiny-text text-secondary font-medium", children: m.keyColumnHeader }),
+      /* @__PURE__ */ e("span", { className: "flex-1 dial-tiny-text text-secondary font-medium", children: m.valueColumnHeader }),
+      T && /* @__PURE__ */ e("span", { className: "w-28 shrink-0 dial-tiny-text text-secondary font-medium", children: m.typeColumnHeader })
     ] }),
-    l.map((e, t) => /* @__PURE__ */ a(
-      X,
+    s.map((t, o) => /* @__PURE__ */ e(
+      xe,
       {
-        pairId: e.id,
-        pairKey: e.key,
-        pairValue: e.value,
-        valueSchema: m,
-        onKeyChange: (o) => g(t, o),
-        onValueChange: (o) => N(t, o),
-        onRemove: () => P(t),
-        keyInputPlaceholder: d.keyInputPlaceholder,
-        removeFieldAriaLabel: d.removeFieldAriaLabel,
-        path: c,
-        level: k,
-        readonly: x,
-        inputClassName: C
+        pairId: t.id,
+        pairKey: t.key,
+        pairValue: t.value,
+        valueSchema: h,
+        isUnschematizedValue: T,
+        jsonEditorTheme: O,
+        onKeyChange: (a) => y(o, a),
+        onValueChange: (a) => E(o, a),
+        onRemove: () => D(o),
+        keyInputPlaceholder: m.keyInputPlaceholder,
+        removeFieldAriaLabel: m.removeFieldAriaLabel,
+        path: u,
+        level: f,
+        readonly: p,
+        inputClassName: P
       },
-      e.id
+      t.id
     )),
-    !x && /* @__PURE__ */ a("div", { className: "pt-1", children: /* @__PURE__ */ a(
-      z,
+    !p && /* @__PURE__ */ e("div", { className: "pt-1", children: /* @__PURE__ */ e(
+      te,
       {
-        label: d.addField,
-        iconBefore: /* @__PURE__ */ a(K, { size: 16, stroke: 2 }),
-        onClick: b
+        label: m.addField,
+        iconBefore: /* @__PURE__ */ e(V, { size: 16, stroke: 2 }),
+        onClick: w
       }
     ) })
   ] });
 };
 export {
-  fe as SchemaKeyValueEditor
+  He as SchemaKeyValueEditor
 };

package/dist/components/SchemaRenderer/types.js

@@ -1,5 +1,5 @@
-var t = /* @__PURE__ */ ((e) => (e.Sections = "sections", e.Flat = "flat", e.FlatSections = "flat-sections", e))(t || {}), l = /* @__PURE__ */ ((e) => (e.Select = "select", e.Radio = "radio", e))(l || {}), r = /* @__PURE__ */ ((e) => (e.Row = "row", e.Column = "column", e))(r || {}), o = /* @__PURE__ */ ((e) => (e.String = "string", e.Number = "number", e.Integer = "integer", e.Boolean = "boolean", e.Object = "object", e.Array = "array", e.Null = "null", e))(o || {});
-const n = {
+var r = /* @__PURE__ */ ((e) => (e.Sections = "sections", e.Flat = "flat", e.FlatSections = "flat-sections", e))(r || {}), t = /* @__PURE__ */ ((e) => (e.Select = "select", e.Radio = "radio", e))(t || {}), l = /* @__PURE__ */ ((e) => (e.Row = "row", e.Column = "column", e))(l || {}), n = /* @__PURE__ */ ((e) => (e.String = "string", e.Number = "number", e.Integer = "integer", e.Boolean = "boolean", e.Object = "object", e.Array = "array", e.Null = "null", e))(n || {});
+const o = {
   noItemSchema: "No item schema defined.",
   noItemsYet: "No items yet. Add one below.",
   addItem: "Add Item",
@@ -16,12 +16,23 @@ const n = {
   enumSelectPlaceholder: "Select an option",
   selectTypePlaceholder: "Select type",
   removeItemAriaLabel: "Remove item",
-  removeFieldAriaLabel: "Remove field"
+  removeFieldAriaLabel: "Remove field",
+  typeColumnHeader: "Type",
+  entryTypeString: "String",
+  entryTypeNumber: "Number",
+  entryTypeBoolean: "Boolean",
+  entryTypeNull: "Null",
+  entryTypeObject: "Object",
+  entryTypeArray: "Array",
+  entryTypeChangeWarning: "Changing type will reset the current value.",
+  booleanTrueOption: "True",
+  booleanFalseOption: "False",
+  invalidJsonError: "Invalid JSON"
 };
 export {
-  n as DEFAULT_SCHEMA_TEXTS,
-  o as JsonSchemaType,
-  l as SchemaDisplayMode,
-  r as SchemaOrientation,
-  t as SchemaRendererVariant
+  o as DEFAULT_SCHEMA_TEXTS,
+  n as JsonSchemaType,
+  t as SchemaDisplayMode,
+  l as SchemaOrientation,
+  r as SchemaRendererVariant
 };