@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/cjs/components/Hint/Hint.styles.js

@@ -1,24 +1,23 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: center;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      color: #fff;\n      font-size: 14px;\n      max-width: 200px;\n      overflow-wrap: break-word;\n      padding: 6px 8px;\n      word-break: break-word;\n      word-wrap: break-word;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
-
-var styles = {
-  content: function content() {
-    return (0, _Emotion.css)(_templateObject());
-
-
-
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
+var styles = (0, _Emotion.memoizeStyle)({
+  content: function content(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])),
 
+    t.hintColor,
+    t.hintFontSize,
+    t.hintLineHeight,
+    t.hintMaxWidth,
 
+    t.hintPaddingY, t.hintPaddingX);
 
 
 
   },
 
-  contentCenter: function contentCenter() {
-    return (0, _Emotion.css)(_templateObject2());
-
-
-  } };
-
+  contentCenter: function contentCenter(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: ", ";\n    "])),
+    t.hintTextAlign);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/components/Hint/Hint.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["styles","content","css","contentCenter","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,OADa,qBACH;AACR,eAAOC,YAAP;;;;;;;;;;AAUD,GAZY;;AAcbC,EAAAA,aAda,2BAcG;AACd,eAAOD,YAAP;;;AAGD,GAlBY,EAAf;;;AAqBO,IAAME,QAAQ,GAAG,2BAAaJ,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  content() {\r\n    return css`\r\n      box-sizing: border-box;\r\n      color: #fff;\r\n      font-size: 14px;\r\n      max-width: 200px;\r\n      overflow-wrap: break-word;\r\n      padding: 6px 8px;\r\n      word-break: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  contentCenter() {\r\n    return css`\r\n      text-align: center;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["styles","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";AACA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,eAAOC,YAAP;;AAEWD,IAAAA,CAAC,CAACE,SAFb;AAGeF,IAAAA,CAAC,CAACG,YAHjB;AAIiBH,IAAAA,CAAC,CAACI,cAJnB;AAKeJ,IAAAA,CAAC,CAACK,YALjB;;AAOaL,IAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBR,CAfmB,EAeT;AACtB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACS,aADlB;;AAGD,GAnBgC,EAAb,CAAf,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight};\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

package/cjs/components/Hint/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _Hint = require("./Hint");Object.keys(_Hint).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Hint[key];});
+"use strict";exports.__esModule = true;var _Hint = require("./Hint");Object.keys(_Hint).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Hint[key]) return;exports[key] = _Hint[key];});

package/cjs/components/Hint/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Hint';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Hint';\n"]}

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

@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
 import { Nullable, Override } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare const inputTypes: readonly ["password", "text", "number", "tel", "search", "time", "date", "url", "email"];
 export declare type InputSize = 'small' | 'medium' | 'large';
 export declare type InputAlign = 'left' | 'center' | 'right';
-export declare type InputType = 'password' | 'text';
+export declare type InputType = typeof inputTypes[number];
 export declare type InputIconType = React.ReactNode | (() => React.ReactNode);
-export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputElement>, {
+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'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
     /**
      * Иконка слева
      * Если `ReactNode` применяются дефолтные стили для иконки
@@ -17,15 +24,19 @@ export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputEle
      * Если `() => ReactNode` применяются только стили для позиционирование
      */
     rightIcon?: InputIconType;
-    /** Состояние ошибки */
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние предупреждения */
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     /** Режим прозрачной рамки */
     borderless?: boolean;
     /** Выравнивание текста */
     align?: InputAlign;
-    /** Паттерн маски */
+    /** Паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url` */
     mask?: Nullable<string>;
     /** Символ маски */
     maskChar?: Nullable<string>;
@@ -46,7 +57,9 @@ export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputEle
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
     /** Вызывается на label */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Тип */
+    /**
+     * Тип. Возможные значения: 'password' | 'text' | 'number' | 'tel' | 'search' | 'time' | 'date' | 'url' | 'email'
+     * */
     type?: InputType;
     /** Значение */
     value?: string;
@@ -61,7 +74,7 @@ export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputEle
      * `ReactNode` после значения, но перед правой иконкой
      */
     suffix?: React.ReactNode;
-    /** Выделять введенное значение при фокусе */
+    /** Выделять введенное значение при фокусе. Работает с типами `text`, `password`, `tel`, `search`, `url`. [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) */
     selectAllOnFocus?: boolean;
     /**
      * Обработчик неправильного ввода.
@@ -73,29 +86,41 @@ export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputEle
      * @param value значение инпута.
      */
     onUnexpectedInput?: (value: string) => void;
-}>;
+    /** @ignore */
+    corners?: Partial<Pick<React.CSSProperties, 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'>>;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+}> {
+}
 export interface InputState {
     blinking: boolean;
     focused: boolean;
-    polyfillPlaceholder: boolean;
+    needsPolyfillPlaceholder: boolean;
 }
+export declare const InputDataTids: {
+    readonly root: "Input__root";
+};
+declare type DefaultProps = Required<Pick<InputProps, 'size' | 'type'>>;
 /**
- * Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+ * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
  *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
  */
 export declare class Input extends React.Component<InputProps, InputState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        size: InputSize;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: InputState;
     private selectAllId;
     private theme;
     private blinkTimeout;
     private input;
+    private setRootNode;
+    private outputMaskError;
     componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<InputProps>): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: InputProps): void;
     /**
      * @public
      */
@@ -104,17 +129,26 @@ export declare class Input extends React.Component<InputProps, InputState> {
      * @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;
@@ -140,3 +174,4 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private renderPrefix;
     private renderSuffix;
 }
+export {};

package/cjs/components/Input/Input.js

@@ -1,17 +1,65 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");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"));
+
+var _invariant = _interopRequireDefault(require("invariant"));
 var _react = _interopRequireDefault(require("react"));
 var _raf = _interopRequireDefault(require("raf"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _warning = _interopRequireDefault(require("warning"));
 
-var _utils = require("../../lib/utils");
+var _client = require("../../lib/client");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
-var _polyfillPlaceholder = require("../../lib/polyfillPlaceholder");
+var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
 
 var _MaskedInput = require("../../internal/MaskedInput");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _Input = 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"];var _class, _class2, _temp;
+
+var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];exports.inputTypes = inputTypes;
+
+
+
+
+
+
+var selectionAllowedTypes = ['text', 'password', 'tel', 'search', 'url'];exports.selectionAllowedTypes = selectionAllowedTypes;
+var 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.
+  map(function (i) {return "\"" + i + "\"";}).
+  join(', ') + ". Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.";
+};exports.selectionErrorMessage = selectionErrorMessage;
+
+var maskForbiddenTypes = ['number', 'date', 'time'];exports.maskForbiddenTypes = maskForbiddenTypes;
+var maskAllowedTypes = inputTypes.filter(function (type) {
+  return !maskForbiddenTypes.includes(type);
+});exports.maskAllowedTypes = maskAllowedTypes;
+var 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(', ') + ".";
+};exports.maskErrorMessage = maskErrorMessage;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -99,27 +147,35 @@ var _Input = require("./Input.styles");
 
 
 
-/**
-                                         * Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
-                                         *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
-                                         */var
-Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Input, _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.
+var InputDataTids = {
+  root: 'Input__root' };exports.InputDataTids = InputDataTids;
 
 
 
 
+/**
+ * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+ *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
+ */var
 
+Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Input, _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.
 
 
 
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Input.defaultProps);_this.
+
     state = {
-      polyfillPlaceholder: false,
+      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
       blinking: false,
       focused: false };_this.
 
 
     selectAllId = null;_this.
-    theme = void 0;_this.
+
     blinkTimeout = 0;_this.
     input = null;_this.
 
@@ -211,34 +267,9 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
 
 
 
-    selectAll = function () {
-      if (_this.input) {
-        _this.setSelectionRange(0, _this.input.value.length);
-      }
-    };_this.
 
-    delaySelectAll = function () {return _this.selectAllId = (0, _raf.default)(_this.selectAll);};_this.
 
-    cancelDelayedSelectAll = function () {
-      if (_this.selectAllId) {
-        _raf.default.cancel(_this.selectAllId);
-        _this.selectAllId = null;
-      }
-    };_this.
 
-    cancelBlink = function (callback) {
-      if (_this.blinkTimeout) {
-        clearTimeout(_this.blinkTimeout);
-        _this.blinkTimeout = 0;
-        if (_this.state.blinking) {
-          _this.setState({ blinking: false }, callback);
-          return;
-        }
-      }
-      if (callback) {
-        callback();
-      }
-    };_this.
 
 
 
@@ -271,6 +302,44 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
 
 
 
+    selectAll = function () {
+      if (_this.input) {
+        _this.setSelectionRange(0, _this.input.value.length);
+      }
+    };_this.
+
+    delaySelectAll = function () {return _this.selectAllId = (0, _raf.default)(_this.selectAll);};_this.
+
+    cancelDelayedSelectAll = function () {
+      if (_this.selectAllId) {
+        _raf.default.cancel(_this.selectAllId);
+        _this.selectAllId = null;
+      }
+    };_this.
+
+    cancelBlink = function (callback) {
+      if (_this.blinkTimeout) {
+        clearTimeout(_this.blinkTimeout);
+        _this.blinkTimeout = 0;
+        if (_this.state.blinking) {
+          _this.setState({ blinking: false }, callback);
+          return;
+        }
+      }
+      if (callback) {
+        callback();
+      }
+    };_this.
+
+    renderMain = function (props) {var _cx, _cx2;
+      var
+      onMouseEnter =
+
+
+
+
+
+
 
 
 
@@ -294,27 +363,97 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
 
 
 
+      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'],rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
+      var _this$state = _this.state,blinking = _this$state.blinking,focused = _this$state.focused;
 
+      var labelProps = {
+        className: (0, _Emotion.cx)(_Input.styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[
+        _Input.styles.focus(_this.theme)] = focused && !warning && !error, _cx[
+        _Input.styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[
+        _Input.styles.blink(_this.theme)] = blinking, _cx[
+        _Input.styles.borderless()] = borderless && !focused, _cx[
+        _Input.styles.disabled(_this.theme)] = disabled, _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)),
 
+        style: (0, _extends2.default)({ width: width }, corners),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseOver: onMouseOver };
 
 
+      var inputProps = (0, _extends2.default)({},
+      rest, {
+        className: (0, _Emotion.cx)(_Input.styles.input(_this.theme), (_cx2 = {}, _cx2[
+        _Input.styles.inputFocus(_this.theme)] = focused, _cx2[
+        _Input.styles.inputDisabled(_this.theme)] = disabled, _cx2)),
 
+        value: value,
+        role: role,
+        onChange: _this.handleChange,
+        onFocus: _this.handleFocus,
+        onKeyDown: _this.handleKeyDown,
+        onKeyPress: _this.handleKeyPress,
+        onBlur: _this.handleBlur,
+        style: { textAlign: align },
+        ref: _this.refInput,
+        type: type,
+        placeholder: !_this.isMaskVisible && !_needsPolyfillPlaceholder.needsPolyfillPlaceholder ? placeholder : undefined,
+        disabled: disabled,
+        'aria-describedby': ariaDescribedby });
 
 
+      var input =
+      mask && !_this.canBeUsedWithMask ?
+      _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/
+      _react.default.createElement('input', inputProps);
 
+      if ((0, _ThemeHelpers.isTheme2022)(_this.theme)) {
+        return /*#__PURE__*/(
+          _react.default.createElement(_InputLayout.InputLayout, {
+            leftIcon: leftIcon,
+            rightIcon: rightIcon,
+            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)));
 
 
 
 
+      }
 
+      return /*#__PURE__*/(
+        _react.default.createElement("label", (0, _extends2.default)({ "data-tid": InputDataTids.root }, labelProps), /*#__PURE__*/
+        _react.default.createElement("span", { className: _Input.styles.sideContainer() },
+        _this.renderLeftIcon(),
+        _this.renderPrefix()), /*#__PURE__*/
 
+        _react.default.createElement("span", { className: _Input.styles.wrapper() },
+        input,
+        _this.renderPlaceholder()), /*#__PURE__*/
 
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.sideContainer(), _Input.styles.rightContainer()) },
+        _this.renderSuffix(),
+        _this.renderRightIcon())));
 
 
 
+    };_this.
 
 
 
@@ -433,10 +572,10 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
     };_this.
 
     handleChange = function (event) {
-      if (_polyfillPlaceholder.polyfillPlaceholder) {
+      if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
-          _this.setState({ polyfillPlaceholder: fieldIsEmpty });
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
+          _this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });
         }
       }
 
@@ -455,8 +594,7 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
 
 
       if (_this.props.selectAllOnFocus) {
-        // https://github.com/facebook/react/issues/7769
-        _this.input ? _this.selectAll() : _this.delaySelectAll();
+        _this.input && !_client.isIE11 ? _this.selectAll() : _this.delaySelectAll();
       }
 
       if (_this.props.onFocus) {
@@ -508,34 +646,46 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
       }
     };_this.
 
-    renderPrefix = function () {var
-      prefix = _this.props.prefix;
+    renderPrefix = function () {var _cx3;
+      var _this$props = _this.props,prefix = _this$props.prefix,disabled = _this$props.disabled;
 
       if (!prefix) {
         return null;
       }
 
-      return _react.default.createElement("span", { className: _Input.jsStyles.prefix(_this.theme) }, prefix);
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.prefix(_this.theme), (_cx3 = {}, _cx3[_Input.styles.prefixDisabled(_this.theme)] = disabled, _cx3)) }, prefix));
+
     };_this.
 
-    renderSuffix = function () {var
-      suffix = _this.props.suffix;
+    renderSuffix = function () {var _cx4;
+      var _this$props2 = _this.props,suffix = _this$props2.suffix,disabled = _this$props2.disabled;
 
       if (!suffix) {
         return null;
       }
 
-      return _react.default.createElement("span", { className: _Input.jsStyles.suffix(_this.theme) }, suffix);
-    };return _this;}var _proto = Input.prototype;_proto.componentDidMount = function componentDidMount() {if (_polyfillPlaceholder.polyfillPlaceholder) {this.setState({ polyfillPlaceholder: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();};_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (_polyfillPlaceholder.polyfillPlaceholder && !nextProps.value) {this.setState({ polyfillPlaceholder: true });}} /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     * @public
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     */;_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();} /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     * @public
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     */;_proto.blink = function blink() {var _this2 = this;if (this.blinkTimeout) {this.cancelBlink(function () {// trigger reflow to restart animation
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.suffix(_this.theme), (_cx4 = {}, _cx4[_Input.styles.suffixDisabled(_this.theme)] = disabled, _cx4)) }, suffix));
+
+    };return _this;}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) {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();} /**
+   * @public
+   */;_proto.blur = function blur() {(0, _invariant.default)(this.input, 'Cannot call "blur" because Input is not mounted');this.input.blur();} /**
+   * @public
+   */;_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 = window.setTimeout(_this2.cancelBlink, 150);});} /**
-                                                                                                                                                                                                        * @public
-                                                                                                                                                                                                        */;_proto.setSelectionRange = function setSelectionRange(start, end) {if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (document.activeElement !== this.input) {this.focus();}this.input.setSelectionRange(start, end);};_proto.render = function render() {var _this3 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return _this3.renderMain();});} /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * @public
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */;_proto.renderMain = function renderMain() {var _cn;var _this$props = this.props,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onKeyPress = _this$props.onKeyPress,onValueChange = _this$props.onValueChange,width = _this$props.width,error = _this$props.error,warning = _this$props.warning,leftIcon = _this$props.leftIcon,rightIcon = _this$props.rightIcon,borderless = _this$props.borderless,value = _this$props.value,align = _this$props.align,type = _this$props.type,mask = _this$props.mask,maskChar = _this$props.maskChar,alwaysShowMask = _this$props.alwaysShowMask,style = _this$props.style,className = _this$props.className,size = _this$props.size,placeholder = _this$props.placeholder,selectAllOnFocus = _this$props.selectAllOnFocus,disabled = _this$props.disabled,onUnexpectedInput = _this$props.onUnexpectedInput,prefix = _this$props.prefix,suffix = _this$props.suffix,formatChars = _this$props.formatChars,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "style", "className", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"]);var _this$state = this.state,blinking = _this$state.blinking,focused = _this$state.focused;var labelProps = { className: (0, _classnames.default)(_Input.jsStyles.root(this.theme), this.getSizeClassName(), (_cn = {}, _cn[_Input.jsStyles.borderless()] = !!borderless, _cn[_Input.jsStyles.focus(this.theme)] = focused, _cn[_Input.jsStyles.blink(this.theme)] = !!blinking, _cn[_Input.jsStyles.warning(this.theme)] = !!warning, _cn[_Input.jsStyles.error(this.theme)] = !!error, _cn[_Input.jsStyles.disabled(this.theme)] = !!disabled, _cn[_Input.jsStyles.focusFallback(this.theme)] = focused && (_utils.isIE11 || _utils.isEdge), _cn[_Input.jsStyles.warningFallback(this.theme)] = !!warning && (_utils.isIE11 || _utils.isEdge), _cn[_Input.jsStyles.errorFallback(this.theme)] = !!error && (_utils.isIE11 || _utils.isEdge), _cn)), style: { width: width }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver };var inputProps = (0, _extends2.default)({}, rest, { className: _Input.jsStyles.input(this.theme), value: value, onChange: this.handleChange, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onBlur: this.handleBlur, style: { textAlign: align }, ref: this.refInput, type: 'text', placeholder: !this.isMaskVisible && !_polyfillPlaceholder.polyfillPlaceholder ? placeholder : undefined, disabled: disabled });if (type === 'password') {inputProps.type = type;}var input = mask ? this.renderMaskedInput(inputProps, mask) : _react.default.createElement('input', inputProps);return _react.default.createElement("label", labelProps, _react.default.createElement("span", { className: _Input.jsStyles.sideContainer() }, this.renderLeftIcon(), this.renderPrefix()), _react.default.createElement("span", { className: _Input.jsStyles.wrapper() }, input, this.renderPlaceholder()), _react.default.createElement("span", { className: (0, _classnames.default)(_Input.jsStyles.sideContainer(), _Input.jsStyles.rightContainer()) }, this.renderSuffix(), this.renderRightIcon()));};_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return _react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar === undefined ? '_' : this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.props.size) {case 'large':return right ? _Input.jsStyles.rightIconLarge(this.theme) : _Input.jsStyles.leftIconLarge(this.theme);case 'medium':return right ? _Input.jsStyles.rightIconMedium(this.theme) : _Input.jsStyles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.jsStyles.rightIconSmall(this.theme) : _Input.jsStyles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {if (!icon) {return null;}if (icon instanceof Function) {return _react.default.createElement("span", { className: (0, _classnames.default)(_Input.jsStyles.icon(), sizeClassName) }, icon());}return _react.default.createElement("span", { className: (0, _classnames.default)((0, _classnames.default)(_Input.jsStyles.icon(), sizeClassName), _Input.jsStyles.useDefaultColor(this.theme), _Input.jsStyles.useDefaultColor(this.theme)) }, icon);};_proto.renderPlaceholder = function renderPlaceholder() {var placeholder = null;if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {placeholder = _react.default.createElement("div", { className: (0, _classnames.default)(_Input.jsStyles.placeholder(this.theme), _Input.jsStyles.placeholder(this.theme)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _ref, _ref2, _ref3;switch (this.props.size) {case 'large':return _ref = {}, _ref[_Input.jsStyles.sizeLarge(this.theme)] = true, _ref[_Input.jsStyles.sizeLargeFallback(this.theme)] = _utils.isIE11 || _utils.isEdge, _ref;case 'medium':return _ref2 = {}, _ref2[_Input.jsStyles.sizeMedium(this.theme)] = true, _ref2[_Input.jsStyles.sizeMediumFallback(this.theme)] = _utils.isIE11 || _utils.isEdge, _ref2;case 'small':default:return _ref3 = {}, _ref3[_Input.jsStyles.sizeSmall(this.theme)] = true, _ref3[_Input.jsStyles.sizeSmallFallback(this.theme)] = _utils.isIE11 || _utils.isEdge, _ref3;}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props2 = this.props,mask = _this$props2.mask,alwaysShowMask = _this$props2.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }]);return Input;}(_react.default.Component);exports.Input = Input;Input.__KONTUR_REACT_UI__ = 'Input';Input.defaultProps = { size: 'small' };
+        void (_this2.input && _this2.input.offsetWidth);_this2.blink();});return;}this.setState({ blinking: true }, function () {_this2.blinkTimeout = window.setTimeout(_this2.cancelBlink, 150);});} /**
+   * @public
+   * @param {number} start
+   * @param {number} end
+   */;_proto.setSelectionRange = function setSelectionRange(start, end) {var _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 (document.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) {setTimeout(function () {var _this3$input;(_this3$input = _this3.input) == null ? void 0 : _this3$input.setSelectionRange(start, end);}, 150);} else {var _this$input;(_this$input = this.input) == null ? void 0 : _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.props), _this4.renderMain);});};_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (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.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.getProps().size) {case 'large':return right ? _Input.styles.rightIconLarge(this.theme) : _Input.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input.styles.rightIconMedium(this.theme) : _Input.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.styles.rightIconSmall(this.theme) : _Input.styles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {var _cx5;if (!icon) {return null;}var disabled = this.props.disabled;var iconNode = icon instanceof Function ? icon() : icon;return /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.icon(), sizeClassName, _Input.styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[_Input.styles.iconFocus(this.theme)] = this.state.focused, _cx5[_Input.styles.iconDisabled()] = disabled, _cx5)) }, iconNode);};_proto.renderPlaceholder = function renderPlaceholder() {var disabled = this.props.disabled;var focused = this.state.focused;var placeholder = null;if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {var _cx6;placeholder = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Input.styles.placeholder(this.theme), (_cx6 = {}, _cx6[_Input.styles.placeholderDisabled(this.theme)] = disabled, _cx6[_Input.styles.placeholderFocus(this.theme)] = focused, _cx6)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)((_cx7 = {}, _cx7[_Input.styles.sizeLarge(this.theme)] = true, _cx7[_Input.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx7));case 'medium':return (0, _Emotion.cx)((_cx8 = {}, _cx8[_Input.styles.sizeMedium(this.theme)] = true, _cx8[_Input.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx8));case 'small':default:return (0, _Emotion.cx)((_cx9 = {}, _cx9[_Input.styles.sizeSmall(this.theme)] = true, _cx9[_Input.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props3 = this.props,mask = _this$props3.mask,alwaysShowMask = _this$props3.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }, { key: "canBeUsedWithMask", get: function get() {return maskForbiddenTypes.includes(this.getProps().type);} /**
+     * Работает с типами `text`, `password`, `tel`, `search`, `url`
+     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
+     * @public
+     */ }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = { size: 'small', type: 'text' }, _temp)) || _class;exports.Input = Input;