@progress/kendo-react-grid 7.0.0-develop.9 → 7.0.0

package/index.mjs

@@ -2,23 +2,24 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
+"use client";
 import * as l from "react";
 import * as p from "prop-types";
-import { guid as oe, Keys as me, IconWrap as O, classNames as y, getScrollbarWidth as St, kendoThemeMaps as K, Draggable as yt, dispatchEvent as ps, memoizeOne as B, validatePackage as us, shouldShowValidationUI as gs, canUseDOM as ot, setScrollbarWidth as lt, getter as ye, WatermarkOverlay as fs, toIconName as ms, clone as Cs } from "@progress/kendo-react-common";
-import { tableKeyboardNavigationTools as z, useTableKeyboardNavigation as q, TABLE_ROW_INDEX_ATTRIBUTE as bs, TABLE_COL_INDEX_ATTRIBUTE as xs, isRtl as wt, tableKeyboardNavigationHeaderAttributes as nt, ColumnResizer as ks, HeaderThElement as Rt, getIndex as at, tableKeyboardNavigation as X, getSelectionOptions as ht, mapColumns as vs, tableColumnsVirtualization as Es, Pager as Is, TableKeyboardNavigationContext as we, tableKeyboardNavigationScopeAttributes as ct, TableSelection as dt, tableKeyboardNavigationBodyAttributes as pt, DropClue as ut, DragClue as gt, updateLeft as Ss, updateRight as ys } from "@progress/kendo-react-data-tools";
-import { getSelectedState as Yr, getSelectedStateFromKeyDown as Jr, setSelectedState as Qr } from "@progress/kendo-react-data-tools";
-import { useLocalization as Ft, provideLocalizationService as T, registerForLocalization as G, useInternationalization as ws, registerForIntl as Nt } from "@progress/kendo-react-intl";
-import { minusIcon as Rs, plusIcon as Fs, moreVerticalIcon as Ns, sortAscSmallIcon as We, sortDescSmallIcon as Ve, filterIcon as Ke, filterClearIcon as Ds, xCircleIcon as Ms, caretAltDownIcon as Ts, caretAltLeftIcon as Gs, caretAltRightIcon as Hs, groupIcon as zs, ungroupIcon as Ls, searchIcon as Dt, xIcon as Os } from "@progress/kendo-svg-icons";
-import { NumericTextBox as Ue, TextBox as Mt, Input as Tt, Checkbox as fe, InputPrefix as _s } from "@progress/kendo-react-inputs";
-import { DatePicker as qe } from "@progress/kendo-react-dateinputs";
-import { Popup as Ps } from "@progress/kendo-react-popup";
+import { useId as It, Keys as me, IconWrap as O, classNames as y, getScrollbarWidth as St, kendoThemeMaps as K, Draggable as yt, withIdHOC as wt, dispatchEvent as us, memoizeOne as B, validatePackage as gs, shouldShowValidationUI as fs, canUseDOM as it, setScrollbarWidth as ot, getter as Se, WatermarkOverlay as ms, toIconName as Cs, clone as bs } from "@progress/kendo-react-common";
+import { tableKeyboardNavigationTools as z, useTableKeyboardNavigation as q, TABLE_ROW_INDEX_ATTRIBUTE as xs, TABLE_COL_INDEX_ATTRIBUTE as ks, isRtl as Rt, tableKeyboardNavigationHeaderAttributes as lt, ColumnResizer as vs, HeaderThElement as Ft, getIndex as nt, tableKeyboardNavigation as X, getSelectionOptions as at, mapColumns as Es, tableColumnsVirtualization as Is, Pager as Ss, TableKeyboardNavigationContext as ye, tableKeyboardNavigationScopeAttributes as ht, TableSelection as ct, tableKeyboardNavigationBodyAttributes as dt, DropClue as pt, DragClue as ut, updateLeft as ys, updateRight as ws } from "@progress/kendo-react-data-tools";
+import { getSelectedState as ei, getSelectedStateFromKeyDown as ti, setSelectedState as si } from "@progress/kendo-react-data-tools";
+import { useLocalization as Nt, provideLocalizationService as G, registerForLocalization as M, useInternationalization as Rs, registerForIntl as Dt } from "@progress/kendo-react-intl";
+import { minusIcon as Fs, plusIcon as Ns, moreVerticalIcon as Ds, sortAscSmallIcon as Be, sortDescSmallIcon as We, filterIcon as Ve, filterClearIcon as Ts, xCircleIcon as Gs, caretAltDownIcon as Ms, caretAltLeftIcon as Hs, caretAltRightIcon as zs, groupIcon as Ls, ungroupIcon as Os, searchIcon as Tt, xIcon as _s } from "@progress/kendo-svg-icons";
+import { NumericTextBox as Ke, TextBox as Gt, Input as Mt, Checkbox as fe, InputPrefix as Ps } from "@progress/kendo-react-inputs";
+import { DatePicker as Ue } from "@progress/kendo-react-dateinputs";
+import { Popup as As } from "@progress/kendo-react-popup";
 import { Button as W } from "@progress/kendo-react-buttons";
-import { DropDownList as le } from "@progress/kendo-react-dropdowns";
-import { isCompositeFilterDescriptor as ft, filterBy as mt } from "@progress/kendo-data-query";
-import { Reveal as As } from "@progress/kendo-react-animation";
-const ce = (r) => null;
-ce.displayName = "KendoReactGridColumn";
-ce.defaultProps = {
+import { DropDownList as oe } from "@progress/kendo-react-dropdowns";
+import { isCompositeFilterDescriptor as gt, filterBy as ft } from "@progress/kendo-data-query";
+import { Reveal as Bs } from "@progress/kendo-react-animation";
+const he = (r) => null;
+he.displayName = "KendoReactGridColumn";
+he.defaultProps = {
   filterable: !0,
   editable: !0,
   sortable: !0,
@@ -26,7 +27,7 @@ ce.defaultProps = {
   reorderable: !0,
   groupable: !0
 };
-ce.propTypes = {
+he.propTypes = {
   field: p.string,
   title: p.string,
   editable: p.bool,
@@ -57,14 +58,14 @@ ce.propTypes = {
   columnMenu: p.any,
   locked: p.bool
 };
-function M(r, t) {
+function T(r, t) {
   const s = (r || "").split(".");
   let o = t;
   return s.forEach((e) => {
     o = o ? o[e] : void 0;
   }), o;
 }
-function Gt(r, t, s, o, e, i, n = 0) {
+function Ht(r, t, s, o, e, i, n = 0) {
   let a = n;
   for (let h = 0; h < t.length; h++) {
     if (!e || t[h].value === void 0 || t[h].items === void 0) {
@@ -73,12 +74,12 @@ function Gt(r, t, s, o, e, i, n = 0) {
         dataItem: t[h],
         rowType: "data",
         level: n,
-        expanded: i === void 0 || M(i, t[h])
+        expanded: i === void 0 || T(i, t[h])
       }, o.index++;
       continue;
     }
     a = Math.max(a, n + 1);
-    const c = i === void 0 || M(i, t[h]) === void 0 || M(i, t[h]);
+    const c = i === void 0 || T(i, t[h]) === void 0 || T(i, t[h]);
     r[r.length] = {
       dataIndex: -1,
       dataItem: t[h],
@@ -86,7 +87,7 @@ function Gt(r, t, s, o, e, i, n = 0) {
       rowType: "groupHeader",
       expanded: c
     }, c && (a = Math.max(
-      Gt(r, t[h].items, s, o, e, i, n + 1),
+      Ht(r, t[h].items, s, o, e, i, n + 1),
       a
     )), (s === "always" || c && s === "visible") && (r[r.length] = {
       dataIndex: -1,
@@ -98,17 +99,17 @@ function Gt(r, t, s, o, e, i, n = 0) {
   }
   return a;
 }
-function Ht(r, t, s, o = 0) {
+function zt(r, t, s, o = 0) {
   let e = [];
   if (!r)
     return [];
   r && r.length === void 0 && (r = [r]), r.forEach((n, a) => {
     n = n.props ? n.props : n;
-    const h = t[a] || null, c = Ht(n.children, h && h.children || [], s, o + 1);
+    const h = t[a] || null, c = zt(n.children, h && h.children || [], s, o + 1);
     e.push(
       Object.assign(
         { depth: o },
-        ce.defaultProps,
+        he.defaultProps,
         c.length ? { cell: () => null, filterCell: () => null } : {},
         h ? { width: h.width, orderIndex: h.orderIndex } : {},
         n,
@@ -135,7 +136,7 @@ function Ht(r, t, s, o = 0) {
   }
   return e;
 }
-function Bs(r, t, s, o) {
+function Ws(r, t, s, o) {
   let e = [];
   Array.isArray(r) ? e = r : r && (e = r.data);
   const i = [];
@@ -161,14 +162,14 @@ function Bs(r, t, s, o) {
           ariaColumnIndex: 0,
           isAccessible: !0
         },
-        ce.defaultProps,
+        he.defaultProps,
         { field: h }
       ));
     });
   }
   return i;
 }
-const Ws = (r, t) => {
+const Vs = (r, t) => {
   let s = r[t.parentIndex];
   for (; s; ) {
     if (s.footerCell)
@@ -176,7 +177,7 @@ const Ws = (r, t) => {
     s = r[s.parentIndex];
   }
   return !1;
-}, Vs = (r) => r.filter((t) => Ws(r, t) ? !1 : !!t.footerCell || !(t.children && t.children.length > 0)), Se = (r) => r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) + "px" : void 0, zt = (r) => (r.sort((t, s) => t.declarationIndex - s.declarationIndex), r.map((t) => {
+}, Ks = (r) => r.filter((t) => Vs(r, t) ? !1 : !!t.footerCell || !(t.children && t.children.length > 0)), Ie = (r) => r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) + "px" : void 0, Lt = (r) => (r.sort((t, s) => t.declarationIndex - s.declarationIndex), r.map((t) => {
   const {
     declarationIndex: s,
     parentIndex: o,
@@ -189,10 +190,10 @@ const Ws = (r, t) => {
     ...d
   } = t;
   return c.length ? {
-    children: zt(c),
+    children: Lt(c),
     ...d
   } : d;
-})), Re = typeof window < "u" && /Firefox/.test(window.navigator.userAgent), Ct = 17895697, Ce = (r, t) => {
+})), we = typeof window < "u" && /Firefox/.test(window.navigator.userAgent), mt = 17895697, Ce = (r, t) => {
   if (!(!r && !t))
     return t ? r ? {
       ...r,
@@ -214,13 +215,13 @@ const Ws = (r, t) => {
         ...t.edit || {}
       }
     } : t : r;
-}, Ks = (r) => {
+}, Us = (r) => {
   const t = l.useCallback(
     (d) => {
       r.selectionChange && r.selectionChange({ syntheticEvent: d });
     },
     [r.selectionChange]
-  ), s = l.useMemo(() => oe(), []), o = M(r.field, r.dataItem), e = q(r.id);
+  ), s = It(), o = T(r.field, r.dataItem), e = q(r.id);
   let i = {
     colSpan: r.colSpan,
     style: r.style,
@@ -254,38 +255,38 @@ const Ws = (r, t) => {
     return /* @__PURE__ */ l.createElement(d, { ...r, tdProps: i }, n);
   }
   return r.render ? r.render.call(void 0, a, r) : a;
-}, Fe = "grid.noRecords", Us = "grid.pagerInfo", qs = "grid.pagerFirstPage", $s = "grid.pagerPreviousPage", js = "grid.pagerNextPage", Xs = "grid.pagerLastPage", Ys = "grid.pagerItemsPerPage", Js = "grid.pagerPage", Qs = "grid.pagerPageSizeAriaLabel", Zs = "grid.pagerOf", er = "grid.pagerTotalPages", Ne = "grid.groupPanelEmpty", Lt = "grid.groupColumn", Ot = "grid.ungroupColumn", De = "grid.columnMenu", U = "grid.filterClearButton", ne = "grid.filterSubmitButton", ae = "grid.filterTitle", Me = "grid.sortAscending", Te = "grid.sortDescending", Ge = "grid.searchPlaceholder", He = "grid.filterCheckAll", ze = "grid.filterChooseOperator", Le = "grid.filterSelectedItems", Oe = "grid.sortAriaLabel", _e = "grid.filterAriaLabel", Pe = "grid.groupPanelAriaLabel", _t = "grid.groupExpand", Pt = "grid.groupCollapse", At = "grid.detailExpand", Bt = "grid.detailCollapse", v = {
-  [At]: "Expand detail row",
-  [Bt]: "Collapse detail row",
-  [_t]: "Expand group",
-  [Pt]: "Collapse Group",
-  [Fe]: "No records available",
-  [Ne]: "Drag a column header and drop it here to group by that column",
+}, Re = "grid.noRecords", qs = "grid.pagerInfo", $s = "grid.pagerFirstPage", js = "grid.pagerPreviousPage", Xs = "grid.pagerNextPage", Ys = "grid.pagerLastPage", Js = "grid.pagerItemsPerPage", Qs = "grid.pagerPage", Zs = "grid.pagerPageSizeAriaLabel", er = "grid.pagerOf", tr = "grid.pagerTotalPages", Fe = "grid.groupPanelEmpty", Ot = "grid.groupColumn", _t = "grid.ungroupColumn", Ne = "grid.columnMenu", U = "grid.filterClearButton", le = "grid.filterSubmitButton", ne = "grid.filterTitle", De = "grid.sortAscending", Te = "grid.sortDescending", Ge = "grid.searchPlaceholder", Me = "grid.filterCheckAll", He = "grid.filterChooseOperator", ze = "grid.filterSelectedItems", Le = "grid.sortAriaLabel", Oe = "grid.filterAriaLabel", _e = "grid.groupPanelAriaLabel", Pt = "grid.groupExpand", At = "grid.groupCollapse", Bt = "grid.detailExpand", Wt = "grid.detailCollapse", v = {
+  [Bt]: "Expand detail row",
+  [Wt]: "Collapse detail row",
+  [Pt]: "Expand group",
+  [At]: "Collapse Group",
+  [Re]: "No records available",
+  [Fe]: "Drag a column header and drop it here to group by that column",
   [U]: "Clear",
+  [le]: "Filter",
   [ne]: "Filter",
-  [ae]: "Filter",
-  [Me]: "Sort Ascending",
+  [De]: "Sort Ascending",
   [Te]: "Sort Descending",
-  [Oe]: "Sortable",
-  [Lt]: "Group Column",
-  [Ot]: "Ungroup Column",
-  [De]: "Column menu",
-  [Ys]: "items per page",
-  [Us]: "{0} - {1} of {2} items",
-  [qs]: "Go to the first page",
-  [$s]: "Go to the previous page",
-  [js]: "Go to the next page",
-  [Xs]: "Go to the last page",
-  [Js]: "Page",
-  [Qs]: "Page size",
-  [Zs]: "of",
-  [er]: "{0}",
+  [Le]: "Sortable",
+  [Ot]: "Group Column",
+  [_t]: "Ungroup Column",
+  [Ne]: "Column menu",
+  [Js]: "items per page",
+  [qs]: "{0} - {1} of {2} items",
+  [$s]: "Go to the first page",
+  [js]: "Go to the previous page",
+  [Xs]: "Go to the next page",
+  [Ys]: "Go to the last page",
+  [Qs]: "Page",
+  [Zs]: "Page size",
+  [er]: "of",
+  [tr]: "{0}",
   [Ge]: "Search",
-  [He]: "Check All",
-  [ze]: "Choose Operator",
-  [Le]: "selected items",
-  [_e]: "Filter",
-  [Pe]: "Group panel",
+  [Me]: "Check All",
+  [He]: "Choose Operator",
+  [ze]: "selected items",
+  [Oe]: "Filter",
+  [_e]: "Group panel",
   "grid.filterEqOperator": "Is equal to",
   "grid.filterNotEqOperator": "Is not equal to",
   "grid.filterIsNullOperator": "Is null",
@@ -310,13 +311,13 @@ const Ws = (r, t) => {
   "grid.filterAndLogic": "And",
   "grid.filterOrLogic": "Or"
 };
-function tr(r) {
+function sr(r) {
   const t = r.replace(/^pager\.([a-z])/, (s, o) => "grid.pager" + o.toUpperCase());
   return { messageKey: t, defaultMessage: v[t] };
 }
-const sr = (r) => {
+const rr = (r) => {
   let t = null, s = null, o = null;
-  const e = M(r.field, r.dataItem), i = q(r.id), n = Ft(), a = l.useCallback(
+  const e = T(r.field, r.dataItem), i = q(r.id), n = Nt(), a = l.useCallback(
     (d) => {
       d.isDefaultPrevented() || d.keyCode === me.enter && r.onChange && (d.preventDefault(), r.onChange({
         dataItem: r.dataItem,
@@ -340,7 +341,7 @@ const sr = (r) => {
       }
     );
   else if (r.rowType !== "groupHeader") {
-    const d = e ? Bt : At, g = n.toLanguageString(d, v[d]);
+    const d = e ? Wt : Bt, g = n.toLanguageString(d, v[d]);
     s = {
       className: "k-table-td k-hierarchy-cell",
       onKeyDown: a,
@@ -364,7 +365,7 @@ const sr = (r) => {
         href: "#",
         tabIndex: -1
       },
-      /* @__PURE__ */ l.createElement(O, { name: e ? "minus" : "plus", icon: e ? Rs : Fs })
+      /* @__PURE__ */ l.createElement(O, { name: e ? "minus" : "plus", icon: e ? Fs : Ns })
     ), t = /* @__PURE__ */ l.createElement(
       "td",
       {
@@ -379,12 +380,12 @@ const sr = (r) => {
     return /* @__PURE__ */ l.createElement(d, { ...r, tdProps: s }, o);
   }
   return r.render ? r.render.call(void 0, t, r) : t;
-}, rr = bs, re = xs, ir = (r) => {
-  const t = M(r.field, r.dataItem);
+}, ir = xs, re = ks, or = (r) => {
+  const t = T(r.field, r.dataItem);
   let s = null;
   const o = y("k-table-td", "k-grid-edit-cell", {
     ["k-selected"]: r.isSelected
-  }, r.className), e = l.useMemo(() => oe(), []), i = q(r.id);
+  }, r.className), e = It(), i = q(r.id);
   let n = null, a = null;
   const h = l.useCallback(
     (u) => {
@@ -427,7 +428,7 @@ const sr = (r) => {
         role: "gridcell",
         ...i
       }, a = /* @__PURE__ */ l.createElement(
-        Ue,
+        Ke,
         {
           width: "100%",
           value: t === void 0 ? null : t,
@@ -454,7 +455,7 @@ const sr = (r) => {
         role: "gridcell",
         ...i
       }, a = /* @__PURE__ */ l.createElement(
-        qe,
+        Ue,
         {
           width: "100%",
           value: t,
@@ -534,7 +535,7 @@ const sr = (r) => {
   }
   return r.render ? r.render.call(void 0, s, r) : s;
 };
-class or extends l.Component {
+class lr extends l.Component {
   constructor() {
     super(...arguments), this.headerWrap = null, this.table = null, this.syncScroll = !1, this.scrollbarWidth = St(), this.onScroll = (t) => {
       if (this.syncScroll) {
@@ -551,7 +552,7 @@ class or extends l.Component {
     return this.props.elemRef.current;
   }
   componentDidMount() {
-    const t = wt(this.element);
+    const t = Rt(this.element);
     this.props.columnResize && this.props.columnResize.setIsRtl(t), this.forceUpdate();
   }
   /**
@@ -609,7 +610,7 @@ class or extends l.Component {
           /* @__PURE__ */ l.createElement("colgroup", { ref: (t) => {
             this.props.columnResize.colGroupHeader = t;
           } }, this.props.cols),
-          /* @__PURE__ */ l.createElement("thead", { className: "k-table-thead", role: "rowgroup", ...nt }, this.props.headerRow, this.props.filterRow)
+          /* @__PURE__ */ l.createElement("thead", { className: "k-table-thead", role: "rowgroup", ...lt }, this.props.headerRow, this.props.filterRow)
         )
       )
     ) : /* @__PURE__ */ l.createElement(
@@ -620,15 +621,15 @@ class or extends l.Component {
           "k-table-thead",
           { "k-grid-draggable-header": this.props.draggable }
         ),
-        ...nt
+        ...lt
       },
       this.props.headerRow,
       this.props.filterRow
     );
   }
 }
-const Wt = (...r) => Object.assign({ allowUnsort: !0, mode: "single" }, ...r);
-class lr extends l.PureComponent {
+const Vt = (...r) => Object.assign({ allowUnsort: !0, mode: "single" }, ...r);
+class nr extends l.PureComponent {
   constructor() {
     super(...arguments), this.draggable = null, this.onPress = (t) => {
       const s = this.draggable && this.draggable.element;
@@ -658,7 +659,7 @@ class lr extends l.PureComponent {
     );
   }
 }
-class Vt extends l.Component {
+class Kt extends l.Component {
   constructor() {
     super(...arguments), this.state = {
       show: !1
@@ -692,7 +693,7 @@ class Vt extends l.Component {
     };
   }
   render() {
-    const { columnMenu: t, ...s } = this.props, { column: o } = this.props, e = T(this), i = o.title || o.field, n = i ? `${i} ` : "";
+    const { columnMenu: t, ...s } = this.props, { column: o } = this.props, e = G(this), i = o.title || o.field, n = i ? `${i} ` : "";
     return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
       "a",
       {
@@ -702,11 +703,11 @@ class Vt extends l.Component {
         onMouseDown: this.onAnchorMouseDown,
         onKeyDown: this.onAnchorKeyDown,
         href: "#",
-        "aria-label": `${n}${e.toLanguageString(De, v[De])}`
+        "aria-label": `${n}${e.toLanguageString(Ne, v[Ne])}`
       },
-      /* @__PURE__ */ l.createElement(O, { name: "more-vertical", icon: Ns })
+      /* @__PURE__ */ l.createElement(O, { name: "more-vertical", icon: Ds })
     ), /* @__PURE__ */ l.createElement(
-      Ps,
+      As,
       {
         anchor: this._anchor,
         show: this.state.show
@@ -732,7 +733,7 @@ class Vt extends l.Component {
     ));
   }
 }
-class nr extends l.Component {
+class ar extends l.Component {
   /**
    * @hidden
    */
@@ -752,19 +753,19 @@ class nr extends l.Component {
       },
       /* @__PURE__ */ l.createElement("span", { className: "k-column-title" }, this.props.title || this.props.field || " "),
       this.props.children
-    ), t.columnMenu && /* @__PURE__ */ l.createElement(Vt, { ...t }));
+    ), t.columnMenu && /* @__PURE__ */ l.createElement(Kt, { ...t }));
     return this.props.render ? this.props.render.call(void 0, o, this.props) : o;
   }
 }
-const ar = {
+const hr = {
   true: { asc: "desc", desc: "", "": "asc" },
   false: { asc: "desc", desc: "asc", "": "asc" }
-}, hr = {
+}, cr = {
   none: "none",
   asc: "ascending",
   desc: "descending"
 };
-class Kt extends l.Component {
+class Ut extends l.Component {
   constructor(t) {
     super(t), this.serviceIndex = 0, this.index = -1, this.cellKeyDown = (s, o) => {
       s.isDefaultPrevented() || s.keyCode === me.enter && this.cellClick(s, o);
@@ -776,9 +777,9 @@ class Kt extends l.Component {
         "k-header": !0,
         "k-grid-header-sticky": e.locked,
         "k-sorted": this.props.sort && this.props.sort.some((k) => k.field === e.field)
-      }, e.headerClassName), d = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, g = T(this).toLanguageString(Oe, v[Oe]);
+      }, e.headerClassName), d = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, g = G(this).toLanguageString(Le, v[Le]);
       let m = e.isAccessible ? {
-        ariaSort: hr[a],
+        ariaSort: cr[a],
         role: "columnheader",
         ariaColumnIndex: e.ariaColumnIndex,
         ariaSelected: !1,
@@ -786,7 +787,7 @@ class Kt extends l.Component {
       } : {
         role: "presentation"
       };
-      const u = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, b = e.headerCell ? e.headerCell : nr, E = /* @__PURE__ */ l.createElement(
+      const u = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, b = e.headerCell ? e.headerCell : ar, E = /* @__PURE__ */ l.createElement(
         b,
         {
           key: 1,
@@ -832,7 +833,7 @@ class Kt extends l.Component {
       }, x = [
         E,
         this.props.columnResize && this.props.columnResize.resizable && e.resizable && /* @__PURE__ */ l.createElement(
-          ks,
+          vs,
           {
             key: 2,
             resize: (k, _, D) => this.props.columnResize && this.props.columnResize.dragHandler(k, e, _, D),
@@ -845,7 +846,7 @@ class Kt extends l.Component {
         return /* @__PURE__ */ l.createElement(k, { key: u, thProps: C, index: o }, x);
       }
       return /* @__PURE__ */ l.createElement(
-        Rt,
+        Ft,
         {
           ...C,
           key: u
@@ -857,7 +858,7 @@ class Kt extends l.Component {
   cellClick(t, s) {
     if (t.preventDefault(), !this.props.sortChange)
       return;
-    const { allowUnsort: o, mode: e } = Wt(this.props.sortable || !1, s.sortable || !1), i = (this.props.sort || []).filter((h) => h.field === s.field)[0], n = ar[o][i && i.dir || ""], a = e === "single" ? [] : (this.props.sort || []).filter((h) => h.field !== s.field);
+    const { allowUnsort: o, mode: e } = Vt(this.props.sortable || !1, s.sortable || !1), i = (this.props.sort || []).filter((h) => h.field === s.field)[0], n = hr[o][i && i.dir || ""], a = e === "single" ? [] : (this.props.sort || []).filter((h) => h.field !== s.field);
     n !== "" && s.field && a.push({ field: s.field, dir: n }), this.props.sortChange(a, t);
   }
   sortIcon(t) {
@@ -866,7 +867,7 @@ class Kt extends l.Component {
         O,
         {
           name: "sort-" + this.props.sort[t].dir + "-small",
-          icon: this.props.sort[t].dir === "asc" ? We : Ve
+          icon: this.props.sort[t].dir === "asc" ? Be : We
         }
       )),
       this.props.sort.length > 1 && /* @__PURE__ */ l.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ l.createElement("span", { className: "k-sort-order" }, t + 1))
@@ -874,7 +875,7 @@ class Kt extends l.Component {
   }
   render() {
     return this.serviceIndex = 0, this.index = -1, this.props.columnsMap.map((t, s) => this.props.pressHandler && /* @__PURE__ */ l.createElement(
-      lr,
+      nr,
       {
         key: s,
         pressHandler: this.props.pressHandler,
@@ -889,11 +890,11 @@ class Kt extends l.Component {
     ) || /* @__PURE__ */ l.createElement("tr", { key: s, className: "k-table-row", role: "row", "aria-rowindex": s + 1 }, this.cells(t)));
   }
 }
-G(Kt);
-const cr = [
+M(Ut);
+const dr = [
   { text: "grid.filterAndLogic", operator: "and" },
   { text: "grid.filterOrLogic", operator: "or" }
-], bt = {
+], Ct = {
   text: [
     { text: "grid.filterContainsOperator", operator: "contains" },
     { text: "grid.filterNotContainsOperator", operator: "doesnotcontain" },
@@ -932,17 +933,17 @@ const cr = [
 }, L = (r) => r === "isnull" || r === "isnotnull" || r === "isempty" || r === "isnotempty", ie = (r, t) => r.map((s) => ({
   text: t.toLanguageString(s.text, v[s.text]),
   operator: s.operator
-})), dr = "eq", Ut = [
+})), pr = "eq", qt = [
   { text: "grid.filterBooleanAll", operator: "" },
   { text: "grid.filterIsTrue", operator: !0 },
   { text: "grid.filterIsFalse", operator: !1 }
-], pr = {
+], ur = {
   text: !1,
   numeric: !1,
   date: !1,
   boolean: !0
-}, qt = (r, t, s) => {
-  const o = $t(s.operators);
+}, $t = (r, t, s) => {
+  const o = jt(s.operators);
   let e = s.operator;
   switch (s.filterType) {
     case "numeric":
@@ -958,36 +959,36 @@ const cr = [
       return;
   }
   s.onChange({ value: r, operator: e, syntheticEvent: t });
-}, $t = (r, t) => t ? r[t][0].operator : r[0].operator, Ae = (r) => r || "text", jt = (r, t) => {
+}, jt = (r, t) => t ? r[t][0].operator : r[0].operator, Pe = (r) => r || "text", Xt = (r, t) => {
   const s = r.target.value;
   t({
     value: s.operator,
-    operator: s.operator === "" ? "" : dr,
+    operator: s.operator === "" ? "" : pr,
     syntheticEvent: r.syntheticEvent
   });
-}, Xt = (r, t, s) => {
+}, Yt = (r, t, s) => {
   let o = t;
   const e = r.target.value;
   r.target.state.opened && (L(e.operator) && (o = null), t === null && !L(e.operator) && (o = void 0), s({ value: o, operator: e.operator, syntheticEvent: r.syntheticEvent }));
 };
-class Yt extends l.Component {
+class Jt extends l.Component {
   constructor(t) {
     super(t), this._inputRef = l.createRef(), this.renderOperatorEditor = (s) => {
       if (this.props.filterType === "boolean")
         return;
       const o = this.props.operators.find((e) => e.operator === this.props.operator) || null;
       return /* @__PURE__ */ l.createElement(
-        le,
+        oe,
         {
           size: this.props.size,
           value: o,
           onChange: this.operatorChange,
           className: "k-dropdown-operator",
           iconClassName: "k-i-filter k-icon",
-          svgIcon: Ke,
+          svgIcon: Ve,
           data: this.props.operators,
           textField: "text",
-          title: s.toLanguageString(ze, v[ze]),
+          title: s.toLanguageString(He, v[He]),
           popupSettings: {
             width: ""
           }
@@ -999,12 +1000,12 @@ class Yt extends l.Component {
    * @hidden
    */
   render() {
-    const t = T(this), s = /* @__PURE__ */ l.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ l.createElement("div", { className: "k-filtercell-wrapper" }, this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues), /* @__PURE__ */ l.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(t), " ", /* @__PURE__ */ l.createElement(
+    const t = G(this), s = /* @__PURE__ */ l.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ l.createElement("div", { className: "k-filtercell-wrapper" }, this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues), /* @__PURE__ */ l.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(t), " ", /* @__PURE__ */ l.createElement(
       W,
       {
         size: this.props.size,
         icon: "filter-clear",
-        svgIcon: Ds,
+        svgIcon: Ts,
         className: y({
           "k-clear-button-visible": !!(!(this.props.value === null || this.props.value === "") || this.props.operator)
         }),
@@ -1017,13 +1018,13 @@ class Yt extends l.Component {
     return this.props.render ? this.props.render.call(void 0, s, this.props) : s;
   }
   inputChange(t, s) {
-    qt(t, s, this.props);
+    $t(t, s, this.props);
   }
   operatorChange(t) {
-    Xt(t, this.props.value, this.props.onChange);
+    Yt(t, this.props.value, this.props.onChange);
   }
   boolDropdownChange(t) {
-    jt(t, this.props.onChange);
+    Xt(t, this.props.onChange);
   }
   clear(t) {
     t.preventDefault(), this.props.onChange({ value: "", operator: "", syntheticEvent: t }), this._inputRef.current && (this._inputRef.current.element.value = "", setTimeout(() => {
@@ -1034,7 +1035,7 @@ class Yt extends l.Component {
     switch (t) {
       case "numeric":
         return /* @__PURE__ */ l.createElement(
-          Ue,
+          Ke,
           {
             ref: this._inputRef,
             size: this.props.size,
@@ -1048,7 +1049,7 @@ class Yt extends l.Component {
         );
       case "date":
         return /* @__PURE__ */ l.createElement(
-          qe,
+          Ue,
           {
             ref: this._inputRef,
             size: this.props.size,
@@ -1063,7 +1064,7 @@ class Yt extends l.Component {
       case "boolean": {
         const e = (i) => i == null;
         return /* @__PURE__ */ l.createElement(
-          le,
+          oe,
           {
             ref: this._inputRef,
             size: this.props.size,
@@ -1078,7 +1079,7 @@ class Yt extends l.Component {
       }
       default:
         return /* @__PURE__ */ l.createElement(
-          Mt,
+          Gt,
           {
             ref: this._inputRef,
             size: this.props.size,
@@ -1093,9 +1094,9 @@ class Yt extends l.Component {
     }
   }
 }
-G(Yt);
-const ur = "k-table-row k-filter-row";
-class Jt extends l.Component {
+M(Jt);
+const gr = "k-table-row k-filter-row";
+class Qt extends l.Component {
   headerCellClassName(t, s) {
     let o = `${s ? "k-grid-header-sticky" : ""}`;
     return this.props.sort && this.props.sort.filter((e) => e.field === t).length > 0 && (o += " k-sorted"), o;
@@ -1116,7 +1117,7 @@ class Jt extends l.Component {
     this.props.filterChange(i.length > 0 ? { logic: n, filters: i } : null, e);
   }
   render() {
-    const t = T(this), s = this.props.filter && this.props.filter.filters || [], o = (a) => {
+    const t = G(this), s = this.props.filter && this.props.filter.filters || [], o = (a) => {
       if (a === void 0)
         return;
       const h = s.filter((c) => c.field === a);
@@ -1125,7 +1126,7 @@ class Jt extends l.Component {
     let e = 0, i = -1;
     const n = this.props.columns.filter((a) => a.children.length === 0).map(
       (a) => {
-        const h = Ae(a.filter), c = o(a.field), d = a.filterable ? t.toLanguageString(_e, v[_e]) : void 0;
+        const h = Pe(a.filter), c = o(a.field), d = a.filterable ? t.toLanguageString(Oe, v[Oe]) : void 0;
         let g = c && c.value;
         g === void 0 && (g = h === "text" ? "" : null);
         const m = a.filterable && {
@@ -1135,7 +1136,7 @@ class Jt extends l.Component {
           value: g,
           operator: c && c.operator,
           operators: ie(this.props.filterOperators[h] || [], t),
-          booleanValues: ie(Ut, t),
+          booleanValues: ie(qt, t),
           filterType: h,
           ariaLabel: d,
           onChange: (k) => {
@@ -1151,13 +1152,13 @@ class Jt extends l.Component {
           className: y("k-table-th", this.headerCellClassName(a.field, a.locked) || void 0),
           role: "columnheader",
           ...b
-        }, x = m && (a.filterCell ? /* @__PURE__ */ l.createElement(a.filterCell, { ...m }) : /* @__PURE__ */ l.createElement(Yt, { size: this.props.size, ...m })), I = Ce(this.props.cells, a.cells);
+        }, x = m && (a.filterCell ? /* @__PURE__ */ l.createElement(a.filterCell, { ...m }) : /* @__PURE__ */ l.createElement(Jt, { size: this.props.size, ...m })), I = Ce(this.props.cells, a.cells);
         if (I && I.filterCell) {
           const k = I.filterCell;
           return /* @__PURE__ */ l.createElement(k, { key: u, ...m, thProps: C, index: i }, x);
         }
         return /* @__PURE__ */ l.createElement(
-          Rt,
+          Ft,
           {
             key: u,
             ...C
@@ -1166,11 +1167,11 @@ class Jt extends l.Component {
         );
       }
     );
-    return /* @__PURE__ */ l.createElement("tr", { className: ur, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, n);
+    return /* @__PURE__ */ l.createElement("tr", { className: gr, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, n);
   }
 }
-G(Jt);
-class Qt extends l.Component {
+M(Qt);
+class Zt extends l.Component {
   constructor() {
     super(...arguments), this.draggable = null, this.onPress = (t) => {
       const s = this.draggable && this.draggable.element;
@@ -1221,7 +1222,7 @@ class Qt extends l.Component {
           O,
           {
             name: "sort-" + t + "-small",
-            icon: t === "asc" ? We : Ve,
+            icon: t === "asc" ? Be : We,
             size: "small"
           }
         )),
@@ -1236,7 +1237,7 @@ class Qt extends l.Component {
             O,
             {
               name: "x-circle",
-              icon: Ms,
+              icon: Gs,
               size: "small"
             }
           )
@@ -1245,8 +1246,8 @@ class Qt extends l.Component {
     );
   }
 }
-G(Qt);
-class Zt extends l.Component {
+M(Zt);
+class es extends l.Component {
   constructor() {
     super(...arguments), this.onGroupRemove = (t, s) => {
       const o = this.props.group.slice();
@@ -1258,7 +1259,7 @@ class Zt extends l.Component {
   }
   render() {
     const s = (this.props.group || []).map((o, e) => /* @__PURE__ */ l.createElement(
-      Qt,
+      Zt,
       {
         key: e,
         index: e,
@@ -1282,16 +1283,16 @@ class Zt extends l.Component {
         ref: this.props.refCallback,
         className: "k-grouping-header",
         role: "toolbar",
-        "aria-label": T(this).toLanguageString(Pe, v[Pe]),
+        "aria-label": G(this).toLanguageString(_e, v[_e]),
         "aria-controls": this.props.ariaControls || ""
       },
       /* @__PURE__ */ l.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, s),
-      /* @__PURE__ */ l.createElement("div", { className: "k-grouping-drop-container" }, !s.length && T(this).toLanguageString(Ne, v[Ne]), " ")
+      /* @__PURE__ */ l.createElement("div", { className: "k-grouping-drop-container" }, !s.length && G(this).toLanguageString(Fe, v[Fe]), " ")
     );
   }
 }
-G(Zt);
-class gr extends l.Component {
+M(es);
+class fr extends l.Component {
   constructor() {
     super(...arguments), this.footerWrap = null, this.table = null, this.scrollbarWidth = St();
   }
@@ -1354,7 +1355,7 @@ class gr extends l.Component {
     ) : /* @__PURE__ */ l.createElement("tfoot", { className: "k-table-tfoot" }, this.props.row);
   }
 }
-class fr {
+class mr {
   constructor(t) {
     this.table = null, this.containerHeight = 0, this.topCacheCount = 0, this.attendedSkip = 0, this.propsSkip = 0, this.total = 0, this.scrollableVirtual = !1, this.realSkip = 0, this.pageSize = 0, this.PageChange = null, this.tableBodyRef = l.createRef(), this.fixedScroll = !1, this.askedSkip = void 0, this.containerRef = l.createRef(), this.tableTransform = "", this.prevScrollPos = 0, this.tableTranslate = 0, this.scrollSyncing = !1, this.reactVersion = Number.parseFloat(l.version), this.topItems = (s, o) => {
       if (!this.container || o)
@@ -1470,7 +1471,7 @@ class fr {
     s - o < 0 && s > this.tableTranslate - this.table.scrollHeight / 10 ? this.localScrollUp(t) : s - o > 0 && s < this.tableTranslate + this.table.scrollHeight * 2 / 3 ? this.localScrollDown(t) : this.scrollNonStrict(t), this.prevScrollPos = s;
   }
 }
-class xt {
+class bt {
   constructor(t = 0, s, o, e) {
     this.total = t, this.offsets = [], this.heights = [];
     let i = 0;
@@ -1504,7 +1505,7 @@ class xt {
     return t + s;
   }
 }
-class kt {
+class xt {
   constructor(t) {
     this.table = null, this.containerHeight = 0, this.topCacheCount = 0, this.attendedSkip = 0, this.propsSkip = 0, this.total = 0, this.scrollableVirtual = !1, this.realSkip = 0, this.pageSize = 0, this.PageChange = null, this.tableBodyRef = l.createRef(), this.fixedScroll = !1, this.askedSkip = void 0, this.containerRef = l.createRef(), this.tableTransform = "", this.scrollSyncing = !1, this.lastLoaded = 0, this.firstLoaded = 0, this.lastScrollTop = 0, this.reactVersion = Number.parseFloat(l.version), this.firstLoaded = this.pageSize, this.lastLoaded = this.realSkip + this.pageSize, this.scrollHandler = this.scrollHandler.bind(this);
   }
@@ -1512,7 +1513,7 @@ class kt {
     return this.containerRef.current;
   }
   translate(t, s) {
-    this.scrollableVirtual && this.table && (Re || this.reactVersion <= 17 || s ? this.table.style.transform = "translateY(" + t + "px)" : this.tableTransform = "translateY(" + t + "px)");
+    this.scrollableVirtual && this.table && (we || this.reactVersion <= 17 || s ? this.table.style.transform = "translateY(" + t + "px)" : this.tableTransform = "translateY(" + t + "px)");
   }
   changePage(t, s) {
     this.PageChange && this.PageChange({ skip: Math.max(0, t), take: this.pageSize }, s);
@@ -1542,8 +1543,8 @@ class kt {
     }
   }
 }
-const mr = 1, Cr = 20;
-class br {
+const Cr = 1, br = 20;
+class xr {
   constructor(t) {
     this.columns = [], this.resizable = !1, this.isRtl = !1, this.setIsRtl = (s) => {
       this.isRtl = s;
@@ -1580,7 +1581,7 @@ class br {
       let g = [];
       d.forEach((m) => {
         h.forEach((u) => {
-          m.children[u] && (m.children[u].width = "", g[u] = Math.max(g[u] || 0, m.children[u].offsetWidth + mr));
+          m.children[u] && (m.children[u].width = "", g[u] = Math.max(g[u] || 0, m.children[u].offsetWidth + Cr));
         });
       }), d.forEach((m) => {
         h.forEach((u) => {
@@ -1649,7 +1650,7 @@ class br {
   }
   updateNextLockedCol(t, s, o) {
     const e = s.index, i = this.colGroupMain.parentElement.closest(".k-grid"), n = i == null ? void 0 : i.clientWidth, a = this.columns.filter((h) => h.locked).map((h) => parseInt(h.width + "", 10)).reduce((h, c) => h + c, 0);
-    !s.locked || n <= a + Cr || this.columns.forEach((h) => {
+    !s.locked || n <= a + br || this.columns.forEach((h) => {
       if (h != null && h.locked && o) {
         const c = t == null ? void 0 : t.querySelectorAll('[aria-colindex="' + h.ariaColumnIndex + '"]');
         c == null || c.forEach((d) => {
@@ -1660,7 +1661,7 @@ class br {
     });
   }
 }
-class xr {
+class kr {
   constructor(t, s, o) {
     this.refDragElementClue = l.createRef(), this.refDropElementClue = l.createRef(), this.columns = [], this.reorderable = !1, this.groupable = !1, this.startColumn = -1, this.startGroup = -1, this.currentColumn = -1, this.currentGroup = -1, this.groupPanelDivElement = null, this.refGroupPanelDiv = (e) => {
       this.groupPanelDivElement = e && e.children ? e.children[0] : e;
@@ -1702,7 +1703,7 @@ class xr {
   getColumnIndex(t, s) {
     if (!s || s.parentElement === this.groupPanelDivElement)
       return -1;
-    const o = at(t, s);
+    const o = nt(t, s);
     if (o === -1)
       return -1;
     for (let e = 0; e < s.parentNode.children.length; e++)
@@ -1715,7 +1716,7 @@ class xr {
     return s.className.indexOf ? s.className.indexOf("k-grouping-drop-container") !== -1 : !1;
   }
   getGroupIndex(t) {
-    return at(t, this.groupPanelDivElement);
+    return nt(t, this.groupPanelDivElement);
   }
   isValid() {
     return this.startGroup >= 0 ? this.currentGroup >= 0 && this.currentGroup !== this.startGroup : this.startColumn === -1 ? !1 : this.currentGroup >= 0 ? this.columns[this.startColumn].groupable === !0 && this.groupable === !0 : this.reorderable === !0 && this.currentColumn >= 0 && this.currentColumn !== this.startColumn && this.columns[this.startColumn].reorderable === !0 && this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
@@ -1751,9 +1752,9 @@ class xr {
     });
   }
 }
-const kr = (r) => {
+const vr = (r) => {
   let t = null;
-  const s = ws(), o = q(r.id), e = l.useCallback((c) => {
+  const s = Rs(), o = q(r.id), e = l.useCallback((c) => {
     r.onContextMenu && r.onContextMenu.call(void 0, c, r.dataItem, r.field);
   }, [r.onContextMenu, r.dataItem, r.field]);
   let i = null, n = null;
@@ -1764,7 +1765,7 @@ const kr = (r) => {
     }, t = /* @__PURE__ */ l.createElement("td", { ...i });
   else if (r.rowType !== "groupHeader") {
     if (r.field !== void 0) {
-      const d = M(r.field, r.dataItem);
+      const d = T(r.field, r.dataItem);
       d != null && (n = r.format ? s.format(r.format, d) : d.toString());
     }
     const c = y(
@@ -1790,9 +1791,9 @@ const kr = (r) => {
     return /* @__PURE__ */ l.createElement(c, { ...r, tdProps: i }, n);
   }
   return r.render ? r.render.call(void 0, t, r) : t;
-}, vt = (r) => {
+}, kt = (r) => {
   let t = null;
-  const { columnIndex: s, level: o, columnsCount: e, rowType: i, dataItem: n, field: a, onChange: h, expanded: c, render: d, dataIndex: g, ariaColumnIndex: m, isRtl: u } = r, b = a || "", E = q(r.id), C = Ft();
+  const { columnIndex: s, level: o, columnsCount: e, rowType: i, dataItem: n, field: a, onChange: h, expanded: c, render: d, dataIndex: g, ariaColumnIndex: m, isRtl: u } = r, b = a || "", E = q(r.id), C = Nt();
   let x = null, I = null, k = null;
   const _ = l.useCallback(
     (F) => {
@@ -1807,11 +1808,11 @@ const kr = (r) => {
     [c, h, n, g]
   ), D = l.useCallback((F) => {
     r.onContextMenu && r.onContextMenu.call(void 0, F, r.dataItem, r.field);
-  }, [r.onContextMenu, r.dataItem, r.field]), de = (F, ke) => {
-    const pe = c ? Pt : _t, ve = C.toLanguageString(pe, v[pe]);
+  }, [r.onContextMenu, r.dataItem, r.field]), de = (F, xe) => {
+    const pe = c ? At : Pt, ke = C.toLanguageString(pe, v[pe]);
     return x = {
       className: "k-table-td",
-      style: { ...r.style, ...ke },
+      style: { ...r.style, ...xe },
       colSpan: F,
       key: "g-colspan",
       role: "gridcell",
@@ -1835,19 +1836,20 @@ const kr = (r) => {
         },
         href: "#",
         tabIndex: -1,
-        "aria-label": ve
+        "aria-label": ke
       },
       /* @__PURE__ */ l.createElement(
         O,
         {
           name: c ? "caret-alt-down" : u ? "caret-alt-left" : "caret-alt-right",
-          icon: c ? Ts : u ? Gs : Hs
+          icon: c ? Ms : u ? Hs : zs
         }
       )
     ), n[b] instanceof Date && n[b].toString ? n[b].toString() : n[b]), /* @__PURE__ */ l.createElement(
       "td",
       {
-        ...x
+        ...x,
+        key: x.key
       },
       k
     );
@@ -1865,7 +1867,8 @@ const kr = (r) => {
   }, t = /* @__PURE__ */ l.createElement(
     "td",
     {
-      ...x
+      ...x,
+      key: x.key
     }
   )) : s <= o && !r.locked ? t = de(e - s, {}) : s <= o && r.locked && (I = {
     className: "k-table-td",
@@ -1886,7 +1889,7 @@ const kr = (r) => {
   }
   return d ? d.call(void 0, t, r) : t;
 };
-class vr extends l.Component {
+class Er extends l.Component {
   /**
    * @hidden
    */
@@ -1916,16 +1919,16 @@ class vr extends l.Component {
         "aria-rowindex": this.props.ariaRowIndex,
         "absolute-row-index": this.props.absoluteRowIndex,
         key: this.props.absoluteRowIndex,
-        [rr]: this.props.rowType === "data" ? this.props.dataIndex : void 0
+        [ir]: this.props.rowType === "data" ? this.props.dataIndex : void 0
       },
       this.props.children
     );
     return this.props.render ? this.props.render.call(void 0, s, this.props) : s;
   }
 }
-class Er extends l.Component {
-  constructor() {
-    super(...arguments), this._inputId = oe();
+class Ir extends l.Component {
+  get _inputId() {
+    return this.props.id;
   }
   render() {
     const { columnMenuWrapperProps: t } = this.props, s = [
@@ -1944,22 +1947,23 @@ class Er extends l.Component {
         }
       ),
       /* @__PURE__ */ l.createElement("label", { key: 1, className: "k-checkbox-label", htmlFor: this._inputId }),
-      t.columnMenu && /* @__PURE__ */ l.createElement(Vt, { ...t })
+      t.columnMenu && /* @__PURE__ */ l.createElement(Kt, { ...t })
     ];
     return this.props.render ? this.props.render.call(void 0, s, this.props) : s;
   }
 }
-class $e extends l.Component {
+const Sr = wt(Ir);
+class qe extends l.Component {
   /**
    * @hidden
    */
   render() {
-    return this.props.children || T(this).toLanguageString(Fe, v[Fe]);
+    return this.props.children || G(this).toLanguageString(Re, v[Re]);
   }
 }
-$e.displayName = "KendoReactGridNoRecords";
-G($e);
-class Ir extends l.Component {
+qe.displayName = "KendoReactGridNoRecords";
+M(qe);
+class yr extends l.Component {
   constructor() {
     super(...arguments), this._element = null, this.renderCell = (t, s) => {
       const o = {
@@ -1988,10 +1992,10 @@ class Ir extends l.Component {
     return this._element;
   }
   render() {
-    return /* @__PURE__ */ l.createElement("tr", { className: "k-table-row", role: "row", "aria-rowindex": this.props.ariaRowIndex }, Vs(this.props.columns).map(this.renderCell));
+    return /* @__PURE__ */ l.createElement("tr", { className: "k-table-row", role: "row", "aria-rowindex": this.props.ariaRowIndex }, Ks(this.props.columns).map(this.renderCell));
   }
 }
-const Sr = ({
+const wr = ({
   buttonCount: r = 10,
   info: t = !0,
   type: s = "numeric",
@@ -2007,14 +2011,14 @@ const Sr = ({
   responsive: i !== !1,
   type: s,
   pageSizeValue: n
-}), yr = (r) => Sr(r === !0 ? {} : r), Et = {
+}), Rr = (r) => wr(r === !0 ? {} : r), vt = {
   name: "@progress/kendo-react-grid",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1701355205,
+  publishDate: 1702305200,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
-}, wr = (r) => {
+}, Fr = (r) => {
   const { colSpan: t, ariaColIndex: s, dataItem: o, dataIndex: e, id: i } = r, n = q(i), a = l.useCallback((h) => {
     r.onContextMenu && r.onContextMenu.call(void 0, h, r.dataItem);
   }, [r.onContextMenu, r.dataItem]);
@@ -2030,13 +2034,13 @@ const Sr = ({
     },
     /* @__PURE__ */ l.createElement(r.detail, { dataItem: o, dataIndex: e })
   );
-}, Rr = (r) => {
+}, Nr = (r) => {
   const t = q(r.id);
   return /* @__PURE__ */ l.createElement("td", { className: "k-table-td k-hierarchy-cell", ...t, role: "gridcell" });
 };
-class be extends l.Component {
+let ce = class extends l.Component {
   constructor(t) {
-    super(t), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._shouldUpdateLeftRight = !0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = l.createRef(), this.headerElementRef = l.createRef(), this._element = null, this.tableElement = null, this.containerRef = l.createRef(), this.tableBodyRef = l.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this._gridId = oe(), this._gridRoleElementId = oe(), this.observer = null, this.handleIntersection = (e) => {
+    super(t), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._shouldUpdateLeftRight = !0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = l.createRef(), this.headerElementRef = l.createRef(), this._element = null, this.tableElement = null, this.containerRef = l.createRef(), this.tableBodyRef = l.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.observer = null, this.handleIntersection = (e) => {
       const i = { rowIndex: this.rowIndex };
       e.forEach((n) => {
         n.isIntersecting || this.setCurrentOnTop(i);
@@ -2077,7 +2081,7 @@ class be extends l.Component {
       }
     }, this.getVirtualScroll = (e) => {
       const { rowHeight: i, detailRowHeight: n, detail: a, expandField: h, groupable: c } = e, d = this.isAllData(), g = i !== void 0 && i > 0, m = n !== void 0 && n > 0, u = c === !0 || typeof c == "object" && c.enabled !== !1;
-      return !g || u && !d || !!(a && h) && (!m || !d) ? fr : kt;
+      return !g || u && !d || !!(a && h) && (!m || !d) ? mr : xt;
     }, this.isAllData = () => {
       const { data: e, total: i } = this.props;
       return Array.isArray(e) ? e.length === i : e ? i === e.total : !1;
@@ -2091,15 +2095,15 @@ class be extends l.Component {
         i || 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 && !i) {
         const n = this.props.rowHeight * e;
-        this.vs.containerHeight = Re ? Math.min(Ct, n) : n;
+        this.vs.containerHeight = we ? Math.min(mt, n) : n;
       } 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 kt) {
+      if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof xt) {
         const { rowHeight: n = 0, detail: a, expandField: h } = this.props;
         let { detailRowHeight: c = 0 } = this.props;
-        c = a && h ? c : n, 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, n, c, this._data)) : this.vs.rowHeightService = new xt(e, n, c);
+        c = a && h ? c : n, 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, n, c, this._data)) : this.vs.rowHeightService = new bt(e, n, c);
         const d = this.vs.rowHeightService.totalHeight();
-        this.vs.containerHeight = Re ? Math.min(Ct, d) : d;
+        this.vs.containerHeight = we ? Math.min(mt, d) : d;
       }
     }, this.scrollHandler = (e) => {
       if (e.target !== e.currentTarget)
@@ -2108,14 +2112,14 @@ class be extends l.Component {
       const i = e.currentTarget.scrollLeft, n = e.currentTarget.scrollTop;
       this.props.columnVirtualization && (!this.vs.scrollableVirtual || n === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
         this.forceUpdate();
-      }, 0)), this._header && this._header.setScrollLeft(i), this._footer && this._footer.setScrollLeft(i), this.vs && n !== this.wrapperScrollTop && this.vs.scrollHandler(e), ps(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = n;
+      }, 0)), this._header && this._header.setScrollLeft(i), this._footer && this._footer.setScrollLeft(i), this.vs && n !== this.wrapperScrollTop && this.vs.scrollHandler(e), us(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = n;
     }, this.onKeyDown = (e) => {
       if (X.onKeyDown(e, {
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef,
         onNavigationAction: this.onNavigationAction
       }), this.props.onKeyDown) {
-        const { mode: i, cell: n } = ht(this.props.selectable), a = {
+        const { mode: i, cell: n } = at(this.props.selectable), a = {
           dataItems: this.getLeafDataItems(),
           mode: i,
           cell: n,
@@ -2253,7 +2257,7 @@ class be extends l.Component {
       const d = this.getVirtualScroll(this.props);
       this.vs = new d(c);
     }), this.flatData = B((e, i, n, a, h, c, d) => {
-      const g = [], m = Gt(
+      const g = [], m = Ht(
         g,
         e,
         i,
@@ -2262,16 +2266,16 @@ class be extends l.Component {
         h
       );
       return { flattedData: g, resolvedGroupsCount: m };
-    }), this.rowHeightService = B((e, i, n, a, h) => new xt(i, n, a, h)), this.childrenToArray = B((e) => l.Children.toArray(e)), this.readColumns = B(
+    }), this.rowHeightService = B((e, i, n, a, h) => new bt(i, n, a, h)), this.childrenToArray = B((e) => l.Children.toArray(e)), this.readColumns = B(
       (e, i, n) => {
         const a = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
-        return Ht(a, this.columns, { prevId: 0, idPrefix: i });
+        return zt(a, this.columns, { prevId: 0, idPrefix: i });
       }
     ), this.mapColumns = B(
-      (e) => vs(e)
+      (e) => Es(e)
     ), this.configureColumns = B((e, i, n) => {
       this.props.selectedField && e.filter((c) => c.field === this.props.selectedField).forEach((c) => {
-        c.width = c.width || "50px", c.cell = c.cell || Ks, c.headerCell = c.headerCell || Er;
+        c.width = c.width || "50px", c.cell = c.cell || Us, c.headerCell = c.headerCell || Sr;
       });
       const a = {
         id: "",
@@ -2295,7 +2299,7 @@ class be extends l.Component {
       let h = 0;
       this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
         ...a,
-        cell: sr,
+        cell: rr,
         field: this.props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
         id: z.generateNavigatableId(`${this._columns.length}`, n, "column")
@@ -2304,13 +2308,13 @@ class be extends l.Component {
         e.unshift({
           ...a,
           isAccessible: !1,
-          cell: vt,
+          cell: kt,
           field: "value",
           locked: this.props.lockGroups
         }), h++;
       e.slice(h).forEach((c) => c.parentIndex >= 0 && (c.parentIndex += h));
     }), this.getHeaderRow = B((e, i, n, a, h, c, d, g, m, u, b, E) => /* @__PURE__ */ l.createElement(
-      Kt,
+      Ut,
       {
         cells: this.props.cells,
         sort: e,
@@ -2340,13 +2344,13 @@ class be extends l.Component {
     )), this.resolveTitle = (e) => {
       const i = this._columns.find((a) => a.field === e), n = i && (i.title || i.field);
       return n === void 0 ? e : n;
-    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), us(Et), this.showLicenseWatermark = gs(Et);
+    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), gs(vt), this.showLicenseWatermark = fs(vt);
     const s = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, o = this.getVirtualScroll(t);
-    this.vs = new o(s || t.rowHeight === void 0 || t.rowHeight === 0), this.dragLogic = new xr(
+    this.vs = new o(s || t.rowHeight === void 0 || t.rowHeight === 0), this.dragLogic = new kr(
       this.columnReorder.bind(this),
       this.groupReorder.bind(this),
       this.columnToGroup.bind(this)
-    ), this.columnResize = new br(this.onResize), X.onConstructor({
+    ), this.columnResize = new xr(this.onResize), X.onConstructor({
       navigatable: !!t.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef,
@@ -2395,7 +2399,7 @@ class be extends l.Component {
   // tslint:enable:max-line-length
   get columns() {
     const t = this._columns.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1);
-    return zt(t);
+    return Lt(t);
   }
   /**
    * Returns the HTML element of the Grid component.
@@ -2404,18 +2408,21 @@ class be extends l.Component {
     return this._element;
   }
   get document() {
-    if (ot)
+    if (it)
       return this.element && this.element.ownerDocument || document;
   }
   get _header() {
     return this.headerRef.current;
   }
+  get _gridId() {
+    return this.props.id + "-role-element-id";
+  }
   /**
    * @hidden
    */
   componentDidMount() {
-    this.resetTableWidth(), lt();
-    const t = wt(this.element);
+    this.resetTableWidth(), ot();
+    const t = Rt(this.element);
     this.isRtl = t, X.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
@@ -2425,7 +2432,7 @@ class be extends l.Component {
       rootMargin: "0px",
       threshold: 0.9
     };
-    this.observer = ot && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, s) || null;
+    this.observer = it && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, s) || null;
   }
   /**
    * @hidden
@@ -2441,7 +2448,7 @@ class be extends l.Component {
    * @hidden
    */
   componentDidUpdate() {
-    this.resetTableWidth(), lt(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), X.onComponentDidUpdate({
+    this.resetTableWidth(), ot(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), X.onComponentDidUpdate({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -2457,7 +2464,7 @@ class be extends l.Component {
    * @hidden
    */
   render() {
-    var rt;
+    var st;
     let t = this.props.total || 0;
     const s = z.getIdPrefix(this.navigationStateRef);
     let o = [];
@@ -2478,8 +2485,8 @@ class be extends l.Component {
     this.initializeVirtualization(t, a);
     const c = this.childrenToArray(this.props.children);
     this.initColumns(c, i);
-    const d = c.map((f) => f && f.type && f.type.displayName === "KendoReactGridToolbar" ? l.cloneElement(f, { ...f.props, ariaControls: this._gridRoleElementId }) : null), g = c.filter((f) => f && f.type && f.type.displayName === "KendoReactGridNoRecords"), m = c.filter((f) => f && f.type && f.type.displayName === "KendoReactGridStatusBar"), u = this._columns.filter((f) => f.children.length === 0), b = a && /* @__PURE__ */ l.createElement(
-      Zt,
+    const d = c.map((f) => f && f.type && f.type.displayName === "KendoReactGridToolbar" ? l.cloneElement(f, { ...f.props, ariaControls: this._gridId }) : null), g = c.filter((f) => f && f.type && f.type.displayName === "KendoReactGridNoRecords"), m = c.filter((f) => f && f.type && f.type.displayName === "KendoReactGridStatusBar"), u = this._columns.filter((f) => f.children.length === 0), b = a && /* @__PURE__ */ l.createElement(
+      es,
       {
         group: this.props.group || [],
         groupChange: this.groupChange,
@@ -2488,11 +2495,11 @@ class be extends l.Component {
         releaseHandler: this.dragLogic.releaseHandler,
         refCallback: this.dragLogic.refGroupPanelDiv,
         resolveTitle: this.resolveTitle,
-        ariaControls: this._gridRoleElementId,
+        ariaControls: this._gridId,
         onContextMenu: this.onContextMenu
       }
-    ), { sort: E, sortable: C, group: x, filter: I, filterable: k, filterOperators: _ = bt, headerCellRender: D, columnMenu: de } = this.props, Y = /* @__PURE__ */ l.createElement(
-      or,
+    ), { sort: E, sortable: C, group: x, filter: I, filterable: k, filterOperators: _ = Ct, headerCellRender: D, columnMenu: de } = this.props, Y = /* @__PURE__ */ l.createElement(
+      lr,
       {
         size: this.props.size,
         columnResize: this.columnResize,
@@ -2516,13 +2523,13 @@ class be extends l.Component {
           this.isRtl
         ),
         filterRow: this.props.filterable && /* @__PURE__ */ l.createElement(
-          Jt,
+          Qt,
           {
             cells: this.props.cells,
             size: this.props.size,
             columns: this._columns,
             filter: this.props.filter,
-            filterOperators: this.props.filterOperators || bt,
+            filterOperators: this.props.filterOperators || Ct,
             filterChange: this.filterChange,
             sort: this.props.sort,
             cellRender: this.props.filterCellRender,
@@ -2534,18 +2541,18 @@ class be extends l.Component {
           "col",
           {
             key: w.toString(),
-            width: Se(f)
+            width: Ie(f)
           }
         ))
       }
-    ), $ = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, F = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: ke, hiddenColumns: pe } = Es({
+    ), $ = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, F = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: xe, hiddenColumns: pe } = Is({
       enabled: this.props.columnVirtualization,
       columns: u,
       tableViewPortWidth: F,
       scrollLeft: $
-    }), ve = (f, w, R) => {
+    }), ke = (f, w, R) => {
       let j = !1;
-      const V = this.props.selectedField ? M(this.props.selectedField, f.dataItem) : void 0;
+      const V = this.props.selectedField ? T(this.props.selectedField, f.dataItem) : void 0;
       return {
         row: u.map((S, N) => {
           if (pe[N])
@@ -2553,18 +2560,18 @@ class be extends l.Component {
           const ee = S.id ? S.id : N, te = `${S.className ? S.className + " " : ""}${S.locked ? "k-grid-content-sticky" : ""}`, P = S.left !== void 0 ? this.isRtl ? { left: S.right, right: S.left } : { left: S.left, right: S.right } : {};
           let A = !1;
           if (S.editable && this.props.editField) {
-            const H = M(this.props.editField, f.dataItem);
+            const H = T(this.props.editField, f.dataItem);
             H && (H === !0 || H === S.field) && (j = !0, A = !0);
           }
-          let Ie = S.cell || A && ir || kr;
+          let Ee = S.cell || A && or || vr;
           return /* @__PURE__ */ l.createElement(
-            Ie,
+            Ee,
             {
               onContextMenu: this.onContextMenu,
               key: ee,
               locked: this.props.lockGroups,
               id: z.generateNavigatableId(`${w}-${String(N)}`, s),
-              colSpan: ke[N],
+              colSpan: xe[N],
               dataItem: f.dataItem,
               field: S.field,
               editor: S.editor,
@@ -2601,24 +2608,24 @@ class be extends l.Component {
         else
           break;
       }
-    const Xe = (f) => f >= this._data.length - J;
-    let Ye = this.vs.realSkip || 0;
-    const Q = [], Ee = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
+    const je = (f) => f >= this._data.length - J;
+    let Xe = this.vs.realSkip || 0;
+    const Q = [], ve = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
     let Z = 0;
     if (this._data.length) {
       let f = -1, w = 0;
       (this._slicedData || this._data).forEach((R, j) => {
-        R.rowType === "data" && (Ye++, f++);
-        const V = Ye % 2 === 0, S = this.props.dataItemKey && ye(this.props.dataItemKey)(R.dataItem), N = j + (this.vs.realSkip || 0), ee = S || "ai" + N, te = ee + "_1", P = ve(R, ee, f);
-        if (Z = N + Ee + w, Q.push(/* @__PURE__ */ l.createElement(
-          vr,
+        R.rowType === "data" && (Xe++, f++);
+        const V = Xe % 2 === 0, S = this.props.dataItemKey && Se(this.props.dataItemKey)(R.dataItem), N = j + (this.vs.realSkip || 0), ee = S || "ai" + N, te = ee + "_1", P = ke(R, ee, f);
+        if (Z = N + ve + w, Q.push(/* @__PURE__ */ l.createElement(
+          Er,
           {
             key: ee,
             dataItem: R.dataItem,
             isAltRow: V,
             isInEdit: P.isInEdit,
             rowType: R.rowType,
-            isHidden: Xe(j),
+            isHidden: je(j),
             onClick: (A) => this.rowClick(A, R),
             onDoubleClick: (A) => this.rowDblClick(A, R),
             selectedField: this.props.selectedField,
@@ -2632,7 +2639,7 @@ class be extends l.Component {
           P.row
         )), this.props.detail && R.rowType === "data" && R.expanded) {
           const A = u.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
-          w++, Z = N + Ee + w, Q.push(/* @__PURE__ */ l.createElement(
+          w++, Z = N + ve + w, Q.push(/* @__PURE__ */ l.createElement(
             "tr",
             {
               key: te,
@@ -2640,22 +2647,22 @@ class be extends l.Component {
                 "k-table-row",
                 V ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
               ),
-              style: { visibility: Xe(j) ? "hidden" : "", height: this.props.detailRowHeight },
+              style: { visibility: je(j) ? "hidden" : "", height: this.props.detailRowHeight },
               role: "row",
               "aria-rowindex": Z
             },
-            this.props.group && this.props.group.map((Ie, H) => {
-              var it;
-              const se = (it = P == null ? void 0 : P.row[H]) == null ? void 0 : it.props.style, ds = se ? this.isRtl ? { left: se.right, right: se.left } : { left: se.left, right: se.right } : {};
+            this.props.group && this.props.group.map((Ee, H) => {
+              var rt;
+              const se = (rt = P == null ? void 0 : P.row[H]) == null ? void 0 : rt.props.style, ps = se ? this.isRtl ? { left: se.right, right: se.left } : { left: se.left, right: se.right } : {};
               return /* @__PURE__ */ l.createElement(
-                vt,
+                kt,
                 {
                   id: "",
                   dataIndex: R.dataIndex,
-                  field: Ie.field,
+                  field: Ee.field,
                   dataItem: R.dataItem,
                   key: H,
-                  style: ds,
+                  style: ps,
                   ariaColumnIndex: 1 + H,
                   isSelected: !1,
                   locked: this.props.lockGroups,
@@ -2665,13 +2672,13 @@ class be extends l.Component {
               );
             }),
             this.props.expandField && /* @__PURE__ */ l.createElement(
-              Rr,
+              Nr,
               {
                 id: z.generateNavigatableId(`${te}-dhcell`, s)
               }
             ),
             /* @__PURE__ */ l.createElement(
-              wr,
+              Fr,
               {
                 onContextMenu: this.onContextMenu,
                 dataItem: R.dataItem,
@@ -2686,36 +2693,36 @@ class be extends l.Component {
         }
       });
     } else
-      Q.push(/* @__PURE__ */ l.createElement("tr", { key: "no-records", className: "k-table-row k-grid-norecords", role: "row", "aria-rowindex": Ee }, /* @__PURE__ */ l.createElement("td", { className: "k-table-td", colSpan: u.length, role: "gridcell" }, g.length ? g : /* @__PURE__ */ l.createElement($e, null))));
-    const Je = {
+      Q.push(/* @__PURE__ */ l.createElement("tr", { key: "no-records", className: "k-table-row k-grid-norecords", role: "row", "aria-rowindex": ve }, /* @__PURE__ */ l.createElement("td", { className: "k-table-td", colSpan: u.length, role: "gridcell" }, g.length ? g : /* @__PURE__ */ l.createElement(qe, null))));
+    const Ye = {
       size: this.props.size,
       onPageChange: this.pagerPageChange,
       total: t,
       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: tr,
-      ...yr(this.props.pageable || {})
-    }, Qe = this.props.pager ? /* @__PURE__ */ l.createElement(this.props.pager, { ...Je }) : /* @__PURE__ */ l.createElement(Is, { className: "k-grid-pager", ...Je }), hs = (f) => this.props.sort && this.props.sort.filter((w) => w.field === f).length > 0, cs = (f, w) => /* @__PURE__ */ l.createElement(
+      messagesMap: sr,
+      ...Rr(this.props.pageable || {})
+    }, Je = this.props.pager ? /* @__PURE__ */ l.createElement(this.props.pager, { ...Ye }) : /* @__PURE__ */ l.createElement(Ss, { className: "k-grid-pager", ...Ye }), cs = (f) => this.props.sort && this.props.sort.filter((w) => w.field === f).length > 0, ds = (f, w) => /* @__PURE__ */ l.createElement(
       "col",
       {
         key: w.toString(),
-        width: Se(f)
+        width: Ie(f)
       }
-    ), Ze = (rt = this.props.cells) != null && rt.footerCell || this._columns.some(
+    ), Qe = (st = this.props.cells) != null && st.footerCell || this._columns.some(
       (f) => {
         var w;
         return !!(f.footerCell || (w = f.cells) != null && w.footerCell);
       }
     ) ? /* @__PURE__ */ l.createElement(
-      gr,
+      fr,
       {
         size: this.props.size,
         columnResize: this.columnResize,
         staticHeaders: this.props.scrollable !== "none",
         ref: (f) => this._footer = f,
         row: /* @__PURE__ */ l.createElement(
-          Ir,
+          yr,
           {
             cells: this.props.cells,
             columns: this._columns,
@@ -2723,9 +2730,9 @@ class be extends l.Component {
             ariaRowIndex: Z + 1
           }
         ),
-        cols: u.map(cs)
+        cols: u.map(ds)
       }
-    ) : null, et = /* @__PURE__ */ l.createElement(
+    ) : null, Ze = /* @__PURE__ */ l.createElement(
       "colgroup",
       {
         ref: (f) => {
@@ -2737,14 +2744,14 @@ class be extends l.Component {
           "col",
           {
             key: w.toString(),
-            className: hs(f.field) ? "k-sorted" : void 0,
-            width: Se(f)
+            className: cs(f.field) ? "k-sorted" : void 0,
+            width: Ie(f)
           }
         )
       )
-    ), tt = this.dragLogic.reorderable || this.dragLogic.groupable, st = this.props.columnVirtualization ? "block" : "table";
+    ), et = this.dragLogic.reorderable || this.dragLogic.groupable, tt = this.props.columnVirtualization ? "block" : "table";
     if (this.props.scrollable === "none")
-      return /* @__PURE__ */ l.createElement(we.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ l.createElement(
+      return /* @__PURE__ */ l.createElement(ye.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ l.createElement(
         "div",
         {
           id: this.props.id,
@@ -2763,12 +2770,12 @@ class be extends l.Component {
           "aria-label": this.props.ariaLabel,
           onKeyDown: this.onKeyDown,
           onFocus: this.onFocus,
-          ...ct
+          ...ht
         },
         d,
         b,
         /* @__PURE__ */ l.createElement(
-          dt,
+          ct,
           {
             selectable: this.props.selectable,
             onRelease: this.selectionRelease,
@@ -2783,18 +2790,18 @@ class be extends l.Component {
                 "k-table k-grid-table",
                 { [`k-table-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
               ),
-              style: { userSelect: h, display: st }
+              style: { userSelect: h, display: tt }
             },
-            et,
+            Ze,
             Y,
-            /* @__PURE__ */ l.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...pt }, Q),
-            Ze
+            /* @__PURE__ */ l.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...dt }, Q),
+            Qe
           )
         ),
-        tt && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(ut, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ l.createElement(gt, { ref: this.dragLogic.refDragElementClue }))
-      ), m, this.props.pageable && Qe);
+        et && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(pt, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ l.createElement(ut, { ref: this.dragLogic.refDragElementClue }))
+      ), m, this.props.pageable && Je);
     let ue = this.props.style || {};
-    return this.props.scrollable === "virtual" && (ue.height || (ue = Object.assign({}, ue, { height: "450px" }))), /* @__PURE__ */ l.createElement(we.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ l.createElement(
+    return this.props.scrollable === "virtual" && (ue.height || (ue = Object.assign({}, ue, { height: "450px" }))), /* @__PURE__ */ l.createElement(ye.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ l.createElement(
       "div",
       {
         id: this.props.id,
@@ -2814,7 +2821,7 @@ class be extends l.Component {
         "aria-label": this.props.ariaLabel,
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,
-        ...ct
+        ...ht
       },
       d,
       b,
@@ -2825,7 +2832,7 @@ class be extends l.Component {
           role: "grid",
           "aria-colcount": u.length,
           "aria-rowcount": t,
-          id: this._gridRoleElementId
+          id: this._gridId
         },
         Y,
         /* @__PURE__ */ l.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ l.createElement(
@@ -2837,7 +2844,7 @@ class be extends l.Component {
             role: "presentation"
           },
           /* @__PURE__ */ l.createElement("div", { className: "k-grid-table-wrap", role: "presentation" }, /* @__PURE__ */ l.createElement(
-            dt,
+            ct,
             {
               selectable: this.props.selectable,
               onRelease: this.selectionRelease,
@@ -2856,16 +2863,16 @@ class be extends l.Component {
                   }
                 ),
                 role: "presentation",
-                style: { userSelect: h, display: st }
+                style: { userSelect: h, display: tt }
               },
-              et,
+              Ze,
               /* @__PURE__ */ l.createElement(
                 "tbody",
                 {
                   className: "k-table-tbody",
                   ref: this.tableBodyRef,
                   role: "rowgroup",
-                  ...pt
+                  ...dt
                 },
                 Q
               )
@@ -2878,17 +2885,17 @@ class be extends l.Component {
             }
           ))
         )),
-        Ze,
-        tt && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(ut, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ l.createElement(gt, { ref: this.dragLogic.refDragElementClue })),
-        this.showLicenseWatermark && /* @__PURE__ */ l.createElement(fs, null)
+        Qe,
+        et && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(pt, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ l.createElement(ut, { ref: this.dragLogic.refDragElementClue })),
+        this.showLicenseWatermark && /* @__PURE__ */ l.createElement(ms, null)
       ),
       m,
-      this.props.pageable && Qe
+      this.props.pageable && Je
     ));
   }
   selectionChange(t) {
     if (this.props.onSelectionChange) {
-      const { event: s, dataItem: o, dataIndex: e, columnIndex: i } = t, { mode: n, cell: a } = ht(this.props.selectable), h = {
+      const { event: s, dataItem: o, dataIndex: e, columnIndex: i } = t, { mode: n, cell: a } = at(this.props.selectable), h = {
         ...this.getArguments(s.syntheticEvent),
         dataItem: o,
         startColIndex: i,
@@ -2936,7 +2943,7 @@ class be extends l.Component {
     }, a = this._columns.splice(t, n(t) - t);
     this._columns.splice(t < s ? n(s - a.length) : s, 0, ...a), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, g) => d.orderIndex = g), this._columnsMutations++;
     const h = this._columns[t].locked && this._columns[s].locked;
-    Ss(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), ys(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    ys(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), ws(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
     const c = this.columns;
     if (this.forceUpdate(), this.props.onColumnReorder) {
       const d = {
@@ -2976,7 +2983,7 @@ class be extends l.Component {
   }
   initColumns(t, s) {
     const o = z.getIdPrefix(this.navigationStateRef);
-    this._columns = this.readColumns(t, o, this._columnsMutations), this._columns.length === 0 && (this._columns = Bs(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: o })), this.configureColumns(this._columns, s, o), this._columnsMap = this.mapColumns(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+    this._columns = this.readColumns(t, o, this._columnsMutations), this._columns.length === 0 && (this._columns = Ws(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: o })), this.configureColumns(this._columns, s, o), this._columnsMap = this.mapColumns(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
   }
   getDataState() {
     return {
@@ -2994,12 +3001,12 @@ class be extends l.Component {
       target: this
     };
   }
-}
-be.displayName = "KendoReactGrid";
-be.defaultProps = {
+};
+ce.displayName = "KendoReactGrid";
+ce.defaultProps = {
   // never use this
 };
-be.propTypes = {
+ce.propTypes = {
   data: p.oneOfType([
     p.array,
     p.shape({
@@ -3075,8 +3082,8 @@ be.propTypes = {
   navigatable: p.bool,
   size: p.oneOf(["small", "medium"])
 };
-be.contextType = we;
-class xe extends l.Component {
+ce.contextType = ye;
+class be extends l.Component {
   /**
    * @hidden
    */
@@ -3093,16 +3100,16 @@ class xe extends l.Component {
     );
   }
 }
-class he extends l.Component {
+class ae extends l.Component {
   /**
    * @hidden
    */
   render() {
     const { title: t, iconClass: s, svgIcon: o, selected: e } = this.props;
-    return /* @__PURE__ */ l.createElement("div", { onClick: this.props.onClick, className: `k-columnmenu-item ${e ? "k-selected" : ""}` }, (s || o) && /* @__PURE__ */ l.createElement(O, { name: s && ms(s), icon: o }), t);
+    return /* @__PURE__ */ l.createElement("div", { onClick: this.props.onClick, className: `k-columnmenu-item ${e ? "k-selected" : ""}` }, (s || o) && /* @__PURE__ */ l.createElement(O, { name: s && Cs(s), icon: o }), t);
   }
 }
-class es extends l.Component {
+class ts extends l.Component {
   constructor() {
     super(...arguments), this.onGroupClick = (t) => {
       if (t.preventDefault(), this.props.onGroupChange) {
@@ -3121,21 +3128,21 @@ class es extends l.Component {
    * @hidden
    */
   render() {
-    const { group: t, column: s } = this.props, o = T(this), e = !!(t && s.field && t.find((n) => n.field === s.field)), i = e ? Ot : Lt;
-    return /* @__PURE__ */ l.createElement(xe, null, /* @__PURE__ */ l.createElement(
-      he,
+    const { group: t, column: s } = this.props, o = G(this), e = !!(t && s.field && t.find((n) => n.field === s.field)), i = e ? _t : Ot;
+    return /* @__PURE__ */ l.createElement(be, null, /* @__PURE__ */ l.createElement(
+      ae,
       {
         title: o.toLanguageString(i, v[i]),
         iconClass: e ? "k-i-ungroup" : "k-i-group",
-        svgIcon: e ? Ls : zs,
+        svgIcon: e ? Os : Ls,
         onClick: this.onGroupClick
       }
     ));
   }
 }
-Nt(es);
-G(es);
-const ts = "asc", ss = "desc", Fr = {
+Dt(ts);
+M(ts);
+const ss = "asc", rs = "desc", Dr = {
   true: {
     asc: { asc: "", desc: "desc" },
     desc: { asc: "asc", desc: "" },
@@ -3146,17 +3153,17 @@ const ts = "asc", ss = "desc", Fr = {
     desc: { asc: "asc", desc: "desc" },
     "": { asc: "asc", desc: "desc" }
   }
-}, rs = (r, t) => t ? t.findIndex((s) => s.field === r) : -1, is = (r, t) => !!(t && r > -1 && t[r].dir === ts), os = (r, t) => !!(t && r > -1 && t[r].dir === ss);
-class je extends l.Component {
+}, is = (r, t) => t ? t.findIndex((s) => s.field === r) : -1, os = (r, t) => !!(t && r > -1 && t[r].dir === ss), ls = (r, t) => !!(t && r > -1 && t[r].dir === rs);
+class $e extends l.Component {
   constructor() {
     super(...arguments), this.onAscClick = (t) => {
-      this.onSort(t, ts), this.props.onCloseMenu && this.props.onCloseMenu();
-    }, this.onDescClick = (t) => {
       this.onSort(t, ss), this.props.onCloseMenu && this.props.onCloseMenu();
+    }, this.onDescClick = (t) => {
+      this.onSort(t, rs), this.props.onCloseMenu && this.props.onCloseMenu();
     }, this.onSort = (t, s) => {
       if (t.preventDefault(), !this.props.onSortChange)
         return;
-      const { column: o, sortable: e, sort: i } = this.props, { allowUnsort: n, mode: a } = Wt(e || !1, !1), h = (i || []).filter((g) => g.field === o.field)[0], c = Fr[n][h && h.dir || ""][s], d = a === "single" ? [] : (this.props.sort || []).filter((g) => g.field !== o.field);
+      const { column: o, sortable: e, sort: i } = this.props, { allowUnsort: n, mode: a } = Vt(e || !1, !1), h = (i || []).filter((g) => g.field === o.field)[0], c = Dr[n][h && h.dir || ""][s], d = a === "single" ? [] : (this.props.sort || []).filter((g) => g.field !== o.field);
       c !== "" && o.field && d.push({ field: o.field, dir: c }), this.props.onSortChange(d, t);
     };
   }
@@ -3164,35 +3171,35 @@ class je extends l.Component {
    * @hidden
    */
   render() {
-    const { sort: t, column: s } = this.props, o = rs(s.field, t), e = T(this);
-    return /* @__PURE__ */ l.createElement(xe, null, /* @__PURE__ */ l.createElement(
-      he,
+    const { sort: t, column: s } = this.props, o = is(s.field, t), e = G(this);
+    return /* @__PURE__ */ l.createElement(be, null, /* @__PURE__ */ l.createElement(
+      ae,
       {
-        title: e.toLanguageString(Me, v[Me]),
+        title: e.toLanguageString(De, v[De]),
         iconClass: "k-i-sort-asc-sm",
-        svgIcon: We,
-        selected: is(o, t),
+        svgIcon: Be,
+        selected: os(o, t),
         onClick: this.onAscClick
       }
     ), /* @__PURE__ */ l.createElement(
-      he,
+      ae,
       {
         title: e.toLanguageString(Te, v[Te]),
         iconClass: "k-i-sort-desc-sm",
-        svgIcon: Ve,
-        selected: os(o, t),
+        svgIcon: We,
+        selected: ls(o, t),
         onClick: this.onDescClick
       }
     ));
   }
 }
-je.active = (r, t) => {
-  const s = rs(r, t);
-  return os(s, t) || is(s, t);
+$e.active = (r, t) => {
+  const s = is(r, t);
+  return ls(s, t) || os(s, t);
 };
-Nt(je);
-G(je);
-class ls extends l.Component {
+Dt($e);
+M($e);
+class ns extends l.Component {
   /**
    * @hidden
    */
@@ -3204,18 +3211,18 @@ class ls extends l.Component {
         className: y("k-columnmenu-item-content", this.props.className),
         style: this.props.style
       },
-      /* @__PURE__ */ l.createElement(As, { style: { position: "relative", display: "block" } }, this.props.show ? this.props.children : null)
+      /* @__PURE__ */ l.createElement(Bs, { style: { position: "relative", display: "block" } }, this.props.show ? this.props.children : null)
     );
   }
 }
-class It extends l.Component {
+class Et extends l.Component {
   constructor(t) {
     super(t), this.renderOperatorEditor = () => {
       if (this.props.filterType === "boolean")
         return;
       const s = this.props.operators.find((o) => o.operator === this.props.operator) || null;
       return /* @__PURE__ */ l.createElement(
-        le,
+        oe,
         {
           value: s,
           onChange: this.operatorChange,
@@ -3232,19 +3239,19 @@ class It extends l.Component {
     return /* @__PURE__ */ l.createElement(l.Fragment, null, this.renderOperatorEditor(), this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues));
   }
   inputChange(t, s) {
-    qt(t, s, this.props);
+    $t(t, s, this.props);
   }
   operatorChange(t) {
-    Xt(t, this.props.value, this.props.onChange);
+    Yt(t, this.props.value, this.props.onChange);
   }
   boolDropdownChange(t) {
-    jt(t, this.props.onChange);
+    Xt(t, this.props.onChange);
   }
   filterComponent(t, s, o) {
     switch (t) {
       case "numeric":
         return /* @__PURE__ */ l.createElement(
-          Ue,
+          Ke,
           {
             value: s,
             onChange: (e) => {
@@ -3255,7 +3262,7 @@ class It extends l.Component {
         );
       case "date":
         return /* @__PURE__ */ l.createElement(
-          qe,
+          Ue,
           {
             value: s,
             onChange: (e) => {
@@ -3266,7 +3273,7 @@ class It extends l.Component {
       case "boolean": {
         const e = (i) => i == null;
         return /* @__PURE__ */ l.createElement(
-          le,
+          oe,
           {
             onChange: this.boolDropdownChange,
             value: o.find((i) => i.operator === (e(s) ? "" : s)),
@@ -3277,7 +3284,7 @@ class It extends l.Component {
       }
       default:
         return /* @__PURE__ */ l.createElement(
-          Tt,
+          Mt,
           {
             value: s || "",
             onChange: (e) => {
@@ -3288,7 +3295,7 @@ class It extends l.Component {
     }
   }
 }
-class Nr extends l.Component {
+class Tr extends l.Component {
   render() {
     const {
       firstFilterProps: t,
@@ -3298,8 +3305,8 @@ class Nr extends l.Component {
       logicValue: i,
       onLogicChange: n
     } = this.props;
-    return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(It, { ...t }), !s && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
-      le,
+    return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Et, { ...t }), !s && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+      oe,
       {
         data: e,
         value: i,
@@ -3307,11 +3314,11 @@ class Nr extends l.Component {
         className: "k-filter-and",
         textField: "text"
       }
-    ), /* @__PURE__ */ l.createElement(It, { ...o })));
+    ), /* @__PURE__ */ l.createElement(Et, { ...o })));
   }
 }
-const Be = (r) => r || { filters: [], logic: "and" }, ge = (r, t) => Be(t).filters.filter((e) => ft(e) ? e.filters && e.filters.length && e.filters.length <= 2 && !e.filters.find((i) => ft(i) || i.field !== r) : !1)[0] || null;
-class ns extends l.Component {
+const Ae = (r) => r || { filters: [], logic: "and" }, ge = (r, t) => Ae(t).filters.filter((e) => gt(e) ? e.filters && e.filters.length && e.filters.length <= 2 && !e.filters.find((i) => gt(i) || i.field !== r) : !1)[0] || null;
+class as extends l.Component {
   constructor(t) {
     super(t), this.removeGroup = (o, e) => {
       const i = [...e.filters], n = i.findIndex((a) => a === o);
@@ -3356,7 +3363,7 @@ class ns extends l.Component {
     }, this.clear = (o) => {
       if (o.preventDefault(), !this.props.onFilterChange)
         return;
-      const e = this.props.column.field, i = Be(this.props.filter), n = ge(e, this.props.filter), a = i.filters.filter((h) => h !== n);
+      const e = this.props.column.field, i = Ae(this.props.filter), n = ge(e, this.props.filter), a = i.filters.filter((h) => h !== n);
       a.length ? this.props.onFilterChange({ ...i, filters: a }, o) : this.props.onFilterChange(null, o), this.props.onCloseMenu && this.props.onCloseMenu();
     }, this.currentFilterGroup = () => ({
       ...this.state.filterGroup,
@@ -3364,7 +3371,7 @@ class ns extends l.Component {
     }), this.submit = (o) => {
       if (o.preventDefault(), !this.props.onFilterChange)
         return;
-      const e = this.props.column.field, i = Be(this.props.filter), n = ge(e, this.props.filter), a = this.currentFilterGroup();
+      const e = this.props.column.field, i = Ae(this.props.filter), n = ge(e, this.props.filter), a = this.currentFilterGroup();
       let h = null;
       if (n && a.filters.length > 0) {
         const c = i.filters.map((d) => d === n ? a : d);
@@ -3387,7 +3394,7 @@ class ns extends l.Component {
     };
     let s;
     if (t.column && t.column.field) {
-      const o = Ae(t.column.filter), e = $t(t.filterOperators, o);
+      const o = Pe(t.column.filter), e = jt(t.filterOperators, o);
       s = ge(t.column.field, t.filter), s = s ? {
         ...s,
         filters: s.filters.map((i) => ({ ...i }))
@@ -3411,7 +3418,7 @@ class ns extends l.Component {
     const { column: t, filterUI: s, hideSecondFilter: o, filterOperators: e } = this.props;
     if (!t || !t.field)
       return /* @__PURE__ */ l.createElement("div", null);
-    const i = Ae(t.filter), n = o !== void 0 ? o : pr[i], a = T(this), h = this.state.filterGroup.filters, c = ie(e[i], a), d = ie(Ut, a), g = {
+    const i = Pe(t.filter), n = o !== void 0 ? o : ur[i], a = G(this), h = this.state.filterGroup.filters, c = ie(e[i], a), d = ie(qt, a), g = {
       field: t.field,
       value: h[0].value,
       operator: h[0].operator,
@@ -3427,7 +3434,7 @@ class ns extends l.Component {
       booleanValues: d,
       onChange: this.secondFilterChange,
       filterType: i
-    }, u = this.state.filterGroup.logic, b = ie(cr, a), E = {
+    }, u = this.state.filterGroup.logic, b = ie(dr, a), E = {
       value: b.find((D) => D.operator === (u === null ? "" : u)),
       onChange: this.logicChange,
       data: b
@@ -3439,15 +3446,15 @@ class ns extends l.Component {
       onLogicChange: E.onChange,
       hideSecondFilter: n
     }, I = this.currentFilterGroup().filters.length !== 0 || L(h[0].operator) || L(h[1].operator), k = this.isControlled() ? this.props.expanded : this.state.expanded, _ = this.props.alwaysExpand;
-    return /* @__PURE__ */ l.createElement(xe, null, !_ && /* @__PURE__ */ l.createElement(
-      he,
+    return /* @__PURE__ */ l.createElement(be, null, !_ && /* @__PURE__ */ l.createElement(
+      ae,
       {
-        title: a.toLanguageString(ae, v[ae]),
+        title: a.toLanguageString(ne, v[ne]),
         iconClass: "k-i-filter",
-        svgIcon: Ke,
+        svgIcon: Ve,
         onClick: this.onFilterExpand
       }
-    ), /* @__PURE__ */ l.createElement(ls, { show: _ || !!k }, /* @__PURE__ */ l.createElement("div", { className: "kendo-grid-filter-menu-container" }, /* @__PURE__ */ l.createElement(
+    ), /* @__PURE__ */ l.createElement(ns, { show: _ || !!k }, /* @__PURE__ */ l.createElement("div", { className: "kendo-grid-filter-menu-container" }, /* @__PURE__ */ l.createElement(
       "form",
       {
         className: "k-filter-menu k-group k-reset k-state-border-up",
@@ -3455,13 +3462,13 @@ class ns extends l.Component {
         onReset: this.clear,
         onKeyDown: (D) => D.stopPropagation()
       },
-      /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, C ? /* @__PURE__ */ l.createElement(C, { ...x }) : /* @__PURE__ */ l.createElement(Nr, { ...x }), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ l.createElement(
+      /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, C ? /* @__PURE__ */ l.createElement(C, { ...x }) : /* @__PURE__ */ l.createElement(Tr, { ...x }), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ l.createElement(
         W,
         {
           themeColor: "primary",
           disabled: !I
         },
-        a.toLanguageString(ne, v[ne])
+        a.toLanguageString(le, v[le])
       ), /* @__PURE__ */ l.createElement(
         W,
         {
@@ -3472,13 +3479,13 @@ class ns extends l.Component {
     ))));
   }
 }
-ns.active = (r, t) => !!ge(r, t);
-G(ns);
-const Dr = (r, t) => r.length !== t.length ? !1 : r.every((s, o) => s === t[o]);
-class as extends l.Component {
+as.active = (r, t) => !!ge(r, t);
+M(as);
+const Gr = (r, t) => r.length !== t.length ? !1 : r.every((s, o) => s === t[o]);
+class hs extends l.Component {
   constructor(t) {
-    super(t), this.defaultFilter = () => this.props.filter ? Cs(this.props.filter) : { filters: [], logic: "and" }, this.isControlled = () => this.props.expanded !== void 0, this.parseData = (s, o) => {
-      let e = this.props.column.field || "", i = s.map((n) => M(e, n));
+    super(t), this.defaultFilter = () => this.props.filter ? bs(this.props.filter) : { filters: [], logic: "and" }, this.isControlled = () => this.props.expanded !== void 0, this.parseData = (s, o) => {
+      let e = this.props.column.field || "", i = s.map((n) => T(e, n));
       return o ? i.filter((n, a) => i.indexOf(n) === a) : i;
     }, this.getFilterIndex = () => {
       let s = this.props.column.field;
@@ -3497,7 +3504,7 @@ class as extends l.Component {
       };
       this.setState({
         value: s.target.value,
-        data: this.parseData(mt(this.props.data || [], e), this.props.uniqueData)
+        data: this.parseData(ft(this.props.data || [], e), this.props.uniqueData)
       });
     }, this.handleClear = () => {
       let s = this.props.searchBoxFilterOperator ? this.props.searchBoxFilterOperator : "startswith", o = {
@@ -3508,7 +3515,7 @@ class as extends l.Component {
       };
       this.setState({
         value: "",
-        data: this.parseData(mt(this.props.data || [], o), this.props.uniqueData)
+        data: this.parseData(ft(this.props.data || [], o), this.props.uniqueData)
       });
     }, this.clear = (s) => {
       if (s.preventDefault(), !this.props.onFilterChange)
@@ -3559,8 +3566,8 @@ class as extends l.Component {
    * @hidden
    */
   componentDidUpdate() {
-    let t = this.props.column.field || "", s = this.props.data.map((o) => M(t, o));
-    Dr(s, this.state.dataFromProps) || this.setState({
+    let t = this.props.column.field || "", s = this.props.data.map((o) => T(t, o));
+    Gr(s, this.state.dataFromProps) || this.setState({
       data: s,
       dataFromProps: s
     });
@@ -3572,7 +3579,7 @@ class as extends l.Component {
     const { column: t } = this.props;
     if (!t || !t.field)
       return /* @__PURE__ */ l.createElement("div", null);
-    const s = T(this), o = this.isControlled() ? this.props.expanded : this.state.expanded;
+    const s = G(this), o = this.isControlled() ? this.props.expanded : this.state.expanded;
     let e = [];
     if (this.state.currentFilter) {
       const a = [...this.state.currentFilter.filters];
@@ -3580,8 +3587,8 @@ class as extends l.Component {
         h.field === this.props.column.field && e.push(h.value);
       });
     }
-    const i = this.props.searchBox ? /* @__PURE__ */ l.createElement(this.props.searchBox, { value: this.state.value, onChange: this.handleSearchChange }) : /* @__PURE__ */ l.createElement("div", { className: "k-searchbox k-textbox k-input k-input-md k-input-solid" }, /* @__PURE__ */ l.createElement(O, { className: "k-input-icon", name: "search", icon: Dt }), /* @__PURE__ */ l.createElement(
-      Tt,
+    const i = this.props.searchBox ? /* @__PURE__ */ l.createElement(this.props.searchBox, { value: this.state.value, onChange: this.handleSearchChange }) : /* @__PURE__ */ l.createElement("div", { className: "k-searchbox k-textbox k-input k-input-md k-input-solid" }, /* @__PURE__ */ l.createElement(O, { className: "k-input-icon", name: "search", icon: Tt }), /* @__PURE__ */ l.createElement(
+      Mt,
       {
         className: "k-input-inner",
         type: "text",
@@ -3597,18 +3604,18 @@ class as extends l.Component {
         className: "k-input-button",
         onClick: this.handleClear,
         icon: "x",
-        svgIcon: Os
+        svgIcon: _s
       }
     )), n = e.filter((a, h) => e.indexOf(a) === h);
-    return /* @__PURE__ */ l.createElement(xe, null, /* @__PURE__ */ l.createElement(
-      he,
+    return /* @__PURE__ */ l.createElement(be, null, /* @__PURE__ */ l.createElement(
+      ae,
       {
-        title: s.toLanguageString(ae, v[ae]),
+        title: s.toLanguageString(ne, v[ne]),
         iconClass: "k-i-filter",
-        svgIcon: Ke,
+        svgIcon: Ve,
         onClick: this.onFilterExpand
       }
-    ), /* @__PURE__ */ l.createElement(ls, { show: !!o }, /* @__PURE__ */ l.createElement("div", { className: "kendo-grid-filter-menu-container" }, /* @__PURE__ */ l.createElement(
+    ), /* @__PURE__ */ l.createElement(ns, { show: !!o }, /* @__PURE__ */ l.createElement("div", { className: "kendo-grid-filter-menu-container" }, /* @__PURE__ */ l.createElement(
       "form",
       {
         className: "k-filter-menu k-group k-reset k-state-border-up",
@@ -3618,7 +3625,7 @@ class as extends l.Component {
       /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, i, /* @__PURE__ */ l.createElement("ul", { className: "k-reset k-multicheck-wrap" }, /* @__PURE__ */ l.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ l.createElement(
         fe,
         {
-          label: s.toLanguageString(He, v[He]),
+          label: s.toLanguageString(Me, v[Me]),
           onChange: (a) => this.handleCheckBoxChange(a, "all"),
           checked: this.isAllSelected()
         }
@@ -3629,13 +3636,13 @@ class as extends l.Component {
           onChange: (c) => this.handleCheckBoxChange(c, a),
           checked: n.includes(a)
         }
-      )))), /* @__PURE__ */ l.createElement("div", { className: "k-filter-selected-items" }, n.length + " " + s.toLanguageString(Le, v[Le])), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-hstack k-justify-content-stretch" }, /* @__PURE__ */ l.createElement(
+      )))), /* @__PURE__ */ l.createElement("div", { className: "k-filter-selected-items" }, n.length + " " + s.toLanguageString(ze, v[ze])), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-hstack k-justify-content-stretch" }, /* @__PURE__ */ l.createElement(
         W,
         {
           themeColor: "primary",
           type: "submit"
         },
-        s.toLanguageString(ne, v[ne])
+        s.toLanguageString(le, v[le])
       ), /* @__PURE__ */ l.createElement(
         W,
         {
@@ -3647,10 +3654,10 @@ class as extends l.Component {
     ))));
   }
 }
-as.defaultProps = {
+hs.defaultProps = {
   uniqueData: !0
 };
-G(as);
+M(hs);
 const Mr = (r) => {
   const [t, s] = l.useState(""), o = l.useMemo(() => new Set(r.columnsState.map((u) => u.id)), [r.columnsState]), e = l.useMemo(() => r.columns.filter((u) => {
     var b;
@@ -3667,12 +3674,12 @@ const Mr = (r) => {
     E[b] = u, n(E);
   }, [i]);
   return /* @__PURE__ */ l.createElement("form", { className: "k-filter-menu k-group k-reset" }, /* @__PURE__ */ l.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ l.createElement(
-    Mt,
+    Gt,
     {
       className: "k-searchbox",
       value: t,
       onChange: (u) => s(String(u.target.value)),
-      prefix: () => /* @__PURE__ */ l.createElement(_s, null, /* @__PURE__ */ l.createElement(O, { name: "search", icon: Dt }))
+      prefix: () => /* @__PURE__ */ l.createElement(Ps, null, /* @__PURE__ */ l.createElement(O, { name: "search", icon: Tt }))
     }
   ), /* @__PURE__ */ l.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !t && /* @__PURE__ */ l.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ l.createElement(
     fe,
@@ -3695,7 +3702,7 @@ const Mr = (r) => {
   )))), /* @__PURE__ */ l.createElement("div", { className: "k-filter-selected-items" }, c, " selected items"), /* @__PURE__ */ l.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ l.createElement(W, { type: "button", themeColor: "primary", onClick: a }, "Apply"), /* @__PURE__ */ l.createElement(W, { type: "button", onClick: h }, "Reset"))));
 };
 Mr.displayName = "GridColumnMenuColumnsList";
-class qr extends l.Component {
+class Yr extends l.Component {
   /**
    * @hidden
    */
@@ -3703,7 +3710,7 @@ class qr extends l.Component {
     return null;
   }
 }
-class Tr extends l.Component {
+class Hr extends l.Component {
   /**
    * @hidden
    */
@@ -3727,21 +3734,21 @@ class Tr extends l.Component {
     );
   }
 }
-Tr.displayName = "KendoReactGridToolbar";
-const Gr = (r) => {
+Hr.displayName = "KendoReactGridToolbar";
+const zr = (r) => {
   const { data: t = [] } = r;
   return /* @__PURE__ */ l.createElement("div", { className: "k-selection-aggregates k-grid-selection-aggregates" }, t.map((s, o) => /* @__PURE__ */ l.createElement("div", { key: o }, /* @__PURE__ */ l.createElement("span", { className: "k-selection-aggregates-item-text" }, s.type, ": "), /* @__PURE__ */ l.createElement("span", { className: "k-selection-aggregates-item-value" }, s.formattedValue))));
 };
-Gr.displayName = "KendoReactGridStatusBar";
-const Hr = (r) => {
+zr.displayName = "KendoReactGridStatusBar";
+const Lr = (r) => {
   var s;
   const t = r.slice();
   for (let o = 0; o < t.length; o++)
     for (; t[o] && ((s = t[o].children) != null && s.length); )
       t.splice(o, 1, ...t[o].children);
   return t;
-}, $r = (r) => {
-  const { dataItems: t, target: s, selectedField: o } = r, i = Hr(s.columns).map((C) => C.field).filter((C) => C && typeof C == "string").map((C) => ye(C)), n = ye(o), a = { dates: [], numbers: [], booleans: [], others: [] }, h = (C) => {
+}, Jr = (r) => {
+  const { dataItems: t, target: s, selectedField: o } = r, i = Lr(s.columns).map((C) => C.field).filter((C) => C && typeof C == "string").map((C) => Se(C)), n = Se(o), a = { dates: [], numbers: [], booleans: [], others: [] }, h = (C) => {
     typeof C == "number" ? a.numbers.push(C) : typeof C == "boolean" ? a.booleans.push(C) : C instanceof Date ? a.dates.push(C) : a.others.push(C);
   };
   t.forEach((C) => {
@@ -3765,50 +3772,52 @@ const Hr = (r) => {
     const x = C, I = u[x];
     I !== void 0 && E.push({ type: x, value: I, formattedValue: b(I, x) });
   }), E;
-};
+}, Or = wt(ce);
+Or.displayName = "KendoReactGrid";
 export {
   re as GRID_COL_INDEX_ATTRIBUTE,
-  rr as GRID_ROW_INDEX_ATTRIBUTE,
-  be as Grid,
-  kr as GridCell,
-  ce as GridColumn,
-  as as GridColumnMenuCheckboxFilter,
+  ir as GRID_ROW_INDEX_ATTRIBUTE,
+  Or as Grid,
+  vr as GridCell,
+  ce as GridClassComponent,
+  he as GridColumn,
+  hs as GridColumnMenuCheckboxFilter,
   Mr as GridColumnMenuColumnsList,
-  ns as GridColumnMenuFilter,
-  It as GridColumnMenuFilterCell,
-  Nr as GridColumnMenuFilterUI,
-  es as GridColumnMenuGroup,
-  he as GridColumnMenuItem,
-  ls as GridColumnMenuItemContent,
-  xe as GridColumnMenuItemGroup,
-  je as GridColumnMenuSort,
-  Vt as GridColumnMenuWrapper,
-  xr as GridCommonDragLogic,
-  qr as GridDetailRow,
-  ir as GridEditCell,
-  Yt as GridFilterCell,
-  vt as GridGroupCell,
-  nr as GridHeaderCell,
-  sr as GridHierarchyCell,
-  $e as GridNoRecords,
-  vr as GridRow,
-  Ks as GridSelectionCell,
-  Tr as GridToolbar,
-  Gr as StatusBar,
-  Ut as booleanFilterValues,
+  as as GridColumnMenuFilter,
+  Et as GridColumnMenuFilterCell,
+  Tr as GridColumnMenuFilterUI,
+  ts as GridColumnMenuGroup,
+  ae as GridColumnMenuItem,
+  ns as GridColumnMenuItemContent,
+  be as GridColumnMenuItemGroup,
+  $e as GridColumnMenuSort,
+  Kt as GridColumnMenuWrapper,
+  kr as GridCommonDragLogic,
+  Yr as GridDetailRow,
+  or as GridEditCell,
+  Jt as GridFilterCell,
+  kt as GridGroupCell,
+  ar as GridHeaderCell,
+  rr as GridHierarchyCell,
+  qe as GridNoRecords,
+  Er as GridRow,
+  Us as GridSelectionCell,
+  Hr as GridToolbar,
+  zr as StatusBar,
+  qt as booleanFilterValues,
   ge as filterGroupByField,
-  Yr as getSelectedState,
-  Jr as getSelectedStateFromKeyDown,
-  $r as getStatusData,
+  ei as getSelectedState,
+  ti as getSelectedStateFromKeyDown,
+  Jr as getStatusData,
   v as gridMessages,
-  Hr as leafColumns,
-  bt as operators,
-  qs as pagerFirstPage,
-  Us as pagerInfo,
-  Ys as pagerItemPerPage,
-  Xs as pagerLastPage,
-  js as pagerNextPage,
-  $s as pagerPreviousPage,
-  Be as rootFilterOrDefault,
-  Qr as setSelectedState
+  Lr as leafColumns,
+  Ct as operators,
+  $s as pagerFirstPage,
+  qs as pagerInfo,
+  Js as pagerItemPerPage,
+  Ys as pagerLastPage,
+  Xs as pagerNextPage,
+  js as pagerPreviousPage,
+  Ae as rootFilterOrDefault,
+  si as setSelectedState
 };