@koslibs/components 1.4.0 → 1.6.0

package/dist/components/Textarea/textarea.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
+import classnames from "classnames";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Button } from "../Button/index.js";
+import { TypographyText } from "../Typography/text.js";
+import { useAutosize } from "./hooks/use-autosize.js";
+import index_module from "./index.module.js";
+const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, label, labelView = 'outer', hint, error, minRows = 3, maxRows, autosize = false, resize = false, clear = false, value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, id, className, style, fieldClassName, textareaClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+    const generatedId = useId();
+    const textareaId = id ?? generatedId;
+    const textareaRef = useRef(null);
+    const [uncontrolledLength, setUncontrolledLength] = useState(defaultValue?.length ?? 0);
+    const controlled = void 0 !== value;
+    const valueLength = controlled ? value.length : uncontrolledLength;
+    const hasValue = valueLength > 0;
+    const showCounter = showValueLength && void 0 !== maxLength && Number.isInteger(maxLength) && maxLength >= 0;
+    const hasLabel = null != label && false !== label && '' !== label;
+    const errorMessage = hint && 'boolean' != typeof error ? error : void 0;
+    const message = errorMessage || hint;
+    const showClear = clear && hasValue && !disabled && !readOnly;
+    const rows = Number.isFinite(minRows) ? Math.max(1, Math.floor(minRows)) : 3;
+    const limit = void 0 !== maxRows && Number.isFinite(maxRows) ? Math.max(rows, Math.floor(maxRows)) : void 0;
+    const getDataTestId = useDataTestId(dataTestId);
+    useImperativeHandle(ref, ()=>textareaRef.current, []);
+    useAutosize(textareaRef, autosize, rows, limit, restProps.form);
+    useEffect(()=>{
+        const textarea = textareaRef.current;
+        const form = textarea?.form;
+        let active = true;
+        const handleReset = (event)=>{
+            setTimeout(()=>{
+                if (active && !event.defaultPrevented) setUncontrolledLength(textarea?.value.length ?? 0);
+            }, 0);
+        };
+        form?.addEventListener('reset', handleReset);
+        return ()=>{
+            active = false;
+            form?.removeEventListener('reset', handleReset);
+        };
+    }, [
+        restProps.form
+    ]);
+    const handleChange = (event)=>{
+        const nextValue = event.target.value;
+        if (!controlled) setUncontrolledLength(nextValue.length);
+        onChange?.(event, {
+            value: nextValue
+        });
+    };
+    const handleClear = (event)=>{
+        const textarea = textareaRef.current;
+        if (!textarea || !showClear) return;
+        if (!controlled) {
+            textarea.value = '';
+            setUncontrolledLength(0);
+        }
+        onClear?.(event);
+        textarea.focus();
+    };
+    const handleFieldClick = (event)=>{
+        if (disabled || event.defaultPrevented || !(event.target instanceof Element)) return;
+        const target = event.target.closest('textarea, button, a, label, input, select, [contenteditable], [tabindex]');
+        if (target && event.currentTarget.contains(target)) return;
+        textareaRef.current?.focus();
+    };
+    const labelElement = hasLabel && /*#__PURE__*/ jsx("label", {
+        htmlFor: textareaId,
+        className: classnames(index_module.label, labelClassName),
+        "data-test-id": getDataTestId('label'),
+        children: /*#__PURE__*/ jsx(TypographyText, {
+            size: 'inner' === labelView ? 12 : 13,
+            weight: 'inner' === labelView ? 'regular' : 'medium',
+            children: label
+        })
+    });
+    const counterElement = showCounter && /*#__PURE__*/ jsxs(TypographyText, {
+        size: 11,
+        className: index_module.counter,
+        style: {
+            minWidth: `${2 * String(maxLength).length + 1}ch`
+        },
+        dataTestId: getDataTestId('counter'),
+        children: [
+            valueLength,
+            "/",
+            maxLength
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames(index_module.component, className),
+        style: {
+            '--textarea-rows': rows,
+            ...style
+        },
+        "data-view": view,
+        "data-block": block || void 0,
+        "data-disabled": disabled || void 0,
+        "data-read-only": readOnly || void 0,
+        "data-error": Boolean(error) || void 0,
+        "data-label-view": labelView,
+        "data-inner-label": 'inner' === labelView && hasLabel || void 0,
+        "data-inner-header": 'inner' === labelView && (hasLabel || showCounter) || void 0,
+        "data-filled": hasValue || void 0,
+        "data-resize": resize && !autosize && !disabled && !readOnly || void 0,
+        "data-test-id": getDataTestId('form-control'),
+        children: [
+            'outer' === labelView && (hasLabel || showCounter) && /*#__PURE__*/ jsxs("div", {
+                className: index_module.header,
+                children: [
+                    labelElement,
+                    counterElement
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames(index_module.field, fieldClassName),
+                onClick: handleFieldClick,
+                "data-test-id": getDataTestId('field'),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: index_module.value,
+                        children: [
+                            'inner' === labelView && (hasLabel || showCounter) && /*#__PURE__*/ jsxs("div", {
+                                className: classnames(index_module.header, index_module.innerHeader),
+                                children: [
+                                    labelElement,
+                                    counterElement
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("textarea", {
+                                ...restProps,
+                                ref: textareaRef,
+                                id: textareaId,
+                                value: value,
+                                defaultValue: defaultValue,
+                                rows: rows,
+                                maxLength: maxLength,
+                                disabled: disabled,
+                                readOnly: readOnly,
+                                onChange: handleChange,
+                                className: classnames(index_module.textarea, textareaClassName),
+                                "data-test-id": dataTestId
+                            })
+                        ]
+                    }),
+                    showClear && /*#__PURE__*/ jsx(Button, {
+                        view: "text",
+                        size: 32,
+                        className: index_module.clear,
+                        title: "Очистить поле",
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onClick: handleClear,
+                        dataTestId: getDataTestId('clear'),
+                        children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                            width: 16,
+                            height: 16
+                        })
+                    })
+                ]
+            }),
+            Boolean(message) && /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 12,
+                className: classnames(index_module.message, messageClassName),
+                dataTestId: getDataTestId(errorMessage ? 'error' : 'hint'),
+                children: message
+            })
+        ]
+    });
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/dist/components/Textarea/types.d.ts

@@ -0,0 +1,108 @@
+import type { ChangeEvent, MouseEvent, ReactNode, TextareaHTMLAttributes } from 'react';
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'maxLength' | 'onChange' | 'children' | 'rows'> & {
+    /**
+     * Значение управляемого поля.
+     */
+    value?: string;
+    /**
+     * Начальное значение неуправляемого поля.
+     */
+    defaultValue?: string;
+    /**
+     * Максимальная длина нативного ввода в кодовых единицах UTF-16.
+     */
+    maxLength?: number;
+    /**
+     * Показывает текущую длину и maxLength рядом с label.
+     * Работает только при заданном неотрицательном целом maxLength.
+     * @default false
+     */
+    showValueLength?: boolean;
+    /**
+     * Вид поля: белый primary или светлый secondary.
+     * @default 'primary'
+     */
+    view?: 'primary' | 'secondary';
+    /**
+     * Растягивает компонент на ширину контейнера.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Название поля. Клик переводит фокус в textarea.
+     */
+    label?: ReactNode;
+    /**
+     * Положение label. Внутренний label поднимается при фокусе или заполнении.
+     * @default 'outer'
+     */
+    labelView?: 'outer' | 'inner';
+    /**
+     * Подсказка под полем. Сообщение об ошибке заменяет её.
+     */
+    hint?: ReactNode;
+    /**
+     * Сообщение об ошибке или true для состояния ошибки без сообщения.
+     * Без непустого hint отображается только рамка. true сохраняет hint.
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Начальное число видимых строк; при autosize — минимальное число строк.
+     * Должно быть положительным целым числом.
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Максимальное число видимых строк при autosize. Затем текст прокручивается.
+     * Значение меньше minRows ограничивается minRows.
+     */
+    maxRows?: number;
+    /**
+     * Подстраивает высоту под содержимое, включая переносы по ширине.
+     * @default false
+     */
+    autosize?: boolean;
+    /**
+     * Разрешает менять высоту вручную за нижний правый угол.
+     * Не работает вместе с autosize, в disabled и readOnly. Ширина сохраняется.
+     * @default false
+     */
+    resize?: boolean;
+    /**
+     * Показывает кнопку очистки заполненного редактируемого поля.
+     * @default false
+     */
+    clear?: boolean;
+    /**
+     * Обработчик ввода с нативным событием React и текущим значением.
+     */
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик очистки. Не вызывает onChange.
+     * В управляемом режиме обновите value в этом обработчике.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Класс визуального поля.
+     */
+    fieldClassName?: string;
+    /**
+     * Класс нативного textarea. className и style относятся к обёртке.
+     */
+    textareaClassName?: string;
+    /**
+     * Класс label.
+     */
+    labelClassName?: string;
+    /**
+     * Класс подсказки или сообщения об ошибке.
+     */
+    messageClassName?: string;
+    /**
+     * Идентификатор нативного textarea. Части получают суффиксы -form-control,
+     * -field, -label, -hint, -error, -clear и -counter.
+     */
+    dataTestId?: string;
+};

package/dist/components/Textarea/vars.css

@@ -0,0 +1,9 @@
+@import "../Input/vars.css";
+
+:root {
+  --textarea-width: var(--input-width);
+  --textarea-padding: var(--input-padding-40);
+  --textarea-font-size: var(--input-font-size-40);
+  --textarea-line-height: 17px;
+}
+

package/dist/hooks/use-data-test-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Создаёт идентификаторы частей компонента с суффиксом.
+ * Без базового dataTestId или при пустой строке возвращает undefined.
+ */
+export declare function useDataTestId(dataTestId?: string): (suffix: string) => string | undefined;

package/dist/hooks/use-data-test-id.js

@@ -0,0 +1,7 @@
+import { useCallback } from "react";
+function useDataTestId(dataTestId) {
+    return useCallback((suffix)=>dataTestId ? `${dataTestId}-${suffix}` : void 0, [
+        dataTestId
+    ]);
+}
+export { useDataTestId };

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
+export { Input } from './components/Input/index.js';
+export type { InputProps } from './components/Input/index.js';
+export { Textarea } from './components/Textarea/index.js';
+export type { TextareaProps } from './components/Textarea/index.js';
 export { Spinner } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
 export { Typography, TypographyText, TypographyTitle, Text, Title } from './components/Typography/index.js';

package/dist/index.js

@@ -1,4 +1,6 @@
 export { Button } from "./components/Button/index.js";
+export { Input } from "./components/Input/index.js";
+export { Textarea } from "./components/Textarea/index.js";
 export { Spinner } from "./components/Spinner/index.js";
 export { Text, Title, Typography, TypographyText, TypographyTitle } from "./components/Typography/index.js";
 export { Popover } from "./components/Popover/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.4.0",
+    "version": "1.6.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",
@@ -80,7 +80,7 @@
         "react-dom": "^18.3.1 || ^19.0.0"
     },
     "dependencies": {
-        "@koslibs/icons": "1.0.1",
+        "@koslibs/icons": "1.2.0",
         "@popperjs/core": "2.11.8",
         "classnames": "2.5.1"
     }