Better check for prefers-reduced-motion (#2223)

Co-authored-by: Rohan <[email protected]>
iTwin · Sep 9, 2024 · 43fd75b · 43fd75b
1 parent 7874b93
commit 43fd75b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx
@@ -7,7 +7,7 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import {
   getBoundedValue,
-  getWindow,
+  useMediaQuery,
   useMergedRefs,
   useResizeObserver,
   Box,
@@ -146,6 +146,8 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
     handleSlideChange,
   ]);
 
+  const motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+
   React.useEffect(() => {
     const firstDot = listRef.current?.children[firstVisibleDotIndex] as
       | HTMLElement
@@ -154,10 +156,6 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       return;
     }
 
-    const motionOk = getWindow()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
-
     listRef.current.scrollTo({
       left: firstDot.offsetLeft - listRef.current.offsetLeft,
       behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
@@ -166,7 +164,14 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
     if (justMounted.current) {
       justMounted.current = false;
     }
-  }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  }, [
+    currentIndex,
+    firstVisibleDotIndex,
+    motionOk,
+    slideCount,
+    visibleCount,
+    width,
+  ]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {

diff --git a/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx b/packages/itwinui-react/src/core/Carousel/CarouselSlider.tsx
@@ -10,6 +10,7 @@ import {
   useMergedRefs,
   useLayoutEffect,
   Box,
+  useMediaQuery,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
@@ -48,6 +49,8 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
   const sliderRef = React.useRef<HTMLElement>(null);
   const refs = useMergedRefs(sliderRef, ref);
 
+  const motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+
   scrollToSlide.current = (
     slideIndex: number,
     { instant }: { instant?: boolean } = {},
@@ -62,10 +65,6 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
       return;
     }
 
-    const motionOk = getWindow()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
-
     sliderRef.current.scrollTo({
       left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
       behavior: instant || !motionOk ? 'instant' : 'smooth',

diff --git a/packages/itwinui-react/src/core/Toast/Toast.tsx b/packages/itwinui-react/src/core/Toast/Toast.tsx
@@ -12,14 +12,12 @@ import {
   Box,
   useSafeContext,
   ButtonBase,
+  useMediaQuery,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
 
-const isMotionOk = () =>
-  getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
-
 export type ToastCategory =
   | 'informational'
   | 'negative'
@@ -117,6 +115,8 @@ export const Toast = (props: ToastProps) => {
   const thisElement = React.useRef<HTMLDivElement>(null);
   const [margin, setMargin] = React.useState(0);
 
+  const motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+
   const marginStyle = () => {
     if (placementPosition === 'top') {
       return { marginBlockEnd: margin };
@@ -192,18 +192,18 @@ export const Toast = (props: ToastProps) => {
       appear={true}
       unmountOnExit={true}
       onEnter={(node: HTMLElement) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           node.style.transform = 'translateY(15%)';
           node.style.transitionTimingFunction = 'ease';
         }
       }}
       onEntered={(node: HTMLElement) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           node.style.transform = 'translateY(0)';
         }
       }}
       onExiting={(node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           const { translateX, translateY } = calculateOutAnimation(node);
           node.style.transform = animateOutTo
             ? `scale(0.9) translate(${translateX}px,${translateY}px)`