@progress/kendo-react-dropdowns 13.4.0-develop.3 → 13.4.0-develop.5
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.d.ts +4 -2
- package/AutoComplete/AutoComplete.js +1 -1
- package/AutoComplete/AutoComplete.mjs +59 -44
- package/AutoComplete/AutoCompleteProps.d.ts +1 -1
- package/ComboBox/ComboBox.d.ts +4 -2
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +166 -145
- package/ComboBox/ComboBoxProps.d.ts +1 -1
- package/DropDownList/DropDownList.d.ts +1 -1
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +295 -276
- package/DropDownList/DropDownListProps.d.ts +1 -1
- package/DropDownTree/DropDownTreeProps.d.ts +1 -1
- package/MultiColumnComboBox/MultiColumnComboBox.d.ts +1 -1
- package/MultiSelect/MultiSelect.d.ts +3 -1
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +283 -261
- package/MultiSelect/MultiSelectProps.d.ts +1 -1
- package/MultiSelect/TagList.js +1 -1
- package/MultiSelect/TagList.mjs +17 -17
- package/MultiSelectTree/MultiSelectTreeProps.d.ts +1 -1
- package/common/ListFilter.d.ts +1 -1
- package/common/ListFilter.js +1 -1
- package/common/ListFilter.mjs +1 -1
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +10 -10
|
@@ -33,7 +33,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
|
|
|
33
33
|
*/
|
|
34
34
|
static propTypes: {
|
|
35
35
|
size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
|
|
36
|
-
rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
|
|
36
|
+
rounded: PropTypes.Requireable<"small" | "none" | "medium" | "large" | "full" | undefined>;
|
|
37
37
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
|
|
38
38
|
groupField: PropTypes.Requireable<string>;
|
|
39
39
|
suggest: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
|
|
@@ -92,7 +92,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
|
|
|
92
92
|
*/
|
|
93
93
|
static defaultProps: {
|
|
94
94
|
size: "small" | "medium" | "large" | undefined;
|
|
95
|
-
rounded: "small" | "medium" | "large" | "full" | undefined;
|
|
95
|
+
rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
|
|
96
96
|
fillMode: "flat" | "solid" | "outline" | undefined;
|
|
97
97
|
skipDisabledItems: boolean;
|
|
98
98
|
prefix: undefined;
|
|
@@ -118,6 +118,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
|
|
|
118
118
|
private _isScrolling;
|
|
119
119
|
private itemHeight;
|
|
120
120
|
private observerResize?;
|
|
121
|
+
private KendoPasteSubscription?;
|
|
121
122
|
private get document();
|
|
122
123
|
/**
|
|
123
124
|
* @hidden
|
|
@@ -165,6 +166,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
|
|
|
165
166
|
* @hidden
|
|
166
167
|
*/
|
|
167
168
|
componentWillUnmount(): void;
|
|
169
|
+
private readonly handleKendoPasteValue;
|
|
168
170
|
/**
|
|
169
171
|
* @hidden
|
|
170
172
|
*/
|
|
@@ -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 V=require("react"),g=require("prop-types"),B=require("../common/SearchBar.js"),T=require("../common/ListContainer.js"),q=require("../common/List.js"),w=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),f=require("../common/utils.js"),l=require("@progress/kendo-react-common"),R=require("@progress/kendo-react-labels"),L=require("../common/ClearButton.js"),z=require("../common/AdaptiveMode.js"),F=require("../common/withCustomComponent.js"),A=require("@progress/kendo-react-layout"),H=require("../common/ListFilter.js");function W(I){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>I[t]})}}return e.default=I,Object.freeze(e)}const m=W(V),j="Please enter a valid value!",{sizeMap:D,roundedMap:G}=l.kendoThemeMaps,y=class y extends m.Component{constructor(){super(...arguments),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=f.getFilteredData(this.props),o=f.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(o,t)},this.itemFocus=(e,t)=>{const{textField:s}=this.props,i=f.getFilteredData(this.props)[e];f.areSame(this.state.focusedItem,i,s)||(t.data.focusedItem=i)},this.togglePopup=e=>{this.base.togglePopup(e)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||j)},this.renderAdaptiveListContainer=()=>{const{windowWidth:e=0}=this.state,t=m.createElement(H,{value:this.value,ref:o=>{this._adaptiveInput=o&&o.element},onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder}),s={title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,expand:this.opened,onClose:o=>this.onCancel(o),windowWidth:e,mobileFilter:t};return m.createElement(z.AdaptiveMode,{...s},m.createElement(A.ActionSheetContent,null,m.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;f.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:o,groupField:i,list:a}=this.props,d=f.getFilteredData(this.props);let{group:n}=this.state;return n===void 0&&i!==void 0&&(n=f.getItemValue(d[0],i)),m.createElement(m.Fragment,null,e&&m.createElement("div",{className:"k-list-header"},e),m.createElement("div",{className:l.classNames("k-list",{[`k-list-${this.mobileMode?"lg":D[s]||s}`]:this.mobileMode||s})},!a&&n&&d.length!==0&&m.createElement(N,{group:n,render:o}),this.renderList()),t&&m.createElement("div",{className:"k-list-footer"},t))},this.onScroll=e=>{this._isScrolling=!0;const{list:t}=this.base,{groupField:s}=this.props;let o=f.getFilteredData(this.props);if(!s||!o.length)return;const i=this.itemHeight||(t?t.children[0].offsetHeight:0),d=e.target.scrollTop;s&&(o=this.base.getGroupedDataModernMode(o,s));let n=o[0][s];for(let r=1;r<o.length&&!(i*r>d);r++)o[r]&&o[r][s]&&(n=o[r][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(),o=this.mobileMode?e.target.element:e.currentTarget,i=o.value,a=o.selectionEnd===i.length;s.syntheticEvent=e;const d=this._suggested,n=this.value,r=n&&n.substring(0,n.length-d.length),p=r&&r===i,h=r&&r.length>i.length,{suggest:b}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(b!==void 0&&b!==!1){p||h||!a?this._suggested="":this.suggestValue(i);const c=i+this._suggested,v={userInput:i,value:this._suggested};this.triggerOnChange(c,s,{suggestion:v})}else this._suggested="",this.triggerOnChange(i,s);(!u&&i||u&&!i)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=e=>{const s=this.base.initState(),o=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=e;const i="";this._suggested="",this.triggerOnChange(i,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),o&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=e=>{const{skipDisabledItems:t,groupField:s,textField:o}=this.props,i=f.getFilteredData(this.props);this._isScrolling&&(this._isScrolling=!1);const a=this.focusedIndex(),d=i[a],n=e.keyCode,r=e.altKey,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=e;const b=()=>{p&&e.preventDefault()};if(r&&n===l.Keys.down)this.setState({opened:!0});else if(r&&n===l.Keys.up)this.setState({opened:!1});else if(p&&n===l.Keys.pageUp)b(),this.base.scrollPopupByPageSize(-1);else if(p&&n===l.Keys.pageDown)b(),this.base.scrollPopupByPageSize(1);else if(p&&(n===l.Keys.enter||n===l.Keys.esc))b(),t===!1&&d&&d.disabled?(p&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(e.currentTarget.value,h,e.keyCode);else if(!p&&n===l.Keys.esc)this._suggested="",this.triggerOnChange("",h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h);else if(n===l.Keys.up||n===l.Keys.down){if(s!==""&&o)if(!this.props.skipDisabledItems&&p)this.onNavigate(h,n);else{let u=0;if(n===l.Keys.down||n===l.Keys.right){const c=i.slice(a+1).find(v=>!v.disabled&&v[o]);u=c&&i.findIndex(v=>v[o]===c[o])}else if(n===l.Keys.up||n===l.Keys.left){let c;if(a===-1)c=i,u=i.findIndex(v=>!v.disabled&&v[o]);else{c=i.slice(0,a);let v=c.pop();for(;v&&v.disabled;)v=c.pop();u=v&&i.findIndex(S=>S[o]===v[o])}}if(u!==void 0){const c=u-a;this.onNavigate(h,n,c)}else u===void 0&&i.findIndex(c=>c[o])===i.length-1&&this.onNavigate(h,n)}else if(!this.props.skipDisabledItems&&p)this.onNavigate(h,n);else{let u=null;if(n===l.Keys.down||n===l.Keys.right)u=i.slice(a+1).find(c=>!c.disabled);else if(n===l.Keys.up||n===l.Keys.left){const c=i.slice(0,a);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-a-1;this.onNavigate(h,n,c)}else this.onNavigate(h,n)}this.applyState(h),b()}},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)}}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 e=this.props.validationMessage!==void 0,t=!this.required||this.value!=="",s=this.props.valid!==void 0?this.props.valid:t;return{customError:e,valid:s,valueMissing:this.value===null}}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:y.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:y.defaultProps.required}componentDidUpdate(e,t){var u;const{groupField:s=""}=this.props,o=f.getFilteredData(this.props),{data:i=[]}=e,a=this.focusedIndex(),d=o[a],n=i!==o,r=d!==void 0&&t.focusedItem!==d,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=e.opened!==void 0?e.opened:t.opened,b=!h&&p;if(s==="")(p&&(r||n)||b)&&this.base.scrollToItem(a);else if(!this._isScrolling){const c=(u=this.base.getGroupedDataModernMode(o,s))==null?void 0:u.indexOf(d);b&&(o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][s],this),this.base.scrollToItem(c)),p&&h&&r&&this.base.scrollToItem(c)}this.setValidity()}componentDidMount(){var e;this.observerResize=l.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)}componentWillUnmount(){this.observerResize&&this.observerResize.disconnect()}render(){const{dir:e,disabled:t,label:s,className:o,style:i,loading:a,suggest:d,size:n,rounded:r,fillMode:p}=this.props,h=!this.validityStyles||this.validity.valid,b=this.base,u=this.value,c=this.props.clearButton!==!1&&!a&&!!u,v=this.props.id||this._inputId,S=this.state.focused;typeof d=="string"&&(this._suggested=d);const[E,O]=F(this.props.prefix||m.Fragment),[P,K]=F(this.props.suffix||m.Fragment),k=m.createElement(m.Fragment,null,m.createElement("span",{className:l.classNames("k-autocomplete k-input",o,{[`k-input-${D[n]||n}`]:n,[`k-rounded-${G[r]||r}`]:r,[`k-input-${p}`]:p,"k-invalid":!h,"k-focus":S&&!t,"k-loading":a,"k-required":this.required,"k-disabled":t}),ref:C=>{this._element=C,b.wrapper=C},style:s?{...i,width:void 0}:i,dir:e,onFocus:this.mobileMode?C=>this.handleWrapperClick(C):this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick},this.props.prefix&&m.createElement(E,{...O}),this.renderSearchBar(u||"",v),a&&m.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c&&!a&&m.createElement(L,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&m.createElement(P,{...K}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return s?m.createElement(R.FloatingLabel,{label:s,editorId:v,editorValue:u,editorValid:h,editorDisabled:t,style:{width:i?i.width:void 0},children:k}):k}onNavigate(e,t,s){const o=this.value,{textField:i,focusedItemIndex:a}=this.props,d=f.getFilteredData(this.props),n=this.state.focusedItem!==void 0?d.findIndex(p=>f.areSame(p,this.state.focusedItem,i)):a?a(d,o,i):d.indexOf(f.getFocusedItem(d,o,i)),r=this.base.navigation.navigate({keyCode:t,current:n,max:d.length-1,min:0,skipItems:s||void 0});r!==void 0&&this.itemFocus(r,e),this.applyState(e)}applyInputValue(e,t,s){const o=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:i}=this.props,a=f.getFilteredData(this.props),d=this.focusedIndex(),n=a[d];if(this._suggested="",o&&s===l.Keys.enter&&n&&!n.disabled){const r=f.getItemValue(a[this.focusedIndex(e)],i);this.triggerOnChange(r,t)}o&&this.togglePopup(t),this.applyState(t)}renderSearchBar(e,t){const s=this.base,{placeholder:o,tabIndex:i,disabled:a,readonly:d,inputAttributes:n}=this.props,{focused:r}=this.state,p=this.props.opened!==void 0?this.props.opened:this.state.opened;return m.createElement(B,{id:t,placeholder:o,tabIndex:i,accessKey:this.props.accessKey,value:e,suggestedText:this._suggested,focused:r,name:this.props.name,ref:h=>{this._input=h&&h.input},onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:s.handleFocus,onBlur:this.handleBlur,disabled:a,readOnly:d,expanded:p,owns:s.listBoxId,activedescendant:"option-"+s.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender,inputAttributes:n})}renderListContainer(){const e=this.base,{dir:t,groupField:s}=this.props,o=f.getFilteredData(this.props),i=e.getPopupSettings(),a=this.props.opened!==void 0?this.props.opened:this.state.opened,d=i.width!==void 0?i.width:e.popupWidth;let{group:n}=this.state;return n===void 0&&s!==void 0&&(n=f.getItemValue(o[0],s)),m.createElement(T,{width:d,popupSettings:{...i,anchor:i.anchor||this.element,show:a,popupClass:l.classNames(i.popupClass,"k-list-container","k-autocomplete-popup")},dir:t!==void 0?t:this.base.dirCalculated,itemsCount:[o.length]},this.listContainerContent())}renderList(){const e=this.base,t=e.getPopupSettings(),{textField:s,listNoDataRender:o,itemRender:i,groupHeaderItemRender:a}=this.props,d=f.getFilteredData(this.props),n=this.value,r=this.props.opened!==void 0?this.props.opened:this.state.opened;return m.createElement(q,{id:e.listBoxId,show:r,data:d.slice(),focusedIndex:this.focusedIndex(),value:n,textField:s,valueField:s,highlightSelected:!1,optionsGuid:e.guid,groupField:this.props.groupField,listRef:p=>{e.list=p},wrapperStyle:this.mobileMode?{}:{maxHeight:t.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:a,noDataRender:o,onMouseDown:p=>p.preventDefault(),onScroll:this.onScroll})}triggerOnChange(e,t,s){this.value===e&&!s||(t.data.value=e,this._valueDuringOnChange=e,t.events.push({type:"onChange",...s||{}}))}focusElement(e){this._skipFocusEvent=!0,e.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(e){this.base.applyState(e),this._valueDuringOnChange=void 0}suggestValue(e){if(this._suggested="",e){const{textField:t}=this.props,s=f.getFilteredData(this.props),o=s[f.itemIndexStartsWith(s,e,t)];if(o){const i=f.getItemValue(o,t);e.toLowerCase()!==i.toLowerCase()&&(this._suggested=i.substring(e.length))}}}focusedIndex(e){const{textField:t,focusedItemIndex:s,skipDisabledItems:o}=this.props,i=f.getFilteredData(this.props),a=e!==void 0?e:this.value;if(this.state.focusedItem!==void 0)return i.findIndex(n=>f.areSame(n,this.state.focusedItem,t));if(s)return s(i,a,t);const d=i.indexOf(f.getFocusedItem(i,a,t));return o&&t&&d===-1?i.findIndex(n=>!n.disabled&&n[t]):Math.max(0,d)}calculateMedia(e){for(const t of e)this.setState({windowWidth:t.target.clientWidth})}};y.displayName="AutoComplete",y.propTypes={...w.basicPropTypes,size:g.oneOf(["small","medium","large"]),rounded:g.oneOf(["small","medium","large","full"]),fillMode:g.oneOf(["solid","flat","outline"]),groupField:g.string,suggest:g.oneOfType([g.bool,g.string]),placeholder:g.string,value:g.string,defaultValue:g.string,validationMessage:g.string,required:g.bool,readonly:g.bool,clearButton:g.bool,valueRender:g.func,id:g.string,ariaLabelledBy:g.string,ariaDescribedBy:g.string,list:g.any,adaptive:g.bool,adaptiveTitle:g.string,adaptiveSubtitle:g.string,onCancel:g.func,skipDisabledItems:g.bool,inputAttributes:g.object},y.defaultProps={...w.defaultProps,size:void 0,rounded:void 0,fillMode:void 0,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let x=y;const _=l.createPropsContext(),M=l.withIdHOC(l.withPropsContext(_,l.withAdaptiveModeContext(x)));M.displayName="KendoReactAutoComplete";exports.AutoComplete=M;exports.AutoCompletePropsContext=_;exports.AutoCompleteWithoutContext=x;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),g=require("prop-types"),T=require("../common/SearchBar.js"),B=require("../common/ListContainer.js"),q=require("../common/List.js"),w=require("../common/DropDownBase.js"),N=require("../common/GroupStickyHeader.js"),f=require("../common/utils.js"),l=require("@progress/kendo-react-common"),R=require("@progress/kendo-react-labels"),L=require("../common/ClearButton.js"),z=require("../common/AdaptiveMode.js"),F=require("../common/withCustomComponent.js"),A=require("@progress/kendo-react-layout"),H=require("../common/ListFilter.js");function W(I){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>I[t]})}}return e.default=I,Object.freeze(e)}const m=W(V),j="Please enter a valid value!",{sizeMap:D,roundedMap:G}=l.kendoThemeMaps,y=class y extends m.Component{constructor(){super(...arguments),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.handleKendoPasteValue=e=>{const t=e!=null?String(e):"",s=this.base.initState();s.syntheticEvent={target:this._element,currentTarget:this._element,nativeEvent:new Event("change",{bubbles:!0})},this.triggerOnChange(t,s),this.applyState(s)},this.handleItemSelect=(e,t)=>{const s=f.getFilteredData(this.props),o=f.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(o,t)},this.itemFocus=(e,t)=>{const{textField:s}=this.props,i=f.getFilteredData(this.props)[e];f.areSame(this.state.focusedItem,i,s)||(t.data.focusedItem=i)},this.togglePopup=e=>{this.base.togglePopup(e)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||j)},this.renderAdaptiveListContainer=()=>{const{windowWidth:e=0}=this.state,t=m.createElement(H,{value:this.value,ref:o=>{this._adaptiveInput=o&&o.element},onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder}),s={title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,expand:this.opened,onClose:o=>this.onCancel(o),windowWidth:e,mobileFilter:t};return m.createElement(z.AdaptiveMode,{...s},m.createElement(A.ActionSheetContent,null,m.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;f.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:o,groupField:i,list:a}=this.props,d=f.getFilteredData(this.props);let{group:n}=this.state;return n===void 0&&i!==void 0&&(n=f.getItemValue(d[0],i)),m.createElement(m.Fragment,null,e&&m.createElement("div",{className:"k-list-header"},e),m.createElement("div",{className:l.classNames("k-list",{[`k-list-${this.mobileMode?"lg":D[s]||s}`]:this.mobileMode||s})},!a&&n&&d.length!==0&&m.createElement(N,{group:n,render:o}),this.renderList()),t&&m.createElement("div",{className:"k-list-footer"},t))},this.onScroll=e=>{this._isScrolling=!0;const{list:t}=this.base,{groupField:s}=this.props;let o=f.getFilteredData(this.props);if(!s||!o.length)return;const i=this.itemHeight||(t?t.children[0].offsetHeight:0),d=e.target.scrollTop;s&&(o=this.base.getGroupedDataModernMode(o,s));let n=o[0][s];for(let r=1;r<o.length&&!(i*r>d);r++)o[r]&&o[r][s]&&(n=o[r][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(),o=this.mobileMode?e.target.element:e.currentTarget,i=o.value,a=o.selectionEnd===i.length;s.syntheticEvent=e;const d=this._suggested,n=this.value,r=n&&n.substring(0,n.length-d.length),p=r&&r===i,h=r&&r.length>i.length,{suggest:b}=this.props,u=this.props.opened!==void 0?this.props.opened:this.state.opened;if(b!==void 0&&b!==!1){p||h||!a?this._suggested="":this.suggestValue(i);const c=i+this._suggested,v={userInput:i,value:this._suggested};this.triggerOnChange(c,s,{suggestion:v})}else this._suggested="",this.triggerOnChange(i,s);(!u&&i||u&&!i)&&this.togglePopup(s),s.data.focusedItem=void 0,this.applyState(s),this.setState({group:void 0})},this.clearButtonClick=e=>{const s=this.base.initState(),o=this.props.opened!==void 0?this.props.opened:this.state.opened;s.syntheticEvent=e;const i="";this._suggested="",this.triggerOnChange(i,s),this.state.focusedItem!==void 0&&(s.data.focusedItem=void 0),o&&this.togglePopup(s),this.applyState(s)},this.onInputKeyDown=e=>{const{skipDisabledItems:t,groupField:s,textField:o}=this.props,i=f.getFilteredData(this.props);this._isScrolling&&(this._isScrolling=!1);const a=this.focusedIndex(),d=i[a],n=e.keyCode,r=e.altKey,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=this.base.initState();h.syntheticEvent=e;const b=()=>{p&&e.preventDefault()};if(r&&n===l.Keys.down)this.setState({opened:!0});else if(r&&n===l.Keys.up)this.setState({opened:!1});else if(p&&n===l.Keys.pageUp)b(),this.base.scrollPopupByPageSize(-1);else if(p&&n===l.Keys.pageDown)b(),this.base.scrollPopupByPageSize(1);else if(p&&(n===l.Keys.enter||n===l.Keys.esc))b(),t===!1&&d&&d.disabled?(p&&this.togglePopup(h),this.applyState(h)):this.applyInputValue(e.currentTarget.value,h,e.keyCode);else if(!p&&n===l.Keys.esc)this._suggested="",this.triggerOnChange("",h),this.state.focusedItem!==void 0&&(h.data.focusedItem=void 0),this.applyState(h);else if(n===l.Keys.up||n===l.Keys.down){if(s!==""&&o)if(!this.props.skipDisabledItems&&p)this.onNavigate(h,n);else{let u=0;if(n===l.Keys.down||n===l.Keys.right){const c=i.slice(a+1).find(v=>!v.disabled&&v[o]);u=c&&i.findIndex(v=>v[o]===c[o])}else if(n===l.Keys.up||n===l.Keys.left){let c;if(a===-1)c=i,u=i.findIndex(v=>!v.disabled&&v[o]);else{c=i.slice(0,a);let v=c.pop();for(;v&&v.disabled;)v=c.pop();u=v&&i.findIndex(x=>x[o]===v[o])}}if(u!==void 0){const c=u-a;this.onNavigate(h,n,c)}else u===void 0&&i.findIndex(c=>c[o])===i.length-1&&this.onNavigate(h,n)}else if(!this.props.skipDisabledItems&&p)this.onNavigate(h,n);else{let u=null;if(n===l.Keys.down||n===l.Keys.right)u=i.slice(a+1).find(c=>!c.disabled);else if(n===l.Keys.up||n===l.Keys.left){const c=i.slice(0,a);for(u=c.pop();u&&u.disabled;)u=c.pop()}if(u){const c=u.id-a-1;this.onNavigate(h,n,c)}else this.onNavigate(h,n)}this.applyState(h),b()}},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)}}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 e=this.props.validationMessage!==void 0,t=!this.required||this.value!=="",s=this.props.valid!==void 0?this.props.valid:t;return{customError:e,valid:s,valueMissing:this.value===null}}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:y.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:y.defaultProps.required}componentDidUpdate(e,t){var u;const{groupField:s=""}=this.props,o=f.getFilteredData(this.props),{data:i=[]}=e,a=this.focusedIndex(),d=o[a],n=i!==o,r=d!==void 0&&t.focusedItem!==d,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=e.opened!==void 0?e.opened:t.opened,b=!h&&p;if(s==="")(p&&(r||n)||b)&&this.base.scrollToItem(a);else if(!this._isScrolling){const c=(u=this.base.getGroupedDataModernMode(o,s))==null?void 0:u.indexOf(d);b&&(o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][s],this),this.base.scrollToItem(c)),p&&h&&r&&this.base.scrollToItem(c)}this.setValidity()}componentDidMount(){var t;this.observerResize=l.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const e=this.props.name||this.props.id;this.KendoPasteSubscription=l.subscribeToKendoPaste(this._element,{fieldName:e,onValueChange:s=>{this.handleKendoPasteValue(s)}})}componentWillUnmount(){var e;this.observerResize&&this.observerResize.disconnect(),(e=this.KendoPasteSubscription)==null||e.unsubscribe()}render(){const{dir:e,disabled:t,label:s,className:o,style:i,loading:a,suggest:d,size:n,rounded:r,fillMode:p}=this.props,h=!this.validityStyles||this.validity.valid,b=this.base,u=this.value,c=this.props.clearButton!==!1&&!a&&!!u,v=this.props.id||this._inputId,x=this.state.focused;typeof d=="string"&&(this._suggested=d);const[E,P]=F(this.props.prefix||m.Fragment),[O,K]=F(this.props.suffix||m.Fragment),k=m.createElement(m.Fragment,null,m.createElement("span",{className:l.classNames("k-autocomplete k-input",o,{[`k-input-${D[n]||n}`]:n,[`k-rounded-${G[r]||r}`]:r,[`k-input-${p}`]:p,"k-invalid":!h,"k-focus":x&&!t,"k-loading":a,"k-required":this.required,"k-disabled":t}),ref:C=>{this._element=C,b.wrapper=C},style:s?{...i,width:void 0}:i,dir:e,onFocus:this.mobileMode?C=>this.handleWrapperClick(C):this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick},this.props.prefix&&m.createElement(E,{...P}),this.renderSearchBar(u||"",v),a&&m.createElement(l.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c&&!a&&m.createElement(L,{onClick:this.clearButtonClick,key:"clearbutton"}),this.props.suffix&&m.createElement(O,{...K}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return s?m.createElement(R.FloatingLabel,{label:s,editorId:v,editorValue:u,editorValid:h,editorDisabled:t,style:{width:i?i.width:void 0},children:k}):k}onNavigate(e,t,s){const o=this.value,{textField:i,focusedItemIndex:a}=this.props,d=f.getFilteredData(this.props),n=this.state.focusedItem!==void 0?d.findIndex(p=>f.areSame(p,this.state.focusedItem,i)):a?a(d,o,i):d.indexOf(f.getFocusedItem(d,o,i)),r=this.base.navigation.navigate({keyCode:t,current:n,max:d.length-1,min:0,skipItems:s||void 0});r!==void 0&&this.itemFocus(r,e),this.applyState(e)}applyInputValue(e,t,s){const o=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:i}=this.props,a=f.getFilteredData(this.props),d=this.focusedIndex(),n=a[d];if(this._suggested="",o&&s===l.Keys.enter&&n&&!n.disabled){const r=f.getItemValue(a[this.focusedIndex(e)],i);this.triggerOnChange(r,t)}o&&this.togglePopup(t),this.applyState(t)}renderSearchBar(e,t){const s=this.base,{placeholder:o,tabIndex:i,disabled:a,readonly:d,inputAttributes:n}=this.props,{focused:r}=this.state,p=this.props.opened!==void 0?this.props.opened:this.state.opened;return m.createElement(T,{id:t,placeholder:o,tabIndex:i,accessKey:this.props.accessKey,value:e,suggestedText:this._suggested,focused:r,name:this.props.name,ref:h=>{this._input=h&&h.input},onKeyDown:this.onInputKeyDown,onChange:this.onChangeHandler,onFocus:s.handleFocus,onBlur:this.handleBlur,disabled:a,readOnly:d,expanded:p,owns:s.listBoxId,activedescendant:"option-"+s.guid+"-"+this.focusedIndex(),role:"combobox",ariaLabelledBy:this.props.ariaLabelledBy,ariaDescribedBy:this.props.ariaDescribedBy,ariaRequired:this.required,render:this.props.valueRender,inputAttributes:n})}renderListContainer(){const e=this.base,{dir:t,groupField:s}=this.props,o=f.getFilteredData(this.props),i=e.getPopupSettings(),a=this.props.opened!==void 0?this.props.opened:this.state.opened,d=i.width!==void 0?i.width:e.popupWidth;let{group:n}=this.state;return n===void 0&&s!==void 0&&(n=f.getItemValue(o[0],s)),m.createElement(B,{width:d,popupSettings:{...i,anchor:i.anchor||this.element,show:a,popupClass:l.classNames(i.popupClass,"k-list-container","k-autocomplete-popup")},dir:t!==void 0?t:this.base.dirCalculated,itemsCount:[o.length]},this.listContainerContent())}renderList(){const e=this.base,t=e.getPopupSettings(),{textField:s,listNoDataRender:o,itemRender:i,groupHeaderItemRender:a}=this.props,d=f.getFilteredData(this.props),n=this.value,r=this.props.opened!==void 0?this.props.opened:this.state.opened;return m.createElement(q,{id:e.listBoxId,show:r,data:d.slice(),focusedIndex:this.focusedIndex(),value:n,textField:s,valueField:s,highlightSelected:!1,optionsGuid:e.guid,groupField:this.props.groupField,listRef:p=>{e.list=p},wrapperStyle:this.mobileMode?{}:{maxHeight:t.height},wrapperCssClass:"k-list-content",onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:a,noDataRender:o,onMouseDown:p=>p.preventDefault(),onScroll:this.onScroll})}triggerOnChange(e,t,s){this.value===e&&!s||(t.data.value=e,this._valueDuringOnChange=e,t.events.push({type:"onChange",...s||{}}))}focusElement(e){this._skipFocusEvent=!0,e.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(e){this.base.applyState(e),this._valueDuringOnChange=void 0}suggestValue(e){if(this._suggested="",e){const{textField:t}=this.props,s=f.getFilteredData(this.props),o=s[f.itemIndexStartsWith(s,e,t)];if(o){const i=f.getItemValue(o,t);e.toLowerCase()!==i.toLowerCase()&&(this._suggested=i.substring(e.length))}}}focusedIndex(e){const{textField:t,focusedItemIndex:s,skipDisabledItems:o}=this.props,i=f.getFilteredData(this.props),a=e!==void 0?e:this.value;if(this.state.focusedItem!==void 0)return i.findIndex(n=>f.areSame(n,this.state.focusedItem,t));if(s)return s(i,a,t);const d=i.indexOf(f.getFocusedItem(i,a,t));return o&&t&&d===-1?i.findIndex(n=>!n.disabled&&n[t]):Math.max(0,d)}calculateMedia(e){for(const t of e)this.setState({windowWidth:t.target.clientWidth})}};y.displayName="AutoComplete",y.propTypes={...w.basicPropTypes,size:g.oneOf(["small","medium","large"]),rounded:g.oneOf(["small","medium","large","full","none"]),fillMode:g.oneOf(["solid","flat","outline"]),groupField:g.string,suggest:g.oneOfType([g.bool,g.string]),placeholder:g.string,value:g.string,defaultValue:g.string,validationMessage:g.string,required:g.bool,readonly:g.bool,clearButton:g.bool,valueRender:g.func,id:g.string,ariaLabelledBy:g.string,ariaDescribedBy:g.string,list:g.any,adaptive:g.bool,adaptiveTitle:g.string,adaptiveSubtitle:g.string,onCancel:g.func,skipDisabledItems:g.bool,inputAttributes:g.object},y.defaultProps={...w.defaultProps,size:void 0,rounded:void 0,fillMode:void 0,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let S=y;const _=l.createPropsContext(),M=l.withIdHOC(l.withPropsContext(_,l.withAdaptiveModeContext(S)));M.displayName="KendoReactAutoComplete";exports.AutoComplete=M;exports.AutoCompletePropsContext=_;exports.AutoCompleteWithoutContext=S;
|
|
@@ -9,21 +9,28 @@ import * as g from "react";
|
|
|
9
9
|
import c from "prop-types";
|
|
10
10
|
import N from "../common/SearchBar.mjs";
|
|
11
11
|
import R from "../common/ListContainer.mjs";
|
|
12
|
-
import
|
|
12
|
+
import K from "../common/List.mjs";
|
|
13
13
|
import S from "../common/DropDownBase.mjs";
|
|
14
|
-
import
|
|
15
|
-
import { getFilteredData as b, getItemValue as y, areSame as w, isPresent as
|
|
16
|
-
import { withIdHOC as
|
|
17
|
-
import { FloatingLabel as
|
|
18
|
-
import
|
|
19
|
-
import { AdaptiveMode as
|
|
20
|
-
import
|
|
21
|
-
import { ActionSheetContent as
|
|
22
|
-
import
|
|
23
|
-
const
|
|
14
|
+
import L from "../common/GroupStickyHeader.mjs";
|
|
15
|
+
import { getFilteredData as b, getItemValue as y, areSame as w, isPresent as z, getFocusedItem as E, itemIndexStartsWith as H } from "../common/utils.mjs";
|
|
16
|
+
import { withIdHOC as A, createPropsContext as q, withPropsContext as W, withAdaptiveModeContext as G, classNames as k, kendoThemeMaps as U, Keys as m, canUseDOM as M, subscribeToKendoPaste as $, IconWrap as j } from "@progress/kendo-react-common";
|
|
17
|
+
import { FloatingLabel as J } from "@progress/kendo-react-labels";
|
|
18
|
+
import Q from "../common/ClearButton.mjs";
|
|
19
|
+
import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
|
|
20
|
+
import D from "../common/withCustomComponent.mjs";
|
|
21
|
+
import { ActionSheetContent as Y } from "@progress/kendo-react-layout";
|
|
22
|
+
import Z from "../common/ListFilter.mjs";
|
|
23
|
+
const ee = "Please enter a valid value!", { sizeMap: P, roundedMap: te } = U, I = class I extends g.Component {
|
|
24
24
|
constructor() {
|
|
25
25
|
super(...arguments), this.state = {}, this.base = new S(this), this._element = null, this._suggested = "", this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
|
|
26
26
|
this._input && this._input.focus();
|
|
27
|
+
}, this.handleKendoPasteValue = (e) => {
|
|
28
|
+
const t = e != null ? String(e) : "", s = this.base.initState();
|
|
29
|
+
s.syntheticEvent = {
|
|
30
|
+
target: this._element,
|
|
31
|
+
currentTarget: this._element,
|
|
32
|
+
nativeEvent: new Event("change", { bubbles: !0 })
|
|
33
|
+
}, this.triggerOnChange(t, s), this.applyState(s);
|
|
27
34
|
}, this.handleItemSelect = (e, t) => {
|
|
28
35
|
const s = b(this.props), o = y(s[e], this.props.textField);
|
|
29
36
|
this.state.text && !this.mobileMode && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.triggerOnChange(o, t);
|
|
@@ -34,11 +41,11 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
34
41
|
this.base.togglePopup(e);
|
|
35
42
|
}, this.setValidity = () => {
|
|
36
43
|
this._input && this._input.setCustomValidity && this._input.setCustomValidity(
|
|
37
|
-
this.validity.valid ? "" : this.props.validationMessage ||
|
|
44
|
+
this.validity.valid ? "" : this.props.validationMessage || ee
|
|
38
45
|
);
|
|
39
46
|
}, this.renderAdaptiveListContainer = () => {
|
|
40
47
|
const { windowWidth: e = 0 } = this.state, t = /* @__PURE__ */ g.createElement(
|
|
41
|
-
|
|
48
|
+
Z,
|
|
42
49
|
{
|
|
43
50
|
value: this.value,
|
|
44
51
|
ref: (o) => {
|
|
@@ -59,12 +66,12 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
59
66
|
windowWidth: e,
|
|
60
67
|
mobileFilter: t
|
|
61
68
|
};
|
|
62
|
-
return /* @__PURE__ */ g.createElement(
|
|
69
|
+
return /* @__PURE__ */ g.createElement(X, { ...s }, /* @__PURE__ */ g.createElement(Y, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
|
|
63
70
|
}, this.onCancel = (e) => {
|
|
64
71
|
const t = this.base.initState();
|
|
65
72
|
t.syntheticEvent = e, e.stopPropagation(), this.opened && this.base.togglePopup(t), t.events.push({ type: "onCancel" });
|
|
66
73
|
const s = this.state.text;
|
|
67
|
-
|
|
74
|
+
z(s) && s !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this.applyState(t);
|
|
68
75
|
}, this.listContainerContent = () => {
|
|
69
76
|
const { header: e, footer: t, size: s, groupStickyHeaderItemRender: o, groupField: i, list: a } = this.props, d = b(this.props);
|
|
70
77
|
let { group: n } = this.state;
|
|
@@ -72,10 +79,10 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
72
79
|
"div",
|
|
73
80
|
{
|
|
74
81
|
className: k("k-list", {
|
|
75
|
-
[`k-list-${this.mobileMode ? "lg" :
|
|
82
|
+
[`k-list-${this.mobileMode ? "lg" : P[s] || s}`]: this.mobileMode || s
|
|
76
83
|
})
|
|
77
84
|
},
|
|
78
|
-
!a && n && d.length !== 0 && /* @__PURE__ */ g.createElement(
|
|
85
|
+
!a && n && d.length !== 0 && /* @__PURE__ */ g.createElement(L, { group: n, render: o }),
|
|
79
86
|
this.renderList()
|
|
80
87
|
), t && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, t));
|
|
81
88
|
}, this.onScroll = (e) => {
|
|
@@ -152,7 +159,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
152
159
|
let f = u.pop();
|
|
153
160
|
for (; f && f.disabled; )
|
|
154
161
|
f = u.pop();
|
|
155
|
-
h = f && i.findIndex((
|
|
162
|
+
h = f && i.findIndex((x) => x[o] === f[o]);
|
|
156
163
|
}
|
|
157
164
|
}
|
|
158
165
|
if (h !== void 0) {
|
|
@@ -195,7 +202,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
195
202
|
return this.props.id + "-accessibility-id";
|
|
196
203
|
}
|
|
197
204
|
get document() {
|
|
198
|
-
if (
|
|
205
|
+
if (M)
|
|
199
206
|
return this.element && this.element.ownerDocument || document;
|
|
200
207
|
}
|
|
201
208
|
/**
|
|
@@ -268,52 +275,60 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
268
275
|
* @hidden
|
|
269
276
|
*/
|
|
270
277
|
componentDidMount() {
|
|
271
|
-
var
|
|
272
|
-
this.observerResize =
|
|
278
|
+
var t;
|
|
279
|
+
this.observerResize = M && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
|
|
280
|
+
const e = this.props.name || this.props.id;
|
|
281
|
+
this.KendoPasteSubscription = $(this._element, {
|
|
282
|
+
fieldName: e,
|
|
283
|
+
onValueChange: (s) => {
|
|
284
|
+
this.handleKendoPasteValue(s);
|
|
285
|
+
}
|
|
286
|
+
});
|
|
273
287
|
}
|
|
274
288
|
/**
|
|
275
289
|
* @hidden
|
|
276
290
|
*/
|
|
277
291
|
componentWillUnmount() {
|
|
278
|
-
|
|
292
|
+
var e;
|
|
293
|
+
this.observerResize && this.observerResize.disconnect(), (e = this.KendoPasteSubscription) == null || e.unsubscribe();
|
|
279
294
|
}
|
|
280
295
|
/**
|
|
281
296
|
* @hidden
|
|
282
297
|
*/
|
|
283
298
|
render() {
|
|
284
|
-
const { dir: e, disabled: t, label: s, className: o, style: i, loading: a, suggest: d, size: n, rounded: r, fillMode: p } = this.props, l = !this.validityStyles || this.validity.valid, v = this.base, h = this.value, u = this.props.clearButton !== !1 && !a && !!h, f = this.props.id || this._inputId,
|
|
299
|
+
const { dir: e, disabled: t, label: s, className: o, style: i, loading: a, suggest: d, size: n, rounded: r, fillMode: p } = this.props, l = !this.validityStyles || this.validity.valid, v = this.base, h = this.value, u = this.props.clearButton !== !1 && !a && !!h, f = this.props.id || this._inputId, x = this.state.focused;
|
|
285
300
|
typeof d == "string" && (this._suggested = d);
|
|
286
|
-
const [
|
|
301
|
+
const [O, B] = D(this.props.prefix || g.Fragment), [T, V] = D(this.props.suffix || g.Fragment), F = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
|
|
287
302
|
"span",
|
|
288
303
|
{
|
|
289
304
|
className: k("k-autocomplete k-input", o, {
|
|
290
|
-
[`k-input-${
|
|
291
|
-
[`k-rounded-${
|
|
305
|
+
[`k-input-${P[n] || n}`]: n,
|
|
306
|
+
[`k-rounded-${te[r] || r}`]: r,
|
|
292
307
|
[`k-input-${p}`]: p,
|
|
293
308
|
"k-invalid": !l,
|
|
294
|
-
"k-focus":
|
|
309
|
+
"k-focus": x && !t,
|
|
295
310
|
"k-loading": a,
|
|
296
311
|
"k-required": this.required,
|
|
297
312
|
"k-disabled": t
|
|
298
313
|
}),
|
|
299
|
-
ref: (
|
|
300
|
-
this._element =
|
|
314
|
+
ref: (C) => {
|
|
315
|
+
this._element = C, v.wrapper = C;
|
|
301
316
|
},
|
|
302
317
|
style: s ? { ...i, width: void 0 } : i,
|
|
303
318
|
dir: e,
|
|
304
|
-
onFocus: this.mobileMode ? (
|
|
319
|
+
onFocus: this.mobileMode ? (C) => this.handleWrapperClick(C) : this.handleFocus,
|
|
305
320
|
onBlur: this.handleBlur,
|
|
306
321
|
onClick: this.handleWrapperClick
|
|
307
322
|
},
|
|
308
|
-
this.props.prefix && /* @__PURE__ */ g.createElement(
|
|
323
|
+
this.props.prefix && /* @__PURE__ */ g.createElement(O, { ...B }),
|
|
309
324
|
this.renderSearchBar(h || "", f),
|
|
310
|
-
a && /* @__PURE__ */ g.createElement(
|
|
311
|
-
u && !a && /* @__PURE__ */ g.createElement(
|
|
325
|
+
a && /* @__PURE__ */ g.createElement(j, { className: "k-input-loading-icon", name: "loading" }),
|
|
326
|
+
u && !a && /* @__PURE__ */ g.createElement(Q, { onClick: this.clearButtonClick, key: "clearbutton" }),
|
|
312
327
|
this.props.suffix && /* @__PURE__ */ g.createElement(T, { ...V }),
|
|
313
328
|
!this.mobileMode && this.renderListContainer()
|
|
314
329
|
), this.mobileMode && this.renderAdaptiveListContainer());
|
|
315
330
|
return s ? /* @__PURE__ */ g.createElement(
|
|
316
|
-
|
|
331
|
+
J,
|
|
317
332
|
{
|
|
318
333
|
label: s,
|
|
319
334
|
editorId: f,
|
|
@@ -329,7 +344,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
329
344
|
* @hidden
|
|
330
345
|
*/
|
|
331
346
|
onNavigate(e, t, s) {
|
|
332
|
-
const o = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), n = this.state.focusedItem !== void 0 ? d.findIndex((p) => w(p, this.state.focusedItem, i)) : a ? a(d, o, i) : d.indexOf(
|
|
347
|
+
const o = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), n = this.state.focusedItem !== void 0 ? d.findIndex((p) => w(p, this.state.focusedItem, i)) : a ? a(d, o, i) : d.indexOf(E(d, o, i)), r = this.base.navigation.navigate({
|
|
333
348
|
keyCode: t,
|
|
334
349
|
current: n,
|
|
335
350
|
max: d.length - 1,
|
|
@@ -405,7 +420,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
405
420
|
renderList() {
|
|
406
421
|
const e = this.base, t = e.getPopupSettings(), { textField: s, listNoDataRender: o, itemRender: i, groupHeaderItemRender: a } = this.props, d = b(this.props), n = this.value, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
|
|
407
422
|
return /* @__PURE__ */ g.createElement(
|
|
408
|
-
|
|
423
|
+
K,
|
|
409
424
|
{
|
|
410
425
|
id: e.listBoxId,
|
|
411
426
|
show: r,
|
|
@@ -442,7 +457,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
442
457
|
}
|
|
443
458
|
suggestValue(e) {
|
|
444
459
|
if (this._suggested = "", e) {
|
|
445
|
-
const { textField: t } = this.props, s = b(this.props), o = s[
|
|
460
|
+
const { textField: t } = this.props, s = b(this.props), o = s[H(s, e, t)];
|
|
446
461
|
if (o) {
|
|
447
462
|
const i = y(o, t);
|
|
448
463
|
e.toLowerCase() !== i.toLowerCase() && (this._suggested = i.substring(e.length));
|
|
@@ -455,7 +470,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
455
470
|
return i.findIndex((n) => w(n, this.state.focusedItem, t));
|
|
456
471
|
if (s)
|
|
457
472
|
return s(i, a, t);
|
|
458
|
-
const d = i.indexOf(
|
|
473
|
+
const d = i.indexOf(E(i, a, t));
|
|
459
474
|
return o && t && d === -1 ? i.findIndex((n) => !n.disabled && n[t]) : Math.max(0, d);
|
|
460
475
|
}
|
|
461
476
|
calculateMedia(e) {
|
|
@@ -466,7 +481,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I =
|
|
|
466
481
|
I.displayName = "AutoComplete", I.propTypes = {
|
|
467
482
|
...S.basicPropTypes,
|
|
468
483
|
size: c.oneOf(["small", "medium", "large"]),
|
|
469
|
-
rounded: c.oneOf(["small", "medium", "large", "full"]),
|
|
484
|
+
rounded: c.oneOf(["small", "medium", "large", "full", "none"]),
|
|
470
485
|
fillMode: c.oneOf(["solid", "flat", "outline"]),
|
|
471
486
|
groupField: c.string,
|
|
472
487
|
suggest: c.oneOfType([c.bool, c.string]),
|
|
@@ -498,15 +513,15 @@ I.displayName = "AutoComplete", I.propTypes = {
|
|
|
498
513
|
suffix: void 0
|
|
499
514
|
};
|
|
500
515
|
let _ = I;
|
|
501
|
-
const
|
|
516
|
+
const se = q(), ie = A(
|
|
502
517
|
W(
|
|
503
|
-
|
|
518
|
+
se,
|
|
504
519
|
G(_)
|
|
505
520
|
)
|
|
506
521
|
);
|
|
507
|
-
|
|
522
|
+
ie.displayName = "KendoReactAutoComplete";
|
|
508
523
|
export {
|
|
509
|
-
|
|
510
|
-
|
|
524
|
+
ie as AutoComplete,
|
|
525
|
+
se as AutoCompletePropsContext,
|
|
511
526
|
_ as AutoCompleteWithoutContext
|
|
512
527
|
};
|
|
@@ -375,7 +375,7 @@ export interface AutoCompleteProps extends FormComponentProps {
|
|
|
375
375
|
* <AutoComplete rounded="large" />
|
|
376
376
|
* ```
|
|
377
377
|
*/
|
|
378
|
-
rounded?: 'small' | 'medium' | 'large' | 'full';
|
|
378
|
+
rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
|
|
379
379
|
/**
|
|
380
380
|
* Configures the `fillMode` of the AutoComplete.
|
|
381
381
|
*
|
package/ComboBox/ComboBox.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
|
|
|
28
28
|
/** @hidden */
|
|
29
29
|
static propTypes: {
|
|
30
30
|
size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
|
|
31
|
-
rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
|
|
31
|
+
rounded: PropTypes.Requireable<"small" | "none" | "medium" | "large" | "full" | undefined>;
|
|
32
32
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
|
|
33
33
|
dataItemKey: PropTypes.Requireable<string>;
|
|
34
34
|
groupField: PropTypes.Requireable<string>;
|
|
@@ -101,7 +101,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
|
|
|
101
101
|
/** @hidden */
|
|
102
102
|
static defaultProps: {
|
|
103
103
|
size: "small" | "medium" | "large" | undefined;
|
|
104
|
-
rounded: "small" | "medium" | "large" | "full" | undefined;
|
|
104
|
+
rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
|
|
105
105
|
fillMode: "flat" | "solid" | "outline" | undefined;
|
|
106
106
|
allowCustom: boolean;
|
|
107
107
|
ignoreCase: boolean;
|
|
@@ -136,6 +136,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
|
|
|
136
136
|
protected scrollToFocused: boolean;
|
|
137
137
|
private readonly showLicenseWatermark;
|
|
138
138
|
private readonly licenseMessage?;
|
|
139
|
+
private KendoPasteSubscription?;
|
|
139
140
|
private get document();
|
|
140
141
|
constructor(props: ComboBoxProps);
|
|
141
142
|
/** @hidden */
|
|
@@ -176,6 +177,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
|
|
|
176
177
|
componentDidMount(): void;
|
|
177
178
|
/** @hidden */
|
|
178
179
|
componentWillUnmount(): void;
|
|
180
|
+
private readonly handleKendoPasteValue;
|
|
179
181
|
/** @hidden */
|
|
180
182
|
render(): React.JSX.Element;
|
|
181
183
|
/** @hidden */
|
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 $=require("react"),f=require("prop-types"),E=require("../common/DropDownBase.js"),p=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-labels"),r=require("../common/utils.js"),J=require("../common/SearchBar.js"),Q=require("../common/ListContainer.js"),X=require("../common/List.js"),Z=require("../common/ListFilter.js"),_=require("../common/GroupStickyHeader.js"),N=require("../package-metadata.js"),ee=require("../common/ClearButton.js"),te=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-svg-icons"),k=require("../messages/index.js"),K=require("@progress/kendo-react-intl"),ie=require("@progress/kendo-react-layout"),L=require("../common/withCustomComponent.js"),oe=require("../common/AdaptiveMode.js");function ae(w){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(w){for(const e in w)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(w,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>w[e]})}}return s.default=w,Object.freeze(s)}const m=ae($),ne="Please enter a valid value!",F=class F extends m.Component{constructor(s){super(s),this.state={},this.base=new E(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this._skipFocus=!1,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!1,this.scrollToFocused=!1,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.checkForDuplicatePlainTextRecords=()=>{const e=this.props.textField!==void 0,t=this.props.dataItemKey!==void 0;if(this.props.data&&this.props.data.length>0&&!e&&!t){const i=this.props.data;this.duplicates=r.getPlainDataDuplicates(i),this.hasDuplicates=this.duplicates.length>0}},this.handleItemSelect=(e,t)=>{const{virtual:i,dataItemKey:d}=this.props,n=r.getFilteredData(this.props),o=i?i.skip:0,h=n[e-o],l=this.hasDuplicates||!r.areSame(h,this.value,d);this.triggerOnChange(h,t),this.state.text!==void 0&&(t.data.text=void 0),l&&this.base.triggerPageChangeCornerItems(h,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{this._skipFocus=!0;const{skipDisabledItems:t,textField:i}=this.props,d=r.getFilteredData(this.props),n=this.getFocusedIndex(),o=this.getCurrentValueDisabledStatus(i,d,n),h=this.props.opened!==void 0?this.props.opened:this.state.opened,l=this.base.initState();if(l.syntheticEvent=e,!t&&i&&o&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(l),!h&&this.mobileMode){const a=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(a,l)}this.applyState(l),setTimeout(()=>{this._skipFocus=!1},300)},this.closeOpenedApplyStateNonMobileMode=(e,t)=>{t&&!this.mobileMode&&this.base.togglePopup(e)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=r.getItemValue(this.value,this.props.textField),i=r.isPresent(e)?e:t;return m.createElement(Z,{value:i,ref:d=>{this._adaptiveFilterInput=d&&d.element},onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder})},this.listContainerContent=()=>{const{header:e,footer:t,size:i,groupStickyHeaderItemRender:d,groupField:n,list:o,unstyled:h,virtual:l}=this.props,a=r.getFilteredData(this.props),c=h&&h.uComboBox;let{group:u}=this.state;return u===void 0&&n!==void 0&&(u=r.getItemValue(a[0],n)),m.createElement("div",{className:p.classNames(p.uComboBox.list({c,list:o,size:"large",tableSize:i,virtual:l}))},e&&m.createElement("div",{className:p.classNames(p.uComboBox.listHeader({c}))},e),!o&&u&&a.length!==0&&m.createElement(_,{group:u,render:d}),this.renderList(),t&&m.createElement("div",{className:p.classNames(p.uComboBox.listFooter({c}),this.props.footerClassName)},t))},this.handleMobileFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,t.data.text=e.target.value,this.base.filterChanged(e.target.value,t),this.applyState(t)},this.onScroll=e=>{const{vs:t,list:i}=this.base;t.scrollHandler(e);const{groupField:d}=this.props;let n=r.getFilteredData(this.props);if(!d||!n.length)return;const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:i?i.children[0].offsetHeight:0),l=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,d);let a=n[0][d];for(let c=1;c<n.length&&!(o*c>l);c++)n[c]&&n[c][d]&&(a=n[c][d]);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:i}=this.props,d=r.getFilteredData(this.props),n=this.getFocusedIndex(),h=!(n===-1)&&this.getCurrentValueDisabledStatus(i,d,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,i&&h&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const d=this.base.initState();d.syntheticEvent=e,this.base.togglePopup(d),this.base.filterChanged(i,d),this.applyState(d)}},this.onInputKeyDown=e=>{const{skipDisabledItems:t,textField:i,dataItemKey:d,groupField:n}=this.props,o=r.getFilteredData(this.props),h=this.value,l=Math.max(0,o.findIndex(v=>r.areSame(v,h,d))),a=e.keyCode,c=this.props.opened!==void 0?this.props.opened:this.state.opened,u=this.base.initState();if(u.syntheticEvent=e,!e.altKey&&(a===p.Keys.up||a===p.Keys.down)){if(e.preventDefault(),n!==""&&i)if(!this.props.skipDisabledItems&&c)this.onNavigate(u,a);else{let v=0;if(a===p.Keys.down||a===p.Keys.right){const g=o.slice(l+1<o.length?l+1:l).find(x=>!x.disabled&&x[i]);v=g&&o.findIndex(x=>x[i]===g[i])}else if(a===p.Keys.up||a===p.Keys.left){let g;if(l===0)g=o,v=o.findIndex(x=>!x.disabled&&x[i]);else{g=o.slice(0,l);let x=g.pop();for(;x&&x.disabled;)x=g.pop();v=x&&o.findIndex(S=>S[i]===x[i])}}if(v!==void 0){const g=v-l;this.onNavigate(u,a,g)}else v===void 0&&o.findIndex(g=>g[i]===h[i])===o.length-1&&this.onNavigate(u,a)}else if(!this.props.skipDisabledItems&&c)this.onNavigate(u,a);else{let v=null;if(a===p.Keys.down||a===p.Keys.right)v=o.slice(l+1).find(g=>!g.disabled);else if(a===p.Keys.up||a===p.Keys.left){const g=o.slice(0,l);for(v=g.pop();v&&v.disabled;)v=g.pop()}if(v){const g=v.id-l-1;this.onNavigate(u,a,g)}else this.onNavigate(u,a)}this.applyState(u)}const y=()=>{e.preventDefault(),this.base.togglePopup(u),this.applyState(u)},C=this.getFocusedIndex(),I=C===-1,b=!I&&this.getCurrentValueDisabledStatus(i,o,C);c?a===p.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):a===p.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&a===p.Keys.up?y():a===p.Keys.enter?(e.preventDefault(),(i&&!I&&e.currentTarget.value?o[C][i]:void 0)?!t&&i&&b?this.clearValueOnEnterOrEsc(e):b||this.applyValueOnEnter(e.currentTarget.value,u):this.applyValueOnEnter(e.currentTarget.value,u)):a===p.Keys.esc&&(!t&&i&&b&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,u)):!c&&a===p.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&a===p.Keys.down&&y()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const i=this.props.opened!==void 0?this.props.opened:this.state.opened,d=e.currentTarget,n=d.value;if(this.props.suggest){const o=d.selectionEnd===n.length;let h=this.props.filter!==void 0?this.props.filter:this.state.text;r.isPresent(h)||(h=r.getItemValue(this.value,this.props.textField)||"");const l=h&&h===n,a=h&&h.length>n.length;l||a||!o?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),i?this.scrollToFocused=!0:this.base.togglePopup(t),this.base.filterChanged(n,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ne)},this.handleFocus=e=>{if(this._skipFocus)return;const t=this.base.initState();t.syntheticEvent=e,this.mobileMode&&!this._skipFocus&&(this._skipFocus=!0,this.base.togglePopup(t),this.applyState(t),setTimeout(()=>{this._skipFocus=!1},300)),this.base.handleFocus(e)},this.showLicenseWatermark=!p.validatePackage(N.packageMetadata,{component:"ComboBox"}),this.licenseMessage=p.getLicenseMessage(N.packageMetadata)}get _inputId(){return this.props.id}get document(){if(p.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=r.getFilteredData(this.props),t=this.value;return e.findIndex(i=>r.areSame(i,t,s))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:F.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:F.defaultProps.required}componentDidUpdate(s,e){var y,C;const{dataItemKey:t,virtual:i,groupField:d="",textField:n}=this.props,o=r.getFilteredData(this.props),h=s.virtual?s.virtual.total:0,l=this.props.opened!==void 0?this.props.opened:this.state.opened,a=s.opened!==void 0?s.opened:e.opened;s.data!==o&&this.checkForDuplicatePlainTextRecords();const c=!a&&l,u=this.value;if(this._valueOnDidUpdate=u,this.base.didUpdate(),i&&i.total!==h)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const I=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:o.findIndex(g=>r.areSame(g,u,t));n&&u&&(b=(y=this.base.getGroupedDataModernMode(o,d))==null?void 0:y.map(g=>g[n]).indexOf(u[n]));const v=!r.areSame(I,u,t);if(c&&i?this.base.scrollToVirtualItem(i,b):c&&!i?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][d],this),this.base.scrollToItem(b)):(this.hasDuplicates||l&&a&&u&&v)&&this.base.scrollToItem(b),l&&a&&this.scrollToFocused){const g=(C=this.props.filter?this.props.filter:this.state.text)!=null?C:"";if(g){const{focusedItemIndex:x=r.itemIndexStartsWith}=this.props,S=x(o,g,n);this.base.scrollToItem(S)}else this.base.scrollToItem(0)}}this.scrollToFocused=!1,c&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var s;this.observerResize=p.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=K.provideLocalizationService(this).toLanguageString(k.comboArrowBtnAriaLabelExpand,k.messages[k.comboArrowBtnAriaLabelExpand]),e=K.provideLocalizationService(this).toLanguageString(k.comboArrowBtnAriaLabelCollapse,k.messages[k.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:i,clearButton:d=F.defaultProps.clearButton,label:n,textField:o,className:h,style:l,loading:a,iconClassName:c,virtual:u,size:y,rounded:C,fillMode:I,opened:b=this.state.opened,placeholder:v,svgIcon:g,unstyled:x}=this.props,S=!this.validityStyles||this.validity.valid,D=this.props.filter!==void 0?this.props.filter:this.state.text,A=r.getItemValue(this.value,o),O=r.isPresent(D)?D:A,z=d&&(!!O||r.isPresent(this.value)),B=this.base.vs,T=this.props.id||this._inputId,V=x&&x.uComboBox;B.enabled=u!==void 0,u!==void 0&&(B.skip=u.skip,B.total=u.total,B.pageSize=u.pageSize);const[H,W]=L(this.props.prefix||m.Fragment),[j,U]=L(this.props.suffix||m.Fragment),P=m.createElement(m.Fragment,null,m.createElement("span",{className:p.classNames(p.uComboBox.wrapper({c:V,size:y,rounded:C,fillMode:I,disabled:i,invalid:!S,loading:a,required:this.required}),h),ref:this.componentRef,style:n?{...l,width:void 0}:l,dir:t,onFocus:this.handleFocus},this.props.prefix&&m.createElement(H,{...W}),this.renderSearchBar(O||"",T,v),z&&!a&&m.createElement(ee,{onClick:this.clearButtonClick,key:"clearbutton"}),a&&m.createElement(p.IconWrap,{className:p.classNames(p.uComboBox.loadingIcon({c:V})),name:"loading",key:"loading"}),this.props.suffix&&m.createElement(j,{...U}),m.createElement(te.Button,{tabIndex:-1,type:"button","aria-label":b?e:s,icon:c?void 0:"caret-alt-down",svgIcon:g||se.caretAltDownIcon,iconClass:c,size:y,fillMode:I,className:p.classNames(p.uComboBox.inputButton({c:V})),onClick:this.toggleBtnClick,onMouseDown:G=>G.preventDefault()}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return n?m.createElement(Y.FloatingLabel,{label:n,editorId:T,editorValue:O,editorValid:S,editorDisabled:i,style:{width:l?l.width:void 0},children:P,unstyled:x}):P}onNavigate(s,e,t){const{virtual:i={skip:0}}=this.props,d=r.getFilteredData(this.props),n=this.props.filter?this.props.filter:this.state.text;let o=-1,h;const l=this.base.vs,a=this.value;this._suggested="";const c=this.hasDuplicates&&this.duplicates.indexOf(a)!==-1;if(o=this.getFocusedIndex(c),o!==-1&&!r.isPresent(a))this.handleItemSelect(o,s);else if(n==="")this.handleItemSelect(0,s);else{const u=i.skip+o;h=this.base.navigation.navigate({keyCode:e,current:u,max:(l.enabled?l.total:d.length)-1,min:0,skipItems:t||void 0}),h!==void 0&&this.handleItemSelect(h,s)}this.navigationIndex=h}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{textField:t,allowCustom:i,ignoreCase:d}=this.props,n=r.getFilteredData(this.props),o=this.props.opened!==void 0?this.props.opened:this.state.opened,l=r.getItemValue(this.value,t)===s?this.index:r.getItemIndexByText(n,s,t,!1,d),a=l!==-1;let c;if(this._suggested="",a)c=n[l];else if(i)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:i,ignoreCase:d}=this.props,n=r.getFilteredData(this.props),o=this.props.opened!==void 0?this.props.opened:this.state.opened,h=r.getItemValue(this.value,t);if(this._suggested="",s===h||s===""&&!r.isPresent(h))return this.closeOpenedApplyStateNonMobileMode(e,o),this.applyState(e);const l=r.getItemIndexByText(n,s,t,!0,d),a=l!==-1;let c=null;a?c=n[l]:i&&(c=s?t?{[t]:s}:s:null),this.triggerOnChange(c,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,o),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:i,virtual:d={skip:0},focusedItemIndex:n=r.itemIndexStartsWith}=this.props,o=r.getFilteredData(this.props),h=d.skip,l=s===""&&h===0?0:n(o,s,i);return l!==-1?this.handleItemSelect(l+h,e):(this.triggerOnChange(null,e),this.state.text!==void 0&&(e.data.text=void 0)),t&&this.base.togglePopup(e),this.applyState(e)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{groupField:e,adaptiveTitle:t=this.props.label,adaptiveSubtitle:i}=this.props,d=r.getFilteredData(this.props),n=this.props.opened!==void 0?this.props.opened:this.state.opened;let{group:o}=this.state;o===void 0&&e!==void 0&&(o=r.getItemValue(d[0],e));const h={title:t||this.props.label,subTitle:i,expand:n,onClose:l=>this.toggleBtnClick(l),windowWidth:s,mobileFilter:this.renderMobileListFilter()};return m.createElement(oe.AdaptiveMode,{...h},m.createElement(ie.ActionSheetContent,null,m.createElement("div",{className:"k-list-container"},this.listContainerContent())))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:i,groupField:d,size:n,list:o,virtual:h,groupStickyHeaderItemRender:l,unstyled:a}=this.props,c=r.getFilteredData(this.props),u=this.props.opened!==void 0?this.props.opened:this.state.opened,y=s.getPopupSettings(),C=y.width!==void 0?y.width:s.popupWidth,I=a&&a.uComboBox;let{group:b}=this.state;return b===void 0&&d!==void 0&&(b=r.getItemValue(c[0],d)),m.createElement(Q,{width:C,popupSettings:{...y,anchor:y.anchor||this.element,show:u,popupClass:p.classNames(y.popupClass,p.uComboBox.listContainer({c:I,popup:!0}))},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[c.length]},m.createElement("div",{className:p.classNames(p.uComboBox.list({c:I,list:o,size:n,tableSize:n,virtual:h}))},t&&m.createElement("div",{className:p.classNames(p.uComboBox.listHeader({c:I}))},t),!o&&b&&c.length!==0&&m.createElement(_,{group:b,render:l}),this.renderList(),i&&m.createElement("div",{className:p.classNames(p.uComboBox.listFooter({c:I}),this.props.footerClassName)},i)),this.showLicenseWatermark&&m.createElement(p.WatermarkOverlay,{message:this.licenseMessage}))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:i,itemRender:d,groupHeaderItemRender:n,virtual:o={skip:0,total:void 0},unstyled:h}=this.props,l=r.getFilteredData(this.props),a=s.getPopupSettings(),c=s.vs,u=o.skip,y=this.props.opened!==void 0?this.props.opened:this.state.opened,C=`translateY(${c.translate}px)`,I=y?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,v=r.getItemValue(this.value,e),g=r.isPresent(b)&&b!==v?null:this.value,x=this.props.list||X,S=h&&h.uComboBox;return m.createElement(x,{id:s.listBoxId,virtual:!!o,show:y,data:l,focusedIndex:I,value:g,textField:e,valueField:t,groupField:this.props.groupField,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:D=>{c.list=this.base.list=D,this.itemHeight=0},wrapperStyle:this.mobileMode?{}:{maxHeight:a.height},wrapperCssClass:p.classNames(p.uComboBox.listContent({c:S,virtual:o})),listStyle:c.enabled?{transform:C}:void 0,key:"listkey",skip:u,onClick:this.handleItemClick,itemRender:d,groupHeaderItemRender:n,noDataRender:i,onMouseDown:D=>D.preventDefault(),onScroll:this.onScroll,wrapperRef:c.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:o.total})}renderSearchBar(s,e,t){const{tabIndex:i,accessKey:d,disabled:n,title:o,ariaLabelledBy:h,ariaDescribedBy:l,dataItemKey:a,virtual:c={skip:0},unstyled:u,inputAttributes:y}=this.props,C=r.getFilteredData(this.props),I=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,v=Math.max(0,C.findIndex(g=>r.areSame(g,b,a)));return this._suggested&&!r.areSame(this._valueOnDidUpdate,b,a)&&(this._suggested=""),m.createElement(J,{id:e,readOnly:I&&this.mobileMode,placeholder:t,tabIndex:i,accessKey:d,title:o,value:s+this._suggested,suggestedText:this._suggested,ref:g=>{this._input=g&&g.input},onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:n,expanded:I,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${v+c.skip}`,role:"combobox",ariaLabelledBy:h,ariaLabel:this.props.ariaLabel,ariaDescribedBy:l,ariaRequired:this.required,render:this.props.valueRender,ariaControls:this.base.listBoxId,unstyled:u,inputAttributes:y})}clearValue(){const s=this.base.initState();this._suggested="",this.navigationIndex=void 0,this.base.filterChanged("",s),this.props.filter===void 0&&this.state.text!==void 0&&(s.data.text=void 0),this.triggerOnChange(null,s);const e=this.props.opened!==void 0?this.props.opened:this.state.opened,t=this.mobileMode;e&&!t&&this.base.togglePopup(s),this.applyState(s)}triggerOnChange(s,e){const t=this.value;!this.hasDuplicates&&(!r.isPresent(t)&&!r.isPresent(s)||r.areSame(t,s,this.props.dataItemKey))||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}getFocusedIndex(s){const e=this.value,{textField:t,dataItemKey:i,virtual:d={skip:0},focusedItemIndex:n=r.itemIndexStartsWith,skipDisabledItems:o}=this.props,h=r.getFilteredData(this.props),l=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:r.isPresent(e)&&l===void 0?h.findIndex(a=>r.areSame(a,e,i)):l?n(h,l,t):o&&t&&!l&&d.skip===0?h.findIndex(a=>!a.disabled&&a[t]):d.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=r.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={...E.propTypes,size:f.oneOf(["small","medium","large"]),rounded:f.oneOf(["small","medium","large","full"]),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:p.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={...E.defaultProps,size:void 0,rounded:void 0,fillMode:void 0,allowCustom:!1,ignoreCase:!1,clearButton:!0,required:!1,isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let M=F;const R=p.createPropsContext(),q=p.withIdHOC(p.withPropsContext(R,p.withUnstyledHOC(p.withAdaptiveModeContext(M))));q.displayName="KendoReactComboBox";exports.ComboBox=q;exports.ComboBoxPropsContext=R;exports.ComboBoxWithoutContext=M;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),f=require("prop-types"),O=require("../common/DropDownBase.js"),h=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-labels"),d=require("../common/utils.js"),J=require("../common/SearchBar.js"),Q=require("../common/ListContainer.js"),X=require("../common/List.js"),Z=require("../common/ListFilter.js"),_=require("../common/GroupStickyHeader.js"),K=require("../package-metadata.js"),ee=require("../common/ClearButton.js"),te=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-svg-icons"),k=require("../messages/index.js"),N=require("@progress/kendo-react-intl"),ie=require("@progress/kendo-react-layout"),L=require("../common/withCustomComponent.js"),oe=require("../common/AdaptiveMode.js");function ae(w){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(w){for(const e in w)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(w,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>w[e]})}}return s.default=w,Object.freeze(s)}const m=ae($),ne="Please enter a valid value!",F=class F extends m.Component{constructor(s){super(s),this.state={},this.base=new O(this),this._element=null,this._suggested="",this._skipBlur=!1,this._input=null,this._adaptiveFilterInput=null,this._skipFocus=!1,this.itemHeight=0,this.duplicates=[],this.hasDuplicates=!1,this.scrollToFocused=!1,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.checkForDuplicatePlainTextRecords=()=>{const e=this.props.textField!==void 0,t=this.props.dataItemKey!==void 0;if(this.props.data&&this.props.data.length>0&&!e&&!t){const i=this.props.data;this.duplicates=d.getPlainDataDuplicates(i),this.hasDuplicates=this.duplicates.length>0}},this.handleKendoPasteValue=e=>{const{data:t,textField:i,allowCustom:r}=this.props;if(!t)return;const n=e!=null?String(e):"",a=d.getItemIndexByText(t,n,i,!1,!0),p=a!==-1;let l=null;if(p?l=t[a]:r&&(l=i?{[i]:n}:n),l===null)return;const o=this.base.initState();o.syntheticEvent={target:this._element,currentTarget:this._element,nativeEvent:new Event("change",{bubbles:!0})},this.state.text!==void 0&&(o.data.text=void 0),this.triggerOnChange(l,o),this.applyState(o)},this.handleItemSelect=(e,t)=>{const{virtual:i,dataItemKey:r}=this.props,n=d.getFilteredData(this.props),a=i?i.skip:0,p=n[e-a],l=this.hasDuplicates||!d.areSame(p,this.value,r);this.triggerOnChange(p,t),this.state.text!==void 0&&(t.data.text=void 0),l&&this.base.triggerPageChangeCornerItems(p,t)},this.onPopupOpened=()=>{setTimeout(()=>{this.mobileMode&&this._adaptiveFilterInput&&(this._skipBlur=!0,this._adaptiveFilterInput.focus(),this._skipBlur=!1)},300)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.toggleBtnClick=e=>{this._skipFocus=!0;const{skipDisabledItems:t,textField:i}=this.props,r=d.getFilteredData(this.props),n=this.getFocusedIndex(),a=this.getCurrentValueDisabledStatus(i,r,n),p=this.props.opened!==void 0?this.props.opened:this.state.opened,l=this.base.initState();if(l.syntheticEvent=e,!t&&i&&a&&this.clearValueOnToggleBtnClick(e),this.base.togglePopup(l),!p&&this.mobileMode){const o=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;this.base.filterChanged(o,l)}this.applyState(l),setTimeout(()=>{this._skipFocus=!1},300)},this.closeOpenedApplyStateNonMobileMode=(e,t)=>{t&&!this.mobileMode&&this.base.togglePopup(e)},this.renderMobileListFilter=()=>{const e=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text,t=d.getItemValue(this.value,this.props.textField),i=d.isPresent(e)?e:t;return m.createElement(Z,{value:i,ref:r=>{this._adaptiveFilterInput=r&&r.element},onChange:this.handleMobileFilterChange,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder})},this.listContainerContent=()=>{const{header:e,footer:t,size:i,groupStickyHeaderItemRender:r,groupField:n,list:a,unstyled:p,virtual:l}=this.props,o=d.getFilteredData(this.props),c=p&&p.uComboBox;let{group:u}=this.state;return u===void 0&&n!==void 0&&(u=d.getItemValue(o[0],n)),m.createElement("div",{className:h.classNames(h.uComboBox.list({c,list:a,size:"large",tableSize:i,virtual:l}))},e&&m.createElement("div",{className:h.classNames(h.uComboBox.listHeader({c}))},e),!a&&u&&o.length!==0&&m.createElement(_,{group:u,render:r}),this.renderList(),t&&m.createElement("div",{className:h.classNames(h.uComboBox.listFooter({c}),this.props.footerClassName)},t))},this.handleMobileFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,t.data.text=e.target.value,this.base.filterChanged(e.target.value,t),this.applyState(t)},this.onScroll=e=>{const{vs:t,list:i}=this.base;t.scrollHandler(e);const{groupField:r}=this.props;let n=d.getFilteredData(this.props);if(!r||!n.length)return;const a=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:i?i.children[0].offsetHeight:0),l=e.target.scrollTop-t.skip*a;n=this.base.getGroupedDataModernMode(n,r);let o=n[0][r];for(let c=1;c<n.length&&!(a*c>l);c++)n[c]&&n[c][r]&&(o=n[c][r]);o!==this.state.group&&(this.setState({group:o}),this.props.onGroupScroll&&this.props.onGroupScroll.call(void 0,{group:o}))},this.handleItemClick=(e,t)=>{this.navigationIndex=e,this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleBlur=e=>{if(this.state.focused&&!this._skipBlur){const t=this.base.initState(),{textField:i}=this.props,r=d.getFilteredData(this.props),n=this.getFocusedIndex(),p=!(n===-1)&&this.getCurrentValueDisabledStatus(i,r,n);t.data.focused=!1,t.events.push({type:"onBlur"}),t.syntheticEvent=e,i&&p&&this.clearValueOnBlur(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},this.onInputClick=e=>{const t=this.props.opened!==void 0?this.props.opened:this.state.opened,i=this.props.adaptiveFilter!==void 0?this.props.adaptiveFilter:this.state.text||null;if(!t&&this.mobileMode){const r=this.base.initState();r.syntheticEvent=e,this.base.togglePopup(r),this.base.filterChanged(i,r),this.applyState(r)}},this.onInputKeyDown=e=>{const{skipDisabledItems:t,textField:i,dataItemKey:r,groupField:n}=this.props,a=d.getFilteredData(this.props),p=this.value,l=Math.max(0,a.findIndex(v=>d.areSame(v,p,r))),o=e.keyCode,c=this.props.opened!==void 0?this.props.opened:this.state.opened,u=this.base.initState();if(u.syntheticEvent=e,!e.altKey&&(o===h.Keys.up||o===h.Keys.down)){if(e.preventDefault(),n!==""&&i)if(!this.props.skipDisabledItems&&c)this.onNavigate(u,o);else{let v=0;if(o===h.Keys.down||o===h.Keys.right){const g=a.slice(l+1<a.length?l+1:l).find(x=>!x.disabled&&x[i]);v=g&&a.findIndex(x=>x[i]===g[i])}else if(o===h.Keys.up||o===h.Keys.left){let g;if(l===0)g=a,v=a.findIndex(x=>!x.disabled&&x[i]);else{g=a.slice(0,l);let x=g.pop();for(;x&&x.disabled;)x=g.pop();v=x&&a.findIndex(S=>S[i]===x[i])}}if(v!==void 0){const g=v-l;this.onNavigate(u,o,g)}else v===void 0&&a.findIndex(g=>g[i]===p[i])===a.length-1&&this.onNavigate(u,o)}else if(!this.props.skipDisabledItems&&c)this.onNavigate(u,o);else{let v=null;if(o===h.Keys.down||o===h.Keys.right)v=a.slice(l+1).find(g=>!g.disabled);else if(o===h.Keys.up||o===h.Keys.left){const g=a.slice(0,l);for(v=g.pop();v&&v.disabled;)v=g.pop()}if(v){const g=v.id-l-1;this.onNavigate(u,o,g)}else this.onNavigate(u,o)}this.applyState(u)}const y=()=>{e.preventDefault(),this.base.togglePopup(u),this.applyState(u)},C=this.getFocusedIndex(),I=C===-1,b=!I&&this.getCurrentValueDisabledStatus(i,a,C);c?o===h.Keys.pageUp?(e.preventDefault(),this.base.scrollPopupByPageSize(-1)):o===h.Keys.pageDown?(e.preventDefault(),this.base.scrollPopupByPageSize(1)):e.altKey&&o===h.Keys.up?y():o===h.Keys.enter?(e.preventDefault(),(i&&!I&&e.currentTarget.value?a[C][i]:void 0)?!t&&i&&b?this.clearValueOnEnterOrEsc(e):b||this.applyValueOnEnter(e.currentTarget.value,u):this.applyValueOnEnter(e.currentTarget.value,u)):o===h.Keys.esc&&(!t&&i&&b&&this.clearValueOnEnterOrEsc(e),this.applyValueOnRejectSuggestions(e.currentTarget.value,u)):!c&&o===h.Keys.esc?this.clearValueOnEnterOrEsc(e):e.altKey&&o===h.Keys.down&&y()},this.inputOnChange=e=>{const t=this.base.initState();t.syntheticEvent=e;const i=this.props.opened!==void 0?this.props.opened:this.state.opened,r=e.currentTarget,n=r.value;if(this.props.suggest){const a=r.selectionEnd===n.length;let p=this.props.filter!==void 0?this.props.filter:this.state.text;d.isPresent(p)||(p=d.getItemValue(this.value,this.props.textField)||"");const l=p&&p===n,o=p&&p.length>n.length;l||o||!a?this._suggested="":this.suggestValue(n)}this.props.filter===void 0&&(t.data.text=n),this.state.focusedItem!==void 0&&(t.data.focusedItem=void 0),i?this.scrollToFocused=!0:this.base.togglePopup(t),this.base.filterChanged(n,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnEnterOrEsc=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnBlur=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.clearValueOnToggleBtnClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.clearValue()},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ne)},this.handleFocus=e=>{if(this._skipFocus)return;const t=this.base.initState();t.syntheticEvent=e,this.mobileMode&&!this._skipFocus&&(this._skipFocus=!0,this.base.togglePopup(t),this.applyState(t),setTimeout(()=>{this._skipFocus=!1},300)),this.base.handleFocus(e)},this.showLicenseWatermark=!h.validatePackage(K.packageMetadata,{component:"ComboBox"}),this.licenseMessage=h.getLicenseMessage(K.packageMetadata)}get _inputId(){return this.props.id}get document(){if(h.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}get value(){if(this._valueDuringOnChange!==void 0)return this._valueDuringOnChange;if(this.props.value!==void 0)return this.props.value;if(this.state.value!==void 0)return this.state.value;if(this.props.defaultValue!==void 0)return this.props.defaultValue}get index(){const{dataItemKey:s}=this.props,e=d.getFilteredData(this.props),t=this.value;return e.findIndex(i=>d.areSame(i,t,s))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:F.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:F.defaultProps.required}componentDidUpdate(s,e){var y,C;const{dataItemKey:t,virtual:i,groupField:r="",textField:n}=this.props,a=d.getFilteredData(this.props),p=s.virtual?s.virtual.total:0,l=this.props.opened!==void 0?this.props.opened:this.state.opened,o=s.opened!==void 0?s.opened:e.opened;s.data!==a&&this.checkForDuplicatePlainTextRecords();const c=!o&&l,u=this.value;if(this._valueOnDidUpdate=u,this.base.didUpdate(),i&&i.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const I=s.value!==void 0?s.value:e.value;let b=this.hasDuplicates?this.navigationIndex||0:a.findIndex(g=>d.areSame(g,u,t));n&&u&&(b=(y=this.base.getGroupedDataModernMode(a,r))==null?void 0:y.map(g=>g[n]).indexOf(u[n]));const v=!d.areSame(I,u,t);if(c&&i?this.base.scrollToVirtualItem(i,b):c&&!i?(this.onPopupOpened(),a&&a.length!==0&&this.base.resetGroupStickyHeader(a[0][r],this),this.base.scrollToItem(b)):(this.hasDuplicates||l&&o&&u&&v)&&this.base.scrollToItem(b),l&&o&&this.scrollToFocused){const g=(C=this.props.filter?this.props.filter:this.state.text)!=null?C:"";if(g){const{focusedItemIndex:x=d.itemIndexStartsWith}=this.props,S=x(a,g,n);this.base.scrollToItem(S)}else this.base.scrollToItem(0)}}this.scrollToFocused=!1,c&&this._input&&this._input.focus(),this.setValidity()}componentDidMount(){var e;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(e=this.document)!=null&&e.body&&this.observerResize&&this.observerResize.observe(this.document.body),this.checkForDuplicatePlainTextRecords();const s=this.props.name||this.props.id;this.KendoPasteSubscription=h.subscribeToKendoPaste(this._element,{fieldName:s,onValueChange:t=>{this.handleKendoPasteValue(t)}})}componentWillUnmount(){var s,e;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect(),(e=this.KendoPasteSubscription)==null||e.unsubscribe()}render(){const s=N.provideLocalizationService(this).toLanguageString(k.comboArrowBtnAriaLabelExpand,k.messages[k.comboArrowBtnAriaLabelExpand]),e=N.provideLocalizationService(this).toLanguageString(k.comboArrowBtnAriaLabelCollapse,k.messages[k.comboArrowBtnAriaLabelCollapse]),{dir:t,disabled:i,clearButton:r=F.defaultProps.clearButton,label:n,textField:a,className:p,style:l,loading:o,iconClassName:c,virtual:u,size:y,rounded:C,fillMode:I,opened:b=this.state.opened,placeholder:v,svgIcon:g,unstyled:x}=this.props,S=!this.validityStyles||this.validity.valid,D=this.props.filter!==void 0?this.props.filter:this.state.text,A=d.getItemValue(this.value,a),V=d.isPresent(D)?D:A,z=r&&(!!V||d.isPresent(this.value)),B=this.base.vs,T=this.props.id||this._inputId,E=x&&x.uComboBox;B.enabled=u!==void 0,u!==void 0&&(B.skip=u.skip,B.total=u.total,B.pageSize=u.pageSize);const[H,W]=L(this.props.prefix||m.Fragment),[j,U]=L(this.props.suffix||m.Fragment),P=m.createElement(m.Fragment,null,m.createElement("span",{className:h.classNames(h.uComboBox.wrapper({c:E,size:y,rounded:C,fillMode:I,disabled:i,invalid:!S,loading:o,required:this.required}),p),ref:this.componentRef,style:n?{...l,width:void 0}:l,dir:t,onFocus:this.handleFocus},this.props.prefix&&m.createElement(H,{...W}),this.renderSearchBar(V||"",T,v),z&&!o&&m.createElement(ee,{onClick:this.clearButtonClick,key:"clearbutton"}),o&&m.createElement(h.IconWrap,{className:h.classNames(h.uComboBox.loadingIcon({c:E})),name:"loading",key:"loading"}),this.props.suffix&&m.createElement(j,{...U}),m.createElement(te.Button,{tabIndex:-1,type:"button","aria-label":b?e:s,icon:c?void 0:"caret-alt-down",svgIcon:g||se.caretAltDownIcon,iconClass:c,size:y,fillMode:I,className:h.classNames(h.uComboBox.inputButton({c:E})),onClick:this.toggleBtnClick,onMouseDown:G=>G.preventDefault()}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return n?m.createElement(Y.FloatingLabel,{label:n,editorId:T,editorValue:V,editorValid:S,editorDisabled:i,style:{width:l?l.width:void 0},children:P,unstyled:x}):P}onNavigate(s,e,t){const{virtual:i={skip:0}}=this.props,r=d.getFilteredData(this.props),n=this.props.filter?this.props.filter:this.state.text;let a=-1,p;const l=this.base.vs,o=this.value;this._suggested="";const c=this.hasDuplicates&&this.duplicates.indexOf(o)!==-1;if(a=this.getFocusedIndex(c),a!==-1&&!d.isPresent(o))this.handleItemSelect(a,s);else if(n==="")this.handleItemSelect(0,s);else{const u=i.skip+a;p=this.base.navigation.navigate({keyCode:e,current:u,max:(l.enabled?l.total:r.length)-1,min:0,skipItems:t||void 0}),p!==void 0&&this.handleItemSelect(p,s)}this.navigationIndex=p}getCurrentValueDisabledStatus(s,e,t){return s&&e&&e[t]&&e[t].disabled}applyValueOnEnter(s,e){const{textField:t,allowCustom:i,ignoreCase:r}=this.props,n=d.getFilteredData(this.props),a=this.props.opened!==void 0?this.props.opened:this.state.opened,l=d.getItemValue(this.value,t)===s?this.index:d.getItemIndexByText(n,s,t,!1,r),o=l!==-1;let c;if(this._suggested="",o)c=n[l];else if(i)c=t!==void 0?{[t]:s}:s;else return this.selectFocusedItem(s,e);this.triggerOnChange(c,e),a&&this.base.togglePopup(e),this.props.filter===void 0&&this.state.text!==void 0&&(e.data.text=void 0),this.applyState(e)}applyValueOnRejectSuggestions(s,e){const{textField:t,allowCustom:i,ignoreCase:r}=this.props,n=d.getFilteredData(this.props),a=this.props.opened!==void 0?this.props.opened:this.state.opened,p=d.getItemValue(this.value,t);if(this._suggested="",s===p||s===""&&!d.isPresent(p))return this.closeOpenedApplyStateNonMobileMode(e,a),this.applyState(e);const l=d.getItemIndexByText(n,s,t,!0,r),o=l!==-1;let c=null;o?c=n[l]:i&&(c=s?t?{[t]:s}:s:null),this.triggerOnChange(c,e),this.state.text!==void 0&&(e.data.text=void 0,this.base.filterChanged("",e)),this.closeOpenedApplyStateNonMobileMode(e,a),this.applyState(e)}selectFocusedItem(s,e){const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{textField:i,virtual:r={skip:0},focusedItemIndex:n=d.itemIndexStartsWith}=this.props,a=d.getFilteredData(this.props),p=r.skip,l=s===""&&p===0?0:n(a,s,i);return l!==-1?this.handleItemSelect(l+p,e):(this.triggerOnChange(null,e),this.state.text!==void 0&&(e.data.text=void 0)),t&&this.base.togglePopup(e),this.applyState(e)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{groupField:e,adaptiveTitle:t=this.props.label,adaptiveSubtitle:i}=this.props,r=d.getFilteredData(this.props),n=this.props.opened!==void 0?this.props.opened:this.state.opened;let{group:a}=this.state;a===void 0&&e!==void 0&&(a=d.getItemValue(r[0],e));const p={title:t||this.props.label,subTitle:i,expand:n,onClose:l=>this.toggleBtnClick(l),windowWidth:s,mobileFilter:this.renderMobileListFilter()};return m.createElement(oe.AdaptiveMode,{...p},m.createElement(ie.ActionSheetContent,null,m.createElement("div",{className:"k-list-container"},this.listContainerContent())))}renderListContainer(){const s=this.base,{dir:e,header:t,footer:i,groupField:r,size:n,list:a,virtual:p,groupStickyHeaderItemRender:l,unstyled:o}=this.props,c=d.getFilteredData(this.props),u=this.props.opened!==void 0?this.props.opened:this.state.opened,y=s.getPopupSettings(),C=y.width!==void 0?y.width:s.popupWidth,I=o&&o.uComboBox;let{group:b}=this.state;return b===void 0&&r!==void 0&&(b=d.getItemValue(c[0],r)),m.createElement(Q,{width:C,popupSettings:{...y,anchor:y.anchor||this.element,show:u,popupClass:h.classNames(y.popupClass,h.uComboBox.listContainer({c:I,popup:!0}))},dir:e!==void 0?e:this.base.dirCalculated,itemsCount:[c.length]},m.createElement("div",{className:h.classNames(h.uComboBox.list({c:I,list:a,size:n,tableSize:n,virtual:p}))},t&&m.createElement("div",{className:h.classNames(h.uComboBox.listHeader({c:I}))},t),!a&&b&&c.length!==0&&m.createElement(_,{group:b,render:l}),this.renderList(),i&&m.createElement("div",{className:h.classNames(h.uComboBox.listFooter({c:I}),this.props.footerClassName)},i)),this.showLicenseWatermark&&m.createElement(h.WatermarkOverlay,{message:this.licenseMessage}))}renderList(){const s=this.base,{textField:e,dataItemKey:t,listNoDataRender:i,itemRender:r,groupHeaderItemRender:n,virtual:a={skip:0,total:void 0},unstyled:p}=this.props,l=d.getFilteredData(this.props),o=s.getPopupSettings(),c=s.vs,u=a.skip,y=this.props.opened!==void 0?this.props.opened:this.state.opened,C=`translateY(${c.translate}px)`,I=y?this.getFocusedIndex(this.hasDuplicates):void 0,b=this.props.filter!==void 0?this.props.filter:this.state.text,v=d.getItemValue(this.value,e),g=d.isPresent(b)&&b!==v?null:this.value,x=this.props.list||X,S=p&&p.uComboBox;return m.createElement(x,{id:s.listBoxId,virtual:!!a,show:y,data:l,focusedIndex:I,value:g,textField:e,valueField:t,groupField:this.props.groupField,isMultiColumn:this.props.isMultiColumn,optionsGuid:s.guid,hasDuplicates:this.hasDuplicates,listRef:D=>{c.list=this.base.list=D,this.itemHeight=0},wrapperStyle:this.mobileMode?{}:{maxHeight:o.height},wrapperCssClass:h.classNames(h.uComboBox.listContent({c:S,virtual:a})),listStyle:c.enabled?{transform:C}:void 0,key:"listkey",skip:u,onClick:this.handleItemClick,itemRender:r,groupHeaderItemRender:n,noDataRender:i,onMouseDown:D=>D.preventDefault(),onScroll:this.onScroll,wrapperRef:c.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:a.total})}renderSearchBar(s,e,t){const{tabIndex:i,accessKey:r,disabled:n,title:a,ariaLabelledBy:p,ariaDescribedBy:l,dataItemKey:o,virtual:c={skip:0},unstyled:u,inputAttributes:y}=this.props,C=d.getFilteredData(this.props),I=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,v=Math.max(0,C.findIndex(g=>d.areSame(g,b,o)));return this._suggested&&!d.areSame(this._valueOnDidUpdate,b,o)&&(this._suggested=""),m.createElement(J,{id:e,readOnly:I&&this.mobileMode,placeholder:t,tabIndex:i,accessKey:r,title:a,value:s+this._suggested,suggestedText:this._suggested,ref:g=>{this._input=g&&g.input},onClick:this.onInputClick,onKeyDown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:n,expanded:I,owns:this.base.listBoxId,activedescendant:`option-${this.base.guid}-${v+c.skip}`,role:"combobox",ariaLabelledBy:p,ariaLabel:this.props.ariaLabel,ariaDescribedBy:l,ariaRequired:this.required,render:this.props.valueRender,ariaControls:this.base.listBoxId,unstyled:u,inputAttributes:y})}clearValue(){const s=this.base.initState();this._suggested="",this.navigationIndex=void 0,this.base.filterChanged("",s),this.props.filter===void 0&&this.state.text!==void 0&&(s.data.text=void 0),this.triggerOnChange(null,s);const e=this.props.opened!==void 0?this.props.opened:this.state.opened,t=this.mobileMode;e&&!t&&this.base.togglePopup(s),this.applyState(s)}triggerOnChange(s,e){const t=this.value;!this.hasDuplicates&&(!d.isPresent(t)&&!d.isPresent(s)||d.areSame(t,s,this.props.dataItemKey))||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}getFocusedIndex(s){const e=this.value,{textField:t,dataItemKey:i,virtual:r={skip:0},focusedItemIndex:n=d.itemIndexStartsWith,skipDisabledItems:a}=this.props,p=d.getFilteredData(this.props),l=this.props.filter?this.props.filter:this.state.text;return s&&this.navigationIndex!==void 0?this.navigationIndex:d.isPresent(e)&&l===void 0?p.findIndex(o=>d.areSame(o,e,i)):l?n(p,l,t):a&&t&&!l&&r.skip===0?p.findIndex(o=>!o.disabled&&o[t]):r.skip===0?0:-1}suggestValue(s){const{data:e,textField:t}=this.props;this._suggested=d.suggestValue(s,e,t)}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}};F.displayName="ComboBox",F.propTypes={...O.propTypes,size:f.oneOf(["small","medium","large"]),rounded:f.oneOf(["small","medium","large","full","none"]),fillMode:f.oneOf(["solid","flat","outline"]),dataItemKey:f.string,groupField:f.string,isMultiColumn:f.bool,suggest:f.bool,placeholder:f.string,title:f.string,allowCustom:f.bool,ignoreCase:f.bool,clearButton:f.bool,iconClassName:f.string,svgIcon:h.svgIconPropType,validationMessage:f.string,required:f.bool,id:f.string,ariaLabelledBy:f.string,ariaLabel:f.string,ariaDescribedBy:f.string,list:f.any,valueRender:f.func,skipDisabledItems:f.bool,inputAttributes:f.object},F.defaultProps={...O.defaultProps,size:void 0,rounded:void 0,fillMode:void 0,allowCustom:!1,ignoreCase:!1,clearButton:!0,required:!1,isMultiColumn:!1,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let M=F;const R=h.createPropsContext(),q=h.withIdHOC(h.withPropsContext(R,h.withUnstyledHOC(h.withAdaptiveModeContext(M))));q.displayName="KendoReactComboBox";exports.ComboBox=q;exports.ComboBoxPropsContext=R;exports.ComboBoxWithoutContext=M;
|