Application of floating UI helpers within dropdown component

addon/components/au-dropdown.hbs

@@ -1,5 +1,6 @@
 <div class="au-c-dropdown" ...attributes>
   <AuButton
+    {{this.reference}}
     @skin={{this.skin}}
     @size={{@size}}
     @icon={{this.icon}}
@@ -17,19 +18,31 @@
       {{@title}}
     </span>
   </AuButton>
-  <div
-    class="au-c-dropdown__menu {{this.alignment}} {{if this.dropdownOpen 'is-visible'}}"
-    role="menu"
-    tabindex="-1"
-    {{focus-trap
-      isActive=this.dropdownOpen
-      shouldSelfFocus=true
-      focusTrapOptions=(hash
-        clickOutsideDeactivates=this.clickOutsideDeactivates
-      )
-    }}
-    {{on "click" this.closeDropdown}}
-  >
-    {{yield}}
-  </div>
-</div>
+  {{#if this.dropdownOpen}}
+    <div
+      {{this.floatingUi
+        this.referenceElement
+        this.arrowElement
+        defaultPlacement=this.alignment
+        options=this.floatingUiOptions
+      }}
+      class="au-c-dropdown__floater"
+    >
+      <div {{this.arrow}} class="au-c-dropdown__arrow"></div>
+      <div
+        {{focus-trap
+          shouldSelfFocus=true
+          focusTrapOptions=(hash
+            clickOutsideDeactivates=this.clickOutsideDeactivates
+          )
+        }}
+        {{on "click" this.closeDropdown}}
+        class="au-c-dropdown__menu"
+        role="menu"
+        tabindex="-1"
+      >
+        {{yield}}
+      </div>
+    </div>
+  {{/if}}
+</div>

addon/components/au-dropdown.js

@@ -2,8 +2,30 @@ import Component from '@glimmer/component';
 import { deprecate } from '@ember/debug';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+
+import FloatingUiModifier from '@appuniversum/ember-appuniversum/private/modifiers/floating-ui';
 
 export default class AuDropdown extends Component {
+  @tracked referenceElement = undefined;
+  @tracked arrowElement = undefined;
+
+  floatingUi = FloatingUiModifier;
+
+  reference = modifier(
+    (element) => {
+      this.referenceElement = element;
+    },
+    { eager: false }
+  );
+
+  arrow = modifier(
+    (element) => {
+      this.arrowElement = element;
+    },
+    { eager: false }
+  );
+
   @tracked dropdownOpen = false;
 
   @action
@@ -23,8 +45,7 @@ export default class AuDropdown extends Component {
 
   @action
   clickOutsideDeactivates(event) {
-    let toggleButton = document.querySelector('[data-au-dropdown-toggle]');
-    let isClosedByToggleButton = toggleButton.contains(event.target);
+    let isClosedByToggleButton = this.referenceElement.contains(event.target);
 
     if (!isClosedByToggleButton) {
       this.closeDropdown();
@@ -52,9 +73,9 @@ export default class AuDropdown extends Component {
 
   // Dropdown alignment
   get alignment() {
-    if (this.args.alignment == 'left') return 'au-c-dropdown__menu--left';
-    if (this.args.alignment == 'right') return 'au-c-dropdown__menu--right';
-    return '';
+    if (this.args.alignment == 'left') return 'bottom-start';
+    if (this.args.alignment == 'right') return 'bottom-end';
+    return 'bottom';
   }
 
   // Set default button skin
@@ -74,4 +95,13 @@ export default class AuDropdown extends Component {
     if (this.args.iconAlignment) return this.args.iconAlignment;
     else return 'right';
   }
+
+  // Set options for the floatingUi component
+  get floatingUiOptions() {
+    return {
+      arrow: {
+        offset: 0,
+      },
+    };
+  }
 }

app/styles/ember-appuniversum/_c-dropdown.scss

@@ -8,10 +8,9 @@
 $au-dropdown-caret-size        : .4rem !default;
 
 /* Component
-   ========================================================================== */
+  ========================================================================== */
 
 .au-c-dropdown {
-  position: relative;
   display: inline-block;
 }
 
@@ -38,31 +37,28 @@ $au-dropdown-caret-size        : .4rem !default;
   }
 }
 
-.au-c-dropdown__menu {
-  @include au-font-size(var(--au-base),1.5);
-  font-family: var(--au-font);
-  font-weight: var(--au-regular);
-  position: absolute;
+.au-c-dropdown__floater {
   z-index: var(--au-z-index-beta);
-  background-color: var(--au-white);
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 100%;
   width: auto;
-  top: calc(100% + #{$au-unit-tiny});
+
   box-shadow: 0 0 12px rgba($au-gray-900,.15), 0 0 2px rgba($au-gray-900,.1);
   border-radius: var(--au-radius);
-  display: none;
+  background-color: var(--au-white);
+
+  @include au-font-size(var(--au-base),1.5);
+  font-family: var(--au-font);
+  font-weight: var(--au-regular);
+}
+
+.au-c-dropdown__arrow {
+  position: absolute;
 
   &:before,
   &:after {
     bottom: 100%;
     left: 50%;
     border: solid transparent;
-    content: " ";
+    content: "";
     height: 0;
     width: 0;
     position: absolute;
@@ -80,46 +76,18 @@ $au-dropdown-caret-size        : .4rem !default;
     border-color: rgba($au-white, 0);
     border-bottom-color: var(--au-white);
   }
+}
+
+.au-c-dropdown__menu {
+  position: relative;
+  z-index: var(--au-z-index-beta); // Re-apply z-index to fix overlapping arrow when focussing on a menu item
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
 
   &:focus {
     outline: 0;
   }
-
-  &.is-visible {
-    display: flex;
-  }
-
-  // Modify the menu position
-  &.au-c-dropdown__menu--left,
-  &.au-c-dropdown__menu--right {
-    transform: none;
-  }
-
-  &.au-c-dropdown__menu--left {
-    left: 0;
-  }
-
-  &.au-c-dropdown__menu--right {
-    left: auto;
-    right: 0;
-  }
-
-  &.au-c-dropdown__menu--left:after {
-    left: $au-unit-small;
-  }
-
-  &.au-c-dropdown__menu--right:after {
-    right: $au-unit-small + $au-unit-tiny;
-    left: auto;
-  }
-
-  .au-c-button--naked + &.au-c-dropdown__menu--left:after {
-    left: $au-unit-tiny;
-  }
-
-  .au-c-button--naked + &.au-c-dropdown__menu--right:after {
-    right: $au-unit-tiny;
-  }
 }
 
 .au-c-dropdown__menu > .au-c-hr {

package.json

@@ -51,7 +51,7 @@
   "dependencies": {
     "@duetds/date-picker": "^1.4.0",
     "@embroider/macros": "^1.9.0",
-    "@floating-ui/dom": "^1.0.4",
+    "@floating-ui/dom": "^1.1.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@zestia/ember-auto-focus": "^4.2.0",