@ironsource/shared-ui 2.1.11-rc.23 → 2.1.11-rc.24

package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_3d7ef976_lang.css

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

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

@@ -14,6 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     minCharsToStart?: number;
     isOpen?: boolean;
+    searchQuery?: string;
 }>, {
     label: string;
     testId: string;
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     minCharsToStart: number;
     isOpen: boolean;
+    searchQuery: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedCondition": (value: SelectedCondition) => void;
     "update:appliedSelections": (value: unknown) => void;
@@ -36,6 +38,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     minCharsToStart?: number;
     isOpen?: boolean;
+    searchQuery?: string;
 }>, {
     label: string;
     testId: string;
@@ -43,6 +46,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     minCharsToStart: number;
     isOpen: boolean;
+    searchQuery: string;
 }>>> & {
     onClear?: () => any;
     "onUpdate:selectedCondition"?: (value: SelectedCondition) => any;
@@ -54,6 +58,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     comparingKey: string;
     minCharsToStart: number;
+    searchQuery: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,7 +1,7 @@
 import o from "./ConditionalDropdown.vue2.js";
 /* empty css                          */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_93545ce0_lang.css"; //*');
-const n = /* @__PURE__ */ e(o, [["__scopeId", "data-v-93545ce0"]]);
+// import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_3d7ef976_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3d7ef976"]]);
 export {
-  n as default
+  p as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_93545ce0_lang.css"; import { defineComponent as B, computed as f, ref as s, watch as b, openBlock as k, createBlock as E, unref as u, withCtx as m, createVNode as h, mergeProps as A, createElementVNode as F, isRef as U, createElementBlock as $, createTextVNode as z, toDisplayString as M, createCommentVNode as P } from "vue";
+ import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_3d7ef976_lang.css"; import { defineComponent as Q, computed as f, ref as u, watch as C, onMounted as B, openBlock as k, createBlock as E, unref as s, withCtx as m, createVNode as h, mergeProps as A, createElementVNode as F, isRef as M, createElementBlock as U, createTextVNode as $, toDisplayString as z, createCommentVNode as P } from "vue";
 import w from "./DropdownV4.vue.js";
 import "./DefaultDropdownTrigger.vue.js";
 import "./IconButtonDropdownTrigger.vue.js";
@@ -10,12 +10,12 @@ import "./TreeDropdown.vue.js";
 import "./OptionV4.vue.js";
 import "./ConditionalDropdown.vue.js";
 import L from "../../search/v4/SearchV4.vue.js";
-import Q from "../../typography/v4/Typography.vue.js";
-import { useDebounceFn as R } from "@vueuse/core";
-const j = { class: "conditional-container" }, q = {
+import R from "../../typography/v4/Typography.vue.js";
+import { useDebounceFn as j } from "@vueuse/core";
+const q = { class: "conditional-container" }, G = {
   key: 0,
   class: "custom-list-area"
-}, se = /* @__PURE__ */ B({
+}, se = /* @__PURE__ */ Q({
   __name: "ConditionalDropdown",
   props: {
     selectedCondition: null,
@@ -27,58 +27,59 @@ const j = { class: "conditional-container" }, q = {
     fetchFnCallback: null,
     optionNameKey: { default: "name" },
     minCharsToStart: { default: 3 },
-    isOpen: { type: Boolean, default: !1 }
+    isOpen: { type: Boolean, default: !1 },
+    searchQuery: { default: "" }
   },
   emits: ["update:selectedCondition", "update:appliedSelections", "clear"],
   setup(c, { emit: y }) {
-    const t = c, g = f({
-      get: () => t.appliedSelections,
+    const e = c, g = f({
+      get: () => e.appliedSelections,
       set: (o) => {
         y("update:appliedSelections", o);
       }
     }), a = f({
-      get: () => t.selectedCondition || t.conditionalOptions[0],
+      get: () => e.selectedCondition || e.conditionalOptions[0],
       set: (o) => {
         y("update:selectedCondition", o);
       }
-    }), d = s(!0), e = s([]), p = s([]), C = s(!0), r = s(!1), l = s(""), N = s(""), v = s(t.label), D = f(() => (!l.value || l.value?.length < t.minCharsToStart) && !e.value.length ? `Enter at least ${t.minCharsToStart} keywords to begin` : "No results found"), T = f(() => {
+    }), d = u(!0), l = u([]), p = u([]), S = u(!0), r = u(!1), t = u(e.searchQuery), N = u(""), v = u(e.label), D = f(() => (!t.value || t.value?.length < e.minCharsToStart) && !l.value.length ? `Enter at least ${e.minCharsToStart} keywords to begin` : "No results found"), T = f(() => {
       const o = d.value ? 2.5 : 4;
-      return e.value.length ? null : o;
-    }), K = R(async (o) => {
+      return l.value.length ? null : o;
+    }), K = j(async (o) => {
       try {
         r.value = !0;
-        const i = await t.fetchFnCallback(o);
-        r.value = !1, e.value = i, O();
+        const i = await e.fetchFnCallback(o);
+        r.value = !1, l.value = i, O();
       } catch (i) {
         console.error("Error fetching data:", i);
       }
-    }, 400), S = (o) => {
-      o.length >= t.minCharsToStart ? K(o) : e.value = [];
+    }, 400), b = (o) => {
+      o.length >= e.minCharsToStart ? K(o) : l.value = [];
     }, O = () => {
-      l.value && e.value.length && !r.value && !a.value.multi ? e.value[0].conditionalOptions ? e.value[0] = {
-        name: l.value,
+      t.value && l.value.length && !r.value && !a.value.multi ? l.value[0].conditionalOptions ? l.value[0] = {
+        name: t.value,
         conditionalOptions: !0,
         conditionalName: a.value.label,
-        [t.comparingKey]: l.value
-      } : e.value = [
+        [e.comparingKey]: t.value
+      } : l.value = [
         {
-          name: l.value,
+          name: t.value,
           conditionalOptions: !0,
           conditionalName: a.value.label,
-          [t.comparingKey]: l.value
+          [e.comparingKey]: t.value
         },
-        ...e.value
-      ] : e.value.length && e.value[0].conditionalOptions && e.value.shift();
+        ...l.value
+      ] : l.value.length && l.value[0].conditionalOptions && l.value.shift();
     };
-    b(l, () => {
-      S(l.value);
-    }), b(a, () => {
+    C(t, () => {
+      b(t.value);
+    }), C(a, () => {
       O();
     });
     const V = () => {
-      N.value = l.value, v.value = `${t.label} ${a.value.label.toLowerCase()}`, g.value = d.value ? [...p.value] : { ...p.value }, C.value = d.value;
+      N.value = t.value, v.value = `${e.label} ${a.value.label.toLowerCase()}`, g.value = d.value ? [...p.value] : { ...p.value }, S.value = d.value;
     };
-    b(a, () => {
+    C(a, () => {
       a.value.multi ? (r.value = !0, p.value = [], setTimeout(() => {
         r.value = !1, d.value = !0;
       }, 100)) : setTimeout(() => {
@@ -86,41 +87,43 @@ const j = { class: "conditional-container" }, q = {
       }, 100);
     });
     const x = () => {
-      p.value = [], g.value = [], a.value = null, v.value = t.label, l.value = "", y("clear");
+      p.value = [], g.value = [], a.value = null, v.value = e.label, t.value = "", y("clear");
     };
-    return (o, i) => (k(), E(u(w), {
+    return B(() => {
+      e.searchQuery && b(e.searchQuery);
+    }), (o, i) => (k(), E(s(w), {
       selected: p.value,
       "onUpdate:selected": i[2] || (i[2] = (n) => p.value = n),
       "predefined-trigger": "chip",
       "display-value": (n) => n?.[c.optionNameKey],
       multi: d.value,
-      options: e.value,
+      options: l.value,
       placeholder: v.value,
       "search-placeholder": "Search",
       "option-name-key": c.optionNameKey,
       "with-conditions": "",
       "inline-search": "",
-      "custom-number-of-displayed-options": u(T),
+      "custom-number-of-displayed-options": s(T),
       "options-list-width": "330px",
       loading: r.value,
       "comparing-key": c.comparingKey,
       "is-open": c.isOpen,
-      onOnsearch: S,
+      onOnsearch: b,
       onApply: V
     }, {
       "dropdown-trigger": m(({ defaultTriggerProps: n }) => [
-        h(u(I), A(n, {
+        h(s(I), A(n, {
           label: v.value,
-          "selected-option": u(g),
-          multi: C.value,
+          "selected-option": s(g),
+          multi: S.value,
           onClear: x
         }), null, 16, ["label", "selected-option", "multi"])
       ]),
       "dropdown-conditions": m(() => [
-        F("div", j, [
-          h(u(w), {
-            selected: u(a),
-            "onUpdate:selected": i[0] || (i[0] = (n) => U(a) ? a.value = n : null),
+        F("div", q, [
+          h(s(w), {
+            selected: s(a),
+            "onUpdate:selected": i[0] || (i[0] = (n) => M(a) ? a.value = n : null),
             options: c.conditionalOptions,
             "option-name-key": "label",
             "display-value": (n) => n?.label,
@@ -130,9 +133,9 @@ const j = { class: "conditional-container" }, q = {
         ])
       ]),
       "inline-search": m(() => [
-        h(u(L), {
-          modelValue: l.value,
-          "onUpdate:modelValue": i[1] || (i[1] = (n) => l.value = n),
+        h(s(L), {
+          modelValue: t.value,
+          "onUpdate:modelValue": i[1] || (i[1] = (n) => t.value = n),
           class: "inline-search",
           placeholder: "Search",
           variant: "transparent",
@@ -141,10 +144,10 @@ const j = { class: "conditional-container" }, q = {
         }, null, 8, ["modelValue"])
       ]),
       "custom-list-area": m(() => [
-        !e.value.length && !r.value ? (k(), $("div", q, [
-          h(Q, { variant: "body1" }, {
+        !l.value.length && !r.value ? (k(), U("div", G, [
+          h(R, { variant: "body1" }, {
             default: m(() => [
-              z(M(u(D)), 1)
+              $(z(s(D)), 1)
             ]),
             _: 1
           })

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

@@ -3544,6 +3544,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<number>;
         default: number;
     };
+    searchQuery: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedCondition": (value: {
         label: string;
@@ -3604,6 +3608,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<number>;
         default: number;
     };
+    searchQuery: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onClear?: () => any;
     "onUpdate:selectedCondition"?: (value: {
@@ -3619,5 +3627,6 @@ declare const DropdownTypes: () => (({
     optionNameKey: string;
     comparingKey: string;
     minCharsToStart: number;
+    searchQuery: string;
 }>)[];
 export { Dropdown, DefaultDropdownTrigger, IconButtonDropdownTrigger, ChipDropdownTrigger, ButtonDropdownTrigger, ButtonFilterDropdownTrigger, AppDropdownTrigger, DropdownTypes, Option, TreeDropdown, ConditionalDropdown, };

package/index.d.ts

@@ -22242,6 +22242,10 @@ declare const _default: {
             type: import("vue").PropType<number>;
             default: number;
         };
+        searchQuery: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         "update:selectedCondition": (value: {
             label: string;
@@ -22302,6 +22306,10 @@ declare const _default: {
             type: import("vue").PropType<number>;
             default: number;
         };
+        searchQuery: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
     }>> & {
         onClear?: () => any;
         "onUpdate:selectedCondition"?: (value: {
@@ -22317,6 +22325,7 @@ declare const _default: {
         optionNameKey: string;
         comparingKey: string;
         minCharsToStart: number;
+        searchQuery: string;
     }>)[];
     Option: {
         new (...args: any[]): {
@@ -23319,6 +23328,10 @@ declare const _default: {
             type: import("vue").PropType<number>;
             default: number;
         };
+        searchQuery: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         "update:selectedCondition": (value: {
             label: string;
@@ -23379,6 +23392,10 @@ declare const _default: {
             type: import("vue").PropType<number>;
             default: number;
         };
+        searchQuery: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
     }>> & {
         onClear?: () => any;
         "onUpdate:selectedCondition"?: (value: {
@@ -23394,6 +23411,7 @@ declare const _default: {
         optionNameKey: string;
         comparingKey: string;
         minCharsToStart: number;
+        searchQuery: string;
     }>;
     Label: {
         new (...args: any[]): {

package/index.js

@@ -1,4 +1,4 @@
-import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
+import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_lang.css';
 import { AppTriggerTypes as ro } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as po } from "./components/menuItem/index.js";

package/package.json

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

package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_93545ce0_lang.css

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