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