camunda-bpmn-js 3.3.0 → 3.4.0

package/dist/assets/properties-panel.css

@@ -1237,7 +1237,7 @@ textarea.bio-properties-panel-input {
   --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
   --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
 
-  position: absolute;
+  position: fixed;
   display: flex;
   flex: auto;
   flex-direction: column;

package/dist/base-modeler.development.js

@@ -3827,10 +3827,7 @@
   	if (typeof f == "function") {
   		var a = function a () {
   			if (this instanceof a) {
-  				var args = [null];
-  				args.push.apply(args, arguments);
-  				var Ctor = Function.bind.apply(f, args);
-  				return new Ctor();
+          return Reflect.construct(f, arguments, this.constructor);
   			}
   			return f.apply(this, arguments);
   		};
@@ -17000,6 +16997,7 @@
    */
 
 
+
   // inlined ../../resources/logo.svg
   var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
 
@@ -52503,6 +52501,7 @@
    * @typedef {import('../../util/Types').Rect} Rect
    */
 
+
   /**
    * Return direction given axis and delta.
    *
@@ -60404,6 +60403,7 @@
    */
 
 
+
   /**
    * A base connection layouter implementation
    * that layouts the connection by directly connecting
@@ -67143,7 +67143,7 @@
     };
   }
 
-  var index$4 = {
+  var index$5 = {
     __init__: [ 'minimap' ],
     minimap: [ 'type', Minimap ]
   };
@@ -67299,7 +67299,7 @@
     return Math.trunc(Math.random() * 1000000);
   }
 
-  var index$1 = {
+  var index$4 = {
     __init__: [ 'grid' ],
     grid: [ 'type', Grid ]
   };
@@ -98001,20 +98001,24 @@
 
     // set edited state depending on all entries
     p(() => {
-      const hasOneEditedEntry = entries.find(entry => {
-        const {
-          id,
-          isEdited
-        } = entry;
-        const entryNode = query(`[data-entry-id="${id}"]`);
-        if (!isFunction(isEdited) || !entryNode) {
-          return false;
-        }
-        const inputNode = query('.bio-properties-panel-input', entryNode);
-        return isEdited(inputNode);
+      // TODO(@barmac): replace with CSS when `:has()` is supported in all major browsers, or rewrite as in https://github.com/camunda/camunda-modeler/issues/3815#issuecomment-1733038161
+      const scheduled = requestAnimationFrame(() => {
+        const hasOneEditedEntry = entries.find(entry => {
+          const {
+            id,
+            isEdited
+          } = entry;
+          const entryNode = query(`[data-entry-id="${id}"]`);
+          if (!isFunction(isEdited) || !entryNode) {
+            return false;
+          }
+          const inputNode = query('.bio-properties-panel-input', entryNode);
+          return isEdited(inputNode);
+        });
+        setEdited(hasOneEditedEntry);
       });
-      setEdited(hasOneEditedEntry);
-    }, [entries]);
+      return () => cancelAnimationFrame(scheduled);
+    }, [entries, setEdited]);
 
     // set error state depending on all entries
     const allErrors = useErrors();
@@ -98402,7 +98406,11 @@
       // (2) setup drag listeners
 
       // attach drag + cleanup event
-      document.addEventListener('dragover', onDrag);
+      // we need to do this to make sure we track cursor
+      // movements before we reach other drag event handlers,
+      // e.g. in child containers.
+      document.addEventListener('dragover', onDrag, true);
+      document.addEventListener('dragenter', preventDefault, true);
       document.addEventListener('dragend', onEnd);
       document.addEventListener('drop', preventDefault);
     }
@@ -98416,7 +98424,8 @@
       return fn.call(self, event, delta);
     }
     function onEnd() {
-      document.removeEventListener('dragover', onDrag);
+      document.removeEventListener('dragover', onDrag, true);
+      document.removeEventListener('dragenter', preventDefault, true);
       document.removeEventListener('dragend', onEnd);
       document.removeEventListener('drop', preventDefault);
     }
@@ -98438,6 +98447,7 @@
    * @param {Object} props
    * @param {HTMLElement} [props.container]
    * @param {string} [props.className]
+   * @param {boolean} [props.delayInitialFocus]
    * @param {{x: number, y: number}} [props.position]
    * @param {number} [props.width]
    * @param {number} [props.height]
@@ -98445,12 +98455,15 @@
    * @param {Function} [props.onPostActivate]
    * @param {Function} [props.onPostDeactivate]
    * @param {boolean} [props.returnFocus]
+   * @param {boolean} [props.closeOnEscape]
    * @param {string} props.title
+   * @param {Ref} [ref]
    */
-  function Popup(props) {
+  function PopupComponent(props, globalRef) {
     const {
       container,
       className,
+      delayInitialFocus,
       position,
       width,
       height,
@@ -98458,12 +98471,16 @@
       onPostActivate = noop$3,
       onPostDeactivate = noop$3,
       returnFocus = true,
+      closeOnEscape = true,
       title
     } = props;
     const focusTrapRef = _$1(null);
-    const popupRef = _$1(null);
-    const handleKeyPress = event => {
-      if (event.key === 'Escape') {
+    const localRef = _$1(null);
+    const popupRef = globalRef || localRef;
+    const handleKeydown = event => {
+      // do not allow keyboard events to bubble
+      event.stopPropagation();
+      if (closeOnEscape && event.key === 'Escape') {
         onClose();
       }
     };
@@ -98488,14 +98505,6 @@
     if (height) {
       style.height = height + 'px';
     }
-    p(() => {
-      if (popupRef.current) {
-        popupRef.current.addEventListener('keydown', handleKeyPress);
-      }
-      return () => {
-        popupRef.current.removeEventListener('keydown', handleKeyPress);
-      };
-    }, [popupRef]);
     p(() => {
       if (popupRef.current) {
         popupRef.current.addEventListener('focusin', handleFocus);
@@ -98508,6 +98517,7 @@
       if (popupRef.current) {
         focusTrapRef.current = createFocusTrap(popupRef.current, {
           clickOutsideDeactivates: true,
+          delayInitialFocus,
           fallbackFocus: popupRef.current,
           onPostActivate,
           onPostDeactivate,
@@ -98521,12 +98531,14 @@
       "aria-label": title,
       tabIndex: -1,
       ref: popupRef,
+      onKeyDown: handleKeydown,
       role: "dialog",
       class: classnames('bio-properties-panel-popup', className),
       style: style,
       children: props.children
     }), container || document.body);
   }
+  const Popup = k(PopupComponent);
   Popup.Title = Title;
   Popup.Body = Body;
   Popup.Footer = Footer;
@@ -98535,6 +98547,7 @@
       children,
       className,
       draggable,
+      emit = () => {},
       title,
       ...rest
     } = props;
@@ -98547,7 +98560,8 @@
     });
     const dragPreviewRef = _$1();
     const titleRef = _$1();
-    const onMove = throttle((_, delta) => {
+    const onMove = (event, delta) => {
+      cancel(event);
       const {
         x: dx,
         y: dy
@@ -98559,20 +98573,33 @@
       const popupParent = getPopupParent(titleRef.current);
       popupParent.style.top = newPosition.y + 'px';
       popupParent.style.left = newPosition.x + 'px';
-    });
+
+      // notify interested parties
+      emit('dragover', {
+        newPosition,
+        delta
+      });
+    };
     const onMoveStart = event => {
       // initialize drag handler
       const onDragStart = createDragger(onMove, dragPreviewRef.current);
       onDragStart(event);
+      event.stopPropagation();
       const popupParent = getPopupParent(titleRef.current);
       const bounds = popupParent.getBoundingClientRect();
       context.current.startPosition = {
         x: bounds.left,
         y: bounds.top
       };
+
+      // notify interested parties
+      emit('dragstart');
     };
     const onMoveEnd = () => {
       context.current.newPosition = null;
+
+      // notify interested parties
+      emit('dragend');
     };
     return o("div", {
       class: classnames('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -98625,27 +98652,53 @@
   function getPopupParent(node) {
     return node.closest('.bio-properties-panel-popup');
   }
+  function cancel(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
 
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
   /**
-   * FEEL popup component, built as a singleton.
+   * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
+   *  - `feelPopup.open` - fired before the popup is mounted
+   *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.closed` - fired after the popup is unmounted
    */
   function FEELPopupRoot(props) {
     const {
-      element
+      element,
+      eventBus = {
+        fire() {},
+        on() {},
+        off() {}
+      },
+      popupContainer
     } = props;
     const prevElement = usePrevious(element);
     const [popupConfig, setPopupConfig] = h({});
     const [open, setOpen] = h(false);
     const [source, setSource] = h(null);
     const [sourceElement, setSourceElement] = h(null);
-    const handleOpen = (key, config, _sourceElement) => {
-      setSource(key);
+    const emit = (type, context) => {
+      eventBus.fire('feelPopup.' + type, context);
+    };
+    const isOpen = T$1(() => {
+      return !!open;
+    }, [open]);
+    useUpdateEffect(() => {
+      if (!open) {
+        emit('closed');
+      }
+    }, [open]);
+    const handleOpen = (entryId, config, _sourceElement) => {
+      setSource(entryId);
       setPopupConfig(config);
       setOpen(true);
       setSourceElement(_sourceElement);
+      emit('open');
     };
     const handleClose = () => {
       setOpen(false);
@@ -98659,21 +98712,47 @@
 
     // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
     p(() => {
-      if (element && element !== prevElement) {
+      if (element && prevElement && element !== prevElement) {
         handleClose();
       }
     }, [element]);
+
+    // allow close and open via events
+    p(() => {
+      const handlePopupOpen = context => {
+        const {
+          entryId,
+          popupConfig,
+          sourceElement
+        } = context;
+        handleOpen(entryId, popupConfig, sourceElement);
+      };
+      const handleIsOpen = () => {
+        return isOpen();
+      };
+      eventBus.on('feelPopup._close', handleClose);
+      eventBus.on('feelPopup._open', handlePopupOpen);
+      eventBus.on('feelPopup._isOpen', handleIsOpen);
+      return () => {
+        eventBus.off('feelPopup._close', handleClose);
+        eventBus.off('feelPopup._open', handleOpen);
+        eventBus.off('feelPopup._isOpen', handleIsOpen);
+      };
+    }, [eventBus, isOpen]);
     return o(FeelPopupContext.Provider, {
       value: feelPopupContext,
       children: [open && o(FeelPopupComponent, {
         onClose: handleClose,
+        container: popupContainer,
         sourceElement: sourceElement,
+        emit: emit,
         ...popupConfig
       }), props.children]
     });
   }
   function FeelPopupComponent(props) {
     const {
+      container,
       id,
       hostLanguage,
       onInput,
@@ -98685,20 +98764,45 @@
       tooltipContainer,
       type,
       value,
-      variables
+      variables,
+      emit
     } = props;
     const editorRef = _$1();
+    const popupRef = _$1();
+    const isAutoCompletionOpen = _$1(false);
     const handleSetReturnFocus = () => {
       sourceElement && sourceElement.focus();
     };
-    p(() => {
-      const editor = editorRef.current;
-      if (editor) {
-        editor.focus();
+    const onKeyDownCapture = event => {
+      // we use capture here to make sure we handle the event before the editor does
+      if (event.key === 'Escape') {
+        isAutoCompletionOpen.current = autoCompletionOpen(event.target);
+      }
+    };
+    const onKeyDown = event => {
+      if (event.key === 'Escape') {
+        // close popup only if auto completion is not open
+        // we need to do check this because the editor is not
+        // stop propagating the keydown event
+        // cf. https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322/5
+        if (!isAutoCompletionOpen.current) {
+          onClose();
+          isAutoCompletionOpen.current = false;
+        }
       }
-    }, [editorRef, id]);
+    };
+    p(() => {
+      emit('opened', {
+        domNode: popupRef.current
+      });
+      return () => emit('close', {
+        domNode: popupRef.current
+      });
+    }, []);
     return o(Popup, {
+      container: container,
       className: "bio-properties-panel-feel-popup",
+      emit: emit,
       position: position,
       title: title,
       onClose: onClose
@@ -98706,14 +98810,20 @@
       // handle focus manually on deactivate
       ,
       returnFocus: false,
+      closeOnEscape: false,
+      delayInitialFocus: false,
       onPostDeactivate: handleSetReturnFocus,
       height: FEEL_POPUP_HEIGHT,
       width: FEEL_POPUP_WIDTH,
+      ref: popupRef,
       children: [o(Popup.Title, {
         title: title,
+        emit: emit,
         draggable: true
       }), o(Popup.Body, {
         children: o("div", {
+          onKeyDownCapture: onKeyDownCapture,
+          onKeyDown: onKeyDown,
           class: "bio-properties-panel-feel-popup__body",
           children: [type === 'feel' && o(CodeEditor, {
             enableGutters: true,
@@ -98755,6 +98865,26 @@
   function prefixId$8(id) {
     return `bio-properties-panel-${id}`;
   }
+  function autoCompletionOpen(element) {
+    return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
+  }
+
+  /**
+   * This hook behaves like useEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
+   */
+  function useUpdateEffect(effect, deps) {
+    const isMounted = _$1(false);
+    p(() => {
+      if (isMounted.current) {
+        return effect();
+      } else {
+        isMounted.current = true;
+      }
+    }, deps);
+  }
 
   function ToggleSwitch(props) {
     const {
@@ -99185,6 +99315,7 @@
    * @param {Function} [props.descriptionLoaded]
    * @param {TooltipConfig} [props.tooltipConfig]
    * @param {Function} [props.tooltipLoaded]
+   * @param {HTMLElement} [props.feelPopupContainer]
    * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
@@ -99199,6 +99330,7 @@
       descriptionLoaded,
       tooltipConfig,
       tooltipLoaded,
+      feelPopupContainer,
       eventBus
     } = props;
 
@@ -99301,6 +99433,8 @@
                 value: eventContext,
                 children: o(FEELPopupRoot, {
                   element: element,
+                  eventBus: eventBus,
+                  popupContainer: feelPopupContainer,
                   children: o("div", {
                     class: "bio-properties-panel",
                     children: [o(Header, {
@@ -99951,10 +100085,51 @@
   }
   debounceInput.$inject = ['config.debounceInput'];
 
-  var index = {
+  var index$1 = {
     debounceInput: ['factory', debounceInput]
   };
 
+  class FeelPopupModule {
+    constructor(eventBus) {
+      this._eventBus = eventBus;
+    }
+
+    /**
+     * Check if the FEEL popup is open.
+     * @return {Boolean}
+     */
+    isOpen() {
+      return this._eventBus.fire('feelPopup._isOpen');
+    }
+
+    /**
+     * Open the FEEL popup.
+     *
+     * @param {String} entryId
+     * @param {Object} popupConfig
+     * @param {HTMLElement} sourceElement
+     */
+    open(entryId, popupConfig, sourceElement) {
+      return this._eventBus.fire('feelPopup._open', {
+        entryId,
+        popupConfig,
+        sourceElement
+      });
+    }
+
+    /**
+     * Close the FEEL popup.
+     */
+    close() {
+      return this._eventBus.fire('feelPopup._close');
+    }
+  }
+  FeelPopupModule.$inject = ['eventBus'];
+
+  var index = {
+    feelPopup: ['type', FeelPopupModule]
+  };
+
   var zeebe = {};
 
   var require$$0 = /*@__PURE__*/getAugmentedNamespace(index_esm);
@@ -102835,7 +103010,8 @@
       getProviders,
       layoutConfig: initialLayoutConfig,
       descriptionConfig,
-      tooltipConfig
+      tooltipConfig,
+      feelPopupContainer
     } = props;
     const canvas = injector.get('canvas');
     const elementRegistry = injector.get('elementRegistry');
@@ -103011,6 +103187,7 @@
         descriptionLoaded: onDescriptionLoaded,
         tooltipConfig: tooltipConfig,
         tooltipLoaded: onTooltipLoaded,
+        feelPopupContainer: feelPopupContainer,
         eventBus: eventBus
       })
     });
@@ -103043,13 +103220,15 @@
         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$1('<div style="height: 100%" class="bio-properties-panel-container"></div>');
       var commandStack = injector.get('commandStack', false);
       commandStack && setupKeyboard(this._container, eventBus, commandStack);
@@ -103160,7 +103339,8 @@
         getProviders: this._getProviders.bind(this),
         layoutConfig: this._layoutConfig,
         descriptionConfig: this._descriptionConfig,
-        tooltipConfig: this._tooltipConfig
+        tooltipConfig: this._tooltipConfig,
+        feelPopupContainer: this._feelPopupContainer
       }), this._container);
       this._eventBus.fire('propertiesPanel.rendered');
     }
@@ -103248,7 +103428,7 @@
   };
 
   var index$3 = {
-    __depends__: [Commands, index],
+    __depends__: [Commands, index$1, index],
     __init__: ['propertiesPanel'],
     propertiesPanel: ['type', BpmnPropertiesPanelRenderer]
   };
@@ -105507,12 +105687,12 @@
         : alignToOriginModule,
       options.disableGrid
         ? {}
-        : index$1
+        : index$4
     ];
   };
 
   Modeler.prototype._extensionModules = [
-    index$4,
+    index$5,
     ExecutableFixModule,
     index$3,
     index$2