fix(react-motion): cleanup animation handle on unmounted component (#35617)

Author: layershifter

change/@fluentui-react-motion-7b660839-76c7-41b2-a48e-6261139bca99.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: cleanup animation handle on unmounted component",
+  "packageName": "@fluentui/react-motion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts

@@ -241,6 +241,17 @@ export function createPresenceComponent<MotionParams extends Record<string, Moti
         ],
       );
 
+      React.useEffect(() => {
+        // Heads up!
+        //
+        // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
+        // effect to ensure that the component is unmounted.
+
+        if (unmountOnExit && !mounted) {
+          handleRef.current?.dispose();
+        }
+      }, [handleRef, unmountOnExit, mounted]);
+
       if (mounted) {
         return child;
       }

packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts

@@ -15,6 +15,81 @@ const DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {
   duration: 1,
 };
 
+/**
+ * Creates an animation handle that controls multiple animations.
+ * Is used to avoid leaking "element" references from the hook.
+ *
+ * @param animations
+ */
+function createHandle(animations: Animation[]): AnimationHandle {
+  return {
+    set playbackRate(rate: number) {
+      animations.forEach(animation => {
+        animation.playbackRate = rate;
+      });
+    },
+    setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {
+      // Heads up!
+      // This could use "Animation:finished", but it's causing a memory leak in Chromium.
+      // See: https://issues.chromium.org/u/2/issues/383016426
+      const promises = animations.map(animation => {
+        return new Promise<void>((resolve, reject) => {
+          animation.onfinish = () => resolve();
+          animation.oncancel = () => reject();
+        });
+      });
+
+      Promise.all(promises)
+        .then(() => {
+          onfinish();
+        })
+        .catch(() => {
+          oncancel();
+        });
+    },
+    isRunning() {
+      return animations.some(animation => isAnimationRunning(animation));
+    },
+
+    dispose: () => {
+      animations.length = 0;
+    },
+
+    cancel: () => {
+      animations.forEach(animation => {
+        animation.cancel();
+      });
+    },
+    pause: () => {
+      animations.forEach(animation => {
+        animation.pause();
+      });
+    },
+    play: () => {
+      animations.forEach(animation => {
+        animation.play();
+      });
+    },
+    finish: () => {
+      animations.forEach(animation => {
+        animation.finish();
+      });
+    },
+    reverse: () => {
+      // Heads up!
+      //
+      // This is used for the interruptible motion. If the animation is running, we need to reverse it.
+      //
+      // TODO: what do with animations that have "delay"?
+      // TODO: what do with animations that have different "durations"?
+
+      animations.forEach(animation => {
+        animation.reverse();
+      });
+    },
+  };
+}
+
 function useAnimateAtomsInSupportedEnvironment() {
   // eslint-disable-next-line @nx/workspace-no-restricted-globals
   const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';
@@ -67,68 +142,7 @@ function useAnimateAtomsInSupportedEnvironment() {
         })
         .filter(animation => !!animation) as Animation[];
 
-      return {
-        set playbackRate(rate: number) {
-          animations.forEach(animation => {
-            animation.playbackRate = rate;
-          });
-        },
-        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {
-          // Heads up!
-          // This could use "Animation:finished", but it's causing a memory leak in Chromium.
-          // See: https://issues.chromium.org/u/2/issues/383016426
-          const promises = animations.map(animation => {
-            return new Promise<void>((resolve, reject) => {
-              animation.onfinish = () => resolve();
-              animation.oncancel = () => reject();
-            });
-          });
-
-          Promise.all(promises)
-            .then(() => {
-              onfinish();
-            })
-            .catch(() => {
-              oncancel();
-            });
-        },
-        isRunning() {
-          return animations.some(animation => isAnimationRunning(animation));
-        },
-
-        cancel: () => {
-          animations.forEach(animation => {
-            animation.cancel();
-          });
-        },
-        pause: () => {
-          animations.forEach(animation => {
-            animation.pause();
-          });
-        },
-        play: () => {
-          animations.forEach(animation => {
-            animation.play();
-          });
-        },
-        finish: () => {
-          animations.forEach(animation => {
-            animation.finish();
-          });
-        },
-        reverse: () => {
-          // Heads up!
-          //
-          // This is used for the interruptible motion. If the animation is running, we need to reverse it.
-          //
-          // TODO: what do with animations that have "delay"?
-          // TODO: what do with animations that have different "durations"?
-
-          animations.forEach(animation => {
-            animation.reverse();
-          });
-        },
-      };
+      return createHandle(animations);
     },
     [SUPPORTS_PERSIST],
   );
@@ -181,6 +195,10 @@ function useAnimateAtomsInTestEnvironment() {
           return false;
         },
 
+        dispose() {
+          /* no-op */
+        },
+
         cancel() {
           /* no-op */
         },

packages/react-components/react-motion/library/src/types.ts

@@ -34,6 +34,7 @@ export type PresenceMotionFn<MotionParams extends Record<string, MotionParam> =
 export type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {
   setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;
   isRunning: () => boolean;
+  dispose: () => void;
 };
 
 export type MotionImperativeRef = {