@progress/kendo-react-dropdowns 15.2.0-develop.3 → 15.2.0-develop.5

package/MultiSelect/MultiSelect.d.ts

@@ -21,6 +21,7 @@ export interface MultiSelectState extends DropDownStateBase {
     value?: Array<any>;
     currentValue?: Array<any>;
     windowWidth?: number;
+    selectAllFocused?: boolean;
 }
 /** @hidden */
 export interface MultiSelectInternalState extends InternalState {
@@ -44,6 +45,10 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        selectAll: PropTypes.Requireable<boolean>;
+        checkboxes: PropTypes.Requireable<boolean>;
+        summarizeAfter: PropTypes.Requireable<number>;
+        onSelectAllChange: PropTypes.Requireable<(...args: any[]) => any>;
         groupField: PropTypes.Requireable<string>;
         list: PropTypes.Requireable<any>;
         adaptive: PropTypes.Requireable<boolean>;
@@ -73,20 +78,20 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         loading: PropTypes.Requireable<boolean>;
         popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
             animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-                openDuration: PropTypes.Requireable<number>; /** @hidden */
+                openDuration: PropTypes.Requireable<number>;
                 closeDuration: PropTypes.Requireable<number>;
             }> | null | undefined>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
             width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            /** @hidden */
             height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @hidden */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
@@ -98,6 +103,8 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     static defaultProps: {
         autoClose: boolean;
         required: boolean;
+        selectAll: boolean;
+        checkboxes: boolean;
         size: "small" | "medium" | "large" | undefined;
         rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
         fillMode: "flat" | "solid" | "outline" | undefined;
@@ -183,8 +190,10 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private triggerOnChange;
     private selectFocusedItem;
     private setItems;
+    private shouldKeepNoFocusOnOpen;
     private getFocusedState;
     private listContainerContent;
+    private renderSelectAllItem;
     private renderListContainer;
     private renderAdaptiveListContainer;
     private closePopup;
@@ -194,6 +203,8 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private customItemSelect;
     private handleWrapperClick;
     private handleItemClick;
+    private handleSelectAllItemClick;
+    private handleSelectAllItemKeyDown;
     private handleBlur;
     private handleFocus;
     private onPopupOpened;
@@ -202,6 +213,10 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private applyState;
     private setValidity;
     private calculateMedia;
+    private getSelectableItems;
+    private areAllSelectableItemsSelected;
+    private areSomeSelectableItemsSelected;
+    private toggleSelectAll;
     /**
      * Updates the state of the MultiSelect when the complex keyboard navigation that
      * includes key combinations with the Ctrl/Command, Shift, Home and End keys

package/MultiSelect/MultiSelect.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),y=require("prop-types"),r=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),Y=require("@progress/kendo-react-labels"),O=require("@progress/kendo-react-intl"),J=require("../common/ListContainer.js"),Q=require("../common/List.js"),X=require("../common/GroupStickyHeader.js"),Z=require("./TagList.js"),ee=require("../common/SearchBar.js"),M=require("../common/DropDownBase.js"),K=require("../common/settings.js"),g=require("../common/utils.js"),L=require("../package-metadata.js"),te=require("../common/ClearButton.js"),se=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout"),ae=require("../common/ListFilter.js"),N=require("../common/withCustomComponent.js"),D=require("../messages/index.js");function oe(S){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(S){for(const e in S)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(S,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>S[e]})}}return n.default=S,Object.freeze(n)}const m=oe(G),{sizeMap:T,roundedMap:ne}=r.kendoThemeMaps,le="Please enter a valid value!",R=S=>S.preventDefault(),q=S=>S===2,C=class C extends m.Component{constructor(n){super(n),this.state={activedescendant:K.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new M(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.handleKendoPasteValue=e=>{if(e==null)return;const t=g.getFilteredData(this.props),{textField:a,dataItemKey:s}=this.props,o=String(e).split(",").map(h=>h.trim()).filter(h=>h).reduce((h,p)=>{const d=g.getItemIndexByText(t,p,a,!1,!0);if(d!==-1){const l=t[d];h.some(c=>g.areSame(c,l,s))||h.push(l)}return h},[]);if(o.length===0)return;const i=this.base.initState();i.syntheticEvent={target:this._element},this.triggerOnChange(o,i),this.applyState(i)},this.handleItemSelect=(e,t)=>{const{dataItemKey:a,virtual:s}=this.props,o=g.getFilteredData(this.props),i=s?s.skip:0,h=o[e-i],p=this.value.findIndex(c=>g.areSame(c,h,a));this._lastSelectedOrDeslectedItemIndex=o.findIndex(c=>g.areSame(c,h,a));let d=[];p!==-1?(d=this.value,d.splice(p,1)):d=[...this.value,h],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.triggerOnChange(d,t),this.base.triggerPageChangeCornerItems(h,t)},this.onTagDelete=(e,t)=>{const a=this.base.initState();a.syntheticEvent=t,this.opened&&this.base.togglePopup(a),!this.state.focused&&!this.mobileMode&&(a.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,a),this.applyState(a)},this.itemFocus=(e,t)=>{const{allowCustom:a,virtual:s}=this.props,o=g.getFilteredData(this.props),i=s?s.skip:0,h=s?s.pageSize:0,p=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:d}=this.getFocusedState(),l=a&&p,c=o[e-i];if(s&&!c&&e>=0&&d!==e){const f=Math.floor(e/h)*h;if(f!==i){this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=K.ActiveDescendant.PopupList),this.base.triggerOnPageChange(t,f,h);return}}c&&d!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=K.ActiveDescendant.PopupList):l&&e===-1&&this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(c,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.searchbarRef=e=>{const t=this._input=e&&e.input;t&&this.state.focused&&window.setTimeout(()=>t.focus(),0)},this.onChangeHandler=e=>{const t=this.base.initState(),a=e.target.value;t.syntheticEvent=e,this.props.filter===void 0&&(t.data.text=a),t.data.focusedIndex=void 0,this.opened?this.scrollToFocused=!0:(this.base.togglePopup(t),this.setState({currentValue:this.value})),this.base.filterChanged(a,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.value.length>0&&this.triggerOnChange([],t),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t);const a=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(a)&&a!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(t)},this.onInputKeyDown=e=>{const{textField:t,groupField:a,virtual:s}=this.props,o=g.getFilteredData(this.props),i=e.keyCode,h=this.props.filter!==void 0?this.props.filter:this.state.text,p=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:d,focusedIndex:l}=this.getFocusedState(),c=this.base.initState();if(c.syntheticEvent=e,!h&&this.value.length>0&&(i===r.Keys.left||i===r.Keys.right||i===r.Keys.home||i===r.Keys.end||i===r.Keys.delete||i===r.Keys.backspace)&&!e.shiftKey)return this.onTagsNavigate(e,c);const f=()=>{e.preventDefault(),this.base.togglePopup(c),this.applyState(c)};if(this.opened)if(i===r.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(i===r.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if((e.ctrlKey||e.metaKey)&&e.code==="KeyA"){const b=(this.state.value&&this.state.value.length)===o.length?[]:o;this.updateStateOnKeyboardNavigation(b,c)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===r.Keys.end){const u=o.slice(this.getFocusedState().focusedIndex);this.itemFocus(o.length-1,c),this.updateStateOnKeyboardNavigation(u,c)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===r.Keys.home){const u=o.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,c),this.updateStateOnKeyboardNavigation(u,c)}else if(e.shiftKey&&e.keyCode===r.Keys.up){let u;const b=this.getLastSelectedOrDeselectedIndex(1,l);b===null?u=l!==0?o.slice(l-1,l):[o[l]]:b===l?u=[o[b-1]]:l>=0&&(u=b>l?o.slice(l-1,b):o.slice(b-1,l)),u&&u.length>0&&(l>=1&&this.itemFocus(l-1,c),this.updateStateOnKeyboardNavigation(u,c))}else if(e.shiftKey&&e.keyCode===r.Keys.down){let u;const b=this.getLastSelectedOrDeselectedIndex(0,l);b===null?u=l!==o.length-1?o.slice(l,l+1):[o[l]]:b===l?u=o.slice(l,l+2):l>=0&&(u=b>l?o.slice(l+1,b+1):o.slice(b,l+2)),u&&u.length>=1&&(this.itemFocus(l+1,c),this.updateStateOnKeyboardNavigation(u,c))}else if(e.altKey&&i===r.Keys.up)f();else if(i===r.Keys.up||i===r.Keys.down){const u=s?s.skip:0,b=l-u;if(a!==""&&t)if(!this.props.skipDisabledItems&&p)this.onNavigate(c,i);else{let v=0;if(i===r.Keys.down||i===r.Keys.right){const I=o.slice(b+1).find(x=>!x.disabled);v=I&&o.indexOf(I),v&&v!==-1&&(v=v+u)}else if(i===r.Keys.up||i===r.Keys.left){let I;if(l===-1)I=o,v=o.findIndex(x=>!x.disabled),v!==-1&&(v=v+u);else{I=o.slice(0,b);let x=I.pop();for(;x&&x.disabled;)x=I.pop();v=x&&o.indexOf(x),v&&v!==-1&&(v=v+u)}}if(v){const I=v-l;this.onNavigate(c,i,I)}else this.onNavigate(c,i)}else if(!this.props.skipDisabledItems&&p)this.onNavigate(c,i);else{let v=null;if(i===r.Keys.down||i===r.Keys.right)v=o.slice(b+1).find(I=>!I.disabled);else if(i===r.Keys.up||i===r.Keys.left){const I=o.slice(0,b);for(v=I.pop();v&&v.disabled;)v=I.pop()}if(v){const I=o.indexOf(v);if(I!==-1){const x=u+I-l;this.onNavigate(c,i,x)}else this.onNavigate(c,i)}else this.onNavigate(c,i)}this.applyState(c),e.preventDefault()}else i===r.Keys.enter?(e.preventDefault(),this.props.allowCustom&&h&&d===null?this.customItemSelect(e):d&&d.disabled?f():this.selectFocusedItem(e)):i===r.Keys.esc&&f();else e.altKey&&i===r.Keys.down?f():i===r.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:a,size:s,groupStickyHeaderItemRender:o,groupField:i,list:h}=this.props,p=g.getFilteredData(this.props),d=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),c=a&&d&&m.createElement("div",{className:r.classNames("k-list",{[`k-list-${T[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:R},m.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":q(l)}),style:{fontStyle:"italic"}},d,m.createElement(r.IconWrap,{name:"plus",icon:U.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:f}=this.state;return f===void 0&&i!==void 0&&(f=g.getItemValue(p[0],i)),m.createElement(m.Fragment,null,e&&m.createElement("div",{className:"k-list-header"},e),c,m.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":T[s]||s}`]:this.mobileMode||s,"k-virtual-list":this.base.vs.enabled})},!h&&f&&p.length!==0&&m.createElement(X,{group:f,render:o}),this.renderList()),this.showLicenseWatermark&&m.createElement(r.WatermarkOverlay,{message:this.licenseMessage}),t&&m.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,a=g.getFilteredData(this.props),s=this.base.getPopupSettings(),o=s.width!==void 0?s.width:e.popupWidth,i={dir:t!==void 0?t:e.dirCalculated,width:o,popupSettings:{...s,popupClass:r.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[a.length,this.value.length]};return m.createElement(J,{...i},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,adaptiveSubtitle:t,filterable:a,filter:s}=this.props,{windowWidth:o=0}=this.state,i=s!==void 0?s:this.state.text,h=a?m.createElement(ae,{value:i,ref:d=>{this._adaptiveInput=d&&d.element},onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder}):null,p={title:e||this.props.label,subTitle:t,expand:this.opened,onClose:d=>this.closePopup(d),windowWidth:o,mobileFilter:h};return m.createElement(se.AdaptiveMode,{...p},m.createElement(ie.ActionSheetContent,null,m.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onClose"});const a=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(a)&&a!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const a=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(a)&&a!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.renderList=()=>{const e=O.provideLocalizationService(this),{textField:t,listNoDataRender:a,itemRender:s,groupHeaderItemRender:o,dataItemKey:i,virtual:h={skip:0,total:void 0}}=this.props,p=g.getFilteredData(this.props),d=this.base.vs,{focusedIndex:l}=this.getFocusedState(),c=this.base.getPopupSettings(),f=`translateY(${d.translate}px)`;return m.createElement(Q,{id:this.base.listBoxId,show:this.opened,data:p.slice(),focusedIndex:l-h.skip,value:this.value,textField:t,valueField:i,optionsGuid:this.base.guid,groupField:this.props.groupField,ariaLabel:e.toLanguageString(D.listAriaLabel,D.messages[D.listAriaLabel]),listRef:u=>{d.list=this.base.list=u},wrapperStyle:this.mobileMode?{}:{maxHeight:c.height},wrapperCssClass:"k-list-content",listStyle:d.enabled?{transform:f}:void 0,key:"listKey",skip:h.skip,onClick:this.handleItemClick,itemRender:s,groupHeaderItemRender:o,noDataRender:a,onMouseDown:R,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:d.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:h.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:s}=this.props;let o=g.getFilteredData(this.props);if(!(!s||!o.length)&&s){const i=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*i;o=this.base.getGroupedDataModernMode(o,s);let d=o[0][s];for(let l=1;l<o.length&&!(i*l>p);l++)o[l]&&o[l][s]&&(d=o[l][s]);d!==this.state.group&&this.setState({group:d})}},this.customItemSelect=e=>{const t=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:a}=this.props;if(!t)return;const s=this.base.initState();s.syntheticEvent=e;const o=a?{[a]:t}:t;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const i=[...this.value,o];this.triggerOnChange(i,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const a=this.base.initState();a.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(a.events.push({type:"onFocus"}),a.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(a),this.applyState(a)},this.handleItemClick=(e,t)=>{const a=this.base.initState();a.syntheticEvent=t,this.handleItemSelect(e,a),this.props.autoClose&&this.base.togglePopup(a),t.stopPropagation(),this.applyState(a)},this.handleBlur=e=>{if(!this.state.focused||this._skipFocusEvent)return;const t=this.base.initState(),{allowCustom:a,filterable:s}=this.props;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"})),!a&&!s&&this.state.text&&(t.data.text=""),this.applyState(t)},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},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)},this.validate(n),this.licenseMessage=r.getLicenseMessage(L.packageMetadata)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}validate(n){if(n.filterable||n.virtual){const e=[];n.filterable&&e.push("filterable"),n.virtual&&e.push("virtualization"),this.showLicenseWatermark=!r.validatePackage(L.packageMetadata,{component:"MultiSelect",features:e})}}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:e}=this.props,t=[];return n===void 0?this.value.forEach(a=>{t.push({text:g.getItemValue(a,e),data:[a]})}):t.push(...n),t}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(){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,e=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:n,valid:t,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:C.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:C.defaultProps.validityStyles}componentDidUpdate(n,e){var c;const{virtual:t,groupField:a=""}=this.props,s=g.getFilteredData(this.props),o=t?t.skip:0,i=n.virtual?n.virtual.total:0,h=n.opened!==void 0?n.opened:e.opened,p=!h&&this.opened,d=h&&!this.opened,l=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!l.animate&&d&&this.onPopupClosed(),t&&t.total!==i)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:f,focusedIndex:u}=this.getFocusedState();a!==""&&(u=(c=this.base.getGroupedDataModernMode(s,a))==null?void 0:c.indexOf(f)),p&&t?this.base.scrollToVirtualItem(t,u-o):p&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][a],this),this.base.scrollToItem(u)):this.opened&&h&&f&&this.scrollToFocused&&this.base.scrollToItem(u-o)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var e;this.observerResize=r.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);const n=this.props.name||this.props.id;this.KendoPasteSubscription=r.subscribeToKendoPaste(this._element,{fieldName:n,onValueChange:t=>{this.handleKendoPasteValue(t)}})}componentWillUnmount(){var n,e;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect(),(e=this.KendoPasteSubscription)==null||e.unsubscribe()}onNavigate(n,e,t){const{allowCustom:a}=this.props,s=g.getFilteredData(this.props),o=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:i,focusedIndex:h}=this.getFocusedState(),p=a&&o,d=q(i),l=this.base,c=l.vs;if(this.opened&&e===r.Keys.up&&d)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const f=l.navigation.navigate({keyCode:e,current:h,max:(c.enabled?c.total:s.length)-1,min:p?-1:0,skipItems:t||void 0});f!==void 0&&(this.itemFocus(f,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:e,label:t,dir:a,disabled:s,textField:o,dataItemKey:i,virtual:h,size:p,rounded:d,fillMode:l,loading:c,filter:f}=this.props,{text:u,focused:b,focusedTag:v,currentValue:I}=this.state,x=this.base.vs,P=this.props.id||this._inputId;x.enabled=h!==void 0,h!==void 0&&(x.skip=h.skip,x.total=h.total,x.pageSize=h.pageSize);const k=this.mobileMode&&this.opened?I:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const E=!this.validityStyles||this.validity.valid,B=O.provideLocalizationService(this),V=!!(f!==void 0?f:u)||k&&k.length>0,[H,W]=N(this.props.prefix||m.Fragment),[$,j]=N(this.props.suffix||m.Fragment),_=m.createElement(m.Fragment,null,m.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",e,{[`k-input-${T[p]||p}`]:p,[`k-rounded-${ne[d]||d}`]:d,[`k-input-${l}`]:l,"k-focus":b&&!s,"k-invalid":!E,"k-disabled":s,"k-loading":c,"k-required":this.required}),style:t?{...n,width:void 0}:n,dir:a,onFocus:w=>{this.mobileMode?this.handleWrapperClick(w):this.handleFocus(w)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&m.createElement(H,{...W}),m.createElement("div",{className:r.classNames("k-input-values")},m.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${T[p]||p}`]:p}),role:"listbox","aria-label":B.toLanguageString(D.chipListAriaLabel,D.messages[D.chipListAriaLabel]),"aria-orientation":"horizontal",id:"tagslist-"+this.base.guid},k&&k.length>0&&m.createElement(Z,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:k,guid:this.base.guid,focused:v?k.find(w=>g.matchTags(w,v,i)):void 0,size:p})),this.renderSearchBar(P)),c&&m.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&m.createElement($,{...j}),V&&m.createElement(te,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?m.createElement(Y.FloatingLabel,{label:t,editorId:P,editorValue:u||g.getItemValue(this.value[0],o),editorValid:E,editorDisabled:s,style:{width:n?n.width:void 0},children:_}):_}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:a}=this.state,{disabled:s,placeholder:o,ariaDescribedBy:i,ariaLabelledBy:h,ariaLabel:p,inputAttributes:d}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:c}=this.getFocusedState(),f=this.value.length===0&&!l?o:void 0,u=a&&a.length>0?void 0:o,b=e===K.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`k-${this.base.guid}-item-${c+1}`,v=i?` ${i}`:"",I=this.value.length>0?`tagslist-${this.base.guid}${v}`:i,x={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return m.createElement(ee,{id:n,name:this.props.name,size:Math.max((f||"").length,l.length,1),placeholder:this.mobileMode&&this.opened?u:f,value:l,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,ariaControls:this.base.listBoxId,role:"combobox",activedescendant:b,ariaDescribedBy:I,ariaLabelledBy:h,ariaRequired:this.required,ariaLabel:p,ariaAutoComplete:"list",inputAttributes:d,...x})}onTagsNavigate(n,e){const t=n.keyCode,{focusedTag:a}=this.state,s=this._tags,o=this.props.dataItemKey;let i=a?s.findIndex(d=>g.matchTags(d,a,o)):-1,h;const p=i!==-1;if(t===r.Keys.left)p?i=Math.max(0,i-1):i=s.length-1,h=s[i];else if(t===r.Keys.right)i===s.length-1?h=void 0:p&&(i=Math.min(s.length-1,i+1),h=s[i]);else if(t===r.Keys.home&&!n.shiftKey)h=s[0];else if(t===r.Keys.end&&!n.shiftKey)h=s[s.length-1];else if(t===r.Keys.delete){if(p){const d=this.value;g.removeDataItems(d,s[i].data,o),this.triggerOnChange(d,e)}}else if(t===r.Keys.backspace){const d=this.value;if(p)g.removeDataItems(d,s[i].data,o),this.triggerOnChange(d,e);else if(!p&&s.length){const l=s.pop();g.removeDataItems(d,l.data,o),this.triggerOnChange(d,e)}}h!==a&&(e.data.focusedTag=h,e.data.activedescendant=K.ActiveDescendant.TagsList),this.applyState(e)}triggerOnChange(n,e){this.props.value===void 0&&(e.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),e.events.push({type:"onChange"})}selectFocusedItem(n,e){const{virtual:t}=this.props,a=g.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),o=t?t.skip:0;a[s-o]!==void 0&&this.handleItemClick(s,n)}setItems(n,e){e.length=0,e.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:a,virtual:s,textField:o,focusedItemIndex:i=g.itemIndexStartsWith,skipDisabledItems:h}=this.props,p=g.getFilteredData(this.props),d=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:p[n-d],focusedType:1};const c=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=i(p,e,o),{focusedItem:p[l],focusedIndex:l+d,focusedType:1};if(c.length){const f=c[c.length-1];return l=p.findIndex(u=>g.areSame(u,f,a)),p[l]!==void 0?{focusedIndex:l+d,focusedItem:p[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(h&&o&&!e&&d===0){const f=p.findIndex(u=>!u.disabled);return{focusedIndex:f,focusedItem:p[f-d],focusedType:1}}return d===0?{focusedItem:p[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 e of n)this.setState({windowWidth:e.target.clientWidth})}updateStateOnKeyboardNavigation(n,e){this.setState({value:n}),this.triggerOnChange(n,e),this.applyState(e)}getLastSelectedOrDeselectedIndex(n,e){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=e),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};C.displayName="MultiSelect",C.propTypes={...M.propTypes,autoClose:y.bool,value:y.arrayOf(y.any),defaultValue:y.arrayOf(y.any),dataItemKey:y.string,placeholder:y.string,tags:y.arrayOf(y.shape({text:y.string,data:y.arrayOf(y.any)})),tagRender:y.func,id:y.string,ariaLabelledBy:y.string,ariaDescribedBy:y.string,groupField:y.string,list:y.any,adaptive:y.bool,adaptiveTitle:y.string,adaptiveSubtitle:y.string,onCancel:y.func,skipDisabledItems:y.bool,inputAttributes:y.object},C.defaultProps={...M.defaultProps,autoClose:!0,required:!1,size:void 0,rounded:void 0,fillMode:void 0,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=C;const z=r.createPropsContext(),A=r.withIdHOC(r.withPropsContext(z,r.withAdaptiveModeContext(F)));A.displayName="KendoReactMultiSelect";O.registerForLocalization(F);exports.MultiSelect=A;exports.MultiSelectPropsContext=z;exports.MultiSelectWithoutContext=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),b=require("prop-types"),d=require("@progress/kendo-react-common"),U=require("@progress/kendo-react-labels"),F=require("@progress/kendo-react-intl"),Y=require("@progress/kendo-react-inputs"),J=require("../common/ListContainer.js"),Q=require("../common/List.js"),X=require("../common/GroupStickyHeader.js"),Z=require("./TagList.js"),ee=require("../common/SearchBar.js"),A=require("../common/DropDownBase.js"),D=require("../common/settings.js"),f=require("../common/utils.js"),_=require("../package-metadata.js"),te=require("../common/ClearButton.js"),se=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout"),ae=require("../common/ListFilter.js"),N=require("../common/withCustomComponent.js"),x=require("../messages/index.js");function oe(k){const o=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(o,e,t.get?t:{enumerable:!0,get:()=>k[e]})}}return o.default=k,Object.freeze(o)}const g=oe(G),{sizeMap:E,roundedMap:le}=d.kendoThemeMaps,ne="Please enter a valid value!",O=k=>k.preventDefault(),z=k=>k===2,C=class C extends g.Component{constructor(o){super(o),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new A(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.showLicenseWatermark=!1,this.focus=()=>{this._input&&this._input.focus()},this.handleKendoPasteValue=e=>{if(e==null)return;const t=f.getFilteredData(this.props),{textField:a,dataItemKey:i}=this.props,l=String(e).split(",").map(c=>c.trim()).filter(c=>c).reduce((c,h)=>{const r=f.getItemIndexByText(t,h,a,!1,!0);if(r!==-1){const n=t[r];c.some(p=>f.areSame(p,n,i))||c.push(n)}return c},[]);if(l.length===0)return;const s=this.base.initState();s.syntheticEvent={target:this._element},this.triggerOnChange(l,s),this.applyState(s)},this.handleItemSelect=(e,t)=>{this.state.selectAllFocused&&(t.data.selectAllFocused=!1);const{dataItemKey:a,virtual:i}=this.props,l=f.getFilteredData(this.props),s=i?i.skip:0,c=l[e-s],h=this.value.findIndex(p=>f.areSame(p,c,a));this._lastSelectedOrDeslectedItemIndex=l.findIndex(p=>f.areSame(p,c,a));let r=[];h!==-1?(r=this.value,r.splice(h,1)):r=[...this.value,c],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&!this.props.checkboxes&&(this.state.text&&(t.data.text=""),this.base.filterChanged("",t)),this._adaptiveInput&&this._adaptiveInput.blur(),t.data.focusedIndex=e,this.triggerOnChange(r,t),this.base.triggerPageChangeCornerItems(c,t)},this.onTagDelete=(e,t)=>{const a=this.base.initState();a.syntheticEvent=t,this.opened&&this.base.togglePopup(a),!this.state.focused&&!this.mobileMode&&(a.data.focused=!0,this.focus());const i=this.value;f.removeDataItems(i,e,this.props.dataItemKey),this.triggerOnChange(i,a),this.applyState(a)},this.itemFocus=(e,t)=>{const{allowCustom:a,virtual:i}=this.props,l=f.getFilteredData(this.props),s=i?i.skip:0,c=i?i.pageSize:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),n=a&&h,p=l[e-s];if(i&&!p&&e>=0&&r!==e){const v=Math.floor(e/c)*c;if(v!==s){this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList),this.base.triggerOnPageChange(t,v,c);return}}p&&r!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):n&&e===-1&&this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.searchbarRef=e=>{const t=this._input=e&&e.input;t&&this.state.focused&&window.setTimeout(()=>t.focus(),0)},this.onChangeHandler=e=>{const t=this.base.initState(),a=e.target.value;t.syntheticEvent=e,this.props.filter===void 0&&(t.data.text=a),t.data.focusedIndex=void 0,this.opened?this.scrollToFocused=!0:(this.base.togglePopup(t),this.setState({currentValue:this.value})),this.base.filterChanged(a,t),this.applyState(t),this.setState({group:void 0})},this.clearButtonClick=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.value.length>0&&this.triggerOnChange([],t),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t);const a=this.props.filter!==void 0?this.props.filter:this.state.text;f.isPresent(a)&&a!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(t)},this.onInputKeyDown=e=>{const{textField:t,groupField:a,virtual:i}=this.props,l=f.getFilteredData(this.props),s=e.keyCode,c=this.props.filter!==void 0?this.props.filter:this.state.text,h=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:r,focusedIndex:n}=this.getFocusedState(),p=this.base.initState();if(p.syntheticEvent=e,!c&&this.value.length>0&&(s===d.Keys.left||s===d.Keys.right||s===d.Keys.home||s===d.Keys.end||s===d.Keys.delete||s===d.Keys.backspace)&&!e.shiftKey)return this.onTagsNavigate(e,p);const v=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)};if(this.opened)if(s===d.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(s===d.Keys.pageDown)e.preventDefault(),this.base.scrollPopupByPageSize(1);else if((e.ctrlKey||e.metaKey)&&e.code==="KeyA"){const y=(this.state.value&&this.state.value.length)===l.length?[]:l;p.data.focusedIndex=void 0,this.updateStateOnKeyboardNavigation(y,p)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===d.Keys.end){const u=l.slice(this.getFocusedState().focusedIndex);this.itemFocus(l.length-1,p),this.updateStateOnKeyboardNavigation(u,p)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===d.Keys.home){const u=l.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,p),this.updateStateOnKeyboardNavigation(u,p)}else if(e.shiftKey&&e.keyCode===d.Keys.up){let u;const y=this.getLastSelectedOrDeselectedIndex(1,n);y===null?u=n!==0?l.slice(n-1,n):[l[n]]:y===n?u=[l[y-1]]:n>=0&&(u=y>n?l.slice(n-1,y):l.slice(y-1,n)),u&&u.length>0&&(n>=1&&this.itemFocus(n-1,p),this.updateStateOnKeyboardNavigation(u,p))}else if(e.shiftKey&&e.keyCode===d.Keys.down){let u;const y=this.getLastSelectedOrDeselectedIndex(0,n);y===null?u=n!==l.length-1?l.slice(n,n+1):[l[n]]:y===n?u=l.slice(n,n+2):n>=0&&(u=y>n?l.slice(n+1,y+1):l.slice(y,n+2)),u&&u.length>=1&&(this.itemFocus(n+1,p),this.updateStateOnKeyboardNavigation(u,p))}else if(e.altKey&&s===d.Keys.up)v();else if(s===d.Keys.up||s===d.Keys.down){const u=i?i.skip:0,y=n-u;if(a!==""&&t)if(!this.props.skipDisabledItems&&h)this.onNavigate(p,s);else{let m=0;if(s===d.Keys.down||s===d.Keys.right){const I=l.slice(y+1).find(S=>!S.disabled);m=I&&l.indexOf(I),m&&m!==-1&&(m=m+u)}else if(s===d.Keys.up||s===d.Keys.left){let I;if(n===-1)I=l,m=l.findIndex(S=>!S.disabled),m!==-1&&(m=m+u);else{I=l.slice(0,y);let S=I.pop();for(;S&&S.disabled;)S=I.pop();m=S&&l.indexOf(S),m&&m!==-1&&(m=m+u)}}if(m){const I=m-n;this.onNavigate(p,s,I)}else this.onNavigate(p,s)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(p,s);else{let m=null;if(s===d.Keys.down||s===d.Keys.right)m=l.slice(y+1).find(I=>!I.disabled);else if(s===d.Keys.up||s===d.Keys.left){const I=l.slice(0,y);for(m=I.pop();m&&m.disabled;)m=I.pop()}if(m){const I=l.indexOf(m);if(I!==-1){const S=u+I-n;this.onNavigate(p,s,S)}else this.onNavigate(p,s)}else this.onNavigate(p,s)}this.applyState(p),e.preventDefault()}else if(s===d.Keys.enter||s===d.Keys.space&&this.state.selectAllFocused)if(e.preventDefault(),this.state.selectAllFocused){const u=this.base.initState();u.syntheticEvent=e,this.toggleSelectAll(u),this.applyState(u)}else this.props.allowCustom&&c&&r===null?this.customItemSelect(e):r&&r.disabled?v():this.selectFocusedItem(e);else s===d.Keys.esc&&v();else e.altKey&&s===d.Keys.down||s===d.Keys.space&&this.props.selectAll?v():s===d.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:a,size:i,groupStickyHeaderItemRender:l,groupField:s,list:c,selectAll:h}=this.props,r=f.getFilteredData(this.props),n=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p}=this.getFocusedState(),v=a&&n&&g.createElement("div",{className:d.classNames("k-list-custom-value",{"k-focus":z(p)}),key:"customitem",onClick:this.customItemSelect,onMouseDown:O},n);let{group:u}=this.state;return u===void 0&&s!==void 0&&(u=f.getItemValue(r[0],s)),g.createElement(g.Fragment,null,e&&g.createElement("div",{className:"k-list-header"},e),g.createElement("div",{className:d.classNames("k-list",{[`k-list-${this.mobileMode?"lg":E[i]||i}`]:this.mobileMode||i,"k-virtual-list":this.base.vs.enabled})},h&&this.renderSelectAllItem(),!c&&u&&r.length!==0&&g.createElement(X,{group:u,render:l}),v,this.renderList()),this.showLicenseWatermark&&g.createElement(d.WatermarkOverlay,{message:this.licenseMessage}),t&&g.createElement("div",{className:"k-list-footer"},t))},this.renderSelectAllItem=()=>{const{checkboxes:e}=this.props,t=this.areAllSelectableItemsSelected(),a=!t&&this.areSomeSelectableItemsSelected(),l=F.provideLocalizationService(this).toLanguageString(x.selectAllText,x.messages[x.selectAllText]),s=this.state.selectAllFocused;return g.createElement("div",{className:"k-list-sticky-header"},g.createElement("div",{className:d.classNames("k-list-sticky-header-item",{"k-selected":!e&&t,"k-focus":s}),"aria-label":l,...!e&&{role:"button",tabIndex:0,"aria-pressed":a?"mixed":t},onClick:this.handleSelectAllItemClick,onKeyDown:this.handleSelectAllItemKeyDown,onMouseDown:O},e&&g.createElement(Y.Checkbox,{checked:a?null:t,"aria-label":l,tabIndex:-1}),g.createElement("span",{className:"k-list-item-text"},l)))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,a=f.getFilteredData(this.props),i=this.base.getPopupSettings(),l=i.width!==void 0?i.width:e.popupWidth,s={dir:t!==void 0?t:e.dirCalculated,width:l,popupSettings:{...i,popupClass:d.classNames(i.popupClass,"k-list-container","k-multiselect-popup"),anchor:i.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[a.length,this.value.length]};return g.createElement(J,{...s},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,adaptiveSubtitle:t,filterable:a,filter:i}=this.props,{windowWidth:l=0}=this.state,s=i!==void 0?i:this.state.text,c=a?g.createElement(ae,{value:s,ref:r=>{this._adaptiveInput=r&&r.element},onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:"large",rounded:this.props.rounded,fillMode:this.props.fillMode,placeholder:this.props.placeholder}):null,h={title:e||this.props.label,subTitle:t,expand:this.opened,onClose:r=>this.closePopup(r),windowWidth:l,mobileFilter:c};return g.createElement(se.AdaptiveMode,{...h},g.createElement(ie.ActionSheetContent,null,g.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onClose"});const a=this.props.filter!==void 0?this.props.filter:this.state.text;f.isPresent(a)&&a!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.onCancel=e=>{const t=this.base.initState();t.syntheticEvent=e,e.stopPropagation(),this.state.focusedIndex!==void 0&&(t.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(t),t.events.push({type:"onCancel"});const a=this.props.filter!==void 0?this.props.filter:this.state.text;f.isPresent(a)&&a!==""&&this.base.filterChanged("",t),this.state.text&&(t.data.text=""),this.applyState(t)},this.renderList=()=>{const e=F.provideLocalizationService(this),{textField:t,listNoDataRender:a,itemRender:i,groupHeaderItemRender:l,dataItemKey:s,checkboxes:c,virtual:h={skip:0,total:void 0}}=this.props,r=f.getFilteredData(this.props),n=this.base.vs,{focusedIndex:p}=this.getFocusedState(),v=this.base.getPopupSettings(),u=`translateY(${n.translate}px)`;return g.createElement(Q,{id:this.base.listBoxId,show:this.opened,data:r.slice(),focusedIndex:p-h.skip,value:this.value,textField:t,valueField:s,optionsGuid:this.base.guid,groupField:this.props.groupField,ariaLabel:e.toLanguageString(x.listAriaLabel,x.messages[x.listAriaLabel]),listRef:y=>{n.list=this.base.list=y},wrapperStyle:this.mobileMode?{}:{maxHeight:v.height},wrapperCssClass:"k-list-content",listStyle:n.enabled?{transform:u}:void 0,key:"listKey",skip:h.skip,onClick:this.handleItemClick,itemRender:i,groupHeaderItemRender:l,noDataRender:a,onMouseDown:O,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:n.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:h.total,showSelectionCheckbox:c})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:i}=this.props;let l=f.getFilteredData(this.props);if(!(!i||!l.length)&&i){const s=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),h=e.target.scrollTop-t.skip*s;l=this.base.getGroupedDataModernMode(l,i);let r=l[0][i];for(let n=1;n<l.length&&!(s*n>h);n++)l[n]&&l[n][i]&&(r=l[n][i]);r!==this.state.group&&this.setState({group:r})}},this.customItemSelect=e=>{const t=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:a}=this.props;if(!t)return;const i=this.base.initState();i.syntheticEvent=e;const l=a?{[a]:t}:t;this.state.text!==void 0&&(i.data.text=""),i.data.focusedIndex=void 0,this.base.filterChanged("",i);const s=[...this.value,l];this.triggerOnChange(s,i),this.base.togglePopup(i),this.applyState(i)},this.handleWrapperClick=e=>{const t=this._input;!this.opened&&t&&this.focusElement(t);const a=this.base.initState();a.syntheticEvent=e,!this.state.focused&&!this.mobileMode&&(a.events.push({type:"onFocus"}),a.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(a),this.applyState(a)},this.handleItemClick=(e,t)=>{const a=this.base.initState();a.syntheticEvent=t,this.handleItemSelect(e,a),this.props.autoClose&&!this.props.checkboxes&&this.base.togglePopup(a),t.stopPropagation(),this.applyState(a)},this.handleSelectAllItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.toggleSelectAll(t),e.stopPropagation(),this.applyState(t)},this.handleSelectAllItemKeyDown=e=>{if(e.keyCode!==d.Keys.enter&&e.keyCode!==d.Keys.space)return;e.preventDefault();const t=this.base.initState();t.syntheticEvent=e,this.toggleSelectAll(t),this.applyState(t)},this.handleBlur=e=>{if(!this.state.focused||this._skipFocusEvent)return;const t=this.base.initState(),{allowCustom:a,filterable:i}=this.props;t.syntheticEvent=e,t.data.focused=!1,t.data.selectAllFocused=!1,t.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(t.data.opened=!1),t.events.push({type:"onClose"})),!a&&!i&&this.state.text&&(t.data.text=""),this.applyState(t)},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},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||ne)},this.getSelectableItems=()=>f.getFilteredData(this.props).filter(t=>!(t!=null&&t.disabled)),this.areAllSelectableItemsSelected=()=>{const e=this.getSelectableItems();if(e.length===0||!e.every(l=>this.value.some(s=>f.areSame(s,l,this.props.dataItemKey))))return!1;const{virtual:a,dataItemKey:i}=this.props;return!(a&&a.total!==void 0&&(i?this.value.filter(s=>(s==null?void 0:s[i])!==void 0).length:this.value.length)<a.total)},this.areSomeSelectableItemsSelected=()=>{const e=this.value;if(e.length>0)return!0;const t=this.getSelectableItems();return t.length===0?!1:t.some(a=>e.some(i=>f.areSame(i,a,this.props.dataItemKey)))},this.validate(o),this.licenseMessage=d.getLicenseMessage(_.packageMetadata)}get _inputId(){return this.props.id}get document(){if(d.canUseDOM)return this.element&&this.element.ownerDocument||document}validate(o){if(o.filterable||o.virtual){const e=[];o.filterable&&e.push("filterable"),o.virtual&&e.push("virtualization"),this.showLicenseWatermark=!d.validatePackage(_.packageMetadata,{component:"MultiSelect",features:e})}}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:o,textField:e,dataItemKey:t,allowCustom:a,selectAll:i,summarizeAfter:l=10}=this.props,s=[];if(o===void 0)if(a&&i&&t){const c=this.value.filter(r=>r[t]!==void 0),h=this.value.filter(r=>r[t]===void 0);if(c.length>0){const n=F.provideLocalizationService(this).toLanguageString(x.itemsSelectedText,x.messages[x.itemsSelectedText]).replace("{0}",c.length.toString());s.push({text:n,data:[...c]})}h.forEach(r=>{s.push({text:f.getItemValue(r,e),data:[r]})})}else if(this.value.length>l){const c=F.provideLocalizationService(this),h=this.value.slice(0,l),r=this.value.slice(l);h.forEach(p=>{s.push({text:f.getItemValue(p,e),data:[p]})});const n=c.toLanguageString(x.summaryTagText,x.messages[x.summaryTagText]).replace("{0}",r.length.toString());s.push({text:n,data:[...r]})}else this.value.forEach(c=>{s.push({text:f.getItemValue(c,e),data:[c]})});else s.push(...o);return s}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(){const o=[];return this._valueItemsDuringOnChange?o.push(...this._valueItemsDuringOnChange):this.props.value?o.push(...this.props.value):this.state.value?o.push(...this.state.value):this.props.defaultValue&&o.push(...this.props.defaultValue),o}get name(){return this.props.name}get validity(){const o=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:o,valid:t,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:C.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:C.defaultProps.validityStyles}componentDidUpdate(o,e){var p;const{virtual:t,groupField:a=""}=this.props,i=f.getFilteredData(this.props),l=t?t.skip:0,s=o.virtual?o.virtual.total:0,c=o.opened!==void 0?o.opened:e.opened,h=!c&&this.opened,r=c&&!this.opened,n=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!n.animate&&r&&this.onPopupClosed(),r&&this.state.selectAllFocused&&this.setState({selectAllFocused:!1}),t&&t.total!==s)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:v,focusedIndex:u}=this.getFocusedState();a!==""&&(u=(p=this.base.getGroupedDataModernMode(i,a))==null?void 0:p.indexOf(v)),h&&t?this.base.scrollToVirtualItem(t,u-l):h&&!t?(i&&i.length!==0&&this.base.resetGroupStickyHeader(i[0][a],this),this.base.scrollToItem(u)):this.opened&&c&&v&&this.scrollToFocused&&this.base.scrollToItem(u-l)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var e;this.observerResize=d.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);const o=this.props.name||this.props.id;this.KendoPasteSubscription=d.subscribeToKendoPaste(this._element,{fieldName:o,onValueChange:t=>{this.handleKendoPasteValue(t)}})}componentWillUnmount(){var o,e;(o=this.document)!=null&&o.body&&this.observerResize&&this.observerResize.disconnect(),(e=this.KendoPasteSubscription)==null||e.unsubscribe()}onNavigate(o,e,t){const{allowCustom:a,selectAll:i}=this.props,l=f.getFilteredData(this.props),s=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:c,focusedIndex:h}=this.getFocusedState(),r=a&&s,n=z(c),p=this.base,v=p.vs;if(this.state.selectAllFocused){e===d.Keys.down&&(o.data.selectAllFocused=!1,r||(this.itemFocus(0,o),this.scrollToFocused=!0)),this.applyState(o);return}if(i&&this.opened&&h===-1&&!n){e===d.Keys.down&&(o.data.selectAllFocused=!0),this.applyState(o);return}if(i&&this.opened&&e===d.Keys.up&&h===0&&!r){o.data.selectAllFocused=!0,o.data.focusedIndex=void 0,this.applyState(o);return}if(this.opened&&e===d.Keys.up&&n)i&&(o.data.selectAllFocused=!0),this.state.focusedIndex!==void 0&&(o.data.focusedIndex=void 0);else{const u=p.navigation.navigate({keyCode:e,current:h,max:(v.enabled?v.total:l.length)-1,min:r?-1:0,skipItems:t||void 0});u!==void 0&&(this.itemFocus(u,o),this.scrollToFocused=!0)}this.applyState(o)}render(){const{style:o,className:e,label:t,dir:a,disabled:i,textField:l,dataItemKey:s,virtual:c,size:h,rounded:r,fillMode:n,loading:p,filter:v}=this.props,{text:u,focused:y,focusedTag:m,currentValue:I}=this.state,S=this.base.vs,M=this.props.id||this._inputId;S.enabled=c!==void 0,c!==void 0&&(S.skip=c.skip,S.total=c.total,S.pageSize=c.pageSize);const K=this.mobileMode&&this.opened?I:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const P=!this.validityStyles||this.validity.valid,V=F.provideLocalizationService(this),B=!!(v!==void 0?v:u)||K&&K.length>0,[H,W]=N(this.props.prefix||g.Fragment),[$,j]=N(this.props.suffix||g.Fragment),L=g.createElement(g.Fragment,null,g.createElement("div",{ref:this.componentRef,className:d.classNames("k-multiselect k-input",e,{[`k-input-${E[h]||h}`]:h,[`k-rounded-${le[r]||r}`]:r,[`k-input-${n}`]:n,"k-focus":y&&!i,"k-invalid":!P,"k-disabled":i,"k-loading":p,"k-required":this.required}),style:t?{...o,width:void 0}:o,dir:a,onFocus:T=>{this.mobileMode?this.handleWrapperClick(T):this.handleFocus(T)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:f.preventDefaultNonInputs},this.props.prefix&&g.createElement(H,{...W}),g.createElement("div",{className:d.classNames("k-input-values")},g.createElement("div",{className:d.classNames("k-chip-list",{[`k-chip-list-${E[h]||h}`]:h}),role:"listbox","aria-label":V.toLanguageString(x.chipListAriaLabel,x.messages[x.chipListAriaLabel]),"aria-orientation":"horizontal",id:"tagslist-"+this.base.guid},K&&K.length>0&&g.createElement(Z,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:K,guid:this.base.guid,focused:m?K.find(T=>f.matchTags(T,m,s)):void 0,size:h})),this.renderSearchBar(M)),p&&g.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&g.createElement($,{...j}),B&&g.createElement(te,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?g.createElement(U.FloatingLabel,{label:t,editorId:M,editorValue:u||f.getItemValue(this.value[0],l),editorValid:P,editorDisabled:i,style:{width:o?o.width:void 0},children:L}):L}renderSearchBar(o){const{activedescendant:e,focusedTag:t,currentValue:a}=this.state,{disabled:i,placeholder:l,ariaDescribedBy:s,ariaLabelledBy:c,ariaLabel:h,inputAttributes:r}=this.props,n=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:p}=this.getFocusedState(),v=this.value.length===0&&!n?l:void 0,u=a&&a.length>0?void 0:l,y=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`k-${this.base.guid}-item-${p+1}`,m=s?` ${s}`:"",I=this.value.length>0?`tagslist-${this.base.guid}${m}`:s,S={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return g.createElement(ee,{id:o,name:this.props.name,size:Math.max((v||"").length,n.length,1),placeholder:this.mobileMode&&this.opened?u:v,value:n,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:i,expanded:this.opened,ariaControls:this.base.listBoxId,role:"combobox",activedescendant:y,ariaDescribedBy:I,ariaLabelledBy:c,ariaRequired:this.required,ariaLabel:h,ariaAutoComplete:"list",inputAttributes:r,...S})}onTagsNavigate(o,e){const t=o.keyCode,{focusedTag:a}=this.state,i=this._tags,l=this.props.dataItemKey;let s=a?i.findIndex(r=>f.matchTags(r,a,l)):-1,c;const h=s!==-1;if(t===d.Keys.left)h?s=Math.max(0,s-1):s=i.length-1,c=i[s];else if(t===d.Keys.right)s===i.length-1?c=void 0:h&&(s=Math.min(i.length-1,s+1),c=i[s]);else if(t===d.Keys.home&&!o.shiftKey)c=i[0];else if(t===d.Keys.end&&!o.shiftKey)c=i[i.length-1];else if(t===d.Keys.delete){if(h){const r=this.value;f.removeDataItems(r,i[s].data,l),this.triggerOnChange(r,e)}}else if(t===d.Keys.backspace){const r=this.value;if(h)f.removeDataItems(r,i[s].data,l),this.triggerOnChange(r,e);else if(!h&&i.length){const n=i.pop();f.removeDataItems(r,n.data,l),this.triggerOnChange(r,e)}}c!==a&&(e.data.focusedTag=c,e.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(e)}triggerOnChange(o,e){this.props.value===void 0&&(e.data.value=[...o]),this._valueItemsDuringOnChange=[],this.setItems(o,this._valueItemsDuringOnChange),e.events.push({type:"onChange"})}selectFocusedItem(o,e){const{virtual:t}=this.props,a=f.getFilteredData(this.props),{focusedIndex:i}=e||this.getFocusedState(),l=t?t.skip:0;a[i-l]!==void 0&&this.handleItemClick(i,o)}setItems(o,e){e.length=0,e.push(...o)}shouldKeepNoFocusOnOpen(o,e){return!!this.props.selectAll&&e===void 0&&this.value.length===0&&!(this.props.allowCustom&&o)}getFocusedState(){if(this.state.selectAllFocused)return{focusedType:0,focusedIndex:-1};const{focusedIndex:o}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text;if(this.shouldKeepNoFocusOnOpen(e,o))return{focusedType:0,focusedIndex:-1};const{allowCustom:t,dataItemKey:a,virtual:i,textField:l,focusedItemIndex:s=f.itemIndexStartsWith,skipDisabledItems:c}=this.props,h=f.getFilteredData(this.props),r=i&&i.skip||0;let n;if(o!==void 0)return{focusedIndex:o,focusedItem:h[o-r],focusedType:1};const p=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return n=s(h,e,l),{focusedItem:h[n],focusedIndex:n+r,focusedType:1};if(p.length){if(this.props.selectAll){const u=p[p.length-1],y=h.findIndex(m=>f.areSame(m,u,a));return y!==-1?{focusedIndex:y+r,focusedItem:h[y],focusedType:1}:r===0?{focusedItem:h[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}const v=p[p.length-1];return n=h.findIndex(u=>f.areSame(u,v,a)),h[n]!==void 0?{focusedIndex:n+r,focusedItem:h[n],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&l&&!e&&r===0){const v=h.findIndex(u=>!u.disabled);return{focusedIndex:v,focusedItem:h[v-r],focusedType:1}}return r===0?{focusedItem:h[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(o){this._skipFocusEvent=!0,o.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(o){this.base.applyState(o),this._valueItemsDuringOnChange=null}calculateMedia(o){for(const e of o)this.setState({windowWidth:e.target.clientWidth})}toggleSelectAll(o){if(this.props.disabled)return;o.data.focusedIndex=void 0;const e=this.areAllSelectableItemsSelected();if(o.data.selectAllFocused=!0,this.props.onSelectAllChange){this.props.onSelectAllChange({syntheticEvent:o.syntheticEvent,nativeEvent:o.syntheticEvent.nativeEvent,target:this,allSelected:!e});return}const t=this.getSelectableItems();if(t.length===0)return;let a=[];e?a=this.value.filter(i=>!t.some(l=>f.areSame(l,i,this.props.dataItemKey))):(a=[...this.value],t.forEach(i=>{a.some(s=>f.areSame(s,i,this.props.dataItemKey))||a.push(i)})),this.triggerOnChange(a,o)}updateStateOnKeyboardNavigation(o,e){this.setState({value:o}),this.triggerOnChange(o,e),this.applyState(e)}getLastSelectedOrDeselectedIndex(o,e){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=e),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+o:null}};C.displayName="MultiSelect",C.propTypes={...A.propTypes,autoClose:b.bool,value:b.arrayOf(b.any),defaultValue:b.arrayOf(b.any),dataItemKey:b.string,placeholder:b.string,tags:b.arrayOf(b.shape({text:b.string,data:b.arrayOf(b.any)})),tagRender:b.func,id:b.string,ariaLabelledBy:b.string,ariaDescribedBy:b.string,selectAll:b.bool,checkboxes:b.bool,summarizeAfter:b.number,onSelectAllChange:b.func,groupField:b.string,list:b.any,adaptive:b.bool,adaptiveTitle:b.string,adaptiveSubtitle:b.string,onCancel:b.func,skipDisabledItems:b.bool,inputAttributes:b.object},C.defaultProps={...A.defaultProps,autoClose:!0,required:!1,selectAll:!1,checkboxes:!1,size:void 0,rounded:void 0,fillMode:void 0,skipDisabledItems:!0,prefix:void 0,suffix:void 0};let w=C;const R=d.createPropsContext(),q=d.withIdHOC(d.withPropsContext(R,d.withAdaptiveModeContext(w)));q.displayName="KendoReactMultiSelect";F.registerForLocalization(w);exports.MultiSelect=q;exports.MultiSelectPropsContext=R;exports.MultiSelectWithoutContext=w;