@bpmn-io/properties-panel 3.27.4 → 3.27.6

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { useContext, useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from '../preact/hooks';
+import { useContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from '../preact/hooks';
 import { isFunction, isString, isArray, get, assign, set, isNumber, debounce } from 'min-dash';
 import { createPortal, forwardRef } from '../preact/compat';
 import { jsx, jsxs, Fragment } from '../preact/jsx-runtime';
@@ -402,6 +402,18 @@ function useDescriptionContext(id, element) {
   return getDescriptionForId(id, element);
 }
 
+function useDebounce(callback, debounceFn) {
+  const debouncedCallback = useCallback(debounceFn(callback), [callback, debounceFn]);
+
+  // make sure previous call is not stalled
+  useEffect(() => {
+    return () => {
+      debouncedCallback.flush?.();
+    };
+  }, [debouncedCallback]);
+  return debouncedCallback;
+}
+
 function useError(id) {
   const {
     errors
@@ -1939,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 = () => {};
 
 /**
@@ -1968,7 +2024,6 @@ const noop$2 = () => {};
 
 function FeelTextfieldComponent(props) {
   const {
-    debounce,
     id,
     element,
     label,
@@ -2004,20 +2059,11 @@ function FeelTextfieldComponent(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
-
-  /**
-   * @type { import('min-dash').DebouncedFunction }
-   */
-  const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [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') {
@@ -2045,18 +2091,8 @@ function FeelTextfieldComponent(props) {
       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 handleOnBlur = () => {
+    onBlur?.(localValue);
   };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
@@ -2443,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,
@@ -4005,11 +4023,7 @@ function TextArea(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
+  const handleInputCallback = useDebounce(onInput, debounce);
   const handleInput = newValue => {
     const newModelValue = newValue === '' ? undefined : newValue;
     handleInputCallback(newModelValue);
@@ -4022,15 +4036,8 @@ function TextArea(props) {
     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);
-    }
+  const handleOnBlur = () => {
+    onBlur?.(localValue);
   };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
@@ -4108,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,
@@ -4169,7 +4162,6 @@ function prefixId$1(id) {
 
 function Textfield(props) {
   const {
-    debounce,
     disabled = false,
     id,
     label,
@@ -4182,28 +4174,12 @@ function Textfield(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
-
-  /**
-   * @type { import('min-dash').DebouncedFunction }
-   */
-  const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
-  const handleOnBlur = e => {
-    const value = e.target.value;
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
-    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) {
@@ -4278,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
@@ -4415,5 +4377,5 @@ var index = {
   feelPopup: ['type', FeelPopupModule]
 };
 
-export { ArrowIcon, CheckboxEntry, CloseIcon, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PopupIcon, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+export { ArrowIcon, CheckboxEntry, CloseIcon, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PopupIcon, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map