@progress/kendo-react-dropdowns 5.13.0-dev.202304200559 → 5.13.0-dev.202304201241

package/dist/es/MultiSelect/MultiSelect.js

@@ -35,11 +35,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, guid, createPropsContext, kendoThemeMaps, withPropsContext, IconWrap } from '@progress/kendo-react-common';
+import { classNames, Keys, guid, createPropsContext, kendoThemeMaps, withPropsContext, IconWrap, canUseDOM } from '@progress/kendo-react-common';
 import { plusIcon } from '@progress/kendo-svg-icons';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListContainer from '../common/ListContainer';
 import List from '../common/List';
+import GroupStickyHeader from '../common/GroupStickyHeader';
 import TagList from './TagList';
 import SearchBar from '../common/SearchBar';
 import DropDownBase from '../common/DropDownBase';
@@ -48,6 +49,12 @@ import { itemIndexStartsWith, getItemValue, areSame, removeDataItems, isPresent,
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import ClearButton from '../common/ClearButton';
+import { AdaptiveMode } from '../common/AdaptiveMode';
+import { ActionSheetContent } from '@progress/kendo-react-layout';
+import { MOBILE_MEDIUM_DEVISE } from '../common/constants';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
+import { adaptiveModeFooterApply, adaptiveModeFooterCancel, messages } from '../messages';
+import ListFilter from '../common/ListFilter';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var preventDefault = function (event) { return event.preventDefault(); };
@@ -63,11 +70,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     __extends(MultiSelectWithoutContext, _super);
     function MultiSelectWithoutContext(props) {
         var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
+        /** @hidden */
         _this.state = {
-            activedescendant: ActiveDescendant.PopupList
+            activedescendant: ActiveDescendant.PopupList,
+            currentTreeValue: []
         };
         _this._element = null;
         _this._valueItemsDuringOnChange = null;
@@ -75,19 +81,18 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this.base = new DropDownBase(_this);
         _this._tags = [];
         _this._input = null;
+        _this._adaptiveInput = null;
         _this._skipFocusEvent = false;
+        _this.itemHeight = 0;
         _this.scrollToFocused = false;
-        /**
-         * @hidden
-         */
+        _this.localization = null;
+        /** @hidden */
         _this.focus = function () {
             if (_this._input) {
                 _this._input.focus();
             }
         };
-        /**
-         * @hidden
-         */
+        /** @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;
@@ -114,14 +119,11 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             _this.triggerOnChange(newItems, state);
             _this.base.triggerPageChangeCornerItems(dataItem, state);
         };
-        /**
-         * @hidden
-         */
+        /** @hidden */
         _this.onTagDelete = function (itemsToRemove, event) {
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
-            if (opened) {
+            if (_this.opened) {
                 _this.base.togglePopup(state);
             }
             if (!_this.state.focused) {
@@ -133,9 +135,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             _this.triggerOnChange(selected, state);
             _this.applyState(state);
         };
-        /**
-         * @hidden
-         */
+        /** @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;
@@ -169,20 +169,19 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this.onChangeHandler = function (event) {
             var state = _this.base.initState();
             var value = event.currentTarget.value;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             state.syntheticEvent = event;
             if (_this.props.filter === undefined) {
                 state.data.text = value;
             }
             state.data.focusedIndex = undefined;
-            if (!opened) {
+            if (!_this.opened) {
                 _this.base.togglePopup(state);
+                _this.setState({ currentTreeValue: _this.value });
             }
             _this.base.filterChanged(value, state);
             _this.applyState(state);
         };
         _this.clearButtonClick = function (event) {
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             event.stopPropagation();
@@ -192,7 +191,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (_this.state.focusedIndex !== undefined) {
                 state.data.focusedIndex = undefined;
             }
-            if (opened) {
+            if (_this.opened) {
                 _this.base.togglePopup(state);
             }
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
@@ -207,7 +206,6 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this.onInputKeyDown = function (event) {
             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 focusedItem = _this.getFocusedState().focusedItem;
             var state = _this.base.initState();
             state.syntheticEvent = event;
@@ -222,7 +220,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _this.base.togglePopup(state);
                 _this.applyState(state);
             };
-            if (opened) {
+            if (_this.opened) {
                 if (event.altKey && keyCode === Keys.up) {
                     togglePopup();
                 }
@@ -247,13 +245,36 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 togglePopup();
             }
         };
-        _this.renderListContainer = function () {
+        _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: classNames('k-list', (_a = {},
+                    _a["k-list-".concat(sizeMap[size] || size)] = size,
+                    _a)), key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
+                React.createElement("div", { className: classNames('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
+                    text,
+                    React.createElement(IconWrap, { name: 'plus', icon: plusIcon, style: { position: 'absolute', right: '0.5em' } }))));
+            var group = _this.state.group;
+            if (group === undefined && groupField !== undefined) {
+                group = getItemValue(data[0], groupField);
+            }
+            return (React.createElement(React.Fragment, null,
+                header && React.createElement("div", { className: "k-list-header" }, header),
+                customItem,
+                React.createElement("div", { className: 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 && React.createElement(GroupStickyHeader, { 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 _c = _this.props, header = _c.header, footer = _c.footer, allowCustom = _c.allowCustom, dir = _c.dir, _d = _c.data, data = _d === void 0 ? [] : _d, size = _c.size;
+            var _a = _this.props, dir = _a.dir, _b = _a.data, data = _b === void 0 ? [] : _b;
             var popupSettings = _this.base.getPopupSettings();
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
             var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
             var listContainerProps = {
                 dir: dir !== undefined ? dir : base.dirCalculated,
@@ -263,40 +284,115 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,
-                    show: opened,
+                    show: _this.opened,
                     onOpen: _this.onPopupOpened,
                     onClose: _this.onPopupClosed,
                     appendTo: popupSettings.appendTo
                 },
                 itemsCount: [data.length, _this.value.length]
             };
-            var focusedType = _this.getFocusedState().focusedType;
-            var customItem = allowCustom && text && (React.createElement("div", { className: classNames('k-list', (_a = {},
-                    _a["k-list-".concat(sizeMap[size] || size)] = size,
-                    _a)), key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
-                React.createElement("div", { className: classNames('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
-                    text,
-                    React.createElement(IconWrap, { name: 'plus', icon: plusIcon, style: { position: 'absolute', right: '0.5em' } }))));
-            return (React.createElement(ListContainer, __assign({}, listContainerProps),
-                header && React.createElement("div", { className: "k-list-header" }, header),
-                customItem,
-                React.createElement("div", { className: classNames('k-list', (_b = {},
-                        _b["k-list-".concat(sizeMap[size] || size)] = size,
-                        _b['k-virtual-list'] = _this.base.vs.enabled,
-                        _b)) }, _this.renderList()),
-                footer && React.createElement("div", { className: "k-list-footer" }, footer)));
+            return (React.createElement(ListContainer, __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 = provideLocalizationService(_this);
+            var actionSheetProps = {
+                adaptiveTitle: adaptiveTitle,
+                expand: _this.opened,
+                onClose: function (event) { return _this.onCancel(event); },
+                windowWidth: windowWidth,
+                footer: {
+                    cancelText: _this.localization.toLanguageString(adaptiveModeFooterCancel, messages[adaptiveModeFooterCancel]),
+                    onCancel: function (event) { return _this.onCancel(event); },
+                    applyText: _this.localization.toLanguageString(adaptiveModeFooterApply, messages[adaptiveModeFooterApply]),
+                    onApply: function (event) { return _this.closePopup(event); }
+                }
+            };
+            return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
+                React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
+                    filterable && React.createElement(ListFilter, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.input; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }),
+                    _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 (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 (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, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
+            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 opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var focusedIndex = _this.getFocusedState().focusedIndex;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listKey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: preventDefault, onBlur: _this.handleBlur, onScroll: function (e) {
-                    vs.scrollHandler(e);
-                }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+            return (React.createElement(List, { 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;
@@ -319,17 +415,22 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             _this.applyState(state);
         };
         _this.handleWrapperClick = function (event) {
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var input = _this._input;
-            if (!opened && input) {
+            if (!_this.opened && input) {
                 _this.focusElement(input);
             }
             var state = _this.base.initState();
             state.syntheticEvent = event;
-            if (!_this.state.focused) {
+            if (!_this.state.focused && !_this.mobileMode) {
                 state.events.push({ type: 'onFocus' });
                 state.data.focused = true;
             }
+            if (_this.mobileMode) {
+                _this.setState({ currentTreeValue: _this.tagsToRender });
+                if (_this.mobileMode) {
+                    window.setTimeout(function () { return _this._adaptiveInput && _this._adaptiveInput.focus(); }, 300);
+                }
+            }
             _this.base.togglePopup(state);
             _this.applyState(state);
         };
@@ -337,7 +438,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var state = _this.base.initState();
             state.syntheticEvent = event;
             _this.handleItemSelect(index, state);
-            if (_this.props.autoClose) {
+            if (_this.props.autoClose && !_this.mobileMode) {
                 _this.base.togglePopup(state);
             }
             event.stopPropagation();
@@ -347,13 +448,12 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (!_this.state.focused || _this._skipFocusEvent) {
                 return;
             }
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             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 (opened) {
+            if (_this.opened && !_this.mobileMode) {
                 if (_this.state.opened) {
                     state.data.opened = false;
                 }
@@ -371,7 +471,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             _this.base.handleFocus(event);
         };
         _this.onPopupOpened = function () {
-            if (_this._input && _this.state.focused) {
+            if (_this._input && _this.state.focused && !_this.mobileMode) {
                 _this.focusElement(_this._input);
             }
         };
@@ -392,12 +492,59 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "document", {
+        get: function () {
+            if (!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: getItemValue(item, textField), data: [item] });
+                });
+            }
+            else {
+                tagsToRender.push.apply(tagsToRender, tags);
+            }
+            return tagsToRender;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectWithoutContext.prototype, "mobileMode", {
         /**
-         * @hidden
+         * The mobile mode of the ComboBox.
          */
         get: function () {
-            return this._element;
+            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            return !!isAdaptive;
         },
         enumerable: false,
         configurable: true
@@ -454,9 +601,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(MultiSelectWithoutContext.prototype, "required", {
-        /**
-         * @hidden
-         */
+        /** @hidden */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
@@ -474,17 +619,16 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @hidden
-     */
+    /** @hidden */
     MultiSelectWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var virtual = this.props.virtual;
+        var _a;
+        var _b = this.props, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
+        var _d = this.props.data, data = _d === void 0 ? [] : _d;
         var skip = virtual ? virtual.skip : 0;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
-        var opening = !prevOpened && opened;
-        var closing = prevOpened && !opened;
+        var opening = !prevOpened && this.opened;
+        var closing = prevOpened && !this.opened;
         var popupSettings = this.base.getPopupSettings();
         if (!popupSettings.animate && closing) {
             this.onPopupClosed();
@@ -494,40 +638,50 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             this.base.vs.reset();
         }
         else {
-            var _a = this.getFocusedState(), focusedItem = _a.focusedItem, focusedIndex = _a.focusedIndex;
+            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) {
                 this.base.scrollToItem(focusedIndex);
             }
-            else if (opened && prevOpened && focusedItem && this.scrollToFocused) {
+            else if (this.opened && prevOpened && focusedItem && this.scrollToFocused) {
                 this.base.scrollToItem(focusedIndex - skip);
             }
         }
         this.scrollToFocused = false;
         this.setValidity();
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     MultiSelectWithoutContext.prototype.componentDidMount = function () {
+        var _a;
+        this.observerResize = 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
-     */
+    /** @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) {
         var _a = this.props, allowCustom = _a.allowCustom, _b = _a.data, data = _b === void 0 ? [] : _b;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         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 (opened && keyCode === Keys.up && customItemFocused) {
+        if (this.opened && keyCode === Keys.up && customItemFocused) {
             if (this.state.focusedIndex !== undefined) {
                 state.data.focusedIndex = undefined;
             }
@@ -546,13 +700,11 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    /**
-     * @hidden
-     */
+    /** @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, tags = _c.tags, 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;
+        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, currentTreeValue = _d.currentTreeValue;
         var vs = this.base.vs;
         var id = this.props.id || this._inputId;
         vs.enabled = virtual !== undefined;
@@ -561,51 +713,44 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             vs.total = virtual.total;
             vs.pageSize = virtual.pageSize;
         }
-        var tagsToRender = [];
-        if (tags === undefined) {
-            this.value.forEach(function (item) {
-                tagsToRender.push({ text: getItemValue(item, textField), data: [item] });
-            });
-        }
-        else {
-            tagsToRender.push.apply(tagsToRender, tags);
-        }
-        this.setItems(tagsToRender, this._tags);
+        var currentTagsToRender = (this.mobileMode && this.opened) ? currentTreeValue : this.tagsToRender;
+        this.setItems(this.tagsToRender, this._tags);
         var isValid = !this.validityStyles || this.validity.valid;
-        var clearButton = Boolean(filter !== undefined ? filter : text) || this.value.length > 0;
-        var component = (React.createElement("div", { ref: this.componentRef, className: 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: preventDefaultNonInputs },
-            React.createElement("div", { className: classNames('k-input-values') },
-                React.createElement("div", { className: classNames('k-chip-list', (_b = {},
-                        _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
-                        _b)), role: "listbox", id: 'tagslist-' + this.base.guid }, tagsToRender.length > 0 && React.createElement(TagList, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: tagsToRender, guid: this.base.guid, focused: focusedTag ? tagsToRender.find(function (t) { return matchTags(t, focusedTag, dataItemKey); }) : undefined, size: size })),
-                this.renderSearchbar(id)),
-            loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-            clearButton && React.createElement(ClearButton, { onClick: this.clearButtonClick }),
-            this.renderListContainer()));
+        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: 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: preventDefaultNonInputs },
+                React.createElement("div", { className: classNames('k-input-values') },
+                    React.createElement("div", { className: 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, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: currentTagsToRender, guid: this.base.guid, focused: focusedTag ? currentTagsToRender.find(function (t) { return matchTags(t, focusedTag, dataItemKey); }) : undefined, size: size })),
+                    this.renderSearchBar(id)),
+                loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+                clearButton && React.createElement(ClearButton, { onClick: this.clearButtonClick }),
+                !this.mobileMode && this.renderListContainer()),
+            this.mobileMode && this.renderAdaptiveListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: text || 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;
+    MultiSelectWithoutContext.prototype.renderSearchBar = function (id) {
+        var _a = this.state, activedescendant = _a.activedescendant, focusedTag = _a.focusedTag, currentTreeValue = _a.currentTreeValue;
         var _b = this.props, disabled = _b.disabled, placeholder = _b.placeholder, ariaDescribedBy = _b.ariaDescribedBy;
-        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 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 = (currentTreeValue && currentTreeValue.length > 0) ? undefined : placeholder;
         var ariaActivedescendant = activedescendant === 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, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: 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 }));
+        return (React.createElement(SearchBar, { 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;
@@ -736,18 +881,22 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         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 });
+        }
+        ;
+    };
+    ;
     MultiSelectWithoutContext.displayName = 'MultiSelect';
-    /**
-     * @hidden
-     */
+    /** @hidden */
     MultiSelectWithoutContext.propTypes = __assign(__assign({}, DropDownBase.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 });
-    /**
-     * @hidden
-     */
-    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
+        })), 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 });
+    /** @hidden */
+    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
     return MultiSelectWithoutContext;
 }(React.Component));
 export { MultiSelectWithoutContext };