[react] Types for useSwipeTransition (DefinitelyTyped#71962)

Author: eps1lon

types/react-dom/experimental.d.ts

@@ -42,4 +42,7 @@ declare module "react" {
         old: Animatable;
         new: Animatable;
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface GestureProvider extends AnimationTimeline {}
 }

types/react-dom/test/experimental-tests.tsx

@@ -27,3 +27,18 @@ function viewTransitionTests() {
         <div />
     </ViewTransition>;
 }
+
+function swipeTransitionTest() {
+    const useSwipeTransition = React.unstable_useSwipeTransition;
+    // $ExpectType [value: string | null, startGesture: StartGesture]
+    const [value, startGesture] = useSwipeTransition("/?a", null, "/?b");
+
+    // lib.dom.d.ts has no types for ScrollTimeline yet.
+    // $ExpectType () => void
+    startGesture(new AnimationTimeline());
+    const gestureProvider: {} = {};
+    // @ts-expect-error -- Incorrect gesture provider
+    startGesture(gestureProvider);
+    // @ts-expect-error -- missing gesture provider
+    startGesture();
+}

types/react/experimental.d.ts

@@ -195,4 +195,18 @@ declare module "." {
      * @see {@link https://github.com/facebook/react/pull/31975}
      */
     export const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;
+
+    // Implemented by the specific renderer e.g. `react-dom`.
+    // Keep in mind that augmented interfaces merge their JSDoc so if you put
+    // JSDoc here and in the renderer, the IDE will display both.
+    export interface GestureProvider {}
+
+    export type StartGesture = (gestureProvider: GestureProvider) => () => void;
+
+    /** */
+    export function unstable_useSwipeTransition<Value>(
+        previous: Value,
+        current: Value,
+        next: Value,
+    ): [value: Value, startGesture: StartGesture];
 }

types/react/test/experimental.tsx

@@ -199,3 +199,15 @@ function viewTransitionTests() {
         <Div />
     </ViewTransition>;
 }
+
+function swipeTransitionTest() {
+    const useSwipeTransition = React.unstable_useSwipeTransition;
+    // $ExpectType [value: string | null, startGesture: StartGesture]
+    const [value, startGesture] = useSwipeTransition("/?a", null, "/?b");
+
+    const gestureProvider: {} = {};
+    // $ExpectType () => void
+    startGesture(gestureProvider);
+    // @ts-expect-error -- missing gesture provider
+    startGesture();
+}

types/react/ts5.0/experimental.d.ts

@@ -195,4 +195,18 @@ declare module "." {
      * @see {@link https://github.com/facebook/react/pull/31975}
      */
     export const unstable_ViewTransition: ExoticComponent<ViewTransitionProps>;
+
+    // Implemented by the specific renderer e.g. `react-dom`.
+    // Keep in mind that augmented interfaces merge their JSDoc so if you put
+    // JSDoc here and in the renderer, the IDE will display both.
+    export interface GestureProvider {}
+
+    export type StartGesture = (gestureProvider: GestureProvider) => () => void;
+
+    /** */
+    export function unstable_useSwipeTransition<Value>(
+        previous: Value,
+        current: Value,
+        next: Value,
+    ): [value: Value, startGesture: StartGesture];
 }

types/react/ts5.0/test/experimental.tsx

@@ -202,3 +202,15 @@ function viewTransitionTests() {
         <Div />
     </ViewTransition>;
 }
+
+function swipeTransitionTest() {
+    const useSwipeTransition = React.unstable_useSwipeTransition;
+    // $ExpectType [value: string | null, startGesture: StartGesture]
+    const [value, startGesture] = useSwipeTransition("/?a", null, "/?b");
+
+    const gestureProvider: {} = {};
+    // $ExpectType () => void
+    startGesture(gestureProvider);
+    // @ts-expect-error -- missing gesture provider
+    startGesture();
+}