@progress/kendo-react-dropdowns 11.0.0-develop.3 → 11.0.0-develop.5

package/AutoComplete/AutoComplete.js

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

package/AutoComplete/AutoComplete.mjs

@@ -5,31 +5,31 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as c from "react";
-import g from "prop-types";
+import * as g from "react";
+import c from "prop-types";
 import N from "../common/SearchBar.mjs";
 import R from "../common/ListContainer.mjs";
-import z from "../common/List.mjs";
-import C from "../common/DropDownBase.mjs";
-import L from "../common/GroupStickyHeader.mjs";
-import { getFilteredData as b, getItemValue as y, areSame as S, isPresent as H, getFocusedItem as M, itemIndexStartsWith as A } from "../common/utils.mjs";
-import { classNames as w, Keys as m, canUseDOM as D, IconWrap as K, createPropsContext as q, withIdHOC as W, withPropsContext as G, withAdaptiveModeContext as U, kendoThemeMaps as $ } from "@progress/kendo-react-common";
+import L from "../common/List.mjs";
+import S from "../common/DropDownBase.mjs";
+import z from "../common/GroupStickyHeader.mjs";
+import { getFilteredData as b, getItemValue as y, areSame as w, isPresent as H, getFocusedItem as M, itemIndexStartsWith as A } from "../common/utils.mjs";
+import { classNames as k, Keys as m, canUseDOM as D, IconWrap as K, createPropsContext as q, withIdHOC as W, withPropsContext as G, withAdaptiveModeContext as U, kendoThemeMaps as $ } from "@progress/kendo-react-common";
 import { FloatingLabel as j } from "@progress/kendo-react-labels";
 import J from "../common/ClearButton.mjs";
 import { AdaptiveMode as Q } from "../common/AdaptiveMode.mjs";
 import E from "../common/withCustomComponent.mjs";
 import { ActionSheetContent as X } from "@progress/kendo-react-layout";
 import Y from "../common/ListFilter.mjs";
-const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I = class I extends c.Component {
+const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I = class I extends g.Component {
   constructor() {
-    super(...arguments), this.state = {}, this.base = new C(this), this._element = null, this._suggested = "", this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
+    super(...arguments), this.state = {}, this.base = new S(this), this._element = null, this._suggested = "", this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (e, t) => {
-      const s = b(this.props), n = y(s[e], this.props.textField);
-      this.state.text && !this.mobileMode && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.triggerOnChange(n, t);
+      const s = b(this.props), o = y(s[e], this.props.textField);
+      this.state.text && !this.mobileMode && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.triggerOnChange(o, t);
     }, this.itemFocus = (e, t) => {
       const { textField: s } = this.props, i = b(this.props)[e];
-      S(this.state.focusedItem, i, s) || (t.data.focusedItem = i);
+      w(this.state.focusedItem, i, s) || (t.data.focusedItem = i);
     }, this.togglePopup = (e) => {
       this.base.togglePopup(e);
     }, this.setValidity = () => {
@@ -37,65 +37,67 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         this.validity.valid ? "" : this.props.validationMessage || Z
       );
     }, this.renderAdaptiveListContainer = () => {
-      const { adaptiveTitle: e } = this.props, { windowWidth: t = 0 } = this.state, s = /* @__PURE__ */ c.createElement(
+      const { windowWidth: e = 0 } = this.state, t = /* @__PURE__ */ g.createElement(
         Y,
         {
           value: this.value,
-          ref: (i) => {
-            this._adaptiveInput = i && i.element;
+          ref: (o) => {
+            this._adaptiveInput = o && o.element;
           },
           onChange: this.onChangeHandler,
           onKeyDown: this.onInputKeyDown,
-          size: this.props.size,
+          size: "large",
           rounded: this.props.rounded,
-          fillMode: this.props.fillMode
+          fillMode: this.props.fillMode,
+          placeholder: this.props.placeholder
         }
-      ), n = {
-        title: e,
+      ), s = {
+        title: this.props.adaptiveTitle || this.props.label,
+        subTitle: this.props.adaptiveSubtitle,
         expand: this.opened,
-        onClose: (i) => this.onCancel(i),
-        windowWidth: t,
-        mobileFilter: s
+        onClose: (o) => this.onCancel(o),
+        windowWidth: e,
+        mobileFilter: t
       };
-      return /* @__PURE__ */ c.createElement(Q, { ...n }, /* @__PURE__ */ c.createElement(X, null, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ g.createElement(Q, { ...s }, /* @__PURE__ */ g.createElement(X, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.onCancel = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e, e.stopPropagation(), this.opened && this.base.togglePopup(t), t.events.push({ type: "onCancel" });
       const s = this.state.text;
       H(s) && s !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
     }, this.listContainerContent = () => {
-      const { header: e, footer: t, size: s, groupStickyHeaderItemRender: n, groupField: i, list: a } = this.props, d = b(this.props);
-      let { group: o } = this.state;
-      return o === void 0 && i !== void 0 && (o = y(d[0], i)), /* @__PURE__ */ c.createElement(c.Fragment, null, e && /* @__PURE__ */ c.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ c.createElement(
+      const { header: e, footer: t, size: s, groupStickyHeaderItemRender: o, groupField: i, list: a } = this.props, d = b(this.props);
+      let { group: n } = this.state;
+      return n === void 0 && i !== void 0 && (n = y(d[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, e && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ g.createElement(
         "div",
         {
-          className: w("k-list", {
+          className: k("k-list", {
             [`k-list-${this.mobileMode ? "lg" : O[s] || s}`]: s
           })
         },
-        !a && o && d.length !== 0 && /* @__PURE__ */ c.createElement(L, { group: o, groupMode: "modern", render: n }),
+        !a && n && d.length !== 0 && /* @__PURE__ */ g.createElement(z, { group: n, groupMode: "modern", render: o }),
         this.renderList()
-      ), t && /* @__PURE__ */ c.createElement("div", { className: "k-list-footer" }, t));
+      ), t && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, t));
     }, this.onScroll = (e) => {
       this._isScrolling = !0;
       const { list: t } = this.base, { groupField: s } = this.props;
-      let n = b(this.props);
-      if (!s || !n.length)
+      let o = b(this.props);
+      if (!s || !o.length)
         return;
       const i = this.itemHeight || (t ? t.children[0].offsetHeight : 0), d = e.target.scrollTop;
-      s && (n = this.base.getGroupedDataModernMode(n, s));
-      let o = n[0][s];
-      for (let r = 1; r < n.length && !(i * r > d); r++)
-        n[r] && n[r][s] && (o = n[r][s]);
-      o !== this.state.group && this.setState({
-        group: o
+      s && (o = this.base.getGroupedDataModernMode(o, s));
+      let n = o[0][s];
+      for (let r = 1; r < o.length && !(i * r > d); r++)
+        o[r] && o[r][s] && (n = o[r][s]);
+      n !== this.state.group && this.setState({
+        group: n
       });
     }, this.handleItemClick = (e, t) => {
       this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
     }, this.onChangeHandler = (e) => {
-      const s = this.base.initState(), n = this.mobileMode ? e.target.element : e.currentTarget, i = n.value, a = n.selectionEnd === i.length;
+      const s = this.base.initState(), o = this.mobileMode ? e.target.element : e.currentTarget, i = o.value, a = o.selectionEnd === i.length;
       s.syntheticEvent = e;
-      const d = this._suggested, o = this.value, r = o && o.substring(0, o.length - d.length), l = r && r === i, h = r && r.length > i.length, { suggest: v } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      const d = this._suggested, n = this.value, r = n && n.substring(0, n.length - d.length), l = r && r === i, h = r && r.length > i.length, { suggest: v } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       if (v !== void 0 && v !== !1) {
         l || h || !a ? this._suggested = "" : this.suggestValue(i);
         const u = i + this._suggested, f = { userInput: i, value: this._suggested };
@@ -104,77 +106,77 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         this._suggested = "", this.triggerOnChange(i, s);
       (!p && i || p && !i) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
     }, this.clearButtonClick = (e) => {
-      const s = this.base.initState(), n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      const s = this.base.initState(), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       s.syntheticEvent = e;
       const i = "";
-      this._suggested = "", this.triggerOnChange(i, s), this.state.focusedItem !== void 0 && (s.data.focusedItem = void 0), n && this.togglePopup(s), this.applyState(s);
+      this._suggested = "", this.triggerOnChange(i, s), this.state.focusedItem !== void 0 && (s.data.focusedItem = void 0), o && this.togglePopup(s), this.applyState(s);
     }, this.onInputKeyDown = (e) => {
-      const { skipDisabledItems: t, groupField: s, textField: n } = this.props, i = b(this.props);
+      const { skipDisabledItems: t, groupField: s, textField: o } = this.props, i = b(this.props);
       this._isScrolling && (this._isScrolling = !1);
-      const a = this.focusedIndex(), d = i[a], o = e.keyCode, r = e.altKey, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      const a = this.focusedIndex(), d = i[a], n = e.keyCode, r = e.altKey, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
       h.syntheticEvent = e;
       const v = () => {
         l && e.preventDefault();
       };
-      if (r && o === m.down)
+      if (r && n === m.down)
         this.setState({
           opened: !0
         });
-      else if (r && o === m.up)
+      else if (r && n === m.up)
         this.setState({
           opened: !1
         });
-      else if (l && o === m.pageUp)
+      else if (l && n === m.pageUp)
         v(), this.base.scrollPopupByPageSize(-1);
-      else if (l && o === m.pageDown)
+      else if (l && n === m.pageDown)
         v(), this.base.scrollPopupByPageSize(1);
-      else if (l && (o === m.enter || o === m.esc))
+      else if (l && (n === m.enter || n === m.esc))
         v(), t === !1 && d && d.disabled ? (l && this.togglePopup(h), this.applyState(h)) : this.applyInputValue(e.currentTarget.value, h, e.keyCode);
-      else if (!l && o === m.esc) {
+      else if (!l && n === m.esc) {
         const p = "";
         this._suggested = "", this.triggerOnChange(p, h), this.state.focusedItem !== void 0 && (h.data.focusedItem = void 0), this.applyState(h);
-      } else if (o === m.up || o === m.down) {
-        if (s !== "" && n)
+      } else if (n === m.up || n === m.down) {
+        if (s !== "" && o)
           if (!this.props.skipDisabledItems && l)
-            this.onNavigate(h, o);
+            this.onNavigate(h, n);
           else {
             let p = 0;
-            if (o === m.down || o === m.right) {
-              const u = i.slice(a + 1).find((f) => !f.disabled && f[n]);
-              p = u && i.findIndex((f) => f[n] === u[n]);
-            } else if (o === m.up || o === m.left) {
+            if (n === m.down || n === m.right) {
+              const u = i.slice(a + 1).find((f) => !f.disabled && f[o]);
+              p = u && i.findIndex((f) => f[o] === u[o]);
+            } else if (n === m.up || n === m.left) {
               let u;
               if (a === -1)
-                u = i, p = i.findIndex((f) => !f.disabled && f[n]);
+                u = i, p = i.findIndex((f) => !f.disabled && f[o]);
               else {
                 u = i.slice(0, a);
                 let f = u.pop();
                 for (; f && f.disabled; )
                   f = u.pop();
-                p = f && i.findIndex((x) => x[n] === f[n]);
+                p = f && i.findIndex((C) => C[o] === f[o]);
               }
             }
             if (p !== void 0) {
               const u = p - a;
-              this.onNavigate(h, o, u);
-            } else p === void 0 && i.findIndex((u) => u[n]) === i.length - 1 && this.onNavigate(h, o);
+              this.onNavigate(h, n, u);
+            } else p === void 0 && i.findIndex((u) => u[o]) === i.length - 1 && this.onNavigate(h, n);
           }
         else if (!this.props.skipDisabledItems && l)
-          this.onNavigate(h, o);
+          this.onNavigate(h, n);
         else {
           let p = null;
-          if (o === m.down || o === m.right)
+          if (n === m.down || n === m.right)
             p = i.slice(a + 1).find((u) => !u.disabled);
-          else if (o === m.up || o === m.left) {
+          else if (n === m.up || n === m.left) {
             const u = i.slice(0, a);
             for (p = u.pop(); p && p.disabled; )
               p = u.pop();
           }
           if (p) {
             const u = p.id - a - 1;
-            this.onNavigate(h, o, u);
+            this.onNavigate(h, n, u);
           } else
-            this.onNavigate(h, o);
+            this.onNavigate(h, n);
         }
         this.applyState(h), v();
       }
@@ -254,12 +256,12 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
    */
   componentDidUpdate(e, t) {
     var p;
-    const { groupField: s = "" } = this.props, n = b(this.props), { data: i = [] } = e, a = this.focusedIndex(), d = n[a], o = i !== n, r = d !== void 0 && t.focusedItem !== d, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = e.opened !== void 0 ? e.opened : t.opened, v = !h && l;
+    const { groupField: s = "" } = this.props, o = b(this.props), { data: i = [] } = e, a = this.focusedIndex(), d = o[a], n = i !== o, r = d !== void 0 && t.focusedItem !== d, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = e.opened !== void 0 ? e.opened : t.opened, v = !h && l;
     if (s === "")
-      (l && (r || o) || v) && this.base.scrollToItem(a);
+      (l && (r || n) || v) && this.base.scrollToItem(a);
     else if (!this._isScrolling) {
-      const u = (p = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : p.indexOf(d);
-      v && (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(u)), l && h && r && this.base.scrollToItem(u);
+      const u = (p = this.base.getGroupedDataModernMode(o, s)) == null ? void 0 : p.indexOf(d);
+      v && (o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][s], this), this.base.scrollToItem(u)), l && h && r && this.base.scrollToItem(u);
     }
     this.setValidity();
   }
@@ -280,38 +282,38 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
    * @hidden
    */
   render() {
-    const { dir: e, disabled: t, label: s, className: n, style: i, loading: a, suggest: d, size: o, rounded: r, fillMode: l } = this.props, h = !this.validityStyles || this.validity.valid, v = this.base, p = this.value, u = this.props.clearButton !== !1 && !a && !!p, f = this.props.id || this._inputId, x = this.state.focused;
+    const { dir: e, disabled: t, label: s, className: o, style: i, loading: a, suggest: d, size: n, rounded: r, fillMode: l } = this.props, h = !this.validityStyles || this.validity.valid, v = this.base, p = this.value, u = this.props.clearButton !== !1 && !a && !!p, f = this.props.id || this._inputId, C = this.state.focused;
     typeof d == "string" && (this._suggested = d);
-    const [P, B] = E(this.props.prefix || c.Fragment), [T, V] = E(this.props.suffix || c.Fragment), _ = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
+    const [P, B] = E(this.props.prefix || g.Fragment), [T, V] = E(this.props.suffix || g.Fragment), F = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
       "span",
       {
-        className: w("k-autocomplete k-input", n, {
-          [`k-input-${O[o] || o}`]: o,
+        className: k("k-autocomplete k-input", o, {
+          [`k-input-${O[n] || n}`]: n,
           [`k-rounded-${ee[r] || r}`]: r,
           [`k-input-${l}`]: l,
           "k-invalid": !h,
-          "k-focus": x && !t,
+          "k-focus": C && !t,
           "k-loading": a,
           "k-required": this.required,
           "k-disabled": t
         }),
-        ref: (F) => {
-          this._element = F, v.wrapper = F;
+        ref: (x) => {
+          this._element = x, v.wrapper = x;
         },
         style: s ? { ...i, width: void 0 } : i,
         dir: e,
-        onFocus: this.handleFocus,
+        onFocus: this.mobileMode ? (x) => this.handleWrapperClick(x) : this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick
       },
-      this.props.prefix && /* @__PURE__ */ c.createElement(P, { ...B }),
+      this.props.prefix && /* @__PURE__ */ g.createElement(P, { ...B }),
       this.renderSearchBar(p || "", f),
-      a && /* @__PURE__ */ c.createElement(K, { className: "k-input-loading-icon", name: "loading" }),
-      u && !a && /* @__PURE__ */ c.createElement(J, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      this.props.suffix && /* @__PURE__ */ c.createElement(T, { ...V }),
+      a && /* @__PURE__ */ g.createElement(K, { className: "k-input-loading-icon", name: "loading" }),
+      u && !a && /* @__PURE__ */ g.createElement(J, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      this.props.suffix && /* @__PURE__ */ g.createElement(T, { ...V }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return s ? /* @__PURE__ */ c.createElement(
+    return s ? /* @__PURE__ */ g.createElement(
       j,
       {
         label: s,
@@ -320,17 +322,17 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         editorValid: h,
         editorDisabled: t,
         style: { width: i ? i.width : void 0 },
-        children: _
+        children: F
       }
-    ) : _;
+    ) : F;
   }
   /**
    * @hidden
    */
   onNavigate(e, t, s) {
-    const n = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), o = this.state.focusedItem !== void 0 ? d.findIndex((l) => S(l, this.state.focusedItem, i)) : a ? a(d, n, i) : d.indexOf(M(d, n, i)), r = this.base.navigation.navigate({
+    const o = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), n = this.state.focusedItem !== void 0 ? d.findIndex((l) => w(l, this.state.focusedItem, i)) : a ? a(d, o, i) : d.indexOf(M(d, o, i)), r = this.base.navigation.navigate({
       keyCode: t,
-      current: o,
+      current: n,
       max: d.length - 1,
       min: 0,
       skipItems: s || void 0
@@ -341,20 +343,20 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
    * @hidden
    */
   applyInputValue(e, t, s) {
-    const n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i } = this.props, a = b(this.props), d = this.focusedIndex(), o = a[d];
-    if (this._suggested = "", n && s === m.enter && o && !o.disabled) {
+    const o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i } = this.props, a = b(this.props), d = this.focusedIndex(), n = a[d];
+    if (this._suggested = "", o && s === m.enter && n && !n.disabled) {
       const r = y(a[this.focusedIndex(e)], i);
       this.triggerOnChange(r, t);
     }
-    n && this.togglePopup(t), this.applyState(t);
+    o && this.togglePopup(t), this.applyState(t);
   }
   renderSearchBar(e, t) {
-    const s = this.base, { placeholder: n, tabIndex: i, disabled: a, readonly: d, inputAttributes: o } = this.props, { focused: r } = this.state, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    return /* @__PURE__ */ c.createElement(
+    const s = this.base, { placeholder: o, tabIndex: i, disabled: a, readonly: d, inputAttributes: n } = this.props, { focused: r } = this.state, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    return /* @__PURE__ */ g.createElement(
       N,
       {
         id: t,
-        placeholder: n,
+        placeholder: o,
         tabIndex: i,
         accessKey: this.props.accessKey,
         value: e,
@@ -378,14 +380,14 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         ariaDescribedBy: this.props.ariaDescribedBy,
         ariaRequired: this.required,
         render: this.props.valueRender,
-        inputAttributes: o
+        inputAttributes: n
       }
     );
   }
   renderListContainer() {
-    const e = this.base, { dir: t, groupField: s } = this.props, n = b(this.props), i = e.getPopupSettings(), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = i.width !== void 0 ? i.width : e.popupWidth;
-    let { group: o } = this.state;
-    return o === void 0 && s !== void 0 && (o = y(n[0], s)), /* @__PURE__ */ c.createElement(
+    const e = this.base, { dir: t, groupField: s } = this.props, o = b(this.props), i = e.getPopupSettings(), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = i.width !== void 0 ? i.width : e.popupWidth;
+    let { group: n } = this.state;
+    return n === void 0 && s !== void 0 && (n = y(o[0], s)), /* @__PURE__ */ g.createElement(
       R,
       {
         width: d,
@@ -393,24 +395,24 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
           ...i,
           anchor: i.anchor || this.element,
           show: a,
-          popupClass: w(i.popupClass, "k-list-container", "k-autocomplete-popup")
+          popupClass: k(i.popupClass, "k-list-container", "k-autocomplete-popup")
         },
         dir: t !== void 0 ? t : this.base.dirCalculated,
-        itemsCount: [n.length]
+        itemsCount: [o.length]
       },
       this.listContainerContent()
     );
   }
   renderList() {
-    const e = this.base, t = e.getPopupSettings(), { textField: s, listNoDataRender: n, itemRender: i, groupHeaderItemRender: a } = this.props, d = b(this.props), o = this.value, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    return /* @__PURE__ */ c.createElement(
-      z,
+    const e = this.base, t = e.getPopupSettings(), { textField: s, listNoDataRender: o, itemRender: i, groupHeaderItemRender: a } = this.props, d = b(this.props), n = this.value, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    return /* @__PURE__ */ g.createElement(
+      L,
       {
         id: e.listBoxId,
         show: r,
         data: d.slice(),
         focusedIndex: this.focusedIndex(),
-        value: o,
+        value: n,
         textField: s,
         valueField: s,
         highlightSelected: !1,
@@ -425,7 +427,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         onClick: this.handleItemClick,
         itemRender: i,
         groupHeaderItemRender: a,
-        noDataRender: n,
+        noDataRender: o,
         onMouseDown: (l) => l.preventDefault(),
         onScroll: this.onScroll
       }
@@ -442,21 +444,21 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
   }
   suggestValue(e) {
     if (this._suggested = "", e) {
-      const { textField: t } = this.props, s = b(this.props), n = s[A(s, e, t)];
-      if (n) {
-        const i = y(n, t);
+      const { textField: t } = this.props, s = b(this.props), o = s[A(s, e, t)];
+      if (o) {
+        const i = y(o, t);
         e.toLowerCase() !== i.toLowerCase() && (this._suggested = i.substring(e.length));
       }
     }
   }
   focusedIndex(e) {
-    const { textField: t, focusedItemIndex: s, skipDisabledItems: n } = this.props, i = b(this.props), a = e !== void 0 ? e : this.value;
+    const { textField: t, focusedItemIndex: s, skipDisabledItems: o } = this.props, i = b(this.props), a = e !== void 0 ? e : this.value;
     if (this.state.focusedItem !== void 0)
-      return i.findIndex((o) => S(o, this.state.focusedItem, t));
+      return i.findIndex((n) => w(n, this.state.focusedItem, t));
     if (s)
       return s(i, a, t);
     const d = i.indexOf(M(i, a, t));
-    return n && t && d === -1 ? i.findIndex((o) => !o.disabled && o[t]) : Math.max(0, d);
+    return o && t && d === -1 ? i.findIndex((n) => !n.disabled && n[t]) : Math.max(0, d);
   }
   calculateMedia(e) {
     for (const t of e)
@@ -464,31 +466,32 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
   }
 };
 I.displayName = "AutoComplete", I.propTypes = {
-  ...C.basicPropTypes,
-  size: g.oneOf([null, "small", "medium", "large"]),
-  rounded: g.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: g.oneOf([null, "solid", "flat", "outline"]),
-  groupField: g.string,
-  suggest: g.oneOfType([g.bool, g.string]),
-  placeholder: g.string,
-  value: g.string,
-  defaultValue: g.string,
-  validationMessage: g.string,
-  required: g.bool,
-  readonly: g.bool,
-  clearButton: g.bool,
-  valueRender: g.func,
-  id: g.string,
-  ariaLabelledBy: g.string,
-  ariaDescribedBy: g.string,
-  list: g.any,
-  adaptive: g.bool,
-  adaptiveTitle: g.string,
-  onCancel: g.func,
-  skipDisabledItems: g.bool,
-  inputAttributes: g.object
+  ...S.basicPropTypes,
+  size: c.oneOf([null, "small", "medium", "large"]),
+  rounded: c.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: c.oneOf([null, "solid", "flat", "outline"]),
+  groupField: c.string,
+  suggest: c.oneOfType([c.bool, c.string]),
+  placeholder: c.string,
+  value: c.string,
+  defaultValue: c.string,
+  validationMessage: c.string,
+  required: c.bool,
+  readonly: c.bool,
+  clearButton: c.bool,
+  valueRender: c.func,
+  id: c.string,
+  ariaLabelledBy: c.string,
+  ariaDescribedBy: c.string,
+  list: c.any,
+  adaptive: c.bool,
+  adaptiveTitle: c.string,
+  adaptiveSubtitle: c.string,
+  onCancel: c.func,
+  skipDisabledItems: c.bool,
+  inputAttributes: c.object
 }, I.defaultProps = {
-  ...C.defaultProps,
+  ...S.defaultProps,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
@@ -496,16 +499,16 @@ I.displayName = "AutoComplete", I.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let k = I;
+let _ = I;
 const te = q(), se = W(
   G(
     te,
-    U(k)
+    U(_)
   )
 );
 se.displayName = "KendoReactAutoComplete";
 export {
   se as AutoComplete,
   te as AutoCompletePropsContext,
-  k as AutoCompleteWithoutContext
+  _ as AutoCompleteWithoutContext
 };