An accessible modal dialog with a WAI-ARIA focus trap, Escape-to-close, backdrop dismiss, scroll lock, and focus restore on close, ported to React from the Angular Aurora UI library.
"use client";
import * as React from "react";
import AuDialog from "@/components/ui/aurora-ui-dialog";
const inputStyle: React.CSSProperties = {
width: "100%",
minHeight: "2.5rem",
padding: "0 0.75rem",
borderRadius: "var(--au-radius)",
border: "1px solid var(--au-border)",
background: "var(--au-surface)",
color: "var(--au-text)",
font: "inherit",
boxSizing: "border-box",
};
const primaryButtonStyle: React.CSSProperties = {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
minHeight: "2.5rem",
padding: "0 1rem",
border: "1px solid var(--au-accent)",
borderRadius: "var(--au-radius)",
background: "var(--au-accent)",
color: "var(--au-accent-contrast)",
font: "600 0.925rem/1 var(--au-font)",
cursor: "pointer",
};
const secondaryButtonStyle: React.CSSProperties = {
...primaryButtonStyle,
border: "1px solid var(--au-border-strong)",
background: "var(--au-surface)",
color: "var(--au-text)",
};
export default function DialogDemo() {
const [open, setOpen] = React.useState(false);
const [email, setEmail] = React.useState("");
return (
<div
className="flex items-center justify-center w-full h-screen"
style={{ background: "var(--au-bg)", color: "var(--au-text)" }}
>
<button
type="button"
style={primaryButtonStyle}
onClick={() => setOpen(true)}
>
Invite a teammate
</button>
<AuDialog
title="Invite a teammate"
description="They will get an email with a link."
open={open}
onOpenChange={setOpen}
onClosed={(reason) => console.log("closed:", reason)}
footer={
<>
<button
type="button"
style={secondaryButtonStyle}
onClick={() => setOpen(false)}
>
Cancel
</button>
<button
type="button"
style={primaryButtonStyle}
onClick={() => setOpen(false)}
>
Send invite
</button>
</>
}
>
<label
style={{
display: "block",
fontSize: "0.85rem",
marginBottom: "0.35rem",
color: "var(--au-muted)",
}}
>
Email
</label>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
style={inputStyle}
/>
</AuDialog>
</div>
);
}