Allow defining FEEL Popup container

package.json

@@ -63,7 +63,7 @@
     "@babel/core": "^7.18.10",
     "@babel/plugin-transform-react-jsx": "^7.14.5",
     "@babel/plugin-transform-react-jsx-source": "^7.14.5",
-    "@bpmn-io/properties-panel": "^3.3.1",
+    "@bpmn-io/properties-panel": "^3.5.0",
     "@carbon/react": "^1.24.0",
     "@carbon/styles": "^1.23.1",
     "@playwright/test": "1.37.1",

packages/form-js-editor/assets/index.scss

@@ -1,3 +1,3 @@
 @use 'form-js-editor-base.css';
 @use '@bpmn-io/draggle/dist/dragula.css';
-@use '@bpmn-io/properties-panel/assets/properties-panel.css';
+@use '@bpmn-io/properties-panel/dist/assets/properties-panel.css';

packages/form-js-editor/package.json

@@ -48,7 +48,7 @@
   "dependencies": {
     "@bpmn-io/draggle": "^4.0.0",
     "@bpmn-io/form-js-viewer": "^1.3.0-alpha.0",
-    "@bpmn-io/properties-panel": "^3.3.1",
+    "@bpmn-io/properties-panel": "^3.5.0",
     "array-move": "^3.0.1",
     "big.js": "^6.2.1",
     "ids": "^1.0.0",

packages/form-js-editor/rollup.config.js

@@ -70,7 +70,7 @@ export default [
         targets: [
           { src: 'assets/form-js-editor-base.css', dest: 'dist/assets' },
           { src: '../../node_modules/@bpmn-io/draggle/dist/dragula.css', dest: 'dist/assets' },
-          { src: '../../node_modules/@bpmn-io/properties-panel/assets/properties-panel.css', dest: 'dist/assets' }
+          { src: '../../node_modules/@bpmn-io/properties-panel/dist/assets/properties-panel.css', dest: 'dist/assets' }
         ]
       })
     ])

packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js

@@ -54,6 +54,11 @@ export default function FormPropertiesPanel(props) {
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
   const selectionModule = injector.get('selection');
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+
+  const {
+    feelPopupContainer
+  } = propertiesPanelConfig;
 
   const [ state , setState ] = useState({ selectedFormField: selectionModule.get() || formEditor._getState().schema });
 
@@ -114,6 +119,7 @@ export default function FormPropertiesPanel(props) {
           groups={ getGroups(selectedFormField, editField, getService) }
           headerProvider={ PropertiesPanelHeaderProvider }
           placeholderProvider={ PropertiesPanelPlaceholderProvider }
+          feelPopupContainer={ feelPopupContainer }
         />
       </FormPropertiesPanelContext.Provider>
     </div>

packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js

@@ -3703,6 +3703,41 @@ describe('properties panel', function() {
 
   });
 
+
+  describe('feel popup', function() {
+
+    it('should render feel popup in given container', async function() {
+
+      // given
+      const editFieldSpy = spy();
+
+      const field = schema.components.find(({ source }) => source === '=logo');
+
+      createPropertiesPanel({
+        container,
+        editField: editFieldSpy,
+        field,
+        propertiesPanelConfig: {
+          feelPopupContainer: container
+        }
+      });
+
+      const openPopupBtn = findOpenFeelPopup('source', container);
+
+      // when
+      await act(() => {
+        fireEvent.click(openPopupBtn);
+      });
+
+      const feelPopup = domQuery('.bio-properties-panel-feel-popup', container);
+
+      // then
+      expect(feelPopup).to.exist;
+      expect(feelPopup.parentNode).to.eql(container);
+    });
+
+  });
+
 });
 
 
@@ -3832,6 +3867,10 @@ function findFeelers(id, container) {
   return container.querySelector(`[data-entry-id="${id}"] .bio-properties-panel-feelers-editor`);
 }
 
+function findOpenFeelPopup(id, container) {
+  return container.querySelector(`[data-entry-id="${id}"] .bio-properties-panel-open-feel-popup`);
+}
+
 function findTextbox(id, container) {
   return container.querySelector(`[name=${id}] [role="textbox"]`);
 }

packages/form-js-editor/test/spec/features/properties-panel/helper/index.js

@@ -169,6 +169,10 @@ export class Injector {
     if (type === 'pathRegistry') {
       return this._options.pathRegistry || new PathRegistry();
     }
+
+    if (type === 'config.propertiesPanel') {
+      return this._options.propertiesPanelConfig || {};
+    }
   }
 }
 

packages/form-js-playground/src/Playground.js

@@ -7,13 +7,21 @@ import mitt from 'mitt';
 import { PlaygroundRoot } from './components/PlaygroundRoot';
 
 /**
+ * @typedef { import('@bpmn-io/form-js-viewer/dist/types/types').FormProperties } FormProperties
+ * @typedef { import('@bpmn-io/form-js-editor/dist/types/types').FormEditorProperties } FormEditorProperties
+ *
  * @typedef { {
  *  actions?: { display: Boolean }
  *  container?: Element
  *  data: any
  *  editor?: { inlinePropertiesPanel: Boolean }
+ *  editorAdditionalModules?: Array<any>
+ *  editorProperties?: FormEditorProperties
  *  exporter?: { name: String, version: String }
+ *  propertiesPanel?: { parent: Element, feelPopupContainer: Element }
  *  schema: any
+ *  viewerAdditionalModules?: Array<any>
+ *  viewerProperties?: FormProperties
  * } } FormPlaygroundOptions
  */
 

packages/form-js-playground/src/components/PlaygroundRoot.js

@@ -31,7 +31,8 @@ export function PlaygroundRoot(props) {
     viewerProperties = {},
     editorProperties = {},
     viewerAdditionalModules = [],
-    editorAdditionalModules = []
+    editorAdditionalModules = [],
+    propertiesPanel: propertiesPanelConfig = {}
   } = props;
 
   const {
@@ -115,7 +116,8 @@ export function PlaygroundRoot(props) {
         parent: paletteContainerRef.current
       },
       propertiesPanel: {
-        parent: propertiesPanelContainerRef.current
+        parent: propertiesPanelContainerRef.current,
+        ...propertiesPanelConfig
       },
       exporter: exporterConfig,
       properties: {