@progress/kendo-react-grid 8.2.0-develop.24 → 8.2.0-develop.27

package/Grid.mjs

@@ -9,7 +9,7 @@
 import * as r from "react";
 import o from "prop-types";
 import { RowHeightService as re, getScrollbarWidth as Pe, dispatchEvent as Ge, canUseDOM as N, getActiveElement as Ke, memoizeOne as E, validatePackage as We, shouldShowValidationUI as Ve, setScrollbarWidth as ae, getter as Be, classNames as L, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
-import { tableKeyboardNavigationTools as I, tableKeyboardNavigation as x, getSelectionOptions as le, mapColumns as $e, ClipboardService as je, TableKeyboardNavigationContext as V, isRtl as qe, tableColumnsVirtualization as Je, Pager as Xe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Ye, updateRight as Qe, KEYBOARD_NAV_DATA_ID as Ze } from "@progress/kendo-react-data-tools";
+import { tableKeyboardNavigation as _, getSelectionOptions as le, mapColumns as $e, ClipboardService as je, TableKeyboardNavigationContext as V, isRtl as qe, tableKeyboardNavigationTools as x, tableColumnsVirtualization as Je, Pager as Xe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Ye, updateRight as Qe, KEYBOARD_NAV_DATA_ID as Ze } from "@progress/kendo-react-data-tools";
 import { GridSelectionCell as et } from "./cells/GridSelectionCell.mjs";
 import { GridHierarchyCell as tt } from "./cells/GridHierarchyCell.mjs";
 import { GridEditCell as st } from "./cells/GridEditCell.mjs";
@@ -38,8 +38,8 @@ import { GridDetailCell as kt } from "./cells/GridDetailCell.mjs";
 import { GridDetailHierarchyCell as _t } from "./cells/GridDetailHierarchyCell.mjs";
 import { SAFARI_REGEX as xt } from "./constants/index.mjs";
 const z = class z extends r.Component {
-  constructor(l) {
-    super(l), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !1, this._singleEditRow = !1, this._shouldUpdateLeftRight = !0, this._scrollbarWidth = void 0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.headTable = null, this.rowsInEdit = [], this.observer = null, this.handleIntersection = (e) => {
+  constructor(a) {
+    super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !1, this._singleEditRow = !1, this._shouldUpdateLeftRight = !0, this._scrollbarWidth = void 0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.headTable = null, this.rowsInEdit = [], this.observer = null, this.handleIntersection = (e) => {
       const t = { rowIndex: this.rowIndex };
       e.forEach((s) => {
         s.isIntersecting || this.setCurrentOnTop(t);
@@ -62,28 +62,28 @@ const z = class z extends r.Component {
       const { rowIndex: t } = e, s = this.element;
       if (this.observer && s) {
         this.observer.disconnect();
-        const a = s.querySelector(`[absolute-row-index="${t}"]`);
-        a ? this.observer.observe(a) : this.setCurrentOnTop(e);
+        const l = s.querySelector(`[absolute-row-index="${t}"]`);
+        l ? this.observer.observe(l) : this.setCurrentOnTop(e);
       }
     }, this.fitColumns = (e) => {
       this.columnResize.dblClickHandler(null, e);
     }, this.getColumnsEssentialProps = (e) => JSON.stringify(e.map((t) => ({ id: t.id, field: t.field, title: t.title, children: t.children }))), this.checkMatchMediaColumnsDifferece = () => {
-      const e = this.childrenToArray(this.props.children), t = I.getIdPrefix(this.navigationStateRef), s = this.filterHiddenColumns(e);
-      return this.getColumnsEssentialProps(this.readColumns(s, t, this._columnsMutations)) === this.getColumnsEssentialProps(this._columns);
+      const e = this.childrenToArray(this.props.children);
+      return this.getColumnsEssentialProps(e) === this.getColumnsEssentialProps(this._columns);
     }, this.onContextMenu = (e, t, s) => {
       if (this.props.onContextMenu) {
-        const a = {
+        const l = {
           target: this,
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           dataItem: t,
           field: s
         };
-        this.props.onContextMenu.call(void 0, a);
+        this.props.onContextMenu.call(void 0, l);
       }
     }, this.getVirtualScroll = (e) => {
-      const { rowHeight: t, detailRowHeight: s, detail: a, expandField: h, groupable: n } = e, d = this.isAllData(), f = t !== void 0 && t > 0, R = s !== void 0 && s > 0, k = n === !0 || typeof n == "object" && n.enabled !== !1;
-      return !f || k && !d || !!(a && h) && (!R || !d) ? ct : ge;
+      const { rowHeight: t, detailRowHeight: s, detail: l, expandField: h, groupable: n } = e, d = this.isAllData(), f = t !== void 0 && t > 0, R = s !== void 0 && s > 0, I = n === !0 || typeof n == "object" && n.enabled !== !1;
+      return !f || I && !d || !!(l && h) && (!R || !d) ? ct : ge;
     }, this.isAllData = () => {
       const { data: e, total: t } = this.props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -101,9 +101,9 @@ const z = class z extends r.Component {
       } 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 ge) {
-        const { rowHeight: s = 0, detail: a, expandField: h } = this.props;
+        const { rowHeight: s = 0, detail: l, expandField: h } = this.props;
         let { detailRowHeight: n = 0 } = this.props;
-        n = a && h ? n : s, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, s, n, this._data)) : this.vs.rowHeightService = new re(e, s, n);
+        n = l && h ? n : s, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, s, n, this._data)) : this.vs.rowHeightService = new re(e, s, n);
         const d = this.vs.rowHeightService.totalHeight();
         this.vs.containerHeight = me ? Math.min(fe, d) : d;
       }
@@ -116,13 +116,14 @@ const z = class z extends r.Component {
         this.forceUpdate();
       }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && s !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ge(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = s;
     }, this.onKeyDown = (e) => {
-      if (x.onKeyDown(e, {
+      if (_.onKeyDown(e, {
         navigatable: this.props.navigatable || !1,
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef,
-        onNavigationAction: this.onNavigationAction
+        onNavigationAction: this.onNavigationAction,
+        columns: this.columns
       }), this.props.onKeyDown) {
-        const { mode: t, cell: s } = le(this.props.selectable), a = {
+        const { mode: t, cell: s } = le(this.props.selectable), l = {
           dataItems: this.getLeafDataItems(),
           mode: t,
           cell: s,
@@ -130,10 +131,10 @@ const z = class z extends r.Component {
           selectedField: this.props.selectedField,
           ...this.getArguments(e)
         };
-        this.props.onKeyDown.call(void 0, a);
+        this.props.onKeyDown.call(void 0, l);
       }
     }, this.onFocus = (e) => {
-      x.onFocus(e, {
+      _.onFocus(e, {
         contextStateRef: this.contextStateRef
       });
     }, this.onNavigationAction = (e) => {
@@ -206,7 +207,7 @@ const z = class z extends r.Component {
       );
     }, this.selectionRelease = (e) => {
       if (this.props.onSelectionChange) {
-        const t = this.getSlicedLeafDataItems()[e.startRowIndex], s = this.getSlicedLeafDataItems()[e.endRowIndex], a = {
+        const t = this.getSlicedLeafDataItems()[e.startRowIndex], s = this.getSlicedLeafDataItems()[e.endRowIndex], l = {
           syntheticEvent: void 0,
           target: this,
           selectedField: this.props.selectedField || "",
@@ -217,7 +218,7 @@ const z = class z extends r.Component {
           endDataItem: s,
           ...e
         };
-        this.props.onSelectionChange.call(void 0, a);
+        this.props.onSelectionChange.call(void 0, l);
       }
     }, this.pageChange = (e, t, s) => {
       this.raiseDataEvent(
@@ -231,8 +232,8 @@ const z = class z extends r.Component {
       let e = this.props.total || 0;
       return Array.isArray(this.props.data) ? e = e || this.props.data.length : this.props.data && (e = e || this.props.data.total), e;
     }, this.moveToNextPage = (e) => {
-      const t = this.props.take || 0, s = (this.props.skip || 0) + t, a = this.getTotal();
-      s < a && this.pageChange({ skip: s, take: t }, e);
+      const t = this.props.take || 0, s = (this.props.skip || 0) + t, l = this.getTotal();
+      s < l && this.pageChange({ skip: s, take: t }, e);
     }, this.moveToPrevPage = (e) => {
       const t = this.props.take || 0, s = (this.props.skip || 0) - t;
       s >= 0 && this.pageChange({ skip: s, take: t }, e);
@@ -279,14 +280,14 @@ const z = class z extends r.Component {
       var h, n, d;
       if (!N)
         return !1;
-      const e = Ke(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (n = this.document) == null ? void 0 : n.body, s = t.closest(".k-grid-container"), a = t && ((d = this._element) == null ? void 0 : d.contains(t));
-      return !!(t && a && s);
-    }, this.onResize = (e, t, s, a, h, n) => {
+      const e = Ke(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (n = this.document) == null ? void 0 : n.body, s = t.closest(".k-grid-container"), l = t && ((d = this._element) == null ? void 0 : d.contains(t));
+      return !!(t && l && s);
+    }, this.onResize = (e, t, s, l, h, n) => {
       this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
         void 0,
         {
           columns: this.columns,
-          nativeEvent: a,
+          nativeEvent: l,
           targetColumnId: n,
           index: e,
           newWidth: t,
@@ -295,44 +296,32 @@ const z = class z extends r.Component {
           target: this
         }
       );
-    }, this.reInitVirtualization = E((e, t, s, a, h, n) => {
+    }, this.reInitVirtualization = E((e, t, s, l, h, n) => {
       this.vs.reset();
       const d = this.getVirtualScroll(this.props);
       this.vs = new d(n);
-    }), this.flatData = E((e, t, s, a, h, n, d) => {
+    }), this.flatData = E((e, t, s, l, h, n, d) => {
       const f = [], R = mt(
         f,
         e,
         t,
         { index: s },
-        a !== void 0,
+        l !== void 0,
         h
       );
       return { flattedData: f, resolvedGroupsCount: R };
-    }), this.rowHeightService = E((e, t, s, a, h) => new re(t, s, a, h)), this.childrenToArray = E((e) => r.Children.toArray(e)), this.readColumns = E(
+    }), this.rowHeightService = E((e, t, s, l, h) => new re(t, s, l, h)), this.childrenToArray = E((e) => r.Children.toArray(e)), this.readColumns = E(
       (e, t, s) => {
-        const a = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
-        return ft(a, this.columns, { prevId: 0, idPrefix: t });
+        const l = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
+        return ft(l, this.columns, { prevId: 0, idPrefix: t });
       }
     ), this.mapColumns = E(
       (e, t) => $e(e, !0)
-    ), this.filterHiddenColumns = (e) => {
-      const t = (s) => {
-        const a = s;
-        return {
-          ...a,
-          props: {
-            ...a.props,
-            children: a.props.children && a.props.children.length > 0 ? this.filterHiddenColumns(a.props.children) : a.props.children
-          }
-        };
-      };
-      return [...e].filter((s) => r.isValidElement(s) && !s.props.hidden).filter((s) => N && s && r.isValidElement(s) && s.props.media ? window.matchMedia(s.props.media).matches : s).map((s) => t(s));
-    }, this.configureColumns = E((e, t, s) => {
+    ), this.filterColumnsByMediaProp = (e) => e.filter((t) => N && t && t.media ? window.matchMedia(t.media).matches : t), this.configureColumns = E((e, t, s) => {
       this.props.selectedField && e.filter((n) => n.field === this.props.selectedField).forEach((n) => {
         n.width = n.width || "50px", n.cell = n.cell || et, n.headerCell = n.headerCell || yt;
       });
-      const a = {
+      const l = {
         id: "",
         resizable: !0,
         width: "32px",
@@ -353,21 +342,21 @@ const z = class z extends r.Component {
       };
       let h = 0;
       this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
-        ...a,
+        ...l,
         cell: tt,
         field: this.props.expandField,
         headerClassName: "k-hierarchy-cell k-header"
       }), h++);
       for (let n = 0; n < t; n++)
         e.unshift({
-          ...a,
+          ...l,
           isAccessible: !1,
           cell: ve,
           field: "value",
           locked: this.props.lockGroups
         }), h++;
       e.slice(h).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += h));
-    }), this.getHeaderRow = E((e, t, s, a, h, n, d, f, R, k, T, C, M) => /* @__PURE__ */ r.createElement(
+    }), this.getHeaderRow = E((e, t, s, l, h, n, d, f, R, I, T, C, M) => /* @__PURE__ */ r.createElement(
       ot,
       {
         cells: this.props.cells,
@@ -375,14 +364,14 @@ const z = class z extends r.Component {
         sortable: t,
         sortChange: this.sortChange,
         group: s || [],
-        groupable: a,
+        groupable: l,
         groupChange: this.groupChange,
         filter: h,
         filterable: n,
         filterOperators: d,
         filterChange: this.filterChange,
         columnMenu: R,
-        columnMenuIcon: k,
+        columnMenuIcon: I,
         selectionChange: this.onHeaderSelectionChange,
         columns: T,
         columnResize: this.columnResize,
@@ -399,23 +388,23 @@ const z = class z extends r.Component {
         columnGroupChange: this.columnGroupChange
       }
     )), this.resolveTitle = (e) => {
-      const t = this._columns.find((a) => a.field === e), s = t && (t.title || t.field);
+      const t = this._columns.find((l) => l.field === e), s = t && (t.title || t.field);
       return s === void 0 ? e : s;
     }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), this.getSlicedLeafDataItems = () => (this._slicedData || this._data).filter((e) => e.rowType === "data").map((e) => e.dataItem), this.handleFocusInEditableRows = () => {
       var e, t, s;
       if (this.tableBodyRef.current && ((e = this.tableBodyRef.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
         this._singleEditRow = !1, (t = document.activeElement) != null && t.closest(".k-grid-edit-row") ? this._lastActiveElement = document.activeElement : this._lastActiveElement = void 0;
-        const a = Array.from((s = this.tableBodyRef.current) == null ? void 0 : s.getElementsByClassName("k-grid-edit-row"));
-        a.length > this.rowsInEdit.length ? this._newEditableRow = a.filter((h) => !this.rowsInEdit.includes(h))[0] : a.length === 1 && (this._newEditableRow = a[0], this._singleEditRow = !0), this.rowsInEdit = a;
+        const l = Array.from((s = this.tableBodyRef.current) == null ? void 0 : s.getElementsByClassName("k-grid-edit-row"));
+        l.length > this.rowsInEdit.length ? this._newEditableRow = l.filter((h) => !this.rowsInEdit.includes(h))[0] : l.length === 1 && (this._newEditableRow = l[0], this._singleEditRow = !0), this.rowsInEdit = l;
       }
     }, We(Re), this.showLicenseWatermark = Ve(Re);
-    const p = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(l);
-    this.vs = new c(p || l.rowHeight === void 0 || l.rowHeight === 0), this.dragLogic = new gt(
+    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 gt(
       this.columnReorder.bind(this),
       this.groupReorder.bind(this),
       this.columnToGroup.bind(this)
-    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ut(this.onResize), this.props.clipboard && (this.clipboardService = new je(this.onClipboard)), x.onConstructor({
-      navigatable: !!l.navigatable,
+    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ut(this.onResize), this.props.clipboard && (this.clipboardService = new je(this.onClipboard)), _.onConstructor({
+      navigatable: !!a.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
       idPrefix: this._gridId
@@ -462,8 +451,8 @@ const z = class z extends r.Component {
    */
   // tslint:enable:max-line-length
   get columns() {
-    const l = this._columns.filter((p) => p.declarationIndex >= 0 && p.parentIndex === -1);
-    return bt(l);
+    const a = this._columns.filter((p) => p.declarationIndex >= 0 && p.parentIndex === -1);
+    return bt(a);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -487,8 +476,8 @@ const z = class z extends r.Component {
   componentDidMount() {
     var c;
     this.props.columnVirtualization && !navigator.userAgent.match(xt) && (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), ae(this.getCachedScrollbarWidth());
-    const l = qe(this.element);
-    this.isRtl = l, x.onComponentDidMount({
+    const a = qe(this.element);
+    this.isRtl = a, _.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -503,7 +492,7 @@ const z = class z extends r.Component {
    * @hidden
    */
   getSnapshotBeforeUpdate() {
-    return x.onGetSnapshotBeforeUpdate({
+    return _.onGetSnapshotBeforeUpdate({
       document: this.document,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -513,33 +502,34 @@ const z = class z extends r.Component {
    * @hidden
    */
   componentDidUpdate() {
-    this.resetTableWidth(), ae(this.getCachedScrollbarWidth()), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), this.handleFocusInEditableRows(), x.onComponentDidUpdate({
+    this.resetTableWidth(), ae(this.getCachedScrollbarWidth()), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), this.handleFocusInEditableRows(), _.onComponentDidUpdate({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
       focusFirst: this._focusFirst,
       newEditableRow: this._newEditableRow,
       singleEditRow: this._singleEditRow,
-      lastActiveElement: this._lastActiveElement
+      lastActiveElement: this._lastActiveElement,
+      navigatable: this.props.navigatable
     }), this._focusFirst = !1, this._newEditableRow = void 0;
   }
   /**
    * @hidden
    */
   componentWillUnmount() {
-    var l;
-    clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document), (l = this.document) != null && l.body && this.resizeObserver && this.resizeObserver.disconnect();
+    var a;
+    clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document), (a = this.document) != null && a.body && this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
    */
   render() {
     var ie;
-    let l = this.props.total || 0;
-    const p = I.getIdPrefix(this.navigationStateRef), c = nt(this);
+    let a = this.props.total || 0;
+    const p = x.getIdPrefix(this.navigationStateRef), c = nt(this);
     let e = [];
-    Array.isArray(this.props.data) ? (e = this.props.data, l = l || this.props.data.length) : this.props.data && (e = this.props.data.data, l = l || this.props.data.total);
-    const t = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", s = this.props.scrollable === "virtual", { resolvedGroupsCount: a, flattedData: h } = this.flatData(
+    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", s = this.props.scrollable === "virtual", { resolvedGroupsCount: l, flattedData: h } = this.flatData(
       e,
       t,
       this.props.skip || 0,
@@ -552,10 +542,10 @@ const z = class z extends r.Component {
     const n = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
     this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = n;
     const d = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
-    this.initializeVirtualization(l, n);
+    this.initializeVirtualization(a, n);
     const f = this.childrenToArray(this.props.children);
-    this.initColumns(f, a);
-    const R = f.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), k = f.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), T = f.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((i) => i.children.length === 0), M = n && /* @__PURE__ */ r.createElement(
+    this.initColumns(f, l);
+    const R = f.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), I = f.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), T = f.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((i) => i.children.length === 0), M = n && /* @__PURE__ */ r.createElement(
       at,
       {
         group: this.props.group || [],
@@ -623,7 +613,7 @@ const z = class z extends r.Component {
       tableViewPortWidth: De,
       scrollLeft: Te
     }), Fe = (i, g, m) => {
-      let _ = !1;
+      let k = !1;
       const S = this.props.selectedField ? be(this.props.selectedField, i.dataItem) : void 0;
       return {
         row: C.map((u, b) => {
@@ -633,7 +623,7 @@ const z = class z extends r.Component {
           let y = !1;
           if (u.editable && this.props.editField) {
             const v = be(this.props.editField, i.dataItem);
-            v && (v === !0 || v === u.field) && (_ = !0, y = !0);
+            v && (v === !0 || v === u.field) && (k = !0, y = !0);
           }
           const W = u.cell || y && st || Rt, F = this.props.expandField && this.props.detail && u.field === this.props.expandField;
           return /* @__PURE__ */ r.createElement(
@@ -642,7 +632,7 @@ const z = class z extends r.Component {
               onContextMenu: this.onContextMenu,
               key: H,
               locked: this.props.lockGroups,
-              id: I.generateNavigatableId(
+              id: x.generateNavigatableId(
                 `${g}-${String(b)}`,
                 p,
                 F || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
@@ -671,7 +661,7 @@ const z = class z extends r.Component {
             }
           );
         }),
-        isInEdit: _,
+        isInEdit: k,
         isSelected: typeof S == "boolean" && S
       };
     };
@@ -692,9 +682,9 @@ const z = class z extends r.Component {
     let D = 0;
     if (this._data.length) {
       let i = -1, g = 0;
-      (this._slicedData || this._data).forEach((m, _) => {
+      (this._slicedData || this._data).forEach((m, k) => {
         m.rowType === "data" && (J++, i++);
-        const S = J % 2 === 0, u = this.props.dataItemKey && Be(this.props.dataItemKey)(m.dataItem), b = _ + (this.vs.realSkip || 0), H = u || "ai" + b, A = H + "_1", w = Fe(m, H, i);
+        const S = J % 2 === 0, u = this.props.dataItemKey && Be(this.props.dataItemKey)(m.dataItem), b = k + (this.vs.realSkip || 0), H = u || "ai" + b, A = H + "_1", w = Fe(m, H, i);
         if (D = b + X + g, O.push(/* @__PURE__ */ r.createElement(
           wt,
           {
@@ -703,7 +693,7 @@ const z = class z extends r.Component {
             isAltRow: S,
             isInEdit: w.isInEdit,
             rowType: m.rowType,
-            isHidden: q(_),
+            isHidden: q(k),
             onClick: (y) => this.rowClick(y, m),
             onDoubleClick: (y) => this.rowDblClick(y, m),
             selectedField: this.props.selectedField,
@@ -725,7 +715,7 @@ const z = class z extends r.Component {
                 "k-table-row",
                 S ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
               ),
-              style: { visibility: q(_) ? "hidden" : "", height: this.props.detailRowHeight },
+              style: { visibility: q(k) ? "hidden" : "", height: this.props.detailRowHeight },
               role: "row",
               "aria-rowindex": D
             },
@@ -752,7 +742,7 @@ const z = class z extends r.Component {
             this.props.expandField && /* @__PURE__ */ r.createElement(
               _t,
               {
-                id: I.generateNavigatableId(`${A}-dhcell`, p)
+                id: x.generateNavigatableId(`${A}-dhcell`, p)
               }
             ),
             /* @__PURE__ */ r.createElement(
@@ -764,7 +754,7 @@ const z = class z extends r.Component {
                 colSpan: y,
                 ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
                 detail: this.props.detail,
-                id: I.generateNavigatableId(`${A}-dcell`, p)
+                id: x.generateNavigatableId(`${A}-dcell`, p)
               }
             )
           ));
@@ -782,11 +772,11 @@ const z = class z extends r.Component {
         className: "k-grid-norecords",
         style: { width: Ne() }
       },
-      /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Ze]: I.generateNavigatableId("no-records", p) }, k.length ? k : /* @__PURE__ */ r.createElement(Et, null))
+      /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Ze]: x.generateNavigatableId("no-records", p) }, I.length ? I : /* @__PURE__ */ r.createElement(Et, null))
     ), Q = {
       size: this.props.size,
       onPageChange: this.pagerPageChange,
-      total: l,
+      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,
@@ -925,7 +915,7 @@ const z = class z extends r.Component {
           className: "k-grid-aria-root",
           role: "grid",
           "aria-colcount": C.length,
-          "aria-rowcount": l,
+          "aria-rowcount": a,
           id: this._gridId,
           "aria-label": c.toLanguageString(ue, dt[ue])
         },
@@ -992,9 +982,9 @@ const z = class z extends r.Component {
   calculateMedia() {
     this.checkMatchMediaColumnsDifferece() || this.forceUpdate();
   }
-  selectionChange(l) {
+  selectionChange(a) {
     if (this.props.onSelectionChange) {
-      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = l, { mode: s, cell: a } = le(this.props.selectable), h = {
+      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: s, cell: l } = le(this.props.selectable), h = {
         ...this.getArguments(p.syntheticEvent),
         dataItem: c,
         startColIndex: t,
@@ -1007,7 +997,7 @@ const z = class z extends r.Component {
         shiftKey: !1,
         metaKey: !1,
         mode: s,
-        cell: a,
+        cell: l,
         isDrag: !1,
         componentId: this._gridId,
         selectedField: this.props.selectedField || ""
@@ -1015,11 +1005,11 @@ const z = class z extends r.Component {
       this.props.onSelectionChange.call(void 0, h);
     }
   }
-  raiseDataEvent(l, p, c, e, t) {
+  raiseDataEvent(a, p, c, e, t) {
     const s = this.props.onDataStateChange;
-    if (l) {
-      const a = { ...this.getArguments(e), ...p, targetEvent: t };
-      l.call(void 0, a);
+    if (a) {
+      const l = { ...this.getArguments(e), ...p, targetEvent: t };
+      a.call(void 0, l);
     } else
       s && s.call(
         void 0,
@@ -1033,15 +1023,15 @@ const z = class z extends r.Component {
         }
       );
   }
-  columnReorder(l, p, c) {
-    const e = this._columns[l], t = e.depth, s = (d) => {
+  columnReorder(a, p, c) {
+    const e = this._columns[a], t = e.depth, s = (d) => {
       do
         d++;
       while (d < this._columns.length && this._columns[d].depth > t);
       return d;
-    }, a = this._columns.splice(l, s(l) - l);
-    this._columns.splice(l < p ? s(p - a.length) : p, 0, ...a), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, f) => d.orderIndex = f), this._columnsMutations++;
-    const h = this._columns[l].locked && this._columns[p].locked;
+    }, l = this._columns.splice(a, s(a) - a);
+    this._columns.splice(a < p ? s(p - l.length) : p, 0, ...l), 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;
     Ye(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), Qe(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
     const n = this.columns;
     if (this.forceUpdate(), this.props.onColumnReorder) {
@@ -1054,25 +1044,25 @@ const z = class z extends r.Component {
       this.props.onColumnReorder.call(void 0, d);
     }
   }
-  groupReorder(l, p, c) {
+  groupReorder(a, p, c) {
     if (this.props.group === void 0)
       return;
     const e = this.props.group.slice();
-    e.splice(p, 0, ...e.splice(l, 1)), this.groupChange(e, c);
+    e.splice(p, 0, ...e.splice(a, 1)), this.groupChange(e, c);
   }
-  columnToGroup(l, p, c) {
-    const e = this._columns[l].field;
+  columnToGroup(a, p, c) {
+    const e = this._columns[a].field;
     if (!e)
       return;
     const t = (this.props.group || []).slice();
     t.splice(p, 0, { field: e }), this.groupChange(t, c);
   }
-  columnGroupChange(l, p) {
+  columnGroupChange(a, p) {
     const c = this.dragLogic.getCurrentGroupsLength;
-    this.columnToGroup(l, c, p);
+    this.columnToGroup(a, c, p);
   }
   resetTableWidth() {
-    let l = 0;
+    let a = 0;
     if (!this.columnResize.colGroupMain)
       return;
     const p = this.columnResize.colGroupMain.children;
@@ -1080,12 +1070,12 @@ const z = class z extends r.Component {
       const e = p[c].width;
       if (!e)
         return;
-      l += parseFloat(e.toString());
+      a += parseFloat(e.toString());
     }
-    l = Math.round(l), this._header && this._header.setWidth(l), this._footer && this._footer.setWidth(l), this.tableElement && (this.tableElement.style.width = l + "px");
+    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(l, p) {
-    const c = I.getIdPrefix(this.navigationStateRef), e = this.filterHiddenColumns(l), t = this.readColumns(e, c, this._columnsMutations);
+  initColumns(a, p) {
+    const c = x.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = this.filterColumnsByMediaProp(e);
     this._columns = t, this._columns.length === 0 && (this._columns = vt(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._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
   }
   getDataState() {
@@ -1097,10 +1087,10 @@ const z = class z extends r.Component {
       group: this.props.group
     };
   }
-  getArguments(l) {
+  getArguments(a) {
     return {
-      nativeEvent: l && l.nativeEvent,
-      syntheticEvent: l,
+      nativeEvent: a && a.nativeEvent,
+      syntheticEvent: a,
       target: this
     };
   }