3388dbd371
Implements AlertDialog with compound component pattern (Root, Content, Title, Description, Trigger, Cancel, Action, Portal, Overlay). Content uses role=alertdialog, aria-modal, aria-labelledby/describedby, focus trap, and scroll lock. Does not dismiss on Escape key. 8 tests passing.
20 lines
716 B
TypeScript
20 lines
716 B
TypeScript
import type { JSX } from "solid-js";
|
|
import { Show, splitProps } from "solid-js";
|
|
import { useInternalAlertDialogContext } from "./alert-dialog-context";
|
|
|
|
/** Props for AlertDialog.Overlay. */
|
|
export interface AlertDialogOverlayProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
forceMount?: boolean;
|
|
}
|
|
|
|
/** Backdrop overlay behind AlertDialog content. */
|
|
export function AlertDialogOverlay(props: AlertDialogOverlayProps): JSX.Element {
|
|
const [local, rest] = splitProps(props, ["forceMount"]);
|
|
const ctx = useInternalAlertDialogContext();
|
|
return (
|
|
<Show when={local.forceMount || ctx.isOpen()}>
|
|
<div aria-hidden="true" data-state={ctx.isOpen() ? "open" : "closed"} {...rest} />
|
|
</Show>
|
|
);
|
|
}
|