Emoji Picker Dialog Block for React

So you can see it without a click. On load the picker 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 header's Add emoji 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 set 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.

Because here the glyphs are the content, not decoration. They are typed as data, each with a spoken name and a few search words, and the buttons carry the name as their accessible label while the glyph itself is hidden from assistive technology. Everything around them is icons and theme tokens. Emoji look different on every platform, so the grid sizes its cells for the glyph rather than drawing them.

The Select offers Default, Light, Medium and Dark. Hands and people in the data are flagged, and for those the glyph is its base character without the variation selector plus one Fitzpatrick modifier, so the grid and the message both show the toned version. Emoji without a tone, like the eyes or a heart, ignore the Select. In your app keep the tone with the user's preferences.

Everything. Each pick adds the glyph to the message text in local state, moves the emoji to the front of Frequently used and is spoken in a polite status message; nothing is sent. In your app insert at the caret of your real message field in onPick, store the frequent list per user, and expand CATEGORIES from a complete emoji dataset. The search covers names and keywords, so a longer list needs an index, not a filter on every key.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape and Done return focus to the Add emoji button. 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 and its close button close it and put focus back on the Add emoji button. Inside a grid the arrow keys walk the emoji (left and right swap in a right-to-left page), Home and End jump to the ends, there is one tab stop per grid, and Enter or Space adds the focused emoji and says its name.

The copy shown on load docks to the foot of the page as a bottom sheet with Done pinned at the bottom; on larger screens it sits at the bottom start, above the message box. The grid stays eight columns wide with cells sized for a thumb, and the search and tone share one row. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.