@fluid-topics/ft-modal 1.3.30 → 1.3.32

package/build/ft-modal.d.ts

@@ -9,12 +9,15 @@ export declare class FtModal extends FtModal_base implements FtModalProperties {
     buttonIcon?: string;
     heading: string;
     icon?: string;
-    private button;
-    private dialog;
+    dialog?: HTMLDialogElement;
     size: DesignSystemSize;
     constructor();
     protected render(): import("lit-html").TemplateResult<1>;
-    open(): void;
+    private onKeyUp;
+    protected onTriggerClick(e: MouseEvent): void;
+    protected elementToFocusOnClose?: HTMLElement;
+    private intersectionObserver;
+    open(elementToFocusOnClose?: HTMLElement): void;
     close(): void;
     disconnectedCallback(): void;
     private onClose;

package/build/ft-modal.js

@@ -23,12 +23,22 @@ class FtModalCloseEvent extends Event {
         super("close");
     }
 }
+class FtModalOpenEvent extends Event {
+    constructor() {
+        super("open");
+    }
+}
 class FtModal extends withI18n(FtdsBase) {
     constructor() {
         super();
         this.buttonLabel = "";
         this.heading = "";
         this.size = DesignSystemSize.small;
+        this.intersectionObserver = new IntersectionObserver(() => {
+            if (this.dialog && !this.dialog.checkVisibility()) {
+                this.close();
+            }
+        });
         this.addI18nContext(ftModalContext, defaultFtModalMessages);
     }
     render() {
@@ -37,9 +47,11 @@ class FtModal extends withI18n(FtdsBase) {
         };
         return html `
             <div class="${classMap(classes)}" part="container">
-                <ft-button part="button" icon="${ifDefined(this.buttonIcon)}" label="${this.buttonLabel}" @click=${this.open} ariaHasPopup="dialog">
-                    ${when(this.buttonIcon, () => nothing, () => this.buttonLabel)}
-                </ft-button>
+                <slot @click=${this.onTriggerClick} @keyup=${this.onKeyUp} name="trigger">
+                    <ft-button part="button" icon="${ifDefined(this.buttonIcon)}" label="${this.buttonLabel}" ariaHasPopup="dialog">
+                        ${when(this.buttonIcon, () => nothing, () => this.buttonLabel)}
+                    </ft-button>
+                </slot>
                 <dialog part="dialog" aria-labelledby="heading" @close=${this.onClose}>
                     <div part="overlay" @click=${this.onOverlayClick}></div>
                     <div part="inner-container">
@@ -54,6 +66,7 @@ class FtModal extends withI18n(FtdsBase) {
                                        icon="${FtIcons.CLOSE}"
                                        tertiary
                                        label="${modal.messages.closeModal()}"
+                                       tooltipPosition="left"
                                        @click=${this.close}>
                             </ft-button>
                         </div>
@@ -70,11 +83,25 @@ class FtModal extends withI18n(FtdsBase) {
             </div>
         `;
     }
-    open() {
-        this.dialog.showModal();
+    onKeyUp(e) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.open(e.target);
+        }
+    }
+    onTriggerClick(e) {
+        this.open(e.target);
+    }
+    open(elementToFocusOnClose) {
+        this.elementToFocusOnClose = elementToFocusOnClose;
+        if (this.dialog) {
+            this.dialog.showModal();
+            this.intersectionObserver.observe(this.dialog);
+            this.dispatchEvent(new FtModalOpenEvent());
+        }
     }
     close() {
-        this.dialog.close();
+        var _a;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
         this.onClose();
     }
     disconnectedCallback() {
@@ -82,7 +109,9 @@ class FtModal extends withI18n(FtdsBase) {
         this.close();
     }
     onClose() {
-        this.button.focus();
+        var _a;
+        this.intersectionObserver.disconnect();
+        (_a = this.elementToFocusOnClose) === null || _a === void 0 ? void 0 : _a.focus();
         this.dispatchEvent(new FtModalCloseEvent());
     }
     onOverlayClick() {
@@ -107,9 +136,6 @@ __decorate([
 __decorate([
     property()
 ], FtModal.prototype, "icon", void 0);
-__decorate([
-    query("ft-button")
-], FtModal.prototype, "button", void 0);
 __decorate([
     query("dialog")
 ], FtModal.prototype, "dialog", void 0);