Invite Team 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 people 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 TeamFields component and share the block's state, so what you pasted 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.

A comma, a space, a semicolon, a new line, Enter, leaving the box or a paste commits what you typed: it is split on those marks, lower-cased and added as chips. Each chip is judged against the rest: no at sign, not an address, listed twice, already on the crew or already invited. A flagged chip is dashed, carries a destructive icon and its reason in words, and can be removed with its own button, or with Backspace in an empty box. Enter in a box with nothing typed sends, as it does in any form.

It adds the seats in use (the crew and the invitations waiting) to the new ones and compares them with SEATS. A batch that fits fills the bar; one that doesn't is hatched past the cut, and Send says "Not enough seats: remove 1 address." and keeps the dialog open, with focus in the box. Only the good addresses count as new, so a flagged chip never costs a seat. Send is quiet and pressable while nothing can be sent, and says why.

Resend marks the invitation as sent in this demo and says so; nothing is emailed. Revoke takes the row away, moves focus to the next row's Revoke (or to Undo when none is left), and keeps the invitation so Undo can put it back in the same place. The seat chip on the drawn page moves with each change. The Undo button is always there and quiet while there is nothing to undo.

All of it. The crew, the plan's ten seats and the three waiting invitations are typed constants, and Send only adds Pending rows and says in a polite message that nothing was emailed. In your app post the good addresses and the role from send, add the rows from the response, and let your server be the judge of seats and duplicates: it knows what changed since the page loaded.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the address box and stays inside until it closes, and Escape, Cancel and the close button return focus to Invite people. The tabs move 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 moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.