67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
// Modal: controlled full-viewport dialog (create-workspace and similar).
|
|
// Fixed overlay in the React tree (no react-dom portal) so ui-primitives
|
|
// stays free of a react-dom dependency; mask tokens match figma 451:18655.
|
|
|
|
import { useEffect } from 'react'
|
|
import type { ReactNode } from 'react'
|
|
import clsx from 'clsx'
|
|
import { IconCloseOutline16 } from './icons/index.tsx'
|
|
import css from './Modal.module.css'
|
|
|
|
/**
|
|
* Render a centered modal over a blurred page mask.
|
|
* @param props.open - whether the dialog is showing.
|
|
* @param props.onClose - Escape or mask click.
|
|
* @param props.title - dialog heading.
|
|
* @param props.description - optional supporting sentence under the title.
|
|
* @param props.children - body (inputs, etc.).
|
|
* @param props.footer - action row (Cancel / Create).
|
|
* @returns null when closed; otherwise the overlay tree.
|
|
*/
|
|
export function Modal({ open, onClose, title, description, children, footer, className }: {
|
|
open: boolean
|
|
onClose: () => void
|
|
title: string
|
|
description?: string
|
|
children?: ReactNode
|
|
footer?: ReactNode
|
|
className?: string
|
|
}) {
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('keydown', onKeyDown)
|
|
return () => { document.removeEventListener('keydown', onKeyDown) }
|
|
}, [open, onClose])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className={css.root} role="presentation">
|
|
<div className={css.mask} aria-hidden="true" onClick={onClose} />
|
|
<div
|
|
className={clsx(css.dialog, className)}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={title}
|
|
>
|
|
<div className={css.content}>
|
|
<div className={css.header}>
|
|
<h2 className={css.title}>{title}</h2>
|
|
<button type="button" className={css.close} aria-label="Close" onClick={onClose}>
|
|
<IconCloseOutline16 size={14} />
|
|
</button>
|
|
</div>
|
|
{description !== undefined && description !== '' && (
|
|
<p className={css.description}>{description}</p>
|
|
)}
|
|
{children !== undefined && <div className={css.body}>{children}</div>}
|
|
</div>
|
|
{footer !== undefined && <div className={css.footer}>{footer}</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|