@carbon/ibm-products
Version:
Carbon for IBM Products
94 lines (92 loc) • 3.87 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_pconsole = require("../../global/js/utils/pconsole.js");
const require_settings = require("../../settings.js");
const require_BreadcrumbWithOverflow = require("../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/SimpleHeader/SimpleHeader.jsx
/**
* Copyright IBM Corp. 2023, 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--simple-header`;
const componentName = "SimpleHeader";
/**
* The SimpleHeader is not public and only used internally by CreateFullPage.
*
* Component varieties:
* - Header with Breadcrumbs
* - Header with Title
* - Header with Breadcrumbs and Title
*
*
* The component will throw a warning message if neither a title or breadcrumbs are provided
* since it requires at least one of them.
* */
const SimpleHeader = ({ breadcrumbs, className, title, noTrailingSlash = true, maxVisible, overflowAriaLabel, overflowTooltipAlign, ...rest }) => {
const warnIfNoTitleOrBreadcrumbs = (0, react.useCallback)(() => {
if (!title && !breadcrumbs?.length) require_pconsole.default.error(`Warning: You have tried using a ${componentName} component without specifying a title or breadcrumbs props`);
}, [breadcrumbs, title]);
(0, react.useEffect)(() => {
warnIfNoTitleOrBreadcrumbs();
}, [
title,
breadcrumbs,
warnIfNoTitleOrBreadcrumbs
]);
return /* @__PURE__ */ react.default.createElement("header", {
className: (0, import_classnames.default)(blockClass, className),
...rest
}, breadcrumbs?.length > 0 && /* @__PURE__ */ react.default.createElement(require_BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
noTrailingSlash,
className: (0, import_classnames.default)(`${blockClass}__breadcrumbs`),
breadcrumbs,
maxVisible,
overflowAriaLabel,
overflowTooltipAlign
}), title && /* @__PURE__ */ react.default.createElement(_carbon_react.Heading, { className: (0, import_classnames.default)(`${blockClass}__title`) }, title));
};
SimpleHeader.propTypes = {
/** Header breadcrumbs */
breadcrumbs: prop_types.default.arrayOf(prop_types.default.shape({
/** breadcrumb item key */
key: prop_types.default.string.isRequired,
/** breadcrumb item label */
label: prop_types.default.string.isRequired,
/** breadcrumb item link */
href: prop_types.default.string,
/** breadcrumb item title tooltip */
title: prop_types.default.string,
/** Provide if this breadcrumb item represents the current page */
isCurrentPage: prop_types.default.bool
})),
/** Header classname */
className: prop_types.default.string,
/** Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
maxVisible: prop_types.default.number,
/** A prop to omit the trailing slash for the breadcrumbs */
noTrailingSlash: prop_types.default.bool,
/** Label for open/close overflow button used for breadcrumb items that do not fit */
overflowAriaLabel: prop_types.default.string,
/**
* overflowTooltipAlign: align tooltip position
*/
overflowTooltipAlign: _carbon_react.Tooltip.propTypes.align,
/** Header title */
title: prop_types.default.string
};
//#endregion
exports.SimpleHeader = SimpleHeader;