@skbkontur/react-ui 5.6.7 → 5.6.9-5e213.0

package/components/Input/Input/Input.js

@@ -1,9 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 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 _class, _Input;
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+} // TODO: Enable this rule in functional components.
 import invariant from 'invariant';
 import React, { createRef } from 'react';
 import warning from 'warning';
@@ -27,25 +36,21 @@ import { InputLayout } from "../InputLayout/InputLayout";
 import { PolyfillPlaceholder } from "../InputLayout/PolyfillPlaceholder";
 export var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
 export var selectionAllowedTypes = ['text', 'password', 'tel', 'search', 'url'];
-export 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.";
+export var selectionErrorMessage = function selectionErrorMessage(type) {
+  var allowedTypes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : selectionAllowedTypes;
+  return "<Input />. Selection is not supported by the type \"".concat(type, "\". Types that support selection: ").concat(allowedTypes.map(function (i) {
+    return "\"".concat(i, "\"");
+  }).join(', '), ". Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.");
 };
 export var maskForbiddenTypes = ['number', 'date', 'time'];
 export var maskAllowedTypes = inputTypes.filter(function (type) {
   return !maskForbiddenTypes.includes(type);
 });
-export 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(', ') + ".";
+export var maskErrorMessage = function maskErrorMessage(type) {
+  var allowedTypes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : maskAllowedTypes;
+  return "<Input />. Prop \"mask\" does not support type \"".concat(type, "\". Supported types: ").concat(allowedTypes.map(function (i) {
+    return "\"".concat(i, "\"");
+  }).join(', '), ".");
 };
 export var calculateClearCrossShowedState = function calculateClearCrossShowedState(_ref) {
   var showClearIcon = _ref.showClearIcon,
@@ -74,10 +79,11 @@ export var InputDataTids = {
 export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/function (_React$Component) {
   function Input() {
     var _this;
+    _classCallCheck(this, Input);
     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 = _callSuper(this, Input, [].concat(args));
     _this.getProps = createPropsGetter(Input.defaultProps);
     _this.selectAllId = null;
     _this.input = null;
@@ -92,7 +98,7 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
       }
       return calculateClearCrossShowedState({
         showClearIcon: _this.getProps().showClearIcon,
-        notEmptyValue: Boolean(((_this$input = _this.input) == null ? void 0 : _this$input.value) || hasInitialValue),
+        notEmptyValue: Boolean(((_this$input = _this.input) === null || _this$input === void 0 ? void 0 : _this$input.value) || hasInitialValue),
         focused: focused,
         hovered: hovered
       });
@@ -116,8 +122,8 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
       return _this._selectAll();
     };
     _this.delaySelectAll = function () {
-      var _globalObject$request;
-      return _this.selectAllId = (_globalObject$request = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(_this._selectAll)) != null ? _globalObject$request : null;
+      var _globalObject$request, _globalObject$request2;
+      return _this.selectAllId = (_globalObject$request = (_globalObject$request2 = globalObject.requestAnimationFrame) === null || _globalObject$request2 === void 0 ? void 0 : _globalObject$request2.call(globalObject, _this._selectAll)) !== null && _globalObject$request !== void 0 ? _globalObject$request : null;
     };
     _this._selectAll = function () {
       if (_this.input) {
@@ -126,7 +132,8 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
     };
     _this.cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        globalObject.cancelAnimationFrame == null || globalObject.cancelAnimationFrame(_this.selectAllId);
+        var _globalObject$cancelA;
+        (_globalObject$cancelA = globalObject.cancelAnimationFrame) === null || _globalObject$cancelA === void 0 || _globalObject$cancelA.call(globalObject, _this.selectAllId);
         _this.selectAllId = null;
       }
     };
@@ -138,7 +145,6 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
       React.createElement('input', inputProps);
     };
     _this.renderMain = function (props) {
-      var _cx, _cx2;
       var onMouseEnter = props.onMouseEnter,
         onMouseLeave = props.onMouseLeave,
         onMouseOver = props.onMouseOver,
@@ -172,12 +178,12 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
         ariaLabel = props['aria-label'],
         element = props.element,
         showClearIcon = props.showClearIcon,
-        rest = _objectWithoutPropertiesLoose(props, _excluded);
+        rest = _objectWithoutProperties(props, _excluded);
       var focused = _this.state.focused;
       var labelProps = {
-        className: cx(styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[styles.focus(_this.theme)] = focused && !warning && !error, _cx[styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[styles.borderless()] = borderless && !focused, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.warning(_this.theme)] = warning, _cx[styles.error(_this.theme)] = error, _cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _cx)),
+        className: cx(styles.root(_this.theme), _this.getSizeClassName(), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.focus(_this.theme), focused && !warning && !error), styles.hovering(_this.theme), !focused && !disabled && !warning && !error && !borderless), styles.borderless(), borderless && !focused), styles.disabled(_this.theme), disabled), styles.warning(_this.theme), warning), styles.error(_this.theme), error), styles.focusFallback(_this.theme), focused && (isIE11 || isEdge)), styles.warningFallback(_this.theme), warning && (isIE11 || isEdge)), styles.errorFallback(_this.theme), error && (isIE11 || isEdge))),
         'aria-controls': ariaControls,
-        style: _extends({
+        style: _objectSpread({
           width: width
         }, corners),
         onMouseEnter: _this.handleMouseEnter,
@@ -185,8 +191,8 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
         onMouseOver: onMouseOver,
         ref: _this.labelRef
       };
-      var inputProps = _extends({}, rest, {
-        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
+      var inputProps = _objectSpread(_objectSpread({}, rest), {}, {
+        className: cx(styles.input(_this.theme), _defineProperty(_defineProperty({}, styles.inputFocus(_this.theme), focused), styles.inputDisabled(_this.theme), disabled)),
         value: value,
         role: role,
         onChange: _this.handleChange,
@@ -341,10 +347,8 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
         _this.props.onValueChange(value);
       }
     };
-    _this.handleUnexpectedInput = function (value) {
-      if (value === void 0) {
-        value = _this.props.value || '';
-      }
+    _this.handleUnexpectedInput = function () {
+      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.value || '';
       if (_this.props.onUnexpectedInput) {
         _this.props.onUnexpectedInput(value);
       } else {
@@ -359,11 +363,12 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
     _this.handleBlur = function (event) {
       var _getRootNode;
       var showClearIcon = _this.props.showClearIcon;
-      if (showClearIcon && (_getRootNode = getRootNode(_this)) != null && _getRootNode.contains(event.relatedTarget)) {
+      if (showClearIcon && (_getRootNode = getRootNode(_this)) !== null && _getRootNode !== void 0 && _getRootNode.contains(event.relatedTarget)) {
         _this.setState({
           focused: false
         });
       } else {
+        var _this$props$onBlur, _this$props;
         var clearCrossShowed = _this.getClearCrossShowed({
           focused: false,
           hovered: _this.state.hovered
@@ -372,129 +377,151 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
           focused: false,
           clearCrossShowed: clearCrossShowed
         });
-        _this.props.onBlur == null || _this.props.onBlur(event);
+        (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 || _this$props$onBlur.call(_this$props, event);
       }
     };
     return _this;
   }
-  _inheritsLoose(Input, _React$Component);
-  var _proto = Input.prototype;
-  _proto.outputMaskError = function outputMaskError() {
-    warning(!(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() {
-    this.cancelDelayedSelectAll();
-  } /** Программно устанавливает фокус на поле.
-    * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
-    * @public
-    */;
-  _proto.focus = function focus() {
-    invariant(this.input, 'Cannot call "focus" because Input is not mounted');
-    this.input.focus();
-  } /** Программно снимает фокус с поля.
-    * @public
-    */;
-  _proto.blur = function blur() {
-    invariant(this.input, 'Cannot call "blur" because Input is not mounted');
-    this.input.blur();
-  } /** Возвращает DOM-узел поля ввода.
-    * @public
-    */;
-  _proto.getNode = function getNode() {
-    return this.input;
-  } /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
-    * @public
-    */;
-  _proto.blink = function blink() {
-    _blink({
-      el: this.labelRef.current,
-      blinkColor: this.theme.inputBlinkColor
-    });
-  } /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
-    * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
-    * @public
-    * @param {number} start
-    * @param {number} end
-    */;
-  _proto.setSelectionRange = function setSelectionRange(start, end) {
-    var _globalObject$documen,
-      _this$props$value,
-      _this2 = 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)) {
-      warning(false, selectionErrorMessage(this.getProps().type));
-      return;
-    }
-    if (!this.input) {
-      throw new Error('Cannot call "setSelectionRange" on unmounted Input');
+  _inherits(Input, _React$Component);
+  return _createClass(Input, [{
+    key: "outputMaskError",
+    value: function outputMaskError() {
+      warning(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));
     }
-    if (((_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {
-      this.focus();
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.outputMaskError();
     }
-    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.setTimeout(function () {
-        var _this2$input;
-        (_this2$input = _this2.input) == null || _this2$input.setSelectionRange(start, end);
-      }, 150);
-    } else {
-      var _this$input2;
-      (_this$input2 = this.input) == null || _this$input2.setSelectionRange(start, end);
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.type !== prevProps.type || this.props.mask !== prevProps.mask) {
+        this.outputMaskError();
+      }
     }
-  };
-  _proto.render = function render() {
-    var _this3 = this;
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this3.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this3.setRootNode
-      }, _this3.getProps()), _this3.renderMain);
-    });
-  };
-  _proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {
-    return /*#__PURE__*/React.createElement(InternalMaskedInput, _extends({}, 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.size) {
-      case 'large':
-        return cx((_cx3 = {}, _cx3[styles.sizeLarge(this.theme)] = true, _cx3[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _cx3));
-      case 'medium':
-        return cx((_cx4 = {}, _cx4[styles.sizeMedium(this.theme)] = true, _cx4[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _cx4));
-      case 'small':
-      default:
-        return cx((_cx5 = {}, _cx5[styles.sizeSmall(this.theme)] = true, _cx5[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx5));
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cancelDelayedSelectAll();
+    } /** Программно устанавливает фокус на поле.
+      * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
+      * @public
+      */
+  }, {
+    key: "focus",
+    value: function focus() {
+      invariant(this.input, 'Cannot call "focus" because Input is not mounted');
+      this.input.focus();
+    } /** Программно снимает фокус с поля.
+      * @public
+      */
+  }, {
+    key: "blur",
+    value: function blur() {
+      invariant(this.input, 'Cannot call "blur" because Input is not mounted');
+      this.input.blur();
+    } /** Возвращает DOM-узел поля ввода.
+      * @public
+      */
+  }, {
+    key: "getNode",
+    value: function getNode() {
+      return this.input;
+    } /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
+      * @public
+      */
+  }, {
+    key: "blink",
+    value: function blink() {
+      _blink({
+        el: this.labelRef.current,
+        blinkColor: this.theme.inputBlinkColor
+      });
+    } /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
+      * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
+      * @public
+      * @param {number} start
+      * @param {number} end
+      */
+  }, {
+    key: "setSelectionRange",
+    value: function setSelectionRange(start, end) {
+      var _globalObject$documen,
+        _this$props$value,
+        _this2 = 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)) {
+        warning(false, selectionErrorMessage(this.getProps().type));
+        return;
+      }
+      if (!this.input) {
+        throw new Error('Cannot call "setSelectionRange" on unmounted Input');
+      }
+      if (((_globalObject$documen = globalObject.document) === null || _globalObject$documen === void 0 ? void 0 : _globalObject$documen.activeElement) !== this.input) {
+        this.focus();
+      }
+      if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.length) < this.props.mask.length) {
+        globalObject.setTimeout(function () {
+          var _this2$input;
+          (_this2$input = _this2.input) === null || _this2$input === void 0 || _this2$input.setSelectionRange(start, end);
+        }, 150);
+      } else {
+        var _this$input2;
+        (_this$input2 = this.input) === null || _this$input2 === void 0 || _this$input2.setSelectionRange(start, end);
+      }
     }
-  };
-  return _createClass(Input, [{
+  }, {
     key: "isMaskVisible",
     get: function get() {
-      var _this$props = this.props,
-        mask = _this$props.mask,
-        alwaysShowMask = _this$props.alwaysShowMask;
+      var _this$props2 = this.props,
+        mask = _this$props2.mask,
+        alwaysShowMask = _this$props2.alwaysShowMask;
       var focused = this.state.focused;
       return Boolean(mask && (focused || alwaysShowMask));
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this3.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this3.setRootNode
+        }, _this3.getProps()), _this3.renderMain);
+      });
+    }
   }, {
     key: "canBeUsedWithMask",
     get: function get() {
       return maskForbiddenTypes.includes(this.getProps().type);
     }
+  }, {
+    key: "renderMaskedInput",
+    value: function renderMaskedInput(inputProps, mask) {
+      return /*#__PURE__*/React.createElement(InternalMaskedInput, _extends({}, 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
+      }));
+    }
+  }, {
+    key: "getSizeClassName",
+    value: function getSizeClassName() {
+      switch (this.size) {
+        case 'large':
+          return cx(_defineProperty(_defineProperty({}, styles.sizeLarge(this.theme), true), styles.sizeLargeFallback(this.theme), isIE11 || isEdge));
+        case 'medium':
+          return cx(_defineProperty(_defineProperty({}, styles.sizeMedium(this.theme), true), styles.sizeMediumFallback(this.theme), isIE11 || isEdge));
+        case 'small':
+        default:
+          return cx(_defineProperty(_defineProperty({}, styles.sizeSmall(this.theme), true), styles.sizeSmallFallback(this.theme), isIE11 || isEdge));
+      }
+    }
   }]);
 }(React.Component), _Input.__KONTUR_REACT_UI__ = 'Input', _Input.displayName = 'Input', _Input.defaultProps = {
   type: 'text',