@ironsource/shared-ui 2.1.3-rc.16 → 2.1.3-rc.17

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c3033d90_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-c3033d90]{position:relative}.dropdown-trigger[data-v-c3033d90]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-c3033d90]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-c3033d90]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-c3033d90]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-c3033d90]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-c3033d90],.dropdown-trigger.disabled .caret-down[data-v-c3033d90]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-c3033d90]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-c3033d90]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-c3033d90]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-c3033d90]{padding:4px 6px;border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-c3033d90]{padding:4px 6px;border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-c3033d90]{padding:4px 6px;border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-c3033d90]{color:var(--action-active)}.content[data-v-c3033d90]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-c3033d90]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-c3033d90]{width:20px;height:20px;flex:none}.content .image img[data-v-c3033d90]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-c3033d90]{display:flex;color:var(--action-active)}.content .status-dot[data-v-c3033d90]{padding-right:.25rem}.content .status-dot>div[data-v-c3033d90]{position:relative;top:-1px}.dropdown-field-label[data-v-c3033d90]{color:var(--text-primary)}.dropdown-field-help-text[data-v-c3033d90]{margin-top:4px;position:absolute}

package/DropdownV4.vue_vue_type_style_index_0_scoped_b9e03c56_lang.css

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

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

@@ -90,6 +90,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         option: unknown;
         selected: boolean;
         active: boolean;
+        disabled: any;
     }): any;
 }>;
 export default _default;

package/components/autocomplete/index.d.ts

@@ -359,6 +359,7 @@ declare const AutocompleteTypes: () => ({
             option: unknown;
             selected: boolean;
             active: boolean;
+            disabled: any;
         }): any;
     };
 }))[];

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

@@ -1,7 +1,7 @@
 import o from "./DefaultDropdownTrigger.vue2.js";
 /* empty css                             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_f0c4710f_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-f0c4710f"]]);
+// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c3033d90_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c3033d90"]]);
 export {
   p as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_f0c4710f_lang.css"; import { defineComponent as I, computed as r, openBlock as a, createElementBlock as n, createBlock as m, createCommentVNode as o, createElementVNode as c, mergeProps as y, unref as l, renderSlot as h, createVNode as s, withCtx as O, createTextVNode as x, toDisplayString as w } from "vue";
+ import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c3033d90_lang.css"; import { defineComponent as I, computed as r, openBlock as a, createElementBlock as n, createBlock as m, createCommentVNode as o, createElementVNode as c, mergeProps as y, unref as l, renderSlot as h, createVNode as s, withCtx as O, createTextVNode as x, toDisplayString as w } from "vue";
 import V from "../../typography/v4/Typography.vue.js";
 import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
 import T from "../../icon/v4/IconV4.vue.js";

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

@@ -9,10 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading?: boolean;
     testId?: string;
     isOpen?: boolean;
-    options: unknown[] | {
-        id: string;
-        text: string;
-    }[];
+    options: unknown[];
     showSelectAll?: boolean;
     defaultOpen?: boolean;
     keepOpen?: boolean;
@@ -44,6 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey?: string;
     optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
     valueToCopy?: string;
+    disabledOptionKey?: string;
     theme?: string;
     fullWidth?: boolean;
     optionsListWidth?: string;
@@ -88,6 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey: string;
     optionIconType: any;
     valueToCopy: any;
+    disabledOptionKey: string;
     fullWidth: boolean;
     optionsListWidth: any;
     statusType: any;
@@ -110,10 +109,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading?: boolean;
     testId?: string;
     isOpen?: boolean;
-    options: unknown[] | {
-        id: string;
-        text: string;
-    }[];
+    options: unknown[];
     showSelectAll?: boolean;
     defaultOpen?: boolean;
     keepOpen?: boolean;
@@ -145,6 +141,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey?: string;
     optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
     valueToCopy?: string;
+    disabledOptionKey?: string;
     theme?: string;
     fullWidth?: boolean;
     optionsListWidth?: string;
@@ -189,6 +186,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey: string;
     optionIconType: any;
     valueToCopy: any;
+    disabledOptionKey: string;
     fullWidth: boolean;
     optionsListWidth: any;
     statusType: any;
@@ -237,6 +235,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey: string;
     optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
     valueToCopy: string;
+    disabledOptionKey: string;
     fullWidth: boolean;
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -250,6 +249,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         option: unknown;
         selected: boolean;
         active: boolean;
+        disabled: any;
     }): any;
 }>;
 export default _default;

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_78c1497e_lang.css"; //*');
+// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b9e03c56_lang.css"; //*');
 // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-78c1497e"]]);
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-b9e03c56"]]);
 export {
   r as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_78c1497e_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ae, computed as F, openBlock as i, createElementBlock as n, mergeProps as s, unref as e, renderSlot as I, createElementVNode as y, createVNode as a, withCtx as u, Transition as de, normalizeClass as V, normalizeStyle as re, isRef as se, createCommentVNode as d, createTextVNode as g, toDisplayString as ue, withModifiers as x, Fragment as ce, renderList as fe, toRaw as T, createBlock as me, resolveDynamicComponent as ye } from "vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b9e03c56_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ae, computed as F, openBlock as i, createElementBlock as n, mergeProps as s, unref as e, renderSlot as I, createElementVNode as y, createVNode as a, withCtx as u, Transition as de, normalizeClass as V, normalizeStyle as re, isRef as se, createCommentVNode as r, createTextVNode as g, toDisplayString as ue, withModifiers as x, Fragment as ce, renderList as fe, toRaw as T, createBlock as me, resolveDynamicComponent as ye } from "vue";
 import A from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "./DropdownV4.vue.js";
@@ -16,19 +16,19 @@ import Ie from "../../loader/v4/Loader.vue.js";
 import { useTestIdAttrs as we } from "../../../utils/testIds.js";
 import { TRIGGERS as p } from "./Dropdown.types.js";
 import { useElementSize as Ce } from "@vueuse/core";
-const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be = { key: 1 }, Ne = { key: 2 }, Oe = {
+const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Oe = { key: 1 }, Be = { key: 2 }, Ne = {
   key: 0,
   class: "inline-search-wrapper"
 }, De = {
   key: 0,
   class: "no-result-container"
-}, Ee = {
+}, Ke = {
   key: 1,
   class: "loader"
-}, Re = { key: 2 }, Pe = ["aria-selected", "aria-disabled", "onClick"], ze = {
+}, Ee = { key: 2 }, Re = ["aria-selected", "aria-disabled", "onClick"], Pe = {
   key: 1,
   class: "actions-wrapper"
-}, Ke = { class: "actions-clear-all" }, Fe = { class: "actions-apply-cancel" }, ot = /* @__PURE__ */ ae({
+}, ze = { class: "actions-clear-all" }, Fe = { class: "actions-apply-cancel" }, ot = /* @__PURE__ */ ae({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
@@ -72,6 +72,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
     optionImageKey: { default: "" },
     optionIconType: { default: null },
     valueToCopy: { default: null },
+    disabledOptionKey: { default: "disabled" },
     theme: { default: "light-theme-v4" },
     fullWidth: { type: Boolean, default: !0 },
     optionsListWidth: { default: null },
@@ -79,7 +80,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
   setup(t, { expose: U, emit: W }) {
-    const r = t, L = {
+    const d = t, L = {
       MULTILINE_LIST_HEIGHT: 48,
       LIST_HEIGHT: 32 + 4,
       MAX_NUMBER_OF_OPTIONS: 7.5,
@@ -93,32 +94,32 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
       query: C,
       containerProps: G,
       calculateTableHeight: X,
-      wrapperProps: B,
+      wrapperProps: O,
       filteredOptions: q,
-      allSelected: N,
+      allSelected: B,
       isIndeterminate: Y,
       onSelectAll: j,
-      virtualOptions: O,
+      virtualOptions: N,
       isSelected: S,
       selectedOption: k,
       onSelect: D,
-      activeIndex: E,
+      activeIndex: K,
       onCancel: J,
       onApply: Q,
       scrollTo: Z,
       listRef: _,
-      buttonRef: R,
+      buttonRef: E,
       apply: ee,
       cancel: te,
       el: le,
-      onClearAllSelections: P,
+      onClearAllSelections: R,
       clearAll: oe
-    } = ve(r, W, L);
+    } = ve(d, W, L);
     U({
       selectItem: D,
       scrollTo: Z
     });
-    const m = we(r.testId, c), z = F(() => !r.predefinedTrigger || r.predefinedTrigger === p.DEFAULT ? pe : r.predefinedTrigger === p.APP ? ke : null), { width: K } = Ce(R), ie = F(() => r.optionsListWidth ? r.optionsListWidth : !r.predefinedTrigger || r.predefinedTrigger === p.DEFAULT || r.predefinedTrigger === p.APP ? K.value - 2 > 240 ? `${K.value - 2}px` : `${L.DROPLIST_MIN_WIDTH}px` : "auto"), ne = () => {
+    const m = we(d.testId, c), P = F(() => !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT ? pe : d.predefinedTrigger === p.APP ? ke : null), { width: z } = Ce(E), ie = F(() => d.optionsListWidth ? d.optionsListWidth : !d.predefinedTrigger || d.predefinedTrigger === p.DEFAULT || d.predefinedTrigger === p.APP ? z.value - 2 > 240 ? `${z.value - 2}px` : `${L.DROPLIST_MIN_WIDTH}px` : "auto"), ne = () => {
       w();
     };
     return (b, o) => (i(), n("div", s({
@@ -169,7 +170,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                     onKeydown: o[5] || (o[5] = //@ts-ignore
                     (...l) => e(h) && e(h)(...l))
                   }, [
-                    e(f) && t.inlineSearch ? (i(), n("div", Oe, [
+                    e(f) && t.inlineSearch ? (i(), n("div", Ne, [
                       a(e(Te), {
                         modelValue: e(C),
                         "onUpdate:modelValue": [
@@ -183,7 +184,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                         "test-id": t.testId,
                         onKeydown: e(h)
                       }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
-                    ])) : d("", !0),
+                    ])) : r("", !0),
                     I(b.$slots, "input-list", { open: e(f) }, void 0, !0),
                     y("div", s({
                       class: ["list-container", { "list-container--multi": t.multi }],
@@ -192,9 +193,9 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                       ...e(G),
                       ...e(m)[e(c).LIST_CONTAINER]
                     }), [
-                      y("ul", s(e(B), {
+                      y("ul", s(e(O), {
                         style: {
-                          height: Number(e(B).style.height) - 4
+                          height: Number(e(O).style.height) - 4
                         },
                         role: "listbox",
                         class: ["list", { "list--multi": t.multi }]
@@ -206,8 +207,8 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                             ]),
                             _: 1
                           }, 16)
-                        ])) : d("", !0),
-                        t.loading ? (i(), n("li", Ee, [
+                        ])) : r("", !0),
+                        t.loading ? (i(), n("li", Ke, [
                           a(e(Ie)),
                           a(e(H), null, {
                             default: u(() => [
@@ -215,13 +216,13 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                             ]),
                             _: 1
                           })
-                        ])) : d("", !0),
-                        t.showSelectAll !== !1 && t.multi ? (i(), n("li", Re, [
+                        ])) : r("", !0),
+                        t.showSelectAll !== !1 && t.multi ? (i(), n("li", Ee, [
                           a(e($), s(
                             {
-                              "aria-selected": e(N),
+                              "aria-selected": e(B),
                               "aria-disabled": !!t.disabled,
-                              "selected-prop": e(N),
+                              "selected-prop": e(B),
                               "is-indeterminate": e(Y),
                               "select-all-option": ""
                             },
@@ -235,8 +236,8 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                             ]),
                             _: 1
                           }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
-                        ])) : d("", !0),
-                        e(O).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(O), ({ data: l, index: v }) => (i(), n("li", {
+                        ])) : r("", !0),
+                        e(N).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(N), ({ data: l, index: v }) => (i(), n("li", {
                           key: v,
                           "aria-selected": e(S)(T(e(k)), l),
                           "aria-disabled": !!t.disabled,
@@ -245,23 +246,25 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                           I(b.$slots, "default", {
                             option: l,
                             selected: e(S)(T(e(k)), l),
-                            active: T(e(E)) === v
+                            active: T(e(K)) === v,
+                            disabled: l[d.disabledOptionKey]
                           }, () => [
                             a(e($), {
                               option: l,
                               selected: e(S)(T(e(k)), l),
-                              active: T(e(E)) === v,
+                              active: T(e(K)) === v,
+                              disabled: l[d.disabledOptionKey],
                               "name-key": t.optionNameKey,
                               "image-key": t.optionImageKey,
                               "icon-key": t.optionIconKey,
                               "icon-type": t.optionIconType
-                            }, null, 8, ["option", "selected", "active", "name-key", "image-key", "icon-key", "icon-type"])
+                            }, null, 8, ["option", "selected", "active", "disabled", "name-key", "image-key", "icon-key", "icon-type"])
                           ], !0)
-                        ], 8, Pe))), 128)) : d("", !0)
+                        ], 8, Re))), 128)) : r("", !0)
                       ], 16)
                     ], 16),
-                    t.multi ? (i(), n("div", ze, [
-                      y("div", Ke, [
+                    t.multi ? (i(), n("div", Pe, [
+                      y("div", ze, [
                         a(e(A), s(
                           {
                             ref_key: "clearAll",
@@ -271,7 +274,7 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                             color: "primary"
                           },
                           e(m)[e(c).ACTION_CLEAR_ALL],
-                          { onClick: e(P) }
+                          { onClick: e(R) }
                         ), {
                           default: u(() => [
                             g(" Clear all ")
@@ -309,9 +312,9 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                           _: 1
                         }, 16, ["onClick"])
                       ])
-                    ])) : d("", !0)
-                  ], 32)) : d("", !0)
-                ], 6)) : d("", !0)
+                    ])) : r("", !0)
+                  ], 32)) : r("", !0)
+                ], 6)) : r("", !0)
               ]),
               _: 3
             })
@@ -327,10 +330,10 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
               I(b.$slots, "dropdown-trigger", {}, () => [
                 y("div", {
                   ref_key: "buttonRef",
-                  ref: R
+                  ref: E
                 }, [
-                  e(z) ? (i(), n("div", Le, [
-                    (i(), me(ye(e(z)), {
+                  e(P) ? (i(), n("div", Le, [
+                    (i(), me(ye(e(P)), {
                       placeholder: t.placeholder,
                       open: e(f),
                       label: t.triggerLabel,
@@ -355,13 +358,13 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                       onKeydown: e(M),
                       onClick: ne
                     }, null, 40, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "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", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
-                  ])) : d("", !0),
-                  t.predefinedTrigger === e(p).ICON_BUTTON ? (i(), n("div", Be, [
+                  ])) : r("", !0),
+                  t.predefinedTrigger === e(p).ICON_BUTTON ? (i(), n("div", Oe, [
                     a(e(ge), {
                       onClick: o[0] || (o[0] = (l) => e(w)())
                     })
-                  ])) : d("", !0),
-                  t.predefinedTrigger === e(p).CHIP ? (i(), n("div", Ne, [
+                  ])) : r("", !0),
+                  t.predefinedTrigger === e(p).CHIP ? (i(), n("div", Be, [
                     a(e(he), {
                       open: e(f),
                       label: t.placeholder,
@@ -371,9 +374,9 @@ const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Be
                       "display-value": t.displayValue,
                       multi: t.multi,
                       onClick: o[1] || (o[1] = (l) => e(w)()),
-                      onClear: o[2] || (o[2] = (l) => e(P)())
+                      onClear: o[2] || (o[2] = (l) => e(R)())
                     }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
-                  ])) : d("", !0)
+                  ])) : r("", !0)
                 ], 512)
               ], !0)
             ], 2)

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

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

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

@@ -1374,6 +1374,7 @@ declare const DropdownTypes: () => (({
             optionImageKey: string;
             optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
             valueToCopy: string;
+            disabledOptionKey: string;
             fullWidth: boolean;
             optionsListWidth: string;
             statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -1426,10 +1427,7 @@ declare const DropdownTypes: () => (({
                 default: any;
             };
             options: {
-                type: import("vue").PropType<unknown[] | {
-                    id: string;
-                    text: string;
-                }[]>;
+                type: import("vue").PropType<unknown[]>;
                 required: true;
             };
             modelValue: {
@@ -1547,6 +1545,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            disabledOptionKey: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1565,7 +1567,7 @@ declare const DropdownTypes: () => (({
             "onUpdate:isOpen"?: (value: unknown) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "fullWidth" | "optionsListWidth" | "statusType">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "disabledOptionKey" | "fullWidth" | "optionsListWidth" | "statusType">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -1628,10 +1630,7 @@ declare const DropdownTypes: () => (({
                 default: any;
             };
             options: {
-                type: import("vue").PropType<unknown[] | {
-                    id: string;
-                    text: string;
-                }[]>;
+                type: import("vue").PropType<unknown[]>;
                 required: true;
             };
             modelValue: {
@@ -1749,6 +1748,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            disabledOptionKey: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -1815,6 +1818,7 @@ declare const DropdownTypes: () => (({
             optionImageKey: string;
             optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
             valueToCopy: string;
+            disabledOptionKey: string;
             fullWidth: boolean;
             optionsListWidth: string;
             statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -1887,10 +1891,7 @@ declare const DropdownTypes: () => (({
             default: any;
         };
         options: {
-            type: import("vue").PropType<unknown[] | {
-                id: string;
-                text: string;
-            }[]>;
+            type: import("vue").PropType<unknown[]>;
             required: true;
         };
         modelValue: {
@@ -2008,6 +2009,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<string>;
             default: any;
         };
+        disabledOptionKey: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         fullWidth: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -2082,10 +2087,7 @@ declare const DropdownTypes: () => (({
         default: any;
     };
     options: {
-        type: import("vue").PropType<unknown[] | {
-            id: string;
-            text: string;
-        }[]>;
+        type: import("vue").PropType<unknown[]>;
         required: true;
     };
     modelValue: {
@@ -2203,6 +2205,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<string>;
         default: any;
     };
+    disabledOptionKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     fullWidth: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -2269,6 +2275,7 @@ declare const DropdownTypes: () => (({
     optionImageKey: string;
     optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
     valueToCopy: string;
+    disabledOptionKey: string;
     fullWidth: boolean;
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -2283,6 +2290,7 @@ declare const DropdownTypes: () => (({
             option: unknown;
             selected: boolean;
             active: boolean;
+            disabled: any;
         }): any;
     };
 })))[];

package/index.d.ts

@@ -11449,6 +11449,7 @@ declare const _default: {
                 optionImageKey: string;
                 optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
                 valueToCopy: string;
+                disabledOptionKey: string;
                 fullWidth: boolean;
                 optionsListWidth: string;
                 statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -11501,10 +11502,7 @@ declare const _default: {
                     default: any;
                 };
                 options: {
-                    type: import("vue").PropType<unknown[] | {
-                        id: string;
-                        text: string;
-                    }[]>;
+                    type: import("vue").PropType<unknown[]>;
                     required: true;
                 };
                 modelValue: {
@@ -11622,6 +11620,10 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
+                disabledOptionKey: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 fullWidth: {
                     type: import("vue").PropType<boolean>;
                     default: boolean;
@@ -11640,7 +11642,7 @@ declare const _default: {
                 "onUpdate:isOpen"?: (value: unknown) => any;
                 onOpened?: () => any;
                 onClosed?: () => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "fullWidth" | "optionsListWidth" | "statusType">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "disabledOptionKey" | "fullWidth" | "optionsListWidth" | "statusType">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -11703,10 +11705,7 @@ declare const _default: {
                     default: any;
                 };
                 options: {
-                    type: import("vue").PropType<unknown[] | {
-                        id: string;
-                        text: string;
-                    }[]>;
+                    type: import("vue").PropType<unknown[]>;
                     required: true;
                 };
                 modelValue: {
@@ -11824,6 +11823,10 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
+                disabledOptionKey: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 fullWidth: {
                     type: import("vue").PropType<boolean>;
                     default: boolean;
@@ -11890,6 +11893,7 @@ declare const _default: {
                 optionImageKey: string;
                 optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
                 valueToCopy: string;
+                disabledOptionKey: string;
                 fullWidth: boolean;
                 optionsListWidth: string;
                 statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -11962,10 +11966,7 @@ declare const _default: {
                 default: any;
             };
             options: {
-                type: import("vue").PropType<unknown[] | {
-                    id: string;
-                    text: string;
-                }[]>;
+                type: import("vue").PropType<unknown[]>;
                 required: true;
             };
             modelValue: {
@@ -12083,6 +12084,10 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            disabledOptionKey: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -12157,10 +12162,7 @@ declare const _default: {
             default: any;
         };
         options: {
-            type: import("vue").PropType<unknown[] | {
-                id: string;
-                text: string;
-            }[]>;
+            type: import("vue").PropType<unknown[]>;
             required: true;
         };
         modelValue: {
@@ -12278,6 +12280,10 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: any;
         };
+        disabledOptionKey: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         fullWidth: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -12344,6 +12350,7 @@ declare const _default: {
         optionImageKey: string;
         optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
         valueToCopy: string;
+        disabledOptionKey: string;
         fullWidth: boolean;
         optionsListWidth: string;
         statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -12358,6 +12365,7 @@ declare const _default: {
                 option: unknown;
                 selected: boolean;
                 active: boolean;
+                disabled: any;
             }): any;
         };
     });
@@ -14805,6 +14813,7 @@ declare const _default: {
                 optionImageKey: string;
                 optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
                 valueToCopy: string;
+                disabledOptionKey: string;
                 fullWidth: boolean;
                 optionsListWidth: string;
                 statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -14857,10 +14866,7 @@ declare const _default: {
                     default: any;
                 };
                 options: {
-                    type: import("vue").PropType<unknown[] | {
-                        id: string;
-                        text: string;
-                    }[]>;
+                    type: import("vue").PropType<unknown[]>;
                     required: true;
                 };
                 modelValue: {
@@ -14978,6 +14984,10 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
+                disabledOptionKey: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 fullWidth: {
                     type: import("vue").PropType<boolean>;
                     default: boolean;
@@ -14996,7 +15006,7 @@ declare const _default: {
                 "onUpdate:isOpen"?: (value: unknown) => any;
                 onOpened?: () => any;
                 onClosed?: () => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "fullWidth" | "optionsListWidth" | "statusType">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "disabled" | "size" | "flip" | "mandatory" | "testId" | "container" | "placement" | "distance" | "popperClass" | "selected" | "modelValue" | "placeholder" | "multi" | "showSelectAll" | "defaultOpen" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "isOnTop" | "skidding" | "triggerLabel" | "triggerHelperText" | "triggerFeedbackText" | "triggerFeedbackVariant" | "triggerFeedbackShowIcon" | "predefinedTrigger" | "inlineSearch" | "inlineSearchPlaceholder" | "onSearch" | "noResultsText" | "searchAutoFocus" | "onClear" | "optionNameKey" | "optionIconKey" | "optionImageKey" | "optionIconType" | "valueToCopy" | "disabledOptionKey" | "fullWidth" | "optionsListWidth" | "statusType">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -15059,10 +15069,7 @@ declare const _default: {
                     default: any;
                 };
                 options: {
-                    type: import("vue").PropType<unknown[] | {
-                        id: string;
-                        text: string;
-                    }[]>;
+                    type: import("vue").PropType<unknown[]>;
                     required: true;
                 };
                 modelValue: {
@@ -15180,6 +15187,10 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
+                disabledOptionKey: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 fullWidth: {
                     type: import("vue").PropType<boolean>;
                     default: boolean;
@@ -15246,6 +15257,7 @@ declare const _default: {
                 optionImageKey: string;
                 optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
                 valueToCopy: string;
+                disabledOptionKey: string;
                 fullWidth: boolean;
                 optionsListWidth: string;
                 statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -15318,10 +15330,7 @@ declare const _default: {
                 default: any;
             };
             options: {
-                type: import("vue").PropType<unknown[] | {
-                    id: string;
-                    text: string;
-                }[]>;
+                type: import("vue").PropType<unknown[]>;
                 required: true;
             };
             modelValue: {
@@ -15439,6 +15448,10 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            disabledOptionKey: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             fullWidth: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -15513,10 +15526,7 @@ declare const _default: {
             default: any;
         };
         options: {
-            type: import("vue").PropType<unknown[] | {
-                id: string;
-                text: string;
-            }[]>;
+            type: import("vue").PropType<unknown[]>;
             required: true;
         };
         modelValue: {
@@ -15634,6 +15644,10 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: any;
         };
+        disabledOptionKey: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         fullWidth: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -15700,6 +15714,7 @@ declare const _default: {
         optionImageKey: string;
         optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test";
         valueToCopy: string;
+        disabledOptionKey: string;
         fullWidth: boolean;
         optionsListWidth: string;
         statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
@@ -15714,6 +15729,7 @@ declare const _default: {
                 option: unknown;
                 selected: boolean;
                 active: boolean;
+                disabled: any;
             }): any;
         };
     })))[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.3-rc.16",
+  "version": "2.1.3-rc.17",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_f0c4710f_lang.css

@@ -1 +0,0 @@
-.default-dropdown-wrapper[data-v-f0c4710f]{position:relative}.dropdown-trigger[data-v-f0c4710f]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-f0c4710f]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-f0c4710f]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-f0c4710f]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-f0c4710f]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.open[data-v-f0c4710f]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-f0c4710f]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-f0c4710f]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-f0c4710f]{padding:4px 6px;border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-f0c4710f]{padding:4px 6px;border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-f0c4710f]{padding:4px 6px;border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-f0c4710f]{color:var(--action-active)}.content[data-v-f0c4710f]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-f0c4710f]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-f0c4710f]{width:20px;height:20px;flex:none}.content .image img[data-v-f0c4710f]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-f0c4710f]{display:flex;color:var(--action-active)}.content .status-dot[data-v-f0c4710f]{padding-right:.25rem}.content .status-dot>div[data-v-f0c4710f]{position:relative;top:-1px}.dropdown-field-label[data-v-f0c4710f]{color:var(--text-primary)}.dropdown-field-help-text[data-v-f0c4710f]{margin-top:4px;position:absolute}

package/DropdownV4.vue_vue_type_style_index_0_scoped_78c1497e_lang.css

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