@progress/kendo-react-dropdowns 7.5.0-develop.1 → 7.5.0-develop.3

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

package/AutoComplete/AutoComplete.mjs

@@ -8,18 +8,18 @@
 "use client";
 import * as I from "react";
 import c from "prop-types";
-import E from "../common/SearchBar.mjs";
-import M from "../common/ListContainer.mjs";
-import T from "../common/List.mjs";
+import M from "../common/SearchBar.mjs";
+import T from "../common/ListContainer.mjs";
+import N from "../common/List.mjs";
 import S from "../common/DropDownBase.mjs";
-import N from "../common/GroupStickyHeader.mjs";
-import { getItemValue as b, areSame as C, getFocusedItem as F, itemIndexStartsWith as L } from "../common/utils.mjs";
-import { Keys as f, validatePackage as H, classNames as k, IconWrap as R, createPropsContext as q, withIdHOC as K, withPropsContext as z, kendoThemeMaps as G } from "@progress/kendo-react-common";
-import { FloatingLabel as $ } from "@progress/kendo-react-labels";
-import { packageMetadata as A } from "../package-metadata.mjs";
-import U from "../common/ClearButton.mjs";
+import L from "../common/GroupStickyHeader.mjs";
+import { getItemValue as b, areSame as C, getFocusedItem as F, itemIndexStartsWith as H } from "../common/utils.mjs";
+import { Keys as f, validatePackage as R, classNames as k, IconWrap as q, createPropsContext as K, withIdHOC as z, withPropsContext as G, kendoThemeMaps as $ } from "@progress/kendo-react-common";
+import { FloatingLabel as A } from "@progress/kendo-react-labels";
+import { packageMetadata as U } from "../package-metadata.mjs";
+import j from "../common/ClearButton.mjs";
 import O from "../common/withCustomComponent.mjs";
-const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y = class y extends I.Component {
+const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y = class y extends I.Component {
   constructor(a) {
     super(a), this.state = {}, this.base = new S(this), this._element = null, this._suggested = "", this._input = null, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
@@ -33,7 +33,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
       this.base.togglePopup(t);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || j
+        this.validity.valid ? "" : this.props.validationMessage || J
       );
     }, this.onScroll = (t) => {
       this._isScrolling = !0;
@@ -143,7 +143,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
         const e = this.base.initState();
         e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, this.applyInputValue(t.currentTarget.value, e);
       }
-    }, H(A);
+    }, R(U);
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
@@ -213,9 +213,9 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
    * @hidden
    */
   render() {
-    const { dir: a, disabled: t, label: e, className: s, style: n, loading: i, suggest: r, size: l, rounded: o, fillMode: d } = this.props, g = !this.validityStyles || this.validity.valid, h = this.base, m = this.value, p = this.props.clearButton !== !1 && !i && !!m, u = this.props.id || this._inputId;
+    const { dir: a, disabled: t, label: e, className: s, style: n, loading: i, suggest: r, size: l, rounded: o, fillMode: d } = this.props, g = !this.validityStyles || this.validity.valid, h = this.base, m = this.value, p = this.props.clearButton !== !1 && !i && !!m, u = this.props.id || this._inputId, v = this.state.focused;
     typeof r == "string" && (this._suggested = r);
-    const [v, x] = O(this.props.prefix || I.Fragment), [B, V] = O(this.props.suffix || I.Fragment), D = /* @__PURE__ */ I.createElement(
+    const [x, B] = O(this.props.prefix || I.Fragment), [V, E] = O(this.props.suffix || I.Fragment), D = /* @__PURE__ */ I.createElement(
       "span",
       {
         className: k(
@@ -223,9 +223,10 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
           s,
           {
             [`k-input-${P[l] || l}`]: l,
-            [`k-rounded-${J[o] || o}`]: o,
+            [`k-rounded-${Q[o] || o}`]: o,
             [`k-input-${d}`]: d,
             "k-invalid": !g,
+            "k-focus": v && !t,
             "k-loading": i,
             "k-required": this.required,
             "k-disabled": t
@@ -237,15 +238,15 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
         style: e ? { ...n, width: void 0 } : n,
         dir: a
       },
-      this.props.prefix && /* @__PURE__ */ I.createElement(v, { ...x }),
+      this.props.prefix && /* @__PURE__ */ I.createElement(x, { ...B }),
       this.renderSearchBar(m || "", u),
-      i && /* @__PURE__ */ I.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
-      p && !i && /* @__PURE__ */ I.createElement(U, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      this.props.suffix && /* @__PURE__ */ I.createElement(B, { ...V }),
+      i && /* @__PURE__ */ I.createElement(q, { className: "k-input-loading-icon", name: "loading" }),
+      p && !i && /* @__PURE__ */ I.createElement(j, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      this.props.suffix && /* @__PURE__ */ I.createElement(V, { ...E }),
       this.renderListContainer()
     );
     return e ? /* @__PURE__ */ I.createElement(
-      $,
+      A,
       {
         label: e,
         editorId: u,
@@ -284,7 +285,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
   renderSearchBar(a, t) {
     const e = this.base, { placeholder: s, tabIndex: n, disabled: i, readonly: r } = this.props, { focused: l } = this.state, o = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ I.createElement(
-      E,
+      M,
       {
         id: t,
         placeholder: s,
@@ -325,7 +326,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
     } = this.props, d = a.getPopupSettings(), g = 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 && r !== void 0 && (m = b(n[0], r)), /* @__PURE__ */ I.createElement(
-      M,
+      T,
       {
         width: h,
         popupSettings: {
@@ -352,7 +353,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
             }
           )
         },
-        !l && m && n.length !== 0 && /* @__PURE__ */ I.createElement(N, { group: m, groupMode: "modern", render: o }),
+        !l && m && n.length !== 0 && /* @__PURE__ */ I.createElement(L, { group: m, groupMode: "modern", render: o }),
         this.renderList()
       ),
       s && /* @__PURE__ */ I.createElement("div", { className: "k-list-footer" }, s)
@@ -367,7 +368,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
       groupHeaderItemRender: r
     } = this.props, l = this.value, o = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ I.createElement(
-      T,
+      N,
       {
         id: a.listBoxId,
         show: o,
@@ -400,7 +401,7 @@ const j = "Please enter a valid value!", { sizeMap: P, roundedMap: J } = G, y =
   }
   suggestValue(a) {
     if (this._suggested = "", a) {
-      const { data: t = [], textField: e } = this.props, s = t[L(t, a, e)];
+      const { data: t = [], textField: e } = this.props, s = t[H(t, a, e)];
       if (s) {
         const n = b(s, e);
         a.toLowerCase() !== n.toLowerCase() && (this._suggested = n.substring(a.length));
@@ -449,10 +450,10 @@ y.displayName = "AutoComplete", y.propTypes = {
   suffix: void 0
 };
 let w = y;
-const Q = q(), W = K(z(Q, w));
-W.displayName = "KendoReactAutoComplete";
+const W = K(), X = z(G(W, w));
+X.displayName = "KendoReactAutoComplete";
 export {
-  W as AutoComplete,
-  Q as AutoCompletePropsContext,
+  X as AutoComplete,
+  W as AutoCompletePropsContext,
   w as AutoCompleteWithoutContext
 };

package/ComboBox/ComboBox.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 X=require("react"),I=require("prop-types"),B=require("../common/DropDownBase.js"),u=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),c=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),L=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),R=require("@progress/kendo-react-buttons"),q=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),A=require("@progress/kendo-react-intl"),P=require("@progress/kendo-react-layout"),w=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(E){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(E){for(const e in E)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(E,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>E[e]})}}return s.default=E,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:O,roundedMap:re}=u.kendoThemeMaps,S=class S extends h.Component{constructor(s){super(s),this.state={},this.base=new B(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!1,this.focus=()=>{this._input&&this._input.focus()},this.checkForDuplicatePlainTextRecords=()=>{const e=this.props.textField!==void 0,t=this.props.dataItemKey!==void 0;if(this.props.data&&this.props.data.length>0&&!e&&!t){const o=this.props.data;this.duplicates=c.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{data:o=[],virtual:a,dataItemKey:n}=this.props,d=a?a.skip:0,l=o[e-d],r=this.hasDuplicates||!c.areSame(l,this.value,n);this.triggerOnChange(l,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(l,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{data:t=[],skipDisabledItems:o,textField:a}=this.props,n=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(a,t,n),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!o&&a&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!l&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,r)}this.applyState(r)},this.closeOpenedApplyStateNonMobileMode=(e,t)=>{t&&!this.mobileMode&&this.base.togglePopup(e)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=c.getItemValue(this.value,this.props.textField),o=c.isPresent(e)?e:t;return h.createElement(ie,{value:o,ref:a=>this._adaptiveFilterInput=a&&a.element,onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode})},this.handleMobileFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,t.data.text=e.target.value,this.base.filterChanged(e.target.value,t),this.applyState(t)},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:a}=this.props;let{data:n=[]}=this.props;if(!a||!n.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(n=this.base.getGroupedDataModernMode(n,a));let i=n[0][a];for(let g=1;g<n.length&&!(d*g>r);g++)n[g]&&n[g][a]&&(i=n[g][a]);i!==this.state.group&&(this.setState({group:i}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:i}))},this.handleItemClick=(e,t)=>{this.navigationIndex=e,this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleBlur=e=>{if(this.state.focused&&!this._skipBlur){const t=this.base.initState(),{textField:o,data:a=[]}=this.props,n=this.getFocusedIndex(),l=!(n===-1)&&this.getCurrentValueDisabledStatus(o,a,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&l&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const a=this.base.initState();a.syntheticEvent=e,this.base.togglePopup(a),this.base.filterChanged(o,a),this.applyState(a)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:o,textField:a,dataItemKey:n,groupField:d}=this.props,l=this.value,r=Math.max(0,t.findIndex(m=>c.areSame(m,l,n))),i=e.keyCode,g=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(i===u.Keys.up||i===u.Keys.down)){if(e.preventDefault(),d!==""&&a)if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=0;if(i===u.Keys.down||i===u.Keys.right){const f=t.slice(r+1<t.length?r+1:r).find(x=>!x.disabled&&x[a]);m=f&&t.findIndex(x=>x[a]===f[a])}else if(i===u.Keys.up||i===u.Keys.left){let f;if(r===0)f=t,m=t.findIndex(x=>!x.disabled&&x[a]);else{f=t.slice(0,r);let x=f.pop();for(;x&&x.disabled;)x=f.pop();m=x&&t.findIndex(D=>D[a]===x[a])}}if(m!==void 0){const f=m-r;this.onNavigate(p,i,f)}else m===void 0&&t.findIndex(f=>f[a]===l[a])===t.length-1&&this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=null;if(i===u.Keys.down||i===u.Keys.right)m=t.slice(r+1).find(f=>!f.disabled);else if(i===u.Keys.up||i===u.Keys.left){const f=t.slice(0,r);for(m=f.pop();m&&m.disabled;)m=f.pop()}if(m){const f=m.id-r-1;this.onNavigate(p,i,f)}else this.onNavigate(p,i)}this.applyState(p)}const v=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},y=this.getFocusedIndex(),b=y===-1,k=!b&&this.getCurrentValueDisabledStatus(a,t,y);g?i===u.Keys.pageUp?this.base.scrollPopupByPageSize(-1):i===u.Keys.pageDown?this.base.scrollPopupByPageSize(1):e.altKey&&i===u.Keys.up?v():i===u.Keys.enter?(e.preventDefault(),(a&&!b&&e.currentTarget.value?t[y][a]:void 0)?!o&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):i===u.Keys.esc&&(!o&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!g&&i===u.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===u.Keys.down&&v()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,a=e.currentTarget,n=a.value;if(this.props.suggest){const d=a.selectionEnd===n.length;let l=this.props.filter!==void 0?this.props.filter:this.state.text;c.isPresent(l)||(l=c.getItemValue(this.value,this.props.textField)||"");const r=l&&l===n,i=l&&l.length>n.length;r||i||!d?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(n,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},u.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(u.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=w.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(o=>c.areSame(o,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:o,groupField:a="",data:n=[],textField:d}=this.props,l=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const g=!i&&r,p=this.value;if(this._valueOnDidUpdate=p,o&&o.total!==l)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:n.findIndex(m=>c.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(v=this.base.getGroupedDataModernMode(n,a))==null?void 0:v.map(m=>m[d]).indexOf(p[d]));const k=!c.areSame(y,p,t);g&&o?this.base.scrollToVirtualItem(o,b):g&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][a],this),this.base.scrollToItem(b)):(this.hasDuplicates||r&&i&&p&&k)&&this.base.scrollToItem(b)}g&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=u.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body),this.checkForDuplicatePlainTextRecords()}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=A.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=A.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:o,clearButton:a=S.defaultProps.clearButton,label:n,textField:d,adaptive:l,className:r,style:i,loading:g,iconClassName:p,virtual:v,size:y,rounded:b,fillMode:k,opened:m=this.state.opened,placeholder:f,svgIcon:x}=this.props,D=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,U=c.getItemValue(this.value,d),F=c.isPresent(T)?T:U,$=a&&(!!F||c.isPresent(this.value)),M=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;M.enabled=v!==void 0,v!==void 0&&(M.skip=v.skip,M.total=v.total,M.pageSize=v.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),K=h.createElement(h.Fragment,null,h.createElement("span",{className:u.classNames("k-combobox k-input",{[`k-input-${O[y]||y}`]:y,[`k-rounded-${re[b]||b}`]:b,[`k-input-${k}`]:k,"k-invalid":!D,"k-loading":g,"k-required":this.required,"k-disabled":o},r),ref:this.componentRef,style:n?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(F||"",_,f),$&&!g&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),g&&h.createElement(u.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&h.createElement(Y,{...J}),h.createElement(R.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:p?void 0:"caret-alt-down",svgIcon:x||q.caretAltDownIcon,iconClass:p,size:y,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return n?h.createElement(Z.FloatingLabel,{label:n,editorId:_,editorValue:F,editorValid:D,editorDisabled:o,style:{width:i?i.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:o=[],virtual:a={skip:0}}=this.props,n=this.props.filter?this.props.filter:this.state.text;let d=-1,l;const r=this.base.vs,i=this.value;this._suggested="";const g=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(d=this.getFocusedIndex(g),d!==-1&&!c.isPresent(i))this.handleItemSelect(d,s);else if(n==="")this.handleItemSelect(0,s);else{const p=a.skip+d;l=this.base.navigation.navigate({keyCode:e,current:p,max:(r.enabled?r.total:o.length)-1,min:0,skipItems:t||void 0}),l!==void 0&&this.handleItemSelect(l,s)}this.navigationIndex=l}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,l=c.getItemValue(this.value,o)===s?this.index:c.getItemIndexByText(t,s,o),r=l!==-1;let i;if(this._suggested="",r)i=t[l];else if(a)i=o!==void 0?{[o]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,e),n&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,d=c.getItemValue(this.value,o);if(this._suggested="",s===d||s===""&&!c.isPresent(d))return this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e);const l=c.getItemIndexByText(t,s,o,!0),r=l!==-1;let i=null;r?i=t[l]:a&&(i=s?o?{[o]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:o=[],textField:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith}=this.props,l=n.skip,r=s===""&&l===0?0:d(o,s,a);return r!==-1?this.handleItemSelect(r+l,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,data:a=[],groupField:n,groupMode:d,list:l,virtual:r,adaptiveTitle:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened;let{group:v}=this.state;v===void 0&&n!==void 0&&(v=c.getItemValue(a[0],n));const y={navigatable:!1,navigatableElements:[],expand:p,animation:!0,onClose:b=>this.toggleBtnClick(b),animationStyles:s<=w.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=w.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};return h.createElement(P.ActionSheet,{...y},h.createElement(P.ActionSheetHeader,{className:"k-text-center"},h.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},h.createElement("div",{className:"k-actionsheet-title"},h.createElement("div",null,i)),h.createElement("div",{className:"k-actionsheet-actions"},h.createElement(R.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.toggleBtnClick,icon:"x",svgIcon:q.xIcon}))),h.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),h.createElement(P.ActionSheetContent,{className:"!k-overflow-hidden"},h.createElement("div",{className:"k-list-container"},h.createElement("div",{className:u.classNames({"k-list":!l,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":l,[`k-table-${O[o]||o}`]:l&&o})},e&&h.createElement("div",{className:"k-table-header"},e),!l&&v&&a.length!==0&&h.createElement(L,{group:v,groupMode:d,render:g}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,data:a=[],groupField:n,groupMode:d,size:l,list:r,virtual:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,v=s.getPopupSettings(),y=v.width!==void 0?v.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&n!==void 0&&(b=c.getItemValue(a[0],n)),h.createElement(te,{width:y,popupSettings:{...v,anchor:v.anchor||this.element,show:p,popupClass:u.classNames(v.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[a.length]},h.createElement("div",{className:u.classNames({"k-list":!r,[`k-list-${O[l]||l}`]:!r&&l,"k-virtual-list":i,"k-data-table":r,[`k-table-${O[l]||l}`]:r&&l})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&b&&a.length!==0&&h.createElement(L,{group:b,groupMode:d,render:g}),this.renderList(),o&&h.createElement("div",{className:u.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:a,groupHeaderItemRender:n,data:d=[],virtual:l={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),i=s.vs,g=l.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,v=`translateY(${i.translate}px)`,y=p?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,k=c.getItemValue(this.value,e),m=c.isPresent(b)&&b!==k?null:this.value,f=this.props.list||se;return h.createElement(f,{id:s.listBoxId,virtual:!!l,show:p,data:d,focusedIndex:y,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:x=>{i.list=this.base.list=x,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>w.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:u.classNames("k-list-content",{"k-list-scroller":!l}),listStyle:i.enabled?{transform:v}:void 0,key:"listkey",skip:g,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:n,noDataRender:o,onMouseDown:x=>x.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:a,data:n=[],dataItemKey:d,virtual:l={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.value,g=Math.max(0,n.findIndex(p=>c.areSame(p,i,d)));return this._suggested&&!c.areSame(this._valueOnDidUpdate,i,d)&&(this._suggested=""),h.createElement(ee,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:o,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${g+l.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",this.navigationIndex=void 0,this.base.filterChanged("",s),this.props.filter===void 0&&this.state.text!==void 0&&(s.data.text=void 0),this.triggerOnChange(null,s);const e=this.props.opened!==void 0?this.props.opened:this.state.opened,t=this.mobileMode;e&&!t&&this.base.togglePopup(s),this.applyState(s)}triggerOnChange(s,e){const t=this.value;!this.hasDuplicates&&(!c.isPresent(t)&&!c.isPresent(s)||c.areSame(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,{data:t=[],textField:o,dataItemKey:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith,skipDisabledItems:l}=this.props,r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:c.isPresent(e)&&r===void 0?t.findIndex(i=>c.areSame(i,e,a)):r?d(t,r,o):l&&o&&!r&&n.skip===0?t.findIndex(i=>!i.disabled&&i[o]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=c.suggestValue(s,e,t)}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}};S.displayName="ComboBox",S.propTypes={...B.propTypes,size:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:u.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},S.defaultProps={...B.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",allowCustom:!1,clearButton:!0,required:!1,groupMode:"modern",isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let V=S;const H=u.createPropsContext(),W=u.withIdHOC(u.withPropsContext(H,V));W.displayName="KendoReactComboBox";exports.ComboBox=W;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=V;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),I=require("prop-types"),B=require("../common/DropDownBase.js"),u=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),c=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),L=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),R=require("@progress/kendo-react-buttons"),A=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),P=require("@progress/kendo-react-layout"),w=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(E){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(E){for(const e in E)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(E,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>E[e]})}}return s.default=E,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:O,roundedMap:re}=u.kendoThemeMaps,S=class S extends h.Component{constructor(s){super(s),this.state={},this.base=new B(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!1,this.focus=()=>{this._input&&this._input.focus()},this.checkForDuplicatePlainTextRecords=()=>{const e=this.props.textField!==void 0,t=this.props.dataItemKey!==void 0;if(this.props.data&&this.props.data.length>0&&!e&&!t){const o=this.props.data;this.duplicates=c.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{data:o=[],virtual:a,dataItemKey:n}=this.props,d=a?a.skip:0,l=o[e-d],r=this.hasDuplicates||!c.areSame(l,this.value,n);this.triggerOnChange(l,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(l,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{data:t=[],skipDisabledItems:o,textField:a}=this.props,n=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(a,t,n),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!o&&a&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!l&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,r)}this.applyState(r)},this.closeOpenedApplyStateNonMobileMode=(e,t)=>{t&&!this.mobileMode&&this.base.togglePopup(e)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=c.getItemValue(this.value,this.props.textField),o=c.isPresent(e)?e:t;return h.createElement(ie,{value:o,ref:a=>this._adaptiveFilterInput=a&&a.element,onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode})},this.handleMobileFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,t.data.text=e.target.value,this.base.filterChanged(e.target.value,t),this.applyState(t)},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:a}=this.props;let{data:n=[]}=this.props;if(!a||!n.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(n=this.base.getGroupedDataModernMode(n,a));let i=n[0][a];for(let g=1;g<n.length&&!(d*g>r);g++)n[g]&&n[g][a]&&(i=n[g][a]);i!==this.state.group&&(this.setState({group:i}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:i}))},this.handleItemClick=(e,t)=>{this.navigationIndex=e,this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleBlur=e=>{if(this.state.focused&&!this._skipBlur){const t=this.base.initState(),{textField:o,data:a=[]}=this.props,n=this.getFocusedIndex(),l=!(n===-1)&&this.getCurrentValueDisabledStatus(o,a,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&l&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const a=this.base.initState();a.syntheticEvent=e,this.base.togglePopup(a),this.base.filterChanged(o,a),this.applyState(a)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:o,textField:a,dataItemKey:n,groupField:d}=this.props,l=this.value,r=Math.max(0,t.findIndex(m=>c.areSame(m,l,n))),i=e.keyCode,g=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(i===u.Keys.up||i===u.Keys.down)){if(e.preventDefault(),d!==""&&a)if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=0;if(i===u.Keys.down||i===u.Keys.right){const v=t.slice(r+1<t.length?r+1:r).find(x=>!x.disabled&&x[a]);m=v&&t.findIndex(x=>x[a]===v[a])}else if(i===u.Keys.up||i===u.Keys.left){let v;if(r===0)v=t,m=t.findIndex(x=>!x.disabled&&x[a]);else{v=t.slice(0,r);let x=v.pop();for(;x&&x.disabled;)x=v.pop();m=x&&t.findIndex(D=>D[a]===x[a])}}if(m!==void 0){const v=m-r;this.onNavigate(p,i,v)}else m===void 0&&t.findIndex(v=>v[a]===l[a])===t.length-1&&this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=null;if(i===u.Keys.down||i===u.Keys.right)m=t.slice(r+1).find(v=>!v.disabled);else if(i===u.Keys.up||i===u.Keys.left){const v=t.slice(0,r);for(m=v.pop();m&&m.disabled;)m=v.pop()}if(m){const v=m.id-r-1;this.onNavigate(p,i,v)}else this.onNavigate(p,i)}this.applyState(p)}const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},y=this.getFocusedIndex(),b=y===-1,k=!b&&this.getCurrentValueDisabledStatus(a,t,y);g?i===u.Keys.pageUp?this.base.scrollPopupByPageSize(-1):i===u.Keys.pageDown?this.base.scrollPopupByPageSize(1):e.altKey&&i===u.Keys.up?f():i===u.Keys.enter?(e.preventDefault(),(a&&!b&&e.currentTarget.value?t[y][a]:void 0)?!o&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):i===u.Keys.esc&&(!o&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!g&&i===u.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===u.Keys.down&&f()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,a=e.currentTarget,n=a.value;if(this.props.suggest){const d=a.selectionEnd===n.length;let l=this.props.filter!==void 0?this.props.filter:this.state.text;c.isPresent(l)||(l=c.getItemValue(this.value,this.props.textField)||"");const r=l&&l===n,i=l&&l.length>n.length;r||i||!d?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(n,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},u.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(u.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=w.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(o=>c.areSame(o,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var f;const{dataItemKey:t,virtual:o,groupField:a="",data:n=[],textField:d}=this.props,l=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const g=!i&&r,p=this.value;if(this._valueOnDidUpdate=p,o&&o.total!==l)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:n.findIndex(m=>c.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(f=this.base.getGroupedDataModernMode(n,a))==null?void 0:f.map(m=>m[d]).indexOf(p[d]));const k=!c.areSame(y,p,t);g&&o?this.base.scrollToVirtualItem(o,b):g&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][a],this),this.base.scrollToItem(b)):(this.hasDuplicates||r&&i&&p&&k)&&this.base.scrollToItem(b)}g&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=u.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body),this.checkForDuplicatePlainTextRecords()}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:o,clearButton:a=S.defaultProps.clearButton,label:n,textField:d,adaptive:l,className:r,style:i,loading:g,iconClassName:p,virtual:f,size:y,rounded:b,fillMode:k,opened:m=this.state.opened,placeholder:v,svgIcon:x}=this.props,D=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,U=c.getItemValue(this.value,d),F=c.isPresent(T)?T:U,$=a&&(!!F||c.isPresent(this.value)),M=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;M.enabled=f!==void 0,f!==void 0&&(M.skip=f.skip,M.total=f.total,M.pageSize=f.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),K=h.createElement(h.Fragment,null,h.createElement("span",{className:u.classNames("k-combobox k-input",{[`k-input-${O[y]||y}`]:y,[`k-rounded-${re[b]||b}`]:b,[`k-input-${k}`]:k,"k-invalid":!D,"k-loading":g,"k-required":this.required,"k-disabled":o},r),ref:this.componentRef,style:n?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(F||"",_,v),$&&!g&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),g&&h.createElement(u.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&h.createElement(Y,{...J}),h.createElement(R.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:p?void 0:"caret-alt-down",svgIcon:x||A.caretAltDownIcon,iconClass:p,size:y,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return n?h.createElement(Z.FloatingLabel,{label:n,editorId:_,editorValue:F,editorValid:D,editorDisabled:o,style:{width:i?i.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:o=[],virtual:a={skip:0}}=this.props,n=this.props.filter?this.props.filter:this.state.text;let d=-1,l;const r=this.base.vs,i=this.value;this._suggested="";const g=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(d=this.getFocusedIndex(g),d!==-1&&!c.isPresent(i))this.handleItemSelect(d,s);else if(n==="")this.handleItemSelect(0,s);else{const p=a.skip+d;l=this.base.navigation.navigate({keyCode:e,current:p,max:(r.enabled?r.total:o.length)-1,min:0,skipItems:t||void 0}),l!==void 0&&this.handleItemSelect(l,s)}this.navigationIndex=l}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,l=c.getItemValue(this.value,o)===s?this.index:c.getItemIndexByText(t,s,o),r=l!==-1;let i;if(this._suggested="",r)i=t[l];else if(a)i=o!==void 0?{[o]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,e),n&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,d=c.getItemValue(this.value,o);if(this._suggested="",s===d||s===""&&!c.isPresent(d))return this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e);const l=c.getItemIndexByText(t,s,o,!0),r=l!==-1;let i=null;r?i=t[l]:a&&(i=s?o?{[o]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:o=[],textField:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith}=this.props,l=n.skip,r=s===""&&l===0?0:d(o,s,a);return r!==-1?this.handleItemSelect(r+l,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,data:a=[],groupField:n,groupMode:d,list:l,virtual:r,adaptiveTitle:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.base.getAdaptiveAnimation();let{group:y}=this.state;y===void 0&&n!==void 0&&(y=c.getItemValue(a[0],n));const b={navigatable:!1,navigatableElements:[],expand:p,animation:f,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=w.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=w.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...b},h.createElement(P.ActionSheetHeader,null,h.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},h.createElement("div",{className:"k-actionsheet-title"},h.createElement("div",{className:"k-text-center"},i),h.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),h.createElement("div",{className:"k-actionsheet-actions"},h.createElement(R.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:A.xIcon}))),h.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),h.createElement(P.ActionSheetContent,{className:"!k-overflow-hidden"},h.createElement("div",{className:"k-list-container"},h.createElement("div",{className:u.classNames({"k-list":!l,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":l,[`k-table-${O[o]||o}`]:l&&o})},e&&h.createElement("div",{className:"k-table-header"},e),!l&&y&&a.length!==0&&h.createElement(L,{group:y,groupMode:d,render:g}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,data:a=[],groupField:n,groupMode:d,size:l,list:r,virtual:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=s.getPopupSettings(),y=f.width!==void 0?f.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&n!==void 0&&(b=c.getItemValue(a[0],n)),h.createElement(te,{width:y,popupSettings:{...f,anchor:f.anchor||this.element,show:p,popupClass:u.classNames(f.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[a.length]},h.createElement("div",{className:u.classNames({"k-list":!r,[`k-list-${O[l]||l}`]:!r&&l,"k-virtual-list":i,"k-data-table":r,[`k-table-${O[l]||l}`]:r&&l})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&b&&a.length!==0&&h.createElement(L,{group:b,groupMode:d,render:g}),this.renderList(),o&&h.createElement("div",{className:u.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:a,groupHeaderItemRender:n,data:d=[],virtual:l={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),i=s.vs,g=l.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=`translateY(${i.translate}px)`,y=p?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,k=c.getItemValue(this.value,e),m=c.isPresent(b)&&b!==k?null:this.value,v=this.props.list||se;return h.createElement(v,{id:s.listBoxId,virtual:!!l,show:p,data:d,focusedIndex:y,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:x=>{i.list=this.base.list=x,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>w.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:u.classNames("k-list-content",{"k-list-scroller":!l}),listStyle:i.enabled?{transform:f}:void 0,key:"listkey",skip:g,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:n,noDataRender:o,onMouseDown:x=>x.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:a,data:n=[],dataItemKey:d,virtual:l={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.value,g=Math.max(0,n.findIndex(p=>c.areSame(p,i,d)));return this._suggested&&!c.areSame(this._valueOnDidUpdate,i,d)&&(this._suggested=""),h.createElement(ee,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:o,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${g+l.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",this.navigationIndex=void 0,this.base.filterChanged("",s),this.props.filter===void 0&&this.state.text!==void 0&&(s.data.text=void 0),this.triggerOnChange(null,s);const e=this.props.opened!==void 0?this.props.opened:this.state.opened,t=this.mobileMode;e&&!t&&this.base.togglePopup(s),this.applyState(s)}triggerOnChange(s,e){const t=this.value;!this.hasDuplicates&&(!c.isPresent(t)&&!c.isPresent(s)||c.areSame(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,{data:t=[],textField:o,dataItemKey:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith,skipDisabledItems:l}=this.props,r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:c.isPresent(e)&&r===void 0?t.findIndex(i=>c.areSame(i,e,a)):r?d(t,r,o):l&&o&&!r&&n.skip===0?t.findIndex(i=>!i.disabled&&i[o]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=c.suggestValue(s,e,t)}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}};S.displayName="ComboBox",S.propTypes={...B.propTypes,size:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:u.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},S.defaultProps={...B.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",allowCustom:!1,clearButton:!0,required:!1,groupMode:"modern",isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let V=S;const H=u.createPropsContext(),W=u.withIdHOC(u.withPropsContext(H,V));W.displayName="KendoReactComboBox";exports.ComboBox=W;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=V;

package/ComboBox/ComboBox.mjs

@@ -9,7 +9,7 @@
 import * as h from "react";
 import f from "prop-types";
 import V from "../common/DropDownBase.mjs";
-import { Keys as x, validatePackage as se, svgIconPropType as ie, canUseDOM as L, classNames as E, IconWrap as oe, createPropsContext as ae, withIdHOC as ne, withPropsContext as le, kendoThemeMaps as re } from "@progress/kendo-react-common";
+import { Keys as I, validatePackage as se, svgIconPropType as ie, canUseDOM as L, classNames as E, IconWrap as oe, createPropsContext as ae, withIdHOC as ne, withPropsContext as le, kendoThemeMaps as re } from "@progress/kendo-react-common";
 import { FloatingLabel as de } from "@progress/kendo-react-labels";
 import { getPlainDataDuplicates as pe, areSame as S, getItemValue as C, isPresent as k, getItemIndexByText as R, suggestValue as he, itemIndexStartsWith as A } from "../common/utils.mjs";
 import ce from "../common/SearchBar.mjs";
@@ -63,7 +63,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
           ref: (o) => this._adaptiveFilterInput = o && o.element,
           onChange: this.handleMobileFilterChange,
           onKeyDown: this.onInputKeyDown,
-          size: this.props.size,
+          size: "large",
           rounded: this.props.rounded,
           fillMode: this.props.fillMode
         }
@@ -101,56 +101,56 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
       }
     }, this.onInputKeyDown = (e) => {
       const { data: t = [], skipDisabledItems: a, textField: o, dataItemKey: n, groupField: d } = this.props, l = this.value, r = Math.max(0, t.findIndex((u) => S(u, l, n))), i = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
-      if (p.syntheticEvent = e, !e.altKey && (i === x.up || i === x.down)) {
+      if (p.syntheticEvent = e, !e.altKey && (i === I.up || i === I.down)) {
         if (e.preventDefault(), d !== "" && o)
           if (!this.props.skipDisabledItems && c)
             this.onNavigate(p, i);
           else {
             let u = 0;
-            if (i === x.down || i === x.right) {
-              const m = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[o]);
-              u = m && t.findIndex((b) => b[o] === m[o]);
-            } else if (i === x.up || i === x.left) {
-              let m;
+            if (i === I.down || i === I.right) {
+              const g = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[o]);
+              u = g && t.findIndex((b) => b[o] === g[o]);
+            } else if (i === I.up || i === I.left) {
+              let g;
               if (r === 0)
-                m = t, u = t.findIndex((b) => !b.disabled && b[o]);
+                g = t, u = t.findIndex((b) => !b.disabled && b[o]);
               else {
-                m = t.slice(0, r);
-                let b = m.pop();
+                g = t.slice(0, r);
+                let b = g.pop();
                 for (; b && b.disabled; )
-                  b = m.pop();
+                  b = g.pop();
                 u = b && t.findIndex((w) => w[o] === b[o]);
               }
             }
             if (u !== void 0) {
-              const m = u - r;
-              this.onNavigate(p, i, m);
+              const g = u - r;
+              this.onNavigate(p, i, g);
             } else
-              u === void 0 && t.findIndex((m) => m[o] === l[o]) === t.length - 1 && this.onNavigate(p, i);
+              u === void 0 && t.findIndex((g) => g[o] === l[o]) === t.length - 1 && this.onNavigate(p, i);
           }
         else if (!this.props.skipDisabledItems && c)
           this.onNavigate(p, i);
         else {
           let u = null;
-          if (i === x.down || i === x.right)
-            u = t.slice(r + 1).find((m) => !m.disabled);
-          else if (i === x.up || i === x.left) {
-            const m = t.slice(0, r);
-            for (u = m.pop(); u && u.disabled; )
-              u = m.pop();
+          if (i === I.down || i === I.right)
+            u = t.slice(r + 1).find((g) => !g.disabled);
+          else if (i === I.up || i === I.left) {
+            const g = t.slice(0, r);
+            for (u = g.pop(); u && u.disabled; )
+              u = g.pop();
           }
           if (u) {
-            const m = u.id - r - 1;
-            this.onNavigate(p, i, m);
+            const g = u.id - r - 1;
+            this.onNavigate(p, i, g);
           } else
             this.onNavigate(p, i);
         }
         this.applyState(p);
       }
-      const g = () => {
+      const m = () => {
         e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
-      }, I = this.getFocusedIndex(), v = I === -1, y = !v && this.getCurrentValueDisabledStatus(o, t, I);
-      c ? i === x.pageUp ? this.base.scrollPopupByPageSize(-1) : i === x.pageDown ? this.base.scrollPopupByPageSize(1) : e.altKey && i === x.up ? g() : i === x.enter ? (e.preventDefault(), (o && !v && e.currentTarget.value ? t[I][o] : void 0) ? !a && o && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : i === x.esc && (!a && o && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && i === x.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === x.down && g();
+      }, x = this.getFocusedIndex(), v = x === -1, y = !v && this.getCurrentValueDisabledStatus(o, t, x);
+      c ? i === I.pageUp ? this.base.scrollPopupByPageSize(-1) : i === I.pageDown ? this.base.scrollPopupByPageSize(1) : e.altKey && i === I.up ? m() : i === I.enter ? (e.preventDefault(), (o && !v && e.currentTarget.value ? t[x][o] : void 0) ? !a && o && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : i === I.esc && (!a && o && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && i === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === I.down && m();
     }, this.inputOnChange = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e;
@@ -244,17 +244,17 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
   }
   /** @hidden */
   componentDidUpdate(s, e) {
-    var g;
+    var m;
     const { dataItemKey: t, virtual: a, groupField: o = "", data: n = [], textField: d } = this.props, l = s.virtual ? s.virtual.total : 0, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened;
     s.data !== n && this.checkForDuplicatePlainTextRecords();
     const c = !i && r, p = this.value;
     if (this._valueOnDidUpdate = p, a && a.total !== l)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const I = s.value !== void 0 ? s.value : e.value;
+      const x = s.value !== void 0 ? s.value : e.value;
       let v = this.hasDuplicates ? this.navigationIndex || 0 : n.findIndex((u) => S(u, p, t));
-      this.props.groupMode === "modern" && d && p && (v = (g = this.base.getGroupedDataModernMode(n, o)) == null ? void 0 : g.map((u) => u[d]).indexOf(p[d]));
-      const y = !S(I, p, t);
+      this.props.groupMode === "modern" && d && p && (v = (m = this.base.getGroupedDataModernMode(n, o)) == null ? void 0 : m.map((u) => u[d]).indexOf(p[d]));
+      const y = !S(x, p, t);
       c && a ? this.base.scrollToVirtualItem(a, v) : c && !a ? (this.onPopupOpened(), n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][o], this), this.base.scrollToItem(v)) : (this.hasDuplicates || r && i && p && y) && this.base.scrollToItem(v);
     }
     c && this._input && this._input.focus(), this.setValidity();
@@ -285,22 +285,22 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
       style: i,
       loading: c,
       iconClassName: p,
-      virtual: g,
-      size: I,
+      virtual: m,
+      size: x,
       rounded: v,
       fillMode: y,
       opened: u = this.state.opened,
-      placeholder: m,
+      placeholder: g,
       svgIcon: b
     } = this.props, w = !this.validityStyles || this.validity.valid, T = this.props.filter !== void 0 ? this.props.filter : this.state.text, Y = C(this.value, d), O = k(T) ? T : Y, J = o && (!!O || k(this.value)), M = this.base.vs, _ = this.props.id || this._inputId, N = this.mobileMode;
-    M.enabled = g !== void 0, g !== void 0 && (M.skip = g.skip, M.total = g.total, M.pageSize = g.pageSize);
+    M.enabled = m !== void 0, m !== void 0 && (M.skip = m.skip, M.total = m.total, M.pageSize = m.pageSize);
     const [Q, X] = j(this.props.prefix || h.Fragment), [Z, ee] = j(this.props.suffix || h.Fragment), P = /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
       "span",
       {
         className: E(
           "k-combobox k-input",
           {
-            [`k-input-${F[I] || I}`]: I,
+            [`k-input-${F[x] || x}`]: x,
             [`k-rounded-${Ce[v] || v}`]: v,
             [`k-input-${y}`]: y,
             "k-invalid": !w,
@@ -315,7 +315,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
         dir: t
       },
       this.props.prefix && /* @__PURE__ */ h.createElement(Q, { ...X }),
-      this.renderSearchBar(O || "", _, m),
+      this.renderSearchBar(O || "", _, g),
       J && !c && /* @__PURE__ */ h.createElement(fe, { onClick: this.clearButtonClick, key: "clearbutton" }),
       c && /* @__PURE__ */ h.createElement(oe, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
       this.props.suffix && /* @__PURE__ */ h.createElement(Z, { ...ee }),
@@ -328,7 +328,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
           icon: p ? void 0 : "caret-alt-down",
           svgIcon: b || be,
           iconClass: p,
-          size: I,
+          size: x,
           fillMode: y,
           rounded: null,
           themeColor: "base",
@@ -402,19 +402,19 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
     return r !== -1 ? this.handleItemSelect(r + l, 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: a, data: o = [], groupField: n, groupMode: d, list: l, virtual: r, adaptiveTitle: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    let { group: g } = this.state;
-    g === void 0 && n !== void 0 && (g = C(o[0], n));
-    const I = {
+    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: a, data: o = [], groupField: n, groupMode: d, list: l, virtual: r, adaptiveTitle: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = this.base.getAdaptiveAnimation();
+    let { group: x } = this.state;
+    x === void 0 && n !== void 0 && (x = C(o[0], n));
+    const v = {
       navigatable: !1,
       navigatableElements: [],
       expand: p,
-      animation: !0,
-      onClose: (v) => this.toggleBtnClick(v),
+      animation: m,
+      onClose: (y) => this.toggleBtnClick(y),
       animationStyles: s <= U ? { top: 0, width: "100%", height: "100%" } : void 0,
-      className: s <= U ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+      className: s <= U ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"
     };
-    return /* @__PURE__ */ h.createElement(Ie, { ...I }, /* @__PURE__ */ h.createElement(ye, { className: "k-text-center" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", null, i)), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
+    return /* @__PURE__ */ h.createElement(Ie, { ...v }, /* @__PURE__ */ h.createElement(ye, null, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", { className: "k-text-center" }, i), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-subtitle k-text-center" })), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
       z,
       {
         tabIndex: 0,
@@ -422,6 +422,8 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
         "aria-disabled": "false",
         type: "button",
         fillMode: "flat",
+        themeColor: "base",
+        size: "large",
         onClick: this.toggleBtnClick,
         icon: "x",
         svgIcon: xe
@@ -434,21 +436,21 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
         "k-data-table": l,
         [`k-table-${F[a] || a}`]: l && a
       }
-    ) }, e && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, e), !l && g && o.length !== 0 && /* @__PURE__ */ h.createElement(K, { group: g, groupMode: d, render: c }), this.renderList(), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t)))));
+    ) }, e && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, e), !l && x && o.length !== 0 && /* @__PURE__ */ h.createElement(K, { group: x, groupMode: d, render: c }), this.renderList(), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t)))));
   }
   renderListContainer() {
-    const s = this.base, { dir: e, header: t, footer: a, data: o = [], groupField: n, groupMode: d, size: l, list: r, virtual: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = s.getPopupSettings(), I = g.width !== void 0 ? g.width : s.popupWidth;
+    const s = this.base, { dir: e, header: t, footer: a, data: o = [], groupField: n, groupMode: d, size: l, list: r, virtual: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = s.getPopupSettings(), x = m.width !== void 0 ? m.width : s.popupWidth;
     let { group: v } = this.state;
     return v === void 0 && n !== void 0 && (v = C(o[0], n)), /* @__PURE__ */ h.createElement(
       ue,
       {
-        width: I,
+        width: x,
         popupSettings: {
-          ...g,
-          anchor: g.anchor || this.element,
+          ...m,
+          anchor: m.anchor || this.element,
           show: p,
           popupClass: E(
-            g.popupClass,
+            m.popupClass,
             "k-list-container",
             "k-combobox-popup"
           )
@@ -481,15 +483,15 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
       groupHeaderItemRender: n,
       data: d = [],
       virtual: l = { skip: 0, total: void 0 }
-    } = this.props, r = s.getPopupSettings(), i = s.vs, c = l.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${i.translate}px)`, I = p ? this.getFocusedIndex(this.hasDuplicates) : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, y = C(this.value, e), u = k(v) && v !== y ? null : this.value, m = this.props.list || ge;
+    } = this.props, r = s.getPopupSettings(), i = s.vs, c = l.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = `translateY(${i.translate}px)`, x = p ? this.getFocusedIndex(this.hasDuplicates) : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, y = C(this.value, e), u = k(v) && v !== y ? null : this.value, g = this.props.list || ge;
     return /* @__PURE__ */ h.createElement(
-      m,
+      g,
       {
         id: s.listBoxId,
         virtual: !!l,
         show: p,
         data: d,
-        focusedIndex: I,
+        focusedIndex: x,
         value: u,
         textField: e,
         valueField: t,
@@ -508,7 +510,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
             "k-list-scroller": !l
           }
         ),
-        listStyle: i.enabled ? { transform: g } : void 0,
+        listStyle: i.enabled ? { transform: m } : void 0,
         key: "listkey",
         skip: c,
         onClick: this.handleItemClick,