@megafon/ui-core 6.0.0-beta.3 → 6.0.0

package/dist/lib/components/TextField/TextField.js

@@ -1,30 +1,51 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Verification = exports.TextareaTypes = exports.MinTextareaHeight = void 0;
+exports["default"] = exports.MinTextareaHeight = exports.TextareaTypes = exports.Verification = void 0;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-require("core-js/modules/es.array.concat.js");
+
 require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
+
 require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.regexp.exec.js");
+
 require("core-js/modules/es.string.replace.js");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.object.values.js");
+
+var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-var _reactInputMask = _interopRequireDefault(require("@mona-health/react-input-mask"));
+
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
 var _countGraphemes = _interopRequireDefault(require("./utils/countGraphemes"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-/* eslint-disable react/no-multi-comp */
 
+/* eslint-disable react/no-multi-comp */
 var Hide = function Hide(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -32,6 +53,7 @@ var Hide = function Hide(props) {
     d: "M5.82 17.45l-1.65 2.31L5.8 21l1.65-2.3a15.9 15.9 0 002.67 1.3l-.87 2.71 1.92.63.86-2.7a15.64 15.64 0 003 .48V24h2v-2.84a15.64 15.64 0 003-.48l.86 2.7 1.92-.63-.93-2.75a15.9 15.9 0 002.67-1.38L26.2 21l1.63-1.2-1.65-2.31a16.16 16.16 0 001.82-1.8l-1.51-1.35a13.8 13.8 0 01-21 0L4 15.69a16.15 16.15 0 001.82 1.76zM23 11.92l1-1.77a16 16 0 00-16 0l1 1.77a14 14 0 0114 0z"
   }));
 };
+
 var Show = function Show(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -41,6 +63,7 @@ var Show = function Show(props) {
     d: "M20 16a4 4 0 10-4 4 4 4 0 004-4zm-6 0a2 2 0 112 2 2 2 0 01-2-2z"
   }));
 };
+
 var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -49,6 +72,7 @@ var ClearIcon = function ClearIcon(props) {
     d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
   }));
 };
+
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -56,6 +80,7 @@ var CheckedIcon = function CheckedIcon(props) {
     d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
   }));
 };
+
 var ResizeIcon = function ResizeIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 12,
@@ -64,6 +89,7 @@ var ResizeIcon = function ResizeIcon(props) {
     d: "M1 11L11 1M7 11l4-4"
   }));
 };
+
 var TEXTAREA_MAX_HEIGHT = 144;
 var DEFAULT_LABEL_TOP_POSITION = 16;
 var DEFAULT_ROW_COUNT = 3;
@@ -74,103 +100,115 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
-var Verification = exports.Verification = {
+var Verification = {
   VALID: 'valid',
   ERROR: 'error'
 };
-var TextareaTypes = exports.TextareaTypes = {
+exports.Verification = Verification;
+var TextareaTypes = {
   FIXED: 'fixed',
   FLEXIBLE: 'flexible'
 };
-var MinTextareaHeight = exports.MinTextareaHeight = {
+exports.TextareaTypes = TextareaTypes;
+var MinTextareaHeight = {
   ONE_ROW: ROW_HEIGHT,
   THREE_ROWS: ROW_HEIGHT * DEFAULT_ROW_COUNT
 };
+exports.MinTextareaHeight = MinTextareaHeight;
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-field');
+
 var TextField = function TextField(_ref) {
   var className = _ref.className,
-    customIcon = _ref.customIcon,
-    disabled = _ref.disabled,
-    _ref$hideIcon = _ref.hideIcon,
-    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
-    id = _ref.id,
-    label = _ref.label,
-    mask = _ref.mask,
-    maskChar = _ref.maskChar,
-    maxLength = _ref.maxLength,
-    graphemesCounter = _ref.graphemesCounter,
-    symbolCounter = _ref.symbolCounter,
-    _ref$textarea = _ref.textarea,
-    textarea = _ref$textarea === void 0 ? false : _ref$textarea,
-    name = _ref.name,
-    _ref$hidePlaceholder = _ref.hidePlaceholder,
-    hidePlaceholder = _ref$hidePlaceholder === void 0 ? false : _ref$hidePlaceholder,
-    placeholder = _ref.placeholder,
-    required = _ref.required,
-    _ref$isControlled = _ref.isControlled,
-    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
-    _ref$minTextareaHeigh = _ref.minTextareaHeight,
-    minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.THREE_ROWS : _ref$minTextareaHeigh,
-    _ref$disableEnterLine = _ref.disableEnterLineBreak,
-    disableEnterLineBreak = _ref$disableEnterLine === void 0 ? false : _ref$disableEnterLine,
-    _ref$hideResizeButton = _ref.hideResizeButton,
-    hideResizeButton = _ref$hideResizeButton === void 0 ? false : _ref$hideResizeButton,
-    onBlur = _ref.onBlur,
-    onChange = _ref.onChange,
-    onBeforeMaskChange = _ref.onBeforeMaskChange,
-    onIconClick = _ref.onIconClick,
-    onFocus = _ref.onFocus,
-    onKeyUp = _ref.onKeyUp,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'text' : _ref$type,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    verification = _ref.verification,
-    _ref$noticeText = _ref.noticeText,
-    noticeText = _ref$noticeText === void 0 ? '' : _ref$noticeText,
-    inputRef = _ref.inputRef,
-    inputMode = _ref.inputMode,
-    autoComplete = _ref.autoComplete,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isPasswordHidden = _useState2[0],
-    setPasswordHidden = _useState2[1];
-  var _useState3 = (0, _react.useState)(value),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
-  var _useState5 = (0, _react.useState)(minTextareaHeight),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    textareaHeight = _useState6[0],
-    setTextareaHeight = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    isMaxLimitExceeded = _useState8[0],
-    setIsMaxLimitExceeded = _useState8[1];
-  var _useState9 = (0, _react.useState)(noticeText),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    currentNoticeText = _useState10[0],
-    setCurrentNoticeText = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    isTextareaResizeFocused = _useState12[0],
-    setIsTextareaResizeFocused = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
-    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    isTextareaResized = _useState14[0],
-    setIsTextareaResized = _useState14[1];
-  var fieldNode = (0, _react.useRef)();
-  var labelRef = (0, _react.useRef)(null);
-  var resizerRef = (0, _react.useRef)(null);
-  var isPasswordType = (0, _react.useMemo)(function () {
+      customIcon = _ref.customIcon,
+      disabled = _ref.disabled,
+      _ref$hideIcon = _ref.hideIcon,
+      hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+      id = _ref.id,
+      label = _ref.label,
+      mask = _ref.mask,
+      maskChar = _ref.maskChar,
+      maxLength = _ref.maxLength,
+      graphemesCounter = _ref.graphemesCounter,
+      symbolCounter = _ref.symbolCounter,
+      _ref$textarea = _ref.textarea,
+      textarea = _ref$textarea === void 0 ? false : _ref$textarea,
+      name = _ref.name,
+      _ref$hidePlaceholder = _ref.hidePlaceholder,
+      hidePlaceholder = _ref$hidePlaceholder === void 0 ? false : _ref$hidePlaceholder,
+      placeholder = _ref.placeholder,
+      required = _ref.required,
+      _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$minTextareaHeigh = _ref.minTextareaHeight,
+      minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.THREE_ROWS : _ref$minTextareaHeigh,
+      _ref$disableEnterLine = _ref.disableEnterLineBreak,
+      disableEnterLineBreak = _ref$disableEnterLine === void 0 ? false : _ref$disableEnterLine,
+      _ref$hideResizeButton = _ref.hideResizeButton,
+      hideResizeButton = _ref$hideResizeButton === void 0 ? false : _ref$hideResizeButton,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onBeforeMaskChange = _ref.onBeforeMaskChange,
+      onIconClick = _ref.onIconClick,
+      onFocus = _ref.onFocus,
+      onKeyUp = _ref.onKeyUp,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      verification = _ref.verification,
+      _ref$noticeText = _ref.noticeText,
+      noticeText = _ref$noticeText === void 0 ? '' : _ref$noticeText,
+      inputRef = _ref.inputRef,
+      inputMode = _ref.inputMode,
+      autoComplete = _ref.autoComplete,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useState = (0, React.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isPasswordHidden = _useState2[0],
+      setPasswordHidden = _useState2[1];
+
+  var _useState3 = (0, React.useState)(value),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = (0, React.useState)(minTextareaHeight),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      textareaHeight = _useState6[0],
+      setTextareaHeight = _useState6[1];
+
+  var _useState7 = (0, React.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isMaxLimitExceeded = _useState8[0],
+      setIsMaxLimitExceeded = _useState8[1];
+
+  var _useState9 = (0, React.useState)(noticeText),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      currentNoticeText = _useState10[0],
+      setCurrentNoticeText = _useState10[1];
+
+  var _useState11 = (0, React.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isTextareaResizeFocused = _useState12[0],
+      setIsTextareaResizeFocused = _useState12[1];
+
+  var _useState13 = (0, React.useState)(false),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      isTextareaResized = _useState14[0],
+      setIsTextareaResized = _useState14[1];
+
+  var fieldNode = (0, React.useRef)();
+  var labelRef = (0, React.useRef)(null);
+  var resizerRef = (0, React.useRef)(null);
+  var isPasswordType = (0, React.useMemo)(function () {
     return type === 'password';
   }, [type]);
-  var isVisiblePassword = (0, _react.useMemo)(function () {
+  var isVisiblePassword = (0, React.useMemo)(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
   var hasValue = isControlled ? !!value : !!inputValue;
@@ -179,45 +217,53 @@ var TextField = function TextField(_ref) {
   var hasValueForClear = hasValue && !isPasswordType && !customIcon && !isValidVerification;
   var hasClearIcon = !disabled && (hasValueForClear || isErrorVerification);
   var actualPlaceholder = placeholder || DEFAULT_PLACEHOLDERS[type];
-  var checkSymbolMaxLimit = (0, _react.useCallback)(function () {
+  var checkSymbolMaxLimit = (0, React.useCallback)(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
     if (!symbolCounter) {
       return;
     }
+
     var countValue = graphemesCounter ? (0, _countGraphemes["default"])(String(textareaValue)) : String(textareaValue).length;
     setIsMaxLimitExceeded(symbolCounter < countValue);
   }, [graphemesCounter, symbolCounter]);
-  (0, _react.useEffect)(function () {
+  (0, React.useEffect)(function () {
     if (!textarea || !fieldNode.current || isTextareaResized) {
       return;
     }
+
     fieldNode.current.style.height = "".concat(minTextareaHeight, "px");
     var scrollHeight = fieldNode.current.scrollHeight;
+
     var _window$getComputedSt = window.getComputedStyle(fieldNode.current),
-      paddingTop = _window$getComputedSt.paddingTop,
-      paddingBottom = _window$getComputedSt.paddingBottom;
+        paddingTop = _window$getComputedSt.paddingTop,
+        paddingBottom = _window$getComputedSt.paddingBottom;
+
     var innerHeight = scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
+
     if (innerHeight >= TEXTAREA_MAX_HEIGHT) {
       fieldNode.current.style.height = "".concat(TEXTAREA_MAX_HEIGHT, "px");
     } else {
       fieldNode.current.style.height = "".concat(innerHeight, "px");
     }
   }, [isTextareaResized, minTextareaHeight, inputValue, textarea]);
-  (0, _react.useEffect)(function () {
+  (0, React.useEffect)(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit, isControlled]);
-  (0, _react.useEffect)(function () {
+  (0, React.useEffect)(function () {
     noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
-  (0, _react.useEffect)(function () {
+  (0, React.useEffect)(function () {
     if (!resizerRef.current || textarea !== TextareaTypes.FLEXIBLE) {
       return;
     }
+
     var handleStartResize = function handleStartResize(downEvent) {
       if (!fieldNode.current) {
         return;
       }
+
       setIsTextareaResizeFocused(true);
       downEvent.preventDefault();
       var originalHeight = parseFloat(getComputedStyle(fieldNode.current).getPropertyValue('height').replace('px', ''));
@@ -229,6 +275,7 @@ var TextField = function TextField(_ref) {
         setTextareaHeight(updatedHeight);
         setIsTextareaResized(true);
       }, _throttleTime["default"].resizeTextarea);
+
       var handleResizeCancel = function handleResizeCancel() {
         setIsTextareaResizeFocused(false);
         window.removeEventListener('mousemove', handleResize);
@@ -236,45 +283,57 @@ var TextField = function TextField(_ref) {
         window.removeEventListener('mouseup', handleResizeCancel);
         window.removeEventListener('touchend', handleResizeCancel);
       };
+
       window.addEventListener('mousemove', handleResize);
       window.addEventListener('touchmove', handleResize);
       window.addEventListener('mouseup', handleResizeCancel);
       window.addEventListener('touchend', handleResizeCancel);
     };
+
     resizerRef.current.addEventListener('mousedown', handleStartResize);
     resizerRef.current.addEventListener('touchstart', handleStartResize);
   }, [textarea, minTextareaHeight]);
-  var togglePasswordHiding = (0, _react.useCallback)(function () {
+  var togglePasswordHiding = (0, React.useCallback)(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;
     });
   }, []);
+
   var handleInputChange = function handleInputChange(e) {
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
-  var handleNoticeTransitionEnd = (0, _react.useCallback)(function () {
+
+  var handleNoticeTransitionEnd = (0, React.useCallback)(function () {
     !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
+
   var handleTextareaScroll = function handleTextareaScroll() {
     if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
       return;
     }
+
     var scrollTop = fieldNode.current.scrollTop;
+
     if (!scrollTop) {
       labelRef.current.style.top = '';
       return;
     }
+
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
+
   var handleTextareaKeyDown = function handleTextareaKeyDown(e) {
     (0, _uiHelpers.checkEventIsClickOrEnterPress)(e) && !e.shiftKey && e.preventDefault();
   };
-  var handleIconClick = (0, _react.useCallback)(function (e) {
+
+  var handleIconClick = (0, React.useCallback)(function (e) {
     var _a;
+
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
+
     if (!customIcon && hasClearIcon) {
       var nativeInputValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
       var inputEvent = new Event('change', {
@@ -284,18 +343,17 @@ var TextField = function TextField(_ref) {
       field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
       field === null || field === void 0 ? void 0 : field.focus();
     }
+
     onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
   }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
-  var handleFocus = (0, _react.useCallback)(function (e) {
+  var handleFocus = (0, React.useCallback)(function (e) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
-  var handleBlur = (0, _react.useCallback)(function (e) {
+  var handleBlur = (0, React.useCallback)(function (e) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
-  var handleBeforeMaskChange = (0, _react.useCallback)(function (_ref2) {
-    var previousState = _ref2.previousState,
-      nextState = _ref2.nextState;
-    return onBeforeMaskChange === null || onBeforeMaskChange === void 0 ? void 0 : onBeforeMaskChange(nextState.enteredString, nextState, previousState);
+  var handleBeforeMaskChange = (0, React.useCallback)(function (newState, oldState, inputedValue) {
+    return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
   var commonParams = (0, _extends2["default"])((0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input)), {
@@ -321,8 +379,8 @@ var TextField = function TextField(_ref) {
   });
   var inputMaskParams = {
     mask: mask,
-    maskPlaceholder: maskChar,
-    beforeMaskedStateChange: onBeforeMaskChange ? handleBeforeMaskChange : undefined
+    maskChar: maskChar,
+    beforeMaskedValueChange: onBeforeMaskChange ? handleBeforeMaskChange : undefined
   };
   var textareaParams = (0, _extends2["default"])((0, _extends2["default"])({}, commonParams), {
     className: cn('field', {
@@ -331,39 +389,48 @@ var TextField = function TextField(_ref) {
       resized: isTextareaResizeFocused
     }, classes === null || classes === void 0 ? void 0 : classes.input)
   });
+
   var getFieldNode = function getFieldNode(node) {
     if (!node) {
       return;
     }
+
     fieldNode.current = node;
     inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
   };
+
   var getIcon = function getIcon() {
     switch (true) {
       case !!customIcon:
         return customIcon;
+
       case isPasswordType && isPasswordHidden:
         return /*#__PURE__*/React.createElement(Hide, {
           className: cn('icon')
         });
+
       case isPasswordType && !isPasswordHidden:
         return /*#__PURE__*/React.createElement(Show, {
           className: cn('icon')
         });
+
       case isValidVerification:
         return /*#__PURE__*/React.createElement(CheckedIcon, {
           className: cn('icon')
         });
+
       case hasClearIcon:
         return /*#__PURE__*/React.createElement(ClearIcon, {
           className: cn('icon', {
             clear: true
           })
         });
+
       default:
         return undefined;
     }
   };
+
   var renderLabel = function renderLabel() {
     var currentLabel = label || actualPlaceholder;
     return /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
@@ -374,6 +441,7 @@ var TextField = function TextField(_ref) {
       className: cn('require-mark')
     }, "*"));
   };
+
   var renderTextarea = function renderTextarea() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", (0, _extends2["default"])({}, textareaParams, {
       style: {
@@ -384,11 +452,14 @@ var TextField = function TextField(_ref) {
       onScroll: handleTextareaScroll
     })), renderLabel());
   };
+
   var renderIconBlock = function renderIconBlock() {
     var icon = getIcon();
+
     if (!icon) {
       return undefined;
     }
+
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconBox), {
       className: cn('icon-box', {
         error: isErrorVerification && !customIcon,
@@ -398,19 +469,23 @@ var TextField = function TextField(_ref) {
       onClick: handleIconClick
     }), icon);
   };
+
   var renderInput = function renderInput() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, mask ? /*#__PURE__*/React.createElement(_reactInputMask["default"], (0, _extends2["default"])({}, inputParams, inputMaskParams, {
-      ref: getFieldNode
+      inputRef: getFieldNode
     })) : /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, inputParams, {
       ref: getFieldNode
     })), renderLabel(), !hideIcon && renderIconBlock());
   };
+
   var renderField = function renderField() {
     if (textarea) {
       return renderTextarea();
     }
+
     return renderInput();
   };
+
   var isPlaceholderShowed = isPasswordType && isPasswordHidden && !!inputValue;
   var valueHasSymbols = inputValue !== null && inputValue !== undefined;
   var currentSymbolCount = valueHasSymbols && (graphemesCounter && (0, _countGraphemes["default"])(String(inputValue)) || String(inputValue).length) || 0;
@@ -445,4 +520,54 @@ var TextField = function TextField(_ref) {
     })
   }, "".concat(currentSymbolCount, "/").concat(symbolCounter))));
 };
-var _default = exports["default"] = TextField;
+
+TextField.propTypes = {
+  textarea: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(Object.values(TextareaTypes))]),
+  label: PropTypes.string,
+  theme: PropTypes.oneOf(['default', 'white']),
+  hideIcon: PropTypes.bool,
+  verification: PropTypes.oneOf(Object.values(Verification)),
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  type: PropTypes.oneOf(['text', 'password', 'tel', 'email']),
+  inputMode: PropTypes.oneOf(['numeric', 'tel', 'decimal', 'email', 'url', 'search', 'none']),
+  autoComplete: PropTypes.string,
+  name: PropTypes.string,
+  hidePlaceholder: PropTypes.bool,
+  placeholder: PropTypes.string,
+  id: PropTypes.string,
+  isControlled: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxLength: PropTypes.number,
+  symbolCounter: PropTypes.number,
+  graphemesCounter: PropTypes.bool,
+  customIcon: PropTypes.element,
+  mask: PropTypes.string,
+  maskChar: PropTypes.string,
+  noticeText: PropTypes.string,
+  className: PropTypes.string,
+  minTextareaHeight: PropTypes.oneOf([24, 72]),
+  hideResizeButton: PropTypes.bool,
+  disableEnterLineBreak: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBeforeMaskChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onIconClick: PropTypes.func,
+  inputRef: PropTypes.func,
+  classes: PropTypes.shape({
+    label: PropTypes.string,
+    input: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    label: PropTypes.objectOf(PropTypes.string.isRequired),
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconBox: PropTypes.objectOf(PropTypes.string.isRequired),
+    resizer: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = TextField;
+exports["default"] = _default;