[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}`,
+      })),
+    })),
+  })),
+}));
+
+const 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}`,
+      })),
+    })),
+  })),
+}));
+
+const 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

@@ -143,6 +143,14 @@ When it's set to true:
 
 {{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}}
 
+## 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
 
 ### Get an item by ID

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

@@ -14,6 +14,10 @@ import {
   MergeSignaturesProperty,
   TreeViewCorePluginParameters,
 } from '@mui/x-tree-view/internals';
+import {
+  useTreeViewVirtualization,
+  UseTreeViewVirtualizationParameters,
+} from '../internals/plugins/useTreeViewVirtualization';
 
 export const RICH_TREE_VIEW_PRO_PLUGINS = [
   useTreeViewItems,
@@ -22,6 +26,7 @@ export const RICH_TREE_VIEW_PRO_PLUGINS = [
   useTreeViewFocus,
   useTreeViewKeyboardNavigation,
   useTreeViewIcons,
+  useTreeViewVirtualization,
 ] as const;
 
 export type RichTreeViewProPluginSignatures = ConvertPluginsIntoSignatures<
@@ -45,4 +50,5 @@ export interface RichTreeViewProPluginParameters<R extends {}, Multiple extends
     UseTreeViewExpansionParameters,
     UseTreeViewFocusParameters,
     UseTreeViewSelectionParameters<Multiple>,
-    UseTreeViewIconsParameters {}
+    UseTreeViewIconsParameters,
+    UseTreeViewVirtualizationParameters {}

packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { useSlotProps } from '@mui/base/utils';
-import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
-import { useTreeView, TreeViewProvider, buildWarning } from '@mui/x-tree-view/internals';
+import {
+  useTreeView,
+  TreeViewProvider,
+  buildWarning,
+  RichTreeViewItems,
+} from '@mui/x-tree-view/internals';
+import { Watermark } from '@mui/x-license';
 import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { getRichTreeViewProUtilityClass } from './richTreeViewProClasses';
 import { RichTreeViewProProps } from './RichTreeViewPro.types';
@@ -12,6 +16,7 @@ import {
   RichTreeViewProPluginSignatures,
 } from './RichTreeViewPro.plugins';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
+import { TreeViewVirtualScroller } from '../TreeViewVirtualScroller';
 
 const useThemeProps = createUseThemeProps('MuiRichTreeViewPro');
 
@@ -43,26 +48,6 @@ type RichTreeViewProComponent = (<R extends {}, Multiple extends boolean | undef
   props: RichTreeViewProProps<R, Multiple> & React.RefAttributes<HTMLUListElement>,
 ) => React.JSX.Element) & { propTypes?: any };
 
-function WrappedTreeItem<R extends {}>({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  children,
-}: Pick<RichTreeViewProProps<R, any>, 'slots' | 'slotProps'> &
-  Pick<TreeItemProps, 'id' | 'itemId' | 'children'> & { label: string }) {
-  const Item = slots?.item ?? TreeItem;
-  const itemProps = useSlotProps({
-    elementType: Item,
-    externalSlotProps: slotProps?.item,
-    additionalProps: { itemId, id, label },
-    ownerState: { itemId, label },
-  });
-
-  return <Item {...itemProps}>{children}</Item>;
-}
-
 const releaseInfo = getReleaseInfo();
 
 const childrenWarning = buildWarning([
@@ -87,8 +72,6 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro<
 >(inProps: RichTreeViewProProps<R, Multiple>, ref: React.Ref<HTMLUListElement>) {
   const props = useThemeProps({ props: inProps, name: 'MuiRichTreeViewPro' });
 
-  useLicenseVerifier('x-tree-view-pro', releaseInfo);
-
   if (process.env.NODE_ENV !== 'production') {
     if ((props as any).children != null) {
       childrenWarning();
@@ -116,34 +99,24 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro<
     ownerState: props as RichTreeViewProProps<any, any>,
   });
 
-  const itemsToRender = instance.getItemsToRender();
-
-  const renderItem = ({
-    label,
-    itemId,
-    id,
-    children,
-  }: ReturnType<typeof instance.getItemsToRender>[number]) => {
-    return (
-      <WrappedTreeItem
-        slots={slots}
-        slotProps={slotProps}
-        key={itemId}
-        label={label}
-        id={id}
-        itemId={itemId}
-      >
-        {children?.map(renderItem)}
-      </WrappedTreeItem>
-    );
-  };
-
   return (
     <TreeViewProvider value={contextValue}>
-      <Root {...rootProps}>
-        {itemsToRender.map(renderItem)}
-        <Watermark packageName="x-tree-view-pro" releaseInfo={releaseInfo} />
-      </Root>
+      {contextValue.virtualization.enabled ? (
+        <TreeViewVirtualScroller
+          {...rootProps}
+          slots={{ ...slots, root: Root }}
+          slotProps={slotProps}
+        />
+      ) : (
+        <Root {...rootProps} ref={ref}>
+          <RichTreeViewItems
+            slots={slots}
+            slotProps={slotProps}
+            itemsToRender={instance.getItemsToRender()}
+          />
+          <Watermark packageName="x-tree-view-pro" releaseInfo={releaseInfo} />
+        </Root>
+      )}
     </TreeViewProvider>
   );
 }) as RichTreeViewProComponent;

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

@@ -1,41 +1,37 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
-import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
-import { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
-import { TreeViewItemId } from '@mui/x-tree-view/models';
-import { TreeViewPublicAPI, TreeViewExperimentalFeatures } from '@mui/x-tree-view/internals';
+import { SxProps } from '@mui/system';
+import {
+  TreeViewPublicAPI,
+  TreeViewExperimentalFeatures,
+  MakeOptional,
+} from '@mui/x-tree-view/internals';
 import { RichTreeViewProClasses } from './richTreeViewProClasses';
 import {
   RichTreeViewProPluginParameters,
   RichTreeViewProPluginSlotProps,
   RichTreeViewProPluginSlots,
   RichTreeViewProPluginSignatures,
 } from './RichTreeViewPro.plugins';
+import {
+  TreeViewVirtualScrollerSlots,
+  TreeViewVirtualScrollerSlotProps,
+  TreeViewVirtualScrollerProps,
+} from '../TreeViewVirtualScroller';
 
-interface RichTreeViewItemProSlotOwnerState {
-  itemId: TreeViewItemId;
-  label: string;
-}
-
-export interface RichTreeViewProSlots extends RichTreeViewProPluginSlots {
-  /**
-   * Element rendered at the root.
-   * @default RichTreeViewProRoot
-   */
-  root?: React.ElementType;
-  /**
-   * Custom component for the item.
-   * @default TreeItem.
-   */
-  item?: React.JSXElementConstructor<TreeItemProps> | React.JSXElementConstructor<TreeItem2Props>;
-}
+export interface RichTreeViewProSlots
+  extends RichTreeViewProPluginSlots,
+    MakeOptional<TreeViewVirtualScrollerSlots, 'root'> {}
 
-export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined>
-  extends RichTreeViewProPluginSlotProps {
-  root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
-  item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemProSlotOwnerState>;
+export interface RichTreeViewProSlotProps
+  extends RichTreeViewProPluginSlotProps,
+    Omit<TreeViewVirtualScrollerSlotProps, 'root'> {
+  root?: SlotComponentProps<
+    'ul',
+    {},
+    TreeViewVirtualScrollerProps | RichTreeViewProProps<any, any>
+  >;
 }
 
 export type RichTreeViewProApiRef = React.MutableRefObject<
@@ -66,7 +62,7 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: RichTreeViewProSlotProps<R, Multiple>;
+  slotProps?: RichTreeViewProSlotProps;
   /**
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */