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

package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_f9a13e27_lang.css

@@ -0,0 +1 @@
+.button-trigger.open[data-v-f9a13e27]{background:var(--action-selected);outline:2px solid var(--action-active);outline-offset:-2px;transition:outline 0s}.button-trigger.open[data-v-f9a13e27]:hover{background:var(--action-selected)}.button-trigger .label[data-v-f9a13e27]{white-space:nowrap}

package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_039dd922_lang.css

@@ -0,0 +1 @@
+.chip-trigger[data-v-039dd922]{border:1px solid var(--default-outlined-border);padding:.3125rem .3125rem .3125rem .4375rem;border-radius:100px;cursor:pointer;user-select:none;display:inline-flex;max-width:250px}.chip-trigger[data-v-039dd922]:hover{border-color:var(--action-active);background:var(--action-selected)}.chip-trigger.active[data-v-039dd922]{border:none;background:var(--primary-light);padding:.375rem .375rem .375rem .5rem}.chip-trigger.active .chip-trigger--content[data-v-039dd922]{color:var(--primary-contrast-text)}.chip-trigger.active[data-v-039dd922]:hover{border:.0625rem solid var(--primary-main-50-p);padding:.3125rem .3125rem .3125rem .4375rem}.chip-trigger.open[data-v-039dd922]{border:.125rem solid var(--action-active);padding:.25rem .25rem .25rem .375rem;background:var(--action-selected)}.chip-trigger.open.active[data-v-039dd922]{border:.125rem solid var(--primary-main-50-p);background:var(--primary-light);padding:.25rem .25rem .25rem .375rem}.chip-trigger.disabled[data-v-039dd922]{cursor:auto}.chip-trigger--content[data-v-039dd922]{color:var(--text-primary);display:flex;column-gap:4px;width:100%}.chip-trigger--content .x-circle-wrapper[data-v-039dd922]{color:var(--primary-dark)}.chip-trigger--content .x-circle-wrapper[data-v-039dd922]:hover{color:var(--primary-darker)}.chip-trigger--text[data-v-039dd922]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%}.chip-trigger--icon[data-v-039dd922]{color:var(--action-active)}

package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_2aee12ad_lang.css

@@ -0,0 +1 @@
+.custom-list-area[data-v-2aee12ad]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 43px}.inline-search[data-v-2aee12ad]{width:100%}.contain-accept[data-v-2aee12ad]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-2aee12ad]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-2aee12ad]{margin-left:4px;display:inline-flex;color:var(--primary-main)}

package/DataGrid.vue_vue_type_style_index_0_scoped_2406226b_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-2406226b]{position:sticky}.table-container[data-v-2406226b]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-2406226b]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-2406226b]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-2406226b]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-2406226b]{width:13.75rem}.table-header.isStickyHeader[data-v-2406226b]{z-index:calc(var(--e46a2c5a) + 3);top:0}.table-head-container[data-v-2406226b]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-2406226b]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-2406226b]{display:inline-table}.table-header-actions[data-v-2406226b]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-2406226b]{position:relative}.table-row.loading[data-v-2406226b]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-2406226b]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-2406226b]{border-bottom:none}.expanded-row[data-v-2406226b]{grid-column:var(--3c10b207);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-2406226b]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-2406226b]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-2406226b],table th[data-v-2406226b]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-2406226b]:first-of-type,table th[data-v-2406226b]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-2406226b]:last-of-type,table th[data-v-2406226b]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-2406226b],table th.expand-toggle-cell[data-v-2406226b]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-2406226b]{border-bottom:none;z-index:calc(var(--e46a2c5a) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-2406226b]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--42785f40)}table>thead>tr>th[data-v-2406226b]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-2406226b]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-2406226b]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-2406226b]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-2406226b]{cursor:pointer}table>thead.sticky[data-v-2406226b]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-2406226b]{z-index:calc(var(--e46a2c5a) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-2406226b]{display:block}table>tbody>*>tr[data-v-2406226b]{background-color:var(--background-default);min-height:var(--403d20c8);height:auto;display:grid;align-items:center;grid-template-columns:var(--42785f40)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-2406226b]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-2406226b],table>tbody>*>tr.activeMenu>td[data-v-2406226b]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-2406226b]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--403d20c8);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-2406226b]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-2406226b]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-2406226b]{justify-content:flex-end;text-align:right}.section-container[data-v-2406226b]{left:0}.sections[data-v-2406226b]{display:flex}.section[data-v-2406226b]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-2406226b]{width:100%}.empty-state[data-v-2406226b]{min-height:250px}.floating-row[data-v-2406226b]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--e46a2c5a) + 1)}.floating-row *[data-v-2406226b-s]{pointer-events:auto}.checkbox-cell-sticky[data-v-2406226b]{position:sticky;left:0}

package/DropdownV4.vue_vue_type_style_index_0_scoped_6466948d_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-6466948d],.v-leave-active[data-v-6466948d]{transition:opacity .25s ease}ol[data-v-6466948d],ul[data-v-6466948d],menu[data-v-6466948d]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-6466948d],.dropdown.full-width .button__container[data-v-6466948d]{width:100%}.dropdown-list-wrapper[data-v-6466948d]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-6466948d]{padding:.5rem}.list-container--multi[data-v-6466948d]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-6466948d]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-6466948d]{width:100%}.inline-search .list-container[data-v-6466948d]{padding-top:0}.no-result-container[data-v-6466948d]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-6466948d]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-6466948d]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-6466948d]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-6466948d]{min-height:0;margin-bottom:0}.image-slot[data-v-6466948d]{margin-right:.5rem}.actions-wrapper[data-v-6466948d]{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-6466948d]{margin-left:.5rem}

package/OptionV4.vue_vue_type_style_index_0_scoped_2c2947b3_lang.css

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

package/README.md

@@ -149,21 +149,10 @@ For uploading a new custom icon like 'ad-network' icon type, follow the next ste
 
 - Upload to S3
 
-  - Connect to AWS through Okta
-  - Go to S3
-  - Search Bucket named 'fusion-assets'
-  - Go to the 'fusion-assets/assets/icons/...'
-  - Go to the right folder for you
-  - Drag your SVG files to the table in order to upload them
-
-- Invalidate Cache
-
-  - Connect to AWS through Okta
-  - Go to CloudFront
-  - Search a distribution named 'fusion.ironsrc.net'
-  - Go to the 'Invalidations' tab
-  - Create the correct invalidation according to what you've uploaded earlier (example: '/assets/icons/v4/ad-networks/\*')
-  - Note: you can use the old invalidations by clicking 'Copy to new'
+  - Go to https://github.com/ironsource-mobile/shared-platform-assets repo
+  - Add relevant asset to a relevant place
+  - Make PR and Merge after to main
+  - It will be automatically deployed with cache invalidation
 
 - Clear your browser cache
   - Go to your StoryBook link

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

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

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

@@ -1,7 +1,7 @@
 import o from "./ButtonDropdownTrigger.vue2.js";
-/* empty css                            */import t from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_76c74f58_lang.css"; //*');
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-76c74f58"]]);
+/* empty css                            */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_f9a13e27_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-f9a13e27"]]);
 export {
   p as default
 };

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

@@ -1,9 +1,9 @@
- import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_76c74f58_lang.css"; import { defineComponent as l, openBlock as o, createBlock as i, unref as d, normalizeClass as r, withCtx as s, renderSlot as c, createTextVNode as u, toDisplayString as f } from "vue";
-import m from "../../button/v4/ButtonV4.vue.js";
+ import "../../../ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_f9a13e27_lang.css"; import { defineComponent as l, openBlock as o, createBlock as i, unref as d, normalizeClass as r, withCtx as s, renderSlot as c, createElementVNode as u, toDisplayString as m } from "vue";
+import f from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-const p = /* @__PURE__ */ l({
+const b = { class: "label" }, p = /* @__PURE__ */ l({
   __name: "ButtonDropdownTrigger",
   props: {
     label: null,
@@ -18,7 +18,7 @@ const p = /* @__PURE__ */ l({
   },
   emits: ["click"],
   setup(e, { emit: a }) {
-    return (n, t) => (o(), i(d(m), {
+    return (n, t) => (o(), i(d(f), {
       class: r(["button-trigger", { open: e.open }]),
       disabled: e.disabled,
       color: "default",
@@ -29,11 +29,11 @@ const p = /* @__PURE__ */ l({
       "end-icon-name": e.hideEndIcon ? null : "caret-down",
       content: e.label,
       "test-id": e.testId,
-      onClick: t[0] || (t[0] = (b) => a("click"))
+      onClick: t[0] || (t[0] = (y) => a("click"))
     }, {
       default: s(() => [
         c(n.$slots, "default", {}, () => [
-          u(f(e.label), 1)
+          u("div", b, m(e.label), 1)
         ], !0)
       ]),
       _: 3