@koslibs/components 1.4.0 → 1.6.0

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

@@ -0,0 +1,115 @@
+import type { ChangeEvent, CSSProperties, InputHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'maxLength' | 'onChange' | 'children'> & {
+    /**
+     * Значение управляемого поля.
+     */
+    value?: string;
+    /**
+     * Начальное значение неуправляемого поля.
+     */
+    defaultValue?: string;
+    /**
+     * Максимальная длина ввода. Передаётся в нативный maxLength.
+     * Длина считается в кодовых единицах UTF-16, как в HTML input.
+     */
+    maxLength?: number;
+    /**
+     * Показывает текущую длину и maxLength, например 13/64.
+     * Работает только при заданном неотрицательном целом maxLength.
+     * При inner расположен внутри поля, при outer — рядом с внешним label.
+     * @default false
+     */
+    showValueLength?: boolean;
+    /**
+     * Вид поля: белый primary или светлый secondary.
+     * @default 'primary'
+     */
+    view?: 'primary' | 'secondary';
+    /**
+     * Высота поля в пикселях без внешнего label и сообщения.
+     * @default 40
+     */
+    size?: 40 | 48 | 56 | 64 | 72;
+    /**
+     * Растягивает компонент на ширину контейнера.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Название поля. Связывается с input через htmlFor и id.
+     */
+    label?: ReactNode;
+    /**
+     * Положение label: снаружи или внутри поля.
+     * Внутренний label поднимается при фокусе или заполнении поля.
+     * @default 'outer'
+     */
+    labelView?: 'outer' | 'inner';
+    /**
+     * Подсказка под полем. При наличии сообщения об ошибке заменяется им.
+     */
+    hint?: ReactNode;
+    /**
+     * Сообщение об ошибке или true для состояния ошибки без сообщения.
+     * Сообщение заменяет hint; без hint отображается только состояние ошибки.
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Аддон слева от значения, например иконка поиска.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Аддон справа от значения, например единица измерения или кнопка.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Показывает кнопку очистки заполненного поля. Скрыта в disabled и readOnly.
+     * @default false
+     */
+    clear?: boolean;
+    /**
+     * Доступное имя кнопки очистки.
+     * @default 'Очистить поле'
+     */
+    clearLabel?: string;
+    /**
+     * Обработчик ввода с нативным событием React и текущим значением.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик очистки. Не вызывает onChange.
+     * Для управляемого поля обновите value в этом обработчике.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Класс обёртки компонента.
+     */
+    className?: string;
+    /**
+     * Стили обёртки компонента, включая ширину и CSS-переменные.
+     */
+    style?: CSSProperties;
+    /**
+     * Класс визуального поля с аддонами.
+     */
+    fieldClassName?: string;
+    /**
+     * Класс нативного input.
+     */
+    inputClassName?: string;
+    /**
+     * Класс label.
+     */
+    labelClassName?: string;
+    /**
+     * Класс подсказки или сообщения об ошибке.
+     */
+    messageClassName?: string;
+    /**
+     * Идентификатор нативного input. Части получают суффиксы -form-control,
+     * -field, -label, -hint, -error, -left-addon, -right-addon, -clear и -counter.
+     */
+    dataTestId?: string;
+};

package/dist/components/Input/vars.css

@@ -0,0 +1,32 @@
+:root {
+  --input-primary-background-color: #fff;
+  --input-secondary-background-color: #f5f3ec;
+  --input-color: #1c1a18;
+  --input-placeholder-color: #736554;
+  --input-label-color: #736554;
+  --input-hint-color: #736554;
+  --input-icon-color: #736554;
+  --input-border-color: transparent;
+  --input-hover-border-color: #c8beaa;
+  --input-focus-border-color: #d95300;
+  --input-error-border-color: #ef5350;
+  --input-error-message-color: #b42318;
+  --input-disabled-background-color: #cfd1cb;
+  --input-disabled-color: #858981;
+  --input-read-only-border-color: #c8beaa;
+  --input-border-radius: 8px;
+  --input-gap: 8px;
+  --input-icon-size: 16px;
+  --input-width: 320px;
+  --input-font-size-40: 13px;
+  --input-font-size-48: 13px;
+  --input-font-size-56: 14px;
+  --input-font-size-64: 14px;
+  --input-font-size-72: 16px;
+  --input-padding-40: 12px;
+  --input-padding-48: 12px;
+  --input-padding-56: 16px;
+  --input-padding-64: 16px;
+  --input-padding-72: 20px;
+}
+

package/dist/components/Modal/components/content/index.js

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Content = /*#__PURE__*/ forwardRef(({ children, className, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
-        "data-test-id": testId ? `${testId}-content` : void 0,
+        "data-test-id": getDataTestId('content'),
         children: children
     });
 });

package/dist/components/Modal/components/controls/index.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import react, { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Controls = /*#__PURE__*/ forwardRef(({ primary, secondary, layout = 'end', gap = 12, className, children, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, index_module[layout], index_module[`gap-${gap}`], className),
-        "data-test-id": testId ? `${testId}-controls` : void 0,
+        "data-test-id": getDataTestId('controls'),
         children: children ?? /*#__PURE__*/ jsxs(react.Fragment, {
             children: [
                 secondary,

package/dist/components/Modal/components/footer/index.js

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Footer = /*#__PURE__*/ forwardRef(({ children, className, dataTestId, ...restProps }, ref)=>{
     const { dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
-        "data-test-id": testId ? `${testId}-footer` : void 0,
+        "data-test-id": getDataTestId('footer'),
         children: children
     });
 });

package/dist/components/Modal/components/header/index.js

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
 import { Button } from "../../../Button/index.js";
 import { TypographyText } from "../../../Typography/index.js";
 import { ModalContext } from "../../context.js";
 import index_module from "./index.module.js";
 const Header = /*#__PURE__*/ forwardRef(({ title, subtitle, hasCloser = true, className, dataTestId, ...restProps }, ref)=>{
     const { onClose, dataTestId: modalDataTestId } = useContext(ModalContext);
-    const testId = dataTestId ?? modalDataTestId;
+    const getDataTestId = useDataTestId(dataTestId ?? modalDataTestId);
     const handleClick = ()=>{
         onClose?.();
     };
@@ -16,7 +17,7 @@ const Header = /*#__PURE__*/ forwardRef(({ title, subtitle, hasCloser = true, cl
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
-        "data-test-id": testId ? `${testId}-header` : void 0,
+        "data-test-id": getDataTestId('header'),
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: index_module.content,

package/dist/components/Textarea/hooks/use-autosize.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useAutosize(ref: RefObject<HTMLTextAreaElement>, autosize: boolean, minRows: number, maxRows?: number, formId?: string): void;

package/dist/components/Textarea/hooks/use-autosize.js

@@ -0,0 +1,106 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = "u" < typeof document ? useEffect : useLayoutEffect;
+function useAutosize(ref, autosize, minRows, maxRows, formId) {
+    const updateRef = useRef();
+    useBrowserLayoutEffect(()=>{
+        if (!autosize) return;
+        const textarea = ref.current;
+        if (!textarea) return;
+        const doc = textarea.ownerDocument;
+        const view = doc.defaultView;
+        if (!view) return;
+        const measure = doc.createElement('textarea');
+        measure.tabIndex = -1;
+        Object.assign(measure.style, {
+            position: 'absolute',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+            height: '0',
+            minHeight: '0',
+            maxHeight: 'none',
+            padding: '0',
+            border: '0',
+            boxSizing: 'content-box',
+            overflow: 'hidden',
+            top: '0',
+            left: '0'
+        });
+        doc.body.append(measure);
+        const update = ()=>{
+            const computed = view.getComputedStyle(textarea);
+            const width = textarea.clientWidth;
+            if (!width) return;
+            Object.assign(measure.style, {
+                width: `${width}px`,
+                fontFamily: computed.fontFamily,
+                fontSize: computed.fontSize,
+                fontWeight: computed.fontWeight,
+                fontStyle: computed.fontStyle,
+                lineHeight: computed.lineHeight,
+                letterSpacing: computed.letterSpacing,
+                textIndent: computed.textIndent,
+                textTransform: computed.textTransform,
+                wordBreak: computed.wordBreak,
+                overflowWrap: computed.overflowWrap
+            });
+            measure.wrap = textarea.wrap;
+            const lineHeight = parseFloat(computed.lineHeight);
+            if (!Number.isFinite(lineHeight) || lineHeight <= 0) return;
+            measure.value = textarea.value || textarea.placeholder || ' ';
+            const height = Math.min(Math.max(measure.scrollHeight, minRows * lineHeight), void 0 === maxRows ? 1 / 0 : maxRows * lineHeight);
+            textarea.style.height = `${height}px`;
+        };
+        update();
+        updateRef.current = update;
+        const handleInput = ()=>{
+            queueMicrotask(()=>{
+                if (measure.isConnected) update();
+            });
+        };
+        textarea.addEventListener('input', handleInput);
+        const handleReset = (event)=>{
+            setTimeout(()=>{
+                if (measure.isConnected && !event.defaultPrevented) update();
+            }, 0);
+        };
+        const form = textarea.form;
+        form?.addEventListener('reset', handleReset);
+        let previousWidth = textarea.clientWidth;
+        const observer = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(()=>{
+            const width = textarea.clientWidth;
+            if (width !== previousWidth) {
+                previousWidth = width;
+                update();
+            }
+        });
+        observer?.observe(textarea);
+        view.addEventListener('resize', update);
+        doc.fonts?.addEventListener('loadingdone', update);
+        return ()=>{
+            observer?.disconnect();
+            view.removeEventListener('resize', update);
+            textarea.removeEventListener('input', handleInput);
+            form?.removeEventListener('reset', handleReset);
+            doc.fonts?.removeEventListener('loadingdone', update);
+            measure.remove();
+            updateRef.current = void 0;
+        };
+    }, [
+        ref,
+        autosize,
+        minRows,
+        maxRows,
+        formId
+    ]);
+    useBrowserLayoutEffect(()=>{
+        updateRef.current?.();
+    });
+    useBrowserLayoutEffect(()=>{
+        if (!autosize) ref.current?.style.removeProperty('height');
+    }, [
+        ref,
+        autosize,
+        minRows
+    ]);
+}
+export { useAutosize };

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

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea.js';
+export type { TextareaProps } from './types.js';

package/dist/components/Textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from "./textarea.js";

package/dist/components/Textarea/index.module.js

@@ -0,0 +1,14 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-K9LhZN",
+    field: "field-GADSqb",
+    textarea: "textarea-vCe_J9",
+    value: "value-pi9twE",
+    header: "header-AqxZRm",
+    innerHeader: "innerHeader-N47qW7",
+    counter: "counter-XxZoUu",
+    label: "label-fhdpHS",
+    clear: "clear-BZMCFP",
+    message: "message-_mT8Ov"
+};
+export default index_module;

package/dist/components/Textarea/index_module.css

@@ -0,0 +1,280 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-K9LhZN {
+  --field-background: var(--input-primary-background-color);
+  --field-border: var(--input-border-color);
+  --field-color: var(--input-color);
+  --field-label-color: var(--input-label-color);
+  --field-placeholder-color: var(--input-placeholder-color);
+  --field-icon-color: var(--input-icon-color);
+  gap: var(--input-gap);
+  width: var(--textarea-width);
+  vertical-align: top;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-primary);
+  color: var(--field-color);
+  flex-direction: column;
+  display: inline-flex;
+
+  &[data-block] {
+    width: 100%;
+    display: flex;
+  }
+
+  &[data-view="secondary"] {
+    --field-background: var(--input-secondary-background-color);
+  }
+
+  &[data-read-only] {
+    --field-border: var(--input-read-only-border-color);
+  }
+
+  &[data-error] {
+    --field-border: var(--input-error-border-color);
+  }
+
+  &[data-disabled] {
+    --field-background: var(--input-disabled-background-color);
+    --field-border: transparent;
+    --field-color: var(--input-disabled-color);
+    --field-label-color: var(--input-disabled-color);
+    --field-placeholder-color: var(--input-disabled-color);
+    --field-icon-color: var(--input-disabled-color);
+  }
+}
+
+.field-GADSqb {
+  box-sizing: border-box;
+  align-items: flex-start;
+  gap: var(--input-gap);
+  width: 100%;
+  padding: var(--textarea-padding);
+  border-radius: var(--input-border-radius);
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  cursor: text;
+  display: flex;
+}
+
+@media (hover: hover) {
+  .component-K9LhZN:not([data-disabled], [data-read-only], [data-error]) .field-GADSqb:hover {
+    box-shadow: inset 0 0 0 1px var(--input-hover-border-color);
+  }
+}
+
+.component-K9LhZN:not([data-disabled]) .field-GADSqb:focus-within {
+  box-shadow: none;
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
+.component-K9LhZN[data-error]:not([data-disabled]) .field-GADSqb:focus-within {
+  outline-color: var(--input-error-border-color);
+}
+
+.component-K9LhZN[data-disabled] .field-GADSqb, .textarea-vCe_J9:disabled {
+  cursor: not-allowed;
+}
+
+.value-pi9twE {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  position: relative;
+}
+
+.header-AqxZRm {
+  align-items: baseline;
+  gap: var(--input-gap);
+  min-width: 0;
+  display: flex;
+}
+
+.innerHeader-N47qW7 {
+  width: 100%;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.component-K9LhZN .counter-XxZoUu {
+  color: var(--field-label-color);
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  margin-left: auto;
+  line-height: 16px;
+}
+
+.innerHeader-N47qW7 .counter-XxZoUu {
+  line-height: 15px;
+}
+
+.label-fhdpHS {
+  min-width: 0;
+  color: var(--field-label-color);
+  overflow-wrap: anywhere;
+  cursor: inherit;
+  flex: 1;
+  font-size: 13px;
+  line-height: 16px;
+  display: block;
+}
+
+.component-K9LhZN[data-inner-label] .label-fhdpHS {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--textarea-font-size);
+  line-height: var(--textarea-line-height);
+  transition: transform .18s, font-size .18s, line-height .18s;
+  overflow: hidden;
+  transform: translateY(7.5px);
+
+  & > span {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
+.component-K9LhZN[data-inner-label][data-filled] .label-fhdpHS, .component-K9LhZN[data-inner-label]:not([data-disabled], [data-read-only]) .value-pi9twE:focus-within .label-fhdpHS {
+  font-size: 12px;
+  line-height: 15px;
+  transform: translateY(0);
+}
+
+.component-K9LhZN[data-inner-label] .value-pi9twE:has(.textarea-vCe_J9:autofill) .label-fhdpHS {
+  font-size: 12px;
+  line-height: 15px;
+  transform: translateY(0);
+}
+
+.component-K9LhZN[data-inner-header] .textarea-vCe_J9 {
+  margin-top: 15px;
+}
+
+.component-K9LhZN[data-inner-label] .textarea-vCe_J9::placeholder {
+  opacity: 0;
+  transition: opacity .18s;
+}
+
+.component-K9LhZN[data-inner-label]:not([data-disabled], [data-read-only]) .textarea-vCe_J9:focus::placeholder {
+  opacity: 1;
+}
+
+.textarea-vCe_J9 {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--textarea-rows) * var(--textarea-line-height));
+  min-height: calc(var(--textarea-rows) * var(--textarea-line-height));
+  color: var(--field-color);
+  font-family: var(--font-primary);
+  font-size: var(--textarea-font-size);
+  font-weight: 400;
+  line-height: var(--textarea-line-height);
+  overflow-wrap: break-word;
+  resize: none;
+  appearance: none;
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    background: none;
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--field-icon-color);
+    border-radius: 999px;
+  }
+
+  &::placeholder {
+    color: var(--field-placeholder-color);
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 1;
+    -webkit-text-fill-color: var(--field-color);
+  }
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  .textarea-vCe_J9 {
+    scrollbar-width: thin;
+    scrollbar-color: var(--field-icon-color) transparent;
+  }
+}
+
+.component-K9LhZN[data-resize] .textarea-vCe_J9 {
+  resize: vertical;
+}
+
+.component-K9LhZN .clear-BZMCFP {
+  width: 24px;
+  min-width: 0;
+  height: 24px;
+  min-height: 0;
+  color: var(--field-icon-color);
+  background: none;
+  flex: 0 0 24px;
+  margin: 0 -4px;
+  padding: 0;
+
+  &:hover, &:active {
+    color: var(--field-icon-color);
+  }
+
+  & svg {
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+    display: block;
+  }
+}
+
+.component-K9LhZN .message-_mT8Ov {
+  color: var(--input-hint-color);
+  overflow-wrap: anywhere;
+  line-height: 15px;
+}
+
+.component-K9LhZN[data-error] .message-_mT8Ov {
+  color: var(--input-error-message-color);
+}
+
+.component-K9LhZN[data-disabled] .message-_mT8Ov {
+  color: var(--input-disabled-color);
+}
+

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

@@ -0,0 +1,27 @@
+import { type ChangeEvent, type MouseEvent } from 'react';
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "children" | "onChange" | "maxLength" | "rows"> & {
+    value?: string;
+    defaultValue?: string;
+    maxLength?: number;
+    showValueLength?: boolean;
+    view?: "primary" | "secondary";
+    block?: boolean;
+    label?: import("react").ReactNode;
+    labelView?: "outer" | "inner";
+    hint?: import("react").ReactNode;
+    error?: import("react").ReactNode | boolean;
+    minRows?: number;
+    maxRows?: number;
+    autosize?: boolean;
+    resize?: boolean;
+    clear?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
+        value: string;
+    }) => void;
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    fieldClassName?: string;
+    textareaClassName?: string;
+    labelClassName?: string;
+    messageClassName?: string;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;