diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
index 09b167ad58973c8148dc39f519d3246fd91a8d9c..df730fce1bc25a3c71aa3da14229e88d1c449559 100644
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -42,8 +42,8 @@
"pikaday": "1.8.0",
"react": "18.2.0",
"react-app-rewired": "^2.2.1",
- "react-dnd": "^10.0.2",
- "react-dnd-html5-backend": "^10.0.2",
+ "react-dnd": "^16.0.1",
+ "react-dnd-html5-backend": "^16.0.1",
"react-dom": "18.2.0",
"react-merge-refs": "^1.1.0",
"react-modal": "3.16.1",
diff --git a/packages/desktop-client/src/components/FinancesApp.js b/packages/desktop-client/src/components/FinancesApp.js
index c977e3c430b29d9ac6c9e59b6dac2bf605526d48..5065e232bc5e24724dd9281abde601426264d288 100644
--- a/packages/desktop-client/src/components/FinancesApp.js
+++ b/packages/desktop-client/src/components/FinancesApp.js
@@ -1,6 +1,6 @@
import React, { useEffect, useMemo } from 'react';
import { DndProvider } from 'react-dnd';
-import Backend from 'react-dnd-html5-backend';
+import { HTML5Backend as Backend } from 'react-dnd-html5-backend';
import { connect } from 'react-redux';
import {
Route,
diff --git a/packages/desktop-client/src/components/sort.js b/packages/desktop-client/src/components/sort.js
index 7ae7880542d920724fcb274dc6e8a5b130931c01..c886be8c973154016772a8ca433b4a618fd9b02e 100644
--- a/packages/desktop-client/src/components/sort.js
+++ b/packages/desktop-client/src/components/sort.js
@@ -29,30 +29,23 @@ function useMergedRefs(ref1, ref2) {
}, [ref1, ref2]);
}
-export function useDraggable({
- item,
- type,
- makePreview,
- children,
- canDrag,
- onDragChange,
-}) {
+export function useDraggable({ item, type, canDrag, onDragChange }) {
let _onDragChange = useRef(onDragChange);
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const [{ isDragging }, dragRef] = useDrag({
- item: { type, item },
- collect: monitor => ({ isDragging: monitor.isDragging() }),
-
- begin(monitor) {
+ const [, dragRef] = useDrag({
+ type,
+ item: () => {
_onDragChange.current({ state: 'start-preview', type, item });
setTimeout(() => {
_onDragChange.current({ state: 'start' });
}, 0);
+
+ return { type, item };
},
+ collect: monitor => ({ isDragging: monitor.isDragging() }),
- end(item, monitor) {
+ end(item) {
_onDragChange.current({ state: 'end', type, item });
},
@@ -74,10 +67,10 @@ export function useDroppable({ types, id, onDrop, onLongHover }) {
let [{ isOver }, dropRef] = useDrop({
accept: types,
- drop({ item }, monitor) {
+ drop({ item }) {
onDrop(item.id, dropPos, id);
},
- hover({ item, type }, monitor) {
+ hover(_, monitor) {
let hoverBoundingRect = ref.current.getBoundingClientRect();
let hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
let clientOffset = monitor.getClientOffset();
diff --git a/patches/react-dnd-html5-backend+10.0.2.patch b/patches/react-dnd-html5-backend+10.0.2.patch
deleted file mode 100644
index 89d142213ea3e1288d12595137677cc6fac676ea..0000000000000000000000000000000000000000
--- a/patches/react-dnd-html5-backend+10.0.2.patch
+++ /dev/null
@@ -1,30 +0,0 @@
-diff --git a/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js b/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js
-index 942091b..7378aa0 100644
---- a/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js
-+++ b/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js
-@@ -280,9 +280,9 @@ function () {
- // Show user-specified drop effect.
- e.preventDefault();
-
-- if (e.dataTransfer) {
-- e.dataTransfer.dropEffect = _this.getCurrentDropEffect();
-- }
-+ // if (e.dataTransfer) {
-+ // e.dataTransfer.dropEffect = _this.getCurrentDropEffect();
-+ // }
- } else if (_this.isDraggingNativeItem()) {
- // Don't show a nice cursor but still prevent default
- // "drop and blow away the whole document" action.
-@@ -290,9 +290,9 @@ function () {
- } else {
- e.preventDefault();
-
-- if (e.dataTransfer) {
-- e.dataTransfer.dropEffect = 'none';
-- }
-+ // if (e.dataTransfer) {
-+ // e.dataTransfer.dropEffect = 'none';
-+ // }
- }
- };
-
diff --git a/upcoming-release-notes/1192.md b/upcoming-release-notes/1192.md
new file mode 100644
index 0000000000000000000000000000000000000000..47d52f5860a6eff16f8e0e6d664c0819d60dc4ac
--- /dev/null
+++ b/upcoming-release-notes/1192.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Upgrade `react-dnd` dependency from v10.0.2 to v16.0.1 and remove monkeypatch
diff --git a/yarn.lock b/yarn.lock
index 53d69c07d26485bb4067a0ad3512f762d3b532e6..ccf33b1e55f3c67f0640ce0b62980a3768666b21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -105,8 +105,8 @@ __metadata:
pikaday: 1.8.0
react: 18.2.0
react-app-rewired: ^2.2.1
- react-dnd: ^10.0.2
- react-dnd-html5-backend: ^10.0.2
+ react-dnd: ^16.0.1
+ react-dnd-html5-backend: ^16.0.1
react-dom: 18.2.0
react-merge-refs: ^1.1.0
react-modal: 3.16.1
@@ -3053,24 +3053,24 @@ __metadata:
languageName: node
linkType: hard
-"@react-dnd/asap@npm:^4.0.0":
- version: 4.0.1
- resolution: "@react-dnd/asap@npm:4.0.1"
- checksum: 757db3b5c436a95383b74f187f503321092909401ce9665d9cc1999308a44de22809bf8dbe82c9126bd73b72dd6665bbc4a788e864fc3c243c59f65057a4f87f
+"@react-dnd/asap@npm:^5.0.1":
+ version: 5.0.2
+ resolution: "@react-dnd/asap@npm:5.0.2"
+ checksum: 18f040e53512983f11c542ef21e6e4cac605d585a10cd764b13bc1b2f3ac7490e0fa40503adc348d8387aa45bc8e7eebe9cb33003b960a30bb5fde666ff2adde
languageName: node
linkType: hard
-"@react-dnd/invariant@npm:^2.0.0":
- version: 2.0.0
- resolution: "@react-dnd/invariant@npm:2.0.0"
- checksum: ef1e989920d70b15c80dccb01af9b598081d76993311aa22d2e9a3ec41d10a88540eeec4b4de7a8b2a2ea52dfc3495ab45e39192c2d27795a9258bd6b79d000e
+"@react-dnd/invariant@npm:^4.0.1":
+ version: 4.0.2
+ resolution: "@react-dnd/invariant@npm:4.0.2"
+ checksum: 594f6d78896c19bb8f023e101334fd91a9fdff686117bd8e830ba53737ec0a6042dab66971d3d63c7afbc622103909aff7a64c5c6767e0aa8d9561fd42705016
languageName: node
linkType: hard
-"@react-dnd/shallowequal@npm:^2.0.0":
- version: 2.0.0
- resolution: "@react-dnd/shallowequal@npm:2.0.0"
- checksum: b5bbdc795d65945bb7ba2322bed5cf8d4c6fe91dced98c3b10e3d16822c438f558751135ff296f8d1aa1eaa9d0037dacab2b522ca5eb812175123b9996966dcb
+"@react-dnd/shallowequal@npm:^4.0.1":
+ version: 4.0.2
+ resolution: "@react-dnd/shallowequal@npm:4.0.2"
+ checksum: 7f21d691bddbfd4d2830948cbeefecca1600b2b46bcb1934926795f07ae8a1fa60a3dfd3a2112be5ef682c3820c80a99711e9fa15843f7e300acb25a4ecb70ab
languageName: node
linkType: hard
@@ -4139,16 +4139,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/hoist-non-react-statics@npm:^3.3.1":
- version: 3.3.1
- resolution: "@types/hoist-non-react-statics@npm:3.3.1"
- dependencies:
- "@types/react": "*"
- hoist-non-react-statics: ^3.3.0
- checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
- languageName: node
- linkType: hard
-
"@types/html-minifier-terser@npm:^6.0.0":
version: 6.1.0
resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -7753,14 +7743,14 @@ __metadata:
languageName: node
linkType: hard
-"dnd-core@npm:^10.0.2":
- version: 10.0.2
- resolution: "dnd-core@npm:10.0.2"
+"dnd-core@npm:^16.0.1":
+ version: 16.0.1
+ resolution: "dnd-core@npm:16.0.1"
dependencies:
- "@react-dnd/asap": ^4.0.0
- "@react-dnd/invariant": ^2.0.0
- redux: ^4.0.4
- checksum: 58771aef103219eccc3a4f1695b6993edad0a922bd50cb66faaf706da69c5fd9dbc59fa786d2581b9adfad09ff1b63994ff6619f54f7ee8ee855e2ad01ae5be6
+ "@react-dnd/asap": ^5.0.1
+ "@react-dnd/invariant": ^4.0.1
+ redux: ^4.2.0
+ checksum: b7d3ef4664f433af796f440ddd27ad9d7fef0205f26c4b7c0af6ebf612ffa9b33e64d095d3e79190c4baaed34aa36570f321ebe0d2cc8ff1031ff158a0907b3f
languageName: node
linkType: hard
@@ -9980,7 +9970,7 @@ __metadata:
languageName: node
linkType: hard
-"hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
version: 3.3.2
resolution: "hoist-non-react-statics@npm:3.3.2"
dependencies:
@@ -15151,27 +15141,37 @@ __metadata:
languageName: node
linkType: hard
-"react-dnd-html5-backend@npm:^10.0.2":
- version: 10.0.2
- resolution: "react-dnd-html5-backend@npm:10.0.2"
+"react-dnd-html5-backend@npm:^16.0.1":
+ version: 16.0.1
+ resolution: "react-dnd-html5-backend@npm:16.0.1"
dependencies:
- dnd-core: ^10.0.2
- checksum: a3f5d41e71216c52460f9c0f719d08458ff8744ac95c6374d355bb59fbca8263ddadab275b7100336d2085214a0c5bbc03d307ec2161eebb94052922534b51ba
+ dnd-core: ^16.0.1
+ checksum: e2368bf85d5632a5cd867b743feb54c9052d909ea5331608860fa455edf3c633ac791f5b338e3db29b19ea8670c0ba5fb43c9c1c2510760bea030811d726cdfa
languageName: node
linkType: hard
-"react-dnd@npm:^10.0.2":
- version: 10.0.2
- resolution: "react-dnd@npm:10.0.2"
+"react-dnd@npm:^16.0.1":
+ version: 16.0.1
+ resolution: "react-dnd@npm:16.0.1"
dependencies:
- "@react-dnd/shallowequal": ^2.0.0
- "@types/hoist-non-react-statics": ^3.3.1
- dnd-core: ^10.0.2
- hoist-non-react-statics: ^3.3.0
+ "@react-dnd/invariant": ^4.0.1
+ "@react-dnd/shallowequal": ^4.0.1
+ dnd-core: ^16.0.1
+ fast-deep-equal: ^3.1.3
+ hoist-non-react-statics: ^3.3.2
peerDependencies:
- react: ">= 16.8"
- react-dom: ">= 16.8"
- checksum: 4ce085a4b09bed8453b50403669495332cd273a892ec8ae0037ad37102afdaf04fbade55b6b1db88f0b21149b7fe7cafceeba697bb0c9aa73244baa8464c963b
+ "@types/hoist-non-react-statics": ">= 3.3.1"
+ "@types/node": ">= 12"
+ "@types/react": ">= 16"
+ react: ">= 16.14"
+ peerDependenciesMeta:
+ "@types/hoist-non-react-statics":
+ optional: true
+ "@types/node":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: e8da2186aaafcd5bb41c090a995c963a7c3c73c20991667a2cfc0c800d7f7f73913414b2e61c437cdb6221bb2151bd5174088b8b42c17056a896fc4d1da5729f
languageName: node
linkType: hard
@@ -15541,7 +15541,7 @@ __metadata:
languageName: node
linkType: hard
-"redux@npm:^4.0.4, redux@npm:^4.0.5":
+"redux@npm:^4.0.5, redux@npm:^4.2.0":
version: 4.2.1
resolution: "redux@npm:4.2.1"
dependencies: