@alfalab/core-components 36.2.0 → 36.3.0

package/tag/modern/index.css

@@ -52,7 +52,7 @@
 
     /* text color */
 }
-.tag__component_1ikd5 {
+.tag__component_y1o0l {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -70,40 +70,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_1ikd5:disabled {
+.tag__component_y1o0l:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_1ikd5 {
+.tag__focused_y1o0l {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_1ikd5 {
+.tag__addons_y1o0l {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_1ikd5:first-child {
+.tag__addons_y1o0l:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_1ikd5:last-child {
+.tag__addons_y1o0l:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_1ikd5:only-child {
+.tag__addons_y1o0l:only-child {
         margin: 0;
     }
-.tag__s_1ikd5 .tag__addons_1ikd5:first-child, .tag__m_1ikd5 .tag__addons_1ikd5:first-child {
+.tag__s_y1o0l .tag__addons_y1o0l:first-child, .tag__m_y1o0l .tag__addons_y1o0l:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_1ikd5 .tag__addons_1ikd5:last-child, .tag__m_1ikd5 .tag__addons_1ikd5:last-child {
+.tag__s_y1o0l .tag__addons_y1o0l:last-child, .tag__m_y1o0l .tag__addons_y1o0l:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_1ikd5 .tag__addons_1ikd5:first-child, .tag__xl_1ikd5 .tag__addons_1ikd5:first-child {
+.tag__l_y1o0l .tag__addons_y1o0l:first-child, .tag__xl_y1o0l .tag__addons_y1o0l:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_1ikd5 .tag__addons_1ikd5:last-child, .tag__xl_1ikd5 .tag__addons_1ikd5:last-child {
+.tag__l_y1o0l .tag__addons_y1o0l:last-child, .tag__xl_y1o0l .tag__addons_y1o0l:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_1ikd5 {
+.tag__xxs_y1o0l {
     min-width: 60px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
@@ -112,13 +112,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xxs_1ikd5 {
+.tag__xxs_y1o0l {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_1ikd5 {
+.tag__xs_y1o0l {
     min-width: 72px;
     min-height: 40px;
     padding: 0 var(--gap-l);
@@ -127,13 +127,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xs_1ikd5 {
+.tag__xs_y1o0l {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_1ikd5 {
+.tag__s_y1o0l {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
@@ -142,13 +142,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__s_1ikd5 {
+.tag__s_y1o0l {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_1ikd5 {
+.tag__m_y1o0l {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
@@ -157,13 +157,13 @@
     padding: 0 28px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__m_1ikd5 {
+.tag__m_y1o0l {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_1ikd5 {
+.tag__l_y1o0l {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -172,13 +172,13 @@
     padding: 0 var(--gap-2xl)
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__l_1ikd5 {
+.tag__l_y1o0l {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_1ikd5 {
+.tag__xl_y1o0l {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -187,51 +187,51 @@
     padding: 0 36px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xl_1ikd5 {
+.tag__xl_y1o0l {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_1ikd5.tag__xxs_1ikd5 {
+.tag__withRightAddons_y1o0l.tag__xxs_y1o0l {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_1ikd5.tag__xs_1ikd5 {
+.tag__withRightAddons_y1o0l.tag__xs_y1o0l {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_1ikd5.tag__s_1ikd5 {
+.tag__withRightAddons_y1o0l.tag__s_y1o0l {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_1ikd5.tag__m_1ikd5 {
+.tag__withRightAddons_y1o0l.tag__m_y1o0l {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_1ikd5.tag__l_1ikd5 {
+.tag__withRightAddons_y1o0l.tag__l_y1o0l {
         padding-right: 28px;
     }
-.tag__withRightAddons_1ikd5.tag__xl_1ikd5 {
+.tag__withRightAddons_y1o0l.tag__xl_y1o0l {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_1ikd5.tag__xxs_1ikd5 {
+.tag__withLeftAddons_y1o0l.tag__xxs_y1o0l {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_1ikd5.tag__xs_1ikd5 {
+.tag__withLeftAddons_y1o0l.tag__xs_y1o0l {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_1ikd5.tag__s_1ikd5 {
+.tag__withLeftAddons_y1o0l.tag__s_y1o0l {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_1ikd5.tag__m_1ikd5 {
+.tag__withLeftAddons_y1o0l.tag__m_y1o0l {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_1ikd5.tag__l_1ikd5 {
+.tag__withLeftAddons_y1o0l.tag__l_y1o0l {
         padding-left: 28px;
     }
-.tag__withLeftAddons_1ikd5.tag__xl_1ikd5 {
+.tag__withLeftAddons_y1o0l.tag__xl_y1o0l {
         padding-left: var(--gap-2xl);
     }
-.tag__defaultVariant_1ikd5 {
+.tag__defaultVariant_y1o0l {
     border-radius: var(--tag-border-radius);
 }
-.tag__alt_1ikd5 {
+.tag__alt_y1o0l {
     border-radius: var(--tag-alt-border-radius);
 }

package/tag/modern/inverted.css

@@ -54,39 +54,39 @@
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
 }
-.tag__component_k2zx5 {
+.tag__component_1mz7q {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_k2zx5:disabled {
+.tag__component_1mz7q:disabled {
         border-color: var(--tag-inverted-border-color-disabled);
         color: var(--tag-inverted-text-color-disabled);
         background-color: var(--tag-inverted-background-color-disabled);
     }
-.tag__component_k2zx5:hover:not(:disabled) {
+.tag__component_1mz7q:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_k2zx5:active:not(:disabled) {
+.tag__component_1mz7q:active:not(:disabled) {
         border-color: var(--tag-inverted-border-color-active);
         background-color: var(--tag-inverted-background-color-active);
         color: var(--tag-inverted-text-color);
     }
-.tag__checked_k2zx5 {
+.tag__checked_1mz7q {
     border-color: var(--tag-inverted-border-color-checked);
     background-color: var(--tag-inverted-background-color-checked);
     color: var(--tag-inverted-text-color-checked)
 }
-.tag__checked_k2zx5:disabled {
+.tag__checked_1mz7q:disabled {
         background-color: var(--tag-inverted-background-color-checked-disabled);
         border-color: var(--tag-inverted-border-color-checked-disabled);
         color: var(--tag-inverted-text-color-checked-disabled);
     }
-.tag__checked_k2zx5:hover:not(:disabled):not(:active) {
+.tag__checked_1mz7q:hover:not(:disabled):not(:active) {
         background-color: var(--tag-inverted-background-color-checked-hover);
     }
-.tag__checked_k2zx5:active:not(:disabled) {
+.tag__checked_1mz7q:active:not(:disabled) {
         background-color: var(--tag-inverted-background-color-checked-active);
         color: var(--tag-inverted-text-color-checked);
     }

package/textarea/Component.d.ts

@@ -1,230 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
-type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: 's' | 'm' | 'l' | 'xl';
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: 'default' | 'inverted';
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: 'inner' | 'outer';
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Слот под компонентом
-     */
-    bottomAddons?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string;
-    /**
-     * Дополнительный класс textarea
-     */
-    textareaClassName?: string;
-    /**
-     * Управление возможностью подстраивать высоту компонента под высоту текста
-     */
-    autosize?: boolean;
-    /**
-     * Максимальное количество отображаемых строк (работает только вместе с autosize)
-     */
-    maxRows?: number;
-    /**
-     * Минимальное количество отображаемых строк (работает только вместе c autosize)
-     */
-    minRows?: number;
-    /**
-     * Максимальная высота элемента
-     */
-    maxHeight?: number;
-    /**
-     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
-     */
-    resize?: 'vertical' | 'none';
-    /**
-     * Обработчик ввода
-     */
-    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
-        value: string;
-    }) => void;
-    /**
-     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
-     */
-    onHeightChange?: (height?: number) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Максимальное количество символов (native prop)
-     */
-    maxLength?: number;
-    /**
-     * Показывать счетчик введенных символов
-     */
-    showCounter?: boolean;
-    /**
-     * Функция, возвращающая текст для счетчика
-     */
-    getCounterText?: (textLength: number, maxLength?: number) => string;
-    /**
-     * Нужно ли использовать нативный скроллбар.
-     */
-    nativeScrollbar?: boolean;
-};
 declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
-declare const Textarea: React.ForwardRefExoticComponent<Omit<NativeProps, "size" | "defaultValue" | "style" | "onChange" | "value"> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string | undefined;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string | undefined;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean | undefined;
-    /**
-     * Размер компонента
-     */
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: "default" | "inverted" | undefined;
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: "inner" | "outer" | undefined;
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Слот под компонентом
-     */
-    bottomAddons?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string | undefined;
-    /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string | undefined;
-    /**
-     * Дополнительный класс textarea
-     */
-    textareaClassName?: string | undefined;
-    /**
-     * Управление возможностью подстраивать высоту компонента под высоту текста
-     */
-    autosize?: boolean | undefined;
-    /**
-     * Максимальное количество отображаемых строк (работает только вместе с autosize)
-     */
-    maxRows?: number | undefined;
-    /**
-     * Минимальное количество отображаемых строк (работает только вместе c autosize)
-     */
-    minRows?: number | undefined;
-    /**
-     * Максимальная высота элемента
-     */
-    maxHeight?: number | undefined;
-    /**
-     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
-     */
-    resize?: "none" | "vertical" | undefined;
-    /**
-     * Обработчик ввода
-     */
-    onChange?: ((event: ChangeEvent<HTMLTextAreaElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    /**
-     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
-     */
-    onHeightChange?: ((height?: number | undefined) => void) | undefined;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string | undefined;
-    /**
-     * Максимальное количество символов (native prop)
-     */
-    maxLength?: number | undefined;
-    /**
-     * Показывать счетчик введенных символов
-     */
-    showCounter?: boolean | undefined;
-    /**
-     * Функция, возвращающая текст для счетчика
-     */
-    getCounterText?: ((textLength: number, maxLength?: number | undefined) => string) | undefined;
-    /**
-     * Нужно ли использовать нативный скроллбар.
-     */
-    nativeScrollbar?: boolean | undefined;
-} & React.RefAttributes<HTMLTextAreaElement>>;
-export { TextareaProps, getDefaultCounterText, Textarea };
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "defaultValue" | "style" | "onChange" | "value"> & import("./typings").TextareaIncomeProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { getDefaultCounterText, Textarea };

package/textarea/Component.js

@@ -7,6 +7,7 @@ var cn = require('classnames');
 var coreComponentsFormControl = require('../form-control');
 var coreComponentsScrollbar = require('../scrollbar');
 var hooks = require('@alfalab/hooks');
+var components_PseudoTextArea = require('./PseudoTextArea-c6517058.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -54,13 +55,10 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"input":"textarea__input_vnnvh","hasInnerLabel":"textarea__hasInnerLabel_vnnvh","clearIcon":"textarea__clearIcon_vnnvh","error":"textarea__error_vnnvh","textarea":"textarea__textarea_vnnvh"};
+var defaultColors = {"input":"textarea__input_1m0s6","hasInnerLabel":"textarea__hasInnerLabel_1m0s6","clearIcon":"textarea__clearIcon_1m0s6","error":"textarea__error_1m0s6","textarea":"textarea__textarea_1m0s6","hint":"textarea__hint_1m0s6"};
 require('./default.css');
 
-var styles = {"scrollable":"textarea__scrollable_tq9dn","scrollableWrapper":"textarea__scrollableWrapper_tq9dn","textarea":"textarea__textarea_tq9dn","s":"textarea__s_tq9dn","m":"textarea__m_tq9dn","l":"textarea__l_tq9dn","xl":"textarea__xl_tq9dn","textareaHidden":"textarea__textareaHidden_tq9dn","hasInnerLabel":"textarea__hasInnerLabel_tq9dn","resizeVertical":"textarea__resizeVertical_tq9dn","scrollableWithLabel":"textarea__scrollableWithLabel_tq9dn","focusVisible":"textarea__focusVisible_tq9dn","filled":"textarea__filled_tq9dn"};
-require('./index.css');
-
-var invertedColors = {"input":"textarea__input_1qdl7","hasInnerLabel":"textarea__hasInnerLabel_1qdl7","clearIcon":"textarea__clearIcon_1qdl7","error":"textarea__error_1qdl7","textarea":"textarea__textarea_1qdl7"};
+var invertedColors = {"input":"textarea__input_hplgo","hasInnerLabel":"textarea__hasInnerLabel_hplgo","clearIcon":"textarea__clearIcon_hplgo","error":"textarea__error_hplgo","textarea":"textarea__textarea_hplgo","hint":"textarea__hint_hplgo"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -78,12 +76,21 @@ var Textarea = React.forwardRef(function (_a, ref) {
     var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = React.useRef(null);
+    var pseudoTextareaRef = React.useRef(null);
     var _p = React.useState(false), focused = _p[0], setFocused = _p[1];
     var _q = React.useState(defaultValue || ''), stateValue = _q[0], setStateValue = _q[1];
     var _r = React.useState(), scrollableHeight = _r[0], setScrollableHeight = _r[1];
+    var _s = React.useState(0), scrollPosition = _s[0], setScrollPosition = _s[1];
     var focusVisible = hooks.useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
+    var hasOverflow = Boolean(maxLength && stateValue.slice(maxLength));
+    React.useEffect(function () {
+        var pseudoNode = pseudoTextareaRef.current;
+        if (pseudoNode) {
+            pseudoNode.scrollTop = scrollPosition;
+        }
+    }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     React.useEffect(function () {
         if (autosize) {
@@ -112,11 +119,18 @@ var Textarea = React.forwardRef(function (_a, ref) {
         }
     };
     var handleTextareaChange = function (event) {
+        var value = event.target.value;
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: value });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(value);
+        }
+    };
+    var handleTeaxtareaScroll = function (event) {
+        if (maxLength) {
+            var value_1 = event.target.scrollTop;
+            setScrollPosition(value_1);
         }
     };
     var getValueLength = function () {
@@ -125,30 +139,26 @@ var Textarea = React.forwardRef(function (_a, ref) {
         }
         return value.length;
     };
-    var getHint = function () {
-        if (showCounter) {
-            return getCounterText(getValueLength(), maxLength);
-        }
-        return hint;
-    };
-    var textareaProps = __assign(__assign({}, restProps), { className: cn__default['default'](styles.textarea, colorStyles[colors].textarea, styles[size], (_b = {},
-            _b[styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
-            _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-            _b[styles.filled] = nativeScrollbar && filled,
-            _b[styles.resizeVertical] = resize === 'vertical',
-            _b), textareaClassName), autoComplete: autoComplete, disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default['default']([ref, textareaRef]), 'data-test-id': dataTestId, maxLength: maxLength });
+    var textareaClassNameCalc = cn__default['default'](components_PseudoTextArea.styles.textarea, colorStyles[colors].textarea, components_PseudoTextArea.styles[size], (_b = {},
+        _b[components_PseudoTextArea.styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
+        _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
+        _b[components_PseudoTextArea.styles.filled] = nativeScrollbar && filled,
+        _b[components_PseudoTextArea.styles.resizeVertical] = resize === 'vertical',
+        _b), textareaClassName);
+    var textareaProps = __assign(__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default['default']([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
     var renderWithNativeScrollbar = function () {
         return autosize ? (React__default['default'].createElement(TextareaAutosize__default['default'], __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default['default'].createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })));
     };
     var renderWithCustomScrollbar = function () {
         var _a;
         var minRowsValue = autosize ? minRows : rows;
-        return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { style: { maxHeight: maxHeight, height: scrollableHeight, padding: 0 }, className: cn__default['default'](styles.scrollable, styles[size], (_a = {},
-                _a[styles.scrollableWithLabel] = label,
-                _a[styles.filled] = filled,
-                _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.scrollableWrapper } },
+        return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { style: { maxHeight: maxHeight, height: scrollableHeight, padding: 0 }, className: cn__default['default'](components_PseudoTextArea.styles.scrollable, components_PseudoTextArea.styles[size], (_a = {},
+                _a[components_PseudoTextArea.styles.scrollableWithLabel] = label,
+                _a[components_PseudoTextArea.styles.filled] = filled,
+                _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: components_PseudoTextArea.styles.scrollableWrapper } },
+            hasOverflow && (React__default['default'].createElement(components_PseudoTextArea.PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default['default'](textareaClassNameCalc, components_PseudoTextArea.styles.customScrollbar), ref: pseudoTextareaRef })),
             React__default['default'].createElement(TextareaAutosize__default['default'], __assign({}, textareaProps, { minRows: minRowsValue })),
-            React__default['default'].createElement(TextareaAutosize__default['default'], { className: cn__default['default'](textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
+            React__default['default'].createElement(TextareaAutosize__default['default'], { className: cn__default['default'](textareaProps.className, components_PseudoTextArea.styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
                     if (autosize) {
                         setScrollableHeight(height);
                         if (onHeightChange) {
@@ -157,9 +167,21 @@ var Textarea = React.forwardRef(function (_a, ref) {
                     }
                 } })));
     };
+    var getBottomAddons = function () {
+        var _a;
+        var counterIsVisible = Boolean(maxLength && showCounter);
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            counterIsVisible && (React__default['default'].createElement("span", { className: cn__default['default'](components_PseudoTextArea.styles.sub, (_a = {},
+                    _a[colorStyles[colors].error] = hasOverflow,
+                    _a[colorStyles[colors].hint] = !hasOverflow,
+                    _a)) }, getCounterText(getValueLength(), maxLength))),
+            bottomAddons));
+    };
     return (React__default['default'].createElement(coreComponentsFormControl.FormControl, { className: cn__default['default'](className), fieldClassName: cn__default['default'](fieldClassName, (_c = {},
-            _c[styles.focusVisible] = focusVisible,
-            _c)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
+            _c[components_PseudoTextArea.styles.focusVisible] = focusVisible,
+            _c)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons() }, nativeScrollbar ? (React__default['default'].createElement(React__default['default'].Fragment, null,
+        hasOverflow && (React__default['default'].createElement(components_PseudoTextArea.PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default['default'](textareaClassNameCalc, components_PseudoTextArea.styles.nativeScrollbar), ref: pseudoTextareaRef })),
+        renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 
 exports.Textarea = Textarea;

package/textarea/PseudoTextArea-c6517058.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextareaIncomeProps } from "./typings";
+declare const PseudoTextArea: React.ForwardRefExoticComponent<{
+    pseudoTextareaClassName: string;
+    stateValue: string;
+} & TextareaIncomeProps & React.RefAttributes<HTMLDivElement>>;
+export { PseudoTextArea };

package/textarea/PseudoTextArea-c6517058.js

@@ -0,0 +1,21 @@
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"scrollable":"textarea__scrollable_vdk59","scrollableWrapper":"textarea__scrollableWrapper_vdk59","textarea":"textarea__textarea_vdk59","s":"textarea__s_vdk59","m":"textarea__m_vdk59","l":"textarea__l_vdk59","xl":"textarea__xl_vdk59","textareaHidden":"textarea__textareaHidden_vdk59","hasInnerLabel":"textarea__hasInnerLabel_vdk59","resizeVertical":"textarea__resizeVertical_vdk59","pseudoTextarea":"textarea__pseudoTextarea_vdk59","overflow":"textarea__overflow_vdk59","nativeScrollbar":"textarea__nativeScrollbar_vdk59","customScrollbar":"textarea__customScrollbar_vdk59","sub":"textarea__sub_vdk59","scrollableWithLabel":"textarea__scrollableWithLabel_vdk59","focusVisible":"textarea__focusVisible_vdk59","filled":"textarea__filled_vdk59"};
+require('./index.css');
+
+var PseudoTextArea = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, _c = _a.pseudoTextareaClassName, pseudoTextareaClassName = _c === void 0 ? '' : _c, maxLength = _a.maxLength, stateValue = _a.stateValue;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.pseudoTextarea, styles[size], pseudoTextareaClassName), ref: ref, hidden: true },
+        React__default['default'].createElement("span", null, stateValue.slice(0, maxLength)),
+        React__default['default'].createElement("span", { className: cn__default['default'](styles.overflow) }, stateValue.slice(maxLength)),
+        "\u00A0"));
+});
+
+exports.PseudoTextArea = PseudoTextArea;
+exports.styles = styles;