Upgrade to MUI v5.0.0

.size-snapshot.json

@@ -17,5 +17,24 @@
         "code": 21871
       }
     }
+  },
+  "dist\\index.js": {
+    "bundled": 58865,
+    "minified": 26341,
+    "gzipped": 6099
+  },
+  "dist\\index.es.js": {
+    "bundled": 57693,
+    "minified": 25342,
+    "gzipped": 5978,
+    "treeshaked": {
+      "rollup": {
+        "code": 11293,
+        "import_statements": 1493
+      },
+      "webpack": {
+        "code": 22356
+      }
+    }
   }
 }

README.md

@@ -31,6 +31,7 @@ yarn add material-ui-dropzone
 
 | version | React            | Material-UI    |
 | ------- | ---------------- | -------------- |
+| `4.x`   | `17.0+`          | `5.x`          |
 | `3.x`   | `16.8+`          | `4.x`          |
 | `2.x`   | `15.x` or `16.x` | `3.x` or `4.x` |
 
@@ -96,7 +97,7 @@ This component provides the DropzoneArea inside of a MaterialUI Dialog.
 ```jsx static
 import React, { Component } from 'react'
 import {DropzoneDialog} from 'material-ui-dropzone'
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 export default class DropzoneDialogExample extends Component {
     constructor(props) {

docs/support.md

@@ -3,5 +3,6 @@
 
 | version | React            | Material-UI    |
 | ------- | ---------------- | -------------- |
+| `4.x`   | `17.0+`          | `5.x`          |
 | `3.x`   | `16.8+`          | `4.x`          |
 | `2.x`   | `15.x` or `16.x` | `3.x` or `4.x` |

docs/theming.md

@@ -41,7 +41,7 @@
 ### Sample theme override
 
 ```jsx
-import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import { MuiThemeProvider, createMuiTheme } from "@mui/material/styles";
 
 import DropzoneArea from '../src/components/DropzoneArea';
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-dropzone",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "A Material-UI file-upload dropzone",
   "license": "MIT",
   "author": "Yuval",
@@ -42,13 +42,14 @@
   "dependencies": {
     "@babel/runtime": "^7.4.4",
     "clsx": "^1.0.2",
-    "react-dropzone": "^10.2.1"
-  },
-  "peerDependencies": {
-    "@material-ui/core": "^4.0.0",
-    "@material-ui/icons": "^4.0.0",
+    "react-dropzone": "^10.2.1",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/material": "^5.0.2",
+    "@mui/styles": "^5.0.1",
     "prop-types": "^15.7.2",
-    "react": ">= 16.8",
+    "react": ">= 17.0.0",
     "react-dom": ">= 16.8"
   },
   "devDependencies": {
@@ -60,8 +61,6 @@
     "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
-    "@material-ui/core": "^4.9.7",
-    "@material-ui/icons": "^4.9.1",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "babel-eslint": "^10.1.0",
@@ -73,8 +72,6 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-react": "^7.19.0",
     "gh-pages": "^1.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "react-styleguidist": "^11.0.4",
     "rollup": "^1.32.0",
     "rollup-plugin-babel": "^4.4.0",

src/components/DropzoneArea.md

@@ -32,7 +32,7 @@ Demonstration of how to customize the preview icon for:
 * Word Documents
 
 ```jsx
-import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@material-ui/icons';
+import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@mui/icons-material';
 
 const handlePreviewIcon = (fileObject, classes) => {
   const {type} = fileObject.file
@@ -78,7 +78,7 @@ const file = new File(["foo"], "foo.txt", {
 Chips use the Grid system as well, so you can customize the way they appears and benefit from the Material-UI grid customizations
 
 ```jsx
-import { createStyles, makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(theme => createStyles({
   previewChip: {

src/components/DropzoneAreaBase.js

@@ -1,8 +1,8 @@
-import Snackbar from '@material-ui/core/Snackbar';
-import Typography from '@material-ui/core/Typography';
-import {withStyles} from '@material-ui/core/styles';
-import AttachFileIcon from '@material-ui/icons/AttachFile';
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import Snackbar from '@mui/material/Snackbar';
+import Typography from '@mui/material/Typography';
+import withStyles from '@mui/styles/withStyles';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -11,7 +11,6 @@ import Dropzone from 'react-dropzone';
 import {convertBytesToMbsOrKbs, isImage, readFile} from '../helpers';
 import PreviewList from './PreviewList';
 import SnackbarContentWrapper from './SnackbarContentWrapper';
-
 const styles = ({palette, shape, spacing}) => ({
     '@keyframes progress': {
         '0%': {
@@ -25,38 +24,38 @@ const styles = ({palette, shape, spacing}) => ({
         position: 'relative',
         width: '100%',
         minHeight: '250px',
-        backgroundColor: palette.background.paper,
+        backgroundColor: palette?.background.paper,
         border: 'dashed',
-        borderColor: palette.divider,
-        borderRadius: shape.borderRadius,
+        borderColor: palette?.divider,
+        borderRadius: shape?.borderRadius,
         boxSizing: 'border-box',
         cursor: 'pointer',
         overflow: 'hidden',
     },
     active: {
         animation: '$progress 2s linear infinite !important',
         // eslint-disable-next-line max-len
-        backgroundImage: `repeating-linear-gradient(-45deg, ${palette.background.paper}, ${palette.background.paper} 25px, ${palette.divider} 25px, ${palette.divider} 50px)`,
+        backgroundImage: `repeating-linear-gradient(-45deg, ${palette?.background.paper}, ${palette?.background.paper} 25px, ${palette?.divider} 25px, ${palette?.divider} 50px)`,
         backgroundSize: '150% 100%',
         border: 'solid',
-        borderColor: palette.primary.light,
+        borderColor: palette?.primary.light,
     },
     invalid: {
         // eslint-disable-next-line max-len
-        backgroundImage: `repeating-linear-gradient(-45deg, ${palette.error.light}, ${palette.error.light} 25px, ${palette.error.dark} 25px, ${palette.error.dark} 50px)`,
-        borderColor: palette.error.main,
+        backgroundImage: `repeating-linear-gradient(-45deg, ${palette?.error.light}, ${palette?.error.light} 25px, ${palette?.error.dark} 25px, ${palette?.error.dark} 50px)`,
+        borderColor: palette?.error.main,
     },
     textContainer: {
         textAlign: 'center',
     },
     text: {
-        marginBottom: spacing(3),
-        marginTop: spacing(3),
+        marginBottom: spacing?.(3),
+        marginTop: spacing?.(3),
     },
     icon: {
         width: 51,
         height: 51,
-        color: palette.text.primary,
+        color: palette?.text.primary,
     },
 });
 
@@ -403,7 +402,7 @@ DropzoneAreaBase.propTypes = {
     /**
      * Props to pass to the Material-UI Chip components.<br/>Requires `useChipsForPreview` prop to be `true`.
      *
-     * @see See [Material-UI Chip](https://material-ui.com/api/chip/#props) for available values.
+     * @see See [Material-UI Chip](https://mui.com/api/chip/#props) for available values.
      */
     previewChipProps: PropTypes.object,
     /**
@@ -415,7 +414,7 @@ DropzoneAreaBase.propTypes = {
      * Props to pass to the Material-UI Grid components.<br/>
      * Should be in the form {container: GridProps, item: GridProps}.
      *
-     * @see See [Material-UI Grid](https://material-ui.com/api/grid/#props) for available GridProps values.
+     * @see See [Material-UI Grid](https://mui.com/api/grid/#props) for available GridProps values.
      */
     previewGridProps: PropTypes.object,
     /** The label for the file preview section. */
@@ -437,7 +436,7 @@ DropzoneAreaBase.propTypes = {
     /**
      * Props to pass to the Material-UI Snackbar components.<br/>Requires `showAlerts` prop to be `true`.
      *
-     * @see See [Material-UI Snackbar](https://material-ui.com/api/snackbar/#props) for available values.
+     * @see See [Material-UI Snackbar](https://mui.com/api/snackbar/#props) for available values.
      */
     alertSnackbarProps: PropTypes.object,
     /**

src/components/DropzoneAreaBase.md

@@ -28,7 +28,7 @@ import { DropzoneAreaBase } from 'material-ui-dropzone';
 ### Custom Dropzone Icon
 
 ```jsx
-import { AttachFile } from '@material-ui/icons';
+import { AttachFile } from '@mui/icons-material';
 
 <DropzoneAreaBase
   Icon={AttachFile}
@@ -49,7 +49,7 @@ Demonstration of how to customize the preview icon for:
 
 ```jsx
 import React, { useState } from 'react';
-import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@material-ui/icons';
+import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@mui/icons-material';
 
 const handlePreviewIcon = (fileObject, classes) => {
   const {type} = fileObject.file

src/components/DropzoneDialog.md

@@ -7,7 +7,7 @@ import { DropzoneDialog } from 'material-ui-dropzone';
 ### Basic usage
 
 ```jsx
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 const [open, setOpen] = React.useState(false);
 

src/components/DropzoneDialogBase.js

@@ -1,8 +1,8 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 
@@ -123,7 +123,7 @@ DropzoneDialogBase.propTypes = {
     ]),
     /**
      * Props to pass to the Material-UI Dialog components.
-     * @see See [Material-UI Dialog](https://material-ui.com/api/dialog/#props) for available values.
+     * @see See [Material-UI Dialog](https://mui.com/api/dialog/#props) for available values.
      */
     dialogProps: PropTypes.object,
     /**

src/components/DropzoneDialogBase.md

@@ -7,9 +7,9 @@ import { DropzoneDialogBase } from 'material-ui-dropzone';
 ### Basic usage
 
 ```jsx
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 
 const [open, setOpen] = React.useState(false);
 const [fileObjects, setFileObjects] = React.useState([]);

src/components/PreviewList.js

@@ -1,9 +1,9 @@
-import Chip from '@material-ui/core/Chip';
-import Fab from '@material-ui/core/Fab';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import {withStyles} from '@material-ui/core/styles';
-import DeleteIcon from '@material-ui/icons/Delete';
+import Chip from '@mui/material/Chip';
+import Fab from '@mui/material/Fab';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import withStyles from '@mui/styles/withStyles';
+import DeleteIcon from '@mui/icons-material/Delete';
 import clsx from 'clsx';
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -25,20 +25,20 @@ const styles = ({palette, shape, spacing}) => ({
         height: 100,
         width: 'initial',
         maxWidth: '100%',
-        color: palette.text.primary,
+        color: palette?.text.primary,
         transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
         boxSizing: 'border-box',
         boxShadow: 'rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px',
-        borderRadius: shape.borderRadius,
+        borderRadius: shape?.borderRadius,
         zIndex: 5,
         opacity: 1,
     },
     removeButton: {
         transition: '.5s ease',
         position: 'absolute',
         opacity: 0,
-        top: spacing(-1),
-        right: spacing(-1),
+        top: spacing?.(-1),
+        right: spacing?.(-1),
         width: 40,
         height: 40,
         '&:focus': {