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

package/dist/form-playground.umd.js

@@ -54616,29 +54616,6 @@
     return callback;
   }
 
-  /**
-   * Throttle fn, calling at most once
-   * in the given interval.
-   *
-   * @param  {Function} fn
-   * @param  {Number} interval
-   *
-   * @return {Function} throttled function
-   */
-  function throttle$1(fn, interval) {
-    let throttling = false;
-    return function (...args) {
-      if (throttling) {
-        return;
-      }
-      fn(...args);
-      throttling = true;
-      setTimeout(() => {
-        throttling = false;
-      }, interval);
-    };
-  }
-
   /**
    * Bind function against target <this>.
    *
@@ -65031,20 +65008,24 @@
 
     // set edited state depending on all entries
     y(() => {
-      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();
@@ -65472,7 +65453,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);
     }
@@ -65486,7 +65471,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);
     }
@@ -65517,8 +65503,9 @@
    * @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,
@@ -65534,7 +65521,8 @@
       title
     } = props;
     const focusTrapRef = s$1(null);
-    const popupRef = s$1(null);
+    const localRef = s$1(null);
+    const popupRef = globalRef || localRef;
     const handleKeydown = event => {
       // do not allow keyboard events to bubble
       event.stopPropagation();
@@ -65596,6 +65584,7 @@
       children: props.children
     }), container || document.body);
   }
+  const Popup = x$1(PopupComponent);
   Popup.Title = Title;
   Popup.Body = Body;
   Popup.Footer = Footer;
@@ -65604,6 +65593,7 @@
       children,
       className,
       draggable,
+      emit = () => {},
       title,
       ...rest
     } = props;
@@ -65616,7 +65606,8 @@
     });
     const dragPreviewRef = s$1();
     const titleRef = s$1();
-    const onMove = throttle$1((_, delta) => {
+    const onMove = (event, delta) => {
+      cancel(event);
       const {
         x: dx,
         y: dy
@@ -65628,20 +65619,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 e$1("div", {
       class: classNames('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -65694,11 +65698,19 @@
   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 {
@@ -65721,17 +65733,21 @@
     const isOpen = A$1(() => {
       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,
@@ -65774,6 +65790,7 @@
         onClose: handleClose,
         container: popupContainer,
         sourceElement: sourceElement,
+        emit: emit,
         ...popupConfig
       }), props.children]
     });
@@ -65792,9 +65809,11 @@
       tooltipContainer,
       type,
       value,
-      variables
+      variables,
+      emit
     } = props;
     const editorRef = s$1();
+    const popupRef = s$1();
     const isAutoCompletionOpen = s$1(false);
     const handleSetReturnFocus = () => {
       sourceElement && sourceElement.focus();
@@ -65817,9 +65836,18 @@
         }
       }
     };
+    y(() => {
+      emit('opened', {
+        domNode: popupRef.current
+      });
+      return () => emit('close', {
+        domNode: popupRef.current
+      });
+    }, []);
     return e$1(Popup, {
       container: container,
       className: "bio-properties-panel-feel-popup",
+      emit: emit,
       position: position,
       title: title,
       onClose: onClose
@@ -65833,8 +65861,10 @@
       onPostDeactivate: handleSetReturnFocus,
       height: FEEL_POPUP_HEIGHT,
       width: FEEL_POPUP_WIDTH,
+      ref: popupRef,
       children: [e$1(Popup.Title, {
         title: title,
+        emit: emit,
         draggable: true
       }), e$1(Popup.Body, {
         children: e$1("div", {
@@ -65884,6 +65914,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 = s$1(false);
+    y(() => {
+      if (isMounted.current) {
+        return effect();
+      } else {
+        isMounted.current = true;
+      }
+    }, deps);
+  }
   function ToggleSwitch(props) {
     const {
       id,
@@ -66779,7 +66826,7 @@
 
   // todo(pinussilvestrus): make this configurable in the future
   function getPopupTitle(element, label) {
-    let popupTitle;
+    let popupTitle = '';
     if (element && element.type) {
       popupTitle = `${element.type} / `;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -44,7 +44,7 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^1.3.0",
+    "@bpmn-io/form-js-editor": "^1.3.1",
     "@bpmn-io/form-js-viewer": "^1.3.0",
     "@codemirror/autocomplete": "^6.3.4",
     "@codemirror/commands": "^6.1.2",
@@ -70,5 +70,5 @@
     "rollup-plugin-css-only": "^4.0.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "f7cc5395b19de74eb7d9183af38dc462170a6179"
+  "gitHead": "0c629e002118aaabaa538415e3c922e7f5d3ae4c"
 }