fix: use custom autoscroll with virtualization

[samuelarbibe]

This issue resolves items disappearing when dragging them out of the current viewport when using virtualization.

Solved #41 :

When using tanstack/virtual, only rows that are in the visible area are rendered.
This means, that when an item is dragged from a visible row, and that row becomes invisible because of scrolling, that row will unmount and the item itself will unmount as well.

The solution comes from @tanstack/virtual:
https://tanstack.com/virtual/latest/docs/api/virtualizer#rangeextractor
You can help the library understand which rows should and shouldn't be rendered by using the rangeExtractor props, and make sure the library never unmounts a row whose item is currently being dragged.

Using dnd-kit's default autoscroll didn't work, so I implement my own useAutoscroll hook to scroll when dragged item is close to the container's edges.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dnd-timeline-external	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 8:03pm
dnd-timeline-sortable	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 8:03pm
dnd-timeline-virtual	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 8:03pm