@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js

@@ -2,7 +2,7 @@
 var _globalObject = require("@skbkontur/global-object");
 
 var _getScrollWidth = require("../../lib/dom/getScrollWidth");
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+var _Emotion = require("../../lib/theming/Emotion");var _HideBodyVerticalScroll, _templateObject;
 
 var disposeDocumentStyle = null;var
 
@@ -45,34 +45,34 @@ HideBodyVerticalScroll = exports.HideBodyVerticalScroll = /*#__PURE__*/function
 
 
 
-    updateScrollVisibility = function () {
-      var shouldHide = !disposeDocumentStyle;
-      if (shouldHide) {
-        _this.hideScroll();
-      }
-    };_this.
 
-    hideScroll = function () {
-      if (!(0, _globalObject.isBrowser)(_globalObject.globalObject)) {
-        return;
-      }
-      var documentElement = _globalObject.globalObject.document.documentElement;
-      var clientHeight = documentElement.clientHeight,scrollHeight = documentElement.scrollHeight;
-      var documentComputedStyle = _globalObject.globalObject.getComputedStyle(documentElement);
-      var scrollbarConst = _globalObject.globalObject.getComputedStyle(documentElement).overflowY === 'scroll';
-      var scrollWidth = clientHeight < scrollHeight || scrollbarConst ? (0, _getScrollWidth.getScrollWidth)() : 0;
-      var documentMargin = parseFloat(documentComputedStyle.marginRight || '');
-      var className = generateDocumentStyle(documentMargin + scrollWidth);
-
-      disposeDocumentStyle = _this.attachStyle(documentElement, className);
-    };_this.
-
-    attachStyle = function (element, className) {
-      element.classList.add(className);
-      return function () {
-        element.classList.remove(className);
-      };
-    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
     restoreStyles = function () {
       if (disposeDocumentStyle) {
@@ -83,7 +83,7 @@ HideBodyVerticalScroll = exports.HideBodyVerticalScroll = /*#__PURE__*/function
           _globalObject.globalObject.document.documentElement.scrollTop = _this.initialScroll;
         }
       }
-    };return _this;}(0, _inheritsLoose2.default)(HideBodyVerticalScroll, _React$Component);var _proto = HideBodyVerticalScroll.prototype;_proto.componentDidMount = function componentDidMount() {var counter = VerticalScrollCounter.increment();if (counter === 1) {var _globalObject$documen;this.master = true;this.initialScroll = (_globalObject$documen = _globalObject.globalObject.document) != null && _globalObject$documen.documentElement ? _globalObject.globalObject.document.documentElement.scrollTop : 0;this.updateScrollVisibility();_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('resize', this.updateScrollVisibility);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.master) {this.updateScrollVisibility();}};_proto.componentWillUnmount = function componentWillUnmount() {var counter = VerticalScrollCounter.decrement();if (counter === 0) {this.restoreStyles();_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('resize', this.updateScrollVisibility);}};_proto.render = function render() {return null;};return HideBodyVerticalScroll;}(_react.default.Component);HideBodyVerticalScroll.__KONTUR_REACT_UI__ = 'HideBodyVerticalScroll';HideBodyVerticalScroll.displayName = 'HideBodyVerticalScroll';var
+    };return _this;}(0, _inheritsLoose2.default)(HideBodyVerticalScroll, _React$Component);var _proto = HideBodyVerticalScroll.prototype;_proto.componentDidMount = function componentDidMount() {var counter = VerticalScrollCounter.increment();if (counter === 1) {var _globalObject$documen;this.master = true;this.initialScroll = (_globalObject$documen = _globalObject.globalObject.document) != null && _globalObject$documen.documentElement ? _globalObject.globalObject.document.documentElement.scrollTop : 0;HideBodyVerticalScroll.updateScrollVisibility();_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('resize', HideBodyVerticalScroll.updateScrollVisibility);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.master) {HideBodyVerticalScroll.updateScrollVisibility();}};_proto.componentWillUnmount = function componentWillUnmount() {var counter = VerticalScrollCounter.decrement();if (counter === 0) {this.restoreStyles();_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('resize', HideBodyVerticalScroll.updateScrollVisibility);}};_proto.render = function render() {return null;};return HideBodyVerticalScroll;}(_react.default.Component);_HideBodyVerticalScroll = HideBodyVerticalScroll;HideBodyVerticalScroll.__KONTUR_REACT_UI__ = 'HideBodyVerticalScroll';HideBodyVerticalScroll.displayName = 'HideBodyVerticalScroll';HideBodyVerticalScroll.updateScrollVisibility = function () {var shouldHide = !disposeDocumentStyle;if (shouldHide) {_HideBodyVerticalScroll.hideScroll();}};HideBodyVerticalScroll.hideScroll = function () {if (!(0, _globalObject.isBrowser)(_globalObject.globalObject)) {return;}var documentElement = _globalObject.globalObject.document.documentElement;var clientHeight = documentElement.clientHeight,scrollHeight = documentElement.scrollHeight;var documentComputedStyle = _globalObject.globalObject.getComputedStyle(documentElement);var scrollbarConst = _globalObject.globalObject.getComputedStyle(documentElement).overflowY === 'scroll';var scrollWidth = clientHeight < scrollHeight || scrollbarConst ? (0, _getScrollWidth.getScrollWidth)() : 0;var documentMargin = parseFloat(documentComputedStyle.marginRight || '');var className = generateDocumentStyle(documentMargin + scrollWidth);disposeDocumentStyle = _HideBodyVerticalScroll.attachStyle(documentElement, className);};HideBodyVerticalScroll.attachStyle = function (element, className) {element.classList.add(className);return function () {element.classList.remove(className);};};var
 
 
 VerticalScrollCounter = function VerticalScrollCounter() {};VerticalScrollCounter.

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_getScrollWidth","_Emotion","_templateObject","disposeDocumentStyle","HideBodyVerticalScroll","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","initialScroll","master","updateScrollVisibility","shouldHide","hideScroll","isBrowser","globalObject","documentElement","document","clientHeight","scrollHeight","documentComputedStyle","getComputedStyle","scrollbarConst","overflowY","scrollWidth","getScrollWidth","documentMargin","parseFloat","marginRight","className","generateDocumentStyle","attachStyle","element","classList","add","remove","restoreStyles","scrollTop","_inheritsLoose2","default","_proto","prototype","componentDidMount","counter","VerticalScrollCounter","increment","_globalObject$documen","addEventListener","componentDidUpdate","componentWillUnmount","decrement","removeEventListener","render","React","Component","__KONTUR_REACT_UI__","displayName","globalWithRetailUIVerticalScrollCounter","RetailUIVerticalScrollCounter","get","css","_taggedTemplateLiteralLoose2"],"sources":["HideBodyVerticalScroll.tsx"],"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\ninterface GlobalWithRetailUIVerticalScrollCounter {\n  RetailUIVerticalScrollCounter?: number;\n}\n\nexport class HideBodyVerticalScroll extends React.Component {\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 = 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 globalWithRetailUIVerticalScrollCounter = globalObject as GlobalWithRetailUIVerticalScrollCounter;\n    const counter = globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter || 0;\n    return (globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter = counter + 1);\n  };\n\n  public static decrement = (): number => {\n    const globalWithRetailUIVerticalScrollCounter = globalObject as GlobalWithRetailUIVerticalScrollCounter;\n    const counter = globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter || 0;\n    return (globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter = counter - 1);\n  };\n\n  public static get = (): number => {\n    const globalWithRetailUIVerticalScrollCounter = globalObject as GlobalWithRetailUIVerticalScrollCounter;\n    return globalWithRetailUIVerticalScrollCounter.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_getScrollWidth","_Emotion","_HideBodyVerticalScroll","_templateObject","disposeDocumentStyle","HideBodyVerticalScroll","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","initialScroll","master","restoreStyles","globalObject","document","documentElement","scrollTop","_inheritsLoose2","default","_proto","prototype","componentDidMount","counter","VerticalScrollCounter","increment","_globalObject$documen","updateScrollVisibility","addEventListener","componentDidUpdate","componentWillUnmount","decrement","removeEventListener","render","React","Component","__KONTUR_REACT_UI__","displayName","shouldHide","hideScroll","isBrowser","clientHeight","scrollHeight","documentComputedStyle","getComputedStyle","scrollbarConst","overflowY","scrollWidth","getScrollWidth","documentMargin","parseFloat","marginRight","className","generateDocumentStyle","attachStyle","element","classList","add","remove","globalWithRetailUIVerticalScrollCounter","RetailUIVerticalScrollCounter","get","css","_taggedTemplateLiteralLoose2"],"sources":["HideBodyVerticalScroll.tsx"],"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\ninterface GlobalWithRetailUIVerticalScrollCounter {\n  RetailUIVerticalScrollCounter?: number;\n}\n\nexport class HideBodyVerticalScroll extends React.Component {\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      HideBodyVerticalScroll.updateScrollVisibility();\n      globalObject.addEventListener?.('resize', HideBodyVerticalScroll.updateScrollVisibility);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.master) {\n      HideBodyVerticalScroll.updateScrollVisibility();\n    }\n  }\n\n  public componentWillUnmount() {\n    const counter = VerticalScrollCounter.decrement();\n    if (counter === 0) {\n      this.restoreStyles();\n      globalObject.removeEventListener?.('resize', HideBodyVerticalScroll.updateScrollVisibility);\n    }\n  }\n\n  public render() {\n    return null;\n  }\n\n  public static updateScrollVisibility = () => {\n    const shouldHide = !disposeDocumentStyle;\n    if (shouldHide) {\n      HideBodyVerticalScroll.hideScroll();\n    }\n  };\n\n  public static 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 = HideBodyVerticalScroll.attachStyle(documentElement, className);\n  };\n\n  public static 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 globalWithRetailUIVerticalScrollCounter = globalObject as GlobalWithRetailUIVerticalScrollCounter;\n    const counter = globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter || 0;\n    return (globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter = counter + 1);\n  };\n\n  public static decrement = (): number => {\n    const globalWithRetailUIVerticalScrollCounter = globalObject as GlobalWithRetailUIVerticalScrollCounter;\n    const counter = globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter || 0;\n    return (globalWithRetailUIVerticalScrollCounter.RetailUIVerticalScrollCounter = counter - 1);\n  };\n\n  public static get = (): number => {\n    const globalWithRetailUIVerticalScrollCounter = globalObject as GlobalWithRetailUIVerticalScrollCounter;\n    return globalWithRetailUIVerticalScrollCounter.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"],"mappings":"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","ignoreList":[]}

package/cjs/internal/HideBodyVerticalScroll/__creevey__/HideBodyVerticalScroll.creevey.mts

@@ -0,0 +1,83 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const testScrollLockUnlock = () => {
+  test('scroll, lock, unlock', async (context) => {
+    const toggle = async () => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="toggle-lock"]' }))
+        .perform();
+      await delay(1000);
+    };
+    await context.webdriver.executeScript(function () {
+      const scrollContainer = window.document.documentElement;
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    });
+    const scrolled = await context.webdriver.takeScreenshot();
+    await toggle();
+    const locked = await context.webdriver.takeScreenshot();
+    await toggle();
+    const unlocked = await context.webdriver.takeScreenshot();
+    await context.matchImages({ scrolled, locked, unlocked });
+  });
+};
+
+kind('HideBodyVerticalScroll', () => {
+  story('Sample', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    testScrollLockUnlock();
+  });
+
+  story('WithScrollableContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    testScrollLockUnlock();
+  });
+
+  story('WithHTMLOverflowYScroll', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    testScrollLockUnlock();
+  });
+
+  story('Multiple_WithScrollableContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    testScrollLockUnlock();
+  });
+
+  story('DisorderlyUnmountAndResize', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    test('idle, hide, show, resize', async (context) => {
+      const toggle = async (index: number) => {
+        await context.webdriver.findElement({ css: `div:nth-of-type(${index}) [data-tid~="toggle-lock"]` }).click();
+      };
+
+      const idle = await context.webdriver.takeScreenshot();
+
+      await toggle(1);
+      await toggle(2);
+      const hide = await context.webdriver.takeScreenshot();
+
+      await toggle(1);
+      await toggle(2);
+      const show = await context.webdriver.takeScreenshot();
+
+      await context.webdriver.findElement({ css: '[data-tid="resize"]' }).click();
+      const resize = await context.webdriver.takeScreenshot();
+
+      await context.matchImages({ idle, hide, show, resize });
+    });
+  });
+});

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

@@ -10,22 +10,25 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
     onMouseDragStart?: MouseDragEventHandler;
     onMouseDragEnd?: MouseDragEventHandler;
     takeContentWidth?: boolean;
+    onClearCrossClick?: () => void;
 }
-export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
+export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder' | 'hovered'>;
 export declare const InputLikeTextDataTids: {
     readonly root: "InputLikeText__root";
     readonly input: "InputLikeText__input";
     readonly nativeInput: "InputLikeText__nativeInput";
 };
-type DefaultProps = Required<Pick<InputLikeTextProps, 'size'>>;
+type DefaultProps = Required<Pick<InputLikeTextProps, 'size' | 'showClearIcon'>>;
 export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
+    private getClearCrossShowed;
     state: {
         blinking: boolean;
         focused: boolean;
+        clearCrossShowed: boolean;
     };
     private theme;
     private node;
@@ -66,6 +69,8 @@ export declare class InputLikeText extends React.Component<InputLikeTextProps, I
     private handleFocus;
     private resetFocus;
     private handleBlur;
+    private handleHover;
+    private handleUnhover;
     private hiddenInputRef;
     private innerRef;
     private defrost;

package/cjs/internal/InputLikeText/InputLikeText.js

@@ -8,8 +8,8 @@ var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _MouseDrag = require("../../lib/events/MouseDrag");
 var _client = require("../../lib/client");
 var _selectionHelpers = require("../../lib/dom/selectionHelpers");
-
-var _Input = require("../../components/Input/Input.styles");
+var _Input = require("../../components/Input");
+var _Input2 = require("../../components/Input/Input.styles");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../CommonWrapper");
@@ -21,9 +21,11 @@ var _InputLayoutAside = require("../../components/Input/InputLayout/InputLayoutA
 var _InputLayoutContext = require("../../components/Input/InputLayout/InputLayoutContext");
 var _isInstanceOf = require("../../lib/isInstanceOf");
 var _FocusControlWrapper = require("../FocusControlWrapper");
+var _ClearCrossIcon = require("../ClearCrossIcon/ClearCrossIcon");
 
 var _HiddenInput = require("./HiddenInput");
-var _InputLikeText2 = 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, _InputLikeText;
+var _InputLikeText2 = 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", "aria-label", "aria-labelledby", "showClearIcon", "onClearCrossClick"];var _class, _InputLikeText;
+
 
 
 
@@ -52,9 +54,30 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
 
 
 
+
+
+
     getProps = (0, _createPropsGetter.createPropsGetter)(InputLikeText.defaultProps);_this.
 
-    state = { blinking: false, focused: false };_this.
+    getClearCrossShowed = function (_ref) {var focused = _ref.focused,hovered = _ref.hovered;
+      if (_this.props.disabled) {
+        return false;
+      }
+      return (0, _Input.calculateClearCrossShowedState)({
+        showClearIcon: _this.getProps().showClearIcon,
+        notEmptyValue: Boolean(_this.props.children),
+        focused: focused,
+        hovered: hovered
+      });
+    };_this.
+
+    state = {
+      blinking: false,
+      focused: false,
+      clearCrossShowed: _this.getClearCrossShowed({
+        focused: false
+      })
+    };_this.
 
 
     node = null;_this.
@@ -179,28 +202,43 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
 
 
 
-        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;
 
+
+
+        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'],ariaLabel = props['aria-label'],ariaLabelledby = props['aria-labelledby'],showClearIcon = props.showClearIcon,onClearCrossClick = props.onClearCrossClick,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+      var _this$state = _this.state,focused = _this$state.focused,blinking = _this$state.blinking;
+      var getRightIcon = function getRightIcon() {
+        return _this.state.clearCrossShowed ? /*#__PURE__*/
+        _react.default.createElement(_ClearCrossIcon.ClearCrossIcon, {
+          "data-tid": _Input.InputDataTids.clearCross,
+          size: size,
+          onFocus: function onFocus(event) {return event.stopPropagation();},
+          onClick: onClearCrossClick }
+        ) :
+
+        rightIcon;
+
+      };
       var leftSide = /*#__PURE__*/_react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: leftIcon, text: prefix, side: "left" });
-      var rightSide = /*#__PURE__*/_react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: rightIcon, text: suffix, side: "right" });
-
-      var className = (0, _Emotion.cx)(_InputLikeText2.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.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _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 rightSide = /*#__PURE__*/_react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: getRightIcon(), text: suffix, side: "right" });
+
+      var className = (0, _Emotion.cx)(_InputLikeText2.styles.root(), _Input2.styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[
+      _Input2.styles.disabled(_this.theme)] = !!disabled, _cx[
+      _Input2.styles.borderless()] = !!borderless, _cx[
+      _Input2.styles.focus(_this.theme)] = focused, _cx[
+      _Input2.styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[
+      _Input2.styles.blink(_this.theme)] = blinking, _cx[
+      _Input2.styles.warning(_this.theme)] = !!warning, _cx[
+      _Input2.styles.error(_this.theme)] = !!error, _cx[
+      _Input2.styles.focusFallback(_this.theme)] = focused && (_client.isIE11 || _client.isEdge), _cx[
+      _Input2.styles.warningFallback(_this.theme)] = !!warning && (_client.isIE11 || _client.isEdge), _cx[
+      _Input2.styles.errorFallback(_this.theme)] = !!error && (_client.isIE11 || _client.isEdge), _cx[
+      _Input2.styles.hideBlinkingCursor()] = _client.isMobile, _cx)
       );
 
-      var wrapperClass = (0, _Emotion.cx)(_Input.styles.wrapper(), (_cx2 = {}, _cx2[
+      var wrapperClass = (0, _Emotion.cx)(_Input2.styles.wrapper(), (_cx2 = {}, _cx2[
       _InputLikeText2.styles.userSelectContain()] = focused, _cx2)
       );
 
@@ -214,29 +252,30 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
         rest, {
           className: className,
           style: { width: width, textAlign: align },
-          tabIndex: disabled ? undefined : 0,
+          tabIndex: disabled ? -1 : 0,
           onFocus: _this.handleFocus,
+          onMouseEnter: _this.handleHover,
+          onMouseLeave: _this.handleUnhover,
           onBlur: _this.handleBlur,
           ref: _this.innerRef,
           onKeyDown: _this.handleKeyDown,
-          onMouseDown: _this.handleMouseDown }), /*#__PURE__*/
+          onMouseDown: _this.handleMouseDown,
+          role: "textbox",
+          "aria-disabled": disabled,
+          "aria-describedby": ariaDescribedby,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby }), /*#__PURE__*/
 
         _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 }
-        ),
+        _react.default.createElement("input", { type: "hidden", "data-tid": InputLikeTextDataTids.nativeInput, value: value, disabled: disabled }),
         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[
+          className: (0, _Emotion.cx)(_Input2.styles.input(_this.theme), (_cx3 = {}, _cx3[
           _InputLikeText2.styles.absolute()] = !takeContentWidth, _cx3[
-          _Input.styles.inputFocus(_this.theme)] = focused, _cx3[
-          _Input.styles.inputDisabled(_this.theme)] = disabled, _cx3)
+          _Input2.styles.inputFocus(_this.theme)] = focused, _cx3[
+          _Input2.styles.inputDisabled(_this.theme)] = disabled, _cx3)
           ) },
 
         _this.props.children
@@ -259,9 +298,9 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
       if (!hasValue && placeholder) {var _cx4;
         return /*#__PURE__*/(
           _react.default.createElement("span", {
-            className: (0, _Emotion.cx)(_Input.styles.placeholder(_this.theme), (_cx4 = {}, _cx4[
-            _Input.styles.placeholderDisabled(_this.theme)] = disabled, _cx4[
-            _Input.styles.placeholderFocus(_this.theme)] = focused, _cx4)
+            className: (0, _Emotion.cx)(_Input2.styles.placeholder(_this.theme), (_cx4 = {}, _cx4[
+            _Input2.styles.placeholderDisabled(_this.theme)] = disabled, _cx4[
+            _Input2.styles.placeholderFocus(_this.theme)] = focused, _cx4)
             ) },
 
           placeholder
@@ -402,6 +441,14 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
       _this.props.onBlur == null || _this.props.onBlur(e);
     };_this.
 
+    handleHover = function () {
+      _this.setState({ clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: true }) });
+    };_this.
+
+    handleUnhover = function () {
+      _this.setState({ clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: false }) });
+    };_this.
+
     hiddenInputRef = function (el) {
       _this.hiddenInput = el;
     };_this.
@@ -422,19 +469,19 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
       switch (_this.getProps().size) {
         case 'large':
           return (0, _Emotion.cx)((_cx5 = {}, _cx5[
-          _Input.styles.sizeLarge(_this.theme)] = true, _cx5[
-          _Input.styles.sizeLargeFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx5)
+          _Input2.styles.sizeLarge(_this.theme)] = true, _cx5[
+          _Input2.styles.sizeLargeFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx5)
           );
         case 'medium':
           return (0, _Emotion.cx)((_cx6 = {}, _cx6[
-          _Input.styles.sizeMedium(_this.theme)] = true, _cx6[
-          _Input.styles.sizeMediumFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx6)
+          _Input2.styles.sizeMedium(_this.theme)] = true, _cx6[
+          _Input2.styles.sizeMediumFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx6)
           );
         case 'small':
         default:
           return (0, _Emotion.cx)((_cx7 = {}, _cx7[
-          _Input.styles.sizeSmall(_this.theme)] = true, _cx7[
-          _Input.styles.sizeSmallFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx7)
+          _Input2.styles.sizeSmall(_this.theme)] = true, _cx7[
+          _Input2.styles.sizeSmallFallback(_this.theme)] = _client.isIE11 || _client.isEdge, _cx7)
           );
       }
     };return _this;}(0, _inheritsLoose2.default)(InputLikeText, _React$Component);var _proto = InputLikeText.prototype; /**
@@ -443,4 +490,4 @@ InputLikeText = exports.InputLikeText = (0, _rootNode.rootNode)(_class = (_Input
    * @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 = _globalObject.globalObject.setTimeout(function () {return _this3.setState({ blinking: false });}, 150);});};_proto.getNode = function getNode() {return this.node;};_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 || _globalObject$documen3.addEventListener('mousedown', this.handleDocumentMouseDown);(_globalObject$documen4 = _globalObject.globalObject.document) == null || _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 || _globalObject$documen5.removeEventListener('mousedown', this.handleDocumentMouseDown);(_globalObject$documen6 = _globalObject.globalObject.document) == null || _globalObject$documen6.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.getProps()), _this4.renderMain);});};return InputLikeText;}(_react.default.Component), _InputLikeText.__KONTUR_REACT_UI__ = 'InputLikeText', _InputLikeText.displayName = 'InputLikeText', _InputLikeText.defaultProps = { size: 'small' }, _InputLikeText)) || _class;
+   */;_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;};_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 || _globalObject$documen3.addEventListener('mousedown', this.handleDocumentMouseDown);(_globalObject$documen4 = _globalObject.globalObject.document) == null || _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 || _globalObject$documen5.removeEventListener('mousedown', this.handleDocumentMouseDown);(_globalObject$documen6 = _globalObject.globalObject.document) == null || _globalObject$documen6.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.getProps()), _this4.renderMain);});};return InputLikeText;}(_react.default.Component), _InputLikeText.__KONTUR_REACT_UI__ = 'InputLikeText', _InputLikeText.displayName = 'InputLikeText', _InputLikeText.defaultProps = { size: 'small', showClearIcon: 'never' }, _InputLikeText)) || _class;