@progress/kendo-react-dropdowns 8.3.0-develop.10 → 8.3.0-develop.12

package/AutoComplete/AutoComplete.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 B=require("react"),f=require("prop-types"),q=require("../common/SearchBar.js"),E=require("../common/ListContainer.js"),T=require("../common/List.js"),k=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),g=require("../common/utils.js"),l=require("@progress/kendo-react-common"),L=require("@progress/kendo-react-labels"),R=require("../package-metadata.js"),H=require("../common/ClearButton.js"),F=require("../common/withCustomComponent.js");function z(x){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const e in x)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(x,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>x[e]})}}return a.default=x,Object.freeze(a)}const I=z(B),A="Please enter a valid value!",{sizeMap:_,roundedMap:G}=l.kendoThemeMaps,b=class b extends I.Component{constructor(a){super(a),this.state={},this.base=new k(this),this._element=null,this._suggested="",this._input=null,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,s)=>{const i=g.getFilteredData(this.props),t=g.getItemValue(i[e],this.props.textField);this.triggerOnChange(t,s)},this.itemFocus=(e,s)=>{const{textField:i}=this.props,o=g.getFilteredData(this.props)[e];g.areSame(this.state.focusedItem,o,i)||(s.data.focusedItem=o)},this.togglePopup=e=>{this.base.togglePopup(e)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||A)},this.onScroll=e=>{this._isScrolling=!0;const{list:s}=this.base,{groupField:i}=this.props;let t=g.getFilteredData(this.props);if(!i||!t.length)return;const o=this.itemHeight||(s?s.children[0].offsetHeight:0),p=e.target.scrollTop;i&&(t=this.base.getGroupedDataModernMode(t,i));let n=t[0][i];for(let r=1;r<t.length&&!(o*r>p);r++)t[r]&&t[r][i]&&(n=t[r][i]);n!==this.state.group&&this.setState({group:n})},this.handleItemClick=(e,s)=>{this.base.handleItemClick(e,s),this._valueDuringOnChange=void 0},this.onChangeHandler=e=>{const i=this.base.initState(),t=e.currentTarget,o=t.value,d=t.selectionEnd===o.length;i.syntheticEvent=e;const p=this._suggested,n=this.value,r=n&&n.substring(0,n.length-p.length),v=r&&r===o,h=r&&r.length>o.length,{suggest:m}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(m!==void 0&&m!==!1){v||h||!d?this._suggested="":this.suggestValue(o);const c=o+this._suggested,y={userInput:o,value:this._suggested};this.triggerOnChange(c,i,{suggestion:y})}else this._suggested="",this.triggerOnChange(o,i);(!u&&o||u&&!o)&&this.togglePopup(i),i.data.focusedItem=void 0,this.applyState(i),this.setState({group:void 0})},this.clearButtonClick=e=>{const i=this.base.initState(),t=this.props.opened!==void 0?this.props.opened:this.state.opened;i.syntheticEvent=e;const o="";this._suggested="",this.triggerOnChange(o,i),this.state.focusedItem!==void 0&&(i.data.focusedItem=void 0),t&&this.togglePopup(i),this.applyState(i)},this.onInputKeyDown=e=>{const{skipDisabledItems:s,groupField:i,textField:t}=this.props,o=g.getFilteredData(this.props);this._isScrolling&&(this._isScrolling=!1);const d=this.focusedIndex(),p=o[d],n=e.keyCode,r=e.altKey,v=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=e;const m=()=>{v&&e.preventDefault()};if(r&&n===l.Keys.down)this.setState({opened:!0});else if(r&&n===l.Keys.up)this.setState({opened:!1});else if(v&&n===l.Keys.pageUp)m(),this.base.scrollPopupByPageSize(-1);else if(v&&n===l.Keys.pageDown)m(),this.base.scrollPopupByPageSize(1);else if(v&&(n===l.Keys.enter||n===l.Keys.esc))m(),s===!1&&p&&p.disabled?(v&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(e.currentTarget.value,h,e.keyCode);else if(!v&&n===l.Keys.esc){const u="";this._suggested="",this.triggerOnChange(u,h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h)}else if(n===l.Keys.up||n===l.Keys.down){if(i!==""&&t)if(!this.props.skipDisabledItems&&v)this.onNavigate(h,n);else{let u=0;if(n===l.Keys.down||n===l.Keys.right){const c=o.slice(d+1).find(y=>!y.disabled&&y[t]);u=c&&o.findIndex(y=>y[t]===c[t])}else if(n===l.Keys.up||n===l.Keys.left){let c;if(d===-1)c=o,u=o.findIndex(y=>!y.disabled&&y[t]);else{c=o.slice(0,d);let y=c.pop();for(;y&&y.disabled;)y=c.pop();u=y&&o.findIndex(C=>C[t]===y[t])}}if(u!==void 0){const c=u-d;this.onNavigate(h,n,c)}else u===void 0&&o.findIndex(c=>c[t])===o.length-1&&this.onNavigate(h,n)}else if(!this.props.skipDisabledItems&&v)this.onNavigate(h,n);else{let u=null;if(n===l.Keys.down||n===l.Keys.right)u=o.slice(d+1).find(c=>!c.disabled);else if(n===l.Keys.up||n===l.Keys.left){const c=o.slice(0,d);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-d-1;this.onNavigate(h,n,c)}else this.onNavigate(h,n)}this.applyState(h),m()}},this.handleBlur=e=>{if(this.state.focused){const s=this.base.initState();s.data.focused=!1,s.events.push({type:"onBlur"}),s.syntheticEvent=e,this.applyInputValue(e.currentTarget.value,s)}},l.validatePackage(R.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get element(){return this._element}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,e=!this.required||this.value!=="",s=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:s,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}componentDidUpdate(a,e){var m;const{groupField:s=""}=this.props,i=g.getFilteredData(this.props),{data:t=[]}=a,o=this.focusedIndex(),d=i[o],p=t!==i,n=d!==void 0&&e.focusedItem!==d,r=this.props.opened!==void 0?this.props.opened:this.state.opened,v=a.opened!==void 0?a.opened:e.opened,h=!v&&r;if(s==="")(r&&(n||p)||h)&&this.base.scrollToItem(o);else if(!this._isScrolling){const u=(m=this.base.getGroupedDataModernMode(i,s))==null?void 0:m.indexOf(d);h&&(i&&i.length!==0&&this.base.resetGroupStickyHeader(i[0][s],this),this.base.scrollToItem(u)),r&&v&&n&&this.base.scrollToItem(u)}this.setValidity()}componentDidMount(){this.base.didMount(),this.setValidity()}render(){const{dir:a,disabled:e,label:s,className:i,style:t,loading:o,suggest:d,size:p,rounded:n,fillMode:r}=this.props,v=!this.validityStyles||this.validity.valid,h=this.base,m=this.value,u=this.props.clearButton!==!1&&!o&&!!m,c=this.props.id||this._inputId,y=this.state.focused;typeof d=="string"&&(this._suggested=d);const[C,K]=F(this.props.prefix||I.Fragment),[V,M]=F(this.props.suffix||I.Fragment),D=I.createElement("span",{className:l.classNames("k-autocomplete k-input",i,{[`k-input-${_[p]||p}`]:p,[`k-rounded-${G[n]||n}`]:n,[`k-input-${r}`]:r,"k-invalid":!v,"k-focus":y&&!e,"k-loading":o,"k-required":this.required,"k-disabled":e}),ref:w=>{this._element=w,h.wrapper=w},style:s?{...t,width:void 0}:t,dir:a},this.props.prefix&&I.createElement(C,{...K}),this.renderSearchBar(m||"",c),o&&I.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u&&!o&&I.createElement(H,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&I.createElement(V,{...M}),this.renderListContainer());return s?I.createElement(L.FloatingLabel,{label:s,editorId:c,editorValue:m,editorValid:v,editorDisabled:e,style:{width:t?t.width:void 0},children:D}):D}onNavigate(a,e,s){const i=this.value,{textField:t,focusedItemIndex:o}=this.props,d=g.getFilteredData(this.props),p=this.state.focusedItem!==void 0?d.findIndex(r=>g.areSame(r,this.state.focusedItem,t)):o?o(d,i,t):d.indexOf(g.getFocusedItem(d,i,t)),n=this.base.navigation.navigate({keyCode:e,current:p,max:d.length-1,min:0,skipItems:s||void 0});n!==void 0&&this.itemFocus(n,a),this.applyState(a)}applyInputValue(a,e,s){const i=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:t}=this.props,o=g.getFilteredData(this.props),d=this.focusedIndex(),p=o[d];if(this._suggested="",i&&s===l.Keys.enter&&p&&!p.disabled){const n=g.getItemValue(o[this.focusedIndex(a)],t);this.triggerOnChange(n,e)}i&&this.togglePopup(e),this.applyState(e)}renderSearchBar(a,e){const s=this.base,{placeholder:i,tabIndex:t,disabled:o,readonly:d}=this.props,{focused:p}=this.state,n=this.props.opened!==void 0?this.props.opened:this.state.opened;return I.createElement(q,{id:e,placeholder:i,tabIndex:t,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:p,name:this.props.name,ref:r=>this._input=r&&r.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:s.handleFocus,onBlur:this.handleBlur,disabled:o,readOnly:d,expanded:n,owns:s.listBoxId,activedescendant:"option-"+s.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}renderListContainer(){const a=this.base,{dir:e,header:s,footer:i,size:t,groupField:o,list:d,groupStickyHeaderItemRender:p}=this.props,n=g.getFilteredData(this.props),r=a.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,h=r.width!==void 0?r.width:a.popupWidth;let{group:m}=this.state;return m===void 0&&o!==void 0&&(m=g.getItemValue(n[0],o)),I.createElement(E,{width:h,popupSettings:{...r,anchor:r.anchor||this.element,show:v,popupClass:l.classNames(r.popupClass,"k-list-container","k-autocomplete-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[n.length]},s&&I.createElement("div",{className:"k-list-header"},s),I.createElement("div",{className:l.classNames("k-list",{[`k-list-${_[t]||t}`]:t})},!d&&m&&n.length!==0&&I.createElement(N,{group:m,groupMode:"modern",render:p}),this.renderList()),i&&I.createElement("div",{className:"k-list-footer"},i))}renderList(){const a=this.base,e=a.getPopupSettings(),{textField:s,listNoDataRender:i,itemRender:t,groupHeaderItemRender:o}=this.props,d=g.getFilteredData(this.props),p=this.value,n=this.props.opened!==void 0?this.props.opened:this.state.opened;return I.createElement(T,{id:a.listBoxId,show:n,data:d.slice(),focusedIndex:this.focusedIndex(),value:p,textField:s,valueField:s,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:r=>a.list=r,wrapperStyle:{maxHeight:e.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:t,groupHeaderItemRender:o,noDataRender:i,onMouseDown:r=>r.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,e,s){this.value===a&&!s||(e.data.value=a,this._valueDuringOnChange=a,e.events.push({type:"onChange",...s||{}}))}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{textField:e}=this.props,s=g.getFilteredData(this.props),i=s[g.itemIndexStartsWith(s,a,e)];if(i){const t=g.getItemValue(i,e);a.toLowerCase()!==t.toLowerCase()&&(this._suggested=t.substring(a.length))}}}focusedIndex(a){const{textField:e,focusedItemIndex:s,skipDisabledItems:i}=this.props,t=g.getFilteredData(this.props),o=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return t.findIndex(d=>g.areSame(d,this.state.focusedItem,e));if(s)return s(t,o,e);{const d=t.indexOf(g.getFocusedItem(t,o,e));return i&&e&&d===-1?t.findIndex(p=>!p.disabled&&p[e]):Math.max(0,d)}}};b.displayName="AutoComplete",b.propTypes={...k.basicPropTypes,size:f.oneOf([null,"small","medium","large"]),rounded:f.oneOf([null,"small","medium","large","full"]),fillMode:f.oneOf([null,"solid","flat","outline"]),groupField:f.string,suggest:f.oneOfType([f.bool,f.string]),placeholder:f.string,value:f.string,defaultValue:f.string,validationMessage:f.string,required:f.bool,readonly:f.bool,clearButton:f.bool,valueRender:f.func,id:f.string,ariaLabelledBy:f.string,ariaDescribedBy:f.string,list:f.any,skipDisabledItems:f.bool},b.defaultProps={...k.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let S=b;const O=l.createPropsContext(),P=l.withIdHOC(l.withPropsContext(O,S));P.displayName="KendoReactAutoComplete";exports.AutoComplete=P;exports.AutoCompletePropsContext=O;exports.AutoCompleteWithoutContext=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),f=require("prop-types"),q=require("../common/SearchBar.js"),E=require("../common/ListContainer.js"),T=require("../common/List.js"),k=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),g=require("../common/utils.js"),p=require("@progress/kendo-react-common"),L=require("@progress/kendo-react-labels"),R=require("../package-metadata.js"),H=require("../common/ClearButton.js"),F=require("../common/withCustomComponent.js");function z(x){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const e in x)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(x,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>x[e]})}}return a.default=x,Object.freeze(a)}const I=z(B),A="Please enter a valid value!",{sizeMap:_,roundedMap:G}=p.kendoThemeMaps,b=class b extends I.Component{constructor(a){super(a),this.state={},this.base=new k(this),this._element=null,this._suggested="",this._input=null,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,s)=>{const i=g.getFilteredData(this.props),t=g.getItemValue(i[e],this.props.textField);this.triggerOnChange(t,s)},this.itemFocus=(e,s)=>{const{textField:i}=this.props,o=g.getFilteredData(this.props)[e];g.areSame(this.state.focusedItem,o,i)||(s.data.focusedItem=o)},this.togglePopup=e=>{this.base.togglePopup(e)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||A)},this.onScroll=e=>{this._isScrolling=!0;const{list:s}=this.base,{groupField:i}=this.props;let t=g.getFilteredData(this.props);if(!i||!t.length)return;const o=this.itemHeight||(s?s.children[0].offsetHeight:0),l=e.target.scrollTop;i&&(t=this.base.getGroupedDataModernMode(t,i));let n=t[0][i];for(let d=1;d<t.length&&!(o*d>l);d++)t[d]&&t[d][i]&&(n=t[d][i]);n!==this.state.group&&this.setState({group:n})},this.handleItemClick=(e,s)=>{this.base.handleItemClick(e,s),this._valueDuringOnChange=void 0},this.onChangeHandler=e=>{const i=this.base.initState(),t=e.currentTarget,o=t.value,r=t.selectionEnd===o.length;i.syntheticEvent=e;const l=this._suggested,n=this.value,d=n&&n.substring(0,n.length-l.length),v=d&&d===o,h=d&&d.length>o.length,{suggest:m}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(m!==void 0&&m!==!1){v||h||!r?this._suggested="":this.suggestValue(o);const c=o+this._suggested,y={userInput:o,value:this._suggested};this.triggerOnChange(c,i,{suggestion:y})}else this._suggested="",this.triggerOnChange(o,i);(!u&&o||u&&!o)&&this.togglePopup(i),i.data.focusedItem=void 0,this.applyState(i),this.setState({group:void 0})},this.clearButtonClick=e=>{const i=this.base.initState(),t=this.props.opened!==void 0?this.props.opened:this.state.opened;i.syntheticEvent=e;const o="";this._suggested="",this.triggerOnChange(o,i),this.state.focusedItem!==void 0&&(i.data.focusedItem=void 0),t&&this.togglePopup(i),this.applyState(i)},this.onInputKeyDown=e=>{const{skipDisabledItems:s,groupField:i,textField:t}=this.props,o=g.getFilteredData(this.props);this._isScrolling&&(this._isScrolling=!1);const r=this.focusedIndex(),l=o[r],n=e.keyCode,d=e.altKey,v=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=e;const m=()=>{v&&e.preventDefault()};if(d&&n===p.Keys.down)this.setState({opened:!0});else if(d&&n===p.Keys.up)this.setState({opened:!1});else if(v&&n===p.Keys.pageUp)m(),this.base.scrollPopupByPageSize(-1);else if(v&&n===p.Keys.pageDown)m(),this.base.scrollPopupByPageSize(1);else if(v&&(n===p.Keys.enter||n===p.Keys.esc))m(),s===!1&&l&&l.disabled?(v&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(e.currentTarget.value,h,e.keyCode);else if(!v&&n===p.Keys.esc){const u="";this._suggested="",this.triggerOnChange(u,h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h)}else if(n===p.Keys.up||n===p.Keys.down){if(i!==""&&t)if(!this.props.skipDisabledItems&&v)this.onNavigate(h,n);else{let u=0;if(n===p.Keys.down||n===p.Keys.right){const c=o.slice(r+1).find(y=>!y.disabled&&y[t]);u=c&&o.findIndex(y=>y[t]===c[t])}else if(n===p.Keys.up||n===p.Keys.left){let c;if(r===-1)c=o,u=o.findIndex(y=>!y.disabled&&y[t]);else{c=o.slice(0,r);let y=c.pop();for(;y&&y.disabled;)y=c.pop();u=y&&o.findIndex(C=>C[t]===y[t])}}if(u!==void 0){const c=u-r;this.onNavigate(h,n,c)}else u===void 0&&o.findIndex(c=>c[t])===o.length-1&&this.onNavigate(h,n)}else if(!this.props.skipDisabledItems&&v)this.onNavigate(h,n);else{let u=null;if(n===p.Keys.down||n===p.Keys.right)u=o.slice(r+1).find(c=>!c.disabled);else if(n===p.Keys.up||n===p.Keys.left){const c=o.slice(0,r);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-r-1;this.onNavigate(h,n,c)}else this.onNavigate(h,n)}this.applyState(h),m()}},this.handleBlur=e=>{if(this.state.focused){const s=this.base.initState();s.data.focused=!1,s.events.push({type:"onBlur"}),s.syntheticEvent=e,this.applyInputValue(e.currentTarget.value,s)}},p.validatePackage(R.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get element(){return this._element}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,e=!this.required||this.value!=="",s=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:s,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}componentDidUpdate(a,e){var m;const{groupField:s=""}=this.props,i=g.getFilteredData(this.props),{data:t=[]}=a,o=this.focusedIndex(),r=i[o],l=t!==i,n=r!==void 0&&e.focusedItem!==r,d=this.props.opened!==void 0?this.props.opened:this.state.opened,v=a.opened!==void 0?a.opened:e.opened,h=!v&&d;if(s==="")(d&&(n||l)||h)&&this.base.scrollToItem(o);else if(!this._isScrolling){const u=(m=this.base.getGroupedDataModernMode(i,s))==null?void 0:m.indexOf(r);h&&(i&&i.length!==0&&this.base.resetGroupStickyHeader(i[0][s],this),this.base.scrollToItem(u)),d&&v&&n&&this.base.scrollToItem(u)}this.setValidity()}componentDidMount(){this.base.didMount(),this.setValidity()}render(){const{dir:a,disabled:e,label:s,className:i,style:t,loading:o,suggest:r,size:l,rounded:n,fillMode:d}=this.props,v=!this.validityStyles||this.validity.valid,h=this.base,m=this.value,u=this.props.clearButton!==!1&&!o&&!!m,c=this.props.id||this._inputId,y=this.state.focused;typeof r=="string"&&(this._suggested=r);const[C,K]=F(this.props.prefix||I.Fragment),[V,M]=F(this.props.suffix||I.Fragment),D=I.createElement("span",{className:p.classNames("k-autocomplete k-input",i,{[`k-input-${_[l]||l}`]:l,[`k-rounded-${G[n]||n}`]:n,[`k-input-${d}`]:d,"k-invalid":!v,"k-focus":y&&!e,"k-loading":o,"k-required":this.required,"k-disabled":e}),ref:w=>{this._element=w,h.wrapper=w},style:s?{...t,width:void 0}:t,dir:a},this.props.prefix&&I.createElement(C,{...K}),this.renderSearchBar(m||"",c),o&&I.createElement(p.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u&&!o&&I.createElement(H,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&I.createElement(V,{...M}),this.renderListContainer());return s?I.createElement(L.FloatingLabel,{label:s,editorId:c,editorValue:m,editorValid:v,editorDisabled:e,style:{width:t?t.width:void 0},children:D}):D}onNavigate(a,e,s){const i=this.value,{textField:t,focusedItemIndex:o}=this.props,r=g.getFilteredData(this.props),l=this.state.focusedItem!==void 0?r.findIndex(d=>g.areSame(d,this.state.focusedItem,t)):o?o(r,i,t):r.indexOf(g.getFocusedItem(r,i,t)),n=this.base.navigation.navigate({keyCode:e,current:l,max:r.length-1,min:0,skipItems:s||void 0});n!==void 0&&this.itemFocus(n,a),this.applyState(a)}applyInputValue(a,e,s){const i=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:t}=this.props,o=g.getFilteredData(this.props),r=this.focusedIndex(),l=o[r];if(this._suggested="",i&&s===p.Keys.enter&&l&&!l.disabled){const n=g.getItemValue(o[this.focusedIndex(a)],t);this.triggerOnChange(n,e)}i&&this.togglePopup(e),this.applyState(e)}renderSearchBar(a,e){const s=this.base,{placeholder:i,tabIndex:t,disabled:o,readonly:r}=this.props,{focused:l}=this.state,n=this.props.opened!==void 0?this.props.opened:this.state.opened;return I.createElement(q,{id:e,placeholder:i,tabIndex:t,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:l,name:this.props.name,ref:d=>this._input=d&&d.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:s.handleFocus,onBlur:this.handleBlur,disabled:o,readOnly:r,expanded:n,owns:s.listBoxId,activedescendant:"option-"+s.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}renderListContainer(){const a=this.base,{dir:e,header:s,footer:i,size:t,groupField:o,list:r,groupStickyHeaderItemRender:l}=this.props,n=g.getFilteredData(this.props),d=a.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,h=d.width!==void 0?d.width:a.popupWidth;let{group:m}=this.state;return m===void 0&&o!==void 0&&(m=g.getItemValue(n[0],o)),I.createElement(E,{width:h,popupSettings:{...d,anchor:d.anchor||this.element,show:v,popupClass:p.classNames(d.popupClass,"k-list-container","k-autocomplete-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[n.length]},s&&I.createElement("div",{className:"k-list-header"},s),I.createElement("div",{className:p.classNames("k-list",{[`k-list-${_[t]||t}`]:t})},!r&&m&&n.length!==0&&I.createElement(N,{group:m,groupMode:"modern",render:l}),this.renderList()),i&&I.createElement("div",{className:"k-list-footer"},i))}renderList(){const a=this.base,e=a.getPopupSettings(),{textField:s,listNoDataRender:i,itemRender:t,groupHeaderItemRender:o}=this.props,r=g.getFilteredData(this.props),l=this.value,n=this.props.opened!==void 0?this.props.opened:this.state.opened;return I.createElement(T,{id:a.listBoxId,show:n,data:r.slice(),focusedIndex:this.focusedIndex(),value:l,textField:s,valueField:s,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>a.list=d,wrapperStyle:{maxHeight:e.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:t,groupHeaderItemRender:o,noDataRender:i,onMouseDown:d=>d.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,e,s){this.value===a&&!s||(e.data.value=a,this._valueDuringOnChange=a,e.events.push({type:"onChange",...s||{}}))}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{textField:e}=this.props,s=g.getFilteredData(this.props),i=s[g.itemIndexStartsWith(s,a,e)];if(i){const t=g.getItemValue(i,e);a.toLowerCase()!==t.toLowerCase()&&(this._suggested=t.substring(a.length))}}}focusedIndex(a){const{textField:e,focusedItemIndex:s,skipDisabledItems:i}=this.props,t=g.getFilteredData(this.props),o=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return t.findIndex(l=>g.areSame(l,this.state.focusedItem,e));if(s)return s(t,o,e);const r=t.indexOf(g.getFocusedItem(t,o,e));return i&&e&&r===-1?t.findIndex(l=>!l.disabled&&l[e]):Math.max(0,r)}};b.displayName="AutoComplete",b.propTypes={...k.basicPropTypes,size:f.oneOf([null,"small","medium","large"]),rounded:f.oneOf([null,"small","medium","large","full"]),fillMode:f.oneOf([null,"solid","flat","outline"]),groupField:f.string,suggest:f.oneOfType([f.bool,f.string]),placeholder:f.string,value:f.string,defaultValue:f.string,validationMessage:f.string,required:f.bool,readonly:f.bool,clearButton:f.bool,valueRender:f.func,id:f.string,ariaLabelledBy:f.string,ariaDescribedBy:f.string,list:f.any,skipDisabledItems:f.bool},b.defaultProps={...k.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let S=b;const O=p.createPropsContext(),P=p.withIdHOC(p.withPropsContext(O,S));P.displayName="KendoReactAutoComplete";exports.AutoComplete=P;exports.AutoCompletePropsContext=O;exports.AutoCompleteWithoutContext=S;

package/AutoComplete/AutoComplete.mjs

@@ -44,19 +44,19 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
       const i = this.itemHeight || (o ? o.children[0].offsetHeight : 0), p = e.target.scrollTop;
       s && (t = this.base.getGroupedDataModernMode(t, s));
       let n = t[0][s];
-      for (let r = 1; r < t.length && !(i * r > p); r++)
-        t[r] && t[r][s] && (n = t[r][s]);
+      for (let d = 1; d < t.length && !(i * d > p); d++)
+        t[d] && t[d][s] && (n = t[d][s]);
       n !== this.state.group && this.setState({
         group: n
       });
     }, this.handleItemClick = (e, o) => {
       this.base.handleItemClick(e, o), this._valueDuringOnChange = void 0;
     }, this.onChangeHandler = (e) => {
-      const s = this.base.initState(), t = e.currentTarget, i = t.value, d = t.selectionEnd === i.length;
+      const s = this.base.initState(), t = e.currentTarget, i = t.value, r = t.selectionEnd === i.length;
       s.syntheticEvent = e;
-      const p = this._suggested, n = this.value, r = n && n.substring(0, n.length - p.length), f = r && r === i, h = r && r.length > i.length, { suggest: g } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      const p = this._suggested, n = this.value, d = n && n.substring(0, n.length - p.length), f = d && d === i, h = d && d.length > i.length, { suggest: g } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       if (g !== void 0 && g !== !1) {
-        f || h || !d ? this._suggested = "" : this.suggestValue(i);
+        f || h || !r ? this._suggested = "" : this.suggestValue(i);
         const u = i + this._suggested, v = { userInput: i, value: this._suggested };
         this.triggerOnChange(u, s, { suggestion: v });
       } else
@@ -70,16 +70,16 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
     }, this.onInputKeyDown = (e) => {
       const { skipDisabledItems: o, groupField: s, textField: t } = this.props, i = y(this.props);
       this._isScrolling && (this._isScrolling = !1);
-      const d = this.focusedIndex(), p = i[d], n = e.keyCode, r = e.altKey, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      const r = this.focusedIndex(), p = i[r], n = e.keyCode, d = e.altKey, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
       h.syntheticEvent = e;
       const g = () => {
         f && e.preventDefault();
       };
-      if (r && n === m.down)
+      if (d && n === m.down)
         this.setState({
           opened: !0
         });
-      else if (r && n === m.up)
+      else if (d && n === m.up)
         this.setState({
           opened: !1
         });
@@ -99,14 +99,14 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
           else {
             let l = 0;
             if (n === m.down || n === m.right) {
-              const u = i.slice(d + 1).find((v) => !v.disabled && v[t]);
+              const u = i.slice(r + 1).find((v) => !v.disabled && v[t]);
               l = u && i.findIndex((v) => v[t] === u[t]);
             } else if (n === m.up || n === m.left) {
               let u;
-              if (d === -1)
+              if (r === -1)
                 u = i, l = i.findIndex((v) => !v.disabled && v[t]);
               else {
-                u = i.slice(0, d);
+                u = i.slice(0, r);
                 let v = u.pop();
                 for (; v && v.disabled; )
                   v = u.pop();
@@ -114,7 +114,7 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
               }
             }
             if (l !== void 0) {
-              const u = l - d;
+              const u = l - r;
               this.onNavigate(h, n, u);
             } else
               l === void 0 && i.findIndex((u) => u[t]) === i.length - 1 && this.onNavigate(h, n);
@@ -124,14 +124,14 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
         else {
           let l = null;
           if (n === m.down || n === m.right)
-            l = i.slice(d + 1).find((u) => !u.disabled);
+            l = i.slice(r + 1).find((u) => !u.disabled);
           else if (n === m.up || n === m.left) {
-            const u = i.slice(0, d);
+            const u = i.slice(0, r);
             for (l = u.pop(); l && l.disabled; )
               l = u.pop();
           }
           if (l) {
-            const u = l.id - d - 1;
+            const u = l.id - r - 1;
             this.onNavigate(h, n, u);
           } else
             this.onNavigate(h, n);
@@ -194,12 +194,12 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
    */
   componentDidUpdate(a, e) {
     var g;
-    const { groupField: o = "" } = this.props, s = y(this.props), { data: t = [] } = a, i = this.focusedIndex(), d = s[i], p = t !== s, n = d !== void 0 && e.focusedItem !== d, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = a.opened !== void 0 ? a.opened : e.opened, h = !f && r;
+    const { groupField: o = "" } = this.props, s = y(this.props), { data: t = [] } = a, i = this.focusedIndex(), r = s[i], p = t !== s, n = r !== void 0 && e.focusedItem !== r, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = a.opened !== void 0 ? a.opened : e.opened, h = !f && d;
     if (o === "")
-      (r && (n || p) || h) && this.base.scrollToItem(i);
+      (d && (n || p) || h) && this.base.scrollToItem(i);
     else if (!this._isScrolling) {
-      const l = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(d);
-      h && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(l)), r && f && n && this.base.scrollToItem(l);
+      const l = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(r);
+      h && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(l)), d && f && n && this.base.scrollToItem(l);
     }
     this.setValidity();
   }
@@ -213,25 +213,21 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
    * @hidden
    */
   render() {
-    const { dir: a, disabled: e, label: o, className: s, style: t, loading: i, suggest: d, size: p, rounded: n, fillMode: r } = this.props, f = !this.validityStyles || this.validity.valid, h = this.base, g = this.value, l = this.props.clearButton !== !1 && !i && !!g, u = this.props.id || this._inputId, v = this.state.focused;
-    typeof d == "string" && (this._suggested = d);
+    const { dir: a, disabled: e, label: o, className: s, style: t, loading: i, suggest: r, size: p, rounded: n, fillMode: d } = this.props, f = !this.validityStyles || this.validity.valid, h = this.base, g = this.value, l = this.props.clearButton !== !1 && !i && !!g, u = this.props.id || this._inputId, v = this.state.focused;
+    typeof r == "string" && (this._suggested = r);
     const [S, V] = P(this.props.prefix || I.Fragment), [E, M] = P(this.props.suffix || I.Fragment), _ = /* @__PURE__ */ I.createElement(
       "span",
       {
-        className: w(
-          "k-autocomplete k-input",
-          s,
-          {
-            [`k-input-${B[p] || p}`]: p,
-            [`k-rounded-${W[n] || n}`]: n,
-            [`k-input-${r}`]: r,
-            "k-invalid": !f,
-            "k-focus": v && !e,
-            "k-loading": i,
-            "k-required": this.required,
-            "k-disabled": e
-          }
-        ),
+        className: w("k-autocomplete k-input", s, {
+          [`k-input-${B[p] || p}`]: p,
+          [`k-rounded-${W[n] || n}`]: n,
+          [`k-input-${d}`]: d,
+          "k-invalid": !f,
+          "k-focus": v && !e,
+          "k-loading": i,
+          "k-required": this.required,
+          "k-disabled": e
+        }),
         ref: (F) => {
           this._element = F, h.wrapper = F;
         },
@@ -262,10 +258,10 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
    * @hidden
    */
   onNavigate(a, e, o) {
-    const s = this.value, { textField: t, focusedItemIndex: i } = this.props, d = y(this.props), p = this.state.focusedItem !== void 0 ? d.findIndex((r) => k(r, this.state.focusedItem, t)) : i ? i(d, s, t) : d.indexOf(O(d, s, t)), n = this.base.navigation.navigate({
+    const s = this.value, { textField: t, focusedItemIndex: i } = this.props, r = y(this.props), p = this.state.focusedItem !== void 0 ? r.findIndex((d) => k(d, this.state.focusedItem, t)) : i ? i(r, s, t) : r.indexOf(O(r, s, t)), n = this.base.navigation.navigate({
       keyCode: e,
       current: p,
-      max: d.length - 1,
+      max: r.length - 1,
       min: 0,
       skipItems: o || void 0
     });
@@ -275,7 +271,7 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
    * @hidden
    */
   applyInputValue(a, e, o) {
-    const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: t } = this.props, i = y(this.props), d = this.focusedIndex(), p = i[d];
+    const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: t } = this.props, i = y(this.props), r = this.focusedIndex(), p = i[r];
     if (this._suggested = "", s && o === m.enter && p && !p.disabled) {
       const n = x(i[this.focusedIndex(a)], t);
       this.triggerOnChange(n, e);
@@ -283,7 +279,7 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
     s && this.togglePopup(e), this.applyState(e);
   }
   renderSearchBar(a, e) {
-    const o = this.base, { placeholder: s, tabIndex: t, disabled: i, readonly: d } = this.props, { focused: p } = this.state, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const o = this.base, { placeholder: s, tabIndex: t, disabled: i, readonly: r } = this.props, { focused: p } = this.state, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ I.createElement(
       T,
       {
@@ -295,13 +291,13 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
         suggestedText: this._suggested,
         focused: p,
         name: this.props.name,
-        ref: (r) => this._input = r && r.input,
+        ref: (d) => this._input = d && d.input,
         onKeyDown: this.onInputKeyDown,
         onChange: this.onChangeHandler,
         onFocus: o.handleFocus,
         onBlur: this.handleBlur,
         disabled: i,
-        readOnly: d,
+        readOnly: r,
         expanded: n,
         owns: o.listBoxId,
         activedescendant: "option-" + o.guid + "-" + this.focusedIndex(),
@@ -314,29 +310,17 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
     );
   }
   renderListContainer() {
-    const a = this.base, {
-      dir: e,
-      header: o,
-      footer: s,
-      size: t,
-      groupField: i,
-      list: d,
-      groupStickyHeaderItemRender: p
-    } = this.props, n = y(this.props), r = a.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = r.width !== void 0 ? r.width : a.popupWidth;
+    const a = this.base, { dir: e, header: o, footer: s, size: t, groupField: i, list: r, groupStickyHeaderItemRender: p } = this.props, n = y(this.props), d = a.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = d.width !== void 0 ? d.width : a.popupWidth;
     let { group: g } = this.state;
     return g === void 0 && i !== void 0 && (g = x(n[0], i)), /* @__PURE__ */ I.createElement(
       N,
       {
         width: h,
         popupSettings: {
-          ...r,
-          anchor: r.anchor || this.element,
+          ...d,
+          anchor: d.anchor || this.element,
           show: f,
-          popupClass: w(
-            r.popupClass,
-            "k-list-container",
-            "k-autocomplete-popup"
-          )
+          popupClass: w(d.popupClass, "k-list-container", "k-autocomplete-popup")
         },
         dir: e !== void 0 ? e : this.base.dirCalculated,
         itemsCount: [n.length]
@@ -345,32 +329,24 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
       /* @__PURE__ */ I.createElement(
         "div",
         {
-          className: w(
-            "k-list",
-            {
-              [`k-list-${B[t] || t}`]: t
-            }
-          )
+          className: w("k-list", {
+            [`k-list-${B[t] || t}`]: t
+          })
         },
-        !d && g && n.length !== 0 && /* @__PURE__ */ I.createElement(H, { group: g, groupMode: "modern", render: p }),
+        !r && g && n.length !== 0 && /* @__PURE__ */ I.createElement(H, { group: g, groupMode: "modern", render: p }),
         this.renderList()
       ),
       s && /* @__PURE__ */ I.createElement("div", { className: "k-list-footer" }, s)
     );
   }
   renderList() {
-    const a = this.base, e = a.getPopupSettings(), {
-      textField: o,
-      listNoDataRender: s,
-      itemRender: t,
-      groupHeaderItemRender: i
-    } = this.props, d = y(this.props), p = this.value, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const a = this.base, e = a.getPopupSettings(), { textField: o, listNoDataRender: s, itemRender: t, groupHeaderItemRender: i } = this.props, r = y(this.props), p = this.value, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ I.createElement(
       L,
       {
         id: a.listBoxId,
         show: n,
-        data: d.slice(),
+        data: r.slice(),
         focusedIndex: this.focusedIndex(),
         value: p,
         textField: o,
@@ -379,14 +355,14 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
         optionsGuid: a.guid,
         groupField: this.props.groupField,
         groupMode: "modern",
-        listRef: (r) => a.list = r,
+        listRef: (d) => a.list = d,
         wrapperStyle: { maxHeight: e.height },
         wrapperCssClass: "k-list-content",
         onClick: this.handleItemClick,
         itemRender: t,
         groupHeaderItemRender: i,
         noDataRender: s,
-        onMouseDown: (r) => r.preventDefault(),
+        onMouseDown: (d) => d.preventDefault(),
         onScroll: this.onScroll
       }
     );
@@ -409,13 +385,11 @@ const Q = "Please enter a valid value!", { sizeMap: B, roundedMap: W } = A, b =
   focusedIndex(a) {
     const { textField: e, focusedItemIndex: o, skipDisabledItems: s } = this.props, t = y(this.props), i = a !== void 0 ? a : this.value;
     if (this.state.focusedItem !== void 0)
-      return t.findIndex((d) => k(d, this.state.focusedItem, e));
+      return t.findIndex((p) => k(p, this.state.focusedItem, e));
     if (o)
       return o(t, i, e);
-    {
-      const d = t.indexOf(O(t, i, e));
-      return s && e && d === -1 ? t.findIndex((p) => !p.disabled && p[e]) : Math.max(0, d);
-    }
+    const r = t.indexOf(O(t, i, e));
+    return s && e && r === -1 ? t.findIndex((p) => !p.disabled && p[e]) : Math.max(0, r);
   }
 };
 b.displayName = "AutoComplete", b.propTypes = {
@@ -448,7 +422,12 @@ b.displayName = "AutoComplete", b.propTypes = {
   suffix: void 0
 };
 let D = b;
-const X = z(), Y = G($(X, D));
+const X = z(), Y = G(
+  $(
+    X,
+    D
+  )
+);
 Y.displayName = "KendoReactAutoComplete";
 export {
   Y as AutoComplete,

package/ComboBox/ComboBox.mjs

@@ -100,7 +100,10 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
         n.syntheticEvent = e, this.base.togglePopup(n), this.base.filterChanged(o, n), this.applyState(n);
       }
     }, this.onInputKeyDown = (e) => {
-      const { skipDisabledItems: t, textField: o, dataItemKey: n, groupField: l } = this.props, a = y(this.props), r = this.value, d = Math.max(0, a.findIndex((u) => S(u, r, n))), i = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      const { skipDisabledItems: t, textField: o, dataItemKey: n, groupField: l } = this.props, a = y(this.props), r = this.value, d = Math.max(
+        0,
+        a.findIndex((u) => S(u, r, n))
+      ), i = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
       if (h.syntheticEvent = e, !e.altKey && (i === I.up || i === I.down)) {
         if (e.preventDefault(), l !== "" && o)
           if (!this.props.skipDisabledItems && c)
@@ -271,7 +274,10 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
   }
   /** @hidden */
   render() {
-    const s = U(this).toLanguageString(q, $[q]), e = U(this).toLanguageString(
+    const s = U(this).toLanguageString(
+      q,
+      $[q]
+    ), e = U(this).toLanguageString(
       G,
       $[G]
     ), {
@@ -402,7 +408,17 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
     return d !== -1 ? this.handleItemSelect(d + r, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: o, groupField: n, groupMode: l, list: a, virtual: r, adaptiveTitle: d, groupStickyHeaderItemRender: i } = this.props, c = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getAdaptiveAnimation();
+    const { windowWidth: s = 0 } = this.state, {
+      header: e,
+      footer: t,
+      size: o,
+      groupField: n,
+      groupMode: l,
+      list: a,
+      virtual: r,
+      adaptiveTitle: d,
+      groupStickyHeaderItemRender: i
+    } = this.props, c = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getAdaptiveAnimation();
     let { group: v } = this.state;
     v === void 0 && n !== void 0 && (v = D(c[0], n));
     const m = {
@@ -428,15 +444,29 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
         icon: "x",
         svgIcon: Ie
       }
-    ))), /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ p.createElement(Ce, { overflowHidden: !0 }, /* @__PURE__ */ p.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ p.createElement("div", { className: w(
+    ))), /* @__PURE__ */ p.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ p.createElement(Ce, { overflowHidden: !0 }, /* @__PURE__ */ p.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ p.createElement(
+      "div",
       {
-        "k-list": !a,
-        "k-list-lg": !0,
-        "k-virtual-list": r,
-        "k-data-table": a,
-        [`k-table-${O[o] || o}`]: a && o
-      }
-    ) }, e && /* @__PURE__ */ p.createElement("div", { className: "k-table-header" }, e), !a && v && c.length !== 0 && /* @__PURE__ */ p.createElement(z, { group: v, groupMode: l, render: i }), this.renderList(), t && /* @__PURE__ */ p.createElement("div", { className: "k-list-footer" }, t)))));
+        className: w({
+          "k-list": !a,
+          "k-list-lg": !0,
+          "k-virtual-list": r,
+          "k-data-table": a,
+          [`k-table-${O[o] || o}`]: a && o
+        })
+      },
+      e && /* @__PURE__ */ p.createElement("div", { className: "k-table-header" }, e),
+      !a && v && c.length !== 0 && /* @__PURE__ */ p.createElement(
+        z,
+        {
+          group: v,
+          groupMode: l,
+          render: i
+        }
+      ),
+      this.renderList(),
+      t && /* @__PURE__ */ p.createElement("div", { className: "k-list-footer" }, t)
+    ))));
   }
   renderListContainer() {
     const s = this.base, { dir: e, header: t, footer: o, groupField: n, groupMode: l, size: a, list: r, virtual: d, groupStickyHeaderItemRender: i } = this.props, c = y(this.props), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = s.getPopupSettings(), v = g.width !== void 0 ? g.width : s.popupWidth;
@@ -449,29 +479,38 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
           ...g,
           anchor: g.anchor || this.element,
           show: h,
-          popupClass: w(
-            g.popupClass,
-            "k-list-container",
-            "k-combobox-popup"
-          )
+          popupClass: w(g.popupClass, "k-list-container", "k-combobox-popup")
         },
         dir: e !== void 0 ? e : this.base.dirCalculated,
         itemsCount: [c.length]
       },
-      /* @__PURE__ */ p.createElement("div", { className: w(
-        {
-          "k-list": !r,
-          [`k-list-${O[a] || a}`]: !r && a,
-          "k-virtual-list": d,
-          "k-data-table": r,
-          [`k-table-${O[a] || a}`]: r && a
-        }
-      ) }, t && /* @__PURE__ */ p.createElement("div", { className: "k-table-header" }, t), !r && m && c.length !== 0 && /* @__PURE__ */ p.createElement(z, { group: m, groupMode: l, render: i }), this.renderList(), o && /* @__PURE__ */ p.createElement("div", { className: w(
+      /* @__PURE__ */ p.createElement(
+        "div",
         {
-          "k-list-footer": !this.props.footerClassName
+          className: w({
+            "k-list": !r,
+            [`k-list-${O[a] || a}`]: !r && a,
+            "k-virtual-list": d,
+            "k-data-table": r,
+            [`k-table-${O[a] || a}`]: r && a
+          })
         },
-        this.props.footerClassName
-      ) }, o))
+        t && /* @__PURE__ */ p.createElement("div", { className: "k-table-header" }, t),
+        !r && m && c.length !== 0 && /* @__PURE__ */ p.createElement(z, { group: m, groupMode: l, render: i }),
+        this.renderList(),
+        o && /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: w(
+              {
+                "k-list-footer": !this.props.footerClassName
+              },
+              this.props.footerClassName
+            )
+          },
+          o
+        )
+      )
     );
   }
   renderList() {
@@ -503,12 +542,9 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
           i.list = this.base.list = x, this.itemHeight = 0;
         },
         wrapperStyle: this.state.windowWidth && this.state.windowWidth > W ? { maxHeight: d.height } : {},
-        wrapperCssClass: w(
-          "k-list-content",
-          {
-            "k-list-scroller": !a
-          }
-        ),
+        wrapperCssClass: w("k-list-content", {
+          "k-list-scroller": !a
+        }),
         listStyle: i.enabled ? { transform: g } : void 0,
         key: "listkey",
         skip: c,
@@ -534,7 +570,10 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
       dataItemKey: d,
       virtual: i = { skip: 0 },
       accessKey: c
-    } = this.props, h = y(this.props), g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = this.value, m = Math.max(0, h.findIndex((u) => S(u, v, d)));
+    } = this.props, h = y(this.props), g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = this.value, m = Math.max(
+      0,
+      h.findIndex((u) => S(u, v, d))
+    );
     this._suggested && !S(this._valueOnDidUpdate, v, d) && (this._suggested = "");
     const k = {
       accessKey: c
@@ -581,7 +620,13 @@ const Se = "Please enter a valid value!", { sizeMap: O, roundedMap: De } = de, E
     !this.hasDuplicates && (!C(t) && !C(s) || S(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
   }
   getFocusedIndex(s) {
-    const e = this.value, { textField: t, dataItemKey: o, virtual: n = { skip: 0 }, focusedItemIndex: l = K, skipDisabledItems: a } = this.props, r = y(this.props), d = this.props.filter ? this.props.filter : this.state.text;
+    const e = this.value, {
+      textField: t,
+      dataItemKey: o,
+      virtual: n = { skip: 0 },
+      focusedItemIndex: l = K,
+      skipDisabledItems: a
+    } = this.props, r = y(this.props), d = this.props.filter ? this.props.filter : this.state.text;
     return s && this.navigationIndex !== void 0 ? this.navigationIndex : C(e) && d === void 0 ? r.findIndex((i) => S(i, e, o)) : d ? l(r, d, t) : a && t && !d && n.skip === 0 ? r.findIndex((i) => !i.disabled && i[t]) : n.skip === 0 ? 0 : -1;
   }
   suggestValue(s) {
@@ -636,7 +681,12 @@ E.displayName = "ComboBox", E.propTypes = {
   suffix: void 0
 };
 let T = E;
-const Ee = ne(), we = le(re(Ee, T));
+const Ee = ne(), we = le(
+  re(
+    Ee,
+    T
+  )
+);
 we.displayName = "KendoReactComboBox";
 export {
   we as ComboBox,