@ironsource/shared-ui 2.1.6-rc.36 → 2.1.6-rc.37

package/DataGrid.vue_vue_type_style_index_0_scoped_057abdf5_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-057abdf5]{position:sticky}.table-container[data-v-057abdf5]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-057abdf5]{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-057abdf5]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-057abdf5]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-057abdf5]{width:13.75rem}.table-header.isStickyHeader[data-v-057abdf5]{z-index:calc(var(--671cd302) + 3);top:0}.table-head-container[data-v-057abdf5]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-057abdf5]{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-057abdf5]{display:inline-table}.table-header-actions[data-v-057abdf5]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-057abdf5]{position:relative}.table-row.loading[data-v-057abdf5]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-057abdf5]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-057abdf5]{border-bottom:none}.expanded-row[data-v-057abdf5]{grid-column:var(--be93a49a);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-057abdf5]{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-057abdf5]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-057abdf5],table th[data-v-057abdf5]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-057abdf5]:first-of-type,table th[data-v-057abdf5]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-057abdf5]:last-of-type,table th[data-v-057abdf5]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-057abdf5],table th.expand-toggle-cell[data-v-057abdf5]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-057abdf5]{border-bottom:none;z-index:calc(var(--671cd302) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-057abdf5]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--13ad9fec)}table>thead>tr>th[data-v-057abdf5]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-057abdf5]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-057abdf5]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-057abdf5]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-057abdf5]{cursor:pointer}table>thead.sticky[data-v-057abdf5]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-057abdf5]{z-index:calc(var(--671cd302) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-057abdf5]{display:block}table>tbody>*>tr[data-v-057abdf5]{background-color:var(--background-default);min-height:var(--6feb5274);height:auto;display:grid;align-items:center;grid-template-columns:var(--13ad9fec)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-057abdf5]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-057abdf5],table>tbody>*>tr.activeMenu>td[data-v-057abdf5]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-057abdf5]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--6feb5274);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-057abdf5]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-057abdf5]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-057abdf5]{justify-content:flex-end;text-align:right}.section-container[data-v-057abdf5]{left:0}.sections[data-v-057abdf5]{display:flex}.section[data-v-057abdf5]{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-057abdf5]{width:100%}.empty-state[data-v-057abdf5]{min-height:250px}

package/DropdownV4.vue_vue_type_style_index_0_scoped_b484da34_lang.css

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

package/OptionV4.vue_vue_type_style_index_0_scoped_9db0f796_lang.css

@@ -0,0 +1 @@
+.label[data-v-9db0f796]{color:#41454d}.item-container[data-v-9db0f796]{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-9db0f796]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-9db0f796]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-9db0f796],.item-container[data-v-9db0f796]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-9db0f796]{background-color:var(--action-selected)}.subtitle[data-v-9db0f796]{color:#7b838c;line-height:1rem}.clear-button[data-v-9db0f796]{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-9db0f796]:hover{color:#3083ff}.item[data-v-9db0f796]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-9db0f796],.item--multi[data-v-9db0f796]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-9db0f796]{width:20px;height:20px;flex:none}.item .image img[data-v-9db0f796]{width:20px;height:20px;border-radius:4px}.item .start-icon[data-v-9db0f796],.item .end-icon[data-v-9db0f796]{display:flex;color:var(--action-active)}.item .option-text[data-v-9db0f796]{line-height:1.1875rem}.text-container[data-v-9db0f796]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.tooltip-option[data-v-9db0f796]{display:block}.tooltip-option[data-v-9db0f796] .container{width:100%}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_4492426c_lang.css

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

package/components/autocomplete/Autocomplete.vue.d.ts

@@ -115,6 +115,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     default?(_: {
         option: unknown;
+        index: number;
         selected: boolean;
         active: boolean;
         disabled: any;

package/components/autocomplete/Autocomplete.vue2.js

@@ -6,6 +6,7 @@ import "../dropdown/v4/ChipDropdownTrigger.vue.js";
 import "../dropdown/v4/AppDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
+import "../dropdown/v4/TreeDropdown.vue.js";
 import "../dropdown/v4/OptionV4.vue.js";
 import E from "../input/v4/TextField.vue.js";
 import { useVModel as z } from "@vueuse/core";
@@ -14,7 +15,7 @@ import P from "../shared/FieldMaxLength.vue.js";
 const N = {
   key: 0,
   class: "footer"
-}, Q = /* @__PURE__ */ w({
+}, X = /* @__PURE__ */ w({
   __name: "Autocomplete",
   props: {
     modelValue: { default: "" },
@@ -40,8 +41,8 @@ const N = {
     testId: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: g }) {
-    const a = e, i = z(a, "modelValue", g), p = (l) => {
+  setup(e, { emit: p }) {
+    const a = e, i = z(a, "modelValue", p), g = (l) => {
       l !== void 0 && (i.value = a.displayValue(l));
     }, k = c(() => (i.value || "").length), y = (l, t) => a.displayValue(l).toLowerCase().replace(/\s+/g, "").includes(t.toLowerCase().replace(/\s+/g, "")), u = c(() => {
       const l = i.value.toString();
@@ -68,7 +69,7 @@ const N = {
         "search-auto-focus": !1,
         "full-width": !1,
         "test-id": e.testId,
-        "onUpdate:selected": p
+        "onUpdate:selected": g
       }, {
         "dropdown-trigger": x(() => [
           v(d(E), {
@@ -117,5 +118,5 @@ const N = {
   }
 });
 export {
-  Q as default
+  X as default
 };

package/components/autocomplete/index.d.ts

@@ -469,6 +469,7 @@ declare const AutocompleteTypes: () => ({
     $slots: {
         default?(_: {
             option: unknown;
+            index: number;
             selected: boolean;
             active: boolean;
             disabled: any;

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

@@ -1,17 +1,17 @@
 import { useToggle as me } from "../../../composables/useToggle.js";
 import { ref as n, computed as r, watch as m, useSlots as Pe, toRaw as A, nextTick as N, provide as Te, onMounted as we } from "vue";
 import { isObjectInArray as W } from "../../../utils/array.js";
-import { objectsEqual as xe } from "../../../utils/object.js";
-import { useClamp as Ie, useVirtualList as De, onClickOutside as Y } from "@vueuse/core";
-import { Mode as P, Type as _, DropdownContext as Ne } from "./DropdownContext.js";
+import { objectsEqual as Ie } from "../../../utils/object.js";
+import { useClamp as xe, useVirtualList as De, onClickOutside as Y } from "@vueuse/core";
+import { Mode as P, Type as V, DropdownContext as Ne } from "./DropdownContext.js";
 import { pxToRem as Re } from "../../../utils/style.js";
 import { useEditableContext as Ee } from "../../table-cells/common/EditableContext.js";
 const Ue = (l, O, b) => {
   const Z = (e, t) => l.multi ? W(e, t) : A(e) === t;
-  let k;
+  let _;
   ((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";
-  })(k || (k = {}));
+  })(_ || (_ = {}));
   const a = n(
     l.selected
   ), R = Ee(), u = r({
@@ -28,7 +28,7 @@ const Ue = (l, O, b) => {
       a.value = l.selected, v.value = l.selected;
     }
   );
-  const p = Pe(), w = n(null), g = n(null), V = n(null), E = n(null), H = n(null), x = n(null), F = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => x.value ? x.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), I = n(-1), T = n(""), v = n(l.selected || []), q = () => x.value?.focus(), [d, te, ae] = me({
+  const F = Pe(), w = n(null), g = n(null), k = n(null), E = n(null), H = n(null), I = n(null), p = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => I.value ? I.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), x = n(-1), T = n(""), v = n(l.selected || []), q = () => I.value?.focus(), [d, te, ae] = me({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
@@ -47,7 +47,7 @@ const Ue = (l, O, b) => {
     set(e) {
       O("update:isOpen", e);
     }
-  }), ne = r(() => s.value.length - 1), o = Ie(0, 0, ne), K = r(() => u.value ? l.displayValue(u.value) : ""), ie = (e) => {
+  }), ne = r(() => s.value.length - 1), o = xe(0, 0, ne), K = r(() => u.value ? l.displayValue(u.value) : ""), ie = (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 ?? ""}`;
@@ -83,20 +83,20 @@ const Ue = (l, O, b) => {
     scrollTo: D
   } = De(s, {
     itemHeight: j.value,
-    overscan: 2
+    overscan: l.disableVirtualScroll ? 1 / 0 : 2
   });
   m(
     () => l.isOpen,
     (e) => {
       G(e);
     }
-  ), m([I], async () => {
+  ), m([x], async () => {
     await N();
   }), m(
-    [d, o, I],
+    [d, o, x],
     async ([e], [t]) => {
-      d.value && (await N(), I.value !== -1 && e !== t && setTimeout(() => {
-        l.multi && b.VERSION === 4 || D(I.value);
+      d.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
+        l.multi && b.VERSION === 4 || D(x.value);
       }), o.value && setTimeout(() => {
         D(o.value);
       }));
@@ -131,15 +131,15 @@ const Ue = (l, O, b) => {
   }, fe = () => {
     de(), b.VERSION !== 4 && (u.value = a.value);
   }, ge = (e = !0) => {
-    a.value = [], e && (u.value = [], v.value = [], O("clear"));
+    a.value = [], e && (u.value = [], v.value = []), O("clear");
   }, C = (e, t) => {
     if (e = A(e), c.value[t]?.disabled)
       return;
-    if (I.value = t, i.mode !== P.Multi) {
+    if (x.value = t, i.mode !== P.Multi) {
       l.keepOpen || h(!1), i.goToOption(
         0
         /* None */
-      ), u.value = e, M(""), q(), i.type === _.Search && g.value && (g.value.value = l.displayValue(e));
+      ), u.value = e, M(""), q(), i.type === V.Search && g.value && (g.value.value = l.displayValue(e));
       return;
     }
     if (!Array.isArray(a.value))
@@ -148,7 +148,7 @@ const Ue = (l, O, b) => {
     const S = A(a.value);
     if (W(S, e)) {
       a.value = S.filter(
-        (f) => !xe(f, e)
+        (f) => !Ie(f, e)
       );
       return;
     } else {
@@ -163,7 +163,7 @@ const Ue = (l, O, b) => {
     activeOption: E,
     listRef: w,
     clearable: l.clearable,
-    type: p.input ? _.Search : _.Dropdown,
+    type: F.input ? V.Search : V.Dropdown,
     mode: l.multi ? P.Multi : P.Single,
     query: T,
     selectedValue: K,
@@ -213,7 +213,7 @@ const Ue = (l, O, b) => {
     },
     {
       ignore: [
-        x,
+        I,
         B,
         L,
         U,
@@ -227,7 +227,7 @@ const Ue = (l, O, b) => {
   };
   we(async () => {
     l.autoFocus && (await N(), setTimeout(() => {
-      V.value.focus();
+      k.value.focus();
     })), i.goToOption(0);
   });
   const Se = () => {
@@ -322,11 +322,11 @@ const Ue = (l, O, b) => {
     scrollTo: D,
     onClickOutside: Y,
     listRef: w,
-    buttonRef: x,
+    buttonRef: I,
     apply: B,
     cancel: L,
-    el: V,
-    triggerRef: F,
+    el: k,
+    triggerRef: p,
     clearAll: U,
     onClearAllSelections: ge
   };

package/components/dropdown/common/Option.common.d.ts

@@ -1,5 +1,5 @@
 export declare const optionCommon: (props: any) => {
-    selected: import("vue").ComputedRef<boolean>;
+    selected: import("vue").ComputedRef<any>;
     isMulti: import("vue").ComputedRef<boolean>;
     id: string;
     onClick: (event: Event) => void;

package/components/dropdown/common/Option.common.js

@@ -1,22 +1,22 @@
 import { ref as s, onMounted as m, onUnmounted as v, computed as o, toRaw as i } from "vue";
 import { useId as f } from "../../../composables/useId.js";
 import { useDropdownContext as O, Mode as l } from "./DropdownContext.js";
-const A = (t) => {
-  const e = O("Option"), n = f().value, u = s(null), c = (d) => {
-    t.selectAllOption ? d.stopPropagation() : e.select(t.option);
+const A = (e) => {
+  const t = O("Option"), n = f().value, u = s(null), c = (a) => {
+    e.selectAllOption ? a.stopPropagation() : t.select(e.option);
   };
-  m(() => e.registerOption(n, t.disabled, !!t.subtitle)), v(() => {
-    e.unRegisterOption(n);
+  m(() => t.registerOption(n, e.disabled, !!e.subtitle)), v(() => {
+    t.unRegisterOption(n);
   });
-  const r = o(() => e.mode === l.Multi), a = o(() => t.active !== null ? t.active : e.activeIndex.value !== null ? e.activeOption.value === t.option : !1);
+  const r = o(() => t.mode === l.Multi), d = o(() => e.active !== null ? e.active : t.activeIndex.value !== null ? t.activeOption.value === e.option : !1);
   return {
-    selected: o(() => t.selectedProp ? !0 : e.mode === l.Multi && Array.isArray(e.selectedOption.value) ? i(e.selectedOption.value.includes(t.option)) : i(e.selectedOption.value) === i(t.option)),
+    selected: o(() => e.selectedProp !== null ? e.selectedProp : t.mode === l.Multi && Array.isArray(t.selectedOption.value) ? i(t.selectedOption.value.includes(e.option)) : i(t.selectedOption.value) === i(e.option)),
     isMulti: r,
     id: n,
     onClick: c,
-    api: e,
+    api: t,
     el: u,
-    active: a
+    active: d
   };
 };
 export {

package/components/dropdown/composables/useChildOptions.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export declare const useChildOptions: (selection: Ref<unknown[]>, childrenKey: string) => {
+    hasChildren: (option: unknown) => boolean;
+    getChildren: (option: unknown) => unknown[];
+    someChildrenSelected: (option: any) => boolean;
+    allChildrenSelected: (option: unknown) => boolean;
+};

package/components/dropdown/composables/useChildOptions.js

@@ -0,0 +1,14 @@
+const u = (t, s) => {
+  const l = (e) => e[s] || [], r = (e) => l(e)?.length > 0;
+  return {
+    hasChildren: r,
+    getChildren: l,
+    someChildrenSelected: (e) => r(e) ? l(e).some((n) => t.value.includes(n)) : !1,
+    allChildrenSelected: (e) => r(e) ? l(e).every(
+      (n) => t.value.includes(n)
+    ) : !1
+  };
+};
+export {
+  u as useChildOptions
+};

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

@@ -48,6 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullWidth?: boolean;
     optionsListWidth?: string;
     statusType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
+    disableVirtualScroll?: boolean;
 }>, {
     multi: boolean;
     inlineSearchPlaceholder: string;
@@ -94,6 +95,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullWidth: boolean;
     optionsListWidth: any;
     statusType: any;
+    disableVirtualScroll: boolean;
 }>, {
     selectItem: (option: any, index?: number) => void;
     scrollTo: (index: number) => void;
@@ -155,6 +157,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullWidth?: boolean;
     optionsListWidth?: string;
     statusType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
+    disableVirtualScroll?: boolean;
 }>, {
     multi: boolean;
     inlineSearchPlaceholder: string;
@@ -201,6 +204,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullWidth: boolean;
     optionsListWidth: any;
     statusType: any;
+    disableVirtualScroll: boolean;
 }>>> & {
     onCopyToClipboard?: () => any;
     onClear?: () => any;
@@ -255,6 +259,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullWidth: boolean;
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
+    disableVirtualScroll: boolean;
 }>, {
     label?(_: {}): any;
     "dropdown-trigger"?(_: {
@@ -270,6 +275,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     }): any;
     default?(_: {
         option: unknown;
+        index: number;
         selected: boolean;
         active: boolean;
         disabled: any;

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

@@ -1,8 +1,8 @@
 import o from "./DropdownV4.vue2.js";
-/* empty css                 *//* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2e7a89bc_lang.css"; //*');
+/* empty css                 *//* empty css                 */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b484da34_lang.css"; //*');
 // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-2e7a89bc"]]);
+const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-b484da34"]]);
 export {
   r as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2e7a89bc_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as se, computed as x, openBlock as i, createElementBlock as n, mergeProps as u, unref as e, renderSlot as w, createElementVNode as m, createVNode as a, withCtx as c, Transition as ue, normalizeClass as A, normalizeStyle as ce, isRef as fe, createCommentVNode as r, createTextVNode as g, toDisplayString as ye, withModifiers as $, Fragment as me, renderList as pe, toRaw as b, createBlock as H, resolveDynamicComponent as ge } from "vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b484da34_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as se, computed as x, openBlock as i, createElementBlock as n, mergeProps as u, unref as e, renderSlot as w, createElementVNode as p, createVNode as a, withCtx as c, Transition as ue, normalizeClass as A, normalizeStyle as ce, isRef as fe, createCommentVNode as r, createTextVNode as g, toDisplayString as ye, withModifiers as $, Fragment as pe, renderList as me, toRaw as h, createBlock as H, resolveDynamicComponent as ge } from "vue";
 import L from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "./DropdownV4.vue.js";
@@ -8,6 +8,7 @@ import be from "./ChipDropdownTrigger.vue.js";
 import he from "./AppDropdownTrigger.vue.js";
 import "./ButtonDropdownTrigger.vue.js";
 import "./ButtonFilterDropdownTrigger.vue.js";
+import "./TreeDropdown.vue.js";
 import U from "./OptionV4.vue.js";
 import Ie from "../../search/v4/SearchV4.vue.js";
 import W from "../../typography/v4/Typography.vue.js";
@@ -16,7 +17,7 @@ import { DropdownTestIdModifiers as f } from "../../../testids/index.js";
 import { dropdownCommon as we } from "../common/Dropdown.common.js";
 import Ce from "../../loader/v4/Loader.vue.js";
 import { useTestIdAttrs as Se } from "../../../utils/testIds.js";
-import { TRIGGERS as p } from "./Dropdown.types.js";
+import { TRIGGERS as m } from "./Dropdown.types.js";
 import { useElementSize as Ae } from "@vueuse/core";
 import Le from "../../shared/FieldHelpText.vue.js";
 const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke = { key: 1 }, Ne = { key: 2 }, De = {
@@ -28,10 +29,10 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
 }, Re = {
   key: 1,
   class: "loader"
-}, Fe = { key: 2 }, ze = ["aria-selected", "aria-disabled", "onClick"], Ve = {
+}, Fe = { key: 2 }, Ve = ["aria-selected", "aria-disabled", "onClick"], ze = {
   key: 1,
   class: "actions-wrapper"
-}, xe = { class: "actions-clear-all" }, $e = { class: "actions-apply-cancel" }, st = /* @__PURE__ */ se({
+}, xe = { class: "actions-clear-all" }, $e = { class: "actions-apply-cancel" }, ut = /* @__PURE__ */ se({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
@@ -62,7 +63,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
     triggerFeedbackShowIcon: { type: Boolean, default: !1 },
     size: { default: "medium" },
     mandatory: { type: Boolean, default: !1 },
-    predefinedTrigger: { default: p.DEFAULT },
+    predefinedTrigger: { default: m.DEFAULT },
     inlineSearch: { type: Boolean, default: !1 },
     inlineSearchPlaceholder: { default: "Search" },
     onSearch: { type: Function, default: null },
@@ -81,7 +82,8 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
     theme: { default: "light-theme-v4" },
     fullWidth: { type: Boolean, default: !0 },
     optionsListWidth: { default: null },
-    statusType: { default: null }
+    statusType: { default: null },
+    disableVirtualScroll: { type: Boolean, default: !1 }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply", "selectAll", "clear", "copyToClipboard"],
   setup(t, { expose: M, emit: O }) {
@@ -95,7 +97,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
     }, {
       onKeydown: k,
       open: s,
-      toggleMenu: h,
+      toggleMenu: I,
       onButtonKeydown: G,
       query: C,
       containerProps: X,
@@ -122,13 +124,13 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
       el: ne,
       onClearAllSelections: F,
       clearAll: ae
-    } = we(d, O, E), y = Se(d.testId, f), z = x(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? ke : d.predefinedTrigger === p.APP ? he : null), { width: V } = Ae(R), de = x(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? V.value - 2 > 240 ? `${V.value - 2}px` : `${E.DROPLIST_MIN_WIDTH}px` : "auto"), re = () => {
-      h();
+    } = we(d, O, E), y = Se(d.testId, f), V = x(() => !d.predefinedTrigger || d.predefinedTrigger === m.DEFAULT ? ke : d.predefinedTrigger === m.APP ? he : null), { width: z } = Ae(R), de = x(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === m.DEFAULT || d.predefinedTrigger === m.APP ? z.value - 2 > 240 ? `${z.value - 2}px` : `${E.DROPLIST_MIN_WIDTH}px` : "auto"), re = () => {
+      I();
     };
     return M({
       selectItem: D,
       scrollTo: te
-    }), (I, o) => (i(), n("div", u({
+    }), (v, o) => (i(), n("div", u({
       ref_key: "el",
       ref: ne,
       class: ["dropdown dropdown--main-wrapper", [{ "dropdown--disabled": t.disabled, "full-width": t.fullWidth }]],
@@ -137,8 +139,8 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
       onKeydown: o[8] || (o[8] = //@ts-ignore
       (...l) => e(k) && e(k)(...l))
     }), [
-      w(I.$slots, "label", {}, void 0, !0),
-      m("div", Ee, [
+      w(v.$slots, "label", {}, void 0, !0),
+      p("div", Ee, [
         a(e(ve), u({
           theme: t.theme,
           "popper-class": [
@@ -191,15 +193,15 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
                         onKeydown: e(k)
                       }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
                     ])) : r("", !0),
-                    w(I.$slots, "input-list", { open: e(s) }, void 0, !0),
-                    m("div", u({
+                    w(v.$slots, "input-list", { open: e(s) }, void 0, !0),
+                    p("div", u({
                       class: ["list-container", { "list-container--multi": t.multi }],
                       style: { height: `${e(q)}rem` }
                     }, {
                       ...e(X),
                       ...e(y)[e(f).LIST_CONTAINER]
                     }), [
-                      m("ul", u(e(Y), {
+                      p("ul", u(e(Y), {
                         role: "listbox",
                         class: ["list", { "list--multi": t.multi }]
                       }), [
@@ -240,22 +242,23 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
                             _: 1
                           }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
                         ])) : r("", !0),
-                        e(K).length && !t.loading ? (i(!0), n(me, { key: 3 }, pe(e(K), ({ data: l, index: v }) => (i(), n("li", {
-                          key: v,
-                          "aria-selected": e(S)(b(e(T)), l),
+                        e(K).length && !t.loading ? (i(!0), n(pe, { key: 3 }, me(e(K), ({ data: l, index: b }) => (i(), n("li", {
+                          key: b,
+                          "aria-selected": e(S)(h(e(T)), l),
                           "aria-disabled": !!t.disabled,
-                          onClick: $(() => e(D)(l, v), ["stop"])
+                          onClick: $(() => e(D)(l, b), ["stop"])
                         }, [
-                          w(I.$slots, "default", {
+                          w(v.$slots, "default", {
                             option: l,
-                            selected: e(S)(b(e(T)), l),
-                            active: b(e(P)) === v,
+                            index: b,
+                            selected: e(S)(h(e(T)), l),
+                            active: h(e(P)) === b,
                             disabled: l[d.disabledOptionKey]
                           }, () => [
                             a(e(U), {
                               option: l,
-                              selected: e(S)(b(e(T)), l),
-                              active: b(e(P)) === v,
+                              "selected-prop": e(S)(h(e(T)), l),
+                              active: h(e(P)) === b,
                               disabled: l[d.disabledOptionKey],
                               "name-key": t.optionNameKey,
                               "image-key": t.optionImageKey,
@@ -263,13 +266,13 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
                               "icon-type": t.optionIconType,
                               "end-icon-key": t.optionEndIconKey,
                               "end-icon-type": t.optionEndIconType
-                            }, null, 8, ["option", "selected", "active", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type"])
+                            }, null, 8, ["option", "selected-prop", "active", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type"])
                           ], !0)
-                        ], 8, ze))), 128)) : r("", !0)
+                        ], 8, Ve))), 128)) : r("", !0)
                       ], 16)
                     ], 16),
-                    t.multi ? (i(), n("div", Ve, [
-                      m("div", xe, [
+                    t.multi ? (i(), n("div", ze, [
+                      p("div", xe, [
                         a(e(L), u(
                           {
                             ref_key: "clearAll",
@@ -289,7 +292,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
                           _: 1
                         }, 16)
                       ]),
-                      m("div", $e, [
+                      p("div", $e, [
                         a(e(L), u(
                           {
                             ref_key: "cancel",
@@ -327,27 +330,27 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
             })
           ]),
           default: c(() => [
-            m("div", {
+            p("div", {
               class: A(["button__container", {
                 "button__container--open": !!e(s),
                 [`button__container--${t.size}`]: !0,
                 "button__container--disabled": t.disabled
               }])
             }, [
-              w(I.$slots, "dropdown-trigger", {
+              w(v.$slots, "dropdown-trigger", {
                 buttonTriggerProps: {
                   open: e(s),
                   disabled: t.disabled,
                   label: e(Z) || t.placeholder,
-                  onClick: () => e(h)()
+                  onClick: () => e(I)()
                 }
               }, () => [
-                m("div", {
+                p("div", {
                   ref_key: "buttonRef",
                   ref: R
                 }, [
-                  e(z) ? (i(), n("div", Be, [
-                    (i(), H(ge(e(z)), {
+                  e(V) ? (i(), n("div", Be, [
+                    (i(), H(ge(e(V)), {
                       placeholder: t.placeholder,
                       open: e(s),
                       label: t.triggerLabel,
@@ -374,12 +377,12 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
                       onCopyToClipboard: o[0] || (o[0] = (l) => O("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", "feedback-variant", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
                   ])) : r("", !0),
-                  t.predefinedTrigger === e(p).ICON_BUTTON ? (i(), n("div", Ke, [
+                  t.predefinedTrigger === e(m).ICON_BUTTON ? (i(), n("div", Ke, [
                     a(e(Te), {
-                      onClick: o[1] || (o[1] = (l) => e(h)())
+                      onClick: o[1] || (o[1] = (l) => e(I)())
                     })
                   ])) : r("", !0),
-                  t.predefinedTrigger === e(p).CHIP ? (i(), n("div", Ne, [
+                  t.predefinedTrigger === e(m).CHIP ? (i(), n("div", Ne, [
                     a(e(be), {
                       open: e(s),
                       label: t.placeholder,
@@ -388,7 +391,7 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
                       "selected-option": t.multi ? e(N) : e(T),
                       "display-value": t.displayValue,
                       multi: t.multi,
-                      onClick: o[2] || (o[2] = (l) => e(h)()),
+                      onClick: o[2] || (o[2] = (l) => e(I)()),
                       onClear: o[3] || (o[3] = (l) => e(F)())
                     }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
                   ])) : r("", !0)
@@ -411,5 +414,5 @@ const Oe = ["tabindex"], Ee = { style: { width: "100%" } }, Be = { key: 0 }, Ke
   }
 });
 export {
-  st as default
+  ut as default
 };

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

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_69abfd4a_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-69abfd4a"]]);
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9db0f796_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-9db0f796"]]);
 export {
   s as default
 };