@epam/ai-dial-ui-kit 0.16.0-dev.25 → 0.16.0-dev.32

package/dist/components/New/Input/Input.js

@@ -1,169 +1,183 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { useRef as _, useEffect as A } from "react";
-import { useMergeRefs as M } from "@floating-ui/react";
-import { DialIcon as C } from "../../Icon/Icon.js";
-import { Tooltip as W } from "../Tooltip/Tooltip.js";
-import { ElementSize as d } from "../../../types/size.js";
-import { mergeClasses as g } from "../../../utils/merge-classes.js";
-import { ErrorText as Z, CaptionText as $ } from "../CaptionText/CaptionText.js";
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import { useId as V, useRef as _, useEffect as A } from "react";
+import { useMergeRefs as B } from "@floating-ui/react";
+import { DialIcon as y } from "../../Icon/Icon.js";
+import { Tooltip as M } from "../Tooltip/Tooltip.js";
+import { ElementSize as p } from "../../../types/size.js";
+import { mergeClasses as w } from "../../../utils/merge-classes.js";
+import { ErrorText as W, CaptionText as Z } from "../CaptionText/CaptionText.js";
 import { Label as q } from "../Label/Label.js";
-import { InputButton as B } from "./Button/InputButton.js";
-import { handleKeyDown as H } from "./utils.js";
-const T = {
-  [d.Small]: {
+import { InputButton as H } from "./Button/InputButton.js";
+import { handleKeyDown as J } from "./utils.js";
+const L = {
+  [p.Small]: {
     field: "dial-kit-input-small gap-x-1",
     paddingStart: "pl-2",
     paddingEnd: "pr-2",
     stackGap: "gap-1",
     postfixText: "dial-tiny-text"
   },
-  [d.Standard]: {
+  [p.Standard]: {
     field: "gap-x-2 py-2",
     paddingStart: "pl-3",
     paddingEnd: "pr-3",
     stackGap: "gap-2",
     postfixText: "dial-small-text"
   },
-  [d.Large]: {
+  [p.Large]: {
     field: "gap-x-2 py-3",
     paddingStart: "pl-4",
     paddingEnd: "pr-4",
     stackGap: "gap-2",
     postfixText: "dial-body-text"
   }
-}, ae = ({
-  labelProps: p,
-  error: t,
+}, ne = ({
+  labelProps: f,
+  error: e,
   caption: n,
-  id: c,
-  containerClassName: f,
-  size: u = d.Standard,
-  ...v
-}) => /* @__PURE__ */ x(
-  "div",
-  {
-    className: g(
-      "flex flex-col",
-      T[u].stackGap,
-      f
-    ),
-    children: [
-      p && /* @__PURE__ */ e(q, { ...p, htmlFor: c }),
-      /* @__PURE__ */ x("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ e(I, { id: c, size: u, ...v }),
-        /* @__PURE__ */ e(Z, { text: t }),
-        !t && /* @__PURE__ */ e($, { text: n })
-      ] })
-    ]
-  }
-), I = ({
-  invalid: p,
-  disabled: t,
+  id: h,
+  containerClassName: u,
+  size: m = p.Standard,
+  "aria-describedby": N,
+  "aria-invalid": E,
+  ...g
+}) => {
+  const a = V(), o = h ?? a, l = e ? `${o}-error` : void 0, v = !e && n ? `${o}-caption` : void 0;
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: w(
+        "flex flex-col",
+        L[m].stackGap,
+        u
+      ),
+      children: [
+        f && /* @__PURE__ */ t(q, { ...f, htmlFor: o }),
+        /* @__PURE__ */ S("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ t(
+            j,
+            {
+              id: o,
+              size: m,
+              "aria-describedby": [N, l, v].filter(Boolean).join(" ") || void 0,
+              "aria-invalid": E ?? (e || g.invalid ? !0 : void 0),
+              ...g
+            }
+          ),
+          /* @__PURE__ */ t(W, { id: l, text: e }),
+          !e && /* @__PURE__ */ t(Z, { id: v, text: n })
+        ] })
+      ]
+    }
+  );
+}, j = ({
+  invalid: f,
+  disabled: e,
   prefix: n,
-  className: c,
-  postfix: f,
-  children: u,
-  iconBefore: v,
-  iconAfter: L,
-  wrapperClassName: b,
-  type: o,
-  inputRef: y,
-  value: N,
-  tooltipText: D,
-  min: l,
-  onChange: G,
-  max: s,
-  inputButtonProps: w,
-  wrapperRef: j,
-  size: S = d.Standard,
+  className: h,
+  postfix: u,
+  children: m,
+  iconBefore: N,
+  iconAfter: E,
+  wrapperClassName: g,
+  type: a,
+  inputRef: o,
+  value: l,
+  tooltipText: v,
+  min: s,
+  onChange: D,
+  max: c,
+  inputButtonProps: I,
+  wrapperRef: G,
+  size: b = p.Standard,
   ...R
 }) => {
-  const m = T[S], E = _(null), F = M([y, E]), h = o === "number" || l !== void 0 || s !== void 0;
+  const x = L[b], C = _(null), $ = B([o, C]), k = a === "number" || s !== void 0 || c !== void 0;
   A(() => {
-    const a = E.current;
-    if (!a || !h || t) return;
-    const r = (i) => {
-      i.preventDefault();
+    const i = C.current;
+    if (!i || !k || e) return;
+    const r = (d) => {
+      d.preventDefault();
     };
-    return a.addEventListener("wheel", r, { passive: !1 }), () => {
-      a.removeEventListener("wheel", r);
+    return i.addEventListener("wheel", r, { passive: !1 }), () => {
+      i.removeEventListener("wheel", r);
     };
-  }, [t, h, o]);
-  const K = (a) => {
-    H(a, o, l, s);
-  }, V = (a) => {
-    const r = a.currentTarget.value;
-    if (h && r !== "") {
-      const i = parseFloat(r);
-      if (isNaN(i) && r !== "-" && r !== "." || !isNaN(i) && (l !== void 0 && i < +l || s !== void 0 && i > +s))
+  }, [e, k, a]);
+  const F = (i) => {
+    J(i, a, s, c);
+  }, K = (i) => {
+    const r = i.currentTarget.value;
+    if (k && r !== "") {
+      const d = parseFloat(r);
+      if (isNaN(d) && r !== "-" && r !== "." || !isNaN(d) && (s !== void 0 && d < +s || c !== void 0 && d > +c))
         return;
     }
-    G?.(r || void 0);
-  }, k = () => /* @__PURE__ */ x(
+    D?.(r || void 0);
+  }, T = () => /* @__PURE__ */ S(
     "div",
     {
-      ref: j,
-      className: g(
+      ref: G,
+      className: w(
         "dial-kit-input flex flex-row items-center justify-between",
-        m.field,
-        p && "dial-kit-input-error",
-        t && "dial-kit-input-disable",
-        !n && m.paddingStart,
-        !w && m.paddingEnd,
-        b
+        x.field,
+        f && "dial-kit-input-error",
+        e && "dial-kit-input-disable",
+        !n && x.paddingStart,
+        !I && x.paddingEnd,
+        g
       ),
       "aria-label": "input-container",
       children: [
-        n && /* @__PURE__ */ e("div", { className: "border-r border-secondary", children: /* @__PURE__ */ e(
-          I,
+        n && /* @__PURE__ */ t("div", { className: "border-r border-secondary", children: /* @__PURE__ */ t(
+          j,
           {
             wrapperClassName: "!rounded-r-none",
             className: "truncate",
             value: n,
             disabled: !0,
-            size: S,
+            size: b,
             id: `${n}_textBefore`
           }
         ) }),
-        /* @__PURE__ */ e(C, { icon: v }),
-        u,
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(y, { icon: N }),
+        m,
+        /* @__PURE__ */ t(
           "input",
           {
-            ref: F,
-            type: o,
-            autoComplete: o === "password" ? "new-password" : "off",
-            value: N ?? "",
-            className: g(
+            ref: $,
+            type: a,
+            autoComplete: a === "password" ? "new-password" : "off",
+            value: l ?? "",
+            className: w(
               "border-0 bg-transparent w-full truncate",
-              t && "cursor-not-allowed",
-              c
+              e && "cursor-not-allowed",
+              h
             ),
-            onChange: V,
-            onKeyDown: K,
-            min: l,
-            disabled: t,
-            max: s,
+            onChange: K,
+            onKeyDown: F,
+            min: s,
+            disabled: e,
+            max: c,
             ...R
           }
         ),
-        f && /* @__PURE__ */ x(
+        u && /* @__PURE__ */ S(
           "p",
           {
-            className: g("text-secondary", m.postfixText),
+            className: w("text-secondary", x.postfixText),
             children: [
               " ",
-              f
+              u
             ]
           }
         ),
-        /* @__PURE__ */ e(C, { icon: L }),
-        w && /* @__PURE__ */ e(B, { size: S, ...w, disabled: t })
+        /* @__PURE__ */ t(y, { icon: E }),
+        I && /* @__PURE__ */ t(H, { size: b, ...I, disabled: e })
       ]
     }
   );
-  return t && o !== "password" ? /* @__PURE__ */ e(W, { tooltip: D || N, children: k() }) : k();
+  return e && a !== "password" ? /* @__PURE__ */ t(M, { tooltip: v || l, children: T() }) : T();
 };
 export {
-  ae as Input
+  ne as Input
 };

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

@@ -1,83 +1,84 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
 import { useId as F } from "react";
 import { ErrorText as R } from "../../CaptionText/CaptionText.js";
 import { Label as T } from "../../Label/Label.js";
-import { JsonSchemaType as E } from "../../../../types/json-schema.js";
-import { resolveRef as I, isObjectType as L, validateRequired as b, buildSummary as C, isMissingRequiredValue as M, toRequiredMessage as N } from "../../../../utils/json-schema.js";
-import { useSchemaContext as P, isPathTouched as u } from "../context.js";
-import { SchemaFieldContent as x } from "./SchemaFieldContent.js";
-import { SchemaSection as k } from "./SchemaSection.js";
-const B = ({
-  schema: S,
-  value: r,
-  onChange: d,
+import { JsonSchemaType as b } from "../../../../types/json-schema.js";
+import { resolveRef as E, isObjectType as I, validateRequired as L, buildSummary as v, isMissingRequiredValue as C, toRequiredMessage as M } from "../../../../utils/json-schema.js";
+import { useSchemaContext as N, isPathTouched as x } from "../context.js";
+import { SchemaFieldContent as S } from "./SchemaFieldContent.js";
+import { SchemaSection as P } from "./SchemaSection.js";
+const q = ({
+  schema: y,
+  value: e,
+  onChange: a,
   path: o,
-  level: c = 0,
+  level: m = 0,
   required: i,
   label: s
 }) => {
-  const a = F(), {
-    rootSchema: m,
-    defaultExpanded: y = !0,
+  const c = F(), {
+    rootSchema: n,
+    defaultExpanded: g = !0,
     touchedPaths: p,
     skipUntouched: l
-  } = P(), e = I(S, m), n = o.join(".");
-  if (L(e) || e.type === E.Array) {
-    const j = b(r, e, m, n), f = s ?? e.title ?? o[o.length - 1] ?? "Section";
+  } = N(), r = E(y, n), d = o.join(".");
+  if (I(r) || r.type === b.Array) {
+    const j = L(e, r, n, d), h = s ?? r.title ?? o[o.length - 1] ?? "Section";
     return /* @__PURE__ */ t(
-      k,
+      P,
       {
-        title: f,
-        description: e.description,
-        level: c,
-        summary: C(r, e, m),
-        errorCount: u(n, p, l, !0) ? j.length : 0,
-        defaultExpanded: y,
+        title: h,
+        description: r.description,
+        level: m,
+        summary: v(e, r, n),
+        errorCount: x(d, p, l, !0) ? j.length : 0,
+        defaultExpanded: g,
         children: /* @__PURE__ */ t(
-          x,
+          S,
           {
-            schema: e,
-            value: r,
-            onChange: d,
+            schema: r,
+            value: e,
+            onChange: a,
             path: o,
-            level: c + 1,
+            level: m + 1,
             required: i,
-            ariaLabel: f
+            ariaLabel: h
           }
         )
       }
     );
   }
-  const g = u(n, p, l) && i && M(r) ? N(s ?? "Field") : void 0;
-  return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", children: [
+  const f = x(d, p, l) && i && C(e) ? M(s ?? "Field") : void 0;
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ t(
       T,
       {
-        htmlFor: a,
+        htmlFor: c,
         label: s,
         required: i,
-        caption: e.description
+        caption: r.description
       }
     ),
-    /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ u("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ t(
-        x,
+        S,
         {
-          schema: e,
-          value: r,
-          onChange: d,
+          schema: r,
+          value: e,
+          onChange: a,
           path: o,
-          level: c,
+          level: m,
           required: i,
           suppressInlineError: !0,
-          fieldId: a,
-          ariaLabel: s
+          fieldId: c,
+          ariaLabel: s,
+          ariaDescribedBy: f ? `${c}-error` : void 0
         }
       ),
-      /* @__PURE__ */ t(R, { text: g })
+      /* @__PURE__ */ t(R, { id: `${c}-error`, text: f })
     ] })
   ] });
 };
 export {
-  B as SchemaField
+  q as SchemaField
 };

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

@@ -1,57 +1,59 @@
-import { jsx as t, jsxs as j } from "react/jsx-runtime";
-import { ErrorText as v } from "../../CaptionText/CaptionText.js";
-import { JsonSchemaType as f } from "../../../../types/json-schema.js";
-import { resolveRef as C, isObjectType as F, isMissingRequiredValue as T, toRequiredMessage as A } from "../../../../utils/json-schema.js";
-import { useSchemaContext as k, isPathTouched as M } from "../context.js";
-import { SchemaAnyOfEditor as R } from "./SchemaAnyOfEditor.js";
-import { SchemaArrayEditor as q } from "./SchemaArrayEditor.js";
-import { SchemaJsonEditor as J } from "./SchemaJsonEditor.js";
-import { SchemaKeyValueEditor as N } from "./SchemaKeyValueEditor.js";
-import { SchemaObjectEditor as V } from "./SchemaObjectEditor.js";
-import { SchemaOneOfEditor as B } from "./SchemaOneOfEditor.js";
+import { jsx as r, jsxs as C } from "react/jsx-runtime";
+import { useId as F } from "react";
+import { ErrorText as T } from "../../CaptionText/CaptionText.js";
+import { JsonSchemaType as h } from "../../../../types/json-schema.js";
+import { resolveRef as A, isObjectType as k, isMissingRequiredValue as M, toRequiredMessage as R } from "../../../../utils/json-schema.js";
+import { useSchemaContext as q, isPathTouched as B } from "../context.js";
+import { SchemaAnyOfEditor as I } from "./SchemaAnyOfEditor.js";
+import { SchemaArrayEditor as J } from "./SchemaArrayEditor.js";
+import { SchemaJsonEditor as N } from "./SchemaJsonEditor.js";
+import { SchemaKeyValueEditor as V } from "./SchemaKeyValueEditor.js";
+import { SchemaObjectEditor as b } from "./SchemaObjectEditor.js";
+import { SchemaOneOfEditor as D } from "./SchemaOneOfEditor.js";
 import { SchemaPrimitiveField as K } from "./SchemaPrimitiveField.js";
-const Z = ({
-  schema: h,
+const ee = ({
+  schema: S,
   value: m,
-  onChange: S,
+  onChange: y,
   path: d,
-  level: y,
-  required: P,
-  suppressInlineError: g = !1,
+  level: u,
+  required: E,
+  suppressInlineError: P = !1,
   fieldId: a,
-  ariaLabel: r
+  ariaLabel: t,
+  ariaDescribedBy: g
 }) => {
-  const { rootSchema: u, renderField: l, markTouched: x, touchedPaths: E, skipUntouched: O } = k(), e = C(h, u), p = d.join("."), c = (i) => {
-    x?.(p), S(i);
+  const l = F(), { rootSchema: x, renderField: p, markTouched: O, touchedPaths: j, skipUntouched: v } = q(), e = A(S, x), f = d.join("."), c = (i) => {
+    O?.(f), y(i);
   }, s = {
     schema: e,
     value: m,
     onChange: c,
     path: d,
-    level: y
+    level: u
   };
   let o;
   if (e.oneOf)
-    o = /* @__PURE__ */ t(B, { ...s, ariaLabel: r });
-  else if (e.anyOf && e.type !== f.Object)
-    o = /* @__PURE__ */ t(R, { ...s, ariaLabel: r });
-  else if (F(e)) {
+    o = /* @__PURE__ */ r(D, { ...s, ariaLabel: t });
+  else if (e.anyOf && e.type !== h.Object)
+    o = /* @__PURE__ */ r(I, { ...s, ariaLabel: t });
+  else if (k(e)) {
     const i = e.additionalProperties != null && e.additionalProperties !== !1, n = !e.properties || Object.keys(e.properties).length === 0;
-    i && n ? o = /* @__PURE__ */ t(N, { ...s }) : n && e.additionalProperties !== !1 ? o = /* @__PURE__ */ t(
-      J,
+    i && n ? o = /* @__PURE__ */ r(V, { ...s }) : n && e.additionalProperties !== !1 ? o = /* @__PURE__ */ r(
+      N,
       {
         value: m,
         onChange: c,
         id: a,
-        ariaLabel: r
+        ariaLabel: t
       }
-    ) : o = /* @__PURE__ */ t(V, { ...s });
-  } else if (e.type === f.Array)
-    o = /* @__PURE__ */ t(q, { ...s });
+    ) : o = /* @__PURE__ */ r(b, { ...s });
+  } else if (e.type === h.Array)
+    o = /* @__PURE__ */ r(J, { ...s });
   else {
-    const i = M(p, E, O) && !!P && T(m), n = !g && i ? A(e.title ?? r ?? "Field") : void 0;
-    o = /* @__PURE__ */ j("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ t(
+    const i = B(f, j, v) && !!E && M(m), n = !P && i ? R(e.title ?? t ?? "Field") : void 0;
+    o = /* @__PURE__ */ C("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ r(
         K,
         {
           schema: e,
@@ -59,14 +61,15 @@ const Z = ({
           onChange: c,
           invalid: i,
           id: a,
-          ariaLabel: r
+          ariaLabel: t,
+          ariaDescribedBy: n ? l : g
         }
       ),
-      /* @__PURE__ */ t(v, { text: n })
+      /* @__PURE__ */ r(T, { id: l, text: n })
     ] });
   }
-  return l ? l(d, e, o) : o;
+  return p ? p(d, e, o) : o;
 };
 export {
-  Z as SchemaFieldContent
+  ee as SchemaFieldContent
 };