@progress/kendo-react-dropdowns 8.1.0-develop.9 → 8.1.1-develop.1
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.
- package/AutoComplete/AutoComplete.js +1 -1
- package/AutoComplete/AutoComplete.mjs +39 -39
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +1 -1
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +3 -3
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +1 -1
- package/MultiColumnComboBox/MultiColumnComboBox.js +1 -1
- package/MultiColumnComboBox/MultiColumnComboBox.mjs +82 -81
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +3 -3
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +226 -224
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
|
@@ -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 B=require("react"),g=require("prop-types"),q=require("../common/SearchBar.js"),E=require("../common/ListContainer.js"),T=require("../common/List.js"),k=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),I=require("../common/utils.js"),l=require("@progress/kendo-react-common"),L=require("@progress/kendo-react-labels"),R=require("../package-metadata.js"),H=require("../common/ClearButton.js"),_=require("../common/withCustomComponent.js");function z(x){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const t in x)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(x,t);Object.defineProperty(a,t,e.get?e:{enumerable:!0,get:()=>x[t]})}}return a.default=x,Object.freeze(a)}const y=z(B),A="Please enter a valid value!",{sizeMap:O,roundedMap:G}=l.kendoThemeMaps,b=class b extends y.Component{constructor(a){super(a),this.state={},this.base=new k(this),this._element=null,this._suggested="",this._input=null,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[]}=this.props,n=I.getItemValue(s[t],this.props.textField);this.triggerOnChange(n,e)},this.itemFocus=(t,e)=>{const{data:s=[],textField:n}=this.props,i=s[t];I.areSame(this.state.focusedItem,i,n)||(e.data.focusedItem=i)},this.togglePopup=t=>{this.base.togglePopup(t)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||A)},this.onScroll=t=>{this._isScrolling=!0;const{list:e}=this.base,{groupField:s}=this.props;let{data:n=[]}=this.props;if(!s||!n.length)return;const i=this.itemHeight||(e?e.children[0].offsetHeight:0),p=t.target.scrollTop;s&&(n=this.base.getGroupedDataModernMode(n,s));let o=n[0][s];for(let d=1;d<n.length&&!(i*d>p);d++)n[d]&&n[d][s]&&(o=n[d][s]);o!==this.state.group&&this.setState({group:o})},this.handleItemClick=(t,e)=>{this.base.handleItemClick(t,e),this._valueDuringOnChange=void 0},this.onChangeHandler=t=>{const s=this.base.initState(),n=t.currentTarget,i=n.value,r=n.selectionEnd===i.length;s.syntheticEvent=t;const p=this._suggested,o=this.value,d=o&&o.substring(0,o.length-p.length),f=d&&d===i,h=d&&d.length>i.length,{suggest:m}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(m!==void 0&&m!==!1){f||h||!r?this._suggested="":this.suggestValue(i);const c=i+this._suggested,v={userInput:i,value:this._suggested};this.triggerOnChange(c,s,{suggestion:v})}else this._suggested="",this.triggerOnChange(i,s);(!u&&i||u&&!i)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=t=>{const s=this.base.initState(),n=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=t;const i="";this._suggested="",this.triggerOnChange(i,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),n&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=t=>{const{data:e=[],skipDisabledItems:s,groupField:n,textField:i}=this.props;this._isScrolling&&(this._isScrolling=!1);const r=this.focusedIndex(),p=e[r],o=t.keyCode,d=t.altKey,f=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=t;const m=()=>{f&&t.preventDefault()};if(d&&o===l.Keys.down)this.setState({opened:!0});else if(d&&o===l.Keys.up)this.setState({opened:!1});else if(f&&o===l.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(f&&o===l.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if(f&&(o===l.Keys.enter||o===l.Keys.esc))m(),s===!1&&p&&p.disabled?(f&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(t.currentTarget.value,h,t.keyCode);else if(!f&&o===l.Keys.esc){const u="";this._suggested="",this.triggerOnChange(u,h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h)}else if(o===l.Keys.up||o===l.Keys.down){if(n!==""&&i)if(!this.props.skipDisabledItems&&f)this.onNavigate(h,o);else{let u=0;if(o===l.Keys.down||o===l.Keys.right){const c=e.slice(r+1).find(v=>!v.disabled&&v[i]);u=c&&e.findIndex(v=>v[i]===c[i])}else if(o===l.Keys.up||o===l.Keys.left){let c;if(r===-1)c=e,u=e.findIndex(v=>!v.disabled&&v[i]);else{c=e.slice(0,r);let v=c.pop();for(;v&&v.disabled;)v=c.pop();u=v&&e.findIndex(C=>C[i]===v[i])}}if(u!==void 0){const c=u-r;this.onNavigate(h,o,c)}else u===void 0&&e.findIndex(c=>c[i])===e.length-1&&this.onNavigate(h,o)}else if(!this.props.skipDisabledItems&&f)this.onNavigate(h,o);else{let u=null;if(o===l.Keys.down||o===l.Keys.right)u=e.slice(r+1).find(c=>!c.disabled);else if(o===l.Keys.up||o===l.Keys.left){const c=e.slice(0,r);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-r-1;this.onNavigate(h,o,c)}else this.onNavigate(h,o)}this.applyState(h),m()}},this.handleBlur=t=>{if(this.state.focused){const e=this.base.initState();e.data.focused=!1,e.events.push({type:"onBlur"}),e.syntheticEvent=t,this.applyInputValue(t.currentTarget.value,e)}},l.validatePackage(R.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get element(){return this._element}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,t=!this.required||this.value!=="",e=this.props.valid!==void 0?this.props.valid:t;return{customError:a,valid:e,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}componentDidUpdate(a,t){var m;const{groupField:e="",data:s=[]}=this.props,{data:n=[]}=a,i=this.focusedIndex(),r=s[i],p=n!==s,o=r!==void 0&&t.focusedItem!==r,d=this.props.opened!==void 0?this.props.opened:this.state.opened,f=a.opened!==void 0?a.opened:t.opened,h=!f&&d;if(e==="")(d&&(o||p)||h)&&this.base.scrollToItem(i);else if(!this._isScrolling){let u=(m=this.base.getGroupedDataModernMode(s,e))==null?void 0:m.indexOf(r);h&&(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][e],this),this.base.scrollToItem(u)),d&&f&&o&&this.base.scrollToItem(u)}this.setValidity()}componentDidMount(){this.base.didMount(),this.setValidity()}render(){const{dir:a,disabled:t,label:e,className:s,style:n,loading:i,suggest:r,size:p,rounded:o,fillMode:d}=this.props,f=!this.validityStyles||this.validity.valid,h=this.base,m=this.value,u=this.props.clearButton!==!1&&!i&&!!m,c=this.props.id||this._inputId,v=this.state.focused;typeof r=="string"&&(this._suggested=r);const[C,K]=_(this.props.prefix||y.Fragment),[V,M]=_(this.props.suffix||y.Fragment),w=y.createElement("span",{className:l.classNames("k-autocomplete k-input",s,{[`k-input-${O[p]||p}`]:p,[`k-rounded-${G[o]||o}`]:o,[`k-input-${d}`]:d,"k-invalid":!f,"k-focus":v&&!t,"k-loading":i,"k-required":this.required,"k-disabled":t}),ref:D=>{this._element=D,h.wrapper=D},style:e?{...n,width:void 0}:n,dir:a},this.props.prefix&&y.createElement(C,{...K}),this.renderSearchBar(m||"",c),i&&y.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u&&!i&&y.createElement(H,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&y.createElement(V,{...M}),this.renderListContainer());return e?y.createElement(L.FloatingLabel,{label:e,editorId:c,editorValue:m,editorValid:f,editorDisabled:t,style:{width:n?n.width:void 0},children:w}):w}onNavigate(a,t,e){const s=this.value,{data:n=[],textField:i,focusedItemIndex:r}=this.props,p=this.state.focusedItem!==void 0?n.findIndex(d=>I.areSame(d,this.state.focusedItem,i)):r?r(n,s,i):n.indexOf(I.getFocusedItem(n,s,i)),o=this.base.navigation.navigate({keyCode:t,current:p,max:n.length-1,min:0,skipItems:e||void 0});o!==void 0&&this.itemFocus(o,a),this.applyState(a)}applyInputValue(a,t,e){const s=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:n=[],textField:i}=this.props,r=this.focusedIndex(),p=n[r];if(this._suggested="",s&&e===l.Keys.enter&&p&&!p.disabled){const o=I.getItemValue(n[this.focusedIndex(a)],i);this.triggerOnChange(o,t)}s&&this.togglePopup(t),this.applyState(t)}renderSearchBar(a,t){const e=this.base,{placeholder:s,tabIndex:n,disabled:i,readonly:r}=this.props,{focused:p}=this.state,o=this.props.opened!==void 0?this.props.opened:this.state.opened;return y.createElement(q,{id:t,placeholder:s,tabIndex:n,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:p,name:this.props.name,ref:d=>this._input=d&&d.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:e.handleFocus,onBlur:this.handleBlur,disabled:i,readOnly:r,expanded:o,owns:e.listBoxId,activedescendant:"option-"+e.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}renderListContainer(){const a=this.base,{dir:t,header:e,footer:s,data:n=[],size:i,groupField:r,list:p,groupStickyHeaderItemRender:o}=this.props,d=a.getPopupSettings(),f=this.props.opened!==void 0?this.props.opened:this.state.opened,h=d.width!==void 0?d.width:a.popupWidth;let{group:m}=this.state;return m===void 0&&r!==void 0&&(m=I.getItemValue(n[0],r)),y.createElement(E,{width:h,popupSettings:{...d,anchor:d.anchor||this.element,show:f,popupClass:l.classNames(d.popupClass,"k-list-container","k-autocomplete-popup")},dir:t!==void 0?t:this.base.dirCalculated,itemsCount:[n.length]},e&&y.createElement("div",{className:"k-list-header"},e),y.createElement("div",{className:l.classNames("k-list",{[`k-list-${O[i]||i}`]:i})},!p&&m&&n.length!==0&&y.createElement(N,{group:m,groupMode:"modern",render:o}),this.renderList()),s&&y.createElement("div",{className:"k-list-footer"},s))}renderList(){const a=this.base,t=a.getPopupSettings(),{textField:e,data:s=[],listNoDataRender:n,itemRender:i,groupHeaderItemRender:r}=this.props,p=this.value,o=this.props.opened!==void 0?this.props.opened:this.state.opened;return y.createElement(T,{id:a.listBoxId,show:o,data:s.slice(),focusedIndex:this.focusedIndex(),value:p,textField:e,valueField:e,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>a.list=d,wrapperStyle:{maxHeight:t.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:r,noDataRender:n,onMouseDown:d=>d.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,t,e){this.value===a&&!e||(t.data.value=a,this._valueDuringOnChange=a,t.events.push({type:"onChange",...e||{}}))}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{data:t=[],textField:e}=this.props,s=t[I.itemIndexStartsWith(t,a,e)];if(s){const n=I.getItemValue(s,e);a.toLowerCase()!==n.toLowerCase()&&(this._suggested=n.substring(a.length))}}}focusedIndex(a){const{data:t=[],textField:e,focusedItemIndex:s,skipDisabledItems:n}=this.props,i=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return t.findIndex(r=>I.areSame(r,this.state.focusedItem,e));if(s)return s(t,i,e);{const r=t.indexOf(I.getFocusedItem(t,i,e));return n&&e&&r===-1?t.findIndex(p=>!p.disabled&&p[e]):Math.max(0,r)}}};b.displayName="AutoComplete",b.propTypes={...k.basicPropTypes,size:g.oneOf([null,"small","medium","large"]),rounded:g.oneOf([null,"small","medium","large","full"]),fillMode:g.oneOf([null,"solid","flat","outline"]),groupField:g.string,suggest:g.oneOfType([g.bool,g.string]),placeholder:g.string,value:g.string,defaultValue:g.string,validationMessage:g.string,required:g.bool,readonly:g.bool,clearButton:g.bool,valueRender:g.func,id:g.string,ariaLabelledBy:g.string,ariaDescribedBy:g.string,list:g.any,skipDisabledItems:g.bool},b.defaultProps={...k.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let S=b;const P=l.createPropsContext(),F=l.withIdHOC(l.withPropsContext(P,S));F.displayName="KendoReactAutoComplete";exports.AutoComplete=F;exports.AutoCompletePropsContext=P;exports.AutoCompleteWithoutContext=S;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),g=require("prop-types"),q=require("../common/SearchBar.js"),E=require("../common/ListContainer.js"),T=require("../common/List.js"),k=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),I=require("../common/utils.js"),l=require("@progress/kendo-react-common"),L=require("@progress/kendo-react-labels"),R=require("../package-metadata.js"),H=require("../common/ClearButton.js"),_=require("../common/withCustomComponent.js");function z(x){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const t in x)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(x,t);Object.defineProperty(a,t,e.get?e:{enumerable:!0,get:()=>x[t]})}}return a.default=x,Object.freeze(a)}const y=z(B),A="Please enter a valid value!",{sizeMap:O,roundedMap:G}=l.kendoThemeMaps,b=class b extends y.Component{constructor(a){super(a),this.state={},this.base=new k(this),this._element=null,this._suggested="",this._input=null,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[]}=this.props,n=I.getItemValue(s[t],this.props.textField);this.triggerOnChange(n,e)},this.itemFocus=(t,e)=>{const{data:s=[],textField:n}=this.props,i=s[t];I.areSame(this.state.focusedItem,i,n)||(e.data.focusedItem=i)},this.togglePopup=t=>{this.base.togglePopup(t)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||A)},this.onScroll=t=>{this._isScrolling=!0;const{list:e}=this.base,{groupField:s}=this.props;let{data:n=[]}=this.props;if(!s||!n.length)return;const i=this.itemHeight||(e?e.children[0].offsetHeight:0),p=t.target.scrollTop;s&&(n=this.base.getGroupedDataModernMode(n,s));let o=n[0][s];for(let d=1;d<n.length&&!(i*d>p);d++)n[d]&&n[d][s]&&(o=n[d][s]);o!==this.state.group&&this.setState({group:o})},this.handleItemClick=(t,e)=>{this.base.handleItemClick(t,e),this._valueDuringOnChange=void 0},this.onChangeHandler=t=>{const s=this.base.initState(),n=t.currentTarget,i=n.value,r=n.selectionEnd===i.length;s.syntheticEvent=t;const p=this._suggested,o=this.value,d=o&&o.substring(0,o.length-p.length),m=d&&d===i,h=d&&d.length>i.length,{suggest:f}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(f!==void 0&&f!==!1){m||h||!r?this._suggested="":this.suggestValue(i);const c=i+this._suggested,v={userInput:i,value:this._suggested};this.triggerOnChange(c,s,{suggestion:v})}else this._suggested="",this.triggerOnChange(i,s);(!u&&i||u&&!i)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=t=>{const s=this.base.initState(),n=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=t;const i="";this._suggested="",this.triggerOnChange(i,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),n&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=t=>{const{data:e=[],skipDisabledItems:s,groupField:n,textField:i}=this.props;this._isScrolling&&(this._isScrolling=!1);const r=this.focusedIndex(),p=e[r],o=t.keyCode,d=t.altKey,m=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=t;const f=()=>{m&&t.preventDefault()};if(d&&o===l.Keys.down)this.setState({opened:!0});else if(d&&o===l.Keys.up)this.setState({opened:!1});else if(m&&o===l.Keys.pageUp)f(),this.base.scrollPopupByPageSize(-1);else if(m&&o===l.Keys.pageDown)f(),this.base.scrollPopupByPageSize(1);else if(m&&(o===l.Keys.enter||o===l.Keys.esc))f(),s===!1&&p&&p.disabled?(m&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(t.currentTarget.value,h,t.keyCode);else if(!m&&o===l.Keys.esc){const u="";this._suggested="",this.triggerOnChange(u,h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h)}else if(o===l.Keys.up||o===l.Keys.down){if(n!==""&&i)if(!this.props.skipDisabledItems&&m)this.onNavigate(h,o);else{let u=0;if(o===l.Keys.down||o===l.Keys.right){const c=e.slice(r+1).find(v=>!v.disabled&&v[i]);u=c&&e.findIndex(v=>v[i]===c[i])}else if(o===l.Keys.up||o===l.Keys.left){let c;if(r===-1)c=e,u=e.findIndex(v=>!v.disabled&&v[i]);else{c=e.slice(0,r);let v=c.pop();for(;v&&v.disabled;)v=c.pop();u=v&&e.findIndex(C=>C[i]===v[i])}}if(u!==void 0){const c=u-r;this.onNavigate(h,o,c)}else u===void 0&&e.findIndex(c=>c[i])===e.length-1&&this.onNavigate(h,o)}else if(!this.props.skipDisabledItems&&m)this.onNavigate(h,o);else{let u=null;if(o===l.Keys.down||o===l.Keys.right)u=e.slice(r+1).find(c=>!c.disabled);else if(o===l.Keys.up||o===l.Keys.left){const c=e.slice(0,r);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-r-1;this.onNavigate(h,o,c)}else this.onNavigate(h,o)}this.applyState(h),f()}},this.handleBlur=t=>{if(this.state.focused){const e=this.base.initState();e.data.focused=!1,e.events.push({type:"onBlur"}),e.syntheticEvent=t,this.applyInputValue(t.currentTarget.value,e)}},l.validatePackage(R.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get element(){return this._element}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,t=!this.required||this.value!=="",e=this.props.valid!==void 0?this.props.valid:t;return{customError:a,valid:e,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}componentDidUpdate(a,t){var f;const{groupField:e="",data:s=[]}=this.props,{data:n=[]}=a,i=this.focusedIndex(),r=s[i],p=n!==s,o=r!==void 0&&t.focusedItem!==r,d=this.props.opened!==void 0?this.props.opened:this.state.opened,m=a.opened!==void 0?a.opened:t.opened,h=!m&&d;if(e==="")(d&&(o||p)||h)&&this.base.scrollToItem(i);else if(!this._isScrolling){const u=(f=this.base.getGroupedDataModernMode(s,e))==null?void 0:f.indexOf(r);h&&(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][e],this),this.base.scrollToItem(u)),d&&m&&o&&this.base.scrollToItem(u)}this.setValidity()}componentDidMount(){this.base.didMount(),this.setValidity()}render(){const{dir:a,disabled:t,label:e,className:s,style:n,loading:i,suggest:r,size:p,rounded:o,fillMode:d}=this.props,m=!this.validityStyles||this.validity.valid,h=this.base,f=this.value,u=this.props.clearButton!==!1&&!i&&!!f,c=this.props.id||this._inputId,v=this.state.focused;typeof r=="string"&&(this._suggested=r);const[C,K]=_(this.props.prefix||y.Fragment),[V,M]=_(this.props.suffix||y.Fragment),w=y.createElement("span",{className:l.classNames("k-autocomplete k-input",s,{[`k-input-${O[p]||p}`]:p,[`k-rounded-${G[o]||o}`]:o,[`k-input-${d}`]:d,"k-invalid":!m,"k-focus":v&&!t,"k-loading":i,"k-required":this.required,"k-disabled":t}),ref:D=>{this._element=D,h.wrapper=D},style:e?{...n,width:void 0}:n,dir:a},this.props.prefix&&y.createElement(C,{...K}),this.renderSearchBar(f||"",c),i&&y.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u&&!i&&y.createElement(H,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&y.createElement(V,{...M}),this.renderListContainer());return e?y.createElement(L.FloatingLabel,{label:e,editorId:c,editorValue:f,editorValid:m,editorDisabled:t,style:{width:n?n.width:void 0},children:w}):w}onNavigate(a,t,e){const s=this.value,{data:n=[],textField:i,focusedItemIndex:r}=this.props,p=this.state.focusedItem!==void 0?n.findIndex(d=>I.areSame(d,this.state.focusedItem,i)):r?r(n,s,i):n.indexOf(I.getFocusedItem(n,s,i)),o=this.base.navigation.navigate({keyCode:t,current:p,max:n.length-1,min:0,skipItems:e||void 0});o!==void 0&&this.itemFocus(o,a),this.applyState(a)}applyInputValue(a,t,e){const s=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:n=[],textField:i}=this.props,r=this.focusedIndex(),p=n[r];if(this._suggested="",s&&e===l.Keys.enter&&p&&!p.disabled){const o=I.getItemValue(n[this.focusedIndex(a)],i);this.triggerOnChange(o,t)}s&&this.togglePopup(t),this.applyState(t)}renderSearchBar(a,t){const e=this.base,{placeholder:s,tabIndex:n,disabled:i,readonly:r}=this.props,{focused:p}=this.state,o=this.props.opened!==void 0?this.props.opened:this.state.opened;return y.createElement(q,{id:t,placeholder:s,tabIndex:n,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:p,name:this.props.name,ref:d=>this._input=d&&d.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:e.handleFocus,onBlur:this.handleBlur,disabled:i,readOnly:r,expanded:o,owns:e.listBoxId,activedescendant:"option-"+e.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}renderListContainer(){const a=this.base,{dir:t,header:e,footer:s,data:n=[],size:i,groupField:r,list:p,groupStickyHeaderItemRender:o}=this.props,d=a.getPopupSettings(),m=this.props.opened!==void 0?this.props.opened:this.state.opened,h=d.width!==void 0?d.width:a.popupWidth;let{group:f}=this.state;return f===void 0&&r!==void 0&&(f=I.getItemValue(n[0],r)),y.createElement(E,{width:h,popupSettings:{...d,anchor:d.anchor||this.element,show:m,popupClass:l.classNames(d.popupClass,"k-list-container","k-autocomplete-popup")},dir:t!==void 0?t:this.base.dirCalculated,itemsCount:[n.length]},e&&y.createElement("div",{className:"k-list-header"},e),y.createElement("div",{className:l.classNames("k-list",{[`k-list-${O[i]||i}`]:i})},!p&&f&&n.length!==0&&y.createElement(N,{group:f,groupMode:"modern",render:o}),this.renderList()),s&&y.createElement("div",{className:"k-list-footer"},s))}renderList(){const a=this.base,t=a.getPopupSettings(),{textField:e,data:s=[],listNoDataRender:n,itemRender:i,groupHeaderItemRender:r}=this.props,p=this.value,o=this.props.opened!==void 0?this.props.opened:this.state.opened;return y.createElement(T,{id:a.listBoxId,show:o,data:s.slice(),focusedIndex:this.focusedIndex(),value:p,textField:e,valueField:e,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>a.list=d,wrapperStyle:{maxHeight:t.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:r,noDataRender:n,onMouseDown:d=>d.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,t,e){this.value===a&&!e||(t.data.value=a,this._valueDuringOnChange=a,t.events.push({type:"onChange",...e||{}}))}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{data:t=[],textField:e}=this.props,s=t[I.itemIndexStartsWith(t,a,e)];if(s){const n=I.getItemValue(s,e);a.toLowerCase()!==n.toLowerCase()&&(this._suggested=n.substring(a.length))}}}focusedIndex(a){const{data:t=[],textField:e,focusedItemIndex:s,skipDisabledItems:n}=this.props,i=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return t.findIndex(r=>I.areSame(r,this.state.focusedItem,e));if(s)return s(t,i,e);{const r=t.indexOf(I.getFocusedItem(t,i,e));return n&&e&&r===-1?t.findIndex(p=>!p.disabled&&p[e]):Math.max(0,r)}}};b.displayName="AutoComplete",b.propTypes={...k.basicPropTypes,size:g.oneOf([null,"small","medium","large"]),rounded:g.oneOf([null,"small","medium","large","full"]),fillMode:g.oneOf([null,"solid","flat","outline"]),groupField:g.string,suggest:g.oneOfType([g.bool,g.string]),placeholder:g.string,value:g.string,defaultValue:g.string,validationMessage:g.string,required:g.bool,readonly:g.bool,clearButton:g.bool,valueRender:g.func,id:g.string,ariaLabelledBy:g.string,ariaDescribedBy:g.string,list:g.any,skipDisabledItems:g.bool},b.defaultProps={...k.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let S=b;const P=l.createPropsContext(),F=l.withIdHOC(l.withPropsContext(P,S));F.displayName="KendoReactAutoComplete";exports.AutoComplete=F;exports.AutoCompletePropsContext=P;exports.AutoCompleteWithoutContext=S;
|
|
@@ -14,7 +14,7 @@ import N from "../common/List.mjs";
|
|
|
14
14
|
import S from "../common/DropDownBase.mjs";
|
|
15
15
|
import L from "../common/GroupStickyHeader.mjs";
|
|
16
16
|
import { getItemValue as b, areSame as C, getFocusedItem as F, itemIndexStartsWith as H } from "../common/utils.mjs";
|
|
17
|
-
import { Keys as
|
|
17
|
+
import { Keys as m, validatePackage as R, classNames as k, IconWrap as q, createPropsContext as K, withIdHOC as z, withPropsContext as G, kendoThemeMaps as $ } from "@progress/kendo-react-common";
|
|
18
18
|
import { FloatingLabel as A } from "@progress/kendo-react-labels";
|
|
19
19
|
import { packageMetadata as U } from "../package-metadata.mjs";
|
|
20
20
|
import j from "../common/ClearButton.mjs";
|
|
@@ -54,9 +54,9 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
54
54
|
}, this.onChangeHandler = (t) => {
|
|
55
55
|
const s = this.base.initState(), n = t.currentTarget, i = n.value, r = n.selectionEnd === i.length;
|
|
56
56
|
s.syntheticEvent = t;
|
|
57
|
-
const l = this._suggested, o = this.value, d = o && o.substring(0, o.length - l.length),
|
|
58
|
-
if (
|
|
59
|
-
|
|
57
|
+
const l = this._suggested, o = this.value, d = o && o.substring(0, o.length - l.length), f = d && d === i, h = d && d.length > i.length, { suggest: g } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
|
|
58
|
+
if (g !== void 0 && g !== !1) {
|
|
59
|
+
f || h || !r ? this._suggested = "" : this.suggestValue(i);
|
|
60
60
|
const u = i + this._suggested, v = { userInput: i, value: this._suggested };
|
|
61
61
|
this.triggerOnChange(u, s, { suggestion: v });
|
|
62
62
|
} else
|
|
@@ -70,38 +70,38 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
70
70
|
}, this.onInputKeyDown = (t) => {
|
|
71
71
|
const { data: e = [], skipDisabledItems: s, groupField: n, textField: i } = this.props;
|
|
72
72
|
this._isScrolling && (this._isScrolling = !1);
|
|
73
|
-
const r = this.focusedIndex(), l = e[r], o = t.keyCode, d = t.altKey,
|
|
73
|
+
const r = this.focusedIndex(), l = e[r], o = t.keyCode, d = t.altKey, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
|
|
74
74
|
h.syntheticEvent = t;
|
|
75
|
-
const
|
|
76
|
-
|
|
75
|
+
const g = () => {
|
|
76
|
+
f && t.preventDefault();
|
|
77
77
|
};
|
|
78
|
-
if (d && o ===
|
|
78
|
+
if (d && o === m.down)
|
|
79
79
|
this.setState({
|
|
80
80
|
opened: !0
|
|
81
81
|
});
|
|
82
|
-
else if (d && o ===
|
|
82
|
+
else if (d && o === m.up)
|
|
83
83
|
this.setState({
|
|
84
84
|
opened: !1
|
|
85
85
|
});
|
|
86
|
-
else if (
|
|
87
|
-
this.base.scrollPopupByPageSize(-1);
|
|
88
|
-
else if (
|
|
89
|
-
this.base.scrollPopupByPageSize(1);
|
|
90
|
-
else if (
|
|
91
|
-
|
|
92
|
-
else if (!
|
|
86
|
+
else if (f && o === m.pageUp)
|
|
87
|
+
g(), this.base.scrollPopupByPageSize(-1);
|
|
88
|
+
else if (f && o === m.pageDown)
|
|
89
|
+
g(), this.base.scrollPopupByPageSize(1);
|
|
90
|
+
else if (f && (o === m.enter || o === m.esc))
|
|
91
|
+
g(), s === !1 && l && l.disabled ? (f && this.togglePopup(h), this.applyState(h)) : this.applyInputValue(t.currentTarget.value, h, t.keyCode);
|
|
92
|
+
else if (!f && o === m.esc) {
|
|
93
93
|
const p = "";
|
|
94
94
|
this._suggested = "", this.triggerOnChange(p, h), this.state.focusedItem !== void 0 && (h.data.focusedItem = void 0), this.applyState(h);
|
|
95
|
-
} else if (o ===
|
|
95
|
+
} else if (o === m.up || o === m.down) {
|
|
96
96
|
if (n !== "" && i)
|
|
97
|
-
if (!this.props.skipDisabledItems &&
|
|
97
|
+
if (!this.props.skipDisabledItems && f)
|
|
98
98
|
this.onNavigate(h, o);
|
|
99
99
|
else {
|
|
100
100
|
let p = 0;
|
|
101
|
-
if (o ===
|
|
101
|
+
if (o === m.down || o === m.right) {
|
|
102
102
|
const u = e.slice(r + 1).find((v) => !v.disabled && v[i]);
|
|
103
103
|
p = u && e.findIndex((v) => v[i] === u[i]);
|
|
104
|
-
} else if (o ===
|
|
104
|
+
} else if (o === m.up || o === m.left) {
|
|
105
105
|
let u;
|
|
106
106
|
if (r === -1)
|
|
107
107
|
u = e, p = e.findIndex((v) => !v.disabled && v[i]);
|
|
@@ -119,13 +119,13 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
119
119
|
} else
|
|
120
120
|
p === void 0 && e.findIndex((u) => u[i]) === e.length - 1 && this.onNavigate(h, o);
|
|
121
121
|
}
|
|
122
|
-
else if (!this.props.skipDisabledItems &&
|
|
122
|
+
else if (!this.props.skipDisabledItems && f)
|
|
123
123
|
this.onNavigate(h, o);
|
|
124
124
|
else {
|
|
125
125
|
let p = null;
|
|
126
|
-
if (o ===
|
|
126
|
+
if (o === m.down || o === m.right)
|
|
127
127
|
p = e.slice(r + 1).find((u) => !u.disabled);
|
|
128
|
-
else if (o ===
|
|
128
|
+
else if (o === m.up || o === m.left) {
|
|
129
129
|
const u = e.slice(0, r);
|
|
130
130
|
for (p = u.pop(); p && p.disabled; )
|
|
131
131
|
p = u.pop();
|
|
@@ -136,7 +136,7 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
136
136
|
} else
|
|
137
137
|
this.onNavigate(h, o);
|
|
138
138
|
}
|
|
139
|
-
this.applyState(h),
|
|
139
|
+
this.applyState(h), g();
|
|
140
140
|
}
|
|
141
141
|
}, this.handleBlur = (t) => {
|
|
142
142
|
if (this.state.focused) {
|
|
@@ -193,13 +193,13 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
193
193
|
* @hidden
|
|
194
194
|
*/
|
|
195
195
|
componentDidUpdate(a, t) {
|
|
196
|
-
var
|
|
197
|
-
const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = a, i = this.focusedIndex(), r = s[i], l = n !== s, o = r !== void 0 && t.focusedItem !== r, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened,
|
|
196
|
+
var g;
|
|
197
|
+
const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = a, i = this.focusedIndex(), r = s[i], l = n !== s, o = r !== void 0 && t.focusedItem !== r, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = a.opened !== void 0 ? a.opened : t.opened, h = !f && d;
|
|
198
198
|
if (e === "")
|
|
199
199
|
(d && (o || l) || h) && this.base.scrollToItem(i);
|
|
200
200
|
else if (!this._isScrolling) {
|
|
201
|
-
|
|
202
|
-
h && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(p)), d &&
|
|
201
|
+
const p = (g = this.base.getGroupedDataModernMode(s, e)) == null ? void 0 : g.indexOf(r);
|
|
202
|
+
h && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(p)), d && f && o && this.base.scrollToItem(p);
|
|
203
203
|
}
|
|
204
204
|
this.setValidity();
|
|
205
205
|
}
|
|
@@ -213,7 +213,7 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
213
213
|
* @hidden
|
|
214
214
|
*/
|
|
215
215
|
render() {
|
|
216
|
-
const { dir: a, disabled: t, label: e, className: s, style: n, loading: i, suggest: r, size: l, rounded: o, fillMode: d } = this.props,
|
|
216
|
+
const { dir: a, disabled: t, label: e, className: s, style: n, loading: i, suggest: r, size: l, rounded: o, fillMode: d } = this.props, f = !this.validityStyles || this.validity.valid, h = this.base, g = this.value, p = this.props.clearButton !== !1 && !i && !!g, u = this.props.id || this._inputId, v = this.state.focused;
|
|
217
217
|
typeof r == "string" && (this._suggested = r);
|
|
218
218
|
const [x, B] = O(this.props.prefix || I.Fragment), [V, E] = O(this.props.suffix || I.Fragment), D = /* @__PURE__ */ I.createElement(
|
|
219
219
|
"span",
|
|
@@ -225,7 +225,7 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
225
225
|
[`k-input-${P[l] || l}`]: l,
|
|
226
226
|
[`k-rounded-${Q[o] || o}`]: o,
|
|
227
227
|
[`k-input-${d}`]: d,
|
|
228
|
-
"k-invalid": !
|
|
228
|
+
"k-invalid": !f,
|
|
229
229
|
"k-focus": v && !t,
|
|
230
230
|
"k-loading": i,
|
|
231
231
|
"k-required": this.required,
|
|
@@ -239,7 +239,7 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
239
239
|
dir: a
|
|
240
240
|
},
|
|
241
241
|
this.props.prefix && /* @__PURE__ */ I.createElement(x, { ...B }),
|
|
242
|
-
this.renderSearchBar(
|
|
242
|
+
this.renderSearchBar(g || "", u),
|
|
243
243
|
i && /* @__PURE__ */ I.createElement(q, { className: "k-input-loading-icon", name: "loading" }),
|
|
244
244
|
p && !i && /* @__PURE__ */ I.createElement(j, { onClick: this.clearButtonClick, key: "clearbutton" }),
|
|
245
245
|
this.props.suffix && /* @__PURE__ */ I.createElement(V, { ...E }),
|
|
@@ -250,8 +250,8 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
250
250
|
{
|
|
251
251
|
label: e,
|
|
252
252
|
editorId: u,
|
|
253
|
-
editorValue:
|
|
254
|
-
editorValid:
|
|
253
|
+
editorValue: g,
|
|
254
|
+
editorValid: f,
|
|
255
255
|
editorDisabled: t,
|
|
256
256
|
style: { width: n ? n.width : void 0 },
|
|
257
257
|
children: D
|
|
@@ -276,7 +276,7 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
276
276
|
*/
|
|
277
277
|
applyInputValue(a, t, e) {
|
|
278
278
|
const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: i } = this.props, r = this.focusedIndex(), l = n[r];
|
|
279
|
-
if (this._suggested = "", s && e ===
|
|
279
|
+
if (this._suggested = "", s && e === m.enter && l && !l.disabled) {
|
|
280
280
|
const o = b(n[this.focusedIndex(a)], i);
|
|
281
281
|
this.triggerOnChange(o, t);
|
|
282
282
|
}
|
|
@@ -323,16 +323,16 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
323
323
|
groupField: r,
|
|
324
324
|
list: l,
|
|
325
325
|
groupStickyHeaderItemRender: o
|
|
326
|
-
} = this.props, d = a.getPopupSettings(),
|
|
327
|
-
let { group:
|
|
328
|
-
return
|
|
326
|
+
} = this.props, d = a.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = d.width !== void 0 ? d.width : a.popupWidth;
|
|
327
|
+
let { group: g } = this.state;
|
|
328
|
+
return g === void 0 && r !== void 0 && (g = b(n[0], r)), /* @__PURE__ */ I.createElement(
|
|
329
329
|
T,
|
|
330
330
|
{
|
|
331
331
|
width: h,
|
|
332
332
|
popupSettings: {
|
|
333
333
|
...d,
|
|
334
334
|
anchor: d.anchor || this.element,
|
|
335
|
-
show:
|
|
335
|
+
show: f,
|
|
336
336
|
popupClass: k(
|
|
337
337
|
d.popupClass,
|
|
338
338
|
"k-list-container",
|
|
@@ -353,7 +353,7 @@ const J = "Please enter a valid value!", { sizeMap: P, roundedMap: Q } = $, y =
|
|
|
353
353
|
}
|
|
354
354
|
)
|
|
355
355
|
},
|
|
356
|
-
!l &&
|
|
356
|
+
!l && g && n.length !== 0 && /* @__PURE__ */ I.createElement(L, { group: g, groupMode: "modern", render: o }),
|
|
357
357
|
this.renderList()
|
|
358
358
|
),
|
|
359
359
|
s && /* @__PURE__ */ I.createElement("div", { className: "k-list-footer" }, s)
|
package/ComboBox/ComboBox.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 X=require("react"),I=require("prop-types"),B=require("../common/DropDownBase.js"),u=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),c=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),L=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),R=require("@progress/kendo-react-buttons"),A=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),P=require("@progress/kendo-react-layout"),w=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(E){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(E){for(const e in E)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(E,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>E[e]})}}return s.default=E,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:O,roundedMap:re}=u.kendoThemeMaps,S=class S extends h.Component{constructor(s){super(s),this.state={},this.base=new B(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!1,this.focus=()=>{this._input&&this._input.focus()},this.checkForDuplicatePlainTextRecords=()=>{const e=this.props.textField!==void 0,t=this.props.dataItemKey!==void 0;if(this.props.data&&this.props.data.length>0&&!e&&!t){const o=this.props.data;this.duplicates=c.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{data:o=[],virtual:a,dataItemKey:n}=this.props,d=a?a.skip:0,l=o[e-d],r=this.hasDuplicates||!c.areSame(l,this.value,n);this.triggerOnChange(l,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(l,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{data:t=[],skipDisabledItems:o,textField:a}=this.props,n=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(a,t,n),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!o&&a&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!l&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,r)}this.applyState(r)},this.closeOpenedApplyStateNonMobileMode=(e,t)=>{t&&!this.mobileMode&&this.base.togglePopup(e)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=c.getItemValue(this.value,this.props.textField),o=c.isPresent(e)?e:t;return h.createElement(ie,{value:o,ref:a=>this._adaptiveFilterInput=a&&a.element,onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode})},this.handleMobileFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,t.data.text=e.target.value,this.base.filterChanged(e.target.value,t),this.applyState(t)},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:a}=this.props;let{data:n=[]}=this.props;if(!a||!n.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(n=this.base.getGroupedDataModernMode(n,a));let i=n[0][a];for(let g=1;g<n.length&&!(d*g>r);g++)n[g]&&n[g][a]&&(i=n[g][a]);i!==this.state.group&&(this.setState({group:i}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:i}))},this.handleItemClick=(e,t)=>{this.navigationIndex=e,this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleBlur=e=>{if(this.state.focused&&!this._skipBlur){const t=this.base.initState(),{textField:o,data:a=[]}=this.props,n=this.getFocusedIndex(),l=!(n===-1)&&this.getCurrentValueDisabledStatus(o,a,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&l&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const a=this.base.initState();a.syntheticEvent=e,this.base.togglePopup(a),this.base.filterChanged(o,a),this.applyState(a)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:o,textField:a,dataItemKey:n,groupField:d}=this.props,l=this.value,r=Math.max(0,t.findIndex(m=>c.areSame(m,l,n))),i=e.keyCode,g=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(i===u.Keys.up||i===u.Keys.down)){if(e.preventDefault(),d!==""&&a)if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=0;if(i===u.Keys.down||i===u.Keys.right){const v=t.slice(r+1<t.length?r+1:r).find(x=>!x.disabled&&x[a]);m=v&&t.findIndex(x=>x[a]===v[a])}else if(i===u.Keys.up||i===u.Keys.left){let v;if(r===0)v=t,m=t.findIndex(x=>!x.disabled&&x[a]);else{v=t.slice(0,r);let x=v.pop();for(;x&&x.disabled;)x=v.pop();m=x&&t.findIndex(D=>D[a]===x[a])}}if(m!==void 0){const v=m-r;this.onNavigate(p,i,v)}else m===void 0&&t.findIndex(v=>v[a]===l[a])===t.length-1&&this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=null;if(i===u.Keys.down||i===u.Keys.right)m=t.slice(r+1).find(v=>!v.disabled);else if(i===u.Keys.up||i===u.Keys.left){const v=t.slice(0,r);for(m=v.pop();m&&m.disabled;)m=v.pop()}if(m){const v=m.id-r-1;this.onNavigate(p,i,v)}else this.onNavigate(p,i)}this.applyState(p)}const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},y=this.getFocusedIndex(),b=y===-1,k=!b&&this.getCurrentValueDisabledStatus(a,t,y);g?i===u.Keys.pageUp?this.base.scrollPopupByPageSize(-1):i===u.Keys.pageDown?this.base.scrollPopupByPageSize(1):e.altKey&&i===u.Keys.up?f():i===u.Keys.enter?(e.preventDefault(),(a&&!b&&e.currentTarget.value?t[y][a]:void 0)?!o&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):i===u.Keys.esc&&(!o&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!g&&i===u.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===u.Keys.down&&f()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,a=e.currentTarget,n=a.value;if(this.props.suggest){const d=a.selectionEnd===n.length;let l=this.props.filter!==void 0?this.props.filter:this.state.text;c.isPresent(l)||(l=c.getItemValue(this.value,this.props.textField)||"");const r=l&&l===n,i=l&&l.length>n.length;r||i||!d?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(n,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},u.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(u.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=w.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(o=>c.areSame(o,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var f;const{dataItemKey:t,virtual:o,groupField:a="",data:n=[],textField:d}=this.props,l=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const g=!i&&r,p=this.value;if(this._valueOnDidUpdate=p,this.base.didUpdate(),o&&o.total!==l)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:n.findIndex(m=>c.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(f=this.base.getGroupedDataModernMode(n,a))==null?void 0:f.map(m=>m[d]).indexOf(p[d]));const k=!c.areSame(y,p,t);g&&o?this.base.scrollToVirtualItem(o,b):g&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][a],this),this.base.scrollToItem(b)):(this.hasDuplicates||r&&i&&p&&k)&&this.base.scrollToItem(b)}g&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=u.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body),this.checkForDuplicatePlainTextRecords()}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:o,clearButton:a=S.defaultProps.clearButton,label:n,textField:d,adaptive:l,className:r,style:i,loading:g,iconClassName:p,virtual:f,size:y,rounded:b,fillMode:k,opened:m=this.state.opened,placeholder:v,svgIcon:x}=this.props,D=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,W=c.getItemValue(this.value,d),F=c.isPresent(T)?T:W,$=a&&(!!F||c.isPresent(this.value)),M=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;M.enabled=f!==void 0,f!==void 0&&(M.skip=f.skip,M.total=f.total,M.pageSize=f.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),K=h.createElement(h.Fragment,null,h.createElement("span",{className:u.classNames("k-combobox k-input",{[`k-input-${O[y]||y}`]:y,[`k-rounded-${re[b]||b}`]:b,[`k-input-${k}`]:k,"k-invalid":!D,"k-loading":g,"k-required":this.required,"k-disabled":o},r),ref:this.componentRef,style:n?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(F||"",_,v),$&&!g&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),g&&h.createElement(u.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&h.createElement(Y,{...J}),h.createElement(R.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:p?void 0:"caret-alt-down",svgIcon:x||A.caretAltDownIcon,iconClass:p,size:y,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return n?h.createElement(Z.FloatingLabel,{label:n,editorId:_,editorValue:F,editorValid:D,editorDisabled:o,style:{width:i?i.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:o=[],virtual:a={skip:0}}=this.props,n=this.props.filter?this.props.filter:this.state.text;let d=-1,l;const r=this.base.vs,i=this.value;this._suggested="";const g=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(d=this.getFocusedIndex(g),d!==-1&&!c.isPresent(i))this.handleItemSelect(d,s);else if(n==="")this.handleItemSelect(0,s);else{const p=a.skip+d;l=this.base.navigation.navigate({keyCode:e,current:p,max:(r.enabled?r.total:o.length)-1,min:0,skipItems:t||void 0}),l!==void 0&&this.handleItemSelect(l,s)}this.navigationIndex=l}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,l=c.getItemValue(this.value,o)===s?this.index:c.getItemIndexByText(t,s,o),r=l!==-1;let i;if(this._suggested="",r)i=t[l];else if(a)i=o!==void 0?{[o]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,e),n&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,d=c.getItemValue(this.value,o);if(this._suggested="",s===d||s===""&&!c.isPresent(d))return this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e);const l=c.getItemIndexByText(t,s,o,!0),r=l!==-1;let i=null;r?i=t[l]:a&&(i=s?o?{[o]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:o=[],textField:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith}=this.props,l=n.skip,r=s===""&&l===0?0:d(o,s,a);return r!==-1?this.handleItemSelect(r+l,e):(this.triggerOnChange(null,e),this.state.text!==void 0&&(e.data.text=void 0)),t&&this.base.togglePopup(e),this.applyState(e)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:o,data:a=[],groupField:n,groupMode:d,list:l,virtual:r,adaptiveTitle:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.base.getAdaptiveAnimation();let{group:y}=this.state;y===void 0&&n!==void 0&&(y=c.getItemValue(a[0],n));const b={navigatable:!1,navigatableElements:[],expand:p,animation:f,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=w.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=w.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...b},h.createElement(P.ActionSheetHeader,null,h.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},h.createElement("div",{className:"k-actionsheet-title"},h.createElement("div",{className:"k-text-center"},i),h.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),h.createElement("div",{className:"k-actionsheet-actions"},h.createElement(R.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:A.xIcon}))),h.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),h.createElement(P.ActionSheetContent,{className:"!k-overflow-hidden"},h.createElement("div",{className:"k-list-container"},h.createElement("div",{className:u.classNames({"k-list":!l,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":l,[`k-table-${O[o]||o}`]:l&&o})},e&&h.createElement("div",{className:"k-table-header"},e),!l&&y&&a.length!==0&&h.createElement(L,{group:y,groupMode:d,render:g}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,data:a=[],groupField:n,groupMode:d,size:l,list:r,virtual:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=s.getPopupSettings(),y=f.width!==void 0?f.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&n!==void 0&&(b=c.getItemValue(a[0],n)),h.createElement(te,{width:y,popupSettings:{...f,anchor:f.anchor||this.element,show:p,popupClass:u.classNames(f.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[a.length]},h.createElement("div",{className:u.classNames({"k-list":!r,[`k-list-${O[l]||l}`]:!r&&l,"k-virtual-list":i,"k-data-table":r,[`k-table-${O[l]||l}`]:r&&l})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&b&&a.length!==0&&h.createElement(L,{group:b,groupMode:d,render:g}),this.renderList(),o&&h.createElement("div",{className:u.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:a,groupHeaderItemRender:n,data:d=[],virtual:l={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),i=s.vs,g=l.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=`translateY(${i.translate}px)`,y=p?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,k=c.getItemValue(this.value,e),m=c.isPresent(b)&&b!==k?null:this.value,v=this.props.list||se;return h.createElement(v,{id:s.listBoxId,virtual:!!l,show:p,data:d,focusedIndex:y,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:x=>{i.list=this.base.list=x,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>w.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:u.classNames("k-list-content",{"k-list-scroller":!l}),listStyle:i.enabled?{transform:f}:void 0,key:"listkey",skip:g,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:n,noDataRender:o,onMouseDown:x=>x.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:a,data:n=[],dataItemKey:d,virtual:l={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.value,g=Math.max(0,n.findIndex(p=>c.areSame(p,i,d)));return this._suggested&&!c.areSame(this._valueOnDidUpdate,i,d)&&(this._suggested=""),h.createElement(ee,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:o,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${g+l.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",this.navigationIndex=void 0,this.base.filterChanged("",s),this.props.filter===void 0&&this.state.text!==void 0&&(s.data.text=void 0),this.triggerOnChange(null,s);const e=this.props.opened!==void 0?this.props.opened:this.state.opened,t=this.mobileMode;e&&!t&&this.base.togglePopup(s),this.applyState(s)}triggerOnChange(s,e){const t=this.value;!this.hasDuplicates&&(!c.isPresent(t)&&!c.isPresent(s)||c.areSame(t,s,this.props.dataItemKey))||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}getFocusedIndex(s){const e=this.value,{data:t=[],textField:o,dataItemKey:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith,skipDisabledItems:l}=this.props,r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:c.isPresent(e)&&r===void 0?t.findIndex(i=>c.areSame(i,e,a)):r?d(t,r,o):l&&o&&!r&&n.skip===0?t.findIndex(i=>!i.disabled&&i[o]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=c.suggestValue(s,e,t)}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}};S.displayName="ComboBox",S.propTypes={...B.propTypes,size:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:u.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},S.defaultProps={...B.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",allowCustom:!1,clearButton:!0,required:!1,groupMode:"modern",isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let V=S;const H=u.createPropsContext(),U=u.withIdHOC(u.withPropsContext(H,V));U.displayName="KendoReactComboBox";exports.ComboBox=U;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=V;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),I=require("prop-types"),B=require("../common/DropDownBase.js"),u=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels"),c=require("../common/utils.js"),ee=require("../common/SearchBar.js"),te=require("../common/ListContainer.js"),se=require("../common/List.js"),ie=require("../common/ListFilter.js"),L=require("../common/GroupStickyHeader.js"),ae=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),R=require("@progress/kendo-react-buttons"),A=require("@progress/kendo-svg-icons"),C=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),P=require("@progress/kendo-react-layout"),w=require("../common/constants.js"),z=require("../common/withCustomComponent.js");function ne(D){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(D){for(const e in D)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(D,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>D[e]})}}return s.default=D,Object.freeze(s)}const h=ne(X),le="Please enter a valid value!",{sizeMap:O,roundedMap:re}=u.kendoThemeMaps,S=class S extends h.Component{constructor(s){super(s),this.state={},this.base=new B(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!1,this.focus=()=>{this._input&&this._input.focus()},this.checkForDuplicatePlainTextRecords=()=>{const e=this.props.textField!==void 0,t=this.props.dataItemKey!==void 0;if(this.props.data&&this.props.data.length>0&&!e&&!t){const o=this.props.data;this.duplicates=c.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{data:o=[],virtual:a,dataItemKey:n}=this.props,d=a?a.skip:0,l=o[e-d],r=this.hasDuplicates||!c.areSame(l,this.value,n);this.triggerOnChange(l,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(l,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{data:t=[],skipDisabledItems:o,textField:a}=this.props,n=this.getFocusedIndex(),d=this.getCurrentValueDisabledStatus(a,t,n),l=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!o&&a&&d&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!l&&this.mobileMode){const i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(i,r)}this.applyState(r)},this.closeOpenedApplyStateNonMobileMode=(e,t)=>{t&&!this.mobileMode&&this.base.togglePopup(e)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=c.getItemValue(this.value,this.props.textField),o=c.isPresent(e)?e:t;return h.createElement(ie,{value:o,ref:a=>this._adaptiveFilterInput=a&&a.element,onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode})},this.handleMobileFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,t.data.text=e.target.value,this.base.filterChanged(e.target.value,t),this.applyState(t)},this.onScroll=e=>{const{vs:t,list:o}=this.base;t.scrollHandler(e);const{groupField:a}=this.props;let{data:n=[]}=this.props;if(!a||!n.length)return;const d=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*d;this.props.groupMode==="modern"&&(n=this.base.getGroupedDataModernMode(n,a));let i=n[0][a];for(let g=1;g<n.length&&!(d*g>r);g++)n[g]&&n[g][a]&&(i=n[g][a]);i!==this.state.group&&(this.setState({group:i}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:i}))},this.handleItemClick=(e,t)=>{this.navigationIndex=e,this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleBlur=e=>{if(this.state.focused&&!this._skipBlur){const t=this.base.initState(),{textField:o,data:a=[]}=this.props,n=this.getFocusedIndex(),l=!(n===-1)&&this.getCurrentValueDisabledStatus(o,a,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&l&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const a=this.base.initState();a.syntheticEvent=e,this.base.togglePopup(a),this.base.filterChanged(o,a),this.applyState(a)}},this.onInputKeyDown=e=>{const{data:t=[],skipDisabledItems:o,textField:a,dataItemKey:n,groupField:d}=this.props,l=this.value,r=Math.max(0,t.findIndex(m=>c.areSame(m,l,n))),i=e.keyCode,g=this.props.opened!==void 0?this.props.opened:this.state.opened,p=this.base.initState();if(p.syntheticEvent=e,!e.altKey&&(i===u.Keys.up||i===u.Keys.down)){if(e.preventDefault(),d!==""&&a)if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=0;if(i===u.Keys.down||i===u.Keys.right){const v=t.slice(r+1<t.length?r+1:r).find(x=>!x.disabled&&x[a]);m=v&&t.findIndex(x=>x[a]===v[a])}else if(i===u.Keys.up||i===u.Keys.left){let v;if(r===0)v=t,m=t.findIndex(x=>!x.disabled&&x[a]);else{v=t.slice(0,r);let x=v.pop();for(;x&&x.disabled;)x=v.pop();m=x&&t.findIndex(E=>E[a]===x[a])}}if(m!==void 0){const v=m-r;this.onNavigate(p,i,v)}else m===void 0&&t.findIndex(v=>v[a]===l[a])===t.length-1&&this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&g)this.onNavigate(p,i);else{let m=null;if(i===u.Keys.down||i===u.Keys.right)m=t.slice(r+1).find(v=>!v.disabled);else if(i===u.Keys.up||i===u.Keys.left){const v=t.slice(0,r);for(m=v.pop();m&&m.disabled;)m=v.pop()}if(m){const v=m.id-r-1;this.onNavigate(p,i,v)}else this.onNavigate(p,i)}this.applyState(p)}const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)},y=this.getFocusedIndex(),b=y===-1,k=!b&&this.getCurrentValueDisabledStatus(a,t,y);g?i===u.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):i===u.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&i===u.Keys.up?f():i===u.Keys.enter?(e.preventDefault(),(a&&!b&&e.currentTarget.value?t[y][a]:void 0)?!o&&a&&k?this.clearValueOnEnterOrEsc(e):k||this.applyValueOnEnter(e.currentTarget.value,p):this.applyValueOnEnter(e.currentTarget.value,p)):i===u.Keys.esc&&(!o&&a&&k&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,p)):!g&&i===u.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&i===u.Keys.down&&f()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,a=e.currentTarget,n=a.value;if(this.props.suggest){const d=a.selectionEnd===n.length;let l=this.props.filter!==void 0?this.props.filter:this.state.text;c.isPresent(l)||(l=c.getItemValue(this.value,this.props.textField)||"");const r=l&&l===n,i=l&&l.length>n.length;r||i||!d?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(n,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},u.validatePackage(ae.packageMetadata)}get _inputId(){return this.props.id}get document(){if(u.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=w.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(o=>c.areSame(o,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var f;const{dataItemKey:t,virtual:o,groupField:a="",data:n=[],textField:d}=this.props,l=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const g=!i&&r,p=this.value;if(this._valueOnDidUpdate=p,this.base.didUpdate(),o&&o.total!==l)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:n.findIndex(m=>c.areSame(m,p,t));this.props.groupMode==="modern"&&d&&p&&(b=(f=this.base.getGroupedDataModernMode(n,a))==null?void 0:f.map(m=>m[d]).indexOf(p[d]));const k=!c.areSame(y,p,t);g&&o?this.base.scrollToVirtualItem(o,b):g&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][a],this),this.base.scrollToItem(b)):(this.hasDuplicates||r&&i&&p&&k)&&this.base.scrollToItem(b)}g&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=u.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body),this.checkForDuplicatePlainTextRecords()}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelExpand,C.messages[C.comboArrowBtnAriaLabelExpand]),e=q.provideLocalizationService(this).toLanguageString(C.comboArrowBtnAriaLabelCollapse,C.messages[C.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:o,clearButton:a=S.defaultProps.clearButton,label:n,textField:d,adaptive:l,className:r,style:i,loading:g,iconClassName:p,virtual:f,size:y,rounded:b,fillMode:k,opened:m=this.state.opened,placeholder:v,svgIcon:x}=this.props,E=!this.validityStyles||this.validity.valid,T=this.props.filter!==void 0?this.props.filter:this.state.text,W=c.getItemValue(this.value,d),F=c.isPresent(T)?T:W,$=a&&(!!F||c.isPresent(this.value)),M=this.base.vs,_=this.props.id||this._inputId,N=this.mobileMode;M.enabled=f!==void 0,f!==void 0&&(M.skip=f.skip,M.total=f.total,M.pageSize=f.pageSize);const[j,G]=z(this.props.prefix||h.Fragment),[Y,J]=z(this.props.suffix||h.Fragment),K=h.createElement(h.Fragment,null,h.createElement("span",{className:u.classNames("k-combobox k-input",{[`k-input-${O[y]||y}`]:y,[`k-rounded-${re[b]||b}`]:b,[`k-input-${k}`]:k,"k-invalid":!E,"k-loading":g,"k-required":this.required,"k-disabled":o},r),ref:this.componentRef,style:n?{...i,width:void 0}:i,dir:t},this.props.prefix&&h.createElement(j,{...G}),this.renderSearchBar(F||"",_,v),$&&!g&&h.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),g&&h.createElement(u.IconWrap,{className:"k-input-loading-icon",name:"loading",key:"loading"}),this.props.suffix&&h.createElement(Y,{...J}),h.createElement(R.Button,{tabIndex:-1,type:"button","aria-label":m?e:s,icon:p?void 0:"caret-alt-down",svgIcon:x||A.caretAltDownIcon,iconClass:p,size:y,fillMode:k,rounded:null,themeColor:"base",className:"k-input-button",onClick:this.toggleBtnClick,onMouseDown:Q=>Q.preventDefault()}),!N&&this.renderListContainer()),N&&this.renderAdaptiveListContainer());return n?h.createElement(Z.FloatingLabel,{label:n,editorId:_,editorValue:F,editorValid:E,editorDisabled:o,style:{width:i?i.width:void 0},children:K}):K}onNavigate(s,e,t){const{data:o=[],virtual:a={skip:0}}=this.props,n=this.props.filter?this.props.filter:this.state.text;let d=-1,l;const r=this.base.vs,i=this.value;this._suggested="";const g=this.hasDuplicates&&this.duplicates.indexOf(i)!==-1;if(d=this.getFocusedIndex(g),d!==-1&&!c.isPresent(i))this.handleItemSelect(d,s);else if(n==="")this.handleItemSelect(0,s);else{const p=a.skip+d;l=this.base.navigation.navigate({keyCode:e,current:p,max:(r.enabled?r.total:o.length)-1,min:0,skipItems:t||void 0}),l!==void 0&&this.handleItemSelect(l,s)}this.navigationIndex=l}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,l=c.getItemValue(this.value,o)===s?this.index:c.getItemIndexByText(t,s,o),r=l!==-1;let i;if(this._suggested="",r)i=t[l];else if(a)i=o!==void 0?{[o]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(i,e),n&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{data:t=[],textField:o,allowCustom:a}=this.props,n=this.props.opened!==void 0?this.props.opened:this.state.opened,d=c.getItemValue(this.value,o);if(this._suggested="",s===d||s===""&&!c.isPresent(d))return this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e);const l=c.getItemIndexByText(t,s,o,!0),r=l!==-1;let i=null;r?i=t[l]:a&&(i=s?o?{[o]:s}:s:null),this.triggerOnChange(i,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,n),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{data:o=[],textField:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith}=this.props,l=n.skip,r=s===""&&l===0?0:d(o,s,a);return r!==-1?this.handleItemSelect(r+l,e):(this.triggerOnChange(null,e),this.state.text!==void 0&&(e.data.text=void 0)),t&&this.base.togglePopup(e),this.applyState(e)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:o,data:a=[],groupField:n,groupMode:d,list:l,virtual:r,adaptiveTitle:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.base.getAdaptiveAnimation();let{group:y}=this.state;y===void 0&&n!==void 0&&(y=c.getItemValue(a[0],n));const b={navigatable:!1,navigatableElements:[],expand:p,animation:f,onClose:k=>this.toggleBtnClick(k),animationStyles:s<=w.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=w.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"};return h.createElement(P.ActionSheet,{...b},h.createElement(P.ActionSheetHeader,null,h.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},h.createElement("div",{className:"k-actionsheet-title"},h.createElement("div",{className:"k-text-center"},i),h.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),h.createElement("div",{className:"k-actionsheet-actions"},h.createElement(R.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:A.xIcon}))),h.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderMobileListFilter())),h.createElement(P.ActionSheetContent,{className:"!k-overflow-hidden"},h.createElement("div",{className:"k-list-container"},h.createElement("div",{className:u.classNames({"k-list":!l,"k-list-lg":!0,"k-virtual-list":r,"k-data-table":l,[`k-table-${O[o]||o}`]:l&&o})},e&&h.createElement("div",{className:"k-table-header"},e),!l&&y&&a.length!==0&&h.createElement(L,{group:y,groupMode:d,render:g}),this.renderList(),t&&h.createElement("div",{className:"k-list-footer"},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,data:a=[],groupField:n,groupMode:d,size:l,list:r,virtual:i,groupStickyHeaderItemRender:g}=this.props,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=s.getPopupSettings(),y=f.width!==void 0?f.width:s.popupWidth;let{group:b}=this.state;return b===void 0&&n!==void 0&&(b=c.getItemValue(a[0],n)),h.createElement(te,{width:y,popupSettings:{...f,anchor:f.anchor||this.element,show:p,popupClass:u.classNames(f.popupClass,"k-list-container","k-combobox-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[a.length]},h.createElement("div",{className:u.classNames({"k-list":!r,[`k-list-${O[l]||l}`]:!r&&l,"k-virtual-list":i,"k-data-table":r,[`k-table-${O[l]||l}`]:r&&l})},t&&h.createElement("div",{className:"k-table-header"},t),!r&&b&&a.length!==0&&h.createElement(L,{group:b,groupMode:d,render:g}),this.renderList(),o&&h.createElement("div",{className:u.classNames({"k-list-footer":!this.props.footerClassName},this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:a,groupHeaderItemRender:n,data:d=[],virtual:l={skip:0,total:void 0}}=this.props,r=s.getPopupSettings(),i=s.vs,g=l.skip,p=this.props.opened!==void 0?this.props.opened:this.state.opened,f=`translateY(${i.translate}px)`,y=p?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,k=c.getItemValue(this.value,e),m=c.isPresent(b)&&b!==k?null:this.value,v=this.props.list||se;return h.createElement(v,{id:s.listBoxId,virtual:!!l,show:p,data:d,focusedIndex:y,value:m,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:x=>{i.list=this.base.list=x,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>w.MOBILE_MEDIUM_DEVISE?{maxHeight:r.height}:{},wrapperCssClass:u.classNames("k-list-content",{"k-list-scroller":!l}),listStyle:i.enabled?{transform:f}:void 0,key:"listkey",skip:g,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:n,noDataRender:o,onMouseDown:x=>x.preventDefault(),onScroll:this.onScroll,wrapperRef:i.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:a,data:n=[],dataItemKey:d,virtual:l={skip:0}}=this.props,r=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.value,g=Math.max(0,n.findIndex(p=>c.areSame(p,i,d)));return this._suggested&&!c.areSame(this._valueOnDidUpdate,i,d)&&(this._suggested=""),h.createElement(ee,{id:e,readOnly:r&&this.mobileMode,placeholder:t,tabIndex:o,title:this.props.title,accessKey:this.props.accessKey,value:s+this._suggested,suggestedText:this._suggested,ref:p=>this._input=p&&p.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:a,expanded:r,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${g+l.skip}`,role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender})}clearValue(){const s=this.base.initState();this._suggested="",this.navigationIndex=void 0,this.base.filterChanged("",s),this.props.filter===void 0&&this.state.text!==void 0&&(s.data.text=void 0),this.triggerOnChange(null,s);const e=this.props.opened!==void 0?this.props.opened:this.state.opened,t=this.mobileMode;e&&!t&&this.base.togglePopup(s),this.applyState(s)}triggerOnChange(s,e){const t=this.value;!this.hasDuplicates&&(!c.isPresent(t)&&!c.isPresent(s)||c.areSame(t,s,this.props.dataItemKey))||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}getFocusedIndex(s){const e=this.value,{data:t=[],textField:o,dataItemKey:a,virtual:n={skip:0},focusedItemIndex:d=c.itemIndexStartsWith,skipDisabledItems:l}=this.props,r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:c.isPresent(e)&&r===void 0?t.findIndex(i=>c.areSame(i,e,a)):r?d(t,r,o):l&&o&&!r&&n.skip===0?t.findIndex(i=>!i.disabled&&i[o]):n.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=c.suggestValue(s,e,t)}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}};S.displayName="ComboBox",S.propTypes={...B.propTypes,size:I.oneOf([null,"small","medium","large"]),rounded:I.oneOf([null,"small","medium","large","full"]),fillMode:I.oneOf([null,"solid","flat","outline"]),dataItemKey:I.string,groupField:I.string,groupMode:I.oneOf([void 0,"classic","modern"]),isMultiColumn:I.bool,suggest:I.bool,placeholder:I.string,title:I.string,allowCustom:I.bool,clearButton:I.bool,iconClassName:I.string,svgIcon:u.svgIconPropType,validationMessage:I.string,required:I.bool,id:I.string,ariaLabelledBy:I.string,ariaDescribedBy:I.string,list:I.any,valueRender:I.func,skipDisabledItems:I.bool},S.defaultProps={...B.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",allowCustom:!1,clearButton:!0,required:!1,groupMode:"modern",isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let V=S;const H=u.createPropsContext(),U=u.withIdHOC(u.withPropsContext(H,V));U.displayName="KendoReactComboBox";exports.ComboBox=U;exports.ComboBoxPropsContext=H;exports.ComboBoxWithoutContext=V;
|
package/ComboBox/ComboBox.mjs
CHANGED
|
@@ -150,7 +150,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
150
150
|
const m = () => {
|
|
151
151
|
e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
|
|
152
152
|
}, x = this.getFocusedIndex(), v = x === -1, y = !v && this.getCurrentValueDisabledStatus(o, t, x);
|
|
153
|
-
c ? i === I.pageUp ? this.base.scrollPopupByPageSize(-1) : i === I.pageDown ? this.base.scrollPopupByPageSize(1) : e.altKey && i === I.up ? m() : i === I.enter ? (e.preventDefault(), (o && !v && e.currentTarget.value ? t[x][o] : void 0) ? !a && o && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : i === I.esc && (!a && o && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && i === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === I.down && m();
|
|
153
|
+
c ? i === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && i === I.up ? m() : i === I.enter ? (e.preventDefault(), (o && !v && e.currentTarget.value ? t[x][o] : void 0) ? !a && o && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : i === I.esc && (!a && o && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && i === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === I.down && m();
|
|
154
154
|
}, this.inputOnChange = (e) => {
|
|
155
155
|
const t = this.base.initState();
|
|
156
156
|
t.syntheticEvent = e;
|
|
@@ -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 Y=require("react"),w=require("prop-types"),d=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),k=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),F=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(_){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return s.default=_,Object.freeze(s)}const c=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:ne}=d.kendoThemeMaps,E=class E extends c.Component{constructor(s){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=()=>{this.base.wrapper&&this.base.wrapper.focus()},this.handleItemSelect=(e,t)=>{const{data:a=[],virtual:l,dataItemKey:n,defaultItem:o}=this.props,u=l?l.skip:0,p=e===-1&&o!==void 0?o:a[e-u],h=!k.areSame(p,this.value,n);this.triggerOnChange(p,t),h&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>c.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%"}},c.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,data:l=[],size:n,groupField:o,groupStickyHeaderItemRender:u,list:p}=this.props,h=this.base,i=h.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=i.width!==void 0?i.width:h.popupWidth,y={dir:a!==void 0?a:h.dirCalculated,width:b,popupSettings:{...i,popupClass:d.classNames(i.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:i.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:g}=this.state;return g===void 0&&o!==void 0&&(g=k.getItemValue(l[0],o)),c.createElement(Q,{...y},this.renderListFilter(),e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[n]||n}`]:n,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!p&&g&&l.length!==0&&c.createElement(H,{group:g,groupMode:"modern",render:u}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0,total:void 0},groupHeaderItemRender:n,listNoDataRender:o,itemRender:u}=this.props,p=this.base.vs,h=l.skip,i=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getPopupSettings(),b=`translateY(${p.translate}px)`;return c.createElement(ee,{id:this._listboxId,show:i,data:e.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:t,valueField:a,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:y=>p.list=this.base.list=y,wrapperStyle:{maxHeight:v.height},wrapperCssClass:"k-list-content",listStyle:p.enabled?{transform:b}:void 0,key:"listkey",skip:h,onClick:this.handleItemClick,itemRender:u,groupHeaderItemRender:n,noDataRender:o,onScroll:this.onScroll,wrapperRef:p.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:l}=this.props;let{data:n=[]}=this.props;if(!(!l||!n.length)&&l){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,l);let h=n[0][l];for(let i=1;i<n.length&&!(o*i>p);i++)n[i]&&n[i][l]&&(h=n[i][l]);h!==this.state.group&&this.setState({group:h})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&c.createElement(X,{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:a}=this.props;return t!==void 0&&c.createElement(Z,{defaultItem:t,textField:e,selected:k.areSame(this.value,t,a),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{data:t=[],dataItemKey:a}=this.props;let l=t.map((C,N)=>({item:C,itemIndex:N}));const n=this.searchState.word,o=this.searchState.last,u=k.sameCharsOnly(n,o);let p=l.length,h=Math.max(0,t.findIndex(C=>k.areSame(C,this.value,a))),i;this.props.defaultItem&&(i={item:this.props.defaultItem,itemIndex:-1},p+=1,h+=1),h+=u?1:0,l=k.shuffleData(l,h,i);let v,b,y,g=0;const{textField:r,ignoreCase:x}=this.props;for(;g<p;g++)if(v=k.getItemValue(l[g].item,r),b=u&&k.matchText(v,o,x),y=k.matchText(v,n,x),b||y){g=l[g].itemIndex;break}if(g!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(g,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{data:t=[],filterable:a,disabled:l,defaultItem:n,leftRightKeysNavigation:o=!0,virtual:u={skip:0,total:0,pageSize:0},dataItemKey:p,groupField:h="",textField:i,skipDisabledItems:v=!0}=this.props,b=this.value,y=t.findIndex(I=>k.areSame(I,b,p)),g=this.props.opened!==void 0?this.props.opened:this.state.opened,r=e.keyCode,x=r===d.Keys.home||r===d.Keys.end,C=r===d.Keys.up||r===d.Keys.down,N=!g&&(e.altKey&&r===d.Keys.down||r===d.Keys.enter||r===d.Keys.space),L=g&&(e.altKey&&r===d.Keys.up||r===d.Keys.esc),D=o&&(r===d.Keys.left||r===d.Keys.right),P=C||D&&!a||x,S=this.base.initState();if(S.syntheticEvent=e,!l){if(x&&this.base.vs.enabled)r===d.Keys.home?u.skip!==0?(this.base.triggerOnPageChange(S,0,u.pageSize),this._navigated=!0):this.triggerOnChange(t[0],S):u.skip<u.total-u.pageSize?(this.base.triggerOnPageChange(S,u.total-u.pageSize,u.pageSize),this._navigated=!0):this.triggerOnChange(t[t.length-1],S);else if(g&&r===d.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(g&&r===d.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if(g&&r===d.Keys.enter){const I=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(t,I)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(I,S),this.base.togglePopup(S),e.preventDefault()}else if(N||L)L&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(P){if(this._lastKeypressIsFilter=!1,h!==""&&i)if(!v&&g)this.onNavigate(S,r);else{let I;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(y===0&&n)I=-1;else if(y===-1)f=t,I=t.findIndex(m=>!m.disabled&&m[i]);else{f=t.slice(0,y);let m=f.pop();for(;m&&m.disabled;)m=f.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const f=I-y;this.onNavigate(S,r,f)}else I===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else if(!v&&g||x)this.onNavigate(S,r);else if(i){let I;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(y===0&&n)I=-1;else if(y===-1)f=t,I=t.find(m=>!m.disabled&&m[i]);else{f=t.slice(0,y);let m=f.pop();for(;m&&m.disabled;)m=f.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const f=I-y;this.onNavigate(S,r,f)}else I===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else this.onNavigate(S,r);e.preventDefault()}this.applyState(S)}},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:a}=this.props,{windowWidth:l=0}=this.state,n=l<=F.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},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===d.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||ae)},d.validatePackage(te.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(d.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!k.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(a=>k.areSame(a,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:E.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:E.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:l="",textField:n}=this.props,{data:o=[]}=this.props,u=s.virtual?s.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=s.opened!==void 0?s.opened:e.opened,i=!h&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||i&&this.onPopupOpened(),a&&a.total!==u)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=this.value,y=s.value!==void 0?s.value:e.value;let g=o.findIndex(x=>k.areSame(x,b,t));l!==""&&b&&n&&(g=(v=this.base.getGroupedDataModernMode(o,l))==null?void 0:v.map(x=>x[n]).indexOf(b[n]));const r=!k.areSame(y,b,t);i&&a?this.base.scrollToVirtualItem(a,g):i&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][l],this),this.base.scrollToItem(g)):p&&h&&b&&r&&!this._navigated?this.base.scrollToItem(g,this.base.vs.enabled):p&&h&&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())}this._navigated=!1,this.setValidity()}componentDidMount(){var s;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:l,virtual:n,size:o,rounded:u,fillMode:p,adaptive:h}=this.props,{windowWidth:i=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,y=k.getItemValue(b,this.props.textField),g=!this.validityStyles||this.validity.valid,r=this.base,x=r.vs,C=i<=F.MOBILE_MEDIUM_DEVISE&&h;x.enabled=n!==void 0,n!==void 0&&(r.vs.skip=n.skip,r.vs.total=n.total,r.vs.pageSize=n.pageSize);const{dataItemKey:N,data:L=[],disabled:D,tabIndex:P,loading:S,iconClassName:I,svgIcon:f,valueRender:m}=this.props,{focused:M}=this.state,$=L.findIndex(K=>k.areSame(K,b,N)),V=c.createElement("span",{id:this._inputId,className:"k-input-inner"},y&&c.createElement("span",{className:"k-input-value-text"},y)),j=m!==void 0?m.call(void 0,V,b):V,A=c.createElement(c.Fragment,null,c.createElement("span",{ref:this.componentRef,className:d.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${ne[u]||u}`]:u,[`k-picker-${p}`]:p,"k-focus":M,"k-disabled":D,"k-invalid":!g,"k-loading":S,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:l,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:d.getTabIndex(P,D),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:D?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":D||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,id:this.props.id,title:this.props.title},j,S&&c.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:p,iconClass:I,className:"k-input-button",rounded:null,themeColor:"base",icon:I?void 0:"caret-alt-down",svgIcon:f||B.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!C&&this.renderListContainer()),C&&this.renderAdaptiveListContainer());return a?c.createElement(J.FloatingLabel,{label:a,editorValue:y,editorValid:g,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{data:a=[],defaultItem:l,dataItemKey:n,virtual:o={skip:0,total:0,pageSize:0}}=this.props,u=this.base.vs,p=this.value,h=a.findIndex(v=>k.areSame(v,p,n)),i=this.base.navigation.navigate({current:o.skip+h,max:(u.enabled?o.total:a.length)-1,min:l!==void 0?-1:0,keyCode:e,skipItems:t||void 0});i!==void 0&&this.handleItemSelect(i,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:l,groupField:n,groupStickyHeaderItemRender:o,list:u,data:p=[]}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened,i={navigatable:!1,navigatableElements:[],expand:h,animation:!0,onClose:b=>this.handleWrapperClick(b),animationStyles:s<=F.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=F.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:v}=this.state;return v===void 0&&n!==void 0&&(v=k.getItemValue(p[0],n)),c.createElement(q.ActionSheet,{...i},c.createElement(q.ActionSheetHeader,{className:"k-text-center"},c.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},c.createElement("div",{className:"k-actionsheet-title"},c.createElement("div",null,l)),c.createElement("div",{className:"k-actionsheet-actions"},c.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),c.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),c.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!u&&v&&p.length!==0&&c.createElement(H,{group:v,groupMode:"modern",render:o}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0},focusedItemIndex:n=k.itemIndexStartsWith,filterable:o,skipDisabledItems:u=!0}=this.props,p=this.props.filter?this.props.filter:this.state.text;return u&&t&&!p&&!s?e.findIndex(h=>!h.disabled&&h[t]):k.isPresent(s)&&p===void 0||o&&p===""?e.findIndex(h=>k.areSame(h,s,a)):p?this._lastKeypressIsFilter?n(e,p,t):e.findIndex(h=>k.areSame(h,s,a)):l.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){k.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const{data:s=[]}=this.props,e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};E.displayName="DropDownList",E.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:d.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,renderListFilterWrapper:w.bool,...R.propTypes},E.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=E;const U=d.createPropsContext(),G=d.withIdHOC(d.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),w=require("prop-types"),d=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),k=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),F=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(_){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return s.default=_,Object.freeze(s)}const c=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:ne}=d.kendoThemeMaps,D=class D extends c.Component{constructor(s){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=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{data:a=[],virtual:l,dataItemKey:n,defaultItem:o}=this.props,u=l?l.skip:0,p=e===-1&&o!==void 0?o:a[e-u],h=!k.areSame(p,this.value,n);this.triggerOnChange(p,t),h&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>c.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%"}},c.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,data:l=[],size:n,groupField:o,groupStickyHeaderItemRender:u,list:p}=this.props,h=this.base,i=h.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=i.width!==void 0?i.width:h.popupWidth,y={dir:a!==void 0?a:h.dirCalculated,width:b,popupSettings:{...i,popupClass:d.classNames(i.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:i.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:f}=this.state;return f===void 0&&o!==void 0&&(f=k.getItemValue(l[0],o)),c.createElement(Q,{...y},this.renderListFilter(),e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[n]||n}`]:n,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!p&&f&&l.length!==0&&c.createElement(H,{group:f,groupMode:"modern",render:u}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0,total:void 0},groupHeaderItemRender:n,listNoDataRender:o,itemRender:u}=this.props,p=this.base.vs,h=l.skip,i=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getPopupSettings(),b=`translateY(${p.translate}px)`;return c.createElement(ee,{id:this._listboxId,show:i,data:e.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:t,valueField:a,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:y=>p.list=this.base.list=y,wrapperStyle:{maxHeight:v.height},wrapperCssClass:"k-list-content",listStyle:p.enabled?{transform:b}:void 0,key:"listkey",skip:h,onClick:this.handleItemClick,itemRender:u,groupHeaderItemRender:n,noDataRender:o,onScroll:this.onScroll,wrapperRef:p.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:l}=this.props;let{data:n=[]}=this.props;if(!(!l||!n.length)&&l){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,l);let h=n[0][l];for(let i=1;i<n.length&&!(o*i>p);i++)n[i]&&n[i][l]&&(h=n[i][l]);h!==this.state.group&&this.setState({group:h})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&c.createElement(X,{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:a}=this.props;return t!==void 0&&c.createElement(Z,{defaultItem:t,textField:e,selected:k.areSame(this.value,t,a),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{data:t=[],dataItemKey:a}=this.props;let l=t.map((C,N)=>({item:C,itemIndex:N}));const n=this.searchState.word,o=this.searchState.last,u=k.sameCharsOnly(n,o);let p=l.length,h=Math.max(0,t.findIndex(C=>k.areSame(C,this.value,a))),i;this.props.defaultItem&&(i={item:this.props.defaultItem,itemIndex:-1},p+=1,h+=1),h+=u?1:0,l=k.shuffleData(l,h,i);let v,b,y,f=0;const{textField:r,ignoreCase:x}=this.props;for(;f<p;f++)if(v=k.getItemValue(l[f].item,r),b=u&&k.matchText(v,o,x),y=k.matchText(v,n,x),b||y){f=l[f].itemIndex;break}if(f!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(f,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{data:t=[],filterable:a,disabled:l,defaultItem:n,leftRightKeysNavigation:o=!0,virtual:u={skip:0,total:0,pageSize:0},dataItemKey:p,groupField:h="",textField:i,skipDisabledItems:v=!0}=this.props,b=this.value,y=t.findIndex(I=>k.areSame(I,b,p)),f=this.props.opened!==void 0?this.props.opened:this.state.opened,r=e.keyCode,x=r===d.Keys.home||r===d.Keys.end,C=r===d.Keys.up||r===d.Keys.down,N=!f&&(e.altKey&&r===d.Keys.down||r===d.Keys.enter||r===d.Keys.space),L=f&&(e.altKey&&r===d.Keys.up||r===d.Keys.esc),E=o&&(r===d.Keys.left||r===d.Keys.right),P=C||E&&!a||x,S=this.base.initState();if(S.syntheticEvent=e,!l){if(x&&this.base.vs.enabled)r===d.Keys.home?u.skip!==0?(this.base.triggerOnPageChange(S,0,u.pageSize),this._navigated=!0):this.triggerOnChange(t[0],S):u.skip<u.total-u.pageSize?(this.base.triggerOnPageChange(S,u.total-u.pageSize,u.pageSize),this._navigated=!0):this.triggerOnChange(t[t.length-1],S);else if(f&&r===d.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(f&&r===d.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(f&&r===d.Keys.enter){const I=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(t,I)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(I,S),this.base.togglePopup(S),e.preventDefault()}else if(N||L)L&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(P){if(this._lastKeypressIsFilter=!1,h!==""&&i)if(!v&&f)this.onNavigate(S,r);else{let I;if(r===d.Keys.down||r===d.Keys.right){const g=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=g&&t.findIndex(m=>m[i]===g[i])}else if(r===d.Keys.up||r===d.Keys.left){let g;if(y===0&&n)I=-1;else if(y===-1)g=t,I=t.findIndex(m=>!m.disabled&&m[i]);else{g=t.slice(0,y);let m=g.pop();for(;m&&m.disabled;)m=g.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const g=I-y;this.onNavigate(S,r,g)}else I===void 0&&t.findIndex(g=>g[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else if(!v&&f||x)this.onNavigate(S,r);else if(i){let I;if(r===d.Keys.down||r===d.Keys.right){const g=t.slice(y+1).find(m=>!m.disabled&&m[i]);I=g&&t.findIndex(m=>m[i]===g[i])}else if(r===d.Keys.up||r===d.Keys.left){let g;if(y===0&&n)I=-1;else if(y===-1)g=t,I=t.find(m=>!m.disabled&&m[i]);else{g=t.slice(0,y);let m=g.pop();for(;m&&m.disabled;)m=g.pop();I=m&&t.findIndex(M=>M[i]===m[i])}}if(I!==void 0){const g=I-y;this.onNavigate(S,r,g)}else I===void 0&&t.findIndex(g=>g[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else this.onNavigate(S,r);e.preventDefault()}this.applyState(S)}},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:a}=this.props,{windowWidth:l=0}=this.state,n=l<=F.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},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===d.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||ae)},d.validatePackage(te.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(d.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!k.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(a=>k.areSame(a,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:D.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:D.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:l="",textField:n}=this.props,{data:o=[]}=this.props,u=s.virtual?s.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=s.opened!==void 0?s.opened:e.opened,i=!h&&p;if(this.base.didUpdate(),this.base.getPopupSettings().animate||i&&this.onPopupOpened(),a&&a.total!==u)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=this.value,y=s.value!==void 0?s.value:e.value;let f=o.findIndex(x=>k.areSame(x,b,t));l!==""&&b&&n&&(f=(v=this.base.getGroupedDataModernMode(o,l))==null?void 0:v.map(x=>x[n]).indexOf(b[n]));const r=!k.areSame(y,b,t);i&&a?this.base.scrollToVirtualItem(a,f):i&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][l],this),this.base.scrollToItem(f)):p&&h&&b&&r&&!this._navigated?this.base.scrollToItem(f,this.base.vs.enabled):p&&h&&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())}this._navigated=!1,this.setValidity()}componentDidMount(){var s;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:l,virtual:n,size:o,rounded:u,fillMode:p,adaptive:h}=this.props,{windowWidth:i=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,y=k.getItemValue(b,this.props.textField),f=!this.validityStyles||this.validity.valid,r=this.base,x=r.vs,C=i<=F.MOBILE_MEDIUM_DEVISE&&h;x.enabled=n!==void 0,n!==void 0&&(r.vs.skip=n.skip,r.vs.total=n.total,r.vs.pageSize=n.pageSize);const{dataItemKey:N,data:L=[],disabled:E,tabIndex:P,loading:S,iconClassName:I,svgIcon:g,valueRender:m}=this.props,{focused:M}=this.state,$=L.findIndex(K=>k.areSame(K,b,N)),V=c.createElement("span",{id:this._inputId,className:"k-input-inner"},y&&c.createElement("span",{className:"k-input-value-text"},y)),j=m!==void 0?m.call(void 0,V,b):V,A=c.createElement(c.Fragment,null,c.createElement("span",{ref:this.componentRef,className:d.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${ne[u]||u}`]:u,[`k-picker-${p}`]:p,"k-focus":M,"k-disabled":E,"k-invalid":!f,"k-loading":S,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:l,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:d.getTabIndex(P,E),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:E?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":E||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,id:this.props.id,title:this.props.title},j,S&&c.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:p,iconClass:I,className:"k-input-button",rounded:null,themeColor:"base",icon:I?void 0:"caret-alt-down",svgIcon:g||B.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!C&&this.renderListContainer()),C&&this.renderAdaptiveListContainer());return a?c.createElement(J.FloatingLabel,{label:a,editorValue:y,editorValid:f,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{data:a=[],defaultItem:l,dataItemKey:n,virtual:o={skip:0,total:0,pageSize:0}}=this.props,u=this.base.vs,p=this.value,h=a.findIndex(v=>k.areSame(v,p,n)),i=this.base.navigation.navigate({current:o.skip+h,max:(u.enabled?o.total:a.length)-1,min:l!==void 0?-1:0,keyCode:e,skipItems:t||void 0});i!==void 0&&this.handleItemSelect(i,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:l,groupField:n,groupStickyHeaderItemRender:o,list:u,data:p=[]}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened,i={navigatable:!1,navigatableElements:[],expand:h,animation:!0,onClose:b=>this.handleWrapperClick(b),animationStyles:s<=F.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=F.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:v}=this.state;return v===void 0&&n!==void 0&&(v=k.getItemValue(p[0],n)),c.createElement(q.ActionSheet,{...i},c.createElement(q.ActionSheetHeader,{className:"k-text-center"},c.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},c.createElement("div",{className:"k-actionsheet-title"},c.createElement("div",null,l)),c.createElement("div",{className:"k-actionsheet-actions"},c.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),c.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),c.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!u&&v&&p.length!==0&&c.createElement(H,{group:v,groupMode:"modern",render:o}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0},focusedItemIndex:n=k.itemIndexStartsWith,filterable:o,skipDisabledItems:u=!0}=this.props,p=this.props.filter?this.props.filter:this.state.text;return u&&t&&!p&&!s?e.findIndex(h=>!h.disabled&&h[t]):k.isPresent(s)&&p===void 0||o&&p===""?e.findIndex(h=>k.areSame(h,s,a)):p?this._lastKeypressIsFilter?n(e,p,t):e.findIndex(h=>k.areSame(h,s,a)):l.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){k.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const{data:s=[]}=this.props,e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};D.displayName="DropDownList",D.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:d.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,renderListFilterWrapper:w.bool,...R.propTypes},D.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=D;const U=d.createPropsContext(),G=d.withIdHOC(d.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;
|
|
@@ -27,7 +27,7 @@ import { ActionSheet as ve, ActionSheetHeader as be, ActionSheetContent as Ie }
|
|
|
27
27
|
const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke } = ie, E = class E extends h.Component {
|
|
28
28
|
constructor(s) {
|
|
29
29
|
super(s), this.state = {}, this._element = null, this.base = new O(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
|
-
this.base.wrapper && this.base.wrapper.focus();
|
|
30
|
+
this.base.wrapper && this.base.wrapper.focus({ preventScroll: !0 });
|
|
31
31
|
}, this.handleItemSelect = (e, t) => {
|
|
32
32
|
const { data: a = [], virtual: r, dataItemKey: o, defaultItem: n } = this.props, c = r ? r.skip : 0, d = e === -1 && n !== void 0 ? n : a[e - c], p = !C(d, this.value, o);
|
|
33
33
|
this.triggerOnChange(d, t), p && this.base.triggerPageChangeCornerItems(d, t);
|
|
@@ -203,9 +203,9 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
|
|
|
203
203
|
if (x && this.base.vs.enabled)
|
|
204
204
|
l === v.home ? c.skip !== 0 ? (this.base.triggerOnPageChange(k, 0, c.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], k) : c.skip < c.total - c.pageSize ? (this.base.triggerOnPageChange(k, c.total - c.pageSize, c.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], k);
|
|
205
205
|
else if (m && l === v.pageUp)
|
|
206
|
-
this.base.scrollPopupByPageSize(-1);
|
|
206
|
+
e.preventDefault(), this.base.scrollPopupByPageSize(-1);
|
|
207
207
|
else if (m && l === v.pageDown)
|
|
208
|
-
this.base.scrollPopupByPageSize(1);
|
|
208
|
+
e.preventDefault(), this.base.scrollPopupByPageSize(1);
|
|
209
209
|
else if (m && l === v.enter) {
|
|
210
210
|
const y = this.getFocusedIndex();
|
|
211
211
|
this.haveFocusedItemAndDataNotEmpty(t, y) ? (this.triggerOnChange(null, k), this.applyState(k)) : this.handleItemSelect(y, k), this.base.togglePopup(k), e.preventDefault();
|
|
@@ -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 Ge=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),Je=require("@progress/kendo-react-popup"),Qe=require("@progress/kendo-react-intl"),we=require("@progress/kendo-react-treeview"),Xe=require("../package-metadata.js"),U=require("../common/utils.js"),Ye=require("./useDropdownWidth.js"),Ze=require("./ListNoData.js"),h=require("../messages/index.js"),et=require("@progress/kendo-react-labels"),xe=require("../common/ListFilter.js"),tt=require("@progress/kendo-react-buttons"),De=require("@progress/kendo-svg-icons"),nt=require("../common/AdaptiveMode.js"),at=require("@progress/kendo-react-layout"),ot=require("../common/constants.js");function rt(u){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(f,s,o.get?o:{enumerable:!0,get:()=>u[s]})}}return f.default=u,Object.freeze(f)}const t=rt(Ge),{sizeMap:st,roundedMap:it}=r.kendoThemeMaps,lt="Please select a value from the list!",ct=u=>t.createElement("span",{className:"k-input-value-text"},u.children),Ie=u=>u.split("_").map(f=>parseInt(f,10)),ut=(u,f)=>{const{validationMessage:s,valid:o,required:G}=u;return{customError:s!==void 0,valid:!!(o!==void 0?o:!G||f),valueMissing:!f}},oe={selectField:"selected",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},data:[],required:!1,style:{},validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"},Fe=r.createPropsContext(),re=t.forwardRef((u,f)=>{r.validatePackage(Xe.packageMetadata);const s=r.usePropsContext(Fe,u),o={...oe,...s},G=r.useId(),se=o.id||G,{data:M,dataItemKey:T,popupSettings:E={},style:N,opened:d,disabled:S,onOpen:P=r.noop,onClose:v=r.noop,placeholder:J,label:O,name:Se,selectField:H,subItemsField:V,validationMessage:_,valid:Re,required:Q,validityStyles:qe}=o,X=r.getTabIndex(o.tabIndex,S),i=t.useRef(null),g=t.useRef(null),R=t.useRef(null),Y=t.useRef(null),j=t.useRef(null),k=t.useRef(null),$=t.useRef(!1),[ie,Ke]=t.useState(void 0),w=o.value!==void 0,b=w?o.value:ie!==void 0?ie:o.defaultValue,L=U.isPresent(b),Z=L?U.getItemValue(b,o.textField):"",ee=ut({validationMessage:_,valid:Re,required:Q},L),Me=t.useCallback(()=>g.current&&g.current.focus(),[]);t.useImperativeHandle(i,()=>({props:o,element:g.current,focus:Me})),t.useImperativeHandle(f,()=>i.current);const x=r.useRtl(g,o.dir),Te={width:Ye.useDropdownWidth(g,oe,{...oe.popupSettings,...E},N),...x!==void 0?{direction:x}:{}},[Ne,le]=t.useState(!1),l=d!==void 0?d:Ne,[p,te]=t.useState(!1),[ne,Pe]=t.useState(),D=!!(ne&&ne<=ot.MOBILE_MEDIUM_DEVISE&&o.adaptive),[ce,Oe]=t.useState(""),Ve=t.useCallback(()=>{j.current&&j.current.setCustomValidity&&j.current.setCustomValidity(ee.valid?"":_===void 0?lt:_)},[_,ee]);t.useEffect(Ve),t.useEffect(()=>{const e=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver($e.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const ue=t.useCallback(e=>{if(!l){if(P){const a={...e};P.call(void 0,a)}d===void 0&&le(!0)}},[l,d,P]),I=t.useCallback(e=>{if(l){if(v){const a={...e};v.call(void 0,a)}d===void 0&&(le(!1),D&&setTimeout(()=>{var a;y((a=Y.current)==null?void 0:a.element)},300))}},[l,d,v,D]),Le=t.useCallback(e=>{if(!e.isDefaultPrevented()&&i.current){te(!0);const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};(l?I:ue)(a)}},[l,d,P,v]),q=t.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),Be=t.useCallback(e=>{var F,ke;const{keyCode:a,altKey:c}=e,m=k.current&&k.current.element;if(!i.current||e.isDefaultPrevented()&&((F=R.current)==null?void 0:F.element)===e.target)return;const K={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};if(l)if(a===r.Keys.esc||c&&a===r.Keys.up)e.preventDefault(),I(K);else if(m&&m.querySelector(".k-focus")&&(a===r.Keys.up||a===r.Keys.down||a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end)){if(a===r.Keys.up&&((ke=R.current)!=null&&ke.element)){const A=Array.from(m.querySelectorAll(".k-treeview-item")),Ce=[...A].reverse().find(z=>!!(z&&z.querySelector(".k-focus")));if(Ce&&A.indexOf(Ce)===0)return q(()=>{var z;y((z=R.current)==null?void 0:z.element)})}q(r.noop)}else a===r.Keys.down&&q(()=>{var A;y(((A=R.current)==null?void 0:A.element)||m)});else c&&a===r.Keys.down?(e.preventDefault(),ue(K)):l||a===r.Keys.esc&&me(e)},[l,d,P,v]),de=t.useCallback(e=>{const{keyCode:a,altKey:c}=e;c||a!==r.Keys.up&&a!==r.Keys.down||(e.preventDefault(),q(a===r.Keys.up?()=>{y(g.current)}:()=>{y(k.current&&k.current.element)}))},[]),y=t.useCallback(e=>{e&&q(()=>e.focus())},[]),We=t.useCallback(()=>{var e;!p&&l&&!d?I({target:i.current}):s.filterable?y((e=R.current)==null?void 0:e.element):y(k.current&&k.current.element)},[v,s.filterable,p,d,l]),Ae=t.useCallback(()=>{p&&y(g.current)},[p]),ze=t.useCallback(e=>{if(!p&&!$.current&&(te(!0),s.onFocus&&i.current)){const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};s.onFocus.call(void 0,a)}},[p,s.onFocus]),He=t.useCallback(e=>{if(p&&!$.current&&i.current){te(!1);const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};if(s.onBlur){const c={...a};s.onBlur.call(void 0,c)}D||I(a)}},[p,s.onBlur,l,d,v]),_e=t.useCallback(()=>{p&&q(r.noop),D&&setTimeout(()=>{var e;y((e=Y.current)==null?void 0:e.element)},300)},[p,D]),pe=t.useCallback((e,a,c)=>{if(s.onChange){const m={value:a,level:c?Ie(c):[],...e};s.onChange.call(void 0,m)}w||Ke(a)},[s.onChange,w]),fe=t.useCallback(e=>{if(U.areSame(e.item,b,T)||!i.current)return;const{item:a,itemHierarchicalIndex:c,nativeEvent:m,syntheticEvent:K}=e,F={syntheticEvent:K,nativeEvent:m,target:i.current};pe(F,a,c),I(F)},[w,b,s.onChange,T,l,d,v]),me=t.useCallback(e=>{if(!i.current)return;const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};pe(a,null),I(a),e.preventDefault()},[w,s.onChange,l,d,v]),ve=t.useCallback(e=>{if(e.syntheticEvent.stopPropagation(),s.onExpandChange&&i.current){const{item:a,itemHierarchicalIndex:c,nativeEvent:m,syntheticEvent:K}=e,F={level:Ie(c),item:a,nativeEvent:m,syntheticEvent:K,target:i.current};s.onExpandChange.call(void 0,F)}},[s.onExpandChange]),ge=t.useCallback(e=>{if(s.onFilterChange&&i.current){const c={filter:{field:s.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:i.current};s.onFilterChange.call(void 0,c),s.filter===void 0&&Oe(e.target.value)}},[s.onFilterChange,s.filter,s.textField]),je=()=>{const e=o.filterable?t.createElement(xe,{value:o.filter===void 0?ce:o.filter,ref:Y,onChange:ge,onKeyDown:de,size:C,rounded:B,fillMode:W}):null,a={adaptiveTitle:o.adaptiveTitle,expand:l,onClose:c=>I(c),windowWidth:ne,mobileFilter:e};return t.createElement(nt.AdaptiveMode,{...a},t.createElement(at.ActionSheetContent,{className:"!k-overflow-hidden"},t.createElement("div",{className:"k-list-container"},t.createElement("div",{className:"k-list k-list-lg"},M.length>0?t.createElement(we.TreeView,{ref:k,tabIndex:X,data:be,focusIdField:T,textField:o.textField,selectField:H,expandField:o.expandField,childrenField:V,expandIcons:!0,onItemClick:fe,onExpandChange:ve,size:C,item:o.item,dir:x,animate:E.animate}):t.createElement(ye,null,ae.toLanguageString(h.nodata,h.messages[h.nodata]))))))},$e=t.useCallback(e=>{for(let a of e)Pe(a.target.clientWidth)},[]),be=t.useMemo(()=>w||!L?M:r.mapTree(M,V,e=>r.extendDataItem(e,V,{[H]:U.areSame(e,b,T)})),[M,b,w,L,H,V]),ye=o.listNoData||Ze.ListNoData,Ue=o.valueHolder||ct,ae=Qe.useLocalization(),he=!qe||ee.valid,{size:C,rounded:B,fillMode:W}=o,Ee=t.createElement(t.Fragment,null,t.createElement("span",{className:r.classNames("k-dropdowntree k-picker",o.className,{[`k-picker-${st[C]||C}`]:C,[`k-rounded-${it[B]||B}`]:B,[`k-picker-${W}`]:W,"k-focus":p,"k-invalid":!he,"k-loading":o.loading,"k-required":Q,"k-disabled":o.disabled}),tabIndex:X,accessKey:o.accessKey,id:se,style:O?{...N,width:void 0}:N,dir:x,ref:g,onKeyDown:S?void 0:Be,onMouseDown:_e,onClick:S?void 0:Le,onFocus:ze,onBlur:He,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":S,"aria-label":O,"aria-labelledby":o.ariaLabelledBy,"aria-describedby":o.ariaDescribedBy,"aria-required":Q},t.createElement("span",{className:"k-input-inner"},(Z||J)&&t.createElement(Ue,{item:b},Z||J)),o.loading&&t.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),L&&!S&&t.createElement("span",{onClick:me,className:"k-clear-value",title:ae.toLanguageString(h.clear,h.messages[h.clear]),role:"button",tabIndex:-1,onMouseDown:e=>e.preventDefault()},t.createElement(r.IconWrap,{name:"x",icon:De.xIcon})),t.createElement(tt.Button,{tabIndex:-1,type:"button","aria-label":"select",className:"k-input-button",size:C,fillMode:W,themeColor:"base",rounded:null,icon:"caret-alt-down",svgIcon:De.caretAltDownIcon}),t.createElement("select",{name:Se,ref:j,tabIndex:-1,"aria-hidden":!0,title:O,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},t.createElement("option",{value:o.valueMap?o.valueMap.call(void 0,b):b})),!D&&t.createElement(Je.Popup,{...E,className:r.classNames(E.className,{"k-rtl":x==="rtl"}),popupClass:r.classNames(E.popupClass,"k-dropdowntree-popup k-list-container"),style:Te,anchor:E.anchor||g.current,show:l,onOpen:We,onClose:Ae},o.filterable&&t.createElement(xe,{value:o.filter===void 0?ce:o.filter,ref:R,onChange:ge,onKeyDown:de,size:C,rounded:B,fillMode:W,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),M.length>0?t.createElement(we.TreeView,{style:{height:E.height},ref:k,tabIndex:X,data:be,focusIdField:T,textField:o.textField,selectField:H,expandField:o.expandField,childrenField:V,expandIcons:!0,onItemClick:fe,onExpandChange:ve,size:C,item:o.item,dir:x,animate:E.animate}):t.createElement(ye,null,ae.toLanguageString(h.nodata,h.messages[h.nodata])))),D&&je());return O?t.createElement(et.FloatingLabel,{label:O,editorValue:Z,editorPlaceholder:J,editorValid:he,editorDisabled:S,editorId:se,style:{width:N?N.width:void 0},children:Ee,dir:x}):Ee}),dt={opened:n.bool,disabled:n.bool,dir:n.string,tabIndex:n.number,accessKey:n.string,data:n.array,value:n.any,valueMap:n.func,placeholder:n.string,dataItemKey:n.string.isRequired,textField:n.string.isRequired,selectField:n.string,expandField:n.string,subItemsField:n.string,className:n.string,style:n.object,label:n.string,validationMessage:n.string,validityStyles:n.bool,valid:n.bool,required:n.bool,name:n.string,id:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,filterable:n.bool,filter:n.string,loading:n.bool,popupSettings:n.shape({animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),popupClass:n.string,className:n.string,appendTo:n.any,width:n.oneOfType([n.string,n.number]),height:n.oneOfType([n.string,n.number])}),onOpen:n.func,onClose:n.func,onFocus:n.func,onBlur:n.func,onChange:n.func,onFilterChange:n.func,onExpandChange:n.func,item:n.func,valueHolder:n.func,listNoData:n.func,adaptiveTitle:n.string,adaptive:n.bool};re.displayName="KendoReactDropDownTree";re.propTypes=dt;exports.DropDownTree=re;exports.DropDownTreePropsContext=Fe;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ge=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),Je=require("@progress/kendo-react-popup"),Qe=require("@progress/kendo-react-intl"),we=require("@progress/kendo-react-treeview"),Xe=require("../package-metadata.js"),U=require("../common/utils.js"),Ye=require("./useDropdownWidth.js"),Ze=require("./ListNoData.js"),h=require("../messages/index.js"),et=require("@progress/kendo-react-labels"),xe=require("../common/ListFilter.js"),tt=require("@progress/kendo-react-buttons"),De=require("@progress/kendo-svg-icons"),nt=require("../common/AdaptiveMode.js"),at=require("@progress/kendo-react-layout"),ot=require("../common/constants.js");function rt(u){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(f,s,o.get?o:{enumerable:!0,get:()=>u[s]})}}return f.default=u,Object.freeze(f)}const t=rt(Ge),{sizeMap:st,roundedMap:it}=r.kendoThemeMaps,lt="Please select a value from the list!",ct=u=>t.createElement("span",{className:"k-input-value-text"},u.children),Ie=u=>u.split("_").map(f=>parseInt(f,10)),ut=(u,f)=>{const{validationMessage:s,valid:o,required:G}=u;return{customError:s!==void 0,valid:!!(o!==void 0?o:!G||f),valueMissing:!f}},oe={selectField:"selected",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},data:[],required:!1,style:{},validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"},Fe=r.createPropsContext(),re=t.forwardRef((u,f)=>{r.validatePackage(Xe.packageMetadata);const s=r.usePropsContext(Fe,u),o={...oe,...s},G=r.useId(),se=o.id||G,{data:M,dataItemKey:T,popupSettings:E={},style:N,opened:d,disabled:S,onOpen:P=r.noop,onClose:v=r.noop,placeholder:J,label:O,name:Se,selectField:H,subItemsField:V,validationMessage:_,valid:Re,required:Q,validityStyles:qe}=o,X=r.getTabIndex(o.tabIndex,S),i=t.useRef(null),g=t.useRef(null),R=t.useRef(null),Y=t.useRef(null),j=t.useRef(null),k=t.useRef(null),$=t.useRef(!1),[ie,Ke]=t.useState(void 0),w=o.value!==void 0,b=w?o.value:ie!==void 0?ie:o.defaultValue,L=U.isPresent(b),Z=L?U.getItemValue(b,o.textField):"",ee=ut({validationMessage:_,valid:Re,required:Q},L),Me=t.useCallback(()=>g.current&&g.current.focus(),[]);t.useImperativeHandle(i,()=>({props:o,element:g.current,focus:Me})),t.useImperativeHandle(f,()=>i.current);const x=r.useRtl(g,o.dir),Te={width:Ye.useDropdownWidth(g,oe,{...oe.popupSettings,...E},N),...x!==void 0?{direction:x}:{}},[Ne,le]=t.useState(!1),l=d!==void 0?d:Ne,[p,te]=t.useState(!1),[ne,Pe]=t.useState(),D=!!(ne&&ne<=ot.MOBILE_MEDIUM_DEVISE&&o.adaptive),[ce,Oe]=t.useState(""),Ve=t.useCallback(()=>{j.current&&j.current.setCustomValidity&&j.current.setCustomValidity(ee.valid?"":_===void 0?lt:_)},[_,ee]);t.useEffect(Ve),t.useEffect(()=>{const e=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver($e.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const ue=t.useCallback(e=>{if(!l){if(P){const a={...e};P.call(void 0,a)}d===void 0&&le(!0)}},[l,d,P]),I=t.useCallback(e=>{if(l){if(v){const a={...e};v.call(void 0,a)}d===void 0&&(le(!1),D&&setTimeout(()=>{var a;y((a=Y.current)==null?void 0:a.element)},300))}},[l,d,v,D]),Le=t.useCallback(e=>{if(!e.isDefaultPrevented()&&i.current){te(!0);const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};(l?I:ue)(a)}},[l,d,P,v]),q=t.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),Be=t.useCallback(e=>{var F,ke;const{keyCode:a,altKey:c}=e,m=k.current&&k.current.element;if(!i.current||e.isDefaultPrevented()&&((F=R.current)==null?void 0:F.element)===e.target)return;const K={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};if(l)if(a===r.Keys.esc||c&&a===r.Keys.up)e.preventDefault(),I(K);else if(m&&m.querySelector(".k-focus")&&(a===r.Keys.up||a===r.Keys.down||a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end)){if(a===r.Keys.up&&((ke=R.current)!=null&&ke.element)){const A=Array.from(m.querySelectorAll(".k-treeview-item")),Ce=[...A].reverse().find(z=>!!(z&&z.querySelector(".k-focus")));if(Ce&&A.indexOf(Ce)===0)return q(()=>{var z;y((z=R.current)==null?void 0:z.element)})}q(r.noop)}else a===r.Keys.down&&q(()=>{var A;y(((A=R.current)==null?void 0:A.element)||m)});else c&&a===r.Keys.down?(e.preventDefault(),ue(K)):l||a===r.Keys.esc&&me(e)},[l,d,P,v]),de=t.useCallback(e=>{const{keyCode:a,altKey:c}=e;c||a!==r.Keys.up&&a!==r.Keys.down||(e.preventDefault(),q(a===r.Keys.up?()=>{y(g.current)}:()=>{y(k.current&&k.current.element)}))},[]),y=t.useCallback(e=>{e&&q(()=>e.focus())},[]),We=t.useCallback(()=>{var e;!p&&l&&!d?I({target:i.current}):s.filterable?y((e=R.current)==null?void 0:e.element):y(k.current&&k.current.element)},[v,s.filterable,p,d,l]),Ae=t.useCallback(()=>{p&&y(g.current)},[p]),ze=t.useCallback(e=>{if(!p&&!$.current&&(te(!0),s.onFocus&&i.current)){const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};s.onFocus.call(void 0,a)}},[p,s.onFocus]),He=t.useCallback(e=>{if(p&&!$.current&&i.current){te(!1);const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};if(s.onBlur){const c={...a};s.onBlur.call(void 0,c)}D||I(a)}},[p,s.onBlur,l,d,v]),_e=t.useCallback(()=>{p&&q(r.noop),D&&setTimeout(()=>{var e;y((e=Y.current)==null?void 0:e.element)},300)},[p,D]),pe=t.useCallback((e,a,c)=>{if(s.onChange){const m={value:a,level:c?Ie(c):[],...e};s.onChange.call(void 0,m)}w||Ke(a)},[s.onChange,w]),fe=t.useCallback(e=>{if(U.areSame(e.item,b,T)||!i.current)return;const{item:a,itemHierarchicalIndex:c,nativeEvent:m,syntheticEvent:K}=e,F={syntheticEvent:K,nativeEvent:m,target:i.current};pe(F,a,c),I(F)},[w,b,s.onChange,T,l,d,v]),me=t.useCallback(e=>{if(!i.current)return;const a={syntheticEvent:e,nativeEvent:e.nativeEvent,target:i.current};pe(a,null),I(a),e.preventDefault()},[w,s.onChange,l,d,v]),ve=t.useCallback(e=>{if(e.syntheticEvent.stopPropagation(),s.onExpandChange&&i.current){const{item:a,itemHierarchicalIndex:c,nativeEvent:m,syntheticEvent:K}=e,F={level:Ie(c),item:a,nativeEvent:m,syntheticEvent:K,target:i.current};s.onExpandChange.call(void 0,F)}},[s.onExpandChange]),ge=t.useCallback(e=>{if(s.onFilterChange&&i.current){const c={filter:{field:s.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:i.current};s.onFilterChange.call(void 0,c),s.filter===void 0&&Oe(e.target.value)}},[s.onFilterChange,s.filter,s.textField]),je=()=>{const e=o.filterable?t.createElement(xe,{value:o.filter===void 0?ce:o.filter,ref:Y,onChange:ge,onKeyDown:de,size:C,rounded:B,fillMode:W}):null,a={adaptiveTitle:o.adaptiveTitle,expand:l,onClose:c=>I(c),windowWidth:ne,mobileFilter:e};return t.createElement(nt.AdaptiveMode,{...a},t.createElement(at.ActionSheetContent,{className:"!k-overflow-hidden"},t.createElement("div",{className:"k-list-container"},t.createElement("div",{className:"k-list k-list-lg"},M.length>0?t.createElement(we.TreeView,{ref:k,tabIndex:X,data:be,focusIdField:T,textField:o.textField,selectField:H,expandField:o.expandField,childrenField:V,expandIcons:!0,onItemClick:fe,onExpandChange:ve,size:C,item:o.item,dir:x,animate:E.animate}):t.createElement(ye,null,ae.toLanguageString(h.nodata,h.messages[h.nodata]))))))},$e=t.useCallback(e=>{for(const a of e)Pe(a.target.clientWidth)},[]),be=t.useMemo(()=>w||!L?M:r.mapTree(M,V,e=>r.extendDataItem(e,V,{[H]:U.areSame(e,b,T)})),[M,b,w,L,H,V]),ye=o.listNoData||Ze.ListNoData,Ue=o.valueHolder||ct,ae=Qe.useLocalization(),he=!qe||ee.valid,{size:C,rounded:B,fillMode:W}=o,Ee=t.createElement(t.Fragment,null,t.createElement("span",{className:r.classNames("k-dropdowntree k-picker",o.className,{[`k-picker-${st[C]||C}`]:C,[`k-rounded-${it[B]||B}`]:B,[`k-picker-${W}`]:W,"k-focus":p,"k-invalid":!he,"k-loading":o.loading,"k-required":Q,"k-disabled":o.disabled}),tabIndex:X,accessKey:o.accessKey,id:se,style:O?{...N,width:void 0}:N,dir:x,ref:g,onKeyDown:S?void 0:Be,onMouseDown:_e,onClick:S?void 0:Le,onFocus:ze,onBlur:He,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":S,"aria-label":O,"aria-labelledby":o.ariaLabelledBy,"aria-describedby":o.ariaDescribedBy,"aria-required":Q},t.createElement("span",{className:"k-input-inner"},(Z||J)&&t.createElement(Ue,{item:b},Z||J)),o.loading&&t.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),L&&!S&&t.createElement("span",{onClick:me,className:"k-clear-value",title:ae.toLanguageString(h.clear,h.messages[h.clear]),role:"button",tabIndex:-1,onMouseDown:e=>e.preventDefault()},t.createElement(r.IconWrap,{name:"x",icon:De.xIcon})),t.createElement(tt.Button,{tabIndex:-1,type:"button","aria-label":"select",className:"k-input-button",size:C,fillMode:W,themeColor:"base",rounded:null,icon:"caret-alt-down",svgIcon:De.caretAltDownIcon}),t.createElement("select",{name:Se,ref:j,tabIndex:-1,"aria-hidden":!0,title:O,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},t.createElement("option",{value:o.valueMap?o.valueMap.call(void 0,b):b})),!D&&t.createElement(Je.Popup,{...E,className:r.classNames(E.className,{"k-rtl":x==="rtl"}),popupClass:r.classNames(E.popupClass,"k-dropdowntree-popup k-list-container"),style:Te,anchor:E.anchor||g.current,show:l,onOpen:We,onClose:Ae},o.filterable&&t.createElement(xe,{value:o.filter===void 0?ce:o.filter,ref:R,onChange:ge,onKeyDown:de,size:C,rounded:B,fillMode:W,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),M.length>0?t.createElement(we.TreeView,{style:{height:E.height},ref:k,tabIndex:X,data:be,focusIdField:T,textField:o.textField,selectField:H,expandField:o.expandField,childrenField:V,expandIcons:!0,onItemClick:fe,onExpandChange:ve,size:C,item:o.item,dir:x,animate:E.animate}):t.createElement(ye,null,ae.toLanguageString(h.nodata,h.messages[h.nodata])))),D&&je());return O?t.createElement(et.FloatingLabel,{label:O,editorValue:Z,editorPlaceholder:J,editorValid:he,editorDisabled:S,editorId:se,style:{width:N?N.width:void 0},children:Ee,dir:x}):Ee}),dt={opened:n.bool,disabled:n.bool,dir:n.string,tabIndex:n.number,accessKey:n.string,data:n.array,value:n.any,valueMap:n.func,placeholder:n.string,dataItemKey:n.string.isRequired,textField:n.string.isRequired,selectField:n.string,expandField:n.string,subItemsField:n.string,className:n.string,style:n.object,label:n.string,validationMessage:n.string,validityStyles:n.bool,valid:n.bool,required:n.bool,name:n.string,id:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,filterable:n.bool,filter:n.string,loading:n.bool,popupSettings:n.shape({animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),popupClass:n.string,className:n.string,appendTo:n.any,width:n.oneOfType([n.string,n.number]),height:n.oneOfType([n.string,n.number])}),onOpen:n.func,onClose:n.func,onFocus:n.func,onBlur:n.func,onChange:n.func,onFilterChange:n.func,onExpandChange:n.func,item:n.func,valueHolder:n.func,listNoData:n.func,adaptiveTitle:n.string,adaptive:n.bool};re.displayName="KendoReactDropDownTree";re.propTypes=dt;exports.DropDownTree=re;exports.DropDownTreePropsContext=Fe;
|
|
@@ -341,7 +341,7 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
341
341
|
) : /* @__PURE__ */ t.createElement(ye, null, ae.toLanguageString(j, re[j]))))));
|
|
342
342
|
}, Je = t.useCallback(
|
|
343
343
|
(e) => {
|
|
344
|
-
for (
|
|
344
|
+
for (const a of e)
|
|
345
345
|
Be(a.target.clientWidth);
|
|
346
346
|
},
|
|
347
347
|
[]
|