@progress/kendo-react-dropdowns 11.2.0-develop.2 → 11.2.0-develop.3

package/ComboBox/ComboBox.js

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

package/ComboBox/ComboBox.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as g from "react";
+import * as c from "react";
 import m from "prop-types";
 import _ from "../common/DropDownBase.mjs";
 import { classNames as S, uComboBox as k, Keys as y, validatePackage as tt, svgIconPropType as et, canUseDOM as R, IconWrap as st, WatermarkOverlay as it, createPropsContext as ot, withIdHOC as at, withPropsContext as nt, withUnstyledHOC as lt, withAdaptiveModeContext as rt } from "@progress/kendo-react-common";
@@ -25,7 +25,7 @@ import { provideLocalizationService as G } from "@progress/kendo-react-intl";
 import { ActionSheetContent as It } from "@progress/kendo-react-layout";
 import U from "../common/withCustomComponent.mjs";
 import { AdaptiveMode as yt } from "../common/AdaptiveMode.mjs";
-const Ct = "Please enter a valid value!", M = class M extends g.Component {
+const Ct = "Please enter a valid value!", M = class M extends c.Component {
   constructor(s) {
     super(s), this.state = {}, this.base = new _(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this._skipFocus = !1, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
@@ -58,7 +58,7 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       e && !this.mobileMode && this.base.togglePopup(t);
     }, this.renderMobileListFilter = () => {
       const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = D(this.value, this.props.textField), i = w(t) ? t : e;
-      return /* @__PURE__ */ g.createElement(
+      return /* @__PURE__ */ c.createElement(
         mt,
         {
           value: i,
@@ -74,9 +74,9 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         }
       );
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, size: i, groupStickyHeaderItemRender: r, groupField: l, list: a, groupMode: p, unstyled: n, virtual: o } = this.props, h = C(this.props), d = n && n.uComboBox;
+      const { header: t, footer: e, size: i, groupStickyHeaderItemRender: r, groupField: l, list: a, groupMode: p, unstyled: n, virtual: o } = this.props, u = C(this.props), d = n && n.uComboBox;
       let { group: v } = this.state;
-      return v === void 0 && l !== void 0 && (v = D(h[0], l)), /* @__PURE__ */ g.createElement(
+      return v === void 0 && l !== void 0 && (v = D(u[0], l)), /* @__PURE__ */ c.createElement(
         "div",
         {
           className: S(
@@ -89,10 +89,10 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
             })
           )
         },
-        t && /* @__PURE__ */ g.createElement("div", { className: S(k.listHeader({ c: d })) }, t),
-        !a && v && h.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: v, groupMode: p, render: r }),
+        t && /* @__PURE__ */ c.createElement("div", { className: S(k.listHeader({ c: d })) }, t),
+        !a && v && u.length !== 0 && /* @__PURE__ */ c.createElement(K, { group: v, groupMode: p, render: r }),
         this.renderList(),
-        e && /* @__PURE__ */ g.createElement(
+        e && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: S(k.listFooter({ c: d }), this.props.footerClassName)
@@ -113,8 +113,8 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       const a = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : i ? i.children[0].offsetHeight : 0), n = t.target.scrollTop - e.skip * a;
       this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, r));
       let o = l[0][r];
-      for (let h = 1; h < l.length && !(a * h > n); h++)
-        l[h] && l[h][r] && (o = l[h][r]);
+      for (let u = 1; u < l.length && !(a * u > n); u++)
+        l[u] && l[u][r] && (o = l[u][r]);
       o !== this.state.group && (this.setState({
         group: o
       }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
@@ -134,48 +134,48 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
     }, this.onInputKeyDown = (t) => {
       const { skipDisabledItems: e, textField: i, dataItemKey: r, groupField: l } = this.props, a = C(this.props), p = this.value, n = Math.max(
         0,
-        a.findIndex((u) => F(u, p, r))
-      ), o = t.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
+        a.findIndex((h) => F(h, p, r))
+      ), o = t.keyCode, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = this.base.initState();
       if (d.syntheticEvent = t, !t.altKey && (o === y.up || o === y.down)) {
         if (t.preventDefault(), l !== "" && i)
-          if (!this.props.skipDisabledItems && h)
+          if (!this.props.skipDisabledItems && u)
             this.onNavigate(d, o);
           else {
-            let u = 0;
+            let h = 0;
             if (o === y.down || o === y.right) {
-              const c = a.slice(n + 1 < a.length ? n + 1 : n).find((f) => !f.disabled && f[i]);
-              u = c && a.findIndex((f) => f[i] === c[i]);
+              const g = a.slice(n + 1 < a.length ? n + 1 : n).find((f) => !f.disabled && f[i]);
+              h = g && a.findIndex((f) => f[i] === g[i]);
             } else if (o === y.up || o === y.left) {
-              let c;
+              let g;
               if (n === 0)
-                c = a, u = a.findIndex((f) => !f.disabled && f[i]);
+                g = a, h = a.findIndex((f) => !f.disabled && f[i]);
               else {
-                c = a.slice(0, n);
-                let f = c.pop();
+                g = a.slice(0, n);
+                let f = g.pop();
                 for (; f && f.disabled; )
-                  f = c.pop();
-                u = f && a.findIndex((E) => E[i] === f[i]);
+                  f = g.pop();
+                h = f && a.findIndex((E) => E[i] === f[i]);
               }
             }
-            if (u !== void 0) {
-              const c = u - n;
-              this.onNavigate(d, o, c);
-            } else u === void 0 && a.findIndex((c) => c[i] === p[i]) === a.length - 1 && this.onNavigate(d, o);
+            if (h !== void 0) {
+              const g = h - n;
+              this.onNavigate(d, o, g);
+            } else h === void 0 && a.findIndex((g) => g[i] === p[i]) === a.length - 1 && this.onNavigate(d, o);
           }
-        else if (!this.props.skipDisabledItems && h)
+        else if (!this.props.skipDisabledItems && u)
           this.onNavigate(d, o);
         else {
-          let u = null;
+          let h = null;
           if (o === y.down || o === y.right)
-            u = a.slice(n + 1).find((c) => !c.disabled);
+            h = a.slice(n + 1).find((g) => !g.disabled);
           else if (o === y.up || o === y.left) {
-            const c = a.slice(0, n);
-            for (u = c.pop(); u && u.disabled; )
-              u = c.pop();
+            const g = a.slice(0, n);
+            for (h = g.pop(); h && h.disabled; )
+              h = g.pop();
           }
-          if (u) {
-            const c = u.id - n - 1;
-            this.onNavigate(d, o, c);
+          if (h) {
+            const g = h.id - n - 1;
+            this.onNavigate(d, o, g);
           } else
             this.onNavigate(d, o);
         }
@@ -183,8 +183,8 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       }
       const v = () => {
         t.preventDefault(), this.base.togglePopup(d), this.applyState(d);
-      }, x = this.getFocusedIndex(), I = x === -1, b = !I && this.getCurrentValueDisabledStatus(i, a, x);
-      h ? o === y.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === y.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && o === y.up ? v() : o === y.enter ? (t.preventDefault(), (i && !I && t.currentTarget.value ? a[x][i] : void 0) ? !e && i && b ? this.clearValueOnEnterOrEsc(t) : b || this.applyValueOnEnter(t.currentTarget.value, d) : this.applyValueOnEnter(t.currentTarget.value, d)) : o === y.esc && (!e && i && b && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, d)) : !h && o === y.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && o === y.down && v();
+      }, b = this.getFocusedIndex(), x = b === -1, I = !x && this.getCurrentValueDisabledStatus(i, a, b);
+      u ? o === y.pageUp ? (t.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === y.pageDown ? (t.preventDefault(), this.base.scrollPopupByPageSize(1)) : t.altKey && o === y.up ? v() : o === y.enter ? (t.preventDefault(), (i && !x && t.currentTarget.value ? a[b][i] : void 0) ? !e && i && I ? this.clearValueOnEnterOrEsc(t) : I || this.applyValueOnEnter(t.currentTarget.value, d) : this.applyValueOnEnter(t.currentTarget.value, d)) : o === y.esc && (!e && i && I && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, d)) : !u && o === y.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && o === y.down && v();
     }, this.inputOnChange = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t;
@@ -289,17 +289,17 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
     var v;
     const { dataItemKey: e, virtual: i, groupField: r = "", textField: l } = this.props, a = C(this.props), p = s.virtual ? s.virtual.total : 0, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : t.opened;
     s.data !== a && this.checkForDuplicatePlainTextRecords();
-    const h = !o && n, d = this.value;
+    const u = !o && n, d = this.value;
     if (this._valueOnDidUpdate = d, this.base.didUpdate(), i && i.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const x = s.value !== void 0 ? s.value : t.value;
-      let I = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((u) => F(u, d, e));
-      this.props.groupMode === "modern" && l && d && (I = (v = this.base.getGroupedDataModernMode(a, r)) == null ? void 0 : v.map((u) => u[l]).indexOf(d[l]));
-      const b = !F(x, d, e);
-      h && i ? this.base.scrollToVirtualItem(i, I) : h && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][r], this), this.base.scrollToItem(I)) : (this.hasDuplicates || n && o && d && b) && this.base.scrollToItem(I);
+      const b = s.value !== void 0 ? s.value : t.value;
+      let x = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => F(h, d, e));
+      this.props.groupMode === "modern" && l && d && (x = (v = this.base.getGroupedDataModernMode(a, r)) == null ? void 0 : v.map((h) => h[l]).indexOf(d[l]));
+      const I = !F(b, d, e);
+      u && i ? this.base.scrollToVirtualItem(i, x) : u && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][r], this), this.base.scrollToItem(x)) : (this.hasDuplicates || n && o && d && I) && this.base.scrollToItem(x);
     }
-    h && this._input && this._input.focus(), this.setValidity();
+    u && this._input && this._input.focus(), this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
@@ -328,26 +328,26 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       className: p,
       style: n,
       loading: o,
-      iconClassName: h,
+      iconClassName: u,
       virtual: d,
       size: v,
-      rounded: x,
-      fillMode: I,
-      opened: b = this.state.opened,
-      placeholder: u,
-      svgIcon: c,
+      rounded: b,
+      fillMode: x,
+      opened: I = this.state.opened,
+      placeholder: h,
+      svgIcon: g,
       unstyled: f
     } = this.props, E = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, j = D(this.value, a), V = w(O) ? O : j, $ = r && (!!V || w(this.value)), B = this.base.vs, L = this.props.id || this._inputId, T = f && f.uComboBox;
     B.enabled = d !== void 0, d !== void 0 && (B.skip = d.skip, B.total = d.total, B.pageSize = d.pageSize);
-    const [Y, J] = U(this.props.prefix || g.Fragment), [Q, X] = U(this.props.suffix || g.Fragment), N = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
+    const [Y, J] = U(this.props.prefix || c.Fragment), [Q, X] = U(this.props.suffix || c.Fragment), N = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
         className: S(
           k.wrapper({
             c: T,
             size: v,
-            rounded: x,
-            fillMode: I,
+            rounded: b,
+            fillMode: x,
             disabled: i,
             invalid: !E,
             loading: o,
@@ -360,10 +360,10 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         dir: e,
         onFocus: this.handleFocus
       },
-      this.props.prefix && /* @__PURE__ */ g.createElement(Y, { ...J }),
-      this.renderSearchBar(V || "", L, u),
-      $ && !o && /* @__PURE__ */ g.createElement(ft, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      o && /* @__PURE__ */ g.createElement(
+      this.props.prefix && /* @__PURE__ */ c.createElement(Y, { ...J }),
+      this.renderSearchBar(V || "", L, h),
+      $ && !o && /* @__PURE__ */ c.createElement(ft, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      o && /* @__PURE__ */ c.createElement(
         st,
         {
           className: S(k.loadingIcon({ c: T })),
@@ -371,18 +371,18 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
           key: "loading"
         }
       ),
-      this.props.suffix && /* @__PURE__ */ g.createElement(Q, { ...X }),
-      /* @__PURE__ */ g.createElement(
+      this.props.suffix && /* @__PURE__ */ c.createElement(Q, { ...X }),
+      /* @__PURE__ */ c.createElement(
         bt,
         {
           tabIndex: -1,
           type: "button",
-          "aria-label": b ? t : s,
-          icon: h ? void 0 : "caret-alt-down",
-          svgIcon: c || xt,
-          iconClass: h,
+          "aria-label": I ? t : s,
+          icon: u ? void 0 : "caret-alt-down",
+          svgIcon: g || xt,
+          iconClass: u,
           size: v,
-          fillMode: I,
+          fillMode: x,
           rounded: null,
           themeColor: "base",
           className: S(k.inputButton({ c: T })),
@@ -392,7 +392,7 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       ),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
-    return l ? /* @__PURE__ */ g.createElement(
+    return l ? /* @__PURE__ */ c.createElement(
       pt,
       {
         label: l,
@@ -412,8 +412,8 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
     let a = -1, p;
     const n = this.base.vs, o = this.value;
     this._suggested = "";
-    const h = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
-    if (a = this.getFocusedIndex(h), a !== -1 && !w(o))
+    const u = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
+    if (a = this.getFocusedIndex(u), a !== -1 && !w(o))
       this.handleItemSelect(a, s);
     else if (l === "")
       this.handleItemSelect(0, s);
@@ -467,7 +467,7 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       windowWidth: s,
       mobileFilter: this.renderMobileListFilter()
     };
-    return /* @__PURE__ */ g.createElement(yt, { ...p }, /* @__PURE__ */ g.createElement(It, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+    return /* @__PURE__ */ c.createElement(yt, { ...p }, /* @__PURE__ */ c.createElement(It, null, /* @__PURE__ */ c.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
   }
   renderListContainer() {
     const s = this.base, {
@@ -480,21 +480,21 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       list: p,
       virtual: n,
       groupStickyHeaderItemRender: o,
-      unstyled: h
-    } = this.props, d = C(this.props), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), I = x.width !== void 0 ? x.width : s.popupWidth, b = h && h.uComboBox;
-    let { group: u } = this.state;
-    return u === void 0 && r !== void 0 && (u = D(d[0], r)), /* @__PURE__ */ g.createElement(
+      unstyled: u
+    } = this.props, d = C(this.props), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = s.getPopupSettings(), x = b.width !== void 0 ? b.width : s.popupWidth, I = u && u.uComboBox;
+    let { group: h } = this.state;
+    return h === void 0 && r !== void 0 && (h = D(d[0], r)), /* @__PURE__ */ c.createElement(
       ct,
       {
-        width: I,
+        width: x,
         popupSettings: {
-          ...x,
-          anchor: x.anchor || this.element,
+          ...b,
+          anchor: b.anchor || this.element,
           show: v,
           popupClass: S(
-            x.popupClass,
+            b.popupClass,
             k.listContainer({
-              c: b,
+              c: I,
               popup: !0
             })
           )
@@ -502,12 +502,12 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [d.length]
       },
-      /* @__PURE__ */ g.createElement(
+      /* @__PURE__ */ c.createElement(
         "div",
         {
           className: S(
             k.list({
-              c: b,
+              c: I,
               list: p,
               size: a,
               tableSize: a,
@@ -515,21 +515,21 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
             })
           )
         },
-        e && /* @__PURE__ */ g.createElement("div", { className: S(k.listHeader({ c: b })) }, e),
-        !p && u && d.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: u, groupMode: l, render: o }),
+        e && /* @__PURE__ */ c.createElement("div", { className: S(k.listHeader({ c: I })) }, e),
+        !p && h && d.length !== 0 && /* @__PURE__ */ c.createElement(K, { group: h, groupMode: l, render: o }),
         this.renderList(),
-        i && /* @__PURE__ */ g.createElement(
+        i && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: S(
-              k.listFooter({ c: b }),
+              k.listFooter({ c: I }),
               this.props.footerClassName
             )
           },
           i
         )
       ),
-      this.showLicenseWatermark && /* @__PURE__ */ g.createElement(it, null)
+      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(it, null)
     );
   }
   renderList() {
@@ -541,16 +541,16 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       groupHeaderItemRender: l,
       virtual: a = { skip: 0, total: void 0 },
       unstyled: p
-    } = this.props, n = C(this.props), o = s.getPopupSettings(), h = s.vs, d = a.skip, v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${h.translate}px)`, I = v ? this.getFocusedIndex(this.hasDuplicates) : void 0, b = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = D(this.value, t), c = w(b) && b !== u ? null : this.value, f = this.props.list || gt, E = p && p.uComboBox;
-    return /* @__PURE__ */ g.createElement(
+    } = this.props, n = C(this.props), o = s.getPopupSettings(), u = s.vs, d = a.skip, v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = `translateY(${u.translate}px)`, x = v ? this.getFocusedIndex(this.hasDuplicates) : void 0, I = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = D(this.value, t), g = w(I) && I !== h ? null : this.value, f = this.props.list || gt, E = p && p.uComboBox;
+    return /* @__PURE__ */ c.createElement(
       f,
       {
         id: s.listBoxId,
         virtual: !!a,
         show: v,
         data: n,
-        focusedIndex: I,
-        value: c,
+        focusedIndex: x,
+        value: g,
         textField: t,
         valueField: e,
         groupField: this.props.groupField,
@@ -559,7 +559,7 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
         listRef: (O) => {
-          h.list = this.base.list = O, this.itemHeight = 0;
+          u.list = this.base.list = O, this.itemHeight = 0;
         },
         wrapperStyle: this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth > this.props._adaptiveMode.medium ? { maxHeight: o.height } : {},
         wrapperCssClass: S(
@@ -568,7 +568,7 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
             virtual: a
           })
         ),
-        listStyle: h.enabled ? { transform: x } : void 0,
+        listStyle: u.enabled ? { transform: b } : void 0,
         key: "listkey",
         skip: d,
         onClick: this.handleItemClick,
@@ -577,7 +577,7 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         noDataRender: i,
         onMouseDown: (O) => O.preventDefault(),
         onScroll: this.onScroll,
-        wrapperRef: h.scrollerRef,
+        wrapperRef: u.scrollerRef,
         scroller: this.base.renderScrollElement(),
         ariaSetSize: a.total
       }
@@ -592,25 +592,24 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
       ariaDescribedBy: p,
       dataItemKey: n,
       virtual: o = { skip: 0 },
-      accessKey: h,
-      unstyled: d,
-      inputAttributes: v
-    } = this.props, x = C(this.props), I = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = this.value, u = Math.max(
+      unstyled: u,
+      inputAttributes: d
+    } = this.props, v = C(this.props), b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.value, I = Math.max(
       0,
-      x.findIndex((c) => F(c, b, n))
+      v.findIndex((h) => F(h, x, n))
     );
-    return this._suggested && !F(this._valueOnDidUpdate, b, n) && (this._suggested = ""), /* @__PURE__ */ g.createElement(
+    return this._suggested && !F(this._valueOnDidUpdate, x, n) && (this._suggested = ""), /* @__PURE__ */ c.createElement(
       ut,
       {
         id: t,
-        readOnly: I && this.mobileMode,
+        readOnly: b && this.mobileMode,
         placeholder: e,
         tabIndex: i,
         title: l,
         value: s + this._suggested,
         suggestedText: this._suggested,
-        ref: (c) => {
-          this._input = c && c.input;
+        ref: (h) => {
+          this._input = h && h.input;
         },
         onClick: this.onInputClick,
         onKeyDown: this.onInputKeyDown,
@@ -618,9 +617,9 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
         disabled: r,
-        expanded: I,
+        expanded: b,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${u + o.skip}`,
+        activedescendant: `option-${this.base.guid}-${I + o.skip}`,
         role: "combobox",
         ariaLabelledBy: a,
         ariaLabel: this.props.ariaLabel,
@@ -628,8 +627,8 @@ const Ct = "Please enter a valid value!", M = class M extends g.Component {
         ariaRequired: this.required,
         render: this.props.valueRender,
         ariaControls: this.base.listBoxId,
-        unstyled: d,
-        inputAttributes: v
+        unstyled: u,
+        inputAttributes: d
       }
     );
   }