npm - @skbkontur/react-ui - Versions diffs - 5.1.0-next.1 → 5.1.0 - Mend

@skbkontur/react-ui 5.1.0-next.1 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1671) hide show

package/cjs/components/Input/Input.d.ts CHANGED Viewed

@@ -1,164 +1,185 @@
-import React, { AriaAttributes, HTMLAttributes, ReactElement } from 'react';
-import { Nullable, Override } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SizeProp } from '../../lib/types/props';
-import { InputElementProps } from './Input.typings';
-export declare const inputTypes: readonly ["password", "text", "number", "tel", "search", "time", "date", "url", "email"];
-export type InputAlign = 'left' | 'center' | 'right';
-export type InputType = (typeof inputTypes)[number];
-export type InputIconType = React.ReactNode | (() => React.ReactNode);
-export declare const selectionAllowedTypes: InputType[];
-export declare const selectionErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
-export declare const maskForbiddenTypes: InputType[];
-export declare const maskAllowedTypes: InputType[];
-export declare const maskErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
-export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
-    /** Задает иконку слева.
-     * При использовании `ReactNode` применяются дефолтные стили для иконки.
-     * При использовании `() => ReactNode` применяются только стили для позиционирования. */
-    leftIcon?: InputIconType;
-    /** Добавляет иконку справа.
-     * При использовании `ReactNode` применяются дефолтные стили для иконки.
-     * При использовании `() => ReactNode` применяются только стили для позиционирования. */
-    rightIcon?: InputIconType;
-    /** Переводит контрол в состояние валидации "ошибка". */
-    error?: boolean;
-    /** Переводит контрол в состояние валидации "предупреждение". */
-    warning?: boolean;
-    /** Убирает обводку. */
-    borderless?: boolean;
-    /** Задает выравнивание контента. */
-    align?: InputAlign;
-    /** Задает паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url`
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
-    mask?: Nullable<string>;
-    /** Устанавливает символ маски.
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
-    maskChar?: Nullable<string>;
-    /** Задает словарь символов-регулярок для задания маски
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput.
-     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }. */
-    formatChars?: Record<string, string>;
-    /** Включает показ символов маски.
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
-    alwaysShowMask?: boolean;
-    /** Задает размер. */
-    size?: SizeProp;
-    /** Задает функцию, которая вызывается при изменении значения в инпуте. */
-    onValueChange?: (value: string) => void;
-    /** @ignore */
-    onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
-    /** @ignore */
-    onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
-    /** @ignore */
-    onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Задает тип инпута. */
-    type?: InputType;
-    /** Задает значение. */
-    value?: string;
-    capture?: boolean;
-    /** Устанавливает префикс `ReactNode` перед значением, но после иконки. */
-    prefix?: React.ReactNode;
-    /** Устанавливает суффикс `ReactNode` после значения, но перед правой иконкой. */
-    suffix?: React.ReactNode;
-    /** Определяет, нужно ли выделять введенное значение при фокусе. Работает с типами `text`, `password`, `tel`, `search`, `url`. [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) */
-    selectAllOnFocus?: boolean;
-    /** Задает функцию для обработки ввода.
-     * При неправильном вводе инпут по-умолчанию вспыхивает акцентным цветом.
-     * Если `onUnexpectedInput` передан - вызывается переданный обработчик b вспыхивание можно вызвать публичным методом инстанса `blink()`.
-     * @param {string} value - значение инпута. */
-    onUnexpectedInput?: (value: string) => void;
-    /** Устанавливает радиус скруглений углов.
-     * @ignore */
-    corners?: Partial<Pick<React.CSSProperties, 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'>>;
-    /** Устанавливает элемент, заменяющий нативный input. Должен иметь пропы `InputElementProps` и тип `InputElement`. */
-    element?: ReactElement<InputElementProps>;
-}> {
-}
-export interface InputState {
-    blinking: boolean;
-    focused: boolean;
-    needsPolyfillPlaceholder: boolean;
-}
-export declare const InputDataTids: {
-    readonly root: "Input__root";
-};
-type DefaultProps = Required<Pick<InputProps, 'size' | 'type'>>;
-/**
- * Поле ввода `Input` дает возможность указать значение с помощью клавиатуры.
- *
- * Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.
- *
- *  Если вводимое значение имеет определенный формат, используйте специальную версию поля:
- * * Поле с паролем PasswordInput.
- * * Поле с валютой CurrencyInput.
- * * Поле с маской MaskedInput.
- * * Автополе FxInput.
- *
- * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
- */
-export declare class Input extends React.Component<InputProps, InputState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    state: InputState;
-    private selectAllId;
-    private theme;
-    private blinkTimeout;
-    input: HTMLInputElement | null;
-    private setRootNode;
-    private outputMaskError;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<InputProps>): void;
-    componentWillUnmount(): void;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    /**
-     * @public
-     */
-    getNode(): HTMLInputElement | null;
-    /**
-     * @public
-     */
-    blink(): void;
-    /**
-     * @public
-     * @param {number} start
-     * @param {number} end
-     */
-    setSelectionRange(start: number, end: number): void;
-    get isMaskVisible(): boolean;
-    render(): JSX.Element;
-    private get canBeUsedWithMask();
-    /**
-     * Работает с типами `text`, `password`, `tel`, `search`, `url`
-     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
-     * @public
-     */
-    selectAll: () => void;
-    delaySelectAll: () => number | null;
-    private _selectAll;
-    private cancelDelayedSelectAll;
-    private cancelBlink;
-    private getInput;
-    private renderMain;
-    private renderMaskedInput;
-    private getSizeClassName;
-    private refInput;
-    private handleChange;
-    private handleFocus;
-    private handleKeyDown;
-    private handleKeyPress;
-    private handleMaskedValueChange;
-    private handleUnexpectedInput;
-    private resetFocus;
-    private handleBlur;
-}
-export {};
+import React, { AriaAttributes, HTMLAttributes, ReactElement } from 'react';
+import { Nullable, Override } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+import { InputElementProps } from './Input.typings';
+export declare const inputTypes: readonly ["password", "text", "number", "tel", "search", "time", "date", "url", "email"];
+export type InputAlign = 'left' | 'center' | 'right';
+export type ShowClearIcon = 'auto' | 'always' | 'never';
+export type InputType = (typeof inputTypes)[number];
+export type InputIconType = React.ReactNode | (() => React.ReactNode);
+export declare const selectionAllowedTypes: InputType[];
+export declare const selectionErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
+export declare const maskForbiddenTypes: InputType[];
+export declare const maskAllowedTypes: InputType[];
+export declare const maskErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
+export declare const calculateClearCrossShowedState: ({ showClearIcon, notEmptyValue, focused, hovered, }: {
+    showClearIcon: ShowClearIcon;
+    notEmptyValue: boolean;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+}) => boolean;
+export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
+    /** Показывать иконку очистки значения в непустом поле:
+     * - `always` — всегда показывать иконку
+     * - `auto` — показывать иконку при hover/focus
+     * - `never` — не показывать иконку
+     * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.
+     * @default never */
+    showClearIcon?: ShowClearIcon;
+    /** Задает иконку слева.
+     * При использовании `ReactNode` применяются дефолтные стили для иконки.
+     * При использовании `() => ReactNode` применяются только стили для позиционирования. */
+    leftIcon?: InputIconType;
+    /** Добавляет иконку справа.
+     * При использовании `ReactNode` применяются дефолтные стили для иконки.
+     * При использовании `() => ReactNode` применяются только стили для позиционирования. */
+    rightIcon?: InputIconType;
+    /** Переводит контрол в состояние валидации "ошибка". */
+    error?: boolean;
+    /** Переводит контрол в состояние валидации "предупреждение". */
+    warning?: boolean;
+    /** Убирает обводку. */
+    borderless?: boolean;
+    /** Задает выравнивание контента. */
+    align?: InputAlign;
+    /** Задает паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url`
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
+    mask?: Nullable<string>;
+    /** Устанавливает символ маски.
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
+    maskChar?: Nullable<string>;
+    /** Задает словарь символов-регулярок для задания маски
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput.
+     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }. */
+    formatChars?: Record<string, string>;
+    /** Включает показ символов маски.
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
+    alwaysShowMask?: boolean;
+    /** Задает размер. */
+    size?: SizeProp;
+    /** Задает функцию, которая вызывается при изменении значения в инпуте. */
+    onValueChange?: (value: string) => void;
+    /** @ignore */
+    onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
+    /** @ignore */
+    onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
+    /** @ignore */
+    onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
+    /** Задает тип инпута. */
+    type?: InputType;
+    /** Задает значение. */
+    value?: string;
+    capture?: boolean;
+    /** Устанавливает префикс `ReactNode` перед значением, но после иконки. */
+    prefix?: React.ReactNode;
+    /** Устанавливает суффикс `ReactNode` после значения, но перед правой иконкой. */
+    suffix?: React.ReactNode;
+    /** Определяет, нужно ли выделять введенное значение при фокусе. Работает с типами `text`, `password`, `tel`, `search`, `url`. [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) */
+    selectAllOnFocus?: boolean;
+    /** Задает функцию для обработки ввода.
+     * При неправильном вводе инпут по-умолчанию вспыхивает акцентным цветом.
+     * Если `onUnexpectedInput` передан - вызывается переданный обработчик b вспыхивание можно вызвать публичным методом инстанса `blink()`.
+     * @param {string} value - значение инпута. */
+    onUnexpectedInput?: (value: string) => void;
+    /** Устанавливает радиус скруглений углов.
+     * @ignore */
+    corners?: Partial<Pick<React.CSSProperties, 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'>>;
+    /** Устанавливает элемент, заменяющий нативный input. Должен иметь пропы `InputElementProps` и тип `InputElement`. */
+    element?: ReactElement<InputElementProps>;
+}> {
+}
+export interface InputState {
+    blinking: boolean;
+    focused: boolean;
+    hovered: boolean;
+    needsPolyfillPlaceholder: boolean;
+    clearCrossShowed: boolean;
+}
+export declare const InputDataTids: {
+    readonly root: "Input__root";
+    readonly clearCross: "Input__clearCross";
+};
+type DefaultProps = Required<Pick<InputProps, 'size' | 'type' | 'showClearIcon'>>;
+/**
+ * Поле ввода `Input` дает возможность указать значение с помощью клавиатуры.
+ *
+ * Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.
+ *
+ *  Если вводимое значение имеет определенный формат, используйте специальную версию поля:
+ * * Поле с паролем PasswordInput.
+ * * Поле с валютой CurrencyInput.
+ * * Поле с маской MaskedInput.
+ * * Автополе FxInput.
+ *
+ * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+ */
+export declare class Input extends React.Component<InputProps, InputState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    private selectAllId;
+    private theme;
+    private blinkTimeout;
+    input: HTMLInputElement | null;
+    private setRootNode;
+    private getClearCrossShowed;
+    state: InputState;
+    private outputMaskError;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<InputProps>): void;
+    componentWillUnmount(): void;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    /**
+     * @public
+     */
+    getNode(): HTMLInputElement | null;
+    /**
+     * @public
+     */
+    blink(): void;
+    /**
+     * @public
+     * @param {number} start
+     * @param {number} end
+     */
+    setSelectionRange(start: number, end: number): void;
+    get isMaskVisible(): boolean;
+    render(): JSX.Element;
+    private get canBeUsedWithMask();
+    /**
+     * Работает с типами `text`, `password`, `tel`, `search`, `url`
+     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
+     * @public
+     */
+    selectAll: () => void;
+    delaySelectAll: () => number | null;
+    private _selectAll;
+    private cancelDelayedSelectAll;
+    private cancelBlink;
+    private getInput;
+    private renderMain;
+    private renderMaskedInput;
+    private getSizeClassName;
+    private refInput;
+    private handleClearInput;
+    private handleChange;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocus;
+    private handleKeyDown;
+    private handleKeyPress;
+    private handleMaskedValueChange;
+    private handleUnexpectedInput;
+    private resetFocus;
+    private handleBlur;
+}
+export {};

package/cjs/components/Input/Input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.selectionErrorMessage = exports.selectionAllowedTypes = exports.maskForbiddenTypes = exports.maskErrorMessage = exports.maskAllowedTypes = exports.inputTypes = exports.InputDataTids = exports.Input = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.selectionErrorMessage = exports.selectionAllowedTypes = exports.maskForbiddenTypes = exports.maskErrorMessage = exports.maskAllowedTypes = exports.inputTypes = exports.calculateClearCrossShowedState = exports.InputDataTids = exports.Input = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _react = _interopRequireDefault(require("react"));
 var _warning = _interopRequireDefault(require("warning"));
@@ -17,11 +17,13 @@ var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
+var _ClearCrossIcon = require("../../internal/ClearCrossIcon/ClearCrossIcon");
+var _typeGuards = require("../../lib/typeGuards");
 var _Input2 = require("./Input.styles");
 var _InputLayout = require("./InputLayout/InputLayout");
-var _PolyfillPlaceholder = require("./InputLayout/PolyfillPlaceholder");var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls", "aria-label", "element"];var _class, _Input; // TODO: Enable this rule in functional components.
+var _PolyfillPlaceholder = require("./InputLayout/PolyfillPlaceholder");var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls", "aria-label", "element", "showClearIcon"];var _class, _Input; // TODO: Enable this rule in functional components.
 var inputTypes = exports.inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
@@ -29,6 +31,7 @@ var inputTypes = exports.inputTypes = ['password', 'text', 'number', 'tel', 'sea
 var selectionAllowedTypes = exports.selectionAllowedTypes = ['text', 'password', 'tel', 'search', 'url'];
 var selectionErrorMessage = exports.selectionErrorMessage = function selectionErrorMessage(type, allowedTypes) {if (allowedTypes === void 0) {allowedTypes = selectionAllowedTypes;}
   return "<Input />. Selection is not supported by the type \"" + type + "\". Types that support selection: " + allowedTypes.
@@ -45,6 +48,38 @@ var maskErrorMessage = exports.maskErrorMessage = function maskErrorMessage(type
   map(function (i) {return "\"" + i + "\"";}).
   join(', ') + ".";
 };
+var calculateClearCrossShowedState = exports.calculateClearCrossShowedState = function calculateClearCrossShowedState(_ref)
+{var showClearIcon = _ref.showClearIcon,notEmptyValue = _ref.notEmptyValue,focused = _ref.focused,hovered = _ref.hovered;
+  switch (showClearIcon) {
+    case 'always':
+      return notEmptyValue;
+    case 'auto':
+      return Boolean((focused || hovered) && notEmptyValue);
+    case 'never':
+      return false;
+    default:
+      return (0, _typeGuards.catchUnreachableWarning)(showClearIcon, false);
+  }
+};
@@ -152,7 +187,8 @@ var maskErrorMessage = exports.maskErrorMessage = function maskErrorMessage(type
 var InputDataTids = exports.InputDataTids = {
-  root: 'Input__root'
+  root: 'Input__root',
+  clearCross: 'Input__clearCross'
 };
@@ -180,20 +216,46 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
-    getProps = (0, _createPropsGetter.createPropsGetter)(Input.defaultProps);_this.
-    state = {
-      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
-      blinking: false,
-      focused: false
-    };_this.
+    getProps = (0, _createPropsGetter.createPropsGetter)(Input.defaultProps);_this.
     selectAllId = null;_this.
-    input = null;
+    input = null;_this.
+    getClearCrossShowed = function (_ref2)
+    {var _this$input;var focused = _ref2.focused,hovered = _ref2.hovered,hasInitialValue = _ref2.hasInitialValue;
+      if (_this.props.disabled) {
+        return false;
+      }
+      return calculateClearCrossShowedState({
+        showClearIcon: _this.getProps().showClearIcon,
+        notEmptyValue: Boolean(((_this$input = _this.input) == null ? void 0 : _this$input.value) || hasInitialValue),
+        focused: focused,
+        hovered: hovered
+      });
+    };_this.
+    state = {
+      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
+      blinking: false,
+      focused: false,
+      hovered: false,
+      clearCrossShowed: _this.getClearCrossShowed({
+        focused: false,
+        hasInitialValue: Boolean(_this.props.value || _this.props.defaultValue)
+      })
+    };
@@ -394,7 +456,8 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
-        props.onMouseEnter,onMouseLeave = props.onMouseLeave,onMouseOver = props.onMouseOver,onKeyDown = props.onKeyDown,onKeyPress = props.onKeyPress,onValueChange = props.onValueChange,width = props.width,error = props.error,role = props.role,warning = props.warning,leftIcon = props.leftIcon,rightIcon = props.rightIcon,borderless = props.borderless,value = props.value,align = props.align,type = props.type,mask = props.mask,maskChar = props.maskChar,alwaysShowMask = props.alwaysShowMask,size = props.size,placeholder = props.placeholder,selectAllOnFocus = props.selectAllOnFocus,disabled = props.disabled,onUnexpectedInput = props.onUnexpectedInput,prefix = props.prefix,suffix = props.suffix,formatChars = props.formatChars,corners = props.corners,ariaDescribedby = props['aria-describedby'],ariaControls = props['aria-controls'],ariaLabel = props['aria-label'],element = props.element,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+        props.onMouseEnter,onMouseLeave = props.onMouseLeave,onMouseOver = props.onMouseOver,onKeyDown = props.onKeyDown,onKeyPress = props.onKeyPress,onValueChange = props.onValueChange,width = props.width,error = props.error,role = props.role,warning = props.warning,leftIcon = props.leftIcon,rightIcon = props.rightIcon,borderless = props.borderless,value = props.value,align = props.align,type = props.type,mask = props.mask,maskChar = props.maskChar,alwaysShowMask = props.alwaysShowMask,size = props.size,placeholder = props.placeholder,selectAllOnFocus = props.selectAllOnFocus,disabled = props.disabled,onUnexpectedInput = props.onUnexpectedInput,prefix = props.prefix,suffix = props.suffix,formatChars = props.formatChars,corners = props.corners,ariaDescribedby = props['aria-describedby'],ariaControls = props['aria-controls'],ariaLabel = props['aria-label'],element = props.element,showClearIcon = props.showClearIcon,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
       var _this$state = _this.state,blinking = _this$state.blinking,focused = _this$state.focused;
@@ -413,8 +476,8 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
         ),
         'aria-controls': ariaControls,
         style: (0, _extends2.default)({ width: width }, corners),
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
+        onMouseEnter: _this.handleMouseEnter,
+        onMouseLeave: _this.handleMouseLeave,
         onMouseOver: onMouseOver
       };
@@ -444,10 +507,18 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       _react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus }, _this.getInput(inputProps));
+      var getRightIcon = function getRightIcon() {
+        return _this.state.clearCrossShowed ? /*#__PURE__*/
+        _react.default.createElement(_ClearCrossIcon.ClearCrossIcon, { "data-tid": InputDataTids.clearCross, size: size, onClick: _this.handleClearInput }) :
+        rightIcon;
+      };
       return /*#__PURE__*/(
         _react.default.createElement(_InputLayout.InputLayout, {
           leftIcon: leftIcon,
-          rightIcon: rightIcon,
+          rightIcon: getRightIcon(),
           prefix: prefix,
           suffix: suffix,
           labelProps: labelProps,
@@ -512,6 +583,18 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       }
     };_this.
+    handleClearInput = function () {
+      if (_this.input) {
+        _this.input.value = '';
+      }
+      _this.setState({ clearCrossShowed: false });
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange('');
+      }
+    };_this.
     handleChange = function (event) {
       if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
@@ -527,11 +610,35 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       if (_this.props.onChange) {
         _this.props.onChange(event);
       }
+      _this.setState({
+        clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: _this.state.hovered })
+      });
+    };_this.
+    handleMouseEnter = function (e) {
+      _this.setState({
+        hovered: true,
+        clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: true })
+      });
+      if (_this.props.onMouseEnter) {
+        _this.props.onMouseEnter(e);
+      }
+    };_this.
+    handleMouseLeave = function (e) {
+      _this.setState({
+        hovered: false,
+        clearCrossShowed: _this.getClearCrossShowed({ focused: _this.state.focused, hovered: false })
+      });
+      if (_this.props.onMouseLeave) {
+        _this.props.onMouseLeave(e);
+      }
     };_this.
     handleFocus = function (event) {
       _this.setState({
-        focused: true
+        focused: true,
+        clearCrossShowed: _this.getClearCrossShowed({ focused: true, hovered: _this.state.hovered })
       });
       if (_this.props.selectAllOnFocus) {
@@ -581,9 +688,18 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
     resetFocus = function () {return _this.setState({ focused: false });};_this.
-    handleBlur = function (event) {
-      _this.resetFocus();
-      _this.props.onBlur == null || _this.props.onBlur(event);
+    handleBlur = function (event) {var _getRootNode;
+      var showClearIcon = _this.props.showClearIcon;
+      if (showClearIcon && (_getRootNode = (0, _rootNode.getRootNode)(_this)) != null && _getRootNode.contains(event.relatedTarget)) {
+        _this.setState({ focused: false });
+      } else {
+        var clearCrossShowed = _this.getClearCrossShowed({ focused: false, hovered: _this.state.hovered });
+        _this.setState({
+          focused: false,
+          clearCrossShowed: clearCrossShowed
+        });
+        _this.props.onBlur == null || _this.props.onBlur(event);
+      }
     };return _this;}(0, _inheritsLoose2.default)(Input, _React$Component);var _proto = Input.prototype;_proto.outputMaskError = function outputMaskError() {(0, _warning.default)(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));};_proto.componentDidMount = function componentDidMount() {this.outputMaskError();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.props.type !== prevProps.type || this.props.mask !== prevProps.mask) {this.outputMaskError();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {_globalObject.globalObject.clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();} /**
    * @public
    */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /**
@@ -600,4 +716,4 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
    * @param {number} end
    */;_proto.setSelectionRange = function setSelectionRange(start, end) {var _globalObject$documen,_this$props$value,_this3 = this; // https://github.com/facebook/react/issues/7769
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
-    if (!selectionAllowedTypes.includes(this.getProps().type)) {(0, _warning.default)(false, selectionErrorMessage(this.getProps().type));return;}if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {this.focus();}if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {_globalObject.globalObject.setTimeout(function () {var _this3$input;(_this3$input = _this3.input) == null || _this3$input.setSelectionRange(start, end);}, 150);} else {var _this$input;(_this$input = this.input) == null || _this$input.setSelectionRange(start, end);}};_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);});};_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_InternalMaskedInput.InternalMaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getSizeClassName = function getSizeClassName() {var _cx3, _cx4, _cx5;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)((_cx3 = {}, _cx3[_Input2.styles.sizeLarge(this.theme)] = true, _cx3[_Input2.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx3));case 'medium':return (0, _Emotion.cx)((_cx4 = {}, _cx4[_Input2.styles.sizeMedium(this.theme)] = true, _cx4[_Input2.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx4));case 'small':default:return (0, _Emotion.cx)((_cx5 = {}, _cx5[_Input2.styles.sizeSmall(this.theme)] = true, _cx5[_Input2.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx5));}};return (0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props = this.props,mask = _this$props.mask,alwaysShowMask = _this$props.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }, { key: "canBeUsedWithMask", get: function get() {return maskForbiddenTypes.includes(this.getProps().type);} }]);}(_react.default.Component), _Input.__KONTUR_REACT_UI__ = 'Input', _Input.displayName = 'Input', _Input.defaultProps = { size: 'small', type: 'text' }, _Input)) || _class;
+    if (!selectionAllowedTypes.includes(this.getProps().type)) {(0, _warning.default)(false, selectionErrorMessage(this.getProps().type));return;}if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {this.focus();}if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {_globalObject.globalObject.setTimeout(function () {var _this3$input;(_this3$input = _this3.input) == null || _this3$input.setSelectionRange(start, end);}, 150);} else {var _this$input2;(_this$input2 = this.input) == null || _this$input2.setSelectionRange(start, end);}};_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);});};_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_InternalMaskedInput.InternalMaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getSizeClassName = function getSizeClassName() {var _cx3, _cx4, _cx5;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)((_cx3 = {}, _cx3[_Input2.styles.sizeLarge(this.theme)] = true, _cx3[_Input2.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx3));case 'medium':return (0, _Emotion.cx)((_cx4 = {}, _cx4[_Input2.styles.sizeMedium(this.theme)] = true, _cx4[_Input2.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx4));case 'small':default:return (0, _Emotion.cx)((_cx5 = {}, _cx5[_Input2.styles.sizeSmall(this.theme)] = true, _cx5[_Input2.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx5));}};return (0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props = this.props,mask = _this$props.mask,alwaysShowMask = _this$props.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }, { key: "canBeUsedWithMask", get: function get() {return maskForbiddenTypes.includes(this.getProps().type);} }]);}(_react.default.Component), _Input.__KONTUR_REACT_UI__ = 'Input', _Input.displayName = 'Input', _Input.defaultProps = { size: 'small', type: 'text', showClearIcon: 'never' }, _Input)) || _class;