feat(feel-popup): provide container for feel popup editors

Use via

```js
propertiesPanel: {
  feelPopupContainer: ...
}
```

package.json

@@ -63,7 +63,7 @@
     "@babel/plugin-transform-react-jsx": "^7.14.3",
     "@bpmn-io/element-template-chooser": "^1.0.0",
     "@bpmn-io/element-templates-icons-renderer": "^0.3.0",
-    "@bpmn-io/properties-panel": "^3.4.0",
+    "@bpmn-io/properties-panel": "^3.5.0",
     "@bpmn-io/variable-resolver": "^1.1.0",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
@@ -113,7 +113,7 @@
     "zeebe-bpmn-moddle": "^1.0.0"
   },
   "peerDependencies": {
-    "@bpmn-io/properties-panel": ">= 3.2",
+    "@bpmn-io/properties-panel": ">= 3.5",
     "bpmn-js": ">= 11.5",
     "camunda-bpmn-js-behaviors": ">= 0.4",
     "diagram-js": ">= 11.9"

src/render/BpmnPropertiesPanel.js

@@ -36,7 +36,8 @@ export default function BpmnPropertiesPanel(props) {
     getProviders,
     layoutConfig: initialLayoutConfig,
     descriptionConfig,
-    tooltipConfig
+    tooltipConfig,
+    feelPopupContainer
   } = props;
 
   const canvas = injector.get('canvas');
@@ -236,6 +237,7 @@ export default function BpmnPropertiesPanel(props) {
       descriptionLoaded={ onDescriptionLoaded }
       tooltipConfig={ tooltipConfig }
       tooltipLoaded={ onTooltipLoaded }
+      feelPopupContainer={ feelPopupContainer }
       eventBus={ eventBus } />
   </BpmnPropertiesPanelContext.Provider>;
 }

src/render/BpmnPropertiesPanelRenderer.js

@@ -30,14 +30,16 @@ export default class BpmnPropertiesPanelRenderer {
       parent,
       layout: layoutConfig,
       description: descriptionConfig,
-      tooltip: tooltipConfig
+      tooltip: tooltipConfig,
+      feelPopupContainer
     } = config || {};
 
     this._eventBus = eventBus;
     this._injector = injector;
     this._layoutConfig = layoutConfig;
     this._descriptionConfig = descriptionConfig;
     this._tooltipConfig = tooltipConfig;
+    this._feelPopupContainer = feelPopupContainer;
 
     this._container = domify(
       '<div style="height: 100%" class="bio-properties-panel-container"></div>'
@@ -173,6 +175,7 @@ export default class BpmnPropertiesPanelRenderer {
         layoutConfig={ this._layoutConfig }
         descriptionConfig={ this._descriptionConfig }
         tooltipConfig={ this._tooltipConfig }
+        feelPopupContainer={ this._feelPopupContainer }
       />,
       this._container
     );

test/spec/BpmnPropertiesPanelRenderer.spec.js

@@ -888,6 +888,48 @@ describe('<BpmnPropertiesPanelRenderer>', function() {
   });
 
 
+  describe('feel popup', function() {
+
+    withPropertiesPanel('>=3.5')('should render feel popup in given container', async function() {
+
+      // given
+      const diagramXml = require('test/fixtures/service-task.bpmn').default;
+
+      let modeler;
+
+      await act(async () => {
+        ({ modeler } = await createModeler(diagramXml, {
+          propertiesPanel: {
+            parent: propertiesContainer,
+            feelPopupContainer: container
+          }
+        }));
+      });
+
+      await act(() => {
+        const elementRegistry = modeler.get('elementRegistry'),
+              selection = modeler.get('selection');
+
+        selection.select(elementRegistry.get('ServiceTask_1'));
+      });
+
+      const openPopupBtn = findOpenFeelPopup('ServiceTask_1-input-0-source', container);
+
+      // when
+      await act(() => {
+        openPopupBtn.click();
+      });
+
+      const feelPopup = domQuery('.bio-properties-panel-feel-popup', container);
+
+      // then
+      expect(feelPopup).to.exist;
+      expect(feelPopup.parentNode).to.eql(container);
+    });
+
+  });
+
+
   describe('a11y', function() {
 
     it('should have no violations', async function() {
@@ -972,3 +1014,7 @@ function getGroup(container, id) {
 function getHeaderName(container) {
   return domQuery('.bio-properties-panel-header-label', container).innerText;
 }
+
+function findOpenFeelPopup(id, container) {
+  return container.querySelector(`[data-entry-id="${id}"] .bio-properties-panel-open-feel-popup`);
+}