@progress/kendo-react-grid 8.2.0-develop.8 → 8.2.0-develop.9

package/Grid.mjs

@@ -8,38 +8,38 @@
 "use client";
 import * as r from "react";
 import o from "prop-types";
-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 U, 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";
-import { Header as st } from "./header/Header.mjs";
-import { HeaderRow as it } from "./header/HeaderRow.mjs";
-import { FilterRow as ot } from "./header/FilterRow.mjs";
-import { GroupPanel as rt } from "./header/GroupPanel.mjs";
-import { Footer as at } from "./footer/Footer.mjs";
-import { provideLocalizationService as lt, registerForLocalization as nt } from "@progress/kendo-react-intl";
-import { pagerMessagesMap as ht, gridAriaLabel as ue, messages as pt } from "./messages/index.mjs";
-import { VirtualScroll as dt } from "./VirtualScroll.mjs";
+import { RowHeightService as re, getScrollbarWidth as Ge, dispatchEvent as Oe, canUseDOM as L, getActiveElement as Ke, memoizeOne as w, validatePackage as We, 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 $e, ClipboardService as je, TableKeyboardNavigationContext as V, isRtl as qe, tableColumnsVirtualization as Je, Pager as Xe, tableKeyboardNavigationScopeAttributes as ne, TableSelection as he, tableKeyboardNavigationBodyAttributes as pe, DropClue as de, DragClue as ce, updateLeft as Ye, updateRight as Qe, KEYBOARD_NAV_DATA_ID as Ze } from "@progress/kendo-react-data-tools";
+import { 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 ct } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as ut } from "./drag/CommonDragLogic.mjs";
-import { firefox as me, firefoxMaxHeight as fe, flatData as gt, readColumns as mt, sanitizeColumns as ft, getColumnWidth as B, 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";
-import { GridHeaderSelectionCell as yt } from "./header/GridHeaderSelectionCell.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 U, 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 yt } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as St } from "./header/GridHeaderSelectionCell.mjs";
 import { GridNoRecords as wt } 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 { FooterRow as It } from "./footer/FooterRow.mjs";
+import { normalize as kt } from "./paging/GridPagerSettings.mjs";
 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";
+import { GridDetailCell as Et } from "./cells/GridDetailCell.mjs";
+import { GridDetailHierarchyCell as xt } from "./cells/GridDetailHierarchyCell.mjs";
+import { SAFARI_REGEX as _t } from "./constants/index.mjs";
 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) => {
+    super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._focusFirst = !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.observer = null, this.handleIntersection = (e) => {
       const t = { rowIndex: this.rowIndex };
       e.forEach((s) => {
         s.isIntersecting || this.setCurrentOnTop(t);
@@ -83,7 +83,7 @@ const z = class z extends r.Component {
       }
     }, this.getVirtualScroll = (e) => {
       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;
+      return !f || E && !d || !!(l && p) && (!R || !d) ? ct : ge;
     }, this.isAllData = () => {
       const { data: e, total: t } = this.props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
@@ -107,14 +107,14 @@ const z = class z extends r.Component {
         const d = this.vs.rowHeightService.totalHeight();
         this.vs.containerHeight = me ? Math.min(fe, d) : d;
       }
-    }, this.scrollHandler = (e) => {
+    }, this.getCachedScrollbarWidth = () => (this._scrollbarWidth || (this._scrollbarWidth = Ge() || 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), Oe(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = s;
     }, this.onKeyDown = (e) => {
       if (_.onKeyDown(e, {
         contextStateRef: this.contextStateRef,
@@ -278,7 +278,7 @@ const z = class z extends r.Component {
       var p, n, d;
       if (!L)
         return !1;
-      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));
+      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));
       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(
@@ -294,12 +294,12 @@ const z = class z extends r.Component {
           target: this
         }
       );
-    }, this.reInitVirtualization = S((e, t, s, l, p, n) => {
+    }, this.reInitVirtualization = w((e, t, s, l, p, n) => {
       this.vs.reset();
       const d = this.getVirtualScroll(this.props);
       this.vs = new d(n);
-    }), this.flatData = S((e, t, s, l, p, n, d) => {
-      const f = [], R = gt(
+    }), this.flatData = w((e, t, s, l, p, n, d) => {
+      const f = [], R = mt(
         f,
         e,
         t,
@@ -308,13 +308,13 @@ const z = class z extends r.Component {
         p
       );
       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(
+    }), this.rowHeightService = w((e, t, s, l, p) => new re(t, s, l, p)), this.childrenToArray = w((e) => r.Children.toArray(e)), this.readColumns = w(
       (e, t, s) => {
         const l = e.filter((p) => p && p.type && p.type.displayName === "KendoReactGridColumn");
-        return mt(l, this.columns, { prevId: 0, idPrefix: t });
+        return ft(l, this.columns, { prevId: 0, idPrefix: t });
       }
-    ), this.mapColumns = S(
-      (e, t) => We(e, !0)
+    ), this.mapColumns = w(
+      (e, t) => $e(e, !0)
     ), this.filterHiddenColumns = (e) => {
       const t = (s) => {
         const l = s;
@@ -327,9 +327,9 @@ const z = class z extends r.Component {
         };
       };
       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.configureColumns = w((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;
+        n.width = n.width || "50px", n.cell = n.cell || et, n.headerCell = n.headerCell || St;
       });
       const l = {
         id: "",
@@ -353,7 +353,7 @@ const z = class z extends r.Component {
       let p = 0;
       this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
         ...l,
-        cell: et,
+        cell: tt,
         field: this.props.expandField,
         headerClassName: "k-hierarchy-cell k-header"
       }), p++);
@@ -361,13 +361,13 @@ const z = class z extends r.Component {
         e.unshift({
           ...l,
           isAccessible: !1,
-          cell: be,
+          cell: ve,
           field: "value",
           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, f, R, E, D, C, A) => /* @__PURE__ */ r.createElement(
-      it,
+    }), this.getHeaderRow = w((e, t, s, l, p, n, d, f, R, E, D, C, A) => /* @__PURE__ */ r.createElement(
+      ot,
       {
         cells: this.props.cells,
         sort: e,
@@ -400,13 +400,13 @@ const z = class z 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), Ke(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), We(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.vs = new c(h || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new gt(
       this.columnReorder.bind(this),
       this.groupReorder.bind(this),
       this.columnToGroup.bind(this)
-    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ct(this.onResize), this.props.clipboard && (this.clipboardService = new $e(this.onClipboard)), _.onConstructor({
+    ), this.columnGroupChange = this.columnGroupChange.bind(this), this.columnResize = new ut(this.onResize), this.props.clipboard && (this.clipboardService = new je(this.onClipboard)), _.onConstructor({
       navigatable: !!a.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -455,7 +455,7 @@ const z = class z extends r.Component {
   // tslint:enable:max-line-length
   get columns() {
     const a = this._columns.filter((h) => h.declarationIndex >= 0 && h.parentIndex === -1);
-    return ft(a);
+    return bt(a);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -478,8 +478,8 @@ const z = class z extends r.Component {
    */
   componentDidMount() {
     var c;
-    this.props.columnVirtualization && !navigator.userAgent.match(xt) && (this.headTable && (this.headTable.style.display = "block"), this.tableElement && (this.tableElement.style.display = "block")), this.resetTableWidth(), ae();
-    const a = je(this.element);
+    this.props.columnVirtualization && !navigator.userAgent.match(_t) && (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({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
@@ -505,7 +505,7 @@ const z = class z 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 = ""), _.onComponentDidUpdate({
+    this.resetTableWidth(), ae(this.getCachedScrollbarWidth()), 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,
@@ -525,7 +525,7 @@ const z = class z extends r.Component {
   render() {
     var ie;
     let a = this.props.total || 0;
-    const h = k.getIdPrefix(this.navigationStateRef), c = lt(this);
+    const h = k.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: p } = this.flatData(
@@ -545,7 +545,7 @@ const z = class z extends r.Component {
     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,
+      at,
       {
         group: this.props.group || [],
         groupChange: this.groupChange,
@@ -557,20 +557,21 @@ const z = class z 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: ze } = this.props, $ = /* @__PURE__ */ r.createElement(
-      st,
+    ), { sort: ye, sortable: Se, group: we, filter: Ie, filterable: ke, filterOperators: Ee = Ce, headerCellRender: xe, columnMenu: _e, columnMenuIcon: ze } = this.props, $ = /* @__PURE__ */ r.createElement(
+      it,
       {
         size: this.props.size,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
         scrollableDataElement: () => this.vs.container,
+        hasScrollbarWidth: !!this.getCachedScrollbarWidth(),
         draggable: this.props.reorderable || n,
         ref: this.headerRef,
         elemRef: this.headerElementRef,
         headerRow: this.getHeaderRow(
           ye,
-          we,
           Se,
+          we,
           n,
           Ie,
           ke,
@@ -583,7 +584,7 @@ const z = class z extends r.Component {
           this.isRtl
         ),
         filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
-          ot,
+          rt,
           {
             cells: this.props.cells,
             size: this.props.size,
@@ -601,53 +602,53 @@ const z = class z extends r.Component {
           "col",
           {
             key: g.toString(),
-            width: B(i)
+            width: U(i)
           }
         ))
       }
-    ), De = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, Te = 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 } = Je({
       enabled: this.props.columnVirtualization,
       columns: C,
       tableViewPortWidth: Te,
       scrollLeft: De
     }), Ne = (i, g, m) => {
       let x = !1;
-      const I = this.props.selectedField ? ve(this.props.selectedField, i.dataItem) : void 0;
+      const I = this.props.selectedField ? be(this.props.selectedField, i.dataItem) : void 0;
       return {
-        row: C.map((u, v) => {
-          if (Fe[v])
+        row: C.map((u, b) => {
+          if (Fe[b])
             return null;
-          const H = u.id ? u.id : v, F = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
-          let w = !1;
+          const H = u.id ? u.id : b, F = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
+          let S = !1;
           if (u.editable && this.props.editField) {
-            const b = ve(this.props.editField, i.dataItem);
-            b && (b === !0 || b === u.field) && (x = !0, w = !0);
+            const v = be(this.props.editField, i.dataItem);
+            v && (v === !0 || v === u.field) && (x = !0, S = !0);
           }
-          const V = u.cell || w && tt || Ct, N = this.props.expandField && this.props.detail && u.field === this.props.expandField;
+          const W = u.cell || S && st || Rt, N = this.props.expandField && this.props.detail && u.field === this.props.expandField;
           return /* @__PURE__ */ r.createElement(
-            V,
+            W,
             {
               onContextMenu: this.onContextMenu,
               key: H,
               locked: this.props.lockGroups,
               id: k.generateNavigatableId(
-                `${g}-${String(v)}`,
+                `${g}-${String(b)}`,
                 h,
                 N || i.rowType === "groupHeader" || i.rowType === "groupFooter" || u.field === "value" ? "nodata" : "cell"
               ),
-              colSpan: He[v],
+              colSpan: He[b],
               dataItem: i.dataItem,
               field: u.field,
               editor: u.editor,
               format: u.format,
               className: F,
               render: this.props.cellRender,
-              cells: bt(this.props.cells, u.cells),
+              cells: Ct(this.props.cells, u.cells),
               onChange: this.itemChange,
-              selectionChange: this.props.onSelectionChange ? (b) => {
-                this.selectionChange({ event: b, dataItem: i.dataItem, dataIndex: m, columnIndex: v });
+              selectionChange: this.props.onSelectionChange ? (v) => {
+                this.selectionChange({ event: v, dataItem: i.dataItem, dataIndex: m, columnIndex: b });
               } : void 0,
-              columnIndex: v,
+              columnIndex: b,
               columnsCount: C.length,
               rowType: i.rowType,
               level: i.level,
@@ -655,7 +656,7 @@ const z = class z extends r.Component {
               dataIndex: i.dataIndex,
               style: y,
               ariaColumnIndex: u.ariaColumnIndex,
-              isSelected: Array.isArray(I) && I.indexOf(v) > -1
+              isSelected: Array.isArray(I) && I.indexOf(b) > -1
             }
           );
         }),
@@ -682,9 +683,9 @@ const z = class z extends r.Component {
       let i = -1, g = 0;
       (this._slicedData || this._data).forEach((m, x) => {
         m.rowType === "data" && (J++, i++);
-        const I = J % 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 + X + g, P.push(/* @__PURE__ */ r.createElement(
-          Rt,
+        const I = J % 2 === 0, u = this.props.dataItemKey && Ue(this.props.dataItemKey)(m.dataItem), b = x + (this.vs.realSkip || 0), H = u || "ai" + b, F = H + "_1", y = Ne(m, H, i);
+        if (T = b + X + g, P.push(/* @__PURE__ */ r.createElement(
+          yt,
           {
             key: H,
             dataItem: m.dataItem,
@@ -692,20 +693,20 @@ const z = class z extends r.Component {
             isInEdit: y.isInEdit,
             rowType: m.rowType,
             isHidden: q(x),
-            onClick: (w) => this.rowClick(w, m),
-            onDoubleClick: (w) => this.rowDblClick(w, m),
+            onClick: (S) => this.rowClick(S, m),
+            onDoubleClick: (S) => this.rowDblClick(S, m),
             selectedField: this.props.selectedField,
             rowHeight: this.props.rowHeight,
             render: this.props.rowRender,
             ariaRowIndex: T,
-            absoluteRowIndex: v,
-            dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? v : i,
+            absoluteRowIndex: b,
+            dataIndex: this.vs.scrollableVirtual && !this.props.groupable ? b : i,
             isSelected: y.isSelected
           },
           y.row
         )), 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++, T = v + X + g, P.push(/* @__PURE__ */ r.createElement(
+          const S = C.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
+          g++, T = b + X + g, P.push(/* @__PURE__ */ r.createElement(
             "tr",
             {
               key: F,
@@ -717,15 +718,15 @@ const z = class z extends r.Component {
               role: "row",
               "aria-rowindex": T
             },
-            this.props.group && this.props.group.map((V, N) => {
+            this.props.group && this.props.group.map((W, N) => {
               var oe;
-              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 } : {};
+              const v = (oe = y == null ? void 0 : y.row[N]) == null ? void 0 : oe.props.style, Pe = v ? this.isRtl ? { left: v.right, right: v.left } : { left: v.left, right: v.right } : {};
               return /* @__PURE__ */ r.createElement(
-                be,
+                ve,
                 {
                   id: "",
                   dataIndex: m.dataIndex,
-                  field: V.field,
+                  field: W.field,
                   dataItem: m.dataItem,
                   key: N,
                   style: Pe,
@@ -738,18 +739,18 @@ const z = class z extends r.Component {
               );
             }),
             this.props.expandField && /* @__PURE__ */ r.createElement(
-              Et,
+              xt,
               {
                 id: k.generateNavigatableId(`${F}-dhcell`, h)
               }
             ),
             /* @__PURE__ */ r.createElement(
-              kt,
+              Et,
               {
                 onContextMenu: this.onContextMenu,
                 dataItem: m.dataItem,
                 dataIndex: m.dataIndex,
-                colSpan: w,
+                colSpan: S,
                 ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
                 detail: this.props.detail,
                 id: k.generateNavigatableId(`${F}-dcell`, h)
@@ -770,7 +771,7 @@ const z = class z extends r.Component {
         className: "k-grid-norecords",
         style: { width: Le() }
       },
-      /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Qe]: k.generateNavigatableId("no-records", h) }, E.length ? E : /* @__PURE__ */ r.createElement(wt, null))
+      /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template", [Ze]: k.generateNavigatableId("no-records", h) }, E.length ? E : /* @__PURE__ */ r.createElement(wt, null))
     ), Q = {
       size: this.props.size,
       onPageChange: this.pagerPageChange,
@@ -778,14 +779,14 @@ const z = class z extends r.Component {
       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: ht,
+      messagesMap: pt,
       navigatable: this.props.navigatable,
-      ...It(this.props.pageable || {})
-    }, 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(
+      ...kt(this.props.pageable || {})
+    }, Z = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Q }) : /* @__PURE__ */ r.createElement(Xe, { 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: U(i)
       }
     ), ee = (ie = this.props.cells) != null && ie.footerCell || this._columns.some(
       (i) => {
@@ -793,14 +794,15 @@ const z = class z extends r.Component {
         return !!(i.footerCell || (g = i.cells) != null && g.footerCell);
       }
     ) ? /* @__PURE__ */ r.createElement(
-      at,
+      lt,
       {
         size: this.props.size,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
+        hasScrollbarWidth: !!this.getCachedScrollbarWidth(),
         ref: (i) => this._footer = i,
         row: /* @__PURE__ */ r.createElement(
-          St,
+          It,
           {
             cells: this.props.cells,
             idPrefix: h,
@@ -824,13 +826,13 @@ const z = class z extends r.Component {
           {
             key: g.toString(),
             className: Me(i.field) ? "k-sorted" : void 0,
-            width: B(i)
+            width: U(i)
           }
         )
       )
     ), se = this.dragLogic.reorderable || this.dragLogic.groupable;
     if (this.props.scrollable === "none")
-      return /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
         "div",
         {
           id: this.props.id,
@@ -882,7 +884,7 @@ const z = class z extends r.Component {
         se && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ce, { ref: this.dragLogic.refDragElementClue }))
       ), D, this.props.pageable && Z);
     let G = this.props.style || {};
-    return s && (G.height || (G = Object.assign({}, G, { height: "450px" }))), /* @__PURE__ */ r.createElement(U.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+    return s && (G.height || (G = Object.assign({}, G, { height: "450px" }))), /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
@@ -914,7 +916,7 @@ const z = class z extends r.Component {
           "aria-colcount": C.length,
           "aria-rowcount": a,
           id: this._gridId,
-          "aria-label": c.toLanguageString(ue, pt[ue])
+          "aria-label": c.toLanguageString(ue, dt[ue])
         },
         $,
         /* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
@@ -1029,7 +1031,7 @@ const z = class z extends r.Component {
     }, 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, f) => d.orderIndex = f), this._columnsMutations++;
     const p = this._columns[a].locked && this._columns[h].locked;
-    Xe(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), Ye(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    Ye(this._columnsMap, this._columns, p || this._shouldUpdateLeftRight), Qe(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 = {
@@ -1170,9 +1172,9 @@ z.displayName = "KendoReactGrid", z.defaultProps = {
   dataItemKey: o.string,
   navigatable: o.bool,
   size: o.oneOf(["small", "medium"])
-}, z.contextType = U;
-let W = z;
-nt(W);
+}, z.contextType = V;
+let B = z;
+ht(B);
 export {
-  W as Grid
+  B as Grid
 };