@bpmn-io/properties-panel 3.41.1 → 3.41.3

package/dist/assets/properties-panel.css

@@ -569,42 +569,6 @@ textarea.bio-properties-panel-input {
   resize: vertical;
 }
 
-/**
- * JSON Editor (CodeMirror)
- */
-
-.bio-properties-panel-json-editor .cm-editor {
-  border: 1px solid var(--input-border-color);
-  border-radius: 2px;
-  background-color: var(--input-background-color);
-  font-size: var(--text-size-base);
-  font-family: var(--font-family-monospace);
-}
-
-.bio-properties-panel-json-editor .cm-editor.cm-focused {
-  outline: none;
-  background-color: var(--input-focus-background-color);
-  border-color: var(--input-focus-border-color);
-}
-
-.bio-properties-panel-json-editor .cm-scroller {
-  overflow: auto;
-  max-height: 215px;
-}
-
-.bio-properties-panel-json-editor .cm-content {
-  padding-right: 18px;
-}
-
-.bio-properties-panel-entry.has-error .bio-properties-panel-json-editor .cm-editor {
-  border-color: var(--input-error-border-color);
-  background-color: var(--input-error-background-color);
-}
-
-.bio-properties-panel-entry.has-error .bio-properties-panel-json-editor .cm-editor.cm-focused {
-  border-color: var(--input-error-focus-border-color);
-}
-
 .bio-properties-panel-entry.has-error .bio-properties-panel-input,
 .bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
   border-color: var(--input-error-border-color);
@@ -635,6 +599,27 @@ textarea.bio-properties-panel-input {
   margin: auto;
 }
 
+/**
+ * JSON Editor (CodeMirror)
+ */
+
+.bio-properties-panel-json-editor .bio-properties-panel-input {
+  padding: 0;
+}
+
+.bio-properties-panel-json-editor .cm-editor {
+  font-family: var(--font-family-monospace);
+}
+
+.bio-properties-panel-json-editor .cm-editor.cm-focused {
+  outline: none;
+}
+
+.bio-properties-panel-json-editor .cm-scroller {
+  overflow: auto;
+  max-height: 215px;
+}
+
 /**
  * Toggle Switch
  */

package/dist/index.esm.js

@@ -1923,6 +1923,7 @@ function JsonEditor(props) {
         children: label
       })
     }), jsx("div", {
+      class: classnames('bio-properties-panel-input', value && 'edited'),
       ref: containerRef
     })]
   });
@@ -1942,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 {
@@ -1954,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,
@@ -2001,12 +2008,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 (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", {