@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.1

package/dist/npm/MultiSelect/MultiSelect.js

@@ -1,1113 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiSelect = exports.MultiSelectPropsContext = exports.MultiSelectWithoutContext = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var kendo_react_labels_1 = require("@progress/kendo-react-labels");
-var ListContainer_1 = require("../common/ListContainer");
-var List_1 = require("../common/List");
-var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
-var TagList_1 = require("./TagList");
-var SearchBar_1 = require("../common/SearchBar");
-var DropDownBase_1 = require("../common/DropDownBase");
-var settings_1 = require("./../common/settings");
-var utils_1 = require("../common/utils");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-var ClearButton_1 = require("../common/ClearButton");
-var AdaptiveMode_1 = require("../common/AdaptiveMode");
-var kendo_react_layout_1 = require("@progress/kendo-react-layout");
-var constants_1 = require("../common/constants");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var messages_1 = require("../messages");
-var ListFilter_1 = require("../common/ListFilter");
-var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
-var VALIDATION_MESSAGE = 'Please enter a valid value!';
-var preventDefault = function (event) { return event.preventDefault(); };
-var isCustom = function (type) { return type === FocusedItemType.CustomItem; };
-var FocusedItemType;
-(function (FocusedItemType) {
-    FocusedItemType[FocusedItemType["None"] = 0] = "None";
-    FocusedItemType[FocusedItemType["ListItem"] = 1] = "ListItem";
-    FocusedItemType[FocusedItemType["CustomItem"] = 2] = "CustomItem";
-})(FocusedItemType || (FocusedItemType = {}));
-/** @hidden */
-var MultiSelectWithoutContext = /** @class */ (function (_super) {
-    __extends(MultiSelectWithoutContext, _super);
-    function MultiSelectWithoutContext(props) {
-        var _this = _super.call(this, props) || this;
-        /** @hidden */
-        _this.state = {
-            activedescendant: settings_1.ActiveDescendant.PopupList,
-            currentValue: []
-        };
-        _this._element = null;
-        _this._valueItemsDuringOnChange = null;
-        _this._inputId = (0, kendo_react_common_1.guid)();
-        _this.base = new DropDownBase_1.default(_this);
-        _this._tags = [];
-        _this._input = null;
-        _this._adaptiveInput = null;
-        _this._skipFocusEvent = false;
-        _this._lastSelectedOrDeslectedItemIndex = null; // Needed for handling the Shift + Up/Down Keyboard Navigation requirement
-        _this.itemHeight = 0;
-        _this.scrollToFocused = false;
-        _this.localization = null;
-        /** @hidden */
-        _this.focus = function () {
-            if (_this._input) {
-                _this._input.focus();
-            }
-        };
-        /** @hidden */
-        _this.handleItemSelect = function (index, state) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
-            var skip = virtual ? virtual.skip : 0;
-            var dataItem = data[index - skip];
-            var indexInValue = _this.value.findIndex(function (i) { return (0, utils_1.areSame)(i, dataItem, dataItemKey); });
-            _this._lastSelectedOrDeslectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, dataItem, dataItemKey); });
-            var newItems = [];
-            if (indexInValue !== -1) { // item is already selected
-                newItems = _this.value;
-                newItems.splice(indexInValue, 1);
-            }
-            else {
-                newItems = __spreadArray(__spreadArray([], _this.value, true), [dataItem], false);
-            }
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            if (text && !_this.mobileMode) {
-                if (_this.state.text) {
-                    state.data.text = '';
-                }
-                _this.base.filterChanged('', state);
-            }
-            if (_this._adaptiveInput) {
-                _this._adaptiveInput.blur();
-            }
-            ;
-            if (_this.state.focusedIndex !== undefined) {
-                state.data.focusedIndex = undefined;
-            }
-            _this.triggerOnChange(newItems, state);
-            _this.base.triggerPageChangeCornerItems(dataItem, state);
-        };
-        /** @hidden */
-        _this.onTagDelete = function (itemsToRemove, event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (_this.opened) {
-                _this.base.togglePopup(state);
-            }
-            if (!_this.state.focused && !_this.mobileMode) {
-                state.data.focused = true;
-                _this.focus();
-            }
-            var selected = _this.value;
-            (0, utils_1.removeDataItems)(selected, itemsToRemove, _this.props.dataItemKey);
-            _this.triggerOnChange(selected, state);
-            _this.applyState(state);
-        };
-        /** @hidden */
-        _this.itemFocus = function (index, state) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, allowCustom = _a.allowCustom, virtual = _a.virtual;
-            var skip = virtual ? virtual.skip : 0;
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            var focusedIndex = _this.getFocusedState().focusedIndex;
-            var customItem = allowCustom && text;
-            var nextFocusedItem = data[index - skip];
-            if (nextFocusedItem && focusedIndex !== index) {
-                if (_this.state.focusedIndex !== index) {
-                    state.data.focusedIndex = index;
-                    state.data.activedescendant = settings_1.ActiveDescendant.PopupList;
-                }
-            }
-            else if (customItem && index === -1) {
-                if (_this.state.focusedIndex !== undefined) {
-                    state.data.focusedIndex = undefined;
-                }
-            }
-            _this.base.triggerPageChangeCornerItems(nextFocusedItem, state);
-        };
-        _this.componentRef = function (element) {
-            _this._element = element;
-            _this.base.wrapper = element;
-        };
-        _this.searchbarRef = function (searchbar) {
-            var input = _this._input = searchbar && searchbar.input;
-            if (input && _this.state.focused) {
-                window.setTimeout(function () { return input.focus(); }, 0);
-            }
-        };
-        _this.onChangeHandler = function (event) {
-            var state = _this.base.initState();
-            var value = event.target.value;
-            state.syntheticEvent = event;
-            if (_this.props.filter === undefined) {
-                state.data.text = value;
-            }
-            state.data.focusedIndex = undefined;
-            if (!_this.opened) {
-                _this.base.togglePopup(state);
-                _this.setState({ currentValue: _this.value });
-            }
-            _this.base.filterChanged(value, state);
-            _this.applyState(state);
-            _this.setState({ group: undefined });
-        };
-        _this.clearButtonClick = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            if (_this.value.length > 0) {
-                _this.triggerOnChange([], state);
-            }
-            if (_this.state.focusedIndex !== undefined) {
-                state.data.focusedIndex = undefined;
-            }
-            if (_this.opened) {
-                _this.base.togglePopup(state);
-            }
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            if ((0, utils_1.isPresent)(text) && text !== '') {
-                _this.base.filterChanged('', state);
-            }
-            if (_this.state.text) {
-                state.data.text = '';
-            }
-            _this._lastSelectedOrDeslectedItemIndex = null; // Resets the last selected/deselected item according to the Keyboard navigation requirements
-            _this.applyState(state);
-        };
-        _this.onInputKeyDown = function (event) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, groupField = _a.groupField;
-            var keyCode = event.keyCode;
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var _c = _this.getFocusedState(), focusedItem = _c.focusedItem, focusedIndex = _c.focusedIndex;
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (!text && _this.value.length > 0 &&
-                (keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
-                    keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end ||
-                    keyCode === kendo_react_common_1.Keys.delete || keyCode === kendo_react_common_1.Keys.backspace) && !event.shiftKey) {
-                return _this.onTagsNavigate(event, state);
-            }
-            var togglePopup = function () {
-                event.preventDefault();
-                _this.base.togglePopup(state);
-                _this.applyState(state);
-            };
-            if (_this.opened) {
-                if (keyCode === kendo_react_common_1.Keys.pageUp) {
-                    _this.base.scrollPopupByPageSize(-1);
-                }
-                else if (keyCode === kendo_react_common_1.Keys.pageDown) {
-                    _this.base.scrollPopupByPageSize(1);
-                }
-                else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') {
-                    // Ctrl or Command + "A" Key selects/deselects all items
-                    var currentValuesLength = _this.state.value && _this.state.value.length;
-                    var dataToSet = currentValuesLength === data.length ? [] : data;
-                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
-                }
-                else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === kendo_react_common_1.Keys.end) {
-                    // Ctrl or Command + Shift + End from the Keyboard specifications
-                    var dataToSet = data.slice(_this.getFocusedState().focusedIndex);
-                    _this.itemFocus(data.length - 1, state);
-                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
-                }
-                else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.keyCode === kendo_react_common_1.Keys.home) {
-                    // Ctrl or Command + Shift + Home from the Keyboard specifications
-                    var dataToSet = data.slice(0, _this.getFocusedState().focusedIndex + 1);
-                    _this.itemFocus(0, state);
-                    _this.updateStateOnKeyboardNavigation(dataToSet, state);
-                }
-                else if (event.shiftKey && event.keyCode === kendo_react_common_1.Keys.up) {
-                    // Shift + Up from the Keyboard specifications
-                    var dataToSet = void 0;
-                    var lastSelectedOrDeselectedIndex = _this.getLastSelectedOrDeselectedIndex(1, focusedIndex);
-                    if (lastSelectedOrDeselectedIndex === null) {
-                        dataToSet = focusedIndex !== 0 ? data.slice(focusedIndex - 1, focusedIndex) : [data[focusedIndex]];
-                    }
-                    else if (lastSelectedOrDeselectedIndex === focusedIndex) {
-                        dataToSet = [data[lastSelectedOrDeselectedIndex - 1]];
-                    }
-                    else if (focusedIndex >= 0) {
-                        dataToSet = lastSelectedOrDeselectedIndex > focusedIndex
-                            ? data.slice(focusedIndex - 1, lastSelectedOrDeselectedIndex)
-                            : data.slice(lastSelectedOrDeselectedIndex - 1, focusedIndex);
-                    }
-                    if (dataToSet && dataToSet.length > 0) {
-                        if (focusedIndex >= 1) {
-                            _this.itemFocus(focusedIndex - 1, state);
-                        }
-                        _this.updateStateOnKeyboardNavigation(dataToSet, state);
-                    }
-                }
-                else if (event.shiftKey && event.keyCode === kendo_react_common_1.Keys.down) {
-                    // Shift + Down from the Keyboard specifications
-                    var dataToSet = void 0;
-                    var lastSelectedOrDeselectedIndex = _this.getLastSelectedOrDeselectedIndex(0, focusedIndex);
-                    if (lastSelectedOrDeselectedIndex === null) {
-                        dataToSet = focusedIndex !== data.length - 1 ? data.slice(focusedIndex, focusedIndex + 1) : [data[focusedIndex]];
-                    }
-                    else if (lastSelectedOrDeselectedIndex === focusedIndex) {
-                        dataToSet = data.slice(focusedIndex, focusedIndex + 2);
-                    }
-                    else if (focusedIndex >= 0) {
-                        // dataToSet = data.slice(focusedIndex, lastSelectedOrDeselectedIndex);
-                        dataToSet = lastSelectedOrDeselectedIndex > focusedIndex
-                            ? data.slice(focusedIndex + 1, lastSelectedOrDeselectedIndex + 1)
-                            : data.slice(lastSelectedOrDeselectedIndex, focusedIndex + 2);
-                    }
-                    if (dataToSet && dataToSet.length >= 1) {
-                        _this.itemFocus(focusedIndex + 1, state);
-                        _this.updateStateOnKeyboardNavigation(dataToSet, state);
-                    }
-                }
-                else if (event.altKey && keyCode === kendo_react_common_1.Keys.up) {
-                    togglePopup();
-                }
-                else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down) {
-                    if (groupField !== '' && textField) {
-                        if (!_this.props.skipDisabledItems && opened) {
-                            _this.onNavigate(state, keyCode);
-                        }
-                        else {
-                            var newIndex = 0;
-                            if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
-                                var tempnewIndex_1 = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
-                                newIndex = tempnewIndex_1 && data.findIndex(function (el) { return el[textField] === tempnewIndex_1[textField]; });
-                            }
-                            else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
-                                var dataToSearch = void 0;
-                                if (focusedIndex === -1) {
-                                    dataToSearch = data;
-                                    newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
-                                }
-                                else {
-                                    dataToSearch = data.slice(0, focusedIndex);
-                                    var tempnewIndex_2 = dataToSearch.pop();
-                                    while (tempnewIndex_2 && tempnewIndex_2.disabled) {
-                                        tempnewIndex_2 = dataToSearch.pop();
-                                    }
-                                    newIndex = tempnewIndex_2 && data.findIndex(function (el) { return el[textField] === tempnewIndex_2[textField]; });
-                                }
-                            }
-                            if (newIndex) {
-                                var skipItems = newIndex - focusedIndex;
-                                _this.onNavigate(state, keyCode, skipItems);
-                            }
-                            else if (newIndex !== undefined) {
-                                _this.onNavigate(state, keyCode);
-                            }
-                        }
-                    }
-                    else if (!_this.props.skipDisabledItems && opened) {
-                        _this.onNavigate(state, keyCode);
-                    }
-                    else {
-                        var newIndex = null;
-                        if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
-                            newIndex = data.slice(focusedIndex + 1).find(function (i) { return !i.disabled; });
-                        }
-                        else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
-                            var dataTest = data.slice(0, focusedIndex);
-                            newIndex = dataTest.pop();
-                            while (newIndex && newIndex.disabled) {
-                                newIndex = dataTest.pop();
-                            }
-                        }
-                        if (newIndex) {
-                            var skipItems = newIndex.id - focusedIndex - 1;
-                            _this.onNavigate(state, keyCode, skipItems);
-                        }
-                        else {
-                            _this.onNavigate(state, keyCode);
-                        }
-                    }
-                    _this.applyState(state);
-                    event.preventDefault();
-                }
-                else if (keyCode === kendo_react_common_1.Keys.enter) {
-                    event.preventDefault();
-                    if (_this.props.allowCustom && text && focusedItem === null) {
-                        _this.customItemSelect(event);
-                    }
-                    else if (focusedItem && focusedItem.disabled) {
-                        togglePopup();
-                    }
-                    else {
-                        _this.selectFocusedItem(event);
-                    }
-                }
-                else if (keyCode === kendo_react_common_1.Keys.esc) {
-                    togglePopup();
-                }
-            }
-            else if (event.altKey && keyCode === kendo_react_common_1.Keys.down) {
-                togglePopup();
-            }
-        };
-        _this.listContainerContent = function () {
-            var _a, _b;
-            var _c = _this.props, header = _c.header, footer = _c.footer, allowCustom = _c.allowCustom, size = _c.size, _d = _c.data, data = _d === void 0 ? [] : _d, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender, groupField = _c.groupField, list = _c.list;
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            var focusedType = _this.getFocusedState().focusedType;
-            var customItem = allowCustom && text && (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {},
-                    _a["k-list-".concat(sizeMap[size] || size)] = size,
-                    _a)), key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
-                React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
-                    text,
-                    React.createElement(kendo_react_common_1.IconWrap, { name: 'plus', icon: kendo_svg_icons_1.plusIcon, style: { position: 'absolute', right: '0.5em' } }))));
-            var group = _this.state.group;
-            if (group === undefined && groupField !== undefined) {
-                group = (0, utils_1.getItemValue)(data[0], groupField);
-            }
-            return (React.createElement(React.Fragment, null,
-                header && React.createElement("div", { className: "k-list-header" }, header),
-                customItem,
-                React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_b = {},
-                        _b["k-list-".concat(_this.mobileMode ? 'lg' : sizeMap[size] || size)] = size,
-                        _b['k-virtual-list'] = _this.base.vs.enabled,
-                        _b)) },
-                    !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
-                    _this.renderList()),
-                footer && React.createElement("div", { className: "k-list-footer" }, footer)));
-        };
-        _this.renderListContainer = function () {
-            var base = _this.base;
-            var _a = _this.props, dir = _a.dir, _b = _a.data, data = _b === void 0 ? [] : _b;
-            var popupSettings = _this.base.getPopupSettings();
-            var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-            var listContainerProps = {
-                dir: dir !== undefined ? dir : base.dirCalculated,
-                width: popupWidth,
-                popupSettings: {
-                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-multiselect-popup'),
-                    className: popupSettings.className,
-                    animate: popupSettings.animate,
-                    anchor: _this.element,
-                    show: _this.opened,
-                    onOpen: _this.onPopupOpened,
-                    onClose: _this.onPopupClosed,
-                    appendTo: popupSettings.appendTo
-                },
-                itemsCount: [data.length, _this.value.length]
-            };
-            return (React.createElement(ListContainer_1.default, __assign({}, listContainerProps), _this.listContainerContent()));
-        };
-        _this.renderAdaptiveListContainer = function () {
-            var _a = _this.props, adaptiveTitle = _a.adaptiveTitle, filterable = _a.filterable, filter = _a.filter;
-            var _b = _this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
-            var mobileText = filter !== undefined ? filter : _this.state.text;
-            _this.localization = (0, kendo_react_intl_1.provideLocalizationService)(_this);
-            var mobileFilter = filterable ? (React.createElement(ListFilter_1.default, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.element; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode })) : null;
-            var actionSheetProps = {
-                adaptiveTitle: adaptiveTitle,
-                expand: _this.opened,
-                onClose: function (event) { return _this.onCancel(event); },
-                windowWidth: windowWidth,
-                mobileFilter: mobileFilter,
-                footer: {
-                    cancelText: _this.localization.toLanguageString(messages_1.adaptiveModeFooterCancel, messages_1.messages[messages_1.adaptiveModeFooterCancel]),
-                    onCancel: _this.onCancel,
-                    applyText: _this.localization.toLanguageString(messages_1.adaptiveModeFooterApply, messages_1.messages[messages_1.adaptiveModeFooterApply]),
-                    onApply: _this.closePopup
-                }
-            };
-            return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
-                React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
-                    React.createElement("div", { className: 'k-list-container' }, _this.listContainerContent()))));
-        };
-        _this.closePopup = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            if (_this.state.focusedIndex !== undefined) {
-                state.data.focusedIndex = undefined;
-            }
-            if (_this.opened) {
-                _this.base.togglePopup(state);
-            }
-            state.events.push({ type: 'onClose' });
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            if ((0, utils_1.isPresent)(text) && text !== '') {
-                _this.base.filterChanged('', state);
-            }
-            if (_this.state.text) {
-                state.data.text = '';
-            }
-            _this.applyState(state);
-        };
-        _this.onCancel = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            if (_this.state.focusedIndex !== undefined) {
-                state.data.focusedIndex = undefined;
-            }
-            if (_this.opened) {
-                _this.base.togglePopup(state);
-            }
-            state.events.push({ type: 'onCancel' });
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            if ((0, utils_1.isPresent)(text) && text !== '') {
-                _this.base.filterChanged('', state);
-            }
-            if (_this.state.text) {
-                state.data.text = '';
-            }
-            _this.applyState(state);
-        };
-        _this.renderList = function () {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, groupHeaderItemRender = _a.groupHeaderItemRender, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
-            var vs = _this.base.vs;
-            var skip = virtual ? virtual.skip : 0;
-            var focusedIndex = _this.getFocusedState().focusedIndex;
-            var popupSettings = _this.base.getPopupSettings();
-            var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: _this.opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { vs.list = _this.base.list = list; }, wrapperStyle: _this.mobileMode ? {} : { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listKey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onMouseDown: preventDefault, onBlur: _this.handleBlur, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
-        };
-        _this.onScroll = function (event) {
-            var _a = _this.base, vs = _a.vs, list = _a.list;
-            vs.scrollHandler(event);
-            var groupField = _this.props.groupField;
-            var _b = _this.props.data, data = _b === void 0 ? [] : _b;
-            if (!groupField || !data.length) {
-                return;
-            }
-            if (groupField) {
-                var itemHeight = _this.itemHeight =
-                    _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
-                var target = event.target;
-                var scrollTop = target.scrollTop - (vs.skip * itemHeight);
-                data = _this.base.getGroupedDataModernMode(data, groupField);
-                var group = data[0][groupField];
-                for (var i = 1; i < data.length; i++) {
-                    if (itemHeight * i > scrollTop) {
-                        break;
-                    }
-                    if (data[i] && data[i][groupField]) {
-                        group = data[i][groupField];
-                    }
-                }
-                if (group !== _this.state.group) {
-                    _this.setState({
-                        group: group
-                    });
-                }
-            }
-        };
-        _this.customItemSelect = function (event) {
-            var _a;
-            var itemText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            var textField = _this.props.textField;
-            if (!itemText) {
-                return;
-            }
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            var item = textField ? (_a = {}, _a[textField] = itemText, _a) : itemText;
-            if (_this.state.text !== undefined) {
-                state.data.text = '';
-            }
-            state.data.focusedIndex = undefined;
-            _this.base.filterChanged('', state);
-            var newItems = __spreadArray(__spreadArray([], _this.value, true), [item], false);
-            _this.triggerOnChange(newItems, state);
-            _this.base.togglePopup(state);
-            _this.applyState(state);
-        };
-        _this.handleWrapperClick = function (event) {
-            var input = _this._input;
-            if (!_this.opened && input) {
-                _this.focusElement(input);
-            }
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (!_this.state.focused && !_this.mobileMode) {
-                state.events.push({ type: 'onFocus' });
-                state.data.focused = true;
-            }
-            if (_this.mobileMode) {
-                _this.setState({ currentValue: _this.tagsToRender });
-                if (_this.mobileMode) {
-                    window.setTimeout(function () { return _this._adaptiveInput && _this._adaptiveInput.focus(); }, 300);
-                }
-            }
-            _this.base.togglePopup(state);
-            _this.applyState(state);
-        };
-        _this.handleItemClick = function (index, event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            _this.handleItemSelect(index, state);
-            if (_this.props.autoClose && !_this.mobileMode) {
-                _this.base.togglePopup(state);
-            }
-            event.stopPropagation();
-            _this.applyState(state);
-        };
-        _this.handleBlur = function (event) {
-            if (!_this.state.focused || _this._skipFocusEvent) {
-                return;
-            }
-            var state = _this.base.initState();
-            var _a = _this.props, allowCustom = _a.allowCustom, filterable = _a.filterable;
-            state.syntheticEvent = event;
-            state.data.focused = false;
-            state.events.push({ type: 'onBlur' });
-            if (_this.opened && !_this.mobileMode) {
-                if (_this.state.opened) {
-                    state.data.opened = false;
-                }
-                state.events.push({ type: 'onClose' });
-            }
-            if (!allowCustom && !filterable && _this.state.text) {
-                state.data.text = '';
-            }
-            _this.applyState(state);
-        };
-        _this.handleFocus = function (event) {
-            if (_this._skipFocusEvent) {
-                return;
-            }
-            _this.base.handleFocus(event);
-        };
-        _this.onPopupOpened = function () {
-            if (_this._input && _this.state.focused && !_this.mobileMode) {
-                _this.focusElement(_this._input);
-            }
-        };
-        _this.onPopupClosed = function () {
-            if (_this.state.focused) {
-                window.setTimeout(function () { if (_this.state.focused) {
-                    _this.focusElement(_this._input);
-                } }, 0);
-            }
-        };
-        _this.setValidity = function () {
-            if (_this._input && _this._input.setCustomValidity) {
-                _this._input.setCustomValidity(_this.validity.valid
-                    ? ''
-                    : _this.props.validationMessage || VALIDATION_MESSAGE);
-            }
-        };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "document", {
-        get: function () {
-            if (!kendo_react_common_1.canUseDOM) {
-                return;
-            }
-            // useful only for user actions
-            return (this.element && this.element.ownerDocument) || document;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "element", {
-        /** @hidden */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "opened", {
-        /** @hidden */
-        get: function () {
-            var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-            return !!opened;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "tagsToRender", {
-        /** @hidden */
-        get: function () {
-            var _a = this.props, tags = _a.tags, textField = _a.textField;
-            var tagsToRender = [];
-            if (tags === undefined) {
-                this.value.forEach(function (item) {
-                    tagsToRender.push({ text: (0, utils_1.getItemValue)(item, textField), data: [item] });
-                });
-            }
-            else {
-                tagsToRender.push.apply(tagsToRender, tags);
-            }
-            return tagsToRender;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "mobileMode", {
-        /**
-         * The mobile mode of the ComboBox.
-         */
-        get: function () {
-            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && this.props.adaptive;
-            return !!isAdaptive;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "value", {
-        /**
-         * Represents the value of the MultiSelect.
-         */
-        get: function () {
-            var result = [];
-            if (this._valueItemsDuringOnChange) {
-                result.push.apply(result, this._valueItemsDuringOnChange);
-            }
-            else if (this.props.value) {
-                result.push.apply(result, this.props.value);
-            }
-            else if (this.state.value) {
-                result.push.apply(result, this.state.value);
-            }
-            else if (this.props.defaultValue) {
-                result.push.apply(result, this.props.defaultValue);
-            }
-            return result;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "name", {
-        /**
-         * Gets the `name` property of the MultiSelect.
-         */
-        get: function () {
-            return this.props.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "validity", {
-        /**
-         * Represents the validity state into which the MultiSelect is set.
-         */
-        get: function () {
-            var customError = this.props.validationMessage !== undefined;
-            var isValid = (!this.required
-                || (this.value !== null && this.value.length > 0 && this.value !== undefined));
-            var valid = this.props.valid !== undefined ? this.props.valid : isValid;
-            return {
-                customError: customError,
-                valid: valid,
-                valueMissing: this.value === null
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "required", {
-        /** @hidden */
-        get: function () {
-            return this.props.required !== undefined
-                ? this.props.required
-                : MultiSelectWithoutContext.defaultProps.required;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectWithoutContext.prototype, "validityStyles", {
-        get: function () {
-            return this.props.validityStyles !== undefined
-                ? this.props.validityStyles
-                : MultiSelectWithoutContext.defaultProps.validityStyles;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** @hidden */
-    MultiSelectWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
-        var _b = this.props, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d;
-        var skip = virtual ? virtual.skip : 0;
-        var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
-        var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
-        var opening = !prevOpened && this.opened;
-        var closing = prevOpened && !this.opened;
-        var popupSettings = this.base.getPopupSettings();
-        if (!popupSettings.animate && closing) {
-            this.onPopupClosed();
-        }
-        if (virtual && virtual.total !== prevTotal) {
-            this.base.vs.calcScrollElementHeight();
-            this.base.vs.reset();
-        }
-        else {
-            var _e = this.getFocusedState(), focusedItem = _e.focusedItem, focusedIndex = _e.focusedIndex;
-            if (groupField !== '') {
-                focusedIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
-            }
-            if (opening && virtual) {
-                this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
-            }
-            else if (opening && !virtual) {
-                // Resets the sticky header group value for scenarios with open/close of component's popup
-                if (data && data.length !== 0) {
-                    this.base.resetGroupStickyHeader(data[0][groupField], this);
-                }
-                this.base.scrollToItem(focusedIndex);
-            }
-            else if (this.opened && prevOpened && focusedItem && this.scrollToFocused) {
-                this.base.scrollToItem(focusedIndex - skip);
-            }
-        }
-        this.scrollToFocused = false;
-        this.setValidity();
-    };
-    /** @hidden */
-    MultiSelectWithoutContext.prototype.componentDidMount = function () {
-        var _a;
-        this.observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this));
-        this.base.didMount();
-        this.setValidity();
-        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
-            this.observerResize.observe(this.document.body);
-        }
-    };
-    /** @hidden */
-    MultiSelectWithoutContext.prototype.componentWillUnmount = function () {
-        var _a;
-        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
-            this.observerResize.disconnect();
-        }
-    };
-    /** @hidden */
-    MultiSelectWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
-        var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b;
-        var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
-        var _c = this.getFocusedState(), focusedType = _c.focusedType, focusedIndex = _c.focusedIndex;
-        var customItem = allowCustom && text;
-        var customItemFocused = isCustom(focusedType);
-        var base = this.base;
-        var vs = base.vs;
-        if (this.opened && keyCode === kendo_react_common_1.Keys.up && customItemFocused) {
-            if (this.state.focusedIndex !== undefined) {
-                state.data.focusedIndex = undefined;
-            }
-        }
-        else {
-            var newFocused = base.navigation.navigate({
-                keyCode: keyCode,
-                current: focusedIndex,
-                max: (vs.enabled ? vs.total : data.length) - 1,
-                min: customItem ? -1 : 0,
-                skipItems: skipItems ? skipItems : undefined
-            });
-            if (newFocused !== undefined) {
-                this.itemFocus(newFocused, state);
-                this.scrollToFocused = true;
-            }
-        }
-        this.applyState(state);
-    };
-    /** @hidden */
-    MultiSelectWithoutContext.prototype.render = function () {
-        var _a, _b;
-        var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, disabled = _c.disabled, textField = _c.textField, dataItemKey = _c.dataItemKey, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode, loading = _c.loading, filter = _c.filter;
-        var _d = this.state, text = _d.text, focused = _d.focused, focusedTag = _d.focusedTag, currentValue = _d.currentValue;
-        var vs = this.base.vs;
-        var id = this.props.id || this._inputId;
-        vs.enabled = virtual !== undefined;
-        if (virtual !== undefined) {
-            vs.skip = virtual.skip;
-            vs.total = virtual.total;
-            vs.pageSize = virtual.pageSize;
-        }
-        var currentTagsToRender = (this.mobileMode && this.opened) ? currentValue : this.tagsToRender;
-        this.setItems(this.tagsToRender, this._tags);
-        var isValid = !this.validityStyles || this.validity.valid;
-        var clearButton = Boolean(filter !== undefined ? filter : text)
-            || (currentTagsToRender && currentTagsToRender.length > 0);
-        var component = (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this.componentRef, className: (0, kendo_react_common_1.classNames)('k-multiselect k-input', className, (_a = {},
-                    _a["k-input-".concat(sizeMap[size] || size)] = size,
-                    _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-                    _a["k-input-".concat(fillMode)] = fillMode,
-                    _a['k-focus'] = focused && !disabled,
-                    _a['k-invalid'] = !isValid,
-                    _a['k-disabled'] = disabled,
-                    _a['k-loading'] = loading,
-                    _a['k-required'] = this.required,
-                    _a)), style: !label
-                    ? style
-                    : __assign(__assign({}, style), { width: undefined }), dir: dir, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleWrapperClick, onMouseDown: utils_1.preventDefaultNonInputs },
-                React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-input-values') },
-                    React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-chip-list', (_b = {}, _b["k-chip-list-".concat(sizeMap[size] || size)] = size, _b)), role: "listbox", id: 'tagslist-' + this.base.guid }, currentTagsToRender && currentTagsToRender.length > 0 && React.createElement(TagList_1.default, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: currentTagsToRender, guid: this.base.guid, focused: focusedTag ? currentTagsToRender.find(function (t) { return (0, utils_1.matchTags)(t, focusedTag, dataItemKey); }) : undefined, size: size })),
-                    this.renderSearchBar(id)),
-                loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-                clearButton && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick }),
-                !this.mobileMode && this.renderListContainer()),
-            this.mobileMode && this.renderAdaptiveListContainer()));
-        return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: text || (0, utils_1.getItemValue)(this.value[0], textField), editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: component })) : component;
-    };
-    MultiSelectWithoutContext.prototype.renderSearchBar = function (id) {
-        var _a = this.state, activedescendant = _a.activedescendant, focusedTag = _a.focusedTag, currentValue = _a.currentValue;
-        var _b = this.props, disabled = _b.disabled, placeholder = _b.placeholder, ariaDescribedBy = _b.ariaDescribedBy;
-        var text = !this.mobileMode && (this.props.filter !== undefined ? this.props.filter : this.state.text) || '';
-        var focusedIndex = this.getFocusedState().focusedIndex;
-        var placeholderToShow = this.value.length === 0 && !text ? placeholder : undefined;
-        var adaptivePlaceholder = (currentValue && currentValue.length > 0) ? undefined : placeholder;
-        var ariaActivedescendant = activedescendant === settings_1.ActiveDescendant.TagsList && focusedTag !== undefined ?
-            "tag-".concat(this.base.guid, "-").concat(focusedTag.text.replace(/\s+/g, '-')) :
-            "option-".concat(this.base.guid, "-").concat(focusedIndex);
-        return (React.createElement(SearchBar_1.default, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: this.mobileMode && this.opened ? adaptivePlaceholder : placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: this.opened, owns: this.base.listBoxId, role: 'combobox', activedescendant: ariaActivedescendant, ariaDescribedBy: "tagslist-".concat(this.base.guid).concat(ariaDescribedBy ? (' ' + ariaDescribedBy) : ''), ariaLabelledBy: this.props.ariaLabelledBy, ariaRequired: this.required }));
-    };
-    MultiSelectWithoutContext.prototype.onTagsNavigate = function (event, state) {
-        var keyCode = event.keyCode;
-        var focusedTag = this.state.focusedTag;
-        var tags = this._tags;
-        var itemsKey = this.props.dataItemKey;
-        var focusedIndex = focusedTag ?
-            tags.findIndex(function (t) { return (0, utils_1.matchTags)(t, focusedTag, itemsKey); }) : -1;
-        var newFocusedTag = undefined;
-        var hasFocused = focusedIndex !== -1;
-        if (keyCode === kendo_react_common_1.Keys.left) {
-            if (hasFocused) {
-                focusedIndex = Math.max(0, focusedIndex - 1);
-            }
-            else {
-                focusedIndex = tags.length - 1;
-            }
-            newFocusedTag = tags[focusedIndex];
-        }
-        else if (keyCode === kendo_react_common_1.Keys.right) {
-            if (focusedIndex === tags.length - 1) {
-                newFocusedTag = undefined;
-            }
-            else if (hasFocused) {
-                focusedIndex = Math.min(tags.length - 1, focusedIndex + 1);
-                newFocusedTag = tags[focusedIndex];
-            }
-        }
-        else if (keyCode === kendo_react_common_1.Keys.home && !event.shiftKey) {
-            newFocusedTag = tags[0];
-        }
-        else if (keyCode === kendo_react_common_1.Keys.end && !event.shiftKey) {
-            newFocusedTag = tags[tags.length - 1];
-        }
-        else if (keyCode === kendo_react_common_1.Keys.delete) {
-            if (hasFocused) {
-                var items = this.value;
-                (0, utils_1.removeDataItems)(items, tags[focusedIndex].data, itemsKey);
-                this.triggerOnChange(items, state);
-            }
-        }
-        else if (keyCode === kendo_react_common_1.Keys.backspace) {
-            var items = this.value;
-            if (hasFocused) {
-                (0, utils_1.removeDataItems)(items, tags[focusedIndex].data, itemsKey);
-                this.triggerOnChange(items, state);
-            }
-            else if (!hasFocused && tags.length) {
-                var removed = tags.pop();
-                (0, utils_1.removeDataItems)(items, removed.data, itemsKey);
-                this.triggerOnChange(items, state);
-            }
-        }
-        if (newFocusedTag !== focusedTag) {
-            state.data.focusedTag = newFocusedTag;
-            state.data.activedescendant = settings_1.ActiveDescendant.TagsList;
-        }
-        this.applyState(state);
-    };
-    MultiSelectWithoutContext.prototype.triggerOnChange = function (items, state) {
-        if (this.props.value === undefined) {
-            state.data.value = __spreadArray([], items, true);
-        }
-        this._valueItemsDuringOnChange = [];
-        this.setItems(items, this._valueItemsDuringOnChange);
-        state.events.push({ type: 'onChange' });
-    };
-    MultiSelectWithoutContext.prototype.selectFocusedItem = function (event, itemtoSelect) {
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, virtual = _a.virtual;
-        var focusedIndex = (itemtoSelect || this.getFocusedState()).focusedIndex;
-        var skip = virtual ? virtual.skip : 0;
-        if (data[focusedIndex - skip] !== undefined) {
-            this.handleItemClick(focusedIndex, event);
-        }
-    };
-    MultiSelectWithoutContext.prototype.setItems = function (srcItems, destItems) {
-        destItems.length = 0;
-        destItems.push.apply(destItems, srcItems);
-    };
-    MultiSelectWithoutContext.prototype.getFocusedState = function () {
-        var focusedIndex = this.state.focusedIndex;
-        var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
-        var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual, textField = _a.textField, _c = _a.focusedItemIndex, focusedItemIndex = _c === void 0 ? utils_1.itemIndexStartsWith : _c, skipDisabledItems = _a.skipDisabledItems;
-        var skip = (virtual && virtual.skip) || 0;
-        var focusedInd;
-        if (focusedIndex !== undefined) {
-            return {
-                focusedIndex: focusedIndex,
-                focusedItem: data[focusedIndex - skip],
-                focusedType: FocusedItemType.ListItem
-            };
-        }
-        var selected = this.value;
-        if (allowCustom && text) {
-            return { focusedItem: null, focusedIndex: -1, focusedType: FocusedItemType.CustomItem };
-        }
-        else if (text) {
-            focusedInd = focusedItemIndex(data, text, textField);
-            return {
-                focusedItem: data[focusedInd],
-                focusedIndex: focusedInd + skip,
-                focusedType: FocusedItemType.ListItem
-            };
-        }
-        else if (selected.length) {
-            var last_1 = selected[selected.length - 1];
-            focusedInd = data.findIndex(function (i) { return (0, utils_1.areSame)(i, last_1, dataItemKey); });
-            if (data[focusedInd] !== undefined) {
-                return {
-                    focusedIndex: focusedInd + skip,
-                    focusedItem: data[focusedInd],
-                    focusedType: FocusedItemType.ListItem
-                };
-            }
-            return { focusedType: FocusedItemType.None, focusedIndex: -1 };
-        }
-        else if (skipDisabledItems && textField && !text && skip === 0) {
-            var newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
-            return {
-                focusedIndex: newIndex,
-                focusedItem: data[newIndex - skip],
-                focusedType: FocusedItemType.ListItem
-            };
-        }
-        return skip === 0 ?
-            { focusedItem: data[0], focusedIndex: 0, focusedType: FocusedItemType.ListItem } :
-            { focusedType: FocusedItemType.None, focusedIndex: -1 };
-    };
-    MultiSelectWithoutContext.prototype.focusElement = function (element) {
-        var _this = this;
-        this._skipFocusEvent = true;
-        element.focus();
-        window.setTimeout(function () { return _this._skipFocusEvent = false; }, 0);
-    };
-    MultiSelectWithoutContext.prototype.applyState = function (state) {
-        this.base.applyState(state);
-        this._valueItemsDuringOnChange = null;
-    };
-    MultiSelectWithoutContext.prototype.calculateMedia = function (entries) {
-        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-            var entry = entries_1[_i];
-            this.setState({ windowWidth: entry.target.clientWidth });
-        }
-        ;
-    };
-    ;
-    /**
-     * 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
-     */
-    MultiSelectWithoutContext.prototype.updateStateOnKeyboardNavigation = function (dataToSet, state) {
-        this.setState({ value: dataToSet });
-        this.triggerOnChange(dataToSet, state);
-        this.applyState(state);
-    };
-    /**
-     * 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
-     */
-    MultiSelectWithoutContext.prototype.getLastSelectedOrDeselectedIndex = function (correction, focusedIndex) {
-        if (this._lastSelectedOrDeslectedItemIndex === null) {
-            this._lastSelectedOrDeslectedItemIndex = focusedIndex;
-        }
-        return this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + correction : null;
-    };
-    MultiSelectWithoutContext.displayName = 'MultiSelect';
-    /** @hidden */
-    MultiSelectWithoutContext.propTypes = __assign(__assign({}, DropDownBase_1.default.propTypes), { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
-            text: PropTypes.string,
-            data: PropTypes.arrayOf(PropTypes.any)
-        })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any, adaptive: PropTypes.bool, adaptiveTitle: PropTypes.string, onCancel: PropTypes.func, skipDisabledItems: PropTypes.bool });
-    /** @hidden */
-    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase_1.default.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern', skipDisabledItems: true });
-    return MultiSelectWithoutContext;
-}(React.Component));
-exports.MultiSelectWithoutContext = MultiSelectWithoutContext;
-/**
- * Represents the PropsContext of the `MultiSelect` component.
- * Used for global configuration of all `MultiSelect` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-exports.MultiSelectPropsContext = (0, kendo_react_common_1.createPropsContext)();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
- *
- * Accepts properties of type [MultiSelectProps]({% slug api_dropdowns_multiselectprops %}).
- * Obtaining the `ref` returns an object of type [MultiSelectHandle]({% slug api_dropdowns_multiselecthandle %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    multiselect = null;
- *    render() {
- *       return (
- *          <div>
- *              <MultiSelect
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.multiselect = component}
- *              />
- *              <button onClick={() => alert(this.multiselect.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-exports.MultiSelect = (0, kendo_react_common_1.withPropsContext)(exports.MultiSelectPropsContext, MultiSelectWithoutContext);
-exports.MultiSelect.displayName = 'KendoReactMultiSelect';