@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.33

package/dist/components/New/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,147 @@
+import { jsx as d } from "react/jsx-runtime";
+import { IconArrowsHorizontal as O } from "@tabler/icons-react";
+import { useState as T, useRef as a, useEffect as Y, useCallback as U } from "react";
+import { DIAL_KIT_ICON_STROKE as $ } from "../constants/icon.js";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
+import { TooltipPlacement as b } from "../../../types/tooltip.js";
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+const G = 16, V = 1e3, Z = 4, h = (r) => r == null ? !1 : (r.closest("[dir]")?.getAttribute("dir") ?? r.ownerDocument.defaultView?.getComputedStyle(r).direction) === "rtl", se = ({
+  width: r,
+  minWidth: o,
+  maxWidth: s,
+  defaultWidth: R,
+  onWidthChange: f,
+  label: w,
+  tooltip: z,
+  keyboardStep: g = G,
+  className: S
+}) => {
+  const [y, D] = T(!1), [I, m] = T(!1), [k, A] = T(!1), c = a(null), C = a(null), p = a({ x: 0, y: 0 }), l = a(null), u = a(void 0), i = a(void 0);
+  Y(
+    () => () => {
+      clearTimeout(u.current), i.current != null && cancelAnimationFrame(i.current);
+    },
+    []
+  );
+  const P = U(
+    (e) => {
+      const t = Number.isFinite(e) ? e : o;
+      return Math.round(Math.min(s, Math.max(o, t)));
+    },
+    [s, o]
+  ), E = (e) => {
+    C.current?.style.setProperty(
+      "transform",
+      `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`
+    ), A(!0);
+  }, x = (e) => {
+    p.current = { x: e.clientX, y: e.clientY }, clearTimeout(u.current), u.current = setTimeout(() => m(!0), V);
+  }, M = (e) => {
+    E(e), x(e);
+  }, H = () => {
+    A(!1), clearTimeout(u.current), m(!1);
+  }, K = (e) => {
+    e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), l.current = { x: e.clientX, width: r }, D(!0));
+  }, N = (e) => {
+    E(e);
+    const t = l.current;
+    if (t == null) {
+      Math.hypot(
+        e.clientX - p.current.x,
+        e.clientY - p.current.y
+      ) > Z && (m(!1), x(e));
+      return;
+    }
+    const n = h(c.current) ? -1 : 1, F = P(t.width + (e.clientX - t.x) * n);
+    i.current != null && cancelAnimationFrame(i.current), i.current = requestAnimationFrame(() => f(F));
+  }, _ = (e) => {
+    l.current != null && (l.current = null, D(!1), e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId));
+  }, X = (e) => {
+    const t = h(c.current) ? -1 : 1;
+    let n;
+    switch (e.key) {
+      case "ArrowRight":
+        n = r + g * t;
+        break;
+      case "ArrowLeft":
+        n = r - g * t;
+        break;
+      case "Home":
+        n = o;
+        break;
+      case "End":
+        n = s;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault(), f(P(n));
+  }, v = () => {
+    R != null && f(P(R));
+  };
+  return (
+    /* A focusable separator is the ARIA window-splitter widget, so it is interactive. */
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": w,
+        "aria-valuenow": r,
+        "aria-valuemin": o,
+        "aria-valuemax": s,
+        tabIndex: 0,
+        className: L(
+          "absolute inset-y-0 end-0 -me-1 w-2 touch-none select-none",
+          "dial-resize-handle",
+          k && "dial-resize-handle-cursor-ready",
+          I && "dial-resize-handle-hover",
+          y && "dial-resize-handle-dragging",
+          S,
+          B.resizeHandle
+        ),
+        onPointerEnter: M,
+        onPointerLeave: H,
+        onPointerDown: K,
+        onPointerMove: N,
+        onPointerUp: _,
+        onPointerCancel: _,
+        onKeyDown: X,
+        onDoubleClick: v,
+        children: /* @__PURE__ */ d(
+          j,
+          {
+            tooltip: z,
+            open: I && !y,
+            placement: h(c.current) ? b.Left : b.Right,
+            asChild: !0,
+            children: /* @__PURE__ */ d(
+              "span",
+              {
+                ref: C,
+                "aria-hidden": "true",
+                className: L(
+                  "pointer-events-none fixed top-0 left-0 z-tooltip hidden text-secondary",
+                  "dial-resize-handle-arrow"
+                ),
+                children: /* @__PURE__ */ d(
+                  O,
+                  {
+                    size: q.LG,
+                    stroke: $
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  );
+};
+export {
+  se as ResizeHandle
+};

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

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

@@ -1,55 +1,57 @@
 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 = ({
+import { Input as I } from "../../Input/Input.js";
+import { NumberInput as w } from "../../NumberInput/NumberInput.js";
+import { PasswordInput as O } from "../../PasswordInput/PasswordInput.js";
+import { RadioGroup as T } from "../../RadioGroup/RadioGroup.js";
+import { Select as N } from "../../Select/Select.js";
+import { Switch as v } from "../../Switch/Switch.js";
+import { JsonSchemaType as p, SchemaDisplayMode as V, SchemaOrientation as F } from "../../../../types/json-schema.js";
+import { RadioGroupOrientation as R } from "../../../../types/radio-group.js";
+import { useSchemaContext as G } from "../context.js";
+const C = (e) => typeof e == "string" ? e : e[0], S = (e) => e != null ? String(e) : "", M = (e) => e !== void 0 ? Number(e) : void 0, W = ({
   schema: e,
   value: t,
   onChange: i,
   invalid: c,
   id: o,
-  ariaLabel: n
+  ariaLabel: n,
+  ariaDescribedBy: d
 }) => {
   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;
+    acceptableResourceTypes: P
+  } = G(), h = e.const !== void 0, m = Array.isArray(e.enum) ? e.enum : [], b = m.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 };
+      (g) => {
+        const f = P?.[g];
+        return Array.isArray(f) ? f.map((A) => {
+          const y = String(A);
+          return { value: y, label: y };
         }) : [];
       }
     );
     return /* @__PURE__ */ l(
-      I,
+      N,
       {
         id: o,
         ariaLabel: n,
+        ariaDescribedBy: d,
         options: r,
         value: t != null ? String(t) : void 0,
         invalid: c,
         disabled: s,
-        onChange: (m) => i(R(m)),
+        onChange: (g) => i(C(g)),
         placeholder: a.enumSelectPlaceholder,
         className: u
       }
     );
   }
-  if (P)
+  if (h)
     return /* @__PURE__ */ l(
-      b,
+      I,
       {
         id: o,
         "aria-label": n,
@@ -58,33 +60,34 @@ const R = (e) => typeof e == "string" ? e : e[0], g = (e) => e != null ? String(
         containerClassName: u
       }
     );
-  if (S && e.enumDisplay === v.Radio)
+  if (b && e.enumDisplay === V.Radio)
     return /* @__PURE__ */ l(
-      O,
+      T,
       {
         id: o,
         ariaLabel: n,
-        items: d.map((r) => ({ value: String(r), label: String(r) })),
+        items: m.map((r) => ({ value: String(r), label: String(r) })),
         value: t != null ? String(t) : void 0,
-        orientation: e.enumOrientation === V.Row ? N.Row : N.Column,
+        orientation: e.enumOrientation === F.Row ? R.Row : R.Column,
         disabled: s,
         onChange: (r) => i(r)
       }
     );
-  if (S)
+  if (b)
     return /* @__PURE__ */ l(
-      I,
+      N,
       {
         id: o,
         ariaLabel: n,
-        options: d.map((r) => ({
+        ariaDescribedBy: d,
+        options: m.map((r) => ({
           value: String(r),
           label: String(r)
         })),
         value: t != null ? String(t) : void 0,
         invalid: c,
         disabled: s,
-        onChange: (r) => i(R(r)),
+        onChange: (r) => i(C(r)),
         placeholder: a.enumSelectPlaceholder,
         className: u
       }
@@ -92,7 +95,7 @@ const R = (e) => typeof e == "string" ? e : e[0], g = (e) => e != null ? String(
   switch (e.type) {
     case p.Boolean:
       return /* @__PURE__ */ l(
-        T,
+        v,
         {
           id: o,
           "aria-label": n,
@@ -104,26 +107,28 @@ const R = (e) => typeof e == "string" ? e : e[0], g = (e) => e != null ? String(
     case p.Integer:
     case p.Number:
       return /* @__PURE__ */ l(
-        A,
+        w,
         {
           id: o,
           "aria-label": n,
+          "aria-describedby": d,
           integer: e.type === p.Integer,
-          value: g(t),
+          value: S(t),
           invalid: c,
           disabled: s,
-          onChange: (r) => i(B(r)),
+          onChange: (r) => i(M(r)),
           placeholder: e.type === p.Integer ? a.integerInputPlaceholder : a.numberInputPlaceholder,
           containerClassName: u
         }
       );
     default:
       return e.isProtected ? /* @__PURE__ */ l(
-        w,
+        O,
         {
           id: o,
           "aria-label": n,
-          value: g(t),
+          "aria-describedby": d,
+          value: S(t),
           invalid: c,
           disabled: s,
           onChange: (r) => i(r ?? void 0),
@@ -131,11 +136,12 @@ const R = (e) => typeof e == "string" ? e : e[0], g = (e) => e != null ? String(
           containerClassName: u
         }
       ) : /* @__PURE__ */ l(
-        b,
+        I,
         {
           id: o,
           "aria-label": n,
-          value: g(t),
+          "aria-describedby": d,
+          value: S(t),
           invalid: c,
           disabled: s,
           onChange: (r) => i(r ?? void 0),
@@ -146,5 +152,5 @@ const R = (e) => typeof e == "string" ? e : e[0], g = (e) => e != null ? String(
   }
 };
 export {
-  K as SchemaPrimitiveField
+  W as SchemaPrimitiveField
 };