Add Glint support to the AuDropdown component

Author: Windvis

addon/components/au-dropdown.gjs addon/components/au-dropdown.gts

@@ -1,5 +1,3 @@
-import { AuButton } from '@appuniversum/ember-appuniversum';
-import FloatingUiModifier from '@appuniversum/ember-appuniversum/private/modifiers/floating-ui';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
@@ -8,26 +6,41 @@ import { tracked } from '@glimmer/tracking';
 import { focusTrap } from 'ember-focus-trap';
 import { modifier } from 'ember-modifier';
 import { ChevronDownIcon } from './icons/chevron-down';
+import AuButton from './au-button';
+import type { AuButtonSignature } from './au-button';
+import floatingUi from '../private/modifiers/floating-ui';
+
+export interface AuDropdownSignature {
+  Args: {
+    alignment?: 'left' | 'right';
+    alert?: boolean;
+    hideText?: boolean;
+    icon?: AuButtonSignature['Args']['icon'];
+    iconAlignment?: AuButtonSignature['Args']['iconAlignment'];
+    onClose?: () => unknown;
+    size?: AuButtonSignature['Args']['size'];
+    skin?: AuButtonSignature['Args']['skin'];
+    title?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
 
-export default class AuDropdown extends Component {
-  @tracked referenceElement = undefined;
-  @tracked arrowElement = undefined;
+export default class AuDropdown extends Component<AuDropdownSignature> {
+  // We use declare here, so TS doesn't consider `undefined` as part of the type since the initialisation happens after the constructor.
+  @tracked declare referenceElement: HTMLElement;
+  @tracked declare arrowElement: HTMLElement;
   @tracked dropdownOpen = false;
-  floatingUi = FloatingUiModifier;
-
-  reference = modifier(
-    (element) => {
-      this.referenceElement = element;
-    },
-    { eager: false },
-  );
-
-  arrow = modifier(
-    (element) => {
-      this.arrowElement = element;
-    },
-    { eager: false },
-  );
+
+  reference = modifier((element: HTMLElement) => {
+    this.referenceElement = element;
+  });
+
+  arrow = modifier((element: HTMLElement) => {
+    this.arrowElement = element;
+  });
 
   @action
   openDropdown() {
@@ -50,8 +63,10 @@ export default class AuDropdown extends Component {
   }
 
   @action
-  clickOutsideDeactivates(event) {
-    let isClosedByToggleButton = this.referenceElement.contains(event.target);
+  clickOutsideDeactivates(event: Event) {
+    const isClosedByToggleButton = this.referenceElement?.contains(
+      event.target as HTMLElement,
+    );
 
     if (!isClosedByToggleButton) {
       this.closeDropdown();
@@ -113,7 +128,7 @@ export default class AuDropdown extends Component {
       </AuButton>
       {{#if this.dropdownOpen}}
         <div
-          {{this.floatingUi
+          {{floatingUi
             this.referenceElement
             this.arrowElement
             defaultPlacement=this.alignment

addon/template-registry.ts

@@ -14,6 +14,7 @@ import type AuContentHeader from '@appuniversum/ember-appuniversum/components/au
 import type AuContent from '@appuniversum/ember-appuniversum/components/au-content';
 import type AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
 import type AuDatePicker from '@appuniversum/ember-appuniversum/components/au-date-picker';
+import type AuDropdown from '@appuniversum/ember-appuniversum/components/au-dropdown';
 import type AuFieldset from '@appuniversum/ember-appuniversum/components/au-fieldset';
 import type AuFileCard from '@appuniversum/ember-appuniversum/components/au-file-card';
 import type AuFileUpload from '@appuniversum/ember-appuniversum/components/au-file-upload';
@@ -65,6 +66,7 @@ export default interface AppuniversumRegistry {
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
   AuDatePicker: typeof AuDatePicker;
+  AuDropdown: typeof AuDropdown;
   AuFieldset: typeof AuFieldset;
   AuFileCard: typeof AuFileCard;
   AuFileUpload: typeof AuFileUpload;

tests/integration/components/au-dropdown-test.js tests/integration/components/au-dropdown-test.gts

@@ -1,27 +1,31 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
+import AuDropdown from '@appuniversum/ember-appuniversum/components/au-dropdown';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 module('Integration | Component | au-dropdown', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`
-      <AuDropdown @title="foo">
-        <button type="button" data-test-button>baz</button>
-      </AuDropdown>
-    `);
+    await render(
+      <template>
+        <AuDropdown @title="foo">
+          <button type="button" data-test-button>baz</button>
+        </AuDropdown>
+      </template>,
+    );
 
     assert.dom('[data-test-dropdown-title]').hasText('foo');
   });
 
   test('it toggles the visibility of its content when clicking the dropdown button', async function (assert) {
-    await render(hbs`
-      <AuDropdown @title="foo">
-        <button type="button" data-test-button>baz</button>
-      </AuDropdown>
-    `);
+    await render(
+      <template>
+        <AuDropdown @title="foo">
+          <button type="button" data-test-button>baz</button>
+        </AuDropdown>
+      </template>,
+    );
 
     assert.dom('[data-test-button]').isNotVisible('it is closed by default');
 
@@ -39,11 +43,13 @@ module('Integration | Component | au-dropdown', function (hooks) {
   });
 
   test('it toggles the visibility of its content when clicking children of the dropdown button', async function (assert) {
-    await render(hbs`
-      <AuDropdown @title="foo">
-        <button type="button" data-test-button>baz</button>
-      </AuDropdown>
-    `);
+    await render(
+      <template>
+        <AuDropdown @title="foo">
+          <button type="button" data-test-button>baz</button>
+        </AuDropdown>
+      </template>,
+    );
 
     assert.dom('[data-test-button]').isNotVisible('it is closed by default');
 
@@ -61,18 +67,20 @@ module('Integration | Component | au-dropdown', function (hooks) {
   });
 
   test('it calls the @onClose function when the dropdown is closed', async function (assert) {
-    this.onClose = () => {
+    const onClose = () => {
       assert.step('@onClose');
     };
 
-    await render(hbs`
-      <AuDropdown @title="foo" @onClose={{this.onClose}}>
-        <button type="button" data-test-button>baz</button>
-      </AuDropdown>
-    `);
+    await render(
+      <template>
+        <AuDropdown @title="foo" @onClose={{onClose}}>
+          <button type="button" data-test-button>baz</button>
+        </AuDropdown>
+      </template>,
+    );
 
-    await click('[data-test-dropdown-button]', 'open the dropdown');
-    await click('[data-test-dropdown-button]', 'close the dropdown');
+    await click('[data-test-dropdown-button]'); // open
+    await click('[data-test-dropdown-button]'); // close
 
     assert.verifySteps(['@onClose']);
   });

tests/integration/components/loose-mode-test.ts

@@ -115,6 +115,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     `);
   });
 
+  test('`<AuDropdown>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuDropdown data-test-dropdown />
+    `);
+    assert.dom('[data-test-dropdown]').exists();
+  });
+
   test('`<AuFieldset>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuFieldset data-test-fieldset />`);
 

types/ember-focus-trap/index.d.ts

@@ -5,6 +5,7 @@ type FocusTrapOptions = {
   fallbackFocus?: string;
   escapeDeactivates?: () => boolean;
   allowOutsideClick?: boolean;
+  clickOutsideDeactivates?: (Event) => boolean;
 };
 
 interface Signature {
@@ -14,6 +15,7 @@ interface Signature {
       isActive?: boolean;
       additionalElements?: string[] | Element[];
       focusTrapOptions?: FocusTrapOptions;
+      shouldSelfFocus?: boolean;
     };
   };
 }