@epam/ai-dial-ui-kit 0.15.0-dev.45 → 0.15.0-dev.47

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/Slider/Slider.js

@@ -1,112 +1,173 @@
-import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
-import { useId as w, useCallback as A } from "react";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
-import { ErrorText as H, CaptionText as L } from "../CaptionText/CaptionText.js";
-import { Label as U } from "../Label/Label.js";
-const Z = 16, _ = (o) => (o.toString().split(".")[1] ?? "").length, O = ({
-  id: o,
+import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { useId as Z, useCallback as q } from "react";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
+import { ErrorText as J, CaptionText as K } from "../CaptionText/CaptionText.js";
+import { Label as O } from "../Label/Label.js";
+import { getTickPercents as Q } from "./utils.js";
+const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `calc(${t}% + ${(0.5 - t / 100) * R}px)`, X = (t, r) => t && r ? "grid-cols-[auto_minmax(0,1fr)_auto]" : t ? "grid-cols-[auto_minmax(0,1fr)]" : r ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", le = ({
+  id: t,
   value: r,
-  min: d = 0,
-  max: h = 1,
-  step: x = 0.1,
-  disabled: a,
-  labelProps: l,
-  labels: t,
-  formatValue: m,
-  showValue: p = !1,
-  caption: f,
+  min: m = 0,
+  max: g = 1,
+  step: h = 0.1,
+  disabled: i,
+  labelProps: s,
+  labels: l,
+  formatValue: x,
+  showValue: v = !1,
+  showTooltip: S = !1,
+  showTicks: j = !1,
+  leftContent: N,
+  rightContent: y,
+  caption: b,
   error: c,
-  onChange: g,
-  containerClassName: $,
-  trackClassName: F,
-  fillClassName: M,
-  className: S,
-  ...u
+  onChange: w,
+  containerClassName: z,
+  trackClassName: B,
+  fillClassName: E,
+  className: L,
+  ...I
 }) => {
-  const T = w(), s = o ?? T, v = f && !c ? `${s}-caption` : void 0, N = c ? `${s}-error` : void 0, y = h - d, b = y > 0 ? Math.min(100, Math.max(0, (r - d) / y * 100)) : 0, j = `calc(${b}% + ${(0.5 - b / 100) * Z}px)`, I = m ? m(r) : r.toFixed(_(x)), k = A(
-    (E) => {
-      g?.(Number(E.target.value));
+  const A = Z(), o = t ?? A, C = b && !c ? `${o}-caption` : void 0, T = c ? `${o}-error` : void 0, f = g - m, G = f > 0 ? Math.min(100, Math.max(0, (r - m) / f * 100)) : 0, _ = F(G), H = j && !i ? Q(f, h) : [], M = S && !i, u = N != null, $ = y != null, p = x ? x(r) : r.toFixed(W(h)), U = q(
+    (d) => {
+      w?.(Number(d.target.value));
     },
-    [g]
+    [w]
   );
-  return /* @__PURE__ */ n("div", { className: i("flex flex-col gap-2", $), children: [
-    (l || p) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-      l && /* @__PURE__ */ e(U, { ...l, htmlFor: s }),
-      p && // The input already reports its value to assistive tech, so this is
+  return /* @__PURE__ */ n("div", { className: a("flex flex-col gap-2", z), children: [
+    (s || v) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      s && /* @__PURE__ */ e(O, { ...s, htmlFor: o }),
+      v && // The input already reports its value to assistive tech, so this is
       // a visual echo rather than a second announcement.
       /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": "true",
-          className: i(
+          className: a(
             "dial-small-text ml-auto",
-            a ? "text-control-disable-primary" : "text-primary"
+            i ? "text-control-disable-primary" : "text-primary"
           ),
-          children: I
+          children: p
         }
       )
     ] }),
     /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: i(
-              "pointer-events-none absolute inset-x-0 h-1 rounded-full",
-              a ? "bg-control-disable-primary" : "bg-control-neutral-active",
-              F
-            )
-          }
-        ),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: i(
-              "pointer-events-none absolute left-0 h-1 rounded-full",
-              a ? "bg-control-disable-secondary" : "bg-control-accent",
-              M
-            ),
-            style: { width: j }
-          }
-        ),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            ...u,
-            type: "range",
-            id: s,
-            value: r,
-            min: d,
-            max: h,
-            step: x,
-            disabled: a,
-            onChange: k,
-            "aria-label": B(
-              typeof l?.label != "string" ? u["aria-label"] : void 0
-            ),
-            "aria-valuetext": m ? I : void 0,
-            "aria-describedby": N ?? v,
-            className: i(
-              "dial-kit-slider absolute inset-0 h-full w-full",
-              S
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: a(
+            "grid items-center gap-x-3 gap-y-1",
+            X(u, $),
+            // Room for the value bubble, which hangs above the track row.
+            M && "mt-7"
+          ),
+          children: [
+            u && /* @__PURE__ */ e("div", { className: "flex items-center", children: N }),
+            /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a(
+                    "pointer-events-none absolute inset-x-0 h-1 rounded-full",
+                    i ? "bg-control-disable-primary" : "bg-control-accent-muted",
+                    B
+                  )
+                }
+              ),
+              H.map((d) => /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full bg-control-neutral-default",
+                  style: { left: F(d) }
+                },
+                d
+              )),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a(
+                    "pointer-events-none absolute left-0 h-1 rounded-full",
+                    i ? "bg-control-disable-secondary" : "bg-control-accent",
+                    E
+                  ),
+                  style: { width: _ }
+                }
+              ),
+              M && // A visual echo like `showValue`: the input already announces
+              // its value, so the bubble stays out of the accessibility tree.
+              /* @__PURE__ */ n(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
+                  style: { left: _ },
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: p }),
+                    /* @__PURE__ */ e(
+                      "svg",
+                      {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        className: "fill-control-inverted",
+                        children: /* @__PURE__ */ e("path", { d: "M0 0h8L4 4z" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ...I,
+                  type: "range",
+                  id: o,
+                  value: r,
+                  min: m,
+                  max: g,
+                  step: h,
+                  disabled: i,
+                  onChange: U,
+                  "aria-label": D(
+                    typeof s?.label != "string" ? I["aria-label"] : void 0
+                  ),
+                  "aria-valuetext": x ? p : void 0,
+                  "aria-describedby": T ?? C,
+                  className: a(
+                    "dial-kit-slider absolute inset-0 h-full w-full",
+                    L
+                  )
+                }
+              )
+            ] }),
+            $ && /* @__PURE__ */ e("div", { className: "flex items-center", children: y }),
+            l && /* @__PURE__ */ e(
+              "div",
+              {
+                className: a(
+                  "dial-tiny-text flex text-secondary",
+                  u && "col-start-2"
+                ),
+                children: l.length === 3 ? /* @__PURE__ */ n(k, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: l[1] }),
+                  /* @__PURE__ */ e("span", { children: l[2] })
+                ] }) : /* @__PURE__ */ n(k, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "ml-auto", children: l[1] })
+                ] })
+              }
             )
-          }
-        )
-      ] }),
-      t && /* @__PURE__ */ e("div", { className: "dial-tiny-text flex text-secondary", children: t.length === 3 ? /* @__PURE__ */ n(C, { children: [
-        /* @__PURE__ */ e("span", { children: t[0] }),
-        /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: t[1] }),
-        /* @__PURE__ */ e("span", { children: t[2] })
-      ] }) : /* @__PURE__ */ n(C, { children: [
-        /* @__PURE__ */ e("span", { children: t[0] }),
-        /* @__PURE__ */ e("span", { className: "ml-auto", children: t[1] })
-      ] }) }),
-      /* @__PURE__ */ e(H, { id: N, text: c }),
-      !c && /* @__PURE__ */ e(L, { id: v, text: f })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(J, { id: T, text: c }),
+      !c && /* @__PURE__ */ e(K, { id: C, text: b })
     ] })
   ] });
 };
 export {
-  O as Slider
+  le as Slider
 };

package/dist/components/New/Slider/utils.js

@@ -0,0 +1,12 @@
+const e = (r, t) => {
+  if (r <= 0 || t <= 0)
+    return [];
+  const o = Math.floor(r / t + 1e-9);
+  return Array.from(
+    { length: o + 1 },
+    (n, c) => c * t / r * 100
+  );
+};
+export {
+  e as getTickPercents
+};

package/dist/components/New/Textarea/Textarea.js

@@ -1,55 +1,56 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import "react";
 import { mergeClasses as n } from "../../../utils/merge-classes.js";
-import { ErrorText as u, CaptionText as v } from "../CaptionText/CaptionText.js";
-import { Label as N } from "../Label/Label.js";
-var b = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(b || {});
+import { ErrorText as v, CaptionText as N } from "../CaptionText/CaptionText.js";
+import { Label as b } from "../Label/Label.js";
+var C = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(C || {});
 const s = {
   none: "resize-none",
   both: "resize",
   horizontal: "resize-x",
   vertical: "resize-y"
-}, C = (e) => typeof e == "boolean" ? s[
+}, g = (e) => typeof e == "boolean" ? s[
   e ? "both" : "none"
   /* None */
-] : s[e], B = ({
+] : s[e], E = ({
   className: e = "",
   value: m,
   onChange: c,
   error: r,
   containerClassName: x,
-  resize: d = !1,
-  labelProps: o,
+  resize: p = !1,
+  labelProps: a,
   caption: f,
-  id: l,
-  ...a
+  id: o,
+  invalid: d,
+  ...l
 }) => {
   const h = n(
     "dial-kit-textarea dial-kit-input px-3 py-2",
-    a.invalid && "dial-kit-input-error",
-    a.disabled && "dial-kit-input-disable",
-    C(d),
+    d && "dial-kit-input-error",
+    l.disabled && "dial-kit-input-disable",
+    g(p),
     e
   );
   return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-2", x), children: [
-    o && /* @__PURE__ */ t(N, { ...o, htmlFor: l }),
+    a && /* @__PURE__ */ t(b, { ...a, htmlFor: o }),
     /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ t(
         "textarea",
         {
-          id: l,
+          id: o,
           value: m || "",
           className: h,
-          onChange: (p) => c?.(p.currentTarget.value),
-          ...a
+          onChange: (u) => c?.(u.currentTarget.value),
+          ...l
         }
       ),
-      /* @__PURE__ */ t(u, { text: r }),
-      !r && /* @__PURE__ */ t(v, { text: f })
+      /* @__PURE__ */ t(v, { text: r }),
+      !r && /* @__PURE__ */ t(N, { text: f })
     ] })
   ] });
 };
 export {
-  B as Textarea,
-  b as TextareaResize
+  E as Textarea,
+  C as TextareaResize
 };