@alfalab/core-components 30.2.1 → 30.4.1

package/textarea/cssm/Component.js

@@ -5,6 +5,7 @@ var cn = require('classnames');
 var TextareaAutosize = require('react-textarea-autosize');
 var mergeRefs = require('react-merge-refs');
 var hooks = require('@alfalab/hooks');
+var coreComponentsScrollbar = require('../../scrollbar/cssm');
 var coreComponentsFormControl = require('../../form-control/cssm');
 var styles = require('./index.module.css');
 var defaultColors = require('./default.module.css');
@@ -69,39 +70,51 @@ var getDefaultCounterText = function (textLength, maxLength) {
 };
 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, 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, 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, nativeScrollbarProp = _a.nativeScrollbar, 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", "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);
     var textareaRef = React.useRef(null);
     var _o = React.useState(false), focused = _o[0], setFocused = _o[1];
     var _p = React.useState(defaultValue || ''), stateValue = _p[0], setStateValue = _p[1];
+    var _q = React.useState(), scrollableHeight = _q[0], setScrollableHeight = _q[1];
     var focusVisible = hooks.useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     React.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 = React.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 = React.useCallback(function (event) {
+    };
+    var handleTextareaBlur = function (event) {
         setFocused(false);
         if (onBlur) {
             onBlur(event);
         }
-    }, [onBlur]);
-    var handleTextareaChange = React.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;
@@ -115,15 +128,35 @@ var Textarea = React.forwardRef(function (_a, ref) {
         return hint;
     };
     var textareaProps = __assign(__assign({}, restProps), { className: cn__default['default'](styles__default['default'].textarea, colorStyles[colors].textarea, styles__default['default'][size], (_b = {},
-            _b[styles__default['default'].hasLabel] = label,
+            _b[styles__default['default'].hasLabel] = nativeScrollbar && label,
             _b[colorStyles[colors].hasLabel] = label,
-            _b[styles__default['default'].filled] = filled,
+            _b[styles__default['default'].filled] = nativeScrollbar && filled,
             _b[styles__default['default'].resizeVertical] = resize === 'vertical',
             _b), textareaClassName), autoComplete: autoComplete,
         disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default['default']([ref, textareaRef]), 'data-test-id': dataTestId, maxLength: maxLength });
+    var renderWithNativeScrollbar = function () {
+        return autosize ? (React__default['default'].createElement(TextareaAutosize__default['default'], __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default['default'].createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })));
+    };
+    var renderWithCustomScrollbar = function () {
+        var _a;
+        var minRowsValue = autosize ? minRows : rows;
+        return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { style: { maxHeight: maxHeight, height: scrollableHeight, padding: 0 }, className: cn__default['default'](styles__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 } },
+            React__default['default'].createElement(TextareaAutosize__default['default'], __assign({}, textareaProps, { minRows: minRowsValue })),
+            React__default['default'].createElement(TextareaAutosize__default['default'], { className: cn__default['default'](textareaProps.className, styles__default['default'].textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
+                    if (autosize) {
+                        setScrollableHeight(height);
+                        if (onHeightChange) {
+                            onHeightChange(height);
+                        }
+                    }
+                } })));
+    };
     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, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, autosize ? (React__default['default'].createElement(TextareaAutosize__default['default'], __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default['default'].createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })))));
+            _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 }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
 });
 /**
  * Для отображения в сторибуке

package/textarea/cssm/default.module.css

@@ -29,6 +29,10 @@
 
     /* error */
     --input-error-color: var(--color-light-text-primary);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
 .input {
     color: var(--input-color);

package/textarea/cssm/index.js

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

package/textarea/cssm/index.module.css

@@ -11,10 +11,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 */
@@ -49,6 +83,18 @@
         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 {
     font-size: 16px;
     line-height: 20px;
@@ -82,6 +128,10 @@
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
+.textarea.textareaHidden {
+        position: absolute;
+        transform: translateX(-10000px);
+    }
 .textarea::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
@@ -92,18 +142,40 @@
     resize: vertical;
 }
 /* SIZES */
-.textarea.s {
+.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);
@@ -145,3 +217,34 @@
         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);
+        }

package/textarea/cssm/inverted.module.css

@@ -29,6 +29,10 @@
 
     /* error */
     --input-inverted-error-color: var(--color-light-text-primary-inverted);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
 .input {
     color: var(--input-inverted-color);

package/textarea/default.css

@@ -1,4 +1,4 @@
-/* hash: 2t6ow */
+/* hash: 1egkw */
 :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_5ixh1 {
+.textarea__input_afd1k {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_5ixh1:-webkit-autofill {
+.textarea__input_afd1k:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_5ixh1::placeholder {
+.textarea__input_afd1k::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_5ixh1::placeholder {
+.textarea__hasLabel_afd1k::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_5ixh1 {
+.textarea__clearIcon_afd1k {
     color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_5ixh1 {
+.textarea__errorIcon_afd1k {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_5ixh1 {
+.textarea__successIcon_afd1k {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_5ixh1:read-only {
+.textarea__input_afd1k:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_5ixh1:read-only:focus::placeholder {
+.textarea__input_afd1k:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_5ixh1:disabled {
+.textarea__input_afd1k:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_5ixh1:focus::placeholder {
+.textarea__input_afd1k:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_5ixh1 {
+.textarea__error_afd1k {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_5ixh1 {
+.textarea__textarea_afd1k {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_5ixh1::placeholder {
+.textarea__textarea_afd1k::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasLabel_5ixh1::placeholder {
+.textarea__hasLabel_afd1k::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_5ixh1:disabled {
+.textarea__textarea_afd1k:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_5ixh1:read-only {
+.textarea__textarea_afd1k:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_5ixh1:focus::placeholder {
+.textarea__textarea_afd1k:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/esm/Component.d.ts

@@ -105,9 +105,13 @@ type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValu
      * Функция, возвращающая текст для счетчика
      */
     getCounterText?: (textLength: number, maxLength?: number) => string;
+    /**
+     * Нужно ли использовать нативный скроллбар.
+     */
+    nativeScrollbar?: boolean;
 };
 declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
-declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "className" | "disabled" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "maxLength" | "minLength" | "name" | "readOnly" | "required" | "rows" | "wrap"> & {
+declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "className" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "disabled" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "maxLength" | "minLength" | "name" | "readOnly" | "required" | "rows" | "wrap"> & {
     /**
      * Значение поля ввода
      */
@@ -210,5 +214,9 @@ declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "class
      * Функция, возвращающая текст для счетчика
      */
     getCounterText?: ((textLength: number, maxLength?: number | undefined) => string) | undefined;
+    /**
+     * Нужно ли использовать нативный скроллбар.
+     */
+    nativeScrollbar?: boolean | undefined;
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export { TextareaProps, getDefaultCounterText, Textarea };

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_iwqoy","s":"textarea__s_iwqoy","m":"textarea__m_iwqoy","l":"textarea__l_iwqoy","xl":"textarea__xl_iwqoy","hasLabel":"textarea__hasLabel_iwqoy","resizeVertical":"textarea__resizeVertical_iwqoy","focusVisible":"textarea__focusVisible_iwqoy","filled":"textarea__filled_iwqoy"};
+var styles = {"scrollable":"textarea__scrollable_1yx2j","scrollableWrapper":"textarea__scrollableWrapper_1yx2j","textarea":"textarea__textarea_1yx2j","s":"textarea__s_1yx2j","m":"textarea__m_1yx2j","l":"textarea__l_1yx2j","xl":"textarea__xl_1yx2j","textareaHidden":"textarea__textareaHidden_1yx2j","hasLabel":"textarea__hasLabel_1yx2j","resizeVertical":"textarea__resizeVertical_1yx2j","scrollableWithLabel":"textarea__scrollableWithLabel_1yx2j","focusVisible":"textarea__focusVisible_1yx2j","filled":"textarea__filled_1yx2j"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_5ixh1","hasLabel":"textarea__hasLabel_5ixh1","clearIcon":"textarea__clearIcon_5ixh1","errorIcon":"textarea__errorIcon_5ixh1","successIcon":"textarea__successIcon_5ixh1","error":"textarea__error_5ixh1","textarea":"textarea__textarea_5ixh1"};
+var defaultColors = {"input":"textarea__input_afd1k","hasLabel":"textarea__hasLabel_afd1k","clearIcon":"textarea__clearIcon_afd1k","errorIcon":"textarea__errorIcon_afd1k","successIcon":"textarea__successIcon_afd1k","error":"textarea__error_afd1k","textarea":"textarea__textarea_afd1k"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_108ut","hasLabel":"textarea__hasLabel_108ut","clearIcon":"textarea__clearIcon_108ut","errorIcon":"textarea__errorIcon_108ut","successIcon":"textarea__successIcon_108ut","error":"textarea__error_108ut","textarea":"textarea__textarea_108ut"};
+var invertedColors = {"input":"textarea__input_155ad","hasLabel":"textarea__hasLabel_155ad","clearIcon":"textarea__clearIcon_155ad","errorIcon":"textarea__errorIcon_155ad","successIcon":"textarea__successIcon_155ad","error":"textarea__error_155ad","textarea":"textarea__textarea_155ad"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -63,39 +64,51 @@ 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, 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, nativeScrollbarProp = _a.nativeScrollbar, 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", "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 _q = useState(), scrollableHeight = _q[0], setScrollableHeight = _q[1];
     var focusVisible = useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     // Хак, так как 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 +122,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[styles.hasLabel] = nativeScrollbar && label,
             _b[colorStyles[colors].hasLabel] = label,
-            _b[styles.filled] = filled,
+            _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, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
 });
 /**
  * Для отображения в сторибуке