@carbon/react 1.79.0 → 1.80.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import cx from 'classnames';
-import useResizeObserver from 'use-resize-observer/polyfilled';
+import useResizeObserver from 'use-resize-observer';
 import { ChevronDown } from '@carbon/icons-react';
 import Copy from '../Copy/Copy.js';
 import Button from '../Button/Button.js';

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023, 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, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */

package/es/components/ComposedModal/ModalFooter.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023, 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, { type ReactNode, type MouseEvent, type Ref } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export interface SecondaryButtonProps {

package/es/components/ContainedList/index.js

@@ -12,6 +12,6 @@ import ContainedListItem from './ContainedListItem/ContainedListItem.js';
 export { default as ContainedListItem } from './ContainedListItem/ContainedListItem.js';
 
 ContainedList.ContainedListItem = ContainedListItem;
-if (process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== 'production') {
   deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);
 }

package/es/components/DataTable/DataTable.d.ts

@@ -201,10 +201,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
     rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
     size?: DataTableSize;
-    sortRow?: (cellA: DataTableCell<any>, cellB: DataTableCell<any>, sortRowOptions: {
+    sortRow?: (cellA: any, cellB: any, sortRowOptions: {
         sortDirection: DataTableSortState;
         sortStates: Record<DataTableSortState, DataTableSortState>;
         locale: string;
+        key: string;
+        compare: (a: number | string, b: number | string, locale?: string) => number;
     }) => number;
     stickyHeader?: boolean;
     useStaticWidth?: boolean;

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

package/es/components/DatePicker/DatePicker.js

@@ -357,7 +357,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       nextArrow: rightArrowHTML,
       prevArrow: leftArrowHTML,
       onChange: function () {
-        if (savedOnChange && !readOnly) {
+        if (!readOnly) {
           savedOnChange(...arguments);
         }
       },

package/es/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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';
 export interface FluidTextAreaSkeletonProps {
     /**

package/es/components/InlineLoading/InlineLoading.js

@@ -53,9 +53,9 @@ const InlineLoading = _ref => {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
-    if (status === 'inactive' || status === 'active') {
+    if (status === 'active') {
       if (!iconDescription) {
-        iconLabel = status === 'active' ? 'loading' : 'not loading';
+        iconLabel = 'loading';
       }
       return /*#__PURE__*/React__default.createElement(Loading, {
         small: true,
@@ -64,6 +64,14 @@ const InlineLoading = _ref => {
         active: status === 'active'
       });
     }
+    if (status === 'inactive') {
+      if (!iconDescription) {
+        iconLabel = 'not loading';
+      }
+      return /*#__PURE__*/React__default.createElement("title", {
+        className: `${prefix}--inline-loading__inactive-status`
+      }, iconLabel);
+    }
     return undefined;
   };
   const loadingText = description && /*#__PURE__*/React__default.createElement("div", {

package/es/components/Layer/LayerLevel.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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 declare const levels: readonly ["one", "two", "three"];
 export declare const MIN_LEVEL = 0;
 export declare const MAX_LEVEL: number;

package/es/components/Menu/Menu.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2023, 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.

package/es/components/Menu/MenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2023, 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, { ChangeEventHandler, ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import React, { ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
 export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
     /**
      * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
@@ -48,7 +48,7 @@ export interface MenuItemSelectableProps extends Omit<MenuItemProps, 'onChange'>
     /**
      * Provide an optional function to be called when the selection state changes.
      */
-    onChange?: ChangeEventHandler<HTMLLIElement>;
+    onChange?: (checked: boolean) => void;
     /**
      * Controls the state of this option.
      */
@@ -94,7 +94,7 @@ export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>
     /**
      * Provide an optional function to be called when the selection changes.
      */
-    onChange?: ChangeEventHandler<HTMLLIElement>;
+    onChange?: (selectedItem: Item) => void;
     /**
      * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
      */

package/es/components/Menu/MenuItem.js

@@ -333,7 +333,7 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
   const [selection, setSelection] = useControllableState({
     value: selectedItem,
     onChange,
-    defaultValue: defaultSelectedItem
+    defaultValue: defaultSelectedItem ?? {}
   });
   function handleClick(item, e) {
     setSelection(item);

package/es/components/Modal/Modal.js

@@ -198,7 +198,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
         const containerElement = focusContainerElement || innerModal.current;
-        const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
+        const primaryFocusElement = containerElement && (containerElement.querySelector(selectorPrimaryFocus) || danger && containerElement.querySelector(`.${prefix}--btn--secondary`));
         if (primaryFocusElement) {
           return primaryFocusElement;
         }

package/es/components/ModalWrapper/ModalWrapper.d.ts

@@ -36,7 +36,7 @@ interface ModelWrapperState {
     isOpen: boolean;
 }
 export default class ModalWrapper extends React.Component<ModalWrapperProps, ModelWrapperState> {
-    if(__DEV__: any): void;
+    if(isDev: any): void;
     static propTypes: {
         buttonTriggerClassName: PropTypes.Requireable<string>;
         buttonTriggerText: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/es/components/ModalWrapper/ModalWrapper.js

@@ -17,6 +17,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 
 let didWarnAboutDeprecation = false;
+process.env.NODE_ENV !== 'production';
 class ModalWrapper extends React__default.Component {
   constructor() {
     super(...arguments);
@@ -52,7 +53,7 @@ class ModalWrapper extends React__default.Component {
       handleSubmit?.(evt);
     });
   }
-  if(__DEV__) {
+  if(isDev) {
     process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
     didWarnAboutDeprecation = true;
   }

package/es/components/Notification/Notification.js

@@ -812,7 +812,7 @@ Callout.propTypes = {
 
 let didWarnAboutDeprecation = false;
 const StaticNotification = props => {
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`StaticNotification` has been renamed to `Callout`.' + 'Run the following codemod to automatically update usages in your' + 'project: `npx @carbon/upgrade migrate refactor-to-callout --write`') : void 0;
     didWarnAboutDeprecation = true;
   }

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

package/es/components/OverflowMenu/OverflowMenu.js

@@ -11,7 +11,7 @@ import { OverflowMenuVertical } from '@carbon/icons-react';
 import cx from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
-import ClickListener from '../../internal/ClickListener.js';
+import { ClickListener } from '../../internal/ClickListener.js';
 import { DIRECTION_TOP, DIRECTION_BOTTOM, FloatingMenu } from '../../internal/FloatingMenu.js';
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -64,7 +64,7 @@ const triggerButtonPositionFactors = {
 const getMenuOffset = (menuBody, direction, trigger, flip) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
   }
   const {
@@ -201,7 +201,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   const handleClickOutside = evt => {
-    if (open && (!menuBodyRef.current || !menuBodyRef.current.contains(evt.target))) {
+    if (open && (!menuBodyRef.current || evt.target instanceof Node && !menuBodyRef.current.contains(evt.target))) {
       closeMenu();
     }
   };

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -55,9 +55,7 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
       closeMenu();
     }
   }
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
-  }
+  process.env.NODE_ENV !== "production" ? warning(!!closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
   const overflowMenuBtnClasses = cx(`${prefix}--overflow-menu-options__btn`, className);
   const overflowMenuItemClasses = cx(`${prefix}--overflow-menu-options__option`, {
     [`${prefix}--overflow-menu--divider`]: hasDivider,

package/es/components/OverflowMenuV2/index.js

@@ -12,7 +12,7 @@ import OverflowMenu from '../OverflowMenu/index.js';
 
 let didWarnAboutDeprecation = false;
 function OverflowMenuV2(props) {
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<OverflowMenuV2>` is deprecated and will be removed in the next major version. Use `<OverflowMenu>` with the `enable-v12-overflowmenu` feature flag instead.') : void 0;
     didWarnAboutDeprecation = true;
   }

package/es/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 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, { type ComponentType, type FunctionComponent } from 'react';
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+interface PageHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+interface PageHeaderBreadcrumbBarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+interface PageHeaderContentProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContent.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContent
+     */
+    className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderContent's title
+     */
+    title: string;
+    /**
+     * The PageHeaderContent's subtitle
+     */
+    subtitle?: string;
+    /**
+     * The PageHeaderContent's contextual actions
+     */
+    contextualActions?: React.ReactNode;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+}
+declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+interface PageHeaderHeroImageProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderHeroImage.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderHeroImage
+     */
+    className?: string;
+}
+declare const PageHeaderHeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+interface PageHeaderTabBarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------
+ * Exports
+ * -------
+ */
+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 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, };

package/es/components/PageHeader/PageHeader.js

@@ -0,0 +1,241 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { breakpoints } from '@carbon/layout';
+import { useMatchMedia } from '../../internal/useMatchMedia.js';
+import '../Text/index.js';
+import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
+import '../Tooltip/Tooltip.js';
+import AspectRatio from '../AspectRatio/AspectRatio.js';
+import { Text } from '../Text/Text.js';
+
+var _p, _p2, _p3;
+
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+
+const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_ref, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header`]: true
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), _p || (_p = /*#__PURE__*/React__default.createElement("p", null, "page header")), children);
+});
+PageHeader.displayName = 'PageHeader';
+
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref2;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header__breadcrumb-bar`]: true
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), _p2 || (_p2 = /*#__PURE__*/React__default.createElement("p", null, "page header breadcrumb bar")), children);
+});
+PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+
+const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHeaderContent(_ref3, ref) {
+  let {
+    className,
+    children,
+    title,
+    subtitle,
+    renderIcon: IconElement,
+    contextualActions,
+    pageActions,
+    ...other
+  } = _ref3;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header__content`]: true
+  }, className);
+  const titleRef = useRef(null);
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
+    return element.offsetHeight < element.scrollHeight;
+  };
+  useLayoutEffect(() => {
+    titleRef.current && isEllipsisActive(titleRef.current);
+  }, [title]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__title-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__start`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__title-container`
+  }, IconElement && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__icon`
+  }, /*#__PURE__*/React__default.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    definition: title
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    ref: titleRef,
+    as: "h4",
+    className: `${prefix}--page-header__content__title`
+  }, title)) : /*#__PURE__*/React__default.createElement(Text, {
+    ref: titleRef,
+    as: "h4",
+    className: `${prefix}--page-header__content__title`
+  }, title)), contextualActions && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__contextual-actions`
+  }, contextualActions)), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__end`
+  }, pageActions && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__page-actions`
+  }, pageActions))), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    as: "h3",
+    className: `${prefix}--page-header__content__subtitle`
+  }, subtitle), children && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--page-header__content__body`
+  }, children));
+});
+PageHeaderContent.displayName = 'PageHeaderContent';
+PageHeaderContent.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContent.
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContent
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an optional icon to render in front of the PageHeaderContent's title.
+   */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * The PageHeaderContent's title
+   */
+  title: PropTypes.string.isRequired,
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: PropTypes.string,
+  /**
+   * The PageHeaderContent's contextual actions
+   */
+  contextualActions: PropTypes.node,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: PropTypes.node
+};
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = /*#__PURE__*/React__default.forwardRef(function PageHeaderHeroImage(_ref4, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref4;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header__hero-image`]: true
+  }, className);
+  const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
+  const isLg = useMatchMedia(lgMediaQuery);
+  return /*#__PURE__*/React__default.createElement(AspectRatio, _extends({
+    className: classNames
+  }, other, {
+    ratio: isLg ? '2x1' : '3x2'
+  }), children);
+});
+PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
+PageHeaderHeroImage.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderHeroImage.
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderHeroImage
+   */
+  className: PropTypes.string
+};
+
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+
+const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref5, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref5;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header__tab-bar`]: true
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), _p3 || (_p3 = /*#__PURE__*/React__default.createElement("p", null, "page header tab bar")), children);
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+
+/**
+ * -------
+ * Exports
+ * -------
+ */
+const Root = PageHeader;
+Root.displayName = 'PageHeader.Root';
+const BreadcrumbBar = PageHeaderBreadcrumbBar;
+BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+const Content = PageHeaderContent;
+Content.displayName = 'PageHeaderContent';
+const HeroImage = PageHeaderHeroImage;
+HeroImage.displayName = 'PageHeaderHeroImage';
+const TabBar = PageHeaderTabBar;
+TabBar.displayName = 'PageHeaderTabBar';
+
+export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 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 { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/es/components/PageHeader/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar } from './PageHeader.js';

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

@@ -1,3 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 ControlledPasswordInput from '../TextInput/ControlledPasswordInput';
 import PasswordInput from '../TextInput/PasswordInput';
 export { ControlledPasswordInput, PasswordInput };

package/es/components/Popover/index.js

@@ -264,7 +264,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component
-if (process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== 'production') {
   Popover.displayName = 'Popover';
 }
 Popover.propTypes = {