Update focus trap

package.json

@@ -125,7 +125,7 @@
     "expo-image": "^2.0.3",
     "expo-image-manipulator": "^13.0.5",
     "fast-equals": "^4.0.3",
-    "focus-trap-react": "^10.2.3",
+    "focus-trap-react": "^11.0.3",
     "howler": "^2.2.4",
     "htmlparser2": "^7.2.0",
     "idb-keyval": "^6.2.1",

patches/focus-trap+7.6.4.patch

@@ -0,0 +1,79 @@
+diff --git a/node_modules/focus-trap/dist/focus-trap.esm.js b/node_modules/focus-trap/dist/focus-trap.esm.js
+index 46c8d52..6919e00 100644
+--- a/node_modules/focus-trap/dist/focus-trap.esm.js
++++ b/node_modules/focus-trap/dist/focus-trap.esm.js
+@@ -118,8 +118,8 @@ var isKeyForward = function isKeyForward(e) {
+ var isKeyBackward = function isKeyBackward(e) {
+   return isTabEvent(e) && e.shiftKey;
+ };
+-var delay = function delay(fn) {
+-  return setTimeout(fn, 0);
++var delay = function delay(fn, delayTime = 0) {
++  return setTimeout(() => setTimeout(fn, delayTime), 0);
+ };
+
+ /**
+@@ -771,7 +771,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
+     // that caused the focus trap activation.
+     state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
+       _tryFocus(getInitialFocusNode());
+-    }) : _tryFocus(getInitialFocusNode());
++    }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined) : _tryFocus(getInitialFocusNode());
+     doc.addEventListener('focusin', checkFocusIn, true);
+     doc.addEventListener('mousedown', checkPointerDown, {
+       capture: true,
+@@ -909,7 +909,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
+             _tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+           }
+           onPostDeactivate === null || onPostDeactivate === undefined || onPostDeactivate();
+-        });
++        }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined);
+       };
+       if (returnFocus && checkCanReturnFocus) {
+         checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
+diff --git a/node_modules/focus-trap/index.d.ts b/node_modules/focus-trap/index.d.ts
+index a7fb3be..6e85116 100644
+--- a/node_modules/focus-trap/index.d.ts
++++ b/node_modules/focus-trap/index.d.ts
+@@ -187,7 +187,7 @@ declare module 'focus-trap' {
+      * This prevents elements within the focusable element from capturing
+      * the event that triggered the focus trap activation.
+      */
+-    delayInitialFocus?: boolean;
++    delayInitialFocus?: boolean | number;
+     /**
+      * Default: `window.document`. Document where the focus trap will be active.
+      * This allows to use FocusTrap in an iFrame context.
+diff --git a/node_modules/focus-trap/index.js b/node_modules/focus-trap/index.js
+index 36d901c..fcbadc7 100644
+--- a/node_modules/focus-trap/index.js
++++ b/node_modules/focus-trap/index.js
+@@ -66,8 +66,8 @@ const isKeyBackward = function (e) {
+   return isTabEvent(e) && e.shiftKey;
+ };
+
+-const delay = function (fn) {
+-  return setTimeout(fn, 0);
++const delay = function (fn, delayTime = 0) {
++  return setTimeout(() => setTimeout(fn, delayTime), 0);
+ };
+
+ /**
+@@ -832,7 +832,7 @@ const createFocusTrap = function (elements, userOptions) {
+     state.delayInitialFocusTimer = config.delayInitialFocus
+       ? delay(function () {
+           tryFocus(getInitialFocusNode());
+-        })
++        }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined)
+       : tryFocus(getInitialFocusNode());
+
+     doc.addEventListener('focusin', checkFocusIn, true);
+@@ -1006,7 +1006,7 @@ const createFocusTrap = function (elements, userOptions) {
+             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+           }
+           onPostDeactivate?.();
+-        });
++        }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined);
+       };
+
+       if (returnFocus && checkCanReturnFocus) {

src/components/FocusTrap/FocusTrapForModal/FocusTrapForModalProps.ts

@@ -1,6 +1,6 @@
-import type FocusTrap from 'focus-trap-react';
+import type {FocusTrapProps} from 'focus-trap-react';
 
-type FocusTrapOptions = Exclude<FocusTrap.Props['focusTrapOptions'], undefined>;
+type FocusTrapOptions = Exclude<FocusTrapProps['focusTrapOptions'], undefined>;
 
 type FocusTrapForModalProps = {
     children: React.ReactNode;

src/components/FocusTrap/FocusTrapForModal/index.web.tsx

@@ -1,4 +1,4 @@
-import FocusTrap from 'focus-trap-react';
+import {FocusTrap} from 'focus-trap-react';
 import React from 'react';
 import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
@@ -15,7 +15,6 @@ function FocusTrapForModal({children, active, initialFocus = false}: FocusTrapFo
                 clickOutsideDeactivates: true,
                 initialFocus,
                 fallbackFocus: document.body,
-                unpauseOnDeactivate: false,
                 setReturnFocus: (element) => {
                     if (ReportActionComposeFocusManager.isFocused()) {
                         return false;

src/components/FocusTrap/FocusTrapForScreen/FocusTrapProps.ts

@@ -1,10 +1,10 @@
-import type FocusTrap from 'focus-trap-react';
+import type {FocusTrapProps} from 'focus-trap-react';
 
 type FocusTrapForScreenProps = {
     children: React.ReactNode;
 
     /** Overrides the focus trap settings */
-    focusTrapSettings?: Pick<FocusTrap.Props, 'containerElements' | 'focusTrapOptions' | 'active'>;
+    focusTrapSettings?: Pick<FocusTrapProps, 'containerElements' | 'focusTrapOptions' | 'active'>;
 };
 
 export default FocusTrapForScreenProps;

src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

@@ -1,5 +1,5 @@
 import {useIsFocused, useRoute} from '@react-navigation/native';
-import FocusTrap from 'focus-trap-react';
+import {FocusTrap} from 'focus-trap-react';
 import React, {useMemo} from 'react';
 import BOTTOM_TAB_SCREENS from '@components/FocusTrap/BOTTOM_TAB_SCREENS';
 import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
@@ -50,7 +50,6 @@ function FocusTrapForScreen({children, focusTrapSettings}: FocusTrapProps) {
                 delayInitialFocus: CONST.ANIMATED_TRANSITION,
                 initialFocus: false,
                 setReturnFocus: false,
-                unpauseOnDeactivate: false,
                 ...(focusTrapSettings?.focusTrapOptions ?? {}),
             }}
         >

src/components/Modal/types.ts

@@ -1,10 +1,10 @@
-import type FocusTrap from 'focus-trap-react';
+import type {FocusTrapProps} from 'focus-trap-react';
 import type {ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 
-type FocusTrapOptions = Exclude<FocusTrap.Props['focusTrapOptions'], undefined>;
+type FocusTrapOptions = Exclude<FocusTrapProps['focusTrapOptions'], undefined>;
 
 type PopoverAnchorPosition = {
     top?: number;