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

package/components/Input/Input/Input.js

@@ -1,18 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-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 _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-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";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 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;
-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.
+var _class, _Input; // TODO: Enable this rule in functional components.
 import invariant from 'invariant';
 import React, { createRef } from 'react';
 import warning from 'warning';
@@ -36,21 +27,25 @@ 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) {
-  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 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 maskForbiddenTypes = ['number', 'date', 'time'];
 export var maskAllowedTypes = inputTypes.filter(function (type) {
   return !maskForbiddenTypes.includes(type);
 });
-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 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 calculateClearCrossShowedState = function calculateClearCrossShowedState(_ref) {
   var showClearIcon = _ref.showClearIcon,
@@ -79,11 +74,10 @@ 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 = _callSuper(this, Input, [].concat(args));
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.getProps = createPropsGetter(Input.defaultProps);
     _this.selectAllId = null;
     _this.input = null;
@@ -98,7 +92,7 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
       }
       return calculateClearCrossShowedState({
         showClearIcon: _this.getProps().showClearIcon,
-        notEmptyValue: Boolean(((_this$input = _this.input) === null || _this$input === void 0 ? void 0 : _this$input.value) || hasInitialValue),
+        notEmptyValue: Boolean(((_this$input = _this.input) == null ? void 0 : _this$input.value) || hasInitialValue),
         focused: focused,
         hovered: hovered
       });
@@ -122,8 +116,8 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
       return _this._selectAll();
     };
     _this.delaySelectAll = function () {
-      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;
+      var _globalObject$request;
+      return _this.selectAllId = (_globalObject$request = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(_this._selectAll)) != null ? _globalObject$request : null;
     };
     _this._selectAll = function () {
       if (_this.input) {
@@ -132,8 +126,7 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
     };
     _this.cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        var _globalObject$cancelA;
-        (_globalObject$cancelA = globalObject.cancelAnimationFrame) === null || _globalObject$cancelA === void 0 || _globalObject$cancelA.call(globalObject, _this.selectAllId);
+        globalObject.cancelAnimationFrame == null || globalObject.cancelAnimationFrame(_this.selectAllId);
         _this.selectAllId = null;
       }
     };
@@ -145,6 +138,7 @@ 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,
@@ -178,12 +172,12 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
         ariaLabel = props['aria-label'],
         element = props.element,
         showClearIcon = props.showClearIcon,
-        rest = _objectWithoutProperties(props, _excluded);
+        rest = _objectWithoutPropertiesLoose(props, _excluded);
       var focused = _this.state.focused;
       var labelProps = {
-        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))),
+        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)),
         'aria-controls': ariaControls,
-        style: _objectSpread({
+        style: _extends({
           width: width
         }, corners),
         onMouseEnter: _this.handleMouseEnter,
@@ -191,8 +185,8 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
         onMouseOver: onMouseOver,
         ref: _this.labelRef
       };
-      var inputProps = _objectSpread(_objectSpread({}, rest), {}, {
-        className: cx(styles.input(_this.theme), _defineProperty(_defineProperty({}, styles.inputFocus(_this.theme), focused), styles.inputDisabled(_this.theme), disabled)),
+      var inputProps = _extends({}, rest, {
+        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
         value: value,
         role: role,
         onChange: _this.handleChange,
@@ -347,8 +341,10 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
         _this.props.onValueChange(value);
       }
     };
-    _this.handleUnexpectedInput = function () {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.value || '';
+    _this.handleUnexpectedInput = function (value) {
+      if (value === void 0) {
+        value = _this.props.value || '';
+      }
       if (_this.props.onUnexpectedInput) {
         _this.props.onUnexpectedInput(value);
       } else {
@@ -363,12 +359,11 @@ 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 !== void 0 && _getRootNode.contains(event.relatedTarget)) {
+      if (showClearIcon && (_getRootNode = getRootNode(_this)) != null && _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
@@ -377,151 +372,129 @@ export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/fu
           focused: false,
           clearCrossShowed: clearCrossShowed
         });
-        (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 || _this$props$onBlur.call(_this$props, event);
+        _this.props.onBlur == null || _this.props.onBlur(event);
       }
     };
     return _this;
   }
-  _inherits(Input, _React$Component);
-  return _createClass(Input, [{
-    key: "outputMaskError",
-    value: function outputMaskError() {
-      warning(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
+  _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();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: 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;
     }
-  }, {
-    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);
-      }
+    if (!this.input) {
+      throw new Error('Cannot call "setSelectionRange" on unmounted Input');
     }
-  }, {
+    if (((_globalObject$documen = 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.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);
+    }
+  };
+  _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));
+    }
+  };
+  return _createClass(Input, [{
     key: "isMaskVisible",
     get: function get() {
-      var _this$props2 = this.props,
-        mask = _this$props2.mask,
-        alwaysShowMask = _this$props2.alwaysShowMask;
+      var _this$props = this.props,
+        mask = _this$props.mask,
+        alwaysShowMask = _this$props.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',