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

package/dist/components/FileManager/FileManagerTooltip.js

@@ -0,0 +1,92 @@
+import { jsx as s, Fragment as C, jsxs as R } from "react/jsx-runtime";
+import { useState as x, useEffect as E, useMemo as L } from "react";
+import { createPortal as y } from "react-dom";
+import { DialTooltipContainer as F } from "../Tooltip/TooltipContainer.js";
+import { DialTooltipTrigger as N } from "../Tooltip/TooltipTrigger.js";
+import S from "classnames";
+import { DialTooltipContent as T } from "../Tooltip/TooltipContent.js";
+const D = ({
+  disabledGridRowIds: v,
+  gridRows: p,
+  getDisabledTooltip: u,
+  getRowDisabledTooltip: f,
+  allowedFileTypes: h,
+  maxSelectableFileSize: w
+}) => {
+  const [m, o] = x(null), [r, d] = x(null);
+  E(() => {
+    const e = () => {
+      o(null), d(null);
+    };
+    return window.addEventListener("scroll", e, !0), () => window.removeEventListener("scroll", e, !0);
+  }, []), E(() => {
+    const e = (M) => {
+      const c = M.target.closest(
+        ".ag-row"
+      );
+      if (!c) {
+        o((t) => t && null);
+        return;
+      }
+      const l = new DOMParser().parseFromString(
+        c.getAttribute("row-id") || "",
+        "text/html"
+      ).documentElement.textContent;
+      l && v.has(l) ? o((t) => t !== l ? (d(c.getBoundingClientRect()), l) : t) : o((t) => t && null);
+    }, g = () => {
+      o(null), d(null);
+    }, n = document.querySelector(
+      '[aria-label="File Manager Grid View"]'
+    );
+    if (n)
+      return n.addEventListener("mousemove", e), n.addEventListener("mouseleave", g), () => {
+        n.removeEventListener("mousemove", e), n.removeEventListener("mouseleave", g);
+      };
+  }, [v]);
+  const i = L(() => {
+    if (m)
+      return p.find((e) => e.path === m);
+  }, [m, p]), a = L(() => {
+    if (i) {
+      if (u) {
+        const e = u(i);
+        if (e) return e;
+      }
+      return f(
+        i,
+        h,
+        w
+      );
+    }
+  }, [
+    i,
+    u,
+    f,
+    h,
+    w
+  ]);
+  return /* @__PURE__ */ s(C, { children: a && r && y(
+    /* @__PURE__ */ R(F, { open: !0, placement: "top", children: [
+      /* @__PURE__ */ s(N, { asChild: !0, children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: S(
+            "fixed z-[-1]",
+            a && "pointer-events-none"
+          ),
+          style: {
+            top: r.top,
+            left: r.left,
+            width: r.width,
+            height: r.height
+          }
+        }
+      ) }),
+      /* @__PURE__ */ s(T, { className: "max-w-[300px] rounded border border-ui-outline-primary bg-ui-popover px-3 py-1.5 text-center text-primary shadow-md fill-ui-popover", children: a })
+    ] }),
+    document.body
+  ) });
+};
+export {
+  D as FileManagerTooltip
+};

package/dist/components/FileManager/components/ConflictResolutionPopup/ConflictResolutionPopup.js

@@ -0,0 +1,293 @@
+import { jsx as t, jsxs as r, Fragment as ce } from "react/jsx-runtime";
+import { DialNeutralButton as de, DialPrimaryButton as pe } from "../../../Button/ButtonWrappers.js";
+import { DialDropdown as me } from "../../../Dropdown/Dropdown.js";
+import { BASE_FILE_MANAGER_ICON_SIZE as W } from "../../constants.js";
+import { DialFileName as fe } from "../../../FileName/FileName.js";
+import { DialFolderName as he } from "../../../FolderName/FolderName.js";
+import { DialGrid as ue } from "../../../Grid/Grid.js";
+import { DialPopup as De } from "../../../Popup/Popup.js";
+import { DialRadioGroup as Z } from "../../../RadioGroup/RadioGroup.js";
+import { DIAL_ICON_SIZE as Re } from "../../../../constants/icon.js";
+import { DialFileNodeType as H } from "../../../../models/file.js";
+import { DropdownTrigger as Ce } from "../../../../types/dropdown.js";
+import { DialFileManagerConflictActions as a, DialFileManagerConflictStrategies as l } from "../../../../types/file-manager.js";
+import { PopupSize as K } from "../../../../types/popup.js";
+import { RadioGroupOrientation as $ } from "../../../../types/radio-group.js";
+import { IconChevronDown as Ne, IconCircleFilled as w } from "@tabler/icons-react";
+import q from "classnames";
+import { useState as h, useMemo as u, useCallback as x } from "react";
+const _e = ({
+  open: J,
+  onClose: b,
+  onReplace: D,
+  onDuplicate: R,
+  onDecideForEach: C,
+  conflictingFiles: i,
+  singleFileTitle: Q = "Replace Or Duplicate Item",
+  multipleFilesTitle: U = "Replace Or Duplicate Items",
+  message: V,
+  actionLabels: N,
+  strategyLabels: g,
+  confirmLabel: X = "Confirm",
+  cancelLabel: Y = "Cancel",
+  nameColumnLabel: I = "Name",
+  actionColumnLabel: A = "Action"
+}) => {
+  const o = i.length === 1, ee = o ? i[0]?.name : "", s = N?.[a.Replace] ?? "Replace", p = N?.[a.Duplicate] ?? "Duplicate", M = N?.[a.Cancel] ?? "Cancel", S = g?.[l.ReplaceAll] ?? "Replace all", O = g?.[l.DuplicateAll] ?? "Duplicate all", v = g?.[l.DecideForEach] ?? "Decide for each", [y, F] = h(
+    a.Replace
+  ), [n, z] = h(
+    l.ReplaceAll
+  ), [m, k] = h(
+    new Map(
+      i.map((e) => [
+        e.path,
+        a.Replace
+      ])
+    )
+  ), [E, B] = h(
+    void 0
+  ), te = o ? Q : U, ae = /* @__PURE__ */ r(ce, { children: [
+    "Item with the name ",
+    /* @__PURE__ */ r("span", { className: "text-primary", children: [
+      '"',
+      ee,
+      '"'
+    ] }),
+    " ",
+    "already exists in this destination."
+  ] }), le = `${i.length} items with the same names already exist in this destination.`, ie = V ?? (o ? ae : le), oe = u(
+    () => [
+      {
+        id: a.Replace,
+        name: s
+      },
+      {
+        id: a.Duplicate,
+        name: p
+      }
+    ],
+    [s, p]
+  ), P = u(() => i.map((e) => ({
+    id: e.path,
+    name: e.name,
+    path: e.path,
+    nodeType: e.nodeType ?? H.ITEM,
+    action: m.get(e.path) || a.Replace
+  })), [i, m]), T = u(() => [
+    {
+      field: "name",
+      headerName: I,
+      flex: 1,
+      minWidth: 200,
+      floatingFilter: !1,
+      filter: !1,
+      resizable: !1,
+      cellRenderer: (e) => e.data?.nodeType === H.FOLDER ? /* @__PURE__ */ t(
+        he,
+        {
+          name: e.data.name,
+          iconSize: W
+        }
+      ) : /* @__PURE__ */ t(
+        fe,
+        {
+          name: e.data.name,
+          iconSize: W
+        }
+      )
+    },
+    {
+      field: "action",
+      headerName: A,
+      width: 140,
+      suppressSizeToFit: !0,
+      sortable: !1,
+      filter: !1,
+      floatingFilter: !1,
+      resizable: !1,
+      cellRenderer: (e) => {
+        if (!e.data) return null;
+        const c = [
+          {
+            key: a.Replace,
+            label: s,
+            icon: /* @__PURE__ */ t(w, { size: 10, className: "text-accent-tertiary" })
+          },
+          {
+            key: a.Duplicate,
+            label: p,
+            icon: /* @__PURE__ */ t(w, { size: 10, className: "text-accent-secondary" })
+          },
+          {
+            key: a.Cancel,
+            label: M,
+            icon: /* @__PURE__ */ t(w, { size: 10, className: "text-error" })
+          }
+        ], G = c.find(
+          (d) => d.key === e.data.action
+        ), L = E === e.data.path;
+        return /* @__PURE__ */ t("div", { className: "flex items-center h-full", children: /* @__PURE__ */ t(
+          me,
+          {
+            trigger: [Ce.Click],
+            open: L,
+            items: c,
+            onItemClick: ({ key: d }) => {
+              k((se) => {
+                const j = new Map(se);
+                return j.set(
+                  e.data.path,
+                  d
+                ), j;
+              }), B(void 0);
+            },
+            placement: "bottom-start",
+            matchReferenceWidth: !1,
+            allowedPlacements: ["bottom-start", "top-start"],
+            onOpenChange: (d) => {
+              B(d ? e.data.path : void 0);
+            },
+            children: /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+                G?.icon,
+                G?.label ?? s
+              ] }),
+              /* @__PURE__ */ t(
+                Ne,
+                {
+                  size: Re.SM,
+                  className: q(
+                    "text-secondary transition-transform",
+                    L && "rotate-180"
+                  )
+                }
+              )
+            ] })
+          }
+        ) });
+      }
+    }
+  ], [
+    I,
+    A,
+    s,
+    p,
+    M,
+    E
+  ]), ne = u(
+    () => [
+      {
+        id: l.ReplaceAll,
+        name: S
+      },
+      {
+        id: l.DuplicateAll,
+        name: O
+      },
+      {
+        id: l.DecideForEach,
+        name: v,
+        content: n === l.DecideForEach ? /* @__PURE__ */ t("div", { className: "mt-4", children: /* @__PURE__ */ t(
+          ue,
+          {
+            columnDefs: T,
+            rowData: P,
+            getRowId: (e) => e.id,
+            wrapCustomCellRenderers: !1,
+            alternateOddRowColors: !1,
+            additionalGridOptions: {
+              domLayout: "autoHeight"
+            }
+          }
+        ) }) : void 0
+      }
+    ],
+    [
+      S,
+      O,
+      v,
+      n,
+      T,
+      P
+    ]
+  ), f = x(() => {
+    F(a.Replace), z(l.ReplaceAll), k(
+      new Map(
+        i.map((e) => [
+          e.path,
+          a.Replace
+        ])
+      )
+    );
+  }, [i]), _ = x(() => {
+    f(), b();
+  }, [f, b]), re = x(() => {
+    if (f(), o)
+      y === a.Replace ? D() : R();
+    else if (n === l.ReplaceAll)
+      D();
+    else if (n === l.DuplicateAll)
+      R();
+    else if (n === l.DecideForEach && C) {
+      const e = i.map(
+        (c) => ({
+          file: c,
+          action: m.get(c.path) || a.Replace
+        })
+      );
+      C(e);
+    }
+  }, [
+    f,
+    o,
+    y,
+    D,
+    R,
+    n,
+    C,
+    i,
+    m
+  ]);
+  return /* @__PURE__ */ t(
+    De,
+    {
+      open: J,
+      onClose: _,
+      size: o ? K.Sm : K.Md,
+      className: q([!o && "w-[600px]"]),
+      header: te,
+      dividers: !1,
+      preventKeyboardOnOpen: !0,
+      footer: /* @__PURE__ */ r("div", { className: "flex justify-end gap-3 py-4 px-6 border-t border-tertiary", children: [
+        /* @__PURE__ */ t(de, { onClick: _, label: Y }),
+        /* @__PURE__ */ t(pe, { onClick: re, label: X })
+      ] }),
+      children: /* @__PURE__ */ r("div", { className: "px-6 py-4", children: [
+        /* @__PURE__ */ t("p", { className: "text-secondary mb-4 break-words", children: ie }),
+        o ? /* @__PURE__ */ t(
+          Z,
+          {
+            elementId: "single-file-conflict",
+            radioButtons: oe,
+            activeRadioButton: y,
+            orientation: $.Column,
+            onChange: (e) => F(e)
+          }
+        ) : /* @__PURE__ */ t(
+          Z,
+          {
+            elementId: "multiple-files-conflict",
+            radioButtons: ne,
+            activeRadioButton: n,
+            orientation: $.Column,
+            onChange: (e) => z(e),
+            formItemChildrenClassName: "gap-3"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  _e as ConflictResolutionPopup
+};

package/dist/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.js

@@ -0,0 +1,201 @@
+import { jsx as e, jsxs as s, Fragment as A } from "react/jsx-runtime";
+import { DialPopup as Z } from "../../../Popup/Popup.js";
+import { DialFileManager as $ } from "../../FileManager.js";
+import { PopupSize as P } from "../../../../types/popup.js";
+import { DialPrimaryButton as b, DialNeutralButton as F } from "../../../Button/ButtonWrappers.js";
+import { DialButton as L } from "../../../Button/Button.js";
+import { ButtonAppearance as ee } from "../../../../types/button.js";
+import { IconFolderPlus as B, IconEye as ie, IconDotsVertical as oe } from "@tabler/icons-react";
+import { BASE_ICON_PROPS as r } from "../../../../constants/icon.js";
+import { DialSwitch as le } from "../../../Switch/Switch.js";
+import { useState as R, useRef as ne, useMemo as x, useCallback as j } from "react";
+import { DestinationFolderMode as T } from "../../../../types/file-manager.js";
+import { DialTooltip as ae } from "../../../Tooltip/Tooltip.js";
+import { mergeClasses as te } from "../../../../utils/merge-classes.js";
+import { DialNotification as se } from "../../../Notification/Notification.js";
+import { DialDropdown as re } from "../../../Dropdown/Dropdown.js";
+import { useIsMobileScreen as ce } from "../../../../hooks/use-is-mobile-screen.js";
+import { excludePathsFromTree as me } from "../../utils.js";
+const we = ({
+  onClose: N,
+  onConfirm: y,
+  onFolderPopupPathChange: v,
+  setDestinationFolderPath: C,
+  open: E,
+  copyLabel: D = "Copy",
+  moveLabel: O = "Move",
+  addFolderLabel: c = "Add folder",
+  mode: m = T.Copy,
+  hiddenFilesSwitcherLabel: f = "Show hidden files",
+  showHiddenFileSwitcher: l = !0,
+  showCreateFolderButton: n = !0,
+  onUploadFiles: _,
+  onValidateUpload: G,
+  maxFileSize: H,
+  header: U,
+  sourceFolder: p,
+  disabledPathTooltip: V = "Unavailable for the original path. Please select another folder",
+  path: a,
+  collapsedFileTree: q = !1,
+  alertProps: M,
+  processDestinationFolderPath: d,
+  excludedPaths: I,
+  items: k,
+  ...o
+}) => {
+  const [S, w] = R(!1), [J, h] = R(!1), u = ne(null), K = ce(), Q = x(
+    () => me(k, I),
+    [k, I]
+  ), z = j((i) => {
+    w(i);
+  }, []), W = x(() => {
+    const i = [];
+    return n && i.push({
+      key: "add-folder",
+      label: c,
+      icon: /* @__PURE__ */ e(B, { ...r, className: "text-secondary" }),
+      onClick: () => {
+        u.current?.createFolder(), h(!1);
+      }
+    }), l && i.push({
+      key: "show-hidden-files",
+      label: f,
+      icon: /* @__PURE__ */ e(ie, { ...r, className: "text-secondary" }),
+      onClick: () => {
+        w((t) => !t), h(!1);
+      }
+    }), i;
+  }, [
+    c,
+    f,
+    l,
+    n
+  ]), X = j(
+    (i) => {
+      if (i) {
+        let t = d ? d(i) : i;
+        v?.(t), C?.(t);
+      }
+    },
+    [
+      v,
+      C,
+      d
+    ]
+  ), Y = m === T.Copy ? "Copy to" : "Move to", g = x(() => !a || !p ? !1 : p === a, [a, p]);
+  return /* @__PURE__ */ e(
+    Z,
+    {
+      open: E,
+      onClose: () => {
+        N();
+      },
+      size: P.Lg,
+      dividerFooter: !0,
+      dividers: !1,
+      className: "md:!h-[800px] !bg-layer-2",
+      footer: /* @__PURE__ */ s("div", { className: "flex justify-between items-center gap-2 p-4 md:px-6", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-4 min-w-0", children: K ? /* @__PURE__ */ e(
+          re,
+          {
+            items: W,
+            open: J,
+            onOpenChange: h,
+            children: /* @__PURE__ */ e(
+              L,
+              {
+                className: "size-9 shrink-0",
+                "aria-label": "More options",
+                iconBefore: /* @__PURE__ */ e(
+                  oe,
+                  {
+                    ...r,
+                    className: "text-secondary"
+                  }
+                )
+              }
+            )
+          }
+        ) : /* @__PURE__ */ s(A, { children: [
+          n && /* @__PURE__ */ e(
+            b,
+            {
+              label: c,
+              appearance: ee.Ghost,
+              iconBefore: /* @__PURE__ */ e(B, { ...r }),
+              onClick: () => {
+                u.current?.createFolder();
+              }
+            }
+          ),
+          n && l && /* @__PURE__ */ e("div", { className: "w-px h-[26px] bg-controls-disable-accent my-2" }),
+          l && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { className: "inline-flex items-center cursor-pointer", children: /* @__PURE__ */ e(
+            le,
+            {
+              label: f,
+              isOn: S,
+              onChange: z,
+              switchId: "hidden-files-switch-modal"
+            }
+          ) }) })
+        ] }) }),
+        /* @__PURE__ */ s("div", { className: "flex space-x-4 items-center", children: [
+          /* @__PURE__ */ e(F, { onClick: N, label: "Cancel" }),
+          g ? /* @__PURE__ */ e(ae, { tooltip: V, children: /* @__PURE__ */ e(
+            b,
+            {
+              onClick: y,
+              label: m === "copy" ? D : O,
+              disabled: g,
+              "aria-disabled": g
+            }
+          ) }) : /* @__PURE__ */ e(
+            b,
+            {
+              onClick: y,
+              label: m === "copy" ? D : O
+            }
+          )
+        ] })
+      ] }),
+      header: U ?? Y,
+      children: /* @__PURE__ */ s("div", { className: "bg-layer-2 h-full flex flex-col", children: [
+        M && /* @__PURE__ */ e("div", { className: "px-6 mb-4 pt-4", children: /* @__PURE__ */ e(se, { ...M }) }),
+        /* @__PURE__ */ e("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ e(
+          $,
+          {
+            ...o,
+            items: Q,
+            gridClassName: "size-full",
+            className: te(
+              o.className,
+              "bg-layer-2 h-full flex pt-0"
+            ),
+            actionsRef: u,
+            path: a,
+            showHiddenFiles: S,
+            onShowHiddenFilesChange: z,
+            treeOptions: {
+              ...o.treeOptions,
+              collapsed: q,
+              expandedPaths: /* @__PURE__ */ new Set([o.rootItem?.path || "/"]),
+              header: o.treeOptions?.header
+            },
+            gridOptions: { ...o.gridOptions, selectionMode: void 0 },
+            navigationPanelOptions: {
+              elementId: "file-manager-destination-search",
+              ...o.navigationPanelOptions
+            },
+            onUploadFiles: _,
+            onValidateUpload: G,
+            onPathChange: X,
+            maxFileSize: H
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  we as DialDestinationFolderPopup
+};

package/dist/components/FileManager/components/DialFileManagerItemSummaryCell/DialFileManagerItemSummaryCell.js

@@ -0,0 +1,52 @@
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { DialFileManagerItemName as I } from "../FileManagerItemName/FileManagerItemName.js";
+import { BASE_FILE_MANAGER_ICON_SIZE as N } from "../../constants.js";
+import { DialFileNodeType as t } from "../../../../models/file.js";
+import { DialItemType as m } from "../../../../types/item.js";
+import { DialDateCellRenderer as F } from "../../../Grid/renderers/DateCellRenderer.js";
+import { IconCircleFilled as D } from "@tabler/icons-react";
+import { formatBytes as E } from "../../utils.js";
+const j = ({
+  id: o,
+  name: n,
+  nodeType: r,
+  size: i,
+  updatedAt: l,
+  dateLocale: s,
+  dateOptions: c,
+  shared: f,
+  sharedIndicatorClassName: d,
+  hideTooltip: a = !1,
+  forbiddenSymbolsRegExp: p,
+  forbiddenSymbolsTooltip: x
+}) => /* @__PURE__ */ e("div", { className: "flex", children: /* @__PURE__ */ e("div", { className: "flex flex-1 min-w-0", children: /* @__PURE__ */ e(
+  I,
+  {
+    type: r === t.FOLDER ? m.Folder : m.File,
+    name: n,
+    elementId: o,
+    shared: f,
+    iconSize: N,
+    sharedIndicatorClassName: d,
+    hideTooltip: a,
+    forbiddenSymbolsRegExp: p,
+    forbiddenSymbolsTooltip: x,
+    details: /* @__PURE__ */ y("div", { className: "flex items-center gap-1 dial-tiny-text text-secondary", children: [
+      /* @__PURE__ */ e("span", { children: r === t.ITEM ? E(i) : "" }),
+      l && i && /* @__PURE__ */ e(D, { size: 2, className: "text-secondary" }),
+      l ? /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+        F,
+        {
+          value: l,
+          locale: s?.toString(),
+          options: c,
+          className: "dial-tiny-text text-secondary",
+          hideTooltip: a
+        }
+      ) }) : null
+    ] })
+  }
+) }) });
+export {
+  j as DialFileManagerItemSummaryCell
+};