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

package/textarea/index.css

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

package/textarea/index.js

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

package/textarea/inverted.css

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

package/textarea/modern/Component.d.ts

@@ -35,6 +35,10 @@ type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValu
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
     /**
      * Слот слева
      */
@@ -105,9 +109,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"> & {
     /**
      * Значение поля ввода
      */
@@ -140,6 +148,10 @@ declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "class
      * Лейбл компонента
      */
     label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
     /**
      * Слот слева
      */
@@ -210,5 +222,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/modern/Component.js

@@ -1,17 +1,18 @@
-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/modern';
 import { FormControl } from '../../form-control/modern';
 
-var styles = {"textarea":"textarea__textarea_xts6h","s":"textarea__s_xts6h","m":"textarea__m_xts6h","l":"textarea__l_xts6h","xl":"textarea__xl_xts6h","hasLabel":"textarea__hasLabel_xts6h","resizeVertical":"textarea__resizeVertical_xts6h","focusVisible":"textarea__focusVisible_xts6h","filled":"textarea__filled_xts6h"};
+var styles = {"scrollable":"textarea__scrollable_1eecc","scrollableWrapper":"textarea__scrollableWrapper_1eecc","textarea":"textarea__textarea_1eecc","s":"textarea__s_1eecc","m":"textarea__m_1eecc","l":"textarea__l_1eecc","xl":"textarea__xl_1eecc","textareaHidden":"textarea__textareaHidden_1eecc","hasInnerLabel":"textarea__hasInnerLabel_1eecc","resizeVertical":"textarea__resizeVertical_1eecc","scrollableWithLabel":"textarea__scrollableWithLabel_1eecc","focusVisible":"textarea__focusVisible_1eecc","filled":"textarea__filled_1eecc"};
 require('./index.css');
 
-var defaultColors = {"input":"textarea__input_1exv0","hasLabel":"textarea__hasLabel_1exv0","clearIcon":"textarea__clearIcon_1exv0","errorIcon":"textarea__errorIcon_1exv0","successIcon":"textarea__successIcon_1exv0","error":"textarea__error_1exv0","textarea":"textarea__textarea_1exv0"};
+var defaultColors = {"input":"textarea__input_110j4","hasInnerLabel":"textarea__hasInnerLabel_110j4","clearIcon":"textarea__clearIcon_110j4","errorIcon":"textarea__errorIcon_110j4","successIcon":"textarea__successIcon_110j4","error":"textarea__error_110j4","textarea":"textarea__textarea_110j4"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_amoak","hasLabel":"textarea__hasLabel_amoak","clearIcon":"textarea__clearIcon_amoak","errorIcon":"textarea__errorIcon_amoak","successIcon":"textarea__successIcon_amoak","error":"textarea__error_amoak","textarea":"textarea__textarea_amoak"};
+var invertedColors = {"input":"textarea__input_1vqgg","hasInnerLabel":"textarea__hasInnerLabel_1vqgg","clearIcon":"textarea__clearIcon_1vqgg","errorIcon":"textarea__errorIcon_1vqgg","successIcon":"textarea__successIcon_1vqgg","error":"textarea__error_1vqgg","textarea":"textarea__textarea_1vqgg"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -19,39 +20,52 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
-const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's', colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, ...restProps }, ref) => {
+const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's', colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, nativeScrollbar: nativeScrollbarProp, ...restProps }, ref) => {
     const uncontrolled = value === undefined;
+    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
+    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp ?? nativeScrollbar);
     const textareaRef = useRef(null);
     const [focused, setFocused] = useState(false);
     const [stateValue, setStateValue] = useState(defaultValue || '');
+    const [scrollableHeight, setScrollableHeight] = useState();
     const [focusVisible] = useFocus(textareaRef, 'keyboard');
     const filled = Boolean(uncontrolled ? stateValue : value);
+    const hasInnerLabel = label && labelView === 'inner';
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(() => {
-        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]);
-    const handleTextareaFocus = useCallback((event) => {
+        else if (!nativeScrollbar && textareaRef.current) {
+            const textareaHeight = textareaRef.current.scrollHeight;
+            setScrollableHeight(textareaHeight);
+        }
+    }, [autosize, maxHeight, nativeScrollbar]);
+    const handleTextareaFocus = (event) => {
         setFocused(true);
         if (onFocus) {
             onFocus(event);
         }
-    }, [onFocus]);
-    const handleTextareaBlur = useCallback((event) => {
+    };
+    const handleTextareaBlur = (event) => {
         setFocused(false);
         if (onBlur) {
             onBlur(event);
         }
-    }, [onBlur]);
-    const handleTextareaChange = useCallback((event) => {
+    };
+    const handleTextareaChange = (event) => {
         if (onChange) {
             onChange(event, { value: event.target.value });
         }
         if (uncontrolled) {
             setStateValue(event.target.value);
         }
-    }, [onChange, uncontrolled]);
+    };
     const getValueLength = () => {
         if (uncontrolled) {
             return stateValue.length;
@@ -67,9 +81,9 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     const textareaProps = {
         ...restProps,
         className: cn(styles.textarea, colorStyles[colors].textarea, styles[size], {
-            [styles.hasLabel]: label,
-            [colorStyles[colors].hasLabel]: label,
-            [styles.filled]: filled,
+            [styles.hasInnerLabel]: nativeScrollbar && hasInnerLabel,
+            [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
+            [styles.filled]: nativeScrollbar && filled,
             [styles.resizeVertical]: resize === 'vertical',
         }, textareaClassName),
         autoComplete,
@@ -83,9 +97,28 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         'data-test-id': dataTestId,
         maxLength,
     };
+    const renderWithNativeScrollbar = () => {
+        return autosize ? (React.createElement(TextareaAutosize, Object.assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", Object.assign({}, textareaProps, { style: { maxHeight } })));
+    };
+    const renderWithCustomScrollbar = () => {
+        const minRowsValue = autosize ? minRows : rows;
+        return (React.createElement(Scrollbar, { style: { maxHeight, height: scrollableHeight, padding: 0 }, className: cn(styles.scrollable, styles[size], {
+                [styles.scrollableWithLabel]: label,
+                [styles.filled]: filled,
+            }), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.scrollableWrapper } },
+            React.createElement(TextareaAutosize, Object.assign({}, textareaProps, { minRows: minRowsValue })),
+            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: height => {
+                    if (autosize) {
+                        setScrollableHeight(height);
+                        if (onHeightChange) {
+                            onHeightChange(height);
+                        }
+                    }
+                } })));
+    };
     return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, {
             [styles.focusVisible]: focusVisible,
-        }), 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, Object.assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", Object.assign({}, textareaProps, { style: { maxHeight } })))));
+        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
 });
 /**
  * Для отображения в сторибуке

package/textarea/modern/default.css

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