@carbon/ibm-products
Version:
Carbon for IBM Products
118 lines (116 loc) • 5.21 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_useIsomorphicEffect = require("../../../global/js/hooks/useIsomorphicEffect.js");
const require_PageHeaderUtils = require("../PageHeaderUtils.js");
const require_context = require("./context.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/next/PageHeaderContent.tsx
/**
* Copyright IBM Corp. 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const PageHeaderContent = react.default.forwardRef(function PageHeaderContent({ className, children, title, titleAs = "h1", renderIcon: IconElement, contextualActions, pageActions, ...other }, ref) {
const contentRef = (0, react.useRef)(null);
const componentRef = ref ?? contentRef;
const { setRefs, setPageActionsInstance } = require_context.usePageHeader();
const classNames = (0, import_classnames.default)({ [`${require_PageHeaderUtils.blockClass}__content`]: true }, className);
const titleRef = (0, react.useRef)(null);
(0, react.useEffect)(() => {
if (componentRef?.current) setRefs((prev) => ({
...prev,
contentRef: componentRef,
titleRef
}));
}, []);
(0, react.useEffect)(() => {
if (typeof pageActions === "function") setPageActionsInstance(() => pageActions);
else setPageActionsInstance(pageActions ?? null);
}, [pageActions]);
const [isEllipsisApplied, setIsEllipsisApplied] = (0, react.useState)(false);
const isEllipsisActive = (element) => {
setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
return element.offsetHeight < element.scrollHeight;
};
require_useIsomorphicEffect.useIsomorphicEffect(() => {
titleRef.current && isEllipsisActive(titleRef.current);
}, [title]);
return /* @__PURE__ */ react.default.createElement(_carbon_react.Section, {
as: "div",
className: classNames,
ref: componentRef,
...other
}, /* @__PURE__ */ react.default.createElement(_carbon_react.Grid, null, /* @__PURE__ */ react.default.createElement(_carbon_react.Column, {
lg: 16,
md: 8,
sm: 4
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__title-wrapper` }, /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__start` }, /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__title-container` }, IconElement && /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__icon` }, /* @__PURE__ */ react.default.createElement(IconElement, null)), isEllipsisApplied ? /* @__PURE__ */ react.default.createElement(_carbon_react.DefinitionTooltip, { definition: title }, /* @__PURE__ */ react.default.createElement(_carbon_react.unstable_Text, {
ref: titleRef,
as: titleAs,
className: `${require_PageHeaderUtils.blockClass}__content__title`
}, title)) : /* @__PURE__ */ react.default.createElement(_carbon_react.unstable_Text, {
ref: titleRef,
as: titleAs,
className: `${require_PageHeaderUtils.blockClass}__content__title`
}, title)), contextualActions && /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__contextual-actions` }, contextualActions)), typeof pageActions === "function" ? pageActions({
fullyCollapsed: false,
titleClipped: false,
contentActionsClipped: false
}) : pageActions), children)));
});
PageHeaderContent.displayName = "PageHeaderContent";
PageHeaderContent.propTypes = {
/**
* Provide child elements to be rendered inside PageHeaderContent.
*/
children: prop_types.default.node,
/**
* Specify an optional className to be added to your PageHeaderContent
*/
className: prop_types.default.string,
/**
* The PageHeaderContent's contextual actions
*/
contextualActions: prop_types.default.node,
/**
* The PageHeaderContent's page actions
*/
pageActions: prop_types.default.node,
/**
* Provide an optional icon to render in front of the PageHeaderContent's title.
*/
renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
/**
* The PageHeaderContent's subtitle
*/
subtitle: prop_types.default.string,
/**
* The PageHeaderContent's title
*/
title: prop_types.default.string.isRequired,
/**
* Specify the element or component used to render the title.
*/
titleAs: prop_types.default.oneOfType([prop_types.default.oneOf([
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
]), prop_types.default.elementType])
};
//#endregion
exports.PageHeaderContent = PageHeaderContent;