Update to react-mosaic-component upstream

__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';

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.4.0",

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,19 @@ 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,24 +101,22 @@ 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, updateWorkspaceMosaicLayout]);
+
+  const toolbarControls = [];
 
-  /**
-   * Render a tile (Window) in the Mosaic.
-   */
   const tileRenderer = (id, path) => {
     if (!windowIds.includes(id)) return null;
     windowPaths.current[id] = path;
 
     return (
       <MosaicWindow
         toolbarControls={toolbarControls}
-        additionalControls={additionalControls}
         path={path}
         windowId={id}
         renderPreview={RenderPreview}
@@ -144,7 +142,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';
 
 /** */
@@ -72,7 +72,7 @@
   removeWindows(removedWindowIds, windowPaths) {
     const removeUpdates = removedWindowIds
       .map(windowId => (
         createRemoveUpdate(this.layout, windowPaths[windowId])
       ));
     this.layout = updateTree(this.layout, removeUpdates);
   }