@skbkontur/react-ui 0.0.0-a8f1c3e7a1 → 0.0.0-aa4659ca48

package/components/TokenInput/TokenInput/TokenInput.js

@@ -5,8 +5,9 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class, _TokenInput;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
-import isEqual from 'lodash.isequal';
+import lodashIsEqual from 'lodash.isequal';
 import { globalObject } from '@skbkontur/global-object';
+import logWarning from 'warning';
 import { PopupIds } from "../../../internal/Popup";
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
@@ -21,6 +22,7 @@ import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getUid } from "../../../lib/uidUtils";
 import { TokenView } from "../../Token/TokenView";
+import { withSize } from "../../../lib/size/SizeDecorator";
 import { TokenInputLocaleHelper } from "../locale";
 import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
@@ -83,7 +85,7 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
  *
  * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
  */
-export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
+export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = withSize(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
   function TokenInput() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -98,13 +100,21 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this.textHelper = null;
     _this.wrapper = null;
     _this.memoizedTokens = new Map();
+    _this.isEqual = function (itemA, itemB) {
+      var _this$getProps = _this.getProps(),
+        itemToId = _this$getProps.itemToId;
+      return lodashIsEqual(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 isEqual(item, value);
+        return _this.isEqual(item, value);
       });
     };
     _this.inputRef = function (node) {
@@ -222,10 +232,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         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);
@@ -241,11 +251,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         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);
       })) {
@@ -268,14 +278,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _this.tryGetItems = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-        var autocompleteItems, _this$getProps3, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
+        var autocompleteItems, _this$getProps5, selectedItems, valueToItem, valueToString, isSelectedItem, isEditingItem, autocompleteItemsUnique, editingItem, selectItemIndex;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if (query === void 0) {
                 query = '';
               }
-              if (!(_this.props.getItems && (_this.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {
+              if (!(_this.props.getItems && (_this.isInputValueChanged || !_this.props.hideMenuIfEmptyInputValue))) {
                 _context.next = 15;
                 break;
               }
@@ -291,24 +301,24 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
                 type: 'SET_LOADING',
                 payload: false
               });
-              _this$getProps3 = _this.getProps(), selectedItems = _this$getProps3.selectedItems, valueToItem = _this$getProps3.valueToItem, valueToString = _this$getProps3.valueToString;
+              _this$getProps5 = _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 && isEqual(item, editingItem);
+                return !!editingItem && _this.isEqual(item, editingItem);
               };
               autocompleteItemsUnique = autocompleteItems.filter(function (item) {
                 return !isSelectedItem(item) || isEditingItem(item);
               });
               if (_this.isEditingMode) {
                 editingItem = selectedItems[_this.state.editingTokenIndex];
-                if (isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
+                if (_this.isEqual(editingItem, valueToItem(_this.state.inputValue)) && !_this.hasValueInItems(autocompleteItemsUnique, editingItem)) {
                   autocompleteItemsUnique.unshift(editingItem);
                 }
               }
-              if (query === '' || _this.state.inputValue !== '') {
+              if (query === '' || _this.isInputValueChanged) {
                 _this.dispatch({
                   type: 'SET_AUTOCOMPLETE_ITEMS',
                   payload: autocompleteItemsUnique
@@ -342,7 +352,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.handleInputKeyDown = function (e) {
-      var _this$input3, _this$input4;
+      var _this$state$autocompl, _this$state$autocompl2, _this$input3, _this$input4;
       e.stopPropagation();
       if (_this.type !== TokenInputType.WithReference && _this.getProps().delimiters.some(function (key) {
         return key === e.key || key === ',' && isKeyComma(e);
@@ -358,9 +368,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }
       }
       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 isKeyEnter(e):
-          if (_this.menuRef) {
+          if (canSetValueToInput && _this.menuRef) {
             _this.menuRef.enter(e);
           }
           // don't allow textarea
@@ -412,9 +423,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _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 isKeyBackspace(e):
         case isKeyDelete(e):
@@ -491,7 +502,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (!isLeftEdge && !isRightEdge) {
         var itemNew = _this.getProps().selectedItems[newItemIndex];
         var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {
-          return !isEqual(item, itemNew);
+          return !_this.isEqual(item, itemNew);
         }));
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
@@ -509,9 +520,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _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',
@@ -527,10 +538,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
     _this.handleRemoveToken = function (item) {
       _this.props.onValueChange == null || _this.props.onValueChange(_this.getProps().selectedItems.filter(function (_) {
-        return !isEqual(_, item);
+        return !_this.isEqual(_, item);
       }));
       var filteredActiveTokens = _this.state.activeTokens.filter(function (_) {
-        return !isEqual(_, item);
+        return !_this.isEqual(_, item);
       });
       _this.dispatch({
         type: 'SET_ACTIVE_TOKENS',
@@ -545,7 +556,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var items = _this.state.activeTokens;
       if (event.ctrlKey) {
         var newItems = _this.hasValueInItems(_this.state.activeTokens, itemNew) ? items.filter(function (item) {
-          return !isEqual(item, itemNew);
+          return !_this.isEqual(item, itemNew);
         }) : [].concat(items, [itemNew]);
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
@@ -560,9 +571,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       _this.focusInput();
     };
     _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;
       });
@@ -570,7 +581,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         type: 'SET_EDITING_TOKEN_INDEX',
         payload: editingTokenIndex
       });
-      if (_this.state.inputValue !== '') {
+      if (_this.isInputValueChanged) {
         if (_this.state.reservedInputValue === undefined) {
           _this.dispatch({
             type: 'SET_TEMPORARY_QUERY',
@@ -588,15 +599,21 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       _this.tryGetItems();
     };
     _this.finishTokenEdit = function () {
-      var selectedItems = _this.getProps().selectedItems;
+      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;
-      var editedItem = _this.getProps().valueToItem(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)) {
-        newItems.splice.apply(newItems, [editingTokenIndex, 1].concat(inputValue !== '' ? [editedItem] : []));
+        newItems.splice.apply(newItems, [editingTokenIndex, 1].concat(_this.isInputValueChanged ? [editedItem] : []));
         _this.handleValueChange(newItems);
       }
       _this.dispatch({
@@ -625,25 +642,27 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this.checkForUnexpectedInput = function () {
       var inputValue = _this.state.inputValue;
       var onUnexpectedInput = _this.props.onUnexpectedInput;
-      if (onUnexpectedInput) {
-        // чекаем не возвращает ли что-нибудь обработчик
-        var returnedValue = onUnexpectedInput(inputValue);
-        if (returnedValue === undefined) {
-          return;
-        }
-        if (returnedValue === null) {
-          _this.dispatch({
-            type: 'CLEAR_INPUT'
-          }, function () {
-            if (_this.isEditingMode) {
-              _this.finishTokenEdit();
-            }
-          });
-          return;
-        }
-        if (returnedValue) {
-          _this.selectItem(returnedValue);
+
+      // чекаем не возвращает ли что-нибудь обработчик
+      var returnedValue = onUnexpectedInput == null ? void 0 : onUnexpectedInput(inputValue);
+      if (returnedValue === undefined) {
+        if (_this.type === TokenInputType.WithoutReference) {
+          _this.handleAddItem();
         }
+        return;
+      }
+      if (returnedValue === null) {
+        _this.dispatch({
+          type: 'CLEAR_INPUT'
+        }, function () {
+          if (_this.isEditingMode) {
+            _this.finishTokenEdit();
+          }
+        });
+        return;
+      }
+      if (returnedValue) {
+        _this.selectItem(returnedValue);
       }
     };
     _this.handleChangeInputValue = function (event) {
@@ -654,7 +673,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (query.endsWith(' ')) {
         query = query.trimRight() + ' ';
       }
-      if (_this.state.inputValue !== '' && query === '') {
+      if (_this.isInputValueChanged && query === '') {
         _this.dispatch({
           type: 'SET_AUTOCOMPLETE_ITEMS',
           payload: undefined
@@ -691,8 +710,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var _this$props = _this.props,
         _this$props$renderTok = _this$props.renderToken,
         renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,
-        disabled = _this$props.disabled,
-        size = _this$props.size;
+        disabled = _this$props.disabled;
       var isActive = _this.state.activeTokens.includes(item);
 
       // TODO useCallback
@@ -717,7 +735,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }
       };
       var renderedToken = renderToken(item, {
-        size: size,
+        size: _this.size,
         isActive: isActive,
         onClick: handleTokenClick,
         onDoubleClick: handleTokenDoubleClick,
@@ -763,8 +781,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       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;
       while (_this.isTokenDisabled(availableIndex)) {
@@ -850,7 +868,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     });
   };
   _proto.getLabelSizeClassName = function getLabelSizeClassName() {
-    switch (this.getProps().size) {
+    switch (this.size) {
       case 'large':
         return styles.labelLarge(this.theme);
       case 'medium':
@@ -861,7 +879,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
   };
   _proto.getInputSizeClassName = function getInputSizeClassName() {
-    switch (this.getProps().size) {
+    switch (this.size) {
       case 'large':
         return styles.inputLarge(this.theme);
       case 'medium':
@@ -874,7 +892,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   _proto.renderMain = function renderMain() {
     var _cx, _cx2, _cx3;
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
-      throw Error('Missed getItems for type ' + this.type);
+      logWarning(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");
     }
     var _this$props2 = this.props,
       maxMenuHeight = _this$props2.maxMenuHeight,
@@ -888,14 +906,14 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       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$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,
@@ -905,7 +923,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       reservedInputValue = _this$state3.reservedInputValue,
       autocompleteItems = _this$state3.autocompleteItems,
       loading = _this$state3.loading;
-    var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);
+    var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (this.isInputValueChanged || !hideMenuIfEmptyInputValue);
     var theme = this.theme;
     var inputInlineStyles = {
       // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
@@ -918,7 +936,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     var inputClassName = cx(styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2));
     var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
     var inputNode = /*#__PURE__*/React.createElement(TokenView, {
-      size: this.getProps().size,
+      size: this.size,
       className: cx((_cx3 = {}, _cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)),
       hideCloseButton: Boolean(placeholder)
     }, /*#__PURE__*/React.createElement("textarea", {
@@ -960,7 +978,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       ref: this.textHelperRef,
       text: inputValue,
       theme: this.theme,
-      size: this.getProps().size
+      size: this.size
     }), this.renderTokensStart(), inputNode, showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
       popupMenuId: this.rootId,
       ref: this.tokensInputMenuRef,
@@ -978,9 +996,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       menuAlign: menuAlign,
       renderTotalCount: renderTotalCount,
       totalCount: totalCount,
-      size: this.getProps().size
+      size: this.size
     }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
-      size: this.props.size
+      size: this.size
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.reservedInput(theme)
     }, reservedInputValue)) : null)));
@@ -994,7 +1012,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     });
   };
   _proto.isCursorVisibleForState = function isCursorVisibleForState(state) {
-    return state.inFocus && (state.inputValue !== '' || state.activeTokens.length === 0);
+    return state.inFocus && (this.isInputValueChanged || state.activeTokens.length === 0);
   };
   _proto.updateInputTextWidth = function updateInputTextWidth() {
     if (this.textHelper) {
@@ -1039,7 +1057,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       if (selectedItems && this.hasValueInItems(selectedItems, value)) {
         return false;
       }
-      if (this.type === TokenInputType.Combined && this.state.inputValue !== '') {
+      if (this.type === TokenInputType.Combined && this.isInputValueChanged) {
         return true;
       }
     }
@@ -1083,9 +1101,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       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;
+      var _this$getProps12 = this.getProps(),
+        valueToString = _this$getProps12.valueToString,
+        selectedItems = _this$getProps12.selectedItems;
       if (this.isEditingMode) {
         return valueToString(selectedItems[editingTokenIndex]) !== inputValue;
       }
@@ -1103,6 +1121,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     return item;
   },
   toKey: defaultToKey,
+  itemToId: defaultToKey,
   onValueChange: function onValueChange() {
     return void 0;
   },
@@ -1112,6 +1131,5 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   onMouseEnter: emptyHandler,
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
-  menuAlign: 'cursor',
-  size: 'small'
-}, _TokenInput)) || _class) || _class);
+  menuAlign: 'cursor'
+}, _TokenInput)) || _class) || _class) || _class);