@megafon/ui-core 4.9.1 → 4.10.1

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.10.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.10.0...@megafon/ui-core@4.10.1) (2022-12-19)
+
+
+### Bug Fixes
+
+* **checkbox:** light checked bg-color ([5190a07](https://github.com/MegafonWebLab/megafon-ui/commit/5190a07b532b7b306a5c9de9f3586a3afaa230df))
+* **notification:** fix link color ([7302230](https://github.com/MegafonWebLab/megafon-ui/commit/73022303201d94a814097a59d9facca5576dfa5e))
+* **notification:** fix link font ([96b6134](https://github.com/MegafonWebLab/megafon-ui/commit/96b61340bb7a404affc045ac4081d093016038fa))
+* **radiobutton:** update design ([2072f43](https://github.com/MegafonWebLab/megafon-ui/commit/2072f431efedfbacb679d7b39b378181cb038b83))
+* **textfield:** fix dynamic height of textarea ([730b594](https://github.com/MegafonWebLab/megafon-ui/commit/730b5947358ada3c7d99e4849dc1563d2b752b32))
+
+
+
+
+
+# [4.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.9.1...@megafon/ui-core@4.10.0) (2022-12-12)
+
+
+### Bug Fixes
+
+* **checkbox:** update styles ([91c2c01](https://github.com/MegafonWebLab/megafon-ui/commit/91c2c01871ca3bae54f4c7204f5953341a7e80cc))
+* **colors:** add overlay color ([168671b](https://github.com/MegafonWebLab/megafon-ui/commit/168671bea17784e9e3f448138e8dab27bfc46a50))
+* **tabs:** change navigation view after change slides count ([67109aa](https://github.com/MegafonWebLab/megafon-ui/commit/67109aafe2c87a8ed7e95f506e892487ad597a8e))
+
+
+### Features
+
+* **accordion:** add optional microdata attributes ([a67df13](https://github.com/MegafonWebLab/megafon-ui/commit/a67df131fe8a47ac4b8574784135765e4e3659bc))
+* **link:** add itemprop attribute ([1243b6a](https://github.com/MegafonWebLab/megafon-ui/commit/1243b6a2b65dc157dff82d9943ee08f8f148c688))
+* **textlink:** add itemprop attribute ([77a5294](https://github.com/MegafonWebLab/megafon-ui/commit/77a529437cb73cb927381d62f88f48b2b4cc5f0c))
+* **tile:** added rel property ([8b2c8bf](https://github.com/MegafonWebLab/megafon-ui/commit/8b2c8bf8a3ddcba83b085f028460fdc1d14559d3))
+
+
+
+
+
 ## [4.9.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.9.0...@megafon/ui-core@4.9.1) (2022-12-06)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/colors/colorsData.js

@@ -82,6 +82,9 @@ var colors = {
       }, {
         name: 'Button Down',
         code: 'buttonDown'
+      }, {
+        name: 'Overlay',
+        code: 'overlay'
       }]
     }
   },

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

@@ -7,6 +7,8 @@ export interface IAccordionProps {
     title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

package/dist/es/components/Accordion/Accordion.js

@@ -24,6 +24,8 @@ var Accordion = function Accordion(_ref) {
       title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -53,17 +55,38 @@ var Accordion = function Accordion(_ref) {
 
   var openedClassName = isOpenedState ? openedClass : undefined;
   var arrowDataAttrs = isOpenedState ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown;
+
+  var renderContent = function renderContent() {
+    if (hasMicrodata) {
+      return /*#__PURE__*/React.createElement("div", {
+        itemScope: true,
+        itemProp: "acceptedAnswer",
+        itemType: "https://schema.org/Answer"
+      }, /*#__PURE__*/React.createElement("div", {
+        itemProp: "text"
+      }, children));
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       opened: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
+  }, hasMicrodata && {
+    itemScope: true,
+    itemProp: 'mainEntity',
+    itemType: 'https://schema.org/Question'
   }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle,
     onKeyDown: handleClickTitle,
     tabIndex: 0,
     role: "button"
+  }, hasMicrodata && {
+    itemProp: 'name'
   }), /*#__PURE__*/React.createElement(Header, {
     as: "h5",
     dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
@@ -76,7 +99,7 @@ var Accordion = function Accordion(_ref) {
     className: cn('content', collapsePropsClasses),
     classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }, children));
+  }, renderContent()));
 };
 
 Accordion.propTypes = {
@@ -85,6 +108,7 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

package/dist/es/components/Carousel/Carousel.js

@@ -17,9 +17,9 @@ import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
+import usePrevious from "../../hooks/usePrevious";
 import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
 import "./Carousel.css";
-import usePrevious from "./usePrevious";
 SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
   LIGHT: 'light',

package/dist/es/components/Checkbox/Checkbox.css

@@ -35,7 +35,11 @@
   width: 20px;
   height: 20px;
   border: 2px solid;
-  border-radius: 2px;
+  border-radius: 4px;
+  -webkit-transition: border-color, background-color;
+  transition: border-color, background-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
 }
 .mfui-checkbox__custom-input:focus {
   outline: none;
@@ -69,7 +73,7 @@
   line-height: 24px;
 }
 .mfui-checkbox_font-size_regular .mfui-checkbox__inner {
-  padding: 4px 15px 4px 35px;
+  padding: 4px 15px 4px 33px;
 }
 .mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
   top: 6px;
@@ -79,7 +83,7 @@
   line-height: 16px;
 }
 .mfui-checkbox_font-size_small .mfui-checkbox__inner {
-  padding: 1px 15px 4px 35px;
+  padding: 1px 15px 4px 33px;
 }
 .mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
   top: 0;
@@ -90,45 +94,57 @@
 .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   border-color: var(--buttonHoverGreen);
 }
-.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--buttonDown) !important;
-  background-color: var(--buttonDown);
-}
 .mfui-checkbox_color_dark .mfui-checkbox__icon {
   fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border-color: var(--brandGreen);
-  color: var(--stcWhite);
   background-color: var(--brandGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   background-color: var(--buttonHoverGreen);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: var(--buttonDown) !important;
+.mfui-checkbox_color_light {
+  color: var(--stcWhite);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: var(--spbSky2);
+.mfui-checkbox_color_light .mfui-checkbox__custom-input {
+  border-color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
+  border-color: var(--buttonHoverGrey);
+  background-color: var(--buttonHoverGrey);
+}
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
+  border-color: var(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--stcWhite);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
+.mfui-checkbox_disabled .mfui-checkbox__label {
+  color: var(--spbSky3);
   cursor: default;
   pointer-events: none;
 }
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
-.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: var(--spbSky2) !important;
+.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  border-color: var(--spbSky2);
   background-color: var(--spbSky1);
 }
-.mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: var(--fury);
+.mfui-checkbox_disabled .mfui-checkbox__icon {
+  fill: var(--stcWhite);
 }
-.mfui-checkbox_color_light {
-  color: var(--stcWhite);
+.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
+  color: var(--stcWhite50);
 }
-.mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: var(--stcWhite);
-  color: var(--brandGreen);
-  background-color: var(--stcWhite);
+.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-checkbox_error .mfui-checkbox__custom-input {
+  border-color: var(--fury);
+}
+.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
 }

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

@@ -14,6 +14,8 @@ export interface ILinkProps {
     dataAttrs?: {
         root?: Record<string, string>;
     };
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
     /** Обработчик клика */
     onClick?: (e: React.MouseEvent<EventTarget>) => void;

package/dist/es/components/Link/Link.js

@@ -10,6 +10,7 @@ var Link = function Link(_ref) {
       onClick = _ref.onClick,
       className = _ref.className,
       download = _ref.download,
+      itemProp = _ref.itemProp,
       children = _ref.children,
       dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("a", _extends({
@@ -18,6 +19,7 @@ var Link = function Link(_ref) {
     target: target,
     rel: rel,
     download: download,
+    itemProp: itemProp,
     onClick: onClick
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
 };
@@ -32,6 +34,7 @@ Link.propTypes = {
   }),
   rel: PropTypes.string,
   download: PropTypes.bool,
+  itemProp: PropTypes.string,
   onClick: PropTypes.func
 };
 export default Link;

package/dist/es/components/Notification/Notification.css

@@ -151,66 +151,73 @@ h5 {
   margin-top: 12px;
 }
 .mfui-notification__link {
-  font-size: 15px;
-  line-height: 24px;
-  font-weight: 500;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  color: var(--brandGreen);
   cursor: pointer;
 }
-@media screen and (max-width: 767px) {
-  .mfui-notification__link {
-    font-size: 12px;
-    line-height: 18px;
-  }
-}
 .mfui-notification__button + .mfui-notification__link {
   margin-left: 16px;
 }
-.mfui-notification__link-arrow,
-.mfui-notification__collapse-arrow {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
-  fill: var(--systemBlue);
-}
-.mfui-notification__link-arrow {
-  margin-bottom: -2px;
+.mfui-notification__link,
+.mfui-notification__collapse-button {
+  font-weight: 500;
+  font-size: 15px;
+  font-family: inherit;
+  line-height: 18px;
 }
-@media screen and (min-width: 768px) {
-  .mfui-notification__link-arrow {
-    margin-bottom: -4px;
+@media screen and (max-width: 767px) {
+  .mfui-notification__link,
+  .mfui-notification__collapse-button {
+    font-size: 12px;
+    line-height: 14px;
   }
 }
 .mfui-notification__collapse-button {
-  font-size: 15px;
-  line-height: 24px;
-  font-weight: 500;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   padding: 0;
   border: none;
-  color: var(--systemBlue);
+  color: var(--brandGreen);
   text-align: right;
   background-color: transparent;
   cursor: pointer;
 }
 @media screen and (max-width: 767px) {
   .mfui-notification__collapse-button {
-    font-size: 12px;
-    line-height: 18px;
-    margin-left: 16px;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+}
+.mfui-notification__link-arrow,
+.mfui-notification__collapse-arrow {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  fill: var(--brandGreen);
+}
+.mfui-notification__collapse-arrow_close {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.mfui-notification__link-arrow {
+  margin-bottom: -2px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-notification__link-arrow {
+    margin-bottom: -4px;
   }
 }
 .mfui-notification__bottom-block + .mfui-notification__collapse-button {
@@ -313,20 +320,17 @@ h5 {
 .mfui-notification_colored.mfui-notification_type_success .mfui-notification__text {
   color: var(--content);
 }
-.mfui-notification_colored.mfui-notification_type_info .mfui-notification__link,
-.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__link,
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__link {
-  color: var(--systemBlue);
-}
 .mfui-notification_colored.mfui-notification_type_error {
   background-color: var(--fury80);
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,
-.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link {
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link,
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__collapse-button {
   color: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link-arrow {
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link-arrow,
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__collapse-arrow {
   fill: var(--stcWhite);
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {

package/dist/es/components/Notification/Notification.js

@@ -31,16 +31,6 @@ var ArrowDown = function ArrowDown(props) {
   }));
 };
 
-var ArrowUp = function ArrowUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M14 12H6l4-5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-};
-
 var RightArrow = function RightArrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -254,11 +244,11 @@ var Notification = function Notification(_ref) {
       type: "button",
       className: cn('collapse-button'),
       onClick: handleCollapseButtonClick
-    }), showFullText ? openCollapseTitle : closeCollapseTitle, /*#__PURE__*/React.createElement("div", {
+    }), showFullText ? openCollapseTitle : closeCollapseTitle, /*#__PURE__*/React.createElement(ArrowDown, {
       className: cn('collapse-arrow', {
         close: showFullText
       })
-    }, showFullText ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
+    }));
   };
 
   var renderIcon = function renderIcon() {

package/dist/es/components/RadioButton/RadioButton.css

@@ -15,9 +15,6 @@
   outline: none;
   cursor: pointer;
 }
-.mfui-radio-button__label_disabled {
-  cursor: default;
-}
 .mfui-radio-button__custom-input {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -32,31 +29,40 @@
           justify-content: center;
   width: 32px;
   height: 32px;
-  margin-right: 8px;
+  margin-right: 6px;
 }
 .mfui-radio-button__custom-input:before {
   content: '';
   display: block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border: 2px solid var(--spbSky2);
   border-radius: 50%;
   background-color: var(--base);
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
 }
 .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
-  border: 6px solid var(--brandGreen);
+  border: 7px solid var(--brandGreen);
 }
-.mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
+.mfui-radio-button__label:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
   border-color: var(--buttonHoverGreen);
 }
-.mfui-radio-button__label:active .mfui-radio-button__custom-input:before {
+.mfui-radio-button__label:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
   border-color: var(--buttonDown);
 }
-.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before {
-  border-color: var(--spbSky2) !important;
-  background-color: var(--spbSky1) !important;
+.mfui-radio-button__label_disabled {
+  color: var(--spbSky3);
+  cursor: default;
+}
+.mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before,
+.mfui-radio-button__label_disabled .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;

package/dist/es/components/Tabs/Tabs.js

@@ -1,4 +1,5 @@
 import "core-js/modules/es.array.for-each";
+import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.array.reduce";
 import "core-js/modules/es.array.splice";
@@ -12,6 +13,7 @@ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import usePrevious from "../../hooks/usePrevious";
 import "./Tabs.css";
 
 var ArrowLeft = function ArrowLeft(props) {
@@ -64,6 +66,9 @@ var Tabs = function Tabs(_ref) {
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
   var intersectionObserverRef = React.useRef();
+  var childrenLength = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLength = usePrevious(childrenLength) || 0;
+  var isChildrenLengthDiff = childrenLength !== prevChildrenLength;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -359,9 +364,13 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    setBeginning(swiperInstance.isBeginning);
-    setEnd(swiperInstance.isEnd);
-  }, [swiperInstance]);
+    if (isChildrenLengthDiff) {
+      handleFromEdge(swiperInstance);
+      return;
+    }
+
+    handleFromEdge(swiperInstance);
+  }, [swiperInstance, isChildrenLengthDiff, handleFromEdge]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,

package/dist/es/components/TextField/TextField.css

@@ -41,15 +41,6 @@
   overflow-y: auto;
   resize: none;
 }
-.mfui-text-field__hidden-textarea {
-  position: absolute;
-  height: -webkit-min-content;
-  height: -moz-min-content;
-  height: min-content;
-  padding: 0 56px 0 16px;
-  word-break: break-all;
-  visibility: hidden;
-}
 .mfui-text-field__field_resized {
   -webkit-transition: height 0.1s;
   transition: height 0.1s;

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

@@ -1,11 +1,8 @@
 import "core-js/modules/es.array.concat";
-import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
-import "core-js/modules/es.object.to-string";
 import "core-js/modules/es.object.values";
 import "core-js/modules/es.parse-float";
 import "core-js/modules/es.regexp.exec";
-import "core-js/modules/es.regexp.to-string";
 import "core-js/modules/es.string.replace";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
@@ -13,7 +10,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable react/no-multi-comp */
 import * as React from 'react';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
@@ -74,13 +71,6 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
-var converConfig = {
-  br: {
-    component: function component() {
-      return React.createElement('br');
-    }
-  }
-};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -180,7 +170,6 @@ var TextField = function TextField(_ref) {
       setIsTextareaResized = _useState14[1];
 
   var fieldNode = useRef();
-  var hiddenElement = useRef(null);
   var labelRef = useRef(null);
   var resizerRef = useRef(null);
   var isPasswordType = useMemo(function () {
@@ -205,14 +194,25 @@ var TextField = function TextField(_ref) {
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
   useEffect(function () {
-    if (!hiddenElement.current) {
+    if (!textarea || !fieldNode.current || isTextareaResized) {
       return;
     }
 
-    var hiddenElementHeight = hiddenElement.current.scrollHeight;
-    var isHiddenHeightCorrect = hiddenElementHeight >= minTextareaHeight && hiddenElementHeight <= TEXTAREA_MAX_HEIGHT;
-    !isTextareaResized && setTextareaHeight(isHiddenHeightCorrect ? hiddenElementHeight : minTextareaHeight);
-  }, [hiddenElement, isTextareaResized, minTextareaHeight, inputValue]);
+    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;
+
+    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]);
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
@@ -406,9 +406,6 @@ var TextField = function TextField(_ref) {
   };
 
   var renderTextarea = function renderTextarea() {
-    var _a;
-
-    var hiddenValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().replace(/[\r\n]/g, '<br/>');
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaParams, {
       style: {
         height: "".concat(textareaHeight, "px")
@@ -416,13 +413,7 @@ var TextField = function TextField(_ref) {
       ref: getFieldNode,
       onKeyDown: disableEnterLineBreak ? handleTextareaKeyDown : undefined,
       onScroll: handleTextareaScroll
-    })), !!hiddenValue && /*#__PURE__*/React.createElement("div", {
-      className: cn('hidden-textarea'),
-      ref: hiddenElement,
-      style: {
-        width: (_a = fieldNode.current) === null || _a === void 0 ? void 0 : _a.scrollWidth
-      }
-    }, convert(hiddenValue, converConfig), "."), renderLabel());
+    })), renderLabel());
   };
 
   var renderIconBlock = function renderIconBlock() {

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

@@ -8,6 +8,8 @@ export interface ITextLinkProps extends ILinkProps {
     underlineVisibility?: 'hover' | 'always';
     /** Стиль подчеркивания */
     underlineStyle?: 'solid' | 'dashed' | 'border' | 'none';
+    /** Атрибут itemprop для микроразметки */
+    itemProp?: string;
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
 }
 declare const TextLink: React.FC<ITextLinkProps>;