Resume using upstream react-mosaic-component

__tests__/src/components/Window.test.js

@@ -1,4 +1,4 @@
-import { MosaicWindowContext } from 'react-mosaic-component2';
+import { MosaicWindowContext } from 'react-mosaic-component';
 import { render, screen } from '@tests/utils/test-utils';
 
 import { Window } from '../../../src/components/Window';

__tests__/src/components/WorkspaceMosaic.test.js

@@ -61,7 +61,7 @@ describe('WorkspaceMosaic', () => {
       const updateWorkspaceMosaicLayout = vi.fn();
       const props = {
         classes: {},
-        layout: { direction: 'row', first: '1', second: '2' },
+        layout: { type: 'split', direction: 'row', children: ['1', '2'] },
         updateWorkspaceMosaicLayout,
         windowIds,
         workspaceId: 'foo',
@@ -89,13 +89,13 @@ describe('WorkspaceMosaic', () => {
     it('when the new and old layouts are the same', () => {
       const updateWorkspaceMosaicLayout = vi.fn();
       wrapper = createWrapper({
-        layout: { direction: 'row', first: '1', second: '2' },
+        layout: { type: 'split', direction: 'row', children: ['1', '2'] },
         updateWorkspaceMosaicLayout,
         windowIds,
       });
 
       wrapper.rerender(
-        <WorkspaceMosaic classes={{}} windowIds={windowIds} layout={{ direction: 'row', first: '1', second: '2' }} workspaceId="foo" updateWorkspaceMosaicLayout={updateWorkspaceMosaicLayout} />,
+        <WorkspaceMosaic classes={{}} windowIds={windowIds} layout={{ type: 'split', direction: 'row', children: ['1', '2'] }} workspaceId="foo" updateWorkspaceMosaicLayout={updateWorkspaceMosaicLayout} />,
       );
 
       expect(updateWorkspaceMosaicLayout).toHaveBeenCalledTimes(0);

__tests__/src/lib/MosaicLayout.test.js

@@ -15,36 +15,36 @@ describe('MosaicLayout', () => {
       expect(instance.layout).toEqual('foo');
       instance.addWindows(['bar']);
       expect(instance.layout).toEqual({
+        type: 'split',
         direction: 'row',
-        first: 'foo',
-        second: 'bar',
+        children: ['foo', 'bar'],
       });
     });
     it('case 3 windows: adds to the top right', () => {
       expect(instance.layout).toEqual('foo');
       instance.addWindows(['bar', 'bat', 'bark']);
       expect(instance.layout).toEqual({
+        type: 'split',
         direction: 'row',
-        first: 'foo',
-        second: {
+        children: ['foo', {
+          type: 'split',
           direction: 'column',
-          first: {
+          children: [{
+            type: 'split',
             direction: 'row',
-            first: 'bat',
-            second: 'bark',
-          },
-          second: 'bar',
-        },
+            children: ['bat', 'bark'],
+          }, 'bar'],
+        }],
       });
     });
   });
   describe('removeWindows', () => {
     let instance;
     beforeEach(() => {
-      instance = new MosaicLayout({ first: 'foo', second: 'bar' });
+      instance = new MosaicLayout({ type: 'split', direction: 'row', children: ['foo', 'bar'] });
     });
     it('case 1 window: returns a single window', () => {
-      instance.removeWindows(['bar'], { bar: ['second'] });
+      instance.removeWindows(['bar'], { bar: [1] });
       expect(instance.layout).toEqual('foo');
     });
   });

package.json

@@ -63,7 +63,7 @@
     "react-full-screen": "^1.1.1",
     "react-image": "^4.0.1",
     "react-intersection-observer": "^10.0.0",
-    "react-mosaic-component2": "^7.0.0",
+    "react-mosaic-component": "7.0.0-beta0",
     "react-redux": "^8.0.0 || ^9.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "~10.5.3",

src/components/Window.jsx

@@ -2,7 +2,7 @@ import { useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
-import { MosaicWindowContext } from 'react-mosaic-component2';
+import { MosaicWindowContext } from 'react-mosaic-component';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useTranslation } from 'react-i18next';
 import ns from '../config/css-ns';

src/components/WorkspaceMosaic.jsx

@@ -4,8 +4,8 @@ import { styled } from '@mui/material/styles';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { DndContext } from 'react-dnd';
 import {
-  Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
-} from 'react-mosaic-component2';
+  Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves, convertLegacyToNary
+} from 'react-mosaic-component';
 import difference from 'lodash/difference';
 import isEqual from 'lodash/isEqual';
 import classNames from 'classnames';
@@ -78,19 +78,20 @@ const determineWorkspaceLayout = (currentLayout, windowIds, currentWindowPaths =
 export function WorkspaceMosaic({
   layout = undefined, updateWorkspaceMosaicLayout, windowIds = [], workspaceId,
 }) {
-  const toolbarControls = [];
-  const additionalControls = [];
 
   const windowPaths = useRef({});
   const dndContext = useContext(DndContext);
 
+  // Convert legacy layout format to new format if needed
+  const normalizedLayout = layout ? convertLegacyToNary(layout) : layout;
+
   useEffect(() => {
-    const leaveKeys = getLeaves(layout);
+    const leaveKeys = getLeaves(normalizedLayout);
     // Handle some trivial layout cases:
     // 1. No layout
     // 2. No windows
     // 3. Not enough windows to create a layout
-    if (!layout || windowIds.length === 0 || leaveKeys.length < 2) {
+    if (!normalizedLayout || windowIds.length === 0 || leaveKeys.length < 2) {
       updateWorkspaceMosaicLayout(createBalancedTreeFromLeaves(windowIds));
 
       return undefined;
@@ -101,12 +102,14 @@ export function WorkspaceMosaic({
       return undefined;
     }
 
-    const newLayout = determineWorkspaceLayout(layout, windowIds, windowPaths.current);
+    const newLayout = determineWorkspaceLayout(normalizedLayout, windowIds, windowPaths.current);
 
-    if (!isEqual(newLayout, layout)) updateWorkspaceMosaicLayout(newLayout);
+    if (!isEqual(newLayout, normalizedLayout)) updateWorkspaceMosaicLayout(newLayout);
 
     return undefined;
-  }, [layout, windowIds, windowPaths, updateWorkspaceMosaicLayout]);
+  }, [normalizedLayout, windowIds, windowPaths, updateWorkspaceMosaicLayout]);
+
+  const toolbarControls = [];
 
   /**
    * Render a tile (Window) in the Mosaic.
@@ -118,7 +121,6 @@ export function WorkspaceMosaic({
     return (
       <MosaicWindow
         toolbarControls={toolbarControls}
-        additionalControls={additionalControls}
         path={path}
         windowId={id}
         renderPreview={RenderPreview}
@@ -144,7 +146,7 @@ export function WorkspaceMosaic({
       <StyledMosaic
         dragAndDropManager={dndContext.dragDropManager}
         renderTile={tileRenderer}
-        initialValue={layout || createBalancedTreeFromLeaves(windowIds)}
+        initialValue={normalizedLayout || createBalancedTreeFromLeaves(windowIds)}
         onChange={mosaicChange}
         className={classNames('mirador-mosaic')}
         zeroStateView={<ZeroStateView />}

src/lib/MosaicLayout.js

@@ -1,7 +1,7 @@
 import {
   createRemoveUpdate, updateTree,
   getNodeAtPath, getOtherDirection, getPathToCorner, Corner,
-} from 'react-mosaic-component2';
+} from 'react-mosaic-component';
 import dropRight from 'lodash/dropRight';
 
 /** */
@@ -38,22 +38,19 @@ export default class MosaicLayout {
       const parent = this.pathToParent(path);
       const destination = this.nodeAtPath(path);
       const direction = parent ? getOtherDirection(parent.direction) : 'row';
-      let first;
-      let second;
+      let children;
       if (direction === 'row') {
-        first = destination;
-        second = addedWindowIds[i];
+        children = [destination, addedWindowIds[i]];
       } else {
-        first = addedWindowIds[i];
-        second = destination;
+        children = [addedWindowIds[i], destination];
       }
       const update = {
         path,
         spec: {
           $set: {
+            type: 'split',
             direction,
-            first,
-            second,
+            children,
           },
         },
       };