@carbon/react 1.81.0 → 1.82.0-rc.0

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -4,8 +4,8 @@
  * 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 { ForwardedRef, ReactNode, type Ref } from 'react';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React, { ReactNode } from 'react';
+import { ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify any children nodes that should be rendered inside of the ListBox
@@ -29,9 +29,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      */
     title?: string;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: Ref<HTMLDivElement>;
-}) | null;
-export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
-declare const _default: ListBoxMenuItemComponent;
-export default _default;
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+declare const ListBoxMenuItem: React.ForwardRefExoticComponent<ListBoxMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export default ListBoxMenuItem;

package/es/components/ListBox/ListBoxPropTypes.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -9,6 +9,6 @@ declare const listBoxTypes: readonly ["default", "inline"];
 declare const listBoxSizes: readonly ["sm", "md", "lg"];
 export type ListBoxType = (typeof listBoxTypes)[number];
 export type ListBoxSize = (typeof listBoxSizes)[number];
-export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
-export declare const ListBoxSize: PropTypes.Requireable<"sm" | "md" | "lg">;
+export declare const ListBoxTypePropType: PropTypes.Requireable<"default" | "inline">;
+export declare const ListBoxSizePropType: PropTypes.Requireable<"sm" | "md" | "lg">;
 export {};

package/es/components/ListBox/ListBoxPropTypes.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 const listBoxTypes = ['default', 'inline'];
 const listBoxSizes = ['sm', 'md', 'lg'];
-const ListBoxType = PropTypes.oneOf(listBoxTypes);
-const ListBoxSize = PropTypes.oneOf(listBoxSizes);
+const ListBoxTypePropType = PropTypes.oneOf(listBoxTypes);
+const ListBoxSizePropType = PropTypes.oneOf(listBoxSizes);
 
-export { ListBoxSize, ListBoxType };
+export { ListBoxSizePropType, ListBoxTypePropType };

package/es/components/ListBox/index.d.ts

@@ -1,17 +1,19 @@
 /**
- * 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.
  */
-export * as PropTypes from './ListBoxPropTypes';
 export * from './ListBoxPropTypes';
-import { ListBoxComponent as ListBoxPartialComponent } from './ListBox';
+import ListBoxInternal from './ListBox';
 import { ListBoxFieldComponent } from './ListBoxField';
-import { ListBoxMenuComponent } from './ListBoxMenu';
+import ListBoxMenu from './ListBoxMenu';
 import { ListBoxMenuIconComponent } from './ListBoxMenuIcon';
-import { ListBoxMenuItemComponent } from './ListBoxMenuItem';
+import ListBoxMenuItem from './ListBoxMenuItem';
 import { ListBoxSelectionComponent } from './ListBoxSelection';
+type ListBoxMenuComponent = typeof ListBoxMenu;
+type ListBoxMenuItemComponent = typeof ListBoxMenuItem;
+type ListBoxPartialComponent = typeof ListBoxInternal;
 export interface ListBoxComponent extends ListBoxPartialComponent {
     readonly Field: ListBoxFieldComponent;
     readonly Menu: ListBoxMenuComponent;

package/es/components/ListBox/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
+export { ListBoxSizePropType, ListBoxTypePropType } from './ListBoxPropTypes.js';
 import ListBox$1 from './ListBox.js';
 import ListBoxField from './ListBoxField.js';
 import ListBoxMenu from './ListBoxMenu.js';

package/es/components/Menu/Menu.js

@@ -34,7 +34,12 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     open,
     size = 'sm',
     legacyAutoalign = 'true',
+    // TODO: `ssr-friendly` doesn't support ESLint v9.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
+    // https://github.com/carbon-design-system/carbon/issues/18991
+    /*
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    */
     target = canUseDOM && document.body,
     x = 0,
     y = 0,

package/es/components/Modal/Modal.js

@@ -17,7 +17,7 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -99,28 +99,28 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       target
     } = evt;
     evt.stopPropagation();
-    if (open) {
+    if (open && target instanceof HTMLElement) {
       if (match(evt, Escape)) {
         onRequestClose(evt);
       }
-      if (match(evt, Enter) && shouldSubmitOnEnter && target instanceof Element && !isCloseButton(target) && document.activeElement !== button.current) {
+      if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
         onRequestSubmit(evt);
       }
       if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {
         wrapFocusWithoutSentinels({
           containerNode: innerModal.current,
-          currentActiveNode: evt.target,
-          // TODO: Delete type assertion following util rewrite.
-          // https://github.com/carbon-design-system/carbon/pull/18913
+          currentActiveNode: target,
           event: evt
         });
       }
     }
   }
   function handleOnClick(evt) {
-    const target = evt.target;
+    const {
+      target
+    } = evt;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (!preventCloseOnClickOutside && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -129,7 +129,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref2;
-    if (open && currentActiveNode && oldActiveNode) {
+    if (open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
       const {
         current: bodyNode
       } = innerModal;

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -7,6 +7,7 @@
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
+import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';
 /**
  * Message ids that will be passed to translateWithId().
@@ -166,7 +167,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * Specify the size of the ListBox.
      * Currently, supports either `sm`, `md` or `lg` as an option.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ListBoxSize;
     /**
      * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
@@ -177,7 +178,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    type?: 'default' | 'inline';
+    type?: ListBoxType;
     /**
      * Specify title to show title on hover
      */

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -29,7 +29,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
-import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   InputBlur,
@@ -775,7 +775,7 @@ FilterableMultiSelect.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   ...sortingPropTypes,
   /**
@@ -787,6 +787,7 @@ FilterableMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes.func,
+  type: ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -6,7 +6,7 @@
  */
 import { UseSelectProps } from 'downshift';
 import React, { ReactNode } from 'react';
-import { ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { TranslateWithId } from '../../types/common';
@@ -173,5 +173,11 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     warnText?: ReactNode;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MultiSelect: MultiSelectComponent;
+type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
+interface MultiSelectComponent {
+    propTypes: Record<string, any>;
+    displayName: string;
+    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement<any> | null;
+}
 export {};

package/es/components/MultiSelect/MultiSelect.js

@@ -29,7 +29,7 @@ import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   ItemClick,
@@ -669,7 +669,7 @@ MultiSelect.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide a method that sorts all options in the control. Overriding this
@@ -704,7 +704,7 @@ MultiSelect.propTypes = {
   /**
    * Specify 'inline' to create an inline multi-select.
    */
-  type: PropTypes.oneOf(['default', 'inline']),
+  type: ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */

package/es/components/Notification/Notification.js

@@ -21,7 +21,7 @@ import { match, matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
-import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
+import { wrapFocus, wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';

package/es/components/OverflowMenu/OverflowMenu.js

@@ -22,6 +22,7 @@ import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { IconButton } from '../IconButton/index.js';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const getInstanceId = setupGetInstanceId();
 const on = function (target) {
@@ -90,22 +91,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__*/forwardRef((_ref, ref) => {
   let {
     align,
@@ -385,11 +370,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),
   /**
    * Specify a label to be read by screen readers on the container node
    */

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

@@ -20,21 +20,9 @@ import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
 import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js';
+import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
 
 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.forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
     autoAlign = false,
@@ -196,11 +184,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),
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */

package/es/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/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,8 +16,9 @@ import { warning } from '../../internal/warning.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function OverflowMenuItem(_ref, ref) {
-  let {
+const frFn = forwardRef;
+const OverflowMenuItem = frFn((props, ref) => {
+  const {
     className,
     closeMenu,
     disabled = false,
@@ -33,7 +34,7 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
     title,
     wrapperClassName,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   function setTabFocus(evt) {
     if (match(evt, ArrowDown)) {

package/es/components/PageHeader/PageHeader.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 PropTypes from 'prop-types';
 import { Tabs as BaseTabs } from '../Tabs/Tabs';
 /**
  * ----------
@@ -48,10 +49,6 @@ interface PageHeaderContentProps {
      * The PageHeaderContent's title
      */
     title: string;
-    /**
-     * The PageHeaderContent's subtitle
-     */
-    subtitle?: string;
     /**
      * The PageHeaderContent's contextual actions
      */
@@ -62,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
@@ -77,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
@@ -101,8 +193,61 @@ declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProp
 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>>;
 declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, HeroImage, TabBar, Tabs, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };
+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, };