@ironsource/shared-ui 2.2.0-test.8 → 2.2.0-test.89

package/components/tagsField/TagsFieldChip.vue2.js

@@ -1,129 +1,81 @@
- import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_fabe8ff0_lang.css"; import { defineComponent as N, ref as d, computed as y, watch as S, nextTick as b, openBlock as s, createBlock as g, unref as t, normalizeClass as c, normalizeStyle as k, withModifiers as o, withCtx as C, createElementVNode as K, createTextVNode as D, toDisplayString as w, withDirectives as z, createElementBlock as x, isRef as F, withKeys as I, vModelText as O, createCommentVNode as W, createVNode as L, vShow as U } from "vue";
-import j from "../typography/v4/Typography.vue.js";
-import q from "../icon/v4/IconV4.vue.js";
+ import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; import { defineComponent as k, ref as p, computed as x, openBlock as C, createBlock as I, unref as t, normalizeClass as c, withModifiers as s, withCtx as f, createElementVNode as v, createVNode as m, createTextVNode as w, toDisplayString as T, withDirectives as B, isRef as E, withKeys as h, vShow as V, vModelText as K, nextTick as N } from "vue";
+import R from "../typography/v4/Typography.vue.js";
+import z from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import A from "../chip/v4/ChipV4.vue.js";
-const G = { class: "chip-content" }, H = ["placeholder", "onKeyup"], Z = /* @__PURE__ */ N({
+import D from "../chip/v4/ChipV4.vue.js";
+const M = { class: "chip-content" }, S = ["onKeyup"], j = /* @__PURE__ */ k({
   __name: "TagsFieldChip",
   props: {
     label: { default: "" },
     isInvalid: { type: Boolean, default: !1 },
-    testId: { default: "" },
-    size: { default: "small" },
-    rounded: { type: Boolean, default: !0 },
-    disabled: { type: Boolean, default: !1 },
-    removable: { type: Boolean, default: !0 },
-    color: { default: "default" },
-    iconColor: { default: "var(--action-active)" },
-    variant: { default: "filled" },
-    placeholder: { default: "" }
+    testId: { default: "" }
   },
-  emits: ["update:label", "remove", "stopEditing"],
-  setup(e, { emit: n }) {
-    const i = e, a = d(!1), l = y({
-      get: () => i.label,
-      set: (h) => {
-        n("update:label", h);
+  emits: ["update:label", "remove"],
+  setup(l, { emit: n }) {
+    const b = l, i = p(!1), e = x({
+      get: () => b.label,
+      set: (d) => {
+        n("update:label", d);
       }
-    }), m = d(null), B = () => m.value?.focus(), E = async () => {
-      i.disabled || (a.value = !0, await b(), B());
-    }, R = () => {
-      n("stopEditing"), u();
-    }, u = () => {
-      console.log("stopEditing"), a.value = !1, !l.value && !i.placeholder && n("remove");
-    }, v = d(null), f = d(void 0);
-    S(
-      () => [l.value, i.placeholder, a.value],
-      async () => {
-        await b(), a.value && v.value ? f.value = v.value.offsetWidth + "px" : f.value = void 0;
-      },
-      { immediate: !0 }
-    );
-    const p = {
-      default: "var(--default-outlined-border)",
-      primary: "var(--primary-main)",
-      info: "var(--info-dark)",
-      error: "var(--error-main)",
-      warning: "var(--warning-main)",
-      success: "var(--success-main)",
-      dark: "var(--common-divider)"
-    }, M = y(() => a.value && i.variant !== "outlined" ? {
-      "--outline-color": i.isInvalid ? p.error : p[i.color] || "var(--default-outlined-border)"
-    } : {}), T = () => {
-      console.log("handleRemove"), n("remove");
+    }), r = p(null), g = () => r.value?.focus(), y = async () => {
+      i.value = !0, await N(), g();
+    }, o = () => {
+      i.value = !1, e.value || n("remove");
     };
-    return (h, r) => (s(), g(t(A), {
-      class: c({
-        "rounded-chip": e.rounded,
-        "tags-field-chip--editing": a.value && e.variant !== "outlined"
-        // outlined chips have an outline
-      }),
-      label: t(l),
-      "test-id": e.testId,
-      color: e.isInvalid ? "error" : e.color,
-      size: e.size,
-      variant: e.variant,
-      disabled: e.disabled,
-      style: k(t(M)),
-      onClick: o(E, ["stop"])
+    return (d, a) => (C(), I(t(D), {
+      class: c(["tags-field-chip", {
+        "tags-field-chip--editing": i.value,
+        "tags-field-chip--invalid": l.isInvalid
+      }]),
+      label: t(e),
+      "test-id": l.testId,
+      color: l.isInvalid ? "error" : "default",
+      onClick: s(y, ["stop"])
     }, {
-      default: C(() => [
-        K("div", G, [
-          a.value ? z((s(), x("input", {
-            key: 1,
+      default: f(() => [
+        v("div", M, [
+          m(t(R), {
+            variant: "chipLabel",
+            class: c(["chip-label", { "chip-label--hidden": i.value }])
+          }, {
+            default: f(() => [
+              w(T(t(e)), 1)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          B(v("input", {
             ref_key: "inputRef",
-            ref: m,
-            "onUpdate:modelValue": r[0] || (r[0] = (V) => F(l) ? l.value = V : null),
-            placeholder: e.placeholder,
-            class: c(["chip-input", { "chip-input-outline": e.variant === "outlined" }]),
+            ref: r,
+            "onUpdate:modelValue": a[0] || (a[0] = (u) => E(e) ? e.value = u : null),
+            class: "chip-input",
             spellcheck: "false",
-            style: k({ width: f.value }),
-            onBlur: R,
+            onBlur: o,
             onKeyup: [
-              I(o(u, ["prevent"]), ["enter"]),
-              I(o(u, ["prevent"]), ["esc"])
+              h(s(o, ["prevent"]), ["enter"]),
+              h(s(o, ["prevent"]), ["esc"])
             ]
-          }, null, 46, H)), [
+          }, null, 40, S), [
+            [V, i.value],
             [
-              O,
-              t(l),
+              K,
+              t(e),
               void 0,
               { trim: !0 }
             ]
-          ]) : (s(), g(t(j), {
-            key: 0,
-            variant: "chipLabel",
-            class: c(["chip-label", { "chip-label--placeholder": !t(l) && e.placeholder }])
-          }, {
-            default: C(() => [
-              D(w(t(l) || e.placeholder), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])),
-          a.value ? (s(), x("span", {
-            key: 2,
-            ref_key: "sizerRef",
-            ref: v,
-            class: "chip-input-sizer"
-          }, w(t(l) || e.placeholder || ""), 513)) : W("", !0)
+          ])
         ]),
-        z(L(t(q), {
-          class: c(["clear-button", { "clear-button--invalid": e.isInvalid }]),
+        m(t(z), {
+          class: c(["clear-button", { "clear-button--invalid": l.isInvalid }]),
           name: "x-circle",
           size: "16px",
           type: "fill",
-          color: e.isInvalid ? "var(--error-dark)" : e.iconColor,
-          onMousedown: r[1] || (r[1] = o(() => {
-          }, ["prevent"])),
-          onClick: o(T, ["stop"])
-        }, null, 8, ["class", "color", "onClick"]), [
-          [U, e.removable]
-        ])
+          onClick: a[1] || (a[1] = s((u) => n("remove"), ["stop"]))
+        }, null, 8, ["class"])
       ]),
       _: 1
-    }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"]));
+    }, 8, ["class", "label", "test-id", "color", "onClick"]));
   }
 });
 export {
-  Z as default
+  j as default
 };

package/components/tagsField/index.d.ts

@@ -10,46 +10,13 @@ declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-    variant: {
-        type: import("vue").PropType<"filled" | "outlined">;
-        default: string;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    color: {
-        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<"small" | "medium">;
-        default: string;
-    };
-    rounded: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     isInvalid: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    removable: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
-    stopEditing: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
@@ -60,58 +27,17 @@ declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-    variant: {
-        type: import("vue").PropType<"filled" | "outlined">;
-        default: string;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    color: {
-        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<"small" | "medium">;
-        default: string;
-    };
-    rounded: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     isInvalid: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    removable: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
 }>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
-    onStopEditing?: () => any;
 }, {
     label: string;
     testId: string;
-    variant: "filled" | "outlined";
-    disabled: boolean;
-    color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
-    size: "small" | "medium";
-    rounded: boolean;
-    placeholder: string;
     isInvalid: boolean;
-    removable: boolean;
-    iconColor: string;
 }> | import("vue").DefineComponent<{
     testId: {
         type: import("vue").PropType<string>;

package/components/tooltip/v4/TooltipV4.vue.d.ts

@@ -14,6 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown?: boolean;
     autoHide?: boolean;
     dontWrapDisabled?: boolean;
+    maxWidth?: string;
 }>, {
     text: any;
     header: any;
@@ -29,6 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown: any;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -46,6 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown?: boolean;
     autoHide?: boolean;
     dontWrapDisabled?: boolean;
+    maxWidth?: string;
 }>, {
     text: any;
     header: any;
@@ -61,6 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown: any;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }>>> & {
     onShow?: () => any;
 }, {
@@ -78,6 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     shown: boolean;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }>, {
     default?(_: {}): any;
     tooltip?(_: {

package/components/tooltip/v4/TooltipV4.vue.js

@@ -1,8 +1,8 @@
 import o from "./TooltipV4.vue2.js";
 /* empty css                *//* empty css                */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_8a451e54_lang.css"; //*');
+// import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_a8aebfee_lang.css"; //*');
 // import "../../../TooltipV4.vue_vue_type_style_index_1_lang.css";  //');
-const l = /* @__PURE__ */ e(o, [["__scopeId", "data-v-8a451e54"]]);
+const l = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a8aebfee"]]);
 export {
   l as default
 };

package/components/tooltip/v4/TooltipV4.vue2.js

@@ -1,14 +1,14 @@
- import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_8a451e54_lang.css";  import "../../../TooltipV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as c, renderSlot as l, openBlock as d, createBlock as i, unref as t, mergeProps as m, withCtx as n, createTextVNode as y, toDisplayString as p, createElementVNode as T } from "vue";
-import g from "./TextWithTitleContent.vue.js";
-import { Tooltip as w } from "floating-vue";
-import { TooltipTestIdModifiers as r } from "../../../testids/index.js";
-import b from "../../typography/v4/Typography.vue.js";
-import { tooltipCommon as v } from "../common/Tooltip.common.js";
-import { useTestIdAttrs as x } from "../../../utils/testIds.js";
-const B = {
+ import "../../../TooltipV4.vue_vue_type_style_index_0_scoped_a8aebfee_lang.css";  import "../../../TooltipV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as T, computed as C, onMounted as N, watch as B, onUnmounted as E, renderSlot as i, openBlock as c, createBlock as u, unref as n, mergeProps as g, withCtx as f, createTextVNode as b, toDisplayString as $, createElementVNode as I } from "vue";
+import V from "./TextWithTitleContent.vue.js";
+import { Tooltip as W } from "floating-vue";
+import { TooltipTestIdModifiers as p } from "../../../testids/index.js";
+import k from "../../typography/v4/Typography.vue.js";
+import { tooltipCommon as S } from "../common/Tooltip.common.js";
+import { useTestIdAttrs as A } from "../../../utils/testIds.js";
+const z = {
   ref: "container",
   class: "container"
-}, E = /* @__PURE__ */ c({
+}, F = /* @__PURE__ */ T({
   __name: "TooltipV4",
   props: {
     text: { default: null },
@@ -24,45 +24,85 @@ const B = {
     container: { default: "body" },
     shown: { type: Boolean, default: null },
     autoHide: { type: Boolean, default: !0 },
-    dontWrapDisabled: { type: Boolean, default: !1 }
+    dontWrapDisabled: { type: Boolean, default: !1 },
+    maxWidth: { default: "21.875rem" }
   },
   emits: ["show"],
-  setup(e, { emit: h }) {
-    const s = e, { textForDisplay: a } = v(s), u = x(s.testId, r);
-    return (o, f) => (e.disabled || !e.text) && e.dontWrapDisabled ? l(o.$slots, "default", { key: 0 }, void 0, !0) : (d(), i(t(w), m({ key: 1 }, { ...o.$props, ...t(u)[t(r).TRIGGER] }, {
-      theme: e.theme,
+  setup(t, { emit: v }) {
+    const a = t, { textForDisplay: m } = S(a), h = A(a.testId, p), d = (e) => `--tooltip-max-width-${e.replace(/[^a-zA-Z0-9]/g, "-")}`, r = (e) => `max-width-class-${e.replace(/[^a-zA-Z0-9]/g, "-")}`, x = (e) => {
+      const o = r(e), l = d(e);
+      return `
+    .v-popper--theme-light-theme-v4.v4-tooltip.${o} .v-popper__wrapper {
+      max-width: var(${l}, 21.875rem)
+    }
+  `;
+    }, w = C(
+      () => [
+        a.theme,
+        a.placement,
+        "v4-tooltip",
+        a.maxWidth ? r(a.maxWidth) : ""
+        // This is the class name that will be used as a selector for the tooltip
+      ].filter(Boolean)
+    ), y = (e) => {
+      const o = d(e), l = r(e);
+      if (document.documentElement.style.setProperty(o, e), !document.getElementById(l)) {
+        const s = document.createElement("style");
+        s.id = l, s.textContent = x(e), document.head.appendChild(s);
+      }
+    };
+    return N(() => {
+      a.maxWidth && y(a.maxWidth);
+    }), B(
+      () => a.maxWidth,
+      (e, o) => {
+        if (o) {
+          const l = d(o);
+          document.documentElement.style.removeProperty(l);
+        }
+        e && y(e);
+      }
+    ), E(() => {
+      if (a.maxWidth) {
+        const e = d(a.maxWidth);
+        document.documentElement.style.removeProperty(e);
+        const o = r(a.maxWidth), l = document.getElementById(o), s = document.getElementsByClassName(o);
+        l && s.length === 0 && l.remove();
+      }
+    }), (e, o) => (t.disabled || !t.text) && t.dontWrapDisabled ? i(e.$slots, "default", { key: 0 }, void 0, !0) : (c(), u(n(W), g({ key: 1 }, { ...e.$props, ...n(h)[n(p).TRIGGER] }, {
+      theme: t.theme,
       "no-auto-focus": "",
-      triggers: e.triggers,
-      delay: { show: e.delay, hide: 0 },
-      placement: e.placement,
-      disabled: e.disabled || e.text && !t(a),
-      "popper-class": [e.theme, e.placement, "v4-tooltip"],
+      triggers: t.triggers,
+      delay: { show: t.delay, hide: 0 },
+      placement: t.placement,
+      disabled: t.disabled || t.text && !n(m),
+      "popper-class": n(w),
       class: ["v4-tooltip"],
-      distance: e.distance,
-      "auto-hide": e.autoHide,
-      shown: e.shown,
-      onApplyShow: f[0] || (f[0] = (k) => h("show"))
+      distance: t.distance,
+      "auto-hide": t.autoHide,
+      shown: t.shown,
+      onApplyShow: o[0] || (o[0] = (l) => v("show"))
     }), {
-      popper: n(() => [
-        l(o.$slots, "tooltip", { text: t(a) }, () => [
-          e.header ? (d(), i(g, {
+      popper: f(() => [
+        i(e.$slots, "tooltip", { text: n(m) }, () => [
+          t.header ? (c(), u(V, {
             key: 1,
-            text: e.text,
-            header: e.header
-          }, null, 8, ["text", "header"])) : (d(), i(t(b), m({
+            text: t.text,
+            header: t.header
+          }, null, 8, ["text", "header"])) : (c(), u(n(k), g({
             key: 0,
             variant: "body2"
-          }, t(u)[t(r).TEXT]), {
-            default: n(() => [
-              y(p(t(a)), 1)
+          }, n(h)[n(p).TEXT]), {
+            default: f(() => [
+              b($(n(m)), 1)
             ]),
             _: 1
           }, 16))
         ], !0)
       ]),
-      default: n(() => [
-        T("div", B, [
-          l(o.$slots, "default", {}, void 0, !0)
+      default: f(() => [
+        I("div", z, [
+          i(e.$slots, "default", {}, void 0, !0)
         ], 512)
       ]),
       _: 3
@@ -70,5 +110,5 @@ const B = {
   }
 });
 export {
-  E as default
+  F as default
 };

package/components/tooltip/v4/index.d.ts

@@ -18,6 +18,7 @@ declare const TooltipTypes: () => ({
             shown: boolean;
             autoHide: boolean;
             dontWrapDisabled: boolean;
+            maxWidth: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             header: {
                 type: import("vue").PropType<string>;
@@ -75,9 +76,13 @@ declare const TooltipTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            maxWidth: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
         }>> & {
             onShow?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "text" | "theme" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "text" | "theme" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -148,6 +153,10 @@ declare const TooltipTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            maxWidth: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
         }>> & {
             onShow?: () => any;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -167,6 +176,7 @@ declare const TooltipTypes: () => ({
             shown: boolean;
             autoHide: boolean;
             dontWrapDisabled: boolean;
+            maxWidth: string;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -244,6 +254,10 @@ declare const TooltipTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        maxWidth: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
     }>> & {
         onShow?: () => any;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
@@ -307,6 +321,10 @@ declare const TooltipTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    maxWidth: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onShow?: () => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -326,6 +344,7 @@ declare const TooltipTypes: () => ({
     shown: boolean;
     autoHide: boolean;
     dontWrapDisabled: boolean;
+    maxWidth: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;