@xo-union/tk-component-header-nav
Version:
94 lines (93 loc) • 3.59 kB
JavaScript
"use strict";
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/instance/map"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tkUiTypography = require("@xo-union/tk-ui-typography");
var _uiAccessibility = require("@xo-union/ui-accessibility");
var _indexCjs = _interopRequireDefault(require("../Avatar/index.cjs.js"));
var _ContextCjs = require("../Context.cjs.js");
const AccountSettingsMenu = _ref => {
var _context;
let {
menuID,
couplePhotoUrl,
children
} = _ref;
const {
classes,
navMenuRefs,
navMenuSelectors,
navMenuActions,
mobileMedia
} = (0, _ContextCjs.useHeaderNavContext)();
const isActive = navMenuSelectors.isMenuActive(menuID);
const headingID = `${menuID}-mega-menu-heading`;
const containerRef = _react.default.useRef();
const onBlur = event => {
if (mobileMedia.no && !event.currentTarget.contains(event.relatedTarget)) {
navMenuActions.closeMenu();
}
};
(0, _uiAccessibility.useOutsideClickEffect)({
enabled: mobileMedia.no && isActive,
onClickOutside: () => {
navMenuActions.closeMenu({
returnFocus: false
});
}
}, [containerRef, navMenuRefs.getButtonRef(menuID)]);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(classes['account-settings-menu-container'], isActive && classes['is-active']),
ref: containerRef,
onBlur: onBlur
}, /*#__PURE__*/_react.default.createElement("nav", {
"aria-labelledby": headingID,
className: classes['account-settings-dropdown'],
"data-trackable-context-group": "account settings"
}, /*#__PURE__*/_react.default.createElement("div", {
"aria-level": "1",
role: "heading",
id: headingID,
className: classes['account-settings-header']
}, /*#__PURE__*/_react.default.createElement(_indexCjs.default, {
couplePhotoUrl: couplePhotoUrl
}), "Your account"), /*#__PURE__*/_react.default.createElement("ul", {
role: "list",
className: classes['account-settings-list']
}, (0, _map.default)(_context = _react.default.Children).call(_context, children, child => /*#__PURE__*/_react.default.createElement("li", {
className: classes['account-settings-sub-menu-item']
}, child)))));
};
process.env.NODE_ENV !== "production" ? AccountSettingsMenu.propTypes = {
children: _propTypes.default.node,
menuID: _propTypes.default.string,
couplePhotoUrl: _propTypes.default.string
} : void 0;
const SubMenuLink = _ref2 => {
let {
children,
...props
} = _ref2;
const {
classes
} = (0, _ContextCjs.useHeaderNavContext)();
return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body2, (0, _extends2.default)({
as: "a",
className: classes['account-settings-sub-menu-interactive-item'],
"data-trackable": ""
}, props), children);
};
process.env.NODE_ENV !== "production" ? SubMenuLink.propTypes = {
children: _propTypes.default.node
} : void 0;
AccountSettingsMenu.SubMenuLink = SubMenuLink;
var _default = AccountSettingsMenu;
exports.default = _default;