@alfalab/core-components 37.2.0 → 37.3.0

package/tag/modern/index.css

@@ -52,7 +52,7 @@
 
     /* text color */
 }
-.tag__component_1lnx0 {
+.tag__component_u8wpo {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -70,40 +70,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_1lnx0:disabled {
+.tag__component_u8wpo:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_1lnx0 {
+.tag__focused_u8wpo {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_1lnx0 {
+.tag__addons_u8wpo {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_1lnx0:first-child {
+.tag__addons_u8wpo:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_1lnx0:last-child {
+.tag__addons_u8wpo:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_1lnx0:only-child {
+.tag__addons_u8wpo:only-child {
         margin: 0;
     }
-.tag__s_1lnx0 .tag__addons_1lnx0:first-child, .tag__m_1lnx0 .tag__addons_1lnx0:first-child {
+.tag__s_u8wpo .tag__addons_u8wpo:first-child, .tag__m_u8wpo .tag__addons_u8wpo:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_1lnx0 .tag__addons_1lnx0:last-child, .tag__m_1lnx0 .tag__addons_1lnx0:last-child {
+.tag__s_u8wpo .tag__addons_u8wpo:last-child, .tag__m_u8wpo .tag__addons_u8wpo:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_1lnx0 .tag__addons_1lnx0:first-child, .tag__xl_1lnx0 .tag__addons_1lnx0:first-child {
+.tag__l_u8wpo .tag__addons_u8wpo:first-child, .tag__xl_u8wpo .tag__addons_u8wpo:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_1lnx0 .tag__addons_1lnx0:last-child, .tag__xl_1lnx0 .tag__addons_1lnx0:last-child {
+.tag__l_u8wpo .tag__addons_u8wpo:last-child, .tag__xl_u8wpo .tag__addons_u8wpo:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_1lnx0 {
+.tag__xxs_u8wpo {
     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_1lnx0 {
+.tag__xxs_u8wpo {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_1lnx0 {
+.tag__xs_u8wpo {
     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_1lnx0 {
+.tag__xs_u8wpo {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_1lnx0 {
+.tag__s_u8wpo {
     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_1lnx0 {
+.tag__s_u8wpo {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_1lnx0 {
+.tag__m_u8wpo {
     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_1lnx0 {
+.tag__m_u8wpo {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_1lnx0 {
+.tag__l_u8wpo {
     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_1lnx0 {
+.tag__l_u8wpo {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_1lnx0 {
+.tag__xl_u8wpo {
     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_1lnx0 {
+.tag__xl_u8wpo {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_1lnx0.tag__xxs_1lnx0 {
+.tag__withRightAddons_u8wpo.tag__xxs_u8wpo {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_1lnx0.tag__xs_1lnx0 {
+.tag__withRightAddons_u8wpo.tag__xs_u8wpo {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_1lnx0.tag__s_1lnx0 {
+.tag__withRightAddons_u8wpo.tag__s_u8wpo {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_1lnx0.tag__m_1lnx0 {
+.tag__withRightAddons_u8wpo.tag__m_u8wpo {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_1lnx0.tag__l_1lnx0 {
+.tag__withRightAddons_u8wpo.tag__l_u8wpo {
         padding-right: 28px;
     }
-.tag__withRightAddons_1lnx0.tag__xl_1lnx0 {
+.tag__withRightAddons_u8wpo.tag__xl_u8wpo {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_1lnx0.tag__xxs_1lnx0 {
+.tag__withLeftAddons_u8wpo.tag__xxs_u8wpo {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_1lnx0.tag__xs_1lnx0 {
+.tag__withLeftAddons_u8wpo.tag__xs_u8wpo {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_1lnx0.tag__s_1lnx0 {
+.tag__withLeftAddons_u8wpo.tag__s_u8wpo {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_1lnx0.tag__m_1lnx0 {
+.tag__withLeftAddons_u8wpo.tag__m_u8wpo {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_1lnx0.tag__l_1lnx0 {
+.tag__withLeftAddons_u8wpo.tag__l_u8wpo {
         padding-left: 28px;
     }
-.tag__withLeftAddons_1lnx0.tag__xl_1lnx0 {
+.tag__withLeftAddons_u8wpo.tag__xl_u8wpo {
         padding-left: var(--gap-2xl);
     }
-.tag__defaultVariant_1lnx0 {
+.tag__defaultVariant_u8wpo {
     border-radius: var(--tag-border-radius);
 }
-.tag__alt_1lnx0 {
+.tag__alt_u8wpo {
     border-radius: var(--tag-alt-border-radius);
 }

package/tag/modern/inverted.css

@@ -54,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_1djse {
+.tag__component_1b3ue {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_1djse:disabled {
+.tag__component_1b3ue: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_1djse:hover:not(:disabled) {
+.tag__component_1b3ue:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_1djse:active:not(:disabled) {
+.tag__component_1b3ue: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_1djse {
+.tag__checked_1b3ue {
     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_1djse:disabled {
+.tag__checked_1b3ue: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_1djse:hover:not(:disabled):not(:active) {
+.tag__checked_1b3ue:hover:not(:disabled):not(:active) {
         background-color: var(--tag-inverted-background-color-checked-hover);
     }
-.tag__checked_1djse:active:not(:disabled) {
+.tag__checked_1b3ue:active:not(:disabled) {
         background-color: var(--tag-inverted-background-color-checked-active);
         color: var(--tag-inverted-text-color-checked);
     }

package/textarea/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "style" | "value" | "defaultValue" | "onChange"> & import("./typings").TextareaIncomeProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "defaultValue" | "style" | "onChange" | "value"> & import("./typings").TextareaIncomeProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { getDefaultCounterText, Textarea };

package/textarea/Component.js

@@ -5,7 +5,7 @@ var cn = require('classnames');
 var coreComponentsFormControl = require('../form-control');
 var coreComponentsScrollbar = require('../scrollbar');
 var hooks = require('@alfalab/hooks');
-var components_PseudoTextArea = require('./PseudoTextArea-b5283f0f.js');
+var components_PseudoTextArea = require('./PseudoTextArea-40ea83cb.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -53,10 +53,10 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"input":"textarea__input_5npn7","hasInnerLabel":"textarea__hasInnerLabel_5npn7","clearIcon":"textarea__clearIcon_5npn7","error":"textarea__error_5npn7","textarea":"textarea__textarea_5npn7","hint":"textarea__hint_5npn7"};
+var defaultColors = {"input":"textarea__input_cdfdx","hasInnerLabel":"textarea__hasInnerLabel_cdfdx","clearIcon":"textarea__clearIcon_cdfdx","error":"textarea__error_cdfdx","textarea":"textarea__textarea_cdfdx","hint":"textarea__hint_cdfdx"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_10dmz","hasInnerLabel":"textarea__hasInnerLabel_10dmz","clearIcon":"textarea__clearIcon_10dmz","error":"textarea__error_10dmz","textarea":"textarea__textarea_10dmz","hint":"textarea__hint_10dmz"};
+var invertedColors = {"input":"textarea__input_173cq","hasInnerLabel":"textarea__hasInnerLabel_173cq","clearIcon":"textarea__clearIcon_173cq","error":"textarea__error_173cq","textarea":"textarea__textarea_173cq","hint":"textarea__hint_173cq"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -82,7 +82,7 @@ var Textarea = React.forwardRef(function (_a, ref) {
     var focusVisible = hooks.useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
-    var hasOverflow = Boolean(maxLength && stateValue.slice(maxLength));
+    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
     React.useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -154,9 +154,9 @@ var Textarea = React.forwardRef(function (_a, ref) {
                 _a[components_PseudoTextArea.styles.scrollableWithLabel] = label,
                 _a[components_PseudoTextArea.styles.filled] = filled,
                 _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: components_PseudoTextArea.styles.scrollableWrapper } },
-            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, components_PseudoTextArea.styles.customScrollbar), ref: pseudoTextareaRef })),
-            React__default.default.createElement(TextareaAutosize__default.default, __assign({}, textareaProps, { minRows: minRowsValue })),
-            React__default.default.createElement(TextareaAutosize__default.default, { className: cn__default.default(textareaProps.className, components_PseudoTextArea.styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
+            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, components_PseudoTextArea.styles.customScrollbar), ref: pseudoTextareaRef })),
+            React__default.default.createElement(TextareaAutosize__default.default, __assign({}, textareaProps, { minRows: minRowsValue, style: { overflow: 'hidden' } })),
+            React__default.default.createElement(TextareaAutosize__default.default, { className: cn__default.default(textareaProps.className, components_PseudoTextArea.styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, role: 'none', onHeightChange: function (height) {
                     if (autosize) {
                         setScrollableHeight(height);
                         if (onHeightChange) {
@@ -178,7 +178,7 @@ var Textarea = React.forwardRef(function (_a, ref) {
     return (React__default.default.createElement(coreComponentsFormControl.FormControl, { className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
             _c[components_PseudoTextArea.styles.focusVisible] = focusVisible,
             _c)), 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() }, nativeScrollbar ? (React__default.default.createElement(React__default.default.Fragment, null,
-        hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, components_PseudoTextArea.styles.nativeScrollbar), ref: pseudoTextareaRef })),
+        hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, components_PseudoTextArea.styles.nativeScrollbar), ref: pseudoTextareaRef })),
         renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 

package/textarea/PseudoTextArea-40ea83cb.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextareaIncomeProps } from "./typings";
+declare const PseudoTextArea: React.ForwardRefExoticComponent<{
+    /**
+     * Дополнительный класс компонента
+     */
+    pseudoTextareaClassName?: string | undefined;
+    /**
+     * Значение PseudoTextArea, разделяется на 2 части по maxLength
+     */
+    value: string;
+    /**
+     * Максимальное количество символов, символы свыше maxLength будут выделены
+     */
+    maxLength: number;
+} & Pick<TextareaIncomeProps, "size"> & React.RefAttributes<HTMLDivElement>>;
+export { PseudoTextArea };

package/textarea/PseudoTextArea-40ea83cb.js

@@ -0,0 +1,21 @@
+var React = require('react');
+var cn = require('classnames');
+
+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 = {"scrollable":"textarea__scrollable_1ndyb","scrollableWrapper":"textarea__scrollableWrapper_1ndyb","textarea":"textarea__textarea_1ndyb","s":"textarea__s_1ndyb","m":"textarea__m_1ndyb","l":"textarea__l_1ndyb","xl":"textarea__xl_1ndyb","textareaHidden":"textarea__textareaHidden_1ndyb","hasInnerLabel":"textarea__hasInnerLabel_1ndyb","resizeVertical":"textarea__resizeVertical_1ndyb","pseudoTextarea":"textarea__pseudoTextarea_1ndyb","overflow":"textarea__overflow_1ndyb","nativeScrollbar":"textarea__nativeScrollbar_1ndyb","customScrollbar":"textarea__customScrollbar_1ndyb","sub":"textarea__sub_1ndyb","scrollableWithLabel":"textarea__scrollableWithLabel_1ndyb","focusVisible":"textarea__focusVisible_1ndyb","filled":"textarea__filled_1ndyb"};
+require('./index.css');
+
+var PseudoTextArea = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, pseudoTextareaClassName = _a.pseudoTextareaClassName, maxLength = _a.maxLength, value = _a.value;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.pseudoTextarea, styles[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.overflow) }, value.slice(maxLength)),
+        React__default.default.createElement("br", null)));
+});
+
+exports.PseudoTextArea = PseudoTextArea;
+exports.styles = styles;

package/textarea/components/PseudoTextArea.js

@@ -1,6 +1,6 @@
 require('react');
 require('classnames');
-var components_PseudoTextArea = require('../PseudoTextArea-b5283f0f.js');
+var components_PseudoTextArea = require('../PseudoTextArea-40ea83cb.js');
 
 
 

package/textarea/components/index.d.ts

@@ -1 +1 @@
-export * from "../PseudoTextArea-b5283f0f";
+export * from "../PseudoTextArea-40ea83cb";

package/textarea/components/index.js

@@ -1,4 +1,4 @@
-var components_PseudoTextArea = require('../PseudoTextArea-b5283f0f.js');
+var components_PseudoTextArea = require('../PseudoTextArea-40ea83cb.js');
 require('react');
 require('classnames');
 

package/textarea/cssm/Component.js

@@ -82,7 +82,7 @@ var Textarea = React.forwardRef(function (_a, ref) {
     var focusVisible = hooks.useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
-    var hasOverflow = Boolean(maxLength && stateValue.slice(maxLength));
+    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
     React.useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -154,9 +154,9 @@ var Textarea = React.forwardRef(function (_a, ref) {
                 _a[styles__default.default.scrollableWithLabel] = label,
                 _a[styles__default.default.filled] = filled,
                 _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles__default.default.scrollableWrapper } },
-            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, styles__default.default.customScrollbar), ref: pseudoTextareaRef })),
-            React__default.default.createElement(TextareaAutosize__default.default, __assign({}, textareaProps, { minRows: minRowsValue })),
-            React__default.default.createElement(TextareaAutosize__default.default, { className: cn__default.default(textareaProps.className, styles__default.default.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
+            hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, styles__default.default.customScrollbar), ref: pseudoTextareaRef })),
+            React__default.default.createElement(TextareaAutosize__default.default, __assign({}, textareaProps, { minRows: minRowsValue, style: { overflow: 'hidden' } })),
+            React__default.default.createElement(TextareaAutosize__default.default, { className: cn__default.default(textareaProps.className, styles__default.default.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, role: 'none', onHeightChange: function (height) {
                     if (autosize) {
                         setScrollableHeight(height);
                         if (onHeightChange) {
@@ -178,7 +178,7 @@ var Textarea = React.forwardRef(function (_a, ref) {
     return (React__default.default.createElement(coreComponentsFormControl.FormControl, { className: cn__default.default(className), fieldClassName: cn__default.default(fieldClassName, (_c = {},
             _c[styles__default.default.focusVisible] = focusVisible,
             _c)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons() }, nativeScrollbar ? (React__default.default.createElement(React__default.default.Fragment, null,
-        hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, styles__default.default.nativeScrollbar), ref: pseudoTextareaRef })),
+        hasOverflow && (React__default.default.createElement(components_PseudoTextArea.PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn__default.default(textareaClassNameCalc, styles__default.default.nativeScrollbar), ref: pseudoTextareaRef })),
         renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 

package/textarea/cssm/components/PseudoTextArea.d.ts

@@ -2,7 +2,17 @@
 import React from 'react';
 import { TextareaIncomeProps } from "../typings";
 declare const PseudoTextArea: React.ForwardRefExoticComponent<{
-    pseudoTextareaClassName: string;
-    stateValue: string;
-} & TextareaIncomeProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Дополнительный класс компонента
+     */
+    pseudoTextareaClassName?: string | undefined;
+    /**
+     * Значение PseudoTextArea, разделяется на 2 части по maxLength
+     */
+    value: string;
+    /**
+     * Максимальное количество символов, символы свыше maxLength будут выделены
+     */
+    maxLength: number;
+} & Pick<TextareaIncomeProps, "size"> & React.RefAttributes<HTMLDivElement>>;
 export { PseudoTextArea };

package/textarea/cssm/components/PseudoTextArea.js

@@ -9,10 +9,10 @@ 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 ? 's' : _b, _c = _a.pseudoTextareaClassName, pseudoTextareaClassName = _c === void 0 ? '' : _c, maxLength = _a.maxLength, stateValue = _a.stateValue;
+    var _b = _a.size, size = _b === void 0 ? 's' : _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[size], pseudoTextareaClassName), ref: ref, hidden: true },
-        React__default.default.createElement("span", null, stateValue.slice(0, maxLength)),
-        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.overflow) }, stateValue.slice(maxLength)),
+        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)));
 });
 

package/textarea/cssm/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export type { TextareaProps } from "./typings";

package/textarea/default.css

@@ -1,4 +1,4 @@
-/* hash: 1k6yl */
+/* hash: 1108i */
 :root {
     --color-light-graphic-primary: #0b1f35;
     --color-light-text-negative: #d91d0b;
@@ -34,41 +34,41 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_5npn7 {
+.textarea__input_cdfdx {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_5npn7:-webkit-autofill {
+.textarea__input_cdfdx:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_5npn7::placeholder {
+.textarea__input_cdfdx::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_5npn7::placeholder {
+.textarea__hasInnerLabel_cdfdx::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_5npn7 {
+.textarea__clearIcon_cdfdx {
     color: var(--color-light-graphic-primary);
 }
 /* READ-ONLY STATE */
-.textarea__input_5npn7:read-only {
+.textarea__input_cdfdx:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_5npn7:read-only:focus::placeholder {
+.textarea__input_cdfdx:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_5npn7:disabled {
+.textarea__input_cdfdx:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_5npn7:focus::placeholder {
+.textarea__input_cdfdx:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_5npn7 {
+.textarea__error_cdfdx {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
@@ -94,32 +94,32 @@
 
     /* border-radius */
 }
-.textarea__textarea_5npn7 {
+.textarea__textarea_cdfdx {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_5npn7::placeholder {
+.textarea__textarea_cdfdx::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_5npn7::placeholder {
+.textarea__hasInnerLabel_cdfdx::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_5npn7:disabled {
+.textarea__textarea_cdfdx:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_5npn7:read-only {
+.textarea__textarea_cdfdx:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_5npn7:focus::placeholder {
+.textarea__textarea_cdfdx:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
-.textarea__hint_5npn7 {
+.textarea__hint_cdfdx {
     color: var(--form-control-hint-color);
 }
-.textarea__error_5npn7 {
+.textarea__error_cdfdx {
     color: var(--form-control-error-color);
 }

package/textarea/esm/Component.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { FormControl } from '../../form-control/esm';
 import { Scrollbar } from '../../scrollbar/esm';
 import { useMedia, useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-06a7edca.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-d7df7e57.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -46,10 +46,10 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"input":"textarea__input_5npn7","hasInnerLabel":"textarea__hasInnerLabel_5npn7","clearIcon":"textarea__clearIcon_5npn7","error":"textarea__error_5npn7","textarea":"textarea__textarea_5npn7","hint":"textarea__hint_5npn7"};
+var defaultColors = {"input":"textarea__input_cdfdx","hasInnerLabel":"textarea__hasInnerLabel_cdfdx","clearIcon":"textarea__clearIcon_cdfdx","error":"textarea__error_cdfdx","textarea":"textarea__textarea_cdfdx","hint":"textarea__hint_cdfdx"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_10dmz","hasInnerLabel":"textarea__hasInnerLabel_10dmz","clearIcon":"textarea__clearIcon_10dmz","error":"textarea__error_10dmz","textarea":"textarea__textarea_10dmz","hint":"textarea__hint_10dmz"};
+var invertedColors = {"input":"textarea__input_173cq","hasInnerLabel":"textarea__hasInnerLabel_173cq","clearIcon":"textarea__clearIcon_173cq","error":"textarea__error_173cq","textarea":"textarea__textarea_173cq","hint":"textarea__hint_173cq"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -75,7 +75,7 @@ var Textarea = forwardRef(function (_a, ref) {
     var focusVisible = useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
-    var hasOverflow = Boolean(maxLength && stateValue.slice(maxLength));
+    var hasOverflow = Boolean((maxLength && (value === null || value === void 0 ? void 0 : value.slice(maxLength))) || (maxLength && stateValue.slice(maxLength)));
     useEffect(function () {
         var pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -147,9 +147,9 @@ var Textarea = forwardRef(function (_a, ref) {
                 _a[styles.scrollableWithLabel] = label,
                 _a[styles.filled] = filled,
                 _a)), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.scrollableWrapper } },
-            hasOverflow && (React.createElement(PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.customScrollbar), ref: pseudoTextareaRef })),
-            React.createElement(TextareaAutosize, __assign({}, textareaProps, { minRows: minRowsValue })),
-            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
+            hasOverflow && (React.createElement(PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.customScrollbar), ref: pseudoTextareaRef })),
+            React.createElement(TextareaAutosize, __assign({}, textareaProps, { minRows: minRowsValue, style: { overflow: 'hidden' } })),
+            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, role: 'none', onHeightChange: function (height) {
                     if (autosize) {
                         setScrollableHeight(height);
                         if (onHeightChange) {
@@ -171,7 +171,7 @@ var Textarea = forwardRef(function (_a, ref) {
     return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, (_c = {},
             _c[styles.focusVisible] = focusVisible,
             _c)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons() }, nativeScrollbar ? (React.createElement(React.Fragment, null,
-        hasOverflow && (React.createElement(PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.nativeScrollbar), ref: pseudoTextareaRef })),
+        hasOverflow && (React.createElement(PseudoTextArea, { value: value !== null && value !== void 0 ? value : stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.nativeScrollbar), ref: pseudoTextareaRef })),
         renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 

package/textarea/esm/PseudoTextArea-d7df7e57.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextareaIncomeProps } from "./typings";
+declare const PseudoTextArea: React.ForwardRefExoticComponent<{
+    /**
+     * Дополнительный класс компонента
+     */
+    pseudoTextareaClassName?: string | undefined;
+    /**
+     * Значение PseudoTextArea, разделяется на 2 части по maxLength
+     */
+    value: string;
+    /**
+     * Максимальное количество символов, символы свыше maxLength будут выделены
+     */
+    maxLength: number;
+} & Pick<TextareaIncomeProps, "size"> & React.RefAttributes<HTMLDivElement>>;
+export { PseudoTextArea };