@skbkontur/react-ui 5.4.3 → 5.4.5

package/cjs/components/MenuItem/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_Mixins","_MenuItem","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_templateObject19","_templateObject20","_templateObject21","getMenuItemPaddings","exports","_ref","menuItemPaddingX","menuItemPaddingY","paddingX","paddingY","styles","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","resetButton","menuItemDisplay","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootSmall","menuItemSizeMixin","menuItemPaddingXSmall","menuItemPaddingYSmall","menuItemLineHeightSmall","menuItemFontSizeSmall","rootMedium","menuItemPaddingXMedium","menuItemPaddingYMedium","menuItemLineHeightMedium","menuItemFontSizeMedium","rootLarge","menuItemPaddingXLarge","menuItemPaddingYLarge","menuItemLineHeightLarge","menuItemFontSizeLarge","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","nonSelectable","link","menuItemLinkColor","loose","withIconSmall","withIconSizeMixin","menuItemPaddingForIconSmall","withIconMedium","menuItemPaddingForIconMedium","withIconLarge","menuItemPaddingForIconLarge","comment","menuItemCommentColor","menuItemCommentOpacity","commentHover","menuItemCommentColorHover","icon","iconSmall","iconSizeMixin","menuItemIconWidthSmall","iconMedium","menuItemIconWidthMedium","iconLarge","menuItemIconWidthLarge","mobileContentWithIcon"],"sources":["MenuItem.styles.ts"],"sourcesContent":["import type { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nimport { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from './MenuItem.mixins';\n\nexport const getMenuItemPaddings = ({\n  menuItemPaddingX,\n  menuItemPaddingY,\n}: Record<'menuItemPaddingX' | 'menuItemPaddingY', string>) => {\n  const paddingX = menuItemPaddingX;\n  const paddingY = menuItemPaddingY;\n\n  return { paddingX, paddingY };\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: ${t.menuItemDisplay};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n\n      &:nth-last-of-type(n + 2) {\n        margin-bottom: ${t.menuItemGap};\n      }\n    `;\n  },\n\n  rootSmall(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXSmall,\n        t.menuItemPaddingYSmall,\n        t.menuItemLineHeightSmall,\n        t.menuItemFontSizeSmall,\n      )};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXMedium,\n        t.menuItemPaddingYMedium,\n        t.menuItemLineHeightMedium,\n        t.menuItemFontSizeMedium,\n      )};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXLarge,\n        t.menuItemPaddingYLarge,\n        t.menuItemLineHeightLarge,\n        t.menuItemFontSizeLarge,\n      )};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuItemFontSizeMobile};\n      line-height: ${t.menuItemLineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: ${t.menuItemDisabledBg};\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  nonSelectable() {\n    return css`\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIconSmall(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconSmall)}\n    `;\n  },\n  withIconMedium(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconMedium)}\n    `;\n  },\n  withIconLarge(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconLarge)}\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      opacity: ${t.menuItemCommentOpacity};\n      white-space: normal;\n      padding-top: 4px;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon() {\n    return css`\n      display: inline-block;\n      position: absolute;\n      transform: translateY(0px); // icon shifts one pixel up in firefox on medium size without this property\n    `;\n  },\n  iconSmall(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall)};\n    `;\n  },\n  iconMedium(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium)};\n    `;\n  },\n  iconLarge(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge)};\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Mixins","_MenuItem","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_templateObject19","_templateObject20","_templateObject21","getMenuItemPaddings","exports","_ref","menuItemPaddingX","menuItemPaddingY","paddingX","paddingY","styles","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","resetButton","menuItemDisplay","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootSmall","menuItemSizeMixin","menuItemPaddingXSmall","menuItemPaddingYSmall","menuItemLineHeightSmall","menuItemFontSizeSmall","rootMedium","menuItemPaddingXMedium","menuItemPaddingYMedium","menuItemLineHeightMedium","menuItemFontSizeMedium","rootLarge","menuItemPaddingXLarge","menuItemPaddingYLarge","menuItemLineHeightLarge","menuItemFontSizeLarge","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","nonSelectable","link","menuItemLinkColor","loose","withIconSmall","withIconSizeMixin","menuItemPaddingForIconSmall","withIconMedium","menuItemPaddingForIconMedium","withIconLarge","menuItemPaddingForIconLarge","comment","menuItemCommentColor","menuItemCommentOpacity","commentHover","menuItemCommentColorHover","menuItemCommentOpacityHover","icon","iconSmall","iconSizeMixin","menuItemIconWidthSmall","iconMedium","menuItemIconWidthMedium","iconLarge","menuItemIconWidthLarge","mobileContentWithIcon"],"sources":["MenuItem.styles.ts"],"sourcesContent":["import type { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nimport { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from './MenuItem.mixins';\n\nexport const getMenuItemPaddings = ({\n  menuItemPaddingX,\n  menuItemPaddingY,\n}: Record<'menuItemPaddingX' | 'menuItemPaddingY', string>) => {\n  const paddingX = menuItemPaddingX;\n  const paddingY = menuItemPaddingY;\n\n  return { paddingX, paddingY };\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: ${t.menuItemDisplay};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n\n      &:nth-last-of-type(n + 2) {\n        margin-bottom: ${t.menuItemGap};\n      }\n    `;\n  },\n\n  rootSmall(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXSmall,\n        t.menuItemPaddingYSmall,\n        t.menuItemLineHeightSmall,\n        t.menuItemFontSizeSmall,\n      )};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXMedium,\n        t.menuItemPaddingYMedium,\n        t.menuItemLineHeightMedium,\n        t.menuItemFontSizeMedium,\n      )};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXLarge,\n        t.menuItemPaddingYLarge,\n        t.menuItemLineHeightLarge,\n        t.menuItemFontSizeLarge,\n      )};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuItemFontSizeMobile};\n      line-height: ${t.menuItemLineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: ${t.menuItemDisabledBg};\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  nonSelectable() {\n    return css`\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIconSmall(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconSmall)}\n    `;\n  },\n  withIconMedium(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconMedium)}\n    `;\n  },\n  withIconLarge(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconLarge)}\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      opacity: ${t.menuItemCommentOpacity};\n      white-space: normal;\n      padding-top: 4px;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: ${t.menuItemCommentOpacityHover};\n    `;\n  },\n  icon() {\n    return css`\n      display: inline-block;\n      position: absolute;\n      transform: translateY(0px); // icon shifts one pixel up in firefox on medium size without this property\n    `;\n  },\n  iconSmall(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall)};\n    `;\n  },\n  iconMedium(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium)};\n    `;\n  },\n  iconLarge(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge)};\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/TokenInput/TokenInput.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes, FocusEventHandler, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import type { AriaAttributes, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { TokenProps, TokenSize } from '../Token';
 import type { MenuItemState } from '../MenuItem';
@@ -28,6 +28,8 @@ export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'a
     /** Задает HTML-событие `onblur`.
      * @ignore */
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /** Задает HTML-событие `onkeydown`. */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     /** Устанавливает фокус на контроле после окончания загрузки страницы. */
     autoFocus?: boolean;
     /** Задает размер контрола. */
@@ -63,9 +65,11 @@ export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'a
     /** Задает функцию, которая отображает заданное содержимое при пустом результате поиска. Не работает, если рендерится `AddButton`. */
     renderNotFound?: () => React.ReactNode;
     /** Преобразует значение в элемент списка. */
-    valueToItem?: (item: string) => T;
-    /** Определяет уникальный ключ по элементу. */
+    valueToItem?: (value: string) => T;
+    /** @deprecated Используйте `itemToId` вместо `toKey`. */
     toKey?: (item: T) => string | number | undefined;
+    /** Задает функцию сравнения полученных результатов с value. */
+    itemToId?: (item: T) => string | number | undefined;
     /** Задает текст, который отображается если не введено никакое значение. */
     placeholder?: string;
     /** Задает символы, которые разделяют введённый текст на токены. */
@@ -129,7 +133,7 @@ export declare const TokenInputDataTids: {
     readonly tokenInputMenu: "TokenInputMenu__root";
     readonly label: "TokenInput__label";
 };
-type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
+type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'itemToId' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
 /**
  * Поле с токенами `TokenInput` — это поле ввода со списком подсказок.
  *
@@ -167,6 +171,10 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
      * @public
      */
     blur(): void;
+    /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
+     * @public
+     */
+    blink(): void;
     render(): React.JSX.Element;
     private getLabelSizeClassName;
     private getInputSizeClassName;
@@ -176,6 +184,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
      * @public
      */
     reset(): void;
+    private isEqual;
     private hasValueInItems;
     private get showAddItemHint();
     private get type();

package/cjs/components/TokenInput/TokenInput.js

@@ -8,6 +8,7 @@
 
 
 
+
 var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
 var _globalObject = require("@skbkontur/global-object");
@@ -49,6 +50,7 @@ var _TokenView = require("../Token/TokenView");
 var _featureFlagsContext = require("../../lib/featureFlagsContext");
 var _SizeDecorator = require("../../lib/size/SizeDecorator");
 
+var _blink2 = require("../../lib/blink");
 
 
 var _locale = require("./locale");
@@ -199,6 +201,12 @@ TokenInputType = exports.TokenInputType = /*#__PURE__*/function (TokenInputType)
 
 
 
+
+
+
+
+
+
 
 
 
@@ -244,6 +252,7 @@ var TokenInputDataTids = exports.TokenInputDataTids = {
 
 
 
+
 
 
 var defaultToKey = function defaultToKey(item) {return item.toString();};
@@ -313,6 +322,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
+
 
 
     state = DefaultState;_this.
@@ -565,15 +575,27 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
 
+
+
+
+
+
+
+
+
+    isEqual = function (itemA, itemB) {
+      var _this$getProps = _this.getProps(),itemToId = _this$getProps.itemToId;
+      return (0, _lodash.default)(itemToId(itemA), itemToId(itemB));
+    };_this.
 
     hasValueInItems = function (items, value) {
+      var _this$getProps2 = _this.getProps(),valueToString = _this$getProps2.valueToString;
       if (typeof value === 'string') {
-        return items.includes(value);
+        return items.map(function (item) {return valueToString(item);}).includes(value);
       }
-      // todo: как то не очень
-      return items.some(function (item) {return (0, _lodash.default)(item, value);});
-    };_this.
 
+      return items.some(function (item) {return _this.isEqual(item, value);});
+    };_this.
 
 
 
@@ -746,7 +768,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
         return;
       }
       event.preventDefault();
-      var _this$getProps = _this.getProps(),selectedItems = _this$getProps.selectedItems,valueToString = _this$getProps.valueToString,delimiters = _this$getProps.delimiters;
+      var _this$getProps3 = _this.getProps(),selectedItems = _this$getProps3.selectedItems,valueToString = _this$getProps3.valueToString,delimiters = _this$getProps3.delimiters;
       // упорядочивание токенов по индексу
       var tokens = _this.state.activeTokens.
       map(function (token) {return selectedItems.indexOf(token);}).
@@ -761,7 +783,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
         return;
       }
       var paste = event.clipboardData.getData('text');
-      var _this$getProps2 = _this.getProps(),delimiters = _this$getProps2.delimiters,selectedItems = _this$getProps2.selectedItems,valueToItem = _this$getProps2.valueToItem,onValueChange = _this$getProps2.onValueChange;
+      var _this$getProps4 = _this.getProps(),delimiters = _this$getProps4.delimiters,selectedItems = _this$getProps4.selectedItems,valueToItem = _this$getProps4.valueToItem,onValueChange = _this$getProps4.onValueChange;
       if (delimiters.some(function (delimiter) {return paste.includes(delimiter);})) {
         event.preventDefault();
         event.stopPropagation();
@@ -778,17 +800,17 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       }
     };_this.
 
-    tryGetItems = /*#__PURE__*/function () {var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;return _regenerator.default.wrap(function _callee$(_context) {while (1) switch (_context.prev = _context.next) {case 0:if (query === void 0) {query = '';}if (!(
+    tryGetItems = /*#__PURE__*/function () {var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {var autocompleteItems, _this$getProps5, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;return _regenerator.default.wrap(function _callee$(_context) {while (1) switch (_context.prev = _context.next) {case 0:if (query === void 0) {query = '';}if (!(
               _this.props.getItems && (_this.isInputValueChanged || !_this.props.hideMenuIfEmptyInputValue))) {_context.next = 15;break;}
               _this.dispatch({ type: 'SET_LOADING', payload: true });_context.next = 5;return (
                 _this.props.getItems(query));case 5:autocompleteItems = _context.sent;
-              _this.dispatch({ type: 'SET_LOADING', payload: false });_this$getProps3 =
+              _this.dispatch({ type: 'SET_LOADING', payload: false });_this$getProps5 =
 
-              _this.getProps(), selectedItems = _this$getProps3.selectedItems, valueToItem = _this$getProps3.valueToItem, valueToString = _this$getProps3.valueToString;
+              _this.getProps(), selectedItems = _this$getProps5.selectedItems, valueToItem = _this$getProps5.valueToItem, valueToString = _this$getProps5.valueToString;
               isSelectedItem = function isSelectedItem(item) {return _this.hasValueInItems(selectedItems, item);};
               isEditingItem = function isEditingItem(item) {
                 var editingItem = selectedItems[_this.state.editingTokenIndex];
-                return !!editingItem && (0, _lodash.default)(item, editingItem);
+                return !!editingItem && _this.isEqual(item, editingItem);
               };
 
               autocompleteItemsUnique = autocompleteItems.filter(function (item) {return !isSelectedItem(item) || isEditingItem(item);});
@@ -796,7 +818,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
               if (_this.isEditingMode) {
                 editingItem = selectedItems[_this.state.editingTokenIndex];
                 if (
-                (0, _lodash.default)(editingItem, valueToItem(_this.state.inputValue)) &&
+                _this.isEqual(editingItem, valueToItem(_this.state.inputValue)) &&
                 !_this.hasValueInItems(autocompleteItemsUnique, editingItem))
                 {
                   autocompleteItemsUnique.unshift(editingItem);
@@ -817,6 +839,12 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
 
 
     handleKeyDown = function (event) {
+      _this.props.onKeyDown == null || _this.props.onKeyDown(event);
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
       if (_this.isCursorVisible) {
         _this.handleInputKeyDown(event);
       } else {
@@ -824,7 +852,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       }
     };_this.
 
-    handleInputKeyDown = function (e) {var _this$input3, _this$input4;
+    handleInputKeyDown = function (e) {var _this$state$autocompl, _this$state$autocompl2, _this$input3, _this$input4;
       e.stopPropagation();
 
       if (
@@ -843,9 +871,11 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
         }
       }
       var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
+      var canSetValueToInput = _this.showAddItemHint || ((_this$state$autocompl = (_this$state$autocompl2 = _this.state.autocompleteItems) == null ? void 0 : _this$state$autocompl2.length) != null ? _this$state$autocompl : 0) > 0;
+
       switch (true) {
         case (0, _identifiers.isKeyEnter)(e):
-          if (_this.menuRef) {
+          if (canSetValueToInput && _this.menuRef) {
             _this.menuRef.enter(e);
           }
           // don't allow textarea
@@ -900,7 +930,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_this.
 
     handleWrapperKeyDown = function (e) {var _this$wrapper2;
-      var _this$getProps4 = _this.getProps(),selectedItems = _this$getProps4.selectedItems,onValueChange = _this$getProps4.onValueChange;
+      var _this$getProps6 = _this.getProps(),selectedItems = _this$getProps6.selectedItems,onValueChange = _this$getProps6.onValueChange;
       switch (true) {
         case (0, _identifiers.isKeyBackspace)(e):
         case (0, _identifiers.isKeyDelete)(e):{
@@ -968,7 +998,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
       if (!isLeftEdge && !isRightEdge) {
         var itemNew = _this.getProps().selectedItems[newItemIndex];
-        var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {return !(0, _lodash.default)(item, itemNew);}));
+        var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {return !_this.isEqual(item, itemNew);}));
         _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: itemsNew });
       }
     };_this.
@@ -985,7 +1015,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_this.
 
     selectItem = function (item) {
-      var _this$getProps5 = _this.getProps(),selectedItems = _this$getProps5.selectedItems,valueToString = _this$getProps5.valueToString;
+      var _this$getProps7 = _this.getProps(),selectedItems = _this$getProps7.selectedItems,valueToString = _this$getProps7.valueToString;
       if (_this.isEditingMode) {
         _this.dispatch({ type: 'UPDATE_QUERY', payload: valueToString(item) }, _this.finishTokenEdit);
       } else if (!_this.hasValueInItems(selectedItems, item)) {
@@ -996,8 +1026,8 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_this.
 
     handleRemoveToken = function (item) {
-      _this.props.onValueChange == null || _this.props.onValueChange(_this.getProps().selectedItems.filter(function (_) {return !(0, _lodash.default)(_, item);}));
-      var filteredActiveTokens = _this.state.activeTokens.filter(function (_) {return !(0, _lodash.default)(_, item);});
+      _this.props.onValueChange == null || _this.props.onValueChange(_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) {
@@ -1011,7 +1041,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       var items = _this.state.activeTokens;
       if (event.ctrlKey) {
         var newItems = _this.hasValueInItems(_this.state.activeTokens, itemNew) ?
-        items.filter(function (item) {return !(0, _lodash.default)(item, itemNew);}) : [].concat(
+        items.filter(function (item) {return !_this.isEqual(item, itemNew);}) : [].concat(
           items, [itemNew]);
         _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: newItems });
       } else {
@@ -1021,7 +1051,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_this.
 
     handleTokenEdit = function (itemNew) {
-      var _this$getProps6 = _this.getProps(),selectedItems = _this$getProps6.selectedItems,valueToString = _this$getProps6.valueToString;
+      var _this$getProps8 = _this.getProps(),selectedItems = _this$getProps8.selectedItems,valueToString = _this$getProps8.valueToString;
       var editingTokenIndex = selectedItems.findIndex(function (item) {return item === itemNew;});
       _this.dispatch({ type: 'SET_EDITING_TOKEN_INDEX', payload: editingTokenIndex });
 
@@ -1036,10 +1066,13 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
       _this.tryGetItems();
     };_this.
 
-    finishTokenEdit = function () {
-      var selectedItems = _this.getProps().selectedItems;
-      var _this$state2 = _this.state,editingTokenIndex = _this$state2.editingTokenIndex,inputValue = _this$state2.inputValue,reservedInputValue = _this$state2.reservedInputValue;
-      var editedItem = _this.getProps().valueToItem(inputValue);
+    finishTokenEdit = function () {var _autocompleteItems$fi;
+      var _this$getProps9 = _this.getProps(),selectedItems = _this$getProps9.selectedItems,valueToString = _this$getProps9.valueToString;
+      var _this$state2 = _this.state,editingTokenIndex = _this$state2.editingTokenIndex,inputValue = _this$state2.inputValue,reservedInputValue = _this$state2.reservedInputValue,autocompleteItems = _this$state2.autocompleteItems;
+
+      var editedItem = (_autocompleteItems$fi =
+      autocompleteItems == null ? void 0 : autocompleteItems.find(function (item) {return valueToString(item) === inputValue;})) != null ? _autocompleteItems$fi : _this.getProps().valueToItem(inputValue);
+
       var newItems = selectedItems.concat([]);
 
       if (!_this.hasValueInItems(selectedItems, editedItem)) {
@@ -1212,7 +1245,7 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
     };_this.
 
     getAvailableTokenIndex = function (startIndex, isDirectionLeft) {if (isDirectionLeft === void 0) {isDirectionLeft = true;}
-      var _this$getProps7 = _this.getProps(),selectedItems = _this$getProps7.selectedItems;
+      var _this$getProps10 = _this.getProps(),selectedItems = _this$getProps10.selectedItems;
       var step = isDirectionLeft ? -1 : +1;
       var availableIndex = startIndex + step;
 
@@ -1230,12 +1263,14 @@ TokenInput = exports.TokenInput = (_dec = (0, _decorators.locale)('TokenInput',
    * @public
    */;_proto.focus = function focus() {var _this$input8;(_this$input8 = this.input) == null || _this$input8.focus();} /**
    * @public
-   */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null || _this$input9.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.size) {case 'large':return _TokenInput2.styles.labelLarge(this.theme);case 'medium':return _TokenInput2.styles.labelMedium(this.theme);case 'small':default:return _TokenInput2.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.size) {case 'large':return _TokenInput2.styles.inputLarge(this.theme);case 'medium':return _TokenInput2.styles.inputMedium(this.theme);case 'small':default:return _TokenInput2.styles.inputSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx3;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {throw Error('Missed getItems for type ' + this.type);}var _this$props2 = this.props,maxMenuHeight = _this$props2.maxMenuHeight,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,renderNotFound = _this$props2.renderNotFound,hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,inputMode = _this$props2.inputMode,renderTotalCount = _this$props2.renderTotalCount,totalCount = _this$props2.totalCount,ariaDescribedby = _this$props2['aria-describedby'],ariaLabel = _this$props2['aria-label'];var _this$getProps8 = this.getProps(),selectedItems = _this$getProps8.selectedItems,width = _this$getProps8.width,onMouseEnter = _this$getProps8.onMouseEnter,onMouseLeave = _this$getProps8.onMouseLeave,menuWidth = _this$getProps8.menuWidth,menuAlign = _this$getProps8.menuAlign,renderItem = _this$getProps8.renderItem;var _this$state3 = this.state,activeTokens = _this$state3.activeTokens,inFocus = _this$state3.inFocus,inputValueWidth = _this$state3.inputValueWidth,inputValueHeight = _this$state3.inputValueHeight,inputValue = _this$state3.inputValue,reservedInputValue = _this$state3.reservedInputValue,autocompleteItems = _this$state3.autocompleteItems,loading = _this$state3.loading;var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (this.isInputValueChanged || !hideMenuIfEmptyInputValue);var theme = this.theme;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
+   */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null || _this$input9.blur();} /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
+   * @public
+   */;_proto.blink = function blink() {(0, _blink2.blink)({ el: this.wrapper, blinkColor: this.theme.inputBlinkColor });};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getLabelSizeClassName = function getLabelSizeClassName() {switch (this.size) {case 'large':return _TokenInput2.styles.labelLarge(this.theme);case 'medium':return _TokenInput2.styles.labelMedium(this.theme);case 'small':default:return _TokenInput2.styles.labelSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.size) {case 'large':return _TokenInput2.styles.inputLarge(this.theme);case 'medium':return _TokenInput2.styles.inputMedium(this.theme);case 'small':default:return _TokenInput2.styles.inputSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx3;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {throw Error('Missed getItems for type ' + this.type);}var _this$props2 = this.props,maxMenuHeight = _this$props2.maxMenuHeight,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,renderNotFound = _this$props2.renderNotFound,hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,inputMode = _this$props2.inputMode,renderTotalCount = _this$props2.renderTotalCount,totalCount = _this$props2.totalCount,ariaDescribedby = _this$props2['aria-describedby'],ariaLabel = _this$props2['aria-label'];var _this$getProps11 = this.getProps(),selectedItems = _this$getProps11.selectedItems,width = _this$getProps11.width,onMouseEnter = _this$getProps11.onMouseEnter,onMouseLeave = _this$getProps11.onMouseLeave,menuWidth = _this$getProps11.menuWidth,menuAlign = _this$getProps11.menuAlign,renderItem = _this$getProps11.renderItem;var _this$state3 = this.state,activeTokens = _this$state3.activeTokens,inFocus = _this$state3.inFocus,inputValueWidth = _this$state3.inputValueWidth,inputValueHeight = _this$state3.inputValueHeight,inputValue = _this$state3.inputValue,reservedInputValue = _this$state3.reservedInputValue,autocompleteItems = _this$state3.autocompleteItems,loading = _this$state3.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 = (0, _Emotion.cx)(_TokenInput2.styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[_TokenInput2.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[_TokenInput2.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput2.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput2.styles.error(theme)] = !!error, _cx[_TokenInput2.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput2.styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[_TokenInput2.styles.inputDisabled(theme)] = !!disabled, _cx2));var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';var inputNode = /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_TokenInput2.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)), hideCloseButton: Boolean(placeholder) }, /*#__PURE__*/_react.default.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 }));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenInputDataTids.root, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp, htmlFor: this.textareaId, "aria-controls": this.rootId, "data-tid": TokenInputDataTids.label }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, text: inputValue, theme: this.theme, size: this.size }), this.renderTokensStart(), inputNode, showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.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 ? /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.size }, /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput2.styles.reservedInput(theme) }, reservedInputValue)) : null)));} /**
    * Сбрасывает введенное пользователем значение
    * @public
    */;_proto.reset = function reset() {this.dispatch({ type: 'RESET' });};_proto.isCursorVisibleForState = function isCursorVisibleForState(state) {return state.inFocus && (this.isInputValueChanged || state.activeTokens.length === 0);};_proto.updateInputTextWidth = function updateInputTextWidth() {if (this.textHelper) {// в IE текст иногда не помещается в input
       // из-за округления, поэтому округляем явно
-      var inputValueWidth = parseFloat(this.textHelper.getTextWidth().toFixed(2));var inputValueHeight = parseFloat(this.textHelper.getTextHeight().toFixed(2));this.dispatch({ type: 'SET_INPUT_VALUE_WIDTH', payload: inputValueWidth }, LayoutEvents.emit);this.dispatch({ type: 'SET_INPUT_VALUE_HEIGHT', payload: inputValueHeight }, LayoutEvents.emit);}};_proto.moveFocusToLastToken = function moveFocusToLastToken() {var items = this.getProps().selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};return (0, _createClass2.default)(TokenInput, [{ key: "textareaId", get: function get() {var _this$props$id;return (_this$props$id = this.props.id) != null ? _this$props$id : this._textareaId;} }, { key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.getProps().valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.getProps().selectedItems;if (selectedItems && this.hasValueInItems(selectedItems, value)) {return false;}if (this.type === TokenInputType.Combined && this.isInputValueChanged) {return true;}} }, { key: "type", get: function get() {return this.props.type ? this.props.type : TokenInputType.WithReference;} }, { key: "menuRef", get: function get() {return this.tokensInputMenu && this.tokensInputMenu.getMenuRef();} }, { key: "isCursorVisible", get: function get() {return this.isCursorVisibleForState(this.state);} }, { key: "isEditingMode", get: function get() {return this.state.editingTokenIndex > -1;} }, { key: "isInputChanged", get: function get() {if (this.isEditingMode) {return this.isTokenValueChanged;}return this.isInputValueChanged;} }, { key: "isInputValueChanged", get: function get() {var inputValue = this.state.inputValue;return inputValue !== '';} }, { key: "isTokenValueChanged", get: function get() {var _this$state4 = this.state,inputValue = _this$state4.inputValue,editingTokenIndex = _this$state4.editingTokenIndex;var _this$getProps9 = this.getProps(),valueToString = _this$getProps9.valueToString,selectedItems = _this$getProps9.selectedItems;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);}(_react.default.PureComponent), _TokenInput.__KONTUR_REACT_UI__ = 'TokenInput', _TokenInput.displayName = 'TokenInput', _TokenInput.defaultProps = { selectedItems: [], // TEMP_FAKE_FLAG помогает узнать, остались ли разделители дефолтными или пользователь передал их равными дефолтным.
-  delimiters: [',', TEMP_FAKE_FLAG], renderItem: identity, renderValue: identity, valueToString: identity, valueToItem: function valueToItem(item) {return item;}, toKey: defaultToKey, onValueChange: function onValueChange() {return void 0;}, width: 250, onBlur: _utils.emptyHandler, onFocus: _utils.emptyHandler, onMouseEnter: _utils.emptyHandler, onMouseLeave: _utils.emptyHandler, menuWidth: 'auto', menuAlign: 'cursor' }, _TokenInput)) || _class) || _class) || _class);
+      var inputValueWidth = parseFloat(this.textHelper.getTextWidth().toFixed(2));var inputValueHeight = parseFloat(this.textHelper.getTextHeight().toFixed(2));this.dispatch({ type: 'SET_INPUT_VALUE_WIDTH', payload: inputValueWidth }, LayoutEvents.emit);this.dispatch({ type: 'SET_INPUT_VALUE_HEIGHT', payload: inputValueHeight }, LayoutEvents.emit);}};_proto.moveFocusToLastToken = function moveFocusToLastToken() {var items = this.getProps().selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};return (0, _createClass2.default)(TokenInput, [{ key: "textareaId", get: function get() {var _this$props$id;return (_this$props$id = this.props.id) != null ? _this$props$id : this._textareaId;} }, { key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.getProps().valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.getProps().selectedItems;if (selectedItems && this.hasValueInItems(selectedItems, value)) {return false;}if (this.type === TokenInputType.Combined && this.isInputValueChanged) {return true;}} }, { key: "type", get: function get() {return this.props.type ? this.props.type : TokenInputType.WithReference;} }, { key: "menuRef", get: function get() {return this.tokensInputMenu && this.tokensInputMenu.getMenuRef();} }, { key: "isCursorVisible", get: function get() {return this.isCursorVisibleForState(this.state);} }, { key: "isEditingMode", get: function get() {return this.state.editingTokenIndex > -1;} }, { key: "isInputChanged", get: function get() {if (this.isEditingMode) {return this.isTokenValueChanged;}return this.isInputValueChanged;} }, { key: "isInputValueChanged", get: function get() {var inputValue = this.state.inputValue;return inputValue !== '';} }, { key: "isTokenValueChanged", get: function get() {var _this$state4 = this.state,inputValue = _this$state4.inputValue,editingTokenIndex = _this$state4.editingTokenIndex;var _this$getProps12 = this.getProps(),valueToString = _this$getProps12.valueToString,selectedItems = _this$getProps12.selectedItems;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);}(_react.default.PureComponent), _TokenInput.__KONTUR_REACT_UI__ = 'TokenInput', _TokenInput.displayName = 'TokenInput', _TokenInput.defaultProps = { selectedItems: [], // TEMP_FAKE_FLAG помогает узнать, остались ли разделители дефолтными или пользователь передал их равными дефолтным.
+  delimiters: [',', TEMP_FAKE_FLAG], renderItem: identity, renderValue: identity, valueToString: identity, valueToItem: function valueToItem(item) {return item;}, toKey: defaultToKey, itemToId: defaultToKey, onValueChange: function onValueChange() {return void 0;}, width: 250, onBlur: _utils.emptyHandler, onFocus: _utils.emptyHandler, onMouseEnter: _utils.emptyHandler, onMouseLeave: _utils.emptyHandler, menuWidth: 'auto', menuAlign: 'cursor' }, _TokenInput)) || _class) || _class) || _class);