feat(react-motion): add support to provide duration to useMotion hook (#29655)

marcosmoura · web-flow · commit 1865fb7022f3 · 2023-10-26T13:40:18.000Z
diff --git a/change/@fluentui-react-motion-preview-d31b1c1e-5bd8-4783-814b-08719866cb8a.json b/change/@fluentui-react-motion-preview-d31b1c1e-5bd8-4783-814b-08719866cb8a.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add support to provide static duration to useMotion hook",
+  "packageName": "@fluentui/react-motion-preview",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-motion-preview/etc/react-motion-preview.api.md b/packages/react-components/react-motion-preview/etc/react-motion-preview.api.md
@@ -17,6 +17,7 @@ export type MotionClassNames = {
 // @public (undocumented)
 export type MotionOptions = {
     animateOnFirstMount?: boolean;
+    duration?: number;
 };
 
 // @public (undocumented)
@@ -33,6 +34,9 @@ export type MotionState<Element extends HTMLElement = HTMLElement> = {
     active: boolean;
 };
 
+// @public (undocumented)
+export type MotionStylesKeys = 'default' | 'enter' | 'exit' | MotionType;
+
 // @public (undocumented)
 export type MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
 
diff --git a/packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts b/packages/react-components/react-motion-preview/src/hooks/useMotion.test.ts
@@ -1,12 +1,12 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 
-import { useMotion, MotionOptions, MotionShorthand, getDefaultMotionState } from './useMotion';
+import { useMotion, MotionShorthand, MotionOptions, getDefaultMotionState } from './useMotion';
 
-const defaultDuration = 100;
+const cssDuration = 100;
 const renderHookWithRef = (
   initialMotion: MotionShorthand,
   initialOptions?: MotionOptions,
-  style: Record<string, string | undefined> = { 'transition-duration': `${defaultDuration}ms` },
+  style: Record<string, string | undefined> = { 'transition-duration': `${cssDuration}ms` },
 ) => {
   const refEl = document.createElement('div');
   const hook = renderHook(({ motion, options }) => useMotion(motion, options), {
@@ -45,7 +45,7 @@ const jumpAnimationFrame = () => {
   act(() => jest.advanceTimersToNextTimer());
 };
 
-const jumpAnimationTimeout = (timeout: number = defaultDuration) => {
+const jumpAnimationTimeout = (timeout: number = cssDuration) => {
   // timeout + requestAnimationFrame
   act(() => {
     jest.advanceTimersByTime(timeout);
@@ -54,16 +54,23 @@ const jumpAnimationTimeout = (timeout: number = defaultDuration) => {
 };
 
 describe('useMotion', () => {
+  let computedStyleMock: jest.SpyInstance;
+
   beforeEach(() => {
     jest.useFakeTimers();
+    computedStyleMock = jest.spyOn(window, 'getComputedStyle').mockImplementation(() => {
+      return {
+        getPropertyValue: () => `${cssDuration}ms`,
+      } as unknown as CSSStyleDeclaration;
+    });
   });
 
   afterEach(() => {
     jest.useRealTimers();
     jest.resetAllMocks();
   });
 
-  describe('when motion is received', () => {
+  describe('when presence is boolean', () => {
     it('should sync presence value with canRender', () => {
       const { result, rerender } = renderHookWithRef(false);
 
@@ -73,25 +80,6 @@ describe('useMotion', () => {
       expect(result.current.canRender).toBe(true);
     });
 
-    it('should return default values when presence is false', () => {
-      const defaultState = getDefaultMotionState();
-      const { result } = renderHookWithRef(getDefaultMotionState());
-
-      expect(result.current.type).toStrictEqual('unmounted');
-      expect(result.current.ref).toStrictEqual(defaultState.ref);
-      expect(result.current.active).toStrictEqual(false);
-    });
-
-    it('should return default values when presence is true', () => {
-      const defaultState = getDefaultMotionState();
-      const { result } = renderHookWithRef({ ...getDefaultMotionState(), active: true });
-
-      expect(result.current.ref).toStrictEqual(defaultState.ref);
-      expect(result.current.active).toStrictEqual(true);
-    });
-  });
-
-  describe('when presence is false by default', () => {
     it('should return default values when presence is false', () => {
       const { result } = renderHookWithRef(false);
 
@@ -100,10 +88,8 @@ describe('useMotion', () => {
       expect(result.current.active).toBe(false);
       expect(result.current.canRender).toBe(false);
     });
-  });
 
-  describe('when presence is true by default', () => {
-    it('should return default values', () => {
+    it('should return default values when presence is true', () => {
       const { result } = renderHookWithRef(true);
 
       expect(typeof result.current.ref).toBe('function');
@@ -125,6 +111,54 @@ describe('useMotion', () => {
     });
   });
 
+  describe('when duration is provided', () => {
+    it('should only call getComputedStyle when duration is not provided', () => {
+      const { result, rerender } = renderHookWithRef(false, { duration: 300 });
+
+      expect(typeof result.current.ref).toBe('function');
+      expect(result.current.type).toBe('unmounted');
+      expect(result.current.active).toBe(false);
+      expect(result.current.canRender).toBe(false);
+
+      rerender(true, { duration: 300 });
+
+      expect(result.current.canRender).toBe(true);
+      expect(result.current.type).toBe('entering');
+      expect(result.current.active).toBe(false);
+
+      jumpAnimationFrame();
+      jumpAnimationTimeout();
+
+      expect(computedStyleMock).not.toHaveBeenCalled();
+
+      rerender(false);
+
+      jumpAnimationFrame();
+      jumpAnimationTimeout();
+
+      expect(computedStyleMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when presence is a MotionShorthand', () => {
+    it('should return default values when presence is false', () => {
+      const defaultState = getDefaultMotionState();
+      const { result } = renderHookWithRef(defaultState);
+
+      expect(result.current.type).toStrictEqual('unmounted');
+      expect(result.current.ref).toStrictEqual(defaultState.ref);
+      expect(result.current.active).toStrictEqual(false);
+    });
+
+    it('should return default values when presence is true', () => {
+      const defaultState = getDefaultMotionState();
+      const { result } = renderHookWithRef({ ...defaultState, active: true });
+
+      expect(result.current.ref).toStrictEqual(defaultState.ref);
+      expect(result.current.active).toStrictEqual(true);
+    });
+  });
+
   describe('when presence changes', () => {
     it('should toggle values starting with false', () => {
       const { result, rerender } = renderHookWithRef(false);
@@ -252,6 +286,7 @@ describe('useMotion', () => {
       jumpAnimationFrame();
       expect(result.current.active).toBe(true);
 
+      jumpAnimationFrame();
       jumpAnimationTimeout(0);
       expect(result.current.type).toBe('entered');
 
@@ -265,6 +300,7 @@ describe('useMotion', () => {
       jumpAnimationFrame();
       expect(result.current.active).toBe(false);
 
+      jumpAnimationFrame();
       jumpAnimationTimeout(0);
       expect(result.current.type).toBe('exited');
 
diff --git a/packages/react-components/react-motion-preview/src/hooks/useMotion.ts b/packages/react-components/react-motion-preview/src/hooks/useMotion.ts
@@ -12,6 +12,14 @@ export type MotionOptions = {
    * @default false
    */
   animateOnFirstMount?: boolean;
+
+  /**
+   * Duration of the animation in milliseconds.
+   * If not specified, the duration will be inferred from the CSS transition/animation duration.
+   *
+   * @default 0
+   */
+  duration?: number;
 };
 
 export type MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
@@ -48,7 +56,6 @@ export type MotionState<Element extends HTMLElement = HTMLElement> = {
 };
 
 export type MotionShorthandValue = boolean;
-
 export type MotionShorthand<Element extends HTMLElement = HTMLElement> = MotionShorthandValue | MotionState<Element>;
 
 /**
@@ -81,7 +88,7 @@ function useMotionPresence<Element extends HTMLElement>(
   presence: boolean,
   options: MotionOptions = {},
 ): MotionState<Element> {
-  const { animateOnFirstMount } = { animateOnFirstMount: false, ...options };
+  const { animateOnFirstMount, duration } = { animateOnFirstMount: false, ...options };
 
   const [type, setType] = React.useState<MotionType>(
     presence && animateOnFirstMount ? 'entering' : presence ? 'idle' : 'unmounted',
@@ -137,9 +144,9 @@ function useMotionPresence<Element extends HTMLElement>(
 
       // Wait for the next frame to ensure the animation has started.
       setAnimationFrame(() => {
-        const duration = getMotionDuration(currentElement);
+        const finalDuration = duration || getMotionDuration(currentElement);
 
-        if (duration === 0) {
+        if (finalDuration === 0) {
           onFinished();
           return;
         }
@@ -149,7 +156,7 @@ function useMotionPresence<Element extends HTMLElement>(
          * This is an alternative to using the `transitionend` event which can be unreliable as it fires multiple times
          * if the transition has multiple properties.
          */
-        setAnimationTimeout(() => onFinished(), duration);
+        setAnimationTimeout(() => onFinished(), finalDuration);
       });
     });
 
diff --git a/packages/react-components/react-motion-preview/src/hooks/useMotionClassNames.test.ts b/packages/react-components/react-motion-preview/src/hooks/useMotionClassNames.test.ts
@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react-hooks';
 
-import { getDefaultMotionState, MotionState } from './useMotion';
 import { useMotionClassNames } from './useMotionClassNames';
 import * as reducedMotionStyles from '../styles/useReducedMotionStyles.styles';
+import { getDefaultMotionState, MotionState } from './useMotion';
 
 describe('useMotionClassNames', () => {
   let useReducedMotionStylesMock: jest.SpyInstance;
diff --git a/packages/react-components/react-motion-preview/src/index.ts b/packages/react-components/react-motion-preview/src/index.ts
@@ -1,9 +1,10 @@
 export { getDefaultMotionState, useMotion, useMotionClassNames } from './hooks';
 export type {
+  MotionClassNames,
   MotionOptions,
   MotionShorthand,
   MotionShorthandValue,
   MotionState,
-  MotionClassNames,
+  MotionStylesKeys,
   MotionType,
 } from './hooks';
