Invite Members Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Invite 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 InviteFields component and share the block's state, so an address typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From the address. DOMAIN is the household's own domain: an address on it joins as a member, any other as a guest, and the line under the field says which as you type, so there are no surprises after you send. The role is a promise your server has to keep: a guest sees shared events only because your API says so, not because of this dialog. To let the inviter choose instead, put a Select or a Segment Group under the field and pass its value with the address.

Here it adds the person to the list in local state as pending, with "invited in this demo", closes the dialog and says in a polite status message that nothing was sent. No request goes out and no email is sent. In your app post the address to your server in invite, let the server send the email with its join link, and add the row from the response; if the server refuses the address, show its reason in the field's error line and keep the dialog open.

When you leave the field and when you send: an empty field asks for an address, a malformed one shows the expected shape, and an address that already has access, or already has an invite waiting, says so. The error sits under the field with an icon, in the slot the hint uses, so the list never moves; once it shows, it follows your typing and clears as soon as the address is fixed. Sending with a problem keeps the dialog open and puts focus back in the field.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the email field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Invite. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on Invite. One polite status message reports each invite.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Send invite on top, and the field and the list scroll above them. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.