@ironsource/shared-ui 2.2.0-rc.16 → 2.2.0-rc.18

package/ColumnPicker.vue_vue_type_style_index_0_scoped_d59af062_lang.css

@@ -0,0 +1 @@
+.column-picker[data-v-d59af062]{width:37.375rem;border-radius:var(--border-radius-lg);background:var(--background-modal-elevation)}.content[data-v-d59af062]{min-height:18.75rem;display:grid;grid-template-columns:1fr 1fr}.selected-list-wrapper[data-v-d59af062]{padding:.25rem 1rem 1rem}.scrollable-list[data-v-d59af062]{overflow-y:auto;max-height:24.625rem}.search-wrapper[data-v-d59af062]{height:3rem;padding:1rem 1rem .25rem}.options-list-wrapper[data-v-d59af062]{border-right:1px solid var(--common-divider)}.options-list[data-v-d59af062]{margin:0;list-style:none;padding:.3125rem .75rem}.options-list__item[data-v-d59af062]{margin-bottom:.5rem}.options-list[data-v-d59af062] .item-container{margin-bottom:1px;min-height:1.9375rem}.selected-list-header[data-v-d59af062]{height:3rem;padding:.25rem 1rem 0;display:flex;justify-content:space-between;align-items:center}.group-name[data-v-d59af062]{color:var(--text-secondary)}.inline-group[data-v-d59af062]{padding:.25rem .5rem}.no-result-container[data-v-d59af062]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}

package/components/columnPicker/ColumnPicker.vue.d.ts

@@ -34,6 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: unknown[]) => void;
+    trackUserActivity: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     selected: unknown[];
     options: Record<string, unknown>[];
@@ -70,6 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     testId: string;
 }>>> & {
     "onUpdate:selected"?: (value: unknown[]) => any;
+    onTrackUserActivity?: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => any;
 }, {
     testId: string;
     selected: unknown[];

package/components/columnPicker/ColumnPicker.vue.js

@@ -1,7 +1,7 @@
 import o from "./ColumnPicker.vue2.js";
 /* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ColumnPicker.vue_vue_type_style_index_0_scoped_01c4e08f_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-01c4e08f"]]);
+// import "../../ColumnPicker.vue_vue_type_style_index_0_scoped_d59af062_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-d59af062"]]);
 export {
-  t as default
+  c as default
 };

package/components/columnPicker/ColumnPicker.vue2.js

@@ -1,5 +1,5 @@
- import "../../ColumnPicker.vue_vue_type_style_index_0_scoped_01c4e08f_lang.css"; import { defineComponent as ie, ref as K, watch as ne, computed as c, provide as se, openBlock as d, createElementBlock as m, Fragment as S, renderSlot as oe, createVNode as r, unref as s, withCtx as p, createElementVNode as u, mergeProps as ae, renderList as R, withModifiers as U, createTextVNode as k, toDisplayString as V, withDirectives as de, createBlock as W, vShow as re, createCommentVNode as q, isRef as ue } from "vue";
-import ce from "./OptionChip.vue.js";
+ import "../../ColumnPicker.vue_vue_type_style_index_0_scoped_d59af062_lang.css"; import { defineComponent as re, ref as c, watch as H, computed as m, provide as ue, openBlock as d, createElementBlock as f, Fragment as x, renderSlot as ce, createVNode as r, unref as n, withCtx as p, createElementVNode as u, mergeProps as me, renderList as P, withModifiers as J, createTextVNode as T, toDisplayString as A, withDirectives as fe, createBlock as X, vShow as pe, createCommentVNode as Y, isRef as ve } from "vue";
+import ye from "./OptionChip.vue.js";
 import "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
@@ -8,29 +8,29 @@ import "../dropdown/v4/AppDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../dropdown/v4/TreeDropdown.vue.js";
-import Q from "../dropdown/v4/OptionV4.vue.js";
+import Z from "../dropdown/v4/OptionV4.vue.js";
 import "../dropdown/v4/ConditionalDropdown.vue.js";
-import { DropdownContext as me } from "../dropdown/common/DropdownContext.js";
-import w from "../typography/v4/Typography.vue.js";
-import pe from "../dialog/v4/DialogV4.vue.js";
-import fe from "../sortableList/SortableList.vue.js";
-import ye from "../link/Link.vue.js";
-import ve from "../search/v4/SearchV4.vue.js";
-import { matchString as he } from "../../utils/search.js";
+import { DropdownContext as he } from "../dropdown/common/DropdownContext.js";
+import L from "../typography/v4/Typography.vue.js";
+import ge from "../dialog/v4/DialogV4.vue.js";
+import ke from "../sortableList/SortableList.vue.js";
+import Se from "../link/Link.vue.js";
+import Ke from "../search/v4/SearchV4.vue.js";
+import { matchString as Ce } from "../../utils/search.js";
 import "../button/v4/ButtonV4.vue.js";
-import ge from "../button/v4/IconButtonV4.vue.js";
+import be from "../button/v4/IconButtonV4.vue.js";
 import "../button/v4/ButtonGroup.vue.js";
 import "../button/v4/ToggleButtonGroupAB.vue.js";
-import { useTestIdAttrs as Ke } from "../../utils/testIds.js";
-import { ColumnPickerTestIdModifiers as B } from "../../testids/index.js";
-import Se from "./RemoveButton.vue.js";
-const ke = { class: "content" }, be = { class: "options-list-wrapper" }, Ce = { class: "search-wrapper" }, xe = { class: "options-list scrollable-list" }, Te = {
+import { useTestIdAttrs as xe } from "../../utils/testIds.js";
+import { ColumnPickerTestIdModifiers as F } from "../../testids/index.js";
+import Te from "./RemoveButton.vue.js";
+const Ie = { class: "content" }, Oe = { class: "options-list-wrapper" }, Re = { class: "search-wrapper" }, Ve = { class: "options-list scrollable-list" }, we = {
   key: 0,
   class: "inline-group"
-}, Ie = ["onClick"], Oe = {
+}, Be = ["onClick"], De = {
   key: 0,
   class: "no-result-container"
-}, Re = { class: "selected-list-header" }, Ve = { class: "selected-list-wrapper scrollable-list" }, lt = /* @__PURE__ */ ie({
+}, Ge = { class: "selected-list-header" }, Pe = { class: "selected-list-wrapper scrollable-list" }, ot = /* @__PURE__ */ re({
   __name: "ColumnPicker",
   props: {
     selected: { default: () => [] },
@@ -50,87 +50,107 @@ const ke = { class: "content" }, be = { class: "options-list-wrapper" }, Ce = {
     appendToBody: { type: Boolean, default: !0 },
     testId: { default: "" }
   },
-  emits: ["update:selected"],
-  setup(n, { emit: j }) {
-    const t = n, a = K([]), f = K([]), v = K(""), y = K(!1), G = () => {
-      t.selected?.length ? a.value = [...t.selected] : t.defaultSelection?.length ? a.value = [...t.defaultSelection] : a.value = [];
-    }, b = () => {
-      y.value = !1, f.value = [], v.value = "", G();
+  emits: ["update:selected", "trackUserActivity"],
+  setup(s, { emit: I }) {
+    const t = s, o = c([]), v = c([]), h = c(""), y = c(!1), k = c(!1), S = c(!1), K = c(!1), C = c(!1), $ = () => {
+      t.selected?.length ? o.value = [...t.selected] : t.defaultSelection?.length ? o.value = [...t.defaultSelection] : o.value = [];
+    }, O = (e = !0) => {
+      y.value = !1, v.value = [], h.value = "", $(), e && I(
+        "trackUserActivity",
+        k.value,
+        C.value,
+        S.value,
+        K.value,
+        "Cancel"
+      ), oe();
     };
-    ne(
+    H(
       [() => t.selected, () => t.defaultSelection],
       () => {
-        G();
+        $();
       },
       {
         immediate: !0
       }
     );
-    const P = () => {
+    const E = () => {
       y.value = !y.value;
-    }, C = c({
+    }, R = m({
       get() {
-        return a.value.map((e) => {
-          const i = Z(e) ? A(e)?.[t.displayKey] + " " : "";
+        return o.value.map((e) => {
+          const l = ie(e) ? W(e)?.[t.displayKey] + " " : "";
           return {
             id: e[t.idKey],
-            displayText: i + e[t.displayKey],
-            isDisabled: I(e)
+            displayText: l + e[t.displayKey],
+            isDisabled: B(e)
           };
         });
       },
       set(e) {
-        const i = e.map((l) => l.id);
-        a.value = i.map(
-          (l) => a.value.find((o) => o[t.idKey] === l)
+        const l = e.map((i) => i.id);
+        o.value = l.map(
+          (i) => o.value.find((a) => a[t.idKey] === i)
         );
       }
-    }), x = c(
-      () => a.value?.length <= t.minSelections
-    ), T = c(() => {
+    }), V = m(
+      () => o.value?.length <= t.minSelections
+    ), w = m(() => {
       if (!t.minSelections)
         return "";
-      const e = t.minSelections, i = t.minSelectionsTooltipMessage;
-      return i ? i.replace("%count%", e.toString()) : "";
-    }), D = (e) => g(e) && x.value, I = (e) => e[t.disabledKey] || D(e), g = (e) => a.value.some(
-      (i) => i[t.idKey] === e[t.idKey]
-    ), H = (e) => {
-      g(e) ? L(e[t.idKey]) : J(e);
-    }, O = (e) => {
-      t.disabledKey && e[t.disabledKey] || H(e);
-    }, J = (e) => {
-      a.value.push(e);
-    }, L = (e) => {
-      a.value = a.value.filter(
-        (i) => i[t.idKey] !== e
+      const e = t.minSelections, l = t.minSelectionsTooltipMessage;
+      return l ? l.replace("%count%", e.toString()) : "";
+    }), M = (e) => b(e) && V.value, B = (e) => e[t.disabledKey] || M(e), b = (e) => o.value.some(
+      (l) => l[t.idKey] === e[t.idKey]
+    ), _ = (e) => {
+      b(e) ? U(e[t.idKey]) : ee(e);
+    }, D = (e) => {
+      t.disabledKey && e[t.disabledKey] || _(e);
+    }, ee = (e) => {
+      o.value.push(e);
+    }, U = (e) => {
+      o.value = o.value.filter(
+        (l) => l[t.idKey] !== e
       );
-    }, F = c(() => {
+    }, N = m(() => {
       if (!t.defaultSelection?.length)
         return !1;
-      const e = a.value.map((l) => l[t.idKey]), i = t.defaultSelection.map((l) => l[t.idKey]);
-      return e.length !== i.length ? !0 : !i.every((l) => e.includes(l));
-    }), X = () => {
-      F.value && (a.value = [...t.defaultSelection]);
-    }, $ = (e) => E.value ? !0 : !f.value.includes(e), Y = (e) => t.inlineGroupIds?.includes(e), A = (e) => t.options.find(
-      (i) => h(i).map((l) => l[t.idKey]).includes(e[t.idKey])
-    ), Z = (e) => {
-      const i = A(e);
-      return i ? t.inlineGroupIds?.includes(i[t.idKey]) : !1;
-    }, M = (e) => {
-      f.value.includes(e) ? f.value = f.value.filter(
-        (i) => i !== e
-      ) : f.value.push(e);
-    }, h = (e) => e[t.childrenKey] || [], _ = c(() => a.value.length), N = c(() => v.value?.trim()), E = c(() => !!N.value), z = c(() => E.value ? t.options.map((i) => ({
-      ...i,
-      [t.childrenKey]: h(i).filter(
-        (l) => he(l[t.displayKey], N.value)
+      const e = o.value.map((i) => i[t.idKey]), l = t.defaultSelection.map((i) => i[t.idKey]);
+      return e.length !== l.length ? !0 : !l.every((i) => e.includes(i));
+    }), te = () => {
+      N.value && (o.value = [...t.defaultSelection]), k.value = !0;
+    }, z = (e) => Q.value ? !0 : !v.value.includes(e), le = (e) => t.inlineGroupIds?.includes(e), W = (e) => t.options.find(
+      (l) => g(l).map((i) => i[t.idKey]).includes(e[t.idKey])
+    ), ie = (e) => {
+      const l = W(e);
+      return l ? t.inlineGroupIds?.includes(l[t.idKey]) : !1;
+    }, q = (e) => {
+      v.value.includes(e) ? (v.value = v.value.filter(
+        (l) => l !== e
+      ), S.value = !0) : (v.value.push(e), K.value = !0);
+    }, g = (e) => e[t.childrenKey] || [], se = m(() => o.value.length), G = m(() => h.value?.trim()), Q = m(() => !!G.value), j = m(() => Q.value ? t.options.map((l) => ({
+      ...l,
+      [t.childrenKey]: g(l).filter(
+        (i) => Ce(i[t.displayKey], G.value)
       )
     })).filter(
-      (i) => h(i).length > 0
-    ) : t.options), ee = Ke(t.testId, B), te = () => {
-      j("update:selected", a.value), b();
+      (l) => g(l).length > 0
+    ) : t.options), ne = xe(t.testId, F), ae = () => {
+      I("update:selected", o.value), I(
+        "trackUserActivity",
+        k.value,
+        C.value,
+        S.value,
+        K.value,
+        "Save"
+      ), O(!1);
     };
-    return se(me, {
+    H(G, () => {
+      C.value = !0;
+    });
+    const oe = () => {
+      k.value = !1, S.value = !1, K.value = !1, C.value = !1;
+    };
+    return ue(he, {
       activeIndex: null,
       activeOption: null,
       clearSelection: () => {
@@ -151,8 +171,8 @@ const ke = { class: "content" }, be = { class: "options-list-wrapper" }, Ce = {
       toggle: () => {
       },
       placeholder: "",
-      select: O,
-      query: v,
+      select: D,
+      query: h,
       selectedValue: null,
       goToOption: () => {
       },
@@ -162,103 +182,103 @@ const ke = { class: "content" }, be = { class: "options-list-wrapper" }, Ce = {
       },
       unRegisterOption: () => {
       }
-    }), (e, i) => (d(), m(S, null, [
-      oe(e.$slots, "trigger", {
-        triggerProps: { onClick: P }
+    }), (e, l) => (d(), f(x, null, [
+      ce(e.$slots, "trigger", {
+        triggerProps: { onClick: E }
       }, () => [
-        r(s(ge), {
+        r(n(be), {
           "icon-name": "layout",
           variant: "outlined",
-          "test-id": `${n.testId}-${s(B).TRIGGER}`,
-          onClick: P
+          "test-id": `${s.testId}-${n(F).TRIGGER}`,
+          onClick: E
         }, null, 8, ["test-id"])
       ], !0),
-      r(s(pe), {
+      r(n(ge), {
         modelValue: y.value,
-        "onUpdate:modelValue": i[2] || (i[2] = (l) => y.value = l),
-        title: n.headerText,
+        "onUpdate:modelValue": l[2] || (l[2] = (i) => y.value = i),
+        title: s.headerText,
         "no-padding": "",
         "save-button-label": "Save view",
         "close-on-click-outside": "",
-        "append-to-body": n.appendToBody,
-        "test-id": n.testId,
-        onSave: te,
-        onClose: b,
-        onCancel: b
+        "append-to-body": s.appendToBody,
+        "test-id": s.testId,
+        onSave: ae,
+        onClose: l[3] || (l[3] = () => O),
+        onCancel: O
       }, {
         default: p(() => [
-          u("div", ae({ class: "column-picker" }, s(ee)[s(B).WRAPPER]), [
-            u("div", ke, [
-              u("div", be, [
-                u("header", Ce, [
-                  r(s(ve), {
-                    modelValue: v.value,
-                    "onUpdate:modelValue": i[0] || (i[0] = (l) => v.value = l),
-                    placeholder: n.searchPlaceholder,
+          u("div", me({ class: "column-picker" }, n(ne)[n(F).WRAPPER]), [
+            u("div", Ie, [
+              u("div", Oe, [
+                u("header", Re, [
+                  r(n(Ke), {
+                    modelValue: h.value,
+                    "onUpdate:modelValue": l[0] || (l[0] = (i) => h.value = i),
+                    placeholder: s.searchPlaceholder,
                     variant: "transparent",
                     size: "md",
-                    "auto-focus": n.searchAutoFocus,
-                    "test-id": n.testId
+                    "auto-focus": s.searchAutoFocus,
+                    "test-id": s.testId
                   }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id"])
                 ]),
-                u("ul", xe, [
-                  (d(!0), m(S, null, R(s(z), (l) => (d(), m("li", {
-                    key: String(l[n.idKey]),
+                u("ul", Ve, [
+                  (d(!0), f(x, null, P(n(j), (i) => (d(), f("li", {
+                    key: String(i[s.idKey]),
                     class: "options-list__item"
                   }, [
-                    r(s(Q), {
-                      option: l,
+                    r(n(Z), {
+                      option: i,
                       "tree-main-option": "",
-                      "tree-main-option-expanded": $(l[n.idKey]),
-                      onClick: U((o) => M(l[n.idKey]), ["stop"]),
-                      onToggleTreeCollapse: (o) => M(l[n.idKey])
+                      "tree-main-option-expanded": z(i[s.idKey]),
+                      onClick: J((a) => q(i[s.idKey]), ["stop"]),
+                      onToggleTreeCollapse: (a) => q(i[s.idKey])
                     }, {
                       default: p(() => [
-                        r(s(w), {
+                        r(n(L), {
                           variant: "h5",
                           class: "group-name"
                         }, {
                           default: p(() => [
-                            k(V(l[n.displayKey]), 1)
+                            T(A(i[s.displayKey]), 1)
                           ]),
                           _: 2
                         }, 1024)
                       ]),
                       _: 2
                     }, 1032, ["option", "tree-main-option-expanded", "onClick", "onToggleTreeCollapse"]),
-                    de(u("div", null, [
-                      Y(l[n.idKey]) ? (d(), m("div", Te, [
-                        (d(!0), m(S, null, R(h(l), (o) => (d(), W(ce, {
-                          key: o[n.idKey],
-                          option: o,
-                          "name-key": n.displayKey,
-                          selected: g(o),
-                          disabled: I(o),
-                          "tooltip-text": D(o) ? s(T) : null,
-                          onClick: (le) => O(o)
+                    fe(u("div", null, [
+                      le(i[s.idKey]) ? (d(), f("div", we, [
+                        (d(!0), f(x, null, P(g(i), (a) => (d(), X(ye, {
+                          key: a[s.idKey],
+                          option: a,
+                          "name-key": s.displayKey,
+                          selected: b(a),
+                          disabled: B(a),
+                          "tooltip-text": M(a) ? n(w) : null,
+                          onClick: (de) => D(a)
                         }, null, 8, ["option", "name-key", "selected", "disabled", "tooltip-text", "onClick"]))), 128))
-                      ])) : (d(!0), m(S, { key: 1 }, R(h(l), (o) => (d(), m("div", {
-                        key: o[n.idKey],
-                        onClick: U((le) => O(o), ["stop"])
+                      ])) : (d(!0), f(x, { key: 1 }, P(g(i), (a) => (d(), f("div", {
+                        key: a[s.idKey],
+                        onClick: J((de) => D(a), ["stop"])
                       }, [
-                        r(s(Q), {
-                          option: o,
-                          "selected-prop": g(o),
-                          "name-key": n.displayKey,
-                          disabled: I(o),
-                          "min-max-selection-tooltip-message": s(T),
+                        r(n(Z), {
+                          option: a,
+                          "selected-prop": b(a),
+                          "name-key": s.displayKey,
+                          disabled: B(a),
+                          "min-max-selection-tooltip-message": n(w),
                           "tooltip-attached-to-text": "",
                           "is-multi": ""
                         }, null, 8, ["option", "selected-prop", "name-key", "disabled", "min-max-selection-tooltip-message"])
-                      ], 8, Ie))), 128))
+                      ], 8, Be))), 128))
                     ], 512), [
-                      [re, $(l[n.idKey])]
+                      [pe, z(i[s.idKey])]
                     ])
                   ]))), 128)),
-                  s(z).length ? q("", !0) : (d(), m("li", Oe, [
-                    r(s(w), { variant: "body2" }, {
+                  n(j).length ? Y("", !0) : (d(), f("li", De, [
+                    r(n(L), { variant: "body2" }, {
                       default: p(() => [
-                        k(V(n.noResultsText), 1)
+                        T(A(s.noResultsText), 1)
                       ]),
                       _: 1
                     })
@@ -266,43 +286,43 @@ const ke = { class: "content" }, be = { class: "options-list-wrapper" }, Ce = {
                 ])
               ]),
               u("div", null, [
-                u("header", Re, [
-                  r(s(w), {
+                u("header", Ge, [
+                  r(n(L), {
                     variant: "h5",
                     class: "selected-count-text"
                   }, {
                     default: p(() => [
-                      k(V(s(_)) + " selected ", 1)
+                      T(A(n(se)) + " selected ", 1)
                     ]),
                     _: 1
                   }),
-                  n.defaultSelection?.length ? (d(), W(s(ye), {
+                  s.defaultSelection?.length ? (d(), X(n(Se), {
                     key: 0,
                     variant: "subtitle2",
-                    disabled: !s(F),
-                    "test-id": n.testId,
-                    onClick: X
+                    disabled: !n(N),
+                    "test-id": s.testId,
+                    onClick: te
                   }, {
                     default: p(() => [
-                      k(" Reset to default ")
+                      T(" Reset to default ")
                     ]),
                     _: 1
-                  }, 8, ["disabled", "test-id"])) : q("", !0)
+                  }, 8, ["disabled", "test-id"])) : Y("", !0)
                 ]),
-                u("div", Ve, [
-                  r(s(fe), {
-                    items: s(C),
-                    "onUpdate:items": i[1] || (i[1] = (l) => ue(C) ? C.value = l : null),
-                    "display-value": (l) => l.displayText,
+                u("div", Pe, [
+                  r(n(ke), {
+                    items: n(R),
+                    "onUpdate:items": l[1] || (l[1] = (i) => ve(R) ? R.value = i : null),
+                    "display-value": (i) => i.displayText,
                     variant: "compact",
                     "draggable-area": "full",
-                    "test-id": n.testId
+                    "test-id": s.testId
                   }, {
-                    menu: p(({ item: l }) => [
-                      r(Se, {
-                        disabled: s(x),
-                        "tooltip-text": s(x) ? s(T) : null,
-                        onClick: (o) => L(l.id)
+                    menu: p(({ item: i }) => [
+                      r(Te, {
+                        disabled: n(V),
+                        "tooltip-text": n(V) ? n(w) : null,
+                        onClick: (a) => U(i.id)
                       }, null, 8, ["disabled", "tooltip-text", "onClick"])
                     ]),
                     _: 1
@@ -318,5 +338,5 @@ const ke = { class: "content" }, be = { class: "options-list-wrapper" }, Ce = {
   }
 });
 export {
-  lt as default
+  ot as default
 };

package/components/columnPicker/index.d.ts

@@ -90,6 +90,7 @@ declare const ColumnPickerTypes: () => ({
             };
         }>> & {
             "onUpdate:selected"?: (value: unknown[]) => any;
+            onTrackUserActivity?: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => any;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "selected" | "options" | "minSelections" | "noResultsText" | "searchAutoFocus" | "searchPlaceholder" | "headerText" | "appendToBody" | "defaultSelection" | "inlineGroupIds" | "idKey" | "displayKey" | "childrenKey" | "disabledKey" | "minSelectionsTooltipMessage">;
         $attrs: {
             [x: string]: unknown;
@@ -102,7 +103,7 @@ declare const ColumnPickerTypes: () => ({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: (event: "update:selected", value: unknown[]) => void;
+        $emit: ((event: "update:selected", value: unknown[]) => void) & ((event: "trackUserActivity", isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             testId: {
@@ -174,8 +175,10 @@ declare const ColumnPickerTypes: () => ({
             };
         }>> & {
             "onUpdate:selected"?: (value: unknown[]) => any;
+            onTrackUserActivity?: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => any;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             "update:selected": (value: unknown[]) => void;
+            trackUserActivity: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => void;
         }, string, {
             testId: string;
             selected: unknown[];
@@ -283,6 +286,7 @@ declare const ColumnPickerTypes: () => ({
         };
     }>> & {
         "onUpdate:selected"?: (value: unknown[]) => any;
+        onTrackUserActivity?: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => any;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -357,8 +361,10 @@ declare const ColumnPickerTypes: () => ({
     };
 }>> & {
     "onUpdate:selected"?: (value: unknown[]) => any;
+    onTrackUserActivity?: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: unknown[]) => void;
+    trackUserActivity: (isResetToDefault: boolean, isSearched: boolean, isExpanded: boolean, isCollapse: boolean, status: "Cancel" | "Save") => void;
 }, string, {
     testId: string;
     selected: unknown[];

package/components/dateRange/v3/CalendarMonth.vue2.js

@@ -1,148 +1 @@
- import "../../../CalendarMonth.vue_vue_type_style_index_0_scoped_a44769fd_lang.css"; import { defineComponent as z, openBlock as d, createElementBlock as s, unref as t, createElementVNode as o, createBlock as m, withCtx as l, createVNode as r, createCommentVNode as y, createTextVNode as v, toDisplayString as c, Fragment as $, renderList as g, normalizeClass as B } from "vue";
-import { navigatePrev as D, navigateNext as E } from "../common/consts.common.js";
-import S from "../../typography/Heading.vue.js";
-import h from "../../typography/Text.vue.js";
-import { calendarMonthCommon as V } from "../common/CalendarMonth.common.js";
-import "../../button/v3/Button.vue.js";
-import C from "../../button/v3/IconButton.vue.js";
-import "../../button/v3/ScrollButton.vue.js";
-import F from "../../icon/v3/icons/AngleLeft.vue.js";
-import O from "../../icon/v3/icons/AngleRight.vue.js";
-import I from "../../icon/v3/Icon.vue.js";
-import { CalendarMonthTestIdModifiers as n } from "../../../testids/index.js";
-const Y = ["id", "data-testid"], L = ["data-testid"], W = ["data-testid"], X = ["data-testid"], nt = /* @__PURE__ */ z({
-  __name: "CalendarMonth",
-  props: {
-    year: null,
-    days: null,
-    weeks: null,
-    month: null,
-    navigation: null,
-    range: null,
-    type: null,
-    id: { default: Date.now() },
-    allowedDays: { default: null },
-    maxAllowedDate: { default: null },
-    minAllowedDate: { default: null },
-    testId: { default: "" }
-  },
-  emits: ["selectionChanged", "navigation"],
-  setup(e, { emit: A }) {
-    const w = e, {
-      isEndDay: N,
-      isStartDay: x,
-      navigate: k,
-      selectDay: R,
-      monthName: T,
-      dayNames: M,
-      selectedDaysMap: b,
-      inBetweenMap: H
-    } = V(w, A);
-    return (U, u) => (d(), s("div", {
-      id: "datepickerCalendar" + e.id,
-      class: "calendar-month",
-      "data-testid": `${e.testId}-${t(n).WRAPPER}`
-    }, [
-      o("span", {
-        onClick: u[0] || (u[0] = (i) => t(k)(t(D)))
-      }, [
-        e.navigation === t(D) || e.navigation === "all" ? (d(), m(t(C), {
-          key: 0,
-          variant: "borderless",
-          size: "md",
-          class: "previous",
-          "data-testid": `${e.testId}-${t(n).PREVIOUS}`
-        }, {
-          default: l(() => [
-            r(I, null, {
-              default: l(() => [
-                r(F)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["data-testid"])) : y("", !0)
-      ]),
-      o("span", {
-        onClick: u[1] || (u[1] = (i) => t(k)(t(E)))
-      }, [
-        e.navigation === t(E) || e.navigation === "all" ? (d(), m(t(C), {
-          key: 0,
-          class: "next",
-          variant: "borderless",
-          size: "md",
-          "data-testid": `${e.testId}-${t(n).NEXT}`
-        }, {
-          default: l(() => [
-            r(I, null, {
-              default: l(() => [
-                r(O)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["data-testid"])) : y("", !0)
-      ]),
-      o("div", {
-        class: "month-header",
-        "data-testid": `${e.testId}-${t(n).MONTH_HEADER}`
-      }, [
-        r(S, {
-          level: "6",
-          "test-id": `${e.testId}-${t(n).MONTH_HEADER_TEXT}`
-        }, {
-          default: l(() => [
-            v(c(t(T)) + " " + c(e.year), 1)
-          ]),
-          _: 1
-        }, 8, ["test-id"]),
-        o("div", {
-          class: "days-header",
-          "data-testid": `${e.testId}-${t(n).DAYS_HEADER}`
-        }, [
-          (d(!0), s($, null, g(t(M), (i, f) => (d(), m(t(h), {
-            key: f,
-            size: "xs"
-          }, {
-            default: l(() => [
-              v(c(i), 1)
-            ]),
-            _: 2
-          }, 1024))), 128))
-        ], 8, W)
-      ], 8, L),
-      o("div", {
-        class: "days-wrapper",
-        "data-testid": `${e.testId}-${t(n).DAYS_WRAPPER}`
-      }, [
-        (d(!0), s($, null, g(e.weeks, (i, f) => (d(), s("div", { key: f }, [
-          (d(!0), s($, null, g(i, (a, P) => (d(), m(t(h), {
-            key: P,
-            class: B(["day", {
-              "selected-day": t(b)[a.value],
-              "selected-day-between": t(H)[a.value],
-              today: a.isToday,
-              "disabled-day": a.isFuture || a.disabled,
-              "non-day": a.value === 0,
-              "start-day": t(x)(a),
-              "end-day": t(N)(a)
-            }]),
-            size: "sm",
-            "data-testid": `${e.testId}-${t(n).DAY}-${a.value}`,
-            onClick: (j) => a.disabled || a.isFuture || t(R)(a)
-          }, {
-            default: l(() => [
-              v(c(a.value), 1)
-            ]),
-            _: 2
-          }, 1032, ["class", "data-testid", "onClick"]))), 128))
-        ]))), 128))
-      ], 8, X)
-    ], 8, Y));
-  }
-});
-export {
-  nt as default
-};
+ import "../../../CalendarMonth.vue_vue_type_style_index_0_scoped_a44769fd_lang.css"; 

package/components/dateRange/v4/DateRangeV4.vue2.js

@@ -1,273 +1 @@
- import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_f8826716_lang.css"; import { defineComponent as Q, watch as X, openBlock as n, createElementBlock as i, unref as e, normalizeClass as r, createElementVNode as d, renderSlot as x, createVNode as s, withDirectives as v, Fragment as k, renderList as C, withCtx as o, createTextVNode as m, toDisplayString as g, createCommentVNode as A, vShow as $, normalizeStyle as Z, setBlockTracking as E } from "vue";
-import _ from "./CalendarMonthV4.vue.js";
-import { typeToName as ee, messagePerType as te } from "../common/consts.common.js";
-import R from "../../button/v4/ButtonV4.vue.js";
-import "../../button/v4/IconButtonV4.vue.js";
-import "../../button/v4/ButtonGroup.vue.js";
-import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import "../../dropdown/v4/DropdownV4.vue.js";
-import "../../dropdown/v4/DefaultDropdownTrigger.vue.js";
-import "../../dropdown/v4/IconButtonDropdownTrigger.vue.js";
-import "../../dropdown/v4/ChipDropdownTrigger.vue.js";
-import "../../dropdown/v4/AppDropdownTrigger.vue.js";
-import "../../dropdown/v4/ButtonDropdownTrigger.vue.js";
-import ae from "../../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
-import "../../dropdown/v4/TreeDropdown.vue.js";
-import "../../dropdown/v4/OptionV4.vue.js";
-import "../../dropdown/v4/ConditionalDropdown.vue.js";
-import { DateRangeTestIdModifiers as l, DatePickerTestIdModifiers as de } from "../../../testids/index.js";
-import { dateRangeCommon as ne } from "../common/DateRange.common.js";
-import p from "../../typography/v4/Typography.vue.js";
-const ie = ["id", "data-testid"], se = ["data-testid"], le = ["id", "data-testid"], oe = {
-  key: 0,
-  class: "type-picker"
-}, re = ["onClick"], ue = ["data-testid"], ce = ["id"], me = ["id"], pe = ["onClick"], ye = { class: "dropdown-rightTriangle" }, ge = ["data-testid"], fe = { class: "date-picker-calendar left-box" }, he = { class: "buttons-cover" }, ve = { class: "range" }, ke = { class: "text-container" }, ze = /* @__PURE__ */ Q({
-  __name: "DateRangeV4",
-  props: {
-    range: null,
-    types: { default: () => ["date"] },
-    includeToday: { type: Boolean, default: !0 },
-    allowedDays: { default: null },
-    maxDaysInRange: { default: null },
-    datePresetList: { default: "date" },
-    regex: { default: () => /^(1[0-2]|0?[1-9])\/[\d]{1,2}\/[\d]{4}$/ },
-    dateFormat: { default: "mm/dd/yyyy" },
-    uniqueId: { default: Date.now() },
-    disabled: { type: Boolean, default: !1 },
-    initialType: { default: null },
-    openOnTop: { type: Boolean, default: !1 },
-    showPresets: { type: Boolean, default: !0 },
-    maxDate: { default: null },
-    minDate: { default: null },
-    testId: { default: "" }
-  },
-  emits: [
-    "rangeTypeChanged",
-    "currentDateChanged",
-    "rangeChanged",
-    "dateRangePresetNameChanged",
-    "opened",
-    "dismissed"
-  ],
-  setup(t, { emit: M }) {
-    const w = t, {
-      datePicker: B,
-      datePickerId: S,
-      getMaxAllowedDate: q,
-      getMinAllowedDate: O,
-      selectedPreset: I,
-      displayError: L,
-      rangeType: f,
-      selectedRange: V,
-      placement: z,
-      currentDate: T,
-      error: U,
-      presets: F,
-      isOpen: h,
-      popup: G,
-      currentMonths: y,
-      displayedMonthsKeys: D,
-      changeType: b,
-      presetChanged: K,
-      apply: W,
-      getNavigation: Y,
-      navigationCallback: j,
-      selectionChanged: H,
-      toggle: P,
-      isCompact: J
-    } = ne(w, M);
-    return X(
-      () => w.datePresetList,
-      () => {
-        b("date", !1);
-      }
-    ), (N, u) => (n(), i("div", {
-      id: e(S),
-      ref_key: "datePicker",
-      ref: B,
-      class: r(["relative-wrap", { "date-range-disabled": t.disabled }]),
-      "data-testid": `${t.testId}-${e(l).WRAPPER}`
-    }, [
-      d("div", {
-        class: "date-range-field",
-        "data-testid": `${t.testId}-${e(l).TRIGGER}`,
-        onClick: u[0] || (u[0] = (a) => e(P)())
-      }, [
-        x(N.$slots, "field", {
-          currentDate: e(T),
-          isOpen: e(h)
-        }, () => [
-          s(e(ae), {
-            label: e(T),
-            "start-icon-name": "calendar-blank",
-            variant: "outlined",
-            "test-id": `${t.testId}-${e(de).INPUT}`,
-            open: e(h)
-          }, null, 8, ["label", "test-id", "open"])
-        ], !0)
-      ], 8, se),
-      v(d("div", {
-        id: "datepickerPopup" + t.uniqueId,
-        ref_key: "popup",
-        ref: G,
-        class: r(["pop-up", [
-          e(z),
-          t.openOnTop ? "open-on-top" : "",
-          t.showPresets ? "" : "hide-presets"
-        ]]),
-        "data-testid": `${t.testId}-${e(l).CONTAINER}`
-      }, [
-        t.types.length > 1 ? (n(), i("div", oe, [
-          (n(!0), i(k, null, C(t.types, (a) => (n(), i("span", {
-            key: a,
-            class: r(["range-type", { "selected-range-type": e(f) === a }]),
-            onClick: (c) => e(b)(a, !0)
-          }, [
-            s(e(p), { variant: "h1" }, {
-              default: o(() => [
-                m(g(e(ee)[a]), 1)
-              ]),
-              _: 2
-            }, 1024)
-          ], 10, re))), 128))
-        ])) : A("", !0),
-        d("div", {
-          class: r(["flex", { "pop-up-content": t.types.length > 1 }])
-        }, [
-          t.showPresets ? (n(), i("div", {
-            key: 0,
-            class: "date-picker-menu",
-            "data-testid": `${t.testId}-${e(l).MENU}`
-          }, [
-            d("div", {
-              id: "presets" + t.uniqueId,
-              class: "preset-dropdown"
-            }, [
-              d("ul", {
-                id: "customDropDownList" + t.uniqueId
-              }, [
-                (n(!0), i(k, null, C(e(F), (a) => (n(), i("li", {
-                  key: a.id,
-                  class: r({
-                    "selected-preset-container": e(I) === a.id
-                  })
-                }, [
-                  d("div", {
-                    class: r([{ "selected-preset": e(I) === a.id }, "preset-element"]),
-                    onClick: (c) => e(K)(a)
-                  }, [
-                    s(e(p), {
-                      variant: "body2",
-                      "data-testid": `${t.testId}-${e(l).MENU}-${a.id}`
-                    }, {
-                      default: o(() => [
-                        m(g(a.name), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["data-testid"])
-                  ], 10, pe),
-                  v(d("div", ye, null, 512), [
-                    [$, a.id === "custom"]
-                  ])
-                ], 2))), 128))
-              ], 8, me)
-            ], 8, ce),
-            d("div", {
-              class: "type-message",
-              "data-testid": `${t.testId}-${e(l).MESSAGE}`
-            }, g(e(te)[e(f)]), 9, ge)
-          ], 8, ue)) : A("", !0),
-          d("div", {
-            class: "calendar-wrap",
-            style: Z({ height: e(J) ? "336px" : "372px" })
-          }, [
-            d("div", fe, [
-              (n(!0), i(k, null, C(e(D), (a, c) => (n(), i("div", { key: a }, [
-                s(_, {
-                  id: t.uniqueId,
-                  navigation: e(Y)(
-                    c === 0,
-                    c === e(D).length - 1
-                  ),
-                  year: e(y)[a].parsedMonth.year,
-                  days: e(y)[a].parsedMonth.days,
-                  weeks: e(y)[a].parsedMonth.weeks,
-                  month: e(y)[a].parsedMonth.month,
-                  range: e(V),
-                  type: e(f),
-                  "allowed-days": t.allowedDays,
-                  "max-allowed-date": e(q),
-                  "min-allowed-date": e(O),
-                  "test-id": `${t.testId}-${c}`,
-                  onSelectionChanged: e(H),
-                  onNavigation: e(j)
-                }, null, 8, ["id", "navigation", "year", "days", "weeks", "month", "range", "type", "allowed-days", "max-allowed-date", "min-allowed-date", "test-id", "onSelectionChanged", "onNavigation"])
-              ]))), 128)),
-              d("div", he, [
-                d("div", ve, [
-                  x(N.$slots, "footer", {}, void 0, !0)
-                ]),
-                d("div", ke, [
-                  s(e(p), { variant: "body2" }, {
-                    default: o(() => [
-                      m("All dates are in UTC")
-                    ]),
-                    _: 1
-                  })
-                ]),
-                v(d("div", { class: "error" }, g(e(U)), 513), [
-                  [$, e(L)]
-                ]),
-                u[1] || (E(-1), u[1] = d("div", { class: "buttons" }, [
-                  s(e(R), {
-                    id: "button-ok" + t.uniqueId,
-                    size: "small",
-                    class: "button",
-                    color: "primary",
-                    "data-testid": `${t.testId}-${e(l).ACTION_APPLY}`,
-                    onClick: (a) => e(W)()
-                  }, {
-                    default: o(() => [
-                      s(e(p), { variant: "button" }, {
-                        default: o(() => [
-                          m("Apply")
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["id", "data-testid", "onClick"]),
-                  s(e(R), {
-                    id: "button-cancel" + t.uniqueId,
-                    size: "small",
-                    theme: "third",
-                    color: "default",
-                    variant: "outlined",
-                    class: "button",
-                    "data-testid": `${t.testId}-${e(l).ACTION_CANCEL}`,
-                    onClick: (a) => e(P)()
-                  }, {
-                    default: o(() => [
-                      s(e(p), { variant: "button" }, {
-                        default: o(() => [
-                          m(" Cancel ")
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["id", "data-testid", "onClick"])
-                ]), E(1), u[1])
-              ])
-            ])
-          ], 4)
-        ], 2)
-      ], 10, le), [
-        [$, e(h)]
-      ])
-    ], 10, ie));
-  }
-});
-export {
-  ze as default
-};
+ import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_f8826716_lang.css"; 

package/index.js

@@ -1,4 +1,4 @@
-import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
+import './FilterDropdown.vue_vue_type_style_index_0_scoped_b42d8b45_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";

package/package.json

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

package/ColumnPicker.vue_vue_type_style_index_0_scoped_01c4e08f_lang.css

@@ -1 +0,0 @@
-.column-picker[data-v-01c4e08f]{width:37.375rem;border-radius:var(--border-radius-lg);background:var(--background-modal-elevation)}.content[data-v-01c4e08f]{min-height:18.75rem;display:grid;grid-template-columns:1fr 1fr}.selected-list-wrapper[data-v-01c4e08f]{padding:.25rem 1rem 1rem}.scrollable-list[data-v-01c4e08f]{overflow-y:auto;max-height:24.625rem}.search-wrapper[data-v-01c4e08f]{height:3rem;padding:1rem 1rem .25rem}.options-list-wrapper[data-v-01c4e08f]{border-right:1px solid var(--common-divider)}.options-list[data-v-01c4e08f]{margin:0;list-style:none;padding:.3125rem .75rem}.options-list__item[data-v-01c4e08f]{margin-bottom:.5rem}.options-list[data-v-01c4e08f] .item-container{margin-bottom:1px;min-height:1.9375rem}.selected-list-header[data-v-01c4e08f]{height:3rem;padding:.25rem 1rem 0;display:flex;justify-content:space-between;align-items:center}.group-name[data-v-01c4e08f]{color:var(--text-secondary)}.inline-group[data-v-01c4e08f]{padding:.25rem .5rem}.no-result-container[data-v-01c4e08f]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}