@carbon/ibm-products/lib/components/Nav/Nav.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';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var NavList = require('./NavList.js');
var NavItem = require('./NavItem.js');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');

const componentName = 'Nav';
const blockClass = `${settings.pkg.prefix}--nav`;

/**
 * @deprecated This component is deprecated
 */
exports.Nav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    activeHref,
    className,
    children,
    heading,
    label,
    ...rest
  } = _ref;
  const [_activeHref, setActiveHref] = React.useState(activeHref);
  const navigationLists = React.useRef({});
  React.useEffect(() => {
    if (!_activeHref && window.location) {
      const {
        hash,
        pathname
      } = window.location;
      setActiveHref(pathname + hash);
    }
  }, [_activeHref]);

  /**
   * Creates a new child list item.
   * @param {NavItem} child The child list item to create.
   * @param {number} index The index of the child list item.
   * @returns {NavItem} The new child list item.
   */
  const buildNewItemChild = (child, index) => {
    const key = `${NavItem.blockClass}--${index}`;
    return /*#__PURE__*/React.createElement(NavItem.NavItem, _rollupPluginBabelHelpers.extends({}, child.props, {
      activeHref: _activeHref,
      key: key,
      onClick: (event, href) => handleItemClick(event, href, child.props.onClick)
    }));
  };

  /**
   * Creates a new child list.
   * @param {NavList} child The child list to create.
   * @param {number} index The index of the child list.
   * @returns {NavList} The new child list.
   */
  const buildNewListChild = (child, index) => {
    const key = `${NavList.blockClass}--${index}`;
    return /*#__PURE__*/React.createElement(NavList.NavList, _rollupPluginBabelHelpers.extends({}, child.props, {
      activeHref: _activeHref,
      id: key,
      key: key,
      onListClick: handleListClick,
      onItemClick: handleItemClick,
      ref: el => navigationLists.current[key] = el
    }));
  };

  /**
   * Handles toggling the list item.
   * @param {SyntheticEvent} event The event fired when the list item is toggled.
   * @param {string} href The URL of the list item.
   */
  const handleItemClick = (event, href, onClick) => {
    event.stopPropagation();
    const {
      type,
      which
    } = event;

    // Enter (13) and spacebar (32).
    const acceptableEvent = which === 13 || which === 32 || type === 'click';
    const diffHref = href !== _activeHref;
    if (acceptableEvent && diffHref) {
      setActiveHref(href);
    }
    if (onClick) {
      onClick(event);
    }
  };

  /**
   * Handles when a list has been selected.
   * @param {number} id The index of the list.
   */
  const handleListClick = id => {
    Object.keys(navigationLists.current).forEach(key => {
      if (key !== id && !navigationLists.current[key].isExpandedOnPageLoad) {
        navigationLists.current[key].close();
      }
    });
  };
  return /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.extends({
    className: cx(blockClass, className),
    "aria-label": label,
    ref: ref
  }, devtools.getDevtoolsProps(componentName), rest), heading && /*#__PURE__*/React.createElement("h1", {
    className: `${blockClass}__heading`
  }, heading), /*#__PURE__*/React.createElement("ul", {
    className: `${blockClass}__wrapper`,
    role: "menubar"
  }, React.Children.map(children, (child, index) => {
    return child?.type?.displayName === NavList.NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
  })));
});
exports.Nav.deprecated = {
  level: 'warn',
  details: `This component is deprecated`
};
exports.Nav.propTypes = {
  /**
   * Hypertext reference for active page.
   */
  activeHref: index.default.string,
  /**
   * Child elements.
   */
  children: index.default.node,
  /**
   * Extra classes to add.
   */
  className: index.default.string,
  /**
   * Heading.
   */
  heading: index.default.string,
  /**
   * Aria-label on the rendered `nav` element.
   */
  label: index.default.string.isRequired
};

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

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