@koslibs/components 1.5.0 → 1.7.0

package/dist/components/Tabs/index_module.css

@@ -0,0 +1,92 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-mEZo4o {
+  width: 100%;
+  min-width: 0;
+  font-family: var(--font-primary);
+}
+
+.list-pbTqPB {
+  gap: var(--tabs-gap);
+  box-shadow: inset 0 -1px var(--tabs-divider-color);
+  display: flex;
+  position: relative;
+}
+
+.tab-yKhKqB {
+  justify-content: center;
+  align-items: center;
+  gap: var(--tabs-gap);
+  box-sizing: border-box;
+  margin: var(--size-0);
+  padding: var(--size-0) var(--tabs-padding);
+  border-radius: var(--tabs-border-radius);
+  color: var(--tabs-muted-color);
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  border: 0;
+  outline: none;
+  flex: none;
+  display: inline-flex;
+  position: relative;
+}
+
+.size40-F0WNwL {
+  height: var(--tabs-height-40);
+}
+
+.size48-cLRBaS {
+  height: var(--tabs-height-48);
+}
+
+.tab-yKhKqB:after {
+  height: var(--tabs-indicator-height);
+  content: "";
+  background: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.tab-yKhKqB:hover:not(:disabled) {
+  color: var(--tabs-color);
+}
+
+.tab-yKhKqB:hover:not(:disabled):not(.selected-Lm0vXW):after {
+  background: var(--tabs-hover-indicator-color);
+}
+
+.tab-yKhKqB.selected-Lm0vXW, .tab-yKhKqB .counter-Tokn9i {
+  color: var(--tabs-color);
+}
+
+.indicator-LDebsI {
+  height: var(--tabs-indicator-height);
+  background: var(--tabs-indicator-color);
+  pointer-events: none;
+  transition: transform var(--tabs-indicator-transition-duration) ease,
+        width var(--tabs-indicator-transition-duration) ease;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.tab-yKhKqB .counter-Tokn9i {
+  padding: var(--size-0) var(--tabs-counter-padding);
+  border-radius: var(--tabs-counter-border-radius);
+  background: var(--tabs-counter-background-color);
+}
+
+.tab-yKhKqB:disabled, .tab-yKhKqB:disabled .counter-Tokn9i {
+  color: var(--tabs-disabled-color);
+  cursor: default;
+}
+
+.tab-yKhKqB:disabled .counter-Tokn9i {
+  background: var(--tabs-disabled-counter-background-color);
+}
+

package/dist/components/Tabs/tab.d.ts

@@ -0,0 +1,9 @@
+import type { TabProps } from './types.js';
+/**
+ * Кнопка вкладки с заголовком, счётчиком и состоянием выбора из Tabs.
+ * Содержимое выбранной вкладки отображается отдельно в приложении.
+ */
+export declare const Tab: {
+    ({ id, title, count, disabled }: TabProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tabs/tab.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useContext } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { TypographyText } from "../Typography/text.js";
+import { TabsContext } from "./context.js";
+import index_module from "./index.module.js";
+const Tab = ({ id, title, count, disabled = false })=>{
+    const context = useContext(TabsContext);
+    const getDataTestId = useDataTestId(context?.dataTestId);
+    if (!context) throw new Error('Tab must be rendered inside Tabs.');
+    const { selectedId, size, registerTab, selectTab } = context;
+    const selected = id === selectedId;
+    return /*#__PURE__*/ jsxs("button", {
+        ref: (button)=>registerTab(id, button),
+        type: "button",
+        disabled: disabled,
+        className: classnames(index_module.tab, index_module[`size${size}`], {
+            [index_module.selected]: selected
+        }),
+        onClick: (event)=>selectTab(id, event),
+        "data-test-id": getDataTestId(`tab-${id}`),
+        children: [
+            /*#__PURE__*/ jsx(TypographyText, {
+                size: 14,
+                weight: "medium",
+                children: title
+            }),
+            void 0 !== count && Number.isInteger(count) && count >= 0 && /*#__PURE__*/ jsx(TypographyText, {
+                size: 11,
+                className: index_module.counter,
+                children: count
+            })
+        ]
+    });
+};
+Tab.displayName = 'Tab';
+export { Tab };

package/dist/components/Tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    children?: ReactNode;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    onChange?: (event: import("react").MouseEvent<HTMLButtonElement>, payload: {
+        selectedId: string;
+    }) => void;
+    size?: 40 | 48;
+    emptyState?: ReactNode;
+    listClassName?: string;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/tabs.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Children, Fragment, forwardRef, isValidElement, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { TabsContext } from "./context.js";
+import { useTabIndicator } from "./hooks/use-tab-indicator.js";
+import { Tab } from "./tab.js";
+import index_module from "./index.module.js";
+function collectTabs(children) {
+    const items = [];
+    const ids = new Set();
+    const collect = (nodes)=>{
+        Children.forEach(nodes, (child)=>{
+            if (null == child || 'boolean' == typeof child) return;
+            if (/*#__PURE__*/ isValidElement(child) && child.type === Fragment) return void collect(child.props.children);
+            if (!/*#__PURE__*/ isValidElement(child) || child.type !== Tab) throw new Error('Tabs accepts only Tab elements and Fragments.');
+            if (ids.has(child.props.id)) throw new Error(`Tabs requires unique Tab ids: "${child.props.id}" is duplicated.`);
+            ids.add(child.props.id);
+            items.push(child.props);
+        });
+    };
+    collect(children);
+    return items;
+}
+function resolveValue(items, value, previous) {
+    const index = items.findIndex((item)=>item.id === value);
+    if (index >= 0 && !items[index].disabled) return value;
+    if (index < 0) {
+        const previousIndex = previous.items.findIndex((item)=>item.id === value);
+        if (previousIndex >= 0) {
+            const neighbors = [
+                ...previous.items.slice(previousIndex + 1),
+                ...previous.items.slice(0, previousIndex).reverse()
+            ];
+            const neighbor = neighbors.find((candidate)=>items.some((item)=>item.id === candidate.id && !item.disabled));
+            if (neighbor) return neighbor.id;
+        }
+        if (items.some((item)=>item.id === previous.value && !item.disabled)) return previous.value;
+    }
+    const start = Math.max(0, index);
+    return items.slice(start).find((item)=>!item.disabled)?.id ?? items.slice(0, start).reverse().find((item)=>!item.disabled)?.id;
+}
+const Tabs = /*#__PURE__*/ forwardRef(({ children, selectedId, defaultSelectedId, onChange, size = 40, emptyState, listClassName, dataTestId, className, ...restProps }, ref)=>{
+    const getDataTestId = useDataTestId(dataTestId);
+    const items = useMemo(()=>collectTabs(children), [
+        children
+    ]);
+    const [internalValue, setInternalValue] = useState(defaultSelectedId);
+    const previousSelection = useRef({
+        items
+    });
+    const selectedValue = resolveValue(items, selectedId ?? internalValue, previousSelection.current);
+    const listRef = useRef(null);
+    const buttons = useRef(new Map());
+    useLayoutEffect(()=>{
+        previousSelection.current = {
+            items,
+            value: selectedValue
+        };
+        if (void 0 === selectedId && internalValue !== selectedValue) setInternalValue(selectedValue);
+    }, [
+        items,
+        selectedValue,
+        selectedId,
+        internalValue
+    ]);
+    const indicatorRef = useTabIndicator({
+        selectedId: selectedValue,
+        items,
+        size,
+        listRef,
+        buttons
+    });
+    const select = (id, event)=>{
+        if (id === selectedValue) return;
+        if (void 0 === selectedId) setInternalValue(id);
+        onChange?.(event, {
+            selectedId: id
+        });
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, className),
+        "data-test-id": dataTestId,
+        children: void 0 === selectedValue ? emptyState : /*#__PURE__*/ jsx(TabsContext.Provider, {
+            value: {
+                selectedId: selectedValue,
+                size,
+                dataTestId,
+                registerTab: (id, button)=>{
+                    if (button) buttons.current.set(id, button);
+                    else buttons.current.delete(id);
+                },
+                selectTab: select
+            },
+            children: /*#__PURE__*/ jsxs("div", {
+                ref: listRef,
+                className: classnames(index_module.list, listClassName),
+                "data-test-id": getDataTestId('list'),
+                children: [
+                    items.map((item)=>/*#__PURE__*/ jsx(Tab, {
+                            ...item
+                        }, item.id)),
+                    /*#__PURE__*/ jsx("div", {
+                        ref: indicatorRef,
+                        className: index_module.indicator,
+                        "data-test-id": getDataTestId('indicator')
+                    })
+                ]
+            })
+        })
+    });
+});
+Tabs.displayName = 'Tabs';
+export { Tabs };

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

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type TabProps = {
+    /**
+     * Уникальный стабильный идентификатор вкладки.
+     */
+    id: string;
+    /**
+     * Текст заголовка вкладки.
+     */
+    title: ReactNode;
+    /**
+     * Неотрицательное целое число. Неизвестное значение скрывается, 0 отображается.
+     */
+    count?: number;
+    /**
+     * Запрещает выбор вкладки.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {
+    /**
+     * Дочерние Tab в порядке отображения. id должны быть уникальными.
+     * Поддерживаются массивы, условные элементы и Fragment.
+     */
+    children?: ReactNode;
+    /**
+     * Идентификатор активной вкладки в controlled-режиме.
+     */
+    selectedId?: string;
+    /**
+     * Начальная вкладка в uncontrolled-режиме. По умолчанию — первая доступная.
+     */
+    defaultSelectedId?: string;
+    /**
+     * Запрос выбора другой вкладки пользователем: событие и { selectedId }.
+     * В controlled-режиме обновите selectedId. Повторный выбор и изменение children
+     * не вызывают обработчик.
+     */
+    onChange?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        selectedId: string;
+    }) => void;
+    /**
+     * Высота заголовков вкладок в пикселях.
+     * @default 40
+     */
+    size?: 40 | 48;
+    /**
+     * Общее пустое состояние, когда нет доступных вкладок.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Класс ряда заголовков.
+     */
+    listClassName?: string;
+    /**
+     * Идентификатор корня. Части получают суффиксы -list, -indicator,
+     * -tab-{id}.
+     */
+    dataTestId?: string;
+};

package/dist/components/Tabs/vars.css

@@ -0,0 +1,20 @@
+:root {
+  --tabs-color: #1c1a18;
+  --tabs-muted-color: #736554;
+  --tabs-disabled-color: #9da099;
+  --tabs-indicator-color: #d95300;
+  --tabs-hover-indicator-color: #c8beaa;
+  --tabs-counter-background-color: #e0dbce;
+  --tabs-disabled-counter-background-color: #e0dbce73;
+  --tabs-divider-color: #e0dbce;
+  --tabs-height-40: 40px;
+  --tabs-height-48: 48px;
+  --tabs-padding: var(--size-12);
+  --tabs-gap: var(--size-8);
+  --tabs-border-radius: var(--border-radius-4);
+  --tabs-indicator-height: 2px;
+  --tabs-indicator-transition-duration: .2s;
+  --tabs-counter-padding: var(--size-6);
+  --tabs-counter-border-radius: var(--border-radius-pill);
+}
+

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;