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() {
;
}
+
+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;
+
+ // 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(
+ 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() {
;
}
+
+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;
+
+ // 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(
+ 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() {
;
}
+
+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();
+}