@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/components/wm-modal/wm-modal.js

@@ -1,356 +1,356 @@
-import { h, Component, Element, Listen, Host, Prop, Watch, Event, Method } from "@stencil/core";
-import { getFirstFocusableDescendant, checkForActiveElInShadow } from "../../global/functions";
+import { h } from "@stencil/core";
 import { generateId } from "../../global/functions";
 export class Modal {
-  constructor() {
-    this.isOpen = false;
-    this.elementToFocus = "";
-    this.isTypeDialog = false;
-    this.bodyFocusListener = () => this.redirectFocusOnBody();
-  }
-  //App can open modal by toggling the prop
-  toggleModal() {
-    this.isOpen ? this.showModal() : this.hideModal();
-  }
-  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
-  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
-  // @Listen("wmShowModal", { target: "window" })
-  // doesEventMatchId(ev: CustomEvent) {
-  //   ev.detail === this.uid && this.showModal();
-  // }
-  showModal() {
-    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
-    document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
-    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
-    document.body.tabIndex = 0;
-    document.body.removeEventListener("focus", this.bodyFocusListener, true);
-    document.body.addEventListener("focus", this.bodyFocusListener, true);
-    window.requestAnimationFrame(() => {
-      this.setElToFocusOnOpen();
-      window.requestAnimationFrame(() => this.focusOnOpen.focus()); //Bring focus to element inside modal
-    });
-  }
-  handleClick(ev) {
-    this.isOpen && ev.target === this.overlayEl && this.focusOnOpen.focus();
-  }
-  closeModalOnEscape(ev) {
-    if (ev.key === "Escape") {
-      this.wmCloseTriggered.emit();
-      this.isOpen = false;
+    constructor() {
+        this.open = false;
+        this.elementToFocus = "";
+        this.modalType = "modal";
+        this.uid = undefined;
+        this.returnFocusEl = undefined;
     }
-  }
-  //Close the modal and focus the triggering element when the modal buttons emit their events
-  hideModal() {
-    document.body.style.overflow = "visible";
-    document.body.tabIndex = -1;
-    document.body.removeEventListener("focus", this.bodyFocusListener, true);
-    window.requestAnimationFrame(() => this.focusOnClose.focus()); //Return focus
-  }
-  componentWillLoad() {
-    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
-      if (!this.el.id) {
-        throw new Error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
-      }
+    get closeButtonEl() {
+        return this.el.querySelector(`#wm-modal-close-${this.uid}`);
     }
-    this.uid = this.el.id ? this.el.id : generateId();
-  }
-  componentDidLoad() {
-    if (this.isOpen) {
-      this.showModal();
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (this.modalType === "dialog" && window.innerWidth < 768) {
+                // When a dialog is opened at this smaller width,
+                // focusing the footer buttons can cause the dialog to scroll and disorient the user
+                customElementToFocus = this.closeButtonEl;
+            }
+            else {
+                customElementToFocus = this.el.querySelector(`#wm-${this.elementToFocus}-${this.uid}`);
+            }
+        }
+        else if (this.elementToFocus) {
+            customElementToFocus = this.el.querySelector("#" + this.elementToFocus);
+            !customElementToFocus &&
+                console.warn(`Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus' (${this.elementToFocus}). It will fall back to the default and focus the close button when the modal opens.`);
+        }
+        return customElementToFocus;
+    }
+    get hasBrowserPopoverSupport() {
+        // For browsers without popover support, render a fallback tooltip inside the dialog so it appears above it
+        return typeof HTMLElement.prototype.showPopover === 'function';
     }
-  }
-  async emitCloseEvent() {
-    this.wmCloseTriggered.emit();
-  }
-  async emitPrimaryEvent() {
-    this.wmPrimaryTriggered.emit();
-  }
-  async emitSecondaryEvent() {
-    this.wmSecondaryTriggered.emit();
-  }
-  //If the dev hasn't specified an element to focus, element to focus first will be the close (X) button
-  setElToFocusOnOpen() {
-    const closeBtn = getFirstFocusableDescendant(this.el.querySelector(`#wm-modal-close-${this.uid}`));
-    if (this.elementToFocus) {
-      if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+    toggleModal() {
+        this.open ? this.showModal() : this.hideModal();
+    }
+    handleDialogClose() {
+        if (this.open) {
+            // if this.open = false, dialog close was prompted by user. Otherwise, dialog close was prompted by dialog element itself
+            // if dialog element was closed by built-in functionality (escape key), make sure closeTriggered event is emitted to keep app state in sync
+            this.wmModalCloseTriggered.emit();
+        }
+        this.open = false;
+    }
+    showModal() {
+        this.returnFocusEl = document.activeElement;
         this.setAriaDescribedbyOnModal();
-        this.elementToFocus = `wm-${this.elementToFocus}-${this.uid}`;
-      }
-      const elToFocus = this.el.querySelector(`#${this.elementToFocus}`);
-      if (elToFocus) {
-        const firstEl = getFirstFocusableDescendant(elToFocus);
-        if (firstEl) {
-          this.focusOnOpen = firstEl;
+        this.initialBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+        this.dialogEl.showModal();
+        if (this.focusOnOpenEl) {
+            this.focusOnOpenEl.focus();
+        }
+    }
+    hideModal() {
+        document.body.style.overflow = this.initialBodyOverflow; // TypeScript doesn't like the idea of assigning undefined but that's what we want
+        this.dialogEl.close();
+        // if focus is lost, bring focus to the element which was in focus when modal opened
+        setTimeout(() => {
+            if (this.returnFocusEl && document.activeElement === document.body) {
+                if (this.returnFocusEl.tagName === "WM-MENUITEM") {
+                    this.returnFocusEl = this.returnFocusEl.parentElement;
+                }
+                this.returnFocusEl.focus();
+            }
+        }, 20);
+    }
+    componentWillLoad() {
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (!this.el.id) {
+                console.error("For accessibility purposes you need to set the modal content wrapper's id to 'content-[id of wm-modal]'.");
+            }
+        }
+        this.el.focus = () => {
+            if (this.focusOnOpenEl) {
+                this.focusOnOpenEl.focus();
+            }
+            else {
+                this.closeButtonEl.focus();
+            }
+        };
+        this.uid = this.el.id ? this.el.id : generateId();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.showModal();
+        }
+        this.dialogEl.addEventListener("close", () => this.handleDialogClose());
+    }
+    async emitCloseEvent() {
+        this.wmModalCloseTriggered.emit();
+    }
+    async emitPrimaryEvent() {
+        this.wmModalPrimaryTriggered.emit();
+    }
+    async emitSecondaryEvent() {
+        this.wmModalSecondaryTriggered.emit();
+    }
+    handleKeyDown(ev) {
+        if (ev.key == "Escape") {
+            ev.stopPropagation();
+        }
+    }
+    setAriaDescribedbyOnModal() {
+        const modalBody = document.getElementById(`content-${this.uid}`);
+        if (!modalBody) {
+            console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
         }
         else {
-          console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
-          this.focusOnOpen = closeBtn;
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
         }
-      }
-      else {
-        console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
-        this.focusOnOpen = closeBtn;
-      }
     }
-    else {
-      this.focusOnOpen = closeBtn;
+    render() {
+        return (h("dialog", { key: '971cf1e1e2425c11876eb75503cf150ca10bdb40', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '8fe66f81867b79b593204fe0b775cde0a6fffe1a', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+                const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
+                // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
+                focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'c69f5898139dec832b9cb49ae6c68f972de3dcd6', class: "wm-tooltip" }), h("slot", { key: '56eb71ba84fa3b7069a0a1b4a7affeef82d29402' }), h("div", { key: '4469cdcbc90b969102e4007e4fab2f2b3232ac4f', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+                this.focusFirstElement.emit();
+            } })));
     }
-  }
-  setAriaDescribedbyOnModal() {
-    const modalBody = document.getElementById(`content-${this.uid}`);
-    if (!modalBody) {
-      console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+    static get is() { return "wm-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal.scss"]
+        };
     }
-    else {
-      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal.css"]
+        };
     }
-  }
-  setElToFocusOnClose() {
-    const elToFocus = document.activeElement;
-    if (elToFocus.tagName === "WM-MENUITEM") {
-      this.focusOnClose = elToFocus.parentElement;
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "elementToFocus": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "element-to-focus",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "modalType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"modal\" | \"dialog\"",
+                    "resolved": "\"dialog\" | \"modal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "modal-type",
+                "reflect": true,
+                "defaultValue": "\"modal\""
+            },
+            "uid": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uid",
+                "reflect": true
+            }
+        };
     }
-    else {
-      this.focusOnClose = checkForActiveElInShadow(elToFocus);
+    static get states() {
+        return {
+            "returnFocusEl": {}
+        };
     }
-  }
-  redirectFocusOnBody() {
-    if (document.activeElement.tagName === "BODY") {
-      this.setElToFocusOnOpen();
-      this.focusOnOpen.focus();
+    static get events() {
+        return [{
+                "method": "focusLastElement",
+                "name": "focusLastElement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "focusFirstElement",
+                "name": "focusFirstElement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalCloseTriggered",
+                "name": "wmModalCloseTriggered",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalPrimaryTriggered",
+                "name": "wmModalPrimaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalSecondaryTriggered",
+                "name": "wmModalSecondaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
     }
-  }
-  render() {
-    return (h(Host, { class: (this.isOpen ? "" : "hide ") + (this.isTypeDialog ? "wm-dialog" : "wm-modal"), role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.isOpen ? 0 : null, onFocus: () => {
-        this.focusLastElement.emit();
-      } },
-      h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }),
-      h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
-          this.focusFirstElement.emit();
-        } })));
-  }
-  static get is() { return "wm-modal"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-modal.css"]
-  }; }
-  static get properties() { return {
-    "isOpen": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "elementToFocus": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "element-to-focus",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "isTypeDialog": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-type-dialog",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "uid": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "uid",
-      "reflect": true
+    static get methods() {
+        return {
+            "emitCloseEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "emitPrimaryEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "emitSecondaryEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
     }
-  }; }
-  static get events() { return [{
-      "method": "focusLastElement",
-      "name": "focusLastElement",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "focusFirstElement",
-      "name": "focusFirstElement",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "wmCloseTriggered",
-      "name": "wmCloseTriggered",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "wmPrimaryTriggered",
-      "name": "wmPrimaryTriggered",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "wmSecondaryTriggered",
-      "name": "wmSecondaryTriggered",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "emitCloseEvent": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "emitPrimaryEvent": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "emitSecondaryEvent": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "toggleModal"
+            }];
     }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "isOpen",
-      "methodName": "toggleModal"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "closeModalOnEscape",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }