fix: introduced forwardRef (#163)

src/components/Author/Author.tsx

@@ -1,13 +1,14 @@
 import React, { FC, useContext } from 'react';
 
-import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import { Heading, AuthorListItem, AuthorListItemText } from './styles';
 import { isEmail } from '../../utils/url';
 
-const Authors: FC = () => {
+import Avatar from '../../muiComponents/Avatar';
+
+const Author: FC = () => {
   const { packageMeta } = useContext(DetailContext);
 
   if (!packageMeta) {
@@ -41,4 +42,4 @@ const Authors: FC = () => {
   );
 };
 
-export default Authors;
+export default Author;

src/components/AvatarTooltip/AvatarTooltip.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 
-import Avatar from '@material-ui/core/Avatar';
 import { isEmail } from '../../utils/url';
 
 import Tooltip from '../../muiComponents/Tooltip';
+import Avatar from '../../muiComponents/Avatar';
 
 export interface AvatarDeveloper {
   name: string;

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

@@ -107,25 +107,29 @@ exports[`test Developers should render the component for contributors with items
                     target="_top"
                     title="dmethvin"
                   >
-                    <WithStyles(ForwardRef(Avatar))
+                    <ForwardRef(Avatar)
                       aria-label="dmethvin"
                     >
-                      <ForwardRef(Avatar)
+                      <WithStyles(ForwardRef(Avatar))
                         aria-label="dmethvin"
-                        classes={
-                          Object {
-                            "colorDefault": "MuiAvatar-colorDefault",
-                            "img": "MuiAvatar-img",
-                            "root": "MuiAvatar-root",
-                          }
-                        }
                       >
-                        <div
+                        <ForwardRef(Avatar)
                           aria-label="dmethvin"
-                          className="MuiAvatar-root MuiAvatar-colorDefault"
+                          classes={
-                        />
+                            Object {
-                      </ForwardRef(Avatar)>
+                              "colorDefault": "MuiAvatar-colorDefault",
-                    </WithStyles(ForwardRef(Avatar))>
+                              "img": "MuiAvatar-img",
+                              "root": "MuiAvatar-root",
+                            }
+                          }
+                        >
+                          <div
+                            aria-label="dmethvin"
+                            className="MuiAvatar-root MuiAvatar-colorDefault"
+                          />
+                        </ForwardRef(Avatar)>
+                      </WithStyles(ForwardRef(Avatar))>
+                    </ForwardRef(Avatar)>
                   </a>
                   <ForwardRef(Popper)
                     anchorEl={
@@ -199,25 +203,29 @@ exports[`test Developers should render the component for contributors with items
                     target="_top"
                     title="mgol"
                   >
-                    <WithStyles(ForwardRef(Avatar))
+                    <ForwardRef(Avatar)
                       aria-label="mgol"
                     >
-                      <ForwardRef(Avatar)
+                      <WithStyles(ForwardRef(Avatar))
                         aria-label="mgol"
-                        classes={
-                          Object {
-                            "colorDefault": "MuiAvatar-colorDefault",
-                            "img": "MuiAvatar-img",
-                            "root": "MuiAvatar-root",
-                          }
-                        }
                       >
-                        <div
+                        <ForwardRef(Avatar)
                           aria-label="mgol"
-                          className="MuiAvatar-root MuiAvatar-colorDefault"
+                          classes={
-                        />
+                            Object {
-                      </ForwardRef(Avatar)>
+                              "colorDefault": "MuiAvatar-colorDefault",
-                    </WithStyles(ForwardRef(Avatar))>
+                              "img": "MuiAvatar-img",
+                              "root": "MuiAvatar-root",
+                            }
+                          }
+                        >
+                          <div
+                            aria-label="mgol"
+                            className="MuiAvatar-root MuiAvatar-colorDefault"
+                          />
+                        </ForwardRef(Avatar)>
+                      </WithStyles(ForwardRef(Avatar))>
+                    </ForwardRef(Avatar)>
                   </a>
                   <ForwardRef(Popper)
                     anchorEl={
@@ -357,25 +365,29 @@ exports[`test Developers should render the component for maintainers with items
                     target="_top"
                     title="dmethvin"
                   >
-                    <WithStyles(ForwardRef(Avatar))
+                    <ForwardRef(Avatar)
                       aria-label="dmethvin"
                     >
-                      <ForwardRef(Avatar)
+                      <WithStyles(ForwardRef(Avatar))
                         aria-label="dmethvin"
-                        classes={
-                          Object {
-                            "colorDefault": "MuiAvatar-colorDefault",
-                            "img": "MuiAvatar-img",
-                            "root": "MuiAvatar-root",
-                          }
-                        }
                       >
-                        <div
+                        <ForwardRef(Avatar)
                           aria-label="dmethvin"
-                          className="MuiAvatar-root MuiAvatar-colorDefault"
+                          classes={
-                        />
+                            Object {
-                      </ForwardRef(Avatar)>
+                              "colorDefault": "MuiAvatar-colorDefault",
-                    </WithStyles(ForwardRef(Avatar))>
+                              "img": "MuiAvatar-img",
+                              "root": "MuiAvatar-root",
+                            }
+                          }
+                        >
+                          <div
+                            aria-label="dmethvin"
+                            className="MuiAvatar-root MuiAvatar-colorDefault"
+                          />
+                        </ForwardRef(Avatar)>
+                      </WithStyles(ForwardRef(Avatar))>
+                    </ForwardRef(Avatar)>
                   </a>
                   <ForwardRef(Popper)
                     anchorEl={
@@ -449,25 +461,29 @@ exports[`test Developers should render the component for maintainers with items
                     target="_top"
                     title="mgol"
                   >
-                    <WithStyles(ForwardRef(Avatar))
+                    <ForwardRef(Avatar)
                       aria-label="mgol"
                     >
-                      <ForwardRef(Avatar)
+                      <WithStyles(ForwardRef(Avatar))
                         aria-label="mgol"
-                        classes={
-                          Object {
-                            "colorDefault": "MuiAvatar-colorDefault",
-                            "img": "MuiAvatar-img",
-                            "root": "MuiAvatar-root",
-                          }
-                        }
                       >
-                        <div
+                        <ForwardRef(Avatar)
                           aria-label="mgol"
-                          className="MuiAvatar-root MuiAvatar-colorDefault"
+                          classes={
-                        />
+                            Object {
-                      </ForwardRef(Avatar)>
+                              "colorDefault": "MuiAvatar-colorDefault",
-                    </WithStyles(ForwardRef(Avatar))>
+                              "img": "MuiAvatar-img",
+                              "root": "MuiAvatar-root",
+                            }
+                          }
+                        >
+                          <div
+                            aria-label="mgol"
+                            className="MuiAvatar-root MuiAvatar-colorDefault"
+                          />
+                        </ForwardRef(Avatar)>
+                      </WithStyles(ForwardRef(Avatar))>
+                    </ForwardRef(Avatar)>
                   </a>
                   <ForwardRef(Popper)
                     anchorEl={

src/components/Engines/Engines.tsx

@@ -1,12 +1,14 @@
 import React, { Component, ReactElement } from 'react';
 
-import Avatar from '@material-ui/core/Avatar';
 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 { Heading, EngineListItem } from './styles';
+
+import Avatar from '../../muiComponents/Avatar';
+
 // @ts-ignore
 import node from './img/node.png';
 import npm from '../Install/img/npm.svg';

src/components/Install/InstallListItem.tsx

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

src/components/Package/styles.ts

@@ -4,7 +4,6 @@ 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 Photo from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
 import { breakpoints } from '../../utils/styles/media';
@@ -13,6 +12,7 @@ import Label from '../Label';
 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';
 
 export const OverviewItem = styled('span')`
   && {

src/components/Repository/Repository.tsx

@@ -1,7 +1,6 @@
 /* eslint react/jsx-max-depth: 0 */
 
 import React, { Component, Fragment, ReactElement } from 'react';
-import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
 
 import { DetailContextConsumer } from '../../pages/Version';
@@ -12,6 +11,8 @@ import { Heading, GithubLink, RepositoryListItem, RepositoryListItemText } from
 import git from './img/git.png';
 import { isURL } from '../../utils/url';
 
+import Avatar from '../../muiComponents/Avatar';
+
 class Repository extends Component {
   public render(): ReactElement<HTMLElement> {
     return (

src/muiComponents/Avatar/Avatar.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avatar';
+
+// The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop
+type AvatarRef = HTMLElementTagNameMap['div'];
+
+/* eslint-disable verdaccio/jsx-spread */
+// eslint-disable-next-line react/display-name
+const Avatar = forwardRef<AvatarRef, AvatarProps>(function Avatar(props, ref) {
+  return <MaterialUIAvatar {...props} ref={ref} />;
+});
+
+export default Avatar;

src/muiComponents/Avatar/index.ts

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

src/muiComponents/IconButton/IconButton.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
-import { default as MuiIconButton, IconButtonProps } from '@material-ui/core/IconButton';
+import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton';
 
 type IconButtonRef = HTMLElementTagNameMap['button'];
 
 /* eslint-disable verdaccio/jsx-spread */
 // eslint-disable-next-line react/display-name
 const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
-  return <MuiIconButton {...props} ref={ref} />;
+  return <MaterialUIIconButton {...props} ref={ref} />;
 });
 
 export default IconButton;

src/muiComponents/TextField/TextField.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField';
+import { default as MaterialUITextField, TextFieldProps } from '@material-ui/core/TextField';
 
 // The default element type of MUI's TextField is 'div'
 type TextFieldRef = HTMLElementTagNameMap['div'];
@@ -8,7 +8,7 @@ type TextFieldRef = HTMLElementTagNameMap['div'];
 // eslint-disable-next-line react/display-name
 const TextField = forwardRef<TextFieldRef, TextFieldProps>(function ToolTip({ InputProps, classes, ...props }, ref) {
   return (
-    <TextFieldMaterialUI
+    <MaterialUITextField
       {...props}
       InputProps={{
         ...InputProps,

src/muiComponents/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { default as MuiTooltip, TooltipProps } from '@material-ui/core/Tooltip';
+import { default as MaterialUITooltip, TooltipProps } from '@material-ui/core/Tooltip';
 
 // The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
 type TooltipRef = HTMLElementTagNameMap['div'];
@@ -7,7 +7,7 @@ type TooltipRef = HTMLElementTagNameMap['div'];
 /* eslint-disable verdaccio/jsx-spread */
 // eslint-disable-next-line react/display-name
 const Tooltip = forwardRef<TooltipRef, TooltipProps>(function ToolTip(props, ref) {
-  return <MuiTooltip {...props} innerRef={ref} />;
+  return <MaterialUITooltip {...props} innerRef={ref} />;
 });
 
 export default Tooltip;

src/pages/Version/Version.test.tsx

@@ -10,7 +10,7 @@ import { waitForElement } from '@testing-library/dom';
 import ErrorBoundary from '../../App/AppError';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
-jest.mock('@material-ui/core/Avatar');
+jest.mock('../../muiComponents/Avatar');
 
 // eslint-disable-next-line react/display-name
 jest.mock('../../components/NotFound', () => () => <div>{'Not found'}</div>);