@bpmn-io/properties-panel 3.40.4 → 3.40.6

package/dist/index.esm.js

@@ -551,10 +551,10 @@ function useDescriptionContext(id, element) {
 function useDebounce(callback, debounceFn) {
   const debouncedCallback = useCallback(debounceFn(callback), [callback, debounceFn]);
 
-  // make sure previous call is not stalled
+  // flush pending calls before unmount the debounced function
   useEffect(() => {
     return () => {
-      debouncedCallback.cancel?.();
+      debouncedCallback.flush?.();
     };
   }, [debouncedCallback]);
   return debouncedCallback;
@@ -1971,6 +1971,7 @@ const FeelEditor = forwardRef((props, ref) => {
     value,
     onInput,
     onKeyDown: onKeyDownProp = noop$4,
+    onBlur = noop$4,
     onFeelToggle = noop$4,
     onLint = noop$4,
     onOpenPopup = noop$4,
@@ -1994,6 +1995,9 @@ const FeelEditor = forwardRef((props, ref) => {
     onInput(newValue);
     setLocalValue(newValue);
   });
+  const handleBlur = useStaticCallback(() => {
+    onBlur();
+  });
   useEffect(() => {
     let editor;
 
@@ -2020,13 +2024,16 @@ const FeelEditor = forwardRef((props, ref) => {
       onKeyDown: onKeyDown,
       onLint: onLint,
       placeholder: placeholder,
+      readOnly: disabled,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables,
       builtins,
       dialect,
       parserDialect,
-      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping],
+      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping, EditorView.domEventHandlers({
+        blur: handleBlur
+      })],
       contentAttributes
     });
     setEditor(editor);
@@ -2495,19 +2502,23 @@ function FeelTextfield(props) {
    * @type { import('min-dash').DebouncedFunction }
    */
   const handleInput = useDebounce(onInput, debounce);
+  const setAndCommitValue = newValue => {
+    // cancel any pending debounced value
+    handleInput.cancel?.();
+    setLocalValue(newValue);
+    onInput(newValue);
+  };
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
       return;
     }
     if (!feelActive) {
-      setLocalValue('=' + localValue);
-      handleInput('=' + localValue);
+      setAndCommitValue('=' + localValue);
     } else {
-      setLocalValue(feelOnlyValue);
-      handleInput(feelOnlyValue);
+      setAndCommitValue(feelOnlyValue);
     }
   });
-  const handleLocalInput = (newValue, useDebounce = true) => {
+  const handleInputChange = newValue => {
     if (feelActive) {
       newValue = '=' + newValue;
     }
@@ -2515,28 +2526,32 @@ function FeelTextfield(props) {
       return;
     }
     setLocalValue(newValue);
-    if (useDebounce) {
-      handleInput(newValue);
-    } else {
-      onInput(newValue);
-    }
+    handleInput(newValue);
     if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
   };
-  const handleOnBlur = e => {
-    handleInput.cancel?.();
+  const handleOptionalInputOnBlur = e => {
     if (e.target.type === 'checkbox') {
-      onInput(e.target.checked);
+      setAndCommitValue(e.target.checked);
     } else {
       const trimmedValue = e.target.value.trim();
-      handleLocalInput(trimmedValue, false);
+      if (trimmedValue !== localValue) {
+        // Trim changed the value — commit trimmed
+        setAndCommitValue(trimmedValue);
+      } else {
+        // Value unchanged — flush any pending debounce
+        handleInput.flush?.();
+      }
     }
     if (onBlur) {
       onBlur(e);
     }
   };
+  const handleFeelEditorOnBlur = () => {
+    handleInput.flush?.();
+  };
   const handleOnKeyDown = e => {
     if (isCmdWithChar(e)) {
       handleInput.flush?.();
@@ -2556,7 +2571,7 @@ function FeelTextfield(props) {
       entryId: id,
       hostLanguage,
       label,
-      onInput: handleLocalInput,
+      onInput: handleInputChange,
       singleLine,
       sourceElement: editorRef.current,
       tooltipContainer,
@@ -2622,8 +2637,7 @@ function FeelTextfield(props) {
       if (isFieldEmpty || isAllSelected) {
         const textData = event.clipboardData.getData('text');
         const trimmedValue = textData.trim();
-        setLocalValue(trimmedValue);
-        handleInput(trimmedValue);
+        setAndCommitValue(trimmedValue);
         if (!feelActive && isString(trimmedValue) && trimmedValue.startsWith('=')) {
           setFocus(trimmedValue.length - 1);
         }
@@ -2667,7 +2681,8 @@ function FeelTextfield(props) {
         onClick: handleFeelToggle
       }), feelActive ? jsx(FeelEditor, {
         name: id,
-        onInput: handleLocalInput,
+        onInput: handleInputChange,
+        onBlur: handleFeelEditorOnBlur,
         onKeyDown: handleOnKeyDown,
         contentAttributes: {
           'id': prefixId$5(id),
@@ -2690,9 +2705,9 @@ function FeelTextfield(props) {
       }) : jsx(OptionalComponent, {
         ...props,
         popupOpen: isPopupOpen,
-        onInput: handleLocalInput,
+        onInput: handleInputChange,
         onKeyDown: handleOnKeyDown,
-        onBlur: handleOnBlur,
+        onBlur: handleOptionalInputOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label