feat(elements): close drawer when pressing Escape

Related to #3370

Author: hugo-vrijswijk

packages/elements/src/components/drawer/drawer.component.ts

@@ -1,6 +1,7 @@
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import { html, LitElement, nothing, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import type { Ref } from 'lit/directives/ref.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -63,9 +64,25 @@ export class MutationTestReportDrawer extends LitElement {
     event.stopImmediatePropagation();
   };
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener('keydown', this.#handleKeyDown);
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener('keydown', this.#handleKeyDown);
+    super.disconnectedCallback();
+  }
+
+  #handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.mode = 'closed';
+    }
+  };
+
   render() {
-    const contentHeight = this.#contentHeightController.value;
-    const styles = styleMap({ height: contentHeight ? `${contentHeight}px` : undefined });
+    const isOpen = this.mode === 'open';
+    const height = this.#contentHeightController.value;
 
     return html`<aside @click="${(event: Event) => event.stopPropagation()}" class="ml-6 mr-4">
       <header class="w-full py-4" ${ref(this.#headerRef)}>
@@ -77,7 +94,10 @@ export class MutationTestReportDrawer extends LitElement {
           )}
         </h2>
       </header>
-      <div style="${styles}" class="mb-4 overflow-y-auto motion-safe:transition-max-width">
+      <div
+        style="${height && isOpen ? `height: ${height}px;` : nothing}"
+        class="${classMap({ ['mb-4 motion-safe:transition-max-width']: true, 'overflow-y-auto': isOpen })}"
+      >
         <slot name="summary"></slot>
         ${renderIf(this.hasDetail && this.mode === 'open', html`<slot name="detail"></slot>`)}
       </div>

packages/elements/test/unit/components/drawer.component.spec.ts

@@ -1,5 +1,6 @@
 import { MutationTestReportDrawer } from '../../../src/components/drawer/drawer.component.js';
 import { CustomElementFixture } from '../helpers/CustomElementFixture.js';
+import { userEvent } from '@vitest/browser/context';
 
 describe(MutationTestReportDrawer.name, () => {
   let sut: CustomElementFixture<MutationTestReportDrawer>;
@@ -72,6 +73,16 @@ describe(MutationTestReportDrawer.name, () => {
       const event = await sut.catchNativeEvent('click', () => sut.$<HTMLElement>('header').click());
       expect(event).undefined;
     });
+
+    it('should close when escape is pressed', async () => {
+      sut.element.mode = 'open';
+      await sut.whenStable();
+
+      await userEvent.keyboard('{Escape}');
+      await sut.whenStable();
+
+      expect(sut.element).toHaveProperty('mode', 'closed');
+    });
   });
 
   function readMoreToggle(): HTMLElement {