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

package/dist/components/FileManager/hooks/use-file-upload.js

@@ -0,0 +1,338 @@
+import { useState as R, useRef as O, useMemo as N, useCallback as a, useEffect as X } from "react";
+import { DialFilePermission as me, DialFileNodeType as q } from "../../../models/file.js";
+import { FILES_DATA_TRANSFER_TYPE as ge } from "../constants.js";
+import { useConflictResolution as Ce } from "./use-conflict-resolution.js";
+import { isFileAccepted as ve } from "../utils.js";
+const De = (m) => "dataTransfer" in m && m.dataTransfer !== null, Te = ({
+  onUploadFiles: m,
+  onValidateUpload: P,
+  maxFileSize: g,
+  allowedFileTypes: h,
+  validationMessages: u = {},
+  onUploadArchive: w,
+  prepareUploadFileName: C,
+  uploadEnabled: o = !0,
+  currentFolder: U
+} = {}) => {
+  const [x, A] = R(!1), [J, I] = R(!1), [K, p] = R(), W = O(null), $ = O(""), D = O([]), s = N(() => !!U?.permissions?.includes(me.WRITE), [U]), [Q, k] = R(/* @__PURE__ */ new Map()), [V, z] = R(null), T = a(
+    (e) => !h || h.includes("*/*") ? e : e.filter(
+      ({ fileContent: t, name: n }) => ve(h, t.type, n)
+    ),
+    [h]
+  ), f = a(() => {
+    k(/* @__PURE__ */ new Map()), z(null);
+  }, []), {
+    conflictingFiles: Z,
+    conflictResolutionOpen: b,
+    hasActiveConflictRef: F,
+    startConflictResolution: L,
+    closeConflictResolution: E,
+    openConflictResolution: ee,
+    handleReplaceAll: B,
+    handleDuplicateAll: H,
+    handleCancelAll: S,
+    handleDecideForEach: _
+  } = Ce({
+    getDestinationFiles: () => D.current,
+    onResolve: (e, t) => {
+      if (!o || !s) {
+        f();
+        return;
+      }
+      if (!V) return;
+      const n = e.map((i) => {
+        const r = Q.get(i.sourceUrl);
+        if (!r)
+          return;
+        const l = i.destinationUrl.split("/").pop();
+        return {
+          fileContent: r.fileContent,
+          name: l
+        };
+      }).filter(Boolean);
+      if (n[0]?.fileContent?.type === "application/zip") {
+        const { fileContent: i, name: r } = n[0];
+        w?.(i, r, t);
+      } else n.length > 0 && m?.(n, t);
+      f();
+    }
+  });
+  X(() => {
+    o && s || (A(!1), I(!1), p(void 0), E(), f());
+  }, [
+    o,
+    E,
+    f,
+    s
+  ]), X(() => {
+    if (!o || !s) return;
+    let e = 0;
+    const t = (l) => {
+      De(l) && l.dataTransfer.types.includes(ge) && (e++, I(!0));
+    }, n = () => {
+      e--, e === 0 && I(!1);
+    }, i = () => {
+      e = 0, I(!1);
+    }, r = (l) => {
+      l.preventDefault();
+    };
+    return window.addEventListener("dragenter", t), window.addEventListener("dragleave", n), window.addEventListener("drop", i), window.addEventListener("dragover", r), () => {
+      window.removeEventListener("dragenter", t), window.removeEventListener("dragleave", n), window.removeEventListener("drop", i), window.removeEventListener("dragover", r);
+    };
+  }, [o, s]);
+  const j = a(
+    (e) => g ? e.filter((t) => t.fileContent.size > g).map((t) => t.name) : [],
+    [g]
+  ), M = a(
+    (e, t) => e.map((n) => ({
+      id: n.name,
+      name: n.name,
+      folderId: t,
+      path: n.name,
+      nodeType: q.ITEM,
+      parentPath: t,
+      contentLength: n.fileContent.size
+    })),
+    []
+  ), y = a(
+    async (e, t, n) => {
+      if (!o || !s) return !1;
+      p(void 0), D.current = n;
+      const i = C ? e.map((c) => ({
+        ...c,
+        name: C(c.name)
+      })) : e, r = j(i);
+      if (r.length > 0) {
+        const c = g ? (g / 1048576).toFixed(2) : 0, Y = u.oversizedFiles || `Files exceed maximum size (${c}MB): ${r.join(", ")}`;
+        return p(Y), !1;
+      }
+      if (P)
+        try {
+          const c = await P(
+            i,
+            n,
+            t
+          );
+          if (!c.valid)
+            return p(
+              c.message || u.validationFailed || "Validation failed"
+            ), !1;
+        } catch {
+          return p(
+            u.validationError || "Validation error occurred"
+          ), !1;
+        }
+      const l = new Map(i.map((c) => [c.name, c]));
+      k(l);
+      const d = M(
+        i,
+        t
+      );
+      return z({ destinationFolder: t }), L(t, d, {
+        destinationFolder: t
+      }).hasConflicts ? !1 : (m?.(i, t), f(), !0);
+    },
+    [
+      o,
+      m,
+      P,
+      C,
+      j,
+      g,
+      u,
+      M,
+      L,
+      f,
+      s
+    ]
+  ), te = a(() => {
+    B(), f();
+  }, [B, f]), ne = a(() => {
+    H(), f();
+  }, [H, f]), re = a(() => {
+    S(), f();
+  }, [S, f]), ie = a(
+    (e) => {
+      _(e), f();
+    },
+    [_, f]
+  ), oe = a(() => {
+    E(), F.current || f();
+  }, [E, F, f]), se = a(
+    (e) => {
+      !o || !s || (e.preventDefault(), e.stopPropagation(), e.dataTransfer.types.includes("Files") && A(!0));
+    },
+    [o, s]
+  ), ce = a(
+    (e) => {
+      if (!o || !s) return;
+      e.preventDefault(), e.stopPropagation();
+      const t = e.currentTarget.getBoundingClientRect(), n = e.clientX, i = e.clientY;
+      (n <= t.left || n >= t.right || i <= t.top || i >= t.bottom) && A(!1);
+    },
+    [o, s]
+  ), ae = a(
+    (e) => {
+      !o || !s || (e.preventDefault(), e.stopPropagation(), e.dataTransfer.types.includes("Files") && (e.dataTransfer.dropEffect = "copy"));
+    },
+    [o, s]
+  ), le = a(
+    async (e, t, n) => {
+      if (!o || !s || (e.preventDefault(), e.stopPropagation(), A(!1), !e.dataTransfer.types.includes("Files")))
+        return;
+      const i = Array.from(e.dataTransfer.items || []), r = [];
+      let l = !1;
+      if (i.length > 0 && i.forEach((c) => {
+        if (c.kind === "file") {
+          if (c.webkitGetAsEntry?.()?.isDirectory) {
+            l = !0;
+            return;
+          }
+          const G = c.getAsFile?.();
+          G && r.push(G);
+        }
+      }), r.length === 0 && e.dataTransfer.files?.length && r.push(...Array.from(e.dataTransfer.files)), r.length === 0) {
+        l && p(
+          u.foldersNotSupported || "Folder upload is not supported"
+        );
+        return;
+      }
+      const d = r.map((c) => ({
+        fileContent: c,
+        name: c.name
+      })), v = T(d);
+      if (v.length === 0) {
+        p(
+          u.unsupportedFiles || "Selected files are not supported"
+        );
+        return;
+      }
+      await y(v, t, n);
+    },
+    [
+      o,
+      T,
+      y,
+      u,
+      s
+    ]
+  ), fe = a(
+    async (e) => {
+      const t = e.currentTarget;
+      if (!t) return;
+      if (!o || !s) {
+        t.value = "";
+        return;
+      }
+      if (!t.files?.length) return;
+      const i = Array.from(t.files).map((l) => ({
+        fileContent: l,
+        name: l.name
+      })), r = T(i);
+      if (r.length === 0) {
+        p(
+          u.unsupportedFiles || "Selected files are not supported"
+        ), t.value = "";
+        return;
+      }
+      try {
+        await y(
+          r,
+          $.current,
+          D.current
+        );
+      } catch {
+        p(u.validationError || "Upload failed");
+      } finally {
+        t.value = "";
+      }
+    },
+    [
+      o,
+      s,
+      T,
+      y,
+      u
+    ]
+  ), ue = N(
+    () => h?.length ? h.join(",") : void 0,
+    [h]
+  ), pe = a(
+    (e, t) => !o || !s ? !1 : ($.current = e, D.current = t, W.current && W.current.click(), !0),
+    [o, s]
+  ), de = a(
+    (e, t) => {
+      if (!w || !o || !s) return;
+      const n = document.createElement("input");
+      n.type = "file", n.accept = ".zip,application/zip", n.multiple = !1, n.style.display = "none";
+      const i = () => {
+        const r = n.files?.[0];
+        if (!r) {
+          document.body.removeChild(n);
+          return;
+        }
+        const l = r.name.replace(/\.zip$/i, ""), d = C ? C(l) : l, v = {
+          id: d,
+          name: d,
+          folderId: e,
+          path: `${e}/${d}`,
+          nodeType: q.FOLDER,
+          parentPath: e,
+          contentLength: r.size,
+          contentType: r.type
+        };
+        if (D.current = t, z({ destinationFolder: e }), k(
+          /* @__PURE__ */ new Map([[v.path, { fileContent: r, name: d }]])
+        ), L(e, [v], {
+          destinationFolder: e
+        }).hasConflicts) {
+          document.body.removeChild(n);
+          return;
+        }
+        try {
+          w(r, d, e);
+        } finally {
+          document.body.removeChild(n);
+        }
+      };
+      n.addEventListener("change", i), document.body.appendChild(n), n.click();
+    },
+    [
+      w,
+      o,
+      s,
+      L,
+      C
+    ]
+  ), he = a(() => {
+    p(void 0);
+  }, []);
+  return {
+    isDragging: x,
+    isDraggingOverWindow: J,
+    uploadError: K,
+    handleDragEnter: se,
+    handleDragLeave: ce,
+    handleDragOver: ae,
+    handleDrop: le,
+    clearError: he,
+    handleUpload: y,
+    openFileDialog: pe,
+    openArchiveDialog: de,
+    fileInputRef: W,
+    fileInputAccept: ue,
+    handleFileInputChange: fe,
+    uploadConflictingFiles: Z,
+    uploadConflictResolutionOpen: b,
+    hasActiveUploadConflictRef: F,
+    openUploadConflictResolution: ee,
+    closeUploadConflictResolution: oe,
+    handleUploadConflictReplace: te,
+    handleUploadConflictDuplicate: ne,
+    handleUploadConflictCancel: re,
+    handleUploadConflictDecideForEach: ie
+  };
+};
+export {
+  Te as useFileUpload
+};

package/dist/components/FileManager/hooks/use-folder-creation.js

@@ -0,0 +1,151 @@
+import { useState as N, useRef as j, useMemo as S, useEffect as q, useCallback as d } from "react";
+import { DialFileNodeType as u } from "../../../models/file.js";
+import { FOLDER_PLACEHOLDER_FILE_NAME as I } from "../constants.js";
+import { DEFAULT_ERRORS as z, DEFAULT_WARNINGS as B } from "../errors.js";
+import { FileManagerCreateFolderType as a } from "../../../types/file-manager.js";
+import { findFolderForPath as R, getNextFolderName as y } from "../utils.js";
+const J = {
+  emptyName: "Folder name cannot be empty",
+  duplicateName: "A folder with this name already exists",
+  hiddenItemWarning: B.hiddenItemWarning,
+  consecutiveDotsError: z.consecutiveDotsError
+}, ee = ({
+  currentFolder: s,
+  onCreateFolder: _,
+  onValidateFolderName: L,
+  validationMessages: b,
+  items: f = []
+}) => {
+  const [r, c] = N(!1), [O, D] = N(null), [P, F] = N(
+    a.Folder
+  ), [h, E] = N(null), [A, C] = N(
+    null
+  ), [$, p] = N(""), l = j(s?.path), T = S(
+    () => ({
+      ...J,
+      ...b
+    }),
+    [b]
+  ), i = S(() => {
+    if (P === a.Folder)
+      return s;
+    if (P === a.Sibling && h) {
+      const e = R(f, h.parentPath || "");
+      return {
+        path: h.parentPath,
+        items: e?.items || [],
+        nodeType: u.FOLDER,
+        name: h?.parentPath?.split("/")?.pop() || "",
+        folderId: ""
+      };
+    }
+    return P === a.Child ? h : s;
+  }, [P, h, s, f]);
+  q(() => {
+    const e = i?.path;
+    l.current !== e && r && (c(!1), D(null), p("")), l.current = e;
+  }, [i?.path, r]);
+  const v = d(() => {
+    if (r) return;
+    l.current = s?.path || "/";
+    const e = `__new_folder_${Date.now()}`, t = (s?.items ?? []).filter(
+      (n) => n.nodeType === u.FOLDER
+    ), o = y(t);
+    D(e), p(o), c(!0), F(a.Folder), E(s || null);
+  }, [r, s]), x = d(
+    (e) => {
+      if (r) return;
+      l.current = e?.parentPath || "/";
+      const t = `__new_folder_${Date.now()}`, n = (R(f, e?.parentPath || "/")?.items ?? []).filter(
+        (g) => g.nodeType === u.FOLDER
+      ), m = y(n);
+      p(m), D(t), c(!0), F(a.Sibling), E(e), C(e?.parentPath || "/");
+    },
+    [r, f]
+  ), W = d(
+    (e) => {
+      if (r) return;
+      l.current = e.path;
+      const t = `__new_folder_${Date.now()}`, o = (e?.items ?? []).filter(
+        (m) => m.nodeType === u.FOLDER
+      ), n = y(o);
+      p(n), D(t), c(!0), F(a.Child), E(e), C(e?.path || "/");
+    },
+    [r]
+  ), G = d(
+    (e) => {
+      if (r) return;
+      l.current = e?.parentPath || "/";
+      const o = (R(f, e?.parentPath || "/")?.items ?? []).filter(
+        (m) => m.nodeType === u.FOLDER
+      ), n = y(o);
+      p(n), F(a.Sibling), E(e), C(e?.parentPath || "/"), c(!0);
+    },
+    [r, f]
+  ), M = d(
+    (e) => {
+      if (r) return;
+      l.current = e.path;
+      const t = (e?.items ?? []).filter(
+        (n) => n.nodeType === u.FOLDER
+      ), o = y(t);
+      p(o), F(a.Child), E(e), C(e?.path || "/"), c(!0);
+    },
+    [r]
+  ), w = d(() => {
+    c(!1), D(null), F(a.Folder), E(null), C(null), l.current = void 0, p("");
+  }, []), U = d(
+    (e) => {
+      const t = e.trim();
+      if (!t)
+        return T.emptyName;
+      if (t.includes(".."))
+        return T.consecutiveDotsError;
+      if (t.startsWith(".") && t.length > 1)
+        return T.hiddenItemWarning;
+      if (i && i.items && new Set(
+        (i.items ?? []).filter((n) => n.nodeType === u.FOLDER).map((n) => n.name.toLowerCase())
+      ).has(t.toLowerCase()))
+        return T.duplicateName;
+      if (L && i) {
+        const o = L(t, i);
+        if (o)
+          return o;
+      }
+      return null;
+    },
+    [i, L, T]
+  ), k = d(
+    async (e) => {
+      const t = e.trim();
+      if (!t)
+        return;
+      w();
+      const n = `${i?.path ?? "/"}/${t}`, m = `${n}/${I}`, H = {
+        fileContent: new File([], I, {
+          type: "text/plain"
+        }),
+        name: I
+      };
+      _ && await _(H, n, m);
+    },
+    [i, _, w]
+  );
+  return {
+    isCreatingFolder: r,
+    createdFolderPath: A,
+    newFolderTempId: O,
+    newFolderDefaultName: $,
+    startFolderCreation: v,
+    startGridSiblingFolderCreation: x,
+    startTreeSiblingFolderCreation: G,
+    startGridChildFolderCreation: W,
+    startTreeChildFolderCreation: M,
+    cancelFolderCreation: w,
+    saveFolderCreation: k,
+    validateFolderName: U
+  };
+};
+export {
+  ee as useFolderCreation
+};

package/dist/components/FileManager/hooks/use-grid-actions-column.js

@@ -0,0 +1,65 @@
+import { jsx as e } from "react/jsx-runtime";
+import { DialDropdown as m } from "../../Dropdown/Dropdown.js";
+import { DialIcon as f } from "../../Icon/Icon.js";
+import { BASE_ICON_PROPS as d } from "../../../constants/icon.js";
+import { IconDotsVertical as u } from "@tabler/icons-react";
+import { useRef as p, useEffect as h, useCallback as x, useMemo as C } from "react";
+import { mergeClasses as D } from "../../../utils/merge-classes.js";
+const w = ({
+  getContextMenuItems: r,
+  isRowDisabled: o,
+  allowedFileTypes: a,
+  maxSelectableFileSize: s,
+  buttonClassName: n
+}) => {
+  const l = p(r);
+  h(() => {
+    l.current = r;
+  }, [r]);
+  const i = x(
+    (t) => {
+      if (!t.data || o(
+        t.data,
+        a,
+        s
+      )) return null;
+      const c = t.data ? l.current?.(t.data) ?? [] : [];
+      return c.length ? /* @__PURE__ */ e(
+        m,
+        {
+          placement: "bottom-start",
+          allowedPlacements: ["top-start", "top-end", "bottom-start"],
+          items: c,
+          className: D("sticky right-0", n),
+          children: /* @__PURE__ */ e(
+            f,
+            {
+              className: "text-secondary mx-2 flex flex-row gap-2 hover:text-accent-primary cursor-default",
+              icon: /* @__PURE__ */ e(u, { ...d })
+            }
+          )
+        }
+      ) : null;
+    },
+    [a, s, n, o]
+  );
+  return { actionsColumnDef: C(
+    () => ({
+      colId: "__actions",
+      headerName: "",
+      width: 44,
+      minWidth: 44,
+      maxWidth: 44,
+      suppressSizeToFit: !0,
+      sortable: !1,
+      resizable: !1,
+      filter: !1,
+      floatingFilter: !1,
+      cellRenderer: i
+    }),
+    [i]
+  ) };
+};
+export {
+  w as useGridActionsColumn
+};