EmojiPicker

id を渡して置きます。上に検索欄、下に種類ごとの見出しと絵文字の格子を並べます。見出しは灰色の太字（12px）で、絵文字は枠も影も無い平らなセル（最小32px）に置き、ホバーすると候補の一覧の選んでいる項目と同じ角の無い淡い青（#ddeefe）の面を出し、押すと内側へへこませます。groups を渡さなければ、リアクションによく使う40個（defaultEmojiGroups）を並べます。全ての絵文字を並べたい時や、絵文字を絞りたい時は groups で渡します。

検索欄に打った言葉で、絵文字の name と keywords を絞り込みます。大文字と小文字は区別しません。当てはまる絵文字の無い種類は見出しごと隠し、一つも無い時は emptyLabel を出します。

絵文字を押すか、Enter・Spaceで選ぶと emoji-picker:pick を出します。絵文字パネルは選んだ後も開いたままで、選択の状態も持ちません。閉じる・付けるなどの続きは利用側がこのイベントを受けて行います。

絵文字パネル自体は開閉を持たないので、Popover の中に置くか、ページにそのまま置きます。Popover の中に置く時は autofocus を渡すと、開いた時に検索欄へ移り、すぐ打ち始められます。

JavaScriptが無い時は、格子と検索欄を表示するだけで、絞り込みと、選択時のイベントの発火は行いません。