[docs] Revert icon search virtualization (#43569)

Co-authored-by: Olivier Tassinari <[email protected]>

Author: Janpot

docs/data/material/components/material-icons/SearchIcons.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { VirtuosoGrid } from 'react-virtuoso';
 import { styled } from '@mui/material/styles';
 import MuiPaper from '@mui/material/Paper';
 import copy from 'clipboard-copy';
@@ -94,21 +93,20 @@ function selectNode(node) {
   selection.addRange(range);
 }
 
+const iconWidth = 35;
+
 const StyledIcon = styled('span')(({ theme }) => ({
   display: 'inline-flex',
   flexDirection: 'column',
   color: theme.palette.text.secondary,
   margin: '0 4px',
   '& > div': {
-    display: 'flex',
-  },
-  '& > div > *': {
     flexGrow: 1,
     fontSize: '.6rem',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     textAlign: 'center',
-    width: 0,
+    width: `calc(${iconWidth}px + ${theme.spacing(2)} * 2 + 2px)`,
   },
 }));
 
@@ -117,6 +115,7 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
   cursor: 'pointer',
   color: theme.palette.text.primary,
   border: '1px solid transparent',
+  fontSize: iconWidth,
   borderRadius: '12px',
   transition: theme.transitions.create(['background-color', 'box-shadow'], {
     duration: theme.transitions.duration.shortest,
@@ -129,56 +128,64 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
   },
 }));
 
-const ListWrapper = React.forwardRef(({ style, children, ...props }, ref) => {
+const handleIconClick = (event) => {
+  const { iconName, iconTheme } = event.currentTarget.dataset;
+
+  if (Math.random() < 0.1) {
+    window.gtag('event', 'material-icons', {
+      eventAction: 'click',
+      eventLabel: iconName,
+    });
+    window.gtag('event', 'material-icons-theme', {
+      eventAction: 'click',
+      eventLabel: iconTheme,
+    });
+  }
+};
+
+function handleLabelClick(event) {
+  selectNode(event.currentTarget);
+}
+
+function Icon(props) {
+  const { icon, onOpenClick } = props;
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
   return (
-    <div
-      ref={ref}
-      {...props}
-      style={{ display: 'flex', flexWrap: 'wrap', ...style }}
+    <StyledIcon
+      key={icon.importName}
+      onClick={handleIconClick}
+      data-icon-theme={icon.theme}
+      data-icon-name={icon.name}
     >
-      {children}
-    </div>
+      <StyledSvgIcon
+        component={icon.Component}
+        tabIndex={-1}
+        onClick={onOpenClick}
+        title={icon.importName}
+      />
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO: a11y */}
+      <div onClick={handleLabelClick}>{icon.importName}</div>
+      {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+    </StyledIcon>
   );
-});
+}
 
-function Icon(handleOpenClick) {
-  return function itemContent(_, icon) {
-    const handleIconClick = () => {
-      if (Math.random() < 0.1) {
-        window.gtag('event', 'material-icons', {
-          eventAction: 'click',
-          eventLabel: icon.name,
-        });
-        window.gtag('event', 'material-icons-theme', {
-          eventAction: 'click',
-          eventLabel: icon.theme,
-        });
-      }
-    };
+const Icons = React.memo(function Icons(props) {
+  const { icons, handleOpenClick } = props;
 
-    const handleLabelClick = (event) => {
-      selectNode(event.currentTarget);
-    };
+  return (
+    <div>
+      {icons.map((icon) => (
+        <Icon key={icon.importName} icon={icon} onOpenClick={handleOpenClick} />
+      ))}
+    </div>
+  );
+});
 
-    return (
-      /* eslint-disable jsx-a11y/click-events-have-key-events */
-      <StyledIcon key={icon.importName} onClick={handleIconClick}>
-        <StyledSvgIcon
-          component={icon.Component}
-          fontSize="large"
-          tabIndex={-1}
-          onClick={handleOpenClick}
-          title={icon.importName}
-        />
-        <div>
-          {/*  eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO: a11y */}
-          <div onClick={handleLabelClick}>{icon.importName}</div>
-        </div>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events */}
-      </StyledIcon>
-    );
-  };
-}
+Icons.propTypes = {
+  handleOpenClick: PropTypes.func.isRequired,
+  icons: PropTypes.array.isRequired,
+};
 
 const ImportLink = styled(Link)(({ theme }) => ({
   textAlign: 'right',
@@ -439,7 +446,14 @@ DialogDetails.propTypes = {
   selectedIcon: PropTypes.object,
 };
 
+const Form = styled('form')({
+  position: 'sticky',
+  top: 80,
+});
+
 const Paper = styled(MuiPaper)(({ theme }) => ({
+  position: 'sticky',
+  top: 80,
   display: 'flex',
   alignItems: 'center',
   marginBottom: theme.spacing(2),
@@ -525,30 +539,26 @@ export default function SearchIcons() {
     setSelectedIcon('');
   }, [setSelectedIcon]);
 
-  const deferredQuery = React.useDeferredValue(query);
-  const deferredTheme = React.useDeferredValue(theme);
-
-  const isPending = query !== deferredQuery || theme !== deferredTheme;
-
   const icons = React.useMemo(() => {
-    const keys =
-      deferredQuery === ''
-        ? null
-        : searchIndex.search(deferredQuery, { limit: 3000 });
+    const keys = query === '' ? null : searchIndex.search(query, { limit: 3000 });
     return (keys === null ? allIcons : keys.map((key) => allIconsMap[key])).filter(
-      (icon) => deferredTheme === icon.theme,
+      (icon) => theme === icon.theme,
     );
-  }, [deferredQuery, deferredTheme]);
+  }, [query, theme]);
+
+  const deferredIcons = React.useDeferredValue(icons);
+
+  const isPending = deferredIcons !== icons;
 
   React.useEffect(() => {
     // Keep track of the no results so we can add synonyms in the future.
-    if (deferredQuery.length >= 4 && icons.length === 0) {
+    if (query.length >= 4 && icons.length === 0) {
       window.gtag('event', 'material-icons', {
         eventAction: 'no-results',
-        eventLabel: deferredQuery,
+        eventLabel: query,
       });
     }
-  }, [deferredQuery, icons.length]);
+  }, [query, icons.length]);
 
   const dialogSelectedIcon = useLatest(
     selectedIcon ? allIconsMap[selectedIcon] : null,
@@ -557,7 +567,7 @@ export default function SearchIcons() {
   return (
     <Grid container sx={{ minHeight: 500 }}>
       <Grid item xs={12} sm={3}>
-        <form>
+        <Form>
           <Typography fontWeight={500} sx={{ mb: 1 }}>
             Filter the style
           </Typography>
@@ -578,7 +588,7 @@ export default function SearchIcons() {
               },
             )}
           </RadioGroup>
-        </form>
+        </Form>
       </Grid>
       <Grid item xs={12} sm={9}>
         <Paper>
@@ -603,21 +613,13 @@ export default function SearchIcons() {
         <Typography sx={{ mb: 1 }}>{`${formatNumber(
           icons.length,
         )} matching results`}</Typography>
-        <VirtuosoGrid
-          style={{ height: 500 }}
-          data={icons}
-          components={{ List: ListWrapper }}
-          itemContent={Icon(handleOpenClick)}
-        />
+        <Icons icons={deferredIcons} handleOpenClick={handleOpenClick} />
       </Grid>
-      {/* Temporary fix for Dialog not closing sometimes and Backdrop stuck at opacity 0 (see issue https://github.com/mui/material-ui/issues/32286). One disadvantage is that the closing animation is not applied. */}
-      {selectedIcon ? (
-        <DialogDetails
-          open={!!selectedIcon}
-          selectedIcon={dialogSelectedIcon}
-          handleClose={handleClose}
-        />
-      ) : null}
+      <DialogDetails
+        open={!!selectedIcon}
+        selectedIcon={dialogSelectedIcon}
+        handleClose={handleClose}
+      />
     </Grid>
   );
 }