@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,9 +1,9 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
+import { cx } from "../../../lib/theming/Emotion";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { TokenView } from "../../Token/TokenView";
-import { getStyles } from "../../Token/Token.styles";
+import { styles } from "../../Token/Token.styles";
 
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -31,28 +31,22 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
   _proto.getSizeClassName = function getSizeClassName(size) {
     switch (size) {
       case 'large':
-        return this.styles.helperContainerLarge(this.props.theme);
+        return styles.helperContainerLarge(this.props.theme);
       case 'medium':
-        return this.styles.helperContainerMedium(this.props.theme);
+        return styles.helperContainerMedium(this.props.theme);
       case 'small':
       default:
-        return this.styles.helperContainerSmall(this.props.theme);
+        return styles.helperContainerSmall(this.props.theme);
     }
   };
   _proto.render = function render() {
-    var _this2 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var emotion = _ref.emotion;
-      _this2.cx = emotion.cx;
-      _this2.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(TokenView, {
-        size: _this2.props.size,
-        className: _this2.cx(_this2.styles.helperContainer(), _this2.getSizeClassName(_this2.props.size))
-      }, /*#__PURE__*/React.createElement("div", {
-        className: _this2.styles.helperText(),
-        ref: _this2.elementRef
-      }, _this2.props.text || THIN_SPACE));
-    });
+    return /*#__PURE__*/React.createElement(TokenView, {
+      size: this.props.size,
+      className: cx(styles.helperContainer(), this.getSizeClassName(this.props.size))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.helperText(),
+      ref: this.elementRef
+    }, this.props.text || THIN_SPACE));
   };
   _proto.getTextWidth = function getTextWidth() {
     return getDOMRect(this.element).width;

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

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","getDOMRect","TokenView","getStyles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","_this2","createElement","Consumer","_ref","emotion","cx","className","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\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';\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  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    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ emotion }) => {\n          this.cx = emotion.cx;\n          this.styles = getStyles(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      </RenderEnvironmentContext.Consumer>\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":[]}
+{"version":3,"names":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","className","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { 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  /** Задает текст в поле ввода, еще не ставший токеном. */\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(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"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C,SAASC,MAAM,QAAQ,uBAAuB;;AAE9C;AACA;AACA,IAAMC,UAAU,GAAG,QAAQ;;;;;;;;;;;;AAY3B;AACA;AACA;AACA;AACA,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAClBU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmCrCW,UAAU,GAAG,UAACC,IAAoB,UAAMZ,KAAA,CAAKU,OAAO,GAAGE,IAAI,EAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAf,eAAA,EAAAC,gBAAA,MAAAe,MAAA,GAAAhB,eAAA,CAAAiB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOrB,MAAM,CAACsB,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOxB,MAAM,CAACyB,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOxB,MAAM,CAAC0B,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAN,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACE/B,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,IACRsB,IAAI,EAAE,IAAI,CAACE,KAAK,CAACF,IAAK,EACtBQ,SAAS,EAAEhC,EAAE,CAACG,MAAM,CAAC8B,eAAe,CAAC,CAAC,EAAE,IAAI,CAACV,gBAAgB,CAAC,IAAI,CAACG,KAAK,CAACF,IAAI,CAAC,CAAE,iBAEhFzB,KAAA,CAAAgC,aAAA,UAAKC,SAAS,EAAE7B,MAAM,CAAC+B,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACjB,UAAW,IACvD,IAAI,CAACQ,KAAK,CAACU,IAAI,IAAIhC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAiB,MAAA,CAEMgB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOpC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACqB,KAAK,CACvC,CAAC,CAAAjB,MAAA,CAEMkB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAOtC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACuB,MAAM,CACxC,CAAC,QAAAnC,eAAA,GAlCkCN,KAAK,CAAC0C,SAAS","ignoreList":[]}

package/components/TokenInput/TextWidthHelper.d.ts

@@ -15,8 +15,6 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
-    private cx;
-    private styles;
     private getSizeClassName;
     render(): React.JSX.Element;
     getTextWidth(): number;

package/components/TokenInput/TokenInput/TokenInput.js

@@ -6,7 +6,7 @@ var _dec, _class, _TokenInput;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import isEqual from 'lodash.isequal';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
+import { globalObject } from '@skbkontur/global-object';
 import { PopupIds } from "../../../internal/Popup";
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
@@ -16,12 +16,13 @@ import { emptyHandler, getRandomID } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getUid } from "../../../lib/uidUtils";
 import { TokenView } from "../../Token/TokenView";
 import { TokenInputLocaleHelper } from "../locale";
-import { getStyles } from "../TokenInput.styles";
+import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -140,7 +141,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
         (_this$input = _this.input) == null || _this$input.focus();
         // в firefox не работает без второго focus
-        _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
           var _this$input2;
           return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
         });
@@ -186,10 +187,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.isBlurToMenu = function (event) {
-      if (_this.menuRef && _this.globalObject.document) {
+      if (_this.menuRef && globalObject.document) {
         var _this$tokensInputMenu;
         var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || _this.globalObject.document.activeElement;
+        var relatedTarget = event.relatedTarget || globalObject.document.activeElement;
         if (menu && menu.contains(relatedTarget)) {
           return true;
         }
@@ -399,7 +400,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.focusInput = function () {
-      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
+      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
         var _this$input5;
         return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
       });
@@ -800,9 +801,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     });
   };
   _proto.componentDidMount = function componentDidMount() {
-    var _this$globalObject$do;
+    var _globalObject$documen;
     this.updateInputTextWidth();
-    (_this$globalObject$do = this.globalObject.document) == null || _this$globalObject$do.addEventListener('copy', this.handleCopy);
+    (_globalObject$documen = globalObject.document) == null || _globalObject$documen.addEventListener('copy', this.handleCopy);
     if (this.props.autoFocus) {
       this.focusInput();
     }
@@ -826,8 +827,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
-    var _this$globalObject$do2;
-    (_this$globalObject$do2 = this.globalObject.document) == null || _this$globalObject$do2.removeEventListener('copy', this.handleCopy);
+    var _globalObject$documen2;
+    (_globalObject$documen2 = globalObject.document) == null || _globalObject$documen2.removeEventListener('copy', this.handleCopy);
   } /**
     * @public
     */;
@@ -843,42 +844,35 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref3) {
-      var globalObject = _ref3.globalObject,
-        emotion = _ref3.emotion;
-      _this2.globalObject = globalObject;
-      _this2.cx = emotion.cx;
-      _this2.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   _proto.getLabelSizeClassName = function getLabelSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.labelLarge(this.theme);
+        return styles.labelLarge(this.theme);
       case 'medium':
-        return this.styles.labelMedium(this.theme);
+        return styles.labelMedium(this.theme);
       case 'small':
       default:
-        return this.styles.labelSmall(this.theme);
+        return styles.labelSmall(this.theme);
     }
   };
   _proto.getInputSizeClassName = function getInputSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.inputLarge(this.theme);
+        return styles.inputLarge(this.theme);
       case 'medium':
-        return this.styles.inputMedium(this.theme);
+        return styles.inputMedium(this.theme);
       case 'small':
       default:
-        return this.styles.inputSmall(this.theme);
+        return styles.inputSmall(this.theme);
     }
   };
   _proto.renderMain = function renderMain() {
-    var _this$cx, _this$cx2, _this$cx3;
+    var _cx, _cx2, _cx3;
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
       throw Error('Missed getItems for type ' + this.type);
     }
@@ -920,12 +914,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    var labelClassName = this.cx(this.styles.label(theme), this.getLabelSizeClassName(), (_this$cx = {}, _this$cx[this.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _this$cx[this.styles.labelDisabled(theme)] = !!disabled, _this$cx[this.styles.labelFocused(theme)] = !!inFocus, _this$cx[this.styles.error(theme)] = !!error, _this$cx[this.styles.warning(theme)] = !!warning, _this$cx));
-    var inputClassName = this.cx(this.styles.input(theme), this.getInputSizeClassName(), (_this$cx2 = {}, _this$cx2[this.styles.inputDisabled(theme)] = !!disabled, _this$cx2));
+    var labelClassName = cx(styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
+    var inputClassName = cx(styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2));
     var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
     var inputNode = /*#__PURE__*/React.createElement(TokenView, {
       size: this.getProps().size,
-      className: this.cx((_this$cx3 = {}, _this$cx3[this.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _this$cx3)),
+      className: cx((_cx3 = {}, _cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)),
       hideCloseButton: Boolean(placeholder)
     }, /*#__PURE__*/React.createElement("textarea", {
       id: this.textareaId,
@@ -988,7 +982,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
       size: this.props.size
     }, /*#__PURE__*/React.createElement("span", {
-      className: this.styles.reservedInput(theme)
+      className: styles.reservedInput(theme)
     }, reservedInputValue)) : null)));
   } /**
     * Сбрасывает введенное пользователем значение