[core] Extend StrictMode compatiblity

packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js

@@ -30,7 +30,7 @@ describe('<SpeedDial />', () => {
   }
 
   before(() => {
-    // StrictModeViolation: uses ButtonBase
+    // StrictModeViolation: uses #simulate
     mount = createMount({ strict: false });
     classes = getClasses(
       <SpeedDial {...defaultProps} icon={icon}>

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js

@@ -17,7 +17,7 @@ describe('<SpeedDialAction />', () => {
   };
 
   before(() => {
-    // StrictModeViolation: uses ButtonBase
+    // StrictModeViolation: uses #simulate
     mount = createMount({ strict: false });
     classes = getClasses(<SpeedDialAction {...defaultProps} />);
   });

packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js

@@ -17,7 +17,7 @@ describe('<ToggleButton />', () => {
   let classes;
 
   before(() => {
-    // StrictModeViolation: uses ButtonBase
+    // StrictModeViolation: uses #simulate
     mount = createMount({ strict: false });
     render = createRender();
     classes = getClasses(<ToggleButton value="classes">Hello World</ToggleButton>);

packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js

@@ -11,8 +11,7 @@ describe('<ToggleButtonGroup />', () => {
   let classes;
 
   before(() => {
-    // StrictModeViolation: uses ButtonBase
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(
       <ToggleButtonGroup>
         <ToggleButton value="hello" />

packages/material-ui/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.2.0",
+    "@material-ui/react-transition-group": "^4.2.0",
     "@material-ui/styles": "^4.1.1",
     "@material-ui/system": "^4.2.0",
     "@material-ui/types": "^4.1.0",
@@ -53,7 +54,6 @@
     "popper.js": "^1.14.1",
     "prop-types": "^15.7.2",
     "react-event-listener": "^0.6.6",
-    "react-transition-group": "^4.0.0",
     "warning": "^4.0.1"
   },
   "sideEffects": false,

packages/material-ui/src/Backdrop/Backdrop.test.js

@@ -1,18 +1,14 @@
 import React from 'react';
-import { assert } from 'chai';
-import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import Backdrop from './Backdrop';
 
 describe('<Backdrop />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
-    // StrictModeViolation: uses Fade
-    mount = createMount({ strict: false });
-    shallow = createShallow({ dive: true });
+    mount = createMount({ strict: true });
     classes = getClasses(<Backdrop open />);
   });
 
@@ -27,10 +23,4 @@ describe('<Backdrop />', () => {
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
   }));
-
-  it('should render a backdrop div', () => {
-    const wrapper = shallow(<Backdrop open className="woofBackdrop" />);
-    assert.strictEqual(wrapper.childAt(0).hasClass('woofBackdrop'), true);
-    assert.strictEqual(wrapper.childAt(0).hasClass(classes.root), true);
-  });
 });

packages/material-ui/src/BottomNavigation/BottomNavigation.test.js

@@ -20,8 +20,7 @@ describe('<BottomNavigation />', () => {
         <BottomNavigationAction icon={icon} />
       </BottomNavigation>,
     );
-    // StrictModeViolation: uses BottomNavigationAction
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
   });
 
   after(() => {

packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js

@@ -13,7 +13,7 @@ describe('<BottomNavigationAction />', () => {
   const icon = <Icon>restore</Icon>;
 
   before(() => {
-    // StrictModeViolation: uses ButtonBase
+    // StrictModeViolation: uses #StrictMode
     mount = createMount({ strict: false });
     classes = getClasses(<BottomNavigationAction />);
   });

packages/material-ui/src/ButtonBase/ButtonBase.test.js

@@ -29,7 +29,7 @@ describe('<ButtonBase />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true, disableLifecycleMethods: true });
-    // StrictModeViolation: uses TouchRipple
+    // StrictModeViolation: uses simulate
     mount = createMount({ strict: false });
     classes = getClasses(<ButtonBase />);
   });

packages/material-ui/src/ButtonBase/Ripple.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 
 /**
  * @ignore - internal component.
@@ -40,9 +40,16 @@ function Ripple(props) {
     [classes.childPulsate]: pulsate,
   });
 
+  const rippleRef = React.useRef();
+
   return (
-    <Transition onEnter={handleEnter} onExit={handleExit} {...other}>
-      <span className={rippleClassName} style={rippleStyles}>
+    <Transition
+      onEnter={handleEnter}
+      onExit={handleExit}
+      {...other}
+      findDOMNode={() => rippleRef.current}
+    >
+      <span className={rippleClassName} ref={rippleRef} style={rippleStyles}>
         <span className={childClassName} />
       </span>
     </Transition>

packages/material-ui/src/ButtonBase/TouchRipple.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TransitionGroup } from 'react-transition-group';
+import { TransitionGroup } from '@material-ui/react-transition-group';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Ripple from './Ripple';

packages/material-ui/src/Checkbox/Checkbox.test.js

@@ -11,8 +11,7 @@ describe('<Checkbox />', () => {
 
   before(() => {
     classes = getClasses(<Checkbox />);
-    // StrictModeViolation: uses IconButton
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
   });
 
   after(() => {

packages/material-ui/src/Collapse/Collapse.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
 import { getTransitionProps } from '../transitions/utils';
+import { useForkRef } from '../utils/reactHelpers';
 
 export const styles = theme => ({
   /* Styles applied to the container element. */
@@ -149,6 +150,9 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     }
   };
 
+  const ownRef = React.useRef();
+  const handleRef = useForkRef(ownRef, ref);
+
   return (
     <Transition
       in={inProp}
@@ -160,6 +164,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
       addEndListener={addEndListener}
       timeout={timeout === 'auto' ? null : timeout}
       {...other}
+      findDOMNode={() => ownRef.current}
     >
       {(state, childProps) => (
         <Component
@@ -175,7 +180,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
             minHeight: collapsedHeight,
             ...style,
           }}
-          ref={ref}
+          ref={handleRef}
           {...childProps}
         >
           <div className={classes.wrapper} ref={wrapperRef}>

packages/material-ui/src/Collapse/Collapse.test.js

@@ -5,7 +5,7 @@ import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
 import Collapse from './Collapse';
 import { createMuiTheme } from '@material-ui/core/styles';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 
 describe('<Collapse />', () => {
   let mount;
@@ -16,8 +16,7 @@ describe('<Collapse />', () => {
   };
 
   before(() => {
-    // StrictModeViolation: uses react-transition-group
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(<Collapse {...defaultProps} />);
   });
 

packages/material-ui/src/Dialog/Dialog.test.js

@@ -26,8 +26,7 @@ describe('<Dialog />', () => {
   };
 
   before(() => {
-    // StrictModeViolation: uses Fade
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(<Dialog {...defaultProps}>foo</Dialog>);
   });
 

packages/material-ui/src/Drawer/Drawer.test.js

@@ -13,8 +13,7 @@ describe('<Drawer />', () => {
   let classes;
 
   before(() => {
-    // StrictModeViolation: uses Slide
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(
       <Drawer>
         <div />

packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js

@@ -16,8 +16,7 @@ describe('<ExpansionPanel />', () => {
   const minimalChildren = [<ExpansionPanelSummary key="header" />];
 
   before(() => {
-    // StrictModeViolation: uses Collapse
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(<ExpansionPanel>{minimalChildren}</ExpansionPanel>);
   });
 

packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js

@@ -15,7 +15,7 @@ describe('<ExpansionPanelSummary />', () => {
   }
 
   before(() => {
-    // StrictModeViolation: uses ButtonBase
+    // StrictModeViolation: uses #simulate
     mount = createMount({ strict: false });
     classes = getClasses(<ExpansionPanelSummary />);
   });

packages/material-ui/src/Fade/Fade.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 import { duration } from '../styles/transitions';
 import withTheme from '../styles/withTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
@@ -35,7 +35,6 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     timeout = defaultTimeout,
     ...other
   } = props;
-  const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
@@ -69,6 +68,10 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     }
   };
 
+  const ownRef = React.useRef();
+  const userRef = useForkRef(children.ref, ref);
+  const handleRef = useForkRef(ownRef, userRef);
+
   return (
     <Transition
       appear
@@ -77,6 +80,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
       onExit={handleExit}
       timeout={timeout}
       {...other}
+      findDOMNode={() => ownRef.current}
     >
       {(state, childProps) => {
         return React.cloneElement(children, {

packages/material-ui/src/Fade/Fade.test.js

@@ -4,7 +4,7 @@ import { spy, useFakeTimers } from 'sinon';
 import { createMount } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import Fade from './Fade';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 
 describe('<Fade />', () => {
   let mount;
@@ -15,8 +15,7 @@ describe('<Fade />', () => {
   };
 
   before(() => {
-    // StrictModeViolation: uses react-transition-group
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
   });
 
   after(() => {

packages/material-ui/src/FormControlLabel/FormControlLabel.test.js

@@ -12,8 +12,7 @@ describe('<FormControlLabel />', () => {
   let classes;
 
   before(() => {
-    // StrictModeViolation: uses Checkbox in test
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(<FormControlLabel label="Pizza" control={<div />} />);
   });
 

packages/material-ui/src/Grow/Grow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 import withTheme from '../styles/withTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { useForkRef } from '../utils/reactHelpers';
@@ -30,7 +30,6 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const { children, in: inProp, onEnter, onExit, style, theme, timeout = 'auto', ...other } = props;
   const timer = React.useRef();
   const autoTimeout = React.useRef();
-  const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
@@ -112,6 +111,10 @@ const Grow = React.forwardRef(function Grow(props, ref) {
     };
   }, []);
 
+  const ownRef = React.useRef();
+  const userRef = useForkRef(children.ref, ref);
+  const handleRef = useForkRef(userRef, ownRef);
+
   return (
     <Transition
       appear
@@ -121,6 +124,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
       addEndListener={addEndListener}
       timeout={timeout === 'auto' ? null : timeout}
       {...other}
+      findDOMNode={() => ownRef.current}
     >
       {(state, childProps) => {
         return React.cloneElement(children, {

packages/material-ui/src/Grow/Grow.test.js

@@ -5,7 +5,7 @@ import { createMount } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import Grow from './Grow';
 import { createMuiTheme } from '@material-ui/core/styles';
-import { Transition } from 'react-transition-group';
+import { Transition } from '@material-ui/react-transition-group';
 
 describe('<Grow />', () => {
   let mount;
@@ -15,8 +15,7 @@ describe('<Grow />', () => {
   };
 
   before(() => {
-    // StrictModeViolation: uses react-transition-group
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
   });
 
   after(() => {

packages/material-ui/src/IconButton/IconButton.test.js

@@ -20,8 +20,7 @@ describe('<IconButton />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
-    // StrictModeViolation: uses ButtonBase
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
     classes = getClasses(<IconButton />);
   });
 

packages/material-ui/src/ListItem/ListItem.test.js

@@ -20,8 +20,7 @@ describe('<ListItem />', () => {
 
   before(() => {
     classes = getClasses(<ListItem />);
-    // StrictModeViolation: uses ButtonBase
-    mount = createMount({ strict: false });
+    mount = createMount({ strict: true });
   });
 
   after(() => {