From 6bcdc0f8bad5feda074fa60b1ccdcb1d21c9f52d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 21 Apr 2020 17:25:14 +0200
Subject: [PATCH 1/3] [docs] Replace react-frame-component with concurrent safe
 impl

---
 docs/package.json                            |  1 -
 docs/src/modules/components/DemoSandboxed.js | 37 +++++++++++++++-----
 yarn.lock                                    |  5 ---
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 929be5e8d5f502..2ed97698a5afbe 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -95,7 +95,6 @@
     "react-dom": "^16.13.0",
     "react-draggable": "^4.0.3",
     "react-final-form": "^6.3.0",
-    "react-frame-component": "^4.1.1",
     "react-is": "^16.13.0",
     "react-number-format": "^4.0.8",
     "react-redux": "^7.1.1",
diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
index 706e02ac8bc604..38e0264cc04bac 100644
--- a/docs/src/modules/components/DemoSandboxed.js
+++ b/docs/src/modules/components/DemoSandboxed.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
 import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
+import { exactProp } from '@material-ui/utils';
 import rtl from 'jss-rtl';
-import Frame, { FrameContext } from 'react-frame-component';
 import { useSelector } from 'react-redux';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 
@@ -18,9 +19,7 @@ const styles = (theme) => ({
 });
 
 function FramedDemo(props) {
-  const { children } = props;
-
-  const { document } = React.useContext(FrameContext);
+  const { children, document } = props;
 
   const theme = useTheme();
   React.useEffect(() => {
@@ -49,22 +48,44 @@ function FramedDemo(props) {
 }
 FramedDemo.propTypes = {
   children: PropTypes.node,
+  document: PropTypes.object.isRequired,
 };
 
 function DemoFrame(props) {
-  const { children, classes, ...other } = props;
+  const { children, classes, title } = props;
+  /**
+   * @type {import('react').Ref<HTMLIFrameElement>}
+   */
+  const frameRef = React.useRef(null);
+
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const document = frameRef.current?.contentDocument;
 
   return (
-    <Frame className={classes.frame} {...other}>
-      <FramedDemo>{children}</FramedDemo>
-    </Frame>
+    <React.Fragment>
+      <iframe className={classes.frame} ref={frameRef} title={title} />
+      {mounted
+        ? ReactDOM.createPortal(
+            <FramedDemo document={document}>{children}</FramedDemo>,
+            document.body,
+          )
+        : null}
+    </React.Fragment>
   );
 }
 
 DemoFrame.propTypes = {
   children: PropTypes.node.isRequired,
   classes: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
 };
+if (process.env.NODE_ENV !== 'production') {
+  DemoFrame.propTypes = exactProp(DemoFrame.propTypes);
+}
 
 const StyledFrame = withStyles(styles)(DemoFrame);
 
diff --git a/yarn.lock b/yarn.lock
index 026177da8c397e..90999a59b5fa2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13591,11 +13591,6 @@ react-final-form@^6.3.0:
     "@babel/runtime" "^7.9.2"
     ts-essentials "^6.0.3"
 
-react-frame-component@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.1.tgz#ea8f7c518ef6b5ad72146dd1f648752369826894"
-  integrity sha512-NfJp90AvYA1R6+uSYafQ+n+UM2HjHqi4WGHeprVXa6quU9d8o6ZFRzQ36uemY82dlkZFzf2jigFx6E4UzNFajA==
-
 react-is@16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"

From c4e3382d8c49360821389e21d502690e8c91bd98 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 21 Apr 2020 17:26:46 +0200
Subject: [PATCH 2/3] [docs] Use makeStyles in DemoFrame

---
 docs/src/modules/components/DemoSandboxed.js | 39 +++++++++-----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
index 38e0264cc04bac..b5523238317a39 100644
--- a/docs/src/modules/components/DemoSandboxed.js
+++ b/docs/src/modules/components/DemoSandboxed.js
@@ -2,22 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
-import { withStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
-import { exactProp } from '@material-ui/utils';
+import { makeStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
 import rtl from 'jss-rtl';
 import { useSelector } from 'react-redux';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 
-const styles = (theme) => ({
-  frame: {
-    backgroundColor: theme.palette.background.default,
-    flexGrow: 1,
-    height: 400,
-    border: 'none',
-    boxShadow: theme.shadows[1],
-  },
-});
-
 function FramedDemo(props) {
   const { children, document } = props;
 
@@ -51,8 +40,22 @@ FramedDemo.propTypes = {
   document: PropTypes.object.isRequired,
 };
 
+const useStyles = makeStyles(
+  (theme) => ({
+    frame: {
+      backgroundColor: theme.palette.background.default,
+      flexGrow: 1,
+      height: 400,
+      border: 'none',
+      boxShadow: theme.shadows[1],
+    },
+  }),
+  { name: 'DemoFrame' },
+);
+
 function DemoFrame(props) {
-  const { children, classes, title } = props;
+  const { children, title, ...other } = props;
+  const classes = useStyles();
   /**
    * @type {import('react').Ref<HTMLIFrameElement>}
    */
@@ -67,7 +70,7 @@ function DemoFrame(props) {
 
   return (
     <React.Fragment>
-      <iframe className={classes.frame} ref={frameRef} title={title} />
+      <iframe className={classes.frame} ref={frameRef} title={title} {...other} />
       {mounted
         ? ReactDOM.createPortal(
             <FramedDemo document={document}>{children}</FramedDemo>,
@@ -80,14 +83,8 @@ function DemoFrame(props) {
 
 DemoFrame.propTypes = {
   children: PropTypes.node.isRequired,
-  classes: PropTypes.object.isRequired,
   title: PropTypes.string.isRequired,
 };
-if (process.env.NODE_ENV !== 'production') {
-  DemoFrame.propTypes = exactProp(DemoFrame.propTypes);
-}
-
-const StyledFrame = withStyles(styles)(DemoFrame);
 
 /**
  * Isolates the demo component as best as possible. Additional props are spread
@@ -95,7 +92,7 @@ const StyledFrame = withStyles(styles)(DemoFrame);
  */
 function DemoSandboxed(props) {
   const { component: Component, iframe, name, onResetDemoClick, ...other } = props;
-  const Sandbox = iframe ? StyledFrame : React.Fragment;
+  const Sandbox = iframe ? DemoFrame : React.Fragment;
   const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {};
 
   const t = useSelector((state) => state.options.t);

From 14578ec9d60d31669f7f2b22b19533968b3f5e07 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 21 Apr 2020 20:08:06 +0200
Subject: [PATCH 3/3] poke github