@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
227 lines (180 loc) • 8.62 kB
JavaScript
;
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(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var useHamburgerNavKeydown = function useHamburgerNavKeydown(closeMenu) {
// 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;
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
});
}
var utilNavWide = document.querySelector('.js-utility-nav--wide');
var utilNarrowNav = document.querySelector('.ma__header__hamburger__utility-nav--narrow');
var utilNarrowButton = document.querySelector('.ma__header__hamburger__utility-nav--narrow button.js-util-nav-toggle');
var utilNarrowContent = utilNarrowButton ? utilNarrowButton.nextElementSibling : null;
var utilNarrowContainer = utilNarrowContent ? utilNarrowContent.querySelector('.ma__utility-nav__container') : null;
function closeUtilWideContent() {
var utilWideContent = document.querySelector('.js-utility-nav--wide .js-util-nav-content');
if (utilWideContent) {
var utilWideCloseButton = document.querySelector('.js-utility-nav--wide .js-close-util-nav');
var utilWideButton = document.querySelector('.js-utility-nav--wide .js-util-nav-toggle'); // Content state
utilWideContent.style.height = '0';
utilWideContent.style.opacity = '0';
utilWideContent.classList.add('is-closed');
utilWideContent.setAttribute('aria-hidden', 'true'); // Close button state
utilWideCloseButton.setAttribute('aria-expanded', 'false'); // Utility button state
utilWideButton.setAttribute('aria-expanded', 'false');
utilWideButton.setAttribute('aria-pressed', 'false');
var parentHamburgerNav = utilWideButton.closest('.ma__header__hamburger__nav');
if (parentHamburgerNav) {
parentHamburgerNav.classList.toggle('util-nav-content-open');
}
}
}
function closeNarrowUtilContent() {
if (utilNarrowContent) {
var thisNavContainer = utilNarrowButton.closest('.ma__utility-nav__item');
utilNarrowButton.setAttribute('aria-expanded', 'false');
utilNarrowContent.setAttribute('aria-hidden', 'true');
thisNavContainer.style.pointerEvents = 'none';
setTimeout(function () {
thisNavContainer.removeAttribute('style');
}, 700);
utilNarrowContent.style.maxHeight = '0';
utilNarrowContainer.style.opacity = '0';
setTimeout(function () {
utilNarrowContent.classList.add('is-closed');
}, 500);
}
} // ESC to close menus.
// 'e.key === "Esc"' is necessary for IE11.
if (e.key === 'Escape' || e.key === 'Esc' || e.code === 'Escape') {
var utilNavWideContent = utilNavWide.querySelector('.js-util-nav-content'); // Log in to... in Utility nav bar
if (utilNavWideContent && utilNavWideContent.style.opacity === '1') {
closeUtilWideContent();
utilNavWide.querySelector('.js-util-nav-toggle').focus();
} // Util nav menus in the hamburger menu
if (utilNarrowNav) {
// Open Log in to... in Hamburger menu: To be consisitent with submenu, keep the content open and set focus on nav button.
if (utilNarrowButton !== document.activeElement && utilNarrowContainer.style.opacity === '1') {
var utilNavContentLinks = utilNarrowNav.querySelectorAll('.js-clickable-link');
for (var i = 0; i < utilNavContentLinks.length; i += 1) {
if (utilNavContentLinks[i].innerText === document.activeElement.innerText) {
utilNarrowButton.focus();
}
}
closeNarrowUtilContent();
} else {
var narrowNavItems = utilNarrowNav.querySelectorAll('.ma__utility-nav__link');
for (var _i = 0; _i < narrowNavItems.length; _i += 1) {
if (narrowNavItems[_i].innerText === document.activeElement.innerText) {
closeMenu();
}
}
}
} // Main nav elements
var openSubmenu = document.querySelector('.submenu-open .js-main-nav-hamburger__top-link');
if (openSubmenu !== document.activeElement) {
// To prevent to set focus on another top menu button with open submenu.
var menus = document.querySelectorAll('.ma__main__hamburger-nav__top-link');
for (var _i2 = 0; _i2 < menus.length; _i2 += 1) {
if (menus[_i2] === document.activeElement) {
closeMenu();
}
} // Set focus on its parent top menu button.
var openSubmenuItems = document.querySelectorAll('.submenu-open .js-main-nav-hamburger-content:not(is-closed) .js-main-nav-hamburger__link');
for (var _i3 = 0; _i3 < openSubmenuItems.length; _i3 += 1) {
if (openSubmenuItems[_i3] === document.activeElement) {
openSubmenu.focus();
}
}
} else {
closeMenu();
}
}
}, [closeMenu]);
_react["default"].useEffect(function () {
document.addEventListener('keydown', keyDown);
return function () {
document.removeEventListener('keydown', keyDown);
};
}, [keyDown]);
};
exports.useHamburgerNavKeydown = useHamburgerNavKeydown;
var 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]);
};
exports.useJumpToSearch = useJumpToSearch;
var 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]);
};
exports.useMenuButtonEffects = useMenuButtonEffects;