diff --git a/package-lock.json b/package-lock.json index 01dd960e4..0ae358d25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7172,6 +7172,52 @@ "@hapi/hoek": "^9.0.0" } }, + "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/react-redux": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz", + "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/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/@hello-pangea/dnd/node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -13206,15 +13252,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@types/react-beautiful-dnd": { - "version": "13.1.8", - "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz", - "integrity": "sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-dom": { "version": "18.3.7", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", @@ -13234,17 +13271,6 @@ "@types/react": "*" } }, - "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==", - "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-router": { "version": "5.1.20", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", @@ -13405,6 +13431,12 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" }, + "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/@types/wait-on": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/@types/wait-on/-/wait-on-5.3.4.tgz", @@ -26330,11 +26362,6 @@ "url": "https://github.com/sponsors/streamich" } }, - "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==" - }, "node_modules/merge-descriptors": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz", @@ -31822,25 +31849,6 @@ "lodash-es": "^4.17.21" } }, - "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", - "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-cookie": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.2.tgz", @@ -32084,35 +32092,6 @@ "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz", "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==" }, - "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==", - "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==" - }, "node_modules/react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", @@ -36979,14 +36958,6 @@ } } }, - "node_modules/use-memo-one": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", - "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", @@ -39892,6 +39863,7 @@ "@fontsource/inter": "^5.2.8", "@fontsource/material-icons": "^5.2.7", "@fontsource/roboto": "^5.2.10", + "@hello-pangea/dnd": "^18.0.1", "@mui/icons-material": "^7.1.1", "@mui/lab": "^7.0.0-beta.13", "@mui/material": "^7.1.1", @@ -39910,7 +39882,6 @@ "lodash.differencewith": "^4.5.0", "lodash.intersection": "^4.4.0", "nanoid": "^5.1.5", - "react-beautiful-dnd": "^13.1.1", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-markdown": "^8.0.7", @@ -39937,7 +39908,6 @@ "@types/lodash.differencewith": "^4.5.9", "@types/lodash.intersection": "^4.4.9", "@types/react": "^19.1.0", - "@types/react-beautiful-dnd": "^13.1.8", "@types/react-dom": "^19.1.1", "chokidar": "^4.0.3", "concurrently": "^9.2.4", diff --git a/packages/smart-forms-renderer/package.json b/packages/smart-forms-renderer/package.json index e77eb07da..0eb848338 100644 --- a/packages/smart-forms-renderer/package.json +++ b/packages/smart-forms-renderer/package.json @@ -35,6 +35,7 @@ "@fontsource/inter": "^5.2.8", "@fontsource/material-icons": "^5.2.7", "@fontsource/roboto": "^5.2.10", + "@hello-pangea/dnd": "^18.0.1", "@mui/icons-material": "^7.1.1", "@mui/lab": "^7.0.0-beta.13", "@mui/material": "^7.1.1", @@ -53,7 +54,6 @@ "lodash.differencewith": "^4.5.0", "lodash.intersection": "^4.4.0", "nanoid": "^5.1.5", - "react-beautiful-dnd": "^13.1.1", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-markdown": "^8.0.7", @@ -84,7 +84,6 @@ "@types/lodash.differencewith": "^4.5.9", "@types/lodash.intersection": "^4.4.9", "@types/react": "^19.1.0", - "@types/react-beautiful-dnd": "^13.1.8", "@types/react-dom": "^19.1.1", "chokidar": "^4.0.3", "concurrently": "^9.2.4", diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx index 20c90f098..83b51fffa 100644 --- a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx +++ b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableBody.tsx @@ -21,8 +21,8 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4'; import type { GroupTableRowModel } from '../../../interfaces/groupTable.interface'; import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface'; import GroupTableRow from './GroupTableRow'; -import type { DropResult } from 'react-beautiful-dnd'; -import { DragDropContext, Droppable } from 'react-beautiful-dnd'; +import type { DropResult } from '@hello-pangea/dnd'; +import { DragDropContext, Droppable } from '@hello-pangea/dnd'; import { reorderRows } from '../../../utils/groupTable'; import TableBody from '@mui/material/TableBody'; diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx index 6911547b9..41ddac728 100644 --- a/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx +++ b/packages/smart-forms-renderer/src/components/FormComponents/Tables/GroupTableRow.tsx @@ -27,7 +27,7 @@ import type { GroupTableRowModel } from '../../../interfaces/groupTable.interfac import DragIndicator from '@mui/icons-material/DragIndicator'; import TableCell from '@mui/material/TableCell'; import Box from '@mui/material/Box'; -import { Draggable } from 'react-beautiful-dnd'; +import { Draggable } from '@hello-pangea/dnd'; import { StyledGroupTableRow } from './Table.styles'; interface GroupTableRowProps extends PropsWithParentIsReadOnlyAttribute, TableRowProps { diff --git a/packages/smart-forms-renderer/src/components/Renderer/BaseRenderer.tsx b/packages/smart-forms-renderer/src/components/Renderer/BaseRenderer.tsx index 45af37b0f..223bc91fc 100644 --- a/packages/smart-forms-renderer/src/components/Renderer/BaseRenderer.tsx +++ b/packages/smart-forms-renderer/src/components/Renderer/BaseRenderer.tsx @@ -32,18 +32,14 @@ import QuestionnaireTitleText from '../FormComponents/ItemParts/QuestionnaireTit import dayjs from 'dayjs'; import localizedFormat from 'dayjs/plugin/localizedFormat'; import customParseFormat from 'dayjs/plugin/customParseFormat'; -import { - silenceAutocompleteTextareaWarning, - silenceReactBeautifulDndError -} from '../../utils/silenceWarnings'; +import { silenceAutocompleteTextareaWarning } from '../../utils/silenceWarnings'; // Setup DayJs extensions when BaseRenderer.tsx is called dayjs.extend(localizedFormat); dayjs.extend(customParseFormat); -// Silence warnings for MUI Autocomplete with Textarea and react-beautiful-dnd Droppable error +// Silence warnings for MUI Autocomplete with Textarea silenceAutocompleteTextareaWarning(); -silenceReactBeautifulDndError(); /** * Main component of the form-rendering engine. diff --git a/packages/smart-forms-renderer/src/utils/silenceWarnings.ts b/packages/smart-forms-renderer/src/utils/silenceWarnings.ts index 810308bb5..dc017d5c0 100644 --- a/packages/smart-forms-renderer/src/utils/silenceWarnings.ts +++ b/packages/smart-forms-renderer/src/utils/silenceWarnings.ts @@ -39,31 +39,3 @@ export function silenceAutocompleteTextareaWarning() { originalWarn(...args); }; } - -/** - * This function monkey-patches `console.error` to silence a specific warning from react-beautiful-dnd about a soon to be deprecated feature. - * The project is sunsetted, so it is unlikely to be fixed. - * - * Monkey-patching console methods is not best practice as it hides important warnings/errors and make debugging harder. - * - * However, in this case: - * - The warning only appears in development. - * - The message cannot be actioned by us (it's internal to the library). See https://github.com/atlassian/react-beautiful-dnd/issues/2563 - * - It clutters the console without providing useful information. - */ -export function silenceReactBeautifulDndError() { - const originalError = console.error; - - console.error = (...args: any[]) => { - if ( - typeof args[0] === 'string' && - args[0].includes( - 'Warning: Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release.' - ) - ) { - // ignore this warning - return; - } - originalError(...args); - }; -}