"use client"; import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"; type ConfirmOptions = { title: string; message?: string; confirmText?: string; cancelText?: string; danger?: boolean; }; type AlertOptions = { title: string; message?: string; okText?: string }; type DialogState = | { kind: "confirm"; options: ConfirmOptions; resolve: (v: boolean) => void } | { kind: "alert"; options: AlertOptions; resolve: () => void } | null; type DialogContextValue = { confirm: (options: ConfirmOptions) => Promise; alert: (options: AlertOptions) => Promise; }; const DialogContext = createContext(null); export function useDialog(): DialogContextValue { const ctx = useContext(DialogContext); if (!ctx) throw new Error("useDialog must be used within DialogProvider"); return ctx; } // Subtle entrance — just enough to avoid a hard flicker, not a showy animation. const DIALOG_KEYFRAMES = `@keyframes chrome-dialog-overlay { from { opacity: 0; } to { opacity: 1; } } @keyframes chrome-dialog-panel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }`; // Opening a dialog over a pending one replaces its state — settle the stranded // promise first (a superseded confirm resolves false) so callers never hang. function settleStranded(prev: DialogState) { if (!prev) return; if (prev.kind === "confirm") prev.resolve(false); else prev.resolve(); } export function DialogProvider({ children }: { children: React.ReactNode }) { const [state, setState] = useState(null); const confirm = useCallback( (options: ConfirmOptions) => new Promise((resolve) => setState((prev) => { settleStranded(prev); return { kind: "confirm", options, resolve }; }), ), [], ); const alert = useCallback( (options: AlertOptions) => new Promise((resolve) => setState((prev) => { settleStranded(prev); return { kind: "alert", options, resolve }; }), ), [], ); const panelRef = useRef(null); const confirmBtnRef = useRef(null); const cancelBtnRef = useRef(null); // Element focused before the dialog opened, restored on close. const previouslyFocused = useRef(null); const close = useCallback( (resolved: boolean) => { if (!state) return; if (state.kind === "confirm") state.resolve(resolved); else state.resolve(); setState(null); }, [state], ); const isDanger = state?.kind === "confirm" && state.options.danger === true; // Capture the previously focused element and move focus into the dialog. // Danger confirms default to Cancel so Enter can't instantly confirm a // destructive action; everything else defaults to the confirm/OK button. useEffect(() => { if (!state) return; previouslyFocused.current = document.activeElement instanceof HTMLElement ? document.activeElement : null; const target = isDanger ? cancelBtnRef.current : confirmBtnRef.current; target?.focus(); return () => { previouslyFocused.current?.focus(); previouslyFocused.current = null; }; }, [state, isDanger]); // Lock body scroll while a dialog is open. useEffect(() => { if (!state) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [state]); useEffect(() => { if (!state) return; function onKey(e: KeyboardEvent) { if (e.key === "Escape") { // Stop the press from also reaching a dropdown/select listening beneath // the modal, which would otherwise close both at once. e.preventDefault(); close(false); return; } // Focus trap: keep Tab/Shift+Tab cycling within the dialog's focusables. if (e.key === "Tab") { const panel = panelRef.current; if (!panel) return; const focusables = panel.querySelectorAll( 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', ); if (focusables.length === 0) return; const first = focusables[0]; const last = focusables[focusables.length - 1]; const active = document.activeElement; if (e.shiftKey) { if (active === first || !panel.contains(active)) { e.preventDefault(); last?.focus(); } } else if (active === last || !panel.contains(active)) { e.preventDefault(); first?.focus(); } } } document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [state, close]); return ( {children} {state && ( <>

close(false)} >

e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="chrome-dialog-title" >

{state.kind === "confirm" ? "Confirm" : "Notice"}

{state.options.title}

{state.options.message && (

{state.options.message}

)}

{state.kind === "confirm" && ( )}

)} ); }

name	type	default
title *	string	-
message	string	-
danger	boolean	false