@carbon/ibm-products 2.89.0 → 2.90.0

package/lib/components/PageHeader/next/PageHeaderBreadcrumbPageActions.js

@@ -5,16 +5,15 @@
  * 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_PageHeaderUtils = require('../PageHeaderUtils.js');
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../../node_modules/classnames/index.js");
+const require_PageHeaderUtils = require("../PageHeaderUtils.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");
 let _carbon_utilities = require("@carbon/utilities");
-
 //#region src/components/PageHeader/next/PageHeaderBreadcrumbPageActions.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -74,12 +73,18 @@ const PageHeaderBreadcrumbPageActions = ({ actions, className, overflowMenuLabel
 };
 PageHeaderBreadcrumbPageActions.displayName = "PageHeaderBreadcrumbPageActions";
 PageHeaderBreadcrumbPageActions.propTypes = {
+	/**
+	* Array of action items to display
+	*/
 	actions: prop_types.default.arrayOf(prop_types.default.shape({
 		id: prop_types.default.string.isRequired,
 		label: prop_types.default.string.isRequired,
 		renderIcon: prop_types.default.elementType.isRequired,
 		onClick: prop_types.default.func
 	}).isRequired).isRequired,
+	/**
+	* Kind of the action buttons
+	*/
 	buttonKind: prop_types.default.oneOf([
 		"primary",
 		"secondary",
@@ -89,14 +94,22 @@ PageHeaderBreadcrumbPageActions.propTypes = {
 		"danger--tertiary",
 		"danger--ghost"
 	]),
+	/**
+	* Size of the action buttons
+	*/
 	buttonSize: prop_types.default.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Specify an optional className to be added to the component
+	*/
 	className: prop_types.default.string,
+	/**
+	* Aria label for the overflow menu
+	*/
 	overflowMenuLabel: prop_types.default.string
 };
-
 //#endregion
-exports.PageHeaderBreadcrumbPageActions = PageHeaderBreadcrumbPageActions;
+exports.PageHeaderBreadcrumbPageActions = PageHeaderBreadcrumbPageActions;

package/lib/components/PageHeader/next/PageHeaderContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAMvB,MAAM,OAAO,CAAC;AAaf,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAExE;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC/C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,iBAAiB,+FA2G5B,CAAC"}
+{"version":3,"file":"PageHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AAaf,OAAO,EAAiB,KAAK,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAExE;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC/C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,iBAAiB,+FAyG5B,CAAC"}

package/lib/components/PageHeader/next/PageHeaderContent.js

@@ -5,17 +5,16 @@
  * 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');
+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
@@ -27,10 +26,9 @@ var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.de
 const PageHeaderContent = react.default.forwardRef(function PageHeaderContent({ className, children, title, renderIcon: IconElement, contextualActions, pageActions, ...other }, ref) {
 	const contentRef = (0, react.useRef)(null);
 	const componentRef = ref ?? contentRef;
-	const { setRefs, setPageActionsInstance, observerState } = require_context.usePageHeader();
+	const { setRefs, setPageActionsInstance } = require_context.usePageHeader();
 	const classNames = (0, import_classnames.default)({ [`${require_PageHeaderUtils.blockClass}__content`]: true }, className);
 	const titleRef = (0, react.useRef)(null);
-	const resolvedPageActions = (0, react.useMemo)(() => typeof pageActions === "function" ? pageActions(observerState) : pageActions, [pageActions, observerState]);
 	(0, react.useEffect)(() => {
 		if (componentRef?.current) setRefs((prev) => ({
 			...prev,
@@ -39,8 +37,9 @@ const PageHeaderContent = react.default.forwardRef(function PageHeaderContent({
 		}));
 	}, []);
 	(0, react.useEffect)(() => {
-		if (resolvedPageActions) setPageActionsInstance(resolvedPageActions);
-	}, [resolvedPageActions]);
+		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);
@@ -66,18 +65,42 @@ const PageHeaderContent = react.default.forwardRef(function PageHeaderContent({
 		ref: titleRef,
 		as: _carbon_react.Heading,
 		className: `${require_PageHeaderUtils.blockClass}__content__title`
-	}, title)), contextualActions && /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__contextual-actions` }, contextualActions)), resolvedPageActions), children)));
+	}, 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
 };
-
 //#endregion
-exports.PageHeaderContent = PageHeaderContent;
+exports.PageHeaderContent = PageHeaderContent;

package/lib/components/PageHeader/next/PageHeaderContentPageActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderContentPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContentPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAOnC;;;;GAIG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,4BAA4B;kEAMtC,iCAAiC;;;QA8GlC;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAnBJ,CAAC"}
+{"version":3,"file":"PageHeaderContentPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderContentPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAOnC;;;;GAIG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,4BAA4B;kEAMtC,iCAAiC;;;QAqHlC;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAnBJ,CAAC"}

package/lib/components/PageHeader/next/PageHeaderContentPageActions.js

@@ -5,18 +5,17 @@
  * 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');
+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");
 let _carbon_utilities = require("@carbon/utilities");
-
 //#region src/components/PageHeader/next/PageHeaderContentPageActions.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -32,12 +31,16 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 	const offsetRef = (0, react.useRef)(null);
 	const [menuButtonVisibility, setMenuButtonVisibility] = (0, react.useState)(false);
 	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
+	const [hasMounted, setHasMounted] = (0, react.useState)(false);
 	require_useIsomorphicEffect.useIsomorphicEffect(() => {
 		if (menuButtonVisibility && offsetRef.current) {
 			const width = offsetRef.current.offsetWidth;
 			document.documentElement.style.setProperty("--page-header-title-grid-width", `${width}px`);
 		}
 	}, [menuButtonVisibility]);
+	(0, react.useEffect)(() => {
+		setHasMounted(true);
+	}, []);
 	(0, react.useEffect)(() => {
 		if (isInBreadcrumbBar) setRefs((prev) => ({
 			...prev,
@@ -49,7 +52,7 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 		}));
 	}, [isInBreadcrumbBar, setRefs]);
 	(0, react.useEffect)(() => {
-		if (!containerRef.current || !Array.isArray(actions)) return;
+		if (!hasMounted || !containerRef.current || !Array.isArray(actions)) return;
 		(0, _carbon_utilities.createOverflowHandler)({
 			container: containerRef.current,
 			maxVisibleItems: containerRef.current.children.length - 1,
@@ -58,7 +61,7 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 				if (hidden.length > 0) setMenuButtonVisibility(true);
 			}
 		});
-	}, [actions]);
+	}, [actions, hasMounted]);
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: classNames,
 		ref: containerRef,
@@ -70,7 +73,7 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 		"data-offset": true,
 		"data-hidden": true,
 		ref: offsetRef
-	}, /* @__PURE__ */ react.default.createElement(_carbon_react.MenuButton, {
+	}, hasMounted ? /* @__PURE__ */ react.default.createElement(_carbon_react.MenuButton, {
 		menuAlignment: "bottom-end",
 		label: menuButtonLabel,
 		size: "md"
@@ -78,15 +81,26 @@ const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "
 		key: item.id,
 		onClick: item.onClick,
 		...item.menuItem
-	}))))));
+	}))) : null)));
 };
 PageHeaderContentPageActions.displayName = "PageHeaderContentPageActions";
 PageHeaderContentPageActions.propTypes = {
+	/**
+	* The PageHeaderContent's page actions
+	*/
 	actions: prop_types.default.oneOfType([prop_types.default.node, prop_types.default.array]),
+	/**
+	* Provide child elements to be rendered inside PageHeaderContentPageActions.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your PageHeaderContentPageActions
+	*/
 	className: prop_types.default.string,
+	/**
+	* The PageHeaderContent's collapsible Menu button label
+	*/
 	menuButtonLabel: prop_types.default.string
 };
-
 //#endregion
-exports.PageHeaderContentPageActions = PageHeaderContentPageActions;
+exports.PageHeaderContentPageActions = PageHeaderContentPageActions;

package/lib/components/PageHeader/next/PageHeaderContentText.js

@@ -5,15 +5,14 @@
  * 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_PageHeaderUtils = require('../PageHeaderUtils.js');
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../../node_modules/classnames/index.js");
+const require_PageHeaderUtils = require("../PageHeaderUtils.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/PageHeaderContentText.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -34,10 +33,18 @@ const PageHeaderContentText = ({ className, children, subtitle, ...other }) => {
 };
 PageHeaderContentText.displayName = "PageHeaderContentText";
 PageHeaderContentText.propTypes = {
+	/**
+	* Provide child elements to be rendered inside PageHeaderContentText.
+	*/
 	children: prop_types.default.node,
+	/**
+	* Specify an optional className to be added to your PageHeaderContentText
+	*/
 	className: prop_types.default.string,
+	/**
+	* The PageHeaderContent's subtitle
+	*/
 	subtitle: prop_types.default.string
 };
-
 //#endregion
-exports.PageHeaderContentText = PageHeaderContentText;
+exports.PageHeaderContentText = PageHeaderContentText;

package/lib/components/PageHeader/next/PageHeaderHeroImage.d.ts

@@ -20,9 +20,17 @@ export interface PageHeaderHeroImageProps {
      * Specify an optional className to be added to your PageHeaderHeroImage
      */
     className?: string;
+    /**
+     * Specify how the image should fit within the container.
+     * - 'cover': Image fills container, may crop edges (default for hero images)
+     * - 'contain': Image fits within container, may show empty space
+     * - 'fill': Image stretches to fill container
+     * - 'none': Image uses its natural size
+     */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
 }
 export declare const PageHeaderHeroImage: {
-    ({ className, children, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
+    ({ className, children, objectFit, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -33,6 +41,10 @@ export declare const PageHeaderHeroImage: {
          * Specify an optional className to be added to your PageHeaderHeroImage
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify how the image should fit within the container.
+         */
+        objectFit: PropTypes.Requireable<string>;
     };
 };
 //# sourceMappingURL=PageHeaderHeroImage.d.ts.map

package/lib/components/PageHeader/next/PageHeaderHeroImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderHeroImage.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderHeroImage.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB;wCAI7B,wBAAwB;;;QA0CzB;;WAEG;;QAEH;;WAEG;;;CAXJ,CAAC"}
+{"version":3,"file":"PageHeaderHeroImage.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderHeroImage.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB;mDAK7B,wBAAwB;;;QA2CzB;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAfJ,CAAC"}

package/lib/components/PageHeader/next/PageHeaderHeroImage.js

@@ -5,16 +5,15 @@
  * 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_PageHeaderUtils = require('../PageHeaderUtils.js');
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../../node_modules/classnames/index.js");
+const require_PageHeaderUtils = require("../PageHeaderUtils.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");
 let _carbon_layout = require("@carbon/layout");
-
 //#region src/components/PageHeader/next/PageHeaderHeroImage.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -23,9 +22,12 @@ let _carbon_layout = require("@carbon/layout");
 * LICENSE file in the root directory of this source tree.
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
-const PageHeaderHeroImage = ({ className, children, ...other }) => {
+const PageHeaderHeroImage = ({ className, children, objectFit = "cover", ...other }) => {
 	const [lgBreakpoint, setLgBreakpoint] = (0, react.useState)(false);
-	const classNames = (0, import_classnames.default)({ [`${require_PageHeaderUtils.blockClass}__hero-image`]: true }, className);
+	const classNames = (0, import_classnames.default)({
+		[`${require_PageHeaderUtils.blockClass}__hero-image`]: true,
+		[`${require_PageHeaderUtils.blockClass}__hero-image--object-fit-${objectFit}`]: objectFit
+	}, className);
 	const lgMediaQuery = `(min-width: ${_carbon_layout.breakpoints.lg.width})`;
 	(0, react.useEffect)(() => {
 		const listener = (event) => {
@@ -46,9 +48,23 @@ const PageHeaderHeroImage = ({ className, children, ...other }) => {
 };
 PageHeaderHeroImage.displayName = "PageHeaderHeroImage";
 PageHeaderHeroImage.propTypes = {
+	/**
+	* Provide child elements to be rendered inside PageHeaderHeroImage.
+	*/
 	children: prop_types.default.node,
-	className: prop_types.default.string
+	/**
+	* Specify an optional className to be added to your PageHeaderHeroImage
+	*/
+	className: prop_types.default.string,
+	/**
+	* Specify how the image should fit within the container.
+	*/
+	objectFit: prop_types.default.oneOf([
+		"cover",
+		"contain",
+		"fill",
+		"none"
+	])
 };
-
 //#endregion
-exports.PageHeaderHeroImage = PageHeaderHeroImage;
+exports.PageHeaderHeroImage = PageHeaderHeroImage;

package/lib/components/PageHeader/next/PageHeaderScrollButton.js

@@ -5,16 +5,15 @@
  * 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_context = require('./context.js');
-const require_utils = require('./utils.js');
+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_context = require("./context.js");
+const require_utils = require("./utils.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _carbon_react = require("@carbon/react");
 let _carbon_react_icons = require("@carbon/react/icons");
-
 //#region src/components/PageHeader/next/PageHeaderScrollButton.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -55,6 +54,5 @@ const PageHeaderScrollButton = react.default.forwardRef(function PageHeaderExpan
 	}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ChevronUp, { className: (0, import_classnames.default)(`${require_settings.pkg.prefix}--page-header--scroller-button-icon`, { [`${require_settings.pkg.prefix}--page-header--scroller-button-icon-collapsed`]: fullyCollapsed }) }));
 });
 PageHeaderScrollButton.displayName = "PageHeaderScrollButton";
-
 //#endregion
-exports.PageHeaderScrollButton = PageHeaderScrollButton;
+exports.PageHeaderScrollButton = PageHeaderScrollButton;

package/lib/components/PageHeader/next/PageHeaderTabBar.js

@@ -5,14 +5,13 @@
  * 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_PageHeaderUtils = require('../PageHeaderUtils.js');
+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_PageHeaderUtils = require("../PageHeaderUtils.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _carbon_react = require("@carbon/react");
-
 //#region src/components/PageHeader/next/PageHeaderTabBar.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -32,7 +31,7 @@ const PageHeaderTabBar = react.default.forwardRef(function PageHeaderTabBar({ cl
 		lg: 16,
 		md: 8,
 		sm: 4
-	}, children, renderScroller())));
+	}, children)), renderScroller());
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: classNames,
 		ref,
@@ -41,9 +40,8 @@ const PageHeaderTabBar = react.default.forwardRef(function PageHeaderTabBar({ cl
 		lg: 16,
 		md: 8,
 		sm: 4
-	}, /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__tab-bar--tablist`, { [`${require_settings.pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller }) }, children, tags, renderScroller()))));
+	}, /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__tab-bar--tablist`, { [`${require_settings.pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller }) }, children, tags))), renderScroller());
 });
 PageHeaderTabBar.displayName = "PageHeaderTabBar";
-
 //#endregion
-exports.PageHeaderTabBar = PageHeaderTabBar;
+exports.PageHeaderTabBar = PageHeaderTabBar;

package/lib/components/PageHeader/next/PageHeaderTagOverflow.js

@@ -5,15 +5,14 @@
  * 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_PageHeaderUtils = require('../PageHeaderUtils.js');
-const require_overflowHandler = require('./overflowHandler.js');
+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_PageHeaderUtils = require("../PageHeaderUtils.js");
+const require_overflowHandler = require("./overflowHandler.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _carbon_react = require("@carbon/react");
-
 //#region src/components/PageHeader/next/PageHeaderTagOverflow.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -59,6 +58,5 @@ const PageHeaderTagOverflow = react.default.forwardRef(({ renderOverflowTag, ren
 	}, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover), /* @__PURE__ */ react.default.createElement(_carbon_react.PopoverContent, null, /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__tags-popover-list` }, renderPopoverContent?.(hiddenTags)))));
 });
 PageHeaderTagOverflow.displayName = "PageHeaderTagOverflow";
-
 //#endregion
-exports.PageHeaderTagOverflow = PageHeaderTagOverflow;
+exports.PageHeaderTagOverflow = PageHeaderTagOverflow;

package/lib/components/PageHeader/next/PageHeaderTitleBreadcrumb.js

@@ -5,14 +5,13 @@
  * 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_context = require('./context.js');
+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_context = require("./context.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _carbon_react = require("@carbon/react");
-
 //#region src/components/PageHeader/next/PageHeaderTitleBreadcrumb.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -38,6 +37,5 @@ const PageHeaderTitleBreadcrumb = (0, react.forwardRef)(({ className, children,
 	}, children);
 });
 PageHeaderTitleBreadcrumb.displayName = "PageHeaderTitleBreadcrumb";
-
 //#endregion
-exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb;
+exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb;

package/lib/components/PageHeader/next/context.d.ts

@@ -24,8 +24,8 @@ export type PageHeaderObserverState = {
 type PageHeaderContextType = {
     refs?: PageHeaderRefs;
     setRefs: React.Dispatch<React.SetStateAction<PageHeaderRefs>>;
-    pageActionsInstance?: React.ReactNode;
-    setPageActionsInstance: React.Dispatch<React.SetStateAction<React.ReactNode>>;
+    pageActionsInstance?: React.ReactNode | ((state: PageHeaderObserverState) => React.ReactNode);
+    setPageActionsInstance: React.Dispatch<React.SetStateAction<React.ReactNode | ((state: PageHeaderObserverState) => React.ReactNode)>>;
     observerState: PageHeaderObserverState;
     isContentActionsInBreadcrumbBar?: boolean;
     isFunctionalContentActions?: boolean;

package/lib/components/PageHeader/next/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D;;;;GAIG;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,iBAAiB,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IAC9D,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9E,aAAa,EAAE,uBAAuB,CAAC;IACvC,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,4DAY5B,CAAC;AAEH,wBAAgB,aAAa,0BAQ5B"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D;;;;GAIG;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,iBAAiB,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IAC9D,mBAAmB,CAAC,EAChB,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1D,sBAAsB,EAAE,KAAK,CAAC,QAAQ,CACpC,KAAK,CAAC,cAAc,CAClB,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CACxE,CACF,CAAC;IACF,aAAa,EAAE,uBAAuB,CAAC;IACvC,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,4DAY5B,CAAC;AAEH,wBAAgB,aAAa,0BAQ5B"}

package/lib/components/PageHeader/next/context.js

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
+require("../../../_virtual/_rolldown/runtime.js");
 let react = require("react");
-
 //#region src/components/PageHeader/next/context.ts
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -31,7 +30,6 @@ function usePageHeader() {
 	if (!context) throw new Error("Page header context was not provided or hook was used outside of the Page header component.");
 	return context;
 }
-
 //#endregion
 exports.PageHeaderContext = PageHeaderContext;
-exports.usePageHeader = usePageHeader;
+exports.usePageHeader = usePageHeader;

package/lib/components/PageHeader/next/index.js

@@ -5,20 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const require_runtime = require('../../../_virtual/_rolldown/runtime.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');
-const require_PageHeader = require('./PageHeader.js');
-
+const require_runtime = require("../../../_virtual/_rolldown/runtime.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");
+const require_PageHeader = require("./PageHeader.js");
 //#region src/components/PageHeader/next/index.ts
 var next_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	BreadcrumbBar: () => require_PageHeader.BreadcrumbBar,
@@ -46,11 +45,10 @@ var next_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	TagOverflow: () => require_PageHeader.TagOverflow,
 	TitleBreadcrumb: () => require_PageHeader.TitleBreadcrumb
 });
-
 //#endregion
-Object.defineProperty(exports, 'next_exports', {
-  enumerable: true,
-  get: function () {
-    return next_exports;
-  }
-});
+Object.defineProperty(exports, "next_exports", {
+	enumerable: true,
+	get: function() {
+		return next_exports;
+	}
+});