Use the useContext hook instead of withWorkspaceContext HOC

src/components/CollectionDialog.js

@@ -1,4 +1,4 @@
-import { useState, useReducer } from 'react';
+import { useContext, useState, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -19,6 +19,7 @@ import { LabelValueMetadata } from './LabelValueMetadata';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 import ManifestInfo from '../containers/ManifestInfo';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(() => ({
   padding: (theme) => theme.spacing(1),
@@ -72,10 +73,11 @@ Placeholder.propTypes = {
  * a dialog providing the possibility to select the collection
  */
 export function CollectionDialog({
-  addWindow, collection = null, collectionPath = [], container = null, error = null, hideCollectionDialog,
+  addWindow, collection = null, collectionPath = [], error = null, hideCollectionDialog,
   isMultipart = false, manifest, manifestId, ready = false,
   setWorkspaceAddVisibility, showCollectionDialog, t, updateWindow, windowId = null,
 }) {
+  const container = useContext(WorkspaceContext);
   const [filter, setFilter] = useState(null);
   const [, forceUpdate] = useReducer(x => x + 1, 0);
 
@@ -240,7 +242,6 @@ CollectionDialog.propTypes = {
   addWindow: PropTypes.func.isRequired,
   collection: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   collectionPath: PropTypes.arrayOf(PropTypes.string),
-  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   error: PropTypes.string,
   hideCollectionDialog: PropTypes.func.isRequired,
   isMultipart: PropTypes.bool,

src/components/MiradorMenuButton.js

@@ -1,8 +1,10 @@
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 const Root = styled(IconButton, { name: 'MiradorMenuButton', slot: 'root' })(({ selected, theme }) => ({
   fill: 'currentcolor',
@@ -20,14 +22,14 @@ export function MiradorMenuButton({
   'aria-label': ariaLabel,
   badge = false,
   children,
-  container = null,
   dispatch = () => {},
   selected = false,
   BadgeProps = {},
   TooltipProps = {},
   sx = {},
   ...iconButtonProps
 }) {
+  const container = useContext(WorkspaceContext);
   const button = (
     <Root
       selected={selected}
@@ -69,7 +71,6 @@ MiradorMenuButton.propTypes = {
   badge: PropTypes.bool,
   BadgeProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.element.isRequired,
-  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   dispatch: PropTypes.func,
   selected: PropTypes.bool,
   sx: PropTypes.object, // eslint-disable-line react/forbid-prop-types

src/components/WindowList.js

@@ -1,15 +1,18 @@
+import { useContext } from 'react';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
 import PropTypes from 'prop-types';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 /**
  */
 export function WindowList({
-  container = null, handleClose, windowIds, focusWindow, focusedWindowId = null,
+  handleClose, windowIds, focusWindow, focusedWindowId = null,
   t = key => key, titles = {}, tReady = false, ...menuProps
 }) {
+  const container = useContext(WorkspaceContext);
   return (
     <Menu
       anchorOrigin={{

src/components/WindowTopBarPluginMenu.js

@@ -1,16 +1,18 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import MoreVertIcon from '@mui/icons-material/MoreVertSharp';
 import Menu from '@mui/material/Menu';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 /**
  *
  */
 export function WindowTopBarPluginMenu({
-  container = null, PluginComponents = [], t, windowId, menuIcon = <MoreVertIcon />,
+  PluginComponents = [], t, windowId, menuIcon = <MoreVertIcon />,
 }) {
+  const container = useContext(WorkspaceContext);
   const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);

src/components/WindowTopMenu.js

@@ -1,9 +1,11 @@
+import { useContext } from 'react';
 import Menu from '@mui/material/Menu';
 import ListSubheader from '@mui/material/ListSubheader';
 import PropTypes from 'prop-types';
 import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
 import WindowViewSettings from '../containers/WindowViewSettings';
 import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 /** Renders plugins */
 function PluginHookWithHeader(props) {
@@ -19,9 +21,10 @@ function PluginHookWithHeader(props) {
 /**
  */
 export function WindowTopMenu({
-  container = null, handleClose, showThumbnailNavigationSettings = true,
+  handleClose, showThumbnailNavigationSettings = true,
   toggleDraggingEnabled, windowId, anchorEl = null, open = false,
 }) {
+  const container = useContext(WorkspaceContext);
   const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
 
   return (
@@ -54,7 +57,6 @@ export function WindowTopMenu({
 
 WindowTopMenu.propTypes = {
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool,
   showThumbnailNavigationSettings: PropTypes.bool,

src/components/WorkspaceMenu.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
@@ -8,13 +8,15 @@ import { NestedMenu } from './NestedMenu';
 import WorkspaceSelectionDialog from '../containers/WorkspaceSelectionDialog';
 import ChangeThemeDialog from '../containers/ChangeThemeDialog';
 import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 /**
  */
 export function WorkspaceMenu({
-  container = null, handleClose, showThemePicker = false, isWorkspaceAddVisible = false,
+  handleClose, showThemePicker = false, isWorkspaceAddVisible = false,
   t = k => k, tReady = false, toggleZoomControls = () => {}, showZoomControls = false, ...menuProps
 }) {
+  const container = useContext(WorkspaceContext);
   const [selectedOption, setSelectedOption] = useState(null);
 
   const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
@@ -102,7 +104,6 @@ export function WorkspaceMenu({
 }
 
 WorkspaceMenu.propTypes = {
-  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   handleClose: PropTypes.func.isRequired,
   isWorkspaceAddVisible: PropTypes.bool,
   showThemePicker: PropTypes.bool,

src/components/WorkspaceOptionsMenu.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import ImportIcon from '@mui/icons-material/Input';
 import SaveAltIcon from '@mui/icons-material/SaveAltSharp';
@@ -8,14 +8,16 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import WorkspaceExport from '../containers/WorkspaceExport';
 import WorkspaceImport from '../containers/WorkspaceImport';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 import { PluginHook } from './PluginHook';
 
 /**
  * WorkspaceOptionsMenu ~ the menu for workspace options such as import/export
 */
 export function WorkspaceOptionsMenu({
-  anchorEl = null, container = null, handleClose, open = false, t,
+  anchorEl = null, handleClose, open = false, t,
 }) {
+  const container = useContext(WorkspaceContext);
   const [selectedOption, setSelectedOption] = useState(null);
 
   const pluginProps = {
@@ -93,7 +95,6 @@ export function WorkspaceOptionsMenu({
 
 WorkspaceOptionsMenu.propTypes = {
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool,
   t: PropTypes.func.isRequired,

src/containers/CollectionDialog.js

@@ -7,7 +7,6 @@ import {
   getManifest, getManifestoInstance, getSequenceBehaviors, getWindow,
 } from '../state/selectors';
 import { CollectionDialog } from '../components/CollectionDialog';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 
 /**
  * mapDispatchToProps - used to hook up connect to action creators
@@ -49,7 +48,6 @@ const mapStateToProps = (state, { windowId }) => {
 
 const enhance = compose(
   withTranslation(),
-  withWorkspaceContext,
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('CollectionDialog'),
 );

src/containers/MiradorMenuButton.js

@@ -1,10 +1,8 @@
 import { compose } from 'redux';
 import { withPlugins } from '../extend/withPlugins';
 import { MiradorMenuButton } from '../components/MiradorMenuButton';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 
 const enhance = compose(
-  withWorkspaceContext,
   withPlugins('MiradorMenuButton'),
 );
 

src/containers/WindowList.js

@@ -5,7 +5,6 @@ import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getFocusedWindowId, getWindowIds, getWindowTitles } from '../state/selectors';
 import { WindowList } from '../components/WindowList';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 
 /**
  * mapDispatchToProps - used to hook up connect to action creators
@@ -31,7 +30,6 @@ const mapStateToProps = state => (
 
 const enhance = compose(
   withTranslation(),
-  withWorkspaceContext,
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('WindowList'),
 );

src/containers/WindowTopBarPluginMenu.js

@@ -2,11 +2,9 @@ import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowTopBarPluginMenu } from '../components/WindowTopBarPluginMenu';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 
 const enhance = compose(
   withTranslation(),
-  withWorkspaceContext,
   withPlugins('WindowTopBarPluginMenu'),
 );
 

src/containers/WindowTopMenu.js

@@ -5,7 +5,6 @@ import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { WindowTopMenu } from '../components/WindowTopMenu';
 import { getConfig } from '../state/selectors';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 
 /**
  * mapStateToProps - to hook up connect
@@ -27,7 +26,6 @@ const mapDispatchToProps = dispatch => ({
 
 const enhance = compose(
   withTranslation(),
-  withWorkspaceContext,
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('WindowTopMenu'),
 );

src/containers/WorkspaceMenu.js

@@ -7,7 +7,6 @@ import {
   getShowZoomControlsConfig, getThemeIds,
   getWorkspace,
 } from '../state/selectors';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 import { WorkspaceMenu } from '../components/WorkspaceMenu';
 
 /**
@@ -32,7 +31,6 @@ const mapStateToProps = state => ({
 
 const enhance = compose(
   withTranslation(),
-  withWorkspaceContext,
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('WorkspaceMenu'),
 );

src/containers/WorkspaceOptionsMenu.js

@@ -1,11 +1,9 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withWorkspaceContext } from '../contexts/WorkspaceContext';
 import { WorkspaceOptionsMenu } from '../components/WorkspaceOptionsMenu';
 
 const enhance = compose(
   withTranslation(),
-  withWorkspaceContext,
 );
 
 export default enhance(WorkspaceOptionsMenu);

src/contexts/WorkspaceContext.js

@@ -1,36 +1,5 @@
-import {
-  createContext, useContext, useState, useEffect, forwardRef,
-} from 'react';
+import { createContext } from 'react';
 
 const WorkspaceContext = createContext({ current: document.body });
 
-/**
- * @returns HOC that injects the workspace ref into the component
- */
-export const withWorkspaceContext = (Component) => {
-  /**
-   * Wrap the component with the context
-   */
-  function ContextHoc(props, ref) {
-    const workspaceContext = useContext(WorkspaceContext);
-
-    const [workspaceRef, setWorkspaceRef] = useState();
-
-    useEffect(() => {
-      setWorkspaceRef(workspaceContext);
-    }, [workspaceContext]);
-
-    const passDownProps = {
-      ...props,
-      ...(ref ? { ref } : {}),
-    };
-
-    return <Component container={workspaceRef} {...passDownProps} />;
-  }
-
-  const whatever = forwardRef(ContextHoc);
-  whatever.displayName = `WithWorkspaceContext(${Component.displayName || Component.name || 'Component'})`;
-  return whatever;
-};
-
 export default WorkspaceContext;