[core] Add createMuiStrictModeTheme (#20523)

docs/src/modules/components/AppDrawerNavItem.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import ListItem from '@material-ui/core/ListItem';
 import Button from '@material-ui/core/Button';
-import Collapse from '@material-ui/core/Collapse';
+import { unstable_StrictModeCollapse as Collapse } from '@material-ui/core/Collapse';
 import Link from 'docs/src/modules/components/Link';
 
 const useStyles = makeStyles((theme) => ({

docs/src/modules/components/Demo.js

@@ -7,7 +7,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { withStyles, fade } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import Collapse from '@material-ui/core/Collapse';
+import { unstable_StrictModeCollapse as Collapse } from '@material-ui/core/Collapse';
 import NoSsr from '@material-ui/core/NoSsr';
 import EditIcon from '@material-ui/icons/Edit';
 import CodeIcon from '@material-ui/icons/Code';

docs/src/modules/components/DemoLanguages.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Fade from '@material-ui/core/Fade';
+import { unstable_StrictModeFade as Fade } from '@material-ui/core/Fade';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@material-ui/docs';

docs/src/modules/components/Notifications.js

@@ -8,7 +8,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
 import Popper from '@material-ui/core/Popper';
-import Grow from '@material-ui/core/Grow';
+import { unstable_StrictModeGrow as Grow } from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import List from '@material-ui/core/List';

docs/src/modules/components/ThemeContext.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   ThemeProvider as MuiThemeProvider,
-  createMuiTheme,
+  createMuiTheme as createLegacyModeTheme,
+  unstable_createMuiStrictModeTheme as createStrictModeTheme,
   darken,
 } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
@@ -97,6 +98,13 @@ if (process.env.NODE_ENV !== 'production') {
 
 const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
+let createMuiTheme;
+if (process.env.REACT_MODE === 'legacy') {
+  createMuiTheme = createLegacyModeTheme;
+} else {
+  createMuiTheme = createStrictModeTheme;
+}
+
 export function ThemeProvider(props) {
   const { children } = props;
 

packages/material-ui/package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
+    "@material-ui/react-transition-group": "^4.2.0",
     "@material-ui/styles": "^4.9.10",
     "@material-ui/system": "^4.9.10",
     "@material-ui/types": "^5.0.1",

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

@@ -34,11 +34,13 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
     invisible = false,
     open,
     transitionDuration,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Fade,
     ...other
   } = props;
 
   return (
-    <Fade in={open} timeout={transitionDuration} {...other}>
+    <TransitionComponent in={open} timeout={transitionDuration} {...other}>
       <div
         data-mui-test="Backdrop"
         className={clsx(
@@ -53,7 +55,7 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
       >
         {children}
       </div>
-    </Fade>
+    </TransitionComponent>
   );
 });
 

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

@@ -54,6 +54,8 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     onExiting,
     style,
     timeout = duration.standard,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
     ...other
   } = props;
   const theme = useTheme();
@@ -153,7 +155,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   };
 
   return (
-    <Transition
+    <TransitionComponent
       in={inProp}
       onEnter={handleEnter}
       onEntered={handleEntered}
@@ -186,7 +188,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
           </div>
         </Component>
       )}
-    </Transition>
+    </TransitionComponent>
   );
 });
 

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Transition } from '@material-ui/react-transition-group';
+import { useForkRef } from '../utils';
+import Collapse from './Collapse';
+
+/**
+ * @ignore - internal component.
+ */
+const StrictModeCollapse = React.forwardRef(function StrictModeCollapse(props, forwardedRef) {
+  const domRef = React.useRef(null);
+  const ref = useForkRef(domRef, forwardedRef);
+
+  return (
+    <Collapse
+      {...props}
+      findDOMNode={() => domRef.current}
+      ref={ref}
+      TransitionComponent={Transition}
+    />
+  );
+});
+
+export default StrictModeCollapse;

packages/material-ui/src/Collapse/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Collapse';
+export { default, default as unstable_StrictModeCollapse } from './Collapse';
 export * from './Collapse';

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

@@ -1 +1,3 @@
 export { default } from './Collapse';
+// eslint-disable-next-line camelcase
+export { default as unstable_StrictModeCollapse } from './StrictModeCollapse';

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

@@ -115,6 +115,8 @@ const Drawer = React.forwardRef(function Drawer(props, ref) {
     open = false,
     PaperProps = {},
     SlideProps,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Slide,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
     ...other
@@ -157,15 +159,15 @@ const Drawer = React.forwardRef(function Drawer(props, ref) {
   }
 
   const slidingDrawer = (
-    <Slide
+    <TransitionComponent
       in={open}
       direction={oppositeDirection[anchor]}
       timeout={transitionDuration}
       appear={mounted.current}
       {...SlideProps}
     >
       {drawer}
-    </Slide>
+    </TransitionComponent>
   );
 
   if (variant === 'persistent') {

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

@@ -31,6 +31,8 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     onEnter,
     onExit,
     style,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
     timeout = defaultTimeout,
     ...other
   } = props;
@@ -72,7 +74,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
   };
 
   return (
-    <Transition
+    <TransitionComponent
       appear
       in={inProp}
       onEnter={handleEnter}
@@ -93,7 +95,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
           ...childProps,
         });
       }}
-    </Transition>
+    </TransitionComponent>
   );
 });
 

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Transition } from '@material-ui/react-transition-group';
+import { useForkRef } from '../utils';
+import Fade from './Fade';
+
+/**
+ * @ignore - internal component.
+ */
+const StrictModeFade = React.forwardRef(function StrictModeFade(props, forwardedRef) {
+  const domRef = React.useRef(null);
+  const ref = useForkRef(domRef, forwardedRef);
+
+  return (
+    <Fade
+      {...props}
+      findDOMNode={() => domRef.current}
+      ref={ref}
+      TransitionComponent={Transition}
+    />
+  );
+});
+
+export default StrictModeFade;

packages/material-ui/src/Fade/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Fade';
+export { default, default as unstable_StrictModeFade } from './Fade';
 export * from './Fade';

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

@@ -1 +1,3 @@
 export { default } from './Fade';
+// eslint-disable-next-line camelcase
+export { default as unstable_StrictModeFade } from './StrictModeFade';

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

@@ -26,7 +26,17 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Grow = React.forwardRef(function Grow(props, ref) {
-  const { children, in: inProp, onEnter, onExit, style, timeout = 'auto', ...other } = props;
+  const {
+    children,
+    in: inProp,
+    onEnter,
+    onExit,
+    style,
+    timeout = 'auto',
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const handleRef = useForkRef(children.ref, ref);
@@ -114,7 +124,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   }, []);
 
   return (
-    <Transition
+    <TransitionComponent
       appear
       in={inProp}
       onEnter={handleEnter}
@@ -137,7 +147,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
           ...childProps,
         });
       }}
-    </Transition>
+    </TransitionComponent>
   );
 });
 

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Transition } from '@material-ui/react-transition-group';
+import { useForkRef } from '../utils';
+import Grow from './Grow';
+
+/**
+ * @ignore - internal component.
+ */
+const StrictModeGrow = React.forwardRef(function StrictModeGrow(props, forwardedRef) {
+  const domRef = React.useRef(null);
+  const ref = useForkRef(domRef, forwardedRef);
+
+  return (
+    <Grow
+      {...props}
+      findDOMNode={() => domRef.current}
+      ref={ref}
+      TransitionComponent={Transition}
+    />
+  );
+});
+
+export default StrictModeGrow;

packages/material-ui/src/Grow/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Grow';
+export { default, default as unstable_StrictModeGrow } from './Grow';
 export * from './Grow';

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

@@ -1 +1,3 @@
 export { default } from './Grow';
+// eslint-disable-next-line camelcase
+export { default as unstable_StrictModeGrow } from './StrictModeGrow';

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

@@ -80,6 +80,8 @@ const Slide = React.forwardRef(function Slide(props, ref) {
     onExited,
     style,
     timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
     ...other
   } = props;
 
@@ -202,7 +204,7 @@ const Slide = React.forwardRef(function Slide(props, ref) {
   }, [inProp, updatePosition]);
 
   return (
-    <Transition
+    <TransitionComponent
       onEnter={handleEnter}
       onEntering={handleEntering}
       onExit={handleExit}
@@ -223,7 +225,7 @@ const Slide = React.forwardRef(function Slide(props, ref) {
           ...childProps,
         });
       }}
-    </Transition>
+    </TransitionComponent>
   );
 });
 

packages/material-ui/src/Slide/StrictModeSlide.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Transition } from '@material-ui/react-transition-group';
+import { useForkRef } from '../utils';
+import Slide from './Slide';
+
+/**
+ * @ignore - internal component.
+ */
+const StrictModeSlide = React.forwardRef(function StrictModeSlide(props, forwardedRef) {
+  const domRef = React.useRef(null);
+  const ref = useForkRef(domRef, forwardedRef);
+
+  return (
+    <Slide
+      {...props}
+      findDOMNode={() => domRef.current}
+      ref={ref}
+      TransitionComponent={Transition}
+    />
+  );
+});
+
+export default StrictModeSlide;

packages/material-ui/src/Slide/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Slide';
+export { default, default as unstable_StrictModeSlide } from './Slide';
 export * from './Slide';

packages/material-ui/src/Slide/index.js

@@ -1 +1,3 @@
 export { default } from './Slide';
+// eslint-disable-next-line camelcase
+export { default as unstable_StrictModeSlide } from './StrictModeSlide';

packages/material-ui/src/Zoom/StrictModeZoom.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Transition } from '@material-ui/react-transition-group';
+import { useForkRef } from '../utils';
+import Zoom from './Zoom';
+
+/**
+ * @ignore - internal component.
+ */
+const StrictModeZoom = React.forwardRef(function StrictModeZoom(props, forwardedRef) {
+  const domRef = React.useRef(null);
+  const ref = useForkRef(domRef, forwardedRef);
+
+  return (
+    <Zoom
+      {...props}
+      findDOMNode={() => domRef.current}
+      ref={ref}
+      TransitionComponent={Transition}
+    />
+  );
+});
+
+export default StrictModeZoom;