Use react-dnd and related libraries

__tests__/src/components/WorkspaceMosaic.test.js

 import { shallow } from 'enzyme';
-import { MosaicWithoutDragDropContext } from 'react-mosaic-component';
+import { Mosaic } from 'react-mosaic-component';
 import MosaicRenderPreview from '../../../src/containers/MosaicRenderPreview';
 import { WorkspaceMosaic } from '../../../src/components/WorkspaceMosaic';
 
@@ -23,8 +23,8 @@ describe('WorkspaceMosaic', () => {
     wrapper = createWrapper({ windowIds });
   });
   it('should render properly with an initialValue', () => {
-    expect(wrapper.find(MosaicWithoutDragDropContext).length).toEqual(1);
-    expect(wrapper.find(MosaicWithoutDragDropContext).prop('initialValue')).toEqual({
+    expect(wrapper.dive().find(Mosaic).length).toEqual(1);
+    expect(wrapper.dive().find(Mosaic).prop('initialValue')).toEqual({
       direction: 'row', first: '1', second: '2',
     });
   });
@@ -101,7 +101,8 @@ describe('WorkspaceMosaic', () => {
     it('when window is available', () => {
       const renderedTile = wrapper.instance().tileRenderer('1', 'foo');
       expect(renderedTile).not.toBeNull();
-      expect(shallow(renderedTile).find('DropTarget(DragSource(InternalMosaicWindow))').length).toEqual(1);
+      expect(shallow(renderedTile).find('ConnectedInternalMosaicWindow').length).toEqual(1);
+      expect(shallow(renderedTile).find('WithStyles(Connect(WithPlugins(Window)))').length).toEqual(1);
       expect(shallow(renderedTile).props()).toEqual(expect.objectContaining({
         additionalControls: [],
         path: 'foo',

jest.json

@@ -18,5 +18,8 @@
     "<rootDir>/**/__tests__/**/*.{js,jsx}",
     "<rootDir>/src/**/?(*.)(spec|test|unit).{js,jsx}"
   ],
-  "preset": "jest-puppeteer"
+  "preset": "jest-puppeteer",
+  "transformIgnorePatterns": [
+    "<rootDir>/node_modules/(?!@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)"
+  ]
 }

package.json

@@ -49,18 +49,19 @@
     "normalize-url": "^4.5.0",
     "openseadragon": "^2.4.2 || ^3.0.0 || ^4.0.0",
     "prop-types": "^15.6.2",
+    "rdndmb-html5-to-touch": "^8.0.0",
     "re-reselect": "^4.0.0",
     "react-aria-live": "^2.0.5",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dnd-multi-backend": "^5.0.0",
-    "react-dnd-touch-backend": "^10.0.2",
+    "react-dnd": "^16.0.0",
+    "react-dnd-html5-backend": "^16.0.0",
+    "react-dnd-multi-backend": "^8.0.0",
+    "react-dnd-touch-backend": "^16.0.0",
     "react-full-screen": "^1.1.1",
     "react-i18next": "^11.7.0 || ^12.0.0",
     "react-image": "^4.0.1",
     "react-intersection-observer": "^9.0.0",
-    "react-mosaic-component": "^4.0.1",
+    "react-mosaic-component": "^6.0.0",
     "react-redux": "^7.1.0 || ^8.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",

src/components/AppProviders.js

@@ -7,8 +7,8 @@ import {
   ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import { DndContext, DndProvider } from 'react-dnd';
-import MultiBackend from 'react-dnd-multi-backend';
-import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
+import { MultiBackend } from 'react-dnd-multi-backend';
+import { HTML5toTouch } from 'rdndmb-html5-to-touch';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import createI18nInstance from '../i18n';

src/components/WorkspaceMosaic.js

 import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { DndContext } from 'react-dnd';
 import {
-  MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
+  Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
 } from 'react-mosaic-component';
 import difference from 'lodash/difference';
 import isEqual from 'lodash/isEqual';
@@ -144,13 +145,18 @@ export class WorkspaceMosaic extends Component {
   render() {
     const { layout, classes } = this.props;
     return (
-      <MosaicWithoutDragDropContext
+      <DndContext.Consumer>
+        {(ctx) => (
+          <Mosaic
+            dragAndDropManager={ctx.dragDropManager}
             renderTile={this.tileRenderer}
             initialValue={layout || this.determineWorkspaceLayout()}
             onChange={this.mosaicChange}
             className={classNames('mirador-mosaic', classes.root)}
             zeroStateView={this.zeroStateView}
           />
+        )}
+      </DndContext.Consumer>
     );
   }
 }

webpack.config.js

@@ -46,8 +46,6 @@ const baseConfig = mode => ({
   ],
   resolve: {
     alias: {
-      // needs shared global state for context to work
-      'react-dnd': path.resolve(path.join(__dirname, 'node_modules', 'react-dnd')),
       'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
       'react/jsx-runtime': 'react/jsx-runtime.js',
     },