@carbon/react/es/components/UIShell/HeaderMenuItem.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import cx from 'classnames';
import Link, { LinkPropTypes } from './Link.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { deprecate } from '../../prop-types/deprecate.js';

const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
  className,
  isActive,
  isCurrentPage,
  'aria-current': ariaCurrent,
  children,
  role,
  tabIndex,
  ...rest
}, ref) {
  const prefix = usePrefix();
  const resolvedTabIndex = tabIndex ?? 0;
  if (isCurrentPage) {
    isActive = isCurrentPage;
  }
  // We set the current class only if `isActive` is passed in and we do
  // not have an `aria-current="page"` set for the breadcrumb item. When this
  // class is added we also set `aria-current` as `true`
  const hasCurrentClass = isActive && ariaCurrent !== 'page';
  const linkClassName = cx({
    [`${prefix}--header__menu-item`]: true,
    [`${prefix}--header__menu-item--current`]: hasCurrentClass
  });
  return /*#__PURE__*/React.createElement("li", {
    className: className,
    role: role
  }, /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
    "aria-current": hasCurrentClass ? true : ariaCurrent,
    className: linkClassName,
    ref: ref,
    tabIndex: resolvedTabIndex
  }), /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--text-truncate--end`
  }, children)));
});
HeaderMenuItem.displayName = 'HeaderMenuItem';
HeaderMenuItem.propTypes = {
  /**
   * Pass in a valid `element` to replace the underlying `<a>` tag with a
   * custom `Link` element
   */
  ...LinkPropTypes,
  /**
   * Pass in children that are either a string or can be read as a string by
   * screen readers
   */
  children: PropTypes.node.isRequired,
  /**
   * Optionally provide a custom class to apply to the underlying `<li>` node
   */
  className: PropTypes.string,
  /**
   * If `true` and `aria-current !== 'page'`, applies selected styles to the item and sets `aria-current="true"`.
   */
  isActive: PropTypes.bool,
  /**
   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
   */
  isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
  /**
   * Optionally supply a role for the underlying `<li>` node. Useful for resetting
   * `<ul>` semantics for menus.
   */
  role: PropTypes.string,
  /**
   * Specify the tab index of the Link
   */
  tabIndex: PropTypes.number
};

export { HeaderMenuItem as default };