@carbon/ibm-products
Version:
Carbon for IBM Products
128 lines (126 loc) • 4.16 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 uuidv4 from "../../global/js/utils/uuidv4.js";
import { Launch } from "../../node_modules/@carbon/icons-react/es/generated/bucket-11.js";
import NavItemLink from "./NavItemLink.js";
import React, { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
//#region src/components/Nav/NavItem.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 blockClass = `${pkg.prefix}--nav-item`;
const componentName = "NavItem";
const defaults = {
activeHref: "#",
disabled: false,
element: "a",
onClick: () => {},
tabIndex: 0
};
/**
* Navigation item component.
*/
let NavItem = ({ activeHref = defaults.activeHref, children = defaults.children, className, current, disabled = defaults.disabled, element = defaults.element, href, id, label, onClick = defaults.onClick, tabIndex = defaults.tabIndex, ...rest }) => {
const [hrefHasDifferentHost, setHrefHasDifferentHost] = useState(false);
useEffect(() => {
if (href?.indexOf(window.location.host) === -1) setHrefHasDifferentHost(true);
}, [href]);
const instanceId = `${blockClass}__${useRef(uuidv4()).current}`;
const navItemId = id || instanceId;
const externalLink = (/* @__PURE__ */ new RegExp("^([a-z]+://|//)", "i")).test(href) && hrefHasDifferentHost;
const linkClassName = `${blockClass}__link`;
const handleDisabled = (action, defaultValue = null) => {
return !disabled ? action : defaultValue;
};
const navItemTabIndex = handleDisabled(tabIndex, -1);
const externalLinkProps = externalLink && {
rel: "noopener noreferrer",
target: "_blank"
};
return /* @__PURE__ */ React.createElement("li", {
...rest,
className: (0, import_classnames.default)(blockClass, className, {
[`${blockClass}--active`]: current !== null && current === navItemId || activeHref !== void 0 && activeHref === href && !externalLink,
[`${blockClass}--disabled`]: disabled
}),
label,
onClick: (event) => handleDisabled(onClick(event, href)),
onKeyDown: (event) => handleDisabled(onClick(event, href)),
role: "menuitem"
}, /* @__PURE__ */ React.createElement(NavItemLink, {
id: navItemId,
className: (0, import_classnames.default)(linkClassName, { [`${blockClass}__link--external`]: externalLink }),
element,
href,
tabIndex: navItemTabIndex,
...rest,
...externalLinkProps
}, children, externalLink && /* @__PURE__ */ React.createElement(Launch, { className: `${blockClass}__link--external__icon` })));
};
NavItem.displayName = componentName;
NavItem.propTypes = {
/**
* Hypertext reference for active page.
*/
activeHref: PropTypes.string,
/**
* Provide the contents of the Nav.
*/
children: PropTypes.node.isRequired,
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* Currently selected item.
*/
current: PropTypes.string,
/**
* Whether the item is disabled.
*/
disabled: PropTypes.bool,
/**
* The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`.
*/
element: PropTypes.elementType,
/**
* The href of the nav item.
*/
href: PropTypes.string,
/**
* Identifier.
*/
id: PropTypes.string,
/**
* Label of an item.
*/
label: PropTypes.string,
/**
* Whether the item is a link.
*/
link: PropTypes.bool,
/**
* Click handler of an item.
*/
onClick: PropTypes.func,
/**
* `tabindex` of an item.
*/
tabIndex: PropTypes.number
};
NavItem = pkg.checkComponentEnabled(NavItem, componentName);
var NavItem_default = NavItem;
//#endregion
export { NavItem, blockClass, NavItem_default as default };