@progress/kendo-react-dropdowns 13.3.0 → 13.4.0-develop.1

package/MultiSelectTree/MultiSelectTree.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MultiSelectTreeProps, MultiSelectTreeHandle } from './MultiSelectTreeProps.js';
+import * as React from 'react';
+/**
+ * Represents the PropsContext of the `MultiSelectTree` component.
+ * Used for global configuration of all `MultiSelectTree` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context](https://www.telerik.com/kendo-react-ui/components/dropdowns/props-context) article.
+ */
+export declare const MultiSelectTreePropsContext: React.Context<(p: MultiSelectTreeProps) => MultiSelectTreeProps>;
+/**
+ * Represents the MultiSelectTree component.
+ *
+ * Accepts properties of type [MultiSelectTreeProps](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multiselecttreeprops).
+ * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multiselecttreehandle).
+ *
+ * @example
+ * ```jsx
+ *   const dataItemKey = 'id';
+ *   const checkField = 'checkField';
+ *   const checkIndeterminateField = 'checkIndeterminateField';
+ *   const subItemsField = 'items';
+ *   const expandField = 'expanded';
+ *   const textField = 'text';
+ *   const fields = {
+ *    dataItemKey,
+ *    checkField,
+ *    checkIndeterminateField,
+ *    expandField,
+ *    subItemsField,
+ *   };
+ *   const App = () => {
+ *    const [value, setValue] = React.useState([]);
+ *    const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *    const onChange = (event) =>
+ *       setValue(
+ *       getMultiSelectTreeValue(data, {
+ *           ...fields,
+ *           ...event,
+ *           value,
+ *       })
+ *       );
+ *   const onExpandChange = React.useCallback(
+ *       (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *       [expanded]
+ *   );
+ *   const treeData = React.useMemo(
+ *       () =>
+ *       processMultiSelectTreeData(data, {
+ *           expanded,
+ *           value,
+ *           ...fields,
+ *       }),
+ *       [expanded, value]
+ *   );
+ *
+ *   return (
+ *       <div>
+ *       <div>Categories:</div>
+ *       <MultiSelectTree
+ *           style={{
+ *           width: '300px',
+ *           }}
+ *           data={treeData}
+ *           value={value}
+ *           onChange={onChange}
+ *           placeholder="Please select ..."
+ *           textField={textField}
+ *           dataItemKey={dataItemKey}
+ *           checkField={checkField}
+ *           checkIndeterminateField={checkIndeterminateField}
+ *           expandField={expandField}
+ *           subItemsField={subItemsField}
+ *           onExpandChange={onExpandChange}
+ *       />
+ *       </div>
+ *   );
+ *   };
+ * ```
+ */
+export declare const MultiSelectTree: React.ForwardRefExoticComponent<MultiSelectTreeProps & React.RefAttributes<MultiSelectTreeHandle | null>>;

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

package/MultiSelectTree/MultiSelectTree.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as it, usePropsContext as rt, validatePackage as ot, getLicenseMessage as lt, useId as st, getTabIndex as ct, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, noop as Y, Keys as r, classNames as Z, IconWrap as ft, WatermarkOverlay as mt, kendoThemeMaps as gt } from "@progress/kendo-react-common";
+import { createPropsContext as it, usePropsContext as rt, validatePackage as ot, getLicenseMessage as lt, useId as st, noop as Y, getTabIndex as ct, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, Keys as r, classNames as Z, kendoThemeMaps as ft, IconWrap as mt, WatermarkOverlay as gt } from "@progress/kendo-react-common";
 import { Popup as vt } from "@progress/kendo-react-popup";
 import { useLocalization as ht } from "@progress/kendo-react-intl";
 import { TreeView as Ie } from "@progress/kendo-react-treeview";
@@ -22,7 +22,7 @@ import xt from "../common/ClearButton.mjs";
 import Re from "../common/ListFilter.mjs";
 import { AdaptiveMode as St } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as wt } from "@progress/kendo-react-layout";
-const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt } = gt, Dt = (N) => N.split("_").map((M) => parseInt(M, 10)), Mt = (N, M) => {
+const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt } = ft, Dt = (N) => N.split("_").map((M) => parseInt(M, 10)), Mt = (N, M) => {
   const { validationMessage: a, valid: V, required: te } = N;
   return {
     customError: a !== void 0,
@@ -38,9 +38,9 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
     width: "200px",
     height: "200px"
   },
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   required: !1,
   validityStyles: !0
 }, Rt = it(), Ne = t.forwardRef(
@@ -425,7 +425,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
         )
       ),
       /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, Q.length === 0 && /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, ne)),
-      a.loading && /* @__PURE__ */ t.createElement(ft, { className: "k-input-loading-icon", name: "loading" }),
+      a.loading && /* @__PURE__ */ t.createElement(mt, { className: "k-input-loading-icon", name: "loading" }),
       le && !E && Q.length > 0 && /* @__PURE__ */ t.createElement(xt, { onClick: Ze }),
       /* @__PURE__ */ t.createElement(
         "select",
@@ -491,7 +491,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: Tt
             dir: I
           }
         ) : /* @__PURE__ */ t.createElement(ke, null, Fe.toLanguageString(ee, Me[ee])),
-        V && /* @__PURE__ */ t.createElement(mt, { message: te })
+        V && /* @__PURE__ */ t.createElement(gt, { message: te })
       )
     ), T && tt());
     return B ? /* @__PURE__ */ t.createElement(