@skbkontur/react-ui 3.9.3 → 3.10.0-beta.1

package/cjs/components/Token/Token.styles.d.ts

@@ -1,29 +1,29 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    removeIcon: string;
-};
-export declare const styles: {
-    token(t: Theme): string;
-    disabled(t: Theme): string;
-    text(t: Theme): string;
-    removeIcon(t: Theme): string;
-};
-export declare const colorStyles: {
-    defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    defaultDisabled: (t: Theme) => string;
-    defaultDisabledWarning: (t: Theme) => string;
-    defaultDisabledError: (t: Theme) => string;
-    grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    redActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    white: (t: Theme, v: 'error' | 'warning' | null) => string;
-    black: (t: Theme, v: 'error' | 'warning' | null) => string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    removeIcon: string;
+};
+export declare const styles: {
+    token(t: Theme): string;
+    disabled(t: Theme): string;
+    text(t: Theme): string;
+    removeIcon(t: Theme): string;
+};
+export declare const colorStyles: {
+    defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultDisabled: (t: Theme) => string;
+    defaultDisabledWarning: (t: Theme) => string;
+    defaultDisabledError: (t: Theme) => string;
+    grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    white: (t: Theme, v: 'error' | 'warning' | null) => string;
+    black: (t: Theme, v: 'error' | 'warning' | null) => string;
+};

package/cjs/components/Token/index.d.ts

@@ -1 +1 @@
-export * from './Token';
+export * from './Token';

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

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-export interface TextWidthHelperProps {
-    text?: string;
-    classHelp: string;
-    theme: Theme;
-}
-/**
- * Херпер позволяет вычислить размеры блока с текстом
- * для последующего выставления размеров input
- */
-export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
-    private element;
-    render(): JSX.Element;
-    getTextWidth(): number;
-    getTextHeight(): number;
-    private elementRef;
-}
+import React from 'react';
+import { Theme } from '../../lib/theming/Theme';
+export interface TextWidthHelperProps {
+    text?: string;
+    classHelp: string;
+    theme: Theme;
+}
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */
+export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
+    private element;
+    render(): JSX.Element;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    private elementRef;
+}

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

@@ -1,193 +1,194 @@
-import React, { FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
-import { TokenProps } from '../Token';
-import { MenuItemState } from '../MenuItem';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare enum TokenInputType {
-    WithReference = 0,
-    WithoutReference = 1,
-    Combined = 2
-}
-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>;
-    autoFocus?: boolean;
-    type?: TokenInputType;
-    /**
-     * Ширина выпадающего меню может быть указана как 'auto'
-     * а также в пикселях, процентах (от ширины инпута)
-     * или других конкретных единицах
-     *
-     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
-     * (по ширине текста)
-     */
-    menuWidth: React.CSSProperties['width'];
-    menuAlign: TokenInputMenuAlign;
-    /**
-     * Функция поиска элементов, должна возвращать Promise с массивом элементов.
-     * По умолчанию ожидаются строки.
-     *
-     * Элементы могут быть любого типа. В этом случае необходимо определить
-     * свойства `renderItem`, `valueToString`
-     */
-    getItems?: (query: string) => Promise<T[]>;
-    hideMenuIfEmptyInputValue?: boolean;
-    renderItem: (item: T, state: MenuItemState) => React.ReactNode | null;
-    renderValue: (item: T) => React.ReactNode;
-    /**
-     * Функция должна возвращать строковое представление токена
-     * @default item => item
-     */
-    valueToString: (item: T) => string;
-    renderNotFound?: () => React.ReactNode;
-    valueToItem: (item: string) => T;
-    toKey: (item: T) => string | number | undefined;
-    placeholder?: string;
-    delimiters: string[];
-    /**
-     * Cостояние валидации при ошибке.
-     */
-    error?: boolean;
-    /**
-     * Cостояние валидации при предупреждении.
-     */
-    warning?: boolean;
-    disabled?: boolean;
-    width?: string | number;
-    maxMenuHeight?: number | string;
-    renderToken?: (item: T, props: Partial<TokenProps>) => ReactNode;
-    /**
-     * Вызывается при изменении текста в поле ввода,
-     */
-    onInputValueChange?: (value: string) => void;
-    /**
-     * Функция отрисовки кнопки добавления в выпадающем списке
-     */
-    renderAddButton?: (query?: string, onAddItem?: () => void) => ReactNode;
-    /**
-     * Функция для обработки ситуации, когда была введена
-     * строка в инпут и был потерян фокус с компонента
-     *
-     * Функция срабатывает с аргументом инпута строки
-     *
-     * Если при потере фокуса в выпадающем списке будет только один
-     * элемент и  результат `valueToString` с этим элементом будет
-     * совпадать со значение в текстовом поле, то
-     * сработает `onValueChange` со значением данного элемента
-     *
-     * Сама функция также может вернуть значение,
-     * неравное `undefined`, с которым будет вызван `onValueChange`.
-     * Если возвращаемое значение будет равно `null`,
-     * то сработает очистка текущего значения инпута,
-     * а в режиме редактирования токен будет удален
-     */
-    onUnexpectedInput?: (value: string) => void | null | undefined | T;
-    inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
-}
-export interface TokenInputState<T> {
-    autocompleteItems?: T[];
-    activeTokens: T[];
-    editingTokenIndex: number;
-    clickedToken?: T;
-    clickedTokenTimeout?: number;
-    inFocus?: boolean;
-    inputValue: string;
-    reservedInputValue: string | undefined;
-    inputValueWidth: number;
-    inputValueHeight: number;
-    preventBlur?: boolean;
-    loading?: boolean;
-}
-export declare const DefaultState: {
-    inputValue: string;
-    reservedInputValue: undefined;
-    autocompleteItems: undefined;
-    activeTokens: never[];
-    editingTokenIndex: number;
-    inFocus: boolean;
-    loading: boolean;
-    preventBlur: boolean;
-    inputValueWidth: number;
-    inputValueHeight: number;
-};
-export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<TokenInputProps<any>>;
-    state: TokenInputState<T>;
-    private readonly locale;
-    private theme;
-    private input;
-    private tokensInputMenu;
-    private textHelper;
-    private wrapper;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: TokenInputProps<T>, prevState: TokenInputState<T>): void;
-    componentWillUnmount(): void;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    render(): JSX.Element;
-    private renderMain;
-    /**
-     * Сбрасывает введенное пользователем значение
-     * @public
-     */
-    reset(): void;
-    private hasValueInItems;
-    private get showAddItemHint();
-    private get type();
-    private get menuRef();
-    private get isCursorVisible();
-    private get isEditingMode();
-    private isCursorVisibleForState;
-    private inputRef;
-    private tokensInputMenuRef;
-    private textHelperRef;
-    private wrapperRef;
-    private dispatch;
-    private updateInputTextWidth;
-    private handleInputFocus;
-    private handleInputBlur;
-    private handleOutsideBlur;
-    private get isInputChanged();
-    private get isInputValueChanged();
-    private get isTokenValueChanged();
-    private isBlurToMenu;
-    private handleWrapperMouseDown;
-    private handleWrapperMouseUp;
-    private handleCopy;
-    private handleInputPaste;
-    private tryGetItems;
-    private handleKeyDown;
-    private handleInputKeyDown;
-    private moveFocusToLastToken;
-    private focusInput;
-    private selectInputText;
-    private handleWrapperKeyDown;
-    private handleWrapperArrows;
-    private handleWrapperArrowsWithoutShift;
-    private handleWrapperArrowsWithShift;
-    private handleValueChange;
-    private handleAddItem;
-    private selectItem;
-    private handleRemoveToken;
-    private handleTokenClick;
-    private handleTokenEdit;
-    private finishTokenEdit;
-    private checkForUnexpectedInput;
-    private handleChangeInputValue;
-    private highlightMenuItem;
-    private renderTokensStart;
-    private renderTokensEnd;
-    private renderToken;
-    private renderAddButton;
-}
+import React, { FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { TokenProps } from '../Token';
+import { MenuItemState } from '../MenuItem';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare enum TokenInputType {
+    WithReference = 0,
+    WithoutReference = 1,
+    Combined = 2
+}
+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>;
+    autoFocus?: boolean;
+    type?: TokenInputType;
+    /**
+     * Ширина выпадающего меню может быть указана как 'auto'
+     * а также в пикселях, процентах (от ширины инпута)
+     * или других конкретных единицах
+     *
+     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
+     * (по ширине текста)
+     */
+    menuWidth: React.CSSProperties['width'];
+    menuAlign: TokenInputMenuAlign;
+    /**
+     * Функция поиска элементов, должна возвращать Promise с массивом элементов.
+     * По умолчанию ожидаются строки.
+     *
+     * Элементы могут быть любого типа. В этом случае необходимо определить
+     * свойства `renderItem`, `valueToString`
+     */
+    getItems?: (query: string) => Promise<T[]>;
+    hideMenuIfEmptyInputValue?: boolean;
+    renderItem: (item: T, state: MenuItemState) => React.ReactNode | null;
+    renderValue: (item: T) => React.ReactNode;
+    /**
+     * Функция должна возвращать строковое представление токена
+     * @default item => item
+     */
+    valueToString: (item: T) => string;
+    renderNotFound?: () => React.ReactNode;
+    valueToItem: (item: string) => T;
+    toKey: (item: T) => string | number | undefined;
+    placeholder?: string;
+    delimiters: string[];
+    /**
+     * Cостояние валидации при ошибке.
+     */
+    error?: boolean;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
+    warning?: boolean;
+    disabled?: boolean;
+    width?: string | number;
+    maxMenuHeight?: number | string;
+    renderToken?: (item: T, props: Partial<TokenProps>) => ReactNode;
+    /**
+     * Вызывается при изменении текста в поле ввода,
+     */
+    onInputValueChange?: (value: string) => void;
+    /**
+     * Функция отрисовки кнопки добавления в выпадающем списке
+     */
+    renderAddButton?: (query?: string, onAddItem?: () => void) => ReactNode;
+    /**
+     * Функция для обработки ситуации, когда была введена
+     * строка в инпут и был потерян фокус с компонента
+     *
+     * Функция срабатывает с аргументом инпута строки
+     *
+     * Если при потере фокуса в выпадающем списке будет только один
+     * элемент и  результат `valueToString` с этим элементом будет
+     * совпадать со значение в текстовом поле, то
+     * сработает `onValueChange` со значением данного элемента
+     *
+     * Сама функция также может вернуть значение,
+     * неравное `undefined`, с которым будет вызван `onValueChange`.
+     * Если возвращаемое значение будет равно `null`,
+     * то сработает очистка текущего значения инпута,
+     * а в режиме редактирования токен будет удален
+     */
+    onUnexpectedInput?: (value: string) => void | null | undefined | T;
+    inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
+}
+export interface TokenInputState<T> {
+    autocompleteItems?: T[];
+    activeTokens: T[];
+    editingTokenIndex: number;
+    clickedToken?: T;
+    clickedTokenTimeout?: number;
+    inFocus?: boolean;
+    inputValue: string;
+    reservedInputValue: string | undefined;
+    inputValueWidth: number;
+    inputValueHeight: number;
+    preventBlur?: boolean;
+    loading?: boolean;
+}
+export declare const DefaultState: {
+    inputValue: string;
+    reservedInputValue: undefined;
+    autocompleteItems: undefined;
+    activeTokens: never[];
+    editingTokenIndex: number;
+    inFocus: boolean;
+    loading: boolean;
+    preventBlur: boolean;
+    inputValueWidth: number;
+    inputValueHeight: number;
+};
+export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: Partial<TokenInputProps<any>>;
+    state: TokenInputState<T>;
+    private readonly locale;
+    private theme;
+    private input;
+    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;
+    /**
+     * Сбрасывает введенное пользователем значение
+     * @public
+     */
+    reset(): void;
+    private hasValueInItems;
+    private get showAddItemHint();
+    private get type();
+    private get menuRef();
+    private get isCursorVisible();
+    private get isEditingMode();
+    private isCursorVisibleForState;
+    private inputRef;
+    private tokensInputMenuRef;
+    private textHelperRef;
+    private wrapperRef;
+    private dispatch;
+    private updateInputTextWidth;
+    private handleInputFocus;
+    private handleInputBlur;
+    private handleOutsideBlur;
+    private get isInputChanged();
+    private get isInputValueChanged();
+    private get isTokenValueChanged();
+    private isBlurToMenu;
+    private handleWrapperMouseDown;
+    private handleWrapperMouseUp;
+    private handleCopy;
+    private handleInputPaste;
+    private tryGetItems;
+    private handleKeyDown;
+    private handleInputKeyDown;
+    private moveFocusToLastToken;
+    private focusInput;
+    private selectInputText;
+    private handleWrapperKeyDown;
+    private handleWrapperArrows;
+    private handleWrapperArrowsWithoutShift;
+    private handleWrapperArrowsWithShift;
+    private handleValueChange;
+    private handleAddItem;
+    private selectItem;
+    private handleRemoveToken;
+    private handleTokenClick;
+    private handleTokenEdit;
+    private finishTokenEdit;
+    private checkForUnexpectedInput;
+    private handleChangeInputValue;
+    private highlightMenuItem;
+    private renderTokensStart;
+    private renderTokensEnd;
+    private renderToken;
+    private renderAddButton;
+}

package/cjs/components/TokenInput/TokenInput.js

@@ -1,5 +1,4 @@
-"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");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 _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 _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -26,6 +25,7 @@ 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");
@@ -170,7 +170,8 @@ 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.
 
 
 
@@ -199,6 +200,7 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
     tokensInputMenu = null;_this.
     textHelper = null;_this.
     wrapper = null;_this.
+    setRootNode = void 0;_this.
 
 
 
@@ -538,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)) {
@@ -1007,9 +1009,9 @@ TokenInput = (_dec = (0, _decorators.locale)('TokenInput', _locale.TokenInputLoc
    */;_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, _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, 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)));} /**
+      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, menuWidth: 'auto', menuAlign: 'cursor' }, _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;