fix(Popup): close popup when properties panel detaches

related to camunda/camunda-bpmn-js#312

src/components/Popup.js

@@ -11,6 +11,7 @@ import * as focusTrap from 'focus-trap';
 import { DragIcon } from './icons';
 
 import { createDragger } from './util/dragger';
+import { useEvent } from '../hooks/useEvent';
 
 
 const noop = () => {};
@@ -116,6 +117,8 @@ function PopupComponent(props, globalRef) {
     return () => focusTrapRef.current && focusTrapRef.current.deactivate();
   }, [ popupRef ]);
 
+  useEvent('propertiesPanel.detach', onClose);
+
   return createPortal(
     <div
       aria-label={ title }

test/spec/components/Popup.spec.js

@@ -17,6 +17,7 @@ import {
 } from 'test/TestHelper';
 
 import { Popup } from 'src/components/Popup';
+import { EventContext } from '../../../src/context';
 
 insertCoreStyles();
 
@@ -145,6 +146,48 @@ describe('<Popup>', function() {
   });
 
 
+  it('should close on detach', async function() {
+
+    // given
+    const closeSpy = sinon.spy();
+
+    const MockEventBus = (() => {
+      let callback;
+
+      return {
+        on: (ev, cb) => {
+          if (ev !== 'propertiesPanel.detach') {
+            return;
+          }
+          callback = cb;
+        },
+        off: () => {},
+        fire: () => {
+          callback();
+        }
+      };
+    })();
+
+
+    const eventContext = {
+      eventBus: MockEventBus
+    };
+
+    await act(() => {
+      render(
+        <EventContext.Provider value={ eventContext }>
+          <Popup onClose={ closeSpy }><input name="foo"></input></Popup>
+        </EventContext.Provider>, { container });
+    });
+
+    // when
+    MockEventBus.fire('propertiesPanel.detach');
+
+    // then
+    expect(closeSpy).to.have.been.called;
+  });
+
+
   it('should close on ESC', async function() {
 
     // given