@massds/mayflower-react/dist/HamburgerNav/hooks.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports.useMenuButtonEffects = exports.useJumpToSearch = exports.useHamburgerNavKeydown = void 0;
var _react = _interopRequireDefault(require("react"));
var _focusTrapping = _interopRequireDefault(require("../utilities/focusTrapping.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var useHamburgerNavKeydown = exports.useHamburgerNavKeydown = function useHamburgerNavKeydown(closeMenu, topLevelItems) {
  // Define this using useCallback so this event listener
  // can be deleted when the parent component unmounts.
  var keyDown = _react["default"].useCallback(function (e) {
    // check if menu open
    var menuOpenClass = 'show-menu';
    var body = document.querySelector('body');
    var menuOpen = body.classList.value.indexOf(menuOpenClass) > 0 || body.classList.value === menuOpenClass;
    var focusedElement = document.activeElement;
    var topLevelItemsArray = topLevelItems && Array.from(topLevelItems);
    var key = e.key;
    var action = {
      left: key === 'Left' || key === 'ArrowLeft',
      // left arrow
      right: key === 'Right' || key === 'ArrowRight',
      // right arrow
      esc: key === 'Esc' || key === 'Escape' // esc
    };
    if (menuOpen) {
      // trap focus only when menu is open
      (0, _focusTrapping["default"])({
        focusableSelectors: '[role="menuitem"], .ma__utility-nav__link > a, .ma__utility-nav__item > button, .ma__utility-panel__item > span > a',
        closeButtonSelector: '.ma__header__hamburger__menu-button',
        modalSelector: '.ma__header__hamburger__nav-container',
        keyEvent: e
      });
      if ((action.left || action.right) && topLevelItems) {
        var topLevelItemsCount = topLevelItems.length;
        var focusIndex = topLevelItemsArray.findIndex(function (el) {
          return el === focusedElement;
        });
        focusIndex += action.left ? -1 : 1;
        // Wrap around if at the end of the set of menus.
        focusIndex = (focusIndex + topLevelItemsCount) % topLevelItemsCount;
        topLevelItems[focusIndex].focus();
      }
      if (action.esc) {
        // If no submenu is expanded and if the focus in on the top level items, escape key closes the hamburger menu tray.
        var target = e.target;
        var focusIsOnTopLevel = topLevelItemsArray.includes(target);
        var targetExpandContainer = target.nextElementSibling;
        var targetExpanded = targetExpandContainer && targetExpandContainer.classList.contains('is-closed');
        if ((targetExpanded || targetExpanded === null) && focusIsOnTopLevel) {
          closeMenu();
        }
      }
    }
  }, [closeMenu, topLevelItems]);
  _react["default"].useEffect(function () {
    document.addEventListener('keydown', keyDown);
    return function () {
      document.removeEventListener('keydown', keyDown);
    };
  }, [keyDown]);
};
var useJumpToSearch = exports.useJumpToSearch = function useJumpToSearch(openMenu) {
  var jumpToSearch = _react["default"].useCallback(function (e) {
    e.preventDefault();
    var body = document.querySelector('body');
    var hamburgerMenuContainer = document.querySelector('.ma__header__hamburger__nav-container');
    var searchInput = document.querySelector('.ma__header__hamburger__nav-container .ma__header-search__input');
    var jumpToSearchButton = document.querySelector('.js-header-search-access-button');
    if (body.classList.contains('show-menu')) {
      // This control the visibility of the dropdown to keyboard and screen reader users while maintaining the show/hide animation effect.
      hamburgerMenuContainer.setAttribute('aria-hidden', '');
      if (searchInput) {
        searchInput.focus();
      }
    } else {
      hamburgerMenuContainer.removeAttribute('aria-hidden');
      openMenu();
      setTimeout(function () {
        if (jumpToSearchButton) {
          jumpToSearchButton.setAttribute('aria-pressed', 'true');
        }
        if (searchInput) {
          searchInput.setAttribute('autofocus', '');
          searchInput.focus();
        }
      }, 200);
    }
  }, [openMenu]);
  _react["default"].useEffect(function () {
    var jumpToSearchButton = document.querySelector('.js-header-search-access-button');
    if (jumpToSearchButton) {
      jumpToSearchButton.addEventListener('click', jumpToSearch);
    }
    return function () {
      if (jumpToSearchButton) {
        jumpToSearchButton.removeEventListener('click', jumpToSearch);
      }
    };
  }, [jumpToSearch]);
};
var useMenuButtonEffects = exports.useMenuButtonEffects = function useMenuButtonEffects(menuButtonRef, toggleMenu) {
  var onClick = _react["default"].useCallback(function (e) {
    var menuButton = menuButtonRef.current;
    if (menuButton) {
      e.preventDefault();
      // For Safari, this ensures to move focus to the menu content.
      if (navigator.appVersion.includes('Safari')) {
        menuButton.focus();
      }
      toggleMenu();
    }
  }, [menuButtonRef, toggleMenu]);
  _react["default"].useEffect(function () {
    var menuButton = menuButtonRef.current;
    if (menuButton) {
      menuButton.addEventListener('click', onClick);
    }
    return function () {
      if (menuButton) {
        menuButton.removeEventListener('click', onClick);
      }
    };
  }, [menuButtonRef, toggleMenu]);
};