@koslibs/components 1.7.0 → 1.9.0

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/components/Status/index.d.ts

@@ -0,0 +1,2 @@
+export { Status } from './status.js';
+export type { StatusProps } from './status.js';

package/dist/components/Status/index.js

@@ -0,0 +1 @@
+export { Status } from "./status.js";