@fluid-topics/ftds-modal 2.2.37 → 2.2.38

package/build/ftds-modal.d.ts

@@ -11,15 +11,18 @@ export declare class FtdsModal extends FtdsModal_base implements FtdsModalProper
     icon?: FtdsIcons;
     iconVariant?: FtdsIconVariants;
     dialogOpen?: boolean;
-    private dialog;
     size: DesignSystemSize;
     constructor();
     protected render(): import("lit").TemplateResult<1>;
+    private dialog?;
+    private invoker?;
     protected contentAvailableCallback(props: PropertyValues): void;
-    open(): void;
+    open(invoker?: HTMLElement): void;
+    private onOpen;
     close(): void;
-    disconnectedCallback(): void;
-    private onOverlayClick;
     private onClose;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onEscapePressed;
 }
 export {};

package/build/ftds-modal.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 { DesignSystemFamily, FtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { DesignSystemFamily, focusTrap, FtdsBase, } from "@fluid-topics/ft-wc-utils";
 import { classMap } from "lit/directives/class-map.js";
 import { designSystemStyle } from "./ftds-modal.styles";
 import { FtdsButton } from "@fluid-topics/ftds-button";
@@ -15,6 +15,11 @@ import { FtdsIcon, FtdsIcons, } from "@fluid-topics/ftds-icon";
 import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { defaultModalMessages, modal, } from "./FtDsModalMessages";
+class FtdsModalOpenEvent extends Event {
+    constructor() {
+        super("open");
+    }
+}
 class FtdsModalCloseEvent extends Event {
     constructor() {
         super("close");
@@ -35,14 +40,17 @@ export class FtdsModal extends withI18n(FtdsBase) {
         return html `
             <div class="${classMap(classes)}" part="container">
                 <dialog part="dialog"
-                        @close=${this.onClose}>
-                    <div part="overlay" @click=${this.onOverlayClick}></div>
+                        popover="manual"
+                        aria-labelledby="heading"
+                        aria-modal="true"
+                        ${focusTrap()}>
+                    <div part="overlay" @click=${this.close}></div>
                     <div part="inner-container">
                         <div part="header">
                             ${this.icon ? html `
                                 <ftds-icon part="icon" icon="${this.icon}" variant="${this.iconVariant}"></ftds-icon>
                             ` : nothing}
-                            <ftds-typography part="heading" variant="${FtdsTypographyVariants.body1semibold}">
+                            <ftds-typography id="heading" part="heading" variant="${FtdsTypographyVariants.body1semibold}">
                                 ${this.heading}
                             </ftds-typography>
                             <ftds-button part="closing-button"
@@ -68,32 +76,56 @@ export class FtdsModal extends withI18n(FtdsBase) {
         `;
     }
     contentAvailableCallback(props) {
+        var _a;
         super.contentAvailableCallback(props);
-        if (props.has("dialogOpen")) {
+        const isDialogOpen = (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.matches(":popover-open");
+        if (props.has("dialogOpen") && this.dialogOpen != isDialogOpen) {
             if (this.dialogOpen) {
-                this.dialog.showModal();
+                this.open();
             }
             else {
-                this.dialog.close();
+                this.close();
             }
         }
     }
-    open() {
+    open(invoker) {
+        var _a;
+        this.invoker = invoker;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showPopover({ source: this.invoker });
+        this.onOpen();
+    }
+    onOpen() {
         this.dialogOpen = true;
+        this.dispatchEvent(new FtdsModalOpenEvent());
     }
     close() {
+        var _a;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.hidePopover();
+        this.onClose();
+    }
+    onClose() {
+        var _a;
+        if ((_a = this.invoker) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            this.invoker.focus();
+        }
+        this.invoker = undefined;
         this.dialogOpen = false;
+        this.dispatchEvent(new FtdsModalCloseEvent());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keydown", this.onEscapePressed);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener("keydown", this.onEscapePressed);
         this.close();
     }
-    onOverlayClick() {
-        this.close();
-    }
-    onClose() {
-        this.dispatchEvent(new FtdsModalCloseEvent());
-        this.close();
+    onEscapePressed(e) {
+        if (e.key === "Escape") {
+            this.close();
+            e.stopPropagation();
+        }
     }
 }
 FtdsModal.elementDefinitions = {
@@ -114,9 +146,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FtdsModal.prototype, "dialogOpen", void 0);
-__decorate([
-    query("dialog")
-], FtdsModal.prototype, "dialog", void 0);
 __decorate([
     property()
 ], FtdsModal.prototype, "size", void 0);
+__decorate([
+    query("dialog")
+], FtdsModal.prototype, "dialog", void 0);