@progress/kendo-react-treeview/TreeView.js

React TreeView displays hierarchical data in a traditional tree structure, supports user interaction. KendoReact TreeView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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"),a=require("prop-types"),n=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),b=require("./utils/utils.js"),E=require("./TreeViewItem.js"),m=require("./package-metadata.js"),l=require("./utils/consts.js");function F(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const d=F(g),{sizeMap:C}=n.kendoThemeMaps,c=class c extends d.Component{constructor(t){super(t),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:n.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,s,i)=>{this.setFocus(i),this.dispatchCheckChange(e,s,i)},this.onExpandChange=(e,s,i)=>{this.setFocus(i),this.dispatchExpandChange(e,s,i)},this.onPress=(e,s,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:s,itemHierarchicalIndex:i})},this.onDrag=(e,s,i)=>{const{pageX:r,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:s,itemHierarchicalIndex:i,pageX:r,pageY:h,clientX:u,clientY:p})},this.onRelease=(e,s,i)=>{const{pageX:r,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:s,itemHierarchicalIndex:i,pageX:r,pageY:h,clientX:u,clientY:p})},this.onItemClick=(e,s,i)=>{this.setFocus(i),this.dispatchItemClick(e,s,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),this.state.focusedItemId===void 0&&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 s=this.getFocusedItem();if(s&&this.fieldsSvc){const i=f(s,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,s)}},this.onContextMenu=(e,s,i)=>{if(this.props.onContextMenu){const r={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:s,itemID:i};this.props.onContextMenu.call(void 0,r)}},this.showLicenseWatermark=!n.validatePackage(m.packageMetadata,{component:"TreeView"}),this.licenseMessage=n.getLicenseMessage(m.packageMetadata)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new n.TreeFieldsService(this.props);const{size:t,className:e}=this.props;return d.createElement("div",{id:this.props.id,style:{position:"relative",...this.props.style},className:n.classNames("k-treeview",{[`k-treeview-${C[t]||t}`]:t,"k-user-select-none":this.props.draggable,"k-rtl":this.props.dir==="rtl"},e),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":this.ariaMultiSelectable?!0:void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:s=>{this._element=s},tabIndex:this.props.tabIndex},d.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map((s,i)=>d.createElement(E.TreeViewItem,{id:this.props.id+"-item-"+i,item:s,position:b.getNodePosition(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:t,isRtl:this.props.dir==="rtl"}))),this.showLicenseWatermark&&d.createElement(n.WatermarkOverlay,{message:this.licenseMessage}))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(t,e){if(this.fieldsSvc===null)return;const s=()=>this.fieldsSvc&&n.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);t.keyCode===n.Keys.left&&this.fieldsSvc.expanded(e)&&s()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===n.Keys.right&&!this.fieldsSvc.expanded(e)&&(this.fieldsSvc.hasChildren(e)||n.hasChildren(e,this.props.childrenField))&&s()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===n.Keys.enter&&s()?this.dispatchItemClick(t,e,this.state.focusedItemId):t.keyCode===n.Keys.space&&s()&&(t.preventDefault(),this.dispatchCheckChange(t,e,this.state.focusedItemId))}setFocus(t){if(t&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const e=this.getItemById(t);this.setState({focusedItemId:t,focusedItemPublicId:this.fieldsSvc.focusId(e)})}else this.setState({focusedItemId:t});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(t){return n.treeIdUtils.getItemById(t,this.data,this.props.childrenField||l.CHILDREN_FIELD)}dispatchCheckChange(t,e,s){n.dispatchEvent(this.props.onCheckChange,t,this,{item:e,itemHierarchicalIndex:s})}dispatchExpandChange(t,e,s){n.dispatchEvent(this.props.onExpandChange,t,this,{item:e,itemHierarchicalIndex:s})}dispatchItemClick(t,e,s){n.dispatchEvent(this.props.onItemClick,t,this,{item:e,itemHierarchicalIndex:s})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const t=this.state.focusedItemPublicId;if(t){const e=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(t):n.resolveItemId(t,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);e!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:e}))}}}get ariaMultiSelectable(){return this.props["aria-multiselectable"]===!0||this.props["aria-multiselectable"]==="true"}get data(){return this.props.data||[]}focusDomItem(t){t.focus()}get guid(){return this.treeGuid}};c.propTypes={data:a.arrayOf(a.any),animate:a.bool,tabIndex:a.number,focusIdField:a.string,getHierarchicalIndexById:a.func,onExpandChange:a.func,onItemClick:a.func,expandField:a.string,selectField:a.string,iconField:a.string,childrenField:a.string,hasChildrenField:a.string,textField:a.string,disableField:a.string,item:a.any,"aria-multiselectable":(t,e,s)=>t[e]!==void 0&&t[e]!==!0&&t[e]!==!1&&t[e]!=="true"&&t[e]!=="false"?new Error("Invalid prop `"+e+"` supplied to `"+s+"`. Validation failed."):null,"aria-label":a.string,"aria-labelledby":a.string,size:a.oneOf([null,"small","medium","large"]),dir:a.string},c.defaultProps={animate:!0,expandField:l.EXPAND_FIELD,selectField:l.SELECT_FIELD,iconField:l.ICON_FIELD,hasChildrenField:l.HAS_CHILDREN_FIELD,childrenField:l.CHILDREN_FIELD,textField:l.TEXT_FIELD,disableField:l.DISABLED_FIELD,checkField:l.CHECK_FIELD,checkIndeterminateField:l.CHECK_INDETERMINATE_FIELD,size:"medium"};let I=c;exports.TreeView=I;