From 6323b0e1a0adcd9d112cc08c69558cfb760a30a6 Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Wed, 2 Apr 2025 11:12:04 +0200
Subject: [PATCH] fix: changed library, added keys for droppable and draggable
 items

---
 package-lock.json                           | 157 ++++++++------------
 package.json                                |   4 +-
 src/BlockPlaceholders/BlockPlaceholders.jsx |   2 +-
 src/FlexibleTable/FlexibleTable.jsx         |   4 +-
 src/FlexibleTable/TableBody.jsx             |   7 +-
 src/FlexibleTable/TableHead.jsx             |   2 +-
 6 files changed, 70 insertions(+), 106 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e42dea2..5c2d3be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,11 @@
 			"name": "wordpress-ui-components",
 			"version": "1.0.0",
 			"dependencies": {
+				"@hello-pangea/dnd": "^18.0.1",
 				"@wordpress/block-editor": "^14.13.0",
 				"@wordpress/components": "^29.4.0",
 				"@wordpress/i18n": "^5.18.0",
-				"react": "^18.3.1",
-				"react-beautiful-dnd": "^13.1.1"
+				"react": "^18.3.1"
 			}
 		},
 		"node_modules/@ariakit/core": {
@@ -383,6 +383,58 @@
 			"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
 			"license": "MIT"
 		},
+		"node_modules/@hello-pangea/dnd": {
+			"version": "18.0.1",
+			"resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+			"integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@babel/runtime": "^7.26.7",
+				"css-box-model": "^1.2.1",
+				"raf-schd": "^4.0.3",
+				"react-redux": "^9.2.0",
+				"redux": "^5.0.1"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0 || ^19.0.0",
+				"react-dom": "^18.0.0 || ^19.0.0"
+			}
+		},
+		"node_modules/@hello-pangea/dnd/node_modules/@babel/runtime": {
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+			"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@hello-pangea/dnd/node_modules/react-redux": {
+			"version": "9.2.0",
+			"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+			"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/use-sync-external-store": "^0.0.6",
+				"use-sync-external-store": "^1.4.0"
+			},
+			"peerDependencies": {
+				"@types/react": "^18.2.25 || ^19",
+				"react": "^18.0 || ^19",
+				"redux": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"redux": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.8",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -893,16 +945,6 @@
 			"integrity": "sha512-9VZUA5omXBfn+hDxFjUDu1FOJTBM3LmvqfDey+Z6Aa8B8/JmF5SMj6FBrjfgJ/Q3YXOZd3qyTDfJyMZSs/wCUA==",
 			"license": "MIT"
 		},
-		"node_modules/@types/hoist-non-react-statics": {
-			"version": "3.3.6",
-			"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
-			"integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/react": "*",
-				"hoist-non-react-statics": "^3.3.0"
-			}
-		},
 		"node_modules/@types/mousetrap": {
 			"version": "1.6.15",
 			"resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.15.tgz",
@@ -940,26 +982,11 @@
 				"@types/react": "^18.0.0"
 			}
 		},
-		"node_modules/@types/react-redux": {
-			"version": "7.1.34",
-			"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
-			"integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/hoist-non-react-statics": "^3.3.0",
-				"@types/react": "*",
-				"hoist-non-react-statics": "^3.3.0",
-				"redux": "^4.0.0"
-			}
-		},
-		"node_modules/@types/react-redux/node_modules/redux": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-			"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.9.2"
-			}
+		"node_modules/@types/use-sync-external-store": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+			"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+			"license": "MIT"
 		},
 		"node_modules/@use-gesture/core": {
 			"version": "10.3.1",
@@ -2423,12 +2450,6 @@
 			"integrity": "sha512-yywVJy8ctVlN5lNPxsep5urnZ6TTclwPEyigM9M3Bi8vseJBOfqNrGWN/r8NzuIt3PovM323W04blJfGQfQSVg==",
 			"license": "MIT"
 		},
-		"node_modules/memoize-one": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-			"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-			"license": "MIT"
-		},
 		"node_modules/moment": {
 			"version": "2.30.1",
 			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -2767,35 +2788,6 @@
 				"react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
 			}
 		},
-		"node_modules/react-beautiful-dnd": {
-			"version": "13.1.1",
-			"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
-			"integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
-			"deprecated": "react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672",
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@babel/runtime": "^7.9.2",
-				"css-box-model": "^1.2.0",
-				"memoize-one": "^5.1.1",
-				"raf-schd": "^4.0.2",
-				"react-redux": "^7.2.0",
-				"redux": "^4.0.4",
-				"use-memo-one": "^1.1.1"
-			},
-			"peerDependencies": {
-				"react": "^16.8.5 || ^17.0.0 || ^18.0.0",
-				"react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
-			}
-		},
-		"node_modules/react-beautiful-dnd/node_modules/redux": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-			"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.9.2"
-			}
-		},
 		"node_modules/react-colorful": {
 			"version": "5.6.1",
 			"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
@@ -2839,37 +2831,6 @@
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
 			"license": "MIT"
 		},
-		"node_modules/react-redux": {
-			"version": "7.2.9",
-			"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
-			"integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.15.4",
-				"@types/react-redux": "^7.1.20",
-				"hoist-non-react-statics": "^3.3.2",
-				"loose-envify": "^1.4.0",
-				"prop-types": "^15.7.2",
-				"react-is": "^17.0.2"
-			},
-			"peerDependencies": {
-				"react": "^16.8.3 || ^17 || ^18"
-			},
-			"peerDependenciesMeta": {
-				"react-dom": {
-					"optional": true
-				},
-				"react-native": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/react-redux/node_modules/react-is": {
-			"version": "17.0.2",
-			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-			"license": "MIT"
-		},
 		"node_modules/react-remove-scroll": {
 			"version": "2.6.3",
 			"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
diff --git a/package.json b/package.json
index 677b5e5..2da5f90 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
 	},
 	"private": true,
 	"dependencies": {
+		"@hello-pangea/dnd": "^18.0.1",
 		"@wordpress/block-editor": "^14.13.0",
 		"@wordpress/components": "^29.4.0",
 		"@wordpress/i18n": "^5.18.0",
-		"react": "^18.3.1",
-		"react-beautiful-dnd": "^13.1.1"
+		"react": "^18.3.1"
 	}
 }
diff --git a/src/BlockPlaceholders/BlockPlaceholders.jsx b/src/BlockPlaceholders/BlockPlaceholders.jsx
index 9728205..0e4dbce 100644
--- a/src/BlockPlaceholders/BlockPlaceholders.jsx
+++ b/src/BlockPlaceholders/BlockPlaceholders.jsx
@@ -8,7 +8,7 @@ export default function BlockPlaceholders({placeholders, children}) {
 			{children && <p className='fi-placeholders-list-description'>{children}</p>}
 			{
 				placeholders.map((placeholder) => {
-					return <Placeholder label={placeholder.label}>{placeholder.description}</Placeholder>
+					return <Placeholder key={placeholder.label} label={placeholder.label}>{placeholder.description}</Placeholder>
 				})
 			}
 		</PanelBody>
diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx
index 2a0d172..dcc2c0b 100644
--- a/src/FlexibleTable/FlexibleTable.jsx
+++ b/src/FlexibleTable/FlexibleTable.jsx
@@ -1,7 +1,7 @@
 import {__} from '@wordpress/i18n';
 import {InspectorControls, useBlockProps,} from '@wordpress/block-editor';
 import {PanelBody, ToggleControl} from '@wordpress/components';
-import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
+import {DragDropContext, Draggable, Droppable} from "@hello-pangea/dnd";
 import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index";
 import TableBody from "./TableBody";
 import TableHead from "./TableHead";
@@ -120,7 +120,7 @@ export default function FlexibleTable({
 									style={{padding: 0, listStyle: "none"}}
 								>
 									{headers.map((header, index) => (
-										<Draggable key={`fitb-draggable-${index}-${header}`} draggableId={header} index={index}>
+										<Draggable key={`draggable-${header}-${index}`} draggableId={`draggable-${header}-${index}`} index={index}>
 											{(provided) => (
 												<li
 													ref={provided.innerRef}
diff --git a/src/FlexibleTable/TableBody.jsx b/src/FlexibleTable/TableBody.jsx
index aeb7d68..31b592a 100644
--- a/src/FlexibleTable/TableBody.jsx
+++ b/src/FlexibleTable/TableBody.jsx
@@ -28,7 +28,9 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
 		<tbody className={"fitb-item-table-body"}>
 
 		{Array.from({length: 2}).map((_, trIndex) => (
-			<tr className={"fitb-item-table-row"} style={{
+			<tr className={"fitb-item-table-row"}
+				key={`fitb-item-table-row-${trIndex}`}
+				style={{
 				background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
 				borderWidth: "0px",
 				borderStyle: "solid",
@@ -38,7 +40,8 @@ export default function TableBody({tableStyles, updateCell, rows, states}) {
 			}}>
 				{rows.map((row, index) => (
 					states[index] ?
-						<td className={"fitb-item-table-cell"} key={`fitb-item-table-cell-${index}`}
+						<td className={"fitb-item-table-cell"}
+							key={`fitb-item-table-cell-${index}`}
 							style={{
 								borderWidth: "0px",
 								borderStyle: "solid",
diff --git a/src/FlexibleTable/TableHead.jsx b/src/FlexibleTable/TableHead.jsx
index 39989eb..1c4d1d5 100644
--- a/src/FlexibleTable/TableHead.jsx
+++ b/src/FlexibleTable/TableHead.jsx
@@ -31,7 +31,7 @@ export default function TableHead( {headers, updateHeader, tableStyles, states}
 		}}>
 			{headers.map((header, index) => (
 				states[index] ?
-					<th className={"fitb-item-table-header-cell"} key={index}
+					<th className={"fitb-item-table-header-cell"} key={`fitb-item-table-header-cell-${index}`} data-index={index}
 						style={{
 							borderStyle: "solid",
 							borderWidth: "0px",
-- 
GitLab