@bpmn-io/properties-panel 3.41.2 → 3.41.3

package/dist/index.esm.js

@@ -1943,6 +1943,7 @@ function JsonEditor(props) {
  * @param {boolean} [props.disabled]
  * @param {string} [props.placeholder]
  * @param {string} [props.tooltip]
+ * @param {Function} [props.validate]
  */
 function JsonEditorEntry(props) {
   const {
@@ -1955,25 +1956,30 @@ function JsonEditorEntry(props) {
     setValue,
     disabled,
     placeholder,
-    tooltip
+    tooltip,
+    validate
   } = props;
   const globalError = useError(id);
   let value = getValue(element);
+  const [localError, setLocalError] = useState(() => computeError(validate, value));
   const [editorValue, setEditorValue] = useState(value);
   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 jsxs("div", {
     class: classnames('bio-properties-panel-entry', error && 'has-error'),
     "data-entry-id": id,
@@ -2007,6 +2013,9 @@ function isEdited$8(node) {
 
 // helpers /////////////////
 
+function computeError(validate, value) {
+  return (isFunction(validate) ? validate(value) : null) || validateJson(value);
+}
 function validateJson(value) {
   if (!value || !value.trim()) return null;
   try {
@@ -2583,12 +2592,14 @@ function NumberFieldEntry(props) {
     }
   }, [value, validate]);
   const onInput = newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
+    if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setValue(newValue, newValidationError);
-    setLocalError(newValidationError);
   };
   const error = globalError || localError;
   return jsxs("div", {
@@ -3183,16 +3194,16 @@ function FeelEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (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 (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setValidationError(newValidationError);
     }
-    setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
@@ -3915,12 +3926,14 @@ function SelectEntry(props) {
     }
   }, [value, validate]);
   const onChange = newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
+    if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setValue(newValue, newValidationError);
-    setLocalError(newValidationError);
   };
   const error = globalError || localError;
   return jsxs("div", {
@@ -4195,14 +4208,14 @@ function TextAreaEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
     if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setLocalError(newValidationError);
   });
   const error = globalError || localError;
   return jsxs("div", {
@@ -4394,14 +4407,14 @@ function TextfieldEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
     if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setLocalError(newValidationError);
   });
   const error = globalError || localError;
   return jsxs("div", {