@megafon/ui-core 4.10.0 → 4.10.1

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 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)
 
 

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

@@ -118,7 +118,7 @@
 .mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border-color: var(--brandGreen);
   color: var(--stcWhite);
-  background-color: var(--brandGreen);
+  background-color: var(--stcWhite);
 }
 .mfui-checkbox_disabled .mfui-checkbox__label {
   color: var(--spbSky3);

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/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/lib/components/Checkbox/Checkbox.css

@@ -118,7 +118,7 @@
 .mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border-color: var(--brandGreen);
   color: var(--stcWhite);
-  background-color: var(--brandGreen);
+  background-color: var(--stcWhite);
 }
 .mfui-checkbox_disabled .mfui-checkbox__label {
   color: var(--spbSky3);

package/dist/lib/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/lib/components/Notification/Notification.js

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

package/dist/lib/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/lib/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/lib/components/TextField/TextField.js

@@ -9,20 +9,14 @@ exports["default"] = exports.MinTextareaHeight = exports.TextareaTypes = exports
 
 require("core-js/modules/es.array.concat");
 
-require("core-js/modules/es.date.to-string");
-
 require("core-js/modules/es.function.name");
 
-require("core-js/modules/es.object.to-string");
-
 require("core-js/modules/es.object.values");
 
 require("core-js/modules/es.parse-float");
 
 require("core-js/modules/es.regexp.exec");
 
-require("core-js/modules/es.regexp.to-string");
-
 require("core-js/modules/es.string.replace");
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -102,13 +96,6 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
-var converConfig = {
-  br: {
-    component: function component() {
-      return React.createElement('br');
-    }
-  }
-};
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -211,7 +198,6 @@ var TextField = function TextField(_ref) {
       setIsTextareaResized = _useState14[1];
 
   var fieldNode = (0, React.useRef)();
-  var hiddenElement = (0, React.useRef)(null);
   var labelRef = (0, React.useRef)(null);
   var resizerRef = (0, React.useRef)(null);
   var isPasswordType = (0, React.useMemo)(function () {
@@ -236,14 +222,25 @@ var TextField = function TextField(_ref) {
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
   (0, React.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]);
   (0, React.useEffect)(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
@@ -433,9 +430,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", (0, _extends2["default"])({}, textareaParams, {
       style: {
         height: "".concat(textareaHeight, "px")
@@ -443,13 +437,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
-      }
-    }, (0, _uiHelpers.convert)(hiddenValue, converConfig), "."), renderLabel());
+    })), renderLabel());
   };
 
   var renderIconBlock = function renderIconBlock() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "files": [
     "dist",
     "styles"
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ac8874d2fae1f64db72d87a5c0352360a70b9a4d"
+  "gitHead": "5ac03e3777f38f19028fd0a8bb71e1901e9f0df9"
 }