@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/dialog/index.js

@@ -2,25 +2,24 @@
 
 import {
   dispatchDomEvent,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
   findElementParentByClassName,
   getChildElementByClass,
+  iterateArrayLike,
+  iterateSomeOfArrayLike,
   setTextNode,
-} from '../../core/dom';
-
-import * as Button from '../button/index';
+} from '../../core/dom.js';
+import * as Button from '../button/index.js';
 
 class DialogStack {
   /**
    * @param {Element} element
    * @param {Element} previousFocus
-   * @param {Object=} state
-   * @param {Object=} previousState
+   * @param {Object} [state]
+   * @param {Object} [previousState]
    */
   constructor(element, previousFocus, state, previousState) {
-    this.element = element;
-    this.previousFocus = previousFocus;
+    this.element = (element);
+    this.previousFocus = (previousFocus);
     this.state = state;
     this.previousState = previousState;
   }
@@ -30,55 +29,29 @@ class DialogStack {
 const OPEN_DIALOGS = [];
 
 export const CANCEL_EVENT = 'mdw:dialog-cancel';
-
 export const CONFIRM_EVENT = 'mdw:dialog-confirm';
-
 export const CUSTOM_EVENT = 'mdw:dialog-custom';
-
 export const DISMISS_EVENT = 'mdw:dialog-dismiss';
 
 /**
- * @param {Element} element
+ * @param {TransitionEvent} event
  * @return {void}
  */
-export function attach(element) {
-  element.setAttribute('mdw-js', '');
-
-  let dialogCloser = getChildElementByClass(element, 'mdw-dialog__close');
-  if (!dialogCloser) {
-    dialogCloser = document.createElement('div');
-    dialogCloser.className = 'mdw-dialog__close';
-    if (element.firstChild) {
-      element.insertBefore(dialogCloser, element.firstChild);
-    } else {
-      element.appendChild(dialogCloser);
-    }
+export function onTransitionEnd(event) {
+  if (event.propertyName !== 'opacity') {
+    return;
   }
-  dialogCloser.addEventListener('click', onCancelClick);
-  const popup = getChildElementByClass(element, 'mdw-dialog__popup');
-  popup.addEventListener('keydown', onKeyDown);
-  const buttons = popup.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-  let foundConfirmButton = false;
-  let foundCancelButton = false;
-  iterateArrayLike(buttons, (button) => {
-    Button.attach(button);
-    if (button.hasAttribute('mdw-custom')) {
-      button.addEventListener('click', onCustomButtonClick);
-      return;
-    }
-    if (!foundConfirmButton) {
-      button.addEventListener('click', onConfirmClick);
-      foundConfirmButton = true;
-      return;
-    }
-    if (!foundCancelButton) {
-      button.addEventListener('click', onCancelClick);
-      foundCancelButton = true;
-      return;
-    }
-    button.addEventListener('click', onCustomButtonClick);
-  });
-  setupARIA(element);
+  /** @type {HTMLElement} */
+  const dialogElement = (event.currentTarget);
+  if (dialogElement.getAttribute('aria-hidden') !== 'true') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  if (!popupElement) {
+    return;
+  }
+  popupElement.style.removeProperty('display');
 }
 
 /**
@@ -107,171 +80,6 @@ export function setupARIA(dialogElement) {
   }
 }
 
-/**
- * @param {Element} dialogElement
- * @return {void}
- */
-export function detach(dialogElement) {
-  dialogElement.removeAttribute('mdw-js');
-  const dialogCloser = getChildElementByClass(dialogElement, 'mdw-dialog__close');
-  if (dialogCloser) {
-    dialogCloser.removeEventListener('click', onCancelClick);
-  }
-  /** @type {HTMLElement} */
-  const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
-  if (popupElement) {
-    popupElement.removeEventListener('keydown', onKeyDown);
-    popupElement.style.removeProperty('transform-origin');
-    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
-      popupElement.removeAttribute('style');
-    }
-  }
-  const buttons = popupElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-  iterateArrayLike(buttons, (button) => {
-    Button.detach(button);
-    button.removeEventListener('click', onConfirmClick);
-    button.removeEventListener('click', onCancelClick);
-    button.removeEventListener('click', onCustomButtonClick);
-  });
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-export function onCancelClick(event) {
-  if (event && event.currentTarget instanceof HTMLAnchorElement) {
-    event.preventDefault();
-  }
-  /** @type {HTMLElement} */
-  const cancelElement = (event.currentTarget);
-  if (dispatchDomEvent(cancelElement, CANCEL_EVENT)) {
-    const dialogElement = findElementParentByClassName(cancelElement, 'mdw-dialog');
-    hide(dialogElement);
-  }
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-export function onConfirmClick(event) {
-  if (event && event.currentTarget instanceof HTMLAnchorElement) {
-    event.preventDefault();
-  }
-  /** @type {HTMLElement} */
-  const button = (event.currentTarget);
-  if (dispatchDomEvent(button, CONFIRM_EVENT)) {
-    const dialogElement = findElementParentByClassName(button, 'mdw-dialog');
-    hide(dialogElement);
-  }
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-export function onCustomButtonClick(event) {
-  if (event && event.currentTarget instanceof HTMLAnchorElement) {
-    event.preventDefault();
-  }
-  /** @type {HTMLElement} */
-  const button = (event.currentTarget);
-  if (dispatchDomEvent(button, CUSTOM_EVENT)) {
-    const dialogElement = findElementParentByClassName(button, 'mdw-dialog');
-    hide(dialogElement);
-  }
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  if (event.key === 'Tab') {
-    handleTabKeyPress(event);
-    return;
-  }
-  if (event.key === 'Escape' || event.key === 'Esc') {
-    onEscapeKeyDown(event);
-  }
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onEscapeKeyDown(event) {
-  event.stopPropagation();
-  event.preventDefault();
-  /** @type {HTMLElement} */
-  const popupElement = (event.currentTarget);
-  const dialogElement = findElementParentByClassName(popupElement, 'mdw-dialog');
-  cancel(dialogElement);
-}
-
-/**
- * @param {PopStateEvent} event
- * @return {void}
- */
-export function onPopState(event) {
-  if (!event.state) {
-    return;
-  }
-  const lastOpenDialog = OPEN_DIALOGS[OPEN_DIALOGS.length - 1];
-  if (!lastOpenDialog || !lastOpenDialog.previousState) {
-    return;
-  }
-  if ((lastOpenDialog.previousState === event.state) || Object.keys(event.state)
-    .every(key => event.state[key] === lastOpenDialog.previousState[key])) {
-    if (dispatchDomEvent(lastOpenDialog.element, CANCEL_EVENT)) {
-      hide(lastOpenDialog.element);
-    } else {
-      // Revert pop state by pushing state again
-      const title = getTitleText(lastOpenDialog.element);
-      window.history.pushState(lastOpenDialog.state, title);
-    }
-  }
-}
-
-/**
- * @param {Element} dialogElement
- * @return {void}
- */
-export function cancel(dialogElement) {
-  if (dispatchDomEvent(dialogElement, CANCEL_EVENT)) {
-    hide(dialogElement);
-  }
-}
-
-/**
- * @param {Element} dialogElement
- * @return {void}
- */
-export function confirm(dialogElement) {
-  if (dispatchDomEvent(dialogElement, CONFIRM_EVENT)) {
-    hide(dialogElement);
-  }
-}
-
-/**
- * @param {Element} dialogElement
- * @return {string}
- */
-export function getTitleText(dialogElement) {
-  let title = 'Dialog';
-  const titleElement = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
-  if (titleElement) {
-    title = titleElement.textContent;
-  } else {
-    const bodyElement = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
-    if (bodyElement) {
-      title = bodyElement.textContent;
-    }
-  }
-  return title;
-}
-
 /**
  * @param {Element} dialogElement
  * @return {boolean} handled
@@ -284,6 +92,7 @@ export function hide(dialogElement) {
     return false;
   }
   dialogElement.setAttribute('aria-hidden', 'true');
+  // .mdw-dialog__popup hidden by transitionEnd event
   let stackIndex = -1;
   OPEN_DIALOGS.some((stack, index) => {
     if (stack.element === dialogElement) {
@@ -294,7 +103,7 @@ export function hide(dialogElement) {
   });
   if (stackIndex !== -1) {
     const stack = OPEN_DIALOGS[stackIndex];
-    if (stack.previousFocus) {
+    if (stack.previousFocus && stack.previousFocus instanceof HTMLElement) {
       if (findElementParentByClassName(document.activeElement, 'mdw-dialog') === dialogElement) {
         // Only pop focus back when hiding a dialog with focus within itself.
         try {
@@ -313,6 +122,7 @@ export function hide(dialogElement) {
     }
   }
   if (!OPEN_DIALOGS.length) {
+    // eslint-disable-next-line no-use-before-define
     window.removeEventListener('popstate', onPopState);
   }
   return true;
@@ -320,59 +130,66 @@ export function hide(dialogElement) {
 
 /**
  * @param {Element} dialogElement
- * @param {(MouseEvent|KeyboardEvent|PointerEvent)=} event
- * @return {boolean} handled
+ * @return {void}
  */
-export function show(dialogElement, event) {
+export function cancel(dialogElement) {
+  if (dispatchDomEvent(dialogElement, CANCEL_EVENT)) {
+    hide(dialogElement);
+  }
+}
+
+/**
+ * @param {Element} dialogElement
+ * @return {void}
+ */
+export function confirm(dialogElement) {
+  if (dispatchDomEvent(dialogElement, CONFIRM_EVENT)) {
+    hide(dialogElement);
+  }
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onCancelClick(event) {
   if (event && event.currentTarget instanceof HTMLAnchorElement) {
-    // Prevent anchor link
     event.preventDefault();
   }
-  let changed = false;
+  /** @type {HTMLElement} */
+  const cancelElement = (event.currentTarget);
+  const dialogElement = findElementParentByClassName(cancelElement, 'mdw-dialog');
+  cancel(dialogElement);
+}
 
-  updateTransformOrigin(dialogElement, event);
-  if (dialogElement.getAttribute('aria-hidden') !== 'false') {
-    dialogElement.setAttribute('aria-hidden', 'false');
-    changed = true;
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onConfirmClick(event) {
+  if (event && event.currentTarget instanceof HTMLAnchorElement) {
+    event.preventDefault();
   }
-  if (changed) {
-    attach(dialogElement);
-    const previousFocus = document.activeElement;
-    const newState = { hash: Math.random().toString(36).substr(2, 16) };
-    let previousState = null;
-    if (window.history && window.history.pushState) {
-      if (!window.history.state) {
-        // Create new previous state
-        window.history.replaceState({
-          hash: Math.random().toString(36).substr(2, 16),
-        }, document.title);
-      }
-      previousState = window.history.state;
-      const title = getTitleText(dialogElement);
-      window.history.pushState(newState, title);
-      window.addEventListener('popstate', onPopState);
-    }
-    const dialogStack = new DialogStack(dialogElement, previousFocus, newState, previousState);
-    OPEN_DIALOGS.push(dialogStack);
-    const focusElement = dialogElement.querySelector('[mdw-autofocus]');
-    try {
-      if (focusElement) {
-        if (event && event.target instanceof Element) {
-          const callerOverlayTouch = event.target.getAttribute('mdw-overlay-touch');
-          if (callerOverlayTouch != null) {
-            focusElement.setAttribute('mdw-overlay-touch', callerOverlayTouch);
-          }
-        }
-        focusElement.focus();
-      } else {
-        dialogElement.focus();
-      }
-    } catch (e) {
-      console.error(e);
-      // Failed to focus
-    }
+  /** @type {HTMLElement} */
+  const button = (event.currentTarget);
+  const dialogElement = findElementParentByClassName(button, 'mdw-dialog');
+  confirm(dialogElement);
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onCustomButtonClick(event) {
+  if (event && event.currentTarget instanceof HTMLAnchorElement) {
+    event.preventDefault();
+  }
+  /** @type {HTMLElement} */
+  const button = (event.currentTarget);
+  if (dispatchDomEvent(button, CUSTOM_EVENT)) {
+    const dialogElement = findElementParentByClassName(button, 'mdw-dialog');
+    hide(dialogElement);
   }
-  return changed;
 }
 
 /**
@@ -416,7 +233,7 @@ export function handleTabKeyPress(event) {
   }
   event.stopPropagation();
   event.preventDefault();
-  if (candidate) {
+  if (candidate && candidate instanceof HTMLElement) {
     try {
       candidate.focus();
     } catch (e) {
@@ -425,9 +242,78 @@ export function handleTabKeyPress(event) {
   }
 }
 
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onEscapeKeyDown(event) {
+  event.stopPropagation();
+  event.preventDefault();
+  /** @type {HTMLElement} */
+  const popupElement = (event.currentTarget);
+  const dialogElement = findElementParentByClassName(popupElement, 'mdw-dialog');
+  cancel(dialogElement);
+}
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onKeyDown(event) {
+  if (event.key === 'Tab') {
+    handleTabKeyPress(event);
+    return;
+  }
+  if (event.key === 'Escape' || event.key === 'Esc') {
+    onEscapeKeyDown(event);
+  }
+}
+
+/**
+ * @param {Element} dialogElement
+ * @return {string}
+ */
+export function getTitleText(dialogElement) {
+  let title = 'Dialog';
+  const titleElement = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
+  if (titleElement) {
+    title = titleElement.textContent;
+  } else {
+    const bodyElement = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
+    if (bodyElement) {
+      title = bodyElement.textContent;
+    }
+  }
+  return title;
+}
+
+/**
+ * @param {PopStateEvent} event
+ * @return {void}
+ */
+export function onPopState(event) {
+  if (!event.state) {
+    return;
+  }
+  const lastOpenDialog = OPEN_DIALOGS[OPEN_DIALOGS.length - 1];
+  if (!lastOpenDialog || !lastOpenDialog.previousState) {
+    return;
+  }
+  if ((lastOpenDialog.previousState === event.state) || Object.keys(event.state)
+    .every((key) => event.state[key] === lastOpenDialog.previousState[key])) {
+    if (dispatchDomEvent(lastOpenDialog.element, CANCEL_EVENT)) {
+      hide(lastOpenDialog.element);
+    } else {
+      // Revert pop state by pushing state again
+      const title = getTitleText(lastOpenDialog.element);
+      window.history.pushState(lastOpenDialog.state, title);
+    }
+  }
+}
+
 /**
  * @param {Element} dialogElement
- * @param {(DocumentFragment|string)=} content
+ * @param {(DocumentFragment|string)} [content]
  * @return {void}
  */
 export function updateTitle(dialogElement, content) {
@@ -456,7 +342,6 @@ export function updateTitle(dialogElement, content) {
   }
 }
 
-
 /**
  * @param {Element} dialogElement
  * @param {string[]} texts
@@ -471,7 +356,7 @@ export function updateButtonText(dialogElement, texts) {
 
 /**
  * @param {Element} dialogElement
- * @param {(DocumentFragment|string)=} content
+ * @param {(DocumentFragment|string)} [content]
  * @return {void}
  */
 export function updateBody(dialogElement, content) {
@@ -506,15 +391,104 @@ export function updateBody(dialogElement, content) {
   }
 }
 
+/**
+ * @param {Element} dialogElement
+ * @param {Event} [event]
+ * @return {void}
+ */
+export function updateTransformOrigin(dialogElement, event) {
+  /** @type {HTMLElement} */
+  const popup = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  popup.style.removeProperty('transform-origin');
+  if (!event) {
+    return;
+  }
+  const hadLayer = popup.style.getPropertyValue('display') != null;
+  if (!hadLayer) {
+    popup.style.setProperty('display', 'flex');
+  }
+  let pageX;
+  let pageY;
+  const dialogRect = dialogElement.getBoundingClientRect();
+  if ('pageX' in event && 'pageY' in event) {
+    ({ pageX, pageY } = event);
+    pageX -= window.pageXOffset;
+    pageY -= window.pageYOffset;
+  } else {
+    /** @type {Element} */
+    const target = (event.target || event.currentTarget);
+    if (target instanceof Element === false) {
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    if (!rect.width && !rect.width && !rect.left && !rect.top) {
+      return;
+    }
+    pageX = rect.left + (rect.width / 2);
+    pageY = rect.top + (rect.height / 2);
+  }
+  const transformOriginX = pageX - dialogRect.left - popup.offsetLeft;
+  const transformOriginY = pageY - dialogRect.top - popup.offsetTop;
+  popup.style.setProperty('transform-origin', `${transformOriginX}px ${transformOriginY}px`);
+  if (!hadLayer) {
+    popup.style.removeProperty('display');
+  }
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('mdw-dialog-js', '');
+  element.addEventListener('transitionend', onTransitionEnd);
+
+  let dialogCloser = getChildElementByClass(element, 'mdw-dialog__close');
+  if (!dialogCloser) {
+    dialogCloser = document.createElement('div');
+    dialogCloser.className = 'mdw-dialog__close';
+    if (element.firstChild) {
+      element.insertBefore(dialogCloser, element.firstChild);
+    } else {
+      element.appendChild(dialogCloser);
+    }
+  }
+  dialogCloser.addEventListener('click', onCancelClick);
+  const popup = getChildElementByClass(element, 'mdw-dialog__popup');
+  popup.addEventListener('keydown', onKeyDown);
+  const buttons = popup.querySelectorAll('.mdw-dialog__button-area .mdw-button');
+  let foundConfirmButton = false;
+  let foundCancelButton = false;
+  iterateArrayLike(buttons, (button) => {
+    Button.attach(button);
+    if (button.hasAttribute('mdw-custom')) {
+      button.addEventListener('click', onCustomButtonClick);
+      return;
+    }
+    if (!foundConfirmButton) {
+      button.addEventListener('click', onConfirmClick);
+      foundConfirmButton = true;
+      return;
+    }
+    if (!foundCancelButton) {
+      button.addEventListener('click', onCancelClick);
+      foundCancelButton = true;
+      return;
+    }
+    button.addEventListener('click', onCustomButtonClick);
+  });
+  setupARIA(element);
+}
+
 /**
  * @param {Object} options
- * @param {(DocumentFragment|string)=} options.title
- * @param {(DocumentFragment|string)=} options.body
- * @param {string[]=} options.buttons
- * @param {boolean=} options.stacked
- * @param {Element=} options.parent
+ * @param {(DocumentFragment|string)} [options.title]
+ * @param {(DocumentFragment|string)} [options.body]
+ * @param {string[]} [options.buttons]
+ * @param {boolean} [options.stacked=false]
+ * @param {Element} [options.parent]
  * @param {boolean} [options.custom=false] Use custom button events
- * @param {(string|number)=} [options.autofocus=0] Autofocus button by index or text
+ * @param {(string|number)} [options.autofocus=0] Autofocus button by index or text
  * @return {Element}
  */
 export function create(options) {
@@ -563,36 +537,90 @@ export function create(options) {
 
 /**
  * @param {Element} dialogElement
- * @param {(MouseEvent|KeyboardEvent|PointerEvent)=} event
+ * @param {Event} [event]
+ * @return {boolean} handled
+ */
+export function show(dialogElement, event) {
+  if (event && event.type === 'click' && event.currentTarget instanceof HTMLAnchorElement) {
+    // Prevent anchor link
+    event.preventDefault();
+  }
+  let changed = false;
+
+  if (dialogElement.getAttribute('aria-hidden') !== 'false') {
+    dialogElement.setAttribute('aria-hidden', 'false');
+    /** @type {HTMLElement} */
+    const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+    popupElement.style.setProperty('display', 'flex');
+    changed = true;
+  }
+
+  updateTransformOrigin(dialogElement, event);
+
+  if (!changed) {
+    return false;
+  }
+  attach(dialogElement);
+  const previousFocus = document.activeElement;
+  const newState = { hash: Math.random().toString(36).substr(2, 16) };
+  let previousState = null;
+  if (window.history && window.history.pushState) {
+    if (!window.history.state) {
+      // Create new previous state
+      window.history.replaceState({
+        hash: Math.random().toString(36).substr(2, 16),
+      }, document.title);
+    }
+    previousState = window.history.state;
+    const title = getTitleText(dialogElement);
+    window.history.pushState(newState, title);
+    window.addEventListener('popstate', onPopState);
+  }
+  const dialogStack = new DialogStack(dialogElement, previousFocus, newState, previousState);
+  OPEN_DIALOGS.push(dialogStack);
+  const focusElement = dialogElement.querySelector('[mdw-autofocus]');
+  try {
+    if (focusElement && focusElement instanceof HTMLElement) {
+      if (focusElement.scrollIntoView) {
+        focusElement.scrollIntoView();
+      }
+      focusElement.focus();
+    } else if (dialogElement instanceof HTMLElement) {
+      dialogElement.focus();
+    }
+  } catch (e) {
+    // Failed to focus
+  }
+  return true;
+}
+
+/**
+ * @param {Element} dialogElement
  * @return {void}
  */
-export function updateTransformOrigin(dialogElement, event) {
-  /** @type {HTMLElement} */
-  const popup = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
-  popup.style.removeProperty('transform-origin');
-  if (!event) {
-    return;
+export function detach(dialogElement) {
+  dialogElement.removeEventListener('transitionend', onTransitionEnd);
+  dialogElement.removeAttribute('mdw-dialog-js');
+  const dialogCloser = getChildElementByClass(dialogElement, 'mdw-dialog__close');
+  if (dialogCloser) {
+    dialogCloser.removeEventListener('click', onCancelClick);
   }
-  let pageX;
-  let pageY;
-  const dialogRect = dialogElement.getBoundingClientRect();
-  if ('pageX' in event && 'pageY' in event) {
-    ({ pageX, pageY } = event);
-    pageX -= window.pageXOffset;
-    pageY -= window.pageYOffset;
-  } else {
-    /** @type {Element} */
-    const target = (event.currentTarget || event.target);
-    const rect = target.getBoundingClientRect();
-    if (!rect.width && !rect.width && !rect.left && !rect.top) {
-      return;
+  /** @type {HTMLElement} */
+  const popupElement = (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  if (popupElement) {
+    popupElement.removeEventListener('keydown', onKeyDown);
+    popupElement.style.removeProperty('transform-origin');
+    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
+      popupElement.removeAttribute('style');
     }
-    pageX = rect.left + (rect.width / 2);
-    pageY = rect.top + (rect.height / 2);
   }
-  const transformOriginX = pageX - dialogRect.left - popup.offsetLeft;
-  const transformOriginY = pageY - dialogRect.top - popup.offsetTop;
-  popup.style.setProperty('transform-origin', `${transformOriginX}px ${transformOriginY}px`);
+  const buttons = popupElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
+  iterateArrayLike(buttons, (button) => {
+    Button.detach(button);
+    button.removeEventListener('click', onConfirmClick);
+    button.removeEventListener('click', onCancelClick);
+    button.removeEventListener('click', onCustomButtonClick);
+  });
 }
 
 // Aliases