@carbon/ibm-products/es/components/Nav/NavList.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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useEffect, useImperativeHandle } from 'react';
import cx from 'classnames';
import { p as propTypesExports } from '../../_virtual/index.js';
import { NavItem, blockClass as blockClass$1 } from './NavItem.js';
import { pkg } from '../../settings.js';
import { ChevronDown } from '../../node_modules/@carbon/icons-react/es/generated/bucket-3.js';

const componentName = 'NavList';
const blockClass = `${pkg.prefix}--nav-list`;

// Default values for props
const defaults = {
  activeHref: '#',
  className: '',
  children: null,
  id: '',
  isExpandedOnPageLoad: false,
  onItemClick: () => {},
  onListClick: () => {},
  tabIndex: 0,
  title: '',
  icon: '',
  navigationItemTitle: ''
};
let NavList = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
  let {
    activeHref = defaults.activeHref,
    children = defaults.children,
    className = defaults.className,
    icon = defaults.icon,
    id = defaults.id,
    isExpandedOnPageLoad = defaults.isExpandedOnPageLoad,
    navigationItemTitle = defaults.navigationItemTitle,
    onItemClick = defaults.onItemClick,
    onListClick = defaults.onListClick,
    tabIndex = defaults.tabIndex,
    title = defaults.title
  } = _ref;
  const [open, setOpen] = useState(isExpandedOnPageLoad);
  useEffect(() => {
    const hrefs = React__default.Children.toArray(children).filter(_ref2 => {
      let {
        props: childProps
      } = _ref2;
      return childProps.href && childProps.href.length > 0;
    }).map(_ref3 => {
      let {
        props: childProps
      } = _ref3;
      return childProps.href;
    });
    setOpen(hrefs.includes(activeHref) || isExpandedOnPageLoad);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  /**
   * Closes the list.
   */
  const close = () => {
    if (open) {
      setOpen(false);
    }
  };

  /**
   * Handles toggling the list.
   * @param {SyntheticEvent} event The event fired when the list is toggled.
   */
  const toggle = event => {
    const {
      which,
      type
    } = event;

    // Enter (13) and spacebar (32).
    if (which === 13 || which === 32 || type === 'click') {
      if (!open) {
        onListClick(id);
      }
      setOpen(!open);
    }
  };

  // Expose external function calls to the parent component
  useImperativeHandle(ref, () => ({
    close,
    isExpandedOnPageLoad
  }));
  const newChildren = React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.createElement(NavItem, _extends({}, child.props, {
    key: `${blockClass$1}--${index}`,
    onClick: (event, href) => {
      onItemClick(event, href);
      child.props.onClick?.(event);
    },
    activeHref: activeHref,
    tabIndex: open ? 0 : -1
  })));
  return /*#__PURE__*/React__default.createElement("li", {
    ref: ref,
    className: cx(blockClass, className, {
      [`${blockClass$1}--expanded`]: open
    }),
    tabIndex: tabIndex,
    onClick: toggle,
    onKeyDown: toggle,
    role: "menuitem"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `${blockClass$1}__link`
  }, icon && /*#__PURE__*/React__default.createElement("img", {
    alt: navigationItemTitle,
    className: `${blockClass$1}__img`,
    src: icon
  }), /*#__PURE__*/React__default.createElement("div", {
    className: `${blockClass$1}__content`
  }, title), /*#__PURE__*/React__default.createElement(ChevronDown, {
    className: `${blockClass}__icon`
  })), /*#__PURE__*/React__default.createElement("ul", {
    "aria-label": title,
    "aria-hidden": !open,
    className: `${blockClass} ${blockClass}--nested`,
    role: "menu"
  }, newChildren));
});
NavList.propTypes = {
  /** @type {string} Hypertext reference for active page. */
  activeHref: propTypesExports.string,
  /** @type {Node} Child elements. */
  children: propTypesExports.node,
  /** @type {string} Extra classes to add. */
  className: propTypesExports.string,
  /** @type {string} Icon of a list. */
  icon: propTypesExports.string,
  /** @type {string} ID of a list. */
  id: propTypesExports.string,
  /** @type {boolean} State of a list. */
  isExpandedOnPageLoad: propTypesExports.bool,
  /** @type {boolean} Title of nav. */
  navigationItemTitle: propTypesExports.string,
  /** @type {Function} Click handler for an item. */
  onItemClick: propTypesExports.func,
  /** @type {Function} Click handler for a list. */
  onListClick: propTypesExports.func,
  /** @type {number} `tabindex` of an item. */
  tabIndex: propTypesExports.number,
  /** @type {string} Label of the list. */
  title: propTypesExports.string
};
NavList.displayName = componentName;

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

export { NavList, blockClass, NavList as default };