Use the id stored in config object in redux to create a scoped query selector...

Use the id stored in config object in redux to create a scoped query selector to the mirador-viewer (and pass that to the various MUI Menus as the container prop.

__tests__/src/components/WindowList.test.js

@@ -17,6 +17,7 @@ describe('WindowList', () => {
 
     wrapper = shallow(
       <WindowList
+        containerId="mirador"
         anchorEl={{}}
         manifests={manifests}
         windows={windows}
@@ -36,6 +37,7 @@ describe('WindowList', () => {
 
       wrapper = shallow(
         <WindowList
+          containerId="mirador"
           anchorEl={{}}
           manifests={manifests}
           windows={windows}
@@ -64,6 +66,7 @@ describe('WindowList', () => {
 
       wrapper = shallow(
         <WindowList
+          containerId="mirador"
           anchorEl={{}}
           manifests={manifests}
           windows={windows}

__tests__/src/components/WindowTopMenu.test.js

@@ -11,6 +11,7 @@ import { WindowTopMenu } from '../../../src/components/WindowTopMenu';
 function createWrapper(props) {
   return shallow(
     <WindowTopMenu
+      containerId="mirador"
       windowId="xyz"
       handleClose={() => {}}
       anchorEl={null}

__tests__/src/components/WorkspaceMenu.test.js

@@ -14,6 +14,7 @@ describe('WorkspaceMenu', () => {
     toggleZoomControls = jest.fn();
     wrapper = shallow(
       <WorkspaceMenu
+        containerId="mirador"
         handleClose={handleClose}
         showZoomControls={showZoomControls}
         toggleZoomControls={toggleZoomControls}

src/components/WindowList.js

@@ -4,6 +4,7 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import PropTypes from 'prop-types';
+import ns from '../config/css-ns';
 
 /**
  */
@@ -29,10 +30,16 @@ export class WindowList extends Component {
    */
   render() {
     const {
-      handleClose, anchorEl, windows, focusWindow, t,
+      containerId, handleClose, anchorEl, windows, focusWindow, t,
     } = this.props;
     return (
-      <Menu id="window-list-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu
+        id="window-list-menu"
+        container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
         <ListSubheader>
           <Button color="inherit" aria-label={t('closeMenu')} onClick={handleClose} align="right" style={{ float: 'right' }}>&times;</Button>
           {t('openWindows')}
@@ -55,6 +62,7 @@ export class WindowList extends Component {
 }
 
 WindowList.propTypes = {
+  containerId: PropTypes.string.isRequired,
   focusWindow: PropTypes.func.isRequired,
   handleClose: PropTypes.func.isRequired,
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types

src/components/WindowTopMenu.js

@@ -5,6 +5,7 @@ import Divider from '@material-ui/core/Divider';
 import PropTypes from 'prop-types';
 import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
 import WindowViewSettings from '../containers/WindowViewSettings';
+import ns from '../config/css-ns';
 
 /**
  */
@@ -14,12 +15,20 @@ export class WindowTopMenu extends Component {
    * @return
    */
   render() {
-    const { handleClose, anchorEl, windowId } = this.props;
+    const {
+      containerId, handleClose, anchorEl, windowId,
+    } = this.props;
     // const {} = this.state;
 
     return (
       <>
-        <Menu id={`window-menu_${windowId}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        <Menu
+          id={`window-menu_${windowId}`}
+          container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+        >
           <ListItem>
             <WindowViewSettings windowId={windowId} />
           </ListItem>
@@ -35,6 +44,7 @@ export class WindowTopMenu extends Component {
 }
 
 WindowTopMenu.propTypes = {
+  containerId: PropTypes.string.isRequired,
   windowId: PropTypes.string.isRequired,
   handleClose: PropTypes.func.isRequired,
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types

src/components/WorkspaceMenu.js

@@ -15,6 +15,7 @@ import { NestedMenu } from './NestedMenu';
 import WindowList from '../containers/WindowList';
 import WorkspaceSettings from '../containers/WorkspaceSettings';
 import WorkspaceExport from '../containers/WorkspaceExport';
+import ns from '../config/css-ns';
 
 /**
  */
@@ -72,7 +73,7 @@ export class WorkspaceMenu extends Component {
    */
   render() {
     const {
-      handleClose, anchorEl, t, showZoomControls,
+      containerId, handleClose, anchorEl, t, showZoomControls,
     } = this.props;
 
     const {
@@ -84,7 +85,13 @@ export class WorkspaceMenu extends Component {
 
     return (
       <>
-        <Menu id="workspace-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        <Menu
+          id="workspace-menu"
+          container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+        >
           <MenuItem
             aria-haspopup="true"
             onClick={(e) => { this.handleMenuItemClick('windowList', e); handleClose(e); }}
@@ -158,6 +165,7 @@ export class WorkspaceMenu extends Component {
 }
 
 WorkspaceMenu.propTypes = {
+  containerId: PropTypes.string.isRequired,
   handleClose: PropTypes.func.isRequired,
   toggleZoomControls: PropTypes.func,
   showZoomControls: PropTypes.bool,

src/containers/WindowList.js

@@ -20,6 +20,7 @@ const mapDispatchToProps = {
  */
 const mapStateToProps = state => (
   {
+    containerId: state.config.id,
     windows: state.windows,
     manifests: state.manifests,
   }

src/containers/WindowTopMenu.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import { WindowTopMenu } from '../components/WindowTopMenu';
 
-export default miradorWithPlugins(WindowTopMenu);
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof WindowTopMenu
+ * @private
+ */
+const mapStateToProps = state => ({
+  containerId: state.config.id,
+});
+
+const enhance = compose(
+  connect(mapStateToProps, null),
+  miradorWithPlugins,
+);
+
+export default enhance(WindowTopMenu);

src/containers/WorkspaceMenu.js

@@ -17,9 +17,10 @@ const mapDispatchToProps = { toggleZoomControls: actions.toggleZoomControls };
  * @memberof WindowViewer
  * @private
  */
-const mapStateToProps = state => (
-  { showZoomControls: state.workspace.showZoomControls }
-);
+const mapStateToProps = state => ({
+  containerId: state.config.id,
+  showZoomControls: state.workspace.showZoomControls,
+});
 
 const enhance = compose(
   withTranslation(),