Support MUI v5 alpha (#333)

* Add mat snackbar

* Add snackbar component

* Allow any

* Merge provider props. Remove Content props

* Minor

* Simpler content props

* Move helper functions to their own file

* Revert some changes

* Move transition component one level up

* Move defaults to constants file

* Minor

* Dont spread callbacks

* Minor

* sort out transition component, duration and props properties

* Update tsdocs

* Use transformer for container anchor origin

* Add comment

* Update typedoc

* Attempt to stop spreading props

* TSDX transpileOnly

* Credit mui snackbar

* Update docs

* Update changelog

.eslintrc

@@ -66,6 +66,8 @@
             },
             "rules": {
                 "@typescript-eslint/ban-ts-ignore": "off",
+                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/no-unused-vars": [
                     "warn",
                     {

CHANGELOG.md

@@ -1,6 +1,6 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
-### `[email protected].2`
+### `[email protected].3`
 ###### to be published
 * **@pctestjfarz**: Add swipe to dismiss feature [#138](https://github.com/iamhosseindhv/notistack/issues/138) 
 * **@molynerd**: Add support to update content of snackbar in place [#50](https://github.com/iamhosseindhv/notistack/issues/50)
@@ -9,6 +9,14 @@ Thanks to all contributers who improved notistack by opening an issue/PR.
 <br />
 
 
+### `[email protected]`
+###### November 26, 2020
+* Add support MUI v5 [#333](https://github.com/iamhosseindhv/notistack/pull/333) 
+
+
+<br />
+
+
 ### `[email protected]`
 ###### October 6, 2020
 * **@thierrysantos**: EnqueueSnackbar supports snackbar with key zero [#318](https://github.com/iamhosseindhv/notistack/pull/318)

package.json

@@ -17,7 +17,7 @@
         "type": "git"
     },
     "scripts": {
-        "build": "tsdx build --entry ./src/index.js",
+        "build": "tsdx build --transpileOnly --entry ./src/index.js",
         "prebuild": "npm run docs",
         "prepublishOnly": "npm run build",
         "docs": "rimraf typedoc.json && typedoc --tsconfig",

src/SnackbarItem/Snackbar.js

@@ -0,0 +1,113 @@
+/**
+ * @link https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Snackbar/Snackbar.js
+ */
+import * as React from 'react';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import { REASONS } from '../utils/constants';
+import useEventCallback from '../utils/useEventCallback';
+
+const Snackbar = React.forwardRef((props, ref) => {
+    const {
+        children,
+        autoHideDuration,
+        ClickAwayListenerProps,
+        disableWindowBlurListener = false,
+        onClose,
+        onMouseEnter,
+        onMouseLeave,
+        open,
+        resumeHideDuration,
+        ...other
+    } = props;
+
+    const timerAutoHide = React.useRef();
+
+    const handleClose = useEventCallback((...args) => {
+        if (onClose) {
+            onClose(...args);
+        }
+    });
+
+    const setAutoHideTimer = useEventCallback((autoHideDurationParam) => {
+        if (!onClose || autoHideDurationParam == null) {
+            return;
+        }
+
+        clearTimeout(timerAutoHide.current);
+        timerAutoHide.current = setTimeout(() => {
+            handleClose(null, REASONS.TIMEOUT);
+        }, autoHideDurationParam);
+    });
+
+    React.useEffect(() => {
+        if (open) {
+            setAutoHideTimer(autoHideDuration);
+        }
+
+        return () => {
+            clearTimeout(timerAutoHide.current);
+        };
+    }, [open, autoHideDuration, setAutoHideTimer]);
+
+    /**
+     * Pause the timer when the user is interacting with the Snackbar
+     * or when the user hide the window.
+     */
+    const handlePause = () => {
+        clearTimeout(timerAutoHide.current);
+    };
+
+    /**
+     * Restart the timer when the user is no longer interacting with the Snackbar
+     * or when the window is shown back.
+     */
+    const handleResume = React.useCallback(() => {
+        if (autoHideDuration != null) {
+            setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+        }
+    }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+
+    const handleMouseEnter = (event) => {
+        if (onMouseEnter) {
+            onMouseEnter(event);
+        }
+        handlePause();
+    };
+
+    const handleMouseLeave = (event) => {
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+        handleResume();
+    };
+
+    const handleClickAway = (event) => {
+        if (onClose) {
+            onClose(event, REASONS.CLICKAWAY);
+        }
+    };
+
+    React.useEffect(() => {
+        if (!disableWindowBlurListener && open) {
+            window.addEventListener('focus', handleResume);
+            window.addEventListener('blur', handlePause);
+
+            return () => {
+                window.removeEventListener('focus', handleResume);
+                window.removeEventListener('blur', handlePause);
+            };
+        }
+
+        return undefined;
+    }, [disableWindowBlurListener, handleResume, open]);
+
+    return (
+        <ClickAwayListener onClickAway={handleClickAway} {...ClickAwayListenerProps}>
+            <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={ref} {...other}>
+                {children}
+            </div>
+        </ClickAwayListener>
+    );
+});
+
+export default Snackbar;