Contact Picker Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the compose window: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Choose recipients 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 PickerFields component and share the block's state, so what you chose 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.

It folds case and accents on both sides, so "elif" and "Élif" find the same row, and it matches the name or the address. Groups with no match disappear and the pinned letters follow. When nothing matches, the list shows an empty state that names what you typed and has a Clear search button. The box keeps its height, so the chosen panel beside it never moves. A polite count ("2 contacts match, 3 chosen.") is said 600 ms after you stop typing, never on every key. In your app call your own search and keep the same rows.

Each contact is a native checkbox inside a label, so Space toggles the focused row and pressing anywhere on it works too. The four recent chips toggle the same people, and are pressed when they are chosen. The To panel lists the chosen people in the order you picked them, each with a Remove button named for the person, and Clear takes them all off. After a removal focus moves to the next Remove button, or to the search when none is left. Add recipients with nobody chosen says so under the lists and puts focus in the search.

All of it. The fourteen contacts and the four recent ones are typed constants, and Add recipients only puts the chosen people on the drawn To line and says in a polite message that nothing was sent. Cancel and Escape put the choice back to what the message already has. In your app load the book from your API, keep the choice in picked, and on add write the addresses into your message's To field.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the search and stays inside until it closes, and Escape, Cancel and the close button return focus to Choose recipients. 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.

The copy shown on load docks to the foot of the page as a bottom sheet, with Add recipients pinned under the body. The To panel becomes a single row of chips under the list that scrolls sideways, so the list keeps its height. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.