@carbon/ibm-products
Version:
Carbon for IBM Products
92 lines (90 loc) • 3.51 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 pconsole_default from "../../global/js/utils/pconsole.js";
import { pkg } from "../../settings.js";
import { BreadcrumbWithOverflow } from "../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js";
import React, { useCallback, useEffect } from "react";
import PropTypes from "prop-types";
import { Heading, Tooltip } from "@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__ */ __toESM(require_classnames());
const blockClass = `${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 = useCallback(() => {
if (!title && !breadcrumbs?.length) pconsole_default.error(`Warning: You have tried using a ${componentName} component without specifying a title or breadcrumbs props`);
}, [breadcrumbs, title]);
useEffect(() => {
warnIfNoTitleOrBreadcrumbs();
}, [
title,
breadcrumbs,
warnIfNoTitleOrBreadcrumbs
]);
return /* @__PURE__ */ React.createElement("header", {
className: (0, import_classnames.default)(blockClass, className),
...rest
}, breadcrumbs?.length > 0 && /* @__PURE__ */ React.createElement(BreadcrumbWithOverflow, {
noTrailingSlash,
className: (0, import_classnames.default)(`${blockClass}__breadcrumbs`),
breadcrumbs,
maxVisible,
overflowAriaLabel,
overflowTooltipAlign
}), title && /* @__PURE__ */ React.createElement(Heading, { className: (0, import_classnames.default)(`${blockClass}__title`) }, title));
};
SimpleHeader.propTypes = {
/** Header breadcrumbs */
breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
/** breadcrumb item key */
key: PropTypes.string.isRequired,
/** breadcrumb item label */
label: PropTypes.string.isRequired,
/** breadcrumb item link */
href: PropTypes.string,
/** breadcrumb item title tooltip */
title: PropTypes.string,
/** Provide if this breadcrumb item represents the current page */
isCurrentPage: PropTypes.bool
})),
/** Header classname */
className: PropTypes.string,
/** Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
maxVisible: PropTypes.number,
/** A prop to omit the trailing slash for the breadcrumbs */
noTrailingSlash: PropTypes.bool,
/** Label for open/close overflow button used for breadcrumb items that do not fit */
overflowAriaLabel: PropTypes.string,
/**
* overflowTooltipAlign: align tooltip position
*/
overflowTooltipAlign: Tooltip.propTypes.align,
/** Header title */
title: PropTypes.string
};
//#endregion
export { SimpleHeader };