@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/menu/index.js

@@ -1,721 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#menu
-
-import {
-  cancelTick,
-  dispatchDomEvent,
-  isRtl,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
-  nextTick,
-} from '../../core/dom.js';
-
-import * as MenuItem from './item.js';
-
-class MenuStack {
-  /**
-   * @param {Element} element
-   * @param {Element} previousFocus
-   * @param {Object} [state]
-   * @param {Object} [previousState]
-   * @param {MouseEvent|PointerEvent} [originalEvent]
-   */
-  constructor(element, previousFocus, state, previousState, originalEvent) {
-    this.element = element;
-    this.previousFocus = previousFocus;
-    this.state = state;
-    this.previousState = previousState;
-    this.originalEvent = originalEvent;
-    this.pendingResizeOperation = null;
-  }
-}
-
-/** @type {MenuStack[]} */
-const OPEN_MENUS = [];
-
-export const HIDE_EVENT = 'mdw:menu-hide';
-
-/**
- * @param {Element} menuElement
- * @return {boolean} handled
- */
-export function hide(menuElement) {
-  if (menuElement.getAttribute('aria-hidden') === 'true') {
-    return false;
-  }
-  menuElement.setAttribute('aria-hidden', 'true');
-  let stackIndex = -1;
-  OPEN_MENUS.some((stack, index) => {
-    if (stack.element === menuElement) {
-      stackIndex = index;
-      return true;
-    }
-    return false;
-  });
-  if (stackIndex !== -1) {
-    const menuStack = OPEN_MENUS[stackIndex];
-    if (menuStack.previousFocus && menuStack.previousFocus instanceof HTMLElement) {
-      menuStack.previousFocus.focus();
-    }
-    OPEN_MENUS.splice(stackIndex, 1);
-    if (menuStack.state && window.history && window.history.state) {
-      // IE11 returns a cloned state object, not the original
-      if (menuStack.state.hash === window.history.state.hash) {
-        window.history.back();
-      }
-    }
-  }
-  if (!OPEN_MENUS.length) {
-    // eslint-disable-next-line no-use-before-define
-    window.removeEventListener('popstate', onPopState);
-    // eslint-disable-next-line no-use-before-define
-    window.removeEventListener('resize', onWindowResize);
-  }
-  dispatchDomEvent(menuElement, HIDE_EVENT);
-  return true;
-}
-
-/**
- * @param {Element} menuElement
- * @return {void}
- */
-export function setupARIA(menuElement) {
-  if (menuElement.hasAttribute('mdw-no-aria')) {
-    return;
-  }
-  if (!menuElement.hasAttribute('aria-hidden')) {
-    menuElement.setAttribute('aria-hidden', 'true');
-  }
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-divider'),
-    (el) => el.setAttribute('role', 'separator'));
-  menuElement.setAttribute('role', 'menu');
-  const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
-  if (popupElement) {
-    popupElement.setAttribute('role', 'none');
-  }
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-export function onMenuScroll(event) {
-  // JS needed for Safari
-  if (event.target === event.currentTarget) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-  if (event.type !== 'scroll') {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
-  if (element.scrollTop !== 0) {
-    element.scrollTop = 0;
-  }
-  if (element.scrollLeft !== 0) {
-    element.scrollLeft = 0;
-  }
-}
-
-/**
- * @param {MouseEvent|PointerEvent} event
- * @return {void}
- */
-export function onMenuClick(event) {
-  if (event.currentTarget === event.target && event.target instanceof HTMLElement) {
-    event.stopPropagation();
-    hide(event.target);
-  }
-}
-
-/**
- * @param {Element} menuElement
- * @param {HTMLElement} popupElement
- * @param {MouseEvent|PointerEvent} [event]
- * @param {boolean} [alignTarget=true]
- * @return {void}
- */
-export function updateMenuPosition(menuElement, popupElement, event, alignTarget) {
-  let top = 'auto';
-  let left = 'auto';
-  let transformOrigin = '';
-  const useAlignTarget = (alignTarget !== false);
-  const margin = useAlignTarget ? '0' : '';
-  const mdwPosition = menuElement.getAttribute('mdw-position') || '';
-  const mdwDirection = menuElement.getAttribute('mdw-direction') || '';
-  let alignTop = mdwPosition.indexOf('top') !== -1;
-  let alignBottom = mdwPosition.indexOf('bottom') !== -1;
-  let alignVCenter = mdwPosition.indexOf('vcenter') !== -1;
-
-  const alignStart = mdwPosition.indexOf('start') !== -1;
-  const alignEnd = mdwPosition.indexOf('end') !== -1;
-  let alignLeft = mdwPosition.indexOf('left') !== -1;
-  let alignRight = mdwPosition.indexOf('right') !== -1;
-  let alignHCenter = mdwPosition.indexOf('hcenter') !== -1;
-
-  let openUp = mdwDirection.indexOf('up') !== -1;
-  let openDown = mdwDirection.indexOf('down') !== -1;
-  const openNormal = mdwDirection.indexOf('normal') !== -1;
-  const openReverse = mdwDirection.indexOf('reverse') !== -1;
-  let openVCenter = mdwDirection.indexOf('vcenter') !== -1;
-  let openHCenter = mdwDirection.indexOf('hcenter') !== -1;
-  let openLtr = mdwDirection.indexOf('ltr') !== -1;
-  let openRtl = mdwDirection.indexOf('rtl') !== -1;
-
-  /** @type {HTMLElement} */
-  const target = (event.currentTarget || event.target);
-
-  let isPageRTL = null;
-  if (alignStart || alignEnd || openNormal || openReverse) {
-    // Using page-direction based values
-    isPageRTL = isRtl();
-    if (alignStart || alignEnd) {
-      if (alignStart) {
-        if (isPageRTL) {
-          alignRight = true;
-        } else {
-          alignLeft = true;
-        }
-      } else if (isPageRTL) {
-        alignLeft = true;
-      } else {
-        alignRight = true;
-      }
-    }
-    if (openNormal || openReverse) {
-      if (openNormal) {
-        if (isPageRTL) {
-          openRtl = true;
-        } else {
-          openLtr = true;
-        }
-      } else if (isPageRTL) {
-        openLtr = true;
-      } else {
-        openRtl = true;
-      }
-    }
-  }
-  const offsetTop = useAlignTarget ? 0 : -event.offsetY;
-  const offsetBottom = useAlignTarget ? target.clientHeight : event.offsetY;
-  const offsetLeft = useAlignTarget ? 0 : -event.offsetX;
-  const offsetRight = useAlignTarget ? target.clientWidth : event.offsetX;
-  const rect = target.getBoundingClientRect();
-  const pageX = rect.left;
-  const pageY = rect.top;
-
-  /* Automatic Positioning
-    *
-    * 9 Positions
-    *   3      7      4
-    *     ┌─────────┐
-    *     │         │
-    *   5 │    9    │ 6
-    *     │         │
-    *     └─────────┘
-    *   1      8      2
-    *
-    * 1: Bottom Left
-    * 2: Bottom Right
-    * 3: Top Left
-    * 4: Top Right
-    * 5: VCenter Left
-    * 6: VCenter Right
-    * 7: HCenter Top
-    * 8: HCenter Bottom
-    * 9: VCenter HCenter
-    *
-    * 9 Directions:
-    * a - Down LTR
-    * b - Down RTL
-    * c - Up LTR
-    * d - Up RTL
-    * e - LTR
-    * f - RTL
-    * g - Down
-    * h - Up
-    * i - Center
-    *
-    *
-    * 16 total combos
-    * 1a 1b 1c 1d  └↘ └↙ └↗ └↖
-    * 2a 2b 2c 2d  ┘↘ ┘↙ ┘↗ ┘↖
-    * 3a 3b 3c 3d  ┌↘ ┌↙ ┌↗ ┌↖
-    * 4a 4b 4c 4d  ┐↘ ┐↙ ┐↗ ┐↖
-    *
-    * Avoid using opposite angle
-    *
-    * 1a XX 1c 1d  └↘ ██ └↗ └↖
-    * XX 2b 2c 2d  ██ ┘↙ ┘↗ ┘↖
-    * 1a 3b 3c XX  ┌↘ ┌↙ ┌↗ ██
-    * 4a 4b XX 4d  ┐↘ ┐↙ ██ ┐↖
-    *
-    *
-    * Preference Order:
-    * - Flow from corner           1a 2b 3c 4d    └↘ ┘↙ ┌↗ ┐↖
-    * - Open adjacent to target    4a 3b 2c 1d    ┐↘ ┌↙ ┘↗ └↖
-    * - Overlay target             3a 4b 1c 2d    ┌↘ ┐↙ └↗ ┘↖
-    * - Open from horizontal side  5e 6f          │→ │←
-    * - Open from center           9i             █·
-    */
-
-  popupElement.style.setProperty('max-height', 'none');
-  const popupElementHeight = popupElement.clientHeight;
-  const popupElementWidth = popupElement.clientWidth;
-  const canOpenDownwardsFromBottom = !alignTop && !alignVCenter
-    && !openUp && !openVCenter
-    && popupElementHeight + (pageY + offsetBottom) <= window.innerHeight;
-  const canOpenDownwardsFromTop = !alignBottom && !alignVCenter
-    && !openUp && !openVCenter
-    && popupElementHeight + (pageY + offsetTop) <= window.innerHeight;
-  const canOpenUpwardsFromTop = !alignBottom && !alignVCenter && !openDown
-    && !openVCenter
-    && pageY + offsetTop >= popupElementHeight;
-  const canOpenUpwardsFromBottom = !alignTop && !alignVCenter && !openDown
-    && !openVCenter
-    && pageY + offsetBottom >= popupElementHeight;
-  const canOpenRightwardsFromLeft = !alignRight && !alignHCenter
-    && !openRtl && !openHCenter
-    && popupElementWidth + (pageX + offsetLeft) <= window.innerWidth;
-  const canOpenRightwardsFromRight = !alignLeft && !alignHCenter
-    && !openRtl && !openHCenter
-    && popupElementWidth + (pageX + offsetRight) <= window.innerWidth;
-  const canOpenLeftwardsFromRight = !alignLeft && !alignHCenter
-    && !openLtr && !openHCenter
-    && pageX + offsetRight >= popupElementWidth;
-  const canOpenLeftwardsFromLeft = !alignRight && !alignHCenter
-    && !openLtr && !openHCenter
-    && pageX + offsetLeft >= popupElementWidth;
-  const canOpenFromCenter = !alignLeft && !alignRight && !alignTop && !alignBottom
-    && !openUp && !openDown
-    && ((pageX + offsetLeft) / 2) >= (popupElementWidth / 2)
-    && (popupElementWidth / 2) + ((pageX + offsetLeft) / 2) <= window.innerWidth;
-  popupElement.style.removeProperty('max-height');
-  const candidates = [
-    canOpenDownwardsFromBottom && canOpenRightwardsFromLeft, // 1a └↘
-    canOpenDownwardsFromBottom && canOpenLeftwardsFromRight, // 2b ┘↙
-    canOpenUpwardsFromTop && canOpenRightwardsFromLeft, // 3c ┌↗
-    canOpenUpwardsFromTop && canOpenLeftwardsFromLeft, // 4d ┐↖
-    canOpenDownwardsFromTop && canOpenRightwardsFromRight, // 4a ┐↘
-    canOpenDownwardsFromTop && canOpenLeftwardsFromLeft, // 3b ┌↙
-    canOpenUpwardsFromBottom && canOpenRightwardsFromRight, // 2c ┘↗
-    canOpenUpwardsFromBottom && canOpenLeftwardsFromLeft, // 1d └↖
-    canOpenDownwardsFromTop && canOpenRightwardsFromLeft, // 3a ┌↘
-    canOpenDownwardsFromTop && canOpenLeftwardsFromRight, // 4b ┐↙
-    canOpenUpwardsFromBottom && canOpenRightwardsFromLeft, // 1c └↗
-    canOpenUpwardsFromBottom && canOpenRightwardsFromRight, // 2d ┘↖
-    canOpenRightwardsFromLeft, // 5e │→
-    canOpenLeftwardsFromRight, // 6f │←
-    canOpenFromCenter, // 9i █·
-  ].map((value, index) => {
-    if (value) {
-      return index + 1;
-    }
-    return 0;
-  }).filter((value) => value !== 0);
-  if (candidates.length) {
-    let candidateNumber;
-    if (isPageRTL === null) {
-      isPageRTL = isRtl();
-    }
-    if (isPageRTL) {
-      candidateNumber = [2, 1, 4, 3, 6, 5, 8, 7, 10, 9, 12, 11, 14, 13, 15]
-        .filter((number) => candidates.indexOf(number) !== -1)[0];
-    } else {
-      candidateNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
-        .filter((number) => candidates.indexOf(number) !== -1)[0];
-    }
-    if (candidateNumber == null) {
-      candidateNumber = isPageRTL ? 2 : 1;
-    }
-    switch (candidateNumber) {
-      // Position
-      default:
-      case 1:
-      case 8:
-      case 11:
-        alignBottom = true; alignLeft = true;
-        break;
-      case 2:
-      case 7:
-      case 12:
-        alignBottom = true; alignRight = true;
-        break;
-      case 3:
-      case 6:
-      case 9:
-        alignTop = true; alignLeft = true;
-        break;
-      case 4:
-      case 5:
-      case 10:
-        alignTop = true; alignRight = true;
-        break;
-      case 13:
-        alignVCenter = true; alignLeft = true;
-        break;
-      case 14:
-        alignVCenter = true; alignRight = true;
-        break;
-      case 15:
-        alignVCenter = true; alignHCenter = true;
-    }
-    switch (candidateNumber) {
-      // Direction
-      default:
-      case 1:
-      case 5:
-      case 9:
-        openDown = true; openLtr = true;
-        break;
-      case 2:
-      case 6:
-      case 10:
-        openDown = true; openRtl = true;
-        break;
-      case 3:
-      case 7:
-      case 11:
-        openUp = true; openLtr = true;
-        break;
-      case 4:
-      case 8:
-      case 12:
-        openUp = true; openRtl = true;
-        break;
-      case 13:
-        openLtr = true; openVCenter = true;
-        break;
-      case 14:
-        openRtl = true; openVCenter = true;
-        break;
-      case 15:
-        openHCenter = true; openVCenter = true;
-        break;
-    }
-  }
-
-  if (openLtr) {
-    if (alignRight) {
-      left = `${pageX + offsetRight}px`;
-    } else if (alignHCenter) {
-      left = `${pageX + ((offsetLeft + offsetRight) / 2)}px`;
-    } else {
-      left = `${pageX + offsetLeft}px`;
-    }
-    transformOrigin = 'left';
-  } else if (openHCenter) {
-    if (alignLeft) {
-      left = `${(pageX + offsetLeft) - (popupElementWidth / 2)}px`;
-    } else if (alignRight) {
-      left = `${(pageX + offsetRight) - (popupElementWidth / 2)}px`;
-    } else {
-      left = `${(pageX + ((offsetLeft + offsetRight) / 2)) - (popupElementWidth / 2)}px`;
-    }
-    transformOrigin = 'center';
-  } else {
-    if (alignLeft) {
-      left = `${(pageX + offsetLeft) - popupElementWidth}px`;
-    } else if (alignHCenter) {
-      left = `${(pageX + ((offsetLeft + offsetRight) / 2)) - popupElementWidth}px`;
-    } else {
-      left = `${(pageX + offsetRight) - popupElementWidth}px`;
-    }
-    transformOrigin = 'right';
-  }
-
-  if (openUp) {
-    if (alignBottom) {
-      top = `${(pageY + offsetBottom) - popupElement.clientHeight}px`;
-    } else if (alignVCenter) {
-      top = `${(pageY + ((offsetTop + offsetBottom) / 2)) - popupElement.clientHeight}px`;
-    } else {
-      top = `${(pageY + offsetTop) - popupElement.clientHeight}px`;
-    }
-    transformOrigin += ' bottom';
-  } else if (openVCenter) {
-    if (alignBottom) {
-      top = `${(pageY + offsetBottom) - (popupElement.clientHeight / 2)}px`;
-    } else if (alignTop) {
-      top = `${(pageY + offsetTop) - (popupElement.clientHeight / 2)}px`;
-    } else {
-      top = `${(pageY + ((offsetTop + offsetBottom) / 2)) - (popupElement.clientHeight / 2)}px`;
-    }
-    transformOrigin += ' center';
-  } else {
-    if (alignTop) {
-      top = `${pageY + offsetTop}px`;
-    } else if (alignVCenter) {
-      top = `${pageY + ((offsetTop + offsetBottom) / 2)}px`;
-    } else {
-      top = `${pageY + offsetBottom}px`;
-    }
-    transformOrigin += ' top';
-  }
-
-  popupElement.style.setProperty('top', top);
-  popupElement.style.setProperty('left', left);
-  popupElement.style.setProperty('right', 'auto');
-  popupElement.style.setProperty('bottom', 'auto');
-  popupElement.style.setProperty('margin', margin);
-  popupElement.style.setProperty('transform-origin', transformOrigin);
-}
-
-/**
- * @return {void}
- */
-export function onWindowResize() {
-  const lastOpenMenu = OPEN_MENUS[OPEN_MENUS.length - 1];
-  if (!lastOpenMenu || !lastOpenMenu.originalEvent) {
-    return;
-  }
-  if (lastOpenMenu.pendingResizeOperation) {
-    cancelTick(lastOpenMenu.pendingResizeOperation);
-  }
-  lastOpenMenu.pendingResizeOperation = nextTick(() => {
-    updateMenuPosition(
-      lastOpenMenu.element,
-      /** @type {HTMLElement} */ (lastOpenMenu.element.getElementsByClassName('mdw-menu__popup')[0]),
-      lastOpenMenu.originalEvent,
-    );
-    lastOpenMenu.pendingResizeOperation = null;
-  });
-}
-
-/**
- * @param {PopStateEvent} event
- * @return {void}
- */
-export function onPopState(event) {
-  if (!event.state) {
-    return;
-  }
-  const lastOpenMenu = OPEN_MENUS[OPEN_MENUS.length - 1];
-  if (!lastOpenMenu || !lastOpenMenu.previousState) {
-    return;
-  }
-  if ((lastOpenMenu.previousState === event.state) || Object.keys(event.state)
-    .every((key) => event.state[key] === lastOpenMenu.previousState[key])) {
-    hide(lastOpenMenu.element);
-  }
-}
-
-/**
- * @param {Element} menu
- * @param {boolean} [backwards=false]
- * @return {void}
- */
-export function selectNextMenuItem(menu, backwards) {
-  /** @type {HTMLCollectionOf<HTMLElement>} */
-  const menuItems = (menu.getElementsByClassName('mdw-menu__item'));
-  let foundTarget = false;
-  /** @type {HTMLElement} */
-  let candidate = null;
-  /** @type {HTMLElement} */
-  let firstFocusableItem = null;
-  let lastFocusableElement = null;
-  const target = document.activeElement;
-
-  // Hidden elements cannot be focused
-  // Disabled elements cannot be focused on IE11
-  // Skip elements that fail to receive focus
-  iterateSomeOfArrayLike(menuItems, (el) => {
-    el.focus();
-    const focusable = (document.activeElement === el);
-    if (focusable) {
-      if (!firstFocusableItem) {
-        firstFocusableItem = el;
-      }
-      lastFocusableElement = el;
-    }
-    if (el === target) {
-      foundTarget = true;
-      if (backwards && candidate) {
-        return true;
-      }
-      return false;
-    }
-    if (backwards) {
-      if (focusable) {
-        candidate = el;
-      }
-      return false;
-    }
-    if (foundTarget) {
-      if (focusable) {
-        candidate = el;
-        return true;
-      }
-      return false;
-    }
-    return false;
-  });
-  if (!candidate) {
-    if (backwards) {
-      candidate = lastFocusableElement;
-    } else {
-      candidate = firstFocusableItem;
-    }
-  }
-  if (candidate && document.activeElement !== candidate) {
-    candidate.focus();
-  }
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  /** @type {HTMLElement} */
-  const menuElement = (event.currentTarget);
-  if (!menuElement || menuElement.getAttribute('aria-hidden') === 'true') {
-    return;
-  }
-
-  if (event.key === 'ArrowDown' || (event.key === 'Down')) {
-    event.stopPropagation();
-    event.preventDefault();
-    selectNextMenuItem(menuElement, false);
-    return;
-  }
-  if (event.key === 'ArrowUp' || (event.key === 'Up')) {
-    event.stopPropagation();
-    event.preventDefault();
-    selectNextMenuItem(menuElement, true);
-    return;
-  }
-  if (event.key === 'Tab') {
-    // Hide menu allowing focus to revert to calling element
-    // To then allow browser default Tab interaction
-    // Unless menu hiding is cancelled
-    if (!hide(menuElement)) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    return;
-  }
-  if (event.key === 'Escape' || event.key === 'Esc') {
-    event.stopPropagation();
-    event.preventDefault();
-    hide(menuElement);
-  }
-}
-
-/**
- * @param {Element} menuElement
- * @return {void}
- */
-export function refreshMenuItems(menuElement) {
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-menu__item'), (menuItem) => {
-    menuItem.setAttribute('tabindex', '-1');
-    MenuItem.attach(menuItem);
-  });
-  const popupElement = menuElement.getElementsByClassName('mdw-menu__popup')[0];
-  popupElement.setAttribute('tabindex', '-1');
-}
-
-/**
- * @param {Element} menuElement
- * @return {void}
- */
-export function attach(menuElement) {
-  menuElement.setAttribute('mdw-menu-js', '');
-  menuElement.addEventListener('click', onMenuClick);
-  menuElement.addEventListener('scroll', onMenuScroll);
-  menuElement.addEventListener('touchmove', onMenuScroll);
-  menuElement.addEventListener('wheel', onMenuScroll);
-  menuElement.addEventListener('keydown', onKeyDown);
-  setupARIA(menuElement);
-}
-
-/**
- * @param {Element} menuElement
- * @param {MouseEvent|PointerEvent} [event]
- * @param {boolean} [alignTarget=true]
- * @return {boolean} handled
- */
-export function show(menuElement, event, alignTarget) {
-  if (event && event.currentTarget instanceof HTMLAnchorElement) {
-    // Prevent anchor link
-    event.preventDefault();
-  }
-  /** @type {HTMLElement} */
-  const popupElement = (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
-  let changed = false;
-  if (event) {
-    updateMenuPosition(menuElement, popupElement, event, alignTarget);
-  } else {
-    popupElement.style.removeProperty('top');
-    popupElement.style.removeProperty('left');
-    popupElement.style.removeProperty('right');
-    popupElement.style.removeProperty('bottom');
-    popupElement.style.removeProperty('margin');
-    popupElement.style.removeProperty('transform-origin');
-    popupElement.style.removeProperty('position');
-    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
-      popupElement.removeAttribute('style');
-    }
-  }
-  if (menuElement.getAttribute('aria-hidden') !== 'false') {
-    menuElement.setAttribute('aria-hidden', 'false');
-    changed = true;
-  }
-  if (changed) {
-    attach(menuElement);
-    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;
-      window.history.pushState(newState, document.title);
-      window.addEventListener('popstate', onPopState);
-      window.addEventListener('resize', onWindowResize);
-    }
-    const menuStack = new MenuStack(menuElement, previousFocus, newState, previousState, event);
-    OPEN_MENUS.push(menuStack);
-    refreshMenuItems(menuElement);
-    if (event && !event.detail && ('pointerType' in event) && !event.pointerType) {
-      // Triggered with keyboard event
-      selectNextMenuItem(menuElement);
-    } else {
-      popupElement.focus();
-    }
-  }
-  return changed;
-}
-
-/**
- * @param {Element} menuElement
- * @return {void}
- */
-export function detach(menuElement) {
-  hide(menuElement);
-  menuElement.removeEventListener('click', onMenuClick);
-  menuElement.removeEventListener('scroll', onMenuScroll);
-  menuElement.removeEventListener('touchmove', onMenuScroll);
-  menuElement.removeEventListener('wheel', onMenuScroll);
-  menuElement.addEventListener('keydown', onKeyDown);
-  menuElement.removeAttribute('mdw-menu-js');
-  /** @type {HTMLElement} */
-  const popupElement = (menuElement.getElementsByClassName('mdw-menu__popup')[0]);
-  if (popupElement) {
-    popupElement.style.removeProperty('top');
-    popupElement.style.removeProperty('left');
-    popupElement.style.removeProperty('right');
-    popupElement.style.removeProperty('bottom');
-    popupElement.style.removeProperty('margin');
-    popupElement.style.removeProperty('transform-origin');
-    popupElement.style.removeProperty('position');
-    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
-      popupElement.removeAttribute('style');
-    }
-  }
-  iterateArrayLike(menuElement.getElementsByClassName('mdw-menu__item'), MenuItem.detach);
-}