[docs] Modernize DemoFrame (#20664)

Author: eps1lon

docs/src/modules/components/DemoSandboxed.js

@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
 import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
-import NoSsr from '@material-ui/core/NoSsr';
 import rtl from 'jss-rtl';
-import Frame from 'react-frame-component';
+import Frame, { FrameContext } from 'react-frame-component';
 import { useSelector } from 'react-redux';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 
@@ -18,59 +17,47 @@ const styles = (theme) => ({
   },
 });
 
-function DemoFrame(props) {
-  const { children, classes, ...other } = props;
+function FramedDemo(props) {
+  const { children } = props;
+
+  const { document } = React.useContext(FrameContext);
+
   const theme = useTheme();
-  const [state, setState] = React.useState({
-    ready: false,
-  });
-  const instanceRef = React.useRef();
-
-  const handleRef = React.useCallback((ref) => {
-    instanceRef.current = {
-      contentDocument: ref ? ref.node.contentDocument : null,
-      contentWindow: ref ? ref.node.contentWindow : null,
-    };
-  }, []);
+  React.useEffect(() => {
+    document.body.dir = theme.direction;
+  }, [document, theme.direction]);
 
-  const onContentDidMount = () => {
-    setState({
-      ready: true,
+  const { jss, sheetsManager } = React.useMemo(() => {
+    return {
       jss: create({
         plugins: [...jssPreset().plugins, rtl()],
-        insertionPoint: instanceRef.current.contentWindow['demo-frame-jss'],
+        insertionPoint: document.head,
       }),
       sheetsManager: new Map(),
-      container: instanceRef.current.contentDocument.body,
-      window: () => instanceRef.current.contentWindow,
-    });
-  };
+    };
+  }, [document]);
+
+  const getWindow = React.useCallback(() => document.defaultView, [document]);
 
-  const onContentDidUpdate = () => {
-    instanceRef.current.contentDocument.body.dir = theme.direction;
-  };
+  return (
+    <StylesProvider jss={jss} sheetsManager={sheetsManager}>
+      {React.cloneElement(children, {
+        window: getWindow,
+      })}
+    </StylesProvider>
+  );
+}
+FramedDemo.propTypes = {
+  children: PropTypes.node,
+};
+
+function DemoFrame(props) {
+  const { children, classes, ...other } = props;
 
-  // NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount
   return (
-    <NoSsr defer>
-      <Frame
-        ref={handleRef}
-        className={classes.frame}
-        contentDidMount={onContentDidMount}
-        contentDidUpdate={onContentDidUpdate}
-        {...other}
-      >
-        <div id="demo-frame-jss" />
-        {state.ready ? (
-          <StylesProvider jss={state.jss} sheetsManager={state.sheetsManager}>
-            {React.cloneElement(children, {
-              container: state.container,
-              window: state.window,
-            })}
-          </StylesProvider>
-        ) : null}
-      </Frame>
-    </NoSsr>
+    <Frame className={classes.frame} {...other}>
+      <FramedDemo>{children}</FramedDemo>
+    </Frame>
   );
 }
 

docs/src/pages/components/drawers/ResponsiveDrawer.js

@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function ResponsiveDrawer(props) {
-  const { container } = props;
+  const { window } = props;
   const classes = useStyles();
   const theme = useTheme();
   const [mobileOpen, setMobileOpen] = React.useState(false);
@@ -86,6 +86,8 @@ function ResponsiveDrawer(props) {
     </div>
   );
 
+  const container = window !== undefined ? () => window().document.body : undefined;
+
   return (
     <div className={classes.root}>
       <CssBaseline />
@@ -171,7 +173,7 @@ ResponsiveDrawer.propTypes = {
    * Injected by the documentation to work in an iframe.
    * You won't need it on your project.
    */
-  container: PropTypes.any,
+  window: PropTypes.func,
 };
 
 export default ResponsiveDrawer;

docs/src/pages/components/drawers/ResponsiveDrawer.tsx

@@ -53,16 +53,16 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-interface ResponsiveDrawerProps {
+interface Props {
   /**
    * Injected by the documentation to work in an iframe.
    * You won't need it on your project.
    */
-  container?: any;
+  window?: () => Window;
 }
 
-export default function ResponsiveDrawer(props: ResponsiveDrawerProps) {
-  const { container } = props;
+export default function ResponsiveDrawer(props: Props) {
+  const { window } = props;
   const classes = useStyles();
   const theme = useTheme();
   const [mobileOpen, setMobileOpen] = React.useState(false);
@@ -95,6 +95,8 @@ export default function ResponsiveDrawer(props: ResponsiveDrawerProps) {
     </div>
   );
 
+  const container = window !== undefined ? () => window().document.body : undefined;
+
   return (
     <div className={classes.root}>
       <CssBaseline />