@progress/kendo-react-dropdowns 14.5.0-develop.13 → 14.5.0-develop.14

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

package/DropDownTree/DropDownTree.mjs

@@ -7,22 +7,22 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { validatePackage as at, getLicenseMessage as rt, usePropsContext as it, useId as lt, getTabIndex as st, ZIndexContext as Se, useRtl as ct, useAdaptiveModeContext as ut, canUseDOM as dt, noop as X, Keys as c, mapTree as pt, extendDataItem as ft, classNames as re, kendoThemeMaps as mt, IconWrap as Te, WatermarkOverlay as vt, createPropsContext as gt } from "@progress/kendo-react-common";
-import { Popup as bt } from "@progress/kendo-react-popup";
-import { useLocalization as ht } from "@progress/kendo-react-intl";
+import { validatePackage as at, getLicenseMessage as rt, usePropsContext as it, useId as lt, getTabIndex as st, ZIndexContext as Se, useWebMcpRegister as ct, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, noop as X, Keys as c, mapTree as ft, extendDataItem as mt, classNames as re, kendoThemeMaps as vt, IconWrap as Me, WatermarkOverlay as gt, createPropsContext as bt } from "@progress/kendo-react-common";
+import { Popup as ht } from "@progress/kendo-react-popup";
+import { useLocalization as Et } from "@progress/kendo-react-intl";
 import { TreeView as Re } from "@progress/kendo-react-treeview";
-import { packageMetadata as Me } from "../package-metadata.mjs";
-import { getItemValue as Et, areSame as Pe, isPresent as yt } from "../common/utils.mjs";
-import { useDropdownWidth as Ct } from "./useDropdownWidth.mjs";
-import { ListNoData as kt } from "./ListNoData.mjs";
+import { packageMetadata as Te } from "../package-metadata.mjs";
+import { getItemValue as yt, areSame as Pe, isPresent as Ct } from "../common/utils.mjs";
+import { useDropdownWidth as kt } from "./useDropdownWidth.mjs";
+import { ListNoData as xt } from "./ListNoData.mjs";
 import { clear as Ne, messages as ie, nodata as j } from "../messages/index.mjs";
-import { FloatingLabel as xt } from "@progress/kendo-react-labels";
+import { FloatingLabel as wt } from "@progress/kendo-react-labels";
 import Oe from "../common/ListFilter.mjs";
-import { Button as wt } from "@progress/kendo-react-buttons";
-import { xIcon as Dt, chevronDownIcon as Ft } from "@progress/kendo-svg-icons";
-import { AdaptiveMode as It } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as St } from "@progress/kendo-react-layout";
-const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please select a value from the list!", Ot = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Ve = (E) => E.split("_").map((D) => parseInt(D, 10)), Vt = (E, D) => {
+import { Button as Dt } from "@progress/kendo-react-buttons";
+import { xIcon as Ft, chevronDownIcon as It } from "@progress/kendo-svg-icons";
+import { AdaptiveMode as St } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Mt } from "@progress/kendo-react-layout";
+const { sizeMap: Rt, roundedMap: Tt } = vt, Pt = 12e3, Nt = 2e3, Ot = "Please select a value from the list!", Vt = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Ve = (E) => E.split("_").map((D) => parseInt(D, 10)), Wt = (E, D) => {
   const { validationMessage: G, valid: A, required: r } = E;
   return {
     customError: G !== void 0,
@@ -44,49 +44,49 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   size: void 0,
   rounded: void 0,
   fillMode: void 0
-}, Lt = gt(), Le = t.forwardRef((E, D) => {
-  const G = !at(Me, { component: "DropDownTree" }), A = rt(Me), r = it(Lt, E), a = {
+}, Lt = bt(), We = t.forwardRef((E, D) => {
+  const G = !at(Te, { component: "DropDownTree" }), A = rt(Te), r = it(Lt, E), a = {
     ...le,
     ...r
-  }, We = lt(), se = a.id || We, {
+  }, Le = lt(), se = a.id || Le, {
     data: N,
     dataItemKey: O,
     popupSettings: f = {},
     style: V,
     opened: u,
     disabled: F,
-    onOpen: L = X,
+    onOpen: W = X,
     onClose: m = X,
     placeholder: H,
     label: I,
     name: Ke,
     selectField: _,
-    subItemsField: W,
+    subItemsField: L,
     validationMessage: Z,
     valid: ze,
     required: J,
     validityStyles: qe
-  } = a, Q = st(a.tabIndex, F), i = t.useRef(null), v = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), y = t.useRef(null), U = t.useRef(!1), [ce, Be] = t.useState(void 0), C = a.value !== void 0, g = C ? a.value : ce !== void 0 ? ce : a.defaultValue, K = yt(g), ee = K ? Et(g, a.textField) : "", te = Vt({ validationMessage: Z, valid: ze, required: J }, K), ue = t.useContext(Se), Ae = ue ? ue + Pt : Mt, He = t.useCallback(() => v.current && v.current.focus(), []);
+  } = a, Q = st(a.tabIndex, F), i = t.useRef(null), v = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), y = t.useRef(null), U = t.useRef(!1), [ce, Be] = t.useState(void 0), C = a.value !== void 0, g = C ? a.value : ce !== void 0 ? ce : a.defaultValue, K = Ct(g), ee = K ? yt(g, a.textField) : "", te = Wt({ validationMessage: Z, valid: ze, required: J }, K), ue = t.useContext(Se), Ae = ue ? ue + Nt : Pt, He = t.useCallback(() => v.current && v.current.focus(), []);
   t.useImperativeHandle(i, () => ({
     props: a,
     element: v.current,
     focus: He
-  })), t.useImperativeHandle(D, () => i.current);
-  const k = ct(v, a.dir), _e = {
-    width: Ct(
+  })), t.useImperativeHandle(D, () => i.current), ct("dropdowntree", i, a, a.webMcp);
+  const k = ut(v, a.dir), _e = {
+    width: kt(
       v,
       le,
       { ...le.popupSettings, ...f },
       V
     ),
     ...k !== void 0 ? { direction: k } : {}
-  }, [Ze, de] = t.useState(!1), l = u !== void 0 ? u : Ze, [p, ne] = t.useState(!1), [oe, $e] = t.useState(), [pe, Ue] = t.useState(""), fe = ut(), h = !!(oe && fe && oe <= fe.medium && a.adaptive), Xe = t.useCallback(() => {
+  }, [Ze, de] = t.useState(!1), l = u !== void 0 ? u : Ze, [p, ne] = t.useState(!1), [oe, $e] = t.useState(), [pe, Ue] = t.useState(""), fe = dt(), h = !!(oe && fe && oe <= fe.medium && a.adaptive), Xe = t.useCallback(() => {
     $.current && $.current.setCustomValidity && $.current.setCustomValidity(
-      te.valid ? "" : Z === void 0 ? Nt : Z
+      te.valid ? "" : Z === void 0 ? Ot : Z
     );
   }, [Z, te]);
   t.useEffect(Xe), t.useEffect(() => {
-    const e = dt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
+    const e = pt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
       document != null && document.body && e && e.disconnect();
     };
@@ -94,14 +94,14 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   const me = t.useCallback(
     (e) => {
       if (!l) {
-        if (L) {
+        if (W) {
           const o = { ...e };
-          L.call(void 0, o);
+          W.call(void 0, o);
         }
         u === void 0 && de(!0);
       }
     },
-    [l, u, L]
+    [l, u, W]
   ), x = t.useCallback(
     (e) => {
       if (l) {
@@ -128,8 +128,8 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
         (l ? x : me)(o);
       }
     },
-    [l, u, L, m]
-  ), T = t.useCallback((e) => {
+    [l, u, W, m]
+  ), M = t.useCallback((e) => {
     U.current = !0, e(), window.setTimeout(() => U.current = !1, 0);
   }, []), je = t.useCallback(
     (e) => {
@@ -137,34 +137,34 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       const { keyCode: o, altKey: s } = e, d = y.current && y.current.element;
       if (!i.current || e.isDefaultPrevented() && ((w = S.current) == null ? void 0 : w.element) === e.target)
         return;
-      const M = {
+      const T = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: i.current
       };
       if (l)
         if (o === c.esc || s && o === c.up)
-          e.preventDefault(), x(M);
+          e.preventDefault(), x(T);
         else if (d && d.querySelector(".k-focus") && (o === c.up || o === c.down || o === c.left || o === c.right || o === c.home || o === c.end)) {
           if (o === c.up && ((Fe = S.current) != null && Fe.element)) {
             const B = Array.from(d.querySelectorAll(".k-treeview-item")), Ie = [...B].reverse().find((P) => P == null ? void 0 : P.querySelector(".k-focus"));
             if (Ie && B.indexOf(Ie) === 0)
-              return T(() => {
+              return M(() => {
                 var P;
                 b((P = S.current) == null ? void 0 : P.element);
               });
           }
-          T(X);
-        } else o === c.down && T(() => {
+          M(X);
+        } else o === c.down && M(() => {
           var B;
           b(((B = S.current) == null ? void 0 : B.element) || d);
         });
-      else s && o === c.down ? (e.preventDefault(), me(M)) : l || o === c.esc && Ee(e);
+      else s && o === c.down ? (e.preventDefault(), me(T)) : l || o === c.esc && Ee(e);
     },
-    [l, u, L, m]
+    [l, u, W, m]
   ), ge = t.useCallback((e) => {
     const { keyCode: o, altKey: s } = e;
-    s || o !== c.up && o !== c.down || (e.preventDefault(), T(
+    s || o !== c.up && o !== c.down || (e.preventDefault(), M(
       o === c.up ? () => {
         b(v.current);
       } : () => {
@@ -173,7 +173,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       }
     ));
   }, []), b = t.useCallback((e) => {
-    e && T(() => e.focus());
+    e && M(() => e.focus());
   }, []), Ge = t.useCallback(
     (e) => {
       var o;
@@ -215,7 +215,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
     },
     [p, r.onBlur, l, u, m]
   ), et = t.useCallback(() => {
-    p && T(X), h && setTimeout(() => {
+    p && M(X), h && setTimeout(() => {
       var e;
       b((e = Y.current) == null ? void 0 : e.element);
     }, 300);
@@ -236,8 +236,8 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
     (e) => {
       if (Pe(e.item, g, O) || !i.current)
         return;
-      const { item: o, itemHierarchicalIndex: s, nativeEvent: d, syntheticEvent: M } = e, w = {
-        syntheticEvent: M,
+      const { item: o, itemHierarchicalIndex: s, nativeEvent: d, syntheticEvent: T } = e, w = {
+        syntheticEvent: T,
         nativeEvent: d,
         target: i.current
       };
@@ -259,11 +259,11 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   ), ye = t.useCallback(
     (e) => {
       if (e.syntheticEvent.stopPropagation(), r.onExpandChange && i.current) {
-        const { item: o, itemHierarchicalIndex: s, nativeEvent: d, syntheticEvent: M } = e, w = {
+        const { item: o, itemHierarchicalIndex: s, nativeEvent: d, syntheticEvent: T } = e, w = {
           level: Ve(s),
           item: o,
           nativeEvent: d,
-          syntheticEvent: M,
+          syntheticEvent: T,
           target: i.current
         };
         r.onExpandChange.call(void 0, w);
@@ -308,7 +308,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       windowWidth: oe,
       mobileFilter: e
     };
-    return /* @__PURE__ */ t.createElement(It, { ...o }, /* @__PURE__ */ t.createElement(St, null, N.length > 0 ? /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement(St, { ...o }, /* @__PURE__ */ t.createElement(Mt, null, N.length > 0 ? /* @__PURE__ */ t.createElement(
       Re,
       {
         ref: y,
@@ -318,7 +318,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
         textField: a.textField,
         selectField: _,
         expandField: a.expandField,
-        childrenField: W,
+        childrenField: L,
         expandIcons: !0,
         onItemClick: he,
         onExpandChange: ye,
@@ -331,16 +331,16 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   }, nt = t.useCallback((e) => {
     for (const o of e)
       $e(o.target.clientWidth);
-  }, []), ke = t.useMemo(() => C || !K ? N : pt(
+  }, []), ke = t.useMemo(() => C || !K ? N : ft(
     N,
-    W,
-    (e) => ft(e, W, { [_]: Pe(e, g, O) })
-  ), [N, g, C, K, _, W]), xe = a.listNoData || kt, ot = a.valueHolder || Ot, ae = ht(), we = !qe || te.valid, { size: R, rounded: z, fillMode: q } = a, De = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    L,
+    (e) => mt(e, L, { [_]: Pe(e, g, O) })
+  ), [N, g, C, K, _, L]), xe = a.listNoData || xt, ot = a.valueHolder || Vt, ae = Et(), we = !qe || te.valid, { size: R, rounded: z, fillMode: q } = a, De = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
       className: re("k-dropdowntree k-picker", a.className, {
-        [`k-picker-${Tt[R] || R}`]: R,
-        [`k-rounded-${Rt[z] || z}`]: z,
+        [`k-picker-${Rt[R] || R}`]: R,
+        [`k-rounded-${Tt[z] || z}`]: z,
         [`k-picker-${q}`]: q,
         "k-focus": p,
         "k-invalid": !we,
@@ -369,7 +369,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       "aria-required": J
     },
     /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, (ee || H) && /* @__PURE__ */ t.createElement(ot, { item: g }, ee || H)),
-    a.loading && /* @__PURE__ */ t.createElement(Te, { className: "k-input-loading-icon", name: "loading" }),
+    a.loading && /* @__PURE__ */ t.createElement(Me, { className: "k-input-loading-icon", name: "loading" }),
     K && !F && /* @__PURE__ */ t.createElement(
       "span",
       {
@@ -380,10 +380,10 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
         tabIndex: -1,
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ t.createElement(Te, { name: "x", icon: Dt })
+      /* @__PURE__ */ t.createElement(Me, { name: "x", icon: Ft })
     ),
     /* @__PURE__ */ t.createElement(
-      wt,
+      Dt,
       {
         tabIndex: -1,
         type: "button",
@@ -392,7 +392,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
         size: R,
         fillMode: q,
         icon: "chevron-down",
-        svgIcon: Ft
+        svgIcon: It
       }
     ),
     /* @__PURE__ */ t.createElement(
@@ -408,7 +408,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       /* @__PURE__ */ t.createElement("option", { value: a.valueMap ? a.valueMap.call(void 0, g) : g })
     ),
     !h && /* @__PURE__ */ t.createElement(Se.Provider, { value: Ae }, /* @__PURE__ */ t.createElement(
-      bt,
+      ht,
       {
         ...f,
         className: re(f.className, { "k-rtl": k === "rtl" }),
@@ -444,7 +444,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
           textField: a.textField,
           selectField: _,
           expandField: a.expandField,
-          childrenField: W,
+          childrenField: L,
           expandIcons: !0,
           onItemClick: he,
           onExpandChange: ye,
@@ -454,11 +454,11 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
           animate: !1
         }
       ) : /* @__PURE__ */ t.createElement(xe, null, ae.toLanguageString(j, ie[j])),
-      G && /* @__PURE__ */ t.createElement(vt, { message: A })
+      G && /* @__PURE__ */ t.createElement(gt, { message: A })
     ))
   ), h && tt());
   return I ? /* @__PURE__ */ t.createElement(
-    xt,
+    wt,
     {
       label: I,
       editorValue: ee,
@@ -471,7 +471,7 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       dir: k
     }
   ) : De;
-}), Wt = {
+}), Kt = {
   opened: n.bool,
   disabled: n.bool,
   dir: n.string,
@@ -528,9 +528,9 @@ const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   adaptiveSubtitle: n.string,
   adaptive: n.bool
 };
-Le.displayName = "KendoReactDropDownTree";
-Le.propTypes = Wt;
+We.displayName = "KendoReactDropDownTree";
+We.propTypes = Kt;
 export {
-  Le as DropDownTree,
+  We as DropDownTree,
   Lt as DropDownTreePropsContext
 };

package/DropDownTree/DropDownTreeProps.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, WebMcpProps } from '@progress/kendo-react-common';
 import { ItemRenderProps } from '@progress/kendo-react-treeview';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
 import { DropDownsPopupSettings } from '../common/settings.js';
@@ -515,4 +515,9 @@ export interface DropDownTreeProps extends FormComponentProps {
      * ```
      */
     adaptiveSubtitle?: string;
+    /**
+     * Enables Web MCP tool registration for this component.
+     * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
+     */
+    webMcp?: boolean | WebMcpProps;
 }

package/MultiSelect/MultiSelect.mjs

@@ -7,7 +7,7 @@
  */
 import * as g from "react";
 import v from "prop-types";
-import { withIdHOC as J, withPropsContext as Q, withAdaptiveModeContext as X, createPropsContext as Z, Keys as u, classNames as S, kendoThemeMaps as tt, IconWrap as B, WatermarkOverlay as et, getLicenseMessage as st, canUseDOM as V, validatePackage as it, subscribeToKendoPaste as ot } from "@progress/kendo-react-common";
+import { createPropsContext as J, Keys as u, classNames as S, kendoThemeMaps as Q, IconWrap as B, WatermarkOverlay as X, getLicenseMessage as Z, canUseDOM as V, validatePackage as tt, subscribeToKendoPaste as et, withIdHOC as st, withPropsContext as it, withAdaptiveModeContext as ot } from "@progress/kendo-react-common";
 import { plusIcon as at } from "@progress/kendo-svg-icons";
 import { FloatingLabel as nt } from "@progress/kendo-react-labels";
 import lt from "../common/ListContainer.mjs";
@@ -24,7 +24,7 @@ import { AdaptiveMode as mt } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as vt } from "@progress/kendo-react-layout";
 import bt from "../common/ListFilter.mjs";
 import H from "../common/withCustomComponent.mjs";
-const { sizeMap: P, roundedMap: It } = tt, yt = "Please enter a valid value!", W = (M) => M.preventDefault(), $ = (M) => M === 2, C = class C extends g.Component {
+const { sizeMap: P, roundedMap: It } = Q, yt = "Please enter a valid value!", W = (M) => M.preventDefault(), $ = (M) => M === 2, C = class C extends g.Component {
   constructor(l) {
     super(l), this.state = {
       activedescendant: w.PopupList,
@@ -194,7 +194,7 @@ const { sizeMap: P, roundedMap: It } = tt, yt = "Please enter a valid value!", W
         },
         !h && f && r.length !== 0 && /* @__PURE__ */ g.createElement(rt, { group: f, render: a }),
         this.renderList()
-      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(et, { message: this.licenseMessage }), e && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, e));
+      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(X, { message: this.licenseMessage }), e && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
       const t = this.base, { dir: e } = this.props, o = x(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : t.popupWidth, i = {
         dir: e !== void 0 ? e : t.dirCalculated,
@@ -335,7 +335,7 @@ const { sizeMap: P, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
         this.validity.valid ? "" : this.props.validationMessage || yt
       );
-    }, this.validate(l), this.licenseMessage = st(A);
+    }, this.validate(l), this.licenseMessage = Z(A);
   }
   get _inputId() {
     return this.props.id;
@@ -347,7 +347,7 @@ const { sizeMap: P, roundedMap: It } = tt, yt = "Please enter a valid value!", W
   validate(l) {
     if (l.filterable || l.virtual) {
       const t = [];
-      l.filterable && t.push("filterable"), l.virtual && t.push("virtualization"), this.showLicenseWatermark = !it(A, {
+      l.filterable && t.push("filterable"), l.virtual && t.push("virtualization"), this.showLicenseWatermark = !tt(A, {
         component: "MultiSelect",
         features: t
       });
@@ -423,7 +423,7 @@ const { sizeMap: P, roundedMap: It } = tt, yt = "Please enter a valid value!", W
     var t;
     this.observerResize = V && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
     const l = this.props.name || this.props.id;
-    this.KendoPasteSubscription = ot(this._element, {
+    this.KendoPasteSubscription = et(this._element, {
       fieldName: l,
       onValueChange: (e) => {
         this.handleKendoPasteValue(e);
@@ -723,10 +723,10 @@ C.displayName = "MultiSelect", C.propTypes = {
   suffix: void 0
 };
 let _ = C;
-const xt = Z(), St = J(
-  Q(
+const xt = J(), St = st(
+  it(
     xt,
-    X(_)
+    ot(_)
   )
 );
 St.displayName = "KendoReactMultiSelect";

package/MultiSelect/MultiSelectProps.d.ts

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { MultiSelect } from './MultiSelect.js';
-import { AdaptiveModeContextType, CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
+import { AdaptiveModeContextType, CustomComponent, FormComponentProps, WebMcpProps } from '@progress/kendo-react-common';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent, CancelEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings.js';
 import { ListGroupItemProps } from '../common/ListGroupItem.js';
@@ -599,6 +599,11 @@ export interface MultiSelectProps extends FormComponentProps {
      * ```
      */
     inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Enables Web MCP tool registration for this component.
+     * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
+     */
+    webMcp?: boolean | WebMcpProps;
     /**
      * @hidden
      * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.

package/MultiSelectMcpWrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MultiSelectHandle } from './MultiSelect/MultiSelect.js';
+import { MultiSelectProps } from './MultiSelect/MultiSelectProps';
+/**
+ * MultiSelect wrapper that integrates the Web MCP hook.
+ *
+ * @hidden
+ */
+import * as React from 'react';
+/** @hidden */
+export declare const MultiSelectWrapper: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<MultiSelectHandle>>;

package/MultiSelectMcpWrapper.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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 u=require("react"),a=require("./MultiSelect/MultiSelect.js"),n=require("@progress/kendo-react-common");function i(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const l=i(u),o=l.forwardRef((e,r)=>{const[t,c]=n.useMergedRef(r);return n.useWebMcpRegister("multiselect",t,e,e.webMcp),l.createElement(a.MultiSelect,{...e,ref:c})});o.displayName="KendoReactMultiSelect";exports.MultiSelectWrapper=o;

package/MultiSelectMcpWrapper.mjs

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as t from "react";
+import { MultiSelect as l } from "./MultiSelect/MultiSelect.mjs";
+import { useMergedRef as m, useWebMcpRegister as f } from "@progress/kendo-react-common";
+const o = t.forwardRef((e, r) => {
+  const [c, i] = m(r);
+  return f("multiselect", c, e, e.webMcp), /* @__PURE__ */ t.createElement(l, { ...e, ref: i });
+});
+o.displayName = "KendoReactMultiSelect";
+export {
+  o as MultiSelectWrapper
+};