@skbkontur/react-ui 0.0.0-6a047cca2c → 0.0.0-6fbd9fadb2

package/internal/InputLikeText/InputLikeText/InputLikeText.js

@@ -1,19 +1,42 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd", "takeContentWidth", "aria-describedby"];
+
+var _class, _class2, _temp; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
 import React from 'react';
-import cn from 'classnames';
+import ReactDOM from 'react-dom';
+import debounce from 'lodash.debounce';
+import { globalObject } from '@skbkontur/global-object';
+import { isFunction, isNonNullable } from "../../../lib/utils";
 import { isKeyTab, isShortcutPaste } from "../../../lib/events/keyboard/identifiers";
 import { MouseDrag } from "../../../lib/events/MouseDrag";
-import { isEdge, isIE11 } from "../../../lib/client";
-import { removeAllSelections, selectNodeContents } from "../../../components/DateInput/helpers/SelectionHelpers";
-import { jsStyles as jsInputStyles } from "../../../components/Input/Input.styles";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { isEdge, isIE11, isMobile } from "../../../lib/client";
+import { removeAllSelections, selectNodeContents } from "../../../lib/dom/selectionHelpers";
+import { getStyles as getJsInputStyles } from "../../../components/Input/Input.styles";
+import { CommonWrapper } from "../../CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { findRenderContainer } from "../../../lib/listenFocusOutside";
-import { jsStyles } from "../InputLikeText.styles";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { InputLayoutAside } from "../../../components/Input/InputLayout/InputLayoutAside";
+import { InputLayoutContext, InputLayoutContextDefault } from "../../../components/Input/InputLayout/InputLayoutContext";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
+import { FocusControlWrapper } from "../../FocusControlWrapper";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { HiddenInput } from "../HiddenInput";
-export var InputLikeText = /*#__PURE__*/function (_React$Component) {
+import { getStyles } from "../InputLikeText.styles";
+export var InputLikeTextDataTids = {
+  root: 'InputLikeText__root',
+  input: 'InputLikeText__input',
+  nativeInput: 'InputLikeText__nativeInput'
+};
+export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(InputLikeText, _React$Component);
 
   function InputLikeText() {
@@ -24,19 +47,18 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(InputLikeText.defaultProps);
     _this.state = {
       blinking: false,
       focused: false
     };
-    _this.theme = void 0;
     _this.node = null;
     _this.hiddenInput = null;
     _this.lastSelectedInnerNode = null;
     _this.frozen = false;
     _this.frozenBlur = false;
     _this.dragging = false;
-    _this.focusTimeout = void 0;
-    _this.blinkTimeout = void 0;
+    _this.selectNodeContentsDebounced = debounce(selectNodeContents, 0);
 
     _this.selectInnerNode = function (node, start, end) {
       if (start === void 0) {
@@ -51,7 +73,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      if (isIE11 && findRenderContainer(node, document.body)) {
+      if (isIE11 && globalObject.document && findRenderContainer(node, globalObject.document.body)) {
         // Code below causes Popup to close after triggering the focus event on the body in IE11
         return;
       }
@@ -59,21 +81,20 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
       _this.frozen = true;
       _this.frozenBlur = true;
       _this.lastSelectedInnerNode = [node, start, end];
-      setTimeout(function () {
-        return selectNodeContents(node, start, end);
-      }, 0);
+
+      _this.selectNodeContentsDebounced(node, start, end);
 
       if (_this.focusTimeout) {
-        clearInterval(_this.focusTimeout);
+        globalObject.clearInterval(_this.focusTimeout);
       }
 
-      _this.focusTimeout = window.setTimeout(function () {
+      _this.focusTimeout = globalObject.setTimeout(function () {
         return (isIE11 || isEdge) && _this.node && _this.node.focus();
       }, 0);
     };
 
     _this.renderMain = function (props) {
-      var _cn, _cn2;
+      var _this$emotion$cx, _this$emotion$cx2, _this$emotion$cx3;
 
       var innerRef = props.innerRef,
           tabIndex = props.tabIndex,
@@ -93,19 +114,42 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
           value = props.value,
           onMouseDragStart = props.onMouseDragStart,
           onMouseDragEnd = props.onMouseDragEnd,
-          rest = _objectWithoutPropertiesLoose(props, ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd"]);
+          takeContentWidth = props.takeContentWidth,
+          ariaDescribedby = props['aria-describedby'],
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var _this$state = _this.state,
           focused = _this$state.focused,
           blinking = _this$state.blinking;
-
-      var leftSide = _this.renderLeftSide();
-
-      var rightSide = _this.renderRightSide();
-
-      var className = cn(jsStyles.root(), jsInputStyles.root(_this.theme), _this.getSizeClassName(), (_cn = {}, _cn[jsInputStyles.borderless()] = !!borderless, _cn[jsStyles.withoutLeftSide()] = !leftSide, _cn[jsInputStyles.focus(_this.theme)] = focused, _cn[jsInputStyles.blink(_this.theme)] = blinking, _cn[jsInputStyles.warning(_this.theme)] = !!warning, _cn[jsInputStyles.error(_this.theme)] = !!error, _cn[jsInputStyles.disabled(_this.theme)] = !!disabled, _cn[jsInputStyles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cn[jsInputStyles.warningFallback(_this.theme)] = !!warning && (isIE11 || isEdge), _cn[jsInputStyles.errorFallback(_this.theme)] = !!error && (isIE11 || isEdge), _cn));
-      var wrapperClass = cn(jsInputStyles.wrapper(), (_cn2 = {}, _cn2[jsStyles.userSelectContain()] = focused, _cn2));
-      return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+      var leftSide = isTheme2022(_this.theme) ? /*#__PURE__*/React.createElement(InputLayoutAside, {
+        icon: leftIcon,
+        text: prefix,
+        side: "left"
+      }) : _this.renderLeftSide();
+      var rightSide = isTheme2022(_this.theme) ? /*#__PURE__*/React.createElement(InputLayoutAside, {
+        icon: rightIcon,
+        text: suffix,
+        side: "right"
+      }) : _this.renderRightSide();
+      var jsInputStyles = getJsInputStyles(_this.emotion);
+      var styles = getStyles(_this.emotion);
+
+      var className = _this.emotion.cx(styles.root(), jsInputStyles.root(_this.theme), _this.getSizeClassName(), (_this$emotion$cx = {}, _this$emotion$cx[jsInputStyles.disabled(_this.theme)] = !!disabled, _this$emotion$cx[jsInputStyles.borderless()] = !!borderless, _this$emotion$cx[jsInputStyles.focus(_this.theme)] = focused, _this$emotion$cx[jsInputStyles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _this$emotion$cx[jsInputStyles.blink(_this.theme)] = blinking, _this$emotion$cx[jsInputStyles.warning(_this.theme)] = !!warning, _this$emotion$cx[jsInputStyles.error(_this.theme)] = !!error, _this$emotion$cx[jsInputStyles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _this$emotion$cx[jsInputStyles.warningFallback(_this.theme)] = !!warning && (isIE11 || isEdge), _this$emotion$cx[jsInputStyles.errorFallback(_this.theme)] = !!error && (isIE11 || isEdge), _this$emotion$cx[jsInputStyles.hideBlinkingCursor()] = isMobile, _this$emotion$cx));
+
+      var wrapperClass = _this.emotion.cx(jsInputStyles.wrapper(), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.userSelectContain()] = focused, _this$emotion$cx2));
+
+      var context = InputLayoutContextDefault;
+      Object.assign(context, {
+        disabled: disabled,
+        focused: focused,
+        size: size
+      });
+      return /*#__PURE__*/React.createElement(FocusControlWrapper, {
+        disabled: disabled,
+        onBlurWhenDisabled: _this.resetFocus
+      }, /*#__PURE__*/React.createElement("span", _extends({
+        "data-tid": InputLikeTextDataTids.root
+      }, rest, {
         className: className,
         style: {
           width: width,
@@ -117,17 +161,22 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
         ref: _this.innerRef,
         onKeyDown: _this.handleKeyDown,
         onMouseDown: _this.handleMouseDown
-      }), /*#__PURE__*/React.createElement("input", {
+      }), /*#__PURE__*/React.createElement(InputLayoutContext.Provider, {
+        value: context
+      }, /*#__PURE__*/React.createElement("input", {
+        "data-tid": InputLikeTextDataTids.nativeInput,
         type: "hidden",
-        value: value
+        value: value,
+        disabled: disabled,
+        "aria-describedby": ariaDescribedby
       }), leftSide, /*#__PURE__*/React.createElement("span", {
         className: wrapperClass
       }, /*#__PURE__*/React.createElement("span", {
-        "data-tid": "InputLikeText__input",
-        className: cn(jsStyles.input(), jsInputStyles.input(_this.theme))
+        "data-tid": InputLikeTextDataTids.input,
+        className: _this.emotion.cx(jsInputStyles.input(_this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.absolute()] = !takeContentWidth, _this$emotion$cx3[jsInputStyles.inputFocus(_this.theme)] = focused, _this$emotion$cx3[jsInputStyles.inputDisabled(_this.theme)] = disabled, _this$emotion$cx3))
       }, _this.props.children), _this.renderPlaceholder()), rightSide, isIE11 && focused && /*#__PURE__*/React.createElement(HiddenInput, {
         nodeRef: _this.hiddenInputRef
-      }));
+      }))));
     };
 
     _this.renderLeftIcon = function () {
@@ -139,42 +188,51 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderIcon = function (icon, className) {
+      var _this$emotion$cx4;
+
       if (!icon) {
         return null;
       }
 
-      if (icon instanceof Function) {
-        return /*#__PURE__*/React.createElement("span", {
-          className: className
-        }, icon());
-      }
-
+      var disabled = _this.props.disabled;
+      var iconNode = isFunction(icon) ? icon() : icon;
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cn(className, jsInputStyles.useDefaultColor(_this.theme))
-      }, icon);
+        className: _this.emotion.cx(jsInputStyles.icon(), className, jsInputStyles.useDefaultColor(_this.theme), (_this$emotion$cx4 = {}, _this$emotion$cx4[jsInputStyles.iconDisabled()] = disabled, _this$emotion$cx4))
+      }, iconNode);
     };
 
     _this.renderPrefix = function () {
-      var prefix = _this.props.prefix;
+      var _this$emotion$cx5;
+
+      var _this$props = _this.props,
+          prefix = _this$props.prefix,
+          disabled = _this$props.disabled;
 
       if (!prefix) {
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: jsInputStyles.prefix(_this.theme)
+        className: _this.emotion.cx(jsInputStyles.prefix(_this.theme), (_this$emotion$cx5 = {}, _this$emotion$cx5[jsInputStyles.prefixDisabled(_this.theme)] = disabled, _this$emotion$cx5))
       }, prefix);
     };
 
     _this.renderSuffix = function () {
-      var suffix = _this.props.suffix;
+      var _this$emotion$cx6;
+
+      var _this$props2 = _this.props,
+          suffix = _this$props2.suffix,
+          disabled = _this$props2.disabled;
 
       if (!suffix) {
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: jsInputStyles.suffix(_this.theme)
+        className: _this.emotion.cx(jsInputStyles.suffix(_this.theme), (_this$emotion$cx6 = {}, _this$emotion$cx6[jsInputStyles.suffixDisabled(_this.theme)] = disabled, _this$emotion$cx6))
       }, suffix);
     };
 
@@ -187,6 +245,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
         className: jsInputStyles.sideContainer()
       }, leftIcon, prefix);
@@ -201,19 +260,26 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cn(jsInputStyles.sideContainer(), jsInputStyles.rightContainer())
+        className: _this.emotion.cx(jsInputStyles.sideContainer(), jsInputStyles.rightContainer())
       }, rightIcon, suffix);
     };
 
     _this.renderPlaceholder = function () {
-      var _this$props = _this.props,
-          children = _this$props.children,
-          placeholder = _this$props.placeholder;
+      var _this$props3 = _this.props,
+          children = _this$props3.children,
+          placeholder = _this$props3.placeholder,
+          disabled = _this$props3.disabled;
+      var focused = _this.state.focused;
+      var hasValue = isNonNullable(children) && children !== '';
+
+      if (!hasValue && placeholder) {
+        var _this$emotion$cx7;
 
-      if (!children && placeholder) {
+        var jsInputStyles = getJsInputStyles(_this.emotion);
         return /*#__PURE__*/React.createElement("span", {
-          className: jsInputStyles.placeholder(_this.theme)
+          className: _this.emotion.cx(jsInputStyles.placeholder(_this.theme), (_this$emotion$cx7 = {}, _this$emotion$cx7[jsInputStyles.placeholderDisabled(_this.theme)] = disabled, _this$emotion$cx7[jsInputStyles.placeholderFocus(_this.theme)] = focused, _this$emotion$cx7))
         }, placeholder);
       }
 
@@ -221,7 +287,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleDocumentMouseDown = function (e) {
-      if (_this.state.focused && _this.node && e.target instanceof Node && !_this.node.contains(e.target)) {
+      if (_this.state.focused && _this.node && isInstanceOf(e.target, globalObject.Node) && !_this.node.contains(e.target)) {
         _this.defrost();
       }
     };
@@ -232,7 +298,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.handleMouseDown = function (e) {
+    _this.handleMouseDown = function () {
       _this.frozen = true;
     };
 
@@ -243,7 +309,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
 
       if (isIE11 && isShortcutPaste(e) && _this.hiddenInput) {
         _this.frozen = true;
-        setTimeout(function () {
+        globalObject.setTimeout(function () {
           if (_this.lastSelectedInnerNode) {
             var _this2;
 
@@ -264,8 +330,11 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleMouseDragStart = function (e) {
+      var _globalObject$documen;
+
       _this.dragging = true;
-      document.documentElement.classList.add(jsStyles.userSelectNone());
+      var styles = getStyles(_this.emotion);
+      (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.documentElement.classList.add(styles.userSelectNone());
 
       if (_this.props.onMouseDragStart) {
         _this.props.onMouseDragStart(e);
@@ -273,21 +342,30 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleMouseDragEnd = function (e) {
-      // Дожидаемся onMouseUp
-      setTimeout(function () {
+      var _globalObject$documen2; // Дожидаемся onMouseUp
+
+
+      globalObject.setTimeout(function () {
         _this.dragging = false;
 
         if (_this.props.onMouseDragEnd) {
           _this.props.onMouseDragEnd(e);
         }
       }, 0);
-      document.documentElement.classList.remove(jsStyles.userSelectNone());
+      var styles = getStyles(_this.emotion);
+      (_globalObject$documen2 = globalObject.document) == null ? void 0 : _globalObject$documen2.documentElement.classList.remove(styles.userSelectNone());
     };
 
     _this.handleFocus = function (e) {
+      if (isMobile) {
+        var _this$node;
+
+        (_this$node = _this.node) == null ? void 0 : _this$node.setAttribute('contenteditable', 'true');
+      }
+
       if (_this.props.disabled) {
-        if (isIE11) {
-          selectNodeContents(document.body, 0, 0);
+        if (isIE11 && globalObject.document) {
+          selectNodeContents(globalObject.document.body, 0, 0);
         }
 
         return;
@@ -299,18 +377,56 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
         if (_this.state.focused) {
           return;
         }
-      }
+      } // Auto-batching React@18 creates problems that are fixed with flushSync
+      // https://github.com/skbkontur/retail-ui/pull/3144#issuecomment-1535235366
 
-      _this.setState({
-        focused: true
-      });
+
+      if (React.version.search('18') === 0) {
+        ReactDOM.flushSync(function () {
+          return _this.setState({
+            focused: true
+          });
+        });
+      } else {
+        _this.setState({
+          focused: true
+        });
+      }
 
       if (_this.props.onFocus) {
         _this.props.onFocus(e);
       }
     };
 
+    _this.resetFocus = function () {
+      _this.selectNodeContentsDebounced.cancel();
+
+      if (isMobile) {
+        var _this$node2;
+
+        (_this$node2 = _this.node) == null ? void 0 : _this$node2.removeAttribute('contenteditable');
+      }
+
+      if ((isIE11 || isEdge) && _this.frozenBlur) {
+        _this.frozenBlur = false;
+      }
+
+      removeAllSelections();
+
+      _this.setState({
+        focused: false
+      });
+    };
+
     _this.handleBlur = function (e) {
+      _this.selectNodeContentsDebounced.cancel();
+
+      if (isMobile) {
+        var _this$node3;
+
+        (_this$node3 = _this.node) == null ? void 0 : _this$node3.removeAttribute('contenteditable');
+      }
+
       if (_this.props.disabled) {
         e.stopPropagation();
         return;
@@ -331,9 +447,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
         focused: false
       });
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
-      }
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
     };
 
     _this.hiddenInputRef = function (el) {
@@ -354,18 +468,20 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.getSizeClassName = function () {
-      var _ref, _ref2, _ref3;
+      var _this$emotion$cx8, _this$emotion$cx9, _this$emotion$cx10;
 
-      switch (_this.props.size) {
+      var jsInputStyles = getJsInputStyles(_this.emotion);
+
+      switch (_this.getProps().size) {
         case 'large':
-          return _ref = {}, _ref[jsInputStyles.sizeLarge(_this.theme)] = true, _ref[jsInputStyles.sizeLargeFallback(_this.theme)] = isIE11 || isEdge, _ref;
+          return _this.emotion.cx((_this$emotion$cx8 = {}, _this$emotion$cx8[jsInputStyles.sizeLarge(_this.theme)] = true, _this$emotion$cx8[jsInputStyles.sizeLargeFallback(_this.theme)] = isIE11 || isEdge, _this$emotion$cx8));
 
         case 'medium':
-          return _ref2 = {}, _ref2[jsInputStyles.sizeMedium(_this.theme)] = true, _ref2[jsInputStyles.sizeMediumFallback(_this.theme)] = isIE11 || isEdge, _ref2;
+          return _this.emotion.cx((_this$emotion$cx9 = {}, _this$emotion$cx9[jsInputStyles.sizeMedium(_this.theme)] = true, _this$emotion$cx9[jsInputStyles.sizeMediumFallback(_this.theme)] = isIE11 || isEdge, _this$emotion$cx9));
 
         case 'small':
         default:
-          return _ref3 = {}, _ref3[jsInputStyles.sizeSmall(_this.theme)] = true, _ref3[jsInputStyles.sizeSmallFallback(_this.theme)] = isIE11 || isEdge, _ref3;
+          return _this.emotion.cx((_this$emotion$cx10 = {}, _this$emotion$cx10[jsInputStyles.sizeSmall(_this.theme)] = true, _this$emotion$cx10[jsInputStyles.sizeSmallFallback(_this.theme)] = isIE11 || isEdge, _this$emotion$cx10));
       }
     };
 
@@ -373,8 +489,8 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
   }
 
   var _proto = InputLikeText.prototype;
-  /**
-  * @public
+  /**
+  * @public
   */
 
   _proto.focus = function focus() {
@@ -382,8 +498,8 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
       this.node.focus();
     }
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -392,8 +508,8 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
       this.node.blur();
     }
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -407,7 +523,7 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
     this.setState({
       blinking: true
     }, function () {
-      _this3.blinkTimeout = window.setTimeout(function () {
+      _this3.blinkTimeout = globalObject.setTimeout(function () {
         return _this3.setState({
           blinking: false
         });
@@ -417,33 +533,43 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
 
   _proto.getNode = function getNode() {
     return this.node;
-  };
+  } // Async call required for Firefox
+  ;
 
   _proto.componentDidMount = function componentDidMount() {
+    var _globalObject$documen3, _globalObject$documen4;
+
     if (this.node) {
       MouseDrag.listen(this.node).onMouseDragStart(this.handleMouseDragStart).onMouseDragEnd(this.handleMouseDragEnd);
     }
 
-    document.addEventListener('mousedown', this.handleDocumentMouseDown);
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    (_globalObject$documen3 = globalObject.document) == null ? void 0 : _globalObject$documen3.addEventListener('mousedown', this.handleDocumentMouseDown);
+    (_globalObject$documen4 = globalObject.document) == null ? void 0 : _globalObject$documen4.addEventListener('keydown', this.handleDocumentKeyDown);
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
+    var _globalObject$documen5, _globalObject$documen6;
+
     if (this.blinkTimeout) {
-      clearTimeout(this.blinkTimeout);
+      globalObject.clearTimeout(this.blinkTimeout);
     }
 
     MouseDrag.stop(this.node);
-    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    (_globalObject$documen5 = globalObject.document) == null ? void 0 : _globalObject$documen5.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    (_globalObject$documen6 = globalObject.document) == null ? void 0 : _globalObject$documen6.removeEventListener('keydown', this.handleDocumentKeyDown);
   };
 
   _proto.render = function render() {
     var _this4 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this4.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this4.props, _this4.renderMain);
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this4.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this4.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this4.setRootNode
+        }, _this4.props), _this4.renderMain);
+      });
     });
   };
 
@@ -452,7 +578,9 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
       right = false;
     }
 
-    switch (this.props.size) {
+    var jsInputStyles = getJsInputStyles(this.emotion);
+
+    switch (this.getProps().size) {
       case 'large':
         return right ? jsInputStyles.rightIconLarge(this.theme) : jsInputStyles.leftIconLarge(this.theme);
 
@@ -466,8 +594,6 @@ export var InputLikeText = /*#__PURE__*/function (_React$Component) {
   };
 
   return InputLikeText;
-}(React.Component);
-InputLikeText.__KONTUR_REACT_UI__ = 'InputLikeText';
-InputLikeText.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'InputLikeText', _class2.displayName = 'InputLikeText', _class2.defaultProps = {
   size: 'small'
-};
+}, _temp)) || _class;