@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,240 +1,263 @@
-import { h, Component, Element, Prop, Event, Watch, Listen } from "@stencil/core";
-import { generateId } from "../../global/functions";
+import { h, Host } from "@stencil/core";
+import { generateId, hideTooltip, intl, showTooltip } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
 export class Snackbar {
-  constructor() {
-    //Prop receives notifications as JSON string, which is later parsed into an array of objects.
-    this.notifications = "[]";
-    this.parsedNotifications = []; //Holds the parsed array
-    this.isTabbing = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets "enter" as a "click"
-    this.timers = [];
-    this.newNotification = false;
-  }
-  updateSnacks(newValue) {
-    const parsedData = JSON.parse(newValue);
-    const length = parsedData.length;
-    const prevNotificationsLength = this.parsedNotifications.length;
-    this.parsedNotifications = [];
-    //Parse notifications received as props and store a reference to them
-    for (let i = 0; i < length; i++) {
-      let newNotification = {
-        id: parsedData[i].id.toString(),
-        message: parsedData[i].message.toString(),
-        link: parsedData[i].link.toString(),
-      };
-      this.parsedNotifications = [...this.parsedNotifications, newNotification];
-    }
-    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.
-    if (prevNotificationsLength < this.parsedNotifications.length) {
-      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
-      this.timers = [newTimer, ...this.timers];
-      this.storeElToFocusOnDismiss();
-      this.newNotification = true;
-    }
-    else {
-      this.newNotification = false;
-    }
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : generateId();
-  }
-  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.
-  componentDidUpdate() {
-    //If the user is tabbing and there's a new notification, focus the link and disable timer.
-    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();
-    this.newNotification = false;
-  }
-  checkForTabbing(ev) {
-    if (ev.keyCode === 9) {
-      this.toggleTabbingOn();
-    }
-  }
-  //Workaround for screenreader's triggering click event on "enter".
-  handleMouse() {
-    this.toggleTabbingOff();
-  }
-  focusLinkAndDisableTimer() {
-    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.
-    const latestNotification = this.parsedNotifications[0];
-    if (latestNotification.link) {
-      let link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-      link.focus();
-      this.stopTimer(latestNotification);
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-    this.snackbarEl && this.snackbarEl.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-    this.snackbarEl && this.snackbarEl.classList.remove("user-is-tabbing");
-  }
-  storeElToFocusOnDismiss() {
-    let triggeringButton = document.activeElement;
-    while (triggeringButton && triggeringButton.shadowRoot) {
-      triggeringButton = triggeringButton.shadowRoot.activeElement;
-    }
-    this.focusOnDismiss = triggeringButton;
-  }
-  snackDismissed(notification) {
-    this.endSnack(notification);
-    //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
-    notification.link && this.isTabbing && this.focusOnDismiss.focus();
-  }
-  //Remove snack from notification list once timer runs out
-  snackExpired() {
-    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
-    this.endSnack(notification);
-  }
-  endSnack(notification) {
-    //App listens for userFinishedSnack event and deletes the emitted notification.
-    this.stopTimer(notification);
-    this.userFinishedSnack.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-    });
-  }
-  snackLinkClicked(notification) {
-    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.
-    this.stopTimer(notification);
-    this.userTriggeredAction.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-    });
-  }
-  //Delete the timer corresponding to the dismissed notification
-  stopTimer(notification) {
-    this.parsedNotifications.forEach((notif, index) => {
-      if (notif.id === notification.id) {
-        clearTimeout(this.timers[index]);
-        this.timers = this.timers.filter((timer, ind) => {
-          if (ind !== index) {
-            return timer;
-          }
+    constructor() {
+        this.parsedNotifications = [];
+        this.uid = this.el.id ? this.el.id : generateId();
+        this.focusOnDismiss = null;
+        this.timers = {};
+        this.closeSnackMessage = intl.formatMessage({
+            id: "snackbar.closeNotification",
+            defaultMessage: "Close this notification",
+            description: "Notification refers to a notification UI element that can be dismissed",
         });
-      }
-    });
-  }
-  renderSnackbars() {
-    return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper" },
-      h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" },
-        h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }),
-        h("div", { class: "wm-snackbarmsg" },
-          h("div", { class: "msgtext" },
-            h("span", null, notification.message),
-            notification.link && (h("a", { id: `action-${notification.id}`, class: "link", "aria-label": `Click to ${notification.link}...`, tabindex: 0, onClick: () => {
-                this.snackLinkClicked(notification);
-              }, onKeyDown: (ev) => ev.keyCode === 13 && this.snackLinkClicked(notification) },
-              h("span", { "aria-hidden": "true" }, notification.link)))),
-          h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) },
-            h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))),
-        h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
-  }
-  renderLiveRegion() {
-    const latestNotification = this.parsedNotifications[0];
-    const link = this.isTabbing ? "" : latestNotification.link;
-    const srAnnouncement = `${latestNotification.message} ${link}`;
-    const region = this.el.shadowRoot.querySelector(`#wm-live-region-${this.uid}`);
-    if (region) {
-      region.innerHTML = "";
-      const wrapper = document.createElement("span");
-      wrapper.innerHTML = srAnnouncement;
-      region.appendChild(wrapper);
-    }
-  }
-  render() {
-    this.newNotification && this.renderLiveRegion();
-    const snackbars = this.renderSnackbars();
-    const wrappingClass = this.parsedNotifications.length === 0 ? "empty" : "";
-    return (h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` },
-      h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }),
-      snackbars));
-  }
-  static get is() { return "wm-snackbar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-snackbar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-snackbar.css"]
-  }; }
-  static get properties() { return {
-    "notifications": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "notifications",
-      "reflect": true,
-      "defaultValue": "\"[]\""
-    }
-  }; }
-  static get events() { return [{
-      "method": "userFinishedSnack",
-      "name": "userFinishedSnack",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "Object",
-        "resolved": "Object",
-        "references": {
-          "Object": {
-            "location": "global"
-          }
+        this.notifications = "[]";
+        this.isTabbing = false;
+        this.announcement = "";
+    }
+    componentDidLoad() {
+        const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
+        snackObserver.observe(this.snackAreaEl, { childList: true });
+    }
+    handleSnackMutation(mutationRecord) {
+        const addedSnacks = Array.from(mutationRecord.addedNodes);
+        if (addedSnacks.length > 0) {
+            addedSnacks.forEach((s) => s.querySelector(".wm-snackbar").classList.add("grow"));
+            addedSnacks[0].scrollIntoView();
+        }
+    }
+    updateSnacks(newValue) {
+        const prevParsedNotifications = [...this.parsedNotifications];
+        this.parsedNotifications = [...JSON.parse(newValue)];
+        this.resetUpdatedNotifications(prevParsedNotifications);
+        if (prevParsedNotifications.length < this.parsedNotifications.length) {
+            const latestNotification = this.parsedNotifications[0];
+            const actionText = latestNotification.link || latestNotification.action || "";
+            // don't announce link/action if user is tabbing because it is focused after announcement
+            this.announce(`${latestNotification.message} ${this.isTabbing ? "" : actionText}`);
+            if (!actionText) {
+                const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
+                this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
+            }
+            else if (this.isTabbing) {
+                this.focusOnDismiss = document.activeElement ? document.activeElement : null;
+                this.stopTimer(latestNotification);
+                // allow snack to render before focusing
+                window.requestAnimationFrame(() => {
+                    const actionEl = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+                    actionEl.focus();
+                });
+            }
+        }
+    }
+    resetUpdatedNotifications(prevNotifications) {
+        let updatedNotifications = [];
+        prevNotifications.forEach((prevNotification) => {
+            this.parsedNotifications.forEach((newNotification) => {
+                if (newNotification.id == prevNotification.id && newNotification.message != prevNotification.message) {
+                    updatedNotifications.push(newNotification);
+                }
+            });
+        });
+        updatedNotifications.forEach((updatedNotification) => {
+            const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedNotification.id}`);
+            if (notifEl) {
+                notifEl.classList.remove("grow");
+                window.requestAnimationFrame(() => notifEl.classList.add("grow"));
+            }
+            this.stopTimer(updatedNotification);
+            const actionText = updatedNotification.link || updatedNotification.action;
+            if (actionText) {
+                this.announce(`${updatedNotification.message} ${this.isTabbing ? "" : actionText}`);
+            }
+            else {
+                this.announce(updatedNotification.message);
+                const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
+                this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
+            }
+        });
+    }
+    checkForTabbing(ev) {
+        if (ev.key === "Tab") {
+            this.isTabbing = true;
+        }
+    }
+    // Workaround for screenreader's triggering click event on "enter"
+    // This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
+    handleMouse() {
+        this.isTabbing = false;
+    }
+    snackDismissed(notification) {
+        this.endSnack(notification);
+        // Focus should only be returned if it was moved in the first place, i.e., there was a link/action and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
+        if ((notification.link || notification.action) && this.isTabbing && this.focusOnDismiss) {
+            this.focusOnDismiss.focus();
+            this.focusOnDismiss = null;
+        }
+    }
+    //Remove snack from notification list once timer runs out
+    snackExpired(expiredID) {
+        const expiredNotification = this.parsedNotifications.find((n) => n.id == expiredID);
+        if (expiredNotification) {
+            this.endSnack(expiredNotification);
+        }
+    }
+    endSnack(notification) {
+        //App listens for wmSnackbarSnackFinished event and deletes the emitted notification.
+        this.stopTimer(notification);
+        const notifEl = this.el.shadowRoot.querySelector(`#snack-${notification.id}`);
+        notifEl.classList.add("shrink");
+        setTimeout(() => {
+            // wait for animation to complete, then emit event for removal
+            this.wmSnackbarSnackFinished.emit({
+                id: notification.id,
+                message: notification.message,
+                link: notification.link,
+                newWindow: notification.newWindow,
+                action: notification.action,
+            });
+        }, 250);
+    }
+    snackLinkClicked(notification) {
+        //App listens for wmSnackbarActionTriggered event, deletes emitted notification, and takes over focus.
+        this.stopTimer(notification);
+        this.wmSnackbarActionTriggered.emit({
+            id: notification.id,
+            message: notification.message,
+            link: notification.link,
+            newWindow: notification.newWindow,
+            action: notification.action,
+        });
+    }
+    //Delete the timer corresponding to the dismissed notification
+    stopTimer(notification) {
+        if (this.timers[notification.id]) {
+            clearTimeout(this.timers[notification.id]);
+            delete this.timers[notification.id];
         }
-      }
-    }, {
-      "method": "userTriggeredAction",
-      "name": "userTriggeredAction",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "Object",
-        "resolved": "Object",
-        "references": {
-          "Object": {
-            "location": "global"
-          }
+    }
+    announce(message) {
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
         }
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "notifications",
-      "methodName": "updateSnacks"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "checkForTabbing",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseover",
-      "method": "handleMouse",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }]; }
+        this.announcement = message;
+    }
+    renderSnackbars() {
+        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link || notification.action ? 0 : -1, onFocus: () => (notification.link || notification.action) && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { role: "link", id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `${notification.link}${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+                this.snackLinkClicked(notification);
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" }))), (!notification.link && notification.action) && (h("button", { id: `action-${notification.id}`, class: "link", onClick: () => this.snackLinkClicked(notification), onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, notification.action))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link || notification.action ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link || notification.action ? 0 : -1, onFocus: () => (notification.link || notification.action) && this.snackDismissed(notification) })))));
+    }
+    render() {
+        return (h(Host, { key: '7f368facfe469c9f9581a2cce4a65cd0d9e52be2' }, h("div", { key: '04d52f03711d82f311915427891d1d1be1e56355', ref: (el) => (this.snackAreaEl = el), class: {
+                "list-wrapper": true,
+                "user-is-tabbing": this.isTabbing,
+                empty: this.parsedNotifications.length == 0,
+            } }, this.renderSnackbars()), h("div", { key: 'bb86f402615305aa19b72192e1ec0a57112be2d0', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+    }
+    static get is() { return "wm-snackbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-snackbar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-snackbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "notifications": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "notifications",
+                "reflect": true,
+                "defaultValue": "\"[]\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "announcement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmSnackbarSnackFinished",
+                "name": "wmSnackbarSnackFinished",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmSnackbarActionTriggered",
+                "name": "wmSnackbarActionTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "notifications",
+                "methodName": "updateSnacks"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "checkForTabbing",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mouseover",
+                "method": "handleMouse",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }