@ironsource/shared-ui 2.1.10 → 2.1.11-rc.0

package/DropdownV4.vue_vue_type_style_index_0_scoped_991a7aad_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-991a7aad],.v-leave-active[data-v-991a7aad]{transition:opacity .25s ease}ol[data-v-991a7aad],ul[data-v-991a7aad],menu[data-v-991a7aad]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-991a7aad],.dropdown.full-width .button__container[data-v-991a7aad]{width:100%}.dropdown-list-wrapper[data-v-991a7aad]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-991a7aad]{padding:.5rem}.list-container--multi[data-v-991a7aad]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-991a7aad]{padding-bottom:.25rem}.inline-search .list-container[data-v-991a7aad]{padding-top:0}.no-result-container[data-v-991a7aad]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-991a7aad]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-991a7aad]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-991a7aad]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-991a7aad]{margin-right:.5rem}.actions-wrapper[data-v-991a7aad]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-991a7aad]{margin-left:.5rem}

package/OptionV4.vue_vue_type_style_index_0_scoped_4070942a_lang.css

@@ -0,0 +1 @@
+.label[data-v-4070942a]{color:#41454d}.item-container[data-v-4070942a]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-4070942a]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-4070942a]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-4070942a],.item-container[data-v-4070942a]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-4070942a]{background-color:var(--action-selected)}.subtitle[data-v-4070942a]{color:#7b838c;line-height:1rem}.clear-button[data-v-4070942a]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-4070942a]:hover{color:#3083ff}.item[data-v-4070942a]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-4070942a],.item--multi[data-v-4070942a]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-4070942a]{width:20px;height:20px;flex:none}.item .image img[data-v-4070942a]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-4070942a]{width:16px;height:16px}.item .flag img[data-v-4070942a]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-4070942a],.item .end-icon[data-v-4070942a]{display:flex;color:var(--action-active)}.item .option-text[data-v-4070942a]{line-height:1.1875rem}.text-container[data-v-4070942a]{width:100%;text-overflow:ellipsis;overflow:hidden}.tooltip-option[data-v-4070942a]{display:block}.tooltip-option[data-v-4070942a] .container{width:100%}.app-trigger--icon[data-v-4070942a]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-4070942a]{transform:rotate(0)}.option-content-horizontal[data-v-4070942a]{display:flex;justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-4070942a]{display:flex;flex-direction:column}.option-text .main-text[data-v-4070942a]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .caption-text[data-v-4070942a]{color:var(--text-secondary)}.multiline-tooltip[data-v-4070942a]{display:flex;flex-direction:column}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_6ac5f602_lang.css

@@ -0,0 +1 @@
+.child-options[data-v-6ac5f602]{padding-left:1rem}

package/components/dropdown/common/Dropdown.common.js

@@ -1,23 +1,23 @@
-import { useToggle as Ve } from "../../../composables/useToggle.js";
-import { inject as _e, ref as i, computed as r, watch as b, useSlots as Ke, toRaw as P, nextTick as N, provide as Ge, onMounted as He } from "vue";
+import { useToggle as ke } from "../../../composables/useToggle.js";
+import { inject as Ve, ref as i, computed as r, watch as b, useSlots as _e, toRaw as P, nextTick as N, provide as Ge, onMounted as He } from "vue";
 import { isObjectInArray as ee } from "../../../utils/array.js";
 import { objectsEqual as Be } from "../../../utils/object.js";
 import { useClamp as Le, useVirtualList as Ue, onClickOutside as le } from "@vueuse/core";
-import { Mode as T, Type as K, DropdownContext as qe } from "./DropdownContext.js";
+import { Mode as T, Type as _, DropdownContext as qe } from "./DropdownContext.js";
 import { pxToRem as $e } from "../../../utils/style.js";
 import { useEditableContext as je } from "../../table-cells/common/EditableContext.js";
 import { useGroupedOptions as Xe } from "./useGroupedOptions.js";
-const ll = (l, m, A) => {
-  const te = _e("isTreeDropdown", !1), {
+const ll = (l, S, A) => {
+  const te = Ve("isTreeDropdown", !1), {
     sortOutGroups: G,
     flattenAndMarkGroupOptions: ae,
     isGroup: H,
-    selectAllWithGroups: ue,
-    isIndeterminateGrouped: ne,
+    selectAllWithGroups: ne,
+    isIndeterminateGrouped: ue,
     allSelectedGrouped: ie,
     areAllPreviousSelected: re
   } = Xe(l), oe = (e, t) => l.multi ? l.comparingKey ? e.findIndex(
-    (n) => n[l.comparingKey] === t[l.comparingKey]
+    (u) => u[l.comparingKey] === t[l.comparingKey]
   ) > -1 : ee(e, t) : l.comparingKey ? e[l.comparingKey] === t[l.comparingKey] : P(e) === t;
   let B;
   ((e) => {
@@ -25,21 +25,21 @@ const ll = (l, m, A) => {
   })(B || (B = {}));
   const a = i(
     l.selected
-  ), R = je(), u = r({
+  ), R = je(), n = r({
     get() {
       return R?.value?.value ?? a.value;
     },
     set(e) {
-      R.onChange?.(e), R.onClose?.(), m("update:selected", e);
+      R.onChange?.(e), R.onClose?.(), S("update:selected", e);
     }
   });
   b(
     () => l.selected,
     () => {
-      a.value = l.selected, c.value = l.selected;
+      a.value = l.selected, s.value = l.selected;
     }
   );
-  const se = Ke(), w = i(null), y = i(null), L = i(null), E = i(null), U = i(null), I = i(null), ce = i(), q = i(null), $ = i(null), j = i(null), ve = 8, de = r(() => I.value ? I.value.getBoundingClientRect().height + ve + l.distance : 0), X = i(!1), d = i([]), x = i(-1), h = i(""), c = i(l.selected || []), z = () => I.value?.focus(), [f, fe, ge] = Ve({
+  const ce = _e(), w = i(null), h = i(null), L = i(null), E = i(null), U = i(null), I = i(null), se = i(), q = i(null), $ = i(null), j = i(null), ve = 8, de = r(() => I.value ? I.value.getBoundingClientRect().height + ve + l.distance : 0), X = i(!1), f = i([]), x = i(-1), O = i(""), s = i(l.selected || []), z = () => I.value?.focus(), [g, fe, ge] = ke({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
@@ -56,52 +56,52 @@ const ll = (l, m, A) => {
       return l.isOpen;
     },
     set(e) {
-      m("update:isOpen", e);
+      S("update:isOpen", e);
     }
-  }), he = r(() => o.value.length - 1), v = Le(0, 0, he), J = r(() => u.value ? l.displayValue(u.value) : ""), Oe = (e) => {
+  }), he = r(() => o.value.length - 1), d = Le(0, 0, he), J = r(() => n.value ? l.displayValue(n.value) : ""), Oe = (e) => {
     if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
       return l.placeholder;
     const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
     return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
-  }, Se = r(() => {
+  }, me = r(() => {
     if (!l.multi)
-      return u.value ? l.displayValue(u.value) : l.placeholder;
+      return n.value ? l.displayValue(n.value) : l.placeholder;
     if (Array.isArray(a.value))
       return Oe(a);
-  }), M = r(() => {
+  }), K = r(() => {
     if (Array.isArray(a.value))
       return l.groupedOptions ? ie(o, a) : a.value.length === o.value.length;
-  }), me = r(() => !l.multi || !Array.isArray(a.value) ? !1 : l.groupedOptions ? ne(
+  }), Se = r(() => !l.multi || !Array.isArray(a.value) ? !1 : l.groupedOptions ? ue(
     o,
     a
-  ) : a.value.length > 0 && a.value.length < o.value.length), k = (e) => {
-    h.value = e;
+  ) : a.value.length > 0 && a.value.length < o.value.length), M = (e) => {
+    O.value = e;
   }, D = r(() => l.groupedOptions ? ae(l.options) : l.options), Ae = r(() => {
     if (re(
       D,
-      c
+      s
     ))
       return D.value;
     const e = {
       selected: [],
       notSelected: []
     };
-    P(D).value.forEach((n) => {
-      const g = (l.comparingKey ? c.value.findIndex(
-        (_) => _[l.comparingKey] === n[l.comparingKey]
-      ) > -1 : c.value.includes(n)) ? "selected" : "notSelected";
-      e[g].push(n);
+    P(D).value.forEach((u) => {
+      const v = (l.comparingKey ? s.value.findIndex(
+        (V) => V[l.comparingKey] === u[l.comparingKey]
+      ) > -1 : s.value.includes(u)) ? "selected" : "notSelected";
+      e[v].push(u);
     });
     const t = l.groupedOptions ? G(e.notSelected) : e.notSelected;
     return [].concat(e.selected, t);
   }), o = r(() => {
-    const e = Array.isArray(c.value) && l.multi && A.VERSION === 4 && !te ? Ae.value : D.value;
+    const e = Array.isArray(s.value) && l.multi && A.VERSION === 4 && !te ? Ae.value : D.value;
     if (l.onSearch) {
-      const t = e.filter((n) => l.groupedOptions && H(n) ? n : l.onSearch(n, h.value));
+      const t = e.filter((u) => l.groupedOptions && H(u) ? u : l.onSearch(u, O.value));
       return l.groupedOptions ? G(t) : t;
     } else
       return e;
-  }), be = r(() => d.value[0]?.hasSubtitle), Q = r(() => s.mode === T.Multi), Y = r(
+  }), be = r(() => f.value[0]?.hasSubtitle), Q = r(() => c.mode === T.Multi), Y = r(
     () => be.value ? A.MULTILINE_LIST_HEIGHT : A.LIST_HEIGHT
   ), {
     list: Z,
@@ -120,37 +120,37 @@ const ll = (l, m, A) => {
   ), b([x], async () => {
     await N();
   }), b(
-    [f, v, x],
+    [g, d, x],
     async ([e], [t]) => {
-      f.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
+      g.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
         l.multi && A.VERSION === 4 || C(x.value);
-      }), v.value && setTimeout(() => {
-        C(v.value);
+      }), d.value && setTimeout(() => {
+        C(d.value);
       }));
     }
-  ), b(h, () => {
-    m("onsearch", h.value), C(0);
+  ), b(O, () => {
+    S("onsearch", O.value), C(0);
   });
-  const O = (e, t = !1) => {
+  const m = (e, t = !1) => {
     l.disabled || (W(e), N(() => {
-      f.value && m("opened"), f.value || m("closed"), w.value && t && w.value.focus();
+      g.value && S("opened"), g.value || S("closed"), w.value && t && w.value.focus();
     }));
   };
-  b(f, (e) => {
+  b(g, (e) => {
     if (e) {
-      h.value = "", Q.value && Array.isArray(u.value) && (c.value = P(u.value).slice());
+      O.value = "", Q.value && Array.isArray(n.value) && (s.value = P(n.value).slice());
       return;
     }
     z();
   });
   const Te = () => {
-    if (M.value) {
+    if (K.value) {
       a.value = [];
       return;
     }
     if (Array.isArray(a.value)) {
       if (l.groupedOptions)
-        ue(o, a);
+        ne(o, a);
       else {
         if (a.value.length === o.value.length) {
           a.value = [];
@@ -158,90 +158,92 @@ const ll = (l, m, A) => {
         }
         a.value = o.value;
       }
-      m("selectAll");
+      S("selectAll");
     }
   }, we = () => {
-    Te(), A.VERSION !== 4 && (u.value = a.value);
+    Te(), A.VERSION !== 4 && (n.value = a.value);
   }, Ie = (e = !0) => {
-    a.value = [], e && (u.value = [], c.value = []), m("clear");
-  }, V = (e, t) => {
-    if (e = P(e), d.value[t]?.disabled)
+    a.value = [], e && (n.value = [], s.value = []), S("clear");
+  }, k = (e, t) => {
+    if (e = P(e), f.value[t]?.disabled)
       return;
-    if (x.value = t, s.mode !== T.Multi) {
-      l.keepOpen || O(!1), s.goToOption(
+    if (x.value = t, c.mode !== T.Multi) {
+      l.keepOpen || m(!1), c.goToOption(
         0
         /* None */
-      ), u.value = e, k(""), z(), s.type === K.Search && y.value && (y.value.value = l.displayValue(e));
+      ), n.value = e, M(""), z(), c.type === _.Search && h.value && (h.value.value = l.displayValue(e));
       return;
     }
     if (!Array.isArray(a.value))
       return;
-    y.value?.focus();
-    const S = P(a.value);
-    if (ee(S, e)) {
-      a.value = S.filter(
-        (g) => !Be(g, e)
+    h.value?.focus();
+    const y = P(a.value);
+    if (ee(y, e) || l.comparingKey && y.findIndex(
+      (v) => v[l.comparingKey] === e[l.comparingKey]
+    ) > -1) {
+      a.value = y.filter(
+        (v) => !Be(v, e)
       );
       return;
     } else {
-      a.value = [...S, e];
+      a.value = [...y, e];
       return;
     }
-  }, xe = (e) => d.value[e]?.disabled, s = {
-    activeIndex: v,
-    options: d,
-    selectedOption: u,
+  }, xe = (e) => f.value[e]?.disabled, c = {
+    activeIndex: d,
+    options: f,
+    selectedOption: n,
     labelRef: U,
     activeOption: E,
     listRef: w,
     clearable: l.clearable,
-    type: se.input ? K.Search : K.Dropdown,
+    type: ce.input ? _.Search : _.Dropdown,
     mode: l.multi ? T.Multi : T.Single,
-    query: h,
+    query: O,
     selectedValue: J,
-    toggle: O,
+    toggle: m,
     disabled: l.disabled,
-    open: f,
+    open: g,
     mandatory: l.mandatory,
     size: l.size,
     placeholder: l.placeholder,
-    select: V,
+    select: k,
     clearSelection: () => {
-      k(""), u.value = s.mode === T.Single ? null : [], c.value = s.mode === T.Single ? null : [], y.value && (y.value.value = "");
+      M(""), n.value = c.mode === T.Single ? null : [], s.value = c.mode === T.Single ? null : [], h.value && (h.value.value = "");
     },
-    search: k,
+    search: M,
     goToOption: async (e) => {
-      if (!f.value)
+      if (!g.value)
         return;
-      let t = v.value + e;
-      const n = d.value.filter(
-        (g) => g.disabled
-      ).length, S = o.value.length - n;
-      for (t > S && (t = S + 1); ; ) {
-        if (!d.value[t]?.disabled) {
-          E.value = o.value[t], v.value = t;
+      let t = d.value + e;
+      const u = f.value.filter(
+        (v) => v.disabled
+      ).length, y = o.value.length - u;
+      for (t > y && (t = y + 1); ; ) {
+        if (!f.value[t]?.disabled) {
+          E.value = o.value[t], d.value = t;
           return;
         }
-        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!xe(v.value)) {
-          E.value = o.value[t], v.value = t;
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!xe(d.value)) {
+          E.value = o.value[t], d.value = t;
           return;
         }
       }
     },
     registerInput: (e) => {
-      y.value = e.value;
+      h.value = e.value;
     },
-    registerOption: (e, t, n) => {
-      d.value = [...d.value, { id: e, disabled: t, hasSubtitle: n }];
+    registerOption: (e, t, u) => {
+      f.value = [...f.value, { id: e, disabled: t, hasSubtitle: u }];
     },
     unRegisterOption(e) {
-      d.value = d.value.filter((t) => t.id !== e);
+      f.value = f.value.filter((t) => t.id !== e);
     }
   };
-  Ge(qe, s), le(
+  Ge(qe, c), le(
     w,
     () => {
-      f.value && p();
+      g.value && p();
     },
     {
       ignore: [
@@ -249,23 +251,23 @@ const ll = (l, m, A) => {
         q,
         $,
         j,
-        y,
+        h,
         F.ref
       ]
     }
   );
   const De = () => {
-    y.value && (y.value.value = s.query.value = "");
+    h.value && (h.value.value = c.query.value = "");
   };
   He(async () => {
     l.autoFocus && (await N(), setTimeout(() => {
       L.value.focus();
-    })), s.goToOption(0);
+    })), c.goToOption(0);
   });
   const Ce = () => {
-    X.value = M.value, u.value = a.value, Array.isArray(u.value) && (c.value = P(u.value).slice()), m("apply", u.value), O(!1), De();
+    X.value = K.value, n.value = a.value, Array.isArray(n.value) && (s.value = P(n.value).slice()), S("apply", n.value), m(!1), De();
   }, p = () => {
-    Q.value && Array.isArray(c.value) && (u.value = P(c.value).slice()), h.value = "", O(!1);
+    Q.value && Array.isArray(s.value) && (n.value = P(s.value).slice()), O.value = "", m(!1);
   }, Ne = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
@@ -273,88 +275,88 @@ const ll = (l, m, A) => {
         case "Enter":
         case "ArrowUp":
         case "ArrowDown":
-          O(!0), e.preventDefault();
+          m(!0), e.preventDefault();
       }
   }, Re = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
         case "ArrowUp": {
-          s.goToOption(
+          c.goToOption(
             -1
             /* Previous */
           ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "ArrowDown": {
-          s.goToOption(
+          c.goToOption(
             1
             /* Next */
           ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "Escape": {
-          O(!1), e.preventDefault();
+          m(!1), e.preventDefault();
           break;
         }
         case "PageUp": {
-          s.goToOption(
+          c.goToOption(
             10
             /* NextPage */
           ), e.preventDefault();
           break;
         }
         case "PageDown": {
-          s.goToOption(
+          c.goToOption(
             -10
             /* PrevPage */
           ), e.preventDefault();
           break;
         }
         case "Enter": {
-          if (!f.value) {
-            O(!0);
+          if (!g.value) {
+            m(!0);
             return;
           }
-          V(o.value[v.value], v.value), s.mode === T.Single && !l.keepOpen && O(!1), e.preventDefault();
+          k(o.value[d.value], d.value), c.mode === T.Single && !l.keepOpen && m(!1), e.preventDefault();
           break;
         }
       }
   }, Ee = r(() => {
     if (l.loading)
       return 8.5;
-    const e = Z.value.reduce((_, Me) => {
-      const ke = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Me.data) : 1;
-      return _ + ke;
-    }, 0), t = l.multi && l.showSelectAll && !h.value ? 1 : 0, n = e > A.MAX_NUMBER_OF_OPTIONS, S = e + t;
-    let g = n ? A.MAX_NUMBER_OF_OPTIONS + 0.1 : S;
-    return l.noResultsText && g === 0 && (g = g + 1), $e(
-      g * Y.value + A.PADDING_PX
+    const e = l.customNumberOfDisplayedOptions || Z.value.reduce((V, Ke) => {
+      const Me = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Ke.data) : 1;
+      return V + Me;
+    }, 0), t = l.multi && l.showSelectAll && !O.value ? 1 : 0, u = e > A.MAX_NUMBER_OF_OPTIONS, y = e + t;
+    let v = u ? A.MAX_NUMBER_OF_OPTIONS + 0.1 : y;
+    return l.noResultsText && v === 0 && (v = v + 1), $e(
+      v * Y.value + A.PADDING_PX
     );
   });
   return {
     onKeydown: Re,
     location: de,
-    open: f,
-    toggleMenu: O,
+    open: g,
+    toggleMenu: m,
     onButtonKeydown: Ne,
-    displayedValue: Se,
+    displayedValue: me,
     labelRef: U,
-    query: h,
+    query: O,
     containerProps: F,
     calculateTableHeight: Ee,
     wrapperProps: Pe,
     filteredOptions: o,
-    allSelected: M,
+    allSelected: K,
     allSelectedApplied: X,
-    isIndeterminate: me,
+    isIndeterminate: Se,
     onSelectAll: we,
     virtualOptions: Z,
     isSelected: oe,
-    selectedOption: u,
-    selectedOptionPrevious: c,
+    selectedOption: n,
+    selectedOptionPrevious: s,
     selectedValue: J,
-    onSelect: V,
-    activeIndex: v,
+    onSelect: k,
+    activeIndex: d,
     onCancel: p,
     onApply: Ce,
     scrollTo: C,
@@ -364,7 +366,7 @@ const ll = (l, m, A) => {
     apply: q,
     cancel: $,
     el: L,
-    triggerRef: ce,
+    triggerRef: se,
     clearAll: j,
     onClearAllSelections: Ie,
     isGroup: H

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

@@ -50,6 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionTwoLinesKey?: string;
     groupedOptions?: boolean;
     comparingKey?: string;
+    customNumberOfDisplayedOptions?: number;
     theme?: string;
     fullWidth?: boolean;
     optionsListWidth?: string;
@@ -105,6 +106,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionTwoLinesKey: any;
     groupedOptions: boolean;
     comparingKey: any;
+    customNumberOfDisplayedOptions: any;
     fullWidth: boolean;
     optionsListWidth: any;
     statusType: any;
@@ -174,6 +176,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionTwoLinesKey?: string;
     groupedOptions?: boolean;
     comparingKey?: string;
+    customNumberOfDisplayedOptions?: number;
     theme?: string;
     fullWidth?: boolean;
     optionsListWidth?: string;
@@ -229,6 +232,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionTwoLinesKey: any;
     groupedOptions: boolean;
     comparingKey: any;
+    customNumberOfDisplayedOptions: any;
     fullWidth: boolean;
     optionsListWidth: any;
     statusType: any;
@@ -292,6 +296,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionTwoLinesKey: string;
     groupedOptions: boolean;
     comparingKey: string;
+    customNumberOfDisplayedOptions: number;
     fullWidth: boolean;
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";

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

@@ -1,8 +1,8 @@
 import o from "./DropdownV4.vue2.js";
 /* empty css                 *//* empty css                 */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2d635802_lang.css"; //*');
+// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_991a7aad_lang.css"; //*');
 // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2d635802"]]);
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-991a7aad"]]);
 export {
-  r as default
+  a as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2d635802_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ye, computed as U, openBlock as n, createElementBlock as a, mergeProps as s, unref as t, renderSlot as k, createElementVNode as m, createVNode as i, withCtx as c, Transition as fe, normalizeClass as L, normalizeStyle as me, isRef as pe, createCommentVNode as r, createTextVNode as b, toDisplayString as W, withModifiers as M, Fragment as ge, renderList as Te, toRaw as w, createBlock as X, resolveDynamicComponent as ke } from "vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_991a7aad_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ye, computed as U, openBlock as n, createElementBlock as a, mergeProps as s, unref as t, renderSlot as k, createElementVNode as m, createVNode as i, withCtx as c, Transition as fe, normalizeClass as L, normalizeStyle as me, isRef as pe, createCommentVNode as r, createTextVNode as b, toDisplayString as W, withModifiers as M, Fragment as ge, renderList as Te, toRaw as w, createBlock as X, resolveDynamicComponent as ke } from "vue";
 import E from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
@@ -23,7 +23,7 @@ import { TRIGGERS as p } from "./Dropdown.types.js";
 import { useElementSize as Oe } from "@vueuse/core";
 import Le from "../../shared/FieldHelpText.vue.js";
 import Ee from "./GroupOption.vue.js";
-const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve = { key: 1 }, De = { key: 2 }, Pe = {
+const Fe = ["tabindex"], Ne = { style: { width: "100%" } }, Be = { key: 0 }, Ve = { key: 1 }, De = { key: 2 }, Pe = {
   key: 0,
   class: "inline-search-wrapper"
 }, Re = {
@@ -88,6 +88,7 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
     optionTwoLinesKey: { default: void 0 },
     groupedOptions: { type: Boolean, default: !1 },
     comparingKey: { default: null },
+    customNumberOfDisplayedOptions: { default: null },
     theme: { default: "light-theme-v4" },
     fullWidth: { type: Boolean, default: !0 },
     optionsListWidth: { default: null },
@@ -97,7 +98,7 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear", "copyToClipboard", "onsearch"],
   setup(e, { expose: Y, emit: F }) {
-    const d = e, B = {
+    const d = e, N = {
       MULTILINE_LIST_HEIGHT: 48,
       LIST_HEIGHT: 32 + 4,
       MAX_NUMBER_OF_OPTIONS: 7.5,
@@ -108,7 +109,7 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       onKeydown: h,
       open: u,
       toggleMenu: v,
-      onButtonKeydown: N,
+      onButtonKeydown: B,
       query: C,
       containerProps: j,
       calculateTableHeight: J,
@@ -136,7 +137,7 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       onClearAllSelections: x,
       clearAll: ue,
       isGroup: se
-    } = Ke(d, F, B), f = Ae(d.testId, y), $ = U(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? be : d.predefinedTrigger === p.APP ? we : null), { width: H } = Oe(z), ce = U(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? H.value - 2 > 240 ? `${H.value - 2}px` : `${B.DROPLIST_MIN_WIDTH}px` : "auto"), G = () => {
+    } = Ke(d, F, N), f = Ae(d.testId, y), $ = U(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? be : d.predefinedTrigger === p.APP ? we : null), { width: H } = Oe(z), ce = U(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? H.value - 2 > 240 ? `${H.value - 2}px` : `${N.DROPLIST_MIN_WIDTH}px` : "auto"), G = () => {
       v();
     };
     return Y({
@@ -152,7 +153,7 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
       (...l) => t(h) && t(h)(...l))
     }), [
       k(T.$slots, "label", {}, void 0, !0),
-      m("div", Be, [
+      m("div", Ne, [
         i(t(Se), s({
           theme: e.theme,
           "popper-class": [
@@ -395,11 +396,11 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                     size: e.size,
                     showAllSelectedText: e.triggerShowAllSelectedText,
                     allSelected: t(K),
-                    onKeydown: t(N),
+                    onKeydown: t(B),
                     onClick: G
                   }
                 }, () => [
-                  t($) ? (n(), a("div", Ne, [
+                  t($) ? (n(), a("div", Be, [
                     (n(), X(ke(t($)), {
                       placeholder: e.placeholder,
                       open: t(u),
@@ -425,7 +426,7 @@ const Fe = ["tabindex"], Be = { style: { width: "100%" } }, Ne = { key: 0 }, Ve
                       size: e.size,
                       "show-all-selected-text": e.triggerShowAllSelectedText,
                       "all-selected": t(K),
-                      onKeydown: t(N),
+                      onKeydown: t(B),
                       onClick: G,
                       onCopyToClipboard: o[0] || (o[0] = (l) => F("copyToClipboard"))
                     }, null, 40, ["placeholder", "open", "label", "show-feedback-icon", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "option-end-icon-key", "option-end-icon-type", "option-flag-key", "feedback-variant", "value-to-copy", "status-dot-type", "size", "show-all-selected-text", "all-selected", "onKeydown"]))

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

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
-/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_058de532_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-058de532"]]);
+/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_4070942a_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-4070942a"]]);
 export {
   s as default
 };