@devtron-labs/devtron-fe-common-lib 0.0.49 → 0.0.50-beta-3

package/dist/Common/ImageTags.js

@@ -0,0 +1,380 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import * as f from "react";
+import { useState as o, useEffect as ne, useRef as Ne } from "react";
+import { S as Te } from "../ic-add-4787ded5.js";
+import { S as xe } from "../ic-cross-0e71861d.js";
+import { T as be, a as _e, S as Ie } from "../TippyCustomized-549ebfaf.js";
+import { t as ke } from "../react-toastify.esm-9a31d2e1.js";
+import { S as ye } from "../ic-info-filled-31a15add.js";
+import { S as se, b as p, s as Se } from "../Helper-4dc38bc2.js";
+import { S as Ee } from "../ic-error-exclamation-5f9af461.js";
+import { TippyTheme as De } from "./Types.js";
+import { setImageTags as Le } from "./Common.service.js";
+import { T as ie } from "../tippy-react.esm-3be2e905.js";
+import { Progressing as Me } from "./Progressing.js";
+const Be = (i) => /* @__PURE__ */ f.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i }, /* @__PURE__ */ f.createElement("path", { d: "M10.625 4.99991L15 9.37491M7.5 16.8749H3.75C3.58424 16.8749 3.42527 16.8091 3.30806 16.6918C3.19085 16.5746 3.125 16.4157 3.125 16.2499V12.7588C3.125 12.6767 3.14117 12.5954 3.17258 12.5196C3.20398 12.4438 3.25002 12.3749 3.30806 12.3168L12.6831 2.94185C12.8003 2.82464 12.9592 2.75879 13.125 2.75879C13.2908 2.75879 13.4497 2.82464 13.5669 2.94185L17.0581 6.43296C17.1753 6.55017 17.2411 6.70915 17.2411 6.87491C17.2411 7.04067 17.1753 7.19964 17.0581 7.31685L7.5 16.8749Z", stroke: "#596168", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), He = (i) => /* @__PURE__ */ f.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i }, /* @__PURE__ */ f.createElement("path", { d: "M3.74216 4.67419H1.49216V2.42419", fill: "#767D84" }), /* @__PURE__ */ f.createElement("path", { d: "M3.74216 4.67419H1.49216V2.42419", stroke: "#596168", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ f.createElement("path", { d: "M3.08318 8.91682C3.66007 9.49371 4.39507 9.88658 5.19525 10.0457C5.99542 10.2049 6.82482 10.1232 7.57856 9.811C8.33231 9.49879 8.97654 8.97008 9.42981 8.29173C9.88307 7.61338 10.125 6.81585 10.125 6C10.125 5.18415 9.88307 4.38663 9.42981 3.70827C8.97654 3.02992 8.33231 2.50121 7.57856 2.189C6.82482 1.87679 5.99542 1.7951 5.19525 1.95426C4.39507 2.11343 3.66007 2.50629 3.08318 3.08319L1.49219 4.67418", stroke: "#596168", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), $e = (i) => /* @__PURE__ */ f.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", ...i }, /* @__PURE__ */ f.createElement("path", { fill: "#959BA1", className: "fill-color", fillRule: "evenodd", d: "M10.5 7.583h-7c-.322 0-.583-.26-.583-.583 0-.322.26-.583.583-.583h7c.322 0 .583.26.583.583 0 .322-.26.583-.583.583z" })), We = (i) => /* @__PURE__ */ f.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i }, /* @__PURE__ */ f.createElement("path", { d: "M12.6667 4C12.4899 4 12.3203 4.07024 12.1953 4.19526C12.0703 4.32029 12.0001 4.48986 12.0001 4.66667V7.33333C12.0001 7.51014 11.9298 7.67971 11.8048 7.80474C11.6798 7.92976 11.5102 8 11.3334 8H4.94005L5.80672 7.14C5.93226 7.01446 6.00278 6.8442 6.00278 6.66667C6.00278 6.48913 5.93226 6.31887 5.80672 6.19333C5.68118 6.0678 5.51092 5.99727 5.33339 5.99727C5.15585 5.99727 4.98559 6.0678 4.86005 6.19333L2.86005 8.19333C2.79936 8.25674 2.75178 8.3315 2.72005 8.41333C2.65337 8.57564 2.65337 8.75769 2.72005 8.92C2.75178 9.00183 2.79936 9.0766 2.86005 9.14L4.86005 11.14C4.92203 11.2025 4.99576 11.2521 5.077 11.2859C5.15824 11.3198 5.24538 11.3372 5.33339 11.3372C5.42139 11.3372 5.50853 11.3198 5.58977 11.2859C5.67101 11.2521 5.74474 11.2025 5.80672 11.14C5.86921 11.078 5.9188 11.0043 5.95265 10.9231C5.98649 10.8418 6.00392 10.7547 6.00392 10.6667C6.00392 10.5787 5.98649 10.4915 5.95265 10.4103C5.9188 10.329 5.86921 10.2553 5.80672 10.1933L4.94005 9.33333H11.3334C11.8638 9.33333 12.3725 9.12262 12.7476 8.74755C13.1227 8.37247 13.3334 7.86377 13.3334 7.33333V4.66667C13.3334 4.48986 13.2631 4.32029 13.1381 4.19526C13.0131 4.07024 12.8435 4 12.6667 4Z", fill: "#3B444C" })), Re = ({
+  // Setting it to zero in case of external pipeline
+  ciPipelineId: i,
+  artifactId: m,
+  imageComment: l,
+  imageReleaseTags: d,
+  updateCurrentAppMaterial: I,
+  appReleaseTagNames: u,
+  setAppReleaseTagNames: k,
+  tagsEditable: v,
+  setTagsEditable: T,
+  toggleCardMode: y,
+  hideHardDelete: S,
+  forceReInit: E,
+  isSuperAdmin: D
+}) => {
+  const [$, L] = o(d || []), [W, Z] = o(l ? l.comment : ""), [O, Y] = o(u || []), [A, M] = o(l ? l.comment : ""), [w, q] = o(!1), [oe, P] = o(!1), [h, C] = o(d || []), [j, x] = o(""), [b, _] = o([]), [B, V] = o([]), [G, z] = o([]), [J, Q] = o(""), [N, R] = o(""), [F, U] = o(!1);
+  ne(() => {
+    ce();
+  }, [d, l, v]), ne(() => {
+    Y(u || []);
+  }, [u]);
+  const ce = () => {
+    (E || !w) && (L(d || []), Z(l ? l.comment : ""), M(l ? l.comment : ""), C(d || []), q(!1));
+  }, H = () => {
+    q(!w), typeof y == "function" && y(m);
+  }, le = (e) => {
+    const n = e.target.value;
+    n?.length > 500 ? Q("comment length cannot exceed 500 characters") : Q(""), M(n);
+  }, de = () => {
+    C($), M(W), _([]), V([]), z([]), H(), P(!1), x("");
+  }, X = (e) => {
+    if (e.length == 0 || e.length >= 128 || e[0] == "." || e[0] == "-")
+      return x("Tag name cannot be empty or exceed 128 characters or cannot start with . or -"), !1;
+    x("");
+    const n = O.includes(e);
+    let a = !1;
+    for (let s = 0; s < h?.length; s++)
+      h[s].tagName.toLowerCase() === e && (a = !0);
+    return n || a || e === "latest" ? (x("This tag is already being used in this application"), !1) : !0;
+  }, K = (e) => {
+    const n = e.toLowerCase().trim();
+    if (X(n)) {
+      const a = {
+        id: 0,
+        tagName: n,
+        appId: 0,
+        deleted: !1,
+        artifactId: 0,
+        duplicateTag: !1
+      }, s = [...b, a];
+      return _(s), C([...h, a]), P(!0), R(""), s;
+    }
+    return b;
+  }, ee = (e) => {
+    const n = [...h];
+    n[e] = {
+      ...n[e],
+      deleted: !n[e].deleted
+    };
+    const a = n[e];
+    let s = [...B];
+    const r = s.findIndex((g) => g.tagName === a.tagName);
+    r !== -1 ? s.splice(r, 1) : s.push(a), C(n), V(s);
+  }, te = (e) => {
+    const n = h[e], a = b.filter((g) => g.tagName !== n.tagName);
+    _(a);
+    const s = [...h];
+    s.splice(e, 1), C(s);
+    const r = O.filter((g) => g.toLowerCase() !== n.tagName.toLowerCase());
+    if (Y(r), n.id !== 0) {
+      const g = [...G, n];
+      z(g);
+    }
+  }, me = (e) => {
+    e.forEach(({ userMessage: n }) => {
+      const a = b.map((r) => n?.appReleaseTags?.includes(r.tagName) ? {
+        ...r,
+        duplicateTag: !0
+      } : r);
+      _(a);
+      const s = h.map((r) => {
+        const g = a.find((we) => we.tagName === r.tagName);
+        return g ? { ...r, duplicateTag: g.duplicateTag } : r;
+      });
+      C(s);
+    });
+  }, ge = async (e) => {
+    if (j)
+      return;
+    const n = {
+      createTags: e,
+      softDeleteTags: B,
+      imageComment: {
+        id: 0,
+        comment: A.trim(),
+        artifactId: 0
+      },
+      hardDeleteTags: G
+    };
+    U(!0), Le(n, i ?? 0, m).then((a) => {
+      const s = a.result?.imageReleaseTags?.map((r) => ({
+        id: r.id,
+        tagName: r.tagName,
+        deleted: r.deleted,
+        appId: 0,
+        artifactId: 0
+      }));
+      k && k(a.result?.appReleaseTags), T && T(a.result?.tagsEditable), L(s), Z(a.result?.imageComment?.comment), C(s), M(a.result?.imageComment?.comment), _([]), V([]), z([]), H(), P(!1), x(""), I && I(m, s, a.result?.imageComment);
+    }).catch((a) => {
+      a.errors?.[0]?.userMessage?.appReleaseTags?.length ? (ke.error(a.errors?.[0]?.internalMessage), me(a.errors)) : Se(a);
+    }).finally(() => {
+      U(!1);
+    });
+  }, fe = () => /* @__PURE__ */ t(
+    be,
+    {
+      theme: De.white,
+      className: "w-300 fcv-5",
+      placement: "right",
+      Icon: _e,
+      heading: "Release tags",
+      showCloseButton: !0,
+      trigger: "click",
+      interactive: !0,
+      additionalContent: he(),
+      children: /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ t(Ie, { className: "fcn-5 ml-8 cursor icon-dim-16" }) })
+    }
+  ), he = () => /* @__PURE__ */ c("div", { className: "h-250 fs-13 dc__overflow-scroll p-12", children: [
+    /* @__PURE__ */ t("div", { children: "Release tags allow you to tag container images with readable and relatable tags eg. v1.0." }),
+    /* @__PURE__ */ c("ul", { className: "pl-20 mt-8", children: [
+      /* @__PURE__ */ t("li", { children: "A release tag can only be added if a workflow has CD pipelines deploying to Production environments." }),
+      /* @__PURE__ */ t("li", { children: "Multiple tags can be added to an image." }),
+      /* @__PURE__ */ t("li", { children: "Multiple images in an application cannot have the same tag." }),
+      /* @__PURE__ */ t("li", { children: "Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been added." })
+    ] })
+  ] }), pe = Ne(null);
+  if (A === "" && h.length === 0 && !w)
+    return v ? /* @__PURE__ */ t("div", { className: "bcn-0 mt-8 add-image-button", children: /* @__PURE__ */ t(Ae, { handleEditClick: H }) }) : /* @__PURE__ */ t("div", {});
+  const ue = (e) => {
+    e.key === "Enter" && e.target.value.trim() && K(e.target.value.trim());
+  }, ae = (e) => {
+    e.target.value && X(e.target.value), R(e.target.value);
+  }, Ce = (e) => {
+    p(e), N.trim() && K(N.trim());
+  }, ve = () => {
+    let e = b;
+    N.trim() && (e = K(N)), ge(e);
+  };
+  return /* @__PURE__ */ t("div", { className: "mt-8", children: w && v ? /* @__PURE__ */ c("div", { className: "bcn-0 dc__border-top-n1 ", children: [
+    /* @__PURE__ */ c("div", { className: "cn-7 mt-12 flex left", children: [
+      /* @__PURE__ */ t("div", { children: "Release tags (eg. v1.0)" }),
+      fe()
+    ] }),
+    /* @__PURE__ */ c("div", { className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          className: "form__input fs-13",
+          value: N,
+          onChange: ae,
+          placeholder: "Type a tag and press enter",
+          onKeyDown: ue,
+          onBlur: ae,
+          ref: pe
+        }
+      ),
+      N.length > 0 && /* @__PURE__ */ c(
+        "div",
+        {
+          onClick: Ce,
+          className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2",
+          style: {
+            top: "50%",
+            fontFamily: "monospace",
+            right: "8px",
+            transform: "translateY(-50%)"
+          },
+          children: [
+            /* @__PURE__ */ t(We, { className: "icon-dim-16 mr-4" }),
+            "Enter"
+          ]
+        }
+      )
+    ] }),
+    j && /* @__PURE__ */ c("div", { className: "flex left", children: [
+      /* @__PURE__ */ t(se, { className: "form__icon form__icon--error" }),
+      /* @__PURE__ */ t("div", { className: "form__error", children: j })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex-wrap mt-8 flex left", children: h?.map((e, n) => /* @__PURE__ */ t(
+      re,
+      {
+        text: e?.tagName,
+        isSoftDeleted: e?.deleted,
+        isEditing: w,
+        onSoftDeleteClick: (a) => {
+          p(a), ee(n);
+        },
+        onHardDeleteClick: (a) => {
+          p(a), te(n);
+        },
+        tagId: e.id,
+        softDeleteTags: B,
+        isSuperAdmin: D,
+        duplicateTag: e?.duplicateTag,
+        hideHardDelete: S
+      },
+      e.id
+    )) }),
+    oe && /* @__PURE__ */ c("div", { className: "cn-7 mb-8 flex left", children: [
+      /* @__PURE__ */ t(ye, { className: "form__icon--info icon-dim-16 mr-2" }),
+      "Tags cannot be edited/removed later"
+    ] }),
+    /* @__PURE__ */ t("div", { className: "cn-7 mt-12", children: "Comment" }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12",
+        "data-testid": "add-image-comment-text-area",
+        children: /* @__PURE__ */ t(
+          "textarea",
+          {
+            value: A,
+            onChange: le,
+            className: "flex left flex-wrap dc__gap-8 dc__description-textarea fs-13",
+            style: { height: "90px !important" }
+          }
+        )
+      }
+    ),
+    J !== "" && /* @__PURE__ */ c("div", { className: "flex left", children: [
+      /* @__PURE__ */ t(se, { className: "form__icon form__icon--error" }),
+      /* @__PURE__ */ t("div", { className: "form__error", children: J })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "w-100 flex right mt-12", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          className: "cta flex cancel h-32 lh-32-imp",
+          type: "button",
+          onClick: (e) => {
+            p(e), de();
+          },
+          disabled: F,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          className: "cta flex h-32 lh-32-imp ml-12",
+          "data-testid": "save-tags-button",
+          type: "button",
+          onClick: (e) => {
+            p(e), ve();
+          },
+          disabled: F,
+          children: F ? /* @__PURE__ */ t(Me, {}) : "Save"
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ c("div", { className: "top br-4 bcn-0 image-tags-container flexbox", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10",
+        "data-testid": "image-tags-container-hover",
+        children: /* @__PURE__ */ c("div", { className: "w-100", children: [
+          W && /* @__PURE__ */ t("div", { className: "mb-6 fs-13 lh-20 dc__word-break-all", children: W }),
+          /* @__PURE__ */ t("div", { className: "flex-wrap flex left", children: $?.map((e, n) => /* @__PURE__ */ t(
+            re,
+            {
+              text: e?.tagName,
+              isSoftDeleted: e?.deleted,
+              isEditing: w,
+              onSoftDeleteClick: (a) => {
+                p(a), ee(n);
+              },
+              onHardDeleteClick: (a) => {
+                p(a), te(n);
+              },
+              tagId: e.id,
+              softDeleteTags: B,
+              isSuperAdmin: D,
+              duplicateTag: e?.duplicateTag,
+              hideHardDelete: S
+            },
+            e?.id
+          )) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-8 mr-10 icon-dim-16", children: v && /* @__PURE__ */ t(
+      Be,
+      {
+        className: "icon-dim-16 image-tags-container-edit__icon cursor",
+        "data-testid": "edit-tags-icon",
+        onClick: (e) => {
+          p(e), H();
+        }
+      }
+    ) })
+  ] }) });
+}, re = ({
+  text: i,
+  isSoftDeleted: m,
+  isEditing: l,
+  onSoftDeleteClick: d,
+  onHardDeleteClick: I,
+  tagId: u,
+  softDeleteTags: k,
+  isSuperAdmin: v,
+  duplicateTag: T,
+  hideHardDelete: y
+}) => {
+  const S = m ? He : $e, E = m && k.some((L) => L.tagName === i), D = u === 0 || v && !y;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class dc__word-break-all flex ${l ? "icon-hover" : ""} ${(() => T ? "cr-5 bcr-1 er-2" : m ? "cy-7 bcy-1 dc__strike-through ey-2" : "cn-9")()}`,
+      children: [
+        T ? /* @__PURE__ */ t(Ee, { className: "icon-dim-12 mr-4" }) : /* @__PURE__ */ t(
+          ie,
+          {
+            className: "default-tt",
+            arrow: !0,
+            placement: "top",
+            content: E ? "Restore tag" : "Soft delete tag",
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                className: `action-icon mr-4 lh-16 pt-3 ${E || u !== 0 && !m ? "show-icon" : ""}`,
+                children: /* @__PURE__ */ t(
+                  S,
+                  {
+                    className: `icon-dim-12 cursor ${m ? "scn-6" : "fcn-6"} `,
+                    "data-testid": `${i}-tag-soft-delete`,
+                    onClick: d
+                  }
+                )
+              }
+            )
+          }
+        ),
+        i,
+        /* @__PURE__ */ t(ie, { className: "default-tt", arrow: !0, placement: "top", content: "Remove tag", children: /* @__PURE__ */ t("div", { className: `action-icon ml-4 lh-16 pt-3 ${D ? "show-icon" : ""}`, children: /* @__PURE__ */ t(
+          xe,
+          {
+            className: "icon-dim-12 fcn-6 cursor",
+            "data-testid": `${i}-tag-hard-delete`,
+            onClick: I
+          }
+        ) }) })
+      ]
+    }
+  );
+}, Ae = ({ handleEditClick: i }) => /* @__PURE__ */ t("div", { className: "add-tag-button flex pt-12 pr-12", "data-testid": "add-tags-button", onClick: (l) => {
+  p(l), i();
+}, children: /* @__PURE__ */ c("div", { className: "lh-16 flex", children: [
+  /* @__PURE__ */ t(Te, { className: "icon-dim-16 cn-6" }),
+  /* @__PURE__ */ t("span", { className: "cn-7", children: "Add tags/comment" })
+] }) });
+export {
+  re as ImageTagButton,
+  Re as ImageTagsContainer
+};

package/dist/Common/InfoColorBar/InfoColourbar.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { InfoColourBarType } from '../Types';
-import './infoColourBar.scss';
-declare function InfoColourBar({ message, classname, Icon, iconClass, iconSize, renderActionButton, linkText, redirectLink, linkOnClick, linkClass, internalLink, styles, }: InfoColourBarType): JSX.Element;
-export default InfoColourBar;
+/// <reference types="react" />
+import { InfoColourBarType } from '../Types';
+declare function InfoColourBar({ message, classname, Icon, iconClass, iconSize, renderActionButton, linkText, redirectLink, linkOnClick, linkClass, internalLink, styles, }: InfoColourBarType): JSX.Element;
+export default InfoColourBar;

package/dist/Common/InfoColorBar/InfoColourbar.js

@@ -0,0 +1,65 @@
+import "../../assets/InfoColourbar.css";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { Link as _ } from "react-router-dom";
+function b({
+  message: c,
+  classname: l,
+  Icon: d,
+  iconClass: t,
+  iconSize: i,
+  renderActionButton: o,
+  linkText: e,
+  redirectLink: a,
+  linkOnClick: n,
+  linkClass: f,
+  internalLink: m,
+  styles: p
+}) {
+  const u = () => {
+    if (e) {
+      if (a)
+        return m ? /* @__PURE__ */ r(
+          _,
+          {
+            to: a,
+            onClick: n,
+            "data-testid": "info-bar-internal-link",
+            className: "cursor dc__link dc__underline-onhover mr-5",
+            children: e
+          }
+        ) : /* @__PURE__ */ r(
+          "a",
+          {
+            href: a,
+            target: "_blank",
+            onClick: n,
+            "data-testid": "info-bar-redirectLink",
+            className: "cursor dc__link dc__underline-onhover mr-5",
+            children: e
+          }
+        );
+    } else
+      return null;
+    return n && /* @__PURE__ */ r("div", { onClick: n, className: "cursor dc__link dc__underline-onhover", "data-testid": "info-bar-linkText", children: e });
+  };
+  return /* @__PURE__ */ r("div", { className: "info-bar-container", children: /* @__PURE__ */ s(
+    "div",
+    {
+      className: `${l} info_text flex dc__content-space pt-8 pb-8 pl-12 pr-12 br-4 top fs-13 fw-4`,
+      style: p,
+      children: [
+        /* @__PURE__ */ s("div", { className: `flex top ${typeof o == "function" ? "mr-5" : ""}`, children: [
+          /* @__PURE__ */ r("div", { className: `icon-dim-${i ?? "20"} mr-10`, children: /* @__PURE__ */ r(d, { className: `icon-dim-${i ?? "20"} ${t || ""} mr-8` }) }),
+          /* @__PURE__ */ s("div", { className: `info-bar-message-wrapper ${f || ""}`, children: [
+            /* @__PURE__ */ r("span", { className: e && a ? "mr-5" : "", children: c }),
+            u()
+          ] })
+        ] }),
+        typeof o == "function" && o()
+      ]
+    }
+  ) });
+}
+export {
+  b as default
+};

package/dist/Common/Modals/Modal.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { ModalType } from '../Types';
-export declare const Modal: ({ style, children, modal, rootClassName, onClick, callbackRef, preventWheelDisable, noBackDrop, }: ModalType) => React.ReactPortal;
+import React from 'react';
+import { ModalType } from '../Types';
+export declare const Modal: ({ style, children, modal, rootClassName, onClick, callbackRef, preventWheelDisable, noBackDrop, }: ModalType) => React.ReactPortal;

package/dist/Common/Modals/Modal.js

@@ -0,0 +1,48 @@
+import { jsx as u } from "react/jsx-runtime";
+import m, { useEffect as p } from "react";
+import { R as v } from "../../index-ad700600.js";
+const g = ({
+  style: d = {},
+  children: l,
+  modal: c = !1,
+  rootClassName: f = "",
+  onClick: n = null,
+  callbackRef: i = null,
+  preventWheelDisable: o = !1,
+  noBackDrop: r
+}) => {
+  const t = m.useRef(null);
+  function s(e) {
+    typeof n == "function" && (t && t.current?.contains(e.target) ? n(e, "in") : n(e, "out"));
+  }
+  function a(e) {
+    o || (t?.current.contains(e.target) ? t.current.clientHeight === t.current.scrollHeight && e.preventDefault() : e.preventDefault());
+  }
+  return p(() => {
+    document.addEventListener("click", s);
+    let e = document.getElementById("visible-modal");
+    return e && e.classList.add("show"), r && e.classList.add("no-back-drop"), o || document.body.addEventListener("wheel", a, { passive: !1 }), () => {
+      o || document.body.removeEventListener("wheel", a), document.removeEventListener("click", s), e && e.classList.remove("show"), r && e.classList.remove("no-back-drop");
+    };
+  }, []), v.createPortal(
+    /* @__PURE__ */ u(
+      "div",
+      {
+        tabIndex: 0,
+        onClick: n,
+        "data-testid": "common-modal",
+        ref: (e) => {
+          typeof i == "function" && i(e), t.current = e;
+        },
+        id: "popup",
+        className: `${f} popup ${c ? "modal" : ""}`,
+        style: { ...d },
+        children: l
+      }
+    ),
+    document.getElementById("visible-modal")
+  );
+};
+export {
+  g as Modal
+};

package/dist/Common/Modals/OpaqueModal.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export interface OpaqueModalProps {
-    className?: string;
-    onHide?: any;
-    noBackground?: boolean;
-}
-export declare class OpaqueModal extends React.Component<OpaqueModalProps> {
-    modalRef: HTMLElement;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactPortal;
-}
+import React from 'react';
+export interface OpaqueModalProps {
+    className?: string;
+    onHide?: any;
+    noBackground?: boolean;
+}
+export declare class OpaqueModal extends React.Component<OpaqueModalProps> {
+    modalRef: HTMLElement;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal;
+}

package/dist/Common/Modals/OpaqueModal.js

@@ -0,0 +1,32 @@
+var c = Object.defineProperty;
+var i = (s, e, o) => e in s ? c(s, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : s[e] = o;
+var t = (s, e, o) => (i(s, typeof e != "symbol" ? e + "" : e, o), o);
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import n from "react";
+import { R as d } from "../../index-ad700600.js";
+import { c as r } from "../../ic-cross-0e71861d.js";
+class w extends n.Component {
+  constructor() {
+    super(...arguments);
+    t(this, "modalRef", document.getElementById("full-screen-modal"));
+  }
+  componentDidMount() {
+    this.props.noBackground ? this.modalRef.classList.add("show") : this.modalRef.classList.add("show-with-bg");
+  }
+  componentWillUnmount() {
+    this.modalRef.classList.remove("show"), this.modalRef.classList.remove("show-with-bg");
+  }
+  render() {
+    const { className: o = "", onHide: l = null } = { ...this.props };
+    return d.createPortal(
+      /* @__PURE__ */ m("div", { className: `full-screen-modal__body-container ${o}`, children: [
+        this.props.children,
+        typeof l == "function" && /* @__PURE__ */ a("div", { className: "close-btn icon-dim-24", onClick: (f) => l(!1), "data-testid": "opaque-modal-close", children: /* @__PURE__ */ a("img", { className: "close-img", src: r, alt: "close" }) })
+      ] }),
+      document.getElementById("full-screen-modal")
+    );
+  }
+}
+export {
+  w as OpaqueModal
+};

package/dist/Common/Modals/VisibleModal.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-export declare class VisibleModal extends React.Component<{
-    className: string;
-    parentClassName?: string;
-    noBackground?: boolean;
-    close?: (e: any) => void;
-    onEscape?: (e: any) => void;
-}> {
-    modalRef: HTMLElement;
-    constructor(props: any);
-    escFunction(event: any): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactPortal;
-}
+import React from 'react';
+export declare class VisibleModal extends React.Component<{
+    className: string;
+    parentClassName?: string;
+    noBackground?: boolean;
+    close?: (e: any) => void;
+    onEscape?: (e: any) => void;
+}> {
+    modalRef: HTMLElement;
+    constructor(props: any);
+    escFunction(event: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal;
+}

package/dist/Common/Modals/VisibleModal.js

@@ -0,0 +1,31 @@
+var i = Object.defineProperty;
+var a = (o, e, s) => e in o ? i(o, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : o[e] = s;
+var t = (o, e, s) => (a(o, typeof e != "symbol" ? e + "" : e, s), s);
+import { jsx as n } from "react/jsx-runtime";
+import l from "react";
+import { R as r } from "../../index-ad700600.js";
+class h extends l.Component {
+  constructor(s) {
+    super(s);
+    t(this, "modalRef", document.getElementById("visible-modal"));
+    this.escFunction = this.escFunction.bind(this);
+  }
+  escFunction(s) {
+    (s.keyCode === 27 || s.key === "Escape") && (this.props.onEscape ? this.props.onEscape(s) : this.props.close && this.props.close(s));
+  }
+  componentDidMount() {
+    document.addEventListener("keydown", this.escFunction), this.modalRef.classList.add(this.props.noBackground ? "show" : "show-with-bg"), this.props.parentClassName && this.modalRef.classList.add(this.props.parentClassName);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.escFunction), this.modalRef.classList.remove("show"), this.modalRef.classList.remove("show-with-bg"), this.props.parentClassName && this.modalRef.classList.remove(this.props.parentClassName);
+  }
+  render() {
+    return r.createPortal(
+      /* @__PURE__ */ n("div", { className: `visible-modal__body ${this.props.className}`, onClick: this.props?.close, "data-testid": "visible-modal-close", children: this.props.children }),
+      document.getElementById("visible-modal")
+    );
+  }
+}
+export {
+  h as VisibleModal
+};

package/dist/Common/Modals/VisibleModal2.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export declare class VisibleModal2 extends React.Component<{
-    className: string;
-    close?: (e: any) => void;
-}> {
-    modalRef: HTMLElement;
-    constructor(props: any);
-    escFunction(event: any): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactPortal;
-}
+import React from 'react';
+export declare class VisibleModal2 extends React.Component<{
+    className: string;
+    close?: (e: any) => void;
+}> {
+    modalRef: HTMLElement;
+    constructor(props: any);
+    escFunction(event: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal;
+}