@carbon/ibm-products
Version:
Carbon for IBM Products
185 lines (183 loc) • 8.42 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_settings = require("../../../settings.js");
const require_useResizeObserver = require("../../../global/js/hooks/useResizeObserver.js");
const require_PageHeaderUtils = require("../PageHeaderUtils.js");
const require_context = require("./context.js");
const require_utils = require("./utils.js");
const require_PageHeaderBreadcrumbBar = require("./PageHeaderBreadcrumbBar.js");
const require_PageHeaderContent = require("./PageHeaderContent.js");
const require_PageHeaderContentPageActions = require("./PageHeaderContentPageActions.js");
const require_PageHeaderContentText = require("./PageHeaderContentText.js");
const require_PageHeaderHeroImage = require("./PageHeaderHeroImage.js");
const require_PageHeaderTabBar = require("./PageHeaderTabBar.js");
const require_PageHeaderTagOverflow = require("./PageHeaderTagOverflow.js");
const require_PageHeaderScrollButton = require("./PageHeaderScrollButton.js");
const require_PageHeaderTitleBreadcrumb = require("./PageHeaderTitleBreadcrumb.js");
const require_PageHeaderBreadcrumbOverflow = require("./PageHeaderBreadcrumbOverflow.js");
const require_PageHeaderBreadcrumbPageActions = require("./PageHeaderBreadcrumbPageActions.js");
let react = require("react");
react = require_runtime.__toESM(react);
//#region src/components/PageHeader/next/PageHeader.tsx
/**
* Copyright IBM Corp. 2025, 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 PageHeader = react.default.forwardRef(function PageHeader({ className, children, onContentFullyCollapsed, onTitleClipped, onContentActionsClipped, ...other }, ref) {
const [refs, setRefs] = (0, react.useState)({});
const [pageActionsInstance, setPageActionsInstance] = (0, react.useState)(null);
const [disableStickyTabBar, setDisableStickyTabBar] = (0, react.useState)(false);
const tempRef = (0, react.useRef)(null);
const componentRef = ref ?? tempRef;
const classNames = (0, import_classnames.default)({
[`${require_PageHeaderUtils.blockClass}`]: true,
[`${require_PageHeaderUtils.blockClass}__next`]: true,
[`${require_PageHeaderUtils.blockClass}--disable-sticky-tab-bar`]: disableStickyTabBar
}, className);
require_useResizeObserver.useResizeObserver(componentRef, () => {
if (componentRef?.current) {
const pageHeaderContentHeight = refs?.contentRef?.current?.offsetHeight ?? 0;
const totalHeaderOffset = require_utils.getHeaderOffset(componentRef?.current);
componentRef?.current.style.setProperty(`--${require_settings.pkg.prefix}-page-header-header-top`, `${(Math.round(pageHeaderContentHeight) - totalHeaderOffset) * -1}px`);
componentRef?.current.style.setProperty(`--${require_settings.pkg.prefix}-page-header-breadcrumb-top`, `${totalHeaderOffset}px`);
}
});
const [fullyCollapsed, setFullyCollapsed] = (0, react.useState)(false);
const [titleClipped, setTitleClipped] = (0, react.useState)(false);
const [contentActionsClipped, setContentActionsClipped] = (0, react.useState)(false);
(0, react.useEffect)(() => {
if (!componentRef?.current) return;
const totalHeaderOffset = require_utils.getHeaderOffset(componentRef?.current);
const predefinedContentPadding = 24;
const contentObserver = refs?.contentRef?.current ? new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.target === refs?.contentRef.current) {
const collapsed = !entry.isIntersecting;
setFullyCollapsed(collapsed);
onContentFullyCollapsed?.(collapsed);
}
});
}, {
root: null,
rootMargin: `${(predefinedContentPadding + (refs?.contentRef?.current?.offsetHeight || 0) + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
threshold: .1
}) : null;
const titleObserver = refs?.titleRef?.current ? new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.target === refs?.titleRef.current) {
const clipped = !entry.isIntersecting;
setTitleClipped(clipped);
onTitleClipped?.(clipped);
}
});
}, {
root: null,
rootMargin: `${(predefinedContentPadding + (refs?.titleRef.current.offsetHeight || 0) + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
threshold: .1
}) : null;
const contentActionsObserver = refs?.contentActions?.current ? new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.target === refs?.contentActions.current) {
const clipped = !entry.isIntersecting;
setContentActionsClipped(clipped);
onContentActionsClipped?.(clipped);
}
});
}, {
root: null,
rootMargin: `${(predefinedContentPadding + (refs?.contentActions?.current?.offsetHeight || 0) + totalHeaderOffset + 24) * -1}px 0px 0px 0px`,
threshold: .1
}) : null;
if (refs?.contentRef?.current && contentObserver) contentObserver.observe(refs.contentRef.current);
if (refs?.titleRef?.current && titleObserver) titleObserver.observe(refs.titleRef.current);
if (refs?.contentActions?.current && contentActionsObserver) contentActionsObserver.observe(refs.contentActions.current);
return () => {
contentObserver?.disconnect();
titleObserver?.disconnect();
contentActionsObserver?.disconnect();
};
}, [
refs?.contentRef,
refs?.titleRef,
refs?.contentActions,
componentRef,
onContentFullyCollapsed,
onTitleClipped,
onContentActionsClipped
]);
const observerState = (0, react.useMemo)(() => ({
fullyCollapsed,
titleClipped,
contentActionsClipped
}), [
fullyCollapsed,
titleClipped,
contentActionsClipped
]);
return /* @__PURE__ */ react.default.createElement(require_context.PageHeaderContext.Provider, { value: {
refs,
setRefs,
pageActionsInstance,
setPageActionsInstance,
observerState,
disableStickyTabBar,
setDisableStickyTabBar
} }, /* @__PURE__ */ react.default.createElement("div", {
className: classNames,
ref: componentRef,
...other
}, children));
});
PageHeader.displayName = "PageHeader";
/**
* -------
* Exports
* -------
*/
const Root = PageHeader;
Root.displayName = "PageHeader.Root";
const BreadcrumbBar = require_PageHeaderBreadcrumbBar.PageHeaderBreadcrumbBar;
BreadcrumbBar.displayName = "PageHeaderBreadcrumbBar";
const Content = require_PageHeaderContent.PageHeaderContent;
Content.displayName = "PageHeaderContent";
const ContentPageActions = require_PageHeaderContentPageActions.PageHeaderContentPageActions;
ContentPageActions.displayName = "PageHeaderContentPageActions";
const ContentText = require_PageHeaderContentText.PageHeaderContentText;
ContentText.displayName = "PageHeaderContentText";
const HeroImage = require_PageHeaderHeroImage.PageHeaderHeroImage;
HeroImage.displayName = "PageHeaderHeroImage";
const TabBar = require_PageHeaderTabBar.PageHeaderTabBar;
TabBar.displayName = "PageHeaderTabBar";
const ScrollButton = require_PageHeaderScrollButton.PageHeaderScrollButton;
ScrollButton.displayName = "PageHeaderScrollButton";
const TitleBreadcrumb = require_PageHeaderTitleBreadcrumb.PageHeaderTitleBreadcrumb;
TitleBreadcrumb.displayName = "PageHeaderTitleBreadcrumb";
const BreadcrumbOverflow = require_PageHeaderBreadcrumbOverflow.PageHeaderBreadcrumbOverflow;
BreadcrumbOverflow.displayName = "PageHeaderBreadcrumbOverflow";
const TagOverflow = require_PageHeaderTagOverflow.PageHeaderTagOverflow;
TagOverflow.displayName = "PageHeaderTagOverflow";
const BreadcrumbPageActions = require_PageHeaderBreadcrumbPageActions.PageHeaderBreadcrumbPageActions;
BreadcrumbPageActions.displayName = "PageHeaderBreadcrumbPageActions";
//#endregion
exports.BreadcrumbBar = BreadcrumbBar;
exports.BreadcrumbOverflow = BreadcrumbOverflow;
exports.BreadcrumbPageActions = BreadcrumbPageActions;
exports.Content = Content;
exports.ContentPageActions = ContentPageActions;
exports.ContentText = ContentText;
exports.HeroImage = HeroImage;
exports.PageHeader = PageHeader;
exports.Root = Root;
exports.ScrollButton = ScrollButton;
exports.TabBar = TabBar;
exports.TagOverflow = TagOverflow;
exports.TitleBreadcrumb = TitleBreadcrumb;