<div class="reaction__menu" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
  <button class="reaction__menu-btn btn btn--circle borderless" data-action="click->dialog#open:stop" type="button">
    <%= icon_tag "reaction" %>
  </button>

  <dialog class="reaction__popup popup panel fill-white shadow" data-dialog-target="dialog">
    <div class="reaction__emoji-list">
      <% EmojiHelper::REACTIONS.each do |character, title| %>
        <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless hide-focus-ring", type: "button", data: { action: "reaction-emoji#insertEmoji dialog#close", emoji: character } %>
      <% end %>
    </div>
  </dialog>
</div>
