@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js

@@ -6,12 +6,19 @@ var _templateObject;
 import React from 'react';
 import { globalObject, isBrowser } from '@skbkontur/global-object';
 import { getScrollWidth } from "../../../lib/dom/getScrollWidth";
-import { css } from "../../../lib/theming/Emotion";
+import { useEmotion } from "../../../lib/theming/Emotion";
 var disposeDocumentStyle = null;
-export var HideBodyVerticalScroll = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(HideBodyVerticalScroll, _React$Component);
+export var HideBodyVerticalScroll = function HideBodyVerticalScroll() {
+  var emotion = useEmotion();
+  return /*#__PURE__*/React.createElement(HideBodyVerticalScrollELement, {
+    emotion: emotion
+  });
+};
+
+var HideBodyVerticalScrollELement = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(HideBodyVerticalScrollELement, _React$Component);
 
-  function HideBodyVerticalScroll() {
+  function HideBodyVerticalScrollELement() {
     var _this;
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -42,10 +49,16 @@ export var HideBodyVerticalScroll = /*#__PURE__*/function (_React$Component) {
       var scrollbarConst = globalObject.getComputedStyle(documentElement).overflowY === 'scroll';
       var scrollWidth = clientHeight < scrollHeight || scrollbarConst ? getScrollWidth() : 0;
       var documentMargin = parseFloat(documentComputedStyle.marginRight || '');
-      var className = generateDocumentStyle(documentMargin + scrollWidth);
+
+      var className = _this.generateDocumentStyle(documentMargin + scrollWidth);
+
       disposeDocumentStyle = _this.attachStyle(documentElement, className);
     };
 
+    _this.generateDocumentStyle = function (documentMargin) {
+      return _this.props.emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    overflow: hidden !important;\n    margin-right: ", "px !important;\n    height: 100%;\n  "])), documentMargin);
+    };
+
     _this.attachStyle = function (element, className) {
       element.classList.add(className);
       return function () {
@@ -67,7 +80,7 @@ export var HideBodyVerticalScroll = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  var _proto = HideBodyVerticalScroll.prototype;
+  var _proto = HideBodyVerticalScrollELement.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
     var counter = VerticalScrollCounter.increment();
@@ -101,9 +114,11 @@ export var HideBodyVerticalScroll = /*#__PURE__*/function (_React$Component) {
     return null;
   };
 
-  return HideBodyVerticalScroll;
+  return HideBodyVerticalScrollELement;
 }(React.Component);
-HideBodyVerticalScroll.__KONTUR_REACT_UI__ = 'HideBodyVerticalScroll';
+
+HideBodyVerticalScrollELement.__KONTUR_REACT_UI__ = 'HideBodyVerticalScroll';
+HideBodyVerticalScrollELement.displayName = 'HideBodyVerticalScroll';
 
 var VerticalScrollCounter = function VerticalScrollCounter() {};
 
@@ -119,8 +134,4 @@ VerticalScrollCounter.decrement = function () {
 
 VerticalScrollCounter.get = function () {
   return globalObject.RetailUIVerticalScrollCounter || 0;
-};
-
-function generateDocumentStyle(documentMargin) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    overflow: hidden !important;\n    margin-right: ", "px !important;\n    height: 100%;\n  "])), documentMargin);
-}
+};

package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HideBodyVerticalScroll.tsx"],"names":["React","globalObject","isBrowser","getScrollWidth","css","disposeDocumentStyle","HideBodyVerticalScroll","initialScroll","master","updateScrollVisibility","shouldHide","hideScroll","documentElement","document","clientHeight","scrollHeight","documentComputedStyle","getComputedStyle","scrollbarConst","overflowY","scrollWidth","documentMargin","parseFloat","marginRight","className","generateDocumentStyle","attachStyle","element","classList","add","remove","restoreStyles","scrollTop","componentDidMount","counter","VerticalScrollCounter","increment","addEventListener","componentDidUpdate","componentWillUnmount","decrement","removeEventListener","render","Component","__KONTUR_REACT_UI__","RetailUIVerticalScrollCounter","get"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { css } from '../../lib/theming/Emotion';\n\nlet disposeDocumentStyle: (() => void) | null = null;\n\nexport class HideBodyVerticalScroll extends React.Component {\n  public static __KONTUR_REACT_UI__ = 'HideBodyVerticalScroll';\n\n  private initialScroll = 0;\n  private master = false;\n\n  public componentDidMount() {\n    const counter = VerticalScrollCounter.increment();\n    if (counter === 1) {\n      this.master = true;\n      this.initialScroll = globalObject.document?.documentElement ? globalObject.document.documentElement.scrollTop : 0;\n      this.updateScrollVisibility();\n      globalObject.addEventListener?.('resize', this.updateScrollVisibility);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.master) {\n      this.updateScrollVisibility();\n    }\n  }\n\n  public componentWillUnmount() {\n    const counter = VerticalScrollCounter.decrement();\n    if (counter === 0) {\n      this.restoreStyles();\n      globalObject.removeEventListener?.('resize', this.updateScrollVisibility);\n    }\n  }\n\n  public render() {\n    return null;\n  }\n\n  private updateScrollVisibility = () => {\n    const shouldHide = !disposeDocumentStyle;\n    if (shouldHide) {\n      this.hideScroll();\n    }\n  };\n\n  private hideScroll = () => {\n    if (!isBrowser(globalObject)) {\n      return;\n    }\n    const { documentElement } = globalObject.document;\n    const { clientHeight, scrollHeight } = documentElement;\n    const documentComputedStyle = globalObject.getComputedStyle(documentElement);\n    const scrollbarConst = globalObject.getComputedStyle(documentElement).overflowY === 'scroll';\n    const scrollWidth = clientHeight < scrollHeight || scrollbarConst ? getScrollWidth() : 0;\n    const documentMargin = parseFloat(documentComputedStyle.marginRight || '');\n    const className = generateDocumentStyle(documentMargin + scrollWidth);\n\n    disposeDocumentStyle = this.attachStyle(documentElement, className);\n  };\n\n  private attachStyle = (element: HTMLElement, className: string) => {\n    element.classList.add(className);\n    return () => {\n      element.classList.remove(className);\n    };\n  };\n\n  private restoreStyles = () => {\n    if (disposeDocumentStyle) {\n      disposeDocumentStyle();\n      disposeDocumentStyle = null;\n\n      if (globalObject.document) {\n        globalObject.document.documentElement.scrollTop = this.initialScroll;\n      }\n    }\n  };\n}\n\nclass VerticalScrollCounter {\n  public static increment = (): number => {\n    const counter = globalObject.RetailUIVerticalScrollCounter || 0;\n    return (globalObject.RetailUIVerticalScrollCounter = counter + 1);\n  };\n\n  public static decrement = (): number => {\n    const counter = globalObject.RetailUIVerticalScrollCounter || 0;\n    return (globalObject.RetailUIVerticalScrollCounter = counter - 1);\n  };\n\n  public static get = (): number => {\n    return globalObject.RetailUIVerticalScrollCounter || 0;\n  };\n}\n\nfunction generateDocumentStyle(documentMargin: number) {\n  return css`\n    overflow: hidden !important;\n    margin-right: ${documentMargin}px !important;\n    height: 100%;\n  `;\n}\n"]}
+{"version":3,"sources":["HideBodyVerticalScroll.tsx"],"names":["React","globalObject","isBrowser","getScrollWidth","useEmotion","disposeDocumentStyle","HideBodyVerticalScroll","emotion","HideBodyVerticalScrollELement","initialScroll","master","updateScrollVisibility","shouldHide","hideScroll","documentElement","document","clientHeight","scrollHeight","documentComputedStyle","getComputedStyle","scrollbarConst","overflowY","scrollWidth","documentMargin","parseFloat","marginRight","className","generateDocumentStyle","attachStyle","props","css","element","classList","add","remove","restoreStyles","scrollTop","componentDidMount","counter","VerticalScrollCounter","increment","addEventListener","componentDidUpdate","componentWillUnmount","decrement","removeEventListener","render","Component","__KONTUR_REACT_UI__","displayName","RetailUIVerticalScrollCounter","get"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nlet disposeDocumentStyle: (() => void) | null = null;\n\nexport const HideBodyVerticalScroll = () => {\n  const emotion = useEmotion();\n  return <HideBodyVerticalScrollELement emotion={emotion} />;\n};\n\nclass HideBodyVerticalScrollELement extends React.Component<{ emotion: Emotion }> {\n  public static __KONTUR_REACT_UI__ = 'HideBodyVerticalScroll';\n  public static displayName = 'HideBodyVerticalScroll';\n\n  private initialScroll = 0;\n  private master = false;\n\n  public componentDidMount() {\n    const counter = VerticalScrollCounter.increment();\n    if (counter === 1) {\n      this.master = true;\n      this.initialScroll = globalObject.document?.documentElement ? globalObject.document.documentElement.scrollTop : 0;\n      this.updateScrollVisibility();\n      globalObject.addEventListener?.('resize', this.updateScrollVisibility);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.master) {\n      this.updateScrollVisibility();\n    }\n  }\n\n  public componentWillUnmount() {\n    const counter = VerticalScrollCounter.decrement();\n    if (counter === 0) {\n      this.restoreStyles();\n      globalObject.removeEventListener?.('resize', this.updateScrollVisibility);\n    }\n  }\n\n  public render() {\n    return null;\n  }\n\n  private updateScrollVisibility = () => {\n    const shouldHide = !disposeDocumentStyle;\n    if (shouldHide) {\n      this.hideScroll();\n    }\n  };\n\n  private hideScroll = () => {\n    if (!isBrowser(globalObject)) {\n      return;\n    }\n    const { documentElement } = globalObject.document;\n    const { clientHeight, scrollHeight } = documentElement;\n    const documentComputedStyle = globalObject.getComputedStyle(documentElement);\n    const scrollbarConst = globalObject.getComputedStyle(documentElement).overflowY === 'scroll';\n    const scrollWidth = clientHeight < scrollHeight || scrollbarConst ? getScrollWidth() : 0;\n    const documentMargin = parseFloat(documentComputedStyle.marginRight || '');\n    const className = this.generateDocumentStyle(documentMargin + scrollWidth);\n\n    disposeDocumentStyle = this.attachStyle(documentElement, className);\n  };\n\n  private generateDocumentStyle = (documentMargin: number) => {\n    return this.props.emotion.css`\n    overflow: hidden !important;\n    margin-right: ${documentMargin}px !important;\n    height: 100%;\n  `;\n  };\n\n  private attachStyle = (element: HTMLElement, className: string) => {\n    element.classList.add(className);\n    return () => {\n      element.classList.remove(className);\n    };\n  };\n\n  private restoreStyles = () => {\n    if (disposeDocumentStyle) {\n      disposeDocumentStyle();\n      disposeDocumentStyle = null;\n\n      if (globalObject.document) {\n        globalObject.document.documentElement.scrollTop = this.initialScroll;\n      }\n    }\n  };\n}\n\nclass VerticalScrollCounter {\n  public static increment = (): number => {\n    const counter = globalObject.RetailUIVerticalScrollCounter || 0;\n    return (globalObject.RetailUIVerticalScrollCounter = counter + 1);\n  };\n\n  public static decrement = (): number => {\n    const counter = globalObject.RetailUIVerticalScrollCounter || 0;\n    return (globalObject.RetailUIVerticalScrollCounter = counter - 1);\n  };\n\n  public static get = (): number => {\n    return globalObject.RetailUIVerticalScrollCounter || 0;\n  };\n}\n"]}

package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.d.ts

@@ -1,14 +1 @@
-import React from 'react';
-export declare class HideBodyVerticalScroll extends React.Component {
-    static __KONTUR_REACT_UI__: string;
-    private initialScroll;
-    private master;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): null;
-    private updateScrollVisibility;
-    private hideScroll;
-    private attachStyle;
-    private restoreStyles;
-}
+export declare const HideBodyVerticalScroll: () => JSX.Element;

package/internal/IgnoreLayerClick/IgnoreLayerClick/IgnoreLayerClick.js

@@ -70,4 +70,4 @@ var IgnoreLayerClickWrapper = rootNode(_class = (_temp = _class2 = /*#__PURE__*/
   };
 
   return IgnoreLayerClickWrapper;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'IgnoreLayerClick', _temp)) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'IgnoreLayerClick', _class2.displayName = 'IgnoreLayerClick', _temp)) || _class;

package/internal/IgnoreLayerClick/IgnoreLayerClick/IgnoreLayerClick.js.map

@@ -1 +1 @@
-{"version":3,"sources":["IgnoreLayerClick.tsx"],"names":["React","globalObject","getRootNode","rootNode","isInstanceOf","CommonWrapper","IgnoreLayerClick","render","child","Children","only","props","children","active","Component","IgnoreLayerClickWrapper","element","handleMouseDown","event","stopPropagation","componentDidMount","Element","addEventListener","componentWillUnmount","removeEventListener","setRootNode","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,YAAT,QAA6B,0BAA7B;;AAEA,SAASC,WAAT,EAAsBC,QAAtB,QAAoD,oBAApD;AACA,SAASC,YAAT,QAA6B,wBAA7B;AACA,SAASC,aAAT,QAA8B,kBAA9B;;;;;;;AAOA,WAAaC,gBAAb;AACSC,EAAAA,MADT,GACE,kBAAgB;AACd,QAAMC,KAAK,GAAGR,KAAK,CAACS,QAAN,CAAeC,IAAf,CAAoB,KAAKC,KAAL,CAAWC,QAA/B,CAAd;AACA,WAAO,KAAKD,KAAL,CAAWE,MAAX,gBAAoB,oBAAC,uBAAD,QAA0BL,KAA1B,CAApB,GAAiFA,KAAxF;AACD,GAJH,2BAAsCR,KAAK,CAACc,SAA5C;;;;;;;AAWA;;AAEMC,uB,GADLZ,Q;;;AAISa,IAAAA,O,GAA0B,I;;;;;;;;;;;;;;;;;;;;;;;;;;AA0B1BC,IAAAA,e,GAAkB,UAACC,KAAD,EAAkB;AAC1CA,MAAAA,KAAK,CAACC,eAAN;AACD,K,uEAzBMC,iB,GAAP,6BAA2B,CACzB,IAAMJ,OAAO,GAAGd,WAAW,CAAC,IAAD,CAA3B,CACA,IAAIE,YAAY,CAACY,OAAD,EAAUf,YAAY,CAACoB,OAAvB,CAAhB,EAAiD,CAC/CL,OAAO,CAACM,gBAAR,CAAyB,WAAzB,EAAsC,KAAKL,eAA3C,EACA,KAAKD,OAAL,GAAeA,OAAf,CACD,CACF,C,SAEMO,oB,GAAP,gCAA8B,CAC5B,IAAI,KAAKP,OAAT,EAAkB,CAChB,KAAKA,OAAL,CAAaQ,mBAAb,CAAiC,WAAjC,EAA8C,KAAKP,eAAnD,EACA,KAAKD,OAAL,GAAe,IAAf,CACD,CACF,C,SAEMT,M,GAAP,kBAAgB,CACd,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKkB,WAAjC,IAAkD,KAAKd,KAAvD,GACGX,KAAK,CAACS,QAAN,CAAeC,IAAf,CAAoB,KAAKC,KAAL,CAAWC,QAA/B,CADH,CADF,CAKD,C,kCA3BmCZ,KAAK,CAACc,S,WAC5BY,mB,GAAsB,kB","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { CommonWrapper } from '../CommonWrapper';\n\nexport interface IgnoreLayerClickProps {\n  children: React.ReactNode;\n  active: boolean;\n}\n\nexport class IgnoreLayerClick extends React.Component<IgnoreLayerClickProps> {\n  public render() {\n    const child = React.Children.only(this.props.children);\n    return this.props.active ? <IgnoreLayerClickWrapper>{child}</IgnoreLayerClickWrapper> : child;\n  }\n}\n\ninterface WrapperProps {\n  children: React.ReactNode;\n}\n\n// NOTE Используется только в команде Контур.Бухгалтерия\n@rootNode\nclass IgnoreLayerClickWrapper extends React.Component<WrapperProps> {\n  public static __KONTUR_REACT_UI__ = 'IgnoreLayerClick';\n\n  private element: Element | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    const element = getRootNode(this);\n    if (isInstanceOf(element, globalObject.Element)) {\n      element.addEventListener('mousedown', this.handleMouseDown);\n      this.element = element;\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.element) {\n      this.element.removeEventListener('mousedown', this.handleMouseDown);\n      this.element = null;\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private handleMouseDown = (event: Event) => {\n    event.stopPropagation();\n  };\n}\n"]}
+{"version":3,"sources":["IgnoreLayerClick.tsx"],"names":["React","globalObject","getRootNode","rootNode","isInstanceOf","CommonWrapper","IgnoreLayerClick","render","child","Children","only","props","children","active","Component","IgnoreLayerClickWrapper","element","handleMouseDown","event","stopPropagation","componentDidMount","Element","addEventListener","componentWillUnmount","removeEventListener","setRootNode","__KONTUR_REACT_UI__","displayName"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,YAAT,QAA6B,0BAA7B;;AAEA,SAASC,WAAT,EAAsBC,QAAtB,QAAoD,oBAApD;AACA,SAASC,YAAT,QAA6B,wBAA7B;AACA,SAASC,aAAT,QAA8B,kBAA9B;;;;;;;AAOA,WAAaC,gBAAb;AACSC,EAAAA,MADT,GACE,kBAAgB;AACd,QAAMC,KAAK,GAAGR,KAAK,CAACS,QAAN,CAAeC,IAAf,CAAoB,KAAKC,KAAL,CAAWC,QAA/B,CAAd;AACA,WAAO,KAAKD,KAAL,CAAWE,MAAX,gBAAoB,oBAAC,uBAAD,QAA0BL,KAA1B,CAApB,GAAiFA,KAAxF;AACD,GAJH,2BAAsCR,KAAK,CAACc,SAA5C;;;;;;;AAWA;;AAEMC,uB,GADLZ,Q;;;;AAKSa,IAAAA,O,GAA0B,I;;;;;;;;;;;;;;;;;;;;;;;;;;AA0B1BC,IAAAA,e,GAAkB,UAACC,KAAD,EAAkB;AAC1CA,MAAAA,KAAK,CAACC,eAAN;AACD,K,uEAzBMC,iB,GAAP,6BAA2B,CACzB,IAAMJ,OAAO,GAAGd,WAAW,CAAC,IAAD,CAA3B,CACA,IAAIE,YAAY,CAACY,OAAD,EAAUf,YAAY,CAACoB,OAAvB,CAAhB,EAAiD,CAC/CL,OAAO,CAACM,gBAAR,CAAyB,WAAzB,EAAsC,KAAKL,eAA3C,EACA,KAAKD,OAAL,GAAeA,OAAf,CACD,CACF,C,SAEMO,oB,GAAP,gCAA8B,CAC5B,IAAI,KAAKP,OAAT,EAAkB,CAChB,KAAKA,OAAL,CAAaQ,mBAAb,CAAiC,WAAjC,EAA8C,KAAKP,eAAnD,EACA,KAAKD,OAAL,GAAe,IAAf,CACD,CACF,C,SAEMT,M,GAAP,kBAAgB,CACd,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKkB,WAAjC,IAAkD,KAAKd,KAAvD,GACGX,KAAK,CAACS,QAAN,CAAeC,IAAf,CAAoB,KAAKC,KAAL,CAAWC,QAA/B,CADH,CADF,CAKD,C,kCA5BmCZ,KAAK,CAACc,S,WAC5BY,mB,GAAsB,kB,UACtBC,W,GAAc,kB","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { CommonWrapper } from '../CommonWrapper';\n\nexport interface IgnoreLayerClickProps {\n  children: React.ReactNode;\n  active: boolean;\n}\n\nexport class IgnoreLayerClick extends React.Component<IgnoreLayerClickProps> {\n  public render() {\n    const child = React.Children.only(this.props.children);\n    return this.props.active ? <IgnoreLayerClickWrapper>{child}</IgnoreLayerClickWrapper> : child;\n  }\n}\n\ninterface WrapperProps {\n  children: React.ReactNode;\n}\n\n// NOTE Используется только в команде Контур.Бухгалтерия\n@rootNode\nclass IgnoreLayerClickWrapper extends React.Component<WrapperProps> {\n  public static __KONTUR_REACT_UI__ = 'IgnoreLayerClick';\n  public static displayName = 'IgnoreLayerClick';\n\n  private element: Element | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    const element = getRootNode(this);\n    if (isInstanceOf(element, globalObject.Element)) {\n      element.addEventListener('mousedown', this.handleMouseDown);\n      this.element = element;\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.element) {\n      this.element.removeEventListener('mousedown', this.handleMouseDown);\n      this.element = null;\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private handleMouseDown = (event: Event) => {\n    event.stopPropagation();\n  };\n}\n"]}

package/internal/InputLikeText/HiddenInput/HiddenInput.js

@@ -1,25 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _excluded = ["nodeRef"];
 
 var _templateObject;
 
+var _excluded = ["nodeRef"];
 import React from 'react';
-import { css } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 
 var cap = function cap(e) {
   return e.stopPropagation();
 };
-
-var className = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 1px;\n  height: 0;\n  border: 0;\n  outline: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  opacity: 0;\n"])));
 /**
  * В **IE11** событие `onPaste` вызывается только у редактируемых элементов: `input`, `textarea`, `[contenteditable]`.
  * Для решения этой проблемы, перед "вставкой" фокусируемся на инпуте
  * после этого `onPaste` вызывается у инпута и всплывает.
  */
 
+
 export var HiddenInput = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(HiddenInput, _React$Component);
 
@@ -34,15 +33,18 @@ export var HiddenInput = /*#__PURE__*/function (_React$Component) {
         nodeRef = _this$props.nodeRef,
         props = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    return /*#__PURE__*/React.createElement("input", _extends({}, props, {
-      ref: nodeRef,
-      type: "text",
-      tabIndex: -1,
-      onBlur: cap,
-      onFocus: cap,
-      onChange: cap,
-      className: className
-    }));
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      var className = emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n            position: absolute;\n            width: 1px;\n            height: 0;\n            border: 0;\n            outline: 0;\n            margin: 0;\n            padding: 0;\n            overflow: hidden;\n            opacity: 0;\n          "])));
+      return /*#__PURE__*/React.createElement("input", _extends({}, props, {
+        ref: nodeRef,
+        type: "text",
+        tabIndex: -1,
+        onBlur: cap,
+        onFocus: cap,
+        onChange: cap,
+        className: className
+      }));
+    });
   };
 
   return HiddenInput;

package/internal/InputLikeText/HiddenInput/HiddenInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HiddenInput.tsx"],"names":["React","css","cap","e","stopPropagation","className","HiddenInput","render","props","nodeRef","Component"],"mappings":"oXAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,GAAT,QAAoB,2BAApB;;;;;;AAMA,IAAMC,GAA4B,GAAG,SAA/BA,GAA+B,CAACC,CAAD,UAAOA,CAAC,CAACC,eAAF,EAAP,EAArC;;AAEA,IAAMC,SAAS,GAAGJ,GAAH,8NAAf;;;;;;;;;;;;AAYA;AACA;AACA;AACA;AACA;AACA,WAAaK,WAAb;AACSC,EAAAA,MADT,GACE,kBAAgB;AACd,sBAA8B,KAAKC,KAAnC,CAAQC,OAAR,eAAQA,OAAR,CAAoBD,KAApB;AACA;AACE;AACMA,MAAAA,KADN;AAEE,QAAA,GAAG,EAAEC,OAFP;AAGE,QAAA,IAAI,EAAC,MAHP;AAIE,QAAA,QAAQ,EAAE,CAAC,CAJb;AAKE,QAAA,MAAM,EAAEP,GALV;AAME,QAAA,OAAO,EAAEA,GANX;AAOE,QAAA,QAAQ,EAAEA,GAPZ;AAQE,QAAA,SAAS,EAAEG,SARb,IADF;;;AAYD,GAfH,sBAAiCL,KAAK,CAACU,SAAvC","sourcesContent":["import React from 'react';\n\nimport { css } from '../../lib/theming/Emotion';\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n  nodeRef: (ref: HTMLInputElement | null) => void;\n}\n\nconst cap: React.ReactEventHandler = (e) => e.stopPropagation();\n\nconst className = css`\n  position: absolute;\n  width: 1px;\n  height: 0;\n  border: 0;\n  outline: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  opacity: 0;\n`;\n\n/**\n * В **IE11** событие `onPaste` вызывается только у редактируемых элементов: `input`, `textarea`, `[contenteditable]`.\n * Для решения этой проблемы, перед \"вставкой\" фокусируемся на инпуте\n * после этого `onPaste` вызывается у инпута и всплывает.\n */\nexport class HiddenInput extends React.Component<Props> {\n  public render() {\n    const { nodeRef, ...props } = this.props;\n    return (\n      <input\n        {...props}\n        ref={nodeRef}\n        type=\"text\"\n        tabIndex={-1}\n        onBlur={cap}\n        onFocus={cap}\n        onChange={cap}\n        className={className}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"sources":["HiddenInput.tsx"],"names":["React","EmotionConsumer","cap","e","stopPropagation","HiddenInput","render","props","nodeRef","emotion","className","css","Component"],"mappings":"oXAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,eAAT,QAAgC,2BAAhC;;;;;;AAMA,IAAMC,GAA4B,GAAG,SAA/BA,GAA+B,CAACC,CAAD,UAAOA,CAAC,CAACC,eAAF,EAAP,EAArC;;AAEA;AACA;AACA;AACA;AACA;AACA,WAAaC,WAAb;AACSC,EAAAA,MADT,GACE,kBAAgB;AACd,sBAA8B,KAAKC,KAAnC,CAAQC,OAAR,eAAQA,OAAR,CAAoBD,KAApB;AACA;AACE,0BAAC,eAAD;AACG,gBAACE,OAAD,EAAa;AACZ,YAAMC,SAAS,GAAGD,OAAO,CAACE,GAAX,kUAAf;;;;;;;;;;;AAWA;AACE;AACMJ,UAAAA,KADN;AAEE,YAAA,GAAG,EAAEC,OAFP;AAGE,YAAA,IAAI,EAAC,MAHP;AAIE,YAAA,QAAQ,EAAE,CAAC,CAJb;AAKE,YAAA,MAAM,EAAEN,GALV;AAME,YAAA,OAAO,EAAEA,GANX;AAOE,YAAA,QAAQ,EAAEA,GAPZ;AAQE,YAAA,SAAS,EAAEQ,SARb,IADF;;;AAYD,OAzBH,CADF;;;AA6BD,GAhCH,sBAAiCV,KAAK,CAACY,SAAvC","sourcesContent":["import React from 'react';\n\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n  nodeRef: (ref: HTMLInputElement | null) => void;\n}\n\nconst cap: React.ReactEventHandler = (e) => e.stopPropagation();\n\n/**\n * В **IE11** событие `onPaste` вызывается только у редактируемых элементов: `input`, `textarea`, `[contenteditable]`.\n * Для решения этой проблемы, перед \"вставкой\" фокусируемся на инпуте\n * после этого `onPaste` вызывается у инпута и всплывает.\n */\nexport class HiddenInput extends React.Component<Props> {\n  public render() {\n    const { nodeRef, ...props } = this.props;\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const className = emotion.css`\n            position: absolute;\n            width: 1px;\n            height: 0;\n            border: 0;\n            outline: 0;\n            margin: 0;\n            padding: 0;\n            overflow: hidden;\n            opacity: 0;\n          `;\n          return (\n            <input\n              {...props}\n              ref={nodeRef}\n              type=\"text\"\n              tabIndex={-1}\n              onBlur={cap}\n              onFocus={cap}\n              onChange={cap}\n              className={className}\n            />\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n}\n"]}

package/internal/InputLikeText/InputLikeText/InputLikeText.js

@@ -16,11 +16,10 @@ import { isFunction, isNonNullable } from "../../../lib/utils";
 import { isKeyTab, isShortcutPaste } from "../../../lib/events/keyboard/identifiers";
 import { MouseDrag } from "../../../lib/events/MouseDrag";
 import { isEdge, isIE11, isMobile } from "../../../lib/client";
-import { removeAllSelections, selectNodeContents } from "../../../components/DateInput/helpers/SelectionHelpers";
-import { styles as jsInputStyles } from "../../../components/Input/Input.styles";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { removeAllSelections, selectNodeContents } from "../../../lib/dom/selectionHelpers";
+import { getStyles as getJsInputStyles } from "../../../components/Input/Input.styles";
 import { CommonWrapper } from "../../CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { findRenderContainer } from "../../../lib/listenFocusOutside";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
@@ -28,8 +27,10 @@ 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 { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { HiddenInput } from "../HiddenInput";
-import { styles } from "../InputLikeText.styles";
+import { getStyles } from "../InputLikeText.styles";
 export var InputLikeTextDataTids = {
   root: 'InputLikeText__root',
   input: 'InputLikeText__input',
@@ -93,7 +94,7 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
     };
 
     _this.renderMain = function (props) {
-      var _cx, _cx2, _cx3;
+      var _this$emotion$cx, _this$emotion$cx2, _this$emotion$cx3;
 
       var innerRef = props.innerRef,
           tabIndex = props.tabIndex,
@@ -130,15 +131,23 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         text: suffix,
         side: "right"
       }) : _this.renderRightSide();
-      var className = cx(styles.root(), jsInputStyles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[jsInputStyles.disabled(_this.theme)] = !!disabled, _cx[jsInputStyles.borderless()] = !!borderless, _cx[jsInputStyles.focus(_this.theme)] = focused, _cx[jsInputStyles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[jsInputStyles.blink(_this.theme)] = blinking, _cx[jsInputStyles.warning(_this.theme)] = !!warning, _cx[jsInputStyles.error(_this.theme)] = !!error, _cx[jsInputStyles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[jsInputStyles.warningFallback(_this.theme)] = !!warning && (isIE11 || isEdge), _cx[jsInputStyles.errorFallback(_this.theme)] = !!error && (isIE11 || isEdge), _cx[jsInputStyles.hideBlinkingCursor()] = isMobile, _cx));
-      var wrapperClass = cx(jsInputStyles.wrapper(), (_cx2 = {}, _cx2[styles.userSelectContain()] = focused, _cx2));
+      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("span", _extends({
+      return /*#__PURE__*/React.createElement(FocusControlWrapper, {
+        disabled: disabled,
+        onBlurWhenDisabled: _this.resetFocus
+      }, /*#__PURE__*/React.createElement("span", _extends({
         "data-tid": InputLikeTextDataTids.root
       }, rest, {
         className: className,
@@ -164,10 +173,10 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         className: wrapperClass
       }, /*#__PURE__*/React.createElement("span", {
         "data-tid": InputLikeTextDataTids.input,
-        className: cx(jsInputStyles.input(_this.theme), (_cx3 = {}, _cx3[styles.absolute()] = !takeContentWidth, _cx3[jsInputStyles.inputFocus(_this.theme)] = focused, _cx3[jsInputStyles.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), _this.renderPlaceholder()), rightSide, isIE11 && focused && /*#__PURE__*/React.createElement(HiddenInput, {
         nodeRef: _this.hiddenInputRef
-      })));
+      }))));
     };
 
     _this.renderLeftIcon = function () {
@@ -179,7 +188,7 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
     };
 
     _this.renderIcon = function (icon, className) {
-      var _cx4;
+      var _this$emotion$cx4;
 
       if (!icon) {
         return null;
@@ -187,13 +196,14 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
 
       var disabled = _this.props.disabled;
       var iconNode = isFunction(icon) ? icon() : icon;
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(jsInputStyles.icon(), className, jsInputStyles.useDefaultColor(_this.theme), (_cx4 = {}, _cx4[jsInputStyles.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);
     };
 
     _this.renderPrefix = function () {
-      var _cx5;
+      var _this$emotion$cx5;
 
       var _this$props = _this.props,
           prefix = _this$props.prefix,
@@ -203,13 +213,14 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(jsInputStyles.prefix(_this.theme), (_cx5 = {}, _cx5[jsInputStyles.prefixDisabled(_this.theme)] = disabled, _cx5))
+        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;
+      var _this$emotion$cx6;
 
       var _this$props2 = _this.props,
           suffix = _this$props2.suffix,
@@ -219,8 +230,9 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(jsInputStyles.suffix(_this.theme), (_cx6 = {}, _cx6[jsInputStyles.suffixDisabled(_this.theme)] = disabled, _cx6))
+        className: _this.emotion.cx(jsInputStyles.suffix(_this.theme), (_this$emotion$cx6 = {}, _this$emotion$cx6[jsInputStyles.suffixDisabled(_this.theme)] = disabled, _this$emotion$cx6))
       }, suffix);
     };
 
@@ -233,6 +245,7 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
         className: jsInputStyles.sideContainer()
       }, leftIcon, prefix);
@@ -247,8 +260,9 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         return null;
       }
 
+      var jsInputStyles = getJsInputStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(jsInputStyles.sideContainer(), jsInputStyles.rightContainer())
+        className: _this.emotion.cx(jsInputStyles.sideContainer(), jsInputStyles.rightContainer())
       }, rightIcon, suffix);
     };
 
@@ -261,10 +275,11 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
       var hasValue = isNonNullable(children) && children !== '';
 
       if (!hasValue && placeholder) {
-        var _cx7;
+        var _this$emotion$cx7;
 
+        var jsInputStyles = getJsInputStyles(_this.emotion);
         return /*#__PURE__*/React.createElement("span", {
-          className: cx(jsInputStyles.placeholder(_this.theme), (_cx7 = {}, _cx7[jsInputStyles.placeholderDisabled(_this.theme)] = disabled, _cx7[jsInputStyles.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);
       }
 
@@ -318,6 +333,7 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
       var _globalObject$documen;
 
       _this.dragging = true;
+      var styles = getStyles(_this.emotion);
       (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.documentElement.classList.add(styles.userSelectNone());
 
       if (_this.props.onMouseDragStart) {
@@ -336,12 +352,15 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
           _this.props.onMouseDragEnd(e);
         }
       }, 0);
+      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) {
-        e.target.setAttribute('contenteditable', 'true');
+        var _this$node;
+
+        (_this$node = _this.node) == null ? void 0 : _this$node.setAttribute('contenteditable', 'true');
       }
 
       if (_this.props.disabled) {
@@ -379,11 +398,33 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
       }
     };
 
+    _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) {
-        e.target.removeAttribute('contenteditable');
+        var _this$node3;
+
+        (_this$node3 = _this.node) == null ? void 0 : _this$node3.removeAttribute('contenteditable');
       }
 
       if (_this.props.disabled) {
@@ -406,9 +447,7 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
         focused: false
       });
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
-      }
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
     };
 
     _this.hiddenInputRef = function (el) {
@@ -429,18 +468,20 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
     };
 
     _this.getSizeClassName = function () {
-      var _cx8, _cx9, _cx10;
+      var _this$emotion$cx8, _this$emotion$cx9, _this$emotion$cx10;
+
+      var jsInputStyles = getJsInputStyles(_this.emotion);
 
       switch (_this.getProps().size) {
         case 'large':
-          return cx((_cx8 = {}, _cx8[jsInputStyles.sizeLarge(_this.theme)] = true, _cx8[jsInputStyles.sizeLargeFallback(_this.theme)] = isIE11 || isEdge, _cx8));
+          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 cx((_cx9 = {}, _cx9[jsInputStyles.sizeMedium(_this.theme)] = true, _cx9[jsInputStyles.sizeMediumFallback(_this.theme)] = isIE11 || isEdge, _cx9));
+          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 cx((_cx10 = {}, _cx10[jsInputStyles.sizeSmall(_this.theme)] = true, _cx10[jsInputStyles.sizeSmallFallback(_this.theme)] = isIE11 || isEdge, _cx10));
+          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));
       }
     };
 
@@ -521,11 +562,14 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
   _proto.render = function render() {
     var _this4 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this4.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this4.setRootNode
-      }, _this4.props), _this4.renderMain);
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this4.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this4.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this4.setRootNode
+        }, _this4.props), _this4.renderMain);
+      });
     });
   };
 
@@ -534,6 +578,8 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
       right = false;
     }
 
+    var jsInputStyles = getJsInputStyles(this.emotion);
+
     switch (this.getProps().size) {
       case 'large':
         return right ? jsInputStyles.rightIconLarge(this.theme) : jsInputStyles.leftIconLarge(this.theme);
@@ -548,6 +594,6 @@ export var InputLikeText = rootNode(_class = (_temp = _class2 = /*#__PURE__*/fun
   };
 
   return InputLikeText;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'InputLikeText', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'InputLikeText', _class2.displayName = 'InputLikeText', _class2.defaultProps = {
   size: 'small'
 }, _temp)) || _class;