@ironsource/shared-ui 2.2.0-rc.4 → 2.2.0-rc.40

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;

package/design-foundation.stories/colors/ColorsData.d.ts

@@ -2,18 +2,19 @@ export declare const colorPaletteLight: {
     background: {
         default: string;
         paper: string;
-        backdrop: string;
         'modal-elevation': string;
-        'modal-elevation-0': string;
-        'modal-elevation-1': string;
-        'modal-elevation-2': string;
-        'modal-elevation-3': string;
-        'modal-elevation-4': string;
-        'modal-elevation-5': string;
-        'modal-elevation-6': string;
-        'modal-elevation-7': string;
-        'modal-elevation-8': string;
-        'modal-elevation-9': string;
+        backdrop: string;
+        'paper-elevation-0': string;
+        'paper-elevation-1': string;
+        'paper-elevation-2': string;
+        'paper-elevation-3': string;
+        'paper-elevation-4': string;
+        'paper-elevation-5': string;
+        'paper-elevation-6': string;
+        'paper-elevation-7': string;
+        'paper-elevation-8': string;
+        'paper-elevation-9': string;
+        inset: string;
     };
     action: {
         primary: string;
@@ -21,23 +22,27 @@ export declare const colorPaletteLight: {
         hover: string;
         selected: string;
         disabled: string;
-        disabledBackground: string;
+        'disabled-background': string;
         focus: string;
-        outlinedBorder: string;
+        'outlined-border': string;
     };
     default: {
-        light: string;
         main: string;
+        lighter: string;
+        light: string;
         dark: string;
-        outlinedBorder: string;
-        contrastText: string;
-        buttonContrastText: string;
+        darker: string;
+        'contrast-text': string;
+        'outlined-border': string;
+        'main-8-p': string;
+        'main-50-p': string;
+        'button-contrast-text': string;
     };
     common: {
         white: string;
         black: string;
-        inverseWhite: string;
-        inverseBlack: string;
+        'inverse-white': string;
+        'inverse-black': string;
         divider: string;
         'divider-elevation-0': string;
     };
@@ -50,64 +55,64 @@ export declare const colorPaletteLight: {
         lighter: string;
         light: string;
         main: string;
-        main8p: string;
-        main50p: string;
+        'main-8-p': string;
+        'main-50-p': string;
         dark: string;
         darker: string;
-        outlinedBorder: string;
-        contrastText: string;
-        buttonContrastText: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
     };
     info: {
         lighter: string;
         light: string;
         main: string;
-        main8p: string;
-        main50p: string;
+        'main-8-p': string;
+        'main-50-p': string;
         dark: string;
         darker: string;
-        outlinedBorder: string;
-        contrastText: string;
-        buttonContrastText: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
     };
     success: {
         lighter: string;
         light: string;
         main: string;
-        main8p: string;
-        main50p: string;
+        'main-8-p': string;
+        'main-50-p': string;
         dark: string;
         darker: string;
-        outlinedBorder: string;
-        contrastText: string;
-        buttonContrastText: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
     };
     warning: {
         lighter: string;
         light: string;
         main: string;
-        main8p: string;
-        main50p: string;
+        'main-8-p': string;
+        'main-50-p': string;
         dark: string;
         darker: string;
-        outlinedBorder: string;
-        contrastText: string;
-        buttonContrastText: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
     };
     error: {
         lighter: string;
         light: string;
         main: string;
-        main8p: string;
-        main50p: string;
+        'main-8-p': string;
+        'main-50-p': string;
         dark: string;
         darker: string;
-        outlinedBorder: string;
-        contrastText: string;
-        buttonContrastText: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
     };
-    'A/B test': {
-        'A Control': string;
-        'B test': string;
+    ab: {
+        a: string;
+        b: string;
     };
 };