@ironsource/shared-ui 2.2.0-test.2 → 2.2.0-test.4

package/components/inlineCopy/InlineCopy.vue2.js

@@ -1,13 +1,13 @@
- import "../../InlineCopy.vue_vue_type_style_index_0_scoped_ad48b61e_lang.css"; import { defineComponent as y, computed as x, openBlock as c, createElementBlock as T, createBlock as C, unref as e, mergeProps as n, withCtx as r, createTextVNode as h, toDisplayString as z, createCommentVNode as I, createVNode as s } from "vue";
-import k from "../icon/v4/IconV4.vue.js";
+ import "../../InlineCopy.vue_vue_type_style_index_0_scoped_9fa1921a_lang.css"; import { defineComponent as v, ref as g, computed as h, watch as k, resolveComponent as z, openBlock as m, createElementBlock as I, createBlock as B, unref as t, mergeProps as y, withCtx as T, createTextVNode as S, toDisplayString as w, createCommentVNode as V, createVNode as n } from "vue";
+import b from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import S from "../typography/v4/Typography.vue.js";
-import { useClipboard as V } from "@vueuse/core";
-import { Snackbar as v } from "../snackbar/v4/index.js";
-import B from "../tooltip/v4/TooltipV4.vue.js";
-import { useTestIdAttrs as b } from "../../utils/testIds.js";
-import { InlineCopyTestIdModifiers as a } from "../../testids/index.js";
-const X = /* @__PURE__ */ y({
+import L from "../typography/v4/Typography.vue.js";
+import { useClipboard as N } from "@vueuse/core";
+import { Snackbar as c } from "../snackbar/v4/index.js";
+import P from "../tooltip/v4/TooltipV4.vue.js";
+import { useTestIdAttrs as A } from "../../utils/testIds.js";
+import { InlineCopyTestIdModifiers as s } from "../../testids/index.js";
+const F = /* @__PURE__ */ v({
   __name: "InlineCopy",
   props: {
     text: { default: "" },
@@ -18,57 +18,86 @@ const X = /* @__PURE__ */ y({
     tooltipHeader: { default: "" },
     tooltipText: { default: "Copy to clipboard" },
     tooltipPlacement: { default: "bottom" },
-    valueToCopy: { default: "" }
+    valueToCopy: { default: "" },
+    asyncCopy: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    loadingTitle: { default: "" }
   },
   emits: ["copy"],
-  setup(t, { emit: p }) {
-    const o = t, { copy: d, copied: m } = V({}), u = x(() => {
-      switch (o.size) {
+  setup(o, { emit: r }) {
+    const e = o, a = g(null), { copy: d, copied: p } = N({}), C = h(() => {
+      switch (e.size) {
         case "medium":
           return "0.875rem";
         case "small":
         default:
           return "0.75rem";
       }
-    }), f = async () => {
-      const i = o.valueToCopy || o.text;
-      await d(i), m.value && v({
-        title: "Copied successfully",
-        type: "success",
-        duration: 2e3
-      }), p("copy");
-    }, l = b(o.testId, a);
-    return (i, N) => (c(), T("div", {
-      class: "inline-copy",
-      onClick: f
-    }, [
-      t.hideTextValue ? I("", !0) : (c(), C(e(S), n({
-        key: 0,
-        variant: "caption",
-        style: { fontSize: e(u) }
-      }, e(l)[e(a).TEXT]), {
-        default: r(() => [
-          h(z(t.text), 1)
-        ]),
-        _: 1
-      }, 16, ["style"])),
-      s(e(B), {
-        text: t.tooltipText,
-        header: t.tooltipHeader,
-        placement: t.tooltipPlacement
-      }, {
-        default: r(() => [
-          s(e(k), n({
-            class: "icon-copy",
-            name: "copy",
-            size: t.iconSize || "16px"
-          }, e(l)[e(a).COPY_BTN]), null, 16, ["size"])
-        ]),
-        _: 1
-      }, 8, ["text", "header", "placement"])
-    ]));
+    });
+    k(
+      () => e.isLoading,
+      async (l, f) => {
+        if (f && !l && a.value) {
+          const i = e.valueToCopy || e.text;
+          a.value.close(), await d(i), p.value && c({
+            title: "Copied successfully",
+            type: "success",
+            duration: 2e3
+          }), a.value = null;
+        }
+      }
+    );
+    const x = async () => {
+      if (e.asyncCopy)
+        a.value = c({
+          title: e.loadingTitle,
+          type: "loading",
+          isLoading: !0
+        }), r("copy");
+      else {
+        const l = e.valueToCopy || e.text;
+        await d(l), p.value && c({
+          title: "Copied successfully",
+          type: "success",
+          duration: 2e3
+        }), r("copy");
+      }
+    }, u = A(e.testId, s);
+    return (l, f) => {
+      const i = z("Loader");
+      return m(), I("div", {
+        class: "inline-copy",
+        onClick: x
+      }, [
+        o.hideTextValue ? V("", !0) : (m(), B(t(L), y({
+          key: 0,
+          variant: "caption",
+          style: { fontSize: t(C) }
+        }, t(u)[t(s).TEXT]), {
+          default: T(() => [
+            S(w(o.text), 1)
+          ]),
+          _: 1
+        }, 16, ["style"])),
+        n(i, { "stroke-width": 2 }),
+        n(t(P), {
+          text: o.tooltipText,
+          header: o.tooltipHeader,
+          placement: o.tooltipPlacement
+        }, {
+          default: T(() => [
+            n(t(b), y({
+              class: "icon-copy",
+              name: "copy",
+              size: o.iconSize || "16px"
+            }, t(u)[t(s).COPY_BTN]), null, 16, ["size"])
+          ]),
+          _: 1
+        }, 8, ["text", "header", "placement"])
+      ]);
+    };
   }
 });
 export {
-  X as default
+  F as default
 };

package/components/inlineCopy/index.d.ts

@@ -23,6 +23,10 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
         required: true;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     hideTextValue: {
         type: import("vue").PropType<boolean>;
         required: true;
@@ -40,6 +44,14 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    asyncCopy: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    loadingTitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     copy: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -66,6 +78,10 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
         required: true;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     hideTextValue: {
         type: import("vue").PropType<boolean>;
         required: true;
@@ -83,6 +99,14 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    asyncCopy: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    loadingTitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onCopy?: () => any;
 }, {
@@ -91,9 +115,12 @@ declare const InlineCopyTypes: () => import("vue").DefineComponent<{
     tooltipText: string;
     tooltipPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     size: "small" | "medium";
+    isLoading: boolean;
     hideTextValue: boolean;
     iconSize: string;
     tooltipHeader: string;
     valueToCopy: string;
+    asyncCopy: boolean;
+    loadingTitle: string;
 }>[];
 export { InlineCopy, InlineCopyTypes };

package/components/popover/v3/Popover.vue2.js

@@ -1,38 +1 @@
- import "../../../Popover.vue_vue_type_style_index_0_scoped_c607b770_lang.css";  import "../../../Popover.vue_vue_type_style_index_1_lang.css";  import { defineComponent as n, openBlock as i, createBlock as r, unref as l, withCtx as a, renderSlot as d } from "vue";
-import { Dropdown as s } from "floating-vue";
-const f = /* @__PURE__ */ n({
-  __name: "Popover",
-  props: {
-    open: { type: Boolean },
-    autoHide: { type: Boolean, default: !1 },
-    trigger: { default: "click" },
-    disabled: { type: Boolean, default: !1 },
-    placement: { default: "bottom-start" },
-    distance: { default: 0 },
-    skidding: { default: 0 },
-    testId: { default: "" }
-  },
-  setup(e) {
-    return (t, u) => (i(), r(l(s), {
-      theme: "custom-popover",
-      placement: e.placement,
-      shown: !!e.open,
-      triggers: e.trigger === "managed" ? [] : [e.trigger],
-      "auto-hide": e.autoHide,
-      distance: e.distance,
-      skidding: e.skidding,
-      "data-testid": e.testId
-    }, {
-      popper: a(({ hide: o }) => [
-        d(t.$slots, "content", { hide: o }, void 0, !0)
-      ]),
-      default: a(() => [
-        d(t.$slots, "trigger", {}, void 0, !0)
-      ]),
-      _: 3
-    }, 8, ["placement", "shown", "triggers", "auto-hide", "distance", "skidding", "data-testid"]));
-  }
-});
-export {
-  f as default
-};
+ import "../../../Popover.vue_vue_type_style_index_0_scoped_c607b770_lang.css";  import "../../../Popover.vue_vue_type_style_index_1_lang.css";  

package/components/radioButton/v3/RadioButton.vue2.js

@@ -1,82 +1 @@
- import "../../../RadioButton.vue_vue_type_style_index_0_scoped_dac25b9f_lang.css"; import { defineComponent as E, computed as I, openBlock as u, createElementBlock as C, normalizeClass as T, unref as e, createElementVNode as o, withDirectives as N, mergeProps as i, isRef as g, vModelRadio as w, renderSlot as z, createVNode as A, withCtx as m, createTextVNode as f, toDisplayString as c, createBlock as v, createCommentVNode as R } from "vue";
-import p from "../../typography/Text.vue.js";
-import { useRadio as D } from "../common/useRadio.js";
-import { RadioTestIdModifiers as r } from "../../../testids/index.js";
-import { useTestIdAttrs as L } from "../../../utils/testIds.js";
-const $ = { class: "wrapper" }, F = ["value", "name", "disabled"], U = /* @__PURE__ */ E({
-  __name: "RadioButton",
-  props: {
-    label: { default: "" },
-    name: { default: "" },
-    helperText: { default: "" },
-    errorText: { default: "" },
-    modelValue: { default: void 0 },
-    testId: { default: "" },
-    disabledButton: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(t, { emit: B }) {
-    const d = t, { radioRef: V, focus: x, disabled: h, modelValue: a, radioGroup: k } = D(
-      d,
-      B
-    ), s = L(d.testId, r), b = I(
-      () => h.value || d.disabledButton
-    );
-    return (y, l) => (u(), C("label", {
-      class: T(["radio-button", { "radio-button--disabled": e(b) }])
-    }, [
-      o("span", $, [
-        N(o("input", i({
-          ref_key: "radioRef",
-          ref: V,
-          "onUpdate:modelValue": l[0] || (l[0] = (n) => g(a) ? a.value = n : null),
-          value: t.label,
-          name: t.name || e(k)?.name,
-          type: "radio",
-          disabled: e(b)
-        }, e(s)[e(r).FIELD], {
-          onFocus: l[1] || (l[1] = (n) => x.value = !0),
-          onBlur: l[2] || (l[2] = (n) => x.value = !1)
-        }), null, 16, F), [
-          [w, e(a)]
-        ]),
-        o("span", {
-          class: T([{ "circle--selected": e(a) === t.label }, "circle"])
-        }, null, 2)
-      ]),
-      o("span", i({ class: "label" }, e(s)[e(r).LABEL]), [
-        z(y.$slots, "default", {}, () => [
-          A(p, { "is-truncated": "" }, {
-            default: m(() => [
-              f(c(t.label), 1)
-            ]),
-            _: 1
-          })
-        ], !0),
-        !t.errorText && t.helperText ? (u(), v(p, {
-          key: 0,
-          class: "helper-text--text helper-text",
-          size: "caption"
-        }, {
-          default: m(() => [
-            f(c(t.helperText), 1)
-          ]),
-          _: 1
-        })) : R("", !0),
-        t.errorText ? (u(), v(p, i({
-          key: 1,
-          size: "caption",
-          class: "helper-text--error helper-text"
-        }, e(s)[e(r).ERROR_TEXT]), {
-          default: m(() => [
-            f(c(t.errorText), 1)
-          ]),
-          _: 1
-        }, 16)) : R("", !0)
-      ], 16)
-    ], 2));
-  }
-});
-export {
-  U as default
-};
+ import "../../../RadioButton.vue_vue_type_style_index_0_scoped_dac25b9f_lang.css"; 

package/components/radioButton/v3/RadioGroup.vue2.js

@@ -1,29 +1 @@
- import "../../../RadioGroup.vue_vue_type_style_index_0_scoped_3071ef24_lang.css"; import { defineComponent as u, openBlock as n, createElementBlock as p, mergeProps as f, unref as r, renderSlot as i } from "vue";
-import { RadioTestIdModifiers as t } from "../../../testids/index.js";
-import { radioGroupCommon as m } from "../common/radioGroup.common.js";
-import { useTestIdAttrs as c } from "../../../utils/testIds.js";
-const _ = /* @__PURE__ */ u({
-  __name: "RadioGroup",
-  props: {
-    name: { default: "" },
-    disabled: { type: Boolean, default: !1 },
-    modelValue: null,
-    row: { type: Boolean, default: !1 },
-    testId: { default: "" }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(e, { emit: a }) {
-    const o = e, d = c(o.testId, t), { radioGroupRef: s } = m(o, a);
-    return (l, g) => (n(), p("div", f({
-      ref_key: "radioGroupRef",
-      ref: s,
-      class: [{ "radio-group--row": e.row }, "radio-group"],
-      role: "radiogroup"
-    }, r(d)[r(t).GROUP]), [
-      i(l.$slots, "default", {}, void 0, !0)
-    ], 16));
-  }
-});
-export {
-  _ as default
-};
+ import "../../../RadioGroup.vue_vue_type_style_index_0_scoped_3071ef24_lang.css"; 

package/components/radioButton/v4/RadioButtonV4.vue2.js

@@ -1,80 +1 @@
- import "../../../RadioButtonV4.vue_vue_type_style_index_0_scoped_4f3c7037_lang.css"; import { defineComponent as R, ref as g, inject as k, computed as c, openBlock as b, createElementBlock as B, normalizeClass as v, unref as e, createElementVNode as l, withDirectives as w, mergeProps as m, isRef as C, vModelRadio as L, renderSlot as N, createVNode as T, withCtx as V, createTextVNode as h, toDisplayString as y, createBlock as A, createCommentVNode as x } from "vue";
-import I from "../../typography/v4/Typography.vue.js";
-import { radioGroupKey as G } from "../common/useRadio.js";
-import { RadioTestIdModifiers as r } from "../../../testids/index.js";
-import { useTestIdAttrs as S } from "../../../utils/testIds.js";
-const M = { class: "wrapper-with-description" }, P = { class: "wrapper" }, j = ["value", "name", "disabled"], _ = /* @__PURE__ */ R({
-  __name: "RadioButtonV4",
-  props: {
-    value: null,
-    label: { default: "" },
-    name: { default: "" },
-    modelValue: { default: void 0 },
-    testId: { default: "" },
-    labelDescription: { default: "" }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(t, { emit: D }) {
-    const o = t, n = S(o.testId, r), u = g(), a = k(G, void 0), p = c(() => !!a), d = c(() => a?.disabled), s = c({
-      get() {
-        return p.value ? a?.modelValue : o.modelValue;
-      },
-      set(i) {
-        p.value ? a?.changeEvent(i) : D("update:modelValue", i), u.value && (u.value.checked = o.modelValue === o.value);
-      }
-    });
-    return (i, f) => (b(), B("label", {
-      class: v(["radio-button", { "radio-button--disabled": e(d) }])
-    }, [
-      l("span", M, [
-        l("span", P, [
-          w(l("input", m({
-            ref_key: "radioRef",
-            ref: u,
-            "onUpdate:modelValue": f[0] || (f[0] = (E) => C(s) ? s.value = E : null),
-            value: t.value,
-            name: t.name || e(a)?.name,
-            type: "radio",
-            disabled: e(d)
-          }, e(n)[e(r).FIELD]), null, 16, j), [
-            [L, e(s)]
-          ]),
-          l("span", {
-            class: v(["circle", {
-              "circle--selected": e(s) === t.value,
-              "circle--disabled": e(d)
-            }])
-          }, null, 2)
-        ]),
-        l("span", m({
-          class: ["label", { "label--disabled": e(d) }]
-        }, e(n)[e(r).LABEL]), [
-          N(i.$slots, "default", {}, () => [
-            T(e(I), {
-              variant: "body2",
-              "is-truncated": ""
-            }, {
-              default: V(() => [
-                h(y(t.label), 1)
-              ]),
-              _: 1
-            })
-          ], !0)
-        ], 16)
-      ]),
-      t.labelDescription ? (b(), A(e(I), m({
-        key: 0,
-        variant: "body2",
-        class: "label-description"
-      }, e(n)[e(r).LABEL_DESCRIPTION]), {
-        default: V(() => [
-          h(y(t.labelDescription), 1)
-        ]),
-        _: 1
-      }, 16)) : x("", !0)
-    ], 2));
-  }
-});
-export {
-  _ as default
-};
+ import "../../../RadioButtonV4.vue_vue_type_style_index_0_scoped_4f3c7037_lang.css"; 

package/components/radioButton/v4/RadioGroupV4.vue2.js

@@ -1,29 +1 @@
- import "../../../RadioGroupV4.vue_vue_type_style_index_0_scoped_f8e8cbab_lang.css"; import { defineComponent as u, openBlock as n, createElementBlock as p, mergeProps as f, unref as r, renderSlot as i } from "vue";
-import { RadioTestIdModifiers as t } from "../../../testids/index.js";
-import { radioGroupCommon as m } from "../common/radioGroup.common.js";
-import { useTestIdAttrs as c } from "../../../utils/testIds.js";
-const _ = /* @__PURE__ */ u({
-  __name: "RadioGroupV4",
-  props: {
-    name: { default: "" },
-    disabled: { type: Boolean, default: !1 },
-    modelValue: null,
-    row: { type: Boolean, default: !1 },
-    testId: { default: "" }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(e, { emit: a }) {
-    const o = e, d = c(o.testId, t), { radioGroupRef: s } = m(o, a);
-    return (l, g) => (n(), p("div", f({
-      ref_key: "radioGroupRef",
-      ref: s,
-      class: [{ "radio-group--row": e.row }, "radio-group"],
-      role: "radiogroup"
-    }, r(d)[r(t).GROUP]), [
-      i(l.$slots, "default", {}, void 0, !0)
-    ], 16));
-  }
-});
-export {
-  _ as default
-};
+ import "../../../RadioGroupV4.vue_vue_type_style_index_0_scoped_f8e8cbab_lang.css"; 

package/components/snackbar/common/notify.js

@@ -1,4 +1,4 @@
-import { isVNode as x, createVNode as N, render as v } from "vue";
+import { isVNode as x, createVNode as b, render as h } from "vue";
 import { snackbarTypes as C } from "./snackbar.types.js";
 const p = {
   "top-left": [],
@@ -7,38 +7,38 @@ const p = {
   "bottom-right": []
 }, g = 16;
 let A = 1;
-const E = 2e3, H = (h) => {
-  const i = function(e = {}, t = null) {
+const E = 2e3, H = (v) => {
+  const l = function(e = {}, t = null) {
     (typeof e == "string" || x(e)) && (e = { message: e });
     const o = e.position || "top-right";
     let n = e.zIndex || E, s = p[o].reduce(
-      (m, { vm: b }) => m + (b.el?.offsetHeight || 0) + g,
+      (m, { vm: N }) => m + (N.el?.offsetHeight || 0) + g,
       e.offset || 0
     );
     s += g;
-    const l = () => n++, d = `notification_${A++}`, u = e.onClose, f = {
+    const f = () => n++, d = `notification_${A++}`, u = e.onClose, i = {
       ...e,
-      zIndex: l(),
+      zIndex: f(),
       offset: s,
       id: d,
       onClose: () => {
         y(d, o, u);
       }
-    }, c = document.body, a = document.createElement("div"), r = N(
-      h,
-      f,
-      x(f.message) ? {
-        default: () => f.message
+    }, c = document.body, a = document.createElement("div"), r = b(
+      v,
+      i,
+      x(i.message) ? {
+        default: () => i.message
       } : null
     );
-    return r.appContext = t ?? i._context, r.props.onDestroy = () => {
-      v(null, a);
-    }, v(r, a), p[o].push({ vm: r }), c.appendChild(a?.firstElementChild), {
+    return r.appContext = t ?? l._context, r.props.onDestroy = () => {
+      h(null, a);
+    }, h(r, a), p[o].push({ vm: r }), c.appendChild(a?.firstElementChild), {
       // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
       // for out component, so that all closing steps will not be skipped.
       close: () => {
-        const m = r.component?.proxy;
-        m && (m.visible = !1);
+        const m = r.component?.exposed;
+        m?.close && m.close();
       }
     };
   };
@@ -48,22 +48,22 @@ const E = 2e3, H = (h) => {
     );
     if (s === -1)
       return;
-    const { vm: l } = n[s];
-    if (!l)
+    const { vm: f } = n[s];
+    if (!f)
       return;
-    o?.(l);
-    const d = l.el?.offsetHeight, u = t.split("-")[0];
+    o?.(f);
+    const d = f.el?.offsetHeight, u = t.split("-")[0];
     n.splice(s, 1);
-    const f = n.length;
-    for (let c = s; c < f; c++) {
+    const i = n.length;
+    for (let c = s; c < i; c++) {
       const { el: a, component: r } = n[c].vm;
       r.props.offset = Number.parseInt(a.style[u], 10) - d - g;
     }
   }
   C.forEach((e) => {
-    i[e] = (t = {}) => ((typeof t == "string" || x(t)) && (t = {
+    l[e] = (t = {}) => ((typeof t == "string" || x(t)) && (t = {
       message: t
-    }), i({
+    }), l({
       ...t,
       type: e
     }));
@@ -75,7 +75,7 @@ const E = 2e3, H = (h) => {
         o && (o.visible = !1);
       });
   }
-  return i.closeAll = I, i._context = null, i;
+  return l.closeAll = I, l._context = null, l;
 };
 export {
   H as default

package/components/snackbar/common/snackbar.common.js

@@ -1,44 +1,44 @@
-import { ref as v, computed as n, onMounted as p } from "vue";
-import { useEventListener as C, useTimeoutFn as h } from "@vueuse/core";
+import { ref as y, computed as o, onMounted as C } from "vue";
+import { useEventListener as h, useTimeoutFn as p } from "@vueuse/core";
 import k from "../../icon/v3/icons/Close.vue.js";
 import x from "../../icon/v3/icons/Check.vue.js";
 const w = (t) => {
   const r = {
     success: x,
     error: k
-  }, o = v(!1);
+  }, e = y(!1);
   let c;
-  const a = n(() => {
-    const e = t.type;
-    return e && r[t.type] ? e : "";
-  }), l = n(() => r[t.type] || t.icon || ""), f = n(
+  const a = o(() => {
+    const n = t.type;
+    return n && r[t.type] ? n : "";
+  }), l = o(() => r[t.type] || t.icon || ""), f = o(
     () => t.position.endsWith("right") ? "right" : "left"
-  ), m = n(
+  ), m = o(
     () => t.position.startsWith("top") ? "top" : "bottom"
-  ), y = n(() => ({
+  ), d = o(() => ({
     [m.value]: `${t.offset}px`,
     zIndex: t.zIndex
   }));
   function i() {
-    t.duration > 0 && ({ stop: c } = h(() => {
-      o.value && s();
+    t.duration > 0 && ({ stop: c } = p(() => {
+      e.value && s();
     }, t.duration));
   }
   function u() {
     c?.();
   }
   function s() {
-    o.value = !1;
+    e.value = !1;
   }
-  function d({ code: e }) {
-    e === "Delete" || e === "Backspace" ? u() : e === "Escape" ? o.value && s() : i();
+  function v({ code: n }) {
+    n === "Delete" || n === "Backspace" ? u() : n === "Escape" ? e.value && s() : i();
   }
-  return p(() => {
-    i(), o.value = !0;
-  }), C(document, "keydown", d), {
-    visible: o,
+  return C(() => {
+    t.isLoading || i(), e.value = !0;
+  }), h(document, "keydown", v), {
+    visible: e,
     horizontalClass: f,
-    positionStyle: y,
+    positionStyle: d,
     clearTimer: u,
     startTimer: i,
     iconComponent: l,

package/components/snackbar/common/snackbar.types.d.ts

@@ -16,13 +16,14 @@ export interface SnackbarProps {
     offset: number;
     onClick: () => void;
     onClose: () => void;
-    type: 'success' | 'error' | 'info';
+    type: 'success' | 'error' | 'info' | 'loading';
     position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     showClose?: boolean;
     title?: string;
     actionButtons: ButtonProps[];
     zIndex?: number;
     testId?: string;
+    isLoading?: boolean;
 }
 export type SnackbarOptions = Omit<SnackbarProps, 'id'> & {
     appendTo?: HTMLElement | string;