@progress/kendo-react-dropdowns 14.4.1-develop.13 → 14.4.1-develop.15

package/DropDownList/DropDownListProps.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events.js';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings.js';
 import { ListGroupItemProps } from '../common/ListGroupItem.js';
 import { GroupStickyHeaderProps } from '../common/GroupStickyHeader.js';

package/DropDownList/models/index.d.ts

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { FormComponentValidity } from '@progress/kendo-react-common';
-import { DropDownListProps } from '../DropDownListProps.js';
+import { DropDownListProps } from '../DropDownListProps';
 /**
  * Represent the `ref` of the DropDownList component.
  */

package/DropDownTree/DropDownTree.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { DropDownTreeProps, DropDownTreeHandle } from './DropDownTreeProps.js';
+import { DropDownTreeProps, DropDownTreeHandle } from './DropDownTreeProps';
 import * as React from 'react';
 /**
  * Represents the PropsContext of the `DropDownTree` component.

package/DropDownTree/DropDownTreeProps.d.ts

@@ -7,7 +7,7 @@
  */
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { ItemRenderProps } from '@progress/kendo-react-treeview';
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events.js';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
 import { DropDownsPopupSettings } from '../common/settings.js';
 /**
  * Represents the Object which is passed to the

package/DropDownTree/ListNoData.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { ListNoDataProps } from './DropDownTreeProps.js';
+import { ListNoDataProps } from './DropDownTreeProps';
 import * as React from 'react';
 /**
  * @hidden

package/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { CustomComponent } from '@progress/kendo-react-common';
-import { ComboBoxBlurEvent, ComboBoxChangeEvent, ComboBoxCloseEvent, ComboBoxFilterChangeEvent, ComboBoxFocusEvent, ComboBoxOpenEvent, ComboBoxPageChangeEvent, ComboBoxProps } from '../ComboBox/ComboBoxProps.js';
+import { ComboBoxBlurEvent, ComboBoxChangeEvent, ComboBoxCloseEvent, ComboBoxFilterChangeEvent, ComboBoxFocusEvent, ComboBoxOpenEvent, ComboBoxPageChangeEvent, ComboBoxProps } from '../ComboBox/ComboBoxProps';
 import { DropDownsPopupSettings, VirtualizationSettings } from '../common/settings.js';
 import { ListItemProps } from '../common/ListItem.js';
 import * as React from 'react';

package/MultiSelect/MultiSelect.d.ts

@@ -9,7 +9,7 @@ import { default as PropTypes } from 'prop-types';
 import { FormComponent, FormComponentValidity } from '@progress/kendo-react-common';
 import { TagData } from './TagList.js';
 import { default as DropDownBase } from '../common/DropDownBase.js';
-import { MultiSelectProps } from './MultiSelectProps.js';
+import { MultiSelectProps } from './MultiSelectProps';
 import { DropDownStateBase, InternalState, ActiveDescendant } from './../common/settings.js';
 import * as React from 'react';
 /** @hidden */

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 W=require("react"),y=require("prop-types"),r=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),j=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),U=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),M=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),E=require("../package-metadata.js"),X=require("../common/ClearButton.js"),Z=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout"),te=require("../common/ListFilter.js"),_=require("../common/withCustomComponent.js");function se(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=se(W),{sizeMap:F,roundedMap:ie}=r.kendoThemeMaps,ae="Please enter a valid value!",N=S=>S.preventDefault(),R=S=>S===2,C=class C extends m.Component{constructor(n){super(n),this.state={activedescendant:D.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(c=>c.trim()).filter(c=>c).reduce((c,h)=>{const d=g.getItemIndexByText(t,h,a,!1,!0);if(d!==-1){const l=t[d];c.some(p=>g.areSame(p,l,s))||c.push(l)}return c},[]);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,c=o[e-i],h=this.value.findIndex(p=>g.areSame(p,c,a));this._lastSelectedOrDeslectedItemIndex=o.findIndex(p=>g.areSame(p,c,a));let d=[];h!==-1?(d=this.value,d.splice(h,1)):d=[...this.value,c],(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(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 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,c=s?s.pageSize:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:d}=this.getFocusedState(),l=a&&h,p=o[e-i];if(s&&!p&&e>=0&&d!==e){const f=Math.floor(e/c)*c;if(f!==i){this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList),this.base.triggerOnPageChange(t,f,c);return}}p&&d!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):l&&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;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,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:d,focusedIndex:l}=this.getFocusedState(),p=this.base.initState();if(p.syntheticEvent=e,!c&&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,p);const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)};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,p)}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,p),this.updateStateOnKeyboardNavigation(u,p)}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,p),this.updateStateOnKeyboardNavigation(u,p)}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,p),this.updateStateOnKeyboardNavigation(u,p))}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,p),this.updateStateOnKeyboardNavigation(u,p))}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&&h)this.onNavigate(p,i);else{let v=0;if(i===r.Keys.down||i===r.Keys.right){const x=o.slice(b+1).find(I=>!I.disabled&&I[t]);v=x&&o.findIndex(I=>I[t]===x[t]),v&&v!==-1&&(v=v+u)}else if(i===r.Keys.up||i===r.Keys.left){let x;if(l===-1)x=o,v=o.findIndex(I=>!I.disabled&&I[t]),v!==-1&&(v=v+u);else{x=o.slice(0,b);let I=x.pop();for(;I&&I.disabled;)I=x.pop();v=I&&o.findIndex(K=>K[t]===I[t]),v&&v!==-1&&(v=v+u)}}if(v){const x=v-l;this.onNavigate(p,i,x)}else this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(p,i);else{let v=null;if(i===r.Keys.down||i===r.Keys.right)v=o.slice(b+1).find(x=>!x.disabled);else if(i===r.Keys.up||i===r.Keys.left){const x=o.slice(0,b);for(v=x.pop();v&&v.disabled;)v=x.pop()}if(v){const x=o.indexOf(v);if(x!==-1){const I=u+x-l;this.onNavigate(p,i,I)}else this.onNavigate(p,i)}else this.onNavigate(p,i)}this.applyState(p),e.preventDefault()}else i===r.Keys.enter?(e.preventDefault(),this.props.allowCustom&&c&&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:c}=this.props,h=g.getFilteredData(this.props),d=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),p=a&&d&&m.createElement("div",{className:r.classNames("k-list",{[`k-list-${F[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:N},m.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":R(l)}),style:{fontStyle:"italic"}},d,m.createElement(r.IconWrap,{name:"plus",icon:$.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:f}=this.state;return f===void 0&&i!==void 0&&(f=g.getItemValue(h[0],i)),m.createElement(m.Fragment,null,e&&m.createElement("div",{className:"k-list-header"},e),p,m.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":F[s]||s}`]:this.mobileMode||s,"k-virtual-list":this.base.vs.enabled})},!c&&f&&h.length!==0&&m.createElement(Y,{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(G,{...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,c=a?m.createElement(te,{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,h={title:e||this.props.label,subTitle:t,expand:this.opened,onClose:d=>this.closePopup(d),windowWidth:o,mobileFilter:c};return m.createElement(Z.AdaptiveMode,{...h},m.createElement(ee.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{textField:e,listNoDataRender:t,itemRender:a,groupHeaderItemRender:s,dataItemKey:o,virtual:i={skip:0,total:void 0}}=this.props,c=g.getFilteredData(this.props),h=this.base.vs,{focusedIndex:d}=this.getFocusedState(),l=this.base.getPopupSettings(),p=`translateY(${h.translate}px)`;return m.createElement(U,{id:this.base.listBoxId,show:this.opened,data:c.slice(),focusedIndex:d-i.skip,value:this.value,textField:e,valueField:o,optionsGuid:this.base.guid,groupField:this.props.groupField,listRef:f=>{h.list=this.base.list=f},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:h.enabled?{transform:p}:void 0,key:"listKey",skip:i.skip,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:s,noDataRender:t,onMouseDown:N,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:h.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:i.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),h=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>h);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||ae)},this.validate(n),this.licenseMessage=r.getLicenseMessage(E.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(E.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 p;const{virtual:t,groupField:a=""}=this.props,s=g.getFilteredData(this.props),o=t?t.skip:0,i=n.virtual?n.virtual.total:0,c=n.opened!==void 0?n.opened:e.opened,h=!c&&this.opened,d=c&&!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=(p=this.base.getGroupedDataModernMode(s,a))==null?void 0:p.indexOf(f)),h&&t?this.base.scrollToVirtualItem(t,u-o):h&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][a],this),this.base.scrollToItem(u)):this.opened&&c&&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:c}=this.getFocusedState(),h=a&&o,d=R(i),l=this.base,p=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:c,max:(p.enabled?p.total:s.length)-1,min:h?-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:c,size:h,rounded:d,fillMode:l,loading:p,filter:f}=this.props,{text:u,focused:b,focusedTag:v,currentValue:x}=this.state,I=this.base.vs,K=this.props.id||this._inputId;I.enabled=c!==void 0,c!==void 0&&(I.skip=c.skip,I.total=c.total,I.pageSize=c.pageSize);const k=this.mobileMode&&this.opened?x:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const P=!this.validityStyles||this.validity.valid,B=!!(f!==void 0?f:u)||k&&k.length>0,[V,z]=_(this.props.prefix||m.Fragment),[A,H]=_(this.props.suffix||m.Fragment),O=m.createElement(m.Fragment,null,m.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",e,{[`k-input-${F[h]||h}`]:h,[`k-rounded-${ie[d]||d}`]:d,[`k-input-${l}`]:l,"k-focus":b&&!s,"k-invalid":!P,"k-disabled":s,"k-loading":p,"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(V,{...z}),m.createElement("div",{className:r.classNames("k-input-values")},m.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${F[h]||h}`]:h}),role:"listbox",id:"tagslist-"+this.base.guid},k&&k.length>0&&m.createElement(J,{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:h})),this.renderSearchBar(K)),p&&m.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&m.createElement(A,{...H}),B&&m.createElement(X,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?m.createElement(j.FloatingLabel,{label:t,editorId:K,editorValue:u||g.getItemValue(this.value[0],o),editorValid:P,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:a}=this.state,{disabled:s,placeholder:o,ariaDescribedBy:i,ariaLabelledBy:c,ariaLabel:h,inputAttributes:d}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:p}=this.getFocusedState(),f=this.value.length===0&&!l?o:void 0,u=a&&a.length>0?void 0:o,b=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${p}`,v={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return m.createElement(Q,{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,owns:this.base.listBoxId,role:"combobox",activedescendant:b,ariaDescribedBy:`tagslist-${this.base.guid}${i?" "+i:""}`,ariaLabelledBy:c,ariaRequired:this.required,ariaLabel:h,inputAttributes:d,...v})}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,c;const h=i!==-1;if(t===r.Keys.left)h?i=Math.max(0,i-1):i=s.length-1,c=s[i];else if(t===r.Keys.right)i===s.length-1?c=void 0:h&&(i=Math.min(s.length-1,i+1),c=s[i]);else if(t===r.Keys.home&&!n.shiftKey)c=s[0];else if(t===r.Keys.end&&!n.shiftKey)c=s[s.length-1];else if(t===r.Keys.delete){if(h){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(h)g.removeDataItems(d,s[i].data,o),this.triggerOnChange(d,e);else if(!h&&s.length){const l=s.pop();g.removeDataItems(d,l.data,o),this.triggerOnChange(d,e)}}c!==a&&(e.data.focusedTag=c,e.data.activedescendant=D.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:c}=this.props,h=g.getFilteredData(this.props),d=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:h[n-d],focusedType:1};const p=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=i(h,e,o),{focusedItem:h[l],focusedIndex:l+d,focusedType:1};if(p.length){const f=p[p.length-1];return l=h.findIndex(u=>g.areSame(u,f,a)),h[l]!==void 0?{focusedIndex:l+d,focusedItem:h[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&o&&!e&&d===0){const f=h.findIndex(u=>!u.disabled&&u[o]);return{focusedIndex:f,focusedItem:h[f-d],focusedType:1}}return d===0?{focusedItem:h[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 T=C;const L=r.createPropsContext(),q=r.withIdHOC(r.withPropsContext(L,r.withAdaptiveModeContext(T)));q.displayName="KendoReactMultiSelect";exports.MultiSelect=q;exports.MultiSelectPropsContext=L;exports.MultiSelectWithoutContext=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),y=require("prop-types"),r=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),j=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),U=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),T=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),E=require("../package-metadata.js"),X=require("../common/ClearButton.js"),Z=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout"),te=require("../common/ListFilter.js"),_=require("../common/withCustomComponent.js");function se(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=se(W),{sizeMap:w,roundedMap:ie}=r.kendoThemeMaps,ae="Please enter a valid value!",N=S=>S.preventDefault(),R=S=>S===2,C=class C extends m.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new T(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(c=>c.trim()).filter(c=>c).reduce((c,h)=>{const d=g.getItemIndexByText(t,h,a,!1,!0);if(d!==-1){const l=t[d];c.some(p=>g.areSame(p,l,s))||c.push(l)}return c},[]);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,c=o[e-i],h=this.value.findIndex(p=>g.areSame(p,c,a));this._lastSelectedOrDeslectedItemIndex=o.findIndex(p=>g.areSame(p,c,a));let d=[];h!==-1?(d=this.value,d.splice(h,1)):d=[...this.value,c],(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(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 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,c=s?s.pageSize:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:d}=this.getFocusedState(),l=a&&h,p=o[e-i];if(s&&!p&&e>=0&&d!==e){const f=Math.floor(e/c)*c;if(f!==i){this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList),this.base.triggerOnPageChange(t,f,c);return}}p&&d!==e?this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList):l&&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;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,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:d,focusedIndex:l}=this.getFocusedState(),p=this.base.initState();if(p.syntheticEvent=e,!c&&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,p);const f=()=>{e.preventDefault(),this.base.togglePopup(p),this.applyState(p)};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,p)}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,p),this.updateStateOnKeyboardNavigation(u,p)}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,p),this.updateStateOnKeyboardNavigation(u,p)}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,p),this.updateStateOnKeyboardNavigation(u,p))}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,p),this.updateStateOnKeyboardNavigation(u,p))}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&&h)this.onNavigate(p,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(p,i,I)}else this.onNavigate(p,i)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(p,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(p,i,x)}else this.onNavigate(p,i)}else this.onNavigate(p,i)}this.applyState(p),e.preventDefault()}else i===r.Keys.enter?(e.preventDefault(),this.props.allowCustom&&c&&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:c}=this.props,h=g.getFilteredData(this.props),d=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),p=a&&d&&m.createElement("div",{className:r.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:N},m.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":R(l)}),style:{fontStyle:"italic"}},d,m.createElement(r.IconWrap,{name:"plus",icon:$.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:f}=this.state;return f===void 0&&i!==void 0&&(f=g.getItemValue(h[0],i)),m.createElement(m.Fragment,null,e&&m.createElement("div",{className:"k-list-header"},e),p,m.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:this.mobileMode||s,"k-virtual-list":this.base.vs.enabled})},!c&&f&&h.length!==0&&m.createElement(Y,{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(G,{...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,c=a?m.createElement(te,{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,h={title:e||this.props.label,subTitle:t,expand:this.opened,onClose:d=>this.closePopup(d),windowWidth:o,mobileFilter:c};return m.createElement(Z.AdaptiveMode,{...h},m.createElement(ee.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{textField:e,listNoDataRender:t,itemRender:a,groupHeaderItemRender:s,dataItemKey:o,virtual:i={skip:0,total:void 0}}=this.props,c=g.getFilteredData(this.props),h=this.base.vs,{focusedIndex:d}=this.getFocusedState(),l=this.base.getPopupSettings(),p=`translateY(${h.translate}px)`;return m.createElement(U,{id:this.base.listBoxId,show:this.opened,data:c.slice(),focusedIndex:d-i.skip,value:this.value,textField:e,valueField:o,optionsGuid:this.base.guid,groupField:this.props.groupField,listRef:f=>{h.list=this.base.list=f},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:h.enabled?{transform:p}:void 0,key:"listKey",skip:i.skip,onClick:this.handleItemClick,itemRender:a,groupHeaderItemRender:s,noDataRender:t,onMouseDown:N,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:h.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:i.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),h=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>h);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||ae)},this.validate(n),this.licenseMessage=r.getLicenseMessage(E.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(E.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 p;const{virtual:t,groupField:a=""}=this.props,s=g.getFilteredData(this.props),o=t?t.skip:0,i=n.virtual?n.virtual.total:0,c=n.opened!==void 0?n.opened:e.opened,h=!c&&this.opened,d=c&&!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=(p=this.base.getGroupedDataModernMode(s,a))==null?void 0:p.indexOf(f)),h&&t?this.base.scrollToVirtualItem(t,u-o):h&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][a],this),this.base.scrollToItem(u)):this.opened&&c&&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:c}=this.getFocusedState(),h=a&&o,d=R(i),l=this.base,p=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:c,max:(p.enabled?p.total:s.length)-1,min:h?-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:c,size:h,rounded:d,fillMode:l,loading:p,filter:f}=this.props,{text:u,focused:b,focusedTag:v,currentValue:I}=this.state,x=this.base.vs,M=this.props.id||this._inputId;x.enabled=c!==void 0,c!==void 0&&(x.skip=c.skip,x.total=c.total,x.pageSize=c.pageSize);const k=this.mobileMode&&this.opened?I:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const O=!this.validityStyles||this.validity.valid,B=!!(f!==void 0?f:u)||k&&k.length>0,[V,z]=_(this.props.prefix||m.Fragment),[A,H]=_(this.props.suffix||m.Fragment),P=m.createElement(m.Fragment,null,m.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",e,{[`k-input-${w[h]||h}`]:h,[`k-rounded-${ie[d]||d}`]:d,[`k-input-${l}`]:l,"k-focus":b&&!s,"k-invalid":!O,"k-disabled":s,"k-loading":p,"k-required":this.required}),style:t?{...n,width:void 0}:n,dir:a,onFocus:K=>{this.mobileMode?this.handleWrapperClick(K):this.handleFocus(K)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&m.createElement(V,{...z}),m.createElement("div",{className:r.classNames("k-input-values")},m.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${w[h]||h}`]:h}),role:"listbox",id:"tagslist-"+this.base.guid},k&&k.length>0&&m.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:k,guid:this.base.guid,focused:v?k.find(K=>g.matchTags(K,v,i)):void 0,size:h})),this.renderSearchBar(M)),p&&m.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&m.createElement(A,{...H}),B&&m.createElement(X,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?m.createElement(j.FloatingLabel,{label:t,editorId:M,editorValue:u||g.getItemValue(this.value[0],o),editorValid:O,editorDisabled:s,style:{width:n?n.width:void 0},children:P}):P}renderSearchBar(n){const{activedescendant:e,focusedTag:t,currentValue:a}=this.state,{disabled:s,placeholder:o,ariaDescribedBy:i,ariaLabelledBy:c,ariaLabel:h,inputAttributes:d}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:p}=this.getFocusedState(),f=this.value.length===0&&!l?o:void 0,u=a&&a.length>0?void 0:o,b=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${p}`,v={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return m.createElement(Q,{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,owns:this.base.listBoxId,role:"combobox",activedescendant:b,ariaDescribedBy:`tagslist-${this.base.guid}${i?" "+i:""}`,ariaLabelledBy:c,ariaRequired:this.required,ariaLabel:h,inputAttributes:d,...v})}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,c;const h=i!==-1;if(t===r.Keys.left)h?i=Math.max(0,i-1):i=s.length-1,c=s[i];else if(t===r.Keys.right)i===s.length-1?c=void 0:h&&(i=Math.min(s.length-1,i+1),c=s[i]);else if(t===r.Keys.home&&!n.shiftKey)c=s[0];else if(t===r.Keys.end&&!n.shiftKey)c=s[s.length-1];else if(t===r.Keys.delete){if(h){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(h)g.removeDataItems(d,s[i].data,o),this.triggerOnChange(d,e);else if(!h&&s.length){const l=s.pop();g.removeDataItems(d,l.data,o),this.triggerOnChange(d,e)}}c!==a&&(e.data.focusedTag=c,e.data.activedescendant=D.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:c}=this.props,h=g.getFilteredData(this.props),d=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:h[n-d],focusedType:1};const p=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=i(h,e,o),{focusedItem:h[l],focusedIndex:l+d,focusedType:1};if(p.length){const f=p[p.length-1];return l=h.findIndex(u=>g.areSame(u,f,a)),h[l]!==void 0?{focusedIndex:l+d,focusedItem:h[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&o&&!e&&d===0){const f=h.findIndex(u=>!u.disabled);return{focusedIndex:f,focusedItem:h[f-d],focusedType:1}}return d===0?{focusedItem:h[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={...T.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={...T.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 L=r.createPropsContext(),q=r.withIdHOC(r.withPropsContext(L,r.withAdaptiveModeContext(F)));q.displayName="KendoReactMultiSelect";exports.MultiSelect=q;exports.MultiSelectPropsContext=L;exports.MultiSelectWithoutContext=F;

package/MultiSelect/MultiSelect.mjs

@@ -17,14 +17,14 @@ import ht from "./TagList.mjs";
 import pt from "../common/SearchBar.mjs";
 import O from "../common/DropDownBase.mjs";
 import { ActiveDescendant as w } from "../common/settings.mjs";
-import { getFilteredData as x, getItemIndexByText as ct, areSame as D, removeDataItems as P, isPresent as K, getItemValue as _, preventDefaultNonInputs as ut, matchTags as z, itemIndexStartsWith as ft } from "../common/utils.mjs";
+import { getFilteredData as x, getItemIndexByText as ct, areSame as F, removeDataItems as D, isPresent as E, getItemValue as K, preventDefaultNonInputs as ut, matchTags as z, itemIndexStartsWith as ft } from "../common/utils.mjs";
 import { packageMetadata as A } from "../package-metadata.mjs";
 import gt from "../common/ClearButton.mjs";
 import { AdaptiveMode as mt } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as vt } from "@progress/kendo-react-layout";
 import bt from "../common/ListFilter.mjs";
 import H from "../common/withCustomComponent.mjs";
-const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W = (E) => E.preventDefault(), $ = (E) => E === 2, C = class C extends g.Component {
+const { sizeMap: P, roundedMap: It } = tt, yt = "Please enter a valid value!", W = (M) => M.preventDefault(), $ = (M) => M === 2, C = class C extends g.Component {
   constructor(l) {
     super(l), this.state = {
       activedescendant: w.PopupList,
@@ -38,7 +38,7 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
         const d = ct(e, r, o, !1, !0);
         if (d !== -1) {
           const n = e[d];
-          h.some((p) => D(p, n, s)) || h.push(n);
+          h.some((p) => F(p, n, s)) || h.push(n);
         }
         return h;
       }, []);
@@ -47,15 +47,15 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       const i = this.base.initState();
       i.syntheticEvent = { target: this._element }, this.triggerOnChange(a, i), this.applyState(i);
     }, this.handleItemSelect = (t, e) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = a[t - i], r = this.value.findIndex((p) => D(p, h, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((p) => D(p, h, o));
+      const { dataItemKey: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = a[t - i], r = this.value.findIndex((p) => F(p, h, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((p) => F(p, h, o));
       let d = [];
       r !== -1 ? (d = this.value, d.splice(r, 1)) : d = [...this.value, h], (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(d, e), this.base.triggerPageChangeCornerItems(h, 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;
-      P(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
+      D(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
     }, this.itemFocus = (t, e) => {
       const { allowCustom: o, virtual: s } = this.props, a = x(this.props), i = s ? s.skip : 0, h = s ? s.pageSize : 0, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), n = o && r, p = a[t - i];
       if (s && !p && t >= 0 && d !== t) {
@@ -78,7 +78,7 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       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;
-      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
+      E(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, virtual: s } = this.props, a = x(this.props), i = t.keyCode, h = this.props.filter !== void 0 ? this.props.filter : this.state.text, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: n } = this.getFocusedState(), p = this.base.initState();
       if (p.syntheticEvent = t, !h && this.value.length > 0 && (i === u.left || i === u.right || i === u.home || i === u.end || i === u.delete || i === u.backspace) && !t.shiftKey)
@@ -118,23 +118,23 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
             else {
               let m = 0;
               if (i === u.down || i === u.right) {
-                const y = a.slice(b + 1).find((I) => !I.disabled && I[e]);
-                m = y && a.findIndex((I) => I[e] === y[e]), m && m !== -1 && (m = m + c);
+                const I = a.slice(b + 1).find((y) => !y.disabled);
+                m = I && a.indexOf(I), m && m !== -1 && (m = m + c);
               } else if (i === u.up || i === u.left) {
-                let y;
+                let I;
                 if (n === -1)
-                  y = a, m = a.findIndex((I) => !I.disabled && I[e]), m !== -1 && (m = m + c);
+                  I = a, m = a.findIndex((y) => !y.disabled), m !== -1 && (m = m + c);
                 else {
-                  y = a.slice(0, b);
-                  let I = y.pop();
-                  for (; I && I.disabled; )
-                    I = y.pop();
-                  m = I && a.findIndex((T) => T[e] === I[e]), m && m !== -1 && (m = m + c);
+                  I = a.slice(0, b);
+                  let y = I.pop();
+                  for (; y && y.disabled; )
+                    y = I.pop();
+                  m = y && a.indexOf(y), m && m !== -1 && (m = m + c);
                 }
               }
               if (m) {
-                const y = m - n;
-                this.onNavigate(p, i, y);
+                const I = m - n;
+                this.onNavigate(p, i, I);
               } else
                 this.onNavigate(p, i);
             }
@@ -143,17 +143,17 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
           else {
             let m = null;
             if (i === u.down || i === u.right)
-              m = a.slice(b + 1).find((y) => !y.disabled);
+              m = a.slice(b + 1).find((I) => !I.disabled);
             else if (i === u.up || i === u.left) {
-              const y = a.slice(0, b);
-              for (m = y.pop(); m && m.disabled; )
-                m = y.pop();
+              const I = a.slice(0, b);
+              for (m = I.pop(); m && m.disabled; )
+                m = I.pop();
             }
             if (m) {
-              const y = a.indexOf(m);
-              if (y !== -1) {
-                const I = c + y - n;
-                this.onNavigate(p, i, I);
+              const I = a.indexOf(m);
+              if (I !== -1) {
+                const y = c + I - n;
+                this.onNavigate(p, i, y);
               } else
                 this.onNavigate(p, i);
             } else
@@ -167,7 +167,7 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
         "div",
         {
           className: S("k-list", {
-            [`k-list-${M[s] || s}`]: s
+            [`k-list-${P[s] || s}`]: s
           }),
           key: "customitem",
           onClick: this.customItemSelect,
@@ -184,11 +184,11 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
         )
       );
       let { group: f } = this.state;
-      return f === void 0 && i !== void 0 && (f = _(r[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, t && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, t), p, /* @__PURE__ */ g.createElement(
+      return f === void 0 && i !== void 0 && (f = K(r[0], i)), /* @__PURE__ */ g.createElement(g.Fragment, null, t && /* @__PURE__ */ g.createElement("div", { className: "k-list-header" }, t), p, /* @__PURE__ */ g.createElement(
         "div",
         {
           className: S("k-list", {
-            [`k-list-${this.mobileMode ? "lg" : M[s] || s}`]: this.mobileMode || s,
+            [`k-list-${this.mobileMode ? "lg" : P[s] || s}`]: this.mobileMode || s,
             "k-virtual-list": this.base.vs.enabled
           })
         },
@@ -238,12 +238,12 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       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;
-      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      E(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;
-      K(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      E(o) && o !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.renderList = () => {
       const {
         textField: t,
@@ -365,7 +365,7 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
   get tagsToRender() {
     const { tags: l, textField: t } = this.props, e = [];
     return l === void 0 ? this.value.forEach((o) => {
-      e.push({ text: _(o, t), data: [o] });
+      e.push({ text: K(o, t), data: [o] });
     }) : e.push(...l), e;
   }
   /**
@@ -468,16 +468,16 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       fillMode: n,
       loading: p,
       filter: f
-    } = this.props, { text: c, focused: b, focusedTag: m, currentValue: y } = this.state, I = this.base.vs, T = this.props.id || this._inputId;
-    I.enabled = h !== void 0, h !== void 0 && (I.skip = h.skip, I.total = h.total, I.pageSize = h.pageSize);
-    const k = this.mobileMode && this.opened ? y : this.tagsToRender;
+    } = this.props, { text: c, focused: b, focusedTag: m, currentValue: I } = this.state, y = this.base.vs, N = this.props.id || this._inputId;
+    y.enabled = h !== void 0, h !== void 0 && (y.skip = h.skip, y.total = h.total, y.pageSize = h.pageSize);
+    const k = this.mobileMode && this.opened ? I : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
     const R = !this.validityStyles || this.validity.valid, q = !!(f !== void 0 ? f : c) || k && k.length > 0, [G, U] = H(this.props.prefix || g.Fragment), [j, Y] = H(this.props.suffix || g.Fragment), L = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
       "div",
       {
         ref: this.componentRef,
         className: S("k-multiselect k-input", t, {
-          [`k-input-${M[r] || r}`]: r,
+          [`k-input-${P[r] || r}`]: r,
           [`k-rounded-${It[d] || d}`]: d,
           [`k-input-${n}`]: n,
           "k-focus": b && !s,
@@ -488,8 +488,8 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
         }),
         style: e ? { ...l, width: void 0 } : l,
         dir: o,
-        onFocus: (F) => {
-          this.mobileMode ? this.handleWrapperClick(F) : this.handleFocus(F);
+        onFocus: (T) => {
+          this.mobileMode ? this.handleWrapperClick(T) : this.handleFocus(T);
         },
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
@@ -499,7 +499,7 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       /* @__PURE__ */ g.createElement("div", { className: S("k-input-values") }, /* @__PURE__ */ g.createElement(
         "div",
         {
-          className: S("k-chip-list", { [`k-chip-list-${M[r] || r}`]: r }),
+          className: S("k-chip-list", { [`k-chip-list-${P[r] || r}`]: r }),
           role: "listbox",
           id: "tagslist-" + this.base.guid
         },
@@ -510,11 +510,11 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
             onTagDelete: this.onTagDelete,
             data: k,
             guid: this.base.guid,
-            focused: m ? k.find((F) => z(F, m, i)) : void 0,
+            focused: m ? k.find((T) => z(T, m, i)) : void 0,
             size: r
           }
         )
-      ), this.renderSearchBar(T)),
+      ), this.renderSearchBar(N)),
       p && /* @__PURE__ */ g.createElement(B, { className: "k-input-loading-icon", name: "loading" }),
       this.props.suffix && /* @__PURE__ */ g.createElement(j, { ...Y }),
       q && /* @__PURE__ */ g.createElement(gt, { onClick: this.clearButtonClick }),
@@ -524,8 +524,8 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       nt,
       {
         label: e,
-        editorId: T,
-        editorValue: c || _(this.value[0], a),
+        editorId: N,
+        editorValue: c || K(this.value[0], a),
         editorValid: R,
         editorDisabled: s,
         style: { width: l ? l.width : void 0 },
@@ -578,15 +578,15 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
     else if (e === u.delete) {
       if (r) {
         const d = this.value;
-        P(d, s[i].data, a), this.triggerOnChange(d, t);
+        D(d, s[i].data, a), this.triggerOnChange(d, t);
       }
     } else if (e === u.backspace) {
       const d = this.value;
       if (r)
-        P(d, s[i].data, a), this.triggerOnChange(d, t);
+        D(d, s[i].data, a), this.triggerOnChange(d, t);
       else if (!r && s.length) {
         const n = s.pop();
-        P(d, n.data, a), this.triggerOnChange(d, t);
+        D(d, n.data, a), this.triggerOnChange(d, t);
       }
     }
     h !== o && (t.data.focusedTag = h, t.data.activedescendant = w.TagsList), this.applyState(t);
@@ -635,14 +635,14 @@ const { sizeMap: M, roundedMap: It } = tt, yt = "Please enter a valid value!", W
       };
     if (p.length) {
       const f = p[p.length - 1];
-      return n = r.findIndex((c) => D(c, f, o)), r[n] !== void 0 ? {
+      return n = r.findIndex((c) => F(c, f, o)), r[n] !== void 0 ? {
         focusedIndex: n + d,
         focusedItem: r[n],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
     } else if (h && a && !t && d === 0) {
-      const f = r.findIndex((c) => !c.disabled && c[a]);
+      const f = r.findIndex((c) => !c.disabled);
       return {
         focusedIndex: f,
         focusedItem: r[f - d],
@@ -722,16 +722,16 @@ C.displayName = "MultiSelect", C.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let N = C;
+let _ = C;
 const xt = Z(), St = J(
   Q(
     xt,
-    X(N)
+    X(_)
   )
 );
 St.displayName = "KendoReactMultiSelect";
 export {
   St as MultiSelect,
   xt as MultiSelectPropsContext,
-  N as MultiSelectWithoutContext
+  _ as MultiSelectWithoutContext
 };

package/MultiSelect/MultiSelectProps.d.ts

@@ -7,7 +7,7 @@
  */
 import { MultiSelect } from './MultiSelect.js';
 import { AdaptiveModeContextType, CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent, CancelEvent } from './../common/events.js';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent, CancelEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings.js';
 import { ListGroupItemProps } from '../common/ListGroupItem.js';
 import { GroupStickyHeaderProps } from '../common/GroupStickyHeader.js';

package/MultiSelectTree/MultiSelectTree.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { MultiSelectTreeProps, MultiSelectTreeHandle } from './MultiSelectTreeProps.js';
+import { MultiSelectTreeProps, MultiSelectTreeHandle } from './MultiSelectTreeProps';
 import * as React from 'react';
 /**
  * Represents the PropsContext of the `MultiSelectTree` component.

package/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -7,7 +7,7 @@
  */
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { ItemRenderProps } from '@progress/kendo-react-treeview';
-import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent, CancelEvent } from '../common/events.js';
+import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent, CancelEvent } from '../common/events';
 import { DropDownsPopupSettings } from '../common/settings.js';
 import { TagData } from '../MultiSelect/TagList.js';
 import * as React from 'react';

package/MultiSelectTree/utils.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { MultiSelectTreeChangeEventOperation } from './MultiSelectTreeProps.js';
+import { MultiSelectTreeChangeEventOperation } from './MultiSelectTreeProps';
 /** @hidden */
 export declare const getValueMap: (value: any[], idGetter: any) => any;
 /**

package/common/events.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { FilterDescriptor } from './filterDescriptor.js';
+import { FilterDescriptor } from './filterDescriptor';
 import { Page } from './settings.js';
 /**
  * @hidden

package/common/settings.d.ts

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { PopupProps } from '@progress/kendo-react-popup';
-import { FilterDescriptor } from './filterDescriptor.js';
+import { FilterDescriptor } from './filterDescriptor';
 /**
  * Represents the `skip` and `take` configurations which are wrapped in the `page` object.
  */