@progress/kendo-react-grid 16.2.0-develop.8 → 16.2.0

package/GridClientWrapper.mjs

@@ -8,8 +8,8 @@
 "use client";
 import * as c from "react";
 import { useAdaptiveModeContext as Tr, canUseDOM as J, getActiveElement as Mr, useDir as Gr, setScrollbarWidth as mt, cloneArray as Hr, useWebMcpRegister as Ar, RowHeightService as Fr, getter as X } from "@progress/kendo-react-common";
-import { filterBy as Wr } from "@progress/kendo-data-query";
-import { getSelectionOptions as xe, populateClipboardData as Lr, ClipboardActionType as Ve, getEditableOptions as Or, tableKeyboardNavigation as ie, ClipboardService as zr, TableKeyboardNavigationContext as Br, updateLeft as pr, updateRight as Nr, getGroupExpandableOptions as jr, groupExpandReducer as Ur, getDetailExpandableOptions as Vr, detailExpandReducer as qr, getSelectedState as Pt, editReducer as $r, EDIT_ACTION as _r, closestTagName as ke, getSelectedStateFromKeyDown as Zr, getColumnIndex as Jr, getRowIndex as Xr } from "@progress/kendo-react-data-tools";
+import { filterBy as Lr } from "@progress/kendo-data-query";
+import { getSelectionOptions as xe, populateClipboardData as Wr, ClipboardActionType as Ve, getEditableOptions as Or, tableKeyboardNavigation as ie, ClipboardService as zr, TableKeyboardNavigationContext as Br, updateLeft as pr, updateRight as Nr, getGroupExpandableOptions as jr, groupExpandReducer as Ur, getDetailExpandableOptions as Vr, detailExpandReducer as qr, getSelectedState as Pt, editReducer as $r, EDIT_ACTION as _r, closestTagName as ke, getSelectedStateFromKeyDown as Zr, getColumnIndex as Jr, getRowIndex as Xr } from "@progress/kendo-react-data-tools";
 import { ColumnResize as Yr } from "./drag/ColumnResize.mjs";
 import { CommonDragLogic as Qr } from "./drag/CommonDragLogic.mjs";
 import { useStickyGroups as en } from "./hooks/useStickyGroups.mjs";
@@ -24,15 +24,15 @@ import { BasePDFExport as Rn } from "./BasePDFExport.mjs";
 import { BaseCSVExport as bn } from "./BaseCSVExport.mjs";
 import { GridContext as vn } from "./utils/GridContext.mjs";
 import { operators as Cn } from "./filterCommon.mjs";
-const In = (t, D, p, K) => {
-  const Y = Object.keys(D.cells).map((M) => p.findIndex((Q) => Q.field === M)), C = Object.keys(D.cells).length > 0 ? Y : !0;
-  return t.reduce((M, Q) => (M[Q[K != null ? K : "id"]] = C, M), {});
-}, Rt = (t, D, p, K) => D.reduce((C, M) => ({
+const In = (t, K, p, S) => {
+  const Y = Object.keys(K.cells).map((M) => p.findIndex((Q) => Q.field === M)), C = Object.keys(K.cells).length > 0 ? Y : !0;
+  return t.reduce((M, Q) => (M[Q[S != null ? S : "id"]] = C, M), {});
+}, Rt = (t, K, p, S) => K.reduce((C, M) => ({
   ...C,
-  ...In(Wr(t, M), M, p, K)
+  ...In(Lr(t, M), M, p, S)
 }), {}), zn = (t) => {
   var ft;
-  const D = t.gridProps.isClient, p = typeof t.gridProps.scrollable == "object" ? t.gridProps.scrollable.mode : t.gridProps.scrollable, { overlayScrollbar: K, wheelMultiplier: Y } = sn(t.gridProps.scrollable), [C, M] = c.useState({}), Q = Tr(), qe = c.useRef(null), Ke = c.useRef(null), de = c.useRef({}), bt = (e) => {
+  const K = t.gridProps.isClient, p = typeof t.gridProps.scrollable == "object" ? t.gridProps.scrollable.mode : t.gridProps.scrollable, { overlayScrollbar: S, wheelMultiplier: Y } = sn(t.gridProps.scrollable), [C, M] = c.useState({}), Q = Tr(), qe = c.useRef(null), Ke = c.useRef(null), de = c.useRef({}), bt = (e) => {
     e.event.preventDefault(), M({
       ...C,
       show: !0,
@@ -46,7 +46,7 @@ const In = (t, D, p, K) => {
   }, $e = () => {
     M({});
   }, vt = (e) => {
-    const r = t.gridProps.dataItemKey || "", o = C.dataItem, n = t.gridProps.pinnedTopRows || [], i = t.gridProps.pinnedBottomRows || [], a = r ? o[r] : void 0, d = a !== void 0 && n.some((l) => l[r] === a), s = a !== void 0 && i.some((l) => l[r] === a);
+    const r = t.gridProps.dataItemKey || "", n = C.dataItem, o = t.gridProps.pinnedTopRows || [], i = t.gridProps.pinnedBottomRows || [], a = r ? n[r] : void 0, d = a !== void 0 && o.some((l) => l[r] === a), s = a !== void 0 && i.some((l) => l[r] === a);
     return e.map((l) => {
       const u = typeof l == "string" ? mn[l] : l;
       return u && u.name === De.pinRow && u.items ? {
@@ -79,9 +79,9 @@ const In = (t, D, p, K) => {
   ]), le = c.useMemo(() => {
     const e = (w == null ? void 0 : w.contextMenu) || t.gridProps.contextMenu, r = typeof e == "function" ? e(C) : e;
     if (r && C.offset) {
-      const o = C.dataItem ? ht.body : ht.head, n = r[o], i = C.dataItem ? Ze : _e;
+      const n = C.dataItem ? ht.body : ht.head, o = r[n], i = C.dataItem ? Ze : _e;
       let a;
-      return n === !0 || n === void 0 ? a = i : n !== !1 && (a = n), t.gridProps.pinnable && a && C.dataItem ? vt(a) : a;
+      return o === !0 || o === void 0 ? a = i : o !== !1 && (a = o), t.gridProps.pinnable && a && C.dataItem ? vt(a) : a;
     }
   }, [
     t.gridProps.contextMenu,
@@ -92,18 +92,18 @@ const In = (t, D, p, K) => {
     w
   ]), Ct = (e) => {
     var d, s, l, u, f, v, R, j, g;
-    const r = e.event.item, o = {
-      target: S.current,
+    const r = e.event.item, n = {
+      target: x.current,
       syntheticEvent: e.event.syntheticEvent,
       nativeEvent: e.event.nativeEvent,
       menuItem: r,
       ...e
     };
-    t.gridProps.onContextMenuItemClick && m(t.gridProps.onContextMenuItemClick, o);
-    const n = T(), i = {
+    t.gridProps.onContextMenuItemClick && m(t.gridProps.onContextMenuItemClick, n);
+    const o = T(), i = {
       selectedField: "",
       componentId: t.id,
-      dataItems: n,
+      dataItems: o,
       dataItem: e.dataItem,
       startRowIndex: -1,
       endRowIndex: -1,
@@ -115,12 +115,12 @@ const In = (t, D, p, K) => {
       shiftKey: !1,
       isDrag: !1,
       ...xe(t.gridProps.selectable),
-      ...o
-    }, a = n.findIndex((k) => k === e.dataItem);
+      ...n
+    }, a = o.findIndex((D) => D === e.dataItem);
     switch ((d = r.data) == null ? void 0 : d.action) {
       case "SortCommand":
         if (w) {
-          const k = (s = r.name) == null ? void 0 : s.toLowerCase().includes("asc"), Z = ((l = r.name) == null ? void 0 : l.toLowerCase().includes("desc")) ? "desc" : void 0, B = k ? "asc" : Z, oe = r.name ? B : void 0;
+          const D = (s = r.name) == null ? void 0 : s.toLowerCase().includes("asc"), Z = ((l = r.name) == null ? void 0 : l.toLowerCase().includes("desc")) ? "desc" : void 0, B = D ? "asc" : Z, oe = r.name ? B : void 0;
           Je(e.event.syntheticEvent, w, oe);
         }
         break;
@@ -137,7 +137,7 @@ const In = (t, D, p, K) => {
         Vt(i);
         break;
       case "ReorderRowCommand":
-        ce.current = e.dataItem, (u = r.name) != null && u.toLowerCase().includes("rowup") && a > 0 && ae(e.event.syntheticEvent, a - 1, "before"), (f = r.name) != null && f.toLowerCase().includes("rowdown") && a < n.length - 1 && ae(e.event.syntheticEvent, a + 1, "after"), (v = r.name) != null && v.toLowerCase().includes("rowtop") && ae(e.event.syntheticEvent, 0, "before"), (R = r.name) != null && R.toLowerCase().includes("rowbottom") && ae(e.event.syntheticEvent, n.length - 1, "after");
+        ce.current = e.dataItem, (u = r.name) != null && u.toLowerCase().includes("rowup") && a > 0 && ae(e.event.syntheticEvent, a - 1, "before"), (f = r.name) != null && f.toLowerCase().includes("rowdown") && a < o.length - 1 && ae(e.event.syntheticEvent, a + 1, "after"), (v = r.name) != null && v.toLowerCase().includes("rowtop") && ae(e.event.syntheticEvent, 0, "before"), (R = r.name) != null && R.toLowerCase().includes("rowbottom") && ae(e.event.syntheticEvent, o.length - 1, "after");
         break;
       case "CopySelectionCommand":
         Pe(
@@ -175,43 +175,43 @@ const In = (t, D, p, K) => {
   }, se = () => {
     const e = t.columnsRef.filter((r) => r.declarationIndex >= 0 && r.parentIndex === -1);
     return an(e);
-  }, It = (e, r, o) => {
-    if (t.gridProps.onContextMenu && D) {
-      const n = {
-        target: S.current,
+  }, It = (e, r, n) => {
+    if (t.gridProps.onContextMenu && K) {
+      const o = {
+        target: x.current,
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         dataItem: r,
-        field: o
+        field: n
       };
-      m(t.gridProps.onContextMenu, n);
+      m(t.gridProps.onContextMenu, o);
     }
     t.gridProps.contextMenu && bt({
       event: e,
       dataItem: r,
-      field: o
+      field: n
     });
   }, yt = (e) => {
     var d, s;
     if (e.target !== e.currentTarget)
       return;
     clearTimeout(pe.current), y.current && (y.current.table = A.current);
-    const r = e.currentTarget.scrollLeft, o = e.currentTarget.scrollTop, n = o !== Be.current;
-    t.gridProps.columnVirtualization && (!x || o === Be.current) && (pe.current = window.setTimeout(() => {
+    const r = e.currentTarget.scrollLeft, n = e.currentTarget.scrollTop, o = n !== Be.current;
+    t.gridProps.columnVirtualization && (!k || n === Be.current) && (pe.current = window.setTimeout(() => {
       re();
-    }, 0)), t.gridProps.scrollLeftRef && (t.gridProps.scrollLeftRef.current = r), _.current && _.current.setScrollLeft(r), $.current && $.current.setScrollLeft(r), W != null && W.current && W.current.setScrollLeft(r), L != null && L.current && L.current.setScrollLeft(r), O != null && O.current && O.current.setScrollLeft(r), z != null && z.current && z.current.setScrollLeft(r);
+    }, 0)), t.gridProps.scrollLeftRef && (t.gridProps.scrollLeftRef.current = r), _.current && _.current.setScrollLeft(r), $.current && $.current.setScrollLeft(r), L != null && L.current && L.current.setScrollLeft(r), W != null && W.current && W.current.setScrollLeft(r), O != null && O.current && O.current.setScrollLeft(r), z != null && z.current && z.current.setScrollLeft(r);
     const i = (d = t.gridProps.virtualSkipRef) == null ? void 0 : d.current;
-    y.current && n && y.current.scrollHandler(e);
-    const a = x && ((s = t.gridProps.virtualSkipRef) == null ? void 0 : s.current) !== i;
-    t.gridProps.onScroll && D && m(t.gridProps.onScroll, {
+    y.current && o && y.current.scrollHandler(e);
+    const a = k && ((s = t.gridProps.virtualSkipRef) == null ? void 0 : s.current) !== i;
+    t.gridProps.onScroll && K && m(t.gridProps.onScroll, {
       ...I(e)
-    }), Be.current = o, !dt.current && q.current && Math.abs(q.current.scrollTop - o) > 1 && (Fe.current = !0, q.current.scrollTop = o), a || st();
+    }), Be.current = n, !dt.current && q.current && Math.abs(q.current.scrollTop - n) > 1 && (Fe.current = !0, q.current.scrollTop = n), a || st();
   }, wt = (e) => {
-    var o, n;
+    var n, o;
     const r = e.target;
     if ((e.keyCode === 38 || e.keyCode === 40) && r.closest(".k-grid-sticky-container")) {
-      const i = parseInt(((o = r.closest("tr")) == null ? void 0 : o.getAttribute("absolute-row-index")) || "", 10), a = r.getAttribute("data-keyboardnavid");
-      if (!isNaN(i) && a && !((n = H.current) == null ? void 0 : n.querySelector(`tr[absolute-row-index="${i}"]`)))
+      const i = parseInt(((n = r.closest("tr")) == null ? void 0 : n.getAttribute("absolute-row-index")) || "", 10), a = r.getAttribute("data-keyboardnavid");
+      if (!isNaN(i) && a && !((o = H.current) == null ? void 0 : o.querySelector(`tr[absolute-row-index="${i}"]`)))
         return we.current = {
           navId: a,
           key: e.key,
@@ -224,14 +224,14 @@ const In = (t, D, p, K) => {
     var a;
     if (!we.current || !F.current)
       return;
-    const { navId: e, key: r, code: o, keyCode: n } = we.current, i = (a = H.current) == null ? void 0 : a.querySelector(
+    const { navId: e, key: r, code: n, keyCode: o } = we.current, i = (a = H.current) == null ? void 0 : a.querySelector(
       `[data-keyboardnavid="${e}"]`
     );
     i && i.dispatchEvent(
       new KeyboardEvent("keydown", {
         key: r,
-        code: o,
-        keyCode: n,
+        code: n,
+        keyCode: o,
         bubbles: !0,
         cancelable: !0
       })
@@ -258,7 +258,7 @@ const In = (t, D, p, K) => {
       selectedField: "",
       ...I(e)
     };
-    t.gridProps.onKeyDown && D && m(t.gridProps.onKeyDown, r);
+    t.gridProps.onKeyDown && K && m(t.gridProps.onKeyDown, r);
   }, xt = (e) => {
     ie.onFocus(e, {
       navigatable: !!t.gridProps.navigatable,
@@ -267,26 +267,26 @@ const In = (t, D, p, K) => {
   }, kt = (e) => {
     const { columnsRef: r } = t;
     if (e.action === "moveToNextPage" && _t(e.event), e.action === "moveToPrevPage" && Zt(e.event), e.focusElement && (e.action === "reorderToRight" || e.action === "reorderToLeft")) {
-      const o = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-      if (!r[o].reorderable)
+      const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
+      if (!r[n].reorderable)
         return;
-      if (e.action === "reorderToRight" && o < t.columnsRef.length - 1) {
-        if (r[o + 1].disableReorder)
+      if (e.action === "reorderToRight" && n < t.columnsRef.length - 1) {
+        if (r[n + 1].disableReorder)
           return;
-        fe(o, o + 1, e.event);
+        fe(n, n + 1, e.event);
       }
-      if (e.action === "reorderToLeft" && o > 0) {
-        if (r[o - 1].disableReorder)
+      if (e.action === "reorderToLeft" && n > 0) {
+        if (r[n - 1].disableReorder)
           return;
-        fe(o, o - 1, e.event);
+        fe(n, n - 1, e.event);
       }
     }
-    if (e.action === "select" && zt(e.event), t.gridProps.onNavigationAction && D) {
-      const o = {
+    if (e.action === "select" && zt(e.event), t.gridProps.onNavigationAction && K) {
+      const n = {
         focusElement: e.focusElement,
         ...I(e.event)
       };
-      m(t.gridProps.onNavigationAction, o);
+      m(t.gridProps.onNavigationAction, n);
     }
   }, Dt = (e, r) => {
     t.gridProps.onRowClick && ke(e.target, "TD") && m(t.gridProps.onRowClick, {
@@ -310,16 +310,16 @@ const In = (t, D, p, K) => {
       edit: {},
       ...I(e.syntheticEvent)
     });
-  }, Gt = (e, r, o) => {
-    var n, i;
+  }, Gt = (e, r, n) => {
+    var o, i;
     if (gt.enabled && gt.mode === "incell" && t.gridProps.dataItemKey) {
       if (t.gridProps.pinnable && t.gridProps.editZoneRef) {
-        const d = !!((i = (n = e.target).closest) != null && i.call(n, ".k-grid-pinned-container"));
+        const d = !!((i = (o = e.target).closest) != null && i.call(o, ".k-grid-pinned-container"));
         t.gridProps.editZoneRef.current = d ? "pinned" : "body";
       }
       const a = $r(t.gridProps.edit, {
         type: _r.ENTER_FIELD_EDIT,
-        payload: { id: r[t.gridProps.dataItemKey], field: o }
+        payload: { id: r[t.gridProps.dataItemKey], field: n }
       });
       t.gridProps.onEditChange && m(t.gridProps.onEditChange, {
         edit: a,
@@ -327,21 +327,21 @@ const In = (t, D, p, K) => {
       });
     }
   }, Ht = (e, r) => {
-    var n;
+    var o;
     if (Vr(t.detailExpandable).enabled) {
-      const i = qr((n = t.gridProps.detailExpand) != null ? n : {}, e);
+      const i = qr((o = t.gridProps.detailExpand) != null ? o : {}, e);
       t.gridProps.onDetailExpandChange && m(t.gridProps.onDetailExpandChange, {
         ...I(r),
         detailExpand: i
       });
     }
   }, At = (e, r) => {
-    var n;
-    const o = jr(
+    var o;
+    const n = jr(
       typeof t.gridProps.groupable == "object" ? t.gridProps.groupable.expandable !== !1 : t.gridProps.groupable
     );
-    if (o.enabled) {
-      const i = Ur((n = t.gridProps.groupExpand) != null ? n : [], e, o);
+    if (n.enabled) {
+      const i = Ur((o = t.gridProps.groupExpand) != null ? o : [], e, n);
       t.gridProps.onGroupExpandChange && m(t.gridProps.onGroupExpandChange, {
         ...I(r),
         groupExpand: i
@@ -350,17 +350,17 @@ const In = (t, D, p, K) => {
     Er(e.group);
   }, Ft = c.useCallback(
     (e) => {
-      const { dataItemKey: r = "", pinnedTopRows: o = [], pinnedBottomRows: n = [] } = t.gridProps;
+      const { dataItemKey: r = "", pinnedTopRows: n = [], pinnedBottomRows: o = [] } = t.gridProps;
       if (!r || !e)
         return "none";
       const i = e[r];
-      return o != null && o.some((a) => a[r] === i) ? "top" : n != null && n.some((a) => a[r] === i) ? "bottom" : "none";
+      return n != null && n.some((a) => a[r] === i) ? "top" : o != null && o.some((a) => a[r] === i) ? "bottom" : "none";
     },
     [t.gridProps.pinnedTopRows, t.gridProps.pinnedBottomRows, t.gridProps.dataItemKey]
   ), ue = (e, r) => {
     if (!t.gridProps.pinnable)
       return;
-    const { dataItemKey: o = "", pinnedTopRows: n = [], pinnedBottomRows: i = [] } = t.gridProps, a = r[o], d = n.filter((u) => u[o] !== a), s = i.filter((u) => u[o] !== a);
+    const { dataItemKey: n = "", pinnedTopRows: o = [], pinnedBottomRows: i = [] } = t.gridProps, a = r[n], d = o.filter((u) => u[n] !== a), s = i.filter((u) => u[n] !== a);
     let l;
     switch (e) {
       case "pinTop":
@@ -376,13 +376,13 @@ const In = (t, D, p, K) => {
         return;
     }
     t.gridProps.onRowPinChange && m(t.gridProps.onRowPinChange, l);
-  }, Je = (e, r, o) => {
-    const { allowUnsort: n, mode: i } = Pn(
+  }, Je = (e, r, n) => {
+    const { allowUnsort: o, mode: i } = Pn(
       t.gridProps.sortable || !1,
       r.sortable || !1
-    ), a = (t.gridProps.sort || []).filter((l) => l.field === r.field)[0], d = o || hn[n][a && a.dir || ""], s = i === "single" ? [] : (t.gridProps.sort || []).filter((l) => l.field !== r.field);
+    ), a = (t.gridProps.sort || []).filter((l) => l.field === r.field)[0], d = n || hn[o][a && a.dir || ""], s = i === "single" ? [] : (t.gridProps.sort || []).filter((l) => l.field !== r.field);
     d !== "" && r.field && s.push({ field: r.field, dir: d }), Ye(s, e);
-  }, Wt = (e) => {
+  }, Lt = (e) => {
     t.gridProps.onItemChange && m(t.gridProps.onItemChange, {
       ...I(e.syntheticEvent),
       dataItem: e.dataItem,
@@ -390,12 +390,12 @@ const In = (t, D, p, K) => {
       field: e.field,
       value: e.value
     });
-  }, Lt = (e) => {
+  }, Wt = (e) => {
     var r;
     if (t.gridProps.onSelectionChange && h.enabled) {
-      const { event: o, dataItem: n, dataIndex: i, columnIndex: a } = e, d = {
-        ...I(o),
-        dataItem: n,
+      const { event: n, dataItem: o, dataIndex: i, columnIndex: a } = e, d = {
+        ...I(n),
+        dataItem: o,
         startColIndex: a,
         endColIndex: a,
         startRowIndex: i,
@@ -424,13 +424,13 @@ const In = (t, D, p, K) => {
     var u;
     if (!t.gridProps.onSelectionChange || !h.enabled || !t.gridProps.dataItemKey)
       return;
-    const { event: r, groupDataItem: o, selectAll: n } = e, i = X(t.gridProps.dataItemKey), a = dn(o), d = T(), l = { ...(u = t.gridProps.select) != null ? u : {} };
+    const { event: r, groupDataItem: n, selectAll: o } = e, i = X(t.gridProps.dataItemKey), a = dn(n), d = T(), l = { ...(u = t.gridProps.select) != null ? u : {} };
     a.forEach((f) => {
       const v = i(f);
-      v !== void 0 && (n ? l[v] = !0 : delete l[v]);
+      v !== void 0 && (o ? l[v] = !0 : delete l[v]);
     }), m(t.gridProps.onSelectionChange, {
       ...I(r),
-      dataItem: o,
+      dataItem: n,
       startColIndex: 0,
       endColIndex: 0,
       startRowIndex: 0,
@@ -458,19 +458,19 @@ const In = (t, D, p, K) => {
       componentId: t.id,
       selectedField: "",
       ...I(e)
-    }, o = Zr({
+    }, n = Zr({
       event: r,
       selectedState: (l = t.gridProps.select) != null ? l : {},
       dataItemKey: t.gridProps.dataItemKey
     });
-    if (o === t.gridProps.select)
+    if (n === t.gridProps.select)
       return;
-    const n = e.target, i = ke(n, "TD"), a = ke(n, "TR"), d = Jr(i), s = Xr(a);
+    const o = e.target, i = ke(o, "TD"), a = ke(o, "TR"), d = Jr(i), s = Xr(a);
     if (d !== void 0 && s !== void 0) {
       const f = (u = ln(t.gridProps.data)) == null ? void 0 : u[s];
       t.gridProps.onSelectionChange && m(t.gridProps.onSelectionChange, {
         ...r,
-        select: o,
+        select: n,
         dataItem: f,
         startRowIndex: s,
         startColIndex: d,
@@ -489,11 +489,11 @@ const In = (t, D, p, K) => {
     if (t.gridProps.onHeaderSelectionChange && h.enabled) {
       const r = T();
       m(t.gridProps.onHeaderSelectionChange, {
-        select: e.syntheticEvent.target.checked ? r.reduce((o, n) => (t.gridProps.dataItemKey && X(t.gridProps.dataItemKey)(n) !== void 0 && (o[X(t.gridProps.dataItemKey)(n)] = !0), o), {}) : {},
+        select: e.syntheticEvent.target.checked ? r.reduce((n, o) => (t.gridProps.dataItemKey && X(t.gridProps.dataItemKey)(o) !== void 0 && (n[X(t.gridProps.dataItemKey)(o)] = !0), n), {}) : {},
         field: e.field,
         nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
         syntheticEvent: e.syntheticEvent,
-        target: S.current,
+        target: x.current,
         dataItems: r
       });
     }
@@ -503,10 +503,10 @@ const In = (t, D, p, K) => {
       select: r
     });
   }, pt = (e, r) => {
-    const o = t.gridProps.dataItemKey;
-    if (!o || !r)
+    const n = t.gridProps.dataItemKey;
+    if (!n || !r)
       return;
-    const n = X(o), i = T().findIndex((a) => n(a) === n(r));
+    const o = X(n), i = T().findIndex((a) => o(a) === o(r));
     i !== -1 && Xe({
       ...e,
       startRowIndex: i,
@@ -515,14 +515,14 @@ const In = (t, D, p, K) => {
   }, Xe = (e) => {
     var r;
     if (t.gridProps.onSelectionChange && h.enabled) {
-      const o = T(), n = o[e.startRowIndex], i = o[e.endRowIndex], a = {
+      const n = T(), o = n[e.startRowIndex], i = n[e.endRowIndex], a = {
         syntheticEvent: void 0,
-        target: S.current,
+        target: x.current,
         selectedField: "",
         componentId: t.id,
-        dataItems: o,
+        dataItems: n,
         dataItem: null,
-        startDataItem: n,
+        startDataItem: o,
         endDataItem: i,
         ...e
       }, d = Pt({
@@ -534,10 +534,10 @@ const In = (t, D, p, K) => {
     }
   }, Nt = (e) => {
     if (t.gridProps.onSelectionChange && h.enabled) {
-      const r = e.dataItems[0], o = e.dataItems[e.dataItems.length - 1], n = {}, i = {
+      const r = e.dataItems[0], n = e.dataItems[e.dataItems.length - 1], o = {}, i = {
         ...e,
         startDataItem: r,
-        endDataItem: o,
+        endDataItem: n,
         startRowIndex: 0,
         endRowIndex: e.dataItems.length - 1,
         startColIndex: 0,
@@ -545,12 +545,12 @@ const In = (t, D, p, K) => {
       };
       e.dataItems.forEach((a) => {
         const s = X(t.gridProps.dataItemKey)(a);
-        n[s] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0;
-      }), ee(i, n);
+        o[s] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0;
+      }), ee(i, o);
     }
   }, jt = (e) => {
     if (t.gridProps.onSelectionChange && h.enabled) {
-      const o = X(t.gridProps.dataItemKey)(e.dataItem), n = 0, i = t.columnsRef.length - 1, a = e.dataItems.findIndex(
+      const n = X(t.gridProps.dataItemKey)(e.dataItem), o = 0, i = t.columnsRef.length - 1, a = e.dataItems.findIndex(
         (f) => f[t.gridProps.dataItemKey] === e.dataItem[t.gridProps.dataItemKey]
       ), l = {
         ...e,
@@ -558,18 +558,18 @@ const In = (t, D, p, K) => {
         endDataItem: a,
         startRowIndex: a,
         endRowIndex: a,
-        startColIndex: n,
+        startColIndex: o,
         endColIndex: i
       }, u = e.mode === "multiple" ? t.gridProps.select || {} : {};
-      u[o] === !0 || Array.isArray(u[o]) && u[o].length === t.columnsRef.length ? delete u[o] : u[o] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0, ee(l, u);
+      u[n] === !0 || Array.isArray(u[n]) && u[n].length === t.columnsRef.length ? delete u[n] : u[n] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0, ee(l, u);
     }
   }, Ut = (e) => {
     if (!h.enabled)
       return;
-    const r = T(), o = {
+    const r = T(), n = {
       syntheticEvent: void 0,
       nativeEvent: void 0,
-      target: S.current,
+      target: x.current,
       selectedField: "",
       componentId: t.id,
       dataItems: r,
@@ -586,7 +586,7 @@ const In = (t, D, p, K) => {
     };
     if (!e || e.length === 0) {
       const f = {
-        ...o,
+        ...n,
         startRowIndex: -1,
         endRowIndex: -1,
         startColIndex: -1,
@@ -595,25 +595,25 @@ const In = (t, D, p, K) => {
       ee(f, {});
       return;
     }
-    const n = Rt(
+    const o = Rt(
       t.gridProps.data,
       e,
       t.columnsRef,
       t.gridProps.dataItemKey
     ), i = {};
-    Object.keys(n).forEach((f) => {
-      n[f] && (i[f] = h.cell ? [...Array(t.columnsRef.length).keys()] : !0);
+    Object.keys(o).forEach((f) => {
+      o[f] && (i[f] = h.cell ? [...Array(t.columnsRef.length).keys()] : !0);
     });
     let a = -1, d = -1, s = r[0] || null, l = r[r.length - 1] || null;
     if (t.gridProps.dataItemKey) {
       const f = X(t.gridProps.dataItemKey);
       for (let v = 0; v < r.length; v++) {
         const R = f(r[v]);
-        R !== void 0 && n[R] && (a === -1 && (a = v, s = r[v]), d = v, l = r[v]);
+        R !== void 0 && o[R] && (a === -1 && (a = v, s = r[v]), d = v, l = r[v]);
       }
     }
     const u = {
-      ...o,
+      ...n,
       startRowIndex: a,
       endRowIndex: d,
       startColIndex: 0,
@@ -624,55 +624,55 @@ const In = (t, D, p, K) => {
     ee(u, i);
   }, Vt = (e) => {
     t.gridProps.onSelectionChange && h.enabled && ee(e, {});
-  }, te = (e, r, o, n, i) => {
+  }, te = (e, r, n, o, i) => {
     $t();
     const a = t.gridProps.onDataStateChange;
     if (e) {
-      const d = { ...I(n), ...r, targetEvent: i };
+      const d = { ...I(o), ...r, targetEvent: i };
       m(e, d);
     } else a && (de.current = {
       ...de.current,
-      ...o
+      ...n
     }, m(a, {
-      ...I(n),
+      ...I(o),
       targetEvent: i || {},
       dataState: {
         ...cr(),
         ...de.current
       }
     }));
-  }, ge = (e, r, o) => {
-    var n;
-    x && t.gridProps.pageable && ((n = y.current) == null || n.reset()), te(
+  }, ge = (e, r, n) => {
+    var o;
+    k && t.gridProps.pageable && ((o = y.current) == null || o.reset()), te(
       t.gridProps.onPageChange,
       { page: e },
       { skip: e.skip, take: e.take },
       r,
-      o
+      n
     );
-  }, qt = (e, r, o) => {
-    var n;
-    t.gridProps.pageable || (n = t.gridProps.group) != null && n.length ? t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = e.skip, re()) : ge(e, r, o);
+  }, qt = (e, r, n) => {
+    var o;
+    t.gridProps.pageable || (o = t.gridProps.group) != null && o.length ? t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = e.skip, re()) : ge(e, r, n);
   }, Te = () => {
     let e = t.gridProps.total || 0;
     return Array.isArray(t.gridProps.data) ? e = e || t.gridProps.data.length : t.gridProps.data && (e = e || t.gridProps.data.total), e;
   }, $t = () => {
-    x && t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = 0);
+    k && t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = 0);
   }, _t = (e) => {
     var i, a;
-    const r = (a = (i = t.gridProps.take) != null ? i : t.gridProps.pageSize) != null ? a : 0, o = (t.gridProps.skip || 0) + r, n = Te();
-    o < n && ge({ skip: o, take: r }, e);
+    const r = (a = (i = t.gridProps.take) != null ? i : t.gridProps.pageSize) != null ? a : 0, n = (t.gridProps.skip || 0) + r, o = Te();
+    n < o && ge({ skip: n, take: r }, e);
   }, Zt = (e) => {
-    var n, i;
-    const r = (i = (n = t.gridProps.take) != null ? n : t.gridProps.pageSize) != null ? i : 0, o = (t.gridProps.skip || 0) - r;
-    o >= 0 && ge({ skip: o, take: r }, e);
+    var o, i;
+    const r = (i = (o = t.gridProps.take) != null ? o : t.gridProps.pageSize) != null ? i : 0, n = (t.gridProps.skip || 0) - r;
+    n >= 0 && ge({ skip: n, take: r }, e);
   }, Jt = (e) => {
     ge({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
   }, Ye = (e, r) => {
     te(
       t.gridProps.onSortChange,
       { sort: e },
-      { sort: e, ...x && !t.gridProps.pageable ? { skip: 0 } : {} },
+      { sort: e, ...k && !t.gridProps.pageable ? { skip: 0 } : {} },
       r
     );
   }, Xt = (e, r) => {
@@ -702,12 +702,12 @@ const In = (t, D, p, K) => {
       {}
     );
   }, Qt = (e) => {
-    const r = t.gridProps.searchFields || t.columnsRef.map((i) => i.field) || [], o = e.nativeEvent.target.value, n = {
+    const r = t.gridProps.searchFields || t.columnsRef.map((i) => i.field) || [], n = e.nativeEvent.target.value, o = {
       logic: "or",
       filters: r.filter((i) => i !== void 0).map((i) => {
         var a;
-        return typeof i == "string" ? { field: i, value: o, operator: "contains" } : {
-          value: o,
+        return typeof i == "string" ? { field: i, value: n, operator: "contains" } : {
+          value: n,
           operator: (a = i.operator) != null ? a : "contains",
           field: i.field,
           ignoreCase: i.ignoreCase
@@ -717,7 +717,7 @@ const In = (t, D, p, K) => {
     te(
       t.gridProps.onSearchChange,
       {
-        search: n
+        search: o
       },
       { skip: 0 },
       e.syntheticEvent
@@ -732,111 +732,111 @@ const In = (t, D, p, K) => {
     var e;
     return ((e = Ke.current) == null ? void 0 : e.getBlob()) || null;
   }, er = async (e) => {
-    var r, o;
-    (r = t.gridProps) != null && r.onPdfExport && await ((o = t.gridProps) == null ? void 0 : o.onPdfExport(e));
+    var r, n;
+    (r = t.gridProps) != null && r.onPdfExport && await ((n = t.gridProps) == null ? void 0 : n.onPdfExport(e));
   }, tr = (e) => {
-    var r, o;
-    return (r = t.gridProps) != null && r.onCsvExport ? (o = t.gridProps) == null ? void 0 : o.onCsvExport(e) : e;
+    var r, n;
+    return (r = t.gridProps) != null && r.onCsvExport ? (n = t.gridProps) == null ? void 0 : n.onCsvExport(e) : e;
   }, Ge = (e, r) => {
-    const o = r.nativeEvent ? r : { nativeEvent: r.nativeEvent || r.originalEvent };
-    let n = {};
-    t.isVirtualScroll && e.length && !t.gridProps.pageable && (n = { take: void 0 }), e.length === 0 && t.gridProps.navigatable && (Le.current = !0), te(
+    const n = r.nativeEvent ? r : { nativeEvent: r.nativeEvent || r.originalEvent };
+    let o = {};
+    t.isVirtualScroll && e.length && !t.gridProps.pageable && (o = { take: void 0 }), e.length === 0 && t.gridProps.navigatable && (We.current = !0), te(
       t.gridProps.onGroupChange,
       { group: e },
-      { group: e, skip: 0, ...n },
-      o
+      { group: e, skip: 0, ...o },
+      n
     );
   }, He = (e) => {
     if (t.gridProps.onColumnsStateChange) {
       const r = {
-        target: S.current,
+        target: x.current,
         columnsState: e
       };
       m(t.gridProps.onColumnsStateChange, r);
     }
-  }, fe = (e, r, o) => {
-    const { columnsRef: n, columnsState: i } = t, a = n[e], d = cn(i), s = a.depth, l = (R) => {
+  }, fe = (e, r, n) => {
+    const { columnsRef: o, columnsState: i } = t, a = o[e], d = cn(i), s = a.depth, l = (R) => {
       do
         R++;
-      while (R < n.length && n[R].depth > s);
+      while (R < o.length && o[R].depth > s);
       return R;
-    }, u = n.splice(e, l(e) - e);
-    n.splice(e < r ? l(r - u.length) : r, 0, ...u), n.filter((R) => R.declarationIndex >= 0).forEach((R, j) => {
+    }, u = o.splice(e, l(e) - e);
+    o.splice(e < r ? l(r - u.length) : r, 0, ...u), o.filter((R) => R.declarationIndex >= 0).forEach((R, j) => {
       R.orderIndex = j;
-      const g = d.find((k) => k.id === R.id);
+      const g = d.find((D) => D.id === R.id);
       g && (g.orderIndex = j);
     });
-    const f = n[e].locked && n[r].locked;
-    pr(t.columnsMapRef, n, f || Ie.current), Nr(t.columnsMapRef, n, f || Ie.current), We.current && (Ie.current = !1, We.current = !1);
+    const f = o[e].locked && o[r].locked;
+    pr(t.columnsMapRef, o, f || Ie.current), Nr(t.columnsMapRef, o, f || Ie.current), Le.current && (Ie.current = !1, Le.current = !1);
     const v = se();
     if (re(), t.gridProps.onColumnReorder) {
       const R = {
-        target: S.current,
+        target: x.current,
         columns: v,
         columnId: a.id,
-        nativeEvent: o
+        nativeEvent: n
       };
       m(t.gridProps.onColumnReorder, R);
     }
     He(i);
-  }, ae = (e, r, o) => {
-    const n = typeof t.gridProps.rowReorderable == "object" ? t.gridProps.rowReorderable.enabled : t.gridProps.rowReorderable;
-    if (o === "forbidden" || !n || !ce.current)
+  }, ae = (e, r, n) => {
+    const o = typeof t.gridProps.rowReorderable == "object" ? t.gridProps.rowReorderable.enabled : t.gridProps.rowReorderable;
+    if (n === "forbidden" || !o || !ce.current)
       return;
     const i = t.dataRef[r];
     t.gridProps.onRowReorder && m(t.gridProps.onRowReorder, {
       draggedDataItems: [ce.current],
       droppedDataItem: i == null ? void 0 : i.dataItem,
-      dropPosition: o,
+      dropPosition: n,
       nativeEvent: e.originalEvent,
       dragEvent: e,
-      target: S.current
+      target: x.current
     }), ce.current = null;
-  }, rr = (e, r, o) => {
+  }, rr = (e, r, n) => {
     if (t.gridProps.group === void 0)
       return;
-    const n = t.gridProps.group.slice();
-    n.splice(r, 0, ...n.splice(e, 1)), Ge(n, o);
-  }, rt = (e, r, o) => {
-    const n = t.columnsRef[e].field;
-    if (!n)
+    const o = t.gridProps.group.slice();
+    o.splice(r, 0, ...o.splice(e, 1)), Ge(o, n);
+  }, rt = (e, r, n) => {
+    const o = t.columnsRef[e].field;
+    if (!o)
       return;
     const i = (t.gridProps.group || []).slice();
-    i.splice(r, 0, { field: n }), Ge(i, o);
+    i.splice(r, 0, { field: o }), Ge(i, n);
   }, nr = (e, r) => {
-    const o = U.current.getCurrentGroupsLength;
-    rt(e, o, r);
+    const n = U.current.getCurrentGroupsLength;
+    rt(e, n, r);
   }, Ae = () => {
-    var e, r, o, n, i, a, d, s, l, u, f, v, R, j;
+    var e, r, n, o, i, a, d, s, l, u, f, v, R, j;
     if (t.gridProps.dataLayoutMode === "stacked") {
       const g = ((e = F.current) == null ? void 0 : e.offsetWidth) || 0;
       if ((r = P.current) != null && r.colGroupMain && g) {
-        const k = P.current.colGroupMain.children, b = k.length - 1;
+        const D = P.current.colGroupMain.children, b = D.length - 1;
         if (b >= 0) {
           let Z = 0;
           for (let oe = 0; oe < b; oe++) {
-            const Kr = parseFloat((k[oe].width || 0).toString()) || k[oe].clientWidth;
+            const Kr = parseFloat((D[oe].width || 0).toString()) || D[oe].clientWidth;
             Z += Kr;
           }
           const B = Math.max(0, g - Z);
-          k[b].width = B + "px", (n = (o = P.current.colGroupHeader) == null ? void 0 : o.children) != null && n[b] && (P.current.colGroupHeader.children[b].width = B + "px"), (a = (i = P.current.colGroupFooter) == null ? void 0 : i.children) != null && a[b] && (P.current.colGroupFooter.children[b].width = B + "px"), (s = (d = P.current.colGroupStickyHeader) == null ? void 0 : d.children) != null && s[b] && (P.current.colGroupStickyHeader.children[b].width = B + "px"), (u = (l = P.current.colGroupStickyFooter) == null ? void 0 : l.children) != null && u[b] && (P.current.colGroupStickyFooter.children[b].width = B + "px"), (v = (f = P.current.colGroupPinnedTop) == null ? void 0 : f.children) != null && v[b] && (P.current.colGroupPinnedTop.children[b].width = B + "px"), (j = (R = P.current.colGroupPinnedBottom) == null ? void 0 : R.children) != null && j[b] && (P.current.colGroupPinnedBottom.children[b].width = B + "px");
+          D[b].width = B + "px", (o = (n = P.current.colGroupHeader) == null ? void 0 : n.children) != null && o[b] && (P.current.colGroupHeader.children[b].width = B + "px"), (a = (i = P.current.colGroupFooter) == null ? void 0 : i.children) != null && a[b] && (P.current.colGroupFooter.children[b].width = B + "px"), (s = (d = P.current.colGroupStickyHeader) == null ? void 0 : d.children) != null && s[b] && (P.current.colGroupStickyHeader.children[b].width = B + "px"), (u = (l = P.current.colGroupStickyFooter) == null ? void 0 : l.children) != null && u[b] && (P.current.colGroupStickyFooter.children[b].width = B + "px"), (v = (f = P.current.colGroupPinnedTop) == null ? void 0 : f.children) != null && v[b] && (P.current.colGroupPinnedTop.children[b].width = B + "px"), (j = (R = P.current.colGroupPinnedBottom) == null ? void 0 : R.children) != null && j[b] && (P.current.colGroupPinnedBottom.children[b].width = B + "px");
         }
       }
-      _.current && _.current.setWidth(g), $.current && $.current.setWidth(g), W.current && W.current.setWidth(g), L.current && L.current.setWidth(g), O.current && O.current.setWidth(g), z.current && z.current.setWidth(g), A.current && (A.current.style.width = g ? g + "px" : "");
+      _.current && _.current.setWidth(g), $.current && $.current.setWidth(g), L.current && L.current.setWidth(g), W.current && W.current.setWidth(g), O.current && O.current.setWidth(g), z.current && z.current.setWidth(g), A.current && (A.current.style.width = g ? g + "px" : "");
     } else {
       let g = 0;
       if (!P.current.colGroupMain)
         return;
-      const k = P.current.colGroupMain.children;
-      for (let b = 0; b < k.length; b++) {
-        const Z = k[b].width;
+      const D = P.current.colGroupMain.children;
+      for (let b = 0; b < D.length; b++) {
+        const Z = D[b].width;
         if (!Z) {
           g = 0;
           break;
         }
         g += parseFloat(Z.toString());
       }
-      g = Math.round(g), _.current && _.current.setWidth(g), $.current && $.current.setWidth(g), W.current && W.current.setWidth(g), L.current && L.current.setWidth(g), O.current && O.current.setWidth(g), z.current && z.current.setWidth(g), A.current && (A.current.style.width = g ? g + "px" : "");
+      g = Math.round(g), _.current && _.current.setWidth(g), $.current && $.current.setWidth(g), L.current && L.current.setWidth(g), W.current && W.current.setWidth(g), O.current && O.current.setWidth(g), z.current && z.current.setWidth(g), A.current && (A.current.style.width = g ? g + "px" : "");
     }
     Ee.current && or();
   }, or = () => {
@@ -855,26 +855,26 @@ const In = (t, D, p, K) => {
       r && (e.current = r, re());
     }
   }, Pe = c.useCallback(
-    (e, r, o, n, i) => {
+    (e, r, n, o, i) => {
       var l;
-      if (!ar() && !o || !e)
+      if (!ar() && !n || !e)
         return;
       const a = {
         type: e,
         nativeEvent: r,
         columns: t.columnsRef,
         dataItemKey: t.gridProps.dataItemKey || "",
-        dataItem: n,
+        dataItem: o,
         field: i,
         ...typeof t.gridProps.clipboard != "boolean" ? t.gridProps.clipboard : {},
-        ...o
-      }, d = T(), s = Lr({
+        ...n
+      }, d = T(), s = Wr({
         event: a,
         data: d,
         selectedState: (l = t.gridProps.select) != null ? l : {},
         previousCopiedItems: lt.current
       });
-      e !== Ve.paste && (lt.current = s.copiedItems), t.gridProps.onClipboard && D && m(t.gridProps.onClipboard, {
+      e !== Ve.paste && (lt.current = s.copiedItems), t.gridProps.onClipboard && K && m(t.gridProps.onClipboard, {
         ...a,
         ...s
       });
@@ -890,18 +890,18 @@ const In = (t, D, p, K) => {
     var i, a, d;
     if (!J)
       return !1;
-    const e = Mr(N()), r = e ? e.matches(".k-table-td") ? e : (i = N()) == null ? void 0 : i.body : (a = N()) == null ? void 0 : a.body, o = r == null ? void 0 : r.closest(".k-grid-container"), n = r && ((d = F.current) == null ? void 0 : d.contains(r));
-    return !!(r && n && o);
-  }, ot = (e, r, o, n, i, a, d) => {
-    Ae(), Ie.current = !0, We.current = !0, t.gridProps.onColumnResize && D && m(t.gridProps.onColumnResize, {
+    const e = Mr(N()), r = e ? e.matches(".k-table-td") ? e : (i = N()) == null ? void 0 : i.body : (a = N()) == null ? void 0 : a.body, n = r == null ? void 0 : r.closest(".k-grid-container"), o = r && ((d = F.current) == null ? void 0 : d.contains(r));
+    return !!(r && o && n);
+  }, ot = (e, r, n, o, i, a, d) => {
+    Ae(), Ie.current = !0, Le.current = !0, t.gridProps.onColumnResize && K && m(t.gridProps.onColumnResize, {
       columns: se(),
-      nativeEvent: n,
+      nativeEvent: o,
       targetColumnId: d,
       index: e,
       newWidth: r,
-      oldWidth: o,
+      oldWidth: n,
       end: i,
-      target: S.current
+      target: x.current
     }), i && He(a);
   }, cr = () => {
     var e;
@@ -915,7 +915,7 @@ const In = (t, D, p, K) => {
   }, I = (e) => ({
     nativeEvent: e && e.nativeEvent,
     syntheticEvent: e,
-    target: S.current
+    target: x.current
   }), dr = (e) => ({
     ...e,
     nativeEvent: void 0,
@@ -930,13 +930,13 @@ const In = (t, D, p, K) => {
     }
     e(dr(r));
   }, lr = () => {
-    var e, r, o;
+    var e, r, n;
     if (H.current && ((e = H.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
       ze.current = !1, (r = document.activeElement) != null && r.closest(".k-grid-edit-row") ? Oe.current = document.activeElement : Oe.current = void 0;
-      const n = Array.from((o = H.current) == null ? void 0 : o.getElementsByClassName("k-grid-edit-row"));
-      n.length > je.current.length ? Ce.current = n.filter(
+      const o = Array.from((n = H.current) == null ? void 0 : n.getElementsByClassName("k-grid-edit-row"));
+      o.length > je.current.length ? Ce.current = o.filter(
         (i) => !je.current.includes(i)
-      )[0] : n.length === 1 && (Ce.current = n[0], ze.current = !0), je.current = n;
+      )[0] : o.length === 1 && (Ce.current = o[0], ze.current = !0), je.current = o;
     }
   }, T = () => t.dataRef.filter((e) => e.rowType === "data").map((e) => e.dataItem), N = () => {
     var e;
@@ -944,16 +944,16 @@ const In = (t, D, p, K) => {
       return ((e = he()) == null ? void 0 : e.ownerDocument) || document;
   }, he = () => F.current, Re = c.useCallback(
     (e) => {
-      var n, i;
-      if (!y.current || !((n = y.current) != null && n.container) || p === "none")
+      var o, i;
+      if (!y.current || !((o = y.current) != null && o.container) || p === "none")
         return;
       G.current && G.current.disconnect();
-      const { rowIndex: r } = e, o = he();
-      if (x) {
+      const { rowIndex: r } = e, n = he();
+      if (k) {
         const a = ((i = y.current.rowHeightService) == null ? void 0 : i.offset(r)) || 0;
         y.current.container.scroll(0, a);
-      } else if (o) {
-        const a = r < 1 ? o.querySelector("tbody > tr:nth-child(1)") : o.querySelector(`tbody > tr:nth-child(${r + 1})`);
+      } else if (n) {
+        const a = r < 1 ? n.querySelector("tbody > tr:nth-child(1)") : n.querySelector(`tbody > tr:nth-child(${r + 1})`);
         a && E.current && (E.current.scrollTop = a.offsetTop);
       }
     },
@@ -962,19 +962,19 @@ const In = (t, D, p, K) => {
     ye.current = window.innerWidth, sr() || re();
   }, gr = () => {
     var a;
-    const { virtualTotal: e, virtualPageSize: r, gridProps: o } = t, n = y.current, i = t.gridProps.rowHeight || ((a = o.minRowHeightRef) == null ? void 0 : a.current) || 0;
-    n && (n.fixedScroll = o.fixedScroll || !1, n.PageChange = qt, n.pageSize = r, n.scrollableVirtual = x, n.container = E.current, n.tableBody = H.current, n.scrollHeightContainer = ct.current, n.scrollbarOverlaySpacerElement = ve.current, n.overlaySyncingRef = Fe, n.table = A.current, (!n.rowHeightService || n.total !== e) && i && (n.total = e, n.rowHeightService = new Fr(e, i)));
+    const { virtualTotal: e, virtualPageSize: r, gridProps: n } = t, o = y.current, i = t.gridProps.rowHeight || ((a = n.minRowHeightRef) == null ? void 0 : a.current) || 0;
+    o && (o.fixedScroll = n.fixedScroll || !1, o.PageChange = qt, o.pageSize = r, o.scrollableVirtual = k, o.container = E.current, o.tableBody = H.current, o.scrollHeightContainer = ct.current, o.scrollbarOverlaySpacerElement = ve.current, o.overlaySyncingRef = Fe, o.table = A.current, (!o.rowHeightService || o.total !== e) && i && (o.total = e, o.rowHeightService = new Fr(e, i)));
   }, at = c.useCallback(
     (e) => {
       const r = { rowIndex: Ne.current };
-      e.forEach((o) => {
-        o.boundingClientRect.height !== o.intersectionRect.height && Re(r);
+      e.forEach((n) => {
+        n.boundingClientRect.height !== n.intersectionRect.height && Re(r);
       });
     },
     [Re]
   ), re = () => {
     t.gridProps.forceUpdate && t.gridProps.forceUpdate();
-  }, fr = (e) => e.left !== void 0 ? Ue !== "rtl" ? { left: e.left, right: e.right } : { left: e.right, right: e.left } : {}, S = c.useRef(null), y = c.useRef(void 0), P = c.useRef(void 0), U = c.useRef(void 0), V = c.useRef(void 0), ne = c.useRef(void 0), be = c.useRef(void 0), G = c.useRef(null), H = c.useRef(null), mr = c.useRef(null), E = c.useRef(null), A = c.useRef(null), Pr = c.useRef(null), F = c.useRef(null), ct = c.useRef(null), q = c.useRef(null), ve = c.useRef(null), dt = c.useRef(!1), Fe = c.useRef(!1), $ = c.useRef(null), _ = c.useRef(null), W = c.useRef(null), L = c.useRef(null), O = c.useRef(null), z = c.useRef(null), hr = c.useRef(null), Rr = c.useRef(null), We = c.useRef(!1), Le = c.useRef(!1), Ce = c.useRef(void 0), Oe = c.useRef(void 0), ze = c.useRef(!1), Ie = c.useRef(!0), Be = c.useRef(0), pe = c.useRef(void 0), Ne = c.useRef(void 0), je = c.useRef([]), lt = c.useRef([]), ye = c.useRef(0), we = c.useRef(
+  }, fr = (e) => e.left !== void 0 ? Ue !== "rtl" ? { left: e.left, right: e.right } : { left: e.right, right: e.left } : {}, x = c.useRef(null), y = c.useRef(void 0), P = c.useRef(void 0), U = c.useRef(void 0), V = c.useRef(void 0), ne = c.useRef(void 0), be = c.useRef(void 0), G = c.useRef(null), H = c.useRef(null), mr = c.useRef(null), E = c.useRef(null), A = c.useRef(null), Pr = c.useRef(null), F = c.useRef(null), ct = c.useRef(null), q = c.useRef(null), ve = c.useRef(null), dt = c.useRef(!1), Fe = c.useRef(!1), $ = c.useRef(null), _ = c.useRef(null), L = c.useRef(null), W = c.useRef(null), O = c.useRef(null), z = c.useRef(null), hr = c.useRef(null), Rr = c.useRef(null), Le = c.useRef(!1), We = c.useRef(!1), Ce = c.useRef(void 0), Oe = c.useRef(void 0), ze = c.useRef(!1), Ie = c.useRef(!0), Be = c.useRef(0), pe = c.useRef(void 0), Ne = c.useRef(void 0), je = c.useRef([]), lt = c.useRef([]), ye = c.useRef(0), we = c.useRef(
     null
   ), br = typeof t.gridProps.groupable == "object" && !!t.gridProps.groupable.stickyHeaders, vr = typeof t.gridProps.groupable == "object" && !!t.gridProps.groupable.stickyFooters, Cr = !!((ft = t.gridProps.group) != null && ft.length), {
     stickyHeaderItems: Ir,
@@ -998,7 +998,7 @@ const In = (t, D, p, K) => {
         return (e = y.current) == null ? void 0 : e.rowHeightService;
       }
     }
-  }), ce = c.useRef(null), Sr = c.useRef(null), xr = c.useRef(null), Ue = Gr(F), x = t.isVirtualScroll, kr = c.useMemo(() => c.Children.toArray(t.gridProps.children), [t.gridProps.children]), ut = t.gridProps.groupable === !0 || typeof t.gridProps.groupable == "object" && t.gridProps.groupable.enabled !== !1, h = xe(t.gridProps.selectable), gt = Or(t.gridProps.editable), Dr = ye.current && Q && ye.current <= Q.medium && t.gridProps.adaptive;
+  }), ce = c.useRef(null), Sr = c.useRef(null), xr = c.useRef(null), Ue = Gr(F), k = t.isVirtualScroll, kr = c.useMemo(() => c.Children.toArray(t.gridProps.children), [t.gridProps.children]), ut = t.gridProps.groupable === !0 || typeof t.gridProps.groupable == "object" && t.gridProps.groupable.enabled !== !1, h = xe(t.gridProps.selectable), gt = Or(t.gridProps.editable), Dr = ye.current && Q && ye.current <= Q.medium && t.gridProps.adaptive;
   c.useMemo(() => {
     ie.onConstructor({
       navigatable: !!t.gridProps.navigatable,
@@ -1029,16 +1029,16 @@ const In = (t, D, p, K) => {
     clearTimeout(pe.current);
   }), []), c.useEffect(() => {
     var e;
-    nt(), Ae(), mt(), x && (me(), ir(), (e = y.current) == null || e.update()), st(), lr(), ie.onComponentDidUpdate({
+    nt(), Ae(), mt(), k && (me(), ir(), (e = y.current) == null || e.update()), st(), lr(), ie.onComponentDidUpdate({
       scope: F.current || void 0,
       contextStateRef: V,
       navigationStateRef: ne,
-      focusFirst: Le.current,
+      focusFirst: We.current,
       newEditableRow: Ce.current,
       singleEditRow: ze.current,
       lastActiveElement: Oe.current,
       navigatable: t.gridProps.navigatable
-    }), Et(), Le.current = !1, Ce.current = void 0, we.current = void 0;
+    }), Et(), We.current = !1, Ce.current = void 0, we.current = void 0;
   }), c.useEffect(() => {
     if (J) {
       const e = {
@@ -1054,47 +1054,49 @@ const In = (t, D, p, K) => {
     var r;
     let e;
     return J && window.ResizeObserver && (e = new window.ResizeObserver(() => {
-      ur(), x && me();
+      ur(), k && me();
     }), e.observe((r = N()) == null ? void 0 : r.body)), () => {
       e == null || e.disconnect();
     };
   }, []), c.useEffect(() => {
-    if (!J || !window.ResizeObserver || !x || !E.current)
+    if (!J || !window.ResizeObserver || !k || !E.current)
       return;
     const e = () => {
       var i, a;
-      const o = ((i = t.gridProps.containerHeightRef) == null ? void 0 : i.current) || 0;
+      const n = ((i = t.gridProps.containerHeightRef) == null ? void 0 : i.current) || 0;
       me();
-      const n = ((a = t.gridProps.containerHeightRef) == null ? void 0 : a.current) || 0;
-      (o === 0 && n > 0 || Math.abs(n - o) > 10) && re();
+      const o = ((a = t.gridProps.containerHeightRef) == null ? void 0 : a.current) || 0;
+      (n === 0 && o > 0 || Math.abs(o - n) > 10) && re();
     }, r = new window.ResizeObserver(e);
     return r.observe(E.current), () => {
       r.disconnect();
     };
-  }, [x, me]);
+  }, [k, me]);
   const Se = c.useCallback(() => {
-    var n;
+    var o;
     const e = E.current;
     if (!e)
       return;
-    const r = ((n = q.current) == null ? void 0 : n.offsetWidth) || 17, o = e.scrollWidth > e.clientWidth ? r : 0;
-    q.current && (q.current.style.bottom = o + "px"), ve.current && (ve.current.style.height = Math.max(0, e.scrollHeight - o) + "px");
+    const r = ((o = q.current) == null ? void 0 : o.offsetWidth) || 17, n = e.scrollWidth > e.clientWidth ? r : 0;
+    q.current && (q.current.style.bottom = n + "px"), ve.current && (ve.current.style.height = Math.max(0, e.scrollHeight - n) + "px");
   }, []);
   return c.useEffect(() => {
-    if (!J || !K || !E.current || !window.ResizeObserver)
+    if (!J || !S || !E.current || !window.ResizeObserver)
       return;
     const e = E.current, r = new window.ResizeObserver(Se);
     return A.current && r.observe(A.current), r.observe(e), () => {
       r.disconnect();
     };
-  }, [K, Se]), c.useEffect(() => {
-    !J || !K || !E.current || Se();
-  }, [K, Se, t.columnsState, t.gridProps.data]), c.useEffect(() => {
-    const e = E.current, r = x && K;
-    if (!(!e || !r && Y === 1))
-      return un(e, { wheelMultiplier: Y, overlayRequiresCustomWheel: r });
-  }, [x, K, Y]), c.useImperativeHandle(
-    S,
+  }, [S, Se]), c.useEffect(() => {
+    !J || !S || !E.current || Se();
+  }, [S, Se, t.columnsState, t.gridProps.data]), c.useEffect(() => {
+    const e = E.current, r = k && S;
+    if (!e || !r && Y === 1)
+      return;
+    const n = S ? e.parentElement : null;
+    return un(e, { wheelMultiplier: Y, overlayRequiresCustomWheel: r }, n);
+  }, [k, S, Y]), c.useImperativeHandle(
+    x,
     () => ({
       get element() {
         return he();
@@ -1104,15 +1106,15 @@ const In = (t, D, p, K) => {
         return se();
       },
       scrollIntoView: (e) => {
-        var n;
-        if (!((n = y.current) != null && n.container) || p === "none")
+        var o;
+        if (!((o = y.current) != null && o.container) || p === "none")
           return;
         const { rowIndex: r } = e;
         Ne.current = r;
-        const o = he();
-        if (G.current && o) {
+        const n = he();
+        if (G.current && n) {
           G.current.disconnect();
-          const i = o.querySelector(`[absolute-row-index="${Ne.current}"]`);
+          const i = n.querySelector(`[absolute-row-index="${Ne.current}"]`);
           i ? G.current.observe(i) : Re(e);
         }
       },
@@ -1125,7 +1127,7 @@ const In = (t, D, p, K) => {
       getTotal: Te,
       getLeafDataItems: T
     })
-  ), c.useImperativeHandle(t.gridRef, () => S.current), c.useMemo(() => {
+  ), c.useImperativeHandle(t.gridRef, () => x.current), c.useMemo(() => {
     P.current = new Yr(ot);
   }, [t.gridProps.onColumnResize, t.columnsRef]), c.useMemo(() => {
     U.current = new Qr(fe, rr, rt);
@@ -1135,11 +1137,11 @@ const In = (t, D, p, K) => {
     t.gridProps.group,
     t.columnsRef,
     t.gridProps.groupable
-  ]), P.current.resizable = t.gridProps.resizable || !1, P.current.columns = t.renderedColumnsRef || t.columnsRef, P.current.columnsState = Hr(t.columnsState), U.current.reorderable = t.gridProps.reorderable || !1, U.current.groupable = ut, U.current.columns = t.columnsRef, U.current.dir = Ue, gr(), Ar("grid", S, t.gridProps, t.gridProps.webMcp), /* @__PURE__ */ c.createElement(
+  ]), P.current.resizable = t.gridProps.resizable || !1, P.current.columns = t.renderedColumnsRef || t.columnsRef, P.current.columnsState = Hr(t.columnsState), U.current.reorderable = t.gridProps.reorderable || !1, U.current.groupable = ut, U.current.columns = t.columnsRef, U.current.dir = Ue, gr(), Ar("grid", x, t.gridProps, t.gridProps.webMcp), /* @__PURE__ */ c.createElement(
     vn.Provider,
     {
       value: {
-        isClient: D,
+        isClient: K,
         rowReorder: ae,
         activeDragRowDataItemRef: ce,
         reorderRowDragTargetRef: Sr,
@@ -1164,7 +1166,7 @@ const In = (t, D, p, K) => {
         rowDblClick: Kt,
         cellClick: Gt,
         headerCellClick: Je,
-        itemChange: Wt,
+        itemChange: Lt,
         onDialogEditCancel: Mt,
         onDialogEditSubmit: Tt,
         columnReorder: fe,
@@ -1198,7 +1200,7 @@ const In = (t, D, p, K) => {
         onKeyDown: St,
         onFocus: xt,
         scrollHandler: yt,
-        selectionChange: Lt,
+        selectionChange: Wt,
         groupSelectionChange: Ot,
         mobileMode: Dr,
         adaptiveColumnMenuRef: ye.current,
@@ -1227,8 +1229,8 @@ const In = (t, D, p, K) => {
         stickyHeaderRef: yr,
         stickyFooterItems: wr,
         stickyFooterRef: Ee,
-        stickyHeaderTableRef: W,
-        stickyFooterTableRef: L,
+        stickyHeaderTableRef: L,
+        stickyFooterTableRef: W,
         pinnedTopTableRef: O,
         pinnedBottomTableRef: z,
         pinnedTopRef: hr,