[core] Revert strict mode compatible transition components

mui · Jun 24, 2019 · 985ca67 · 985ca67
1 parent 0bee9a7
commit 985ca67
Show file tree

Hide file tree

Showing 77 changed files with 134 additions and 125 deletions.
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js
@@ -30,7 +30,7 @@ describe('<SpeedDial />', () => {
   }
 
   before(() => {
-    // StrictModeViolation: uses #simulate
+    // StrictModeViolation: uses ButtonBase
     mount = createMount({ strict: false });
     classes = getClasses(
       <SpeedDial {...defaultProps} icon={icon}>

diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js
@@ -17,7 +17,7 @@ describe('<SpeedDialAction />', () => {
   };
 
   before(() => {
-    // StrictModeViolation: uses #simulate
+    // StrictModeViolation: uses ButtonBase
     mount = createMount({ strict: false });
     classes = getClasses(<SpeedDialAction {...defaultProps} />);
   });

diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js
@@ -17,7 +17,7 @@ describe('<ToggleButton />', () => {
   let classes;
 
   before(() => {
-    // StrictModeViolation: uses #simulate
+    // StrictModeViolation: uses ButtonBase
     mount = createMount({ strict: false });
     render = createRender();
     classes = getClasses(<ToggleButton value="classes">Hello World</ToggleButton>);

diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -11,7 +11,8 @@ describe('<ToggleButtonGroup />', () => {
   let classes;
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(
       <ToggleButtonGroup>
         <ToggleButton value="hello" />

diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -38,7 +38,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.2.0",
-    "@material-ui/react-transition-group": "^4.2.0",
     "@material-ui/styles": "^4.1.2",
     "@material-ui/system": "^4.3.0",
     "@material-ui/types": "^4.1.1",
@@ -54,6 +53,7 @@
     "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,

diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -1,14 +1,18 @@
 import React from 'react';
-import { createMount, getClasses } from '@material-ui/core/test-utils';
+import { assert } from 'chai';
+import { createMount, createShallow, 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(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses Fade
+    mount = createMount({ strict: false });
+    shallow = createShallow({ dive: true });
     classes = getClasses(<Backdrop open />);
   });
 
@@ -23,4 +27,10 @@ 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);
+  });
 });
diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js
@@ -20,7 +20,8 @@ describe('<BottomNavigation />', () => {
         <BottomNavigationAction icon={icon} />
       </BottomNavigation>,
     );
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses BottomNavigationAction
+    mount = createMount({ strict: false });
   });
 
   after(() => {

diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js
@@ -13,7 +13,7 @@ describe('<BottomNavigationAction />', () => {
   const icon = <Icon>restore</Icon>;
 
   before(() => {
-    // StrictModeViolation: uses #StrictMode
+    // StrictModeViolation: uses ButtonBase
     mount = createMount({ strict: false });
     classes = getClasses(<BottomNavigationAction />);
   });

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -29,7 +29,7 @@ describe('<ButtonBase />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true, disableLifecycleMethods: true });
-    // StrictModeViolation: uses simulate
+    // StrictModeViolation: uses TouchRipple
     mount = createMount({ strict: false });
     classes = getClasses(<ButtonBase />);
   });

diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/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 '@material-ui/react-transition-group';
+import { Transition } from 'react-transition-group';
 
 /**
  * @ignore - internal component.
@@ -40,16 +40,9 @@ function Ripple(props) {
     [classes.childPulsate]: pulsate,
   });
 
-  const rippleRef = React.useRef();
-
   return (
-    <Transition
-      onEnter={handleEnter}
-      onExit={handleExit}
-      {...other}
-      findDOMNode={() => rippleRef.current}
-    >
-      <span className={rippleClassName} ref={rippleRef} style={rippleStyles}>
+    <Transition onEnter={handleEnter} onExit={handleExit} {...other}>
+      <span className={rippleClassName} style={rippleStyles}>
         <span className={childClassName} />
       </span>
     </Transition>

diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TransitionGroup } from '@material-ui/react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Ripple from './Ripple';

diff --git a/packages/material-ui/src/Checkbox/Checkbox.test.js b/packages/material-ui/src/Checkbox/Checkbox.test.js
@@ -11,7 +11,8 @@ describe('<Checkbox />', () => {
 
   before(() => {
     classes = getClasses(<Checkbox />);
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses IconButton
+    mount = createMount({ strict: false });
   });
 
   after(() => {

diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { Transition } from '@material-ui/react-transition-group';
+import { Transition } from '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. */
@@ -150,9 +149,6 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     }
   };
 
-  const ownRef = React.useRef();
-  const handleRef = useForkRef(ownRef, ref);
-
   return (
     <Transition
       in={inProp}
@@ -164,7 +160,6 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
       addEndListener={addEndListener}
       timeout={timeout === 'auto' ? null : timeout}
       {...other}
-      findDOMNode={() => ownRef.current}
     >
       {(state, childProps) => (
         <Component
@@ -180,7 +175,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
             minHeight: collapsedHeight,
             ...style,
           }}
-          ref={handleRef}
+          ref={ref}
           {...childProps}
         >
           <div className={classes.wrapper} ref={wrapperRef}>

diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/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 '@material-ui/react-transition-group';
+import { Transition } from 'react-transition-group';
 
 describe('<Collapse />', () => {
   let mount;
@@ -16,7 +16,8 @@ describe('<Collapse />', () => {
   };
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses react-transition-group
+    mount = createMount({ strict: false });
     classes = getClasses(<Collapse {...defaultProps} />);
   });
 

diff --git a/packages/material-ui/src/Dialog/Dialog.test.js b/packages/material-ui/src/Dialog/Dialog.test.js
@@ -26,7 +26,8 @@ describe('<Dialog />', () => {
   };
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses Fade
+    mount = createMount({ strict: false });
     classes = getClasses(<Dialog {...defaultProps}>foo</Dialog>);
   });
 

diff --git a/packages/material-ui/src/Drawer/Drawer.test.js b/packages/material-ui/src/Drawer/Drawer.test.js
@@ -13,7 +13,8 @@ describe('<Drawer />', () => {
   let classes;
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses Slide
+    mount = createMount({ strict: false });
     classes = getClasses(
       <Drawer>
         <div />

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
@@ -16,7 +16,8 @@ describe('<ExpansionPanel />', () => {
   const minimalChildren = [<ExpansionPanelSummary key="header" />];
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses Collapse
+    mount = createMount({ strict: false });
     classes = getClasses(<ExpansionPanel>{minimalChildren}</ExpansionPanel>);
   });
 

diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js
@@ -15,7 +15,7 @@ describe('<ExpansionPanelSummary />', () => {
   }
 
   before(() => {
-    // StrictModeViolation: uses #simulate
+    // StrictModeViolation: uses ButtonBase
     mount = createMount({ strict: false });
     classes = getClasses(<ExpansionPanelSummary />);
   });

diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Transition } from '@material-ui/react-transition-group';
+import { Transition } from 'react-transition-group';
 import { duration } from '../styles/transitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
@@ -35,6 +35,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     ...other
   } = props;
   const theme = useTheme();
+  const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
@@ -68,10 +69,6 @@ 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
@@ -80,7 +77,6 @@ const Fade = React.forwardRef(function Fade(props, ref) {
       onExit={handleExit}
       timeout={timeout}
       {...other}
-      findDOMNode={() => ownRef.current}
     >
       {(state, childProps) => {
         return React.cloneElement(children, {

diff --git a/packages/material-ui/src/Fade/Fade.test.js b/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 '@material-ui/react-transition-group';
+import { Transition } from 'react-transition-group';
 
 describe('<Fade />', () => {
   let mount;
@@ -15,7 +15,8 @@ describe('<Fade />', () => {
   };
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses react-transition-group
+    mount = createMount({ strict: false });
   });
 
   after(() => {

diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.test.js
@@ -12,7 +12,8 @@ describe('<FormControlLabel />', () => {
   let classes;
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses Checkbox in test
+    mount = createMount({ strict: false });
     classes = getClasses(<FormControlLabel label="Pizza" control={<div />} />);
   });
 

diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Transition } from '@material-ui/react-transition-group';
+import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { useForkRef } from '../utils/reactHelpers';
@@ -29,6 +29,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const { children, in: inProp, onEnter, onExit, style, timeout = 'auto', ...other } = props;
   const timer = React.useRef();
   const autoTimeout = React.useRef();
+  const handleRef = useForkRef(children.ref, ref);
   const theme = useTheme();
 
   const handleEnter = node => {
@@ -111,10 +112,6 @@ 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
@@ -124,7 +121,6 @@ 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, {

diff --git a/packages/material-ui/src/Grow/Grow.test.js b/packages/material-ui/src/Grow/Grow.test.js
@@ -5,8 +5,8 @@ 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 '@material-ui/react-transition-group';
 import { ThemeProvider } from '@material-ui/styles';
+import { Transition } from 'react-transition-group';
 import { useForkRef } from '../utils/reactHelpers';
 
 describe('<Grow />', () => {
@@ -17,7 +17,8 @@ describe('<Grow />', () => {
   };
 
   before(() => {
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses react-transition-group
+    mount = createMount({ strict: false });
   });
 
   after(() => {

diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js
@@ -20,7 +20,8 @@ describe('<IconButton />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(<IconButton />);
   });
 

diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js
@@ -20,7 +20,8 @@ describe('<ListItem />', () => {
 
   before(() => {
     classes = getClasses(<ListItem />);
-    mount = createMount({ strict: true });
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
   });
 
   after(() => {