@progress/kendo-react-treelist 15.2.0-develop.1 → 15.2.0-develop.3

package/TreeList.mjs

@@ -5,582 +5,896 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as r from "react";
-import n from "prop-types";
-import { memoizeOne as A, getNestedValue as y, validatePackage as Z, getLicenseMessage as ee, noop as K, canUseDOM as te, getAbsoluteVirtualRowIndex as oe, getter as se, classNames as ne, WatermarkOverlay as ae } from "@progress/kendo-react-common";
-import { readColumns as ie, mapColumns as le, tableKeyboardNavigation as S, getSelectionOptions as O, CommonDragLogic as re, ColumnResize as he, TableKeyboardNavigationContext as P, tableKeyboardNavigationTools as V, Header as de, FilterRow as ce, HeaderRow as pe, tableColumnsVirtualization as ge, tableKeyboardNavigationScopeAttributes as ue, TableSelection as me, tableKeyboardNavigationBodyAttributes as fe, DropClue as Ce, DragClue as ve, flatData as be } from "@progress/kendo-react-data-tools";
-import { setHeaderRowsTop as Se, tableRowsVirtualization as we } from "./utils/index.mjs";
-import { TreeListCell as Re } from "./cells/TreeListCell.mjs";
-import { TreeListNoRecords as xe } from "./TreeListNoRecords.mjs";
-import { TreeListRow as ye } from "./rows/TreeListRow.mjs";
-import { packageMetadata as B } from "./package-metadata.mjs";
-const M = class M extends r.Component {
-  constructor(h) {
-    super(h), this.element = null, this.wrapperScrollLeft = 0, this.wrapperScrollTop = 0, this.updateOnScroll = !1, this.tbodyOffsetTop = 0, this.prevData = [], this.flattedData = [], this.extendedColumn = [], this.columnsMap = [], this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this.showLicenseWatermark = !1, this.licenseMessage = void 0, this.scrollIntoView = (e) => {
-      if (!this.element)
-        return;
-      const { rowIndex: t = 0 } = e, { scrollable: o, rowHeight: s = 0 } = this.props;
-      if (o === "virtual" || s)
-        this.element.scroll(0, (t - 1) * s);
-      else {
-        const l = this.element.querySelector(`tbody > tr:nth-child(${t})`);
-        if (l) {
-          const i = l.offsetTop - this.tbodyOffsetTop;
-          this.element.scroll(0, i);
+import * as t from "react";
+import c from "prop-types";
+import { validatePackage as tn, getLicenseMessage as nn, getNestedValue as D, memoizeOne as nt, useWebMcpRegister as rn, noop as rt, getter as an, classNames as ke, WatermarkOverlay as at, canUseDOM as on } from "@progress/kendo-react-common";
+import { readColumns as ln, mapColumns as cn, ColumnResize as sn, CommonDragLogic as un, tableKeyboardNavigation as K, getSelectionOptions as ot, tableKeyboardNavigationTools as Se, tableColumnsVirtualization as dn, Header as fn, FilterRow as gn, HeaderRow as hn, TableKeyboardNavigationContext as lt, tableKeyboardNavigationScopeAttributes as ct, TableSelection as st, tableKeyboardNavigationBodyAttributes as it, DropClue as ut, DragClue as dt, flatData as mn } from "@progress/kendo-react-data-tools";
+import { setHeaderRowsTop as pn, tableRowsVirtualization as bn } from "./utils/index.mjs";
+import { TreeListCell as vn } from "./cells/TreeListCell.mjs";
+import { TreeListNoRecords as Cn } from "./TreeListNoRecords.mjs";
+import { TreeListRow as Rn } from "./rows/TreeListRow.mjs";
+import { packageMetadata as ft } from "./package-metadata.mjs";
+const gt = t.forwardRef((H, ht) => {
+  var Ye;
+  const {
+    columns: B = [],
+    filterRow: xe,
+    scrollable: O = "scrollable",
+    resizable: Ie = !1,
+    reorderable: V = !1,
+    skip: G,
+    take: J,
+    data: ae = [],
+    rowHeight: Fe,
+    columnVirtualization: mt,
+    selectable: A,
+    selectedField: oe,
+    editField: pt,
+    expandField: le,
+    subItemsField: U,
+    dataItemKey: De,
+    id: Q,
+    style: ce,
+    className: He,
+    toolbar: Me,
+    noRecords: bt,
+    tableProps: vt,
+    pager: X,
+    sort: $,
+    sortable: Ct,
+    filter: Rt,
+    columnMenu: Et,
+    columnMenuFilter: wt,
+    row: yt,
+    editRow: Ne,
+    rowRender: kt,
+    cellRender: St,
+    headerCellRender: xt
+  } = H, C = t.useRef(null), se = t.useRef(null), E = t.useRef(null), Y = t.useRef(null), M = t.useRef(null), j = t.useRef(null), Te = t.useRef(!1), ie = t.useRef(!1), ue = t.useRef(!1), de = t.useRef(0), fe = t.useRef(0), Z = t.useRef(!1), ee = t.useRef(0), ge = t.useRef([]), _ = t.useRef([]), w = t.useRef([]), q = t.useRef([]), s = t.useRef(H);
+  s.current = H;
+  const y = t.useRef({ current: void 0 }), x = t.useRef({ current: void 0 }), Le = t.useMemo(() => !tn(ft, { component: "TreeList" }), []), Pe = t.useMemo(() => nn(ft), []), b = t.useRef(null), R = t.useRef(null), [, It] = t.useReducer((e) => !e, !0), T = Q ? Q + "-treelist" : void 0, ze = () => {
+    var e;
+    if (on)
+      return ((e = C.current) == null ? void 0 : e.ownerDocument) || document;
+  }, We = t.useCallback(
+    (e) => !!D(le, e),
+    [le]
+  ), Ke = t.useCallback(
+    (e) => !!D(U, e),
+    [U]
+  ), Ft = t.useCallback(
+    (e) => {
+      const n = [];
+      return We(e) && Ke(e) && n.push(...D(U, e)), n;
+    },
+    [We, Ke, U]
+  ), he = t.useMemo(
+    () => nt((e, n) => ln(e, {
+      prevId: 0,
+      idPrefix: n
+    })),
+    []
+  ), me = t.useMemo(
+    () => nt(
+      (e, n) => cn(e, n)
+    ),
+    []
+  ), g = t.useRef(null), Dt = t.useCallback((e) => {
+    if (!C.current)
+      return;
+    const { rowIndex: n = 0 } = e, r = s.current, a = r.rowHeight || 0, l = E.current || C.current;
+    if (r.scrollable === "virtual" || a)
+      l.scroll(0, (n - 1) * a);
+    else {
+      const u = (E.current || C.current).querySelector(
+        `tbody > tr:nth-child(${n})`
+      );
+      if (u) {
+        const o = u.offsetTop - ee.current;
+        l.scroll(0, o);
+      }
+    }
+  }, []);
+  if (t.useImperativeHandle(
+    g,
+    () => ({
+      get element() {
+        return C.current;
+      },
+      props: H,
+      scrollIntoView: Dt
+    })
+  ), t.useImperativeHandle(ht, () => g.current), rn("treelist", g, H, H.webMcp), !b.current) {
+    const e = (a, l, u, o, d) => {
+      var p, i, f;
+      const h = (p = b.current) == null ? void 0 : p.colGroupMain;
+      if (h) {
+        let v = 0;
+        const m = h.children;
+        for (let F = 0; F < m.length; F++) {
+          const W = m[F].style.width;
+          if (!W) {
+            v = 0;
+            break;
+          }
+          v += parseFloat(W);
         }
+        v = Math.round(v);
+        const N = v ? v + "px" : "";
+        M.current && (M.current.style.width = N), j.current && (j.current.style.width = N);
       }
-    }, this.getExtendedColumn = A((e, t) => ie(e, {
-      prevId: 0,
-      idPrefix: t
-    })), this.getColumnsMap = A((e, t) => le(e, t)), this.onKeyDown = (e) => {
-      if (S.onKeyDown(e, {
-        navigatable: !1,
-        contextStateRef: this.contextStateRef,
-        navigationStateRef: this.navigationStateRef
-      }), this.props.onKeyDown) {
-        const { mode: t, cell: o } = O(this.props.selectable), s = {
-          dataItems: this.getLeafDataItems(),
-          mode: t,
-          cell: o,
-          componentId: this._treeListId,
-          selectedField: this.props.selectedField || "",
-          ...this.getArguments(e)
+      if (s.current.onColumnResize) {
+        let v = 0;
+        const m = (f = (i = b.current) == null ? void 0 : i.colGroupMain) == null ? void 0 : f.children;
+        if (m)
+          for (let S = 0; S < m.length; S++)
+            v += parseFloat(m[S].style.width || "0");
+        const F = w.current.filter(
+          (S) => S.declarationIndex >= 0 && S.parentIndex === -1
+        ), W = (S) => (S.sort((re, Ee) => re.declarationIndex - Ee.declarationIndex), S.map((re) => {
+          const {
+            declarationIndex: Ee,
+            parentIndex: Zt,
+            depth: en,
+            colSpan: we,
+            rowSpan: ye,
+            index: wn,
+            kFirst: yn,
+            groupable: kn,
+            children: et,
+            ...tt
+          } = re;
+          return et.length ? { children: W(et), ...tt } : tt;
+        })), Ze = {
+          columns: W(F),
+          totalWidth: v,
+          index: a,
+          nativeEvent: o,
+          newWidth: l,
+          oldWidth: u,
+          end: d,
+          target: g.current
         };
-        this.props.onKeyDown.call(void 0, s);
+        s.current.onColumnResize(Ze);
       }
-    }, this.onFocus = (e) => {
-      S.onFocus(e, {
-        contextStateRef: this.contextStateRef
-      });
-    }, this.onRowDrag = (e) => {
-      this.props.onRowDrag && this.props.onRowDrag.call(void 0, { ...e, target: this });
-    }, this.onRowDrop = (e) => {
-      this.props.onRowDrop && this.props.onRowDrop.call(void 0, { ...e, target: this });
-    }, this.columnReorder = (e, t, o) => {
-      const s = this.extendedColumn[e].depth, l = (d) => {
+    };
+    b.current = new sn(e);
+    const n = (a, l, u) => {
+      const o = w.current, d = o[a].depth, h = (i) => {
         do
-          d++;
-        while (d < this.extendedColumn.length && this.extendedColumn[d].depth > s);
-        return d;
-      }, i = this.extendedColumn.splice(e, l(e) - e);
-      if (this.extendedColumn.splice(e < t ? l(t - i.length) : t, 0, ...i), this.extendedColumn.filter((d) => d.declarationIndex >= 0).forEach((d, g) => d.orderIndex = g), this.props.onColumnReorder) {
-        const d = {
-          target: this,
-          columns: this.columns,
-          nativeEvent: o
+          i++;
+        while (i < o.length && o[i].depth > d);
+        return i;
+      }, p = o.splice(a, h(a) - a);
+      if (o.splice(a < l ? h(l - p.length) : l, 0, ...p), o.filter((i) => i.declarationIndex >= 0).forEach((i, f) => i.orderIndex = f), s.current.onColumnReorder) {
+        const i = o.filter(
+          (m) => m.declarationIndex >= 0 && m.parentIndex === -1
+        ), f = (m) => (m.sort((N, F) => N.declarationIndex - F.declarationIndex), m.map((N) => {
+          const {
+            declarationIndex: F,
+            parentIndex: W,
+            depth: Ze,
+            colSpan: S,
+            rowSpan: re,
+            index: Ee,
+            kFirst: Zt,
+            groupable: en,
+            children: we,
+            ...ye
+          } = N;
+          return we.length ? { children: f(we), ...ye } : ye;
+        })), v = {
+          target: g.current,
+          columns: f(i),
+          nativeEvent: u
         };
-        this.props.onColumnReorder.call(void 0, d);
+        s.current.onColumnReorder(v);
+      }
+    };
+    R.current = new un(n, rt, rt);
+    const r = b.current.dragHandler.bind(b.current);
+    b.current.dragHandler = (a, l, u, o) => {
+      Ht(), r(a, l, u, o);
+    }, K.onConstructor({
+      navigatable: !!s.current.navigatable,
+      contextStateRef: y.current,
+      navigationStateRef: x.current
+    });
+  }
+  const pe = t.useCallback((e) => {
+    var u;
+    if (!e || s.current.scrollable === "none")
+      return;
+    if (E.current) {
+      const o = E.current.querySelector("table");
+      o != null && o.tBodies[0] && (ee.current = o.tBodies[0].offsetTop);
+      const d = (u = Y.current) == null ? void 0 : u.parentElement;
+      if (d) {
+        const h = E.current.offsetWidth - E.current.clientWidth;
+        d.style.paddingInlineEnd = h + "px";
+      }
+      return;
+    }
+    const n = Array.from(e.childNodes), r = n.find((o) => o.nodeName === "TABLE"), a = s.current.toolbar && n.find(
+      (o) => o.nodeType === 1 && o.classList.contains("k-grid-toolbar")
+    );
+    let l = 0;
+    if (a) {
+      const o = a.style.boxSizing;
+      a.style.boxSizing = "border-box", l = parseFloat(String(window.getComputedStyle(a).height)) || a.offsetHeight, a.style.boxSizing = o, a.getAttribute("style") || a.removeAttribute("style");
+    }
+    ee.current = r.tBodies[0].offsetTop, pn(r, l);
+  }, []), Ht = () => {
+    var p, i;
+    const e = (p = b.current) == null ? void 0 : p.colGroupMain;
+    if (!e || !M.current)
+      return;
+    const n = e.children, r = w.current.filter((f) => f.children.length === 0), a = (i = b.current) == null ? void 0 : i.colGroupHeader, l = M.current.offsetWidth;
+    let u = 0, o = !0;
+    for (let f = 0; f < r.length; f++)
+      if (r[f].width !== void 0)
+        u += parseFloat(String(r[f].width));
+      else {
+        o = !1;
+        break;
       }
-    }, this.onResize = (e, t, o, s, l) => {
-      if (this.props.onColumnResize) {
-        const i = this.extendedColumn.filter((g) => g.children.length === 0).reduce((g, u) => g += parseFloat(String(u.width)), 0), d = {
-          columns: this.columns,
-          totalWidth: i,
-          index: e,
-          nativeEvent: s,
-          newWidth: t,
-          oldWidth: o,
-          end: l,
-          target: this
+    if (!o || !l || !u || Math.abs(l - u) <= 1)
+      return;
+    Te.current = !0;
+    const d = l / u;
+    let h = 0;
+    for (let f = 0; f < r.length; f++) {
+      const v = parseFloat(String(r[f].width));
+      let m;
+      f === r.length - 1 ? m = l - h : m = Math.round(v * d), h += m, r[f].width = m, n[f] && (n[f].style.width = m + "px"), a != null && a.children[f] && (a.children[f].style.width = m + "px");
+    }
+    M.current && (M.current.style.width = l + "px"), j.current && (j.current.style.width = l + "px");
+  }, te = () => _.current.map((e) => e.dataItem), L = t.useCallback(
+    (e, n, r) => {
+      const a = s.current;
+      if (e)
+        e({
+          nativeEvent: r == null ? void 0 : r.nativeEvent,
+          syntheticEvent: r,
+          target: g.current,
+          ...n
+        });
+      else if (a.onDataStateChange) {
+        const l = {
+          nativeEvent: r == null ? void 0 : r.nativeEvent,
+          syntheticEvent: r,
+          target: g.current,
+          dataState: {
+            filter: a.filter,
+            sort: a.sort,
+            ...n
+          }
         };
-        this.props.onColumnResize.call(void 0, d);
+        a.onDataStateChange(l);
       }
-    }, this.handleOnScroll = (e) => {
-      const t = e.currentTarget.scrollLeft, o = e.currentTarget.scrollTop, { columnVirtualization: s, scrollable: l, rowHeight: i = 0 } = this.props, d = i, g = 0;
-      let u = !1;
-      s && Math.abs(this.wrapperScrollLeft - t) > g && (this.wrapperScrollLeft = t, u = !0), l === "virtual" && Math.abs(this.wrapperScrollTop - o) > d && (this.wrapperScrollTop = o, u = !0), u && (this.updateOnScroll = !0, this.forceUpdate());
-    }, this.calculateSizes = (e) => {
-      if (!e || this.props.scrollable === "none")
-        return;
-      const t = Array.from(e.childNodes), o = t.find((i) => i.nodeName === "TABLE"), s = this.props.toolbar && t.find(
-        (i) => i.nodeType === 1 && i.classList.contains("k-grid-toolbar")
+    },
+    []
+  ), Mt = t.useCallback(
+    (e, n, r) => {
+      L(s.current.onSortChange, { sort: n, field: r }, e);
+    },
+    [L]
+  ), Nt = t.useCallback(
+    (e, n, r) => {
+      L(s.current.onFilterChange, { filter: n, field: r }, e);
+    },
+    [L]
+  ), Tt = t.useCallback(
+    (e) => {
+      L(
+        s.current.onFilterChange,
+        { filter: e.filter, field: e.field },
+        e.syntheticEvent
       );
-      let l = 0;
-      if (s) {
-        const i = s.style.boxSizing;
-        s.style.boxSizing = "border-box", l = parseFloat(String(window.getComputedStyle(s).height)) || s.offsetHeight, s.style.boxSizing = i, s.getAttribute("style") || s.removeAttribute("style");
-      }
-      this.tbodyOffsetTop = o.tBodies[0].offsetTop, Se(o, l);
-    }, this.itemChange = (e) => {
-      const t = this.props.onItemChange;
-      if (e.field === this.props.expandField) {
-        const o = this.props.onExpandChange;
-        if (o) {
-          const s = {
-            ...this.getArguments(e.syntheticEvent),
-            dataItem: e.dataItem,
-            level: e.level,
-            value: e.value
-          };
-          o.call(void 0, s);
-        }
+    },
+    [L]
+  ), Lt = t.useCallback(
+    (e, n, r) => {
+      const a = s.current;
+      if (!a.onColumnMenuFilterChange)
         return;
+      const l = {
+        syntheticEvent: e,
+        filter: n,
+        field: r,
+        target: g.current,
+        nativeEvent: e.nativeEvent
+      };
+      a.onColumnMenuFilterChange(l);
+    },
+    []
+  ), Pt = t.useCallback(
+    (e, n, r) => {
+      const a = s.current;
+      if (a.expandField && a.onExpandChange) {
+        const l = {
+          nativeEvent: e == null ? void 0 : e.nativeEvent,
+          syntheticEvent: e,
+          target: g.current,
+          dataItem: n,
+          level: r,
+          value: !!D(a.expandField, n)
+        };
+        a.onExpandChange(l);
       }
-      if (t) {
-        const o = {
-          ...this.getArguments(e.syntheticEvent),
+    },
+    []
+  ), Be = t.useCallback((e) => {
+    var r, a;
+    const n = s.current;
+    if (e.field === n.expandField) {
+      if (n.onExpandChange) {
+        const l = {
+          nativeEvent: (r = e.syntheticEvent) == null ? void 0 : r.nativeEvent,
+          syntheticEvent: e.syntheticEvent,
+          target: g.current,
           dataItem: e.dataItem,
           level: e.level,
-          field: e.field,
           value: e.value
         };
-        t.call(void 0, o);
+        n.onExpandChange(l);
       }
-    }, this.onHeaderSelectionChange = (e) => {
-      if (this.props.onHeaderSelectionChange) {
-        const t = {
-          field: e.field,
-          nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
-          syntheticEvent: e.syntheticEvent,
-          target: this,
-          dataItems: this.getLeafDataItems()
+      return;
+    }
+    if (n.onItemChange) {
+      const l = {
+        nativeEvent: (a = e.syntheticEvent) == null ? void 0 : a.nativeEvent,
+        syntheticEvent: e.syntheticEvent,
+        target: g.current,
+        dataItem: e.dataItem,
+        level: e.level,
+        field: e.field,
+        value: e.value
+      };
+      n.onItemChange(l);
+    }
+  }, []), zt = t.useCallback(
+    (e) => {
+      var r;
+      const n = s.current;
+      if (n.onSelectionChange) {
+        const { event: a, item: l, dataIndex: u, columnIndex: o } = e, { mode: d, cell: h } = ot(n.selectable), p = {
+          nativeEvent: (r = a.syntheticEvent) == null ? void 0 : r.nativeEvent,
+          syntheticEvent: a.syntheticEvent,
+          target: g.current,
+          dataItem: l.dataItem,
+          level: l.level,
+          startColIndex: o,
+          endColIndex: o,
+          startRowIndex: u,
+          endRowIndex: u,
+          dataItems: te(),
+          altKey: !1,
+          ctrlKey: !1,
+          shiftKey: !1,
+          metaKey: !1,
+          mode: d,
+          cell: h,
+          isDrag: !1,
+          componentId: T,
+          selectedField: n.selectedField || ""
         };
-        this.props.onHeaderSelectionChange.call(void 0, t);
+        n.onSelectionChange(p);
       }
-    }, this.selectionRelease = (e) => {
-      if (this.props.onSelectionChange) {
-        const t = {
+    },
+    [T]
+  ), Wt = t.useCallback((e) => {
+    var r;
+    const n = s.current;
+    if (n.onHeaderSelectionChange) {
+      const a = {
+        field: e.field,
+        nativeEvent: (r = e.syntheticEvent) == null ? void 0 : r.nativeEvent,
+        syntheticEvent: e.syntheticEvent,
+        target: g.current,
+        dataItems: te()
+      };
+      n.onHeaderSelectionChange(a);
+    }
+  }, []), Oe = t.useCallback(
+    (e) => {
+      const n = s.current;
+      if (n.onSelectionChange) {
+        const r = {
           syntheticEvent: void 0,
-          target: this,
-          selectedField: this.props.selectedField || "",
-          componentId: this._treeListId,
-          dataItems: this.getLeafDataItems(),
+          target: g.current,
+          selectedField: n.selectedField || "",
+          componentId: T,
+          dataItems: te(),
           dataItem: null,
           level: [],
           ...e
         };
-        this.props.onSelectionChange.call(void 0, t);
+        n.onSelectionChange(r);
       }
-    }, this.sortChange = (e, t, o) => {
-      this.raiseDataEvent(this.props.onSortChange, { sort: t, field: o }, e);
-    }, this.headerFilterChange = (e, t, o) => {
-      this.raiseDataEvent(this.props.onFilterChange, { filter: t, field: o }, e);
-    }, this.filterChange = (e) => {
-      const { filter: t, field: o } = e;
-      this.raiseDataEvent(this.props.onFilterChange, { filter: t, field: o }, e.syntheticEvent);
-    }, this.columnMenuFilterChange = (e, t, o) => {
-      const { onColumnMenuFilterChange: s } = this.props;
-      if (!s || !o)
-        return;
-      const l = {
+    },
+    [T]
+  ), Kt = t.useCallback((e, n) => {
+    if (s.current.onRowClick && e.target.nodeName === "TD") {
+      const r = {
+        dataItem: n.dataItem,
+        level: n.level,
+        nativeEvent: e == null ? void 0 : e.nativeEvent,
         syntheticEvent: e,
-        filter: t,
-        field: o,
-        target: this,
-        nativeEvent: e.nativeEvent
+        target: g.current
       };
-      s.call(void 0, l);
-    }, this.expandChange = (e, t, o) => {
-      const { expandField: s, onExpandChange: l } = this.props;
-      if (s && l) {
-        const i = {
-          ...this.getArguments(e),
-          dataItem: t,
-          level: o,
-          value: this.expanded(t)
-        };
-        l.call(void 0, i);
-      }
-    }, this.rowClick = (e, t) => {
-      if (this.props.onRowClick && e.target.nodeName === "TD") {
-        const o = {
-          dataItem: t.dataItem,
-          level: t.level,
-          ...this.getArguments(e)
-        };
-        this.props.onRowClick.call(void 0, o);
-      }
-    }, this.rowDoubleClick = (e, t) => {
-      if (this.props.onRowDoubleClick && e.target.nodeName === "TD") {
-        const o = {
-          dataItem: t.dataItem,
-          level: t.level,
-          ...this.getArguments(e)
-        };
-        this.props.onRowDoubleClick.call(void 0, o);
-      }
-    }, this.rowContextMenu = (e, t) => {
-      if (this.props.onRowContextMenu && e.target.nodeName === "TD") {
-        const o = {
-          dataItem: t.dataItem,
-          level: t.level,
-          ...this.getArguments(e)
-        };
-        this.props.onRowContextMenu.call(void 0, o);
-      }
-    }, this.onPageChange = (e) => {
-      if (this.props.onPageChange) {
-        const t = {
-          ...this.getArguments(e.syntheticEvent),
+      s.current.onRowClick(r);
+    }
+  }, []), Bt = t.useCallback((e, n) => {
+    if (s.current.onRowDoubleClick && e.target.nodeName === "TD") {
+      const r = {
+        dataItem: n.dataItem,
+        level: n.level,
+        nativeEvent: e == null ? void 0 : e.nativeEvent,
+        syntheticEvent: e,
+        target: g.current
+      };
+      s.current.onRowDoubleClick(r);
+    }
+  }, []), Ot = t.useCallback((e, n) => {
+    if (s.current.onRowContextMenu && e.target.nodeName === "TD") {
+      const r = {
+        dataItem: n.dataItem,
+        level: n.level,
+        nativeEvent: e == null ? void 0 : e.nativeEvent,
+        syntheticEvent: e,
+        target: g.current
+      };
+      s.current.onRowContextMenu(r);
+    }
+  }, []), Ve = t.useCallback(
+    (e) => {
+      var n;
+      if (s.current.onPageChange) {
+        const r = {
+          nativeEvent: (n = e.syntheticEvent) == null ? void 0 : n.nativeEvent,
+          syntheticEvent: e.syntheticEvent,
+          target: g.current,
           skip: e.skip,
           take: e.take
         };
-        this.props.onPageChange.call(void 0, t);
+        s.current.onPageChange(r);
       }
-    }, this.expandedSubItems = (e) => {
-      const t = [];
-      return this.expanded(e) && this.hasChildren(e) && t.push(...y(this.props.subItemsField, e)), t;
-    }, this.getLeafDataItems = () => this.flatData.map((e) => e.dataItem), this.expanded = (e) => !!y(this.props.expandField, e), this.hasChildren = (e) => !!y(this.props.subItemsField, e), this.showLicenseWatermark = !Z(B, { component: "TreeList" }), this.licenseMessage = ee(B), this.dragLogic = new re(this.columnReorder, K, K), this.columnResize = new he(this.onResize.bind(this)), S.onConstructor({
-      navigatable: !!h.navigatable,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef
-    });
-  }
-  get _treeListId() {
-    return this.props.id + "-treelist";
-  }
-  get document() {
-    if (te)
-      return this.element && this.element.ownerDocument || document;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.calculateSizes(this.element), S.onComponentDidMount({
-      scope: this.element || void 0,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef
-    });
-  }
-  /**
-   * @hidden
-   */
-  getSnapshotBeforeUpdate() {
-    return S.onGetSnapshotBeforeUpdate({
-      document: this.document,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef
-    }), null;
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(h) {
-    h.columns !== this.props.columns && this.calculateSizes(this.element), S.onComponentDidUpdate({
-      scope: this.element || void 0,
-      contextStateRef: this.contextStateRef,
-      navigationStateRef: this.navigationStateRef
+    },
+    []
+  ), Vt = t.useCallback(
+    (e) => {
+      s.current.onRowDrag && s.current.onRowDrag({ ...e, target: g.current });
+    },
+    []
+  ), Gt = t.useCallback(
+    (e) => {
+      s.current.onRowDrop && s.current.onRowDrop({ ...e, target: g.current });
+    },
+    []
+  ), Ge = t.useCallback(
+    (e) => {
+      if (K.onKeyDown(e, {
+        navigatable: !!s.current.navigatable,
+        contextStateRef: y.current,
+        navigationStateRef: x.current
+      }), s.current.onKeyDown) {
+        const { mode: n, cell: r } = ot(s.current.selectable), a = {
+          dataItems: te(),
+          mode: n,
+          cell: r,
+          componentId: T,
+          selectedField: s.current.selectedField,
+          nativeEvent: e == null ? void 0 : e.nativeEvent,
+          syntheticEvent: e,
+          target: g.current
+        };
+        s.current.onKeyDown(a);
+      }
+    },
+    [T]
+  ), Ae = t.useCallback((e) => {
+    K.onFocus(e, {
+      contextStateRef: y.current
     });
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    this.columnsMap = [], this.prevData = [], this.flattedData = [], this.updateOnScroll = !1, this.getExtendedColumn.clear(), this.getColumnsMap.clear();
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const {
-      columns: h = [],
-      filterRow: e,
-      scrollable: t = "scrollable",
-      resizable: o = !1,
-      reorderable: s = !1,
-      skip: l,
-      take: i
-    } = this.props, d = h.some((a) => !!a.filter || !!a.filterCell) || e !== void 0, g = e || ce, u = V.getIdPrefix(this.navigationStateRef), L = this.getExtendedColumn(h, u), T = L.length !== this.extendedColumn.length;
-    this.extendedColumn = L, this.columnsMap = this.getColumnsMap(this.extendedColumn, T);
-    const m = this.extendedColumn.filter((a) => a.children.length === 0);
-    this.columnResize.columns = this.extendedColumn, this.columnResize.resizable = o, this.dragLogic.columns = this.extendedColumn, this.dragLogic.reorderable = s, this.dragLogic.groupable = !1;
-    const I = /* @__PURE__ */ r.createElement(
-      de,
-      {
-        headerRow: /* @__PURE__ */ r.createElement(
-          pe,
-          {
-            sort: this.props.sort,
-            sortable: this.props.sortable,
-            sortChange: this.sortChange,
-            selectionChange: this.onHeaderSelectionChange,
-            columns: this.extendedColumn,
-            columnsMap: this.columnsMap,
-            cellRender: this.props.headerCellRender,
-            columnResize: this.columnResize,
-            columnMenu: this.props.columnMenu,
-            columnMenuFilter: this.props.columnMenuFilter,
-            columnMenuFilterChange: this.columnMenuFilterChange,
-            pressHandler: this.dragLogic.pressHandler,
-            dragHandler: this.dragLogic.dragHandler,
-            releaseHandler: this.dragLogic.releaseHandler,
-            filterChange: this.headerFilterChange
-          }
-        ),
-        reorderable: this.props.reorderable,
-        filterRow: d && /* @__PURE__ */ r.createElement(
-          g,
-          {
-            columns: m,
-            filter: this.props.filter,
-            filterChange: this.filterChange,
-            sort: this.props.sort,
-            ariaRowIndex: this.columnsMap.length + 1
-          }
-        ) || void 0,
-        columnResize: this.columnResize
+  }, []), At = t.useCallback((e) => {
+    var h;
+    const n = e.currentTarget.scrollLeft, r = e.currentTarget.scrollTop, a = s.current, u = a.rowHeight || 0, o = 0;
+    let d = !1;
+    if (a.columnVirtualization && Math.abs(de.current - n) > o && (de.current = n, d = !0), a.scrollable === "virtual" && Math.abs(fe.current - r) > u && (fe.current = r, d = !0), d) {
+      if (y.current.current && x.current.current) {
+        const p = (h = ze()) == null ? void 0 : h.activeElement, i = p && Se.getNavigatableId(p);
+        i && i === y.current.current.activeId && (x.current.current.activeElementIsFocused = !0);
       }
-    ), z = this.props.style || {}, { colSpans: W, hiddenColumns: $ } = ge({
-      enabled: this.props.columnVirtualization,
-      columns: m,
-      scrollLeft: this.wrapperScrollLeft,
-      tableViewPortWidth: parseFloat((z.width || "").toString())
-    }), j = (a, v, b, D, E, w) => m.map((c, p) => {
-      if ($[p])
-        return null;
-      const C = c.id ? c.id : p, k = `${c.className ? c.className + " " : ""}${c.locked ? "k-grid-content-sticky" : ""}`, R = {
-        id: V.generateNavigatableId(`${b}-${String(p)}`, u),
-        colSpan: W[p],
-        dataItem: a.dataItem,
-        field: c.field,
-        format: c.format,
-        className: k || void 0,
-        render: this.props.cellRender,
-        onChange: this.itemChange,
-        selectionChange: this.props.onSelectionChange ? (F) => {
-          this.selectionChange({ event: F, item: a, columnIndex: p, dataIndex: E });
-        } : void 0,
-        level: a.level,
-        expandable: c.expandable,
-        expanded: D,
-        hasChildren: this.hasChildren(a.dataItem),
-        onExpandChange: this.expandChange,
-        colIndex: p,
-        ariaColumnIndex: c.ariaColumnIndex,
-        style: c.left !== void 0 && {
-          left: c.left,
-          right: c.right,
-          borderRightWidth: c.rightBorder ? "1px" : ""
-        } || {},
-        isSelected: Array.isArray(w) && w.indexOf(p) > -1
-      };
-      return v && c.editCell ? /* @__PURE__ */ r.createElement(c.editCell, { key: C, ...R, onChange: this.itemChange }) : c.cell ? /* @__PURE__ */ r.createElement(c.cell, { key: C, ...R }) : /* @__PURE__ */ r.createElement(Re, { key: C, ...R });
+      Z.current = !0, It();
+    }
+    Y.current && !ue.current && (ie.current = !0, Y.current.scrollLeft = n), ue.current = !1;
+  }, []), Ut = t.useCallback((e) => {
+    if (ie.current) {
+      ie.current = !1;
+      return;
+    }
+    const n = e.currentTarget.scrollLeft;
+    E.current && E.current.scrollLeft !== n && (ue.current = !0, E.current.scrollLeft = n);
+  }, []), be = t.useRef(!1);
+  t.useLayoutEffect(() => (pe(C.current), K.onComponentDidMount({
+    scope: se.current || C.current || void 0,
+    contextStateRef: y.current,
+    navigationStateRef: x.current
+  }), () => {
+    be.current = !1, q.current = [], ge.current = [], _.current = [], Z.current = !1, he.clear(), me.clear();
+  }), [pe, he, me]), t.useLayoutEffect(() => {
+    K.onGetSnapshotBeforeUpdate({
+      document: ze(),
+      contextStateRef: y.current,
+      navigationStateRef: x.current
     });
-    let f = this.flatData;
-    const N = f.length;
-    l !== void 0 && i !== void 0 && (f = f.slice(l, l + i)), t === "virtual" && (f = we({
-      rows: f,
-      tableViewPortHeight: parseFloat((z.height || z.maxHeight || "").toString()),
-      scrollTop: this.wrapperScrollTop
-    }), this.updateOnScroll = !1);
-    const G = f.map((a) => a.level), _ = this.columnsMap.length + (d ? 1 : 0) + 1, q = f.length > 0 && f.map((a, v) => {
-      const b = oe(t, a, v), D = y(this.props.editField, a.dataItem), E = this.props.dataItemKey && se(this.props.dataItemKey)(a.dataItem), w = String(E || a.level.join(".")), c = this.expanded(a.dataItem), p = this.props.selectedField ? y(this.props.selectedField, a.dataItem) : void 0, C = {
-        key: w,
-        level: a.level,
-        levels: G,
-        dataItem: a.dataItem,
-        selectedField: this.props.selectedField,
-        rowHeight: t === "virtual" ? a.height : this.props.rowHeight,
-        render: this.props.rowRender,
-        onDrop: this.onRowDrop,
-        onDrag: this.onRowDrag,
-        onClick: (x) => this.rowClick(x, a),
-        onDoubleClick: (x) => this.rowDoubleClick(x, a),
-        onContextMenu: (x) => this.rowContextMenu(x, a),
-        isAltRow: b % 2 !== 0,
-        expanded: c,
-        rowIndex: b,
-        ariaRowIndex: _ + b,
-        ariaSetSize: a.levelCount,
-        ariaPosInSet: a.level[a.level.length - 1] + 1,
-        isSelected: typeof p == "boolean" && p
-      }, k = this.props.editRow, R = this.props.row || ye, F = j(a, D, w, c, b, p);
-      return D && k ? /* @__PURE__ */ r.createElement(k, { ...C, key: C.key }, F) : /* @__PURE__ */ r.createElement(R, { ...C, key: C.key }, F);
-    }) || /* @__PURE__ */ r.createElement("tr", { className: "k-table-row k-grid-norecords" }, /* @__PURE__ */ r.createElement("td", { colSpan: m.length }, this.props.noRecords || /* @__PURE__ */ r.createElement(xe, null))), J = (a) => this.props.sort && this.props.sort.some((v) => v.field === a), Q = /* @__PURE__ */ r.createElement(
-      "colgroup",
-      {
-        ref: (a) => {
-          this.columnResize.colGroupMain = a;
+  });
+  const Ue = t.useRef(B);
+  t.useLayoutEffect(() => {
+    if (!be.current) {
+      be.current = !0;
+      return;
+    }
+    Ue.current !== B && pe(C.current), Ue.current = B, K.onComponentDidUpdate({
+      scope: se.current || C.current || void 0,
+      contextStateRef: y.current,
+      navigationStateRef: x.current
+    });
+  });
+  const $e = B.some((e) => !!e.filter || !!e.filterCell) || xe !== void 0, $t = xe || gn, je = Se.getIdPrefix(x.current), _e = he(B, je), jt = _e.length !== w.current.length;
+  w.current = _e, q.current = me(w.current, jt);
+  const k = w.current.filter((e) => e.children.length === 0);
+  b.current.columns = w.current, b.current.resizable = Ie, R.current.columns = w.current, R.current.reorderable = V, R.current.groupable = !1;
+  let I = (() => {
+    let e = 0;
+    const n = (a) => {
+      const l = { height: Fe || 0, offsetTop: e };
+      return e += l.height, l;
+    }, r = Z.current && ge.current === ae && ee.current > 0 && _.current.length ? _.current : mn(ae, Ft, n);
+    return ge.current = ae, _.current = r, r;
+  })();
+  const ne = I.length;
+  G !== void 0 && J !== void 0 && (I = I.slice(G, G + J));
+  const ve = ce || {};
+  O === "virtual" && (I = bn({
+    rows: I,
+    tableViewPortHeight: parseFloat((ve.height || ve.maxHeight || "").toString()),
+    scrollTop: fe.current
+  }), Z.current = !1);
+  const { colSpans: _t, hiddenColumns: qt } = dn({
+    enabled: mt,
+    columns: k,
+    scrollLeft: de.current,
+    tableViewPortWidth: parseFloat((ve.width || "").toString())
+  }), Jt = I.map((e) => e.level), Qt = q.current.length + ($e ? 1 : 0) + 1, qe = /* @__PURE__ */ t.createElement(
+    fn,
+    {
+      headerRow: /* @__PURE__ */ t.createElement(
+        hn,
+        {
+          sort: $,
+          sortable: Ct,
+          sortChange: Mt,
+          selectionChange: Wt,
+          columns: w.current,
+          columnsMap: q.current,
+          cellRender: xt,
+          columnResize: b.current,
+          columnMenu: Et,
+          columnMenuFilter: wt,
+          columnMenuFilterChange: Lt,
+          pressHandler: R.current.pressHandler,
+          dragHandler: R.current.dragHandler,
+          releaseHandler: R.current.releaseHandler,
+          filterChange: Nt
         }
-      },
-      m.map((a, v) => /* @__PURE__ */ r.createElement(
-        "col",
+      ),
+      reorderable: V,
+      className: O !== "none" ? "k-table-thead" : void 0,
+      role: O !== "none" ? "rowgroup" : void 0,
+      filterRow: $e && /* @__PURE__ */ t.createElement(
+        $t,
         {
-          key: v.toString(),
-          className: J(a.field) ? "k-sorted" : void 0,
-          style: a.width !== void 0 ? { width: a.width } : void 0
+          columns: k,
+          filter: Rt,
+          filterChange: Tt,
+          sort: $,
+          ariaRowIndex: q.current.length + 1
         }
-      ))
-    ), X = this.props.columnVirtualization || this.props.scrollable === "virtual", Y = this.props.selectable && this.props.selectable.drag ? "none" : void 0, H = this.props.tableProps || {};
-    return /* @__PURE__ */ r.createElement(P.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      ) || void 0,
+      columnResize: b.current
+    }
+  ), Xt = (e, n, r, a, l, u) => k.map((o, d) => {
+    if (qt[d])
+      return null;
+    const h = o.id ? o.id : d, p = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, i = {
+      id: Se.generateNavigatableId(`${r}-${String(d)}`, je),
+      colSpan: _t[d],
+      dataItem: e.dataItem,
+      field: o.field,
+      format: o.format,
+      className: p || void 0,
+      render: St,
+      onChange: Be,
+      selectionChange: H.onSelectionChange ? (f) => {
+        zt({ event: f, item: e, columnIndex: d, dataIndex: l });
+      } : void 0,
+      level: e.level,
+      expandable: o.expandable,
+      expanded: a,
+      hasChildren: !!D(U, e.dataItem),
+      onExpandChange: Pt,
+      colIndex: d,
+      ariaColumnIndex: o.ariaColumnIndex,
+      style: o.left !== void 0 && {
+        left: o.left,
+        right: o.right,
+        borderRightWidth: o.rightBorder ? "1px" : ""
+      } || {},
+      isSelected: Array.isArray(u) && u.indexOf(d) > -1
+    };
+    return n && o.editCell ? /* @__PURE__ */ t.createElement(o.editCell, { key: h, ...i, onChange: Be }) : o.cell ? /* @__PURE__ */ t.createElement(o.cell, { key: h, ...i }) : /* @__PURE__ */ t.createElement(vn, { key: h, ...i });
+  }), Je = I.length > 0 && I.map((e, n) => {
+    const r = D(pt, e.dataItem), a = De && an(De)(e.dataItem), l = String(a || e.level.join(".")), u = !!D(le, e.dataItem), o = oe ? D(oe, e.dataItem) : void 0, d = {
+      key: l,
+      level: e.level,
+      levels: Jt,
+      dataItem: e.dataItem,
+      selectedField: oe,
+      rowHeight: O === "virtual" ? e.height : Fe,
+      render: kt,
+      onDrop: Gt,
+      onDrag: Vt,
+      onClick: (i) => Kt(i, e),
+      onDoubleClick: (i) => Bt(i, e),
+      onContextMenu: (i) => Ot(i, e),
+      isAltRow: n % 2 !== 0,
+      expanded: u,
+      rowIndex: n,
+      ariaRowIndex: Qt + n,
+      ariaSetSize: e.levelCount,
+      ariaPosInSet: e.level[e.level.length - 1] + 1,
+      isSelected: typeof o == "boolean" && o
+    }, h = yt || Rn, p = Xt(e, r, l, u, n, o);
+    return r && Ne ? /* @__PURE__ */ t.createElement(Ne, { ...d, key: d.key }, p) : /* @__PURE__ */ t.createElement(h, { ...d, key: d.key }, p);
+  }) || /* @__PURE__ */ t.createElement("tr", { className: "k-table-row k-grid-norecords" }, /* @__PURE__ */ t.createElement("td", { colSpan: k.length }, bt || /* @__PURE__ */ t.createElement(Cn, null))), Yt = (e) => $ == null ? void 0 : $.some((n) => n.field === e), Ce = k.map((e) => /* @__PURE__ */ t.createElement(
+    "col",
+    {
+      key: e.declarationIndex,
+      className: Yt(e.field) ? "k-sorted" : void 0,
+      style: e.width !== void 0 ? { width: e.width } : void 0
+    }
+  )), Qe = A != null && A.drag ? "none" : void 0, P = vt || {}, Xe = O !== "none";
+  let z = 0;
+  if (Xe && Ie && Te.current) {
+    let e = !0;
+    for (let n = 0; n < k.length; n++)
+      if (k[n].width !== void 0)
+        z += parseFloat(String(k[n].width));
+      else {
+        e = !1;
+        break;
+      }
+    e || (z = 0);
+  }
+  let Re;
+  return z ? Re = { width: z } : (Ye = P.style) != null && Ye.width && (Re = { width: P.style.width }), Xe ? /* @__PURE__ */ t.createElement(lt.Provider, { value: y.current.current }, /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      id: Q,
+      style: ce,
+      className: ke("k-grid", "k-treelist", "k-treelist-scrollable", He),
+      ref: (e) => {
+        C.current = e;
+      },
+      onKeyDown: Ge,
+      onFocus: Ae
+    },
+    Me,
+    /* @__PURE__ */ t.createElement(
       "div",
       {
-        id: this.props.id,
-        style: this.props.style,
-        className: ne("k-grid", "k-treelist", this.props.className, {
-          "k-treelist-scrollable": t !== "none"
-        }),
-        ref: (a) => {
-          this.element = a;
-        },
-        onScroll: X ? this.handleOnScroll : void 0,
-        onKeyDown: this.onKeyDown,
-        onFocus: this.onFocus,
-        "aria-rowcount": N,
-        "aria-colcount": m.length,
+        className: "k-grid-aria-root k-treelist",
         role: "treegrid",
-        ...ue
+        "aria-rowcount": ne,
+        "aria-colcount": k.length,
+        ref: (e) => {
+          se.current = e;
+        },
+        ...ct
       },
-      this.props.toolbar,
-      /* @__PURE__ */ r.createElement(me, { selectable: this.props.selectable, onRelease: this.selectionRelease }, /* @__PURE__ */ r.createElement(
-        "table",
+      /* @__PURE__ */ t.createElement("div", { className: ke("k-grid-header", { "k-grid-draggable-header": V }) }, /* @__PURE__ */ t.createElement(
+        "div",
         {
-          className: "k-table k-grid-table",
-          ...H,
-          style: { ...H.style || {}, userSelect: Y },
-          role: "presentation"
+          className: "k-grid-header-wrap",
+          ref: (e) => {
+            Y.current = e;
+          },
+          onScroll: Ut
         },
-        Q,
-        I,
-        /* @__PURE__ */ r.createElement(
-          "tbody",
+        /* @__PURE__ */ t.createElement(
+          "table",
           {
-            className: "k-table-tbody",
-            ...fe,
-            role: "presentation"
+            className: "k-table k-grid-header-table",
+            role: "presentation",
+            style: Re,
+            ref: (e) => {
+              M.current = e;
+            }
           },
-          q
+          /* @__PURE__ */ t.createElement(
+            "colgroup",
+            {
+              ref: (e) => {
+                b.current.colGroupHeader = e;
+              }
+            },
+            Ce
+          ),
+          qe
         )
       )),
-      this.props.pager && /* @__PURE__ */ r.createElement(
-        this.props.pager,
+      /* @__PURE__ */ t.createElement("div", { className: "k-grid-container" }, /* @__PURE__ */ t.createElement(
+        "div",
         {
-          className: "k-grid-pager",
-          total: N,
-          skip: l,
-          take: i,
-          onPageChange: this.onPageChange
-        }
+          className: "k-grid-content",
+          ref: (e) => {
+            E.current = e;
+          },
+          onScroll: At
+        },
+        /* @__PURE__ */ t.createElement(st, { selectable: A, onRelease: Oe }, /* @__PURE__ */ t.createElement(
+          "table",
+          {
+            className: "k-table k-grid-table",
+            ...P,
+            style: {
+              ...P.style || {},
+              userSelect: Qe,
+              ...z ? { width: z } : {}
+            },
+            role: "presentation",
+            ref: (e) => {
+              j.current = e;
+            }
+          },
+          /* @__PURE__ */ t.createElement(
+            "colgroup",
+            {
+              ref: (e) => {
+                b.current.colGroupMain = e;
+              }
+            },
+            Ce
+          ),
+          /* @__PURE__ */ t.createElement(
+            "tbody",
+            {
+              className: "k-table-tbody",
+              ...it,
+              role: "rowgroup"
+            },
+            Je
+          )
+        ))
+      ))
+    ),
+    X && /* @__PURE__ */ t.createElement(
+      X,
+      {
+        className: "k-grid-pager",
+        total: ne,
+        skip: G,
+        take: J,
+        onPageChange: Ve
+      }
+    ),
+    V && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(ut, { ref: R.current.refDropElementClue }), /* @__PURE__ */ t.createElement(dt, { ref: R.current.refDragElementClue })),
+    Le && /* @__PURE__ */ t.createElement(at, { message: Pe })
+  )) : /* @__PURE__ */ t.createElement(lt.Provider, { value: y.current.current }, /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      id: Q,
+      style: ce,
+      className: ke("k-grid", "k-treelist", He),
+      ref: (e) => {
+        C.current = e;
+      },
+      onKeyDown: Ge,
+      onFocus: Ae,
+      "aria-rowcount": ne,
+      "aria-colcount": k.length,
+      role: "treegrid",
+      ...ct
+    },
+    Me,
+    /* @__PURE__ */ t.createElement(st, { selectable: A, onRelease: Oe }, /* @__PURE__ */ t.createElement(
+      "table",
+      {
+        className: "k-table k-grid-table",
+        ...P,
+        style: { ...P.style || {}, userSelect: Qe },
+        role: "presentation"
+      },
+      /* @__PURE__ */ t.createElement(
+        "colgroup",
+        {
+          ref: (e) => {
+            b.current.colGroupMain = e;
+          }
+        },
+        Ce
       ),
-      s && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(Ce, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(ve, { ref: this.dragLogic.refDragElementClue })),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(ae, { message: this.licenseMessage })
-    ));
-  }
-  get columns() {
-    const h = this.extendedColumn.filter((t) => t.declarationIndex >= 0 && t.parentIndex === -1), e = (t) => (t.sort((o, s) => o.declarationIndex - s.declarationIndex), t.map((o) => {
-      const {
-        declarationIndex: s,
-        parentIndex: l,
-        depth: i,
-        colSpan: d,
-        rowSpan: g,
-        index: u,
-        kFirst: L,
-        groupable: T,
-        children: m,
-        ...I
-      } = o;
-      return m.length ? {
-        children: e(m),
-        ...I
-      } : I;
-    }));
-    return e(h);
-  }
-  get flatData() {
-    const { data: h = [], rowHeight: e = 0 } = this.props;
-    let t = 0;
-    const o = (l) => {
-      const i = { height: e, offsetTop: t };
-      return t += i.height, i;
-    }, s = this.updateOnScroll && this.prevData === h && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : be(h, this.expandedSubItems, o);
-    return this.prevData = h, this.flattedData = s, s;
-  }
-  selectionChange(h) {
-    if (this.props.onSelectionChange) {
-      const { event: e, item: t, dataIndex: o, columnIndex: s } = h, { mode: l, cell: i } = O(this.props.selectable), d = {
-        ...this.getArguments(e.syntheticEvent),
-        dataItem: t.dataItem,
-        level: t.level,
-        startColIndex: s,
-        endColIndex: s,
-        startRowIndex: o,
-        endRowIndex: o,
-        dataItems: this.getLeafDataItems(),
-        altKey: !1,
-        ctrlKey: !1,
-        shiftKey: !1,
-        metaKey: !1,
-        mode: l,
-        cell: i,
-        isDrag: !1,
-        componentId: this._treeListId,
-        selectedField: this.props.selectedField || ""
-      };
-      this.props.onSelectionChange.call(void 0, d);
-    }
-  }
-  raiseDataEvent(h, e, t) {
-    const o = this.props.onDataStateChange;
-    if (h)
-      h.call(void 0, { ...this.getArguments(t), ...e });
-    else if (o) {
-      const s = {
-        ...this.getArguments(t),
-        dataState: { ...this.getDataState(), ...e }
-      };
-      o.call(void 0, s);
-    }
-  }
-  getDataState() {
-    return {
-      filter: this.props.filter,
-      sort: this.props.sort
-    };
-  }
-  getArguments(h) {
-    return {
-      nativeEvent: h && h.nativeEvent,
-      syntheticEvent: h,
-      target: this
-    };
-  }
-};
-M.propTypes = {
-  data: n.array,
-  resizable: n.bool,
-  reorderable: n.bool,
-  sortable: n.oneOfType([
-    n.bool,
-    n.shape({
-      mode: n.oneOf(["single", "multiple"]),
-      allowUnsort: n.bool
+      qe,
+      /* @__PURE__ */ t.createElement(
+        "tbody",
+        {
+          className: "k-table-tbody",
+          ...it,
+          role: "presentation"
+        },
+        Je
+      )
+    )),
+    X && /* @__PURE__ */ t.createElement(
+      X,
+      {
+        className: "k-grid-pager",
+        total: ne,
+        skip: G,
+        take: J,
+        onPageChange: Ve
+      }
+    ),
+    V && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(ut, { ref: R.current.refDropElementClue }), /* @__PURE__ */ t.createElement(dt, { ref: R.current.refDragElementClue })),
+    Le && /* @__PURE__ */ t.createElement(at, { message: Pe })
+  ));
+});
+gt.propTypes = {
+  data: c.array,
+  resizable: c.bool,
+  reorderable: c.bool,
+  sortable: c.oneOfType([
+    c.bool,
+    c.shape({
+      mode: c.oneOf(["single", "multiple"]),
+      allowUnsort: c.bool
     })
   ]),
-  onSortChange: n.func,
-  sort: n.array,
-  columns: n.arrayOf(n.object),
-  columnVirtualization: n.bool,
-  filter: n.array,
-  onFilterChange: n.func,
-  filterRow: n.any,
-  toolbar: n.any,
-  noRecords: n.any,
-  onExpandChange: n.func,
-  expandField: n.string,
-  subItemsField: n.string,
-  selectedField: n.string,
-  onSelectionChange: n.func,
-  onHeaderSelectionChange: n.func,
-  onRowClick: n.func,
-  onItemChange: n.func,
-  editField: n.string,
-  scrollable: n.oneOf(["none", "scrollable", "virtual"]),
-  rowHeight: n.number,
-  style: n.object,
-  tableProps: n.object,
-  pager: n.any,
-  skip: n.number,
-  take: n.number,
-  onPageChange: n.func,
-  onDataStateChange: n.func,
-  onColumnResize: n.func,
-  onColumnReorder: n.func,
-  dataItemKey: n.string,
-  navigatable: n.bool
-}, M.contextType = P;
-let U = M;
+  onSortChange: c.func,
+  sort: c.array,
+  columns: c.arrayOf(c.object),
+  columnVirtualization: c.bool,
+  filter: c.array,
+  onFilterChange: c.func,
+  filterRow: c.any,
+  toolbar: c.any,
+  noRecords: c.any,
+  onExpandChange: c.func,
+  expandField: c.string,
+  subItemsField: c.string,
+  selectedField: c.string,
+  onSelectionChange: c.func,
+  onHeaderSelectionChange: c.func,
+  onRowClick: c.func,
+  onItemChange: c.func,
+  editField: c.string,
+  scrollable: c.oneOf(["none", "scrollable", "virtual"]),
+  rowHeight: c.number,
+  style: c.object,
+  tableProps: c.object,
+  pager: c.any,
+  skip: c.number,
+  take: c.number,
+  onPageChange: c.func,
+  onDataStateChange: c.func,
+  onColumnResize: c.func,
+  onColumnReorder: c.func,
+  dataItemKey: c.string,
+  navigatable: c.bool
+};
+gt.displayName = "KendoReactTreeList";
 export {
-  U as TreeList
+  gt as TreeList
 };