Upgrade react-beautiful-dnd to v13

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added `number` and `string` to `size` type of `EuiImage` for setting custom sizes ([#3012](https://github.com/elastic/eui/pull/3012))
 - Improved `EuiButtonEmpty` focus state when the `color` type is `text` ([#3135](https://github.com/elastic/eui/pull/3135))
 - Added `EuiLoadingElastic` component ([#3017](https://github.com/elastic/eui/pull/3017))
+- Upgraded `react-beautiful-dnd` to v13 ([#3064](https://github.com/elastic/eui/pull/3064))
 
 **Bug Fixes**
 

package.json

@@ -50,7 +50,7 @@
     "@types/enzyme": "^3.1.13",
     "@types/lodash": "^4.14.116",
     "@types/numeral": "^0.0.25",
-    "@types/react-beautiful-dnd": "^10.1.0",
+    "@types/react-beautiful-dnd": "^12.1.2",
     "@types/react-input-autosize": "^2.0.2",
     "@types/react-virtualized": "^9.18.7",
     "chroma-js": "^2.0.4",
@@ -62,7 +62,7 @@
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
     "react-ace": "^7.0.5",
-    "react-beautiful-dnd": "^10.1.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",

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

@@ -1,55 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiDraggable can be given ReactElement children 1`] = `
-<div
-  class="euiDroppable euiDroppable--noGrow"
-  data-react-beautiful-dnd-droppable="1"
-  data-test-subj="droppable"
->
-  <div
-    aria-roledescription="Draggable item. Press space bar to lift"
-    class="euiDraggable"
-    data-react-beautiful-dnd-drag-handle="1"
-    data-react-beautiful-dnd-draggable="1"
-    data-test-subj="draggable"
-    draggable="false"
-    tabindex="0"
-  >
-    <div
-      class="euiDraggable__item"
-    >
-      Hello
-    </div>
+"<div data-rbd-droppable-id=\\"testDroppable\\" data-rbd-droppable-context-id=\\"0\\"
+data-test-subj=\\"droppable\\" class=\\"euiDroppable euiDroppable--noGrow\\">
+  <div data-rbd-draggable-context-id=\\"0\\" data-rbd-draggable-id=\\"testDraggable\\"
+  tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rbd-hidden-text-0-hidden-text-0\\"
+  data-rbd-drag-handle-draggable-id=\\"testDraggable\\" data-rbd-drag-handle-context-id=\\"0\\"
+  draggable=\\"false\\" data-test-subj=\\"draggable\\" class=\\"euiDraggable\\">
+    <div class=\\"euiDraggable__item\\">Hello</div>
   </div>
-  <div
-    class="euiDroppable__placeholder"
-  />
-</div>
+  <div class=\\"euiDroppable__placeholder\\"></div>
+</div>"
 `;
 
+exports[`EuiDraggable can be given ReactElement children 2`] = `undefined`;
+
 exports[`EuiDraggable is rendered 1`] = `
-<div
-  class="euiDroppable euiDroppable--noGrow"
-  data-react-beautiful-dnd-droppable="0"
-  data-test-subj="droppable"
->
-  <div
-    aria-roledescription="Draggable item. Press space bar to lift"
-    class="euiDraggable"
-    data-react-beautiful-dnd-drag-handle="0"
-    data-react-beautiful-dnd-draggable="0"
-    data-test-subj="draggable"
-    draggable="false"
-    tabindex="0"
-  >
-    <div
-      class="euiDraggable__item"
-    >
-      Hello
-    </div>
+"<div data-rbd-droppable-id=\\"testDroppable\\" data-rbd-droppable-context-id=\\"0\\"
+data-test-subj=\\"droppable\\" class=\\"euiDroppable euiDroppable--noGrow\\">
+  <div data-rbd-draggable-context-id=\\"0\\" data-rbd-draggable-id=\\"testDraggable\\"
+  tabindex=\\"0\\" role=\\"button\\" aria-describedby=\\"rbd-hidden-text-0-hidden-text-0\\"
+  data-rbd-drag-handle-draggable-id=\\"testDraggable\\" data-rbd-drag-handle-context-id=\\"0\\"
+  draggable=\\"false\\" data-test-subj=\\"draggable\\" class=\\"euiDraggable\\">
+    <div class=\\"euiDraggable__item\\">Hello</div>
   </div>
-  <div
-    class="euiDroppable__placeholder"
-  />
-</div>
+  <div class=\\"euiDroppable__placeholder\\"></div>
+</div>"
 `;
+
+exports[`EuiDraggable is rendered 2`] = `undefined`;

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

@@ -3,7 +3,8 @@
 exports[`EuiDroppable can be given ReactElement children 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
-  data-react-beautiful-dnd-droppable="2"
+  data-rbd-droppable-context-id="2"
+  data-rbd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div />
@@ -16,7 +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-react-beautiful-dnd-droppable="3"
+  data-rbd-droppable-context-id="3"
+  data-rbd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div />
@@ -31,7 +33,8 @@ exports[`EuiDroppable can be given multiple ReactElement children 1`] = `
 exports[`EuiDroppable is rendered 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"
-  data-react-beautiful-dnd-droppable="1"
+  data-rbd-droppable-context-id="1"
+  data-rbd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div />

src/components/drag_and_drop/drag_drop_context.test.tsx

@@ -1,27 +1,42 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import { findTestSubject } from '../../test';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiDragDropContext } from './';
 import { EuiDragDropContextContext } from './drag_drop_context';
 
+function snapshotDragDropContext(component: ReactWrapper) {
+  // Get the Portal's sibling and return its html
+  const renderedHtml = component.html();
+  const container = document.createElement('div');
+  container.innerHTML = renderedHtml;
+  return container.firstChild;
+}
+
 describe('EuiDragDropContext', () => {
   test('is rendered', () => {
     const handler = jest.fn();
-    const component = render(
+    const component = mount(
       <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <div />
       </EuiDragDropContext>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(snapshotDragDropContext(component)).toMatchSnapshot();
   });
 
   describe('custom behavior', () => {
     describe('isDraggingType', () => {
       test('is set on proprietary context', () => {
+        jest.mock('react', () => {
+          const react = jest.requireActual('react');
+          return {
+            ...react,
+            useLayoutEffect: react.useEffect,
+          };
+        });
         const handler = jest.fn();
         const component = mount(
           <EuiDragDropContext onDragEnd={handler} {...requiredProps}>

src/components/drag_and_drop/draggable.test.tsx

@@ -1,39 +1,64 @@
 import React from 'react';
-import { render } from 'enzyme';
-
-// import { findTestSubject } from '../../test';
+import ReactDOM from 'react-dom';
+import { resetServerContext } from 'react-beautiful-dnd';
+import html from 'html';
 import { requiredProps } from '../../test/required_props';
-
 import { EuiDragDropContext, EuiDraggable, EuiDroppable } from './';
 
+function takeSnapshot(element: HTMLElement) {
+  expect(
+    html.prettyPrint(element.innerHTML, {
+      indent_size: 2,
+      unformatted: [], // Expand all tags, including spans
+    })
+  ).toMatchSnapshot();
+}
+
 describe('EuiDraggable', () => {
+  let appDiv: HTMLElement;
+
+  beforeEach(() => {
+    resetServerContext(); // resets react-beautiful-dnd's internal instance counter which affects snapshots
+    appDiv = document.createElement('div');
+    document.body.appendChild(appDiv);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(appDiv);
+    document.body.removeChild(appDiv);
+  });
+
   test('is rendered', () => {
     const handler = jest.fn();
-    const component = render(
+
+    ReactDOM.render(
       <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <EuiDroppable droppableId="testDroppable">
           <EuiDraggable draggableId="testDraggable" index={0}>
             {() => <div>Hello</div>}
           </EuiDraggable>
         </EuiDroppable>
-      </EuiDragDropContext>
+      </EuiDragDropContext>,
+      appDiv
     );
 
-    expect(component).toMatchSnapshot();
+    expect(takeSnapshot(appDiv)).toMatchSnapshot();
   });
 
   test('can be given ReactElement children', () => {
     const handler = jest.fn();
-    const component = render(
+
+    ReactDOM.render(
       <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <EuiDroppable droppableId="testDroppable">
           <EuiDraggable draggableId="testDraggable" index={0}>
             <div>Hello</div>
           </EuiDraggable>
         </EuiDroppable>
-      </EuiDragDropContext>
+      </EuiDragDropContext>,
+      appDiv
     );
 
-    expect(component).toMatchSnapshot();
+    expect(takeSnapshot(appDiv)).toMatchSnapshot();
   });
 });

src/components/drag_and_drop/draggable.tsx

@@ -61,7 +61,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
       index={index}
       isDragDisabled={isDragDisabled}
       {...rest}>
-      {(provided, snapshot) => {
+      {(provided, snapshot, rubric) => {
         const classes = classNames(
           'euiDraggable',
           {
@@ -81,7 +81,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
         });
         const DraggableElement =
           typeof children === 'function'
-            ? children(provided, snapshot)
+            ? children(provided, snapshot, rubric)
             : (children as ReactElement); // as specified by `DraggableProps`
         return (
           <Fragment>

src/components/drag_and_drop/droppable.test.tsx

@@ -1,40 +1,70 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import { findTestSubject } from '../../test';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiDragDropContext, EuiDroppable } from './';
 import { EuiDroppableContext } from './droppable';
 
+function snapshotDragDropContext(component: ReactWrapper) {
+  // Get the Portal's sibling and return its html
+  const renderedHtml = component.html();
+  const container = document.createElement('div');
+  container.innerHTML = renderedHtml;
+  return container.firstChild;
+}
+
 describe('EuiDroppable', () => {
   test('is rendered', () => {
     const handler = jest.fn();
-    const component = render(
+    jest.mock('react', () => {
+      const react = jest.requireActual('react');
+      return {
+        ...react,
+        useLayoutEffect: react.useEffect,
+      };
+    });
+    const component = mount(
       <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <EuiDroppable droppableId="testDroppable">{() => <div />}</EuiDroppable>
       </EuiDragDropContext>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(snapshotDragDropContext(component)).toMatchSnapshot();
   });
 
   test('can be given ReactElement children', () => {
     const handler = jest.fn();
-    const component = render(
+    jest.mock('react', () => {
+      const react = jest.requireActual('react');
+      return {
+        ...react,
+        useLayoutEffect: react.useEffect,
+      };
+    });
+    const component = mount(
       <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <EuiDroppable droppableId="testDroppable">
           <div />
         </EuiDroppable>
       </EuiDragDropContext>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(snapshotDragDropContext(component)).toMatchSnapshot();
   });
 
   test('can be given multiple ReactElement children', () => {
     const handler = jest.fn();
-    const component = render(
+    jest.mock('react', () => {
+      const react = jest.requireActual('react');
+      return {
+        ...react,
+        useLayoutEffect: react.useEffect,
+      };
+    });
+
+    const component = mount(
       <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <EuiDroppable droppableId="testDroppable">
           <div />
@@ -44,11 +74,18 @@ describe('EuiDroppable', () => {
       </EuiDragDropContext>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(snapshotDragDropContext(component)).toMatchSnapshot();
   });
 
   describe('custom behavior', () => {
     describe('cloneDraggables', () => {
+      jest.mock('react', () => {
+        const react = jest.requireActual('react');
+        return {
+          ...react,
+          useLayoutEffect: react.useEffect,
+        };
+      });
       const handler = jest.fn();
       const component = mount(
         <EuiDragDropContext onDragEnd={handler} {...requiredProps}>