[docs] Replace react-frame-component with concurrent safe impl

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",

docs/src/modules/components/DemoSandboxed.js

@@ -1,26 +1,14 @@
 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 { makeStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
 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';
 
-const styles = (theme) => ({
-  frame: {
-    backgroundColor: theme.palette.background.default,
-    flexGrow: 1,
-    height: 400,
-    border: 'none',
-    boxShadow: theme.shadows[1],
-  },
-});
-
 function FramedDemo(props) {
-  const { children } = props;
-
-  const { document } = React.useContext(FrameContext);
+  const { children, document } = props;
 
   const theme = useTheme();
   React.useEffect(() => {
@@ -49,32 +37,62 @@ function FramedDemo(props) {
 }
 FramedDemo.propTypes = {
   children: PropTypes.node,
+  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, ...other } = props;
+  const { children, title, ...other } = props;
+  const classes = useStyles();
+  /**
+   * @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} {...other} />
+      {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,
 };
 
-const StyledFrame = withStyles(styles)(DemoFrame);
-
 /**
  * Isolates the demo component as best as possible. Additional props are spread
  * to an `iframe` if `iframe={true}`.
  */
 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);

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==
-
 [email protected]:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"