[FEATURE] Support virtualized lists when using Reorder

[benrucker]

I have a very long list that needs to be reorderable via dragging. Motion's Reorder component feels great to use in general, but it doesn't seem to work with virtualized lists. It seems like this is because ReorderGroup doesn't track the order of list items that haven't been rendered/measured yet.

It would be nice if ReorderGroup tracked the order of all items passed, regardless of if they have been rendered yet.

Without this feature, I'm going to roll my own drag-and-drop for my specific use-case.

[VulcanTech-io]

This lib used to work with virtuoso, react-virtuoso@3, and [email protected] (the old name of this library) work together.

https://stackblitz.com/edit/react-je5vjv?file=example.js

But support with this library's current version and a virtualized list library would be super nice.

[benrucker]

Actually, I was thinking about this FR some more and I'm not sure that it makes sense to add to the library itself, or at least not without a breaking change to ReorderableList.

The current API of reordering the list in internally and then passing the entire list back up to the consumer is not super great for big lists - lists big enough to warrant being virtualized. A more flexible API that's more similar to what I've ended up using (albiet not in a generic way) is to fire some sort of "reorder" event that contains info about the indices that were adjusted and let the consumer use that to update their list.

So I feel like having the current ReorderableList in its current state as an example or a jumping off point makes enough sense that I might close this FR.

[benrucker]

This lib used to work with virtuoso...

I have discovered that the current version pretty much works with react-virtuoso using layout={true}, though the transition duration must be set to 0 while scrolling or else the items slide around when they get mounted.