@ironsource/shared-ui 2.2.0-test.12 → 2.2.0-test.14

package/components/dateRange/v4/DateRangeV4.vue.d.ts

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     includeToday?: boolean;
     allowedDays?: number;
     maxDaysInRange?: number;
-    datePresetList?: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12";
+    datePresetList?: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12";
     regex?: RegExp;
     dateFormat?: string;
     uniqueId?: string | number;
@@ -50,7 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     includeToday?: boolean;
     allowedDays?: number;
     maxDaysInRange?: number;
-    datePresetList?: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12";
+    datePresetList?: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12";
     regex?: RegExp;
     dateFormat?: string;
     uniqueId?: string | number;
@@ -93,7 +93,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dateFormat: string;
     types: ("date" | "week" | "month")[];
     maxDaysInRange: number;
-    datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12";
+    datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12";
     regex: RegExp;
     initialType: "date" | "week" | "month";
     openOnTop: boolean;

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

@@ -11,7 +11,7 @@ declare const DateRangeTypes: () => ({
             dateFormat: string;
             types: ("date" | "week" | "month")[];
             maxDaysInRange: number;
-            datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12";
+            datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12";
             regex: RegExp;
             initialType: "date" | "week" | "month";
             openOnTop: boolean;
@@ -59,7 +59,7 @@ declare const DateRangeTypes: () => ({
                 default: any;
             };
             datePresetList: {
-                type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12">;
+                type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12">;
                 default: string;
             };
             regex: {
@@ -151,7 +151,7 @@ declare const DateRangeTypes: () => ({
                 default: any;
             };
             datePresetList: {
-                type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12">;
+                type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12">;
                 default: string;
             };
             regex: {
@@ -204,7 +204,7 @@ declare const DateRangeTypes: () => ({
             dateFormat: string;
             types: ("date" | "week" | "month")[];
             maxDaysInRange: number;
-            datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12";
+            datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12";
             regex: RegExp;
             initialType: "date" | "week" | "month";
             openOnTop: boolean;
@@ -272,7 +272,7 @@ declare const DateRangeTypes: () => ({
             default: any;
         };
         datePresetList: {
-            type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12">;
+            type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12">;
             default: string;
         };
         regex: {
@@ -354,7 +354,7 @@ declare const DateRangeTypes: () => ({
         default: any;
     };
     datePresetList: {
-        type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12">;
+        type: import("vue").PropType<"date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12">;
         default: string;
     };
     regex: {
@@ -407,7 +407,7 @@ declare const DateRangeTypes: () => ({
     dateFormat: string;
     types: ("date" | "week" | "month")[];
     maxDaysInRange: number;
-    datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "month-3-6-9-12";
+    datePresetList: "date" | "week" | "month" | "date1-7-14-30-90" | "date7-14-30-60-90" | "date7-14-31-60-90" | "dateWithoutToday" | "dateWithoutLastMonth" | "dateWithLastMonth" | "month-3-6-9-12";
     regex: RegExp;
     initialType: "date" | "week" | "month";
     openOnTop: boolean;

package/components/dropdown/v4/ButtonDropdownTrigger.vue.d.ts

@@ -58,8 +58,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     withTooltip: boolean;
     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";
     disabled: boolean;
-    size: "small" | "medium";
     maxWidth: number;
+    size: "small" | "medium";
     open: boolean;
     startIconName: string;
     startIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";

package/components/tag/Tag.vue.d.ts

@@ -36,6 +36,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "update:label": (value: string) => void;
     remove: () => void;
     stopEditing: () => void;
+    "update:isSelected": (value: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     label: string;
     isSelected: boolean;
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
     onStopEditing?: () => any;
+    "onUpdate:isSelected"?: (value: boolean) => any;
 }, {
     label: string;
     testId: string;

package/components/tag/Tag.vue.js

@@ -1,7 +1,7 @@
 import o from "./Tag.vue2.js";
 /* empty css          */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Tag.vue_vue_type_style_index_0_scoped_4fd00d7c_lang.css"; //*');
-const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-4fd00d7c"]]);
+// import "../../Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css"; //*');
+const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78f19cb0"]]);
 export {
   c as default
 };

package/components/tag/Tag.vue2.js

@@ -1,4 +1,4 @@
- import "../../Tag.vue_vue_type_style_index_0_scoped_4fd00d7c_lang.css"; import { defineComponent as J, ref as u, computed as d, watch as N, nextTick as S, openBlock as v, createBlock as C, unref as l, withCtx as f, createElementVNode as E, createVNode as w, createTextVNode as V, toDisplayString as T, normalizeClass as p, normalizeStyle as R, withModifiers as m, createCommentVNode as $, withDirectives as O, createElementBlock as H, isRef as Q, withKeys as K, vModelText as X, vShow as Z } from "vue";
+ import "../../Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css"; import { defineComponent as J, ref as s, computed as d, watch as S, nextTick as N, openBlock as f, createBlock as C, unref as l, withCtx as m, createElementVNode as E, createVNode as w, createTextVNode as V, toDisplayString as T, normalizeClass as p, normalizeStyle as R, withModifiers as b, createCommentVNode as $, withDirectives as O, createElementBlock as H, isRef as Q, withKeys as K, vModelText as X, vShow as Z } from "vue";
 import D from "../typography/v4/Typography.vue.js";
 import W from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
@@ -24,33 +24,33 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
     maxLength: { default: void 0 },
     maxLengthTooltip: { default: "You have reached the maximum number of characters" }
   },
-  emits: ["update:label", "remove", "stopEditing"],
-  setup(a, { emit: b }) {
-    const e = a, r = u(!1), y = u(null), h = u(void 0), k = u(!1), s = u(!1), o = u(e.isSelected || e.editable), z = d(() => !e.label && !r.value && e.placeholder), I = d(() => (console.log(
+  emits: ["update:label", "remove", "stopEditing", "update:isSelected"],
+  setup(a, { emit: v }) {
+    const e = a, r = s(!1), y = s(null), h = s(void 0), k = s(!1), u = s(!1), i = s(e.isSelected || e.editable), z = d(() => !e.label && !r.value && e.placeholder), I = d(() => (console.log(
       "isTooltipOpen",
-      e.maxLength && i.value.length >= e.maxLength && r.value
-    ), e.maxLength && i.value.length >= e.maxLength && r.value)), g = d(() => e.disabled || !e.selectable || r.value ? "outlined" : s.value ? "filled" : !o.value && !e.editable ? "outlined" : e.variant), F = d(() => e.disabled ? "default" : e.isInvalid ? "error" : o.value || !o.value && e.editable || !e.selectable ? e.color : "default"), i = d({
+      e.maxLength && o.value.length >= e.maxLength && r.value
+    ), e.maxLength && o.value.length >= e.maxLength && r.value)), g = d(() => e.disabled || !e.selectable || r.value ? "outlined" : u.value ? "filled" : !i.value && !e.editable ? "outlined" : e.variant), F = d(() => e.disabled ? "default" : e.isInvalid ? "error" : i.value || !i.value && e.editable || !e.selectable ? e.color : "default"), o = d({
       get: () => e.label,
       set: (n) => {
-        b("update:label", n);
+        v("update:label", n);
       }
-    }), M = u(null), P = () => M.value?.focus(), U = async () => {
-      e.disabled || !e.selectable || (e.editable ? (r.value = !0, await S(), P()) : o.value = !o.value);
+    }), M = s(null), P = () => M.value?.focus(), U = async () => {
+      e.disabled || !e.selectable || (e.editable ? (r.value = !0, await N(), P()) : (i.value = !i.value, v("update:isSelected", i.value)));
     }, Y = () => {
-      b("stopEditing"), x();
+      v("stopEditing"), x();
     }, x = () => {
-      r.value = !1, !i.value && !e.placeholder && b("remove");
+      r.value = !1, !o.value && !e.placeholder && v("remove");
     };
-    N(
-      () => [i.value, e.placeholder, r.value],
+    S(
+      () => [o.value, e.placeholder, r.value],
       async () => {
-        await S(), r.value && y.value ? h.value = y.value.offsetWidth + "px" : h.value = void 0;
+        await N(), r.value && y.value ? h.value = y.value.offsetWidth + "px" : h.value = void 0;
       },
       { immediate: !0 }
-    ), N(
+    ), S(
       () => e.editable,
       () => {
-        e.editable && (o.value = !0);
+        e.editable && (i.value = !0);
       }
     );
     const B = {
@@ -86,7 +86,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       if (e.disabled)
         return "var(--action-disabled)";
       const n = e.isInvalid ? "error" : e.color;
-      return o.value || !e.selectable ? L[n] : "var(--action-active)";
+      return i.value || !e.selectable ? L[n] : "var(--action-active)";
     }), G = d(() => {
       if (e.editable && e.variant !== "outlined" || !e.selectable) {
         const n = r.value ? B[e.color] : "var(--primary-main-50-p)";
@@ -94,11 +94,11 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
           "--outline-color": e.isInvalid ? B.error : n
         };
       }
-      return s.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
-        "--outline-color": o.value ? "var(--primary-main-50-p)" : "var(--action-active)"
+      return u.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
+        "--outline-color": i.value ? "var(--primary-main-50-p)" : "var(--action-active)"
       } : {};
     });
-    return (n, t) => (v(), C(l(ee), {
+    return (n, t) => (f(), C(l(ee), {
       placement: "top",
       text: a.maxLengthTooltip,
       "is-open": l(I),
@@ -106,45 +106,45 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       distance: 10,
       skidding: 10
     }, {
-      content: f(() => [
+      content: m(() => [
         E("div", ae, [
           w(l(D), { variant: "body2" }, {
-            default: f(() => [
+            default: m(() => [
               V(T(a.maxLengthTooltip), 1)
             ]),
             _: 1
           })
         ])
       ]),
-      trigger: f(() => [
+      trigger: m(() => [
         w(l(_), {
           class: p({
             "rounded-tag": a.rounded,
             "tag-editing": r.value && l(g) !== "outlined",
             // outlined chips have an outline
-            "tag-hover-outline": a.label && s.value && l(g) !== "outlined",
+            "tag-hover-outline": a.label && u.value && l(g) !== "outlined",
             // outlined chips have an outline
-            "unselected-tag-hover-outline": a.label && s.value && l(g) !== "outlined" && !o.value && !a.editable,
+            "unselected-tag-hover-outline": a.label && u.value && l(g) !== "outlined" && !i.value && !a.editable,
             // for unselected tags that are not editable, we want to show a hover outline
             "tag-disabled": a.disabled,
             "empty-tag": l(z),
-            "unselected-tag": !o.value && a.selectable && a.label,
+            "unselected-tag": !i.value && a.selectable && a.label && !u.value,
             "editable-tag": a.editable && !a.disabled
           }),
-          label: l(i),
+          label: l(o),
           "test-id": a.testId,
           color: l(F),
           size: a.size,
           variant: l(g),
           disabled: a.disabled,
           style: R(l(G)),
-          onMouseover: t[5] || (t[5] = (c) => s.value = !0),
-          onMouseleave: t[6] || (t[6] = (c) => s.value = !1),
-          onClick: m(U, ["stop"])
+          onMouseover: t[5] || (t[5] = (c) => u.value = !0),
+          onMouseleave: t[6] || (t[6] = (c) => u.value = !1),
+          onClick: b(U, ["stop"])
         }, {
-          default: f(() => [
+          default: m(() => [
             E("div", le, [
-              a.iconName ? (v(), C(l(W), {
+              a.iconName ? (f(), C(l(W), {
                 key: 0,
                 name: a.iconName,
                 size: "16px",
@@ -152,11 +152,11 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
                 class: "tag-icon",
                 type: a.iconType
               }, null, 8, ["name", "color", "type"])) : $("", !0),
-              r.value ? O((v(), H("input", {
+              r.value ? O((f(), H("input", {
                 key: 2,
                 ref_key: "inputRef",
                 ref: M,
-                "onUpdate:modelValue": t[0] || (t[0] = (c) => Q(i) ? i.value = c : null),
+                "onUpdate:modelValue": t[0] || (t[0] = (c) => Q(o) ? o.value = c : null),
                 placeholder: a.placeholder,
                 class: p(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
                 spellcheck: "false",
@@ -164,35 +164,35 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
                 maxlength: a.maxLength,
                 onBlur: Y,
                 onKeyup: [
-                  K(m(x, ["prevent"]), ["enter"]),
-                  K(m(x, ["prevent"]), ["esc"])
+                  K(b(x, ["prevent"]), ["enter"]),
+                  K(b(x, ["prevent"]), ["esc"])
                 ]
               }, null, 46, te)), [
                 [
                   X,
-                  l(i),
+                  l(o),
                   void 0,
                   { trim: !0 }
                 ]
-              ]) : (v(), C(l(D), {
+              ]) : (f(), C(l(D), {
                 key: 1,
                 variant: "chipLabel",
                 class: p(["tag-label", {
-                  "tag-label--placeholder": !l(i) && a.placeholder,
+                  "tag-label--placeholder": !l(o) && a.placeholder,
                   "tag-label--disabled": a.disabled
                 }])
               }, {
-                default: f(() => [
-                  V(T(l(i) || a.placeholder), 1)
+                default: m(() => [
+                  V(T(l(o) || a.placeholder), 1)
                 ]),
                 _: 1
               }, 8, ["class"])),
-              r.value ? (v(), H("span", {
+              r.value ? (f(), H("span", {
                 key: 3,
                 ref_key: "sizerRef",
                 ref: y,
                 class: "tag-input-sizer"
-              }, T(l(i) || a.placeholder || ""), 513)) : $("", !0)
+              }, T(l(o) || a.placeholder || ""), 513)) : $("", !0)
             ]),
             O(w(l(W), {
               class: p(["clear-button", { "clear-button--invalid": a.isInvalid }]),
@@ -200,11 +200,11 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
               size: "16px",
               type: "fill",
               color: l(q),
-              onMousedown: t[1] || (t[1] = m(() => {
+              onMousedown: t[1] || (t[1] = b(() => {
               }, ["prevent"])),
               onMouseover: t[2] || (t[2] = (c) => k.value = !0),
               onMouseleave: t[3] || (t[3] = (c) => k.value = !1),
-              onClick: t[4] || (t[4] = m((c) => b("remove"), ["stop"]))
+              onClick: t[4] || (t[4] = b((c) => v("remove"), ["stop"]))
             }, null, 8, ["class", "color"]), [
               [Z, a.editable && !l(z) && a.selectable]
             ])

package/components/tag/index.d.ts

@@ -69,6 +69,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
     "update:label": (value: string) => void;
     remove: () => void;
     stopEditing: () => void;
+    "update:isSelected": (value: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
@@ -139,6 +140,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
     onStopEditing?: () => any;
+    "onUpdate:isSelected"?: (value: boolean) => any;
 }, {
     label: string;
     testId: 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;