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

"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 = exports.TopLevelLink = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tkComponentIcons = _interopRequireDefault(require("@xo-union/tk-component-icons"));
var _componentBlankButton = _interopRequireDefault(require("@xo-union/component-blank-button"));
var _constantKeyCodes = require("@xo-union/constant-key-codes");
var _tkUiTypography = require("@xo-union/tk-ui-typography");
var _componentStandardElements = require("@xo-union/component-standard-elements");
var _ContextCjs = require("../Context.cjs.js");
const deviceForEventType = {
  click: 'mouse',
  keydown: 'keyboard'
};
const onReturnOrSpaceKey = callback => event => {
  if (event.keyCode === _constantKeyCodes.RETURN || event.keyCode === _constantKeyCodes.SPACE) {
    callback(event);
  }
};
const TopLevelButton = props => {
  const {
    classes,
    navMenuRefs,
    navMenuActions,
    navMenuSelectors,
    activeProduct,
    fetchAppData
  } = (0, _ContextCjs.useHeaderNavContext)();
  const {
    menuID,
    children,
    ...remainingProps
  } = props;
  const isActive = navMenuSelectors.isMenuActive(menuID) || activeProduct === menuID;
  const handleInteraction = event => {
    fetchAppData(menuID);
    return navMenuSelectors.isMenuActive(menuID) ? navMenuActions.closeMenu() : navMenuActions.openMenu(menuID, {
      returnFocusElement: event.currentTarget,
      device: deviceForEventType[event.type]
    });
  };
  const menuIDClassName = `${menuID}-top-level-button`;
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body1, (0, _extends2.default)({
    ref: navMenuRefs.getButtonRef(menuID),
    as: _componentBlankButton.default,
    className: (0, _classnames.default)(classes['top-level-menu-button'], isActive && classes['is-active'], menuIDClassName in classes && classes[menuIDClassName]),
    onKeyDown: onReturnOrSpaceKey(event => {
      event.preventDefault();
      handleInteraction(event);
    }),
    onClick: handleInteraction,
    "aria-haspopup": "true",
    "aria-expanded": navMenuSelectors.isMenuActive(menuID),
    "aria-controls": `header-${menuID}-mega-menu-popup`,
    type: "button"
  }, remainingProps), /*#__PURE__*/_react.default.createElement("span", null, children), /*#__PURE__*/_react.default.createElement(_tkComponentIcons.default, {
    className: classes['menu-button-caret'],
    size: "md",
    name: "caret_right",
    "aria-hidden": "true"
  }));
};
process.env.NODE_ENV !== "production" ? TopLevelButton.propTypes = {
  children: _propTypes.default.node,
  menuID: _propTypes.default.string
} : void 0;
const TopLevelLink = _ref => {
  let {
    href,
    children,
    ...props
  } = _ref;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body1, (0, _extends2.default)({
    as: _componentStandardElements.NewWindowAnchor,
    href: href,
    className: classes['top-level-menu-link'],
    "data-trackable": ""
  }, props), /*#__PURE__*/_react.default.createElement("span", null, children));
};
exports.TopLevelLink = TopLevelLink;
process.env.NODE_ENV !== "production" ? TopLevelLink.propTypes = {
  children: _propTypes.default.node,
  href: _propTypes.default.string
} : void 0;
var _default = TopLevelButton;
exports.default = _default;