@skbkontur/react-ui 0.0.0-4cd450ed1e → 0.0.0-4da47ece08

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,8 +1,11 @@
-"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"));
+"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 _Emotion = require("../../lib/theming/Emotion");
 
+var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _TokenView = require("../Token/TokenView");
 
-var _TokenInput = require("./TokenInput.styles");
+var _Token = require("../Token/Token.styles");
 
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -13,9 +16,9 @@ var THIN_SPACE = "\u2009";
 
 
 
-/**
- * Херпер позволяет вычислить размеры блока с текстом
- * для последующего выставления размеров input
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров 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.
@@ -38,4 +41,19 @@ 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 /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.jsStyles.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 this.element ? this.element.getBoundingClientRect().width : 0;};_proto.getTextHeight = function getTextHeight() {return this.element.getBoundingClientRect().height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.getSizeClassName = function getSizeClassName(size) {switch (size) {case 'large':return _Token.styles.helperContainerLarge(this.props.theme);case 'medium':return _Token.styles.helperContainerMedium(this.props.theme);case 'small':default:return _Token.styles.helperContainerSmall(this.props.theme);}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size, className: (0, _Emotion.cx)(_Token.styles.helperContainer(), this.getSizeClassName(this.props.size)) }, /*#__PURE__*/_react.default.createElement("div", { className: _Token.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);exports.TextWidthHelper = TextWidthHelper;

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

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","jsStyles","helperContainer","props","theme","classHelp","text","getTextWidth","getBoundingClientRect","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;;AAIA;;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,qBAASC,eAAT,CAAyB,KAAKC,KAAL,CAAWC,KAApC,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,KAAKV,OAAL,GAAe,KAAKA,OAAL,CAAaW,qBAAb,GAAqCC,KAApD,GAA4D,CAAnE,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,KAAKb,OAAL,CAAcW,qBAAd,GAAsCG,MAA7C,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './TokenInput.styles';\r\n\r\n// a thin character to preserve some space\r\n// for the caret visibillity in the input\r\nconst THIN_SPACE = '\\u2009';\r\n\r\nexport interface TextWidthHelperProps {\r\n  text?: string;\r\n  classHelp: string;\r\n  theme: Theme;\r\n}\r\n/**\r\n * Херпер позволяет вычислить размеры блока с текстом\r\n * для последующего выставления размеров input\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      <div className={jsStyles.helperContainer(this.props.theme)}>\r\n        <div className={this.props.classHelp} ref={this.elementRef}>\r\n          {this.props.text || THIN_SPACE}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public getTextWidth(): number {\r\n    return this.element ? this.element.getBoundingClientRect().width : 0;\r\n  }\r\n\r\n  public getTextHeight(): number {\r\n    return this.element!.getBoundingClientRect().height;\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","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","helperContainer","helperText","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"mQAAA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAjCbC,gB,GAAR,0BAAyBC,IAAzB,EAA0C,CACxC,QAAQA,IAAR,GACE,KAAK,OAAL,CACE,OAAOC,cAAOC,oBAAP,CAA4B,KAAKC,KAAL,CAAWC,KAAvC,CAAP,CACF,KAAK,QAAL,CACE,OAAOH,cAAOI,qBAAP,CAA6B,KAAKF,KAAL,CAAWC,KAAxC,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOH,cAAOK,oBAAP,CAA4B,KAAKH,KAAL,CAAWC,KAAvC,CAAP,CAPJ,CASD,C,QAEMG,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,oBAAD,IACE,IAAI,EAAE,KAAKJ,KAAL,CAAWH,IADnB,EAEE,SAAS,EAAE,iBAAGC,cAAOO,eAAP,EAAH,EAA6B,KAAKT,gBAAL,CAAsB,KAAKI,KAAL,CAAWH,IAAjC,CAA7B,CAFb,iBAIE,sCAAK,SAAS,EAAEC,cAAOQ,UAAP,EAAhB,EAAqC,GAAG,EAAE,KAAKZ,UAA/C,IACG,KAAKM,KAAL,CAAWO,IAAX,IAAmBhB,UADtB,CAJF,CADF,CAUD,C,QAEMiB,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKf,OAAhB,EAAyBgB,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKjB,OAAhB,EAAyBkB,MAAhC,CACD,C,0BAlCkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.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  theme: Theme;\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={cx(styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={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"]}

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

@@ -1,5 +1,5 @@
-import React, { FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
-import { TokenProps } from '../Token';
+import React, { AriaAttributes, FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { TokenProps, TokenSize } from '../Token';
 import { MenuItemState } from '../MenuItem';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare enum TokenInputType {
@@ -7,15 +7,46 @@ export declare enum TokenInputType {
     WithoutReference = 1,
     Combined = 2
 }
-export interface TokenInputProps<T> extends CommonProps {
-    selectedItems: T[];
-    onValueChange: (items: T[]) => void;
-    onMouseEnter: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave: MouseEventHandler<HTMLDivElement>;
-    onFocus: FocusEventHandler<HTMLTextAreaElement>;
-    onBlur: FocusEventHandler<HTMLTextAreaElement>;
+export declare type TokenInputMenuAlign = 'left' | 'cursor';
+export interface TokenInputProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, CommonProps {
+    /**
+     * Выбранные токены, которые будут отображаться в поле ввода
+     */
+    selectedItems?: T[];
+    /**
+     * Вызывается при добавлении нового токена
+     */
+    onValueChange?: (items: T[]) => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     autoFocus?: boolean;
+    /** Размер */
+    size?: TokenSize;
+    /**
+     * Тип инпута. Возможные значения:
+     *
+     *   `TokenInputType.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые)
+     *
+     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать)
+     *
+     *   `TokenInputType.Combined` (можно и выбирать, и добавлять)
+     */
     type?: TokenInputType;
+    /**
+     * Ширина выпадающего меню может быть указана как 'auto'
+     * а также в пикселях, процентах (от ширины инпута)
+     * или других конкретных единицах
+     *
+     * Если menuAlign = 'cursor', то ширина выпадающего меню всегда будет равна 'auto'
+     * (по ширине текста)
+     */
+    menuWidth?: React.CSSProperties['width'];
+    /**
+     * Определяет выравнивание меню. Принимает значения `left` и `cursor`
+     */
+    menuAlign?: TokenInputMenuAlign;
     /**
      * Функция поиска элементов, должна возвращать Promise с массивом элементов.
      * По умолчанию ожидаются строки.
@@ -24,31 +55,72 @@ export interface TokenInputProps<T> extends CommonProps {
      * свойства `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[];
+    /**
+     * Символы, которые разделяют введённый текст на токены
+     */
+    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;
     /**
@@ -69,6 +141,7 @@ export interface TokenInputProps<T> extends CommonProps {
      * а в режиме редактирования токен будет удален
      */
     onUnexpectedInput?: (value: string) => void | null | undefined | T;
+    inputMode?: React.HTMLAttributes<HTMLTextAreaElement>['inputMode'];
 }
 export interface TokenInputState<T> {
     autocompleteItems?: T[];
@@ -96,20 +169,44 @@ export declare const DefaultState: {
     inputValueWidth: number;
     inputValueHeight: number;
 };
+export declare const TokenInputDataTids: {
+    readonly root: "TokenInput__root";
+    readonly tokenInputMenu: "TokenInputMenu__root";
+    readonly label: "TokenInput__label";
+};
+declare type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign' | 'size'>>;
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<TokenInputProps<any>>;
+    static displayName: string;
+    static defaultProps: DefaultProps<any>;
+    private getDelimiters;
+    private getProps;
     state: TokenInputState<T>;
+    private readonly textareaId;
+    private rootId;
     private readonly locale;
     private theme;
+    private featureFlags;
     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 getLabelSizeClassName;
+    private getInputSizeClassName;
     private renderMain;
     /**
      * Сбрасывает введенное пользователем значение
@@ -164,4 +261,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private renderTokensEnd;
     private renderToken;
     private renderAddButton;
+    private isTokenDisabled;
+    private getAvailableTokenIndex;
 }
+export {};