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

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, throttle as throttle$1, set as set$1, isString, isUndefined, without, has } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set as set$1, isString, isUndefined, without, has } from 'min-dash';
 import classnames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useState, useMemo, useEffect, useCallback, useRef as useRef$1, useLayoutEffect } from 'preact/hooks';
@@ -5243,20 +5243,24 @@ function Group(props) {
 
   // set edited state depending on all entries
   useEffect(() => {
-    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();
@@ -5684,7 +5688,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);
   }
@@ -5698,7 +5706,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);
   }
@@ -5729,8 +5738,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,
@@ -5746,7 +5756,8 @@ function Popup(props) {
     title
   } = props;
   const focusTrapRef = useRef$1(null);
-  const popupRef = useRef$1(null);
+  const localRef = useRef$1(null);
+  const popupRef = globalRef || localRef;
   const handleKeydown = event => {
     // do not allow keyboard events to bubble
     event.stopPropagation();
@@ -5808,6 +5819,7 @@ function Popup(props) {
     children: props.children
   }), container || document.body);
 }
+const Popup = forwardRef(PopupComponent);
 Popup.Title = Title;
 Popup.Body = Body;
 Popup.Footer = Footer;
@@ -5816,6 +5828,7 @@ function Title(props) {
     children,
     className,
     draggable,
+    emit = () => {},
     title,
     ...rest
   } = props;
@@ -5828,7 +5841,8 @@ function Title(props) {
   });
   const dragPreviewRef = useRef$1();
   const titleRef = useRef$1();
-  const onMove = throttle$1((_, delta) => {
+  const onMove = (event, delta) => {
+    cancel(event);
     const {
       x: dx,
       y: dy
@@ -5840,20 +5854,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 jsxs("div", {
     class: classnames('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -5906,11 +5933,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 {
@@ -5933,17 +5968,21 @@ function FEELPopupRoot(props) {
   const isOpen = 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,
@@ -5986,6 +6025,7 @@ function FEELPopupRoot(props) {
       onClose: handleClose,
       container: popupContainer,
       sourceElement: sourceElement,
+      emit: emit,
       ...popupConfig
     }), props.children]
   });
@@ -6004,9 +6044,11 @@ function FeelPopupComponent(props) {
     tooltipContainer,
     type,
     value,
-    variables
+    variables,
+    emit
   } = props;
   const editorRef = useRef$1();
+  const popupRef = useRef$1();
   const isAutoCompletionOpen = useRef$1(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
@@ -6029,9 +6071,18 @@ function FeelPopupComponent(props) {
       }
     }
   };
+  useEffect(() => {
+    emit('opened', {
+      domNode: popupRef.current
+    });
+    return () => emit('close', {
+      domNode: popupRef.current
+    });
+  }, []);
   return jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
+    emit: emit,
     position: position,
     title: title,
     onClose: onClose
@@ -6045,8 +6096,10 @@ function FeelPopupComponent(props) {
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
+    ref: popupRef,
     children: [jsx(Popup.Title, {
       title: title,
+      emit: emit,
       draggable: true
     }), jsx(Popup.Body, {
       children: jsxs("div", {
@@ -6096,6 +6149,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 = useRef$1(false);
+  useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
 function ToggleSwitch(props) {
   const {
     id,
@@ -6991,7 +7061,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} / `;
   }