@epam/ai-dial-ui-kit 0.14.0-dev.9 → 0.15.0-dev.1

package/dist/components/LoadFileArea/EmptyFileArea.js

@@ -0,0 +1,130 @@
+import { jsx as t, jsxs as y, Fragment as B } from "react/jsx-runtime";
+import { DialErrorText as x } from "../CaptionText/CaptionText.js";
+import { ButtonAppearance as Q } from "../../types/button.js";
+import U from "classnames";
+import { useRef as C, useState as k, useCallback as G, useMemo as L, useEffect as W } from "react";
+import { DialPrimaryButton as X } from "../Button/ButtonWrappers.js";
+import { useDrop as Y } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
+import { FILE as Z } from "../../node_modules/react-dnd-html5-backend/dist/NativeTypes.js";
+const nr = ({
+  onChange: l,
+  emptyTextFirstLine: E,
+  emptyTextSecondLine: N,
+  emptyButtonLabel: O,
+  acceptTypes: A,
+  maxFilesCount: m,
+  multiple: M,
+  fileFormatError: j,
+  fileCountError: w,
+  fileSizeError: R,
+  getIsFileFormatError: n,
+  getIsFileSizeError: a
+}) => {
+  const g = C(null), h = C(null), [c, D] = k([]), [i, f] = k(!1), [u, d] = k(!1), P = G(
+    (r) => {
+      const e = r.target.files;
+      if (e && e.length > 0) {
+        const o = Array.from(e), p = n?.(o), v = a?.(o);
+        p ? f(!0) : v ? d(!0) : l(o);
+      }
+    },
+    [n, a, l]
+  ), s = G(
+    (r) => m && r?.length > m,
+    [m]
+  ), F = L(() => i || u || s(c), [i, u, s, c]), b = () => {
+    D([]), f(!1), d(!1);
+  }, S = L(() => i ? /* @__PURE__ */ t(x, { text: j }) : u ? /* @__PURE__ */ t(x, { text: R }) : s(c) ? /* @__PURE__ */ t(x, { text: w }) : null, [
+    w,
+    j,
+    R,
+    c,
+    s,
+    i,
+    u
+  ]);
+  W(() => {
+    b();
+  }, [A]);
+  const [{ isOver: T, canDrop: K }, V] = Y(
+    () => ({
+      accept: [Z],
+      drop(r) {
+        const e = r.files, o = n?.(e) ?? !1, p = a?.(e) ?? !1, v = s?.(e) ?? !1;
+        if (f(o), d(p), o || p || v) {
+          D(e);
+          return;
+        }
+        l(e), b();
+      },
+      collect: (r) => ({
+        isOver: r.isOver(),
+        canDrop: r.canDrop()
+      })
+    }),
+    [l, n, a, s]
+  ), q = (r) => {
+    (r.key === "Enter" || r.key === "Space") && (r.preventDefault(), h.current?.click());
+  }, z = (r) => {
+    r?.preventDefault();
+    const e = Array.from(r.dataTransfer?.items ?? []);
+    f(!!n?.(e)), d(!!a?.(e)), D(e);
+  }, H = (r) => {
+    r.target === r.currentTarget && b();
+  }, J = U(
+    "border border-dashed rounded w-full cursor-pointer relative h-full hover:border-hover",
+    !K && !F && "border-primary",
+    K && (T ? "border-accent-primary" : "border-hover"),
+    F && "border-error"
+  );
+  return V(g), /* @__PURE__ */ y(B, { children: [
+    /* @__PURE__ */ y(
+      "div",
+      {
+        className: J,
+        ref: g,
+        onDragOver: z,
+        onDragLeave: H,
+        children: [
+          /* @__PURE__ */ y(
+            "label",
+            {
+              htmlFor: "file",
+              tabIndex: 0,
+              onKeyDown: q,
+              className: "flex flex-col items-center cursor-pointer size-full text-secondary dial-tiny-text justify-center",
+              children: [
+                E && /* @__PURE__ */ t("p", { className: "mb-1", children: E }),
+                N && /* @__PURE__ */ t("p", { className: "mb-0.5", children: N }),
+                O && /* @__PURE__ */ t(
+                  X,
+                  {
+                    appearance: Q.Ghost,
+                    label: O,
+                    onClick: () => h.current?.click()
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              multiple: M,
+              id: "file",
+              type: "file",
+              ref: h,
+              hidden: !0,
+              accept: A,
+              onChange: P
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(B, { children: S })
+  ] });
+};
+export {
+  nr as DialEmptyFileArea
+};

package/dist/components/LoadFileArea/FilledDropZone.js

@@ -0,0 +1,80 @@
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import { useRef as Z, useState as u, useCallback as y } from "react";
+import q from "classnames";
+import { DialErrorText as h } from "../CaptionText/CaptionText.js";
+import { useDrop as B } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
+import { FILE as F } from "../../node_modules/react-dnd-html5-backend/dist/NativeTypes.js";
+const Q = ({
+  children: O,
+  existingFiles: o,
+  onDrop: g,
+  getIsFileFormatError: s,
+  getIsFileSizeError: D,
+  maxFilesCount: a,
+  fileFormatError: C,
+  fileSizeError: S,
+  fileCountError: L
+}) => {
+  const E = Z(null), [n, l] = u(!1), [c, f] = u(!1), [N, d] = u(0), m = y(() => {
+    l(!1), f(!1), d(0);
+  }, []), p = y(
+    (r) => !!(a && o.length + r.length > a),
+    [a, o.length]
+  ), v = n || c, [{ isOver: T, canDrop: j }, z] = B(
+    () => ({
+      accept: [F],
+      drop(r) {
+        const e = r.files, R = [...o, ...e], b = s?.(e) ?? !1, x = D?.(e) ?? !1, k = p?.(e) ?? !1;
+        if (l(b), f(x), b || x || k) {
+          d(e.length);
+          return;
+        }
+        g(R), m();
+      },
+      collect: (r) => ({
+        isOver: r.isOver(),
+        canDrop: r.canDrop()
+      })
+    }),
+    [
+      o,
+      g,
+      s,
+      D,
+      p,
+      m
+    ]
+  ), A = (r) => {
+    r.preventDefault();
+    const e = Array.from(r.dataTransfer?.items ?? []);
+    l(!!s?.(e)), f(!1), d(e.length);
+  }, I = (r) => {
+    r.target === r.currentTarget && m();
+  };
+  z(E);
+  const i = p(
+    Array.from({ length: N })
+  );
+  return /* @__PURE__ */ w("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: E,
+        onDragOver: A,
+        onDragLeave: I,
+        className: q(
+          "flex-1 min-h-0 border border-solid rounded p-2 overflow-y-auto",
+          !v && !i && (j && T ? "border-accent-primary" : "border-primary"),
+          (v || i) && "border-error"
+        ),
+        children: O
+      }
+    ),
+    n && /* @__PURE__ */ t(h, { text: C }),
+    c && /* @__PURE__ */ t(h, { text: S }),
+    !n && !c && i && /* @__PURE__ */ t(h, { text: L })
+  ] });
+};
+export {
+  Q as FilledDropZone
+};

package/dist/components/LoadFileArea/FilledInput.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { IconExclamationCircle as m } from "@tabler/icons-react";
+import t from "classnames";
+import { BASE_ICON_PROPS as a } from "../../constants/icon.js";
+import { DialInput as c } from "../Input/Input.js";
+const N = ({
+  iconBefore: i,
+  className: n,
+  ...e
+}) => {
+  const r = e.invalid;
+  return /* @__PURE__ */ o(
+    c,
+    {
+      ...e,
+      iconBefore: /* @__PURE__ */ o("div", { className: "mr-2", children: r ? /* @__PURE__ */ o(m, { ...a, className: "text-error" }) : i }),
+      containerClassName: t("h-[40px] p-0", r && "h-[60px]"),
+      className: t(
+        "rounded-r-none border-r-0",
+        r && "text-error",
+        n
+      )
+    }
+  );
+};
+export {
+  N as DialFilledInput
+};

package/dist/components/LoadFileArea/LoadFileArea.js

@@ -0,0 +1,70 @@
+import { jsx as o, jsxs as h, Fragment as D } from "react/jsx-runtime";
+import { useCallback as F, useMemo as I } from "react";
+import { HTML5Backend as k } from "../../node_modules/react-dnd-html5-backend/dist/index.js";
+import { DialEmptyFileArea as z } from "./EmptyFileArea.js";
+import { DialFilledInput as B } from "./FilledInput.js";
+import { DialRemoveButton as S } from "../RemoveButton/RemoveButton.js";
+import { DialErrorText as b } from "../CaptionText/CaptionText.js";
+import { FilledDropZone as A } from "./FilledDropZone.js";
+import { DndProvider as L } from "../../node_modules/react-dnd/dist/core/DndProvider.js";
+const q = (i) => {
+  const {
+    files: e,
+    iconBeforeInput: a,
+    dynamicIcon: m,
+    onChange: t,
+    isInvalid: l,
+    errorText: c,
+    removeButtonAriaLabel: s,
+    getIsMultiFilesSizeError: u,
+    multiFilesSizeError: E,
+    getIsFileFormatError: g,
+    getIsFileSizeError: p,
+    maxFilesCount: x
+  } = i, f = F(
+    (r, n) => {
+      r.stopPropagation(), t(e?.filter((C) => C.name !== n) || []);
+    },
+    [t, e]
+  ), d = F(
+    (r) => /* @__PURE__ */ o(
+      S,
+      {
+        "aria-label": s,
+        onClick: (n) => f(n, r)
+      }
+    ),
+    [s, f]
+  ), v = I(() => /* @__PURE__ */ o("div", { className: "flex flex-col gap-y-1", children: e?.map((r, n) => /* @__PURE__ */ o(
+    B,
+    {
+      id: r.name,
+      value: r.name,
+      iconAfter: d(r.name),
+      iconBefore: a || m?.(r.name),
+      invalid: l?.(r),
+      error: l?.(r) ? c : ""
+    },
+    r.name + n
+  )) }), [e, a, m, l, c, d]);
+  return /* @__PURE__ */ o(L, { backend: k, children: !e || e.length === 0 ? /* @__PURE__ */ o(z, { ...i, onChange: t }) : /* @__PURE__ */ h(D, { children: [
+    /* @__PURE__ */ o(
+      A,
+      {
+        existingFiles: e,
+        onDrop: t,
+        getIsFileFormatError: g,
+        getIsFileSizeError: p,
+        maxFilesCount: x,
+        fileFormatError: i.fileFormatError,
+        fileSizeError: i.fileSizeError,
+        fileCountError: i.fileCountError,
+        children: v
+      }
+    ),
+    u?.(e) && /* @__PURE__ */ o(b, { text: E })
+  ] }) });
+};
+export {
+  q as DialLoadFileArea
+};

package/dist/components/LoadFileArea/LoadFileAreaField.js

@@ -0,0 +1,128 @@
+import { jsxs as F, jsx as t } from "react/jsx-runtime";
+import { DialNeutralButton as R, DialPrimaryButton as j } from "../Button/ButtonWrappers.js";
+import { DialLabel as C } from "../Label/Label.js";
+import { BASE_ICON_PROPS as b } from "../../constants/icon.js";
+import { ButtonAppearance as O } from "../../types/button.js";
+import { IconTrashX as _, IconPlus as $ } from "@tabler/icons-react";
+import { useRef as y, useCallback as a } from "react";
+import { DialLoadFileArea as G } from "./LoadFileArea.js";
+const W = ({
+  onChange: c,
+  fieldTitle: I,
+  elementId: x,
+  files: e,
+  maxFilesCount: f,
+  maxFileSize: m,
+  maxMultiFilesSize: u,
+  fileFormatError: z,
+  fileCountError: A,
+  fileSizeError: B,
+  multiFilesSizeError: E,
+  multiple: n = !0,
+  acceptTypes: l,
+  deleteAllButtonLabel: L,
+  addButtonLabel: D,
+  additionalActionButtons: N,
+  ...S
+}) => {
+  const p = y(null), k = () => p.current?.click(), v = () => {
+    c([]);
+  }, d = a(
+    (o) => o?.some(
+      (r) => !(l === "/" || l?.toLowerCase()?.includes(r?.type?.toLowerCase()))
+    ),
+    [l]
+  ), h = a(
+    (o) => {
+      if (!m)
+        return !1;
+      const r = m * (1024 * 1024);
+      return o?.some((i) => {
+        const s = i.size;
+        return !!s && s > r;
+      });
+    },
+    [m]
+  ), w = a(
+    (o) => {
+      if (!u || !n)
+        return !1;
+      const r = u * 1024 * 1024;
+      return o.reduce((s, g) => s + g.size, 0) > r;
+    },
+    [u, n]
+  ), P = a(
+    (o) => {
+      const r = o.target.files;
+      if (r && r.length > 0) {
+        const i = Array.from(r), s = d(i), g = h(i);
+        !s && !g && c([...e || [], ...i]);
+      }
+    },
+    [d, h, c, e]
+  );
+  return /* @__PURE__ */ F("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ F("div", { className: "flex justify-between items-center pb-1 min-h-[42px]", children: [
+      /* @__PURE__ */ t(
+        C,
+        {
+          label: `${I}: ${n ? e?.length || 0 : ""}`,
+          htmlFor: x
+        }
+      ),
+      n && !!e?.length && /* @__PURE__ */ F("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ t(
+          R,
+          {
+            label: L,
+            iconBefore: /* @__PURE__ */ t(_, { ...b }),
+            onClick: v
+          }
+        ),
+        (f ? f > e?.length : !0) && /* @__PURE__ */ t(
+          j,
+          {
+            appearance: O.Ghost,
+            iconBefore: /* @__PURE__ */ t($, { ...b }),
+            label: D,
+            onClick: k
+          }
+        ),
+        N
+      ] })
+    ] }),
+    e && e.length > 0 && /* @__PURE__ */ t(
+      "input",
+      {
+        id: "file",
+        type: "file",
+        multiple: n,
+        ref: p,
+        hidden: !0,
+        accept: l,
+        onChange: P
+      }
+    ),
+    /* @__PURE__ */ t(
+      G,
+      {
+        files: e,
+        onChange: c,
+        acceptTypes: l,
+        maxFilesCount: f,
+        multiple: n,
+        fileFormatError: z,
+        fileCountError: A,
+        fileSizeError: B,
+        multiFilesSizeError: E,
+        getIsFileFormatError: d,
+        getIsFileSizeError: h,
+        getIsMultiFilesSizeError: w,
+        ...S
+      }
+    )
+  ] });
+};
+export {
+  W as DialLoadFileAreaField
+};

package/dist/components/Loader/Loader.js

@@ -0,0 +1,40 @@
+import { jsx as r } from "react/jsx-runtime";
+import e from "classnames";
+import { DialIcon as s } from "../Icon/Icon.js";
+import { loaderIconBaseClassName as t, loaderBaseClassName as d } from "./constants.js";
+import c from "../../assets/icons/loader.svg.js";
+const g = ({
+  size: o = 18,
+  className: a,
+  iconClassName: l,
+  fullWidth: m = !0,
+  ariaLabel: i = "Loading"
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    role: "status",
+    className: e({
+      [d]: !0,
+      "w-full h-full": m,
+      [a || ""]: !!a
+    }),
+    children: /* @__PURE__ */ r(
+      s,
+      {
+        icon: /* @__PURE__ */ r(
+          c,
+          {
+            width: o,
+            height: o,
+            className: e(t, l),
+            role: "img",
+            "aria-label": i
+          }
+        )
+      }
+    )
+  }
+);
+export {
+  g as DialLoader
+};

package/dist/components/Loader/constants.js

@@ -0,0 +1,5 @@
+const e = "flex items-center justify-center text-secondary", s = "shrink-0 grow-0 basis-auto animate-spin-steps";
+export {
+  e as loaderBaseClassName,
+  s as loaderIconBaseClassName
+};

package/dist/components/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,37 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import c from "@uiw/react-md-editor";
+import { EditorThemes as p } from "../../types/editor.js";
+import { mergeClasses as f } from "../../utils/merge-classes.js";
+const g = ({
+  value: o,
+  onChange: r,
+  height: i = 300,
+  preview: s = "edit",
+  theme: a = p.dark,
+  className: d,
+  placeholder: e
+}) => {
+  const m = e !== void 0 && !o;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-color-mode": a,
+      className: f("relative", d),
+      children: [
+        /* @__PURE__ */ t(
+          c,
+          {
+            value: o,
+            onChange: (l) => r?.(l || ""),
+            height: i,
+            preview: s
+          }
+        ),
+        m && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40", children: e })
+      ]
+    }
+  );
+};
+export {
+  g as DialMarkdownEditor
+};

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -0,0 +1,80 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useId as g, useState as x, useEffect as J, useCallback as u } from "react";
+import { DialSwitch as S } from "../Switch/Switch.js";
+import { EditorThemes as b } from "../../types/editor.js";
+import { DialMarkdownEditor as v } from "./MarkdownEditor.js";
+import { DialLabel as y } from "../Label/Label.js";
+const z = ({
+  value: s,
+  onChangeValue: l,
+  label: i,
+  headerContent: d,
+  switcherLabel: a,
+  height: c = 300,
+  theme: m = b.dark,
+  onValidateJSON: f,
+  preview: C = "edit"
+}) => {
+  const N = g(), [n, w] = x(!1), [p, D] = x(null);
+  J(() => {
+    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+      D(() => o.DialJsonEditor);
+    });
+  }, [n]);
+  const h = u(
+    (o) => {
+      l?.(o);
+    },
+    [l]
+  ), E = u(
+    (o) => {
+      f?.(o);
+    },
+    [f]
+  ), t = !!a;
+  return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
+    (i || d || t) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      i && /* @__PURE__ */ e(y, { label: i }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
+        d,
+        t && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          S,
+          {
+            isOn: n,
+            label: a,
+            switchId: N,
+            onChange: (o) => w(o)
+          }
+        ) })
+      ] })
+    ] }),
+    t && n ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "border border-primary rounded",
+        style: { height: `${c}px` },
+        children: p && /* @__PURE__ */ e(
+          p,
+          {
+            value: s,
+            onChange: h,
+            onValidateJSON: E,
+            currentTheme: m
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(
+      v,
+      {
+        value: s,
+        onChange: h,
+        height: c,
+        preview: C,
+        theme: m
+      }
+    )
+  ] }) }) });
+};
+export {
+  z as DialMarkdownEditorContainer
+};

package/dist/components/MarkdownEditor/lazy.js

@@ -0,0 +1,4 @@
+const o = () => import("./MarkdownEditor.js");
+export {
+  o as LazyDialMarkdownEditor
+};