@bpmn-io/form-js-viewer 1.8.1 → 1.8.3

package/dist/index.cjs

@@ -1320,17 +1320,6 @@ function useFlushDebounce(func) {
   return [debounceFunc, flushFunc];
 }
 
-function useEffectOnChange(value, callback, dependencies = []) {
-  const previousValue = usePrevious(value);
-  React.useEffect(() => {
-    if (value !== previousValue) {
-      callback();
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, ...dependencies]);
-}
-
 /**
  * Template a string reactively based on form data. If the string is not a template, it is returned as is.
  * Memoised to minimize re-renders
@@ -1521,6 +1510,18 @@ function formatTimezoneOffset(minutes) {
 function isInvalidDateString(value) {
   return isNaN(new Date(Date.parse(value)).getTime());
 }
+function getNullDateTime() {
+  return {
+    date: new Date(Date.parse(null)),
+    time: null
+  };
+}
+function isValidDate(date) {
+  return date && !isNaN(date.getTime());
+}
+function isValidTime(time) {
+  return !isNaN(parseInt(time));
+}
 function _getSignedPaddedHours(minutes) {
   if (minutes > 0) {
     return '-' + _getZeroPaddedString(Math.floor(minutes / 60));
@@ -2011,7 +2012,8 @@ function FormField(props) {
     };
   }, [eventBus, viewerCommands]);
   hooks.useEffect(() => {
-    if (initialValidationTrigger && initialValue) {
+    const hasInitialValue = initialValue && !isEqual(initialValue, []);
+    if (initialValidationTrigger && hasInitialValue) {
       setInitialValidationTrigger(false);
       viewerCommands.updateFieldValidation(field, initialValue, indexes);
     }
@@ -2815,14 +2817,8 @@ function Datetime(props) {
     formId
   } = hooks.useContext(FormContext);
   const dateTimeGroupRef = hooks.useRef();
-  const getNullDateTime = () => ({
-    date: new Date(Date.parse(null)),
-    time: null
-  });
   const [dateTime, setDateTime] = hooks.useState(getNullDateTime());
   const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = hooks.useState(null);
-  const isValidDate = date => date && !isNaN(date.getTime());
-  const isValidTime = time => !isNaN(parseInt(time));
   const useDatePicker = hooks.useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const useTimePicker = hooks.useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const onDateTimeBlur = hooks.useCallback(e => {
@@ -2877,11 +2873,14 @@ function Datetime(props) {
     } else if (subtype === DATETIME_SUBTYPES.DATETIME && isValidDate(date) && isValidTime(time)) {
       newDateTimeValue = serializeDateTime(date, time, timeSerializingFormat);
     }
+    if (value === newDateTimeValue) {
+      return;
+    }
     onChange({
       value: newDateTimeValue,
       field
     });
-  }, [field, onChange, subtype, timeSerializingFormat]);
+  }, [value, field, onChange, subtype, timeSerializingFormat]);
   hooks.useEffect(() => {
     if (dateTimeUpdateRequest) {
       if (dateTimeUpdateRequest.refreshOnly) {
@@ -4948,7 +4947,7 @@ function Html(props) {
 Html.config = {
   type: type$4,
   keyed: false,
-  label: 'HTML',
+  label: 'HTML view',
   group: 'presentation',
   create: (options = {}) => ({
     content: '',
@@ -4960,7 +4959,8 @@ const type$3 = 'expression';
 function ExpressionField(props) {
   const {
     field,
-    onChange
+    onChange,
+    value
   } = props;
   const {
     computeOn,
@@ -4975,12 +4975,12 @@ function ExpressionField(props) {
       value: evaluationMemo
     });
   }, [field, evaluationMemo, onChange]);
-  useEffectOnChange(evaluationMemo, () => {
-    if (computeOn !== 'change') {
+  hooks.useEffect(() => {
+    if (computeOn !== 'change' || evaluationMemo === value) {
       return;
     }
     sendValue();
-  }, [computeOn, sendValue]);
+  }, [computeOn, evaluationMemo, sendValue, value]);
   hooks.useEffect(() => {
     if (computeOn === 'presubmit') {
       eventBus.on('presubmit', sendValue);
@@ -4994,6 +4994,7 @@ ExpressionField.config = {
   label: 'Expression',
   group: 'basic-input',
   keyed: true,
+  emptyValue: null,
   escapeGridRender: true,
   create: (options = {}) => ({
     computeOn: 'change',