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

package/index.mjs

@@ -2,53 +2,54 @@
 * 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 c from "prop-types";
-import { getNestedValue as C, Keys as Fe, IconWrap as ne, classNames as I, guid as z, memoizeOne as Q, validatePackage as Ae, noop as Z, canUseDOM as j, getter as Me, Draggable as Pe } from "@progress/kendo-react-common";
-import { getNestedValue as Yt, mapTree as Jt, mapTreeItem as Qt } from "@progress/kendo-react-common";
-import { TABLE_ROW_INDEX_ATTRIBUTE as ze, TABLE_COL_INDEX_ATTRIBUTE as He, TABLE_PREVENT_SELECTION_ELEMENT as Be, useTableKeyboardNavigation as k, readColumns as Ke, mapColumns as _e, tableKeyboardNavigation as T, getSelectionOptions as ee, CommonDragLogic as qe, ColumnResize as Ve, tableKeyboardNavigationTools as te, Header as Ue, HeaderRow as We, tableColumnsVirtualization as Xe, TableKeyboardNavigationContext as oe, tableKeyboardNavigationScopeAttributes as Ge, TableSelection as $e, tableKeyboardNavigationBodyAttributes as je, DropClue as Ye, DragClue as Je, flatData as Qe, FilterRow as Ze, HeaderCell as et, HeaderSelectionCell as tt, TextFilterCell as at, NumericFilterCell as nt, DateFilterCell as ot, BooleanFilterCell as lt } from "@progress/kendo-react-data-tools";
-import { createDataTree as ea, extendDataItem as ta, filterBy as aa, flatData as na, getItemPath as oa, getSelectedState as la, getSelectedStateFromKeyDown as ra, modifySubItems as ia, moveTreeItem as sa, orderBy as ca, removeItems as da, setSelectedState as ha, treeToFlat as ga } from "@progress/kendo-react-data-tools";
-import { useInternationalization as rt, provideLocalizationService as it, registerForLocalization as st, useLocalization as H } from "@progress/kendo-react-intl";
-import { caretAltDownIcon as ct, caretAltRightIcon as dt, plusIcon as ht, cancelIcon as gt } from "@progress/kendo-svg-icons";
-import * as ut from "react-dom";
-import { NumericTextBox as mt } from "@progress/kendo-react-inputs";
-import { DatePicker as ft } from "@progress/kendo-react-dateinputs";
-function pt(e) {
+import { getNestedValue as v, Keys as Fe, IconWrap as ae, classNames as I, memoizeOne as J, validatePackage as Ae, noop as Q, canUseDOM as $, getter as Me, useId as ne, guid as Pe, Draggable as ze } from "@progress/kendo-react-common";
+import { getNestedValue as Jt, mapTree as Qt, mapTreeItem as Zt } from "@progress/kendo-react-common";
+import { TABLE_ROW_INDEX_ATTRIBUTE as He, TABLE_COL_INDEX_ATTRIBUTE as Be, TABLE_PREVENT_SELECTION_ELEMENT as Ke, useTableKeyboardNavigation as T, readColumns as _e, mapColumns as qe, tableKeyboardNavigation as k, getSelectionOptions as Z, CommonDragLogic as Ve, ColumnResize as Ue, tableKeyboardNavigationTools as ee, Header as We, HeaderRow as Xe, tableColumnsVirtualization as Ge, TableKeyboardNavigationContext as oe, tableKeyboardNavigationScopeAttributes as $e, TableSelection as je, tableKeyboardNavigationBodyAttributes as Ye, DropClue as Je, DragClue as Qe, flatData as Ze, FilterRow as et, HeaderCell as tt, HeaderSelectionCell as at, TextFilterCell as nt, NumericFilterCell as ot, DateFilterCell as lt, BooleanFilterCell as rt } from "@progress/kendo-react-data-tools";
+import { createDataTree as ta, extendDataItem as aa, filterBy as na, flatData as oa, getItemPath as la, getSelectedState as ra, getSelectedStateFromKeyDown as ia, modifySubItems as sa, moveTreeItem as ca, orderBy as da, removeItems as ha, setSelectedState as ga, treeToFlat as ua } from "@progress/kendo-react-data-tools";
+import { useInternationalization as it, provideLocalizationService as st, registerForLocalization as ct, useLocalization as z } from "@progress/kendo-react-intl";
+import { caretAltDownIcon as dt, caretAltRightIcon as ht, plusIcon as gt, cancelIcon as ut } from "@progress/kendo-svg-icons";
+import * as mt from "react-dom";
+import { NumericTextBox as ft } from "@progress/kendo-react-inputs";
+import { DatePicker as pt } from "@progress/kendo-react-dateinputs";
+function Ct(e) {
   return e !== void 0 && (typeof e == "number" || /px$/i.test(String(e)));
 }
-function Ct(e, r, t) {
+function vt(e, r, t) {
   const a = Array.from(e.tHead && e.tHead.rows || []), n = [r];
   let o;
   const i = t || ((s) => window.getComputedStyle(s).height || void 0);
   a.forEach((s) => {
     let d = i(s);
-    n.push(pt(d) ? parseFloat(String(d)) : s.offsetHeight);
+    n.push(Ct(d) ? parseFloat(String(d)) : s.offsetHeight);
   });
   for (let s = 0; s < a.length; s++)
     o = n.slice(0, s + 1).reduce((d, g) => d + g), Array.from(a[s].cells).forEach((d) => d.style.top = o + "px");
 }
-const W = 1e6;
-function vt(e) {
+const U = 1e6;
+function xt(e) {
   const { rows: r, tableViewPortHeight: t, scrollTop: a } = e;
   if (r.length === 0)
     return [];
   const n = r[0].height, o = Math.min(Math.round(a / n), r.length), i = Math.round(t / n), s = Math.max(0, o - i), d = Math.min(r.length, o + 2 * i), g = r.slice(s, d), m = g[g.length - 1];
   return s > 0 && g.unshift({
     dataItem: {},
-    level: [W],
+    level: [U],
     offsetTop: 0,
     height: g[0].offsetTop,
     levelCount: 0
   }), d < r.length - 1 && g.push({
     dataItem: {},
-    level: [W, W],
+    level: [U, U],
     offsetTop: m.offsetTop + m.height,
     height: (r.length - d) * n,
     levelCount: 0
   }), g;
 }
-const xt = ze, L = He, bt = Be, le = (e) => {
-  const { hasChildren: r, level: t = [0], expanded: a, dataItem: n, format: o, id: i, ariaColumnIndex: s, isSelected: d } = e, g = C(e.field, n), m = rt(), p = k(i);
+const bt = He, L = Be, Et = Ke, le = (e) => {
+  const { hasChildren: r, level: t = [0], expanded: a, dataItem: n, format: o, id: i, ariaColumnIndex: s, isSelected: d } = e, g = v(e.field, n), m = it(), C = T(i);
   let S = "";
   const w = l.useCallback(
     (E) => {
@@ -57,22 +58,22 @@ const xt = ze, L = He, bt = Be, le = (e) => {
     [e.expandable, n, t]
   );
   g != null && (S = o ? m.format(o, g) : g.toString());
-  const v = [];
+  const x = [];
   if (e.expandable) {
     const E = (f) => /* @__PURE__ */ l.createElement("span", { key: f, className: "k-treelist-toggle k-icon k-svg-icon" }, /* @__PURE__ */ l.createElement("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }));
-    v.push(...t.slice(1).map((f, F) => E(F))), r ? v.push(
+    x.push(...t.slice(1).map((f, F) => E(F))), r ? x.push(
       /* @__PURE__ */ l.createElement(
-        ne,
+        ae,
         {
           className: "k-treelist-toggle",
           name: a ? "caret-alt-down" : "caret-alt-right",
-          icon: a ? ct : dt,
+          icon: a ? dt : ht,
           key: "expand-collapse",
           onClick: (f) => e.onExpandChange(f.syntheticEvent || f, n, t),
-          [bt]: !0
+          [Et]: !0
         }
       )
-    ) : v.push(E(v.length));
+    ) : x.push(E(x.length));
   }
   const O = /* @__PURE__ */ l.createElement(
     "td",
@@ -93,20 +94,20 @@ const xt = ze, L = He, bt = Be, le = (e) => {
       role: "gridcell",
       onKeyDown: w,
       [L]: e.colIndex,
-      ...p
+      ...C
     },
-    v,
+    x,
     S
   );
   return e.render ? e.render.call(void 0, O, e) : O;
 };
 le.displayName = "KendoReactTreeListCell";
-const X = "treelist.filterClearButton", B = "treelist.filterEqOperator", K = "treelist.filterNotEqOperator", _ = "treelist.filterIsNullOperator", q = "treelist.filterIsNotNullOperator", re = "treelist.filterIsEmptyOperator", ie = "treelist.filterIsNotEmptyOperator", se = "treelist.filterStartsWithOperator", ce = "treelist.filterContainsOperator", de = "treelist.filterNotContainsOperator", he = "treelist.filterEndsWithOperator", ge = "treelist.filterGteOperator", ue = "treelist.filterGtOperator", me = "treelist.filterLteOperator", fe = "treelist.filterLtOperator", pe = "treelist.filterIsTrue", Ce = "treelist.filterIsFalse", ve = "treelist.filterBooleanAll", xe = "treelist.filterAfterOrEqualOperator", be = "treelist.filterAfterOperator", Ee = "treelist.filterBeforeOperator", Ie = "treelist.filterBeforeOrEqualOperator", G = "treelist.noRecords", $ = {
-  [X]: "Clear",
-  [B]: "Is equal to",
-  [K]: "Is not equal to",
-  [_]: "Is null",
-  [q]: "Is not null",
+const W = "treelist.filterClearButton", H = "treelist.filterEqOperator", B = "treelist.filterNotEqOperator", K = "treelist.filterIsNullOperator", _ = "treelist.filterIsNotNullOperator", re = "treelist.filterIsEmptyOperator", ie = "treelist.filterIsNotEmptyOperator", se = "treelist.filterStartsWithOperator", ce = "treelist.filterContainsOperator", de = "treelist.filterNotContainsOperator", he = "treelist.filterEndsWithOperator", ge = "treelist.filterGteOperator", ue = "treelist.filterGtOperator", me = "treelist.filterLteOperator", fe = "treelist.filterLtOperator", pe = "treelist.filterIsTrue", Ce = "treelist.filterIsFalse", ve = "treelist.filterBooleanAll", xe = "treelist.filterAfterOrEqualOperator", be = "treelist.filterAfterOperator", Ee = "treelist.filterBeforeOperator", Ie = "treelist.filterBeforeOrEqualOperator", X = "treelist.noRecords", G = {
+  [W]: "Clear",
+  [H]: "Is equal to",
+  [B]: "Is not equal to",
+  [K]: "Is null",
+  [_]: "Is not null",
   [re]: "Is empty",
   [ie]: "Is not empty",
   [se]: "Starts with",
@@ -124,18 +125,18 @@ const X = "treelist.filterClearButton", B = "treelist.filterEqOperator", K = "tr
   [be]: "Is after",
   [Ee]: "Is before",
   [Ie]: "Is before or equal to",
-  [G]: "No records available"
+  [X]: "No records available"
 };
 class Se extends l.Component {
   /**
    * @hidden
    */
   render() {
-    return this.props.children || it(this).toLanguageString(G, $[G]);
+    return this.props.children || st(this).toLanguageString(X, G[X]);
   }
 }
-st(Se);
-const Y = l.forwardRef((e, r) => {
+ct(Se);
+const j = l.forwardRef((e, r) => {
   const { isSelected: t, rowHeight: a, isAltRow: n, expanded: o, ariaRowIndex: i, level: s, ariaSetSize: d, ariaPosInSet: g } = e, m = I(
     "k-table-row",
     "k-master-row",
@@ -143,7 +144,7 @@ const Y = l.forwardRef((e, r) => {
       "k-selected": t,
       "k-alt": n
     }
-  ), p = l.useMemo(
+  ), C = l.useMemo(
     () => a !== void 0 ? { height: a + "px" } : void 0,
     [a]
   ), S = /* @__PURE__ */ l.createElement(
@@ -153,7 +154,7 @@ const Y = l.forwardRef((e, r) => {
       onDoubleClick: e.onDoubleClick,
       onContextMenu: e.onContextMenu,
       className: m,
-      style: p,
+      style: C,
       ref: r,
       "aria-expanded": o,
       role: "row",
@@ -161,24 +162,24 @@ const Y = l.forwardRef((e, r) => {
       "aria-level": s.length,
       "aria-posinset": g,
       "aria-setsize": d,
-      [xt]: e.rowIndex
+      [bt]: e.rowIndex
     },
     e.children
   );
   return /* @__PURE__ */ l.createElement(l.Fragment, null, e.render ? e.render.call(void 0, S, e) : S);
 });
-Y.displayName = "KendoReactTreeListRow";
-const Et = {
+j.displayName = "KendoReactTreeListRow";
+const It = {
   name: "@progress/kendo-react-treelist",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1701354798,
+  publishDate: 1702304897,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 class we extends l.Component {
   constructor(r) {
-    super(r), this.wrapperScrollLeft = 0, this.wrapperScrollTop = 0, this.updateOnScroll = !1, this.tbodyOffsetTop = 0, this.prevData = [], this.flattedData = [], this.extendedColumn = [], this.columnsMap = [], this.element = null, this._treeListId = z(), this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this.scrollIntoView = (t) => {
+    super(r), this.wrapperScrollLeft = 0, this.wrapperScrollTop = 0, this.updateOnScroll = !1, this.tbodyOffsetTop = 0, this.prevData = [], this.flattedData = [], this.extendedColumn = [], this.columnsMap = [], this.element = null, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this.scrollIntoView = (t) => {
       if (!this.element)
         return;
       const { rowIndex: a = 0 } = t, { scrollable: n, rowHeight: o = 0 } = this.props;
@@ -191,16 +192,16 @@ class we extends l.Component {
           this.element.scroll(0, s);
         }
       }
-    }, this.getExtendedColumn = Q(
-      (t, a) => Ke(t, { prevId: 0, idPrefix: a })
-    ), this.getColumnsMap = Q(
-      (t) => _e(t)
+    }, this.getExtendedColumn = J(
+      (t, a) => _e(t, { prevId: 0, idPrefix: a })
+    ), this.getColumnsMap = J(
+      (t) => qe(t)
     ), this.onKeyDown = (t) => {
-      if (T.onKeyDown(t, {
+      if (k.onKeyDown(t, {
         contextStateRef: this.contextStateRef,
         navigationStateRef: this.navigationStateRef
       }), this.props.onKeyDown) {
-        const { mode: a, cell: n } = ee(this.props.selectable), o = {
+        const { mode: a, cell: n } = Z(this.props.selectable), o = {
           dataItems: this.getLeafDataItems(),
           mode: a,
           cell: n,
@@ -211,7 +212,7 @@ class we extends l.Component {
         this.props.onKeyDown.call(void 0, o);
       }
     }, this.onFocus = (t) => {
-      T.onFocus(t, {
+      k.onFocus(t, {
         contextStateRef: this.contextStateRef
       });
     }, this.onRowDrag = (t) => {
@@ -260,7 +261,7 @@ class we extends l.Component {
         const s = o.style.boxSizing;
         o.style.boxSizing = "border-box", i = parseFloat(String(window.getComputedStyle(o).height)) || o.offsetHeight, o.style.boxSizing = s, o.getAttribute("style") || o.removeAttribute("style");
       }
-      this.tbodyOffsetTop = n.tBodies[0].offsetTop, Ct(n, i);
+      this.tbodyOffsetTop = n.tBodies[0].offsetTop, vt(n, i);
     }, this.itemChange = (t) => {
       const a = this.props.onItemChange;
       if (t.field === this.props.expandField) {
@@ -379,22 +380,25 @@ class we extends l.Component {
       }
     }, this.expandedSubItems = (t) => {
       const a = [];
-      return this.expanded(t) && this.hasChildren(t) && a.push(...C(this.props.subItemsField, t)), a;
-    }, this.getLeafDataItems = () => this.flatData.map((t) => t.dataItem), this.expanded = (t) => !!C(this.props.expandField, t), this.hasChildren = (t) => !!C(this.props.subItemsField, t), Ae(Et), this.dragLogic = new qe(this.columnReorder, Z, Z), this.columnResize = new Ve(this.onResize.bind(this)), T.onConstructor({
+      return this.expanded(t) && this.hasChildren(t) && a.push(...v(this.props.subItemsField, t)), a;
+    }, this.getLeafDataItems = () => this.flatData.map((t) => t.dataItem), this.expanded = (t) => !!v(this.props.expandField, t), this.hasChildren = (t) => !!v(this.props.subItemsField, t), Ae(It), this.dragLogic = new Ve(this.columnReorder, Q, Q), this.columnResize = new Ue(this.onResize.bind(this)), k.onConstructor({
       navigatable: !!r.navigatable,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
     });
   }
+  get _treeListId() {
+    return this.props.id + "-treelist";
+  }
   get document() {
-    if (j)
+    if ($)
       return this.element && this.element.ownerDocument || document;
   }
   /**
    * @hidden
    */
   componentDidMount() {
-    this.calculateSizes(this.element), T.onComponentDidMount({
+    this.calculateSizes(this.element), k.onComponentDidMount({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -404,7 +408,7 @@ class we extends l.Component {
    * @hidden
    */
   getSnapshotBeforeUpdate() {
-    return T.onGetSnapshotBeforeUpdate({
+    return k.onGetSnapshotBeforeUpdate({
       document: this.document,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -414,7 +418,7 @@ class we extends l.Component {
    * @hidden
    */
   componentDidUpdate(r) {
-    r.columns !== this.props.columns && this.calculateSizes(this.element), T.onComponentDidUpdate({
+    r.columns !== this.props.columns && this.calculateSizes(this.element), k.onComponentDidUpdate({
       scope: this.element || void 0,
       contextStateRef: this.contextStateRef,
       navigationStateRef: this.navigationStateRef
@@ -438,15 +442,15 @@ class we extends l.Component {
       reorderable: o = !1,
       skip: i,
       take: s
-    } = this.props, d = r.some((h) => !!h.filter || !!h.filterCell) || t !== void 0, g = t || Ze, m = te.getIdPrefix(this.navigationStateRef);
+    } = this.props, d = r.some((h) => !!h.filter || !!h.filterCell) || t !== void 0, g = t || et, m = ee.getIdPrefix(this.navigationStateRef);
     this.extendedColumn = this.getExtendedColumn(r, m), this.columnsMap = this.getColumnsMap(this.extendedColumn);
-    const p = this.extendedColumn.filter((h) => h.children.length === 0);
+    const C = this.extendedColumn.filter((h) => h.children.length === 0);
     this.columnResize.columns = this.extendedColumn, this.columnResize.resizable = n, this.dragLogic.columns = this.extendedColumn, this.dragLogic.reorderable = o, this.dragLogic.groupable = !1;
     const S = /* @__PURE__ */ l.createElement(
-      Ue,
+      We,
       {
         headerRow: /* @__PURE__ */ l.createElement(
-          We,
+          Xe,
           {
             sort: this.props.sort,
             sortable: this.props.sortable,
@@ -468,7 +472,7 @@ class we extends l.Component {
         filterRow: d && /* @__PURE__ */ l.createElement(
           g,
           {
-            columns: p,
+            columns: C,
             filter: this.props.filter,
             filterChange: this.filterChange,
             sort: this.props.sort,
@@ -477,87 +481,88 @@ class we extends l.Component {
         ) || void 0,
         columnResize: this.columnResize
       }
-    ), w = this.props.style || {}, { colSpans: v, hiddenColumns: O } = Xe({
+    ), w = this.props.style || {}, { colSpans: x, hiddenColumns: O } = Ge({
       enabled: this.props.columnVirtualization,
-      columns: p,
+      columns: C,
       scrollLeft: this.wrapperScrollLeft,
       tableViewPortWidth: parseFloat((w.width || "").toString())
-    }), E = (h, x, A, M, P, N) => p.map((u, b) => {
-      if (O[b])
+    }), E = (h, b, A, M, P, N) => C.map((u, p) => {
+      if (O[p])
         return null;
-      const y = u.id ? u.id : b, U = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, D = {
-        id: te.generateNavigatableId(`${A}-${String(b)}`, m),
-        colSpan: v[b],
+      const R = u.id ? u.id : p, V = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, D = {
+        id: ee.generateNavigatableId(`${A}-${String(p)}`, m),
+        colSpan: x[p],
         dataItem: h.dataItem,
         field: u.field,
         format: u.format,
-        className: U || void 0,
+        className: V || void 0,
         render: this.props.cellRender,
         onChange: this.itemChange,
-        selectionChange: this.props.onSelectionChange ? (R) => {
-          this.selectionChange({ event: R, item: h, columnIndex: b, dataIndex: P });
+        selectionChange: this.props.onSelectionChange ? (y) => {
+          this.selectionChange({ event: y, item: h, columnIndex: p, dataIndex: P });
         } : void 0,
         level: h.level,
         expandable: u.expandable,
         expanded: M,
         hasChildren: this.hasChildren(h.dataItem),
         onExpandChange: this.expandChange,
-        colIndex: b,
+        colIndex: p,
         ariaColumnIndex: u.ariaColumnIndex,
         style: u.left !== void 0 && {
           left: u.left,
           right: u.right,
           borderRightWidth: u.rightBorder ? "1px" : ""
         } || {},
-        isSelected: Array.isArray(N) && N.indexOf(b) > -1
+        isSelected: Array.isArray(N) && N.indexOf(p) > -1
       };
-      return x && u.editCell ? /* @__PURE__ */ l.createElement(u.editCell, { key: y, ...D, onChange: this.itemChange }) : u.cell ? /* @__PURE__ */ l.createElement(u.cell, { key: y, ...D }) : /* @__PURE__ */ l.createElement(le, { key: y, ...D });
+      return b && u.editCell ? /* @__PURE__ */ l.createElement(u.editCell, { key: R, ...D, onChange: this.itemChange }) : u.cell ? /* @__PURE__ */ l.createElement(u.cell, { key: R, ...D }) : /* @__PURE__ */ l.createElement(le, { key: R, ...D });
     });
     let f = this.flatData;
     const F = f.length;
-    i !== void 0 && s !== void 0 && (f = f.slice(i, i + s)), a === "virtual" && (f = vt({
+    i !== void 0 && s !== void 0 && (f = f.slice(i, i + s)), a === "virtual" && (f = xt({
       rows: f,
       tableViewPortHeight: parseFloat((w.height || w.maxHeight || "").toString()),
       scrollTop: this.wrapperScrollTop
     }), this.updateOnScroll = !1);
-    const ye = f.map((h) => h.level), De = this.columnsMap.length + (d ? 1 : 0) + 1, Te = f.length > 0 && f.map((h, x) => {
-      const A = C(this.props.editField, h.dataItem), M = this.props.dataItemKey && Me(this.props.dataItemKey)(h.dataItem), P = String(M || h.level.join(".")), N = this.expanded(h.dataItem), u = this.props.selectedField ? C(this.props.selectedField, h.dataItem) : void 0, b = {
+    const Re = f.map((h) => h.level), De = this.columnsMap.length + (d ? 1 : 0) + 1, ke = f.length > 0 && f.map((h, b) => {
+      const A = v(this.props.editField, h.dataItem), M = this.props.dataItemKey && Me(this.props.dataItemKey)(h.dataItem), P = String(M || h.level.join(".")), N = this.expanded(h.dataItem), u = this.props.selectedField ? v(this.props.selectedField, h.dataItem) : void 0, p = {
         key: P,
         level: h.level,
-        levels: ye,
+        levels: Re,
         dataItem: h.dataItem,
         selectedField: this.props.selectedField,
         rowHeight: a === "virtual" ? h.height : this.props.rowHeight,
         render: this.props.rowRender,
         onDrop: this.onRowDrop,
         onDrag: this.onRowDrag,
-        onClick: (R) => this.rowClick(R, h),
-        onDoubleClick: (R) => this.rowDoubleClick(R, h),
-        onContextMenu: (R) => this.rowContextMenu(R, h),
-        isAltRow: x % 2 !== 0,
+        onClick: (y) => this.rowClick(y, h),
+        onDoubleClick: (y) => this.rowDoubleClick(y, h),
+        onContextMenu: (y) => this.rowContextMenu(y, h),
+        isAltRow: b % 2 !== 0,
         expanded: N,
-        rowIndex: x,
-        ariaRowIndex: De + x,
+        rowIndex: b,
+        ariaRowIndex: De + b,
         ariaSetSize: h.levelCount,
         ariaPosInSet: h.level[h.level.length - 1] + 1,
         isSelected: typeof u == "boolean" && u
-      }, y = this.props.editRow, U = this.props.row || Y, D = E(h, A, P, N, x, u);
-      return A && y ? /* @__PURE__ */ l.createElement(y, { ...b }, D) : /* @__PURE__ */ l.createElement(U, { ...b }, D);
-    }) || /* @__PURE__ */ l.createElement("tr", { className: "k-table-row k-grid-norecords" }, /* @__PURE__ */ l.createElement("td", { colSpan: p.length }, this.props.noRecords || /* @__PURE__ */ l.createElement(Se, null))), ke = (h) => this.props.sort && this.props.sort.some((x) => x.field === h), Ne = /* @__PURE__ */ l.createElement("colgroup", { ref: (h) => {
+      }, R = this.props.editRow, V = this.props.row || j, D = E(h, A, P, N, b, u);
+      return A && R ? /* @__PURE__ */ l.createElement(R, { ...p, key: p.key }, D) : /* @__PURE__ */ l.createElement(V, { ...p, key: p.key }, D);
+    }) || /* @__PURE__ */ l.createElement("tr", { className: "k-table-row k-grid-norecords" }, /* @__PURE__ */ l.createElement("td", { colSpan: C.length }, this.props.noRecords || /* @__PURE__ */ l.createElement(Se, null))), Te = (h) => this.props.sort && this.props.sort.some((b) => b.field === h), Ne = /* @__PURE__ */ l.createElement("colgroup", { ref: (h) => {
       this.columnResize.colGroupMain = h;
-    } }, p.map(
-      (h, x) => /* @__PURE__ */ l.createElement(
+    } }, C.map(
+      (h, b) => /* @__PURE__ */ l.createElement(
         "col",
         {
-          key: x.toString(),
-          className: ke(h.field) ? "k-sorted" : void 0,
+          key: b.toString(),
+          className: Te(h.field) ? "k-sorted" : void 0,
           style: h.width !== void 0 ? { width: h.width } : void 0
         }
       )
-    )), Le = this.props.columnVirtualization || this.props.scrollable === "virtual", Oe = this.props.selectable && this.props.selectable.drag ? "none" : void 0, J = this.props.tableProps || {};
+    )), Le = this.props.columnVirtualization || this.props.scrollable === "virtual", Oe = this.props.selectable && this.props.selectable.drag ? "none" : void 0, Y = this.props.tableProps || {};
     return /* @__PURE__ */ l.createElement(oe.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ l.createElement(
       "div",
       {
+        id: this.props.id,
         style: this.props.style,
         className: I(
           "k-grid k-grid-md",
@@ -569,13 +574,13 @@ class we extends l.Component {
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,
         "aria-rowcount": F,
-        "aria-colcount": p.length,
+        "aria-colcount": C.length,
         role: "treegrid",
-        ...Ge
+        ...$e
       },
       this.props.toolbar,
       /* @__PURE__ */ l.createElement(
-        $e,
+        je,
         {
           selectable: this.props.selectable,
           onRelease: this.selectionRelease
@@ -584,13 +589,13 @@ class we extends l.Component {
           "table",
           {
             className: "k-table k-table-md k-grid-table",
-            ...J,
-            style: { ...J.style || {}, userSelect: Oe },
+            ...Y,
+            style: { ...Y.style || {}, userSelect: Oe },
             role: "presentation"
           },
           Ne,
           S,
-          /* @__PURE__ */ l.createElement("tbody", { className: "k-table-tbody", ...je, role: "presentation" }, Te)
+          /* @__PURE__ */ l.createElement("tbody", { className: "k-table-tbody", ...Ye, role: "presentation" }, ke)
         )
       ),
       this.props.pager && /* @__PURE__ */ l.createElement(
@@ -603,7 +608,7 @@ class we extends l.Component {
           onPageChange: this.onPageChange
         }
       ),
-      o && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Ye, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ l.createElement(Je, { ref: this.dragLogic.refDragElementClue }))
+      o && /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Je, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ l.createElement(Qe, { ref: this.dragLogic.refDragElementClue }))
     ));
   }
   get columns() {
@@ -615,15 +620,15 @@ class we extends l.Component {
         colSpan: d,
         rowSpan: g,
         index: m,
-        kFirst: p,
+        kFirst: C,
         groupable: S,
         children: w,
-        ...v
+        ...x
       } = n;
       return w.length ? {
         children: t(w),
-        ...v
-      } : v;
+        ...x
+      } : x;
     }));
     return t(r);
   }
@@ -634,12 +639,12 @@ class we extends l.Component {
       const s = { height: t, offsetTop: a };
       return a += s.height, s;
     };
-    let o = this.updateOnScroll && this.prevData === r && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : Qe(r, this.expandedSubItems, n);
+    let o = this.updateOnScroll && this.prevData === r && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : Ze(r, this.expandedSubItems, n);
     return this.prevData = r, this.flattedData = o, o;
   }
   selectionChange(r) {
     if (this.props.onSelectionChange) {
-      const { event: t, item: a, dataIndex: n, columnIndex: o } = r, { mode: i, cell: s } = ee(this.props.selectable), d = {
+      const { event: t, item: a, dataIndex: n, columnIndex: o } = r, { mode: i, cell: s } = Z(this.props.selectable), d = {
         ...this.getArguments(t.syntheticEvent),
         dataItem: a.dataItem,
         level: a.level,
@@ -731,13 +736,13 @@ we.propTypes = {
   navigatable: c.bool
 };
 we.contextType = oe;
-const Kt = (e) => /* @__PURE__ */ l.createElement(et, { ...e }), It = (e) => {
+const _t = (e) => /* @__PURE__ */ l.createElement(tt, { ...e }), St = (e) => {
   const r = l.useCallback(
     (i) => {
       e.selectionChange && e.selectionChange({ syntheticEvent: i });
     },
     [e.selectionChange]
-  ), t = l.useMemo(() => z(), []), a = C(e.field, e.dataItem), n = k(e.id), o = /* @__PURE__ */ l.createElement(
+  ), t = ne(), a = v(e.field, e.dataItem), n = T(e.id), o = /* @__PURE__ */ l.createElement(
     "td",
     {
       style: e.style,
@@ -763,19 +768,19 @@ const Kt = (e) => /* @__PURE__ */ l.createElement(et, { ...e }), It = (e) => {
   );
   return e.render ? e.render.call(void 0, o, e) : o;
 };
-It.displayName = "KendoReactTreeListSelectionCell";
-class _t extends l.Component {
+St.displayName = "KendoReactTreeListSelectionCell";
+class qt extends l.Component {
   constructor() {
-    super(...arguments), this._inputId = z();
+    super(...arguments), this._inputId = Pe();
   }
   /**
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ l.createElement(tt, { inputId: this._inputId, ...this.props });
+    return /* @__PURE__ */ l.createElement(at, { inputId: this._inputId, ...this.props });
   }
 }
-const St = (e) => e.visible && j ? ut.createPortal(
+const wt = (e) => e.visible && $ ? mt.createPortal(
   /* @__PURE__ */ l.createElement(
     "div",
     {
@@ -790,23 +795,23 @@ const St = (e) => e.visible && j ? ut.createPortal(
       }
     },
     /* @__PURE__ */ l.createElement(
-      ne,
+      ae,
       {
         className: I(
           "k-drag-status"
         ),
         name: e.allowDrop ? "plus" : "cancel",
-        icon: e.allowDrop ? ht : gt
+        icon: e.allowDrop ? gt : ut
       }
     ),
     e.text
   ),
   document.body
 ) : null;
-function wt(e, r, t) {
+function yt(e, r, t) {
   if (!e.originalEvent)
     return -1;
-  let a = Re(e, "tr", t);
+  let a = ye(e, "tr", t);
   if (a) {
     const n = r ? r.childNodes : [];
     for (let o = 0; o < n.length; o++)
@@ -815,23 +820,23 @@ function wt(e, r, t) {
   }
   return -1;
 }
-function Re(e, r, t) {
+function ye(e, r, t) {
   let a = t ? t.elementFromPoint(e.clientX, e.clientY) : null;
   return r && a ? a.closest(r) : null;
 }
-const Rt = "k-grid k-grid-md", ae = {
+const Rt = "k-grid k-grid-md", te = {
   visible: !1,
   top: 0,
   left: 0,
   text: "",
   allowDrop: !1
 };
-class qt extends l.Component {
+class Vt extends l.Component {
   constructor() {
     super(...arguments), this.state = {
-      clueProps: { ...ae }
+      clueProps: { ...te }
     }, this.draggable = l.createRef(), this.dragged = null, this.draggedOver = null, this.onPress = () => this.dragged = this.props.level, this.onDrag = (r) => {
-      if (!j)
+      if (!$)
         return;
       const t = this.draggable.current && this.draggable.current.element, a = t ? t.ownerDocument : document;
       if (!a)
@@ -839,9 +844,9 @@ class qt extends l.Component {
       const n = r.event, o = this.dragged;
       if (t && o) {
         !n.isTouch && n.type !== "scroll" && n.originalEvent.preventDefault();
-        const i = this.props.levels[wt(n, t.parentNode, a)];
+        const i = this.props.levels[yt(n, t.parentNode, a)];
         this.draggedOver = i;
-        const s = i ? !o.every((d, g) => d === i[g]) : !!Re(n, Rt, a);
+        const s = i ? !o.every((d, g) => d === i[g]) : !!ye(n, Rt, a);
         this.setState({
           clueProps: {
             visible: !0,
@@ -861,7 +866,7 @@ class qt extends l.Component {
       const t = r.event;
       if (this.dragged) {
         const a = [...this.dragged], n = this.draggedOver && [...this.draggedOver], o = this.state.clueProps.allowDrop;
-        this.dragged = null, this.draggedOver = null, this.setState({ clueProps: { ...ae } });
+        this.dragged = null, this.draggedOver = null, this.setState({ clueProps: { ...te } });
         const i = this.props.dataItem;
         o && this.props.onDrop && this.props.onDrop.call(void 0, {
           nativeEvent: t.originalEvent,
@@ -878,18 +883,18 @@ class qt extends l.Component {
   render() {
     const { clueProps: r } = this.state;
     return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
-      Pe,
+      ze,
       {
         ref: this.draggable,
         onPress: this.onPress,
         onDrag: this.onDrag,
         onRelease: this.onRelease
       },
-      /* @__PURE__ */ l.createElement(Y, { ...this.props })
-    ), /* @__PURE__ */ l.createElement(St, { ...r }));
+      /* @__PURE__ */ l.createElement(j, { ...this.props })
+    ), /* @__PURE__ */ l.createElement(wt, { ...r }));
   }
 }
-class Vt extends l.Component {
+class Ut extends l.Component {
   /**
    * @hidden
    */
@@ -903,90 +908,90 @@ class Vt extends l.Component {
     );
   }
 }
-const yt = [
+const Dt = [
   { text: ce, operator: "contains" },
   { text: de, operator: "doesnotcontain" },
-  { text: B, operator: "eq" },
-  { text: K, operator: "neq" },
+  { text: H, operator: "eq" },
+  { text: B, operator: "neq" },
   { text: se, operator: "startswith" },
   { text: he, operator: "endswith" },
-  { text: _, operator: "isnull" },
-  { text: q, operator: "isnotnull" },
+  { text: K, operator: "isnull" },
+  { text: _, operator: "isnotnull" },
   { text: re, operator: "isempty" },
   { text: ie, operator: "isnotempty" }
-], Dt = [
-  { text: B, operator: "eq" },
-  { text: K, operator: "neq" },
+], kt = [
+  { text: H, operator: "eq" },
+  { text: B, operator: "neq" },
   { text: ge, operator: "gte" },
   { text: ue, operator: "gt" },
   { text: me, operator: "lte" },
   { text: fe, operator: "lt" },
-  { text: _, operator: "isnull" },
-  { text: q, operator: "isnotnull" }
+  { text: K, operator: "isnull" },
+  { text: _, operator: "isnotnull" }
 ], Tt = [
-  { text: B, operator: "eq" },
-  { text: K, operator: "neq" },
+  { text: H, operator: "eq" },
+  { text: B, operator: "neq" },
   { text: xe, operator: "gte" },
   { text: be, operator: "gt" },
   { text: Ee, operator: "lt" },
   { text: Ie, operator: "lte" },
-  { text: _, operator: "isnull" },
-  { text: q, operator: "isnotnull" }
-], kt = [
+  { text: K, operator: "isnull" },
+  { text: _, operator: "isnotnull" }
+], Nt = [
   { text: ve, operator: "" },
   { text: pe, operator: !0 },
   { text: Ce, operator: !1 }
 ];
-function V(e, r) {
+function q(e, r) {
   return {
-    clearButtonTitle: e.toLanguageString(X, $[X]),
+    clearButtonTitle: e.toLanguageString(W, G[W]),
     operators: r.map((t) => ({
-      text: e.toLanguageString(t.text, $[t.text]),
+      text: e.toLanguageString(t.text, G[t.text]),
       operator: t.operator
     }))
   };
 }
-const Ut = function(e) {
+const Wt = function(e) {
   const { operators: r, ...t } = e;
   return /* @__PURE__ */ l.createElement(
-    at,
+    nt,
     {
       ariaLabel: "text filter",
-      ...V(H(), r || yt),
+      ...q(z(), r || Dt),
       ...t
     }
   );
-}, Wt = function(e) {
+}, Xt = function(e) {
   const { operators: r, ...t } = e;
   return /* @__PURE__ */ l.createElement(
-    nt,
+    ot,
     {
       ariaLabel: "numeric filter",
-      ...V(H(), r || Dt),
+      ...q(z(), r || kt),
       ...t
     }
   );
-}, Xt = function(e) {
+}, Gt = function(e) {
   const { operators: r, ...t } = e;
   return /* @__PURE__ */ l.createElement(
-    ot,
+    lt,
     {
       ariaLabel: "date filter",
-      ...V(H(), r || Tt),
+      ...q(z(), r || Tt),
       ...t
     }
   );
-}, Gt = function(e) {
+}, $t = function(e) {
   const { operators: r, ...t } = e;
   return /* @__PURE__ */ l.createElement(
-    lt,
+    rt,
     {
       ariaLabel: "boolean filter",
-      ...V(H(), r || kt),
+      ...q(z(), r || Nt),
       ...t
     }
   );
-}, Nt = (e) => {
+}, Lt = (e) => {
   const r = l.useCallback(
     (o) => {
       e.onChange && e.onChange({
@@ -998,7 +1003,7 @@ const Ut = function(e) {
       });
     },
     [e.onChange, e.dataItem, e.level, e.field]
-  ), t = k(e.id), a = I({
+  ), t = T(e.id), a = I({
     ["k-selected"]: e.isSelected
   }, e.className), n = /* @__PURE__ */ l.createElement(
     "td",
@@ -1016,15 +1021,15 @@ const Ut = function(e) {
       {
         style: { width: "100%" },
         className: "k-input",
-        value: C(e.field, e.dataItem) || "",
+        value: v(e.field, e.dataItem) || "",
         onChange: r
       }
     )
   );
   return e.render ? e.render.call(void 0, n, e) : n;
 };
-Nt.displayName = "KendoReactTreeListTextEditor";
-const Lt = (e) => {
+Lt.displayName = "KendoReactTreeListTextEditor";
+const Ot = (e) => {
   const r = l.useCallback(
     (i) => {
       e.onChange && e.onChange({
@@ -1036,7 +1041,7 @@ const Lt = (e) => {
       });
     },
     [e.onChange, e.dataItem, e.level, e.field]
-  ), t = C(e.field, e.dataItem), a = k(e.id), n = I({
+  ), t = v(e.field, e.dataItem), a = T(e.id), n = I({
     ["k-selected"]: e.isSelected
   }, e.className), o = /* @__PURE__ */ l.createElement(
     "td",
@@ -1050,7 +1055,7 @@ const Lt = (e) => {
       [L]: e.colIndex
     },
     /* @__PURE__ */ l.createElement(
-      mt,
+      ft,
       {
         width: "100%",
         value: t === void 0 ? null : t,
@@ -1060,8 +1065,8 @@ const Lt = (e) => {
   );
   return e.render ? e.render.call(void 0, o, e) : o;
 };
-Lt.displayName = "KendoReactTreeListNumericEditor";
-const Ot = (e) => {
+Ot.displayName = "KendoReactTreeListNumericEditor";
+const Ft = (e) => {
   const r = l.useCallback(
     (i) => {
       e.onChange && e.onChange({
@@ -1073,7 +1078,7 @@ const Ot = (e) => {
       });
     },
     [e.onChange, e.dataItem, e.level, e.field]
-  ), t = l.useMemo(() => z(), []), a = k(e.id), n = I({
+  ), t = ne(), a = T(e.id), n = I({
     ["k-selected"]: e.isSelected
   }, e.className), o = /* @__PURE__ */ l.createElement(
     "td",
@@ -1089,7 +1094,7 @@ const Ot = (e) => {
     /* @__PURE__ */ l.createElement(
       "input",
       {
-        checked: C(e.field, e.dataItem) || !1,
+        checked: v(e.field, e.dataItem) || !1,
         id: t,
         type: "checkbox",
         className: "k-checkbox k-checkbox-md k-rounded-md",
@@ -1100,8 +1105,8 @@ const Ot = (e) => {
   );
   return e.render ? e.render.call(void 0, o, e) : o;
 };
-Ot.displayName = "KendoReactTreeListBooleanEditor";
-const Ft = (e) => {
+Ft.displayName = "KendoReactTreeListBooleanEditor";
+const At = (e) => {
   const r = l.useCallback(
     (o) => {
       e.onChange && e.onChange({
@@ -1113,7 +1118,7 @@ const Ft = (e) => {
       });
     },
     [e.onChange, e.dataItem, e.level, e.field]
-  ), t = k(e.id), a = I({
+  ), t = T(e.id), a = I({
     ["k-selected"]: e.isSelected
   }, e.className);
   let n = /* @__PURE__ */ l.createElement(
@@ -1128,54 +1133,54 @@ const Ft = (e) => {
       [L]: e.colIndex
     },
     /* @__PURE__ */ l.createElement(
-      ft,
+      pt,
       {
         width: "100%",
-        value: C(e.field, e.dataItem),
+        value: v(e.field, e.dataItem),
         onChange: r
       }
     )
   );
   return e.render ? e.render.call(void 0, n, e) : n;
 };
-Ft.displayName = "KendoReactTreeListDateEditor";
+At.displayName = "KendoReactTreeListDateEditor";
 export {
   L as TREELIST_COL_INDEX_ATTRIBUTE,
-  bt as TREELIST_PREVENT_SELECTION_ELEMENT,
-  xt as TREELIST_ROW_INDEX_ATTRIBUTE,
+  Et as TREELIST_PREVENT_SELECTION_ELEMENT,
+  bt as TREELIST_ROW_INDEX_ATTRIBUTE,
   we as TreeList,
-  Ot as TreeListBooleanEditor,
-  Gt as TreeListBooleanFilter,
+  Ft as TreeListBooleanEditor,
+  $t as TreeListBooleanFilter,
   le as TreeListCell,
-  Ft as TreeListDateEditor,
-  Xt as TreeListDateFilter,
-  qt as TreeListDraggableRow,
-  Kt as TreeListHeaderCell,
-  _t as TreeListHeaderSelectionCell,
+  At as TreeListDateEditor,
+  Gt as TreeListDateFilter,
+  Vt as TreeListDraggableRow,
+  _t as TreeListHeaderCell,
+  qt as TreeListHeaderSelectionCell,
   Se as TreeListNoRecords,
-  Lt as TreeListNumericEditor,
-  Wt as TreeListNumericFilter,
-  Y as TreeListRow,
-  It as TreeListSelectionCell,
-  Nt as TreeListTextEditor,
-  Ut as TreeListTextFilter,
-  Vt as TreeListToolbar,
-  ea as createDataTree,
-  ta as extendDataItem,
-  aa as filterBy,
-  na as flatData,
-  oa as getItemPath,
-  Yt as getNestedValue,
-  la as getSelectedState,
-  ra as getSelectedStateFromKeyDown,
-  Jt as mapTree,
-  Qt as mapTreeItem,
-  ia as modifySubItems,
-  sa as moveTreeItem,
-  ca as orderBy,
-  da as removeItems,
-  Ct as setHeaderRowsTop,
-  ha as setSelectedState,
-  vt as tableRowsVirtualization,
-  ga as treeToFlat
+  Ot as TreeListNumericEditor,
+  Xt as TreeListNumericFilter,
+  j as TreeListRow,
+  St as TreeListSelectionCell,
+  Lt as TreeListTextEditor,
+  Wt as TreeListTextFilter,
+  Ut as TreeListToolbar,
+  ta as createDataTree,
+  aa as extendDataItem,
+  na as filterBy,
+  oa as flatData,
+  la as getItemPath,
+  Jt as getNestedValue,
+  ra as getSelectedState,
+  ia as getSelectedStateFromKeyDown,
+  Qt as mapTree,
+  Zt as mapTreeItem,
+  sa as modifySubItems,
+  ca as moveTreeItem,
+  da as orderBy,
+  ha as removeItems,
+  vt as setHeaderRowsTop,
+  ga as setSelectedState,
+  xt as tableRowsVirtualization,
+  ua as treeToFlat
 };