@bpmn-io/form-js-editor 1.3.0 → 1.3.1

package/dist/assets/form-js-editor.css

@@ -1994,7 +1994,7 @@ textarea.bio-properties-panel-input {
   --popup-title-color: hsla(0, 0%, 0%, 1);
   --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/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/index.cjs

@@ -5263,20 +5263,24 @@ function Group(props) {
 
   // set edited state depending on all entries
   hooks.useEffect(() => {
-    const hasOneEditedEntry = entries.find(entry => {
-      const {
-        id,
-        isEdited
-      } = entry;
-      const entryNode = minDom.query(`[data-entry-id="${id}"]`);
-      if (!minDash.isFunction(isEdited) || !entryNode) {
-        return false;
-      }
-      const inputNode = minDom.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 = minDom.query(`[data-entry-id="${id}"]`);
+        if (!minDash.isFunction(isEdited) || !entryNode) {
+          return false;
+        }
+        const inputNode = minDom.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();
@@ -5704,7 +5708,11 @@ function createDragger(fn, dragPreview) {
     // (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);
   }
@@ -5718,7 +5726,8 @@ function createDragger(fn, dragPreview) {
     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);
   }
@@ -5749,8 +5758,9 @@ const noop$3 = () => {};
  * @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,
@@ -5766,7 +5776,8 @@ function Popup(props) {
     title
   } = props;
   const focusTrapRef = hooks.useRef(null);
-  const popupRef = hooks.useRef(null);
+  const localRef = hooks.useRef(null);
+  const popupRef = globalRef || localRef;
   const handleKeydown = event => {
     // do not allow keyboard events to bubble
     event.stopPropagation();
@@ -5828,6 +5839,7 @@ function Popup(props) {
     children: props.children
   }), container || document.body);
 }
+const Popup = React.forwardRef(PopupComponent);
 Popup.Title = Title;
 Popup.Body = Body;
 Popup.Footer = Footer;
@@ -5836,6 +5848,7 @@ function Title(props) {
     children,
     className,
     draggable,
+    emit = () => {},
     title,
     ...rest
   } = props;
@@ -5848,7 +5861,8 @@ function Title(props) {
   });
   const dragPreviewRef = hooks.useRef();
   const titleRef = hooks.useRef();
-  const onMove = minDash.throttle((_, delta) => {
+  const onMove = (event, delta) => {
+    cancel(event);
     const {
       x: dx,
       y: dy
@@ -5860,20 +5874,33 @@ function Title(props) {
     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 jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -5926,11 +5953,19 @@ function Footer(props) {
 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 {
@@ -5953,17 +5988,21 @@ function FEELPopupRoot(props) {
   const isOpen = hooks.useCallback(() => {
     return !!open;
   }, [open]);
+  useUpdateEffect(() => {
+    if (!open) {
+      emit('closed');
+    }
+  }, [open]);
   const handleOpen = (entryId, config, _sourceElement) => {
     setSource(entryId);
     setPopupConfig(config);
     setOpen(true);
     setSourceElement(_sourceElement);
-    emit('opened');
+    emit('open');
   };
   const handleClose = () => {
     setOpen(false);
     setSource(null);
-    emit('closed');
   };
   const feelPopupContext = {
     open: handleOpen,
@@ -6006,6 +6045,7 @@ function FEELPopupRoot(props) {
       onClose: handleClose,
       container: popupContainer,
       sourceElement: sourceElement,
+      emit: emit,
       ...popupConfig
     }), props.children]
   });
@@ -6024,9 +6064,11 @@ function FeelPopupComponent(props) {
     tooltipContainer,
     type,
     value,
-    variables
+    variables,
+    emit
   } = props;
   const editorRef = hooks.useRef();
+  const popupRef = hooks.useRef();
   const isAutoCompletionOpen = hooks.useRef(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
@@ -6049,9 +6091,18 @@ function FeelPopupComponent(props) {
       }
     }
   };
+  hooks.useEffect(() => {
+    emit('opened', {
+      domNode: popupRef.current
+    });
+    return () => emit('close', {
+      domNode: popupRef.current
+    });
+  }, []);
   return jsxRuntime.jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
+    emit: emit,
     position: position,
     title: title,
     onClose: onClose
@@ -6065,8 +6116,10 @@ function FeelPopupComponent(props) {
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
+    ref: popupRef,
     children: [jsxRuntime.jsx(Popup.Title, {
       title: title,
+      emit: emit,
       draggable: true
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
@@ -6116,6 +6169,23 @@ function prefixId$8(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 = hooks.useRef(false);
+  hooks.useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
 function ToggleSwitch(props) {
   const {
     id,
@@ -7011,7 +7081,7 @@ function calculatePopupPosition(element) {
 
 // todo(pinussilvestrus): make this configurable in the future
 function getPopupTitle(element, label) {
-  let popupTitle;
+  let popupTitle = '';
   if (element && element.type) {
     popupTitle = `${element.type} / `;
   }