@fluid-topics/ft-drawer 2.0.14 → 2.0.16

package/build/ft-drawer.d.ts

@@ -16,8 +16,10 @@ export declare class FtDrawer extends FtDrawer_base implements FtDrawerPropertie
     private intersectionObserver;
     open(elementToFocusOnClose?: HTMLElement): void;
     close(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private onClose;
     private onOverlayClick;
+    private onEscapePressed;
 }
 export {};

package/build/ft-drawer.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing, } from "lit";
 import { property, query, } from "lit/decorators.js";
-import { FtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { focusTrap, FtdsBase, } from "@fluid-topics/ft-wc-utils";
 import { classMap } from "lit/directives/class-map.js";
 import { FtIcons } from "@fluid-topics/ft-icon";
 import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
@@ -26,7 +26,7 @@ class FtDrawerOpenEvent extends Event {
         super("open");
     }
 }
-class FtDrawer extends withI18n(FtdsBase) {
+export class FtDrawer extends withI18n(FtdsBase) {
     constructor() {
         super();
         this.buttonLabel = "";
@@ -49,7 +49,7 @@ class FtDrawer extends withI18n(FtdsBase) {
                         ${when(this.buttonIcon, () => nothing, () => this.buttonLabel)}
                     </ft-button>
                 </slot>
-                <dialog part="dialog" aria-labelledby="heading" @close=${this.onClose}>
+                <dialog part="dialog" popover="manual" aria-labelledby="heading" @close=${this.onClose} ${focusTrap()}>
                     <div part="overlay" @click=${this.onOverlayClick}></div>
                     <div part="inner-container">
                         <div part="header">
@@ -87,18 +87,23 @@ class FtDrawer extends withI18n(FtdsBase) {
     open(elementToFocusOnClose) {
         this.elementToFocusOnClose = elementToFocusOnClose;
         if (this.dialog) {
-            this.dialog.showModal();
+            this.dialog.showPopover();
             this.intersectionObserver.observe(this.dialog);
             this.dispatchEvent(new FtDrawerOpenEvent());
         }
     }
     close() {
         var _a;
-        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.hidePopover();
         this.onClose();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keydown", this.onEscapePressed);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener("keydown", this.onEscapePressed);
         this.close();
     }
     onClose() {
@@ -110,6 +115,11 @@ class FtDrawer extends withI18n(FtdsBase) {
     onOverlayClick() {
         this.close();
     }
+    onEscapePressed(e) {
+        if (e.key === "Escape") {
+            this.close();
+        }
+    }
 }
 FtDrawer.elementDefinitions = {
     "ft-button": FtButton,
@@ -128,4 +138,3 @@ __decorate([
 __decorate([
     query("dialog")
 ], FtDrawer.prototype, "dialog", void 0);
-export { FtDrawer };