@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 m=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),g=require("./utils/utils.js"),b=require("./TreeViewItem.js"),E=require("./package-metadata.js"),n=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 i=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const d=F(m),{sizeMap:C}=l.kendoThemeMaps,c=class c extends d.Component{constructor(t){super(t),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:l.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,i,s)=>{this.setFocus(s),this.dispatchCheckChange(e,i,s)},this.onExpandChange=(e,i,s)=>{this.setFocus(s),this.dispatchExpandChange(e,i,s)},this.onPress=(e,i,s)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:i,itemHierarchicalIndex:s})},this.onDrag=(e,i,s)=>{const{pageX:r,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:i,itemHierarchicalIndex:s,pageX:r,pageY:h,clientX:u,clientY:p})},this.onRelease=(e,i,s)=>{const{pageX:r,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:i,itemHierarchicalIndex:s,pageX:r,pageY:h,clientX:u,clientY:p})},this.onItemClick=(e,i,s)=>{this.setFocus(s),this.dispatchItemClick(e,i,s)},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 i=this.getFocusedItem();if(i&&this.fieldsSvc){const s=f(i,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);s!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(s)),this.dispatchEventsOnKeyDown(e,i)}},this.onContextMenu=(e,i,s)=>{if(this.props.onContextMenu){const r={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:i,itemID:s};this.props.onContextMenu.call(void 0,r)}},this.showLicenseWatermark=!l.validatePackage(E.packageMetadata,{component:"TreeView"})}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new l.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:l.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:i=>{this._element=i},tabIndex:this.props.tabIndex},d.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map((i,s)=>d.createElement(b.TreeViewItem,{id:this.props.id+"-item-"+s,item:i,position:g.getNodePosition(s,this.data),itemId:s.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:s,size:t,isRtl:this.props.dir==="rtl"}))),this.showLicenseWatermark&&d.createElement(l.WatermarkOverlay,null))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(t,e){if(this.fieldsSvc===null)return;const i=()=>this.fieldsSvc&&l.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);t.keyCode===l.Keys.left&&this.fieldsSvc.expanded(e)&&i()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===l.Keys.right&&!this.fieldsSvc.expanded(e)&&(this.fieldsSvc.hasChildren(e)||l.hasChildren(e,this.props.childrenField))&&i()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===l.Keys.enter&&i()?this.dispatchItemClick(t,e,this.state.focusedItemId):t.keyCode===l.Keys.space&&i()&&(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 l.treeIdUtils.getItemById(t,this.data,this.props.childrenField||n.CHILDREN_FIELD)}dispatchCheckChange(t,e,i){l.dispatchEvent(this.props.onCheckChange,t,this,{item:e,itemHierarchicalIndex:i})}dispatchExpandChange(t,e,i){l.dispatchEvent(this.props.onExpandChange,t,this,{item:e,itemHierarchicalIndex:i})}dispatchItemClick(t,e,i){l.dispatchEvent(this.props.onItemClick,t,this,{item:e,itemHierarchicalIndex:i})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const t=this.state.focusedItemPublicId;if(t){const e=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(t):l.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,i)=>t[e]!==void 0&&t[e]!==!0&&t[e]!==!1&&t[e]!=="true"&&t[e]!=="false"?new Error("Invalid prop `"+e+"` supplied to `"+i+"`. 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:n.EXPAND_FIELD,selectField:n.SELECT_FIELD,iconField:n.ICON_FIELD,hasChildrenField:n.HAS_CHILDREN_FIELD,childrenField:n.CHILDREN_FIELD,textField:n.TEXT_FIELD,disableField:n.DISABLED_FIELD,checkField:n.CHECK_FIELD,checkIndeterminateField:n.CHECK_INDETERMINATE_FIELD,size:"medium"};let I=c;exports.TreeView=I;