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