@carbon/ibm-products
Version:
Carbon for IBM Products
121 lines (119 loc) • 4.5 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* 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 { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { ChevronDown } from "../../node_modules/@carbon/icons-react/es/generated/bucket-3.js";
import NavItem_default, { blockClass as blockClass$1 } from "./NavItem.js";
import React, { useEffect, useImperativeHandle, useState } from "react";
import { bool, func, node, number, string } from "prop-types";
//#region src/components/Nav/NavList.jsx
/**
* Copyright IBM Corp. 2024, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const componentName = "NavList";
const blockClass = `${pkg.prefix}--nav-list`;
const defaults = {
activeHref: "#",
className: "",
children: null,
id: "",
isExpandedOnPageLoad: false,
onItemClick: () => {},
onListClick: () => {},
tabIndex: 0,
title: "",
icon: "",
navigationItemTitle: ""
};
let NavList = React.forwardRef(({ 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(() => {
setOpen(React.Children.toArray(children).filter(({ props: childProps }) => childProps.href && childProps.href.length > 0).map(({ props: childProps }) => childProps.href).includes(activeHref) || isExpandedOnPageLoad);
}, []);
/**
* 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;
if (which === 13 || which === 32 || type === "click") {
if (!open) onListClick(id);
setOpen(!open);
}
};
useImperativeHandle(ref, () => ({
close,
isExpandedOnPageLoad
}));
const newChildren = React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(NavItem_default, {
...child.props,
key: `${blockClass$1}--${index}`,
onClick: (event, href) => {
onItemClick(event, href);
child.props.onClick?.(event);
},
activeHref,
tabIndex: open ? 0 : -1
}));
return /* @__PURE__ */ React.createElement("li", {
ref,
className: (0, import_classnames.default)(blockClass, className, { [`${blockClass$1}--expanded`]: open }),
tabIndex,
onClick: toggle,
onKeyDown: toggle,
role: "menuitem"
}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass$1}__link` }, icon && /* @__PURE__ */ React.createElement("img", {
alt: navigationItemTitle,
className: `${blockClass$1}__img`,
src: icon
}), /* @__PURE__ */ React.createElement("div", { className: `${blockClass$1}__content` }, title), /* @__PURE__ */ React.createElement(ChevronDown, { className: `${blockClass}__icon` })), /* @__PURE__ */ React.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: string,
/** @type {Node} Child elements. */
children: node,
/** @type {string} Extra classes to add. */
className: string,
/** @type {string} Icon of a list. */
icon: string,
/** @type {string} ID of a list. */
id: string,
/** @type {boolean} State of a list. */
isExpandedOnPageLoad: bool,
/** @type {boolean} Title of nav. */
navigationItemTitle: string,
/** @type {Function} Click handler for an item. */
onItemClick: func,
/** @type {Function} Click handler for a list. */
onListClick: func,
/** @type {number} `tabindex` of an item. */
tabIndex: number,
/** @type {string} Label of the list. */
title: string
};
NavList.displayName = componentName;
NavList = pkg.checkComponentEnabled(NavList, componentName);
var NavList_default = NavList;
//#endregion
export { NavList, blockClass, NavList_default as default };