@carbon/ibm-products/lib/components/Nav/NavItem.js

Carbon for IBM Products

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var settings = require('../../settings.js');
var uuidv4 = require('../../global/js/utils/uuidv4.js');
var NavItemLink = require('./NavItemLink.js');
var bucket10 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-10.js');

// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${settings.pkg.prefix}--nav-item`;
const componentName = 'NavItem';

// Default values for props
const defaults = {
  activeHref: '#',
  disabled: false,
  element: 'a',
  onClick: () => {},
  tabIndex: 0
};

/**
 * Navigation item component.
 */
exports.default = _ref => {
  let {
    activeHref = defaults.activeHref,
    children = defaults.children,
    className,
    current,
    disabled = defaults.disabled,
    element = defaults.element,
    href,
    id,
    label,
    onClick = defaults.onClick,
    tabIndex = defaults.tabIndex,
    // Collect any other property values passed in.
    ...rest
  } = _ref;
  const [hrefHasDifferentHost, setHrefHasDifferentHost] = React.useState(false);
  React.useEffect(() => {
    if (href?.indexOf(window.location.host) === -1) {
      setHrefHasDifferentHost(true);
    }
  }, [href]);
  const internalId = React.useRef(uuidv4.default());
  const instanceId = `${blockClass}__${internalId.current}`;
  const navItemId = id || instanceId;
  const isAbsoluteLink = new RegExp('^([a-z]+://|//)', 'i');
  const externalLink = isAbsoluteLink.test(href) && hrefHasDifferentHost;
  const linkClassName = `${blockClass}__link`;
  const handleDisabled = function (action) {
    let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
    return !disabled ? action : defaultValue;
  };
  const navItemTabIndex = handleDisabled(tabIndex, -1);
  const externalLinkProps = externalLink && {
    rel: 'noopener noreferrer',
    target: '_blank'
  };
  return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({}, rest, {
    className: cx(blockClass, className, {
      [`${blockClass}--active`]: current !== null && current === navItemId || activeHref !== undefined && activeHref === href && !externalLink,
      [`${blockClass}--disabled`]: disabled
    }),
    label: label,
    onClick: event => handleDisabled(onClick(event, href)),
    onKeyDown: event => handleDisabled(onClick(event, href)),
    role: "menuitem"
  }), /*#__PURE__*/React.createElement(NavItemLink.default, _rollupPluginBabelHelpers.extends({
    id: navItemId,
    className: cx(linkClassName, {
      [`${blockClass}__link--external`]: externalLink
    }),
    element: element,
    href: href,
    tabIndex: navItemTabIndex
  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React.createElement(bucket10.Launch, {
    className: `${blockClass}__link--external__icon`
  })));
};

// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
exports.default.displayName = componentName;

// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.
exports.default.propTypes = {
  /**
   * Hypertext reference for active page.
   */
  activeHref: index.default.string,
  /**
   * Provide the contents of the Nav.
   */
  children: index.default.node.isRequired,
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * Currently selected item.
   */
  current: index.default.string,
  /**
   * Whether the item is disabled.
   */
  disabled: index.default.bool,
  /**
   * The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`.
   */
  element: index.default.elementType,
  /**
   * The href of the nav item.
   */
  href: index.default.string,
  /**
   * Identifier.
   */
  id: index.default.string,
  /**
   * Label of an item.
   */
  label: index.default.string,
  /**
   * Whether the item is a link.
   */
  link: index.default.bool,
  /**
   * Click handler of an item.
   */
  onClick: index.default.func,
  /**
   * `tabindex` of an item.
   */
  tabIndex: index.default.number
};

// Return a placeholder if not released and not enabled by feature flag
exports.default = settings.pkg.checkComponentEnabled(exports.default, componentName);

exports.NavItem = exports.default;
exports.blockClass = blockClass;