@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-e2bc4.0

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { Theme } from '../../lib/theming/Theme';
-import type { TokenSize } from '../Token';
-export interface TextWidthHelperProps {
-    /** Задает текст в поле ввода, еще не ставший токеном. */
-    text?: string;
-    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
-    theme: Theme;
-    /** Задает размер контрола. */
-    size: TokenSize;
-}
-/**
- * Херпер позволяет вычислить размеры блока с текстом
- * для последующего выставления размеров input
- */
-export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
-    private element;
-    private emotion;
-    private cx;
-    private styles;
-    private getSizeClassName;
-    render(): React.JSX.Element;
-    getTextWidth(): number;
-    getTextHeight(): number;
-    private elementRef;
-}

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,73 +0,0 @@
-"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) {
-      _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

@@ -1 +0,0 @@
-{"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(): 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"],"mappings":"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","ignoreList":[]}

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

@@ -1,241 +0,0 @@
-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.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;
-    /** @deprecated Используйте `itemToId` вместо `toKey`. */
-    toKey?: (item: T) => string | number | undefined;
-    /** Сравнивает полученные результаты с `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 {};