Prepare migration to react-dom/FocusScope

packages/material-ui/src/Modal/TrapFocus.js

@@ -25,7 +25,7 @@ function TrapFocus(props) {
  const ignoreNextEnforceFocus = React.useRef();
  const sentinelStart = React.useRef(null);
  const sentinelEnd = React.useRef(null);
- const lastFocus = React.useRef();
+ const nodeToRestore = React.useRef();
  const isEnabledRef = React.useRef();
  useEnhancedEffect(() => {
  isEnabledRef.current = isEnabled;
@@ -46,7 +46,7 @@ function TrapFocus(props) {
  return;
  }
 
- lastFocus.current = getDoc().activeElement;
+ nodeToRestore.current = getDoc().activeElement;
  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
  React.useEffect(() => {
@@ -73,7 +73,7 @@ function TrapFocus(props) {
  rootRef.current.focus();
  }
 
- const enforceFocus = () => {
+ const contain = () => {
  if (disableEnforceFocus || !isEnabledRef.current() || ignoreNextEnforceFocus.current) {
  ignoreNextEnforceFocus.current = false;
  return;
@@ -92,7 +92,7 @@ function TrapFocus(props) {
 
  // Make sure the next tab starts from the right place.
  if (doc.activeElement === rootRef.current) {
- // We need to ignore the next enforceFocus as
+ // We need to ignore the next contain as
  // it will try to move the focus back to the rootRef element.
  ignoreNextEnforceFocus.current = true;
  if (event.shiftKey) {
@@ -103,24 +103,24 @@ function TrapFocus(props) {
  }
  };
 
- doc.addEventListener('focus', enforceFocus, true);
+ doc.addEventListener('focus', contain, true);
  doc.addEventListener('keydown', loopFocus, true);
 
  return () => {
- doc.removeEventListener('focus', enforceFocus, true);
+ doc.removeEventListener('focus', contain, true);
  doc.removeEventListener('keydown', loopFocus, true);
 
  // restoreLastFocus()
  if (!disableRestoreFocus) {
  // In IE 11 it is possible for document.activeElement to be null resulting
- // in lastFocus.current being null.
+ // in nodeToRestore.current being null.
  // Not all elements in IE 11 have a focus method.
  // Once IE 11 support is dropped the focus() call can be unconditional.
- if (lastFocus.current && lastFocus.current.focus) {
- lastFocus.current.focus();
+ if (nodeToRestore.current && nodeToRestore.current.focus) {
+ nodeToRestore.current.focus();
  }
 
- lastFocus.current = null;
+ nodeToRestore.current = null;
  }
  };
  }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, open]);
@@ -176,4 +176,39 @@ TrapFocus.propTypes = {
  open: PropTypes.bool.isRequired,
 };
 
+/*
+
+In the future, we should be able to replace TrapFocus with:
+https://github.com/facebook/react/blob/master/packages/react-events/docs/FocusScope.md
+
+```jsx
+import FocusScope from 'react-dom/FocusScope';
+
+function TrapFocus(props) {
+ const {
+ children
+ disableAutoFocus = false,
+ disableEnforceFocus = false,
+ disableRestoreFocus = false,
+ open,
+ } = props;
+
+ if (!open) {
+ return children;
+ }
+
+ return (
+ <FocusScope
+ autoFocus={!disableAutoFocus}
+ contain={!disableEnforceFocus}
+ restoreFocus={!disableRestoreFocus}
+ >
+ {children}
+ </FocusScope>
+ );
+}
+```
+
+*/
+
 export default TrapFocus;