@patternfly/react-core 6.7.0-prerelease.1 → 6.7.0-prerelease.3

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.7.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.7.0-prerelease.2","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.7.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.7.0-prerelease.2","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.7.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.7.0-prerelease.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.7.0-prerelease.1",
+  "version": "6.7.0-prerelease.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.7.0-prerelease.0",
-    "@patternfly/react-styles": "^6.7.0-prerelease.0",
-    "@patternfly/react-tokens": "^6.7.0-prerelease.0",
+    "@patternfly/react-icons": "^6.7.0-prerelease.1",
+    "@patternfly/react-styles": "^6.7.0-prerelease.1",
+    "@patternfly/react-tokens": "^6.7.0-prerelease.2",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.49",
+    "@patternfly/patternfly": "6.6.0-prerelease.50",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "7c85c1ea81ad07730b54c1e7ae5af218eecb0923"
+  "gitHead": "32056428bd221fb8009157d7f7d29bae84f7fe3f"
 }

package/src/components/Backdrop/Backdrop.tsx

@@ -1,20 +1,39 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import { useHasAnimations } from '../../helpers';
 
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the backdrop */
   children?: React.ReactNode;
   /** Additional classes added to the backdrop */
   className?: string;
+  /** Flag indicating whether animations are enabled. Animations are enabled by default. */
+  hasAnimations?: boolean;
+  /** Flag to show the backdrop when animations are enabled. Set to false while the backdrop remains mounted to play its exit transition. */
+  isVisible?: boolean;
 }
 
 export const Backdrop: React.FunctionComponent<BackdropProps> = ({
   children = null,
   className = '',
+  hasAnimations: hasAnimationsProp = true,
+  isVisible = true,
   ...props
-}: BackdropProps) => (
-  <div {...props} className={css(styles.backdrop, className)}>
-    {children}
-  </div>
-);
+}: BackdropProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+
+  return (
+    <div
+      {...props}
+      className={css(
+        styles.backdrop,
+        hasAnimations && styles.modifiers.animate,
+        hasAnimations && isVisible && styles.modifiers.show,
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
 Backdrop.displayName = 'Backdrop';

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

@@ -21,11 +21,45 @@ test(`Renders with the ${styles.backdrop}`, () => {
   expect(screen.getByText('Test')).toHaveClass(styles.backdrop);
 });
 
-test(`Renders with only the class ${styles.backdrop} by default`, () => {
+test('Renders with animations enabled by default', () => {
   render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, styles.modifiers.show, {
+    exact: true
+  });
+});
+
+test('Renders without animation classes when animations are explicitly disabled', () => {
+  render(<Backdrop hasAnimations={false}>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass(styles.backdrop, { exact: true });
 });
 
+test('Renders as visible by default when animations are enabled', () => {
+  render(<Backdrop hasAnimations>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, styles.modifiers.show, {
+    exact: true
+  });
+});
+
+test('Renders as hidden when animations are enabled and isVisible is false', () => {
+  render(
+    <Backdrop hasAnimations isVisible={false}>
+      Test
+    </Backdrop>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, { exact: true });
+});
+
+test('Renders as visible when animations are enabled and isVisible is true', () => {
+  render(
+    <Backdrop hasAnimations isVisible>
+      Test
+    </Backdrop>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, styles.modifiers.show, {
+    exact: true
+  });
+});
+
 test('Renders with custom class name when className prop is passed', () => {
   render(<Backdrop className="test-class">Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('test-class');

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-backdrop"
+    class="pf-v6-c-backdrop pf-m-animate pf-m-show"
   >
     Backdrop
   </div>

package/src/components/Button/Button.tsx

@@ -99,7 +99,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
-  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */
+  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. Applies additional expanded styling when isDocked is true. */
   isExpanded?: boolean;
   /** Flag indicating the button is a settings button. This will override the icon property. */
   isSettings?: boolean;
@@ -111,8 +111,6 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isCircle?: boolean;
   /** @beta Flag indicating the button is a docked variant button. For use in docked navigation. */
   isDocked?: boolean;
-  /** @beta Flag indicating the docked button should display text. Only applies when isDocked is true. */
-  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -139,7 +137,6 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   hamburgerVariant,
   isCircle,
   isDocked = false,
-  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -272,7 +269,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
         isDocked && styles.modifiers.docked,
-        isDocked && isTextExpanded && styles.modifiers.textExpanded,
+        isDocked && isExpanded && styles.modifiers.expanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

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

@@ -566,34 +566,23 @@ describe('Dock variant', () => {
     expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
   });
 
-  test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true and isDocked = true`, () => {
+  test(`Renders with class ${styles.modifiers.expanded} when isExpanded = true and isDocked = true`, () => {
     render(
-      <Button isTextExpanded isDocked>
+      <Button isExpanded isDocked>
         Text Expanded Button
       </Button>
     );
-    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+  test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => {
     render(<Button>Button</Button>);
-    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
 
-  test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded = true but isDocked is not passed`, () => {
-    render(<Button isTextExpanded>Text Expanded Button</Button>);
-    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
-  });
-
-  test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are true`, () => {
-    render(
-      <Button isDocked isTextExpanded>
-        Dock Text Expanded Button
-      </Button>
-    );
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass(styles.modifiers.docked);
-    expect(button).toHaveClass(styles.modifiers.textExpanded);
+  test(`Does not render with class ${styles.modifiers.expanded} when isExpanded = true but isDocked is not passed`, () => {
+    render(<Button isExpanded>Text Expanded Button</Button>);
+    expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
   });
 });
 

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

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r35:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Compass/Compass.tsx

@@ -10,14 +10,10 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   masthead?: React.ReactNode;
   /** Content of the docked navigation area of the layout */
   dock?: React.ReactNode;
-  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
+  /** @beta Flag indicating the docked nav is expanded. Only applies when dock content is passed. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
-  isDockExpandableExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and
-   * will handle toggling the visibility of the text in individual isDocked components.
-   */
-  isDockTextExpanded?: boolean;
+  /** @beta Flag indicating the docked nav should expand as an overlay instead of the default inline. */
+  isDockOverlay?: boolean;
   /** Content placed at the top of the compass layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
@@ -47,8 +43,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   masthead,
   dock,
   isDockExpanded,
-  isDockExpandableExpanded,
-  isDockTextExpanded,
+  isDockOverlay,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -72,8 +67,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
           className={css(
             `${styles.compass}__dock`,
             isDockExpanded && styles.modifiers.expanded,
-            isDockExpandableExpanded && styles.modifiers.expandableExpanded,
-            isDockTextExpanded && styles.modifiers.textExpanded
+            isDockOverlay && styles.modifiers.overlay
           )}
         >
           {dock}

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

@@ -94,19 +94,9 @@ test('Renders footer without expanded class and with inert when isFooterExpanded
   expect(footerElement).toHaveAttribute('inert');
 });
 
-test(`Renders with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is true`, () => {
-  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded />);
-  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.expandableExpanded);
-});
-
-test(`Does not render with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is false`, () => {
-  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded={false} />);
-  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
-});
-
-test(`Does not render with ${styles.modifiers.expandableExpanded} class by default`, () => {
-  render(<Compass dock={<div>Dock content</div>} />);
-  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+test(`Renders with ${styles.modifiers.overlay} class when isDockOverlay is true`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockOverlay />);
+  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.overlay);
 });
 
 test('Renders with drawer when drawerContent is provided', () => {
@@ -194,13 +184,3 @@ test(`Renders dock without ${styles.modifiers.expanded} class when isDockExpande
   render(<Compass dock="Dock content" isDockExpanded={false} />);
   expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.expanded);
 });
-
-test(`Renders dock with ${styles.modifiers.textExpanded} class when isDockTextExpanded is true`, () => {
-  render(<Compass dock="Dock content" isDockTextExpanded />);
-  expect(screen.getByText('Dock content')).toHaveClass(styles.modifiers.textExpanded);
-});
-
-test(`Renders dock without ${styles.modifiers.textExpanded} class when isDockTextExpanded is false`, () => {
-  render(<Compass dock="Dock content" isDockTextExpanded={false} />);
-  expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.textExpanded);
-});

package/src/components/MenuToggle/MenuToggle.tsx

@@ -55,8 +55,6 @@ export interface MenuToggleProps
   isSettings?: boolean;
   /** @beta Flag indicating the menu toggle is a docked variant. For use in docked navigation. */
   isDocked?: boolean;
-  /** @beta Flag indicating the docked toggle should display text. Only applies when isDocked is true. */
-  isTextExpanded?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -95,7 +93,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isPlaceholder: false,
     isCircle: false,
     isDocked: false,
-    isTextExpanded: false,
     size: 'default',
     ouiaSafe: true,
     'aria-haspopup': 'menu'
@@ -116,7 +113,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isCircle,
       isSettings,
       isDocked,
-      isTextExpanded,
       splitButtonItems,
       variant,
       status,
@@ -204,7 +200,6 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,
             isDocked && styles.modifiers.docked,
-            isDocked && isTextExpanded && styles.modifiers.textExpanded,
             size === MenuToggleSize.sm && styles.modifiers.small,
             className
           );

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

@@ -166,32 +166,21 @@ test(`Does not render with class ${styles.modifiers.docked} when isDocked is not
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked);
 });
 
-test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded is passed and isDocked is passed`, () => {
+test(`Renders with class ${styles.modifiers.expanded} when isExpanded is passed and isDocked is passed`, () => {
   render(
-    <MenuToggle isTextExpanded isDocked>
+    <MenuToggle isExpanded isDocked>
       Text Expanded Toggle
     </MenuToggle>
   );
-  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
 });
 
-test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => {
+test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => {
   render(<MenuToggle>Toggle</MenuToggle>);
-  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded);
 });
 
-test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is passed but isDocked is not passed`, () => {
-  render(<MenuToggle isTextExpanded>Text Expanded Toggle</MenuToggle>);
-  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded);
-});
-
-test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are passed`, () => {
-  render(
-    <MenuToggle isDocked isTextExpanded>
-      Dock Text Expanded Toggle
-    </MenuToggle>
-  );
-  const button = screen.getByRole('button');
-  expect(button).toHaveClass(styles.modifiers.docked);
-  expect(button).toHaveClass(styles.modifiers.textExpanded);
+test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is passed but isDocked is not passed`, () => {
+  render(<MenuToggle isExpanded>Text Expanded Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded);
 });

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));

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 
 import { ModalContent } from '../ModalContent';
 
@@ -59,3 +59,77 @@ test('Modal content can add id to focus trap correctly for use with dropdowns',
     'pf-v6-l-bullseye'
   );
 });
+
+test('Modal content is hidden from assistive technologies during its closing animation', () => {
+  const { rerender } = render(
+    <ModalContent isOpen hasAnimations backdropId="backdropId" {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  const backdrop = document.getElementById('backdropId');
+
+  expect(backdrop).not.toHaveAttribute('aria-hidden');
+
+  rerender(
+    <ModalContent isOpen={false} hasAnimations backdropId="backdropId" {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(backdrop).toHaveAttribute('aria-hidden', 'true');
+
+  rerender(
+    <ModalContent isOpen hasAnimations backdropId="backdropId" {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(backdrop).not.toHaveAttribute('aria-hidden');
+});
+
+test('Modal content unmounts if its closing transition does not end', () => {
+  jest.useFakeTimers();
+  try {
+    const { rerender } = render(
+      <ModalContent isOpen hasAnimations backdropId="backdropId" {...modalContentProps}>
+        This is a ModalBox header
+      </ModalContent>
+    );
+
+    rerender(
+      <ModalContent isOpen={false} hasAnimations backdropId="backdropId" {...modalContentProps}>
+        This is a ModalBox header
+      </ModalContent>
+    );
+    expect(document.getElementById('backdropId')).toBeInTheDocument();
+
+    act(() => jest.runOnlyPendingTimers());
+    expect(document.getElementById('backdropId')).not.toBeInTheDocument();
+  } finally {
+    jest.useRealTimers();
+  }
+});
+
+test('Modal content remains mounted during close when reduced motion is preferred', () => {
+  const matchMedia = window.matchMedia;
+  window.matchMedia = jest.fn().mockReturnValue({ matches: true } as MediaQueryList);
+  jest.useFakeTimers();
+  try {
+    const { rerender } = render(
+      <ModalContent isOpen hasAnimations backdropId="backdropId" {...modalContentProps}>
+        This is a ModalBox header
+      </ModalContent>
+    );
+
+    rerender(
+      <ModalContent isOpen={false} hasAnimations backdropId="backdropId" {...modalContentProps}>
+        This is a ModalBox header
+      </ModalContent>
+    );
+    expect(document.getElementById('backdropId')).toBeInTheDocument();
+
+    act(() => jest.runOnlyPendingTimers());
+    expect(document.getElementById('backdropId')).not.toBeInTheDocument();
+  } finally {
+    jest.useRealTimers();
+    window.matchMedia = matchMedia;
+  }
+});