From 15fe373ca8e090494f5190874ec8daad91f12e6f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 29 Aug 2024 11:25:31 +0200
Subject: [PATCH] Use `useReducedMotion()` hook instead of custom logic

---
 .../navigator/navigator-screen/component.tsx  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 6a089b466473d..82b82e03ca0bb 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -16,7 +16,11 @@ import {
 	useState,
 	useLayoutEffect,
 } from '@wordpress/element';
-import { useMergeRefs, usePrevious } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	usePrevious,
+	useReducedMotion,
+} from '@wordpress/compose';
 import { isRTL as isRTLFn } from '@wordpress/i18n';
 import { escapeAttribute } from '@wordpress/escape-html';
 
@@ -31,9 +35,6 @@ import { NavigatorContext } from '../context';
 import * as styles from '../styles';
 import type { NavigatorScreenProps } from '../types';
 
-const isReducedMotion = ( w: Window | null | undefined ) =>
-	!! w && w.matchMedia( `(prefers-reduced-motion)` ).matches === true;
-
 const isExitAnimation = ( e: AnimationEvent ) =>
 	e.animationName === styles.slideToLeft.name || styles.slideToRight.name;
 
@@ -43,6 +44,7 @@ function UnconnectedNavigatorScreen(
 ) {
 	const screenId = useId();
 	const animationTimeoutRef = useRef< number >();
+	const prefersReducedMotion = useReducedMotion();
 
 	// Read props and components context.
 	const { children, className, path, ...otherProps } = useContextSystem(
@@ -94,15 +96,17 @@ function UnconnectedNavigatorScreen(
 			//    rendering its contents in the DOM, without the need to wait for
 			//    the `animationend` event)
 			setExitAnimationStatus(
-				skipAnimationAndFocusRestoration ||
-					isReducedMotion(
-						wrapperRef.current?.ownerDocument?.defaultView
-					)
+				skipAnimationAndFocusRestoration || prefersReducedMotion
 					? 'animated'
 					: 'animating'
 			);
 		}
-	}, [ isMatch, wasMatch, skipAnimationAndFocusRestoration ] );
+	}, [
+		isMatch,
+		wasMatch,
+		skipAnimationAndFocusRestoration,
+		prefersReducedMotion,
+	] );
 
 	// Styles
 	const isRTL = isRTLFn();