feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd

package.json

@@ -62,10 +62,10 @@
     "test-staged"
   ],
   "dependencies": {
+    "@hello-pangea/dnd": "^16.2.0",
     "@types/chroma-js": "^2.0.0",
     "@types/lodash": "^4.14.194",
     "@types/numeral": "^0.0.28",
-    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-input-autosize": "^2.2.1",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -78,7 +78,6 @@
     "mdast-util-to-hast": "^10.0.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
-    "react-beautiful-dnd": "^13.1.0",
     "react-dropzone": "^11.5.3",
     "react-element-to-jsx-string": "^14.3.4",
     "react-focus-on": "^3.7.0",

src-docs/src/views/drag_and_drop/drag_and_drop_example.js

@@ -42,10 +42,14 @@ export const DragAndDropExample = {
       <EuiText>
         <p>
           An extension of{' '}
+          <EuiLink href="https://github.com/hello-pangea/dnd">
+            @hello-pangea/dnd
+          </EuiLink>{' '}
+          (which is an actively maintained fork of{' '}
           <EuiLink href="https://github.com/atlassian/react-beautiful-dnd">
             react-beautiful-dnd
-          </EuiLink>{' '}
-          with a compatible API and built-in style opinions. Functionality
+          </EuiLink>
+          ) with a compatible API and built-in style opinions. Functionality
           results from 3 components working together:
         </p>
         <ul>
@@ -72,14 +76,15 @@ export const DragAndDropExample = {
           Drag and drop interfaces are not well-adapted to many cases, and may
           be less suitable than other form types for data operations. For
           instance, drag and drop interaction relies heavily on spatial
-          orientation that may not be entirelty valid to all users (e.g., screen
+          orientation that may not be entirely valid to all users (e.g., screen
           readers as the sole source of information). Similarly, users
           navigating by keyboard may not be afforded nuanced, dual-axis drag
           item manipulation.
         </p>
         <p>
-          {`EUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
-          With that in mind, keep your users' working context in mind.`}
+          EUI (largely due to the great work already in @hello-pangea/dnd) has
+          and will continue to ensure accessibility where possible. With that in
+          mind, keep your users&apos; working context in mind.
         </p>
       </EuiCallOut>
     </React.Fragment>

src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

@@ -82,14 +82,14 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
       >
         <div
           class="euiDroppable euiDroppable--noGrow"
-          data-rbd-droppable-context-id="0"
-          data-rbd-droppable-id="columnOrder"
+          data-rfd-droppable-context-id="0"
+          data-rfd-droppable-id="columnOrder"
           data-test-subj="droppable"
         >
           <div
             class="euiDraggable euiDraggable--hasCustomDragHandle"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="columnA"
+            data-rfd-draggable-context-id="0"
+            data-rfd-draggable-id="columnA"
             data-test-subj="draggable"
             role="group"
           >
@@ -130,11 +130,11 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   </div>
                 </div>
                 <div
-                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                   aria-hidden="true"
                   class="euiFlexItem emotion-euiFlexItem-grow-1"
-                  data-rbd-drag-handle-context-id="0"
-                  data-rbd-drag-handle-draggable-id="columnA"
+                  data-rfd-drag-handle-context-id="0"
+                  data-rfd-drag-handle-draggable-id="columnA"
                   draggable="false"
                   role="button"
                   tabindex="-1"
@@ -146,11 +146,11 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   </span>
                 </div>
                 <div
-                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                   aria-label="Drag handle"
                   class="euiFlexItem emotion-euiFlexItem-growZero"
-                  data-rbd-drag-handle-context-id="0"
-                  data-rbd-drag-handle-draggable-id="columnA"
+                  data-rfd-drag-handle-context-id="0"
+                  data-rfd-drag-handle-draggable-id="columnA"
                   draggable="false"
                   role="button"
                   tabindex="0"
@@ -165,8 +165,8 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
           </div>
           <div
             class="euiDraggable euiDraggable--hasCustomDragHandle"
-            data-rbd-draggable-context-id="0"
-            data-rbd-draggable-id="columnB"
+            data-rfd-draggable-context-id="0"
+            data-rfd-draggable-id="columnB"
             data-test-subj="draggable"
             role="group"
           >
@@ -207,11 +207,11 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   </div>
                 </div>
                 <div
-                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                   aria-hidden="true"
                   class="euiFlexItem emotion-euiFlexItem-grow-1"
-                  data-rbd-drag-handle-context-id="0"
-                  data-rbd-drag-handle-draggable-id="columnB"
+                  data-rfd-drag-handle-context-id="0"
+                  data-rfd-drag-handle-draggable-id="columnB"
                   draggable="false"
                   role="button"
                   tabindex="-1"
@@ -223,11 +223,11 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   </span>
                 </div>
                 <div
-                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                   aria-label="Drag handle"
                   class="euiFlexItem emotion-euiFlexItem-growZero"
-                  data-rbd-drag-handle-context-id="0"
-                  data-rbd-drag-handle-draggable-id="columnB"
+                  data-rfd-drag-handle-context-id="0"
+                  data-rfd-drag-handle-draggable-id="columnB"
                   draggable="false"
                   role="button"
                   tabindex="0"

src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap

@@ -63,14 +63,14 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
     >
       <div
         class="euiDroppable euiDroppable--noGrow"
-        data-rbd-droppable-context-id="0"
-        data-rbd-droppable-id="columnSorting"
+        data-rfd-droppable-context-id="0"
+        data-rfd-droppable-id="columnSorting"
         data-test-subj="droppable"
       >
         <div
           class="euiDraggable euiDraggable--hasCustomDragHandle"
-          data-rbd-draggable-context-id="0"
-          data-rbd-draggable-id="columnA"
+          data-rfd-draggable-context-id="0"
+          data-rfd-draggable-id="columnA"
           data-test-subj="draggable"
           role="group"
         >
@@ -103,11 +103,11 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 </button>
               </div>
               <div
-                aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                aria-describedby="rfd-hidden-text-0-hidden-text-0"
                 aria-hidden="true"
                 class="euiFlexItem euiDataGridColumnSorting__name emotion-euiFlexItem-grow-1"
-                data-rbd-drag-handle-context-id="0"
-                data-rbd-drag-handle-draggable-id="columnA"
+                data-rfd-drag-handle-context-id="0"
+                data-rfd-drag-handle-draggable-id="columnA"
                 draggable="false"
                 role="button"
                 tabindex="-1"
@@ -206,11 +206,11 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 </fieldset>
               </div>
               <div
-                aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                aria-describedby="rfd-hidden-text-0-hidden-text-0"
                 aria-label="Drag handle"
                 class="euiFlexItem emotion-euiFlexItem-growZero"
-                data-rbd-drag-handle-context-id="0"
-                data-rbd-drag-handle-draggable-id="columnA"
+                data-rfd-drag-handle-context-id="0"
+                data-rfd-drag-handle-draggable-id="columnA"
                 draggable="false"
                 role="button"
                 tabindex="0"

src/components/datagrid/controls/column_selector.tsx

@@ -26,7 +26,7 @@ import {
   EuiDroppable,
   euiDragDropReorder,
 } from '../../drag_and_drop';
-import { DropResult } from 'react-beautiful-dnd';
+import { DropResult } from '@hello-pangea/dnd';
 import { EuiIcon } from '../../icon';
 import { useDependentState } from '../../../services';
 

src/components/datagrid/controls/column_sorting.tsx

@@ -8,7 +8,7 @@
 
 import classNames from 'classnames';
 import React, { Fragment, ReactNode, useEffect, useState } from 'react';
-import { DropResult } from 'react-beautiful-dnd';
+import { DropResult } from '@hello-pangea/dnd';
 import { EuiButtonEmpty } from '../../button';
 import {
   EuiDragDropContext,

src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap

@@ -3,8 +3,8 @@
 exports[`EuiDroppable can be given ReactElement children 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
-  data-rbd-droppable-context-id="0"
-  data-rbd-droppable-id="testDroppable"
+  data-rfd-droppable-context-id="0"
+  data-rfd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div />
@@ -17,8 +17,8 @@ exports[`EuiDroppable can be given ReactElement children 1`] = `
 exports[`EuiDroppable can be given multiple ReactElement children 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
-  data-rbd-droppable-context-id="0"
-  data-rbd-droppable-id="testDroppable"
+  data-rfd-droppable-context-id="0"
+  data-rfd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div />
@@ -33,8 +33,8 @@ exports[`EuiDroppable can be given multiple ReactElement children 1`] = `
 exports[`EuiDroppable is rendered 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
-  data-rbd-droppable-context-id="0"
-  data-rbd-droppable-id="testDroppable"
+  data-rfd-droppable-context-id="0"
+  data-rfd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div />

src/components/drag_and_drop/drag_and_drop.a11y.tsx

@@ -11,7 +11,7 @@
 /// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
-import { DragDropContextProps } from 'react-beautiful-dnd';
+import { DragDropContextProps } from '@hello-pangea/dnd';
 import { EuiDragDropContext } from './drag_drop_context';
 import { euiDragDropReorder } from './services';
 import { EuiDraggable } from './draggable';

src/components/drag_and_drop/drag_drop_context.tsx

@@ -13,7 +13,7 @@ import {
   DropResult,
   DragStart,
   ResponderProvided,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 
 // export interface EuiDragDropContextProps extends DragDropContextProps {}