@epam/ai-dial-ui-kit 0.16.0-dev.44 → 0.16.0-dev.46

package/dist/components/SchemaRenderer/components/SchemaOneOfEditor.js

@@ -1,192 +0,0 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
-import { useId as q } from "react";
-import { DialSelect as y } from "../../Select/Select.js";
-import { DialRadioButton as j } from "../../RadioButton/RadioButton.js";
-import { useSchemaContext as B } from "../context.js";
-import { resolveRef as a, getOptionLabel as G, extractDefaults as P } from "../../../utils/json-schema.js";
-import { SchemaObjectEditor as w } from "./SchemaObjectEditor.js";
-import { SchemaFieldContent as _ } from "./SchemaFieldContent.js";
-import { SchemaDisplayMode as C, SchemaOrientation as L } from "../../../types/json-schema.js";
-const Z = ({
-  schema: x,
-  value: c,
-  onChange: d,
-  path: u,
-  level: S
-}) => {
-  const { rootSchema: i, texts: A, readonly: b = !1 } = B(), p = q(), O = x.discriminator;
-  if (O) {
-    const r = O.propertyName, e = O.mapping, n = Object.keys(e).map((s) => ({
-      value: s,
-      label: s
-    })), l = typeof c == "object" && c !== null ? c[r] : void 0, g = l ? a({ $ref: e[l] }, i) : void 0, I = (s) => {
-      const m = a({ $ref: e[s] }, i), t = P(m, i) ?? {};
-      d({ ...t, [r]: s });
-    };
-    if (x.discriminatorDisplay === C.Radio) {
-      const s = x.discriminatorOrientation === L.Row, m = l ? (() => {
-        const t = a(
-          { $ref: e[l] },
-          i
-        ), { [r]: h, ...N } = t.properties ?? {};
-        return { ...t, properties: N };
-      })() : void 0;
-      return s ? /* @__PURE__ */ v("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ o("div", { role: "radiogroup", className: "flex flex-row flex-wrap gap-4", children: Object.keys(e).map((t) => {
-          const h = a(
-            { $ref: e[t] },
-            i
-          );
-          return /* @__PURE__ */ o(
-            j,
-            {
-              name: p,
-              value: t,
-              inputId: `${p}-${t}`,
-              label: h.title ?? t,
-              checked: l === t,
-              disabled: b,
-              onChange: () => I(t)
-            },
-            t
-          );
-        }) }),
-        m && /* @__PURE__ */ o(
-          w,
-          {
-            schema: m,
-            value: c,
-            onChange: d,
-            path: u,
-            level: S
-          }
-        )
-      ] }) : /* @__PURE__ */ o("div", { role: "radiogroup", className: "flex flex-col gap-2", children: Object.keys(e).map((t) => {
-        const h = a({ $ref: e[t] }, i), N = l === t, { [r]: z, ...F } = h.properties ?? {}, T = {
-          ...h,
-          properties: F
-        };
-        return /* @__PURE__ */ v("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ o(
-            j,
-            {
-              name: p,
-              value: t,
-              inputId: `${p}-${t}`,
-              label: h.title ?? t,
-              checked: N,
-              disabled: b,
-              onChange: () => I(t)
-            }
-          ),
-          N && /* @__PURE__ */ o("div", { className: "ml-6 mt-2", children: /* @__PURE__ */ o(
-            w,
-            {
-              schema: T,
-              value: c,
-              onChange: d,
-              path: u,
-              level: S
-            }
-          ) })
-        ] }, t);
-      }) });
-    }
-    return /* @__PURE__ */ v("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ o("div", { className: "flex-1 max-w-[280px]", children: /* @__PURE__ */ o(
-        y,
-        {
-          options: n,
-          value: l,
-          placeholder: A.selectTypePlaceholder,
-          disabled: b,
-          onChange: (s) => {
-            const m = typeof s == "string" ? s : s[0];
-            m && I(m);
-          }
-        }
-      ) }),
-      g && /* @__PURE__ */ o("div", { className: "pl-3", children: /* @__PURE__ */ o(
-        w,
-        {
-          schema: g,
-          value: c,
-          onChange: d,
-          path: u,
-          level: S
-        }
-      ) })
-    ] });
-  }
-  const f = x.oneOf ?? [], $ = (() => {
-    if (c == null) return 0;
-    if (typeof c == "object" && !Array.isArray(c)) {
-      for (let r = 0; r < f.length; r++)
-        if (a(f[r], i).required?.every((n) => n in c))
-          return r;
-    }
-    return 0;
-  })(), D = (r) => {
-    const e = a(f[r], i), n = P(e, i);
-    d(n ?? null);
-  }, R = f[$];
-  if (x.discriminatorDisplay === C.Radio)
-    return /* @__PURE__ */ o("div", { role: "radiogroup", className: "flex flex-col gap-2", children: f.map((r, e) => {
-      const n = a(r, i), l = G(r, i) ?? `Option ${e + 1}`, g = $ === e;
-      return /* @__PURE__ */ v("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ o(
-          j,
-          {
-            name: p,
-            value: String(e),
-            inputId: `${p}-${e}`,
-            label: l,
-            checked: g,
-            disabled: b,
-            onChange: () => D(e)
-          }
-        ),
-        g && n && /* @__PURE__ */ o("div", { className: "ml-6 mt-2", children: /* @__PURE__ */ o(
-          _,
-          {
-            schema: n,
-            value: c,
-            onChange: d,
-            path: u,
-            level: S
-          }
-        ) })
-      ] }, e);
-    }) });
-  const E = f.map((r, e) => {
-    const n = a(r, i);
-    return { value: String(e), label: n.title ?? `Option ${e + 1}` };
-  });
-  return /* @__PURE__ */ v("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ o("div", { className: "flex-1 max-w-[280px]", children: /* @__PURE__ */ o(
-      y,
-      {
-        options: E,
-        value: String($),
-        disabled: b,
-        onChange: (r) => {
-          const e = typeof r == "string" ? r : r[0];
-          D(Number(e));
-        }
-      }
-    ) }),
-    R && /* @__PURE__ */ o("div", { className: "pl-3 border-l-2 border-secondary", children: /* @__PURE__ */ o(
-      _,
-      {
-        schema: R,
-        value: c,
-        onChange: d,
-        path: u,
-        level: S
-      }
-    ) })
-  ] });
-};
-export {
-  Z as SchemaOneOfEditor
-};

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

@@ -1,161 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useId as I } from "react";
-import { DialInput as S } from "../../Input/Input.js";
-import { DialPasswordInput as R } from "../../PasswordInput/PasswordInput.js";
-import { DialNumberInput as b } from "../../NumberInput/NumberInput.js";
-import { DialSwitch as C } from "../../Switch/Switch.js";
-import { DialSelect as y } from "../../Select/Select.js";
-import { DialRadioButton as P } from "../../RadioButton/RadioButton.js";
-import { useSchemaContext as w } from "../context.js";
-import { JsonSchemaType as c, SchemaDisplayMode as D, SchemaOrientation as x } from "../../../types/json-schema.js";
-const E = ({
-  schema: t,
-  value: e,
-  onChange: n,
-  invalid: s
-}) => {
-  const u = I(), {
-    texts: d,
-    readonly: l = !1,
-    inputClassName: p,
-    acceptableResourceTypes: h
-  } = w(), N = t.const !== void 0, g = Array.isArray(t.enum) && t.enum.length > 0;
-  if (t["dial:resource"] === !0 && Array.isArray(t.acceptableResourceTypes) && t.acceptableResourceTypes.length > 0 && (t.type === c.String || t.type === void 0)) {
-    const r = (t.acceptableResourceTypes ?? []).flatMap(
-      (o) => {
-        const a = h?.[o];
-        return Array.isArray(a) ? a.map((m) => {
-          const f = String(m);
-          return { value: f, label: f };
-        }) : [];
-      }
-    );
-    return /* @__PURE__ */ i(
-      y,
-      {
-        options: r,
-        value: e != null ? String(e) : void 0,
-        invalid: s,
-        disabled: l,
-        onChange: (o) => n(typeof o == "string" ? o : o[0]),
-        placeholder: d.enumSelectPlaceholder,
-        className: p
-      }
-    );
-  }
-  if (N)
-    return /* @__PURE__ */ i(
-      S,
-      {
-        value: String(t.const ?? ""),
-        disabled: !0,
-        onChange: void 0,
-        className: "opacity-60"
-      }
-    );
-  if (g && t.enumDisplay === D.Radio) {
-    const r = t.enumOrientation === x.Row;
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        role: "radiogroup",
-        className: r ? "flex flex-row flex-wrap gap-x-4 gap-y-2" : "flex flex-col gap-2",
-        children: t.enum.map((o) => {
-          const a = String(o);
-          return /* @__PURE__ */ i(
-            P,
-            {
-              name: u,
-              value: a,
-              inputId: `${u}-${a}`,
-              label: a,
-              checked: e != null ? String(e) === a : !1,
-              disabled: l,
-              onChange: (m) => n(m)
-            },
-            a
-          );
-        })
-      }
-    );
-  }
-  if (g) {
-    const r = t.enum.map((o) => ({
-      value: String(o),
-      label: String(o)
-    }));
-    return /* @__PURE__ */ i(
-      y,
-      {
-        options: r,
-        value: e != null ? String(e) : void 0,
-        invalid: s,
-        disabled: l,
-        onChange: (o) => n(typeof o == "string" ? o : o[0]),
-        placeholder: d.enumSelectPlaceholder
-      }
-    );
-  }
-  switch (t.type) {
-    case c.Boolean:
-      return /* @__PURE__ */ i(
-        C,
-        {
-          switchId: u,
-          isOn: !!e,
-          disabled: l,
-          onChange: (r) => n(r)
-        }
-      );
-    case c.Integer:
-      return /* @__PURE__ */ i(
-        b,
-        {
-          integer: !0,
-          value: e != null ? String(e) : "",
-          invalid: s,
-          disabled: l,
-          onChange: (r) => n(r !== void 0 ? Number(r) : void 0),
-          placeholder: d.integerInputPlaceholder,
-          containerClassName: p
-        }
-      );
-    case c.Number:
-      return /* @__PURE__ */ i(
-        b,
-        {
-          value: e != null ? String(e) : "",
-          invalid: s,
-          disabled: l,
-          onChange: (r) => n(r !== void 0 ? Number(r) : void 0),
-          placeholder: d.numberInputPlaceholder,
-          containerClassName: p
-        }
-      );
-    default:
-      return t.isProtected ? /* @__PURE__ */ i(
-        R,
-        {
-          value: e != null ? String(e) : "",
-          invalid: s,
-          disabled: l,
-          onChange: (r) => n(r ?? void 0),
-          placeholder: d.stringInputPlaceholder,
-          containerClassName: p
-        }
-      ) : /* @__PURE__ */ i(
-        S,
-        {
-          value: e != null ? String(e) : "",
-          invalid: s,
-          disabled: l,
-          onChange: (r) => n(r ?? void 0),
-          placeholder: d.stringInputPlaceholder,
-          containerClassName: p
-        }
-      );
-  }
-};
-export {
-  E as SchemaPrimitiveField
-};

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

@@ -1,81 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { IconChevronDown as v, IconChevronRight as N, IconAlertTriangle as C, IconCheck as I } from "@tabler/icons-react";
-import { DialIcon as m } from "../../Icon/Icon.js";
-import { DialInfoButton as z } from "../../InfoButton/InfoButton.js";
-import { DialRemoveButton as w } from "../../RemoveButton/RemoveButton.js";
-import { ElementSize as S } from "../../../types/size.js";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-const P = ({
-  title: p,
-  description: i,
-  summary: l,
-  errorCount: s = 0,
-  level: d = 0,
-  children: x,
-  onRemove: c,
-  defaultExpanded: h = !0,
-  removeItemAriaLabel: y = "Remove item"
-}) => {
-  const [r, f] = u(h), t = d === 0, b = "rounded border border-secondary", g = n(
-    "flex items-center gap-2 cursor-pointer select-none transition-colors",
-    t ? "px-4 py-3 bg-layer-3 hover:bg-layer-4" : "px-3 py-2 bg-layer-4 hover:bg-layer-3",
-    r ? "rounded-t" : "rounded"
-  ), k = n(
-    "border-t border-secondary",
-    t ? "p-4" : "p-3"
-  );
-  return /* @__PURE__ */ a("div", { className: b, children: [
-    /* @__PURE__ */ a(
-      "div",
-      {
-        className: g,
-        onClick: () => f((o) => !o),
-        role: "button",
-        "aria-expanded": r,
-        children: [
-          /* @__PURE__ */ e("span", { className: "shrink-0 text-secondary", children: r ? /* @__PURE__ */ e(v, { size: 16, stroke: 2 }) : /* @__PURE__ */ e(N, { size: 16, stroke: 2 }) }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: n(
-                "flex-1 truncate",
-                t ? "dial-small-semi-text text-primary" : "dial-small-text text-primary"
-              ),
-              children: p
-            }
-          ),
-          i && /* @__PURE__ */ e(z, { caption: i }),
-          l && /* @__PURE__ */ e("span", { className: "dial-tiny-text text-secondary whitespace-nowrap ml-2", children: l }),
-          s > 0 ? /* @__PURE__ */ a("span", { className: "flex items-center gap-1 dial-tiny-text text-error whitespace-nowrap", children: [
-            /* @__PURE__ */ e(m, { icon: /* @__PURE__ */ e(C, { size: 13, stroke: 2 }) }),
-            s,
-            " error",
-            s > 1 ? "s" : ""
-          ] }) : /* @__PURE__ */ e(
-            m,
-            {
-              icon: /* @__PURE__ */ e(I, { size: 13, stroke: 2 }),
-              className: "text-success shrink-0"
-            }
-          ),
-          c && /* @__PURE__ */ e(
-            w,
-            {
-              size: S.Small,
-              onClick: (o) => {
-                o.stopPropagation(), c();
-              },
-              "aria-label": y,
-              className: "ml-1 shrink-0 p-0.5"
-            }
-          )
-        ]
-      }
-    ),
-    r && /* @__PURE__ */ e("div", { className: k, children: x })
-  ] });
-};
-export {
-  P as SchemaSection
-};

package/dist/components/SchemaRenderer/context.js

@@ -1,12 +0,0 @@
-import { createContext as t, useContext as n } from "react";
-const r = t(null);
-function c() {
-  const e = n(r);
-  if (!e)
-    throw new Error("useSchemaContext must be used inside DialSchemaRenderer");
-  return e;
-}
-export {
-  r as SchemaRendererContext,
-  c as useSchemaContext
-};

package/dist/components/Search/Search.js

@@ -1,63 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { IconX as u, IconSearch as N } from "@tabler/icons-react";
-import { useState as b, useEffect as k, useCallback as p, useMemo as z } from "react";
-import { ElementSize as I } from "../../types/size.js";
-import { DialInput as d } from "../Input/Input.js";
-import { SIZE_CONFIG as g } from "./constants.js";
-import { mergeClasses as h } from "../../utils/merge-classes.js";
-const v = ({
-  size: r = I.Standard,
-  placeholder: C = "Search...",
-  value: o,
-  onChange: i,
-  withoutBorder: a,
-  ...f
-}) => {
-  const [s, c] = b(o || "");
-  k(() => {
-    c(o || "");
-  }, [o]);
-  const n = p(
-    (l) => {
-      c(l || ""), i?.(l || "");
-    },
-    [i]
-  ), e = g[r], m = p(() => {
-    n("");
-  }, [n]), S = z(() => {
-    if (s)
-      return {
-        icon: /* @__PURE__ */ t(
-          u,
-          {
-            size: e.iconSize,
-            "aria-label": "Clear search",
-            role: "button"
-          }
-        ),
-        className: a ? "bg-transparent" : "",
-        onClick: m,
-        size: r
-      };
-  }, [m, s, r, e.iconSize, a]);
-  return /* @__PURE__ */ t(
-    d,
-    {
-      placeholder: C,
-      iconBefore: /* @__PURE__ */ t(N, { size: e.iconSize, stroke: e.iconStroke }),
-      value: s,
-      onChange: n,
-      inputButtonProps: S,
-      containerClassName: e.containerClassName,
-      className: e.className,
-      wrapperClassName: h(
-        e.wrapperClassName,
-        a ? "!border-0 !ps-5 [&>div]:!border-0" : ""
-      ),
-      ...f
-    }
-  );
-};
-export {
-  v as DialSearch
-};

package/dist/components/Search/constants.js

@@ -1,27 +0,0 @@
-import { ElementSize as a } from "../../types/size.js";
-const s = {
-  [a.Small]: {
-    className: "dial-tiny-text",
-    wrapperClassName: "pl-2 py-0",
-    containerClassName: "h-[24px]",
-    iconSize: 16,
-    iconStroke: 1
-  },
-  [a.Standard]: {
-    className: "dial-small-text",
-    wrapperClassName: "",
-    containerClassName: "",
-    iconSize: 20,
-    iconStroke: 1.5
-  },
-  [a.Large]: {
-    className: "",
-    wrapperClassName: "",
-    containerClassName: "",
-    iconSize: 0,
-    iconStroke: 0
-  }
-};
-export {
-  s as SIZE_CONFIG
-};

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,87 +0,0 @@
-import { jsx as f, jsxs as g } from "react/jsx-runtime";
-import { useCallback as h } from "react";
-import { mergeClasses as i } from "../../utils/merge-classes.js";
-import { segmentDisabledClassName as x, segmentSelectedClassName as w, segmentUnselectedClassName as k, segmentBaseClassName as C, containerBaseClassName as D } from "./constants.js";
-const A = ({
-  options: n,
-  value: c,
-  onChange: d,
-  disabled: m,
-  className: o,
-  ariaLabel: u
-}) => {
-  const b = h(
-    (s) => {
-      if (m)
-        return;
-      const e = n.filter((l) => !l.disabled);
-      if (e.length === 0)
-        return;
-      const a = e.findIndex(
-        (l) => l.value === c
-      );
-      let t = null;
-      switch (s.key) {
-        case "ArrowRight":
-        case "ArrowDown":
-          t = (a + 1) % e.length;
-          break;
-        case "ArrowLeft":
-        case "ArrowUp":
-          t = (a - 1 + e.length) % e.length;
-          break;
-        case "Home":
-          t = 0;
-          break;
-        case "End":
-          t = e.length - 1;
-          break;
-        default:
-          return;
-      }
-      s.preventDefault();
-      const r = e[t];
-      r && r.value !== c && d(r.value);
-    },
-    [m, n, c, d]
-  );
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      role: "tablist",
-      "aria-label": u,
-      className: i(D, o),
-      children: n.map((s, e) => {
-        const a = s.value === c, t = e === 0, r = e === n.length - 1, l = m || s.disabled;
-        return /* @__PURE__ */ g(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": a,
-            tabIndex: a ? 0 : -1,
-            disabled: l,
-            onClick: () => d(s.value),
-            onKeyDown: b,
-            className: i(
-              C,
-              !r && "-mr-px",
-              t && "rounded-l",
-              r && "rounded-r",
-              a ? w : k,
-              l && x
-            ),
-            children: [
-              s.icon,
-              s.label
-            ]
-          },
-          s.value
-        );
-      })
-    }
-  );
-};
-export {
-  A as DialSegmentedControl
-};

package/dist/components/SegmentedControl/constants.js

@@ -1,8 +0,0 @@
-const e = "inline-flex items-center rounded bg-layer-3", t = "flex flex-1 items-center justify-center gap-2 h-7 px-3 py-1 border border-primary dial-small-text whitespace-nowrap focus-visible:outline outline-offset-0 focus-visible:relative focus-visible:z-10", s = "relative z-10 bg-controls-accent-primary-alpha-active text-primary", a = "text-secondary hover:text-primary", l = "text-controls-disable-accent cursor-not-allowed hover:text-controls-disable-accent";
-export {
-  e as containerBaseClassName,
-  t as segmentBaseClassName,
-  l as segmentDisabledClassName,
-  s as segmentSelectedClassName,
-  a as segmentUnselectedClassName
-};

package/dist/components/Select/MultiSelectTags.js

@@ -1,23 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { DialTag as m } from "../Tag/Tag.js";
-import { DialIcon as t } from "../Icon/Icon.js";
-const p = ({
-  options: i,
-  selectedValues: o,
-  handleRemoveTag: r
-}) => /* @__PURE__ */ a("div", { className: "flex flex-wrap w-full items-center gap-1", children: o.map((l) => {
-  const c = i.find((e) => e.value === l)?.label ?? l, n = i.find((e) => e.value === l)?.icon;
-  return /* @__PURE__ */ a(
-    m,
-    {
-      label: c,
-      onRemove: (e) => r?.(e, l),
-      icon: n ? /* @__PURE__ */ a(t, { icon: n }) : null,
-      className: "max-w-full"
-    },
-    l
-  );
-}) });
-export {
-  p as DialMultiSelectTags
-};