@xo-union/tk-component-header-nav/lib/components/HeaderNav/AccountSettings/index.js

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { Body2 } from "@xo-union/tk-ui-typography";
import { useOutsideClickEffect } from "@xo-union/ui-accessibility";
import Avatar from "../Avatar/index.js";
import { useHeaderNavContext } from "../Context.js";
const AccountSettingsMenu = _ref => {
  var _context;
  let {
    menuID,
    couplePhotoUrl,
    children
  } = _ref;
  const {
    classes,
    navMenuRefs,
    navMenuSelectors,
    navMenuActions,
    mobileMedia
  } = useHeaderNavContext();
  const isActive = navMenuSelectors.isMenuActive(menuID);
  const headingID = `${menuID}-mega-menu-heading`;
  const containerRef = React.useRef();
  const onBlur = event => {
    if (mobileMedia.no && !event.currentTarget.contains(event.relatedTarget)) {
      navMenuActions.closeMenu();
    }
  };
  useOutsideClickEffect({
    enabled: mobileMedia.no && isActive,
    onClickOutside: () => {
      navMenuActions.closeMenu({
        returnFocus: false
      });
    }
  }, [containerRef, navMenuRefs.getButtonRef(menuID)]);
  return /*#__PURE__*/React.createElement("div", {
    className: cx(classes['account-settings-menu-container'], isActive && classes['is-active']),
    ref: containerRef,
    onBlur: onBlur
  }, /*#__PURE__*/React.createElement("nav", {
    "aria-labelledby": headingID,
    className: classes['account-settings-dropdown'],
    "data-trackable-context-group": "account settings"
  }, /*#__PURE__*/React.createElement("div", {
    "aria-level": "1",
    role: "heading",
    id: headingID,
    className: classes['account-settings-header']
  }, /*#__PURE__*/React.createElement(Avatar, {
    couplePhotoUrl: couplePhotoUrl
  }), "Your account"), /*#__PURE__*/React.createElement("ul", {
    role: "list",
    className: classes['account-settings-list']
  }, _mapInstanceProperty(_context = React.Children).call(_context, children, child => /*#__PURE__*/React.createElement("li", {
    className: classes['account-settings-sub-menu-item']
  }, child)))));
};
process.env.NODE_ENV !== "production" ? AccountSettingsMenu.propTypes = {
  children: PropTypes.node,
  menuID: PropTypes.string,
  couplePhotoUrl: PropTypes.string
} : void 0;
const SubMenuLink = _ref2 => {
  let {
    children,
    ...props
  } = _ref2;
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement(Body2, _extends({
    as: "a",
    className: classes['account-settings-sub-menu-interactive-item'],
    "data-trackable": ""
  }, props), children);
};
process.env.NODE_ENV !== "production" ? SubMenuLink.propTypes = {
  children: PropTypes.node
} : void 0;
AccountSettingsMenu.SubMenuLink = SubMenuLink;
export default AccountSettingsMenu;