@progress/kendo-react-treelist 6.1.1 → 7.0.0-develop.10

package/index.mjs

@@ -0,0 +1,1181 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+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) {
+  return e !== void 0 && (typeof e == "number" || /px$/i.test(String(e)));
+}
+function Ct(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);
+  });
+  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 { 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],
+    offsetTop: 0,
+    height: g[0].offsetTop,
+    levelCount: 0
+  }), d < r.length - 1 && g.push({
+    dataItem: {},
+    level: [W, W],
+    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);
+  let S = "";
+  const w = l.useCallback(
+    (E) => {
+      E.isDefaultPrevented() || E.keyCode === Fe.enter && e.expandable && (E.preventDefault(), e.onExpandChange(E, n, t));
+    },
+    [e.expandable, n, t]
+  );
+  g != null && (S = o ? m.format(o, g) : g.toString());
+  const v = [];
+  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(
+      /* @__PURE__ */ l.createElement(
+        ne,
+        {
+          className: "k-treelist-toggle",
+          name: a ? "caret-alt-down" : "caret-alt-right",
+          icon: a ? ct : dt,
+          key: "expand-collapse",
+          onClick: (f) => e.onExpandChange(f.syntheticEvent || f, n, t),
+          [bt]: !0
+        }
+      )
+    ) : v.push(E(v.length));
+  }
+  const O = /* @__PURE__ */ l.createElement(
+    "td",
+    {
+      style: e.style,
+      className: I(
+        "k-table-td",
+        e.className,
+        {
+          ["k-text-nowrap"]: e.expandable,
+          ["k-selected"]: d
+        }
+      ),
+      colSpan: e.colSpan,
+      "aria-colindex": s,
+      "aria-expanded": r ? a : void 0,
+      "aria-selected": d,
+      role: "gridcell",
+      onKeyDown: w,
+      [L]: e.colIndex,
+      ...p
+    },
+    v,
+    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",
+  [re]: "Is empty",
+  [ie]: "Is not empty",
+  [se]: "Starts with",
+  [ce]: "Contains",
+  [de]: "Does not contain",
+  [he]: "Ends with",
+  [ge]: "Is greater than or equal to",
+  [ue]: "Is greater than",
+  [me]: "Is less than or equal to",
+  [fe]: "Is less than",
+  [pe]: "Is true",
+  [Ce]: "Is false",
+  [ve]: "(All)",
+  [xe]: "Is after or equal to",
+  [be]: "Is after",
+  [Ee]: "Is before",
+  [Ie]: "Is before or equal to",
+  [G]: "No records available"
+};
+class Se extends l.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return this.props.children || it(this).toLanguageString(G, $[G]);
+  }
+}
+st(Se);
+const Y = 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",
+    {
+      "k-selected": t,
+      "k-alt": n
+    }
+  ), p = l.useMemo(
+    () => a !== void 0 ? { height: a + "px" } : void 0,
+    [a]
+  ), S = /* @__PURE__ */ l.createElement(
+    "tr",
+    {
+      onClick: e.onClick,
+      onDoubleClick: e.onDoubleClick,
+      onContextMenu: e.onContextMenu,
+      className: m,
+      style: p,
+      ref: r,
+      "aria-expanded": o,
+      role: "row",
+      "aria-rowindex": i,
+      "aria-level": s.length,
+      "aria-posinset": g,
+      "aria-setsize": d,
+      [xt]: 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 = {
+  name: "@progress/kendo-react-treelist",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1701439462,
+  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) => {
+      if (!this.element)
+        return;
+      const { rowIndex: a = 0 } = t, { scrollable: n, rowHeight: o = 0 } = this.props;
+      if (n === "virtual" || o)
+        this.element.scroll(0, (a - 1) * o);
+      else {
+        const i = this.element.querySelector(`tbody > tr:nth-child(${a})`);
+        if (i) {
+          const s = i.offsetTop - this.tbodyOffsetTop;
+          this.element.scroll(0, s);
+        }
+      }
+    }, this.getExtendedColumn = Q(
+      (t, a) => Ke(t, { prevId: 0, idPrefix: a })
+    ), this.getColumnsMap = Q(
+      (t) => _e(t)
+    ), this.onKeyDown = (t) => {
+      if (T.onKeyDown(t, {
+        contextStateRef: this.contextStateRef,
+        navigationStateRef: this.navigationStateRef
+      }), this.props.onKeyDown) {
+        const { mode: a, cell: n } = ee(this.props.selectable), o = {
+          dataItems: this.getLeafDataItems(),
+          mode: a,
+          cell: n,
+          componentId: this._treeListId,
+          selectedField: this.props.selectedField,
+          ...this.getArguments(t)
+        };
+        this.props.onKeyDown.call(void 0, o);
+      }
+    }, this.onFocus = (t) => {
+      T.onFocus(t, {
+        contextStateRef: this.contextStateRef
+      });
+    }, this.onRowDrag = (t) => {
+      this.props.onRowDrag && this.props.onRowDrag.call(void 0, { ...t, target: this });
+    }, this.onRowDrop = (t) => {
+      this.props.onRowDrop && this.props.onRowDrop.call(void 0, { ...t, target: this });
+    }, this.columnReorder = (t, a, n) => {
+      const o = this.extendedColumn[t].depth, i = (d) => {
+        do
+          d++;
+        while (d < this.extendedColumn.length && this.extendedColumn[d].depth > o);
+        return d;
+      }, s = this.extendedColumn.splice(t, i(t) - t);
+      if (this.extendedColumn.splice(t < a ? i(a - s.length) : a, 0, ...s), this.extendedColumn.filter((d) => d.declarationIndex >= 0).forEach((d, g) => d.orderIndex = g), this.props.onColumnReorder) {
+        const d = {
+          target: this,
+          columns: this.columns,
+          nativeEvent: n
+        };
+        this.props.onColumnReorder.call(void 0, d);
+      }
+    }, this.onResize = (t, a, n, o, i) => {
+      if (this.props.onColumnResize) {
+        const s = this.extendedColumn.filter((g) => g.children.length === 0).reduce((g, m) => g += parseFloat(String(m.width)), 0), d = {
+          columns: this.columns,
+          totalWidth: s,
+          index: t,
+          nativeEvent: o,
+          newWidth: a,
+          oldWidth: n,
+          end: i,
+          target: this
+        };
+        this.props.onColumnResize.call(void 0, d);
+      }
+    }, this.handleOnScroll = (t) => {
+      const a = t.currentTarget.scrollLeft, n = t.currentTarget.scrollTop, { columnVirtualization: o, scrollable: i, rowHeight: s = 0 } = this.props, d = s, g = 0;
+      let m = !1;
+      o && Math.abs(this.wrapperScrollLeft - a) > g && (this.wrapperScrollLeft = a, m = !0), i === "virtual" && Math.abs(this.wrapperScrollTop - n) > d && (this.wrapperScrollTop = n, m = !0), m && (this.updateOnScroll = !0, this.forceUpdate());
+    }, this.calculateSizes = (t) => {
+      if (!t || this.props.scrollable === "none")
+        return;
+      const a = Array.from(t.childNodes), n = a.find((s) => s.nodeName === "TABLE"), o = this.props.toolbar && a.find((s) => s.nodeType === 1 && s.classList.contains("k-grid-toolbar"));
+      let i = 0;
+      if (o) {
+        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.itemChange = (t) => {
+      const a = this.props.onItemChange;
+      if (t.field === this.props.expandField) {
+        const n = this.props.onExpandChange;
+        if (n) {
+          const o = {
+            ...this.getArguments(t.syntheticEvent),
+            dataItem: t.dataItem,
+            level: t.level,
+            value: t.value
+          };
+          n.call(void 0, o);
+        }
+        return;
+      }
+      if (a) {
+        const n = {
+          ...this.getArguments(t.syntheticEvent),
+          dataItem: t.dataItem,
+          level: t.level,
+          field: t.field,
+          value: t.value
+        };
+        a.call(void 0, n);
+      }
+    }, this.onHeaderSelectionChange = (t) => {
+      if (this.props.onHeaderSelectionChange) {
+        const a = {
+          field: t.field,
+          nativeEvent: t.syntheticEvent && t.syntheticEvent.nativeEvent,
+          syntheticEvent: t.syntheticEvent,
+          target: this,
+          dataItems: this.getLeafDataItems()
+        };
+        this.props.onHeaderSelectionChange.call(void 0, a);
+      }
+    }, this.selectionRelease = (t) => {
+      if (this.props.onSelectionChange) {
+        const a = {
+          syntheticEvent: void 0,
+          target: this,
+          selectedField: this.props.selectedField || "",
+          componentId: this._treeListId,
+          dataItems: this.getLeafDataItems(),
+          dataItem: null,
+          level: [],
+          ...t
+        };
+        this.props.onSelectionChange.call(void 0, a);
+      }
+    }, this.sortChange = (t, a, n) => {
+      this.raiseDataEvent(this.props.onSortChange, { sort: a, field: n }, t);
+    }, this.headerFilterChange = (t, a, n) => {
+      this.raiseDataEvent(this.props.onFilterChange, { filter: a, field: n }, t);
+    }, this.filterChange = (t) => {
+      const { filter: a, field: n } = t;
+      this.raiseDataEvent(this.props.onFilterChange, { filter: a, field: n }, t.syntheticEvent);
+    }, this.columnMenuFilterChange = (t, a, n) => {
+      const { onColumnMenuFilterChange: o } = this.props;
+      if (!o)
+        return;
+      const i = {
+        syntheticEvent: t,
+        filter: a,
+        field: n,
+        target: this,
+        nativeEvent: t.nativeEvent
+      };
+      o.call(void 0, i);
+    }, this.expandChange = (t, a, n) => {
+      const { expandField: o, onExpandChange: i } = this.props;
+      if (o && i) {
+        const s = {
+          ...this.getArguments(t),
+          dataItem: a,
+          level: n,
+          value: this.expanded(a)
+        };
+        i.call(void 0, s);
+      }
+    }, this.rowClick = (t, a) => {
+      if (this.props.onRowClick && t.target.nodeName === "TD") {
+        const n = {
+          dataItem: a.dataItem,
+          level: a.level,
+          ...this.getArguments(t)
+        };
+        this.props.onRowClick.call(void 0, n);
+      }
+    }, this.rowDoubleClick = (t, a) => {
+      if (this.props.onRowDoubleClick && t.target.nodeName === "TD") {
+        const n = {
+          dataItem: a.dataItem,
+          level: a.level,
+          ...this.getArguments(t)
+        };
+        this.props.onRowDoubleClick.call(void 0, n);
+      }
+    }, this.rowContextMenu = (t, a) => {
+      if (this.props.onRowContextMenu && t.target.nodeName === "TD") {
+        const n = {
+          dataItem: a.dataItem,
+          level: a.level,
+          ...this.getArguments(t)
+        };
+        this.props.onRowContextMenu.call(void 0, n);
+      }
+    }, this.onPageChange = (t) => {
+      if (this.props.onPageChange) {
+        const a = {
+          ...this.getArguments(t.syntheticEvent),
+          skip: t.skip,
+          take: t.take
+        };
+        this.props.onPageChange.call(void 0, a);
+      }
+    }, 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({
+      navigatable: !!r.navigatable,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    });
+  }
+  get document() {
+    if (j)
+      return this.element && this.element.ownerDocument || document;
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.calculateSizes(this.element), T.onComponentDidMount({
+      scope: this.element || void 0,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    });
+  }
+  /**
+   * @hidden
+   */
+  getSnapshotBeforeUpdate() {
+    return T.onGetSnapshotBeforeUpdate({
+      document: this.document,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    }), null;
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(r) {
+    r.columns !== this.props.columns && this.calculateSizes(this.element), T.onComponentDidUpdate({
+      scope: this.element || void 0,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    });
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    this.columnsMap = [], this.prevData = [], this.flattedData = [], this.updateOnScroll = !1, this.getExtendedColumn.clear(), this.getColumnsMap.clear();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      columns: r = [],
+      filterRow: t,
+      scrollable: a = "scrollable",
+      resizable: n = !1,
+      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.extendedColumn = this.getExtendedColumn(r, m), this.columnsMap = this.getColumnsMap(this.extendedColumn);
+    const p = 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,
+      {
+        headerRow: /* @__PURE__ */ l.createElement(
+          We,
+          {
+            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
+          }
+        ),
+        filterRow: d && /* @__PURE__ */ l.createElement(
+          g,
+          {
+            columns: p,
+            filter: this.props.filter,
+            filterChange: this.filterChange,
+            sort: this.props.sort,
+            ariaRowIndex: this.columnsMap.length + 1
+          }
+        ) || void 0,
+        columnResize: this.columnResize
+      }
+    ), w = this.props.style || {}, { colSpans: v, hiddenColumns: O } = Xe({
+      enabled: this.props.columnVirtualization,
+      columns: p,
+      scrollLeft: this.wrapperScrollLeft,
+      tableViewPortWidth: parseFloat((w.width || "").toString())
+    }), E = (h, x, A, M, P, N) => p.map((u, b) => {
+      if (O[b])
+        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],
+        dataItem: h.dataItem,
+        field: u.field,
+        format: u.format,
+        className: U || void 0,
+        render: this.props.cellRender,
+        onChange: this.itemChange,
+        selectionChange: this.props.onSelectionChange ? (R) => {
+          this.selectionChange({ event: R, item: h, columnIndex: b, dataIndex: P });
+        } : void 0,
+        level: h.level,
+        expandable: u.expandable,
+        expanded: M,
+        hasChildren: this.hasChildren(h.dataItem),
+        onExpandChange: this.expandChange,
+        colIndex: b,
+        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
+      };
+      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 });
+    });
+    let f = this.flatData;
+    const F = f.length;
+    i !== void 0 && s !== void 0 && (f = f.slice(i, i + s)), a === "virtual" && (f = vt({
+      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 = {
+        key: P,
+        level: h.level,
+        levels: ye,
+        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,
+        expanded: N,
+        rowIndex: x,
+        ariaRowIndex: De + x,
+        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) => {
+      this.columnResize.colGroupMain = h;
+    } }, p.map(
+      (h, x) => /* @__PURE__ */ l.createElement(
+        "col",
+        {
+          key: x.toString(),
+          className: ke(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 || {};
+    return /* @__PURE__ */ l.createElement(oe.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        style: this.props.style,
+        className: I(
+          "k-grid k-grid-md",
+          this.props.className,
+          { "k-treelist-scrollable": a !== "none" }
+        ),
+        ref: (h) => this.element = h,
+        onScroll: Le ? this.handleOnScroll : void 0,
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        "aria-rowcount": F,
+        "aria-colcount": p.length,
+        role: "treegrid",
+        ...Ge
+      },
+      this.props.toolbar,
+      /* @__PURE__ */ l.createElement(
+        $e,
+        {
+          selectable: this.props.selectable,
+          onRelease: this.selectionRelease
+        },
+        /* @__PURE__ */ l.createElement(
+          "table",
+          {
+            className: "k-table k-table-md k-grid-table",
+            ...J,
+            style: { ...J.style || {}, userSelect: Oe },
+            role: "presentation"
+          },
+          Ne,
+          S,
+          /* @__PURE__ */ l.createElement("tbody", { className: "k-table-tbody", ...je, role: "presentation" }, Te)
+        )
+      ),
+      this.props.pager && /* @__PURE__ */ l.createElement(
+        this.props.pager,
+        {
+          className: "k-grid-pager",
+          total: F,
+          skip: i,
+          take: s,
+          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 }))
+    ));
+  }
+  get columns() {
+    const r = this.extendedColumn.filter((a) => a.declarationIndex >= 0 && a.parentIndex === -1), t = (a) => (a.sort((n, o) => n.declarationIndex - o.declarationIndex), a.map((n) => {
+      const {
+        declarationIndex: o,
+        parentIndex: i,
+        depth: s,
+        colSpan: d,
+        rowSpan: g,
+        index: m,
+        kFirst: p,
+        groupable: S,
+        children: w,
+        ...v
+      } = n;
+      return w.length ? {
+        children: t(w),
+        ...v
+      } : v;
+    }));
+    return t(r);
+  }
+  get flatData() {
+    const { data: r = [], rowHeight: t = 0 } = this.props;
+    let a = 0;
+    const n = (i) => {
+      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);
+    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 = {
+        ...this.getArguments(t.syntheticEvent),
+        dataItem: a.dataItem,
+        level: a.level,
+        startColIndex: o,
+        endColIndex: o,
+        startRowIndex: n,
+        endRowIndex: n,
+        dataItems: this.getLeafDataItems(),
+        altKey: !1,
+        ctrlKey: !1,
+        shiftKey: !1,
+        metaKey: !1,
+        mode: i,
+        cell: s,
+        isDrag: !1,
+        componentId: this._treeListId,
+        selectedField: this.props.selectedField || ""
+      };
+      this.props.onSelectionChange.call(void 0, d);
+    }
+  }
+  raiseDataEvent(r, t, a) {
+    const n = this.props.onDataStateChange;
+    if (r)
+      r.call(void 0, { ...this.getArguments(a), ...t });
+    else if (n) {
+      const o = {
+        ...this.getArguments(a),
+        dataState: { ...this.getDataState(), ...t }
+      };
+      n.call(void 0, o);
+    }
+  }
+  getDataState() {
+    return {
+      filter: this.props.filter,
+      sort: this.props.sort
+    };
+  }
+  getArguments(r) {
+    return {
+      nativeEvent: r && r.nativeEvent,
+      syntheticEvent: r,
+      target: this
+    };
+  }
+}
+we.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: 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
+};
+we.contextType = oe;
+const Kt = (e) => /* @__PURE__ */ l.createElement(et, { ...e }), It = (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(
+    "td",
+    {
+      style: e.style,
+      className: I(
+        "k-table-td",
+        e.className
+      ),
+      "aria-colindex": e.ariaColumnIndex,
+      role: "gridcell",
+      ...n
+    },
+    /* @__PURE__ */ l.createElement(
+      "input",
+      {
+        checked: typeof a == "boolean" && a,
+        id: t,
+        type: "checkbox",
+        className: "k-checkbox k-checkbox-md k-rounded-md",
+        onChange: r
+      }
+    ),
+    /* @__PURE__ */ l.createElement("label", { className: "k-checkbox-label", htmlFor: t })
+  );
+  return e.render ? e.render.call(void 0, o, e) : o;
+};
+It.displayName = "KendoReactTreeListSelectionCell";
+class _t extends l.Component {
+  constructor() {
+    super(...arguments), this._inputId = z();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ l.createElement(tt, { inputId: this._inputId, ...this.props });
+  }
+}
+const St = (e) => e.visible && j ? ut.createPortal(
+  /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      className: "k-header k-drag-clue",
+      style: {
+        display: "block",
+        position: "absolute",
+        zIndex: 2e4,
+        padding: "8px 12px",
+        top: e.top + "px",
+        left: e.left + "px"
+      }
+    },
+    /* @__PURE__ */ l.createElement(
+      ne,
+      {
+        className: I(
+          "k-drag-status"
+        ),
+        name: e.allowDrop ? "plus" : "cancel",
+        icon: e.allowDrop ? ht : gt
+      }
+    ),
+    e.text
+  ),
+  document.body
+) : null;
+function wt(e, r, t) {
+  if (!e.originalEvent)
+    return -1;
+  let a = Re(e, "tr", t);
+  if (a) {
+    const n = r ? r.childNodes : [];
+    for (let o = 0; o < n.length; o++)
+      if (n[o] === a)
+        return o;
+  }
+  return -1;
+}
+function Re(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 = {
+  visible: !1,
+  top: 0,
+  left: 0,
+  text: "",
+  allowDrop: !1
+};
+class qt extends l.Component {
+  constructor() {
+    super(...arguments), this.state = {
+      clueProps: { ...ae }
+    }, this.draggable = l.createRef(), this.dragged = null, this.draggedOver = null, this.onPress = () => this.dragged = this.props.level, this.onDrag = (r) => {
+      if (!j)
+        return;
+      const t = this.draggable.current && this.draggable.current.element, a = t ? t.ownerDocument : document;
+      if (!a)
+        return;
+      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)];
+        this.draggedOver = i;
+        const s = i ? !o.every((d, g) => d === i[g]) : !!Re(n, Rt, a);
+        this.setState({
+          clueProps: {
+            visible: !0,
+            top: n.pageY + 10,
+            left: n.pageX,
+            text: t.innerText,
+            allowDrop: s
+          }
+        }), this.props.onDrag && this.props.onDrag.call(void 0, {
+          nativeEvent: n.originalEvent,
+          dragged: o,
+          draggedOver: i,
+          draggedItem: this.props.dataItem
+        });
+      }
+    }, this.onRelease = (r) => {
+      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 } });
+        const i = this.props.dataItem;
+        o && this.props.onDrop && this.props.onDrop.call(void 0, {
+          nativeEvent: t.originalEvent,
+          dragged: a,
+          draggedOver: n,
+          draggedItem: i
+        });
+      }
+    };
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { clueProps: r } = this.state;
+    return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+      Pe,
+      {
+        ref: this.draggable,
+        onPress: this.onPress,
+        onDrag: this.onDrag,
+        onRelease: this.onRelease
+      },
+      /* @__PURE__ */ l.createElement(Y, { ...this.props })
+    ), /* @__PURE__ */ l.createElement(St, { ...r }));
+  }
+}
+class Vt extends l.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: "k-toolbar k-grid-toolbar"
+      },
+      this.props.children
+    );
+  }
+}
+const yt = [
+  { text: ce, operator: "contains" },
+  { text: de, operator: "doesnotcontain" },
+  { text: B, operator: "eq" },
+  { text: K, operator: "neq" },
+  { text: se, operator: "startswith" },
+  { text: he, operator: "endswith" },
+  { text: _, operator: "isnull" },
+  { text: q, operator: "isnotnull" },
+  { text: re, operator: "isempty" },
+  { text: ie, operator: "isnotempty" }
+], Dt = [
+  { text: B, operator: "eq" },
+  { text: K, 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" }
+], Tt = [
+  { text: B, operator: "eq" },
+  { text: K, 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: ve, operator: "" },
+  { text: pe, operator: !0 },
+  { text: Ce, operator: !1 }
+];
+function V(e, r) {
+  return {
+    clearButtonTitle: e.toLanguageString(X, $[X]),
+    operators: r.map((t) => ({
+      text: e.toLanguageString(t.text, $[t.text]),
+      operator: t.operator
+    }))
+  };
+}
+const Ut = function(e) {
+  const { operators: r, ...t } = e;
+  return /* @__PURE__ */ l.createElement(
+    at,
+    {
+      ariaLabel: "text filter",
+      ...V(H(), r || yt),
+      ...t
+    }
+  );
+}, Wt = function(e) {
+  const { operators: r, ...t } = e;
+  return /* @__PURE__ */ l.createElement(
+    nt,
+    {
+      ariaLabel: "numeric filter",
+      ...V(H(), r || Dt),
+      ...t
+    }
+  );
+}, Xt = function(e) {
+  const { operators: r, ...t } = e;
+  return /* @__PURE__ */ l.createElement(
+    ot,
+    {
+      ariaLabel: "date filter",
+      ...V(H(), r || Tt),
+      ...t
+    }
+  );
+}, Gt = function(e) {
+  const { operators: r, ...t } = e;
+  return /* @__PURE__ */ l.createElement(
+    lt,
+    {
+      ariaLabel: "boolean filter",
+      ...V(H(), r || kt),
+      ...t
+    }
+  );
+}, Nt = (e) => {
+  const r = l.useCallback(
+    (o) => {
+      e.onChange && e.onChange({
+        dataItem: e.dataItem,
+        level: e.level,
+        field: e.field,
+        syntheticEvent: o,
+        value: o.target.value
+      });
+    },
+    [e.onChange, e.dataItem, e.level, e.field]
+  ), t = k(e.id), a = I({
+    ["k-selected"]: e.isSelected
+  }, e.className), n = /* @__PURE__ */ l.createElement(
+    "td",
+    {
+      style: e.style,
+      className: a,
+      "aria-colindex": e.ariaColumnIndex,
+      "aria-selected": e.isSelected,
+      role: "gridcell",
+      ...t,
+      [L]: e.colIndex
+    },
+    /* @__PURE__ */ l.createElement(
+      "input",
+      {
+        style: { width: "100%" },
+        className: "k-input",
+        value: C(e.field, e.dataItem) || "",
+        onChange: r
+      }
+    )
+  );
+  return e.render ? e.render.call(void 0, n, e) : n;
+};
+Nt.displayName = "KendoReactTreeListTextEditor";
+const Lt = (e) => {
+  const r = l.useCallback(
+    (i) => {
+      e.onChange && e.onChange({
+        dataItem: e.dataItem,
+        level: e.level,
+        field: e.field,
+        syntheticEvent: i.syntheticEvent,
+        value: i.value
+      });
+    },
+    [e.onChange, e.dataItem, e.level, e.field]
+  ), t = C(e.field, e.dataItem), a = k(e.id), n = I({
+    ["k-selected"]: e.isSelected
+  }, e.className), o = /* @__PURE__ */ l.createElement(
+    "td",
+    {
+      style: e.style,
+      className: n,
+      "aria-colindex": e.ariaColumnIndex,
+      "aria-selected": e.isSelected,
+      role: "gridcell",
+      ...a,
+      [L]: e.colIndex
+    },
+    /* @__PURE__ */ l.createElement(
+      mt,
+      {
+        width: "100%",
+        value: t === void 0 ? null : t,
+        onChange: r
+      }
+    )
+  );
+  return e.render ? e.render.call(void 0, o, e) : o;
+};
+Lt.displayName = "KendoReactTreeListNumericEditor";
+const Ot = (e) => {
+  const r = l.useCallback(
+    (i) => {
+      e.onChange && e.onChange({
+        dataItem: e.dataItem,
+        level: e.level,
+        field: e.field,
+        syntheticEvent: i,
+        value: i.target.checked
+      });
+    },
+    [e.onChange, e.dataItem, e.level, e.field]
+  ), t = l.useMemo(() => z(), []), a = k(e.id), n = I({
+    ["k-selected"]: e.isSelected
+  }, e.className), o = /* @__PURE__ */ l.createElement(
+    "td",
+    {
+      style: e.style,
+      className: n,
+      "aria-colindex": e.ariaColumnIndex,
+      "aria-selected": e.isSelected,
+      role: "gridcell",
+      ...a,
+      [L]: e.colIndex
+    },
+    /* @__PURE__ */ l.createElement(
+      "input",
+      {
+        checked: C(e.field, e.dataItem) || !1,
+        id: t,
+        type: "checkbox",
+        className: "k-checkbox k-checkbox-md k-rounded-md",
+        onChange: r
+      }
+    ),
+    /* @__PURE__ */ l.createElement("label", { className: "k-checkbox-label", htmlFor: t })
+  );
+  return e.render ? e.render.call(void 0, o, e) : o;
+};
+Ot.displayName = "KendoReactTreeListBooleanEditor";
+const Ft = (e) => {
+  const r = l.useCallback(
+    (o) => {
+      e.onChange && e.onChange({
+        dataItem: e.dataItem,
+        level: e.level,
+        field: e.field,
+        syntheticEvent: o.syntheticEvent,
+        value: o.value
+      });
+    },
+    [e.onChange, e.dataItem, e.level, e.field]
+  ), t = k(e.id), a = I({
+    ["k-selected"]: e.isSelected
+  }, e.className);
+  let n = /* @__PURE__ */ l.createElement(
+    "td",
+    {
+      style: e.style,
+      className: a,
+      "aria-colindex": e.ariaColumnIndex,
+      "aria-selected": e.isSelected,
+      role: "gridcell",
+      ...t,
+      [L]: e.colIndex
+    },
+    /* @__PURE__ */ l.createElement(
+      ft,
+      {
+        width: "100%",
+        value: C(e.field, e.dataItem),
+        onChange: r
+      }
+    )
+  );
+  return e.render ? e.render.call(void 0, n, e) : n;
+};
+Ft.displayName = "KendoReactTreeListDateEditor";
+export {
+  L as TREELIST_COL_INDEX_ATTRIBUTE,
+  bt as TREELIST_PREVENT_SELECTION_ELEMENT,
+  xt as TREELIST_ROW_INDEX_ATTRIBUTE,
+  we as TreeList,
+  Ot as TreeListBooleanEditor,
+  Gt as TreeListBooleanFilter,
+  le as TreeListCell,
+  Ft as TreeListDateEditor,
+  Xt as TreeListDateFilter,
+  qt as TreeListDraggableRow,
+  Kt as TreeListHeaderCell,
+  _t 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
+};