@bpmn-io/properties-panel 3.15.0 → 3.17.0

package/dist/index.js

@@ -305,7 +305,9 @@ function Tooltip(props) {
   const {
     forId,
     value,
-    parent
+    parent,
+    direction = 'right',
+    position
   } = props;
   const [visible, setShow] = hooks.useState(false);
   const [focusedViaKeyboard, setFocusedViaKeyboard] = hooks.useState(false);
@@ -374,11 +376,11 @@ function Tooltip(props) {
   }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
     return jsxRuntime.jsxs("div", {
-      class: "bio-properties-panel-tooltip",
+      class: `bio-properties-panel-tooltip ${direction}`,
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
       "aria-labelledby": forId,
-      style: getTooltipPosition(wrapperRef.current),
+      style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
       children: [jsxRuntime.jsx("div", {
@@ -1031,7 +1033,7 @@ const CodeEditor = compat.forwardRef((props, ref) => {
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
-      extensions: [...(enableGutters ? [view.lineNumbers()] : [])]
+      extensions: [...(enableGutters ? [view.lineNumbers()] : []), view.EditorView.lineWrapping]
     });
     setEditor(editor);
     return () => {
@@ -1289,6 +1291,7 @@ function PopupComponent(props, globalRef) {
     }
     return () => focusTrapRef.current && focusTrapRef.current.deactivate();
   }, [popupRef]);
+  useEvent('propertiesPanel.detach', onClose);
   return compat.createPortal(jsxRuntime.jsx("div", {
     "aria-label": title,
     tabIndex: -1,
@@ -1468,7 +1471,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);
   };
@@ -1637,7 +1646,7 @@ function FeelPopupComponent(props) {
     }), jsxRuntime.jsx(Popup.Footer, {
       children: jsxRuntime.jsx("button", {
         type: "button",
-        onClick: onClose,
+        onClick: () => onClose(),
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
         children: "Close"
@@ -1899,7 +1908,7 @@ function NumberFieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
@@ -1945,7 +1954,7 @@ function prefixId$6(id) {
 }
 
 const noop$2 = () => {};
-function FeelTextfield(props) {
+function FeelTextfieldComponent(props) {
   const {
     debounce,
     id,
@@ -2147,6 +2156,7 @@ function FeelTextfield(props) {
     })]
   });
 }
+const FeelTextfield = withAutoClosePopup(FeelTextfieldComponent);
 const OptionalFeelInput = compat.forwardRef((props, ref) => {
   const {
     id,
@@ -2399,7 +2409,7 @@ function FeelEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
@@ -2625,6 +2635,27 @@ function getPopupTitle(element, label) {
   }
   return `${popupTitle}${label}`;
 }
+function withAutoClosePopup(Component) {
+  return function (props) {
+    const {
+      id
+    } = props;
+    const {
+      close
+    } = hooks.useContext(FeelPopupContext);
+    const closePopup = useStaticCallback(close);
+    hooks.useEffect(() => {
+      return () => {
+        closePopup({
+          id
+        });
+      };
+    }, []);
+    return jsxRuntime.jsx(Component, {
+      ...props
+    });
+  };
+}
 
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
@@ -3465,7 +3496,7 @@ function TemplatingEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
@@ -3887,7 +3918,7 @@ function SelectEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onChange = newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
@@ -4096,7 +4127,7 @@ function TextAreaEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
@@ -4236,7 +4267,7 @@ function TextfieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
@@ -4380,6 +4411,7 @@ exports.TextAreaEntry = TextAreaEntry;
 exports.TextFieldEntry = TextfieldEntry;
 exports.ToggleSwitchEntry = ToggleSwitchEntry;
 exports.TooltipContext = TooltipContext;
+exports.TooltipEntry = TooltipWrapper;
 exports.isCheckboxEntryEdited = isEdited$5;
 exports.isFeelEntryEdited = isEdited$6;
 exports.isNumberFieldEntryEdited = isEdited$7;