fix: listItem Component - Introduced ForwardRef (#183)

* refactor: introduced forwardRef

* fix: fixed button prop listItem

* chore: rollback package upgrade

* fix: fixed snap

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

@@ -2,4 +2,4 @@
 
 exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
 
-exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-9q3x3c eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/ActionBar/styles.ts

@@ -1,15 +1,13 @@
 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)({
-  '&&': {
-    paddingTop: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
+  paddingTop: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
 });
 
 export const Fab = styled(MuiFab)({

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/Package/Package.tsx

@@ -2,7 +2,6 @@ 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';
@@ -10,6 +9,7 @@ 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,20 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem';
+
+type ListItemRef<T extends boolean = false> = T extends true ? HTMLDivElement : HTMLLIElement;
+
+interface Props<T extends boolean = false> extends Omit<ListItemProps, 'button'> {
+  button?: T;
+}
+
+const ListItem = forwardRef(function ListItem<T extends boolean>({ button, ...props }: Props<T>, ref: React.Ref<ListItemRef<T>>) {
+  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <MaterialUIListItem {...props} button={button as any} innerRef={ref} />;
+});
+
+ListItem.defaultProps = {
+  button: false,
+};
+
+export default ListItem;

src/muiComponents/ListItem/index.ts

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

yarn.lock

@@ -14023,4 +14023,4 @@ yup@^0.27.0:
     lodash "^4.17.11"
     property-expr "^1.5.0"
     synchronous-promise "^2.0.6"
-    toposort "^2.0.2"
+    toposort "^2.0.2"