diff --git a/package-lock.json b/package-lock.json
index e42dea269b1e40102b94874da543f98b4d8ec01e..5c2d3be24f001885b7b3d475be838a727304136d 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 677b5e5d7d362445c210dc426db142e9a56c5c5f..2da5f905dc1f638cf2adceaa37892e8a7fc895ea 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 9728205e63f473d9b795268980daeb21dc7fff38..0e4dbceb5afe71a01b2416681668e4c892a8191f 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 2a0d172c2ced2182fe5b792ab689da9a94e96d77..dcc2c0b67715581416c2a509b654ae1a96d17a29 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 aeb7d68e4d1ff691ee50e9310abfb901e68270dc..31b592afd801afa909feb72bf74a6f316adf00e6 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 39989ebb0ea32d105ddd9282ca233fc9ec4060ae..1c4d1d50ede3efdc842993d242a49c1043b7e438 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",