@progress/kendo-react-grid 8.2.1-develop.5 → 8.3.0-develop.10

package/Grid.mjs

@@ -8,36 +8,36 @@
 "use client";
 import * as r from "react";
 import o from "prop-types";
-import { RowHeightService as re, getScrollbarWidth as Pe, dispatchEvent as Ge, canUseDOM as F, getActiveElement as Ke, memoizeOne as E, validatePackage as We, shouldShowValidationUI as Be, setScrollbarWidth as ae, getter as Ve, classNames as L, kendoThemeMaps as G, WatermarkOverlay as Ue } from "@progress/kendo-react-common";
-import { tableKeyboardNavigation as _, getSelectionOptions as le, mapColumns as $e, ClipboardService as je, TableKeyboardNavigationContext as B, 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";
-import { Header as it } from "./header/Header.mjs";
-import { HeaderRow as ot } from "./header/HeaderRow.mjs";
-import { FilterRow as rt } from "./header/FilterRow.mjs";
-import { GroupPanel as at } from "./header/GroupPanel.mjs";
-import { Footer as lt } from "./footer/Footer.mjs";
-import { provideLocalizationService as nt, registerForLocalization as ht } from "@progress/kendo-react-intl";
-import { pagerMessagesMap as pt, gridAriaLabel as ue, messages as dt } from "./messages/index.mjs";
-import { VirtualScroll as ct } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as ge } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as ut } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as gt } from "./drag/CommonDragLogic.mjs";
-import { firefox as me, firefoxMaxHeight as fe, flatData as mt, readColumns as ft, sanitizeColumns as bt, getColumnWidth as V, autoGenerateColumns as vt, getNestedValue as be, resolveCells as Ct } from "./utils/index.mjs";
-import { GridCell as Rt } from "./cells/GridCell.mjs";
-import { GridGroupCell as ve } from "./cells/GridGroupCell.mjs";
-import { GridRow as wt } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as yt } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as Et } from "./GridNoRecords.mjs";
-import { operators as Ce } from "./filterCommon.mjs";
-import { FooterRow as St } from "./footer/FooterRow.mjs";
-import { normalize as It } from "./paging/GridPagerSettings.mjs";
-import { packageMetadata as Re } from "./package-metadata.mjs";
-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 {
+import { RowHeightService as ne, getScrollbarWidth as Ke, dispatchEvent as Be, canUseDOM as M, getActiveElement as Ve, memoizeOne as y, uGrid as he, classNames as m, validatePackage as Ue, shouldShowValidationUI as $e, setScrollbarWidth as de, getter as je, WatermarkOverlay as qe } from "@progress/kendo-react-common";
+import { tableKeyboardNavigation as T, getSelectionOptions as pe, mapColumns as Je, ClipboardService as Xe, TableKeyboardNavigationContext as V, isRtl as Ye, tableKeyboardNavigationTools as D, tableColumnsVirtualization as Qe, Pager as Ze, tableKeyboardNavigationScopeAttributes as ce, TableSelection as ue, tableKeyboardNavigationBodyAttributes as ge, DropClue as fe, DragClue as me, updateLeft as et, updateRight as tt, KEYBOARD_NAV_DATA_ID as st } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as it } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as ot } from "./cells/GridHierarchyCell.mjs";
+import { GridEditCell as rt } from "./cells/GridEditCell.mjs";
+import { Header as at } from "./header/Header.mjs";
+import { HeaderRow as lt } from "./header/HeaderRow.mjs";
+import { FilterRow as nt } from "./header/FilterRow.mjs";
+import { GroupPanel as ht } from "./header/GroupPanel.mjs";
+import { Footer as dt } from "./footer/Footer.mjs";
+import { provideLocalizationService as pt, registerForLocalization as ct } from "@progress/kendo-react-intl";
+import { pagerMessagesMap as ut, gridAriaLabel as be, messages as gt } from "./messages/index.mjs";
+import { VirtualScroll as ft } from "./VirtualScroll.mjs";
+import { VirtualScrollFixed as ve } from "./VirtualScrollFixed.mjs";
+import { ColumnResize as mt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as bt } from "./drag/CommonDragLogic.mjs";
+import { firefox as Ce, firefoxMaxHeight as Re, flatData as vt, readColumns as Ct, sanitizeColumns as Rt, getColumnWidth as U, isSorted as we, autoGenerateColumns as wt, getNestedValue as ye, resolveCells as yt } from "./utils/index.mjs";
+import { GridCell as Et } from "./cells/GridCell.mjs";
+import { GridGroupCell as Ee } from "./cells/GridGroupCell.mjs";
+import { GridRow as St } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as It } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as _t } from "./GridNoRecords.mjs";
+import { operators as Se } from "./filterCommon.mjs";
+import { FooterRow as xt } from "./footer/FooterRow.mjs";
+import { normalize as kt } from "./paging/GridPagerSettings.mjs";
+import { packageMetadata as Ie } from "./package-metadata.mjs";
+import { GridDetailCell as Tt } from "./cells/GridDetailCell.mjs";
+import { GridDetailHierarchyCell as Dt } from "./cells/GridDetailHierarchyCell.mjs";
+import { SAFARI_REGEX as Ht } from "./constants/index.mjs";
+const H = class H extends r.Component {
   constructor(a) {
     super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !1, this._singleEditRow = !1, this._shouldUpdateLeftRight = !0, this._scrollbarWidth = void 0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.headTable = null, this.rowsInEdit = [], this.observer = null, this.handleIntersection = (e) => {
       const t = { rowIndex: this.rowIndex };
@@ -82,8 +82,8 @@ const z = class z extends r.Component {
         this.props.onContextMenu.call(void 0, l);
       }
     }, this.getVirtualScroll = (e) => {
-      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;
+      const { rowHeight: t, detailRowHeight: s, detail: l, expandField: d, groupable: p } = e, h = this.isAllData(), g = t !== void 0 && t > 0, v = s !== void 0 && s > 0, z = p === !0 || typeof p == "object" && p.enabled !== !1;
+      return !g || z && !h || !!(l && d) && (!v || !h) ? ft : ve;
     }, this.isAllData = () => {
       const { data: e, total: t } = this.props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -97,33 +97,33 @@ const z = class z 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 = me ? Math.min(fe, s) : s;
+        this.vs.containerHeight = Ce ? Math.min(Re, s) : s;
       } else
         this.vs.containerHeight = 1533915;
-      if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ge) {
-        const { rowHeight: s = 0, detail: l, expandField: h } = this.props;
-        let { detailRowHeight: n = 0 } = this.props;
-        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;
+      if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof ve) {
+        const { rowHeight: s = 0, detail: l, expandField: d } = this.props;
+        let { detailRowHeight: p = 0 } = this.props;
+        p = l && d ? p : s, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, s, p, this._data)) : this.vs.rowHeightService = new ne(e, s, p);
+        const h = this.vs.rowHeightService.totalHeight();
+        this.vs.containerHeight = Ce ? Math.min(Re, h) : h;
       }
-    }, this.getCachedScrollbarWidth = () => (this._scrollbarWidth || (this._scrollbarWidth = Pe() || void 0), this._scrollbarWidth), this.scrollHandler = (e) => {
+    }, this.getCachedScrollbarWidth = () => (this._scrollbarWidth || (this._scrollbarWidth = Ke() || void 0), this._scrollbarWidth), this.scrollHandler = (e) => {
       if (e.target !== e.currentTarget)
         return;
       clearTimeout(this.forceUpdateTimeout), this.vs.table = this.tableElement;
       const t = e.currentTarget.scrollLeft, s = e.currentTarget.scrollTop;
       this.props.columnVirtualization && (!this.vs.scrollableVirtual || s === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
         this.forceUpdate();
-      }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && s !== this.wrapperScrollTop && this.vs.scrollHandler(e), Ge(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), Be(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = s;
     }, this.onKeyDown = (e) => {
-      if (_.onKeyDown(e, {
+      if (T.onKeyDown(e, {
         navigatable: this.props.navigatable || !1,
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef,
         onNavigationAction: this.onNavigationAction,
         columns: this.columns
       }), this.props.onKeyDown) {
-        const { mode: t, cell: s } = le(this.props.selectable), l = {
+        const { mode: t, cell: s } = pe(this.props.selectable), l = {
           dataItems: this.getLeafDataItems(),
           mode: t,
           cell: s,
@@ -134,7 +134,7 @@ const z = class z extends r.Component {
         this.props.onKeyDown.call(void 0, l);
       }
     }, this.onFocus = (e) => {
-      _.onFocus(e, {
+      T.onFocus(e, {
         navigatable: !!this.props.navigatable,
         contextStateRef: this.contextStateRef
       });
@@ -278,51 +278,51 @@ const z = class z extends r.Component {
         );
       }
     }, this.inActiveElement = () => {
-      var h, n, d;
-      if (!F)
+      var d, p, h;
+      if (!M)
         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"), l = t && ((d = this._element) == null ? void 0 : d.contains(t));
+      const e = Ve(this.document), t = e ? e.matches(".k-table-td") ? e : (d = this.document) == null ? void 0 : d.body : (p = this.document) == null ? void 0 : p.body, s = t.closest(".k-grid-container"), l = t && ((h = this._element) == null ? void 0 : h.contains(t));
       return !!(t && l && s);
-    }, this.onResize = (e, t, s, l, h, n) => {
+    }, this.onResize = (e, t, s, l, d, p) => {
       this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
         void 0,
         {
           columns: this.columns,
           nativeEvent: l,
-          targetColumnId: n,
+          targetColumnId: p,
           index: e,
           newWidth: t,
           oldWidth: s,
-          end: h,
+          end: d,
           target: this
         }
       );
-    }, this.reInitVirtualization = E((e, t, s, l, h, n) => {
+    }, this.reInitVirtualization = y((e, t, s, l, d, p) => {
       this.vs.reset();
-      const d = this.getVirtualScroll(this.props);
-      this.vs = new d(n);
-    }), this.flatData = E((e, t, s, l, h, n, d) => {
-      const f = [], R = mt(
-        f,
+      const h = this.getVirtualScroll(this.props);
+      this.vs = new h(p);
+    }), this.flatData = y((e, t, s, l, d, p, h) => {
+      const g = [], v = vt(
+        g,
         e,
         t,
         { index: s },
         l !== void 0,
-        h
+        d
       );
-      return { flattedData: f, resolvedGroupsCount: R };
-    }), 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(
+      return { flattedData: g, resolvedGroupsCount: v };
+    }), this.rowHeightService = y((e, t, s, l, d) => new ne(t, s, l, d)), this.childrenToArray = y((e) => r.Children.toArray(e)), this.readColumns = y(
       (e, t, s) => {
-        const l = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
-        return ft(l, this.columns, { prevId: 0, idPrefix: t });
+        const l = e.filter((d) => d && d.type && d.type.displayName === "KendoReactGridColumn");
+        return Ct(l, this.columns, { prevId: 0, idPrefix: t });
       }
-    ), this.mapColumns = E(
-      (e, t) => $e(e, !0)
-    ), this.filterColumnsByMediaProp = (e) => e.filter((t) => F && 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;
+    ), this.mapColumns = y(
+      (e, t) => Je(e, !0)
+    ), this.filterColumnsByMediaProp = (e) => e.filter((t) => M && t && t.media ? window.matchMedia(t.media).matches : t), this.configureColumns = y((e, t, s) => {
+      this.props.selectedField && e.filter((g) => g.field === this.props.selectedField).forEach((g) => {
+        g.width = g.width || "50px", g.cell = g.cell || it, g.headerCell = g.headerCell || It;
       });
-      const l = {
+      const { unstyled: l } = this.props, d = l && l.uGrid ? l.uGrid : he, p = {
         id: "",
         resizable: !0,
         width: "32px",
@@ -343,22 +343,22 @@ const z = class z extends r.Component {
       };
       let h = 0;
       this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
-        ...l,
-        cell: tt,
+        ...p,
+        cell: ot,
         field: this.props.expandField,
-        headerClassName: "k-hierarchy-cell k-header"
+        headerClassName: m(d.hierarchyCell({}))
       }), h++);
-      for (let n = 0; n < t; n++)
+      for (let g = 0; g < t; g++)
         e.unshift({
-          ...l,
+          ...p,
           isAccessible: !1,
-          cell: ve,
+          cell: Ee,
           field: "value",
           locked: this.props.lockGroups
         }), h++;
-      e.slice(h).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += h));
-    }), this.getHeaderRow = E((e, t, s, l, h, n, d, f, R, I, T, C, M) => /* @__PURE__ */ r.createElement(
-      ot,
+      e.slice(h).forEach((g) => g.parentIndex >= 0 && (g.parentIndex += h));
+    }), this.getHeaderRow = y((e, t, s, l, d, p, h, g, v, z, E, G, O) => /* @__PURE__ */ r.createElement(
+      lt,
       {
         cells: this.props.cells,
         sort: e,
@@ -367,21 +367,21 @@ const z = class z extends r.Component {
         group: s || [],
         groupable: l,
         groupChange: this.groupChange,
-        filter: h,
-        filterable: n,
-        filterOperators: d,
+        filter: d,
+        filterable: p,
+        filterOperators: h,
         filterChange: this.filterChange,
-        columnMenu: R,
-        columnMenuIcon: I,
+        columnMenu: v,
+        columnMenuIcon: z,
         selectionChange: this.onHeaderSelectionChange,
-        columns: T,
+        columns: E,
         columnResize: this.columnResize,
         pressHandler: this.dragLogic.pressHandler,
         dragHandler: this.dragLogic.dragHandler,
         releaseHandler: this.dragLogic.releaseHandler,
-        columnsMap: C,
-        cellRender: f,
-        isRtl: M,
+        columnsMap: G,
+        cellRender: g,
+        isRtl: O,
         dragClue: this.dragLogic.dragClueRef,
         headerRef: this.headerElementRef,
         containerRef: this.containerRef,
@@ -396,15 +396,15 @@ const z = class z extends r.Component {
       if (this.tableBodyRef.current && ((e = this.tableBodyRef.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
         this._singleEditRow = !1, (t = document.activeElement) != null && t.closest(".k-grid-edit-row") ? this._lastActiveElement = document.activeElement : this._lastActiveElement = void 0;
         const l = Array.from((s = this.tableBodyRef.current) == null ? void 0 : s.getElementsByClassName("k-grid-edit-row"));
-        l.length > this.rowsInEdit.length ? this._newEditableRow = l.filter((h) => !this.rowsInEdit.includes(h))[0] : l.length === 1 && (this._newEditableRow = l[0], this._singleEditRow = !0), this.rowsInEdit = l;
+        l.length > this.rowsInEdit.length ? this._newEditableRow = l.filter((d) => !this.rowsInEdit.includes(d))[0] : l.length === 1 && (this._newEditableRow = l[0], this._singleEditRow = !0), this.rowsInEdit = l;
       }
-    }, We(Re), this.showLicenseWatermark = Be(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 gt(
+    }, Ue(Ie), this.showLicenseWatermark = $e(Ie);
+    const n = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
+    this.vs = new c(n || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new bt(
       this.columnReorder.bind(this),
       this.groupReorder.bind(this),
       this.columnToGroup.bind(this)
-    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ut(this.onResize), this.props.clipboard && (this.clipboardService = new je(this.onClipboard)), _.onConstructor({
+    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new mt(this.onResize), this.props.clipboard && (this.clipboardService = new Xe(this.onClipboard)), T.onConstructor({
       navigatable: !!a.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -452,8 +452,8 @@ const z = class z extends r.Component {
    */
   // tslint:enable:max-line-length
   get columns() {
-    const a = this._columns.filter((p) => p.declarationIndex >= 0 && p.parentIndex === -1);
-    return bt(a);
+    const a = this._columns.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
+    return Rt(a);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -462,7 +462,7 @@ const z = class z extends r.Component {
     return this._element;
   }
   get document() {
-    if (F)
+    if (M)
       return this.element && this.element.ownerDocument || document;
   }
   get _header() {
@@ -476,24 +476,24 @@ 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 a = qe(this.element);
-    this.isRtl = a, _.onComponentDidMount({
+    this.props.columnVirtualization && !navigator.userAgent.match(Ht) && (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), de(this.getCachedScrollbarWidth());
+    const a = Ye(this.element);
+    this.isRtl = a, T.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
     }), this.isRtl && this.forceUpdate();
-    const p = {
+    const n = {
       rootMargin: "0px",
       threshold: 0.9
     };
-    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = F && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, p) || null, this.resizeObserver = F && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), (c = this.document) != null && c.body && this.resizeObserver && this.resizeObserver.observe(this.document.body);
+    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = M && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, n) || null, this.resizeObserver = M && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), (c = this.document) != null && c.body && this.resizeObserver && this.resizeObserver.observe(this.document.body);
   }
   /**
    * @hidden
    */
   getSnapshotBeforeUpdate() {
-    return _.onGetSnapshotBeforeUpdate({
+    return T.onGetSnapshotBeforeUpdate({
       document: this.document,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -503,7 +503,7 @@ 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(), _.onComponentDidUpdate({
+    this.resetTableWidth(), de(this.getCachedScrollbarWidth()), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), this.handleFocusInEditableRows(), T.onComponentDidUpdate({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -525,29 +525,29 @@ const z = class z extends r.Component {
    * @hidden
    */
   render() {
-    var ie;
+    var ae;
     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, 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,
+    const n = D.getIdPrefix(this.navigationStateRef), c = pt(this), { unstyled: e, size: t = "medium" } = this.props, s = e && e.uGrid ? e.uGrid : he;
+    let l = [];
+    Array.isArray(this.props.data) ? (l = this.props.data, a = a || this.props.data.length) : this.props.data && (l = this.props.data.data, a = a || this.props.data.total);
+    const d = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", p = this.props.scrollable === "virtual", { resolvedGroupsCount: h, flattedData: g } = this.flatData(
+      l,
+      d,
       this.props.skip || 0,
       this.props.group,
       this.props.expandField,
       this.props.filter,
       this.props.sort
     );
-    this._data = h;
-    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(a, n);
-    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), 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,
+    this._data = g;
+    const v = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
+    this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = v;
+    const z = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
+    this.initializeVirtualization(a, v);
+    const E = this.childrenToArray(this.props.children);
+    this.initColumns(E, h);
+    const G = E.map((i) => i && i.type && i.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(i, { ...i.props, ariaControls: this._gridId }) : null), O = E.filter((i) => i && i.type && i.type.displayName === "KendoReactGridNoRecords"), j = E.filter((i) => i && i.type && i.type.displayName === "KendoReactGridStatusBar"), R = this._columns.filter((i) => i.children.length === 0), q = v && /* @__PURE__ */ r.createElement(
+      ht,
       {
         group: this.props.group || [],
         groupChange: this.groupChange,
@@ -559,41 +559,40 @@ const z = class z extends r.Component {
         ariaControls: this._gridId,
         onContextMenu: this.onContextMenu
       }
-    ), { sort: we, sortable: ye, group: Ee, filter: Se, filterable: Ie, filterOperators: ke = Ce, headerCellRender: _e, columnMenu: xe, columnMenuIcon: ze } = this.props, $ = /* @__PURE__ */ r.createElement(
-      it,
+    ), { sort: _e, sortable: xe, group: ke, filter: Te, filterable: De, filterOperators: He = Se, headerCellRender: ze, columnMenu: Ae, columnMenuIcon: Fe } = this.props, J = /* @__PURE__ */ r.createElement(
+      at,
       {
-        size: this.props.size,
+        size: t,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
         scrollableDataElement: () => this.vs.container,
         hasScrollbarWidth: !!this.getCachedScrollbarWidth(),
-        draggable: this.props.reorderable || n,
+        draggable: this.props.reorderable || v,
         ref: this.headerRef,
         elemRef: this.headerElementRef,
-        className: this.props.headerClassName,
         headerRow: this.getHeaderRow(
-          we,
-          ye,
-          Ee,
-          n,
-          Se,
-          Ie,
-          ke,
           _e,
           xe,
+          ke,
+          v,
+          Te,
+          De,
+          He,
           ze,
+          Ae,
+          Fe,
           this._columns,
           this._columnsMap,
           this.isRtl
         ),
         filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
-          rt,
+          nt,
           {
             cells: this.props.cells,
-            size: this.props.size,
+            size: t,
             columns: this._columns,
             filter: this.props.filter,
-            filterOperators: this.props.filterOperators || Ce,
+            filterOperators: this.props.filterOperators || Se,
             filterChange: this.filterChange,
             sort: this.props.sort,
             cellRender: this.props.filterCellRender,
@@ -602,65 +601,67 @@ const z = class z extends r.Component {
             ariaRowIndex: this._columnsMap.length + 1
           }
         ) || void 0,
-        cols: C.map((i, g) => /* @__PURE__ */ r.createElement(
+        cols: R.map((i, f) => /* @__PURE__ */ r.createElement(
           "col",
           {
-            key: g.toString(),
-            width: V(i)
+            key: f.toString(),
+            width: U(i)
           }
         ))
       }
-    ), Te = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, De = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: He, hiddenColumns: Ne } = Je({
+    ), Ne = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, Le = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: Me, hiddenColumns: Ge } = Qe({
       enabled: this.props.columnVirtualization,
-      columns: C,
-      tableViewPortWidth: De,
-      scrollLeft: Te
-    }), Ae = (i, g, m) => {
+      columns: R,
+      tableViewPortWidth: Le,
+      scrollLeft: Ne
+    }), Oe = (i, f, b, F) => {
       let k = !1;
-      const S = this.props.selectedField ? be(this.props.selectedField, i.dataItem) : void 0;
+      const S = this.props.selectedField ? ye(this.props.selectedField, i.dataItem) : void 0;
       return {
-        row: C.map((u, b) => {
-          if (Ne[b])
+        row: R.map((u, C) => {
+          if (Ge[C])
             return null;
-          const H = u.id ? u.id : b, N = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, w = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
-          let y = !1;
+          const N = u.id ? u.id : C, w = m(s.contentSticky({ locked: u.locked }), u.className), I = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
+          let K = !1;
           if (u.editable && this.props.editField) {
-            const v = be(this.props.editField, i.dataItem);
-            v && (v === !0 || v === u.field) && (k = !0, y = !0);
+            const x = ye(this.props.editField, i.dataItem);
+            x && (x === !0 || x === u.field) && (k = !0, K = !0);
           }
-          const W = u.cell || y && st || Rt, A = this.props.expandField && this.props.detail && u.field === this.props.expandField;
+          const L = u.cell || K && rt || Et, _ = this.props.expandField && this.props.detail && u.field === this.props.expandField;
           return /* @__PURE__ */ r.createElement(
-            W,
+            L,
             {
               onContextMenu: this.onContextMenu,
-              key: H,
+              key: N,
               locked: this.props.lockGroups,
-              id: x.generateNavigatableId(
-                `${g}-${String(b)}`,
-                p,
-                A || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
+              id: D.generateNavigatableId(
+                `${f}-${String(C)}`,
+                n,
+                _ || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
               ),
-              colSpan: He[b],
+              colSpan: Me[C],
               dataItem: i.dataItem,
               field: u.field,
               editor: u.editor,
               format: u.format,
-              className: N,
+              className: w,
               render: this.props.cellRender,
-              cells: Ct(this.props.cells, u.cells),
+              cells: yt(this.props.cells, u.cells),
               onChange: this.itemChange,
-              selectionChange: this.props.onSelectionChange ? (v) => {
-                this.selectionChange({ event: v, dataItem: i.dataItem, dataIndex: m, columnIndex: b });
+              selectionChange: this.props.onSelectionChange ? (x) => {
+                this.selectionChange({ event: x, dataItem: i.dataItem, dataIndex: b, columnIndex: C });
               } : void 0,
-              columnIndex: b,
-              columnsCount: C.length,
+              columnIndex: C,
+              columnsCount: R.length,
               rowType: i.rowType,
               level: i.level,
               expanded: i.expanded,
               dataIndex: i.dataIndex,
-              style: w,
+              style: I,
               ariaColumnIndex: u.ariaColumnIndex,
-              isSelected: Array.isArray(S) && S.indexOf(b) > -1
+              isSelected: Array.isArray(S) && S.indexOf(C) > -1,
+              isSorted: !!we(u.field, this.props.sort),
+              isAlt: F
             }
           );
         }),
@@ -668,73 +669,72 @@ const z = class z extends r.Component {
         isSelected: typeof S == "boolean" && S
       };
     };
-    let j = 0;
-    if (s)
+    let X = 0;
+    if (p)
       for (let i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); i++) {
-        const g = this._data.shift();
-        if (g)
-          this._data.push(g), j++, g.rowType === "groupHeader" && i--;
+        const f = this._data.shift();
+        if (f)
+          this._data.push(f), X++, f.rowType === "groupHeader" && i--;
         else
           break;
       }
-    const q = (i) => i >= this._data.length - j;
-    let J = this.vs.realSkip || 0;
-    const O = [];
-    let K = !1;
-    const X = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
-    let D = 0;
+    const Y = (i) => i >= this._data.length - X;
+    let Q = this.vs.realSkip || 0;
+    const P = [];
+    let B = !1;
+    const Z = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
+    let A = 0;
     if (this._data.length) {
-      let i = -1, g = 0;
-      (this._slicedData || this._data).forEach((m, k) => {
-        m.rowType === "data" && (J++, i++);
-        const S = J % 2 === 0, u = this.props.dataItemKey && Ve(this.props.dataItemKey)(m.dataItem), b = k + (this.vs.realSkip || 0), H = u || "ai" + b, N = H + "_1", w = Ae(m, H, i);
-        if (D = b + X + g, O.push(/* @__PURE__ */ r.createElement(
-          wt,
+      let i = -1, f = 0;
+      (this._slicedData || this._data).forEach((b, F) => {
+        b.rowType === "data" && (Q++, i++);
+        const k = Q % 2 === 0, S = this.props.dataItemKey && je(this.props.dataItemKey)(b.dataItem), u = F + (this.vs.realSkip || 0), C = S || "ai" + u, N = C + "_1", w = Oe(b, C, i, k);
+        if (A = u + Z + f, P.push(/* @__PURE__ */ r.createElement(
+          St,
           {
-            key: H,
-            dataItem: m.dataItem,
-            isAltRow: S,
+            key: C,
+            dataItem: b.dataItem,
+            isAltRow: k,
             isInEdit: w.isInEdit,
-            rowType: m.rowType,
-            isHidden: q(k),
-            onClick: (y) => this.rowClick(y, m),
-            onDoubleClick: (y) => this.rowDblClick(y, m),
+            rowType: b.rowType,
+            isHidden: Y(F),
+            onClick: (I) => this.rowClick(I, b),
+            onDoubleClick: (I) => this.rowDblClick(I, b),
             selectedField: this.props.selectedField,
             rowHeight: this.props.rowHeight,
             render: this.props.rowRender,
-            ariaRowIndex: D,
-            absoluteRowIndex: b,
-            dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? b : i,
+            ariaRowIndex: A,
+            absoluteRowIndex: u,
+            dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? u : i,
             isSelected: w.isSelected
           },
           w.row
-        )), this.props.detail && m.rowType === "data" && m.expanded) {
-          const y = C.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
-          g++, D = b + X + g, O.push(/* @__PURE__ */ r.createElement(
+        )), this.props.detail && b.rowType === "data" && b.expanded) {
+          const I = R.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
+          f++, A = u + Z + f, P.push(/* @__PURE__ */ r.createElement(
             "tr",
             {
               key: N,
-              className: L(
-                "k-table-row",
-                S ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
+              className: m(
+                s.detailTr({ isAlt: k })
               ),
-              style: { visibility: q(k) ? "hidden" : "", height: this.props.detailRowHeight },
+              style: { visibility: Y(F) ? "hidden" : "", height: this.props.detailRowHeight },
               role: "row",
-              "aria-rowindex": D
+              "aria-rowindex": A
             },
-            this.props.group && this.props.group.map((W, A) => {
-              var oe;
-              const v = (oe = w == null ? void 0 : w.row[A]) == null ? void 0 : oe.props.style, Oe = v ? this.isRtl ? { left: v.right, right: v.left } : { left: v.left, right: v.right } : {};
+            this.props.group && this.props.group.map((K, L) => {
+              var le;
+              const _ = (le = w == null ? void 0 : w.row[L]) == null ? void 0 : le.props.style, x = _ ? this.isRtl ? { left: _.right, right: _.left } : { left: _.left, right: _.right } : {};
               return /* @__PURE__ */ r.createElement(
-                ve,
+                Ee,
                 {
                   id: "",
-                  dataIndex: m.dataIndex,
-                  field: W.field,
-                  dataItem: m.dataItem,
-                  key: A,
-                  style: Oe,
-                  ariaColumnIndex: 1 + A,
+                  dataIndex: b.dataIndex,
+                  field: K.field,
+                  dataItem: b.dataItem,
+                  key: L,
+                  style: x,
+                  ariaColumnIndex: 1 + L,
                   isSelected: !1,
                   locked: this.props.lockGroups,
                   isRtl: this.isRtl,
@@ -743,109 +743,112 @@ const z = class z extends r.Component {
               );
             }),
             this.props.expandField && /* @__PURE__ */ r.createElement(
-              _t,
+              Dt,
               {
-                id: x.generateNavigatableId(`${N}-dhcell`, p)
+                id: D.generateNavigatableId(`${N}-dhcell`, n)
               }
             ),
             /* @__PURE__ */ r.createElement(
-              kt,
+              Tt,
               {
                 onContextMenu: this.onContextMenu,
-                dataItem: m.dataItem,
-                dataIndex: m.dataIndex,
-                colSpan: y,
+                dataItem: b.dataItem,
+                dataIndex: b.dataIndex,
+                colSpan: I,
                 ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
                 detail: this.props.detail,
-                id: x.generateNavigatableId(`${N}-dcell`, p)
+                id: D.generateNavigatableId(`${N}-dcell`, n)
               }
             )
           ));
         }
       });
     } else
-      K = !0;
-    const Fe = () => {
+      B = !0;
+    const Pe = () => {
       const i = this._header;
       return i && i.table && i.table.clientWidth;
-    }, Y = () => /* @__PURE__ */ r.createElement(
+    }, ee = () => /* @__PURE__ */ r.createElement(
       "div",
       {
         key: "no-records",
-        className: "k-grid-norecords",
-        style: { width: Fe() }
+        className: m(s.noRecords({})),
+        style: { width: Pe() }
       },
-      /* @__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,
+      /* @__PURE__ */ r.createElement(
+        "div",
+        {
+          className: m(s.noRecordsTemplate({})),
+          [st]: D.generateNavigatableId("no-records", n)
+        },
+        O.length ? O : /* @__PURE__ */ r.createElement(_t, null)
+      )
+    ), te = {
+      size: t,
       onPageChange: this.pagerPageChange,
       total: a,
       dir: this.isRtl ? "rtl" : void 0,
       skip: this.vs.propsSkip || 0,
       take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
-      messagesMap: pt,
-      ...It(this.props.pageable || {})
-    }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Q }) : /* @__PURE__ */ r.createElement(Xe, { className: "k-grid-pager", ...Q }), Le = (i) => this.props.sort && this.props.sort.filter((g) => g.field === i).length > 0, Me = (i, g) => /* @__PURE__ */ r.createElement(
+      messagesMap: ut,
+      ...kt(this.props.pageable || {})
+    }, se = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...te }) : /* @__PURE__ */ r.createElement(Ze, { className: m(s.pager({})), ...te }), We = (i, f) => /* @__PURE__ */ r.createElement(
       "col",
       {
-        key: g.toString(),
-        width: V(i)
+        key: f.toString(),
+        width: U(i)
       }
-    ), ee = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
+    ), ie = (ae = this.props.cells) != null && ae.footerCell || this._columns.some(
       (i) => {
-        var g;
-        return !!(i.footerCell || (g = i.cells) != null && g.footerCell);
+        var f;
+        return !!(i.footerCell || (f = i.cells) != null && f.footerCell);
       }
     ) ? /* @__PURE__ */ r.createElement(
-      lt,
+      dt,
       {
-        size: this.props.size,
+        size: t,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
         hasScrollbarWidth: !!this.getCachedScrollbarWidth(),
         ref: (i) => this._footer = i,
         row: /* @__PURE__ */ r.createElement(
-          St,
+          xt,
           {
             cells: this.props.cells,
-            idPrefix: p,
+            idPrefix: n,
             columns: this._columns,
             isRtl: this.isRtl,
-            ariaRowIndex: D + 1
+            ariaRowIndex: A + 1
           }
         ),
-        cols: C.map(Me)
+        cols: R.map(We)
       }
-    ) : null, te = /* @__PURE__ */ r.createElement(
+    ) : null, oe = /* @__PURE__ */ r.createElement(
       "colgroup",
       {
         ref: (i) => {
           this.columnResize.colGroupMain = i;
         }
       },
-      C.map(
-        (i, g) => /* @__PURE__ */ r.createElement(
+      R.map(
+        (i, f) => /* @__PURE__ */ r.createElement(
           "col",
           {
-            key: g.toString(),
-            className: Le(i.field) ? "k-sorted" : void 0,
-            width: V(i)
+            key: f.toString(),
+            className: we(i.field, this.props.sort) ? m(s.sorted({})) : void 0,
+            width: U(i)
           }
         )
       )
-    ), se = this.dragLogic.reorderable || this.dragLogic.groupable;
+    ), re = this.dragLogic.reorderable || this.dragLogic.groupable;
     if (this.props.scrollable === "none")
-      return /* @__PURE__ */ r.createElement(B.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
         "div",
         {
           id: this.props.id,
           style: this.props.style,
-          className: L(
-            "k-grid",
-            {
-              "k-grid-md": !this.props.size,
-              [`k-grid-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size
-            },
+          className: m(
+            s.wrapper({ size: t }),
             this.props.className
           ),
           ref: (i) => {
@@ -854,12 +857,12 @@ const z = class z extends r.Component {
           "aria-label": this.props.ariaLabel,
           onKeyDown: this.onKeyDown,
           onFocus: this.onFocus,
-          ...ne
+          ...ce
         },
-        R,
-        M,
+        G,
+        q,
         /* @__PURE__ */ r.createElement(
-          he,
+          ue,
           {
             selectable: this.props.selectable,
             onRelease: this.selectionRelease,
@@ -871,34 +874,28 @@ const z = class z extends r.Component {
             "table",
             {
               ref: (i) => this.headTable = i,
-              className: L(
-                "k-table k-grid-table",
-                { [`k-table-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
-              ),
-              style: { userSelect: d }
+              className: m(s.table({ size: t }))
             },
-            te,
-            $,
-            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...pe }, O),
-            ee
+            oe,
+            J,
+            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: m(s.tbody({})), ...ge }, P),
+            ie
           )
         ),
-        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 }))
-      ), T, this.props.pageable && Z);
-    let P = this.props.style || {};
-    return s && (P.height || (P = Object.assign({}, P, { height: "450px" }))), /* @__PURE__ */ r.createElement(B.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+        B && ee(),
+        re && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(fe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(me, { ref: this.dragLogic.refDragElementClue }))
+      ), j, this.props.pageable && se);
+    let W = this.props.style || {};
+    return p && (W.height || (W = Object.assign({}, W, { height: "450px" }))), /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
-        style: P,
-        className: L(
-          "k-grid",
-          {
-            "k-grid-md": !this.props.size,
-            [`k-grid-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
-            "k-grid-virtual": s
-          },
+        style: W,
+        className: m(
+          s.wrapper({
+            size: t,
+            virtual: p
+          }),
           this.props.className
         ),
         ref: (i) => {
@@ -907,31 +904,31 @@ const z = class z extends r.Component {
         "aria-label": this.props.ariaLabel,
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,
-        ...ne
+        ...ce
       },
-      R,
-      M,
+      G,
+      q,
       /* @__PURE__ */ r.createElement(
         "div",
         {
-          className: "k-grid-aria-root",
+          className: m(s.ariaRoot({})),
           role: "grid",
-          "aria-colcount": C.length,
+          "aria-colcount": R.length,
           "aria-rowcount": a,
           id: this._gridId,
-          "aria-label": c.toLanguageString(ue, dt[ue])
+          "aria-label": c.toLanguageString(be, gt[be])
         },
-        $,
-        /* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
+        J,
+        /* @__PURE__ */ r.createElement("div", { className: m(s.container({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
           "div",
           {
             ref: this.containerRef,
-            className: "k-grid-content k-virtual-content",
+            className: m(s.content({})),
             onScroll: this.scrollHandler,
             role: "presentation"
           },
-          /* @__PURE__ */ r.createElement("div", { className: "k-grid-table-wrap", role: "presentation" }, /* @__PURE__ */ r.createElement(
-            he,
+          /* @__PURE__ */ r.createElement("div", { className: m(s.tableWrap({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
+            ue,
             {
               selectable: this.props.selectable,
               onRelease: this.selectionRelease,
@@ -943,42 +940,40 @@ const z = class z extends r.Component {
               "table",
               {
                 ref: (i) => this.tableElement = i,
-                className: L(
-                  "k-table k-grid-table",
-                  {
-                    "k-table-md": !this.props.size,
-                    [`k-table-${G.sizeMap[this.props.size] || this.props.size}`]: this.props.size
-                  }
+                className: m(
+                  s.table({
+                    size: t
+                  })
                 ),
                 role: "presentation",
-                style: { userSelect: d }
+                style: { userSelect: z }
               },
-              te,
+              oe,
               /* @__PURE__ */ r.createElement(
                 "tbody",
                 {
-                  className: "k-table-tbody",
+                  className: m(s.tbody({})),
                   ref: this.tableBodyRef,
                   role: "rowgroup",
-                  ...pe
+                  ...ge
                 },
-                O
+                P
               )
             )
-          ), K && Y()),
-          s && /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
+          ), B && ee()),
+          p && /* @__PURE__ */ r.createElement("div", { className: m(s.heightContainer({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
             "div",
             {
-              style: s ? { height: this.vs.containerHeight + "px" } : {}
+              style: p ? { height: this.vs.containerHeight + "px" } : {}
             }
           ))
         )),
-        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(Ue, null)
+        ie,
+        re && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(fe, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(me, { ref: this.dragLogic.refDragElementClue })),
+        this.showLicenseWatermark && /* @__PURE__ */ r.createElement(qe, null)
       ),
-      T,
-      this.props.pageable && Z
+      j,
+      this.props.pageable && se
     ));
   }
   calculateMedia() {
@@ -986,8 +981,8 @@ const z = class z extends r.Component {
   }
   selectionChange(a) {
     if (this.props.onSelectionChange) {
-      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: s, cell: l } = le(this.props.selectable), h = {
-        ...this.getArguments(p.syntheticEvent),
+      const { event: n, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: s, cell: l } = pe(this.props.selectable), d = {
+        ...this.getArguments(n.syntheticEvent),
         dataItem: c,
         startColIndex: t,
         endColIndex: t,
@@ -1004,13 +999,13 @@ const z = class z extends r.Component {
         componentId: this._gridId,
         selectedField: this.props.selectedField || ""
       };
-      this.props.onSelectionChange.call(void 0, h);
+      this.props.onSelectionChange.call(void 0, d);
     }
   }
-  raiseDataEvent(a, p, c, e, t) {
+  raiseDataEvent(a, n, c, e, t) {
     const s = this.props.onDataStateChange;
     if (a) {
-      const l = { ...this.getArguments(e), ...p, targetEvent: t };
+      const l = { ...this.getArguments(e), ...n, targetEvent: t };
       a.call(void 0, l);
     } else
       s && s.call(
@@ -1025,60 +1020,60 @@ const z = class z extends r.Component {
         }
       );
   }
-  columnReorder(a, p, c) {
-    const e = this._columns[a], t = e.depth, s = (d) => {
+  columnReorder(a, n, c) {
+    const e = this._columns[a], t = e.depth, s = (h) => {
       do
-        d++;
-      while (d < this._columns.length && this._columns[d].depth > t);
-      return d;
+        h++;
+      while (h < this._columns.length && this._columns[h].depth > t);
+      return h;
     }, l = this._columns.splice(a, s(a) - a);
-    this._columns.splice(a < 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;
+    this._columns.splice(a < n ? s(n - l.length) : n, 0, ...l), this._columns.filter((h) => h.declarationIndex >= 0).forEach((h, g) => h.orderIndex = g), this._columnsMutations++;
+    const d = this._columns[a].locked && this._columns[n].locked;
+    et(this._columnsMap, this._columns, d || this._shouldUpdateLeftRight), tt(this._columnsMap, this._columns, d || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    const p = this.columns;
     if (this.forceUpdate(), this.props.onColumnReorder) {
-      const d = {
+      const h = {
         target: this,
-        columns: n,
+        columns: p,
         columnId: e.id,
         nativeEvent: c
       };
-      this.props.onColumnReorder.call(void 0, d);
+      this.props.onColumnReorder.call(void 0, h);
     }
   }
-  groupReorder(a, p, c) {
+  groupReorder(a, n, c) {
     if (this.props.group === void 0)
       return;
     const e = this.props.group.slice();
-    e.splice(p, 0, ...e.splice(a, 1)), this.groupChange(e, c);
+    e.splice(n, 0, ...e.splice(a, 1)), this.groupChange(e, c);
   }
-  columnToGroup(a, p, c) {
+  columnToGroup(a, n, 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);
+    t.splice(n, 0, { field: e }), this.groupChange(t, c);
   }
-  columnGroupChange(a, p) {
+  columnGroupChange(a, n) {
     const c = this.dragLogic.getCurrentGroupsLength;
-    this.columnToGroup(a, c, p);
+    this.columnToGroup(a, c, n);
   }
   resetTableWidth() {
     let a = 0;
     if (!this.columnResize.colGroupMain)
       return;
-    const p = this.columnResize.colGroupMain.children;
-    for (let c = 0; c < p.length; c++) {
-      const e = p[c].width;
+    const n = this.columnResize.colGroupMain.children;
+    for (let c = 0; c < n.length; c++) {
+      const e = n[c].width;
       if (!e)
         return;
       a += parseFloat(e.toString());
     }
     a = Math.round(a), this._header && this._header.setWidth(a), this._footer && this._footer.setWidth(a), this.tableElement && (this.tableElement.style.width = a + "px");
   }
-  initColumns(a, 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;
+  initColumns(a, n) {
+    const c = D.getIdPrefix(this.navigationStateRef), e = this.readColumns(a, c, this._columnsMutations), t = this.filterColumnsByMediaProp(e);
+    this._columns = t, this._columns.length === 0 && (this._columns = wt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, n, c), this._columnsMap = this.mapColumns(this._columns, this._columnsMutations), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
   }
   getDataState() {
     return {
@@ -1097,9 +1092,9 @@ const z = class z extends r.Component {
     };
   }
 };
-z.displayName = "KendoReactGrid", z.defaultProps = {
+H.displayName = "KendoReactGrid", H.defaultProps = {
   // never use this
-}, z.propTypes = {
+}, H.propTypes = {
   data: o.oneOfType([
     o.array,
     o.shape({
@@ -1180,9 +1175,9 @@ z.displayName = "KendoReactGrid", z.defaultProps = {
     })
   ]),
   size: o.oneOf(["small", "medium"])
-}, z.contextType = B;
-let U = z;
-ht(U);
+}, H.contextType = V;
+let $ = H;
+ct($);
 export {
-  U as Grid
+  $ as Grid
 };