@skbkontur/react-ui 4.2.2 → 4.3.0

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

@@ -9,12 +9,12 @@ export declare enum TokenInputType {
 }
 export declare type TokenInputMenuAlign = 'left' | 'cursor';
 export interface TokenInputProps<T> extends CommonProps {
-    selectedItems: T[];
-    onValueChange: (items: T[]) => void;
-    onMouseEnter: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave: MouseEventHandler<HTMLDivElement>;
-    onFocus: FocusEventHandler<HTMLTextAreaElement>;
-    onBlur: FocusEventHandler<HTMLTextAreaElement>;
+    selectedItems?: T[];
+    onValueChange?: (items: T[]) => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     autoFocus?: boolean;
     type?: TokenInputType;
     /**
@@ -25,8 +25,8 @@ export interface TokenInputProps<T> extends CommonProps {
      * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
      * (по ширине текста)
      */
-    menuWidth: React.CSSProperties['width'];
-    menuAlign: TokenInputMenuAlign;
+    menuWidth?: React.CSSProperties['width'];
+    menuAlign?: TokenInputMenuAlign;
     /**
      * Функция поиска элементов, должна возвращать Promise с массивом элементов.
      * По умолчанию ожидаются строки.
@@ -36,13 +36,13 @@ export interface TokenInputProps<T> extends CommonProps {
      */
     getItems?: (query: string) => Promise<T[]>;
     hideMenuIfEmptyInputValue?: boolean;
-    renderItem: (item: T, state: MenuItemState) => React.ReactNode | null;
-    renderValue: (item: T) => React.ReactNode;
+    renderItem?: (item: T, state: MenuItemState) => React.ReactNode | null;
+    renderValue?: (item: T) => React.ReactNode;
     /**
      * Функция должна возвращать строковое представление токена
      * @default item => item
      */
-    valueToString: (item: T) => string;
+    valueToString?: (item: T) => string;
     /**
      * Функция отображающая сообщение об общем количестве элементов.
      * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`.
@@ -54,10 +54,10 @@ export interface TokenInputProps<T> extends CommonProps {
      */
     totalCount?: number;
     renderNotFound?: () => React.ReactNode;
-    valueToItem: (item: string) => T;
-    toKey: (item: T) => string | number | undefined;
+    valueToItem?: (item: string) => T;
+    toKey?: (item: T) => string | number | undefined;
     placeholder?: string;
-    delimiters: string[];
+    delimiters?: string[];
     /**
      * Состояние валидации при ошибке.
      */
@@ -128,9 +128,11 @@ export declare const TokenInputDataTids: {
     readonly root: "TokenInput__root";
     readonly tokenInputMenu: "TokenInputMenu__root";
 };
+declare type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<TokenInputProps<any>>;
+    static defaultProps: DefaultProps<any>;
+    private getProps;
     state: TokenInputState<T>;
     private readonly locale;
     private theme;
@@ -140,7 +142,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private wrapper;
     private setRootNode;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: TokenInputProps<T>, prevState: TokenInputState<T>): void;
+    componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
     componentWillUnmount(): void;
     /**
      * @public
@@ -206,3 +208,4 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private renderToken;
     private renderAddButton;
 }
+export {};

package/cjs/components/TokenInput/TokenInput.js

@@ -26,6 +26,7 @@ var _MenuItem = require("../MenuItem/MenuItem");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _locale = require("./locale");
 var _TokenInput = require("./TokenInput.styles");
@@ -146,7 +147,6 @@ TokenInputType;exports.TokenInputType = TokenInputType;(function (TokenInputType
 
 
 
-
 
 
 var DefaultState = {
@@ -167,6 +167,27 @@ var TokenInputDataTids = {
   tokenInputMenu: 'TokenInputMenu__root' };exports.TokenInputDataTids = TokenInputDataTids;
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 var defaultToKey = function defaultToKey(item) {return item.toString();};
 var identity = function identity(item) {return item;};
 var defaultRenderToken = function defaultRenderToken(
@@ -208,6 +229,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(TokenInput.defaultProps);_this.
+
     state = DefaultState;_this.
 
 
@@ -397,11 +420,6 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
 
 
-
-
-
-
-
 
 
 
@@ -477,9 +495,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
     handleInputFocus = function (event) {
       _this.dispatch({ type: 'SET_FOCUS_IN' });
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
+      _this.getProps().onFocus(event);
     };_this.
 
     handleInputBlur = function (event) {
@@ -498,13 +514,12 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         _this.dispatch({ type: 'SET_PREVENT_BLUR', payload: false });
       } else {
         _this.dispatch({ type: 'BLUR' });
-        _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
+        _this.getProps().onBlur(event);
       }
     };_this.
 
     handleOutsideBlur = function () {
       var _this$state = _this.state,inputValue = _this$state.inputValue,autocompleteItems = _this$state.autocompleteItems;
-      var valueToString = _this.props.valueToString;
 
       if (inputValue === '') {
         // если стерли содержимое токена в режиме редактирования, то удаляем токен
@@ -524,7 +539,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       if (autocompleteItems && autocompleteItems.length === 1) {
         var _item = autocompleteItems[0];
 
-        if (valueToString(_item) === inputValue) {
+        if (_this.getProps().valueToString(_item) === inputValue) {
           _this.isEditingMode ? _this.finishTokenEdit() : _this.selectItem(_item);
 
           return;
@@ -592,14 +607,14 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         return;
       }
       event.preventDefault();
-
+      var _this$getProps = _this.getProps(),selectedItems = _this$getProps.selectedItems,valueToString = _this$getProps.valueToString,delimiters = _this$getProps.delimiters;
       // упорядочивание токенов по индексу
       var tokens = _this.state.activeTokens.
-      map(function (token) {return _this.props.selectedItems.indexOf(token);}).
+      map(function (token) {return selectedItems.indexOf(token);}).
       sort().
-      map(function (index) {return _this.props.selectedItems[index];}).
-      map(function (item) {return _this.props.valueToString(item);});
-      event.clipboardData.setData('text/plain', tokens.join(_this.props.delimiters[0]));
+      map(function (index) {return selectedItems[index];}).
+      map(function (item) {return valueToString(item);});
+      event.clipboardData.setData('text/plain', tokens.join(delimiters[0]));
     };_this.
 
     handleInputPaste = function (event) {
@@ -607,7 +622,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         return;
       }
       var paste = event.clipboardData.getData('text');
-      var delimiters = _this.props.delimiters;
+      var _this$getProps2 = _this.getProps(),delimiters = _this$getProps2.delimiters,selectedItems = _this$getProps2.selectedItems,valueToItem = _this$getProps2.valueToItem,onValueChange = _this$getProps2.onValueChange;
       if (delimiters.some(function (delimiter) {return paste.includes(delimiter);})) {
         event.preventDefault();
         event.stopPropagation();
@@ -616,34 +631,35 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         }
         var tokens = paste.split(delimiters[0]);
         var _items = tokens.
-        map(function (token) {return _this.props.valueToItem(token);}).
-        filter(function (item) {return !_this.hasValueInItems(_this.props.selectedItems, item);});
-        var newItems = _this.props.selectedItems.concat(_items);
-        _this.props.onValueChange(newItems);
+        map(function (token) {return valueToItem(token);}).
+        filter(function (item) {return !_this.hasValueInItems(selectedItems, item);});
+        var newItems = selectedItems.concat(_items);
+        onValueChange(newItems);
 
         _this.dispatch({ type: 'SET_AUTOCOMPLETE_ITEMS', payload: undefined });
         _this.tryGetItems();
       }
     };_this.
 
-    tryGetItems = /*#__PURE__*/function () {var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {var autocompleteItems, 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.state.inputValue !== '' || !_this.props.hideMenuIfEmptyInputValue))) {_context.next = 14;break;}
+    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 (!(
+                _this.props.getItems && (_this.state.inputValue !== '' || !_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.dispatch({ type: 'SET_LOADING', payload: false });_this$getProps3 =
 
-                isSelectedItem = function isSelectedItem(item) {return _this.hasValueInItems(_this.props.selectedItems, item);};
+                _this.getProps(), selectedItems = _this$getProps3.selectedItems, valueToItem = _this$getProps3.valueToItem, valueToString = _this$getProps3.valueToString;
+                isSelectedItem = function isSelectedItem(item) {return _this.hasValueInItems(selectedItems, item);};
                 isEditingItem = function isEditingItem(item) {
-                  var editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  var editingItem = selectedItems[_this.state.editingTokenIndex];
                   return !!editingItem && (0, _lodash.default)(item, editingItem);
                 };
 
                 autocompleteItemsUnique = autocompleteItems.filter(function (item) {return !isSelectedItem(item) || isEditingItem(item);});
 
                 if (_this.isEditingMode) {
-                  editingItem = _this.props.selectedItems[_this.state.editingTokenIndex];
+                  editingItem = selectedItems[_this.state.editingTokenIndex];
                   if (
-                  (0, _lodash.default)(editingItem, _this.props.valueToItem(_this.state.inputValue)) &&
+                  (0, _lodash.default)(editingItem, valueToItem(_this.state.inputValue)) &&
                   !_this.hasValueInItems(autocompleteItemsUnique, editingItem))
                   {
                     autocompleteItemsUnique.unshift(editingItem);
@@ -657,11 +673,11 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
                   });
                 }
                 selectItemIndex = autocompleteItemsUnique.findIndex(
-                function (item) {return _this.props.valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();});
+                function (item) {return valueToString(item).toLowerCase() === _this.state.inputValue.toLowerCase();});
 
                 if (_this.menuRef) {
                   _this.menuRef.highlightItem(selectItemIndex < 0 ? 0 : selectItemIndex);
-                }case 14:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref2.apply(this, arguments);};}();_this.
+                }case 15:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref2.apply(this, arguments);};}();_this.
 
 
 
@@ -678,7 +694,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
       if (
       _this.type !== TokenInputType.WithReference &&
-      _this.props.delimiters.some(function (key) {return key === e.key || key === ',' && (0, _identifiers.isKeyComma)(e);}) ||
+      _this.getProps().delimiters.some(function (key) {return key === e.key || key === ',' && (0, _identifiers.isKeyComma)(e);}) ||
       (0, _identifiers.isKeyEnter)(e) && _this.type === TokenInputType.WithoutReference)
       {
         e.preventDefault();
@@ -745,14 +761,13 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
     };_this.
 
     handleWrapperKeyDown = function (e) {var _this$wrapper2;
+      var _this$getProps4 = _this.getProps(),selectedItems = _this$getProps4.selectedItems,onValueChange = _this$getProps4.onValueChange;
       switch (true) {
         case (0, _identifiers.isKeyBackspace)(e):
         case (0, _identifiers.isKeyDelete)(e):{
             if (!_this.isEditingMode) {
-              var itemsNew = _this.props.selectedItems.filter(
-              function (item) {return !_this.hasValueInItems(_this.state.activeTokens, item);});
-
-              _this.props.onValueChange(itemsNew);
+              var itemsNew = selectedItems.filter(function (item) {return !_this.hasValueInItems(_this.state.activeTokens, item);});
+              onValueChange(itemsNew);
               _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () {var _this$input6;
                 LayoutEvents.emit();
                 (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus();
@@ -776,7 +791,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           e.preventDefault();
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: _this.props.selectedItems });
+            payload: selectedItems });
 
           break;}
 
@@ -784,11 +799,12 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
     handleWrapperArrows = function (e) {
       e.preventDefault();
+      var selectedItems = _this.getProps().selectedItems;
       var activeTokens = _this.state.activeTokens;
-      var activeItemIndex = _this.props.selectedItems.indexOf(activeTokens[0]);
+      var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
       var newItemIndex = activeItemIndex + ((0, _identifiers.isKeyArrowLeft)(e) ? -1 : +1);
       var isLeftEdge = activeItemIndex === 0 && (0, _identifiers.isKeyArrowLeft)(e);
-      var isRightEdge = activeItemIndex === _this.props.selectedItems.length - 1 && (0, _identifiers.isKeyArrowRight)(e);
+      var isRightEdge = activeItemIndex === selectedItems.length - 1 && (0, _identifiers.isKeyArrowRight)(e);
       if (!e.shiftKey && activeTokens.length === 1) {
         _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
       } else {
@@ -802,35 +818,34 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
       } else if (!isLeftEdge) {
         _this.dispatch({
           type: 'SET_ACTIVE_TOKENS',
-          payload: [_this.props.selectedItems[newItemIndex]] });
+          payload: [_this.getProps().selectedItems[newItemIndex]] });
 
       }
     };_this.
 
     handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
       if (!isLeftEdge && !isRightEdge) {
-        var itemNew = _this.props.selectedItems[newItemIndex];
+        var itemNew = _this.getProps().selectedItems[newItemIndex];
         var itemsNew = [itemNew].concat(_this.state.activeTokens.filter(function (item) {return !(0, _lodash.default)(item, itemNew);}));
         _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: itemsNew });
       }
     };_this.
 
     handleValueChange = function (items) {
-      _this.props.onValueChange(items);
+      _this.getProps().onValueChange(items);
     };_this.
 
     handleAddItem = function () {
-      var item = _this.props.valueToItem(_this.state.inputValue);
+      var item = _this.getProps().valueToItem(_this.state.inputValue);
       if (item) {
         _this.selectItem(item);
       }
     };_this.
 
     selectItem = function (item) {
-      var selectedItems = _this.props.selectedItems;
-
+      var _this$getProps5 = _this.getProps(),selectedItems = _this$getProps5.selectedItems,valueToString = _this$getProps5.valueToString;
       if (_this.isEditingMode) {
-        _this.dispatch({ type: 'UPDATE_QUERY', payload: _this.props.valueToString(item) }, _this.finishTokenEdit);
+        _this.dispatch({ type: 'UPDATE_QUERY', payload: valueToString(item) }, _this.finishTokenEdit);
       } else if (!_this.hasValueInItems(selectedItems, item)) {
         _this.handleValueChange(selectedItems.concat([item]));
         _this.dispatch({ type: 'CLEAR_INPUT' });
@@ -839,7 +854,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
     };_this.
 
     handleRemoveToken = function (item) {
-      _this.props.onValueChange(_this.props.selectedItems.filter(function (_) {return !(0, _lodash.default)(_, item);}));
+      _this.props.onValueChange == null ? void 0 : _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.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: filteredActiveTokens });
@@ -864,7 +879,8 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
     };_this.
 
     handleTokenEdit = function (itemNew) {
-      var editingTokenIndex = _this.props.selectedItems.findIndex(function (item) {return item === itemNew;});
+      var _this$getProps6 = _this.getProps(),selectedItems = _this$getProps6.selectedItems,valueToString = _this$getProps6.valueToString;
+      var editingTokenIndex = selectedItems.findIndex(function (item) {return item === itemNew;});
       _this.dispatch({ type: 'SET_EDITING_TOKEN_INDEX', payload: editingTokenIndex });
 
       if (_this.state.inputValue !== '') {
@@ -872,16 +888,16 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
           _this.dispatch({ type: 'SET_TEMPORARY_QUERY', payload: _this.state.inputValue });
         }
       }
-      _this.dispatch({ type: 'UPDATE_QUERY', payload: _this.props.valueToString(itemNew) }, _this.selectInputText);
+      _this.dispatch({ type: 'UPDATE_QUERY', payload: valueToString(itemNew) }, _this.selectInputText);
       _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' });
 
       _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 _this$props = _this.props,selectedItems = _this$props.selectedItems,valueToItem = _this$props.valueToItem;
-      var editedItem = valueToItem(inputValue);
+      var editedItem = _this.getProps().valueToItem(inputValue);
       var newItems = selectedItems.concat([]);
 
       if (!_this.hasValueInItems(selectedItems, editedItem)) {
@@ -962,19 +978,21 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
 
     renderTokensStart = function () {
       var editingTokenIndex = _this.state.editingTokenIndex;
-      var selectedItems = _this.props.selectedItems;
+      var selectedItems = _this.getProps().selectedItems;
       var delimiter = editingTokenIndex >= 0 ? editingTokenIndex : selectedItems.length;
       return selectedItems.slice(0, delimiter).map(_this.renderToken);
     };_this.
 
     renderTokensEnd = function () {
       if (_this.state.editingTokenIndex >= 0) {
-        return _this.props.selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
+        return _this.getProps().
+        selectedItems.slice(_this.state.editingTokenIndex + 1).
+        map(_this.renderToken);
       }
     };_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;
+      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;
 
       var isActive = _this.state.activeTokens.includes(item);
 
@@ -1026,11 +1044,11 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
         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);} /**
+    };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.getProps().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,renderTotalCount = _this$props3.renderTotalCount,totalCount = _this$props3.totalCount;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 автоматически перенёсся на следующую строку при необходимости
+   */;_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$props2 = this.props,maxMenuHeight = _this$props2.maxMenuHeight,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,placeholder = _this$props2.placeholder,renderNotFound = _this$props2.renderNotFound,hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,inputMode = _this$props2.inputMode,renderTotalCount = _this$props2.renderTotalCount,totalCount = _this$props2.totalCount;var _this$getProps7 = this.getProps(),selectedItems = _this$getProps7.selectedItems,width = _this$getProps7.width,onMouseEnter = _this$getProps7.onMouseEnter,onMouseLeave = _this$getProps7.onMouseLeave,menuWidth = _this$getProps7.menuWidth,menuAlign = _this$getProps7.menuAlign,renderItem = _this$getProps7.renderItem;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, _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", { "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 }, /*#__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, renderTotalCount: renderTotalCount, totalCount: totalCount }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/_react.default.createElement("span", { className: _TokenInput.styles.reservedInput(theme) }, reservedInputValue) : null)));} /**
@@ -1038,4 +1056,4 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
    * @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, menuWidth: 'auto', menuAlign: 'cursor' }, _temp)) || _class) || _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.getProps().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.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.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$getProps8 = this.getProps(),valueToString = _this$getProps8.valueToString,selectedItems = _this$getProps8.selectedItems;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;