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

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
+};

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

@@ -0,0 +1,135 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as N, useId as k } from "react";
+import { IconChevronDown as b, IconAlertTriangle as y, IconCheck as g, IconTrash as v } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as a } from "../../constants/icon.js";
+import { DangerIconButton as _ } from "../../IconButton/IconButtonWrappers.js";
+import { InfoButton as w } from "../../InfoButton/InfoButton.js";
+import { DIAL_ICON_SIZE as o } from "../../../../constants/icon.js";
+import { DIAL_KIT_CLASS as z } from "../../../../constants/public-class-names.js";
+import { ElementSize as C } from "../../../../types/size.js";
+import { mergeClasses as t } from "../../../../utils/merge-classes.js";
+const R = ({
+  title: m,
+  description: p,
+  summary: l,
+  errorCount: n = 0,
+  level: x = 0,
+  children: f,
+  onRemove: c,
+  defaultExpanded: h = !0,
+  removeItemAriaLabel: u = "Remove item"
+}) => {
+  const [r, I] = N(h), d = k(), s = x === 0;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: t(
+        "flex flex-col border border-tertiary",
+        s ? "rounded-xl bg-layer-raised" : "rounded-lg",
+        z.schemaRendererSection
+      ),
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: t(
+              "flex items-center gap-2",
+              s ? "px-4 py-3" : "px-3 py-2"
+            ),
+            children: [
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  "aria-expanded": r,
+                  "aria-controls": r ? d : void 0,
+                  onClick: () => I((S) => !S),
+                  className: "flex min-w-0 flex-1 items-center gap-2 rounded text-left text-primary focus-visible:outline focus-visible:outline-focus",
+                  children: [
+                    /* @__PURE__ */ e(
+                      b,
+                      {
+                        size: o.SM,
+                        stroke: a,
+                        "aria-hidden": "true",
+                        className: t(
+                          "shrink-0 text-secondary transition-transform",
+                          !r && "-rotate-90"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: t(
+                          "truncate",
+                          s ? "dial-small-semi-text" : "dial-small-text"
+                        ),
+                        children: m
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(w, { caption: p }),
+              l && /* @__PURE__ */ e("span", { className: "dial-tiny-text whitespace-nowrap text-secondary", children: l }),
+              n > 0 ? /* @__PURE__ */ i("span", { className: "flex items-center gap-1 whitespace-nowrap dial-tiny-text text-error", children: [
+                /* @__PURE__ */ e(
+                  y,
+                  {
+                    size: o.SM,
+                    stroke: a,
+                    "aria-hidden": "true",
+                    className: "shrink-0"
+                  }
+                ),
+                n,
+                " error",
+                n > 1 ? "s" : ""
+              ] }) : /* @__PURE__ */ e(
+                g,
+                {
+                  size: o.SM,
+                  stroke: a,
+                  "aria-hidden": "true",
+                  className: "shrink-0 text-success"
+                }
+              ),
+              c && /* @__PURE__ */ e(
+                _,
+                {
+                  size: C.Small,
+                  icon: /* @__PURE__ */ e(
+                    v,
+                    {
+                      size: o.SM,
+                      stroke: a,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  "aria-label": u,
+                  onClick: c,
+                  className: "shrink-0"
+                }
+              )
+            ]
+          }
+        ),
+        r && /* @__PURE__ */ e(
+          "div",
+          {
+            id: d,
+            className: t(
+              "border-t border-tertiary",
+              s ? "p-4" : "p-3"
+            ),
+            children: f
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  R as SchemaSection
+};

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

@@ -0,0 +1,17 @@
+import { createContext as c, useContext as u } from "react";
+const a = c(null), f = () => {
+  const e = u(a);
+  if (!e)
+    throw new Error("useSchemaContext must be used inside SchemaRenderer");
+  return e;
+}, m = (e, t = /* @__PURE__ */ new Set(), r = !1, n = !1) => {
+  if (!r || t.has(e)) return !0;
+  if (!n) return !1;
+  const s = e + ".";
+  return [...t].some((o) => o.startsWith(s));
+};
+export {
+  a as SchemaRendererContext,
+  m as isPathTouched,
+  f as useSchemaContext
+};

package/dist/components/New/Search/Search.js

@@ -1,18 +1,19 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { IconX as _, IconSearch as h } from "@tabler/icons-react";
-import { useRef as R, useCallback as k } from "react";
-import { useMergeRefs as E } from "@floating-ui/react";
-import { GhostIconButton as M } from "../IconButton/IconButtonWrappers.js";
-import { Input as N } from "../Input/Input.js";
+import { useRef as A, useCallback as R } from "react";
+import { useMergeRefs as k } from "@floating-ui/react";
+import { GhostIconButton as D } from "../IconButton/IconButtonWrappers.js";
+import { Input as E } from "../Input/Input.js";
 import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as o } from "../../../constants/icon.js";
+import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
 import { ElementSize as r } from "../../../types/size.js";
-import { mergeClasses as A } from "../../../utils/merge-classes.js";
-const D = {
-  [r.Small]: o.SM,
-  [r.Standard]: o.MD,
-  [r.Large]: o.MD
-}, g = ({
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+const N = {
+  [r.Small]: e.SM,
+  [r.Standard]: e.MD,
+  [r.Large]: e.MD
+}, v = ({
   size: s = r.Standard,
   placeholder: c = "Search...",
   withoutBorder: f = !1,
@@ -22,43 +23,44 @@ const D = {
   onChange: t,
   wrapperClassName: p,
   inputRef: S,
-  ...u
+  ...I
 }) => {
-  const m = R(null), I = E([S, m]), d = !!i && !a, C = k(() => {
+  const m = A(null), u = k([S, m]), d = !!i && !a, C = R(() => {
     t?.(void 0), m.current?.focus();
   }, [t]);
-  return /* @__PURE__ */ e(
-    N,
+  return /* @__PURE__ */ o(
+    E,
     {
-      ...u,
+      ...I,
       size: s,
       value: i,
       disabled: a,
       onChange: t,
       placeholder: c,
-      inputRef: I,
-      wrapperClassName: A(
+      inputRef: u,
+      wrapperClassName: L(
         f && "dial-kit-input-borderless",
-        p
+        p,
+        M.search
       ),
-      iconBefore: /* @__PURE__ */ e(
+      iconBefore: /* @__PURE__ */ o(
         h,
         {
-          size: D[s],
+          size: N[s],
           stroke: n,
           className: "text-secondary",
           "aria-hidden": "true"
         }
       ),
-      iconAfter: d ? /* @__PURE__ */ e(
-        M,
+      iconAfter: d ? /* @__PURE__ */ o(
+        D,
         {
           size: r.Small,
           "aria-label": l,
-          icon: /* @__PURE__ */ e(
+          icon: /* @__PURE__ */ o(
             _,
             {
-              size: o.SM,
+              size: e.SM,
               stroke: n,
               "aria-hidden": "true"
             }
@@ -70,5 +72,5 @@ const D = {
   );
 };
 export {
-  g as Search
+  v as Search
 };

package/dist/components/New/SegmentedControl/SegmentedControl.js

@@ -1,24 +1,25 @@
-import { jsx as x, jsxs as C } from "react/jsx-runtime";
-import { useRef as I, useCallback as k } from "react";
+import { jsx as v, jsxs as x } from "react/jsx-runtime";
+import { useRef as k, useCallback as A } from "react";
 import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as w } from "../../../utils/accessible-name.js";
-import { NAVIGATION_KEYS as h, segmentDisabledSelectedClassName as A, segmentDisabledUnselectedClassName as D, segmentSelectedInteractiveClassName as S, segmentUnselectedInteractiveClassName as y, segmentSelectedClassName as U, segmentUnselectedClassName as K, segmentClassName as R, containerClassName as j } from "./constants.js";
+import { resolveAccessibleName as S } from "../../../utils/accessible-name.js";
+import { NAVIGATION_KEYS as w, segmentDisabledSelectedClassName as D, segmentDisabledUnselectedClassName as h, segmentSelectedInteractiveClassName as y, segmentUnselectedInteractiveClassName as K, segmentSelectedClassName as U, segmentUnselectedClassName as L, segmentClassName as R, containerClassName as _ } from "./constants.js";
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
 const M = ({
   items: l,
   value: r,
   onChange: c,
   disabled: o,
-  className: f,
-  segmentClassName: g,
-  "aria-label": N
+  className: g,
+  segmentClassName: p,
+  "aria-label": C
 }) => {
-  const m = I({}), d = l.find((e) => e.value === r), p = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, v = k(
+  const b = k({}), d = l.find((e) => e.value === r), I = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, N = A(
     (e) => {
-      if (o || !h.includes(e.key)) return;
-      const a = l.filter((b) => !b.disabled);
+      if (o || !w.includes(e.key)) return;
+      const a = l.filter((m) => !m.disabled);
       if (a.length === 0) return;
       const s = Math.max(
-        a.findIndex((b) => b.value === r),
+        a.findIndex((m) => m.value === r),
         0
       ), t = a.length - 1;
       let n = s;
@@ -40,41 +41,46 @@ const M = ({
       }
       e.preventDefault();
       const i = a[n];
-      m.current[i.value]?.focus(), i.value !== r && c(i.value);
+      b.current[i.value]?.focus(), i.value !== r && c(i.value);
     },
     [o, l, r, c]
   );
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ v(
     "div",
     {
       role: "radiogroup",
-      "aria-label": N,
+      "aria-label": C,
       "aria-disabled": o || void 0,
-      onKeyDown: v,
-      className: u(j, f),
+      onKeyDown: N,
+      className: u(
+        _,
+        g,
+        f.segmentedControl
+      ),
       children: l.map((e) => {
         const a = e.value === r, s = o || e.disabled;
-        return /* @__PURE__ */ C(
+        return /* @__PURE__ */ x(
           "button",
           {
             ref: (t) => {
-              m.current[e.value] = t;
+              b.current[e.value] = t;
             },
             type: "button",
             role: "radio",
             "aria-checked": a,
-            "aria-label": w(
+            "aria-label": S(
               e["aria-label"],
               typeof e.label == "string" ? e.label : void 0
             ),
-            tabIndex: e.value === p ? 0 : -1,
+            tabIndex: e.value === I ? 0 : -1,
             disabled: s,
             onClick: () => c(e.value),
             className: u(
               R,
-              a ? U : K,
-              s ? a ? A : D : a ? S : y,
-              g
+              a ? U : L,
+              s ? a ? D : h : a ? y : K,
+              p,
+              f.segmentedControlItem
             ),
             children: [
               e.icon,