@bpmn-io/properties-panel 3.27.3 → 3.27.5

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
@@ -2008,11 +2020,7 @@ function FeelTextfieldComponent(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
+  const handleInputCallback = useDebounce(onInput, debounce);
   const handleInput = newValue => {
     // we don't commit empty FEEL expressions,
     // but instead serialize them as <undefined>
@@ -2046,14 +2054,10 @@ function FeelTextfieldComponent(props) {
     }
   };
   const handleOnBlur = e => {
-    const value = e.target.value;
+    const trimmedValue = e.target.value.trim();
 
-    // we trim the value, if it is needed
-    // and update input accordingly
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
+    // trim and commit on blur
+    onInput(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
@@ -2464,7 +2468,7 @@ function FeelEntry(props) {
       setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
-  }, [element]);
+  }, [element, getValue, setValue, validate]);
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
@@ -4005,11 +4009,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);
@@ -4023,11 +4023,10 @@ function TextArea(props) {
     handleInput(e.target.value);
   };
   const handleOnBlur = e => {
-    const value = e.target.value;
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
@@ -4127,7 +4126,7 @@ function TextAreaEntry(props) {
       setValue(newValue, newValidationError);
     }
     setLocalError(newValidationError);
-  }, [element]);
+  }, [element, getValue, setValue, validate]);
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -4186,17 +4185,12 @@ function Textfield(props) {
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
-    });
-  }, [onInput, debounce]);
+  const handleInputCallback = useDebounce(onInput, debounce);
   const handleOnBlur = e => {
-    const value = e.target.value;
-    if (value.trim() !== value) {
-      setLocalValue(value.trim());
-      handleInput(value.trim());
-    }
+    const trimmedValue = e.target.value.trim();
+
+    // trim and commit on blur
+    onInput(trimmedValue);
     if (onBlur) {
       onBlur(e);
     }
@@ -4297,7 +4291,7 @@ function TextfieldEntry(props) {
       setValue(newValue, newValidationError);
     }
     setLocalError(newValidationError);
-  }, [element]);
+  }, [element, getValue, setValue, validate]);
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -4415,5 +4409,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