@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/cjs/components/Token/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Token';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Token';\n"]}

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

@@ -1,10 +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;
 }

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,18 +1,23 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-var _RenderContainer = require("../../internal/RenderContainer");
 
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
+var _TokenInput = require("./TokenInput.styles");
 
+// a thin character to preserve some space
+// for the caret visibillity in the input
+var THIN_SPACE = "\u2009";
 
 
-var styles = {
-  position: 'absolute',
-  left: -1000,
-  top: -1000,
-  fontSize: 14 };var
 
 
+
+
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */var
 TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TextWidthHelper, _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.
 
@@ -30,4 +35,8 @@ TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
-    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return _react.default.createElement(_RenderContainer.RenderContainer, null, _react.default.createElement("div", { style: styles, ref: this.elementRef }, this.props.text));};_proto.getTextWidth = function getTextWidth() {return this.element.getBoundingClientRect().width;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, 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);exports.TextWidthHelper = TextWidthHelper;

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

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["styles","position","left","top","fontSize","TextWidthHelper","element","elementRef","node","render","props","text","getTextWidth","getBoundingClientRect","width","React","Component"],"mappings":"2PAAA;;AAEA;;;;;;AAMA,IAAMA,MAA2B,GAAG;AAClCC,EAAAA,QAAQ,EAAE,UADwB;AAElCC,EAAAA,IAAI,EAAE,CAAC,IAF2B;AAGlCC,EAAAA,GAAG,EAAE,CAAC,IAH4B;AAIlCC,EAAAA,QAAQ,EAAE,EAJwB,EAApC,C;;;AAOaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;AAgBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAddC,M,GAAP,kBAAgB,CACd,OACE,6BAAC,gCAAD,QACE,sCAAK,KAAK,EAAET,MAAZ,EAAoB,GAAG,EAAE,KAAKO,UAA9B,IACG,KAAKG,KAAL,CAAWC,IADd,CADF,CADF,CAOD,C,QAEMC,Y,GAAP,wBAA8B,CAC5B,OAAO,KAAKN,OAAL,CAAcO,qBAAd,GAAsCC,KAA7C,CACD,C,0BAfkCC,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\n\r\nexport interface TextWidthHelperProps {\r\n  text?: string;\r\n}\r\n\r\nconst styles: React.CSSProperties = {\r\n  position: 'absolute',\r\n  left: -1000,\r\n  top: -1000,\r\n  fontSize: 14,\r\n};\r\n\r\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\r\n  private element: HTMLDivElement | null = null;\r\n\r\n  public render() {\r\n    return (\r\n      <RenderContainer>\r\n        <div style={styles} ref={this.elementRef}>\r\n          {this.props.text}\r\n        </div>\r\n      </RenderContainer>\r\n    );\r\n  }\r\n\r\n  public getTextWidth(): number {\r\n    return this.element!.getBoundingClientRect().width;\r\n  }\r\n\r\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\r\n}\r\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;AAGA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKV,OAAhB,EAAyBW,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKZ,OAAhB,EAAyBa,MAAhC,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.styles';\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  text?: string;\n  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\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"]}

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

@@ -1,80 +1,206 @@
-import React, { FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import React, { AriaAttributes, 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 interface TokenInputProps<T> {
-    selectedItems: T[];
-    onValueChange: (items: T[]) => void;
-    onMouseEnter: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave: MouseEventHandler<HTMLDivElement>;
-    onFocus: FocusEventHandler<HTMLInputElement>;
-    onBlur: FocusEventHandler<HTMLInputElement>;
+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;
+    /**
+     * Тип инпута. Возможные значения:
+     *
+     *   `TokenInputType.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые)
+     *
+     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать)
+     *
+     *   `TokenInputType.Combined` (можно и выбирать, и добавлять)
+     */
     type?: TokenInputType;
+    /**
+     * Ширина выпадающего меню может быть указана как 'auto'
+     * а также в пикселях, процентах (от ширины инпута)
+     * или других конкретных единицах
+     *
+     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
+     * (по ширине текста)
+     */
+    menuWidth?: React.CSSProperties['width'];
+    /**
+     * Определяет выравнивание меню. Принимает значения `left` и `cursor`
+     */
+    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;
+    /**
+     * Позволяет настроить отображение элемента списка
+     */
+    renderItem?: (item: T, state: MenuItemState) => React.ReactNode | null;
+    /**
+     * Позволяет настроить отображение выбранного значения
+     */
+    renderValue?: (item: T) => React.ReactNode;
     /**
      * Функция должна возвращать строковое представление токена
      * @default item => item
      */
-    valueToString: (item: T) => string;
+    valueToString?: (item: T) => string;
+    /**
+     * Функция отображающая сообщение об общем количестве элементов.
+     * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`.
+     */
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    /**
+     * Общее количество элементов.
+     * Необходим для работы `renderTotalCount`
+     */
+    totalCount?: number;
+    /**
+     * Отображает заданное содержимое, если ничего не найдено. Работает если не рендерится `AddButton`
+     */
     renderNotFound?: () => React.ReactNode;
-    valueToItem: (item: string) => T;
-    toKey: (item: T) => string | number | undefined;
+    /**
+     * Преобразует значение в элемент списка
+     */
+    valueToItem?: (item: string) => T;
+    /**
+     * Определяет уникальный ключ по элементу
+     */
+    toKey?: (item: T) => string | number | undefined;
     placeholder?: string;
+    /**
+     * Символы, которые разделяют введённый текст на токены
+     */
     delimiters?: string[];
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     disabled?: boolean;
     width?: string | number;
     maxMenuHeight?: number | string;
+    /**
+     * Позволяет настроить отображение токена, предоставляя возможность кастомизации внешнего вида и поведения токена
+     */
     renderToken?: (item: T, props: Partial<TokenProps>) => ReactNode;
     /**
      * Вызывается при изменении текста в поле ввода,
      */
     onInputValueChange?: (value: string) => void;
     /**
-     * Функция отрисовки кнопки добавления в выпадающем списке
+     * Функция отрисовки кнопки добавления в выпадающем списке.
+     * Работает только когда тип инпута = `TokenInputType.Combined`
      */
     renderAddButton?: (query?: string, onAddItem?: () => void) => ReactNode;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    /**
+     * Функция для обработки ситуации, когда была введена
+     * строка в инпут и был потерян фокус с компонента
+     *
+     * Функция срабатывает с аргументом инпута строки
+     *
+     * Если при потере фокуса в выпадающем списке будет только один
+     * элемент и  результат `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";
 };
+declare type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<TokenInputProps<any>>;
+    static defaultProps: DefaultProps<any>;
+    private getProps;
     state: TokenInputState<T>;
+    private readonly textareaId;
     private readonly locale;
     private theme;
     private input;
     private tokensInputMenu;
     private textHelper;
     private wrapper;
+    private setRootNode;
+    private memoizedTokens;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: TokenInputProps<T>, prevState: TokenInputState<T>): void;
+    componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
     componentWillUnmount(): void;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
     render(): JSX.Element;
     private renderMain;
     /**
@@ -85,9 +211,9 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private hasValueInItems;
     private get showAddItemHint();
     private get type();
-    private get delimiters();
     private get menuRef();
     private get isCursorVisible();
+    private get isEditingMode();
     private isCursorVisibleForState;
     private inputRef;
     private tokensInputMenuRef;
@@ -97,6 +223,10 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private updateInputTextWidth;
     private handleInputFocus;
     private handleInputBlur;
+    private handleOutsideBlur;
+    private get isInputChanged();
+    private get isInputValueChanged();
+    private get isTokenValueChanged();
     private isBlurToMenu;
     private handleWrapperMouseDown;
     private handleWrapperMouseUp;
@@ -107,17 +237,26 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     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 renderTokenFields;
+    private renderTokensStart;
+    private renderTokensEnd;
     private renderToken;
     private renderAddButton;
+    private isTokenDisabled;
+    private getAvailableTokenIndex;
 }
+export {};