@megafon/ui-core 2.0.0-beta.99 → 2.1.2

package/dist/es/components/TextField/TextField.js

@@ -1,83 +1,52 @@
 import "core-js/modules/es.array.concat";
-import "core-js/modules/es.array.index-of";
 import "core-js/modules/es.function.name";
 import "core-js/modules/es.object.values";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import cnCreate from "../../utils/cnCreate";
-import detectTouch from "../../utils/detectTouch";
-import "./TextField.css";
+import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import InputMask from 'react-input-mask';
 import InputLabel from "../InputLabel/InputLabel";
 import Paragraph from "../Paragraph/Paragraph";
+import "./TextField.css";
 
-var CheckedIcon = function CheckedIcon(props) {
+var Hide = function Hide(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32",
-    enableBackground: "new 0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "CheckedIcon__a",
-    filterUnits: "userSpaceOnUse",
-    x: 0,
-    y: 0,
-    width: 32,
-    height: 32
-  }, /*#__PURE__*/React.createElement("feColorMatrix", {
-    values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
-  }))), /*#__PURE__*/React.createElement("mask", {
-    maskUnits: "userSpaceOnUse",
-    x: 0,
-    y: 0,
-    width: 32,
-    height: 32,
-    id: "CheckedIcon__b"
-  }, /*#__PURE__*/React.createElement("g", {
-    filter: "url(#CheckedIcon__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    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",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    fill: "#fff"
-  }))), /*#__PURE__*/React.createElement("g", {
-    mask: "url(#CheckedIcon__b)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 0h32v32H0z"
-  })));
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    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 ErrorIcon = function ErrorIcon(props) {
+var Show = function Show(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ErrorIcon__st0",
-    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"
+    d: "M26 11.69l1.73-2-1.49-1.34-1.82 2.15a15.67 15.67 0 00-2.59-1.34l1.1-2.8-1.86-.73-1.14 2.9A15.53 15.53 0 0017 8.07V5h-2v3.07a15.53 15.53 0 00-2.93.47l-1.14-2.9-1.86.73 1.1 2.8a15.67 15.67 0 00-2.59 1.33L5.76 8.35l-1.52 1.3 1.73 2A19.78 19.78 0 004 13.5L5.46 15A13.72 13.72 0 0116 10a13.55 13.55 0 0110.52 5L28 13.5a19.78 19.78 0 00-2-1.81z"
+  }), /*#__PURE__*/React.createElement("path", {
+    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 Hide = function Hide(props) {
+var ErrorIcon = function ErrorIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    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"
+    className: "ErrorIcon__st0",
+    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 Show = function Show(props) {
+var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M26 11.69l1.73-2-1.49-1.34-1.82 2.15a15.67 15.67 0 00-2.59-1.34l1.1-2.8-1.86-.73-1.14 2.9A15.53 15.53 0 0017 8.07V5h-2v3.07a15.53 15.53 0 00-2.93.47l-1.14-2.9-1.86.73 1.1 2.8a15.67 15.67 0 00-2.59 1.33L5.76 8.35l-1.52 1.3 1.73 2A19.78 19.78 0 004 13.5L5.46 15A13.72 13.72 0 0116 10a13.55 13.55 0 0110.52 5L28 13.5a19.78 19.78 0 00-2-1.81z"
-  }), /*#__PURE__*/React.createElement("path", {
-    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"
+    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 InputMask = require('react-input-mask');
-
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -86,35 +55,26 @@ export var TextareaTypes = {
   FIXED: 'fixed',
   FLEXIBLE: 'flexible'
 };
-/* Method for defining internet explorer */
-
-var detectIE11 = function detectIE11() {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  var userAgent = window.navigator.userAgent.toLowerCase();
-  return userAgent.indexOf('trident/') !== -1;
-};
-
 var TEXTAREA_MIN_HEIGHT = 96;
 var TEXTAREA_MAX_HEIGHT = 168;
 var ROW_HEIGHT = 24;
 var DEFAULT_ROW_COUNT = 3;
-var cn = cnCreate('mfui-beta-text-field');
+var cn = cnCreate('mfui-text-field');
 
 var TextField = function TextField(_ref) {
   var className = _ref.className,
       customIcon = _ref.customIcon,
       disabled = _ref.disabled,
-      hideIcon = _ref.hideIcon,
+      _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,
       symbolCounter = _ref.symbolCounter,
-      textarea = _ref.textarea,
+      _ref$textarea = _ref.textarea,
+      textarea = _ref$textarea === void 0 ? false : _ref$textarea,
       name = _ref.name,
       placeholder = _ref.placeholder,
       required = _ref.required,
@@ -122,12 +82,16 @@ var TextField = function TextField(_ref) {
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
+      onBeforeMaskChange = _ref.onBeforeMaskChange,
       onCustomIconClick = _ref.onCustomIconClick,
       onFocus = _ref.onFocus,
       onKeyUp = _ref.onKeyUp,
-      theme = _ref.theme,
-      type = _ref.type,
-      value = _ref.value,
+      _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,
       noticeText = _ref.noticeText,
       inputRef = _ref.inputRef,
@@ -146,25 +110,25 @@ var TextField = function TextField(_ref) {
       inputValue = _useState4[0],
       setInputValue = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(TEXTAREA_MIN_HEIGHT),
       _useState6 = _slicedToArray(_useState5, 2),
-      isIE11 = _useState6[0],
-      setIsIE11 = _useState6[1];
+      initialTextareaHeight = _useState6[0],
+      setInitialTextareaHeight = _useState6[1];
 
-  var _useState7 = useState(TEXTAREA_MIN_HEIGHT),
+  var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      initialTextareaHeight = _useState8[0],
-      setInitialTextareaHeight = _useState8[1];
+      isTextareaResized = _useState8[0],
+      setIsTextareaResized = _useState8[1];
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      isTextareaResized = _useState10[0],
-      setIsTextareaResized = _useState10[1];
+      isMaxLimitExceeded = _useState10[0],
+      setIsMaxLimitExceeded = _useState10[1];
 
   var _useState11 = useState(false),
       _useState12 = _slicedToArray(_useState11, 2),
-      isMaxLimitExceeded = _useState12[0],
-      setIsMaxLimitExceeded = _useState12[1];
+      isTouch = _useState12[0],
+      setTouch = _useState12[1];
 
   var fieldNode = useRef();
   var isPasswordType = useMemo(function () {
@@ -173,16 +137,6 @@ var TextField = function TextField(_ref) {
   var isVisiblePassword = useMemo(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
-  var isTouch = useMemo(function () {
-    return detectTouch();
-  }, []);
-
-  var renderPlaceholderForIe = function renderPlaceholderForIe(classes) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: cn(classes)
-    }, placeholder);
-  };
-
   var checkSymbolMaxLimit = useCallback(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
@@ -193,13 +147,11 @@ var TextField = function TextField(_ref) {
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
   useEffect(function () {
-    setInputValue(value);
+    !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit]);
   useEffect(function () {
-    if (detectIE11()) {
-      setIsIE11(true);
-    }
+    setTouch(detectTouch());
   }, []);
   var togglePasswordHiding = useCallback(function () {
     return setPasswordHidden(function (prevPassState) {
@@ -207,6 +159,20 @@ var TextField = function TextField(_ref) {
     });
   }, [isPasswordHidden]);
 
+  var setTextareaHeight = function setTextareaHeight() {
+    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
+      return;
+    }
+
+    var scrollHeight = fieldNode.current.scrollHeight;
+
+    if (!isTextareaResized) {
+      var extraRowCount = Math.round((scrollHeight - TEXTAREA_MIN_HEIGHT) / ROW_HEIGHT);
+      var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? TEXTAREA_MIN_HEIGHT + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
+      setInitialTextareaHeight(newHeight);
+    }
+  };
+
   var handleInputChange = function handleInputChange(e) {
     if (textarea === TextareaTypes.FLEXIBLE) {
       setTextareaHeight();
@@ -227,12 +193,16 @@ var TextField = function TextField(_ref) {
   };
 
   var handleIconClick = useCallback(function (e) {
-    var isClearFuncAvailable = !customIcon && !onCustomIconClick && verification === Verification.ERROR;
+    var ERROR = Verification.ERROR;
+    var isClearFuncAvailable = !customIcon && !onCustomIconClick && verification === ERROR;
     var field = fieldNode.current;
     isPasswordType && togglePasswordHiding();
     onCustomIconClick && onCustomIconClick(e);
-    !isControlled && isClearFuncAvailable && setInputValue('');
-    field && field.focus();
+
+    if (!isControlled && isClearFuncAvailable) {
+      setInputValue('');
+      field && field.focus();
+    }
   }, [isPasswordType, togglePasswordHiding, onCustomIconClick, verification, setInputValue]);
   var handleFocus = useCallback(function (e) {
     onFocus && onFocus(e);
@@ -240,13 +210,16 @@ var TextField = function TextField(_ref) {
   var handleBlur = useCallback(function (e) {
     onBlur && onBlur(e);
   }, [onBlur]);
+  var handleBeforeMaskChange = useCallback(function (newState, oldState, inputedValue) {
+    return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
+  }, [onBeforeMaskChange]);
   var textareaType = textarea === TextareaTypes.FLEXIBLE ? TextareaTypes.FLEXIBLE : TextareaTypes.FIXED;
   var hasScrolling = initialTextareaHeight >= TEXTAREA_MAX_HEIGHT || isTextareaResized;
   var commonParams = {
     disabled: disabled,
     id: id,
     name: name,
-    value: inputValue,
+    value: isControlled ? value : inputValue,
     onChange: handleInputChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
@@ -264,7 +237,8 @@ var TextField = function TextField(_ref) {
 
   var inputMaskParams = {
     mask: mask,
-    maskChar: maskChar
+    maskChar: maskChar,
+    beforeMaskedValueChange: onBeforeMaskChange ? handleBeforeMaskChange : undefined
   };
 
   var textareaParams = _extends(_extends({}, commonParams), {
@@ -283,54 +257,6 @@ var TextField = function TextField(_ref) {
     inputRef && inputRef(node);
   };
 
-  var setTextareaHeight = function setTextareaHeight() {
-    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current)) {
-      return;
-    }
-
-    var scrollHeight = fieldNode.current.scrollHeight;
-
-    if (!isTextareaResized) {
-      var extraRowCount = Math.round((scrollHeight - TEXTAREA_MIN_HEIGHT) / ROW_HEIGHT);
-      var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? TEXTAREA_MIN_HEIGHT + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
-      setInitialTextareaHeight(newHeight);
-    }
-  };
-
-  var renderField = function renderField() {
-    if (textarea) {
-      return renderTextarea();
-    }
-
-    return renderInput();
-  };
-
-  var renderInput = function renderInput() {
-    if (!inputValue && inputParams.placeholder && isIE11) {
-      inputParams.placeholder = '';
-    }
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !inputValue && placeholder && isIE11 && renderPlaceholderForIe('placeholder-input'), mask ? /*#__PURE__*/React.createElement(InputMask, _extends({}, inputParams, inputMaskParams, {
-      inputRef: getFieldNode
-    })) : /*#__PURE__*/React.createElement("input", _extends({}, inputParams, {
-      ref: getFieldNode
-    })), !hideIcon && renderIconBlock());
-  };
-
-  var renderTextarea = function renderTextarea() {
-    if (!inputValue && textareaParams.placeholder && isIE11) {
-      textareaParams.placeholder = '';
-    }
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !inputValue && placeholder && isIE11 && renderPlaceholderForIe('placeholder-textarea'), /*#__PURE__*/React.createElement("textarea", _extends({}, textareaParams, {
-      onClick: handleTextareaClick,
-      style: {
-        height: "".concat(initialTextareaHeight, "px")
-      },
-      ref: getFieldNode
-    })));
-  };
-
   var getIcon = function getIcon() {
     switch (true) {
       case !!customIcon:
@@ -361,11 +287,21 @@ var TextField = function TextField(_ref) {
     }
   };
 
+  var renderTextarea = function renderTextarea() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaParams, {
+      onClick: handleTextareaClick,
+      style: {
+        height: "".concat(initialTextareaHeight, "px")
+      },
+      ref: getFieldNode
+    })));
+  };
+
   var renderIconBlock = function renderIconBlock() {
     var icon = getIcon();
     return icon && /*#__PURE__*/React.createElement("div", {
       className: cn('icon-box', {
-        error: verification === Verification.ERROR,
+        error: verification === Verification.ERROR && !customIcon,
         password: isPasswordType,
         'custom-handler': !!onCustomIconClick
       }),
@@ -373,6 +309,22 @@ var TextField = function TextField(_ref) {
     }, icon);
   };
 
+  var renderInput = function renderInput() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, mask ? /*#__PURE__*/React.createElement(InputMask, _extends({}, inputParams, inputMaskParams, {
+      inputRef: getFieldNode
+    })) : /*#__PURE__*/React.createElement("input", _extends({}, inputParams, {
+      ref: getFieldNode
+    })), !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 && String(inputValue).length || 0;
@@ -382,7 +334,7 @@ var TextField = function TextField(_ref) {
       theme: theme,
       valid: verification === Verification.VALID,
       error: verification === Verification.ERROR || isMaxLimitExceeded,
-      icon: !hideIcon && (!!verification || !!customIcon) && !textarea,
+      icon: !hideIcon && (!!verification || !!customIcon || type === 'password') && !textarea,
       password: isPlaceholderShowed
     }, className)
   }, label && /*#__PURE__*/React.createElement(InputLabel, {
@@ -409,12 +361,6 @@ var TextField = function TextField(_ref) {
   }, "".concat(currentSymbolCount, "/").concat(symbolCounter))));
 };
 
-TextField.defaultProps = {
-  textarea: false,
-  theme: 'default',
-  type: 'text',
-  hideIcon: false
-};
 TextField.propTypes = {
   textarea: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(Object.values(TextareaTypes))]),
   label: PropTypes.string,
@@ -427,6 +373,7 @@ TextField.propTypes = {
   name: PropTypes.string,
   placeholder: PropTypes.string,
   id: PropTypes.string,
+  isControlled: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxLength: PropTypes.number,
   symbolCounter: PropTypes.number,
@@ -436,6 +383,7 @@ TextField.propTypes = {
   noticeText: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func,
+  onBeforeMaskChange: PropTypes.func,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyUp: PropTypes.func,

package/dist/es/components/TextLink/TextLink.css

@@ -5,54 +5,50 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-text-link {
+.mfui-text-link {
   font-family: inherit;
-  cursor: pointer;
   font-size: inherit;
   line-height: inherit;
+  cursor: pointer;
 }
-.mfui-beta-text-link_underline-visibility_hover.mfui-beta-text-link_underline-style_solid {
+.mfui-text-link_underline-visibility_hover.mfui-text-link_underline-style_solid {
   text-decoration: none;
 }
-.mfui-beta-text-link_underline-visibility_hover:hover.mfui-beta-text-link_underline-style_solid {
+.mfui-text-link_underline-visibility_hover:hover.mfui-text-link_underline-style_solid {
   text-decoration: underline;
 }
-.mfui-beta-text-link_underline-visibility_always.mfui-beta-text-link_underline-style_solid {
+.mfui-text-link_underline-visibility_always.mfui-text-link_underline-style_solid {
   text-decoration: underline;
 }
-.mfui-beta-text-link_underline-style_dashed {
+.mfui-text-link_underline-style_dashed {
   border-bottom: 1px dashed;
-}
-.mfui-beta-text-link_underline-style_dashed:hover {
   text-decoration: none;
 }
-.mfui-beta-text-link_underline-style_border {
+.mfui-text-link_underline-style_border {
   border-bottom: 1px solid;
-}
-.mfui-beta-text-link_underline-style_border:hover {
   text-decoration: none;
 }
-.mfui-beta-text-link_underline-style_none {
+.mfui-text-link_underline-style_none {
   text-decoration: none;
 }
-.mfui-beta-text-link_underline-style_none:hover {
+.mfui-text-link_underline-style_none:hover {
   text-decoration: none;
 }
-.mfui-beta-text-link_color_white {
+.mfui-text-link_color_white {
   color: #FFFFFF;
 }
-.mfui-beta-text-link_color_blue {
+.mfui-text-link_color_blue {
   color: #34AAF2;
 }
-.mfui-beta-text-link_color_green {
+.mfui-text-link_color_green {
   color: #00B956;
 }
-.mfui-beta-text-link_color_black {
+.mfui-text-link_color_black {
   color: #333333;
 }
-.mfui-beta-text-link_color_gray {
+.mfui-text-link_color_gray {
   color: #999999;
 }
-.mfui-beta-text-link_color_inherit {
+.mfui-text-link_color_inherit {
   color: inherit;
 }

package/dist/es/components/TextLink/TextLink.d.ts

@@ -1,24 +1,14 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import './TextLink.less';
 import { ILinkProps } from '../Link/Link';
 export interface ITextLinkProps extends ILinkProps {
     /** Цвет */
-    color: 'white' | 'black' | 'gray' | 'blue' | 'green' | 'inherit';
+    color?: 'white' | 'black' | 'gray' | 'blue' | 'green' | 'inherit';
     /** Отображение подчеркивания */
-    underlineVisibility: 'hover' | 'always';
+    underlineVisibility?: 'hover' | 'always';
     /** Стиль подчеркивания */
-    underlineStyle: 'solid' | 'dashed' | 'border' | 'none';
+    underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
 }
-declare class TextLink extends React.Component<Partial<ITextLinkProps>, {}> {
-    static propTypes: {
-        color: PropTypes.Requireable<string>;
-        underlineVisibility: PropTypes.Requireable<string>;
-        underlineStyle: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-    };
-    static defaultProps: Partial<ITextLinkProps>;
-    render(): JSX.Element;
-}
+declare const TextLink: React.FC<ITextLinkProps>;
 export default TextLink;

package/dist/es/components/TextLink/TextLink.js

@@ -1,65 +1,34 @@
-import "core-js/modules/es.date.to-string";
-import "core-js/modules/es.object.to-string";
-import "core-js/modules/es.reflect.construct";
-import "core-js/modules/es.regexp.to-string";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./TextLink.css";
 import Link from "../Link/Link";
-import cnCreate from "../../utils/cnCreate";
-var cn = cnCreate('mfui-beta-text-link');
-
-var TextLink = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextLink, _React$Component);
-
-  var _super = _createSuper(TextLink);
-
-  function TextLink() {
-    _classCallCheck(this, TextLink);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(TextLink, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          underlineVisibility = _this$props.underlineVisibility,
-          underlineStyle = _this$props.underlineStyle,
-          color = _this$props.color,
-          className = _this$props.className,
-          target = _this$props.target,
-          href = _this$props.href,
-          onClick = _this$props.onClick,
-          children = _this$props.children,
-          download = _this$props.download;
-      return /*#__PURE__*/React.createElement(Link, {
-        target: target,
-        href: href,
-        onClick: onClick,
-        children: children,
-        className: cn('', {
-          'underline-visibility': underlineVisibility,
-          'underline-style': underlineStyle,
-          color: color
-        }, className),
-        download: download
-      });
-    }
-  }]);
-
-  return TextLink;
-}(React.Component);
+var cn = cnCreate('mfui-text-link');
+
+var TextLink = function TextLink(_ref) {
+  var underlineVisibility = _ref.underlineVisibility,
+      underlineStyle = _ref.underlineStyle,
+      color = _ref.color,
+      className = _ref.className,
+      target = _ref.target,
+      href = _ref.href,
+      rel = _ref.rel,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      download = _ref.download;
+  return /*#__PURE__*/React.createElement(Link, {
+    target: target,
+    href: href,
+    rel: rel,
+    onClick: onClick,
+    className: cn('', {
+      'underline-visibility': underlineVisibility,
+      'underline-style': underlineStyle,
+      color: color
+    }, className),
+    download: download
+  }, children);
+};
 
 TextLink.propTypes = {
   color: PropTypes.oneOf(['white', 'black', 'gray', 'blue', 'green', 'inherit']),