Meeting RSVP Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the week: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Reply button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ReplyFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

They are worked out from the typed GUESTS list and your own answer, so the numbers always add up to eight and can't drift from the initials beside them. Before you choose, you sit in No reply; pick an answer and the You pill leaves that group and joins yours, and the counts and the polite status line ("Going. Going 5, Maybe 1, Declined 1, No reply 1") follow. Each group also carries its names in text for a screen reader, since the initials are decoration. In your app replace GUESTS with the event's attendees and compute the same counts.

The note field is for Maybe and Can't go; with Going or no answer the same space reads a short sentence instead, so the dialog never changes height when you switch. Nothing is sent: Send response keeps your answer in this page's state, redraws the invitation on the week and says so in the status. With no answer chosen it says to choose one and moves focus to the answers. In your app send the answer and the note to your calendar's API and update the guest list from its response; the note is cleared once it is kept.

So the answer reads without hue, in every theme and for colour-blind readers: solid for Going, dashed for Maybe, struck through for Can't go, and a plain outline before any answer. The drawing is hidden from assistive technology under the scrim; the same answer is in the status line and the page's sentence, which changes from waiting for your reply to the answer you gave.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the answers, and Escape, Cancel and the close button return focus to the Reply button. The answers are one group you move through with the arrow keys. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them. The guests stop being four cells and become four rows, each with its label, its count and its initials, so the count stays beside the people. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.