Upgrade to MUI v5.0.0

[cacpgomes]

Description

Upgrade to use material-ui v5.0.0.

Type of change

The new peer dependencies are: @mui/material, ^5.0.2 @emotion/react, ^11.4.1, @emotion/styled, ^11.3.0, @mui/icons-material, ^5.0.1, @mui/styles, ^5.0.1,

How Has This Been Tested

• [ ] Test A
• [ ] Test B

Test Configuration:

• Browser:

Checklist

• [ ] My code follows the style guidelines of this project
• [ ] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules

[lifeeric]

hello @cacpgomes, A huge thanks for the valuable contribution, it means alot to us! unfortunately, when I tried to reproduce it I got a few errors. you need to install the @emotion/react and @emotion/styled as the main styling packages of the mui-5. The library is not working when you build it the same as mine. I also migrated yesterday and I'm getting the same issue, wondering if you can help us fix it.

best regards

[cacpgomes]

Hello @lifeeric . I'll check today the errors reported and I'll pull a new version. Regards,

[lifeeric]

hello @cacpgomes. Thank you for your response! I've fixed the above issues. but now I'm getting other issues, when I drop the file to it, here is my code.

TypeError: Cannot read properties of null (reading 'scrollTop')

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `WithStyles(SnackbarContentWrapper)`.
    at SnackbarContentWrapper (webpack://react-mui-dropzone/./src/components/SnackbarContentWrapper.js?:72:23)
    at WithStyles (webpack://react-mui-dropzone/./node_modules/@mui/styles/withStyles/withStyles.js?:72:21)
    at Transition (webpack://react-mui-dropzone/./node_modules/react-transition-group/esm/Transition.js?:130:30)
    at Grow (webpack://react-mui-dropzone/./node_modules/@mui/material/Grow/Grow.js?:50:5)
    at div
    at eval (webpack://react-mui-dropzone/./node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js?:54:66)
    at ClickAwayListener (webpack://react-mui-dropzone/./node_modules/@mui/material/ClickAwayListener/ClickAwayListener.js?:46:5)
    at Snackbar (webpack://react-mui-dropzone/./node_modules/@mui/material/Snackbar/Snackbar.js?:114:83)
    at DropzoneAreaBase (webpack://react-mui-dropzone/./src/components/DropzoneAreaBase.js?:141:86)
    at WithStyles (webpack://react-mui-dropzone/./node_modules/@mui/styles/withStyles/withStyles.js?:72:21)
    at DropzoneArea (webpack://react-mui-dropzone/./src/components/DropzoneArea.js?:73:86)
    at bound anonymous
    at Wrapper (webpack://react-mui-dropzone/./node_modules/react-styleguidist/lib/client/rsg-components/Wrapper/Wrapper.js?:44:23)
    at ReactExample (webpack://react-mui-dropzone/./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js?:51:23)

utils.js:6 Uncaught TypeError: Cannot read properties of null (reading 'scrollTop')
    at reflow (utils.js:6)
    at eval (Grow.js:89)
    at Object.eval [as onEnter] (Grow.js:82)
    at Transition.performEnter (Transition.js:280)
    at Transition.updateStatus (Transition.js:246)
    at Transition.componentDidMount (Transition.js:190)
    at commitLifeCycles (react-dom.development.js:20658)
    at commitLayoutEffects (react-dom.development.js:23421)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23146)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22985)
    at performSyncWorkOnRoot (react-dom.development.js:22324)
    at eval (react-dom.development.js:11327)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21888)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at DropzoneAreaBase.Component.setState (react.development.js:365)
    at _callee2$ (DropzoneAreaBase.js:228)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:294)
    at Generator.eval [as next] (runtime.js:119)
    at asyncGeneratorStep (asyncToGenerator.js:7)
    at _next (asyncToGenerator.js:29)

index.js:1 The above error occurred in the <Transition> component:

    at Transition (webpack://react-mui-dropzone/./node_modules/react-transition-group/esm/Transition.js?:130:30)
    at Grow (webpack://react-mui-dropzone/./node_modules/@mui/material/Grow/Grow.js?:50:5)
    at div
    at eval (webpack://react-mui-dropzone/./node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js?:54:66)
    at ClickAwayListener (webpack://react-mui-dropzone/./node_modules/@mui/material/ClickAwayListener/ClickAwayListener.js?:46:5)
    at Snackbar (webpack://react-mui-dropzone/./node_modules/@mui/material/Snackbar/Snackbar.js?:114:83)
    at DropzoneAreaBase (webpack://react-mui-dropzone/./src/components/DropzoneAreaBase.js?:141:86)
    at WithStyles (webpack://react-mui-dropzone/./node_modules/@mui/styles/withStyles/withStyles.js?:72:21)
    at DropzoneArea (webpack://react-mui-dropzone/./src/components/DropzoneArea.js?:73:86)
    at bound anonymous
    at Wrapper (webpack://react-mui-dropzone/./node_modules/react-styleguidist/lib/client/rsg-components/Wrapper/Wrapper.js?:44:23)
    at ReactExample (webpack://react-mui-dropzone/./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js?:51:23)

React will try to recreate this component tree from scratch using the error boundary you provided, Wrapper.

best regards

[cacpgomes]

Hello @lifeeric I rearranged dependencies at package.json in order to install it even if there's no mui package previous instaled, as well @emotion. I also prevent use on mui projectes that doesn't use theme - it previously crash because of it. The errors that you previously reported were already fixed in my previous commit. This is how I tested:

• create a create-react-app without any mui packages
• yarn add git://github.com/cacpgomes/material-ui-dropzone.git
• add DropzoneArea according basic example at https://yuvaleros.github.io/material-ui-dropzone /

Suggestion:

• create a new npm package called "mui-dropzone" for the new version to be compliant with the name adopted by the Material UI team

[lifeeric]

@cacpgomes Wow, that's absolutely mind-blowing. I was struggling with the error and never knew to fix it by adding forwardRef. how you managed to fixed?

You're the real hero, You saved my day, A huge Thanks to you!

[cacpgomes]

@lifeeric , many thanks for your comments. React it's tricky and it was not the first time I had problems with forwardRef. We have to understand how components pass its props to children and how to access them. I'm glad I could help. I'm now testing a project with this forked component with mui 5 and everything is ok.

[amireallyadev]

Would be nice to get this MR merged. 🥇 I am waiting for this one.

[lifeeric]

Hello @amireallyadev! the maintainer of this project looks very busy, but it may take some time to look into this. in the meantime, you can use this package which I've published with the help of @cacpgone for my project:

react-mui-dropzone

or mui-dropzone

Thank you!

[sah]

Seems we've duplicated effort. Might be nice to check this change and https://github.com/Yuvaleros/material-ui-dropzone/pull/327 against one another and pick the best from both.

[sureshHARDIYA]

@lifeeric possible for you to upgrade support for react 18 in react-mui-dropzone??

[lifeeric]

@sureshHARDIYA is there any issue in the library that requires the lib to be in react 18? thank you

[sureshHARDIYA]

@lifeeric I am using this library react-mu-dropzone. with the latest create-react-app, and it has react 18. I have already moved a lot functionalities and only this package has issues as it says react 17 as peer dependencies.

[lifeeric]

@sureshHARDIYA oh, got it! I am totally packed with tasks. however, I'll try to fix it next week! thank you

[sureshHARDIYA]

That would be nice. Thank you @lifeeric

https://github.com/Yuvaleros/material-ui-dropzone/pull/328#issuecomment-1222750478