@progress/kendo-react-dropdowns 8.2.1-develop.5 → 8.3.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +185 -176
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +1 -0
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +130 -127
- package/common/SearchBar.js +1 -1
- package/common/SearchBar.mjs +20 -17
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +5 -0
- package/index.d.ts +5 -0
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),w=require("prop-types"),p=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),L=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(K){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(K){for(const e in K)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(K,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>K[e]})}}return s.default=K,Object.freeze(s)}const u=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:oe}=p.kendoThemeMaps,E=class E extends u.Component{constructor(s){super(s),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:a,dataItemKey:h,defaultItem:n}=this.props,o=c.getFilteredData(this.props),v=a?a.skip:0,l=e===-1&&n!==void 0?n:o[e-v],i=!c.areSame(l,this.value,h);this.triggerOnChange(l,t),i&&this.base.triggerPageChangeCornerItems(l,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>u.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},u.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,size:h,groupField:n,groupStickyHeaderItemRender:o,list:v}=this.props,l=c.getFilteredData(this.props),i=this.base,g=i.getPopupSettings(),r=this.props.opened!==void 0?this.props.opened:this.state.opened,y=g.width!==void 0?g.width:i.popupWidth,I={dir:a!==void 0?a:i.dirCalculated,width:y,popupSettings:{...g,popupClass:p.classNames(g.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:g.anchor||this.element,show:r,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:f}=this.state;return f===void 0&&n!==void 0&&(f=c.getItemValue(l[0],n)),u.createElement(Q,{...I},this.renderListFilter(),e&&u.createElement("div",{className:"k-list-header"},e),u.createElement("div",{className:p.classNames("k-list",{[`k-list-${z[h]||h}`]:h,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!v&&f&&l.length!==0&&u.createElement(H,{group:f,groupMode:"modern",render:o}),this.renderList()),t&&u.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:a={skip:0,total:void 0},groupHeaderItemRender:h,listNoDataRender:n,itemRender:o}=this.props,v=c.getFilteredData(this.props),l=this.base.vs,i=a.skip,g=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.getPopupSettings(),y=`translateY(${l.translate}px)`;return u.createElement(ee,{id:this._listboxId,show:g,data:v.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:I=>l.list=this.base.list=I,wrapperStyle:{maxHeight:r.height},wrapperCssClass:"k-list-content",listStyle:l.enabled?{transform:y}:void 0,key:"listkey",skip:i,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:h,noDataRender:n,onScroll:this.onScroll,wrapperRef:l.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:a.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:h}=this.props;let n=c.getFilteredData(this.props);if(!(!h||!n.length)&&h){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),l=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,h);let i=n[0][h];for(let g=1;g<n.length&&!(o*g>l);g++)n[g]&&n[g][h]&&(i=n[g][h]);i!==this.state.group&&this.setState({group:i})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&u.createElement(X,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:a}=this.props;return t!==void 0&&u.createElement(Z,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,a),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,a=c.getFilteredData(this.props);let h=a.map((D,_)=>({item:D,itemIndex:_}));const n=this.searchState.word,o=this.searchState.last,v=c.sameCharsOnly(n,o);let l=h.length,i=Math.max(0,a.findIndex(D=>c.areSame(D,this.value,t))),g;this.props.defaultItem&&(g={item:this.props.defaultItem,itemIndex:-1},l+=1,i+=1),i+=v?1:0,h=c.shuffleData(h,i,g);let r,y,I,f=0;const{textField:d,ignoreCase:x}=this.props;for(;f<l;f++)if(r=c.getItemValue(h[f].item,d),y=v&&c.matchText(r,o,x),I=c.matchText(r,n,x),y||I){f=h[f].itemIndex;break}if(f!==l){const D=this.base.initState();D.syntheticEvent=e,this.handleItemSelect(f,D),this.applyState(D),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:a,defaultItem:h,leftRightKeysNavigation:n=!0,virtual:o={skip:0,total:0,pageSize:0},dataItemKey:v,groupField:l="",textField:i,skipDisabledItems:g=!0}=this.props,r=c.getFilteredData(this.props),y=this.value,I=r.findIndex(k=>c.areSame(k,y,v)),f=this.props.opened!==void 0?this.props.opened:this.state.opened,d=e.keyCode,x=d===p.Keys.home||d===p.Keys.end,D=d===p.Keys.up||d===p.Keys.down,_=!f&&(e.altKey&&d===p.Keys.down||d===p.Keys.enter||d===p.Keys.space),C=f&&(e.altKey&&d===p.Keys.up||d===p.Keys.esc),P=n&&(d===p.Keys.left||d===p.Keys.right),M=D||P&&!t||x,S=this.base.initState();if(S.syntheticEvent=e,!a){if(x&&this.base.vs.enabled)d===p.Keys.home?o.skip!==0?(this.base.triggerOnPageChange(S,0,o.pageSize),this._navigated=!0):this.triggerOnChange(r[0],S):o.skip<o.total-o.pageSize?(this.base.triggerOnPageChange(S,o.total-o.pageSize,o.pageSize),this._navigated=!0):this.triggerOnChange(r[r.length-1],S);else if(f&&d===p.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(f&&d===p.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(f&&d===p.Keys.enter){const k=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(r,k)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(k,S),this.base.togglePopup(S),e.preventDefault()}else if(_||C)C&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(M){if(this._lastKeypressIsFilter=!1,l!==""&&i)if(!g&&f)this.onNavigate(S,d);else{let k;if(d===p.Keys.down||d===p.Keys.right){const b=r.slice(I+1).find(m=>!m.disabled&&m[i]);k=b&&r.findIndex(m=>m[i]===b[i])}else if(d===p.Keys.up||d===p.Keys.left){let b;if(I===0&&h)k=-1;else if(I===-1)b=r,k=r.findIndex(m=>!m.disabled&&m[i]);else{b=r.slice(0,I);let m=b.pop();for(;m&&m.disabled;)m=b.pop();k=m&&r.findIndex(N=>N[i]===m[i])}}if(k!==void 0){const b=k-I;this.onNavigate(S,d,b)}else k===void 0&&r.findIndex(b=>b[i]===y[i])===r.length-1&&this.onNavigate(S,d)}else if(!g&&f||x)this.onNavigate(S,d);else if(i){let k;if(d===p.Keys.down||d===p.Keys.right){const b=r.slice(I+1).find(m=>!m.disabled&&m[i]);k=b&&r.findIndex(m=>m[i]===b[i])}else if(d===p.Keys.up||d===p.Keys.left){let b;if(I===0&&h)k=-1;else if(I===-1)b=r,k=r.find(m=>!m.disabled&&m[i]);else{b=r.slice(0,I);let m=b.pop();for(;m&&m.disabled;)m=b.pop();k=m&&r.findIndex(N=>N[i]===m[i])}}if(k!==void 0){const b=k-I;this.onNavigate(S,d,b)}else k===void 0&&r.findIndex(b=>b[i]===y[i])===r.length-1&&this.onNavigate(S,d)}else this.onNavigate(S,d);e.preventDefault()}this.applyState(S)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:a}=this.props,{windowWidth:h=0}=this.state,n=h<=L.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===p.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ae)},p.validatePackage(te.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(p.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!c.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{dataItemKey:s}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(a=>c.areSame(a,t,s))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:E.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:E.defaultProps.required}componentDidUpdate(s,e){var r;const{dataItemKey:t,virtual:a,groupField:h="",textField:n}=this.props,o=c.getFilteredData(this.props),v=s.virtual?s.virtual.total:0,l=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened,g=!i&&l;if(this.base.didUpdate(),this.base.getPopupSettings().animate||g&&this.onPopupOpened(),a&&a.total!==v)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const y=this.value,I=s.value!==void 0?s.value:e.value;let f=o.findIndex(x=>c.areSame(x,y,t));h!==""&&y&&n&&(f=(r=this.base.getGroupedDataModernMode(o,h))==null?void 0:r.map(x=>x[n]).indexOf(y[n]));const d=!c.areSame(I,y,t);g&&a?this.base.scrollToVirtualItem(a,f):g&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][h],this),this.base.scrollToItem(f)):l&&i&&y&&d&&!this._navigated?this.base.scrollToItem(f,this.base.vs.enabled):l&&i&&this._navigated&&(this._navigated&&a&&a.skip===0?this.base.vs.reset():this._navigated&&a&&a.skip===a.total-a.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,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)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:h,virtual:n,size:o,rounded:v,fillMode:l,adaptive:i}=this.props,{windowWidth:g=0}=this.state,r=this.props.opened!==void 0?this.props.opened:this.state.opened,y=this.value,I=c.getItemValue(y,this.props.textField),f=!this.validityStyles||this.validity.valid,d=this.base,x=d.vs,D=g<=L.MOBILE_MEDIUM_DEVISE&&i;x.enabled=n!==void 0,n!==void 0&&(d.vs.skip=n.skip,d.vs.total=n.total,d.vs.pageSize=n.pageSize);const{dataItemKey:_,disabled:C,tabIndex:P,loading:M,iconClassName:S,svgIcon:k,valueRender:b}=this.props,m=c.getFilteredData(this.props),{focused:N}=this.state,$=m.findIndex(F=>c.areSame(F,y,_)),V=u.createElement("span",{id:this._inputId,className:"k-input-inner"},I&&u.createElement("span",{className:"k-input-value-text"},I)),j=b!==void 0?b.call(void 0,V,y):V,A=u.createElement(u.Fragment,null,u.createElement("span",{ref:this.componentRef,className:p.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${oe[v]||v}`]:v,[`k-picker-${l}`]:l,"k-focus":N,"k-disabled":C,"k-invalid":!f,"k-loading":M,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:h,onMouseDown:r?F=>{F.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),F.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:p.getTabIndex(P,C),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:C?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":C||void 0,"aria-haspopup":"listbox","aria-expanded":r||!1,"aria-owns":this._listboxId,"aria-activedescendant":r?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,id:this.props.id,title:this.props.title},j,M&&u.createElement(p.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:l,iconClass:S,className:"k-input-button",rounded:null,themeColor:"base",icon:S?void 0:"caret-alt-down",svgIcon:k||B.caretAltDownIcon,onMouseDown:F=>this.state.focused&&F.preventDefault()}),this.dummySelect(y),!D&&this.renderListContainer()),D&&this.renderAdaptiveListContainer());return a?u.createElement(J.FloatingLabel,{label:a,editorValue:I,editorValid:f,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{defaultItem:a,dataItemKey:h,virtual:n={skip:0,total:0,pageSize:0}}=this.props,o=c.getFilteredData(this.props),v=this.base.vs,l=this.value,i=o.findIndex(r=>c.areSame(r,l,h)),g=this.base.navigation.navigate({current:n.skip+i,max:(v.enabled?n.total:o.length)-1,min:a!==void 0?-1:0,keyCode:e,skipItems:t||void 0});g!==void 0&&this.handleItemSelect(g,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:h,groupField:n,groupStickyHeaderItemRender:o,list:v}=this.props,l=c.getFilteredData(this.props),i=this.props.opened!==void 0?this.props.opened:this.state.opened,g={navigatable:!1,navigatableElements:[],expand:i,animation:!0,onClose:y=>this.handleWrapperClick(y),animationStyles:s<=L.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=L.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:r}=this.state;return r===void 0&&n!==void 0&&(r=c.getItemValue(l[0],n)),u.createElement(q.ActionSheet,{...g},u.createElement(q.ActionSheetHeader,{className:"k-text-center"},u.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},u.createElement("div",{className:"k-actionsheet-title"},u.createElement("div",null,h)),u.createElement("div",{className:"k-actionsheet-actions"},u.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),u.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),u.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&u.createElement("div",{className:"k-list-header"},e),u.createElement("div",{className:p.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!v&&r&&l.length!==0&&u.createElement(H,{group:r,groupMode:"modern",render:o}),this.renderList()),t&&u.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{textField:e,dataItemKey:t,virtual:a={skip:0},focusedItemIndex:h=c.itemIndexStartsWith,filterable:n,skipDisabledItems:o=!0}=this.props,v=c.getFilteredData(this.props),l=this.props.filter?this.props.filter:this.state.text;return o&&e&&!l&&!s?v.findIndex(i=>!i.disabled&&i[e]):c.isPresent(s)&&l===void 0||n&&l===""?v.findIndex(i=>c.areSame(i,s,t)):l?this._lastKeypressIsFilter?h(v,l,e):v.findIndex(i=>c.areSame(i,s,t)):a.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){c.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const s=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};E.displayName="DropDownList",E.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:p.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,renderListFilterWrapper:w.bool,...R.propTypes},E.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=E;const U=p.createPropsContext(),G=p.withIdHOC(p.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),w=require("prop-types"),p=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),c=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),L=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(K){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(K){for(const e in K)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(K,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>K[e]})}}return s.default=K,Object.freeze(s)}const u=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:oe}=p.kendoThemeMaps,E=class E extends u.Component{constructor(s){super(s),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus({preventScroll:!0})},this.handleItemSelect=(e,t)=>{const{virtual:a,dataItemKey:h,defaultItem:n}=this.props,o=c.getFilteredData(this.props),v=a?a.skip:0,l=e===-1&&n!==void 0?n:o[e-v],i=!c.areSame(l,this.value,h);this.triggerOnChange(l,t),i&&this.base.triggerPageChangeCornerItems(l,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>u.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},u.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,size:h,groupField:n,groupStickyHeaderItemRender:o,list:v}=this.props,l=c.getFilteredData(this.props),i=this.base,g=i.getPopupSettings(),r=this.props.opened!==void 0?this.props.opened:this.state.opened,I=g.width!==void 0?g.width:i.popupWidth,y={dir:a!==void 0?a:i.dirCalculated,width:I,popupSettings:{...g,popupClass:p.classNames(g.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:g.anchor||this.element,show:r,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:f}=this.state;return f===void 0&&n!==void 0&&(f=c.getItemValue(l[0],n)),u.createElement(Q,{...y},this.renderListFilter(),e&&u.createElement("div",{className:"k-list-header"},e),u.createElement("div",{className:p.classNames("k-list",{[`k-list-${z[h]||h}`]:h,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!v&&f&&l.length!==0&&u.createElement(H,{group:f,groupMode:"modern",render:o}),this.renderList()),t&&u.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{textField:e,dataItemKey:t,virtual:a={skip:0,total:void 0},groupHeaderItemRender:h,listNoDataRender:n,itemRender:o}=this.props,v=c.getFilteredData(this.props),l=this.base.vs,i=a.skip,g=this.props.opened!==void 0?this.props.opened:this.state.opened,r=this.base.getPopupSettings(),I=`translateY(${l.translate}px)`;return u.createElement(ee,{id:this._listboxId,show:g,data:v.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:e,valueField:t,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:y=>l.list=this.base.list=y,wrapperStyle:{maxHeight:r.height},wrapperCssClass:"k-list-content",listStyle:l.enabled?{transform:I}:void 0,key:"listkey",skip:i,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:h,noDataRender:n,onScroll:this.onScroll,wrapperRef:l.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:a.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:h}=this.props;let n=c.getFilteredData(this.props);if(!(!h||!n.length)&&h){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),l=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,h);let i=n[0][h];for(let g=1;g<n.length&&!(o*g>l);g++)n[g]&&n[g][h]&&(i=n[g][h]);i!==this.state.group&&this.setState({group:i})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&u.createElement(X,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,renderListFilterWrapper:!0})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:a}=this.props;return t!==void 0&&u.createElement(Z,{defaultItem:t,textField:e,selected:c.areSame(this.value,t,a),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{dataItemKey:t}=this.props,a=c.getFilteredData(this.props);let h=a.map((D,_)=>({item:D,itemIndex:_}));const n=this.searchState.word,o=this.searchState.last,v=c.sameCharsOnly(n,o);let l=h.length,i=Math.max(0,a.findIndex(D=>c.areSame(D,this.value,t))),g;this.props.defaultItem&&(g={item:this.props.defaultItem,itemIndex:-1},l+=1,i+=1),i+=v?1:0,h=c.shuffleData(h,i,g);let r,I,y,f=0;const{textField:d,ignoreCase:x}=this.props;for(;f<l;f++)if(r=c.getItemValue(h[f].item,d),I=v&&c.matchText(r,o,x),y=c.matchText(r,n,x),I||y){f=h[f].itemIndex;break}if(f!==l){const D=this.base.initState();D.syntheticEvent=e,this.handleItemSelect(f,D),this.applyState(D),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{filterable:t,disabled:a,defaultItem:h,leftRightKeysNavigation:n=!0,virtual:o={skip:0,total:0,pageSize:0},dataItemKey:v,groupField:l="",textField:i,skipDisabledItems:g=!0}=this.props,r=c.getFilteredData(this.props),I=this.value,y=r.findIndex(k=>c.areSame(k,I,v)),f=this.props.opened!==void 0?this.props.opened:this.state.opened,d=e.keyCode,x=d===p.Keys.home||d===p.Keys.end,D=d===p.Keys.up||d===p.Keys.down,_=!f&&(e.altKey&&d===p.Keys.down||d===p.Keys.enter||d===p.Keys.space),C=f&&(e.altKey&&d===p.Keys.up||d===p.Keys.esc),P=n&&(d===p.Keys.left||d===p.Keys.right),M=D||P&&!t||x,S=this.base.initState();if(S.syntheticEvent=e,!a){if(x&&this.base.vs.enabled)d===p.Keys.home?o.skip!==0?(this.base.triggerOnPageChange(S,0,o.pageSize),this._navigated=!0):this.triggerOnChange(r[0],S):o.skip<o.total-o.pageSize?(this.base.triggerOnPageChange(S,o.total-o.pageSize,o.pageSize),this._navigated=!0):this.triggerOnChange(r[r.length-1],S);else if(f&&d===p.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(f&&d===p.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if(f&&d===p.Keys.enter){const k=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(r,k)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(k,S),this.base.togglePopup(S),e.preventDefault()}else if(_||C)C&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(M){if(this._lastKeypressIsFilter=!1,l!==""&&i)if(!g&&f)this.onNavigate(S,d);else{let k;if(d===p.Keys.down||d===p.Keys.right){const b=r.slice(y+1).find(m=>!m.disabled&&m[i]);k=b&&r.findIndex(m=>m[i]===b[i])}else if(d===p.Keys.up||d===p.Keys.left){let b;if(y===0&&h)k=-1;else if(y===-1)b=r,k=r.findIndex(m=>!m.disabled&&m[i]);else{b=r.slice(0,y);let m=b.pop();for(;m&&m.disabled;)m=b.pop();k=m&&r.findIndex(N=>N[i]===m[i])}}if(k!==void 0){const b=k-y;this.onNavigate(S,d,b)}else k===void 0&&r.findIndex(b=>b[i]===I[i])===r.length-1&&this.onNavigate(S,d)}else if(!g&&f||x)this.onNavigate(S,d);else if(i){let k;if(d===p.Keys.down||d===p.Keys.right){const b=r.slice(y+1).find(m=>!m.disabled&&m[i]);k=b&&r.findIndex(m=>m[i]===b[i])}else if(d===p.Keys.up||d===p.Keys.left){let b;if(y===0&&h)k=-1;else if(y===-1)b=r,k=r.find(m=>!m.disabled&&m[i]);else{b=r.slice(0,y);let m=b.pop();for(;m&&m.disabled;)m=b.pop();k=m&&r.findIndex(N=>N[i]===m[i])}}if(k!==void 0){const b=k-y;this.onNavigate(S,d,b)}else k===void 0&&r.findIndex(b=>b[i]===I[i])===r.length-1&&this.onNavigate(S,d)}else this.onNavigate(S,d);e.preventDefault()}this.applyState(S)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:a}=this.props,{windowWidth:h=0}=this.state,n=h<=L.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===p.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ae)},p.validatePackage(te.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(p.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!c.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{dataItemKey:s}=this.props,e=c.getFilteredData(this.props),t=this.value;return e.findIndex(a=>c.areSame(a,t,s))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:E.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:E.defaultProps.required}componentDidUpdate(s,e){var r;const{dataItemKey:t,virtual:a,groupField:h="",textField:n}=this.props,o=c.getFilteredData(this.props),v=s.virtual?s.virtual.total:0,l=this.props.opened!==void 0?this.props.opened:this.state.opened,i=s.opened!==void 0?s.opened:e.opened,g=!i&&l;if(this.base.didUpdate(),this.base.getPopupSettings().animate||g&&this.onPopupOpened(),a&&a.total!==v)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const I=this.value,y=s.value!==void 0?s.value:e.value;let f=o.findIndex(x=>c.areSame(x,I,t));h!==""&&I&&n&&(f=(r=this.base.getGroupedDataModernMode(o,h))==null?void 0:r.map(x=>x[n]).indexOf(I[n]));const d=!c.areSame(y,I,t);g&&a?this.base.scrollToVirtualItem(a,f):g&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][h],this),this.base.scrollToItem(f)):l&&i&&I&&d&&!this._navigated?this.base.scrollToItem(f,this.base.vs.enabled):l&&i&&this._navigated&&(this._navigated&&a&&a.skip===0?this.base.vs.reset():this._navigated&&a&&a.skip===a.total-a.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,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)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:h,virtual:n,size:o,rounded:v,fillMode:l,adaptive:i}=this.props,{windowWidth:g=0}=this.state,r=this.props.opened!==void 0?this.props.opened:this.state.opened,I=this.value,y=c.getItemValue(I,this.props.textField),f=!this.validityStyles||this.validity.valid,d=this.base,x=d.vs,D=g<=L.MOBILE_MEDIUM_DEVISE&&i;x.enabled=n!==void 0,n!==void 0&&(d.vs.skip=n.skip,d.vs.total=n.total,d.vs.pageSize=n.pageSize);const{dataItemKey:_,disabled:C,tabIndex:P,loading:M,iconClassName:S,svgIcon:k,valueRender:b}=this.props,m=c.getFilteredData(this.props),{focused:N}=this.state,$=m.findIndex(F=>c.areSame(F,I,_)),V=u.createElement("span",{id:this._inputId,className:"k-input-inner"},y&&u.createElement("span",{className:"k-input-value-text"},y)),j=b!==void 0?b.call(void 0,V,I):V,A=u.createElement(u.Fragment,null,u.createElement("span",{ref:this.componentRef,className:p.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${oe[v]||v}`]:v,[`k-picker-${l}`]:l,"k-focus":N,"k-disabled":C,"k-invalid":!f,"k-loading":M,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:h,onMouseDown:r?F=>{F.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),F.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:p.getTabIndex(P,C),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:C?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":C||void 0,"aria-haspopup":"listbox","aria-expanded":r||!1,"aria-owns":this._listboxId,"aria-activedescendant":r?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,"aria-controls":this._listboxId,id:this.props.id,title:this.props.title},j,M&&u.createElement(p.IconWrap,{className:"k-input-loading-icon",name:"loading"}),u.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:l,iconClass:S,className:"k-input-button",rounded:null,themeColor:"base",icon:S?void 0:"caret-alt-down",svgIcon:k||B.caretAltDownIcon,onMouseDown:F=>this.state.focused&&F.preventDefault()}),this.dummySelect(I),!D&&this.renderListContainer()),D&&this.renderAdaptiveListContainer());return a?u.createElement(J.FloatingLabel,{label:a,editorValue:y,editorValid:f,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{defaultItem:a,dataItemKey:h,virtual:n={skip:0,total:0,pageSize:0}}=this.props,o=c.getFilteredData(this.props),v=this.base.vs,l=this.value,i=o.findIndex(r=>c.areSame(r,l,h)),g=this.base.navigation.navigate({current:n.skip+i,max:(v.enabled?n.total:o.length)-1,min:a!==void 0?-1:0,keyCode:e,skipItems:t||void 0});g!==void 0&&this.handleItemSelect(g,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:h,groupField:n,groupStickyHeaderItemRender:o,list:v}=this.props,l=c.getFilteredData(this.props),i=this.props.opened!==void 0?this.props.opened:this.state.opened,g={navigatable:!1,navigatableElements:[],expand:i,animation:!0,onClose:I=>this.handleWrapperClick(I),animationStyles:s<=L.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=L.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:r}=this.state;return r===void 0&&n!==void 0&&(r=c.getItemValue(l[0],n)),u.createElement(q.ActionSheet,{...g},u.createElement(q.ActionSheetHeader,{className:"k-text-center"},u.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},u.createElement("div",{className:"k-actionsheet-title"},u.createElement("div",null,h)),u.createElement("div",{className:"k-actionsheet-actions"},u.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),u.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),u.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&u.createElement("div",{className:"k-list-header"},e),u.createElement("div",{className:p.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!v&&r&&l.length!==0&&u.createElement(H,{group:r,groupMode:"modern",render:o}),this.renderList()),t&&u.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{textField:e,dataItemKey:t,virtual:a={skip:0},focusedItemIndex:h=c.itemIndexStartsWith,filterable:n,skipDisabledItems:o=!0}=this.props,v=c.getFilteredData(this.props),l=this.props.filter?this.props.filter:this.state.text;return o&&e&&!l&&!s?v.findIndex(i=>!i.disabled&&i[e]):c.isPresent(s)&&l===void 0||n&&l===""?v.findIndex(i=>c.areSame(i,s,t)):l?this._lastKeypressIsFilter?h(v,l,e):v.findIndex(i=>c.areSame(i,s,t)):a.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){c.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const s=c.getFilteredData(this.props),e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};E.displayName="DropDownList",E.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:p.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,renderListFilterWrapper:w.bool,...R.propTypes},E.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=E;const U=p.createPropsContext(),G=p.withIdHOC(p.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;
|
|
@@ -456,6 +456,7 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
|
|
|
456
456
|
"aria-label": this.props.ariaLabel || this.props.label,
|
|
457
457
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
458
458
|
"aria-describedby": this.props.ariaDescribedBy || this._inputId,
|
|
459
|
+
"aria-controls": this._listboxId,
|
|
459
460
|
id: this.props.id,
|
|
460
461
|
title: this.props.title
|
|
461
462
|
},
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),v=require("prop-types"),h=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),K=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:w,roundedMap:ne}=h.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new K(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{dataItemKey:o,virtual:s}=this.props,a=g.getFilteredData(this.props),c=s?s.skip:0,u=a[t-c],d=this.value.findIndex(m=>g.areSame(m,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(m=>g.areSame(m,u,o));let i=[];d!==-1?(i=this.value,i.splice(d,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(u,e)},this.onTagDelete=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,t,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(t,e)=>{const{allowCustom:o,virtual:s}=this.props,a=g.getFilteredData(this.props),c=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:d}=this.getFocusedState(),i=o&&u,l=a[t-c];l&&d!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=D.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),o=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=o),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(o,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{textField:e,groupField:o}=this.props,s=g.getFilteredData(this.props),a=t.keyCode,c=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:d,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=t,!c&&this.value.length>0&&(a===h.Keys.left||a===h.Keys.right||a===h.Keys.home||a===h.Keys.end||a===h.Keys.delete||a===h.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,l);const m=()=>{t.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===h.Keys.pageUp)t.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===h.Keys.pageDown)t.preventDefault(),this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const p=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(p,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.end){const r=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,l),this.updateStateOnKeyboardNavigation(r,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.home){const r=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(r,l)}else if(t.shiftKey&&t.keyCode===h.Keys.up){let r;const p=this.getLastSelectedOrDeselectedIndex(1,i);p===null?r=i!==0?s.slice(i-1,i):[s[i]]:p===i?r=[s[p-1]]:i>=0&&(r=p>i?s.slice(i-1,p):s.slice(p-1,i)),r&&r.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(r,l))}else if(t.shiftKey&&t.keyCode===h.Keys.down){let r;const p=this.getLastSelectedOrDeselectedIndex(0,i);p===null?r=i!==s.length-1?s.slice(i,i+1):[s[i]]:p===i?r=s.slice(i,i+2):i>=0&&(r=p>i?s.slice(i+1,p+1):s.slice(p,i+2)),r&&r.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(r,l))}else if(t.altKey&&a===h.Keys.up)m();else if(a===h.Keys.up||a===h.Keys.down){if(o!==""&&e)if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let r=0;if(a===h.Keys.down||a===h.Keys.right){const p=s.slice(i+1).find(y=>!y.disabled&&y[e]);r=p&&s.findIndex(y=>y[e]===p[e])}else if(a===h.Keys.up||a===h.Keys.left){let p;if(i===-1)p=s,r=s.findIndex(y=>!y.disabled&&y[e]);else{p=s.slice(0,i);let y=p.pop();for(;y&&y.disabled;)y=p.pop();r=y&&s.findIndex(C=>C[e]===y[e])}}if(r){const p=r-i;this.onNavigate(l,a,p)}else r!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let r=null;if(a===h.Keys.down||a===h.Keys.right)r=s.slice(i+1).find(p=>!p.disabled);else if(a===h.Keys.up||a===h.Keys.left){const p=s.slice(0,i);for(r=p.pop();r&&r.disabled;)r=p.pop()}if(r){const p=r.id-i-1;this.onNavigate(l,a,p)}else this.onNavigate(l,a)}this.applyState(l),t.preventDefault()}else a===h.Keys.enter?(t.preventDefault(),this.props.allowCustom&&c&&d===null?this.customItemSelect(t):d&&d.disabled?m():this.selectFocusedItem(t)):a===h.Keys.esc&&m();else t.altKey&&a===h.Keys.down?m():a===h.Keys.esc&&this.clearButtonClick(t)},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:c,list:u}=this.props,d=g.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),m=o&&i&&f.createElement("div",{className:h.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:h.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(h.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:r}=this.state;return r===void 0&&c!==void 0&&(r=g.getItemValue(d[0],c)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),m,f.createElement("div",{className:h.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&r&&d.length!==0&&f.createElement(Y,{group:r,groupMode:"modern",render:a}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e}=this.props,o=g.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:t.popupWidth,c={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...s,popupClass:h.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(G,{...c},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:o}=this.props,{windowWidth:s=0}=this.state,a=o!==void 0?o:this.state.text;this.localization=ie.provideLocalizationService(this);const c=e?f.createElement(oe,{value:a,ref:d=>this._adaptiveInput=d&&d.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,u={adaptiveTitle:t,expand:this.opened,onClose:d=>this.onCancel(d),windowWidth:s,mobileFilter:c,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...u},f.createElement(te.ActionSheetContent,{className:"!k-overflow-hidden"},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{textField:t,listNoDataRender:e,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:c={skip:0,total:void 0}}=this.props,u=g.getFilteredData(this.props),d=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),m=`translateY(${d.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-c.skip,value:this.value,textField:t,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:r=>{d.list=this.base.list=r},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:d.enabled?{transform:m}:void 0,key:"listKey",skip:c.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:e,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:d.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:c.total})},this.onScroll=t=>{const{vs:e,list:o}=this.base;e.scrollHandler(t);const{groupField:s}=this.props;let a=g.getFilteredData(this.props);if(!(!s||!a.length)&&s){const c=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:o?o.children[0].offsetHeight:0),d=t.target.scrollTop-e.skip*c;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][s];for(let l=1;l<a.length&&!(c*l>d);l++)a[l]&&a[l][s]&&(i=a[l][s]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!e)return;const s=this.base.initState();s.syntheticEvent=t;const a=o?{[o]:e}:e;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const c=[...this.value,a];this.triggerOnChange(c,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const o=this.base.initState();o.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.handleItemSelect(t,o),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(o),e.stopPropagation(),this.applyState(o)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:o,filterable:s}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},h.validatePackage(X.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 opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(o=>{e.push({text:g.getItemValue(o,t),data:[o]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var m;const{virtual:e,groupField:o=""}=this.props,s=g.getFilteredData(this.props),a=e?e.skip:0,c=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:t.opened,d=!u&&this.opened,i=u&&!this.opened,l=this.base.getPopupSettings();if(this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),e&&e.total!==c)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:r,focusedIndex:p}=this.getFocusedState();o!==""&&(p=(m=this.base.getGroupedDataModernMode(s,o))==null?void 0:m.indexOf(r)),d&&e?this.base.scrollToVirtualItem(e,p-a):d&&!e?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(p)):this.opened&&u&&r&&this.scrollToFocused&&this.base.scrollToItem(p-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:o}=this.props,s=g.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:c,focusedIndex:u}=this.getFocusedState(),d=o&&a,i=_(c),l=this.base,m=l.vs;if(this.opened&&t===h.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const r=l.navigation.navigate({keyCode:t,current:u,max:(m.enabled?m.total:s.length)-1,min:d?-1:0,skipItems:e||void 0});r!==void 0&&(this.itemFocus(r,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:o,disabled:s,textField:a,dataItemKey:c,virtual:u,size:d,rounded:i,fillMode:l,loading:m,filter:r}=this.props,{text:p,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,T=this.props.id||this._inputId;k.enabled=u!==void 0,u!==void 0&&(k.skip=u.skip,k.total=u.total,k.pageSize=u.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(r!==void 0?r:p)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:h.classNames("k-multiselect k-input",t,{[`k-input-${w[d]||d}`]:d,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":m,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:o,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:h.classNames("k-input-values")},f.createElement("div",{className:h.classNames("k-chip-list",{[`k-chip-list-${w[d]||d}`]:d}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>g.matchTags(H,C,c)):void 0,size:d})),this.renderSearchBar(T)),m&&f.createElement(h.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:T,editorValue:p||g.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:c}=this.props,u=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:d}=this.getFocusedState(),i=this.value.length===0&&!u?a:void 0,l=o&&o.length>0?void 0:a,m=t===D.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${d}`;return f.createElement(Q,{id:n,size:Math.max((i||"").length,u.length,1),tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,placeholder:this.mobileMode&&this.opened?l:i,value:u,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:m,ariaDescribedBy:`tagslist-${this.base.guid}${c?" "+c:""}`,ariaLabelledBy:this.props.ariaLabelledBy,ariaRequired:this.required})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let c=o?s.findIndex(i=>g.matchTags(i,o,a)):-1,u;const d=c!==-1;if(e===h.Keys.left)d?c=Math.max(0,c-1):c=s.length-1,u=s[c];else if(e===h.Keys.right)c===s.length-1?u=void 0:d&&(c=Math.min(s.length-1,c+1),u=s[c]);else if(e===h.Keys.home&&!n.shiftKey)u=s[0];else if(e===h.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(e===h.Keys.delete){if(d){const i=this.value;g.removeDataItems(i,s[c].data,a),this.triggerOnChange(i,t)}}else if(e===h.Keys.backspace){const i=this.value;if(d)g.removeDataItems(i,s[c].data,a),this.triggerOnChange(i,t);else if(!d&&s.length){const l=s.pop();g.removeDataItems(i,l.data,a),this.triggerOnChange(i,t)}}u!==o&&(t.data.focusedTag=u,t.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{virtual:e}=this.props,o=g.getFilteredData(this.props),{focusedIndex:s}=t||this.getFocusedState(),a=e?e.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:c=g.itemIndexStartsWith,skipDisabledItems:u}=this.props,d=g.getFilteredData(this.props),i=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:d[n-i],focusedType:1};const m=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return l=c(d,t,a),{focusedItem:d[l],focusedIndex:l+i,focusedType:1};if(m.length){const r=m[m.length-1];return l=d.findIndex(p=>g.areSame(p,r,o)),d[l]!==void 0?{focusedIndex:l+i,focusedItem:d[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!t&&i===0){const r=d.findIndex(p=>!p.disabled&&p[a]);return{focusedIndex:r,focusedItem:d[r-i],focusedType:1}}return i===0?{focusedItem:d[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...K.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,onCancel:v.func,skipDisabledItems:v.bool},b.defaultProps={...K.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=b;const N=h.createPropsContext(),R=h.withIdHOC(h.withPropsContext(N,F));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=F;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),v=require("prop-types"),h=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),K=require("../common/DropDownBase.js"),D=require("../common/settings.js"),m=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:w,roundedMap:ne}=h.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new K(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{dataItemKey:o,virtual:s}=this.props,a=m.getFilteredData(this.props),p=s?s.skip:0,u=a[t-p],r=this.value.findIndex(g=>m.areSame(g,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(g=>m.areSame(g,u,o));let i=[];r!==-1?(i=this.value,i.splice(r,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(u,e)},this.onTagDelete=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;m.removeDataItems(s,t,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(t,e)=>{const{allowCustom:o,virtual:s}=this.props,a=m.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),i=o&&u,d=a[t-p];d&&r!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=D.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(d,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),o=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=o),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(o,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const o=this.props.filter!==void 0?this.props.filter:this.state.text;m.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{textField:e,groupField:o}=this.props,s=m.getFilteredData(this.props),a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:r,focusedIndex:i}=this.getFocusedState(),d=this.base.initState();if(d.syntheticEvent=t,!p&&this.value.length>0&&(a===h.Keys.left||a===h.Keys.right||a===h.Keys.home||a===h.Keys.end||a===h.Keys.delete||a===h.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,d);const g=()=>{t.preventDefault(),this.base.togglePopup(d),this.applyState(d)};if(this.opened)if(a===h.Keys.pageUp)t.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===h.Keys.pageDown)t.preventDefault(),this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,d)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.end){const l=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,d),this.updateStateOnKeyboardNavigation(l,d)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.home){const l=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,d),this.updateStateOnKeyboardNavigation(l,d)}else if(t.shiftKey&&t.keyCode===h.Keys.up){let l;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?l=i!==0?s.slice(i-1,i):[s[i]]:c===i?l=[s[c-1]]:i>=0&&(l=c>i?s.slice(i-1,c):s.slice(c-1,i)),l&&l.length>0&&(i>=1&&this.itemFocus(i-1,d),this.updateStateOnKeyboardNavigation(l,d))}else if(t.shiftKey&&t.keyCode===h.Keys.down){let l;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?l=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?l=s.slice(i,i+2):i>=0&&(l=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),l&&l.length>=1&&(this.itemFocus(i+1,d),this.updateStateOnKeyboardNavigation(l,d))}else if(t.altKey&&a===h.Keys.up)g();else if(a===h.Keys.up||a===h.Keys.down){if(o!==""&&e)if(!this.props.skipDisabledItems&&u)this.onNavigate(d,a);else{let l=0;if(a===h.Keys.down||a===h.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[e]);l=c&&s.findIndex(y=>y[e]===c[e])}else if(a===h.Keys.up||a===h.Keys.left){let c;if(i===-1)c=s,l=s.findIndex(y=>!y.disabled&&y[e]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();l=y&&s.findIndex(C=>C[e]===y[e])}}if(l){const c=l-i;this.onNavigate(d,a,c)}else l!==void 0&&this.onNavigate(d,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(d,a);else{let l=null;if(a===h.Keys.down||a===h.Keys.right)l=s.slice(i+1).find(c=>!c.disabled);else if(a===h.Keys.up||a===h.Keys.left){const c=s.slice(0,i);for(l=c.pop();l&&l.disabled;)l=c.pop()}if(l){const c=l.id-i-1;this.onNavigate(d,a,c)}else this.onNavigate(d,a)}this.applyState(d),t.preventDefault()}else a===h.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(t):r&&r.disabled?g():this.selectFocusedItem(t)):a===h.Keys.esc&&g();else t.altKey&&a===h.Keys.down?g():a===h.Keys.esc&&this.clearButtonClick(t)},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,r=m.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:d}=this.getFocusedState(),g=o&&i&&f.createElement("div",{className:h.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:h.classNames("k-list-item k-custom-item",{"k-focus":_(d)}),style:{fontStyle:"italic"}},i,f.createElement(h.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:l}=this.state;return l===void 0&&p!==void 0&&(l=m.getItemValue(r[0],p)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),g,f.createElement("div",{className:h.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&l&&r.length!==0&&f.createElement(Y,{group:l,groupMode:"modern",render:a}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e}=this.props,o=m.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...s,popupClass:h.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:o}=this.props,{windowWidth:s=0}=this.state,a=o!==void 0?o:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:r=>this._adaptiveInput=r&&r.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,u={adaptiveTitle:t,expand:this.opened,onClose:r=>this.onCancel(r),windowWidth:s,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...u},f.createElement(te.ActionSheetContent,{className:"!k-overflow-hidden"},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;m.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;m.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{textField:t,listNoDataRender:e,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=m.getFilteredData(this.props),r=this.base.vs,{focusedIndex:i}=this.getFocusedState(),d=this.base.getPopupSettings(),g=`translateY(${r.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:t,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>{r.list=this.base.list=l},wrapperStyle:this.mobileMode?{}:{maxHeight:d.height},wrapperCssClass:"k-list-content",listStyle:r.enabled?{transform:g}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:e,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:r.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=t=>{const{vs:e,list:o}=this.base;e.scrollHandler(t);const{groupField:s}=this.props;let a=m.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:o?o.children[0].offsetHeight:0),r=t.target.scrollTop-e.skip*p;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][s];for(let d=1;d<a.length&&!(p*d>r);d++)a[d]&&a[d][s]&&(i=a[d][s]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!e)return;const s=this.base.initState();s.syntheticEvent=t;const a=o?{[o]:e}:e;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const o=this.base.initState();o.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.handleItemSelect(t,o),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(o),e.stopPropagation(),this.applyState(o)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:o,filterable:s}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},h.validatePackage(X.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 opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(o=>{e.push({text:m.getItemValue(o,t),data:[o]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var g;const{virtual:e,groupField:o=""}=this.props,s=m.getFilteredData(this.props),a=e?e.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:t.opened,r=!u&&this.opened,i=u&&!this.opened,d=this.base.getPopupSettings();if(this.base.didUpdate(),!d.animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:l,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(g=this.base.getGroupedDataModernMode(s,o))==null?void 0:g.indexOf(l)),r&&e?this.base.scrollToVirtualItem(e,c-a):r&&!e?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&l&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:o}=this.props,s=m.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),r=o&&a,i=_(p),d=this.base,g=d.vs;if(this.opened&&t===h.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const l=d.navigation.navigate({keyCode:t,current:u,max:(g.enabled?g.total:s.length)-1,min:r?-1:0,skipItems:e||void 0});l!==void 0&&(this.itemFocus(l,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:r,rounded:i,fillMode:d,loading:g,filter:l}=this.props,{text:c,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,T=this.props.id||this._inputId;k.enabled=u!==void 0,u!==void 0&&(k.skip=u.skip,k.total=u.total,k.pageSize=u.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(l!==void 0?l:c)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:h.classNames("k-multiselect k-input",t,{[`k-input-${w[r]||r}`]:r,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${d}`]:d,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":g,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:o,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:m.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:h.classNames("k-input-values")},f.createElement("div",{className:h.classNames("k-chip-list",{[`k-chip-list-${w[r]||r}`]:r}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>m.matchTags(H,C,p)):void 0,size:r})),this.renderSearchBar(T)),g&&f.createElement(h.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:T,editorValue:c||m.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:r}=this.props,i=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:d}=this.getFocusedState(),g=this.value.length===0&&!i?a:void 0,l=o&&o.length>0?void 0:a,c=t===D.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${d}`,y={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(Q,{id:n,size:Math.max((g||"").length,i.length,1),placeholder:this.mobileMode&&this.opened?l:g,value:i,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:c,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:r,...y})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>m.matchTags(i,o,a)):-1,u;const r=p!==-1;if(e===h.Keys.left)r?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(e===h.Keys.right)p===s.length-1?u=void 0:r&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(e===h.Keys.home&&!n.shiftKey)u=s[0];else if(e===h.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(e===h.Keys.delete){if(r){const i=this.value;m.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,t)}}else if(e===h.Keys.backspace){const i=this.value;if(r)m.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,t);else if(!r&&s.length){const d=s.pop();m.removeDataItems(i,d.data,a),this.triggerOnChange(i,t)}}u!==o&&(t.data.focusedTag=u,t.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{virtual:e}=this.props,o=m.getFilteredData(this.props),{focusedIndex:s}=t||this.getFocusedState(),a=e?e.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=m.itemIndexStartsWith,skipDisabledItems:u}=this.props,r=m.getFilteredData(this.props),i=s&&s.skip||0;let d;if(n!==void 0)return{focusedIndex:n,focusedItem:r[n-i],focusedType:1};const g=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return d=p(r,t,a),{focusedItem:r[d],focusedIndex:d+i,focusedType:1};if(g.length){const l=g[g.length-1];return d=r.findIndex(c=>m.areSame(c,l,o)),r[d]!==void 0?{focusedIndex:d+i,focusedItem:r[d],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!t&&i===0){const l=r.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:l,focusedItem:r[l-i],focusedType:1}}return i===0?{focusedItem:r[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...K.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,onCancel:v.func,skipDisabledItems:v.bool},b.defaultProps={...K.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=b;const N=h.createPropsContext(),R=h.withIdHOC(h.withPropsContext(N,F));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=F;
|