Undo a891dcd. Use useMediaQuery instead.

iTwin · Sep 6, 2024 · c296e05 · c296e05
1 parent d1a711c
commit c296e05
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 26 deletions.
diff --git a/packages/itwinui-css/src/panels/panels.scss b/packages/itwinui-css/src/panels/panels.scss
@@ -4,10 +4,6 @@
 .iui-panel-wrapper {
   overflow: hidden;
   scroll-snap-type: x proximity;
-
-  @media (prefers-reduced-motion: no-preference) {
-    scroll-behavior: smooth;
-  }
 }
 
 // Intentional selector to increase specificity

diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -14,7 +14,7 @@ import {
   useLatestRef,
   useMergedRefs,
   useSafeContext,
-  getWindow,
+  useMediaQuery,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -139,6 +139,8 @@ const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
 
   const previousActivePanel = useDelayed(activePanel);
 
+  const motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+
   const changeActivePanel = React.useCallback(
     async (newActiveId: string, direction: 'forward' | 'backward') => {
       if (
@@ -154,6 +156,7 @@ const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
       panelElementsRef.current[newActiveId]?.scrollIntoView({
         block: 'nearest',
         inline: 'center',
+        behavior: motionOk ? 'smooth' : 'instant',
       });
 
       await new Promise((resolve) => {
@@ -173,6 +176,7 @@ const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
     },
     [
       activePanel,
+      motionOk,
       panelElementsRef,
       panelHeaderElementsRef,
       previousActivePanel,
@@ -522,21 +526,7 @@ export const Panels = {
 /**
  * Returns a copy of value which reflects state changes after a set delay.
  */
-function useDelayed<T>(
-  value: T,
-  {
-    delay,
-  }: {
-    /** Default delay is 500ms, or 0ms when prefers-reduced-motion */
-    delay?: number;
-  } = {},
-): T {
-  const motionOk = getWindow()?.matchMedia?.(
-    '(prefers-reduced-motion: no-preference)',
-  )?.matches;
-
-  delay ??= motionOk ? 500 : 0;
-
+function useDelayed<T>(value: T, { delay } = { delay: 5000 }): T {
   const [delayed, setDelayed] = React.useState<T>(value);
   const timeout = React.useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined,

diff --git a/testing/e2e/app/routes/Panels/spec.ts b/testing/e2e/app/routes/Panels/spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Locator } from '@playwright/test';
 
 test('should display initialActiveId as the initial panel', async ({
   page,
@@ -86,11 +86,8 @@ test(`should not scroll when reduced motion is enabled`, async ({ page }) => {
 
   await rootPanelTrigger.first().click();
 
-  // Assuming the scroll duration is around 500ms, the number of panels in the DOM should never be more than 1
-  for (let i = 0; i < 10; i++) {
-    await page.waitForTimeout(50);
-    expect(await page.locator('#panels-wrapper > *').count()).toBe(1);
-  }
+  // TODO: How to test scroll? The front scrolling didn't seem to happen when testing in playwright ui mode.
+  // But maybe back scrolling works?
 });
 
 test('should inert and/or unmount inactive panels', async ({ page }) => {
@@ -177,3 +174,5 @@ test('should support nested panels', async ({ page }) => {
     }
   }
 });
+
+// ----------------------------------------------------------------------------