@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -9,6 +9,7 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
+  DrawerColorVariant,
   DrawerHead,
   Flex,
   Nav,
@@ -28,10 +29,9 @@ import {
   MastheadMain,
   MastheadBrand,
   Wizard,
-  WizardStep,
-  DrawerColorVariant
+  WizardStep
 } from '@patternfly/react-core';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
@@ -119,7 +119,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -7,10 +7,10 @@ import {
   Drawer,
   DrawerActions,
   DrawerCloseButton,
-  DrawerColorVariant,
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
+  DrawerColorVariant,
   Flex,
   Nav,
   NavItem,
@@ -31,7 +31,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => {
@@ -120,7 +120,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}

package/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
-import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../../../../src/components/Drawer';
+import { DrawerPanelContent, DrawerHead } from '../../../../../src/components/Drawer';
 import userEvent from '@testing-library/user-event';
 
 describe('Wizard', () => {
@@ -104,7 +104,7 @@ describe('Wizard', () => {
 
   test('wiz with drawer', () => {
     const wizDrawerPanelContent = (
-      <DrawerPanelContent colorVariant={DrawerColorVariant.light200}>
+      <DrawerPanelContent>
         <DrawerHead>
           <span>This wizard has a drawer with drawer panel content</span>
         </DrawerHead>

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button
 } from '@patternfly/react-core';
@@ -43,12 +41,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
@@ -10,8 +9,7 @@ import {
   TextInput,
   Progress,
   Button,
-  Alert,
-  EmptyStateIcon
+  Alert
 } from '@patternfly/react-core';
 import {
   Wizard as WizardDeprecated,
@@ -52,12 +50,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>

package/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx

@@ -3,9 +3,9 @@ import {
   Button,
   DrawerActions,
   DrawerCloseButton,
-  DrawerColorVariant,
   DrawerHead,
-  DrawerPanelContent
+  DrawerPanelContent,
+  DrawerColorVariant
 } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
@@ -27,7 +27,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   };
 
   const panel1Content = (
-    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
       <DrawerHead>
         <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel-1 content
@@ -40,7 +40,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   );
 
   const panel2Content = (
-    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
       <DrawerHead>
         <span tabIndex={0} ref={drawerRef}>
           drawer-panel-2 content
@@ -53,7 +53,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
   );
 
   const panel3Content = (
-    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
       <DrawerHead>
         <span tabIndex={0} ref={drawerRef}>
           drawer-panel-3 content

package/src/helpers/constants.ts

@@ -10,6 +10,12 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_h
 import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl';
 import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_2xl';
 
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
 export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
 
 export const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' };
@@ -47,3 +53,11 @@ export const globalHeightBreakpoints = {
   xl: parseInt(globalHeightBreakpointXl.value),
   '2xl': parseInt(globalHeightBreakpoint2xl.value)
 };
+
+export const statusIcons = {
+  success: CheckCircleIcon,
+  danger: ExclamationCircleIcon,
+  warning: ExclamationTriangleIcon,
+  info: InfoCircleIcon,
+  custom: BellIcon
+};

package/src/index.ts

@@ -2,4 +2,4 @@ export * from './components';
 export * from './demos';
 export * from './layouts';
 export * from './helpers';
-export { BaseSizes, DeviceSizes } from './styles/sizes';
+export * from './styles';

package/src/next/components/Modal/Modal.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { canUseDOM, KeyTypes, PickOptional } from '../../../helpers';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import { ModalContent } from './ModalContent';
+import { OUIAProps, getDefaultOUIAId } from '../../../helpers';
+
+export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** The parent container to append the modal to. Defaults to "document.body". */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+  'aria-describedby'?: string;
+  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal. */
+  className?: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** The element to focus when the modal opens. By default the first
+   * focusable element will receive focus.
+   */
+  elementToFocus?: HTMLElement | SVGElement | string;
+  /** An id to use for the modal box container. */
+  id?: string;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Modal handles pressing of the escape key and closes the modal. If you want to handle
+   * this yourself you can use this callback function. */
+  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
+  width?: number | string;
+  /** Maximum width of the modal. */
+  maxWidth?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export enum ModalVariant {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+  default = 'default'
+}
+
+interface ModalState {
+  container: HTMLElement;
+  ouiaStateId: string;
+}
+
+class Modal extends React.Component<ModalProps, ModalState> {
+  static displayName = 'Modal';
+  static currentId = 0;
+  boxId = '';
+
+  static defaultProps: PickOptional<ModalProps> = {
+    isOpen: false,
+    variant: 'default',
+    appendTo: () => document.body,
+    ouiaSafe: true,
+    position: 'default'
+  };
+
+  constructor(props: ModalProps) {
+    super(props);
+    const boxIdNum = Modal.currentId++;
+    this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+
+    this.state = {
+      container: undefined,
+      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+    };
+  }
+
+  handleEscKeyClick = (event: KeyboardEvent): void => {
+    const { onEscapePress } = this.props;
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
+      onEscapePress ? onEscapePress(event) : this.props.onClose?.(event);
+    }
+  };
+
+  getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
+    if (typeof appendTo === 'function') {
+      return appendTo();
+    }
+    return appendTo || document.body;
+  };
+
+  toggleSiblingsFromScreenReaders = (hide: boolean) => {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const bodyChildren = target.children;
+    for (const child of Array.from(bodyChildren)) {
+      if (child !== this.state.container) {
+        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+      }
+    }
+  };
+
+  isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
+
+  componentDidMount() {
+    const {
+      appendTo,
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby
+    } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const container = document.createElement('div');
+    this.setState({ container });
+    target.appendChild(container);
+    target.addEventListener('keydown', this.handleEscKeyClick, false);
+
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+    }
+
+    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
+      // eslint-disable-next-line no-console
+      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
+    }
+  }
+
+  componentDidUpdate() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(false);
+    }
+  }
+
+  componentWillUnmount() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.state.container) {
+      target.removeChild(this.state.container);
+    }
+    target.removeEventListener('keydown', this.handleEscKeyClick, false);
+    target.classList.remove(css(styles.backdropOpen));
+    this.toggleSiblingsFromScreenReaders(false);
+  }
+
+  render() {
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      appendTo,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onEscapePress,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedby,
+      ouiaId,
+      ouiaSafe,
+      position,
+      elementToFocus,
+      ...props
+    } = this.props;
+    const { container } = this.state;
+
+    if (!canUseDOM || !container) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      <ModalContent
+        boxId={this.boxId}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedby}
+        aria-labelledby={ariaLabelledby}
+        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
+        ouiaSafe={ouiaSafe}
+        position={position}
+        elementToFocus={elementToFocus}
+        {...props}
+      />,
+      container
+    ) as React.ReactElement;
+  }
+}
+
+export { Modal };

package/src/next/components/Modal/ModalBody.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+
+/** Renders content in the body of the modal */
+
+export interface ModalBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the modal body. */
+  children?: React.ReactNode;
+  /** Additional classes added to the modal body. */
+  className?: string;
+  /** Accessible label applied to the modal body. This should be used to communicate
+   * important information about the modal body div element if needed, such as when it is scrollable.
+   */
+  'aria-label'?: string;
+  /** Accessible role applied to the modal body. This will default to "region" if the
+   * aria-label property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  role?: string;
+}
+
+export const ModalBody: React.FunctionComponent<ModalBodyProps> = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  role,
+  ...props
+}: ModalBodyProps) => {
+  const defaultModalBodyRole = ariaLabel ? 'region' : undefined;
+  return (
+    <div
+      aria-label={ariaLabel}
+      role={role || defaultModalBodyRole}
+      className={css(styles.modalBoxBody, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+ModalBody.displayName = 'ModalBody';

package/src/next/components/Modal/ModalBox.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
+
+export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId */
+  'aria-describedby'?: string;
+  /** Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal box. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal box. */
+  className?: string;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+}
+
+export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
+  children,
+  className,
+  variant = 'default',
+  position,
+  positionOffset,
+  'aria-labelledby': ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
+  style,
+  ...props
+}: ModalBoxProps) => {
+  if (positionOffset) {
+    style = style || {};
+    (style as any)[topSpacer.name] = positionOffset;
+  }
+  return (
+    <div
+      role="dialog"
+      aria-label={ariaLabel || null}
+      aria-labelledby={ariaLabelledby || null}
+      aria-describedby={ariaDescribedby}
+      aria-modal="true"
+      className={css(
+        styles.modalBox,
+        className,
+        position === 'top' && styles.modifiers.alignTop,
+        variant === 'large' && styles.modifiers.lg,
+        variant === 'small' && styles.modifiers.sm,
+        variant === 'medium' && styles.modifiers.md
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+ModalBox.displayName = 'ModalBox';

package/src/next/components/Modal/ModalBoxCloseButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import { Button } from '../../../components/Button';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { OUIAProps } from '../../../helpers';
+
+export interface ModalBoxCloseButtonProps extends OUIAProps {
+  /** Additional classes added to the close button. */
+  className?: string;
+  /** A callback for when the close button is clicked. */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Accessible descriptor of the close button. */
+  'aria-label'?: string;
+  /** Value to set the data-ouia-component-id.*/
+  ouiaId?: number | string;
+}
+
+export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
+  className,
+  onClose,
+  'aria-label': ariaLabel = 'Close',
+  ouiaId,
+  ...props
+}: ModalBoxCloseButtonProps) => (
+  <div className={css(styles.modalBoxClose, className)}>
+    <Button
+      variant="plain"
+      onClick={(event) => onClose(event)}
+      aria-label={ariaLabel}
+      {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
+      {...props}
+    >
+      <TimesIcon />
+    </Button>
+  </div>
+);
+ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';

package/src/next/components/Modal/ModalBoxDescription.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+
+export interface ModalBoxDescriptionProps {
+  /** Content rendered inside the description. */
+  children?: React.ReactNode;
+  /** Additional classes added to the description. */
+  className?: string;
+  /** Id of the description. */
+  id?: string;
+}
+
+export const ModalBoxDescription: React.FunctionComponent<ModalBoxDescriptionProps> = ({
+  children = null,
+  className = '',
+  id = '',
+  ...props
+}: ModalBoxDescriptionProps) => (
+  <div {...props} id={id} className={css(styles.modalBoxDescription, className)}>
+    {children}
+  </div>
+);
+ModalBoxDescription.displayName = 'ModalBoxDescription';

package/src/next/components/Modal/ModalBoxTitle.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import { css } from '@patternfly/react-styles';
+import { capitalize } from '../../../helpers';
+import { Tooltip } from '../../../components/Tooltip';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import { useIsomorphicLayoutEffect } from '../../../helpers';
+
+export const isVariantIcon = (icon: any): icon is string =>
+  ['success', 'danger', 'warning', 'info', 'custom'].includes(icon as string);
+
+export interface ModalBoxTitleProps {
+  /** Additional classes added to the modal box title. */
+  className?: string;
+  /** Id of the modal box title. */
+  id?: string;
+  /** Content rendered inside the modal box title. */
+  title: React.ReactNode;
+  /** Optional alert icon (or other) to show before the title. When the predefined alert types
+   * are used the default styling will be automatically applied. */
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+  /** Optional title label text for screen readers. */
+  titleScreenReaderText?: string;
+}
+
+export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
+  className,
+  id,
+  title,
+  titleIconVariant,
+  titleScreenReaderText,
+  ...props
+}: ModalBoxTitleProps) => {
+  const [hasTooltip, setHasTooltip] = React.useState(false);
+  const h1 = React.useRef<HTMLHeadingElement>(null);
+  const label =
+    titleScreenReaderText ||
+    (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleScreenReaderText);
+  const variantIcons = {
+    success: <CheckCircleIcon />,
+    danger: <ExclamationCircleIcon />,
+    warning: <ExclamationTriangleIcon />,
+    info: <InfoCircleIcon />,
+    custom: <BellIcon />
+  };
+  const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant;
+
+  useIsomorphicLayoutEffect(() => {
+    setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
+  }, []);
+
+  const content = (
+    <h1
+      id={id}
+      ref={h1}
+      className={css(modalStyles.modalBoxTitle, titleIconVariant && modalStyles.modifiers.icon, className)}
+      {...props}
+    >
+      {titleIconVariant && (
+        <span className={css(modalStyles.modalBoxTitleIcon)}>
+          {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
+        </span>
+      )}
+      {label && <span className="pf-v5-screen-reader">{label}</span>}
+      <span className={css(modalStyles.modalBoxTitleText)}>{title}</span>
+    </h1>
+  );
+
+  return hasTooltip ? <Tooltip content={title}>{content}</Tooltip> : content;
+};
+ModalBoxTitle.displayName = 'ModalBoxTitle';