@skbkontur/react-ui 6.3.4 → 6.4.0

package/components/SidePage/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageHeader.js","sourceRoot":"","sources":["SidePageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageCloseButton } from './SidePageCloseButton.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет заголовок сайдпейджа при скролле длинной контент-зоны.\n   */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать разделитель ModalSeparator. */\n  hasSeparator?: boolean;\n\n  /**\n   * Обрезает длинный заголовок. Работает, если включен проп `sticky`.\n   * @default false.\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isNativeStuck: boolean;\n  isReadyToStuck: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа, состоит из заголовка и крестика закрытия.\n *\n * @visibleName SidePage.Header\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isNativeStuck: true,\n    isReadyToStuck: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private sticky: Sticky | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount = () => {\n    getRootNode(this)?.parentNode?.addEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    getRootNode(this)?.parentNode?.removeEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  private throttleHandleScroll = throttle((event: Event) => {\n    const target = event.currentTarget as HTMLElement;\n    if (target && typeof target.scrollTop === 'number') {\n      this.setState({ isNativeStuck: target.scrollTop === 0 });\n    }\n    this.update();\n  }, 5);\n\n  public update = (): void => {\n    this.sticky?.reflow();\n  };\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp(): boolean {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp();\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageHeaderDataTids.root}\n          className={this.cx(this.styles.headerWrapper(), {\n            [this.styles.headerNativeStuck(this.theme)]: this.state.isNativeStuck,\n          })}\n        >\n          {!this.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        <div\n          className={this.cx(this.styles.header(this.theme), {\n            [this.styles.headerFixed(this.theme)]: fixed,\n            [this.styles.mobileHeader(this.theme)]: this.isMobileLayout,\n          })}\n        >\n          {this.renderClose(fixed)}\n          <div\n            className={this.cx(this.styles.title(this.theme), {\n              [this.styles.mobileTitle(this.theme)]: this.isMobileLayout,\n              [this.styles.titleCut()]: fixed && this.props.cutTitleOnStuck,\n            })}\n          >\n            {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n          </div>\n        </div>\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={this.cx(this.styles.wrapperClose(this.theme), {\n          [this.styles.wrapperCloseFixed(this.theme)]: fixed,\n          [this.styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {!this.isMobileLayout ? (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            <SidePageCloseButton isHeaderFixed={fixed} />\n          </Sticky>\n        ) : (\n          <SidePageCloseButton isHeaderFixed={fixed} isMobile={this.isMobileLayout} />\n        )}\n      </div>\n    );\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}
+{"version":3,"file":"SidePageHeader.js","sourceRoot":"","sources":["SidePageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageCloseButton } from './SidePageCloseButton.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет заголовок сайдпейджа при скролле длинной контент-зоны.\n   */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать разделитель ModalSeparator. */\n  hasSeparator?: boolean;\n\n  /**\n   * Обрезает длинный заголовок. Работает, если включен проп `sticky`.\n   * @default false.\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isNativeStuck: boolean;\n  isReadyToStuck: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа, состоит из заголовка и крестика закрытия.\n *\n * @visibleName SidePage.Header\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isNativeStuck: true,\n    isReadyToStuck: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private sticky: Sticky | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount = () => {\n    getRootNode(this)?.parentNode?.addEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    getRootNode(this)?.parentNode?.removeEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  private throttleHandleScroll = throttle((event: Event) => {\n    const target = event.currentTarget as HTMLElement;\n    if (target && typeof target.scrollTop === 'number') {\n      this.setState({ isNativeStuck: target.scrollTop === 0 });\n    }\n    this.update();\n  }, 5);\n\n  public update = (): void => {\n    this.sticky?.reflow();\n  };\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp(): boolean {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp();\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageHeaderDataTids.root}\n          className={this.cx(this.styles.headerWrapper(), {\n            [this.styles.headerNativeStuck(this.theme)]: this.state.isNativeStuck,\n          })}\n        >\n          {!this.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        <div\n          className={this.cx(this.styles.header(this.theme), {\n            [this.styles.headerFixed(this.theme)]: fixed,\n            [this.styles.mobileHeader(this.theme)]: this.isMobileLayout,\n          })}\n        >\n          {this.renderClose(fixed)}\n          <div\n            className={this.cx(this.styles.title(this.theme), {\n              [this.styles.mobileTitle(this.theme)]: this.isMobileLayout,\n              [this.styles.titleCut()]: fixed && this.props.cutTitleOnStuck,\n            })}\n          >\n            {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n          </div>\n        </div>\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const themeGTE6_4 = isThemeGTE(this.theme, '6.4');\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={this.cx(this.styles.wrapperClose(this.theme), {\n          [this.styles.wrapperClose6_4()]: themeGTE6_4,\n          [this.styles.wrapperCloseFixed(this.theme)]: fixed,\n          [this.styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {!this.isMobileLayout ? (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            <SidePageCloseButton isHeaderFixed={fixed} />\n          </Sticky>\n        ) : (\n          <SidePageCloseButton isHeaderFixed={fixed} isMobile={this.isMobileLayout} />\n        )}\n      </div>\n    );\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}

package/components/TokenInput/TokenInput.d.ts

@@ -4,6 +4,7 @@ import type { CommonProps } from '../../internal/CommonWrapper/index.js';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
 import type { MenuItemState } from '../MenuItem/index.js';
 import type { TokenProps, TokenSize } from '../Token/index.js';
+import type { TokenInputInternalState } from './TokenInputReducer.js';
 export declare enum TokenInputType {
     WithReference = 0,
     WithoutReference = 1,
@@ -96,6 +97,9 @@ export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'a
      * Если при потере фокуса в выпадающем списке будет только один элемент и результат `valueToString` с этим элементом будет совпадать со значением в текстовом поле, то сработает `onValueChange` со значением данного элемента.
      * Сама функция также может вернуть значение, не равное undefined, с которым будет вызван `onValueChange`. Если возвращаемое значение будет равно null, то сработает очистка текущего значения поля, а в режиме редактирования токен будет удален. */
     onUnexpectedInput?: (value: string) => void | null | undefined | T;
+    /** Задаёт функцию, которая проверяет, можно ли создать токен из свободного ввода.
+     * Если вернуть `false`, токен не создаётся и поле мигает. Не применяется при выборе из справочника. */
+    isTokenValid?: (value: string) => boolean;
     /** Задаёт типы вводимых данных. Передаёт браузеру информацию о том, какой набор символов показать при вводе данных в конкретное поле на устройствах с экранной клавиатурой. */
     inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
     /**
@@ -119,19 +123,7 @@ export interface TokenInputState<T> {
     showMobilePopup?: boolean;
 }
 export type TokenInputExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;
-export declare const DefaultState: {
-    inputValue: string;
-    reservedInputValue: undefined;
-    autocompleteItems: undefined;
-    activeTokens: never[];
-    editingTokenIndex: number;
-    inFocus: boolean;
-    loading: boolean;
-    preventBlur: boolean;
-    inputValueWidth: number;
-    inputValueHeight: number;
-    showMobilePopup: boolean;
-};
+export declare const DefaultState: TokenInputInternalState<any>;
 export declare const TokenInputDataTids: {
     readonly root: "TokenInput__root";
     readonly tokenInputMenu: "TokenInputMenu__root";
@@ -140,14 +132,14 @@ export declare const TokenInputDataTids: {
 type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'itemToId' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
 /** Поле с токенами — это поле ввода со списком подсказок. Значения в поле отображаются в виде отдельных токенов.
  */
-export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
+export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputInternalState<T>> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static defaultProps: DefaultProps<any>;
     private getDelimiters;
     private getProps;
     private get textareaId();
-    state: TokenInputState<T>;
+    state: TokenInputInternalState<T>;
     private readonly _textareaId;
     private rootId;
     private readonly locale;
@@ -166,8 +158,10 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     getRootNode: TGetRootNode;
     private setRootNode;
     private memoizedTokens;
+    private menuNavigatedByUser;
+    private requestId;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
+    componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputInternalState<T>): void;
     private get usesMobilePopup();
     private isInlineInteractive;
     componentWillUnmount(): void;
@@ -211,6 +205,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private textHelperRef;
     private inlineWrapperRef;
     private mobileWrapperRef;
+    private getMenuItems;
     private dispatch;
     private updateInputTextWidth;
     private handleInputFocus;
@@ -227,8 +222,14 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private inputValueEndsWithDelimiter;
     private splitValueByDelimiters;
     private isDelimiterKeyEvent;
+    private canAcceptInputAsToken;
+    private rejectIfInvalidToken;
+    private hasExactAutocompleteMatch;
+    private createItemsFromTokens;
     private tryApplyDelimiterFromInputValue;
     private handleInputPaste;
+    private repeatRequest;
+    private cancelRequest;
     private tryGetItems;
     private handleKeyDown;
     private handleInputKeyDown;

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;