@koslibs/components 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @koslibs/components
 
+## 1.9.0
+
+### Minor Changes
+
+- [#10](https://github.com/koslibs/components/pull/10) [`01aa734`](https://github.com/koslibs/components/commit/01aa734718eb2b649cc8ec361368b825fc8432d6) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Select по документации Figma: одиночный и множественный выбор, локальный поиск с внутренним состоянием запроса и сообщением при отсутствии совпадений, список на Popover, форма и примеры Storybook. Выбранные значения отображаются через запятую с однострочным многоточием. Выбранные строки отличаются от поиска и hover; внутренний label плавно перемещается по аналогии с Input. Очистка использует тонкий крестик 14×14 px с постоянным label «close».
+
+## 1.8.0
+
+### Minor Changes
+
+- [#9](https://github.com/koslibs/components/pull/9) [`03ecceb`](https://github.com/koslibs/components/commit/03ecceb7d7f6831f6d4e6e85b80373aeb6ffd743) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Status: размеры 20/24/32/40, формы rectangular/rounded, восемь цветов,
+  декоративные аддоны, подпись message, uppercase (по умолчанию false),
+  сокращение подписи при ограничении ширины и Storybook Docs/Playground.
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/components/Select/components/select-dropdown.d.ts

@@ -0,0 +1,7 @@
+import type { SelectState } from '../hooks/use-select-state.js';
+import type { SelectProps } from '../types.js';
+type Props = Pick<SelectProps, 'multiple' | 'searchable' | 'searchPlaceholder' | 'noResultsText' | 'dataTestId'> & {
+    state: SelectState;
+};
+export declare function SelectDropdown({ state, multiple, searchable, searchPlaceholder, noResultsText, dataTestId, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Select/components/select-dropdown.js

@@ -0,0 +1,96 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "@koslibs/icons/SearchIcon";
+import { TickIcon } from "@koslibs/icons/TickIcon";
+import classnames from "classnames";
+import { useEffect, useRef } from "react";
+import { useDataTestId } from "../../../hooks/use-data-test-id.js";
+import { Input } from "../../Input/index.js";
+import { TypographyText } from "../../Typography/text.js";
+import index_module from "../index.module.js";
+function SelectDropdown({ state, multiple, searchable, searchPlaceholder = 'Поиск по списку', noResultsText = 'Ничего не найдено', dataTestId }) {
+    const getDataTestId = useDataTestId(dataTestId);
+    const { options, selectedIds, search, activeId, setSearch, handleKeyDown, select } = state;
+    const activeOptionRef = useRef(null);
+    useEffect(()=>{
+        activeOptionRef.current?.scrollIntoView?.({
+            block: 'nearest'
+        });
+    }, [
+        activeId
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            searchable && /*#__PURE__*/ jsx(Input, {
+                block: true,
+                autoFocus: true,
+                size: 40,
+                view: "secondary",
+                value: search,
+                placeholder: searchPlaceholder,
+                leftAddon: /*#__PURE__*/ jsx(SearchIcon, {
+                    width: 16,
+                    height: 16,
+                    "aria-hidden": "true"
+                }),
+                clear: true,
+                clearLabel: "close",
+                onChange: (_, { value })=>setSearch(value),
+                onClear: ()=>setSearch(''),
+                onKeyDown: handleKeyDown,
+                className: index_module.search,
+                dataTestId: getDataTestId('search')
+            }),
+            0 === options.length && /*#__PURE__*/ jsxs("div", {
+                className: classnames(index_module.listState, index_module.listHint),
+                "data-test-id": getDataTestId('empty'),
+                children: [
+                    /*#__PURE__*/ jsx(TypographyText, {
+                        children: noResultsText
+                    }),
+                    search.trim() && /*#__PURE__*/ jsx(TypographyText, {
+                        size: 12,
+                        children: "Измените поисковый запрос"
+                    })
+                ]
+            }),
+            options.length > 0 && /*#__PURE__*/ jsx("div", {
+                className: index_module.options,
+                "data-test-id": getDataTestId('options'),
+                children: options.map((option)=>{
+                    const selected = selectedIds.includes(option.id);
+                    return /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        tabIndex: -1,
+                        ref: option.id !== activeId || option.disabled ? void 0 : activeOptionRef,
+                        className: classnames(index_module.option, {
+                            [index_module.selected]: selected,
+                            [index_module.active]: option.id === activeId && !option.disabled
+                        }),
+                        disabled: option.disabled,
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onClick: (event)=>select(option, event),
+                        "data-test-id": getDataTestId(`option-${option.id}`),
+                        title: option.label,
+                        children: [
+                            /*#__PURE__*/ jsx(TypographyText, {
+                                size: 13,
+                                rowLimit: 1,
+                                className: index_module.optionLabel,
+                                children: option.label
+                            }),
+                            (multiple || selected) && /*#__PURE__*/ jsx("span", {
+                                className: classnames(index_module.marker, multiple && index_module.checkbox),
+                                children: selected && /*#__PURE__*/ jsx(TickIcon, {
+                                    width: multiple ? 14 : 18,
+                                    height: multiple ? 14 : 18,
+                                    "aria-hidden": "true"
+                                })
+                            })
+                        ]
+                    }, option.id);
+                })
+            })
+        ]
+    });
+}
+export { SelectDropdown };

package/dist/components/Select/hooks/use-select-state.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonHTMLAttributes, type KeyboardEvent } from 'react';
+import type { SelectChangeEvent, SelectOption, SelectProps } from '../types.js';
+export declare function useSelectState(props: SelectProps): {
+    options: SelectOption[];
+    selectedIds: string[];
+    selectedOptions: SelectOption[];
+    search: string;
+    open: boolean;
+    blocked: boolean | undefined;
+    activeId: string | null;
+    raisedLabel: boolean;
+    buttonRef: import("react").RefObject<HTMLButtonElement>;
+    popupRef: import("react").RefObject<HTMLDivElement>;
+    anchor: HTMLDivElement | null;
+    setAnchor: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    triggerProps: ButtonHTMLAttributes<HTMLButtonElement>;
+    close: () => void;
+    select: (option: SelectOption, event: SelectChangeEvent) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    setSearch(value: string): void;
+    clear(event: Parameters<NonNullable<SelectProps["onClear"]>>[0]): void;
+};
+export type SelectState = ReturnType<typeof useSelectState>;

package/dist/components/Select/hooks/use-select-state.js

@@ -0,0 +1,183 @@
+import { useEffect, useRef, useState } from "react";
+function toIds(value) {
+    return [
+        ...new Set('string' == typeof value ? [
+            value
+        ] : value ?? [])
+    ];
+}
+function useSelectState(props) {
+    const [localIds, setLocalIds] = useState(()=>toIds(props.defaultValue));
+    const [localOpen, setLocalOpen] = useState(props.defaultOpen ?? false);
+    const [search, setSearch] = useState('');
+    const [activeId, setActiveId] = useState(null);
+    const [focused, setFocused] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const buttonRef = useRef(null);
+    const popupRef = useRef(null);
+    const retainedOptions = useRef(new Map());
+    const ids = void 0 === props.value ? localIds : toIds(props.value);
+    const selectedIds = props.multiple ? ids : ids.slice(0, 1);
+    const optionMap = new Map(props.options.map((option)=>[
+            option.id,
+            option
+        ]));
+    const resolve = (id)=>optionMap.get(id) ?? retainedOptions.current.get(id) ?? {
+            id,
+            label: id
+        };
+    const selectedOptions = selectedIds.map(resolve);
+    const blocked = props.disabled || props.readOnly;
+    const open = !blocked && (props.open ?? localOpen);
+    const query = props.searchable ? search.trim().toLocaleLowerCase() : '';
+    const options = props.options.filter((option)=>!query || option.label.toLocaleLowerCase().includes(query));
+    useEffect(()=>{
+        retainedOptions.current = new Map(selectedOptions.map((option)=>[
+                option.id,
+                option
+            ]));
+    });
+    useEffect(()=>{
+        if (!open) setSearch('');
+    }, [
+        open
+    ]);
+    const resetRef = useRef();
+    resetRef.current = ()=>{
+        if (void 0 === props.value) setLocalIds(toIds(props.defaultValue));
+        if (void 0 === props.open) setLocalOpen(false);
+        setSearch('');
+    };
+    useEffect(()=>{
+        const form = buttonRef.current?.form;
+        let active = true;
+        const handleReset = (event)=>{
+            queueMicrotask(()=>{
+                if (active && !event.defaultPrevented) resetRef.current?.();
+            });
+        };
+        form?.addEventListener('reset', handleReset);
+        return ()=>{
+            active = false;
+            form?.removeEventListener('reset', handleReset);
+        };
+    }, [
+        props.form
+    ]);
+    function setOpen(next) {
+        if (next && blocked) return;
+        if (void 0 === props.open) setLocalOpen(next);
+        if (next !== open) props.onOpenChange?.(next);
+    }
+    function select(option, event) {
+        if (blocked || option.disabled) return;
+        let nextIds = [
+            option.id
+        ];
+        if (props.multiple) nextIds = selectedIds.includes(option.id) ? selectedIds.filter((id)=>id !== option.id) : [
+            ...selectedIds,
+            option.id
+        ];
+        if (void 0 === props.value) setLocalIds(nextIds);
+        if (props.multiple || selectedIds[0] !== option.id) {
+            const nextOptions = nextIds.map(resolve);
+            if (props.multiple) props.onChange?.(event, {
+                value: nextIds,
+                selectedOptions: nextOptions
+            });
+            else props.onChange?.(event, {
+                value: option.id,
+                selectedOptions: nextOptions
+            });
+        }
+        if (!props.multiple) {
+            setOpen(false);
+            buttonRef.current?.focus();
+        }
+    }
+    function close() {
+        const restoreFocus = popupRef.current?.contains(buttonRef.current?.ownerDocument.activeElement ?? null);
+        setOpen(false);
+        if (restoreFocus) buttonRef.current?.focus();
+    }
+    function handleKeyDown(event) {
+        if (event.defaultPrevented || blocked) return;
+        const { key } = event;
+        if ('Tab' === key) {
+            if (open) setOpen(false);
+            return;
+        }
+        const available = options.filter((option)=>!option.disabled);
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Home',
+            'End'
+        ].includes(key)) {
+            if ([
+                'Home',
+                'End'
+            ].includes(key) && (!open || 'INPUT' === event.currentTarget.tagName)) return;
+            event.preventDefault();
+            setOpen(true);
+            const current = available.findIndex((option)=>option.id === activeId);
+            let next = current <= 0 ? available.length - 1 : current - 1;
+            if ('Home' === key) next = 0;
+            if ('End' === key) next = available.length - 1;
+            if ('ArrowDown' === key) next = (current + 1) % available.length;
+            setActiveId(available[next]?.id ?? null);
+        } else if ('Enter' === key && open) {
+            event.preventDefault();
+            const active = available.find((option)=>option.id === activeId);
+            if (active) select(active, event);
+        }
+    }
+    const triggerProps = {
+        onFocus (event) {
+            setFocused(true);
+            props.onFocus?.(event);
+        },
+        onBlur (event) {
+            setFocused(false);
+            props.onBlur?.(event);
+        },
+        onClick (event) {
+            props.onClick?.(event);
+            if (event.defaultPrevented || blocked) return;
+            setActiveId(null);
+            setOpen(!open);
+        },
+        onKeyDown (event) {
+            props.onKeyDown?.(event);
+            handleKeyDown(event);
+        }
+    };
+    return {
+        options,
+        selectedIds,
+        selectedOptions,
+        search,
+        open,
+        blocked,
+        activeId: open ? activeId : null,
+        raisedLabel: selectedIds.length > 0 || open || focused && !blocked,
+        buttonRef,
+        popupRef,
+        anchor,
+        setAnchor,
+        triggerProps,
+        close,
+        select,
+        handleKeyDown,
+        setSearch (value) {
+            setActiveId(null);
+            setSearch(value);
+        },
+        clear (event) {
+            if (void 0 === props.value) setLocalIds([]);
+            props.onClear?.(event);
+            buttonRef.current?.focus();
+        }
+    };
+}
+export { useSelectState };

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

@@ -0,0 +1,2 @@
+export { Select } from './select.js';
+export type { SelectProps, SelectOption, SelectChangeEvent, SelectChangePayload } from './types.js';

package/dist/components/Select/index.js

@@ -0,0 +1 @@
+export { Select } from "./select.js";

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

@@ -0,0 +1,44 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-cM8DTg",
+    block: "block-EvThms",
+    secondary: "secondary-CnWByB",
+    readOnly: "readOnly-zwkIeK",
+    error: "error-TrKhzv",
+    disabled: "disabled-fZIeN_",
+    "size-40": "size-40-naTxHA",
+    size40: "size-40-naTxHA",
+    "size-48": "size-48-Lf4nSh",
+    size48: "size-48-Lf4nSh",
+    "size-56": "size-56-U3fog3",
+    size56: "size-56-U3fog3",
+    "size-64": "size-64-ZMZbdh",
+    size64: "size-64-ZMZbdh",
+    "size-72": "size-72-byhU5x",
+    size72: "size-72-byhU5x",
+    field: "field-jGXYY5",
+    open: "open-CCkiBd",
+    trigger: "trigger-nKdmww",
+    valueColumn: "valueColumn-IqzQmw",
+    value: "value-flrRUI",
+    placeholder: "placeholder-SlfxjN",
+    label: "label-rrakc7",
+    innerLabel: "innerLabel-njfkYe",
+    labelRaised: "labelRaised-iztTyX",
+    withInnerLabel: "withInnerLabel-a0m9CO",
+    chevron: "chevron-hiAxaW",
+    clear: "clear-x9k2FN",
+    message: "message-nYZGHP",
+    dropdown: "dropdown-ufLXzq",
+    search: "search-aVnGDP",
+    options: "options-ygwOHf",
+    option: "option-d9Lc3i",
+    selected: "selected-uq_Ki8",
+    active: "active-KEr7O6",
+    optionLabel: "optionLabel-g0AQIH",
+    marker: "marker-i_70bm",
+    checkbox: "checkbox-r7078O",
+    listState: "listState-_7We4G",
+    listHint: "listHint-C_Zt_z"
+};
+export default index_module;