@skbkontur/react-ui 6.0.8 → 6.1.1-9752b.0

package/components/TokenInput/TokenInput.js

@@ -82,7 +82,7 @@ import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { PopupIds } from '../../internal/Popup/index.js';
 import { blink } from '../../lib/blink.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll, } from '../../lib/events/keyboard/identifiers.js';
+import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isCodeComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll, } from '../../lib/events/keyboard/identifiers.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { locale } from '../../lib/locale/decorators.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
@@ -92,6 +92,7 @@ import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { getUid } from '../../lib/uidUtils.js';
 import { emptyHandler, getRandomID, isFunction } from '../../lib/utils.js';
 import { MenuItem } from '../MenuItem/index.js';
+import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
 import { ScrollContainer } from '../ScrollContainer/index.js';
 import { Token } from '../Token/index.js';
 import { TokenView } from '../Token/TokenView.js';
@@ -99,6 +100,7 @@ import { TokenInputLocaleHelper } from './locale/index.js';
 import { TextWidthHelper } from './TextWidthHelper.js';
 import { getStyles } from './TokenInput.styles.js';
 import { TokenInputMenu } from './TokenInputMenu.js';
+import { TokenInputMobileMenu } from './TokenInputMobileMenu.js';
 import { tokenInputReducer } from './TokenInputReducer.js';
 var TEMP_FAKE_FLAG = 'TEMP_FAKE_FLAG';
 export var TokenInputType;
@@ -118,6 +120,7 @@ export var DefaultState = {
     preventBlur: false,
     inputValueWidth: 2,
     inputValueHeight: 22,
+    showMobilePopup: false,
 };
 export var TokenInputDataTids = {
     root: 'TokenInput__root',
@@ -145,6 +148,87 @@ var TokenInput = /** @class */ (function (_super) {
         _this.wrapper = null;
         _this.scrollContainerRef = React.createRef();
         _this.memoizedTokens = new Map();
+        _this.renderInlineField = function () {
+            return _this.renderTokenInputField({
+                variant: 'inline',
+                interactive: _this.isInlineInteractive(),
+                fieldWidth: _this.getProps().width,
+                showMenu: Boolean(!_this.isMobileLayout &&
+                    _this.type !== TokenInputType.WithoutReference &&
+                    _this.isCursorVisible &&
+                    _this.state.activeTokens.length === 0 &&
+                    (_this.isInputValueChanged || !_this.props.hideMenuIfEmptyInputValue)),
+            });
+        };
+        _this.renderMobilePopupFooter = function () {
+            return _this.renderTokenInputField({
+                variant: 'mobileFooter',
+                interactive: true,
+                fieldWidth: '100%',
+                showMenu: false,
+            });
+        };
+        _this.renderTokenInputField = function (_a) {
+            var _b, _c, _d;
+            var variant = _a.variant, interactive = _a.interactive, fieldWidth = _a.fieldWidth, showMenu = _a.showMenu;
+            var _e = _this.props, maxMenuHeight = _e.maxMenuHeight, error = _e.error, warning = _e.warning, disabled = _e.disabled, renderNotFound = _e.renderNotFound, inputMode = _e.inputMode, renderTotalCount = _e.renderTotalCount, totalCount = _e.totalCount, ariaDescribedby = _e["aria-describedby"], ariaLabel = _e["aria-label"], maxHeight = _e.maxHeight;
+            var _f = _this.getProps(), selectedItems = _f.selectedItems, menuWidth = _f.menuWidth, menuAlign = _f.menuAlign, renderItem = _f.renderItem;
+            var isMobileFooter = variant === 'mobileFooter';
+            var _g = _this.state, inFocus = _g.inFocus, inputValueWidth = _g.inputValueWidth, inputValueHeight = _g.inputValueHeight, inputValue = _g.inputValue, reservedInputValue = _g.reservedInputValue, autocompleteItems = _g.autocompleteItems, loading = _g.loading;
+            var theme = _this.theme;
+            var inputInlineStyles = {
+                // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
+                width: inputValueWidth,
+                height: inputValueHeight,
+                // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
+                caretColor: _this.isCursorVisible && interactive ? undefined : 'transparent',
+            };
+            var labelClassName = _this.cx(_this.styles.label(theme), _this.getLabelSizeClassName(), (_b = {},
+                _b[_this.styles.labelNonInteractive()] = !interactive,
+                _b[_this.styles.hovering(_this.theme)] = interactive && !inFocus && !disabled && !warning && !error,
+                _b[_this.styles.labelDisabled(theme)] = !!disabled,
+                _b[_this.styles.labelFocused(theme)] = interactive && !!inFocus,
+                _b[_this.styles.error(theme)] = !!error,
+                _b[_this.styles.warning(theme)] = !!warning,
+                _b));
+            var inputClassName = _this.cx(_this.styles.input(theme), _this.getInputSizeClassName(), (_c = {},
+                _c[_this.styles.inputDisabled(theme)] = !!disabled,
+                _c));
+            var placeholder = selectedItems.length === 0 && !inputValue ? _this.props.placeholder : '';
+            var inputNode = (React.createElement(TokenView, { size: _this.size, className: _this.cx((_d = {},
+                    // input растягивается на всю ширину чтобы placeholder не обрезался
+                    _d[_this.styles.inputPlaceholderWrapper()] = Boolean(placeholder),
+                    _d)), hideCloseButton: Boolean(placeholder) },
+                React.createElement("textarea", { id: isMobileFooter || interactive ? _this.textareaId : undefined, ref: isMobileFooter ? _this.mobileInputRef : _this.inlineInputRef, value: inputValue, style: inputInlineStyles, spellCheck: false, disabled: disabled, readOnly: !interactive, tabIndex: !interactive ? -1 : undefined, className: inputClassName, placeholder: placeholder, onFocus: interactive ? _this.handleInputFocus : undefined, onBlur: interactive ? _this.handleInputBlur : undefined, onChange: interactive ? _this.handleChangeInputValue : undefined, onKeyDown: interactive ? _this.handleKeyDown : undefined, onPaste: interactive ? _this.handleInputPaste : undefined, inputMode: inputMode, "aria-label": isMobileFooter || interactive ? ariaLabel : undefined, "aria-describedby": isMobileFooter || interactive ? ariaDescribedby : undefined, "aria-hidden": !interactive ? true : undefined, autoFocus: isMobileFooter })));
+            var inner = (React.createElement(React.Fragment, null,
+                isMobileFooter ? null : (React.createElement(TextWidthHelper, { ref: _this.textHelperRef, text: inputValue, theme: _this.theme, size: _this.size })),
+                _this.renderTokensStart(interactive),
+                inputNode,
+                showMenu && (React.createElement(TokenInputMenu, { popupMenuId: _this.rootId, ref: _this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElementForCursor: _this.input, anchorElementRoot: _this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: _this.selectItem, renderAddButton: _this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign, renderTotalCount: renderTotalCount, totalCount: totalCount, size: _this.size })),
+                _this.renderTokensEnd(interactive),
+                _this.isEditingMode ? (React.createElement(TokenView, { size: _this.size },
+                    React.createElement("span", { className: _this.styles.reservedInput(theme) }, reservedInputValue))) : null));
+            var container = maxHeight && !isMobileFooter ? (React.createElement(ScrollContainer, { className: _this.styles.inputPlaceholderScrollWrapper(), scrollRef: _this.scrollContainerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
+            var labelStyle = {
+                width: fieldWidth,
+            };
+            return (React.createElement("label", { ref: isMobileFooter ? _this.mobileWrapperRef : _this.inlineWrapperRef, style: labelStyle, className: labelClassName, onMouseDown: interactive ? _this.handleWrapperMouseDown : undefined, onMouseUp: interactive ? _this.handleWrapperMouseUp : undefined, 
+                // Для корректной работы скролла приходится ломать связь label с полем ввода
+                // Иначе любой клик внутри label вызывает фокус и автоскроллинг к полю ввода
+                htmlFor: !interactive || maxHeight ? 'fake-id' : _this.textareaId, "aria-controls": interactive ? _this.rootId : undefined, "aria-hidden": !interactive ? true : undefined, "data-tid": isMobileFooter || interactive ? TokenInputDataTids.label : undefined }, container));
+        };
+        _this.renderMobileMenu = function () {
+            var _a = _this.props, maxMenuHeight = _a.maxMenuHeight, renderNotFound = _a.renderNotFound, renderTotalCount = _a.renderTotalCount, totalCount = _a.totalCount;
+            var renderItem = _this.getProps().renderItem;
+            var _b = _this.state, autocompleteItems = _b.autocompleteItems, loading = _b.loading;
+            return (React.createElement(TokenInputMobileMenu, { popupMenuId: _this.rootId, ref: function (node) {
+                    _this.tokensInputMenuRef(node);
+                }, items: autocompleteItems, loading: loading, opened: true, maxMenuHeight: maxMenuHeight, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: _this.selectItem, renderAddButton: _this.renderAddButton, renderTotalCount: renderTotalCount, totalCount: totalCount, size: _this.size, mobileFooterComponent: _this.renderMobilePopupFooter(), onCloseRequest: function () {
+                    return _this.dispatch({
+                        type: 'SET_CLOSE_MOBILE_POPUP',
+                    });
+                } }));
+        };
         _this.isEqual = function (itemA, itemB) {
             var itemToId = _this.getProps().itemToId;
             return lodashIsEqual(itemToId(itemA), itemToId(itemB));
@@ -156,8 +240,15 @@ var TokenInput = /** @class */ (function (_super) {
             }
             return items.some(function (item) { return _this.isEqual(item, value); });
         };
-        _this.inputRef = function (node) {
-            _this.input = node;
+        _this.inlineInputRef = function (node) {
+            if (!_this.usesMobilePopup || !_this.state.showMobilePopup) {
+                _this.input = node;
+            }
+        };
+        _this.mobileInputRef = function (node) {
+            if (_this.usesMobilePopup && !!_this.state.showMobilePopup) {
+                _this.input = node;
+            }
         };
         _this.tokensInputMenuRef = function (node) {
             _this.tokensInputMenu = node;
@@ -165,19 +256,37 @@ var TokenInput = /** @class */ (function (_super) {
         _this.textHelperRef = function (node) {
             _this.textHelper = node;
         };
-        _this.wrapperRef = function (node) {
-            _this.wrapper = node;
+        _this.inlineWrapperRef = function (node) {
+            if (!_this.usesMobilePopup || !_this.state.showMobilePopup) {
+                _this.wrapper = node;
+            }
+        };
+        _this.mobileWrapperRef = function (node) {
+            if (_this.usesMobilePopup && !!_this.state.showMobilePopup) {
+                _this.wrapper = node;
+            }
         };
         _this.dispatch = function (action, cb) {
             _this.setState(function (prevState) { return tokenInputReducer(prevState, action); }, cb);
         };
         _this.handleInputFocus = function (event) {
-            _this.dispatch({ type: 'SET_FOCUS_IN' });
-            _this.getProps().onFocus(event);
+            if (_this.usesMobilePopup) {
+                if (!_this.state.showMobilePopup) {
+                    _this.dispatch({ type: 'SET_SHOW_MOBILE_POPUP' });
+                    return;
+                }
+            }
+            if (!_this.state.inFocus) {
+                _this.dispatch({ type: 'SET_FOCUS_IN' });
+                _this.getProps().onFocus(event);
+            }
         };
         _this.handleInputBlur = function (event) {
             var _a, _b, _c;
             var isBlurToMenu = _this.isBlurToMenu(event);
+            if (_this.usesMobilePopup) {
+                return;
+            }
             if (!isBlurToMenu) {
                 _this.handleOutsideBlur();
             }
@@ -277,7 +386,7 @@ var TokenInput = /** @class */ (function (_super) {
             if (delimiters.some(function (delimiter) { return paste.includes(delimiter); })) {
                 event.preventDefault();
                 event.stopPropagation();
-                var tokens = paste.trim().split(new RegExp("[".concat(delimiters.join(''), "]+")));
+                var tokens = _this.splitValueByDelimiters(paste.trim());
                 var items = tokens
                     .filter(Boolean)
                     .map(function (token) { return valueToItem(token); })
@@ -294,17 +403,18 @@ var TokenInput = /** @class */ (function (_super) {
                 args_1[_i] = arguments[_i];
             }
             return __awaiter(_this, __spreadArray([], args_1, true), void 0, function (query) {
-                var autocompleteItems, _a, selectedItems_1, valueToItem, valueToString_1, isSelectedItem_1, isEditingItem_1, autocompleteItemsUnique, autocompleteItemsUniqueSimple, editingItem, selectItemIndex_1;
+                var autocompleteItems, _a, selectedItems_1, valueToItem, valueToString_1, isSelectedItem_1, isEditingItem_1, autocompleteItemsUnique, autocompleteItemsUniqueSimple, editingItem, selectItemIndex, highlightIndex_1, applyMenuHighlight;
                 var _this = this;
+                var _b, _c;
                 if (query === void 0) { query = ''; }
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             if (!(this.props.getItems && (this.isInputValueChanged || !this.props.hideMenuIfEmptyInputValue))) return [3 /*break*/, 2];
                             this.dispatch({ type: 'SET_LOADING', payload: true });
                             return [4 /*yield*/, this.props.getItems(query)];
                         case 1:
-                            autocompleteItems = _b.sent();
+                            autocompleteItems = _d.sent();
                             this.dispatch({ type: 'SET_LOADING', payload: false });
                             _a = this.getProps(), selectedItems_1 = _a.selectedItems, valueToItem = _a.valueToItem, valueToString_1 = _a.valueToString;
                             isSelectedItem_1 = function (item) { return _this.hasValueInItems(selectedItems_1, item); };
@@ -329,9 +439,11 @@ var TokenInput = /** @class */ (function (_super) {
                                     _this.highlightMenuItem();
                                 });
                             }
-                            selectItemIndex_1 = autocompleteItemsUniqueSimple.findIndex(function (item) { return valueToString_1(item).toLowerCase() === _this.state.inputValue.toLowerCase(); });
-                            setTimeout(function () { var _a; return (_a = _this.menuRef) === null || _a === void 0 ? void 0 : _a.highlightItem(selectItemIndex_1 < 0 ? 0 : selectItemIndex_1); }, 0);
-                            _b.label = 2;
+                            selectItemIndex = autocompleteItemsUniqueSimple.findIndex(function (item) { return valueToString_1(item).toLowerCase() === _this.state.inputValue.toLowerCase(); });
+                            highlightIndex_1 = selectItemIndex < 0 ? 0 : selectItemIndex;
+                            applyMenuHighlight = function () { var _a; return (_a = _this.menuRef) === null || _a === void 0 ? void 0 : _a.highlightItem(highlightIndex_1); };
+                            (_c = (_b = this.globalObject).requestAnimationFrame) === null || _c === void 0 ? void 0 : _c.call(_b, applyMenuHighlight);
+                            _d.label = 2;
                         case 2: return [2 /*return*/];
                     }
                 });
@@ -353,8 +465,7 @@ var TokenInput = /** @class */ (function (_super) {
         _this.handleInputKeyDown = function (e) {
             var _a, _b, _c, _d;
             e.stopPropagation();
-            if ((_this.type !== TokenInputType.WithReference &&
-                _this.getProps().delimiters.some(function (key) { return key === e.key || (key === ',' && isKeyComma(e)); })) ||
+            if ((_this.isDelimiterInputEnabled && _this.getProps().delimiters.some(function (key) { return _this.isDelimiterKeyEvent(e, key); })) ||
                 (isKeyEnter(e) && _this.type === TokenInputType.WithoutReference)) {
                 e.preventDefault();
                 var newValue = _this.state.inputValue;
@@ -411,6 +522,9 @@ var TokenInput = /** @class */ (function (_super) {
         _this.focusInput = function (options) {
             var _a, _b;
             (_b = (_a = _this.globalObject).requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, function () { var _a; return (_a = _this.input) === null || _a === void 0 ? void 0 : _a.focus(options); });
+            if (_this.usesMobilePopup && !_this.state.showMobilePopup) {
+                _this.dispatch({ type: 'SET_SHOW_MOBILE_POPUP' });
+            }
         };
         _this.selectInputText = function () {
             if (_this.input) {
@@ -515,7 +629,7 @@ var TokenInput = /** @class */ (function (_super) {
             (_b = (_a = _this.props).onValueChange) === null || _b === void 0 ? void 0 : _b.call(_a, _this.getProps().selectedItems.filter(function (_) { return !_this.isEqual(_, item); }));
             var filteredActiveTokens = _this.state.activeTokens.filter(function (_) { return !_this.isEqual(_, item); });
             _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: filteredActiveTokens });
-            if (filteredActiveTokens.length === 0) {
+            if (filteredActiveTokens.length === 0 && !(_this.usesMobilePopup && _this.state.showMobilePopup)) {
                 _this.focusInput({ preventScroll: true });
             }
             _this.tryGetItems();
@@ -535,7 +649,7 @@ var TokenInput = /** @class */ (function (_super) {
         };
         _this.handleTokenEdit = function (itemNew) {
             var _a = _this.getProps(), selectedItems = _a.selectedItems, valueToString = _a.valueToString;
-            var editingTokenIndex = selectedItems.findIndex(function (item) { return item === itemNew; });
+            var editingTokenIndex = selectedItems.findIndex(function (item) { return _this.isEqual(item, itemNew); });
             _this.dispatch({ type: 'SET_EDITING_TOKEN_INDEX', payload: editingTokenIndex });
             if (_this.isInputValueChanged) {
                 if (_this.state.reservedInputValue === undefined) {
@@ -600,6 +714,11 @@ var TokenInput = /** @class */ (function (_super) {
             if (_this.isInputValueChanged && query === '') {
                 _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
             }
+            if (_this.isDelimiterInputEnabled && _this.inputValueEndsWithDelimiter(query)) {
+                if (_this.tryApplyDelimiterFromInputValue(query)) {
+                    return;
+                }
+            }
             _this.dispatch({ type: 'UPDATE_QUERY', payload: query }, function () {
                 _this.tryGetItems(query);
             });
@@ -608,28 +727,29 @@ var TokenInput = /** @class */ (function (_super) {
             }
         };
         _this.highlightMenuItem = function () {
-            if (_this.menuRef &&
-                _this.state.autocompleteItems &&
-                _this.state.autocompleteItems.length > 0 &&
-                _this.type !== TokenInputType.Combined) {
+            if (_this.menuRef && _this.state.autocompleteItems && _this.state.autocompleteItems.length > 0) {
                 _this.menuRef.highlightItem(0);
             }
         };
-        _this.renderTokensStart = function () {
+        _this.renderTokensStart = function (interactive) {
+            if (interactive === void 0) { interactive = true; }
             var editingTokenIndex = _this.state.editingTokenIndex;
             var selectedItems = _this.getProps().selectedItems;
             var delimiter = editingTokenIndex >= 0 ? editingTokenIndex : selectedItems.length;
-            return selectedItems.slice(0, delimiter).map(_this.renderToken);
+            return selectedItems.slice(0, delimiter).map(function (x, index) { return _this.renderToken(x, index, interactive); });
         };
-        _this.renderTokensEnd = function () {
+        _this.renderTokensEnd = function (interactive) {
+            if (interactive === void 0) { interactive = true; }
             if (_this.state.editingTokenIndex >= 0) {
+                var startIndex_1 = _this.state.editingTokenIndex + 1;
                 return _this.getProps()
-                    .selectedItems.slice(_this.state.editingTokenIndex + 1)
-                    .map(_this.renderToken);
+                    .selectedItems.slice(startIndex_1)
+                    .map(function (x, index) { return _this.renderToken(x, startIndex_1 + index, interactive); });
             }
         };
-        _this.renderToken = function (item, index) {
+        _this.renderToken = function (item, index, interactive) {
             var _a;
+            if (interactive === void 0) { interactive = true; }
             var _b = _this.props, _c = _b.renderToken, renderToken = _c === void 0 ? defaultRenderToken : _c, disabled = _b.disabled;
             var isActive = _this.state.activeTokens.includes(item);
             // TODO useCallback
@@ -648,19 +768,21 @@ var TokenInput = /** @class */ (function (_super) {
             };
             var handleTokenDoubleClick = function (event) {
                 event.stopPropagation();
-                if (!_this.isEditingMode && !disabled) {
+                if (!_this.isEditingMode && !disabled && interactive) {
                     _this.handleTokenEdit(item);
                 }
             };
             var renderedToken = renderToken(item, {
                 size: _this.size,
                 isActive: isActive,
-                onClick: handleTokenClick,
-                onDoubleClick: handleTokenDoubleClick,
-                onRemove: handleIconClick,
+                onClick: interactive ? handleTokenClick : undefined,
+                onDoubleClick: interactive ? handleTokenDoubleClick : undefined,
+                onRemove: interactive ? handleIconClick : undefined,
                 disabled: disabled,
             }, index);
-            _this.memoizedTokens.set((_a = _this.props.selectedItems) === null || _a === void 0 ? void 0 : _a.indexOf(item), renderedToken);
+            if (interactive) {
+                _this.memoizedTokens.set((_a = _this.props.selectedItems) === null || _a === void 0 ? void 0 : _a.indexOf(item), renderedToken);
+            }
             return renderedToken;
         };
         _this.renderAddButton = function (value) {
@@ -739,6 +861,8 @@ var TokenInput = /** @class */ (function (_super) {
         }
     };
     TokenInput.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
+        var _a, _b;
         if (prevState.inputValue !== this.state.inputValue) {
             this.updateInputTextWidth();
         }
@@ -755,6 +879,23 @@ var TokenInput = /** @class */ (function (_super) {
         if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {
             this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);
         }
+        if (!prevState.showMobilePopup && this.state.showMobilePopup && this.usesMobilePopup) {
+            (_b = (_a = this.globalObject).requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, function () {
+                var _a;
+                (_a = _this.input) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                _this.tryGetItems(_this.state.inputValue);
+            });
+        }
+    };
+    Object.defineProperty(TokenInput.prototype, "usesMobilePopup", {
+        get: function () {
+            return this.isMobileLayout && this.type !== TokenInputType.WithoutReference;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TokenInput.prototype.isInlineInteractive = function () {
+        return !(this.usesMobilePopup && !!this.state.showMobilePopup);
     };
     TokenInput.prototype.componentWillUnmount = function () {
         var _a;
@@ -812,56 +953,15 @@ var TokenInput = /** @class */ (function (_super) {
         }
     };
     TokenInput.prototype.renderMain = function () {
-        var _a, _b, _c;
         if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
             logWarning(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");
         }
-        var _d = this.props, maxMenuHeight = _d.maxMenuHeight, error = _d.error, warning = _d.warning, disabled = _d.disabled, renderNotFound = _d.renderNotFound, hideMenuIfEmptyInputValue = _d.hideMenuIfEmptyInputValue, inputMode = _d.inputMode, renderTotalCount = _d.renderTotalCount, totalCount = _d.totalCount, ariaDescribedby = _d["aria-describedby"], ariaLabel = _d["aria-label"], maxHeight = _d.maxHeight;
-        var _e = this.getProps(), selectedItems = _e.selectedItems, width = _e.width, onMouseEnter = _e.onMouseEnter, onMouseLeave = _e.onMouseLeave, menuWidth = _e.menuWidth, menuAlign = _e.menuAlign, renderItem = _e.renderItem;
-        var _f = this.state, activeTokens = _f.activeTokens, inFocus = _f.inFocus, inputValueWidth = _f.inputValueWidth, inputValueHeight = _f.inputValueHeight, inputValue = _f.inputValue, reservedInputValue = _f.reservedInputValue, autocompleteItems = _f.autocompleteItems, loading = _f.loading;
-        var showMenu = this.type !== TokenInputType.WithoutReference &&
-            this.isCursorVisible &&
-            activeTokens.length === 0 &&
-            (this.isInputValueChanged || !hideMenuIfEmptyInputValue);
-        var theme = this.theme;
-        var inputInlineStyles = {
-            // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
-            width: inputValueWidth,
-            height: inputValueHeight,
-            // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
-            caretColor: this.isCursorVisible ? undefined : 'transparent',
-        };
-        var labelClassName = this.cx(this.styles.label(theme), this.getLabelSizeClassName(), (_a = {},
-            _a[this.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error,
-            _a[this.styles.labelDisabled(theme)] = !!disabled,
-            _a[this.styles.labelFocused(theme)] = !!inFocus,
-            _a[this.styles.error(theme)] = !!error,
-            _a[this.styles.warning(theme)] = !!warning,
-            _a));
-        var inputClassName = this.cx(this.styles.input(theme), this.getInputSizeClassName(), (_b = {},
-            _b[this.styles.inputDisabled(theme)] = !!disabled,
-            _b));
-        var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
-        var inputNode = (React.createElement(TokenView, { size: this.size, className: this.cx((_c = {},
-                // input растягивается на всю ширину чтобы placeholder не обрезался
-                _c[this.styles.inputPlaceholderWrapper()] = Boolean(placeholder),
-                _c)), hideCloseButton: Boolean(placeholder) },
-            React.createElement("textarea", { id: this.textareaId, ref: this.inputRef, value: inputValue, style: inputInlineStyles, spellCheck: false, disabled: disabled, className: inputClassName, placeholder: placeholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleChangeInputValue, onKeyDown: this.handleKeyDown, onPaste: this.handleInputPaste, inputMode: inputMode, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })));
-        var inner = (React.createElement(React.Fragment, null,
-            React.createElement(TextWidthHelper, { ref: this.textHelperRef, text: inputValue, theme: this.theme, size: this.size }),
-            this.renderTokensStart(),
-            inputNode,
-            showMenu && (React.createElement(TokenInputMenu, { popupMenuId: this.rootId, ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElementForCursor: this.input, anchorElementRoot: this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: this.selectItem, renderAddButton: this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign, renderTotalCount: renderTotalCount, totalCount: totalCount, size: this.size })),
-            this.renderTokensEnd(),
-            this.isEditingMode ? (React.createElement(TokenView, { size: this.size },
-                React.createElement("span", { className: this.styles.reservedInput(theme) }, reservedInputValue))) : null));
-        var container = maxHeight ? (React.createElement(ScrollContainer, { className: this.styles.inputPlaceholderScrollWrapper(), scrollRef: this.scrollContainerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
+        var _a = this.getProps(), onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+        var showMobilePopup = this.state.showMobilePopup;
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
             React.createElement("div", { "data-tid": TokenInputDataTids.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-                React.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp, 
-                    // Для корректной работы скролла приходится ломать связь label с полем ввода
-                    // Иначе любой клик внутри label вызывает фокус и автоскроллинг к полю ввода
-                    htmlFor: maxHeight ? 'fake-id' : this.textareaId, "aria-controls": this.rootId, "data-tid": TokenInputDataTids.label }, container))));
+                this.renderInlineField(),
+                this.usesMobilePopup && showMobilePopup && this.renderMobileMenu())));
     };
     /**
      * Сбрасывает введённое пользователем значение.
@@ -960,6 +1060,62 @@ var TokenInput = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TokenInput.prototype, "isDelimiterInputEnabled", {
+        get: function () {
+            return this.type !== TokenInputType.WithReference;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TokenInput.prototype.inputValueEndsWithDelimiter = function (value) {
+        return this.getProps().delimiters.some(function (delimiter) { return value.endsWith(delimiter); });
+    };
+    TokenInput.prototype.splitValueByDelimiters = function (value) {
+        var pattern = this.getProps()
+            .delimiters.map(function (delimiter) { return delimiter.replace(/[\\^\-[\]]/g, '\\$&'); })
+            .join('');
+        return value.split(new RegExp("[".concat(pattern, "]+")));
+    };
+    TokenInput.prototype.isDelimiterKeyEvent = function (e, delimiter) {
+        if (delimiter === ',') {
+            return e.key === delimiter || isKeyComma(e) || isCodeComma(e);
+        }
+        return e.key === delimiter;
+    };
+    TokenInput.prototype.tryApplyDelimiterFromInputValue = function (rawValue) {
+        var _this = this;
+        var _a = this.getProps(), delimiters = _a.delimiters, selectedItems = _a.selectedItems, valueToItem = _a.valueToItem, onValueChange = _a.onValueChange;
+        var trailingDelimiter = delimiters.find(function (delimiter) { return rawValue.endsWith(delimiter); });
+        if (!trailingDelimiter) {
+            return false;
+        }
+        var valueWithoutTrailingDelimiter = rawValue.slice(0, rawValue.length - trailingDelimiter.length);
+        if (this.isEditingMode) {
+            if (valueWithoutTrailingDelimiter !== '') {
+                this.dispatch({ type: 'UPDATE_QUERY', payload: valueWithoutTrailingDelimiter }, function () {
+                    _this.finishTokenEdit();
+                });
+            }
+            return true;
+        }
+        if (valueWithoutTrailingDelimiter === '') {
+            this.dispatch({ type: 'CLEAR_INPUT' });
+            this.tryGetItems();
+            return true;
+        }
+        var tokens = this.splitValueByDelimiters(valueWithoutTrailingDelimiter);
+        var items = tokens
+            .filter(Boolean)
+            .map(function (token) { return valueToItem(token); })
+            .filter(function (item) { return item && !_this.hasValueInItems(selectedItems, item); });
+        if (items.length > 0) {
+            onValueChange(selectedItems.concat(items));
+        }
+        this.dispatch({ type: 'CLEAR_INPUT' });
+        this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
+        this.tryGetItems();
+        return true;
+    };
     TokenInput.prototype.moveFocusToLastToken = function () {
         var items = this.getProps().selectedItems;
         if (this.state.inputValue === '' && items && items.length > 0) {
@@ -988,6 +1144,7 @@ var TokenInput = /** @class */ (function (_super) {
         menuAlign: 'cursor',
     };
     TokenInput = TokenInput_1 = __decorate([
+        responsiveLayout,
         withRenderEnvironment,
         rootNode,
         locale('TokenInput', TokenInputLocaleHelper),