"use client"; import type { ButtonHTMLAttributes, FocusEvent, KeyboardEvent, MouseEvent } from "react"; import { useEffect, useRef, useState } from "react"; export type ConfirmInlineButtonProps = ButtonHTMLAttributes & { label?: string; confirmLabel?: string; /** Milliseconds the confirmation stays armed. */ timeout?: number; onConfirm?: () => void; /** Called when an armed confirmation expires, loses focus, or is cancelled with Escape. */ onCancel?: () => void; armed?: boolean; defaultArmed?: boolean; onArmedChange?: (armed: boolean) => void; /** Hides the countdown bar regardless of the visitor's motion preference. */ reducedMotion?: boolean; }; const countdownKeyframes = "@keyframes foundry-confirm-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}"; export function ConfirmInlineButton({ label = "Delete branch", confirmLabel = "Confirm delete", timeout = 3000, onConfirm, onCancel, armed, defaultArmed = false, onArmedChange, reducedMotion = false, className = "", onClick, onKeyDown, onBlur, ...props }: ConfirmInlineButtonProps) { const [internalArmed, setInternalArmed] = useState(defaultArmed); const controlled = armed !== undefined; const isArmed = controlled ? armed : internalArmed; const callbacks = useRef({ onCancel, onArmedChange }); useEffect(() => { callbacks.current = { onCancel, onArmedChange }; }); function setArmed(next: boolean) { if (!controlled) setInternalArmed(next); onArmedChange?.(next); } function cancel() { setArmed(false); onCancel?.(); } useEffect(() => { if (!isArmed) return; const timer = window.setTimeout(() => { if (!controlled) setInternalArmed(false); callbacks.current.onArmedChange?.(false); callbacks.current.onCancel?.(); }, timeout); return () => window.clearTimeout(timer); }, [isArmed, timeout, controlled]); function handleClick(event: MouseEvent) { onClick?.(event); if (event.defaultPrevented) return; if (!isArmed) { setArmed(true); return; } setArmed(false); onConfirm?.(); } function handleKeyDown(event: KeyboardEvent) { onKeyDown?.(event); if (event.key === "Escape" && isArmed) { event.preventDefault(); cancel(); } } function handleBlur(event: FocusEvent) { onBlur?.(event); if (isArmed) cancel(); } const seconds = Math.max(1, Math.round(timeout / 1000)); return ( <> {isArmed ? "Press again within " + seconds + " seconds to confirm." : ""} ); }