@alfalab/core-components 40.1.0 → 40.2.0-beta.0

package/textarea/Component.js

@@ -6,8 +6,9 @@ var mergeRefs = require('react-merge-refs');
 var TextareaAutosize = require('react-textarea-autosize');
 var cn = require('classnames');
 var coreComponentsFormControl = require('../form-control');
+var coreComponentsScrollbar = require('../scrollbar');
 var hooks = require('@alfalab/hooks');
-var components_PseudoTextArea = require('./PseudoTextArea-154acd90.js');
+var components_PseudoTextArea = require('./PseudoTextArea-713b4a35.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -16,10 +17,10 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefaultCompat(TextareaAutosize);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"input":"textarea__input_546ta","hasInnerLabel":"textarea__hasInnerLabel_546ta","clearIcon":"textarea__clearIcon_546ta","error":"textarea__error_546ta","textarea":"textarea__textarea_546ta","hint":"textarea__hint_546ta"};
+var defaultColors = {"input":"textarea__input_l2n1q","hasInnerLabel":"textarea__hasInnerLabel_l2n1q","clearIcon":"textarea__clearIcon_l2n1q","error":"textarea__error_l2n1q","textarea":"textarea__textarea_l2n1q","hint":"textarea__hint_l2n1q"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_zu45c","hasInnerLabel":"textarea__hasInnerLabel_zu45c","clearIcon":"textarea__clearIcon_zu45c","error":"textarea__error_zu45c","textarea":"textarea__textarea_zu45c","hint":"textarea__hint_zu45c"};
+var invertedColors = {"input":"textarea__input_bgss2","hasInnerLabel":"textarea__hasInnerLabel_bgss2","clearIcon":"textarea__clearIcon_bgss2","error":"textarea__error_bgss2","textarea":"textarea__textarea_bgss2","hint":"textarea__hint_bgss2"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -31,20 +32,21 @@ var getDefaultCounterText = function (textLength, maxLength) {
     return "".concat(textLength, "/").concat(maxLength, " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432");
 };
 var Textarea = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var _e = _a.autoComplete, autoComplete = _e === void 0 ? 'on' : _e, _f = _a.autosize, autosize = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? 's' : _g, _h = _a.colors, colors = _h === void 0 ? 'default' : _h, _j = _a.block, block = _j === void 0 ? false : _j, 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, _k = _a.labelView, labelView = _k === void 0 ? 'inner' : _k, 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, _l = _a.resize, resize = _l === void 0 ? 'none' : _l, value = _a.value, defaultValue = _a.defaultValue, _m = _a.rows, rows = _m === void 0 ? autosize ? 1 : 3 : _m, _o = _a.showCounter, showCounter = _o === void 0 ? false : _o, _p = _a.getCounterText, getCounterText = _p === void 0 ? getDefaultCounterText : _p, maxLength = _a.maxLength, _q = _a.allowOverflow, allowOverflow = _q === void 0 ? true : _q, nativeScrollbarProp = _a.nativeScrollbar, restProps = tslib.__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", "allowOverflow", "nativeScrollbar"]);
+    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, _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 = tslib.__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 = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
-    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
+    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = React.useRef(null);
     var pseudoTextareaRef = React.useRef(null);
-    var _r = React.useState(false), focused = _r[0], setFocused = _r[1];
-    var _s = React.useState(defaultValue || ''), stateValue = _s[0], setStateValue = _s[1];
-    var _t = React.useState(0), scrollPosition = _t[0], setScrollPosition = _t[1];
+    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 && allowOverflow && ((value === null || value === void 0 ? void 0 : value.slice(maxLength)) || stateValue.slice(maxLength)));
+    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
     React.useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -53,10 +55,19 @@ var Textarea = React.forwardRef(function (_a, ref) {
     }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     React.useEffect(function () {
-        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
+        if (autosize) {
+            if (nativeScrollbar &&
+                maxHeight &&
+                textareaRef.current &&
+                textareaRef.current.style) {
+                textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
+            }
         }
-    }, [autosize, maxHeight]);
+        else if (!nativeScrollbar && textareaRef.current) {
+            var textareaHeight = textareaRef.current.scrollHeight;
+            setScrollableHeight(textareaHeight);
+        }
+    }, [autosize, maxHeight, nativeScrollbar]);
     var handleTextareaFocus = function (event) {
         setFocused(true);
         if (onFocus) {
@@ -91,13 +102,33 @@ var Textarea = React.forwardRef(function (_a, ref) {
         return value.length;
     };
     var textareaClassNameCalc = cn__default.default(components_PseudoTextArea.styles.textarea, colorStyles[colors].textarea, components_PseudoTextArea.styles[size], (_b = {},
-        _b[components_PseudoTextArea.styles.customScrollbar] = !nativeScrollbar,
-        _b[components_PseudoTextArea.styles.hasInnerLabel] = hasInnerLabel,
+        _b[components_PseudoTextArea.styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
         _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-        _b[components_PseudoTextArea.styles.filled] = filled,
+        _b[components_PseudoTextArea.styles.filled] = nativeScrollbar && filled,
         _b[components_PseudoTextArea.styles.resizeVertical] = resize === 'vertical',
         _b), textareaClassName);
-    var textareaProps = tslib.__assign(tslib.__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, maxLength: allowOverflow ? undefined : maxLength, 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 textareaProps = tslib.__assign(tslib.__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, tslib.__assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default.default.createElement("textarea", tslib.__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(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, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, components_PseudoTextArea.styles.customScrollbar), ref: pseudoTextareaRef })),
+            React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({}, textareaProps, { minRows: minRowsValue, style: { overflow: 'hidden' } })),
+            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, role: 'none', onHeightChange: function (height) {
+                    if (autosize) {
+                        setScrollableHeight(height);
+                        if (onHeightChange) {
+                            onHeightChange(height);
+                        }
+                    }
+                } })));
+    };
     var getBottomAddons = function () {
         var _a;
         var counterIsVisible = Boolean(maxLength && showCounter);
@@ -110,12 +141,9 @@ var Textarea = React.forwardRef(function (_a, ref) {
     };
     return (React__default.default.createElement(coreComponentsFormControl.FormControl, { className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
             _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() },
-        React__default.default.createElement(React__default.default.Fragment, null,
-            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, (_d = {},
-                    _d[components_PseudoTextArea.styles.nativeScrollbar] = nativeScrollbar,
-                    _d)), ref: pseudoTextareaRef })),
-            autosize ? (React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default.default.createElement("textarea", tslib.__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: 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, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, components_PseudoTextArea.styles.nativeScrollbar), ref: pseudoTextareaRef })),
+        renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 
 exports.Textarea = Textarea;

package/textarea/{PseudoTextArea-154acd90.js → PseudoTextArea-713b4a35.js}

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"textarea":"textarea__textarea_jyj9r","s":"textarea__s_jyj9r","m":"textarea__m_jyj9r","l":"textarea__l_jyj9r","xl":"textarea__xl_jyj9r","customScrollbar":"textarea__customScrollbar_jyj9r","hasInnerLabel":"textarea__hasInnerLabel_jyj9r","resizeVertical":"textarea__resizeVertical_jyj9r","pseudoTextarea":"textarea__pseudoTextarea_jyj9r","overflow":"textarea__overflow_jyj9r","nativeScrollbar":"textarea__nativeScrollbar_jyj9r","sub":"textarea__sub_jyj9r","focusVisible":"textarea__focusVisible_jyj9r","filled":"textarea__filled_jyj9r"};
+var styles = {"scrollable":"textarea__scrollable_1emmb","scrollableWrapper":"textarea__scrollableWrapper_1emmb","textarea":"textarea__textarea_1emmb","s":"textarea__s_1emmb","m":"textarea__m_1emmb","l":"textarea__l_1emmb","xl":"textarea__xl_1emmb","textareaHidden":"textarea__textareaHidden_1emmb","hasInnerLabel":"textarea__hasInnerLabel_1emmb","resizeVertical":"textarea__resizeVertical_1emmb","pseudoTextarea":"textarea__pseudoTextarea_1emmb","overflow":"textarea__overflow_1emmb","nativeScrollbar":"textarea__nativeScrollbar_1emmb","customScrollbar":"textarea__customScrollbar_1emmb","sub":"textarea__sub_1emmb","scrollableWithLabel":"textarea__scrollableWithLabel_1emmb","focusVisible":"textarea__focusVisible_1emmb","filled":"textarea__filled_1emmb"};
 require('./index.css');
 
 var PseudoTextArea = React.forwardRef(function (_a, ref) {

package/textarea/components/PseudoTextArea.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
-var components_PseudoTextArea = require('../PseudoTextArea-154acd90.js');
+var components_PseudoTextArea = require('../PseudoTextArea-713b4a35.js');
 
 
 

package/textarea/components/index.d.ts

@@ -1 +1 @@
-export * from "../PseudoTextArea-154acd90";
+export * from "../PseudoTextArea-713b4a35";

package/textarea/components/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_PseudoTextArea = require('../PseudoTextArea-154acd90.js');
+var components_PseudoTextArea = require('../PseudoTextArea-713b4a35.js');
 require('react');
 require('classnames');
 

package/textarea/cssm/Component.js

@@ -6,6 +6,7 @@ var mergeRefs = require('react-merge-refs');
 var TextareaAutosize = require('react-textarea-autosize');
 var cn = require('classnames');
 var coreComponentsFormControl = require('../../form-control/cssm');
+var coreComponentsScrollbar = require('../../scrollbar/cssm');
 var hooks = require('@alfalab/hooks');
 var components_PseudoTextArea = require('./components/PseudoTextArea.js');
 var defaultColors = require('./default.module.css');
@@ -31,20 +32,21 @@ var getDefaultCounterText = function (textLength, maxLength) {
     return "".concat(textLength, "/").concat(maxLength, " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432");
 };
 var Textarea = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var _e = _a.autoComplete, autoComplete = _e === void 0 ? 'on' : _e, _f = _a.autosize, autosize = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? 's' : _g, _h = _a.colors, colors = _h === void 0 ? 'default' : _h, _j = _a.block, block = _j === void 0 ? false : _j, 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, _k = _a.labelView, labelView = _k === void 0 ? 'inner' : _k, 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, _l = _a.resize, resize = _l === void 0 ? 'none' : _l, value = _a.value, defaultValue = _a.defaultValue, _m = _a.rows, rows = _m === void 0 ? autosize ? 1 : 3 : _m, _o = _a.showCounter, showCounter = _o === void 0 ? false : _o, _p = _a.getCounterText, getCounterText = _p === void 0 ? getDefaultCounterText : _p, maxLength = _a.maxLength, _q = _a.allowOverflow, allowOverflow = _q === void 0 ? true : _q, nativeScrollbarProp = _a.nativeScrollbar, restProps = tslib.__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", "allowOverflow", "nativeScrollbar"]);
+    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, _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 = tslib.__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 = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
-    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
+    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = React.useRef(null);
     var pseudoTextareaRef = React.useRef(null);
-    var _r = React.useState(false), focused = _r[0], setFocused = _r[1];
-    var _s = React.useState(defaultValue || ''), stateValue = _s[0], setStateValue = _s[1];
-    var _t = React.useState(0), scrollPosition = _t[0], setScrollPosition = _t[1];
+    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 && allowOverflow && ((value === null || value === void 0 ? void 0 : value.slice(maxLength)) || stateValue.slice(maxLength)));
+    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
     React.useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -53,10 +55,19 @@ var Textarea = React.forwardRef(function (_a, ref) {
     }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     React.useEffect(function () {
-        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
+        if (autosize) {
+            if (nativeScrollbar &&
+                maxHeight &&
+                textareaRef.current &&
+                textareaRef.current.style) {
+                textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
+            }
         }
-    }, [autosize, maxHeight]);
+        else if (!nativeScrollbar && textareaRef.current) {
+            var textareaHeight = textareaRef.current.scrollHeight;
+            setScrollableHeight(textareaHeight);
+        }
+    }, [autosize, maxHeight, nativeScrollbar]);
     var handleTextareaFocus = function (event) {
         setFocused(true);
         if (onFocus) {
@@ -91,13 +102,33 @@ var Textarea = React.forwardRef(function (_a, ref) {
         return value.length;
     };
     var textareaClassNameCalc = cn__default.default(styles__default.default.textarea, colorStyles[colors].textarea, styles__default.default[size], (_b = {},
-        _b[styles__default.default.customScrollbar] = !nativeScrollbar,
-        _b[styles__default.default.hasInnerLabel] = hasInnerLabel,
+        _b[styles__default.default.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
         _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-        _b[styles__default.default.filled] = filled,
+        _b[styles__default.default.filled] = nativeScrollbar && filled,
         _b[styles__default.default.resizeVertical] = resize === 'vertical',
         _b), textareaClassName);
-    var textareaProps = tslib.__assign(tslib.__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, maxLength: allowOverflow ? undefined : maxLength, 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 textareaProps = tslib.__assign(tslib.__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, tslib.__assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default.default.createElement("textarea", tslib.__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__default.default.scrollable, styles__default.default[size], (_a = {},
+                _a[styles__default.default.scrollableWithLabel] = label,
+                _a[styles__default.default.filled] = filled,
+                _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles__default.default.scrollableWrapper } },
+            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, styles__default.default.customScrollbar), ref: pseudoTextareaRef })),
+            React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({}, textareaProps, { minRows: minRowsValue, style: { overflow: 'hidden' } })),
+            React__default.default.createElement(TextareaAutosize__default.default, { className: cn__default.default(textareaProps.className, styles__default.default.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, role: 'none', onHeightChange: function (height) {
+                    if (autosize) {
+                        setScrollableHeight(height);
+                        if (onHeightChange) {
+                            onHeightChange(height);
+                        }
+                    }
+                } })));
+    };
     var getBottomAddons = function () {
         var _a;
         var counterIsVisible = Boolean(maxLength && showCounter);
@@ -110,12 +141,9 @@ var Textarea = React.forwardRef(function (_a, ref) {
     };
     return (React__default.default.createElement(coreComponentsFormControl.FormControl, { className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
             _c[styles__default.default.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() },
-        React__default.default.createElement(React__default.default.Fragment, null,
-            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, (_d = {},
-                    _d[styles__default.default.nativeScrollbar] = nativeScrollbar,
-                    _d)), ref: pseudoTextareaRef })),
-            autosize ? (React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default.default.createElement("textarea", tslib.__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: 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, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, styles__default.default.nativeScrollbar), ref: pseudoTextareaRef })),
+        renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 
 exports.Textarea = Textarea;

package/textarea/cssm/index.js

@@ -7,6 +7,7 @@ require('react-merge-refs');
 require('react-textarea-autosize');
 require('classnames');
 require('../../form-control/cssm');
+require('../../scrollbar/cssm');
 require('@alfalab/hooks');
 require('./components/PseudoTextArea.js');
 require('./index.module.css');

package/textarea/cssm/index.module.css

@@ -2,8 +2,6 @@
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
-    --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
-    --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -14,12 +12,15 @@
 
     /* Hard up */
 } :root {
-    --border-radius-circle: 50%;
 } :root {
     --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
 } :root {
 } :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;
@@ -42,6 +43,10 @@
     --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;
     --form-control-sub-paddings: 0;
 
     /* disabled */
@@ -81,7 +86,16 @@
     --textarea-xl-filled-min-height: calc(
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
-} .textarea {
+} .scrollable {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+} .scrollableWrapper {
+    box-sizing: border-box
+} .scrollableWrapper > * {
+        font-family: var(--font-family);
+    } .textarea {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -108,35 +122,9 @@
     } .textarea.xl {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
-    } .customScrollbar {
-    overflow: auto;
-    overflow: overlay;
-    cursor: auto;
-} .customScrollbar::-webkit-scrollbar {
-        width: 12px;
-    } .customScrollbar::-webkit-scrollbar-track {
-        background-color: transparent;
-    } .customScrollbar::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    } .customScrollbar::-webkit-scrollbar-thumb {
-        background-color: var(--color-light-graphic-primary-alpha-30);
-        border-radius: var(--border-radius-circle) / 6px;
-        border-color: transparent;
-        border-style: solid;
-        border-width: 4px;
-        background-clip: padding-box;
-        min-height: 40px;
-    } .customScrollbar::-webkit-scrollbar-thumb:hover {
-        border-radius: var(--border-radius-circle) / 7px;
-        border-width: 4px 3px;
-    } .customScrollbar::-webkit-scrollbar-thumb:active {
-        background-color: var(--color-light-graphic-primary-alpha-60);
-    } .customScrollbar::-webkit-resizer {
-        background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
-            no-repeat right bottom;
-    } .customScrollbar::-webkit-scrollbar-button,
-    .customScrollbar::-webkit-scrollbar-corner {
-        display: none;
+    } .textarea.textareaHidden {
+        position: absolute;
+        transform: translateX(-10000px);
     } .textarea::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 } .hasInnerLabel::placeholder {
@@ -160,6 +148,8 @@
         background-color: var(--color-light-graphic-negative-alpha-40);
     } .pseudoTextarea.nativeScrollbar {
         overflow: auto;
+    } .pseudoTextarea.customScrollbar {
+        max-height: none;
     } .sub {
     font-size: 14px;
     line-height: 18px;
@@ -168,14 +158,28 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .textarea.s {
+} /* SIZES */ .textarea.s, .scrollable.s {
         min-height: var(--textarea-s-min-height);
-    } .textarea.m {
+    } .textarea.m, .scrollable.m {
         min-height: var(--textarea-m-min-height);
-    } .textarea.l {
+    } .textarea.l, .scrollable.l {
         min-height: var(--textarea-l-min-height);
-    } .textarea.xl {
+    } .textarea.xl, .scrollable.xl {
         min-height: var(--textarea-xl-min-height);
+    } /* Паддинги взяты из стилей form-control */ .scrollable.s .textarea, .scrollable.m .textarea, .scrollable.l .textarea {
+            padding-left: var(--gap-s);
+            padding-right: var(--gap-s);
+        } .scrollable.xl .textarea {
+            padding-left: var(--gap-m);
+            padding-right: var(--gap-m);
+        } /* Паддинги взяты из стилей form-control */ .scrollableWithLabel.s .textarea {
+        padding: var(--form-control-labeled-s-paddings);
+    } .scrollableWithLabel.m .textarea {
+        padding: var(--form-control-labeled-m-paddings);
+    } .scrollableWithLabel.l .textarea {
+        padding: var(--form-control-labeled-l-paddings);
+    } .scrollableWithLabel.xl .textarea {
+        padding: var(--form-control-labeled-xl-paddings);
     } /* DISABLED STATE */ .textarea:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
@@ -204,7 +208,29 @@
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);
-    } /* Correct pseudoTextarea size */ .pseudoTextarea.filled.hasInnerLabel.s {
+    } .scrollableWithLabel.filled .textarea {
+        padding-top: 0;
+    } .scrollableWithLabel.filled.s {
+        margin-top: var(--textarea-s-filled-margin-top);
+        min-height: var(--textarea-s-filled-min-height)
+    } .scrollableWithLabel.filled.s .textarea {
+            min-height: var(--textarea-s-filled-min-height);
+        } .scrollableWithLabel.filled.m {
+        margin-top: var(--textarea-m-filled-margin-top);
+        min-height: var(--textarea-m-filled-min-height)
+    } .scrollableWithLabel.filled.m .textarea {
+            min-height: var(--textarea-m-filled-min-height);
+        } .scrollableWithLabel.filled.l {
+        margin-top: var(--textarea-l-filled-margin-top);
+        min-height: var(--textarea-l-filled-min-height)
+    } .scrollableWithLabel.filled.l .textarea {
+            min-height: var(--textarea-l-filled-min-height);
+        } .scrollableWithLabel.filled.xl {
+        margin-top: var(--textarea-xl-filled-margin-top);
+        min-height: var(--textarea-xl-filled-min-height)
+    } .scrollableWithLabel.filled.xl .textarea {
+            min-height: var(--textarea-xl-filled-min-height);
+        } /* Correct pseudoTextarea size */ .pseudoTextarea.filled.hasInnerLabel.s {
         height: calc(100% - var(--textarea-s-filled-margin-top));
     } .pseudoTextarea.filled.hasInnerLabel.m {
         height: calc(100% - var(--textarea-m-filled-margin-top));

package/textarea/cssm/typings.d.ts

@@ -113,9 +113,5 @@ type TextareaIncomeProps = {
      * Нужно ли использовать нативный скроллбар.
      */
     nativeScrollbar?: boolean;
-    /**
-     * Разрешить переполнение, если количество символов превышает maxLength
-     */
-    allowOverflow?: boolean;
 };
 export { TextareaProps, TextareaIncomeProps };

package/textarea/default.css

@@ -1,4 +1,4 @@
-/* hash: 1ppv4 */
+/* hash: 9vh4z */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e;
@@ -38,28 +38,28 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_546ta {
+} .textarea__input_l2n1q {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_546ta:-webkit-autofill {
+} .textarea__input_l2n1q:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_546ta::placeholder {
+} .textarea__input_l2n1q::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_546ta::placeholder {
+} .textarea__hasInnerLabel_l2n1q::placeholder {
     color: var(--input-with-label-placeholder-color);
-} .textarea__clearIcon_546ta {
+} .textarea__clearIcon_l2n1q {
     color: var(--color-light-graphic-primary);
-} /* READ-ONLY STATE */ .textarea__input_546ta:read-only {
+} /* READ-ONLY STATE */ .textarea__input_l2n1q:read-only {
     color: var(--input-read-only-color)
-} .textarea__input_546ta:read-only:focus::placeholder {
+} .textarea__input_l2n1q:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_546ta:disabled {
+    } /* DISABLED STATE */ .textarea__input_l2n1q:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_546ta:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_l2n1q:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_546ta {
+} /* ERROR STATE */ .textarea__error_l2n1q {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -83,22 +83,22 @@
     /* font */
 
     /* border-radius */
-} .textarea__textarea_546ta {
+} .textarea__textarea_l2n1q {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_546ta::placeholder {
+} .textarea__textarea_l2n1q::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_546ta::placeholder {
+} .textarea__hasInnerLabel_l2n1q::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_546ta:disabled {
+} /* DISABLED STATE */ .textarea__textarea_l2n1q:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_546ta:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_l2n1q:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_546ta:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_l2n1q:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_546ta {
+} .textarea__hint_l2n1q {
     color: var(--form-control-hint-color);
-} .textarea__error_546ta {
+} .textarea__error_l2n1q {
     color: var(--form-control-error-color);
 }