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