@bpmn-io/properties-panel 3.27.3 → 3.27.5

package/dist/index.js

@@ -423,6 +423,18 @@ function useDescriptionContext(id, element) {
   return getDescriptionForId(id, element);
 }
 
+function useDebounce(callback, debounceFn) {
+  const debouncedCallback = hooks.useCallback(debounceFn(callback), [callback, debounceFn]);
+
+  // make sure previous call is not stalled
+  hooks.useEffect(() => {
+    return () => {
+      debouncedCallback.flush?.();
+    };
+  }, [debouncedCallback]);
+  return debouncedCallback;
+}
+
 function useError(id) {
   const {
     errors
@@ -2029,11 +2041,7 @@ function FeelTextfieldComponent(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = hooks.useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
+  const handleInputCallback = useDebounce(onInput, debounce);
   const handleInput = newValue => {
     // we don't commit empty FEEL expressions,
     // but instead serialize them as <undefined>
@@ -2067,14 +2075,10 @@ function FeelTextfieldComponent(props) {
     }
   };
   const handleOnBlur = e => {
-    const value = e.target.value;
+    const trimmedValue = e.target.value.trim();
 
-    // we trim the value, if it is needed
-    // and update input accordingly
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
+    // trim and commit on blur
+    onInput(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
@@ -2485,7 +2489,7 @@ function FeelEntry(props) {
       setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
-  }, [element]);
+  }, [element, getValue, setValue, validate]);
   const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
@@ -4026,11 +4030,7 @@ function TextArea(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = hooks.useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
+  const handleInputCallback = useDebounce(onInput, debounce);
   const handleInput = newValue => {
     const newModelValue = newValue === '' ? undefined : newValue;
     handleInputCallback(newModelValue);
@@ -4044,11 +4044,10 @@ function TextArea(props) {
     handleInput(e.target.value);
   };
   const handleOnBlur = e => {
-    const value = e.target.value;
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
@@ -4148,7 +4147,7 @@ function TextAreaEntry(props) {
       setValue(newValue, newValidationError);
     }
     setLocalError(newValidationError);
-  }, [element]);
+  }, [element, getValue, setValue, validate]);
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -4207,17 +4206,12 @@ function Textfield(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = hooks.useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
+  const handleInputCallback = useDebounce(onInput, debounce);
   const handleOnBlur = e => {
-    const value = e.target.value;
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
@@ -4318,7 +4312,7 @@ function TextfieldEntry(props) {
       setValue(newValue, newValidationError);
     }
     setLocalError(newValidationError);
-  }, [element]);
+  }, [element, getValue, setValue, validate]);
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -4489,6 +4483,7 @@ exports.isTemplatingEntryEdited = isEdited$4;
 exports.isTextAreaEntryEdited = isEdited$1;
 exports.isTextFieldEntryEdited = isEdited;
 exports.isToggleSwitchEntryEdited = isEdited$8;
+exports.useDebounce = useDebounce;
 exports.useDescriptionContext = useDescriptionContext;
 exports.useElementVisible = useElementVisible;
 exports.useError = useError;