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

package/tag/modern/index.css

@@ -52,7 +52,7 @@
 
     /* text color */
 }
-.tag__component_17xlc {
+.tag__component_dudlg {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -70,40 +70,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_17xlc:disabled {
+.tag__component_dudlg:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_17xlc {
+.tag__focused_dudlg {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_17xlc {
+.tag__addons_dudlg {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_17xlc:first-child {
+.tag__addons_dudlg:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_17xlc:last-child {
+.tag__addons_dudlg:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_17xlc:only-child {
+.tag__addons_dudlg:only-child {
         margin: 0;
     }
-.tag__s_17xlc .tag__addons_17xlc:first-child, .tag__m_17xlc .tag__addons_17xlc:first-child {
+.tag__s_dudlg .tag__addons_dudlg:first-child, .tag__m_dudlg .tag__addons_dudlg:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_17xlc .tag__addons_17xlc:last-child, .tag__m_17xlc .tag__addons_17xlc:last-child {
+.tag__s_dudlg .tag__addons_dudlg:last-child, .tag__m_dudlg .tag__addons_dudlg:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_17xlc .tag__addons_17xlc:first-child, .tag__xl_17xlc .tag__addons_17xlc:first-child {
+.tag__l_dudlg .tag__addons_dudlg:first-child, .tag__xl_dudlg .tag__addons_dudlg:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_17xlc .tag__addons_17xlc:last-child, .tag__xl_17xlc .tag__addons_17xlc:last-child {
+.tag__l_dudlg .tag__addons_dudlg:last-child, .tag__xl_dudlg .tag__addons_dudlg:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_17xlc {
+.tag__xxs_dudlg {
     min-width: 60px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
@@ -112,13 +112,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xxs_17xlc {
+.tag__xxs_dudlg {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_17xlc {
+.tag__xs_dudlg {
     min-width: 72px;
     min-height: 40px;
     padding: 0 var(--gap-l);
@@ -127,13 +127,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xs_17xlc {
+.tag__xs_dudlg {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_17xlc {
+.tag__s_dudlg {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
@@ -142,13 +142,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__s_17xlc {
+.tag__s_dudlg {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_17xlc {
+.tag__m_dudlg {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
@@ -157,13 +157,13 @@
     padding: 0 28px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__m_17xlc {
+.tag__m_dudlg {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_17xlc {
+.tag__l_dudlg {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -172,13 +172,13 @@
     padding: 0 var(--gap-2xl)
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__l_17xlc {
+.tag__l_dudlg {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_17xlc {
+.tag__xl_dudlg {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -187,51 +187,51 @@
     padding: 0 36px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xl_17xlc {
+.tag__xl_dudlg {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_17xlc.tag__xxs_17xlc {
+.tag__withRightAddons_dudlg.tag__xxs_dudlg {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_17xlc.tag__xs_17xlc {
+.tag__withRightAddons_dudlg.tag__xs_dudlg {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_17xlc.tag__s_17xlc {
+.tag__withRightAddons_dudlg.tag__s_dudlg {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_17xlc.tag__m_17xlc {
+.tag__withRightAddons_dudlg.tag__m_dudlg {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_17xlc.tag__l_17xlc {
+.tag__withRightAddons_dudlg.tag__l_dudlg {
         padding-right: 28px;
     }
-.tag__withRightAddons_17xlc.tag__xl_17xlc {
+.tag__withRightAddons_dudlg.tag__xl_dudlg {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_17xlc.tag__xxs_17xlc {
+.tag__withLeftAddons_dudlg.tag__xxs_dudlg {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_17xlc.tag__xs_17xlc {
+.tag__withLeftAddons_dudlg.tag__xs_dudlg {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_17xlc.tag__s_17xlc {
+.tag__withLeftAddons_dudlg.tag__s_dudlg {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_17xlc.tag__m_17xlc {
+.tag__withLeftAddons_dudlg.tag__m_dudlg {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_17xlc.tag__l_17xlc {
+.tag__withLeftAddons_dudlg.tag__l_dudlg {
         padding-left: 28px;
     }
-.tag__withLeftAddons_17xlc.tag__xl_17xlc {
+.tag__withLeftAddons_dudlg.tag__xl_dudlg {
         padding-left: var(--gap-2xl);
     }
-.tag__defaultVariant_17xlc {
+.tag__defaultVariant_dudlg {
     border-radius: var(--tag-border-radius);
 }
-.tag__alt_17xlc {
+.tag__alt_dudlg {
     border-radius: var(--tag-alt-border-radius);
 }

package/tag/modern/inverted.css

@@ -8,6 +8,7 @@
     --color-dark-text-primary-inverted: #0b1f35;
     --color-dark-text-tertiary: #6d7986;
     --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
     --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
 }
 :root {
@@ -53,39 +54,39 @@
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
 }
-.tag__component_1eiy9 {
+.tag__component_kfzbz {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_1eiy9:disabled {
+.tag__component_kfzbz:disabled {
         border-color: var(--tag-inverted-border-color-disabled);
         color: var(--tag-inverted-text-color-disabled);
         background-color: var(--tag-inverted-background-color-disabled);
     }
-.tag__component_1eiy9:hover:not(:disabled) {
+.tag__component_kfzbz:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_1eiy9:active:not(:disabled) {
+.tag__component_kfzbz:active:not(:disabled) {
         border-color: var(--tag-inverted-border-color-active);
         background-color: var(--tag-inverted-background-color-active);
         color: var(--tag-inverted-text-color);
     }
-.tag__checked_1eiy9 {
+.tag__checked_kfzbz {
     border-color: var(--tag-inverted-border-color-checked);
     background-color: var(--tag-inverted-background-color-checked);
     color: var(--tag-inverted-text-color-checked)
 }
-.tag__checked_1eiy9:disabled {
+.tag__checked_kfzbz:disabled {
         background-color: var(--tag-inverted-background-color-checked-disabled);
         border-color: var(--tag-inverted-border-color-checked-disabled);
         color: var(--tag-inverted-text-color-checked-disabled);
     }
-.tag__checked_1eiy9:hover:not(:disabled):not(:active) {
+.tag__checked_kfzbz:hover:not(:disabled):not(:active) {
         background-color: var(--tag-inverted-background-color-checked-hover);
     }
-.tag__checked_1eiy9:active:not(:disabled) {
+.tag__checked_kfzbz:active:not(:disabled) {
         background-color: var(--tag-inverted-background-color-checked-active);
         color: var(--tag-inverted-text-color-checked);
     }

package/textarea/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/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');
 var coreComponentsFormControl = require('../form-control');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -53,13 +54,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"textarea":"textarea__textarea_xts6h","s":"textarea__s_xts6h","m":"textarea__m_xts6h","l":"textarea__l_xts6h","xl":"textarea__xl_xts6h","hasLabel":"textarea__hasLabel_xts6h","resizeVertical":"textarea__resizeVertical_xts6h","focusVisible":"textarea__focusVisible_xts6h","filled":"textarea__filled_xts6h"};
+var styles = {"scrollable":"textarea__scrollable_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');
 
 var colorStyles = {
@@ -72,39 +73,52 @@ 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, _j = _a.labelView, labelView = _j === void 0 ? 'inner' : _j, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _k = _a.resize, resize = _k === void 0 ? 'none' : _k, value = _a.value, defaultValue = _a.defaultValue, _l = _a.rows, rows = _l === void 0 ? autosize ? 1 : 3 : _l, _m = _a.showCounter, showCounter = _m === void 0 ? false : _m, _o = _a.getCounterText, getCounterText = _o === void 0 ? getDefaultCounterText : _o, maxLength = _a.maxLength, nativeScrollbarProp = _a.nativeScrollbar, restProps = __rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength", "nativeScrollbar"]);
     var uncontrolled = value === undefined;
+    var nativeScrollbar = 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 _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 focusVisible = hooks.useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
+    var hasInnerLabel = label && labelView === 'inner';
     // Хак, так как 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;
@@ -118,15 +132,35 @@ var Textarea = React.forwardRef(function (_a, ref) {
         return hint;
     };
     var textareaProps = __assign(__assign({}, restProps), { className: cn__default['default'](styles.textarea, colorStyles[colors].textarea, styles[size], (_b = {},
-            _b[styles.hasLabel] = label,
-            _b[colorStyles[colors].hasLabel] = label,
-            _b[styles.filled] = filled,
+            _b[styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
+            _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
+            _b[styles.filled] = nativeScrollbar && filled,
             _b[styles.resizeVertical] = resize === 'vertical',
             _b), textareaClassName), autoComplete: autoComplete,
         disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__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.scrollable, styles[size], (_a = {},
+                _a[styles.scrollableWithLabel] = label,
+                _a[styles.filled] = filled,
+                _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.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.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.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, labelView: labelView, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
 });
 /**
  * Для отображения в сторибуке

package/textarea/cssm/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 };