@massds/mayflower-react/dist/Header/utility-items.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports.TranslateItem = exports.StateItem = exports.LoginItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _index = _interopRequireDefault(require("../GoogleTranslateElement/index.js"));
var _index2 = _interopRequireDefault(require("../DecorativeLink/index.js"));
var _IconBuilding = _interopRequireDefault(require("../Icon/IconBuilding.js"));
var _IconLogin = _interopRequireDefault(require("../Icon/IconLogin.js"));
var _useWindowWidth = _interopRequireDefault(require("../hooks/use-window-width.js"));
var _nanoid = _interopRequireDefault(require("nanoid"));
var _UtilityNav = _interopRequireDefault(require("./UtilityNav.data"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var PanelItem = function PanelItem(_ref) {
  var narrow = _ref.narrow,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? '' : _ref$title,
    CustomIcon = _ref.CustomIcon,
    _ref$description = _ref.description,
    description = _ref$description === void 0 ? '' : _ref$description,
    _ref$ariaLabel = _ref.ariaLabel,
    ariaLabel = _ref$ariaLabel === void 0 ? '' : _ref$ariaLabel,
    _ref$links = _ref.links,
    links = _ref$links === void 0 ? [] : _ref$links;
  var windowWidth = (0, _useWindowWidth["default"])();
  var isMobileWindow = windowWidth !== null && windowWidth < 860;
  var loginToggleRef = _react["default"].useRef();
  var loginContentRef = _react["default"].useRef();
  var loginCloseRef = _react["default"].useRef();
  var loginContainerRef = _react["default"].useRef();
  _react["default"].useEffect(function () {
    var utilButton = loginToggleRef.current;
    var utilCloseButton = loginCloseRef.current;
    var utilContent = loginContentRef.current;
    var utilContainer = utilContent ? loginContainerRef.current : null;
    var narrowUtilContentOpen = false;
    var closeUtilWideContent = function closeUtilWideContent() {
      // Content state
      utilContent.style.height = '0';
      utilContent.style.opacity = '0';
      utilContent.classList.add('is-closed');
      utilContent.setAttribute('aria-hidden', 'true');
      // Close button state
      utilCloseButton.setAttribute('aria-expanded', 'false');
      // Utility button state
      utilButton.setAttribute('aria-expanded', 'false');
      utilButton.setAttribute('aria-pressed', 'false');
      var closestHamburgerNav = utilButton.closest('.ma__header__hamburger__nav');
      if (closestHamburgerNav) {
        closestHamburgerNav.classList.toggle('util-nav-content-open');
      }
    };
    var closeNarrowUtilContent = function closeNarrowUtilContent() {
      utilButton.setAttribute('aria-expanded', 'false');
      utilContent.setAttribute('aria-hidden', 'true');
      utilContainer.style.pointerEvents = 'none';
      utilContent.style.maxHeight = '0';
      utilContainer.style.opacity = '0';
      setTimeout(function () {
        utilContainer.removeAttribute('style');
        utilContent.classList.add('is-closed');
      }, 500);
      narrowUtilContentOpen = false;
    };
    var openNarrowUtilContent = function openNarrowUtilContent() {
      closeSubMenu();
      utilButton.setAttribute('aria-expanded', 'true');
      utilContent.removeAttribute('aria-hidden');
      utilContainer.style.pointerEvents = 'none';
      /** Slide down. */
      utilContainer.removeAttribute('style');

      /** Show the content. */
      utilContent.classList.remove('is-closed');
      utilContent.style.maxHeight = 'auto';

      /** Get the computed height of the content. */
      var contentHeight = utilContent.querySelector('.ma__utility-nav__content-body').clientHeight + "px";

      /** Set the height of the submenu as 0px, */
      /** so we can trigger the slide down animation. */
      utilContent.style.maxHeight = '0';
      utilContent.style.Height = '0';

      // These height settings display the bottom border of the parent li at the correct spot.
      utilContent.style.height = contentHeight;
      utilContainer.style.height = contentHeight;
      utilContent.style.maxHeight = contentHeight;
      utilContainer.style.opacity = '1';
      narrowUtilContentOpen = true;
    };
    var utilButtonNarrowKeyDown = function utilButtonNarrowKeyDown(e) {
      var isUtilClosed = utilContent.classList.contains('is-closed');
      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        openNarrowUtilContent();
        var utilItems = utilContent.querySelectorAll('.ma__utility-panel__item a');
        var focusedElement = document.activeElement;
        var focusIndexInDropdown = Array.from(utilItems).findIndex(function (link) {
          return link === focusedElement;
        });
        var utilItemsCount = utilItems.length;
        if (e.key === 'ArrowDown') {
          if (!narrowUtilContentOpen) {
            focusIndexInDropdown = 0;
          } else {
            focusIndexInDropdown += 1;
          }
        } else if (!narrowUtilContentOpen) {
          focusIndexInDropdown = utilItemsCount - 1;
        } else {
          focusIndexInDropdown -= 1;
        }
        focusIndexInDropdown = (focusIndexInDropdown + utilItemsCount) % utilItemsCount;
        utilItems[focusIndexInDropdown].focus();
      }
      if (e.key === 'Escape' && !isUtilClosed) {
        // If the utility accordion is open, escape key closes the utility accordion and sets focus on the utility toggle button
        // Hamburger menu escape is handled in useHamburgerNavKeydown hook
        closeNarrowUtilContent();
        utilButton.focus();
      }
    };
    var utilButtonNarrowClick = function utilButtonNarrowClick() {
      if (utilContent.classList.contains('is-closed')) {
        openNarrowUtilContent();
      } else {
        closeNarrowUtilContent();
      }
    };
    var utilButtonWideClick = function utilButtonWideClick(e) {
      var thisWideButton = e.target.closest('.js-util-nav-toggle');
      var thisWideContent = thisWideButton.nextElementSibling;
      if (thisWideContent.classList.contains('is-closed')) {
        var closestHamburgerNav = thisWideButton.closest('.ma__header__hamburger__nav');
        if (closestHamburgerNav) {
          closestHamburgerNav.classList.add('util-nav-content-open');
        }
        thisWideContent.classList.remove('is-closed');
        thisWideContent.removeAttribute('aria-hidden');
        thisWideContent.removeAttribute('style');
        thisWideContent.style.height = 'auto';
        thisWideContent.style.opacity = '1';

        // Button State
        thisWideButton.setAttribute('aria-expanded', 'true');
        thisWideButton.setAttribute('aria-pressed', 'true');
      }
      thisWideButton.setAttribute('aria-expanded', 'true');
      thisWideButton.setAttribute('aria-pressed', 'true');
    };
    function closeSubMenu() {
      var openSubMenu = document.querySelector('.submenu-open');
      if (openSubMenu) {
        var openSubMenuButton = openSubMenu.querySelector('.js-main-nav-hamburger__top-link');
        var openSubMenuContent = openSubMenu.querySelector('.js-main-nav-hamburger-content');
        var openSubMenuContainer = openSubMenu.querySelector('.js-main-nav-hamburger__container');
        openSubMenuButton.setAttribute('aria-expanded', 'false');
        openSubMenuContent.style.height = '0';
        openSubMenuContainer.style.opacity = '0';
        openSubMenuContent.classList.add('is-closed');
        openSubMenu.removeAttribute('style');
        openSubMenu.classList.remove('submenu-open');
      }
    }
    if (utilButton && utilCloseButton && utilContent && utilContainer) {
      // Open
      if (!isMobileWindow) {
        utilContent.removeAttribute('style');
        utilContainer.removeAttribute('style');
        utilButton.addEventListener('click', utilButtonWideClick);
        utilCloseButton.addEventListener('click', closeUtilWideContent);
      } else {
        utilContent.style.maxHeight = '0';
        utilContainer.style.opacity = '0';
        utilButton.addEventListener('click', utilButtonNarrowClick);
        utilButton.addEventListener('keydown', utilButtonNarrowKeyDown);
        utilContent.addEventListener('keydown', utilButtonNarrowKeyDown);
      }
    }
    return function () {
      utilButton.removeEventListener('click', utilButtonWideClick);
      utilCloseButton.removeEventListener('click', closeUtilWideContent);
      utilButton.removeEventListener('click', utilButtonNarrowClick);
      utilButton.removeEventListener('keydown', utilButtonNarrowKeyDown);
      utilContent.removeEventListener('keydown', utilButtonNarrowKeyDown);
    };
  }, [isMobileWindow, narrow, loginToggleRef, loginCloseRef, loginContentRef, loginContainerRef]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
    ref: loginToggleRef,
    type: "button",
    className: "ma__utility-nav__link js-util-nav-toggle",
    "aria-haspopup": "true",
    "aria-label": ariaLabel,
    "aria-expanded": "false"
  }, CustomIcon && /*#__PURE__*/_react["default"].createElement(CustomIcon, {
    height: 20,
    width: 18
  }), title && title.length > 0 && /*#__PURE__*/_react["default"].createElement("span", null, title), /*#__PURE__*/_react["default"].createElement("span", {
    className: "toggle-indicator",
    "aria-hidden": "true"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    ref: loginContentRef,
    "aria-hidden": "true",
    className: "ma__utility-nav__content js-util-nav-content is-closed"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    ref: loginContainerRef,
    className: "ma__utility-nav__container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__content-title"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    ref: loginCloseRef,
    type: "button",
    className: "ma__utility-nav__close js-close-util-nav"
  }, /*#__PURE__*/_react["default"].createElement("span", null, "Close"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ma__utility-nav__close-icon",
    "aria-hidden": "true"
  }, "+")), CustomIcon && /*#__PURE__*/_react["default"].createElement(CustomIcon, {
    height: 20,
    width: 18
  }), title && title.length > 0 && /*#__PURE__*/_react["default"].createElement("h2", null, title)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__content-body"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-panel"
  }, description && description.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-panel__description ma__utility-panel__description--full"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__rich-text"
  }, /*#__PURE__*/_react["default"].createElement("p", null, description))), /*#__PURE__*/_react["default"].createElement("ul", {
    className: "ma__utility-panel__items"
  }, links.length > 0 && links.map(function (link) {
    return /*#__PURE__*/_react["default"].createElement("li", {
      className: "ma__utility-panel__item js-clickable",
      key: "util_panel_item_" + (0, _nanoid["default"])()
    }, /*#__PURE__*/_react["default"].createElement(_index2["default"], link));
  })))))));
};
PanelItem.propTypes = process.env.NODE_ENV !== "production" ? {
  narrow: _propTypes["default"].bool,
  title: _propTypes["default"].string,
  CustomIcon: _propTypes["default"].elementType,
  description: _propTypes["default"].string,
  ariaLabel: _propTypes["default"].string,
  links: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    text: _propTypes["default"].string,
    href: _propTypes["default"].string,
    type: _propTypes["default"].string
  }))
} : {};
var LoginItem = exports.LoginItem = function LoginItem(_ref2) {
  var _ref2$data = _ref2.data,
    data = _ref2$data === void 0 ? _UtilityNav["default"].loginItem : _ref2$data;
  var _data$panel = data.panel,
    links = _data$panel.links,
    description = _data$panel.description,
    text = data.text,
    ariaLabel = data.ariaLabel;
  return /*#__PURE__*/_react["default"].createElement(PanelItem, {
    links: links,
    title: text,
    CustomIcon: _IconLogin["default"],
    description: description,
    ariaLabel: ariaLabel
  });
};
LoginItem.propTypes = process.env.NODE_ENV !== "production" ? {
  data: _propTypes["default"].shape({
    panel: _propTypes["default"].shape({
      description: _propTypes["default"].string,
      links: _propTypes["default"].arrayOf(_propTypes["default"].shape({
        href: _propTypes["default"].string,
        text: _propTypes["default"].string,
        type: _propTypes["default"].string
      }))
    }),
    text: _propTypes["default"].string,
    ariaLabel: _propTypes["default"].string
  })
} : {};
var TranslateItem = exports.TranslateItem = function TranslateItem() {
  var windowWidth = (0, _useWindowWidth["default"])();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, windowWidth && windowWidth > 840 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav__translate"
  }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    id: "google-translate-id"
  })));
};
var StateItem = exports.StateItem = function StateItem(_ref3) {
  var _ref3$data = _ref3.data,
    data = _ref3$data === void 0 ? _UtilityNav["default"].stateItem : _ref3$data;
  var link = data.link,
    ariaLabel = data.ariaLabel,
    text = data.text;
  return /*#__PURE__*/_react["default"].createElement("a", {
    className: "ma__utility-nav__link direct-link",
    href: link,
    "aria-label": ariaLabel
  }, /*#__PURE__*/_react["default"].createElement(_IconBuilding["default"], {
    height: 20,
    width: 18
  }), /*#__PURE__*/_react["default"].createElement("span", null, text));
};
StateItem.propTypes = process.env.NODE_ENV !== "production" ? {
  data: _propTypes["default"].shape({
    link: _propTypes["default"].string,
    text: _propTypes["default"].string,
    ariaLabel: _propTypes["default"].string
  })
} : {};