@ironsource/shared-ui 2.1.7-rc.12 → 2.1.7-rc.14

package/SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css

@@ -0,0 +1 @@
+.list-search[data-v-e9cd63b8]{margin-bottom:var(--spacing-100)}.sortable-list[data-v-e9cd63b8],.locked-list[data-v-e9cd63b8]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-75);color:var(--text-primary)}.locked-list[data-v-e9cd63b8]{margin-top:var(--spacing-75)}.force-grabbing-cursor *[data-v-e9cd63b8]{cursor:move!important;cursor:-webkit-grabbing!important;cursor:-moz-grabbing!important;cursor:grabbing!important}.empty-state-title[data-v-e9cd63b8]{color:var(--text-disabled);padding:0 8px;width:100%}.loader-bars[data-v-e9cd63b8]{display:flex;flex-direction:column;gap:6px}.loader-bars .loader-bar[data-v-e9cd63b8]{height:40px;width:100%}

package/TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css

@@ -0,0 +1 @@
+.tabs-list[data-v-f9433b11]{position:relative;padding:0;margin:0}.tabs-list--page[data-v-f9433b11]{border-bottom:1px solid var(--common-divider);box-sizing:border-box}.tabs-list--page .tab-item[data-v-f9433b11]{padding:0;margin-right:var(--spacing-200);min-height:calc(var(--spacing-600) - 1px)}.tabs-list--page .tabs-border-line[data-v-f9433b11]{margin-top:-1px}.tabs-border-line[data-v-f9433b11]{left:var(--167b065e);width:var(--8cfadb62);border-bottom:2px solid var(--primary-main);transition:left .2s ease-in-out,width .2s;position:absolute;margin-top:-2px}.tab-item[data-v-f9433b11]{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;color:var(--action-active);gap:var(--spacing-100);vertical-align:middle;padding:0 var(--spacing-300);min-height:var(--spacing-600)}.tab-item[data-v-f9433b11]:hover{cursor:pointer;color:var(--text-primary)}.tab-item--active[data-v-f9433b11]{color:var(--text-primary)}.tab-item--disabled[data-v-f9433b11]{color:var(--action-disabled);cursor:not-allowed;pointer-events:none}

package/components/sortableList/SortableList.vue.d.ts

@@ -28,6 +28,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     emptyStateTitle: string;
     testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sortableItemDragged: (event: {
+        id: string;
+        newIndex: number;
+    }) => void;
     "update:items": (items: SortableListItem[]) => void;
     "update:openId": (id: string | number) => void;
     "update:selectedId": (id: string | number) => void;
@@ -63,6 +67,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     emptyStateTitle: string;
     testId: string;
 }>>> & {
+    onSortableItemDragged?: (event: {
+        id: string;
+        newIndex: number;
+    }) => any;
     "onUpdate:items"?: (items: SortableListItem[]) => any;
     "onUpdate:openId"?: (id: string | number) => any;
     "onUpdate:selectedId"?: (id: string | number) => any;

package/components/sortableList/SortableList.vue.js

@@ -1,7 +1,7 @@
 import o from "./SortableList.vue2.js";
-/* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SortableList.vue_vue_type_style_index_0_scoped_402063dc_lang.css"; //*');
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-402063dc"]]);
+/* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e9cd63b8"]]);
 export {
   c as default
 };

package/components/sortableList/SortableList.vue2.js

@@ -1,21 +1,21 @@
- import "../../SortableList.vue_vue_type_style_index_0_scoped_402063dc_lang.css"; import { defineComponent as F, computed as f, ref as P, openBlock as s, createElementBlock as u, mergeProps as V, unref as t, createBlock as g, isRef as N, createCommentVNode as y, withCtx as m, Fragment as b, renderList as R, renderSlot as S, createElementVNode as G, createVNode as $, createTextVNode as U, toDisplayString as M } from "vue";
+ import "../../SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css"; import { defineComponent as F, computed as f, ref as P, openBlock as s, createElementBlock as i, mergeProps as T, unref as l, createBlock as g, isRef as N, createCommentVNode as y, withCtx as m, Fragment as V, renderList as D, renderSlot as S, createElementVNode as G, createVNode as $, createTextVNode as U, toDisplayString as M } from "vue";
 import { VueDraggable as K } from "vue-draggable-plus";
-import q from "./SortableItem.vue.js";
+import w from "./SortableItem.vue.js";
 import Q from "../search/v4/SearchV4.vue.js";
 import j from "../typography/v4/Typography.vue.js";
 import z from "../skeleton/v4/SkeletonV4.vue.js";
 import { useVModel as J } from "@vueuse/core";
-import { matchString as w } from "../../utils/search.js";
+import { matchString as x } from "../../utils/search.js";
 import { useTestIdAttrs as W } from "../../utils/testIds.js";
 import { SortableListTestIdModifiers as I } from "../../testids/index.js";
-import { DRAG_CURSOR_CSS_CLASS as x } from "./consts.js";
+import { DRAG_CURSOR_CSS_CLASS as q } from "./consts.js";
 const X = {
   key: 1,
   class: "sortable-list-container"
 }, Y = { class: "loader-bars" }, Z = {
   key: 3,
   class: "empty-state-title"
-}, ie = /* @__PURE__ */ F({
+}, ue = /* @__PURE__ */ F({
   __name: "SortableList",
   props: {
     items: { default: () => [] },
@@ -32,115 +32,119 @@ const X = {
     emptyStateTitle: { default: "No results" },
     testId: { default: "" }
   },
-  emits: ["update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
+  emits: ["sortableItemDragged", "update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
   setup(d, { emit: o }) {
-    const r = d, i = J(r, "search", o), v = f(() => !!i.value?.trim()), C = f(() => v.value ? r.items.filter((l) => {
-      const a = l.children || [], e = i.value;
-      return r.searchHandler ? r.searchHandler(l, e) : w(l.displayText, e) || // match parent item
-      a.some((n) => w(n.displayText, e));
-    }) : r.items), c = f({
+    const n = d, u = J(n, "search", o), v = f(() => !!u.value?.trim()), C = f(() => v.value ? n.items.filter((t) => {
+      const a = t.children || [], e = u.value;
+      return n.searchHandler ? n.searchHandler(t, e) : x(t.displayText, e) || // match parent item
+      a.some((r) => x(r.displayText, e));
+    }) : n.items), h = f({
       get() {
-        return C.value.filter((l) => !l.isLocked);
+        return C.value.filter((t) => !t.isLocked);
       },
-      set(l) {
-        o("update:items", [...l, ...k.value]);
+      set(t) {
+        o("update:items", [...t, ...b.value]);
       }
-    }), k = f(
-      () => C.value.filter((l) => l.isLocked)
-    ), L = P(!1), H = (l) => {
-      L.value = !0, setTimeout(() => l.target.classList.add(x), 50);
-    }, O = (l) => {
-      L.value = !1, l.target.classList.remove(x);
-    }, A = (l) => (v.value || l.id === r.openId) && !L.value, B = (l, a) => {
-      a ? o("update:openId", l.id) : o("update:openId", null);
-    }, h = (l) => l.id === r.selectedId, D = (l) => {
-      o("update:selectedId", l.id), o("update:selectedChildId", null);
-    }, E = (l, a) => {
-      o("update:selectedChildId", l.id), o("update:selectedId", a.id), o("update:openId", a.id);
-    }, T = W(r.testId, I);
-    return (l, a) => (s(), u("div", V({ class: "sortable-list-and-search-container" }, t(T)[t(I).CONTAINER]), [
-      d.showSearch ? (s(), g(t(Q), {
+    }), b = f(
+      () => C.value.filter((t) => t.isLocked)
+    ), k = P(!1), H = (t) => {
+      k.value = !0, setTimeout(() => t.target.classList.add(q), 50);
+    }, O = (t) => {
+      const { target: a, item: e, newIndex: r } = t;
+      k.value = !1, a.classList.remove(q);
+      const c = e.attributes["data-id"]?.value;
+      o("sortableItemDragged", { id: c, newIndex: r });
+    }, R = (t) => (v.value || t.id === n.openId) && !k.value, A = (t, a) => {
+      a ? o("update:openId", t.id) : o("update:openId", null);
+    }, p = (t) => t.id === n.selectedId, B = (t) => {
+      o("update:selectedId", t.id), o("update:selectedChildId", null);
+    }, E = (t, a) => {
+      o("update:selectedChildId", t.id), o("update:selectedId", a.id), o("update:openId", a.id);
+    }, L = W(n.testId, I);
+    return (t, a) => (s(), i("div", T({ class: "sortable-list-and-search-container" }, l(L)[l(I).CONTAINER]), [
+      d.showSearch ? (s(), g(l(Q), {
         key: 0,
-        modelValue: t(i),
-        "onUpdate:modelValue": a[0] || (a[0] = (e) => N(i) ? i.value = e : null),
+        modelValue: l(u),
+        "onUpdate:modelValue": a[0] || (a[0] = (e) => N(u) ? u.value = e : null),
         class: "list-search",
         placeholder: d.searchPlaceholder,
         "test-id": d.testId,
         onOnClear: a[1] || (a[1] = (e) => o("clearSearch"))
       }, null, 8, ["modelValue", "placeholder", "test-id"])) : y("", !0),
-      d.isLoading ? S(l.$slots, "loader", { key: 2 }, () => [
+      d.isLoading ? S(t.$slots, "loader", { key: 2 }, () => [
         G("div", Y, [
-          (s(!0), u(b, null, R(d.loadingRowCount, (e) => (s(), u("div", { key: e }, [
-            $(t(z), {
+          (s(!0), i(V, null, D(d.loadingRowCount, (e) => (s(), i("div", { key: e }, [
+            $(l(z), {
               round: "",
               class: "loader-bar"
             })
           ]))), 128))
         ])
-      ], !0) : (s(), u("div", X, [
-        t(c).length ? (s(), g(t(K), V({
+      ], !0) : (s(), i("div", X, [
+        l(h).length ? (s(), g(l(K), T({
           key: 0,
-          modelValue: t(c),
-          "onUpdate:modelValue": a[2] || (a[2] = (e) => N(c) ? c.value = e : null),
+          modelValue: l(h),
+          "onUpdate:modelValue": a[2] || (a[2] = (e) => N(h) ? h.value = e : null),
           class: "sortable-list",
           filter: ".expand-icon",
           animation: 150,
           handle: ".draggable-handle",
-          disabled: t(v)
-        }, t(T)[t(I).DRAGGABLE_LIST], {
+          disabled: l(v)
+        }, l(L)[l(I).DRAGGABLE_LIST], {
           onStart: H,
           onEnd: O
         }), {
           default: m(() => [
-            (s(!0), u(b, null, R(t(c), (e, n) => (s(), g(q, {
+            (s(!0), i(V, null, D(l(h), (e, r) => (s(), g(w, {
               key: e.id,
+              "data-id": e.id,
               item: e,
-              index: n,
-              "is-open": A(e),
-              "is-selected": h(e),
-              "selected-child-id": h(e) ? d.selectedChildId : null,
+              index: r,
+              "is-open": R(e),
+              "is-selected": p(e),
+              "selected-child-id": p(e) ? d.selectedChildId : null,
               "display-value": d.displayValue,
-              "search-query": t(i),
+              "search-query": l(u),
               "search-handler": d.searchHandler,
-              onToggle: (p) => B(e, p),
-              onSelect: (p) => D(e),
-              onSelectChild: (p) => E(p, e)
+              onToggle: (c) => A(e, c),
+              onSelect: (c) => B(e),
+              onSelectChild: (c) => E(c, e)
             }, {
               menu: m(() => [
-                S(l.$slots, "menu", { item: e }, void 0, !0)
+                S(t.$slots, "menu", { item: e }, void 0, !0)
               ]),
               _: 2
-            }, 1032, ["item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
+            }, 1032, ["data-id", "item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
           ]),
           _: 3
         }, 16, ["modelValue", "disabled"])) : y("", !0),
-        t(k).length ? (s(), u("div", V({
+        l(b).length ? (s(), i("div", T({
           key: 1,
           class: "locked-list"
-        }, t(T)[t(I).LOCKED_LIST]), [
-          (s(!0), u(b, null, R(t(k), (e) => (s(), g(q, {
+        }, l(L)[l(I).LOCKED_LIST]), [
+          (s(!0), i(V, null, D(l(b), (e) => (s(), g(w, {
             key: e.id,
             item: e,
-            "is-open": A(e),
-            "is-selected": h(e),
-            "selected-child-id": h(e) ? d.selectedChildId : null,
+            "is-open": R(e),
+            "is-selected": p(e),
+            "selected-child-id": p(e) ? d.selectedChildId : null,
             "display-value": d.displayValue,
-            "search-query": t(i),
+            "search-query": l(u),
             "on-search": d.searchHandler,
-            onToggle: (n) => B(e, n),
-            onSelect: (n) => D(e),
-            onSelectChild: (n) => E(n, e)
+            onToggle: (r) => A(e, r),
+            onSelect: (r) => B(e),
+            onSelectChild: (r) => E(r, e)
           }, {
             menu: m(() => [
-              S(l.$slots, "menu", { item: e }, void 0, !0)
+              S(t.$slots, "menu", { item: e }, void 0, !0)
             ]),
             _: 2
           }, 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "onToggle", "onSelect", "onSelectChild"]))), 128))
         ], 16)) : y("", !0)
       ])),
-      !t(C).length && !d.isLoading ? (s(), u("div", Z, [
-        S(l.$slots, "empty-state", {}, () => [
-          $(t(j), { variant: "body2" }, {
+      !l(C).length && !d.isLoading ? (s(), i("div", Z, [
+        S(t.$slots, "empty-state", {}, () => [
+          $(l(j), { variant: "body2" }, {
             default: m(() => [
               U(M(d.emptyStateTitle), 1)
             ]),
@@ -152,5 +156,5 @@ const X = {
   }
 });
 export {
-  ie as default
+  ue as default
 };

package/components/sortableList/index.d.ts

@@ -73,6 +73,10 @@ declare const SortableListTypes: () => ({
                 default: string;
             };
         }>> & {
+            onSortableItemDragged?: (event: {
+                id: string;
+                newIndex: number;
+            }) => any;
             "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
             "onUpdate:openId"?: (id: string | number) => any;
             "onUpdate:selectedId"?: (id: string | number) => any;
@@ -91,7 +95,10 @@ declare const SortableListTypes: () => ({
         }>;
         $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:items", items: import("./SortableList.types").SortableListItem[]) => void) & ((event: "update:openId", id: string | number) => void) & ((event: "update:selectedId", id: string | number) => void) & ((event: "update:selectedChildId", id: string | number) => void) & ((event: "update:search", query: string) => void) & ((event: "clearSearch") => void);
+        $emit: ((event: "sortableItemDragged", event: {
+            id: string;
+            newIndex: number;
+        }) => void) & ((event: "update:items", items: import("./SortableList.types").SortableListItem[]) => void) & ((event: "update:openId", id: string | number) => void) & ((event: "update:selectedId", id: string | number) => void) & ((event: "update:selectedChildId", id: string | number) => void) & ((event: "update:search", query: string) => void) & ((event: "clearSearch") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             search: {
@@ -149,6 +156,10 @@ declare const SortableListTypes: () => ({
                 default: string;
             };
         }>> & {
+            onSortableItemDragged?: (event: {
+                id: string;
+                newIndex: number;
+            }) => any;
             "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
             "onUpdate:openId"?: (id: string | number) => any;
             "onUpdate:selectedId"?: (id: string | number) => any;
@@ -156,6 +167,10 @@ declare const SortableListTypes: () => ({
             "onUpdate:search"?: (query: string) => any;
             onClearSearch?: () => any;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            sortableItemDragged: (event: {
+                id: string;
+                newIndex: number;
+            }) => void;
             "update:items": (items: import("./SortableList.types").SortableListItem[]) => void;
             "update:openId": (id: string | number) => void;
             "update:selectedId": (id: string | number) => void;
@@ -252,6 +267,10 @@ declare const SortableListTypes: () => ({
             default: string;
         };
     }>> & {
+        onSortableItemDragged?: (event: {
+            id: string;
+            newIndex: number;
+        }) => any;
         "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
         "onUpdate:openId"?: (id: string | number) => any;
         "onUpdate:selectedId"?: (id: string | number) => any;
@@ -318,6 +337,10 @@ declare const SortableListTypes: () => ({
         default: string;
     };
 }>> & {
+    onSortableItemDragged?: (event: {
+        id: string;
+        newIndex: number;
+    }) => any;
     "onUpdate:items"?: (items: import("./SortableList.types").SortableListItem[]) => any;
     "onUpdate:openId"?: (id: string | number) => any;
     "onUpdate:selectedId"?: (id: string | number) => any;
@@ -325,6 +348,10 @@ declare const SortableListTypes: () => ({
     "onUpdate:search"?: (query: string) => any;
     onClearSearch?: () => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sortableItemDragged: (event: {
+        id: string;
+        newIndex: number;
+    }) => void;
     "update:items": (items: import("./SortableList.types").SortableListItem[]) => void;
     "update:openId": (id: string | number) => void;
     "update:selectedId": (id: string | number) => void;

package/components/tabs/v4/TabsV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./TabsV4.vue2.js";
-/* empty css             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css"; //*');
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bab40cfe"]]);
+/* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-f9433b11"]]);
 export {
-  a as default
+  p as default
 };

package/components/tabs/v4/TabsV4.vue2.js

@@ -1,9 +1,9 @@
- import "../../../TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css"; import { defineComponent as h, useCssVars as C, ref as v, watch as w, nextTick as $, openBlock as r, createElementBlock as l, mergeProps as y, unref as s, Fragment as S, renderList as g, normalizeClass as A, renderSlot as N, createBlock as V, withCtx as B, createTextVNode as M, toDisplayString as E, createCommentVNode as P, pushScopeId as W, popScopeId as _, createElementVNode as H } from "vue";
-import R from "../../typography/v4/Typography.vue.js";
-import { TabsTestIdModifiers as c } from "../../../testids/index.js";
+ import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; import { defineComponent as x, useCssVars as y, ref as l, watch as C, nextTick as $, openBlock as o, createElementBlock as c, mergeProps as w, unref as s, Fragment as A, renderList as S, normalizeClass as g, renderSlot as V, createBlock as B, withCtx as M, createTextVNode as N, toDisplayString as R, createCommentVNode as _, pushScopeId as E, popScopeId as P, createElementVNode as W } from "vue";
+import H from "../../typography/v4/Typography.vue.js";
+import { TabsTestIdModifiers as m } from "../../../testids/index.js";
 import { tabsCommon as z } from "../common/tabsCommon.js";
 import { useTestIdAttrs as D } from "../../../utils/testIds.js";
-const F = (t) => (W("data-v-bab40cfe"), t = t(), _(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ H("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ h({
+const F = (t) => (E("data-v-f9433b11"), t = t(), P(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ W("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ x({
   __name: "TabsV4",
   props: {
     tabsList: { default: () => [] },
@@ -12,59 +12,56 @@ const F = (t) => (W("data-v-bab40cfe"), t = t(), _(), t), U = ["data-testid", "o
     testId: { default: "" }
   },
   emits: ["update:selectedTab"],
-  setup(t, { emit: f }) {
-    const a = t;
-    C((o) => ({
-      "57c21ae0": b.value,
-      bdc3e3e6: m.value
+  setup(t, { emit: p }) {
+    const r = t;
+    y((a) => ({
+      "167b065e": v.value,
+      "8cfadb62": b.value
     }));
-    const {
-      skipUnwrap: p,
-      selectTab: T,
-      setHover: I,
-      clearHover: u,
-      tabsNewList: L,
-      getSelectedTabIndex: k
-    } = z(a, f), x = D(a.testId, c), d = (o) => o.id === a.selectedTab, m = v(), b = v();
-    return w(
-      [() => a.variant, () => a.selectedTab, () => a.tabsList],
+    const { skipUnwrap: T, selectTab: I, setHover: L, clearHover: u, getSelectedTabIndex: k } = z(r, p), f = l(null), h = D(r.testId, m), i = (a) => a.id === r.selectedTab, b = l(), v = l();
+    return C(
+      [() => r.variant, () => r.selectedTab, () => r.tabsList],
       async () => {
-        const o = k();
+        const a = k();
+        if (a === -1)
+          return;
         await $();
-        const i = L.value[o];
-        m.value = i?.clientWidth + "px", b.value = i?.offsetLeft + "px";
+        const e = Array.from(f.value?.children || []).at(a);
+        b.value = e?.clientWidth + "px", v.value = e?.offsetLeft + "px";
       },
       { immediate: !0 }
-    ), (o, i) => (r(), l("ul", y({
+    ), (a, n) => (o(), c("ul", w({
+      ref_key: "tabsListRef",
+      ref: f,
       class: ["tabs-list", [`tabs-list--${t.variant}`]]
-    }, s(x)[s(c).WRAPPER]), [
-      (r(!0), l(S, null, g(t.tabsList, (e) => (r(), l("li", {
+    }, s(h)[s(m).WRAPPER]), [
+      (o(!0), c(A, null, S(t.tabsList, (e) => (o(), c("li", {
         ref_for: !0,
-        ref: s(p).tabsNewList,
+        ref: s(T).tabsNewList,
         key: e.id,
-        class: A(["tab-item", {
+        class: g(["tab-item", {
           "tab-item--disabled": e.disabled,
-          "tab-item--active": d(e)
+          "tab-item--active": i(e)
         }]),
-        "data-testid": t.testId ? `${t.testId}-${s(c).TAB}-${e.id}` : void 0,
-        onClick: (n) => s(T)(e),
-        onMouseover: (n) => s(I)(e),
-        onMouseleave: i[0] || (i[0] = //@ts-ignore
-        (...n) => s(u) && s(u)(...n))
+        "data-testid": t.testId ? `${t.testId}-${s(m).TAB}-${e.id}` : void 0,
+        onClick: (d) => s(I)(e),
+        onMouseover: (d) => s(L)(e),
+        onMouseleave: n[0] || (n[0] = //@ts-ignore
+        (...d) => s(u) && s(u)(...d))
       }, [
-        N(o.$slots, "tab-icon", {
+        V(a.$slots, "tab-icon", {
           tab: e,
-          active: d(e)
+          active: i(e)
         }, void 0, !0),
-        e.name ? (r(), V(s(R), {
+        e.name ? (o(), B(s(H), {
           key: 0,
-          variant: d(e) ? "tabLabel2" : "tabLabel1"
+          variant: i(e) ? "tabLabel2" : "tabLabel1"
         }, {
-          default: B(() => [
-            M(E(e.name), 1)
+          default: M(() => [
+            N(R(e.name), 1)
           ]),
           _: 2
-        }, 1032, ["variant"])) : P("", !0)
+        }, 1032, ["variant"])) : _("", !0)
       ], 42, U))), 128)),
       j
     ], 16));

package/index.d.ts

@@ -1684,6 +1684,10 @@ declare const _default: {
                     default: string;
                 };
             }>> & {
+                onSortableItemDragged?: (event: {
+                    id: string;
+                    newIndex: number;
+                }) => any;
                 "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
                 "onUpdate:openId"?: (id: string | number) => any;
                 "onUpdate:selectedId"?: (id: string | number) => any;
@@ -1702,7 +1706,10 @@ declare const _default: {
             }>;
             $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:items", items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void) & ((event: "update:openId", id: string | number) => void) & ((event: "update:selectedId", id: string | number) => void) & ((event: "update:selectedChildId", id: string | number) => void) & ((event: "update:search", query: string) => void) & ((event: "clearSearch") => void);
+            $emit: ((event: "sortableItemDragged", event: {
+                id: string;
+                newIndex: number;
+            }) => void) & ((event: "update:items", items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void) & ((event: "update:openId", id: string | number) => void) & ((event: "update:selectedId", id: string | number) => void) & ((event: "update:selectedChildId", id: string | number) => void) & ((event: "update:search", query: string) => void) & ((event: "clearSearch") => void);
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
                 search: {
@@ -1760,6 +1767,10 @@ declare const _default: {
                     default: string;
                 };
             }>> & {
+                onSortableItemDragged?: (event: {
+                    id: string;
+                    newIndex: number;
+                }) => any;
                 "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
                 "onUpdate:openId"?: (id: string | number) => any;
                 "onUpdate:selectedId"?: (id: string | number) => any;
@@ -1767,6 +1778,10 @@ declare const _default: {
                 "onUpdate:search"?: (query: string) => any;
                 onClearSearch?: () => any;
             }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                sortableItemDragged: (event: {
+                    id: string;
+                    newIndex: number;
+                }) => void;
                 "update:items": (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void;
                 "update:openId": (id: string | number) => void;
                 "update:selectedId": (id: string | number) => void;
@@ -1863,6 +1878,10 @@ declare const _default: {
                 default: string;
             };
         }>> & {
+            onSortableItemDragged?: (event: {
+                id: string;
+                newIndex: number;
+            }) => any;
             "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
             "onUpdate:openId"?: (id: string | number) => any;
             "onUpdate:selectedId"?: (id: string | number) => any;
@@ -1929,6 +1948,10 @@ declare const _default: {
             default: string;
         };
     }>> & {
+        onSortableItemDragged?: (event: {
+            id: string;
+            newIndex: number;
+        }) => any;
         "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
         "onUpdate:openId"?: (id: string | number) => any;
         "onUpdate:selectedId"?: (id: string | number) => any;
@@ -1936,6 +1959,10 @@ declare const _default: {
         "onUpdate:search"?: (query: string) => any;
         onClearSearch?: () => any;
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        sortableItemDragged: (event: {
+            id: string;
+            newIndex: number;
+        }) => void;
         "update:items": (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void;
         "update:openId": (id: string | number) => void;
         "update:selectedId": (id: string | number) => void;
@@ -2039,6 +2066,10 @@ declare const _default: {
                     default: string;
                 };
             }>> & {
+                onSortableItemDragged?: (event: {
+                    id: string;
+                    newIndex: number;
+                }) => any;
                 "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
                 "onUpdate:openId"?: (id: string | number) => any;
                 "onUpdate:selectedId"?: (id: string | number) => any;
@@ -2057,7 +2088,10 @@ declare const _default: {
             }>;
             $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:items", items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void) & ((event: "update:openId", id: string | number) => void) & ((event: "update:selectedId", id: string | number) => void) & ((event: "update:selectedChildId", id: string | number) => void) & ((event: "update:search", query: string) => void) & ((event: "clearSearch") => void);
+            $emit: ((event: "sortableItemDragged", event: {
+                id: string;
+                newIndex: number;
+            }) => void) & ((event: "update:items", items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void) & ((event: "update:openId", id: string | number) => void) & ((event: "update:selectedId", id: string | number) => void) & ((event: "update:selectedChildId", id: string | number) => void) & ((event: "update:search", query: string) => void) & ((event: "clearSearch") => void);
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
                 search: {
@@ -2115,6 +2149,10 @@ declare const _default: {
                     default: string;
                 };
             }>> & {
+                onSortableItemDragged?: (event: {
+                    id: string;
+                    newIndex: number;
+                }) => any;
                 "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
                 "onUpdate:openId"?: (id: string | number) => any;
                 "onUpdate:selectedId"?: (id: string | number) => any;
@@ -2122,6 +2160,10 @@ declare const _default: {
                 "onUpdate:search"?: (query: string) => any;
                 onClearSearch?: () => any;
             }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                sortableItemDragged: (event: {
+                    id: string;
+                    newIndex: number;
+                }) => void;
                 "update:items": (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void;
                 "update:openId": (id: string | number) => void;
                 "update:selectedId": (id: string | number) => void;
@@ -2218,6 +2260,10 @@ declare const _default: {
                 default: string;
             };
         }>> & {
+            onSortableItemDragged?: (event: {
+                id: string;
+                newIndex: number;
+            }) => any;
             "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
             "onUpdate:openId"?: (id: string | number) => any;
             "onUpdate:selectedId"?: (id: string | number) => any;
@@ -2284,6 +2330,10 @@ declare const _default: {
             default: string;
         };
     }>> & {
+        onSortableItemDragged?: (event: {
+            id: string;
+            newIndex: number;
+        }) => any;
         "onUpdate:items"?: (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => any;
         "onUpdate:openId"?: (id: string | number) => any;
         "onUpdate:selectedId"?: (id: string | number) => any;
@@ -2291,6 +2341,10 @@ declare const _default: {
         "onUpdate:search"?: (query: string) => any;
         onClearSearch?: () => any;
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        sortableItemDragged: (event: {
+            id: string;
+            newIndex: number;
+        }) => void;
         "update:items": (items: import("./components/sortableList/SortableList.types").SortableListItem[]) => void;
         "update:openId": (id: string | number) => void;
         "update:selectedId": (id: string | number) => void;

package/package.json

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

package/SortableList.vue_vue_type_style_index_0_scoped_402063dc_lang.css

@@ -1 +0,0 @@
-.list-search[data-v-402063dc]{margin-bottom:var(--spacing-100)}.sortable-list[data-v-402063dc],.locked-list[data-v-402063dc]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-75);color:var(--text-primary)}.locked-list[data-v-402063dc]{margin-top:var(--spacing-75)}.force-grabbing-cursor *[data-v-402063dc]{cursor:move!important;cursor:-webkit-grabbing!important;cursor:-moz-grabbing!important;cursor:grabbing!important}.empty-state-title[data-v-402063dc]{color:var(--text-disabled);padding:0 8px;width:100%}.loader-bars[data-v-402063dc]{display:flex;flex-direction:column;gap:6px}.loader-bars .loader-bar[data-v-402063dc]{height:40px;width:100%}

package/TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css

@@ -1 +0,0 @@
-.tabs-list[data-v-bab40cfe]{position:relative;padding:0;margin:0}.tabs-list--page[data-v-bab40cfe]{border-bottom:1px solid var(--common-divider);box-sizing:border-box}.tabs-list--page .tab-item[data-v-bab40cfe]{padding:0;margin-right:var(--spacing-200);min-height:calc(var(--spacing-600) - 1px)}.tabs-list--page .tabs-border-line[data-v-bab40cfe]{margin-top:-1px}.tabs-border-line[data-v-bab40cfe]{left:var(--57c21ae0);width:var(--bdc3e3e6);border-bottom:2px solid var(--primary-main);transition:left .2s ease-in-out,width .2s;position:absolute;margin-top:-2px}.tab-item[data-v-bab40cfe]{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;color:var(--action-active);gap:var(--spacing-100);vertical-align:middle;padding:0 var(--spacing-300);min-height:var(--spacing-600)}.tab-item[data-v-bab40cfe]:hover{cursor:pointer;color:var(--text-primary)}.tab-item--active[data-v-bab40cfe]{color:var(--text-primary)}.tab-item--disabled[data-v-bab40cfe]{color:var(--action-disabled);cursor:not-allowed;pointer-events:none}