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

package/AutoComplete/AutoComplete.mjs

@@ -13,7 +13,7 @@ import K from "../common/List.mjs";
 import S from "../common/DropDownBase.mjs";
 import L from "../common/GroupStickyHeader.mjs";
 import { getFilteredData as b, getItemValue as y, areSame as w, isPresent as z, getFocusedItem as E, itemIndexStartsWith as H } from "../common/utils.mjs";
-import { withIdHOC as A, createPropsContext as q, withPropsContext as W, withAdaptiveModeContext as G, classNames as k, kendoThemeMaps as U, Keys as m, canUseDOM as M, subscribeToKendoPaste as $, IconWrap as j } from "@progress/kendo-react-common";
+import { withIdHOC as A, withPropsContext as q, withAdaptiveModeContext as W, createPropsContext as G, classNames as k, kendoThemeMaps as U, Keys as m, canUseDOM as M, subscribeToKendoPaste as $, IconWrap as j } from "@progress/kendo-react-common";
 import { FloatingLabel as J } from "@progress/kendo-react-labels";
 import Q from "../common/ClearButton.mjs";
 import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
@@ -513,10 +513,10 @@ I.displayName = "AutoComplete", I.propTypes = {
   suffix: void 0
 };
 let _ = I;
-const se = q(), ie = A(
-  W(
+const se = G(), ie = A(
+  q(
     se,
-    G(_)
+    W(_)
   )
 );
 ie.displayName = "KendoReactAutoComplete";

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

package/ComboBox/ComboBox.mjs

@@ -8,7 +8,7 @@
 import * as u from "react";
 import m from "prop-types";
 import _ from "../common/DropDownBase.mjs";
-import { withIdHOC as et, createPropsContext as st, withPropsContext as it, withUnstyledHOC as ot, withAdaptiveModeContext as at, classNames as S, uComboBox as F, Keys as I, validatePackage as nt, getLicenseMessage as lt, svgIconPropType as rt, canUseDOM as A, subscribeToKendoPaste as pt, IconWrap as dt, WatermarkOverlay as ht } from "@progress/kendo-react-common";
+import { withIdHOC as et, withPropsContext as st, withUnstyledHOC as it, withAdaptiveModeContext as ot, createPropsContext as at, classNames as S, uComboBox as F, Keys as I, validatePackage as nt, getLicenseMessage as lt, svgIconPropType as rt, canUseDOM as A, subscribeToKendoPaste as pt, IconWrap as dt, WatermarkOverlay as ht } from "@progress/kendo-react-common";
 import { FloatingLabel as ct } from "@progress/kendo-react-labels";
 import { getPlainDataDuplicates as ut, getItemIndexByText as P, getFilteredData as y, areSame as w, getItemValue as D, isPresent as k, itemIndexStartsWith as L, suggestValue as gt } from "../common/utils.mjs";
 import mt from "../common/SearchBar.mjs";
@@ -121,6 +121,7 @@ const Ft = "Please enter a valid value!", M = class M extends u.Component {
       const { vs: e, list: i } = this.base;
       e.scrollHandler(t);
       const { groupField: r } = this.props;
+      this.props.onListScroll && this.props.onListScroll(t);
       let n = y(this.props);
       if (!r || !n.length)
         return;
@@ -721,11 +722,11 @@ M.displayName = "ComboBox", M.propTypes = {
   suffix: void 0
 };
 let N = M;
-const kt = st(), wt = et(
-  it(
+const kt = at(), wt = et(
+  st(
     kt,
-    ot(
-      at(N)
+    it(
+      ot(N)
     )
   )
 );

package/ComboBox/ComboBoxProps.d.ts

@@ -477,6 +477,10 @@ export interface ComboBoxProps extends FormComponentProps {
     onGroupScroll?: (event: {
         group?: string;
     }) => void;
+    /**
+     * @hidden
+     */
+    onListScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
     /**
      * Sets the header component of the ComboBox ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/custom-rendering#toc-headers-and-footers)).
      *

package/DropDownList/DropDownList.mjs

@@ -7,7 +7,7 @@
  */
 import * as s from "react";
 import C from "prop-types";
-import { createPropsContext as Xt, getLicenseMessage as Zt, usePropsContext as Rt, validatePackage as en, useUnstyled as tn, useId as nn, useKendoPaste as rn, canUseDOM as nt, useAdaptiveModeContext as on, classNames as L, uDropDownList as P, getTabIndex as sn, IconWrap as an, Keys as I, WatermarkOverlay as ln, sizeMap as dn, svgIconPropType as cn } from "@progress/kendo-react-common";
+import { getLicenseMessage as Xt, usePropsContext as Zt, validatePackage as Rt, useUnstyled as en, useId as tn, useKendoPaste as nn, canUseDOM as nt, useAdaptiveModeContext as rn, classNames as L, uDropDownList as P, getTabIndex as on, IconWrap as sn, createPropsContext as an, Keys as I, WatermarkOverlay as ln, sizeMap as dn, svgIconPropType as cn } from "@progress/kendo-react-common";
 import { FloatingLabel as un } from "@progress/kendo-react-labels";
 import { caretAltDownIcon as pn } from "@progress/kendo-svg-icons";
 import mn from "../common/ListContainer.mjs";
@@ -25,7 +25,7 @@ import { ActionSheetContent as Sn } from "@progress/kendo-react-layout";
 import { AdaptiveMode as Cn } from "../common/AdaptiveMode.mjs";
 const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) => {
   let Ke = !1;
-  const mt = Zt(st), n = Rt(En, ut), {
+  const mt = Xt(st), n = Zt(En, ut), {
     delay: ft = z.delay,
     tabIndex: gt = z.tabIndex,
     ignoreCase: J = z.ignoreCase,
@@ -35,12 +35,12 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
   } = n;
   if (n.filterable || n.virtual) {
     const e = [];
-    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ke = !en(st, {
+    n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), Ke = !Rt(st, {
       component: "DropDownList",
       features: e
     });
   }
-  const K = tn(), fe = nn(n.id), ge = () => {
+  const K = en(), fe = tn(n.id), ge = () => {
     var e;
     if (nt)
       return ((e = A.current) == null ? void 0 : e.ownerDocument) || window.document;
@@ -481,7 +481,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
     },
     [n, J]
   );
-  rn(A, {
+  nn(A, {
     fieldName: _e,
     onValueChange: Bt,
     enabled: !!_e
@@ -541,7 +541,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
     valueRender: Je
   } = n, be = n.opened !== void 0 ? n.opened : m.opened, ae = k(), Pe = ne(ae, n.textField), Qe = !ht() || Ie().valid, le = t.current, $t = le.vs, ee = K && K.uDropDownList;
   $t.enabled = U !== void 0;
-  const Xe = on(), _ = !!(ke && Xe && ke <= Xe.medium && n.adaptive);
+  const Xe = rn(), _ = !!(ke && Xe && ke <= Xe.medium && n.adaptive);
   U !== void 0 && (le.vs.skip = U.skip, le.vs.total = U.total, le.vs.pageSize = U.pageSize);
   const Yt = E(n), { focused: jt } = m, Jt = Yt.findIndex((e) => F(e, ae, _t)), Ze = /* @__PURE__ */ s.createElement("span", { id: Ge, className: L(P.inputInner({ c: ee })) }, Pe && /* @__PURE__ */ s.createElement("span", { className: L(P.inputText({ c: ee })) }, Pe)), Qt = Je !== void 0 ? Je.call(void 0, Ze, ae) : Ze, Re = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
     "span",
@@ -568,7 +568,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
       } : void 0,
       onFocus: _ ? (e) => xe(e) : Tt,
       onBlur: zt,
-      tabIndex: sn(gt, se),
+      tabIndex: on(gt, se),
       accessKey: n.accessKey,
       onKeyDown: Oe,
       onKeyPress: Ot,
@@ -588,7 +588,7 @@ const kn = "Please select a value from the list!", Me = s.forwardRef((ut, pt) =>
       title: n.title
     },
     Qt,
-    Ye && /* @__PURE__ */ s.createElement(an, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
+    Ye && /* @__PURE__ */ s.createElement(sn, { className: L(P.loadingIcon({ c: ee })), name: "loading" }),
     /* @__PURE__ */ s.createElement(
       xn,
       {
@@ -649,7 +649,7 @@ const z = {
   fillMode: void 0
 };
 Me.displayName = "KendoReactDropDownList";
-const En = Xt();
+const En = an();
 Me.displayName = "KendoReactDropDownList";
 export {
   Me as DropDownList,

package/DropDownTree/DropDownTree.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { createPropsContext as at, validatePackage as rt, getLicenseMessage as it, usePropsContext as lt, useId as st, getTabIndex as ct, ZIndexContext as Se, useRtl as ut, useAdaptiveModeContext as dt, canUseDOM as pt, noop as X, Keys as c, mapTree as ft, extendDataItem as mt, classNames as re, kendoThemeMaps as vt, IconWrap as Te, WatermarkOverlay as gt } from "@progress/kendo-react-common";
+import { validatePackage as at, getLicenseMessage as rt, usePropsContext as it, useId as lt, getTabIndex as st, ZIndexContext as Se, useRtl as ct, useAdaptiveModeContext as ut, canUseDOM as dt, noop as X, Keys as c, mapTree as pt, extendDataItem as ft, classNames as re, kendoThemeMaps as mt, IconWrap as Te, WatermarkOverlay as vt, createPropsContext as gt } from "@progress/kendo-react-common";
 import { Popup as bt } from "@progress/kendo-react-popup";
 import { useLocalization as ht } from "@progress/kendo-react-intl";
 import { TreeView as Re } from "@progress/kendo-react-treeview";
@@ -22,7 +22,7 @@ import { Button as wt } from "@progress/kendo-react-buttons";
 import { xIcon as Dt, caretAltDownIcon as Ft } from "@progress/kendo-svg-icons";
 import { AdaptiveMode as It } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as St } from "@progress/kendo-react-layout";
-const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please select a value from the list!", Ot = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Ve = (E) => E.split("_").map((D) => parseInt(D, 10)), Vt = (E, D) => {
+const { sizeMap: Tt, roundedMap: Rt } = mt, Mt = 12e3, Pt = 2e3, Nt = "Please select a value from the list!", Ot = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Ve = (E) => E.split("_").map((D) => parseInt(D, 10)), Vt = (E, D) => {
   const { validationMessage: G, valid: B, required: r } = E;
   return {
     customError: G !== void 0,
@@ -44,11 +44,11 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   size: void 0,
   rounded: void 0,
   fillMode: void 0
-}, Lt = at(), Le = t.forwardRef((E, D) => {
-  const G = !rt(Me, { component: "DropDownTree" }), B = it(Me), r = lt(Lt, E), a = {
+}, Lt = gt(), Le = t.forwardRef((E, D) => {
+  const G = !at(Me, { component: "DropDownTree" }), B = rt(Me), r = it(Lt, E), a = {
     ...le,
     ...r
-  }, We = st(), se = a.id || We, {
+  }, We = lt(), se = a.id || We, {
     data: N,
     dataItemKey: O,
     popupSettings: f = {},
@@ -66,13 +66,13 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
     valid: ze,
     required: J,
     validityStyles: qe
-  } = a, Q = ct(a.tabIndex, F), i = t.useRef(null), v = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), y = t.useRef(null), U = t.useRef(!1), [ce, Ae] = t.useState(void 0), C = a.value !== void 0, g = C ? a.value : ce !== void 0 ? ce : a.defaultValue, K = yt(g), ee = K ? Et(g, a.textField) : "", te = Vt({ validationMessage: Z, valid: ze, required: J }, K), ue = t.useContext(Se), Be = ue ? ue + Pt : Mt, He = t.useCallback(() => v.current && v.current.focus(), []);
+  } = a, Q = st(a.tabIndex, F), i = t.useRef(null), v = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), $ = t.useRef(null), y = t.useRef(null), U = t.useRef(!1), [ce, Ae] = t.useState(void 0), C = a.value !== void 0, g = C ? a.value : ce !== void 0 ? ce : a.defaultValue, K = yt(g), ee = K ? Et(g, a.textField) : "", te = Vt({ validationMessage: Z, valid: ze, required: J }, K), ue = t.useContext(Se), Be = ue ? ue + Pt : Mt, He = t.useCallback(() => v.current && v.current.focus(), []);
   t.useImperativeHandle(i, () => ({
     props: a,
     element: v.current,
     focus: He
   })), t.useImperativeHandle(D, () => i.current);
-  const k = ut(v, a.dir), _e = {
+  const k = ct(v, a.dir), _e = {
     width: Ct(
       v,
       le,
@@ -80,13 +80,13 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
       V
     ),
     ...k !== void 0 ? { direction: k } : {}
-  }, [Ze, de] = t.useState(!1), l = u !== void 0 ? u : Ze, [p, ne] = t.useState(!1), [oe, $e] = t.useState(), [pe, Ue] = t.useState(""), fe = dt(), h = !!(oe && fe && oe <= fe.medium && a.adaptive), Xe = t.useCallback(() => {
+  }, [Ze, de] = t.useState(!1), l = u !== void 0 ? u : Ze, [p, ne] = t.useState(!1), [oe, $e] = t.useState(), [pe, Ue] = t.useState(""), fe = ut(), h = !!(oe && fe && oe <= fe.medium && a.adaptive), Xe = t.useCallback(() => {
     $.current && $.current.setCustomValidity && $.current.setCustomValidity(
       te.valid ? "" : Z === void 0 ? Nt : Z
     );
   }, [Z, te]);
   t.useEffect(Xe), t.useEffect(() => {
-    const e = pt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
+    const e = dt && window.ResizeObserver && new window.ResizeObserver(nt.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
       document != null && document.body && e && e.disconnect();
     };
@@ -331,10 +331,10 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
   }, nt = t.useCallback((e) => {
     for (const o of e)
       $e(o.target.clientWidth);
-  }, []), ke = t.useMemo(() => C || !K ? N : ft(
+  }, []), ke = t.useMemo(() => C || !K ? N : pt(
     N,
     W,
-    (e) => mt(e, W, { [_]: Pe(e, g, O) })
+    (e) => ft(e, W, { [_]: Pe(e, g, O) })
   ), [N, g, C, K, _, W]), xe = a.listNoData || kt, ot = a.valueHolder || Ot, ae = ht(), we = !qe || te.valid, { size: R, rounded: z, fillMode: q } = a, De = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -454,7 +454,7 @@ const { sizeMap: Tt, roundedMap: Rt } = vt, Mt = 12e3, Pt = 2e3, Nt = "Please se
           animate: !1
         }
       ) : /* @__PURE__ */ t.createElement(xe, null, ae.toLanguageString(j, ie[j])),
-      G && /* @__PURE__ */ t.createElement(gt, { message: B })
+      G && /* @__PURE__ */ t.createElement(vt, { message: B })
     ))
   ), h && tt());
   return I ? /* @__PURE__ */ t.createElement(

package/MultiColumnComboBox/MultiColumnComboBox.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 ue=require("react"),ie=require("prop-types"),de=require("../common/MultiColumnList.js"),n=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),ce=require("../common/utils.js"),K=require("../common/withCustomComponent.js");function pe(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const d=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(i,e,d.get?d:{enumerable:!0,get:()=>a[e]})}}return i.default=a,Object.freeze(i)}const t=pe(ue),me=(a,i)=>a?typeof a=="number"?a+"px":a:i,G=n.createPropsContext(),x=t.forwardRef((a,i)=>{const e=n.usePropsContext(G,a),d=t.useRef(null),c=t.useRef(null),y=n.getScrollbarWidth(),{columns:l=u.columns,popupSettings:f=u.popupSettings,size:W=u.size,rounded:z=u.rounded,fillMode:L=u.fillMode,className:_,prefix:D=void 0,suffix:$=void 0,onOpen:S,onClose:w,onFocus:F,onBlur:N,onChange:H,onFilterChange:M,onPageChange:R,...V}=e;t.useImperativeHandle(d,()=>{var o;return{element:((o=c.current)==null?void 0:o.element)||null,focus(){c.current&&c.current.focus()},get value(){var r;return(r=c.current)==null?void 0:r.value},get name(){var r;return(r=c.current)==null?void 0:r.name},props:e}}),t.useImperativeHandle(i,()=>d.current);const m=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return ce.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[h,b]=t.useState(m),[E,q]=t.useState(!0),[A]=D?K(e.prefix||t.Fragment):[],[J]=$?K(e.suffix||t.Fragment):[],Q=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:l.length},h);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{className:"k-table-header-wrap k-table-scroller"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,l.map((r,g)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:g,style:{width:r.width?r.width:u.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},l.map((r,g)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:g},r.header||" "))),h&&E&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,l,h,E]),U=t.useMemo(()=>`calc(${l.map(o=>me(o.width,u.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`,[l,y]),B=e.virtual?e.virtual.skip:0,X=t.useCallback((o,r)=>{const g=l.map((p,se)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:p.width?p.width:u.width},key:p.uniqueKey?p.uniqueKey:se},p.field?String(n.getter(p.field)(r.dataItem)):""));let I,C,k,v,O=e.data||[];const P=r.index-B;e.groupField!==void 0&&(v=n.getter(e.groupField),C=v(O[P]),k=v(O[P-1]),C&&k&&C!==k&&(I=C));const T=t.cloneElement(o,{...o.props,className:n.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!I,"k-disabled":r.dataItem.disabled})},g);return e.itemRender?e.itemRender.call(void 0,T,r):T},[l,e.groupField,e.itemRender,e.data,B]),s=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:d.current})},[]),Y=t.useCallback(o=>(e.virtual||b(m),s(S,o)),[s,S,e.virtual,m]),Z=t.useCallback(o=>s(w,o),[w]),ee=t.useCallback(o=>s(F,o),[F]),te=t.useCallback(o=>s(N,o),[N]),oe=t.useCallback(o=>s(H,o),[H]),re=t.useCallback(o=>s(R,o),[R]),ae=t.useCallback(o=>(b(m),s(M,{...o,mobileMode:o.target.mobileMode})),[M]),ne=t.useCallback(o=>{b(o.group)},[]);t.useEffect(()=>{n.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;b(m),o&&o.length!==0?q(!0):q(!1)},[e.data]);const le=t.useCallback(o=>t.createElement(de.MultiColumnList,{...o}),[]);return t.createElement(j.ComboBox,{...V,list:le,popupSettings:{...f,popupClass:n.classNames("k-dropdowngrid-popup",f.popupClass),width:f.width||U,className:f.className},ref:c,header:Q,itemRender:X,groupHeaderItemRender:e.groupHeaderItemRender,size:W,rounded:z,fillMode:L,groupField:e.groupField,isMultiColumn:!0,onOpen:Y,onClose:Z,onFocus:ee,onBlur:te,onChange:oe,onFilterChange:ae,onPageChange:re,onGroupScroll:ne,className:n.classNames("k-dropdowngrid",_),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,adaptiveSubtitle:e.adaptiveSubtitle,footer:e.footer,footerClassName:"k-table-footer",prefix:A,suffix:J})}),ge={...j.ComboBoxWithoutContext.propTypes,columns:ie.any.isRequired},u={columns:[],popupSettings:{},width:"200px",size:void 0,rounded:void 0,fillMode:void 0};x.displayName="KendoMultiColumnComboBox";x.propTypes=ge;exports.MultiColumnComboBox=x;exports.MultiColumnComboBoxPropsContext=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("react"),de=require("prop-types"),pe=require("../common/MultiColumnList.js"),n=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),me=require("../common/utils.js"),W=require("../common/withCustomComponent.js");function fe(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(i,e,c.get?c:{enumerable:!0,get:()=>a[e]})}}return i.default=a,Object.freeze(i)}const t=fe(ce),ge=(a,i)=>a?typeof a=="number"?a+"px":a:i,G=n.createPropsContext(),y=t.forwardRef((a,i)=>{const e=n.usePropsContext(G,a),c=t.useRef(null),d=t.useRef(null),S=n.getScrollbarWidth(),{columns:l=u.columns,popupSettings:g=u.popupSettings,size:L=u.size,rounded:z=u.rounded,fillMode:_=u.fillMode,className:D,prefix:$=void 0,suffix:V=void 0,onOpen:w,onClose:R,onFocus:F,onBlur:N,onChange:H,onFilterChange:M,onPageChange:E,...A}=e;t.useImperativeHandle(c,()=>{var o;return{element:((o=d.current)==null?void 0:o.element)||null,focus(){d.current&&d.current.focus()},get value(){var r;return(r=d.current)==null?void 0:r.value},get name(){var r;return(r=d.current)==null?void 0:r.name},props:e}}),t.useImperativeHandle(i,()=>c.current);const m=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return me.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[h,b]=t.useState(m),[q,B]=t.useState(!0),k=t.useRef(null),[J]=$?W(e.prefix||t.Fragment):[],[Q]=V?W(e.suffix||t.Fragment):[],U=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:l.length},h);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{ref:k,className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,l.map((r,f)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:f,style:{width:r.width?r.width:u.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},l.map((r,f)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:f},r.header||" "))),h&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,l,h,q]),X=t.useMemo(()=>`calc(${l.map(o=>ge(o.width,u.width)).filter(Boolean).join(" + ")} + ${S}px + 4px)`,[l,S]),I=e.virtual?e.virtual.skip:0,Y=t.useCallback((o,r)=>{const f=l.map((p,ie)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:p.width?p.width:u.width},key:p.uniqueKey?p.uniqueKey:ie},p.field?String(n.getter(p.field)(r.dataItem)):""));let O,C,v,x,P=e.data||[];const T=r.index-I;e.groupField!==void 0&&(x=n.getter(e.groupField),C=x(P[T]),v=x(P[T-1]),C&&v&&C!==v&&(O=C));const K=t.cloneElement(o,{...o.props,className:n.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!O,"k-disabled":r.dataItem.disabled})},f);return e.itemRender?e.itemRender.call(void 0,K,r):K},[l,e.groupField,e.itemRender,e.data,I]),s=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:c.current})},[]),Z=t.useCallback(o=>(e.virtual||b(m),s(w,o)),[s,w,e.virtual,m]),ee=t.useCallback(o=>s(R,o),[R]),te=t.useCallback(o=>s(F,o),[F]),oe=t.useCallback(o=>s(N,o),[N]),re=t.useCallback(o=>s(H,o),[H]),ae=t.useCallback(o=>s(E,o),[E]),ne=t.useCallback(o=>(b(m),s(M,{...o,mobileMode:o.target.mobileMode})),[M]),le=t.useCallback(o=>{b(o.group)},[]),se=t.useCallback(o=>{k.current&&(k.current.scrollLeft=o.target.scrollLeft)},[]);t.useEffect(()=>{n.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;b(m),o&&o.length!==0?B(!0):B(!1)},[e.data]);const ue=t.useCallback(o=>t.createElement(pe.MultiColumnList,{...o}),[]);return t.createElement(j.ComboBox,{...A,list:ue,popupSettings:{...g,popupClass:n.classNames("k-dropdowngrid-popup",g.popupClass),width:g.width||X,className:g.className},ref:d,header:U,itemRender:Y,groupHeaderItemRender:e.groupHeaderItemRender,size:L,rounded:z,fillMode:_,groupField:e.groupField,isMultiColumn:!0,onOpen:Z,onClose:ee,onFocus:te,onBlur:oe,onChange:re,onFilterChange:ne,onPageChange:ae,onGroupScroll:le,onListScroll:se,className:n.classNames("k-dropdowngrid",D),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,adaptiveSubtitle:e.adaptiveSubtitle,footer:e.footer,footerClassName:"k-table-footer",prefix:J,suffix:Q})}),be={...j.ComboBoxWithoutContext.propTypes,columns:de.any.isRequired},u={columns:[],popupSettings:{},width:"200px",size:void 0,rounded:void 0,fillMode:void 0};y.displayName="KendoMultiColumnComboBox";y.propTypes=be;exports.MultiColumnComboBox=y;exports.MultiColumnComboBoxPropsContext=G;