@progress/kendo-react-grid 7.4.0-develop.9 → 7.4.0

package/Grid.mjs

@@ -8,40 +8,40 @@
 "use client";
 import * as r from "react";
 import s from "prop-types";
-import { dispatchEvent as Ae, canUseDOM as U, getActiveElement as Ge, memoizeOne as S, validatePackage as Ke, shouldShowValidationUI as Oe, setScrollbarWidth as re, getter as Pe, classNames as L, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
-import { tableKeyboardNavigation as x, getSelectionOptions as ae, mapColumns as Ve, ClipboardService as We, TableKeyboardNavigationContext as V, isRtl as Be, tableKeyboardNavigationTools as F, tableColumnsVirtualization as $e, Pager as je, tableKeyboardNavigationScopeAttributes as le, TableSelection as ne, tableKeyboardNavigationBodyAttributes as he, DropClue as pe, DragClue as de, updateLeft as qe, updateRight as Je } from "@progress/kendo-react-data-tools";
-import { GridSelectionCell as Qe } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Xe } from "./cells/GridHierarchyCell.mjs";
-import { GridEditCell as Ye } from "./cells/GridEditCell.mjs";
-import { Header as Ze } from "./header/Header.mjs";
-import { HeaderRow as et } from "./header/HeaderRow.mjs";
-import { FilterRow as tt } from "./header/FilterRow.mjs";
-import { GroupPanel as st } from "./header/GroupPanel.mjs";
-import { Footer as it } from "./footer/Footer.mjs";
-import { provideLocalizationService as ot, registerForLocalization as rt } from "@progress/kendo-react-intl";
-import { pagerMessagesMap as at, gridAriaLabel as ce, messages as lt } from "./messages/index.mjs";
-import { VirtualScroll as nt } from "./VirtualScroll.mjs";
+import { dispatchEvent as Ge, canUseDOM as V, getActiveElement as Ke, memoizeOne as S, validatePackage as Oe, shouldShowValidationUI as Pe, setScrollbarWidth as re, getter as Ve, classNames as L, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
+import { tableKeyboardNavigation as x, getSelectionOptions as ae, mapColumns as We, ClipboardService as Be, TableKeyboardNavigationContext as U, isRtl as $e, tableKeyboardNavigationTools as F, tableColumnsVirtualization as je, Pager as qe, tableKeyboardNavigationScopeAttributes as le, TableSelection as ne, tableKeyboardNavigationBodyAttributes as he, DropClue as pe, DragClue as de, updateLeft as Je, updateRight as Qe } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as Xe } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Ye } from "./cells/GridHierarchyCell.mjs";
+import { GridEditCell as Ze } from "./cells/GridEditCell.mjs";
+import { Header as et } from "./header/Header.mjs";
+import { HeaderRow as tt } from "./header/HeaderRow.mjs";
+import { FilterRow as st } from "./header/FilterRow.mjs";
+import { GroupPanel as it } from "./header/GroupPanel.mjs";
+import { Footer as ot } from "./footer/Footer.mjs";
+import { provideLocalizationService as rt, registerForLocalization as at } from "@progress/kendo-react-intl";
+import { pagerMessagesMap as lt, gridAriaLabel as ce, messages as nt } from "./messages/index.mjs";
+import { VirtualScroll as ht } from "./VirtualScroll.mjs";
 import { VirtualScrollFixed as ue, RowHeightService as ge } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as ht } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as pt } from "./drag/CommonDragLogic.mjs";
-import { firefox as me, firefoxMaxHeight as fe, flatData as dt, readColumns as ct, sanitizeColumns as ut, getColumnWidth as W, autoGenerateColumns as gt, getNestedValue as ve, resolveCells as mt } from "./utils/index.mjs";
-import { GridCell as ft } from "./cells/GridCell.mjs";
-import { GridGroupCell as be } from "./cells/GridGroupCell.mjs";
+import { ColumnResize as pt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as dt } from "./drag/CommonDragLogic.mjs";
+import { firefox as me, firefoxMaxHeight as fe, flatData as ct, readColumns as ut, sanitizeColumns as gt, getColumnWidth as W, autoGenerateColumns as mt, getNestedValue as be, resolveCells as ft } from "./utils/index.mjs";
+import { GridCell as bt } from "./cells/GridCell.mjs";
+import { GridGroupCell as ve } from "./cells/GridGroupCell.mjs";
 import { GridRow as vt } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as bt } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as Ct } from "./GridNoRecords.mjs";
+import { GridHeaderSelectionCell as Ct } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as Rt } from "./GridNoRecords.mjs";
 import { operators as Ce } from "./filterCommon.mjs";
-import { FooterRow as Rt } from "./footer/FooterRow.mjs";
-import { normalize as yt } from "./paging/GridPagerSettings.mjs";
+import { FooterRow as yt } from "./footer/FooterRow.mjs";
+import { normalize as wt } from "./paging/GridPagerSettings.mjs";
 import { packageMetadata as Re } from "./package-metadata.mjs";
-import { GridDetailCell as wt } from "./cells/GridDetailCell.mjs";
-import { GridDetailHierarchyCell as St } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as St } from "./cells/GridDetailCell.mjs";
+import { GridDetailHierarchyCell as kt } from "./cells/GridDetailHierarchyCell.mjs";
 const _ = class _ extends r.Component {
   constructor(a) {
     super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._shouldUpdateLeftRight = !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.observer = null, this.handleIntersection = (e) => {
       const t = { rowIndex: this.rowIndex };
-      e.forEach((i) => {
-        i.isIntersecting || this.setCurrentOnTop(t);
+      e.forEach((o) => {
+        o.isIntersecting || this.setCurrentOnTop(t);
       });
     }, this.setCurrentOnTop = (e) => {
       if (!this.vs.container || this.props.scrollable === "none")
@@ -51,35 +51,35 @@ const _ = class _ extends r.Component {
       if (this.props.scrollable === "virtual")
         this.vs.askedSkip = t, this.vs.container.scroll(0, Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight));
       else if (this.element) {
-        const i = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
-        i && this.containerRef.current && (this.containerRef.current.scrollTop = i.offsetTop);
+        const o = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
+        o && this.containerRef.current && (this.containerRef.current.scrollTop = o.offsetTop);
       }
     }, this.scrollIntoView = (e) => {
       if (!this.vs.container || this.props.scrollable === "none")
         return;
       this.rowIndex = e.rowIndex;
-      const { rowIndex: t } = e, i = this.element;
-      if (this.observer && i) {
+      const { rowIndex: t } = e, o = this.element;
+      if (this.observer && o) {
         this.observer.disconnect();
-        const n = i.querySelector(`[absolute-row-index="${t}"]`);
+        const n = o.querySelector(`[absolute-row-index="${t}"]`);
         n ? this.observer.observe(n) : this.setCurrentOnTop(e);
       }
     }, this.fitColumns = (e) => {
       this.columnResize.dblClickHandler(null, e);
-    }, this.onContextMenu = (e, t, i) => {
+    }, this.onContextMenu = (e, t, o) => {
       if (this.props.onContextMenu) {
         const n = {
           target: this,
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           dataItem: t,
-          field: i
+          field: o
         };
         this.props.onContextMenu.call(void 0, n);
       }
     }, this.getVirtualScroll = (e) => {
-      const { rowHeight: t, detailRowHeight: i, detail: n, expandField: h, groupable: l } = e, d = this.isAllData(), v = t !== void 0 && t > 0, R = i !== void 0 && i > 0, E = l === !0 || typeof l == "object" && l.enabled !== !1;
-      return !v || E && !d || !!(n && h) && (!R || !d) ? nt : ue;
+      const { rowHeight: t, detailRowHeight: o, detail: n, expandField: h, groupable: l } = e, d = this.isAllData(), b = t !== void 0 && t > 0, R = o !== void 0 && o > 0, I = l === !0 || typeof l == "object" && l.enabled !== !1;
+      return !b || I && !d || !!(n && h) && (!R || !d) ? ht : ue;
     }, this.isAllData = () => {
       const { data: e, total: t } = this.props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -92,14 +92,14 @@ const _ = class _ extends r.Component {
         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 i = this.props.rowHeight * e;
-        this.vs.containerHeight = me ? Math.min(fe, i) : i;
+        const o = this.props.rowHeight * e;
+        this.vs.containerHeight = me ? Math.min(fe, o) : o;
       } 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 ue) {
-        const { rowHeight: i = 0, detail: n, expandField: h } = this.props;
+        const { rowHeight: o = 0, detail: n, expandField: h } = this.props;
         let { detailRowHeight: l = 0 } = this.props;
-        l = n && h ? l : i, 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, i, l, this._data)) : this.vs.rowHeightService = new ge(e, i, l);
+        l = n && h ? l : o, 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, o, l, this._data)) : this.vs.rowHeightService = new ge(e, o, l);
         const d = this.vs.rowHeightService.totalHeight();
         this.vs.containerHeight = me ? Math.min(fe, d) : d;
       }
@@ -107,20 +107,20 @@ const _ = class _ extends r.Component {
       if (e.target !== e.currentTarget)
         return;
       clearTimeout(this.forceUpdateTimeout), this.vs.table = this.tableElement;
-      const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
-      this.props.columnVirtualization && (!this.vs.scrollableVirtual || i === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
+      const t = e.currentTarget.scrollLeft, o = e.currentTarget.scrollTop;
+      this.props.columnVirtualization && (!this.vs.scrollableVirtual || o === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
         this.forceUpdate();
-      }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && i !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ae(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = i;
+      }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && o !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ge(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = o;
     }, this.onKeyDown = (e) => {
       if (x.onKeyDown(e, {
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef,
         onNavigationAction: this.onNavigationAction
       }), this.props.onKeyDown) {
-        const { mode: t, cell: i } = ae(this.props.selectable), n = {
+        const { mode: t, cell: o } = ae(this.props.selectable), n = {
           dataItems: this.getLeafDataItems(),
           mode: t,
-          cell: i,
+          cell: o,
           componentId: this._gridId,
           selectedField: this.props.selectedField,
           ...this.getArguments(e)
@@ -158,8 +158,8 @@ const _ = class _ extends r.Component {
     }, this.itemChange = (e) => {
       const t = this.props.onItemChange;
       if (e.field === this.props.expandField || this.props.group && e.field === void 0) {
-        const i = this.props.onExpandChange;
-        i && i.call(
+        const o = this.props.onExpandChange;
+        o && o.call(
           void 0,
           {
             ...this.getArguments(e.syntheticEvent),
@@ -204,13 +204,13 @@ const _ = class _ extends r.Component {
         };
         this.props.onSelectionChange.call(void 0, t);
       }
-    }, this.pageChange = (e, t, i) => {
+    }, this.pageChange = (e, t, o) => {
       this.raiseDataEvent(
         this.props.onPageChange,
         { page: e },
         { skip: e.skip, take: e.take },
         t,
-        i
+        o
       );
     }, this.pagerPageChange = (e) => {
       this.pageChange({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
@@ -229,12 +229,12 @@ const _ = class _ extends r.Component {
         t
       );
     }, this.groupChange = (e, t) => {
-      const i = t.nativeEvent ? t : { nativeEvent: t.nativeEvent || t.originalEvent };
+      const o = t.nativeEvent ? t : { nativeEvent: t.nativeEvent || t.originalEvent };
       this.raiseDataEvent(
         this.props.onGroupChange,
         { group: e },
         { group: e, skip: 0 },
-        i
+        o
       );
     }, this.onClipboard = (e, t) => {
       if (this.props.onClipboard) {
@@ -253,11 +253,11 @@ const _ = class _ extends r.Component {
       }
     }, this.inActiveElement = () => {
       var h, l, d;
-      if (!U)
+      if (!V)
         return !1;
-      const e = Ge(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (l = this.document) == null ? void 0 : l.body, i = t.closest(".k-grid-container"), n = t && ((d = this._element) == null ? void 0 : d.contains(t));
-      return !!(t && n && i);
-    }, this.onResize = (e, t, i, n, h, l) => {
+      const e = Ke(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (l = this.document) == null ? void 0 : l.body, o = t.closest(".k-grid-container"), n = t && ((d = this._element) == null ? void 0 : d.contains(t));
+      return !!(t && n && o);
+    }, this.onResize = (e, t, o, n, h, l) => {
       this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
         void 0,
         {
@@ -266,35 +266,35 @@ const _ = class _ extends r.Component {
           targetColumnId: l,
           index: e,
           newWidth: t,
-          oldWidth: i,
+          oldWidth: o,
           end: h,
           target: this
         }
       );
-    }, this.reInitVirtualization = S((e, t, i, n, h, l) => {
+    }, this.reInitVirtualization = S((e, t, o, n, h, l) => {
       this.vs.reset();
       const d = this.getVirtualScroll(this.props);
       this.vs = new d(l);
-    }), this.flatData = S((e, t, i, n, h, l, d) => {
-      const v = [], R = dt(
-        v,
+    }), this.flatData = S((e, t, o, n, h, l, d) => {
+      const b = [], R = ct(
+        b,
         e,
         t,
-        { index: i },
+        { index: o },
         n !== void 0,
         h
       );
-      return { flattedData: v, resolvedGroupsCount: R };
-    }), this.rowHeightService = S((e, t, i, n, h) => new ge(t, i, n, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
-      (e, t, i) => {
+      return { flattedData: b, resolvedGroupsCount: R };
+    }), this.rowHeightService = S((e, t, o, n, h) => new ge(t, o, n, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
+      (e, t, o) => {
         const n = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
-        return ct(n, this.columns, { prevId: 0, idPrefix: t });
+        return ut(n, this.columns, { prevId: 0, idPrefix: t });
       }
     ), this.mapColumns = S(
-      (e) => Ve(e)
-    ), this.configureColumns = S((e, t, i) => {
+      (e, t) => We(e, t)
+    ), this.configureColumns = S((e, t, o) => {
       this.props.selectedField && e.filter((l) => l.field === this.props.selectedField).forEach((l) => {
-        l.width = l.width || "50px", l.cell = l.cell || Qe, l.headerCell = l.headerCell || bt;
+        l.width = l.width || "50px", l.cell = l.cell || Xe, l.headerCell = l.headerCell || Ct;
       });
       const n = {
         id: "",
@@ -318,7 +318,7 @@ const _ = class _ extends r.Component {
       let h = 0;
       this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
         ...n,
-        cell: Xe,
+        cell: Ye,
         field: this.props.expandField,
         headerClassName: "k-hierarchy-cell k-header"
       }), h++);
@@ -326,19 +326,19 @@ const _ = class _ extends r.Component {
         e.unshift({
           ...n,
           isAccessible: !1,
-          cell: be,
+          cell: ve,
           field: "value",
           locked: this.props.lockGroups
         }), h++;
       e.slice(h).forEach((l) => l.parentIndex >= 0 && (l.parentIndex += h));
-    }), this.getHeaderRow = S((e, t, i, n, h, l, d, v, R, E, b, N) => /* @__PURE__ */ r.createElement(
-      et,
+    }), this.getHeaderRow = S((e, t, o, n, h, l, d, b, R, I, v, N) => /* @__PURE__ */ r.createElement(
+      tt,
       {
         cells: this.props.cells,
         sort: e,
         sortable: t,
         sortChange: this.sortChange,
-        group: i || [],
+        group: o || [],
         groupable: n,
         groupChange: this.groupChange,
         filter: h,
@@ -347,29 +347,30 @@ const _ = class _ extends r.Component {
         filterChange: this.filterChange,
         columnMenu: R,
         selectionChange: this.onHeaderSelectionChange,
-        columns: E,
+        columns: I,
         columnResize: this.columnResize,
         pressHandler: this.dragLogic.pressHandler,
         dragHandler: this.dragLogic.dragHandler,
         releaseHandler: this.dragLogic.releaseHandler,
-        columnsMap: b,
-        cellRender: v,
+        columnsMap: v,
+        cellRender: b,
         isRtl: N,
         dragClue: this.dragLogic.dragClueRef,
         headerRef: this.headerElementRef,
         containerRef: this.containerRef,
+        navigatable: this.props.navigatable,
         columnGroupChange: this.columnGroupChange
       }
     )), this.resolveTitle = (e) => {
-      const t = this._columns.find((n) => n.field === e), i = t && (t.title || t.field);
-      return i === void 0 ? e : i;
-    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), Ke(Re), this.showLicenseWatermark = Oe(Re);
+      const t = this._columns.find((n) => n.field === e), o = t && (t.title || t.field);
+      return o === void 0 ? e : o;
+    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), Oe(Re), this.showLicenseWatermark = Pe(Re);
     const p = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
-    this.vs = new c(p || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new pt(
+    this.vs = new c(p || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new dt(
       this.columnReorder.bind(this),
       this.groupReorder.bind(this),
       this.columnToGroup.bind(this)
-    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ht(this.onResize), this.props.clipboard && (this.clipboardService = new We(this.onClipboard)), x.onConstructor({
+    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new pt(this.onResize), this.props.clipboard && (this.clipboardService = new Be(this.onClipboard)), x.onConstructor({
       navigatable: !!a.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -418,7 +419,7 @@ const _ = class _ extends r.Component {
   // tslint:enable:max-line-length
   get columns() {
     const a = this._columns.filter((p) => p.declarationIndex >= 0 && p.parentIndex === -1);
-    return ut(a);
+    return gt(a);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -427,7 +428,7 @@ const _ = class _ extends r.Component {
     return this._element;
   }
   get document() {
-    if (U)
+    if (V)
       return this.element && this.element.ownerDocument || document;
   }
   get _header() {
@@ -441,7 +442,7 @@ const _ = class _ extends r.Component {
    */
   componentDidMount() {
     this.resetTableWidth(), re();
-    const a = Be(this.element);
+    const a = $e(this.element);
     this.isRtl = a, x.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
@@ -451,7 +452,7 @@ const _ = class _ extends r.Component {
       rootMargin: "0px",
       threshold: 0.9
     };
-    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = U && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, p) || null;
+    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = V && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, p) || null;
   }
   /**
    * @hidden
@@ -485,10 +486,10 @@ const _ = class _ extends r.Component {
   render() {
     var ie;
     let a = this.props.total || 0;
-    const p = F.getIdPrefix(this.navigationStateRef), c = ot(this);
+    const p = F.getIdPrefix(this.navigationStateRef), c = rt(this);
     let e = [];
     Array.isArray(this.props.data) ? (e = this.props.data, a = a || this.props.data.length) : this.props.data && (e = this.props.data.data, a = a || this.props.data.total);
-    const t = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", { resolvedGroupsCount: i, flattedData: n } = this.flatData(
+    const t = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", { resolvedGroupsCount: o, flattedData: n } = this.flatData(
       e,
       t,
       this.props.skip || 0,
@@ -503,9 +504,9 @@ const _ = class _ extends r.Component {
     const l = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
     this.initializeVirtualization(a, h);
     const d = this.childrenToArray(this.props.children);
-    this.initColumns(d, i);
-    const v = d.map((o) => o && o.type && o.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(o, { ...o.props, ariaControls: this._gridId }) : null), R = d.filter((o) => o && o.type && o.type.displayName === "KendoReactGridNoRecords"), E = d.filter((o) => o && o.type && o.type.displayName === "KendoReactGridStatusBar"), b = this._columns.filter((o) => o.children.length === 0), N = h && /* @__PURE__ */ r.createElement(
-      st,
+    this.initColumns(d, o);
+    const b = d.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), R = d.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), I = d.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), v = this._columns.filter((i) => i.children.length === 0), N = h && /* @__PURE__ */ r.createElement(
+      it,
       {
         group: this.props.group || [],
         groupChange: this.groupChange,
@@ -517,8 +518,8 @@ const _ = class _ extends r.Component {
         ariaControls: this._gridId,
         onContextMenu: this.onContextMenu
       }
-    ), { sort: ye, sortable: we, group: Se, filter: ke, filterable: Ee, filterOperators: Ie = Ce, headerCellRender: xe, columnMenu: _e } = this.props, $ = /* @__PURE__ */ r.createElement(
-      Ze,
+    ), { sort: ye, sortable: we, group: Se, filter: ke, filterable: Ie, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e } = this.props, $ = /* @__PURE__ */ r.createElement(
+      et,
       {
         size: this.props.size,
         columnResize: this.columnResize,
@@ -533,8 +534,8 @@ const _ = class _ extends r.Component {
           Se,
           h,
           ke,
-          Ee,
           Ie,
+          Ee,
           xe,
           _e,
           this._columns,
@@ -542,7 +543,7 @@ const _ = class _ extends r.Component {
           this.isRtl
         ),
         filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
-          tt,
+          st,
           {
             cells: this.props.cells,
             size: this.props.size,
@@ -556,33 +557,33 @@ const _ = class _ extends r.Component {
             ariaRowIndex: this._columnsMap.length + 1
           }
         ) || void 0,
-        cols: b.map((o, g) => /* @__PURE__ */ r.createElement(
+        cols: v.map((i, g) => /* @__PURE__ */ r.createElement(
           "col",
           {
             key: g.toString(),
-            width: W(o)
+            width: W(i)
           }
         ))
       }
-    ), ze = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, De = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Te } = $e({
+    ), ze = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, De = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Te } = je({
       enabled: this.props.columnVirtualization,
-      columns: b,
+      columns: v,
       tableViewPortWidth: De,
       scrollLeft: ze
-    }), Le = (o, g, m) => {
-      let I = !1;
-      const k = this.props.selectedField ? ve(this.props.selectedField, o.dataItem) : void 0;
+    }), Le = (i, g, m) => {
+      let E = !1;
+      const k = this.props.selectedField ? be(this.props.selectedField, i.dataItem) : void 0;
       return {
-        row: b.map((u, f) => {
+        row: v.map((u, f) => {
           if (Te[f])
             return null;
           const D = u.id ? u.id : f, H = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
           let w = !1;
           if (u.editable && this.props.editField) {
-            const C = ve(this.props.editField, o.dataItem);
-            C && (C === !0 || C === u.field) && (I = !0, w = !0);
+            const C = be(this.props.editField, i.dataItem);
+            C && (C === !0 || C === u.field) && (E = !0, w = !0);
           }
-          const P = u.cell || w && Ye || ft, T = this.props.expandField && this.props.detail && u.field === this.props.expandField;
+          const P = u.cell || w && Ze || bt, T = this.props.expandField && this.props.detail && u.field === this.props.expandField;
           return /* @__PURE__ */ r.createElement(
             P,
             {
@@ -595,54 +596,54 @@ const _ = class _ extends r.Component {
                 T ? "nodata" : "cell"
               ),
               colSpan: He[f],
-              dataItem: o.dataItem,
+              dataItem: i.dataItem,
               field: u.field,
               editor: u.editor,
               format: u.format,
               className: H,
               render: this.props.cellRender,
-              cells: mt(this.props.cells, u.cells),
+              cells: ft(this.props.cells, u.cells),
               onChange: this.itemChange,
               selectionChange: this.props.onSelectionChange ? (C) => {
-                this.selectionChange({ event: C, dataItem: o.dataItem, dataIndex: m, columnIndex: f });
+                this.selectionChange({ event: C, dataItem: i.dataItem, dataIndex: m, columnIndex: f });
               } : void 0,
               columnIndex: f,
-              columnsCount: b.length,
-              rowType: o.rowType,
-              level: o.level,
-              expanded: o.expanded,
-              dataIndex: o.dataIndex,
+              columnsCount: v.length,
+              rowType: i.rowType,
+              level: i.level,
+              expanded: i.expanded,
+              dataIndex: i.dataIndex,
               style: y,
               ariaColumnIndex: u.ariaColumnIndex,
               isSelected: Array.isArray(k) && k.indexOf(f) > -1
             }
           );
         }),
-        isInEdit: I,
+        isInEdit: E,
         isSelected: typeof k == "boolean" && k
       };
     };
     let j = 0;
     if (this.props.scrollable === "virtual")
-      for (let o = 0; o < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); o++) {
+      for (let i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); i++) {
         const g = this._data.shift();
         if (g)
-          this._data.push(g), j++, g.rowType === "groupHeader" && o--;
+          this._data.push(g), j++, g.rowType === "groupHeader" && i--;
         else
           break;
       }
-    const q = (o) => o >= this._data.length - j;
+    const q = (i) => i >= this._data.length - j;
     let J = this.vs.realSkip || 0;
-    const M = [];
+    const A = [];
     let K = !1;
-    const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1, Q = /* @__PURE__ */ r.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": O }, /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template" }, R.length ? R : /* @__PURE__ */ r.createElement(Ct, null)));
+    const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
     let z = 0;
     if (this._data.length) {
-      let o = -1, g = 0;
-      (this._slicedData || this._data).forEach((m, I) => {
-        m.rowType === "data" && (J++, o++);
-        const k = J % 2 === 0, u = this.props.dataItemKey && Pe(this.props.dataItemKey)(m.dataItem), f = I + (this.vs.realSkip || 0), D = u || "ai" + f, H = D + "_1", y = Le(m, D, o);
-        if (z = f + O + g, M.push(/* @__PURE__ */ r.createElement(
+      let i = -1, g = 0;
+      (this._slicedData || this._data).forEach((m, E) => {
+        m.rowType === "data" && (J++, i++);
+        const k = J % 2 === 0, u = this.props.dataItemKey && Ve(this.props.dataItemKey)(m.dataItem), f = E + (this.vs.realSkip || 0), D = u || "ai" + f, H = D + "_1", y = Le(m, D, i);
+        if (z = f + O + g, A.push(/* @__PURE__ */ r.createElement(
           vt,
           {
             key: D,
@@ -650,7 +651,7 @@ const _ = class _ extends r.Component {
             isAltRow: k,
             isInEdit: y.isInEdit,
             rowType: m.rowType,
-            isHidden: q(I),
+            isHidden: q(E),
             onClick: (w) => this.rowClick(w, m),
             onDoubleClick: (w) => this.rowDblClick(w, m),
             selectedField: this.props.selectedField,
@@ -658,13 +659,13 @@ const _ = class _ extends r.Component {
             render: this.props.rowRender,
             ariaRowIndex: z,
             absoluteRowIndex: f,
-            dataIndex: o,
+            dataIndex: this.vs.scrollableVirtual ? f : i,
             isSelected: y.isSelected
           },
           y.row
         )), this.props.detail && m.rowType === "data" && m.expanded) {
-          const w = b.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
-          g++, z = f + O + g, M.push(/* @__PURE__ */ r.createElement(
+          const w = v.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
+          g++, z = f + O + g, A.push(/* @__PURE__ */ r.createElement(
             "tr",
             {
               key: H,
@@ -672,7 +673,7 @@ const _ = class _ extends r.Component {
                 "k-table-row",
                 k ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
               ),
-              style: { visibility: q(I) ? "hidden" : "", height: this.props.detailRowHeight },
+              style: { visibility: q(E) ? "hidden" : "", height: this.props.detailRowHeight },
               role: "row",
               "aria-rowindex": z
             },
@@ -680,7 +681,7 @@ const _ = class _ extends r.Component {
               var oe;
               const C = (oe = y == null ? void 0 : y.row[T]) == null ? void 0 : oe.props.style, Me = C ? this.isRtl ? { left: C.right, right: C.left } : { left: C.left, right: C.right } : {};
               return /* @__PURE__ */ r.createElement(
-                be,
+                ve,
                 {
                   id: "",
                   dataIndex: m.dataIndex,
@@ -697,13 +698,13 @@ const _ = class _ extends r.Component {
               );
             }),
             this.props.expandField && /* @__PURE__ */ r.createElement(
-              St,
+              kt,
               {
                 id: F.generateNavigatableId(`${H}-dhcell`, p)
               }
             ),
             /* @__PURE__ */ r.createElement(
-              wt,
+              St,
               {
                 onContextMenu: this.onContextMenu,
                 dataItem: m.dataItem,
@@ -719,35 +720,38 @@ const _ = class _ extends r.Component {
       });
     } else
       K = !0;
-    const X = {
+    const Fe = () => {
+      const i = this._header;
+      return i && i.table.clientWidth;
+    }, Q = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": O, style: { width: Fe() } }, /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template" }, R.length ? R : /* @__PURE__ */ r.createElement(Rt, null))), X = {
       size: this.props.size,
       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: at,
-      ...yt(this.props.pageable || {})
-    }, Y = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...X }) : /* @__PURE__ */ r.createElement(je, { className: "k-grid-pager", ...X }), Fe = (o) => this.props.sort && this.props.sort.filter((g) => g.field === o).length > 0, Ne = (o, g) => /* @__PURE__ */ r.createElement(
+      messagesMap: lt,
+      ...wt(this.props.pageable || {})
+    }, Y = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...X }) : /* @__PURE__ */ r.createElement(qe, { className: "k-grid-pager", ...X }), Ne = (i) => this.props.sort && this.props.sort.filter((g) => g.field === i).length > 0, Ae = (i, g) => /* @__PURE__ */ r.createElement(
       "col",
       {
         key: g.toString(),
-        width: W(o)
+        width: W(i)
       }
     ), Z = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
-      (o) => {
+      (i) => {
         var g;
-        return !!(o.footerCell || (g = o.cells) != null && g.footerCell);
+        return !!(i.footerCell || (g = i.cells) != null && g.footerCell);
       }
     ) ? /* @__PURE__ */ r.createElement(
-      it,
+      ot,
       {
         size: this.props.size,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
-        ref: (o) => this._footer = o,
+        ref: (i) => this._footer = i,
         row: /* @__PURE__ */ r.createElement(
-          Rt,
+          yt,
           {
             cells: this.props.cells,
             columns: this._columns,
@@ -755,28 +759,28 @@ const _ = class _ extends r.Component {
             ariaRowIndex: z + 1
           }
         ),
-        cols: b.map(Ne)
+        cols: v.map(Ae)
       }
     ) : null, ee = /* @__PURE__ */ r.createElement(
       "colgroup",
       {
-        ref: (o) => {
-          this.columnResize.colGroupMain = o;
+        ref: (i) => {
+          this.columnResize.colGroupMain = i;
         }
       },
-      b.map(
-        (o, g) => /* @__PURE__ */ r.createElement(
+      v.map(
+        (i, g) => /* @__PURE__ */ r.createElement(
           "col",
           {
             key: g.toString(),
-            className: Fe(o.field) ? "k-sorted" : void 0,
-            width: W(o)
+            className: Ne(i.field) ? "k-sorted" : void 0,
+            width: W(i)
           }
         )
       )
     ), te = this.dragLogic.reorderable || this.dragLogic.groupable, se = this.props.columnVirtualization ? "block" : "table";
     if (this.props.scrollable === "none")
-      return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      return /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
         "div",
         {
           id: this.props.id,
@@ -789,23 +793,23 @@ const _ = class _ extends r.Component {
             },
             this.props.className
           ),
-          ref: (o) => {
-            this._element = o;
+          ref: (i) => {
+            this._element = i;
           },
           "aria-label": this.props.ariaLabel,
           onKeyDown: this.onKeyDown,
           onFocus: this.onFocus,
           ...le
         },
-        v,
+        b,
         N,
         /* @__PURE__ */ r.createElement(
           ne,
           {
             selectable: this.props.selectable,
             onRelease: this.selectionRelease,
-            childRef: (o) => {
-              this.tableElement = o;
+            childRef: (i) => {
+              this.tableElement = i;
             }
           },
           /* @__PURE__ */ r.createElement(
@@ -819,19 +823,19 @@ const _ = class _ extends r.Component {
             },
             ee,
             $,
-            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...he }, M),
+            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...he }, A),
             Z
           )
         ),
-        K && Q,
+        K && Q(),
         te && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(pe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDragElementClue }))
-      ), E, this.props.pageable && Y);
-    let A = this.props.style || {};
-    return this.props.scrollable === "virtual" && (A.height || (A = Object.assign({}, A, { height: "450px" }))), /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      ), I, this.props.pageable && Y);
+    let M = this.props.style || {};
+    return this.props.scrollable === "virtual" && (M.height || (M = Object.assign({}, M, { height: "450px" }))), /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
-        style: A,
+        style: M,
         className: L(
           "k-grid",
           {
@@ -841,25 +845,25 @@ const _ = class _ extends r.Component {
           },
           this.props.className
         ),
-        ref: (o) => {
-          this._element = o;
+        ref: (i) => {
+          this._element = i;
         },
         "aria-label": this.props.ariaLabel,
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,
         ...le
       },
-      v,
+      b,
       N,
       /* @__PURE__ */ r.createElement(
         "div",
         {
           className: "k-grid-aria-root",
           role: "grid",
-          "aria-colcount": b.length,
+          "aria-colcount": v.length,
           "aria-rowcount": a,
           id: this._gridId,
-          "aria-label": c.toLanguageString(ce, lt[ce])
+          "aria-label": c.toLanguageString(ce, nt[ce])
         },
         $,
         /* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
@@ -875,8 +879,8 @@ const _ = class _ extends r.Component {
             {
               selectable: this.props.selectable,
               onRelease: this.selectionRelease,
-              childRef: (o) => {
-                this.tableElement = o;
+              childRef: (i) => {
+                this.tableElement = i;
               }
             },
             /* @__PURE__ */ r.createElement(
@@ -901,10 +905,10 @@ const _ = class _ extends r.Component {
                   role: "rowgroup",
                   ...he
                 },
-                M
+                A
               )
             )
-          ), K && Q),
+          ), K && Q()),
           /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
             "div",
             {
@@ -916,13 +920,13 @@ const _ = class _ extends r.Component {
         te && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(pe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDragElementClue })),
         this.showLicenseWatermark && /* @__PURE__ */ r.createElement(Ue, null)
       ),
-      E,
+      I,
       this.props.pageable && Y
     ));
   }
   selectionChange(a) {
     if (this.props.onSelectionChange) {
-      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: i, cell: n } = ae(this.props.selectable), h = {
+      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: o, cell: n } = ae(this.props.selectable), h = {
         ...this.getArguments(p.syntheticEvent),
         dataItem: c,
         startColIndex: t,
@@ -934,7 +938,7 @@ const _ = class _ extends r.Component {
         ctrlKey: !1,
         shiftKey: !1,
         metaKey: !1,
-        mode: i,
+        mode: o,
         cell: n,
         isDrag: !1,
         componentId: this._gridId,
@@ -944,12 +948,12 @@ const _ = class _ extends r.Component {
     }
   }
   raiseDataEvent(a, p, c, e, t) {
-    const i = this.props.onDataStateChange;
+    const o = this.props.onDataStateChange;
     if (a) {
       const n = { ...this.getArguments(e), ...p, targetEvent: t };
       a.call(void 0, n);
     } else
-      i && i.call(
+      o && o.call(
         void 0,
         {
           ...this.getArguments(e),
@@ -962,15 +966,15 @@ const _ = class _ extends r.Component {
       );
   }
   columnReorder(a, p, c) {
-    const e = this._columns[a], t = e.depth, i = (d) => {
+    const e = this._columns[a], t = e.depth, o = (d) => {
       do
         d++;
       while (d < this._columns.length && this._columns[d].depth > t);
       return d;
-    }, n = this._columns.splice(a, i(a) - a);
-    this._columns.splice(a < p ? i(p - n.length) : p, 0, ...n), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, v) => d.orderIndex = v), this._columnsMutations++;
+    }, n = this._columns.splice(a, o(a) - a);
+    this._columns.splice(a < p ? o(p - n.length) : p, 0, ...n), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, b) => d.orderIndex = b), this._columnsMutations++;
     const h = this._columns[a].locked && this._columns[p].locked;
-    qe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Je(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    Je(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Qe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
     const l = this.columns;
     if (this.forceUpdate(), this.props.onColumnReorder) {
       const d = {
@@ -1013,8 +1017,8 @@ const _ = class _ extends r.Component {
     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, p) {
-    const c = F.getIdPrefix(this.navigationStateRef);
-    this._columns = this.readColumns(a, c, this._columnsMutations), this._columns.length === 0 && (this._columns = gt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, p, c), this._columnsMap = this.mapColumns(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+    const c = F.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = e.length !== this._columns.length;
+    this._columns = e, this._columns.length === 0 && (this._columns = mt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, p, c), this._columnsMap = this.mapColumns(this._columns, t), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
   }
   getDataState() {
     return {
@@ -1111,9 +1115,9 @@ _.displayName = "KendoReactGrid", _.defaultProps = {
   dataItemKey: s.string,
   navigatable: s.bool,
   size: s.oneOf(["small", "medium"])
-}, _.contextType = V;
+}, _.contextType = U;
 let B = _;
-rt(B);
+at(B);
 export {
   B as Grid
 };