✅ transition with menu composition

[far-fetched]

What is wrong and why

1. Adding transition component to menu causes a situation when variable isOpen is false in <Menu> but <Menu.Items> is still visible - e.g. is fading out.

2. This getter

get itemsGuid() {
   return this.isOpen ? `${this.guid}-items` : undefined;
}

will be updated to undefined which will be passed down to <Menu.Items>

3. Menu Items uses headlessui-focus-trap with parameter itemsGuid

Thus, if we change itemsGuid from e.g. ember-123 to undefined modifier will be recalculated (teardown old, and mount new)

4. When a new modifier is mounted, fallbackFocus is #undefined. focus-trap after activation is focusing first tabbable element. As we set explicitly each item element with tabindex=-1, focus-trap doesn't see any tabbable nodes and tries to focus fallback element which is #undefined.

5. Finally, focus-trap will throw error, which you can see here (try to close menu). Also failing test with first build.

Fix

I changed getter itemsGuid to always return not undefined value (modifier will be not rerun when close menu with transition). It breaks a lot of tests as Menu.Button component uses it to set aria-controls - when is closed this aria should be undefined. So eventually I added if condition based on @isOpen which already is provided to Menu.Button

[GavinJoyce]

Very nice, thanks @far-fetched!