@progress/kendo-react-dropdowns 9.2.0-develop.4 → 9.2.0-develop.6
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 +21 -20
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +145 -140
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +335 -332
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +192 -192
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +147 -146
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +143 -143
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +17 -17
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +18 -9
- package/index.d.ts +18 -9
- 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"),u=require("prop-types"),T=require("../common/SearchBar.js"),V=require("../common/ListContainer.js"),q=require("../common/List.js"),w=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),c=require("../common/utils.js"),l=require("@progress/kendo-react-common"),R=require("@progress/kendo-react-labels"),A=require("../package-metadata.js"),L=require("../common/ClearButton.js"),z=require("../common/AdaptiveMode.js"),F=require("../common/withCustomComponent.js"),H=require("@progress/kendo-react-layout"),W=require("../common/ListFilter.js");function j(C){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(C){for(const e in C)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(C,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>C[e]})}}return a.default=C,Object.freeze(a)}const g=j(B),G="Please enter a valid value!",{sizeMap:_,roundedMap:U}=l.kendoThemeMaps,I=class I extends g.Component{constructor(a){super(a),this.state={},this.base=new w(this),this._element=null,this._suggested="",this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const s=c.getFilteredData(this.props),i=c.getItemValue(s[e],this.props.textField);this.state.text&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.triggerOnChange(i,t)},this.itemFocus=(e,t)=>{const{textField:s}=this.props,o=c.getFilteredData(this.props)[e];c.areSame(this.state.focusedItem,o,s)||(t.data.focusedItem=o)},this.togglePopup=e=>{this.base.togglePopup(e)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||G)},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e}=this.props,{windowWidth:t=0}=this.state,s=g.createElement(W,{value:this.value,ref:o=>this._adaptiveInput=o&&o.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}),i={title:e,expand:this.opened,onClose:o=>this.onCancel(o),windowWidth:t,mobileFilter:s};return g.createElement(z.AdaptiveMode,{...i},g.createElement(H.ActionSheetContent,{overflowHidden:!0},g.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const s=this.state.text;c.isPresent(s)&&s!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.listContainerContent=()=>{const{header:e,footer:t,size:s,groupStickyHeaderItemRender:i,groupField:o,list:d}=this.props,r=c.getFilteredData(this.props);let{group:n}=this.state;return n===void 0&&o!==void 0&&(n=c.getItemValue(r[0],o)),g.createElement(g.Fragment,null,e&&g.createElement("div",{className:"k-list-header"},e),g.createElement("div",{className:l.classNames("k-list",{[`k-list-${this.mobileMode?"lg":_[s]||s}`]:s})},!d&&n&&r.length!==0&&g.createElement(N,{group:n,groupMode:"modern",render:i}),this.renderList()),t&&g.createElement("div",{className:"k-list-footer"},t))},this.onScroll=e=>{this._isScrolling=!0;const{list:t}=this.base,{groupField:s}=this.props;let i=c.getFilteredData(this.props);if(!s||!i.length)return;const o=this.itemHeight||(t?t.children[0].offsetHeight:0),r=e.target.scrollTop;s&&(i=this.base.getGroupedDataModernMode(i,s));let n=i[0][s];for(let p=1;p<i.length&&!(o*p>r);p++)i[p]&&i[p][s]&&(n=i[p][s]);n!==this.state.group&&this.setState({group:n})},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.onChangeHandler=e=>{const s=this.base.initState(),i=this.mobileMode?e.target.element:e.currentTarget,o=i.value,d=i.selectionEnd===o.length;s.syntheticEvent=e;const r=this._suggested,n=this.value,p=n&&n.substring(0,n.length-r.length),v=p&&p===o,m=p&&p.length>o.length,{suggest:y}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened;if(y!==void 0&&y!==!1){v||m||!d?this._suggested="":this.suggestValue(o);const f=o+this._suggested,b={userInput:o,value:this._suggested};this.triggerOnChange(f,s,{suggestion:b})}else this._suggested="",this.triggerOnChange(o,s);(!h&&o||h&&!o)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=e=>{const s=this.base.initState(),i=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=e;const o="";this._suggested="",this.triggerOnChange(o,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),i&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=e=>{const{skipDisabledItems:t,groupField:s,textField:i}=this.props,o=c.getFilteredData(this.props);this._isScrolling&&(this._isScrolling=!1);const d=this.focusedIndex(),r=o[d],n=e.keyCode,p=e.altKey,v=this.props.opened!==void 0?this.props.opened:this.state.opened,m=this.base.initState();m.syntheticEvent=e;const y=()=>{v&&e.preventDefault()};if(p&&n===l.Keys.down)this.setState({opened:!0});else if(p&&n===l.Keys.up)this.setState({opened:!1});else if(v&&n===l.Keys.pageUp)y(),this.base.scrollPopupByPageSize(-1);else if(v&&n===l.Keys.pageDown)y(),this.base.scrollPopupByPageSize(1);else if(v&&(n===l.Keys.enter||n===l.Keys.esc))y(),t===!1&&r&&r.disabled?(v&&this.togglePopup(m),this.applyState(m)):this.applyInputValue(e.currentTarget.value,m,e.keyCode);else if(!v&&n===l.Keys.esc){const h="";this._suggested="",this.triggerOnChange(h,m),this.state.focusedItem!==void 0&&(m.data.focusedItem=void 0),this.applyState(m)}else if(n===l.Keys.up||n===l.Keys.down){if(s!==""&&i)if(!this.props.skipDisabledItems&&v)this.onNavigate(m,n);else{let h=0;if(n===l.Keys.down||n===l.Keys.right){const f=o.slice(d+1).find(b=>!b.disabled&&b[i]);h=f&&o.findIndex(b=>b[i]===f[i])}else if(n===l.Keys.up||n===l.Keys.left){let f;if(d===-1)f=o,h=o.findIndex(b=>!b.disabled&&b[i]);else{f=o.slice(0,d);let b=f.pop();for(;b&&b.disabled;)b=f.pop();h=b&&o.findIndex(S=>S[i]===b[i])}}if(h!==void 0){const f=h-d;this.onNavigate(m,n,f)}else h===void 0&&o.findIndex(f=>f[i])===o.length-1&&this.onNavigate(m,n)}else if(!this.props.skipDisabledItems&&v)this.onNavigate(m,n);else{let h=null;if(n===l.Keys.down||n===l.Keys.right)h=o.slice(d+1).find(f=>!f.disabled);else if(n===l.Keys.up||n===l.Keys.left){const f=o.slice(0,d);for(h=f.pop();h&&h.disabled;)h=f.pop()}if(h){const f=h.id-d-1;this.onNavigate(m,n,f)}else this.onNavigate(m,n)}this.applyState(m),y()}},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{const t=this.base.initState();!this.state.focused||this._skipFocusEvent||(t.syntheticEvent=e,t.data.focused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),this.applyState(t))},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const s=this.base.initState();s.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(s.events.push({type:"onFocus"}),s.data.focused=!0),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300),this.base.togglePopup(s),this.applyState(s)},l.validatePackage(A.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get document(){if(l.canUseDOM)return this.element&&this.element.ownerDocument||document}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,e=!this.required||this.value!=="",t=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:t,valueMissing:this.value===null}}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=l.ADAPTIVE_MEDIUM_BREAKPOINT&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:I.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:I.defaultProps.required}componentDidUpdate(a,e){var y;const{groupField:t=""}=this.props,s=c.getFilteredData(this.props),{data:i=[]}=a,o=this.focusedIndex(),d=s[o],r=i!==s,n=d!==void 0&&e.focusedItem!==d,p=this.props.opened!==void 0?this.props.opened:this.state.opened,v=a.opened!==void 0?a.opened:e.opened,m=!v&&p;if(t==="")(p&&(n||r)||m)&&this.base.scrollToItem(o);else if(!this._isScrolling){const h=(y=this.base.getGroupedDataModernMode(s,t))==null?void 0:y.indexOf(d);m&&(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][t],this),this.base.scrollToItem(h)),p&&v&&n&&this.base.scrollToItem(h)}this.setValidity()}componentDidMount(){var a;this.observerResize=l.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}render(){const{dir:a,disabled:e,label:t,className:s,style:i,loading:o,suggest:d,size:r,rounded:n,fillMode:p}=this.props,v=!this.validityStyles||this.validity.valid,m=this.base,y=this.value,h=this.props.clearButton!==!1&&!o&&!!y,f=this.props.id||this._inputId,b=this.state.focused;typeof d=="string"&&(this._suggested=d);const[S,O]=F(this.props.prefix||g.Fragment),[P,K]=F(this.props.suffix||g.Fragment),k=g.createElement(g.Fragment,null,g.createElement("span",{className:l.classNames("k-autocomplete k-input",s,{[`k-input-${_[r]||r}`]:r,[`k-rounded-${U[n]||n}`]:n,[`k-input-${p}`]:p,"k-invalid":!v,"k-focus":b&&!e,"k-loading":o,"k-required":this.required,"k-disabled":e}),ref:D=>{this._element=D,m.wrapper=D},style:t?{...i,width:void 0}:i,dir:a,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick},this.props.prefix&&g.createElement(S,{...O}),this.renderSearchBar(y||"",f),o&&g.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),h&&!o&&g.createElement(L,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&g.createElement(P,{...K}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?g.createElement(R.FloatingLabel,{label:t,editorId:f,editorValue:y,editorValid:v,editorDisabled:e,style:{width:i?i.width:void 0},children:k}):k}onNavigate(a,e,t){const s=this.value,{textField:i,focusedItemIndex:o}=this.props,d=c.getFilteredData(this.props),r=this.state.focusedItem!==void 0?d.findIndex(p=>c.areSame(p,this.state.focusedItem,i)):o?o(d,s,i):d.indexOf(c.getFocusedItem(d,s,i)),n=this.base.navigation.navigate({keyCode:e,current:r,max:d.length-1,min:0,skipItems:t||void 0});n!==void 0&&this.itemFocus(n,a),this.applyState(a)}applyInputValue(a,e,t){const s=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:i}=this.props,o=c.getFilteredData(this.props),d=this.focusedIndex(),r=o[d];if(this._suggested="",s&&t===l.Keys.enter&&r&&!r.disabled){const n=c.getItemValue(o[this.focusedIndex(a)],i);this.triggerOnChange(n,e)}s&&this.togglePopup(e),this.applyState(e)}renderSearchBar(a,e){const t=this.base,{placeholder:s,tabIndex:i,disabled:o,readonly:d,inputAttributes:r}=this.props,{focused:n}=this.state,p=this.props.opened!==void 0?this.props.opened:this.state.opened;return g.createElement(T,{id:e,placeholder:s,tabIndex:i,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:n,name:this.props.name,ref:v=>this._input=v&&v.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:t.handleFocus,onBlur:this.handleBlur,disabled:o,readOnly:d,expanded:p,owns:t.listBoxId,activedescendant:"option-"+t.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender,inputAttributes:r})}renderListContainer(){const a=this.base,{dir:e,groupField:t}=this.props,s=c.getFilteredData(this.props),i=a.getPopupSettings(),o=this.props.opened!==void 0?this.props.opened:this.state.opened,d=i.width!==void 0?i.width:a.popupWidth;let{group:r}=this.state;return r===void 0&&t!==void 0&&(r=c.getItemValue(s[0],t)),g.createElement(V,{width:d,popupSettings:{...i,anchor:i.anchor||this.element,show:o,popupClass:l.classNames(i.popupClass,"k-list-container","k-autocomplete-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[s.length]},this.listContainerContent())}renderList(){const a=this.base,e=a.getPopupSettings(),{textField:t,listNoDataRender:s,itemRender:i,groupHeaderItemRender:o}=this.props,d=c.getFilteredData(this.props),r=this.value,n=this.props.opened!==void 0?this.props.opened:this.state.opened;return g.createElement(q,{id:a.listBoxId,show:n,data:d.slice(),focusedIndex:this.focusedIndex(),value:r,textField:t,valueField:t,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:p=>a.list=p,wrapperStyle:this.mobileMode?{}:{maxHeight:e.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:o,noDataRender:s,onMouseDown:p=>p.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,e,t){this.value===a&&!t||(e.data.value=a,this._valueDuringOnChange=a,e.events.push({type:"onChange",...t||{}}))}focusElement(a){this._skipFocusEvent=!0,a.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{textField:e}=this.props,t=c.getFilteredData(this.props),s=t[c.itemIndexStartsWith(t,a,e)];if(s){const i=c.getItemValue(s,e);a.toLowerCase()!==i.toLowerCase()&&(this._suggested=i.substring(a.length))}}}focusedIndex(a){const{textField:e,focusedItemIndex:t,skipDisabledItems:s}=this.props,i=c.getFilteredData(this.props),o=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return i.findIndex(r=>c.areSame(r,this.state.focusedItem,e));if(t)return t(i,o,e);const d=i.indexOf(c.getFocusedItem(i,o,e));return s&&e&&d===-1?i.findIndex(r=>!r.disabled&&r[e]):Math.max(0,d)}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};I.displayName="AutoComplete",I.propTypes={...w.basicPropTypes,size:u.oneOf([null,"small","medium","large"]),rounded:u.oneOf([null,"small","medium","large","full"]),fillMode:u.oneOf([null,"solid","flat","outline"]),groupField:u.string,suggest:u.oneOfType([u.bool,u.string]),placeholder:u.string,value:u.string,defaultValue:u.string,validationMessage:u.string,required:u.bool,readonly:u.bool,clearButton:u.bool,valueRender:u.func,id:u.string,ariaLabelledBy:u.string,ariaDescribedBy:u.string,list:u.any,adaptive:u.bool,adaptiveTitle:u.string,onCancel:u.func,skipDisabledItems:u.bool,inputAttributes:u.object},I.defaultProps={...w.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let x=I;const M=l.createPropsContext(),E=l.withIdHOC(l.withPropsContext(M,x));E.displayName="KendoReactAutoComplete";exports.AutoComplete=E;exports.AutoCompletePropsContext=M;exports.AutoCompleteWithoutContext=x;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),u=require("prop-types"),B=require("../common/SearchBar.js"),V=require("../common/ListContainer.js"),T=require("../common/List.js"),w=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),c=require("../common/utils.js"),l=require("@progress/kendo-react-common"),R=require("@progress/kendo-react-labels"),L=require("../package-metadata.js"),A=require("../common/ClearButton.js"),z=require("../common/AdaptiveMode.js"),D=require("../common/withCustomComponent.js"),H=require("@progress/kendo-react-layout"),W=require("../common/ListFilter.js");function j(C){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(C){for(const e in C)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(C,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>C[e]})}}return a.default=C,Object.freeze(a)}const g=j(q),G="Please enter a valid value!",{sizeMap:_,roundedMap:U}=l.kendoThemeMaps,I=class I extends g.Component{constructor(a){super(a),this.state={},this.base=new w(this),this._element=null,this._suggested="",this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._isScrolling=!1,this.itemHeight=0,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(e,t)=>{const s=c.getFilteredData(this.props),i=c.getItemValue(s[e],this.props.textField);this.state.text&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.triggerOnChange(i,t)},this.itemFocus=(e,t)=>{const{textField:s}=this.props,o=c.getFilteredData(this.props)[e];c.areSame(this.state.focusedItem,o,s)||(t.data.focusedItem=o)},this.togglePopup=e=>{this.base.togglePopup(e)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||G)},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e}=this.props,{windowWidth:t=0}=this.state,s=g.createElement(W,{value:this.value,ref:o=>this._adaptiveInput=o&&o.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}),i={title:e,expand:this.opened,onClose:o=>this.onCancel(o),windowWidth:t,mobileFilter:s};return g.createElement(z.AdaptiveMode,{...i},g.createElement(H.ActionSheetContent,{overflowHidden:!0},g.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const s=this.state.text;c.isPresent(s)&&s!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.listContainerContent=()=>{const{header:e,footer:t,size:s,groupStickyHeaderItemRender:i,groupField:o,list:d}=this.props,r=c.getFilteredData(this.props);let{group:n}=this.state;return n===void 0&&o!==void 0&&(n=c.getItemValue(r[0],o)),g.createElement(g.Fragment,null,e&&g.createElement("div",{className:"k-list-header"},e),g.createElement("div",{className:l.classNames("k-list",{[`k-list-${this.mobileMode?"lg":_[s]||s}`]:s})},!d&&n&&r.length!==0&&g.createElement(N,{group:n,groupMode:"modern",render:i}),this.renderList()),t&&g.createElement("div",{className:"k-list-footer"},t))},this.onScroll=e=>{this._isScrolling=!0;const{list:t}=this.base,{groupField:s}=this.props;let i=c.getFilteredData(this.props);if(!s||!i.length)return;const o=this.itemHeight||(t?t.children[0].offsetHeight:0),r=e.target.scrollTop;s&&(i=this.base.getGroupedDataModernMode(i,s));let n=i[0][s];for(let p=1;p<i.length&&!(o*p>r);p++)i[p]&&i[p][s]&&(n=i[p][s]);n!==this.state.group&&this.setState({group:n})},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.onChangeHandler=e=>{const s=this.base.initState(),i=this.mobileMode?e.target.element:e.currentTarget,o=i.value,d=i.selectionEnd===o.length;s.syntheticEvent=e;const r=this._suggested,n=this.value,p=n&&n.substring(0,n.length-r.length),v=p&&p===o,m=p&&p.length>o.length,{suggest:y}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened;if(y!==void 0&&y!==!1){v||m||!d?this._suggested="":this.suggestValue(o);const f=o+this._suggested,b={userInput:o,value:this._suggested};this.triggerOnChange(f,s,{suggestion:b})}else this._suggested="",this.triggerOnChange(o,s);(!h&&o||h&&!o)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=e=>{const s=this.base.initState(),i=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=e;const o="";this._suggested="",this.triggerOnChange(o,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),i&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=e=>{const{skipDisabledItems:t,groupField:s,textField:i}=this.props,o=c.getFilteredData(this.props);this._isScrolling&&(this._isScrolling=!1);const d=this.focusedIndex(),r=o[d],n=e.keyCode,p=e.altKey,v=this.props.opened!==void 0?this.props.opened:this.state.opened,m=this.base.initState();m.syntheticEvent=e;const y=()=>{v&&e.preventDefault()};if(p&&n===l.Keys.down)this.setState({opened:!0});else if(p&&n===l.Keys.up)this.setState({opened:!1});else if(v&&n===l.Keys.pageUp)y(),this.base.scrollPopupByPageSize(-1);else if(v&&n===l.Keys.pageDown)y(),this.base.scrollPopupByPageSize(1);else if(v&&(n===l.Keys.enter||n===l.Keys.esc))y(),t===!1&&r&&r.disabled?(v&&this.togglePopup(m),this.applyState(m)):this.applyInputValue(e.currentTarget.value,m,e.keyCode);else if(!v&&n===l.Keys.esc){const h="";this._suggested="",this.triggerOnChange(h,m),this.state.focusedItem!==void 0&&(m.data.focusedItem=void 0),this.applyState(m)}else if(n===l.Keys.up||n===l.Keys.down){if(s!==""&&i)if(!this.props.skipDisabledItems&&v)this.onNavigate(m,n);else{let h=0;if(n===l.Keys.down||n===l.Keys.right){const f=o.slice(d+1).find(b=>!b.disabled&&b[i]);h=f&&o.findIndex(b=>b[i]===f[i])}else if(n===l.Keys.up||n===l.Keys.left){let f;if(d===-1)f=o,h=o.findIndex(b=>!b.disabled&&b[i]);else{f=o.slice(0,d);let b=f.pop();for(;b&&b.disabled;)b=f.pop();h=b&&o.findIndex(S=>S[i]===b[i])}}if(h!==void 0){const f=h-d;this.onNavigate(m,n,f)}else h===void 0&&o.findIndex(f=>f[i])===o.length-1&&this.onNavigate(m,n)}else if(!this.props.skipDisabledItems&&v)this.onNavigate(m,n);else{let h=null;if(n===l.Keys.down||n===l.Keys.right)h=o.slice(d+1).find(f=>!f.disabled);else if(n===l.Keys.up||n===l.Keys.left){const f=o.slice(0,d);for(h=f.pop();h&&h.disabled;)h=f.pop()}if(h){const f=h.id-d-1;this.onNavigate(m,n,f)}else this.onNavigate(m,n)}this.applyState(m),y()}},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{const t=this.base.initState();!this.state.focused||this._skipFocusEvent||(t.syntheticEvent=e,t.data.focused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),this.applyState(t))},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const s=this.base.initState();s.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(s.events.push({type:"onFocus"}),s.data.focused=!0),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300),this.base.togglePopup(s),this.applyState(s)},l.validatePackage(L.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get document(){if(l.canUseDOM)return this.element&&this.element.ownerDocument||document}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,e=!this.required||this.value!=="",t=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:t,valueMissing:this.value===null}}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}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 validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:I.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:I.defaultProps.required}componentDidUpdate(a,e){var y;const{groupField:t=""}=this.props,s=c.getFilteredData(this.props),{data:i=[]}=a,o=this.focusedIndex(),d=s[o],r=i!==s,n=d!==void 0&&e.focusedItem!==d,p=this.props.opened!==void 0?this.props.opened:this.state.opened,v=a.opened!==void 0?a.opened:e.opened,m=!v&&p;if(t==="")(p&&(n||r)||m)&&this.base.scrollToItem(o);else if(!this._isScrolling){const h=(y=this.base.getGroupedDataModernMode(s,t))==null?void 0:y.indexOf(d);m&&(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][t],this),this.base.scrollToItem(h)),p&&v&&n&&this.base.scrollToItem(h)}this.setValidity()}componentDidMount(){var a;this.observerResize=l.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}render(){const{dir:a,disabled:e,label:t,className:s,style:i,loading:o,suggest:d,size:r,rounded:n,fillMode:p}=this.props,v=!this.validityStyles||this.validity.valid,m=this.base,y=this.value,h=this.props.clearButton!==!1&&!o&&!!y,f=this.props.id||this._inputId,b=this.state.focused;typeof d=="string"&&(this._suggested=d);const[S,O]=D(this.props.prefix||g.Fragment),[P,K]=D(this.props.suffix||g.Fragment),k=g.createElement(g.Fragment,null,g.createElement("span",{className:l.classNames("k-autocomplete k-input",s,{[`k-input-${_[r]||r}`]:r,[`k-rounded-${U[n]||n}`]:n,[`k-input-${p}`]:p,"k-invalid":!v,"k-focus":b&&!e,"k-loading":o,"k-required":this.required,"k-disabled":e}),ref:F=>{this._element=F,m.wrapper=F},style:t?{...i,width:void 0}:i,dir:a,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick},this.props.prefix&&g.createElement(S,{...O}),this.renderSearchBar(y||"",f),o&&g.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),h&&!o&&g.createElement(A,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&g.createElement(P,{...K}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?g.createElement(R.FloatingLabel,{label:t,editorId:f,editorValue:y,editorValid:v,editorDisabled:e,style:{width:i?i.width:void 0},children:k}):k}onNavigate(a,e,t){const s=this.value,{textField:i,focusedItemIndex:o}=this.props,d=c.getFilteredData(this.props),r=this.state.focusedItem!==void 0?d.findIndex(p=>c.areSame(p,this.state.focusedItem,i)):o?o(d,s,i):d.indexOf(c.getFocusedItem(d,s,i)),n=this.base.navigation.navigate({keyCode:e,current:r,max:d.length-1,min:0,skipItems:t||void 0});n!==void 0&&this.itemFocus(n,a),this.applyState(a)}applyInputValue(a,e,t){const s=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:i}=this.props,o=c.getFilteredData(this.props),d=this.focusedIndex(),r=o[d];if(this._suggested="",s&&t===l.Keys.enter&&r&&!r.disabled){const n=c.getItemValue(o[this.focusedIndex(a)],i);this.triggerOnChange(n,e)}s&&this.togglePopup(e),this.applyState(e)}renderSearchBar(a,e){const t=this.base,{placeholder:s,tabIndex:i,disabled:o,readonly:d,inputAttributes:r}=this.props,{focused:n}=this.state,p=this.props.opened!==void 0?this.props.opened:this.state.opened;return g.createElement(B,{id:e,placeholder:s,tabIndex:i,accessKey:this.props.accessKey,value:a,suggestedText:this._suggested,focused:n,name:this.props.name,ref:v=>this._input=v&&v.input,onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:t.handleFocus,onBlur:this.handleBlur,disabled:o,readOnly:d,expanded:p,owns:t.listBoxId,activedescendant:"option-"+t.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender,inputAttributes:r})}renderListContainer(){const a=this.base,{dir:e,groupField:t}=this.props,s=c.getFilteredData(this.props),i=a.getPopupSettings(),o=this.props.opened!==void 0?this.props.opened:this.state.opened,d=i.width!==void 0?i.width:a.popupWidth;let{group:r}=this.state;return r===void 0&&t!==void 0&&(r=c.getItemValue(s[0],t)),g.createElement(V,{width:d,popupSettings:{...i,anchor:i.anchor||this.element,show:o,popupClass:l.classNames(i.popupClass,"k-list-container","k-autocomplete-popup")},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[s.length]},this.listContainerContent())}renderList(){const a=this.base,e=a.getPopupSettings(),{textField:t,listNoDataRender:s,itemRender:i,groupHeaderItemRender:o}=this.props,d=c.getFilteredData(this.props),r=this.value,n=this.props.opened!==void 0?this.props.opened:this.state.opened;return g.createElement(T,{id:a.listBoxId,show:n,data:d.slice(),focusedIndex:this.focusedIndex(),value:r,textField:t,valueField:t,highlightSelected:!1,optionsGuid:a.guid,groupField:this.props.groupField,groupMode:"modern",listRef:p=>a.list=p,wrapperStyle:this.mobileMode?{}:{maxHeight:e.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:o,noDataRender:s,onMouseDown:p=>p.preventDefault(),onScroll:this.onScroll})}triggerOnChange(a,e,t){this.value===a&&!t||(e.data.value=a,this._valueDuringOnChange=a,e.events.push({type:"onChange",...t||{}}))}focusElement(a){this._skipFocusEvent=!0,a.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(a){this.base.applyState(a),this._valueDuringOnChange=void 0}suggestValue(a){if(this._suggested="",a){const{textField:e}=this.props,t=c.getFilteredData(this.props),s=t[c.itemIndexStartsWith(t,a,e)];if(s){const i=c.getItemValue(s,e);a.toLowerCase()!==i.toLowerCase()&&(this._suggested=i.substring(a.length))}}}focusedIndex(a){const{textField:e,focusedItemIndex:t,skipDisabledItems:s}=this.props,i=c.getFilteredData(this.props),o=a!==void 0?a:this.value;if(this.state.focusedItem!==void 0)return i.findIndex(r=>c.areSame(r,this.state.focusedItem,e));if(t)return t(i,o,e);const d=i.indexOf(c.getFocusedItem(i,o,e));return s&&e&&d===-1?i.findIndex(r=>!r.disabled&&r[e]):Math.max(0,d)}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};I.displayName="AutoComplete",I.propTypes={...w.basicPropTypes,size:u.oneOf([null,"small","medium","large"]),rounded:u.oneOf([null,"small","medium","large","full"]),fillMode:u.oneOf([null,"solid","flat","outline"]),groupField:u.string,suggest:u.oneOfType([u.bool,u.string]),placeholder:u.string,value:u.string,defaultValue:u.string,validationMessage:u.string,required:u.bool,readonly:u.bool,clearButton:u.bool,valueRender:u.func,id:u.string,ariaLabelledBy:u.string,ariaDescribedBy:u.string,list:u.any,adaptive:u.bool,adaptiveTitle:u.string,onCancel:u.func,skipDisabledItems:u.bool,inputAttributes:u.object},I.defaultProps={...w.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let x=I;const M=l.createPropsContext(),E=l.withIdHOC(l.withPropsContext(M,l.withAdaptiveModeContext(x)));E.displayName="KendoReactAutoComplete";exports.AutoComplete=E;exports.AutoCompletePropsContext=M;exports.AutoCompleteWithoutContext=x;
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
import * as h from "react";
|
|
10
10
|
import u from "prop-types";
|
|
11
11
|
import N from "../common/SearchBar.mjs";
|
|
12
|
-
import
|
|
13
|
-
import
|
|
12
|
+
import L from "../common/ListContainer.mjs";
|
|
13
|
+
import R from "../common/List.mjs";
|
|
14
14
|
import S from "../common/DropDownBase.mjs";
|
|
15
15
|
import z from "../common/GroupStickyHeader.mjs";
|
|
16
|
-
import { getFilteredData as I, getItemValue as x, areSame as w, isPresent as
|
|
17
|
-
import { classNames as k, Keys as m, validatePackage as K, canUseDOM as
|
|
16
|
+
import { getFilteredData as I, getItemValue as x, areSame as w, isPresent as H, getFocusedItem as D, itemIndexStartsWith as A } from "../common/utils.mjs";
|
|
17
|
+
import { classNames as k, Keys as m, validatePackage as K, canUseDOM as E, IconWrap as q, createPropsContext as W, withIdHOC as G, withPropsContext as U, withAdaptiveModeContext as $, kendoThemeMaps as j } from "@progress/kendo-react-common";
|
|
18
18
|
import { FloatingLabel as J } from "@progress/kendo-react-labels";
|
|
19
19
|
import { packageMetadata as Q } from "../package-metadata.mjs";
|
|
20
20
|
import X from "../common/ClearButton.mjs";
|
|
@@ -62,7 +62,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
62
62
|
const t = this.base.initState();
|
|
63
63
|
t.syntheticEvent = e, e.stopPropagation(), this.opened && this.base.togglePopup(t), t.events.push({ type: "onCancel" });
|
|
64
64
|
const s = this.state.text;
|
|
65
|
-
|
|
65
|
+
H(s) && s !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
|
|
66
66
|
}, this.listContainerContent = () => {
|
|
67
67
|
const { header: e, footer: t, size: s, groupStickyHeaderItemRender: i, groupField: o, list: d } = this.props, r = I(this.props);
|
|
68
68
|
let { group: n } = this.state;
|
|
@@ -195,7 +195,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
195
195
|
return this.props.id + "-accessibility-id";
|
|
196
196
|
}
|
|
197
197
|
get document() {
|
|
198
|
-
if (
|
|
198
|
+
if (E)
|
|
199
199
|
return this.element && this.element.ownerDocument || document;
|
|
200
200
|
}
|
|
201
201
|
/**
|
|
@@ -232,10 +232,11 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
232
232
|
return !!(this.props.opened !== void 0 ? this.props.opened : this.state.opened);
|
|
233
233
|
}
|
|
234
234
|
/**
|
|
235
|
-
* The mobile mode of the
|
|
235
|
+
* The mobile mode of the AutoComplete.
|
|
236
236
|
*/
|
|
237
237
|
get mobileMode() {
|
|
238
|
-
|
|
238
|
+
var e;
|
|
239
|
+
return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
|
|
239
240
|
}
|
|
240
241
|
/**
|
|
241
242
|
* @hidden
|
|
@@ -268,7 +269,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
268
269
|
*/
|
|
269
270
|
componentDidMount() {
|
|
270
271
|
var a;
|
|
271
|
-
this.observerResize =
|
|
272
|
+
this.observerResize = E && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
|
|
272
273
|
}
|
|
273
274
|
/**
|
|
274
275
|
* @hidden
|
|
@@ -289,8 +290,8 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
289
290
|
"k-required": this.required,
|
|
290
291
|
"k-disabled": e
|
|
291
292
|
}),
|
|
292
|
-
ref: (
|
|
293
|
-
this._element =
|
|
293
|
+
ref: (M) => {
|
|
294
|
+
this._element = M, g.wrapper = M;
|
|
294
295
|
},
|
|
295
296
|
style: t ? { ...i, width: void 0 } : i,
|
|
296
297
|
dir: a,
|
|
@@ -300,7 +301,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
300
301
|
},
|
|
301
302
|
this.props.prefix && /* @__PURE__ */ h.createElement(C, { ...B }),
|
|
302
303
|
this.renderSearchBar(b || "", c),
|
|
303
|
-
o && /* @__PURE__ */ h.createElement(
|
|
304
|
+
o && /* @__PURE__ */ h.createElement(q, { className: "k-input-loading-icon", name: "loading" }),
|
|
304
305
|
l && !o && /* @__PURE__ */ h.createElement(X, { onClick: this.clearButtonClick, key: "clearbutton" }),
|
|
305
306
|
this.props.suffix && /* @__PURE__ */ h.createElement(T, { ...V }),
|
|
306
307
|
!this.mobileMode && this.renderListContainer()
|
|
@@ -322,7 +323,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
322
323
|
* @hidden
|
|
323
324
|
*/
|
|
324
325
|
onNavigate(a, e, t) {
|
|
325
|
-
const s = this.value, { textField: i, focusedItemIndex: o } = this.props, d = I(this.props), r = this.state.focusedItem !== void 0 ? d.findIndex((p) => w(p, this.state.focusedItem, i)) : o ? o(d, s, i) : d.indexOf(
|
|
326
|
+
const s = this.value, { textField: i, focusedItemIndex: o } = this.props, d = I(this.props), r = this.state.focusedItem !== void 0 ? d.findIndex((p) => w(p, this.state.focusedItem, i)) : o ? o(d, s, i) : d.indexOf(D(d, s, i)), n = this.base.navigation.navigate({
|
|
326
327
|
keyCode: e,
|
|
327
328
|
current: r,
|
|
328
329
|
max: d.length - 1,
|
|
@@ -378,7 +379,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
378
379
|
const a = this.base, { dir: e, groupField: t } = this.props, s = I(this.props), i = a.getPopupSettings(), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = i.width !== void 0 ? i.width : a.popupWidth;
|
|
379
380
|
let { group: r } = this.state;
|
|
380
381
|
return r === void 0 && t !== void 0 && (r = x(s[0], t)), /* @__PURE__ */ h.createElement(
|
|
381
|
-
|
|
382
|
+
L,
|
|
382
383
|
{
|
|
383
384
|
width: d,
|
|
384
385
|
popupSettings: {
|
|
@@ -396,7 +397,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
396
397
|
renderList() {
|
|
397
398
|
const a = this.base, e = a.getPopupSettings(), { textField: t, listNoDataRender: s, itemRender: i, groupHeaderItemRender: o } = this.props, d = I(this.props), r = this.value, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
|
|
398
399
|
return /* @__PURE__ */ h.createElement(
|
|
399
|
-
|
|
400
|
+
R,
|
|
400
401
|
{
|
|
401
402
|
id: a.listBoxId,
|
|
402
403
|
show: n,
|
|
@@ -432,7 +433,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
432
433
|
}
|
|
433
434
|
suggestValue(a) {
|
|
434
435
|
if (this._suggested = "", a) {
|
|
435
|
-
const { textField: e } = this.props, t = I(this.props), s = t[
|
|
436
|
+
const { textField: e } = this.props, t = I(this.props), s = t[A(t, a, e)];
|
|
436
437
|
if (s) {
|
|
437
438
|
const i = x(s, e);
|
|
438
439
|
a.toLowerCase() !== i.toLowerCase() && (this._suggested = i.substring(a.length));
|
|
@@ -445,7 +446,7 @@ const te = "Please enter a valid value!", { sizeMap: O, roundedMap: se } = j, y
|
|
|
445
446
|
return i.findIndex((r) => w(r, this.state.focusedItem, e));
|
|
446
447
|
if (t)
|
|
447
448
|
return t(i, o, e);
|
|
448
|
-
const d = i.indexOf(
|
|
449
|
+
const d = i.indexOf(D(i, o, e));
|
|
449
450
|
return s && e && d === -1 ? i.findIndex((r) => !r.disabled && r[e]) : Math.max(0, d);
|
|
450
451
|
}
|
|
451
452
|
calculateMedia(a) {
|
|
@@ -487,10 +488,10 @@ y.displayName = "AutoComplete", y.propTypes = {
|
|
|
487
488
|
suffix: void 0
|
|
488
489
|
};
|
|
489
490
|
let _ = y;
|
|
490
|
-
const ie =
|
|
491
|
-
|
|
491
|
+
const ie = W(), oe = G(
|
|
492
|
+
U(
|
|
492
493
|
ie,
|
|
493
|
-
_
|
|
494
|
+
$(_)
|
|
494
495
|
)
|
|
495
496
|
);
|
|
496
497
|
oe.displayName = "KendoReactAutoComplete";
|
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 Q=require("react"),b=require("prop-types"),V=require("../common/DropDownBase.js"),i=require("@progress/kendo-react-common"),X=require("@progress/kendo-react-labels"),h=require("../common/utils.js"),Z=require("../common/SearchBar.js"),ee=require("../common/ListContainer.js"),te=require("../common/List.js"),se=require("../common/ListFilter.js"),_=require("../common/GroupStickyHeader.js"),ie=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),K=require("@progress/kendo-react-buttons"),R=require("@progress/kendo-svg-icons"),B=require("../messages/index.js"),L=require("@progress/kendo-react-intl"),N=require("@progress/kendo-react-layout"),q=require("../common/withCustomComponent.js");function ae(F){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(F){for(const e in F)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(F,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>F[e]})}}return s.default=F,Object.freeze(s)}const g=ae(Q),ne="Please enter a valid value!",S=class S extends g.Component{constructor(s){super(s),this.state={},this.base=new V(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=h.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{virtual:o,dataItemKey:l}=this.props,d=h.getFilteredData(this.props),n=o?o.skip:0,p=d[e-n],r=this.hasDuplicates||!h.areSame(p,this.value,l);this.triggerOnChange(p,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(p,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{skipDisabledItems:t,textField:o}=this.props,l=h.getFilteredData(this.props),d=this.getFocusedIndex(),n=this.getCurrentValueDisabledStatus(o,l,d),p=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!t&&o&&n&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!p&&this.mobileMode){const a=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(a,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=h.getItemValue(this.value,this.props.textField),o=h.isPresent(e)?e:t;return g.createElement(se,{value:o,ref:l=>this._adaptiveFilterInput=l&&l.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:l}=this.props;let d=h.getFilteredData(this.props);if(!l||!d.length)return;const n=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*n;this.props.groupMode==="modern"&&(d=this.base.getGroupedDataModernMode(d,l));let a=d[0][l];for(let m=1;m<d.length&&!(n*m>r);m++)d[m]&&d[m][l]&&(a=d[m][l]);a!==this.state.group&&(this.setState({group:a}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:a}))},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}=this.props,l=h.getFilteredData(this.props),d=this.getFocusedIndex(),p=!(d===-1)&&this.getCurrentValueDisabledStatus(o,l,d);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&p&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const l=this.base.initState();l.syntheticEvent=e,this.base.togglePopup(l),this.base.filterChanged(o,l),this.applyState(l)}},this.onInputKeyDown=e=>{const{skipDisabledItems:t,textField:o,dataItemKey:l,groupField:d}=this.props,n=h.getFilteredData(this.props),p=this.value,r=Math.max(0,n.findIndex(u=>h.areSame(u,p,l))),a=e.keyCode,m=this.props.opened!==void 0?this.props.opened:this.state.opened,c=this.base.initState();if(c.syntheticEvent=e,!e.altKey&&(a===i.Keys.up||a===i.Keys.down)){if(e.preventDefault(),d!==""&&o)if(!this.props.skipDisabledItems&&m)this.onNavigate(c,a);else{let u=0;if(a===i.Keys.down||a===i.Keys.right){const v=n.slice(r+1<n.length?r+1:r).find(I=>!I.disabled&&I[o]);u=v&&n.findIndex(I=>I[o]===v[o])}else if(a===i.Keys.up||a===i.Keys.left){let v;if(r===0)v=n,u=n.findIndex(I=>!I.disabled&&I[o]);else{v=n.slice(0,r);let I=v.pop();for(;I&&I.disabled;)I=v.pop();u=I&&n.findIndex(D=>D[o]===I[o])}}if(u!==void 0){const v=u-r;this.onNavigate(c,a,v)}else u===void 0&&n.findIndex(v=>v[o]===p[o])===n.length-1&&this.onNavigate(c,a)}else if(!this.props.skipDisabledItems&&m)this.onNavigate(c,a);else{let u=null;if(a===i.Keys.down||a===i.Keys.right)u=n.slice(r+1).find(v=>!v.disabled);else if(a===i.Keys.up||a===i.Keys.left){const v=n.slice(0,r);for(u=v.pop();u&&u.disabled;)u=v.pop()}if(u){const v=u.id-r-1;this.onNavigate(c,a,v)}else this.onNavigate(c,a)}this.applyState(c)}const C=()=>{e.preventDefault(),this.base.togglePopup(c),this.applyState(c)},y=this.getFocusedIndex(),x=y===-1,f=!x&&this.getCurrentValueDisabledStatus(o,n,y);m?a===i.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):a===i.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&a===i.Keys.up?C():a===i.Keys.enter?(e.preventDefault(),(o&&!x&&e.currentTarget.value?n[y][o]:void 0)?!t&&o&&f?this.clearValueOnEnterOrEsc(e):f||this.applyValueOnEnter(e.currentTarget.value,c):this.applyValueOnEnter(e.currentTarget.value,c)):a===i.Keys.esc&&(!t&&o&&f&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,c)):!m&&a===i.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&a===i.Keys.down&&C()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.currentTarget,d=l.value;if(this.props.suggest){const n=l.selectionEnd===d.length;let p=this.props.filter!==void 0?this.props.filter:this.state.text;h.isPresent(p)||(p=h.getItemValue(this.value,this.props.textField)||"");const r=p&&p===d,a=p&&p.length>d.length;r||a||!n?this._suggested="":this.suggestValue(d)}this.props.filter===void 0&&(t.data.text=d),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(d,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ne)},i.validatePackage(ie.packageMetadata)}get _inputId(){return this.props.id}get document(){if(i.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=i.ADAPTIVE_MEDIUM_BREAKPOINT&&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=h.getFilteredData(this.props),t=this.value;return e.findIndex(o=>h.areSame(o,t,s))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:S.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:S.defaultProps.required}componentDidUpdate(s,e){var C;const{dataItemKey:t,virtual:o,groupField:l="",textField:d}=this.props,n=h.getFilteredData(this.props),p=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,a=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const m=!a&&r,c=this.value;if(this._valueOnDidUpdate=c,this.base.didUpdate(),o&&o.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let x=this.hasDuplicates?this.navigationIndex||0:n.findIndex(u=>h.areSame(u,c,t));this.props.groupMode==="modern"&&d&&c&&(x=(C=this.base.getGroupedDataModernMode(n,l))==null?void 0:C.map(u=>u[d]).indexOf(c[d]));const f=!h.areSame(y,c,t);m&&o?this.base.scrollToVirtualItem(o,x):m&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][l],this),this.base.scrollToItem(x)):(this.hasDuplicates||r&&a&&c&&f)&&this.base.scrollToItem(x)}m&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=i.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=L.provideLocalizationService(this).toLanguageString(B.comboArrowBtnAriaLabelExpand,B.messages[B.comboArrowBtnAriaLabelExpand]),e=L.provideLocalizationService(this).toLanguageString(B.comboArrowBtnAriaLabelCollapse,B.messages[B.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:o,clearButton:l=S.defaultProps.clearButton,label:d,textField:n,className:p,style:r,loading:a,iconClassName:m,virtual:c,size:C,rounded:y,fillMode:x,opened:f=this.state.opened,placeholder:u,svgIcon:v,unstyled:I}=this.props,D=!this.validityStyles||this.validity.valid,w=this.props.filter!==void 0?this.props.filter:this.state.text,U=h.getItemValue(this.value,n),M=h.isPresent(w)?w:U,W=l&&(!!M||h.isPresent(this.value)),E=this.base.vs,P=this.props.id||this._inputId,A=this.mobileMode,O=I&&I.uComboBox;E.enabled=c!==void 0,c!==void 0&&(E.skip=c.skip,E.total=c.total,E.pageSize=c.pageSize);const[j,G]=q(this.props.prefix||g.Fragment),[$,Y]=q(this.props.suffix||g.Fragment),T=g.createElement(g.Fragment,null,g.createElement("span",{className:i.classNames(i.uComboBox.wrapper({c:O,size:C,rounded:y,fillMode:x,disabled:o,invalid:!D,loading:a,required:this.required}),p),ref:this.componentRef,style:d?{...r,width:void 0}:r,dir:t},this.props.prefix&&g.createElement(j,{...G}),this.renderSearchBar(M||"",P,u),W&&!a&&g.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),a&&g.createElement(i.IconWrap,{className:i.classNames(i.uComboBox.loadingIcon({c:O})),name:"loading",key:"loading"}),this.props.suffix&&g.createElement($,{...Y}),g.createElement(K.Button,{tabIndex:-1,type:"button","aria-label":f?e:s,icon:m?void 0:"caret-alt-down",svgIcon:v||R.caretAltDownIcon,iconClass:m,size:C,fillMode:x,rounded:null,themeColor:"base",className:i.classNames(i.uComboBox.inputButton({c:O})),onClick:this.toggleBtnClick,onMouseDown:J=>J.preventDefault()}),!A&&this.renderListContainer()),A&&this.renderAdaptiveListContainer());return d?g.createElement(X.FloatingLabel,{label:d,editorId:P,editorValue:M,editorValid:D,editorDisabled:o,style:{width:r?r.width:void 0},children:T,unstyled:I}):T}onNavigate(s,e,t){const{virtual:o={skip:0}}=this.props,l=h.getFilteredData(this.props),d=this.props.filter?this.props.filter:this.state.text;let n=-1,p;const r=this.base.vs,a=this.value;this._suggested="";const m=this.hasDuplicates&&this.duplicates.indexOf(a)!==-1;if(n=this.getFocusedIndex(m),n!==-1&&!h.isPresent(a))this.handleItemSelect(n,s);else if(d==="")this.handleItemSelect(0,s);else{const c=o.skip+n;p=this.base.navigation.navigate({keyCode:e,current:c,max:(r.enabled?r.total:l.length)-1,min:0,skipItems:t||void 0}),p!==void 0&&this.handleItemSelect(p,s)}this.navigationIndex=p}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{textField:t,allowCustom:o}=this.props,l=h.getFilteredData(this.props),d=this.props.opened!==void 0?this.props.opened:this.state.opened,p=h.getItemValue(this.value,t)===s?this.index:h.getItemIndexByText(l,s,t),r=p!==-1;let a;if(this._suggested="",r)a=l[p];else if(o)a=t!==void 0?{[t]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(a,e),d&&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:o}=this.props,l=h.getFilteredData(this.props),d=this.props.opened!==void 0?this.props.opened:this.state.opened,n=h.getItemValue(this.value,t);if(this._suggested="",s===n||s===""&&!h.isPresent(n))return this.closeOpenedApplyStateNonMobileMode(e,d),this.applyState(e);const p=h.getItemIndexByText(l,s,t,!0),r=p!==-1;let a=null;r?a=l[p]:o&&(a=s?t?{[t]:s}:s:null),this.triggerOnChange(a,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,d),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:o,virtual:l={skip:0},focusedItemIndex:d=h.itemIndexStartsWith}=this.props,n=h.getFilteredData(this.props),p=l.skip,r=s===""&&p===0?0:d(n,s,o);return r!==-1?this.handleItemSelect(r+p,e):(this.triggerOnChange(null,e),this.state.text!==void 0&&(e.data.text=void 0)),t&&this.base.togglePopup(e),this.applyState(e)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:o,groupField:l,groupMode:d,list:n,virtual:p,adaptiveTitle:r,groupStickyHeaderItemRender:a,unstyled:m}=this.props,c=h.getFilteredData(this.props),C=this.props.opened!==void 0?this.props.opened:this.state.opened,y=this.base.getAdaptiveAnimation(),x=m&&m.uComboBox,f=m&&m.uDropDownsActionSheet;let{group:u}=this.state;u===void 0&&l!==void 0&&(u=h.getItemValue(c[0],l));const v={navigatable:!1,navigatableElements:[],expand:C,animation:y,onClose:I=>this.toggleBtnClick(I),animationStyles:s<=i.ADAPTIVE_SMALL_BREAKPOINT?{top:0,width:"100%",height:"100%"}:void 0,className:i.classNames(i.uDropDownsActionSheet.wrapper({c:f,isFullScreen:s<=i.ADAPTIVE_SMALL_BREAKPOINT}))};return g.createElement(N.ActionSheet,{...v},g.createElement(N.ActionSheetHeader,null,g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.titleBar({c:f}))},g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.title({c:f}))},g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.header({c:f}))},r),g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.subtitle({c:f}))})),g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.actions({c:f}))},g.createElement(K.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:R.xIcon}))),g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.titleBarGroup({c:f}))},this.renderMobileListFilter())),g.createElement(N.ActionSheetContent,{overflowHidden:!0},g.createElement("div",{className:i.classNames(i.uComboBox.listContainer({c:x}))},g.createElement("div",{className:i.classNames(i.uComboBox.list({c:x,list:n,size:"large",tableSize:o,virtual:p}))},e&&g.createElement("div",{className:i.classNames(i.uComboBox.listHeader({c:x}))},e),!n&&u&&c.length!==0&&g.createElement(_,{group:u,groupMode:d,render:a}),this.renderList(),t&&g.createElement("div",{className:i.classNames(i.uComboBox.listFooter({c:x}),this.props.footerClassName)},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,groupField:l,groupMode:d,size:n,list:p,virtual:r,groupStickyHeaderItemRender:a,unstyled:m}=this.props,c=h.getFilteredData(this.props),C=this.props.opened!==void 0?this.props.opened:this.state.opened,y=s.getPopupSettings(),x=y.width!==void 0?y.width:s.popupWidth,f=m&&m.uComboBox;let{group:u}=this.state;return u===void 0&&l!==void 0&&(u=h.getItemValue(c[0],l)),g.createElement(ee,{width:x,popupSettings:{...y,anchor:y.anchor||this.element,show:C,popupClass:i.classNames(y.popupClass,i.uComboBox.listContainer({c:f,popup:!0}))},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[c.length]},g.createElement("div",{className:i.classNames(i.uComboBox.list({c:f,list:p,size:n,tableSize:n,virtual:r}))},t&&g.createElement("div",{className:i.classNames(i.uComboBox.listHeader({c:f}))},t),!p&&u&&c.length!==0&&g.createElement(_,{group:u,groupMode:d,render:a}),this.renderList(),o&&g.createElement("div",{className:i.classNames(i.uComboBox.listFooter({c:f}),this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:l,groupHeaderItemRender:d,virtual:n={skip:0,total:void 0},unstyled:p}=this.props,r=h.getFilteredData(this.props),a=s.getPopupSettings(),m=s.vs,c=n.skip,C=this.props.opened!==void 0?this.props.opened:this.state.opened,y=`translateY(${m.translate}px)`,x=C?this.getFocusedIndex(this.hasDuplicates):void 0,f=this.props.filter!==void 0?this.props.filter:this.state.text,u=h.getItemValue(this.value,e),v=h.isPresent(f)&&f!==u?null:this.value,I=this.props.list||te,D=p&&p.uComboBox;return g.createElement(I,{id:s.listBoxId,virtual:!!n,show:C,data:r,focusedIndex:x,value:v,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:w=>{m.list=this.base.list=w,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.state.windowWidth>i.ADAPTIVE_MEDIUM_BREAKPOINT?{maxHeight:a.height}:{},wrapperCssClass:i.classNames(i.uComboBox.listContent({c:D,virtual:n})),listStyle:m.enabled?{transform:y}:void 0,key:"listkey",skip:c,onClick:this.handleItemClick,itemRender:l,groupHeaderItemRender:d,noDataRender:o,onMouseDown:w=>w.preventDefault(),onScroll:this.onScroll,wrapperRef:m.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:n.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:l,title:d,ariaLabelledBy:n,ariaDescribedBy:p,dataItemKey:r,virtual:a={skip:0},accessKey:m,unstyled:c,inputAttributes:C}=this.props,y=h.getFilteredData(this.props),x=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.value,u=Math.max(0,y.findIndex(v=>h.areSame(v,f,r)));return this._suggested&&!h.areSame(this._valueOnDidUpdate,f,r)&&(this._suggested=""),g.createElement(Z,{id:e,readOnly:x&&this.mobileMode,placeholder:t,tabIndex:o,title:d,value:s+this._suggested,suggestedText:this._suggested,ref:v=>this._input=v&&v.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:l,expanded:x,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${u+a.skip}`,role:"combobox",ariaLabelledBy:n,ariaLabel:this.props.ariaLabel,ariaDescribedBy:p,ariaRequired:this.required,render:this.props.valueRender,ariaControls:this.base.listBoxId,unstyled:c,inputAttributes:C})}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&&(!h.isPresent(t)&&!h.isPresent(s)||h.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:o,virtual:l={skip:0},focusedItemIndex:d=h.itemIndexStartsWith,skipDisabledItems:n}=this.props,p=h.getFilteredData(this.props),r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:h.isPresent(e)&&r===void 0?p.findIndex(a=>h.areSame(a,e,o)):r?d(p,r,t):n&&t&&!r&&l.skip===0?p.findIndex(a=>!a.disabled&&a[t]):l.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=h.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={...V.propTypes,size:b.oneOf([null,"small","medium","large"]),rounded:b.oneOf([null,"small","medium","large","full"]),fillMode:b.oneOf([null,"solid","flat","outline"]),dataItemKey:b.string,groupField:b.string,groupMode:b.oneOf([void 0,"classic","modern"]),isMultiColumn:b.bool,suggest:b.bool,placeholder:b.string,title:b.string,allowCustom:b.bool,clearButton:b.bool,iconClassName:b.string,svgIcon:i.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},S.defaultProps={...V.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 k=S;const z=i.createPropsContext(),H=i.withIdHOC(i.withPropsContext(z,i.withUnstyledHOC(k)));H.displayName="KendoReactComboBox";exports.ComboBox=H;exports.ComboBoxPropsContext=z;exports.ComboBoxWithoutContext=k;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react"),b=require("prop-types"),V=require("../common/DropDownBase.js"),i=require("@progress/kendo-react-common"),X=require("@progress/kendo-react-labels"),h=require("../common/utils.js"),Z=require("../common/SearchBar.js"),ee=require("../common/ListContainer.js"),te=require("../common/List.js"),se=require("../common/ListFilter.js"),A=require("../common/GroupStickyHeader.js"),ie=require("../package-metadata.js"),oe=require("../common/ClearButton.js"),K=require("@progress/kendo-react-buttons"),R=require("@progress/kendo-svg-icons"),k=require("../messages/index.js"),L=require("@progress/kendo-react-intl"),N=require("@progress/kendo-react-layout"),q=require("../common/withCustomComponent.js");function ae(F){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(F){for(const e in F)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(F,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>F[e]})}}return s.default=F,Object.freeze(s)}const g=ae(Q),ne="Please enter a valid value!",D=class D extends g.Component{constructor(s){super(s),this.state={},this.base=new V(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=h.getPlainDataDuplicates(o),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{virtual:o,dataItemKey:l}=this.props,d=h.getFilteredData(this.props),n=o?o.skip:0,p=d[e-n],r=this.hasDuplicates||!h.areSame(p,this.value,l);this.triggerOnChange(p,t),this.state.text!==void 0&&(t.data.text=void 0),r&&this.base.triggerPageChangeCornerItems(p,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{const{skipDisabledItems:t,textField:o}=this.props,l=h.getFilteredData(this.props),d=this.getFocusedIndex(),n=this.getCurrentValueDisabledStatus(o,l,d),p=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.initState();if(r.syntheticEvent=e,!t&&o&&n&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(r),!p&&this.mobileMode){const a=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(a,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=h.getItemValue(this.value,this.props.textField),o=h.isPresent(e)?e:t;return g.createElement(se,{value:o,ref:l=>this._adaptiveFilterInput=l&&l.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:l}=this.props;let d=h.getFilteredData(this.props);if(!l||!d.length)return;const n=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:o?o.children[0].offsetHeight:0),r=e.target.scrollTop-t.skip*n;this.props.groupMode==="modern"&&(d=this.base.getGroupedDataModernMode(d,l));let a=d[0][l];for(let m=1;m<d.length&&!(n*m>r);m++)d[m]&&d[m][l]&&(a=d[m][l]);a!==this.state.group&&(this.setState({group:a}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:a}))},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}=this.props,l=h.getFilteredData(this.props),d=this.getFocusedIndex(),p=!(d===-1)&&this.getCurrentValueDisabledStatus(o,l,d);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,o&&p&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const l=this.base.initState();l.syntheticEvent=e,this.base.togglePopup(l),this.base.filterChanged(o,l),this.applyState(l)}},this.onInputKeyDown=e=>{const{skipDisabledItems:t,textField:o,dataItemKey:l,groupField:d}=this.props,n=h.getFilteredData(this.props),p=this.value,r=Math.max(0,n.findIndex(u=>h.areSame(u,p,l))),a=e.keyCode,m=this.props.opened!==void 0?this.props.opened:this.state.opened,c=this.base.initState();if(c.syntheticEvent=e,!e.altKey&&(a===i.Keys.up||a===i.Keys.down)){if(e.preventDefault(),d!==""&&o)if(!this.props.skipDisabledItems&&m)this.onNavigate(c,a);else{let u=0;if(a===i.Keys.down||a===i.Keys.right){const v=n.slice(r+1<n.length?r+1:r).find(x=>!x.disabled&&x[o]);u=v&&n.findIndex(x=>x[o]===v[o])}else if(a===i.Keys.up||a===i.Keys.left){let v;if(r===0)v=n,u=n.findIndex(x=>!x.disabled&&x[o]);else{v=n.slice(0,r);let x=v.pop();for(;x&&x.disabled;)x=v.pop();u=x&&n.findIndex(S=>S[o]===x[o])}}if(u!==void 0){const v=u-r;this.onNavigate(c,a,v)}else u===void 0&&n.findIndex(v=>v[o]===p[o])===n.length-1&&this.onNavigate(c,a)}else if(!this.props.skipDisabledItems&&m)this.onNavigate(c,a);else{let u=null;if(a===i.Keys.down||a===i.Keys.right)u=n.slice(r+1).find(v=>!v.disabled);else if(a===i.Keys.up||a===i.Keys.left){const v=n.slice(0,r);for(u=v.pop();u&&u.disabled;)u=v.pop()}if(u){const v=u.id-r-1;this.onNavigate(c,a,v)}else this.onNavigate(c,a)}this.applyState(c)}const C=()=>{e.preventDefault(),this.base.togglePopup(c),this.applyState(c)},y=this.getFocusedIndex(),I=y===-1,f=!I&&this.getCurrentValueDisabledStatus(o,n,y);m?a===i.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):a===i.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&a===i.Keys.up?C():a===i.Keys.enter?(e.preventDefault(),(o&&!I&&e.currentTarget.value?n[y][o]:void 0)?!t&&o&&f?this.clearValueOnEnterOrEsc(e):f||this.applyValueOnEnter(e.currentTarget.value,c):this.applyValueOnEnter(e.currentTarget.value,c)):a===i.Keys.esc&&(!t&&o&&f&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,c)):!m&&a===i.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&a===i.Keys.down&&C()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const o=this.props.opened!==void 0?this.props.opened:this.state.opened,l=e.currentTarget,d=l.value;if(this.props.suggest){const n=l.selectionEnd===d.length;let p=this.props.filter!==void 0?this.props.filter:this.state.text;h.isPresent(p)||(p=h.getItemValue(this.value,this.props.textField)||"");const r=p&&p===d,a=p&&p.length>d.length;r||a||!n?this._suggested="":this.suggestValue(d)}this.props.filter===void 0&&(t.data.text=d),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),o||this.base.togglePopup(t),this.base.filterChanged(d,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ne)},i.validatePackage(ie.packageMetadata)}get _inputId(){return this.props.id}get document(){if(i.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=h.getFilteredData(this.props),t=this.value;return e.findIndex(o=>h.areSame(o,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:D.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:D.defaultProps.required}componentDidUpdate(s,e){var C;const{dataItemKey:t,virtual:o,groupField:l="",textField:d}=this.props,n=h.getFilteredData(this.props),p=s.virtual?s.virtual.total:0,r=this.props.opened!==void 0?this.props.opened:this.state.opened,a=s.opened!==void 0?s.opened:e.opened;s.data!==n&&this.checkForDuplicatePlainTextRecords();const m=!a&&r,c=this.value;if(this._valueOnDidUpdate=c,this.base.didUpdate(),o&&o.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=s.value!==void 0?s.value:e.value;let I=this.hasDuplicates?this.navigationIndex||0:n.findIndex(u=>h.areSame(u,c,t));this.props.groupMode==="modern"&&d&&c&&(I=(C=this.base.getGroupedDataModernMode(n,l))==null?void 0:C.map(u=>u[d]).indexOf(c[d]));const f=!h.areSame(y,c,t);m&&o?this.base.scrollToVirtualItem(o,I):m&&!o?(this.onPopupOpened(),n&&n.length!==0&&this.base.resetGroupStickyHeader(n[0][l],this),this.base.scrollToItem(I)):(this.hasDuplicates||r&&a&&c&&f)&&this.base.scrollToItem(I)}m&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=i.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=L.provideLocalizationService(this).toLanguageString(k.comboArrowBtnAriaLabelExpand,k.messages[k.comboArrowBtnAriaLabelExpand]),e=L.provideLocalizationService(this).toLanguageString(k.comboArrowBtnAriaLabelCollapse,k.messages[k.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:o,clearButton:l=D.defaultProps.clearButton,label:d,textField:n,className:p,style:r,loading:a,iconClassName:m,virtual:c,size:C,rounded:y,fillMode:I,opened:f=this.state.opened,placeholder:u,svgIcon:v,unstyled:x}=this.props,S=!this.validityStyles||this.validity.valid,w=this.props.filter!==void 0?this.props.filter:this.state.text,W=h.getItemValue(this.value,n),E=h.isPresent(w)?w:W,j=l&&(!!E||h.isPresent(this.value)),B=this.base.vs,P=this.props.id||this._inputId,T=this.mobileMode,O=x&&x.uComboBox;B.enabled=c!==void 0,c!==void 0&&(B.skip=c.skip,B.total=c.total,B.pageSize=c.pageSize);const[G,U]=q(this.props.prefix||g.Fragment),[$,Y]=q(this.props.suffix||g.Fragment),_=g.createElement(g.Fragment,null,g.createElement("span",{className:i.classNames(i.uComboBox.wrapper({c:O,size:C,rounded:y,fillMode:I,disabled:o,invalid:!S,loading:a,required:this.required}),p),ref:this.componentRef,style:d?{...r,width:void 0}:r,dir:t},this.props.prefix&&g.createElement(G,{...U}),this.renderSearchBar(E||"",P,u),j&&!a&&g.createElement(oe,{onClick:this.clearButtonClick,key:"clearbutton"}),a&&g.createElement(i.IconWrap,{className:i.classNames(i.uComboBox.loadingIcon({c:O})),name:"loading",key:"loading"}),this.props.suffix&&g.createElement($,{...Y}),g.createElement(K.Button,{tabIndex:-1,type:"button","aria-label":f?e:s,icon:m?void 0:"caret-alt-down",svgIcon:v||R.caretAltDownIcon,iconClass:m,size:C,fillMode:I,rounded:null,themeColor:"base",className:i.classNames(i.uComboBox.inputButton({c:O})),onClick:this.toggleBtnClick,onMouseDown:J=>J.preventDefault()}),!T&&this.renderListContainer()),T&&this.renderAdaptiveListContainer());return d?g.createElement(X.FloatingLabel,{label:d,editorId:P,editorValue:E,editorValid:S,editorDisabled:o,style:{width:r?r.width:void 0},children:_,unstyled:x}):_}onNavigate(s,e,t){const{virtual:o={skip:0}}=this.props,l=h.getFilteredData(this.props),d=this.props.filter?this.props.filter:this.state.text;let n=-1,p;const r=this.base.vs,a=this.value;this._suggested="";const m=this.hasDuplicates&&this.duplicates.indexOf(a)!==-1;if(n=this.getFocusedIndex(m),n!==-1&&!h.isPresent(a))this.handleItemSelect(n,s);else if(d==="")this.handleItemSelect(0,s);else{const c=o.skip+n;p=this.base.navigation.navigate({keyCode:e,current:c,max:(r.enabled?r.total:l.length)-1,min:0,skipItems:t||void 0}),p!==void 0&&this.handleItemSelect(p,s)}this.navigationIndex=p}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{textField:t,allowCustom:o}=this.props,l=h.getFilteredData(this.props),d=this.props.opened!==void 0?this.props.opened:this.state.opened,p=h.getItemValue(this.value,t)===s?this.index:h.getItemIndexByText(l,s,t),r=p!==-1;let a;if(this._suggested="",r)a=l[p];else if(o)a=t!==void 0?{[t]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(a,e),d&&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:o}=this.props,l=h.getFilteredData(this.props),d=this.props.opened!==void 0?this.props.opened:this.state.opened,n=h.getItemValue(this.value,t);if(this._suggested="",s===n||s===""&&!h.isPresent(n))return this.closeOpenedApplyStateNonMobileMode(e,d),this.applyState(e);const p=h.getItemIndexByText(l,s,t,!0),r=p!==-1;let a=null;r?a=l[p]:o&&(a=s?t?{[t]:s}:s:null),this.triggerOnChange(a,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,d),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:o,virtual:l={skip:0},focusedItemIndex:d=h.itemIndexStartsWith}=this.props,n=h.getFilteredData(this.props),p=l.skip,r=s===""&&p===0?0:d(n,s,o);return r!==-1?this.handleItemSelect(r+p,e):(this.triggerOnChange(null,e),this.state.text!==void 0&&(e.data.text=void 0)),t&&this.base.togglePopup(e),this.applyState(e)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:o,groupField:l,groupMode:d,list:n,virtual:p,adaptiveTitle:r,groupStickyHeaderItemRender:a,unstyled:m,_adaptiveMode:c}=this.props,C=h.getFilteredData(this.props),y=this.props.opened!==void 0?this.props.opened:this.state.opened,I=this.base.getAdaptiveAnimation(),f=m&&m.uComboBox,u=m&&m.uDropDownsActionSheet;let{group:v}=this.state;v===void 0&&l!==void 0&&(v=h.getItemValue(C[0],l));const x={navigatable:!1,navigatableElements:[],expand:y,animation:I,onClose:S=>this.toggleBtnClick(S),className:i.classNames(i.uDropDownsActionSheet.wrapper({c:u}),"k-adaptive-actionsheet"),animationStyles:s&&c&&s<=c.small?{top:0,width:"100%",height:"100%"}:void 0,position:s&&c&&s<=c.small?"fullscreen":void 0};return g.createElement(N.ActionSheet,{...x},g.createElement(N.ActionSheetHeader,null,g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.titleBar({c:u}))},g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.title({c:u}))},g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.header({c:u}))},r),g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.subtitle({c:u}))})),g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.actions({c:u}))},g.createElement(K.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",themeColor:"base",size:"large",onClick:this.toggleBtnClick,icon:"x",svgIcon:R.xIcon}))),g.createElement("div",{className:i.classNames(i.uDropDownsActionSheet.titleBarGroup({c:u}))},this.renderMobileListFilter())),g.createElement(N.ActionSheetContent,{overflowHidden:!0},g.createElement("div",{className:i.classNames(i.uComboBox.listContainer({c:f}))},g.createElement("div",{className:i.classNames(i.uComboBox.list({c:f,list:n,size:"large",tableSize:o,virtual:p}))},e&&g.createElement("div",{className:i.classNames(i.uComboBox.listHeader({c:f}))},e),!n&&v&&C.length!==0&&g.createElement(A,{group:v,groupMode:d,render:a}),this.renderList(),t&&g.createElement("div",{className:i.classNames(i.uComboBox.listFooter({c:f}),this.props.footerClassName)},t)))))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:o,groupField:l,groupMode:d,size:n,list:p,virtual:r,groupStickyHeaderItemRender:a,unstyled:m}=this.props,c=h.getFilteredData(this.props),C=this.props.opened!==void 0?this.props.opened:this.state.opened,y=s.getPopupSettings(),I=y.width!==void 0?y.width:s.popupWidth,f=m&&m.uComboBox;let{group:u}=this.state;return u===void 0&&l!==void 0&&(u=h.getItemValue(c[0],l)),g.createElement(ee,{width:I,popupSettings:{...y,anchor:y.anchor||this.element,show:C,popupClass:i.classNames(y.popupClass,i.uComboBox.listContainer({c:f,popup:!0}))},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[c.length]},g.createElement("div",{className:i.classNames(i.uComboBox.list({c:f,list:p,size:n,tableSize:n,virtual:r}))},t&&g.createElement("div",{className:i.classNames(i.uComboBox.listHeader({c:f}))},t),!p&&u&&c.length!==0&&g.createElement(A,{group:u,groupMode:d,render:a}),this.renderList(),o&&g.createElement("div",{className:i.classNames(i.uComboBox.listFooter({c:f}),this.props.footerClassName)},o)))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:o,itemRender:l,groupHeaderItemRender:d,virtual:n={skip:0,total:void 0},unstyled:p}=this.props,r=h.getFilteredData(this.props),a=s.getPopupSettings(),m=s.vs,c=n.skip,C=this.props.opened!==void 0?this.props.opened:this.state.opened,y=`translateY(${m.translate}px)`,I=C?this.getFocusedIndex(this.hasDuplicates):void 0,f=this.props.filter!==void 0?this.props.filter:this.state.text,u=h.getItemValue(this.value,e),v=h.isPresent(f)&&f!==u?null:this.value,x=this.props.list||te,S=p&&p.uComboBox;return g.createElement(x,{id:s.listBoxId,virtual:!!n,show:C,data:r,focusedIndex:I,value:v,textField:e,valueField:t,groupField:this.props.groupField,groupMode:this.props.groupMode,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:w=>{m.list=this.base.list=w,this.itemHeight=0},wrapperStyle:this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth>this.props._adaptiveMode.medium?{maxHeight:a.height}:{},wrapperCssClass:i.classNames(i.uComboBox.listContent({c:S,virtual:n})),listStyle:m.enabled?{transform:y}:void 0,key:"listkey",skip:c,onClick:this.handleItemClick,itemRender:l,groupHeaderItemRender:d,noDataRender:o,onMouseDown:w=>w.preventDefault(),onScroll:this.onScroll,wrapperRef:m.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:n.total})}renderSearchBar(s,e,t){const{tabIndex:o,disabled:l,title:d,ariaLabelledBy:n,ariaDescribedBy:p,dataItemKey:r,virtual:a={skip:0},accessKey:m,unstyled:c,inputAttributes:C}=this.props,y=h.getFilteredData(this.props),I=this.props.opened!==void 0?this.props.opened:this.state.opened,f=this.value,u=Math.max(0,y.findIndex(v=>h.areSame(v,f,r)));return this._suggested&&!h.areSame(this._valueOnDidUpdate,f,r)&&(this._suggested=""),g.createElement(Z,{id:e,readOnly:I&&this.mobileMode,placeholder:t,tabIndex:o,title:d,value:s+this._suggested,suggestedText:this._suggested,ref:v=>this._input=v&&v.input,onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:l,expanded:I,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${u+a.skip}`,role:"combobox",ariaLabelledBy:n,ariaLabel:this.props.ariaLabel,ariaDescribedBy:p,ariaRequired:this.required,render:this.props.valueRender,ariaControls:this.base.listBoxId,unstyled:c,inputAttributes:C})}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&&(!h.isPresent(t)&&!h.isPresent(s)||h.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:o,virtual:l={skip:0},focusedItemIndex:d=h.itemIndexStartsWith,skipDisabledItems:n}=this.props,p=h.getFilteredData(this.props),r=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:h.isPresent(e)&&r===void 0?p.findIndex(a=>h.areSame(a,e,o)):r?d(p,r,t):n&&t&&!r&&l.skip===0?p.findIndex(a=>!a.disabled&&a[t]):l.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=h.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})}};D.displayName="ComboBox",D.propTypes={...V.propTypes,size:b.oneOf([null,"small","medium","large"]),rounded:b.oneOf([null,"small","medium","large","full"]),fillMode:b.oneOf([null,"solid","flat","outline"]),dataItemKey:b.string,groupField:b.string,groupMode:b.oneOf([void 0,"classic","modern"]),isMultiColumn:b.bool,suggest:b.bool,placeholder:b.string,title:b.string,allowCustom:b.bool,clearButton:b.bool,iconClassName:b.string,svgIcon:i.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},D.defaultProps={...V.defaultProps,size:"medium",rounded:"medium",fillMode:"solid",allowCustom:!1,clearButton:!0,required:!1,groupMode:"modern",isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let M=D;const z=i.createPropsContext(),H=i.withIdHOC(i.withPropsContext(z,i.withUnstyledHOC(i.withAdaptiveModeContext(M))));H.displayName="KendoReactComboBox";exports.ComboBox=H;exports.ComboBoxPropsContext=z;exports.ComboBoxWithoutContext=M;
|