61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T5818,import { useEffect, useId, useRef, useState, type ReactNode, type RefObject } from "react"; import { AnimatePresence, motion, useReducedMotion, type PanInfo } from "framer-motion"; /* React modal popup in one file, four variants. In your app: wrap output in createPortal(..., document.body) from react-dom, change "absolute" to "fixed" on the overlay and panel, and pass document.body to lockScroll. The demo keeps everything inside a framed box so it can be previewed. */ type Variant = "center" | "sheet" | "drawer"; type Which = "confirm" | "form" | "sheet" | "drawer" | null; const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'; const projects = [ { name: "Spring lookbook", pages: 6, edited: "2 hours ago", tone: "#d9e7dd", img: "https://images.pexels.com/photos/39835429/pexels-photo-39835429.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Woman in a red blouse posing on a resort balcony by the pool" }, { name: "Harbour Dental", pages: 4, edited: "Yesterday", tone: "#dfe6f1", img: "https://images.pexels.com/photos/4270379/pexels-photo-4270379.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Dentist treating a patient in a bright modern clinic" }, { name: "Fold & Grain bakery", pages: 8, edited: "Mon", tone: "#f1e6d6", img: "https://images.pexels.com/photos/8633662/pexels-photo-8633662.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Freshly baked rustic sourdough loaves and buns" }, { name: "Northfield Cycling", pages: 5, edited: "Last week", tone: "#e9e1ef", img: "https://images.pexels.com/photos/5735768/pexels-photo-5735768.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Smiling cyclist racing a road bike on a sunny day" }, { name: "Lumen Studio", pages: 3, edited: "Sep 28", tone: "#f3dfdc", img: "https://images.pexels.com/photos/30332804/pexels-photo-30332804.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Photography studio with a mocha backdrop and lighting" }, { name: "Orchard Lane Rentals", pages: 7, edited: "Sep 21", tone: "#e1ece9", img: "https://images.pexels.com/photos/8146214/pexels-photo-8146214.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Bright empty room with wooden floors in a rental flat" }, ]; const lineItems = [ { label: "Studio plan, October", amount: 29 }, { label: "Extra domain: harbourdental.example", amount: 12 }, { label: "Storage, 20 GB add-on", amount: 4 }, ]; /* Locks scrolling on one element and keeps the scrollbar gap so nothing shifts. */ function lockScroll(el: HTMLElement) { const gap = el.offsetWidth - el.clientWidth; const prev = { overflow: el.style.overflow, paddingRight: el.style.paddingRight }; el.style.overflow = "hidden"; if (gap > 0) el.style.paddingRight = `${gap}px`; return () => { el.style.overflow = prev.overflow; el.style.paddingRight = prev.paddingRight; }; } function useDialogBehaviour(opts: { open: boolean; onClose: () => void; panelRef: RefObject; backgroundRef: RefObject; scrollRef: RefObject; triggerRef: RefObject; initialFocusRef?: RefObject; moveFocus: boolean; }) { const { open, onClose, panelRef, backgroundRef, scrollRef, triggerRef, initialFocusRef, moveFocus } = opts; const closeRef = useRef(onClose); closeRef.current = onClose; useEffect(() => { if (!open) return; const bg = backgroundRef.current; const scroller = scrollRef.current; bg?.setAttribute("inert", ""); bg?.setAttribute("aria-hidden", "true"); const unlock = scroller ? lockScroll(scroller) : undefined; if (moveFocus) { const target = initialFocusRef?.current ?? panelRef.current?.querySelector(FOCUSABLE); requestAnimationFrame(() => target?.focus({ preventScroll: true })); } const onKey = (e: KeyboardEvent) => { const panel = panelRef.current; if (!panel) return; if (e.key === "Escape") { e.preventDefault(); closeRef.current(); return; } if (e.key !== "Tab" || !panel.contains(document.activeElement)) return; const items = Array.from(panel.querySelectorAll(FOCUSABLE)).filter((n) => n.offsetParent !== null); if (!items.length) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; document.addEventListener("keydown", onKey); return () => { document.removeEventListener("keydown", onKey); bg?.removeAttribute("inert"); bg?.removeAttribute("aria-hidden"); unlock?.(); if (moveFocus || panelRef.current?.contains(document.activeElement)) { triggerRef.current?.focus({ preventScroll: true }); } }; }, [open, moveFocus, backgroundRef, scrollRef, panelRef, triggerRef, initialFocusRef]); } function Modal(props: { open: boolean; onClose: () => void; variant: Variant; title: string; description?: string; role?: "dialog" | "alertdialog"; closeOnOverlay?: boolean; backgroundRef: RefObject; scrollRef: RefObject; triggerRef: RefObject; initialFocusRef?: RefObject; moveFocus: boolean; children: ReactNode; footer?: ReactNode; }) { const { open, onClose, variant, title, description, role = "dialog", closeOnOverlay = true, children, footer } = props; const panelRef = useRef(null); const titleId = useId(); const descId = useId(); const reduce = useReducedMotion(); useDialogBehaviour({ ...props, panelRef }); const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 420, damping: 36, mass: 0.9 }; const motionFor: Record = { center: { initial: { opacity: 0, y: 14, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 8, scale: 0.98 } }, sheet: { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } }, drawer: { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }, }; const placement: Record = { center: "inset-0 sm:inset-auto sm:left-1/2 sm:top-1/2 sm:w-[min(440px,calc(100%-32px))] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl", sheet: "inset-x-0 bottom-0 max-h-[88%] rounded-t-3xl sm:mx-auto sm:max-w-lg", drawer: "inset-y-0 right-0 w-full max-w-sm sm:rounded-l-2xl", }; const onDragEnd = (_: unknown, info: PanInfo) => { if (info.offset.y > 110 || info.velocity.y > 600) onClose(); }; return ( {open && ( <> {/* Wrapper carries the CSS centring transform so framer-motion can own the inner one. */}

{variant === "sheet" && ( )}

{title}

{description && (

{description}

)}

{role === "dialog" && ( )}

{children}

{footer &&

{footer}

}

)} ); } const btn = "inline-flex h-10 items-center justify-center rounded-xl px-4 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-[0.98] motion-reduce:transform-none"; const btnPrimary = `${btn} bg-stone-900 text-white hover:bg-stone-800 focus-visible:ring-emerald-700`; const btnGhost = `${btn} border border-stone-200 bg-white text-stone-800 hover:bg-stone-50 focus-visible:ring-emerald-700`; const btnDanger = `${btn} bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600`; export default function ReactModalPopupDialogs() { // Starts open so the preview shows a dialog; nothing steals focus until someone clicks. const [open, setOpen] = useState("form"); const [userOpened, setUserOpened] = useState(false); const [name, setName] = useState("Autumn menu"); const [visibility, setVisibility] = useState("team"); const [error, setError] = useState(""); const [copied, setCopied] = useState(false); const [access, setAccess] = useState("view"); const bgRef = useRef(null); const scrollRef = useRef(null); const confirmTrig = useRef(null); const formTrig = useRef(null); const sheetTrig = useRef(null); const drawerTrig = useRef(null); const cancelRef = useRef(null); const nameRef = useRef(null); const show = (w: Which) => { setUserOpened(true); setError(""); setCopied(false); setOpen(w); }; const close = () => setOpen(null); const shared = { backgroundRef: bgRef, scrollRef, moveFocus: userOpened, onClose: close }; const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""); const submit = (e: React.FormEvent) => { e.preventDefault(); if (!name.trim()) { setError("Give the project a name."); nameRef.current?.focus(); return; } close(); }; const total = lineItems.reduce((s, i) => s + i.amount, 0); const triggers: { label: string; w: Exclude; ref: RefObject; cls: string }[] = [ { label: "Delete project", w: "confirm", ref: confirmTrig, cls: btnGhost }, { label: "New project", w: "form", ref: formTrig, cls: btnPrimary }, { label: "Share sheet", w: "sheet", ref: sheetTrig, cls: btnGhost }, { label: "Invoice drawer", w: "drawer", ref: drawerTrig, cls: btnGhost }, ]; return (

Projects

Open any of the four dialogs below.

{triggers.map((t) => ( ))}

{p.name}

{p.pages} pages · edited {p.edited}

{/* 1. Confirm dialog: alertdialog, safe button focused first, overlay click ignored */} {/* 2. Form dialog: full screen on phones, centred card from sm up */} } > {/* 3. Bottom sheet: drag the handle down to dismiss */}

Share link

{[ { v: "view", t: "Can view" }, { v: "comment", t: "Can comment" }, ].map((o) => ( ))}

{/* 4. Side drawer */} Download PDF } >

Paid in full Receipt sent

{i.label}: ${i.amount.toFixed(2)}
Total: ${total.toFixed(2)}

Billed to

Harbour Dental Ltd

14 Quay Street, Bristol BS1 4DJ

accounts@harbourdental.example

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/react-modal-popup-dialog-with-focus-trap-confirm-form-bottom-sheet-and-side-drawer.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]