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

package/Chart.vue_vue_type_style_index_0_scoped_8f471697_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-8f471697]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px;width:100%}.header-wrapper[data-v-8f471697]{height:76px}.chart-content[data-v-8f471697]{width:100%}.chart-content.with-legend[data-v-8f471697]{width:calc(100% - 222px)}.chart-sidebar[data-v-8f471697]{border-left:1px solid var(--common-divider)}.chart[data-v-8f471697]{width:100%;height:312px;position:relative}.chart__canvas[data-v-8f471697]{width:100%;height:100%}.chart__tooltip[data-v-8f471697]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

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/FiltersPanelV4.vue_vue_type_style_index_0_scoped_111b200a_lang.css

@@ -0,0 +1 @@
+.filters-panel[data-v-111b200a]{display:flex;flex-wrap:wrap;gap:var(--spacing-50)}.filters-panel[data-v-111b200a] .dropdown{padding:0}

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
-import e from "./Chart.vue2.js";
-/* empty css            */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ea1e5c3e"]]);
+import o from "./Chart.vue2.js";
+/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_8f471697_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-8f471697"]]);
 export {
-  a as default
+  p as default
 };

package/components/chart/Chart.vue2.js

@@ -1,23 +1,23 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; import { defineComponent as X, ref as g, computed as i, onMounted as j, watch as C, nextTick as q, openBlock as d, createElementBlock as k, Fragment as R, createBlock as m, unref as u, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
-import { useVModel as Q } from "@vueuse/core";
-import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as ue } from "chart.js";
-import { HoverVerticalLine as ce } from "./plugins/HoverVerticalLine.js";
-import { formatValue as H, calcStepSize as fe } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as he, DEFAULT_MAX_VISIBLE as me, COLOR_PALETTE as ve, POINT_BORDER_COLOR as be, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.js";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_8f471697_lang.css"; import { defineComponent as j, ref as g, computed as i, onMounted as q, watch as C, nextTick as J, openBlock as d, createElementBlock as k, Fragment as R, createBlock as m, unref as u, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, normalizeClass as Q, createVNode as F, normalizeStyle as Y } from "vue";
+import { useVModel as _ } from "@vueuse/core";
+import { Chart as N, ArcElement as ee, LineElement as te, BarElement as ae, PointElement as oe, LineController as re, BarController as ie, PieController as le, ScatterController as ne, CategoryScale as se, LinearScale as de, Filler as ue, Tooltip as ce } from "chart.js";
+import { HoverVerticalLine as fe } from "./plugins/HoverVerticalLine.js";
+import { formatValue as H, calcStepSize as pe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as he, DEFAULT_MIN_VISIBLE as me, DEFAULT_MAX_VISIBLE as ve, COLOR_PALETTE as be, POINT_BORDER_COLOR as ye, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as z } from "./consts.js";
 import { ChartType as n } from "./types.js";
-import { useTooltipPosition as ye } from "./composables/useTooltipPosition.js";
-import ge from "./ChartTooltip.vue.js";
-import Ce from "./ChartLegend.vue.js";
-import ke from "./ChartHeader.vue.js";
-import { hexColorToRgba as Te } from "../../utils/color.js";
-import { useChartValues as Se } from "./composables/useChartValues.js";
-import Le from "./ChartLoader.vue.js";
-import xe from "../emptyState/v4/EmptyStateV4.vue.js";
-import Be from "./SettingsHeader.vue.js";
-const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = { class: "header-wrapper" }, Ee = { class: "chart" }, Re = {
+import { useTooltipPosition as ge } from "./composables/useTooltipPosition.js";
+import Ce from "./ChartTooltip.vue.js";
+import ke from "./ChartLegend.vue.js";
+import Te from "./ChartHeader.vue.js";
+import { hexColorToRgba as Se } from "../../utils/color.js";
+import { useChartValues as Le } from "./composables/useChartValues.js";
+import xe from "./ChartLoader.vue.js";
+import Be from "../emptyState/v4/EmptyStateV4.vue.js";
+import Ie from "./SettingsHeader.vue.js";
+const we = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee = { class: "chart" }, Re = {
   key: 0,
   class: "chart-sidebar"
-}, Xe = /* @__PURE__ */ X({
+}, je = /* @__PURE__ */ j({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -26,13 +26,13 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: pe },
+    tickCount: { default: he },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: "" },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: he },
-    maxVisible: { default: me },
+    minVisible: { default: me },
+    maxVisible: { default: ve },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
@@ -43,7 +43,6 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
   setup(a, { emit: T }) {
     const t = a;
     N.register(
-      Y,
       ee,
       te,
       ae,
@@ -55,18 +54,19 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       se,
       de,
       ue,
-      ce
+      ce,
+      fe
     );
-    const c = Q(t, "chartType", T), p = g(null);
+    const c = _(t, "chartType", T), p = g(null);
     let s = null;
     const S = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !S.value), b = () => {
       p.value && (s && s.destroy(), s = new N(p.value, B.value));
-    }, z = () => {
+    }, M = () => {
       s && (s.data.datasets = y.value, s.options = B.value.options, s.update());
     };
-    j(b), C(() => t.chartType, b), C(L, async (e) => {
-      e && (await q(), b());
-    }), C([() => t.visibleIds, () => t.dataSets], z);
+    q(b), C(() => t.chartType, b), C(L, async (e) => {
+      e && (await J(), b());
+    }), C([() => t.visibleIds, () => t.dataSets], M);
     const h = i(
       () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
     ), $ = i(
@@ -74,11 +74,11 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
     ), x = i(
       () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
     ), y = i(() => x.value.map((e, o) => {
-      const r = e.color || ve[o] || "#000000";
+      const r = e.color || be[o] || "#000000";
       return {
         ...e,
         fill: h.value ? "start" : void 0,
-        backgroundColor: Te(
+        backgroundColor: Se(
           r,
           t.chartType === n.StackedLine ? 10 : 70
         ),
@@ -118,7 +118,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               callbacks: {
                 footer: (e) => {
-                  const o = e.reduce((r, G) => r + (G.parsed.y || 0), 0);
+                  const o = e.reduce((r, X) => r + (X.parsed.y || 0), 0);
                   return ["Total", String(o)];
                 }
               }
@@ -146,7 +146,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: be
+              pointHoverBackgroundColor: ye
             },
             bar: {
               borderRadius: 4
@@ -173,7 +173,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               // grid lines
               grid: {
-                color: M,
+                color: z,
                 drawOnChartArea: !1,
                 drawTicks: !0,
                 drawBorder: !1,
@@ -199,7 +199,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               // grid lines
               grid: {
-                color: M,
+                color: z,
                 drawOnChartArea: !0,
                 drawTicks: !1
               }
@@ -213,7 +213,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       id: e.id,
       label: e.label,
       color: K.value[e.id] || null
-    }))), I = g(null), l = g(null), { position: w } = ye(
+    }))), I = g(null), l = g(null), { position: w } = ge(
       p,
       I,
       l
@@ -221,15 +221,15 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       left: `${w.value.left}px`,
       top: `${w.value.top}px`,
       opacity: l.value?.opacity || 0
-    })), { minValue: A, maxValue: _ } = Se({
+    })), { minValue: A, maxValue: G } = Le({
       parsingConfig: t.parsing,
       dataSets: x,
       isStacked: h
     }), E = i(
-      () => fe(A.value, _.value, t.tickCount)
+      () => pe(A.value, G.value, t.tickCount)
     );
     return (e, o) => (d(), k(R, null, [
-      a.withSettingsHeader ? (d(), m(Be, {
+      a.withSettingsHeader ? (d(), m(Ie, {
         key: 0,
         "chart-type": u(c),
         "onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
@@ -243,11 +243,13 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : v("", !0),
-      f("div", Ie, [
+      f("div", we, [
         u(L) ? (d(), k(R, { key: 0 }, [
-          f("section", we, [
+          f("section", {
+            class: Q(["chart-content", [{ "with-legend": !a.hideLegend }]])
+          }, [
             f("div", Ae, [
-              F(ke, {
+              F(Te, {
                 "chart-type": u(c),
                 "onUpdate:chart-type": o[1] || (o[1] = (r) => V(c) ? c.value = r : null),
                 "with-settings-header": a.withSettingsHeader,
@@ -266,9 +268,9 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
                 ref_key: "tooltipRef",
                 ref: I,
                 class: "chart__tooltip",
-                style: J(u(Z))
+                style: Y(u(Z))
               }, [
-                l.value ? (d(), m(ge, {
+                l.value ? (d(), m(Ce, {
                   key: 0,
                   title: String(l.value.title),
                   "data-points": l.value.dataPoints,
@@ -279,15 +281,15 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
                 }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : v("", !0)
               ], 4)
             ])
-          ]),
+          ], 2),
           a.hideLegend ? v("", !0) : (d(), k("section", Re, [
-            F(Ce, {
+            F(ke, {
               items: u(W),
               "visible-ids": a.visibleIds,
               "onUpdate:visibleIds": o[2] || (o[2] = (r) => T("update:visibleIds", r))
             }, null, 8, ["items", "visible-ids"])
           ]))
-        ], 64)) : a.loading ? (d(), m(Le, { key: 1 })) : u(S) ? (d(), m(u(xe), {
+        ], 64)) : a.loading ? (d(), m(xe, { key: 1 })) : u(S) ? (d(), m(u(Be), {
           key: 2,
           title: a.noDataTitle,
           subtitle: a.noDataSubtitle,
@@ -298,5 +300,5 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
   }
 });
 export {
-  Xe as default
+  je as default
 };

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/components/filtersPanel/v4/FiltersPanelV4.vue.js

@@ -1,7 +1,7 @@
 import e from "./FiltersPanelV4.vue2.js";
 /* empty css                     */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-39061862"]]);
+// import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_111b200a_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-111b200a"]]);
 export {
-  p as default
+  a as default
 };

package/components/filtersPanel/v4/FiltersPanelV4.vue2.js

@@ -1,23 +1,22 @@
- import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css"; import { defineComponent as a, openBlock as t, createElementBlock as r, Fragment as d, renderList as i, renderSlot as l, normalizeProps as c, guardReactiveProps as p } from "vue";
-const u = { class: "filters-panel" }, m = ["data-testid"], h = /* @__PURE__ */ a({
+ import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_111b200a_lang.css"; import { defineComponent as d, openBlock as t, createElementBlock as s, Fragment as a, renderList as i, renderSlot as l, normalizeProps as c, guardReactiveProps as u } from "vue";
+const p = { class: "filters-panel" }, m = ["data-testid"], v = /* @__PURE__ */ d({
   __name: "FiltersPanelV4",
   props: {
     filters: null,
     testId: { default: "" }
   },
-  setup(s) {
-    const n = s;
-    return (o, f) => (t(), r("div", u, [
-      (t(!0), r(d, null, i(s.filters, (e) => (t(), r("div", {
+  setup(r) {
+    const n = r;
+    return (o, _) => (t(), s("div", p, [
+      (t(!0), s(a, null, i(r.filters, (e) => (t(), s("div", {
         key: e.id,
-        class: "filter-chip-wrapper",
         "data-testid": `${n.testId}-filter-${e.id}`
       }, [
-        l(o.$slots, e.id, c(p({ filter: e })), void 0, !0)
+        l(o.$slots, e.id, c(u({ filter: e })), void 0, !0)
       ], 8, m))), 128))
     ]));
   }
 });
 export {
-  h as default
+  v as default
 };

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/package.json

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

package/Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-ea1e5c3e]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px}.header-wrapper[data-v-ea1e5c3e]{height:76px}.chart-content[data-v-ea1e5c3e]{flex:1}.chart-sidebar[data-v-ea1e5c3e]{border-left:1px solid var(--common-divider)}.chart[data-v-ea1e5c3e]{width:100%;height:312px;position:relative}.chart__canvas[data-v-ea1e5c3e]{width:100%;height:100%}.chart__tooltip[data-v-ea1e5c3e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

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)}

package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css

@@ -1 +0,0 @@
-.filters-panel[data-v-39061862]{display:flex}.filters-panel[data-v-39061862] .dropdown{padding:0}.filter-chip-wrapper[data-v-39061862]{margin-right:var(--spacing-50)}