fix: support nesting

Author: gagik

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

@@ -28,23 +28,28 @@ describe('useContextMenuItems', function () {
     );
   };
 
-  it('errors if the component is double wrapped', function () {
+  it('works with nested providers, using the parent provider', function () {
     const items = [
       {
         label: 'Test Item',
         onAction: () => {},
       },
     ];
 
-    expect(() => {
-      render(
+    const { container } = render(
+      <ContextMenuProvider menuWrapper={ContextMenu}>
         <ContextMenuProvider menuWrapper={ContextMenu}>
           <TestComponent items={items} />
         </ContextMenuProvider>
-      );
-    }).to.throw(
-      'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+      </ContextMenuProvider>
     );
+
+    // Should only find one context menu (from the parent provider)
+    expect(
+      container.querySelectorAll('[data-testid="context-menu"]')
+    ).to.have.length(1);
+    // Should still render the trigger
+    expect(screen.getByTestId(menuTestTriggerId)).to.exist;
   });
 
   it('renders without error', function () {

packages/compass-context-menu/src/context-menu-provider.spec.tsx

@@ -17,20 +17,23 @@ describe('ContextMenuProvider', function () {
   );
 
   describe('when nested', function () {
-    it('throws an error when providers are nested', function () {
-      expect(() => {
-        render(
-          <ContextMenuProvider menuWrapper={TestMenu}>
-            <div>
-              <ContextMenuProvider menuWrapper={TestMenu}>
-                <TestComponent />
-              </ContextMenuProvider>
-            </div>
-          </ContextMenuProvider>
-        );
-      }).to.throw(
-        'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+    it('uses parent provider and does not render duplicate menu wrapper', function () {
+      const { container } = render(
+        <ContextMenuProvider menuWrapper={TestMenu}>
+          <div>
+            <ContextMenuProvider menuWrapper={TestMenu}>
+              <TestComponent />
+            </ContextMenuProvider>
+          </div>
+        </ContextMenuProvider>
       );
+
+      // Should only find one test-menu element (from the parent provider)
+      expect(
+        container.querySelectorAll('[data-testid="test-menu"]')
+      ).to.have.length(1);
+      // Should still render the content
+      expect(container.querySelector('[data-testid="test-content"]')).to.exist;
     });
   });
 

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

@@ -26,13 +26,6 @@ export function ContextMenuProvider({
   // Check if there's already a parent context menu provider
   const parentContext = useContext(ContextMenuContext);
 
-  // Prevent accidental nested providers
-  if (parentContext) {
-    throw new Error(
-      'Duplicated ContextMenuProvider found. Please remove the nested provider.'
-    );
-  }
-
   const [menu, setMenu] = useState<ContextMenuState>({
     isOpen: false,
     itemGroups: [],
@@ -50,6 +43,9 @@ export function ContextMenuProvider({
   );
 
   useEffect(() => {
+    // Don't set up event listeners if we have a parent context
+    if (parentContext) return;
+
     function handleContextMenu(event: MouseEvent) {
       event.preventDefault();
 
@@ -77,7 +73,7 @@ export function ContextMenuProvider({
       document.removeEventListener('contextmenu', handleContextMenu);
       window.removeEventListener('resize', handleClosingEvent);
     };
-  }, [handleClosingEvent]);
+  }, [handleClosingEvent, parentContext]);
 
   const value = useMemo(
     () => ({
@@ -86,6 +82,11 @@ export function ContextMenuProvider({
     [close]
   );
 
+  // If we have a parent context, just render children without the wrapper
+  if (parentContext) {
+    return <>{children}</>;
+  }
+
   const Wrapper = menuWrapper ?? React.Fragment;
 
   return (