@progress/kendo-react-treeview 12.0.0-develop.1 → 12.0.0-develop.11

package/dist/cdn/js/kendo-react-treeview.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-svg-icons"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-animation"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreeview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactAnimation)}(this,(function(e,t,i,s,n,r){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var a=d(t);function o(e,t,i,n,r){switch(n){case s.Keys.left:return s.treeIdUtils.isIdZeroLevel(t)||r.expanded(e)&&s.isEnabledAndAllParentsEnabled(t,i,r)?t:s.treeIdUtils.getDirectParentId(t);case s.Keys.right:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):t;case s.Keys.up:return function(){const e=Number(s.treeIdUtils.getShortId(t)),n=s.treeIdUtils.getDirectParentId(t);return e?c(s.treeIdUtils.createId(e-1,n),i,r):s.treeIdUtils.isIdZeroLevel(t)?t:n}();case s.Keys.down:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):l(t,i,r)||t;case s.Keys.home:return s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID;case s.Keys.end:return function(){let e,t=(i.length-1).toString(),n=i[i.length-1];for(;s.isItemExpandedAndWithChildren(n,r);)e=n[r.getChildrenField()],t=s.treeIdUtils.createId(e.length-1,t),n=e[e.length-1];return t}();default:return t}}function l(e,t,i){const n=s.treeIdUtils.getDirectParentId(e),r=n?s.treeIdUtils.getItemById(n,t,i.getChildrenField()):void 0,d=r?r[i.getChildrenField()]:t,a=Number(s.treeIdUtils.getShortId(e));return a<d.length-1?s.treeIdUtils.createId(a+1,n):r?l(n,t,i):void 0}function c(e,t,i){const n=s.treeIdUtils.getItemById(e,t,i.getChildrenField());return s.isItemExpandedAndWithChildren(n,i)?c(s.treeIdUtils.createId(n[i.getChildrenField()].length-1,e),t,i):e}const h=(e,t)=>{const i=((e,t)=>e===t.length-1)(e,t);return 0!==e||i?i?"bot":"mid":"top"},p="expanded",m="items",u="selected",I="checked",g="checkIndeterminate",f="_kendoItemId",b="_kendoTreeViewGuid",{sizeMap:v}=s.kendoThemeMaps,C=a.createContext((e=>e)),x=class extends a.Component{constructor(){super(...arguments),this.onCheckChange=e=>{this.props.onCheckChange(e,this.item,this.itemId)},this.onExpandChange=e=>{this.props.onExpandChange(e,this.item,this.itemId)},this.onItemClick=e=>{this.props.onItemClick(e,this.item,this.itemId)},this.onPress=e=>{this.props.onPress(e.event,this.item,this.itemId)},this.onDrag=e=>{this.props.onDrag(e.event,this.item,this.itemId)},this.onRelease=e=>{this.props.onRelease(e.event,this.item,this.itemId)},this.onContextMenu=e=>{this.props.onContextMenu(e,this.item,this.itemId)},this.assignDraggableMeta=e=>{e&&(e[f]=this.props.itemId,e[b]=this.props.treeGuid)}}render(){const e=this.renderSubitemsIfApplicable(),t=this.renderItemInPart();return a.createElement("li",{className:s.classNames("k-treeview-item"),tabIndex:this.tabIndex,role:"treeitem","aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":!!this.disabled||void 0,ref:e=>{this.itemElement=e}},a.createElement("span",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?a.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},t):t),e&&(this.props.animate?a.createElement(r.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"},children:e}):e))}componentDidMount(){const e=this.props.focusedItemId,t=this.itemId;e&&e===t&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item))}componentDidUpdate(e){const t=this.props.focusedItemId;if(t&&t!==e.focusedItemId&&t===this.itemId&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement){const e=this.fieldsSvc.checkIndeterminate(this.item);this.checkboxElement.indeterminate!==e&&(this.checkboxElement.indeterminate=e)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return a.createElement("span",{className:s.classNames("k-checkbox-wrap")},a.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${v[e]||e}`]:e,"k-disabled":this.disabled}),"aria-label":this.item.text,checked:!!this.fieldsSvc.checked(this.item),id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:e=>{this.checkboxElement=e}}))}}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&a.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},a.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?a.createElement("ul",{className:"k-treeview-group",role:"group"},e.map(((t,i)=>a.createElement(E,{item:t,position:h(i,e),itemId:s.treeIdUtils.createId(i,this.itemId),treeGuid:this.props.treeGuid,animate:this.props.animate,focusedItemId:this.props.focusedItemId,tabbableItemId:this.props.tabbableItemId,fieldsService:this.props.fieldsService,itemUI:this.props.itemUI,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.props.ariaMultiSelectable,onItemClick:this.props.onItemClick,onFocusDomElNeeded:this.props.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.props.onPress,onDrag:this.props.onDrag,onRelease:this.props.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:i,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl})))):void 0}renderItemInPart(){const e=this.props.iconField,t=e&&this.item[e];return a.createElement("span",{className:s.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled,"k-touch-action-none":this.props.draggable}),onClick:this.onItemClick,onContextMenu:this.onContextMenu},t&&a.createElement(s.IconWrap,{name:t.name,icon:t}),a.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?a.createElement(this.props.itemUI,{item:this.item,itemHierarchicalIndex:this.itemId}):this.fieldsSvc.text(this.item)))}get fieldsSvc(){return this.props.fieldsService}get itemId(){return this.props.itemId}get item(){return this.props.item}get tabIndex(){return(this.props.focusedItemId||this.props.tabbableItemId)===this.itemId?0:-1}get ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0}get disabled(){return this.props.disabled||this.fieldsSvc.disabled(this.item)}get ariaChecked(){if(this.props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"}get ariaSelected(){return!!this.fieldsSvc.selected(this.item)||(this.props.ariaMultiSelectable?!!this.disabled&&void 0:void 0)}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"caret-alt-down",icon:n.caretAltDownIcon}:{name:this.props.isRtl?"caret-alt-left":"caret-alt-right",icon:this.props.isRtl?n.caretAltLeftIcon:n.caretAltRightIcon}}};x.defaultProps={position:"top",iconField:"svgIcon"};let k=x;const E=s.withIdHOC(a.forwardRef(((e,t)=>{const i=a.useContext(C).call(void 0,e);return a.createElement(k,{ref:t,...i})})));E.displayName="TreeViewItem";const F=Object.freeze({name:"@progress/kendo-react-treeview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),{sizeMap:y}=s.kendoThemeMaps,D=class extends a.Component{constructor(e){super(e),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this.showLicenseWatermark=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,t,i)=>{this.setFocus(i),this.dispatchCheckChange(e,t,i)},this.onExpandChange=(e,t,i)=>{this.setFocus(i),this.dispatchExpandChange(e,t,i)},this.onPress=(e,t,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:t,itemHierarchicalIndex:i})},this.onDrag=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onRelease=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onItemClick=(e,t,i)=>{this.setFocus(i),this.dispatchItemClick(e,t,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),void 0===this.state.focusedItemId&&this.data.length&&this.setFocus(this.state.tabbableItemId)},this.onBlur=()=>{clearTimeout(this.blurRequest),this.blurRequest=window.setTimeout((()=>this.setFocus(void 0)),0)},this.onKeyDown=e=>{const t=this.getFocusedItem();if(t&&this.fieldsSvc){const i=o(t,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,t)}},this.onContextMenu=(e,t,i)=>{if(this.props.onContextMenu){const s={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:t,itemID:i};this.props.onContextMenu.call(void 0,s)}},this.showLicenseWatermark=!s.validatePackage(F,{component:"TreeView"}),this.licenseMessage=s.getLicenseMessage(F)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new s.TreeFieldsService(this.props);const{size:e,className:t}=this.props;return a.createElement("div",{id:this.props.id,style:{position:"relative",...this.props.style},className:s.classNames("k-treeview",{[`k-treeview-${y[e]||e}`]:e,"k-user-select-none":this.props.draggable,"k-rtl":"rtl"===this.props.dir},t),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":!!this.ariaMultiSelectable||void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:e=>{this._element=e},tabIndex:this.props.tabIndex},a.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map(((t,i)=>a.createElement(E,{id:this.props.id+"-item-"+i,item:t,position:h(i,this.data),itemId:i.toString(),treeGuid:this.treeGuid,animate:this.props.animate,focusedItemId:this.state.focusedItemId,tabbableItemId:this.state.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:this.props.item,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.ariaMultiSelectable,onItemClick:this.onItemClick,onFocusDomElNeeded:this.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.onExpandChange,onCheckChange:this.onCheckChange,onContextMenu:this.onContextMenu,key:i,size:e,isRtl:"rtl"===this.props.dir})))),this.showLicenseWatermark&&a.createElement(s.WatermarkOverlay,{message:this.licenseMessage}))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(e,t){if(null===this.fieldsSvc)return;const i=()=>this.fieldsSvc&&s.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);e.keyCode===s.Keys.left&&this.fieldsSvc.expanded(t)&&i()||e.keyCode===s.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||s.hasChildren(t,this.props.childrenField))&&i()?this.dispatchExpandChange(e,t,this.state.focusedItemId):e.keyCode===s.Keys.enter&&i()?this.dispatchItemClick(e,t,this.state.focusedItemId):e.keyCode===s.Keys.space&&i()&&(e.preventDefault(),this.dispatchCheckChange(e,t,this.state.focusedItemId))}setFocus(e){if(e&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const t=this.getItemById(e);this.setState({focusedItemId:e,focusedItemPublicId:this.fieldsSvc.focusId(t)})}else this.setState({focusedItemId:e});else this.setState((e=>({focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:e.focusedItemId})))}getFocusedItem(){return this.state.focusedItemId?this.getItemById(this.state.focusedItemId):void 0}getItemById(e){return s.treeIdUtils.getItemById(e,this.data,this.props.childrenField||m)}dispatchCheckChange(e,t,i){s.dispatchEvent(this.props.onCheckChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchExpandChange(e,t,i){s.dispatchEvent(this.props.onExpandChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchItemClick(e,t,i){s.dispatchEvent(this.props.onItemClick,e,this,{item:t,itemHierarchicalIndex:i})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const e=this.state.focusedItemPublicId;if(e){const t=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(e):s.resolveItemId(e,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);t!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:t}))}}}get ariaMultiSelectable(){return!0===this.props["aria-multiselectable"]||"true"===this.props["aria-multiselectable"]}get data(){return this.props.data||[]}focusDomItem(e){e.focus()}get guid(){return this.treeGuid}};D.propTypes={data:i.arrayOf(i.any),animate:i.bool,tabIndex:i.number,focusIdField:i.string,getHierarchicalIndexById:i.func,onExpandChange:i.func,onItemClick:i.func,expandField:i.string,selectField:i.string,iconField:i.string,childrenField:i.string,hasChildrenField:i.string,textField:i.string,disableField:i.string,item:i.any,"aria-multiselectable":(e,t,i)=>void 0!==e[t]&&!0!==e[t]&&!1!==e[t]&&"true"!==e[t]&&"false"!==e[t]?new Error("Invalid prop `"+t+"` supplied to `"+i+"`. Validation failed."):null,"aria-label":i.string,"aria-labelledby":i.string,size:i.oneOf([null,"small","medium","large"]),dir:i.string},D.defaultProps={animate:!0,expandField:p,selectField:u,iconField:"svgIcon",hasChildrenField:"hasChildren",childrenField:m,textField:"text",disableField:"disabled",checkField:I,checkIndeterminateField:g,size:"medium"};let S=D;function w(e,t,i,n,r){if(i){const{ids:d,field:a}=N(i,t);return function(e,t,i,n,r){let d=e;return t.forEach((e=>{d=s.updateItem(d,e,(e=>P(i,e)),n,r)})),d}(e,!s.isArray(i)&&i.idField?s.resolveItemsIds(d,i.idField,e,r):d,a,n,r)}return e}function N(e,t){let i,n;return s.isArray(e)?(i=e,n=t):(i=e.ids||[],n=e.operationField||t),{ids:i,field:n}}function P(e,t){const i=(e||"").split(".");let s=t;for(let e=0;e<i.length;e++){const t=i[e];if(e===i.length-1)s[t]=!0;else{if(void 0===s[t])return;s[t]={...s[t]},s=s[t]}}}function U(e,t,i,n,r){let d=!1;for(let a=0;a<e.length;a++){const o=e[a];if(s.getNestedValue(n,o)){if(!d)for(let e=0;e<t.length;e++)P(r,t[e]);d=!0,o[i]&&U(o[i],[],i,n,r)}else o[i]&&U(o[i],d?[o]:t.concat([o]),i,n,r)}}const M=class extends a.PureComponent{constructor(){super(...arguments),this.state={visible:!1,top:0,left:0,text:"",operationClassName:"cancel"}}render(){const e={top:this.state.top+"px",left:this.state.left+"px"};return this.state.visible&&a.createElement("div",{className:"k-header k-drag-clue",style:{...this.props.style,...e}},a.createElement(s.IconWrap,{className:s.classNames("k-drag-status"),name:this.state.operationClassName&&s.toIconName(this.state.operationClassName),icon:"k-i-plus"===this.state.operationClassName?n.plusIcon:"k-i-insert-up"===this.state.operationClassName?n.insertTopIcon:"k-i-insert-down"===this.state.operationClassName?n.insertBottomIcon:"k-i-insert-middle"===this.state.operationClassName?n.insertMiddleIcon:n.cancelIcon}),this.state.text)}show(e,t,i,s){this.setState({visible:!0,top:e,left:t,text:i,operationClassName:s})}hide(){this.setState({visible:!1})}};M.defaultProps={style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px"}};let R=M;const O=s.withIdHOC(S);O.displayName="KendoReactTreeView",Object.defineProperty(e,"FieldsService",{enumerable:!0,get:function(){return s.TreeFieldsService}}),e.TreeView=O,e.TreeViewClassComponent=S,e.TreeViewDragAnalyzer=class{constructor(e){this.event=e,this.initialized=!1,this.destItemId="",this.destTreeViewGuid="",this.itemId=e.itemHierarchicalIndex,this.treeViewGuid=e.target.guid}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return!!(this.initialized&&this.destItemId&&this.destTreeViewGuid)&&!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`)}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:e,height:t}=this.destDomNodeWithMeta.getBoundingClientRect();return e+t-this.event.clientY<6?"after":this.event.clientY-e<6?"before":"child"}}setDestimationMeta(e){let t=e;for(;t&&!t[f];)t=t.parentNode;t&&t[f]&&(this.destDomNodeWithMeta=t,this.destItemId=t[f],this.destTreeViewGuid=t[b])}},e.TreeViewDragClue=R,e.TreeViewItemPropsContext=C,e.getItemIdUponKeyboardNavigation=o,e.handleTreeViewCheckChange=function(e,t,i,n={},r){if(!i||!i.length)return[];const{ids:d,idField:a}=function(e){let t,i;return s.isArray(e)?t=e:(t=e.ids||[],i=e.idField),{ids:t,idField:i}}(t),o=a?s.getNestedValue(a,e.item):e.itemHierarchicalIndex,l=d.indexOf(o),c=-1===l,h=r||m;let p;return n.singleMode?p=c?[o]:[]:(p=d.slice(),c?p.push(o):p.splice(l,1),n.checkChildren&&function(e,t,i,n,r,d){s.getAllDirectIndirectChildrenIds(e,t,r,n).forEach((e=>{i&&-1===d.indexOf(e)?d.push(e):!i&&d.indexOf(e)>-1&&d.splice(d.indexOf(e),1)}))}(e.item,e.itemHierarchicalIndex,c,a,h,p),n.checkParents&&function(e,t,i,n,r,d){const a=h();let o=a.next();function l(){for(;!o.done;){const{id:e,item:t}=o.value;if(-1!==r.indexOf(e)||!s.areAllDirectChildrenChecked(t,e,i,n,r))break;r.push(e),o=a.next()}}function c(){for(;!o.done;){const{id:e}=o.value,t=r.indexOf(e);if(!(t>-1))break;r.splice(t,1),o=a.next()}}function*h(){if(i){const r=s.getAllParents(e,n,d);for(let e=r.length-1;e>-1;e--)yield{id:s.getNestedValue(i,r[e]),item:t?r[e]:void 0}}else{let i=s.treeIdUtils.getDirectParentId(e);for(;i;)yield{id:i,item:t?s.treeIdUtils.getItemById(i,d,n):void 0},i=s.treeIdUtils.getDirectParentId(i)}}t?l():c()}(e.itemHierarchicalIndex,c,a,h,p,i)),s.isArray(t)?p:Object.assign({},t,{ids:p})},e.moveTreeViewItem=function(e,t,i,n,r,d){const a=d||m;if(!function(){if(!t||!t.length||!e||!n||r&&!r.length)return!1;const i=r&&r!==t?r:t;return!!s.treeIdUtils.getItemById(n,i,a)}())return l();const o=s.treeIdUtils.getItemById(e,t,a);if(!o)return l();if(!r||r===t){if(`${n}_`.startsWith(`${e}_`))return l();const d=s.removeItem(e,a,t),c=s.addItem(o,i,a,s.treeIdUtils.getDecrementedItemIdAfterRemoval(e,n),d);return r?{sourceData:c,targetData:c}:c}return{sourceData:s.removeItem(e,a,t),targetData:s.addItem(o,i,a,n,r)};function l(){return r?{sourceData:t,targetData:r}:t}},e.processTreeViewItems=function(e,t){if(!e||!e.length)return[];let i=e;const n=t.cloneField||"cloned",r=t.expandField||p,d=t.selectField||u,a=t.checkField||I,o=t.childrenField||m;return i=w(i,r,t.expand,n,o),i=w(i,d,t.select,n,o),i=w(i,a,t.check,n,o),function(e,t,i){if(i&&!s.isArray(i)&&i.applyCheckIndeterminate){const{field:n}=N(i,I),r=i.checkIndeterminateField||g;for(let i=0;i<e.length;i++){const d=e[i],a=d[t];a&&U(a,s.getNestedValue(n,d)?[]:[d],t,n,r)}}}(i,o,t.check),i}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-animation"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreeview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactAnimation)}(this,(function(e,t,i,s,n,r){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var a=d(t);function o(e,t,i,n,r){switch(n){case s.Keys.left:return s.treeIdUtils.isIdZeroLevel(t)||r.expanded(e)&&s.isEnabledAndAllParentsEnabled(t,i,r)?t:s.treeIdUtils.getDirectParentId(t);case s.Keys.right:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):t;case s.Keys.up:return function(){const e=Number(s.treeIdUtils.getShortId(t)),n=s.treeIdUtils.getDirectParentId(t);return e?c(s.treeIdUtils.createId(e-1,n),i,r):s.treeIdUtils.isIdZeroLevel(t)?t:n}();case s.Keys.down:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):l(t,i,r)||t;case s.Keys.home:return s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID;case s.Keys.end:return function(){let e,t=(i.length-1).toString(),n=i[i.length-1];for(;s.isItemExpandedAndWithChildren(n,r);)e=n[r.getChildrenField()],t=s.treeIdUtils.createId(e.length-1,t),n=e[e.length-1];return t}();default:return t}}function l(e,t,i){const n=s.treeIdUtils.getDirectParentId(e),r=n?s.treeIdUtils.getItemById(n,t,i.getChildrenField()):void 0,d=r?r[i.getChildrenField()]:t,a=Number(s.treeIdUtils.getShortId(e));return a<d.length-1?s.treeIdUtils.createId(a+1,n):r?l(n,t,i):void 0}function c(e,t,i){const n=s.treeIdUtils.getItemById(e,t,i.getChildrenField());return s.isItemExpandedAndWithChildren(n,i)?c(s.treeIdUtils.createId(n[i.getChildrenField()].length-1,e),t,i):e}const h=(e,t)=>{const i=((e,t)=>e===t.length-1)(e,t);return 0!==e||i?i?"bot":"mid":"top"},p="expanded",m="items",u="selected",I="checked",g="checkIndeterminate",f="_kendoItemId",b="_kendoTreeViewGuid",{sizeMap:v}=s.kendoThemeMaps,C=a.createContext((e=>e)),x=class extends a.Component{constructor(){super(...arguments),this.onCheckChange=e=>{this.props.onCheckChange(e,this.item,this.itemId)},this.onExpandChange=e=>{this.props.onExpandChange(e,this.item,this.itemId)},this.onItemClick=e=>{this.props.onItemClick(e,this.item,this.itemId)},this.onPress=e=>{this.props.onPress(e.event,this.item,this.itemId)},this.onDrag=e=>{this.props.onDrag(e.event,this.item,this.itemId)},this.onRelease=e=>{this.props.onRelease(e.event,this.item,this.itemId)},this.onContextMenu=e=>{this.props.onContextMenu(e,this.item,this.itemId)},this.assignDraggableMeta=e=>{e&&(e[f]=this.props.itemId,e[b]=this.props.treeGuid)}}render(){const e=this.renderSubitemsIfApplicable(),t=this.renderItemInPart();return a.createElement("li",{className:s.classNames("k-treeview-item"),tabIndex:this.tabIndex,role:"treeitem","aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":!!this.disabled||void 0,ref:e=>{this.itemElement=e}},a.createElement("span",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?a.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},t):t),e&&(this.props.animate?a.createElement(r.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"},children:e}):e))}componentDidMount(){const e=this.props.focusedItemId,t=this.itemId;e&&e===t&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item))}componentDidUpdate(e){const t=this.props.focusedItemId;if(t&&t!==e.focusedItemId&&t===this.itemId&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement){const e=this.fieldsSvc.checkIndeterminate(this.item);this.checkboxElement.indeterminate!==e&&(this.checkboxElement.indeterminate=e)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return a.createElement("span",{className:s.classNames("k-checkbox-wrap")},a.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${v[e]||e}`]:e,"k-disabled":this.disabled}),"aria-label":this.item.text,checked:!!this.fieldsSvc.checked(this.item),id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:e=>{this.checkboxElement=e}}))}}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&a.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},a.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?a.createElement("ul",{className:"k-treeview-group",role:"group"},e.map(((t,i)=>a.createElement(E,{item:t,position:h(i,e),itemId:s.treeIdUtils.createId(i,this.itemId),treeGuid:this.props.treeGuid,animate:this.props.animate,focusedItemId:this.props.focusedItemId,tabbableItemId:this.props.tabbableItemId,fieldsService:this.props.fieldsService,itemUI:this.props.itemUI,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.props.ariaMultiSelectable,onItemClick:this.props.onItemClick,onFocusDomElNeeded:this.props.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.props.onPress,onDrag:this.props.onDrag,onRelease:this.props.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:i,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl})))):void 0}renderItemInPart(){const e=this.props.iconField,t=e&&this.item[e];return a.createElement("span",{className:s.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled,"k-touch-action-none":this.props.draggable}),onClick:this.onItemClick,onContextMenu:this.onContextMenu},t&&a.createElement(s.IconWrap,{name:t.name,icon:t}),a.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?a.createElement(this.props.itemUI,{item:this.item,itemHierarchicalIndex:this.itemId}):this.fieldsSvc.text(this.item)))}get fieldsSvc(){return this.props.fieldsService}get itemId(){return this.props.itemId}get item(){return this.props.item}get tabIndex(){return(this.props.focusedItemId||this.props.tabbableItemId)===this.itemId?0:-1}get ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0}get disabled(){return this.props.disabled||this.fieldsSvc.disabled(this.item)}get ariaChecked(){if(this.props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"}get ariaSelected(){return!!this.fieldsSvc.selected(this.item)||(this.props.ariaMultiSelectable?!!this.disabled&&void 0:void 0)}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"caret-alt-down",icon:n.caretAltDownIcon}:{name:this.props.isRtl?"caret-alt-left":"caret-alt-right",icon:this.props.isRtl?n.caretAltLeftIcon:n.caretAltRightIcon}}};x.defaultProps={position:"top",iconField:"svgIcon"};let k=x;const E=s.withIdHOC(a.forwardRef(((e,t)=>{const i=a.useContext(C).call(void 0,e);return a.createElement(k,{ref:t,...i})})));E.displayName="TreeViewItem";const F=Object.freeze({name:"@progress/kendo-react-treeview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.0.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),{sizeMap:y}=s.kendoThemeMaps,D=class extends a.Component{constructor(e){super(e),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this.showLicenseWatermark=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,t,i)=>{this.setFocus(i),this.dispatchCheckChange(e,t,i)},this.onExpandChange=(e,t,i)=>{this.setFocus(i),this.dispatchExpandChange(e,t,i)},this.onPress=(e,t,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:t,itemHierarchicalIndex:i})},this.onDrag=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onRelease=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onItemClick=(e,t,i)=>{this.setFocus(i),this.dispatchItemClick(e,t,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),void 0===this.state.focusedItemId&&this.data.length&&this.setFocus(this.state.tabbableItemId)},this.onBlur=()=>{clearTimeout(this.blurRequest),this.blurRequest=window.setTimeout((()=>this.setFocus(void 0)),0)},this.onKeyDown=e=>{const t=this.getFocusedItem();if(t&&this.fieldsSvc){const i=o(t,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,t)}},this.onContextMenu=(e,t,i)=>{if(this.props.onContextMenu){const s={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:t,itemID:i};this.props.onContextMenu.call(void 0,s)}},this.showLicenseWatermark=!s.validatePackage(F,{component:"TreeView"}),this.licenseMessage=s.getLicenseMessage(F)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new s.TreeFieldsService(this.props);const{size:e,className:t}=this.props;return a.createElement("div",{id:this.props.id,style:{position:"relative",...this.props.style},className:s.classNames("k-treeview",{[`k-treeview-${y[e]||e}`]:e,"k-user-select-none":this.props.draggable,"k-rtl":"rtl"===this.props.dir},t),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":!!this.ariaMultiSelectable||void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:e=>{this._element=e},tabIndex:this.props.tabIndex},a.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map(((t,i)=>a.createElement(E,{id:this.props.id+"-item-"+i,item:t,position:h(i,this.data),itemId:i.toString(),treeGuid:this.treeGuid,animate:this.props.animate,focusedItemId:this.state.focusedItemId,tabbableItemId:this.state.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:this.props.item,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.ariaMultiSelectable,onItemClick:this.onItemClick,onFocusDomElNeeded:this.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.onExpandChange,onCheckChange:this.onCheckChange,onContextMenu:this.onContextMenu,key:i,size:e,isRtl:"rtl"===this.props.dir})))),this.showLicenseWatermark&&a.createElement(s.WatermarkOverlay,{message:this.licenseMessage}))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(e,t){if(null===this.fieldsSvc)return;const i=()=>this.fieldsSvc&&s.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);e.keyCode===s.Keys.left&&this.fieldsSvc.expanded(t)&&i()||e.keyCode===s.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||s.hasChildren(t,this.props.childrenField))&&i()?this.dispatchExpandChange(e,t,this.state.focusedItemId):e.keyCode===s.Keys.enter&&i()?this.dispatchItemClick(e,t,this.state.focusedItemId):e.keyCode===s.Keys.space&&i()&&(e.preventDefault(),this.dispatchCheckChange(e,t,this.state.focusedItemId))}setFocus(e){if(e&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const t=this.getItemById(e);this.setState({focusedItemId:e,focusedItemPublicId:this.fieldsSvc.focusId(t)})}else this.setState({focusedItemId:e});else this.setState((e=>({focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:e.focusedItemId})))}getFocusedItem(){return this.state.focusedItemId?this.getItemById(this.state.focusedItemId):void 0}getItemById(e){return s.treeIdUtils.getItemById(e,this.data,this.props.childrenField||m)}dispatchCheckChange(e,t,i){s.dispatchEvent(this.props.onCheckChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchExpandChange(e,t,i){s.dispatchEvent(this.props.onExpandChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchItemClick(e,t,i){s.dispatchEvent(this.props.onItemClick,e,this,{item:t,itemHierarchicalIndex:i})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const e=this.state.focusedItemPublicId;if(e){const t=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(e):s.resolveItemId(e,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);t!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:t}))}}}get ariaMultiSelectable(){return!0===this.props["aria-multiselectable"]||"true"===this.props["aria-multiselectable"]}get data(){return this.props.data||[]}focusDomItem(e){e.focus()}get guid(){return this.treeGuid}};D.propTypes={data:i.arrayOf(i.any),animate:i.bool,tabIndex:i.number,focusIdField:i.string,getHierarchicalIndexById:i.func,onExpandChange:i.func,onItemClick:i.func,expandField:i.string,selectField:i.string,iconField:i.string,childrenField:i.string,hasChildrenField:i.string,textField:i.string,disableField:i.string,item:i.any,"aria-multiselectable":(e,t,i)=>void 0!==e[t]&&!0!==e[t]&&!1!==e[t]&&"true"!==e[t]&&"false"!==e[t]?new Error("Invalid prop `"+t+"` supplied to `"+i+"`. Validation failed."):null,"aria-label":i.string,"aria-labelledby":i.string,size:i.oneOf([null,"small","medium","large"]),dir:i.string},D.defaultProps={animate:!0,expandField:p,selectField:u,iconField:"svgIcon",hasChildrenField:"hasChildren",childrenField:m,textField:"text",disableField:"disabled",checkField:I,checkIndeterminateField:g,size:"medium"};let S=D;function w(e,t,i,n,r){if(i){const{ids:d,field:a}=N(i,t);return function(e,t,i,n,r){let d=e;return t.forEach((e=>{d=s.updateItem(d,e,(e=>P(i,e)),n,r)})),d}(e,!s.isArray(i)&&i.idField?s.resolveItemsIds(d,i.idField,e,r):d,a,n,r)}return e}function N(e,t){let i,n;return s.isArray(e)?(i=e,n=t):(i=e.ids||[],n=e.operationField||t),{ids:i,field:n}}function P(e,t){const i=(e||"").split(".");let s=t;for(let e=0;e<i.length;e++){const t=i[e];if(e===i.length-1)s[t]=!0;else{if(void 0===s[t])return;s[t]={...s[t]},s=s[t]}}}function U(e,t,i,n,r){let d=!1;for(let a=0;a<e.length;a++){const o=e[a];if(s.getNestedValue(n,o)){if(!d)for(let e=0;e<t.length;e++)P(r,t[e]);d=!0,o[i]&&U(o[i],[],i,n,r)}else o[i]&&U(o[i],d?[o]:t.concat([o]),i,n,r)}}const M=class extends a.PureComponent{constructor(){super(...arguments),this.state={visible:!1,top:0,left:0,text:"",operationClassName:"cancel"}}render(){const e={top:this.state.top+"px",left:this.state.left+"px"};return this.state.visible&&a.createElement("div",{className:"k-header k-drag-clue",style:{...this.props.style,...e}},a.createElement(s.IconWrap,{className:s.classNames("k-drag-status"),name:this.state.operationClassName&&s.toIconName(this.state.operationClassName),icon:"k-i-plus"===this.state.operationClassName?n.plusIcon:"k-i-insert-up"===this.state.operationClassName?n.insertTopIcon:"k-i-insert-down"===this.state.operationClassName?n.insertBottomIcon:"k-i-insert-middle"===this.state.operationClassName?n.insertMiddleIcon:n.cancelIcon}),this.state.text)}show(e,t,i,s){this.setState({visible:!0,top:e,left:t,text:i,operationClassName:s})}hide(){this.setState({visible:!1})}};M.defaultProps={style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px"}};let R=M;const O=s.withIdHOC(S);O.displayName="KendoReactTreeView",Object.defineProperty(e,"FieldsService",{enumerable:!0,get:function(){return s.TreeFieldsService}}),e.TreeView=O,e.TreeViewClassComponent=S,e.TreeViewDragAnalyzer=class{constructor(e){this.event=e,this.initialized=!1,this.destItemId="",this.destTreeViewGuid="",this.itemId=e.itemHierarchicalIndex,this.treeViewGuid=e.target.guid}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return!!(this.initialized&&this.destItemId&&this.destTreeViewGuid)&&!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`)}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:e,height:t}=this.destDomNodeWithMeta.getBoundingClientRect();return e+t-this.event.clientY<6?"after":this.event.clientY-e<6?"before":"child"}}setDestimationMeta(e){let t=e;for(;t&&!t[f];)t=t.parentNode;t&&t[f]&&(this.destDomNodeWithMeta=t,this.destItemId=t[f],this.destTreeViewGuid=t[b])}},e.TreeViewDragClue=R,e.TreeViewItemPropsContext=C,e.getItemIdUponKeyboardNavigation=o,e.handleTreeViewCheckChange=function(e,t,i,n={},r){if(!i||!i.length)return[];const{ids:d,idField:a}=function(e){let t,i;return s.isArray(e)?t=e:(t=e.ids||[],i=e.idField),{ids:t,idField:i}}(t),o=a?s.getNestedValue(a,e.item):e.itemHierarchicalIndex,l=d.indexOf(o),c=-1===l,h=r||m;let p;return n.singleMode?p=c?[o]:[]:(p=d.slice(),c?p.push(o):p.splice(l,1),n.checkChildren&&function(e,t,i,n,r,d){s.getAllDirectIndirectChildrenIds(e,t,r,n).forEach((e=>{i&&-1===d.indexOf(e)?d.push(e):!i&&d.indexOf(e)>-1&&d.splice(d.indexOf(e),1)}))}(e.item,e.itemHierarchicalIndex,c,a,h,p),n.checkParents&&function(e,t,i,n,r,d){const a=h();let o=a.next();function l(){for(;!o.done;){const{id:e,item:t}=o.value;if(-1!==r.indexOf(e)||!s.areAllDirectChildrenChecked(t,e,i,n,r))break;r.push(e),o=a.next()}}function c(){for(;!o.done;){const{id:e}=o.value,t=r.indexOf(e);if(!(t>-1))break;r.splice(t,1),o=a.next()}}function*h(){if(i){const r=s.getAllParents(e,n,d);for(let e=r.length-1;e>-1;e--)yield{id:s.getNestedValue(i,r[e]),item:t?r[e]:void 0}}else{let i=s.treeIdUtils.getDirectParentId(e);for(;i;)yield{id:i,item:t?s.treeIdUtils.getItemById(i,d,n):void 0},i=s.treeIdUtils.getDirectParentId(i)}}t?l():c()}(e.itemHierarchicalIndex,c,a,h,p,i)),s.isArray(t)?p:Object.assign({},t,{ids:p})},e.moveTreeViewItem=function(e,t,i,n,r,d){const a=d||m;if(!function(){if(!t||!t.length||!e||!n||r&&!r.length)return!1;const i=r&&r!==t?r:t;return!!s.treeIdUtils.getItemById(n,i,a)}())return l();const o=s.treeIdUtils.getItemById(e,t,a);if(!o)return l();if(!r||r===t){if(`${n}_`.startsWith(`${e}_`))return l();const d=s.removeItem(e,a,t),c=s.addItem(o,i,a,s.treeIdUtils.getDecrementedItemIdAfterRemoval(e,n),d);return r?{sourceData:c,targetData:c}:c}return{sourceData:s.removeItem(e,a,t),targetData:s.addItem(o,i,a,n,r)};function l(){return r?{sourceData:t,targetData:r}:t}},e.processTreeViewItems=function(e,t){if(!e||!e.length)return[];let i=e;const n=t.cloneField||"cloned",r=t.expandField||p,d=t.selectField||u,a=t.checkField||I,o=t.childrenField||m;return i=w(i,r,t.expand,n,o),i=w(i,d,t.select,n,o),i=w(i,a,t.check,n,o),function(e,t,i){if(i&&!s.isArray(i)&&i.applyCheckIndeterminate){const{field:n}=N(i,I),r=i.checkIndeterminateField||g;for(let i=0;i<e.length;i++){const d=e[i],a=d[t];a&&U(a,s.getNestedValue(n,d)?[]:[d],t,n,r)}}}(i,o,t.check),i}}));

package/index.d.mts

@@ -47,27 +47,28 @@ export declare function getItemIdUponKeyboardNavigation(item: any, itemId: strin
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    state = { check: [], items: tree };
- *    render() {
- *        return (
- *            <div>
- *                <TreeView
- *                    checkboxes={true} onCheckChange={this.onCheckChange}
- *                    data={processTreeViewItems(this.state.items, { check: this.state.check })}
- *                />
- *                <div style={{ marginTop: 5 }}>
- *                    <i>Press SPACE to check/uncheck the active item</i>
- *                    <div className="example-config">
- *                        Checked Indices: {this.state.check.join(",")}
- *                    </div>
+ * const App = () => {
+ *    const [check, setCheck] = React.useState([]);
+ *    const [items] = React.useState(tree);
+ *
+ *    const onCheckChange = (event) => {
+ *        setCheck(handleTreeViewCheckChange(event, check, items));
+ *    }
+ *
+ *    return (
+ *        <div>
+ *            <TreeView
+ *                checkboxes={true} onCheckChange={onCheckChange}
+ *                data={processTreeViewItems(items, { check })}
+ *            />
+ *            <div style={{ marginTop: 5 }}>
+ *                <i>Press SPACE to check/uncheck the active item</i>
+ *                <div className="example-config">
+ *                    Checked Indices: {check.join(",")}
  *                </div>
  *            </div>
- *        );
- *    }
- *    onCheckChange = (event) => {
- *        this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
- *    }
+ *        </div>
+ *    );
  * }
  *
  * const tree = [ {
@@ -77,8 +78,6 @@ export declare function getItemIdUponKeyboardNavigation(item: any, itemId: strin
  *    text: 'Decor', expanded: true, items: [
  *        { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
  * } ];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare function handleTreeViewCheckChange(event: TreeViewExpandChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any[] | (TreeViewCheckDescriptor & {
@@ -120,39 +119,32 @@ export declare interface ItemRenderProps {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
+ * const App = () => {
+ *     const dragClueRef = React.useRef(null);
+ *     const [tree, setTree] = React.useState([{
+ *         text: 'Furniture', expanded: true, items: [
+ *             { text: 'Tables & Chairs', expanded: true },
+ *             { text: 'Sofas', expanded: true },
+ *             { text: 'Occasional Furniture', expanded: true }]
+ *     }, {
+ *         text: 'Decor', expanded: true, items: [
+ *             { text: 'Bed Linen', expanded: true },
+ *             { text: 'Curtains & Blinds', expanded: true },
+ *             { text: 'Carpets', expanded: true }]
+ *     }]);
  *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *     const SEPARATOR = '_';
  *
- *             this.setState({ tree: updatedTree });
+ *     const getSiblings = (itemIndex, data) => {
+ *         let result = data;
+ *         const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *         for (let i = 0; i < indices.length - 1; i++) {
+ *             result = result[indices[i]].items;
  *         }
- *     }
- *     getClueClassName(event) {
+ *         return result;
+ *     };
+ *
+ *     const getClueClassName = (event) => {
  *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
  *
@@ -164,7 +156,7 @@ export declare interface ItemRenderProps {
  *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
  *                         'k-i-insert-up' : 'k-i-insert-middle';
  *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const siblings = getSiblings(itemIndex, tree);
  *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
  *
  *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
@@ -174,34 +166,36 @@ export declare interface ItemRenderProps {
  *         }
  *
  *         return 'k-i-cancel';
- *     }
- * }
+ *     };
  *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
+ *     const onItemDragOver = (event) => {
+ *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
+ *     };
  *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
+ *     const onItemDragEnd = (event) => {
+ *         dragClueRef.current.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *
- *     return result;
- * }
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
  *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
+ *             setTree(updatedTree);
+ *         }
+ *     };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ *     return (
+ *         <div>
+ *             <TreeView data={tree} draggable={true}
+ *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
+ *             <TreeViewDragClue ref={dragClueRef} />
+ *         </div>
+ *     );
+ * }
  * ```
  */
 export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string): any[] | {
@@ -221,25 +215,27 @@ export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, so
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     state = { items: tree, expand: [], select: [], check: [] };
- *     render() {
- *         const { expand, select, check } = this.state;
- *         return (
- *             <TreeView
- *                 data={processTreeViewItems(this.state.items, { expand, select, check })}
- *                 expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
- *                 onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
- *                 onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
- *             />
- *         );
- *     }
- *     onExpandChange = (event) => {
- *         let expand = this.state.expand.slice();
- *         const index = expand.indexOf(event.itemHierarchicalIndex);
- *         index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
- *         this.setState({ expand });
+ * const App = () => {
+ *     const [items] = React.useState(tree);
+ *     const [expand, setExpand] = React.useState([]);
+ *     const [select, setSelect] = React.useState([]);
+ *     const [check, setCheck] = React.useState([]);
+ *
+ *     const onExpandChange = (event) => {
+ *         let newExpand = expand.slice();
+ *         const index = newExpand.indexOf(event.itemHierarchicalIndex);
+ *         index === -1 ? newExpand.push(event.itemHierarchicalIndex) : newExpand.splice(index, 1);
+ *         setExpand(newExpand);
  *     }
+ *
+ *     return (
+ *         <TreeView
+ *             data={processTreeViewItems(items, { expand, select, check })}
+ *             expandIcons={true} onExpandChange={onExpandChange} checkboxes={true}
+ *             onCheckChange={event => setCheck([ event.itemHierarchicalIndex ])}
+ *             onItemClick={event => setSelect([ event.itemHierarchicalIndex ])}
+ *         />
+ *     );
  * }
  *
  * const tree = [{
@@ -254,8 +250,6 @@ export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, so
  * }, {
  *     text: 'Item3'
  * }];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];
@@ -323,12 +317,9 @@ export declare interface TreeViewCheckDescriptor extends TreeViewOperationDescri
  *     text: 'Decor', expanded: true, items: [
  *         { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
  * }];
- * class App extends React.Component {
- *     render() {
- *         return <TreeView data={data} />;
- *     }
+ * const App = () => {
+ *     return <TreeView data={data} />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare class TreeViewClassComponent extends React_2.Component<TreeViewProps, TreeViewState> {
@@ -457,39 +448,32 @@ export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClas
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
+ * const App = () => {
+ *     const dragClueRef = React.useRef(null);
+ *     const [tree, setTree] = React.useState([{
+ *         text: 'Furniture', expanded: true, items: [
+ *             { text: 'Tables & Chairs', expanded: true },
+ *             { text: 'Sofas', expanded: true },
+ *             { text: 'Occasional Furniture', expanded: true }]
+ *     }, {
+ *         text: 'Decor', expanded: true, items: [
+ *             { text: 'Bed Linen', expanded: true },
+ *             { text: 'Curtains & Blinds', expanded: true },
+ *             { text: 'Carpets', expanded: true }]
+ *     }]);
  *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *     const SEPARATOR = '_';
  *
- *             this.setState({ tree: updatedTree });
+ *     const getSiblings = (itemIndex, data) => {
+ *         let result = data;
+ *         const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *         for (let i = 0; i < indices.length - 1; i++) {
+ *             result = result[indices[i]].items;
  *         }
- *     }
- *     getClueClassName(event) {
+ *         return result;
+ *     };
+ *
+ *     const getClueClassName = (event) => {
  *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
  *
@@ -501,7 +485,7 @@ export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClas
  *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
  *                         'k-i-insert-up' : 'k-i-insert-middle';
  *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const siblings = getSiblings(itemIndex, tree);
  *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
  *
  *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
@@ -511,34 +495,36 @@ export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClas
  *         }
  *
  *         return 'k-i-cancel';
- *     }
- * }
+ *     };
  *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
+ *     const onItemDragOver = (event) => {
+ *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
+ *     };
  *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
+ *     const onItemDragEnd = (event) => {
+ *         dragClueRef.current.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *
- *     return result;
- * }
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
  *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
+ *             setTree(updatedTree);
+ *         }
+ *     };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ *     return (
+ *         <div>
+ *             <TreeView data={tree} draggable={true}
+ *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
+ *             <TreeViewDragClue ref={dragClueRef} />
+ *         </div>
+ *     );
+ * }
  * ```
  */
 export declare class TreeViewDragAnalyzer {
@@ -591,39 +577,32 @@ export declare class TreeViewDragAnalyzer {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
- *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ * const App = () => {
+ *     const dragClueRef = React.useRef(null);
+ *     const [tree, setTree] = React.useState([{
+ *         text: 'Furniture', expanded: true, items: [
+ *             { text: 'Tables & Chairs', expanded: true },
+ *             { text: 'Sofas', expanded: true },
+ *             { text: 'Occasional Furniture', expanded: true }]
+ *     }, {
+ *         text: 'Decor', expanded: true, items: [
+ *             { text: 'Bed Linen', expanded: true },
+ *             { text: 'Curtains & Blinds', expanded: true },
+ *             { text: 'Carpets', expanded: true }]
+ *     }]);
  *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *     const SEPARATOR = '_';
  *
- *             this.setState({ tree: updatedTree });
+ *     const getSiblings = (itemIndex, data) => {
+ *         let result = data;
+ *         const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *         for (let i = 0; i < indices.length - 1; i++) {
+ *             result = result[indices[i]].items;
  *         }
- *     }
- *     getClueClassName(event) {
+ *         return result;
+ *     };
+ *
+ *     const getClueClassName = (event) => {
  *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
  *
@@ -635,7 +614,7 @@ export declare class TreeViewDragAnalyzer {
  *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
  *                         'k-i-insert-up' : 'k-i-insert-middle';
  *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const siblings = getSiblings(itemIndex, tree);
  *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
  *
  *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
@@ -645,34 +624,36 @@ export declare class TreeViewDragAnalyzer {
  *         }
  *
  *         return 'k-i-cancel';
- *     }
- * }
+ *     };
  *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
+ *     const onItemDragOver = (event) => {
+ *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
+ *     };
  *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
+ *     const onItemDragEnd = (event) => {
+ *         dragClueRef.current.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *
- *     return result;
- * }
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
  *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
+ *             setTree(updatedTree);
+ *         }
+ *     };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ *     return (
+ *         <div>
+ *             <TreeView data={tree} draggable={true}
+ *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
+ *             <TreeViewDragClue ref={dragClueRef} />
+ *         </div>
+ *     );
+ * }
  * ```
  */
 export declare class TreeViewDragClue extends React_2.PureComponent<TreeViewDragClueProps, TreeViewDragClueState> {

package/index.d.ts

@@ -47,27 +47,28 @@ export declare function getItemIdUponKeyboardNavigation(item: any, itemId: strin
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *    state = { check: [], items: tree };
- *    render() {
- *        return (
- *            <div>
- *                <TreeView
- *                    checkboxes={true} onCheckChange={this.onCheckChange}
- *                    data={processTreeViewItems(this.state.items, { check: this.state.check })}
- *                />
- *                <div style={{ marginTop: 5 }}>
- *                    <i>Press SPACE to check/uncheck the active item</i>
- *                    <div className="example-config">
- *                        Checked Indices: {this.state.check.join(",")}
- *                    </div>
+ * const App = () => {
+ *    const [check, setCheck] = React.useState([]);
+ *    const [items] = React.useState(tree);
+ *
+ *    const onCheckChange = (event) => {
+ *        setCheck(handleTreeViewCheckChange(event, check, items));
+ *    }
+ *
+ *    return (
+ *        <div>
+ *            <TreeView
+ *                checkboxes={true} onCheckChange={onCheckChange}
+ *                data={processTreeViewItems(items, { check })}
+ *            />
+ *            <div style={{ marginTop: 5 }}>
+ *                <i>Press SPACE to check/uncheck the active item</i>
+ *                <div className="example-config">
+ *                    Checked Indices: {check.join(",")}
  *                </div>
  *            </div>
- *        );
- *    }
- *    onCheckChange = (event) => {
- *        this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
- *    }
+ *        </div>
+ *    );
  * }
  *
  * const tree = [ {
@@ -77,8 +78,6 @@ export declare function getItemIdUponKeyboardNavigation(item: any, itemId: strin
  *    text: 'Decor', expanded: true, items: [
  *        { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
  * } ];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare function handleTreeViewCheckChange(event: TreeViewExpandChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any[] | (TreeViewCheckDescriptor & {
@@ -120,39 +119,32 @@ export declare interface ItemRenderProps {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
+ * const App = () => {
+ *     const dragClueRef = React.useRef(null);
+ *     const [tree, setTree] = React.useState([{
+ *         text: 'Furniture', expanded: true, items: [
+ *             { text: 'Tables & Chairs', expanded: true },
+ *             { text: 'Sofas', expanded: true },
+ *             { text: 'Occasional Furniture', expanded: true }]
+ *     }, {
+ *         text: 'Decor', expanded: true, items: [
+ *             { text: 'Bed Linen', expanded: true },
+ *             { text: 'Curtains & Blinds', expanded: true },
+ *             { text: 'Carpets', expanded: true }]
+ *     }]);
  *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *     const SEPARATOR = '_';
  *
- *             this.setState({ tree: updatedTree });
+ *     const getSiblings = (itemIndex, data) => {
+ *         let result = data;
+ *         const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *         for (let i = 0; i < indices.length - 1; i++) {
+ *             result = result[indices[i]].items;
  *         }
- *     }
- *     getClueClassName(event) {
+ *         return result;
+ *     };
+ *
+ *     const getClueClassName = (event) => {
  *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
  *
@@ -164,7 +156,7 @@ export declare interface ItemRenderProps {
  *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
  *                         'k-i-insert-up' : 'k-i-insert-middle';
  *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const siblings = getSiblings(itemIndex, tree);
  *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
  *
  *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
@@ -174,34 +166,36 @@ export declare interface ItemRenderProps {
  *         }
  *
  *         return 'k-i-cancel';
- *     }
- * }
+ *     };
  *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
+ *     const onItemDragOver = (event) => {
+ *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
+ *     };
  *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
+ *     const onItemDragEnd = (event) => {
+ *         dragClueRef.current.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *
- *     return result;
- * }
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
  *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
+ *             setTree(updatedTree);
+ *         }
+ *     };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ *     return (
+ *         <div>
+ *             <TreeView data={tree} draggable={true}
+ *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
+ *             <TreeViewDragClue ref={dragClueRef} />
+ *         </div>
+ *     );
+ * }
  * ```
  */
 export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string): any[] | {
@@ -221,25 +215,27 @@ export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, so
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     state = { items: tree, expand: [], select: [], check: [] };
- *     render() {
- *         const { expand, select, check } = this.state;
- *         return (
- *             <TreeView
- *                 data={processTreeViewItems(this.state.items, { expand, select, check })}
- *                 expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
- *                 onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
- *                 onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
- *             />
- *         );
- *     }
- *     onExpandChange = (event) => {
- *         let expand = this.state.expand.slice();
- *         const index = expand.indexOf(event.itemHierarchicalIndex);
- *         index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
- *         this.setState({ expand });
+ * const App = () => {
+ *     const [items] = React.useState(tree);
+ *     const [expand, setExpand] = React.useState([]);
+ *     const [select, setSelect] = React.useState([]);
+ *     const [check, setCheck] = React.useState([]);
+ *
+ *     const onExpandChange = (event) => {
+ *         let newExpand = expand.slice();
+ *         const index = newExpand.indexOf(event.itemHierarchicalIndex);
+ *         index === -1 ? newExpand.push(event.itemHierarchicalIndex) : newExpand.splice(index, 1);
+ *         setExpand(newExpand);
  *     }
+ *
+ *     return (
+ *         <TreeView
+ *             data={processTreeViewItems(items, { expand, select, check })}
+ *             expandIcons={true} onExpandChange={onExpandChange} checkboxes={true}
+ *             onCheckChange={event => setCheck([ event.itemHierarchicalIndex ])}
+ *             onItemClick={event => setSelect([ event.itemHierarchicalIndex ])}
+ *         />
+ *     );
  * }
  *
  * const tree = [{
@@ -254,8 +250,6 @@ export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, so
  * }, {
  *     text: 'Item3'
  * }];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];
@@ -323,12 +317,9 @@ export declare interface TreeViewCheckDescriptor extends TreeViewOperationDescri
  *     text: 'Decor', expanded: true, items: [
  *         { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
  * }];
- * class App extends React.Component {
- *     render() {
- *         return <TreeView data={data} />;
- *     }
+ * const App = () => {
+ *     return <TreeView data={data} />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare class TreeViewClassComponent extends React_2.Component<TreeViewProps, TreeViewState> {
@@ -457,39 +448,32 @@ export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClas
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
+ * const App = () => {
+ *     const dragClueRef = React.useRef(null);
+ *     const [tree, setTree] = React.useState([{
+ *         text: 'Furniture', expanded: true, items: [
+ *             { text: 'Tables & Chairs', expanded: true },
+ *             { text: 'Sofas', expanded: true },
+ *             { text: 'Occasional Furniture', expanded: true }]
+ *     }, {
+ *         text: 'Decor', expanded: true, items: [
+ *             { text: 'Bed Linen', expanded: true },
+ *             { text: 'Curtains & Blinds', expanded: true },
+ *             { text: 'Carpets', expanded: true }]
+ *     }]);
  *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *     const SEPARATOR = '_';
  *
- *             this.setState({ tree: updatedTree });
+ *     const getSiblings = (itemIndex, data) => {
+ *         let result = data;
+ *         const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *         for (let i = 0; i < indices.length - 1; i++) {
+ *             result = result[indices[i]].items;
  *         }
- *     }
- *     getClueClassName(event) {
+ *         return result;
+ *     };
+ *
+ *     const getClueClassName = (event) => {
  *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
  *
@@ -501,7 +485,7 @@ export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClas
  *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
  *                         'k-i-insert-up' : 'k-i-insert-middle';
  *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const siblings = getSiblings(itemIndex, tree);
  *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
  *
  *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
@@ -511,34 +495,36 @@ export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClas
  *         }
  *
  *         return 'k-i-cancel';
- *     }
- * }
+ *     };
  *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
+ *     const onItemDragOver = (event) => {
+ *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
+ *     };
  *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
+ *     const onItemDragEnd = (event) => {
+ *         dragClueRef.current.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *
- *     return result;
- * }
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
  *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
+ *             setTree(updatedTree);
+ *         }
+ *     };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ *     return (
+ *         <div>
+ *             <TreeView data={tree} draggable={true}
+ *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
+ *             <TreeViewDragClue ref={dragClueRef} />
+ *         </div>
+ *     );
+ * }
  * ```
  */
 export declare class TreeViewDragAnalyzer {
@@ -591,39 +577,32 @@ export declare class TreeViewDragAnalyzer {
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
- *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ * const App = () => {
+ *     const dragClueRef = React.useRef(null);
+ *     const [tree, setTree] = React.useState([{
+ *         text: 'Furniture', expanded: true, items: [
+ *             { text: 'Tables & Chairs', expanded: true },
+ *             { text: 'Sofas', expanded: true },
+ *             { text: 'Occasional Furniture', expanded: true }]
+ *     }, {
+ *         text: 'Decor', expanded: true, items: [
+ *             { text: 'Bed Linen', expanded: true },
+ *             { text: 'Curtains & Blinds', expanded: true },
+ *             { text: 'Carpets', expanded: true }]
+ *     }]);
  *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *     const SEPARATOR = '_';
  *
- *             this.setState({ tree: updatedTree });
+ *     const getSiblings = (itemIndex, data) => {
+ *         let result = data;
+ *         const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *         for (let i = 0; i < indices.length - 1; i++) {
+ *             result = result[indices[i]].items;
  *         }
- *     }
- *     getClueClassName(event) {
+ *         return result;
+ *     };
+ *
+ *     const getClueClassName = (event) => {
  *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
  *
@@ -635,7 +614,7 @@ export declare class TreeViewDragAnalyzer {
  *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
  *                         'k-i-insert-up' : 'k-i-insert-middle';
  *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const siblings = getSiblings(itemIndex, tree);
  *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
  *
  *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
@@ -645,34 +624,36 @@ export declare class TreeViewDragAnalyzer {
  *         }
  *
  *         return 'k-i-cancel';
- *     }
- * }
+ *     };
  *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
+ *     const onItemDragOver = (event) => {
+ *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
+ *     };
  *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
+ *     const onItemDragEnd = (event) => {
+ *         dragClueRef.current.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
  *
- *     return result;
- * }
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
  *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
+ *             setTree(updatedTree);
+ *         }
+ *     };
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
+ *     return (
+ *         <div>
+ *             <TreeView data={tree} draggable={true}
+ *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
+ *             <TreeViewDragClue ref={dragClueRef} />
+ *         </div>
+ *     );
+ * }
  * ```
  */
 export declare class TreeViewDragClue extends React_2.PureComponent<TreeViewDragClueProps, TreeViewDragClueState> {

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=Object.freeze({name:"@progress/kendo-react-treeview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1755511473,version:"12.0.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=Object.freeze({name:"@progress/kendo-react-treeview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1756139262,version:"12.0.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 = Object.freeze({
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1755511473,
-  version: "12.0.0-develop.1",
+  publishDate: 1756139262,
+  version: "12.0.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-treeview",
-  "version": "12.0.0-develop.1",
+  "version": "12.0.0-develop.11",
   "description": "React TreeView displays hierarchical data in a traditional tree structure, supports user interaction. KendoReact TreeView package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-react-animation": "12.0.0-develop.1",
-    "@progress/kendo-react-common": "12.0.0-develop.1",
+    "@progress/kendo-react-animation": "12.0.0-develop.11",
+    "@progress/kendo-react-common": "12.0.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"
@@ -53,7 +53,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1755511473,
+      "publishDate": 1756139262,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },