@bpmn-io/properties-panel 3.33.1 → 3.33.2

package/dist/index.esm.js

@@ -2200,7 +2200,7 @@ function FeelTextfield(props) {
     element,
     label,
     hostLanguage,
-    onInput,
+    onInput: commitValue,
     onBlur,
     onError,
     placeholder,
@@ -2216,6 +2216,12 @@ function FeelTextfield(props) {
   const [localValue, setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
   const containerRef = useRef();
+  const onInput = useCallback(newValue => {
+    // we don't commit empty FEEL expressions,
+    // but instead serialize them as <undefined>
+    const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
   const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const feelLanguageContext = useContext(FeelLanguageContext);
@@ -2235,13 +2241,7 @@ function FeelTextfield(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
-  const handleInput = newValue => {
-    // we don't commit empty FEEL expressions,
-    // but instead serialize them as <undefined>
-    const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
+  const handleInput = useDebounce(onInput, debounce);
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
       return;
@@ -3432,7 +3432,7 @@ function TextArea(props) {
     id,
     label,
     debounce,
-    onInput,
+    onInput: commitValue,
     value = '',
     disabled,
     monospace,
@@ -3445,16 +3445,16 @@ function TextArea(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
+  const onInput = useCallback(newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
   const visible = useElementVisible(ref.current);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
-  const handleInput = newValue => {
-    const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
+  const handleInput = useDebounce(onInput, debounce);
   const handleLocalInput = e => {
     autoResize && resizeToContents(e.target);
     if (e.target.value === localValue) {
@@ -3613,7 +3613,7 @@ function Textfield(props) {
     disabled = false,
     id,
     label,
-    onInput,
+    onInput: commitValue,
     onFocus,
     onBlur,
     placeholder,
@@ -3622,11 +3622,15 @@ function Textfield(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
+  const onInput = useCallback(newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
+  const handleInput = useDebounce(onInput, debounce);
   const handleOnBlur = e => {
     const trimmedValue = e.target.value.trim();
 
@@ -3636,10 +3640,6 @@ function Textfield(props) {
       onBlur(e);
     }
   };
-  const handleInput = newValue => {
-    const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
   const handleLocalInput = e => {
     if (e.target.value === localValue) {
       return;