@progress/kendo-react-dropdowns 8.3.0-develop.8 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/AutoComplete/AutoComplete.js +1 -1
  2. package/AutoComplete/AutoComplete.mjs +58 -79
  3. package/ComboBox/ComboBox.js +1 -1
  4. package/ComboBox/ComboBox.mjs +369 -300
  5. package/DropDownList/DropDownList.js +1 -1
  6. package/DropDownList/DropDownList.mjs +99 -95
  7. package/DropDownTree/DropDownTree.mjs +62 -84
  8. package/MultiSelect/MultiSelect.mjs +34 -24
  9. package/MultiSelectTree/MultiSelectTree.js +1 -1
  10. package/MultiSelectTree/MultiSelectTree.mjs +428 -434
  11. package/common/DropDownBase.mjs +11 -12
  12. package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
  13. package/index.d.mts +8 -7
  14. package/index.d.ts +8 -7
  15. package/package-metadata.mjs +1 -1
  16. package/package.json +9 -9
package/DropDownList/DropDownList.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),x=require("prop-types"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-react-labels"),V=require("@progress/kendo-svg-icons"),X=require("../common/ListContainer.js"),Z=require("../common/ListFilter.js"),B=require("../common/GroupStickyHeader.js"),ee=require("../common/ListDefaultItem.js"),te=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),se=require("../package-metadata.js"),H=require("@progress/kendo-react-buttons"),ie=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),M=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ae(_){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return i.default=_,Object.freeze(i)}const g=ae(J),oe="Please select a value from the list!",k=class k extends g.Component{constructor(i){super(i),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:n,dataItemKey:u,defaultItem:r}=this.props,d=c.getFilteredData(this.props),I=n?n.skip:0,p=e===-1&&r!==void 0?r:d[e-I],a=!c.areSame(p,this.value,u);this.triggerOnChange(p,t),a&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>g.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},g.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:n,size:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),m=this.base,o=m.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=o.width!==void 0?o.width:m.popupWidth,h=p&&p.uDropDownList,l={dir:n!==void 0?n:m.dirCalculated,width:b,popupSettings:{...o,popupClass:s.classNames(o.popupClass,s.uDropDownList.listContainer({c:h})),anchor:o.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[a.length]};let{group:S}=this.state;return S===void 0&&r!==void 0&&(S=c.getItemValue(a[0],r)),g.createElement(X,{...l},this.renderListFilter(),e&&g.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:h}))},e),g.createElement("div",{className:s.classNames(s.uDropDownList.list({c:h,size:u,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&S&&a.length!==0&&g.createElement(B,{group:S,groupMode:"modern",render:d}),this.renderList()),t&&g.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:h}))},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:n={skip:0,total:void 0},groupHeaderItemRender:u,listNoDataRender:r,itemRender:d,unstyled:I}=this.props,p=c.getFilteredData(this.props),a=I&&I.uDropDownList,m=this.base.vs,o=n.skip,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.base.getPopupSettings(),h=`translateY(${m.translate}px)`;return g.createElement(te,{id:this._listboxId,show:v,data:p.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>m.list=this.base.list=l,wrapperStyle:{maxHeight:b.height},wrapperCssClass:s.classNames(s.uDropDownList.listContent({c:a})),listStyle:m.enabled?{transform:h}:void 0,key:"listkey",skip:o,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:u,noDataRender:r,onScroll:this.onScroll,wrapperRef:m.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:n.total})},this.onScroll=e=>{const{vs:t,list:n}=this.base;t.scrollHandler(e);const{groupField:u}=this.props;let r=c.getFilteredData(this.props);if(!(!u||!r.length)&&u){const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:n?n.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*d;r=this.base.getGroupedDataModernMode(r,u);let a=r[0][u];for(let m=1;m<r.length&&!(d*m>p);m++)r[m]&&r[m][u]&&(a=r[m][u]);a!==this.state.group&&this.setState({group:a})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&g.createElement(Z,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:n}=this.props;return t!==void 0&&g.createElement(ee,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,n),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,n=c.getFilteredData(this.props);let u=n.map((C,L)=>({item:C,itemIndex:L}));const r=this.searchState.word,d=this.searchState.last,I=c.sameCharsOnly(r,d);let p=u.length,a=Math.max(0,n.findIndex(C=>c.areSame(C,this.value,t))),m;this.props.defaultItem&&(m={item:this.props.defaultItem,itemIndex:-1},p+=1,a+=1),a+=I?1:0,u=c.shuffleData(u,a,m);let o,v,b,h=0;const{textField:l,ignoreCase:S}=this.props;for(;h<p;h++)if(o=c.getItemValue(u[h].item,l),v=I&&c.matchText(o,d,S),b=c.matchText(o,r,S),v||b){h=u[h].itemIndex;break}if(h!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(h,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:n,defaultItem:u,leftRightKeysNavigation:r=!0,virtual:d={skip:0,total:0,pageSize:0},dataItemKey:I,groupField:p="",textField:a,skipDisabledItems:m=!0}=this.props,o=c.getFilteredData(this.props),v=this.value,b=o.findIndex(D=>c.areSame(D,v,I)),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.keyCode,S=l===s.Keys.home||l===s.Keys.end,C=l===s.Keys.up||l===s.Keys.down,L=!h&&(e.altKey&&l===s.Keys.down||l===s.Keys.enter||l===s.Keys.space),E=h&&(e.altKey&&l===s.Keys.up||l===s.Keys.esc),P=r&&(l===s.Keys.left||l===s.Keys.right),N=C||P&&!t||S,w=this.base.initState();if(w.syntheticEvent=e,!n){if(S&&this.base.vs.enabled)l===s.Keys.home?d.skip!==0?(this.base.triggerOnPageChange(w,0,d.pageSize),this._navigated=!0):this.triggerOnChange(o[0],w):d.skip<d.total-d.pageSize?(this.base.triggerOnPageChange(w,d.total-d.pageSize,d.pageSize),this._navigated=!0):this.triggerOnChange(o[o.length-1],w);else if(h&&l===s.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(h&&l===s.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(h&&l===s.Keys.enter){const D=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(o,D)?(this.triggerOnChange(null,w),this.applyState(w)):this.handleItemSelect(D,w),this.base.togglePopup(w),e.preventDefault()}else if(L||E)E&&this.resetValueIfDisabledItem(),this.base.togglePopup(w),e.preventDefault();else if(N){if(this._lastKeypressIsFilter=!1,p!==""&&a)if(!m&&h)this.onNavigate(w,l);else{let D;if(l===s.Keys.down||l===s.Keys.right){const y=o.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&o.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=o,D=o.findIndex(f=>!f.disabled&&f[a]);else{y=o.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&o.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&o.findIndex(y=>y[a]===v[a])===o.length-1&&this.onNavigate(w,l)}else if(!m&&h||S)this.onNavigate(w,l);else if(a){let D;if(l===s.Keys.down||l===s.Keys.right){const y=o.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&o.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=o,D=o.find(f=>!f.disabled&&f[a]);else{y=o.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&o.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&o.findIndex(y=>y[a]===v[a])===o.length-1&&this.onNavigate(w,l)}else this.onNavigate(w,l);e.preventDefault()}this.applyState(w)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:n}=this.props,{windowWidth:u=0}=this.state,r=u<=M.MOBILE_MEDIUM_DEVISE&&n,d=this.base.initState();d.syntheticEvent=e,d.data.focused=!1,d.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!r&&this.base.togglePopup(d),this.applyState(d)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===s.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},s.validatePackage(se.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let i;return this._valueDuringOnChange!==void 0?i=this._valueDuringOnChange:this.props.value!==void 0?i=this.props.value:this.state.value!==void 0?i=this.state.value:this.props.defaultValue!==void 0&&(i=this.props.defaultValue),!c.isPresent(i)&&this.props.defaultItem!==void 0&&(i=this.props.defaultItem),i}get index(){const{dataItemKey:i}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(n=>c.areSame(n,t,i))}get name(){return this.props.name}get validity(){const i=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:i,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:k.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:k.defaultProps.required}componentDidUpdate(i,e){var o;const{dataItemKey:t,virtual:n,groupField:u="",textField:r}=this.props,d=c.getFilteredData(this.props),I=i.virtual?i.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,a=i.opened!==void 0?i.opened:e.opened,m=!a&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||m&&this.onPopupOpened(),n&&n.total!==I)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const v=this.value,b=i.value!==void 0?i.value:e.value;let h=d.findIndex(S=>c.areSame(S,v,t));u!==""&&v&&r&&(h=(o=this.base.getGroupedDataModernMode(d,u))==null?void 0:o.map(S=>S[r]).indexOf(v[r]));const l=!c.areSame(b,v,t);m&&n?this.base.scrollToVirtualItem(n,h):m&&!n?(this.onPopupOpened(),d&&d.length!==0&&this.base.resetGroupStickyHeader(d[0][u],this),this.base.scrollToItem(h)):p&&a&&v&&l&&!this._navigated?this.base.scrollToItem(h,this.base.vs.enabled):p&&a&&this._navigated&&(this._navigated&&n&&n.skip===0?this.base.vs.reset():this._navigated&&n&&n.skip===n.total-n.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const i=ie.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:n,dir:u,virtual:r,size:d,rounded:I,fillMode:p,adaptive:a,unstyled:m}=this.props,{windowWidth:o=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,h=c.getItemValue(b,this.props.textField),l=!this.validityStyles||this.validity.valid,S=this.base,C=S.vs,L=o<=M.MOBILE_MEDIUM_DEVISE&&a,E=m&&m.uDropDownList;C.enabled=r!==void 0,r!==void 0&&(S.vs.skip=r.skip,S.vs.total=r.total,S.vs.pageSize=r.pageSize);const{dataItemKey:P,disabled:N,tabIndex:w,loading:D,iconClassName:y,svgIcon:f,valueRender:F}=this.props,G=c.getFilteredData(this.props),{focused:j}=this.state,Y=G.findIndex(K=>c.areSame(K,b,P)),z=g.createElement("span",{id:this._inputId,className:s.classNames(s.uDropDownList.input({c:E}))},h&&g.createElement("span",{className:s.classNames(s.uDropDownList.inputText({c:E}))},h)),$=F!==void 0?F.call(void 0,z,b):z,A=g.createElement(g.Fragment,null,g.createElement("span",{ref:this.componentRef,className:s.classNames(s.uDropDownList.wrapper({c:E,size:d,rounded:I,fillMode:p,focused:j,disabled:N,invalid:!l,loading:D,required:this.required}),t),style:n?{...e,width:void 0}:e,dir:u,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s.getTabIndex(w,N),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:N?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":N||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+(Y+(r?r.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},$,D&&g.createElement(s.IconWrap,{className:s.classNames(s.uDropDownList.loadingIcon({c:E})),name:"loading"}),g.createElement(H.Button,{tabIndex:-1,type:"button","aria-label":i,"aria-hidden":!0,size:d,fillMode:p,iconClass:y,className:s.classNames(s.uDropDownList.iconButton({c:E})),rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||V.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!L&&this.renderListContainer()),L&&this.renderAdaptiveListContainer());return n?g.createElement(Q.FloatingLabel,{label:n,editorValue:h,editorValid:l,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(i,e,t){const{defaultItem:n,dataItemKey:u,virtual:r={skip:0,total:0,pageSize:0}}=this.props,d=c.getFilteredData(this.props),I=this.base.vs,p=this.value,a=d.findIndex(o=>c.areSame(o,p,u)),m=this.base.navigation.navigate({current:r.skip+a,max:(I.enabled?r.total:d.length)-1,min:n!==void 0?-1:0,keyCode:e,skipItems:t||void 0});m!==void 0&&this.handleItemSelect(m,i),this.applyState(i)}renderAdaptiveListContainer(){const{windowWidth:i=0}=this.state,{header:e,footer:t,size:n,adaptiveTitle:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),m=this.props.opened!==void 0?this.props.opened:this.state.opened,o=p&&p.uDropDownList,v=p&&p.uDropDownList,b={navigatable:!1,navigatableElements:[],expand:m,animation:!0,onClose:l=>this.handleWrapperClick(l),animationStyles:i<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s.classNames(s.uDropDownsActionSheet.wrapper({c:o,isFullScreen:i<=M.MOBILE_SMALL_DEVISE}))};let{group:h}=this.state;return h===void 0&&r!==void 0&&(h=c.getItemValue(a[0],r)),g.createElement(q.ActionSheet,{...b},g.createElement(q.ActionSheetHeader,{className:s.classNames(s.uDropDownsActionSheet.header({c:v}))},g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBar({c:v}))},g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.title({c:v}))},g.createElement("div",null,u)),g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.actions({c:v}))},g.createElement(H.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:V.xIcon}))),g.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBarGroup({c:v}))},this.renderListFilter())),g.createElement(q.ActionSheetContent,{overflowHidden:!0},e&&g.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:o}))},e),g.createElement("div",{className:s.classNames(s.uDropDownList.list({c:o,size:n,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&h&&a.length!==0&&g.createElement(B,{group:h,groupMode:"modern",render:d}),this.renderList()),t&&g.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:o}))},t)))}getFocusedIndex(){const i=this.value,{textField:e,dataItemKey:t,virtual:n={skip:0},focusedItemIndex:u=c.itemIndexStartsWith,filterable:r,skipDisabledItems:d=!0}=this.props,I=c.getFilteredData(this.props),p=this.props.filter?this.props.filter:this.state.text;return d&&e&&!p&&!i?I.findIndex(a=>!a.disabled&&a[e]):c.isPresent(i)&&p===void 0||r&&p===""?I.findIndex(a=>c.areSame(a,i,t)):p?this._lastKeypressIsFilter?u(I,p,e):I.findIndex(a=>c.areSame(a,i,t)):n.skip===0?0:-1}focusElement(i){this._skipFocusEvent=!0,i.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(i,e){c.areSame(this.value,i,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=i),this._valueDuringOnChange=i,e.events.push({type:"onChange"}))}applyState(i){this.base.applyState(i),this._valueDuringOnChange=void 0}calculateMedia(i){for(const e of i)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const i=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(i,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(i,e){return e!==void 0&&e!==-1&&i&&i.length>0&&i[e].disabled}};k.displayName="DropDownList",k.propTypes={delay:x.number,ignoreCase:x.bool,iconClassName:x.string,svgIcon:s.svgIconPropType,defaultItem:x.any,valueRender:x.func,valueMap:x.func,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaDescribedBy:x.string,ariaLabel:x.string,leftRightKeysNavigation:x.bool,title:x.string,groupField:x.string,list:x.any,skipDisabledItems:x.bool,renderListFilterWrapper:x.bool,...R.propTypes},k.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=k;const W=s.createPropsContext(),U=s.withIdHOC(s.withPropsContext(W,s.withUnstyledHOC(O)));U.displayName="KendoReactDropDownList";exports.DropDownList=U;exports.DropDownListPropsContext=W;exports.DropDownListWithoutContext=O;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),x=require("prop-types"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-react-labels"),V=require("@progress/kendo-svg-icons"),X=require("../common/ListContainer.js"),Z=require("../common/ListFilter.js"),B=require("../common/GroupStickyHeader.js"),ee=require("../common/ListDefaultItem.js"),te=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),se=require("../package-metadata.js"),H=require("@progress/kendo-react-buttons"),ie=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),M=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ae(_){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return i.default=_,Object.freeze(i)}const m=ae(J),oe="Please select a value from the list!",k=class k extends m.Component{constructor(i){super(i),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:o,dataItemKey:u,defaultItem:r}=this.props,d=c.getFilteredData(this.props),I=o?o.skip:0,p=e===-1&&r!==void 0?r:d[e-I],a=!c.areSame(p,this.value,u);this.triggerOnChange(p,t),a&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>m.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},m.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:o,size:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),g=this.base,n=g.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=n.width!==void 0?n.width:g.popupWidth,h=p&&p.uDropDownList,l={dir:o!==void 0?o:g.dirCalculated,width:b,popupSettings:{...n,popupClass:s.classNames(n.popupClass,s.uDropDownList.listContainer({c:h})),anchor:n.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,onMouseDownOutside:this.onPopupMouseDown},itemsCount:[a.length]};let{group:S}=this.state;return S===void 0&&r!==void 0&&(S=c.getItemValue(a[0],r)),m.createElement(X,{...l},this.renderListFilter(),e&&m.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:h}))},e),m.createElement("div",{className:s.classNames(s.uDropDownList.list({c:h,size:u,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&S&&a.length!==0&&m.createElement(B,{group:S,groupMode:"modern",render:d}),this.renderList()),t&&m.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:h}))},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:o={skip:0,total:void 0},groupHeaderItemRender:u,listNoDataRender:r,itemRender:d,unstyled:I}=this.props,p=c.getFilteredData(this.props),a=I&&I.uDropDownList,g=this.base.vs,n=o.skip,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.base.getPopupSettings(),h=`translateY(${g.translate}px)`;return m.createElement(te,{id:this._listboxId,show:v,data:p.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>g.list=this.base.list=l,wrapperStyle:{maxHeight:b.height},wrapperCssClass:s.classNames(s.uDropDownList.listContent({c:a})),listStyle:g.enabled?{transform:h}:void 0,key:"listkey",skip:n,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:u,noDataRender:r,onScroll:this.onScroll,wrapperRef:g.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:o.total})},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:u}=this.props;let r=c.getFilteredData(this.props);if(!(!u||!r.length)&&u){const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*d;r=this.base.getGroupedDataModernMode(r,u);let a=r[0][u];for(let g=1;g<r.length&&!(d*g>p);g++)r[g]&&r[g][u]&&(a=r[g][u]);a!==this.state.group&&this.setState({group:a})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&m.createElement(Z,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:o}=this.props;return t!==void 0&&m.createElement(ee,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,o),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,o=c.getFilteredData(this.props);let u=o.map((C,L)=>({item:C,itemIndex:L}));const r=this.searchState.word,d=this.searchState.last,I=c.sameCharsOnly(r,d);let p=u.length,a=Math.max(0,o.findIndex(C=>c.areSame(C,this.value,t))),g;this.props.defaultItem&&(g={item:this.props.defaultItem,itemIndex:-1},p+=1,a+=1),a+=I?1:0,u=c.shuffleData(u,a,g);let n,v,b,h=0;const{textField:l,ignoreCase:S}=this.props;for(;h<p;h++)if(n=c.getItemValue(u[h].item,l),v=I&&c.matchText(n,d,S),b=c.matchText(n,r,S),v||b){h=u[h].itemIndex;break}if(h!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(h,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:o,defaultItem:u,leftRightKeysNavigation:r=!0,virtual:d={skip:0,total:0,pageSize:0},dataItemKey:I,groupField:p="",textField:a,skipDisabledItems:g=!0}=this.props,n=c.getFilteredData(this.props),v=this.value,b=n.findIndex(D=>c.areSame(D,v,I)),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.keyCode,S=l===s.Keys.home||l===s.Keys.end,C=l===s.Keys.up||l===s.Keys.down,L=!h&&(e.altKey&&l===s.Keys.down||l===s.Keys.enter||l===s.Keys.space),E=h&&(e.altKey&&l===s.Keys.up||l===s.Keys.esc),P=r&&(l===s.Keys.left||l===s.Keys.right),N=C||P&&!t||S,w=this.base.initState();if(w.syntheticEvent=e,!o){if(S&&this.base.vs.enabled)l===s.Keys.home?d.skip!==0?(this.base.triggerOnPageChange(w,0,d.pageSize),this._navigated=!0):this.triggerOnChange(n[0],w):d.skip<d.total-d.pageSize?(this.base.triggerOnPageChange(w,d.total-d.pageSize,d.pageSize),this._navigated=!0):this.triggerOnChange(n[n.length-1],w);else if(h&&l===s.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(h&&l===s.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(h&&l===s.Keys.enter){const D=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(n,D)?(this.triggerOnChange(null,w),this.applyState(w)):this.handleItemSelect(D,w),this.base.togglePopup(w),e.preventDefault()}else if(L||E)E&&this.resetValueIfDisabledItem(),this.base.togglePopup(w),e.preventDefault();else if(N){if(this._lastKeypressIsFilter=!1,p!==""&&a)if(!g&&h)this.onNavigate(w,l);else{let D;if(l===s.Keys.down||l===s.Keys.right){const y=n.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&n.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=n,D=n.findIndex(f=>!f.disabled&&f[a]);else{y=n.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&n.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&n.findIndex(y=>y[a]===v[a])===n.length-1&&this.onNavigate(w,l)}else if(!g&&h||S)this.onNavigate(w,l);else if(a){let D;if(l===s.Keys.down||l===s.Keys.right){const y=n.slice(b+1).find(f=>!f.disabled&&f[a]);D=y&&n.findIndex(f=>f[a]===y[a])}else if(l===s.Keys.up||l===s.Keys.left){let y;if(b===0&&u)D=-1;else if(b===-1)y=n,D=n.find(f=>!f.disabled&&f[a]);else{y=n.slice(0,b);let f=y.pop();for(;f&&f.disabled;)f=y.pop();D=f&&n.findIndex(F=>F[a]===f[a])}}if(D!==void 0){const y=D-b;this.onNavigate(w,l,y)}else D===void 0&&n.findIndex(y=>y[a]===v[a])===n.length-1&&this.onNavigate(w,l)}else this.onNavigate(w,l);e.preventDefault()}this.applyState(w)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:o}=this.props,{windowWidth:u=0}=this.state,r=u<=M.MOBILE_MEDIUM_DEVISE&&o,d=this.base.initState();d.syntheticEvent=e,d.data.focused=!1,d.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!r&&this.base.togglePopup(d),this.applyState(d)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===s.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.onPopupMouseDown=e=>{var t;(t=this.props.popupSettings)!=null&&t.onMouseDownOutside&&this.props.popupSettings.onMouseDownOutside.call(void 0,e)},this.togglePopup=()=>{const e=this.base.initState();e.data.opened=this.state.opened,this.base.togglePopup(e),this.applyState(e)},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||oe)},s.validatePackage(se.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let i;return this._valueDuringOnChange!==void 0?i=this._valueDuringOnChange:this.props.value!==void 0?i=this.props.value:this.state.value!==void 0?i=this.state.value:this.props.defaultValue!==void 0&&(i=this.props.defaultValue),!c.isPresent(i)&&this.props.defaultItem!==void 0&&(i=this.props.defaultItem),i}get index(){const{dataItemKey:i}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(o=>c.areSame(o,t,i))}get name(){return this.props.name}get validity(){const i=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:i,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:k.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:k.defaultProps.required}componentDidUpdate(i,e){var n;const{dataItemKey:t,virtual:o,groupField:u="",textField:r}=this.props,d=c.getFilteredData(this.props),I=i.virtual?i.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,a=i.opened!==void 0?i.opened:e.opened,g=!a&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||g&&this.onPopupOpened(),o&&o.total!==I)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const v=this.value,b=i.value!==void 0?i.value:e.value;let h=d.findIndex(S=>c.areSame(S,v,t));u!==""&&v&&r&&(h=(n=this.base.getGroupedDataModernMode(d,u))==null?void 0:n.map(S=>S[r]).indexOf(v[r]));const l=!c.areSame(b,v,t);g&&o?this.base.scrollToVirtualItem(o,h):g&&!o?(this.onPopupOpened(),d&&d.length!==0&&this.base.resetGroupStickyHeader(d[0][u],this),this.base.scrollToItem(h)):p&&a&&v&&l&&!this._navigated?this.base.scrollToItem(h,this.base.vs.enabled):p&&a&&this._navigated&&(this._navigated&&o&&o.skip===0?this.base.vs.reset():this._navigated&&o&&o.skip===o.total-o.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const i=ie.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:o,dir:u,virtual:r,size:d,rounded:I,fillMode:p,adaptive:a,unstyled:g}=this.props,{windowWidth:n=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,h=c.getItemValue(b,this.props.textField),l=!this.validityStyles||this.validity.valid,S=this.base,C=S.vs,L=n<=M.MOBILE_MEDIUM_DEVISE&&a,E=g&&g.uDropDownList;C.enabled=r!==void 0,r!==void 0&&(S.vs.skip=r.skip,S.vs.total=r.total,S.vs.pageSize=r.pageSize);const{dataItemKey:P,disabled:N,tabIndex:w,loading:D,iconClassName:y,svgIcon:f,valueRender:F}=this.props,G=c.getFilteredData(this.props),{focused:j}=this.state,Y=G.findIndex(K=>c.areSame(K,b,P)),A=m.createElement("span",{id:this._inputId,className:s.classNames(s.uDropDownList.input({c:E}))},h&&m.createElement("span",{className:s.classNames(s.uDropDownList.inputText({c:E}))},h)),$=F!==void 0?F.call(void 0,A,b):A,z=m.createElement(m.Fragment,null,m.createElement("span",{ref:this.componentRef,className:s.classNames(s.uDropDownList.wrapper({c:E,size:d,rounded:I,fillMode:p,focused:j,disabled:N,invalid:!l,loading:D,required:this.required}),t),style:o?{...e,width:void 0}:e,dir:u,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s.getTabIndex(w,N),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:N?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":N||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+(Y+(r?r.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},$,D&&m.createElement(s.IconWrap,{className:s.classNames(s.uDropDownList.loadingIcon({c:E})),name:"loading"}),m.createElement(H.Button,{tabIndex:-1,type:"button","aria-label":i,size:d,fillMode:p,iconClass:y,className:s.classNames(s.uDropDownList.inputButton({c:E})),rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||V.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!L&&this.renderListContainer()),L&&this.renderAdaptiveListContainer());return o?m.createElement(Q.FloatingLabel,{label:o,editorValue:h,editorValid:l,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:z}):z}onNavigate(i,e,t){const{defaultItem:o,dataItemKey:u,virtual:r={skip:0,total:0,pageSize:0}}=this.props,d=c.getFilteredData(this.props),I=this.base.vs,p=this.value,a=d.findIndex(n=>c.areSame(n,p,u)),g=this.base.navigation.navigate({current:r.skip+a,max:(I.enabled?r.total:d.length)-1,min:o!==void 0?-1:0,keyCode:e,skipItems:t||void 0});g!==void 0&&this.handleItemSelect(g,i),this.applyState(i)}renderAdaptiveListContainer(){const{windowWidth:i=0}=this.state,{header:e,footer:t,size:o,adaptiveTitle:u,groupField:r,groupStickyHeaderItemRender:d,list:I,unstyled:p}=this.props,a=c.getFilteredData(this.props),g=this.props.opened!==void 0?this.props.opened:this.state.opened,n=p&&p.uDropDownList,v=p&&p.uDropDownsActionSheet,b={navigatable:!1,navigatableElements:[],expand:g,animation:!0,onClose:l=>this.handleWrapperClick(l),animationStyles:i<=M.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s.classNames(s.uDropDownsActionSheet.wrapper({c:v,isFullScreen:i<=M.MOBILE_SMALL_DEVISE}))};let{group:h}=this.state;return h===void 0&&r!==void 0&&(h=c.getItemValue(a[0],r)),m.createElement(q.ActionSheet,{...b},m.createElement(q.ActionSheetHeader,{className:s.classNames(s.uDropDownsActionSheet.header({c:v}))},m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBar({c:v}))},m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.title({c:v}))},m.createElement("div",null,u)),m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.actions({c:v}))},m.createElement(H.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:V.xIcon}))),m.createElement("div",{className:s.classNames(s.uDropDownsActionSheet.titleBarGroup({c:v}))},this.renderListFilter())),m.createElement(q.ActionSheetContent,{overflowHidden:!0},e&&m.createElement("div",{className:s.classNames(s.uDropDownList.listHeader({c:n}))},e),m.createElement("div",{className:s.classNames(s.uDropDownList.list({c:n,size:o,virtual:this.base.vs.enabled}))},this.renderDefaultItem(),!I&&h&&a.length!==0&&m.createElement(B,{group:h,groupMode:"modern",render:d}),this.renderList()),t&&m.createElement("div",{className:s.classNames(s.uDropDownList.listFooter({c:n}))},t)))}getFocusedIndex(){const i=this.value,{textField:e,dataItemKey:t,virtual:o={skip:0},focusedItemIndex:u=c.itemIndexStartsWith,filterable:r,skipDisabledItems:d=!0}=this.props,I=c.getFilteredData(this.props),p=this.props.filter?this.props.filter:this.state.text;return d&&e&&!p&&!i?I.findIndex(a=>!a.disabled&&a[e]):c.isPresent(i)&&p===void 0||r&&p===""?I.findIndex(a=>c.areSame(a,i,t)):p?this._lastKeypressIsFilter?u(I,p,e):I.findIndex(a=>c.areSame(a,i,t)):o.skip===0?0:-1}focusElement(i){this._skipFocusEvent=!0,i.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(i,e){c.areSame(this.value,i,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=i),this._valueDuringOnChange=i,e.events.push({type:"onChange"}))}applyState(i){this.base.applyState(i),this._valueDuringOnChange=void 0}calculateMedia(i){for(const e of i)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const i=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(i,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(i,e){return e!==void 0&&e!==-1&&i&&i.length>0&&i[e].disabled}};k.displayName="DropDownList",k.propTypes={delay:x.number,ignoreCase:x.bool,iconClassName:x.string,svgIcon:s.svgIconPropType,defaultItem:x.any,valueRender:x.func,valueMap:x.func,validationMessage:x.string,required:x.bool,id:x.string,ariaLabelledBy:x.string,ariaDescribedBy:x.string,ariaLabel:x.string,leftRightKeysNavigation:x.bool,title:x.string,groupField:x.string,list:x.any,skipDisabledItems:x.bool,renderListFilterWrapper:x.bool,...R.propTypes},k.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=k;const W=s.createPropsContext(),U=s.withIdHOC(s.withPropsContext(W,s.withUnstyledHOC(O)));U.displayName="KendoReactDropDownList";exports.DropDownList=U;exports.DropDownListPropsContext=W;exports.DropDownListWithoutContext=O;
package/DropDownList/DropDownList.mjs CHANGED
@@ -29,7 +29,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
29
29
  super(s), this.state = {}, this._element = null, this.base = new R(this), this.searchState = { word: "", last: "" }, this._select = null, this._skipFocusEvent = !1, this._filterInput = null, this._navigated = !1, this._lastKeypressIsFilter = !1, this.itemHeight = 0, this.focus = () => {
30
30
  this.base.wrapper && this.base.wrapper.focus({ preventScroll: !0 });
31
31
  }, this.handleItemSelect = (e, t) => {
32
- const { virtual: o, dataItemKey: h, defaultItem: n } = this.props, l = E(this.props), b = o ? o.skip : 0, d = e === -1 && n !== void 0 ? n : l[e - b], i = !k(d, this.value, h);
32
+ const { virtual: a, dataItemKey: h, defaultItem: n } = this.props, l = E(this.props), b = a ? a.skip : 0, d = e === -1 && n !== void 0 ? n : l[e - b], i = !k(d, this.value, h);
33
33
  this.triggerOnChange(d, t), i && this.base.triggerPageChangeCornerItems(d, t);
34
34
  }, this.componentRef = (e) => {
35
35
  this._element = e, this.base.wrapper = e;
@@ -45,28 +45,24 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
45
45
  title: this.props.label,
46
46
  style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
47
47
  },
48
- /* @__PURE__ */ u.createElement(
49
- "option",
50
- {
51
- value: this.props.valueMap ? this.props.valueMap.call(void 0, e) : e
52
- }
53
- )
48
+ /* @__PURE__ */ u.createElement("option", { value: this.props.valueMap ? this.props.valueMap.call(void 0, e) : e })
54
49
  ), this.renderListContainer = () => {
55
- const { header: e, footer: t, dir: o, size: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.base, a = c.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = a.width !== void 0 ? a.width : c.popupWidth, p = d && d.uDropDownList, r = {
56
- dir: o !== void 0 ? o : c.dirCalculated,
50
+ const { header: e, footer: t, dir: a, size: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.base, o = c.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = o.width !== void 0 ? o.width : c.popupWidth, p = d && d.uDropDownList, r = {
51
+ dir: a !== void 0 ? a : c.dirCalculated,
57
52
  width: g,
58
53
  popupSettings: {
59
- ...a,
54
+ ...o,
60
55
  popupClass: x(
61
- a.popupClass,
56
+ o.popupClass,
62
57
  D.listContainer({
63
58
  c: p
64
59
  })
65
60
  ),
66
- anchor: a.anchor || this.element,
61
+ anchor: o.anchor || this.element,
67
62
  show: f,
68
63
  onOpen: this.onPopupOpened,
69
- onClose: this.onPopupClosed
64
+ onClose: this.onPopupClosed,
65
+ onMouseDownOutside: this.onPopupMouseDown
70
66
  },
71
67
  itemsCount: [i.length]
72
68
  };
@@ -90,12 +86,12 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
90
86
  const {
91
87
  textField: e,
92
88
  dataItemKey: t,
93
- virtual: o = { skip: 0, total: void 0 },
89
+ virtual: a = { skip: 0, total: void 0 },
94
90
  groupHeaderItemRender: h,
95
91
  listNoDataRender: n,
96
92
  itemRender: l,
97
93
  unstyled: b
98
- } = this.props, d = E(this.props), i = b && b.uDropDownList, c = this.base.vs, a = o.skip, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getPopupSettings(), p = `translateY(${c.translate}px)`;
94
+ } = this.props, d = E(this.props), i = b && b.uDropDownList, c = this.base.vs, o = a.skip, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getPopupSettings(), p = `translateY(${c.translate}px)`;
99
95
  return /* @__PURE__ */ u.createElement(
100
96
  me,
101
97
  {
@@ -114,7 +110,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
114
110
  wrapperCssClass: x(D.listContent({ c: i })),
115
111
  listStyle: c.enabled ? { transform: p } : void 0,
116
112
  key: "listkey",
117
- skip: a,
113
+ skip: o,
118
114
  onClick: this.handleItemClick,
119
115
  itemRender: l,
120
116
  groupHeaderItemRender: h,
@@ -122,16 +118,16 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
122
118
  onScroll: this.onScroll,
123
119
  wrapperRef: c.scrollerRef,
124
120
  scroller: this.base.renderScrollElement(),
125
- ariaSetSize: o.total
121
+ ariaSetSize: a.total
126
122
  }
127
123
  );
128
124
  }, this.onScroll = (e) => {
129
- const { vs: t, list: o } = this.base;
125
+ const { vs: t, list: a } = this.base;
130
126
  t.scrollHandler(e);
131
127
  const { groupField: h } = this.props;
132
128
  let n = E(this.props);
133
129
  if (!(!h || !n.length) && h) {
134
- const l = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * l;
130
+ const l = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a ? a.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * l;
135
131
  n = this.base.getGroupedDataModernMode(n, h);
136
132
  let i = n[0][h];
137
133
  for (let c = 1; c < n.length && !(l * c > d); c++)
@@ -156,13 +152,13 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
156
152
  }
157
153
  );
158
154
  }, this.renderDefaultItem = () => {
159
- const { textField: e, defaultItem: t, dataItemKey: o } = this.props;
155
+ const { textField: e, defaultItem: t, dataItemKey: a } = this.props;
160
156
  return t !== void 0 && /* @__PURE__ */ u.createElement(
161
157
  ue,
162
158
  {
163
159
  defaultItem: t,
164
160
  textField: e,
165
- selected: k(this.value, t, o),
161
+ selected: k(this.value, t, a),
166
162
  key: "defaultitemkey",
167
163
  onClick: this.handleDefaultItemClick
168
164
  }
@@ -170,15 +166,18 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
170
166
  }, this.search = (e) => {
171
167
  clearTimeout(this._typingTimeout), this.props.filterable || (this._typingTimeout = window.setTimeout(() => this.searchState.word = "", this.props.delay), this.selectNext(e));
172
168
  }, this.selectNext = (e) => {
173
- const { dataItemKey: t } = this.props, o = E(this.props);
174
- let h = o.map((F, L) => ({ item: F, itemIndex: L }));
169
+ const { dataItemKey: t } = this.props, a = E(this.props);
170
+ let h = a.map((F, M) => ({ item: F, itemIndex: M }));
175
171
  const n = this.searchState.word, l = this.searchState.last, b = fe(n, l);
176
- let d = h.length, i = Math.max(0, o.findIndex((F) => k(F, this.value, t))), c;
172
+ let d = h.length, i = Math.max(
173
+ 0,
174
+ a.findIndex((F) => k(F, this.value, t))
175
+ ), c;
177
176
  this.props.defaultItem && (c = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, i += 1), i += b ? 1 : 0, h = ge(h, i, c);
178
- let a, f, g, p = 0;
177
+ let o, f, g, p = 0;
179
178
  const { textField: r, ignoreCase: w } = this.props;
180
179
  for (; p < d; p++)
181
- if (a = T(h[p].item, r), f = b && q(a, l, w), g = q(a, n, w), f || g) {
180
+ if (o = T(h[p].item, r), f = b && q(o, l, w), g = q(o, n, w), f || g) {
182
181
  p = h[p].itemIndex;
183
182
  break;
184
183
  }
@@ -190,7 +189,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
190
189
  e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
191
190
  const {
192
191
  filterable: t,
193
- disabled: o,
192
+ disabled: a,
194
193
  defaultItem: h,
195
194
  leftRightKeysNavigation: n = !0,
196
195
  virtual: l = { skip: 0, total: 0, pageSize: 0 },
@@ -198,18 +197,18 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
198
197
  groupField: d = "",
199
198
  textField: i,
200
199
  skipDisabledItems: c = !0
201
- } = this.props, a = E(this.props), f = this.value, g = a.findIndex((y) => k(y, f, b)), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = e.keyCode, w = r === I.home || r === I.end, F = r === I.up || r === I.down, L = !p && (e.altKey && r === I.down || r === I.enter || r === I.space), _ = p && (e.altKey && r === I.up || r === I.esc), z = n && (r === I.left || r === I.right), P = F || z && !t || w, S = this.base.initState();
202
- if (S.syntheticEvent = e, !o) {
200
+ } = this.props, o = E(this.props), f = this.value, g = o.findIndex((y) => k(y, f, b)), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = e.keyCode, w = r === I.home || r === I.end, F = r === I.up || r === I.down, M = !p && (e.altKey && r === I.down || r === I.enter || r === I.space), _ = p && (e.altKey && r === I.up || r === I.esc), z = n && (r === I.left || r === I.right), P = F || z && !t || w, S = this.base.initState();
201
+ if (S.syntheticEvent = e, !a) {
203
202
  if (w && this.base.vs.enabled)
204
- r === I.home ? l.skip !== 0 ? (this.base.triggerOnPageChange(S, 0, l.pageSize), this._navigated = !0) : this.triggerOnChange(a[0], S) : l.skip < l.total - l.pageSize ? (this.base.triggerOnPageChange(S, l.total - l.pageSize, l.pageSize), this._navigated = !0) : this.triggerOnChange(a[a.length - 1], S);
203
+ r === I.home ? l.skip !== 0 ? (this.base.triggerOnPageChange(S, 0, l.pageSize), this._navigated = !0) : this.triggerOnChange(o[0], S) : l.skip < l.total - l.pageSize ? (this.base.triggerOnPageChange(S, l.total - l.pageSize, l.pageSize), this._navigated = !0) : this.triggerOnChange(o[o.length - 1], S);
205
204
  else if (p && r === I.pageUp)
206
205
  e.preventDefault(), this.base.scrollPopupByPageSize(-1);
207
206
  else if (p && r === I.pageDown)
208
207
  e.preventDefault(), this.base.scrollPopupByPageSize(1);
209
208
  else if (p && r === I.enter) {
210
209
  const y = this.getFocusedIndex();
211
- this.haveFocusedItemAndDataNotEmpty(a, y) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(y, S), this.base.togglePopup(S), e.preventDefault();
212
- } else if (L || _)
210
+ this.haveFocusedItemAndDataNotEmpty(o, y) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(y, S), this.base.togglePopup(S), e.preventDefault();
211
+ } else if (M || _)
213
212
  _ && this.resetValueIfDisabledItem(), this.base.togglePopup(S), e.preventDefault();
214
213
  else if (P) {
215
214
  if (this._lastKeypressIsFilter = !1, d !== "" && i)
@@ -218,54 +217,54 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
218
217
  else {
219
218
  let y;
220
219
  if (r === I.down || r === I.right) {
221
- const v = a.slice(g + 1).find((m) => !m.disabled && m[i]);
222
- y = v && a.findIndex((m) => m[i] === v[i]);
220
+ const v = o.slice(g + 1).find((m) => !m.disabled && m[i]);
221
+ y = v && o.findIndex((m) => m[i] === v[i]);
223
222
  } else if (r === I.up || r === I.left) {
224
223
  let v;
225
224
  if (g === 0 && h)
226
225
  y = -1;
227
226
  else if (g === -1)
228
- v = a, y = a.findIndex((m) => !m.disabled && m[i]);
227
+ v = o, y = o.findIndex((m) => !m.disabled && m[i]);
229
228
  else {
230
- v = a.slice(0, g);
229
+ v = o.slice(0, g);
231
230
  let m = v.pop();
232
231
  for (; m && m.disabled; )
233
232
  m = v.pop();
234
- y = m && a.findIndex((M) => M[i] === m[i]);
233
+ y = m && o.findIndex((L) => L[i] === m[i]);
235
234
  }
236
235
  }
237
236
  if (y !== void 0) {
238
237
  const v = y - g;
239
238
  this.onNavigate(S, r, v);
240
239
  } else
241
- y === void 0 && a.findIndex((v) => v[i] === f[i]) === a.length - 1 && this.onNavigate(S, r);
240
+ y === void 0 && o.findIndex((v) => v[i] === f[i]) === o.length - 1 && this.onNavigate(S, r);
242
241
  }
243
242
  else if (!c && p || w)
244
243
  this.onNavigate(S, r);
245
244
  else if (i) {
246
245
  let y;
247
246
  if (r === I.down || r === I.right) {
248
- const v = a.slice(g + 1).find((m) => !m.disabled && m[i]);
249
- y = v && a.findIndex((m) => m[i] === v[i]);
247
+ const v = o.slice(g + 1).find((m) => !m.disabled && m[i]);
248
+ y = v && o.findIndex((m) => m[i] === v[i]);
250
249
  } else if (r === I.up || r === I.left) {
251
250
  let v;
252
251
  if (g === 0 && h)
253
252
  y = -1;
254
253
  else if (g === -1)
255
- v = a, y = a.find((m) => !m.disabled && m[i]);
254
+ v = o, y = o.find((m) => !m.disabled && m[i]);
256
255
  else {
257
- v = a.slice(0, g);
256
+ v = o.slice(0, g);
258
257
  let m = v.pop();
259
258
  for (; m && m.disabled; )
260
259
  m = v.pop();
261
- y = m && a.findIndex((M) => M[i] === m[i]);
260
+ y = m && o.findIndex((L) => L[i] === m[i]);
262
261
  }
263
262
  }
264
263
  if (y !== void 0) {
265
264
  const v = y - g;
266
265
  this.onNavigate(S, r, v);
267
266
  } else
268
- y === void 0 && a.findIndex((v) => v[i] === f[i]) === a.length - 1 && this.onNavigate(S, r);
267
+ y === void 0 && o.findIndex((v) => v[i] === f[i]) === o.length - 1 && this.onNavigate(S, r);
269
268
  } else
270
269
  this.onNavigate(S, r);
271
270
  e.preventDefault();
@@ -279,7 +278,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
279
278
  }, this.handleBlur = (e) => {
280
279
  if (this._skipFocusEvent || !this.state.focused)
281
280
  return;
282
- const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: o } = this.props, { windowWidth: h = 0 } = this.state, n = h <= j && o, l = this.base.initState();
281
+ const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: a } = this.props, { windowWidth: h = 0 } = this.state, n = h <= j && a, l = this.base.initState();
283
282
  l.syntheticEvent = e, l.data.focused = !1, l.events.push({ type: "onBlur" }), t && this.resetValueIfDisabledItem(), t && !n && this.base.togglePopup(l), this.applyState(l);
284
283
  }, this.handleDefaultItemClick = (e) => {
285
284
  const t = this.base.initState();
@@ -305,11 +304,15 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
305
304
  this._filterInput && this.focusElement(this._filterInput);
306
305
  }, 300);
307
306
  }, this.onPopupClosed = () => {
308
- this.state.focused && window.setTimeout(
309
- () => {
310
- this.state.focused && this.base.wrapper && this.focusElement(this.base.wrapper);
311
- }
312
- );
307
+ this.state.focused && window.setTimeout(() => {
308
+ this.state.focused && this.base.wrapper && this.focusElement(this.base.wrapper);
309
+ });
310
+ }, this.onPopupMouseDown = (e) => {
311
+ var t;
312
+ (t = this.props.popupSettings) != null && t.onMouseDownOutside && this.props.popupSettings.onMouseDownOutside.call(void 0, e);
313
+ }, this.togglePopup = () => {
314
+ const e = this.base.initState();
315
+ e.data.opened = this.state.opened, this.base.togglePopup(e), this.applyState(e);
313
316
  }, this.setValidity = () => {
314
317
  this._select && this._select.setCustomValidity && this._select.setCustomValidity(
315
318
  this.validity.valid ? "" : this.props.validationMessage || Ce
@@ -347,7 +350,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
347
350
  */
348
351
  get index() {
349
352
  const { dataItemKey: s } = this.props, e = E(this.props), t = this.value;
350
- return e.findIndex((o) => k(o, t, s));
353
+ return e.findIndex((a) => k(a, t, s));
351
354
  }
352
355
  /**
353
356
  * Gets the `name` property of the DropDownList.
@@ -379,16 +382,16 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
379
382
  * @hidden
380
383
  */
381
384
  componentDidUpdate(s, e) {
382
- var a;
383
- const { dataItemKey: t, virtual: o, groupField: h = "", textField: n } = this.props, l = E(this.props), b = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened, c = !i && d;
384
- if (this.base.didUpdate(), this.base.getPopupSettings().animate || c && this.onPopupOpened(), o && o.total !== b)
385
+ var o;
386
+ const { dataItemKey: t, virtual: a, groupField: h = "", textField: n } = this.props, l = E(this.props), b = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened, c = !i && d;
387
+ if (this.base.didUpdate(), this.base.getPopupSettings().animate || c && this.onPopupOpened(), a && a.total !== b)
385
388
  this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
386
389
  else {
387
390
  const f = this.value, g = s.value !== void 0 ? s.value : e.value;
388
391
  let p = l.findIndex((w) => k(w, f, t));
389
- h !== "" && f && n && (p = (a = this.base.getGroupedDataModernMode(l, h)) == null ? void 0 : a.map((w) => w[n]).indexOf(f[n]));
392
+ h !== "" && f && n && (p = (o = this.base.getGroupedDataModernMode(l, h)) == null ? void 0 : o.map((w) => w[n]).indexOf(f[n]));
390
393
  const r = !k(g, f, t);
391
- c && o ? this.base.scrollToVirtualItem(o, p) : c && !o ? (this.onPopupOpened(), l && l.length !== 0 && this.base.resetGroupStickyHeader(l[0][h], this), this.base.scrollToItem(p)) : d && i && f && r && !this._navigated ? this.base.scrollToItem(p, this.base.vs.enabled) : d && i && this._navigated && (this._navigated && o && o.skip === 0 ? this.base.vs.reset() : this._navigated && o && o.skip === o.total - o.pageSize && this.base.vs.scrollToEnd());
394
+ c && a ? this.base.scrollToVirtualItem(a, p) : c && !a ? (this.onPopupOpened(), l && l.length !== 0 && this.base.resetGroupStickyHeader(l[0][h], this), this.base.scrollToItem(p)) : d && i && f && r && !this._navigated ? this.base.scrollToItem(p, this.base.vs.enabled) : d && i && this._navigated && (this._navigated && a && a.skip === 0 ? this.base.vs.reset() : this._navigated && a && a.skip === a.total - a.pageSize && this.base.vs.scrollToEnd());
392
395
  }
393
396
  this._navigated = !1, this.setValidity();
394
397
  }
@@ -408,17 +411,12 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
408
411
  * @hidden
409
412
  */
410
413
  render() {
411
- const s = Ie(this).toLanguageString(Y, ye[Y]), { style: e, className: t, label: o, dir: h, virtual: n, size: l, rounded: b, fillMode: d, adaptive: i, unstyled: c } = this.props, { windowWidth: a = 0 } = this.state, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, p = T(g, this.props.textField), r = !this.validityStyles || this.validity.valid, w = this.base, F = w.vs, L = a <= j && i, _ = c && c.uDropDownList;
414
+ const s = Ie(this).toLanguageString(
415
+ Y,
416
+ ye[Y]
417
+ ), { style: e, className: t, label: a, dir: h, virtual: n, size: l, rounded: b, fillMode: d, adaptive: i, unstyled: c } = this.props, { windowWidth: o = 0 } = this.state, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, p = T(g, this.props.textField), r = !this.validityStyles || this.validity.valid, w = this.base, F = w.vs, M = o <= j && i, _ = c && c.uDropDownList;
412
418
  F.enabled = n !== void 0, n !== void 0 && (w.vs.skip = n.skip, w.vs.total = n.total, w.vs.pageSize = n.pageSize);
413
- const {
414
- dataItemKey: z,
415
- disabled: P,
416
- tabIndex: S,
417
- loading: y,
418
- iconClassName: v,
419
- svgIcon: m,
420
- valueRender: M
421
- } = this.props, J = E(this.props), { focused: Q } = this.state, X = J.findIndex((O) => k(O, g, z)), H = /* @__PURE__ */ u.createElement("span", { id: this._inputId, className: x(D.input({ c: _ })) }, p && /* @__PURE__ */ u.createElement("span", { className: x(D.inputText({ c: _ })) }, p)), Z = M !== void 0 ? M.call(void 0, H, g) : H, V = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
419
+ const { dataItemKey: z, disabled: P, tabIndex: S, loading: y, iconClassName: v, svgIcon: m, valueRender: L } = this.props, J = E(this.props), { focused: Q } = this.state, X = J.findIndex((O) => k(O, g, z)), H = /* @__PURE__ */ u.createElement("span", { id: this._inputId, className: x(D.input({ c: _ })) }, p && /* @__PURE__ */ u.createElement("span", { className: x(D.inputText({ c: _ })) }, p)), Z = L !== void 0 ? L.call(void 0, H, g) : H, V = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
422
420
  "span",
423
421
  {
424
422
  ref: this.componentRef,
@@ -436,7 +434,7 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
436
434
  }),
437
435
  t
438
436
  ),
439
- style: o ? { ...e, width: void 0 } : e,
437
+ style: a ? { ...e, width: void 0 } : e,
440
438
  dir: h,
441
439
  onMouseDown: f ? (O) => {
442
440
  O.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), O.preventDefault());
@@ -470,11 +468,10 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
470
468
  tabIndex: -1,
471
469
  type: "button",
472
470
  "aria-label": s,
473
- "aria-hidden": !0,
474
471
  size: l,
475
472
  fillMode: d,
476
473
  iconClass: v,
477
- className: x(D.iconButton({ c: _ })),
474
+ className: x(D.inputButton({ c: _ })),
478
475
  rounded: null,
479
476
  themeColor: "base",
480
477
  icon: v ? void 0 : "caret-alt-down",
@@ -483,12 +480,12 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
483
480
  }
484
481
  ),
485
482
  this.dummySelect(g),
486
- !L && this.renderListContainer()
487
- ), L && this.renderAdaptiveListContainer());
488
- return o ? /* @__PURE__ */ u.createElement(
483
+ !M && this.renderListContainer()
484
+ ), M && this.renderAdaptiveListContainer());
485
+ return a ? /* @__PURE__ */ u.createElement(
489
486
  le,
490
487
  {
491
- label: o,
488
+ label: a,
492
489
  editorValue: p,
493
490
  editorValid: r,
494
491
  editorDisabled: this.props.disabled,
@@ -501,31 +498,29 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
501
498
  * @hidden
502
499
  */
503
500
  onNavigate(s, e, t) {
504
- const {
505
- defaultItem: o,
506
- dataItemKey: h,
507
- virtual: n = { skip: 0, total: 0, pageSize: 0 }
508
- } = this.props, l = E(this.props), b = this.base.vs, d = this.value, i = l.findIndex((a) => k(a, d, h)), c = this.base.navigation.navigate({
501
+ const { defaultItem: a, dataItemKey: h, virtual: n = { skip: 0, total: 0, pageSize: 0 } } = this.props, l = E(this.props), b = this.base.vs, d = this.value, i = l.findIndex((o) => k(o, d, h)), c = this.base.navigation.navigate({
509
502
  current: n.skip + i,
510
503
  max: (b.enabled ? n.total : l.length) - 1,
511
- min: o !== void 0 ? -1 : 0,
504
+ min: a !== void 0 ? -1 : 0,
512
505
  keyCode: e,
513
506
  skipItems: t || void 0
514
507
  });
515
508
  c !== void 0 && this.handleItemSelect(c, s), this.applyState(s);
516
509
  }
517
510
  renderAdaptiveListContainer() {
518
- const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: o, adaptiveTitle: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = d && d.uDropDownList, f = d && d.uDropDownList, g = {
511
+ const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: a, adaptiveTitle: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = d && d.uDropDownList, f = d && d.uDropDownsActionSheet, g = {
519
512
  navigatable: !1,
520
513
  navigatableElements: [],
521
514
  expand: c,
522
515
  animation: !0,
523
516
  onClose: (r) => this.handleWrapperClick(r),
524
517
  animationStyles: s <= $ ? { top: 0, width: "100%", height: "100%" } : void 0,
525
- className: x(K.wrapper({
526
- c: a,
527
- isFullScreen: s <= $
528
- }))
518
+ className: x(
519
+ K.wrapper({
520
+ c: f,
521
+ isFullScreen: s <= $
522
+ })
523
+ )
529
524
  };
530
525
  let { group: p } = this.state;
531
526
  return p === void 0 && n !== void 0 && (p = T(i[0], n)), /* @__PURE__ */ u.createElement(we, { ...g }, /* @__PURE__ */ u.createElement(Se, { className: x(K.header({ c: f })) }, /* @__PURE__ */ u.createElement("div", { className: x(K.titleBar({ c: f })) }, /* @__PURE__ */ u.createElement("div", { className: x(K.title({ c: f })) }, /* @__PURE__ */ u.createElement("div", null, h)), /* @__PURE__ */ u.createElement("div", { className: x(K.actions({ c: f })) }, /* @__PURE__ */ u.createElement(
@@ -540,32 +535,39 @@ const Ce = "Please select a value from the list!", N = class N extends u.Compone
540
535
  icon: "x",
541
536
  svgIcon: pe
542
537
  }
543
- ))), /* @__PURE__ */ u.createElement("div", { className: x(K.titleBarGroup({ c: f })) }, this.renderListFilter())), /* @__PURE__ */ u.createElement(xe, { overflowHidden: !0 }, e && /* @__PURE__ */ u.createElement("div", { className: x(D.listHeader({ c: a })) }, e), /* @__PURE__ */ u.createElement(
538
+ ))), /* @__PURE__ */ u.createElement("div", { className: x(K.titleBarGroup({ c: f })) }, this.renderListFilter())), /* @__PURE__ */ u.createElement(xe, { overflowHidden: !0 }, e && /* @__PURE__ */ u.createElement("div", { className: x(D.listHeader({ c: o })) }, e), /* @__PURE__ */ u.createElement(
544
539
  "div",
545
540
  {
546
541
  className: x(
547
542
  D.list({
548
- c: a,
549
- size: o,
543
+ c: o,
544
+ size: a,
550
545
  virtual: this.base.vs.enabled
551
546
  })
552
547
  )
553
548
  },
554
549
  this.renderDefaultItem(),
555
- !b && p && i.length !== 0 && /* @__PURE__ */ u.createElement(W, { group: p, groupMode: "modern", render: l }),
550
+ !b && p && i.length !== 0 && /* @__PURE__ */ u.createElement(
551
+ W,
552
+ {
553
+ group: p,
554
+ groupMode: "modern",
555
+ render: l
556
+ }
557
+ ),
556
558
  this.renderList()
557
- ), t && /* @__PURE__ */ u.createElement("div", { className: x(D.listFooter({ c: a })) }, t)));
559
+ ), t && /* @__PURE__ */ u.createElement("div", { className: x(D.listFooter({ c: o })) }, t)));
558
560
  }
559
561
  getFocusedIndex() {
560
562
  const s = this.value, {
561
563
  textField: e,
562
564
  dataItemKey: t,
563
- virtual: o = { skip: 0 },
565
+ virtual: a = { skip: 0 },
564
566
  focusedItemIndex: h = ve,
565
567
  filterable: n,
566
568
  skipDisabledItems: l = !0
567
569
  } = this.props, b = E(this.props), d = this.props.filter ? this.props.filter : this.state.text;
568
- return l && e && !d && !s ? b.findIndex((i) => !i.disabled && i[e]) : U(s) && d === void 0 || n && d === "" ? b.findIndex((i) => k(i, s, t)) : d ? this._lastKeypressIsFilter ? h(b, d, e) : b.findIndex((i) => k(i, s, t)) : o.skip === 0 ? 0 : -1;
570
+ return l && e && !d && !s ? b.findIndex((i) => !i.disabled && i[e]) : U(s) && d === void 0 || n && d === "" ? b.findIndex((i) => k(i, s, t)) : d ? this._lastKeypressIsFilter ? h(b, d, e) : b.findIndex((i) => k(i, s, t)) : a.skip === 0 ? 0 : -1;
569
571
  }
570
572
  focusElement(s) {
571
573
  this._skipFocusEvent = !0, s.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 30);
@@ -621,10 +623,12 @@ N.displayName = "DropDownList", N.propTypes = {
621
623
  groupMode: "modern"
622
624
  };
623
625
  let A = N;
624
- const De = ae(), Ee = oe(ne(
625
- De,
626
- re(A)
627
- ));
626
+ const De = ae(), Ee = oe(
627
+ ne(
628
+ De,
629
+ re(A)
630
+ )
631
+ );
628
632
  Ee.displayName = "KendoReactDropDownList";
629
633
  export {
630
634
  Ee as DropDownList,