@carbon/ibm-products
Version:
Carbon for IBM Products
130 lines (128 loc) • 4.99 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_index$1 = require("../../node_modules/@carbon/icons-react/lib/index.js");
const require_NavItem = require("./NavItem.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("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_lib = require_index$1.default;
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "NavList";
const blockClass = `${require_settings.pkg.prefix}--nav-list`;
const defaults = {
activeHref: "#",
className: "",
children: null,
id: "",
isExpandedOnPageLoad: false,
onItemClick: () => {},
onListClick: () => {},
tabIndex: 0,
title: "",
icon: "",
navigationItemTitle: ""
};
let NavList = react.default.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] = (0, react.useState)(isExpandedOnPageLoad);
(0, react.useEffect)(() => {
setOpen(react.default.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);
}
};
(0, react.useImperativeHandle)(ref, () => ({
close,
isExpandedOnPageLoad
}));
const newChildren = react.default.Children.map(children, (child, index) => /* @__PURE__ */ react.default.createElement(require_NavItem.default, {
...child.props,
key: `${require_NavItem.blockClass}--${index}`,
onClick: (event, href) => {
onItemClick(event, href);
child.props.onClick?.(event);
},
activeHref,
tabIndex: open ? 0 : -1
}));
return /* @__PURE__ */ react.default.createElement("li", {
ref,
className: (0, import_classnames.default)(blockClass, className, { [`${require_NavItem.blockClass}--expanded`]: open }),
tabIndex,
onClick: toggle,
onKeyDown: toggle,
role: "menuitem"
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_NavItem.blockClass}__link` }, icon && /* @__PURE__ */ react.default.createElement("img", {
alt: navigationItemTitle,
className: `${require_NavItem.blockClass}__img`,
src: icon
}), /* @__PURE__ */ react.default.createElement("div", { className: `${require_NavItem.blockClass}__content` }, title), /* @__PURE__ */ react.default.createElement(import_lib.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: prop_types.string,
/** @type {Node} Child elements. */
children: prop_types.node,
/** @type {string} Extra classes to add. */
className: prop_types.string,
/** @type {string} Icon of a list. */
icon: prop_types.string,
/** @type {string} ID of a list. */
id: prop_types.string,
/** @type {boolean} State of a list. */
isExpandedOnPageLoad: prop_types.bool,
/** @type {boolean} Title of nav. */
navigationItemTitle: prop_types.string,
/** @type {Function} Click handler for an item. */
onItemClick: prop_types.func,
/** @type {Function} Click handler for a list. */
onListClick: prop_types.func,
/** @type {number} `tabindex` of an item. */
tabIndex: prop_types.number,
/** @type {string} Label of the list. */
title: prop_types.string
};
NavList.displayName = componentName;
NavList = require_settings.pkg.checkComponentEnabled(NavList, componentName);
var NavList_default = NavList;
//#endregion
Object.defineProperty(exports, "NavList", {
enumerable: true,
get: function() {
return NavList;
}
});
exports.blockClass = blockClass;
exports.default = NavList_default;