motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.66k stars 842 forks source link

[BUG] Reorder.Group won't accept string[] | number[] (or similar) #2905

Open theDanielJLewis opened 6 hours ago

theDanielJLewis commented 6 hours ago

I'm new to Motion and I'm running into trouble with Reorder.

From what I've read in other discussions and the lack of specificity in the documentation, it seems like the items prop of <Reorder.Group> should accept any array. However, framer-motion 12.0.0-alpha.1 (as prescribed for Next.js 15 / React 19), is giving a TypeScript error requiring the only one possible array time, so it won't accept my array that could be all strings or all numbers.

I'm not mixing types within my array. My array type is number[] | string[], but that won't be accepted by the values prop.

Demo

// imports
function List() {
  const [items, setItems] = useState<number[] | string[]>(['a','b',''c']);

  return (
    <Reorder.Group values={items} onReorder={setItems}>
      // Other code
    </Reorder.Group>
    )

This gives me the following error in VS Code:

Type 'number[] | string[]' is not assignable to type 'number[]'.
  Type 'string[]' is not assignable to type 'number[]'.
    Type 'string' is not assignable to type 'number'.ts(2322)
index.d.ts(3836, 5): The expected type comes from property 'values' which is declared here on type 'IntrinsicAttributes & Props$1<number> & Omit<HTMLMotionProps<any>, "values"> & { children?: ReactNode; } & { ...; }'