Updated material ui to version 5

package/package.json

@@ -19,9 +19,13 @@
 		"prepublish": "yarn run build && yarn run copy_publish_files"
 	},
 	"peerDependencies": {
-		"@material-ui/core": "^4.9.4",
-		"react": "^16.8.6 || ^17.0.0",
-		"react-dom": "^16.8.6 || ^17.0.0"
+		"@emotion/react": "^11.8.2",
+    	"@emotion/styled": "^11.8.1",
+		"@mui/icons-material": "^5.6.0",
+		"@mui/material": "^5.5.2",
+		"@mui/styles": "^5.6.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.0.0",
@@ -44,10 +48,15 @@
 		"@babel/plugin-syntax-import-meta": "^7.0.0",
 		"@babel/preset-env": "^7.0.0",
 		"@babel/preset-react": "^7.0.0",
+		"@emotion/react": "^11.8.2",
+    	"@emotion/styled": "^11.8.1",
+		"@mui/icons-material": "^5.6.0",
+		"@mui/material": "^5.5.2",
+		"@mui/styles": "^5.6.0",
 		"@types/classnames": "^2.2.9",
 		"@types/jest": "^25.1.2",
 		"@types/lodash.isequal": "^4.5.5",
-		"@types/react": "^16.9.19",
+		"@types/react": "^17.0.2",
 		"@typescript-eslint/eslint-plugin": "^2.19.0",
 		"@typescript-eslint/parser": "^2.19.0",
 		"babel-eslint": "^10.0.1",
@@ -58,8 +67,8 @@
 		"eslint-plugin-jsx-a11y": "^6.2.3",
 		"eslint-plugin-react": "^7.18.3",
 		"eslint-plugin-react-hooks": "^1.7.0",
-		"react": "16.8.6 || ^17.0.0",
-		"react-dom": "16.8.6 || ^17.0.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
 		"react-scripts": "^3.0.1",
 		"rollup": "^1.1.2",
 		"rollup-plugin-babel": "^4.3.2",

package/src/components/DateRangePickerExporter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StylesProvider } from '@material-ui/core/styles';
+import StylesProvider from '@mui/styles/StylesProvider';
 
 // eslint-disable-next-line no-unused-vars
 import DateRangePickerWrapper, { DateRangePickerWrapperProps } from './DateRangePickerWrapper';

package/src/components/DateRangePickerWrapper.tsx

@@ -1,23 +1,33 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/core';
 
 import DateRangePicker from './DateRangePicker';
 
 // eslint-disable-next-line no-unused-vars
 import { DateRange, DefinedRange } from '../types';
 
-const useStyles = makeStyles(() => ({
-  dateRangePickerContainer: {
+const PREFIX = 'DateRangePickerWrapper';
+
+const classes = {
+  dateRangePickerContainer: `${PREFIX}-dateRangePickerContainer`,
+  dateRangePicker: `${PREFIX}-dateRangePicker`,
+  dateRangeBackdrop: `${PREFIX}-dateRangeBackdrop`,
+};
+
+const Root = styled('div')(() => ({
+  [`&.${classes.dateRangePickerContainer}`]: {
     position: 'relative',
   },
-  dateRangePicker: {
+
+  [`& .${classes.dateRangePicker}`]: {
     position: 'relative',
     zIndex: 1,
   },
-  dateRangeBackdrop: {
+
+  [`& .${classes.dateRangeBackdrop}`]: {
     position: 'fixed',
     height: '100vh',
     width: '100vw',
@@ -44,8 +54,6 @@ export interface DateRangePickerWrapperProps {
 const DateRangePickerWrapper: React.FunctionComponent<DateRangePickerWrapperProps> = (
   props: DateRangePickerWrapperProps,
 ) => {
-  const classes = useStyles();
-
   const {
     closeOnClickOutside,
     wrapperClassName,
@@ -66,7 +74,7 @@ const DateRangePickerWrapper: React.FunctionComponent<DateRangePickerWrapperProp
   const wrapperClasses = classNames(classes.dateRangePicker, wrapperClassName);
 
   return (
-    <div className={classes.dateRangePickerContainer}>
+    <Root className={classes.dateRangePickerContainer}>
       {
         open && (
           <div
@@ -80,7 +88,7 @@ const DateRangePickerWrapper: React.FunctionComponent<DateRangePickerWrapperProp
       <div className={wrapperClasses}>
         <DateRangePicker {...props} />
       </div>
-    </div>
+    </Root>
   );
 };
 

package/src/components/Day.tsx

@@ -1,48 +1,53 @@
 /* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import {
-  IconButton,
-  Typography,
-  makeStyles,
-  // eslint-disable-next-line no-unused-vars
-  Theme,
-} from '@material-ui/core';
-import { combine } from '../utils';
+  Box, IconButton, Typography, // eslint-disable-next-line no-unused-vars
+} from '@mui/material';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  leftBorderRadius: {
+const Root = styled(Box)<{
+  leftBorderRadius?: boolean;
+  rightBorderRadius?: boolean;
+  highlighted?: boolean;
+}>(({
+  theme, leftBorderRadius, rightBorderRadius, highlighted,
+}) => ({
+  ...(leftBorderRadius && {
     borderRadius: '50% 0 0 50%',
-  },
-  rightBorderRadius: {
+  }),
+  ...(rightBorderRadius && {
     borderRadius: '0 50% 50% 0',
-  },
-  buttonContainer: {
-    display: 'flex',
-  },
-  button: {
-    height: 36,
-    width: 36,
-    padding: 0,
-  },
-  buttonText: {
-    lineHeight: 1.6,
-  },
-  outlined: {
+  }),
+  display: 'flex',
+  ...(highlighted && {
+    backgroundColor: theme.palette.action.hover,
+  }),
+}));
+
+const StyledIconButton = styled(IconButton)<{
+  outlined?: boolean;
+  filled?: boolean;
+}>(({ theme, outlined, filled }) => ({
+  height: 36,
+  width: 36,
+  padding: 0,
+  ...(outlined && {
     border: `1px solid ${theme.palette.primary.dark}`,
-  },
-  filled: {
+  }),
+  ...(filled && {
     '&:hover': {
       backgroundColor: theme.palette.primary.dark,
     },
     backgroundColor: theme.palette.primary.dark,
-  },
-  highlighted: {
-    backgroundColor: theme.palette.action.hover,
-  },
-  contrast: {
+  }),
+}));
+
+const StyledTypography = styled(Typography)<{contrast?:boolean;}>(({ theme, contrast }) => ({
+  lineHeight: 1.6,
+  ...(contrast && {
     color: theme.palette.primary.contrastText,
-  },
+  }),
 }));
 
 interface DayProps {
@@ -67,41 +72,29 @@ const Day: React.FunctionComponent<DayProps> = ({
   onClick,
   onHover,
   value,
-}: DayProps) => {
-  const classes = useStyles();
-
-  return (
-    <div
-      className={combine(
-        classes.buttonContainer,
-        startOfRange && classes.leftBorderRadius,
-        endOfRange && classes.rightBorderRadius,
-        !disabled && highlighted && classes.highlighted,
-      )}
+}: DayProps) => (
+  <Root
+    leftBorderRadius={startOfRange}
+    rightBorderRadius={endOfRange}
+    highlighted={!disabled && highlighted}
+  >
+    <StyledIconButton
+      outlined={!disabled && outlined}
+      filled={!disabled && filled}
+      disabled={disabled}
+      onClick={onClick}
+      onMouseOver={onHover}
+      size="large"
     >
-      <IconButton
-        className={combine(
-          classes.button,
-          !disabled && outlined && classes.outlined,
-          !disabled && filled && classes.filled,
-        )}
-        disabled={disabled}
-        onClick={onClick}
-        onMouseOver={onHover}
+      <StyledTypography
+        color={!disabled ? 'textPrimary' : 'textSecondary'}
+        contrast={!disabled && filled}
+        variant="body2"
       >
-        <Typography
-          color={!disabled ? 'textPrimary' : 'textSecondary'}
-          className={combine(
-            classes.buttonText,
-            !disabled && filled && classes.contrast,
-          )}
-          variant="body2"
-        >
-          {value}
-        </Typography>
-      </IconButton>
-    </div>
-  );
-};
+        {value}
+      </StyledTypography>
+    </StyledIconButton>
+  </Root>
+);
 
 export default Day;

package/src/components/DefinedRanges.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, ListItemText } from '@material-ui/core';
+import { List, ListItem, ListItemText } from '@mui/material';
 import { isSameDay } from 'date-fns';
 
 // eslint-disable-next-line no-unused-vars

package/src/components/Header.tsx

@@ -1,27 +1,34 @@
 /* eslint-disable radix */
 
 import {
-  Grid,
-  makeStyles,
-  IconButton,
-  Select,
-  MenuItem,
-} from '@material-ui/core';
+  Grid, IconButton, MenuItem,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+// eslint-disable-next-line no-unused-vars
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import React from 'react';
-import ChevronLeft from '@material-ui/icons/ChevronLeft';
-import ChevronRight from '@material-ui/icons/ChevronRight';
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+import ChevronRight from '@mui/icons-material/ChevronRight';
 import {
   setMonth,
   getMonth,
   setYear,
   getYear,
 } from 'date-fns';
 
-const useStyles = makeStyles(() => ({
-  iconContainer: {
+const PREFIX = 'Header';
+
+const classes = {
+  iconContainer: `${PREFIX}-iconContainer`,
+  icon: `${PREFIX}-icon`,
+};
+
+const StyledGrid = styled(Grid)(() => ({
+  [`& .${classes.iconContainer}`]: {
     padding: 5,
   },
-  icon: {
+
+  [`& .${classes.icon}`]: {
     padding: 10,
     '&:hover': {
       background: 'none',
@@ -68,29 +75,29 @@ const Header: React.FunctionComponent<HeaderProps> = ({
   onClickNext,
   onClickPrevious,
 }: HeaderProps) => {
-  const classes = useStyles();
-
-  const handleMonthChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setDate(setMonth(date, parseInt(event.target.value)));
+  const handleMonthChange = (event: SelectChangeEvent<number>) => {
+    setDate(setMonth(date, parseInt(event.target.value.toString())));
   };
 
-  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setDate(setYear(date, parseInt(event.target.value)));
+  const handleYearChange = (event: SelectChangeEvent<number>) => {
+    setDate(setYear(date, parseInt(event.target.value.toString())));
   };
 
   return (
-    <Grid container justifyContent="space-between" alignItems="center">
+    <StyledGrid container justifyContent="space-between" alignItems="center">
       <Grid item className={classes.iconContainer}>
         <IconButton
           className={classes.icon}
           disabled={prevDisabled}
           onClick={onClickPrevious}
+          size="large"
         >
           <ChevronLeft color={prevDisabled ? 'disabled' : 'action'} />
         </IconButton>
       </Grid>
       <Grid item>
         <Select
+          variant="standard"
           value={getMonth(date)}
           onChange={handleMonthChange}
           MenuProps={{ disablePortal: true }}
@@ -105,6 +112,7 @@ const Header: React.FunctionComponent<HeaderProps> = ({
 
       <Grid item>
         <Select
+          variant="standard"
           value={getYear(date)}
           onChange={handleYearChange}
           MenuProps={{ disablePortal: true }}
@@ -119,11 +127,16 @@ const Header: React.FunctionComponent<HeaderProps> = ({
         {/* <Typography>{format(date, "MMMM YYYY")}</Typography> */}
       </Grid>
       <Grid item className={classes.iconContainer}>
-        <IconButton className={classes.icon} disabled={nextDisabled} onClick={onClickNext}>
+        <IconButton
+          className={classes.icon}
+          disabled={nextDisabled}
+          onClick={onClickNext}
+          size="large"
+        >
           <ChevronRight color={nextDisabled ? 'disabled' : 'action'} />
         </IconButton>
       </Grid>
-    </Grid>
+    </StyledGrid>
   );
 };