@progress/kendo-react-dropdowns 9.5.0 → 10.0.0-develop.1

package/DropDownTree/DropDownTree.js

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

package/DropDownTree/DropDownTree.mjs

@@ -7,26 +7,26 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as Ye, validatePackage as Ze, usePropsContext as et, useId as tt, getTabIndex as nt, useRtl as ot, useAdaptiveModeContext as at, canUseDOM as rt, Keys as c, noop as j, mapTree as it, extendDataItem as lt, classNames as ae, IconWrap as Fe, kendoThemeMaps as st } from "@progress/kendo-react-common";
-import { Popup as ct } from "@progress/kendo-react-popup";
-import { useLocalization as ut } from "@progress/kendo-react-intl";
+import { createPropsContext as Ze, validatePackage as et, usePropsContext as tt, useId as nt, getTabIndex as ot, useRtl as at, useAdaptiveModeContext as rt, canUseDOM as it, Keys as c, noop as j, mapTree as lt, extendDataItem as st, classNames as ae, IconWrap as Fe, WatermarkOverlay as ct, kendoThemeMaps as ut } from "@progress/kendo-react-common";
+import { Popup as dt } from "@progress/kendo-react-popup";
+import { useLocalization as pt } from "@progress/kendo-react-intl";
 import { TreeView as De } from "@progress/kendo-react-treeview";
-import { packageMetadata as dt } from "../package-metadata.mjs";
-import { getItemValue as pt, areSame as Ie, isPresent as mt } from "../common/utils.mjs";
-import { useDropdownWidth as ft } from "./useDropdownWidth.mjs";
-import { ListNoData as vt } from "./ListNoData.mjs";
+import { packageMetadata as mt } from "../package-metadata.mjs";
+import { getItemValue as ft, areSame as Ie, isPresent as vt } from "../common/utils.mjs";
+import { useDropdownWidth as gt } from "./useDropdownWidth.mjs";
+import { ListNoData as bt } from "./ListNoData.mjs";
 import { clear as Se, messages as re, nodata as G } from "../messages/index.mjs";
-import { FloatingLabel as gt } from "@progress/kendo-react-labels";
+import { FloatingLabel as ht } from "@progress/kendo-react-labels";
 import Me from "../common/ListFilter.mjs";
-import { Button as bt } from "@progress/kendo-react-buttons";
-import { xIcon as ht, caretAltDownIcon as yt } from "@progress/kendo-svg-icons";
-import { AdaptiveMode as Ct } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Et } from "@progress/kendo-react-layout";
-const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the list!", Ft = (C) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, C.children), Re = (C) => C.split("_").map((D) => parseInt(D, 10)), Dt = (C, D) => {
-  const { validationMessage: r, valid: a, required: U } = C;
+import { Button as yt } from "@progress/kendo-react-buttons";
+import { xIcon as Et, caretAltDownIcon as Ct } from "@progress/kendo-svg-icons";
+import { AdaptiveMode as kt } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as xt } from "@progress/kendo-react-layout";
+const { sizeMap: wt, roundedMap: Ft } = ut, Dt = "Please select a value from the list!", It = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Re = (E) => E.split("_").map((D) => parseInt(D, 10)), St = (E, D) => {
+  const { validationMessage: U, valid: r, required: a } = E;
   return {
-    customError: r !== void 0,
-    valid: !!(a !== void 0 ? a : !U || D),
+    customError: U !== void 0,
+    valid: !!(r !== void 0 ? r : !a || D),
     valueMissing: !D
   };
 }, ie = {
@@ -44,12 +44,11 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
-}, It = Ye(), Te = t.forwardRef((C, D) => {
-  Ze(dt);
-  const r = et(It, C), a = {
+}, Mt = Ze(), Te = t.forwardRef((E, D) => {
+  const U = !et(mt, { component: "DropDownTree" }), r = tt(Mt, E), a = {
     ...ie,
     ...r
-  }, U = tt(), le = a.id || U, {
+  }, Ne = nt(), le = a.id || Ne, {
     data: T,
     dataItemKey: N,
     popupSettings: b = {},
@@ -59,35 +58,35 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
     onOpen: V = j,
     onClose: m = j,
     placeholder: J,
-    label: K,
-    name: Ne,
+    label: O,
+    name: Pe,
     selectField: z,
-    subItemsField: O,
+    subItemsField: K,
     validationMessage: H,
-    valid: Pe,
+    valid: Ve,
     required: Q,
-    validityStyles: Ve
-  } = a, X = nt(a.tabIndex, I), i = t.useRef(null), f = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), h = t.useRef(null), _ = t.useRef(!1), [se, Ke] = t.useState(void 0), E = a.value !== void 0, v = E ? a.value : se !== void 0 ? se : a.defaultValue, L = mt(v), Z = L ? pt(v, a.textField) : "", ee = Dt({ validationMessage: H, valid: Pe, required: Q }, L), Oe = t.useCallback(() => f.current && f.current.focus(), []);
+    validityStyles: Oe
+  } = a, X = ot(a.tabIndex, I), i = t.useRef(null), f = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), h = t.useRef(null), _ = t.useRef(!1), [se, Ke] = t.useState(void 0), C = a.value !== void 0, v = C ? a.value : se !== void 0 ? se : a.defaultValue, L = vt(v), Z = L ? ft(v, a.textField) : "", ee = St({ validationMessage: H, valid: Ve, required: Q }, L), Le = t.useCallback(() => f.current && f.current.focus(), []);
   t.useImperativeHandle(i, () => ({
     props: a,
     element: f.current,
-    focus: Oe
+    focus: Le
   })), t.useImperativeHandle(D, () => i.current);
-  const k = ot(f, a.dir), Le = {
-    width: ft(
+  const k = at(f, a.dir), We = {
+    width: gt(
       f,
       ie,
       { ...ie.popupSettings, ...b },
       P
     ),
     ...k !== void 0 ? { direction: k } : {}
-  }, [Be, ce] = t.useState(!1), l = u !== void 0 ? u : Be, [d, te] = t.useState(!1), [ne, We] = t.useState(), [ue, qe] = t.useState(""), de = at(), x = !!(ne && de && ne <= de.medium && a.adaptive), Ae = t.useCallback(() => {
+  }, [Be, ce] = t.useState(!1), l = u !== void 0 ? u : Be, [d, te] = t.useState(!1), [ne, qe] = t.useState(), [ue, Ae] = t.useState(""), de = rt(), x = !!(ne && de && ne <= de.medium && a.adaptive), ze = t.useCallback(() => {
     $.current && $.current.setCustomValidity && $.current.setCustomValidity(
-      ee.valid ? "" : H === void 0 ? wt : H
+      ee.valid ? "" : H === void 0 ? Dt : H
     );
   }, [H, ee]);
-  t.useEffect(Ae), t.useEffect(() => {
-    const e = rt && window.ResizeObserver && new window.ResizeObserver(Qe.bind(void 0));
+  t.useEffect(ze), t.useEffect(() => {
+    const e = it && window.ResizeObserver && new window.ResizeObserver(Xe.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
       document != null && document.body && e && e.disconnect();
     };
@@ -117,7 +116,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       }
     },
     [l, u, m, x]
-  ), ze = t.useCallback(
+  ), He = t.useCallback(
     (e) => {
       if (!e.isDefaultPrevented() && i.current) {
         te(!0);
@@ -132,7 +131,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
     [l, u, V, m]
   ), M = t.useCallback((e) => {
     _.current = !0, e(), window.setTimeout(() => _.current = !1, 0);
-  }, []), He = t.useCallback(
+  }, []), $e = t.useCallback(
     (e) => {
       var F, xe;
       const { keyCode: o, altKey: s } = e, p = h.current && h.current.element;
@@ -176,12 +175,12 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
     ));
   }, []), g = t.useCallback((e) => {
     e && M(() => e.focus());
-  }, []), $e = t.useCallback(() => {
+  }, []), _e = t.useCallback(() => {
     var e;
     !d && l && !u ? w({ target: i.current }) : r.filterable ? g((e = S.current) == null ? void 0 : e.element) : g(h.current && h.current.element);
-  }, [m, r.filterable, d, u, l]), _e = t.useCallback(() => {
+  }, [m, r.filterable, d, u, l]), je = t.useCallback(() => {
     d && g(f.current);
-  }, [d]), je = t.useCallback(
+  }, [d]), Ge = t.useCallback(
     (e) => {
       if (!d && !_.current && (te(!0), r.onFocus && i.current)) {
         const o = {
@@ -193,7 +192,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       }
     },
     [d, r.onFocus]
-  ), Ge = t.useCallback(
+  ), Ue = t.useCallback(
     (e) => {
       if (d && !_.current && i.current) {
         te(!1);
@@ -210,7 +209,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       }
     },
     [d, r.onBlur, l, u, m]
-  ), Ue = t.useCallback(() => {
+  ), Je = t.useCallback(() => {
     d && M(j), x && setTimeout(() => {
       var e;
       g((e = Y.current) == null ? void 0 : e.element);
@@ -225,9 +224,9 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
         };
         r.onChange.call(void 0, p);
       }
-      E || Ke(o);
+      C || Ke(o);
     },
-    [r.onChange, E]
+    [r.onChange, C]
   ), ve = t.useCallback(
     (e) => {
       if (Ie(e.item, v, N) || !i.current)
@@ -239,7 +238,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       };
       fe(F, o, s), w(F);
     },
-    [E, v, r.onChange, N, l, u, m]
+    [C, v, r.onChange, N, l, u, m]
   ), ge = t.useCallback(
     (e) => {
       if (!i.current)
@@ -251,7 +250,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       };
       fe(o, null), w(o), e.preventDefault();
     },
-    [E, r.onChange, l, u, m]
+    [C, r.onChange, l, u, m]
   ), be = t.useCallback(
     (e) => {
       if (e.syntheticEvent.stopPropagation(), r.onExpandChange && i.current) {
@@ -279,11 +278,11 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
           nativeEvent: e.nativeEvent,
           target: i.current
         };
-        r.onFilterChange.call(void 0, s), r.filter === void 0 && qe(e.target.value);
+        r.onFilterChange.call(void 0, s), r.filter === void 0 && Ae(e.target.value);
       }
     },
     [r.onFilterChange, r.filter, r.textField]
-  ), Je = () => {
+  ), Qe = () => {
     const e = a.filterable ? /* @__PURE__ */ t.createElement(
       Me,
       {
@@ -292,8 +291,8 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
         onChange: he,
         onKeyDown: me,
         size: y,
-        rounded: B,
-        fillMode: W
+        rounded: W,
+        fillMode: B
       }
     ) : null, o = {
       title: a.adaptiveTitle,
@@ -302,7 +301,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       windowWidth: ne,
       mobileFilter: e
     };
-    return /* @__PURE__ */ t.createElement(Ct, { ...o }, /* @__PURE__ */ t.createElement(Et, { overflowHidden: !0 }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, T.length > 0 ? /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement(kt, { ...o }, /* @__PURE__ */ t.createElement(xt, { overflowHidden: !0 }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, T.length > 0 ? /* @__PURE__ */ t.createElement(
       De,
       {
         ref: h,
@@ -312,7 +311,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
         textField: a.textField,
         selectField: z,
         expandField: a.expandField,
-        childrenField: O,
+        childrenField: K,
         expandIcons: !0,
         onItemClick: ve,
         onExpandChange: be,
@@ -321,23 +320,23 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
         dir: k,
         animate: b.animate
       }
-    ) : /* @__PURE__ */ t.createElement(Ce, null, oe.toLanguageString(G, re[G]))))));
-  }, Qe = t.useCallback((e) => {
+    ) : /* @__PURE__ */ t.createElement(Ee, null, oe.toLanguageString(G, re[G]))))));
+  }, Xe = t.useCallback((e) => {
     for (const o of e)
-      We(o.target.clientWidth);
-  }, []), ye = t.useMemo(() => E || !L ? T : it(
+      qe(o.target.clientWidth);
+  }, []), ye = t.useMemo(() => C || !L ? T : lt(
     T,
-    O,
-    (e) => lt(e, O, { [z]: Ie(e, v, N) })
-  ), [T, v, E, L, z, O]), Ce = a.listNoData || vt, Xe = a.valueHolder || Ft, oe = ut(), Ee = !Ve || ee.valid, { size: y, rounded: B, fillMode: W } = a, ke = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    K,
+    (e) => st(e, K, { [z]: Ie(e, v, N) })
+  ), [T, v, C, L, z, K]), Ee = a.listNoData || bt, Ye = a.valueHolder || It, oe = pt(), Ce = !Oe || ee.valid, { size: y, rounded: W, fillMode: B } = a, ke = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
       className: ae("k-dropdowntree k-picker", a.className, {
-        [`k-picker-${kt[y] || y}`]: y,
-        [`k-rounded-${xt[B] || B}`]: B,
-        [`k-picker-${W}`]: W,
+        [`k-picker-${wt[y] || y}`]: y,
+        [`k-rounded-${Ft[W] || W}`]: W,
+        [`k-picker-${B}`]: B,
         "k-focus": d,
-        "k-invalid": !Ee,
+        "k-invalid": !Ce,
         "k-loading": a.loading,
         "k-required": Q,
         "k-disabled": a.disabled
@@ -345,24 +344,24 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       tabIndex: X,
       accessKey: a.accessKey,
       id: le,
-      style: K ? { ...P, width: void 0 } : P,
+      style: O ? { ...P, width: void 0 } : P,
       dir: k,
       ref: f,
-      onKeyDown: I ? void 0 : He,
-      onMouseDown: Ue,
-      onClick: I ? void 0 : ze,
-      onFocus: je,
-      onBlur: Ge,
+      onKeyDown: I ? void 0 : $e,
+      onMouseDown: Je,
+      onClick: I ? void 0 : He,
+      onFocus: Ge,
+      onBlur: Ue,
       role: "combobox",
       "aria-haspopup": "tree",
       "aria-expanded": l,
       "aria-disabled": I,
-      "aria-label": K,
+      "aria-label": O,
       "aria-labelledby": a.ariaLabelledBy,
       "aria-describedby": a.ariaDescribedBy,
       "aria-required": Q
     },
-    /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, (Z || J) && /* @__PURE__ */ t.createElement(Xe, { item: v }, Z || J)),
+    /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, (Z || J) && /* @__PURE__ */ t.createElement(Ye, { item: v }, Z || J)),
     a.loading && /* @__PURE__ */ t.createElement(Fe, { className: "k-input-loading-icon", name: "loading" }),
     L && !I && /* @__PURE__ */ t.createElement(
       "span",
@@ -374,46 +373,46 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
         tabIndex: -1,
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ t.createElement(Fe, { name: "x", icon: ht })
+      /* @__PURE__ */ t.createElement(Fe, { name: "x", icon: Et })
     ),
     /* @__PURE__ */ t.createElement(
-      bt,
+      yt,
       {
         tabIndex: -1,
         type: "button",
         "aria-label": "select",
         className: "k-input-button",
         size: y,
-        fillMode: W,
+        fillMode: B,
         themeColor: "base",
         rounded: null,
         icon: "caret-alt-down",
-        svgIcon: yt
+        svgIcon: Ct
       }
     ),
     /* @__PURE__ */ t.createElement(
       "select",
       {
-        name: Ne,
+        name: Pe,
         ref: $,
         tabIndex: -1,
         "aria-hidden": !0,
-        title: K,
+        title: O,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
       /* @__PURE__ */ t.createElement("option", { value: a.valueMap ? a.valueMap.call(void 0, v) : v })
     ),
     !x && /* @__PURE__ */ t.createElement(
-      ct,
+      dt,
       {
         ...b,
         className: ae(b.className, { "k-rtl": k === "rtl" }),
         popupClass: ae(b.popupClass, "k-dropdowntree-popup k-list-container"),
-        style: Le,
+        style: We,
         anchor: b.anchor || f.current,
         show: l,
-        onOpen: $e,
-        onClose: _e
+        onOpen: _e,
+        onClose: je
       },
       a.filterable && /* @__PURE__ */ t.createElement(
         Me,
@@ -423,8 +422,8 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
           onChange: he,
           onKeyDown: me,
           size: y,
-          rounded: B,
-          fillMode: W,
+          rounded: W,
+          fillMode: B,
           renderListFilterWrapper: !0,
           renderPrefixSeparator: !0
         }
@@ -440,7 +439,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
           textField: a.textField,
           selectField: z,
           expandField: a.expandField,
-          childrenField: O,
+          childrenField: K,
           expandIcons: !0,
           onItemClick: ve,
           onExpandChange: be,
@@ -449,16 +448,17 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
           dir: k,
           animate: b.animate
         }
-      ) : /* @__PURE__ */ t.createElement(Ce, null, oe.toLanguageString(G, re[G]))
+      ) : /* @__PURE__ */ t.createElement(Ee, null, oe.toLanguageString(G, re[G])),
+      U && /* @__PURE__ */ t.createElement(ct, null)
     )
-  ), x && Je());
-  return K ? /* @__PURE__ */ t.createElement(
-    gt,
+  ), x && Qe());
+  return O ? /* @__PURE__ */ t.createElement(
+    ht,
     {
-      label: K,
+      label: O,
       editorValue: Z,
       editorPlaceholder: J,
-      editorValid: Ee,
+      editorValid: Ce,
       editorDisabled: I,
       editorId: le,
       style: { width: P ? P.width : void 0 },
@@ -466,7 +466,7 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
       dir: k
     }
   ) : ke;
-}), St = {
+}), Rt = {
   opened: n.bool,
   disabled: n.bool,
   dir: n.string,
@@ -523,8 +523,8 @@ const { sizeMap: kt, roundedMap: xt } = st, wt = "Please select a value from the
   adaptive: n.bool
 };
 Te.displayName = "KendoReactDropDownTree";
-Te.propTypes = St;
+Te.propTypes = Rt;
 export {
   Te as DropDownTree,
-  It as DropDownTreePropsContext
+  Mt as DropDownTreePropsContext
 };

package/MultiSelect/MultiSelect.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),v=require("prop-types"),h=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),j=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),U=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),K=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("@progress/kendo-react-intl"),C=require("../messages/index.js"),ie=require("../common/ListFilter.js"),P=require("../common/withCustomComponent.js");function oe(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const e in I)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(I,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>I[e]})}}return n.default=I,Object.freeze(n)}const f=oe($),{sizeMap:w,roundedMap:ae}=h.kendoThemeMaps,ne="Please enter a valid value!",E=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new K(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const{dataItemKey:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=a[e-p],r=this.value.findIndex(m=>g.areSame(m,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(m=>g.areSame(m,u,o));let i=[];r!==-1?(i=this.value,i.splice(r,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.triggerOnChange(i,t),this.base.triggerPageChangeCornerItems(u,t)},this.onTagDelete=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(e,t)=>{const{allowCustom:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),i=o&&u,l=a[e-p];l&&r!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):i&&e===-1&&this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.searchbarRef=e=>{const t=this._input=e&&e.input;t&&this.state.focused&&window.setTimeout(()=>t.focus(),0)},this.onChangeHandler=e=>{const t=this.base.initState(),o=e.target.value;t.syntheticEvent=e,this.props.filter===void 0&&(t.data.text=o),t.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(t),this.setState({currentValue:this.value})),this.base.filterChanged(o,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.value.length>0&&this.triggerOnChange([],t),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t);const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(t)},this.onInputKeyDown=e=>{const{textField:t,groupField:o}=this.props,s=g.getFilteredData(this.props),a=e.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:r,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=e,!p&&this.value.length>0&&(a===h.Keys.left||a===h.Keys.right||a===h.Keys.home||a===h.Keys.end||a===h.Keys.delete||a===h.Keys.backspace)&&!e.shiftKey)return this.onTagsNavigate(e,l);const m=()=>{e.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===h.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===h.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if((e.ctrlKey||e.metaKey)&&e.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===h.Keys.end){const d=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===h.Keys.home){const d=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(e.shiftKey&&e.keyCode===h.Keys.up){let d;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?d=i!==0?s.slice(i-1,i):[s[i]]:c===i?d=[s[c-1]]:i>=0&&(d=c>i?s.slice(i-1,c):s.slice(c-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.shiftKey&&e.keyCode===h.Keys.down){let d;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?d=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?d=s.slice(i,i+2):i>=0&&(d=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.altKey&&a===h.Keys.up)m();else if(a===h.Keys.up||a===h.Keys.down){if(o!==""&&t)if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=0;if(a===h.Keys.down||a===h.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[t]);d=c&&s.findIndex(y=>y[t]===c[t])}else if(a===h.Keys.up||a===h.Keys.left){let c;if(i===-1)c=s,d=s.findIndex(y=>!y.disabled&&y[t]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();d=y&&s.findIndex(x=>x[t]===y[t])}}if(d){const c=d-i;this.onNavigate(l,a,c)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=null;if(a===h.Keys.down||a===h.Keys.right)d=s.slice(i+1).find(c=>!c.disabled);else if(a===h.Keys.up||a===h.Keys.left){const c=s.slice(0,i);for(d=c.pop();d&&d.disabled;)d=c.pop()}if(d){const c=d.id-i-1;this.onNavigate(l,a,c)}else this.onNavigate(l,a)}this.applyState(l),e.preventDefault()}else a===h.Keys.enter?(e.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(e):r&&r.disabled?m():this.selectFocusedItem(e)):a===h.Keys.esc&&m();else e.altKey&&a===h.Keys.down?m():a===h.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,r=g.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),m=o&&i&&f.createElement("div",{className:h.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:E},f.createElement("div",{className:h.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(h.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&p!==void 0&&(d=g.getItemValue(r[0],p)),f.createElement(f.Fragment,null,e&&f.createElement("div",{className:"k-list-header"},e),m,f.createElement("div",{className:h.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&d&&r.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:a}),this.renderList()),t&&f.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,o=g.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:e.popupWidth,p={dir:t!==void 0?t:e.dirCalculated,width:a,popupSettings:{...s,popupClass:h.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,filterable:t,filter:o}=this.props,{windowWidth:s=0}=this.state,a=o!==void 0?o:this.state.text;this.localization=se.provideLocalizationService(this);const p=t?f.createElement(ie,{value:a,ref:r=>this._adaptiveInput=r&&r.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,u={title:e,expand:this.opened,onClose:r=>this.onCancel(r),windowWidth:s,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(C.adaptiveModeFooterCancel,C.messages[C.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(C.adaptiveModeFooterApply,C.messages[C.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...u},f.createElement(te.ActionSheetContent,{overflowHidden:!0},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.renderList=()=>{const{textField:e,listNoDataRender:t,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=g.getFilteredData(this.props),r=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),m=`translateY(${r.translate}px)`;return f.createElement(U,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:e,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{r.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:r.enabled?{transform:m}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:t,onMouseDown:E,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:r.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:s}=this.props;let a=g.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*p;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][s];for(let l=1;l<a.length&&!(p*l>r);l++)a[l]&&a[l][s]&&(i=a[l][s]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=e=>{const t=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!t)return;const s=this.base.initState();s.syntheticEvent=e;const a=o?{[o]:t}:t;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const o=this.base.initState();o.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.handleItemSelect(e,o),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(o),t.stopPropagation(),this.applyState(o)},this.handleBlur=e=>{if(!this.state.focused||this._skipFocusEvent)return;const t=this.base.initState(),{allowCustom:o,filterable:s}=this.props;t.syntheticEvent=e,t.data.focused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(t.data.text=""),this.applyState(t)},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ne)},h.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(h.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:e}=this.props,t=[];return n===void 0?this.value.forEach(o=>{t.push({text:g.getItemValue(o,e),data:[o]})}):t.push(...n),t}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:n,valid:t,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,e){var m;const{virtual:t,groupField:o=""}=this.props,s=g.getFilteredData(this.props),a=t?t.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:e.opened,r=!u&&this.opened,i=u&&!this.opened,l=this.base.getPopupSettings();if(this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),t&&t.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(m=this.base.getGroupedDataModernMode(s,o))==null?void 0:m.indexOf(d)),r&&t?this.base.scrollToVirtualItem(t,c-a):r&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&d&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,e,t){const{allowCustom:o}=this.props,s=g.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),r=o&&a,i=_(p),l=this.base,m=l.vs;if(this.opened&&e===h.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:e,current:u,max:(m.enabled?m.total:s.length)-1,min:r?-1:0,skipItems:t||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:e,label:t,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:r,rounded:i,fillMode:l,loading:m,filter:d}=this.props,{text:c,focused:y,focusedTag:x,currentValue:q}=this.state,k=this.base.vs,T=this.props.id||this._inputId;k.enabled=u!==void 0,u!==void 0&&(k.skip=u.skip,k.total=u.total,k.pageSize=u.pageSize);const S=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:c)||S&&S.length>0,[z,B]=P(this.props.prefix||f.Fragment),[V,A]=P(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:h.classNames("k-multiselect k-input",e,{[`k-input-${w[r]||r}`]:r,[`k-rounded-${ae[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":m,"k-required":this.required}),style:t?{...n,width:void 0}:n,dir:o,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&f.createElement(z,{...B}),f.createElement("div",{className:h.classNames("k-input-values")},f.createElement("div",{className:h.classNames("k-chip-list",{[`k-chip-list-${w[r]||r}`]:r}),role:"listbox",id:"tagslist-"+this.base.guid},S&&S.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:S,guid:this.base.guid,focused:x?S.find(H=>g.matchTags(H,x,p)):void 0,size:r})),this.renderSearchBar(T)),m&&f.createElement(h.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(V,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?f.createElement(j.FloatingLabel,{label:t,editorId:T,editorValue:c||g.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:r,inputAttributes:i}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:m}=this.getFocusedState(),d=this.value.length===0&&!l?a:void 0,c=o&&o.length>0?void 0:a,y=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${m}`,x={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(Q,{id:n,size:Math.max((d||"").length,l.length,1),placeholder:this.mobileMode&&this.opened?c:d,value:l,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:y,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:r,inputAttributes:i,...x})}onTagsNavigate(n,e){const t=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>g.matchTags(i,o,a)):-1,u;const r=p!==-1;if(t===h.Keys.left)r?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(t===h.Keys.right)p===s.length-1?u=void 0:r&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(t===h.Keys.home&&!n.shiftKey)u=s[0];else if(t===h.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(t===h.Keys.delete){if(r){const i=this.value;g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e)}}else if(t===h.Keys.backspace){const i=this.value;if(r)g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e);else if(!r&&s.length){const l=s.pop();g.removeDataItems(i,l.data,a),this.triggerOnChange(i,e)}}u!==o&&(e.data.focusedTag=u,e.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(e)}triggerOnChange(n,e){this.props.value===void 0&&(e.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),e.events.push({type:"onChange"})}selectFocusedItem(n,e){const{virtual:t}=this.props,o=g.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),a=t?t.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,e){e.length=0,e.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=g.itemIndexStartsWith,skipDisabledItems:u}=this.props,r=g.getFilteredData(this.props),i=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:r[n-i],focusedType:1};const m=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=p(r,e,a),{focusedItem:r[l],focusedIndex:l+i,focusedType:1};if(m.length){const d=m[m.length-1];return l=r.findIndex(c=>g.areSame(c,d,o)),r[l]!==void 0?{focusedIndex:l+i,focusedItem:r[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!e&&i===0){const d=r.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:d,focusedItem:r[d-i],focusedType:1}}return i===0?{focusedItem:r[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const e of n)this.setState({windowWidth:e.target.clientWidth})}updateStateOnKeyboardNavigation(n,e){this.setState({value:n}),this.triggerOnChange(n,e),this.applyState(e)}getLastSelectedOrDeselectedIndex(n,e){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=e),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...K.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,onCancel:v.func,skipDisabledItems:v.bool,inputAttributes:v.object},b.defaultProps={...K.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=b;const N=h.createPropsContext(),R=h.withIdHOC(h.withPropsContext(N,h.withAdaptiveModeContext(F)));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),v=require("prop-types"),h=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),j=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),U=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),K=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("@progress/kendo-react-intl"),C=require("../messages/index.js"),ie=require("../common/ListFilter.js"),P=require("../common/withCustomComponent.js");function oe(b){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const e in b)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(b,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>b[e]})}}return n.default=b,Object.freeze(n)}const f=oe(W),{sizeMap:w,roundedMap:ae}=h.kendoThemeMaps,ne="Please enter a valid value!",E=b=>b.preventDefault(),_=b=>b===2,I=class I extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new K(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const{dataItemKey:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=a[e-p],r=this.value.findIndex(m=>g.areSame(m,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(m=>g.areSame(m,u,o));let i=[];r!==-1?(i=this.value,i.splice(r,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.triggerOnChange(i,t),this.base.triggerPageChangeCornerItems(u,t)},this.onTagDelete=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(e,t)=>{const{allowCustom:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),i=o&&u,l=a[e-p];l&&r!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):i&&e===-1&&this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.searchbarRef=e=>{const t=this._input=e&&e.input;t&&this.state.focused&&window.setTimeout(()=>t.focus(),0)},this.onChangeHandler=e=>{const t=this.base.initState(),o=e.target.value;t.syntheticEvent=e,this.props.filter===void 0&&(t.data.text=o),t.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(t),this.setState({currentValue:this.value})),this.base.filterChanged(o,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.value.length>0&&this.triggerOnChange([],t),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t);const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(t)},this.onInputKeyDown=e=>{const{textField:t,groupField:o}=this.props,s=g.getFilteredData(this.props),a=e.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:r,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=e,!p&&this.value.length>0&&(a===h.Keys.left||a===h.Keys.right||a===h.Keys.home||a===h.Keys.end||a===h.Keys.delete||a===h.Keys.backspace)&&!e.shiftKey)return this.onTagsNavigate(e,l);const m=()=>{e.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===h.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===h.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if((e.ctrlKey||e.metaKey)&&e.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===h.Keys.end){const d=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===h.Keys.home){const d=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(e.shiftKey&&e.keyCode===h.Keys.up){let d;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?d=i!==0?s.slice(i-1,i):[s[i]]:c===i?d=[s[c-1]]:i>=0&&(d=c>i?s.slice(i-1,c):s.slice(c-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.shiftKey&&e.keyCode===h.Keys.down){let d;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?d=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?d=s.slice(i,i+2):i>=0&&(d=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(e.altKey&&a===h.Keys.up)m();else if(a===h.Keys.up||a===h.Keys.down){if(o!==""&&t)if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=0;if(a===h.Keys.down||a===h.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[t]);d=c&&s.findIndex(y=>y[t]===c[t])}else if(a===h.Keys.up||a===h.Keys.left){let c;if(i===-1)c=s,d=s.findIndex(y=>!y.disabled&&y[t]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();d=y&&s.findIndex(x=>x[t]===y[t])}}if(d){const c=d-i;this.onNavigate(l,a,c)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=null;if(a===h.Keys.down||a===h.Keys.right)d=s.slice(i+1).find(c=>!c.disabled);else if(a===h.Keys.up||a===h.Keys.left){const c=s.slice(0,i);for(d=c.pop();d&&d.disabled;)d=c.pop()}if(d){const c=d.id-i-1;this.onNavigate(l,a,c)}else this.onNavigate(l,a)}this.applyState(l),e.preventDefault()}else a===h.Keys.enter?(e.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(e):r&&r.disabled?m():this.selectFocusedItem(e)):a===h.Keys.esc&&m();else e.altKey&&a===h.Keys.down?m():a===h.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,r=g.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),m=o&&i&&f.createElement("div",{className:h.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:E},f.createElement("div",{className:h.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(h.IconWrap,{name:"plus",icon:$.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&p!==void 0&&(d=g.getItemValue(r[0],p)),f.createElement(f.Fragment,null,e&&f.createElement("div",{className:"k-list-header"},e),m,f.createElement("div",{className:h.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&d&&r.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:a}),this.renderList()),this.showLicenseWatermark&&f.createElement(h.WatermarkOverlay,null),t&&f.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,o=g.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:e.popupWidth,p={dir:t!==void 0?t:e.dirCalculated,width:a,popupSettings:{...s,popupClass:h.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,filterable:t,filter:o}=this.props,{windowWidth:s=0}=this.state,a=o!==void 0?o:this.state.text;this.localization=se.provideLocalizationService(this);const p=t?f.createElement(ie,{value:a,ref:r=>this._adaptiveInput=r&&r.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,u={title:e,expand:this.opened,onClose:r=>this.onCancel(r),windowWidth:s,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(C.adaptiveModeFooterCancel,C.messages[C.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(C.adaptiveModeFooterApply,C.messages[C.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...u},f.createElement(te.ActionSheetContent,{overflowHidden:!0},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.renderList=()=>{const{textField:e,listNoDataRender:t,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=g.getFilteredData(this.props),r=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),m=`translateY(${r.translate}px)`;return f.createElement(U,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:e,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{r.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:r.enabled?{transform:m}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:t,onMouseDown:E,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:r.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:s}=this.props;let a=g.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*p;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][s];for(let l=1;l<a.length&&!(p*l>r);l++)a[l]&&a[l][s]&&(i=a[l][s]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=e=>{const t=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!t)return;const s=this.base.initState();s.syntheticEvent=e;const a=o?{[o]:t}:t;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const o=this.base.initState();o.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(e,t)=>{const o=this.base.initState();o.syntheticEvent=t,this.handleItemSelect(e,o),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(o),t.stopPropagation(),this.applyState(o)},this.handleBlur=e=>{if(!this.state.focused||this._skipFocusEvent)return;const t=this.base.initState(),{allowCustom:o,filterable:s}=this.props;t.syntheticEvent=e,t.data.focused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(t.data.text=""),this.applyState(t)},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ne)},this.validate(n)}get _inputId(){return this.props.id}get document(){if(h.canUseDOM)return this.element&&this.element.ownerDocument||document}validate(n){if(n.filterable||n.virtual){const e=[];n.filterable&&e.push("filterable"),n.virtual&&e.push("virtualization"),this.showLicenseWatermark=!h.validatePackage(X.packageMetadata,{component:"MultiSelect",features:e})}}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:e}=this.props,t=[];return n===void 0?this.value.forEach(o=>{t.push({text:g.getItemValue(o,e),data:[o]})}):t.push(...n),t}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:n,valid:t,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:I.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:I.defaultProps.validityStyles}componentDidUpdate(n,e){var m;const{virtual:t,groupField:o=""}=this.props,s=g.getFilteredData(this.props),a=t?t.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:e.opened,r=!u&&this.opened,i=u&&!this.opened,l=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),t&&t.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(m=this.base.getGroupedDataModernMode(s,o))==null?void 0:m.indexOf(d)),r&&t?this.base.scrollToVirtualItem(t,c-a):r&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&d&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,e,t){const{allowCustom:o}=this.props,s=g.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),r=o&&a,i=_(p),l=this.base,m=l.vs;if(this.opened&&e===h.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:e,current:u,max:(m.enabled?m.total:s.length)-1,min:r?-1:0,skipItems:t||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:e,label:t,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:r,rounded:i,fillMode:l,loading:m,filter:d}=this.props,{text:c,focused:y,focusedTag:x,currentValue:L}=this.state,k=this.base.vs,T=this.props.id||this._inputId;k.enabled=u!==void 0,u!==void 0&&(k.skip=u.skip,k.total=u.total,k.pageSize=u.pageSize);const S=this.mobileMode&&this.opened?L:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,q=!!(d!==void 0?d:c)||S&&S.length>0,[z,B]=P(this.props.prefix||f.Fragment),[V,A]=P(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:h.classNames("k-multiselect k-input",e,{[`k-input-${w[r]||r}`]:r,[`k-rounded-${ae[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":m,"k-required":this.required}),style:t?{...n,width:void 0}:n,dir:o,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&f.createElement(z,{...B}),f.createElement("div",{className:h.classNames("k-input-values")},f.createElement("div",{className:h.classNames("k-chip-list",{[`k-chip-list-${w[r]||r}`]:r}),role:"listbox",id:"tagslist-"+this.base.guid},S&&S.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:S,guid:this.base.guid,focused:x?S.find(H=>g.matchTags(H,x,p)):void 0,size:r})),this.renderSearchBar(T)),m&&f.createElement(h.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(V,{...A}),q&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?f.createElement(j.FloatingLabel,{label:t,editorId:T,editorValue:c||g.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:r,inputAttributes:i}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:m}=this.getFocusedState(),d=this.value.length===0&&!l?a:void 0,c=o&&o.length>0?void 0:a,y=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${m}`,x={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(Q,{id:n,size:Math.max((d||"").length,l.length,1),placeholder:this.mobileMode&&this.opened?c:d,value:l,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:y,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:r,inputAttributes:i,...x})}onTagsNavigate(n,e){const t=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>g.matchTags(i,o,a)):-1,u;const r=p!==-1;if(t===h.Keys.left)r?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(t===h.Keys.right)p===s.length-1?u=void 0:r&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(t===h.Keys.home&&!n.shiftKey)u=s[0];else if(t===h.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(t===h.Keys.delete){if(r){const i=this.value;g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e)}}else if(t===h.Keys.backspace){const i=this.value;if(r)g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,e);else if(!r&&s.length){const l=s.pop();g.removeDataItems(i,l.data,a),this.triggerOnChange(i,e)}}u!==o&&(e.data.focusedTag=u,e.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(e)}triggerOnChange(n,e){this.props.value===void 0&&(e.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),e.events.push({type:"onChange"})}selectFocusedItem(n,e){const{virtual:t}=this.props,o=g.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),a=t?t.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,e){e.length=0,e.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=g.itemIndexStartsWith,skipDisabledItems:u}=this.props,r=g.getFilteredData(this.props),i=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:r[n-i],focusedType:1};const m=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=p(r,e,a),{focusedItem:r[l],focusedIndex:l+i,focusedType:1};if(m.length){const d=m[m.length-1];return l=r.findIndex(c=>g.areSame(c,d,o)),r[l]!==void 0?{focusedIndex:l+i,focusedItem:r[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!e&&i===0){const d=r.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:d,focusedItem:r[d-i],focusedType:1}}return i===0?{focusedItem:r[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const e of n)this.setState({windowWidth:e.target.clientWidth})}updateStateOnKeyboardNavigation(n,e){this.setState({value:n}),this.triggerOnChange(n,e),this.applyState(e)}getLastSelectedOrDeselectedIndex(n,e){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=e),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};I.displayName="MultiSelect",I.propTypes={...K.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,onCancel:v.func,skipDisabledItems:v.bool,inputAttributes:v.object},I.defaultProps={...K.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=I;const N=h.createPropsContext(),R=h.withIdHOC(h.withPropsContext(N,h.withAdaptiveModeContext(F)));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=F;