From 9efe05446271637b014cc445c892923a4f4510ef Mon Sep 17 00:00:00 2001
From: "Sebastian \"Sebbie\" Silbermann" <sebastian.silbermann@vercel.com>
Date: Mon, 17 Feb 2025 10:25:07 +0100
Subject: [PATCH] [react] Types for useSwipeTransition (#71962)

---
 types/react-dom/experimental.d.ts           |  3 +++
 types/react-dom/test/experimental-tests.tsx | 15 +++++++++++++++
 types/react/experimental.d.ts               | 14 ++++++++++++++
 types/react/test/experimental.tsx           | 12 ++++++++++++
 types/react/ts5.0/experimental.d.ts         | 14 ++++++++++++++
 types/react/ts5.0/test/experimental.tsx     | 12 ++++++++++++
 6 files changed, 70 insertions(+)

diff --git a/types/react-dom/experimental.d.ts b/types/react-dom/experimental.d.ts
index 674bd7a4b24771..67a790014b34bd 100644
--- a/types/react-dom/experimental.d.ts
+++ b/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 {}
 }
diff --git a/types/react-dom/test/experimental-tests.tsx b/types/react-dom/test/experimental-tests.tsx
index 519f08abcb13ca..ab845a289b79e2 100644
--- a/types/react-dom/test/experimental-tests.tsx
+++ b/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();
+}
diff --git a/types/react/experimental.d.ts b/types/react/experimental.d.ts
index 1a7f130f42c1b9..e83c92bace36c0 100644
--- a/types/react/experimental.d.ts
+++ b/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];
 }
diff --git a/types/react/test/experimental.tsx b/types/react/test/experimental.tsx
index 8b6fdfe282aa37..db84f1f9fe5f08 100644
--- a/types/react/test/experimental.tsx
+++ b/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();
+}
diff --git a/types/react/ts5.0/experimental.d.ts b/types/react/ts5.0/experimental.d.ts
index 1a7f130f42c1b9..e83c92bace36c0 100644
--- a/types/react/ts5.0/experimental.d.ts
+++ b/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];
 }
diff --git a/types/react/ts5.0/test/experimental.tsx b/types/react/ts5.0/test/experimental.tsx
index d03aa35f9a3ddc..7bfdb18a68fd42 100644
--- a/types/react/ts5.0/test/experimental.tsx
+++ b/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();
+}