Function ConfirmationHost

src/components/ui/ConfirmationHost.tsx:19–170

()

}

export function ConfirmationHost() {
  const titleId = useId();
  const messageId = useId();
  const [pending, setPending] = useState<PendingConfirmation | null>(null);
  const pendingRef = useRef<PendingConfirmation | null>(null);
  const queueRef = useRef<PendingConfirmation[]>([]);
  const dialogRef = useRef<HTMLDivElement>(null);
  const cancelButtonRef = useRef<HTMLButtonElement>(null);
  const previousFocusRef = useRef<HTMLElement | null>(null);

  const restoreFocus = useCallback(() => {
    const previousFocus = previousFocusRef.current;
    previousFocusRef.current = null;
    if (previousFocus?.isConnected) {
      previousFocus.focus();
    }
  }, []);

  const settle = useCallback((confirmed: boolean) => {
    const current = pendingRef.current;
    if (!current) return;

    current.resolve(confirmed);
    const next = queueRef.current.shift() ?? null;
    pendingRef.current = next;
    setPending(next);
    if (!next) {
      restoreFocus();
    }
  }, [restoreFocus]);

  const showConfirmation = useCallback((request: ConfirmationRequest) => (
    new Promise<boolean>((resolve) => {
      const next = { request, resolve };
      if (pendingRef.current) {
        queueRef.current.push(next);
        return;
      }

      pendingRef.current = next;
      setPending(next);
    })
  ), []);

  useEffect(() => {
    registerConfirmationHandler(showConfirmation);

    return () => {
      registerConfirmationHandler(null);
      pendingRef.current?.resolve(false);
      for (const queued of queueRef.current) {
        queued.resolve(false);
      }
      pendingRef.current = null;
      queueRef.current = [];
      restoreFocus();
    };
  }, [showConfirmation, restoreFocus]);