milestone 23 s2: react aria primitives and their cluster

2026-08-12 22:12:18 +02:00
parent 994bbf922c
commit 01e455c8af
32 changed files with 2316 additions and 532 deletions
@@ -0,0 +1,68 @@
+/**
+ * The modal dialog (milestone 23, ruling 4).
+ *
+ * React Aria owns the focus trap, the Escape handler and the `aria-modal`
+ * wiring that the hand-rolled overlay only approximated. State is controlled by
+ * the caller because the trigger is a table row button, not a `DialogTrigger`.
+ */
+
+import type { ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { Dialog as AriaDialog, Modal, ModalOverlay } from "react-aria-components";
+import { colors } from "./tokens.stylex";
+
+interface Props {
+	/** The dialog's accessible name. */
+	label: string;
+	isOpen: boolean;
+	onClose: () => void;
+	children: ReactNode;
+}
+
+const styles = stylex.create({
+	overlay: {
+		position: "fixed",
+		inset: 0,
+		zIndex: 50,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: "1rem",
+		backgroundColor: "rgba(0, 0, 0, 0.4)",
+	},
+	panel: {
+		width: "100%",
+		maxWidth: "28rem",
+		borderRadius: "0.5rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		color: colors.text,
+		padding: "1.5rem",
+		boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+	},
+	/** The panel already draws the boundary; the dialog's own ring would double it. */
+	body: {
+		outlineStyle: "none",
+	},
+});
+
+export default function Dialog({ label, isOpen, onClose, children }: Props) {
+	return (
+		<ModalOverlay
+			isOpen={isOpen}
+			onOpenChange={(open) => {
+				if (!open) onClose();
+			}}
+			isDismissable
+			className={() => stylex.props(styles.overlay).className ?? ""}
+		>
+			<Modal className={() => stylex.props(styles.panel).className ?? ""}>
+				<AriaDialog aria-label={label} {...stylex.props(styles.body)}>
+					{children}
+				</AriaDialog>
+			</Modal>
+		</ModalOverlay>
+	);
+}