List Component - Introduced ForwardRef

src/components/ActionBar/ActionBar.tsx

@@ -2,12 +2,12 @@ import React, { Component, ReactElement } from 'react';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
-import List from '@material-ui/core/List';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
 import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';
 import Tooltip from '../../muiComponents/Tooltip';
+import List from '../../muiComponents/List';
 
 import { Fab, ActionListItem } from './styles';
 

src/components/Author/Author.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useContext } from 'react';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
+import List from '../../muiComponents/List';
 
 import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
 

src/components/DetailSidebar/DetailSidebar.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import List from '@material-ui/core/List';
 
 import { ActionBar } from '../ActionBar/ActionBar';
 import Author from '../Author';
@@ -11,6 +10,7 @@ import Engine from '../Engines/Engines';
 import Install from '../Install';
 import Repository from '../Repository/Repository';
 import { DetailContext } from '../../pages/Version';
+import List from '../../muiComponents/List';
 
 import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
 

src/components/Dist/Dist.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useContext } from 'react';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import fileSizeSI from '../../utils/file-size';
 import { formatLicense } from '../../utils/package';
+import List from '../../muiComponents/List';
 
 import { StyledText, DistListItem, DistChips } from './styles';
 

src/components/Engines/Engines.tsx

@@ -1,10 +1,10 @@
 import React, { Component, ReactElement } from 'react';
 import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
 import Avatar from '../../muiComponents/Avatar';
+import List from '../../muiComponents/List';
 import npm from '../Install/img/npm.svg';
 
 import { StyledText, EngineListItem } from './styles';

src/components/Install/Install.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import styled from 'react-emotion';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
+import List from '../../muiComponents/List';
 
 import InstallListItem, { DependencyManager } from './InstallListItem';
 

src/components/NotFound/styles.ts

@@ -1,8 +1,8 @@
 import { default as MuiCard } from '@material-ui/core/Card';
-import { default as MuiList } from '@material-ui/core/List';
 import styled from 'react-emotion';
 
 import { default as Typography } from '../../muiComponents/Heading';
+import List from '../../muiComponents/List';
 
 export const Wrapper = styled('div')({
   display: 'flex',
@@ -28,11 +28,9 @@ export const Heading = styled(Typography)({
   color: '#4b5e40',
 });
 
-export const List = styled(MuiList)({
-  '&&': {
-    padding: 0,
-    color: '#4b5e40',
-  },
+export const StyledList = styled(List)({
+  padding: 0,
+  color: '#4b5e40',
 });
 
 export const Card = styled(MuiCard)({

src/components/Package/styles.ts

@@ -1,7 +1,6 @@
 import styled from 'react-emotion';
 import { Link } from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import { breakpoints } from '../../utils/styles/media';
@@ -11,6 +10,7 @@ import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
+import List from '../../muiComponents/List';
 import { default as Typography } from '../../muiComponents/Heading';
 
 export const OverviewItem = styled('span')`

src/components/Repository/Repository.tsx

@@ -1,12 +1,12 @@
 /* eslint react/jsx-max-depth: 0 */
 
-import List from '@material-ui/core/List';
 import React, { Component, Fragment, ReactElement } from 'react';
 
 import Avatar from '../../muiComponents/Avatar';
 import { DetailContextConsumer } from '../../pages/Version';
 import { isURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
+import List from '../../muiComponents/List';
 
 import git from './img/git.png';
 import { GithubLink, StyledText, RepositoryListItem, RepositoryListItemText } from './styles';

src/components/UpLinks/UpLinks.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';
 import { formatDateDistance } from '../../utils/package';
+import List from '../../muiComponents/List';
 import ListItem from '../../muiComponents/ListItem';
 
 import { StyledText, Spacer, ListItemText } from './styles';

src/components/Versions/VersionsHistoryList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import List from '@material-ui/core/List';
 import Link from '@material-ui/core/Link';
 import { Link as RouterLink } from 'react-router-dom';
 
 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
+import List from '../../muiComponents/List';
 import ListItem from '../../muiComponents/ListItem';
 
 import { Spacer, ListItemText } from './styles';

src/components/Versions/VersionsTagList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import List from '@material-ui/core/List';
 
 import { DistTags } from '../../../types/packageMeta';
 import ListItem from '../../muiComponents/ListItem';
+import List from '../../muiComponents/List';
 
 import { Spacer, ListItemText } from './styles';
 

src/muiComponents/List/List.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIList, ListProps } from '@material-ui/core/List';
+
+type ListRef = HTMLUListElement;
+
+const List = forwardRef<ListRef, ListProps>(function List(props, ref) {
+  return <MaterialUIList {...props} ref={ref} />;
+});
+
+export default List;

src/muiComponents/List/index.ts

@@ -0,0 +1 @@
+export { default } from './List';