@skbkontur/react-ui 0.0.0-fed57d84fb → 0.7.0-beta.1

package/components/TokenInput/TextWidthHelper.js

@@ -0,0 +1,72 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { getDOMRect } from '../../lib/dom/getDOMRect.js';
+import { TokenView } from '../Token/TokenView.js';
+import { getStyles } from '../Token/Token.styles.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+// a thin character to preserve some space
+// for the caret visibillity in the input
+var THIN_SPACE = '\u2009';
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */
+var TextWidthHelper = /** @class */ (function (_super) {
+    __extends(TextWidthHelper, _super);
+    function TextWidthHelper() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.element = null;
+        _this.elementRef = function (node) {
+            _this.element = node;
+        };
+        return _this;
+    }
+    TextWidthHelper.prototype.getSizeClassName = function (size) {
+        switch (size) {
+            case 'large':
+                return this.styles.helperContainerLarge(this.props.theme);
+            case 'medium':
+                return this.styles.helperContainerMedium(this.props.theme);
+            case 'small':
+            default:
+                return this.styles.helperContainerSmall(this.props.theme);
+        }
+    };
+    TextWidthHelper.prototype.render = function () {
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(TokenView, { size: this.props.size, className: this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size)) },
+            React.createElement("div", { className: this.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE)));
+    };
+    TextWidthHelper.prototype.getTextWidth = function () {
+        return getDOMRect(this.element).width;
+    };
+    TextWidthHelper.prototype.getTextHeight = function () {
+        return getDOMRect(this.element).height;
+    };
+    TextWidthHelper = __decorate([
+        withRenderEnvironment
+    ], TextWidthHelper);
+    return TextWidthHelper;
+}(React.Component));
+export { TextWidthHelper };
+//# sourceMappingURL=TextWidthHelper.js.map

package/components/TokenInput/TextWidthHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["../../../components/TokenInput/TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,0CAA0C;AAC1C,yCAAyC;AACzC,IAAM,UAAU,GAAG,QAAQ,CAAC;AAY5B;;;GAGG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAwCtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAtCS,0CAAgB,GAAxB,UAAyB,IAAe;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5D,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7D,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAEM,gCAAM,GAAb;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAEzF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAC3D,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACI,CACb,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;IAvCU,eAAe;QAD3B,qBAAqB;OACT,eAAe,CA4C3B;IAAD,sBAAC;CAAA,AA5CD,CAAqC,KAAK,CAAC,SAAS,GA4CnD;SA5CY,eAAe","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { TokenView } from '../Token/TokenView.js';\nimport type { TokenSize } from '../Token/index.js';\nimport { getStyles } from '../Token/Token.styles.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return this.styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return this.styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return this.styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <TokenView\n        size={this.props.size}\n        className={this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={this.styles.helperText()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </TokenView>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => {\n    this.element = node;\n  };\n}\n"]}

package/components/TokenInput/TokenInput.d.ts

@@ -1,208 +1,239 @@
-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;
-    /**
-     * Функция отображающая сообщение об общем количестве элементов.
-     * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`.
-     */
-    renderTotalCount?: (found: number, total: number) => React.ReactNode;
-    /**
-     * Общее количество элементов.
-     * Необходим для работы `renderTotalCount`
-     */
-    totalCount?: number;
-    renderNotFound?: () => React.ReactNode;
-    valueToItem: (item: string) => T;
-    toKey: (item: T) => string | number | undefined;
-    placeholder?: string;
-    delimiters: string[];
-    /**
-     * Состояние валидации при ошибке.
-     */
-    error?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
-    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 const TokenInputDataTids: {
-    readonly root: "TokenInput__root";
-    readonly tokenInputMenu: "TokenInputMenu__root";
-};
-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;
-}
+import type { AriaAttributes, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { TokenProps, TokenSize } from '../Token/index.js';
+import type { MenuItemState } from '../MenuItem/index.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+export declare enum TokenInputType {
+    WithReference = 0,
+    WithoutReference = 1,
+    Combined = 2
+}
+export type TokenInputMenuAlign = 'left' | 'cursor';
+export interface TokenInputProps<T> extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'> {
+    /** Токены, которые будут отображаться в поле ввода. */
+    selectedItems?: T[];
+    /** Событие добавления нового токена. */
+    onValueChange?: (items: T[]) => void;
+    /** HTML-событие `onmouseenter`.
+     * @ignore */
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    /** HTML-событие `onmouseleave`.
+     * @ignore */
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    /** HTML-событие `onfocus`.
+     * @ignore */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /** HTML-событие `onblur`.
+     * @ignore */
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /** HTML-событие `onkeydown`. */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /** Устанавливает фокус на поле с токенами после окончания загрузки страницы. */
+    autoFocus?: boolean;
+    /** Размер поля с токенами. */
+    size?: TokenSize;
+    /** Тип инпута.
+     * Возможные значения:
+     * - `TokenInputType.Combined` — в поле можно выбирать значения из справочника и добавлять свои значения.
+     * - `TokenInputType.WithReference` — можно только выбрать значения из справочника, но нельзя добавлять свои.
+     * - `TokenInputType.WithoutReference` — можно добавлять любые значения, но подсказок из справочника нет. */
+    type?: TokenInputType;
+    /** Ширина выпадающего списка. */
+    menuWidth?: React.CSSProperties['width'];
+    /** Выравнивание выпадающего списка. */
+    menuAlign?: TokenInputMenuAlign;
+    /** Задаёт функцию поиска значений, которая должна возвращать Promise с массивом значений. По умолчанию ожидаются строки.
+     * Элементы могут быть любого типа. В этом случае необходимо определить свойства `renderItem`, `valueToString`. */
+    getItems?: (query: string) => Promise<Array<TokenInputExtendedItem<T>>>;
+    /** Ограничивает отображение выпадающего списка при фокусе на пустом поле: выпадающий список появится, только когда будет введён хотя бы один символ токена. */
+    hideMenuIfEmptyInputValue?: boolean;
+    /** Отрисовывает элемент списка. */
+    renderItem?: (item: T, state: MenuItemState) => React.ReactNode | null;
+    /** Отрисовывает выбранное значение. */
+    renderValue?: (item: T) => React.ReactNode;
+    /** Возвращает строковое представление `value`. Необходимо при фокусировке.
+     * @default item => item */
+    valueToString?: (item: T) => string;
+    /** Отрисовывает сообщение об общем количестве элементов.
+     * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им оборачиваются элементы, возвращаемые `getItems()`.
+     * @param {number} total - количество всех элементов. */
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    /** Определяет общее количество элементов. Необходим для работы `renderTotalCount`. */
+    totalCount?: number;
+    /** Отрисовывает сообщение о пустом результате поиска. При `renderAddButton` не работает. */
+    renderNotFound?: () => React.ReactNode;
+    /** Преобразует значение в элемент списка. */
+    valueToItem?: (value: string) => T;
+    /** Сравнивает полученные результаты с `value`. */
+    itemToId?: (item: T) => string | number | undefined;
+    /** Текст, который отображается если не введено никакое значение. */
+    placeholder?: string;
+    /** Символы, которые разделяют введённый текст на токены. По умолчанию — запятая. */
+    delimiters?: string[];
+    /** Меняет визуальное отображение токена на состояние «ошибка». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). */
+    error?: boolean;
+    /** Меняет визуальное отображение токена на состояние «предупреждение». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). */
+    warning?: boolean;
+    /** Блокирует поле с токенами. */
+    disabled?: boolean;
+    /** Ширина поля с токенами. */
+    width?: string | number;
+    /** Максимальная высота выпадающего списка. */
+    maxMenuHeight?: number | string;
+    /** Отрисовывает токен и даёт возможность кастомизировать внешний вид и поведение токена. */
+    renderToken?: (item: T, props: Partial<TokenProps>, index: number) => 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'];
+    /**
+     * Максимальная высота компонента. При её достижении появится скроллбар
+     */
+    maxHeight?: number;
+}
+export interface TokenInputState<T> {
+    autocompleteItems?: Array<TokenInputExtendedItem<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 type TokenInputExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;
+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 const TokenInputDataTids: {
+    readonly root: "TokenInput__root";
+    readonly tokenInputMenu: "TokenInputMenu__root";
+    readonly label: "TokenInput__label";
+};
+type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'itemToId' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
+/** Поле с токенами — это поле ввода со списком подсказок. Значения в поле отображаются в виде отдельных токенов — компонент [Token](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-tokeninput-token--docs).
+ */
+export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps<any>;
+    private getDelimiters;
+    private getProps;
+    private get textareaId();
+    state: TokenInputState<T>;
+    private readonly _textareaId;
+    private rootId;
+    private readonly locale;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
+    private size;
+    private input;
+    private tokensInputMenu;
+    private textHelper;
+    private wrapper;
+    private scrollContainerRef;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private memoizedTokens;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
+    componentWillUnmount(): void;
+    /** Программно устанавливает фокус на поле.
+     * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
+     * @public
+     */
+    focus(): void;
+    /** Программно снимает фокус с поля.
+     * @public
+     */
+    blur(): void;
+    /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
+     * @public
+     */
+    blink(): void;
+    render(): React.JSX.Element;
+    private getLabelSizeClassName;
+    private getInputSizeClassName;
+    private renderMain;
+    /**
+     * Сбрасывает введённое пользователем значение.
+     * @public
+     */
+    reset(): void;
+    private isEqual;
+    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;
+    private isTokenDisabled;
+    private getAvailableTokenIndex;
+}
+export {};