@progress/kendo-react-grid 7.5.0-develop.12 → 7.5.0-develop.14

package/Grid.mjs

@@ -7,38 +7,39 @@
  */
 "use client";
 import * as r from "react";
-import s from "prop-types";
-import { RowHeightService as ae, dispatchEvent as Ke, canUseDOM as V, getActiveElement as Oe, memoizeOne as S, validatePackage as Pe, shouldShowValidationUI as Ve, setScrollbarWidth as le, getter as Ue, classNames as F, kendoThemeMaps as G, WatermarkOverlay as We } from "@progress/kendo-react-common";
-import { tableKeyboardNavigation as x, getSelectionOptions as ne, mapColumns as Be, ClipboardService as $e, TableKeyboardNavigationContext as U, isRtl as je, tableKeyboardNavigationTools as N, tableColumnsVirtualization as qe, Pager as Je, tableKeyboardNavigationScopeAttributes as he, TableSelection as pe, tableKeyboardNavigationBodyAttributes as de, DropClue as ce, DragClue as ue, updateLeft as Qe, updateRight as Xe } from "@progress/kendo-react-data-tools";
-import { GridSelectionCell as Ye } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Ze } from "./cells/GridHierarchyCell.mjs";
-import { GridEditCell as et } from "./cells/GridEditCell.mjs";
-import { Header as tt } from "./header/Header.mjs";
-import { HeaderRow as st } from "./header/HeaderRow.mjs";
-import { FilterRow as it } from "./header/FilterRow.mjs";
-import { GroupPanel as ot } from "./header/GroupPanel.mjs";
-import { Footer as rt } from "./footer/Footer.mjs";
-import { provideLocalizationService as at, registerForLocalization as lt } from "@progress/kendo-react-intl";
-import { pagerMessagesMap as nt, gridAriaLabel as ge, messages as ht } from "./messages/index.mjs";
-import { VirtualScroll as pt } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as me } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as dt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as ct } from "./drag/CommonDragLogic.mjs";
-import { firefox as fe, firefoxMaxHeight as be, flatData as ut, readColumns as gt, sanitizeColumns as mt, getColumnWidth as W, autoGenerateColumns as ft, getNestedValue as ve, resolveCells as bt } from "./utils/index.mjs";
-import { GridCell as vt } from "./cells/GridCell.mjs";
-import { GridGroupCell as Ce } from "./cells/GridGroupCell.mjs";
-import { GridRow as Ct } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as Rt } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as yt } from "./GridNoRecords.mjs";
-import { operators as Re } from "./filterCommon.mjs";
-import { FooterRow as wt } from "./footer/FooterRow.mjs";
-import { normalize as St } from "./paging/GridPagerSettings.mjs";
-import { packageMetadata as ye } from "./package-metadata.mjs";
-import { GridDetailCell as kt } from "./cells/GridDetailCell.mjs";
+import o from "prop-types";
+import { RowHeightService as re, dispatchEvent as Ge, canUseDOM as V, getActiveElement as Ke, memoizeOne as S, validatePackage as Oe, shouldShowValidationUI as Pe, setScrollbarWidth as ae, getter as Ve, classNames as F, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
+import { tableKeyboardNavigation as x, getSelectionOptions as le, mapColumns as We, ClipboardService as Be, TableKeyboardNavigationContext as U, isRtl as $e, tableKeyboardNavigationTools as N, tableColumnsVirtualization as je, Pager as qe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Xe, updateRight as Je } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as Qe } 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 ue, messages as nt } from "./messages/index.mjs";
+import { VirtualScroll as ht } from "./VirtualScroll.mjs";
+import { VirtualScrollFixed as ge } from "./VirtualScrollFixed.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 Ct } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as Rt } from "./GridNoRecords.mjs";
+import { operators as Ce } from "./filterCommon.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 St } from "./cells/GridDetailCell.mjs";
 import { GridDetailHierarchyCell as It } from "./cells/GridDetailHierarchyCell.mjs";
+import { SAFARI_REGEX as kt } from "./constants/index.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) => {
+    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.headTable = null, this.observer = null, this.handleIntersection = (e) => {
       const t = { rowIndex: this.rowIndex };
       e.forEach((i) => {
         i.isIntersecting || this.setCurrentOnTop(t);
@@ -78,8 +79,8 @@ const _ = class _ extends r.Component {
         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(), f = t !== void 0 && t > 0, R = i !== void 0 && i > 0, I = l === !0 || typeof l == "object" && l.enabled !== !1;
-      return !f || I && !d || !!(n && h) && (!R || !d) ? pt : me;
+      const { rowHeight: t, detailRowHeight: i, detail: n, expandField: h, groupable: l } = e, d = this.isAllData(), f = t !== void 0 && t > 0, R = i !== void 0 && i > 0, k = l === !0 || typeof l == "object" && l.enabled !== !1;
+      return !f || k && !d || !!(n && h) && (!R || !d) ? ht : ge;
     }, this.isAllData = () => {
       const { data: e, total: t } = this.props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -93,15 +94,15 @@ const _ = class _ extends r.Component {
         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 = fe ? Math.min(be, i) : i;
+        this.vs.containerHeight = me ? Math.min(fe, i) : i;
       } 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 me) {
+      if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ge) {
         const { rowHeight: i = 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 ae(e, i, l);
+        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 re(e, i, l);
         const d = this.vs.rowHeightService.totalHeight();
-        this.vs.containerHeight = fe ? Math.min(be, d) : d;
+        this.vs.containerHeight = me ? Math.min(fe, d) : d;
       }
     }, this.scrollHandler = (e) => {
       if (e.target !== e.currentTarget)
@@ -110,14 +111,14 @@ const _ = class _ extends r.Component {
       const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
       this.props.columnVirtualization && (!this.vs.scrollableVirtual || i === 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), Ke(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 && i !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ge(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = i;
     }, this.onKeyDown = (e) => {
       if (x.onKeyDown(e, {
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef,
         onNavigationAction: this.onNavigationAction
       }), this.props.onKeyDown) {
-        const { mode: t, cell: i } = ne(this.props.selectable), n = {
+        const { mode: t, cell: i } = le(this.props.selectable), n = {
           dataItems: this.getLeafDataItems(),
           mode: t,
           cell: i,
@@ -193,16 +194,18 @@ const _ = class _ extends r.Component {
       );
     }, this.selectionRelease = (e) => {
       if (this.props.onSelectionChange) {
-        const t = {
+        const t = this.getSlicedLeafDataItems()[e.startRowIndex], i = this.getSlicedLeafDataItems()[e.endRowIndex], n = {
           syntheticEvent: void 0,
           target: this,
           selectedField: this.props.selectedField || "",
           componentId: this._gridId,
           dataItems: this.getLeafDataItems(),
           dataItem: null,
+          startDataItem: t,
+          endDataItem: i,
           ...e
         };
-        this.props.onSelectionChange.call(void 0, t);
+        this.props.onSelectionChange.call(void 0, n);
       }
     }, this.pageChange = (e, t, i) => {
       this.raiseDataEvent(
@@ -255,7 +258,7 @@ const _ = class _ extends r.Component {
       var h, l, d;
       if (!V)
         return !1;
-      const e = Oe(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));
+      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, 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) => {
       this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
@@ -276,7 +279,7 @@ const _ = class _ extends r.Component {
       const d = this.getVirtualScroll(this.props);
       this.vs = new d(l);
     }), this.flatData = S((e, t, i, n, h, l, d) => {
-      const f = [], R = ut(
+      const f = [], R = ct(
         f,
         e,
         t,
@@ -285,16 +288,16 @@ const _ = class _ extends r.Component {
         h
       );
       return { flattedData: f, resolvedGroupsCount: R };
-    }), this.rowHeightService = S((e, t, i, n, h) => new ae(t, i, n, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
+    }), this.rowHeightService = S((e, t, i, n, h) => new re(t, i, n, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
       (e, t, i) => {
         const n = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
-        return gt(n, this.columns, { prevId: 0, idPrefix: t });
+        return ut(n, this.columns, { prevId: 0, idPrefix: t });
       }
     ), this.mapColumns = S(
-      (e, t) => Be(e, t)
+      (e, t) => We(e, t)
     ), this.configureColumns = S((e, t, i) => {
       this.props.selectedField && e.filter((l) => l.field === this.props.selectedField).forEach((l) => {
-        l.width = l.width || "50px", l.cell = l.cell || Ye, l.headerCell = l.headerCell || Rt;
+        l.width = l.width || "50px", l.cell = l.cell || Qe, l.headerCell = l.headerCell || Ct;
       });
       const n = {
         id: "",
@@ -318,7 +321,7 @@ const _ = class _ extends r.Component {
       let h = 0;
       this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
         ...n,
-        cell: Ze,
+        cell: Ye,
         field: this.props.expandField,
         headerClassName: "k-hierarchy-cell k-header"
       }), h++);
@@ -326,13 +329,13 @@ const _ = class _ extends r.Component {
         e.unshift({
           ...n,
           isAccessible: !1,
-          cell: Ce,
+          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, f, R, I, z, C) => /* @__PURE__ */ r.createElement(
-      st,
+    }), this.getHeaderRow = S((e, t, i, n, h, l, d, f, R, k, z, C) => /* @__PURE__ */ r.createElement(
+      tt,
       {
         cells: this.props.cells,
         sort: e,
@@ -347,7 +350,7 @@ const _ = class _ extends r.Component {
         filterChange: this.filterChange,
         columnMenu: R,
         selectionChange: this.onHeaderSelectionChange,
-        columns: I,
+        columns: k,
         columnResize: this.columnResize,
         pressHandler: this.dragLogic.pressHandler,
         dragHandler: this.dragLogic.dragHandler,
@@ -364,13 +367,13 @@ const _ = class _ extends r.Component {
     )), 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), Pe(ye), this.showLicenseWatermark = Ve(ye);
+    }, 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), 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 ct(
+    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 dt(this.onResize), this.props.clipboard && (this.clipboardService = new $e(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,
@@ -419,7 +422,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 mt(a);
+    return gt(a);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -441,8 +444,8 @@ const _ = class _ extends r.Component {
    * @hidden
    */
   componentDidMount() {
-    this.resetTableWidth(), le();
-    const a = je(this.element);
+    navigator.userAgent.match(kt) || (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), ae();
+    const a = $e(this.element);
     this.isRtl = a, x.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
@@ -468,7 +471,7 @@ const _ = class _ extends r.Component {
    * @hidden
    */
   componentDidUpdate() {
-    this.resetTableWidth(), le(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), x.onComponentDidUpdate({
+    this.resetTableWidth(), ae(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), x.onComponentDidUpdate({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -484,9 +487,9 @@ const _ = class _ extends r.Component {
    * @hidden
    */
   render() {
-    var oe;
+    var ie;
     let a = this.props.total || 0;
-    const p = N.getIdPrefix(this.navigationStateRef), c = at(this);
+    const p = N.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", i = this.props.scrollable === "virtual", { resolvedGroupsCount: n, flattedData: h } = this.flatData(
@@ -505,8 +508,8 @@ const _ = class _ extends r.Component {
     this.initializeVirtualization(a, l);
     const f = this.childrenToArray(this.props.children);
     this.initColumns(f, n);
-    const R = f.map((o) => o && o.type && o.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(o, { ...o.props, ariaControls: this._gridId }) : null), I = f.filter((o) => o && o.type && o.type.displayName === "KendoReactGridNoRecords"), z = f.filter((o) => o && o.type && o.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((o) => o.children.length === 0), $ = l && /* @__PURE__ */ r.createElement(
-      ot,
+    const R = f.map((s) => s && s.type && s.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(s, { ...s.props, ariaControls: this._gridId }) : null), k = f.filter((s) => s && s.type && s.type.displayName === "KendoReactGridNoRecords"), z = f.filter((s) => s && s.type && s.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((s) => s.children.length === 0), $ = l && /* @__PURE__ */ r.createElement(
+      it,
       {
         group: this.props.group || [],
         groupChange: this.groupChange,
@@ -518,8 +521,8 @@ const _ = class _ extends r.Component {
         ariaControls: this._gridId,
         onContextMenu: this.onContextMenu
       }
-    ), { sort: we, sortable: Se, group: ke, filter: Ie, filterable: Ee, filterOperators: xe = Re, headerCellRender: _e, columnMenu: ze } = this.props, j = /* @__PURE__ */ r.createElement(
-      tt,
+    ), { sort: ye, sortable: we, group: Se, filter: Ie, filterable: ke, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e } = this.props, j = /* @__PURE__ */ r.createElement(
+      et,
       {
         size: this.props.size,
         columnResize: this.columnResize,
@@ -529,27 +532,27 @@ const _ = class _ extends r.Component {
         ref: this.headerRef,
         elemRef: this.headerElementRef,
         headerRow: this.getHeaderRow(
+          ye,
           we,
           Se,
-          ke,
           l,
           Ie,
+          ke,
           Ee,
           xe,
           _e,
-          ze,
           this._columns,
           this._columnsMap,
           this.isRtl
         ),
         filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
-          it,
+          st,
           {
             cells: this.props.cells,
             size: this.props.size,
             columns: this._columns,
             filter: this.props.filter,
-            filterOperators: this.props.filterOperators || Re,
+            filterOperators: this.props.filterOperators || Ce,
             filterChange: this.filterChange,
             sort: this.props.sort,
             cellRender: this.props.filterCellRender,
@@ -557,33 +560,33 @@ const _ = class _ extends r.Component {
             ariaRowIndex: this._columnsMap.length + 1
           }
         ) || void 0,
-        cols: C.map((o, g) => /* @__PURE__ */ r.createElement(
+        cols: C.map((s, g) => /* @__PURE__ */ r.createElement(
           "col",
           {
             key: g.toString(),
-            width: W(o)
+            width: W(s)
           }
         ))
       }
-    ), De = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, He = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: Te, hiddenColumns: Le } = qe({
+    ), 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: C,
-      tableViewPortWidth: He,
-      scrollLeft: De
-    }), Fe = (o, g, m) => {
+      tableViewPortWidth: De,
+      scrollLeft: ze
+    }), Le = (s, g, m) => {
       let E = !1;
-      const k = this.props.selectedField ? ve(this.props.selectedField, o.dataItem) : void 0;
+      const I = this.props.selectedField ? be(this.props.selectedField, s.dataItem) : void 0;
       return {
         row: C.map((u, b) => {
-          if (Le[b])
+          if (Te[b])
             return null;
           const H = u.id ? u.id : b, T = `${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 v = ve(this.props.editField, o.dataItem);
+            const v = be(this.props.editField, s.dataItem);
             v && (v === !0 || v === u.field) && (E = !0, w = !0);
           }
-          const P = u.cell || w && et || vt, L = this.props.expandField && this.props.detail && u.field === this.props.expandField;
+          const P = u.cell || w && Ze || bt, L = this.props.expandField && this.props.detail && u.field === this.props.expandField;
           return /* @__PURE__ */ r.createElement(
             P,
             {
@@ -595,63 +598,63 @@ const _ = class _ extends r.Component {
                 p,
                 L ? "nodata" : "cell"
               ),
-              colSpan: Te[b],
-              dataItem: o.dataItem,
+              colSpan: He[b],
+              dataItem: s.dataItem,
               field: u.field,
               editor: u.editor,
               format: u.format,
               className: T,
               render: this.props.cellRender,
-              cells: bt(this.props.cells, u.cells),
+              cells: ft(this.props.cells, u.cells),
               onChange: this.itemChange,
               selectionChange: this.props.onSelectionChange ? (v) => {
-                this.selectionChange({ event: v, dataItem: o.dataItem, dataIndex: m, columnIndex: b });
+                this.selectionChange({ event: v, dataItem: s.dataItem, dataIndex: m, columnIndex: b });
               } : void 0,
               columnIndex: b,
               columnsCount: C.length,
-              rowType: o.rowType,
-              level: o.level,
-              expanded: o.expanded,
-              dataIndex: o.dataIndex,
+              rowType: s.rowType,
+              level: s.level,
+              expanded: s.expanded,
+              dataIndex: s.dataIndex,
               style: y,
               ariaColumnIndex: u.ariaColumnIndex,
-              isSelected: Array.isArray(k) && k.indexOf(b) > -1
+              isSelected: Array.isArray(I) && I.indexOf(b) > -1
             }
           );
         }),
         isInEdit: E,
-        isSelected: typeof k == "boolean" && k
+        isSelected: typeof I == "boolean" && I
       };
     };
     let q = 0;
     if (i)
-      for (let o = 0; o < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); o++) {
+      for (let s = 0; s < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); s++) {
         const g = this._data.shift();
         if (g)
-          this._data.push(g), q++, g.rowType === "groupHeader" && o--;
+          this._data.push(g), q++, g.rowType === "groupHeader" && s--;
         else
           break;
       }
-    const J = (o) => o >= this._data.length - q;
-    let Q = this.vs.realSkip || 0;
+    const X = (s) => s >= this._data.length - q;
+    let J = this.vs.realSkip || 0;
     const A = [];
     let K = !1;
     const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
     let D = 0;
     if (this._data.length) {
-      let o = -1, g = 0;
+      let s = -1, g = 0;
       (this._slicedData || this._data).forEach((m, E) => {
-        m.rowType === "data" && (Q++, o++);
-        const k = Q % 2 === 0, u = this.props.dataItemKey && Ue(this.props.dataItemKey)(m.dataItem), b = E + (this.vs.realSkip || 0), H = u || "ai" + b, T = H + "_1", y = Fe(m, H, o);
+        m.rowType === "data" && (J++, s++);
+        const I = J % 2 === 0, u = this.props.dataItemKey && Ve(this.props.dataItemKey)(m.dataItem), b = E + (this.vs.realSkip || 0), H = u || "ai" + b, T = H + "_1", y = Le(m, H, s);
         if (D = b + O + g, A.push(/* @__PURE__ */ r.createElement(
-          Ct,
+          vt,
           {
             key: H,
             dataItem: m.dataItem,
-            isAltRow: k,
+            isAltRow: I,
             isInEdit: y.isInEdit,
             rowType: m.rowType,
-            isHidden: J(E),
+            isHidden: X(E),
             onClick: (w) => this.rowClick(w, m),
             onDoubleClick: (w) => this.rowDblClick(w, m),
             selectedField: this.props.selectedField,
@@ -659,7 +662,7 @@ const _ = class _ extends r.Component {
             render: this.props.rowRender,
             ariaRowIndex: D,
             absoluteRowIndex: b,
-            dataIndex: this.vs.scrollableVirtual ? b : o,
+            dataIndex: this.vs.scrollableVirtual ? b : s,
             isSelected: y.isSelected
           },
           y.row
@@ -671,24 +674,24 @@ const _ = class _ extends r.Component {
               key: T,
               className: F(
                 "k-table-row",
-                k ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
+                I ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
               ),
-              style: { visibility: J(E) ? "hidden" : "", height: this.props.detailRowHeight },
+              style: { visibility: X(E) ? "hidden" : "", height: this.props.detailRowHeight },
               role: "row",
               "aria-rowindex": D
             },
             this.props.group && this.props.group.map((P, L) => {
-              var re;
-              const v = (re = y == null ? void 0 : y.row[L]) == null ? void 0 : re.props.style, Ge = v ? this.isRtl ? { left: v.right, right: v.left } : { left: v.left, right: v.right } : {};
+              var oe;
+              const v = (oe = y == null ? void 0 : y.row[L]) == null ? void 0 : oe.props.style, Me = v ? this.isRtl ? { left: v.right, right: v.left } : { left: v.left, right: v.right } : {};
               return /* @__PURE__ */ r.createElement(
-                Ce,
+                ve,
                 {
                   id: "",
                   dataIndex: m.dataIndex,
                   field: P.field,
                   dataItem: m.dataItem,
                   key: L,
-                  style: Ge,
+                  style: Me,
                   ariaColumnIndex: 1 + L,
                   isSelected: !1,
                   locked: this.props.lockGroups,
@@ -704,7 +707,7 @@ const _ = class _ extends r.Component {
               }
             ),
             /* @__PURE__ */ r.createElement(
-              kt,
+              St,
               {
                 onContextMenu: this.onContextMenu,
                 dataItem: m.dataItem,
@@ -720,38 +723,38 @@ const _ = class _ extends r.Component {
       });
     } else
       K = !0;
-    const Ne = () => {
-      const o = this._header;
-      return o && o.table.clientWidth;
-    }, X = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": O, style: { width: Ne() } }, /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template" }, I.length ? I : /* @__PURE__ */ r.createElement(yt, null))), Y = {
+    const Fe = () => {
+      const s = this._header;
+      return s && s.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" }, k.length ? k : /* @__PURE__ */ r.createElement(Rt, null))), Y = {
       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: nt,
-      ...St(this.props.pageable || {})
-    }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Y }) : /* @__PURE__ */ r.createElement(Je, { className: "k-grid-pager", ...Y }), Ae = (o) => this.props.sort && this.props.sort.filter((g) => g.field === o).length > 0, Me = (o, g) => /* @__PURE__ */ r.createElement(
+      messagesMap: lt,
+      ...wt(this.props.pageable || {})
+    }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Y }) : /* @__PURE__ */ r.createElement(qe, { className: "k-grid-pager", ...Y }), Ne = (s) => this.props.sort && this.props.sort.filter((g) => g.field === s).length > 0, Ae = (s, g) => /* @__PURE__ */ r.createElement(
       "col",
       {
         key: g.toString(),
-        width: W(o)
+        width: W(s)
       }
-    ), ee = (oe = this.props.cells) != null && oe.footerCell || this._columns.some(
-      (o) => {
+    ), ee = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
+      (s) => {
         var g;
-        return !!(o.footerCell || (g = o.cells) != null && g.footerCell);
+        return !!(s.footerCell || (g = s.cells) != null && g.footerCell);
       }
     ) ? /* @__PURE__ */ r.createElement(
-      rt,
+      ot,
       {
         size: this.props.size,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
-        ref: (o) => this._footer = o,
+        ref: (s) => this._footer = s,
         row: /* @__PURE__ */ r.createElement(
-          wt,
+          yt,
           {
             cells: this.props.cells,
             columns: this._columns,
@@ -759,26 +762,26 @@ const _ = class _ extends r.Component {
             ariaRowIndex: D + 1
           }
         ),
-        cols: C.map(Me)
+        cols: C.map(Ae)
       }
     ) : null, te = /* @__PURE__ */ r.createElement(
       "colgroup",
       {
-        ref: (o) => {
-          this.columnResize.colGroupMain = o;
+        ref: (s) => {
+          this.columnResize.colGroupMain = s;
         }
       },
       C.map(
-        (o, g) => /* @__PURE__ */ r.createElement(
+        (s, g) => /* @__PURE__ */ r.createElement(
           "col",
           {
             key: g.toString(),
-            className: Ae(o.field) ? "k-sorted" : void 0,
-            width: W(o)
+            className: Ne(s.field) ? "k-sorted" : void 0,
+            width: W(s)
           }
         )
       )
-    ), se = this.dragLogic.reorderable || this.dragLogic.groupable, ie = this.props.columnVirtualization ? "block" : "table";
+    ), se = this.dragLogic.reorderable || this.dragLogic.groupable;
     if (this.props.scrollable === "none")
       return /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
         "div",
@@ -793,42 +796,43 @@ const _ = class _ extends r.Component {
             },
             this.props.className
           ),
-          ref: (o) => {
-            this._element = o;
+          ref: (s) => {
+            this._element = s;
           },
           "aria-label": this.props.ariaLabel,
           onKeyDown: this.onKeyDown,
           onFocus: this.onFocus,
-          ...he
+          ...ne
         },
         R,
         $,
         /* @__PURE__ */ r.createElement(
-          pe,
+          he,
           {
             selectable: this.props.selectable,
             onRelease: this.selectionRelease,
-            childRef: (o) => {
-              this.tableElement = o;
+            childRef: (s) => {
+              this.tableElement = s, this.headTable = s;
             }
           },
           /* @__PURE__ */ r.createElement(
             "table",
             {
+              ref: (s) => this.headTable = s,
               className: F(
                 "k-table k-grid-table",
                 { [`k-table-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
               ),
-              style: { userSelect: d, display: ie }
+              style: { userSelect: d }
             },
             te,
             j,
-            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...de }, A),
+            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...pe }, A),
             ee
           )
         ),
-        K && X(),
-        se && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(ce, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ue, { ref: this.dragLogic.refDragElementClue }))
+        K && Q(),
+        se && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ce, { ref: this.dragLogic.refDragElementClue }))
       ), z, this.props.pageable && Z);
     let M = this.props.style || {};
     return i && (M.height || (M = Object.assign({}, M, { height: "450px" }))), /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
@@ -845,13 +849,13 @@ const _ = class _ extends r.Component {
           },
           this.props.className
         ),
-        ref: (o) => {
-          this._element = o;
+        ref: (s) => {
+          this._element = s;
         },
         "aria-label": this.props.ariaLabel,
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,
-        ...he
+        ...ne
       },
       R,
       $,
@@ -863,7 +867,7 @@ const _ = class _ extends r.Component {
           "aria-colcount": C.length,
           "aria-rowcount": a,
           id: this._gridId,
-          "aria-label": c.toLanguageString(ge, ht[ge])
+          "aria-label": c.toLanguageString(ue, nt[ue])
         },
         j,
         /* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
@@ -875,17 +879,18 @@ const _ = class _ extends r.Component {
             role: "presentation"
           },
           /* @__PURE__ */ r.createElement("div", { className: "k-grid-table-wrap", role: "presentation" }, /* @__PURE__ */ r.createElement(
-            pe,
+            he,
             {
               selectable: this.props.selectable,
               onRelease: this.selectionRelease,
-              childRef: (o) => {
-                this.tableElement = o;
+              childRef: (s) => {
+                this.tableElement = s;
               }
             },
             /* @__PURE__ */ r.createElement(
               "table",
               {
+                ref: (s) => this.tableElement = s,
                 className: F(
                   "k-table k-grid-table",
                   {
@@ -894,7 +899,7 @@ const _ = class _ extends r.Component {
                   }
                 ),
                 role: "presentation",
-                style: { userSelect: d, display: ie }
+                style: { userSelect: d }
               },
               te,
               /* @__PURE__ */ r.createElement(
@@ -903,12 +908,12 @@ const _ = class _ extends r.Component {
                   className: "k-table-tbody",
                   ref: this.tableBodyRef,
                   role: "rowgroup",
-                  ...de
+                  ...pe
                 },
                 A
               )
             )
-          ), K && X()),
+          ), K && Q()),
           i && /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
             "div",
             {
@@ -917,8 +922,8 @@ const _ = class _ extends r.Component {
           ))
         )),
         ee,
-        se && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(ce, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ue, { ref: this.dragLogic.refDragElementClue })),
-        this.showLicenseWatermark && /* @__PURE__ */ r.createElement(We, null)
+        se && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ce, { ref: this.dragLogic.refDragElementClue })),
+        this.showLicenseWatermark && /* @__PURE__ */ r.createElement(Ue, null)
       ),
       z,
       this.props.pageable && Z
@@ -926,7 +931,7 @@ const _ = class _ extends r.Component {
   }
   selectionChange(a) {
     if (this.props.onSelectionChange) {
-      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: i, cell: n } = ne(this.props.selectable), h = {
+      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: i, cell: n } = le(this.props.selectable), h = {
         ...this.getArguments(p.syntheticEvent),
         dataItem: c,
         startColIndex: t,
@@ -974,7 +979,7 @@ const _ = class _ extends r.Component {
     }, 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, f) => d.orderIndex = f), this._columnsMutations++;
     const h = this._columns[a].locked && this._columns[p].locked;
-    Qe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Xe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    Xe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Je(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 = {
@@ -1018,7 +1023,7 @@ const _ = class _ extends r.Component {
   }
   initColumns(a, p) {
     const c = N.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 = ft(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;
+    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 {
@@ -1040,84 +1045,84 @@ const _ = class _ extends r.Component {
 _.displayName = "KendoReactGrid", _.defaultProps = {
   // never use this
 }, _.propTypes = {
-  data: s.oneOfType([
-    s.array,
-    s.shape({
-      data: s.array,
-      total: s.number
+  data: o.oneOfType([
+    o.array,
+    o.shape({
+      data: o.array,
+      total: o.number
     })
   ]),
-  sortable: s.oneOfType([
-    s.bool,
-    s.shape({
-      mode: s.oneOf(["single", "multiple"]),
-      allowUnsort: s.bool
+  sortable: o.oneOfType([
+    o.bool,
+    o.shape({
+      mode: o.oneOf(["single", "multiple"]),
+      allowUnsort: o.bool
     })
   ]),
-  onSortChange: s.func,
-  sort: s.array,
-  filterable: s.bool,
-  filter: s.any,
-  onFilterChange: s.func,
-  pageable: s.oneOfType([
-    s.bool,
-    s.shape({
-      buttonCount: s.number,
-      responsive: s.bool,
-      info: s.bool,
-      type: s.oneOf(["numeric", "input"]),
-      pageSizes: s.oneOfType(
+  onSortChange: o.func,
+  sort: o.array,
+  filterable: o.bool,
+  filter: o.any,
+  onFilterChange: o.func,
+  pageable: o.oneOfType([
+    o.bool,
+    o.shape({
+      buttonCount: o.number,
+      responsive: o.bool,
+      info: o.bool,
+      type: o.oneOf(["numeric", "input"]),
+      pageSizes: o.oneOfType(
         [
-          s.bool,
-          s.arrayOf(s.oneOfType([
-            s.string,
-            s.number
+          o.bool,
+          o.arrayOf(o.oneOfType([
+            o.string,
+            o.number
           ]))
         ]
       ),
-      previousNext: s.bool
+      previousNext: o.bool
     })
   ]),
-  pageSize: s.number,
-  onPageChange: s.func,
-  total: s.number,
-  skip: s.number,
-  take: s.number,
-  fixedScroll: s.bool,
-  onExpandChange: s.func,
-  expandField: s.string,
-  selectedField: s.string,
-  onSelectionChange: s.func,
-  onHeaderSelectionChange: s.func,
-  resizable: s.bool,
-  reorderable: s.bool,
-  group: s.any,
-  groupable: s.oneOfType([
-    s.bool,
-    s.shape({
-      enabled: s.bool,
-      footer: s.oneOf(["always", "visible", "none"])
+  pageSize: o.number,
+  onPageChange: o.func,
+  total: o.number,
+  skip: o.number,
+  take: o.number,
+  fixedScroll: o.bool,
+  onExpandChange: o.func,
+  expandField: o.string,
+  selectedField: o.string,
+  onSelectionChange: o.func,
+  onHeaderSelectionChange: o.func,
+  resizable: o.bool,
+  reorderable: o.bool,
+  group: o.any,
+  groupable: o.oneOfType([
+    o.bool,
+    o.shape({
+      enabled: o.bool,
+      footer: o.oneOf(["always", "visible", "none"])
     })
   ]),
-  onGroupChange: s.func,
-  onRowClick: s.func,
-  onRowDoubleClick: s.func,
-  onItemChange: s.func,
-  editField: s.string,
-  scrollable: s.oneOf(["none", "scrollable", "virtual"]),
-  rowHeight: s.number,
-  detailRowHeight: s.number,
-  detail: s.any,
-  style: s.object,
-  onDataStateChange: s.func,
-  onColumnResize: s.func,
-  onColumnReorder: s.func,
-  dataItemKey: s.string,
-  navigatable: s.bool,
-  size: s.oneOf(["small", "medium"])
+  onGroupChange: o.func,
+  onRowClick: o.func,
+  onRowDoubleClick: o.func,
+  onItemChange: o.func,
+  editField: o.string,
+  scrollable: o.oneOf(["none", "scrollable", "virtual"]),
+  rowHeight: o.number,
+  detailRowHeight: o.number,
+  detail: o.any,
+  style: o.object,
+  onDataStateChange: o.func,
+  onColumnResize: o.func,
+  onColumnReorder: o.func,
+  dataItemKey: o.string,
+  navigatable: o.bool,
+  size: o.oneOf(["small", "medium"])
 }, _.contextType = U;
 let B = _;
-lt(B);
+at(B);
 export {
   B as Grid
 };