From d59d3a1b38269ccb4f18e6791bdf2cfc7c24c3e7 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Fri, 16 Dec 2022 10:48:25 +0100
Subject: [PATCH] Updating event type inference

---
 .../__tests__/use-motion-value-event.test.tsx    | 16 ++++++++++++++++
 .../src/utils/use-motion-value-event.ts          |  2 +-
 .../src/value/__tests__/index.test.ts            |  6 ++++++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 packages/framer-motion/src/utils/__tests__/use-motion-value-event.test.tsx

diff --git a/packages/framer-motion/src/utils/__tests__/use-motion-value-event.test.tsx b/packages/framer-motion/src/utils/__tests__/use-motion-value-event.test.tsx
new file mode 100644
index 0000000000..faa5b26608
--- /dev/null
+++ b/packages/framer-motion/src/utils/__tests__/use-motion-value-event.test.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+import { render } from "../../../jest.setup"
+import { useMotionValue } from "../../value/use-motion-value"
+import { useMotionValueEvent } from "../use-motion-value-event"
+
+describe("useMotionValueEvent", () => {
+    test("useMotionValueEvent infers type for change callback", () => {
+        const Component = () => {
+            const x = useMotionValue(0)
+            useMotionValueEvent(x, "change", (latest) => latest / 2)
+            return null
+        }
+
+        render(<Component />)
+    })
+})
diff --git a/packages/framer-motion/src/utils/use-motion-value-event.ts b/packages/framer-motion/src/utils/use-motion-value-event.ts
index 01f20e647e..251fcefb8a 100644
--- a/packages/framer-motion/src/utils/use-motion-value-event.ts
+++ b/packages/framer-motion/src/utils/use-motion-value-event.ts
@@ -5,7 +5,7 @@ export function useMotionValueEvent<
     V,
     EventName extends keyof MotionValueEventCallbacks<V>
 >(
-    value: MotionValue,
+    value: MotionValue<V>,
     event: EventName,
     callback: MotionValueEventCallbacks<V>[EventName]
 ) {
diff --git a/packages/framer-motion/src/value/__tests__/index.test.ts b/packages/framer-motion/src/value/__tests__/index.test.ts
index c430a8b2f8..ab76fb385c 100644
--- a/packages/framer-motion/src/value/__tests__/index.test.ts
+++ b/packages/framer-motion/src/value/__tests__/index.test.ts
@@ -2,6 +2,12 @@ import { motionValue } from "../"
 import { animate } from "../../animation/animate"
 
 describe("motionValue", () => {
+    test("change event is type-inferred", () => {
+        const value = motionValue(0)
+
+        value.on("change", (latest) => latest / 2)
+    })
+
     test("change event fires when value changes", () => {
         const value = motionValue(0)
         const callback = jest.fn()