@skbkontur/react-ui 0.0.0-b203c99d11 → 0.0.0-bb4cbfe9c6

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

@@ -7,6 +7,7 @@ export declare enum TokenInputType {
     WithoutReference = 1,
     Combined = 2
 }
+export declare type TokenInputMenuAlign = 'left' | 'cursor';
 export interface TokenInputProps<T> extends CommonProps {
     selectedItems: T[];
     onValueChange: (items: T[]) => void;
@@ -16,6 +17,16 @@ export interface TokenInputProps<T> extends CommonProps {
     onBlur: FocusEventHandler<HTMLTextAreaElement>;
     autoFocus?: boolean;
     type?: TokenInputType;
+    /**
+     * Ширина выпадающего меню может быть указана как 'auto'
+     * а также в пикселях, процентах (от ширины инпута)
+     * или других конкретных единицах
+     *
+     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
+     * (по ширине текста)
+     */
+    menuWidth: React.CSSProperties['width'];
+    menuAlign: TokenInputMenuAlign;
     /**
      * Функция поиска элементов, должна возвращать Promise с массивом элементов.
      * По умолчанию ожидаются строки.
@@ -37,7 +48,13 @@ export interface TokenInputProps<T> extends CommonProps {
     toKey: (item: T) => string | number | undefined;
     placeholder?: string;
     delimiters: string[];
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     disabled?: boolean;
     width?: string | number;
@@ -69,6 +86,7 @@ export interface TokenInputProps<T> extends CommonProps {
      * а в режиме редактирования токен будет удален
      */
     onUnexpectedInput?: (value: string) => void | null | undefined | T;
+    inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
 }
 export interface TokenInputState<T> {
     autocompleteItems?: T[];
@@ -106,9 +124,18 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private tokensInputMenu;
     private textHelper;
     private wrapper;
+    private setRootNode;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TokenInputProps<T>, prevState: TokenInputState<T>): void;
     componentWillUnmount(): void;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
     render(): JSX.Element;
     private renderMain;
     /**

package/cjs/components/TokenInput/TokenInput.js

@@ -1,7 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.TokenInput = exports.DefaultState = exports.TokenInputType = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TokenInputType = exports.TokenInput = exports.DefaultState = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 
@@ -15,6 +13,7 @@ var _identifiers = require("../../lib/events/keyboard/identifiers");
 
 
 
+
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 
 var _Token = require("../Token");
@@ -25,12 +24,14 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _decorators = require("../../lib/locale/decorators");
 var _MenuItem = require("../MenuItem/MenuItem");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
 var _locale = require("./locale");
 var _TokenInput = require("./TokenInput.styles");
 var _TokenInputReducer = require("./TokenInputReducer");
 var _TokenInputMenu = require("./TokenInputMenu");
-var _TextWidthHelper = require("./TextWidthHelper");var _dec, _class, _class2, _temp;function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it;if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}it = o[Symbol.iterator]();return it.next.bind(it);}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}var
+var _TextWidthHelper = require("./TextWidthHelper");var _dec, _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];if (it) return (it = it.call(o)).next.bind(it);if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}var
 
 TokenInputType;exports.TokenInputType = TokenInputType;(function (TokenInputType) {TokenInputType[TokenInputType["WithReference"] = 0] = "WithReference";TokenInputType[TokenInputType["WithoutReference"] = 1] = "WithoutReference";TokenInputType[TokenInputType["Combined"] = 2] = "Combined";})(TokenInputType || (exports.TokenInputType = TokenInputType = {}));
 
@@ -98,6 +99,25 @@ TokenInputType;exports.TokenInputType = TokenInputType;(function (TokenInputType
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -150,7 +170,10 @@ item, _ref) {var
 
 
 
-TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(TokenInput, _React$PureComponent);function TokenInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
+
+TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(TokenInput, _React$PureComponent);function TokenInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
+
+
 
 
 
@@ -171,8 +194,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
     state = DefaultState;_this.
 
-    locale = void 0;_this.
-    theme = void 0;_this.
+
+
     input = null;_this.
     tokensInputMenu = null;_this.
     textHelper = null;_this.
@@ -324,6 +347,26 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -426,12 +469,12 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         _this.handleOutsideBlur();
       }
 
-      if (isBlurToMenu || _this.state.preventBlur) {
+      if (isBlurToMenu || _this.state.preventBlur) {var _this$input;
         event.preventDefault();
         // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
-        _this.input.focus();
+        (_this$input = _this.input) == null ? void 0 : _this$input.focus();
         // в firefox не работает без второго focus
-        process.nextTick(function () {return _this.input.focus();});
+        requestAnimationFrame(function () {var _this$input2;return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();});
         _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
       } else {
         _this.dispatch({ type: 'BLUR' });
@@ -439,9 +482,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    handleOutsideBlur = function () {var _this$state =
-      _this.state,inputValue = _this$state.inputValue,autocompleteItems = _this$state.autocompleteItems;var
-      valueToString = _this.props.valueToString;
+    handleOutsideBlur = function () {
+      var _this$state = _this.state,inputValue = _this$state.inputValue,autocompleteItems = _this$state.autocompleteItems;
+      var valueToString = _this.props.valueToString;
 
       if (inputValue === '') {
         // если стерли содержимое токена в режиме редактирования, то удаляем токен
@@ -497,8 +540,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
     isBlurToMenu = function (event) {
-      if (_this.menuRef) {
-        var menu = (0, _reactDom.findDOMNode)(_this.menuRef);
+      if (_this.menuRef) {var _this$tokensInputMenu;
+        var menu = (0, _rootNode.getRootNode)((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
         var relatedTarget = event.relatedTarget || document.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
@@ -508,11 +551,11 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       return false;
     };_this.
 
-    handleWrapperMouseDown = function (event) {
+    handleWrapperMouseDown = function (event) {var _this$wrapper;
       _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: true });
       var target = event.target;
       var isClickOnToken =
-      target && _this.wrapper.contains(target) && target !== _this.wrapper && target !== _this.input;
+      target && ((_this$wrapper = _this.wrapper) == null ? void 0 : _this$wrapper.contains(target)) && target !== _this.wrapper && target !== _this.input;
       if (!isClickOnToken) {
         _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' });
       }
@@ -541,8 +584,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       if (_this.type === TokenInputType.WithReference || !event.clipboardData) {
         return;
       }
-      var paste = event.clipboardData.getData('text');var
-      delimiters = _this.props.delimiters;
+      var paste = event.clipboardData.getData('text');
+      var delimiters = _this.props.delimiters;
       if (delimiters.some(function (delimiter) {return paste.includes(delimiter);})) {
         event.preventDefault();
         event.stopPropagation();
@@ -608,10 +651,14 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    handleInputKeyDown = function (e) {
+    handleInputKeyDown = function (e) {var _this$input3, _this$input4;
       e.stopPropagation();
 
-      if (_this.type !== TokenInputType.WithReference && _this.props.delimiters.includes(e.key)) {
+      if (
+      _this.type !== TokenInputType.WithReference &&
+      _this.props.delimiters.some(function (key) {return key === e.key || key === ',' && (0, _identifiers.isKeyComma)(e);}) ||
+      (0, _identifiers.isKeyEnter)(e) && _this.type === TokenInputType.WithoutReference)
+      {
         e.preventDefault();
         var newValue = _this.state.inputValue;
         if (newValue !== '') {
@@ -643,13 +690,13 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           }
           break;
         case (0, _identifiers.isKeyEscape)(e):
-          _this.input.blur();
+          (_this$input3 = _this.input) == null ? void 0 : _this$input3.blur();
           break;
         case (0, _identifiers.isKeyBackspace)(e):
           if (!_this.isEditingMode) _this.moveFocusToLastToken();
           break;
         case (0, _identifiers.isKeyArrowLeft)(e):
-          if (_this.input.selectionStart === 0) {
+          if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
             _this.moveFocusToLastToken();
           }
           break;}
@@ -664,7 +711,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
     focusInput = function () {
-      process.nextTick(function () {return _this.input.focus();});
+      requestAnimationFrame(function () {var _this$input5;return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();});
     };_this.
 
     selectInputText = function () {
@@ -673,7 +720,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    handleWrapperKeyDown = function (e) {
+    handleWrapperKeyDown = function (e) {var _this$wrapper2;
       switch (true) {
         case (0, _identifiers.isKeyBackspace)(e):
         case (0, _identifiers.isKeyDelete)(e):{
@@ -682,9 +729,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
               function (item) {return !_this.hasValueInItems(_this.state.activeTokens, item);});
 
               _this.props.onValueChange(itemsNew);
-              _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {
+              _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input6;
                 LayoutEvents.emit();
-                _this.input.focus();
+                (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus();
               });
             }
             break;
@@ -693,7 +740,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           _this.handleWrapperArrows(e);
           break;
         case (0, _identifiers.isKeyEscape)(e):
-          _this.wrapper.blur();
+          (_this$wrapper2 = _this.wrapper) == null ? void 0 : _this$wrapper2.blur();
           break;
         case (0, _identifiers.isKeyEnter)(e):
           e.preventDefault();
@@ -727,7 +774,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
     handleWrapperArrowsWithoutShift = function (isLeftEdge, isRightEdge, newItemIndex) {
       if (isRightEdge) {
-        _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {return _this.input.focus();});
+        _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input7;return (_this$input7 = _this.input) == null ? void 0 : _this$input7.focus();});
       } else if (!isLeftEdge) {
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
@@ -755,8 +802,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    selectItem = function (item) {var
-      selectedItems = _this.props.selectedItems;
+    selectItem = function (item) {
+      var selectedItems = _this.props.selectedItems;
 
       if (_this.isEditingMode) {
         _this.dispatch({ type: 'UPDATE_QUERY', payload: _this.props.valueToString(item) }, _this.finishTokenEdit);
@@ -808,9 +855,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       _this.tryGetItems();
     };_this.
 
-    finishTokenEdit = function () {var _this$state2 =
-      _this.state,editingTokenIndex = _this$state2.editingTokenIndex,inputValue = _this$state2.inputValue,reservedInputValue = _this$state2.reservedInputValue;var _this$props =
-      _this.props,selectedItems = _this$props.selectedItems,valueToItem = _this$props.valueToItem;
+    finishTokenEdit = function () {
+      var _this$state2 = _this.state,editingTokenIndex = _this$state2.editingTokenIndex,inputValue = _this$state2.inputValue,reservedInputValue = _this$state2.reservedInputValue;
+      var _this$props = _this.props,selectedItems = _this$props.selectedItems,valueToItem = _this$props.valueToItem;
       var editedItem = valueToItem(inputValue);
       var newItems = selectedItems.concat([]);
 
@@ -833,9 +880,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    checkForUnexpectedInput = function () {var
-      inputValue = _this.state.inputValue;var
-      onUnexpectedInput = _this.props.onUnexpectedInput;
+    checkForUnexpectedInput = function () {
+      var inputValue = _this.state.inputValue;
+      var onUnexpectedInput = _this.props.onUnexpectedInput;
 
       if (onUnexpectedInput) {
         // чекаем не возвращает ли что-нибудь обработчик
@@ -890,9 +937,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    renderTokensStart = function () {var
-      editingTokenIndex = _this.state.editingTokenIndex;var
-      selectedItems = _this.props.selectedItems;
+    renderTokensStart = function () {
+      var editingTokenIndex = _this.state.editingTokenIndex;
+      var selectedItems = _this.props.selectedItems;
       var delimiter = editingTokenIndex >= 0 ? editingTokenIndex : selectedItems.length;
       return selectedItems.slice(0, delimiter).map(_this.renderToken);
     };_this.
@@ -903,8 +950,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       }
     };_this.
 
-    renderToken = function (item) {var _this$props2 =
-      _this.props,_this$props2$renderTo = _this$props2.renderToken,renderToken = _this$props2$renderTo === void 0 ? defaultRenderToken : _this$props2$renderTo,disabled = _this$props2.disabled;
+    renderToken = function (item) {
+      var _this$props2 = _this.props,_this$props2$renderTo = _this$props2.renderToken,renderToken = _this$props2$renderTo === void 0 ? defaultRenderToken : _this$props2$renderTo,disabled = _this$props2.disabled;
 
       var isActive = _this.state.activeTokens.includes(item);
 
@@ -947,21 +994,25 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
       if (_this.props.renderAddButton) {
         return _this.props.renderAddButton(value, _this.handleAddItem);
-      }var _this$locale =
+      }
 
-      _this.locale,addButtonComment = _this$locale.addButtonComment,addButtonTitle = _this$locale.addButtonTitle;
+      var _this$locale = _this.locale,addButtonComment = _this$locale.addButtonComment,addButtonTitle = _this$locale.addButtonTitle;
 
       return /*#__PURE__*/(
         _react.default.createElement(_MenuItem.MenuItem, { onClick: _this.handleAddItem, comment: addButtonComment, key: "renderAddButton" },
         addButtonTitle, " ", value));
 
 
-    };return _this;}var _proto = TokenInput.prototype;_proto.componentDidMount = function componentDidMount() {this.updateInputTextWidth();document.addEventListener('copy', this.handleCopy);if (this.props.autoFocus) {this.focusInput();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.inputValue !== this.state.inputValue) {this.updateInputTextWidth();}if (prevState.activeTokens.length === 0 && this.state.activeTokens.length > 0) {this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });}if (prevProps.selectedItems.length !== this.props.selectedItems.length) {LayoutEvents.emit();}if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);}};_proto.componentWillUnmount = function componentWillUnmount() {document.removeEventListener('copy', this.handleCopy);};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2, _cn3;if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {throw Error('Missed getItems for type ' + this.type);}var _this$props3 = this.props,selectedItems = _this$props3.selectedItems,width = _this$props3.width,maxMenuHeight = _this$props3.maxMenuHeight,error = _this$props3.error,warning = _this$props3.warning,disabled = _this$props3.disabled,placeholder = _this$props3.placeholder,renderItem = _this$props3.renderItem,renderNotFound = _this$props3.renderNotFound,hideMenuIfEmptyInputValue = _this$props3.hideMenuIfEmptyInputValue,onMouseEnter = _this$props3.onMouseEnter,onMouseLeave = _this$props3.onMouseLeave;var _this$state3 = this.state,activeTokens = _this$state3.activeTokens,inFocus = _this$state3.inFocus,inputValueWidth = _this$state3.inputValueWidth,inputValue = _this$state3.inputValue,reservedInputValue = _this$state3.reservedInputValue,autocompleteItems = _this$state3.autocompleteItems,loading = _this$state3.loading,inputValueHeight = _this$state3.inputValueHeight;var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);var theme = this.theme;var lineHeight = parseInt(theme.tokenInputLineHeight, 10) || 0;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
+    };return _this;}var _proto = TokenInput.prototype;_proto.componentDidMount = function componentDidMount() {this.updateInputTextWidth();document.addEventListener('copy', this.handleCopy);if (this.props.autoFocus) {this.focusInput();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevState.inputValue !== this.state.inputValue) {this.updateInputTextWidth();}if (prevState.activeTokens.length === 0 && this.state.activeTokens.length > 0) {this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });}if (prevProps.selectedItems.length !== this.props.selectedItems.length) {LayoutEvents.emit();}if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {this.tryGetItems(this.isEditingMode ? '' : this.state.inputValue);}};_proto.componentWillUnmount = function componentWillUnmount() {document.removeEventListener('copy', this.handleCopy);} /**
+   * @public
+   */;_proto.focus = function focus() {var _this$input8;(_this$input8 = this.input) == null ? void 0 : _this$input8.focus();} /**
+   * @public
+   */;_proto.blur = function blur() {var _this$input9;(_this$input9 = this.input) == null ? void 0 : _this$input9.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_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$props3 = this.props,selectedItems = _this$props3.selectedItems,width = _this$props3.width,maxMenuHeight = _this$props3.maxMenuHeight,error = _this$props3.error,warning = _this$props3.warning,disabled = _this$props3.disabled,placeholder = _this$props3.placeholder,renderItem = _this$props3.renderItem,renderNotFound = _this$props3.renderNotFound,hideMenuIfEmptyInputValue = _this$props3.hideMenuIfEmptyInputValue,onMouseEnter = _this$props3.onMouseEnter,onMouseLeave = _this$props3.onMouseLeave,inputMode = _this$props3.inputMode,menuWidth = _this$props3.menuWidth,menuAlign = _this$props3.menuAlign;var _this$state3 = this.state,activeTokens = _this$state3.activeTokens,inFocus = _this$state3.inFocus,inputValueWidth = _this$state3.inputValueWidth,inputValue = _this$state3.inputValue,reservedInputValue = _this$state3.reservedInputValue,autocompleteItems = _this$state3.autocompleteItems,loading = _this$state3.loading,inputValueHeight = _this$state3.inputValueHeight;var showMenu = this.type !== TokenInputType.WithoutReference && this.isCursorVisible && activeTokens.length === 0 && (inputValue !== '' || !hideMenuIfEmptyInputValue);var theme = this.theme;var lineHeight = parseInt(theme.tokenInputLineHeight, 10) || 0;var inputInlineStyles = { // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
       width: inputValueWidth, height: Math.max(lineHeight, inputValueHeight), // input растягивается на всю ширину чтобы placeholder не обрезался
       flex: selectedItems && selectedItems.length === 0 ? 1 : undefined, // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
-      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _classnames.default)(_TokenInput.jsStyles.label(theme), (_cn = {}, _cn[_TokenInput.jsStyles.labelFocused(theme)] = !!inFocus, _cn[_TokenInput.jsStyles.error(theme)] = !!error, _cn[_TokenInput.jsStyles.warning(theme)] = !!warning, _cn[_TokenInput.jsStyles.labelDisabled(theme)] = !!disabled, _cn));var inputClassName = (0, _classnames.default)(_TokenInput.jsStyles.input(theme), (_cn2 = {}, _cn2[_TokenInput.jsStyles.inputDisabled(theme)] = !!disabled, _cn2[_TokenInput.jsStyles.inputEditing(theme)] = this.isEditingMode, _cn2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, classHelp: (0, _classnames.default)(_TokenInput.jsStyles.helperText(theme), (_cn3 = {}, _cn3[_TokenInput.jsStyles.helperTextEditing(theme)] = this.isEditingMode, _cn3)), text: inputValue, theme: this.theme }), this.renderTokensStart(), /*#__PURE__*/_react.default.createElement("textarea", { ref: this.inputRef, value: inputValue, style: inputInlineStyles, autoComplete: "off", spellCheck: false, disabled: disabled, className: inputClassName, placeholder: selectedItems.length > 0 ? undefined : placeholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleChangeInputValue, onKeyDown: this.handleKeyDown, onPaste: this.handleInputPaste }), showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.TokenInputMenu, { ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElement: this.input, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: this.selectItem, renderAddButton: this.renderAddButton }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput.jsStyles.reservedInput(theme) }, reservedInputValue) : null)));} /**
-   * Сбрасывает введенное пользователем значение
-   * @public
+      caretColor: this.isCursorVisible ? undefined : 'transparent' };var labelClassName = (0, _Emotion.cx)(_TokenInput.styles.label(theme), (_cx = {}, _cx[_TokenInput.styles.labelDisabled(theme)] = !!disabled, _cx[_TokenInput.styles.labelFocused(theme)] = !!inFocus, _cx[_TokenInput.styles.error(theme)] = !!error, _cx[_TokenInput.styles.warning(theme)] = !!warning, _cx));var inputClassName = (0, _Emotion.cx)(_TokenInput.styles.input(theme), (_cx2 = {}, _cx2[_TokenInput.styles.inputDisabled(theme)] = !!disabled, _cx2[_TokenInput.styles.inputEditing(theme)] = this.isEditingMode, _cx2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, /*#__PURE__*/_react.default.createElement("label", { ref: this.wrapperRef, style: { width: width }, className: labelClassName, onMouseDown: this.handleWrapperMouseDown, onMouseUp: this.handleWrapperMouseUp }, /*#__PURE__*/_react.default.createElement(_TextWidthHelper.TextWidthHelper, { ref: this.textHelperRef, classHelp: (0, _Emotion.cx)(_TokenInput.styles.helperText(theme), (_cx3 = {}, _cx3[_TokenInput.styles.helperTextEditing(theme)] = this.isEditingMode, _cx3)), text: inputValue, theme: this.theme }), this.renderTokensStart(), /*#__PURE__*/_react.default.createElement("textarea", { ref: this.inputRef, value: inputValue, style: inputInlineStyles, spellCheck: false, disabled: disabled, className: inputClassName, placeholder: selectedItems.length > 0 ? undefined : placeholder, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleChangeInputValue, onKeyDown: this.handleKeyDown, onPaste: this.handleInputPaste, inputMode: inputMode }), showMenu && /*#__PURE__*/_react.default.createElement(_TokenInputMenu.TokenInputMenu, { ref: this.tokensInputMenuRef, items: autocompleteItems, loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElement: menuAlign === 'cursor' ? this.input : this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: this.selectItem, renderAddButton: this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput.styles.reservedInput(theme) }, reservedInputValue) : null)));} /**
+   * Сбрасывает введенное пользователем значение
+   * @public
    */;_proto.reset = function reset() {this.dispatch({ type: 'RESET' });};_proto.isCursorVisibleForState = function isCursorVisibleForState(state) {return state.inFocus && (state.inputValue !== '' || 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.props.selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};(0, _createClass2.default)(TokenInput, [{ key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.props.valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.props.selectedItems;if (selectedItems && this.hasValueInItems(selectedItems, value)) {return false;}if (this.type === TokenInputType.Combined && this.state.inputValue !== '') {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$props4 = this.props,selectedItems = _this$props4.selectedItems,valueToString = _this$props4.valueToString;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);return TokenInput;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'TokenInput', _class2.defaultProps = { selectedItems: [], delimiters: [',', ' '], 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 }, _temp)) || _class);exports.TokenInput = TokenInput;
+      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.props.selectedItems;if (this.state.inputValue === '' && items && items.length > 0) {this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });}};(0, _createClass2.default)(TokenInput, [{ key: "showAddItemHint", get: function get() {var items = this.state.autocompleteItems;var value = this.props.valueToItem(this.state.inputValue);if (items && this.hasValueInItems(items, value)) {return false;}var selectedItems = this.props.selectedItems;if (selectedItems && this.hasValueInItems(selectedItems, value)) {return false;}if (this.type === TokenInputType.Combined && this.state.inputValue !== '') {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$props4 = this.props,selectedItems = _this$props4.selectedItems,valueToString = _this$props4.valueToString;if (this.isEditingMode) {return valueToString(selectedItems[editingTokenIndex]) !== inputValue;}return false;} }]);return TokenInput;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'TokenInput', _class2.defaultProps = { selectedItems: [], delimiters: [',', ' '], 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' }, _temp)) || _class) || _class);exports.TokenInput = TokenInput;