@alfalab/core-components 45.8.0-beta.5 → 45.9.0-beta.0

package/textarea/cssm/Component.js

@@ -1,84 +1,66 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import TextareaAutosize from 'react-textarea-autosize';
+import cn from 'classnames';
+import { FormControl } from '../../form-control/cssm';
+import { getDataTestId } from '../../shared/cssm';
+import { useMedia, useFocus } from '@alfalab/hooks';
+import { PseudoTextArea } from './components/PseudoTextArea.js';
+import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var TextareaAutosize = require('react-textarea-autosize');
-var cn = require('classnames');
-var coreComponentsFormControl = require('../../form-control/cssm');
-var coreComponentsShared = require('../../shared/cssm');
-var hooks = require('@alfalab/hooks');
-var components_PseudoTextArea = require('./components/PseudoTextArea.js');
-var consts = require('./consts.js');
-var defaultColors = require('./default.module.css');
-var styles = require('./index.module.css');
-var invertedColors = require('./inverted.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var TextareaAutosize__default = /*#__PURE__*/_interopDefaultCompat(TextareaAutosize);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
-
-var colorStyles = {
-    default: defaultColors__default.default,
-    inverted: invertedColors__default.default,
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
 };
-var getDefaultCounterText = function (textLength, maxLength) {
-    if (maxLength === void 0) { maxLength = 0; }
-    return "".concat(textLength, "/").concat(maxLength, " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432");
-};
-var Textarea = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var _e = _a.autoComplete, autoComplete = _e === void 0 ? 'on' : _e, _f = _a.autosize, autosize = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? 48 : _g, _h = _a.colors, colors = _h === void 0 ? 'default' : _h, _j = _a.block, block = _j === void 0 ? false : _j, bottomAddons = _a.bottomAddons, fieldClassName = _a.fieldClassName, className = _a.className, dataTestId = _a.dataTestId, disabled = _a.disabled, error = _a.error, hint = _a.hint, textareaClassName = _a.textareaClassName, label = _a.label, _k = _a.labelView, labelView = _k === void 0 ? 'inner' : _k, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _l = _a.resize, resize = _l === void 0 ? 'none' : _l, value = _a.value, defaultValue = _a.defaultValue, _m = _a.rows, rows = _m === void 0 ? autosize ? 1 : 3 : _m, _o = _a.showCounter, showCounter = _o === void 0 ? false : _o, _p = _a.getCounterText, getCounterText = _p === void 0 ? getDefaultCounterText : _p, maxLength = _a.maxLength, _q = _a.allowOverflow, allowOverflow = _q === void 0 ? true : _q, nativeScrollbarProp = _a.nativeScrollbar, breakpoint = _a.breakpoint, restProps = tslib.__rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength", "allowOverflow", "nativeScrollbar", "breakpoint"]);
-    var uncontrolled = value === undefined;
-    var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
-    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
-    var textareaRef = React.useRef(null);
-    var pseudoTextareaRef = React.useRef(null);
-    var _r = React.useState(false), focused = _r[0], setFocused = _r[1];
-    var _s = React.useState(defaultValue || ''), stateValue = _s[0], setStateValue = _s[1];
-    var _t = React.useState(0), scrollPosition = _t[0], setScrollPosition = _t[1];
-    var focusVisible = hooks.useFocus(
+const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
+const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48, 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, allowOverflow = true, nativeScrollbar: nativeScrollbarProp, wrapperRef, breakpoint, ...restProps }, ref) => {
+    const uncontrolled = value === undefined;
+    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
+    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+    const textareaRef = useRef(null);
+    const pseudoTextareaRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [stateValue, setStateValue] = useState(defaultValue || '');
+    const [scrollPosition, setScrollPosition] = useState(0);
+    const [focusVisible] = useFocus(
     /*
      * При первом рендере textareaRef.current === null, то нужно пересоздать реф для корректной работы хука
      * TODO: исправить хук useFocus, чтобы он поддерживал изменение ноды
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useMemo(function () { return ({ current: textareaRef.current }); }, [textareaRef.current]), 'keyboard')[0];
-    var filled = Boolean(uncontrolled ? stateValue : value);
-    var hasInnerLabel = label && labelView === 'inner';
-    var hasOverflow = Boolean(maxLength && allowOverflow && ((value === null || value === void 0 ? void 0 : value.slice(maxLength)) || stateValue.slice(maxLength)));
-    React.useEffect(function () {
-        var pseudoNode = pseudoTextareaRef.current;
+    useMemo(() => ({ current: textareaRef.current }), [textareaRef.current]), 'keyboard');
+    const filled = Boolean(uncontrolled ? stateValue : value);
+    const hasInnerLabel = label && labelView === 'inner';
+    const hasOverflow = Boolean(maxLength && allowOverflow && (value?.slice(maxLength) || stateValue.slice(maxLength)));
+    useEffect(() => {
+        const pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
             pseudoNode.scrollTop = scrollPosition;
         }
     }, [scrollPosition, stateValue, hasOverflow]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
-    React.useEffect(function () {
+    useEffect(() => {
         if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = "".concat(maxHeight, "px");
+            textareaRef.current.style.maxHeight = `${maxHeight}px`;
         }
     }, [autosize, maxHeight]);
-    var handleTextareaFocus = function (event) {
+    const handleTextareaFocus = (event) => {
         setFocused(true);
         if (onFocus) {
             onFocus(event);
         }
     };
-    var handleTextareaBlur = function (event) {
+    const handleTextareaBlur = (event) => {
         setFocused(false);
         if (onBlur) {
             onBlur(event);
         }
     };
-    var handleTextareaChange = function (event) {
-        var newValue = event.target.value;
+    const handleTextareaChange = (event) => {
+        const { target: { value: newValue }, } = event;
         if (onChange) {
             onChange(event, { value: newValue });
         }
@@ -86,46 +68,58 @@ var Textarea = React.forwardRef(function (_a, ref) {
             setStateValue(newValue);
         }
     };
-    var handleTeaxtareaScroll = function (event) {
+    const handleTeaxtareaScroll = (event) => {
         if (maxLength) {
-            var val = event.target.scrollTop;
+            const val = event.target.scrollTop;
             setScrollPosition(val);
         }
     };
-    var getValueLength = function () {
+    const getValueLength = () => {
         if (uncontrolled) {
             return stateValue.length;
         }
         return value.length;
     };
-    var textareaClassNameCalc = cn__default.default(styles__default.default.textarea, colorStyles[colors].textarea, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
-        _b[styles__default.default.overflowHidden] = autosize && !maxRows,
-        _b[styles__default.default.customScrollbar] = !nativeScrollbar,
-        _b[styles__default.default.hasInnerLabel] = hasInnerLabel,
-        _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-        _b[styles__default.default.filled] = filled,
-        _b), textareaClassName);
-    var textareaProps = tslib.__assign(tslib.__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, maxLength: allowOverflow ? undefined : maxLength, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default.default([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
-    var getBottomAddons = function () {
-        var _a;
-        var counterIsVisible = Boolean(maxLength && showCounter);
-        return (React__default.default.createElement(React__default.default.Fragment, null,
-            counterIsVisible && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.sub, (_a = {},
-                    _a[colorStyles[colors].error] = hasOverflow,
-                    _a[colorStyles[colors].hint] = !hasOverflow,
-                    _a)) }, getCounterText(getValueLength(), maxLength))),
+    const textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[SIZE_TO_CLASSNAME_MAP[size]], {
+        [styles.overflowHidden]: autosize && !maxRows,
+        [styles.customScrollbar]: !nativeScrollbar,
+        [styles.hasInnerLabel]: hasInnerLabel,
+        [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
+        [styles.filled]: filled,
+    }, textareaClassName);
+    const textareaProps = {
+        ...restProps,
+        className: textareaClassNameCalc,
+        autoComplete,
+        disabled,
+        maxLength: allowOverflow ? undefined : maxLength,
+        onBlur: handleTextareaBlur,
+        onFocus: handleTextareaFocus,
+        onChange: handleTextareaChange,
+        value: uncontrolled ? stateValue : value,
+        rows,
+        ref: mergeRefs([ref, textareaRef]),
+        'data-test-id': dataTestId,
+        onScroll: handleTeaxtareaScroll,
+    };
+    const getBottomAddons = () => {
+        const counterIsVisible = Boolean(maxLength && showCounter);
+        return (React.createElement(React.Fragment, null,
+            counterIsVisible && (React.createElement("span", { className: cn(styles.sub, {
+                    [colorStyles[colors].error]: hasOverflow,
+                    [colorStyles[colors].hint]: !hasOverflow,
+                }) }, getCounterText(getValueLength(), maxLength))),
             bottomAddons));
     };
-    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)), inputWrapperClassName: cn__default.default(styles__default.default.wrapper, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_d = {},
-            _d[styles__default.default.hasInnerLabel] = hasInnerLabel,
-            _d[styles__default.default.resizeVertical] = resize === 'vertical',
-            _d)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons(), breakpoint: breakpoint, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control') },
-        React__default.default.createElement(React__default.default.Fragment, null,
-            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: textareaClassNameCalc, ref: pseudoTextareaRef })),
-            autosize ? (React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default.default.createElement("textarea", tslib.__assign({}, textareaProps, { style: { maxHeight: maxHeight } }))))));
+    return (React.createElement(FormControl, { ref: wrapperRef, className: cn(className), fieldClassName: cn(fieldClassName, {
+            [styles.focusVisible]: focusVisible,
+        }), inputWrapperClassName: cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], {
+            [styles.hasInnerLabel]: hasInnerLabel,
+            [styles.resizeVertical]: resize === 'vertical',
+        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons(), breakpoint: breakpoint, dataTestId: getDataTestId(dataTestId, 'form-control') },
+        React.createElement(React.Fragment, null,
+            hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: textareaClassNameCalc, ref: pseudoTextareaRef })),
+            autosize ? (React.createElement(TextareaAutosize, { ...textareaProps, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange })) : (React.createElement("textarea", { ...textareaProps, style: { maxHeight } })))));
 });
 
-exports.Textarea = Textarea;
-exports.getDefaultCounterText = getDefaultCounterText;
+export { Textarea, getDefaultCounterText };

package/textarea/cssm/components/PseudoTextArea.js

@@ -1,22 +1,11 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { SIZE_TO_CLASSNAME_MAP } from '../consts.js';
+import styles from '../index.module.css';
 
-var React = require('react');
-var cn = require('classnames');
-var consts = require('../consts.js');
-var styles = require('../index.module.css');
+const PseudoTextArea = forwardRef(({ size = 48, pseudoTextareaClassName, maxLength, value }, ref) => (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[SIZE_TO_CLASSNAME_MAP[size]], pseudoTextareaClassName), ref: ref, hidden: true },
+    React.createElement("span", null, value.slice(0, maxLength)),
+    React.createElement("span", { className: cn(styles.overflow) }, value.slice(maxLength)),
+    React.createElement("br", null))));
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var PseudoTextArea = React.forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 48 : _b, pseudoTextareaClassName = _a.pseudoTextareaClassName, maxLength = _a.maxLength, value = _a.value;
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.pseudoTextarea, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], pseudoTextareaClassName), ref: ref, hidden: true },
-        React__default.default.createElement("span", null, value.slice(0, maxLength)),
-        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.overflow) }, value.slice(maxLength)),
-        React__default.default.createElement("br", null)));
-});
-
-exports.PseudoTextArea = PseudoTextArea;
+export { PseudoTextArea };

package/textarea/cssm/components/index.js

@@ -1,7 +1,5 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_PseudoTextArea = require('./PseudoTextArea.js');
-
-
-
-exports.PseudoTextArea = components_PseudoTextArea.PseudoTextArea;
+export { PseudoTextArea } from './PseudoTextArea.js';
+import 'react';
+import 'classnames';
+import '../consts.js';
+import '../index.module.css';

package/textarea/cssm/consts.js

@@ -1,6 +1,4 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var SIZE_TO_CLASSNAME_MAP = {
+const SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -11,4 +9,4 @@ var SIZE_TO_CLASSNAME_MAP = {
     72: 'size-72',
 };
 
-exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
+export { SIZE_TO_CLASSNAME_MAP };

package/textarea/cssm/index.js

@@ -1,8 +1,13 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-
-
-
-exports.Textarea = Component.Textarea;
-exports.getDefaultCounterText = Component.getDefaultCounterText;
+export { Textarea, getDefaultCounterText } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'react-textarea-autosize';
+import 'classnames';
+import '../../form-control/cssm';
+import '../../shared/cssm';
+import '@alfalab/hooks';
+import './components/PseudoTextArea.js';
+import './consts.js';
+import './index.module.css';
+import './default.module.css';
+import './inverted.module.css';

package/textarea/cssm/shared/index.js

@@ -1,7 +1,2 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var utils = require('../utils.js');
-
-
-
-exports.getTextareaTestIds = utils.getTextareaTestIds;
+export { getTextareaTestIds } from '../utils.js';
+import '../../../shared/cssm';

package/textarea/cssm/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import React from 'react';
 import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
 type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
@@ -124,5 +125,9 @@ type TextareaIncomeProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Ref для обертки textarea
+     */
+    wrapperRef?: React.Ref<HTMLDivElement> | null;
 };
 export { TextareaProps, TextareaIncomeProps };

package/textarea/cssm/utils.js

@@ -1,17 +1,15 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var coreComponentsShared = require('../../shared/cssm');
+import { getDataTestId } from '../../shared/cssm';
 
 function getTextareaTestIds(dataTestId) {
     return {
         textarea: dataTestId,
-        inputWrapper: coreComponentsShared.getDataTestId(dataTestId, 'form-control'),
-        inputWrapperInner: coreComponentsShared.getDataTestId(dataTestId, 'form-control-inner'),
-        leftAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-left-addons'),
-        rightAddons: coreComponentsShared.getDataTestId(dataTestId, 'form-control-right-addons'),
-        error: coreComponentsShared.getDataTestId(dataTestId, 'form-control-error-message'),
-        hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+        inputWrapper: getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: getDataTestId(dataTestId, 'form-control-hint'),
     };
 }
 
-exports.getTextareaTestIds = getTextareaTestIds;
+export { getTextareaTestIds };

package/textarea/default.css

@@ -1,4 +1,4 @@
-/* hash: 6xctt */
+/* hash: 1ikr1 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-1500: #121213;
@@ -38,26 +38,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_18flg {
+} .textarea__input_11upu {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_18flg:-webkit-autofill {
+} .textarea__input_11upu:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_18flg::placeholder {
+} .textarea__input_11upu::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_18flg::placeholder {
+} .textarea__hasInnerLabel_11upu::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_18flg:read-only:not(.textarea__disableUserInput_18flg) {
+} /* READ-ONLY STATE */ .textarea__input_11upu:read-only:not(.textarea__disableUserInput_11upu) {
     color: var(--input-read-only-color)
-} .textarea__input_18flg:read-only:not(.textarea__disableUserInput_18flg):focus::placeholder {
+} .textarea__input_11upu:read-only:not(.textarea__disableUserInput_11upu):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_18flg:disabled {
+    } /* DISABLED STATE */ .textarea__input_11upu:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_18flg:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_11upu:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_18flg {
+} /* ERROR STATE */ .textarea__error_11upu {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -89,22 +89,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_18flg {
+} .textarea__textarea_11upu {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_18flg::placeholder {
+} .textarea__textarea_11upu::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_18flg::placeholder {
+} .textarea__hasInnerLabel_11upu::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_18flg:disabled {
+} /* DISABLED STATE */ .textarea__textarea_11upu:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_18flg:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_11upu:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_18flg:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_11upu:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_18flg {
+} .textarea__hint_11upu {
     color: var(--form-control-hint-color);
-} .textarea__error_18flg {
+} .textarea__error_11upu {
     color: var(--form-control-error-color);
 }

package/textarea/esm/Component.js

@@ -6,13 +6,13 @@ import cn from 'classnames';
 import { FormControl } from '../../form-control/esm';
 import { getDataTestId } from '../../shared/esm';
 import { useMedia, useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-ebaaf545.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-7c7872fd.js';
 import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
 
-var defaultColors = {"input":"textarea__input_18flg","hasInnerLabel":"textarea__hasInnerLabel_18flg","disableUserInput":"textarea__disableUserInput_18flg","error":"textarea__error_18flg","textarea":"textarea__textarea_18flg","hint":"textarea__hint_18flg"};
+var defaultColors = {"input":"textarea__input_11upu","hasInnerLabel":"textarea__hasInnerLabel_11upu","disableUserInput":"textarea__disableUserInput_11upu","error":"textarea__error_11upu","textarea":"textarea__textarea_11upu","hint":"textarea__hint_11upu"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_2m48i","hasInnerLabel":"textarea__hasInnerLabel_2m48i","disableUserInput":"textarea__disableUserInput_2m48i","error":"textarea__error_2m48i","textarea":"textarea__textarea_2m48i","hint":"textarea__hint_2m48i"};
+var invertedColors = {"input":"textarea__input_1v2cn","hasInnerLabel":"textarea__hasInnerLabel_1v2cn","disableUserInput":"textarea__disableUserInput_1v2cn","error":"textarea__error_1v2cn","textarea":"textarea__textarea_1v2cn","hint":"textarea__hint_1v2cn"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -25,7 +25,7 @@ var getDefaultCounterText = function (textLength, maxLength) {
 };
 var Textarea = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var _e = _a.autoComplete, autoComplete = _e === void 0 ? 'on' : _e, _f = _a.autosize, autosize = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? 48 : _g, _h = _a.colors, colors = _h === void 0 ? 'default' : _h, _j = _a.block, block = _j === void 0 ? false : _j, bottomAddons = _a.bottomAddons, fieldClassName = _a.fieldClassName, className = _a.className, dataTestId = _a.dataTestId, disabled = _a.disabled, error = _a.error, hint = _a.hint, textareaClassName = _a.textareaClassName, label = _a.label, _k = _a.labelView, labelView = _k === void 0 ? 'inner' : _k, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _l = _a.resize, resize = _l === void 0 ? 'none' : _l, value = _a.value, defaultValue = _a.defaultValue, _m = _a.rows, rows = _m === void 0 ? autosize ? 1 : 3 : _m, _o = _a.showCounter, showCounter = _o === void 0 ? false : _o, _p = _a.getCounterText, getCounterText = _p === void 0 ? getDefaultCounterText : _p, maxLength = _a.maxLength, _q = _a.allowOverflow, allowOverflow = _q === void 0 ? true : _q, nativeScrollbarProp = _a.nativeScrollbar, breakpoint = _a.breakpoint, restProps = __rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength", "allowOverflow", "nativeScrollbar", "breakpoint"]);
+    var _e = _a.autoComplete, autoComplete = _e === void 0 ? 'on' : _e, _f = _a.autosize, autosize = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? 48 : _g, _h = _a.colors, colors = _h === void 0 ? 'default' : _h, _j = _a.block, block = _j === void 0 ? false : _j, bottomAddons = _a.bottomAddons, fieldClassName = _a.fieldClassName, className = _a.className, dataTestId = _a.dataTestId, disabled = _a.disabled, error = _a.error, hint = _a.hint, textareaClassName = _a.textareaClassName, label = _a.label, _k = _a.labelView, labelView = _k === void 0 ? 'inner' : _k, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onHeightChange = _a.onHeightChange, rightAddons = _a.rightAddons, maxRows = _a.maxRows, minRows = _a.minRows, maxHeight = _a.maxHeight, _l = _a.resize, resize = _l === void 0 ? 'none' : _l, value = _a.value, defaultValue = _a.defaultValue, _m = _a.rows, rows = _m === void 0 ? autosize ? 1 : 3 : _m, _o = _a.showCounter, showCounter = _o === void 0 ? false : _o, _p = _a.getCounterText, getCounterText = _p === void 0 ? getDefaultCounterText : _p, maxLength = _a.maxLength, _q = _a.allowOverflow, allowOverflow = _q === void 0 ? true : _q, nativeScrollbarProp = _a.nativeScrollbar, wrapperRef = _a.wrapperRef, breakpoint = _a.breakpoint, restProps = __rest(_a, ["autoComplete", "autosize", "size", "colors", "block", "bottomAddons", "fieldClassName", "className", "dataTestId", "disabled", "error", "hint", "textareaClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onHeightChange", "rightAddons", "maxRows", "minRows", "maxHeight", "resize", "value", "defaultValue", "rows", "showCounter", "getCounterText", "maxLength", "allowOverflow", "nativeScrollbar", "wrapperRef", "breakpoint"]);
     var uncontrolled = value === undefined;
     var nativeScrollbar = useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
@@ -107,7 +107,7 @@ var Textarea = forwardRef(function (_a, ref) {
                     _a)) }, getCounterText(getValueLength(), maxLength))),
             bottomAddons));
     };
-    return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, (_c = {},
+    return (React.createElement(FormControl, { ref: wrapperRef, className: cn(className), fieldClassName: cn(fieldClassName, (_c = {},
             _c[styles.focusVisible] = focusVisible,
             _c)), inputWrapperClassName: cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], (_d = {},
             _d[styles.hasInnerLabel] = hasInnerLabel,

package/textarea/esm/{PseudoTextArea-ebaaf545.js → PseudoTextArea-7c7872fd.js}

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
 
-var styles = {"textarea":"textarea__textarea_18for","overflowHidden":"textarea__overflowHidden_18for","customScrollbar":"textarea__customScrollbar_18for","hasInnerLabel":"textarea__hasInnerLabel_18for","pseudoTextarea":"textarea__pseudoTextarea_18for","overflow":"textarea__overflow_18for","sub":"textarea__sub_18for","focusVisible":"textarea__focusVisible_18for","filled":"textarea__filled_18for","size-48":"textarea__size-48_18for","size-56":"textarea__size-56_18for","size-64":"textarea__size-64_18for","size-72":"textarea__size-72_18for","wrapper":"textarea__wrapper_18for","resizeVertical":"textarea__resizeVertical_18for"};
+var styles = {"textarea":"textarea__textarea_17ndf","overflowHidden":"textarea__overflowHidden_17ndf","customScrollbar":"textarea__customScrollbar_17ndf","hasInnerLabel":"textarea__hasInnerLabel_17ndf","pseudoTextarea":"textarea__pseudoTextarea_17ndf","overflow":"textarea__overflow_17ndf","sub":"textarea__sub_17ndf","focusVisible":"textarea__focusVisible_17ndf","filled":"textarea__filled_17ndf","size-48":"textarea__size-48_17ndf","size-56":"textarea__size-56_17ndf","size-64":"textarea__size-64_17ndf","size-72":"textarea__size-72_17ndf","wrapper":"textarea__wrapper_17ndf","resizeVertical":"textarea__resizeVertical_17ndf"};
 require('./index.css');
 
 var PseudoTextArea = forwardRef(function (_a, ref) {

package/textarea/esm/components/PseudoTextArea.js

@@ -1,4 +1,4 @@
 import 'react';
 import 'classnames';
-export { P as PseudoTextArea } from '../PseudoTextArea-ebaaf545.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-7c7872fd.js';
 import '../consts.js';

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

@@ -1 +1 @@
-export * from "../PseudoTextArea-ebaaf545";
+export * from "../PseudoTextArea-7c7872fd";

package/textarea/esm/components/index.js

@@ -1,4 +1,4 @@
-export { P as PseudoTextArea } from '../PseudoTextArea-ebaaf545.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-7c7872fd.js';
 import 'react';
 import 'classnames';
 import '../consts.js';

package/textarea/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: 6xctt */
+/* hash: 1ikr1 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-1500: #121213;
@@ -38,26 +38,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_18flg {
+} .textarea__input_11upu {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_18flg:-webkit-autofill {
+} .textarea__input_11upu:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_18flg::placeholder {
+} .textarea__input_11upu::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_18flg::placeholder {
+} .textarea__hasInnerLabel_11upu::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_18flg:read-only:not(.textarea__disableUserInput_18flg) {
+} /* READ-ONLY STATE */ .textarea__input_11upu:read-only:not(.textarea__disableUserInput_11upu) {
     color: var(--input-read-only-color)
-} .textarea__input_18flg:read-only:not(.textarea__disableUserInput_18flg):focus::placeholder {
+} .textarea__input_11upu:read-only:not(.textarea__disableUserInput_11upu):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_18flg:disabled {
+    } /* DISABLED STATE */ .textarea__input_11upu:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_18flg:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_11upu:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_18flg {
+} /* ERROR STATE */ .textarea__error_11upu {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -89,22 +89,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_18flg {
+} .textarea__textarea_11upu {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_18flg::placeholder {
+} .textarea__textarea_11upu::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_18flg::placeholder {
+} .textarea__hasInnerLabel_11upu::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_18flg:disabled {
+} /* DISABLED STATE */ .textarea__textarea_11upu:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_18flg:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_11upu:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_18flg:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_11upu:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_18flg {
+} .textarea__hint_11upu {
     color: var(--form-control-hint-color);
-} .textarea__error_18flg {
+} .textarea__error_11upu {
     color: var(--form-control-error-color);
 }