[TrapFocus] Rename TrapFocus to FocusTrap (#34216)

mui · Sep 26, 2022 · c150b7e · c150b7e
1 parent 00255ba
commit c150b7e
Show file tree

Hide file tree

Showing 52 changed files with 249 additions and 245 deletions.
diff --git a/...e/components/trap-focus/BasicTrapFocus.js → ...e/components/focus-trap/BasicFocusTrap.js b/...e/components/trap-focus/BasicTrapFocus.js → ...e/components/focus-trap/BasicFocusTrap.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
-export default function BasicTrapFocus() {
+export default function BasicFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -11,7 +11,7 @@ export default function BasicTrapFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus open>
+        <FocusTrap open>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -21,7 +21,7 @@ export default function BasicTrapFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
     </Box>
   );

diff --git a/.../components/trap-focus/BasicTrapFocus.tsx → .../components/focus-trap/BasicFocusTrap.tsx b/.../components/trap-focus/BasicTrapFocus.tsx → .../components/focus-trap/BasicFocusTrap.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
-export default function BasicTrapFocus() {
+export default function BasicFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -11,7 +11,7 @@ export default function BasicTrapFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus open>
+        <FocusTrap open>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -21,7 +21,7 @@ export default function BasicTrapFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
     </Box>
   );

diff --git a/...nts/trap-focus/BasicTrapFocus.tsx.preview → ...nts/focus-trap/BasicFocusTrap.tsx.preview b/...nts/trap-focus/BasicTrapFocus.tsx.preview → ...nts/focus-trap/BasicFocusTrap.tsx.preview
@@ -2,7 +2,7 @@
   Open
 </button>
 {open && (
-  <TrapFocus open>
+  <FocusTrap open>
     <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
       <label>
         First name: <input type="text" />
@@ -12,5 +12,5 @@
         Close
       </button>
     </Box>
-  </TrapFocus>
+  </FocusTrap>
 )}
diff --git a/...trap-focus/ContainedToggleTrappedFocus.js → ...focus-trap/ContainedToggleTrappedFocus.js b/...trap-focus/ContainedToggleTrappedFocus.js → ...focus-trap/ContainedToggleTrappedFocus.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Stack from '@mui/system/Stack';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
 export default function ContainedToggleTrappedFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
     <React.Fragment>
-      <TrapFocus open={open} disableRestoreFocus disableAutoFocus>
+      <FocusTrap open={open} disableRestoreFocus disableAutoFocus>
         <Stack alignItems="center" spacing={2}>
           <button type="button" onClick={() => setOpen(!open)}>
             {open ? 'Close' : 'Open'}
@@ -18,7 +18,7 @@ export default function ContainedToggleTrappedFocus() {
             </label>
           )}
         </Stack>
-      </TrapFocus>
+      </FocusTrap>
     </React.Fragment>
   );
 }
diff --git a/...rap-focus/ContainedToggleTrappedFocus.tsx → ...ocus-trap/ContainedToggleTrappedFocus.tsx b/...rap-focus/ContainedToggleTrappedFocus.tsx → ...ocus-trap/ContainedToggleTrappedFocus.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Stack from '@mui/system/Stack';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
 export default function ContainedToggleTrappedFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
     <React.Fragment>
-      <TrapFocus open={open} disableRestoreFocus disableAutoFocus>
+      <FocusTrap open={open} disableRestoreFocus disableAutoFocus>
         <Stack alignItems="center" spacing={2}>
           <button type="button" onClick={() => setOpen(!open)}>
             {open ? 'Close' : 'Open'}
@@ -18,7 +18,7 @@ export default function ContainedToggleTrappedFocus() {
             </label>
           )}
         </Stack>
-      </TrapFocus>
+      </FocusTrap>
     </React.Fragment>
   );
 }
diff --git a/...s/ContainedToggleTrappedFocus.tsx.preview → ...p/ContainedToggleTrappedFocus.tsx.preview b/...s/ContainedToggleTrappedFocus.tsx.preview → ...p/ContainedToggleTrappedFocus.tsx.preview
@@ -1,5 +1,5 @@
 <React.Fragment>
-  <TrapFocus open={open} disableRestoreFocus disableAutoFocus>
+  <FocusTrap open={open} disableRestoreFocus disableAutoFocus>
     <Stack alignItems="center" spacing={2}>
       <button type="button" onClick={() => setOpen(!open)}>
         {open ? 'Close' : 'Open'}
@@ -10,5 +10,5 @@
         </label>
       )}
     </Stack>
-  </TrapFocus>
+  </FocusTrap>
 </React.Fragment>
diff --git a/...ponents/trap-focus/DisableEnforceFocus.js → ...ponents/focus-trap/DisableEnforceFocus.js b/...ponents/trap-focus/DisableEnforceFocus.js → ...ponents/focus-trap/DisableEnforceFocus.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
 export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);
@@ -11,7 +11,7 @@ export default function DisableEnforceFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus disableEnforceFocus open>
+        <FocusTrap disableEnforceFocus open>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -21,7 +21,7 @@ export default function DisableEnforceFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
     </Box>
   );

diff --git a/...onents/trap-focus/DisableEnforceFocus.tsx → ...onents/focus-trap/DisableEnforceFocus.tsx b/...onents/trap-focus/DisableEnforceFocus.tsx → ...onents/focus-trap/DisableEnforceFocus.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
 export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);
@@ -11,7 +11,7 @@ export default function DisableEnforceFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus disableEnforceFocus open>
+        <FocusTrap disableEnforceFocus open>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -21,7 +21,7 @@ export default function DisableEnforceFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
     </Box>
   );

diff --git a/...rap-focus/DisableEnforceFocus.tsx.preview → ...ocus-trap/DisableEnforceFocus.tsx.preview b/...rap-focus/DisableEnforceFocus.tsx.preview → ...ocus-trap/DisableEnforceFocus.tsx.preview
@@ -2,7 +2,7 @@
   Open
 </button>
 {open && (
-  <TrapFocus disableEnforceFocus open>
+  <FocusTrap disableEnforceFocus open>
     <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
       <label>
         First name: <input type="text" />
@@ -12,5 +12,5 @@
         Close
       </button>
     </Box>
-  </TrapFocus>
+  </FocusTrap>
 )}
diff --git a/...e/components/trap-focus/LazyTrapFocus.tsx → ...se/components/focus-trap/LazyFocusTrap.js b/...e/components/trap-focus/LazyTrapFocus.tsx → ...se/components/focus-trap/LazyFocusTrap.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
-export default function LazyTrapFocus() {
+export default function LazyFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -11,7 +11,7 @@ export default function LazyTrapFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus open disableAutoFocus>
+        <FocusTrap open disableAutoFocus>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -21,7 +21,7 @@ export default function LazyTrapFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
     </Box>
   );

diff --git a/...se/components/trap-focus/LazyTrapFocus.js → ...e/components/focus-trap/LazyFocusTrap.tsx b/...se/components/trap-focus/LazyTrapFocus.js → ...e/components/focus-trap/LazyFocusTrap.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
-export default function LazyTrapFocus() {
+export default function LazyFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -11,7 +11,7 @@ export default function LazyTrapFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus open disableAutoFocus>
+        <FocusTrap open disableAutoFocus>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -21,7 +21,7 @@ export default function LazyTrapFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
     </Box>
   );

diff --git a/...ents/trap-focus/LazyTrapFocus.tsx.preview → ...ents/focus-trap/LazyFocusTrap.tsx.preview b/...ents/trap-focus/LazyTrapFocus.tsx.preview → ...ents/focus-trap/LazyFocusTrap.tsx.preview
@@ -2,7 +2,7 @@
   Open
 </button>
 {open && (
-  <TrapFocus open disableAutoFocus>
+  <FocusTrap open disableAutoFocus>
     <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
       <label>
         First name: <input type="text" />
@@ -12,5 +12,5 @@
         Close
       </button>
     </Box>
-  </TrapFocus>
+  </FocusTrap>
 )}
diff --git a/.../components/trap-focus/PortalTrapFocus.js → .../components/focus-trap/PortalFocusTrap.js b/.../components/trap-focus/PortalTrapFocus.js → .../components/focus-trap/PortalFocusTrap.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
 import Portal from '@mui/base/Portal';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
-export default function PortalTrapFocus() {
+export default function PortalFocusTrap() {
   const [open, setOpen] = React.useState(false);
   const [container, setContainer] = React.useState(null);
 
@@ -13,7 +13,7 @@ export default function PortalTrapFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus open>
+        <FocusTrap open>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -29,7 +29,7 @@ export default function PortalTrapFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
 
       <div ref={setContainer} />

diff --git a/...components/trap-focus/PortalTrapFocus.tsx → ...components/focus-trap/PortalFocusTrap.tsx b/...components/trap-focus/PortalTrapFocus.tsx → ...components/focus-trap/PortalFocusTrap.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
 import Portal from '@mui/base/Portal';
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
 
-export default function PortalTrapFocus() {
+export default function PortalFocusTrap() {
   const [open, setOpen] = React.useState(false);
   const [container, setContainer] = React.useState<HTMLElement | null>(null);
 
@@ -13,7 +13,7 @@ export default function PortalTrapFocus() {
         Open
       </button>
       {open && (
-        <TrapFocus open>
+        <FocusTrap open>
           <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
             <label>
               First name: <input type="text" />
@@ -29,7 +29,7 @@ export default function PortalTrapFocus() {
               Close
             </button>
           </Box>
-        </TrapFocus>
+        </FocusTrap>
       )}
       <div ref={setContainer} />
     </Box>