@progress/kendo-react-dropdowns 7.4.0 → 7.5.0-develop.10

package/DropDownTree/useDropdownWidth.mjs

@@ -7,19 +7,22 @@
  */
 "use client";
 import * as p from "react";
-function u(d, t, i) {
-  const [n, e] = p.useState(t);
+function u(t, e, n) {
+  const [d, i] = p.useState(e);
   return p.useEffect(
     () => {
-      n !== void 0 && d.current && e(d.current.offsetWidth);
+      d !== void 0 && t.current && i(t.current.offsetWidth);
     },
-    i
-  ), n;
+    n
+  ), d;
 }
-function c(d, t, i, n) {
-  const e = i.width !== void 0 && i.width !== t.popupSettings.width, o = n.width !== void 0, s = e ? i.width : o ? n.width : t.popupSettings.width, h = u(d, s);
-  return e || o ? s : h && h > t.popupSettings.width ? h : t.popupSettings.width;
+function r(t) {
+  return typeof t == "string" ? Number(t.replace("px", "")) : t || void 0;
+}
+function W(t, e, n, d) {
+  const i = r(e.popupSettings.width), s = (n.width !== void 0 && r(n.width)) !== i, c = d.width !== void 0, h = s ? n.width : c ? d.width : i, o = r(u(t, h));
+  return s || c ? h : o && i && o > i ? o : i;
 }
 export {
-  c as useDropdownWidth
+  W as useDropdownWidth
 };

package/MultiSelectTree/MultiSelectTree.js

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

package/MultiSelectTree/MultiSelectTree.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as t from "react";
 import a from "prop-types";
-import { createPropsContext as at, usePropsContext as it, validatePackage as ot, useId as rt, getTabIndex as lt, useRtl as st, canUseDOM as ct, noop as Z, Keys as r, classNames as ee, IconWrap as ut, kendoThemeMaps as dt } from "@progress/kendo-react-common";
+import { createPropsContext as at, usePropsContext as it, validatePackage as rt, useId as ot, getTabIndex as lt, useRtl as st, canUseDOM as ct, noop as Z, Keys as o, classNames as ee, IconWrap as ut, kendoThemeMaps as dt } from "@progress/kendo-react-common";
 import { Popup as pt } from "@progress/kendo-react-popup";
 import { useLocalization as ft } from "@progress/kendo-react-intl";
 import { TreeView as Te } from "@progress/kendo-react-treeview";
@@ -24,14 +24,14 @@ import Ne from "../common/ListFilter.mjs";
 import { AdaptiveMode as kt } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as Ft } from "@progress/kendo-react-layout";
 import { MOBILE_MEDIUM_DEVISE as xt } from "../common/constants.mjs";
-const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt } = dt, St = (O) => O.split("_").map((R) => parseInt(R, 10)), Tt = (O, R) => {
-  const { validationMessage: n, valid: K, required: F } = O;
+const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St } = dt, wt = (O) => O.split("_").map((R) => parseInt(R, 10)), Tt = (O, R) => {
+  const { validationMessage: n, valid: K, required: x } = O;
   return {
     customError: n !== void 0,
-    valid: !!(K !== void 0 ? K : !F || R),
+    valid: !!(K !== void 0 ? K : !x || R),
     valueMissing: !R
   };
-}, D = {
+}, F = {
   checkField: "checkField",
   checkIndeterminateField: "checkIndeterminateField",
   subItemsField: "items",
@@ -47,31 +47,31 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   validityStyles: !0
 }, Dt = at(), de = t.forwardRef((O, R) => {
   const n = it(Dt, O);
-  ot(mt);
-  const K = rt(), F = n.id || K, {
+  rt(mt);
+  const K = ot(), x = n.id || K, {
     data: q = [],
-    dataItemKey: x,
+    dataItemKey: I,
     popupSettings: M = {},
-    style: B = {},
-    opened: I,
+    style: L = {},
+    opened: S,
     disabled: C,
     onOpen: ae = Z,
     onClose: A = Z,
     placeholder: pe,
-    label: L,
+    label: B,
     name: Oe,
-    checkField: fe = D.checkField,
-    checkIndeterminateField: me = D.checkIndeterminateField,
-    subItemsField: ge = D.subItemsField,
+    checkField: fe = F.checkField,
+    checkIndeterminateField: me = F.checkIndeterminateField,
+    subItemsField: ge = F.subItemsField,
     validationMessage: W,
-    valid: Be,
+    valid: Le,
     tags: ve,
     value: m,
-    required: he = D.required,
-    validityStyles: Le = D.validityStyles
-  } = n, z = lt(n.tabIndex, C), l = t.useRef(null), y = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), _ = t.useRef(null), E = t.useRef(null), $ = t.useRef(!1), H = t.useRef([]), G = t.useRef(null), [N, Ve] = t.useState(), [Ke, be] = t.useState(!1), [d, oe] = t.useState(!1), [re, qe] = t.useState(), [Ae, We] = t.useState([]), [ye, ze] = t.useState(""), P = !!(re && re <= xt && n.adaptive), s = I !== void 0 ? I : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: W, valid: Be, required: he }, le), S = st(y, n.dir), _e = {
-    width: ht(y, D, M, B),
-    ...S !== void 0 ? { direction: S } : {}
+    required: he = F.required,
+    validityStyles: Be = F.validityStyles
+  } = n, z = lt(n.tabIndex, C), l = t.useRef(null), y = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), _ = t.useRef(null), E = t.useRef(null), $ = t.useRef(!1), H = t.useRef([]), G = t.useRef(null), [N, Ve] = t.useState(), [Ke, be] = t.useState(!1), [d, re] = t.useState(!1), [oe, qe] = t.useState(), [Ae, We] = t.useState([]), [ye, ze] = t.useState(""), P = !!(oe && oe <= xt && n.adaptive), s = S !== void 0 ? S : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: W, valid: Le, required: he }, le), T = st(y, n.dir), _e = {
+    width: ht(y, F, { ...F.popupSettings, ...M }, L),
+    ...T !== void 0 ? { direction: T } : {}
   }, $e = t.useCallback(() => y.current && y.current.focus(), []);
   H.current = ve === void 0 ? (m || []).map((e) => ({ text: gt(e, n.textField), data: [e] })) : [...ve], t.useImperativeHandle(
     l,
@@ -101,11 +101,11 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [m, s]
   );
   const k = t.useCallback(
-    (e, i, o) => {
+    (e, i, r) => {
       if (n.onChange) {
         const b = {
           items: i,
-          operation: o,
+          operation: r,
           ...e
         };
         n.onChange.call(void 0, b);
@@ -114,16 +114,16 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [n.onChange]
   ), U = t.useCallback(
     (e) => {
-      if (vt(e.item, m, x) || !l.current)
+      if (vt(e.item, m, I) || !l.current)
         return;
-      const { item: i, nativeEvent: o, syntheticEvent: b } = e, T = {
+      const { item: i, nativeEvent: r, syntheticEvent: b } = e, D = {
         syntheticEvent: b,
-        nativeEvent: o,
+        nativeEvent: r,
         target: l.current
       };
-      k(T, [i], "toggle");
+      k(D, [i], "toggle");
     },
-    [m, x, k]
+    [m, I, k]
   ), j = t.useCallback(
     (e) => {
       if (!s) {
@@ -131,13 +131,13 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           const i = { ...e };
           ae.call(void 0, i);
         }
-        I === void 0 && (be(!0), We(m || []), P && setTimeout(() => {
+        S === void 0 && (be(!0), We(m || []), P && setTimeout(() => {
           var i;
           u((i = ie.current) == null ? void 0 : i.element);
         }, 300));
       }
     },
-    [s, I, ae, P, ie]
+    [s, S, ae, P, ie]
   ), g = t.useCallback(
     (e) => {
       if (s) {
@@ -145,10 +145,10 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           const i = { ...e };
           A.call(void 0, i);
         }
-        I === void 0 && be(!1);
+        S === void 0 && be(!1);
       }
     },
-    [s, I, A]
+    [s, S, A]
   ), h = t.useCallback(
     (e) => {
       $.current = !0, e(), window.setTimeout(() => $.current = !1, 0);
@@ -172,7 +172,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [d, u]
   ), je = t.useCallback(
     (e) => {
-      if (!d && !$.current && (oe(!0), n.onFocus && l.current)) {
+      if (!d && !$.current && (re(!0), n.onFocus && l.current)) {
         const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
@@ -185,20 +185,20 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), Je = t.useCallback(
     (e) => {
       if (d && !$.current && l.current) {
-        oe(!1);
+        re(!1);
         const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
         if (n.onBlur) {
-          const o = { ...i };
-          n.onBlur.call(void 0, o);
+          const r = { ...i };
+          n.onBlur.call(void 0, r);
         }
         P || g(i);
       }
     },
-    [d, n.onBlur, s, I, A]
+    [d, n.onBlur, s, S, A]
   ), Qe = t.useCallback(
     () => {
       d && h(Z);
@@ -207,7 +207,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), Xe = t.useCallback(
     (e) => {
       if (!e.isDefaultPrevented() && l.current) {
-        oe(!0);
+        re(!0);
         const i = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
@@ -219,26 +219,26 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [s, j]
   ), Ye = t.useCallback(
     (e) => {
-      var Y, Se;
-      const { keyCode: i, altKey: o } = e, b = E.current && E.current.element;
+      var Y, we;
+      const { keyCode: i, altKey: r } = e, b = E.current && E.current.element;
       if (!l.current || e.isDefaultPrevented() && ((Y = w.current) == null ? void 0 : Y.element) === e.target)
         return;
-      const T = {
+      const D = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      if (m && m.length > 0 && (i === r.left || i === r.right || i === r.home || i === r.end || i === r.delete)) {
+      if (m && m.length > 0 && (i === o.left || i === o.right || i === o.home || i === o.end || i === o.delete)) {
         const c = H.current;
-        let p = N ? c.findIndex((nt) => De(nt, N, x)) : -1, f;
+        let p = N ? c.findIndex((nt) => De(nt, N, I)) : -1, f;
         const ue = p !== -1;
-        i === r.left ? (ue ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : i === r.right ? p === c.length - 1 ? f = void 0 : ue && (p = Math.min(c.length - 1, p + 1), f = c[p]) : i === r.home ? f = c[0] : i === r.end ? f = c[c.length - 1] : i === r.delete && ue && k(T, c[p].data, "delete"), f !== N && Ve(f);
+        i === o.left ? (ue ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : i === o.right ? p === c.length - 1 ? f = void 0 : ue && (p = Math.min(c.length - 1, p + 1), f = c[p]) : i === o.home ? f = c[0] : i === o.end ? f = c[c.length - 1] : i === o.delete && ue && k(D, c[p].data, "delete"), f !== N && Ve(f);
       }
       if (s)
-        if (i === r.esc || o && i === r.up)
-          e.preventDefault(), g(T);
-        else if (b && b.querySelector(".k-focus") && (i === r.up || i === r.down || i === r.left || i === r.right || i === r.home || i === r.end)) {
-          if (i === r.up && ((Se = w.current) != null && Se.element)) {
+        if (i === o.esc || r && i === o.up)
+          e.preventDefault(), g(D);
+        else if (b && b.querySelector(".k-focus") && (i === o.up || i === o.down || i === o.left || i === o.right || i === o.home || i === o.end)) {
+          if (i === o.up && ((we = w.current) != null && we.element)) {
             const c = Array.from(b.querySelectorAll(".k-treeview-item")), p = [...c].reverse().find((f) => !!(f && f.querySelector(".k-focus")));
             if (p && c.indexOf(p) === 0)
               return h(() => {
@@ -248,19 +248,19 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           }
           h(Z);
         } else
-          i === r.down && h(() => {
+          i === o.down && h(() => {
             var c;
             u(((c = w.current) == null ? void 0 : c.element) || b);
           });
       else
-        o && i === r.down && (e.preventDefault(), j(T));
+        r && i === o.down && (e.preventDefault(), j(D));
     },
-    [s, g, u, h, j, N, x, m, k]
+    [s, g, u, h, j, N, I, m, k]
   ), Ce = t.useCallback(
     (e) => {
-      const { keyCode: i, altKey: o } = e;
-      o || i !== r.up && i !== r.down || (e.preventDefault(), h(
-        i === r.up ? () => {
+      const { keyCode: i, altKey: r } = e;
+      r || i !== o.up && i !== o.down || (e.preventDefault(), h(
+        i === o.up ? () => {
           u(y.current);
         } : () => {
           u(E.current && E.current.element);
@@ -282,8 +282,8 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [k, g]
   ), Ze = t.useCallback(
     (e, i) => {
-      var o;
-      g({ target: l.current }), d || u((o = w.current) == null ? void 0 : o.element), k({
+      var r;
+      g({ target: l.current }), d || u((r = w.current) == null ? void 0 : r.element), k({
         syntheticEvent: i,
         nativeEvent: i.nativeEvent,
         target: l.current
@@ -293,11 +293,11 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), Ee = t.useCallback(
     (e) => {
       if (n.onExpandChange && l.current) {
-        const { item: i, itemHierarchicalIndex: o, nativeEvent: b, syntheticEvent: T } = e, Y = {
-          level: St(o),
+        const { item: i, itemHierarchicalIndex: r, nativeEvent: b, syntheticEvent: D } = e, Y = {
+          level: wt(r),
           item: i,
           nativeEvent: b,
-          syntheticEvent: T,
+          syntheticEvent: D,
           target: l.current
         };
         n.onExpandChange.call(void 0, Y);
@@ -307,13 +307,13 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), ke = t.useCallback(
     (e) => {
       if (n.onFilterChange && l.current) {
-        const o = {
+        const r = {
           filter: { field: n.textField, operator: "contains", value: e.target.value },
           syntheticEvent: e.syntheticEvent,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        n.onFilterChange.call(void 0, o), n.filter === void 0 && ze(e.target.value);
+        n.onFilterChange.call(void 0, r), n.filter === void 0 && ze(e.target.value);
       }
     },
     [n.onFilterChange, n.filter, n.textField]
@@ -344,14 +344,14 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     ) : null, i = {
       adaptiveTitle: n.adaptiveTitle,
       expand: s,
-      onClose: (o) => n.onCancel ? Fe(o) : ce(o),
-      windowWidth: re,
+      onClose: (r) => n.onCancel ? Fe(r) : ce(r),
+      windowWidth: oe,
       mobileFilter: e,
       footer: {
         cancelText: J.toLanguageString(Re, ne[Re]),
-        onCancel: (o) => n.onCancel ? Fe(o) : ce(o),
+        onCancel: (r) => n.onCancel ? Fe(r) : ce(r),
         applyText: J.toLanguageString(Me, ne[Me]),
-        onApply: (o) => g(o)
+        onApply: (r) => g(r)
       }
     };
     return /* @__PURE__ */ t.createElement(kt, { ...i }, /* @__PURE__ */ t.createElement(Ft, { className: "!k-overflow-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, q.length > 0 ? /* @__PURE__ */ t.createElement(
@@ -360,7 +360,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         ref: E,
         tabIndex: z,
         data: q,
-        focusIdField: x,
+        focusIdField: I,
         textField: n.textField,
         checkField: fe,
         checkIndeterminateField: me,
@@ -373,7 +373,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         checkboxes: !0,
         size: v,
         item: n.item,
-        dir: S
+        dir: T
       }
     ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))))));
   }, tt = t.useCallback(
@@ -382,12 +382,12 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         qe(i.target.clientWidth);
     },
     []
-  ), xe = n.listNoData || bt, J = ft(), Ie = !Le || se.valid, { size: v, rounded: V, fillMode: Q } = n, X = P && s ? Ae : H.current, we = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  ), xe = n.listNoData || bt, J = ft(), Ie = !Be || se.valid, { size: v, rounded: V, fillMode: Q } = n, X = P && s ? Ae : H.current, Se = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
       className: ee("k-multiselecttree k-input", n.className, {
         [`k-input-${Pe[v] || v}`]: v,
-        [`k-rounded-${wt[V] || V}`]: V,
+        [`k-rounded-${St[V] || V}`]: V,
         [`k-input-${Q}`]: Q,
         "k-focus": d && !C,
         "k-invalid": !Ie,
@@ -397,9 +397,9 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
       }),
       tabIndex: z,
       accessKey: n.accessKey,
-      id: F,
-      style: L ? { ...B, width: void 0 } : B,
-      dir: S,
+      id: x,
+      style: B ? { ...L, width: void 0 } : L,
+      dir: T,
       ref: y,
       onKeyDown: C ? void 0 : Ye,
       onMouseDown: Qe,
@@ -409,17 +409,17 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
       "aria-haspopup": "tree",
       "aria-expanded": s,
       "aria-disabled": C,
-      "aria-label": L,
+      "aria-label": B,
       "aria-labelledby": n.ariaLabelledBy,
-      "aria-describedby": n.ariaDescribedBy ? n.ariaDescribedBy : "tagslist-" + F,
+      "aria-describedby": n.ariaDescribedBy ? n.ariaDescribedBy : "tagslist-" + x,
       "aria-required": n.required,
       onClick: C ? void 0 : Xe
     },
     /* @__PURE__ */ t.createElement(
       "div",
       {
-        id: "tagslist-" + F,
-        className: ee("k-input-values k-chip-list k-selection-multiple", {
+        id: "tagslist-" + x,
+        className: ee("k-input-values k-chip-list", {
           [`k-chip-list-${Pe[v] || v}`]: v
         })
       },
@@ -429,8 +429,8 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           tag: n.tag,
           onTagDelete: Ze,
           data: X,
-          guid: F,
-          focused: N ? H.current.find((e) => De(e, N, x)) : void 0,
+          guid: x,
+          focused: N ? H.current.find((e) => De(e, N, I)) : void 0,
           size: v
         }
       )
@@ -445,7 +445,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         ref: _,
         tabIndex: -1,
         "aria-hidden": !0,
-        title: L,
+        title: B,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
       /* @__PURE__ */ t.createElement(
@@ -463,7 +463,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           M.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: ee(M.className, { "k-rtl": S === "rtl" }),
+        className: ee(M.className, { "k-rtl": T === "rtl" }),
         style: _e,
         anchor: M.anchor || y.current,
         show: s,
@@ -481,7 +481,9 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           tabIndex: z,
           size: v,
           rounded: V,
-          fillMode: Q
+          fillMode: Q,
+          renderListFilterWrapper: !0,
+          renderPrefixSeparator: !0
         }
       ),
       q.length > 0 ? /* @__PURE__ */ t.createElement(
@@ -491,7 +493,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           ref: E,
           tabIndex: z,
           data: q,
-          focusIdField: x,
+          focusIdField: I,
           textField: n.textField,
           checkField: fe,
           checkIndeterminateField: me,
@@ -504,25 +506,25 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           checkboxes: !0,
           size: v,
           item: n.item,
-          dir: S
+          dir: T
         }
       ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))
     )
   ), P && et());
-  return L ? /* @__PURE__ */ t.createElement(
+  return B ? /* @__PURE__ */ t.createElement(
     yt,
     {
-      label: L,
+      label: B,
       editorValue: le,
       editorPlaceholder: pe,
       editorValid: Ie,
       editorDisabled: C,
-      editorId: F,
-      style: { width: B ? B.width : void 0 },
-      children: we,
-      dir: S
+      editorId: x,
+      style: { width: L ? L.width : void 0 },
+      children: Se,
+      dir: T
     }
-  ) : we;
+  ) : Se;
 }), Rt = {
   opened: a.bool,
   disabled: a.bool,
@@ -582,7 +584,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   adaptive: a.bool
 };
 de.displayName = "KendoReactMultiSelectTree";
-de.defaultProps = D;
+de.defaultProps = F;
 de.propTypes = Rt;
 export {
   de as MultiSelectTree,

package/common/AdaptiveMode.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),l=require("@progress/kendo-react-layout"),k=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-react-buttons");function v(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(e,n,o.get?o:{enumerable:!0,get:()=>a[n]})}}return e.default=a,Object.freeze(e)}const t=v(h),s=500,g=a=>{const{footer:e,children:n,windowWidth:o=0,navigatable:d,navigatableElements:u,expand:m,animation:b,onClose:c,adaptiveTitle:p,mobileFilter:r}=a,f={navigatable:d||!1,navigatableElements:u||[],expand:m,animation:b!==!1,onClose:c,animationStyles:o<=s?{top:0,width:"100%",height:"100%"}:void 0,className:o<=s?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};return t.createElement(l.ActionSheet,{...f},t.createElement(l.ActionSheetHeader,{className:"k-text-center"},t.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},t.createElement("div",{className:"k-actionsheet-title"},t.createElement("div",null,p)),t.createElement("div",{className:"k-actionsheet-actions"},t.createElement(i.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",icon:"x",svgIcon:k.xIcon,onClick:c}))),r&&t.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},r)),n,e&&t.createElement(l.ActionSheetFooter,{className:"k-actions k-actions-stretched"},t.createElement(i.Button,{size:"large",tabIndex:0,"aria-label":e.cancelText,"aria-disabled":"false",type:"button",onClick:e.onCancel},e.cancelText),t.createElement(i.Button,{tabIndex:0,themeColor:"primary",size:"large","aria-label":e.applyText,"aria-disabled":"false",type:"button",onClick:e.onApply},e.applyText)))};exports.AdaptiveMode=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),c=require("@progress/kendo-react-layout"),h=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-buttons"),v=require("@progress/kendo-react-common");function g(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>a[n]})}}return t.default=a,Object.freeze(t)}const e=g(f),r=500,E=a=>{const{footer:t,children:n,windowWidth:o=0,navigatable:d,navigatableElements:m,expand:u,animation:b,onClose:i,adaptiveTitle:p,mobileFilter:s}=a,k={navigatable:d||!1,navigatableElements:m||[],expand:u,animation:b!==!1,onClose:i,animationStyles:o<=r?{top:0,width:"100%",height:"100%"}:void 0,className:v.classNames("k-actionsheet","k-adaptive-actionsheet",o<=r?"k-actionsheet-fullscreen":"k-actionsheet-bottom")};return e.createElement(c.ActionSheet,{...k},e.createElement(c.ActionSheetHeader,{className:"k-text-center"},e.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},e.createElement("div",{className:"k-actionsheet-title"},e.createElement("div",{className:"k-text-center"},p),e.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),e.createElement("div",{className:"k-actionsheet-actions"},e.createElement(l.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",icon:"x",svgIcon:h.xIcon,onClick:i}))),s&&e.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},s)),n,t&&e.createElement(c.ActionSheetFooter,{className:"k-actions k-actions-stretched"},e.createElement(l.Button,{size:"large",tabIndex:0,"aria-label":t.cancelText,"aria-disabled":"false",type:"button",onClick:t.onCancel},t.cancelText),e.createElement(l.Button,{tabIndex:0,themeColor:"primary",size:"large","aria-label":t.applyText,"aria-disabled":"false",type:"button",onClick:t.onApply},t.applyText)))};exports.AdaptiveMode=E;

package/common/AdaptiveMode.mjs

@@ -7,10 +7,11 @@
  */
 "use client";
 import * as e from "react";
-import { ActionSheet as f, ActionSheetHeader as k, ActionSheetFooter as E } from "@progress/kendo-react-layout";
+import { ActionSheet as k, ActionSheetHeader as f, ActionSheetFooter as E } from "@progress/kendo-react-layout";
 import { xIcon as v } from "@progress/kendo-svg-icons";
 import { Button as a } from "@progress/kendo-react-buttons";
-const o = 500, y = (c) => {
+import { classNames as x } from "@progress/kendo-react-common";
+const o = 500, C = (c) => {
   const {
     footer: t,
     children: s,
@@ -29,9 +30,13 @@ const o = 500, y = (c) => {
     animation: p !== !1,
     onClose: n,
     animationStyles: l <= o ? { top: 0, width: "100%", height: "100%" } : void 0,
-    className: l <= o ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+    className: x(
+      "k-actionsheet",
+      "k-adaptive-actionsheet",
+      l <= o ? "k-actionsheet-fullscreen" : "k-actionsheet-bottom"
+    )
   };
-  return /* @__PURE__ */ e.createElement(f, { ...h }, /* @__PURE__ */ e.createElement(k, { className: "k-text-center" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", null, b)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement(k, { ...h }, /* @__PURE__ */ e.createElement(f, { className: "k-text-center" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", { className: "k-text-center" }, b), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-subtitle k-text-center" })), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(
     a,
     {
       tabIndex: 0,
@@ -69,5 +74,5 @@ const o = 500, y = (c) => {
   )));
 };
 export {
-  y as AdaptiveMode
+  C as AdaptiveMode
 };