@progress/kendo-react-dropdowns/DropDownTree/DropDownTree.js

React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns 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 Qe=require("react"),n=require("prop-types"),o=require("@progress/kendo-react-common"),Ye=require("@progress/kendo-react-popup"),et=require("@progress/kendo-react-intl"),we=require("@progress/kendo-react-treeview"),tt=require("../package-metadata.js"),U=require("../common/utils.js"),nt=require("./useDropdownWidth.js"),at=require("./ListNoData.js"),h=require("../messages/index.js"),ot=require("@progress/kendo-react-labels"),Ie=require("../common/ListFilter.js"),rt=require("@progress/kendo-react-buttons"),Fe=require("@progress/kendo-svg-icons"),st=require("../common/AdaptiveMode.js"),it=require("@progress/kendo-react-layout");function lt(u){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const E in u)if(E!=="default"){const s=Object.getOwnPropertyDescriptor(u,E);Object.defineProperty(f,E,s.get?s:{enumerable:!0,get:()=>u[E]})}}return f.default=u,Object.freeze(f)}const t=lt(Qe),{sizeMap:ct,roundedMap:ut}=o.kendoThemeMaps,dt=12e3,pt=2e3,ft="Please select a value from the list!",mt=u=>t.createElement("span",{className:"k-input-value-text"},u.children),Re=u=>u.split("_").map(f=>parseInt(f,10)),vt=(u,f)=>{const{validationMessage:E,valid:s,required:r}=u;return{customError:E!==void 0,valid:!!(s!==void 0?s:!r||f),valueMissing:!f}},oe={selectField:"selected",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},data:[],required:!1,style:{},validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"},Se=o.createPropsContext(),re=t.forwardRef((u,f)=>{const E=!o.validatePackage(tt.packageMetadata,{component:"DropDownTree"}),s=o.usePropsContext(Se,u),r={...oe,...s},Te=o.useId(),se=r.id||Te,{data:K,dataItemKey:N,popupSettings:C={},style:M,opened:d,disabled:S,onOpen:O=o.noop,onClose:v=o.noop,placeholder:X,label:V,name:Pe,selectField:H,subItemsField:L,validationMessage:j,valid:qe,required:G,validityStyles:Ke}=r,J=o.getTabIndex(r.tabIndex,S),i=t.useRef(null),g=t.useRef(null),T=t.useRef(null),Q=t.useRef(null),Z=t.useRef(null),k=t.useRef(null),$=t.useRef(!1),[ie,Ne]=t.useState(void 0),D=r.value!==void 0,b=D?r.value:ie!==void 0?ie:r.defaultValue,W=U.isPresent(b),Y=W?U.getItemValue(b,r.textField):"",ee=vt({validationMessage:j,valid:qe,required:G},W),le=t.useContext(o.ZIndexContext),Me=le?le+pt:dt,Oe=t.useCallback(()=>g.current&&g.current.focus(),[]);t.useImperativeHandle(i,()=>({props:r,element:g.current,focus:Oe})),t.useImperativeHandle(f,()=>i.current);const w=o.useRtl(g,r.dir),Ve={width:nt.useDropdownWidth(g,oe,{...oe.popupSettings,...C},M),...w!==void 0?{direction:w}:{}},[Le,ce]=t.useState(!1),l=d!==void 0?d:Le,[p,te]=t.useState(!1),[ne,We]=t.useState(),[ue,Be]=t.useState(""),de=o.useAdaptiveModeContext(),I=!!(ne&&de&&ne<=de.medium&&r.adaptive),Ae=t.useCallback(()=>{Z.current&&Z.current.setCustomValidity&&Z.current.setCustomValidity(ee.valid?"":j===void 0?ft:j)},[j,ee]);t.useEffect(Ae),t.useEffect(()=>{const e=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Ge.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const pe=t.useCallback(e=>{if(!l){if(O){const a={...e};O.call(void 0,a)}d===void 0&&ce(!0)}},[l,d,O]),F=t.useCallback(e=>{if(l){if(v){const a={...e};v.call(void 0,a)}d===void 0&&(ce(!1),I&&setTimeout(()=>{var a;y((a=Q.current)==null?void 0:a.element)},300))}},[l,d,v,I]),ze=t.useCallback(e=>{if(!e.isDefaultPrevented()&&i.current){te(!0);const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};(l?F:pe)(a)}},[l,d,O,v]),P=t.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),_e=t.useCallback(e=>{var R,xe;const{keyCode:a,altKey:c}=e,m=k.current&&k.current.element;if(!i.current||e.isDefaultPrevented()&&((R=T.current)==null?void 0:R.element)===e.target)return;const q={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};if(l)if(a===o.Keys.esc||c&&a===o.Keys.up)e.preventDefault(),F(q);else if(m&&m.querySelector(".k-focus")&&(a===o.Keys.up||a===o.Keys.down||a===o.Keys.left||a===o.Keys.right||a===o.Keys.home||a===o.Keys.end)){if(a===o.Keys.up&&((xe=T.current)!=null&&xe.element)){const z=Array.from(m.querySelectorAll(".k-treeview-item")),De=[...z].reverse().find(_=>!!(_&&_.querySelector(".k-focus")));if(De&&z.indexOf(De)===0)return P(()=>{var _;y((_=T.current)==null?void 0:_.element)})}P(o.noop)}else a===o.Keys.down&&P(()=>{var z;y(((z=T.current)==null?void 0:z.element)||m)});else c&&a===o.Keys.down?(e.preventDefault(),pe(q)):l||a===o.Keys.esc&&ge(e)},[l,d,O,v]),fe=t.useCallback(e=>{const{keyCode:a,altKey:c}=e;c||a!==o.Keys.up&&a!==o.Keys.down||(e.preventDefault(),P(a===o.Keys.up?()=>{y(g.current)}:()=>{y(k.current&&k.current.element)}))},[]),y=t.useCallback(e=>{e&&P(()=>e.focus())},[]),He=t.useCallback(()=>{var e;!p&&l&&!d?F({target:i.current}):s.filterable?y((e=T.current)==null?void 0:e.element):y(k.current&&k.current.element)},[v,s.filterable,p,d,l]),je=t.useCallback(()=>{p&&y(g.current)},[p]),Ze=t.useCallback(e=>{if(!p&&!$.current&&(te(!0),s.onFocus&&i.current)){const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};s.onFocus.call(void 0,a)}},[p,s.onFocus]),$e=t.useCallback(e=>{if(p&&!$.current&&i.current){te(!1);const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};if(s.onBlur){const c={...a};s.onBlur.call(void 0,c)}I||F(a)}},[p,s.onBlur,l,d,v]),Ue=t.useCallback(()=>{p&&P(o.noop),I&&setTimeout(()=>{var e;y((e=Q.current)==null?void 0:e.element)},300)},[p,I]),me=t.useCallback((e,a,c)=>{if(s.onChange){const m={value:a,level:c?Re(c):[],...e};s.onChange.call(void 0,m)}D||Ne(a)},[s.onChange,D]),ve=t.useCallback(e=>{if(U.areSame(e.item,b,N)||!i.current)return;const{item:a,itemHierarchicalIndex:c,nativeEvent:m,syntheticEvent:q}=e,R={syntheticEvent:q,nativeEvent:m,target:i.current};me(R,a,c),F(R)},[D,b,s.onChange,N,l,d,v]),ge=t.useCallback(e=>{if(!i.current)return;const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};me(a,null),F(a),e.preventDefault()},[D,s.onChange,l,d,v]),be=t.useCallback(e=>{if(e.syntheticEvent.stopPropagation(),s.onExpandChange&&i.current){const{item:a,itemHierarchicalIndex:c,nativeEvent:m,syntheticEvent:q}=e,R={level:Re(c),item:a,nativeEvent:m,syntheticEvent:q,target:i.current};s.onExpandChange.call(void 0,R)}},[s.onExpandChange]),ye=t.useCallback(e=>{if(s.onFilterChange&&i.current){const c={filter:{field:s.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:i.current};s.onFilterChange.call(void 0,c),s.filter===void 0&&Be(e.target.value)}},[s.onFilterChange,s.filter,s.textField]),Xe=()=>{const e=r.filterable?t.createElement(Ie,{value:r.filter===void 0?ue:r.filter,ref:Q,onChange:ye,onKeyDown:fe,size:x,rounded:B,fillMode:A}):null,a={title:r.adaptiveTitle,expand:l,onClose:c=>F(c),windowWidth:ne,mobileFilter:e};return t.createElement(st.AdaptiveMode,{...a},t.createElement(it.ActionSheetContent,{overflowHidden:!0},t.createElement("div",{className:"k-list-container"},t.createElement("div",{className:"k-list k-list-lg"},K.length>0?t.createElement(we.TreeView,{ref:k,tabIndex:J,data:he,focusIdField:N,textField:r.textField,selectField:H,expandField:r.expandField,childrenField:L,expandIcons:!0,onItemClick:ve,onExpandChange:be,size:x,item:r.item,dir:w,animate:C.animate}):t.createElement(Ee,null,ae.toLanguageString(h.nodata,h.messages[h.nodata]))))))},Ge=t.useCallback(e=>{for(const a of e)We(a.target.clientWidth)},[]),he=t.useMemo(()=>D||!W?K:o.mapTree(K,L,e=>o.extendDataItem(e,L,{[H]:U.areSame(e,b,N)})),[K,b,D,W,H,L]),Ee=r.listNoData||at.ListNoData,Je=r.valueHolder||mt,ae=et.useLocalization(),Ce=!Ke||ee.valid,{size:x,rounded:B,fillMode:A}=r,ke=t.createElement(t.Fragment,null,t.createElement("span",{className:o.classNames("k-dropdowntree k-picker",r.className,{[`k-picker-${ct[x]||x}`]:x,[`k-rounded-${ut[B]||B}`]:B,[`k-picker-${A}`]:A,"k-focus":p,"k-invalid":!Ce,"k-loading":r.loading,"k-required":G,"k-disabled":r.disabled}),tabIndex:J,accessKey:r.accessKey,id:se,style:V?{...M,width:void 0}:M,dir:w,ref:g,onKeyDown:S?void 0:_e,onMouseDown:Ue,onClick:S?void 0:ze,onFocus:Ze,onBlur:$e,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":S,"aria-label":V,"aria-labelledby":r.ariaLabelledBy,"aria-describedby":r.ariaDescribedBy,"aria-required":G},t.createElement("span",{className:"k-input-inner"},(Y||X)&&t.createElement(Je,{item:b},Y||X)),r.loading&&t.createElement(o.IconWrap,{className:"k-input-loading-icon",name:"loading"}),W&&!S&&t.createElement("span",{onClick:ge,className:"k-clear-value",title:ae.toLanguageString(h.clear,h.messages[h.clear]),role:"button",tabIndex:-1,onMouseDown:e=>e.preventDefault()},t.createElement(o.IconWrap,{name:"x",icon:Fe.xIcon})),t.createElement(rt.Button,{tabIndex:-1,type:"button","aria-label":"select",className:"k-input-button",size:x,fillMode:A,themeColor:"base",rounded:null,icon:"caret-alt-down",svgIcon:Fe.caretAltDownIcon}),t.createElement("select",{name:Pe,ref:Z,tabIndex:-1,"aria-hidden":!0,title:V,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},t.createElement("option",{value:r.valueMap?r.valueMap.call(void 0,b):b})),!I&&t.createElement(o.ZIndexContext.Provider,{value:Me},t.createElement(Ye.Popup,{...C,className:o.classNames(C.className,{"k-rtl":w==="rtl"}),popupClass:o.classNames(C.popupClass,"k-dropdowntree-popup k-list-container"),style:Ve,anchor:C.anchor||g.current,show:l,onOpen:He,onClose:je},r.filterable&&t.createElement(Ie,{value:r.filter===void 0?ue:r.filter,ref:T,onChange:ye,onKeyDown:fe,size:x,rounded:B,fillMode:A,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),K.length>0?t.createElement(we.TreeView,{style:{height:C.height},ref:k,tabIndex:J,data:he,focusIdField:N,textField:r.textField,selectField:H,expandField:r.expandField,childrenField:L,expandIcons:!0,onItemClick:ve,onExpandChange:be,size:x,item:r.item,dir:w,animate:C.animate}):t.createElement(Ee,null,ae.toLanguageString(h.nodata,h.messages[h.nodata])),E&&t.createElement(o.WatermarkOverlay,null)))),I&&Xe());return V?t.createElement(ot.FloatingLabel,{label:V,editorValue:Y,editorPlaceholder:X,editorValid:Ce,editorDisabled:S,editorId:se,style:{width:M?M.width:void 0},children:ke,dir:w}):ke}),gt={opened:n.bool,disabled:n.bool,dir:n.string,tabIndex:n.number,accessKey:n.string,data:n.array,value:n.any,valueMap:n.func,placeholder:n.string,dataItemKey:n.string.isRequired,textField:n.string.isRequired,selectField:n.string,expandField:n.string,subItemsField:n.string,className:n.string,style:n.object,label:n.string,validationMessage:n.string,validityStyles:n.bool,valid:n.bool,required:n.bool,name:n.string,id:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,filterable:n.bool,filter:n.string,loading:n.bool,popupSettings:n.shape({animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),popupClass:n.string,className:n.string,appendTo:n.any,width:n.oneOfType([n.string,n.number]),height:n.oneOfType([n.string,n.number])}),onOpen:n.func,onClose:n.func,onFocus:n.func,onBlur:n.func,onChange:n.func,onFilterChange:n.func,onExpandChange:n.func,item:n.func,valueHolder:n.func,listNoData:n.func,adaptiveTitle:n.string,adaptive:n.bool};re.displayName="KendoReactDropDownTree";re.propTypes=gt;exports.DropDownTree=re;exports.DropDownTreePropsContext=Se;