@ironsource/shared-ui 2.1.3-rc.9 → 2.1.3

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

@@ -1,18 +1,19 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_d2743070_lang.css"; import { defineComponent as $, openBlock as n, createElementBlock as o, normalizeClass as y, unref as t, createElementVNode as d, createBlock as k, createCommentVNode as l, renderSlot as m, createVNode as r, withCtx as b, createTextVNode as g, toDisplayString as h, withModifiers as T } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_cae6bfd4_lang.css"; import { defineComponent as B, openBlock as o, createBlock as r, unref as i, withCtx as m, createElementVNode as a, normalizeClass as b, createCommentVNode as l, createElementBlock as s, renderSlot as u, createVNode as f, createTextVNode as g, toDisplayString as k, withModifiers as $ } from "vue";
 import "../../typography/Heading.vue.js";
-import p from "../../typography/Text.vue.js";
-import x from "../../checkbox/v4/CheckboxV4.vue.js";
-import v from "../../icon/v4/IconV4.vue.js";
-import { NOOP as z } from "@vue/shared";
-import { optionCommon as N } from "../common/Option.common.js";
-import V from "../../typography/v4/Typography.vue.js";
-const w = {
+import I from "../../typography/Text.vue.js";
+import z from "../../checkbox/v4/CheckboxV4.vue.js";
+import h from "../../icon/v4/IconV4.vue.js";
+import { NOOP as N } from "@vue/shared";
+import { optionCommon as V } from "../common/Option.common.js";
+import w from "../../typography/v4/Typography.vue.js";
+import O from "../../tooltip/v4/TooltipV4.vue.js";
+const S = {
   key: 1,
   class: "image"
-}, O = ["src"], S = {
+}, j = ["src"], E = {
   key: 2,
   class: "start-icon"
-}, I = { class: "text-container" }, E = { key: 0 }, H = /* @__PURE__ */ $({
+}, M = { class: "text-container" }, P = { key: 0 }, R = /* @__PURE__ */ B({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -28,85 +29,94 @@ const w = {
     iconType: { default: "regular" }
   },
   setup(e) {
-    const K = e, { selected: s, isMulti: c, id: C, onClick: B, api: u } = N(K);
-    return (i, a) => (n(), o("div", {
-      ref: "el",
-      class: y(["item-container", {
-        "item-container--disabled": e.disabled,
-        "item-container--active": e.nameKey ? !1 : e.active,
-        "item-container--selected": t(s),
-        "item-container--multi": t(c)
-      }])
-    }, [
-      d("div", {
-        class: y(["item", {
-          "item--multi": t(c),
-          "item--with-icon": i.$slots["icon-start"] || i.$slots.image
-        }])
-      }, [
-        t(c) ? (n(), k(t(x), {
-          key: 0,
-          id: t(C).toString(),
-          tabindex: "-1",
-          class: "checkbox",
-          size: "sm",
-          "is-checked": t(s),
-          "is-indeterminate": e.isIndeterminate && !e.option,
-          onClick: a[0] || (a[0] = (f) => e.disabled ? t(z)() : t(B)(f))
-        }, null, 8, ["id", "is-checked", "is-indeterminate"])) : l("", !0),
-        i.$slots.image || e.imageKey ? (n(), o("div", w, [
-          m(i.$slots, "image", {}, () => [
-            e.imageKey ? (n(), o("img", {
+    const p = e, { selected: c, isMulti: d, id: v, onClick: x, api: y } = V(p), K = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : "", C = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
+    return (t, n) => (o(), r(i(O), {
+      text: K(e.option),
+      "test-id": C(e.option),
+      class: "tooltip-option"
+    }, {
+      default: m(() => [
+        a("div", {
+          ref: "el",
+          class: b(["item-container", {
+            "item-container--disabled": e.disabled,
+            "item-container--active": e.nameKey ? !1 : e.active,
+            "item-container--selected": i(c),
+            "item-container--multi": i(d)
+          }])
+        }, [
+          a("div", {
+            class: b(["item", {
+              "item--multi": i(d),
+              "item--with-icon": t.$slots["icon-start"] || t.$slots.image
+            }])
+          }, [
+            i(d) ? (o(), r(i(z), {
               key: 0,
-              src: e.option[e.imageKey]
-            }, null, 8, O)) : l("", !0)
-          ], !0)
-        ])) : l("", !0),
-        i.$slots["icon-start"] || e.iconKey ? (n(), o("div", S, [
-          m(i.$slots, "icon-start", {}, () => [
-            r(t(v), {
-              type: e.iconType,
-              name: e.option[e.iconKey],
-              size: e.iconType === "regular" ? "20px" : "16px"
-            }, null, 8, ["type", "name", "size"])
-          ], !0)
-        ])) : l("", !0),
-        d("div", I, [
-          r(t(V), { variant: "body2" }, {
-            default: b(() => [
-              m(i.$slots, "default", {}, () => [
-                g(h(e.option[e.nameKey]), 1)
+              id: i(v).toString(),
+              tabindex: "-1",
+              class: "checkbox",
+              size: "sm",
+              "is-checked": i(c),
+              "is-indeterminate": e.isIndeterminate && !e.option,
+              onClick: n[0] || (n[0] = (T) => e.disabled ? i(N)() : i(x)(T))
+            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : l("", !0),
+            t.$slots.image || e.imageKey ? (o(), s("div", S, [
+              u(t.$slots, "image", {}, () => [
+                e.imageKey ? (o(), s("img", {
+                  key: 0,
+                  src: e.option[e.imageKey]
+                }, null, 8, j)) : l("", !0)
               ], !0)
-            ]),
-            _: 3
-          }),
-          e.subtitle ? (n(), k(t(p), {
-            key: 0,
-            class: "subtitle",
-            size: "xs"
-          }, {
-            default: b(() => [
-              g(h(e.subtitle), 1)
-            ]),
-            _: 1
-          })) : l("", !0)
-        ])
-      ], 2),
-      t(u).clearable && t(s) ? (n(), o("div", E, [
-        d("button", {
-          class: "clear-button",
-          onClick: a[1] || (a[1] = T((f) => t(u).clearSelection(), ["prevent", "stop"]))
-        }, [
-          r(t(v), {
-            name: "close",
-            width: "8",
-            height: 8
-          })
-        ])
-      ])) : l("", !0)
-    ], 2));
+            ])) : l("", !0),
+            t.$slots["icon-start"] || e.iconKey ? (o(), s("div", E, [
+              u(t.$slots, "icon-start", {}, () => [
+                f(i(h), {
+                  type: e.iconType,
+                  name: e.option[e.iconKey],
+                  size: e.iconType === "regular" ? "20px" : "16px"
+                }, null, 8, ["type", "name", "size"])
+              ], !0)
+            ])) : l("", !0),
+            a("div", M, [
+              f(i(w), { variant: "body2" }, {
+                default: m(() => [
+                  u(t.$slots, "default", {}, () => [
+                    g(k(e.option[e.nameKey]), 1)
+                  ], !0)
+                ]),
+                _: 3
+              }),
+              e.subtitle ? (o(), r(i(I), {
+                key: 0,
+                class: "subtitle",
+                size: "xs"
+              }, {
+                default: m(() => [
+                  g(k(e.subtitle), 1)
+                ]),
+                _: 1
+              })) : l("", !0)
+            ])
+          ], 2),
+          i(y).clearable && i(c) ? (o(), s("div", P, [
+            a("button", {
+              class: "clear-button",
+              onClick: n[1] || (n[1] = $((T) => i(y).clearSelection(), ["prevent", "stop"]))
+            }, [
+              f(i(h), {
+                name: "close",
+                width: "8",
+                height: 8
+              })
+            ])
+          ])) : l("", !0)
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["text", "test-id"]));
   }
 });
 export {
-  H as default
+  R as default
 };

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

@@ -234,6 +234,15 @@ export declare const dropDownStoryArgs: {
             category: string;
         };
     };
+    disabledOptionKey: {
+        control: {
+            type: string;
+        };
+        description: string;
+        table: {
+            category: string;
+        };
+    };
     theme: {
         control: {
             type: string;