@bpmn-io/properties-panel 3.26.4 → 3.27.0

package/dist/index.js

@@ -1961,6 +1961,32 @@ function prefixId$6(id) {
 }
 
 const noop$2 = () => {};
+
+/**
+ * @typedef {'required'|'optional'|'static'} FeelType
+ */
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.id
+ * @param {Object} props.element
+ * @param {String} props.label
+ * @param {String} props.hostLanguage
+ * @param {Function} props.onInput
+ * @param {Function} props.onBlur
+ * @param {Function} props.onError
+ * @param {FeelType} [props.feel]
+ * @param {String} props.value
+ * @param {Boolean} [props.singleLine]
+ * @param {Function} props.tooltipContainer
+ * @param {Function | import('preact').Component} props.OptionalComponent
+ * @param {Boolean} props.disabled
+ * @param {Array} props.variables
+ * @param {string} [props.placeholder]
+ * @param {string | import('preact').Component} props.tooltip
+ */
+
 function FeelTextfieldComponent(props) {
   const {
     debounce,
@@ -1969,6 +1995,7 @@ function FeelTextfieldComponent(props) {
     label,
     hostLanguage,
     onInput,
+    onBlur,
     onError,
     placeholder,
     feel,
@@ -1980,7 +2007,7 @@ function FeelTextfieldComponent(props) {
     OptionalComponent = OptionalFeelInput,
     tooltip
   } = props;
-  const [localValue, _setLocalValue] = hooks.useState(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const editorRef = useShowEntryEvent(id);
   const containerRef = hooks.useRef();
   const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
@@ -1998,18 +2025,20 @@ function FeelTextfieldComponent(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
+
+  /**
+   * @type { import('min-dash').DebouncedFunction }
+   */
   const handleInputCallback = hooks.useMemo(() => {
     return debounce(newValue => {
       onInput(newValue);
     });
   }, [onInput, debounce]);
-  const setLocalValue = newValue => {
-    _setLocalValue(newValue);
-    if (typeof newValue === 'undefined' || newValue === '' || newValue === '=') {
-      handleInputCallback(undefined);
-    } else {
-      handleInputCallback(newValue);
-    }
+  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 handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
@@ -2017,8 +2046,10 @@ function FeelTextfieldComponent(props) {
     }
     if (!feelActive) {
       setLocalValue('=' + localValue);
+      handleInput('=' + localValue);
     } else {
       setLocalValue(feelOnlyValue);
+      handleInput(feelOnlyValue);
     }
   });
   const handleLocalInput = newValue => {
@@ -2029,11 +2060,25 @@ function FeelTextfieldComponent(props) {
       return;
     }
     setLocalValue(newValue);
+    handleInput(newValue);
     if (!feelActive && minDash.isString(newValue) && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
   };
+  const handleOnBlur = e => {
+    const value = e.target.value;
+
+    // we trim the value, if it is needed
+    // and update input accordingly
+    if (value.trim() !== value) {
+      setLocalValue(value.trim());
+      handleInput(value.trim());
+    }
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
@@ -2155,6 +2200,7 @@ function FeelTextfieldComponent(props) {
         ...props,
         popupOpen: popuOpen,
         onInput: handleLocalInput,
+        onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -2381,7 +2427,7 @@ const OptionalFeelCheckbox = compat.forwardRef((props, ref) => {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
+ * @param {FeelType} [props.feel]
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
@@ -2389,7 +2435,7 @@ const OptionalFeelCheckbox = compat.forwardRef((props, ref) => {
  * @param {Function} props.validate
  * @param {Function} props.show
  * @param {Function} props.example
- * @param {Function} props.variables
+ * @param {Array} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {string} [props.placeholder]
@@ -2427,7 +2473,7 @@ function FeelEntry(props) {
       setValidationError(newValidationError);
     }
   }, [value, validate]);
-  const onInput = useStaticCallback(newValue => {
+  const onInput = hooks.useCallback(newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
@@ -2438,7 +2484,7 @@ function FeelEntry(props) {
       setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
-  });
+  }, [element]);
   const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
@@ -2490,7 +2536,7 @@ function FeelEntry(props) {
  * @param {String} props.max
  * @param {String} props.min
  * @param {String} props.step
- * @param {Boolean} props.feel
+ * @param {FeelType} [props.feel]
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
@@ -2498,7 +2544,7 @@ function FeelEntry(props) {
  * @param {Function} props.validate
  * @param {Function} props.show
  * @param {Function} props.example
- * @param {Function} props.variables
+ * @param {Array} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
@@ -2517,7 +2563,7 @@ function FeelNumberEntry(props) {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
+ * @param {FeelType} [props.feel]
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
@@ -2525,7 +2571,7 @@ function FeelNumberEntry(props) {
  * @param {Function} props.validate
  * @param {Function} props.show
  * @param {Function} props.example
- * @param {Function} props.variables
+ * @param {Array} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {string} [props.placeholder]
@@ -2545,7 +2591,7 @@ function FeelTextAreaEntry(props) {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
+ * @param {FeelType} [props.feel]
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
@@ -2553,7 +2599,7 @@ function FeelTextAreaEntry(props) {
  * @param {Function} props.validate
  * @param {Function} props.show
  * @param {Function} props.example
- * @param {Function} props.variables
+ * @param {Array} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
@@ -2572,7 +2618,7 @@ function FeelToggleSwitchEntry(props) {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
+ * @param {FeelType} [props.feel]
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
@@ -2580,7 +2626,7 @@ function FeelToggleSwitchEntry(props) {
  * @param {Function} props.validate
  * @param {Function} props.show
  * @param {Function} props.example
- * @param {Function} props.variables
+ * @param {Array} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
@@ -2601,7 +2647,7 @@ function FeelCheckboxEntry(props) {
  * @param {Boolean} props.singleLine
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
+ * @param {FeelType} [props.feel]
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
@@ -2609,7 +2655,7 @@ function FeelCheckboxEntry(props) {
  * @param {Function} props.validate
  * @param {Function} props.show
  * @param {Function} props.example
- * @param {Function} props.variables
+ * @param {Array} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
@@ -3975,13 +4021,36 @@ function TextArea(props) {
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
   const visible = useElementVisible(ref.current);
+
+  /**
+   * @type { import('min-dash').DebouncedFunction }
+   */
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(target => onInput(target.value.length ? target.value : undefined));
+    return debounce(newValue => {
+      onInput(newValue);
+    });
   }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e.target);
+  const handleInput = newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    handleInputCallback(newModelValue);
+  };
+  const handleLocalInput = e => {
     autoResize && resizeToContents(e.target);
+    if (e.target.value === localValue) {
+      return;
+    }
     setLocalValue(e.target.value);
+    handleInput(e.target.value);
+  };
+  const handleOnBlur = e => {
+    const value = e.target.value;
+    if (value.trim() !== value) {
+      setLocalValue(value.trim());
+      handleInput(value.trim());
+    }
+    if (onBlur) {
+      onBlur(e);
+    }
   };
   hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
@@ -4012,9 +4081,9 @@ function TextArea(props) {
       name: id,
       spellCheck: "false",
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
-      onInput: handleInput,
+      onInput: handleLocalInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       rows: rows,
       value: localValue,
@@ -4068,14 +4137,16 @@ function TextAreaEntry(props) {
       setLocalError(newValidationError);
     }
   }, [value, validate]);
-  const onInput = newValue => {
+  const onInput = hooks.useCallback(newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    setValue(newValue, newValidationError);
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
     setLocalError(newValidationError);
-  };
+  }, [element]);
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -4130,12 +4201,35 @@ function Textfield(props) {
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value || '');
   const ref = useShowEntryEvent(id);
+
+  /**
+   * @type { import('min-dash').DebouncedFunction }
+   */
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(target => onInput(target.value.length ? target.value : undefined));
+    return debounce(newValue => {
+      onInput(newValue);
+    });
   }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e.target);
+  const handleOnBlur = e => {
+    const value = e.target.value;
+    if (value.trim() !== value) {
+      setLocalValue(value.trim());
+      handleInput(value.trim());
+    }
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const handleInput = newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    handleInputCallback(newModelValue);
+  };
+  const handleLocalInput = e => {
+    if (e.target.value === localValue) {
+      return;
+    }
     setLocalValue(e.target.value);
+    handleInput(e.target.value);
   };
   hooks.useEffect(() => {
     if (value === localValue) {
@@ -4163,9 +4257,9 @@ function Textfield(props) {
       autoComplete: "off",
       disabled: disabled,
       class: "bio-properties-panel-input",
-      onInput: handleInput,
+      onInput: handleLocalInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       value: localValue
     })]
@@ -4212,14 +4306,16 @@ function TextfieldEntry(props) {
       setLocalError(newValidationError);
     }
   }, [value, validate]);
-  const onInput = newValue => {
+  const onInput = hooks.useCallback(newValue => {
     let newValidationError = null;
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    setValue(newValue, newValidationError);
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
     setLocalError(newValidationError);
-  };
+  }, [element]);
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -4257,14 +4353,37 @@ function prefixId(id) {
 }
 
 const DEFAULT_DEBOUNCE_TIME = 300;
+
+/**
+ * Creates a debounced version of a function, delaying its execution based on `debounceDelay`.
+ *
+ * - If `debounceDelay` is `false`, the function executes immediately without debouncing.
+ * - If a number is provided, the function execution is delayed by the given time in milliseconds.
+ *
+ * @param { Boolean | Number } [debounceDelay=300]
+ *
+ * @example
+ * const debounce = debounceInput();
+ * const debouncedFn = debounce(fn);
+ *
+ * debouncedFn(); // Executes after 300ms (default) if no further calls occur.
+ */
 function debounceInput(debounceDelay) {
-  return function _debounceInput(fn) {
-    if (debounceDelay !== false) {
-      var debounceTime = minDash.isNumber(debounceDelay) ? debounceDelay : DEFAULT_DEBOUNCE_TIME;
-      return minDash.debounce(fn, debounceTime);
-    } else {
+  /**
+   * Applies debounce to the provided function, with a previously setup delay.
+   *
+   * @template { (...args: any[]) => any } T
+   *
+   * @param {T} fn
+   *
+   * @return { (...p: Parameters<T>) => any }
+   */
+  return function debounce(fn) {
+    if (debounceDelay === false) {
       return fn;
     }
+    var debounceTime = minDash.isNumber(debounceDelay) ? debounceDelay : DEFAULT_DEBOUNCE_TIME;
+    return minDash.debounce(fn, debounceTime);
   };
 }
 debounceInput.$inject = ['config.debounceInput'];