@bpmn-io/properties-panel 3.27.7 → 3.27.8

package/dist/index.esm.js

@@ -408,7 +408,7 @@ function useDebounce(callback, debounceFn) {
   // make sure previous call is not stalled
   useEffect(() => {
     return () => {
-      debouncedCallback.flush?.();
+      debouncedCallback.cancel?.();
     };
   }, [debouncedCallback]);
   return debouncedCallback;
@@ -1951,50 +1951,6 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
-function TextInput({
-  debounce,
-  element,
-  id,
-  getValue,
-  onBlur,
-  setValue,
-  validate,
-  Component,
-  ...props
-}) {
-  const modelValue = getValue(element);
-  const setModelValue = useCallback((newValue, error) => {
-    if (isFunction(validate)) {
-      error = validate(newValue) || null;
-    }
-    setValue(newValue, error);
-  }, [setValue, validate]);
-  const debouncedSetValue = useDebounce(setModelValue, debounce);
-  const handleInput = useCallback(newValue => {
-    if (newValue !== modelValue) {
-      debouncedSetValue(newValue);
-    }
-  }, [modelValue, debouncedSetValue]);
-  const handleBlur = useCallback(value => {
-    const newValue = value.trim?.() || value;
-    if (newValue !== modelValue) {
-      setModelValue(newValue);
-    }
-    if (isFunction(onBlur)) {
-      onBlur(newValue);
-    }
-  }, [modelValue, setModelValue]);
-  return jsx(Component, {
-    ...props,
-    debounce: debounce,
-    element: element,
-    id: id,
-    onInput: handleInput,
-    onBlur: handleBlur,
-    value: modelValue
-  });
-}
-
 const noop$2 = () => {};
 
 /**
@@ -2024,6 +1980,7 @@ const noop$2 = () => {};
 
 function FeelTextfieldComponent(props) {
   const {
+    debounce,
     id,
     element,
     label,
@@ -2059,11 +2016,16 @@ function FeelTextfieldComponent(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
+
+  /**
+   * @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;
-    onInput(newModelValue);
+    handleInputCallback(newModelValue);
   };
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
@@ -2091,8 +2053,14 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
-  const handleOnBlur = () => {
-    onBlur?.(localValue);
+  const handleOnBlur = e => {
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
+    if (onBlur) {
+      onBlur(e);
+    }
   };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
@@ -2479,28 +2447,46 @@ function FeelEntry(props) {
     placeholder,
     tooltip
   } = props;
+  const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
-  const value = getValue(element);
-  const validationError = validate?.(value) || null;
+  let value = getValue(element);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [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
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
+    setValidationError(newValidationError);
+  });
+  const onError = useCallback(err => {
+    setLocalError(err);
+  }, []);
   const temporaryError = useError(id);
   const error = temporaryError || localError || validationError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [createElement(TextInput, {
+    children: [createElement(FeelTextfield, {
       ...props,
-      Component: FeelTextfield,
-      element: element,
-      getValue: getValue,
       debounce: debounce,
-      setValue: setValue,
-      validate: validate,
       disabled: disabled,
       feel: feel,
       id: id,
       key: element,
       label: label,
-      onError: setLocalError,
+      onInput: onInput,
+      onError: onError,
       onFocus: onFocus,
       onBlur: onBlur,
       placeholder: placeholder,
@@ -4036,8 +4022,14 @@ function TextArea(props) {
     setLocalValue(e.target.value);
     handleInput(e.target.value);
   };
-  const handleOnBlur = () => {
-    onBlur?.(localValue);
+  const handleOnBlur = e => {
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
+    if (onBlur) {
+      onBlur(e);
+    }
   };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
@@ -4115,21 +4107,35 @@ function TextAreaEntry(props) {
     autoResize,
     tooltip
   } = props;
-  const value = getValue(element);
   const globalError = useError(id);
-  const localError = validate?.(value) || null;
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value, validate]);
+  const onInput = useStaticCallback(newValue => {
+    const value = getValue(element);
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
+    setLocalError(newValidationError);
+  });
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(TextInput, {
-      Component: TextArea,
-      getValue: getValue,
-      setValue: setValue,
-      validate: validate,
+    children: [jsx(TextArea, {
       id: id,
       label: label,
       value: value,
+      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       rows: rows,
@@ -4162,6 +4168,7 @@ function prefixId$1(id) {
 
 function Textfield(props) {
   const {
+    debounce,
     disabled = false,
     id,
     label,
@@ -4174,12 +4181,23 @@ function Textfield(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
-  const handleOnBlur = () => {
-    onBlur?.(localValue);
+
+  /**
+   * @type { import('min-dash').DebouncedFunction }
+   */
+  const handleInputCallback = useDebounce(onInput, debounce);
+  const handleOnBlur = e => {
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
+    if (onBlur) {
+      onBlur(e);
+    }
   };
   const handleInput = newValue => {
     const newModelValue = newValue === '' ? undefined : newValue;
-    onInput(newModelValue);
+    handleInputCallback(newModelValue);
   };
   const handleLocalInput = e => {
     if (e.target.value === localValue) {
@@ -4254,25 +4272,39 @@ function TextfieldEntry(props) {
     placeholder,
     tooltip
   } = props;
-  const value = getValue(element);
   const globalError = useError(id);
-  const localError = validate?.(value) || null;
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value, validate]);
+  const onInput = useStaticCallback(newValue => {
+    const value = getValue(element);
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
+    setLocalError(newValidationError);
+  });
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(TextInput, {
-      Component: Textfield,
+    children: [jsx(Textfield, {
       debounce: debounce,
       disabled: disabled,
-      getValue: getValue,
       id: id,
       label: label,
+      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       placeholder: placeholder,
-      setValue: setValue,
-      validate: validate,
       value: value,
       tooltip: tooltip,
       element: element