feat(menu): allow item element to be a component

addon/components/menu/item-element.hbs

@@ -1,4 +1,7 @@
-{{#let (element (or @tagName 'a')) as |Tag|}}
+{{#let
+  (if this.tagNameIsComponent @tagName (element (or @tagName 'a')))
+  as |Tag|
+}}
   <Tag
     id={{@guid}}
     role='menuitem'

addon/components/menu/item-element.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class MenuItemElement extends Component {
+  get tagNameIsComponent() {
+    return typeof this.args.tagName === 'object';
+  }
+}

tests/integration/components/menu-test.js

@@ -153,6 +153,28 @@ module('Integration | Component | <Menu>', (hooks) => {
           .hasText('Item A [isActive:false] [isDisabled:false]');
       });
     });
+
+    test('it should be possible to use a custom component as a menu item', async function (assert) {
+      await render(hbs`
+        <Menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items data-test-menu-items as |items|>
+            {{#let (component 'link-to' route="menu") as |Link|}}
+              <items.Item as |item|>
+                <item.Element @tagName={{Link}} data-test-item-a>
+                  Item A
+                </item.Element>
+              </items.Item>
+            {{/let}}
+          </menu.Items>
+        </Menu>
+      `);
+
+      await triggerKeyEvent('[data-test-menu-button]', 'keydown', Keys.Enter);
+
+      assert.dom('[data-test-item-a]').hasTagName('a');
+      assert.dom('[data-test-item-a]').hasAttribute('href', '/menu');
+    });
   });
 
   module('Keyboard interactions', function () {