@patternfly/react-core 6.6.2 → 6.7.0-prerelease.2

package/src/components/MenuToggle/MenuToggle.tsx

@@ -73,6 +73,8 @@ export interface MenuToggleProps
   badge?: BadgeProps | React.ReactNode;
   /** Adds styling which affects the size of the menu toggle */
   size?: 'default' | 'sm';
+  /** Indicates what type of popup will be triggered by the menu toggle. A value of true is the same as a value of "menu".  */
+  'aria-haspopup'?: 'menu' | 'listbox' | boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
   /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
@@ -95,7 +97,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isDocked: false,
     isTextExpanded: false,
     size: 'default',
-    ouiaSafe: true
+    ouiaSafe: true,
+    'aria-haspopup': 'menu'
   };
 
   render() {
@@ -121,6 +124,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       innerRef,
       onClick,
       'aria-label': ariaLabel,
+      'aria-haspopup': ariaHasPopup,
       ouiaId,
       ouiaSafe,
       size,
@@ -171,6 +175,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
                   type="button"
                   className={css(styles.menuToggleButton)}
                   aria-expanded={isExpanded}
+                  aria-haspopup={ariaHasPopup}
                   onClick={onClick}
                   aria-label={ariaLabel || 'Menu toggle'}
                   tabIndex={-1}
@@ -231,6 +236,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
                   className={css(styles.menuToggleButton, children && styles.modifiers.text)}
                   type="button"
                   aria-expanded={isExpanded}
+                  aria-haspopup={ariaHasPopup}
                   aria-label={ariaLabel}
                   disabled={isDisabled}
                   onClick={onClick}
@@ -249,6 +255,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
               className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
               type="button"
               aria-label={ariaLabel}
+              aria-haspopup={ariaHasPopup}
               aria-expanded={isExpanded}
               ref={innerRef as React.Ref<HTMLButtonElement>}
               disabled={isDisabled}

package/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle test-class"
     data-ouia-component-id="OUIA-Generated-MenuToggle-:r3:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -44,6 +45,7 @@ exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] =
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
     data-ouia-component-id="OUIA-Generated-MenuToggle-:r1:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -84,6 +86,7 @@ exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
     data-ouia-component-id="OUIA-Generated-MenuToggle-:rh:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -133,6 +136,7 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle"
     data-ouia-component-id="OUIA-Generated-MenuToggle-:rf:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -190,6 +194,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-disabled"
     data-ouia-component-id="OUIA-Generated-MenuToggle-:r7:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -231,6 +236,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="true"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-expanded"
     data-ouia-component-id="OUIA-Generated-MenuToggle-:r5:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -271,6 +277,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-plain"
     data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:rb:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -302,6 +309,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-primary"
     data-ouia-component-id="OUIA-Generated-MenuToggle-primary-:r9:"
     data-ouia-component-type="PF6/MenuToggle"
@@ -342,6 +350,7 @@ exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
+    aria-haspopup="menu"
     class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
     data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rd:"
     data-ouia-component-type="PF6/MenuToggle"

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -8,8 +8,8 @@ propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 
 import { Fragment, useState } from 'react';
 import './MenuToggle.css'
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
@@ -65,7 +65,7 @@ To create a "settings" menu toggle that will animate on hover and focus, you can
 
 ### Custom icons
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle.
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds an `RhUiAddIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 

package/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx

@@ -4,11 +4,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 
 export const MenuToggleAvatarText: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
-    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>
+    <MenuToggle aria-haspopup={false} icon={<Avatar src={imgAvatar} alt="avatar" size="sm" />}>
       Ned Username
     </MenuToggle>{' '}
-    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>
+    <MenuToggle aria-haspopup={false} icon={<Avatar src={imgAvatar} alt="avatar" size="sm" />} isExpanded>
+      Ned Username
+    </MenuToggle>{' '}
+    <MenuToggle aria-haspopup={false} icon={<Avatar src={imgAvatar} alt="avatar" size="sm" />} isDisabled>
       Ned Username
     </MenuToggle>
   </Fragment>

package/src/components/MenuToggle/examples/MenuToggleBadge.tsx

@@ -3,7 +3,13 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 export const MenuToggleBadge: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
-    <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
+    <MenuToggle aria-haspopup={false} badge={<Badge>4 selected</Badge>}>
+      Count
+    </MenuToggle>
+    <MenuToggle
+      aria-haspopup={false}
+      variant="plainText"
+      badge={<Badge screenReaderText="additional items">4</Badge>}
+    />
   </Fragment>
 );

package/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx

@@ -1,3 +1,5 @@
 import { MenuToggle } from '@patternfly/react-core';
 
-export const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;
+export const MenuToggleCollapsed: React.FunctionComponent = () => (
+  <MenuToggle aria-haspopup={false}>Collapsed</MenuToggle>
+);

package/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx

@@ -1,16 +1,16 @@
 import { Fragment } from 'react';
 import { MenuToggle } from '@patternfly/react-core';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 
 export const MenuToggleCustomIcon: React.FC = () => (
   <Fragment>
-    <MenuToggle icon={<PlusIcon />} variant="primary">
+    <MenuToggle aria-haspopup={false} icon={<RhUiAddIcon />} variant="primary">
       Icon
     </MenuToggle>{' '}
-    <MenuToggle icon={<PlusIcon />} variant="secondary">
+    <MenuToggle aria-haspopup={false} icon={<RhUiAddIcon />} variant="secondary">
       Icon
     </MenuToggle>{' '}
-    <MenuToggle icon={<PlusIcon />} variant="secondary" isDisabled>
+    <MenuToggle aria-haspopup={false} icon={<RhUiAddIcon />} variant="secondary" isDisabled>
       Icon
     </MenuToggle>
   </Fragment>

package/src/components/MenuToggle/examples/MenuToggleDisabled.tsx

@@ -1,3 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
-export const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;
+export const MenuToggleDisabled: React.FunctionComponent = () => (
+  <MenuToggle aria-haspopup={false} isDisabled>
+    Disabled
+  </MenuToggle>
+);

package/src/components/MenuToggle/examples/MenuToggleExpanded.tsx

@@ -1,3 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
-export const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;
+export const MenuToggleExpanded: React.FunctionComponent = () => (
+  <MenuToggle aria-haspopup={false} isExpanded>
+    Expanded
+  </MenuToggle>
+);

package/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx

@@ -2,7 +2,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleFullHeight: React.FunctionComponent = () => (
   <div style={{ height: '80px' }}>
-    <MenuToggle isFullHeight aria-label="Full height menu toggle">
+    <MenuToggle aria-haspopup={false} isFullHeight aria-label="Full height menu toggle">
       Full height
     </MenuToggle>
   </div>

package/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx

@@ -1,7 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleFullWidth: React.FunctionComponent = () => (
-  <MenuToggle isFullWidth aria-label="Full width menu toggle">
+  <MenuToggle aria-haspopup={false} isFullWidth aria-label="Full width menu toggle">
     Full width
   </MenuToggle>
 );

package/src/components/MenuToggle/examples/MenuToggleInForm.tsx

@@ -1,7 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleInForm = (): JSX.Element => (
-  <MenuToggle isInForm aria-label="Menu toggle in a form">
+  <MenuToggle aria-haspopup={false} isInForm aria-label="Menu toggle in a form">
     In form
   </MenuToggle>
 );

package/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx

@@ -1,5 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuTogglePlaceholder: React.FunctionComponent = () => (
-  <MenuToggle isPlaceholder>Placeholder text</MenuToggle>
+  <MenuToggle aria-haspopup={false} isPlaceholder>
+    Placeholder text
+  </MenuToggle>
 );

package/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx

@@ -4,8 +4,15 @@ import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons
 
 export const MenuTogglePlainCircle: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle isCircle icon={<RhUiEllipsisVerticalFillIcon />} variant="plain" aria-label="plain circle kebab" />{' '}
     <MenuToggle
+      aria-haspopup={false}
+      isCircle
+      icon={<RhUiEllipsisVerticalFillIcon />}
+      variant="plain"
+      aria-label="plain circle kebab"
+    />{' '}
+    <MenuToggle
+      aria-haspopup={false}
       isCircle
       icon={<RhUiEllipsisVerticalFillIcon />}
       variant="plain"
@@ -13,6 +20,7 @@ export const MenuTogglePlainCircle: React.FunctionComponent = () => (
       aria-label="plain circle expanded kebab"
     />{' '}
     <MenuToggle
+      aria-haspopup={false}
       isCircle
       icon={<RhUiEllipsisVerticalFillIcon />}
       variant="plain"

package/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx

@@ -4,8 +4,25 @@ import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons
 
 export const MenuTogglePlainIcon: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle icon={<RhUiEllipsisVerticalFillIcon />} variant="plain" aria-label="plain kebab" />{' '}
-    <MenuToggle icon={<RhUiEllipsisVerticalFillIcon />} variant="plain" isExpanded aria-label="plain expanded kebab" />{' '}
-    <MenuToggle icon={<RhUiEllipsisVerticalFillIcon />} variant="plain" isDisabled aria-label="disabled plain kebab" />
+    <MenuToggle
+      aria-haspopup={false}
+      icon={<RhUiEllipsisVerticalFillIcon />}
+      variant="plain"
+      aria-label="plain kebab"
+    />{' '}
+    <MenuToggle
+      aria-haspopup={false}
+      icon={<RhUiEllipsisVerticalFillIcon />}
+      variant="plain"
+      isExpanded
+      aria-label="plain expanded kebab"
+    />{' '}
+    <MenuToggle
+      aria-haspopup={false}
+      icon={<RhUiEllipsisVerticalFillIcon />}
+      variant="plain"
+      isDisabled
+      aria-label="disabled plain kebab"
+    />
   </Fragment>
 );

package/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx

@@ -3,13 +3,13 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuTogglePlainTextLabel: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
+    <MenuToggle aria-haspopup={false} variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
       Disabled
     </MenuToggle>{' '}
-    <MenuToggle variant="plainText" aria-label="Plain menu toggle">
+    <MenuToggle aria-haspopup={false} variant="plainText" aria-label="Plain menu toggle">
       Custom text
     </MenuToggle>{' '}
-    <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
+    <MenuToggle aria-haspopup={false} variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
       Custom text (expanded)
     </MenuToggle>
   </Fragment>

package/src/components/MenuToggle/examples/MenuToggleSettings.tsx

@@ -3,6 +3,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleSettings: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant="plain" aria-label="Settings" />
+    <MenuToggle aria-haspopup={false} isSettings>
+      Settings
+    </MenuToggle>{' '}
+    <MenuToggle aria-haspopup={false} isSettings variant="plain" aria-label="Settings" />
   </Fragment>
 );

package/src/components/MenuToggle/examples/MenuToggleSmall.tsx

@@ -1,3 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
-export const MenuToggleSmall: React.FunctionComponent = () => <MenuToggle size="sm">Small toggle</MenuToggle>;
+export const MenuToggleSmall: React.FunctionComponent = () => (
+  <MenuToggle aria-haspopup={false} size="sm">
+    Small toggle
+  </MenuToggle>
+);

package/src/components/MenuToggle/examples/MenuToggleStatus.tsx

@@ -3,16 +3,22 @@ import { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const MenuToggleStatus: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle status="success">Success</MenuToggle>
+    <MenuToggle aria-haspopup={false} status="success">
+      Success
+    </MenuToggle>
     <br />
     <br />
-    <MenuToggle status="warning">Warning</MenuToggle>
+    <MenuToggle aria-haspopup={false} status="warning">
+      Warning
+    </MenuToggle>
     <HelperText>
       <HelperTextItem variant="warning">Warning text that explains the issue.</HelperTextItem>
     </HelperText>
     <br />
     <br />
-    <MenuToggle status="danger">Danger</MenuToggle>
+    <MenuToggle aria-haspopup={false} status="danger">
+      Danger
+    </MenuToggle>
     <HelperText>
       <HelperTextItem variant="error">Danger text that explains the issue.</HelperTextItem>
     </HelperText>

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -16,7 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
   };
 
   return (
-    <MenuToggle variant="typeahead" isFullWidth aria-label="Typeahead menu toggle">
+    <MenuToggle aria-haspopup={false} variant="typeahead" isFullWidth aria-label="Typeahead menu toggle">
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx

@@ -3,11 +3,13 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleVariantStyles: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-    <MenuToggle variant="primary" isExpanded>
+    <MenuToggle aria-haspopup={false} variant="primary">
+      Collapsed
+    </MenuToggle>{' '}
+    <MenuToggle aria-haspopup={false} variant="primary" isExpanded>
       Expanded
     </MenuToggle>{' '}
-    <MenuToggle variant="primary" isDisabled>
+    <MenuToggle aria-haspopup={false} variant="primary" isDisabled>
       Disabled
     </MenuToggle>
   </Fragment>

package/src/components/Modal/Modal.tsx

@@ -53,6 +53,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   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;
+  /** Flag indicating whether animations are enabled. Animations are enabled by default. */
+  hasAnimations?: boolean;
 }
 
 export enum ModalVariant {
@@ -78,7 +80,8 @@ class Modal extends Component<ModalProps, ModalState> {
     variant: 'default',
     appendTo: () => document.body,
     ouiaSafe: true,
-    position: 'default'
+    position: 'default',
+    hasAnimations: true
   };
 
   constructor(props: ModalProps) {

package/src/components/Modal/ModalBox.tsx

@@ -19,6 +19,10 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
   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> = ({
@@ -31,6 +35,8 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   style,
+  isOpen,
+  hasAnimations,
   ...props
 }: ModalBoxProps) => {
   if (positionOffset) {
@@ -46,6 +52,8 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
       aria-modal="true"
       className={css(
         styles.modalBox,
+        hasAnimations && styles.modifiers.animate,
+        hasAnimations && isOpen === true && styles.modifiers.open,
         className,
         position === 'top' && styles.modifiers.alignTop,
         variant === 'large' && styles.modifiers.lg,

package/src/components/Modal/ModalContent.tsx

@@ -1,11 +1,14 @@
+import { useEffect, useState } from 'react';
 import { FocusTrap } from '../../helpers';
 import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
-import { getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps, useHasAnimations } from '../../helpers';
 import { Backdrop } from '../Backdrop';
 import { ModalBoxCloseButton } from './ModalBoxCloseButton';
 import { ModalBox } from './ModalBox';
 
+const transitionEndFallbackDelay = 300;
+
 export interface ModalContentProps extends OUIAProps {
   /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
   'aria-describedby'?: string;
@@ -49,6 +52,8 @@ export interface ModalContentProps extends OUIAProps {
   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;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
@@ -72,9 +77,30 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaSafe = true,
   elementToFocus,
   focusTrapId,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: ModalContentProps) => {
-  if (!isOpen) {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+  // Keeps the modal in the DOM while the close animation runs. When animations are enabled we defer
+  // unmounting until the backdrop's transition ends (see onTransitionEnd below) instead of removing
+  // it immediately when isOpen becomes false.
+  const [isRendered, setIsRendered] = useState(isOpen);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsRendered(true);
+    } else if (!isRendered) {
+      return;
+    } else if (!hasAnimations) {
+      setIsRendered(false);
+    } else {
+      // Ensure the modal is removed if CSS transitions are disabled or transitionend does not fire.
+      const transitionEndFallback = window.setTimeout(() => setIsRendered(false), transitionEndFallbackDelay);
+      return () => window.clearTimeout(transitionEndFallback);
+    }
+  }, [isOpen, hasAnimations, isRendered]);
+
+  if (!isRendered) {
     return null;
   }
 
@@ -91,6 +117,8 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   const modalBox = (
     <ModalBox
       className={css(className)}
+      isOpen={isOpen}
+      hasAnimations={hasAnimations}
       variant={variant}
       position={position}
       positionOffset={positionOffset}
@@ -113,10 +141,32 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       {children}
     </ModalBox>
   );
+  let focusTrapActive = !disableFocusTrap;
+  if (hasAnimations) {
+    focusTrapActive = !disableFocusTrap && isOpen;
+  }
+
   return (
-    <Backdrop className={css(backdropClassName)} id={backdropId}>
+    <Backdrop
+      className={css(backdropClassName)}
+      id={backdropId}
+      hasAnimations={hasAnimations}
+      isVisible={isOpen}
+      aria-hidden={hasAnimations && !isOpen ? true : undefined}
+      onTransitionEnd={
+        hasAnimations
+          ? (event) => {
+              // Only unmount once the backdrop's own closing transition finishes. Guarding on the
+              // target prevents bubbled transitions from child elements from triggering this early.
+              if (!isOpen && event.target === event.currentTarget) {
+                setIsRendered(false);
+              }
+            }
+          : undefined
+      }
+    >
       <FocusTrap
-        active={!disableFocusTrap}
+        active={focusTrapActive}
         focusTrapOptions={{
           clickOutsideDeactivates: true,
           tabbableOptions: { displayCheck: 'none' },

package/src/components/Modal/__tests__/Modal.test.tsx

@@ -111,6 +111,20 @@ describe('Modal', () => {
     expect(document.body).toHaveClass(css(styles.backdropOpen));
   });
 
+  test('modal has animations enabled by default', () => {
+    render(<Modal {...props} isOpen />);
+    const backdrop = screen.getByText('modal content').closest(`.${styles.backdrop}`);
+
+    expect(backdrop).toHaveClass(styles.modifiers.animate, styles.modifiers.show);
+  });
+
+  test('modal animations can be explicitly disabled', () => {
+    render(<Modal {...props} isOpen hasAnimations={false} />);
+    const backdrop = screen.getByText('modal content').closest(`.${styles.backdrop}`);
+
+    expect(backdrop).not.toHaveClass(styles.modifiers.animate, styles.modifiers.show);
+  });
+
   test('modal has no body backdropOpen class when not open', () => {
     render(<Modal {...props} />);
     expect(document.body).not.toHaveClass(css(styles.backdropOpen));