@bpmn-io/properties-panel 3.41.2 → 3.42.0

package/dist/index.esm.js

@@ -1047,9 +1047,12 @@ const DEFAULT_TOOLTIP = {};
  * A basic properties panel component. Describes *how* content will be rendered, accepts
  * data from implementor to describe *what* will be rendered.
  *
+ * If `headerProvider` is omitted (or `null`), the built-in `<Header>` is not rendered;
+ * consumers can render `<Header>` standalone elsewhere using the same provider shape.
+ *
  * @param {Object} props
  * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {import('./components/Header').HeaderProvider} [props.headerProvider]
  * @param {PlaceholderProvider} [props.placeholderProvider]
  * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
  * @param {Object} [props.layoutConfig]
@@ -1178,10 +1181,10 @@ function PropertiesPanel(props) {
               value: eventContext,
               children: jsxs("div", {
                 class: "bio-properties-panel",
-                children: [jsx(Header, {
+                children: [headerProvider ? jsx(Header, {
                   element: element,
                   headerProvider: headerProvider
-                }), jsx("div", {
+                }) : null, jsx("div", {
                   class: "bio-properties-panel-scroll-container",
                   children: groups.map(group => {
                     const {
@@ -1943,6 +1946,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 +1959,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 +2016,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 +2595,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 +3197,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 +3929,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 +4211,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 +4410,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", {