[RichTreeViewPro] Add virtualization

docs/data/tree-view/rich-tree-view/items/Virtualization.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+
+const ITEMS = Array.from({ length: 10 }).map((_1, index) => ({
+  id: `${index}`,
+  label: `Item ${index}`,
+  children: Array.from({ length: 10 }).map((_2, index2) => ({
+    id: `${index}-${index2}`,
+    label: `Item ${index}-${index2}`,
+    children: Array.from({ length: 10 }).map((_3, index3) => ({
+      id: `${index}-${index2}-${index3}`,
+      label: `Item ${index}-${index2}-${index3}`,
+      children: Array.from({ length: 10 }).map((_4, index4) => ({
+        id: `${index}-${index2}-${index3}-${index4}`,
+        label: `Item ${index}-${index2}-${index3}-${index4}`,
+      })),
+    })),
+  })),
+}));
+
+function addChildrenToItem(item) {
+  return [item.id, ...(item.children ?? []).flatMap(addChildrenToItem)];
+}
+
+const flatItemIds = ITEMS.flatMap(addChildrenToItem);
+
+export default function Virtualization() {
+  return (
+    <Box sx={{ height: 352, minWidth: 250 }}>
+      <RichTreeViewPro
+        items={ITEMS}
+        experimentalFeatures={{ virtualization: true }}
+        defaultExpandedItems={flatItemIds}
+        slots={{ item: TreeItem2 }}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/items/Virtualization.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+import { TreeViewBaseItem, TreeViewItemId } from '@mui/x-tree-view/models';
+
+const ITEMS = Array.from({ length: 10 }).map((_1, index) => ({
+  id: `${index}`,
+  label: `Item ${index}`,
+  children: Array.from({ length: 10 }).map((_2, index2) => ({
+    id: `${index}-${index2}`,
+    label: `Item ${index}-${index2}`,
+    children: Array.from({ length: 10 }).map((_3, index3) => ({
+      id: `${index}-${index2}-${index3}`,
+      label: `Item ${index}-${index2}-${index3}`,
+      children: Array.from({ length: 10 }).map((_4, index4) => ({
+        id: `${index}-${index2}-${index3}-${index4}`,
+        label: `Item ${index}-${index2}-${index3}-${index4}`,
+      })),
+    })),
+  })),
+}));
+
+function addChildrenToItem(item: TreeViewBaseItem): TreeViewItemId[] {
+  return [item.id, ...(item.children ?? []).flatMap(addChildrenToItem)];
+}
+
+const flatItemIds = ITEMS.flatMap(addChildrenToItem);
+
+export default function Virtualization() {
+  return (
+    <Box sx={{ height: 352, minWidth: 250 }}>
+      <RichTreeViewPro
+        items={ITEMS}
+        experimentalFeatures={{ virtualization: true }}
+        defaultExpandedItems={flatItemIds}
+        slots={{ item: TreeItem2 }}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/items/Virtualization.tsx.preview

@@ -0,0 +1,6 @@
+<RichTreeViewPro
+  items={ITEMS}
+  experimentalFeatures={{ virtualization: true }}
+  defaultExpandedItems={flatItemIds}
+  slots={{ item: TreeItem2 }}
+/>

docs/data/tree-view/rich-tree-view/items/items.md

@@ -1,7 +1,7 @@
 ---
 productId: x-tree-view
 title: Rich Tree View - Items
-components: RichTreeView, TreeItem
+components: RichTreeView, TreeItem, TreeItem2
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
@@ -149,6 +149,14 @@ Use the `onItemClick` prop to track the clicked item:
 
 {{"demo": "OnItemClick.js"}}
 
+## Virtualization [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+:::warning
+This is only a POC, a lot of the behaviors are potentially broken.
+:::
+
+{{"demo": "Virtualization.js"}}
+
 ## Imperative API
 
 :::success

docs/pages/x/api/tree-view/rich-tree-view-pro.json

@@ -31,7 +31,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ indentationAtItemLevel?: bool, itemsReordering?: bool, labelEditing?: bool }"
+        "description": "{ indentationAtItemLevel?: bool, itemsReordering?: bool, labelEditing?: bool, virtualization?: bool }"
       }
     },
     "getItemId": {
@@ -75,6 +75,7 @@
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "12px"
     },
+    "itemsHeight": { "type": { "name": "number" }, "default": "32" },
     "itemsReordering": { "type": { "name": "bool" }, "default": "false" },
     "multiSelect": { "type": { "name": "bool" }, "default": "false" },
     "onExpandedItemsChange": {
@@ -133,6 +134,8 @@
         "describedArgs": ["event", "itemIds"]
       }
     },
+    "resizeThrottleMs": { "type": { "name": "number" }, "default": "60" },
+    "scrollBufferPx": { "type": { "name": "number" }, "default": "150" },
     "selectedItems": { "type": { "name": "any" } },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
@@ -154,18 +157,6 @@
     "import { RichTreeViewPro } from '@mui/x-tree-view-pro';"
   ],
   "slots": [
-    {
-      "name": "root",
-      "description": "Element rendered at the root.",
-      "default": "RichTreeViewProRoot",
-      "class": "MuiRichTreeViewPro-root"
-    },
-    {
-      "name": "item",
-      "description": "Custom component for the item.",
-      "default": "TreeItem.",
-      "class": null
-    },
     {
       "name": "collapseIcon",
       "description": "The default icon used to collapse the item.",
@@ -180,6 +171,18 @@
       "name": "endIcon",
       "description": "The default icon displayed next to an end item.\nThis is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.",
       "class": null
+    },
+    {
+      "name": "item",
+      "description": "Custom component for the item.",
+      "default": "TreeItem.",
+      "class": null
+    },
+    {
+      "name": "root",
+      "description": "Element rendered at the root.",
+      "default": "RichTreeViewProRoot",
+      "class": "MuiRichTreeViewPro-root"
     }
   ],
   "classes": [],

docs/pages/x/api/tree-view/tree-item-2.json

@@ -124,6 +124,6 @@
   "forwardsRefTo": "HTMLLIElement",
   "filename": "/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/ordering/\">Rich Tree View - Ordering <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/ordering/\">Rich Tree View - Ordering <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
   "cssComponent": false
 }

docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json

@@ -68,6 +68,7 @@
     "itemChildrenIndentation": {
       "description": "Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em"."
     },
+    "itemsHeight": { "description": "Sets the height in pixel of an item." },
     "itemsReordering": {
       "description": "If <code>true</code>, the reordering of items is enabled. Make sure to also enable the <code>itemsReordering</code> experimental feature: <code>&lt;RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering /&gt;</code>."
     },
@@ -134,6 +135,10 @@
         "itemIds": "The ids of the selected items. When <code>multiSelect</code> is <code>true</code>, this is an array of strings; when false (default) a string."
       }
     },
+    "resizeThrottleMs": {
+      "description": "The millisecond throttle delay for resizing the Tree View when virtualization is enabled."
+    },
+    "scrollBufferPx": { "description": "Region in pixels to render before/after the viewport." },
     "selectedItems": {
       "description": "Selected item ids. (Controlled) When <code>multiSelect</code> is true this takes an array of strings; when false (default) a string."
     },

packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.plugins.ts

@@ -20,6 +20,10 @@ import {
   useTreeViewItemsReordering,
   UseTreeViewItemsReorderingParameters,
 } from '../internals/plugins/useTreeViewItemsReordering';
+import {
+  useTreeViewVirtualization,
+  UseTreeViewVirtualizationParameters,
+} from '../internals/plugins/useTreeViewVirtualization';
 
 export const RICH_TREE_VIEW_PRO_PLUGINS = [
   useTreeViewItems,
@@ -30,6 +34,7 @@ export const RICH_TREE_VIEW_PRO_PLUGINS = [
   useTreeViewIcons,
   useTreeViewLabel,
   useTreeViewItemsReordering,
+  useTreeViewVirtualization,
 ] as const;
 
 export type RichTreeViewProPluginSignatures = ConvertPluginsIntoSignatures<
@@ -55,4 +60,5 @@ export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends
     UseTreeViewSelectionParameters<Multiple>,
     UseTreeViewIconsParameters,
     UseTreeViewLabelParameters<R>,
-    UseTreeViewItemsReorderingParameters {}
+    UseTreeViewItemsReorderingParameters,
+    UseTreeViewVirtualizationParameters {}