@carbon/ibm-products
Version:
Carbon for IBM Products
130 lines (128 loc) • 4.94 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 { EditInPlace } from "../EditInPlace/EditInPlace.js";
import { useOverflowStringWidth } from "../../global/js/hooks/useOverflowString.js";
import React, { useRef } from "react";
import PropTypes from "prop-types";
import { DefinitionTooltip, SkeletonText } from "@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__ */ __toESM(require_classnames());
/**
*
* 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 = useRef(void 0);
const isEllipsisApplied = useOverflowStringWidth(titleRef);
if (text || !content) {
if (text === void 0 && typeof title === "string") {
text = title;
asText = title;
}
const TitleIcon = icon;
const titleContent = /* @__PURE__ */ React.createElement("span", {
ref: titleRef,
className: `${blockClass}__titleText`
}, text);
titleInnards = /* @__PURE__ */ React.createElement(React.Fragment, null, icon && !loading ? /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__title-icon-wrapper` }, /* @__PURE__ */ React.createElement(TitleIcon, { className: `${blockClass}__title-icon` })) : null, loading ? /* @__PURE__ */ React.createElement(SkeletonText, { className: `${blockClass}__title-skeleton` }) : isEditable ? /* @__PURE__ */ React.createElement(EditInPlace, {
tooltipAlignment: "bottom",
value: text,
cancelLabel: cancelDescription,
editLabel: editDescription,
saveLabel: saveDescription,
labelText: editableLabel,
onChange,
onSave,
size: "md",
inheritTypography: true,
...rest
}) : isEllipsisApplied ? /* @__PURE__ */ React.createElement(DefinitionTooltip, {
openOnHover: false,
align: tooltipAlignment,
definition: text,
className: `${blockClass}__tooltip`
}, titleContent) : titleContent);
} else {
titleInnards = content;
titleText = asText;
}
return /* @__PURE__ */ React.createElement("h1", {
className: (0, import_classnames.default)(`${blockClass}__title`, { [`${blockClass}__title--editable`]: isEditable }, { [`${blockClass}__title--fades`]: hasBreadcrumbRow }),
title: titleText
}, titleInnards);
};
PageHeaderTitle.propTypes = {
blockClass: PropTypes.string.isRequired,
/**
* controlled from within page header
*/
hasBreadcrumbRow: PropTypes.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: PropTypes.oneOfType([
PropTypes.shape({
text: PropTypes.string.isRequired,
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
loading: PropTypes.bool,
editDescription: PropTypes.string,
editableLabel: PropTypes.string,
id: PropTypes.string,
onChange: PropTypes.func,
onSave: PropTypes.func,
cancelDescription: PropTypes.string,
saveDescription: PropTypes.string,
tooltipAlignment: PropTypes.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right"
])
}),
PropTypes.string,
PropTypes.shape({
content: PropTypes.node.isRequired,
breadcrumbContent: PropTypes.node,
asText: PropTypes.string.isRequired
})
])
};
//#endregion
export { PageHeaderTitle };