@carbon/ibm-products/lib/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.
 */

'use strict';

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

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cx = require('classnames');
var index = require('../../_virtual/index.js');
var NavItem = require('./NavItem.js');
var settings = require('../../settings.js');
var bucket3 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-3.js');

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

// Default values for props
const defaults = {
  activeHref: '#',
  className: '',
  children: null,
  id: '',
  isExpandedOnPageLoad: false,
  onItemClick: () => {},
  onListClick: () => {},
  tabIndex: 0,
  title: '',
  icon: '',
  navigationItemTitle: ''
};
exports.default = /*#__PURE__*/React.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] = React.useState(isExpandedOnPageLoad);
  React.useEffect(() => {
    const hrefs = React.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
  React.useImperativeHandle(ref, () => ({
    close,
    isExpandedOnPageLoad
  }));
  const newChildren = React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(NavItem.NavItem, _rollupPluginBabelHelpers.extends({}, child.props, {
    key: `${NavItem.blockClass}--${index}`,
    onClick: (event, href) => {
      onItemClick(event, href);
      child.props.onClick?.(event);
    },
    activeHref: activeHref,
    tabIndex: open ? 0 : -1
  })));
  return /*#__PURE__*/React.createElement("li", {
    ref: ref,
    className: cx(blockClass, className, {
      [`${NavItem.blockClass}--expanded`]: open
    }),
    tabIndex: tabIndex,
    onClick: toggle,
    onKeyDown: toggle,
    role: "menuitem"
  }, /*#__PURE__*/React.createElement("div", {
    className: `${NavItem.blockClass}__link`
  }, icon && /*#__PURE__*/React.createElement("img", {
    alt: navigationItemTitle,
    className: `${NavItem.blockClass}__img`,
    src: icon
  }), /*#__PURE__*/React.createElement("div", {
    className: `${NavItem.blockClass}__content`
  }, title), /*#__PURE__*/React.createElement(bucket3.ChevronDown, {
    className: `${blockClass}__icon`
  })), /*#__PURE__*/React.createElement("ul", {
    "aria-label": title,
    "aria-hidden": !open,
    className: `${blockClass} ${blockClass}--nested`,
    role: "menu"
  }, newChildren));
});
exports.default.propTypes = {
  /** @type {string} Hypertext reference for active page. */
  activeHref: index.propTypesExports.string,
  /** @type {Node} Child elements. */
  children: index.propTypesExports.node,
  /** @type {string} Extra classes to add. */
  className: index.propTypesExports.string,
  /** @type {string} Icon of a list. */
  icon: index.propTypesExports.string,
  /** @type {string} ID of a list. */
  id: index.propTypesExports.string,
  /** @type {boolean} State of a list. */
  isExpandedOnPageLoad: index.propTypesExports.bool,
  /** @type {boolean} Title of nav. */
  navigationItemTitle: index.propTypesExports.string,
  /** @type {Function} Click handler for an item. */
  onItemClick: index.propTypesExports.func,
  /** @type {Function} Click handler for a list. */
  onListClick: index.propTypesExports.func,
  /** @type {number} `tabindex` of an item. */
  tabIndex: index.propTypesExports.number,
  /** @type {string} Label of the list. */
  title: index.propTypesExports.string
};
exports.default.displayName = componentName;

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

exports.NavList = exports.default;
exports.blockClass = blockClass;