@progress/kendo-react-treelist 10.2.0-develop.1 → 10.2.0-develop.11

package/TreeList.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),n=require("prop-types"),g=require("@progress/kendo-react-common"),h=require("@progress/kendo-react-data-tools"),H=require("./utils/index.js"),J=require("./cells/TreeListCell.js"),Q=require("./TreeListNoRecords.js"),X=require("./rows/TreeListRow.js"),Y=require("./package-metadata.js");function Z(y){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(y){for(const e in y)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(y,e);Object.defineProperty(l,e,t.get?t:{enumerable:!0,get:()=>y[e]})}}return l.default=y,Object.freeze(l)}const d=Z(G),F=class F extends d.Component{constructor(l){super(l),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.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,t)=>h.mapColumns(e,t)),this.onKeyDown=e=>{if(h.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,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,H.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),this.showLicenseWatermark=!g.validatePackage(Y.packageMetadata,{component:"TreeList"}),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),T=this.getExtendedColumn(l,C),M=T.length!==this.extendedColumn.length;this.extendedColumn=T,this.columnsMap=this.getColumnsMap(this.extendedColumn,M);const b=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 D=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}),reorderable:this.props.reorderable,filterRow:p&&d.createElement(m,{columns:b,filter:this.props.filter,filterChange:this.filterChange,sort:this.props.sort,ariaRowIndex:this.columnsMap.length+1})||void 0,columnResize:this.columnResize}),L=this.props.style||{},{colSpans:P,hiddenColumns:A}=h.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:b,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((L.width||"").toString())}),V=(a,f,I,E,k,x)=>b.map((c,u)=>{if(A[u])return null;const R=c.id?c.id:u,N=`${c.className?c.className+" ":""}${c.locked?"k-grid-content-sticky":""}`,w={id:h.tableKeyboardNavigationTools.generateNavigatableId(`${I}-${String(u)}`,C),colSpan:P[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:k})}:void 0,level:a.level,expandable:c.expandable,expanded:E,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(x)&&x.indexOf(u)>-1};return f&&c.editCell?d.createElement(c.editCell,{key:R,...w,onChange:this.itemChange}):c.cell?d.createElement(c.cell,{key:R,...w}):d.createElement(J.TreeListCell,{key:R,...w})});let v=this.flatData;const O=v.length;r!==void 0&&i!==void 0&&(v=v.slice(r,r+i)),t==="virtual"&&(v=H.tableRowsVirtualization({rows:v,tableViewPortHeight:parseFloat((L.height||L.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const B=v.map(a=>a.level),U=this.columnsMap.length+(p?1:0)+1,j=v.length>0&&v.map((a,f)=>{const I=g.getNestedValue(this.props.editField,a.dataItem),E=this.props.dataItemKey&&g.getter(this.props.dataItemKey)(a.dataItem),k=String(E||a.level.join(".")),x=this.expanded(a.dataItem),c=this.props.selectedField?g.getNestedValue(this.props.selectedField,a.dataItem):void 0,u={key:k,level:a.level,levels:B,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:x,rowIndex:f,ariaRowIndex:U+f,ariaSetSize:a.levelCount,ariaPosInSet:a.level[a.level.length-1]+1,isSelected:typeof c=="boolean"&&c},R=this.props.editRow,N=this.props.row||X.TreeListRow,w=V(a,I,k,x,f,c);return I&&R?d.createElement(R,{...u,key:u.key},w):d.createElement(N,{...u,key:u.key},w)})||d.createElement("tr",{className:"k-table-row k-grid-norecords"},d.createElement("td",{colSpan:b.length},this.props.noRecords||d.createElement(Q.TreeListNoRecords,null))),q=a=>this.props.sort&&this.props.sort.some(f=>f.field===a),W=d.createElement("colgroup",{ref:a=>{this.columnResize.colGroupMain=a}},b.map((a,f)=>d.createElement("col",{key:f.toString(),className:q(a.field)?"k-sorted":void 0,style:a.width!==void 0?{width:a.width}:void 0}))),_=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:_?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":O,"aria-colcount":b.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"},W,D,d.createElement("tbody",{className:"k-table-tbody",...h.tableKeyboardNavigationBodyAttributes,role:"presentation"},j))),this.props.pager&&d.createElement(this.props.pager,{className:"k-grid-pager",total:O,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})),this.showLicenseWatermark&&d.createElement(g.WatermarkOverlay,null)))}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:T,groupable:M,children:b,...D}=o;return b.length?{children:e(b),...D}:D}));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},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}}};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=h.TableKeyboardNavigationContext;let z=F;exports.TreeList=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),n=require("prop-types"),g=require("@progress/kendo-react-common"),h=require("@progress/kendo-react-data-tools"),H=require("./utils/index.js"),J=require("./cells/TreeListCell.js"),Q=require("./TreeListNoRecords.js"),X=require("./rows/TreeListRow.js"),Y=require("./package-metadata.js");function Z(y){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(y){for(const e in y)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(y,e);Object.defineProperty(l,e,t.get?t:{enumerable:!0,get:()=>y[e]})}}return l.default=y,Object.freeze(l)}const d=Z(G),F=class F extends d.Component{constructor(l){super(l),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.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,t)=>h.mapColumns(e,t)),this.onKeyDown=e=>{if(h.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,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,H.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),this.showLicenseWatermark=!g.validatePackage(Y.packageMetadata,{component:"TreeList"}),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),T=this.getExtendedColumn(l,C),M=T.length!==this.extendedColumn.length;this.extendedColumn=T,this.columnsMap=this.getColumnsMap(this.extendedColumn,M);const b=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 D=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}),reorderable:this.props.reorderable,filterRow:p&&d.createElement(m,{columns:b,filter:this.props.filter,filterChange:this.filterChange,sort:this.props.sort,ariaRowIndex:this.columnsMap.length+1})||void 0,columnResize:this.columnResize}),L=this.props.style||{},{colSpans:P,hiddenColumns:A}=h.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:b,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((L.width||"").toString())}),V=(a,f,I,E,k,x)=>b.map((c,u)=>{if(A[u])return null;const R=c.id?c.id:u,N=`${c.className?c.className+" ":""}${c.locked?"k-grid-content-sticky":""}`,w={id:h.tableKeyboardNavigationTools.generateNavigatableId(`${I}-${String(u)}`,C),colSpan:P[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:k})}:void 0,level:a.level,expandable:c.expandable,expanded:E,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(x)&&x.indexOf(u)>-1};return f&&c.editCell?d.createElement(c.editCell,{key:R,...w,onChange:this.itemChange}):c.cell?d.createElement(c.cell,{key:R,...w}):d.createElement(J.TreeListCell,{key:R,...w})});let v=this.flatData;const O=v.length;r!==void 0&&i!==void 0&&(v=v.slice(r,r+i)),t==="virtual"&&(v=H.tableRowsVirtualization({rows:v,tableViewPortHeight:parseFloat((L.height||L.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const B=v.map(a=>a.level),U=this.columnsMap.length+(p?1:0)+1,j=v.length>0&&v.map((a,f)=>{const I=g.getNestedValue(this.props.editField,a.dataItem),E=this.props.dataItemKey&&g.getter(this.props.dataItemKey)(a.dataItem),k=String(E||a.level.join(".")),x=this.expanded(a.dataItem),c=this.props.selectedField?g.getNestedValue(this.props.selectedField,a.dataItem):void 0,u={key:k,level:a.level,levels:B,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:x,rowIndex:f,ariaRowIndex:U+f,ariaSetSize:a.levelCount,ariaPosInSet:a.level[a.level.length-1]+1,isSelected:typeof c=="boolean"&&c},R=this.props.editRow,N=this.props.row||X.TreeListRow,w=V(a,I,k,x,f,c);return I&&R?d.createElement(R,{...u,key:u.key},w):d.createElement(N,{...u,key:u.key},w)})||d.createElement("tr",{className:"k-table-row k-grid-norecords"},d.createElement("td",{colSpan:b.length},this.props.noRecords||d.createElement(Q.TreeListNoRecords,null))),q=a=>this.props.sort&&this.props.sort.some(f=>f.field===a),W=d.createElement("colgroup",{ref:a=>{this.columnResize.colGroupMain=a}},b.map((a,f)=>d.createElement("col",{key:f.toString(),className:q(a.field)?"k-sorted":void 0,style:a.width!==void 0?{width:a.width}:void 0}))),_=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:_?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":O,"aria-colcount":b.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"},W,D,d.createElement("tbody",{className:"k-table-tbody",...h.tableKeyboardNavigationBodyAttributes,role:"presentation"},j))),this.props.pager&&d.createElement(this.props.pager,{className:"k-grid-pager",total:O,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})),this.showLicenseWatermark&&d.createElement(g.WatermarkOverlay,null)))}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:T,groupable:M,children:b,...D}=o;return b.length?{children:e(b),...D}:D}));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},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}}};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=h.TableKeyboardNavigationContext;let z=F;exports.TreeList=z;

package/TreeList.mjs

@@ -411,7 +411,9 @@ const k = class k extends r.Component {
         className: ee("k-grid k-grid-md", "k-treelist", this.props.className, {
           "k-treelist-scrollable": t !== "none"
         }),
-        ref: (a) => this.element = a,
+        ref: (a) => {
+          this.element = a;
+        },
         onScroll: J ? this.handleOnScroll : void 0,
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,

package/dist/cdn/js/kendo-react-treelist.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-data-tools"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons"),require("react-dom"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-react-dateinputs")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-data-tools","@progress/kendo-react-intl","@progress/kendo-svg-icons","react-dom","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-react-dateinputs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreelist={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactDataTools,e.KendoReactIntl,e.KendoSvgIcons,e.ReactDOM,e.KendoReactButtons,e.KendoReactInputs,e.KendoReactDateinputs)}(this,(function(e,t,a,o,r,n,l,s,i,d,c){"use strict";function h(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var p=h(t),u=h(s);function g(e,t,a){const o=Array.from(e.tHead&&e.tHead.rows||[]),r=[t];let n;const l=a||(e=>window.getComputedStyle(e).height||void 0);o.forEach((e=>{const t=l(e);r.push(function(e){return void 0!==e&&("number"==typeof e||/px$/i.test(String(e)))}(t)?parseFloat(String(t)):e.offsetHeight)}));for(let e=0;e<o.length;e++)n=r.slice(0,e+1).reduce(((e,t)=>e+t)),Array.from(o[e].cells).forEach((e=>e.style.top=n+"px"))}const m=1e6;function f(e){const{rows:t,tableViewPortHeight:a,scrollTop:o}=e;if(0===t.length)return[];const r=t[0].height,n=Math.min(Math.round(o/r),t.length),l=Math.round(a/r),s=Math.max(0,n-l),i=Math.min(t.length,n+2*l),d=t.slice(s,i),c=d[d.length-1];return s>0&&d.unshift({dataItem:{},level:[m],offsetTop:0,height:d[0].offsetTop,levelCount:0}),i<t.length-1&&d.push({dataItem:{},level:[m,m],offsetTop:c.offsetTop+c.height,height:(t.length-i)*r,levelCount:0}),d}const v=r.TABLE_ROW_INDEX_ATTRIBUTE,b=r.TABLE_COL_INDEX_ATTRIBUTE,C=r.TABLE_PREVENT_SELECTION_ELEMENT,x=e=>{const{hasChildren:t,level:a=[0],expanded:s,dataItem:i,format:d,id:c,ariaColumnIndex:h,isSelected:u}=e,g=o.getNestedValue(e.field,i),m=n.useInternationalization(),f=r.useTableKeyboardNavigation(c);let v="";const x=p.useCallback((t=>{t.isDefaultPrevented()||t.keyCode===o.Keys.enter&&e.expandable&&(t.preventDefault(),e.onExpandChange(t,i,a))}),[e.expandable,i,a]);null!=g&&(v=d?m.format(d,g):g.toString());const I=[];if(e.expandable){const r=e=>p.createElement("span",{key:e,className:"k-treelist-toggle k-icon k-svg-icon"},p.createElement("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"}));I.push(...a.slice(1).map(((e,t)=>r(t)))),t?I.push(p.createElement(o.IconWrap,{className:"k-treelist-toggle",name:s?"caret-alt-down":"caret-alt-right",icon:s?l.caretAltDownIcon:l.caretAltRightIcon,key:"expand-collapse",onClick:t=>e.onExpandChange(t.syntheticEvent||t,i,a),[C]:!0})):I.push(r(I.length))}const y=p.createElement("td",{style:e.style,className:o.classNames("k-table-td",e.className,{"k-text-nowrap":e.expandable,"k-selected":u}),colSpan:e.colSpan,"aria-colindex":h,"aria-expanded":t?s:void 0,"aria-selected":u,role:"gridcell",onKeyDown:x,[b]:e.colIndex,...f},I,v);return e.render?e.render.call(void 0,y,e):y};x.displayName="KendoReactTreeListCell";const I="treelist.filterClearButton",y="treelist.filterEqOperator",E="treelist.filterNotEqOperator",S="treelist.filterIsNullOperator",R="treelist.filterIsNotNullOperator",k="treelist.filterIsEmptyOperator",w="treelist.filterIsNotEmptyOperator",T="treelist.filterStartsWithOperator",N="treelist.filterContainsOperator",D="treelist.filterNotContainsOperator",L="treelist.filterEndsWithOperator",O="treelist.filterGteOperator",F="treelist.filterGtOperator",K="treelist.filterLteOperator",P="treelist.filterLtOperator",z="treelist.filterIsTrue",M="treelist.filterIsFalse",A="treelist.filterBooleanAll",H="treelist.filterAfterOrEqualOperator",B="treelist.filterAfterOperator",q="treelist.filterBeforeOperator",j="treelist.filterBeforeOrEqualOperator",V="treelist.noRecords",_={[I]:"Clear",[y]:"Is equal to",[E]:"Is not equal to",[S]:"Is null",[R]:"Is not null",[k]:"Is empty",[w]:"Is not empty",[T]:"Starts with",[N]:"Contains",[D]:"Does not contain",[L]:"Ends with",[O]:"Is greater than or equal to",[F]:"Is greater than",[K]:"Is less than or equal to",[P]:"Is less than",[z]:"Is true",[M]:"Is false",[A]:"(All)",[H]:"Is after or equal to",[B]:"Is after",[q]:"Is before",[j]:"Is before or equal to",[V]:"No records available"};let U=class extends p.Component{render(){return this.props.children||n.provideLocalizationService(this).toLanguageString(V,_[V])}};n.registerForLocalization(U);const W=p.forwardRef(((e,t)=>{const{isSelected:a,rowHeight:r,isAltRow:n,expanded:l,ariaRowIndex:s,level:i,ariaSetSize:d,ariaPosInSet:c}=e,h=o.classNames("k-table-row","k-master-row",{"k-selected":a,"k-alt":n}),u=p.useMemo((()=>void 0!==r?{height:r+"px"}:void 0),[r]),g=p.createElement("tr",{onClick:e.onClick,onDoubleClick:e.onDoubleClick,onContextMenu:e.onContextMenu,className:h,style:u,ref:t,"aria-expanded":l,role:"row","aria-rowindex":s,"aria-level":i.length,"aria-posinset":c,"aria-setsize":d,[v]:e.rowIndex},e.children);return p.createElement(p.Fragment,null,e.render?e.render.call(void 0,g,e):g)}));W.displayName="KendoReactTreeListRow";const $={name:"@progress/kendo-react-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},X=class extends p.Component{constructor(e){super(e),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.scrollIntoView=e=>{if(!this.element)return;const{rowIndex:t=0}=e,{scrollable:a,rowHeight:o=0}=this.props;if("virtual"===a||o)this.element.scroll(0,(t-1)*o);else{const e=this.element.querySelector(`tbody > tr:nth-child(${t})`);if(e){const t=e.offsetTop-this.tbodyOffsetTop;this.element.scroll(0,t)}}},this.getExtendedColumn=o.memoizeOne(((e,t)=>r.readColumns(e,{prevId:0,idPrefix:t}))),this.getColumnsMap=o.memoizeOne(((e,t)=>r.mapColumns(e,t))),this.onKeyDown=e=>{if(r.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:a}=r.getSelectionOptions(this.props.selectable),o={dataItems:this.getLeafDataItems(),mode:t,cell:a,componentId:this._treeListId,selectedField:this.props.selectedField,...this.getArguments(e)};this.props.onKeyDown.call(void 0,o)}},this.onFocus=e=>{r.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,a)=>{const o=this.extendedColumn[e].depth,r=e=>{do{e++}while(e<this.extendedColumn.length&&this.extendedColumn[e].depth>o);return e},n=this.extendedColumn.splice(e,r(e)-e);if(this.extendedColumn.splice(e<t?r(t-n.length):t,0,...n),this.extendedColumn.filter((e=>e.declarationIndex>=0)).forEach(((e,t)=>e.orderIndex=t)),this.props.onColumnReorder){const e={target:this,columns:this.columns,nativeEvent:a};this.props.onColumnReorder.call(void 0,e)}},this.onResize=(e,t,a,o,r)=>{if(this.props.onColumnResize){const n=this.extendedColumn.filter((e=>0===e.children.length)).reduce(((e,t)=>e+parseFloat(String(t.width))),0),l={columns:this.columns,totalWidth:n,index:e,nativeEvent:o,newWidth:t,oldWidth:a,end:r,target:this};this.props.onColumnResize.call(void 0,l)}},this.handleOnScroll=e=>{const t=e.currentTarget.scrollLeft,a=e.currentTarget.scrollTop,{columnVirtualization:o,scrollable:r,rowHeight:n=0}=this.props,l=n;let s=!1;o&&Math.abs(this.wrapperScrollLeft-t)>0&&(this.wrapperScrollLeft=t,s=!0),"virtual"===r&&Math.abs(this.wrapperScrollTop-a)>l&&(this.wrapperScrollTop=a,s=!0),s&&(this.updateOnScroll=!0,this.forceUpdate())},this.calculateSizes=e=>{if(!e||"none"===this.props.scrollable)return;const t=Array.from(e.childNodes),a=t.find((e=>"TABLE"===e.nodeName)),o=this.props.toolbar&&t.find((e=>1===e.nodeType&&e.classList.contains("k-grid-toolbar")));let r=0;if(o){const e=o.style.boxSizing;o.style.boxSizing="border-box",r=parseFloat(String(window.getComputedStyle(o).height))||o.offsetHeight,o.style.boxSizing=e,o.getAttribute("style")||o.removeAttribute("style")}this.tbodyOffsetTop=a.tBodies[0].offsetTop,g(a,r)},this.itemChange=e=>{const t=this.props.onItemChange;if(e.field!==this.props.expandField){if(t){const a={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};t.call(void 0,a)}}else{const t=this.props.onExpandChange;if(t){const a={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,value:e.value};t.call(void 0,a)}}},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,a)=>{this.raiseDataEvent(this.props.onSortChange,{sort:t,field:a},e)},this.headerFilterChange=(e,t,a)=>{this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:a},e)},this.filterChange=e=>{const{filter:t,field:a}=e;this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:a},e.syntheticEvent)},this.columnMenuFilterChange=(e,t,a)=>{const{onColumnMenuFilterChange:o}=this.props;if(!o)return;const r={syntheticEvent:e,filter:t,field:a,target:this,nativeEvent:e.nativeEvent};o.call(void 0,r)},this.expandChange=(e,t,a)=>{const{expandField:o,onExpandChange:r}=this.props;if(o&&r){const o={...this.getArguments(e),dataItem:t,level:a,value:this.expanded(t)};r.call(void 0,o)}},this.rowClick=(e,t)=>{if(this.props.onRowClick&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowClick.call(void 0,a)}},this.rowDoubleClick=(e,t)=>{if(this.props.onRowDoubleClick&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowDoubleClick.call(void 0,a)}},this.rowContextMenu=(e,t)=>{if(this.props.onRowContextMenu&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowContextMenu.call(void 0,a)}},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(...o.getNestedValue(this.props.subItemsField,e)),t},this.getLeafDataItems=()=>this.flatData.map((e=>e.dataItem)),this.expanded=e=>!!o.getNestedValue(this.props.expandField,e),this.hasChildren=e=>!!o.getNestedValue(this.props.subItemsField,e),this.showLicenseWatermark=!o.validatePackage($,{component:"TreeList"}),this.dragLogic=new r.CommonDragLogic(this.columnReorder,o.noop,o.noop),this.columnResize=new r.ColumnResize(this.onResize.bind(this)),r.tableKeyboardNavigation.onConstructor({navigatable:!!e.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}get _treeListId(){return this.props.id+"-treelist"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),r.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return r.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(e){e.columns!==this.props.columns&&this.calculateSizes(this.element),r.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:e=[],filterRow:t,scrollable:a="scrollable",resizable:n=!1,reorderable:l=!1,skip:s,take:i}=this.props,d=e.some((e=>!!e.filter||!!e.filterCell))||void 0!==t,c=t||r.FilterRow,h=r.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef),u=this.getExtendedColumn(e,h),g=u.length!==this.extendedColumn.length;this.extendedColumn=u,this.columnsMap=this.getColumnsMap(this.extendedColumn,g);const m=this.extendedColumn.filter((e=>0===e.children.length));this.columnResize.columns=this.extendedColumn,this.columnResize.resizable=n,this.dragLogic.columns=this.extendedColumn,this.dragLogic.reorderable=l,this.dragLogic.groupable=!1;const v=p.createElement(r.Header,{headerRow:p.createElement(r.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}),reorderable:this.props.reorderable,filterRow:d&&p.createElement(c,{columns:m,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:C,hiddenColumns:I}=r.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:m,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((b.width||"").toString())}),y=(e,t,a,o,n,l)=>m.map(((s,i)=>{if(I[i])return null;const d=s.id?s.id:i,c=`${s.className?s.className+" ":""}${s.locked?"k-grid-content-sticky":""}`,u={id:r.tableKeyboardNavigationTools.generateNavigatableId(`${a}-${String(i)}`,h),colSpan:C[i],dataItem:e.dataItem,field:s.field,format:s.format,className:c||void 0,render:this.props.cellRender,onChange:this.itemChange,selectionChange:this.props.onSelectionChange?t=>{this.selectionChange({event:t,item:e,columnIndex:i,dataIndex:n})}:void 0,level:e.level,expandable:s.expandable,expanded:o,hasChildren:this.hasChildren(e.dataItem),onExpandChange:this.expandChange,colIndex:i,ariaColumnIndex:s.ariaColumnIndex,style:void 0!==s.left&&{left:s.left,right:s.right,borderRightWidth:s.rightBorder?"1px":""}||{},isSelected:Array.isArray(l)&&l.indexOf(i)>-1};return t&&s.editCell?p.createElement(s.editCell,{key:d,...u,onChange:this.itemChange}):s.cell?p.createElement(s.cell,{key:d,...u}):p.createElement(x,{key:d,...u})}));let E=this.flatData;const S=E.length;void 0!==s&&void 0!==i&&(E=E.slice(s,s+i)),"virtual"===a&&(E=f({rows:E,tableViewPortHeight:parseFloat((b.height||b.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const R=E.map((e=>e.level)),k=this.columnsMap.length+(d?1:0)+1,w=E.length>0&&E.map(((e,t)=>{const r=o.getNestedValue(this.props.editField,e.dataItem),n=this.props.dataItemKey&&o.getter(this.props.dataItemKey)(e.dataItem),l=String(n||e.level.join(".")),s=this.expanded(e.dataItem),i=this.props.selectedField?o.getNestedValue(this.props.selectedField,e.dataItem):void 0,d={key:l,level:e.level,levels:R,dataItem:e.dataItem,selectedField:this.props.selectedField,rowHeight:"virtual"===a?e.height:this.props.rowHeight,render:this.props.rowRender,onDrop:this.onRowDrop,onDrag:this.onRowDrag,onClick:t=>this.rowClick(t,e),onDoubleClick:t=>this.rowDoubleClick(t,e),onContextMenu:t=>this.rowContextMenu(t,e),isAltRow:t%2!=0,expanded:s,rowIndex:t,ariaRowIndex:k+t,ariaSetSize:e.levelCount,ariaPosInSet:e.level[e.level.length-1]+1,isSelected:"boolean"==typeof i&&i},c=this.props.editRow,h=this.props.row||W,u=y(e,r,l,s,t,i);return r&&c?p.createElement(c,{...d,key:d.key},u):p.createElement(h,{...d,key:d.key},u)}))||p.createElement("tr",{className:"k-table-row k-grid-norecords"},p.createElement("td",{colSpan:m.length},this.props.noRecords||p.createElement(U,null))),T=e=>this.props.sort&&this.props.sort.some((t=>t.field===e)),N=p.createElement("colgroup",{ref:e=>{this.columnResize.colGroupMain=e}},m.map(((e,t)=>p.createElement("col",{key:t.toString(),className:T(e.field)?"k-sorted":void 0,style:void 0!==e.width?{width:e.width}:void 0})))),D=this.props.columnVirtualization||"virtual"===this.props.scrollable,L=this.props.selectable&&this.props.selectable.drag?"none":void 0,O=this.props.tableProps||{};return p.createElement(r.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},p.createElement("div",{id:this.props.id,style:this.props.style,className:o.classNames("k-grid k-grid-md","k-treelist",this.props.className,{"k-treelist-scrollable":"none"!==a}),ref:e=>this.element=e,onScroll:D?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":S,"aria-colcount":m.length,role:"treegrid",...r.tableKeyboardNavigationScopeAttributes},this.props.toolbar,p.createElement(r.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease},p.createElement("table",{className:"k-table k-table-md k-grid-table",...O,style:{...O.style||{},userSelect:L},role:"presentation"},N,v,p.createElement("tbody",{className:"k-table-tbody",...r.tableKeyboardNavigationBodyAttributes,role:"presentation"},w))),this.props.pager&&p.createElement(this.props.pager,{className:"k-grid-pager",total:S,skip:s,take:i,onPageChange:this.onPageChange}),l&&p.createElement(p.Fragment,null,p.createElement(r.DropClue,{ref:this.dragLogic.refDropElementClue}),p.createElement(r.DragClue,{ref:this.dragLogic.refDragElementClue})),this.showLicenseWatermark&&p.createElement(o.WatermarkOverlay,null)))}get columns(){const e=this.extendedColumn.filter((e=>e.declarationIndex>=0&&-1===e.parentIndex)),t=e=>(e.sort(((e,t)=>e.declarationIndex-t.declarationIndex)),e.map((e=>{const{declarationIndex:a,parentIndex:o,depth:r,colSpan:n,rowSpan:l,index:s,kFirst:i,groupable:d,children:c,...h}=e;return c.length?{children:t(c),...h}:h})));return t(e)}get flatData(){const{data:e=[],rowHeight:t=0}=this.props;let a=0;const o=this.updateOnScroll&&this.prevData===e&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:r.flatData(e,this.expandedSubItems,(e=>{const o={height:t,offsetTop:a};return a+=o.height,o}));return this.prevData=e,this.flattedData=o,o}selectionChange(e){if(this.props.onSelectionChange){const{event:t,item:a,dataIndex:o,columnIndex:n}=e,{mode:l,cell:s}=r.getSelectionOptions(this.props.selectable),i={...this.getArguments(t.syntheticEvent),dataItem:a.dataItem,level:a.level,startColIndex:n,endColIndex:n,startRowIndex:o,endRowIndex:o,dataItems:this.getLeafDataItems(),altKey:!1,ctrlKey:!1,shiftKey:!1,metaKey:!1,mode:l,cell:s,isDrag:!1,componentId:this._treeListId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,i)}}raiseDataEvent(e,t,a){const o=this.props.onDataStateChange;if(e)e.call(void 0,{...this.getArguments(a),...t});else if(o){const e={...this.getArguments(a),dataState:{...this.getDataState(),...t}};o.call(void 0,e)}}getDataState(){return{filter:this.props.filter,sort:this.props.sort}}getArguments(e){return{nativeEvent:e&&e.nativeEvent,syntheticEvent:e,target:this}}};X.propTypes={data:a.array,resizable:a.bool,reorderable:a.bool,sortable:a.oneOfType([a.bool,a.shape({mode:a.oneOf(["single","multiple"]),allowUnsort:a.bool})]),onSortChange:a.func,sort:a.array,columns:a.arrayOf(a.object),columnVirtualization:a.bool,filter:a.array,onFilterChange:a.func,filterRow:a.any,toolbar:a.any,noRecords:a.any,onExpandChange:a.func,expandField:a.string,subItemsField:a.string,selectedField:a.string,onSelectionChange:a.func,onHeaderSelectionChange:a.func,onRowClick:a.func,onItemChange:a.func,editField:a.string,scrollable:a.oneOf(["none","scrollable","virtual"]),rowHeight:a.number,style:a.object,tableProps:a.object,pager:a.any,skip:a.number,take:a.number,onPageChange:a.func,onDataStateChange:a.func,onColumnResize:a.func,onColumnReorder:a.func,dataItemKey:a.string,navigatable:a.bool},X.contextType=r.TableKeyboardNavigationContext;let G=X;const Y=e=>{const t=p.useCallback((t=>{e.selectionChange&&e.selectionChange({syntheticEvent:t})}),[e.selectionChange]),a=o.useId(),n=o.getNestedValue(e.field,e.dataItem),l=r.useTableKeyboardNavigation(e.id),s=p.createElement("td",{style:e.style,className:o.classNames("k-table-td",e.className),"aria-colindex":e.ariaColumnIndex,role:"gridcell",...l},p.createElement("input",{checked:"boolean"==typeof n&&n,id:a,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:a}));return e.render?e.render.call(void 0,s,e):s};Y.displayName="KendoReactTreeListSelectionCell";let J=class extends p.Component{constructor(){super(...arguments),this._inputId=o.guid()}render(){return p.createElement(r.HeaderSelectionCell,{inputId:this._inputId,...this.props})}};const Q=e=>e.visible&&o.canUseDOM?u.createPortal(p.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"}},p.createElement(o.IconWrap,{className:o.classNames("k-drag-status"),name:e.allowDrop?"plus":"cancel",icon:e.allowDrop?l.plusIcon:l.cancelIcon}),e.text),document.body):null;function Z(e,t,a){const o=a?a.elementFromPoint(e.clientX,e.clientY):null;return t&&o?o.closest(t):null}const ee={visible:!1,top:0,left:0,text:"",allowDrop:!1};let te=class extends p.Component{constructor(){super(...arguments),this.state={clueProps:{...ee}},this.draggable=p.createRef(),this.dragged=null,this.draggedOver=null,this.onPress=()=>this.dragged=this.props.level,this.onDrag=e=>{if(!o.canUseDOM)return;const t=this.draggable.current&&this.draggable.current.element,a=t?t.ownerDocument:document;if(!a)return;const r=e.event,n=this.dragged;if(t&&n){!r.isTouch&&"scroll"!==r.type&&r.originalEvent.preventDefault();const e=this.props.levels[function(e,t,a){if(!e.originalEvent)return-1;const o=Z(e,"tr",a);if(o){const e=t?t.childNodes:[];for(let t=0;t<e.length;t++)if(e[t]===o)return t}return-1}(r,t.parentNode,a)];this.draggedOver=e;const o=e?!n.every(((t,a)=>t===e[a])):!!Z(r,"k-grid k-grid-md",a);this.setState({clueProps:{visible:!0,top:r.pageY+10,left:r.pageX,text:t.innerText,allowDrop:o}}),this.props.onDrag&&this.props.onDrag.call(void 0,{nativeEvent:r.originalEvent,dragged:n,draggedOver:e,draggedItem:this.props.dataItem})}},this.onRelease=e=>{const t=e.event;if(this.dragged){const e=[...this.dragged],a=this.draggedOver&&[...this.draggedOver],o=this.state.clueProps.allowDrop;this.dragged=null,this.draggedOver=null,this.setState({clueProps:{...ee}});const r=this.props.dataItem;o&&this.props.onDrop&&this.props.onDrop.call(void 0,{nativeEvent:t.originalEvent,dragged:e,draggedOver:a,draggedItem:r})}}}render(){const{clueProps:e}=this.state;return p.createElement(p.Fragment,null,p.createElement(o.Draggable,{ref:this.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},p.createElement(W,{...this.props})),p.createElement(Q,{...e}))}};const ae=p.forwardRef(((e,t)=>{const{className:a,...r}=e,n=p.useRef(null),l=p.useRef(null);p.useImperativeHandle(l,(()=>({element:n.current,props:e}))),p.useImperativeHandle(t,(()=>l.current));const s=p.useMemo((()=>o.classNames("k-grid-toolbar",a)),[a]);return p.createElement(i.Toolbar,{id:e.id,ref:e=>{e&&(n.current=e.element)},className:s,...r},e.children)}));ae.displayName="KendoReactTreeListToolbar";const oe=[{text:N,operator:"contains"},{text:D,operator:"doesnotcontain"},{text:y,operator:"eq"},{text:E,operator:"neq"},{text:T,operator:"startswith"},{text:L,operator:"endswith"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"},{text:k,operator:"isempty"},{text:w,operator:"isnotempty"}],re=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:O,operator:"gte"},{text:F,operator:"gt"},{text:K,operator:"lte"},{text:P,operator:"lt"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],ne=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:H,operator:"gte"},{text:B,operator:"gt"},{text:q,operator:"lt"},{text:j,operator:"lte"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],le=[{text:A,operator:""},{text:z,operator:!0},{text:M,operator:!1}];function se(e,t){return{clearButtonTitle:e.toLanguageString(I,_[I]),operators:t.map((t=>({text:e.toLanguageString(t.text,_[t.text]),operator:t.operator})))}}const ie=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.value})}),[e.onChange,e.dataItem,e.level,e.field]),a=r.useTableKeyboardNavigation(e.id),n=o.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...a,[b]:e.colIndex},p.createElement("input",{style:{width:"100%"},className:"k-input",value:o.getNestedValue(e.field,e.dataItem)||"",onChange:t}));return e.render?e.render.call(void 0,l,e):l};ie.displayName="KendoReactTreeListTextEditor";const de=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})}),[e.onChange,e.dataItem,e.level,e.field]),a=o.getNestedValue(e.field,e.dataItem),n=r.useTableKeyboardNavigation(e.id),l=o.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement(d.NumericTextBox,{width:"100%",value:void 0===a?null:a,onChange:t}));return e.render?e.render.call(void 0,s,e):s};de.displayName="KendoReactTreeListNumericEditor";const ce=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.checked})}),[e.onChange,e.dataItem,e.level,e.field]),a=o.useId(),n=r.useTableKeyboardNavigation(e.id),l=o.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement("input",{checked:o.getNestedValue(e.field,e.dataItem)||!1,id:a,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:a}));return e.render?e.render.call(void 0,s,e):s};ce.displayName="KendoReactTreeListBooleanEditor";const he=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})}),[e.onChange,e.dataItem,e.level,e.field]),a=r.useTableKeyboardNavigation(e.id),n=o.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...a,[b]:e.colIndex},p.createElement(c.DatePicker,{width:"100%",value:o.getNestedValue(e.field,e.dataItem),onChange:t}));return e.render?e.render.call(void 0,l,e):l};he.displayName="KendoReactTreeListDateEditor",Object.defineProperty(e,"getNestedValue",{enumerable:!0,get:function(){return o.getNestedValue}}),Object.defineProperty(e,"mapTree",{enumerable:!0,get:function(){return o.mapTree}}),Object.defineProperty(e,"mapTreeItem",{enumerable:!0,get:function(){return o.mapTreeItem}}),Object.defineProperty(e,"createDataTree",{enumerable:!0,get:function(){return r.createDataTree}}),Object.defineProperty(e,"extendDataItem",{enumerable:!0,get:function(){return r.extendDataItem}}),Object.defineProperty(e,"filterBy",{enumerable:!0,get:function(){return r.filterBy}}),Object.defineProperty(e,"flatData",{enumerable:!0,get:function(){return r.flatData}}),Object.defineProperty(e,"getItemPath",{enumerable:!0,get:function(){return r.getItemPath}}),Object.defineProperty(e,"getSelectedState",{enumerable:!0,get:function(){return r.getSelectedState}}),Object.defineProperty(e,"getSelectedStateFromKeyDown",{enumerable:!0,get:function(){return r.getSelectedStateFromKeyDown}}),Object.defineProperty(e,"modifySubItems",{enumerable:!0,get:function(){return r.modifySubItems}}),Object.defineProperty(e,"moveTreeItem",{enumerable:!0,get:function(){return r.moveTreeItem}}),Object.defineProperty(e,"orderBy",{enumerable:!0,get:function(){return r.orderBy}}),Object.defineProperty(e,"removeItems",{enumerable:!0,get:function(){return r.removeItems}}),Object.defineProperty(e,"setSelectedState",{enumerable:!0,get:function(){return r.setSelectedState}}),Object.defineProperty(e,"treeToFlat",{enumerable:!0,get:function(){return r.treeToFlat}}),e.TREELIST_COL_INDEX_ATTRIBUTE=b,e.TREELIST_PREVENT_SELECTION_ELEMENT=C,e.TREELIST_ROW_INDEX_ATTRIBUTE=v,e.TreeList=G,e.TreeListBooleanEditor=ce,e.TreeListBooleanFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.BooleanFilterCell,{ariaLabel:"boolean filter",...se(n.useLocalization(),t||le),...a})},e.TreeListCell=x,e.TreeListDateEditor=he,e.TreeListDateFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.DateFilterCell,{ariaLabel:"date filter",...se(n.useLocalization(),t||ne),...a})},e.TreeListDraggableRow=te,e.TreeListHeaderCell=e=>p.createElement(r.HeaderCell,{...e}),e.TreeListHeaderSelectionCell=J,e.TreeListNoRecords=U,e.TreeListNumericEditor=de,e.TreeListNumericFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.NumericFilterCell,{ariaLabel:"numeric filter",...se(n.useLocalization(),t||re),...a})},e.TreeListRow=W,e.TreeListSelectionCell=Y,e.TreeListTextEditor=ie,e.TreeListTextFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.TextFilterCell,{ariaLabel:"text filter",...se(n.useLocalization(),t||oe),...a})},e.TreeListToolbar=ae,e.setHeaderRowsTop=g,e.tableRowsVirtualization=f}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-data-tools"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons"),require("react-dom"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-inputs"),require("@progress/kendo-react-dateinputs")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-data-tools","@progress/kendo-react-intl","@progress/kendo-svg-icons","react-dom","@progress/kendo-react-buttons","@progress/kendo-react-inputs","@progress/kendo-react-dateinputs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreelist={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactDataTools,e.KendoReactIntl,e.KendoSvgIcons,e.ReactDOM,e.KendoReactButtons,e.KendoReactInputs,e.KendoReactDateinputs)}(this,(function(e,t,a,o,r,n,l,s,i,d,c){"use strict";function h(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var p=h(t),u=h(s);function g(e,t,a){const o=Array.from(e.tHead&&e.tHead.rows||[]),r=[t];let n;const l=a||(e=>window.getComputedStyle(e).height||void 0);o.forEach((e=>{const t=l(e);r.push(function(e){return void 0!==e&&("number"==typeof e||/px$/i.test(String(e)))}(t)?parseFloat(String(t)):e.offsetHeight)}));for(let e=0;e<o.length;e++)n=r.slice(0,e+1).reduce(((e,t)=>e+t)),Array.from(o[e].cells).forEach((e=>e.style.top=n+"px"))}const m=1e6;function f(e){const{rows:t,tableViewPortHeight:a,scrollTop:o}=e;if(0===t.length)return[];const r=t[0].height,n=Math.min(Math.round(o/r),t.length),l=Math.round(a/r),s=Math.max(0,n-l),i=Math.min(t.length,n+2*l),d=t.slice(s,i),c=d[d.length-1];return s>0&&d.unshift({dataItem:{},level:[m],offsetTop:0,height:d[0].offsetTop,levelCount:0}),i<t.length-1&&d.push({dataItem:{},level:[m,m],offsetTop:c.offsetTop+c.height,height:(t.length-i)*r,levelCount:0}),d}const v=r.TABLE_ROW_INDEX_ATTRIBUTE,b=r.TABLE_COL_INDEX_ATTRIBUTE,C=r.TABLE_PREVENT_SELECTION_ELEMENT,x=e=>{const{hasChildren:t,level:a=[0],expanded:s,dataItem:i,format:d,id:c,ariaColumnIndex:h,isSelected:u}=e,g=o.getNestedValue(e.field,i),m=n.useInternationalization(),f=r.useTableKeyboardNavigation(c);let v="";const x=p.useCallback((t=>{t.isDefaultPrevented()||t.keyCode===o.Keys.enter&&e.expandable&&(t.preventDefault(),e.onExpandChange(t,i,a))}),[e.expandable,i,a]);null!=g&&(v=d?m.format(d,g):g.toString());const I=[];if(e.expandable){const r=e=>p.createElement("span",{key:e,className:"k-treelist-toggle k-icon k-svg-icon"},p.createElement("svg",{"aria-hidden":"true",focusable:"false",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"}));I.push(...a.slice(1).map(((e,t)=>r(t)))),t?I.push(p.createElement(o.IconWrap,{className:"k-treelist-toggle",name:s?"caret-alt-down":"caret-alt-right",icon:s?l.caretAltDownIcon:l.caretAltRightIcon,key:"expand-collapse",onClick:t=>e.onExpandChange(t.syntheticEvent||t,i,a),[C]:!0})):I.push(r(I.length))}const y=p.createElement("td",{style:e.style,className:o.classNames("k-table-td",e.className,{"k-text-nowrap":e.expandable,"k-selected":u}),colSpan:e.colSpan,"aria-colindex":h,"aria-expanded":t?s:void 0,"aria-selected":u,role:"gridcell",onKeyDown:x,[b]:e.colIndex,...f},I,v);return e.render?e.render.call(void 0,y,e):y};x.displayName="KendoReactTreeListCell";const I="treelist.filterClearButton",y="treelist.filterEqOperator",E="treelist.filterNotEqOperator",S="treelist.filterIsNullOperator",R="treelist.filterIsNotNullOperator",k="treelist.filterIsEmptyOperator",w="treelist.filterIsNotEmptyOperator",T="treelist.filterStartsWithOperator",N="treelist.filterContainsOperator",D="treelist.filterNotContainsOperator",L="treelist.filterEndsWithOperator",O="treelist.filterGteOperator",F="treelist.filterGtOperator",K="treelist.filterLteOperator",P="treelist.filterLtOperator",z="treelist.filterIsTrue",M="treelist.filterIsFalse",A="treelist.filterBooleanAll",H="treelist.filterAfterOrEqualOperator",B="treelist.filterAfterOperator",q="treelist.filterBeforeOperator",j="treelist.filterBeforeOrEqualOperator",V="treelist.noRecords",_={[I]:"Clear",[y]:"Is equal to",[E]:"Is not equal to",[S]:"Is null",[R]:"Is not null",[k]:"Is empty",[w]:"Is not empty",[T]:"Starts with",[N]:"Contains",[D]:"Does not contain",[L]:"Ends with",[O]:"Is greater than or equal to",[F]:"Is greater than",[K]:"Is less than or equal to",[P]:"Is less than",[z]:"Is true",[M]:"Is false",[A]:"(All)",[H]:"Is after or equal to",[B]:"Is after",[q]:"Is before",[j]:"Is before or equal to",[V]:"No records available"};let U=class extends p.Component{render(){return this.props.children||n.provideLocalizationService(this).toLanguageString(V,_[V])}};n.registerForLocalization(U);const W=p.forwardRef(((e,t)=>{const{isSelected:a,rowHeight:r,isAltRow:n,expanded:l,ariaRowIndex:s,level:i,ariaSetSize:d,ariaPosInSet:c}=e,h=o.classNames("k-table-row","k-master-row",{"k-selected":a,"k-alt":n}),u=p.useMemo((()=>void 0!==r?{height:r+"px"}:void 0),[r]),g=p.createElement("tr",{onClick:e.onClick,onDoubleClick:e.onDoubleClick,onContextMenu:e.onContextMenu,className:h,style:u,ref:t,"aria-expanded":l,role:"row","aria-rowindex":s,"aria-level":i.length,"aria-posinset":c,"aria-setsize":d,[v]:e.rowIndex},e.children);return p.createElement(p.Fragment,null,e.render?e.render.call(void 0,g,e):g)}));W.displayName="KendoReactTreeListRow";const $={name:"@progress/kendo-react-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},X=class extends p.Component{constructor(e){super(e),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.scrollIntoView=e=>{if(!this.element)return;const{rowIndex:t=0}=e,{scrollable:a,rowHeight:o=0}=this.props;if("virtual"===a||o)this.element.scroll(0,(t-1)*o);else{const e=this.element.querySelector(`tbody > tr:nth-child(${t})`);if(e){const t=e.offsetTop-this.tbodyOffsetTop;this.element.scroll(0,t)}}},this.getExtendedColumn=o.memoizeOne(((e,t)=>r.readColumns(e,{prevId:0,idPrefix:t}))),this.getColumnsMap=o.memoizeOne(((e,t)=>r.mapColumns(e,t))),this.onKeyDown=e=>{if(r.tableKeyboardNavigation.onKeyDown(e,{navigatable:!1,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),this.props.onKeyDown){const{mode:t,cell:a}=r.getSelectionOptions(this.props.selectable),o={dataItems:this.getLeafDataItems(),mode:t,cell:a,componentId:this._treeListId,selectedField:this.props.selectedField,...this.getArguments(e)};this.props.onKeyDown.call(void 0,o)}},this.onFocus=e=>{r.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,a)=>{const o=this.extendedColumn[e].depth,r=e=>{do{e++}while(e<this.extendedColumn.length&&this.extendedColumn[e].depth>o);return e},n=this.extendedColumn.splice(e,r(e)-e);if(this.extendedColumn.splice(e<t?r(t-n.length):t,0,...n),this.extendedColumn.filter((e=>e.declarationIndex>=0)).forEach(((e,t)=>e.orderIndex=t)),this.props.onColumnReorder){const e={target:this,columns:this.columns,nativeEvent:a};this.props.onColumnReorder.call(void 0,e)}},this.onResize=(e,t,a,o,r)=>{if(this.props.onColumnResize){const n=this.extendedColumn.filter((e=>0===e.children.length)).reduce(((e,t)=>e+parseFloat(String(t.width))),0),l={columns:this.columns,totalWidth:n,index:e,nativeEvent:o,newWidth:t,oldWidth:a,end:r,target:this};this.props.onColumnResize.call(void 0,l)}},this.handleOnScroll=e=>{const t=e.currentTarget.scrollLeft,a=e.currentTarget.scrollTop,{columnVirtualization:o,scrollable:r,rowHeight:n=0}=this.props,l=n;let s=!1;o&&Math.abs(this.wrapperScrollLeft-t)>0&&(this.wrapperScrollLeft=t,s=!0),"virtual"===r&&Math.abs(this.wrapperScrollTop-a)>l&&(this.wrapperScrollTop=a,s=!0),s&&(this.updateOnScroll=!0,this.forceUpdate())},this.calculateSizes=e=>{if(!e||"none"===this.props.scrollable)return;const t=Array.from(e.childNodes),a=t.find((e=>"TABLE"===e.nodeName)),o=this.props.toolbar&&t.find((e=>1===e.nodeType&&e.classList.contains("k-grid-toolbar")));let r=0;if(o){const e=o.style.boxSizing;o.style.boxSizing="border-box",r=parseFloat(String(window.getComputedStyle(o).height))||o.offsetHeight,o.style.boxSizing=e,o.getAttribute("style")||o.removeAttribute("style")}this.tbodyOffsetTop=a.tBodies[0].offsetTop,g(a,r)},this.itemChange=e=>{const t=this.props.onItemChange;if(e.field!==this.props.expandField){if(t){const a={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,field:e.field,value:e.value};t.call(void 0,a)}}else{const t=this.props.onExpandChange;if(t){const a={...this.getArguments(e.syntheticEvent),dataItem:e.dataItem,level:e.level,value:e.value};t.call(void 0,a)}}},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,a)=>{this.raiseDataEvent(this.props.onSortChange,{sort:t,field:a},e)},this.headerFilterChange=(e,t,a)=>{this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:a},e)},this.filterChange=e=>{const{filter:t,field:a}=e;this.raiseDataEvent(this.props.onFilterChange,{filter:t,field:a},e.syntheticEvent)},this.columnMenuFilterChange=(e,t,a)=>{const{onColumnMenuFilterChange:o}=this.props;if(!o)return;const r={syntheticEvent:e,filter:t,field:a,target:this,nativeEvent:e.nativeEvent};o.call(void 0,r)},this.expandChange=(e,t,a)=>{const{expandField:o,onExpandChange:r}=this.props;if(o&&r){const o={...this.getArguments(e),dataItem:t,level:a,value:this.expanded(t)};r.call(void 0,o)}},this.rowClick=(e,t)=>{if(this.props.onRowClick&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowClick.call(void 0,a)}},this.rowDoubleClick=(e,t)=>{if(this.props.onRowDoubleClick&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowDoubleClick.call(void 0,a)}},this.rowContextMenu=(e,t)=>{if(this.props.onRowContextMenu&&"TD"===e.target.nodeName){const a={dataItem:t.dataItem,level:t.level,...this.getArguments(e)};this.props.onRowContextMenu.call(void 0,a)}},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(...o.getNestedValue(this.props.subItemsField,e)),t},this.getLeafDataItems=()=>this.flatData.map((e=>e.dataItem)),this.expanded=e=>!!o.getNestedValue(this.props.expandField,e),this.hasChildren=e=>!!o.getNestedValue(this.props.subItemsField,e),this.showLicenseWatermark=!o.validatePackage($,{component:"TreeList"}),this.dragLogic=new r.CommonDragLogic(this.columnReorder,o.noop,o.noop),this.columnResize=new r.ColumnResize(this.onResize.bind(this)),r.tableKeyboardNavigation.onConstructor({navigatable:!!e.navigatable,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}get _treeListId(){return this.props.id+"-treelist"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}componentDidMount(){this.calculateSizes(this.element),r.tableKeyboardNavigation.onComponentDidMount({scope:this.element||void 0,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef})}getSnapshotBeforeUpdate(){return r.tableKeyboardNavigation.onGetSnapshotBeforeUpdate({document:this.document,contextStateRef:this.contextStateRef,navigationStateRef:this.navigationStateRef}),null}componentDidUpdate(e){e.columns!==this.props.columns&&this.calculateSizes(this.element),r.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:e=[],filterRow:t,scrollable:a="scrollable",resizable:n=!1,reorderable:l=!1,skip:s,take:i}=this.props,d=e.some((e=>!!e.filter||!!e.filterCell))||void 0!==t,c=t||r.FilterRow,h=r.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef),u=this.getExtendedColumn(e,h),g=u.length!==this.extendedColumn.length;this.extendedColumn=u,this.columnsMap=this.getColumnsMap(this.extendedColumn,g);const m=this.extendedColumn.filter((e=>0===e.children.length));this.columnResize.columns=this.extendedColumn,this.columnResize.resizable=n,this.dragLogic.columns=this.extendedColumn,this.dragLogic.reorderable=l,this.dragLogic.groupable=!1;const v=p.createElement(r.Header,{headerRow:p.createElement(r.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}),reorderable:this.props.reorderable,filterRow:d&&p.createElement(c,{columns:m,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:C,hiddenColumns:I}=r.tableColumnsVirtualization({enabled:this.props.columnVirtualization,columns:m,scrollLeft:this.wrapperScrollLeft,tableViewPortWidth:parseFloat((b.width||"").toString())}),y=(e,t,a,o,n,l)=>m.map(((s,i)=>{if(I[i])return null;const d=s.id?s.id:i,c=`${s.className?s.className+" ":""}${s.locked?"k-grid-content-sticky":""}`,u={id:r.tableKeyboardNavigationTools.generateNavigatableId(`${a}-${String(i)}`,h),colSpan:C[i],dataItem:e.dataItem,field:s.field,format:s.format,className:c||void 0,render:this.props.cellRender,onChange:this.itemChange,selectionChange:this.props.onSelectionChange?t=>{this.selectionChange({event:t,item:e,columnIndex:i,dataIndex:n})}:void 0,level:e.level,expandable:s.expandable,expanded:o,hasChildren:this.hasChildren(e.dataItem),onExpandChange:this.expandChange,colIndex:i,ariaColumnIndex:s.ariaColumnIndex,style:void 0!==s.left&&{left:s.left,right:s.right,borderRightWidth:s.rightBorder?"1px":""}||{},isSelected:Array.isArray(l)&&l.indexOf(i)>-1};return t&&s.editCell?p.createElement(s.editCell,{key:d,...u,onChange:this.itemChange}):s.cell?p.createElement(s.cell,{key:d,...u}):p.createElement(x,{key:d,...u})}));let E=this.flatData;const S=E.length;void 0!==s&&void 0!==i&&(E=E.slice(s,s+i)),"virtual"===a&&(E=f({rows:E,tableViewPortHeight:parseFloat((b.height||b.maxHeight||"").toString()),scrollTop:this.wrapperScrollTop}),this.updateOnScroll=!1);const R=E.map((e=>e.level)),k=this.columnsMap.length+(d?1:0)+1,w=E.length>0&&E.map(((e,t)=>{const r=o.getNestedValue(this.props.editField,e.dataItem),n=this.props.dataItemKey&&o.getter(this.props.dataItemKey)(e.dataItem),l=String(n||e.level.join(".")),s=this.expanded(e.dataItem),i=this.props.selectedField?o.getNestedValue(this.props.selectedField,e.dataItem):void 0,d={key:l,level:e.level,levels:R,dataItem:e.dataItem,selectedField:this.props.selectedField,rowHeight:"virtual"===a?e.height:this.props.rowHeight,render:this.props.rowRender,onDrop:this.onRowDrop,onDrag:this.onRowDrag,onClick:t=>this.rowClick(t,e),onDoubleClick:t=>this.rowDoubleClick(t,e),onContextMenu:t=>this.rowContextMenu(t,e),isAltRow:t%2!=0,expanded:s,rowIndex:t,ariaRowIndex:k+t,ariaSetSize:e.levelCount,ariaPosInSet:e.level[e.level.length-1]+1,isSelected:"boolean"==typeof i&&i},c=this.props.editRow,h=this.props.row||W,u=y(e,r,l,s,t,i);return r&&c?p.createElement(c,{...d,key:d.key},u):p.createElement(h,{...d,key:d.key},u)}))||p.createElement("tr",{className:"k-table-row k-grid-norecords"},p.createElement("td",{colSpan:m.length},this.props.noRecords||p.createElement(U,null))),T=e=>this.props.sort&&this.props.sort.some((t=>t.field===e)),N=p.createElement("colgroup",{ref:e=>{this.columnResize.colGroupMain=e}},m.map(((e,t)=>p.createElement("col",{key:t.toString(),className:T(e.field)?"k-sorted":void 0,style:void 0!==e.width?{width:e.width}:void 0})))),D=this.props.columnVirtualization||"virtual"===this.props.scrollable,L=this.props.selectable&&this.props.selectable.drag?"none":void 0,O=this.props.tableProps||{};return p.createElement(r.TableKeyboardNavigationContext.Provider,{value:this.contextStateRef.current},p.createElement("div",{id:this.props.id,style:this.props.style,className:o.classNames("k-grid k-grid-md","k-treelist",this.props.className,{"k-treelist-scrollable":"none"!==a}),ref:e=>{this.element=e},onScroll:D?this.handleOnScroll:void 0,onKeyDown:this.onKeyDown,onFocus:this.onFocus,"aria-rowcount":S,"aria-colcount":m.length,role:"treegrid",...r.tableKeyboardNavigationScopeAttributes},this.props.toolbar,p.createElement(r.TableSelection,{selectable:this.props.selectable,onRelease:this.selectionRelease},p.createElement("table",{className:"k-table k-table-md k-grid-table",...O,style:{...O.style||{},userSelect:L},role:"presentation"},N,v,p.createElement("tbody",{className:"k-table-tbody",...r.tableKeyboardNavigationBodyAttributes,role:"presentation"},w))),this.props.pager&&p.createElement(this.props.pager,{className:"k-grid-pager",total:S,skip:s,take:i,onPageChange:this.onPageChange}),l&&p.createElement(p.Fragment,null,p.createElement(r.DropClue,{ref:this.dragLogic.refDropElementClue}),p.createElement(r.DragClue,{ref:this.dragLogic.refDragElementClue})),this.showLicenseWatermark&&p.createElement(o.WatermarkOverlay,null)))}get columns(){const e=this.extendedColumn.filter((e=>e.declarationIndex>=0&&-1===e.parentIndex)),t=e=>(e.sort(((e,t)=>e.declarationIndex-t.declarationIndex)),e.map((e=>{const{declarationIndex:a,parentIndex:o,depth:r,colSpan:n,rowSpan:l,index:s,kFirst:i,groupable:d,children:c,...h}=e;return c.length?{children:t(c),...h}:h})));return t(e)}get flatData(){const{data:e=[],rowHeight:t=0}=this.props;let a=0;const o=this.updateOnScroll&&this.prevData===e&&this.tbodyOffsetTop>0&&this.flattedData.length?this.flattedData:r.flatData(e,this.expandedSubItems,(e=>{const o={height:t,offsetTop:a};return a+=o.height,o}));return this.prevData=e,this.flattedData=o,o}selectionChange(e){if(this.props.onSelectionChange){const{event:t,item:a,dataIndex:o,columnIndex:n}=e,{mode:l,cell:s}=r.getSelectionOptions(this.props.selectable),i={...this.getArguments(t.syntheticEvent),dataItem:a.dataItem,level:a.level,startColIndex:n,endColIndex:n,startRowIndex:o,endRowIndex:o,dataItems:this.getLeafDataItems(),altKey:!1,ctrlKey:!1,shiftKey:!1,metaKey:!1,mode:l,cell:s,isDrag:!1,componentId:this._treeListId,selectedField:this.props.selectedField||""};this.props.onSelectionChange.call(void 0,i)}}raiseDataEvent(e,t,a){const o=this.props.onDataStateChange;if(e)e.call(void 0,{...this.getArguments(a),...t});else if(o){const e={...this.getArguments(a),dataState:{...this.getDataState(),...t}};o.call(void 0,e)}}getDataState(){return{filter:this.props.filter,sort:this.props.sort}}getArguments(e){return{nativeEvent:e&&e.nativeEvent,syntheticEvent:e,target:this}}};X.propTypes={data:a.array,resizable:a.bool,reorderable:a.bool,sortable:a.oneOfType([a.bool,a.shape({mode:a.oneOf(["single","multiple"]),allowUnsort:a.bool})]),onSortChange:a.func,sort:a.array,columns:a.arrayOf(a.object),columnVirtualization:a.bool,filter:a.array,onFilterChange:a.func,filterRow:a.any,toolbar:a.any,noRecords:a.any,onExpandChange:a.func,expandField:a.string,subItemsField:a.string,selectedField:a.string,onSelectionChange:a.func,onHeaderSelectionChange:a.func,onRowClick:a.func,onItemChange:a.func,editField:a.string,scrollable:a.oneOf(["none","scrollable","virtual"]),rowHeight:a.number,style:a.object,tableProps:a.object,pager:a.any,skip:a.number,take:a.number,onPageChange:a.func,onDataStateChange:a.func,onColumnResize:a.func,onColumnReorder:a.func,dataItemKey:a.string,navigatable:a.bool},X.contextType=r.TableKeyboardNavigationContext;let G=X;const Y=e=>{const t=p.useCallback((t=>{e.selectionChange&&e.selectionChange({syntheticEvent:t})}),[e.selectionChange]),a=o.useId(),n=o.getNestedValue(e.field,e.dataItem),l=r.useTableKeyboardNavigation(e.id),s=p.createElement("td",{style:e.style,className:o.classNames("k-table-td",e.className),"aria-colindex":e.ariaColumnIndex,role:"gridcell",...l},p.createElement("input",{checked:"boolean"==typeof n&&n,id:a,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:a}));return e.render?e.render.call(void 0,s,e):s};Y.displayName="KendoReactTreeListSelectionCell";let J=class extends p.Component{constructor(){super(...arguments),this._inputId=o.guid()}render(){return p.createElement(r.HeaderSelectionCell,{inputId:this._inputId,...this.props})}};const Q=e=>e.visible&&o.canUseDOM?u.createPortal(p.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"}},p.createElement(o.IconWrap,{className:o.classNames("k-drag-status"),name:e.allowDrop?"plus":"cancel",icon:e.allowDrop?l.plusIcon:l.cancelIcon}),e.text),document.body):null;function Z(e,t,a){const o=a?a.elementFromPoint(e.clientX,e.clientY):null;return t&&o?o.closest(t):null}const ee={visible:!1,top:0,left:0,text:"",allowDrop:!1};let te=class extends p.Component{constructor(){super(...arguments),this.state={clueProps:{...ee}},this.draggable=p.createRef(),this.dragged=null,this.draggedOver=null,this.onPress=()=>this.dragged=this.props.level,this.onDrag=e=>{if(!o.canUseDOM)return;const t=this.draggable.current&&this.draggable.current.element,a=t?t.ownerDocument:document;if(!a)return;const r=e.event,n=this.dragged;if(t&&n){!r.isTouch&&"scroll"!==r.type&&r.originalEvent.preventDefault();const e=this.props.levels[function(e,t,a){if(!e.originalEvent)return-1;const o=Z(e,"tr",a);if(o){const e=t?t.childNodes:[];for(let t=0;t<e.length;t++)if(e[t]===o)return t}return-1}(r,t.parentNode,a)];this.draggedOver=e;const o=e?!n.every(((t,a)=>t===e[a])):!!Z(r,"k-grid k-grid-md",a);this.setState({clueProps:{visible:!0,top:r.pageY+10,left:r.pageX,text:t.innerText,allowDrop:o}}),this.props.onDrag&&this.props.onDrag.call(void 0,{nativeEvent:r.originalEvent,dragged:n,draggedOver:e,draggedItem:this.props.dataItem})}},this.onRelease=e=>{const t=e.event;if(this.dragged){const e=[...this.dragged],a=this.draggedOver&&[...this.draggedOver],o=this.state.clueProps.allowDrop;this.dragged=null,this.draggedOver=null,this.setState({clueProps:{...ee}});const r=this.props.dataItem;o&&this.props.onDrop&&this.props.onDrop.call(void 0,{nativeEvent:t.originalEvent,dragged:e,draggedOver:a,draggedItem:r})}}}render(){const{clueProps:e}=this.state;return p.createElement(p.Fragment,null,p.createElement(o.Draggable,{ref:this.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},p.createElement(W,{...this.props})),p.createElement(Q,{...e}))}};const ae=p.forwardRef(((e,t)=>{const{className:a,...r}=e,n=p.useRef(null),l=p.useRef(null);p.useImperativeHandle(l,(()=>({element:n.current,props:e}))),p.useImperativeHandle(t,(()=>l.current));const s=p.useMemo((()=>o.classNames("k-grid-toolbar",a)),[a]);return p.createElement(i.Toolbar,{id:e.id,ref:e=>{e&&(n.current=e.element)},className:s,...r},e.children)}));ae.displayName="KendoReactTreeListToolbar";const oe=[{text:N,operator:"contains"},{text:D,operator:"doesnotcontain"},{text:y,operator:"eq"},{text:E,operator:"neq"},{text:T,operator:"startswith"},{text:L,operator:"endswith"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"},{text:k,operator:"isempty"},{text:w,operator:"isnotempty"}],re=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:O,operator:"gte"},{text:F,operator:"gt"},{text:K,operator:"lte"},{text:P,operator:"lt"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],ne=[{text:y,operator:"eq"},{text:E,operator:"neq"},{text:H,operator:"gte"},{text:B,operator:"gt"},{text:q,operator:"lt"},{text:j,operator:"lte"},{text:S,operator:"isnull"},{text:R,operator:"isnotnull"}],le=[{text:A,operator:""},{text:z,operator:!0},{text:M,operator:!1}];function se(e,t){return{clearButtonTitle:e.toLanguageString(I,_[I]),operators:t.map((t=>({text:e.toLanguageString(t.text,_[t.text]),operator:t.operator})))}}const ie=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.value})}),[e.onChange,e.dataItem,e.level,e.field]),a=r.useTableKeyboardNavigation(e.id),n=o.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...a,[b]:e.colIndex},p.createElement("input",{style:{width:"100%"},className:"k-input",value:o.getNestedValue(e.field,e.dataItem)||"",onChange:t}));return e.render?e.render.call(void 0,l,e):l};ie.displayName="KendoReactTreeListTextEditor";const de=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})}),[e.onChange,e.dataItem,e.level,e.field]),a=o.getNestedValue(e.field,e.dataItem),n=r.useTableKeyboardNavigation(e.id),l=o.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement(d.NumericTextBox,{width:"100%",value:void 0===a?null:a,onChange:t}));return e.render?e.render.call(void 0,s,e):s};de.displayName="KendoReactTreeListNumericEditor";const ce=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t,value:t.target.checked})}),[e.onChange,e.dataItem,e.level,e.field]),a=o.useId(),n=r.useTableKeyboardNavigation(e.id),l=o.classNames({"k-selected":e.isSelected},e.className),s=p.createElement("td",{style:e.style,className:l,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...n,[b]:e.colIndex},p.createElement("input",{checked:o.getNestedValue(e.field,e.dataItem)||!1,id:a,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md",onChange:t}),p.createElement("label",{className:"k-checkbox-label",htmlFor:a}));return e.render?e.render.call(void 0,s,e):s};ce.displayName="KendoReactTreeListBooleanEditor";const he=e=>{const t=p.useCallback((t=>{e.onChange&&e.onChange({dataItem:e.dataItem,level:e.level,field:e.field,syntheticEvent:t.syntheticEvent,value:t.value})}),[e.onChange,e.dataItem,e.level,e.field]),a=r.useTableKeyboardNavigation(e.id),n=o.classNames({"k-selected":e.isSelected},e.className),l=p.createElement("td",{style:e.style,className:n,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,role:"gridcell",...a,[b]:e.colIndex},p.createElement(c.DatePicker,{width:"100%",value:o.getNestedValue(e.field,e.dataItem),onChange:t}));return e.render?e.render.call(void 0,l,e):l};he.displayName="KendoReactTreeListDateEditor",Object.defineProperty(e,"getNestedValue",{enumerable:!0,get:function(){return o.getNestedValue}}),Object.defineProperty(e,"mapTree",{enumerable:!0,get:function(){return o.mapTree}}),Object.defineProperty(e,"mapTreeItem",{enumerable:!0,get:function(){return o.mapTreeItem}}),Object.defineProperty(e,"createDataTree",{enumerable:!0,get:function(){return r.createDataTree}}),Object.defineProperty(e,"extendDataItem",{enumerable:!0,get:function(){return r.extendDataItem}}),Object.defineProperty(e,"filterBy",{enumerable:!0,get:function(){return r.filterBy}}),Object.defineProperty(e,"flatData",{enumerable:!0,get:function(){return r.flatData}}),Object.defineProperty(e,"getItemPath",{enumerable:!0,get:function(){return r.getItemPath}}),Object.defineProperty(e,"getSelectedState",{enumerable:!0,get:function(){return r.getSelectedState}}),Object.defineProperty(e,"getSelectedStateFromKeyDown",{enumerable:!0,get:function(){return r.getSelectedStateFromKeyDown}}),Object.defineProperty(e,"modifySubItems",{enumerable:!0,get:function(){return r.modifySubItems}}),Object.defineProperty(e,"moveTreeItem",{enumerable:!0,get:function(){return r.moveTreeItem}}),Object.defineProperty(e,"orderBy",{enumerable:!0,get:function(){return r.orderBy}}),Object.defineProperty(e,"removeItems",{enumerable:!0,get:function(){return r.removeItems}}),Object.defineProperty(e,"setSelectedState",{enumerable:!0,get:function(){return r.setSelectedState}}),Object.defineProperty(e,"treeToFlat",{enumerable:!0,get:function(){return r.treeToFlat}}),e.TREELIST_COL_INDEX_ATTRIBUTE=b,e.TREELIST_PREVENT_SELECTION_ELEMENT=C,e.TREELIST_ROW_INDEX_ATTRIBUTE=v,e.TreeList=G,e.TreeListBooleanEditor=ce,e.TreeListBooleanFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.BooleanFilterCell,{ariaLabel:"boolean filter",...se(n.useLocalization(),t||le),...a})},e.TreeListCell=x,e.TreeListDateEditor=he,e.TreeListDateFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.DateFilterCell,{ariaLabel:"date filter",...se(n.useLocalization(),t||ne),...a})},e.TreeListDraggableRow=te,e.TreeListHeaderCell=e=>p.createElement(r.HeaderCell,{...e}),e.TreeListHeaderSelectionCell=J,e.TreeListNoRecords=U,e.TreeListNumericEditor=de,e.TreeListNumericFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.NumericFilterCell,{ariaLabel:"numeric filter",...se(n.useLocalization(),t||re),...a})},e.TreeListRow=W,e.TreeListSelectionCell=Y,e.TreeListTextEditor=ie,e.TreeListTextFilter=function(e){const{operators:t,...a}=e;return p.createElement(r.TextFilterCell,{ariaLabel:"text filter",...se(n.useLocalization(),t||oe),...a})},e.TreeListToolbar=ae,e.setHeaderRowsTop=g,e.tableRowsVirtualization=f}));

package/index.d.mts

@@ -26,7 +26,7 @@ import { getNestedValue } from '@progress/kendo-react-common';
 import { getSelectedState } from '@progress/kendo-react-data-tools';
 import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
 import { HeaderCellProps } from '@progress/kendo-react-data-tools';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { mapTree } from '@progress/kendo-react-common';
 import { mapTreeItem } from '@progress/kendo-react-common';
 import { modifySubItems } from '@progress/kendo-react-data-tools';
@@ -220,7 +220,7 @@ export declare class TreeList extends React_2.Component<TreeListProps, {}> {
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private getExtendedColumn;
     private getColumnsMap;
     private get columns();
@@ -265,7 +265,7 @@ export declare const TREELIST_PREVENT_SELECTION_ELEMENT = "data-prevent-selectio
 export declare const TREELIST_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
 
 export declare const TreeListBooleanEditor: {
-    (props: TreeListBooleanEditorProps): JSX_2.Element | null;
+    (props: TreeListBooleanEditorProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -282,7 +282,7 @@ export declare interface TreeListBooleanFilterProps extends FilterComponentProps
 }
 
 export declare const TreeListCell: {
-    (props: TreeListCellProps): JSX_2.Element | null;
+    (props: TreeListCellProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -439,7 +439,7 @@ export declare interface TreeListDataStateChangeEvent extends TreeListEvent {
 }
 
 export declare const TreeListDateEditor: {
-    (props: TreeListDateEditorProps): JSX_2.Element | null;
+    (props: TreeListDateEditorProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -469,7 +469,7 @@ export declare class TreeListDraggableRow extends React_2.Component<TreeListRowP
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private onPress;
     private onDrag;
     private onRelease;
@@ -544,7 +544,7 @@ export declare class TreeListHeaderSelectionCell extends React_2.Component<TreeL
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
 }
 
 export declare interface TreeListHeaderSelectionCellProps extends HeaderCellProps {
@@ -649,43 +649,84 @@ export declare interface TreeListPageChangeEvent extends TreeListEvent {
  */
 export declare interface TreeListProps {
     /**
-     * Sets the TreeList row key prop to the value of this field in the dataItem.
-     * If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.
+     * Sets the unique key for each row in the TreeList. If not set, the row index is used.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
-     * Sets custom CSS classes to the TreeList DOM element.
+     * Adds custom CSS classes to the TreeList container element.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList className="custom-treelist-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets `id` to the TreeList DOM element.
+     * Specifies the `id` attribute of the TreeList container element.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList id="treelist-component" />
+     * ```
      */
     id?: string;
     /**
-     * A collection of `TreeListColumnProps` for creating columns.
+     * Defines the columns of the TreeList using an array of `TreeListColumnProps`.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList columns={[{ field: 'name', title: 'Name' }]} />
+     * ```
      */
     columns?: TreeListColumnProps[];
     /**
-     * Enables the virtualization of the columns
-     * ([see example]({% slug virtual_columns_treelist %})).
-     * If enabled, the columns outside the viewport are not rendered.
+     * Enables column virtualization to improve performance by rendering only visible columns.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList columnVirtualization={true} />
+     * ```
      */
     columnVirtualization?: boolean;
     /**
-     * Sets the data of the TreeList.
+     * Provides the data to be displayed in the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList data={[{ id: 1, name: 'Item 1' }]} />
+     * ```
      */
     data?: any[];
     /**
-     * Enables sorting ([see example]({% slug sorting_treelist %})).
+     * Enables sorting functionality for the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList sortable={{ mode: 'single', allowUnsort: true }} />
+     * ```
      */
     sortable?: SortSettings;
     /**
-     * Fires when the sorting of the TreeList is changed ([see example]({% slug sorting_treelist %})).
-     * You have to handle the event yourself and sort the data.
+     * Triggered when the sorting state changes. The event must be handled to apply sorting.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList onSortChange={(event) => console.log(event.sort)} />
+     * ```
      */
     onSortChange?: (event: TreeListSortChangeEvent) => void;
     /**
-     * The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
+     * Specifies the current sorting descriptors for the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList sort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
      */
     sort?: SortDescriptor[];
     /**
@@ -705,18 +746,15 @@ export declare interface TreeListProps {
      */
     noRecords?: React.ReactElement<TreeListNoRecordsProps>;
     /**
-     * The descriptors by which the data is filtered ([more information and examples]({% slug filtering_treelist %})).
-     * This affects the values and buttons in the `FilterRow` of the TreeList.
+     * Specifies the current filter descriptors for the TreeList.
      */
     filter?: FilterDescriptor[];
     /**
-     * Fires when the TreeList filter is modified through the UI
-     * ([more information and examples]({% slug filtering_treelist %})).
-     * You have to handle the event yourself and filter the data.
+     * Triggered when the filter state changes. The event must be handled to apply filtering.
      */
     onFilterChange?: (event: TreeListFilterChangeEvent) => void;
     /**
-     * Fires when the user clicks on the expand or collapse icon of a row.
+     * Triggered when the user clicks on the expand or collapse icon of a row.
      */
     onExpandChange?: (event: TreeListExpandChangeEvent) => void;
     /**
@@ -728,49 +766,44 @@ export declare interface TreeListProps {
      */
     subItemsField?: string;
     /**
-     * The TreeList selectable settings.
+     * Configures the selection settings for the TreeList.
      */
     selectable?: TreeListSelectableSettings;
     /**
-     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item
-     * ([see example]({% slug selection_treelist %})).
+     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
      */
     selectedField?: string;
     /**
-     * Fires when the user tries to select or deselect a row or cell.
-     * ([more information and example]({% slug selection_treelist %})).
+     * Triggered when the user selects or deselects a row or cell.
      */
     onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
     /**
-     * Fires when the user press keyboard key.
+     * Triggered when the user presses a keyboard key.
      */
     onKeyDown?: (event: TreeListKeyDownEvent) => void;
     /**
-     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`
-     * ([more information and example]({% slug selection_treelist %})).
+     * Triggered when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
      */
     onHeaderSelectionChange?: (event: TreeListHeaderSelectionChangeEvent) => void;
     /**
-     * Fires when the user changes the values of the item.
-     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`
-     * ([more information and examples]({% slug editing_inline_treelist %})).
+     * Triggered when the user changes the values of the item.
+     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
      */
     onItemChange?: (event: TreeListItemChangeEvent) => void;
     /**
-     * Fires when the user clicks a row.
+     * Triggered when the user clicks a row.
      */
     onRowClick?: (event: TreeListRowClickEvent) => void;
     /**
-     * Fires when the user double clicks a row.
+     * Triggered when the user double clicks a row.
      */
     onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
     /**
-     * Fires when the user trigger the context menu of row.
+     * Triggered when the user opens the context menu of a row.
      */
     onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
     /**
-     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item
-     * ([more information and examples]({% slug editing_inline_treelist %})).
+     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item.
      */
     editField?: string;
     /**
@@ -786,19 +819,19 @@ export declare interface TreeListProps {
      */
     scrollable?: ScrollMode;
     /**
-     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
+     * Enables column resizing by dragging the edges of their header cells.
      */
     resizable?: boolean;
     /**
-     * If set to `true`, the user can reorder columns by dragging their header cells.
+     * Enables column reordering by dragging their header cells.
      */
     reorderable?: boolean;
     /**
-     * If set to `true`, the user can drag and drop rows.
+     * Enables row dragging and dropping.
      */
     rowDraggable?: boolean;
     /**
-     * Defines the row height and implements equal heights for all rows.
+     * Specifies the height of each row in the TreeList.
      */
     rowHeight?: number;
     /**
@@ -813,60 +846,59 @@ export declare interface TreeListProps {
     columnMenuFilter?: CompositeFilterDescriptor[];
     onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
     /**
-     * The pager component that the TreeList will render.
+     * Specifies the pager component to be used by the TreeList.
      */
     pager?: React.ComponentType<any>;
     /**
-     * The number of records that will be skipped.
+     * Specifies the number of records to be skipped.
      */
     skip?: number;
     /**
-     * The number of records that will be taken.
+     * Specifies the number of records to be taken.
      */
     take?: number;
     /**
-     * The TreeList row component.
+     * Specifies the row component to be used by the TreeList.
      */
     row?: React.ComponentType<TreeListRowProps>;
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
-     * By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
+     * Enables keyboard navigation for the TreeList.
      */
     navigatable?: boolean;
     /**
-     * Fires when the page of the TreeList is changed.
+     * Triggered when the page state changes. The event must be handled to apply paging.
      */
     onPageChange?: (event: TreeListPageChangeEvent) => void;
     /**
-     * Fires when the data state of the TreeList is changed.
+     * Triggered when the data state changes. The event must be handled to apply the new state.
      */
     onDataStateChange?: (event: TreeListDataStateChangeEvent) => void;
     /**
-     * Fires when a column is resized.
+     * Triggered when a column is resized.
      */
     onColumnResize?: (event: TreeListColumnResizeEvent) => void;
     /**
-     * Fires when the columns are reordered.
+     * Triggered when columns are reordered.
      */
     onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
     /**
-     * Fires when a row is dragged.
+     * Triggered when a row is dragged.
      */
     onRowDrag?: (event: TreeListRowDragEvent) => void;
     /**
-     * Fires when a row is dragged and dropped.
+     * Triggered when a row is dragged and dropped.
      */
     onRowDrop?: (event: TreeListRowDragEvent) => void;
     /**
-     * Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.
+     * Triggered before a row is rendered. Useful for customizing the row rendering.
      */
     rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode;
     /**
-     * Fires when a cell is about to be rendered. Useful for overriding the default rendering of the cell.
+     * Triggered before a cell is rendered. Useful for customizing the cell rendering.
      */
     cellRender?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => React.ReactElement<HTMLTableCellElement> | null;
     /**
-     * Fires when a header cell is about to be rendered. Useful for overriding the default rendering of the header cell.
+     * Triggered before a header cell is rendered. Useful for customizing the header cell rendering.
      */
     headerCellRender?: (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode;
 }
@@ -1063,7 +1095,7 @@ export declare interface TreeListSelectableSettings extends TableSelectableSetti
 }
 
 export declare const TreeListSelectionCell: {
-    (props: TreeListSelectionCellProps): JSX_2.Element | null;
+    (props: TreeListSelectionCellProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -1100,7 +1132,7 @@ export declare interface TreeListSortChangeEvent extends TreeListEvent {
 export declare type TreeListSortSettings = SortSettings;
 
 export declare const TreeListTextEditor: {
-    (props: TreeListTextEditorProps): JSX_2.Element | null;
+    (props: TreeListTextEditorProps): JSX.Element | null;
     displayName: string;
 };
 

package/index.d.ts

@@ -26,7 +26,7 @@ import { getNestedValue } from '@progress/kendo-react-common';
 import { getSelectedState } from '@progress/kendo-react-data-tools';
 import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
 import { HeaderCellProps } from '@progress/kendo-react-data-tools';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { mapTree } from '@progress/kendo-react-common';
 import { mapTreeItem } from '@progress/kendo-react-common';
 import { modifySubItems } from '@progress/kendo-react-data-tools';
@@ -220,7 +220,7 @@ export declare class TreeList extends React_2.Component<TreeListProps, {}> {
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private getExtendedColumn;
     private getColumnsMap;
     private get columns();
@@ -265,7 +265,7 @@ export declare const TREELIST_PREVENT_SELECTION_ELEMENT = "data-prevent-selectio
 export declare const TREELIST_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
 
 export declare const TreeListBooleanEditor: {
-    (props: TreeListBooleanEditorProps): JSX_2.Element | null;
+    (props: TreeListBooleanEditorProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -282,7 +282,7 @@ export declare interface TreeListBooleanFilterProps extends FilterComponentProps
 }
 
 export declare const TreeListCell: {
-    (props: TreeListCellProps): JSX_2.Element | null;
+    (props: TreeListCellProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -439,7 +439,7 @@ export declare interface TreeListDataStateChangeEvent extends TreeListEvent {
 }
 
 export declare const TreeListDateEditor: {
-    (props: TreeListDateEditorProps): JSX_2.Element | null;
+    (props: TreeListDateEditorProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -469,7 +469,7 @@ export declare class TreeListDraggableRow extends React_2.Component<TreeListRowP
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private onPress;
     private onDrag;
     private onRelease;
@@ -544,7 +544,7 @@ export declare class TreeListHeaderSelectionCell extends React_2.Component<TreeL
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
 }
 
 export declare interface TreeListHeaderSelectionCellProps extends HeaderCellProps {
@@ -649,43 +649,84 @@ export declare interface TreeListPageChangeEvent extends TreeListEvent {
  */
 export declare interface TreeListProps {
     /**
-     * Sets the TreeList row key prop to the value of this field in the dataItem.
-     * If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.
+     * Sets the unique key for each row in the TreeList. If not set, the row index is used.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
-     * Sets custom CSS classes to the TreeList DOM element.
+     * Adds custom CSS classes to the TreeList container element.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList className="custom-treelist-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets `id` to the TreeList DOM element.
+     * Specifies the `id` attribute of the TreeList container element.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList id="treelist-component" />
+     * ```
      */
     id?: string;
     /**
-     * A collection of `TreeListColumnProps` for creating columns.
+     * Defines the columns of the TreeList using an array of `TreeListColumnProps`.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList columns={[{ field: 'name', title: 'Name' }]} />
+     * ```
      */
     columns?: TreeListColumnProps[];
     /**
-     * Enables the virtualization of the columns
-     * ([see example]({% slug virtual_columns_treelist %})).
-     * If enabled, the columns outside the viewport are not rendered.
+     * Enables column virtualization to improve performance by rendering only visible columns.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList columnVirtualization={true} />
+     * ```
      */
     columnVirtualization?: boolean;
     /**
-     * Sets the data of the TreeList.
+     * Provides the data to be displayed in the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList data={[{ id: 1, name: 'Item 1' }]} />
+     * ```
      */
     data?: any[];
     /**
-     * Enables sorting ([see example]({% slug sorting_treelist %})).
+     * Enables sorting functionality for the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList sortable={{ mode: 'single', allowUnsort: true }} />
+     * ```
      */
     sortable?: SortSettings;
     /**
-     * Fires when the sorting of the TreeList is changed ([see example]({% slug sorting_treelist %})).
-     * You have to handle the event yourself and sort the data.
+     * Triggered when the sorting state changes. The event must be handled to apply sorting.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList onSortChange={(event) => console.log(event.sort)} />
+     * ```
      */
     onSortChange?: (event: TreeListSortChangeEvent) => void;
     /**
-     * The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
+     * Specifies the current sorting descriptors for the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList sort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
      */
     sort?: SortDescriptor[];
     /**
@@ -705,18 +746,15 @@ export declare interface TreeListProps {
      */
     noRecords?: React.ReactElement<TreeListNoRecordsProps>;
     /**
-     * The descriptors by which the data is filtered ([more information and examples]({% slug filtering_treelist %})).
-     * This affects the values and buttons in the `FilterRow` of the TreeList.
+     * Specifies the current filter descriptors for the TreeList.
      */
     filter?: FilterDescriptor[];
     /**
-     * Fires when the TreeList filter is modified through the UI
-     * ([more information and examples]({% slug filtering_treelist %})).
-     * You have to handle the event yourself and filter the data.
+     * Triggered when the filter state changes. The event must be handled to apply filtering.
      */
     onFilterChange?: (event: TreeListFilterChangeEvent) => void;
     /**
-     * Fires when the user clicks on the expand or collapse icon of a row.
+     * Triggered when the user clicks on the expand or collapse icon of a row.
      */
     onExpandChange?: (event: TreeListExpandChangeEvent) => void;
     /**
@@ -728,49 +766,44 @@ export declare interface TreeListProps {
      */
     subItemsField?: string;
     /**
-     * The TreeList selectable settings.
+     * Configures the selection settings for the TreeList.
      */
     selectable?: TreeListSelectableSettings;
     /**
-     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item
-     * ([see example]({% slug selection_treelist %})).
+     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
      */
     selectedField?: string;
     /**
-     * Fires when the user tries to select or deselect a row or cell.
-     * ([more information and example]({% slug selection_treelist %})).
+     * Triggered when the user selects or deselects a row or cell.
      */
     onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
     /**
-     * Fires when the user press keyboard key.
+     * Triggered when the user presses a keyboard key.
      */
     onKeyDown?: (event: TreeListKeyDownEvent) => void;
     /**
-     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`
-     * ([more information and example]({% slug selection_treelist %})).
+     * Triggered when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
      */
     onHeaderSelectionChange?: (event: TreeListHeaderSelectionChangeEvent) => void;
     /**
-     * Fires when the user changes the values of the item.
-     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`
-     * ([more information and examples]({% slug editing_inline_treelist %})).
+     * Triggered when the user changes the values of the item.
+     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
      */
     onItemChange?: (event: TreeListItemChangeEvent) => void;
     /**
-     * Fires when the user clicks a row.
+     * Triggered when the user clicks a row.
      */
     onRowClick?: (event: TreeListRowClickEvent) => void;
     /**
-     * Fires when the user double clicks a row.
+     * Triggered when the user double clicks a row.
      */
     onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
     /**
-     * Fires when the user trigger the context menu of row.
+     * Triggered when the user opens the context menu of a row.
      */
     onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
     /**
-     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item
-     * ([more information and examples]({% slug editing_inline_treelist %})).
+     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item.
      */
     editField?: string;
     /**
@@ -786,19 +819,19 @@ export declare interface TreeListProps {
      */
     scrollable?: ScrollMode;
     /**
-     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
+     * Enables column resizing by dragging the edges of their header cells.
      */
     resizable?: boolean;
     /**
-     * If set to `true`, the user can reorder columns by dragging their header cells.
+     * Enables column reordering by dragging their header cells.
      */
     reorderable?: boolean;
     /**
-     * If set to `true`, the user can drag and drop rows.
+     * Enables row dragging and dropping.
      */
     rowDraggable?: boolean;
     /**
-     * Defines the row height and implements equal heights for all rows.
+     * Specifies the height of each row in the TreeList.
      */
     rowHeight?: number;
     /**
@@ -813,60 +846,59 @@ export declare interface TreeListProps {
     columnMenuFilter?: CompositeFilterDescriptor[];
     onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
     /**
-     * The pager component that the TreeList will render.
+     * Specifies the pager component to be used by the TreeList.
      */
     pager?: React.ComponentType<any>;
     /**
-     * The number of records that will be skipped.
+     * Specifies the number of records to be skipped.
      */
     skip?: number;
     /**
-     * The number of records that will be taken.
+     * Specifies the number of records to be taken.
      */
     take?: number;
     /**
-     * The TreeList row component.
+     * Specifies the row component to be used by the TreeList.
      */
     row?: React.ComponentType<TreeListRowProps>;
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
-     * By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
+     * Enables keyboard navigation for the TreeList.
      */
     navigatable?: boolean;
     /**
-     * Fires when the page of the TreeList is changed.
+     * Triggered when the page state changes. The event must be handled to apply paging.
      */
     onPageChange?: (event: TreeListPageChangeEvent) => void;
     /**
-     * Fires when the data state of the TreeList is changed.
+     * Triggered when the data state changes. The event must be handled to apply the new state.
      */
     onDataStateChange?: (event: TreeListDataStateChangeEvent) => void;
     /**
-     * Fires when a column is resized.
+     * Triggered when a column is resized.
      */
     onColumnResize?: (event: TreeListColumnResizeEvent) => void;
     /**
-     * Fires when the columns are reordered.
+     * Triggered when columns are reordered.
      */
     onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
     /**
-     * Fires when a row is dragged.
+     * Triggered when a row is dragged.
      */
     onRowDrag?: (event: TreeListRowDragEvent) => void;
     /**
-     * Fires when a row is dragged and dropped.
+     * Triggered when a row is dragged and dropped.
      */
     onRowDrop?: (event: TreeListRowDragEvent) => void;
     /**
-     * Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.
+     * Triggered before a row is rendered. Useful for customizing the row rendering.
      */
     rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode;
     /**
-     * Fires when a cell is about to be rendered. Useful for overriding the default rendering of the cell.
+     * Triggered before a cell is rendered. Useful for customizing the cell rendering.
      */
     cellRender?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => React.ReactElement<HTMLTableCellElement> | null;
     /**
-     * Fires when a header cell is about to be rendered. Useful for overriding the default rendering of the header cell.
+     * Triggered before a header cell is rendered. Useful for customizing the header cell rendering.
      */
     headerCellRender?: (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode;
 }
@@ -1063,7 +1095,7 @@ export declare interface TreeListSelectableSettings extends TableSelectableSetti
 }
 
 export declare const TreeListSelectionCell: {
-    (props: TreeListSelectionCellProps): JSX_2.Element | null;
+    (props: TreeListSelectionCellProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -1100,7 +1132,7 @@ export declare interface TreeListSortChangeEvent extends TreeListEvent {
 export declare type TreeListSortSettings = SortSettings;
 
 export declare const TreeListTextEditor: {
-    (props: TreeListTextEditorProps): JSX_2.Element | null;
+    (props: TreeListTextEditorProps): JSX.Element | null;
     displayName: string;
 };
 

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1743432194,version:"10.2.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-treelist",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745388001,version:"10.2.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1743432194,
-  version: "10.2.0-develop.1",
+  publishDate: 1745388001,
+  version: "10.2.0-develop.11",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-treelist",
-  "version": "10.2.0-develop.1",
+  "version": "10.2.0-develop.11",
   "description": "React TreeList enables the display of self-referencing tabular data. KendoReact TreeList package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -29,13 +29,13 @@
     "@progress/kendo-date-math": "^1.4.1",
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-common": "10.2.0-develop.1",
-    "@progress/kendo-react-data-tools": "10.2.0-develop.1",
-    "@progress/kendo-react-dateinputs": "10.2.0-develop.1",
-    "@progress/kendo-react-dialogs": "10.2.0-develop.1",
-    "@progress/kendo-react-dropdowns": "10.2.0-develop.1",
-    "@progress/kendo-react-inputs": "10.2.0-develop.1",
-    "@progress/kendo-react-intl": "10.2.0-develop.1",
+    "@progress/kendo-react-common": "10.2.0-develop.11",
+    "@progress/kendo-react-data-tools": "10.2.0-develop.11",
+    "@progress/kendo-react-dateinputs": "10.2.0-develop.11",
+    "@progress/kendo-react-dialogs": "10.2.0-develop.11",
+    "@progress/kendo-react-dropdowns": "10.2.0-develop.11",
+    "@progress/kendo-react-inputs": "10.2.0-develop.11",
+    "@progress/kendo-react-intl": "10.2.0-develop.11",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -61,7 +61,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1743432194,
+      "publishDate": 1745388001,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },