From a25d58aff5d700c89fb76ca94c6bbd191a058a0f Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Tue, 17 Mar 2026 06:45:52 +0100
Subject: [PATCH] Fix Reorder.Group to accept union array types like number[] |
 string[]

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/Reorder/Group.tsx          | 10 +++++--
 .../Reorder/__tests__/index.test.tsx          | 29 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/framer-motion/src/components/Reorder/Group.tsx b/packages/framer-motion/src/components/Reorder/Group.tsx
index 930e07acec..2581d807a3 100644
--- a/packages/framer-motion/src/components/Reorder/Group.tsx
+++ b/packages/framer-motion/src/components/Reorder/Group.tsx
@@ -175,10 +175,16 @@ export function ReorderGroupComponent<
 }
 
 export const ReorderGroup = /*@__PURE__*/ forwardRef(ReorderGroupComponent) as <
-    V,
+    Values extends any[],
     TagName extends ReorderElementTag = DefaultGroupElement
 >(
-    props: ReorderGroupProps<V, TagName> & { ref?: React.ForwardedRef<any> }
+    props: Omit<
+        ReorderGroupProps<Values[number], TagName>,
+        "values" | "onReorder"
+    > & {
+        values: Values
+        onReorder: (newOrder: Values) => void
+    } & { ref?: React.ForwardedRef<any> }
 ) => ReturnType<typeof ReorderGroupComponent>
 
 function compareMin<V>(a: ItemData<V>, b: ItemData<V>) {
diff --git a/packages/framer-motion/src/components/Reorder/__tests__/index.test.tsx b/packages/framer-motion/src/components/Reorder/__tests__/index.test.tsx
index 06e7756bea..93132e4ae9 100644
--- a/packages/framer-motion/src/components/Reorder/__tests__/index.test.tsx
+++ b/packages/framer-motion/src/components/Reorder/__tests__/index.test.tsx
@@ -1,9 +1,36 @@
-import { useContext, useLayoutEffect, useRef } from "react"
+import { useContext, useLayoutEffect, useRef, useState } from "react"
 import { Reorder } from ".."
 import { ReorderContext } from "../../../context/ReorderContext"
 import { render } from "../../../jest.setup"
 
 describe("Reorder", () => {
+    it("Accepts union array types for values prop", () => {
+        const Component = () => {
+            const [items, setItems] = useState<number[] | string[]>([
+                "a",
+                "b",
+                "c",
+            ])
+
+            return (
+                <Reorder.Group
+                    values={items}
+                    onReorder={setItems}
+                    axis="y"
+                >
+                    {items.map((item) => (
+                        <Reorder.Item key={item} value={item}>
+                            {item}
+                        </Reorder.Item>
+                    ))}
+                </Reorder.Group>
+            )
+        }
+
+        const { container } = render(<Component />)
+        expect(container.querySelectorAll("li")).toHaveLength(3)
+    })
+
     it("Correctly hydrates ref", () => {
         let groupRefPass = false
         let itemRefPass = false