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

package/textarea/cssm/Component.js

@@ -6,7 +6,6 @@ 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');
@@ -32,21 +31,20 @@ 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;
-    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 _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 uncontrolled = value === undefined;
     var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
-    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
+    nativeScrollbar = 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 _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 focusVisible = hooks.useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
-    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
+    var hasOverflow = Boolean(maxLength && allowOverflow && ((value === null || value === void 0 ? void 0 : value.slice(maxLength)) || stateValue.slice(maxLength)));
     React.useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -55,19 +53,10 @@ var Textarea = React.forwardRef(function (_a, ref) {
     }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     React.useEffect(function () {
-        if (autosize) {
-            if (nativeScrollbar &&
-                maxHeight &&
-                textareaRef.current &&
-                textareaRef.current.style) {
-                textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
-            }
+        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
+            textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
         }
-        else if (!nativeScrollbar && textareaRef.current) {
-            var textareaHeight = textareaRef.current.scrollHeight;
-            setScrollableHeight(textareaHeight);
-        }
-    }, [autosize, maxHeight, nativeScrollbar]);
+    }, [autosize, maxHeight]);
     var handleTextareaFocus = function (event) {
         setFocused(true);
         if (onFocus) {
@@ -102,33 +91,13 @@ 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.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
+        _b[styles__default.default.customScrollbar] = !nativeScrollbar,
+        _b[styles__default.default.hasInnerLabel] = hasInnerLabel,
         _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-        _b[styles__default.default.filled] = nativeScrollbar && filled,
+        _b[styles__default.default.filled] = filled,
         _b[styles__default.default.resizeVertical] = resize === 'vertical',
         _b), textareaClassName);
-    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 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 getBottomAddons = function () {
         var _a;
         var counterIsVisible = Boolean(maxLength && showCounter);
@@ -141,9 +110,12 @@ 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() }, 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())));
+            _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 } }))))));
 });
 
 exports.Textarea = Textarea;

package/textarea/cssm/index.js

@@ -7,7 +7,6 @@ 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,6 +2,8 @@
 } /* 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 {
@@ -12,15 +14,12 @@
 
     /* 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;
@@ -43,10 +42,6 @@
     --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 */
@@ -86,16 +81,7 @@
     --textarea-xl-filled-min-height: calc(
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
-} .scrollable {
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-} .scrollableWrapper {
-    box-sizing: border-box
-} .scrollableWrapper > * {
-        font-family: var(--font-family);
-    } .textarea {
+} .textarea {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -122,9 +108,35 @@
     } .textarea.xl {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
-    } .textarea.textareaHidden {
-        position: absolute;
-        transform: translateX(-10000px);
+    } .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::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 } .hasInnerLabel::placeholder {
@@ -148,8 +160,6 @@
         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;
@@ -158,28 +168,14 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .textarea.s, .scrollable.s {
+} /* SIZES */ .textarea.s {
         min-height: var(--textarea-s-min-height);
-    } .textarea.m, .scrollable.m {
+    } .textarea.m {
         min-height: var(--textarea-m-min-height);
-    } .textarea.l, .scrollable.l {
+    } .textarea.l {
         min-height: var(--textarea-l-min-height);
-    } .textarea.xl, .scrollable.xl {
+    } .textarea.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;
@@ -208,29 +204,7 @@
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);
-    } .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 {
+    } /* 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,5 +113,9 @@ type TextareaIncomeProps = {
      * Нужно ли использовать нативный скроллбар.
      */
     nativeScrollbar?: boolean;
+    /**
+     * Разрешить переполнение, если количество символов превышает maxLength
+     */
+    allowOverflow?: boolean;
 };
 export { TextareaProps, TextareaIncomeProps };

package/textarea/default.css

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

package/textarea/esm/Component.js

@@ -4,14 +4,13 @@ import mergeRefs from 'react-merge-refs';
 import TextareaAutosize from 'react-textarea-autosize';
 import cn from 'classnames';
 import { FormControl } from '../../form-control/esm';
-import { Scrollbar } from '../../scrollbar/esm';
 import { useMedia, useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-0d5b99e4.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-84fa7d80.js';
 
-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"};
+var defaultColors = {"input":"textarea__input_q4kui","hasInnerLabel":"textarea__hasInnerLabel_q4kui","clearIcon":"textarea__clearIcon_q4kui","error":"textarea__error_q4kui","textarea":"textarea__textarea_q4kui","hint":"textarea__hint_q4kui"};
 require('./default.css');
 
-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"};
+var invertedColors = {"input":"textarea__input_1kui6","hasInnerLabel":"textarea__hasInnerLabel_1kui6","clearIcon":"textarea__clearIcon_1kui6","error":"textarea__error_1kui6","textarea":"textarea__textarea_1kui6","hint":"textarea__hint_1kui6"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -23,21 +22,20 @@ var getDefaultCounterText = function (textLength, maxLength) {
     return "".concat(textLength, "/").concat(maxLength, " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432");
 };
 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, _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 _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 = __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 uncontrolled = value === undefined;
     var nativeScrollbar = useMedia([[true, '(max-width: 1023px)']], false)[0];
-    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
+    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = useRef(null);
     var pseudoTextareaRef = useRef(null);
-    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 _s = useState(0), scrollPosition = _s[0], setScrollPosition = _s[1];
+    var _r = useState(false), focused = _r[0], setFocused = _r[1];
+    var _s = useState(defaultValue || ''), stateValue = _s[0], setStateValue = _s[1];
+    var _t = useState(0), scrollPosition = _t[0], setScrollPosition = _t[1];
     var focusVisible = useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
-    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
+    var hasOverflow = Boolean(maxLength && allowOverflow && ((value === null || value === void 0 ? void 0 : value.slice(maxLength)) || stateValue.slice(maxLength)));
     useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -46,19 +44,10 @@ var Textarea = forwardRef(function (_a, ref) {
     }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(function () {
-        if (autosize) {
-            if (nativeScrollbar &&
-                maxHeight &&
-                textareaRef.current &&
-                textareaRef.current.style) {
-                textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
-            }
+        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
+            textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
         }
-        else if (!nativeScrollbar && textareaRef.current) {
-            var textareaHeight = textareaRef.current.scrollHeight;
-            setScrollableHeight(textareaHeight);
-        }
-    }, [autosize, maxHeight, nativeScrollbar]);
+    }, [autosize, maxHeight]);
     var handleTextareaFocus = function (event) {
         setFocused(true);
         if (onFocus) {
@@ -93,33 +82,13 @@ var Textarea = forwardRef(function (_a, ref) {
         return value.length;
     };
     var textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[size], (_b = {},
-        _b[styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
+        _b[styles.customScrollbar] = !nativeScrollbar,
+        _b[styles.hasInnerLabel] = hasInnerLabel,
         _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-        _b[styles.filled] = nativeScrollbar && filled,
+        _b[styles.filled] = filled,
         _b[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([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
-    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 } },
-            hasOverflow && (React.createElement(PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.customScrollbar), ref: pseudoTextareaRef })),
-            React.createElement(TextareaAutosize, __assign({}, textareaProps, { minRows: minRowsValue, style: { overflow: 'hidden' } })),
-            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, 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 textareaProps = __assign(__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([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
     var getBottomAddons = function () {
         var _a;
         var counterIsVisible = Boolean(maxLength && showCounter);
@@ -132,9 +101,12 @@ var Textarea = forwardRef(function (_a, ref) {
     };
     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, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons() }, nativeScrollbar ? (React.createElement(React.Fragment, null,
-        hasOverflow && (React.createElement(PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.nativeScrollbar), ref: pseudoTextareaRef })),
-        renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
+            _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.createElement(React.Fragment, null,
+            hasOverflow && (React.createElement(PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, (_d = {},
+                    _d[styles.nativeScrollbar] = nativeScrollbar,
+                    _d)), ref: pseudoTextareaRef })),
+            autosize ? (React.createElement(TextareaAutosize, __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } }))))));
 });
 
 export { Textarea, getDefaultCounterText };

package/textarea/esm/PseudoTextArea-84fa7d80.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+var styles = {"textarea":"textarea__textarea_12s4k","s":"textarea__s_12s4k","m":"textarea__m_12s4k","l":"textarea__l_12s4k","xl":"textarea__xl_12s4k","customScrollbar":"textarea__customScrollbar_12s4k","hasInnerLabel":"textarea__hasInnerLabel_12s4k","resizeVertical":"textarea__resizeVertical_12s4k","pseudoTextarea":"textarea__pseudoTextarea_12s4k","overflow":"textarea__overflow_12s4k","nativeScrollbar":"textarea__nativeScrollbar_12s4k","sub":"textarea__sub_12s4k","focusVisible":"textarea__focusVisible_12s4k","filled":"textarea__filled_12s4k"};
+require('./index.css');
+
+var PseudoTextArea = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, pseudoTextareaClassName = _a.pseudoTextareaClassName, maxLength = _a.maxLength, value = _a.value;
+    return (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[size], pseudoTextareaClassName), ref: ref, hidden: true },
+        React.createElement("span", null, value.slice(0, maxLength)),
+        React.createElement("span", { className: cn(styles.overflow) }, value.slice(maxLength)),
+        React.createElement("br", null)));
+});
+
+export { PseudoTextArea as P, styles as s };

package/textarea/esm/components/PseudoTextArea.js

@@ -1,3 +1,3 @@
 import 'react';
 import 'classnames';
-export { P as PseudoTextArea } from '../PseudoTextArea-0d5b99e4.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-84fa7d80.js';

package/textarea/esm/components/index.d.ts

@@ -1 +1 @@
-export * from "../PseudoTextArea-0d5b99e4";
+export * from "../PseudoTextArea-84fa7d80";

package/textarea/esm/components/index.js

@@ -1,3 +1,3 @@
-export { P as PseudoTextArea } from '../PseudoTextArea-0d5b99e4.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-84fa7d80.js';
 import 'react';
 import 'classnames';

package/textarea/esm/default.css

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