@progress/kendo-react-grid 8.1.0-develop.7 → 8.1.0-develop.9

package/Grid.mjs

@@ -8,8 +8,8 @@
 "use client";
 import * as r from "react";
 import o from "prop-types";
-import { RowHeightService as re, dispatchEvent as Pe, canUseDOM as U, getActiveElement as Ke, memoizeOne as S, validatePackage as Oe, shouldShowValidationUI as Ve, setScrollbarWidth as ae, getter as Ue, classNames as N, kendoThemeMaps as P, WatermarkOverlay as We } from "@progress/kendo-react-common";
-import { tableKeyboardNavigation as x, getSelectionOptions as le, mapColumns as Be, ClipboardService as $e, TableKeyboardNavigationContext as W, isRtl as je, tableKeyboardNavigationTools as _, tableColumnsVirtualization as qe, Pager as Xe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Ye, updateRight as Je, KEYBOARD_NAV_DATA_ID as Qe } from "@progress/kendo-react-data-tools";
+import { RowHeightService as re, dispatchEvent as Ge, canUseDOM as L, getActiveElement as Oe, memoizeOne as S, validatePackage as Ke, shouldShowValidationUI as Ve, setScrollbarWidth as ae, getter as Ue, classNames as M, kendoThemeMaps as O, WatermarkOverlay as Be } from "@progress/kendo-react-common";
+import { tableKeyboardNavigationTools as k, tableKeyboardNavigation as _, getSelectionOptions as le, mapColumns as We, ClipboardService as $e, TableKeyboardNavigationContext as B, isRtl as je, tableColumnsVirtualization as qe, Pager as Je, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Xe, updateRight as Ye, KEYBOARD_NAV_DATA_ID as Qe } from "@progress/kendo-react-data-tools";
 import { GridSelectionCell as Ze } from "./cells/GridSelectionCell.mjs";
 import { GridHierarchyCell as et } from "./cells/GridHierarchyCell.mjs";
 import { GridEditCell as tt } from "./cells/GridEditCell.mjs";
@@ -24,7 +24,7 @@ import { VirtualScroll as dt } from "./VirtualScroll.mjs";
 import { VirtualScrollFixed as ge } from "./VirtualScrollFixed.mjs";
 import { ColumnResize as ct } from "./drag/ColumnResize.mjs";
 import { CommonDragLogic as ut } from "./drag/CommonDragLogic.mjs";
-import { firefox as fe, firefoxMaxHeight as me, flatData as gt, readColumns as ft, sanitizeColumns as mt, getColumnWidth as B, autoGenerateColumns as vt, getNestedValue as ve, resolveCells as bt } from "./utils/index.mjs";
+import { firefox as me, firefoxMaxHeight as fe, flatData as gt, readColumns as mt, sanitizeColumns as ft, getColumnWidth as W, autoGenerateColumns as vt, getNestedValue as ve, resolveCells as bt } from "./utils/index.mjs";
 import { GridCell as Ct } from "./cells/GridCell.mjs";
 import { GridGroupCell as be } from "./cells/GridGroupCell.mjs";
 import { GridRow as Rt } from "./rows/GridRow.mjs";
@@ -37,7 +37,7 @@ import { packageMetadata as Re } from "./package-metadata.mjs";
 import { GridDetailCell as kt } from "./cells/GridDetailCell.mjs";
 import { GridDetailHierarchyCell as Et } from "./cells/GridDetailHierarchyCell.mjs";
 import { SAFARI_REGEX as xt } from "./constants/index.mjs";
-const T = class T extends r.Component {
+const z = class z extends r.Component {
   constructor(a) {
     super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !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 };
@@ -67,6 +67,9 @@ const T = class T extends r.Component {
       }
     }, 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 = k.getIdPrefix(this.navigationStateRef), s = this.filterHiddenColumns(e);
+      return this.getColumnsEssentialProps(this.readColumns(s, t, this._columnsMutations)) === this.getColumnsEssentialProps(this._columns);
     }, this.onContextMenu = (e, t, s) => {
       if (this.props.onContextMenu) {
         const l = {
@@ -79,8 +82,8 @@ const T = class T extends r.Component {
         this.props.onContextMenu.call(void 0, l);
       }
     }, this.getVirtualScroll = (e) => {
-      const { rowHeight: t, detailRowHeight: s, detail: l, expandField: p, groupable: n } = e, d = this.isAllData(), m = t !== void 0 && t > 0, R = s !== void 0 && s > 0, k = n === !0 || typeof n == "object" && n.enabled !== !1;
-      return !m || k && !d || !!(l && p) && (!R || !d) ? dt : ge;
+      const { rowHeight: t, detailRowHeight: s, detail: l, expandField: p, groupable: n } = e, d = this.isAllData(), f = t !== void 0 && t > 0, R = s !== void 0 && s > 0, E = n === !0 || typeof n == "object" && n.enabled !== !1;
+      return !f || E && !d || !!(l && p) && (!R || !d) ? dt : ge;
     }, this.isAllData = () => {
       const { data: e, total: t } = this.props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -94,7 +97,7 @@ const T = class T 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 s = this.props.rowHeight * e;
-        this.vs.containerHeight = fe ? Math.min(me, s) : s;
+        this.vs.containerHeight = me ? Math.min(fe, s) : s;
       } else
         this.vs.containerHeight = 1533915;
       if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ge) {
@@ -102,7 +105,7 @@ const T = class T extends r.Component {
         let { detailRowHeight: n = 0 } = this.props;
         n = l && p ? 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 = fe ? Math.min(me, d) : d;
+        this.vs.containerHeight = me ? Math.min(fe, d) : d;
       }
     }, this.scrollHandler = (e) => {
       if (e.target !== e.currentTarget)
@@ -111,9 +114,9 @@ const T = class T extends r.Component {
       const t = e.currentTarget.scrollLeft, s = e.currentTarget.scrollTop;
       this.props.columnVirtualization && (!this.vs.scrollableVirtual || s === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
         this.forceUpdate();
-      }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && s !== this.wrapperScrollTop && this.vs.scrollHandler(e), Pe(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = s;
+      }, 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, {
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef,
         onNavigationAction: this.onNavigationAction
@@ -129,7 +132,7 @@ const T = class T extends r.Component {
         this.props.onKeyDown.call(void 0, l);
       }
     }, this.onFocus = (e) => {
-      x.onFocus(e, {
+      _.onFocus(e, {
         contextStateRef: this.contextStateRef
       });
     }, this.onNavigationAction = (e) => {
@@ -273,9 +276,9 @@ const T = class T extends r.Component {
       }
     }, this.inActiveElement = () => {
       var p, n, d;
-      if (!U)
+      if (!L)
         return !1;
-      const e = Ke(this.document), t = e ? e.matches(".k-table-td") ? e : (p = this.document) == null ? void 0 : p.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));
+      const e = Oe(this.document), t = e ? e.matches(".k-table-td") ? e : (p = this.document) == null ? void 0 : p.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, p, n) => {
       this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
@@ -296,23 +299,35 @@ const T = class T extends r.Component {
       const d = this.getVirtualScroll(this.props);
       this.vs = new d(n);
     }), this.flatData = S((e, t, s, l, p, n, d) => {
-      const m = [], R = gt(
-        m,
+      const f = [], R = gt(
+        f,
         e,
         t,
         { index: s },
         l !== void 0,
         p
       );
-      return { flattedData: m, resolvedGroupsCount: R };
+      return { flattedData: f, resolvedGroupsCount: R };
     }), this.rowHeightService = S((e, t, s, l, p) => new re(t, s, l, p)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
       (e, t, s) => {
         const l = e.filter((p) => p && p.type && p.type.displayName === "KendoReactGridColumn");
-        return ft(l, this.columns, { prevId: 0, idPrefix: t });
+        return mt(l, this.columns, { prevId: 0, idPrefix: t });
       }
     ), this.mapColumns = S(
-      (e, t) => Be(e, !0)
-    ), this.configureColumns = S((e, t, s) => {
+      (e, t) => We(e, !0)
+    ), this.filterHiddenColumns = (e) => {
+      const t = (s) => {
+        const l = s;
+        return {
+          ...l,
+          props: {
+            ...l.props,
+            children: l.props.children && l.props.children.length > 0 ? this.filterHiddenColumns(l.props.children) : l.props.children
+          }
+        };
+      };
+      return [...e].filter((s) => r.isValidElement(s) && !s.props.hidden).filter((s) => L && s && r.isValidElement(s) && s.props.media ? window.matchMedia(s.props.media).matches : s).map((s) => t(s));
+    }, this.configureColumns = S((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 || Ze, n.headerCell = n.headerCell || yt;
       });
@@ -351,7 +366,7 @@ const T = class T extends r.Component {
           locked: this.props.lockGroups
         }), p++;
       e.slice(p).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += p));
-    }), this.getHeaderRow = S((e, t, s, l, p, n, d, m, R, k, z, C, A) => /* @__PURE__ */ r.createElement(
+    }), this.getHeaderRow = S((e, t, s, l, p, n, d, f, R, E, D, C, A) => /* @__PURE__ */ r.createElement(
       it,
       {
         cells: this.props.cells,
@@ -366,15 +381,15 @@ const T = class T extends r.Component {
         filterOperators: d,
         filterChange: this.filterChange,
         columnMenu: R,
-        columnMenuIcon: k,
+        columnMenuIcon: E,
         selectionChange: this.onHeaderSelectionChange,
-        columns: z,
+        columns: D,
         columnResize: this.columnResize,
         pressHandler: this.dragLogic.pressHandler,
         dragHandler: this.dragLogic.dragHandler,
         releaseHandler: this.dragLogic.releaseHandler,
         columnsMap: C,
-        cellRender: m,
+        cellRender: f,
         isRtl: A,
         dragClue: this.dragLogic.dragClueRef,
         headerRef: this.headerElementRef,
@@ -385,13 +400,13 @@ const T = class T extends r.Component {
     )), this.resolveTitle = (e) => {
       const t = this._columns.find((l) => l.field === e), s = t && (t.title || t.field);
       return s === void 0 ? e : s;
-    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), this.getSlicedLeafDataItems = () => (this._slicedData || this._data).filter((e) => e.rowType === "data").map((e) => e.dataItem), Oe(Re), this.showLicenseWatermark = Ve(Re);
+    }, 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), Ke(Re), this.showLicenseWatermark = Ve(Re);
     const h = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
     this.vs = new c(h || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new ut(
       this.columnReorder.bind(this),
       this.groupReorder.bind(this),
       this.columnToGroup.bind(this)
-    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ct(this.onResize), this.props.clipboard && (this.clipboardService = new $e(this.onClipboard)), x.onConstructor({
+    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ct(this.onResize), this.props.clipboard && (this.clipboardService = new $e(this.onClipboard)), _.onConstructor({
       navigatable: !!a.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -440,7 +455,7 @@ const T = class T extends r.Component {
   // tslint:enable:max-line-length
   get columns() {
     const a = this._columns.filter((h) => h.declarationIndex >= 0 && h.parentIndex === -1);
-    return mt(a);
+    return ft(a);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -449,7 +464,7 @@ const T = class T extends r.Component {
     return this._element;
   }
   get document() {
-    if (U)
+    if (L)
       return this.element && this.element.ownerDocument || document;
   }
   get _header() {
@@ -462,9 +477,10 @@ const T = class T extends r.Component {
    * @hidden
    */
   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();
     const a = je(this.element);
-    this.isRtl = a, x.onComponentDidMount({
+    this.isRtl = a, _.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -473,13 +489,13 @@ const T = class T 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, h) || null;
+    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = L && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, h) || null, this.resizeObserver = L && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), (c = this.document) != null && c.body && this.resizeObserver && this.resizeObserver.observe(this.document.body);
   }
   /**
    * @hidden
    */
   getSnapshotBeforeUpdate() {
-    return x.onGetSnapshotBeforeUpdate({
+    return _.onGetSnapshotBeforeUpdate({
       document: this.document,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -489,7 +505,7 @@ const T = class T extends r.Component {
    * @hidden
    */
   componentDidUpdate() {
-    this.resetTableWidth(), ae(), 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 = ""), _.onComponentDidUpdate({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -500,7 +516,8 @@ const T = class T extends r.Component {
    * @hidden
    */
   componentWillUnmount() {
-    clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document);
+    var a;
+    clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document), (a = this.document) != null && a.body && this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
@@ -508,7 +525,7 @@ const T = class T extends r.Component {
   render() {
     var ie;
     let a = this.props.total || 0;
-    const h = _.getIdPrefix(this.navigationStateRef), c = lt(this);
+    const h = k.getIdPrefix(this.navigationStateRef), c = lt(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", s = this.props.scrollable === "virtual", { resolvedGroupsCount: l, flattedData: p } = this.flatData(
@@ -525,9 +542,9 @@ const T = class T extends r.Component {
     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(a, n);
-    const m = this.childrenToArray(this.props.children);
-    this.initColumns(m, l);
-    const R = m.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), k = m.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), z = m.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((i) => i.children.length === 0), A = n && /* @__PURE__ */ r.createElement(
+    const f = this.childrenToArray(this.props.children);
+    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), E = f.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), D = f.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), C = this._columns.filter((i) => i.children.length === 0), A = n && /* @__PURE__ */ r.createElement(
       rt,
       {
         group: this.props.group || [],
@@ -540,7 +557,7 @@ const T = class T extends r.Component {
         ariaControls: this._gridId,
         onContextMenu: this.onContextMenu
       }
-    ), { sort: ye, sortable: we, group: Se, filter: Ie, filterable: ke, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e, columnMenuIcon: Te } = this.props, j = /* @__PURE__ */ r.createElement(
+    ), { sort: ye, sortable: we, group: Se, filter: Ie, filterable: ke, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e, columnMenuIcon: ze } = this.props, j = /* @__PURE__ */ r.createElement(
       st,
       {
         size: this.props.size,
@@ -560,7 +577,7 @@ const T = class T extends r.Component {
           Ee,
           xe,
           _e,
-          Te,
+          ze,
           this._columns,
           this._columnsMap,
           this.isRtl
@@ -584,17 +601,17 @@ const T = class T extends r.Component {
           "col",
           {
             key: g.toString(),
-            width: B(i)
+            width: W(i)
           }
         ))
       }
-    ), ze = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, De = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Fe } = qe({
+    ), De = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, Te = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Fe } = qe({
       enabled: this.props.columnVirtualization,
       columns: C,
-      tableViewPortWidth: De,
-      scrollLeft: ze
-    }), Le = (i, g, f) => {
-      let E = !1;
+      tableViewPortWidth: Te,
+      scrollLeft: De
+    }), Ne = (i, g, m) => {
+      let x = !1;
       const I = this.props.selectedField ? ve(this.props.selectedField, i.dataItem) : void 0;
       return {
         row: C.map((u, v) => {
@@ -604,19 +621,19 @@ const T = class T extends r.Component {
           let w = !1;
           if (u.editable && this.props.editField) {
             const b = ve(this.props.editField, i.dataItem);
-            b && (b === !0 || b === u.field) && (E = !0, w = !0);
+            b && (b === !0 || b === u.field) && (x = !0, w = !0);
           }
-          const V = u.cell || w && tt || Ct, L = this.props.expandField && this.props.detail && u.field === this.props.expandField;
+          const U = u.cell || w && tt || Ct, N = this.props.expandField && this.props.detail && u.field === this.props.expandField;
           return /* @__PURE__ */ r.createElement(
-            V,
+            U,
             {
               onContextMenu: this.onContextMenu,
               key: H,
               locked: this.props.lockGroups,
-              id: _.generateNavigatableId(
+              id: k.generateNavigatableId(
                 `${g}-${String(v)}`,
                 h,
-                L || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
+                N || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
               ),
               colSpan: He[v],
               dataItem: i.dataItem,
@@ -628,7 +645,7 @@ const T = class T extends r.Component {
               cells: bt(this.props.cells, u.cells),
               onChange: this.itemChange,
               selectionChange: this.props.onSelectionChange ? (b) => {
-                this.selectionChange({ event: b, dataItem: i.dataItem, dataIndex: f, columnIndex: v });
+                this.selectionChange({ event: b, dataItem: i.dataItem, dataIndex: m, columnIndex: v });
               } : void 0,
               columnIndex: v,
               columnsCount: C.length,
@@ -642,7 +659,7 @@ const T = class T extends r.Component {
             }
           );
         }),
-        isInEdit: E,
+        isInEdit: x,
         isSelected: typeof I == "boolean" && I
       };
     };
@@ -655,64 +672,64 @@ const T = class T extends r.Component {
         else
           break;
       }
-    const X = (i) => i >= this._data.length - q;
-    let Y = this.vs.realSkip || 0;
-    const M = [];
+    const J = (i) => i >= this._data.length - q;
+    let X = this.vs.realSkip || 0;
+    const P = [];
     let K = !1;
-    const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
-    let D = 0;
+    const V = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
+    let T = 0;
     if (this._data.length) {
       let i = -1, g = 0;
-      (this._slicedData || this._data).forEach((f, E) => {
-        f.rowType === "data" && (Y++, i++);
-        const I = Y % 2 === 0, u = this.props.dataItemKey && Ue(this.props.dataItemKey)(f.dataItem), v = E + (this.vs.realSkip || 0), H = u || "ai" + v, F = H + "_1", y = Le(f, H, i);
-        if (D = v + O + g, M.push(/* @__PURE__ */ r.createElement(
+      (this._slicedData || this._data).forEach((m, x) => {
+        m.rowType === "data" && (X++, i++);
+        const I = X % 2 === 0, u = this.props.dataItemKey && Ue(this.props.dataItemKey)(m.dataItem), v = x + (this.vs.realSkip || 0), H = u || "ai" + v, F = H + "_1", y = Ne(m, H, i);
+        if (T = v + V + g, P.push(/* @__PURE__ */ r.createElement(
           Rt,
           {
             key: H,
-            dataItem: f.dataItem,
+            dataItem: m.dataItem,
             isAltRow: I,
             isInEdit: y.isInEdit,
-            rowType: f.rowType,
-            isHidden: X(E),
-            onClick: (w) => this.rowClick(w, f),
-            onDoubleClick: (w) => this.rowDblClick(w, f),
+            rowType: m.rowType,
+            isHidden: J(x),
+            onClick: (w) => this.rowClick(w, m),
+            onDoubleClick: (w) => this.rowDblClick(w, m),
             selectedField: this.props.selectedField,
             rowHeight: this.props.rowHeight,
             render: this.props.rowRender,
-            ariaRowIndex: D,
+            ariaRowIndex: T,
             absoluteRowIndex: v,
             dataIndex: this.vs.scrollableVirtual ? v : i,
             isSelected: y.isSelected
           },
           y.row
-        )), this.props.detail && f.rowType === "data" && f.expanded) {
+        )), this.props.detail && m.rowType === "data" && m.expanded) {
           const w = C.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
-          g++, D = v + O + g, M.push(/* @__PURE__ */ r.createElement(
+          g++, T = v + V + g, P.push(/* @__PURE__ */ r.createElement(
             "tr",
             {
               key: F,
-              className: N(
+              className: M(
                 "k-table-row",
                 I ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
               ),
-              style: { visibility: X(E) ? "hidden" : "", height: this.props.detailRowHeight },
+              style: { visibility: J(x) ? "hidden" : "", height: this.props.detailRowHeight },
               role: "row",
-              "aria-rowindex": D
+              "aria-rowindex": T
             },
-            this.props.group && this.props.group.map((V, L) => {
+            this.props.group && this.props.group.map((U, N) => {
               var oe;
-              const b = (oe = y == null ? void 0 : y.row[L]) == null ? void 0 : oe.props.style, Ge = b ? this.isRtl ? { left: b.right, right: b.left } : { left: b.left, right: b.right } : {};
+              const b = (oe = y == null ? void 0 : y.row[N]) == null ? void 0 : oe.props.style, Pe = b ? this.isRtl ? { left: b.right, right: b.left } : { left: b.left, right: b.right } : {};
               return /* @__PURE__ */ r.createElement(
                 be,
                 {
                   id: "",
-                  dataIndex: f.dataIndex,
-                  field: V.field,
-                  dataItem: f.dataItem,
-                  key: L,
-                  style: Ge,
-                  ariaColumnIndex: 1 + L,
+                  dataIndex: m.dataIndex,
+                  field: U.field,
+                  dataItem: m.dataItem,
+                  key: N,
+                  style: Pe,
+                  ariaColumnIndex: 1 + N,
                   isSelected: !1,
                   locked: this.props.lockGroups,
                   isRtl: this.isRtl,
@@ -723,19 +740,19 @@ const T = class T extends r.Component {
             this.props.expandField && /* @__PURE__ */ r.createElement(
               Et,
               {
-                id: _.generateNavigatableId(`${F}-dhcell`, h)
+                id: k.generateNavigatableId(`${F}-dhcell`, h)
               }
             ),
             /* @__PURE__ */ r.createElement(
               kt,
               {
                 onContextMenu: this.onContextMenu,
-                dataItem: f.dataItem,
-                dataIndex: f.dataIndex,
+                dataItem: m.dataItem,
+                dataIndex: m.dataIndex,
                 colSpan: w,
                 ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
                 detail: this.props.detail,
-                id: _.generateNavigatableId(`${F}-dcell`, h)
+                id: k.generateNavigatableId(`${F}-dcell`, h)
               }
             )
           ));
@@ -743,18 +760,18 @@ const T = class T extends r.Component {
       });
     } else
       K = !0;
-    const Ne = () => {
+    const Le = () => {
       const i = this._header;
       return i && i.table.clientWidth;
-    }, J = () => /* @__PURE__ */ r.createElement(
+    }, Y = () => /* @__PURE__ */ r.createElement(
       "div",
       {
         key: "no-records",
         className: "k-grid-norecords",
-        "aria-rowindex": O,
-        style: { width: Ne() }
+        "aria-rowindex": V,
+        style: { width: Le() }
       },
-      /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Qe]: _.generateNavigatableId("no-records", h) }, k.length ? k : /* @__PURE__ */ r.createElement(wt, null))
+      /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Qe]: k.generateNavigatableId("no-records", h) }, E.length ? E : /* @__PURE__ */ r.createElement(wt, null))
     ), Q = {
       size: this.props.size,
       onPageChange: this.pagerPageChange,
@@ -765,11 +782,11 @@ const T = class T extends r.Component {
       messagesMap: ht,
       navigatable: this.props.navigatable,
       ...It(this.props.pageable || {})
-    }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Q }) : /* @__PURE__ */ r.createElement(Xe, { className: "k-grid-pager", ...Q }), Ae = (i) => this.props.sort && this.props.sort.filter((g) => g.field === i).length > 0, Me = (i, g) => /* @__PURE__ */ r.createElement(
+    }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Q }) : /* @__PURE__ */ r.createElement(Je, { className: "k-grid-pager", ...Q }), Me = (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: B(i)
+        width: W(i)
       }
     ), ee = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
       (i) => {
@@ -790,10 +807,10 @@ const T = class T extends r.Component {
             idPrefix: h,
             columns: this._columns,
             isRtl: this.isRtl,
-            ariaRowIndex: D + 1
+            ariaRowIndex: T + 1
           }
         ),
-        cols: C.map(Me)
+        cols: C.map(Ae)
       }
     ) : null, te = /* @__PURE__ */ r.createElement(
       "colgroup",
@@ -807,23 +824,23 @@ const T = class T extends r.Component {
           "col",
           {
             key: g.toString(),
-            className: Ae(i.field) ? "k-sorted" : void 0,
-            width: B(i)
+            className: Me(i.field) ? "k-sorted" : void 0,
+            width: W(i)
           }
         )
       )
     ), se = this.dragLogic.reorderable || this.dragLogic.groupable;
     if (this.props.scrollable === "none")
-      return /* @__PURE__ */ r.createElement(W.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      return /* @__PURE__ */ r.createElement(B.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
         "div",
         {
           id: this.props.id,
           style: this.props.style,
-          className: N(
+          className: M(
             "k-grid",
             {
               "k-grid-md": !this.props.size,
-              [`k-grid-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+              [`k-grid-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size
             },
             this.props.className
           ),
@@ -850,32 +867,32 @@ const T = class T extends r.Component {
             "table",
             {
               ref: (i) => this.headTable = i,
-              className: N(
+              className: M(
                 "k-table k-grid-table",
-                { [`k-table-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
+                { [`k-table-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
               ),
               style: { userSelect: d }
             },
             te,
             j,
-            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...pe }, M),
+            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...pe }, P),
             ee
           )
         ),
-        K && J(),
+        K && Y(),
         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);
+      ), D, this.props.pageable && Z);
     let G = this.props.style || {};
-    return s && (G.height || (G = Object.assign({}, G, { height: "450px" }))), /* @__PURE__ */ r.createElement(W.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+    return s && (G.height || (G = Object.assign({}, G, { height: "450px" }))), /* @__PURE__ */ r.createElement(B.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
         style: G,
-        className: N(
+        className: M(
           "k-grid",
           {
             "k-grid-md": !this.props.size,
-            [`k-grid-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-grid-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-grid-virtual": s
           },
           this.props.className
@@ -922,11 +939,11 @@ const T = class T extends r.Component {
               "table",
               {
                 ref: (i) => this.tableElement = i,
-                className: N(
+                className: M(
                   "k-table k-grid-table",
                   {
                     "k-table-md": !this.props.size,
-                    [`k-table-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+                    [`k-table-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size
                   }
                 ),
                 role: "presentation",
@@ -941,10 +958,10 @@ const T = class T extends r.Component {
                   role: "rowgroup",
                   ...pe
                 },
-                M
+                P
               )
             )
-          ), K && J()),
+          ), K && Y()),
           s && /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
             "div",
             {
@@ -954,12 +971,15 @@ const T = class T extends r.Component {
         )),
         ee,
         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(We, null)
+        this.showLicenseWatermark && /* @__PURE__ */ r.createElement(Be, null)
       ),
-      z,
+      D,
       this.props.pageable && Z
     ));
   }
+  calculateMedia() {
+    this.checkMatchMediaColumnsDifferece() || this.forceUpdate();
+  }
   selectionChange(a) {
     if (this.props.onSelectionChange) {
       const { event: h, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: s, cell: l } = le(this.props.selectable), p = {
@@ -1008,9 +1028,9 @@ const T = class T extends r.Component {
       while (d < this._columns.length && this._columns[d].depth > t);
       return d;
     }, l = this._columns.splice(a, s(a) - a);
-    this._columns.splice(a < h ? s(h - l.length) : h, 0, ...l), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, m) => d.orderIndex = m), this._columnsMutations++;
+    this._columns.splice(a < h ? s(h - l.length) : h, 0, ...l), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, f) => d.orderIndex = f), this._columnsMutations++;
     const p = this._columns[a].locked && this._columns[h].locked;
-    Ye(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), Je(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    Xe(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), Ye(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
     const n = this.columns;
     if (this.forceUpdate(), this.props.onColumnReorder) {
       const d = {
@@ -1053,8 +1073,8 @@ const T = class T 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, h) {
-    const c = _.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations);
-    this._columns = e, this._columns.length === 0 && (this._columns = vt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, h, c), this._columnsMap = this.mapColumns(this._columns, this._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+    const c = k.getIdPrefix(this.navigationStateRef), e = this.filterHiddenColumns(a), t = this.readColumns(e, c, this._columnsMutations);
+    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, h, c), this._columnsMap = this.mapColumns(this._columns, this._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
   }
   getDataState() {
     return {
@@ -1073,9 +1093,9 @@ const T = class T extends r.Component {
     };
   }
 };
-T.displayName = "KendoReactGrid", T.defaultProps = {
+z.displayName = "KendoReactGrid", z.defaultProps = {
   // never use this
-}, T.propTypes = {
+}, z.propTypes = {
   data: o.oneOfType([
     o.array,
     o.shape({
@@ -1151,8 +1171,8 @@ T.displayName = "KendoReactGrid", T.defaultProps = {
   dataItemKey: o.string,
   navigatable: o.bool,
   size: o.oneOf(["small", "medium"])
-}, T.contextType = W;
-let $ = T;
+}, z.contextType = B;
+let $ = z;
 nt($);
 export {
   $ as Grid