@bpmn-io/properties-panel 3.41.1 → 3.41.3

package/dist/index.js

@@ -1944,6 +1944,7 @@ function JsonEditor(props) {
         children: label
       })
     }), jsxRuntime.jsx("div", {
+      class: classnames('bio-properties-panel-input', value && 'edited'),
       ref: containerRef
     })]
   });
@@ -1963,6 +1964,7 @@ function JsonEditor(props) {
  * @param {boolean} [props.disabled]
  * @param {string} [props.placeholder]
  * @param {string} [props.tooltip]
+ * @param {Function} [props.validate]
  */
 function JsonEditorEntry(props) {
   const {
@@ -1975,25 +1977,30 @@ function JsonEditorEntry(props) {
     setValue,
     disabled,
     placeholder,
-    tooltip
+    tooltip,
+    validate
   } = props;
   const globalError = useError(id);
   let value = getValue(element);
+  const [localError, setLocalError] = hooks.useState(() => computeError(validate, value));
   const [editorValue, setEditorValue] = hooks.useState(value);
   hooks.useEffect(() => {
     if (value === editorValue) {
       return;
     }
     setEditorValue(value);
-  }, [value]);
+    setLocalError(computeError(validate, value));
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     setEditorValue(newValue);
     const currentValue = getValue(element);
     if (newValue !== currentValue) {
-      setValue(newValue);
+      const newValidationError = computeError(validate, newValue);
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
   });
-  const error = globalError || validateJson(editorValue);
+  const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error && 'has-error'),
     "data-entry-id": id,
@@ -2022,12 +2029,14 @@ function JsonEditorEntry(props) {
  * Check if the JSON editor entry has been edited.
  */
 function isEdited$8(node) {
-  const cmContent = node && node.querySelector('.cm-content');
-  return cmContent ? cmContent.textContent.trim().length > 0 : false;
+  return node && node.classList.contains('edited');
 }
 
 // helpers /////////////////
 
+function computeError(validate, value) {
+  return (minDash.isFunction(validate) ? validate(value) : null) || validateJson(value);
+}
 function validateJson(value) {
   if (!value || !value.trim()) return null;
   try {
@@ -2604,12 +2613,14 @@ function NumberFieldEntry(props) {
     }
   }, [value, validate]);
   const onInput = newValue => {
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
+    if (newValue !== value) {
+      let newValidationError = null;
+      if (minDash.isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setValue(newValue, newValidationError);
-    setLocalError(newValidationError);
   };
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
@@ -3204,16 +3215,16 @@ function FeelEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
 
-    // don't create multiple commandStack entries for the same value
+    // don't create multiple commandStack entries and do validation for the same value
     if (newValue !== value) {
+      let newValidationError = null;
+      if (minDash.isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setValidationError(newValidationError);
     }
-    setValidationError(newValidationError);
   });
   const onError = hooks.useCallback(err => {
     setLocalError(err);
@@ -3936,12 +3947,14 @@ function SelectEntry(props) {
     }
   }, [value, validate]);
   const onChange = newValue => {
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
+    if (newValue !== value) {
+      let newValidationError = null;
+      if (minDash.isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setValue(newValue, newValidationError);
-    setLocalError(newValidationError);
   };
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
@@ -4216,14 +4229,14 @@ function TextAreaEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
     if (newValue !== value) {
+      let newValidationError = null;
+      if (minDash.isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setLocalError(newValidationError);
   });
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
@@ -4415,14 +4428,14 @@ function TextfieldEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
     if (newValue !== value) {
+      let newValidationError = null;
+      if (minDash.isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setLocalError(newValidationError);
   });
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {