@ironsource/shared-ui 2.0.1 → 2.0.2-rc.0

package/DataGrid.vue_vue_type_style_index_0_scoped_9cc6b34e_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-9cc6b34e]{position:sticky}.table-container[data-v-9cc6b34e]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-9cc6b34e]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-9cc6b34e]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-9cc6b34e]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-9cc6b34e]{width:13.75rem}.table-header.isStickyHeader[data-v-9cc6b34e]{z-index:calc(var(--b72a9fc4) + 3);top:0}.table-head-container[data-v-9cc6b34e]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-9cc6b34e]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-9cc6b34e]{display:inline-table}.table-header-actions[data-v-9cc6b34e]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-9cc6b34e]{position:relative}.table-row.loading[data-v-9cc6b34e]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-9cc6b34e]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-9cc6b34e]{border-bottom:none}.expanded-row[data-v-9cc6b34e]{grid-column:var(--30b75412);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-9cc6b34e]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md)}table.hasFooter[data-v-9cc6b34e]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-9cc6b34e],table th[data-v-9cc6b34e]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-9cc6b34e]:first-of-type,table th[data-v-9cc6b34e]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-9cc6b34e]:last-of-type,table th[data-v-9cc6b34e]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-9cc6b34e],table th.expand-toggle-cell[data-v-9cc6b34e]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-9cc6b34e]{border-bottom:none;z-index:calc(var(--b72a9fc4) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-9cc6b34e]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--b002aaea)}table>thead>tr>th[data-v-9cc6b34e]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-9cc6b34e]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-9cc6b34e]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-9cc6b34e]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-9cc6b34e]{cursor:pointer}table>thead.sticky[data-v-9cc6b34e]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-9cc6b34e]{z-index:calc(var(--b72a9fc4) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-9cc6b34e]{display:block}table>tbody>*>tr[data-v-9cc6b34e]{background-color:var(--background-default);min-height:var(--2e048053);height:auto;display:grid;align-items:center;grid-template-columns:var(--b002aaea)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-9cc6b34e]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-9cc6b34e]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-9cc6b34e]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--2e048053);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-9cc6b34e]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-9cc6b34e]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-9cc6b34e]{justify-content:flex-end;text-align:right}.section-container[data-v-9cc6b34e]{left:0}.sections[data-v-9cc6b34e]{display:flex}.section[data-v-9cc6b34e]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-9cc6b34e]{width:100%}.empty-state[data-v-9cc6b34e]{min-height:250px}

package/DataGridRowsCounter.vue_vue_type_style_index_0_scoped_9e366543_lang.css

@@ -0,0 +1 @@
+.data-grid-rows-counter[data-v-9e366543]{color:var(--text-secondary)}.text-strong[data-v-9e366543]{color:var(--text-primary)}

package/components/table/v4/DataGrid.vue.d.ts

@@ -154,6 +154,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title?(_: {}): any;
     search?(_: {}): any;
     "table-header-actions"?(_: {}): any;
+    "select-all-checkbox"?(_: {}): any;
     loader?(_: {}): any;
     expanded?(_: {
         row: import("@vueuse/core").UseVirtualListItem<Row>;

package/components/table/v4/DataGrid.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataGrid.vue2.js";
 /* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_4e432056_lang.css"; //*');
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4e432056"]]);
+// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_9cc6b34e_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9cc6b34e"]]);
 export {
-  a as default
+  s as default
 };

package/components/table/v4/DataGrid.vue2.js

@@ -1,27 +1,33 @@
- import "../../../DataGrid.vue_vue_type_style_index_0_scoped_4e432056_lang.css"; import { defineComponent as tt, useCssVars as et, unref as t, useSlots as at, computed as g, openBlock as i, createElementBlock as l, createElementVNode as r, normalizeStyle as R, normalizeClass as y, renderSlot as c, createVNode as u, withCtx as T, createTextVNode as C, toDisplayString as E, isRef as st, createCommentVNode as h, Fragment as x, renderList as B, createBlock as it, mergeProps as lt } from "vue";
-import I from "../../typography/v4/Typography.vue.js";
-import dt from "../../skeleton/v4/SkeletonV4.vue.js";
-import ot from "../../emptyState/v4/EmptyStateV4.vue.js";
-import p from "../../checkbox/v4/CheckboxV4.vue.js";
+ import "../../../DataGrid.vue_vue_type_style_index_0_scoped_9cc6b34e_lang.css"; import { defineComponent as ee, useCssVars as te, unref as e, useSlots as se, computed as g, openBlock as i, createElementBlock as l, createElementVNode as r, normalizeStyle as R, normalizeClass as y, renderSlot as n, createVNode as u, withCtx as T, createTextVNode as C, toDisplayString as E, isRef as ae, createCommentVNode as h, Fragment as x, renderList as B, createBlock as ie, mergeProps as le } from "vue";
+import V from "../../typography/v4/Typography.vue.js";
+import de from "../../skeleton/v4/SkeletonV4.vue.js";
+import oe from "../../emptyState/v4/EmptyStateV4.vue.js";
+import U from "../../checkbox/v4/CheckboxV4.vue.js";
 import { TableTestIdModifiers as f } from "../../../testids/index.js";
-import { tableCommon as nt } from "../common/Table.common.js";
-import rt from "./SortIcon.vue.js";
-import ct from "./ExpandRowToggle.vue.js";
-import ut from "../../search/v4/SearchV4.vue.js";
-import { useVModel as ht } from "@vueuse/core";
-const yt = ["data-testid"], ft = ["data-testid"], St = ["data-testid"], kt = ["data-testid"], mt = ["data-testid"], gt = { class: "search-wrapper" }, vt = ["data-testid"], bt = ["data-testid"], $t = { key: 0 }, Rt = {
+import { tableCommon as ne } from "../common/Table.common.js";
+import ce from "./SortIcon.vue.js";
+import re from "./ExpandRowToggle.vue.js";
+import ue from "../../search/v4/SearchV4.vue.js";
+import { useVModel as he } from "@vueuse/core";
+const ye = ["data-testid"], fe = ["data-testid"], Se = ["data-testid"], ke = ["data-testid"], me = ["data-testid"], ge = { class: "search-wrapper" }, be = ["data-testid"], ve = ["data-testid"], $e = {
+  key: 0,
+  class: "checkbox-cell"
+}, Re = {
   key: 1,
   class: "expand-toggle-cell"
-}, Tt = ["onClick"], Ct = { class: "table-head-container" }, Et = ["data-testid"], xt = ["onMouseenter"], Bt = { key: 0 }, It = {
+}, Te = ["onClick"], Ce = { class: "table-head-container" }, Ee = ["data-testid"], xe = ["onMouseenter"], Be = {
+  key: 0,
+  class: "checkbox-cell"
+}, Ve = {
   key: 1,
   class: "expand-toggle-cell"
-}, Vt = {
+}, we = {
   key: 2,
   class: "expanded-row"
-}, Pt = { key: 1 }, wt = {
+}, Ie = { key: 1 }, Pe = {
   key: 0,
   class: "table-footer"
-}, Gt = /* @__PURE__ */ tt({
+}, pe = /* @__PURE__ */ ee({
   __name: "DataGrid",
   props: {
     title: { default: "" },
@@ -30,7 +36,7 @@ const yt = ["data-testid"], ft = ["data-testid"], St = ["data-testid"], kt = ["d
     sections: { default: null },
     sort: { default: null },
     selection: { default: null },
-    getRowId: { type: Function, default: (a, S) => S },
+    getRowId: { type: Function, default: (s, S) => S },
     isSticky: { type: Boolean, default: !0 },
     isStickyHeader: { type: Boolean, default: !1 },
     isLoading: { type: Boolean, default: !1 },
@@ -50,19 +56,19 @@ const yt = ["data-testid"], ft = ["data-testid"], St = ["data-testid"], kt = ["d
     zIndexBase: { default: 100 }
   },
   emits: ["update:sort", "update:search", "update:selection", "onScroll", "saveRow", "loadMore"],
-  setup(a, { emit: S }) {
-    const o = a;
-    et((s) => ({
-      f7be0d24: a.zIndexBase,
-      "1ec56162": t(J),
-      "4abea3db": t(H),
-      "0d6494ba": t(q)
+  setup(s, { emit: S }) {
+    const o = s;
+    te((a) => ({
+      b72a9fc4: s.zIndexBase,
+      "30b75412": e(J),
+      b002aaea: e(H),
+      "2e048053": e(q)
     }));
-    const v = at(), {
+    const b = se(), {
       list: A,
-      containerProps: U,
-      wrapperProps: G,
-      activeRow: V,
+      containerProps: G,
+      wrapperProps: p,
+      activeRow: w,
       gridColumnTemplate: H,
       toggleSortOrder: Y,
       columnsStickyPositions: L,
@@ -70,232 +76,238 @@ const yt = ["data-testid"], ft = ["data-testid"], St = ["data-testid"], kt = ["d
       containerStyle: W,
       onScroll: N,
       savingRows: F,
-      hasExpandSlot: b,
+      hasExpandSlot: v,
       toggleExpandRow: j,
       cssRowHeight: q,
       cssExpandGridCol: J,
-      isRowExpanded: P,
+      isRowExpanded: I,
       hasCheckboxes: M
-    } = nt(o, S), O = g(() => !!v.footer), k = ht(o, "search", S), z = g(() => o.selection.length || 0), w = g(() => z.value === o.rows.length), D = (s) => o.selection.includes(s), K = (s) => {
-      D(s) ? $(o.selection.filter((n) => n !== s)) : $([...o.selection, s]);
+    } = ne(o, S), O = g(() => !!b.footer), k = he(o, "search", S), z = g(() => o.selection.length || 0), P = g(
+      () => o.rows.length && z.value === o.rows.length
+    ), D = (a) => o.selection.includes(a), K = (a) => {
+      D(a) ? $(o.selection.filter((c) => c !== a)) : $([...o.selection, a]);
     }, X = () => {
-      w.value ? $([]) : $(o.rows.map((s, n) => o.getRowId(s, n)));
-    }, $ = (s) => {
-      S("update:selection", s);
+      P.value ? $([]) : $(o.rows.map((a, c) => o.getRowId(a, c)));
+    }, $ = (a) => {
+      S("update:selection", a);
     }, Z = g(
       () => o.emptyStateVariant ?? (k.value ? "no-results" : "no-data")
     ), _ = g(
       () => o.emptyStateSubtitle ? o.emptyStateSubtitle : k.value ? "Search again with different filters" : void 0
     );
-    return (s, n) => (i(), l("div", {
+    return (a, c) => (i(), l("div", {
       class: "table-container",
-      "data-testid": `${a.testId}-${t(f).CONTAINER}`,
-      onMouseleave: n[2] || (n[2] = (e) => V.value = null)
+      "data-testid": `${s.testId}-${e(f).CONTAINER}`,
+      onMouseleave: c[2] || (c[2] = (t) => w.value = null)
     }, [
       r("table", {
-        ref: t(U).ref,
-        style: R(t(W)),
+        ref: e(G).ref,
+        style: R(e(W)),
         class: y({
-          hasFooter: t(O)
+          hasFooter: e(O)
         }),
-        "data-testid": `${a.testId}-${t(f).TABLE}`,
-        onScrollPassive: n[1] || (n[1] = //@ts-ignore
-        (...e) => t(N) && t(N)(...e))
+        "data-testid": `${s.testId}-${e(f).TABLE}`,
+        onScrollPassive: c[1] || (c[1] = //@ts-ignore
+        (...t) => e(N) && e(N)(...t))
       }, [
-        a.title || t(v).title || t(Q) || t(v)["table-header-actions"] ? (i(), l("div", {
+        s.title || e(b).title || e(Q) || e(b)["table-header-actions"] ? (i(), l("div", {
           key: 0,
-          class: y(["table-header", { isStickyHeader: a.isStickyHeader }]),
-          "data-testid": `${a.testId}-${t(f).HEADER}`
+          class: y(["table-header", { isStickyHeader: s.isStickyHeader }]),
+          "data-testid": `${s.testId}-${e(f).HEADER}`
         }, [
           r("div", {
             class: "table-title",
-            "data-testid": `${a.testId}-${t(f).TITLE}`
+            "data-testid": `${s.testId}-${e(f).TITLE}`
           }, [
-            c(s.$slots, "title", {}, () => [
-              u(t(I), { variant: "h3" }, {
+            n(a.$slots, "title", {}, () => [
+              u(e(V), { variant: "h3" }, {
                 default: T(() => [
-                  C(E(a.title), 1)
+                  C(E(s.title), 1)
                 ]),
                 _: 1
               })
             ], !0)
-          ], 8, kt),
+          ], 8, ke),
           r("div", {
             class: "table-header-right",
-            "data-testid": `${a.testId}-${t(f).HEADER_RIGHT}`
+            "data-testid": `${s.testId}-${e(f).HEADER_RIGHT}`
           }, [
-            a.showSearch ? c(s.$slots, "search", { key: 0 }, () => [
-              r("div", gt, [
-                u(t(ut), {
-                  modelValue: t(k),
-                  "onUpdate:modelValue": n[0] || (n[0] = (e) => st(k) ? k.value = e : null),
-                  placeholder: a.searchPlaceholder,
-                  "auto-focus": a.searchAutoFocus,
-                  "test-id": a.testId
+            s.showSearch ? n(a.$slots, "search", { key: 0 }, () => [
+              r("div", ge, [
+                u(e(ue), {
+                  modelValue: e(k),
+                  "onUpdate:modelValue": c[0] || (c[0] = (t) => ae(k) ? k.value = t : null),
+                  placeholder: s.searchPlaceholder,
+                  "auto-focus": s.searchAutoFocus,
+                  "test-id": s.testId
                 }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id"])
               ])
             ], !0) : h("", !0)
-          ], 8, mt),
-          t(v)["table-header-actions"] ? (i(), l("div", {
+          ], 8, me),
+          e(b)["table-header-actions"] ? (i(), l("div", {
             key: 0,
             class: "table-header-actions",
-            "data-testid": `${a.testId}-${t(f).ACTIONS}`
+            "data-testid": `${s.testId}-${e(f).ACTIONS}`
           }, [
-            c(s.$slots, "table-header-actions", {}, void 0, !0)
-          ], 8, vt)) : h("", !0)
-        ], 10, St)) : h("", !0),
+            n(a.$slots, "table-header-actions", {}, void 0, !0)
+          ], 8, be)) : h("", !0)
+        ], 10, Se)) : h("", !0),
         r("thead", {
-          class: y({ sticky: a.isSticky, isStickyHeader: a.isStickyHeader })
+          class: y({ sticky: s.isSticky, isStickyHeader: s.isStickyHeader })
         }, [
           r("div", {
             class: "sections",
-            "data-testid": `${a.testId}-${t(f).SECTIONS}`
+            "data-testid": `${s.testId}-${e(f).SECTIONS}`
           }, [
-            (i(!0), l(x, null, B(a.sections, (e) => (i(), l("div", {
-              key: e.id,
-              class: y(["section-container", { sticky: e.isSticky }])
+            (i(!0), l(x, null, B(s.sections, (t) => (i(), l("div", {
+              key: t.id,
+              class: y(["section-container", { sticky: t.isSticky }])
             }, [
-              c(s.$slots, `section-${e.id}`, {}, () => [
+              n(a.$slots, `section-${t.id}`, {}, () => [
                 r("div", {
-                  style: R({ width: e.width + "px" }),
+                  style: R({ width: t.width + "px" }),
                   class: y({ section: !0 })
                 }, [
-                  u(t(I), { variant: "body2" }, {
+                  u(e(V), { variant: "body2" }, {
                     default: T(() => [
-                      C(E(e.title), 1)
+                      C(E(t.title), 1)
                     ]),
                     _: 2
                   }, 1024)
                 ], 4)
               ], !0)
             ], 2))), 128))
-          ], 8, bt),
+          ], 8, ve),
           r("tr", null, [
-            t(M) ? (i(), l("th", $t, [
-              u(t(p), {
-                "is-checked": t(w),
-                "is-indeterminate": !t(w) && t(z) > 0,
-                "onUpdate:isChecked": X
-              }, null, 8, ["is-checked", "is-indeterminate"])
+            e(M) ? (i(), l("th", $e, [
+              n(a.$slots, "select-all-checkbox", {}, () => [
+                u(e(U), {
+                  "is-checked": e(P),
+                  "is-indeterminate": !e(P) && e(z) > 0,
+                  "onUpdate:isChecked": X
+                }, null, 8, ["is-checked", "is-indeterminate"])
+              ], !0)
             ])) : h("", !0),
-            t(b) ? (i(), l("th", Rt)) : h("", !0),
-            (i(!0), l(x, null, B(a.columns, (e) => (i(), l("th", {
-              key: e.id,
+            e(v) ? (i(), l("th", Re)) : h("", !0),
+            (i(!0), l(x, null, B(s.columns, (t) => (i(), l("th", {
+              key: t.id,
               class: y({
-                sticky: e.isSticky,
-                isStickyRight: e.isStickyRight,
-                bordered: e.isBordered,
-                isTextRight: e.isTextRight,
-                isSortable: e.isSortable
+                sticky: t.isSticky,
+                isStickyRight: t.isStickyRight,
+                bordered: t.isBordered,
+                isTextRight: t.isTextRight,
+                isSortable: t.isSortable,
+                [`column-${t.id}`]: !0
               }),
-              style: R(e.isSticky ? t(L)[e.id] : null),
-              onClick: (m) => e.isSortable ? t(Y)(e) : null
+              style: R(t.isSticky ? e(L)[t.id] : null),
+              onClick: (m) => t.isSortable ? e(Y)(t) : null
             }, [
-              r("div", Ct, [
-                c(s.$slots, `header-${e.id}`, { column: e }, () => [
-                  u(t(I), { variant: "tableLabel" }, {
+              r("div", Ce, [
+                n(a.$slots, `header-${t.id}`, { column: t }, () => [
+                  u(e(V), { variant: "tableLabel" }, {
                     default: T(() => [
-                      C(E(e.title), 1)
+                      C(E(t.title), 1)
                     ]),
                     _: 2
                   }, 1024)
                 ], !0),
-                e.isSortable && e.id === a.sort?.sortBy ? (i(), it(rt, {
+                t.isSortable && t.id === s.sort?.sortBy ? (i(), ie(ce, {
                   key: 0,
-                  "sort-order": a.sort.sortOrder
+                  "sort-order": s.sort.sortOrder
                 }, null, 8, ["sort-order"])) : h("", !0)
               ])
-            ], 14, Tt))), 128))
+            ], 14, Te))), 128))
           ])
         ], 2),
         r("tbody", null, [
-          t(A).length > 0 ? (i(), l("div", lt({
+          e(A).length > 0 ? (i(), l("div", le({
             key: 0,
             class: "table-body-wrapper",
-            "data-testid": `${a.testId}-${t(f).BODY_WRAPPER}`
-          }, t(G)), [
-            (i(!0), l(x, null, B(t(A), (e) => (i(), l("tr", {
-              key: e.index,
+            "data-testid": `${s.testId}-${e(f).BODY_WRAPPER}`
+          }, e(p)), [
+            (i(!0), l(x, null, B(e(A), (t) => (i(), l("tr", {
+              key: t.index,
               class: y(["table-row", {
-                loading: a.isLoading || a.isLoading && !e.data || t(F).includes(e.index),
-                active: t(V) === e.index,
-                expanded: t(b) && t(P)(e.index)
+                loading: s.isLoading || s.isLoading && !t.data || e(F).includes(t.index),
+                active: e(w) === t.index,
+                expanded: e(v) && e(I)(t.index)
               }]),
-              onMouseenter: (m) => V.value = e.index
+              onMouseenter: (m) => w.value = t.index
             }, [
-              t(M) ? (i(), l("td", Bt, [
-                u(t(p), {
-                  "is-checked": D(a.getRowId(e.data, e.index)),
+              e(M) ? (i(), l("td", Be, [
+                u(e(U), {
+                  "is-checked": D(s.getRowId(t.data, t.index)),
                   size: "sm",
-                  "onUpdate:isChecked": (m) => K(a.getRowId(e.data, e.index))
+                  "onUpdate:isChecked": (m) => K(s.getRowId(t.data, t.index))
                 }, null, 8, ["is-checked", "onUpdate:isChecked"])
               ])) : h("", !0),
-              t(b) ? (i(), l("td", It, [
-                u(ct, {
-                  expanded: t(P)(e.index),
-                  onClick: (m) => t(j)(e.index, m)
+              e(v) ? (i(), l("td", Ve, [
+                u(re, {
+                  expanded: e(I)(t.index),
+                  onClick: (m) => e(j)(t.index, m)
                 }, null, 8, ["expanded", "onClick"])
               ])) : h("", !0),
-              (i(!0), l(x, null, B(a.columns, (m, d) => (i(), l("td", {
+              (i(!0), l(x, null, B(s.columns, (m, d) => (i(), l("td", {
                 key: d,
                 class: y({
-                  sticky: a.columns[d].isSticky,
-                  isStickyRight: a.columns[d].isStickyRight,
-                  bordered: a.columns[d].isBordered,
-                  isTextRight: a.columns[d].isTextRight
+                  sticky: s.columns[d].isSticky,
+                  isStickyRight: s.columns[d].isStickyRight,
+                  bordered: s.columns[d].isBordered,
+                  isTextRight: s.columns[d].isTextRight,
+                  [`column-${s.columns[d].id}`]: !0
                 }),
                 style: R(
-                  a.columns[d].isSticky ? t(L)[a.columns[d].id] : null
+                  s.columns[d].isSticky ? e(L)[s.columns[d].id] : null
                 )
               }, [
-                !a.isLoading || a.isLoading && e.data[d] ? (i(), l("div", {
+                !s.isLoading || s.isLoading && t.data[d] ? (i(), l("div", {
                   key: 0,
-                  class: y(["table-cell", { last: d === e.data.length - 1 }])
+                  class: y(["table-cell", { last: d === t.data.length - 1 }])
                 }, [
-                  c(s.$slots, `cell-${a.columns[d].id}`, {
-                    cell: e.data[d],
-                    isLoading: t(F).includes(e.index),
+                  n(a.$slots, `cell-${s.columns[d].id}`, {
+                    cell: t.data[d],
+                    isLoading: e(F).includes(t.index),
                     cellIndex: d,
-                    row: e,
-                    rowIndex: e.index
+                    row: t,
+                    rowIndex: t.index
                   }, () => [
-                    u(t(I), { variant: "body1" }, {
+                    u(e(V), { variant: "body1" }, {
                       default: T(() => [
-                        C(E(e.data[d]), 1)
+                        C(E(t.data[d]), 1)
                       ]),
                       _: 2
                     }, 1024)
                   ], !0)
-                ], 2)) : c(s.$slots, "loader", { key: 1 }, () => [
-                  u(t(dt), { round: "" })
+                ], 2)) : n(a.$slots, "loader", { key: 1 }, () => [
+                  u(e(de), { round: "" })
                 ], !0)
               ], 6))), 128)),
-              t(b) && t(P)(e.index) ? (i(), l("div", Vt, [
-                c(s.$slots, "expanded", {
-                  row: e,
-                  gridColumnTemplate: t(H)
+              e(v) && e(I)(t.index) ? (i(), l("div", we, [
+                n(a.$slots, "expanded", {
+                  row: t,
+                  gridColumnTemplate: e(H)
                 }, void 0, !0)
               ])) : h("", !0)
-            ], 42, xt))), 128))
-          ], 16, Et)) : (i(), l("div", Pt, [
-            c(s.$slots, "empty-state", {}, () => [
-              u(t(ot), {
+            ], 42, xe))), 128))
+          ], 16, Ee)) : (i(), l("div", Ie, [
+            n(a.$slots, "empty-state", {}, () => [
+              u(e(oe), {
                 class: "empty-state",
-                title: a.emptyStateTitle,
-                subtitle: t(_),
-                variant: t(Z),
-                "test-id": `${a.testId}-${t(f).EMPTY_STATE}`
+                title: s.emptyStateTitle,
+                subtitle: e(_),
+                variant: e(Z),
+                "test-id": `${s.testId}-${e(f).EMPTY_STATE}`
               }, null, 8, ["title", "subtitle", "variant", "test-id"])
             ], !0)
           ]))
         ])
-      ], 46, ft),
-      t(O) ? (i(), l("div", wt, [
-        c(s.$slots, "footer", {}, void 0, !0)
+      ], 46, fe),
+      e(O) ? (i(), l("div", Pe, [
+        n(a.$slots, "footer", {}, void 0, !0)
       ])) : h("", !0)
-    ], 40, yt));
+    ], 40, ye));
   }
 });
 export {
-  Gt as default
+  pe as default
 };

package/components/table/v4/DataGridRowsCounter.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataGridRowsCounter.vue2.js";
-/* empty css                          */import t from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_11c1bb3f_lang.css"; //*');
-const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-11c1bb3f"]]);
+/* empty css                          */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_9e366543_lang.css"; //*');
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9e366543"]]);
 export {
   r as default
 };

package/components/table/v4/DataGridRowsCounter.vue2.js

@@ -1,26 +1,32 @@
- import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_11c1bb3f_lang.css"; import { defineComponent as i, openBlock as l, createElementBlock as c, createVNode as e, unref as o, withCtx as a, createTextVNode as t, toDisplayString as u } from "vue";
+ import "../../../DataGridRowsCounter.vue_vue_type_style_index_0_scoped_9e366543_lang.css"; import { defineComponent as l, openBlock as u, createElementBlock as i, createVNode as e, unref as o, withCtx as a, createTextVNode as t, toDisplayString as s } from "vue";
 import r from "../../typography/v4/Typography.vue.js";
-const d = { class: "data-grid-rows-counter" }, m = /* @__PURE__ */ i({
+const c = { class: "data-grid-rows-counter" }, m = /* @__PURE__ */ l({
   __name: "DataGridRowsCounter",
   props: {
     count: { default: 0 },
     totalCount: { default: 0 }
   },
   setup(n) {
-    return (s, f) => (l(), c("div", d, [
+    return (d, f) => (u(), i("div", c, [
       e(o(r), { variant: "body2" }, {
         default: a(() => [
           t(" Displaying "),
-          e(o(r), { variant: "subtitle2" }, {
+          e(o(r), {
+            class: "text-strong",
+            variant: "subtitle2"
+          }, {
             default: a(() => [
-              t(u(n.count), 1)
+              t(s(n.count), 1)
             ]),
             _: 1
           }),
           t(" out of "),
-          e(o(r), { variant: "subtitle2" }, {
+          e(o(r), {
+            class: "text-strong",
+            variant: "subtitle2"
+          }, {
             default: a(() => [
-              t(u(n.totalCount), 1)
+              t(s(n.totalCount), 1)
             ]),
             _: 1
           }),

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

@@ -590,6 +590,7 @@ declare const DataGridTypes: () => (({
         title?(_: {}): any;
         search?(_: {}): any;
         "table-header-actions"?(_: {}): any;
+        "select-all-checkbox"?(_: {}): any;
         loader?(_: {}): any;
         expanded?(_: {
             row: import("@vueuse/core").UseVirtualListItem<import("../common/Table.types").Row>;

package/index.d.ts

@@ -2339,6 +2339,7 @@ declare const _default: {
             title?(_: {}): any;
             search?(_: {}): any;
             "table-header-actions"?(_: {}): any;
+            "select-all-checkbox"?(_: {}): any;
             loader?(_: {}): any;
             expanded?(_: {
                 row: import("@vueuse/core").UseVirtualListItem<import("./components/table/common/Table.types").Row>;
@@ -2987,6 +2988,7 @@ declare const _default: {
             title?(_: {}): any;
             search?(_: {}): any;
             "table-header-actions"?(_: {}): any;
+            "select-all-checkbox"?(_: {}): any;
             loader?(_: {}): any;
             expanded?(_: {
                 row: import("@vueuse/core").UseVirtualListItem<import("./components/table/common/Table.types").Row>;

package/package.json

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

package/DataGrid.vue_vue_type_style_index_0_scoped_4e432056_lang.css

@@ -1 +0,0 @@
-.sticky[data-v-4e432056]{position:sticky}.table-container[data-v-4e432056]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-4e432056]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-4e432056]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-4e432056]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-4e432056]{width:13.75rem}.table-header.isStickyHeader[data-v-4e432056]{z-index:calc(var(--f7be0d24) + 3);top:0}.table-head-container[data-v-4e432056]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-4e432056]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-4e432056]{display:inline-table}.table-header-actions[data-v-4e432056]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-4e432056]{position:relative}.table-row.loading[data-v-4e432056]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-4e432056]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-4e432056]{border-bottom:none}.expanded-row[data-v-4e432056]{grid-column:var(--1ec56162);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-4e432056]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md)}table.hasFooter[data-v-4e432056]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-4e432056],table th[data-v-4e432056]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-4e432056]:first-of-type,table th[data-v-4e432056]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-4e432056]:last-of-type,table th[data-v-4e432056]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-4e432056],table th.expand-toggle-cell[data-v-4e432056]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-4e432056]{border-bottom:none;z-index:calc(var(--f7be0d24) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-4e432056]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--4abea3db)}table>thead>tr>th[data-v-4e432056]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-4e432056]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-4e432056]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-4e432056]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-4e432056]{cursor:pointer}table>thead.sticky[data-v-4e432056]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-4e432056]{z-index:calc(var(--f7be0d24) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-4e432056]{display:block}table>tbody>*>tr[data-v-4e432056]{background-color:var(--background-default);min-height:var(--0d6494ba);height:auto;display:grid;align-items:center;grid-template-columns:var(--4abea3db)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-4e432056]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-4e432056]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-4e432056]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--0d6494ba);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-4e432056]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-4e432056]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-4e432056]{justify-content:flex-end;text-align:right}.section-container[data-v-4e432056]{left:0}.sections[data-v-4e432056]{display:flex}.section[data-v-4e432056]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-4e432056]{width:100%}.empty-state[data-v-4e432056]{min-height:250px}

package/DataGridRowsCounter.vue_vue_type_style_index_0_scoped_11c1bb3f_lang.css

@@ -1 +0,0 @@
-div[data-v-11c1bb3f]{display:block}