@carbon/ibm-products
Version:
Carbon for IBM Products
141 lines (139 loc) • 4.74 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_devtools = require("../../global/js/utils/devtools.js");
const require_NavItem = require("./NavItem.js");
const require_NavList = require("./NavList.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
//#region src/components/Nav/Nav.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__ */ require_runtime.__toESM(require_index.default);
const componentName = "Nav";
const blockClass = `${require_settings.pkg.prefix}--nav`;
/**
* @deprecated This component is deprecated
*/
let Nav = react.default.forwardRef(({ activeHref, className, children, heading, label, ...rest }, ref) => {
const [_activeHref, setActiveHref] = (0, react.useState)(activeHref);
const navigationLists = (0, react.useRef)({});
(0, 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 = `${require_NavItem.blockClass}--${index}`;
return /* @__PURE__ */ react.default.createElement(require_NavItem.default, {
...child.props,
activeHref: _activeHref,
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 = `${require_NavList.blockClass}--${index}`;
return /* @__PURE__ */ react.default.createElement(require_NavList.default, {
...child.props,
activeHref: _activeHref,
id: 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;
if ((which === 13 || which === 32 || type === "click") && href !== _activeHref) 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.default.createElement("nav", {
className: (0, import_classnames.default)(blockClass, className),
"aria-label": label,
ref,
...require_devtools.getDevtoolsProps(componentName),
...rest
}, heading && /* @__PURE__ */ react.default.createElement("h1", { className: `${blockClass}__heading` }, heading), /* @__PURE__ */ react.default.createElement("ul", {
className: `${blockClass}__wrapper`,
role: "menubar"
}, react.default.Children.map(children, (child, index) => {
return child?.type?.displayName === require_NavList.default.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
})));
});
Nav.deprecated = {
level: "warn",
details: `This component is deprecated`
};
Nav.propTypes = {
/**
* Hypertext reference for active page.
*/
activeHref: prop_types.default.string,
/**
* Child elements.
*/
children: prop_types.default.node,
/**
* Extra classes to add.
*/
className: prop_types.default.string,
/**
* Heading.
*/
heading: prop_types.default.string,
/**
* Aria-label on the rendered `nav` element.
*/
label: prop_types.default.string.isRequired
};
Nav = require_settings.pkg.checkComponentEnabled(Nav, componentName);
Nav.displayName = componentName;
//#endregion
Object.defineProperty(exports, "Nav", {
enumerable: true,
get: function() {
return Nav;
}
});