EES-4287 replace react-beautiful-dnd

src/explore-education-statistics-admin/package.json

@@ -63,7 +63,7 @@
     "querystring": "0.2.1",
     "react": "17.0.2",
     "react-app-polyfill": "^3.0.0",
-    "react-beautiful-dnd": "^13.1.1",
+    "@hello-pangea/dnd": "^16.5.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
@@ -111,7 +111,6 @@
     "@types/node": "^16.18.31",
     "@types/qs": "^6.9.7",
     "@types/react": "17.0.27",
-    "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "17.0.9",
     "@types/react-helmet": "^6.1.0",
     "@types/react-lazyload": "^3.0.0",

src/explore-education-statistics-admin/src/components/DraggableItem.tsx

@@ -1,7 +1,7 @@
 import styles from '@admin/components/DraggableItem.module.scss';
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 
 export const DragHandle = ({ className }: { className?: string }) => (
   <span aria-hidden className={className ?? styles.dragHandle}>

src/explore-education-statistics-admin/src/components/DroppableArea.tsx

@@ -1,7 +1,7 @@
 import styles from '@admin/components/DroppableArea.module.scss';
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
-import { DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
+import { DroppableProvided, DroppableStateSnapshot } from '@hello-pangea/dnd';
 
 interface Props {
   children: ReactNode;

src/explore-education-statistics-admin/src/components/editable/BlockDraggable.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import styles from './BlockDraggable.module.scss';
 
 interface Props {

src/explore-education-statistics-admin/src/components/editable/BlockDroppable.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Droppable } from 'react-beautiful-dnd';
+import { Droppable } from '@hello-pangea/dnd';
 
 interface Props {
   droppable: boolean;

src/explore-education-statistics-admin/src/components/editable/EditableAccordion.tsx

@@ -14,7 +14,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import styles from './EditableAccordion.module.scss';
 import {
   DraggableAccordionSectionProps,

src/explore-education-statistics-admin/src/components/editable/EditableSectionBlocks.tsx

@@ -4,7 +4,7 @@ import { useEditingContext } from '@admin/contexts/EditingContext';
 import { EditableBlock } from '@admin/services/types/content';
 import InsetText from '@common/components/InsetText';
 import reorder from '@common/utils/reorder';
-import { DragDropContext, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, DropResult } from '@hello-pangea/dnd';
 import React, { ReactNode, useCallback } from 'react';
 
 export interface EditableSectionBlockProps<

src/explore-education-statistics-admin/src/components/editable/ReorderableAccordion.tsx

@@ -14,7 +14,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
 import styles from './ReorderableAccordion.module.scss';
 import {
   DraggableAccordionSectionProps,

src/explore-education-statistics-admin/src/pages/publication/components/LegacyReleasesTable.tsx

@@ -19,7 +19,7 @@ import reorder from '@common/utils/reorder';
 import styles from '@admin/pages/publication/components/LegacyReleasesTable.module.scss';
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { generatePath } from 'react-router';
 import { useHistory } from 'react-router-dom';
 import ButtonText from '@common/components/ButtonText';

src/explore-education-statistics-admin/src/pages/release/content/components/KeyStatistics.tsx

@@ -10,7 +10,7 @@ import keyStatStyles from '@common/modules/find-statistics/components/KeyStat.mo
 import reorder from '@common/utils/reorder';
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useState } from 'react';
-import { DragDropContext, Draggable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, DropResult } from '@hello-pangea/dnd';
 import AddKeyStatistics from '@admin/pages/release/content/components/AddKeyStatistics';
 
 export interface KeyStatisticsProps {

src/explore-education-statistics-admin/src/pages/release/data/components/ReorderList.tsx

@@ -5,7 +5,7 @@ import ButtonText from '@common/components/ButtonText';
 import reorder from '@common/utils/reorder';
 import classNames from 'classnames';
 import React, { useState } from 'react';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 
 export interface FormattedOption {
   id: string;

src/explore-education-statistics-admin/src/pages/release/datablocks/components/FeaturedTablesTable.tsx

@@ -15,7 +15,7 @@ import useToggle from '@common/hooks/useToggle';
 import React, { useEffect, useState } from 'react';
 import { generatePath } from 'react-router';
 import orderBy from 'lodash/orderBy';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 
 interface Props {
   canUpdateRelease: boolean;