⬆️ upgrade react-modal to v3.16.1 and remove the patch (#718)

packages/desktop-client/package.json

@@ -34,7 +34,6 @@
     "react-app-rewired": "^2.2.1",
     "react-dnd": "^10.0.2",
     "react-dom": "16.13.1",
-    "react-modal": "3.4.4",
     "react-redux": "7.2.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",

packages/desktop-client/src/components/accounts/Filters.js

@@ -1,12 +1,12 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react';
 import { useSelector } from 'react-redux';
 
+import { FocusScope } from '@react-aria/focus';
 import {
   parse as parseDate,
   format as formatDate,
   isValid as isDateValid,
 } from 'date-fns';
-import scopeTab from 'react-modal/lib/helpers/scopeTab';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getMonthYearFormat } from 'loot-core/src/shared/months';
@@ -89,26 +89,6 @@ function subfieldToOptions(field, subfield) {
   }
 }
 
-function ScopeTab({ children }) {
-  let contentRef = useRef();
-
-  function onKeyDown(e) {
-    if (e.keyCode === 9) {
-      scopeTab(contentRef.current, e);
-    }
-  }
-
-  useEffect(() => {
-    contentRef.current.focus();
-  }, []);
-
-  return (
-    <div ref={contentRef} tabIndex={-1} onKeyDown={onKeyDown}>
-      {children}
-    </div>
-  );
-}
-
 function OpButton({ op, selected, style, onClick }) {
   return (
     <Button
@@ -186,7 +166,7 @@ function ConfigureField({
       width={300}
       onClose={() => dispatch({ type: 'close' })}
     >
-      <ScopeTab>
+      <FocusScope contain>
         <View style={{ marginBottom: 10 }}>
           {field === 'amount' || field === 'date' ? (
             <CustomSelect
@@ -289,7 +269,7 @@ function ConfigureField({
             </Button>
           </View>
         </form>
-      </ScopeTab>
+      </FocusScope>
     </Tooltip>
   );
 }

packages/loot-design/package.json

@@ -32,7 +32,7 @@
     "pikaday": "1.8.0",
     "react-dnd": "^10.0.2",
     "react-merge-refs": "^1.1.0",
-    "react-modal": "3.4.4",
+    "react-modal": "3.16.1",
     "react-spring": "^8.0.27",
     "react-virtualized-auto-sizer": "^1.0.2"
   },

patches/react-modal+3.4.4.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/react-modal/lib/components/ModalPortal.js b/node_modules/react-modal/lib/components/ModalPortal.js
-index 1dcab7d..0fa19dc 100644
---- a/node_modules/react-modal/lib/components/ModalPortal.js
-+++ b/node_modules/react-modal/lib/components/ModalPortal.js
-@@ -286,7 +286,7 @@ var ModalPortal = function (_Component) {
-   }, {
-     key: "componentWillUnmount",
-     value: function componentWillUnmount() {
--      this.afterClose();
-+      setTimeout(() => { this.afterClose() }, 0)
-       clearTimeout(this.closeTimer);
-     }
-   }, {

yarn.lock

@@ -80,7 +80,6 @@ __metadata:
     react-app-rewired: ^2.2.1
     react-dnd: ^10.0.2
     react-dom: 16.13.1
-    react-modal: 3.4.4
     react-redux: 7.2.1
     react-router: 5.2.0
     react-router-dom: 5.2.0
@@ -13829,7 +13828,7 @@ __metadata:
     react-dnd-html5-backend: ^10.0.2
     react-dom: 16.13.1
     react-merge-refs: ^1.1.0
-    react-modal: 3.4.4
+    react-modal: 3.16.1
     react-spring: ^8.0.27
     react-virtualized-auto-sizer: ^1.0.2
     wobble: ^1.5.0
@@ -17339,18 +17338,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-modal@npm:3.4.4":
-  version: 3.4.4
-  resolution: "react-modal@npm:3.4.4"
+"react-modal@npm:3.16.1":
+  version: 3.16.1
+  resolution: "react-modal@npm:3.16.1"
   dependencies:
     exenv: ^1.2.0
-    prop-types: ^15.5.10
+    prop-types: ^15.7.2
     react-lifecycles-compat: ^3.0.0
-    warning: ^3.0.0
+    warning: ^4.0.3
   peerDependencies:
-    react: ^0.14.0 || ^15.0.0 || ^16
-    react-dom: ^0.14.0 || ^15.0.0 || ^16
-  checksum: d01d83e7081fcfaea9556bf0aaa460c4ae2f7c371df2ce4e7bac7d4eac884970d57ec89d27c04b4adeb56488801558e0784925c996488747a592ce700f059be9
+    react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+    react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+  checksum: 978936e9320fad839c039b9ee4de55d40888156cb40e093615d6fbc2ff07139d5db06f14782cb7767f780bd5fb57956778669426c535ebc0068a7a03882c7e75
   languageName: node
   linkType: hard