<div
  role="menubar"
  class="choose-material-type"
  data-test-choose-material-type
  {{on-click-outside (set this.isOpen false)}}
>
  <button
    aria-label={{t "general.add"}}
    role="menuitem"
    class="toggle new-material-type"
    type="button"
    aria-haspopup="true"
    aria-expanded={{if this.isOpen "true" "false"}}
    data-test-toggle
    {{on "click" (toggle "isOpen" this)}}
    {{on "keyup" this.toggleMenu}}
  >
    {{t "general.add"}}
    <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} />
  </button>
  {{#if this.isOpen}}
    <div
      class="menu"
      role="menu"
      {{did-insert (set this.menuElement)}}
      {{did-insert this.focusOnFirstItem}}
    >
      {{#each @types as |type|}}
        <button
          role="menuitem"
          type="button"
          tabindex="-1"
          data-test-item
          {{on "click" (fn @choose type)}}
          {{on "keyup" this.moveFocus}}
          {{on "mouseenter" this.clearFocus}}
        >
          {{t (concat "general." type)}}
        </button>
      {{/each}}
    </div>
  {{/if}}
</div>
