@carbon/ibm-products 2.87.1 → 2.88.0

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

@@ -0,0 +1,85 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * --------------------------------
+ * PageHeaderBreadcrumbPageActions
+ * --------------------------------
+ */
+export interface PageHeaderBreadcrumbPageActionItem {
+    /**
+     * Unique identifier for the action item
+     */
+    id: string;
+    /**
+     * Label for the action (used for icon description and overflow menu item text)
+     */
+    label: string;
+    /**
+     * Icon component to render for the action button
+     */
+    renderIcon: React.ComponentType;
+    /**
+     * Click handler for the action
+     */
+    onClick?: () => void;
+}
+export interface PageHeaderBreadcrumbPageActionsProps {
+    /**
+     * Array of action items to display
+     */
+    actions: PageHeaderBreadcrumbPageActionItem[];
+    /**
+     * Specify an optional className to be added to the component
+     */
+    className?: string;
+    /**
+     * Aria label for the overflow menu
+     */
+    overflowMenuLabel?: string;
+    /**
+     * Size of the action buttons
+     */
+    buttonSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Kind of the action buttons
+     */
+    buttonKind?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger' | 'danger--tertiary' | 'danger--ghost';
+}
+export declare const PageHeaderBreadcrumbPageActions: {
+    ({ actions, className, overflowMenuLabel, buttonSize, buttonKind, ...other }: PageHeaderBreadcrumbPageActionsProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Array of action items to display
+         */
+        actions: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            label: PropTypes.Validator<string>;
+            renderIcon: PropTypes.Validator<NonNullable<PropTypes.ReactComponentLike>>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>[]>;
+        /**
+         * Kind of the action buttons
+         */
+        buttonKind: PropTypes.Requireable<string>;
+        /**
+         * Size of the action buttons
+         */
+        buttonSize: PropTypes.Requireable<string>;
+        /**
+         * Specify an optional className to be added to the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Aria label for the overflow menu
+         */
+        overflowMenuLabel: PropTypes.Requireable<string>;
+    };
+};
+//# sourceMappingURL=PageHeaderBreadcrumbPageActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeaderBreadcrumbPageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderBreadcrumbPageActions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,SAAS,MAAM,YAAY,CAAC;AAWnC;;;;GAIG;AAEH,MAAM,WAAW,kCAAkC;IACjD;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,oCAAoC;IACnD;;OAEG;IACH,OAAO,EAAE,kCAAkC,EAAE,CAAC;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EACP,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,kBAAkB,GAClB,eAAe,CAAC;CACrB;AAED,eAAO,MAAM,+BAA+B;kFAOzC,oCAAoC;;;QA4ErC;;WAEG;;;;;;;QASH;;WAEG;;QAUH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAtCJ,CAAC"}

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

@@ -0,0 +1,102 @@
+/**
+ * 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_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
+*
+* 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 PageHeaderBreadcrumbPageActions = ({ actions, className, overflowMenuLabel = "More page actions", buttonSize = "md", buttonKind = "ghost", ...other }) => {
+	const containerRef = (0, react.useRef)(null);
+	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
+	const classNames = (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__breadcrumb-page-actions`, className);
+	(0, react.useEffect)(() => {
+		if (!containerRef.current) return;
+		const handler = (0, _carbon_utilities.createOverflowHandler)({
+			container: containerRef.current,
+			onChange: (_visible, hidden) => {
+				const hiddenIds = hidden.map((el) => el.dataset.id);
+				setHiddenItems(actions.filter((item) => hiddenIds.includes(item.id)));
+			}
+		});
+		return () => handler.disconnect();
+	}, [actions]);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		ref: containerRef,
+		className: classNames,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			inlineSize: "50%"
+		},
+		...other
+	}, actions.map((item) => /* @__PURE__ */ react.default.createElement("div", {
+		key: item.id,
+		"data-id": item.id
+	}, /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
+		renderIcon: item.renderIcon,
+		iconDescription: item.label,
+		hasIconOnly: true,
+		size: buttonSize,
+		kind: buttonKind,
+		onClick: item.onClick
+	}))), /* @__PURE__ */ react.default.createElement("div", {
+		"data-offset": true,
+		"data-hidden": true,
+		"data-floating-menu-container": true,
+		style: { position: "relative" }
+	}, /* @__PURE__ */ react.default.createElement(_carbon_react.FeatureFlags, { enableV12Overflowmenu: true }, /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenu, {
+		size: buttonSize,
+		"aria-label": overflowMenuLabel
+	}, hiddenItems.map((item) => /* @__PURE__ */ react.default.createElement(_carbon_react.OverflowMenuItem, {
+		key: item.id,
+		itemText: item.label,
+		onClick: item.onClick
+	}))))));
+};
+PageHeaderBreadcrumbPageActions.displayName = "PageHeaderBreadcrumbPageActions";
+PageHeaderBreadcrumbPageActions.propTypes = {
+	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,
+	buttonKind: prop_types.default.oneOf([
+		"primary",
+		"secondary",
+		"tertiary",
+		"ghost",
+		"danger",
+		"danger--tertiary",
+		"danger--ghost"
+	]),
+	buttonSize: prop_types.default.oneOf([
+		"sm",
+		"md",
+		"lg"
+	]),
+	className: prop_types.default.string,
+	overflowMenuLabel: prop_types.default.string
+};
+
+//#endregion
+exports.PageHeaderBreadcrumbPageActions = PageHeaderBreadcrumbPageActions;

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+import { type PageHeaderObserverState } from './context';
 /**
  * -----------------
  * PageHeaderContent
@@ -32,9 +33,10 @@ export interface PageHeaderContentProps {
      */
     contextualActions?: React.ReactNode;
     /**
-     * The PageHeaderContent's page actions
+     * The PageHeaderContent's page actions.
+     * Can be a ReactNode or a function that receives observer state.
      */
-    pageActions?: React.ReactNode;
+    pageActions?: React.ReactNode | ((state: PageHeaderObserverState) => React.ReactNode);
 }
 export declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=PageHeaderContent.d.ts.map

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,EAKvB,MAAM,OAAO,CAAC;AAef;;;;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;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,+FAiG5B,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,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"}

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

@@ -27,9 +27,10 @@ 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 } = require_context.usePageHeader();
+	const { setRefs, setPageActionsInstance, observerState } = 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,
@@ -38,8 +39,8 @@ const PageHeaderContent = react.default.forwardRef(function PageHeaderContent({
 		}));
 	}, []);
 	(0, react.useEffect)(() => {
-		if (pageActions) setPageActionsInstance(pageActions);
-	}, [pageActions]);
+		if (resolvedPageActions) setPageActionsInstance(resolvedPageActions);
+	}, [resolvedPageActions]);
 	const [isEllipsisApplied, setIsEllipsisApplied] = (0, react.useState)(false);
 	const isEllipsisActive = (element) => {
 		setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
@@ -65,7 +66,7 @@ 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)), pageActions), children)));
+	}, title)), contextualActions && /* @__PURE__ */ react.default.createElement("div", { className: `${require_PageHeaderUtils.blockClass}__content__contextual-actions` }, contextualActions)), resolvedPageActions), children)));
 });
 PageHeaderContent.displayName = "PageHeaderContent";
 PageHeaderContent.propTypes = {

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;;;QAyGlC;;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;;;QA8GlC;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;CAnBJ,CAAC"}

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

@@ -26,8 +26,8 @@ let _carbon_utilities = require("@carbon/utilities");
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
 const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "Actions", actions, ...other }) => {
-	const { setRefs, contentActionsClipped, breadcrumbActionsClipped, isContentActionsInBreadcrumbBar: isInBreadcrumbBar } = require_context.usePageHeader();
-	const classNames = (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__content__page-actions`, { [`${require_PageHeaderUtils.blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? breadcrumbActionsClipped : contentActionsClipped }, className);
+	const { setRefs, observerState, isContentActionsInBreadcrumbBar: isInBreadcrumbBar, isFunctionalContentActions } = require_context.usePageHeader();
+	const classNames = (0, import_classnames.default)(`${require_PageHeaderUtils.blockClass}__content__page-actions`, { [`${require_PageHeaderUtils.blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? isFunctionalContentActions ? false : !observerState.contentActionsClipped : observerState.contentActionsClipped }, className);
 	const containerRef = (0, react.useRef)(null);
 	const offsetRef = (0, react.useRef)(null);
 	const [menuButtonVisibility, setMenuButtonVisibility] = (0, react.useState)(false);

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderScrollButton.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderScrollButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAc,MAAM,eAAe,CAAC;AAM5D,MAAM,WAAW,2BAA4B,SAAQ,eAAe;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,oGAkEjC,CAAC"}
+{"version":3,"file":"PageHeaderScrollButton.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderScrollButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAc,MAAM,eAAe,CAAC;AAM5D,MAAM,WAAW,2BAA4B,SAAQ,eAAe;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,oGAmEjC,CAAC"}

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

@@ -24,7 +24,8 @@ let _carbon_react_icons = require("@carbon/react/icons");
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
 const PageHeaderScrollButton = react.default.forwardRef(function PageHeaderExpander({ className, children, label, onClick, collapseText = "Collapse", expandText = "Expand", ...other }, ref) {
-	const { refs, fullyCollapsed } = require_context.usePageHeader();
+	const { refs, observerState } = require_context.usePageHeader();
+	const fullyCollapsed = observerState.fullyCollapsed;
 	const handleScroller = (isFullyCollapsed) => {
 		if (!refs?.contentRef?.current) return;
 		const scrollableTarget = require_utils.scrollableAncestor(refs?.contentRef.current);

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeaderTitleBreadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderTitleBreadcrumb.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAkB,MAAM,eAAe,CAAC;AAIpE,eAAO,MAAM,yBAAyB,2FA+BpC,CAAC"}
+{"version":3,"file":"PageHeaderTitleBreadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/PageHeaderTitleBreadcrumb.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAkB,MAAM,eAAe,CAAC;AAIpE,eAAO,MAAM,yBAAyB,2FAgCpC,CAAC"}

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

@@ -22,7 +22,8 @@ let _carbon_react = require("@carbon/react");
 */
 var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
 const PageHeaderTitleBreadcrumb = (0, react.forwardRef)(({ className, children, ...other }, ref) => {
-	const { titleClipped, refs } = require_context.usePageHeader();
+	const { observerState, refs } = require_context.usePageHeader();
+	const titleClipped = observerState.titleClipped;
 	const hasContentElement = refs?.contentRef?.current;
 	const shouldShow = !hasContentElement || titleClipped && !!refs?.titleRef;
 	return /* @__PURE__ */ react.default.createElement(_carbon_react.BreadcrumbItem, {

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

@@ -16,16 +16,19 @@ export type PageHeaderRefs = {
     contentActions?: RefObject<HTMLDivElement | null>;
     breadcrumbActions?: RefObject<HTMLDivElement | null>;
 };
+export type PageHeaderObserverState = {
+    fullyCollapsed: boolean;
+    titleClipped: boolean;
+    contentActionsClipped: boolean;
+};
 type PageHeaderContextType = {
     refs?: PageHeaderRefs;
     setRefs: React.Dispatch<React.SetStateAction<PageHeaderRefs>>;
     pageActionsInstance?: React.ReactNode;
     setPageActionsInstance: React.Dispatch<React.SetStateAction<React.ReactNode>>;
-    fullyCollapsed?: boolean;
-    titleClipped?: boolean;
-    contentActionsClipped?: boolean;
-    breadcrumbActionsClipped?: boolean;
+    observerState: PageHeaderObserverState;
     isContentActionsInBreadcrumbBar?: boolean;
+    isFunctionalContentActions?: boolean;
 };
 export declare const PageHeaderContext: import("react").Context<PageHeaderContextType | undefined>;
 export declare function usePageHeader(): PageHeaderContextType;

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,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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,iBAAiB,4DAU5B,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,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"}

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

@@ -16,13 +16,15 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 */
 const PageHeaderContext = (0, react.createContext)({
-	fullyCollapsed: false,
 	setRefs: () => {},
 	refs: {},
-	titleClipped: false,
-	contentActionsClipped: false,
 	pageActionsInstance: null,
-	setPageActionsInstance: () => {}
+	setPageActionsInstance: () => {},
+	observerState: {
+		fullyCollapsed: false,
+		titleClipped: false,
+		contentActionsClipped: false
+	}
 });
 function usePageHeader() {
 	const context = (0, react.useContext)(PageHeaderContext);

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

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, } from './PageHeader';
-export type { PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, PageHeaderBreadcrumbOverflowProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, PageHeaderBreadcrumbPageActions, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, BreadcrumbPageActions, } from './PageHeader';
+export type { PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, PageHeaderBreadcrumbOverflowProps, PageHeaderBreadcrumbPageActionsProps, PageHeaderBreadcrumbPageActionItem, } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACL,UAAU,EACV,uBAAuB,EACvB,iBAAiB,EACjB,4BAA4B,EAC5B,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,EACzB,4BAA4B,EAC5B,qBAAqB,EAErB,IAAI,EACJ,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,SAAS,EACT,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,4BAA4B,EAC5B,sBAAsB,EACtB,iCAAiC,EACjC,0BAA0B,EAC1B,qBAAqB,EACrB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,iCAAiC,GAClC,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/next/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACL,UAAU,EACV,uBAAuB,EACvB,iBAAiB,EACjB,4BAA4B,EAC5B,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,EACzB,4BAA4B,EAC5B,qBAAqB,EACrB,+BAA+B,EAE/B,IAAI,EACJ,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,SAAS,EACT,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,qBAAqB,GACtB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,4BAA4B,EAC5B,sBAAsB,EACtB,iCAAiC,EACjC,0BAA0B,EAC1B,qBAAqB,EACrB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,iCAAiC,EACjC,oCAAoC,EACpC,kCAAkC,GACnC,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

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

@@ -16,12 +16,14 @@ 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,
 	BreadcrumbOverflow: () => require_PageHeader.BreadcrumbOverflow,
+	BreadcrumbPageActions: () => require_PageHeader.BreadcrumbPageActions,
 	Content: () => require_PageHeader.Content,
 	ContentPageActions: () => require_PageHeader.ContentPageActions,
 	ContentText: () => require_PageHeader.ContentText,
@@ -29,6 +31,7 @@ var next_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	PageHeader: () => require_PageHeader.PageHeader,
 	PageHeaderBreadcrumbBar: () => require_PageHeaderBreadcrumbBar.PageHeaderBreadcrumbBar,
 	PageHeaderBreadcrumbOverflow: () => require_PageHeaderBreadcrumbOverflow.PageHeaderBreadcrumbOverflow,
+	PageHeaderBreadcrumbPageActions: () => require_PageHeaderBreadcrumbPageActions.PageHeaderBreadcrumbPageActions,
 	PageHeaderContent: () => require_PageHeaderContent.PageHeaderContent,
 	PageHeaderContentPageActions: () => require_PageHeaderContentPageActions.PageHeaderContentPageActions,
 	PageHeaderContentText: () => require_PageHeaderContentText.PageHeaderContentText,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.87.1",
+  "version": "2.88.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -78,7 +78,7 @@
     "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.45.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.46.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -86,7 +86,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^13.0.0",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.46.0",
+    "jest-config-ibm-cloud-cognitive": "^1.47.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -106,7 +106,7 @@
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.10.0",
     "@carbon/feature-flags": "^1.0.0",
-    "@carbon/ibm-products-styles": "^2.83.0",
+    "@carbon/ibm-products-styles": "^2.84.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.16.0",
     "@carbon/utilities-react": "0.19.0",
@@ -130,5 +130,5 @@
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-is": "^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0"
   },
-  "gitHead": "5133a19e5ebd3042b7b017f271cfdc26fd2b30f4"
+  "gitHead": "36887ec0e0e106020b0234f7e089d269de9ce404"
 }

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -40,6 +40,7 @@ $one-grid-column: calc(100% / 16);
   }
 
   &--progress {
+    overflow: auto;
     margin-block-end: $spacing-04;
   }
 
@@ -65,9 +66,12 @@ $one-grid-column: calc(100% / 16);
     position: relative;
     background-color: $background;
     margin-block-end: 0 !important;
-    min-block-size: $spacing-09;
     padding-block-start: $spacing-06;
-    padding-inline-start: $spacing-07 !important;
+    padding-inline-start: $spacing-07;
+
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
 
     &:empty {
       min-block-size: 0;
@@ -107,27 +111,50 @@ $one-grid-column: calc(100% / 16);
 
   // FOOTER
   &--footer {
-    display: flex;
-    box-sizing: initial;
-    flex-direction: row;
-    justify-content: flex-end;
     background: $background;
     border-block-start: 1px solid $border-subtle-01;
     inline-size: 100%;
 
-    #{$block}--prev-btn,
-    #{$block}--next-btn,
-    #{$block}--start-btn {
-      inline-size: calc($one-grid-column * 3);
-      min-inline-size: 12.5rem;
-      padding-block-end: $spacing-07;
+    @include breakpoint-down(md) {
+      block-size: auto;
+    }
+
+    // ButtonSet wrapper
+    .#{carbon-config.$prefix}--btn-set {
+      display: flex;
+      justify-content: flex-end;
+      inline-size: 100%;
+    }
+
+    // On small screens, split width equally among all buttons
+    @include breakpoint-down(md) {
+      #{$block}--prev-btn,
+      #{$block}--next-btn,
+      #{$block}--start-btn,
+      #{$block}--skip-btn {
+        flex: 1 1 0;
+        inline-size: auto;
+        max-inline-size: none;
+        min-inline-size: 0;
+      }
     }
 
-    #{$block}--skip-btn {
-      flex-grow: 1 !important;
-      max-inline-size: none;
-      padding-inline-start: $spacing-07;
+    // On larger screens, fixed widths for action buttons, flexible skip
+    @include breakpoint(md) {
+      #{$block}--prev-btn,
+      #{$block}--next-btn,
+      #{$block}--start-btn {
+        flex-shrink: 0;
+        inline-size: calc($spacing-11 * 3); // 240px
+        max-inline-size: 15rem;
+      }
+
+      #{$block}--skip-btn {
+        flex: 1 1 auto;
+        max-inline-size: none;
+      }
     }
+
     .#{carbon-config.$prefix}--inline-loading {
       position: absolute;
       inline-size: $spacing-07;

package/scss/components/PageHeader/_page-header.scss

@@ -787,7 +787,7 @@ $duration: 1000ms;
 
   .#{$block-class}__breadcrumb__actions {
     display: inline-flex;
-    flex: 1 1 0%;
+    flex: 0 0 auto;
     justify-content: flex-end;
     min-inline-size: 75%;
 
@@ -813,8 +813,32 @@ $duration: 1000ms;
   .#{$block-class}__breadcrumb-wrapper .#{$block-class}-breadcrumb-overflow {
     flex: 1 1 0%;
     min-inline-size: 0;
+
     .#{$carbon-prefix}--breadcrumb {
       display: flex;
+      flex-wrap: nowrap;
+    }
+
+    .#{$carbon-prefix}--breadcrumb-item[data-fixed='true'] {
+      .#{$carbon-prefix}--link {
+        display: block;
+        overflow: hidden;
+        inline-size: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      @include breakpoint-down(lg) {
+        .#{$carbon-prefix}--link {
+          inline-size: 75%;
+        }
+      }
+
+      @include breakpoint-down(md) {
+        .#{$carbon-prefix}--link {
+          inline-size: 25%;
+        }
+      }
     }
   }
 

package/telemetry.yml

@@ -862,6 +862,9 @@ collect:
         - hasBackgroundAlways
         - hasCollapseHeaderToggle
         - narrowGrid
+        - onContentActionsClipped
+        - onContentFullyCollapsed
+        - onTitleClipped
         - pageActionsMenuOptionsClass
         - pageActionsOverflowLabel
         - withoutBackground
@@ -871,6 +874,9 @@ collect:
         - pageActionsFlush
         # PageHeaderBreadcrumbOverflow
         - renderOverflowBreadcrumb
+        # PageHeaderBreadcrumbPageActions
+        - buttonKind
+        - overflowMenuLabel
         # PageHeaderContent
         - contextualActions
         # PageHeaderContentPageActions
@@ -1048,6 +1054,10 @@ collect:
         - order-7-cyan
         - order-8-gray
         - order-9-green
+        # General - buttonSize
+        - lg
+        - md
+        - sm
         # General - cellSize
         - lg
         - md
@@ -1268,6 +1278,14 @@ collect:
         - short
         # PageHeader - fullWidthGrid
         - xl
+        # PageHeaderBreadcrumbPageActions - buttonKind
+        - danger
+        - danger--ghost
+        - danger--tertiary
+        - ghost
+        - primary
+        - secondary
+        - tertiary
         # StackProvider - stackStepSize
         - lg
         - md