mirror of
https://github.com/deepseek-ai/deepseek-harness
synced 2026-08-15 21:04:50 +00:00
2b64341bc0
The dialog now owns the figma structure through a new headless Modal mode (mask/card/Escape stay shared): header block with the title and crumbs 8px apart above the l3 separator (no close chrome — the figma frame has none), 16px to the level, and the 12px card bottom. The picker-kind narrowing returns for the merged open describe kind — an unrecognized advertised kind hides the local-folder entry, now covered alongside the stale-navigation failure arm and the unmount races.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 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 (aria-label in every mode).
|
|
* @param props.description - optional supporting sentence under the title.
|
|
* @param props.children - body (inputs, etc.).
|
|
* @param props.footer - action row (Cancel / Create).
|
|
* @param props.headless - render children directly in the card (no default
|
|
* header/close/body chrome) for dialogs whose figma frame owns its own
|
|
* header structure; mask, card, Escape, and aria-label remain.
|
|
* @returns null when closed; otherwise the overlay tree.
|
|
*/
|
|
export function Modal({ open, onClose, title, description, children, footer, className, headless = false }: {
|
|
open: boolean
|
|
onClose: () => void
|
|
title: string
|
|
description?: string
|
|
children?: ReactNode
|
|
footer?: ReactNode
|
|
className?: string
|
|
headless?: boolean
|
|
}) {
|
|
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}
|
|
>
|
|
{headless
|
|
? children
|
|
: (
|
|
<>
|
|
<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>
|
|
)
|
|
}
|