51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T450b,"use client"; import * as React from "react"; import { CheckCircle2 } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react"; import { Button, buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type FeedbackState = "idle" | "loading" | "success"; const INSTANT_TRANSITION = { duration: 0 } as const; const CONTENT_TRANSITION = { type: "spring", duration: 0.4, bounce: 0, } as const; const SUBMIT_TRANSITION = { type: "spring", duration: 0.3, bounce: 0, } as const; export type FeedbackPopoverProps = Omit< React.ComponentProps<"div">, "children" | "onSubmit" > & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; onSubmit?: (feedback: string) => void | Promise; /** * Called when `onSubmit` rejects. Without this the form silently returns to * idle with the draft intact and no way to surface the failure. */ onError?: (error: unknown) => void; triggerLabel?: React.ReactNode; /** * Doubles as the placeholder: it floats over the empty textarea and clears * once there is text, so there is no separate `placeholder` prop. */ textareaLabel?: string; submitLabel?: React.ReactNode; successTitle?: React.ReactNode; successDescription?: React.ReactNode; loadingAnnouncement?: string; /** * Minimum time in ms the loading state stays visible, so quick submissions * don't flash. Slow ones keep loading until `onSubmit` settles. */ loadingDuration?: number; /** Time in ms the success screen stays visible before the popover closes. */ successDuration?: number; }; function Spinner({ className }: { className?: string }) { return ( ); } function wait(duration: number) { return new Promise((resolve) => { window.setTimeout(resolve, duration); }); } export function FeedbackPopover({ open, defaultOpen = false, onOpenChange, onSubmit, onError, triggerLabel = "Feedback", textareaLabel = "Feedback", submitLabel = "Send feedback", successTitle = "Feedback received!", successDescription = "Thanks for helping us improve.", loadingAnnouncement = "Sending feedback", loadingDuration = 1500, successDuration = 1800, className, ...props }: FeedbackPopoverProps) { const reactId = React.useId(); const titleId = `${reactId}-title`; const descriptionId = `${reactId}-description`; const popoverRef = React.useRef(null); const triggerRef = React.useRef(null); const timers = React.useRef([]); const isMountedRef = React.useRef(true); // Bumped on every open/close transition. An `onSubmit` that settles after // its session ended must not flip a reopened popover into success, schedule // a close, or pull focus back to the trigger. const sessionRef = React.useRef(0); const shouldReduceMotion = useReducedMotion(); const isControlled = open !== undefined; const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const [feedback, setFeedback] = React.useState(""); const [formState, setFormState] = React.useState("idle"); const isOpen = isControlled ? open : uncontrolledOpen; const trimmedFeedback = feedback.trim(); const clearTimers = React.useCallback(() => { timers.current.forEach(window.clearTimeout); timers.current = []; }, []); const setOpen = React.useCallback( (nextOpen: boolean) => { if (!isControlled) { setUncontrolledOpen(nextOpen); } onOpenChange?.(nextOpen); }, [isControlled, onOpenChange], ); const closePopover = React.useCallback( (options?: { restoreFocus?: boolean }) => { clearTimers(); setOpen(false); // Keyboard and programmatic closes return focus to the trigger so the // user isn't dropped on ; pointer dismissals leave focus where // the user clicked. if (options?.restoreFocus) { triggerRef.current?.focus(); } }, [clearTimers, setOpen], ); const openPopover = React.useCallback(() => { clearTimers(); setFormState("idle"); setFeedback(""); setOpen(true); }, [clearTimers, setOpen]); // Controlled parents can flip `open` without going through `openPopover`; // reset on the closed -> open transition so a reopen never shows the // previous session's stale draft or success screen. const wasOpenRef = React.useRef(isOpen); React.useEffect(() => { const wasOpen = wasOpenRef.current; wasOpenRef.current = isOpen; if (isOpen !== wasOpen) { sessionRef.current += 1; // Also drops a success-close timer scheduled by a submission that // settled in the same tick as the close. clearTimers(); } if (isOpen && !wasOpen) { setFormState("idle"); setFeedback(""); } }, [clearTimers, isOpen]); const submitFeedback = React.useCallback(async () => { if (!trimmedFeedback || formState !== "idle") return; const session = sessionRef.current; clearTimers(); setFormState("loading"); try { await Promise.all([onSubmit?.(trimmedFeedback), wait(loadingDuration)]); } catch (error) { if (!isMountedRef.current) return; // A stale session still reports the failure, but must not reset the // form state of whatever session is showing now. if (sessionRef.current === session) setFormState("idle"); onError?.(error); return; } if (!isMountedRef.current || sessionRef.current !== session) return; setFormState("success"); timers.current = [ window.setTimeout(() => { setOpen(false); triggerRef.current?.focus(); }, successDuration), ]; }, [ clearTimers, formState, loadingDuration, onError, onSubmit, setOpen, successDuration, trimmedFeedback, ]); React.useEffect(() => { isMountedRef.current = true; return () => { isMountedRef.current = false; clearTimers(); }; }, [clearTimers]); React.useEffect(() => { if (!isOpen) return; const handlePointerDown = (event: PointerEvent) => { const popover = popoverRef.current; if (!popover || popover.contains(event.target as Node)) return; closePopover(); }; document.addEventListener("pointerdown", handlePointerDown); return () => document.removeEventListener("pointerdown", handlePointerDown); }, [closePopover, isOpen]); React.useEffect(() => { if (!isOpen) return; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { // A nested overlay (select, menu) that consumed this Escape marks it // handled; closing here too would dismiss both layers at once. if (event.defaultPrevented) return; event.preventDefault(); closePopover({ restoreFocus: true }); return; } if ( (event.ctrlKey || event.metaKey) && event.key === "Enter" && formState === "idle" && // Only submit when focus is inside the popover, so Cmd/Ctrl+Enter in // some other form on the page doesn't send this one. popoverRef.current?.contains(document.activeElement) ) { event.preventDefault(); void submitFeedback(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [closePopover, formState, isOpen, submitFeedback]); // Match the reference: the popover morph uses Motion's default layout transition // (tween, 0.45s, ease [0.4, 0, 0.1, 1]) by leaving `transition` undefined. const layoutTransition = shouldReduceMotion ? INSTANT_TRANSITION : undefined; const contentTransition = shouldReduceMotion ? INSTANT_TRANSITION : CONTENT_TRANSITION; const submitTransition = shouldReduceMotion ? INSTANT_TRANSITION : SUBMIT_TRANSITION; return (

{triggerLabel} {isOpen ? (