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

package/tabs/esm/components/tabs/Component.mobile.js

@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-e6c5bf7b.js';
+import '../../index.module-7ff70640.js';
 import '../../../../tag/esm/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-a60afb2d.js';
+import '../../index.module-0655283c.js';
 
 var views = {
     primary: PrimaryTabListMobile,

package/tabs/esm/components/tabs/Component.responsive.js

@@ -21,12 +21,12 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-e6c5bf7b.js';
+import '../../index.module-7ff70640.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '../../../../tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-a60afb2d.js';
+import '../../index.module-0655283c.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../../../../tag/esm/mobile';
 

package/tabs/esm/desktop/index.js

@@ -20,8 +20,8 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
-import '../index.module-e6c5bf7b.js';
+import '../index.module-7ff70640.js';
 import '../../../tag/esm/desktop';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-a60afb2d.js';
+import '../index.module-0655283c.js';
 import '../components/tabs/Component.js';

package/tabs/esm/index.js

@@ -22,12 +22,12 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-e6c5bf7b.js';
+import './index.module-7ff70640.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '../../tag/esm/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-a60afb2d.js';
+import './index.module-0655283c.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '../../tag/esm/mobile';
 import './components/tabs/Component.js';

package/tabs/esm/mobile/index.js

@@ -20,8 +20,8 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
-import '../index.module-e6c5bf7b.js';
+import '../index.module-7ff70640.js';
 import '../../../tag/esm/mobile';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-a60afb2d.js';
+import '../index.module-0655283c.js';
 import '../components/tabs/Component.js';

package/tabs/modern/collapsible/index.js

@@ -16,5 +16,5 @@ import 'react-merge-refs';
 import '../../../shared/modern';
 import '../synthetic-events.js';
 import '../components/title/Component.js';
-import '../index.module-f30fb0bd.js';
+import '../index.module-d1b9db81.js';
 import '../components/tabs/Component.js';

package/tabs/modern/components/primary-tablist/Component.collapsible.js

@@ -6,7 +6,7 @@ import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
-import { s as styles } from '../../index.module-f30fb0bd.js';
+import { s as styles } from '../../index.module-d1b9db81.js';
 import '../../../../mq/modern';
 import '../../hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';

package/tabs/modern/components/primary-tablist/Component.desktop.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles } from '../../index.module-f30fb0bd.js';
+import { s as styles } from '../../index.module-d1b9db81.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';

package/tabs/modern/components/primary-tablist/Component.mobile.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-f30fb0bd.js';
+import { s as styles$1 } from '../../index.module-d1b9db81.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';

package/tabs/modern/components/primary-tablist/Component.responsive.js

@@ -18,7 +18,7 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-f30fb0bd.js';
+import '../../index.module-d1b9db81.js';
 
 const PrimaryTabListResponsive = ({ size, breakpoint = 1024, fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);

package/tabs/modern/components/secondary-tablist/Component.desktop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TagDesktop } from '../../../../tag/modern/desktop';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-7ddd604e.js';
+import { c as commonStyles } from '../../index.module-65b2af6e.js';
 import 'classnames';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';

package/tabs/modern/components/secondary-tablist/Component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { TagMobile } from '../../../../tag/modern/mobile';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-7ddd604e.js';
+import { c as commonStyles } from '../../index.module-65b2af6e.js';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
 import '../../../../shared/modern';

package/tabs/modern/components/secondary-tablist/Component.responsive.js

@@ -16,7 +16,7 @@ import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
-import '../../index.module-7ddd604e.js';
+import '../../index.module-65b2af6e.js';
 import '../../../../tag/modern/mobile';
 
 const SecondaryTabListResponsive = ({ defaultMatchMediaValue, fullWidthScroll, breakpoint = 1024, ...restProps }) => {

package/tabs/modern/components/tabs/Component.collapsible.js

@@ -15,7 +15,7 @@ import 'react-merge-refs';
 import '../../../../shared/modern';
 import '../../synthetic-events.js';
 import '../title/Component.js';
-import '../../index.module-f30fb0bd.js';
+import '../../index.module-d1b9db81.js';
 
 const TabsCollapsible = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabList, ...restProps }));
 

package/tabs/modern/components/tabs/Component.desktop.js

@@ -18,10 +18,10 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-f30fb0bd.js';
+import '../../index.module-d1b9db81.js';
 import '../../../../tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-7ddd604e.js';
+import '../../index.module-65b2af6e.js';
 
 const views = {
     primary: PrimaryTabListDesktop,

package/tabs/modern/components/tabs/Component.mobile.js

@@ -18,10 +18,10 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-f30fb0bd.js';
+import '../../index.module-d1b9db81.js';
 import '../../../../tag/modern/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-7ddd604e.js';
+import '../../index.module-65b2af6e.js';
 
 const views = {
     primary: PrimaryTabListMobile,

package/tabs/modern/components/tabs/Component.responsive.js

@@ -20,12 +20,12 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-f30fb0bd.js';
+import '../../index.module-d1b9db81.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '../../../../tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-7ddd604e.js';
+import '../../index.module-65b2af6e.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../../../../tag/modern/mobile';
 

package/tabs/modern/desktop/index.js

@@ -19,8 +19,8 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
-import '../index.module-f30fb0bd.js';
+import '../index.module-d1b9db81.js';
 import '../../../tag/modern/desktop';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-7ddd604e.js';
+import '../index.module-65b2af6e.js';
 import '../components/tabs/Component.js';

package/tabs/modern/index.js

@@ -21,12 +21,12 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
-import './index.module-f30fb0bd.js';
+import './index.module-d1b9db81.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '../../tag/modern/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-7ddd604e.js';
+import './index.module-65b2af6e.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '../../tag/modern/mobile';
 import './components/tabs/Component.js';

package/tabs/modern/mobile/index.js

@@ -19,8 +19,8 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
-import '../index.module-f30fb0bd.js';
+import '../index.module-d1b9db81.js';
 import '../../../tag/modern/mobile';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-7ddd604e.js';
+import '../index.module-65b2af6e.js';
 import '../components/tabs/Component.js';

package/textarea/Component.js

@@ -34,7 +34,7 @@ var getDefaultCounterText = function (textLength, maxLength) {
 };
 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 _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 = 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", "wrapperRef", "breakpoint"]);
     var uncontrolled = value === undefined;
     var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
@@ -116,7 +116,7 @@ var Textarea = React.forwardRef(function (_a, ref) {
                     _a)) }, getCounterText(getValueLength(), maxLength))),
             bottomAddons));
     };
-    return (React__default.default.createElement(coreComponentsFormControl.FormControl, { className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
+    return (React__default.default.createElement(coreComponentsFormControl.FormControl, { ref: wrapperRef, className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
             _c[components_PseudoTextArea.styles.focusVisible] = focusVisible,
             _c)), inputWrapperClassName: cn__default.default(components_PseudoTextArea.styles.wrapper, components_PseudoTextArea.styles[consts.SIZE_TO_CLASSNAME_MAP[size]], (_d = {},
             _d[components_PseudoTextArea.styles.hasInnerLabel] = hasInnerLabel,

package/textarea/cssm/Component.js

@@ -34,7 +34,7 @@ var getDefaultCounterText = function (textLength, maxLength) {
 };
 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 _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 = 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", "wrapperRef", "breakpoint"]);
     var uncontrolled = value === undefined;
     var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
@@ -116,7 +116,7 @@ var Textarea = React.forwardRef(function (_a, ref) {
                     _a)) }, getCounterText(getValueLength(), maxLength))),
             bottomAddons));
     };
-    return (React__default.default.createElement(coreComponentsFormControl.FormControl, { className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
+    return (React__default.default.createElement(coreComponentsFormControl.FormControl, { ref: wrapperRef, 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,

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/esm/Component.js

@@ -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/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/modern/Component.js

@@ -19,7 +19,7 @@ const colorStyles = {
     inverted: invertedColors,
 };
 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, breakpoint, ...restProps }, ref) => {
+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);
@@ -114,7 +114,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48,
                 }) }, getCounterText(getValueLength(), maxLength))),
             bottomAddons));
     };
-    return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, {
+    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,

package/textarea/modern/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/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/themes/compiled/mobile-dark-bluetint.css

@@ -1,23 +1,4 @@
-.backdrop__backdrop_1d6xc {
-    -webkit-tap-highlight-color: transparent;
-} .backdrop__appear_1d6xc,
-.backdrop__enter_1d6xc {
-    background-color: transparent;
-} .backdrop__appearActive_1d6xc,
-.backdrop__enterActive_1d6xc,
-.backdrop__appearDone_1d6xc,
-.backdrop__enterDone_1d6xc {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exit_1d6xc {
-    background-color: rgba(0, 0, 0, 0.7);
-} .backdrop__exitActive_1d6xc,
-.backdrop__exitDone_1d6xc {
-    background-color: transparent;
-}.card-image__cardImage_1w4ef {
-    background: #e7e8ea;
-} .card-image__loaded_1w4ef {
-    background: transparent
-}.badge__component_13jfy.badge__background-accent_13jfy {
+.badge__component_13jfy.badge__background-accent_13jfy {
         background-color: #f83a2a;
         color: rgba(255, 255, 255, 0.94);
     } .badge__component_13jfy.badge__background-specialbg-secondary-transparent_13jfy {
@@ -77,6 +58,25 @@
         background-color: #fff;
     } .badge__dot_13jfy.badge__outlineCount_13jfy {
     border: 1px solid #121213;
+}.backdrop__backdrop_1d6xc {
+    -webkit-tap-highlight-color: transparent;
+} .backdrop__appear_1d6xc,
+.backdrop__enter_1d6xc {
+    background-color: transparent;
+} .backdrop__appearActive_1d6xc,
+.backdrop__enterActive_1d6xc,
+.backdrop__appearDone_1d6xc,
+.backdrop__enterDone_1d6xc {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exit_1d6xc {
+    background-color: rgba(0, 0, 0, 0.7);
+} .backdrop__exitActive_1d6xc,
+.backdrop__exitDone_1d6xc {
+    background-color: transparent;
+}.card-image__cardImage_1w4ef {
+    background: #e7e8ea;
+} .card-image__loaded_1w4ef {
+    background: transparent
 }.divider__component_qntq7 {
     border-bottom: 1px solid #353539;
 }.dropzone__component_jv68l {
@@ -168,7 +168,14 @@
         background: #fff;
     } .hatching-progress-bar__accent_1g4sq {
         background: #f83a2a;
-    }.indicator__component_11fsk {
+    }.icon-view__component_19x5k {
+    color: rgba(238, 238, 251, 0.55)
+} .icon-view__bg_19x5k {
+    fill: #1c1c1e;
+} .icon-view__border_19x5k {
+    stroke: rgba(225, 225, 248, 0.09);
+    fill: transparent;
+}.indicator__component_11fsk {
     color: rgba(255, 255, 255, 0.94);
     background-color: #f83a2a;
 } .indicator__red_11fsk {
@@ -186,14 +193,7 @@
     color: rgba(255, 255, 255, 0.94)
 } .indicator__grey_11fsk.indicator__border_11fsk {
         outline: 2px solid #121213;
-    }.icon-view__component_19x5k {
-    color: rgba(238, 238, 251, 0.55)
-} .icon-view__bg_19x5k {
-    fill: #1c1c1e;
-} .icon-view__border_19x5k {
-    stroke: rgba(225, 225, 248, 0.09);
-    fill: transparent;
-}@keyframes loader__blink_1nz23 {
+    }@keyframes loader__blink_1nz23 {
 }.link__primary_1tca1 {
     color: rgba(255, 255, 255, 0.94);
     border-bottom-color: rgba(255, 255, 255, 0.94)
@@ -434,143 +434,4 @@
 .status-badge__neutral-operation_yo7iy,
 .status-badge__neutral-cross_yo7iy {
     background-color: #898991;
-}.underlay__background-accent_l4yds {
-            background-color: #ef3124;
-        } .underlay__background-info_l4yds {
-            background-color: #001c3c;
-        } .underlay__background-attention-muted_l4yds {
-            background-color: #36291f;
-        } .underlay__background-positive-muted_l4yds {
-            background-color: #232d25;
-        } .underlay__background-negative-muted_l4yds {
-            background-color: #392523;
-        } .underlay__background-primary_l4yds {
-            background-color: #0e0e0e;
-        } .underlay__background-primary-inverted_l4yds {
-            background-color: #fff;
-        } .underlay__background-secondary_l4yds {
-            background-color: #1c1c1e;
-        } .underlay__background-secondary-inverted_l4yds {
-            background-color: #f2f3f5;
-        } .underlay__background-tertiary_l4yds {
-            background-color: #27272a;
-        } .underlay__background-tertiary-inverted_l4yds {
-            background-color: #e7e8ea;
-        } .underlay__background-quaternary_l4yds {
-            background-color: #36363a;
-        } .underlay__background-quaternary-inverted_l4yds {
-            background-color: #dcdee2;
-        } .underlay__background-specialbg-component_l4yds {
-            background-color: rgba(255, 255, 255, 0.1);
-        } .underlay__background-specialbg-component-inverted_l4yds {
-            background-color: rgba(11, 31, 53, 0.07);
-        } .underlay__background-specialbg-primary-grouped_l4yds {
-            background-color: #1c1c1e;
-        } .underlay__background-specialbg-secondary-grouped_l4yds {
-            background-color: #27272a;
-        } .underlay__background-specialbg-tertiary-grouped_l4yds {
-            background-color: #36363a;
-        } .underlay__background-specialbg-secondary-transparent_l4yds {
-            background-color: rgba(214, 214, 229, 0.07);
-        } .underlay__background-specialbg-secondary-transparent-inverted_l4yds {
-            background-color: rgba(38, 55, 88, 0.06);
-        } .underlay__background-specialbg-tertiary-transparent_l4yds {
-            background-color: rgba(222, 222, 240, 0.12);
-        } .underlay__background-specialbg-tertiary-transparent-inverted_l4yds {
-            background-color: rgba(30, 43, 68, 0.08);
-        } .underlay__shadow-xs_l4yds {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-s_l4yds {
-        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-m_l4yds {
-        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-l_l4yds {
-        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
-        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-xl_l4yds {
-        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
-        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-xs-hard_l4yds {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-s-hard_l4yds {
-        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
-        0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-m-hard_l4yds {
-        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
-        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-l-hard_l4yds {
-        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
-        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-xl-hard_l4yds {
-        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
-        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
-        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-xs-up_l4yds {
-        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04);
-    } .underlay__shadow-s-up_l4yds {
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08);
-    } .underlay__shadow-m-up_l4yds {
-        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-l-up_l4yds {
-        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24);
-    } .underlay__shadow-xl-up_l4yds {
-        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
-    } .underlay__shadow-xs-hard-up_l4yds {
-        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
-        0 -2px 4px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-s-hard-up_l4yds {
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
-        0 -4px 8px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-m-hard-up_l4yds {
-        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
-        0 -8px 16px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-l-hard-up_l4yds {
-        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
-        0 -12px 24px rgba(0, 0, 0, 0.16);
-    } .underlay__shadow-xl-hard-up_l4yds {
-        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
-        0 -16px 32px rgba(0, 0, 0, 0.16);
-    } .underlay__border-color-accent_l4yds {
-        border-color: #f83a2a;
-    } .underlay__border-color-key_l4yds {
-        border-color: #fff;
-    } .underlay__border-color-key-inverted_l4yds {
-        border-color: #121213;
-    } .underlay__border-color-link_l4yds {
-        border-color: #3193fc;
-    } .underlay__border-color-primary_l4yds {
-        border-color: #353539;
-    } .underlay__border-color-primary-inverted_l4yds {
-        border-color: #d2d3d9;
-    } .underlay__border-color-secondary_l4yds {
-        border-color: #29292c;
-    } .underlay__border-color-secondary-inverted_l4yds {
-        border-color: #e7e8eb;
-    } .underlay__border-color-tertiary_l4yds {
-        border-color: #212124;
-    } .underlay__border-color-tertiary-inverted_l4yds {
-        border-color: #edeef0;
-    } .underlay__border-color-underline_l4yds {
-        border-color: #4a4a51;
-    } .underlay__border-color-underline-inverted_l4yds {
-        border-color: #babbc2;
-    } .underlay__border-color-graphic-attention_l4yds {
-        border-color: #fda136;
-    } .underlay__border-color-graphic-link_l4yds {
-        border-color: #3193fc;
-    } .underlay__border-color-graphic-negative_l4yds {
-        border-color: #ff4837;
-    } .underlay__border-color-graphic-positive_l4yds {
-        border-color: #17d055;
-    } .underlay__border-color-specialbg-secondary-transparent_l4yds {
-        border-color: rgba(225, 225, 248, 0.09);
-    } .underlay__border-color-specialbg-secondary-transparent-inverted_l4yds {
-        border-color: rgba(30, 43, 68, 0.08);
-    } .underlay__border-color-specialbg-tertiary-transparent_l4yds {
-        border-color: rgba(222, 222, 238, 0.13);
-    } .underlay__border-color-specialbg-tertiary-transparent-inverted_l4yds {
-        border-color: rgba(15, 25, 55, 0.1);
-    }
+}