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

…-pangea/dnd (#6868) * feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd * test(EuiDraggable): add snapshot test for the basic render assertion and rename test cases
elastic · Jul 24, 2023 · 2943312 · 2943312
1 parent 0cc432c
commit 2943312
Show file tree

Hide file tree

Showing 17 changed files with 2,516 additions and 1,178 deletions.
diff --git a/package.json b/package.json
@@ -63,10 +63,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",
@@ -79,7 +79,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.9.1",

diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/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>

diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -81,14 +81,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"
           >
@@ -129,11 +129,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"
@@ -145,11 +145,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"
@@ -164,8 +164,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"
           >
@@ -206,11 +206,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"
@@ -222,11 +222,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"

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -62,14 +62,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"
         >
@@ -102,11 +102,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"
@@ -205,11 +205,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"

diff --git a/src/components/datagrid/controls/column_selector.tsx b/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';
 

diff --git a/src/components/datagrid/controls/column_sorting.tsx b/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,

diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap
@@ -1,105 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiDraggable can be given ReactElement children 1`] = `
-<div>
+exports[`EuiDraggable renders 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-rfd-droppable-context-id="0"
+  data-rfd-droppable-id="testDroppable"
+  data-test-subj="droppable"
+>
   <div
-    class="euiDroppable euiDroppable--noGrow"
-    data-rbd-droppable-context-id="0"
-    data-rbd-droppable-id="testDroppable"
-    data-test-subj="droppable"
+    aria-describedby="rfd-hidden-text-0-hidden-text-0"
+    class="euiDraggable"
+    data-rfd-drag-handle-context-id="0"
+    data-rfd-drag-handle-draggable-id="testDraggable"
+    data-rfd-draggable-context-id="0"
+    data-rfd-draggable-id="testDraggable"
+    data-test-subj="draggable"
+    draggable="false"
+    role="button"
+    tabindex="0"
   >
     <div
-      aria-describedby="rbd-hidden-text-0-hidden-text-0"
-      class="euiDraggable"
-      data-rbd-drag-handle-context-id="0"
-      data-rbd-drag-handle-draggable-id="testDraggable"
-      data-rbd-draggable-context-id="0"
-      data-rbd-draggable-id="testDraggable"
-      data-test-subj="draggable"
-      draggable="false"
-      role="button"
-      tabindex="0"
+      class="euiDraggable__item"
     >
-      <div
-        class="euiDraggable__item"
-      >
-        Hello
-      </div>
+      Hello
     </div>
-    <div
-      class="euiDroppable__placeholder"
-    />
   </div>
-</div>
-`;
-
-exports[`EuiDraggable can be given ReactElement children 2`] = `undefined`;
-
-exports[`EuiDraggable hasInteractiveChildren renders with role="group" and no tabIndex 1`] = `
-<div>
   <div
-    class="euiDroppable euiDroppable--noGrow"
-    data-rbd-droppable-context-id="0"
-    data-rbd-droppable-id="testDroppable"
-    data-test-subj="droppable"
-  >
-    <div
-      aria-describedby="rbd-hidden-text-0-hidden-text-0"
-      class="euiDraggable"
-      data-rbd-drag-handle-context-id="0"
-      data-rbd-drag-handle-draggable-id="testDraggable"
-      data-rbd-draggable-context-id="0"
-      data-rbd-draggable-id="testDraggable"
-      data-test-subj="draggable"
-      draggable="false"
-      role="group"
-    >
-      <div
-        class="euiDraggable__item"
-      >
-        Hello
-      </div>
-    </div>
-    <div
-      class="euiDroppable__placeholder"
-    />
-  </div>
+    class="euiDroppable__placeholder"
+  />
 </div>
 `;
-
-exports[`EuiDraggable hasInteractiveChildren renders with role="group" and no tabIndex 2`] = `undefined`;
-
-exports[`EuiDraggable is rendered 1`] = `
-<div>
-  <div
-    class="euiDroppable euiDroppable--noGrow"
-    data-rbd-droppable-context-id="0"
-    data-rbd-droppable-id="testDroppable"
-    data-test-subj="droppable"
-  >
-    <div
-      aria-describedby="rbd-hidden-text-0-hidden-text-0"
-      class="euiDraggable"
-      data-rbd-drag-handle-context-id="0"
-      data-rbd-drag-handle-draggable-id="testDraggable"
-      data-rbd-draggable-context-id="0"
-      data-rbd-draggable-id="testDraggable"
-      data-test-subj="draggable"
-      draggable="false"
-      role="button"
-      tabindex="0"
-    >
-      <div
-        class="euiDraggable__item"
-      >
-        Hello
-      </div>
-    </div>
-    <div
-      class="euiDroppable__placeholder"
-    />
-  </div>
-</div>
-`;
-
-exports[`EuiDraggable is rendered 2`] = `undefined`;
diff --git a/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap b/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 />

diff --git a/src/components/drag_and_drop/drag_and_drop.a11y.tsx b/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';

diff --git a/src/components/drag_and_drop/drag_drop_context.tsx b/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 {}