@progress/kendo-react-dropdowns 8.4.0-develop.2 → 8.4.0-develop.4

package/DropDownList/DropDownList.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 J=require("react"),x=require("prop-types"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-react-labels"),V=require("@progress/kendo-svg-icons"),X=require("../common/ListContainer.js"),Z=require("../common/ListFilter.js"),B=require("../common/GroupStickyHeader.js"),ee=require("../common/ListDefaultItem.js"),te=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),se=require("../package-metadata.js"),H=require("@progress/kendo-react-buttons"),ie=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),M=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ae(_){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return i.default=_,Object.freeze(i)}const m=ae(J),oe="Please select a value from the list!",k=class k extends m.Component{constructor(i){super(i),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:o,dataItemKey:u,defaultItem:r}=this.props,d=c.getFilteredData(this.props),I=o?o.skip:0,p=e===-1&&r!==void 0?r:d[e-I],a=!c.areSame(p,this.value,u);this.triggerOnChange(p,t),a&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>m.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},m.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:o,size:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),g=this.base,n=g.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=n.width!==void 0?n.width:g.popupWidth,h=p&&p.uDropDownList,l={dir:o!==void 0?o:g.dirCalculated,width:b,popupSettings:{...n,popupClass:s.classNames(n.popupClass,s.uDropDownList.listContainer({c:h})),anchor:n.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,onMouseDownOutside:this.onPopupMouseDown},itemsCount:[a.length]};let{group:S}=this.state;return S===void 0&&r!==void 0&&(S=c.getItemValue(a[0],r)),m.createElement(X,{...l},this.renderListFilter(),e&&m.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:h}))},e),m.createElement("div",{className:s.classNames(s.uDropDownList.list({c:h,size:u,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&S&&a.length!==0&&m.createElement(B,{group:S,groupMode:"modern",render:d}),this.renderList()),t&&m.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:h}))},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:o={skip:0,total:void 0},groupHeaderItemRender:u,listNoDataRender:r,itemRender:d,unstyled:I}=this.props,p=c.getFilteredData(this.props),a=I&&I.uDropDownList,g=this.base.vs,n=o.skip,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.base.getPopupSettings(),h=`translateY(${g.translate}px)`;return m.createElement(te,{id:this._listboxId,show:v,data:p.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>g.list=this.base.list=l,wrapperStyle:{maxHeight:b.height},wrapperCssClass:s.classNames(s.uDropDownList.listContent({c:a})),listStyle:g.enabled?{transform:h}:void 0,key:"listkey",skip:n,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:u,noDataRender:r,onScroll:this.onScroll,wrapperRef:g.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:o.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:u}=this.props;let r=c.getFilteredData(this.props);if(!(!u||!r.length)&&u){const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*d;r=this.base.getGroupedDataModernMode(r,u);let a=r[0][u];for(let g=1;g<r.length&&!(d*g>p);g++)r[g]&&r[g][u]&&(a=r[g][u]);a!==this.state.group&&this.setState({group:a})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&m.createElement(Z,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:o}=this.props;return t!==void 0&&m.createElement(ee,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,o),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,o=c.getFilteredData(this.props);let u=o.map((C,L)=>({item:C,itemIndex:L}));const r=this.searchState.word,d=this.searchState.last,I=c.sameCharsOnly(r,d);let p=u.length,a=Math.max(0,o.findIndex(C=>c.areSame(C,this.value,t))),g;this.props.defaultItem&&(g={item:this.props.defaultItem,itemIndex:-1},p+=1,a+=1),a+=I?1:0,u=c.shuffleData(u,a,g);let n,v,b,h=0;const{textField:l,ignoreCase:S}=this.props;for(;h<p;h++)if(n=c.getItemValue(u[h].item,l),v=I&&c.matchText(n,d,S),b=c.matchText(n,r,S),v||b){h=u[h].itemIndex;break}if(h!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(h,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:o,defaultItem:u,leftRightKeysNavigation:r=!0,virtual:d={skip:0,total:0,pageSize:0},dataItemKey:I,groupField:p="",textField:a,skipDisabledItems:g=!0}=this.props,n=c.getFilteredData(this.props),v=this.value,b=n.findIndex(D=>c.areSame(D,v,I)),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.keyCode,S=l===s.Keys.home||l===s.Keys.end,C=l===s.Keys.up||l===s.Keys.down,L=!h&&(e.altKey&&l===s.Keys.down||l===s.Keys.enter||l===s.Keys.space),E=h&&(e.altKey&&l===s.Keys.up||l===s.Keys.esc),P=r&&(l===s.Keys.left||l===s.Keys.right),N=C||P&&!t||S,w=this.base.initState();if(w.syntheticEvent=e,!o){if(S&&this.base.vs.enabled)l===s.Keys.home?d.skip!==0?(this.base.triggerOnPageChange(w,0,d.pageSize),this._navigated=!0):this.triggerOnChange(n[0],w):d.skip<d.total-d.pageSize?(this.base.triggerOnPageChange(w,d.total-d.pageSize,d.pageSize),this._navigated=!0):this.triggerOnChange(n[n.length-1],w);else if(h&&l===s.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(h&&l===s.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(h&&l===s.Keys.enter){const D=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(n,D)?(this.triggerOnChange(null,w),this.applyState(w)):this.handleItemSelect(D,w),this.base.togglePopup(w),e.preventDefault()}else if(L||E)E&&this.resetValueIfDisabledItem(),this.base.togglePopup(w),e.preventDefault();else if(N){if(this._lastKeypressIsFilter=!1,p!==""&&a)if(!g&&h)this.onNavigate(w,l);else{let D;if(l===s.Keys.down||l===s.Keys.right){const y=n.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&n.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=n,D=n.findIndex(f=>!f.disabled&&f[a]);else{y=n.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&n.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&n.findIndex(y=>y[a]===v[a])===n.length-1&&this.onNavigate(w,l)}else if(!g&&h||S)this.onNavigate(w,l);else if(a){let D;if(l===s.Keys.down||l===s.Keys.right){const y=n.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&n.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=n,D=n.find(f=>!f.disabled&&f[a]);else{y=n.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&n.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&n.findIndex(y=>y[a]===v[a])===n.length-1&&this.onNavigate(w,l)}else this.onNavigate(w,l);e.preventDefault()}this.applyState(w)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:o}=this.props,{windowWidth:u=0}=this.state,r=u<=M.MOBILE_MEDIUM_DEVISE&&o,d=this.base.initState();d.syntheticEvent=e,d.data.focused=!1,d.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!r&&this.base.togglePopup(d),this.applyState(d)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===s.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.onPopupMouseDown=e=>{var t;(t=this.props.popupSettings)!=null&&t.onMouseDownOutside&&this.props.popupSettings.onMouseDownOutside.call(void 0,e)},this.togglePopup=()=>{const e=this.base.initState();e.data.opened=this.state.opened,this.base.togglePopup(e),this.applyState(e)},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},s.validatePackage(se.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let i;return this._valueDuringOnChange!==void 0?i=this._valueDuringOnChange:this.props.value!==void 0?i=this.props.value:this.state.value!==void 0?i=this.state.value:this.props.defaultValue!==void 0&&(i=this.props.defaultValue),!c.isPresent(i)&&this.props.defaultItem!==void 0&&(i=this.props.defaultItem),i}get index(){const{dataItemKey:i}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(o=>c.areSame(o,t,i))}get name(){return this.props.name}get validity(){const i=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:i,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:k.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:k.defaultProps.required}componentDidUpdate(i,e){var n;const{dataItemKey:t,virtual:o,groupField:u="",textField:r}=this.props,d=c.getFilteredData(this.props),I=i.virtual?i.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,a=i.opened!==void 0?i.opened:e.opened,g=!a&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||g&&this.onPopupOpened(),o&&o.total!==I)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const v=this.value,b=i.value!==void 0?i.value:e.value;let h=d.findIndex(S=>c.areSame(S,v,t));u!==""&&v&&r&&(h=(n=this.base.getGroupedDataModernMode(d,u))==null?void 0:n.map(S=>S[r]).indexOf(v[r]));const l=!c.areSame(b,v,t);g&&o?this.base.scrollToVirtualItem(o,h):g&&!o?(this.onPopupOpened(),d&&d.length!==0&&this.base.resetGroupStickyHeader(d[0][u],this),this.base.scrollToItem(h)):p&&a&&v&&l&&!this._navigated?this.base.scrollToItem(h,this.base.vs.enabled):p&&a&&this._navigated&&(this._navigated&&o&&o.skip===0?this.base.vs.reset():this._navigated&&o&&o.skip===o.total-o.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const i=ie.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:o,dir:u,virtual:r,size:d,rounded:I,fillMode:p,adaptive:a,unstyled:g}=this.props,{windowWidth:n=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,h=c.getItemValue(b,this.props.textField),l=!this.validityStyles||this.validity.valid,S=this.base,C=S.vs,L=n<=M.MOBILE_MEDIUM_DEVISE&&a,E=g&&g.uDropDownList;C.enabled=r!==void 0,r!==void 0&&(S.vs.skip=r.skip,S.vs.total=r.total,S.vs.pageSize=r.pageSize);const{dataItemKey:P,disabled:N,tabIndex:w,loading:D,iconClassName:y,svgIcon:f,valueRender:F}=this.props,G=c.getFilteredData(this.props),{focused:j}=this.state,Y=G.findIndex(K=>c.areSame(K,b,P)),A=m.createElement("span",{id:this._inputId,className:s.classNames(s.uDropDownList.input({c:E}))},h&&m.createElement("span",{className:s.classNames(s.uDropDownList.inputText({c:E}))},h)),$=F!==void 0?F.call(void 0,A,b):A,z=m.createElement(m.Fragment,null,m.createElement("span",{ref:this.componentRef,className:s.classNames(s.uDropDownList.wrapper({c:E,size:d,rounded:I,fillMode:p,focused:j,disabled:N,invalid:!l,loading:D,required:this.required}),t),style:o?{...e,width:void 0}:e,dir:u,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s.getTabIndex(w,N),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:N?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":N||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+(Y+(r?r.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},$,D&&m.createElement(s.IconWrap,{className:s.classNames(s.uDropDownList.loadingIcon({c:E})),name:"loading"}),m.createElement(H.Button,{tabIndex:-1,type:"button","aria-label":i,size:d,fillMode:p,iconClass:y,className:s.classNames(s.uDropDownList.inputButton({c:E})),rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||V.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!L&&this.renderListContainer()),L&&this.renderAdaptiveListContainer());return o?m.createElement(Q.FloatingLabel,{label:o,editorValue:h,editorValid:l,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:z}):z}onNavigate(i,e,t){const{defaultItem:o,dataItemKey:u,virtual:r={skip:0,total:0,pageSize:0}}=this.props,d=c.getFilteredData(this.props),I=this.base.vs,p=this.value,a=d.findIndex(n=>c.areSame(n,p,u)),g=this.base.navigation.navigate({current:r.skip+a,max:(I.enabled?r.total:d.length)-1,min:o!==void 0?-1:0,keyCode:e,skipItems:t||void 0});g!==void 0&&this.handleItemSelect(g,i),this.applyState(i)}renderAdaptiveListContainer(){const{windowWidth:i=0}=this.state,{header:e,footer:t,size:o,adaptiveTitle:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),g=this.props.opened!==void 0?this.props.opened:this.state.opened,n=p&&p.uDropDownList,v=p&&p.uDropDownsActionSheet,b={navigatable:!1,navigatableElements:[],expand:g,animation:!0,onClose:l=>this.handleWrapperClick(l),animationStyles:i<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s.classNames(s.uDropDownsActionSheet.wrapper({c:v,isFullScreen:i<=M.MOBILE_SMALL_DEVISE}))};let{group:h}=this.state;return h===void 0&&r!==void 0&&(h=c.getItemValue(a[0],r)),m.createElement(q.ActionSheet,{...b},m.createElement(q.ActionSheetHeader,{className:s.classNames(s.uDropDownsActionSheet.header({c:v}))},m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBar({c:v}))},m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.title({c:v}))},m.createElement("div",null,u)),m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.actions({c:v}))},m.createElement(H.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:V.xIcon}))),m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBarGroup({c:v}))},this.renderListFilter())),m.createElement(q.ActionSheetContent,{overflowHidden:!0},e&&m.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:n}))},e),m.createElement("div",{className:s.classNames(s.uDropDownList.list({c:n,size:o,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&h&&a.length!==0&&m.createElement(B,{group:h,groupMode:"modern",render:d}),this.renderList()),t&&m.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:n}))},t)))}getFocusedIndex(){const i=this.value,{textField:e,dataItemKey:t,virtual:o={skip:0},focusedItemIndex:u=c.itemIndexStartsWith,filterable:r,skipDisabledItems:d=!0}=this.props,I=c.getFilteredData(this.props),p=this.props.filter?this.props.filter:this.state.text;return d&&e&&!p&&!i?I.findIndex(a=>!a.disabled&&a[e]):c.isPresent(i)&&p===void 0||r&&p===""?I.findIndex(a=>c.areSame(a,i,t)):p?this._lastKeypressIsFilter?u(I,p,e):I.findIndex(a=>c.areSame(a,i,t)):o.skip===0?0:-1}focusElement(i){this._skipFocusEvent=!0,i.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(i,e){c.areSame(this.value,i,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=i),this._valueDuringOnChange=i,e.events.push({type:"onChange"}))}applyState(i){this.base.applyState(i),this._valueDuringOnChange=void 0}calculateMedia(i){for(const e of i)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const i=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(i,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(i,e){return e!==void 0&&e!==-1&&i&&i.length>0&&i[e].disabled}};k.displayName="DropDownList",k.propTypes={delay:x.number,ignoreCase:x.bool,iconClassName:x.string,svgIcon:s.svgIconPropType,defaultItem:x.any,valueRender:x.func,valueMap:x.func,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaDescribedBy:x.string,ariaLabel:x.string,leftRightKeysNavigation:x.bool,title:x.string,groupField:x.string,list:x.any,skipDisabledItems:x.bool,renderListFilterWrapper:x.bool,...R.propTypes},k.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=k;const W=s.createPropsContext(),U=s.withIdHOC(s.withPropsContext(W,s.withUnstyledHOC(O)));U.displayName="KendoReactDropDownList";exports.DropDownList=U;exports.DropDownListPropsContext=W;exports.DropDownListWithoutContext=O;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),x=require("prop-types"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-react-labels"),V=require("@progress/kendo-svg-icons"),X=require("../common/ListContainer.js"),Z=require("../common/ListFilter.js"),B=require("../common/GroupStickyHeader.js"),ee=require("../common/ListDefaultItem.js"),te=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),se=require("../package-metadata.js"),H=require("@progress/kendo-react-buttons"),ie=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),M=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ae(_){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return i.default=_,Object.freeze(i)}const m=ae(J),oe="Please select a value from the list!",k=class k extends m.Component{constructor(i){super(i),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:o,dataItemKey:u,defaultItem:r}=this.props,d=c.getFilteredData(this.props),I=o?o.skip:0,p=e===-1&&r!==void 0?r:d[e-I],a=!c.areSame(p,this.value,u);this.triggerOnChange(p,t),a&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>m.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},m.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:o,size:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),g=this.base,n=g.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=n.width!==void 0?n.width:g.popupWidth,h=p&&p.uDropDownList,l={dir:o!==void 0?o:g.dirCalculated,width:b,popupSettings:{...n,popupClass:s.classNames(n.popupClass,s.uDropDownList.listContainer({c:h})),anchor:n.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,onMouseDownOutside:this.onPopupMouseDown},itemsCount:[a.length]};let{group:S}=this.state;return S===void 0&&r!==void 0&&(S=c.getItemValue(a[0],r)),m.createElement(X,{...l},this.renderListFilter(),e&&m.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:h}))},e),m.createElement("div",{className:s.classNames(s.uDropDownList.list({c:h,size:u,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&S&&a.length!==0&&m.createElement(B,{group:S,groupMode:"modern",render:d}),this.renderList()),t&&m.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:h}))},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:o={skip:0,total:void 0},groupHeaderItemRender:u,listNoDataRender:r,itemRender:d,unstyled:I}=this.props,p=c.getFilteredData(this.props),a=I&&I.uDropDownList,g=this.base.vs,n=o.skip,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.base.getPopupSettings(),h=`translateY(${g.translate}px)`;return m.createElement(te,{id:this._listboxId,show:v,data:p.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>g.list=this.base.list=l,wrapperStyle:{maxHeight:b.height},wrapperCssClass:s.classNames(s.uDropDownList.listContent({c:a})),listStyle:g.enabled?{transform:h}:void 0,key:"listkey",skip:n,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:u,noDataRender:r,onScroll:this.onScroll,wrapperRef:g.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:o.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:u}=this.props;let r=c.getFilteredData(this.props);if(!(!u||!r.length)&&u){const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*d;r=this.base.getGroupedDataModernMode(r,u);let a=r[0][u];for(let g=1;g<r.length&&!(d*g>p);g++)r[g]&&r[g][u]&&(a=r[g][u]);a!==this.state.group&&this.setState({group:a})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&m.createElement(Z,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:o}=this.props;return t!==void 0&&m.createElement(ee,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,o),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,o=c.getFilteredData(this.props);let u=o.map((C,L)=>({item:C,itemIndex:L}));const r=this.searchState.word,d=this.searchState.last,I=c.sameCharsOnly(r,d);let p=u.length,a=Math.max(0,o.findIndex(C=>c.areSame(C,this.value,t))),g;this.props.defaultItem&&(g={item:this.props.defaultItem,itemIndex:-1},p+=1,a+=1),a+=I?1:0,u=c.shuffleData(u,a,g);let n,v,b,h=0;const{textField:l,ignoreCase:S}=this.props;for(;h<p;h++)if(n=c.getItemValue(u[h].item,l),v=I&&c.matchText(n,d,S),b=c.matchText(n,r,S),v||b){h=u[h].itemIndex;break}if(h!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(h,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:o,defaultItem:u,leftRightKeysNavigation:r=!0,virtual:d={skip:0,total:0,pageSize:0},dataItemKey:I,groupField:p="",textField:a,skipDisabledItems:g=!0}=this.props,n=c.getFilteredData(this.props),v=this.value,b=n.findIndex(D=>c.areSame(D,v,I)),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.keyCode,S=l===s.Keys.home||l===s.Keys.end,C=l===s.Keys.up||l===s.Keys.down,L=!h&&(e.altKey&&l===s.Keys.down||l===s.Keys.enter||l===s.Keys.space),E=h&&(e.altKey&&l===s.Keys.up||l===s.Keys.esc),P=r&&(l===s.Keys.left||l===s.Keys.right),N=C||P&&!t||S,w=this.base.initState();if(w.syntheticEvent=e,!o){if(S&&this.base.vs.enabled)l===s.Keys.home?d.skip!==0?(this.base.triggerOnPageChange(w,0,d.pageSize),this._navigated=!0):this.triggerOnChange(n[0],w):d.skip<d.total-d.pageSize?(this.base.triggerOnPageChange(w,d.total-d.pageSize,d.pageSize),this._navigated=!0):this.triggerOnChange(n[n.length-1],w);else if(h&&l===s.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(h&&l===s.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(h&&l===s.Keys.enter){const D=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(n,D)?(this.triggerOnChange(null,w),this.applyState(w)):this.handleItemSelect(D,w),this.base.togglePopup(w),e.preventDefault()}else if(L||E)E&&this.resetValueIfDisabledItem(),this.base.togglePopup(w),e.preventDefault();else if(N){if(this._lastKeypressIsFilter=!1,p!==""&&a)if(!g&&h)this.onNavigate(w,l);else{let D;if(l===s.Keys.down||l===s.Keys.right){const y=n.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&n.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=n,D=n.findIndex(f=>!f.disabled&&f[a]);else{y=n.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&n.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&n.findIndex(y=>y[a]===v[a])===n.length-1&&this.onNavigate(w,l)}else if(!g&&h||S)this.onNavigate(w,l);else if(a){let D;if(l===s.Keys.down||l===s.Keys.right){const y=n.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&n.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=n,D=n.find(f=>!f.disabled&&f[a]);else{y=n.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&n.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&n.findIndex(y=>y[a]===v[a])===n.length-1&&this.onNavigate(w,l)}else this.onNavigate(w,l);e.preventDefault()}this.applyState(w)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:o}=this.props,{windowWidth:u=0}=this.state,r=u<=M.MOBILE_MEDIUM_DEVISE&&o,d=this.base.initState();d.syntheticEvent=e,d.data.focused=!1,d.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!r&&this.base.togglePopup(d),this.applyState(d)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===s.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.onPopupMouseDown=e=>{var t;(t=this.props.popupSettings)!=null&&t.onMouseDownOutside&&this.props.popupSettings.onMouseDownOutside.call(void 0,e)},this.togglePopup=()=>{const e=this.base.initState();e.data.opened=this.state.opened,this.base.togglePopup(e),this.applyState(e)},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},s.validatePackage(se.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let i;return this._valueDuringOnChange!==void 0?i=this._valueDuringOnChange:this.props.value!==void 0?i=this.props.value:this.state.value!==void 0?i=this.state.value:this.props.defaultValue!==void 0&&(i=this.props.defaultValue),!c.isPresent(i)&&this.props.defaultItem!==void 0&&(i=this.props.defaultItem),i}get index(){const{dataItemKey:i}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(o=>c.areSame(o,t,i))}get name(){return this.props.name}get validity(){const i=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:i,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:k.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:k.defaultProps.required}componentDidUpdate(i,e){var n;const{dataItemKey:t,virtual:o,groupField:u="",textField:r}=this.props,d=c.getFilteredData(this.props),I=i.virtual?i.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,a=i.opened!==void 0?i.opened:e.opened,g=!a&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||g&&this.onPopupOpened(),o&&o.total!==I)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const v=this.value,b=i.value!==void 0?i.value:e.value;let h=d.findIndex(S=>c.areSame(S,v,t));u!==""&&v&&r&&(h=(n=this.base.getGroupedDataModernMode(d,u))==null?void 0:n.map(S=>S[r]).indexOf(v[r]));const l=!c.areSame(b,v,t);g&&o?this.base.scrollToVirtualItem(o,h):g&&!o?(this.onPopupOpened(),d&&d.length!==0&&this.base.resetGroupStickyHeader(d[0][u],this),this.base.scrollToItem(h)):p&&a&&v&&l&&!this._navigated?this.base.scrollToItem(h,this.base.vs.enabled):p&&a&&this._navigated&&(this._navigated&&o&&o.skip===0?this.base.vs.reset():this._navigated&&o&&o.skip===o.total-o.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const i=ie.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:o,dir:u,virtual:r,size:d,rounded:I,fillMode:p,adaptive:a,unstyled:g}=this.props,{windowWidth:n=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,h=c.getItemValue(b,this.props.textField),l=!this.validityStyles||this.validity.valid,S=this.base,C=S.vs,L=n<=M.MOBILE_MEDIUM_DEVISE&&a,E=g&&g.uDropDownList;C.enabled=r!==void 0,r!==void 0&&(S.vs.skip=r.skip,S.vs.total=r.total,S.vs.pageSize=r.pageSize);const{dataItemKey:P,disabled:N,tabIndex:w,loading:D,iconClassName:y,svgIcon:f,valueRender:F}=this.props,G=c.getFilteredData(this.props),{focused:j}=this.state,Y=G.findIndex(K=>c.areSame(K,b,P)),A=m.createElement("span",{id:this._inputId,className:s.classNames(s.uDropDownList.inputInner({c:E}))},h&&m.createElement("span",{className:s.classNames(s.uDropDownList.inputText({c:E}))},h)),$=F!==void 0?F.call(void 0,A,b):A,z=m.createElement(m.Fragment,null,m.createElement("span",{ref:this.componentRef,className:s.classNames(s.uDropDownList.wrapper({c:E,size:d,rounded:I,fillMode:p,focused:j,disabled:N,invalid:!l,loading:D,required:this.required}),t),style:o?{...e,width:void 0}:e,dir:u,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s.getTabIndex(w,N),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:N?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":N||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+(Y+(r?r.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},$,D&&m.createElement(s.IconWrap,{className:s.classNames(s.uDropDownList.loadingIcon({c:E})),name:"loading"}),m.createElement(H.Button,{tabIndex:-1,type:"button","aria-label":i,size:d,fillMode:p,iconClass:y,className:s.classNames(s.uDropDownList.inputButton({c:E})),rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||V.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!L&&this.renderListContainer()),L&&this.renderAdaptiveListContainer());return o?m.createElement(Q.FloatingLabel,{label:o,editorValue:h,editorValid:l,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:z}):z}onNavigate(i,e,t){const{defaultItem:o,dataItemKey:u,virtual:r={skip:0,total:0,pageSize:0}}=this.props,d=c.getFilteredData(this.props),I=this.base.vs,p=this.value,a=d.findIndex(n=>c.areSame(n,p,u)),g=this.base.navigation.navigate({current:r.skip+a,max:(I.enabled?r.total:d.length)-1,min:o!==void 0?-1:0,keyCode:e,skipItems:t||void 0});g!==void 0&&this.handleItemSelect(g,i),this.applyState(i)}renderAdaptiveListContainer(){const{windowWidth:i=0}=this.state,{header:e,footer:t,size:o,adaptiveTitle:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),g=this.props.opened!==void 0?this.props.opened:this.state.opened,n=p&&p.uDropDownList,v=p&&p.uDropDownsActionSheet,b={navigatable:!1,navigatableElements:[],expand:g,animation:!0,onClose:l=>this.handleWrapperClick(l),animationStyles:i<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s.classNames(s.uDropDownsActionSheet.wrapper({c:v,isFullScreen:i<=M.MOBILE_SMALL_DEVISE}))};let{group:h}=this.state;return h===void 0&&r!==void 0&&(h=c.getItemValue(a[0],r)),m.createElement(q.ActionSheet,{...b},m.createElement(q.ActionSheetHeader,{className:s.classNames(s.uDropDownsActionSheet.header({c:v}))},m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBar({c:v}))},m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.title({c:v}))},m.createElement("div",null,u)),m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.actions({c:v}))},m.createElement(H.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:V.xIcon}))),m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBarGroup({c:v}))},this.renderListFilter())),m.createElement(q.ActionSheetContent,{overflowHidden:!0},e&&m.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:n}))},e),m.createElement("div",{className:s.classNames(s.uDropDownList.list({c:n,size:o,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&h&&a.length!==0&&m.createElement(B,{group:h,groupMode:"modern",render:d}),this.renderList()),t&&m.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:n}))},t)))}getFocusedIndex(){const i=this.value,{textField:e,dataItemKey:t,virtual:o={skip:0},focusedItemIndex:u=c.itemIndexStartsWith,filterable:r,skipDisabledItems:d=!0}=this.props,I=c.getFilteredData(this.props),p=this.props.filter?this.props.filter:this.state.text;return d&&e&&!p&&!i?I.findIndex(a=>!a.disabled&&a[e]):c.isPresent(i)&&p===void 0||r&&p===""?I.findIndex(a=>c.areSame(a,i,t)):p?this._lastKeypressIsFilter?u(I,p,e):I.findIndex(a=>c.areSame(a,i,t)):o.skip===0?0:-1}focusElement(i){this._skipFocusEvent=!0,i.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(i,e){c.areSame(this.value,i,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=i),this._valueDuringOnChange=i,e.events.push({type:"onChange"}))}applyState(i){this.base.applyState(i),this._valueDuringOnChange=void 0}calculateMedia(i){for(const e of i)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const i=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(i,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(i,e){return e!==void 0&&e!==-1&&i&&i.length>0&&i[e].disabled}};k.displayName="DropDownList",k.propTypes={delay:x.number,ignoreCase:x.bool,iconClassName:x.string,svgIcon:s.svgIconPropType,defaultItem:x.any,valueRender:x.func,valueMap:x.func,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaDescribedBy:x.string,ariaLabel:x.string,leftRightKeysNavigation:x.bool,title:x.string,groupField:x.string,list:x.any,skipDisabledItems:x.bool,renderListFilterWrapper:x.bool,...R.propTypes},k.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=k;const W=s.createPropsContext(),U=s.withIdHOC(s.withPropsContext(W,s.withUnstyledHOC(O)));U.displayName="KendoReactDropDownList";exports.DropDownList=U;exports.DropDownListPropsContext=W;exports.DropDownListWithoutContext=O;

package/DropDownList/DropDownList.mjs

@@ -416,7 +416,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
       ye[Y]
     ), { style: e, className: t, label: a, dir: h, virtual: n, size: l, rounded: b, fillMode: d, adaptive: i, unstyled: c } = this.props, { windowWidth: o = 0 } = this.state, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, p = T(g, this.props.textField), r = !this.validityStyles || this.validity.valid, w = this.base, F = w.vs, M = o <= j && i, _ = c && c.uDropDownList;
     F.enabled = n !== void 0, n !== void 0 && (w.vs.skip = n.skip, w.vs.total = n.total, w.vs.pageSize = n.pageSize);
-    const { dataItemKey: z, disabled: P, tabIndex: S, loading: y, iconClassName: v, svgIcon: m, valueRender: L } = this.props, J = E(this.props), { focused: Q } = this.state, X = J.findIndex((O) => k(O, g, z)), H = /* @__PURE__ */ u.createElement("span", { id: this._inputId, className: x(D.input({ c: _ })) }, p && /* @__PURE__ */ u.createElement("span", { className: x(D.inputText({ c: _ })) }, p)), Z = L !== void 0 ? L.call(void 0, H, g) : H, V = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+    const { dataItemKey: z, disabled: P, tabIndex: S, loading: y, iconClassName: v, svgIcon: m, valueRender: L } = this.props, J = E(this.props), { focused: Q } = this.state, X = J.findIndex((O) => k(O, g, z)), H = /* @__PURE__ */ u.createElement("span", { id: this._inputId, className: x(D.inputInner({ c: _ })) }, p && /* @__PURE__ */ u.createElement("span", { className: x(D.inputText({ c: _ })) }, p)), Z = L !== void 0 ? L.call(void 0, H, g) : H, V = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
       "span",
       {
         ref: this.componentRef,

package/common/SearchBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const u=require("@progress/kendo-react-common"),h=require("react");function b(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const l=b(h);class g extends l.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:r,suggestedText:a,focused:p}=this.props,i=this.input,o=e!==r||a!==s,c=o&&e.startsWith(r)&&!(s&&a&&s.endsWith(a)),d=u.getActiveElement(document);p&&i&&d!==i&&i.focus(),a&&o&&!c&&i&&i.setSelectionRange(r.length-a.length,r.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:r,tabIndex:a,accessKey:p}=this.props,i={tabIndex:a,accessKey:p},o=l.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:"k-input-inner",role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:c=>this._input=c,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired,"aria-controls":this.props.ariaControls,...i});return r?r.call(void 0,o):o}}module.exports=g;
+"use client";"use strict";const d=require("@progress/kendo-react-common"),b=require("react");function g(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const u=g(b);class m extends u.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:n,suggestedText:o,focused:c}=this.props,a=this.input,i=e!==n||o!==s,l=i&&e.startsWith(n)&&!(s&&o&&s.endsWith(o)),p=d.getActiveElement(document);c&&a&&p!==a&&a.focus(),o&&i&&!l&&a&&a.setSelectionRange(n.length-o.length,n.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:n,tabIndex:o,accessKey:c,unstyled:a}=this.props,i=a&&a.uDropDownsBase,l={tabIndex:o,accessKey:c},p=u.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:d.classNames(d.uDropDownsBase.inputInner({c:i})),role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:h=>this._input=h,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired,"aria-controls":this.props.ariaControls,...l});return n?n.call(void 0,p):p}}module.exports=m;

package/common/SearchBar.mjs

@@ -6,9 +6,9 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { getActiveElement as c } from "@progress/kendo-react-common";
-import * as l from "react";
-class g extends l.Component {
+import { getActiveElement as h, classNames as u, uDropDownsBase as g } from "@progress/kendo-react-common";
+import * as d from "react";
+class v extends d.Component {
   constructor() {
     super(...arguments), this._input = null;
   }
@@ -18,15 +18,15 @@ class g extends l.Component {
   get input() {
     return this._input;
   }
-  componentDidUpdate(i) {
-    const a = i.value, r = i.suggestedText, { value: e, suggestedText: t, focused: n } = this.props, s = this.input, o = a !== e || t !== r, p = o && a.startsWith(e) && !(r && t && r.endsWith(t)), d = c(document);
-    n && s && d !== s && s.focus(), t && o && !p && s && s.setSelectionRange(e.length - t.length, e.length);
+  componentDidUpdate(a) {
+    const i = a.value, o = a.suggestedText, { value: s, suggestedText: t, focused: p } = this.props, e = this.input, r = i !== s || t !== o, l = r && i.startsWith(s) && !(o && t && o.endsWith(t)), n = h(document);
+    p && e && n !== e && e.focus(), t && r && !l && e && e.setSelectionRange(s.length - t.length, s.length);
   }
   render() {
-    const { expanded: i = !1, disabled: a, role: r = "listbox", render: e, tabIndex: t, accessKey: n } = this.props, s = {
+    const { expanded: a = !1, disabled: i, role: o = "listbox", render: s, tabIndex: t, accessKey: p, unstyled: e } = this.props, r = e && e.uDropDownsBase, l = {
       tabIndex: t,
-      accessKey: n
-    }, o = /* @__PURE__ */ l.createElement(
+      accessKey: p
+    }, n = /* @__PURE__ */ d.createElement(
       "input",
       {
         autoComplete: "off",
@@ -35,35 +35,35 @@ class g extends l.Component {
         key: "searchbar",
         size: this.props.size,
         placeholder: this.props.placeholder,
-        className: "k-input-inner",
-        role: r,
+        className: u(g.inputInner({ c: r })),
+        role: o,
         name: this.props.name,
         value: this.props.value,
         onChange: this.props.onChange,
-        ref: (p) => this._input = p,
+        ref: (c) => this._input = c,
         onKeyDown: this.props.onKeyDown,
         onFocus: this.props.onFocus,
         onBlur: this.props.onBlur,
         onClick: this.props.onClick,
-        "aria-disabled": a || void 0,
-        disabled: a || void 0,
+        "aria-disabled": i || void 0,
+        disabled: i || void 0,
         readOnly: this.props.readOnly || void 0,
         title: this.props.title,
         "aria-haspopup": "listbox",
-        "aria-expanded": i,
+        "aria-expanded": a,
         "aria-owns": this.props.owns,
-        "aria-activedescendant": i ? this.props.activedescendant : void 0,
+        "aria-activedescendant": a ? this.props.activedescendant : void 0,
         "aria-describedby": this.props.ariaDescribedBy,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-label": this.props.ariaLabel,
         "aria-required": this.props.ariaRequired,
         "aria-controls": this.props.ariaControls,
-        ...s
+        ...l
       }
     );
-    return e ? e.call(void 0, o) : o;
+    return s ? s.call(void 0, n) : n;
   }
 }
 export {
-  g as default
+  v as default
 };