@ironsource/shared-ui 2.1.12-rc.25 → 2.1.12-rc.27

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

@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey?: string;
     endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endTextIconKey?: 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";
+    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";
     treeMainOption?: boolean;
     treeMainOptionExpanded?: boolean;
     stopOptionClickEventPropagation?: boolean;
@@ -23,6 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown?: boolean;
     optionFlagKey?: string;
     isMulti?: boolean;
+    minMaxSelectionTooltipMessage?: string;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -38,7 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey: any;
     endIconType: string;
     endTextIconKey: any;
-    toolTipPlacement: string;
+    tooltipPlacement: string;
     treeMainOption: boolean;
     treeMainOptionExpanded: boolean;
     stopOptionClickEventPropagation: boolean;
@@ -47,6 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown: boolean;
     optionFlagKey: any;
     isMulti: boolean;
+    minMaxSelectionTooltipMessage: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggleTreeCollapse: (option: unknown) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -65,7 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey?: string;
     endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endTextIconKey?: 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";
+    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";
     treeMainOption?: boolean;
     treeMainOptionExpanded?: boolean;
     stopOptionClickEventPropagation?: boolean;
@@ -74,6 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown?: boolean;
     optionFlagKey?: string;
     isMulti?: boolean;
+    minMaxSelectionTooltipMessage?: string;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -89,7 +92,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey: any;
     endIconType: string;
     endTextIconKey: any;
-    toolTipPlacement: string;
+    tooltipPlacement: string;
     treeMainOption: boolean;
     treeMainOptionExpanded: boolean;
     stopOptionClickEventPropagation: boolean;
@@ -98,10 +101,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     treeChildShown: boolean;
     optionFlagKey: any;
     isMulti: boolean;
+    minMaxSelectionTooltipMessage: any;
 }>>> & {
     onToggleTreeCollapse?: (option: unknown) => any;
 }, {
     option: any;
+    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;
     active: boolean;
     endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -118,12 +123,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey: string;
     endTextIconKey: 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";
     treeMainOption: boolean;
     treeMainOptionExpanded: boolean;
     stopOptionClickEventPropagation: boolean;
     treeChildShown: boolean;
     isMulti: boolean;
+    minMaxSelectionTooltipMessage: string;
 }>, {
     image?(_: {}): any;
     flag?(_: {}): any;

package/components/dropdown/v4/OptionV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
-/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css"; //*');
-const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-3dc741c1"]]);
+/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_0287cebf_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-0287cebf"]]);
 export {
-  p as default
+  s as default
 };

package/components/dropdown/v4/OptionV4.vue2.js

@@ -1,12 +1,12 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css"; import { defineComponent as A, ref as w, watch as F, computed as L, openBlock as o, createBlock as f, unref as n, createSlots as N, withCtx as s, createElementVNode as c, normalizeClass as v, createCommentVNode as i, createElementBlock as l, renderSlot as u, createVNode as a, toDisplayString as r, createTextVNode as g, withModifiers as C, Fragment as j, renderList as R } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_0287cebf_lang.css"; import { defineComponent as A, ref as w, watch as F, computed as L, openBlock as i, createBlock as g, unref as n, createSlots as N, withCtx as d, createElementVNode as u, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as r, createVNode as s, toDisplayString as m, createTextVNode as T, withModifiers as C, Fragment as j, renderList as R } from "vue";
 import "../../typography/Heading.vue.js";
 import D from "../../typography/Text.vue.js";
 import q from "../../checkbox/v4/CheckboxV4.vue.js";
-import m from "../../icon/v4/IconV4.vue.js";
+import y from "../../icon/v4/IconV4.vue.js";
 import G from "../../icon/v4/IconFlag.vue.js";
 import { NOOP as I } from "@vue/shared";
 import { optionCommon as H } from "../common/Option.common.js";
-import T from "../../typography/v4/Typography.vue.js";
+import p from "../../typography/v4/Typography.vue.js";
 import O from "../../tooltip/v4/TooltipV4.vue.js";
 import { isElementTruncated as J } from "../../../utils/text.js";
 import { promiseTimeout as Q } from "@vueuse/core";
@@ -31,13 +31,13 @@ const U = { class: "multiline-tooltip" }, W = {
 }, ne = {
   key: 3,
   class: "caption-text"
-}, oe = {
+}, ie = {
   key: 4,
   class: "end-icon"
-}, ie = {
+}, oe = {
   key: 5,
   class: "option-warning"
-}, le = { key: 6 }, ae = ["onClick"], se = { key: 0 }, Ke = /* @__PURE__ */ A({
+}, le = ["onClick"], ae = { key: 0 }, ve = /* @__PURE__ */ A({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -55,7 +55,7 @@ const U = { class: "multiline-tooltip" }, W = {
     endIconKey: { default: null },
     endIconType: { default: "regular" },
     endTextIconKey: { default: null },
-    toolTipPlacement: { default: "right" },
+    tooltipPlacement: { default: "right" },
     treeMainOption: { type: Boolean, default: !1 },
     treeMainOptionExpanded: { type: Boolean, default: !1 },
     stopOptionClickEventPropagation: { type: Boolean, default: !1 },
@@ -63,159 +63,165 @@ const U = { class: "multiline-tooltip" }, W = {
     optionTwoLinesKey: { default: void 0 },
     treeChildShown: { type: Boolean, default: !1 },
     optionFlagKey: { default: null },
-    isMulti: { type: Boolean, default: !1 }
+    isMulti: { type: Boolean, default: !1 },
+    minMaxSelectionTooltipMessage: { default: null }
   },
   emits: ["toggleTreeCollapse"],
   setup(e, { emit: $ }) {
-    const d = e, { selected: K, id: B, onClick: z, api: x } = H(d), M = (t) => {
-      d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? I() : z(t);
-    }, p = w(null), b = w(!1), E = (t) => {
-      d.disabled && (t.stopPropagation(), I());
+    const a = e, { selected: x, id: M, onClick: B, api: b } = H(a), S = (t) => {
+      a.stopOptionClickEventPropagation && t.stopPropagation(), a.disabled ? I() : B(t);
+    }, k = w(null), h = w(!1), z = (t) => {
+      a.disabled && (t.stopPropagation(), I());
     };
-    F([() => d.treeChildShown, p], async () => {
-      await Q(100), b.value = p.value && J(p.value);
+    F([() => a.treeChildShown, k], async () => {
+      await Q(100), h.value = k.value && J(k.value);
     });
-    const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : b.value ? t[d.nameKey] : "", h = L(() => P(d.option)), S = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, V = () => {
-      $("toggleTreeCollapse", d.option);
+    const E = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : h.value ? t[a.nameKey] : "", K = L(() => {
+      const t = a.disabled && a.minMaxSelectionTooltipMessage || "", c = E(a.option);
+      return c ? t ? `${c}. ${t}` : c : t;
+    }), P = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, V = () => {
+      $("toggleTreeCollapse", a.option);
     };
-    return (t, k) => (o(), f(n(O), {
-      text: n(h),
-      "test-id": S(e.option),
-      placement: e.toolTipPlacement,
+    return (t, c) => (i(), g(n(O), {
+      text: n(K),
+      "test-id": P(e.option),
+      placement: e.tooltipPlacement,
       class: "tooltip-option"
     }, N({
-      default: s(() => [
-        c("div", {
+      default: d(() => [
+        u("div", {
           ref: "el",
           class: v(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
-            "item-container--selected": n(K),
+            "item-container--selected": n(x),
             "item-container--multi": e.isMulti
           }]),
-          onClick: E
+          onClick: z
         }, [
-          c("div", {
+          u("div", {
             class: v(["item", {
               "item--multi": e.isMulti,
               "item--with-icon": t.$slots["icon-start"] || t.$slots.image
             }])
           }, [
-            e.isMulti || e.selectAllOption ? (o(), f(n(q), {
+            e.isMulti || e.selectAllOption ? (i(), g(n(q), {
               key: 0,
-              id: n(B).toString(),
+              id: n(M).toString(),
+              disabled: a.disabled,
               tabindex: "-1",
               class: "checkbox",
-              "is-checked": n(K),
+              "is-checked": n(x),
               "is-indeterminate": e.isIndeterminate,
-              onClick: k[0] || (k[0] = (y) => M(y))
-            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (o(), l("div", W, [
-              u(t.$slots, "image", {}, () => [
-                e.imageKey ? (o(), l("img", {
+              onClick: c[0] || (c[0] = (f) => S(f))
+            }, null, 8, ["id", "disabled", "is-checked", "is-indeterminate"])) : o("", !0),
+            !e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (i(), l("div", W, [
+              r(t.$slots, "image", {}, () => [
+                e.imageKey ? (i(), l("img", {
                   key: 0,
                   src: e.option[e.imageKey]
-                }, null, 8, X)) : i("", !0)
+                }, null, 8, X)) : o("", !0)
               ], !0)
-            ])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (o(), l("div", Y, [
-              u(t.$slots, "flag", {}, () => [
-                e.optionFlagKey ? (o(), f(n(G), {
+            ])) : o("", !0),
+            !e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (i(), l("div", Y, [
+              r(t.$slots, "flag", {}, () => [
+                e.optionFlagKey ? (i(), g(n(G), {
                   key: 0,
                   "country-code": e.option[e.optionFlagKey]
-                }, null, 8, ["country-code"])) : i("", !0)
+                }, null, 8, ["country-code"])) : o("", !0)
               ], !0)
-            ])) : i("", !0),
-            !e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (o(), l("div", Z, [
-              u(t.$slots, "icon-start", {}, () => [
-                a(n(m), {
+            ])) : o("", !0),
+            !e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (i(), l("div", Z, [
+              r(t.$slots, "icon-start", {}, () => [
+                s(n(y), {
                   type: e.iconType,
                   name: e.option[e.iconKey],
+                  color: e.option.disabled ? "var(--text-disabled)" : null,
                   size: e.iconType === "regular" ? "20px" : "16px"
-                }, null, 8, ["type", "name", "size"])
+                }, null, 8, ["type", "name", "color", "size"])
               ], !0)
-            ])) : i("", !0),
-            c("div", {
+            ])) : o("", !0),
+            u("div", {
               ref_key: "textContainerRef",
-              ref: p,
+              ref: k,
               class: "text-container"
             }, [
-              a(n(T), {
+              s(n(p), {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: s(() => [
-                  u(t.$slots, "default", {}, () => [
-                    c("div", {
+                default: d(() => [
+                  r(t.$slots, "default", {}, () => [
+                    u("div", {
                       class: v(`option-content-${e.optionTwoLinesVariant} option-content`)
                     }, [
-                      e.option?.conditionalOptions ? (o(), l("div", ee, [
-                        a(n(T), {
+                      e.option?.conditionalOptions ? (i(), l("div", ee, [
+                        s(n(p), {
                           variant: "body2",
                           class: "conditional-option-label"
                         }, {
-                          default: s(() => [
-                            g(r(e.option.conditionalName) + ": ", 1)
+                          default: d(() => [
+                            T(m(e.option.conditionalName) + ": ", 1)
                           ]),
                           _: 1
                         }),
-                        a(n(T), {
+                        s(n(p), {
                           variant: "h5",
                           class: "conditional-option-value"
                         }, {
-                          default: s(() => [
-                            g('"' + r(e.option[e.nameKey]) + '"', 1)
+                          default: d(() => [
+                            T('"' + m(e.option[e.nameKey]) + '"', 1)
                           ]),
                           _: 1
                         })
-                      ])) : (o(), l("div", _, r(e.option[e.nameKey]), 1)),
-                      e.endTextIconKey && e.option[e.endTextIconKey] ? (o(), l("span", te, [
-                        a(n(m), {
+                      ])) : (i(), l("div", _, m(e.option[e.nameKey]), 1)),
+                      e.endTextIconKey && e.option[e.endTextIconKey] ? (i(), l("span", te, [
+                        s(n(y), {
                           type: "regular",
                           name: e.option[e.endTextIconKey],
                           size: "16px"
                         }, null, 8, ["name"])
-                      ])) : i("", !0),
-                      e.optionTwoLinesKey ? (o(), l("div", ne, [
-                        a(n(T), { variant: "caption" }, {
-                          default: s(() => [
-                            g(r(e.option[e.optionTwoLinesKey]), 1)
+                      ])) : o("", !0),
+                      e.optionTwoLinesKey ? (i(), l("div", ne, [
+                        s(n(p), { variant: "caption" }, {
+                          default: d(() => [
+                            T(m(e.option[e.optionTwoLinesKey]), 1)
                           ]),
                           _: 1
                         })
-                      ])) : i("", !0)
+                      ])) : o("", !0)
                     ], 2)
                   ], !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (o(), f(n(D), {
+              e.subtitle ? (i(), g(n(D), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: s(() => [
-                  g(r(e.subtitle), 1)
+                default: d(() => [
+                  T(m(e.subtitle), 1)
                 ]),
                 _: 1
-              })) : i("", !0)
+              })) : o("", !0)
             ], 512),
-            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (o(), l("div", oe, [
-              u(t.$slots, "icon-end", {}, () => [
-                a(n(m), {
+            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (i(), l("div", ie, [
+              r(t.$slots, "icon-end", {}, () => [
+                s(n(y), {
                   type: e.endIconType || "regular",
                   name: e.option[e.endIconKey],
                   size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
-            ])) : i("", !0),
-            e.warningKey && e.option?.[e.warningKey] ? (o(), l("div", ie, [
-              a(n(O), {
+            ])) : o("", !0),
+            e.warningKey && e.option?.[e.warningKey] ? (i(), l("div", oe, [
+              s(n(O), {
                 text: e.option[e.warningKey],
                 placement: "top"
               }, {
-                default: s(() => [
-                  a(n(m), {
+                default: d(() => [
+                  s(n(y), {
                     class: "option-warning__icon",
                     name: "warning-circle",
                     size: "16px"
@@ -223,48 +229,49 @@ const U = { class: "multiline-tooltip" }, W = {
                 ]),
                 _: 1
               }, 8, ["text"])
-            ])) : i("", !0),
-            t.$slots["option-end"] ? (o(), l("div", le, [
-              u(t.$slots, "option-end", { option: e.option }, void 0, !0)
-            ])) : i("", !0),
-            e.treeMainOption ? (o(), l("div", {
+            ])) : o("", !0),
+            t.$slots["option-end"] ? r(t.$slots, "option-end", {
+              key: 6,
+              option: e.option
+            }, void 0, !0) : o("", !0),
+            e.treeMainOption ? (i(), l("div", {
               key: 7,
               class: "tree-main-arrow-wrapper",
               onClick: C(V, ["stop"])
             }, [
-              a(n(m), {
+              s(n(y), {
                 name: "caret-down",
                 size: "16px",
                 class: v(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
               }, null, 8, ["class"])
-            ], 8, ae)) : i("", !0)
+            ], 8, le)) : o("", !0)
           ], 2),
-          n(x).clearable && n(K) ? (o(), l("div", se, [
-            c("button", {
+          n(b).clearable && n(x) ? (i(), l("div", ae, [
+            u("button", {
               class: "clear-button",
-              onClick: k[1] || (k[1] = C((y) => n(x).clearSelection(), ["prevent", "stop"]))
+              onClick: c[1] || (c[1] = C((f) => n(b).clearSelection(), ["prevent", "stop"]))
             }, [
-              a(n(m), {
+              s(n(y), {
                 name: "close",
                 width: "8",
                 height: "8"
               })
             ])
-          ])) : i("", !0)
+          ])) : o("", !0)
         ], 2)
       ]),
       _: 2
     }, [
-      Array.isArray(n(h)) ? {
+      Array.isArray(n(K)) ? {
         name: "tooltip",
-        fn: s(() => [
-          c("div", U, [
-            (o(!0), l(j, null, R(n(h), (y) => (o(), f(n(T), {
-              key: y,
+        fn: d(() => [
+          u("div", U, [
+            (i(!0), l(j, null, R(n(K), (f) => (i(), g(n(p), {
+              key: f,
               variant: "body2"
             }, {
-              default: s(() => [
-                g(r(y), 1)
+              default: d(() => [
+                T(m(f), 1)
               ]),
               _: 2
             }, 1024))), 128))
@@ -276,5 +283,5 @@ const U = { class: "multiline-tooltip" }, W = {
   }
 });
 export {
-  Ke as default
+  ve as default
 };

package/components/dropdown/v4/dropdownStoryArgs.d.ts

@@ -217,6 +217,14 @@ export declare const dropDownStoryArgs: {
             category: string;
         };
     };
+    showClearAll: {
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+        };
+    };
     defaultOpen: {
         control: {
             type: string;