@alfalab/core-components 32.0.0-beta.0 → 32.0.0

package/textarea/esm/Component.js

@@ -1,8 +1,9 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import cn from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 import mergeRefs from 'react-merge-refs';
-import { useFocus } from '@alfalab/hooks';
+import { useMedia, useFocus } from '@alfalab/hooks';
+import { Scrollbar } from '../../scrollbar/esm';
 import { FormControl } from '../../form-control/esm';
 
 /*! *****************************************************************************
@@ -44,13 +45,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"textarea":"textarea__textarea_xts6h","s":"textarea__s_xts6h","m":"textarea__m_xts6h","l":"textarea__l_xts6h","xl":"textarea__xl_xts6h","hasLabel":"textarea__hasLabel_xts6h","resizeVertical":"textarea__resizeVertical_xts6h","focusVisible":"textarea__focusVisible_xts6h","filled":"textarea__filled_xts6h"};
+var styles = {"scrollable":"textarea__scrollable_1wlv2","scrollableWrapper":"textarea__scrollableWrapper_1wlv2","textarea":"textarea__textarea_1wlv2","s":"textarea__s_1wlv2","m":"textarea__m_1wlv2","l":"textarea__l_1wlv2","xl":"textarea__xl_1wlv2","textareaHidden":"textarea__textareaHidden_1wlv2","hasInnerLabel":"textarea__hasInnerLabel_1wlv2","resizeVertical":"textarea__resizeVertical_1wlv2","scrollableWithLabel":"textarea__scrollableWithLabel_1wlv2","focusVisible":"textarea__focusVisible_1wlv2","filled":"textarea__filled_1wlv2"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_1exv0","hasLabel":"textarea__hasLabel_1exv0","clearIcon":"textarea__clearIcon_1exv0","errorIcon":"textarea__errorIcon_1exv0","successIcon":"textarea__successIcon_1exv0","error":"textarea__error_1exv0","textarea":"textarea__textarea_1exv0"};
+var defaultColors = {"input":"textarea__input_1ycdm","hasInnerLabel":"textarea__hasInnerLabel_1ycdm","clearIcon":"textarea__clearIcon_1ycdm","errorIcon":"textarea__errorIcon_1ycdm","successIcon":"textarea__successIcon_1ycdm","error":"textarea__error_1ycdm","textarea":"textarea__textarea_1ycdm"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_amoak","hasLabel":"textarea__hasLabel_amoak","clearIcon":"textarea__clearIcon_amoak","errorIcon":"textarea__errorIcon_amoak","successIcon":"textarea__successIcon_amoak","error":"textarea__error_amoak","textarea":"textarea__textarea_amoak"};
+var invertedColors = {"input":"textarea__input_u16ww","hasInnerLabel":"textarea__hasInnerLabel_u16ww","clearIcon":"textarea__clearIcon_u16ww","errorIcon":"textarea__errorIcon_u16ww","successIcon":"textarea__successIcon_u16ww","error":"textarea__error_u16ww","textarea":"textarea__textarea_u16ww"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -63,39 +64,52 @@ var getDefaultCounterText = function (textLength, maxLength) {
 };
 var Textarea = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.autoComplete, autoComplete = _d === void 0 ? 'on' : _d, _e = _a.autosize, autosize = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? 's' : _f, _g = _a.colors, colors = _g === void 0 ? 'default' : _g, _h = _a.block, block = _h === void 0 ? false : _h, bottomAddons = _a.bottomAddons, fieldClassName = _a.fieldClassName, className = _a.className, dataTestId = _a.dataTestId, disabled = _a.disabled, error = _a.error, hint = _a.hint, textareaClassName = _a.textareaClassName, label = _a.label, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _j = _a.resize, resize = _j === void 0 ? 'none' : _j, value = _a.value, defaultValue = _a.defaultValue, _k = _a.rows, rows = _k === void 0 ? autosize ? 1 : 3 : _k, _l = _a.showCounter, showCounter = _l === void 0 ? false : _l, _m = _a.getCounterText, getCounterText = _m === void 0 ? getDefaultCounterText : _m, maxLength = _a.maxLength, restProps = __rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength"]);
+    var _d = _a.autoComplete, autoComplete = _d === void 0 ? 'on' : _d, _e = _a.autosize, autosize = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? 's' : _f, _g = _a.colors, colors = _g === void 0 ? 'default' : _g, _h = _a.block, block = _h === void 0 ? false : _h, bottomAddons = _a.bottomAddons, fieldClassName = _a.fieldClassName, className = _a.className, dataTestId = _a.dataTestId, disabled = _a.disabled, error = _a.error, hint = _a.hint, textareaClassName = _a.textareaClassName, label = _a.label, _j = _a.labelView, labelView = _j === void 0 ? 'inner' : _j, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _k = _a.resize, resize = _k === void 0 ? 'none' : _k, value = _a.value, defaultValue = _a.defaultValue, _l = _a.rows, rows = _l === void 0 ? autosize ? 1 : 3 : _l, _m = _a.showCounter, showCounter = _m === void 0 ? false : _m, _o = _a.getCounterText, getCounterText = _o === void 0 ? getDefaultCounterText : _o, maxLength = _a.maxLength, nativeScrollbarProp = _a.nativeScrollbar, restProps = __rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength", "nativeScrollbar"]);
     var uncontrolled = value === undefined;
+    var nativeScrollbar = useMedia([[true, '(max-width: 1023px)']], false)[0];
+    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = useRef(null);
-    var _o = useState(false), focused = _o[0], setFocused = _o[1];
-    var _p = useState(defaultValue || ''), stateValue = _p[0], setStateValue = _p[1];
+    var _p = useState(false), focused = _p[0], setFocused = _p[1];
+    var _q = useState(defaultValue || ''), stateValue = _q[0], setStateValue = _q[1];
+    var _r = useState(), scrollableHeight = _r[0], setScrollableHeight = _r[1];
     var focusVisible = useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
+    var hasInnerLabel = label && labelView === 'inner';
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(function () {
-        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = maxHeight + "px";
+        if (autosize) {
+            if (nativeScrollbar &&
+                maxHeight &&
+                textareaRef.current &&
+                textareaRef.current.style) {
+                textareaRef.current.style.maxHeight = maxHeight + "px";
+            }
         }
-    }, [textareaRef, autosize, maxHeight]);
-    var handleTextareaFocus = useCallback(function (event) {
+        else if (!nativeScrollbar && textareaRef.current) {
+            var textareaHeight = textareaRef.current.scrollHeight;
+            setScrollableHeight(textareaHeight);
+        }
+    }, [autosize, maxHeight, nativeScrollbar]);
+    var handleTextareaFocus = function (event) {
         setFocused(true);
         if (onFocus) {
             onFocus(event);
         }
-    }, [onFocus]);
-    var handleTextareaBlur = useCallback(function (event) {
+    };
+    var handleTextareaBlur = function (event) {
         setFocused(false);
         if (onBlur) {
             onBlur(event);
         }
-    }, [onBlur]);
-    var handleTextareaChange = useCallback(function (event) {
+    };
+    var handleTextareaChange = function (event) {
         if (onChange) {
             onChange(event, { value: event.target.value });
         }
         if (uncontrolled) {
             setStateValue(event.target.value);
         }
-    }, [onChange, uncontrolled]);
+    };
     var getValueLength = function () {
         if (uncontrolled) {
             return stateValue.length;
@@ -109,15 +123,35 @@ var Textarea = forwardRef(function (_a, ref) {
         return hint;
     };
     var textareaProps = __assign(__assign({}, restProps), { className: cn(styles.textarea, colorStyles[colors].textarea, styles[size], (_b = {},
-            _b[styles.hasLabel] = label,
-            _b[colorStyles[colors].hasLabel] = label,
-            _b[styles.filled] = filled,
+            _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([ref, textareaRef]), 'data-test-id': dataTestId, maxLength: maxLength });
+    var renderWithNativeScrollbar = function () {
+        return autosize ? (React.createElement(TextareaAutosize, __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })));
+    };
+    var renderWithCustomScrollbar = function () {
+        var _a;
+        var minRowsValue = autosize ? minRows : rows;
+        return (React.createElement(Scrollbar, { style: { maxHeight: maxHeight, height: scrollableHeight, padding: 0 }, className: cn(styles.scrollable, styles[size], (_a = {},
+                _a[styles.scrollableWithLabel] = label,
+                _a[styles.filled] = filled,
+                _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.scrollableWrapper } },
+            React.createElement(TextareaAutosize, __assign({}, textareaProps, { minRows: minRowsValue })),
+            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
+                    if (autosize) {
+                        setScrollableHeight(height);
+                        if (onHeightChange) {
+                            onHeightChange(height);
+                        }
+                    }
+                } })));
+    };
     return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, (_c = {},
             _c[styles.focusVisible] = focusVisible,
-            _c)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, autosize ? (React.createElement(TextareaAutosize, __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })))));
+            _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()));
 });
 /**
  * Для отображения в сторибуке

package/textarea/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: 2t6ow */
+/* hash: rz75s */
 :root {
     --color-light-graphic-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
@@ -30,71 +30,75 @@
 
     /* error */
     --input-error-color: var(--color-light-text-primary);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_1exv0 {
+.textarea__input_1ycdm {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1exv0:-webkit-autofill {
+.textarea__input_1ycdm:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_1exv0::placeholder {
+.textarea__input_1ycdm::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_1exv0::placeholder {
+.textarea__hasInnerLabel_1ycdm::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_1exv0 {
+.textarea__clearIcon_1ycdm {
     color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_1exv0 {
+.textarea__errorIcon_1ycdm {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_1exv0 {
+.textarea__successIcon_1ycdm {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_1exv0:read-only {
+.textarea__input_1ycdm:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_1exv0:read-only:focus::placeholder {
+.textarea__input_1ycdm:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1exv0:disabled {
+.textarea__input_1ycdm:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1exv0:focus::placeholder {
+.textarea__input_1ycdm:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1exv0 {
+.textarea__error_1ycdm {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_1exv0 {
+.textarea__textarea_1ycdm {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1exv0::placeholder {
+.textarea__textarea_1ycdm::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_1exv0::placeholder {
+.textarea__hasInnerLabel_1ycdm::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1exv0:disabled {
+.textarea__textarea_1ycdm:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1exv0:read-only {
+.textarea__textarea_1ycdm:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1exv0:focus::placeholder {
+.textarea__textarea_1ycdm:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: u181a */
+/* hash: ne0gs */
 :root {
     --color-light-border-link: #007aff;
 }
@@ -12,10 +12,44 @@
 }
 :root {
     --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
 }
 :root {
     --focus-color: var(--color-light-border-link);
+    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
     --disabled-cursor: not-allowed;
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+}
+:root {
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+
+    /* height */
+    --form-control-s-min-height: var(--size-s-height);
+    --form-control-m-min-height: var(--size-m-height);
+    --form-control-l-min-height: var(--size-l-height);
+    --form-control-xl-min-height: var(--size-xl-height);
+
+    /* paddings */
+    --form-control-labeled-s-paddings: 24px var(--gap-s) 4px;
+    --form-control-labeled-m-paddings: 28px var(--gap-s) 8px;
+    --form-control-labeled-l-paddings: 32px var(--gap-s) 12px;
+    --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px;
+
+    /* disabled */
+
+    /* font */
 }
 :root {
     /* min-height */
@@ -50,7 +84,19 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__textarea_xts6h {
+.textarea__scrollable_1wlv2 {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+}
+.textarea__scrollableWrapper_1wlv2 {
+    box-sizing: border-box
+}
+.textarea__scrollableWrapper_1wlv2 > * {
+        font-family: var(--font-family);
+    }
+.textarea__textarea_1wlv2 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -67,82 +113,139 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_xts6h.textarea__s_xts6h {
+.textarea__textarea_1wlv2.textarea__s_1wlv2 {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_xts6h.textarea__m_xts6h {
+.textarea__textarea_1wlv2.textarea__m_1wlv2 {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_xts6h.textarea__l_xts6h {
+.textarea__textarea_1wlv2.textarea__l_1wlv2 {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_xts6h.textarea__xl_xts6h {
+.textarea__textarea_1wlv2.textarea__xl_1wlv2 {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_xts6h::placeholder {
+.textarea__textarea_1wlv2.textarea__textareaHidden_1wlv2 {
+        position: absolute;
+        transform: translateX(-10000px);
+    }
+.textarea__textarea_1wlv2::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasLabel_xts6h::placeholder {
+.textarea__hasInnerLabel_1wlv2::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_xts6h {
+.textarea__resizeVertical_1wlv2 {
     resize: vertical;
 }
 /* SIZES */
-.textarea__textarea_xts6h.textarea__s_xts6h {
+.textarea__textarea_1wlv2.textarea__s_1wlv2, .textarea__scrollable_1wlv2.textarea__s_1wlv2 {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_xts6h.textarea__m_xts6h {
+.textarea__textarea_1wlv2.textarea__m_1wlv2, .textarea__scrollable_1wlv2.textarea__m_1wlv2 {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_xts6h.textarea__l_xts6h {
+.textarea__textarea_1wlv2.textarea__l_1wlv2, .textarea__scrollable_1wlv2.textarea__l_1wlv2 {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_xts6h.textarea__xl_xts6h {
+.textarea__textarea_1wlv2.textarea__xl_1wlv2, .textarea__scrollable_1wlv2.textarea__xl_1wlv2 {
         min-height: var(--textarea-xl-min-height);
     }
+/* Паддинги взяты из стилей form-control */
+.textarea__scrollable_1wlv2.textarea__s_1wlv2 .textarea__textarea_1wlv2, .textarea__scrollable_1wlv2.textarea__m_1wlv2 .textarea__textarea_1wlv2, .textarea__scrollable_1wlv2.textarea__l_1wlv2 .textarea__textarea_1wlv2 {
+            padding-left: var(--gap-s);
+            padding-right: var(--gap-s);
+        }
+.textarea__scrollable_1wlv2.textarea__xl_1wlv2 .textarea__textarea_1wlv2 {
+            padding-left: var(--gap-m);
+            padding-right: var(--gap-m);
+        }
+/* Паддинги взяты из стилей form-control */
+.textarea__scrollableWithLabel_1wlv2.textarea__s_1wlv2 .textarea__textarea_1wlv2 {
+        padding: var(--form-control-labeled-s-paddings);
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__m_1wlv2 .textarea__textarea_1wlv2 {
+        padding: var(--form-control-labeled-m-paddings);
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__l_1wlv2 .textarea__textarea_1wlv2 {
+        padding: var(--form-control-labeled-l-paddings);
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__xl_1wlv2 .textarea__textarea_1wlv2 {
+        padding: var(--form-control-labeled-xl-paddings);
+    }
 /* DISABLED STATE */
-.textarea__textarea_xts6h:disabled {
+.textarea__textarea_1wlv2:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_xts6h:read-only {
+.textarea__textarea_1wlv2:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_xts6h:focus.textarea__hasLabel_xts6h::placeholder {
+.textarea__textarea_1wlv2:focus.textarea__hasInnerLabel_1wlv2::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_xts6h {
+.textarea__focusVisible_1wlv2 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_xts6h.textarea__filled_xts6h.textarea__hasLabel_xts6h {
+.textarea__textarea_1wlv2.textarea__filled_1wlv2.textarea__hasInnerLabel_1wlv2 {
     padding-top: 0
 }
-.textarea__textarea_xts6h.textarea__filled_xts6h.textarea__hasLabel_xts6h.textarea__s_xts6h {
+.textarea__textarea_1wlv2.textarea__filled_1wlv2.textarea__hasInnerLabel_1wlv2.textarea__s_1wlv2 {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height);
         height: var(--textarea-s-filled-min-height);
     }
-.textarea__textarea_xts6h.textarea__filled_xts6h.textarea__hasLabel_xts6h.textarea__m_xts6h {
+.textarea__textarea_1wlv2.textarea__filled_1wlv2.textarea__hasInnerLabel_1wlv2.textarea__m_1wlv2 {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height);
         height: var(--textarea-m-filled-min-height);
     }
-.textarea__textarea_xts6h.textarea__filled_xts6h.textarea__hasLabel_xts6h.textarea__l_xts6h {
+.textarea__textarea_1wlv2.textarea__filled_1wlv2.textarea__hasInnerLabel_1wlv2.textarea__l_1wlv2 {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height);
         height: var(--textarea-l-filled-min-height);
     }
-.textarea__textarea_xts6h.textarea__filled_xts6h.textarea__hasLabel_xts6h.textarea__xl_xts6h {
+.textarea__textarea_1wlv2.textarea__filled_1wlv2.textarea__hasInnerLabel_1wlv2.textarea__xl_1wlv2 {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);
     }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2 .textarea__textarea_1wlv2 {
+        padding-top: 0;
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__s_1wlv2 {
+        margin-top: var(--textarea-s-filled-margin-top);
+        min-height: var(--textarea-s-filled-min-height)
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__s_1wlv2 .textarea__textarea_1wlv2 {
+            min-height: var(--textarea-s-filled-min-height);
+        }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__m_1wlv2 {
+        margin-top: var(--textarea-m-filled-margin-top);
+        min-height: var(--textarea-m-filled-min-height)
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__m_1wlv2 .textarea__textarea_1wlv2 {
+            min-height: var(--textarea-m-filled-min-height);
+        }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__l_1wlv2 {
+        margin-top: var(--textarea-l-filled-margin-top);
+        min-height: var(--textarea-l-filled-min-height)
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__l_1wlv2 .textarea__textarea_1wlv2 {
+            min-height: var(--textarea-l-filled-min-height);
+        }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__xl_1wlv2 {
+        margin-top: var(--textarea-xl-filled-margin-top);
+        min-height: var(--textarea-xl-filled-min-height)
+    }
+.textarea__scrollableWithLabel_1wlv2.textarea__filled_1wlv2.textarea__xl_1wlv2 .textarea__textarea_1wlv2 {
+            min-height: var(--textarea-xl-filled-min-height);
+        }

package/textarea/esm/index.js

@@ -3,5 +3,6 @@ import 'classnames';
 import 'react-textarea-autosize';
 import 'react-merge-refs';
 import '@alfalab/hooks';
+import '../../scrollbar/esm';
 import '../../form-control/esm';
 export { Textarea, getDefaultCounterText } from './Component.js';

package/textarea/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 11r24 */
+/* hash: 1qx2l */
 :root {
     --color-light-graphic-primary-inverted: #fff;
     --color-light-text-primary-inverted: #fff;
@@ -30,71 +30,75 @@
 
     /* error */
     --input-inverted-error-color: var(--color-light-text-primary-inverted);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_amoak {
+.textarea__input_u16ww {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_amoak:-webkit-autofill {
+.textarea__input_u16ww:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
 }
-.textarea__input_amoak::placeholder {
+.textarea__input_u16ww::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_amoak::placeholder {
+.textarea__hasInnerLabel_u16ww::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
-.textarea__clearIcon_amoak {
+.textarea__clearIcon_u16ww {
     color: var(--color-light-graphic-primary-inverted);
 }
-.textarea__errorIcon_amoak {
+.textarea__errorIcon_u16ww {
     background-image: var(--input-inverted-error-icon);
 }
-.textarea__successIcon_amoak {
+.textarea__successIcon_u16ww {
     background-image: var(--input-inverted-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_amoak:read-only {
+.textarea__input_u16ww:read-only {
     color: var(--input-inverted-read-only-color)
 }
-.textarea__input_amoak:read-only:focus::placeholder {
+.textarea__input_u16ww:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_amoak:disabled {
+.textarea__input_u16ww:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_amoak:focus::placeholder {
+.textarea__input_u16ww:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_amoak {
+.textarea__error_u16ww {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
-.textarea__textarea_amoak {
+.textarea__textarea_u16ww {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_amoak::placeholder {
+.textarea__textarea_u16ww::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasLabel_amoak::placeholder {
+.textarea__hasInnerLabel_u16ww::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_amoak:disabled {
+.textarea__textarea_u16ww:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_amoak:read-only {
+.textarea__textarea_u16ww:read-only {
     color: var(--input-inverted-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_amoak:focus::placeholder {
+.textarea__textarea_u16ww:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }