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.
26 lines
847 B
TypeScript
26 lines
847 B
TypeScript
import type { JSX } from "solid-js";
|
|
import { splitProps } from "solid-js";
|
|
import { useInternalAlertDialogContext } from "./alert-dialog-context";
|
|
|
|
/** Props for AlertDialog.Action. */
|
|
export interface AlertDialogActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children?: JSX.Element;
|
|
}
|
|
|
|
/** Confirms the action and closes the AlertDialog. */
|
|
export function AlertDialogAction(props: AlertDialogActionProps): JSX.Element {
|
|
const [local, rest] = splitProps(props, ["children", "onClick"]);
|
|
const ctx = useInternalAlertDialogContext();
|
|
|
|
const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
|
|
if (typeof local.onClick === "function") local.onClick(e);
|
|
ctx.setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<button type="button" onClick={handleClick} {...rest}>
|
|
{local.children}
|
|
</button>
|
|
);
|
|
}
|