@megafon/ui-core 4.8.2 → 4.9.1

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
+# [4.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.2...@megafon/ui-core@4.9.0) (2022-11-29)
+
+
+### Bug Fixes
+
+* **textarea:** fix auto resize ([de31a72](https://github.com/MegafonWebLab/megafon-ui/commit/de31a723f68e24f12623ca872f8281ca60b599c4))
+* **tooltip:** fix close button margin and arrow position ([db99274](https://github.com/MegafonWebLab/megafon-ui/commit/db99274ab17fe58621aaaf1ba7d85bba6afc5e05))
+
+
+### Features
+
+* **textarea:** add disableEnterLineBreak prop ([3fba0a0](https://github.com/MegafonWebLab/megafon-ui/commit/3fba0a08a4bca66575388c9156103335d68b287b))
+
+
+
+
+
 ## [4.8.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.8.1...@megafon/ui-core@4.8.2) (2022-11-21)
 
 

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

@@ -32,6 +32,11 @@ export interface IConrentAreaProps {
         root?: string;
         inner?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
 }
 declare const ContentArea: React.FC<IConrentAreaProps>;
 export default ContentArea;

package/dist/es/components/ContentArea/ContentArea.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
@@ -29,17 +30,18 @@ var ContentArea = function ContentArea(_ref) {
       disableIndents = _ref.disableIndents,
       children = _ref.children,
       className = _ref.className,
-      classes = _ref.classes;
-  return /*#__PURE__*/React.createElement("div", {
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'background-color': outerBackgroundColor
     }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('inner', {
       'disable-indents': disableIndents,
       'background-color': innerBackgroundColor
     }, classes === null || classes === void 0 ? void 0 : classes.inner)
-  }, children));
+  }), children));
 };
 
 ContentArea.propTypes = {
@@ -49,6 +51,10 @@ ContentArea.propTypes = {
     root: PropTypes.string,
     inner: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
 };

package/dist/es/components/Counter/Counter.js

@@ -29,7 +29,7 @@ var Counter = function Counter(_ref) {
       _ref$isControlled = _ref.isControlled,
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       _ref$value = _ref.value,
-      value = _ref$value === void 0 ? 0 : _ref$value,
+      outerValue = _ref$value === void 0 ? 0 : _ref$value,
       initialValue = _ref.initialValue,
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? 999999 : _ref$max,
@@ -45,15 +45,16 @@ var Counter = function Counter(_ref) {
 
   var _React$useState = React.useState(currentInitialValue),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      counter = _React$useState2[0],
-      setCounter = _React$useState2[1];
+      innerValue = _React$useState2[0],
+      setInnerValue = _React$useState2[1];
 
+  var currentValue = isControlled ? outerValue : innerValue;
   React.useEffect(function () {
-    setCounter(currentInitialValue);
+    setInnerValue(currentInitialValue);
   }, [currentInitialValue]);
   var handleValueChange = React.useCallback(function (inputValue) {
     if (!isControlled) {
-      setCounter(inputValue);
+      setInnerValue(inputValue);
     }
 
     if (inputValue < min) {
@@ -69,11 +70,11 @@ var Counter = function Counter(_ref) {
     }
   }, [min, max, onChange, isControlled]);
   var handleMinusClick = React.useCallback(function () {
-    handleValueChange(isControlled ? value - 1 : counter - 1);
-  }, [handleValueChange, counter, isControlled, value]);
+    handleValueChange(currentValue - 1);
+  }, [handleValueChange, currentValue]);
   var handlePlusClick = React.useCallback(function () {
-    handleValueChange(isControlled ? value + 1 : counter + 1);
-  }, [handleValueChange, counter, isControlled, value]);
+    handleValueChange(currentValue + 1);
+  }, [handleValueChange, currentValue]);
   var handleInputChange = React.useCallback(function (e) {
     var pattern = /^[0-9\b]+$/;
     var inputValue = e.target.value;
@@ -106,7 +107,7 @@ var Counter = function Counter(_ref) {
       left: true
     }, classes.buttonMinus),
     type: "button",
-    disabled: disabled || (isControlled ? value : counter) <= min,
+    disabled: disabled || currentValue <= min,
     onClick: handleMinusClick
   }), /*#__PURE__*/React.createElement(IconMinus, {
     className: cn('icon')
@@ -114,7 +115,7 @@ var Counter = function Counter(_ref) {
     className: cn('input-box')
   }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', classes.input),
-    value: isControlled ? value : counter,
+    value: currentValue,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
     disabled: disabled
@@ -123,7 +124,7 @@ var Counter = function Counter(_ref) {
       right: true
     }, classes.buttonPlus),
     type: "button",
-    disabled: disabled || counter >= max || value >= max,
+    disabled: disabled || currentValue >= max,
     onClick: handlePlusClick
   }), /*#__PURE__*/React.createElement(IconPlus, {
     className: cn('icon')

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

@@ -14,6 +14,11 @@ export interface IGridProps {
     multiRow?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        container?: Record<string, string>;
+    };
     children: Array<React.ReactElement<IGridColumn>> | React.ReactElement<IGridColumn>;
 }
 declare const Grid: React.FC<IGridProps>;

package/dist/es/components/Grid/Grid.js

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Grid.css";
 var cn = cnCreate('mfui-grid');
@@ -13,10 +14,11 @@ var Grid = function Grid(_ref) {
       multiRow = _ref$multiRow === void 0 ? true : _ref$multiRow,
       hAlign = _ref.hAlign,
       vAlign = _ref.vAlign,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.container), {
     className: cn('container', {
       'multi-row': multiRow,
       'h-align': hAlign,
@@ -24,7 +26,7 @@ var Grid = function Grid(_ref) {
       'gutters-left': guttersLeft,
       'gutters-bottom': guttersBottom
     })
-  }, React.Children.map(children, function (child) {
+  }), React.Children.map(children, function (child) {
     return React.cloneElement(child, {
       className: cn('column', {
         'gutter-left': guttersLeft,
@@ -41,6 +43,10 @@ Grid.propTypes = {
   guttersBottom: PropTypes.oneOf(['large', 'medium']),
   multiRow: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    container: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired
 };
 export default Grid;

package/dist/es/components/Grid/GridColumn.d.ts

@@ -50,6 +50,10 @@ export interface IGridColumn {
     flex?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     children: React.ReactNode;
 }
 declare const GridColumn: React.FC<IGridColumn>;

package/dist/es/components/Grid/GridColumn.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./GridColumn.css";
 var GridSizeValues = PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);
@@ -38,8 +39,9 @@ var GridColumn = function GridColumn(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       align = _ref.align,
+      dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       flex: flex,
       grow: grow,
@@ -65,7 +67,7 @@ var GridColumn = function GridColumn(_ref) {
       'right-offset-tablet': rightOffsetTablet,
       'right-offset-mobile': rightOffsetMobile
     }, className)
-  }, children);
+  }), children);
 };
 
 GridColumn.propTypes = {
@@ -88,6 +90,9 @@ GridColumn.propTypes = {
   grow: PropTypes.bool,
   flex: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.node.isRequired
 };
 export default GridColumn;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './Header.less';
-interface IHeaderProps {
+export interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
     /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */

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

@@ -4,13 +4,17 @@ export interface ILogoProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Цвет */
-    color?: string;
+    color?: 'green';
     /** Отображение */
     view?: 'horizontal' | 'vertical';
     /** Ссылка */
     href?: string;
     /** target - аргумент тега <a> */
     target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Logo: React.FC<ILogoProps>;
 export default Logo;

package/dist/es/components/Logo/Logo.js

@@ -60,13 +60,15 @@ var Logo = function Logo(_ref) {
       _ref$target = _ref.target,
       target = _ref$target === void 0 ? '_blank' : _ref$target,
       _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '/' : _ref$href;
+      href = _ref$href === void 0 ? '/' : _ref$href,
+      dataAttrs = _ref.dataAttrs;
   var images = {
     'green-horizontal': greenHorizontalImg,
     'green-vertical': greenVerticalImg
   };
   var BackgroundImage = images["".concat(color, "-").concat(view)];
   return /*#__PURE__*/React.createElement(Link, {
+    dataAttrs: dataAttrs,
     href: href,
     target: target,
     className: cn('', {
@@ -80,10 +82,13 @@ var Logo = function Logo(_ref) {
 };
 
 Logo.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.oneOf(['green']),
   view: PropTypes.oneOf(['horizontal', 'vertical']),
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   href: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default Logo;

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

@@ -13,6 +13,8 @@ declare type ViewType = typeof View[keyof typeof View];
 export interface INavArrowProps {
     dataAttrs?: {
         root?: Record<string, string>;
+        prevArrow?: Record<string, string>;
+        nextArrow?: Record<string, string>;
     };
     className?: string;
     theme?: ThemeType;

package/dist/es/components/NavArrow/NavArrow.js

@@ -44,16 +44,16 @@ var NavArrow = function NavArrow(_ref) {
   var renderIcon = React.useCallback(function () {
     switch (view) {
       case View.PREV:
-        return /*#__PURE__*/React.createElement(ArrowLeft, {
+        return /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
           className: cn('icon')
-        });
+        }));
 
       default:
-        return /*#__PURE__*/React.createElement(ArrowRight, {
+        return /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow), {
           className: cn('icon')
-        });
+        }));
     }
-  }, [view]);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow, view]);
   return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     type: "button",
     className: cn({
@@ -66,7 +66,9 @@ var NavArrow = function NavArrow(_ref) {
 
 NavArrow.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    prevArrow: PropTypes.objectOf(PropTypes.string.isRequired),
+    nextArrow: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   theme: PropTypes.oneOf(Object.values(Theme)),

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

@@ -41,6 +41,15 @@
   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.d.ts

@@ -88,6 +88,8 @@ export declare type TextFieldProps = {
     minTextareaHeight?: MinTextareaHeightType;
     /** Скрывает кнопку ресайза для textarea="flexible" */
     hideResizeButton?: boolean;
+    /** Отключает перевод строки по Enter */
+    disableEnterLineBreak?: boolean;
     /** Обработчик изменения значения */
     onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик изменения значения маскированного инпута до обработки маской */

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

@@ -1,14 +1,19 @@
 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";
+
+/* eslint-disable react/no-multi-comp */
 import * as React from 'react';
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
 import InputMask from 'react-input-mask';
@@ -69,6 +74,13 @@ var DEFAULT_PLACEHOLDERS = {
   password: 'Пароль',
   text: 'Текст'
 };
+var converConfig = {
+  br: {
+    component: function component() {
+      return React.createElement('br');
+    }
+  }
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -79,7 +91,7 @@ export var TextareaTypes = {
 };
 export var MinTextareaHeight = {
   ONE_ROW: ROW_HEIGHT,
-  THREE_ROWS: ROW_HEIGHT * 3
+  THREE_ROWS: ROW_HEIGHT * DEFAULT_ROW_COUNT
 };
 var cn = cnCreate('mfui-text-field');
 
@@ -106,6 +118,8 @@ var TextField = function TextField(_ref) {
       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,
@@ -142,8 +156,8 @@ var TextField = function TextField(_ref) {
 
   var _useState5 = useState(minTextareaHeight),
       _useState6 = _slicedToArray(_useState5, 2),
-      initialTextareaHeight = _useState6[0],
-      setInitialTextareaHeight = _useState6[1];
+      textareaHeight = _useState6[0],
+      setTextareaHeight = _useState6[1];
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -166,6 +180,7 @@ 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 () {
@@ -189,6 +204,15 @@ var TextField = function TextField(_ref) {
 
     setIsMaxLimitExceeded(symbolCounter < String(textareaValue).length);
   }, [symbolCounter]);
+  useEffect(function () {
+    if (!hiddenElement.current) {
+      return;
+    }
+
+    var hiddenElementHeight = hiddenElement.current.scrollHeight;
+    var isHiddenHeightCorrect = hiddenElementHeight >= minTextareaHeight && hiddenElementHeight <= TEXTAREA_MAX_HEIGHT;
+    !isTextareaResized && setTextareaHeight(isHiddenHeightCorrect ? hiddenElementHeight : minTextareaHeight);
+  }, [hiddenElement, isTextareaResized, minTextareaHeight, inputValue]);
   useEffect(function () {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
@@ -214,7 +238,7 @@ var TextField = function TextField(_ref) {
         var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
         var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
         var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
-        setInitialTextareaHeight(updatedHeight);
+        setTextareaHeight(updatedHeight);
         setIsTextareaResized(true);
       }, throttleTime.resizeTextarea);
 
@@ -241,22 +265,7 @@ var TextField = function TextField(_ref) {
     });
   }, []);
 
-  var setTextareaHeight = function setTextareaHeight() {
-    if (!(fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) || isTextareaResized) {
-      return;
-    }
-
-    var scrollHeight = fieldNode.current.scrollHeight;
-    var extraRowCount = Math.round((scrollHeight - 28 - minTextareaHeight) / ROW_HEIGHT);
-    var newHeight = extraRowCount <= DEFAULT_ROW_COUNT ? minTextareaHeight + ROW_HEIGHT * extraRowCount : TEXTAREA_MAX_HEIGHT;
-    setInitialTextareaHeight(newHeight);
-  };
-
   var handleInputChange = function handleInputChange(e) {
-    if (textarea === TextareaTypes.FLEXIBLE) {
-      setTextareaHeight();
-    }
-
     !isControlled && setInputValue(e.target.value);
     checkSymbolMaxLimit(e.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -281,6 +290,10 @@ var TextField = function TextField(_ref) {
     labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
   };
 
+  var handleTextareaKeyDown = function handleTextareaKeyDown(e) {
+    checkEventIsClickOrEnterPress(e) && !e.shiftKey && e.preventDefault();
+  };
+
   var handleIconClick = useCallback(function (e) {
     var isClearFuncAvailable = !customIcon && !onCustomIconClick && hasClearIcon;
     var field = fieldNode.current;
@@ -393,13 +406,23 @@ 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, {
-      onScroll: handleTextareaScroll,
       style: {
-        height: "".concat(initialTextareaHeight, "px")
+        height: "".concat(textareaHeight, "px")
       },
-      ref: getFieldNode
-    })), renderLabel());
+      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());
   };
 
   var renderIconBlock = function renderIconBlock() {
@@ -496,6 +519,7 @@ TextField.propTypes = {
   className: PropTypes.string,
   minTextareaHeight: PropTypes.oneOf([24, 72]),
   hideResizeButton: PropTypes.bool,
+  disableEnterLineBreak: PropTypes.bool,
   onChange: PropTypes.func,
   onBeforeMaskChange: PropTypes.func,
   onBlur: PropTypes.func,