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

package/dist/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.js

@@ -0,0 +1,103 @@
+import { jsxs as r, Fragment as B, jsx as e } from "react/jsx-runtime";
+import { DialButton as D } from "../../../Button/Button.js";
+import { DialNeutralButton as a, DialPrimaryButton as P } from "../../../Button/ButtonWrappers.js";
+import { DialDropdown as g } from "../../../Dropdown/Dropdown.js";
+import { BASE_ICON_PROPS as s } from "../../../../constants/icon.js";
+import { ButtonAppearance as y } from "../../../../types/button.js";
+import { IconX as I, IconDotsVertical as C } from "@tabler/icons-react";
+import { ACTIONS_GAP as O, CONTAINER_PADDING as R } from "./constants.js";
+import { useIsMobileScreen as F } from "../../../../hooks/use-is-mobile-screen.js";
+import { useFlexibleActions as M } from "../../../../hooks/use-flexible-actions.js";
+import { FlexibleActionsDirection as S } from "../../../../types/flexible-actions.js";
+const H = ({ getSelectionLabel: c, onClearSelection: m, actions: l, selectedCount: p }) => {
+  const f = F(), {
+    refs: { containerRef: d, leftSectionRef: b, measureRef: u },
+    visibleActions: h,
+    hiddenActions: n
+  } = M({
+    actions: l,
+    direction: S.Reverse,
+    dependencies: [f],
+    actionsGap: O,
+    containerPadding: R
+  }), x = c(p);
+  return /* @__PURE__ */ r(B, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: u,
+        className: "absolute top-0 left-0 invisible pointer-events-none overflow-hidden whitespace-nowrap flex gap-3",
+        children: l.map(({ key: o, icon: t, title: i }) => /* @__PURE__ */ e(
+          a,
+          {
+            iconBefore: t,
+            label: i,
+            hideTitleOnMobile: !0
+          },
+          o
+        ))
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: d,
+        className: "rounded bg-layer-0 p-2 flex justify-between items-center w-full",
+        role: "toolbar",
+        "aria-label": "File bulk actions",
+        children: [
+          /* @__PURE__ */ e("div", { ref: b, children: /* @__PURE__ */ e(
+            P,
+            {
+              label: x,
+              onClick: m,
+              textClassName: "text-accent-primary whitespace-nowrap",
+              appearance: y.Ghost,
+              iconBefore: /* @__PURE__ */ e(I, { ...s, className: "text-accent-primary" })
+            }
+          ) }),
+          /* @__PURE__ */ r("div", { className: "flex flex-1 w-full gap-3 items-center justify-end", children: [
+            n.length > 0 && /* @__PURE__ */ e(
+              g,
+              {
+                items: n,
+                allowedPlacements: ["bottom", "bottom-start"],
+                children: /* @__PURE__ */ e(
+                  D,
+                  {
+                    className: "h-[38px]",
+                    iconBefore: /* @__PURE__ */ e(
+                      C,
+                      {
+                        ...s,
+                        className: "text-secondary hover:text-accent-primary"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            h.map(
+              ({ key: o, icon: t, tooltip: i, title: N, onClick: A, disabled: v }) => /* @__PURE__ */ e(
+                a,
+                {
+                  className: "!p-[9px]",
+                  iconBefore: t,
+                  label: N,
+                  hideTitleOnMobile: !0,
+                  disabled: v,
+                  tooltipProps: { tooltip: i },
+                  onClick: (w) => A?.({ key: o, domEvent: w })
+                },
+                o
+              )
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  H as DialFileManagerBulkActionsToolbar
+};

package/dist/components/FileManager/components/FileManagerBulkActionsToolbar/constants.js

@@ -0,0 +1,5 @@
+const A = 12, N = 8;
+export {
+  A as ACTIONS_GAP,
+  N as CONTAINER_PADDING
+};

package/dist/components/FileManager/components/FileManagerDeleteConfirmationPopup/FileManagerDeleteConfirmationPopup.js

@@ -0,0 +1,56 @@
+import { jsxs as l, jsx as n, Fragment as t } from "react/jsx-runtime";
+import "react";
+import { DialConfirmationPopup as x } from "../../../ConfirmationPopup/ConfirmationPopup.js";
+import { ConfirmationPopupVariant as y } from "../../../../types/confirmation-popup.js";
+const P = ({
+  open: i,
+  itemsToDelete: a,
+  onClose: c,
+  onConfirm: o,
+  cancelLabel: s = "Cancel",
+  confirmLabel: m = "Delete",
+  titleRenderer: p,
+  contentRenderer: d
+}) => {
+  const r = a.map((e) => e.name), h = p?.(r) || "Confirm Deleting Items", f = /* @__PURE__ */ l("div", { className: "px-6 py-3 dial-small-text", children: [
+    /* @__PURE__ */ n("p", { className: "text-secondary mb-3", children: a.length === 1 ? /* @__PURE__ */ l(t, { children: [
+      "Do you want to delete file or folder",
+      " ",
+      /* @__PURE__ */ l("span", { className: "text-primary break-all", children: [
+        '"',
+        a[0].name,
+        '"'
+      ] }),
+      "?"
+    ] }) : /* @__PURE__ */ l(t, { children: [
+      "Do you want to delete the following",
+      " ",
+      /* @__PURE__ */ n("span", { className: "text-primary", children: a.length }),
+      " items?"
+    ] }) }),
+    a.length > 1 && /* @__PURE__ */ n(t, { children: a.length <= 10 ? /* @__PURE__ */ n("ul", { className: "space-y-1 text-primary list-none", children: a.map((e) => /* @__PURE__ */ n("li", { className: "truncate", children: e.name }, e.path)) }) : /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ n("ul", { className: "space-y-1 text-primary list-none mb-2", children: a.slice(0, 10).map((e) => /* @__PURE__ */ n("li", { className: "truncate", children: e.name }, e.path)) }),
+      /* @__PURE__ */ l("p", { className: "text-secondary italic", children: [
+        "... and ",
+        a.length - 10,
+        " more"
+      ] })
+    ] }) })
+  ] }), u = d?.(r) || f;
+  return /* @__PURE__ */ n(
+    x,
+    {
+      open: i,
+      header: h,
+      confirmLabel: m,
+      cancelLabel: s,
+      variant: y.Danger,
+      onClose: c,
+      onConfirm: o,
+      children: u
+    }
+  );
+};
+export {
+  P as FileManagerDeleteConfirmationPopup
+};

package/dist/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.js

@@ -0,0 +1,69 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { DialIcon as x } from "../../../Icon/Icon.js";
+import { BASE_ICON_PROPS as m } from "../../../../constants/icon.js";
+import { DialFileIcon as N } from "../../../FileIcon/FileIcon.js";
+import { DialItemType as c } from "../../../../types/item.js";
+import { DialSharedEntityIndicator as f } from "../../../SharedEntityIndicator/SharedEntityIndicator.js";
+import { IconFolder as I } from "@tabler/icons-react";
+import { DialLoader as D } from "../../../Loader/Loader.js";
+const v = ({
+  name: o,
+  type: n,
+  shared: a = !1,
+  loading: p = !1,
+  sharedIndicatorClassName: r,
+  sharedIndicatorTooltip: t,
+  fileExtension: d,
+  ...i
+}) => {
+  const s = (l) => /* @__PURE__ */ u("span", { className: "inline-flex relative text-secondary", role: "img", children: [
+    l,
+    a && /* @__PURE__ */ e("span", { className: "absolute -bottom-0.5 -left-0.5", children: /* @__PURE__ */ e(
+      f,
+      {
+        className: r,
+        sharedIndicatorTooltip: t
+      }
+    ) })
+  ] });
+  if (p)
+    return s(/* @__PURE__ */ e(D, {}));
+  if (n === c.File) {
+    const l = d || (o.includes(".") ? o.split(".").pop() : void 0);
+    return /* @__PURE__ */ e(
+      N,
+      {
+        ...i,
+        extension: l ?? "",
+        className: "text-secondary",
+        indicator: a ? /* @__PURE__ */ e(
+          f,
+          {
+            className: r,
+            sharedIndicatorTooltip: t
+          }
+        ) : null,
+        label: "File type icon"
+      }
+    );
+  }
+  return n === c.Folder ? s(
+    /* @__PURE__ */ e(
+      x,
+      {
+        icon: /* @__PURE__ */ e(
+          I,
+          {
+            className: i.className,
+            size: i.size ?? m.size,
+            stroke: i.stroke ?? m.stroke
+          }
+        ),
+        className: "inline-block align-middle"
+      }
+    )
+  ) : null;
+};
+export {
+  v as DialFileManagerItemIcon
+};

package/dist/components/FileManager/components/FileManagerItemName/FileManagerItemName.js

@@ -0,0 +1,100 @@
+import { jsx as m } from "react/jsx-runtime";
+import { DialFileManagerItemNameInput as j } from "../FileManagerItemNameInput/FileManagerItemNameInput.js";
+import { useEditableItem as y } from "../../../../hooks/use-editable-item.js";
+import { DialItemType as u } from "../../../../types/item.js";
+import { DialFileName as A } from "../../../FileName/FileName.js";
+import { DialFolderName as B } from "../../../FolderName/FolderName.js";
+import { BASE_ICON_SIZE as L } from "../../../../constants/icon.js";
+import { getForbiddenSymbolsTooltip as O } from "../../utils.js";
+const K = ({
+  name: e,
+  type: i,
+  elementId: I,
+  editing: o = !1,
+  loading: r = !1,
+  creating: s = !1,
+  shared: n = !1,
+  iconSize: a = L,
+  validate: d,
+  onSave: v,
+  fileExtension: F,
+  onCancel: N,
+  onCreateFolderCancel: g,
+  onCreateFolderSave: x,
+  inputContainerClassName: D,
+  sharedIndicatorClassName: t,
+  sharedIndicatorTooltip: b,
+  hideTooltip: f = !1,
+  forbiddenSymbolsRegExp: E,
+  forbiddenSymbolsTooltip: M,
+  ...c
+}) => {
+  const { value: w, invalid: C, invalidMessage: R, onChange: S, inputRef: _ } = y({
+    value: e,
+    isEditing: o,
+    isCreating: s,
+    isLoading: r,
+    onValidate: d,
+    onCancel: N,
+    onSave: v,
+    onCreateFolderCancel: g,
+    onCreateFolderSave: x
+  });
+  if (!o && !s) {
+    const l = O(
+      {
+        name: e,
+        isFolder: i === u.Folder
+      },
+      E,
+      M
+    ), p = !!l;
+    return i === u.Folder ? /* @__PURE__ */ m(
+      B,
+      {
+        name: e,
+        loading: r,
+        shared: n,
+        iconSize: a,
+        className: "max-w-[428px] truncate",
+        sharedIndicatorClassName: t,
+        hideTooltip: f,
+        isInvalidName: p,
+        tooltipContent: l
+      }
+    ) : /* @__PURE__ */ m(
+      A,
+      {
+        className: "max-w-[428px]",
+        ...c,
+        name: e,
+        shared: n,
+        iconSize: a,
+        sharedIndicatorClassName: t,
+        hideTooltip: f,
+        isInvalidName: p,
+        tooltipContent: l
+      }
+    );
+  }
+  return /* @__PURE__ */ m(
+    j,
+    {
+      type: i,
+      name: w,
+      elementId: I,
+      inputInvalid: C,
+      inputInvalidMessage: R,
+      inputRef: _,
+      onChange: S,
+      iconSize: a,
+      fileExtension: F,
+      inputContainerClassName: D,
+      sharedIndicatorTooltip: b,
+      sharedIndicatorClassName: t
+    }
+  );
+};
+export {
+  K as DialFileManagerItemName
+};

package/dist/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.js

@@ -0,0 +1,93 @@
+import { jsxs as F, jsx as r } from "react/jsx-runtime";
+import { DialFileManagerItemIcon as W } from "../FileManagerItemIcon/FileManagerItemIcon.js";
+import { DialInput as P } from "../../../Input/Input.js";
+import { IconAlertCircleFilled as j, IconAlertTriangleFilled as w } from "@tabler/icons-react";
+import { BASE_ICON_PROPS as o } from "../../../../constants/icon.js";
+import { DialTooltip as M } from "../../../Tooltip/Tooltip.js";
+import { mergeClasses as O } from "../../../../utils/merge-classes.js";
+import { NotificationVariant as l } from "../../../../types/notification.js";
+import { editableContainerProps as S } from "../../../../hooks/use-editable-item.js";
+const V = ({
+  name: e,
+  type: n,
+  elementId: s,
+  loading: m = !1,
+  shared: c = !1,
+  iconClassName: p,
+  iconIndicator: f,
+  iconLabel: g,
+  iconSize: x,
+  iconStroke: d,
+  inputInvalid: a,
+  inputInvalidMessage: i,
+  inputContainerClassName: I,
+  inputIconAfter: N,
+  inputRef: u,
+  onChange: _,
+  sharedIndicatorClassName: A,
+  sharedIndicatorTooltip: C,
+  fileExtension: b
+}) => {
+  const h = () => {
+    const t = i?.startsWith(
+      `${l.Warning}__`
+    );
+    if (!a && !t) return null;
+    const D = i?.replace(
+      `${l.Warning}__`,
+      ""
+    );
+    return /* @__PURE__ */ r(M, { tooltip: D, children: N || (t ? /* @__PURE__ */ r(
+      w,
+      {
+        ...o,
+        className: "text-warning-icon",
+        "aria-label": "warning"
+      }
+    ) : /* @__PURE__ */ r(
+      j,
+      {
+        ...o,
+        className: "text-error",
+        "aria-label": "alert"
+      }
+    )) });
+  };
+  return /* @__PURE__ */ F("div", { className: "flex gap-2 items-center", ...S, children: [
+    /* @__PURE__ */ r(
+      W,
+      {
+        name: e,
+        type: n,
+        label: g,
+        className: p,
+        indicator: f,
+        size: x,
+        stroke: d,
+        loading: m,
+        shared: c,
+        fileExtension: b,
+        sharedIndicatorClassName: A,
+        sharedIndicatorTooltip: C
+      }
+    ),
+    /* @__PURE__ */ r(
+      P,
+      {
+        containerClassName: O(
+          "!h-6 py-[1px] pl-[7px] pr-[7px]",
+          I
+        ),
+        id: s,
+        value: e,
+        onChange: _,
+        invalid: a,
+        iconAfter: h(),
+        inputRef: u
+      }
+    )
+  ] });
+};
+export {
+  V as DialFileManagerItemNameInput
+};

package/dist/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.js

@@ -0,0 +1,165 @@
+import { jsx as a, jsxs as P } from "react/jsx-runtime";
+import { useMemo as Q, useState as T, useCallback as x } from "react";
+import { DialBreadcrumb as U } from "../../../Breadcrumb/Breadcrumb.js";
+import { DialSearch as X } from "../../../Search/Search.js";
+import { DialNeutralButton as Y } from "../../../Button/ButtonWrappers.js";
+import { BASE_ICON_PROPS as Z } from "../../../../constants/icon.js";
+import { mergeClasses as b } from "../../../../utils/merge-classes.js";
+import { getSegments as j } from "../../../../utils/path.js";
+import { IconArrowLeft as $ } from "@tabler/icons-react";
+import { breadcrumbContainerClassName as k, searchContainerWrapperClassName as C, panelBaseClassName as I } from "./constants.js";
+const ie = ({
+  ariaLabel: D = "Breadcrumb",
+  labelClassName: E,
+  onItemClick: o,
+  path: m,
+  makeHref: d,
+  rootItemPath: c,
+  rootItemLabel: p,
+  breadcrumbsHiddenPathPart: h,
+  className: A,
+  breadcrumbClassName: y,
+  searchable: M = !0,
+  value: g,
+  elementId: N = "file-manager-search",
+  disabled: O,
+  invalid: F,
+  onSearchChange: f,
+  searchClassName: W,
+  searchContainerClassName: q,
+  isCompactView: s = !1
+}) => {
+  const R = Q(() => {
+    if (!m) return;
+    let e = j(m);
+    const K = [...e];
+    let v = 0;
+    if (h) {
+      const n = j(h);
+      if (n.length) {
+        const r = e.findIndex(
+          (u, i) => n.every((t, B) => e[i + B] === t)
+        );
+        r !== -1 && (v = n.length, e = [
+          ...e.slice(0, r),
+          ...e.slice(r + n.length)
+        ]);
+      }
+    }
+    if (!e.length) return [{ label: "/" }];
+    const S = e.map((n, r) => {
+      const u = r < e.length - v ? r : r + v, i = K.slice(0, u + 1), t = typeof d == "function" ? d(i, u) : void 0;
+      return {
+        label: n,
+        href: t,
+        onClick: o ? (B) => {
+          B.preventDefault(), o(t);
+        } : void 0
+      };
+    });
+    if (c && p) {
+      const n = c.split("/").filter(Boolean), r = m.split("/").filter(Boolean);
+      if (n.every(
+        (i, t) => r[t] === i
+      ) && S.length > 0) {
+        const i = S.slice(n.length);
+        return [
+          {
+            label: p,
+            href: c,
+            onClick: o ? (t) => {
+              t.preventDefault(), o(c);
+            } : void 0
+          },
+          ...i
+        ];
+      }
+    }
+    return S;
+  }, [
+    m,
+    h,
+    c,
+    p,
+    d,
+    o
+  ]), [l, _] = T(!1), z = x(() => {
+    if (s && !l) {
+      _(!0);
+      const e = document.getElementById(N);
+      e && e.focus();
+    }
+  }, [N, l, s]), G = x(() => {
+    (!g || String(g).trim() === "") && f?.("");
+  }, [g, f]), J = x(() => s && l ? /* @__PURE__ */ a(
+    Y,
+    {
+      className: "!p-[9px]",
+      iconBefore: /* @__PURE__ */ a($, { ...Z }),
+      onClick: () => {
+        _(!1), f?.("");
+      }
+    }
+  ) : /* @__PURE__ */ a("div", { className: k, children: /* @__PURE__ */ a(
+    U,
+    {
+      pathItems: R,
+      ariaLabel: D,
+      labelClassName: E,
+      className: y
+    }
+  ) }), [
+    D,
+    y,
+    R,
+    l,
+    s,
+    E,
+    f
+  ]);
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: b(
+        I,
+        {
+          "gap-3": s
+        },
+        A
+      ),
+      "aria-label": "navigation-panel",
+      children: [
+        J(),
+        M && /* @__PURE__ */ a(
+          "div",
+          {
+            className: b(C, {
+              "w-[40px]": s && !l,
+              "w-full": s && l
+            }),
+            role: "search",
+            "aria-label": "Search",
+            onClick: z,
+            children: /* @__PURE__ */ a(
+              X,
+              {
+                id: N,
+                value: g ?? "",
+                onChange: f,
+                disabled: O,
+                onBlur: G,
+                invalid: F,
+                className: W,
+                wrapperClassName: s && !l ? "pl-2.5" : "",
+                containerClassName: q
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ie as DialFileManagerNavigationPanel
+};

package/dist/components/FileManager/components/FileManagerNavigationPanel/constants.js

@@ -0,0 +1,6 @@
+const e = "w-full flex items-center justify-between gap-4", a = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded", n = "w-[260px]";
+export {
+  a as breadcrumbContainerClassName,
+  e as panelBaseClassName,
+  n as searchContainerWrapperClassName
+};