improve: Virtualize mo.ui.multiselect to handle large lists

[wasimsandhu]

📝 Summary

Completes #588.

🔍 Description of Changes

Installed [react-virtuoso](https://github.com/petyosi/react-virtuoso) and passed <Virtuoso /> to <Combobox />.

Because cmdk does not support filtering with virtualization, I used the existing filter function in MultiselectPlugin.tsx to filter the options array directly.

📋 Checklist

• [x] I have read the contributor guidelines.
• [x] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• [x] I have added tests for the changes made.
• [x] I have run the code and verified that it works as expected.

📜 Reviewers

@mscolnick

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
marimo-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2024 2:24am
marimo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2024 2:24am

[wasimsandhu]

After wrestling with @tanstack/react-virtual for a few hours, using Virtuoso was surprisingly easy.

Installed react-virtuoso and passed <Virtuoso /> to <Combobox />.

It broke cmdk filtering since the <ComboboxItem> components are wrapped in the virtuoso element:

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

The cmdk FAQ recommends implementing filtering on your own for virtualization anyway, so that's what I did.

[wasimsandhu]

Tested multiselect on my own machine and it's buttery smooth now -- did not spot any regressions.

I did see that <Combobox> is used in switchable-multi-select and form.tsx -- I did not get a chance to do regression tests for those.

[mscolnick]

awesome work @wasimsandhu!