Use nesting instead of refEl

Author: kraenhansen

packages/compass-components/src/components/content-with-fallback.spec.tsx

@@ -59,9 +59,8 @@ describe('ContentWithFallback', function () {
     );
 
     expect(container.children.length).to.equal(1);
-    expect(container.children[0].getAttribute('data-testid')).to.equal(
-      'context-menu'
-    );
+    const [anchorElement] = container.children;
+    expect(anchorElement.getAttribute('data-testid')).to.equal('context-menu');
   });
 
   it('should render fallback when the timeout passes', async function () {

packages/compass-components/src/components/context-menu.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { Menu, MenuItem, MenuSeparator, useEventListener } from './leafygreen';
+import { Menu, MenuItem, MenuSeparator } from './leafygreen';
 import type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
 import { useContextMenu } from '@mongodb-js/compass-context-menu';
 import { ContextMenuProvider as ContextMenuProviderBase } from '@mongodb-js/compass-context-menu';
@@ -22,7 +22,6 @@ export function ContextMenuProvider({
 
 export function ContextMenu({ menu }: ContextMenuWrapperProps) {
   const menuRef = useRef(null);
-  const anchorRef = useRef(null);
 
   const position = menu.position;
   const itemGroups = menu.itemGroups;
@@ -34,22 +33,19 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
   }, [menu.isOpen]);
 
   return (
-    <>
-      <div
-        data-testid="context-menu-anchor"
-        ref={anchorRef}
-        style={{
-          position: 'absolute',
-          left: position.x,
-          top: position.y,
-          // This is to ensure the menu gets positioned correctly as the left and top updates
-          width: 1,
-          height: 1,
-        }}
-      />
+    <div
+      data-testid="context-menu"
+      style={{
+        position: 'absolute',
+        left: position.x,
+        top: position.y,
+        // This is to ensure the menu gets positioned correctly as the left and top updates
+        width: 1,
+        height: 1,
+      }}
+    >
       <Menu
         data-testid="context-menu"
-        refEl={anchorRef}
         ref={menuRef}
         open={menu.isOpen}
         setOpen={menu.close}
@@ -92,7 +88,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
           }
         )}
       </Menu>
-    </>
+    </div>
   );
 }
 

packages/compass-components/src/components/leafygreen.tsx

@@ -72,11 +72,7 @@ import LeafyGreenTextInput from '@leafygreen-ui/text-input';
 import { SearchInput } from '@leafygreen-ui/search-input';
 export type { ToastProps } from '@leafygreen-ui/toast';
 export { ToastProvider, useToast } from '@leafygreen-ui/toast';
-export {
-  usePrevious,
-  useMergeRefs,
-  useEventListener,
-} from '@leafygreen-ui/hooks';
+export { usePrevious, useMergeRefs } from '@leafygreen-ui/hooks';
 import Toggle from '@leafygreen-ui/toggle';
 import Tooltip from '@leafygreen-ui/tooltip';
 import {