@koslibs/components 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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;

package/dist/components/Select/index_module.css

@@ -0,0 +1,334 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-cM8DTg {
+  --field-background: var(--select-primary-background-color);
+  --field-color: var(--select-color);
+  --field-label-color: var(--select-label-color);
+  --field-icon-color: var(--select-icon-color);
+  --field-placeholder-color: var(--select-placeholder-color);
+  --field-border: transparent;
+  gap: var(--select-gap);
+  width: var(--select-width);
+  vertical-align: top;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-primary);
+  flex-direction: column;
+  display: inline-flex;
+
+  &.block-EvThms {
+    width: 100%;
+    display: flex;
+  }
+
+  &.secondary-CnWByB {
+    --field-background: var(--select-secondary-background-color);
+  }
+
+  &.readOnly-zwkIeK {
+    --field-border: var(--select-read-only-border-color);
+  }
+
+  &.error-TrKhzv {
+    --field-border: var(--select-error-border-color);
+  }
+
+  &.disabled-fZIeN_ {
+    --field-background: var(--select-disabled-background-color);
+    --field-color: var(--select-disabled-color);
+    --field-label-color: var(--select-disabled-color);
+    --field-icon-color: var(--select-disabled-color);
+    --field-placeholder-color: var(--select-disabled-color);
+    --field-border: transparent;
+  }
+}
+
+.size-40-naTxHA {
+  --field-height: 40px;
+  --field-padding: var(--select-padding-40);
+}
+
+.size-48-Lf4nSh {
+  --field-height: 48px;
+  --field-padding: var(--select-padding-48);
+}
+
+.size-56-U3fog3 {
+  --field-height: 56px;
+  --field-padding: var(--select-padding-56);
+}
+
+.size-64-ZMZbdh {
+  --field-height: 64px;
+  --field-padding: var(--select-padding-64);
+}
+
+.size-72-byhU5x {
+  --field-height: 72px;
+  --field-padding: var(--select-padding-72);
+}
+
+.field-jGXYY5 {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--select-gap);
+  height: var(--field-height);
+  padding: var(--size-0) var(--field-padding);
+  border-radius: var(--select-border-radius);
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  color: var(--field-color);
+  display: flex;
+  position: relative;
+}
+
+@media (hover: hover) {
+  .component-cM8DTg:not(.disabled-fZIeN_, .readOnly-zwkIeK, .error-TrKhzv) .field-jGXYY5:hover {
+    box-shadow: inset 0 0 0 1px var(--select-hover-border-color);
+  }
+}
+
+.component-cM8DTg:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg.open-CCkiBd .field-jGXYY5 {
+  box-shadow: none;
+  outline: 2px solid var(--select-focus-border-color);
+  outline-offset: 0;
+}
+
+.component-cM8DTg.error-TrKhzv:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg.error-TrKhzv.open-CCkiBd .field-jGXYY5 {
+  outline-color: var(--select-error-border-color);
+}
+
+.trigger-nKdmww {
+  min-width: 0;
+  padding: var(--size-0);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  background: none;
+  border: 0;
+  outline: none;
+  flex: 1;
+  align-self: stretch;
+
+  &:after {
+    content: "";
+    border-radius: inherit;
+    position: absolute;
+    inset: 0;
+  }
+}
+
+.valueColumn-IqzQmw {
+  justify-content: center;
+  gap: var(--size-2);
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+}
+
+.value-flrRUI {
+  width: 100%;
+  min-width: 0;
+  color: var(--field-color);
+}
+
+.placeholder-SlfxjN {
+  color: var(--field-placeholder-color);
+}
+
+.label-rrakc7 {
+  min-width: 0;
+  color: var(--field-label-color);
+  overflow-wrap: anywhere;
+}
+
+.innerLabel-njfkYe {
+  color: var(--field-label-color);
+  transform: translateY(calc(50% + var(--size-2) / 2));
+  transition: transform .18s, font-size .18s;
+}
+
+.component-cM8DTg.labelRaised-iztTyX .innerLabel-njfkYe {
+  transform: translateY(0);
+}
+
+.component-cM8DTg.withInnerLabel-a0m9CO .value-flrRUI {
+  opacity: 0;
+  transition: opacity .18s;
+}
+
+.component-cM8DTg.labelRaised-iztTyX .value-flrRUI {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .innerLabel-njfkYe, .component-cM8DTg .chevron-hiAxaW, .component-cM8DTg.withInnerLabel-a0m9CO .value-flrRUI {
+    transition: none;
+  }
+}
+
+.chevron-hiAxaW {
+  color: var(--field-icon-color);
+  pointer-events: none;
+  flex-shrink: 0;
+  align-items: center;
+  transition: transform .18s;
+  display: flex;
+  transform: rotate(0);
+}
+
+.component-cM8DTg.open-CCkiBd .chevron-hiAxaW {
+  transform: rotate(180deg);
+}
+
+.component-cM8DTg .clear-x9k2FN {
+  z-index: 1;
+  width: 18px;
+  min-width: 0;
+  height: 24px;
+  min-height: 0;
+  margin: var(--size-0);
+  padding: var(--size-0);
+  color: var(--field-icon-color);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  &:hover, &:active {
+    color: var(--field-icon-color);
+  }
+}
+
+.component-cM8DTg.disabled-fZIeN_ .trigger-nKdmww {
+  cursor: not-allowed;
+}
+
+.component-cM8DTg.readOnly-zwkIeK .trigger-nKdmww {
+  cursor: default;
+}
+
+.component-cM8DTg .message-nYZGHP {
+  color: var(--select-hint-color);
+  overflow-wrap: anywhere;
+}
+
+.component-cM8DTg.error-TrKhzv .message-nYZGHP {
+  color: var(--select-error-message-color);
+}
+
+.component-cM8DTg.disabled-fZIeN_ .message-nYZGHP {
+  color: var(--select-disabled-color);
+}
+
+.dropdown-ufLXzq {
+  --popover-shadow: var(--select-dropdown-shadow);
+  box-sizing: border-box;
+  gap: var(--select-gap);
+  padding: var(--size-8);
+  border-radius: var(--select-border-radius);
+  background: var(--select-primary-background-color);
+  color: var(--select-color);
+}
+
+.search-aVnGDP {
+  flex-shrink: 0;
+}
+
+.options-ygwOHf {
+  gap: var(--select-options-gap);
+  min-height: 0;
+  max-height: var(--select-options-max-height);
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--select-hover-border-color) transparent;
+  flex-direction: column;
+  display: flex;
+  overflow: auto;
+}
+
+.option-d9Lc3i {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--select-gap);
+  width: 100%;
+  min-width: 0;
+  height: 40px;
+  padding: var(--size-0) var(--size-12);
+  border-radius: var(--select-option-border-radius);
+  color: var(--select-color);
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex-shrink: 0;
+  display: flex;
+
+  &.selected-uq_Ki8 {
+    background: var(--select-option-selected-color);
+  }
+
+  &:not(:disabled):hover, &.active-KEr7O6 {
+    background: var(--select-option-hover-color);
+  }
+
+  &.selected-uq_Ki8:not(:disabled):hover, &.selected-uq_Ki8.active-KEr7O6 {
+    background: var(--select-option-selected-color);
+  }
+
+  &:disabled {
+    color: var(--select-disabled-color);
+    cursor: not-allowed;
+  }
+}
+
+.optionLabel-g0AQIH {
+  flex: 1;
+  min-width: 0;
+}
+
+.marker-i_70bm {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  color: var(--select-icon-color);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.checkbox-r7078O {
+  border: 1px solid var(--select-hover-border-color);
+  border-radius: var(--border-radius-4);
+}
+
+.option-d9Lc3i.selected-uq_Ki8 .checkbox-r7078O {
+  background: var(--select-marker-selected-color);
+}
+
+.option-d9Lc3i:disabled .marker-i_70bm {
+  opacity: .5;
+}
+
+.listState-_7We4G {
+  justify-content: center;
+  align-items: center;
+  gap: var(--select-gap);
+  min-height: 0;
+  padding: var(--size-24) var(--size-12);
+  text-align: center;
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+.listHint-C_Zt_z {
+  color: var(--select-hint-color);
+}
+

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

@@ -0,0 +1,2 @@
+import type { SelectProps } from './types.js';
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Select/select.js

@@ -0,0 +1,161 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "@koslibs/icons/ChevronDownIcon";
+import { CrossIcon } from "@koslibs/icons/CrossIcon";
+import classnames from "classnames";
+import { forwardRef, useId, useImperativeHandle } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Button } from "../Button/index.js";
+import { Popover } from "../Popover/index.js";
+import { TypographyText } from "../Typography/text.js";
+import { SelectDropdown } from "./components/select-dropdown.js";
+import { useSelectState } from "./hooks/use-select-state.js";
+import index_module from "./index.module.js";
+const textSizes = {
+    40: 13,
+    48: 13,
+    56: 14,
+    64: 14,
+    72: 16
+};
+const dropdownOffset = [
+    0,
+    8
+];
+const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { view = 'primary', size = 40, label, labelView = 'outer', block = false, placeholder = 'Выберите значение', hint, error, clear = false, disabled = false, readOnly = false, className, style, labelClassName, messageClassName, dropdownClassName, dataTestId, id, name, form, onClear: _onClear, getPortalContainer, options: _options, multiple, value: _value, defaultValue: _defaultValue, onChange: _onChange, searchable, searchPlaceholder, open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, noResultsText, ...buttonProps } = props;
+    const generatedId = useId();
+    const triggerId = id ?? generatedId;
+    const getDataTestId = useDataTestId(dataTestId);
+    const state = useSelectState(props);
+    const { buttonRef, raisedLabel } = state;
+    const hasValue = state.selectedIds.length > 0;
+    const hasLabel = null != label && false !== label && '' !== label;
+    const innerLabel = 'inner' === labelView && hasLabel;
+    const selectedText = state.selectedOptions.map((option)=>option.label).join(', ');
+    const displayValue = hasValue ? selectedText : placeholder;
+    const message = (hint && 'boolean' != typeof error ? error : void 0) || hint;
+    const showClear = clear && hasValue && !state.blocked;
+    useImperativeHandle(ref, ()=>buttonRef.current, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames(index_module.component, index_module[`size-${size}`], {
+            [index_module.secondary]: 'secondary' === view,
+            [index_module.block]: block,
+            [index_module.disabled]: disabled,
+            [index_module.readOnly]: readOnly,
+            [index_module.error]: Boolean(error),
+            [index_module.open]: state.open,
+            [index_module.withInnerLabel]: innerLabel,
+            [index_module.labelRaised]: innerLabel && raisedLabel
+        }, className),
+        style: style,
+        "data-test-id": getDataTestId('form-control'),
+        children: [
+            hasLabel && 'outer' === labelView && /*#__PURE__*/ jsx("label", {
+                htmlFor: triggerId,
+                className: classnames(index_module.label, labelClassName),
+                "data-test-id": getDataTestId('label'),
+                children: /*#__PURE__*/ jsx(TypographyText, {
+                    size: 13,
+                    weight: "medium",
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: state.setAnchor,
+                className: index_module.field,
+                "data-test-id": getDataTestId('field'),
+                onClick: (event)=>{
+                    if (!state.blocked && !event.defaultPrevented && event.target === event.currentTarget) buttonRef.current?.click();
+                },
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        ...buttonProps,
+                        ...state.triggerProps,
+                        ref: buttonRef,
+                        id: triggerId,
+                        type: "button",
+                        form: form,
+                        disabled: disabled,
+                        className: index_module.trigger,
+                        "data-test-id": dataTestId,
+                        children: /*#__PURE__*/ jsxs("span", {
+                            className: index_module.valueColumn,
+                            children: [
+                                innerLabel && /*#__PURE__*/ jsx(TypographyText, {
+                                    size: raisedLabel ? 11 : textSizes[size],
+                                    weight: "medium",
+                                    rowLimit: 1,
+                                    className: classnames(index_module.innerLabel, labelClassName),
+                                    dataTestId: getDataTestId('label'),
+                                    children: label
+                                }),
+                                /*#__PURE__*/ jsx(TypographyText, {
+                                    size: textSizes[size],
+                                    rowLimit: 1,
+                                    className: classnames(index_module.value, !hasValue && index_module.placeholder),
+                                    dataTestId: getDataTestId('value'),
+                                    children: displayValue
+                                })
+                            ]
+                        })
+                    }),
+                    showClear && /*#__PURE__*/ jsx(Button, {
+                        view: "text",
+                        size: 32,
+                        className: index_module.clear,
+                        "aria-label": "close",
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onClick: state.clear,
+                        dataTestId: getDataTestId('clear'),
+                        children: /*#__PURE__*/ jsx(CrossIcon, {
+                            width: 14,
+                            height: 14,
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: index_module.chevron,
+                        children: /*#__PURE__*/ jsx(ChevronDownIcon, {
+                            "aria-hidden": "true"
+                        })
+                    })
+                ]
+            }),
+            message && /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 12,
+                className: classnames(index_module.message, messageClassName),
+                dataTestId: getDataTestId('boolean' != typeof error && error ? 'error' : 'hint'),
+                children: message
+            }),
+            name && state.selectedIds.map((value)=>/*#__PURE__*/ jsx("input", {
+                    type: "hidden",
+                    name: name,
+                    value: value,
+                    disabled: disabled,
+                    form: form
+                }, value)),
+            /*#__PURE__*/ jsx(Popover, {
+                ref: state.popupRef,
+                open: state.open,
+                anchorElement: state.anchor,
+                offset: dropdownOffset,
+                useAnchorWidth: true,
+                onClose: state.close,
+                getPortalContainer: getPortalContainer,
+                className: classnames(index_module.dropdown, dropdownClassName),
+                dataTestId: getDataTestId('dropdown'),
+                children: /*#__PURE__*/ jsx(SelectDropdown, {
+                    state: state,
+                    multiple: multiple,
+                    searchable: searchable,
+                    searchPlaceholder: searchPlaceholder,
+                    noResultsText: noResultsText,
+                    dataTestId: dataTestId
+                })
+            })
+        ]
+    });
+});
+Select.displayName = 'Select';
+export { Select };

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

@@ -0,0 +1,145 @@
+import type { ButtonHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { PopoverProps } from '../Popover/index.js';
+export type SelectOption = {
+    /**
+     * Стабильный уникальный идентификатор варианта.
+     */
+    id: string;
+    /**
+     * Подпись в поле и в списке. Используется для локального поиска.
+     */
+    label: string;
+    /**
+     * Запрещает переключение строки, сохраняя уже выбранное значение.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type SelectChangeEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+export type SelectChangePayload<Value = string | null> = {
+    /**
+     * Значение выбора: id одиночного варианта либо массив id для multiple.
+     */
+    value: Value;
+    /**
+     * Выбранные варианты в порядке выбора, включая недоступные строки.
+     */
+    selectedOptions: SelectOption[];
+};
+type CommonProps = Pick<InputProps, 'view' | 'size' | 'block' | 'hint' | 'error' | 'clear' | 'className' | 'style' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'className' | 'style'> & {
+    /**
+     * Варианты с уникальными id. Порядок строк сохраняется при выборе.
+     */
+    options: readonly SelectOption[];
+    /**
+     * Название поля. Внешний label связан с кнопкой выбора через htmlFor и id.
+     */
+    label?: ReactNode;
+    /**
+     * Положение названия: снаружи или внутри. Внутренний label поднимается
+     * при фокусе, раскрытии или наличии выбранных значений.
+     * @default 'outer'
+     */
+    labelView?: 'outer' | 'inner';
+    /**
+     * Сохраняет читаемое значение и фокус, запрещая раскрытие, выбор и очистку.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Текст пустого поля.
+     * @default 'Выберите значение'
+     */
+    placeholder?: string;
+    /**
+     * Поиск внутри списка. По умолчанию фильтрует label без учёта регистра.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder поискового Input.
+     * @default 'Поиск по списку'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Управляемое раскрытие. Disabled и readOnly всегда скрывают список.
+     */
+    open?: boolean;
+    /**
+     * Начальное раскрытие неуправляемого списка.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Запрос изменения раскрытия, в том числе при выборе, Escape и клике снаружи.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Текст отсутствия совпадений.
+     * @default 'Ничего не найдено'
+     */
+    noResultsText?: string;
+    /**
+     * Очистка, как у Input, вызывает только onClear, без onChange.
+     * Неуправляемое поле очищается само; для управляемого обновите value.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Имя поля формы. Multiple отправляет отдельное значение для каждого id.
+     */
+    name?: string;
+    /**
+     * Дополнительный класс выпадающего списка.
+     */
+    dropdownClassName?: string;
+    /**
+     * Контейнер портала. По умолчанию используется body документа поля.
+     */
+    getPortalContainer?: PopoverProps['getPortalContainer'];
+    /**
+     * Идентификатор кнопки выбора. Части получают суффиксы -form-control,
+     * -field, -label, -value, -hint/-error, -clear, -dropdown, -search,
+     * -options, -option-{id} и -empty.
+     */
+    dataTestId?: string;
+};
+type SingleProps = {
+    /**
+     * Выбор одного варианта.
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * Id управляемого выбора. null означает отсутствие выбора.
+     */
+    value?: string | null;
+    /**
+     * Начальный id неуправляемого выбора.
+     */
+    defaultValue?: string | null;
+    /**
+     * Изменение выбора: событие и { value, selectedOptions }.
+     */
+    onChange?: (event: SelectChangeEvent, payload: SelectChangePayload) => void;
+};
+type MultipleProps = {
+    /**
+     * Множественный выбор. Строки переключаются без закрытия списка.
+     */
+    multiple: true;
+    /**
+     * Id управляемого выбора в порядке выбора. Пустой массив очищает поле.
+     */
+    value?: readonly string[];
+    /**
+     * Начальные id неуправляемого выбора.
+     */
+    defaultValue?: readonly string[];
+    /**
+     * Изменение выбора: событие и { value: string[], selectedOptions }.
+     */
+    onChange?: (event: SelectChangeEvent, payload: SelectChangePayload<string[]>) => void;
+};
+export type SelectProps = CommonProps & (SingleProps | MultipleProps);
+export {};

package/dist/components/Select/vars.css

@@ -0,0 +1,34 @@
+@import "../Input/vars.css";
+
+:root {
+  --select-primary-background-color: var(--input-primary-background-color);
+  --select-secondary-background-color: var(--input-secondary-background-color);
+  --select-color: var(--input-color);
+  --select-placeholder-color: var(--input-placeholder-color);
+  --select-label-color: var(--input-label-color);
+  --select-hint-color: var(--input-hint-color);
+  --select-icon-color: var(--input-icon-color);
+  --select-hover-border-color: var(--input-hover-border-color);
+  --select-focus-border-color: var(--input-focus-border-color);
+  --select-error-border-color: var(--input-error-border-color);
+  --select-error-message-color: var(--input-error-message-color);
+  --select-disabled-background-color: var(--input-disabled-background-color);
+  --select-disabled-color: var(--input-disabled-color);
+  --select-read-only-border-color: var(--input-read-only-border-color);
+  --select-option-hover-color: var(--input-secondary-background-color);
+  --select-option-selected-color: #e0dbce;
+  --select-marker-selected-color: #e0dbce;
+  --select-border-radius: var(--input-border-radius);
+  --select-option-border-radius: var(--border-radius-6);
+  --select-gap: var(--input-gap);
+  --select-options-gap: var(--size-4);
+  --select-width: var(--input-width);
+  --select-options-max-height: 240px;
+  --select-dropdown-shadow: 0 4px 8px #0000001f;
+  --select-padding-40: var(--input-padding-40);
+  --select-padding-48: var(--input-padding-48);
+  --select-padding-56: var(--input-padding-56);
+  --select-padding-64: var(--input-padding-64);
+  --select-padding-72: var(--input-padding-72);
+}
+

package/dist/index.d.ts

@@ -2,6 +2,8 @@ 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 { Select } from './components/Select/index.js';
+export type { SelectProps, SelectOption, SelectChangeEvent, SelectChangePayload, } from './components/Select/index.js';
 export { Textarea } from './components/Textarea/index.js';
 export type { TextareaProps } from './components/Textarea/index.js';
 export { Tab, Tabs } from './components/Tabs/index.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { Button } from "./components/Button/index.js";
 export { Input } from "./components/Input/index.js";
+export { Select } from "./components/Select/index.js";
 export { Textarea } from "./components/Textarea/index.js";
 export { Tab, Tabs } from "./components/Tabs/index.js";
 export { Spinner } from "./components/Spinner/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",