@skbkontur/react-ui 0.0.0-a8f1c3e7a1 → 0.0.0-aa4659ca48

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

@@ -1,7 +1,8 @@
 import type { AriaAttributes, HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
-import type { Nullable, Override } from '../../typings/utility-types';
+import type { Override } from '../../typings/utility-types';
 import type { CommonProps } from '../../internal/CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
 import type { SizeProp } from '../../lib/types/props';
 import type { InputElementProps } from './Input.typings';
 export declare const inputTypes: readonly ["password", "text", "number", "tel", "search", "time", "date", "url", "email"];
@@ -11,24 +12,17 @@ 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;
+    focused?: boolean;
+    hovered?: boolean;
 }) => 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;
@@ -36,30 +30,19 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
      * При использовании `ReactNode` применяются дефолтные стили для иконки.
      * При использовании `() => ReactNode` применяются только стили для позиционирования. */
     rightIcon?: InputIconType;
-    /** Переводит контрол в состояние валидации "ошибка". */
+    /** Меняет визуальное отображение поля на состояние «ошибка». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). */
     error?: boolean;
-    /** Переводит контрол в состояние валидации "предупреждение". */
+    /** Меняет визуальное отображение поля на состояние «предупреждение». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). */
     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;
-    /** Задает размер. */
+    /** Задаёт размер.
+     * @default small
+     */
     size?: SizeProp;
-    /** Задает функцию, которая вызывается при изменении значения в инпуте. */
+    /** Задаёт функцию, которая вызывается при изменении значения в поле ввода. */
     onValueChange?: (value: string) => void;
     /** @ignore */
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
@@ -67,21 +50,21 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
     /** @ignore */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Задает тип инпута. */
+    /** Задаёт тип поля ввода. */
     type?: InputType;
-    /** Задает значение. */
+    /** Задаёт значение внутри поля. */
     value?: string;
+    /** @deprecated Со следующей мажорной версии Input перестанет поддерживать проп `capture`. */
     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) */
+    /** Выделяет введенное значение при фокусе в поле. Работает с типами `text`, `password`, `tel`, `search`, `url`. */
     selectAllOnFocus?: boolean;
-    /** Задает функцию для обработки ввода.
-     * При неправильном вводе инпут по-умолчанию вспыхивает акцентным цветом.
-     * Если `onUnexpectedInput` передан - вызывается переданный обработчик b вспыхивание можно вызвать публичным методом инстанса `blink()`.
-     * @param {string} value - значение инпута. */
+    /** Устанавливает обработчик на случай некорректного ввода.
+     * Если передан onUnexpectedInput, он будет вызван при ошибке, а эффект мигания можно запустить вручную через публичный метод blink.
+     * @param {string} value - значение поля. */
     onUnexpectedInput?: (value: string) => void;
     /** Устанавливает радиус скруглений углов.
      * @ignore */
@@ -91,72 +74,59 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
 }> {
 }
 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'>>;
+type DefaultProps = Required<Pick<InputProps, '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 size;
     private getProps;
     private selectAllId;
     private theme;
-    private blinkTimeout;
     input: HTMLInputElement | null;
+    labelRef: React.RefObject<HTMLLabelElement>;
+    getRootNode: TGetRootNode;
     private setRootNode;
     private getClearCrossShowed;
     state: InputState;
-    private outputMaskError;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<InputProps>): void;
     componentWillUnmount(): void;
-    /**
+    /** Программно устанавливает фокус на поле.
+     * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
      * @public
      */
     focus(): void;
-    /**
+    /** Программно снимает фокус с кнопки.
      * @public
      */
     blur(): void;
-    /**
+    /** Возвращает DOM-узел поля ввода.
      * @public
      */
     getNode(): HTMLInputElement | null;
-    /**
+    /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
      * @public
      */
     blink(): void;
-    /**
+    /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
      * @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
@@ -165,10 +135,8 @@ export declare class Input extends React.Component<InputProps, InputState> {
     delaySelectAll: () => number | null;
     private _selectAll;
     private cancelDelayedSelectAll;
-    private cancelBlink;
     private getInput;
     private renderMain;
-    private renderMaskedInput;
     private getSizeClassName;
     private refInput;
     private handleClearInput;
@@ -178,7 +146,6 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private handleFocus;
     private handleKeyDown;
     private handleKeyPress;
-    private handleMaskedValueChange;
     private handleUnexpectedInput;
     private resetFocus;
     private handleBlur;

package/cjs/components/Input/Input.js

@@ -1,16 +1,12 @@
-"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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.selectionErrorMessage = exports.selectionAllowedTypes = 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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 var _invariant = _interopRequireDefault(require("invariant"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _warning = _interopRequireDefault(require("warning"));
-
 var _globalObject = require("@skbkontur/global-object");
 
-var _client = require("../../lib/client");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
-var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
 
-var _InternalMaskedInput = require("../../internal/InternalMaskedInput");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 
@@ -23,11 +19,12 @@ var _createPropsGetter = require("../../lib/createPropsGetter");
 var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
 var _ClearCrossIcon = require("../../internal/ClearCrossIcon/ClearCrossIcon");
 var _typeGuards = require("../../lib/typeGuards");
+var _blink2 = require("../../lib/blink");
+var _SizeDecorator = require("../../lib/size/SizeDecorator");
 
 
 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", "showClearIcon"];var _class, _Input; // TODO: Enable this rule in functional components.
+var _InputLayout = require("./InputLayout/InputLayout");var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "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'];
 
@@ -43,15 +40,6 @@ var selectionErrorMessage = exports.selectionErrorMessage = function selectionEr
   join(', ') + ". Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.";
 };
 
-var maskForbiddenTypes = exports.maskForbiddenTypes = ['number', 'date', 'time'];
-var maskAllowedTypes = exports.maskAllowedTypes = inputTypes.filter(function (type) {
-  return !maskForbiddenTypes.includes(type);
-});
-var maskErrorMessage = exports.maskErrorMessage = function maskErrorMessage(type, allowedTypes) {if (allowedTypes === void 0) {allowedTypes = maskAllowedTypes;}
-  return "<Input />. Prop \"mask\" does not support type \"" + type + "\". Supported types: " + allowedTypes.
-  map(function (i) {return "\"" + i + "\"";}).
-  join(', ') + ".";
-};
 var calculateClearCrossShowedState = exports.calculateClearCrossShowedState = function calculateClearCrossShowedState(_ref)
 
 
@@ -147,28 +135,6 @@ var calculateClearCrossShowedState = exports.calculateClearCrossShowedState = fu
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -198,20 +164,11 @@ var InputDataTids = exports.InputDataTids = {
 
 
 /**
- * Поле ввода `Input` дает возможность указать значение с помощью клавиатуры.
- *
- * Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.
- *
- *  Если вводимое значение имеет определенный формат, используйте специальную версию поля:
- * * Поле с паролем PasswordInput.
- * * Поле с валютой CurrencyInput.
- * * Поле с маской MaskedInput.
- * * Автополе FxInput.
- *
- * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+ * Поле ввода позволяет ввести или отредактировать значение.
  */var
 
-Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/function (_React$Component) {function Input() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+Input = exports.Input = (0, _rootNode.rootNode)(_class = (0, _SizeDecorator.withSize)(_class = (_Input = /*#__PURE__*/function (_React$Component) {function Input() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -225,8 +182,9 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
 
     selectAllId = null;_this.
 
-
     input = null;_this.
+    labelRef = /*#__PURE__*/(0, _react.createRef)();_this.
+
 
 
     getClearCrossShowed = function (_ref2)
@@ -250,8 +208,6 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
     };_this.
 
     state = {
-      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
-      blinking: false,
       focused: false,
       hovered: false,
       clearCrossShowed: _this.getClearCrossShowed({
@@ -315,47 +271,6 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -378,6 +293,7 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
 
 
     /**
+     * Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст.
      * Работает с типами `text`, `password`, `tel`, `search`, `url`
      * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
      * @public
@@ -401,28 +317,12 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       }
     };_this.
 
-    cancelBlink = function (callback) {
-      if (_this.blinkTimeout) {
-        _globalObject.globalObject.clearTimeout(_this.blinkTimeout);
-        _this.blinkTimeout = 0;
-        if (_this.state.blinking) {
-          _this.setState({ blinking: false }, callback);
-          return;
-        }
-      }
-      if (callback) {
-        callback();
-      }
-    };_this.
-
     getInput = function (inputProps) {
       if (_this.props.element) {
         return /*#__PURE__*/_react.default.cloneElement(_this.props.element, inputProps);
       }
 
-      return _this.props.mask && !_this.canBeUsedWithMask ?
-      _this.renderMaskedInput(inputProps, _this.props.mask) : /*#__PURE__*/
-      _react.default.createElement('input', inputProps);
+      return /*#__PURE__*/_react.default.createElement('input', inputProps);
     };_this.
 
     renderMain = function (props) {var _cx, _cx2;
@@ -457,32 +357,25 @@ 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,size = props.size,placeholder = props.placeholder,selectAllOnFocus = props.selectAllOnFocus,disabled = props.disabled,onUnexpectedInput = props.onUnexpectedInput,prefix = props.prefix,suffix = props.suffix,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);
 
-
-
-
-        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;
+      var focused = _this.state.focused;
 
       var labelProps = {
         className: (0, _Emotion.cx)(_Input2.styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[
         _Input2.styles.focus(_this.theme)] = focused && !warning && !error, _cx[
         _Input2.styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[
-        _Input2.styles.blink(_this.theme)] = blinking, _cx[
         _Input2.styles.borderless()] = borderless && !focused, _cx[
         _Input2.styles.disabled(_this.theme)] = disabled, _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.error(_this.theme)] = error, _cx)
         ),
         'aria-controls': ariaControls,
         style: (0, _extends2.default)({ width: width }, corners),
         onMouseEnter: _this.handleMouseEnter,
         onMouseLeave: _this.handleMouseLeave,
-        onMouseOver: onMouseOver
+        onMouseOver: onMouseOver,
+        ref: _this.labelRef
       };
 
       var inputProps = (0, _extends2.default)({},
@@ -501,7 +394,7 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
         style: { textAlign: align },
         ref: _this.refInput,
         type: type,
-        placeholder: !_this.isMaskVisible && !_needsPolyfillPlaceholder.needsPolyfillPlaceholder ? placeholder : undefined,
+        placeholder: placeholder,
         disabled: disabled,
         'aria-describedby': ariaDescribedby,
         'aria-label': ariaLabel });
@@ -513,12 +406,11 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
 
       var getRightIcon = function getRightIcon() {
         return _this.state.clearCrossShowed ? /*#__PURE__*/
-        _react.default.createElement(_ClearCrossIcon.ClearCrossIcon, { "data-tid": InputDataTids.clearCross, size: size, onClick: _this.handleClearInput }) :
+        _react.default.createElement(_ClearCrossIcon.ClearCrossIcon, { "data-tid": InputDataTids.clearCross, size: _this.size, onClick: _this.handleClearInput }) :
 
         rightIcon;
 
       };
-
       return /*#__PURE__*/(
         _react.default.createElement(_InputLayout.InputLayout, {
           leftIcon: leftIcon,
@@ -526,19 +418,9 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
           prefix: prefix,
           suffix: suffix,
           labelProps: labelProps,
-          context: { disabled: Boolean(disabled), focused: focused, size: size } },
-
-        input,
-        _this.state.needsPolyfillPlaceholder && /*#__PURE__*/
-        _react.default.createElement(_PolyfillPlaceholder.PolyfillPlaceholder, {
-          isMaskVisible: _this.isMaskVisible,
-          value: value,
-          defaultValue: _this.props.defaultValue,
-          align: align },
-
-        placeholder
-        )
+          context: { disabled: Boolean(disabled), focused: focused, size: _this.size } },
 
+        input
         ));
 
     };_this.
@@ -558,29 +440,11 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
     refInput = function (element) {
-      if (element instanceof _InternalMaskedInput.InternalMaskedInput || element && 'input' in element) {
+      if (element && 'input' in element) {
         _this.input = element.input;
       } else {
         _this.input = element;
@@ -600,13 +464,6 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
     };_this.
 
     handleChange = function (event) {
-      if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder) {
-        var fieldIsEmpty = event.target.value === '';
-        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
-          _this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });
-        }
-      }
-
       if (_this.props.onValueChange) {
         _this.props.onValueChange(event.target.value);
       }
@@ -646,7 +503,7 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       });
 
       if (_this.props.selectAllOnFocus) {
-        _this.input && !_client.isIE11 ? _this.selectAll() : _this.delaySelectAll();
+        _this.input && _this.selectAll();
       }
 
       if (_this.props.onFocus) {
@@ -676,12 +533,6 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       }
     };_this.
 
-    handleMaskedValueChange = function (value) {
-      if (_this.props.onValueChange) {
-        _this.props.onValueChange(value);
-      }
-    };_this.
-
     handleUnexpectedInput = function (value) {if (value === void 0) {value = _this.props.value || '';}
       if (_this.props.onUnexpectedInput) {
         _this.props.onUnexpectedInput(value);
@@ -704,20 +555,19 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
         });
         _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();} /**
+    };return _this;}(0, _inheritsLoose2.default)(Input, _React$Component);var _proto = Input.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedSelectAll();} /** Программно устанавливает фокус на поле.
+   * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
    * @public
-   */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /**
+   */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /** Программно снимает фокус с кнопки.
    * @public
-   */;_proto.blur = function blur() {(0, _invariant.default)(this.input, 'Cannot call "blur" because Input is not mounted');this.input.blur();} /**
+   */;_proto.blur = function blur() {(0, _invariant.default)(this.input, 'Cannot call "blur" because Input is not mounted');this.input.blur();} /** Возвращает DOM-узел поля ввода.
    * @public
-   */;_proto.getNode = function getNode() {return this.input;} /**
+   */;_proto.getNode = function getNode() {return this.input;} /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
    * @public
-   */;_proto.blink = function blink() {var _this2 = this;if (this.blinkTimeout) {this.cancelBlink(function () {// trigger reflow to restart animation
-          // @see https://css-tricks.com/restart-css-animation/#article-header-id-0
-          void (_this2.input && _this2.input.offsetWidth);_this2.blink();});return;}this.setState({ blinking: true }, function () {_this2.blinkTimeout = _globalObject.globalObject.setTimeout(_this2.cancelBlink, 150);});} /**
+   */;_proto.blink = function blink() {(0, _blink2.blink)({ el: this.labelRef.current, blinkColor: this.theme.inputBlinkColor });} /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
    * @public
    * @param {number} start
    * @param {number} end
-   */;_proto.setSelectionRange = function setSelectionRange(start, end) {var _globalObject$documen,_this$props$value,_this3 = this; // https://github.com/facebook/react/issues/7769
+   */;_proto.setSelectionRange = function setSelectionRange(start, end) {var _globalObject$documen, _this$input2; // 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$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;
+    if (!selectionAllowedTypes.includes(this.getProps().type)) {(0, _warning.default)(false, selectionErrorMessage(this.getProps().type));return;}if (!this.input) {(0, _warning.default)(false, 'Cannot call "setSelectionRange" on unmounted Input');return;}if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {this.focus();}(_this$input2 = this.input) == null || _this$input2.setSelectionRange(start, end);};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});};_proto.getSizeClassName = function getSizeClassName() {var _cx3, _cx4, _cx5;switch (this.size) {case 'large':return (0, _Emotion.cx)((_cx3 = {}, _cx3[_Input2.styles.sizeLarge(this.theme)] = true, _cx3));case 'medium':return (0, _Emotion.cx)((_cx4 = {}, _cx4[_Input2.styles.sizeMedium(this.theme)] = true, _cx4));case 'small':default:return (0, _Emotion.cx)((_cx5 = {}, _cx5[_Input2.styles.sizeSmall(this.theme)] = true, _cx5));}};return Input;}(_react.default.Component), _Input.__KONTUR_REACT_UI__ = 'Input', _Input.displayName = 'Input', _Input.defaultProps = { type: 'text', showClearIcon: 'never' }, _Input)) || _class) || _class;