[docs][Autocomplete] Update virtualization example to use react-window v2

docs/data/joy/components/autocomplete/Virtualize.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { FixedSizeList } from 'react-window';
+import { List } from 'react-window';
 import { Popper } from '@mui/base/Popper';
 import Autocomplete from '@mui/joy/Autocomplete';
-import AutocompleteListbox from '@mui/joy/AutocompleteListbox';
 import AutocompleteOption from '@mui/joy/AutocompleteOption';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import ListSubheader from '@mui/joy/ListSubheader';
+import AutocompleteListbox from '@mui/joy/AutocompleteListbox';
 
 const LISTBOX_PADDING = 6; // px
 
@@ -34,29 +34,7 @@ function renderRow(props) {
   );
 }
 
-const OuterElementContext = React.createContext({});
-
-const OuterElementType = React.forwardRef((props, ref) => {
-  const outerProps = React.useContext(OuterElementContext);
-  return (
-    <AutocompleteListbox
-      {...props}
-      {...outerProps}
-      component="div"
-      ref={ref}
-      sx={{
-        '& ul': {
-          padding: 0,
-          margin: 0,
-          flexShrink: 0,
-        },
-      }}
-    />
-  );
-});
-
 // Adapter for react-window
-
 const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
   const { children, anchorEl, open, modifiers, ...other } = props;
   const itemData = [];
@@ -73,20 +51,31 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref)
 
   return (
     <Popper ref={ref} anchorEl={anchorEl} open={open} modifiers={modifiers}>
-      <OuterElementContext.Provider value={other}>
-        <FixedSizeList
-          itemData={itemData}
-          height={itemSize * 8}
-          width="100%"
-          outerElementType={OuterElementType}
-          innerElementType="ul"
-          itemSize={itemSize}
+      <AutocompleteListbox
+        {...other}
+        component="div"
+        sx={{
+          '& ul': {
+            padding: 0,
+            margin: 0,
+            flexShrink: 0,
+          },
+          maxHeight: '100%',
+        }}
+      >
+        <List
+          rowCount={itemCount}
+          rowHeight={itemSize}
+          rowComponent={renderRow}
+          rowProps={{ data: itemData }}
+          style={{
+            height: itemSize * 8,
+            width: '100%',
+          }}
           overscanCount={5}
-          itemCount={itemCount}
-        >
-          {renderRow}
-        </FixedSizeList>
-      </OuterElementContext.Provider>
+          tagName="ul"
+        />
+      </AutocompleteListbox>
     </Popper>
   );
 });

docs/data/joy/components/autocomplete/Virtualize.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { List, RowComponentProps } from 'react-window';
 import { Popper } from '@mui/base/Popper';
 import Autocomplete from '@mui/joy/Autocomplete';
-import AutocompleteListbox from '@mui/joy/AutocompleteListbox';
 import AutocompleteOption from '@mui/joy/AutocompleteOption';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import ListSubheader from '@mui/joy/ListSubheader';
+import AutocompleteListbox, {
+  AutocompleteListboxProps,
+} from '@mui/joy/AutocompleteListbox';
 
 const LISTBOX_PADDING = 6; // px
 
-function renderRow(props: ListChildComponentProps) {
+function renderRow(props: RowComponentProps & { data: any }) {
   const { data, index, style } = props;
   const dataSet = data[index];
   const inlineStyle = {
@@ -33,35 +35,15 @@ function renderRow(props: ListChildComponentProps) {
   );
 }
 
-const OuterElementContext = React.createContext({});
-
-const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
-  const outerProps = React.useContext(OuterElementContext);
-  return (
-    <AutocompleteListbox
-      {...props}
-      {...outerProps}
-      component="div"
-      ref={ref}
-      sx={{
-        '& ul': {
-          padding: 0,
-          margin: 0,
-          flexShrink: 0,
-        },
-      }}
-    />
-  );
-});
-
 // Adapter for react-window
 const ListboxComponent = React.forwardRef<
   HTMLDivElement,
   {
     anchorEl: any;
     open: boolean;
     modifiers: any[];
-  } & React.HTMLAttributes<HTMLElement>
+  } & React.HTMLAttributes<HTMLElement> &
+    AutocompleteListboxProps
 >(function ListboxComponent(props, ref) {
   const { children, anchorEl, open, modifiers, ...other } = props;
   const itemData: Array<any> = [];
@@ -79,20 +61,31 @@ const ListboxComponent = React.forwardRef<
 
   return (
     <Popper ref={ref} anchorEl={anchorEl} open={open} modifiers={modifiers}>
-      <OuterElementContext.Provider value={other}>
-        <FixedSizeList
-          itemData={itemData}
-          height={itemSize * 8}
-          width="100%"
-          outerElementType={OuterElementType}
-          innerElementType="ul"
-          itemSize={itemSize}
+      <AutocompleteListbox
+        {...other}
+        component="div"
+        sx={{
+          '& ul': {
+            padding: 0,
+            margin: 0,
+            flexShrink: 0,
+          },
+          maxHeight: '100%',
+        }}
+      >
+        <List
+          rowCount={itemCount}
+          rowHeight={itemSize}
+          rowComponent={renderRow}
+          rowProps={{ data: itemData }}
+          style={{
+            height: itemSize * 8,
+            width: '100%',
+          }}
           overscanCount={5}
-          itemCount={itemCount}
-        >
-          {renderRow}
-        </FixedSizeList>
-      </OuterElementContext.Provider>
+          tagName="ul"
+        />
+      </AutocompleteListbox>
     </Popper>
   );
 });

docs/data/material/components/autocomplete/Virtualize.js

@@ -6,20 +6,19 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import ListSubheader from '@mui/material/ListSubheader';
 import Popper from '@mui/material/Popper';
 import { useTheme, styled } from '@mui/material/styles';
-import { VariableSizeList } from 'react-window';
+import { List } from 'react-window';
 import Typography from '@mui/material/Typography';
 
 const LISTBOX_PADDING = 8; // px
 
-function renderRow(props) {
-  const { data, index, style } = props;
-  const dataSet = data[index];
+function RowComponent({ index, itemData, style }) {
+  const dataSet = itemData[index];
   const inlineStyle = {
     ...style,
-    top: style.top + LISTBOX_PADDING,
+    top: (style.top ?? 0) + LISTBOX_PADDING,
   };
 
-  if (dataSet.hasOwnProperty('group')) {
+  if ('group' in dataSet) {
     return (
       <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
         {dataSet.group}
@@ -36,27 +35,29 @@ function renderRow(props) {
   );
 }
 
-const OuterElementContext = React.createContext({});
-
-const OuterElementType = React.forwardRef((props, ref) => {
-  const outerProps = React.useContext(OuterElementContext);
-  return <div ref={ref} {...props} {...outerProps} />;
-});
-
-function useResetCache(data) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (ref.current != null) {
-      ref.current.resetAfterIndex(0, true);
-    }
-  }, [data]);
-  return ref;
-}
+// Adapter for react-window v2
+
+RowComponent.propTypes = {
+  index: PropTypes.number.isRequired,
+  itemData: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string])
+          .isRequired,
+      ),
+      PropTypes.shape({
+        childern: PropTypes.node,
+        group: PropTypes.string.isRequired,
+        key: PropTypes.number.isRequired,
+      }),
+    ]).isRequired,
+  ).isRequired,
+  style: PropTypes.object.isRequired,
+};
 
-// Adapter for react-window
 const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
-  const itemData = [];
+  const itemData = React.useMemo(() => [], []);
   children.forEach((item) => {
     itemData.push(item);
     itemData.push(...(item.children || []));
@@ -73,7 +74,6 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref)
     if (child.hasOwnProperty('group')) {
       return 48;
     }
-
     return itemSize;
   };
 
@@ -84,31 +84,29 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref)
     return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
   };
 
-  const gridRef = useResetCache(itemCount);
-
   return (
-    <div ref={ref}>
-      <OuterElementContext.Provider value={other}>
-        <VariableSizeList
-          itemData={itemData}
-          height={getHeight() + 2 * LISTBOX_PADDING}
-          width="100%"
-          ref={gridRef}
-          outerElementType={OuterElementType}
-          innerElementType="ul"
-          itemSize={(index) => getChildSize(itemData[index])}
-          overscanCount={5}
-          itemCount={itemCount}
-        >
-          {renderRow}
-        </VariableSizeList>
-      </OuterElementContext.Provider>
+    <div ref={ref} {...other} style={{ ...other.style, maxHeight: '100%' }}>
+      <List
+        key={itemCount}
+        rowCount={itemCount}
+        rowHeight={(index) => getChildSize(itemData[index])}
+        rowComponent={RowComponent}
+        rowProps={{ itemData }}
+        style={{
+          height: getHeight() + 2 * LISTBOX_PADDING,
+          width: '100%',
+          margin: 0,
+        }}
+        overscanCount={5}
+        tagName="ul"
+      />
     </div>
   );
 });
 
 ListboxComponent.propTypes = {
   children: PropTypes.node,
+  style: PropTypes.object,
 };
 
 function random(length) {