@skbkontur/react-ui 6.4.7-b33c6.0 → 6.4.7

package/components/TokenInput/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,0CAA0C;AAC1C,yCAAyC;AACzC,IAAM,UAAU,GAAG,QAAQ,CAAC;AAY5B;;;GAGG;AACH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAgCtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAjCS,0CAAgB,GAAxB,UAAyB,IAAe;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,oBAAoB,CAAC;YACrC,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,qBAAqB,CAAC;YACtC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,oBAAoB,CAAC;QACvC,CAAC;IACH,CAAC;IAEM,gCAAM,GAAb;QACE,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC7G,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IACpD,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;IAKH,sBAAC;AAAD,CAAC,AApCD,CAAqC,KAAK,CAAC,SAAS,GAoCnD","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/cx.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { TokenSize } from '../Token/index.js';\nimport { styles } from '../Token/Token.css.js';\nimport { TokenView } from '../Token/TokenView.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 */\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;\n      case 'medium':\n        return styles.helperContainerMedium;\n      case 'small':\n      default:\n        return styles.helperContainerSmall;\n    }\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <TokenView size={this.props.size} className={cx(styles.helperContainer, this.getSizeClassName(this.props.size))}>\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) => {\n    this.element = node;\n  };\n}\n"]}
+{"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,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 type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { TokenSize } from '../Token/index.js';\nimport { getStyles } from '../Token/Token.styles.js';\nimport { TokenView } from '../Token/TokenView.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

@@ -144,6 +144,9 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private rootId;
     private readonly locale;
     private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private size;
     private isMobileLayout;

package/components/TokenInput/TokenInput.js

@@ -83,7 +83,6 @@ import { ComboBoxRequestStatus } from '../../internal/CustomComboBox/CustomCombo
 import { PopupIds } from '../../internal/Popup/index.js';
 import { blink } from '../../lib/blink.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { cx } from '../../lib/cx.js';
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isCodeComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll, } from '../../lib/events/keyboard/identifiers.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { locale } from '../../lib/locale/decorators.js';
@@ -100,7 +99,7 @@ import { Token } from '../Token/index.js';
 import { TokenView } from '../Token/TokenView.js';
 import { TokenInputLocaleHelper } from './locale/index.js';
 import { TextWidthHelper } from './TextWidthHelper.js';
-import { styles } from './TokenInput.css.js';
+import { getStyles } from './TokenInput.styles.js';
 import { TokenInputMenu } from './TokenInputMenu.js';
 import { TokenInputMobileMenu } from './TokenInputMobileMenu.js';
 import { tokenInputReducer } from './TokenInputReducer.js';
@@ -180,6 +179,7 @@ var TokenInput = /** @class */ (function (_super) {
             var _f = _this.getProps(), selectedItems = _f.selectedItems, menuWidth = _f.menuWidth, menuAlign = _f.menuAlign, renderItem = _f.renderItem;
             var isMobileFooter = variant === 'mobileFooter';
             var _g = _this.state, inFocus = _g.inFocus, inputValueWidth = _g.inputValueWidth, inputValueHeight = _g.inputValueHeight, inputValue = _g.inputValue, reservedInputValue = _g.reservedInputValue, loading = _g.loading;
+            var theme = _this.theme;
             var inputInlineStyles = {
                 // вычисляем ширину чтобы input автоматически перенёсся на следующую строку при необходимости
                 width: inputValueWidth,
@@ -187,22 +187,22 @@ var TokenInput = /** @class */ (function (_super) {
                 // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
                 caretColor: _this.isCursorVisible && interactive ? undefined : 'transparent',
             };
-            var labelClassName = cx(styles.label, _this.getLabelSizeClassName(), (_b = {},
-                _b[styles.labelNonInteractive] = !interactive,
-                _b[styles.hovering] = interactive && !inFocus && !disabled && !warning && !error,
-                _b[styles.labelDisabled] = !!disabled,
-                _b[styles.labelFocused] = interactive && !!inFocus,
-                _b[styles.error] = !!error,
-                _b[styles.warning] = !!warning,
+            var labelClassName = _this.cx(_this.styles.label(theme), _this.getLabelSizeClassName(), (_b = {},
+                _b[_this.styles.labelNonInteractive()] = !interactive,
+                _b[_this.styles.hovering(_this.theme)] = interactive && !inFocus && !disabled && !warning && !error,
+                _b[_this.styles.labelDisabled(theme)] = !!disabled,
+                _b[_this.styles.labelFocused(theme)] = interactive && !!inFocus,
+                _b[_this.styles.error(theme)] = !!error,
+                _b[_this.styles.warning(theme)] = !!warning,
                 _b));
-            var inputClassName = cx(styles.input, _this.getInputSizeClassName(), (_c = {},
-                _c[styles.inputDisabled] = !!disabled,
+            var inputClassName = _this.cx(_this.styles.input(theme), _this.getInputSizeClassName(), (_c = {},
+                _c[_this.styles.inputDisabled(theme)] = !!disabled,
                 _c));
             var placeholder = selectedItems.length === 0 && !inputValue ? _this.props.placeholder : '';
-            var inputNode = (React.createElement(TokenView, { size: _this.size, className: cx((_d = {},
-                    _d[styles.inputWrapperDisabled] = !!disabled,
+            var inputNode = (React.createElement(TokenView, { size: _this.size, className: _this.cx((_d = {},
+                    _d[_this.styles.inputWrapperDisabled()] = !!disabled,
                     // input растягивается на всю ширину чтобы placeholder не обрезался
-                    _d[styles.inputPlaceholderWrapper] = Boolean(placeholder),
+                    _d[_this.styles.inputPlaceholderWrapper()] = Boolean(placeholder),
                     _d)), hideCloseButton: Boolean(placeholder) },
                 React.createElement("textarea", { id: isMobileFooter || interactive ? _this.textareaId : undefined, ref: isMobileFooter ? _this.mobileInputRef : _this.inlineInputRef, value: inputValue, style: inputInlineStyles, spellCheck: false, disabled: disabled, readOnly: !interactive, tabIndex: !interactive ? -1 : undefined, className: inputClassName, placeholder: placeholder, onFocus: interactive ? _this.handleInputFocus : undefined, onBlur: interactive ? _this.handleInputBlur : undefined, onChange: interactive ? _this.handleChangeInputValue : undefined, onKeyDown: interactive ? _this.handleKeyDown : undefined, onPaste: interactive ? _this.handleInputPaste : undefined, inputMode: inputMode, "aria-label": isMobileFooter || interactive ? ariaLabel : undefined, "aria-describedby": isMobileFooter || interactive ? ariaDescribedby : undefined, "aria-hidden": !interactive ? true : undefined, "aria-busy": interactive && loading ? true : undefined, autoFocus: isMobileFooter })));
             var inner = (React.createElement(React.Fragment, null,
@@ -212,8 +212,8 @@ var TokenInput = /** @class */ (function (_super) {
                 showMenu && (React.createElement(TokenInputMenu, { popupMenuId: _this.rootId, ref: _this.tokensInputMenuRef, items: _this.getMenuItems(), loading: loading, opened: showMenu, maxMenuHeight: maxMenuHeight, anchorElementForCursor: _this.input, anchorElementRoot: _this.wrapper, renderNotFound: renderNotFound, renderItem: renderItem, onValueChange: _this.selectItem, renderAddButton: _this.renderAddButton, menuWidth: menuWidth, menuAlign: menuAlign, renderTotalCount: renderTotalCount, totalCount: totalCount, size: _this.size, requestStatus: _this.state.requestStatus, repeatRequest: _this.repeatRequest })),
                 _this.renderTokensEnd(interactive),
                 _this.isEditingMode ? (React.createElement(TokenView, { size: _this.size },
-                    React.createElement("span", { className: styles.reservedInput }, reservedInputValue))) : null));
-            var container = maxHeight && !isMobileFooter ? (React.createElement(ScrollContainer, { ref: _this.scrollContainerRef, className: styles.inputPlaceholderScrollWrapper, scrollRef: _this.scrollContainerInnerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
+                    React.createElement("span", { className: _this.styles.reservedInput(theme) }, reservedInputValue))) : null));
+            var container = maxHeight && !isMobileFooter ? (React.createElement(ScrollContainer, { ref: _this.scrollContainerRef, className: _this.styles.inputPlaceholderScrollWrapper(), scrollRef: _this.scrollContainerInnerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
             var labelStyle = {
                 width: fieldWidth,
             };
@@ -1051,6 +1051,7 @@ var TokenInput = /** @class */ (function (_super) {
     };
     TokenInput.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return _this.renderMain();
@@ -1059,23 +1060,23 @@ var TokenInput = /** @class */ (function (_super) {
     TokenInput.prototype.getLabelSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return styles.labelLarge;
+                return this.styles.labelLarge(this.theme);
             case 'medium':
-                return styles.labelMedium;
+                return this.styles.labelMedium(this.theme);
             case 'small':
             default:
-                return styles.labelSmall;
+                return this.styles.labelSmall(this.theme);
         }
     };
     TokenInput.prototype.getInputSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return styles.inputLarge;
+                return this.styles.inputLarge(this.theme);
             case 'medium':
-                return styles.inputMedium;
+                return this.styles.inputMedium(this.theme);
             case 'small':
             default:
-                return styles.inputSmall;
+                return this.styles.inputSmall(this.theme);
         }
     };
     TokenInput.prototype.renderMain = function () {