@bpmn-io/properties-panel 3.16.0 → 3.17.0

package/dist/assets/properties-panel.css

@@ -1113,7 +1113,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1165,14 +1165,14 @@ textarea.bio-properties-panel-input {
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);
+}
 
-  &.right {
-    padding-right: 6px;
-  }
+.bio-properties-panel-tooltip.right {
+  padding-right: 6px;
+}
 
-  &.top {
-    flex-direction: column;
-  }
+.bio-properties-panel-tooltip.top {
+  flex-direction: column;
 }
 
 .bio-properties-panel-tooltip-content {
@@ -1414,9 +1414,12 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
   position: absolute;
-  display: none;
+  top: 0;
   right: 0;
-  bottom: -1px;
+  line-height: 1;
+  padding: 2px 4px;
+  margin: 3px;
+  display: none;
   background: none;
   border: none;
   color: var(--feel-open-popup-color);

package/dist/index.esm.js

@@ -1270,6 +1270,7 @@ function PopupComponent(props, globalRef) {
     }
     return () => focusTrapRef.current && focusTrapRef.current.deactivate();
   }, [popupRef]);
+  useEvent('propertiesPanel.detach', onClose);
   return createPortal(jsx("div", {
     "aria-label": title,
     tabIndex: -1,
@@ -1449,7 +1450,13 @@ function FEELPopupRoot(props) {
     setSourceElement(_sourceElement);
     emit('open');
   };
-  const handleClose = () => {
+  const handleClose = (event = {}) => {
+    const {
+      id
+    } = event;
+    if (id && id !== source) {
+      return;
+    }
     setOpen(false);
     setSource(null);
   };
@@ -1618,7 +1625,7 @@ function FeelPopupComponent(props) {
     }), jsx(Popup.Footer, {
       children: jsx("button", {
         type: "button",
-        onClick: onClose,
+        onClick: () => onClose(),
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
         children: "Close"
@@ -1880,7 +1887,7 @@ function NumberFieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -1926,7 +1933,7 @@ function prefixId$6(id) {
 }
 
 const noop$2 = () => {};
-function FeelTextfield(props) {
+function FeelTextfieldComponent(props) {
   const {
     debounce,
     id,
@@ -2128,6 +2135,7 @@ function FeelTextfield(props) {
     })]
   });
 }
+const FeelTextfield = withAutoClosePopup(FeelTextfieldComponent);
 const OptionalFeelInput = forwardRef((props, ref) => {
   const {
     id,
@@ -2380,7 +2388,7 @@ function FeelEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -2606,6 +2614,27 @@ function getPopupTitle(element, label) {
   }
   return `${popupTitle}${label}`;
 }
+function withAutoClosePopup(Component) {
+  return function (props) {
+    const {
+      id
+    } = props;
+    const {
+      close
+    } = useContext(FeelPopupContext);
+    const closePopup = useStaticCallback(close);
+    useEffect(() => {
+      return () => {
+        closePopup({
+          id
+        });
+      };
+    }, []);
+    return jsx(Component, {
+      ...props
+    });
+  };
+}
 
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
@@ -3446,7 +3475,7 @@ function TemplatingEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -3868,7 +3897,7 @@ function SelectEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onChange = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -4077,7 +4106,7 @@ function TextAreaEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -4217,7 +4246,7 @@ function TextfieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {