FEATURE: New option for DMenus inside composer

This update adds a new option to the `DMenu` options called `insideComposer`. This is to be used when instantiating a new menu inside the composer. Adding this flag will ensure that the menu has an adequate `z-index`, and thus shown to the user without any issues.

This will help each use-case from adding workarounds. For example, in Discourse AI we have been using various workarounds to ensure that the `DMenu` is shown correctly. These can now be safely removed.

app/assets/javascripts/discourse/tests/integration/components/float-kit/d-menu-test.js

@@ -54,6 +54,17 @@ module("Integration | Component | FloatKit | d-menu", function (hooks) {
     assert.dom(".fk-d-menu-modal[data-identifier='foo']").hasText("content");
   });
 
+  test("@insideComposer", async function (assert) {
+    await render(
+      hbs`<DMenu @identifier="foo" @inline={{true}} @insideComposer={{true}} @content="content" />`
+    );
+    await open();
+
+    assert
+      .dom(".fk-d-menu[data-identifier='foo']")
+      .hasClass("-inside-composer");
+  });
+
   test("@onRegisterApi", async function (assert) {
     this.api = null;
     this.onRegisterApi = (api) => (this.api = api);

app/assets/javascripts/float-kit/addon/components/d-headless-menu.gjs

@@ -1,10 +1,14 @@
+import concatClass from "discourse/helpers/concat-class";
 import DInlineFloat from "float-kit/components/d-inline-float";
 
 const DHeadlessMenu = <template>
   <DInlineFloat
     @instance={{@menu}}
     @trapTab={{@menu.options.trapTab}}
-    @mainClass="fk-d-menu"
+    @mainClass={{concatClass
+      "fk-d-menu"
+      (if @menu.options.insideComposer "-inside-composer")
+    }}
     @innerClass="fk-d-menu__inner-content"
     @role="dialog"
     @inline={{@inline}}

app/assets/javascripts/float-kit/addon/components/d-menu.gjs

@@ -151,6 +151,7 @@ export default class DMenu extends Component {
           @mainClass={{concatClass
             "fk-d-menu"
             (concat this.options.identifier "-content")
+            (if this.options.insideComposer "-inside-composer")
             @class
             @contentClass
           }}

app/assets/javascripts/float-kit/addon/lib/constants.js

@@ -69,6 +69,7 @@ export const MENU = {
     onShow: null,
     onRegisterApi: null,
     modalForMobile: false,
+    insideComposer: false,
     inline: null,
     groupIdentifier: null,
     parentIdentifier: null,

app/assets/stylesheets/common/float-kit/d-menu.scss

@@ -17,6 +17,14 @@
   padding: 0;
   z-index: z("dropdown");
 
+  &.-inside-composer {
+    z-index: z("modal", "dialog");
+
+    .mobile-view & {
+      z-index: z("mobile-composer");
+    }
+  }
+
   &__trigger {
     .touch & {
       @include unselectable;