@progress/kendo-react-grid 14.3.0-develop.6 → 14.3.0-develop.8

package/GridClientWrapper.mjs

@@ -6,33 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as c from "react";
-import { useAdaptiveModeContext as lr, canUseDOM as te, getActiveElement as sr, useDir as ur, setScrollbarWidth as pe, cloneArray as gr, RowHeightService as fr, getter as re } from "@progress/kendo-react-common";
-import { filterBy as mr } from "@progress/kendo-data-query";
-import { getSelectionOptions as Pe, populateClipboardData as hr, ClipboardActionType as Te, getEditableOptions as Pr, tableKeyboardNavigation as Y, ClipboardService as Rr, TableKeyboardNavigationContext as br, updateLeft as vr, updateRight as Cr, getGroupExpandableOptions as Ir, groupExpandReducer as yr, getDetailExpandableOptions as wr, detailExpandReducer as Er, getSelectedState as et, editReducer as Sr, EDIT_ACTION as xr, closestTagName as Re, getSelectedStateFromKeyDown as kr, getColumnIndex as Dr, getRowIndex as Kr } from "@progress/kendo-react-data-tools";
-import { ColumnResize as Hr } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as Gr } from "./drag/CommonDragLogic.mjs";
-import { useStickyGroups as Mr } from "./hooks/useStickyGroups.mjs";
-import { getDefaultHeadContextMenuItems as Tr, getDefaultBodyContextMenuItems as Ar, isRowReorderEnabled as Fr, calcRowHeight as Lr, sanitizeColumns as zr, getFlatColumnsState as Or, getDataAsArray as Wr } from "./utils/index.mjs";
-import { VirtualScroll as Nr } from "./VirtualScroll.mjs";
-import { GridContextMenu as Br } from "./contextMenu/GridContextMenu.mjs";
-import { GridContextMenuAnchorPart as tt } from "./contextMenu/enums.mjs";
-import { normalizeSortable as Vr, firstLevelSortSeqMap as jr } from "./sortCommon.mjs";
-import { BasePDFExport as Ur } from "./BasePDFExport.mjs";
-import { BaseCSVExport as qr } from "./BaseCSVExport.mjs";
-import { GridContext as $r } from "./utils/GridContext.mjs";
-import { operators as _r } from "./filterCommon.mjs";
-const Jr = (t, E, b, T) => {
-  const Q = Object.keys(E.cells).map((k) => b.findIndex((Z) => Z.field === k)), V = Object.keys(E.cells).length > 0 ? Q : !0;
-  return t.reduce((k, Z) => (k[Z[T != null ? T : "id"]] = V, k), {});
-}, rt = (t, E, b, T) => E.reduce((V, k) => ({
-  ...V,
-  ...Jr(mr(t, k), k, b, T)
-}), {}), un = (t) => {
-  var Ze;
-  const E = t.gridProps.isClient, [b, T] = c.useState({}), Q = lr(), V = c.useRef(null), k = c.useRef(null), Z = (e) => {
-    e.event.preventDefault(), T({
-      ...b,
+import * as d from "react";
+import { useAdaptiveModeContext as wn, canUseDOM as ae, getActiveElement as yn, useDir as En, setScrollbarWidth as dt, cloneArray as xn, RowHeightService as Sn, getter as ee } from "@progress/kendo-react-common";
+import { filterBy as kn } from "@progress/kendo-data-query";
+import { getSelectionOptions as ye, populateClipboardData as Dn, ClipboardActionType as Oe, getEditableOptions as Kn, tableKeyboardNavigation as te, ClipboardService as Gn, TableKeyboardNavigationContext as Tn, updateLeft as Hn, updateRight as Mn, getGroupExpandableOptions as An, groupExpandReducer as Fn, getDetailExpandableOptions as Ln, detailExpandReducer as Bn, getSelectedState as ct, editReducer as zn, EDIT_ACTION as Wn, closestTagName as Ee, getSelectedStateFromKeyDown as On, getColumnIndex as Nn, getRowIndex as pn } from "@progress/kendo-react-data-tools";
+import { ColumnResize as Un } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as Vn } from "./drag/CommonDragLogic.mjs";
+import { useStickyGroups as jn } from "./hooks/useStickyGroups.mjs";
+import { getDefaultHeadContextMenuItems as qn, getDefaultBodyContextMenuItems as $n, isRowReorderEnabled as _n, calcRowHeight as Zn, sanitizeColumns as Jn, getFlatColumnsState as Xn, getDataAsArray as Yn } from "./utils/index.mjs";
+import { VirtualScroll as Qn } from "./VirtualScroll.mjs";
+import { GridContextMenu as er, contextMenuItemsMap as tr } from "./contextMenu/GridContextMenu.mjs";
+import { GridContextMenuAnchorPart as st, GridContextMenuItemNames as xe } from "./contextMenu/enums.mjs";
+import { normalizeSortable as nr, firstLevelSortSeqMap as rr } from "./sortCommon.mjs";
+import { BasePDFExport as or } from "./BasePDFExport.mjs";
+import { BaseCSVExport as ir } from "./BaseCSVExport.mjs";
+import { GridContext as ar } from "./utils/GridContext.mjs";
+import { operators as dr } from "./filterCommon.mjs";
+const cr = (t, E, h, L) => {
+  const ne = Object.keys(E.cells).map((S) => h.findIndex((re) => re.field === S)), _ = Object.keys(E.cells).length > 0 ? ne : !0;
+  return t.reduce((S, re) => (S[re[L != null ? L : "id"]] = _, S), {});
+}, lt = (t, E, h, L) => E.reduce((_, S) => ({
+  ..._,
+  ...cr(kn(t, S), S, h, L)
+}), {}), Er = (t) => {
+  var at;
+  const E = t.gridProps.isClient, [h, L] = d.useState({}), ne = wn(), _ = d.useRef(null), S = d.useRef(null), re = (e) => {
+    e.event.preventDefault(), L({
+      ...h,
       show: !0,
       offset: {
         left: e.event.pageX,
@@ -41,41 +41,67 @@ const Jr = (t, E, b, T) => {
       dataItem: e.dataItem,
       field: e.field
     });
-  }, Ae = () => {
-    T({});
-  }, y = c.useMemo(() => t.columnsRef.find((e) => e.field === b.field), [t.columnsRef, b]), Fe = c.useMemo(() => {
+  }, Ne = () => {
+    L({});
+  }, ut = (e) => {
+    const n = t.gridProps.dataItemKey || "", o = h.dataItem, r = t.gridProps.pinnedTopRows || [], i = t.gridProps.pinnedBottomRows || [], a = n ? o[n] : void 0, c = a !== void 0 && r.some((s) => s[n] === a), l = a !== void 0 && i.some((s) => s[n] === a);
+    return e.map((s) => {
+      const u = typeof s == "string" ? tr[s] : s;
+      return (u == null ? void 0 : u.name) === xe.pinRow && u.items ? {
+        ...u,
+        items: u.items.filter((f) => f.name === xe.pinTop ? !c : f.name === xe.pinBottom ? !l : f.name === xe.unpin ? c || l : !0)
+      } : s;
+    });
+  }, y = d.useMemo(() => t.columnsRef.find((e) => e.field === h.field), [t.columnsRef, h]), pe = d.useMemo(() => {
     const e = t.gridProps.sortable && (y == null ? void 0 : y.sortable);
-    return Tr({
+    return qn({
       pdf: !!t.gridProps.pdf,
       sortable: !!e,
-      selectable: Pe(t.gridProps.selectable).enabled,
+      selectable: ye(t.gridProps.selectable).enabled,
       clipboard: !!t.gridProps.clipboard
     });
-  }, [y, t.gridProps.sortable, t.gridProps.selectable, t.gridProps.clipboard]), Le = c.useMemo(() => (t.gridProps.sortable && (y == null || y.sortable), Ar({
+  }, [y, t.gridProps.sortable, t.gridProps.selectable, t.gridProps.clipboard]), Ue = d.useMemo(() => (t.gridProps.sortable && (y == null || y.sortable), $n({
     pdf: !!t.gridProps.pdf,
-    selectable: Pe(t.gridProps.selectable).enabled,
+    selectable: ye(t.gridProps.selectable).enabled,
     clipboard: !!t.gridProps.clipboard,
-    rowReorderable: Fr(t.gridProps.rowReorderable)
-  })), [y, t.gridProps.sortable, t.gridProps.selectable, t.gridProps.clipboard]), ne = c.useMemo(() => {
-    const e = (y == null ? void 0 : y.contextMenu) || t.gridProps.contextMenu, r = typeof e == "function" ? e(b) : e;
-    if (r && b.offset) {
-      const o = b.dataItem ? tt.body : tt.head, n = r[o], i = b.dataItem ? Le : Fe;
-      return n === !1 ? void 0 : n === !0 || n === void 0 ? i : n;
+    rowReorderable: _n(t.gridProps.rowReorderable),
+    pinnable: !!t.gridProps.pinnable
+  })), [
+    y,
+    t.gridProps.sortable,
+    t.gridProps.selectable,
+    t.gridProps.clipboard,
+    t.gridProps.pinnable,
+    t.gridProps.rowReorderable,
+    t.gridProps.pdf
+  ]), de = d.useMemo(() => {
+    const e = (y == null ? void 0 : y.contextMenu) || t.gridProps.contextMenu, n = typeof e == "function" ? e(h) : e;
+    if (n && h.offset) {
+      const o = h.dataItem ? st.body : st.head, r = n[o], i = h.dataItem ? Ue : pe;
+      let a;
+      return r === !0 || r === void 0 ? a = i : r !== !1 && (a = r), t.gridProps.pinnable && a && h.dataItem ? ut(a) : a;
     }
-  }, [t.gridProps.contextMenu, b, Le, Fe, y]), nt = (e) => {
-    var d, u, g, m, f, I, l, w, R;
-    const r = e.event.item, o = {
+  }, [
+    t.gridProps.contextMenu,
+    t.gridProps.pinnable,
+    h,
+    Ue,
+    pe,
+    y
+  ]), gt = (e) => {
+    var c, l, s, u, f, I, P, W, O;
+    const n = e.event.item, o = {
       target: x.current,
       syntheticEvent: e.event.syntheticEvent,
       nativeEvent: e.event.nativeEvent,
-      menuItem: r,
+      menuItem: n,
       ...e
     };
-    t.gridProps.onContextMenuItemClick && s(t.gridProps.onContextMenuItemClick, o);
-    const n = S(), i = {
+    t.gridProps.onContextMenuItemClick && g(t.gridProps.onContextMenuItemClick, o);
+    const r = k(), i = {
       selectedField: "",
       componentId: t.id,
-      dataItems: n,
+      dataItems: r,
       dataItem: e.dataItem,
       startRowIndex: -1,
       endRowIndex: -1,
@@ -86,301 +112,343 @@ const Jr = (t, E, b, T) => {
       metaKey: !1,
       shiftKey: !1,
       isDrag: !1,
-      ...Pe(t.gridProps.selectable),
+      ...ye(t.gridProps.selectable),
       ...o
-    }, a = n.findIndex((L) => L === e.dataItem);
-    switch ((d = r.data) == null ? void 0 : d.action) {
+    }, a = r.findIndex((N) => N === e.dataItem);
+    switch ((c = n.data) == null ? void 0 : c.action) {
       case "SortCommand":
         if (y) {
-          const L = (u = r.name) == null ? void 0 : u.toLowerCase().includes("asc"), X = ((g = r.name) == null ? void 0 : g.toLowerCase().includes("desc")) ? "desc" : void 0, Me = L ? "asc" : X, dr = r.name ? Me : void 0;
-          ze(e.event.syntheticEvent, y, dr);
+          const N = (l = n.name) == null ? void 0 : l.toLowerCase().includes("asc"), F = ((s = n.name) == null ? void 0 : s.toLowerCase().includes("desc")) ? "desc" : void 0, b = N ? "asc" : F, Ie = n.name ? b : void 0;
+          Ve(e.event.syntheticEvent, y, Ie);
         }
         break;
       case "SelectRowCommand":
-        Et(i);
+        At(i);
         break;
       case "SelectAllRowsCommand":
-        wt(i);
+        Mt(i);
         break;
       case "ExportPDFCommand":
-        ve();
+        ke();
         break;
       case "ClearSelectionCommand":
-        xt(i);
+        Lt(i);
         break;
       case "ReorderRowCommand":
-        ee.current = e.dataItem, (m = r.name) != null && m.toLowerCase().includes("rowup") && a > 0 && p(e.event.syntheticEvent, a - 1, "before"), (f = r.name) != null && f.toLowerCase().includes("rowdown") && a < n.length - 1 && p(e.event.syntheticEvent, a + 1, "after"), (I = r.name) != null && I.toLowerCase().includes("rowtop") && p(e.event.syntheticEvent, 0, "before"), (l = r.name) != null && l.toLowerCase().includes("rowbottom") && p(e.event.syntheticEvent, n.length - 1, "after");
+        ie.current = e.dataItem, (u = n.name) != null && u.toLowerCase().includes("rowup") && a > 0 && oe(e.event.syntheticEvent, a - 1, "before"), (f = n.name) != null && f.toLowerCase().includes("rowdown") && a < r.length - 1 && oe(e.event.syntheticEvent, a + 1, "after"), (I = n.name) != null && I.toLowerCase().includes("rowtop") && oe(e.event.syntheticEvent, 0, "before"), (P = n.name) != null && P.toLowerCase().includes("rowbottom") && oe(e.event.syntheticEvent, r.length - 1, "after");
         break;
       case "CopySelectionCommand":
-        de(
-          Te.copy,
+        fe(
+          Oe.copy,
           e.event.nativeEvent,
           {
-            copyHeaders: !((w = r.name) != null && w.toLowerCase().includes("noheaders"))
+            copyHeaders: !((W = n.name) != null && W.toLowerCase().includes("noheaders"))
           },
           e.dataItem,
           e.field
         );
         break;
       case "PasteCommand":
-        de(
-          Te.paste,
+        fe(
+          Oe.paste,
           e.event.nativeEvent,
           {
-            copyHeaders: !((R = r.name) != null && R.toLowerCase().includes("noheaders"))
+            copyHeaders: !((O = n.name) != null && O.toLowerCase().includes("noheaders"))
           },
           e.dataItem,
           e.field
         );
         break;
+      case "PinTopCommand":
+        se("pinTop", e.dataItem);
+        break;
+      case "PinBottomCommand":
+        se("pinBottom", e.dataItem);
+        break;
+      case "UnpinCommand":
+        se("unpin", e.dataItem);
+        break;
     }
-    Ae();
-  }, oe = () => {
-    const e = t.columnsRef.filter((r) => r.declarationIndex >= 0 && r.parentIndex === -1);
-    return zr(e);
-  }, ot = (e, r, o) => {
+    Ne();
+  }, ce = () => {
+    const e = t.columnsRef.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
+    return Jn(e);
+  }, ft = (e, n, o) => {
     if (t.gridProps.onContextMenu && E) {
-      const n = {
+      const r = {
         target: x.current,
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
-        dataItem: r,
+        dataItem: n,
         field: o
       };
-      s(t.gridProps.onContextMenu, n);
+      g(t.gridProps.onContextMenu, r);
     }
-    t.gridProps.contextMenu && Z({
+    t.gridProps.contextMenu && re({
       event: e,
-      dataItem: r,
+      dataItem: n,
       field: o
     });
-  }, it = (e) => {
-    var a, d;
+  }, mt = (e) => {
+    var a, c;
     if (e.target !== e.currentTarget)
       return;
-    clearTimeout(De.current), v.current && (v.current.table = W.current);
-    const r = e.currentTarget.scrollLeft, o = e.currentTarget.scrollTop;
-    t.gridProps.columnVirtualization && (!D || o === ke.current) && (De.current = window.setTimeout(() => {
-      q();
-    }, 0)), t.gridProps.scrollLeftRef && (t.gridProps.scrollLeftRef.current = r), B.current && B.current.setScrollLeft(r), N.current && N.current.setScrollLeft(r), G != null && G.current && G.current.setScrollLeft(r), M != null && M.current && M.current.setScrollLeft(r);
-    const n = (a = t.gridProps.virtualSkipRef) == null ? void 0 : a.current;
-    v.current && o !== ke.current && v.current.scrollHandler(e);
-    const i = D && ((d = t.gridProps.virtualSkipRef) == null ? void 0 : d.current) !== n;
-    t.gridProps.onScroll && E && s(t.gridProps.onScroll, {
+    clearTimeout(Le.current), v.current && (v.current.table = V.current);
+    const n = e.currentTarget.scrollLeft, o = e.currentTarget.scrollTop;
+    t.gridProps.columnVirtualization && (!D || o === Fe.current) && (Le.current = window.setTimeout(() => {
+      X();
+    }, 0)), t.gridProps.scrollLeftRef && (t.gridProps.scrollLeftRef.current = n), q.current && q.current.setScrollLeft(n), j.current && j.current.setScrollLeft(n), T != null && T.current && T.current.setScrollLeft(n), H != null && H.current && H.current.setScrollLeft(n), M != null && M.current && M.current.setScrollLeft(n), A != null && A.current && A.current.setScrollLeft(n);
+    const r = (a = t.gridProps.virtualSkipRef) == null ? void 0 : a.current;
+    v.current && o !== Fe.current && v.current.scrollHandler(e);
+    const i = D && ((c = t.gridProps.virtualSkipRef) == null ? void 0 : c.current) !== r;
+    t.gridProps.onScroll && E && g(t.gridProps.onScroll, {
       ...C(e)
-    }), ke.current = o, i || Xe();
-  }, at = (e) => {
-    var o, n;
-    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 = K.current) == null ? void 0 : n.querySelector(`tr[absolute-row-index="${i}"]`)))
-        return he.current = {
+    }), Fe.current = o, i || rt();
+  }, Pt = (e) => {
+    var o, r;
+    const n = e.target;
+    if ((e.keyCode === 38 || e.keyCode === 40) && n.closest(".k-grid-sticky-container")) {
+      const i = parseInt(((o = n.closest("tr")) == null ? void 0 : o.getAttribute("absolute-row-index")) || "", 10), a = n.getAttribute("data-keyboardnavid");
+      if (!isNaN(i) && a && !((r = K.current) == null ? void 0 : r.querySelector(`tr[absolute-row-index="${i}"]`)))
+        return Ce.current = {
           navId: a,
           key: e.key,
           code: e.code,
           keyCode: e.keyCode
-        }, e.preventDefault(), e.stopPropagation(), se({ rowIndex: i }), !0;
+        }, e.preventDefault(), e.stopPropagation(), Pe({ rowIndex: i }), !0;
     }
     return !1;
-  }, ct = () => {
+  }, ht = () => {
     var a;
-    if (!he.current || !H.current)
+    if (!Ce.current || !G.current)
       return;
-    const { navId: e, key: r, code: o, keyCode: n } = he.current, i = (a = K.current) == null ? void 0 : a.querySelector(
+    const { navId: e, key: n, code: o, keyCode: r } = Ce.current, i = (a = K.current) == null ? void 0 : a.querySelector(
       `[data-keyboardnavid="${e}"]`
     );
     i && i.dispatchEvent(
       new KeyboardEvent("keydown", {
-        key: r,
+        key: n,
         code: o,
-        keyCode: n,
+        keyCode: r,
         bubbles: !0,
         cancelable: !0
       })
     );
-  }, dt = (e) => {
-    if (at(e))
+  }, Rt = (e) => {
+    if (Pt(e))
       return;
-    Y.onKeyDown(e, {
+    te.onKeyDown(e, {
       navigatable: t.gridProps.navigatable || !1,
-      contextStateRef: O,
-      navigationStateRef: $,
-      onNavigationAction: st,
-      columns: oe()
-    }), Y.onGetSnapshotBeforeUpdate({
-      document: A(),
-      contextStateRef: O,
-      navigationStateRef: $
+      contextStateRef: U,
+      navigationStateRef: Y,
+      onNavigationAction: vt,
+      columns: ce()
+    }), te.onGetSnapshotBeforeUpdate({
+      document: B(),
+      contextStateRef: U,
+      navigationStateRef: Y
     });
-    const r = {
-      dataItems: S(),
-      mode: P.mode,
-      cell: P.cell,
+    const n = {
+      dataItems: k(),
+      mode: R.mode,
+      cell: R.cell,
       componentId: t.id,
       selectedField: "",
       ...C(e)
     };
-    t.gridProps.onKeyDown && E && s(t.gridProps.onKeyDown, r);
-  }, lt = (e) => {
-    Y.onFocus(e, {
+    t.gridProps.onKeyDown && E && g(t.gridProps.onKeyDown, n);
+  }, bt = (e) => {
+    te.onFocus(e, {
       navigatable: !!t.gridProps.navigatable,
-      contextStateRef: O
+      contextStateRef: U
     });
-  }, st = (e) => {
-    const { columnsRef: r } = t;
-    if (e.action === "moveToNextPage" && Kt(e.event), e.action === "moveToPrevPage" && Ht(e.event), e.focusElement && (e.action === "reorderToRight" || e.action === "reorderToLeft")) {
+  }, vt = (e) => {
+    const { columnsRef: n } = t;
+    if (e.action === "moveToNextPage" && Wt(e.event), e.action === "moveToPrevPage" && Ot(e.event), e.focusElement && (e.action === "reorderToRight" || e.action === "reorderToLeft")) {
       const o = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-      if (!r[o].reorderable)
+      if (!n[o].reorderable)
         return;
       if (e.action === "reorderToRight" && o < t.columnsRef.length - 1) {
-        if (r[o + 1].disableReorder)
+        if (n[o + 1].disableReorder)
           return;
-        ae(o, o + 1, e.event);
+        ue(o, o + 1, e.event);
       }
       if (e.action === "reorderToLeft" && o > 0) {
-        if (r[o - 1].disableReorder)
+        if (n[o - 1].disableReorder)
           return;
-        ae(o, o - 1, e.event);
+        ue(o, o - 1, e.event);
       }
     }
-    if (e.action === "select" && Ct(e.event), t.gridProps.onNavigationAction && E) {
+    if (e.action === "select" && Gt(e.event), t.gridProps.onNavigationAction && E) {
       const o = {
         focusElement: e.focusElement,
         ...C(e.event)
       };
-      s(t.gridProps.onNavigationAction, o);
+      g(t.gridProps.onNavigationAction, o);
     }
-  }, ut = (e, r) => {
-    t.gridProps.onRowClick && Re(e.target, "TD") && s(t.gridProps.onRowClick, {
-      dataItem: r,
+  }, Ct = (e, n) => {
+    t.gridProps.onRowClick && Ee(e.target, "TD") && g(t.gridProps.onRowClick, {
+      dataItem: n,
       ...C(e)
     });
-  }, gt = (e, r) => {
-    t.gridProps.onRowDoubleClick && Re(e.target, "TD") && s(t.gridProps.onRowDoubleClick, {
-      dataItem: r,
+  }, It = (e, n) => {
+    t.gridProps.onRowDoubleClick && Ee(e.target, "TD") && g(t.gridProps.onRowDoubleClick, {
+      dataItem: n,
       ...C(e)
     });
-  }, ft = (e) => {
-    t.gridProps.onItemChange && s(t.gridProps.onItemChange, {
+  }, wt = (e) => {
+    t.gridProps.onItemChange && g(t.gridProps.onItemChange, {
       ...C(e.syntheticEvent),
       dataItem: e.dataItem,
       field: void 0,
       value: void 0
     });
-  }, mt = (e) => {
-    t.gridProps.onItemChange && t.gridProps.onEditChange && s(t.gridProps.onEditChange, {
+  }, yt = (e) => {
+    t.gridProps.onItemChange && t.gridProps.onEditChange && g(t.gridProps.onEditChange, {
       edit: {},
       ...C(e.syntheticEvent)
     });
-  }, ht = (e, r, o) => {
-    if (Qe.enabled && Qe.mode === "incell" && t.gridProps.dataItemKey) {
-      const n = Sr(t.gridProps.edit, {
-        type: xr.ENTER_FIELD_EDIT,
-        payload: { id: r[t.gridProps.dataItemKey], field: o }
+  }, Et = (e, n, o) => {
+    var r, i;
+    if (it.enabled && it.mode === "incell" && t.gridProps.dataItemKey) {
+      if (t.gridProps.pinnable && t.gridProps.editZoneRef) {
+        const c = !!((i = (r = e.target).closest) != null && i.call(r, ".k-grid-pinned-container"));
+        t.gridProps.editZoneRef.current = c ? "pinned" : "body";
+      }
+      const a = zn(t.gridProps.edit, {
+        type: Wn.ENTER_FIELD_EDIT,
+        payload: { id: n[t.gridProps.dataItemKey], field: o }
       });
-      t.gridProps.onEditChange && s(t.gridProps.onEditChange, {
-        edit: n,
+      t.gridProps.onEditChange && g(t.gridProps.onEditChange, {
+        edit: a,
         ...C(e)
       });
     }
-  }, Pt = (e, r) => {
-    var n;
-    if (wr(t.detailExpandable).enabled) {
-      const i = Er((n = t.gridProps.detailExpand) != null ? n : {}, e);
-      t.gridProps.onDetailExpandChange && s(t.gridProps.onDetailExpandChange, {
-        ...C(r),
+  }, xt = (e, n) => {
+    var r;
+    if (Ln(t.detailExpandable).enabled) {
+      const i = Bn((r = t.gridProps.detailExpand) != null ? r : {}, e);
+      t.gridProps.onDetailExpandChange && g(t.gridProps.onDetailExpandChange, {
+        ...C(n),
         detailExpand: i
       });
     }
-  }, Rt = (e, r) => {
-    var n;
-    const o = Ir(
+  }, St = (e, n) => {
+    var r;
+    const o = An(
       typeof t.gridProps.groupable == "object" ? t.gridProps.groupable.expandable !== !1 : t.gridProps.groupable
     );
     if (o.enabled) {
-      const i = yr((n = t.gridProps.groupExpand) != null ? n : [], e, o);
-      t.gridProps.onGroupExpandChange && s(t.gridProps.onGroupExpandChange, {
-        ...C(r),
+      const i = Fn((r = t.gridProps.groupExpand) != null ? r : [], e, o);
+      t.gridProps.onGroupExpandChange && g(t.gridProps.onGroupExpandChange, {
+        ...C(n),
         groupExpand: i
       });
     }
-    nr(e.group);
-  }, ze = (e, r, o) => {
-    const { allowUnsort: n, mode: i } = Vr(
+    hn(e.group);
+  }, kt = d.useCallback(
+    (e) => {
+      const { dataItemKey: n = "", pinnedTopRows: o = [], pinnedBottomRows: r = [] } = t.gridProps;
+      if (!n || !e)
+        return "none";
+      const i = e[n];
+      return o != null && o.some((a) => a[n] === i) ? "top" : r != null && r.some((a) => a[n] === i) ? "bottom" : "none";
+    },
+    [t.gridProps.pinnedTopRows, t.gridProps.pinnedBottomRows, t.gridProps.dataItemKey]
+  ), se = (e, n) => {
+    if (!t.gridProps.pinnable)
+      return;
+    const { dataItemKey: o = "", pinnedTopRows: r = [], pinnedBottomRows: i = [] } = t.gridProps, a = n[o], c = r.filter((u) => u[o] !== a), l = i.filter((u) => u[o] !== a);
+    let s;
+    switch (e) {
+      case "pinTop":
+        s = { pinnedTopRows: [...c, n], pinnedBottomRows: l, dataItem: n };
+        break;
+      case "pinBottom":
+        s = { pinnedTopRows: c, pinnedBottomRows: [...l, n], dataItem: n };
+        break;
+      case "unpin":
+        s = { pinnedTopRows: c, pinnedBottomRows: l, dataItem: n };
+        break;
+      default:
+        return;
+    }
+    t.gridProps.onRowPinChange && g(t.gridProps.onRowPinChange, s);
+  }, Ve = (e, n, o) => {
+    const { allowUnsort: r, mode: i } = nr(
       t.gridProps.sortable || !1,
-      r.sortable || !1
-    ), a = (t.gridProps.sort || []).filter((g) => g.field === r.field)[0], d = o || jr[n][a && a.dir || ""], u = i === "single" ? [] : (t.gridProps.sort || []).filter((g) => g.field !== r.field);
-    d !== "" && r.field && u.push({ field: r.field, dir: d }), Oe(u, e);
-  }, bt = (e) => {
-    t.gridProps.onItemChange && s(t.gridProps.onItemChange, {
+      n.sortable || !1
+    ), a = (t.gridProps.sort || []).filter((s) => s.field === n.field)[0], c = o || rr[r][a && a.dir || ""], l = i === "single" ? [] : (t.gridProps.sort || []).filter((s) => s.field !== n.field);
+    c !== "" && n.field && l.push({ field: n.field, dir: c }), qe(l, e);
+  }, Dt = (e) => {
+    t.gridProps.onItemChange && g(t.gridProps.onItemChange, {
       ...C(e.syntheticEvent),
       dataItem: e.dataItem,
       dataIndex: e.dataIndex,
       field: e.field,
       value: e.value
     });
-  }, vt = (e) => {
-    var r;
-    if (t.gridProps.onSelectionChange && P.enabled) {
-      const { event: o, dataItem: n, dataIndex: i, columnIndex: a } = e, d = {
+  }, Kt = (e) => {
+    var n;
+    if (t.gridProps.onSelectionChange && R.enabled) {
+      const { event: o, dataItem: r, dataIndex: i, columnIndex: a } = e, c = {
         ...C(o),
-        dataItem: n,
+        dataItem: r,
         startColIndex: a,
         endColIndex: a,
         startRowIndex: i,
         endRowIndex: i,
-        dataItems: S(),
+        dataItems: k(),
         altKey: !1,
         ctrlKey: !1,
         shiftKey: !1,
         metaKey: !1,
-        mode: P.mode,
-        cell: P.cell,
+        mode: R.mode,
+        cell: R.cell,
         isDrag: !1,
         componentId: t.id,
         selectedField: ""
       };
-      s(t.gridProps.onSelectionChange, {
-        ...d,
-        select: t.gridProps.dataItemKey ? et({
-          event: d,
-          selectedState: (r = t.gridProps.select) != null ? r : {},
+      g(t.gridProps.onSelectionChange, {
+        ...c,
+        select: t.gridProps.dataItemKey ? ct({
+          event: c,
+          selectedState: (n = t.gridProps.select) != null ? n : {},
           dataItemKey: t.gridProps.dataItemKey
         }) : {}
       });
     }
-  }, Ct = (e) => {
-    var g, m;
-    if (!P.enabled || !t.gridProps.dataItemKey)
+  }, Gt = (e) => {
+    var s, u;
+    if (!R.enabled || !t.gridProps.dataItemKey)
       return;
-    const r = {
-      dataItems: S(),
-      mode: P.mode,
-      cell: P.cell,
+    const n = {
+      dataItems: k(),
+      mode: R.mode,
+      cell: R.cell,
       componentId: t.id,
       selectedField: "",
       ...C(e)
-    }, o = kr({
-      event: r,
-      selectedState: (g = t.gridProps.select) != null ? g : {},
+    }, o = On({
+      event: n,
+      selectedState: (s = t.gridProps.select) != null ? s : {},
       dataItemKey: t.gridProps.dataItemKey
     });
     if (o === t.gridProps.select)
       return;
-    const n = e.target, i = Re(n, "TD"), a = Re(n, "TR"), d = Dr(i), u = Kr(a);
-    if (d !== void 0 && u !== void 0) {
-      const f = (m = Wr(t.gridProps.data)) == null ? void 0 : m[u];
-      t.gridProps.onSelectionChange && s(t.gridProps.onSelectionChange, {
-        ...r,
+    const r = e.target, i = Ee(r, "TD"), a = Ee(r, "TR"), c = Nn(i), l = pn(a);
+    if (c !== void 0 && l !== void 0) {
+      const f = (u = Yn(t.gridProps.data)) == null ? void 0 : u[l];
+      t.gridProps.onSelectionChange && g(t.gridProps.onSelectionChange, {
+        ...n,
         select: o,
         dataItem: f,
-        startRowIndex: u,
-        startColIndex: d,
+        startRowIndex: l,
+        startColIndex: c,
         startDataItem: f,
         endDataItem: f,
-        endRowIndex: u,
-        endColIndex: d,
+        endRowIndex: l,
+        endColIndex: c,
         ctrlKey: e.ctrlKey,
         altKey: e.altKey,
         metaKey: e.metaKey,
@@ -388,50 +456,58 @@ const Jr = (t, E, b, T) => {
         isDrag: !1
       });
     }
-  }, It = (e) => {
-    if (t.gridProps.onHeaderSelectionChange && P.enabled) {
-      const r = S();
-      s(t.gridProps.onHeaderSelectionChange, {
-        select: e.syntheticEvent.target.checked ? r.reduce((o, n) => (t.gridProps.dataItemKey && re(t.gridProps.dataItemKey)(n) !== void 0 && (o[re(t.gridProps.dataItemKey)(n)] = !0), o), {}) : {},
+  }, Tt = (e) => {
+    if (t.gridProps.onHeaderSelectionChange && R.enabled) {
+      const n = k();
+      g(t.gridProps.onHeaderSelectionChange, {
+        select: e.syntheticEvent.target.checked ? n.reduce((o, r) => (t.gridProps.dataItemKey && ee(t.gridProps.dataItemKey)(r) !== void 0 && (o[ee(t.gridProps.dataItemKey)(r)] = !0), o), {}) : {},
         field: e.field,
         nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
         syntheticEvent: e.syntheticEvent,
         target: x.current,
-        dataItems: r
+        dataItems: n
       });
     }
-  }, j = (e, r) => {
-    t.gridProps.onSelectionChange && P.enabled && s(t.gridProps.onSelectionChange, {
+  }, Z = (e, n) => {
+    t.gridProps.onSelectionChange && R.enabled && g(t.gridProps.onSelectionChange, {
       ...e,
-      select: r
+      select: n
     });
-  }, yt = (e) => {
-    var r;
-    if (t.gridProps.onSelectionChange && P.enabled) {
-      const o = S()[e.startRowIndex], n = S()[e.endRowIndex], i = {
+  }, Ht = (e, n) => {
+    const o = t.gridProps.dataItemKey;
+    if (!o || !n)
+      return;
+    const r = ee(o), i = k().findIndex((a) => r(a) === r(n));
+    i !== -1 && je({
+      ...e,
+      startRowIndex: i,
+      endRowIndex: i
+    });
+  }, je = (e) => {
+    var n;
+    if (t.gridProps.onSelectionChange && R.enabled) {
+      const o = k(), r = o[e.startRowIndex], i = o[e.endRowIndex], a = {
         syntheticEvent: void 0,
         target: x.current,
         selectedField: "",
         componentId: t.id,
-        dataItems: S(),
+        dataItems: o,
         dataItem: null,
-        startDataItem: o,
-        endDataItem: n,
+        startDataItem: r,
+        endDataItem: i,
         ...e
-      }, a = et({
-        event: i,
-        selectedState: (r = t.gridProps.select) != null ? r : {},
-        // Thats kinda strange, even through the `dataItemKey` is required by the `getSelectedState`
-        // it does work correctly even without it
+      }, c = ct({
+        event: a,
+        selectedState: (n = t.gridProps.select) != null ? n : {},
         dataItemKey: t.gridProps.dataItemKey
       });
-      j(i, a);
+      Z(a, c);
     }
-  }, wt = (e) => {
-    if (t.gridProps.onSelectionChange && P.enabled) {
-      const r = e.dataItems[0], o = e.dataItems[e.dataItems.length - 1], n = {}, i = {
+  }, Mt = (e) => {
+    if (t.gridProps.onSelectionChange && R.enabled) {
+      const n = e.dataItems[0], o = e.dataItems[e.dataItems.length - 1], r = {}, i = {
         ...e,
-        startDataItem: r,
+        startDataItem: n,
         endDataItem: o,
         startRowIndex: 0,
         endRowIndex: e.dataItems.length - 1,
@@ -439,35 +515,35 @@ const Jr = (t, E, b, T) => {
         endColIndex: t.columnsRef.length - 1
       };
       e.dataItems.forEach((a) => {
-        const u = re(t.gridProps.dataItemKey)(a);
-        n[u] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0;
-      }), j(i, n);
+        const l = ee(t.gridProps.dataItemKey)(a);
+        r[l] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0;
+      }), Z(i, r);
     }
-  }, Et = (e) => {
-    if (t.gridProps.onSelectionChange && P.enabled) {
-      const o = re(t.gridProps.dataItemKey)(e.dataItem), n = 0, i = t.columnsRef.length - 1, a = e.dataItems.findIndex(
+  }, At = (e) => {
+    if (t.gridProps.onSelectionChange && R.enabled) {
+      const o = ee(t.gridProps.dataItemKey)(e.dataItem), r = 0, i = t.columnsRef.length - 1, a = e.dataItems.findIndex(
         (f) => f[t.gridProps.dataItemKey] === e.dataItem[t.gridProps.dataItemKey]
-      ), g = {
+      ), s = {
         ...e,
         startDataItem: a,
         endDataItem: a,
         startRowIndex: a,
         endRowIndex: a,
-        startColIndex: n,
+        startColIndex: r,
         endColIndex: i
-      }, m = e.mode === "multiple" ? t.gridProps.select || {} : {};
-      m[o] === !0 || Array.isArray(m[o]) && m[o].length === t.columnsRef.length ? delete m[o] : m[o] = e.cell ? [...Array(t.columnsRef.length).keys()] : !0, j(g, m);
+      }, 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, Z(s, u);
     }
-  }, St = (e) => {
-    if (!P.enabled)
+  }, Ft = (e) => {
+    if (!R.enabled)
       return;
-    const r = S(), o = {
+    const n = k(), o = {
       syntheticEvent: void 0,
       nativeEvent: void 0,
       target: x.current,
       selectedField: "",
       componentId: t.id,
-      dataItems: r,
+      dataItems: n,
       dataItem: null,
       startDataItem: null,
       endDataItem: null,
@@ -476,8 +552,8 @@ const Jr = (t, E, b, T) => {
       metaKey: !1,
       shiftKey: !1,
       isDrag: !1,
-      mode: P.mode,
-      cell: P.cell
+      mode: R.mode,
+      cell: R.cell
     };
     if (!e || e.length === 0) {
       const f = {
@@ -487,116 +563,116 @@ const Jr = (t, E, b, T) => {
         startColIndex: -1,
         endColIndex: -1
       };
-      j(f, {});
+      Z(f, {});
       return;
     }
-    const n = rt(
+    const r = lt(
       t.gridProps.data,
       e,
       t.columnsRef,
       t.gridProps.dataItemKey
     ), i = {};
-    Object.keys(n).forEach((f) => {
-      n[f] && (i[f] = P.cell ? [...Array(t.columnsRef.length).keys()] : !0);
+    Object.keys(r).forEach((f) => {
+      r[f] && (i[f] = R.cell ? [...Array(t.columnsRef.length).keys()] : !0);
     });
-    let a = -1, d = -1, u = r[0] || null, g = r[r.length - 1] || null;
+    let a = -1, c = -1, l = n[0] || null, s = n[n.length - 1] || null;
     if (t.gridProps.dataItemKey) {
-      const f = re(t.gridProps.dataItemKey);
-      for (let I = 0; I < r.length; I++) {
-        const l = f(r[I]);
-        l !== void 0 && n[l] && (a === -1 && (a = I, u = r[I]), d = I, g = r[I]);
+      const f = ee(t.gridProps.dataItemKey);
+      for (let I = 0; I < n.length; I++) {
+        const P = f(n[I]);
+        P !== void 0 && r[P] && (a === -1 && (a = I, l = n[I]), c = I, s = n[I]);
       }
     }
-    const m = {
+    const u = {
       ...o,
       startRowIndex: a,
-      endRowIndex: d,
+      endRowIndex: c,
       startColIndex: 0,
       endColIndex: t.columnsRef.length - 1,
-      startDataItem: u,
-      endDataItem: g
+      startDataItem: l,
+      endDataItem: s
     };
-    j(m, i);
-  }, xt = (e) => {
-    t.gridProps.onSelectionChange && P.enabled && j(e, {});
-  }, U = (e, r, o, n, i) => {
-    Dt();
+    Z(u, i);
+  }, Lt = (e) => {
+    t.gridProps.onSelectionChange && R.enabled && Z(e, {});
+  }, J = (e, n, o, r, i) => {
+    zt();
     const a = t.gridProps.onDataStateChange;
     if (e) {
-      const d = { ...C(n), ...r, targetEvent: i };
-      s(e, d);
-    } else a && s(a, {
-      ...C(n),
+      const c = { ...C(r), ...n, targetEvent: i };
+      g(e, c);
+    } else a && g(a, {
+      ...C(r),
       targetEvent: i || {},
       dataState: {
-        ...Bt(),
+        ...Xt(),
         ...o
       }
     });
-  }, ie = (e, r, o) => {
-    var n;
-    D && t.gridProps.pageable && ((n = v.current) == null || n.reset()), U(
+  }, le = (e, n, o) => {
+    var r;
+    D && t.gridProps.pageable && ((r = v.current) == null || r.reset()), J(
       t.gridProps.onPageChange,
       { page: e },
       { skip: e.skip, take: e.take },
-      r,
+      n,
       o
     );
-  }, kt = (e, r, o) => {
-    var n;
-    t.gridProps.pageable || (n = t.gridProps.group) != null && n.length ? t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = e.skip, q()) : ie(e, r, o);
-  }, be = () => {
+  }, Bt = (e, n, o) => {
+    var r;
+    t.gridProps.pageable || (r = t.gridProps.group) != null && r.length ? t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = e.skip, X()) : le(e, n, o);
+  }, Se = () => {
     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;
-  }, Dt = () => {
+  }, zt = () => {
     D && t.gridProps.virtualSkipRef && (t.gridProps.virtualSkipRef.current = 0);
-  }, Kt = (e) => {
+  }, Wt = (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 = be();
-    o < n && ie({ skip: o, take: r }, e);
-  }, Ht = (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 && ie({ skip: o, take: r }, e);
-  }, Gt = (e) => {
-    ie({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
-  }, Oe = (e, r) => {
-    U(
+    const n = (a = (i = t.gridProps.take) != null ? i : t.gridProps.pageSize) != null ? a : 0, o = (t.gridProps.skip || 0) + n, r = Se();
+    o < r && le({ skip: o, take: n }, e);
+  }, Ot = (e) => {
+    var r, i;
+    const n = (i = (r = t.gridProps.take) != null ? r : t.gridProps.pageSize) != null ? i : 0, o = (t.gridProps.skip || 0) - n;
+    o >= 0 && le({ skip: o, take: n }, e);
+  }, Nt = (e) => {
+    le({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
+  }, qe = (e, n) => {
+    J(
       t.gridProps.onSortChange,
       { sort: e },
       { sort: e, ...D && !t.gridProps.pageable ? { skip: 0 } : {} },
-      r
+      n
     );
-  }, Mt = (e, r) => {
-    U(
+  }, pt = (e, n) => {
+    J(
       t.gridProps.onFilterChange,
       { filter: e },
       { filter: e, skip: 0 },
-      r
+      n
     );
-  }, Tt = (e) => {
+  }, Ut = (e) => {
     if (!e || e.length === 0) {
-      We({});
+      $e({});
       return;
     }
-    const r = rt(
+    const n = lt(
       t.gridProps.data,
       e,
       t.columnsRef,
       t.gridProps.dataItemKey
     );
-    We({ ...r });
-  }, We = (e) => {
-    U(
+    $e({ ...n });
+  }, $e = (e) => {
+    J(
       t.gridProps.onHighlightChange,
       { highlight: e },
       {},
       {}
     );
-  }, At = (e) => {
-    const r = t.gridProps.searchFields || t.columnsRef.map((i) => i.field) || [], o = e.nativeEvent.target.value, n = {
+  }, Vt = (e) => {
+    const n = t.gridProps.searchFields || t.columnsRef.map((i) => i.field) || [], o = e.nativeEvent.target.value, r = {
       logic: "or",
-      filters: r.filter((i) => i !== void 0).map((i) => {
+      filters: n.filter((i) => i !== void 0).map((i) => {
         var a;
         return typeof i == "string" ? { field: i, value: o, operator: "contains" } : {
           value: o,
@@ -606,165 +682,165 @@ const Jr = (t, E, b, T) => {
         };
       })
     };
-    U(
+    J(
       t.gridProps.onSearchChange,
       {
-        search: n
+        search: r
       },
       { skip: 0 },
       e.syntheticEvent
     );
-  }, ve = () => {
+  }, ke = () => {
     var e;
-    (e = V.current) == null || e.save();
-  }, Ne = async () => {
+    (e = _.current) == null || e.save();
+  }, _e = async () => {
     var e;
-    await ((e = k.current) == null ? void 0 : e.save());
-  }, Be = () => {
+    await ((e = S.current) == null ? void 0 : e.save());
+  }, Ze = () => {
     var e;
-    return ((e = k.current) == null ? void 0 : e.getBlob()) || null;
-  }, Ft = async (e) => {
-    var r, o;
-    (r = t.gridProps) != null && r.onPdfExport && await ((o = t.gridProps) == null ? void 0 : o.onPdfExport(e));
-  }, Lt = (e) => {
-    var r, o;
-    return (r = t.gridProps) != null && r.onCsvExport ? (o = t.gridProps) == null ? void 0 : o.onCsvExport(e) : e;
-  }, Ce = (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 && (Ee.current = !0), U(
+    return ((e = S.current) == null ? void 0 : e.getBlob()) || null;
+  }, jt = async (e) => {
+    var n, o;
+    (n = t.gridProps) != null && n.onPdfExport && await ((o = t.gridProps) == null ? void 0 : o.onPdfExport(e));
+  }, qt = (e) => {
+    var n, o;
+    return (n = t.gridProps) != null && n.onCsvExport ? (o = t.gridProps) == null ? void 0 : o.onCsvExport(e) : e;
+  }, De = (e, n) => {
+    const o = n.nativeEvent ? n : { nativeEvent: n.nativeEvent || n.originalEvent };
+    let r = {};
+    t.isVirtualScroll && e.length && !t.gridProps.pageable && (r = { take: void 0 }), e.length === 0 && t.gridProps.navigatable && (He.current = !0), J(
       t.gridProps.onGroupChange,
       { group: e },
-      { group: e, skip: 0, ...n },
+      { group: e, skip: 0, ...r },
       o
     );
-  }, Ie = (e) => {
+  }, Ke = (e) => {
     if (t.gridProps.onColumnsStateChange) {
-      const r = {
+      const n = {
         target: x.current,
         columnsState: e
       };
-      s(t.gridProps.onColumnsStateChange, r);
+      g(t.gridProps.onColumnsStateChange, n);
     }
-  }, ae = (e, r, o) => {
-    const { columnsRef: n, columnsState: i } = t, a = n[e], d = Or(i), u = a.depth, g = (l) => {
+  }, ue = (e, n, o) => {
+    const { columnsRef: r, columnsState: i } = t, a = r[e], c = Xn(i), l = a.depth, s = (P) => {
       do
-        l++;
-      while (l < n.length && n[l].depth > u);
-      return l;
-    }, m = n.splice(e, g(e) - e);
-    n.splice(e < r ? g(r - m.length) : r, 0, ...m), n.filter((l) => l.declarationIndex >= 0).forEach((l, w) => {
-      l.orderIndex = w;
-      const R = d.find((L) => L.id === l.id);
-      R && (R.orderIndex = w);
+        P++;
+      while (P < r.length && r[P].depth > l);
+      return P;
+    }, u = r.splice(e, s(e) - e);
+    r.splice(e < n ? s(n - u.length) : n, 0, ...u), r.filter((P) => P.declarationIndex >= 0).forEach((P, W) => {
+      P.orderIndex = W;
+      const O = c.find((N) => N.id === P.id);
+      O && (O.orderIndex = W);
     });
-    const f = n[e].locked && n[r].locked;
-    vr(t.columnsMapRef, n, f || fe.current), Cr(t.columnsMapRef, n, f || fe.current), we.current && (fe.current = !1, we.current = !1);
-    const I = oe();
-    if (q(), t.gridProps.onColumnReorder) {
-      const l = {
+    const f = r[e].locked && r[n].locked;
+    Hn(t.columnsMapRef, r, f || be.current), Mn(t.columnsMapRef, r, f || be.current), Te.current && (be.current = !1, Te.current = !1);
+    const I = ce();
+    if (X(), t.gridProps.onColumnReorder) {
+      const P = {
         target: x.current,
         columns: I,
         columnId: a.id,
         nativeEvent: o
       };
-      s(t.gridProps.onColumnReorder, l);
+      g(t.gridProps.onColumnReorder, P);
     }
-    Ie(i);
-  }, p = (e, r, o) => {
-    const n = typeof t.gridProps.rowReorderable == "object" ? t.gridProps.rowReorderable.enabled : t.gridProps.rowReorderable;
-    if (o === "forbidden" || !n || !ee.current)
+    Ke(i);
+  }, oe = (e, n, o) => {
+    const r = typeof t.gridProps.rowReorderable == "object" ? t.gridProps.rowReorderable.enabled : t.gridProps.rowReorderable;
+    if (o === "forbidden" || !r || !ie.current)
       return;
-    const i = t.dataRef[r];
-    t.gridProps.onRowReorder && s(t.gridProps.onRowReorder, {
-      draggedDataItems: [ee.current],
+    const i = t.dataRef[n];
+    t.gridProps.onRowReorder && g(t.gridProps.onRowReorder, {
+      draggedDataItems: [ie.current],
       droppedDataItem: i == null ? void 0 : i.dataItem,
       dropPosition: o,
       nativeEvent: e.originalEvent,
       dragEvent: e,
       target: x.current
-    }), ee.current = null;
-  }, zt = (e, r, o) => {
+    }), ie.current = null;
+  }, $t = (e, n, o) => {
     if (t.gridProps.group === void 0)
       return;
-    const n = t.gridProps.group.slice();
-    n.splice(r, 0, ...n.splice(e, 1)), Ce(n, o);
-  }, Ve = (e, r, o) => {
-    const n = t.columnsRef[e].field;
-    if (!n)
+    const r = t.gridProps.group.slice();
+    r.splice(n, 0, ...r.splice(e, 1)), De(r, o);
+  }, Je = (e, n, o) => {
+    const r = t.columnsRef[e].field;
+    if (!r)
       return;
     const i = (t.gridProps.group || []).slice();
-    i.splice(r, 0, { field: n }), Ce(i, o);
-  }, Ot = (e, r) => {
-    const o = z.current.getCurrentGroupsLength;
-    Ve(e, o, r);
-  }, ye = () => {
-    var o, n, i, a, d, u, g, m, f, I;
+    i.splice(n, 0, { field: r }), De(i, o);
+  }, _t = (e, n) => {
+    const o = p.current.getCurrentGroupsLength;
+    Je(e, o, n);
+  }, Ge = () => {
+    var o, r, i, a, c, l, s, u, f, I, P, W, O, N;
     if (t.gridProps.dataLayoutMode === "stacked") {
-      const l = ((o = H.current) == null ? void 0 : o.offsetWidth) || 0;
-      if ((n = h.current) != null && n.colGroupMain && l) {
-        const w = h.current.colGroupMain.children, R = w.length - 1;
-        if (R >= 0) {
-          let L = 0;
-          for (let X = 0; X < R; X++) {
-            const Me = parseFloat((w[X].width || 0).toString()) || w[X].clientWidth;
-            L += Me;
+      const w = ((o = G.current) == null ? void 0 : o.offsetWidth) || 0;
+      if ((r = m.current) != null && r.colGroupMain && w) {
+        const F = m.current.colGroupMain.children, b = F.length - 1;
+        if (b >= 0) {
+          let Ie = 0;
+          for (let we = 0; we < b; we++) {
+            const In = parseFloat((F[we].width || 0).toString()) || F[we].clientWidth;
+            Ie += In;
           }
-          const J = Math.max(0, l - L);
-          w[R].width = J + "px", (a = (i = h.current.colGroupHeader) == null ? void 0 : i.children) != null && a[R] && (h.current.colGroupHeader.children[R].width = J + "px"), (u = (d = h.current.colGroupFooter) == null ? void 0 : d.children) != null && u[R] && (h.current.colGroupFooter.children[R].width = J + "px"), (m = (g = h.current.colGroupStickyHeader) == null ? void 0 : g.children) != null && m[R] && (h.current.colGroupStickyHeader.children[R].width = J + "px"), (I = (f = h.current.colGroupStickyFooter) == null ? void 0 : f.children) != null && I[R] && (h.current.colGroupStickyFooter.children[R].width = J + "px");
+          const $ = Math.max(0, w - Ie);
+          F[b].width = $ + "px", (a = (i = m.current.colGroupHeader) == null ? void 0 : i.children) != null && a[b] && (m.current.colGroupHeader.children[b].width = $ + "px"), (l = (c = m.current.colGroupFooter) == null ? void 0 : c.children) != null && l[b] && (m.current.colGroupFooter.children[b].width = $ + "px"), (u = (s = m.current.colGroupStickyHeader) == null ? void 0 : s.children) != null && u[b] && (m.current.colGroupStickyHeader.children[b].width = $ + "px"), (I = (f = m.current.colGroupStickyFooter) == null ? void 0 : f.children) != null && I[b] && (m.current.colGroupStickyFooter.children[b].width = $ + "px"), (W = (P = m.current.colGroupPinnedTop) == null ? void 0 : P.children) != null && W[b] && (m.current.colGroupPinnedTop.children[b].width = $ + "px"), (N = (O = m.current.colGroupPinnedBottom) == null ? void 0 : O.children) != null && N[b] && (m.current.colGroupPinnedBottom.children[b].width = $ + "px");
         }
       }
-      B.current && B.current.setWidth(l), N.current && N.current.setWidth(l), G.current && G.current.setWidth(l), M.current && M.current.setWidth(l), W.current && (W.current.style.width = l ? l + "px" : "");
+      q.current && q.current.setWidth(w), j.current && j.current.setWidth(w), T.current && T.current.setWidth(w), H.current && H.current.setWidth(w), M.current && M.current.setWidth(w), A.current && A.current.setWidth(w), V.current && (V.current.style.width = w ? w + "px" : "");
       return;
     }
     let e = 0;
-    if (!h.current.colGroupMain)
+    if (!m.current.colGroupMain)
       return;
-    const r = h.current.colGroupMain.children;
-    for (let l = 0; l < r.length; l++) {
-      const w = r[l].width;
-      if (!w) {
+    const n = m.current.colGroupMain.children;
+    for (let w = 0; w < n.length; w++) {
+      const F = n[w].width;
+      if (!F) {
         e = 0;
         break;
       }
-      e += parseFloat(w.toString());
+      e += parseFloat(F.toString());
     }
-    e = Math.round(e), B.current && B.current.setWidth(e), N.current && N.current.setWidth(e), G.current && G.current.setWidth(e), M.current && M.current.setWidth(e), W.current && (W.current.style.width = e ? e + "px" : "");
-  }, je = () => {
+    e = Math.round(e), q.current && q.current.setWidth(e), j.current && j.current.setWidth(e), T.current && T.current.setWidth(e), H.current && H.current.setWidth(e), M.current && M.current.setWidth(e), A.current && A.current.setWidth(e), V.current && (V.current.style.width = e ? e + "px" : "");
+  }, Xe = () => {
     var e;
-    t.gridProps.widthRef && (t.gridProps.widthRef.current = ((e = H.current) == null ? void 0 : e.offsetWidth) || 0);
-  }, ce = () => {
+    t.gridProps.widthRef && (t.gridProps.widthRef.current = ((e = G.current) == null ? void 0 : e.offsetWidth) || 0);
+  }, ge = () => {
     var e;
-    t.gridProps.containerHeightRef && (t.gridProps.containerHeightRef.current = ((e = F.current) == null ? void 0 : e.offsetHeight) || 0);
-  }, Wt = () => {
+    t.gridProps.containerHeightRef && (t.gridProps.containerHeightRef.current = ((e = z.current) == null ? void 0 : e.offsetHeight) || 0);
+  }, Zt = () => {
     const e = t.gridProps.minRowHeightRef;
     if (e && !e.current && !t.gridProps.rowHeight) {
-      const r = Lr(K.current);
-      r && (e.current = r, q());
+      const n = Zn(K.current);
+      n && (e.current = n, X());
     }
-  }, de = c.useCallback(
-    (e, r, o, n, i) => {
-      var g;
-      if (!Nt() && !o || !e)
+  }, fe = d.useCallback(
+    (e, n, o, r, i) => {
+      var s;
+      if (!Jt() && !o || !e)
         return;
       const a = {
         type: e,
-        nativeEvent: r,
+        nativeEvent: n,
         columns: t.columnsRef,
         dataItemKey: t.gridProps.dataItemKey || "",
-        dataItem: n,
+        dataItem: r,
         field: i,
         ...typeof t.gridProps.clipboard != "boolean" ? t.gridProps.clipboard : {},
         ...o
-      }, d = S(), u = hr({
+      }, c = k(), l = Dn({
         event: a,
-        data: d,
-        selectedState: (g = t.gridProps.select) != null ? g : {},
-        previousCopiedItems: Je.current
+        data: c,
+        selectedState: (s = t.gridProps.select) != null ? s : {},
+        previousCopiedItems: nt.current
       });
-      e !== Te.paste && (Je.current = u.copiedItems), t.gridProps.onClipboard && E && s(t.gridProps.onClipboard, {
+      e !== Oe.paste && (nt.current = l.copiedItems), t.gridProps.onClipboard && E && g(t.gridProps.onClipboard, {
         ...a,
-        ...u
+        ...l
       });
     },
     [
@@ -774,24 +850,24 @@ const Jr = (t, E, b, T) => {
       t.gridProps.clipboard,
       t.gridProps.onClipboard
     ]
-  ), Nt = () => {
-    var i, a, d;
-    if (!te)
+  ), Jt = () => {
+    var i, a, c;
+    if (!ae)
       return !1;
-    const e = sr(A()), r = e ? e.matches(".k-table-td") ? e : (i = A()) == null ? void 0 : i.body : (a = A()) == null ? void 0 : a.body, o = r.closest(".k-grid-container"), n = r && ((d = H.current) == null ? void 0 : d.contains(r));
-    return !!(r && n && o);
-  }, Ue = (e, r, o, n, i, a, d) => {
-    ye(), fe.current = !0, we.current = !0, t.gridProps.onColumnResize && E && s(t.gridProps.onColumnResize, {
-      columns: oe(),
-      nativeEvent: n,
-      targetColumnId: d,
+    const e = yn(B()), n = e ? e.matches(".k-table-td") ? e : (i = B()) == null ? void 0 : i.body : (a = B()) == null ? void 0 : a.body, o = n.closest(".k-grid-container"), r = n && ((c = G.current) == null ? void 0 : c.contains(n));
+    return !!(n && r && o);
+  }, Ye = (e, n, o, r, i, a, c) => {
+    Ge(), be.current = !0, Te.current = !0, t.gridProps.onColumnResize && E && g(t.gridProps.onColumnResize, {
+      columns: ce(),
+      nativeEvent: r,
+      targetColumnId: c,
       index: e,
-      newWidth: r,
+      newWidth: n,
       oldWidth: o,
       end: i,
       target: x.current
-    }), i && Ie(a);
-  }, Bt = () => {
+    }), i && Ke(a);
+  }, Xt = () => {
     var e;
     return {
       filter: t.gridProps.filter,
@@ -804,81 +880,81 @@ const Jr = (t, E, b, T) => {
     nativeEvent: e && e.nativeEvent,
     syntheticEvent: e,
     target: x.current
-  }), Vt = (e) => ({
+  }), Yt = (e) => ({
     ...e,
     nativeEvent: void 0,
     syntheticEvent: void 0,
     target: void 0,
     targetEvent: void 0,
     focusElement: void 0
-  }), s = (e, r) => {
+  }), g = (e, n) => {
     if (t.gridProps.isClient) {
-      e(r);
+      e(n);
       return;
     }
-    e(Vt(r));
-  }, jt = () => {
-    var e, r, o;
+    e(Yt(n));
+  }, Qt = () => {
+    var e, n, o;
     if (K.current && ((e = K.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
-      xe.current = !1, (r = document.activeElement) != null && r.closest(".k-grid-edit-row") ? Se.current = document.activeElement : Se.current = void 0;
-      const n = Array.from((o = K.current) == null ? void 0 : o.getElementsByClassName("k-grid-edit-row"));
-      n.length > He.current.length ? ge.current = n.filter(
-        (i) => !He.current.includes(i)
-      )[0] : n.length === 1 && (ge.current = n[0], xe.current = !0), He.current = n;
+      Ae.current = !1, (n = document.activeElement) != null && n.closest(".k-grid-edit-row") ? Me.current = document.activeElement : Me.current = void 0;
+      const r = Array.from((o = K.current) == null ? void 0 : o.getElementsByClassName("k-grid-edit-row"));
+      r.length > ze.current.length ? Re.current = r.filter(
+        (i) => !ze.current.includes(i)
+      )[0] : r.length === 1 && (Re.current = r[0], Ae.current = !0), ze.current = r;
     }
-  }, S = () => t.dataRef.filter((e) => e.rowType === "data").map((e) => e.dataItem), A = () => {
+  }, k = () => t.dataRef.filter((e) => e.rowType === "data").map((e) => e.dataItem), B = () => {
     var e;
-    if (te)
-      return ((e = le()) == null ? void 0 : e.ownerDocument) || document;
-  }, le = () => H.current, se = c.useCallback(
+    if (ae)
+      return ((e = me()) == null ? void 0 : e.ownerDocument) || document;
+  }, me = () => G.current, Pe = d.useCallback(
     (e) => {
-      var n, i;
-      if (!v.current || !((n = v.current) != null && n.container) || t.gridProps.scrollable === "none")
+      var r, i;
+      if (!v.current || !((r = v.current) != null && r.container) || t.gridProps.scrollable === "none")
         return;
-      _.current && _.current.disconnect();
-      const { rowIndex: r } = e, o = le();
+      Q.current && Q.current.disconnect();
+      const { rowIndex: n } = e, o = me();
       if (D) {
-        const a = ((i = v.current.rowHeightService) == null ? void 0 : i.offset(r)) || 0;
+        const a = ((i = v.current.rowHeightService) == null ? void 0 : i.offset(n)) || 0;
         v.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})`);
-        a && F.current && (F.current.scrollTop = a.offsetTop);
+        const a = n < 1 ? o.querySelector("tbody > tr:nth-child(1)") : o.querySelector(`tbody > tr:nth-child(${n + 1})`);
+        a && z.current && (z.current.scrollTop = a.offsetTop);
       }
     },
     [t.gridProps.scrollable]
-  ), qe = (e) => JSON.stringify(e.map((r) => ({ id: r.id, field: r.field, title: r.title, children: r.children }))), Ut = () => qe(ar) === qe(t.columnsRef), qt = () => {
-    me.current = window.innerWidth, Ut() || q();
-  }, $t = () => {
+  ), Qe = (e) => JSON.stringify(e.map((n) => ({ id: n.id, field: n.field, title: n.title, children: n.children }))), en = () => Qe(vn) === Qe(t.columnsRef), tn = () => {
+    ve.current = window.innerWidth, en() || X();
+  }, nn = () => {
     var a;
-    const { virtualTotal: e, virtualPageSize: r, gridProps: o } = t, n = v.current, i = t.gridProps.rowHeight || ((a = o.minRowHeightRef) == null ? void 0 : a.current) || 0;
-    n && (n.fixedScroll = o.fixedScroll || !1, n.PageChange = kt, n.pageSize = r, n.scrollableVirtual = D, n.container = F.current, n.tableBody = K.current, n.scrollHeightContainer = _e.current, n.table = W.current, (!n.rowHeightService || n.total !== e) && i && (n.total = e, n.rowHeightService = new fr(e, i)));
-  }, $e = c.useCallback(
+    const { virtualTotal: e, virtualPageSize: n, gridProps: o } = t, r = v.current, i = t.gridProps.rowHeight || ((a = o.minRowHeightRef) == null ? void 0 : a.current) || 0;
+    r && (r.fixedScroll = o.fixedScroll || !1, r.PageChange = Bt, r.pageSize = n, r.scrollableVirtual = D, r.container = z.current, r.tableBody = K.current, r.scrollHeightContainer = tt.current, r.table = V.current, (!r.rowHeightService || r.total !== e) && i && (r.total = e, r.rowHeightService = new Sn(e, i)));
+  }, et = d.useCallback(
     (e) => {
-      const r = { rowIndex: Ke.current };
+      const n = { rowIndex: Be.current };
       e.forEach((o) => {
-        o.boundingClientRect.height !== o.intersectionRect.height && se(r);
+        o.boundingClientRect.height !== o.intersectionRect.height && Pe(n);
       });
     },
-    [se]
-  ), q = () => {
+    [Pe]
+  ), X = () => {
     t.gridProps.forceUpdate && t.gridProps.forceUpdate();
-  }, _t = (e) => e.left !== void 0 ? Ge !== "rtl" ? { left: e.left, right: e.right } : { left: e.right, right: e.left } : {}, x = c.useRef(null), v = c.useRef(void 0), h = c.useRef(void 0), z = c.useRef(void 0), O = c.useRef(void 0), $ = c.useRef(void 0), ue = c.useRef(void 0), _ = c.useRef(null), K = c.useRef(null), Jt = c.useRef(null), F = c.useRef(null), W = c.useRef(null), Xt = c.useRef(null), H = c.useRef(null), _e = c.useRef(null), N = c.useRef(null), B = c.useRef(null), G = c.useRef(null), M = c.useRef(null), we = c.useRef(!1), Ee = c.useRef(!1), ge = c.useRef(void 0), Se = c.useRef(void 0), xe = c.useRef(!1), fe = c.useRef(!0), ke = c.useRef(0), De = c.useRef(void 0), Ke = c.useRef(void 0), He = c.useRef([]), Je = c.useRef([]), me = c.useRef(0), he = c.useRef(
+  }, rn = (e) => e.left !== void 0 ? We !== "rtl" ? { left: e.left, right: e.right } : { left: e.right, right: e.left } : {}, x = d.useRef(null), v = d.useRef(void 0), m = d.useRef(void 0), p = d.useRef(void 0), U = d.useRef(void 0), Y = d.useRef(void 0), he = d.useRef(void 0), Q = d.useRef(null), K = d.useRef(null), on = d.useRef(null), z = d.useRef(null), V = d.useRef(null), an = d.useRef(null), G = d.useRef(null), tt = d.useRef(null), j = d.useRef(null), q = d.useRef(null), T = d.useRef(null), H = d.useRef(null), M = d.useRef(null), A = d.useRef(null), dn = d.useRef(null), cn = d.useRef(null), Te = d.useRef(!1), He = d.useRef(!1), Re = d.useRef(void 0), Me = d.useRef(void 0), Ae = d.useRef(!1), be = d.useRef(!0), Fe = d.useRef(0), Le = d.useRef(void 0), Be = d.useRef(void 0), ze = d.useRef([]), nt = d.useRef([]), ve = d.useRef(0), Ce = d.useRef(
     null
-  ), Yt = typeof t.gridProps.groupable == "object" && !!t.gridProps.groupable.stickyHeaders, Qt = typeof t.gridProps.groupable == "object" && !!t.gridProps.groupable.stickyFooters, Zt = !!((Ze = t.gridProps.group) != null && Ze.length), {
-    stickyHeaderItems: pt,
-    stickyHeaderRef: er,
-    stickyFooterItems: tr,
-    stickyFooterRef: rr,
-    scrollToStickyGroup: nr,
-    update: Xe
-  } = Mr({
-    enabled: Yt,
-    enabledFooters: Qt,
+  ), sn = typeof t.gridProps.groupable == "object" && !!t.gridProps.groupable.stickyHeaders, ln = typeof t.gridProps.groupable == "object" && !!t.gridProps.groupable.stickyFooters, un = !!((at = t.gridProps.group) != null && at.length), {
+    stickyHeaderItems: gn,
+    stickyHeaderRef: fn,
+    stickyFooterItems: mn,
+    stickyFooterRef: Pn,
+    scrollToStickyGroup: hn,
+    update: rt
+  } = jn({
+    enabled: sn,
+    enabledFooters: ln,
     flatData: t.dataRef,
-    containerRef: F,
+    containerRef: z,
     tableBodyRef: K,
     rowHeight: t.gridProps.rowHeight,
-    isGrouped: Zt,
+    isGrouped: un,
     virtualSkipRef: t.gridProps.virtualSkipRef,
     rowHeightServiceRef: {
       get current() {
@@ -886,15 +962,15 @@ const Jr = (t, E, b, T) => {
         return (e = v.current) == null ? void 0 : e.rowHeightService;
       }
     }
-  }), ee = c.useRef(null), or = c.useRef(null), ir = c.useRef(null), Ge = ur(H), D = t.isVirtualScroll, ar = c.useMemo(() => c.Children.toArray(t.gridProps.children), [t.gridProps.children]), Ye = t.gridProps.groupable === !0 || typeof t.gridProps.groupable == "object" && t.gridProps.groupable.enabled !== !1, P = Pe(t.gridProps.selectable), Qe = Pr(t.gridProps.editable), cr = me.current && Q && me.current <= Q.medium && t.gridProps.adaptive;
-  return c.useMemo(() => {
-    Y.onConstructor({
+  }), ie = d.useRef(null), Rn = d.useRef(null), bn = d.useRef(null), We = En(G), D = t.isVirtualScroll, vn = d.useMemo(() => d.Children.toArray(t.gridProps.children), [t.gridProps.children]), ot = t.gridProps.groupable === !0 || typeof t.gridProps.groupable == "object" && t.gridProps.groupable.enabled !== !1, R = ye(t.gridProps.selectable), it = Kn(t.gridProps.editable), Cn = ve.current && ne && ve.current <= ne.medium && t.gridProps.adaptive;
+  return d.useMemo(() => {
+    te.onConstructor({
       navigatable: !!t.gridProps.navigatable,
-      contextStateRef: O,
-      navigationStateRef: $,
+      contextStateRef: U,
+      navigationStateRef: Y,
       idPrefix: t.id
-    }), v.current = new Nr();
-  }, []), c.useMemo(() => {
+    }), v.current = new Qn();
+  }, []), d.useMemo(() => {
     var e;
     (e = v.current) == null || e.reset();
   }, [
@@ -902,134 +978,135 @@ const Jr = (t, E, b, T) => {
     t.gridProps.total,
     t.gridProps.filter,
     t.gridProps.group,
-    Ye,
+    ot,
     t.gridProps.sort,
     t.gridProps.rowHeight
-  ]), c.useEffect(() => (t.gridProps.clipboard && (ue.current = new Rr(de), ue.current.addEventListeners(A())), () => {
-    ue.current && ue.current.removeEventListeners(A());
-  }), [t.gridProps.onClipboard, t.gridProps.clipboard, de, A]), c.useEffect(() => (je(), ye(), pe(), Y.onComponentDidMount({
-    scope: H.current || void 0,
-    contextStateRef: O,
-    navigationStateRef: $
+  ]), d.useEffect(() => (t.gridProps.clipboard && (he.current = new Gn(fe), he.current.addEventListeners(B())), () => {
+    he.current && he.current.removeEventListeners(B());
+  }), [t.gridProps.onClipboard, t.gridProps.clipboard, fe, B]), d.useEffect(() => (Xe(), Ge(), dt(), te.onComponentDidMount({
+    scope: G.current || void 0,
+    contextStateRef: U,
+    navigationStateRef: Y
   }), () => {
-    clearTimeout(De.current);
-  }), []), c.useEffect(() => {
+    clearTimeout(Le.current);
+  }), []), d.useEffect(() => {
     var e;
-    je(), ye(), pe(), D && (ce(), Wt(), (e = v.current) == null || e.update()), Xe(), jt(), Y.onComponentDidUpdate({
-      scope: H.current || void 0,
-      contextStateRef: O,
-      navigationStateRef: $,
-      focusFirst: Ee.current,
-      newEditableRow: ge.current,
-      singleEditRow: xe.current,
-      lastActiveElement: Se.current,
+    Xe(), Ge(), dt(), D && (ge(), Zt(), (e = v.current) == null || e.update()), rt(), Qt(), te.onComponentDidUpdate({
+      scope: G.current || void 0,
+      contextStateRef: U,
+      navigationStateRef: Y,
+      focusFirst: He.current,
+      newEditableRow: Re.current,
+      singleEditRow: Ae.current,
+      lastActiveElement: Me.current,
       navigatable: t.gridProps.navigatable
-    }), ct(), Ee.current = !1, ge.current = void 0, he.current = void 0;
-  }), c.useEffect(() => {
-    if (te) {
+    }), ht(), He.current = !1, Re.current = void 0, Ce.current = void 0;
+  }), d.useEffect(() => {
+    if (ae) {
       const e = {
         rootMargin: "0px",
         threshold: 0.9
       };
-      _.current = window.IntersectionObserver && new window.IntersectionObserver($e, e) || null;
+      Q.current = window.IntersectionObserver && new window.IntersectionObserver(et, e) || null;
     }
-  }, [$e]), c.useEffect(() => {
-    var r;
+  }, [et]), d.useEffect(() => {
+    var n;
     let e;
-    return te && window.ResizeObserver && (e = new window.ResizeObserver(() => {
-      qt(), D && ce();
-    }), e.observe((r = A()) == null ? void 0 : r.body)), () => {
+    return ae && window.ResizeObserver && (e = new window.ResizeObserver(() => {
+      tn(), D && ge();
+    }), e.observe((n = B()) == null ? void 0 : n.body)), () => {
       e == null || e.disconnect();
     };
-  }, []), c.useEffect(() => {
-    if (!te || !window.ResizeObserver || !D || !F.current)
+  }, []), d.useEffect(() => {
+    if (!ae || !window.ResizeObserver || !D || !z.current)
       return;
     const e = () => {
       var i, a;
       const o = ((i = t.gridProps.containerHeightRef) == null ? void 0 : i.current) || 0;
-      ce();
-      const n = ((a = t.gridProps.containerHeightRef) == null ? void 0 : a.current) || 0;
-      (o === 0 && n > 0 || Math.abs(n - o) > 10) && q();
-    }, r = new window.ResizeObserver(e);
-    return r.observe(F.current), () => {
-      r.disconnect();
+      ge();
+      const r = ((a = t.gridProps.containerHeightRef) == null ? void 0 : a.current) || 0;
+      (o === 0 && r > 0 || Math.abs(r - o) > 10) && X();
+    }, n = new window.ResizeObserver(e);
+    return n.observe(z.current), () => {
+      n.disconnect();
     };
-  }, [D, ce]), c.useImperativeHandle(
+  }, [D, ge]), d.useImperativeHandle(
     x,
     () => ({
       get element() {
-        return le();
+        return me();
       },
       props: t.gridProps,
       get columns() {
-        return oe();
+        return ce();
       },
       scrollIntoView: (e) => {
-        var n;
-        if (!((n = v.current) != null && n.container) || t.gridProps.scrollable === "none")
+        var r;
+        if (!((r = v.current) != null && r.container) || t.gridProps.scrollable === "none")
           return;
-        const { rowIndex: r } = e;
-        Ke.current = r;
-        const o = le();
-        if (_.current && o) {
-          _.current.disconnect();
-          const i = o.querySelector(`[absolute-row-index="${Ke.current}"]`);
-          i ? _.current.observe(i) : se(e);
+        const { rowIndex: n } = e;
+        Be.current = n;
+        const o = me();
+        if (Q.current && o) {
+          Q.current.disconnect();
+          const i = o.querySelector(`[absolute-row-index="${Be.current}"]`);
+          i ? Q.current.observe(i) : Pe(e);
         }
       },
       fitColumns: (e) => {
-        h.current.dblClickHandler(null, e);
+        m.current.dblClickHandler(null, e);
       },
-      exportAsPdf: ve,
-      saveAsCsv: Ne,
-      getCsvBlob: Be,
-      getTotal: be,
-      getLeafDataItems: S
+      exportAsPdf: ke,
+      saveAsCsv: _e,
+      getCsvBlob: Ze,
+      getTotal: Se,
+      getLeafDataItems: k
     })
-  ), c.useImperativeHandle(t.gridRef, () => x.current), c.useMemo(() => {
-    h.current = new Hr(Ue);
-  }, [t.gridProps.onColumnResize, t.columnsRef]), c.useMemo(() => {
-    z.current = new Gr(ae, zt, Ve);
+  ), d.useImperativeHandle(t.gridRef, () => x.current), d.useMemo(() => {
+    m.current = new Un(Ye);
+  }, [t.gridProps.onColumnResize, t.columnsRef]), d.useMemo(() => {
+    p.current = new Vn(ue, $t, Je);
   }, [
     t.gridProps.onColumnReorder,
     t.gridProps.onGroupChange,
     t.gridProps.group,
     t.columnsRef,
     t.gridProps.groupable
-  ]), h.current.resizable = t.gridProps.resizable || !1, h.current.columns = t.columnsRef, h.current.columnsState = gr(t.columnsState), z.current.reorderable = t.gridProps.reorderable || !1, z.current.groupable = Ye, z.current.columns = t.columnsRef, z.current.dir = Ge, $t(), /* @__PURE__ */ c.createElement(
-    $r.Provider,
+  ]), m.current.resizable = t.gridProps.resizable || !1, m.current.columns = t.columnsRef, m.current.columnsState = xn(t.columnsState), p.current.reorderable = t.gridProps.reorderable || !1, p.current.groupable = ot, p.current.columns = t.columnsRef, p.current.dir = We, nn(), /* @__PURE__ */ d.createElement(
+    ar.Provider,
     {
       value: {
         isClient: E,
-        rowReorder: p,
-        activeDragRowDataItemRef: ee,
-        reorderRowDragTargetRef: or,
-        reorderRowDropTargetRef: ir,
-        dir: Ge,
-        getCellPositionStyle: _t,
+        rowReorder: oe,
+        activeDragRowDataItemRef: ie,
+        reorderRowDragTargetRef: Rn,
+        reorderRowDropTargetRef: bn,
+        dir: We,
+        getCellPositionStyle: rn,
         dataItemKey: t.gridProps.dataItemKey,
         columnsState: t.columnsState,
         columnsRef: t.columnsRef,
         hiddenColumnsRef: t.hiddenColumnsRef,
-        onColumnsStateChange: Ie,
+        onColumnsStateChange: Ke,
         groupable: t.gridProps.groupable,
         group: t.gridProps.group,
         reorderable: t.gridProps.reorderable,
         defaultGroup: t.gridProps.defaultGroup,
-        groupChange: Ce,
-        selectionRelease: yt,
-        pagerPageChange: Gt,
-        onContextMenu: ot,
-        rowClick: ut,
-        rowDblClick: gt,
-        cellClick: ht,
-        headerCellClick: ze,
-        itemChange: bt,
-        onDialogEditCancel: mt,
-        onDialogEditSubmit: ft,
-        columnReorder: ae,
-        onResize: Ue,
-        getTotal: be,
+        groupChange: De,
+        selectionRelease: je,
+        pinnedSelectionRelease: Ht,
+        pagerPageChange: Nt,
+        onContextMenu: ft,
+        rowClick: Ct,
+        rowDblClick: It,
+        cellClick: Et,
+        headerCellClick: Ve,
+        itemChange: Dt,
+        onDialogEditCancel: yt,
+        onDialogEditSubmit: wt,
+        columnReorder: ue,
+        onResize: Ye,
+        getTotal: Se,
         sortable: t.gridProps.sortable,
         pageable: t.gridProps.pageable,
         pageSize: t.gridProps.pageSize,
@@ -1037,89 +1114,95 @@ const Jr = (t, E, b, T) => {
         skip: t.gridProps.skip,
         take: t.gridProps.take,
         defaultSort: t.gridProps.defaultSort,
-        sortChange: Oe,
+        sortChange: qe,
         filterable: t.gridProps.filterable,
         filter: t.gridProps.filter,
         defaultFilter: t.gridProps.defaultFilter,
-        filterOperators: t.gridProps.filterOperators || _r,
-        getLeafDataItems: S,
-        filterChange: Mt,
-        applyHighlightDescriptor: Tt,
-        applySelectionDescriptor: St,
+        filterOperators: t.gridProps.filterOperators || dr,
+        getLeafDataItems: k,
+        filterChange: pt,
+        applyHighlightDescriptor: Ut,
+        applySelectionDescriptor: Ft,
         highlight: t.gridProps.highlight,
         select: t.gridProps.select,
-        searchChange: At,
-        exportAsPdf: ve,
-        exportAsCsv: Ne,
-        getCsvBlob: Be,
-        onHeaderSelectionChange: It,
-        columnGroupChange: Ot,
-        onKeyDown: dt,
-        onFocus: lt,
-        scrollHandler: it,
-        selectionChange: vt,
-        mobileMode: cr,
-        adaptiveColumnMenuRef: me.current,
+        searchChange: Vt,
+        exportAsPdf: ke,
+        exportAsCsv: _e,
+        getCsvBlob: Ze,
+        onHeaderSelectionChange: Tt,
+        columnGroupChange: _t,
+        onKeyDown: Rt,
+        onFocus: bt,
+        scrollHandler: mt,
+        selectionChange: Kt,
+        mobileMode: Cn,
+        adaptiveColumnMenuRef: ve.current,
         adpativeTitle: t.gridProps.adaptiveTitle,
         adaptive: t.gridProps.adaptive,
-        dispatchDetailExpand: Pt,
-        dispatchGroupExpand: Rt,
-        columnResizeRef: h,
-        dragLogicRef: z,
-        navigationStateRef: $,
-        tableElementRef: W,
+        dispatchDetailExpand: xt,
+        dispatchGroupExpand: St,
+        columnResizeRef: m,
+        dragLogicRef: p,
+        navigationStateRef: Y,
+        tableElementRef: V,
         tableBodyElementRef: K,
-        headerElementRef: Jt,
-        containerElementRef: F,
-        headTableElementRef: Xt,
-        elementRef: H,
-        virtualScrollHeightContainerRef: _e,
-        footerRef: N,
-        headerRef: B,
+        headerElementRef: on,
+        containerElementRef: z,
+        headTableElementRef: an,
+        elementRef: G,
+        virtualScrollHeightContainerRef: tt,
+        footerRef: j,
+        headerRef: q,
         vsRef: v,
-        stickyHeaderItems: pt,
-        stickyHeaderRef: er,
-        stickyFooterItems: tr,
-        stickyFooterRef: rr,
-        stickyHeaderTableRef: G,
-        stickyFooterTableRef: M
+        stickyHeaderItems: gn,
+        stickyHeaderRef: fn,
+        stickyFooterItems: mn,
+        stickyFooterRef: Pn,
+        stickyHeaderTableRef: T,
+        stickyFooterTableRef: H,
+        pinnedTopTableRef: M,
+        pinnedBottomTableRef: A,
+        pinnedTopRef: dn,
+        pinnedBottomRef: cn,
+        onRowPin: se,
+        getRowPinPosition: kt
       }
     },
-    /* @__PURE__ */ c.createElement(br.Provider, { value: O.current }, t.children),
-    /* @__PURE__ */ c.createElement(
-      Br,
+    /* @__PURE__ */ d.createElement(Tn.Provider, { value: U.current }, t.children),
+    /* @__PURE__ */ d.createElement(
+      er,
       {
-        show: b.show && (ne == null ? void 0 : ne.length),
-        dataItem: b.dataItem,
-        field: b.field,
-        items: ne,
-        offset: b.offset,
-        onClose: Ae,
-        onSelect: nt
+        show: h.show && (de == null ? void 0 : de.length),
+        dataItem: h.dataItem,
+        field: h.field,
+        items: de,
+        offset: h.offset,
+        onClose: Ne,
+        onSelect: gt
       }
     ),
-    t.gridProps.pdf && /* @__PURE__ */ c.createElement(
-      Ur,
+    t.gridProps.pdf && /* @__PURE__ */ d.createElement(
+      or,
       {
         gridProps: t.gridProps,
         innerGrid: t.innerGrid,
         pdf: typeof t.gridProps.pdf == "object" ? t.gridProps.pdf : {},
-        onPdfExport: Ft,
-        ref: (e) => V.current = e
+        onPdfExport: jt,
+        ref: (e) => _.current = e
       }
     ),
-    t.gridProps.csv && /* @__PURE__ */ c.createElement(
-      qr,
+    t.gridProps.csv && /* @__PURE__ */ d.createElement(
+      ir,
       {
         gridProps: t.gridProps,
         csv: typeof t.gridProps.csv == "object" ? t.gridProps.csv : {},
-        onCsvExport: Lt,
+        onCsvExport: qt,
         columnsState: t.columnsState,
-        ref: (e) => k.current = e
+        ref: (e) => S.current = e
       }
     )
   );
 };
 export {
-  un as GridClientWrapper
+  Er as GridClientWrapper
 };