feat: S2 treeview virtualized

packages/@react-spectrum/s2/src/TreeView.tsx

@@ -18,21 +18,23 @@ import {
   Provider,
   TreeItemProps as RACTreeItemProps,
   TreeProps as RACTreeProps,
+  UNSTABLE_ListLayout,
   UNSTABLE_Tree,
   UNSTABLE_TreeItem,
   UNSTABLE_TreeItemContent,
+  UNSTABLE_Virtualizer,
   useContextProps
 } from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {colorMix, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {DOMRef, Key} from '@react-types/shared';
+import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {isAndroid} from '@react-aria/utils';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, isValidElement, JSXElementConstructor, ReactElement, useContext, useRef} from 'react';
-import {StylesPropWithHeight, UnsafeStyles} from './style-utils';
+import React, {createContext, forwardRef, isValidElement, JSXElementConstructor, ReactElement, useContext, useMemo, useRef} from 'react';
 import {Text, TextContext} from './Content';
 import {useButton} from '@react-aria/button';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -75,29 +77,26 @@ let InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: bo
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
 const tree = style({
+  userSelect: 'none',
+  minHeight: 0,
+  minWidth: 0,
+  width: 'full',
+  overflow: 'auto',
   boxSizing: 'border-box',
   justifyContent: {
     isEmpty: 'center'
   },
   alignItems: {
     isEmpty: 'center'
   },
-  width: {
-    isEmpty: 'full'
-  },
   height: {
     isEmpty: 'full'
   },
-  display: 'flex',
-  flexDirection: 'column',
-  gap: {
-    isDetached: 2
-  },
   '--indent': {
     type: 'width',
     value: 16
   }
-});
+}, getAllowedOverrides({height: true}));
 
 function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isDetached, isEmphasized} = props;
@@ -110,18 +109,26 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
 
   let domRef = useDOMRef(ref);
 
+  let layout = useMemo(() => {
+    return new UNSTABLE_ListLayout({
+      rowHeight: isDetached ? 42 : 40
+    });
+  }, [isDetached]);
+
   return (
-    <TreeRendererContext.Provider value={{renderer}}>
-      <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>
-        <UNSTABLE_Tree
-          {...props}
-          className={({isEmpty}) => tree({isEmpty, isDetached})}
-          selectionBehavior="toggle"
-          ref={domRef}>
-          {props.children}
-        </UNSTABLE_Tree>
-      </InternalTreeContext.Provider>
-    </TreeRendererContext.Provider>
+    <UNSTABLE_Virtualizer layout={layout}>
+      <TreeRendererContext.Provider value={{renderer}}>
+        <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>
+          <UNSTABLE_Tree
+            {...props}
+            className={({isEmpty}) => tree({isEmpty, isDetached}, props.styles)}
+            selectionBehavior="toggle"
+            ref={domRef}>
+            {props.children}
+          </UNSTABLE_Tree>
+        </InternalTreeContext.Provider>
+      </TreeRendererContext.Provider>
+    </UNSTABLE_Virtualizer>
   );
 }
 

packages/@react-spectrum/s2/stories/TreeView.stories.tsx

@@ -197,12 +197,13 @@ let rows = [
       {id: 'reports-1B', name: 'Reports 1B', icon: <FileTxt />},
       {id: 'reports-1C', name: 'Reports 1C', icon: <FileTxt />}
     ]},
-    {id: 'reports-2', name: 'Reports 2', icon: <FileTxt />}
+    {id: 'reports-2', name: 'Reports 2', icon: <FileTxt />},
+    ...Array.from({length: 100}, (_, i) => ({id: `reports-repeat-${i}`, name: `Reports ${i}`, icon: <FileTxt />}))
   ]}
 ];
 
 const TreeExampleDynamic = (args) => (
-  <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
+  <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
     <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
       {(item: any) => (
         <TreeViewItem childItems={item.childItems} textValue={item.name}>