@skbkontur/react-ui 0.0.0-b408db2ccf → 0.0.0-b4710fb038

package/cjs/components/Input/Input.js

@@ -1,7 +1,9 @@
-"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"));
+
 var _globalObject = require("@skbkontur/global-object");
 
 var _client = require("../../lib/client");
@@ -11,25 +13,24 @@ var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
 var _InternalMaskedInput = require("../../internal/InternalMaskedInput");
 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 _utils = require("../../lib/utils");
 
 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'];
 
-/**
- * @deprecated use SizeProp
- */
 
 
 
@@ -51,6 +52,30 @@ 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);
+  }
+};
+
+
 
 
 
@@ -166,14 +191,24 @@ var maskErrorMessage = exports.maskErrorMessage = function maskErrorMessage(type
 
 
 var InputDataTids = exports.InputDataTids = {
-  root: 'Input__root'
+  root: 'Input__root',
+  clearCross: 'Input__clearCross'
 };
 
 
 
 /**
+ * Поле ввода `Input` дает возможность указать значение с помощью клавиатуры.
+ *
+ * Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.
+ *
+ *  Если вводимое значение имеет определенный формат, используйте специальную версию поля:
+ * * Поле с паролем PasswordInput.
+ * * Поле с валютой CurrencyInput.
+ * * Поле с маской MaskedInput.
+ * * Автополе FxInput.
+ *
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
- *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
  */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.
@@ -185,21 +220,47 @@ 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)
+      })
+    };
+
+
 
 
 
@@ -321,15 +382,18 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
      * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
      * @public
      */_this.
-    selectAll = function () {
+    selectAll = function () {return _this._selectAll();};_this.
+
+    delaySelectAll = function () {var _globalObject$request;
+      return _this.selectAllId = (_globalObject$request = _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(_this._selectAll)) != null ? _globalObject$request : null;
+    };_this.
+
+    _selectAll = function () {
       if (_this.input) {
         _this.setSelectionRange(0, _this.input.value.length);
       }
     };_this.
 
-    delaySelectAll = function () {var _globalObject$request;return (
-        _this.selectAllId = (_globalObject$request = _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(_this.selectAll)) != null ? _globalObject$request : null);};_this.
-
     cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
         _globalObject.globalObject.cancelAnimationFrame == null || _globalObject.globalObject.cancelAnimationFrame(_this.selectAllId);
@@ -396,7 +460,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;
 
@@ -415,8 +480,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
       };
 
@@ -446,45 +511,34 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
       _react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus }, _this.getInput(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 } },
+      var getRightIcon = function getRightIcon() {
+        return _this.state.clearCrossShowed ? /*#__PURE__*/
+        _react.default.createElement(_ClearCrossIcon.ClearCrossIcon, { "data-tid": InputDataTids.clearCross, size: size, onClick: _this.handleClearInput }) :
 
-          input,
-          _this.state.needsPolyfillPlaceholder && /*#__PURE__*/
-          _react.default.createElement(_PolyfillPlaceholder.PolyfillPlaceholder, {
-            isMaskVisible: _this.isMaskVisible,
-            value: value,
-            defaultValue: _this.props.defaultValue,
-            align: align },
+        rightIcon;
 
-          placeholder
-          )
-
-          ));
-
-      }
+      };
 
       return /*#__PURE__*/(
-        _react.default.createElement("label", (0, _extends2.default)({ "data-tid": InputDataTids.root }, labelProps), /*#__PURE__*/
-        _react.default.createElement("span", { className: _Input2.styles.sideContainer() },
-        _this.renderLeftIcon(),
-        _this.renderPrefix()
-        ), /*#__PURE__*/
-        _react.default.createElement("span", { className: _Input2.styles.wrapper() },
+        _react.default.createElement(_InputLayout.InputLayout, {
+          leftIcon: leftIcon,
+          rightIcon: getRightIcon(),
+          prefix: prefix,
+          suffix: suffix,
+          labelProps: labelProps,
+          context: { disabled: Boolean(disabled), focused: focused, size: size } },
+
         input,
-        _this.renderPlaceholder()
-        ), /*#__PURE__*/
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input2.styles.sideContainer(), _Input2.styles.rightContainer()) },
-        _this.renderSuffix(),
-        _this.renderRightIcon()
+        _this.state.needsPolyfillPlaceholder && /*#__PURE__*/
+        _react.default.createElement(_PolyfillPlaceholder.PolyfillPlaceholder, {
+          isMaskVisible: _this.isMaskVisible,
+          value: value,
+          defaultValue: _this.props.defaultValue,
+          align: align },
+
+        placeholder
         )
+
         ));
 
     };_this.
@@ -504,73 +558,6 @@ Input = exports.Input = (0, _rootNode.rootNode)(_class = (_Input = /*#__PURE__*/
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -600,6 +587,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 === '';
@@ -615,11 +614,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) {
@@ -669,33 +692,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);
-    };_this.
-
-    renderPrefix = function () {var _cx3;
-      var _this$props = _this.props,prefix = _this$props.prefix,disabled = _this$props.disabled;
-
-      if (!prefix) {
-        return null;
-      }
-
-      return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input2.styles.prefix(_this.theme), (_cx3 = {}, _cx3[_Input2.styles.prefixDisabled(_this.theme)] = disabled, _cx3)) }, prefix));
-
-    };_this.
-
-    renderSuffix = function () {var _cx4;
-      var _this$props2 = _this.props,suffix = _this$props2.suffix,disabled = _this$props2.disabled;
-
-      if (!suffix) {
-        return null;
+    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 /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input2.styles.suffix(_this.theme), (_cx4 = {}, _cx4[_Input2.styles.suffixDisabled(_this.theme)] = disabled, _cx4)) }, suffix));
-
     };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();} /**
@@ -712,4 +720,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.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.getProps().size) {case 'large':return right ? _Input2.styles.rightIconLarge(this.theme) : _Input2.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input2.styles.rightIconMedium(this.theme) : _Input2.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input2.styles.rightIconSmall(this.theme) : _Input2.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 = (0, _utils.isFunction)(icon) ? icon() : icon;return /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Input2.styles.icon(), sizeClassName, _Input2.styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[_Input2.styles.iconFocus(this.theme)] = this.state.focused, _cx5[_Input2.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)(_Input2.styles.placeholder(this.theme), (_cx6 = {}, _cx6[_Input2.styles.placeholderDisabled(this.theme)] = disabled, _cx6[_Input2.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[_Input2.styles.sizeLarge(this.theme)] = true, _cx7[_Input2.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx7));case 'medium':return (0, _Emotion.cx)((_cx8 = {}, _cx8[_Input2.styles.sizeMedium(this.theme)] = true, _cx8[_Input2.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx8));case 'small':default:return (0, _Emotion.cx)((_cx9 = {}, _cx9[_Input2.styles.sizeSmall(this.theme)] = true, _cx9[_Input2.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));}};return (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);} }]);}(_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;