Dialog

Пример

import { Dialog, Button, Field, Input } from "@toimetdev/pathlogs-core";

const [open, setOpen] = useState(false);

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="Новый проект"
  footer={
    <>
      <Button variant="ghost" onClick={() => setOpen(false)}>Отмена</Button>
      <Button variant="primary" onClick={submit}>Создать</Button>
    </>
  }
>
  <Field label="Название" required>
    {(props) => <Input {...props} />}
  </Field>
</Dialog>

Состояние живёт снаружи. Так одно и то же окно обслуживает и создание, и редактирование, не заводя себе внутреннего режима.

Пропсы

Фокус и клавиатура

• При открытии фокус уходит на первый интерактивный элемент, а если его нет — на саму панель. Без этого клавиатура осталась бы на странице под затемнением.
• Tab с последнего элемента возвращается на первый: за пределы окна фокус не уходит.
• При закрытии фокус возвращается туда, откуда окно открыли, — иначе после Escape клавиатура оказывалась бы в начале страницы.
• Прокрутка страницы под окном блокируется: колесо над затемнением иначе уезжает по контенту, и, закрыв окно, пользователь оказывается не там, где был.

Окно без заголовка

Если окно рисует заголовок само (подтверждение, палитра), передайте label вместо title: шапка не появится, а доступное имя останется.

<Dialog open={open} onClose={close} label="Удалить проект?" size="sm">
  {/* собственная разметка с иконкой и заголовком */}
</Dialog>