MenuOptionGroup virtualized (for large lists)

[baptooo]

Closes #7852

📝 Description

Add of new optional parameters to MenuOptionGroup props in order to enable a virtual scroll on menu for large lists.
For doing so, this PR adds a new dependency: https://tanstack.com/virtual/v3

⛳️ Current behavior (updates)

Today, large lists (100+ items) in Menu component causes important performance issues which leads into slow interface and hard-to-use UI.

🚀 New behavior

In this PR, the virtualized parameter will enable to render a virtualized list thanks to https://tanstack.com/virtual/v3 and will speed-up the menu

See it live on storybook

<MenuOptionGroup
+  virtualized={true}
+  virtualizedOptions={{
+    rowHeight: 40,
+    containerHeight: 200,
+  }}
  type="checkbox">
  ...
</MenuOptionGroup>

💣 Is this a breaking change (Yes/No):

No as these parameters are fully optional and not setting them will result into having the current behavior.

📝 Additional Information

Add of a dedicated story called PerformanceOptionGroup under Components / Overlay / Menu in Storybook.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3981493

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@chakra-ui/menu	Minor
@chakra-ui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

Name	Status	Preview	Updated (UTC)
chakra-ui-storybook	✅ Ready (Inspect)	Visit Preview	Oct 23, 2023 4:07pm

[Afoucaul]

shouldn't we specify a looser version?

[baptooo]

There is not https://github.com/TanStack/virtual/tags

[segunadebayo]

Thanks for working on this @baptooo. I appreciate the patience as well

We don't intend to support virtualization out of the box. I would recommend handling this in your userland code.

Thanks for understanding.