ListItem Component - Introduced ForwardRef

src/components/ActionBar/styles.ts

@@ -1,8 +1,8 @@
 import styled from 'react-emotion';
 import { default as MuiFab } from '@material-ui/core/Fab';
-import ListItem from '@material-ui/core/ListItem';
 
 import colors from '../../utils/styles/colors';
+import ListItem from '../../muiComponents/ListItem';
 
 export const ActionListItem = styled(ListItem)({
   '&&': {

src/components/Author/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import { fontWeight } from '../../utils/styles/sizes';
+import ListItem from '../../muiComponents/ListItem';
 
 export const Heading = styled(Typography)({
   '&&': {

src/components/DetailSidebar/styles.ts

@@ -1,13 +1,12 @@
 import styled from 'react-emotion';
-import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 
+import ListItem from '../../muiComponents/ListItem';
+
 export const TitleListItem = styled(ListItem)({
-  '&&': {
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingBottom: 0,
-  },
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
 });
 
 export const TitleListItemText = styled(ListItemText)({

src/components/Dist/styles.ts

@@ -1,11 +1,11 @@
 import styled from 'react-emotion';
 import { default as MuiFab } from '@material-ui/core/Fab';
 import Chip from '@material-ui/core/Chip';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
+import ListItem from '../../muiComponents/ListItem';
 
 export const Heading = styled(Typography)({
   '&&': {

src/components/Engines/__snapshots__/Engines.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-dt93b2 et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-dt93b2 et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
+exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-131yq1t et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;

src/components/Engines/styles.ts

@@ -1,8 +1,8 @@
 import styled from 'react-emotion';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 
 import { fontWeight } from '../../utils/styles/sizes';
+import ListItem from '../../muiComponents/ListItem';
 
 export const Heading = styled(Typography)({
   '&&': {
@@ -12,7 +12,5 @@ export const Heading = styled(Typography)({
 });
 
 export const EngineListItem = styled(ListItem)({
-  '&&': {
-    paddingLeft: 0,
-  },
+  paddingLeft: 0,
 });

src/components/Install/InstallListItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'react-emotion';
-import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import Avatar from '../../muiComponents/Avatar';
+import ListItem from '../../muiComponents/ListItem';
 
 // logos of package managers
 import npmLogo from './img/npm.svg';

src/components/NotFound/NotFound.tsx

@@ -1,9 +1,10 @@
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import withWidth, { isWidthUp, WithWidthProps } from '@material-ui/core/withWidth';
 import React, { useCallback } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
+import ListItem from '../../muiComponents/ListItem';
+
 import PackageImg from './img/package.svg';
 import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles';
 

src/components/Package/Package.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import BugReport from '@material-ui/icons/BugReport';
 import Grid from '@material-ui/core/Grid';
 import HomeIcon from '@material-ui/icons/Home';
-import ListItem from '@material-ui/core/ListItem';
 import { PackageMetaInterface, Author as PackageAuthor } from 'types/packageMeta';
 
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
 import { formatDate, formatDateDistance } from '../../utils/package';
 import Tooltip from '../../muiComponents/Tooltip';
 import { isURL } from '../../utils/url';
+import ListItem from '../../muiComponents/ListItem';
 
 import {
   Author,

src/components/Repository/styles.ts

@@ -1,12 +1,12 @@
 import styled from 'react-emotion';
 import Grid from '@material-ui/core/Grid';
-import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
+import ListItem from '../../muiComponents/ListItem';
 
 export const Heading = styled(Typography)({
   '&&': {

src/components/UpLinks/UpLinks.tsx

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

src/components/Versions/VersionsHistoryList.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import List from '@material-ui/core/List';
 import Link from '@material-ui/core/Link';
-import ListItem from '@material-ui/core/ListItem';
 import { Link as RouterLink } from 'react-router-dom';
 
 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
+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 ListItem from '@material-ui/core/ListItem';
 
 import { DistTags } from '../../../types/packageMeta';
+import ListItem from '../../muiComponents/ListItem';
 
 import { Spacer, ListItemText } from './styles';
 

src/muiComponents/ListItem/ListItem.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem';
+
+type ListItemRef = HTMLLIElement;
+
+const ListItem = forwardRef<ListItemRef, Omit<ListItemProps, 'button'>>(function ListItem(props, ref) {
+  return <MaterialUIListItem {...props} innerRef={ref} />;
+});
+
+export default ListItem;

src/muiComponents/ListItem/index.ts

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