@skbkontur/react-ui 6.3.3 → 6.4.0

package/components/TokenInput/TokenInput.js

@@ -77,8 +77,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import lodashIsEqual from 'lodash.isequal';
 import React from 'react';
-import logWarning from 'warning';
+import warning from 'warning';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomComboBoxTypes.js';
 import { PopupIds } from '../../internal/Popup/index.js';
 import { blink } from '../../lib/blink.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
@@ -121,6 +122,7 @@ export var DefaultState = {
     inputValueWidth: 2,
     inputValueHeight: 22,
     showMobilePopup: false,
+    requestStatus: ComboBoxRequestStatus.Unknown,
 };
 export var TokenInputDataTids = {
     root: 'TokenInput__root',
@@ -147,6 +149,8 @@ var TokenInput = /** @class */ (function (_super) {
         _this.wrapper = null;
         _this.scrollContainerRef = React.createRef();
         _this.memoizedTokens = new Map();
+        _this.menuNavigatedByUser = false;
+        _this.requestId = 0;
         _this.renderInlineField = function () {
             return _this.renderTokenInputField({
                 variant: 'inline',
@@ -173,7 +177,7 @@ var TokenInput = /** @class */ (function (_super) {
             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 _g = _this.state, inFocus = _g.inFocus, inputValueWidth = _g.inputValueWidth, inputValueHeight = _g.inputValueHeight, inputValue = _g.inputValue, reservedInputValue = _g.reservedInputValue, loading = _g.loading;
             var theme = _this.theme;
             var inputInlineStyles = {
                 // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
@@ -198,12 +202,12 @@ var TokenInput = /** @class */ (function (_super) {
                     // 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 })));
+                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, "aria-busy": interactive && loading ? 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 })),
+                showMenu && (React.createElement(TokenInputMenu, { popupMenuId: _this.rootId, ref: _this.tokensInputMenuRef, items: _this.getMenuItems(), 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, requestStatus: _this.state.requestStatus, repeatRequest: _this.repeatRequest })),
                 _this.renderTokensEnd(interactive),
                 _this.isEditingMode ? (React.createElement(TokenView, { size: _this.size },
                     React.createElement("span", { className: _this.styles.reservedInput(theme) }, reservedInputValue))) : null));
@@ -219,11 +223,12 @@ var TokenInput = /** @class */ (function (_super) {
         _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;
+            var loading = _this.state.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({
+                }, items: _this.getMenuItems(), loading: loading, opened: true, maxMenuHeight: maxMenuHeight, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: _this.selectItem, renderAddButton: _this.renderAddButton, renderTotalCount: renderTotalCount, totalCount: totalCount, size: _this.size, requestStatus: _this.state.requestStatus, repeatRequest: _this.repeatRequest, mobileFooterComponent: _this.renderMobilePopupFooter(), onCloseRequest: function () {
+                    _this.cancelRequest();
+                    _this.dispatch({
                         type: 'SET_CLOSE_MOBILE_POPUP',
                     });
                 } }));
@@ -298,6 +303,7 @@ var TokenInput = /** @class */ (function (_super) {
                 _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
             }
             else {
+                _this.cancelRequest();
                 _this.dispatch({ type: 'BLUR' });
                 _this.getProps().onBlur(event);
             }
@@ -317,6 +323,9 @@ var TokenInput = /** @class */ (function (_super) {
                 _this.finishTokenEdit();
                 return;
             }
+            if (_this.state.loading || _this.state.requestStatus === ComboBoxRequestStatus.Failed) {
+                return;
+            }
             // чекаем автокомплит на совпадение с введенным значением в инпут
             if (autocompleteItems && autocompleteItems.length === 1) {
                 var item = autocompleteItems[0];
@@ -377,56 +386,91 @@ var TokenInput = /** @class */ (function (_super) {
             event.clipboardData.setData('text/plain', tokens.join(delimiters[0]));
         };
         _this.handleInputPaste = function (event) {
+            var _a, _b;
             if (_this.type === TokenInputType.WithReference || !event.clipboardData) {
                 return;
             }
             var paste = event.clipboardData.getData('text');
-            var _a = _this.getProps(), delimiters = _a.delimiters, selectedItems = _a.selectedItems, valueToItem = _a.valueToItem, onValueChange = _a.onValueChange;
+            var _c = _this.getProps(), delimiters = _c.delimiters, selectedItems = _c.selectedItems, onValueChange = _c.onValueChange;
             if (delimiters.some(function (delimiter) { return paste.includes(delimiter); })) {
                 event.preventDefault();
                 event.stopPropagation();
                 var tokens = _this.splitValueByDelimiters(paste.trim());
-                var items = tokens
-                    .filter(Boolean)
-                    .map(function (token) { return valueToItem(token); })
-                    .filter(function (item) { return item && !_this.hasValueInItems(selectedItems, item); });
-                var newItems = selectedItems.concat(items);
-                onValueChange(newItems);
+                var _d = _this.createItemsFromTokens(tokens, selectedItems), items = _d.items, remainder_1 = _d.remainder;
+                if (items.length > 0) {
+                    onValueChange(selectedItems.concat(items));
+                }
+                _this.menuNavigatedByUser = false;
                 _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
-                _this.tryGetItems();
+                if (remainder_1) {
+                    _this.blink();
+                    _this.dispatch({ type: 'UPDATE_QUERY', payload: remainder_1 }, function () { return _this.tryGetItems(remainder_1); });
+                    (_b = (_a = _this.props).onInputValueChange) === null || _b === void 0 ? void 0 : _b.call(_a, remainder_1);
+                }
+                else {
+                    _this.tryGetItems();
+                }
             }
         };
+        _this.repeatRequest = function () {
+            var _a;
+            _this.tryGetItems(_this.state.inputValue);
+            (_a = _this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        _this.cancelRequest = function () {
+            _this.requestId += 1;
+        };
         _this.tryGetItems = function () {
             var args_1 = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 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, highlightIndex_1, applyMenuHighlight;
+                var expectingId, autocompleteItems, _a, _b, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, autocompleteItemsUniqueSimple, editingItem, selectItemIndex, highlightIndex, applyMenuHighlight;
                 var _this = this;
-                var _b, _c;
+                var _c, _d, _e, _f;
                 if (query === void 0) { query = ''; }
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
-                            if (!(this.props.getItems && (this.isInputValueChanged || !this.props.hideMenuIfEmptyInputValue))) return [3 /*break*/, 2];
+                            if (!this.props.getItems || (!this.isInputValueChanged && this.props.hideMenuIfEmptyInputValue)) {
+                                this.cancelRequest();
+                                return [2 /*return*/];
+                            }
+                            this.requestId += 1;
+                            expectingId = this.requestId;
                             this.dispatch({ type: 'SET_LOADING', payload: true });
-                            return [4 /*yield*/, this.props.getItems(query)];
+                            _g.label = 1;
                         case 1:
-                            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); };
-                            isEditingItem_1 = function (item) {
-                                var editingItem = selectedItems_1[_this.state.editingTokenIndex];
+                            _g.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.props.getItems(query)];
+                        case 2:
+                            autocompleteItems = _g.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            _a = _g.sent();
+                            if (expectingId !== this.requestId) {
+                                return [2 /*return*/];
+                            }
+                            this.dispatch({ type: 'SET_REQUEST_FAILURE' });
+                            (_d = (_c = this.globalObject).requestAnimationFrame) === null || _d === void 0 ? void 0 : _d.call(_c, function () { var _a; return (_a = _this.menuRef) === null || _a === void 0 ? void 0 : _a.highlightItem(0); });
+                            return [2 /*return*/];
+                        case 4:
+                            if (expectingId !== this.requestId) {
+                                return [2 /*return*/];
+                            }
+                            _b = this.getProps(), selectedItems = _b.selectedItems, valueToItem = _b.valueToItem, valueToString = _b.valueToString;
+                            isSelectedItem = function (item) { return _this.hasValueInItems(selectedItems, item); };
+                            isEditingItem = function (item) {
+                                var editingItem = selectedItems[_this.state.editingTokenIndex];
                                 return !!editingItem && _this.isEqual(item, editingItem);
                             };
                             autocompleteItemsUnique = autocompleteItems.filter(function (item) {
-                                return isSimpleItem(item) ? !isSelectedItem_1(item) || isEditingItem_1(item) : true;
+                                return isSimpleItem(item) ? !isSelectedItem(item) || isEditingItem(item) : true;
                             });
                             autocompleteItemsUniqueSimple = autocompleteItemsUnique.filter(isSimpleItem);
                             if (this.isEditingMode) {
-                                editingItem = selectedItems_1[this.state.editingTokenIndex];
+                                editingItem = selectedItems[this.state.editingTokenIndex];
                                 if (this.isEqual(editingItem, valueToItem(this.state.inputValue)) &&
                                     !this.hasValueInItems(autocompleteItemsUniqueSimple, editingItem)) {
                                     autocompleteItemsUnique.unshift(editingItem);
@@ -438,12 +482,22 @@ var TokenInput = /** @class */ (function (_super) {
                                     _this.highlightMenuItem();
                                 });
                             }
-                            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*/];
+                            else {
+                                this.dispatch({ type: 'SET_LOADING', payload: false });
+                            }
+                            selectItemIndex = autocompleteItemsUniqueSimple.findIndex(function (item) { return valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase(); });
+                            highlightIndex = null;
+                            if (selectItemIndex >= 0) {
+                                highlightIndex = selectItemIndex;
+                            }
+                            else {
+                                highlightIndex = 0;
+                            }
+                            if (highlightIndex !== null) {
+                                applyMenuHighlight = function () { var _a; return (_a = _this.menuRef) === null || _a === void 0 ? void 0 : _a.highlightItem(highlightIndex); };
+                                (_f = (_e = this.globalObject).requestAnimationFrame) === null || _f === void 0 ? void 0 : _f.call(_e, applyMenuHighlight);
+                            }
+                            return [2 /*return*/];
                     }
                 });
             });
@@ -478,11 +532,20 @@ var TokenInput = /** @class */ (function (_super) {
                 }
             }
             var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
-            var canSetValueToInput = _this.showAddItemHint || ((_b = (_a = _this.state.autocompleteItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+            var canSetValueToInput = _this.showAddItemHint ||
+                ((_b = (_a = _this.state.autocompleteItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 ||
+                _this.state.requestStatus === ComboBoxRequestStatus.Failed;
             switch (true) {
                 case isKeyEnter(e):
-                    if (canSetValueToInput && _this.menuRef) {
-                        _this.menuRef.enter(e);
+                    if (_this.type !== TokenInputType.WithoutReference) {
+                        if (!_this.menuNavigatedByUser &&
+                            !_this.hasExactAutocompleteMatch(_this.state.inputValue) &&
+                            _this.rejectIfInvalidToken(_this.state.inputValue)) {
+                            // free-text rejected: blink already done, do not select menu item
+                        }
+                        else if (canSetValueToInput && _this.menuRef) {
+                            _this.menuRef.enter(e);
+                        }
                     }
                     // don't allow textarea
                     // became multiline
@@ -491,6 +554,7 @@ var TokenInput = /** @class */ (function (_super) {
                 case isKeyArrowVertical(e):
                     e.preventDefault();
                     if (_this.menuRef) {
+                        _this.menuNavigatedByUser = true;
                         if (isKeyArrowUp(e)) {
                             _this.menuRef.up();
                         }
@@ -606,7 +670,14 @@ var TokenInput = /** @class */ (function (_super) {
             _this.getProps().onValueChange(items);
         };
         _this.handleAddItem = function () {
-            var item = _this.getProps().valueToItem(_this.state.inputValue);
+            var inputValue = _this.state.inputValue;
+            if (!inputValue) {
+                return;
+            }
+            if (_this.rejectIfInvalidToken(inputValue)) {
+                return;
+            }
+            var item = _this.getProps().valueToItem(inputValue);
             if (item) {
                 _this.selectItem(item);
             }
@@ -660,10 +731,15 @@ var TokenInput = /** @class */ (function (_super) {
             _this.tryGetItems();
         };
         _this.finishTokenEdit = function () {
-            var _a;
-            var _b = _this.getProps(), selectedItems = _b.selectedItems, valueToString = _b.valueToString;
-            var _c = _this.state, editingTokenIndex = _c.editingTokenIndex, inputValue = _c.inputValue, reservedInputValue = _c.reservedInputValue, autocompleteItems = _c.autocompleteItems;
-            var editedItem = (_a = autocompleteItems === null || autocompleteItems === void 0 ? void 0 : autocompleteItems.find(function (item) { return valueToString(item) === inputValue; })) !== null && _a !== void 0 ? _a : _this.getProps().valueToItem(inputValue);
+            var _a = _this.getProps(), selectedItems = _a.selectedItems, valueToString = _a.valueToString;
+            var _b = _this.state, editingTokenIndex = _b.editingTokenIndex, inputValue = _b.inputValue, reservedInputValue = _b.reservedInputValue, autocompleteItems = _b.autocompleteItems;
+            var autocompleteMatch = autocompleteItems === null || autocompleteItems === void 0 ? void 0 : autocompleteItems.filter(isSimpleItem).find(function (item) { return valueToString(item) === inputValue; });
+            var editedItem = autocompleteMatch !== null && autocompleteMatch !== void 0 ? autocompleteMatch : _this.getProps().valueToItem(inputValue);
+            if (_this.isInputValueChanged && !autocompleteMatch) {
+                if (!inputValue || _this.rejectIfInvalidToken(inputValue)) {
+                    return;
+                }
+            }
             var newItems = selectedItems.concat([]);
             if (!_this.hasValueInItems(selectedItems, editedItem)) {
                 newItems.splice.apply(newItems, __spreadArray([editingTokenIndex, 1], (_this.isInputValueChanged ? [editedItem] : []), false));
@@ -701,11 +777,17 @@ var TokenInput = /** @class */ (function (_super) {
                 return;
             }
             if (returnedValue) {
+                var returnedInputValue = _this.getProps().valueToString(returnedValue);
+                if (_this.rejectIfInvalidToken(returnedInputValue)) {
+                    return;
+                }
                 _this.selectItem(returnedValue);
             }
         };
         _this.handleChangeInputValue = function (event) {
+            var _a, _b;
             _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' });
+            _this.menuNavigatedByUser = false;
             var query = event.target.value.trimLeft();
             if (query.endsWith(' ')) {
                 query = query.trimRight() + ' ';
@@ -714,7 +796,9 @@ var TokenInput = /** @class */ (function (_super) {
                 _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
             }
             if (_this.isDelimiterInputEnabled && _this.inputValueEndsWithDelimiter(query)) {
-                if (_this.tryApplyDelimiterFromInputValue(query)) {
+                var delimiterResult = _this.tryApplyDelimiterFromInputValue(query);
+                if (delimiterResult) {
+                    (_b = (_a = _this.props).onInputValueChange) === null || _b === void 0 ? void 0 : _b.call(_a, delimiterResult.nextInputValue);
                     return;
                 }
             }
@@ -792,11 +876,9 @@ var TokenInput = /** @class */ (function (_super) {
             if (_this.props.renderAddButton) {
                 return _this.props.renderAddButton(value, _this.handleAddItem);
             }
-            var _a = _this.locale, addButtonComment = _a.addButtonComment, addButtonTitle = _a.addButtonTitle;
-            return (React.createElement(MenuItem, { onClick: _this.handleAddItem, comment: addButtonComment, key: "renderAddButton" },
-                addButtonTitle,
-                " ",
-                value));
+            var _a = _this.locale, addButtonComment = _a.addButtonComment, addButtonInvalidComment = _a.addButtonInvalidComment, addButtonTitle = _a.addButtonTitle;
+            var isInvalid = !_this.canAcceptInputAsToken(value);
+            return (React.createElement(MenuItem, { onClick: _this.handleAddItem, comment: isInvalid ? addButtonInvalidComment : addButtonComment, disabled: isInvalid, key: "renderAddButton" }, "".concat(addButtonTitle, " \u00AB").concat(value, "\u00BB")));
         };
         _this.isTokenDisabled = function (itemIndex) {
             var renderedToken;
@@ -898,6 +980,7 @@ var TokenInput = /** @class */ (function (_super) {
     };
     TokenInput.prototype.componentWillUnmount = function () {
         var _a;
+        this.cancelRequest();
         (_a = this.globalObject.document) === null || _a === void 0 ? void 0 : _a.removeEventListener('copy', this.handleCopy);
     };
     /** Программно устанавливает фокус на поле.
@@ -953,7 +1036,7 @@ var TokenInput = /** @class */ (function (_super) {
     };
     TokenInput.prototype.renderMain = function () {
         if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
-            logWarning(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");
+            warning(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");
         }
         var _a = this.getProps(), onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
         var showMobilePopup = this.state.showMobilePopup;
@@ -1019,6 +1102,12 @@ var TokenInput = /** @class */ (function (_super) {
     TokenInput.prototype.isCursorVisibleForState = function (state) {
         return state.inFocus && (this.isInputValueChanged || state.activeTokens.length === 0);
     };
+    TokenInput.prototype.getMenuItems = function () {
+        if (this.state.requestStatus === ComboBoxRequestStatus.Failed) {
+            return null;
+        }
+        return this.state.autocompleteItems;
+    };
     TokenInput.prototype.updateInputTextWidth = function () {
         if (this.textHelper) {
             // в IE текст иногда не помещается в input
@@ -1081,9 +1170,56 @@ var TokenInput = /** @class */ (function (_super) {
         }
         return e.key === delimiter;
     };
+    TokenInput.prototype.canAcceptInputAsToken = function (value) {
+        if (!value) {
+            return false;
+        }
+        var isTokenValid = this.props.isTokenValid;
+        if (!isTokenValid) {
+            return true;
+        }
+        return isTokenValid(value);
+    };
+    TokenInput.prototype.rejectIfInvalidToken = function (value) {
+        if (!value || !this.props.isTokenValid) {
+            return false;
+        }
+        if (this.props.isTokenValid(value)) {
+            return false;
+        }
+        this.blink();
+        return true;
+    };
+    TokenInput.prototype.hasExactAutocompleteMatch = function (value) {
+        var _a, _b;
+        var valueToString = this.getProps().valueToString;
+        return (_b = (_a = this.state.autocompleteItems) === null || _a === void 0 ? void 0 : _a.filter(isSimpleItem).some(function (item) { return valueToString(item) === value; })) !== null && _b !== void 0 ? _b : false;
+    };
+    TokenInput.prototype.createItemsFromTokens = function (tokens, selectedItems) {
+        var _a;
+        var _b = this.getProps(), valueToItem = _b.valueToItem, delimiters = _b.delimiters;
+        var items = [];
+        var remainder = '';
+        var joinDelimiter = (_a = delimiters[0]) !== null && _a !== void 0 ? _a : ',';
+        for (var index = 0; index < tokens.length; index++) {
+            var token = tokens[index];
+            if (!token) {
+                continue;
+            }
+            if (!this.canAcceptInputAsToken(token)) {
+                remainder = tokens.slice(index).filter(Boolean).join(joinDelimiter);
+                break;
+            }
+            var item = valueToItem(token);
+            if (item && !this.hasValueInItems(selectedItems.concat(items), item)) {
+                items.push(item);
+            }
+        }
+        return { items: items, remainder: remainder };
+    };
     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 _a = this.getProps(), delimiters = _a.delimiters, selectedItems = _a.selectedItems, onValueChange = _a.onValueChange;
         var trailingDelimiter = delimiters.find(function (delimiter) { return rawValue.endsWith(delimiter); });
         if (!trailingDelimiter) {
             return false;
@@ -1091,29 +1227,36 @@ var TokenInput = /** @class */ (function (_super) {
         var valueWithoutTrailingDelimiter = rawValue.slice(0, rawValue.length - trailingDelimiter.length);
         if (this.isEditingMode) {
             if (valueWithoutTrailingDelimiter !== '') {
+                if (this.rejectIfInvalidToken(valueWithoutTrailingDelimiter)) {
+                    this.dispatch({ type: 'UPDATE_QUERY', payload: valueWithoutTrailingDelimiter });
+                    return { nextInputValue: valueWithoutTrailingDelimiter };
+                }
                 this.dispatch({ type: 'UPDATE_QUERY', payload: valueWithoutTrailingDelimiter }, function () {
                     _this.finishTokenEdit();
                 });
+                return { nextInputValue: valueWithoutTrailingDelimiter };
             }
-            return true;
+            return { nextInputValue: this.state.inputValue };
         }
         if (valueWithoutTrailingDelimiter === '') {
             this.dispatch({ type: 'CLEAR_INPUT' });
             this.tryGetItems();
-            return true;
+            return { nextInputValue: '' };
         }
         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); });
+        var _b = this.createItemsFromTokens(tokens, selectedItems), items = _b.items, remainder = _b.remainder;
         if (items.length > 0) {
             onValueChange(selectedItems.concat(items));
         }
+        if (remainder) {
+            this.blink();
+            this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
+            this.dispatch({ type: 'UPDATE_QUERY', payload: remainder }, function () { return _this.tryGetItems(remainder); });
+            return { nextInputValue: remainder };
+        }
         this.dispatch({ type: 'CLEAR_INPUT' });
-        this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
         this.tryGetItems();
-        return true;
+        return { nextInputValue: '' };
     };
     TokenInput.prototype.moveFocusToLastToken = function () {
         var items = this.getProps().selectedItems;