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

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import Icon from "@xo-union/tk-component-icons";
import BlankButton from "@xo-union/component-blank-button";
import { RETURN, SPACE } from "@xo-union/constant-key-codes";
import { Body1 } from "@xo-union/tk-ui-typography";
import { NewWindowAnchor } from "@xo-union/component-standard-elements";
import { useHeaderNavContext } from "../Context.js";
const deviceForEventType = {
  click: 'mouse',
  keydown: 'keyboard'
};
const onReturnOrSpaceKey = callback => event => {
  if (event.keyCode === RETURN || event.keyCode === SPACE) {
    callback(event);
  }
};
const TopLevelButton = props => {
  const {
    classes,
    navMenuRefs,
    navMenuActions,
    navMenuSelectors,
    activeProduct,
    fetchAppData
  } = 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.createElement(Body1, _extends({
    ref: navMenuRefs.getButtonRef(menuID),
    as: BlankButton,
    className: cx(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.createElement("span", null, children), /*#__PURE__*/React.createElement(Icon, {
    className: classes['menu-button-caret'],
    size: "md",
    name: "caret_right",
    "aria-hidden": "true"
  }));
};
process.env.NODE_ENV !== "production" ? TopLevelButton.propTypes = {
  children: PropTypes.node,
  menuID: PropTypes.string
} : void 0;
export const TopLevelLink = _ref => {
  let {
    href,
    children,
    ...props
  } = _ref;
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement(Body1, _extends({
    as: NewWindowAnchor,
    href: href,
    className: classes['top-level-menu-link'],
    "data-trackable": ""
  }, props), /*#__PURE__*/React.createElement("span", null, children));
};
process.env.NODE_ENV !== "production" ? TopLevelLink.propTypes = {
  children: PropTypes.node,
  href: PropTypes.string
} : void 0;
export default TopLevelButton;