@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -26,6 +26,7 @@ var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var index = require('../IconButton/index.js');
 var useOutsideClick = require('../../internal/useOutsideClick.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
+var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -101,22 +102,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
-
-// TODO: Replace this code when align mapping is consolidated.
-// https://github.com/carbon-design-system/carbon/pull/19081
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     align,
@@ -396,11 +381,7 @@ OverflowMenu.propTypes = {
   // deprecated use right-start instead
 
   // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
    * Specify a label to be read by screen readers on the container node
    */

package/lib/components/OverflowMenu/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import type { OverflowMenuProps } from './OverflowMenu';
+import { type OverflowMenuProps } from './OverflowMenu';
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default OverflowMenu;
 export { OverflowMenu, type OverflowMenuProps };

package/lib/components/OverflowMenu/index.js

@@ -14,22 +14,21 @@ var React = require('react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('./next/index.js');
 var OverflowMenu$1 = require('./OverflowMenu.js');
-var createClassWrapper = require('../../internal/createClassWrapper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const OverflowMenuV11 = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
 const OverflowMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const enableV12OverflowMenu = index.useFeatureFlag('enable-v12-overflowmenu');
   return enableV12OverflowMenu ? /*#__PURE__*/React__default["default"].createElement(index$1.OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref
-  })) : /*#__PURE__*/React__default["default"].createElement(OverflowMenuV11, _rollupPluginBabelHelpers["extends"]({}, props, {
+  })) : /*#__PURE__*/React__default["default"].createElement(OverflowMenu$1.OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref
   }));
 });
 OverflowMenu.displayName = 'OverflowMenu';
+OverflowMenu.propTypes = OverflowMenu$1.OverflowMenu.propTypes;
 
 exports.OverflowMenu = OverflowMenu;
 exports["default"] = OverflowMenu;

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

@@ -24,6 +24,7 @@ var useId = require('../../../internal/useId.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
 var deprecateValuesWithin = require('../../../prop-types/deprecateValuesWithin.js');
+var mapPopoverAlign = require('../../../tools/mapPopoverAlign.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,19 +33,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const defaultSize = 'md';
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
     autoAlign = false,
@@ -206,11 +194,7 @@ OverflowMenu.propTypes = {
   // deprecated use right-start instead
 
   // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */

package/lib/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -1,11 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 { ForwardRefReturn } from '../../types/common';
 export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * The CSS class name to be placed on the button element
@@ -57,6 +56,5 @@ export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement>
      */
     wrapperClassName?: string;
 }
-export type OverflowMenuItemComponent = ForwardRefReturn<HTMLElement, OverflowMenuItemProps>;
-declare const OverflowMenuItem: OverflowMenuItemComponent;
+declare const OverflowMenuItem: React.ForwardRefExoticComponent<Omit<OverflowMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default OverflowMenuItem;

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -26,8 +26,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenuItem(_ref, ref) {
-  let {
+const frFn = React.forwardRef;
+const OverflowMenuItem = frFn((props, ref) => {
+  const {
     className,
     closeMenu,
     disabled = false,
@@ -43,7 +44,7 @@ const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(funct
     title,
     wrapperClassName,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   function setTabFocus(evt) {
     if (match.match(evt, keys.ArrowDown)) {

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

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs as BaseTabs } from '../Tabs/Tabs';
 /**
  * ----------
  * PageHeader
@@ -47,10 +49,6 @@ interface PageHeaderContentProps {
      * The PageHeaderContent's title
      */
     title: string;
-    /**
-     * The PageHeaderContent's subtitle
-     */
-    subtitle?: string;
     /**
      * The PageHeaderContent's contextual actions
      */
@@ -61,6 +59,88 @@ interface PageHeaderContentProps {
     pageActions?: React.ReactNode;
 }
 declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderContentPageActions
+ * ----------------
+ */
+interface PageHeaderContentPageActionsProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentPageActions.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentPageActions
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's page actions collapsible Menu button label
+     */
+    menuButtonLabel?: string;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+}
+declare const PageHeaderContentPageActions: {
+    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's page actions
+         */
+        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+    };
+};
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+interface PageHeaderContentTextProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentText.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentText
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's subtitle
+     */
+    subtitle?: string;
+}
+declare const PageHeaderContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+    };
+};
 /**
  * ----------------
  * PageHeaderHeroImage
@@ -76,7 +156,20 @@ interface PageHeaderHeroImageProps {
      */
     className?: string;
 }
-declare const PageHeaderHeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderHeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 /**
  * ----------------
  * PageHeaderTabBar
@@ -87,6 +180,11 @@ interface PageHeaderTabBarProps {
     className?: string;
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -95,7 +193,61 @@ declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBar
 declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
 declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const HeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContentPageActions: {
+    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's page actions
+         */
+        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+    };
+};
+declare const ContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+    };
+};
+declare const HeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, HeroImage, TabBar, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };
+declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, Tabs, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };

package/lib/components/PageHeader/PageHeader.js

@@ -17,9 +17,14 @@ var usePrefix = require('../../internal/usePrefix.js');
 var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
+var index = require('../MenuButton/index.js');
+require('../Menu/Menu.js');
+var MenuItem = require('../Menu/MenuItem.js');
 var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
+var utilities = require('@carbon/utilities');
+var Tabs$1 = require('../Tabs/Tabs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +33,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _p, _p2, _p3;
+var _p, _p2;
 
 /**
  * ----------
@@ -87,7 +92,6 @@ const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(func
     className,
     children,
     title,
-    subtitle,
     renderIcon: IconElement,
     contextualActions,
     pageActions,
@@ -129,16 +133,7 @@ const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(func
     className: `${prefix}--page-header__content__title`
   }, title)), contextualActions && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--page-header__content__contextual-actions`
-  }, contextualActions)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__content__end`
-  }, pageActions && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__content__page-actions`
-  }, pageActions))), subtitle && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h3",
-    className: `${prefix}--page-header__content__subtitle`
-  }, subtitle), children && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__content__body`
-  }, children));
+  }, contextualActions)), pageActions), children);
 });
 PageHeaderContent.displayName = 'PageHeaderContent';
 PageHeaderContent.propTypes = {
@@ -153,7 +148,6 @@ PageHeaderContent.propTypes = {
   /**
    * Provide an optional icon to render in front of the PageHeaderContent's title.
    */
-
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * The PageHeaderContent's title
@@ -175,17 +169,142 @@ PageHeaderContent.propTypes = {
 
 /**
  * ----------------
- * PageHeaderHeroImage
+ * PageHeaderContentPageActions
  * ----------------
  */
 
-const PageHeaderHeroImage = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderHeroImage(_ref4, ref) {
+const PageHeaderContentPageActions = _ref4 => {
   let {
     className,
     children,
+    menuButtonLabel = 'Actions',
+    pageActions,
     ...other
   } = _ref4;
   const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__content__page-actions`]: true
+  }, className);
+  const containerRef = React.useRef(null);
+  const offsetRef = React.useRef(null);
+  const [menuButtonVisibility, setMenuButtonVisibility] = React.useState(false);
+  const [hiddenItems, setHiddenItems] = React.useState([]);
+
+  // need to set the grid columns width based on the menu button's width
+  // to avoid overlapping when resizing
+  React.useLayoutEffect(() => {
+    if (menuButtonVisibility && offsetRef.current) {
+      const width = offsetRef.current.offsetWidth;
+      document.documentElement.style.setProperty('--pageheader-title-grid-width', `${width}px`);
+    }
+  }, [menuButtonVisibility]);
+  React.useEffect(() => {
+    if (!containerRef.current || !Array.isArray(pageActions)) return;
+    utilities.createOverflowHandler({
+      container: containerRef.current,
+      // exclude the hidden menu button from children
+      maxVisibleItems: containerRef.current.children.length - 1,
+      onChange: (visible, hidden) => {
+        setHiddenItems(pageActions?.slice(visible.length));
+        if (hidden.length > 0) {
+          setMenuButtonVisibility(true);
+        }
+      }
+    });
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: containerRef
+  }, other), pageActions && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Array.isArray(pageActions) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pageActions.map(action => /*#__PURE__*/React__default["default"].createElement("div", {
+    key: action.id,
+    className: "action"
+  }, action.body)), /*#__PURE__*/React__default["default"].createElement("span", {
+    "data-offset": true,
+    "data-hidden": true,
+    ref: offsetRef
+  }, /*#__PURE__*/React__default["default"].createElement(index.MenuButton, {
+    menuAlignment: "bottom-end",
+    label: menuButtonLabel,
+    size: "md"
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
+    key: item.id,
+    label: item.label,
+    onClick: item.onClick
+  })))))));
+};
+PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
+PageHeaderContentPageActions.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContentPageActions.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentPageActions
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's collapsible Menu button label
+   */
+  menuButtonLabel: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].array])
+};
+
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+
+const PageHeaderContentText = _ref5 => {
+  let {
+    className,
+    children,
+    subtitle,
+    ...other
+  } = _ref5;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__content__body`]: true
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), subtitle && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    as: "h3",
+    className: `${prefix}--page-header__content__subtitle`
+  }, subtitle), children);
+};
+PageHeaderContentText.displayName = 'PageHeaderContentText';
+PageHeaderContentText.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContentText.
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentText
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: PropTypes__default["default"].string
+};
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = _ref6 => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref6;
+  const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__hero-image`]: true
   }, className);
@@ -196,7 +315,7 @@ const PageHeaderHeroImage = /*#__PURE__*/React__default["default"].forwardRef(fu
   }, other, {
     ratio: isLg ? '2x1' : '3x2'
   }), children);
-});
+};
 PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
 PageHeaderHeroImage.propTypes = {
   /**
@@ -215,12 +334,12 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar(_ref5, ref) {
+const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar(_ref7, ref) {
   let {
     className,
     children,
     ...other
-  } = _ref5;
+  } = _ref7;
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__tab-bar`]: true
@@ -228,9 +347,18 @@ const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(funct
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), _p3 || (_p3 = /*#__PURE__*/React__default["default"].createElement("p", null, "page header tab bar")), children);
+  }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs(_ref8, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref8;
+  return /*#__PURE__*/React__default["default"].createElement(Tabs$1.Tabs, other, children);
+});
+PageHeaderTabs.displayName = 'PageHeaderTabs';
 
 /**
  * -------
@@ -243,18 +371,30 @@ const BreadcrumbBar = PageHeaderBreadcrumbBar;
 BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 const Content = PageHeaderContent;
 Content.displayName = 'PageHeaderContent';
+const ContentPageActions = PageHeaderContentPageActions;
+Content.displayName = 'PageHeaderContentPageActions';
+const ContentText = PageHeaderContentText;
+Content.displayName = 'PageHeaderContentText';
 const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
+const Tabs = PageHeaderTabs;
+Tabs.displayName = 'PageHeader.Tabs';
 
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Content = Content;
+exports.ContentPageActions = ContentPageActions;
+exports.ContentText = ContentText;
 exports.HeroImage = HeroImage;
 exports.PageHeader = PageHeader;
 exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar;
 exports.PageHeaderContent = PageHeaderContent;
+exports.PageHeaderContentPageActions = PageHeaderContentPageActions;
+exports.PageHeaderContentText = PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeaderTabBar;
+exports.PageHeaderTabs = PageHeaderTabs;
 exports.Root = Root;
 exports.TabBar = TabBar;
+exports.Tabs = Tabs;

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

@@ -4,5 +4,5 @@
  * 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, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, TabBar, HeroImage, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, Tabs, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';

package/lib/components/PageHeader/index.js

@@ -15,11 +15,17 @@ var PageHeader = require('./PageHeader.js');
 
 exports.BreadcrumbBar = PageHeader.BreadcrumbBar;
 exports.Content = PageHeader.Content;
+exports.ContentPageActions = PageHeader.ContentPageActions;
+exports.ContentText = PageHeader.ContentText;
 exports.HeroImage = PageHeader.HeroImage;
 exports.PageHeader = PageHeader.PageHeader;
 exports.PageHeaderBreadcrumbBar = PageHeader.PageHeaderBreadcrumbBar;
 exports.PageHeaderContent = PageHeader.PageHeaderContent;
+exports.PageHeaderContentPageActions = PageHeader.PageHeaderContentPageActions;
+exports.PageHeaderContentText = PageHeader.PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
+exports.PageHeaderTabs = PageHeader.PageHeaderTabs;
 exports.Root = PageHeader.Root;
 exports.TabBar = PageHeader.TabBar;
+exports.Tabs = PageHeader.Tabs;