[pull] main from facebook:main

fixtures/view-transition/src/components/Page.css

@@ -1,12 +1,3 @@
-.roboto-font {
-  font-family: "Roboto", serif;
-  font-optical-sizing: auto;
-  font-weight: 100;
-  font-style: normal;
-  font-variation-settings:
-    "wdth" 100;
-}
-
 .swipe-recognizer {
   width: 300px;
   background: #eee;

fixtures/view-transition/src/components/Page.js

@@ -4,6 +4,7 @@ import React, {
   Activity,
   useLayoutEffect,
   useEffect,
+  useInsertionEffect,
   useState,
   useId,
   useOptimistic,
@@ -41,6 +42,26 @@ const b = (
 );
 
 function Component() {
+  // Test inserting fonts with style tags using useInsertionEffect. This is not recommended but
+  // used to test that gestures etc works with useInsertionEffect so that stylesheet based
+  // libraries can be properly supported.
+  useInsertionEffect(() => {
+    const style = document.createElement('style');
+    style.textContent = `
+      .roboto-font {
+        font-family: "Roboto", serif;
+        font-optical-sizing: auto;
+        font-weight: 100;
+        font-style: normal;
+        font-variation-settings:
+          "wdth" 100;
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
   return (
     <ViewTransition
       default={
@@ -82,8 +103,57 @@ export default function Page({url, navigate}) {
       {rotate: '0deg', transformOrigin: '30px 8px'},
       {rotate: '360deg', transformOrigin: '30px 8px'},
     ];
-    viewTransition.old.animate(keyframes, 250);
-    viewTransition.new.animate(keyframes, 250);
+    const animation1 = viewTransition.old.animate(keyframes, 250);
+    const animation2 = viewTransition.new.animate(keyframes, 250);
+    return () => {
+      animation1.cancel();
+      animation2.cancel();
+    };
+  }
+
+  function onGestureTransition(
+    timeline,
+    {rangeStart, rangeEnd},
+    viewTransition,
+    types
+  ) {
+    const keyframes = [
+      {rotate: '0deg', transformOrigin: '30px 8px'},
+      {rotate: '360deg', transformOrigin: '30px 8px'},
+    ];
+    const reverse = rangeStart > rangeEnd;
+    if (timeline instanceof AnimationTimeline) {
+      // Native Timeline
+      const options = {
+        timeline: timeline,
+        direction: reverse ? 'normal' : 'reverse',
+        rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
+        rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
+      };
+      const animation1 = viewTransition.old.animate(keyframes, options);
+      const animation2 = viewTransition.new.animate(keyframes, options);
+      return () => {
+        animation1.cancel();
+        animation2.cancel();
+      };
+    } else {
+      // Custom Timeline
+      const options = {
+        direction: reverse ? 'normal' : 'reverse',
+        // We set the delay and duration to represent the span of the range.
+        delay: reverse ? rangeEnd : rangeStart,
+        duration: reverse ? rangeStart - rangeEnd : rangeEnd - rangeStart,
+      };
+      const animation1 = viewTransition.old.animate(keyframes, options);
+      const animation2 = viewTransition.new.animate(keyframes, options);
+      // Let the custom timeline take control of driving the animations.
+      const cleanup1 = timeline.animate(animation1);
+      const cleanup2 = timeline.animate(animation2);
+      return () => {
+        cleanup1();
+        cleanup2();
+      };
+    }
   }
 
   function swipeAction() {
@@ -131,7 +201,10 @@ export default function Page({url, navigate}) {
   );
 
   const exclamation = (
-    <ViewTransition name="exclamation" onShare={onTransition}>
+    <ViewTransition
+      name="exclamation"
+      onShare={onTransition}
+      onGestureShare={onGestureTransition}>
       <span>
         <div>!</div>
       </span>

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 export function stopViewTransition(transition: RunningViewTransition) {}
 
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  callback();
+}
+
 export type ViewTransitionInstance = null | {name: string, ...};
 
 export function createViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -607,10 +607,32 @@ export function createInstance(
   return domElement;
 }
 
+let didWarnForClone = false;
+
 export function cloneMutableInstance(
   instance: Instance,
   keepChildren: boolean,
 ): Instance {
+  if (__DEV__) {
+    // Warn for problematic
+    const tagName = instance.tagName;
+    switch (tagName) {
+      case 'VIDEO':
+      case 'IFRAME':
+        if (!didWarnForClone) {
+          didWarnForClone = true;
+          // TODO: Once we have the ability to avoid cloning the root, suggest an absolutely
+          // positioned ViewTransition instead as the solution.
+          console.warn(
+            'startGestureTransition() required cloning a <%s> element since it exists in ' +
+              'both states of the gesture. This can be problematic since it will load it twice ' +
+              'Try removing or hiding it with <Activity mode="offscreen"> in the optimistic state.',
+            tagName.toLowerCase(),
+          );
+        }
+        break;
+    }
+  }
   return instance.cloneNode(keepChildren);
 }
 
@@ -2337,6 +2359,7 @@ export function startViewTransition(
 
 export type RunningViewTransition = {
   skipTransition(): void,
+  finished: Promise<void>,
   ...
 };
 
@@ -2372,6 +2395,7 @@ function animateGesture(
   targetElement: Element,
   pseudoElement: string,
   timeline: GestureTimeline,
+  viewTransitionAnimations: Array<Animation>,
   customTimelineCleanup: Array<() => void>,
   rangeStart: number,
   rangeEnd: number,
@@ -2464,7 +2488,7 @@ function animateGesture(
   if (timeline instanceof AnimationTimeline) {
     // Native Timeline
     // $FlowFixMe[incompatible-call]
-    targetElement.animate(keyframes, {
+    const animation = targetElement.animate(keyframes, {
       pseudoElement: pseudoElement,
       // Set the timeline to the current gesture timeline to drive the updates.
       timeline: timeline,
@@ -2482,6 +2506,7 @@ function animateGesture(
       rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
       rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
     });
+    viewTransitionAnimations.push(animation);
   } else {
     // Custom Timeline
     // $FlowFixMe[incompatible-call]
@@ -2554,8 +2579,10 @@ export function startGestureTransition(
         // $FlowFixMe
         const pseudoElement: ?string = effect.pseudoElement;
         if (pseudoElement == null) {
-        } else if (pseudoElement.startsWith('::view-transition')) {
-          viewTransitionAnimations.push(animations[i]);
+        } else if (
+          pseudoElement.startsWith('::view-transition') &&
+          effect.target === documentElement
+        ) {
           const timing = effect.getTiming();
           const duration =
             // $FlowFixMe[prop-missing]
@@ -2648,6 +2675,7 @@ export function startGestureTransition(
             effect.target,
             pseudoElement,
             timeline,
+            viewTransitionAnimations,
             customTimelineCleanup,
             adjustedRangeStart,
             adjustedRangeEnd,
@@ -2675,6 +2703,7 @@ export function startGestureTransition(
                 effect.target,
                 pseudoElementName,
                 timeline,
+                viewTransitionAnimations,
                 customTimelineCleanup,
                 rangeStart,
                 rangeEnd,
@@ -2696,6 +2725,7 @@ export function startGestureTransition(
         duration: 1,
       });
       blockingAnim.pause();
+      viewTransitionAnimations.push(blockingAnim);
       animateCallback();
     };
     // In Chrome, "new" animations are not ready in the ready callback. We have to wait
@@ -2777,6 +2807,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
   transition.skipTransition();
 }
 
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  transition.finished.finally(callback);
+}
+
 interface ViewTransitionPseudoElementType extends mixin$Animatable {
   _scope: HTMLElement;
   _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 export function stopViewTransition(transition: RunningViewTransition) {}
 
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+) {
+  callback();
+}
+
 export type ViewTransitionInstance = null | {name: string, ...};
 
 export function createViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
         stopViewTransition(transition: RunningViewTransition) {},
 
+        addViewTransitionFinishedListener(
+          transition: RunningViewTransition,
+          callback: () => void,
+        ) {
+          callback();
+        },
+
         createViewTransitionInstance(name: string): ViewTransitionInstance {
           return null;
         },