@ironsource/shared-ui 2.1.8-rc.0 → 2.1.8-rc.3

package/DataGrid.vue_vue_type_style_index_0_scoped_7524407f_lang.css

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

package/DataGridRowsCounter.vue_vue_type_style_index_0_scoped_ef699ec5_lang.css

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

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_1726ad49_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-1726ad49]{position:relative}.dropdown-trigger[data-v-1726ad49]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.25rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-1726ad49]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-1726ad49]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-1726ad49]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-1726ad49]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-1726ad49],.dropdown-trigger.disabled .caret-down[data-v-1726ad49]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-1726ad49]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-1726ad49]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-1726ad49]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-1726ad49],.dropdown-trigger.state-success[data-v-1726ad49],.dropdown-trigger.state-warning[data-v-1726ad49]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-1726ad49],.dropdown-trigger.state-success.small[data-v-1726ad49],.dropdown-trigger.state-warning.small[data-v-1726ad49]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-1726ad49],.dropdown-trigger.state-success.large[data-v-1726ad49],.dropdown-trigger.state-warning.large[data-v-1726ad49]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-1726ad49]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-1726ad49]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-1726ad49]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-1726ad49]{color:var(--action-active)}.content[data-v-1726ad49]{display:flex;flex:1;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-1726ad49]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-1726ad49]{width:20px;height:20px;flex:none}.content .image img[data-v-1726ad49]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-1726ad49]{display:flex;color:var(--action-active)}.content .status-dot[data-v-1726ad49]{padding-right:.25rem}.content .status-dot>div[data-v-1726ad49]{position:relative;top:-1px}.dropdown-field-label[data-v-1726ad49]{color:var(--text-primary)}.dropdown-field-help-text[data-v-1726ad49]{margin-top:4px;position:absolute}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css

@@ -0,0 +1 @@
+.child-options[data-v-a51b6929]{padding-left:1rem}

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

@@ -1,7 +1,7 @@
 import o from "./DefaultDropdownTrigger.vue2.js";
 /* empty css                             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_98819e5a_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-98819e5a"]]);
+// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_1726ad49_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-1726ad49"]]);
 export {
   p as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_98819e5a_lang.css"; import { defineComponent as O, computed as r, openBlock as o, createElementBlock as n, createBlock as k, createCommentVNode as d, createElementVNode as c, mergeProps as m, unref as l, renderSlot as u, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as w } from "vue";
+ import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_1726ad49_lang.css"; import { defineComponent as O, computed as r, openBlock as o, createElementBlock as n, createBlock as k, createCommentVNode as d, createElementVNode as c, mergeProps as m, unref as l, renderSlot as u, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as w } from "vue";
 import V from "../../typography/v4/Typography.vue.js";
 import { DropdownTestIdModifiers as p } from "../../../testids/index.js";
 import h from "../../icon/v4/IconV4.vue.js";

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

@@ -1,7 +1,7 @@
 import o from "./TreeDropdown.vue2.js";
 /* empty css                   */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_ffd0b476_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ffd0b476"]]);
+// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a51b6929"]]);
 export {
   s as default
 };

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

@@ -1,6 +1,6 @@
- import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_ffd0b476_lang.css"; import { defineComponent as j, provide as F, ref as s, onMounted as R, watch as v, openBlock as m, createBlock as U, unref as a, withCtx as K, createVNode as k, normalizeProps as G, guardReactiveProps as H, renderSlot as J, withModifiers as q, createElementBlock as N, withDirectives as Q, createElementVNode as W, Fragment as X, renderList as Y, vShow as Z, createCommentVNode as _ } from "vue";
-import ee from "./DropdownV4.vue.js";
-import ne from "./DefaultDropdownTrigger.vue.js";
+ import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css"; import { defineComponent as j, provide as F, ref as s, onMounted as R, watch as v, openBlock as m, createBlock as U, unref as a, withCtx as K, createVNode as k, normalizeProps as G, guardReactiveProps as H, createSlots as J, renderSlot as Q, withModifiers as q, createElementBlock as N, withDirectives as W, createElementVNode as X, Fragment as Y, renderList as Z, vShow as _, createCommentVNode as ee } from "vue";
+import ne from "./DropdownV4.vue.js";
+import le from "./DefaultDropdownTrigger.vue.js";
 import "./IconButtonDropdownTrigger.vue.js";
 import "./ChipDropdownTrigger.vue.js";
 import "./AppDropdownTrigger.vue.js";
@@ -8,12 +8,12 @@ import "./ButtonDropdownTrigger.vue.js";
 import "./ButtonFilterDropdownTrigger.vue.js";
 import "./TreeDropdown.vue.js";
 import z from "./OptionV4.vue.js";
-import { useChildOptions as le } from "../composables/useChildOptions.js";
-import oe from "../../search/v4/SearchV4.vue.js";
-const te = {
+import { useChildOptions as oe } from "../composables/useChildOptions.js";
+import te from "../../search/v4/SearchV4.vue.js";
+const ie = {
   key: 0,
   class: "child-options"
-}, me = /* @__PURE__ */ j({
+}, Ke = /* @__PURE__ */ j({
   __name: "TreeDropdown",
   props: {
     options: null,
@@ -60,7 +60,7 @@ const te = {
         i.value = [...l.selected];
       }
     );
-    const { hasChildren: p, getChildren: y, allChildrenSelected: g, someChildrenSelected: V } = le(i, l.optionChildrenKey), b = (n) => {
+    const { hasChildren: p, getChildren: y, allChildrenSelected: g, someChildrenSelected: V } = oe(i, l.optionChildrenKey), b = (n) => {
       if (p(n)) {
         g(n) ? i.value = i.value.filter(
           (t) => !y(n).includes(t)
@@ -73,11 +73,11 @@ const te = {
       i.value.includes(n) ? i.value = i.value.filter(
         (t) => t !== n
       ) : i.value = [...i.value, n];
-    }, E = (n) => i.value.includes(n), D = (n) => 1 + (p(n) ? y(n).length : 0), x = () => {
+    }, E = (n) => i.value.includes(n), D = (n) => 1 + (p(n) ? y(n).length : 0), B = () => {
       I("update:selected", i.value);
-    }, B = () => {
-      i.value = [];
     }, M = () => {
+      i.value = [];
+    }, P = () => {
       const n = /* @__PURE__ */ new Set([]);
       h.value.forEach((e) => {
         if (l.selected?.includes(e))
@@ -98,10 +98,10 @@ const te = {
     v(
       () => l.isOpen,
       () => {
-        l.isOpen ? f.value = M() : (i.value = [...l.selected], u.value = "");
+        l.isOpen ? f.value = P() : (i.value = [...l.selected], u.value = "");
       }
     );
-    const d = s({}), P = (n) => {
+    const d = s({}), x = (n) => {
       d.value[n[l.optionUniqueIdKey]] ? delete d.value[n[l.optionUniqueIdKey]] : d.value[n[l.optionUniqueIdKey]] = 1;
     };
     function A(n, t) {
@@ -126,7 +126,7 @@ const te = {
       () => {
         L(u.value);
       }
-    ), (n, t) => (m(), U(a(ee), {
+    ), (n, t) => (m(), U(a(ne), {
       multi: "",
       class: "tree-dropdown",
       "show-select-all": !1,
@@ -146,19 +146,22 @@ const te = {
       "trigger-show-all-selected-text": !1,
       "predefined-trigger": "default",
       "onUpdate:isOpen": t[1] || (t[1] = (e) => I("update:isOpen", e)),
-      onApply: x,
-      onClear: B
+      onApply: B,
+      onClear: M
     }, {
       "dropdown-trigger": K(({ defaultTriggerProps: e }) => [
-        k(a(ne), G(H(e)), {
-          "end-icon": K(() => [
-            J(n.$slots, "trigger-end-icon", {}, void 0, !0)
-          ]),
-          _: 2
-        }, 1040)
+        k(a(le), G(H(e)), J({ _: 2 }, [
+          n.$slots["trigger-end-icon"] ? {
+            name: "end-icon",
+            fn: K(() => [
+              Q(n.$slots, "trigger-end-icon", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040)
       ]),
       "inline-search": K(() => [
-        k(a(oe), {
+        k(a(te), {
           modelValue: u.value,
           "onUpdate:modelValue": t[0] || (t[0] = (e) => u.value = e),
           placeholder: o.inlineSearchPlaceholder,
@@ -184,11 +187,11 @@ const te = {
           "tree-main-option-expanded": d.value[e[o.optionUniqueIdKey]],
           "stop-option-click-event-propagation": "",
           onClick: q(() => b(e), ["stop"]),
-          onToggleTreeCollapse: P
+          onToggleTreeCollapse: x
         }, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-main-option", "tree-main-option-expanded", "onClick"]),
-        a(p)(e) ? (m(), N("div", te, [
-          Q(W("div", null, [
-            (m(!0), N(X, null, Y(a(y)(e), (c, C) => (m(), U(a(z), {
+        a(p)(e) ? (m(), N("div", ie, [
+          W(X("div", null, [
+            (m(!0), N(Y, null, Z(a(y)(e), (c, C) => (m(), U(a(z), {
               key: `${r}-${C}`,
               option: c,
               "selected-prop": E(c),
@@ -204,14 +207,14 @@ const te = {
               onClick: q(() => b(c), ["stop"])
             }, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-child-shown", "onClick"]))), 128))
           ], 512), [
-            [Z, d.value[e[o.optionUniqueIdKey]]]
+            [_, d.value[e[o.optionUniqueIdKey]]]
           ])
-        ])) : _("", !0)
+        ])) : ee("", !0)
       ]),
       _: 3
     }, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled"]));
   }
 });
 export {
-  me as default
+  Ke as default
 };

package/components/table/common/Table.common.js

@@ -1,120 +1,123 @@
-import { useSlots as K, ref as c, provide as N, computed as s, onMounted as V, nextTick as j } from "vue";
+import { useSlots as G, ref as c, provide as N, computed as s, onMounted as V, nextTick as j } from "vue";
 import { useVirtualList as q, useInfiniteScroll as F } from "@vueuse/core";
 import { TableContext as J } from "./TableContext.js";
-const Q = 46, U = 46, tt = (o, a) => {
-  const m = K(), u = c([]);
+const Q = 46, U = 46, tt = (e, u) => {
+  const S = G(), a = c([]);
   N(J, {
-    onClose({ rowIndex: t, cellIndex: e, value: n } = {}) {
-      n && (u.value = [...u.value, t], a("saveRow", {
+    onClose({ rowIndex: t, cellIndex: o, value: n } = {}) {
+      n && (a.value = [...a.value, t], u("saveRow", {
         rowIndex: t,
-        cellIndex: e,
+        cellIndex: o,
         value: n,
         confirm: () => {
-          u.value = u.value.filter(
-            (l) => l !== t
+          a.value = a.value.filter(
+            (i) => i !== t
           );
         }
       }));
     },
     setActiveMenuRow(t) {
-      C.value = t;
+      x.value = t;
     }
   });
-  const x = s(() => !!o.selection), T = s(() => {
-    const t = (x.value ? `${U}px ` : "") + (g.value ? `${Q}px ` : "");
-    return o.columns.reduce((e, n) => {
-      const l = n.width ? `${n.width}px` : `${n.colSpan || 1}fr`;
-      return `${e} ${l}`;
+  const y = s(() => !!e.selection), C = s(() => {
+    const t = (y.value ? `${U}px ` : "") + (g.value ? `${Q}px ` : "");
+    return e.columns.reduce((o, n) => {
+      const i = n.width ? `${n.width}px` : `${n.colSpan || 1}fr`;
+      return `${o} ${i}`;
     }, t);
-  }), g = s(() => !!m.expanded), y = c(null), C = c(null), H = s(() => Array(o.loadingRowCount).fill(
-    Array(o.columns.length).fill("")
-  )), $ = s(() => o.isLoading ? [...o.rows, ...H.value] : o.rows), { list: R, containerProps: i, wrapperProps: b, scrollTo: k } = q(
-    $,
+  }), g = s(() => !!S.expanded), A = c(null), x = c(null), R = s(() => Array(e.loadingRowCount).fill(
+    Array(e.columns.length).fill("")
+  )), H = s(() => e.rows.length && Array.isArray(e.rows[0]) ? e.isLoading ? [...e.rows, ...R.value] : e.rows : e.isLoading ? [
+    ...e.rows.map((o) => o[e.rowDataKey]),
+    ...R.value
+  ] : e.rows.map((o) => o[e.rowDataKey])), { list: T, containerProps: l, wrapperProps: $, scrollTo: b } = q(
+    H,
     {
-      itemHeight: g.value ? (t) => w[t] ?? o.rowHeight : o.rowHeight
+      itemHeight: g.value ? (t) => w[t] ?? e.rowHeight : e.rowHeight
     }
-  ), B = c(null), h = c(0), I = s(() => !!m.search), O = (t) => {
-    i.onScroll(), h.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, a("onScroll", t.target.scrollTop);
+  ), k = c(null), h = c(0), B = s(() => !!S.search), I = (t) => {
+    l.onScroll(), h.value = t.target.scrollLeft + t.target.getBoundingClientRect().width, u("onScroll", t.target.scrollTop);
   };
   V(() => {
-    h.value = i.ref.value?.getBoundingClientRect().width, o.defaultScrollPosition && setTimeout(() => {
-      i.ref.value?.scrollTo({
-        top: o.defaultScrollPosition,
+    h.value = l.ref.value?.getBoundingClientRect().width, e.defaultScrollPosition && setTimeout(() => {
+      l.ref.value?.scrollTo({
+        top: e.defaultScrollPosition,
         behavior: "smooth"
       });
     }, 300);
   });
-  const P = s(() => {
-    const [t] = R.value;
+  const O = s(() => {
+    const [t] = T.value;
     return t && t.index > 0;
-  }), A = s(() => i.style), E = s(() => o.columns.reduce((t, e) => (e.isSticky && (t[e.id] = _(e)), t), {}));
+  }), P = s(() => l.style), L = s(() => e.columns.reduce((t, o) => (o.isSticky && (t[o.id] = M(o)), t), {}));
   F(
-    i.ref,
+    l.ref,
     () => {
-      o.isInfiniteScroll && a("loadMore");
+      e.isInfiniteScroll && u("loadMore");
     },
-    { distance: o.infiniteScrollThreshold }
+    { distance: e.infiniteScrollThreshold }
   );
-  function L() {
-    i.ref.value?.scrollTo({
+  function E() {
+    l.ref.value?.scrollTo({
       top: 0,
       behavior: "smooth"
     });
   }
-  function M(t) {
-    if (!o.sort)
+  function D(t) {
+    if (!e.sort)
       return;
-    const e = o.sort.sortBy === t.id;
+    const o = e.sort.sortBy === t.id;
     if (!(t.isSortable || t.isSortable === void 0))
       return;
-    let l = o.sort.sortOrder, f = o.sort.sortBy;
-    e ? l = o.sort.sortOrder === "asc" ? "desc" : "asc" : f = t.id, a("update:sort", { sortBy: f, sortOrder: l });
+    let i = e.sort.sortOrder, f = e.sort.sortBy;
+    o ? i = e.sort.sortOrder === "asc" ? "desc" : "asc" : f = t.id, u("update:sort", { sortBy: f, sortOrder: i });
   }
-  function _(t) {
-    const { isSticky: e, width: n } = t;
-    if (!e || !n)
+  function M(t) {
+    const { isSticky: o, width: n } = t;
+    if (!o || !n)
       return null;
-    const l = o.columns.findIndex((r) => r.id === t.id), f = o.columns.reduce((r, v, S) => S < l ? r + v.width : r, 0), G = o.columns.reduce((r, v, S) => S > l ? r + v.width : r, 0);
+    const i = e.columns.findIndex((r) => r.id === t.id), f = e.columns.reduce((r, v, m) => m < i ? r + v.width : r, 0), z = e.columns.reduce((r, v, m) => m > i ? r + v.width : r, 0);
     return {
-      ...t.isStickyRight ? { right: `${G}px` } : { left: `${f}px` },
+      ...t.isStickyRight ? { right: `${z}px` } : { left: `${f}px` },
       zIndex: 1
     };
   }
-  const d = c([]), w = {}, D = (t) => d.value.includes(t), W = async (t, e) => {
+  const d = c([]), w = {}, _ = (t) => d.value.includes(t), K = async (t, o) => {
     const n = d.value.indexOf(t);
     if (n === -1) {
       d.value.push(t);
-      const l = e.target.closest("tr");
-      await j(), l && (w[t] = l.offsetHeight);
+      const i = o.target.closest("tr");
+      await j(), i && (w[t] = i.offsetHeight);
     } else
       d.value.splice(n, 1), delete w[t];
-  }, X = s(() => `${o.rowHeight}px`), z = s(
-    () => `1 / span ${o.columns.length + 1}`
+  }, W = s(() => `${e.rowHeight}px`), X = s(
+    () => `1 / span ${e.columns.length + 1}`
   );
   return {
-    list: R,
-    containerProps: i,
-    wrapperProps: b,
-    activeRow: y,
-    gridColumnTemplate: T,
-    floatingActionRef: B,
-    scrollToTop: L,
-    toggleSortOrder: M,
-    columnsStickyPositions: E,
-    hasSearchSlot: I,
-    showBackToTopButton: P,
-    containerStyle: A,
-    onScroll: O,
-    scrollTo: k,
-    savingRows: u,
+    list: T,
+    containerProps: l,
+    wrapperProps: $,
+    activeRow: A,
+    gridColumnTemplate: C,
+    floatingActionRef: k,
+    scrollToTop: E,
+    toggleSortOrder: D,
+    columnsStickyPositions: L,
+    hasSearchSlot: B,
+    showBackToTopButton: O,
+    containerStyle: P,
+    onScroll: I,
+    scrollTo: b,
+    savingRows: a,
     floatingActionPosition: h,
     hasExpandSlot: g,
-    hasCheckboxes: x,
-    toggleExpandRow: W,
-    isRowExpanded: D,
-    cssRowHeight: X,
-    cssExpandGridCol: z,
-    activeMenuRow: C
+    hasCheckboxes: y,
+    toggleExpandRow: K,
+    isRowExpanded: _,
+    cssRowHeight: W,
+    cssExpandGridCol: X,
+    activeMenuRow: x
   };
 };
 export {

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

@@ -25,6 +25,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     searchPlaceholder?: string;
     searchAutoFocus?: boolean;
     zIndexBase?: number;
+    rowCustomClassKey?: string;
+    rowDataKey?: string;
 }>, {
     title: string;
     sort: any;
@@ -49,6 +51,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     searchPlaceholder: string;
     searchAutoFocus: boolean;
     zIndexBase: number;
+    rowCustomClassKey: string;
+    rowDataKey: string;
 }>, {
     scrollTo: (index: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -93,6 +97,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     searchPlaceholder?: string;
     searchAutoFocus?: boolean;
     zIndexBase?: number;
+    rowCustomClassKey?: string;
+    rowDataKey?: string;
 }>, {
     title: string;
     sort: any;
@@ -117,6 +123,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     searchPlaceholder: string;
     searchAutoFocus: boolean;
     zIndexBase: number;
+    rowCustomClassKey: string;
+    rowDataKey: string;
 }>>> & {
     onSelectAll?: (value: boolean) => any;
     "onUpdate:search"?: (query: string) => any;
@@ -157,6 +165,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     selectedMatcher: (rowId: unknown, selected: unknown) => boolean;
     emptyStateVariant: "error" | "no-access" | "no-results" | "no-data" | "files" | "settings";
     zIndexBase: number;
+    rowCustomClassKey: string;
+    rowDataKey: string;
 }>, Partial<Record<`section-${string}`, (_: {}) => any>> & Partial<Record<`header-${string}`, (_: {
     column: Column;
 }) => any>> & Partial<Record<`cell-${string}`, (_: {
@@ -175,10 +185,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         row: import("@vueuse/core").UseVirtualListItem<Row>;
         gridColumnTemplate: any;
     }): any;
-    "floating-row"?(_: {
-        row: import("@vueuse/core").UseVirtualListItem<Row>;
-        rowIndex: number;
-    }): any;
     "empty-state"?(_: {}): any;
     footer?(_: {}): any;
 }>;

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_706b324e_lang.css"; //*');
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-706b324e"]]);
+/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_7524407f_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-7524407f"]]);
 export {
   a as default
 };