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

package/TreeList.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),n=require("prop-types"),g=require("@progress/kendo-react-common"),h=require("@progress/kendo-react-data-tools"),O=require("./utils/index.js"),$=require("./cells/TreeListCell.js"),G=require("./TreeListNoRecords.js"),J=require("./rows/TreeListRow.js"),Q=require("./package-metadata.js");function X(x){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const e in x)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(x,e);Object.defineProperty(l,e,t.get?t:{enumerable:!0,get:()=>x[e]})}}return l.default=x,Object.freeze(l)}const d=X(W),T=class T extends d.Component{constructor(l){super(l),this.wrapperScrollLeft=0,this.wrapperScrollTop=0,this.updateOnScroll=!1,this.tbodyOffsetTop=0,this.prevData=[],this.flattedData=[],this.extendedColumn=[],this.columnsMap=[],this.element=null,this.contextStateRef={current:void 0},this.navigationStateRef={current:void 0},this.scrollIntoView=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 r=this.element.querySelector(`tbody > tr:nth-child(${t})`);if(r){const i=r.offsetTop-this.tbodyOffsetTop;this.element.scroll(0,i)}}},this.getExtendedColumn=g.memoizeOne((e,t)=>h.readColumns(e,{prevId:0,idPrefix:t})),this.getColumnsMap=g.memoizeOne(e=>h.mapColumns(e)),this.onKeyDown=e=>{if(h.tableKeyboardNavigation.onKeyDown(e,{contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:o}=h.getSelectionOptions(this.props.selectable),s={dataItems:this.getLeafDataItems(),mode:t,cell:o,componentId:this._treeListId,selectedField:this.props.selectedField,...this.getArguments(e)};this.props.onKeyDown.call(void 0,s)}},this.onFocus=e=>{h.tableKeyboardNavigation.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,r=p=>{do p++;while(p<this.extendedColumn.length&&this.extendedColumn[p].depth>s);return p},i=this.extendedColumn.splice(e,r(e)-e);if(this.extendedColumn.splice(e<t?r(t-i.length):t,0,...i),this.extendedColumn.filter(p=>p.declarationIndex>=0).forEach((p,m)=>p.orderIndex=m),this.props.onColumnReorder){const p={target:this,columns:this.columns,nativeEvent:o};this.props.onColumnReorder.call(void 0,p)}},this.onResize=(e,t,o,s,r)=>{if(this.props.onColumnResize){const i=this.extendedColumn.filter(m=>m.children.length===0).reduce((m,C)=>m+=parseFloat(String(C.width)),0),p={columns:this.columns,totalWidth:i,index:e,nativeEvent:s,newWidth:t,oldWidth:o,end:r,target:this};this.props.onColumnResize.call(void 0,p)}},this.handleOnScroll=e=>{const t=e.currentTarget.scrollLeft,o=e.currentTarget.scrollTop,{columnVirtualization:s,scrollable:r,rowHeight:i=0}=this.props,p=i,m=0;let C=!1;s&&Math.abs(this.wrapperScrollLeft-t)>m&&(this.wrapperScrollLeft=t,C=!0),r==="virtual"&&Math.abs(this.wrapperScrollTop-o)>p&&(this.wrapperScrollTop=o,C=!0),C&&(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"));let r=0;if(s){const i=s.style.boxSizing;s.style.boxSizing="border-box",r=parseFloat(String(window.getComputedStyle(s).height))||s.offsetHeight,s.style.boxSizing=i,s.getAttribute("style")||s.removeAttribute("style")}this.tbodyOffsetTop=o.tBodies[0].offsetTop,O.setHeaderRowsTop(o,r)},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)}return}if(t){const o={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};t.call(void 0,o)}},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()};this.props.onHeaderSelectionChange.call(void 0,t)}},this.selectionRelease=e=>{if(this.props.onSelectionChange){const t={syntheticEvent:void 0,target:this,selectedField:this.props.selectedField||"",componentId:this._treeListId,dataItems:this.getLeafDataItems(),dataItem:null,level:[],...e};this.props.onSelectionChange.call(void 0,t)}},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)return;const r={syntheticEvent:e,filter:t,field:o,target:this,nativeEvent:e.nativeEvent};s.call(void 0,r)},this.expandChange=(e,t,o)=>{const{expandField:s,onExpandChange:r}=this.props;if(s&&r){const i={...this.getArguments(e),dataItem:t,level:o,value:this.expanded(t)};r.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),skip:e.skip,take:e.take};this.props.onPageChange.call(void 0,t)}},this.expandedSubItems=e=>{const t=[];return this.expanded(e)&&this.hasChildren(e)&&t.push(...g.getNestedValue(this.props.subItemsField,e)),t},this.getLeafDataItems=()=>this.flatData.map(e=>e.dataItem),this.expanded=e=>!!g.getNestedValue(this.props.expandField,e),this.hasChildren=e=>!!g.getNestedValue(this.props.subItemsField,e),g.validatePackage(Q.packageMetadata),this.dragLogic=new h.CommonDragLogic(this.columnReorder,g.noop,g.noop),this.columnResize=new h.ColumnResize(this.onResize.bind(this)),h.tableKeyboardNavigation.onConstructor({navigatable:!!l.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}get _treeListId(){return this.props.id+"-treelist"}get document(){if(g.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),h.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return h.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(l){l.columns!==this.props.columns&&this.calculateSizes(this.element),h.tableKeyboardNavigation.onComponentDidUpdate({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}componentWillUnmount(){this.columnsMap=[],this.prevData=[],this.flattedData=[],this.updateOnScroll=!1,this.getExtendedColumn.clear(),this.getColumnsMap.clear()}render(){const{columns:l=[],filterRow:e,scrollable:t="scrollable",resizable:o=!1,reorderable:s=!1,skip:r,take:i}=this.props,p=l.some(a=>!!a.filter||!!a.filterCell)||e!==void 0,m=e||h.FilterRow,C=h.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef);this.extendedColumn=this.getExtendedColumn(l,C),this.columnsMap=this.getColumnsMap(this.extendedColumn);const v=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 M=d.createElement(h.Header,{headerRow:d.createElement(h.HeaderRow,{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:p&&d.createElement(m,{columns:v,filter:this.props.filter,filterChange:this.filterChange,sort:this.props.sort,ariaRowIndex:this.columnsMap.length+1})||void 0,columnResize:this.columnResize}),R=this.props.style||{},{colSpans:I,hiddenColumns:H}=h.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:v,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((R.width||"").toString())}),P=(a,f,E,k,F,D)=>v.map((c,u)=>{if(H[u])return null;const w=c.id?c.id:u,N=`${c.className?c.className+" ":""}${c.locked?"k-grid-content-sticky":""}`,y={id:h.tableKeyboardNavigationTools.generateNavigatableId(`${E}-${String(u)}`,C),colSpan:I[u],dataItem:a.dataItem,field:c.field,format:c.format,className:N||void 0,render:this.props.cellRender,onChange:this.itemChange,selectionChange:this.props.onSelectionChange?S=>{this.selectionChange({event:S,item:a,columnIndex:u,dataIndex:F})}:void 0,level:a.level,expandable:c.expandable,expanded:k,hasChildren:this.hasChildren(a.dataItem),onExpandChange:this.expandChange,colIndex:u,ariaColumnIndex:c.ariaColumnIndex,style:c.left!==void 0&&{left:c.left,right:c.right,borderRightWidth:c.rightBorder?"1px":""}||{},isSelected:Array.isArray(D)&&D.indexOf(u)>-1};return f&&c.editCell?d.createElement(c.editCell,{key:w,...y,onChange:this.itemChange}):c.cell?d.createElement(c.cell,{key:w,...y}):d.createElement($.TreeListCell,{key:w,...y})});let b=this.flatData;const L=b.length;r!==void 0&&i!==void 0&&(b=b.slice(r,r+i)),t==="virtual"&&(b=O.tableRowsVirtualization({rows:b,tableViewPortHeight:parseFloat((R.height||R.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const A=b.map(a=>a.level),V=this.columnsMap.length+(p?1:0)+1,B=b.length>0&&b.map((a,f)=>{const E=g.getNestedValue(this.props.editField,a.dataItem),k=this.props.dataItemKey&&g.getter(this.props.dataItemKey)(a.dataItem),F=String(k||a.level.join(".")),D=this.expanded(a.dataItem),c=this.props.selectedField?g.getNestedValue(this.props.selectedField,a.dataItem):void 0,u={key:F,level:a.level,levels:A,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:S=>this.rowClick(S,a),onDoubleClick:S=>this.rowDoubleClick(S,a),onContextMenu:S=>this.rowContextMenu(S,a),isAltRow:f%2!==0,expanded:D,rowIndex:f,ariaRowIndex:V+f,ariaSetSize:a.levelCount,ariaPosInSet:a.level[a.level.length-1]+1,isSelected:typeof c=="boolean"&&c},w=this.props.editRow,N=this.props.row||J.TreeListRow,y=P(a,E,F,D,f,c);return E&&w?d.createElement(w,{...u,key:u.key},y):d.createElement(N,{...u,key:u.key},y)})||d.createElement("tr",{className:"k-table-row k-grid-norecords"},d.createElement("td",{colSpan:v.length},this.props.noRecords||d.createElement(G.TreeListNoRecords,null))),U=a=>this.props.sort&&this.props.sort.some(f=>f.field===a),j=d.createElement("colgroup",{ref:a=>{this.columnResize.colGroupMain=a}},v.map((a,f)=>d.createElement("col",{key:f.toString(),className:U(a.field)?"k-sorted":void 0,style:a.width!==void 0?{width:a.width}:void 0}))),q=this.props.columnVirtualization||this.props.scrollable==="virtual",_=this.props.selectable&&this.props.selectable.drag?"none":void 0,K=this.props.tableProps||{};return d.createElement(h.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},d.createElement("div",{id:this.props.id,style:this.props.style,className:g.classNames("k-grid k-grid-md","k-treelist",this.props.className,{"k-treelist-scrollable":t!=="none"}),ref:a=>this.element=a,onScroll:q?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":L,"aria-colcount":v.length,role:"treegrid",...h.tableKeyboardNavigationScopeAttributes},this.props.toolbar,d.createElement(h.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease},d.createElement("table",{className:"k-table k-table-md k-grid-table",...K,style:{...K.style||{},userSelect:_},role:"presentation"},j,M,d.createElement("tbody",{className:"k-table-tbody",...h.tableKeyboardNavigationBodyAttributes,role:"presentation"},B))),this.props.pager&&d.createElement(this.props.pager,{className:"k-grid-pager",total:L,skip:r,take:i,onPageChange:this.onPageChange}),s&&d.createElement(d.Fragment,null,d.createElement(h.DropClue,{ref:this.dragLogic.refDropElementClue}),d.createElement(h.DragClue,{ref:this.dragLogic.refDragElementClue}))))}get columns(){const l=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:r,depth:i,colSpan:p,rowSpan:m,index:C,kFirst:v,groupable:M,children:R,...I}=o;return R.length?{children:e(R),...I}:I}));return e(l)}get flatData(){const{data:l=[],rowHeight:e=0}=this.props;let t=0;const o=r=>{const i={height:e,offsetTop:t};return t+=i.height,i};let s=this.updateOnScroll&&this.prevData===l&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:h.flatData(l,this.expandedSubItems,o);return this.prevData=l,this.flattedData=s,s}selectionChange(l){if(this.props.onSelectionChange){const{event:e,item:t,dataIndex:o,columnIndex:s}=l,{mode:r,cell:i}=h.getSelectionOptions(this.props.selectable),p={...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:r,cell:i,isDrag:!1,componentId:this._treeListId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,p)}}raiseDataEvent(l,e,t){const o=this.props.onDataStateChange;if(l)l.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(l){return{nativeEvent:l&&l.nativeEvent,syntheticEvent:l,target:this}}};T.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})]),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},T.contextType=h.TableKeyboardNavigationContext;let z=T;exports.TreeList=z;

package/TreeList.mjs

@@ -0,0 +1,580 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as r from "react";
+import n from "prop-types";
+import { memoizeOne as N, getNestedValue as y, validatePackage as J, noop as H, canUseDOM as Q, getter as X, classNames as Y } from "@progress/kendo-react-common";
+import { readColumns as Z, mapColumns as ee, tableKeyboardNavigation as w, getSelectionOptions as A, CommonDragLogic as te, ColumnResize as oe, TableKeyboardNavigationContext as K, tableKeyboardNavigationTools as O, Header as se, HeaderRow as ne, tableColumnsVirtualization as ae, tableKeyboardNavigationScopeAttributes as ie, TableSelection as le, tableKeyboardNavigationBodyAttributes as re, DropClue as he, DragClue as de, flatData as ce, FilterRow as pe } from "@progress/kendo-react-data-tools";
+import { setHeaderRowsTop as ge, tableRowsVirtualization as ue } from "./utils/index.mjs";
+import { TreeListCell as me } from "./cells/TreeListCell.mjs";
+import { TreeListNoRecords as fe } from "./TreeListNoRecords.mjs";
+import { TreeListRow as Ce } from "./rows/TreeListRow.mjs";
+import { packageMetadata as ve } from "./package-metadata.mjs";
+const F = class F extends r.Component {
+  constructor(h) {
+    super(h), this.wrapperScrollLeft = 0, this.wrapperScrollTop = 0, this.updateOnScroll = !1, this.tbodyOffsetTop = 0, this.prevData = [], this.flattedData = [], this.extendedColumn = [], this.columnsMap = [], this.element = null, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this.scrollIntoView = (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);
+        }
+      }
+    }, this.getExtendedColumn = N(
+      (e, t) => Z(e, { prevId: 0, idPrefix: t })
+    ), this.getColumnsMap = N(
+      (e) => ee(e)
+    ), this.onKeyDown = (e) => {
+      if (w.onKeyDown(e, {
+        contextStateRef: this.contextStateRef,
+        navigationStateRef: this.navigationStateRef
+      }), this.props.onKeyDown) {
+        const { mode: t, cell: o } = A(this.props.selectable), s = {
+          dataItems: this.getLeafDataItems(),
+          mode: t,
+          cell: o,
+          componentId: this._treeListId,
+          selectedField: this.props.selectedField,
+          ...this.getArguments(e)
+        };
+        this.props.onKeyDown.call(void 0, s);
+      }
+    }, this.onFocus = (e) => {
+      w.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 = (c) => {
+        do
+          c++;
+        while (c < this.extendedColumn.length && this.extendedColumn[c].depth > s);
+        return c;
+      }, i = this.extendedColumn.splice(e, l(e) - e);
+      if (this.extendedColumn.splice(e < t ? l(t - i.length) : t, 0, ...i), this.extendedColumn.filter((c) => c.declarationIndex >= 0).forEach((c, g) => c.orderIndex = g), this.props.onColumnReorder) {
+        const c = {
+          target: this,
+          columns: this.columns,
+          nativeEvent: o
+        };
+        this.props.onColumnReorder.call(void 0, c);
+      }
+    }, this.onResize = (e, t, o, s, l) => {
+      if (this.props.onColumnResize) {
+        const i = this.extendedColumn.filter((g) => g.children.length === 0).reduce((g, m) => g += parseFloat(String(m.width)), 0), c = {
+          columns: this.columns,
+          totalWidth: i,
+          index: e,
+          nativeEvent: s,
+          newWidth: t,
+          oldWidth: o,
+          end: l,
+          target: this
+        };
+        this.props.onColumnResize.call(void 0, c);
+      }
+    }, this.handleOnScroll = (e) => {
+      const t = e.currentTarget.scrollLeft, o = e.currentTarget.scrollTop, { columnVirtualization: s, scrollable: l, rowHeight: i = 0 } = this.props, c = i, g = 0;
+      let m = !1;
+      s && Math.abs(this.wrapperScrollLeft - t) > g && (this.wrapperScrollLeft = t, m = !0), l === "virtual" && Math.abs(this.wrapperScrollTop - o) > c && (this.wrapperScrollTop = o, m = !0), m && (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"));
+      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, ge(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);
+        }
+        return;
+      }
+      if (t) {
+        const o = {
+          ...this.getArguments(e.syntheticEvent),
+          dataItem: e.dataItem,
+          level: e.level,
+          field: e.field,
+          value: e.value
+        };
+        t.call(void 0, o);
+      }
+    }, 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()
+        };
+        this.props.onHeaderSelectionChange.call(void 0, t);
+      }
+    }, this.selectionRelease = (e) => {
+      if (this.props.onSelectionChange) {
+        const t = {
+          syntheticEvent: void 0,
+          target: this,
+          selectedField: this.props.selectedField || "",
+          componentId: this._treeListId,
+          dataItems: this.getLeafDataItems(),
+          dataItem: null,
+          level: [],
+          ...e
+        };
+        this.props.onSelectionChange.call(void 0, t);
+      }
+    }, 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)
+        return;
+      const l = {
+        syntheticEvent: e,
+        filter: t,
+        field: o,
+        target: this,
+        nativeEvent: e.nativeEvent
+      };
+      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),
+          skip: e.skip,
+          take: e.take
+        };
+        this.props.onPageChange.call(void 0, t);
+      }
+    }, 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), J(ve), this.dragLogic = new te(this.columnReorder, H, H), this.columnResize = new oe(this.onResize.bind(this)), w.onConstructor({
+      navigatable: !!h.navigatable,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    });
+  }
+  get _treeListId() {
+    return this.props.id + "-treelist";
+  }
+  get document() {
+    if (Q)
+      return this.element && this.element.ownerDocument || document;
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.calculateSizes(this.element), w.onComponentDidMount({
+      scope: this.element || void 0,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    });
+  }
+  /**
+   * @hidden
+   */
+  getSnapshotBeforeUpdate() {
+    return w.onGetSnapshotBeforeUpdate({
+      document: this.document,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    }), null;
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(h) {
+    h.columns !== this.props.columns && this.calculateSizes(this.element), w.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: h = [],
+      filterRow: e,
+      scrollable: t = "scrollable",
+      resizable: o = !1,
+      reorderable: s = !1,
+      skip: l,
+      take: i
+    } = this.props, c = h.some((a) => !!a.filter || !!a.filterCell) || e !== void 0, g = e || pe, m = O.getIdPrefix(this.navigationStateRef);
+    this.extendedColumn = this.getExtendedColumn(h, m), this.columnsMap = this.getColumnsMap(this.extendedColumn);
+    const C = 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 M = /* @__PURE__ */ r.createElement(
+      se,
+      {
+        headerRow: /* @__PURE__ */ r.createElement(
+          ne,
+          {
+            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: c && /* @__PURE__ */ r.createElement(
+          g,
+          {
+            columns: C,
+            filter: this.props.filter,
+            filterChange: this.filterChange,
+            sort: this.props.sort,
+            ariaRowIndex: this.columnsMap.length + 1
+          }
+        ) || void 0,
+        columnResize: this.columnResize
+      }
+    ), b = this.props.style || {}, { colSpans: D, hiddenColumns: B } = ae({
+      enabled: this.props.columnVirtualization,
+      columns: C,
+      scrollLeft: this.wrapperScrollLeft,
+      tableViewPortWidth: parseFloat((b.width || "").toString())
+    }), V = (a, u, I, E, k, x) => C.map((d, p) => {
+      if (B[p])
+        return null;
+      const S = d.id ? d.id : p, z = `${d.className ? d.className + " " : ""}${d.locked ? "k-grid-content-sticky" : ""}`, R = {
+        id: O.generateNavigatableId(`${I}-${String(p)}`, m),
+        colSpan: D[p],
+        dataItem: a.dataItem,
+        field: d.field,
+        format: d.format,
+        className: z || void 0,
+        render: this.props.cellRender,
+        onChange: this.itemChange,
+        selectionChange: this.props.onSelectionChange ? (v) => {
+          this.selectionChange({ event: v, item: a, columnIndex: p, dataIndex: k });
+        } : void 0,
+        level: a.level,
+        expandable: d.expandable,
+        expanded: E,
+        hasChildren: this.hasChildren(a.dataItem),
+        onExpandChange: this.expandChange,
+        colIndex: p,
+        ariaColumnIndex: d.ariaColumnIndex,
+        style: d.left !== void 0 && {
+          left: d.left,
+          right: d.right,
+          borderRightWidth: d.rightBorder ? "1px" : ""
+        } || {},
+        isSelected: Array.isArray(x) && x.indexOf(p) > -1
+      };
+      return u && d.editCell ? /* @__PURE__ */ r.createElement(d.editCell, { key: S, ...R, onChange: this.itemChange }) : d.cell ? /* @__PURE__ */ r.createElement(d.cell, { key: S, ...R }) : /* @__PURE__ */ r.createElement(me, { key: S, ...R });
+    });
+    let f = this.flatData;
+    const T = f.length;
+    l !== void 0 && i !== void 0 && (f = f.slice(l, l + i)), t === "virtual" && (f = ue({
+      rows: f,
+      tableViewPortHeight: parseFloat((b.height || b.maxHeight || "").toString()),
+      scrollTop: this.wrapperScrollTop
+    }), this.updateOnScroll = !1);
+    const U = f.map((a) => a.level), $ = this.columnsMap.length + (c ? 1 : 0) + 1, W = f.length > 0 && f.map((a, u) => {
+      const I = y(this.props.editField, a.dataItem), E = this.props.dataItemKey && X(this.props.dataItemKey)(a.dataItem), k = String(E || a.level.join(".")), x = this.expanded(a.dataItem), d = this.props.selectedField ? y(this.props.selectedField, a.dataItem) : void 0, p = {
+        key: k,
+        level: a.level,
+        levels: U,
+        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: (v) => this.rowClick(v, a),
+        onDoubleClick: (v) => this.rowDoubleClick(v, a),
+        onContextMenu: (v) => this.rowContextMenu(v, a),
+        isAltRow: u % 2 !== 0,
+        expanded: x,
+        rowIndex: u,
+        ariaRowIndex: $ + u,
+        ariaSetSize: a.levelCount,
+        ariaPosInSet: a.level[a.level.length - 1] + 1,
+        isSelected: typeof d == "boolean" && d
+      }, S = this.props.editRow, z = this.props.row || Ce, R = V(a, I, k, x, u, d);
+      return I && S ? /* @__PURE__ */ r.createElement(S, { ...p, key: p.key }, R) : /* @__PURE__ */ r.createElement(z, { ...p, key: p.key }, R);
+    }) || /* @__PURE__ */ r.createElement("tr", { className: "k-table-row k-grid-norecords" }, /* @__PURE__ */ r.createElement("td", { colSpan: C.length }, this.props.noRecords || /* @__PURE__ */ r.createElement(fe, null))), j = (a) => this.props.sort && this.props.sort.some((u) => u.field === a), G = /* @__PURE__ */ r.createElement("colgroup", { ref: (a) => {
+      this.columnResize.colGroupMain = a;
+    } }, C.map(
+      (a, u) => /* @__PURE__ */ r.createElement(
+        "col",
+        {
+          key: u.toString(),
+          className: j(a.field) ? "k-sorted" : void 0,
+          style: a.width !== void 0 ? { width: a.width } : void 0
+        }
+      )
+    )), _ = this.props.columnVirtualization || this.props.scrollable === "virtual", q = this.props.selectable && this.props.selectable.drag ? "none" : void 0, L = this.props.tableProps || {};
+    return /* @__PURE__ */ r.createElement(K.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      "div",
+      {
+        id: this.props.id,
+        style: this.props.style,
+        className: Y(
+          "k-grid k-grid-md",
+          "k-treelist",
+          this.props.className,
+          { "k-treelist-scrollable": t !== "none" }
+        ),
+        ref: (a) => this.element = a,
+        onScroll: _ ? this.handleOnScroll : void 0,
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        "aria-rowcount": T,
+        "aria-colcount": C.length,
+        role: "treegrid",
+        ...ie
+      },
+      this.props.toolbar,
+      /* @__PURE__ */ r.createElement(
+        le,
+        {
+          selectable: this.props.selectable,
+          onRelease: this.selectionRelease
+        },
+        /* @__PURE__ */ r.createElement(
+          "table",
+          {
+            className: "k-table k-table-md k-grid-table",
+            ...L,
+            style: { ...L.style || {}, userSelect: q },
+            role: "presentation"
+          },
+          G,
+          M,
+          /* @__PURE__ */ r.createElement("tbody", { className: "k-table-tbody", ...re, role: "presentation" }, W)
+        )
+      ),
+      this.props.pager && /* @__PURE__ */ r.createElement(
+        this.props.pager,
+        {
+          className: "k-grid-pager",
+          total: T,
+          skip: l,
+          take: i,
+          onPageChange: this.onPageChange
+        }
+      ),
+      s && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(he, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(de, { ref: this.dragLogic.refDragElementClue }))
+    ));
+  }
+  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: c,
+        rowSpan: g,
+        index: m,
+        kFirst: C,
+        groupable: M,
+        children: b,
+        ...D
+      } = o;
+      return b.length ? {
+        children: e(b),
+        ...D
+      } : D;
+    }));
+    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;
+    };
+    let s = this.updateOnScroll && this.prevData === h && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : ce(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 } = A(this.props.selectable), c = {
+        ...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, c);
+    }
+  }
+  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
+    };
+  }
+};
+F.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
+    })
+  ]),
+  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
+}, F.contextType = K;
+let P = F;
+export {
+  P as TreeList
+};

package/TreeListNoRecords.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),c=require("@progress/kendo-react-intl"),o=require("./messages/index.js");function a(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=a(s);class i extends u.Component{render(){return this.props.children||c.provideLocalizationService(this).toLanguageString(o.noRecords,o.messages[o.noRecords])}}c.registerForLocalization(i);exports.TreeListNoRecords=i;

package/TreeListNoRecords.mjs

@@ -0,0 +1,23 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as r from "react";
+import { provideLocalizationService as o, registerForLocalization as t } from "@progress/kendo-react-intl";
+import { noRecords as e, messages as i } from "./messages/index.mjs";
+class s extends r.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return this.props.children || o(this).toLanguageString(e, i[e]);
+  }
+}
+t(s);
+export {
+  s as TreeListNoRecords
+};

package/TreeListToolbar.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");function c(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=c(a);class l extends n.Component{render(){return n.createElement("div",{className:"k-toolbar k-toolbar-md k-grid-toolbar"},this.props.children)}}exports.TreeListToolbar=l;