@skbkontur/react-ui 5.4.7-1b16b.0 → 5.4.7-7ccf0.0

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -0,0 +1,71 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
+
+var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _TokenView = require("../Token/TokenView");
+
+var _Token = require("../Token/Token.styles");
+var _renderEnvironment = require("../../lib/renderEnvironment");var _class;
+
+// a thin character to preserve some space
+// for the caret visibillity in the input
+var THIN_SPACE = "\u2009";
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */var
+
+TextWidthHelper = exports.TextWidthHelper = (0, _renderEnvironment.withRenderEnvironment)(_class = /*#__PURE__*/function (_React$Component) {function TextWidthHelper() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+    element = null;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}(0, _inheritsLoose2.default)(TextWidthHelper, _React$Component);var _proto = TextWidthHelper.prototype;_proto.getSizeClassName = function getSizeClassName(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);}};_proto.render = function render() {this.styles = (0, _Token.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size, className: this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size)) }, /*#__PURE__*/_react.default.createElement("div", { className: this.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component)) || _class;

package/cjs/components/TokenInput/TextWidthHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_getDOMRect","_TokenView","_Token","_renderEnvironment","_class","THIN_SPACE","TextWidthHelper","exports","withRenderEnvironment","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose2","default","_proto","prototype","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","getStyles","emotion","createElement","TokenView","className","cx","helperContainer","helperText","ref","text","getTextWidth","getDOMRect","width","getTextHeight","height","React","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { TokenSize } from '../Token';\nimport { getStyles } from '../Token/Token.styles';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\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() {\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) => (this.element = node);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,246 @@
+import type { AriaAttributes, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { TokenProps, TokenSize } from '../Token';
+import type { MenuItemState } from '../MenuItem';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
+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.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые).
+     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать).
+     *   `TokenInputType.Combined` (можно и выбирать, и добавлять). */
+    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;
+    /** Задает функцию, которая отображает заданное содержимое при пустом результате поиска. Не работает, если рендерится `AddButton`. */
+    renderNotFound?: () => React.ReactNode;
+    /** Преобразует значение в элемент списка. */
+    valueToItem?: (value: string) => T;
+    /** @deprecated Используйте `itemToId` вместо `toKey`. */
+    toKey?: (item: T) => string | number | undefined;
+    /** Задает функцию сравнения полученных результатов с value. */
+    itemToId?: (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>, 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?: 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";
+    readonly label: "TokenInput__label";
+};
+type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'itemToId' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
+/**
+ * Поле с токенами `TokenInput` — это поле ввода со списком подсказок.
+ *
+ * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
+ */
+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 {};