Add virtual prop to Combobox component

[RobinMalfait]

This PR adds a new virtual prop to the Combobox component to improve performance issues by only
rendering what's visible on the screen.

Behind the scenes the @tanstack/react-virtual and @tanstack/vue-virtual libraries are used to do the heavy lifting.

Once the virtual prop is in use, it also requires the Combobox.Option to have an order prop. This prop is used to improve internal sorting based on this number instead of sorting by DOM node position.

This prop can also be used in a non-virtual Combobox version to improve some of the performance.

The diff looks like this:

React

- <Combobox>
+ <Combobox virtual>
    <Combobox.Input />
    <Combobox.Options>
      {countries.map((country, idx) => (
-       <Combobox.Option key={country} value={country}>
+       <Combobox.Option key={country} value={country} order={idx}>
          {country}
        </Combobox.Option>
      ))}
    </Combobox.Options>
  </Combobox>

Vue

- <Combobox>
+ <Combobox virtual>
    <ComboboxInput />
    <ComboboxOptions>
      <ComboboxOption 
-       v-for="country in countries"
+       v-for="(country, idx) in countries"
+       :order="idx"
        :key="country" 
        :value="country"
      >
        {country}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>

You can play with the virtual examples here:

• React: https://headlessui-react-git-fix-issue-2441-tailwindlabs.vercel.app/combobox/combobox-virtualized
• Vue: https://headlessui-vue-git-fix-issue-2441-tailwindlabs.vercel.app/combobox/combobox-virtualized

If you are on a beefy machine, open this up in a browser (like Chrome) where you can slowdown the CPU by 4x or 6x.

Caveats:

• When using the virtual prop, then you won't be able to use the static or unmount={false} props on the options / option because the goal is to not render items in the DOM.
• When using the virtual prop, then the order prop on the Combobox.Option is required.

Fixes: #2441

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2023 10:34am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2023 10:34am

[mralexfed007]

Hi, Is this virtual feature already implement in last version ? npm install @headlessui/react@latest or should I install from npm install @headlessui/react@insiders

[gomorizsolt]

@mralexfed007 given that the most recent release was in august, you will have to rely on the insiders build for now.

edit: at the time of writing, it is mentioned as an unreleased addition in the CHANGELOG file.

[RobinMalfait]

For anyone stumbling upon this PR, there is a follow up PR with more information and a different approach here: #2779