Skip to content

Fix Reorder.Group to accept union array types #3649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mattgperry wants to merge 1 commit into
base: main
Choose a base branch
from
+36 −3
Open

Fix Reorder.Group to accept union array types #3649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/framer-motion/src/components/Reorder/Group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,16 @@ export function ReorderGroupComponent<
}

export const ReorderGroup = /*@__PURE__*/ forwardRef(ReorderGroupComponent) as <
V,
Values extends any[],
Copy link
Copy Markdown

@greptile-apps greptile-apps bot Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Consider unknown[] over any[] for the constraint

Values extends any[] technically allows any to satisfy the constraint unchecked. Using Values extends unknown[] is marginally stricter and prevents any from silently widening through — a common best-practice for generic utilities where you don't need the escape hatch any provides.

Suggested change
Values extends any[],
Values extends unknown[],

This is backwards-compatible: all existing concrete types (string[], number[], MyObject[], string[] | number[]) satisfy unknown[] just as they satisfy any[].

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

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>) {
Expand Down
29 changes: 28 additions & 1 deletion packages/framer-motion/src/components/Reorder/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down