50: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"] 51: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"] 52:T2286,"use client"; import { forwardRef, useEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useFancyId } from "../../internals/use-id"; import { useSoundCue } from "../../sound/use-sound"; import { DialogSurface } from "./DialogSurface"; export interface DialogProps { /** Whether the dialog is open. Controlled when given; the component keeps its own copy either way. */ open?: boolean; /** Fires whenever `open` changes, from any trigger — the close button, Escape, an outside click, or the optional `trigger` node. */ onOpenChange?: (open: boolean) => void; /** The heading. Omitted entirely (not just visually) when not given, so `aria-labelledby` never points at nothing. */ title?: string; /** The copy under the title. Same omission rule as `title`. */ description?: string; /** Whether Escape and an outside click close the dialog. The close button always works regardless — see the README. */ dismissible?: boolean; /** Element to focus once the dialog opens. Defaults to the first focusable descendant — often the close button; pass a form field here for dialogs built around one. */ initialFocus?: HTMLElement | null; /** The dialog's body. */ children?: ReactNode; /** The action row under the body. Free-form — callers build their own buttons. */ footer?: ReactNode; /** Optional trigger; renders in place and opens the dialog on activation. */ trigger?: ReactNode; /** Additional classes for the panel. */ className?: string; /** * Plays the matching open/close cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } export const Dialog = forwardRef(function Dialog( { open: openProp, onOpenChange, title, description, dismissible = true, initialFocus = null, children, footer, trigger, className, sound = false, }, forwardedRef ) { // The React shape of the source's `open = $bindable(false)`: an internal // copy seeded from the prop, re-synced during render whenever the CALLER // changes the prop, and free to move on its own in between. That is what // makes all three documented call shapes work off one implementation — a // caller driving `open` from its own state, a caller who passes only // `onOpenChange`, and a caller who passes neither and lets the trigger // run the whole thing. // // Re-synced in the render path, not an effect: an effect would paint one // frame of the stale value first, and the pattern React documents for // "adjust state when a prop changes" is exactly this — set state on the // component that owns it, during render, and let React restart the render // before committing anything. const [open, setOpenState] = useState(openProp ?? false); const [lastOpenProp, setLastOpenProp] = useState(openProp); if (lastOpenProp !== openProp) { setLastOpenProp(openProp); setOpenState(openProp ?? false); } // A no-op while `sound` is false, so the call sites below stay unguarded. const playCue = useSoundCue(sound); // The only place `open` changes on this side of the wire — a plain // function, not an effect, so it never fights a caller's own controlled // write and never reads/writes `open` in the same pass. function setOpen(next: boolean) { // A dismiss that changes nothing fires nothing. Belt and braces beside // the dismiss layer's own `active` gate — `active` stops the listener, // this stops the callback — and it fixes a real defect on its own: a // second Escape during the close used to fire `onOpenChange(false)` a // second time. // The same guard is what keeps the cues honest: a redundant call — a // second Escape mid-exit, a dismiss that changes nothing — stays // silent rather than doubling up, and a dialog driven purely by the // `open` prop never reaches this function's open branch, so it opens // silently by design. if (open === next) return; setOpenState(next); playCue(next ? "open" : "close"); onOpenChange?.(next); } // A plain ref, not state: nothing renders off it. It only has to exist by // the time `useDismissable`'s `exclude` callback runs, and both that and // `fallbackFocus` below are resolved at event time. Doubles as // `DialogSurface`'s `fallbackFocus` target — a real, findable place for // focus to land on close if whatever had focus when the dialog opened is // no longer in the document by the time it closes. const triggerRef = useRef(null); // The wrapper only listens for the click bubbling up from whatever the // caller put inside `trigger` — it adds no interactive semantics of its // own, so the trigger's own content (expected to be a real button or // similar) is what carries keyboard activation. `exclude` on // `DialogSurface` below is what stops this same element from reading as // an "outside" pointerdown once the dialog is open, so clicking the // trigger again while open cannot immediately dismiss what it just — or // is about to — open. function openFromTrigger() { if (open) return; setOpen(true); } // One seed, two suffixes — the same one-generator-per-instance pattern // FormField and RadioGroup use, safe during SSR. Undefined rather than a // generated id with nothing pointing at it while the title/description // they'd label are not rendered. const uid = useFancyId(); const titleId = title ? `${uid}-title` : undefined; const descriptionId = description ? `${uid}-description` : undefined; // The wrapper carries no semantics, so the disclosure state goes on what // the caller rendered inside it — the real button a keyboard or // screen-reader user lands on. Written imperatively because an arbitrary // `trigger` node cannot be handed props from here. `aria-controls` only // while the panel exists, so it never points at an id not in the document. const panelId = `${uid}-panel`; useEffect(() => { const el = triggerRef.current?.firstElementChild; if (!el) return; el.setAttribute("aria-haspopup", "dialog"); el.setAttribute("aria-expanded", String(open)); if (open) el.setAttribute("aria-controls", panelId); else el.removeAttribute("aria-controls"); return () => { el.removeAttribute("aria-haspopup"); el.removeAttribute("aria-expanded"); el.removeAttribute("aria-controls"); }; }, [open, panelId, trigger]); const panelContent = ( <>

{title ? (

{title}

) : null} {/* Always rendered and always functional, independent of `dismissible`: this is an explicit, deliberate activation — like clicking a Cancel button — not the accidental miss-click `dismissible` guards against, so a dialog that turns off Escape/outside-click to protect in-progress work still leaves one unambiguous way out. */}

{description ? (

{description}

) : null} {children} {footer ?

{footer}

: null} ); return ( <> {trigger ? ( /* This wrapper adds no semantics of its own on purpose — it only listens for the click bubbling up from whatever `trigger` renders, which is expected to be a real interactive element (a Button, typically) carrying its own keyboard activation. `display: contents` keeps it out of layout entirely, so it never affects how the trigger's own content positions itself. */ { triggerRef.current = node; }} className="contents" onClick={openFromTrigger} > {trigger} ) : null} ); }); Dialog.displayName = "Dialog"; 53:T1b3b,"use client"; import { forwardRef } from "react"; import { cn } from "../../utils"; import { Portal } from "../../internals/Portal"; import { useDismissable } from "../../internals/dismissable"; import { useFocusTrap } from "../../internals/focus-trap"; import { useScrollLock } from "../../internals/scroll-lock"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useElementRef } from "../../internals/dom/use-element-ref"; import { anchored } from "../../internals/motion/anchored"; import { DURATIONS } from "../../internals/motion/tokens"; import { usePresence } from "../../internals/motion/presence"; import type { DialogSurfaceProps } from "./types"; import "./dialog-surface.css"; export const DialogSurface = forwardRef(function DialogSurface( { open, id, role, titleId, descriptionId, escape, outsideClick, onDismiss, initialFocus = null, fallbackFocus, exclude, panelClass, children, }, forwardedRef ) { // Convention C-1: the NODE, not a ref. The panel is created by // `presence.mounted`, so a `useRef` + `[]`-deps effect would still be // holding `null` when the trap's effect fires and the trap would never // arm — silently. const [panel, setPanelNode] = useElementRef(); // Returns the two functions the source hands out through `onActivate`: // the eager return, and the re-arm. Two module-level `let`s, two handler // functions and an `onActivate` closure collapse to this one line. const trap = useFocusTrap(panel, { initialFocus, fallbackFocus }); const presence = usePresence(open, { // The two halves of the focus handshake, at the two moments the source // puts them: `onintrostart` → rearm, `onoutrostart` → returnFocusNow. // // `returnFocusNow` at the dismiss instant is the whole point: waiting // for the trap's own `destroy()` would leave a keyboard user on // `` for the length of the fade, because the panel is marked // `inert` the instant the exit starts. // // `rearm` is the other half. A dialog reopened DURING its exit // reverses instead of remounting, so the trap is never re-created: // without this the panel would come back `aria-modal` and interactive // with focus left on the trigger behind it, Tab walking the page // rather than the panel, and the eager return already spent for the // life of the instance. onEnterStart: () => trap.rearm(), onExitStart: () => trap.returnFocusNow(), }); // Release timing, which is the only reason this is not keyed on `open`: // `presence.mounted` stays true for the whole exit, so the page stays // locked until the backdrop has actually finished fading instead of // unlocking the instant `open` flips and leaving the page scrollable // under a scrim still on screen. // // CONTRACT divergence, recorded in this folder's README: the internals // contract's worked example calls a bare `useScrollLock()` here. That is // only correct for a component whose own mounting scope IS the surface's, // and this one's is not — `Dialog` renders `DialogSurface` // unconditionally, exactly as the source does, so a bare call would lock // the page for every dialog on the page, open or not. `mounted` is the // mounting scope expressed as a boolean; it is emphatically not `open`. useScrollLock(presence.mounted); // `active: open` — a plain boolean where the source needed `() => open`. // The layer stays ON the stack for its whole exit and stops being TOP of // it the instant `open` flips, so a second Escape during the fade falls // through to whatever is underneath. useDismissable(panel, { onDismiss, escape, outsideClick, exclude, active: open, keepFocus: true, }); // Convention C-2: composed ABOVE any conditional. Calling this inside the // JSX branch below would be a conditional hook and would throw the first // time `mounted` flips. const panelRef = useComposedRefs( setPanelNode, forwardedRef, presence.register("panel", anchored, (entering) => ({ entering, duration: DURATIONS.base, exitDuration: DURATIONS.exit, })) ); // The scrim fades on opacity alone (`scale: false`) — a full-viewport // fixed element has no business acquiring a compositing layer for a // transform it does not use. It shares the panel's clock exactly, so the // two leave together and the "destroy the subtree when the LAST // transition finishes" rule is a tie rather than a straggler. const scrimRef = presence.register("scrim", anchored, (entering) => ({ entering, scale: false, duration: DURATIONS.base, exitDuration: DURATIONS.exit, })); // CONTRACT divergence, recorded in this folder's README: the `Portal` // stays mounted and its CHILDREN are what `presence.mounted` gates, // rather than the whole component returning `null`. `usePortalTarget` // resolves its container in a layout effect, so a `Portal` that mounts in // the same commit as the surface renders nothing on that pass — and the // registered nodes therefore do not exist yet when `usePresence`'s own // layout effect looks for legs to start, which settles the group // immediately and skips the entrance outright. Hoisting the `Portal` // above the gate resolves the container once, at this component's mount, // so every later open attaches its nodes in the very commit // `usePresence` is waiting for. return ( {presence.mounted ? ( <>

{/* No portal-before-focus-trap ordering ceremony here (divergence D-10): `createPortal` commits children into the container before any effect runs and refs populate before layout effects, so the node the trap focuses is always connected. The silent-no-op `.focus()` hazard the source's comment block warns about cannot recur. `data-state` is an ordinary attribute (divergence D-2) carrying `surfaceState`'s TWO values — never `"opening"` (convention C-5). `inert` is not written by hand either: `usePresence` sets it on every registered node for the whole exit, which is exactly what a closing modal wants. */}

{children}

) : null} ); }); DialogSurface.displayName = "DialogSurface"; 54:T7b8,/* * The `