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

package/dist/components/New/RadioGroupPopupField/RadioGroupPopupField.js

@@ -1,138 +1,149 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import { IconMaximize as oo } from "@tabler/icons-react";
-import { useId as eo, useState as j, useCallback as l } from "react";
-import { NeutralButton as ao, PrimaryButton as lo } from "../Button/ButtonWrappers.js";
-import { ErrorText as to, CaptionText as io } from "../CaptionText/CaptionText.js";
+import { useId as eo, useState as S, useCallback as i } from "react";
+import { NeutralButton as ao, PrimaryButton as io } from "../Button/ButtonWrappers.js";
+import { ErrorText as lo, CaptionText as to } from "../CaptionText/CaptionText.js";
 import { Label as ro } from "../Label/Label.js";
 import { Popup as so } from "../Popup/Popup.js";
 import { RadioGroup as no } from "../RadioGroup/RadioGroup.js";
-import { DIAL_KIT_ICON_STROKE as co } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as po } from "../../../constants/icon.js";
+import { DIAL_KIT_ICON_STROKE as po } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as co } from "../../../constants/icon.js";
 import { PopupSize as mo } from "../../../types/popup.js";
 import { RadioGroupOrientation as fo } from "../../../types/radio-group.js";
-import { mergeClasses as z } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as N } from "../../../utils/accessible-name.js";
-import { fieldPlaceholderClassName as uo, fieldValueClassName as No, fieldIconClassName as bo, fieldBaseClassName as Io, popupBodyClassName as Co, popupFooterClassName as xo, defaultCancelLabel as ho, defaultApplyLabel as vo } from "./constants.js";
-const Eo = ({
-  items: b,
-  value: t,
-  customValue: A,
-  header: I,
+import { mergeClasses as F } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as I } from "../../../utils/accessible-name.js";
+import { fieldPlaceholderClassName as uo, fieldValueClassName as Io, fieldIconClassName as No, fieldBaseClassName as bo, popupBodyClassName as Co, popupFooterClassName as xo, defaultCancelLabel as ho, defaultApplyLabel as vo } from "./constants.js";
+import { DIAL_KIT_CLASS as Lo } from "../../../constants/public-class-names.js";
+const zo = ({
+  items: N,
+  value: l,
+  customValue: G,
+  header: b,
   onApply: C,
-  id: E,
-  labelProps: p,
-  placeholder: F,
+  id: R,
+  labelProps: c,
+  placeholder: j,
   selectedValue: x,
   onSelectionChange: h,
   onCancel: v,
   onClose: L,
-  isValid: G = !0,
-  applyButtonLabel: M = vo,
-  cancelButtonLabel: S = ho,
-  size: K = mo.Md,
+  isValid: z = !0,
+  applyButtonLabel: E = vo,
+  cancelButtonLabel: K = ho,
+  size: M = mo.Md,
   portalId: w,
-  disabled: i,
+  disabled: t,
   invalid: U,
   error: r,
-  caption: $,
+  caption: D,
   ariaLabel: V,
   className: Z,
   fieldClassName: q
 }) => {
-  const H = eo(), e = E ?? H, k = `${e}-label`, y = `${e}-value`, D = r ? `${e}-error` : void 0, O = !r && $ ? `${e}-caption` : void 0, [T, g] = j(!1), a = x !== void 0, [J, B] = j(t), m = a ? x : J, Q = l(() => {
-    i || (a || B(t), g(!0));
-  }, [i, a, t]), s = l(() => {
-    g(!1), L?.();
-  }, [L]), P = l(() => {
+  const H = eo(), e = R ?? H, $ = `${e}-label`, k = `${e}-value`, y = r ? `${e}-error` : void 0, T = !r && D ? `${e}-caption` : void 0, [_, O] = S(!1), a = x !== void 0, [J, P] = S(l), m = a ? x : J, Q = i(() => {
+    t || (a || P(l), O(!0));
+  }, [t, a, l]), s = i(() => {
+    O(!1), L?.();
+  }, [L]), g = i(() => {
     v?.(), s();
-  }, [v, s]), W = l(() => {
+  }, [v, s]), W = i(() => {
     C(m), s();
-  }, [C, m, s]), X = l(
+  }, [C, m, s]), X = i(
     (d) => {
-      a || B(d), h?.(d);
+      a || P(d), h?.(d);
     },
     [a, h]
-  ), n = N(p?.label), f = n ? void 0 : N(V), u = n ? k : f && `${e}-name`, _ = N(I), Y = b.find((d) => d.value === t)?.label, R = A ?? Y;
-  return /* @__PURE__ */ c("div", { className: z("flex w-full flex-col gap-2", Z), children: [
-    p && /* @__PURE__ */ o(ro, { ...p, id: k, htmlFor: e }),
-    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
-      f && /* @__PURE__ */ o("span", { id: u, className: "sr-only", children: f }),
-      /* @__PURE__ */ c(
-        "button",
-        {
-          type: "button",
-          id: e,
-          disabled: i,
-          "aria-haspopup": "dialog",
-          "aria-expanded": T,
-          "aria-labelledby": u ? `${u} ${y}` : void 0,
-          "aria-describedby": [D, O].filter(Boolean).join(" ") || void 0,
-          onClick: Q,
-          className: z(
-            Io,
-            U && "dial-kit-input-error",
-            i && "dial-kit-input-disable",
-            q
-          ),
-          children: [
-            /* @__PURE__ */ o(
-              "span",
-              {
-                id: y,
-                className: R == null ? uo : No,
-                children: R ?? F
-              }
-            ),
-            /* @__PURE__ */ o(
-              oo,
-              {
-                size: po.MD,
-                stroke: co,
-                "aria-hidden": "true",
-                className: bo
-              }
-            )
-          ]
-        }
+  ), n = I(c?.label), f = n ? void 0 : I(V), u = n ? $ : f && `${e}-name`, A = I(b), Y = N.find((d) => d.value === l)?.label, B = G ?? Y;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: F(
+        "flex w-full flex-col gap-2",
+        Z,
+        Lo.radioGroupPopupField
       ),
-      /* @__PURE__ */ o(to, { id: D, text: r }),
-      !r && /* @__PURE__ */ o(io, { id: O, text: $ })
-    ] }),
-    /* @__PURE__ */ o(
-      so,
-      {
-        open: T,
-        header: I,
-        ariaLabel: _ ? void 0 : n,
-        portalId: w,
-        size: K,
-        onClose: P,
-        footer: /* @__PURE__ */ c("div", { className: xo, children: [
-          /* @__PURE__ */ o(ao, { label: S, onClick: P }),
-          /* @__PURE__ */ o(
-            lo,
+      children: [
+        c && /* @__PURE__ */ o(ro, { ...c, id: $, htmlFor: e }),
+        /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
+          f && /* @__PURE__ */ o("span", { id: u, className: "sr-only", children: f }),
+          /* @__PURE__ */ p(
+            "button",
             {
-              label: M,
-              disabled: !G,
-              onClick: W
+              type: "button",
+              id: e,
+              disabled: t,
+              "aria-haspopup": "dialog",
+              "aria-expanded": _,
+              "aria-labelledby": u ? `${u} ${k}` : void 0,
+              "aria-describedby": [y, T].filter(Boolean).join(" ") || void 0,
+              onClick: Q,
+              className: F(
+                bo,
+                U && "dial-kit-input-error",
+                t && "dial-kit-input-disable",
+                q
+              ),
+              children: [
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    id: k,
+                    className: B == null ? uo : Io,
+                    children: B ?? j
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  oo,
+                  {
+                    size: co.MD,
+                    stroke: po,
+                    "aria-hidden": "true",
+                    className: No
+                  }
+                )
+              ]
             }
-          )
+          ),
+          /* @__PURE__ */ o(lo, { id: y, text: r }),
+          !r && /* @__PURE__ */ o(to, { id: T, text: D })
         ] }),
-        children: /* @__PURE__ */ o("div", { className: Co, children: /* @__PURE__ */ o(
-          no,
+        /* @__PURE__ */ o(
+          so,
           {
-            id: `${e}-options`,
-            items: b,
-            value: m,
-            onChange: X,
-            orientation: fo.Column,
-            ariaLabel: n ?? _
+            open: _,
+            header: b,
+            ariaLabel: A ? void 0 : n,
+            portalId: w,
+            size: M,
+            onClose: g,
+            footer: /* @__PURE__ */ p("div", { className: xo, children: [
+              /* @__PURE__ */ o(ao, { label: K, onClick: g }),
+              /* @__PURE__ */ o(
+                io,
+                {
+                  label: E,
+                  disabled: !z,
+                  onClick: W
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ o("div", { className: Co, children: /* @__PURE__ */ o(
+              no,
+              {
+                id: `${e}-options`,
+                items: N,
+                value: m,
+                onChange: X,
+                orientation: fo.Column,
+                ariaLabel: n ?? A
+              }
+            ) })
           }
-        ) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 export {
-  Eo as RadioGroupPopupField
+  zo as RadioGroupPopupField
 };

package/dist/components/New/ResizableContainer/ResizableContainer.js

@@ -1,56 +1,57 @@
 import { jsx as c } from "react/jsx-runtime";
-import { Resizable as A } from "../../../node_modules/re-resizable/lib/index.js";
-import { useState as M, useRef as B, useCallback as d, useMemo as D } from "react";
-import { ResizableContainerSide as w } from "../../../types/resizable-container.js";
-import { mergeClasses as L } from "../../../utils/merge-classes.js";
-import { ResizeHandle as T } from "./components/ResizeHandle.js";
-const j = 16, q = ({
-  children: x,
-  minWidth: n,
+import { Resizable as E } from "../../../node_modules/re-resizable/lib/index.js";
+import { useState as I, useRef as H, useCallback as d, useMemo as T } from "react";
+import { ResizableContainerSide as _ } from "../../../types/resizable-container.js";
+import { mergeClasses as y } from "../../../utils/merge-classes.js";
+import { ResizeHandle as B } from "./components/ResizeHandle.js";
+import { DIAL_KIT_CLASS as K } from "../../../constants/public-class-names.js";
+const j = 16, J = ({
+  children: M,
+  minWidth: r,
   maxWidth: s,
   width: h,
-  defaultWidth: I,
+  defaultWidth: w,
   onResizeStop: i,
   onResize: l,
-  side: a = w.Right,
+  side: a = _.Right,
   keyboardStep: u = j,
   ariaLabel: g = "Resize panel",
-  className: _,
+  className: x,
   resizeHandlerClassName: p,
   resizeHandler: z
 }) => {
-  const [m, C] = M(!1), [E, R] = M(I ?? n), r = h !== void 0, o = r ? h : E, f = B(null), b = d(() => {
+  const [m, C] = I(!1), [A, R] = I(w ?? r), n = h !== void 0, o = n ? h : A, f = H(null), S = d(() => {
     C(!0);
-  }, []), v = d(() => {
+  }, []), b = d(() => {
     C(!1);
-    const t = f.current?.resizable?.getBoundingClientRect(), e = t ? Math.round(t.width) : n;
-    r || R(e), i?.(e);
-  }, [i, r, n]), S = d(
+    const t = f.current?.resizable?.getBoundingClientRect(), e = t ? Math.round(t.width) : r;
+    n || R(e), i?.(e);
+  }, [i, n, r]), v = d(
     (t) => {
-      const e = Math.min(s, Math.max(n, t));
-      e !== o && (r || (R(e), f.current?.updateSize({ width: e, height: "100%" })), l?.(e), i?.(e));
+      const e = Math.min(s, Math.max(r, t));
+      e !== o && (n || (R(e), f.current?.updateSize({ width: e, height: "100%" })), l?.(e), i?.(e));
     },
-    [s, n, o, r, l, i]
-  ), H = D(() => {
-    const t = a === w.Left, e = /* @__PURE__ */ c(
-      T,
+    [s, r, o, n, l, i]
+  ), L = T(() => {
+    const t = a === _.Left, e = /* @__PURE__ */ c(
+      B,
       {
         side: a,
         isResizing: m,
         width: o,
-        minWidth: n,
+        minWidth: r,
         maxWidth: s,
         step: u,
         ariaLabel: g,
-        onWidthChange: S,
+        onWidthChange: v,
         customHandler: z,
         handlerClassName: p
       }
     );
     return {
-      size: r ? { width: o, height: "100%" } : void 0,
-      defaultSize: r ? void 0 : { width: o, height: "100%" },
-      minWidth: n,
+      size: n ? { width: o, height: "100%" } : void 0,
+      defaultSize: n ? void 0 : { width: o, height: "100%" },
+      minWidth: r,
       maxWidth: s,
       enable: {
         left: t,
@@ -68,39 +69,40 @@ const j = 16, q = ({
         left: t ? e : void 0,
         right: t ? void 0 : e
       },
-      onResizeStart: b,
-      onResize: (k, F, y) => {
-        l?.(Math.round(y.offsetWidth));
+      onResizeStart: S,
+      onResize: (k, F, D) => {
+        l?.(Math.round(D.offsetWidth));
       },
-      onResizeStop: v
+      onResizeStop: b
     };
   }, [
     a,
-    r,
-    o,
     n,
+    o,
+    r,
     s,
     u,
     g,
-    S,
+    v,
     z,
     p,
     m,
+    S,
     b,
-    v,
     l
   ]);
-  return /* @__PURE__ */ c(A, { ref: f, ...H, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ c(E, { ref: f, ...L, children: /* @__PURE__ */ c(
     "div",
     {
-      className: L(
+      className: y(
         "group flex size-full flex-col bg-layer-raised transition-all motion-reduce:transition-none",
-        _
+        x,
+        K.resizableContainer
       ),
-      children: x
+      children: M
     }
   ) });
 };
 export {
-  q as ResizableContainer
+  J as ResizableContainer
 };

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

@@ -0,0 +1,164 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { useMemo as b, useState as L, useCallback as Q, useEffect as U } from "react";
+import { DEFAULT_SCHEMA_TEXTS as W } from "../../../constants/schema-renderer.js";
+import { DIAL_KIT_CLASS as Y } from "../../../constants/public-class-names.js";
+import { SchemaRendererVariant as c } from "../../../types/json-schema.js";
+import { extractDefaults as Z, sortByPropertyOrder as $, resolveRef as P, toFieldLabel as R, validateRequired as y, isMissingRequiredValue as k } from "../../../utils/json-schema.js";
+import { mergeClasses as ee } from "../../../utils/merge-classes.js";
+import { SchemaField as re } from "./components/SchemaField.js";
+import { SchemaFieldContent as q } from "./components/SchemaFieldContent.js";
+import { SchemaJsonEditor as te } from "./components/SchemaJsonEditor.js";
+import { SchemaSection as T } from "./components/SchemaSection.js";
+import { SchemaRendererContext as oe, isPathTouched as le } from "./context.js";
+const F = "dial-small-semi-text text-primary", ge = ({
+  schema: t,
+  defaultValue: f,
+  texts: p,
+  className: N,
+  readonly: j = !1,
+  defaultExpanded: m = !0,
+  inputClassName: A,
+  variant: d = c.Sections,
+  onChange: M,
+  onPropertyChange: O,
+  onDefaultValues: _,
+  renderField: D,
+  skipUntouched: S = !1,
+  acceptableResourceTypes: E
+}) => {
+  const H = b(
+    () => ({ ...W, ...p }),
+    [p]
+  ), g = b(() => f || (Z(t, t) ?? {}), []), [n, K] = L(g), [C, V] = L(
+    () => /* @__PURE__ */ new Set()
+  ), w = Q((e) => {
+    V(
+      (r) => r.has(e) ? r : /* @__PURE__ */ new Set([...r, e])
+    );
+  }, []);
+  U(() => {
+    _?.(g);
+  }, []);
+  const v = (e, r) => {
+    const o = { ...n, [e]: r };
+    K(o), M?.(o), O?.(e, r);
+  }, I = new Set(Object.keys(t.properties ?? {})), B = Object.keys(n).filter(
+    (e) => !I.has(e)
+  ), J = $(
+    Object.entries(t.properties ?? {}).filter(
+      ([, e]) => !P(e, t).isHidden
+    )
+  ), X = t.required ?? [];
+  return /* @__PURE__ */ l(
+    oe.Provider,
+    {
+      value: {
+        rootSchema: t,
+        texts: H,
+        readonly: j,
+        defaultExpanded: m,
+        inputClassName: A,
+        acceptableResourceTypes: E,
+        renderField: D,
+        touchedPaths: C,
+        markTouched: w,
+        skipUntouched: S
+      },
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          className: ee(
+            "flex flex-col gap-4",
+            N,
+            Y.schemaRenderer
+          ),
+          children: [
+            J.map(([e, r]) => {
+              const o = P(r, t), s = o.title ?? r.title ?? R(e), a = X.includes(e), i = n[e], u = (G) => v(e, G);
+              if (d === c.Flat)
+                return /* @__PURE__ */ l(
+                  re,
+                  {
+                    schema: r,
+                    value: i,
+                    onChange: u,
+                    path: [e],
+                    level: 0,
+                    required: a,
+                    label: s
+                  },
+                  e
+                );
+              if (d === c.FlatSections)
+                return /* @__PURE__ */ h("section", { className: "flex flex-col gap-3", children: [
+                  /* @__PURE__ */ l("h2", { className: F, children: s }),
+                  /* @__PURE__ */ l(
+                    q,
+                    {
+                      schema: r,
+                      value: i,
+                      onChange: u,
+                      path: [e],
+                      level: 0,
+                      required: a,
+                      ariaLabel: s
+                    }
+                  )
+                ] }, e);
+              const x = y(i, o, t, e), z = a && k(i) ? Math.max(x.length, 1) : x.length;
+              return /* @__PURE__ */ l(
+                T,
+                {
+                  title: s,
+                  description: o.description,
+                  level: 0,
+                  defaultExpanded: m,
+                  errorCount: le(e, C, S, !0) ? z : 0,
+                  children: /* @__PURE__ */ l(
+                    q,
+                    {
+                      schema: r,
+                      value: i,
+                      onChange: u,
+                      path: [e],
+                      level: 1,
+                      required: a,
+                      ariaLabel: s
+                    }
+                  )
+                },
+                e
+              );
+            }),
+            B.map((e) => {
+              const r = R(e), o = /* @__PURE__ */ l(
+                te,
+                {
+                  value: n[e],
+                  onChange: (s) => v(e, s),
+                  ariaLabel: r
+                }
+              );
+              return d === c.Sections ? /* @__PURE__ */ l(
+                T,
+                {
+                  title: r,
+                  level: 0,
+                  defaultExpanded: m,
+                  children: o
+                },
+                e
+              ) : /* @__PURE__ */ h("section", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ l("h2", { className: F, children: r }),
+                o
+              ] }, e);
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ge as SchemaRenderer
+};

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

@@ -0,0 +1,65 @@
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import { Select as O } from "../../Select/Select.js";
+import { JsonSchemaType as t } from "../../../../types/json-schema.js";
+import { detectAnyOfVariant as A, resolveRef as d, getOptionLabel as E, extractDefaults as T } from "../../../../utils/json-schema.js";
+import { useSchemaContext as P } from "../context.js";
+import { SchemaFieldContent as Y } from "./SchemaFieldContent.js";
+const y = {
+  [t.Array]: [],
+  [t.String]: "",
+  [t.Boolean]: !1,
+  [t.Integer]: 0,
+  [t.Number]: 0
+}, V = ({
+  schema: u,
+  value: c,
+  onChange: l,
+  path: h,
+  level: S,
+  ariaLabel: m
+}) => {
+  const { rootSchema: o, texts: x, readonly: N = !1 } = P(), s = u.anyOf ?? [], i = A(c, s, o), a = s[i], b = !a || d(a, o).type === t.Null, g = (e) => {
+    const r = d(s[e], o);
+    if (r.type === t.Null) {
+      l(null);
+      return;
+    }
+    const p = T(r, o);
+    if (p !== void 0) {
+      l(p);
+      return;
+    }
+    const f = typeof r.type == "string" ? r.type : "";
+    l(f in y ? y[f] : {});
+  };
+  return /* @__PURE__ */ v("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ n(
+      O,
+      {
+        ariaLabel: m ?? x.selectTypePlaceholder,
+        options: s.map((e, r) => ({
+          value: String(r),
+          label: E(e, o)
+        })),
+        value: String(i),
+        disabled: N,
+        onChange: (e) => g(Number(typeof e == "string" ? e : e[0])),
+        className: "max-w-[280px]"
+      }
+    ),
+    !b && /* @__PURE__ */ n("div", { className: "border-l-2 border-tertiary pl-3", children: /* @__PURE__ */ n(
+      Y,
+      {
+        schema: a,
+        value: c,
+        onChange: l,
+        path: h,
+        level: S,
+        ariaLabel: m
+      }
+    ) })
+  ] });
+};
+export {
+  V as SchemaAnyOfEditor
+};