From aeaba087ec324a648fdfb42fcde0368684dc16cb Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Thu, 21 Nov 2024 15:16:08 -0600
Subject: [PATCH] remove focustrap from loaderoverlay

---
 .../src/components/LoaderOverlay/index.tsx    | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/components/LoaderOverlay/index.tsx b/packages/react/src/components/LoaderOverlay/index.tsx
index 58dfca511..b200bbb52 100644
--- a/packages/react/src/components/LoaderOverlay/index.tsx
+++ b/packages/react/src/components/LoaderOverlay/index.tsx
@@ -1,9 +1,9 @@
 import React, { forwardRef, useEffect } from 'react';
-import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
 import Loader from '../Loader';
 import AxeLoader from './axe-loader';
 import AriaIsolate from '../../utils/aria-isolate';
+import useFocusTrap from '../../utils/useFocusTrap';
 import useSharedRef from '../../utils/useSharedRef';
 
 export interface LoaderOverlayProps
@@ -48,33 +48,24 @@ const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(
       }
     }, []);
 
-    const Wrapper = focusTrap ? FocusTrap : React.Fragment;
-    const wrapperProps = focusTrap
-      ? {
-          focusTrapOptions: {
-            fallbackFocus: '.Loader__overlay'
-          }
-        }
-      : {};
+    useFocusTrap(overlayRef, {
+      disabled: !focusTrap
+    });
 
     return (
-      <Wrapper {...wrapperProps}>
-        <div
-          className={classNames('Loader__overlay', className)}
-          ref={overlayRef}
-          tabIndex={-1}
-          {...other}
-        >
-          <div className="Loader__overlay__loader">
-            <Loader />
-            <AxeLoader />
-          </div>
-          {label ? (
-            <span className="Loader__overlay__label">{label}</span>
-          ) : null}
-          {children}
+      <div
+        className={classNames('Loader__overlay', className)}
+        ref={overlayRef}
+        tabIndex={-1}
+        {...other}
+      >
+        <div className="Loader__overlay__loader">
+          <Loader />
+          <AxeLoader />
         </div>
-      </Wrapper>
+        {label ? <span className="Loader__overlay__label">{label}</span> : null}
+        {children}
+      </div>
     );
   }
 );