@ironsource/shared-ui 2.0.0-rc.4 → 2.0.0-rc.6

package/components/dropdown/v3/Dropdown.vue.d.ts

@@ -175,21 +175,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placement: Placement;
     disabled: boolean;
     container: string;
+    popperClass: string;
     selected: any;
+    distance: number;
+    mandatory: boolean;
     modelValue: any;
     placeholder: string;
-    mandatory: boolean;
+    autoFocus: boolean;
     helperText: string;
     searchPlaceholder: string;
     isOnTop: boolean;
     multi: boolean;
     inlineSearch: boolean;
-    popperClass: string;
     noResultsText: string;
     defaultOpen: boolean;
     showButtonOnOpen: boolean;
-    autoFocus: boolean;
-    distance: number;
     skidding: number;
     clearable: boolean;
     onSearch: (option: any, term: string) => boolean;

package/components/dropdown/v3/Dropdown.vue.js

@@ -1,8 +1,8 @@
 import o from "./Dropdown.vue2.js";
-/* empty css               *//* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_0f9d5331_lang.css"; //*');
+/* empty css               *//* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_0114904e_lang.css"; //*');
 // import "../../../Dropdown.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-0f9d5331"]]);
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-0114904e"]]);
 export {
   r as default
 };

package/components/dropdown/v3/Dropdown.vue2.js

@@ -1,34 +1,33 @@
- import "../../../Dropdown.vue_vue_type_style_index_0_scoped_0f9d5331_lang.css";  import "../../../Dropdown.vue_vue_type_style_index_1_lang.css";  import { defineComponent as J, openBlock as d, createElementBlock as o, normalizeClass as $, unref as e, renderSlot as b, createVNode as s, withCtx as n, Transition as Q, createElementVNode as f, createTextVNode as r, toDisplayString as h, createCommentVNode as i, createBlock as g, isRef as Z, mergeProps as E, withModifiers as x, Fragment as _, renderList as ee, toRaw as T, pushScopeId as te, popScopeId as le } from "vue";
-import P from "../../button/v3/Button.vue.js";
+ import "../../../Dropdown.vue_vue_type_style_index_0_scoped_0114904e_lang.css";  import "../../../Dropdown.vue_vue_type_style_index_1_lang.css";  import { defineComponent as le, openBlock as a, createElementBlock as i, normalizeClass as T, unref as e, renderSlot as b, createVNode as s, withCtx as n, Transition as ae, createTextVNode as r, toDisplayString as h, createCommentVNode as o, createBlock as I, isRef as de, createElementVNode as m, mergeProps as P, withModifiers as N, Fragment as oe, renderList as ie, toRaw as $, pushScopeId as ne, popScopeId as se } from "vue";
+import x from "../../button/v3/Button.vue.js";
 import "../../button/v3/IconButton.vue.js";
 import "../../button/v3/ScrollButton.vue.js";
-import ae from "../common/Option.vue.js";
-import A from "../../icon/Icon.vue.js";
-import de from "../../search/v4/SearchV4.vue.js";
+import re from "../common/Option.vue.js";
+import A from "../../icon/v3/Icon.vue.js";
+import ue from "../../search/v4/SearchV4.vue.js";
 import "../../typography/Heading.vue.js";
 import y from "../../typography/Text.vue.js";
-import { Dropdown as ie } from "floating-vue";
+import { Dropdown as fe } from "floating-vue";
 import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
-import { dropdownCommon as oe } from "../common/Dropdown.common.js";
-const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "data-testid"], re = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], ue = {
+import { dropdownCommon as ce } from "../common/Dropdown.common.js";
+const me = (t) => (ne("data-v-0114904e"), t = t(), se(), t), ye = ["tabindex", "data-testid"], pe = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], be = {
   key: 0,
   class: "image-slot"
-}, ce = { class: "angle-down" }, fe = {
+}, he = { class: "angle-down" }, ke = {
   key: 0,
-  ref: "listRef",
   class: "dropdown-title"
-}, me = ["data-testid"], ye = ["data-testid"], pe = {
+}, ve = ["data-testid"], we = ["data-testid"], Te = {
   key: 0,
   class: "no-result-container"
-}, be = {
+}, Ie = {
   key: 1,
   class: "loader"
-}, he = /* @__PURE__ */ ne(() => /* @__PURE__ */ f("svg", {
+}, $e = /* @__PURE__ */ me(() => /* @__PURE__ */ m("svg", {
   width: "100",
   height: "100",
   viewBox: "0 0 100 100"
 }, [
-  /* @__PURE__ */ f("circle", {
+  /* @__PURE__ */ m("circle", {
     cx: "50",
     cy: "50",
     fill: "none",
@@ -37,7 +36,7 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
     r: "35",
     "stroke-dasharray": "164.93361431346415 56.97787143782138"
   }, [
-    /* @__PURE__ */ f("animateTransform", {
+    /* @__PURE__ */ m("animateTransform", {
       attributeName: "transform",
       type: "rotate",
       repeatCount: "indefinite",
@@ -46,10 +45,10 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
       keyTimes: "0;1"
     })
   ])
-], -1)), ke = { key: 2 }, we = ["aria-selected", "aria-disabled", "onClick"], ve = {
+], -1)), ge = { key: 2 }, Ce = ["aria-selected", "aria-disabled", "onClick"], Se = {
   key: 0,
   class: "actions"
-}, Pe = /* @__PURE__ */ J({
+}, He = /* @__PURE__ */ le({
   __name: "Dropdown",
   props: {
     modelValue: { default: null },
@@ -80,7 +79,7 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
     displayValue: null,
     options: null,
     onSearch: { type: Function, default: () => !0 },
-    theme: { default: "is-dropdown" },
+    theme: { default: "is-dropdown-v3" },
     container: { default: "body" },
     flip: { type: Boolean, default: !0 },
     keepOpen: { type: Boolean, default: !1 },
@@ -93,45 +92,56 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
     valueToCopy: { default: "" }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
-  setup(t, { expose: N, emit: V }) {
-    const K = t, {
+  setup(t, { expose: L, emit: V }) {
+    const K = t, H = {
+      MULTILINE_LIST_HEIGHT: 48,
+      LIST_HEIGHT: 34,
+      MAX_NUMBER_OF_OPTIONS: 7,
+      PADDING_PX: 8
+    }, {
       onKeydown: p,
-      location: L,
-      open: m,
-      toggleMenu: C,
+      location: D,
+      open: f,
+      toggleMenu: g,
       onButtonKeydown: k,
-      displayedValue: B,
-      labelRef: D,
-      query: w,
-      containerProps: H,
+      displayedValue: C,
+      labelRef: M,
+      query: v,
+      containerProps: G,
       calculateTableHeight: F,
-      wrapperProps: M,
-      filteredOptions: G,
-      allSelected: I,
-      isIndeterminate: X,
-      onSelectAll: q,
-      virtualOptions: S,
-      isSelected: z,
-      selectedOption: O,
-      onSelect: R,
-      activeIndex: U,
-      onCancel: W,
-      onApply: Y,
-      scrollTo: j
-    } = oe(K, V);
-    return N({
-      selectItem: R,
-      scrollTo: j
-    }), (c, a) => (d(), o("div", {
-      ref: "el",
-      class: $(["dropdown", { "dropdown--disabled": t.disabled }]),
+      wrapperProps: X,
+      filteredOptions: U,
+      allSelected: S,
+      isIndeterminate: q,
+      onSelectAll: W,
+      virtualOptions: B,
+      isSelected: O,
+      selectedOption: R,
+      onSelect: E,
+      activeIndex: Y,
+      onCancel: j,
+      onApply: J,
+      scrollTo: Q,
+      listRef: Z,
+      apply: _,
+      cancel: ee,
+      el: te,
+      buttonRef: z
+    } = ce(K, V, H);
+    return L({
+      selectItem: E,
+      scrollTo: Q
+    }), (c, d) => (a(), i("div", {
+      ref_key: "el",
+      ref: te,
+      class: T(["dropdown", { "dropdown--disabled": t.disabled }]),
       tabindex: t.disabled ? -1 : 0,
       "data-testid": `${t.testId}-${e(u).WRAPPER}`,
-      onKeydown: a[7] || (a[7] = //@ts-ignore
+      onKeydown: d[7] || (d[7] = //@ts-ignore
       (...l) => e(p) && e(p)(...l))
     }, [
       b(c.$slots, "label", {}, void 0, !0),
-      s(e(ie), {
+      s(e(fe), {
         theme: t.theme,
         "popper-class": [
           t.popperClass,
@@ -139,21 +149,26 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
         ],
         placement: t.placement,
         skidding: t.isOnTop ? 0 : t.skidding,
-        distance: t.isOnTop ? -e(L) : t.distance,
+        distance: t.isOnTop ? -e(D) : t.distance,
         flip: t.flip,
         triggers: [],
-        shown: !!e(m),
+        shown: !!e(f),
         "auto-hide": !1,
         container: t.container,
         "auto-size": t.autoSize,
         "data-testid": `${t.testId}-${e(u).TRIGGER}`
       }, {
         popper: n(() => [
-          s(Q, null, {
+          s(ae, null, {
             default: n(() => [
-              t.inlineSearch || t.title ? (d(), o("div", fe, [
-                f("div", null, [
-                  t.title ? (d(), o("div", {
+              e(f) ? (a(), i("div", {
+                key: 0,
+                ref_key: "listRef",
+                ref: Z,
+                class: "light-theme-v3"
+              }, [
+                t.inlineSearch || t.title ? (a(), i("div", ke, [
+                  t.title ? (a(), i("div", {
                     key: 0,
                     class: "dropdown-title__text",
                     "data-testid": `${t.testId}-${e(u).TITLE}`
@@ -164,36 +179,36 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
                       ]),
                       _: 1
                     })
-                  ], 8, me)) : i("", !0),
-                  t.inlineSearch ? (d(), g(e(de), {
+                  ], 8, ve)) : o("", !0),
+                  t.inlineSearch ? (a(), I(e(ue), {
                     key: 1,
-                    modelValue: e(w),
-                    "onUpdate:modelValue": a[4] || (a[4] = (l) => Z(w) ? w.value = l : null),
+                    modelValue: e(v),
+                    "onUpdate:modelValue": d[4] || (d[4] = (l) => de(v) ? v.value = l : null),
                     placeholder: t.searchPlaceholder,
                     class: "dropdown-title__search",
                     variant: "transparent",
                     size: "md",
                     "test-id": `${t.testId}-${e(u).SEARCH}`,
                     onKeydown: e(p)
-                  }, null, 8, ["modelValue", "placeholder", "test-id", "onKeydown"])) : i("", !0)
-                ]),
-                e(m) ? (d(), o("div", {
-                  key: 0,
+                  }, null, 8, ["modelValue", "placeholder", "test-id", "onKeydown"])) : o("", !0)
+                ])) : o("", !0),
+                e(f) ? (a(), i("div", {
+                  key: 1,
                   class: "dropdown",
-                  onKeydown: a[6] || (a[6] = //@ts-ignore
+                  onKeydown: d[6] || (d[6] = //@ts-ignore
                   (...l) => e(p) && e(p)(...l))
                 }, [
-                  b(c.$slots, "input-list", { open: e(m) }, void 0, !0),
-                  f("div", E(e(H), {
+                  b(c.$slots, "input-list", { open: e(f) }, void 0, !0),
+                  m("div", P(e(G), {
                     class: ["list-container", { "list-container--multi": t.multi }],
                     style: { height: `${e(F)}rem` },
                     "data-testid": `${t.testId}-${e(u).LIST_CONTAINER}`
                   }), [
-                    f("ul", E(e(M), {
+                    m("ul", P(e(X), {
                       role: "listbox",
                       class: ["list", { "list--multi": t.multi }]
                     }), [
-                      !e(G).length && !t.loading ? (d(), o("li", pe, [
+                      !e(U).length && !t.loading ? (a(), i("li", Te, [
                         s(e(y), {
                           size: "sm",
                           class: "no-result"
@@ -203,14 +218,14 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
                           ]),
                           _: 1
                         })
-                      ])) : i("", !0),
-                      t.loading ? (d(), o("li", be, [
+                      ])) : o("", !0),
+                      t.loading ? (a(), i("li", Ie, [
                         s(e(A), {
                           "font-size": "md",
                           class: "loader-icon"
                         }, {
                           default: n(() => [
-                            he
+                            $e
                           ]),
                           _: 1
                         }),
@@ -220,132 +235,136 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
                           ]),
                           _: 1
                         })
-                      ])) : i("", !0),
-                      t.showSelectAll ? (d(), o("li", ke, [
-                        s(ae, {
-                          "aria-selected": e(I),
+                      ])) : o("", !0),
+                      t.showSelectAll ? (a(), i("li", ge, [
+                        s(re, {
+                          "aria-selected": e(S),
                           "aria-disabled": !!t.disabled,
-                          "selected-prop": e(I),
-                          "is-indeterminate": e(X),
+                          "selected-prop": e(S),
+                          "is-indeterminate": e(q),
                           "select-all-option": "",
-                          onClick: a[5] || (a[5] = x((l) => e(q)(), ["stop"]))
+                          onClick: d[5] || (d[5] = N((l) => e(W)(), ["stop"]))
                         }, {
                           default: n(() => [
                             r("Select all ")
                           ]),
                           _: 1
                         }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
-                      ])) : i("", !0),
-                      e(S).length && !t.loading ? (d(!0), o(_, { key: 3 }, ee(e(S), ({ data: l, index: v }) => (d(), o("li", {
-                        key: v,
-                        "aria-selected": e(z)(T(e(O)), l),
+                      ])) : o("", !0),
+                      e(B).length && !t.loading ? (a(!0), i(oe, { key: 3 }, ie(e(B), ({ data: l, index: w }) => (a(), i("li", {
+                        key: w,
+                        "aria-selected": e(O)($(e(R)), l),
                         "aria-disabled": !!t.disabled,
-                        onClick: x(() => e(R)(l, v), ["stop"])
+                        onClick: N(() => e(E)(l, w), ["stop"])
                       }, [
                         b(c.$slots, "default", {
                           option: l,
-                          selected: e(z)(T(e(O)), l),
-                          active: T(e(U)) === v
+                          selected: e(O)($(e(R)), l),
+                          active: $(e(Y)) === w
                         }, void 0, !0)
-                      ], 8, we))), 128)) : i("", !0)
+                      ], 8, Ce))), 128)) : o("", !0)
                     ], 16)
-                  ], 16, ye),
-                  t.multi ? (d(), o("div", ve, [
-                    s(e(P), {
-                      ref: "cancel",
+                  ], 16, we),
+                  t.multi ? (a(), i("div", Se, [
+                    s(e(x), {
+                      ref_key: "cancel",
+                      ref: ee,
                       size: "sm",
                       variant: "border",
                       theme: "third",
                       "test-id": `${t.testId}-${e(u).ACTION_CANCEL}`,
-                      onClick: e(W)
+                      onClick: e(j)
                     }, {
                       default: n(() => [
                         r(" Cancel ")
                       ]),
                       _: 1
                     }, 8, ["test-id", "onClick"]),
-                    s(e(P), {
-                      ref: "apply",
+                    s(e(x), {
+                      ref_key: "apply",
+                      ref: _,
                       "data-testid": "mutli-apply",
                       size: "sm",
                       class: "apply-button",
                       "test-id": `${t.testId}-${e(u).ACTION_APPLY}`,
-                      onClick: e(Y)
+                      onClick: e(J)
                     }, {
                       default: n(() => [
                         r("Apply ")
                       ]),
                       _: 1
                     }, 8, ["test-id", "onClick"])
-                  ])) : i("", !0)
-                ], 32)) : i("", !0)
-              ], 512)) : i("", !0)
+                  ])) : o("", !0)
+                ], 32)) : o("", !0)
+              ], 512)) : o("", !0)
             ]),
             _: 3
           })
         ]),
         default: n(() => [
-          f("div", {
-            class: $(["button__container", {
-              "button__container--open": !!e(m),
+          m("div", {
+            class: T(["button__container", {
+              "button__container--open": !!e(f),
               [`button__container--${t.size}`]: !0,
               "button__container--disabled": t.disabled
             }])
           }, [
-            c.$slots.input ? (d(), o("div", {
+            c.$slots.input ? (a(), i("div", {
               key: 0,
-              ref: "buttonRef",
-              onClick: a[0] || (a[0] = (l) => e(C)()),
-              onKeydown: a[1] || (a[1] = //@ts-ignore
+              ref_key: "buttonRef",
+              ref: z,
+              onClick: d[0] || (d[0] = (l) => e(g)()),
+              onKeydown: d[1] || (d[1] = //@ts-ignore
               (...l) => e(k) && e(k)(...l))
             }, [
               b(c.$slots, "input", {
-                open: e(m),
-                value: e(B),
+                open: e(f),
+                value: e(C),
                 disabled: t.disabled
               }, void 0, !0)
-            ], 544)) : i("", !0),
-            c.$slots.input ? i("", !0) : (d(), o("button", {
+            ], 544)) : o("", !0),
+            c.$slots.input ? o("", !0) : (a(), i("button", {
               key: 1,
-              ref: "buttonRef",
+              ref_key: "buttonRef",
+              ref: z,
               disabled: t.disabled,
               "aria-haspopup": !0,
-              "aria-expanded": !!e(m),
-              "aria-labelledby": e(D)?.id,
+              "aria-expanded": !!e(f),
+              "aria-labelledby": e(M)?.id,
               "aria-disabled": t.disabled,
-              class: $([{
-                "button--open": !!e(m),
+              class: T([{
+                "button--open": !!e(f),
                 [`button--${t.size}`]: !0,
                 "button--disabled": t.disabled
               }, "button"]),
-              onKeydown: a[2] || (a[2] = //@ts-ignore
+              onKeydown: d[2] || (d[2] = //@ts-ignore
               (...l) => e(k) && e(k)(...l)),
-              onClick: a[3] || (a[3] = (l) => e(C)())
+              onClick: d[3] || (d[3] = (l) => e(g)())
             }, [
-              c.$slots.image ? (d(), o("div", ue, [
+              c.$slots.image ? (a(), i("div", be, [
                 b(c.$slots, "image", {}, void 0, !0)
-              ])) : i("", !0),
+              ])) : o("", !0),
               s(e(y), {
                 size: "sm",
                 "is-truncated": ""
               }, {
                 default: n(() => [
-                  r(h(e(B)), 1)
+                  r(h(e(C)), 1)
                 ]),
                 _: 1
               }),
-              f("div", ce, [
+              m("div", he, [
                 s(e(A), {
                   name: "angle-down",
                   "font-size": "sm"
                 })
               ])
-            ], 42, re))
+            ], 42, pe))
           ], 2)
         ]),
         _: 3
       }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
-      !t.error && t.helperText ? (d(), g(e(y), {
+      !t.error && t.helperText ? (a(), I(e(y), {
         key: 0,
         size: "caption",
         class: "helper-text",
@@ -355,8 +374,8 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
           r(h(t.helperText), 1)
         ]),
         _: 1
-      }, 8, ["test-id"])) : i("", !0),
-      t.error ? (d(), g(e(y), {
+      }, 8, ["test-id"])) : o("", !0),
+      t.error ? (a(), I(e(y), {
         key: 1,
         size: "caption",
         class: "helper-text helper-text--error",
@@ -366,10 +385,10 @@ const ne = (t) => (te("data-v-0f9d5331"), t = t(), le(), t), se = ["tabindex", "
           r(h(t.error), 1)
         ]),
         _: 1
-      }, 8, ["test-id"])) : i("", !0)
-    ], 42, se));
+      }, 8, ["test-id"])) : o("", !0)
+    ], 42, ye));
   }
 });
 export {
-  Pe as default
+  He as default
 };