Emoji Picker Command Menu Block for React

So you can see it without a click. On load the menu is the Command, the tone switch and the message field drawn inline under a picture of the channel, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the message you wrote in the copy is the one the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Six chips, one always chosen, each drawn as a hand in its tone. A hand or a person in the list is its base glyph plus the Unicode modifier for the tone (a colour selector is dropped first), so choosing Dark turns the waving hand, the thumbs up, the clap and the others at once and leaves the rest as they are. The switch sits outside the command, because its keys would take Enter from the buttons; Tab reaches it from the list. The status line says which tone is chosen.

It puts the highlighted emoji into the message field at the foot of the menu, at the caret where you last left it (at the end if you have not clicked in), and the menu stays open for the next one. The message is a field of its own, so you can type around the emoji; Clear empties it and the status line says so. Escape closes the menu and the status line reads the message back, with "Nothing was sent". The drawn composer behind the menu mirrors the message, since the scrim sinks the stage.

It reads the name, the shortcode and a few words per emoji, without accents or case, and a leading colon is ignored: typing :tada, party or celebrate finds the party popper. While nothing is typed the Frequently used group shows first; once you type, the list is the matches in their own groups, with the count under the list. No match says what to try.

All of it. The emoji, the tone and the message are state in the block, nothing is sent or saved, and nothing touches the clipboard. In your app replace EMOJI with your set (or a full emoji data package), keep Frequently used in the user's settings, and send message from the composer's own submit.

Yes. Type to search, the arrow keys move through the emoji, Enter adds one, and Escape closes the menu and puts focus on the field; Tab reaches the tone switch, the message field and Clear. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. Every glyph is hidden from assistive technology; a row is read as its name and its shortcode.