@bpmn-io/properties-panel 3.7.1 → 3.9.0

package/dist/index.js

@@ -677,20 +677,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();
@@ -1124,7 +1128,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);
   }
@@ -1138,7 +1146,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);
   }
@@ -1170,8 +1179,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,
@@ -1187,7 +1197,9 @@ 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 containerNode = hooks.useMemo(() => getContainerNode(container), [container]);
   const handleKeydown = event => {
     // do not allow keyboard events to bubble
     event.stopPropagation();
@@ -1247,8 +1259,9 @@ function Popup(props) {
     class: classnames__default["default"]('bio-properties-panel-popup', className),
     style: style,
     children: props.children
-  }), container || document.body);
+  }), containerNode || document.body);
 }
+const Popup = compat.forwardRef(PopupComponent);
 Popup.Title = Title;
 Popup.Body = Body;
 Popup.Footer = Footer;
@@ -1257,6 +1270,7 @@ function Title(props) {
     children,
     className,
     draggable,
+    emit = () => {},
     title,
     ...rest
   } = props;
@@ -1269,7 +1283,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
@@ -1281,20 +1296,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__default["default"]('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -1347,12 +1375,26 @@ function Footer(props) {
 function getPopupParent(node) {
   return node.closest('.bio-properties-panel-popup');
 }
+function cancel(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function getContainerNode(node) {
+  if (typeof node === 'string') {
+    return minDom.query(node);
+  }
+  return node;
+}
 
 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 {
@@ -1375,17 +1417,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,
@@ -1428,6 +1474,7 @@ function FEELPopupRoot(props) {
       onClose: handleClose,
       container: popupContainer,
       sourceElement: sourceElement,
+      emit: emit,
       ...popupConfig
     }), props.children]
   });
@@ -1446,9 +1493,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();
@@ -1471,9 +1520,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
@@ -1486,8 +1544,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", {
@@ -1538,6 +1598,23 @@ 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,