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

package/Grid.mjs

@@ -8,1094 +8,979 @@
 "use client";
 import * as r from "react";
 import o from "prop-types";
-import { RowHeightService as ne, getScrollbarWidth as Ke, dispatchEvent as Be, canUseDOM as M, getActiveElement as Ve, memoizeOne as y, uGrid as he, classNames as m, validatePackage as Ue, shouldShowValidationUI as $e, setScrollbarWidth as de, getter as je, WatermarkOverlay as qe } from "@progress/kendo-react-common";
-import { tableKeyboardNavigation as T, getSelectionOptions as pe, mapColumns as Je, ClipboardService as Xe, TableKeyboardNavigationContext as V, isRtl as Ye, tableKeyboardNavigationTools as D, tableColumnsVirtualization as Qe, Pager as Ze, tableKeyboardNavigationScopeAttributes as ce, TableSelection as ue, tableKeyboardNavigationBodyAttributes as ge, DropClue as fe, DragClue as me, updateLeft as et, updateRight as tt, KEYBOARD_NAV_DATA_ID as st } from "@progress/kendo-react-data-tools";
-import { GridSelectionCell as it } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as ot } from "./cells/GridHierarchyCell.mjs";
-import { GridEditCell as rt } from "./cells/GridEditCell.mjs";
-import { Header as at } from "./header/Header.mjs";
-import { HeaderRow as lt } from "./header/HeaderRow.mjs";
-import { FilterRow as nt } from "./header/FilterRow.mjs";
-import { GroupPanel as ht } from "./header/GroupPanel.mjs";
-import { Footer as dt } from "./footer/Footer.mjs";
-import { provideLocalizationService as pt, registerForLocalization as ct } from "@progress/kendo-react-intl";
-import { pagerMessagesMap as ut, gridAriaLabel as be, messages as gt } from "./messages/index.mjs";
-import { VirtualScroll as ft } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as ve } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as mt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as bt } from "./drag/CommonDragLogic.mjs";
-import { firefox as Ce, firefoxMaxHeight as Re, flatData as vt, readColumns as Ct, sanitizeColumns as Rt, getColumnWidth as U, isSorted as we, autoGenerateColumns as wt, getNestedValue as ye, resolveCells as yt } from "./utils/index.mjs";
-import { GridCell as Et } from "./cells/GridCell.mjs";
-import { GridGroupCell as Ee } from "./cells/GridGroupCell.mjs";
-import { GridRow as St } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as It } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as _t } from "./GridNoRecords.mjs";
-import { operators as Se } from "./filterCommon.mjs";
-import { FooterRow as xt } from "./footer/FooterRow.mjs";
-import { normalize as kt } from "./paging/GridPagerSettings.mjs";
-import { packageMetadata as Ie } from "./package-metadata.mjs";
-import { GridDetailCell as Tt } from "./cells/GridDetailCell.mjs";
-import { GridDetailHierarchyCell as Dt } from "./cells/GridDetailHierarchyCell.mjs";
-import { SAFARI_REGEX as Ht } from "./constants/index.mjs";
-const H = class H extends r.Component {
-  constructor(a) {
-    super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !1, this._singleEditRow = !1, this._shouldUpdateLeftRight = !0, this._scrollbarWidth = void 0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.headTable = null, this.rowsInEdit = [], this.observer = null, this.handleIntersection = (e) => {
-      const t = { rowIndex: this.rowIndex };
-      e.forEach((s) => {
-        s.isIntersecting || this.setCurrentOnTop(t);
-      });
-    }, this.setCurrentOnTop = (e) => {
-      if (!this.vs.container || this.props.scrollable === "none")
+import { useId as Rn, validatePackage as Cn, useUnstyled as vn, uGrid as yn, shouldShowValidationUI as wn, useDir as En, setScrollbarWidth as ct, canUseDOM as Q, getter as In, classNames as b, WatermarkOverlay as Sn, RowHeightService as it, getScrollbarWidth as kn, dispatchEvent as xn, getActiveElement as Hn } from "@progress/kendo-react-common";
+import { tableKeyboardNavigation as K, ClipboardService as Tn, tableKeyboardNavigationTools as L, tableColumnsVirtualization as Dn, Pager as Nn, TableKeyboardNavigationContext as dt, tableKeyboardNavigationScopeAttributes as ut, TableSelection as st, tableKeyboardNavigationBodyAttributes as ft, DropClue as gt, DragClue as mt, getSelectionOptions as ht, updateLeft as Fn, updateRight as Gn, mapColumns as An, KEYBOARD_NAV_DATA_ID as zn } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as Mn } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as On } from "./cells/GridHierarchyCell.mjs";
+import { GridEditCell as Pn } from "./cells/GridEditCell.mjs";
+import { Header as Kn } from "./header/Header.mjs";
+import { HeaderRow as Ln } from "./header/HeaderRow.mjs";
+import { FilterRow as Vn } from "./header/FilterRow.mjs";
+import { GroupPanel as Bn } from "./header/GroupPanel.mjs";
+import { Footer as Wn } from "./footer/Footer.mjs";
+import { useLocalization as _n } from "@progress/kendo-react-intl";
+import { pagerMessagesMap as Un, gridAriaLabel as bt, messages as $n } from "./messages/index.mjs";
+import { VirtualScroll as jn } from "./VirtualScroll.mjs";
+import { VirtualScrollFixed as Rt } from "./VirtualScrollFixed.mjs";
+import { ColumnResize as qn } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as Jn } from "./drag/CommonDragLogic.mjs";
+import { getColumnWidth as Ne, isSorted as Ct, sanitizeColumns as Xn, firefox as vt, firefoxMaxHeight as yt, flatData as Yn, autoGenerateColumns as Qn, getNestedValue as wt, resolveCells as Zn, readColumns as pn } from "./utils/index.mjs";
+import { GridCell as er } from "./cells/GridCell.mjs";
+import { GridGroupCell as Et } from "./cells/GridGroupCell.mjs";
+import { GridRow as tr } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as nr } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as rr } from "./GridNoRecords.mjs";
+import { operators as It } from "./filterCommon.mjs";
+import { FooterRow as ar } from "./footer/FooterRow.mjs";
+import { normalize as lr } from "./paging/GridPagerSettings.mjs";
+import { packageMetadata as St } from "./package-metadata.mjs";
+import { GridDetailCell as or } from "./cells/GridDetailCell.mjs";
+import { GridDetailHierarchyCell as cr } from "./cells/GridDetailHierarchyCell.mjs";
+import { SAFARI_REGEX as ir } from "./constants/index.mjs";
+const kt = r.forwardRef((t, xt) => {
+  var nt, rt, at, lt;
+  const se = Rn();
+  Cn(St);
+  const A = () => {
+    var e;
+    if (Q)
+      return ((e = Z()) == null ? void 0 : e.ownerDocument) || document;
+  }, T = () => (t.id || se) + "-role-element-id", V = () => {
+    const e = s.current.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
+    return Xn(e);
+  }, Z = () => k.current, fe = r.useCallback(
+    (e) => {
+      var l;
+      if (!c.current || !((l = c.current) != null && l.container) || t.scrollable === "none")
         return;
-      this.observer && this.observer.disconnect();
-      const { rowIndex: t } = e;
-      if (this.props.scrollable === "virtual")
-        this.vs.askedSkip = t, this.vs.container.scroll(
+      z.current && z.current.disconnect();
+      const { rowIndex: n } = e, a = Z();
+      if (t.scrollable === "virtual")
+        c.current.askedSkip = n, c.current.container.scroll(
           0,
-          Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight)
+          Math.round(c.current.askedSkip / c.current.total * c.current.container.scrollHeight)
         );
-      else if (this.element) {
-        const s = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
-        s && this.containerRef.current && (this.containerRef.current.scrollTop = s.offsetTop);
-      }
-    }, this.scrollIntoView = (e) => {
-      if (!this.vs.container || this.props.scrollable === "none")
-        return;
-      this.rowIndex = e.rowIndex;
-      const { rowIndex: t } = e, s = this.element;
-      if (this.observer && s) {
-        this.observer.disconnect();
-        const l = s.querySelector(`[absolute-row-index="${t}"]`);
-        l ? this.observer.observe(l) : this.setCurrentOnTop(e);
-      }
-    }, this.fitColumns = (e) => {
-      this.columnResize.dblClickHandler(null, e);
-    }, this.getColumnsEssentialProps = (e) => JSON.stringify(e.map((t) => ({ id: t.id, field: t.field, title: t.title, children: t.children }))), this.checkMatchMediaColumnsDifferece = () => {
-      const e = this.childrenToArray(this.props.children);
-      return this.getColumnsEssentialProps(e) === this.getColumnsEssentialProps(this._columns);
-    }, this.onContextMenu = (e, t, s) => {
-      if (this.props.onContextMenu) {
-        const l = {
-          target: this,
-          syntheticEvent: e,
-          nativeEvent: e.nativeEvent,
-          dataItem: t,
-          field: s
-        };
-        this.props.onContextMenu.call(void 0, l);
+      else if (a) {
+        const i = n < 1 ? a.querySelector("tbody > tr:nth-child(1)") : a.querySelector(`tbody > tr:nth-child(${n + 1})`);
+        i && _.current && (_.current.scrollTop = i.offsetTop);
       }
-    }, this.getVirtualScroll = (e) => {
-      const { rowHeight: t, detailRowHeight: s, detail: l, expandField: d, groupable: p } = e, h = this.isAllData(), g = t !== void 0 && t > 0, v = s !== void 0 && s > 0, z = p === !0 || typeof p == "object" && p.enabled !== !1;
-      return !g || z && !h || !!(l && d) && (!v || !h) ? ft : ve;
-    }, this.isAllData = () => {
-      const { data: e, total: t } = this.props;
-      return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
-    }, this.initializeVirtualization = (e, t) => {
-      if (this.reInitVirtualization(
-        this.props.scrollable === "virtual",
-        this.props.total,
-        this.props.filter,
-        this.props.group,
-        this.props.sort,
-        t || this.props.rowHeight === void 0 || this.props.rowHeight === 0
-      ), this.vs.fixedScroll = this.props.fixedScroll || !1, this.vs.PageChange = this.pageChange, this.vs.realSkip = this.props.skip || 0, this.vs.pageSize = (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 0, this.vs.scrollableVirtual = this.props.scrollable === "virtual", this.vs.total = e, this.vs.propsSkip = (this.props.skip || 0) + (this.props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.props.skip || 0)) : 0), this.props.rowHeight !== void 0 && this.props.rowHeight > 0 && !t) {
-        const s = this.props.rowHeight * e;
-        this.vs.containerHeight = Ce ? Math.min(Re, s) : s;
-      } else
-        this.vs.containerHeight = 1533915;
-      if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ve) {
-        const { rowHeight: s = 0, detail: l, expandField: d } = this.props;
-        let { detailRowHeight: p = 0 } = this.props;
-        p = l && d ? p : s, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(
-          this.vs,
-          this._data.length,
-          s,
-          p,
-          this._data
-        )) : this.vs.rowHeightService = new ne(e, s, p);
-        const h = this.vs.rowHeightService.totalHeight();
-        this.vs.containerHeight = Ce ? Math.min(Re, h) : h;
-      }
-    }, this.getCachedScrollbarWidth = () => (this._scrollbarWidth || (this._scrollbarWidth = Ke() || void 0), this._scrollbarWidth), this.scrollHandler = (e) => {
-      if (e.target !== e.currentTarget)
-        return;
-      clearTimeout(this.forceUpdateTimeout), this.vs.table = this.tableElement;
-      const t = e.currentTarget.scrollLeft, s = e.currentTarget.scrollTop;
-      this.props.columnVirtualization && (!this.vs.scrollableVirtual || s === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
-        this.forceUpdate();
-      }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && s !== this.wrapperScrollTop && this.vs.scrollHandler(e), Be(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = s;
-    }, this.onKeyDown = (e) => {
-      if (T.onKeyDown(e, {
-        navigatable: this.props.navigatable || !1,
-        contextStateRef: this.contextStateRef,
-        navigationStateRef: this.navigationStateRef,
-        onNavigationAction: this.onNavigationAction,
-        columns: this.columns
-      }), this.props.onKeyDown) {
-        const { mode: t, cell: s } = pe(this.props.selectable), l = {
-          dataItems: this.getLeafDataItems(),
-          mode: t,
-          cell: s,
-          componentId: this._gridId,
-          selectedField: this.props.selectedField,
-          ...this.getArguments(e)
-        };
-        this.props.onKeyDown.call(void 0, l);
-      }
-    }, this.onFocus = (e) => {
-      T.onFocus(e, {
-        navigatable: !!this.props.navigatable,
-        contextStateRef: this.contextStateRef
-      });
-    }, this.onNavigationAction = (e) => {
-      if (e.action === "moveToNextPage" && this.moveToNextPage(e.event), e.action === "moveToPrevPage" && this.moveToPrevPage(e.event), e.focusElement && e.action === "reorderToRight") {
-        const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-        t < this._columns.length - 1 && this.columnReorder(t, t + 1, e.event);
-      }
-      if (e.focusElement && e.action === "reorderToLeft") {
-        const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-        t > 0 && this.columnReorder(t, t - 1, e.event);
-      }
-      if (this.props.onNavigationAction) {
-        const t = {
-          focusElement: e.focusElement,
-          ...this.getArguments(e.event)
-        };
-        this.props.onNavigationAction.call(void 0, t);
-      }
-    }, this.rowClick = (e, t) => {
-      this.props.onRowClick && e.target.nodeName === "TD" && this.props.onRowClick.call(void 0, {
-        dataItem: t.dataItem,
-        ...this.getArguments(e)
-      });
-    }, this.rowDblClick = (e, t) => {
-      this.props.onRowDoubleClick && e.target.nodeName === "TD" && this.props.onRowDoubleClick.call(void 0, {
-        dataItem: t.dataItem,
-        ...this.getArguments(e)
+    },
+    [t.scrollable]
+  ), Fe = r.useCallback(
+    (e) => {
+      const n = { rowIndex: Se.current };
+      e.forEach((a) => {
+        a.isIntersecting || fe(n);
       });
-    }, this.itemChange = (e) => {
-      const t = this.props.onItemChange;
-      if (e.field === this.props.expandField || this.props.group && e.field === void 0) {
-        const s = this.props.onExpandChange;
-        s && s.call(void 0, {
-          ...this.getArguments(e.syntheticEvent),
-          dataItem: e.dataItem,
-          dataIndex: e.dataIndex,
-          value: e.value
-        });
-        return;
+    },
+    [fe]
+  ), [, ge] = r.useReducer((e) => !e, !0), Ge = (e) => JSON.stringify(e.map((n) => ({ id: n.id, field: n.field, title: n.title, children: n.children }))), B = r.useMemo(() => r.Children.toArray(t.children), [t.children]), Ht = () => Ge(B) === Ge(s.current), Tt = () => {
+    Ht() || ge();
+  }, me = (e, n, a) => {
+    if (t.onContextMenu) {
+      const l = {
+        target: w.current,
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        dataItem: n,
+        field: a
+      };
+      t.onContextMenu.call(void 0, l);
+    }
+  }, Ae = () => {
+    const { data: e, total: n } = t;
+    return Array.isArray(e) ? e.length === n : e ? n === e.total : !1;
+  }, Dt = () => {
+    const { rowHeight: e, detailRowHeight: n, detail: a, expandField: l, groupable: i } = t, u = Ae(), d = e !== void 0 && e > 0, h = n !== void 0 && n > 0, E = i === !0 || typeof i == "object" && i.enabled !== !1;
+    return !d || E && !u || !!(a && l) && (!h || !u) ? jn : Rt;
+  }, Nt = (e, n) => {
+    if (c.current) {
+      if (c.current.fixedScroll = t.fixedScroll || !1, c.current.PageChange = ee, c.current.realSkip = t.skip || 0, c.current.pageSize = (t.take !== void 0 ? t.take : t.pageSize) || 0, c.current.scrollableVirtual = t.scrollable === "virtual", c.current.total = e, c.current.propsSkip = (t.skip || 0) + (t.scrollable === "virtual" ? c.current.topCacheCount + (c.current.attendedSkip - (t.skip || 0)) : 0), t.rowHeight !== void 0 && t.rowHeight > 0 && !n) {
+        const a = t.rowHeight * e;
+        c.current.containerHeight = vt ? Math.min(yt, a) : a;
+      } else
+        c.current.containerHeight = 1533915;
+      if (c.current.containerRef = _, c.current.tableBodyRef = U, c.current.table = y.current, le.current = void 0, c.current instanceof Rt) {
+        const { rowHeight: a = 0, detail: l, expandField: i } = t;
+        let { detailRowHeight: u = 0 } = t;
+        u = l && i ? u : a, Ae() ? (c.current.total = R.current.length, le.current = R.current.slice(
+          c.current.realSkip,
+          c.current.realSkip + c.current.pageSize
+        ), c.current.rowHeightService = new it(
+          R.current.length,
+          a,
+          u,
+          R.current
+        )) : c.current.rowHeightService = new it(e, a, u);
+        const d = c.current.rowHeightService.totalHeight();
+        c.current.containerHeight = vt ? Math.min(yt, d) : d;
       }
-      t && t.call(void 0, {
-        ...this.getArguments(e.syntheticEvent),
+    }
+  }, p = () => (we.current || (we.current = kn() || void 0), we.current), Ft = (e) => {
+    var l;
+    if (e.target !== e.currentTarget)
+      return;
+    clearTimeout(Ie.current), c.current && (c.current.table = y.current);
+    const n = e.currentTarget.scrollLeft, a = e.currentTarget.scrollTop;
+    t.columnVirtualization && (!((l = c.current) != null && l.scrollableVirtual) || a === Ee.current) && (Ie.current = window.setTimeout(() => {
+      ge();
+    }, 0)), O.current && O.current.setScrollLeft(n), W.current && W.current.setScrollLeft(n), c.current && a !== Ee.current && c.current.scrollHandler(e), xn(t.onScroll, e, w.current, void 0), Ee.current = a;
+  }, ze = (e) => {
+    if (K.onKeyDown(e, {
+      navigatable: t.navigatable || !1,
+      contextStateRef: S,
+      navigationStateRef: D,
+      onNavigationAction: Gt,
+      columns: V()
+    }), K.onGetSnapshotBeforeUpdate({
+      document: A(),
+      contextStateRef: S,
+      navigationStateRef: D
+    }), t.onKeyDown) {
+      const { mode: n, cell: a } = ht(t.selectable), l = {
+        dataItems: re(),
+        mode: n,
+        cell: a,
+        componentId: T(),
+        selectedField: t.selectedField,
+        ...v(e)
+      };
+      t.onKeyDown.call(void 0, l);
+    }
+  }, Me = (e) => {
+    K.onFocus(e, {
+      navigatable: !!t.navigatable,
+      contextStateRef: S
+    });
+  }, Gt = (e) => {
+    if (e.action === "moveToNextPage" && Lt(e.event), e.action === "moveToPrevPage" && Vt(e.event), e.focusElement && e.action === "reorderToRight") {
+      const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
+      n < s.current.length - 1 && he(n, n + 1, e.event);
+    }
+    if (e.focusElement && e.action === "reorderToLeft") {
+      const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
+      n > 0 && he(n, n - 1, e.event);
+    }
+    if (t.onNavigationAction) {
+      const n = {
+        focusElement: e.focusElement,
+        ...v(e.event)
+      };
+      t.onNavigationAction.call(void 0, n);
+    }
+  }, At = (e, n) => {
+    t.onRowClick && e.target.nodeName === "TD" && t.onRowClick.call(void 0, {
+      dataItem: n.dataItem,
+      ...v(e)
+    });
+  }, zt = (e, n) => {
+    t.onRowDoubleClick && e.target.nodeName === "TD" && t.onRowDoubleClick.call(void 0, {
+      dataItem: n.dataItem,
+      ...v(e)
+    });
+  }, Mt = (e) => {
+    if (e.field === t.expandField || t.group && e.field === void 0) {
+      t.onExpandChange && t.onExpandChange.call(void 0, {
+        ...v(e.syntheticEvent),
         dataItem: e.dataItem,
         dataIndex: e.dataIndex,
-        field: e.field,
         value: e.value
       });
-    }, this.onHeaderSelectionChange = (e) => {
-      this.props.onHeaderSelectionChange && this.props.onHeaderSelectionChange.call(void 0, {
-        field: e.field,
-        nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
-        syntheticEvent: e.syntheticEvent,
-        target: this,
-        dataItems: this.getLeafDataItems(),
-        selectedField: this.props.selectedField
-      });
-    }, this.selectionRelease = (e) => {
-      if (this.props.onSelectionChange) {
-        const t = this.getSlicedLeafDataItems()[e.startRowIndex], s = this.getSlicedLeafDataItems()[e.endRowIndex], l = {
-          syntheticEvent: void 0,
-          target: this,
-          selectedField: this.props.selectedField || "",
-          componentId: this._gridId,
-          dataItems: this.getLeafDataItems(),
-          dataItem: null,
-          startDataItem: t,
-          endDataItem: s,
-          ...e
-        };
-        this.props.onSelectionChange.call(void 0, l);
-      }
-    }, this.pageChange = (e, t, s) => {
-      this.raiseDataEvent(
-        this.props.onPageChange,
-        { page: e },
-        { skip: e.skip, take: e.take },
-        t,
-        s
-      );
-    }, this.getTotal = () => {
-      let e = this.props.total || 0;
-      return Array.isArray(this.props.data) ? e = e || this.props.data.length : this.props.data && (e = e || this.props.data.total), e;
-    }, this.moveToNextPage = (e) => {
-      const t = this.props.take || 0, s = (this.props.skip || 0) + t, l = this.getTotal();
-      s < l && this.pageChange({ skip: s, take: t }, e);
-    }, this.moveToPrevPage = (e) => {
-      const t = this.props.take || 0, s = (this.props.skip || 0) - t;
-      s >= 0 && this.pageChange({ skip: s, take: t }, e);
-    }, this.pagerPageChange = (e) => {
-      this.pageChange({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
-    }, this.sortChange = (e, t) => {
-      this.raiseDataEvent(
-        this.props.onSortChange,
-        { sort: e },
-        { sort: e, ...this.props.scrollable === "virtual" ? { skip: 0 } : {} },
-        t
-      );
-    }, this.filterChange = (e, t) => {
-      this.raiseDataEvent(
-        this.props.onFilterChange,
-        { filter: e },
-        { filter: e || void 0, skip: 0 },
-        t
-      );
-    }, this.groupChange = (e, t) => {
-      const s = t.nativeEvent ? t : { nativeEvent: t.nativeEvent || t.originalEvent };
-      e.length === 0 && this.props.navigatable && (this._focusFirst = !0), this._columnsMutations++, this.raiseDataEvent(
-        this.props.onGroupChange,
-        { group: e },
-        { group: e, skip: 0 },
-        s
-      );
-    }, this.onClipboard = (e, t) => {
-      if (this.props.onClipboard) {
-        if (!this.inActiveElement() || !e)
-          return;
-        this.props.onClipboard.call(void 0, {
-          type: e,
-          nativeEvent: t,
-          columns: this._columns,
-          dataItemKey: this.props.dataItemKey || "",
-          ...typeof this.props.clipboard != "boolean" ? this.props.clipboard : {}
-        });
-      }
-    }, this.inActiveElement = () => {
-      var d, p, h;
-      if (!M)
-        return !1;
-      const e = Ve(this.document), t = e ? e.matches(".k-table-td") ? e : (d = this.document) == null ? void 0 : d.body : (p = this.document) == null ? void 0 : p.body, s = t.closest(".k-grid-container"), l = t && ((h = this._element) == null ? void 0 : h.contains(t));
-      return !!(t && l && s);
-    }, this.onResize = (e, t, s, l, d, p) => {
-      this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(void 0, {
-        columns: this.columns,
-        nativeEvent: l,
-        targetColumnId: p,
-        index: e,
-        newWidth: t,
-        oldWidth: s,
-        end: d,
-        target: this
-      });
-    }, this.reInitVirtualization = y(
-      (e, t, s, l, d, p) => {
-        this.vs.reset();
-        const h = this.getVirtualScroll(this.props);
-        this.vs = new h(p);
-      }
-    ), this.flatData = y((e, t, s, l, d, p, h) => {
-      const g = [], v = vt(
-        g,
-        e,
-        t,
-        { index: s },
-        l !== void 0,
-        d
-      );
-      return { flattedData: g, resolvedGroupsCount: v };
-    }), this.rowHeightService = y(
-      (e, t, s, l, d) => new ne(t, s, l, d)
-    ), this.childrenToArray = y((e) => r.Children.toArray(e)), this.readColumns = y((e, t, s) => {
-      const l = e.filter(
-        (d) => d && d.type && d.type.displayName === "KendoReactGridColumn"
-      );
-      return Ct(l, this.columns, { prevId: 0, idPrefix: t });
-    }), this.mapColumns = y((e, t) => Je(e, !0)), this.filterColumnsByMediaProp = (e) => e.filter((t) => M && t && t.media ? window.matchMedia(t.media).matches : t), this.configureColumns = y((e, t, s) => {
-      this.props.selectedField && e.filter((g) => g.field === this.props.selectedField).forEach((g) => {
-        g.width = g.width || "50px", g.cell = g.cell || it, g.headerCell = g.headerCell || It;
-      });
-      const { unstyled: l } = this.props, d = l && l.uGrid ? l.uGrid : he, p = {
-        id: "",
-        resizable: !0,
-        width: "32px",
-        title: " ",
-        declarationIndex: -1,
-        orderIndex: -1,
-        children: [],
-        parentIndex: -1,
-        depth: 0,
-        colSpan: 0,
-        rowSpan: 0,
-        left: 0,
-        right: 0,
-        index: 0,
-        rightBorder: !1,
-        ariaColumnIndex: 0,
-        isAccessible: !0
+      return;
+    }
+    t.onItemChange && t.onItemChange.call(void 0, {
+      ...v(e.syntheticEvent),
+      dataItem: e.dataItem,
+      dataIndex: e.dataIndex,
+      field: e.field,
+      value: e.value
+    });
+  }, Ot = (e) => {
+    if (t.onSelectionChange) {
+      const { event: n, dataItem: a, dataIndex: l, columnIndex: i } = e, { mode: u, cell: d } = ht(t.selectable), h = {
+        ...v(n.syntheticEvent),
+        dataItem: a,
+        startColIndex: i,
+        endColIndex: i,
+        startRowIndex: l,
+        endRowIndex: l,
+        dataItems: re(),
+        altKey: !1,
+        ctrlKey: !1,
+        shiftKey: !1,
+        metaKey: !1,
+        mode: u,
+        cell: d,
+        isDrag: !1,
+        componentId: T(),
+        selectedField: t.selectedField || ""
       };
-      let h = 0;
-      this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
-        ...p,
-        cell: ot,
-        field: this.props.expandField,
-        headerClassName: m(d.hierarchyCell({}))
-      }), h++);
-      for (let g = 0; g < t; g++)
-        e.unshift({
-          ...p,
-          isAccessible: !1,
-          cell: Ee,
-          field: "value",
-          locked: this.props.lockGroups
-        }), h++;
-      e.slice(h).forEach((g) => g.parentIndex >= 0 && (g.parentIndex += h));
-    }), this.getHeaderRow = y(
-      (e, t, s, l, d, p, h, g, v, z, E, G, O) => /* @__PURE__ */ r.createElement(
-        lt,
-        {
-          cells: this.props.cells,
-          sort: e,
-          sortable: t,
-          sortChange: this.sortChange,
-          group: s || [],
-          groupable: l,
-          groupChange: this.groupChange,
-          filter: d,
-          filterable: p,
-          filterOperators: h,
-          filterChange: this.filterChange,
-          columnMenu: v,
-          columnMenuIcon: z,
-          selectionChange: this.onHeaderSelectionChange,
-          columns: E,
-          columnResize: this.columnResize,
-          pressHandler: this.dragLogic.pressHandler,
-          dragHandler: this.dragLogic.dragHandler,
-          releaseHandler: this.dragLogic.releaseHandler,
-          columnsMap: G,
-          cellRender: g,
-          isRtl: O,
-          dragClue: this.dragLogic.dragClueRef,
-          headerRef: this.headerElementRef,
-          containerRef: this.containerRef,
-          navigatable: !!this.props.navigatable,
-          columnGroupChange: this.columnGroupChange
+      t.onSelectionChange.call(void 0, h);
+    }
+  }, Pt = (e) => {
+    t.onHeaderSelectionChange && t.onHeaderSelectionChange.call(void 0, {
+      field: e.field,
+      nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
+      syntheticEvent: e.syntheticEvent,
+      target: w.current,
+      dataItems: re(),
+      selectedField: t.selectedField
+    });
+  }, Oe = (e) => {
+    if (t.onSelectionChange) {
+      const n = Le()[e.startRowIndex], a = Le()[e.endRowIndex], l = {
+        syntheticEvent: void 0,
+        target: w.current,
+        selectedField: t.selectedField || "",
+        componentId: T(),
+        dataItems: re(),
+        dataItem: null,
+        startDataItem: n,
+        endDataItem: a,
+        ...e
+      };
+      t.onSelectionChange.call(void 0, l);
+    }
+  }, ee = (e, n, a) => {
+    ne(
+      t.onPageChange,
+      { page: e },
+      { skip: e.skip, take: e.take },
+      n,
+      a
+    );
+  }, Kt = () => {
+    let e = t.total || 0;
+    return Array.isArray(t.data) ? e = e || t.data.length : t.data && (e = e || t.data.total), e;
+  }, Lt = (e) => {
+    const n = t.take || 0, a = (t.skip || 0) + n, l = Kt();
+    a < l && ee({ skip: a, take: n }, e);
+  }, Vt = (e) => {
+    const n = t.take || 0, a = (t.skip || 0) - n;
+    a >= 0 && ee({ skip: a, take: n }, e);
+  }, Bt = (e) => {
+    ee({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
+  }, Wt = (e, n) => {
+    ne(
+      t.onSortChange,
+      { sort: e },
+      { sort: e, ...t.scrollable === "virtual" ? { skip: 0 } : {} },
+      n
+    );
+  }, Pe = (e, n) => {
+    ne(
+      t.onFilterChange,
+      { filter: e },
+      { filter: e || void 0, skip: 0 },
+      n
+    );
+  }, te = (e, n) => {
+    const a = n.nativeEvent ? n : { nativeEvent: n.nativeEvent || n.originalEvent };
+    e.length === 0 && t.navigatable && (Ce.current = !0), ne(
+      t.onGroupChange,
+      { group: e },
+      { group: e, skip: 0 },
+      a
+    );
+  }, ne = (e, n, a, l, i) => {
+    const u = t.onDataStateChange;
+    if (e) {
+      const d = { ...v(l), ...n, targetEvent: i };
+      e.call(void 0, d);
+    } else
+      u && u.call(void 0, {
+        ...v(l),
+        targetEvent: i || {},
+        dataState: {
+          ...en(),
+          ...a
         }
-      )
-    ), this.resolveTitle = (e) => {
-      const t = this._columns.find((l) => l.field === e), s = t && (t.title || t.field);
-      return s === void 0 ? e : s;
-    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), this.getSlicedLeafDataItems = () => (this._slicedData || this._data).filter((e) => e.rowType === "data").map((e) => e.dataItem), this.handleFocusInEditableRows = () => {
-      var e, t, s;
-      if (this.tableBodyRef.current && ((e = this.tableBodyRef.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
-        this._singleEditRow = !1, (t = document.activeElement) != null && t.closest(".k-grid-edit-row") ? this._lastActiveElement = document.activeElement : this._lastActiveElement = void 0;
-        const l = Array.from((s = this.tableBodyRef.current) == null ? void 0 : s.getElementsByClassName("k-grid-edit-row"));
-        l.length > this.rowsInEdit.length ? this._newEditableRow = l.filter((d) => !this.rowsInEdit.includes(d))[0] : l.length === 1 && (this._newEditableRow = l[0], this._singleEditRow = !0), this.rowsInEdit = l;
-      }
-    }, Ue(Ie), this.showLicenseWatermark = $e(Ie);
-    const n = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
-    this.vs = new c(n || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new bt(
-      this.columnReorder.bind(this),
-      this.groupReorder.bind(this),
-      this.columnToGroup.bind(this)
-    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new mt(this.onResize), this.props.clipboard && (this.clipboardService = new Xe(this.onClipboard)), T.onConstructor({
-      navigatable: !!a.navigatable,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef,
-      idPrefix: this._gridId
+      });
+  }, he = (e, n, a) => {
+    const l = s.current[e], i = l.depth, u = (f) => {
+      do
+        f++;
+      while (f < s.current.length && s.current[f].depth > i);
+      return f;
+    }, d = s.current.splice(e, u(e) - e);
+    s.current.splice(e < n ? u(n - d.length) : n, 0, ...d), s.current.filter((f) => f.declarationIndex >= 0).forEach((f, P) => f.orderIndex = P);
+    const h = s.current[e].locked && s.current[n].locked;
+    Fn(M.current, s.current, h || ce.current), Gn(M.current, s.current, h || ce.current), Re.current && (ce.current = !1, Re.current = !1);
+    const E = V();
+    if (ge(), t.onColumnReorder) {
+      const f = {
+        target: w.current,
+        columns: E,
+        columnId: l.id,
+        nativeEvent: a
+      };
+      t.onColumnReorder.call(void 0, f);
+    }
+  }, _t = (e, n, a) => {
+    if (t.group === void 0)
+      return;
+    const l = t.group.slice();
+    l.splice(n, 0, ...l.splice(e, 1)), te(l, a);
+  }, Ke = (e, n, a) => {
+    const l = s.current[e].field;
+    if (!l)
+      return;
+    const i = (t.group || []).slice();
+    i.splice(n, 0, { field: l }), te(i, a);
+  }, Ut = (e, n) => {
+    const a = g.current.getCurrentGroupsLength;
+    Ke(e, a, n);
+  }, be = () => {
+    let e = 0;
+    if (!C.current.colGroupMain)
+      return;
+    const n = C.current.colGroupMain.children;
+    for (let a = 0; a < n.length; a++) {
+      const l = n[a].width;
+      if (!l)
+        return;
+      e += parseFloat(l.toString());
+    }
+    e = Math.round(e), O.current && O.current.setWidth(e), W.current && W.current.setWidth(e), y.current && (y.current.style.width = e + "px");
+  }, $t = (e, n) => {
+    if (t.onClipboard) {
+      if (!jt() || !e)
+        return;
+      t.onClipboard.call(void 0, {
+        type: e,
+        nativeEvent: n,
+        columns: s.current,
+        dataItemKey: t.dataItemKey || "",
+        ...typeof t.clipboard != "boolean" ? t.clipboard : {}
+      });
+    }
+  }, jt = () => {
+    var i, u, d;
+    if (!Q)
+      return !1;
+    const e = Hn(A()), n = e ? e.matches(".k-table-td") ? e : (i = A()) == null ? void 0 : i.body : (u = A()) == null ? void 0 : u.body, a = n.closest(".k-grid-container"), l = n && ((d = k.current) == null ? void 0 : d.contains(n));
+    return !!(n && l && a);
+  }, qt = (e, n, a, l, i, u) => {
+    be(), ce.current = !0, Re.current = !0, t.onColumnResize && t.onColumnResize.call(void 0, {
+      columns: V(),
+      nativeEvent: l,
+      targetColumnId: u,
+      index: e,
+      newWidth: n,
+      oldWidth: a,
+      end: i,
+      target: w.current
+    });
+  }, Jt = (e, n, a, l, i) => {
+    const u = [], d = Yn(
+      u,
+      e,
+      n,
+      { index: a },
+      l !== void 0,
+      i
+    );
+    return { flattedData: u, resolvedGroupsCount: d };
+  }, Xt = (e, n) => {
+    const a = e.filter(
+      (l) => l && l.type && l.type.displayName === "KendoReactGridColumn"
+    );
+    return pn(a, V(), { prevId: 0, idPrefix: n });
+  }, Yt = (e) => e.filter((n) => Q && n && n.media ? window.matchMedia(n.media).matches : n), Qt = (e, n) => {
+    const a = L.getIdPrefix(D), l = Xt(e, a), i = Yt(l);
+    s.current = i, s.current.length === 0 && (s.current = Qn(t.data, t.group, t.expandField, {
+      prevId: 0,
+      idPrefix: a
+    })), Zt(s.current, n), M.current = An(s.current, !0), C.current.columns = s.current, g.current.columns = s.current;
+  }, Zt = (e, n) => {
+    t.selectedField && e.filter((i) => i.field === t.selectedField).forEach((i) => {
+      i.width = i.width || "50px", i.cell = i.cell || Mn, i.headerCell = i.headerCell || nr;
     });
-  }
-  /* eslint-disable max-len */
-  /**
-   * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
-   *
-   * @example
-   * ```jsx
-   * class App extends React.Component {
-   *     constructor(props) {
-   *         super(props);
-   *         this.state = {
-   *             data: [
-   *                 { 'foo': 'A1', 'bar': 'B1' },
-   *                 { 'foo': 'A2', 'bar': 'B2' },
-   *                 { 'foo': 'A3', 'bar': 'B2' }
-   *             ]
-   *         };
-   *         this.grid = null;
-   *     }
-   *     render() {
-   *         return (
-   *             <div>
-   *                 <Grid
-   *                     data={this.state.data}
-   *                     reorderable={true}
-   *                     ref={(g) => { this.grid = g; }}
-   *                 >
-   *                     <GridColumn field="foo" />
-   *                     <GridColumn field="bar" />
-   *                 </Grid>
-   *                 <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
-   *                     log current properties into browser console.
-   *                 </button>
-   *             </div>
-   *         );
-   *     }
-   * }
-   * ReactDOM.render(<App />, document.querySelector('my-app'));
-   * ```
-   */
-  // tslint:enable:max-line-length
-  get columns() {
-    const a = this._columns.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
-    return Rt(a);
-  }
-  /**
-   * Returns the HTML element of the Grid component.
-   */
-  get element() {
-    return this._element;
-  }
-  get document() {
-    if (M)
-      return this.element && this.element.ownerDocument || document;
-  }
-  get _header() {
-    return this.headerRef.current;
-  }
-  get _gridId() {
-    return this.props.id + "-role-element-id";
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    var c;
-    this.props.columnVirtualization && !navigator.userAgent.match(Ht) && (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), de(this.getCachedScrollbarWidth());
-    const a = Ye(this.element);
-    this.isRtl = a, T.onComponentDidMount({
-      scope: this.element || void 0,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef
-    }), this.isRtl && this.forceUpdate();
-    const n = {
-      rootMargin: "0px",
-      threshold: 0.9
+    const a = {
+      id: "",
+      resizable: !0,
+      width: "32px",
+      title: " ",
+      declarationIndex: -1,
+      orderIndex: -1,
+      children: [],
+      parentIndex: -1,
+      depth: 0,
+      colSpan: 0,
+      rowSpan: 0,
+      left: 0,
+      right: 0,
+      index: 0,
+      rightBorder: !1,
+      ariaColumnIndex: 0,
+      isAccessible: !0
     };
-    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = M && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, n) || null, this.resizeObserver = M && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), (c = this.document) != null && c.body && this.resizeObserver && this.resizeObserver.observe(this.document.body);
-  }
-  /**
-   * @hidden
-   */
-  getSnapshotBeforeUpdate() {
-    return T.onGetSnapshotBeforeUpdate({
-      document: this.document,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef
-    }), null;
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate() {
-    this.resetTableWidth(), de(this.getCachedScrollbarWidth()), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), this.handleFocusInEditableRows(), T.onComponentDidUpdate({
-      scope: this.element || void 0,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef,
-      focusFirst: this._focusFirst,
-      newEditableRow: this._newEditableRow,
-      singleEditRow: this._singleEditRow,
-      lastActiveElement: this._lastActiveElement,
-      navigatable: this.props.navigatable
-    }), this._focusFirst = !1, this._newEditableRow = void 0;
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
+    let l = 0;
+    t.expandField && t.onExpandChange && t.detail && (e.unshift({
+      ...a,
+      cell: On,
+      field: t.expandField,
+      headerClassName: b(m.hierarchyCell({}))
+    }), l++);
+    for (let i = 0; i < n; i++)
+      e.unshift({
+        ...a,
+        isAccessible: !1,
+        cell: Et,
+        field: "value",
+        locked: t.lockGroups
+      }), l++;
+    e.slice(l).forEach((i) => i.parentIndex >= 0 && (i.parentIndex += l));
+  }, pt = (e) => {
+    const n = s.current.find((l) => l.field === e), a = n && (n.title || n.field);
+    return a === void 0 ? e : a;
+  }, en = () => ({
+    filter: t.filter,
+    sort: t.sort,
+    skip: t.skip,
+    take: t.take !== void 0 ? t.take : t.pageSize,
+    group: t.group
+  }), v = (e) => ({
+    nativeEvent: e && e.nativeEvent,
+    syntheticEvent: e,
+    target: w.current
+  }), re = () => R.current.filter((e) => e.rowType === "data").map((e) => e.dataItem), Le = () => (le.current || R.current).filter((e) => e.rowType === "data").map((e) => e.dataItem), tn = () => {
+    var e, n, a;
+    if (U.current && ((e = U.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
+      ye.current = !1, (n = document.activeElement) != null && n.closest(".k-grid-edit-row") ? ve.current = document.activeElement : ve.current = void 0;
+      const l = Array.from((a = U.current) == null ? void 0 : a.getElementsByClassName("k-grid-edit-row"));
+      l.length > ke.current.length ? oe.current = l.filter(
+        (i) => !ke.current.includes(i)
+      )[0] : l.length === 1 && (oe.current = l[0], ye.current = !0), ke.current = l;
+    }
+  }, g = r.useRef(), S = r.useRef(), D = r.useRef(), ae = r.useRef(), c = r.useRef(), C = r.useRef(), z = r.useRef(null), R = r.useRef([]), le = r.useRef(), s = r.useRef([]), M = r.useRef([[]]), Re = r.useRef(!1), Ce = r.useRef(!1), oe = r.useRef(), ve = r.useRef(), ye = r.useRef(!1), ce = r.useRef(!0), we = r.useRef(), Ee = r.useRef(0), Ie = r.useRef(), Se = r.useRef(), ke = r.useRef([]), W = r.useRef(null), O = r.useRef(null), Ve = r.useRef(null), k = r.useRef(null), y = r.useRef(null), _ = r.useRef(null), U = r.useRef(null), ie = r.useRef(null), nn = _n(), xe = vn(), m = xe && xe.uGrid ? xe.uGrid : yn, rn = wn(St), N = En(k);
+  r.useMemo(() => {
+    K.onConstructor({
+      navigatable: !!t.navigatable,
+      contextStateRef: S,
+      navigationStateRef: D,
+      idPrefix: T()
+    });
+  }, []), r.useMemo(() => {
     var a;
-    clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document), (a = this.document) != null && a.body && this.resizeObserver && this.resizeObserver.disconnect();
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    var ae;
-    let a = this.props.total || 0;
-    const n = D.getIdPrefix(this.navigationStateRef), c = pt(this), { unstyled: e, size: t = "medium" } = this.props, s = e && e.uGrid ? e.uGrid : he;
-    let l = [];
-    Array.isArray(this.props.data) ? (l = this.props.data, a = a || this.props.data.length) : this.props.data && (l = this.props.data.data, a = a || this.props.data.total);
-    const d = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", p = this.props.scrollable === "virtual", { resolvedGroupsCount: h, flattedData: g } = this.flatData(
-      l,
-      d,
-      this.props.skip || 0,
-      this.props.group,
-      this.props.expandField,
-      this.props.filter,
-      this.props.sort
-    );
-    this._data = g;
-    const v = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
-    this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = v;
-    const z = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
-    this.initializeVirtualization(a, v);
-    const E = this.childrenToArray(this.props.children);
-    this.initColumns(E, h);
-    const G = E.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), O = E.filter(
-      (i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"
-    ), j = E.filter(
-      (i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"
-    ), R = this._columns.filter((i) => i.children.length === 0), q = v && /* @__PURE__ */ r.createElement(
-      ht,
-      {
-        group: this.props.group || [],
-        groupChange: this.groupChange,
-        pressHandler: this.dragLogic.pressHandler,
-        dragHandler: this.dragLogic.dragHandler,
-        releaseHandler: this.dragLogic.releaseHandler,
-        refCallback: this.dragLogic.refGroupPanelDiv,
-        resolveTitle: this.resolveTitle,
-        ariaControls: this._gridId,
-        onContextMenu: this.onContextMenu
+    (a = c.current) == null || a.reset();
+    const e = t.groupable === !0 || typeof t.groupable == "object" && t.groupable.enabled !== !1, n = Dt();
+    c.current = new n(e || t.rowHeight === void 0 || t.rowHeight === 0);
+  }, [t.scrollable, t.total, t.filter, t.group, t.groupable, t.sort, t.rowHeight]), r.useEffect(() => (t.clipboard && (ae.current = new Tn($t), ae.current.addEventListeners(A())), () => {
+    ae.current && ae.current.removeEventListeners(A());
+  }), [t.onClipboard, t.clipboard]), r.useMemo(() => {
+    C.current = new qn(qt);
+  }, [t.onColumnResize]), r.useMemo(() => {
+    g.current = new Jn(he, _t, Ke);
+  }, [t.onColumnReorder, t.onGroupChange, t.group, t.groupable]), r.useEffect(() => (t.columnVirtualization && !window.navigator.userAgent.match(ir) && (ie.current && (ie.current.style.display = "block"), y.current && (y.current.style.display = "block")), be(), ct(p()), K.onComponentDidMount({
+    scope: k.current || void 0,
+    contextStateRef: S,
+    navigationStateRef: D
+  }), () => {
+    clearTimeout(Ie.current);
+  }), []), r.useEffect(() => {
+    var e;
+    be(), ct(p()), (e = c.current) != null && e.tableTransform && c.current.table && (c.current.table.style.transform = c.current.tableTransform, c.current.tableTransform = ""), tn(), K.onComponentDidUpdate({
+      scope: k.current || void 0,
+      contextStateRef: S,
+      navigationStateRef: D,
+      focusFirst: Ce.current,
+      newEditableRow: oe.current,
+      singleEditRow: ye.current,
+      lastActiveElement: ve.current,
+      navigatable: t.navigatable
+    }), Ce.current = !1, oe.current = void 0;
+  }), r.useEffect(() => {
+    if (Q) {
+      const e = {
+        rootMargin: "0px",
+        threshold: 0.9
+      };
+      z.current = window.IntersectionObserver && new window.IntersectionObserver(Fe, e) || null;
+    }
+  }, [Fe]), r.useEffect(() => {
+    let e;
+    return Q && window.ResizeObserver && (e = new window.ResizeObserver(Tt), e.observe(k.current)), () => {
+      e == null || e.disconnect();
+    };
+  }, []);
+  const w = r.useRef(null);
+  r.useImperativeHandle(
+    w,
+    () => ({
+      get element() {
+        return Z();
+      },
+      props: t,
+      get columns() {
+        return V();
+      },
+      scrollIntoView: (e) => {
+        var l;
+        if (!((l = c.current) != null && l.container) || t.scrollable === "none")
+          return;
+        const { rowIndex: n } = e;
+        Se.current = n;
+        const a = Z();
+        if (z.current && a) {
+          z.current.disconnect();
+          const i = a.querySelector(`[absolute-row-index="${Se.current}"]`);
+          i ? z.current.observe(i) : fe(e);
+        }
+      },
+      fitColumns: (e) => {
+        C.current.dblClickHandler(null, e);
       }
-    ), {
-      sort: _e,
-      sortable: xe,
-      group: ke,
-      filter: Te,
-      filterable: De,
-      filterOperators: He = Se,
-      headerCellRender: ze,
-      columnMenu: Ae,
-      columnMenuIcon: Fe
-    } = this.props, J = /* @__PURE__ */ r.createElement(
-      at,
-      {
-        size: t,
-        columnResize: this.columnResize,
-        staticHeaders: this.props.scrollable !== "none",
-        scrollableDataElement: () => this.vs.container,
-        hasScrollbarWidth: !!this.getCachedScrollbarWidth(),
-        draggable: this.props.reorderable || v,
-        ref: this.headerRef,
-        elemRef: this.headerElementRef,
-        headerRow: this.getHeaderRow(
-          _e,
-          xe,
-          ke,
-          v,
-          Te,
-          De,
-          He,
-          ze,
-          Ae,
-          Fe,
-          this._columns,
-          this._columnsMap,
-          this.isRtl
-        ),
-        filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
-          nt,
+    })
+  ), r.useImperativeHandle(xt, () => w.current);
+  let F = t.total || 0;
+  const $ = L.getIdPrefix(D), { size: x = "medium" } = t;
+  let He = [];
+  Array.isArray(t.data) ? (He = t.data, F = F || t.data.length) : t.data && (He = t.data.data, F = F || t.data.total);
+  const an = typeof t.groupable == "object" && t.groupable.footer || "none", j = t.scrollable === "virtual", { resolvedGroupsCount: ln, flattedData: on } = Jt(
+    He,
+    an,
+    t.skip || 0,
+    t.group,
+    t.expandField
+  );
+  R.current = on;
+  const q = t.groupable === !0 || typeof t.groupable == "object" && t.groupable.enabled !== !1;
+  C.current.resizable = t.resizable || !1, g.current.reorderable = t.reorderable || !1, g.current.groupable = q;
+  const cn = t.selectable && t.selectable.drag ? "none" : void 0;
+  Nt(F, q), Qt(B, ln);
+  const Be = B.map((e) => e && e.type && e.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(e, { ...e.props, ariaControls: T() }) : null), We = B.filter(
+    (e) => e && e.type && e.type.displayName === "KendoReactGridNoRecords"
+  ), _e = B.filter(
+    (e) => e && e.type && e.type.displayName === "KendoReactGridStatusBar"
+  ), H = s.current.filter((e) => e.children.length === 0), Ue = q && /* @__PURE__ */ r.createElement(
+    Bn,
+    {
+      group: t.group || [],
+      groupChange: te,
+      pressHandler: g.current.pressHandler,
+      dragHandler: g.current.dragHandler,
+      releaseHandler: g.current.releaseHandler,
+      refCallback: g.current.refGroupPanelDiv,
+      resolveTitle: pt,
+      ariaControls: T(),
+      onContextMenu: me
+    }
+  ), $e = /* @__PURE__ */ r.createElement(
+    Kn,
+    {
+      size: x,
+      columnResize: C.current,
+      staticHeaders: t.scrollable !== "none",
+      scrollableDataElement: () => {
+        var e;
+        return ((e = c.current) == null ? void 0 : e.container) || null;
+      },
+      hasScrollbarWidth: !!p(),
+      draggable: t.reorderable || q,
+      ref: O,
+      elemRef: Ve,
+      headerRow: /* @__PURE__ */ r.createElement(
+        Ln,
+        {
+          cells: t.cells,
+          sort: t.sort,
+          sortable: t.sortable,
+          sortChange: Wt,
+          group: t.group || [],
+          groupable: q,
+          groupChange: te,
+          filter: t.filter,
+          filterable: t.filterable,
+          filterOperators: t.filterOperators || It,
+          filterChange: Pe,
+          columnMenu: t.columnMenu,
+          columnMenuIcon: t.columnMenuIcon,
+          selectionChange: Pt,
+          columns: s.current,
+          columnResize: C.current,
+          pressHandler: g.current.pressHandler,
+          dragHandler: g.current.dragHandler,
+          releaseHandler: g.current.releaseHandler,
+          columnsMap: M.current,
+          cellRender: t.headerCellRender,
+          isRtl: N === "rtl",
+          dragClue: g.current.dragClueRef,
+          headerRef: Ve,
+          containerRef: _,
+          navigatable: !!t.navigatable,
+          columnGroupChange: Ut
+        }
+      ),
+      filterRow: t.filterable && /* @__PURE__ */ r.createElement(
+        Vn,
+        {
+          cells: t.cells,
+          size: x,
+          columns: s.current,
+          filter: t.filter,
+          filterOperators: t.filterOperators || It,
+          filterChange: Pe,
+          sort: t.sort,
+          cellRender: t.filterCellRender,
+          isRtl: N === "rtl",
+          navigatable: !!t.navigatable,
+          ariaRowIndex: M.current.length + 1
+        }
+      ) || void 0,
+      cols: H.map((e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: Ne(e) }))
+    }
+  ), dn = c.current && c.current.container && c.current.container.scrollLeft || 0, un = parseFloat(((t.style || {}).width || "").toString()), { colSpans: sn, hiddenColumns: fn } = Dn({
+    enabled: t.columnVirtualization,
+    columns: H,
+    tableViewPortWidth: un,
+    scrollLeft: dn
+  }), gn = (e, n, a, l) => {
+    let i = !1;
+    const u = t.selectedField ? wt(t.selectedField, e.dataItem) : void 0;
+    return {
+      row: H.map((d, h) => {
+        if (fn[h])
+          return null;
+        const E = d.id ? d.id : h, f = b(m.contentSticky({ locked: d.locked }), d.className), P = d.left !== void 0 ? N !== "rtl" ? { left: d.left, right: d.right } : { left: d.right, right: d.left } : {};
+        let X = !1;
+        if (d.editable && t.editField) {
+          const I = wt(t.editField, e.dataItem);
+          I && (I === !0 || I === d.field) && (i = !0, X = !0);
+        }
+        const G = d.cell || X && Pn || er, De = t.expandField && t.detail && d.field === t.expandField;
+        return /* @__PURE__ */ r.createElement(
+          G,
           {
-            cells: this.props.cells,
-            size: t,
-            columns: this._columns,
-            filter: this.props.filter,
-            filterOperators: this.props.filterOperators || Se,
-            filterChange: this.filterChange,
-            sort: this.props.sort,
-            cellRender: this.props.filterCellRender,
-            isRtl: this.isRtl,
-            navigatable: !!this.props.navigatable,
-            ariaRowIndex: this._columnsMap.length + 1
-          }
-        ) || void 0,
-        cols: R.map((i, f) => /* @__PURE__ */ r.createElement("col", { key: f.toString(), width: U(i) }))
-      }
-    ), Ne = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, Le = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: Me, hiddenColumns: Ge } = Qe({
-      enabled: this.props.columnVirtualization,
-      columns: R,
-      tableViewPortWidth: Le,
-      scrollLeft: Ne
-    }), Oe = (i, f, b, F) => {
-      let k = !1;
-      const S = this.props.selectedField ? ye(this.props.selectedField, i.dataItem) : void 0;
-      return {
-        row: R.map((u, C) => {
-          if (Ge[C])
-            return null;
-          const N = u.id ? u.id : C, w = m(
-            s.contentSticky({ locked: u.locked }),
-            u.className
-          ), I = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
-          let K = !1;
-          if (u.editable && this.props.editField) {
-            const x = ye(this.props.editField, i.dataItem);
-            x && (x === !0 || x === u.field) && (k = !0, K = !0);
+            onContextMenu: me,
+            key: E,
+            locked: t.lockGroups,
+            id: L.generateNavigatableId(
+              `${n}-${String(h)}`,
+              $,
+              De || e.rowType === "groupHeader" || e.rowType === "groupFooter" || d.field === "value" ? "nodata" : "cell"
+            ),
+            colSpan: sn[h],
+            dataItem: e.dataItem,
+            field: d.field,
+            editor: d.editor,
+            format: d.format,
+            className: f,
+            render: t.cellRender,
+            cells: Zn(t.cells, d.cells),
+            onChange: Mt,
+            selectionChange: t.onSelectionChange ? (I) => {
+              Ot({
+                event: I,
+                dataItem: e.dataItem,
+                dataIndex: a,
+                columnIndex: h
+              });
+            } : void 0,
+            columnIndex: h,
+            columnsCount: H.length,
+            rowType: e.rowType,
+            level: e.level,
+            expanded: e.expanded,
+            dataIndex: e.dataIndex,
+            style: P,
+            ariaColumnIndex: d.ariaColumnIndex,
+            isSelected: Array.isArray(u) && u.indexOf(h) > -1,
+            isSorted: !!Ct(d.field, t.sort),
+            isAlt: l
           }
-          const L = u.cell || K && rt || Et, _ = this.props.expandField && this.props.detail && u.field === this.props.expandField;
-          return /* @__PURE__ */ r.createElement(
-            L,
-            {
-              onContextMenu: this.onContextMenu,
-              key: N,
-              locked: this.props.lockGroups,
-              id: D.generateNavigatableId(
-                `${f}-${String(C)}`,
-                n,
-                _ || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
-              ),
-              colSpan: Me[C],
-              dataItem: i.dataItem,
-              field: u.field,
-              editor: u.editor,
-              format: u.format,
-              className: w,
-              render: this.props.cellRender,
-              cells: yt(this.props.cells, u.cells),
-              onChange: this.itemChange,
-              selectionChange: this.props.onSelectionChange ? (x) => {
-                this.selectionChange({
-                  event: x,
-                  dataItem: i.dataItem,
-                  dataIndex: b,
-                  columnIndex: C
-                });
-              } : void 0,
-              columnIndex: C,
-              columnsCount: R.length,
-              rowType: i.rowType,
-              level: i.level,
-              expanded: i.expanded,
-              dataIndex: i.dataIndex,
-              style: I,
-              ariaColumnIndex: u.ariaColumnIndex,
-              isSelected: Array.isArray(S) && S.indexOf(C) > -1,
-              isSorted: !!we(u.field, this.props.sort),
-              isAlt: F
-            }
-          );
-        }),
-        isInEdit: k,
-        isSelected: typeof S == "boolean" && S
-      };
+        );
+      }),
+      isInEdit: i,
+      isSelected: typeof u == "boolean" && u
     };
-    let X = 0;
-    if (p)
-      for (let i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); i++) {
-        const f = this._data.shift();
-        if (f)
-          this._data.push(f), X++, f.rowType === "groupHeader" && i--;
-        else
-          break;
-      }
-    const Y = (i) => i >= this._data.length - X;
-    let Q = this.vs.realSkip || 0;
-    const P = [];
-    let B = !1;
-    const Z = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
-    let A = 0;
-    if (this._data.length) {
-      let i = -1, f = 0;
-      (this._slicedData || this._data).forEach((b, F) => {
-        b.rowType === "data" && (Q++, i++);
-        const k = Q % 2 === 0, S = this.props.dataItemKey && je(this.props.dataItemKey)(b.dataItem), u = F + (this.vs.realSkip || 0), C = S || "ai" + u, N = C + "_1", w = Oe(b, C, i, k);
-        if (A = u + Z + f, P.push(
+  };
+  let je = 0;
+  if (j && c.current)
+    for (let e = 0; e < c.current.topCacheCount + c.current.attendedSkip - (t.skip || 0); e++) {
+      const n = R.current.shift();
+      if (n)
+        R.current.push(n), je++, n.rowType === "groupHeader" && e--;
+      else
+        break;
+    }
+  const qe = (e) => e >= R.current.length - je;
+  let Je = ((nt = c.current) == null ? void 0 : nt.realSkip) || 0;
+  const de = [];
+  let Te = !1;
+  const Xe = M.current.length + (t.filterable ? 1 : 0) + 1;
+  let J = 0;
+  if (R.current.length) {
+    let e = -1, n = 0;
+    (le.current || R.current).forEach((a, l) => {
+      var P, X;
+      a.rowType === "data" && (Je++, e++);
+      const i = Je % 2 === 0, u = t.dataItemKey && In(t.dataItemKey)(a.dataItem), d = l + (((P = c.current) == null ? void 0 : P.realSkip) || 0), h = u || "ai" + d, E = h + "_1", f = gn(a, h, e, i);
+      if (J = d + Xe + n, de.push(
+        /* @__PURE__ */ r.createElement(
+          tr,
+          {
+            key: h,
+            dataItem: a.dataItem,
+            isAltRow: i,
+            isInEdit: f.isInEdit,
+            rowType: a.rowType,
+            isHidden: qe(l),
+            onClick: (G) => At(G, a),
+            onDoubleClick: (G) => zt(G, a),
+            selectedField: t.selectedField,
+            rowHeight: t.rowHeight,
+            render: t.rowRender,
+            ariaRowIndex: J,
+            absoluteRowIndex: d,
+            dataIndex: (X = c.current) != null && X.scrollableVirtual && !t.groupable ? d : e,
+            isSelected: f.isSelected
+          },
+          f.row
+        )
+      ), t.detail && a.rowType === "data" && a.expanded) {
+        const G = H.length - (t.expandField ? 1 : 0) - (t.group ? t.group.length : 0) || 1;
+        n++, J = d + Xe + n, de.push(
           /* @__PURE__ */ r.createElement(
-            St,
+            "tr",
             {
-              key: C,
-              dataItem: b.dataItem,
-              isAltRow: k,
-              isInEdit: w.isInEdit,
-              rowType: b.rowType,
-              isHidden: Y(F),
-              onClick: (I) => this.rowClick(I, b),
-              onDoubleClick: (I) => this.rowDblClick(I, b),
-              selectedField: this.props.selectedField,
-              rowHeight: this.props.rowHeight,
-              render: this.props.rowRender,
-              ariaRowIndex: A,
-              absoluteRowIndex: u,
-              dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? u : i,
-              isSelected: w.isSelected
-            },
-            w.row
-          )
-        ), this.props.detail && b.rowType === "data" && b.expanded) {
-          const I = R.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
-          f++, A = u + Z + f, P.push(
-            /* @__PURE__ */ r.createElement(
-              "tr",
-              {
-                key: N,
-                className: m(s.detailTr({ isAlt: k })),
-                style: {
-                  visibility: Y(F) ? "hidden" : "",
-                  height: this.props.detailRowHeight
-                },
-                role: "row",
-                "aria-rowindex": A
+              key: E,
+              className: b(m.detailTr({ isAlt: i })),
+              style: {
+                visibility: qe(l) ? "hidden" : "",
+                height: t.detailRowHeight
               },
-              this.props.group && this.props.group.map((K, L) => {
-                var le;
-                const _ = (le = w == null ? void 0 : w.row[L]) == null ? void 0 : le.props.style, x = _ ? this.isRtl ? { left: _.right, right: _.left } : { left: _.left, right: _.right } : {};
-                return /* @__PURE__ */ r.createElement(
-                  Ee,
-                  {
-                    id: "",
-                    dataIndex: b.dataIndex,
-                    field: K.field,
-                    dataItem: b.dataItem,
-                    key: L,
-                    style: x,
-                    ariaColumnIndex: 1 + L,
-                    isSelected: !1,
-                    locked: this.props.lockGroups,
-                    isRtl: this.isRtl,
-                    cells: this.props.cells
-                  }
-                );
-              }),
-              this.props.expandField && /* @__PURE__ */ r.createElement(
-                Dt,
-                {
-                  id: D.generateNavigatableId(`${N}-dhcell`, n)
-                }
-              ),
-              /* @__PURE__ */ r.createElement(
-                Tt,
+              role: "row",
+              "aria-rowindex": J
+            },
+            t.group && t.group.map((De, I) => {
+              var ot;
+              const Y = (ot = f == null ? void 0 : f.row[I]) == null ? void 0 : ot.props.style, bn = Y ? N !== "rtl" ? { left: Y.left, right: Y.right } : { left: Y.right, right: Y.left } : {};
+              return /* @__PURE__ */ r.createElement(
+                Et,
                 {
-                  onContextMenu: this.onContextMenu,
-                  dataItem: b.dataItem,
-                  dataIndex: b.dataIndex,
-                  colSpan: I,
-                  ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
-                  detail: this.props.detail,
-                  id: D.generateNavigatableId(`${N}-dcell`, n)
+                  id: "",
+                  dataIndex: a.dataIndex,
+                  field: De.field,
+                  dataItem: a.dataItem,
+                  key: I,
+                  style: bn,
+                  ariaColumnIndex: 1 + I,
+                  isSelected: !1,
+                  locked: t.lockGroups,
+                  isRtl: N === "rtl",
+                  cells: t.cells
                 }
-              )
+              );
+            }),
+            t.expandField && /* @__PURE__ */ r.createElement(
+              cr,
+              {
+                id: L.generateNavigatableId(`${E}-dhcell`, $)
+              }
+            ),
+            /* @__PURE__ */ r.createElement(
+              or,
+              {
+                onContextMenu: me,
+                dataItem: a.dataItem,
+                dataIndex: a.dataIndex,
+                colSpan: G,
+                ariaColIndex: 2 + (t.group ? t.group.length : 0),
+                detail: t.detail,
+                id: L.generateNavigatableId(`${E}-dcell`, $)
+              }
             )
-          );
+          )
+        );
+      }
+    });
+  } else
+    Te = !0;
+  const mn = () => {
+    const e = O.current;
+    return e && e.table() && e.table().clientWidth;
+  }, Ye = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: b(m.noRecords({})), style: { width: mn() } }, /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      className: b(m.noRecordsTemplate({})),
+      [zn]: L.generateNavigatableId("no-records", $)
+    },
+    We.length ? We : /* @__PURE__ */ r.createElement(rr, null)
+  )), Qe = {
+    size: x,
+    onPageChange: Bt,
+    total: F,
+    dir: N,
+    skip: ((rt = c.current) == null ? void 0 : rt.propsSkip) || 0,
+    take: (t.take !== void 0 ? t.take : t.pageSize) || 10,
+    messagesMap: Un,
+    ...lr(t.pageable || {})
+  }, Ze = t.pager ? /* @__PURE__ */ r.createElement(t.pager, { ...Qe }) : /* @__PURE__ */ r.createElement(Nn, { className: b(m.pager({})), ...Qe }), hn = (e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: Ne(e) }), pe = (at = t.cells) != null && at.footerCell || s.current.some((e) => {
+    var n;
+    return !!(e.footerCell || (n = e.cells) != null && n.footerCell);
+  }) ? /* @__PURE__ */ r.createElement(
+    Wn,
+    {
+      size: x,
+      columnResize: C.current,
+      staticHeaders: t.scrollable !== "none",
+      hasScrollbarWidth: !!p(),
+      ref: W,
+      row: /* @__PURE__ */ r.createElement(
+        ar,
+        {
+          cells: t.cells,
+          idPrefix: $,
+          columns: s.current,
+          isRtl: N === "rtl",
+          ariaRowIndex: J + 1
         }
-      });
-    } else
-      B = !0;
-    const Pe = () => {
-      const i = this._header;
-      return i && i.table && i.table.clientWidth;
-    }, ee = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: m(s.noRecords({})), style: { width: Pe() } }, /* @__PURE__ */ r.createElement(
+      ),
+      cols: H.map(hn)
+    }
+  ) : null, et = /* @__PURE__ */ r.createElement(
+    "colgroup",
+    {
+      ref: (e) => {
+        C.current.colGroupMain = e;
+      }
+    },
+    H.map((e, n) => /* @__PURE__ */ r.createElement(
+      "col",
+      {
+        key: n.toString(),
+        className: Ct(e.field, t.sort) ? b(m.sorted({})) : void 0,
+        width: Ne(e)
+      }
+    ))
+  ), tt = g.current.reorderable || g.current.groupable;
+  if (t.scrollable === "none")
+    return /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
       "div",
       {
-        className: m(s.noRecordsTemplate({})),
-        [st]: D.generateNavigatableId("no-records", n)
+        id: t.id || se,
+        style: t.style,
+        className: b(m.wrapper({ size: x }), t.className),
+        ref: k,
+        "aria-label": t.ariaLabel,
+        onKeyDown: ze,
+        onFocus: Me,
+        ...ut
       },
-      O.length ? O : /* @__PURE__ */ r.createElement(_t, null)
-    )), te = {
-      size: t,
-      onPageChange: this.pagerPageChange,
-      total: a,
-      dir: this.isRtl ? "rtl" : void 0,
-      skip: this.vs.propsSkip || 0,
-      take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
-      messagesMap: ut,
-      ...kt(this.props.pageable || {})
-    }, se = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...te }) : /* @__PURE__ */ r.createElement(Ze, { className: m(s.pager({})), ...te }), We = (i, f) => /* @__PURE__ */ r.createElement("col", { key: f.toString(), width: U(i) }), ie = (ae = this.props.cells) != null && ae.footerCell || this._columns.some((i) => {
-      var f;
-      return !!(i.footerCell || (f = i.cells) != null && f.footerCell);
-    }) ? /* @__PURE__ */ r.createElement(
-      dt,
-      {
-        size: t,
-        columnResize: this.columnResize,
-        staticHeaders: this.props.scrollable !== "none",
-        hasScrollbarWidth: !!this.getCachedScrollbarWidth(),
-        ref: (i) => this._footer = i,
-        row: /* @__PURE__ */ r.createElement(
-          xt,
-          {
-            cells: this.props.cells,
-            idPrefix: n,
-            columns: this._columns,
-            isRtl: this.isRtl,
-            ariaRowIndex: A + 1
+      Be,
+      Ue,
+      /* @__PURE__ */ r.createElement(
+        st,
+        {
+          selectable: t.selectable,
+          onRelease: Oe,
+          childRef: (e) => {
+            y.current = e, ie.current = e;
           }
-        ),
-        cols: R.map(We)
-      }
-    ) : null, oe = /* @__PURE__ */ r.createElement(
-      "colgroup",
+        },
+        /* @__PURE__ */ r.createElement("table", { ref: ie, className: b(m.table({ size: x })) }, et, $e, /* @__PURE__ */ r.createElement(
+          "tbody",
+          {
+            role: "rowgroup",
+            className: b(m.tbody({})),
+            ...ft
+          },
+          de
+        ), pe)
+      ),
+      Te && Ye(),
+      tt && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(gt, { ref: g.current.refDropElementClue }), /* @__PURE__ */ r.createElement(mt, { ref: g.current.refDragElementClue }))
+    ), _e, t.pageable && Ze);
+  let ue = t.style || {};
+  return j && (ue.height || (ue = Object.assign({}, ue, { height: "450px" }))), /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      id: t.id || se,
+      style: ue,
+      className: b(
+        m.wrapper({
+          size: x,
+          virtual: j
+        }),
+        t.className
+      ),
+      ref: k,
+      "aria-label": t.ariaLabel,
+      onKeyDown: ze,
+      onFocus: Me,
+      ...ut
+    },
+    Be,
+    Ue,
+    /* @__PURE__ */ r.createElement(
+      "div",
       {
-        ref: (i) => {
-          this.columnResize.colGroupMain = i;
-        }
+        className: b(m.ariaRoot({})),
+        role: "grid",
+        "aria-colcount": H.length,
+        "aria-rowcount": F,
+        id: T(),
+        "aria-label": nn.toLanguageString(bt, $n[bt])
       },
-      R.map((i, f) => /* @__PURE__ */ r.createElement(
-        "col",
-        {
-          key: f.toString(),
-          className: we(i.field, this.props.sort) ? m(s.sorted({})) : void 0,
-          width: U(i)
-        }
-      ))
-    ), re = this.dragLogic.reorderable || this.dragLogic.groupable;
-    if (this.props.scrollable === "none")
-      return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      $e,
+      /* @__PURE__ */ r.createElement("div", { className: b(m.container({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
         "div",
         {
-          id: this.props.id,
-          style: this.props.style,
-          className: m(s.wrapper({ size: t }), this.props.className),
-          ref: (i) => {
-            this._element = i;
-          },
-          "aria-label": this.props.ariaLabel,
-          onKeyDown: this.onKeyDown,
-          onFocus: this.onFocus,
-          ...ce
+          ref: _,
+          className: b(m.content({})),
+          onScroll: Ft,
+          role: "presentation"
         },
-        G,
-        q,
-        /* @__PURE__ */ r.createElement(
-          ue,
+        /* @__PURE__ */ r.createElement("div", { className: b(m.tableWrap({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
+          st,
           {
-            selectable: this.props.selectable,
-            onRelease: this.selectionRelease,
-            childRef: (i) => {
-              this.tableElement = i, this.headTable = i;
+            selectable: t.selectable,
+            onRelease: Oe,
+            childRef: (e) => {
+              y.current = e;
             }
           },
           /* @__PURE__ */ r.createElement(
             "table",
             {
-              ref: (i) => this.headTable = i,
-              className: m(s.table({ size: t }))
+              ref: y,
+              className: b(
+                m.table({
+                  size: x
+                })
+              ),
+              role: "presentation",
+              style: { userSelect: cn }
             },
-            oe,
-            J,
+            et,
             /* @__PURE__ */ r.createElement(
               "tbody",
               {
+                className: b(m.tbody({})),
+                ref: U,
                 role: "rowgroup",
-                className: m(s.tbody({})),
-                ...ge
+                ...ft
               },
-              P
-            ),
-            ie
+              de
+            )
           )
-        ),
-        B && ee(),
-        re && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(fe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(me, { ref: this.dragLogic.refDragElementClue }))
-      ), j, this.props.pageable && se);
-    let W = this.props.style || {};
-    return p && (W.height || (W = Object.assign({}, W, { height: "450px" }))), /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
-      "div",
-      {
-        id: this.props.id,
-        style: W,
-        className: m(
-          s.wrapper({
-            size: t,
-            virtual: p
-          }),
-          this.props.className
-        ),
-        ref: (i) => {
-          this._element = i;
-        },
-        "aria-label": this.props.ariaLabel,
-        onKeyDown: this.onKeyDown,
-        onFocus: this.onFocus,
-        ...ce
-      },
-      G,
-      q,
-      /* @__PURE__ */ r.createElement(
-        "div",
-        {
-          className: m(s.ariaRoot({})),
-          role: "grid",
-          "aria-colcount": R.length,
-          "aria-rowcount": a,
-          id: this._gridId,
-          "aria-label": c.toLanguageString(be, gt[be])
-        },
-        J,
-        /* @__PURE__ */ r.createElement("div", { className: m(s.container({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
+        ), Te && Ye()),
+        j && /* @__PURE__ */ r.createElement("div", { className: b(m.heightContainer({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
           "div",
           {
-            ref: this.containerRef,
-            className: m(s.content({})),
-            onScroll: this.scrollHandler,
-            role: "presentation"
-          },
-          /* @__PURE__ */ r.createElement("div", { className: m(s.tableWrap({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
-            ue,
-            {
-              selectable: this.props.selectable,
-              onRelease: this.selectionRelease,
-              childRef: (i) => {
-                this.tableElement = i;
-              }
-            },
-            /* @__PURE__ */ r.createElement(
-              "table",
-              {
-                ref: (i) => this.tableElement = i,
-                className: m(
-                  s.table({
-                    size: t
-                  })
-                ),
-                role: "presentation",
-                style: { userSelect: z }
-              },
-              oe,
-              /* @__PURE__ */ r.createElement(
-                "tbody",
-                {
-                  className: m(s.tbody({})),
-                  ref: this.tableBodyRef,
-                  role: "rowgroup",
-                  ...ge
-                },
-                P
-              )
-            )
-          ), B && ee()),
-          p && /* @__PURE__ */ r.createElement("div", { className: m(s.heightContainer({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
-            "div",
-            {
-              style: p ? { height: this.vs.containerHeight + "px" } : {}
-            }
-          ))
-        )),
-        ie,
-        re && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(fe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(me, { ref: this.dragLogic.refDragElementClue })),
-        this.showLicenseWatermark && /* @__PURE__ */ r.createElement(qe, null)
-      ),
-      j,
-      this.props.pageable && se
-    ));
-  }
-  calculateMedia() {
-    this.checkMatchMediaColumnsDifferece() || this.forceUpdate();
-  }
-  selectionChange(a) {
-    if (this.props.onSelectionChange) {
-      const { event: n, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: s, cell: l } = pe(this.props.selectable), d = {
-        ...this.getArguments(n.syntheticEvent),
-        dataItem: c,
-        startColIndex: t,
-        endColIndex: t,
-        startRowIndex: e,
-        endRowIndex: e,
-        dataItems: this.getLeafDataItems(),
-        altKey: !1,
-        ctrlKey: !1,
-        shiftKey: !1,
-        metaKey: !1,
-        mode: s,
-        cell: l,
-        isDrag: !1,
-        componentId: this._gridId,
-        selectedField: this.props.selectedField || ""
-      };
-      this.props.onSelectionChange.call(void 0, d);
-    }
-  }
-  raiseDataEvent(a, n, c, e, t) {
-    const s = this.props.onDataStateChange;
-    if (a) {
-      const l = { ...this.getArguments(e), ...n, targetEvent: t };
-      a.call(void 0, l);
-    } else
-      s && s.call(void 0, {
-        ...this.getArguments(e),
-        targetEvent: t || {},
-        dataState: {
-          ...this.getDataState(),
-          ...c
-        }
-      });
-  }
-  columnReorder(a, n, c) {
-    const e = this._columns[a], t = e.depth, s = (h) => {
-      do
-        h++;
-      while (h < this._columns.length && this._columns[h].depth > t);
-      return h;
-    }, l = this._columns.splice(a, s(a) - a);
-    this._columns.splice(a < n ? s(n - l.length) : n, 0, ...l), this._columns.filter((h) => h.declarationIndex >= 0).forEach((h, g) => h.orderIndex = g), this._columnsMutations++;
-    const d = this._columns[a].locked && this._columns[n].locked;
-    et(this._columnsMap, this._columns, d || this._shouldUpdateLeftRight), tt(this._columnsMap, this._columns, d || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
-    const p = this.columns;
-    if (this.forceUpdate(), this.props.onColumnReorder) {
-      const h = {
-        target: this,
-        columns: p,
-        columnId: e.id,
-        nativeEvent: c
-      };
-      this.props.onColumnReorder.call(void 0, h);
-    }
-  }
-  groupReorder(a, n, c) {
-    if (this.props.group === void 0)
-      return;
-    const e = this.props.group.slice();
-    e.splice(n, 0, ...e.splice(a, 1)), this.groupChange(e, c);
-  }
-  columnToGroup(a, n, c) {
-    const e = this._columns[a].field;
-    if (!e)
-      return;
-    const t = (this.props.group || []).slice();
-    t.splice(n, 0, { field: e }), this.groupChange(t, c);
-  }
-  columnGroupChange(a, n) {
-    const c = this.dragLogic.getCurrentGroupsLength;
-    this.columnToGroup(a, c, n);
-  }
-  resetTableWidth() {
-    let a = 0;
-    if (!this.columnResize.colGroupMain)
-      return;
-    const n = this.columnResize.colGroupMain.children;
-    for (let c = 0; c < n.length; c++) {
-      const e = n[c].width;
-      if (!e)
-        return;
-      a += parseFloat(e.toString());
-    }
-    a = Math.round(a), this._header && this._header.setWidth(a), this._footer && this._footer.setWidth(a), this.tableElement && (this.tableElement.style.width = a + "px");
-  }
-  initColumns(a, n) {
-    const c = D.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = this.filterColumnsByMediaProp(e);
-    this._columns = t, this._columns.length === 0 && (this._columns = wt(this.props.data, this.props.group, this.props.expandField, {
-      prevId: 0,
-      idPrefix: c
-    })), this.configureColumns(this._columns, n, c), this._columnsMap = this.mapColumns(this._columns, this._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
-  }
-  getDataState() {
-    return {
-      filter: this.props.filter,
-      sort: this.props.sort,
-      skip: this.props.skip,
-      take: this.props.take !== void 0 ? this.props.take : this.props.pageSize,
-      group: this.props.group
-    };
-  }
-  getArguments(a) {
-    return {
-      nativeEvent: a && a.nativeEvent,
-      syntheticEvent: a,
-      target: this
-    };
-  }
-};
-H.displayName = "KendoReactGrid", H.defaultProps = {
-  // never use this
-}, H.propTypes = {
+            style: j ? { height: ((lt = c.current) == null ? void 0 : lt.containerHeight) + "px" } : {}
+          }
+        ))
+      )),
+      pe,
+      tt && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(gt, { ref: g.current.refDropElementClue }), /* @__PURE__ */ r.createElement(mt, { ref: g.current.refDragElementClue })),
+      rn && /* @__PURE__ */ r.createElement(Sn, null)
+    ),
+    _e,
+    t.pageable && Ze
+  ));
+}), dr = {
   data: o.oneOfType([
     o.array,
     o.shape({
@@ -1171,9 +1056,9 @@ H.displayName = "KendoReactGrid", H.defaultProps = {
     })
   ]),
   size: o.oneOf(["small", "medium"])
-}, H.contextType = V;
-let $ = H;
-ct($);
+};
+kt.displayName = "KendoReactGrid";
+kt.propTypes = dr;
 export {
-  $ as Grid
+  kt as Grid
 };