@elcrm/overlay

React-оверлеи для elCRM: Menu, CheckboxList, FilterMenu, Select — portal в document.body, общий стек z-index через @elcrm/form (acquireOverlayZIndex / releaseOverlayZIndex).

Установка

npm install @elcrm/overlay
# или
bun add @elcrm/overlay

Требования: Node.js ≥ 18. Peer-зависимости: react ≥ 18, react-dom ≥ 18, @elcrm/form ≥ 0.0.86, @elcrm/state (для Select).

Для разработки пакета удобен Bun ≥ 1.3 (см. deploy.md / dev.md).

Быстрый старт

import { useState } from "react";
import { Menu, CheckboxList, Select } from "@elcrm/overlay";

function Example() {
    const [open, setOpen] = useState(false);
    const [cols, setCols] = useState({ name: true, date: false });

    return (
        <>
            <Menu
                open={open}
                onOpenChange={setOpen}
                trigger={<button type="button">Колонки</button>}
                label="Колонки"
            >
                <CheckboxList
                    title="Колонки"
                    showSelectAll
                    allowEmpty={false}
                    items={[
                        { id: "name", label: "Имя" },
                        { id: "date", label: "Дата" },
                    ]}
                    value={cols}
                    onChange={setCols}
                />
            </Menu>

            <Select
                value="a"
                onChange={() => {}}
                options={[
                    { value: "a", label: "Вариант A" },
                    { value: "b", label: "Вариант B" },
                ]}
            />
        </>
    );
}

Стили задаются классами (elcrm-menu, elcrm-checkbox-list, ui-select, …) — подключайте CSS приложения (например backoffice).

API

Menu

Controlled popover: Escape, клик снаружи, позиция с clamp к viewport, z-index из overlay-стека.

| Проп | Тип | По умолчанию | Описание | | --------------- | --------------------------- | ------------ | ----------------------- | | open | boolean | — | Открыто | | onOpenChange | (open: boolean) => void | — | Смена состояния | | trigger | ReactNode | — | Якорь | | children | ReactNode | — | Содержимое панели | | align | "start" \| "end" | "end" | Выравнивание панели | | label | string | — | aria-label для menu | | className | string | — | Класс корня | | panelClassName| string | — | Класс панели |

CheckboxList

Список CheckField (@elcrm/form) для колонок / фильтров. Обычно внутри Menu.

FilterMenu

Menu + CheckboxList с кнопкой-триггером и счётчиком выбранных.

Select

Кастомный select (single / multi) на portal + @elcrm/state. Клавиатура: стрелки, Enter, Escape, Home/End.

Публикация

Автодеплой на npm через GitHub Actions — см. deploy.md.

Лицензия

MIT © MaSkal