@progress/kendo-react-dropdowns 13.3.0 → 13.4.0-develop.2

package/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,281 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+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 { DropDownStateBase, InternalState, ActiveDescendant } from './../common/settings.js';
+import * as React from 'react';
+/** @hidden */
+export interface MultiSelectState extends DropDownStateBase {
+    selectedItems?: Array<any>;
+    focusedIndex?: number;
+    focusedTag?: TagData;
+    activedescendant?: ActiveDescendant;
+    value?: Array<any>;
+    currentValue?: Array<any>;
+    windowWidth?: number;
+}
+/** @hidden */
+export interface MultiSelectInternalState extends InternalState {
+    data: MultiSelectState;
+}
+/** @hidden */
+export declare class MultiSelectWithoutContext extends React.Component<MultiSelectProps, MultiSelectState> implements FormComponent {
+    static displayName: string;
+    /** @hidden */
+    static propTypes: {
+        autoClose: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<any[]>;
+        defaultValue: PropTypes.Requireable<any[]>;
+        dataItemKey: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        tags: PropTypes.Requireable<(PropTypes.InferProps<{
+            text: PropTypes.Requireable<string>;
+            data: PropTypes.Requireable<any[]>;
+        }> | null | undefined)[]>;
+        tagRender: PropTypes.Requireable<(...args: any[]) => any>;
+        id: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
+        adaptive: PropTypes.Requireable<boolean>;
+        adaptiveTitle: PropTypes.Requireable<string>;
+        adaptiveSubtitle: PropTypes.Requireable<string>;
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
+        inputAttributes: PropTypes.Requireable<object>;
+        filterable: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string>;
+        virtual: PropTypes.Requireable<PropTypes.InferProps<{
+            pageSize: PropTypes.Validator<number>;
+            skip: PropTypes.Validator<number>;
+            total: PropTypes.Validator<number>;
+        }>>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                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>>;
+            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>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    /** @hidden */
+    static defaultProps: {
+        autoClose: boolean;
+        required: boolean;
+        size: "small" | "medium" | "large" | undefined;
+        rounded: "small" | "medium" | "large" | "full" | undefined;
+        fillMode: "flat" | "solid" | "outline" | undefined;
+        skipDisabledItems: boolean;
+        prefix: undefined;
+        suffix: undefined;
+        popupSettings: {
+            height: string;
+        };
+        validityStyles: boolean;
+    };
+    /** @hidden */
+    readonly state: MultiSelectState;
+    private _element;
+    private _valueItemsDuringOnChange;
+    private get _inputId();
+    protected readonly base: DropDownBase;
+    private readonly _tags;
+    private _input;
+    private _adaptiveInput;
+    private _skipFocusEvent;
+    private _lastSelectedOrDeslectedItemIndex;
+    private itemHeight;
+    protected scrollToFocused: boolean;
+    private observerResize?;
+    private get document();
+    private showLicenseWatermark;
+    private readonly licenseMessage?;
+    private validate;
+    constructor(props: MultiSelectProps);
+    /** @hidden */
+    focus: () => void;
+    /** @hidden */
+    get element(): HTMLSpanElement | null;
+    /** @hidden */
+    get opened(): boolean;
+    /** @hidden */
+    get tagsToRender(): Array<TagData>;
+    /**
+     * The mobile mode of the MultiSelect.
+     */
+    get mobileMode(): boolean;
+    /**
+     * Represents the value of the MultiSelect.
+     */
+    get value(): Array<any>;
+    /**
+     * Gets the `name` property of the MultiSelect.
+     */
+    get name(): string | undefined;
+    /**
+     * Represents the validity state into which the MultiSelect is set.
+     */
+    get validity(): FormComponentValidity;
+    /** @hidden */
+    protected get required(): boolean;
+    protected get validityStyles(): boolean;
+    /** @hidden */
+    componentDidUpdate(prevProps: MultiSelectProps, prevState: MultiSelectState): void;
+    /** @hidden */
+    componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
+    /** @hidden */
+    handleItemSelect: (index: number, state: MultiSelectInternalState) => void;
+    /** @hidden */
+    onTagDelete: (itemsToRemove: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
+    /** @hidden */
+    onNavigate(state: MultiSelectInternalState, keyCode: number, skipItems?: number): void;
+    /** @hidden */
+    itemFocus: (index: number, state: MultiSelectInternalState) => void;
+    /** @hidden */
+    render(): React.JSX.Element;
+    private componentRef;
+    private renderSearchBar;
+    private searchbarRef;
+    private onChangeHandler;
+    private clearButtonClick;
+    private onInputKeyDown;
+    private onTagsNavigate;
+    private triggerOnChange;
+    private selectFocusedItem;
+    private setItems;
+    private getFocusedState;
+    private listContainerContent;
+    private renderListContainer;
+    private renderAdaptiveListContainer;
+    private closePopup;
+    private onCancel;
+    private renderList;
+    private onScroll;
+    private customItemSelect;
+    private handleWrapperClick;
+    private handleItemClick;
+    private handleBlur;
+    private handleFocus;
+    private onPopupOpened;
+    private onPopupClosed;
+    private focusElement;
+    private applyState;
+    private setValidity;
+    private calculateMedia;
+    /**
+     * Updates the state of the MultiSelect when the complex keyboard navigation that
+     * includes key combinations with the Ctrl/Command, Shift, Home and End keys
+     *
+     * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
+     * @param {MultiSelectInternalState} state The current state of the MultiSelect
+     */
+    private updateStateOnKeyboardNavigation;
+    /**
+     * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
+     *
+     * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
+     */
+    private getLastSelectedOrDeselectedIndex;
+}
+/**
+ * Represents the PropsContext of the `MultiSelect` component.
+ * Used for global configuration of all `MultiSelect` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context](https://www.telerik.com/kendo-react-ui/components/dropdowns/props-context) article.
+ */
+export declare const MultiSelectPropsContext: React.Context<(p: MultiSelectProps) => MultiSelectProps>;
+/**
+ * Represent the `ref` of the MultiSelect component.
+ */
+export interface MultiSelectHandle extends Pick<MultiSelectWithoutContext, keyof MultiSelectWithoutContext> {
+    /**
+     * The MultiSelect element.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Gets the mobile mode of the MultiSelect component.
+     */
+    mobileMode: boolean;
+    /**
+     * Gets the `name` property of the MultiSelect.
+     */
+    name: string | undefined;
+    /**
+     * Gets whether the MultiSelect popup is open.
+     */
+    opened: boolean;
+    /**
+     * The tags to render in the MultiSelect.
+     */
+    tagsToRender: Array<TagData>;
+    /**
+     * Represents the validity state into which the MultiSelect is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Represents the value of the MultiSelect.
+     */
+    value: Array<any>;
+}
+/** @hidden */
+export type MultiSelect = MultiSelectHandle;
+/**
+ * Represents the [KendoReact MultiSelect component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect).
+ *
+ * Accepts properties of type [MultiSelectProps](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multiselectprops).
+ * Obtaining the `ref` returns an object of type [MultiSelectHandle](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/multiselecthandle).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *    const multiselect = React.useRef(null);
+ *    return (
+ *       <div>
+ *           <MultiSelect
+ *               data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *               ref={multiselect}
+ *           />
+ *           <Button onClick={() => alert(multiselect.current.value)}>alert value</Button>
+ *       </div>
+ *    );
+ * }
+ * ```
+ */
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<any>>;

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"),d=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"),v=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 o=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(o,e,t.get?t:{enumerable:!0,get:()=>S[e]})}}return o.default=S,Object.freeze(o)}const g=se(W),{sizeMap:F,roundedMap:ie}=d.kendoThemeMaps,ae="Please enter a valid value!",N=S=>S.preventDefault(),R=S=>S===2,k=class k extends g.Component{constructor(o){super(o),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.handleItemSelect=(e,t)=>{const{dataItemKey:a,virtual:s}=this.props,n=v.getFilteredData(this.props),i=s?s.skip:0,p=n[e-i],h=this.value.findIndex(c=>v.areSame(c,p,a));this._lastSelectedOrDeslectedItemIndex=n.findIndex(c=>v.areSame(c,p,a));let r=[];h!==-1?(r=this.value,r.splice(h,1)):r=[...this.value,p],(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(r,t),this.base.triggerPageChangeCornerItems(p,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;v.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,a),this.applyState(a)},this.itemFocus=(e,t)=>{const{allowCustom:a,virtual:s}=this.props,n=v.getFilteredData(this.props),i=s?s.skip:0,p=s?s.pageSize:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),l=a&&h,c=n[e-i];if(s&&!c&&e>=0&&r!==e){const f=Math.floor(e/p)*p;if(f!==i){this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList),this.base.triggerOnPageChange(t,f,p);return}}c&&r!==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(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;v.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,n=v.getFilteredData(this.props),i=e.keyCode,p=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:l}=this.getFocusedState(),c=this.base.initState();if(c.syntheticEvent=e,!p&&this.value.length>0&&(i===d.Keys.left||i===d.Keys.right||i===d.Keys.home||i===d.Keys.end||i===d.Keys.delete||i===d.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===d.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(i===d.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)===n.length?[]:n;this.updateStateOnKeyboardNavigation(b,c)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===d.Keys.end){const u=n.slice(this.getFocusedState().focusedIndex);this.itemFocus(n.length-1,c),this.updateStateOnKeyboardNavigation(u,c)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===d.Keys.home){const u=n.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,c),this.updateStateOnKeyboardNavigation(u,c)}else if(e.shiftKey&&e.keyCode===d.Keys.up){let u;const b=this.getLastSelectedOrDeselectedIndex(1,l);b===null?u=l!==0?n.slice(l-1,l):[n[l]]:b===l?u=[n[b-1]]:l>=0&&(u=b>l?n.slice(l-1,b):n.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===d.Keys.down){let u;const b=this.getLastSelectedOrDeselectedIndex(0,l);b===null?u=l!==n.length-1?n.slice(l,l+1):[n[l]]:b===l?u=n.slice(l,l+2):l>=0&&(u=b>l?n.slice(l+1,b+1):n.slice(b,l+2)),u&&u.length>=1&&(this.itemFocus(l+1,c),this.updateStateOnKeyboardNavigation(u,c))}else if(e.altKey&&i===d.Keys.up)f();else if(i===d.Keys.up||i===d.Keys.down){const u=s?s.skip:0,b=l-u;if(a!==""&&t)if(!this.props.skipDisabledItems&&h)this.onNavigate(c,i);else{let m=0;if(i===d.Keys.down||i===d.Keys.right){const x=n.slice(b+1).find(I=>!I.disabled&&I[t]);m=x&&n.findIndex(I=>I[t]===x[t]),m&&m!==-1&&(m=m+u)}else if(i===d.Keys.up||i===d.Keys.left){let x;if(l===-1)x=n,m=n.findIndex(I=>!I.disabled&&I[t]),m!==-1&&(m=m+u);else{x=n.slice(0,b);let I=x.pop();for(;I&&I.disabled;)I=x.pop();m=I&&n.findIndex(w=>w[t]===I[t]),m&&m!==-1&&(m=m+u)}}if(m){const x=m-l;this.onNavigate(c,i,x)}else this.onNavigate(c,i)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(c,i);else{let m=null;if(i===d.Keys.down||i===d.Keys.right)m=n.slice(b+1).find(x=>!x.disabled);else if(i===d.Keys.up||i===d.Keys.left){const x=n.slice(0,b);for(m=x.pop();m&&m.disabled;)m=x.pop()}if(m){const x=n.indexOf(m);if(x!==-1){const I=u+x-l;this.onNavigate(c,i,I)}else this.onNavigate(c,i)}else this.onNavigate(c,i)}this.applyState(c),e.preventDefault()}else i===d.Keys.enter?(e.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(e):r&&r.disabled?f():this.selectFocusedItem(e)):i===d.Keys.esc&&f();else e.altKey&&i===d.Keys.down?f():i===d.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:a,size:s,groupStickyHeaderItemRender:n,groupField:i,list:p}=this.props,h=v.getFilteredData(this.props),r=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),c=a&&r&&g.createElement("div",{className:d.classNames("k-list",{[`k-list-${F[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:N},g.createElement("div",{className:d.classNames("k-list-item k-custom-item",{"k-focus":R(l)}),style:{fontStyle:"italic"}},r,g.createElement(d.IconWrap,{name:"plus",icon:$.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:f}=this.state;return f===void 0&&i!==void 0&&(f=v.getItemValue(h[0],i)),g.createElement(g.Fragment,null,e&&g.createElement("div",{className:"k-list-header"},e),c,g.createElement("div",{className:d.classNames("k-list",{[`k-list-${this.mobileMode?"lg":F[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!p&&f&&h.length!==0&&g.createElement(Y,{group:f,groupMode:"modern",render:n}),this.renderList()),this.showLicenseWatermark&&g.createElement(d.WatermarkOverlay,{message:this.licenseMessage}),t&&g.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,a=v.getFilteredData(this.props),s=this.base.getPopupSettings(),n=s.width!==void 0?s.width:e.popupWidth,i={dir:t!==void 0?t:e.dirCalculated,width:n,popupSettings:{...s,popupClass:d.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 g.createElement(G,{...i},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,adaptiveSubtitle:t,filterable:a,filter:s}=this.props,{windowWidth:n=0}=this.state,i=s!==void 0?s:this.state.text,p=a?g.createElement(te,{value:i,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:n,mobileFilter:p};return g.createElement(Z.AdaptiveMode,{...h},g.createElement(ee.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;v.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;v.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:n,virtual:i={skip:0,total:void 0}}=this.props,p=v.getFilteredData(this.props),h=this.base.vs,{focusedIndex:r}=this.getFocusedState(),l=this.base.getPopupSettings(),c=`translateY(${h.translate}px)`;return g.createElement(U,{id:this.base.listBoxId,show:this.opened,data:p.slice(),focusedIndex:r-i.skip,value:this.value,textField:e,valueField:n,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:f=>{h.list=this.base.list=f},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:h.enabled?{transform:c}: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 n=v.getFilteredData(this.props);if(!(!s||!n.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;n=this.base.getGroupedDataModernMode(n,s);let r=n[0][s];for(let l=1;l<n.length&&!(i*l>h);l++)n[l]&&n[l][s]&&(r=n[l][s]);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 s=this.base.initState();s.syntheticEvent=e;const n=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,n];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(o),this.licenseMessage=d.getLicenseMessage(E.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(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:o,textField:e}=this.props,t=[];return o===void 0?this.value.forEach(a=>{t.push({text:v.getItemValue(a,e),data:[a]})}):t.push(...o),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 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:k.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:k.defaultProps.validityStyles}componentDidUpdate(o,e){var c;const{virtual:t,groupField:a=""}=this.props,s=v.getFilteredData(this.props),n=t?t.skip:0,i=o.virtual?o.virtual.total:0,p=o.opened!==void 0?o.opened:e.opened,h=!p&&this.opened,r=p&&!this.opened,l=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!l.animate&&r&&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)),h&&t?this.base.scrollToVirtualItem(t,u-n):h&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][a],this),this.base.scrollToItem(u)):this.opened&&p&&f&&this.scrollToFocused&&this.base.scrollToItem(u-n)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var o;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(o=this.document)!=null&&o.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var o;(o=this.document)!=null&&o.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(o,e,t){const{allowCustom:a}=this.props,s=v.getFilteredData(this.props),n=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:i,focusedIndex:p}=this.getFocusedState(),h=a&&n,r=R(i),l=this.base,c=l.vs;if(this.opened&&e===d.Keys.up&&r)this.state.focusedIndex!==void 0&&(o.data.focusedIndex=void 0);else{const f=l.navigation.navigate({keyCode:e,current:p,max:(c.enabled?c.total:s.length)-1,min:h?-1:0,skipItems:t||void 0});f!==void 0&&(this.itemFocus(f,o),this.scrollToFocused=!0)}this.applyState(o)}render(){const{style:o,className:e,label:t,dir:a,disabled:s,textField:n,dataItemKey:i,virtual:p,size:h,rounded:r,fillMode:l,loading:c,filter:f}=this.props,{text:u,focused:b,focusedTag:m,currentValue:x}=this.state,I=this.base.vs,w=this.props.id||this._inputId;I.enabled=p!==void 0,p!==void 0&&(I.skip=p.skip,I.total=p.total,I.pageSize=p.pageSize);const C=this.mobileMode&&this.opened?x:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const O=!this.validityStyles||this.validity.valid,B=!!(f!==void 0?f:u)||C&&C.length>0,[V,z]=_(this.props.prefix||g.Fragment),[A,H]=_(this.props.suffix||g.Fragment),P=g.createElement(g.Fragment,null,g.createElement("div",{ref:this.componentRef,className:d.classNames("k-multiselect k-input",e,{[`k-input-${F[h]||h}`]:h,[`k-rounded-${ie[r]||r}`]:r,[`k-input-${l}`]:l,"k-focus":b&&!s,"k-invalid":!O,"k-disabled":s,"k-loading":c,"k-required":this.required}),style:t?{...o,width:void 0}:o,dir:a,onFocus:K=>{this.mobileMode?this.handleWrapperClick(K):this.handleFocus(K)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:v.preventDefaultNonInputs},this.props.prefix&&g.createElement(V,{...z}),g.createElement("div",{className:d.classNames("k-input-values")},g.createElement("div",{className:d.classNames("k-chip-list",{[`k-chip-list-${F[h]||h}`]:h}),role:"listbox",id:"tagslist-"+this.base.guid},C&&C.length>0&&g.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:C,guid:this.base.guid,focused:m?C.find(K=>v.matchTags(K,m,i)):void 0,size:h})),this.renderSearchBar(w)),c&&g.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&g.createElement(A,{...H}),B&&g.createElement(X,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?g.createElement(j.FloatingLabel,{label:t,editorId:w,editorValue:u||v.getItemValue(this.value[0],n),editorValid:O,editorDisabled:s,style:{width:o?o.width:void 0},children:P}):P}renderSearchBar(o){const{activedescendant:e,focusedTag:t,currentValue:a}=this.state,{disabled:s,placeholder:n,ariaDescribedBy:i,ariaLabelledBy:p,ariaLabel:h,inputAttributes:r}=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?n:void 0,u=a&&a.length>0?void 0:n,b=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${c}`,m={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return g.createElement(Q,{id:o,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:p,ariaRequired:this.required,ariaLabel:h,inputAttributes:r,...m})}onTagsNavigate(o,e){const t=o.keyCode,{focusedTag:a}=this.state,s=this._tags,n=this.props.dataItemKey;let i=a?s.findIndex(r=>v.matchTags(r,a,n)):-1,p;const h=i!==-1;if(t===d.Keys.left)h?i=Math.max(0,i-1):i=s.length-1,p=s[i];else if(t===d.Keys.right)i===s.length-1?p=void 0:h&&(i=Math.min(s.length-1,i+1),p=s[i]);else if(t===d.Keys.home&&!o.shiftKey)p=s[0];else if(t===d.Keys.end&&!o.shiftKey)p=s[s.length-1];else if(t===d.Keys.delete){if(h){const r=this.value;v.removeDataItems(r,s[i].data,n),this.triggerOnChange(r,e)}}else if(t===d.Keys.backspace){const r=this.value;if(h)v.removeDataItems(r,s[i].data,n),this.triggerOnChange(r,e);else if(!h&&s.length){const l=s.pop();v.removeDataItems(r,l.data,n),this.triggerOnChange(r,e)}}p!==a&&(e.data.focusedTag=p,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=v.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),n=t?t.skip:0;a[s-n]!==void 0&&this.handleItemClick(s,o)}setItems(o,e){e.length=0,e.push(...o)}getFocusedState(){const{focusedIndex:o}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:a,virtual:s,textField:n,focusedItemIndex:i=v.itemIndexStartsWith,skipDisabledItems:p}=this.props,h=v.getFilteredData(this.props),r=s&&s.skip||0;let l;if(o!==void 0)return{focusedIndex:o,focusedItem:h[o-r],focusedType:1};const c=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=i(h,e,n),{focusedItem:h[l],focusedIndex:l+r,focusedType:1};if(c.length){const f=c[c.length-1];return l=h.findIndex(u=>v.areSame(u,f,a)),h[l]!==void 0?{focusedIndex:l+r,focusedItem:h[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(p&&n&&!e&&r===0){const f=h.findIndex(u=>!u.disabled&&u[n]);return{focusedIndex:f,focusedItem:h[f-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})}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}};k.displayName="MultiSelect",k.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},k.defaultProps={...M.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let T=k;const L=d.createPropsContext(),q=d.withIdHOC(d.withPropsContext(L,d.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"),d=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"),v=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 o=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(o,e,t.get?t:{enumerable:!0,get:()=>S[e]})}}return o.default=S,Object.freeze(o)}const g=se(W),{sizeMap:F,roundedMap:ie}=d.kendoThemeMaps,ae="Please enter a valid value!",N=S=>S.preventDefault(),R=S=>S===2,k=class k extends g.Component{constructor(o){super(o),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.handleItemSelect=(e,t)=>{const{dataItemKey:a,virtual:s}=this.props,n=v.getFilteredData(this.props),i=s?s.skip:0,p=n[e-i],h=this.value.findIndex(c=>v.areSame(c,p,a));this._lastSelectedOrDeslectedItemIndex=n.findIndex(c=>v.areSame(c,p,a));let r=[];h!==-1?(r=this.value,r.splice(h,1)):r=[...this.value,p],(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(r,t),this.base.triggerPageChangeCornerItems(p,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;v.removeDataItems(s,e,this.props.dataItemKey),this.triggerOnChange(s,a),this.applyState(a)},this.itemFocus=(e,t)=>{const{allowCustom:a,virtual:s}=this.props,n=v.getFilteredData(this.props),i=s?s.skip:0,p=s?s.pageSize:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),l=a&&h,c=n[e-i];if(s&&!c&&e>=0&&r!==e){const f=Math.floor(e/p)*p;if(f!==i){this.state.focusedIndex!==e&&(t.data.focusedIndex=e,t.data.activedescendant=D.ActiveDescendant.PopupList),this.base.triggerOnPageChange(t,f,p);return}}c&&r!==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(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;v.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,n=v.getFilteredData(this.props),i=e.keyCode,p=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:l}=this.getFocusedState(),c=this.base.initState();if(c.syntheticEvent=e,!p&&this.value.length>0&&(i===d.Keys.left||i===d.Keys.right||i===d.Keys.home||i===d.Keys.end||i===d.Keys.delete||i===d.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===d.Keys.pageUp)e.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(i===d.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)===n.length?[]:n;this.updateStateOnKeyboardNavigation(b,c)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===d.Keys.end){const u=n.slice(this.getFocusedState().focusedIndex);this.itemFocus(n.length-1,c),this.updateStateOnKeyboardNavigation(u,c)}else if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.keyCode===d.Keys.home){const u=n.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,c),this.updateStateOnKeyboardNavigation(u,c)}else if(e.shiftKey&&e.keyCode===d.Keys.up){let u;const b=this.getLastSelectedOrDeselectedIndex(1,l);b===null?u=l!==0?n.slice(l-1,l):[n[l]]:b===l?u=[n[b-1]]:l>=0&&(u=b>l?n.slice(l-1,b):n.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===d.Keys.down){let u;const b=this.getLastSelectedOrDeselectedIndex(0,l);b===null?u=l!==n.length-1?n.slice(l,l+1):[n[l]]:b===l?u=n.slice(l,l+2):l>=0&&(u=b>l?n.slice(l+1,b+1):n.slice(b,l+2)),u&&u.length>=1&&(this.itemFocus(l+1,c),this.updateStateOnKeyboardNavigation(u,c))}else if(e.altKey&&i===d.Keys.up)f();else if(i===d.Keys.up||i===d.Keys.down){const u=s?s.skip:0,b=l-u;if(a!==""&&t)if(!this.props.skipDisabledItems&&h)this.onNavigate(c,i);else{let m=0;if(i===d.Keys.down||i===d.Keys.right){const x=n.slice(b+1).find(I=>!I.disabled&&I[t]);m=x&&n.findIndex(I=>I[t]===x[t]),m&&m!==-1&&(m=m+u)}else if(i===d.Keys.up||i===d.Keys.left){let x;if(l===-1)x=n,m=n.findIndex(I=>!I.disabled&&I[t]),m!==-1&&(m=m+u);else{x=n.slice(0,b);let I=x.pop();for(;I&&I.disabled;)I=x.pop();m=I&&n.findIndex(w=>w[t]===I[t]),m&&m!==-1&&(m=m+u)}}if(m){const x=m-l;this.onNavigate(c,i,x)}else this.onNavigate(c,i)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(c,i);else{let m=null;if(i===d.Keys.down||i===d.Keys.right)m=n.slice(b+1).find(x=>!x.disabled);else if(i===d.Keys.up||i===d.Keys.left){const x=n.slice(0,b);for(m=x.pop();m&&m.disabled;)m=x.pop()}if(m){const x=n.indexOf(m);if(x!==-1){const I=u+x-l;this.onNavigate(c,i,I)}else this.onNavigate(c,i)}else this.onNavigate(c,i)}this.applyState(c),e.preventDefault()}else i===d.Keys.enter?(e.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(e):r&&r.disabled?f():this.selectFocusedItem(e)):i===d.Keys.esc&&f();else e.altKey&&i===d.Keys.down?f():i===d.Keys.esc&&this.clearButtonClick(e)},this.listContainerContent=()=>{const{header:e,footer:t,allowCustom:a,size:s,groupStickyHeaderItemRender:n,groupField:i,list:p}=this.props,h=v.getFilteredData(this.props),r=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),c=a&&r&&g.createElement("div",{className:d.classNames("k-list",{[`k-list-${F[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:N},g.createElement("div",{className:d.classNames("k-list-item k-custom-item",{"k-focus":R(l)}),style:{fontStyle:"italic"}},r,g.createElement(d.IconWrap,{name:"plus",icon:$.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:f}=this.state;return f===void 0&&i!==void 0&&(f=v.getItemValue(h[0],i)),g.createElement(g.Fragment,null,e&&g.createElement("div",{className:"k-list-header"},e),c,g.createElement("div",{className:d.classNames("k-list",{[`k-list-${this.mobileMode?"lg":F[s]||s}`]:this.mobileMode||s,"k-virtual-list":this.base.vs.enabled})},!p&&f&&h.length!==0&&g.createElement(Y,{group:f,render:n}),this.renderList()),this.showLicenseWatermark&&g.createElement(d.WatermarkOverlay,{message:this.licenseMessage}),t&&g.createElement("div",{className:"k-list-footer"},t))},this.renderListContainer=()=>{const e=this.base,{dir:t}=this.props,a=v.getFilteredData(this.props),s=this.base.getPopupSettings(),n=s.width!==void 0?s.width:e.popupWidth,i={dir:t!==void 0?t:e.dirCalculated,width:n,popupSettings:{...s,popupClass:d.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 g.createElement(G,{...i},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:e,adaptiveSubtitle:t,filterable:a,filter:s}=this.props,{windowWidth:n=0}=this.state,i=s!==void 0?s:this.state.text,p=a?g.createElement(te,{value:i,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:n,mobileFilter:p};return g.createElement(Z.AdaptiveMode,{...h},g.createElement(ee.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;v.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;v.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:n,virtual:i={skip:0,total:void 0}}=this.props,p=v.getFilteredData(this.props),h=this.base.vs,{focusedIndex:r}=this.getFocusedState(),l=this.base.getPopupSettings(),c=`translateY(${h.translate}px)`;return g.createElement(U,{id:this.base.listBoxId,show:this.opened,data:p.slice(),focusedIndex:r-i.skip,value:this.value,textField:e,valueField:n,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:c}: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 n=v.getFilteredData(this.props);if(!(!s||!n.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;n=this.base.getGroupedDataModernMode(n,s);let r=n[0][s];for(let l=1;l<n.length&&!(i*l>h);l++)n[l]&&n[l][s]&&(r=n[l][s]);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 s=this.base.initState();s.syntheticEvent=e;const n=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,n];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(o),this.licenseMessage=d.getLicenseMessage(E.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(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:o,textField:e}=this.props,t=[];return o===void 0?this.value.forEach(a=>{t.push({text:v.getItemValue(a,e),data:[a]})}):t.push(...o),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 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:k.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:k.defaultProps.validityStyles}componentDidUpdate(o,e){var c;const{virtual:t,groupField:a=""}=this.props,s=v.getFilteredData(this.props),n=t?t.skip:0,i=o.virtual?o.virtual.total:0,p=o.opened!==void 0?o.opened:e.opened,h=!p&&this.opened,r=p&&!this.opened,l=this.base.getPopupSettings();if(this.validate(this.props),this.base.didUpdate(),!l.animate&&r&&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)),h&&t?this.base.scrollToVirtualItem(t,u-n):h&&!t?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][a],this),this.base.scrollToItem(u)):this.opened&&p&&f&&this.scrollToFocused&&this.base.scrollToItem(u-n)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var o;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(o=this.document)!=null&&o.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var o;(o=this.document)!=null&&o.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(o,e,t){const{allowCustom:a}=this.props,s=v.getFilteredData(this.props),n=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:i,focusedIndex:p}=this.getFocusedState(),h=a&&n,r=R(i),l=this.base,c=l.vs;if(this.opened&&e===d.Keys.up&&r)this.state.focusedIndex!==void 0&&(o.data.focusedIndex=void 0);else{const f=l.navigation.navigate({keyCode:e,current:p,max:(c.enabled?c.total:s.length)-1,min:h?-1:0,skipItems:t||void 0});f!==void 0&&(this.itemFocus(f,o),this.scrollToFocused=!0)}this.applyState(o)}render(){const{style:o,className:e,label:t,dir:a,disabled:s,textField:n,dataItemKey:i,virtual:p,size:h,rounded:r,fillMode:l,loading:c,filter:f}=this.props,{text:u,focused:b,focusedTag:m,currentValue:x}=this.state,I=this.base.vs,w=this.props.id||this._inputId;I.enabled=p!==void 0,p!==void 0&&(I.skip=p.skip,I.total=p.total,I.pageSize=p.pageSize);const C=this.mobileMode&&this.opened?x:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const O=!this.validityStyles||this.validity.valid,B=!!(f!==void 0?f:u)||C&&C.length>0,[V,z]=_(this.props.prefix||g.Fragment),[A,H]=_(this.props.suffix||g.Fragment),P=g.createElement(g.Fragment,null,g.createElement("div",{ref:this.componentRef,className:d.classNames("k-multiselect k-input",e,{[`k-input-${F[h]||h}`]:h,[`k-rounded-${ie[r]||r}`]:r,[`k-input-${l}`]:l,"k-focus":b&&!s,"k-invalid":!O,"k-disabled":s,"k-loading":c,"k-required":this.required}),style:t?{...o,width:void 0}:o,dir:a,onFocus:K=>{this.mobileMode?this.handleWrapperClick(K):this.handleFocus(K)},onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:v.preventDefaultNonInputs},this.props.prefix&&g.createElement(V,{...z}),g.createElement("div",{className:d.classNames("k-input-values")},g.createElement("div",{className:d.classNames("k-chip-list",{[`k-chip-list-${F[h]||h}`]:h}),role:"listbox",id:"tagslist-"+this.base.guid},C&&C.length>0&&g.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:C,guid:this.base.guid,focused:m?C.find(K=>v.matchTags(K,m,i)):void 0,size:h})),this.renderSearchBar(w)),c&&g.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&g.createElement(A,{...H}),B&&g.createElement(X,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return t?g.createElement(j.FloatingLabel,{label:t,editorId:w,editorValue:u||v.getItemValue(this.value[0],n),editorValid:O,editorDisabled:s,style:{width:o?o.width:void 0},children:P}):P}renderSearchBar(o){const{activedescendant:e,focusedTag:t,currentValue:a}=this.state,{disabled:s,placeholder:n,ariaDescribedBy:i,ariaLabelledBy:p,ariaLabel:h,inputAttributes:r}=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?n:void 0,u=a&&a.length>0?void 0:n,b=e===D.ActiveDescendant.TagsList&&t!==void 0?`tag-${this.base.guid}-${t.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${c}`,m={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return g.createElement(Q,{id:o,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:p,ariaRequired:this.required,ariaLabel:h,inputAttributes:r,...m})}onTagsNavigate(o,e){const t=o.keyCode,{focusedTag:a}=this.state,s=this._tags,n=this.props.dataItemKey;let i=a?s.findIndex(r=>v.matchTags(r,a,n)):-1,p;const h=i!==-1;if(t===d.Keys.left)h?i=Math.max(0,i-1):i=s.length-1,p=s[i];else if(t===d.Keys.right)i===s.length-1?p=void 0:h&&(i=Math.min(s.length-1,i+1),p=s[i]);else if(t===d.Keys.home&&!o.shiftKey)p=s[0];else if(t===d.Keys.end&&!o.shiftKey)p=s[s.length-1];else if(t===d.Keys.delete){if(h){const r=this.value;v.removeDataItems(r,s[i].data,n),this.triggerOnChange(r,e)}}else if(t===d.Keys.backspace){const r=this.value;if(h)v.removeDataItems(r,s[i].data,n),this.triggerOnChange(r,e);else if(!h&&s.length){const l=s.pop();v.removeDataItems(r,l.data,n),this.triggerOnChange(r,e)}}p!==a&&(e.data.focusedTag=p,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=v.getFilteredData(this.props),{focusedIndex:s}=e||this.getFocusedState(),n=t?t.skip:0;a[s-n]!==void 0&&this.handleItemClick(s,o)}setItems(o,e){e.length=0,e.push(...o)}getFocusedState(){const{focusedIndex:o}=this.state,e=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:t,dataItemKey:a,virtual:s,textField:n,focusedItemIndex:i=v.itemIndexStartsWith,skipDisabledItems:p}=this.props,h=v.getFilteredData(this.props),r=s&&s.skip||0;let l;if(o!==void 0)return{focusedIndex:o,focusedItem:h[o-r],focusedType:1};const c=this.value;if(t&&e)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(e)return l=i(h,e,n),{focusedItem:h[l],focusedIndex:l+r,focusedType:1};if(c.length){const f=c[c.length-1];return l=h.findIndex(u=>v.areSame(u,f,a)),h[l]!==void 0?{focusedIndex:l+r,focusedItem:h[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(p&&n&&!e&&r===0){const f=h.findIndex(u=>!u.disabled&&u[n]);return{focusedIndex:f,focusedItem:h[f-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})}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}};k.displayName="MultiSelect",k.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},k.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=k;const L=d.createPropsContext(),q=d.withIdHOC(d.withPropsContext(L,d.withAdaptiveModeContext(T)));q.displayName="KendoReactMultiSelect";exports.MultiSelect=q;exports.MultiSelectPropsContext=L;exports.MultiSelectWithoutContext=T;

package/MultiSelect/MultiSelect.mjs

@@ -7,7 +7,7 @@
  */
 import * as g from "react";
 import v from "prop-types";
-import { Keys as u, classNames as S, IconWrap as B, WatermarkOverlay as J, getLicenseMessage as Q, canUseDOM as V, validatePackage as X, createPropsContext as Z, withIdHOC as ee, withPropsContext as te, withAdaptiveModeContext as se, kendoThemeMaps as ie } from "@progress/kendo-react-common";
+import { withIdHOC as J, createPropsContext as Q, withPropsContext as X, withAdaptiveModeContext as Z, Keys as u, classNames as S, kendoThemeMaps as ee, IconWrap as B, WatermarkOverlay as te, getLicenseMessage as se, canUseDOM as V, validatePackage as ie } from "@progress/kendo-react-common";
 import { plusIcon as oe } from "@progress/kendo-svg-icons";
 import { FloatingLabel as ae } from "@progress/kendo-react-labels";
 import ne from "../common/ListContainer.mjs";
@@ -24,7 +24,7 @@ import { AdaptiveMode as fe } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as ge } from "@progress/kendo-react-layout";
 import me from "../common/ListFilter.mjs";
 import H from "../common/withCustomComponent.mjs";
-const { sizeMap: M, roundedMap: ve } = ie, be = "Please enter a valid value!", W = (E) => E.preventDefault(), $ = (E) => E === 2, C = class C extends g.Component {
+const { sizeMap: M, roundedMap: ve } = ee, be = "Please enter a valid value!", W = (E) => E.preventDefault(), $ = (E) => E === 2, C = class C extends g.Component {
   constructor(n) {
     super(n), this.state = {
       activedescendant: w.PopupList,
@@ -173,13 +173,13 @@ const { sizeMap: M, roundedMap: ve } = ie, be = "Please enter a valid value!", W
         "div",
         {
           className: S("k-list", {
-            [`k-list-${this.mobileMode ? "lg" : M[s] || s}`]: s,
+            [`k-list-${this.mobileMode ? "lg" : M[s] || s}`]: this.mobileMode || s,
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !p && f && r.length !== 0 && /* @__PURE__ */ g.createElement(de, { group: f, groupMode: "modern", render: a }),
+        !p && f && r.length !== 0 && /* @__PURE__ */ g.createElement(de, { group: f, render: a }),
         this.renderList()
-      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(J, { message: this.licenseMessage }), t && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, t));
+      ), this.showLicenseWatermark && /* @__PURE__ */ g.createElement(te, { message: this.licenseMessage }), t && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, t));
     }, this.renderListContainer = () => {
       const e = this.base, { dir: t } = this.props, o = x(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : e.popupWidth, i = {
         dir: t !== void 0 ? t : e.dirCalculated,
@@ -250,7 +250,6 @@ const { sizeMap: M, roundedMap: ve } = ie, be = "Please enter a valid value!", W
           valueField: a,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
-          groupMode: "modern",
           listRef: (f) => {
             r.list = this.base.list = f;
           },
@@ -321,7 +320,7 @@ const { sizeMap: M, roundedMap: ve } = ie, be = "Please enter a valid value!", W
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
         this.validity.valid ? "" : this.props.validationMessage || be
       );
-    }, this.validate(n), this.licenseMessage = Q(A);
+    }, this.validate(n), this.licenseMessage = se(A);
   }
   get _inputId() {
     return this.props.id;
@@ -333,7 +332,7 @@ const { sizeMap: M, roundedMap: ve } = ie, be = "Please enter a valid value!", W
   validate(n) {
     if (n.filterable || n.virtual) {
       const e = [];
-      n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), this.showLicenseWatermark = !X(A, {
+      n.filterable && e.push("filterable"), n.virtual && e.push("virtualization"), this.showLicenseWatermark = !ie(A, {
         component: "MultiSelect",
         features: e
       });
@@ -693,19 +692,18 @@ C.displayName = "MultiSelect", C.propTypes = {
   ...O.defaultProps,
   autoClose: !0,
   required: !1,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
-  groupMode: "modern",
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   skipDisabledItems: !0,
   prefix: void 0,
   suffix: void 0
 };
 let N = C;
-const Ie = Z(), ye = ee(
-  te(
+const Ie = Q(), ye = J(
+  X(
     Ie,
-    se(N)
+    Z(N)
   )
 );
 ye.displayName = "KendoReactMultiSelect";