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