@alfalab/core-components 36.1.2 → 36.3.0

package/textarea/cssm/Component.js

@@ -7,8 +7,9 @@ var cn = require('classnames');
 var coreComponentsFormControl = require('../../form-control/cssm');
 var coreComponentsScrollbar = require('../../scrollbar/cssm');
 var hooks = require('@alfalab/hooks');
-var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
+var components_PseudoTextArea = require('./components/PseudoTextArea.js');
+var defaultColors = require('./default.module.css');
 var invertedColors = require('./inverted.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17,8 +18,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefaultLegacy(TextareaAutosize);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
 var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
 
 /******************************************************************************
@@ -75,12 +76,21 @@ var Textarea = React.forwardRef(function (_a, ref) {
     var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = React.useRef(null);
+    var pseudoTextareaRef = React.useRef(null);
     var _p = React.useState(false), focused = _p[0], setFocused = _p[1];
     var _q = React.useState(defaultValue || ''), stateValue = _q[0], setStateValue = _q[1];
     var _r = React.useState(), scrollableHeight = _r[0], setScrollableHeight = _r[1];
+    var _s = React.useState(0), scrollPosition = _s[0], setScrollPosition = _s[1];
     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));
+    React.useEffect(function () {
+        var pseudoNode = pseudoTextareaRef.current;
+        if (pseudoNode) {
+            pseudoNode.scrollTop = scrollPosition;
+        }
+    }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     React.useEffect(function () {
         if (autosize) {
@@ -109,11 +119,18 @@ var Textarea = React.forwardRef(function (_a, ref) {
         }
     };
     var handleTextareaChange = function (event) {
+        var value = event.target.value;
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: value });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(value);
+        }
+    };
+    var handleTeaxtareaScroll = function (event) {
+        if (maxLength) {
+            var value_1 = event.target.scrollTop;
+            setScrollPosition(value_1);
         }
     };
     var getValueLength = function () {
@@ -122,18 +139,13 @@ var Textarea = React.forwardRef(function (_a, ref) {
         }
         return value.length;
     };
-    var getHint = function () {
-        if (showCounter) {
-            return getCounterText(getValueLength(), maxLength);
-        }
-        return hint;
-    };
-    var textareaProps = __assign(__assign({}, restProps), { className: cn__default['default'](styles__default['default'].textarea, colorStyles[colors].textarea, styles__default['default'][size], (_b = {},
-            _b[styles__default['default'].hasInnerLabel] = nativeScrollbar && hasInnerLabel,
-            _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-            _b[styles__default['default'].filled] = nativeScrollbar && filled,
-            _b[styles__default['default'].resizeVertical] = resize === 'vertical',
-            _b), textareaClassName), autoComplete: autoComplete, disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default['default']([ref, textareaRef]), 'data-test-id': dataTestId, maxLength: maxLength });
+    var textareaClassNameCalc = cn__default['default'](styles__default['default'].textarea, colorStyles[colors].textarea, styles__default['default'][size], (_b = {},
+        _b[styles__default['default'].hasInnerLabel] = nativeScrollbar && hasInnerLabel,
+        _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
+        _b[styles__default['default'].filled] = nativeScrollbar && filled,
+        _b[styles__default['default'].resizeVertical] = resize === 'vertical',
+        _b), textareaClassName);
+    var textareaProps = __assign(__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs__default['default']([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
     var renderWithNativeScrollbar = function () {
         return autosize ? (React__default['default'].createElement(TextareaAutosize__default['default'], __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React__default['default'].createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })));
     };
@@ -144,6 +156,7 @@ 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) {
                     if (autosize) {
@@ -154,9 +167,21 @@ var Textarea = React.forwardRef(function (_a, ref) {
                     }
                 } })));
     };
+    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))),
+            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)), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
+            _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 })),
+        renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 
 exports.Textarea = Textarea;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextareaIncomeProps } from "../typings";
+declare const PseudoTextArea: React.ForwardRefExoticComponent<{
+    pseudoTextareaClassName: string;
+    stateValue: string;
+} & TextareaIncomeProps & React.RefAttributes<HTMLDivElement>>;
+export { PseudoTextArea };

package/textarea/cssm/components/PseudoTextArea.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('../index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(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;
+    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)),
+        "\u00A0"));
+});
+
+exports.PseudoTextArea = PseudoTextArea;

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

@@ -0,0 +1 @@
+export * from "./PseudoTextArea";

package/textarea/cssm/components/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('../index.module.css');
+var components_PseudoTextArea = require('./PseudoTextArea.js');
+
+
+
+exports.PseudoTextArea = components_PseudoTextArea.PseudoTextArea;

package/textarea/cssm/default.module.css

@@ -1,5 +1,6 @@
 :root {
     --color-light-graphic-primary: #0b1f35;
+    --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
     --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
@@ -70,6 +71,28 @@
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
+:root {
+    --form-control-hint-color: var(--color-light-text-secondary);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+    --form-control-error-color: var(--color-light-text-negative);
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+}
 .textarea {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -93,3 +116,9 @@
 .textarea:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
+.hint {
+    color: var(--form-control-hint-color);
+}
+.error {
+    color: var(--form-control-error-color);
+}

package/textarea/cssm/index.js

@@ -8,8 +8,9 @@ require('classnames');
 require('../../form-control/cssm');
 require('../../scrollbar/cssm');
 require('@alfalab/hooks');
-require('./default.module.css');
 require('./index.module.css');
+require('./components/PseudoTextArea.js');
+require('./default.module.css');
 require('./inverted.module.css');
 
 

package/textarea/cssm/index.module.css

@@ -1,5 +1,6 @@
 :root {
     --color-light-border-link: #007aff;
+    --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
 }
 :root {
 
@@ -45,6 +46,7 @@
     --form-control-labeled-m-paddings: 28px var(--gap-s) 8px;
     --form-control-labeled-l-paddings: 32px var(--gap-s) 12px;
     --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px;
+    --form-control-sub-paddings: 0;
 
     /* disabled */
 
@@ -101,11 +103,10 @@
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-
     position: relative;
     display: block;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     background: none;
     border: none;
     margin: 0;
@@ -143,6 +144,39 @@
 .resizeVertical {
     resize: vertical;
 }
+.pseudoTextarea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    z-index: -1;
+    overflow: hidden;
+    max-height: 100%
+}
+.pseudoTextarea span {
+        color: transparent;
+    }
+.pseudoTextarea .overflow {
+        background-color: var(--color-light-graphic-negative-alpha-40);
+    }
+.pseudoTextarea.nativeScrollbar {
+        overflow: auto;
+    }
+.pseudoTextarea.customScrollbar {
+        max-height: none;
+    }
+.sub {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    display: block;
+    /* adjusting overall height 👌 */
+    margin-top: 6px;
+    padding: var(--form-control-sub-paddings);
+}
 /* SIZES */
 .textarea.s, .scrollable.s {
         min-height: var(--textarea-s-min-height);

package/textarea/cssm/inverted.module.css

@@ -1,6 +1,8 @@
 :root {
     --color-light-graphic-primary-inverted: #fff;
+    --color-light-text-negative: #d91d0b;
     --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
     --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
     --color-light-text-tertiary-inverted: rgba(255, 255, 255, 0.4);
 }
@@ -70,6 +72,28 @@
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
+:root {
+    --form-control-hint-color: var(--color-light-text-secondary);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+    --form-control-error-color: var(--color-light-text-negative);
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+}
 .textarea {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -93,3 +117,9 @@
 .textarea:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
+.hint {
+    color: var(--form-control-hint-color);
+}
+.error {
+    color: var(--form-control-error-color);
+}

package/textarea/cssm/typings.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
+type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & TextareaIncomeProps;
+type TextareaIncomeProps = {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Начальное значение поля
+     */
+    defaultValue?: string;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Слот под компонентом
+     */
+    bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс textarea
+     */
+    textareaClassName?: string;
+    /**
+     * Управление возможностью подстраивать высоту компонента под высоту текста
+     */
+    autosize?: boolean;
+    /**
+     * Максимальное количество отображаемых строк (работает только вместе с autosize)
+     */
+    maxRows?: number;
+    /**
+     * Минимальное количество отображаемых строк (работает только вместе c autosize)
+     */
+    minRows?: number;
+    /**
+     * Максимальная высота элемента
+     */
+    maxHeight?: number;
+    /**
+     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
+     */
+    resize?: 'vertical' | 'none';
+    /**
+     * Обработчик ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
+     */
+    onHeightChange?: (height?: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Максимальное количество символов (native prop)
+     */
+    maxLength?: number;
+    /**
+     * Показывать счетчик введенных символов
+     */
+    showCounter?: boolean;
+    /**
+     * Функция, возвращающая текст для счетчика
+     */
+    getCounterText?: (textLength: number, maxLength?: number) => string;
+    /**
+     * Нужно ли использовать нативный скроллбар.
+     */
+    nativeScrollbar?: boolean;
+};
+export { TextareaProps, TextareaIncomeProps };

package/textarea/cssm/typings.js

@@ -0,0 +1 @@
+

package/textarea/default.css

@@ -1,6 +1,7 @@
 /* hash: 2ex7r */
 :root {
     --color-light-graphic-primary: #0b1f35;
+    --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
     --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
@@ -33,64 +34,92 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_1a636 {
+.textarea__input_1m0s6 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1a636:-webkit-autofill {
+.textarea__input_1m0s6:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_1a636::placeholder {
+.textarea__input_1m0s6::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_1a636::placeholder {
+.textarea__hasInnerLabel_1m0s6::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_1a636 {
+.textarea__clearIcon_1m0s6 {
     color: var(--color-light-graphic-primary);
 }
 /* READ-ONLY STATE */
-.textarea__input_1a636:read-only {
+.textarea__input_1m0s6:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_1a636:read-only:focus::placeholder {
+.textarea__input_1m0s6:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1a636:disabled {
+.textarea__input_1m0s6:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1a636:focus::placeholder {
+.textarea__input_1m0s6:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1a636 {
+.textarea__error_1m0s6 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_1a636 {
+:root {
+    --form-control-hint-color: var(--color-light-text-secondary);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+    --form-control-error-color: var(--color-light-text-negative);
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+}
+.textarea__textarea_1m0s6 {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1a636::placeholder {
+.textarea__textarea_1m0s6::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_1a636::placeholder {
+.textarea__hasInnerLabel_1m0s6::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1a636:disabled {
+.textarea__textarea_1m0s6:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1a636:read-only {
+.textarea__textarea_1m0s6:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1a636:focus::placeholder {
+.textarea__textarea_1m0s6:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
+.textarea__hint_1m0s6 {
+    color: var(--form-control-hint-color);
+}
+.textarea__error_1m0s6 {
+    color: var(--form-control-error-color);
+}