ModalBox.tsx

import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
import stylesAnimated from '@patternfly/react-styles/css/components/ModalAnimations/modal-animations';
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';
  /** Flag indicating whether animations are enabled. */
  hasAnimations?: boolean;
  /** Flag to show the modal. */
  isOpen?: boolean;
}

export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
  children,
  className,
  variant = 'default',
  position,
  positionOffset,
  'aria-labelledby': ariaLabelledby,
  'aria-label': ariaLabel,
  'aria-describedby': ariaDescribedby,
  style,
  isOpen,
  hasAnimations,
  ...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,
        hasAnimations && stylesAnimated.modalAnimated,
        hasAnimations && isOpen === true && stylesAnimated.modalAnimatedOpen,
        hasAnimations && isOpen !== true && stylesAnimated.modalAnimatedClosed,
        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';