@carbon/ibm-products
Version:
Carbon for IBM Products
132 lines (130 loc) • 5.41 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_EditInPlace = require("../EditInPlace/EditInPlace.js");
const require_useOverflowString = require("../../global/js/hooks/useOverflowString.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/PageHeader/PageHeaderTitle.jsx
/**
* Copyright IBM Corp. 2024, 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);
/**
*
* Utility component used by Page Header
*/
const PageHeaderTitle = ({ blockClass, hasBreadcrumbRow, title }) => {
let titleInnards;
let { text, content, loading, icon, asText, onChange, onSave, editDescription, editableLabel, cancelDescription, saveDescription, tooltipAlignment = "bottom", ...rest } = title;
let titleText;
let isEditable = !!onSave;
const titleRef = (0, react.useRef)(void 0);
const isEllipsisApplied = require_useOverflowString.useOverflowStringWidth(titleRef);
if (text || !content) {
if (text === void 0 && typeof title === "string") {
text = title;
asText = title;
}
const TitleIcon = icon;
const titleContent = /* @__PURE__ */ react.default.createElement("span", {
ref: titleRef,
className: `${blockClass}__titleText`
}, text);
titleInnards = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, icon && !loading ? /* @__PURE__ */ react.default.createElement("span", { className: `${blockClass}__title-icon-wrapper` }, /* @__PURE__ */ react.default.createElement(TitleIcon, { className: `${blockClass}__title-icon` })) : null, loading ? /* @__PURE__ */ react.default.createElement(_carbon_react.SkeletonText, { className: `${blockClass}__title-skeleton` }) : isEditable ? /* @__PURE__ */ react.default.createElement(require_EditInPlace.EditInPlace, {
tooltipAlignment: "bottom",
value: text,
cancelLabel: cancelDescription,
editLabel: editDescription,
saveLabel: saveDescription,
labelText: editableLabel,
onChange,
onSave,
size: "md",
inheritTypography: true,
...rest
}) : isEllipsisApplied ? /* @__PURE__ */ react.default.createElement(_carbon_react.DefinitionTooltip, {
openOnHover: false,
align: tooltipAlignment,
definition: text,
className: `${blockClass}__tooltip`
}, titleContent) : titleContent);
} else {
titleInnards = content;
titleText = asText;
}
return /* @__PURE__ */ react.default.createElement("h1", {
className: (0, import_classnames.default)(`${blockClass}__title`, { [`${blockClass}__title--editable`]: isEditable }, { [`${blockClass}__title--fades`]: hasBreadcrumbRow }),
title: titleText
}, titleInnards);
};
PageHeaderTitle.propTypes = {
blockClass: prop_types.default.string.isRequired,
/**
* controlled from within page header
*/
hasBreadcrumbRow: prop_types.default.bool,
/**
* An optional page title supplied as a string or object with the following attributes: text, icon, loading
*
* Can be supplied either as:
* - String
* - Object containing
* - text: title string
* - icon: optional icon
* - loading: boolean shows loading indicator if true
* - onChange: function to process the live value (React change === HTML Input)
* - onSave: function to process a confirmed change
* - editDescription: description for edit button
* - editableLabel: label for edit required if onSave supplied
* - cancelDescription: description for edit cancel button
* - saveDescription: description for edit save button
* - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
* - content: title or name of current location shown in main part of page header
* - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
* - asText: String based representation of the title
*/
title: prop_types.default.oneOfType([
prop_types.default.shape({
text: prop_types.default.string.isRequired,
icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
loading: prop_types.default.bool,
editDescription: prop_types.default.string,
editableLabel: prop_types.default.string,
id: prop_types.default.string,
onChange: prop_types.default.func,
onSave: prop_types.default.func,
cancelDescription: prop_types.default.string,
saveDescription: prop_types.default.string,
tooltipAlignment: prop_types.default.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right"
])
}),
prop_types.default.string,
prop_types.default.shape({
content: prop_types.default.node.isRequired,
breadcrumbContent: prop_types.default.node,
asText: prop_types.default.string.isRequired
})
])
};
//#endregion
exports.PageHeaderTitle = PageHeaderTitle;