@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/cjs/internal/InputLikeText/InputLikeText.d.ts

@@ -15,17 +15,20 @@ export declare type InputLikeTextState = Omit<InputState, 'needsPolyfillPlacehol
 export declare const InputLikeTextDataTids: {
     readonly root: "InputLikeText__root";
     readonly input: "InputLikeText__input";
+    readonly nativeInput: "InputLikeText__nativeInput";
 };
+declare type DefaultProps = Required<Pick<InputLikeTextProps, 'size'>>;
 export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        size: string;
-    };
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         blinking: boolean;
         focused: boolean;
     };
     private theme;
+    private emotion;
     private node;
     private hiddenInput;
     private lastSelectedInnerNode;
@@ -48,6 +51,7 @@ export declare class InputLikeText extends React.Component<InputLikeTextProps, I
      */
     blink(): void;
     getNode(): HTMLElement | null;
+    private selectNodeContentsDebounced;
     selectInnerNode: (node: HTMLElement | null, start?: number, end?: number) => void;
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -69,9 +73,11 @@ export declare class InputLikeText extends React.Component<InputLikeTextProps, I
     private handleMouseDragStart;
     private handleMouseDragEnd;
     private handleFocus;
+    private resetFocus;
     private handleBlur;
     private hiddenInputRef;
     private innerRef;
     private defrost;
     private getSizeClassName;
 }
+export {};

package/cjs/internal/InputLikeText/InputLikeText.js

@@ -1,22 +1,33 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLikeTextDataTids = exports.InputLikeText = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));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.InputLikeTextDataTids = exports.InputLikeText = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _globalObject = require("@skbkontur/global-object");
+
 
 var _utils = require("../../lib/utils");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _MouseDrag = require("../../lib/events/MouseDrag");
 var _client = require("../../lib/client");
-
-var _SelectionHelpers = require("../../components/DateInput/helpers/SelectionHelpers");
+var _selectionHelpers = require("../../lib/dom/selectionHelpers");
 
 var _Input = require("../../components/Input/Input.styles");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _listenFocusOutside = require("../../lib/listenFocusOutside");
 var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _InputLayoutAside = require("../../components/Input/InputLayout/InputLayoutAside");
+var _InputLayoutContext = require("../../components/Input/InputLayout/InputLayoutContext");
+var _isInstanceOf = require("../../lib/isInstanceOf");
+var _FocusControlWrapper = require("../FocusControlWrapper");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
-var _InputLikeText = require("./InputLikeText.styles");
-var _HiddenInput = require("./HiddenInput");var _excluded = ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd", "takeContentWidth"];var _class, _class2, _temp;
+var _HiddenInput = require("./HiddenInput");
+var _InputLikeText = require("./InputLikeText.styles");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;
 
 
 
@@ -32,7 +43,10 @@ var _HiddenInput = require("./HiddenInput");var _excluded = ["innerRef", "tabInd
 
 var InputLikeTextDataTids = {
   root: 'InputLikeText__root',
-  input: 'InputLikeText__input' };exports.InputLikeTextDataTids = InputLikeTextDataTids;var
+  input: 'InputLikeText__input',
+  nativeInput: 'InputLikeText__nativeInput' };exports.InputLikeTextDataTids = InputLikeTextDataTids;var
+
+
 
 
 
@@ -41,9 +55,13 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(InputLikeText.defaultProps);_this.
+
     state = { blinking: false, focused: false };_this.
 
 
+
     node = null;_this.
     hiddenInput = null;_this.
     lastSelectedInnerNode = null;_this.
@@ -87,12 +105,15 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
+
+
+    selectNodeContentsDebounced = (0, _lodash.default)(_selectionHelpers.selectNodeContents, 0);_this.
 
     selectInnerNode = function (node, start, end) {if (start === void 0) {start = 0;}if (end === void 0) {end = 1;}
       if (_this.dragging || !node) {
         return;
       }
-      if (_client.isIE11 && (0, _listenFocusOutside.findRenderContainer)(node, document.body)) {
+      if (_client.isIE11 && _globalObject.globalObject.document && (0, _listenFocusOutside.findRenderContainer)(node, _globalObject.globalObject.document.body)) {
         // Code below causes Popup to close after triggering the focus event on the body in IE11
         return;
       }
@@ -100,11 +121,12 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       _this.frozenBlur = true;
 
       _this.lastSelectedInnerNode = [node, start, end];
-      setTimeout(function () {return (0, _SelectionHelpers.selectNodeContents)(node, start, end);}, 0);
+      _this.selectNodeContentsDebounced(node, start, end);
+
       if (_this.focusTimeout) {
-        clearInterval(_this.focusTimeout);
+        _globalObject.globalObject.clearInterval(_this.focusTimeout);
       }
-      _this.focusTimeout = window.setTimeout(function () {return (_client.isIE11 || _client.isEdge) && _this.node && _this.node.focus();}, 0);
+      _this.focusTimeout = _globalObject.globalObject.setTimeout(function () {return (_client.isIE11 || _client.isEdge) && _this.node && _this.node.focus();}, 0);
     };_this.
 
 
@@ -139,7 +161,14 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
-    renderMain = function (props) {var _cx, _cx2, _cx3;
+
+
+
+
+
+
+
+    renderMain = function (props) {var _this$emotion$cx, _this$emotion$cx2, _this$emotion$cx3;
       var
       innerRef =
 
@@ -161,31 +190,47 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
-      props.innerRef,tabIndex = props.tabIndex,placeholder = props.placeholder,align = props.align,borderless = props.borderless,width = props.width,size = props.size,error = props.error,warning = props.warning,onValueChange = props.onValueChange,disabled = props.disabled,prefix = props.prefix,suffix = props.suffix,leftIcon = props.leftIcon,rightIcon = props.rightIcon,value = props.value,onMouseDragStart = props.onMouseDragStart,onMouseDragEnd = props.onMouseDragEnd,takeContentWidth = props.takeContentWidth,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+      props.innerRef,tabIndex = props.tabIndex,placeholder = props.placeholder,align = props.align,borderless = props.borderless,width = props.width,size = props.size,error = props.error,warning = props.warning,onValueChange = props.onValueChange,disabled = props.disabled,prefix = props.prefix,suffix = props.suffix,leftIcon = props.leftIcon,rightIcon = props.rightIcon,value = props.value,onMouseDragStart = props.onMouseDragStart,onMouseDragEnd = props.onMouseDragEnd,takeContentWidth = props.takeContentWidth,ariaDescribedby = props['aria-describedby'],rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var _this$state = _this.state,focused = _this$state.focused,blinking = _this$state.blinking;
 
-      var leftSide = _this.renderLeftSide();
-      var rightSide = _this.renderRightSide();
+      var leftSide = (0, _ThemeHelpers.isTheme2022)(_this.theme) ? /*#__PURE__*/
+      _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: leftIcon, text: prefix, side: "left" }) :
+
+      _this.renderLeftSide();
+
+      var rightSide = (0, _ThemeHelpers.isTheme2022)(_this.theme) ? /*#__PURE__*/
+      _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: rightIcon, text: suffix, side: "right" }) :
+
+      _this.renderRightSide();
 
-      var className = (0, _Emotion.cx)(_InputLikeText.styles.root(), _Input.styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[
-      _Input.styles.disabled(_this.theme)] = !!disabled, _cx[
-      _Input.styles.borderless()] = !!borderless, _cx[
-      _Input.styles.focus(_this.theme)] = focused, _cx[
-      _Input.styles.blink(_this.theme)] = blinking, _cx[
-      _Input.styles.warning(_this.theme)] = !!warning, _cx[
-      _Input.styles.error(_this.theme)] = !!error, _cx[
-      _Input.styles.focusFallback(_this.theme)] = focused && (_client.isIE11 || _client.isEdge), _cx[
-      _Input.styles.warningFallback(_this.theme)] = !!warning && (_client.isIE11 || _client.isEdge), _cx[
-      _Input.styles.errorFallback(_this.theme)] = !!error && (_client.isIE11 || _client.isEdge), _cx[
-      _Input.styles.hideBlinkingCursor()] = _client.isMobile, _cx));
 
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
+      var styles = (0, _InputLikeText.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 && (_client.isIE11 || _client.isEdge), _this$emotion$cx[
+      jsInputStyles.warningFallback(_this.theme)] = !!warning && (_client.isIE11 || _client.isEdge), _this$emotion$cx[
+      jsInputStyles.errorFallback(_this.theme)] = !!error && (_client.isIE11 || _client.isEdge), _this$emotion$cx[
+      jsInputStyles.hideBlinkingCursor()] = _client.isMobile, _this$emotion$cx));
 
-      var wrapperClass = (0, _Emotion.cx)(_Input.styles.wrapper(), (_cx2 = {}, _cx2[
-      _InputLikeText.styles.userSelectContain()] = focused, _cx2));
 
+      var wrapperClass = _this.emotion.cx(jsInputStyles.wrapper(), (_this$emotion$cx2 = {}, _this$emotion$cx2[
+      styles.userSelectContain()] = focused, _this$emotion$cx2));
+
+
+      var context = _InputLayoutContext.InputLayoutContextDefault;
+      Object.assign(context, { disabled: disabled, focused: focused, size: size });
 
       return /*#__PURE__*/(
+        _react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { disabled: disabled, onBlurWhenDisabled: _this.resetFocus }, /*#__PURE__*/
         _react.default.createElement("span", (0, _extends2.default)({
           "data-tid": InputLikeTextDataTids.root },
         rest, {
@@ -198,15 +243,22 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
           onKeyDown: _this.handleKeyDown,
           onMouseDown: _this.handleMouseDown }), /*#__PURE__*/
 
-        _react.default.createElement("input", { type: "hidden", value: value }),
+        _react.default.createElement(_InputLayoutContext.InputLayoutContext.Provider, { value: context }, /*#__PURE__*/
+        _react.default.createElement("input", {
+          "data-tid": InputLikeTextDataTids.nativeInput,
+          type: "hidden",
+          value: value,
+          disabled: disabled,
+          "aria-describedby": ariaDescribedby }),
+
         leftSide, /*#__PURE__*/
         _react.default.createElement("span", { className: wrapperClass }, /*#__PURE__*/
         _react.default.createElement("span", {
           "data-tid": InputLikeTextDataTids.input,
-          className: (0, _Emotion.cx)(_Input.styles.input(_this.theme), (_cx3 = {}, _cx3[
-          _InputLikeText.styles.absolute()] = !takeContentWidth, _cx3[
-          _Input.styles.inputFocus(_this.theme)] = focused, _cx3[
-          _Input.styles.inputDisabled(_this.theme)] = disabled, _cx3)) },
+          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),
@@ -214,7 +266,9 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
         _this.renderPlaceholder()),
 
         rightSide,
-        _client.isIE11 && focused && /*#__PURE__*/_react.default.createElement(_HiddenInput.HiddenInput, { nodeRef: _this.hiddenInputRef })));
+        _client.isIE11 && focused && /*#__PURE__*/_react.default.createElement(_HiddenInput.HiddenInput, { nodeRef: _this.hiddenInputRef })))));
+
+
 
 
     };_this.
@@ -231,6 +285,7 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
+
     renderLeftIcon = function () {
       return _this.renderIcon(_this.props.leftIcon, _this.getIconClassname());
     };_this.
@@ -239,18 +294,19 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       return _this.renderIcon(_this.props.rightIcon, _this.getIconClassname(true));
     };_this.
 
-    renderIcon = function (icon, className) {var _cx4;
+    renderIcon = function (icon, className) {var _this$emotion$cx4;
       if (!icon) {
         return null;
       }
 
       var disabled = _this.props.disabled;
-      var iconNode = icon instanceof Function ? icon() : icon;
+      var iconNode = (0, _utils.isFunction)(icon) ? icon() : icon;
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
 
       return /*#__PURE__*/(
         _react.default.createElement("span", {
-          className: (0, _Emotion.cx)(_Input.styles.icon(), className, _Input.styles.useDefaultColor(_this.theme), (_cx4 = {}, _cx4[
-          _Input.styles.iconDisabled()] = disabled, _cx4)) },
+          className: _this.emotion.cx(jsInputStyles.icon(), className, jsInputStyles.useDefaultColor(_this.theme), (_this$emotion$cx4 = {}, _this$emotion$cx4[
+          jsInputStyles.iconDisabled()] = disabled, _this$emotion$cx4)) },
 
 
         iconNode));
@@ -258,29 +314,39 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
     };_this.
 
-    renderPrefix = function () {var _cx5;
+    renderPrefix = function () {var _this$emotion$cx5;
       var _this$props = _this.props,prefix = _this$props.prefix,disabled = _this$props.disabled;
 
       if (!prefix) {
         return null;
       }
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
 
       return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.prefix(_this.theme), (_cx5 = {}, _cx5[_Input.styles.prefixDisabled(_this.theme)] = disabled, _cx5)) },
+        _react.default.createElement("span", {
+          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 _cx6;
+    renderSuffix = function () {var _this$emotion$cx6;
       var _this$props2 = _this.props,suffix = _this$props2.suffix,disabled = _this$props2.disabled;
 
       if (!suffix) {
         return null;
       }
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
 
       return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.suffix(_this.theme), (_cx6 = {}, _cx6[_Input.styles.suffixDisabled(_this.theme)] = disabled, _cx6)) },
+        _react.default.createElement("span", {
+          className: _this.emotion.cx(jsInputStyles.suffix(_this.theme), (_this$emotion$cx6 = {}, _this$emotion$cx6[
+          jsInputStyles.suffixDisabled(_this.theme)] = disabled, _this$emotion$cx6)) },
+
+
         suffix));
 
 
@@ -293,9 +359,10 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       if (!leftIcon && !prefix) {
         return null;
       }
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
 
       return /*#__PURE__*/(
-        _react.default.createElement("span", { className: _Input.styles.sideContainer() },
+        _react.default.createElement("span", { className: jsInputStyles.sideContainer() },
         leftIcon,
         prefix));
 
@@ -309,9 +376,10 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       if (!rightIcon && !suffix) {
         return null;
       }
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
 
       return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.sideContainer(), _Input.styles.rightContainer()) },
+        _react.default.createElement("span", { className: _this.emotion.cx(jsInputStyles.sideContainer(), jsInputStyles.rightContainer()) },
         rightIcon,
         suffix));
 
@@ -323,12 +391,13 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       var focused = _this.state.focused;
       var hasValue = (0, _utils.isNonNullable)(children) && children !== '';
 
-      if (!hasValue && placeholder) {var _cx7;
+      if (!hasValue && placeholder) {var _this$emotion$cx7;
+        var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
         return /*#__PURE__*/(
           _react.default.createElement("span", {
-            className: (0, _Emotion.cx)(_Input.styles.placeholder(_this.theme), (_cx7 = {}, _cx7[
-            _Input.styles.placeholderDisabled(_this.theme)] = disabled, _cx7[
-            _Input.styles.placeholderFocus(_this.theme)] = focused, _cx7)) },
+            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));
@@ -339,7 +408,7 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
     };_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 && (0, _isInstanceOf.isInstanceOf)(e.target, _globalObject.globalObject.Node) && !_this.node.contains(e.target)) {
         _this.defrost();
       }
     };_this.
@@ -350,7 +419,7 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       }
     };_this.
 
-    handleMouseDown = function (e) {
+    handleMouseDown = function () {
       _this.frozen = true;
     };_this.
 
@@ -361,7 +430,7 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
       if (_client.isIE11 && (0, _identifiers.isShortcutPaste)(e) && _this.hiddenInput) {
         _this.frozen = true;
-        setTimeout(function () {
+        _globalObject.globalObject.setTimeout(function () {
           if (_this.lastSelectedInnerNode) {var _this2;
             (_this2 = _this).selectInnerNode.apply(_this2, _this.lastSelectedInnerNode);
           }
@@ -378,36 +447,37 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       }
     };_this.
 
-    handleMouseDragStart = function (e) {
+    handleMouseDragStart = function (e) {var _globalObject$documen;
       _this.dragging = true;
-      document.documentElement.classList.add(_InputLikeText.styles.userSelectNone());
+      var styles = (0, _InputLikeText.getStyles)(_this.emotion);
+      (_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.documentElement.classList.add(styles.userSelectNone());
 
       if (_this.props.onMouseDragStart) {
         _this.props.onMouseDragStart(e);
       }
     };_this.
 
-    handleMouseDragEnd = function (e) {
+    handleMouseDragEnd = function (e) {var _globalObject$documen2;
       // Дожидаемся onMouseUp
-      setTimeout(function () {
+      _globalObject.globalObject.setTimeout(function () {
         _this.dragging = false;
 
         if (_this.props.onMouseDragEnd) {
           _this.props.onMouseDragEnd(e);
         }
       }, 0);
-
-      document.documentElement.classList.remove(_InputLikeText.styles.userSelectNone());
+      var styles = (0, _InputLikeText.getStyles)(_this.emotion);
+      (_globalObject$documen2 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen2.documentElement.classList.remove(styles.userSelectNone());
     };_this.
 
     handleFocus = function (e) {
-      if (_client.isMobile) {
-        e.target.setAttribute('contenteditable', 'true');
+      if (_client.isMobile) {var _this$node;
+        (_this$node = _this.node) == null ? void 0 : _this$node.setAttribute('contenteditable', 'true');
       }
 
       if (_this.props.disabled) {
-        if (_client.isIE11) {
-          (0, _SelectionHelpers.selectNodeContents)(document.body, 0, 0);
+        if (_client.isIE11 && _globalObject.globalObject.document) {
+          (0, _selectionHelpers.selectNodeContents)(_globalObject.globalObject.document.body, 0, 0);
         }
         return;
       }
@@ -419,16 +489,35 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
         }
       }
 
-      _this.setState({ focused: true });
+      // Auto-batching React@18 creates problems that are fixed with flushSync
+      // https://github.com/skbkontur/retail-ui/pull/3144#issuecomment-1535235366
+      if (_react.default.version.search('18') === 0) {
+        _reactDom.default.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 (_client.isMobile) {var _this$node2;
+        (_this$node2 = _this.node) == null ? void 0 : _this$node2.removeAttribute('contenteditable');
+      }
+      if ((_client.isIE11 || _client.isEdge) && _this.frozenBlur) {
+        _this.frozenBlur = false;
+      }
+      (0, _selectionHelpers.removeAllSelections)();
+      _this.setState({ focused: false });
+    };_this.
+
     handleBlur = function (e) {
-      if (_client.isMobile) {
-        e.target.removeAttribute('contenteditable');
+      _this.selectNodeContentsDebounced.cancel();
+      if (_client.isMobile) {var _this$node3;
+        (_this$node3 = _this.node) == null ? void 0 : _this$node3.removeAttribute('contenteditable');
       }
 
       if (_this.props.disabled) {
@@ -444,13 +533,10 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
         return;
       }
 
-      (0, _SelectionHelpers.removeAllSelections)();
-
+      (0, _selectionHelpers.removeAllSelections)();
       _this.setState({ focused: false });
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
-      }
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
     };_this.
 
     hiddenInputRef = function (el) {
@@ -469,23 +555,24 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       _this.frozenBlur = false;
     };_this.
 
-    getSizeClassName = function () {var _cx8, _cx9, _cx10;
-      switch (_this.props.size) {
+    getSizeClassName = function () {var _this$emotion$cx8, _this$emotion$cx9, _this$emotion$cx10;
+      var jsInputStyles = (0, _Input.getStyles)(_this.emotion);
+      switch (_this.getProps().size) {
         case 'large':
-          return (0, _Emotion.cx)((_cx8 = {}, _cx8[
-          _Input.styles.sizeLarge(_this.theme)] = true, _cx8[
-          _Input.styles.sizeLargeFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx8));
+          return _this.emotion.cx((_this$emotion$cx8 = {}, _this$emotion$cx8[
+          jsInputStyles.sizeLarge(_this.theme)] = true, _this$emotion$cx8[
+          jsInputStyles.sizeLargeFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _this$emotion$cx8));
 
         case 'medium':
-          return (0, _Emotion.cx)((_cx9 = {}, _cx9[
-          _Input.styles.sizeMedium(_this.theme)] = true, _cx9[
-          _Input.styles.sizeMediumFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx9));
+          return _this.emotion.cx((_this$emotion$cx9 = {}, _this$emotion$cx9[
+          jsInputStyles.sizeMedium(_this.theme)] = true, _this$emotion$cx9[
+          jsInputStyles.sizeMediumFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _this$emotion$cx9));
 
         case 'small':
         default:
-          return (0, _Emotion.cx)((_cx10 = {}, _cx10[
-          _Input.styles.sizeSmall(_this.theme)] = true, _cx10[
-          _Input.styles.sizeSmallFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx10));}
+          return _this.emotion.cx((_this$emotion$cx10 = {}, _this$emotion$cx10[
+          jsInputStyles.sizeSmall(_this.theme)] = true, _this$emotion$cx10[
+          jsInputStyles.sizeSmallFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _this$emotion$cx10));}
 
 
     };return _this;}var _proto = InputLikeText.prototype; /**
@@ -494,4 +581,5 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
    * @public
    */;_proto.blur = function blur() {if (this.node) {this.node.blur();}} /**
    * @public
-   */;_proto.blink = function blink() {var _this3 = this;if (this.props.disabled) {return;}this.setState({ blinking: true }, function () {_this3.blinkTimeout = window.setTimeout(function () {return _this3.setState({ blinking: false });}, 150);});};_proto.getNode = function getNode() {return this.node;};_proto.componentDidMount = function componentDidMount() {if (this.node) {_MouseDrag.MouseDrag.listen(this.node).onMouseDragStart(this.handleMouseDragStart).onMouseDragEnd(this.handleMouseDragEnd);}document.addEventListener('mousedown', this.handleDocumentMouseDown);document.addEventListener('keydown', this.handleDocumentKeyDown);};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}_MouseDrag.MouseDrag.stop(this.node);document.removeEventListener('mousedown', this.handleDocumentMouseDown);document.removeEventListener('keydown', this.handleDocumentKeyDown);};_proto.render = function render() {var _this4 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this4.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this4.setRootNode }, _this4.props), _this4.renderMain);});};_proto.getIconClassname = function getIconClassname(right) {if (right === void 0) {right = false;}switch (this.props.size) {case 'large':return right ? _Input.styles.rightIconLarge(this.theme) : _Input.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input.styles.rightIconMedium(this.theme) : _Input.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.styles.rightIconSmall(this.theme) : _Input.styles.leftIconSmall(this.theme);}};return InputLikeText;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'InputLikeText', _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.InputLikeText = InputLikeText;
+   */;_proto.blink = function blink() {var _this3 = this;if (this.props.disabled) {return;}this.setState({ blinking: true }, function () {_this3.blinkTimeout = _globalObject.globalObject.setTimeout(function () {return _this3.setState({ blinking: false });}, 150);});};_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.MouseDrag.listen(this.node).onMouseDragStart(this.handleMouseDragStart).onMouseDragEnd(this.handleMouseDragEnd);}(_globalObject$documen3 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen3.addEventListener('mousedown', this.handleDocumentMouseDown);(_globalObject$documen4 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen4.addEventListener('keydown', this.handleDocumentKeyDown);};_proto.componentWillUnmount = function componentWillUnmount() {var _globalObject$documen5, _globalObject$documen6;if (this.blinkTimeout) {_globalObject.globalObject.clearTimeout(this.blinkTimeout);}_MouseDrag.MouseDrag.stop(this.node);(_globalObject$documen5 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen5.removeEventListener('mousedown', this.handleDocumentMouseDown);(_globalObject$documen6 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen6.removeEventListener('keydown', this.handleDocumentKeyDown);};_proto.render = function render() {var _this4 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this4.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this4.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this4.setRootNode }, _this4.props), _this4.renderMain);});});};_proto.getIconClassname = function getIconClassname(right) {if (right === void 0) {right = false;}var jsInputStyles = (0, _Input.getStyles)(this.emotion);switch (this.getProps().size) {case 'large':return right ? jsInputStyles.rightIconLarge(this.theme) : jsInputStyles.leftIconLarge(this.theme);case 'medium':return right ? jsInputStyles.rightIconMedium(this.theme) : jsInputStyles.leftIconMedium(this.theme);case 'small':default:return right ? jsInputStyles.rightIconSmall(this.theme) : jsInputStyles.leftIconSmall(this.theme);}};return InputLikeText;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'InputLikeText', _class2.displayName = 'InputLikeText', _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.InputLikeText = InputLikeText;