[Autocomplete] Expand virtualized example to have grouped items

docs/src/pages/components/autocomplete/Virtualize.js

@@ -3,50 +3,58 @@ import PropTypes from 'prop-types';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import { useTheme, makeStyles } from '@material-ui/core/styles';
-import { FixedSizeList } from 'react-window';
+import { VariableSizeList } from 'react-window';
+import { Typography } from '@material-ui/core';
 
 function renderRow(props) {
   const { data, index, style } = props;
-
-  return React.cloneElement(data[index], {
-    style: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      display: 'block',
-      ...style,
-    },
-  });
+  return React.cloneElement(data[index], { style });
 }
 
 // Adapter for react-window
 const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
-  const { children, ...other } = props;
+  const { children, className, ...other } = props;
+  const itemData = React.Children.toArray(children);
   const theme = useTheme();
-  const smUp = useMediaQuery(theme.breakpoints.up('sm'));
-  const itemCount = Array.isArray(children) ? children.length : 0;
+  const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
+  const itemCount = itemData.length;
   const itemSize = smUp ? 36 : 48;
 
+  const getChildSize = child => {
+    if (React.isValidElement(child) && child.type === ListSubheader) {
+      return 48;
+    }
+
+    return itemSize;
+  };
+
+  const getHeight = () => {
+    if (itemCount > 8) {
+      return 8 * itemSize;
+    }
+    return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+  };
+
   const outerElementType = React.useMemo(() => {
     return React.forwardRef((props2, ref2) => <div ref={ref2} {...props2} {...other} />);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div ref={ref}>
-      <FixedSizeList
-        style={{ padding: 0, height: Math.min(8, itemCount) * itemSize, maxHeight: 'auto' }}
-        itemData={children}
-        height={250}
+    <div ref={ref} className={className}>
+      <VariableSizeList
+        itemData={itemData}
+        height={getHeight()}
         width="100%"
         outerElementType={outerElementType}
         innerElementType="ul"
-        itemSize={itemSize}
+        itemSize={index => getChildSize(itemData[index])}
         overscanCount={5}
         itemCount={itemCount}
       >
         {renderRow}
-      </FixedSizeList>
+      </VariableSizeList>
     </div>
   );
 });
@@ -75,6 +83,17 @@ const useStyles = makeStyles({
   },
 });
 
+const OPTIONS = Array.from(new Array(10000))
+  .map(() => random(10 + Math.ceil(Math.random() * 20)))
+  .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase()));
+
+const renderGroup = params => [
+  <ListSubheader key={params.key} component="div">
+    {params.key}
+  </ListSubheader>,
+  params.children,
+];
+
 export default function Virtualize() {
   const classes = useStyles();
 
@@ -85,10 +104,13 @@ export default function Virtualize() {
       disableListWrap
       classes={classes}
       ListboxComponent={ListboxComponent}
-      options={Array.from(new Array(10000)).map(() => random(Math.ceil(Math.random() * 18)))}
+      renderGroup={renderGroup}
+      options={OPTIONS}
+      groupBy={option => option[0].toUpperCase()}
       renderInput={params => (
         <TextField {...params} variant="outlined" label="10,000 options" fullWidth />
       )}
+      renderOption={option => <Typography noWrap>{option}</Typography>}
     />
   );
 }

docs/src/pages/components/autocomplete/Virtualize.tsx

@@ -1,54 +1,62 @@
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import Autocomplete, { RenderGroupParams } from '@material-ui/lab/Autocomplete';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import { useTheme, makeStyles } from '@material-ui/core/styles';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
+import { Typography } from '@material-ui/core';
 
 function renderRow(props: ListChildComponentProps) {
   const { data, index, style } = props;
-
-  return React.cloneElement(data[index], {
-    style: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      display: 'block',
-      ...style,
-    },
-  });
+  return React.cloneElement(data[index], { style });
 }
 
 // Adapter for react-window
-const ListboxComponent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>(
+const ListboxComponent = React.forwardRef<HTMLDivElement, { className: string }>(
   function ListboxComponent(props, ref) {
-    const { children, ...other } = props;
+    const { children, className, ...other } = props;
+    const itemData = React.Children.toArray(children);
     const theme = useTheme();
-    const smUp = useMediaQuery(theme.breakpoints.up('sm'));
-    const itemCount = Array.isArray(children) ? children.length : 0;
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
+    const itemCount = itemData.length;
     const itemSize = smUp ? 36 : 48;
 
+    const getChildSize = (child: React.ReactNode) => {
+      if (React.isValidElement(child) && child.type === ListSubheader) {
+        return 48;
+      }
+
+      return itemSize;
+    };
+
+    const getHeight = () => {
+      if (itemCount > 8) {
+        return 8 * itemSize;
+      }
+      return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+
     const outerElementType = React.useMemo(() => {
-      return React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-        (props2, ref2) => <div ref={ref2} {...props2} {...other} />,
-      );
+      return React.forwardRef<HTMLDivElement>((props2, ref2) => (
+        <div ref={ref2} {...props2} {...other} />
+      ));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-      <div ref={ref}>
-        <FixedSizeList
-          style={{ padding: 0, height: Math.min(8, itemCount) * itemSize, maxHeight: 'auto' }}
-          itemData={children}
-          height={250}
+      <div ref={ref} className={className}>
+        <VariableSizeList
+          itemData={itemData}
+          height={getHeight()}
           width="100%"
           outerElementType={outerElementType}
           innerElementType="ul"
-          itemSize={itemSize}
+          itemSize={index => getChildSize(itemData[index])}
           overscanCount={5}
           itemCount={itemCount}
         >
           {renderRow}
-        </FixedSizeList>
+        </VariableSizeList>
       </div>
     );
   },
@@ -74,6 +82,17 @@ const useStyles = makeStyles({
   },
 });
 
+const OPTIONS = Array.from(new Array(10000))
+  .map(() => random(10 + Math.ceil(Math.random() * 20)))
+  .sort((a: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase()));
+
+const renderGroup = (params: RenderGroupParams) => [
+  <ListSubheader key={params.key} component="div">
+    {params.key}
+  </ListSubheader>,
+  params.children,
+];
+
 export default function Virtualize() {
   const classes = useStyles();
 
@@ -83,11 +102,14 @@ export default function Virtualize() {
       style={{ width: 300 }}
       disableListWrap
       classes={classes}
-      ListboxComponent={ListboxComponent}
-      options={Array.from(new Array(10000)).map(() => random(Math.ceil(Math.random() * 18)))}
+      ListboxComponent={ListboxComponent as React.ComponentType<React.HTMLAttributes<HTMLElement>>}
+      renderGroup={renderGroup}
+      options={OPTIONS}
+      groupBy={option => option[0].toUpperCase()}
       renderInput={params => (
         <TextField {...params} variant="outlined" label="10,000 options" fullWidth />
       )}
+      renderOption={option => <Typography noWrap>{option}</Typography>}
     />
   );
 }