@bpmn-io/properties-panel 3.27.5 → 3.27.6

package/dist/index.esm.js

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