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

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { createContext, createElement, Fragment as Fragment$1, render } from 'pr
 import isEqual from 'lodash/isEqual';
 import flatpickr from 'flatpickr';
 import * as React from 'preact/compat';
-import { useEffect as useEffect$1, createPortal } from 'preact/compat';
+import { createPortal } from 'preact/compat';
 import DOMPurify from 'dompurify';
 import { Injector } from 'didi';
 import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
@@ -1300,17 +1300,6 @@ function useFlushDebounce(func) {
   return [debounceFunc, flushFunc];
 }
 
-function useEffectOnChange(value, callback, dependencies = []) {
-  const previousValue = usePrevious(value);
-  useEffect$1(() => {
-    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
@@ -1501,6 +1490,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));
@@ -1991,7 +1992,8 @@ function FormField(props) {
     };
   }, [eventBus, viewerCommands]);
   useEffect(() => {
-    if (initialValidationTrigger && initialValue) {
+    const hasInitialValue = initialValue && !isEqual(initialValue, []);
+    if (initialValidationTrigger && hasInitialValue) {
       setInitialValidationTrigger(false);
       viewerCommands.updateFieldValidation(field, initialValue, indexes);
     }
@@ -2795,14 +2797,8 @@ function Datetime(props) {
     formId
   } = useContext(FormContext);
   const dateTimeGroupRef = useRef();
-  const getNullDateTime = () => ({
-    date: new Date(Date.parse(null)),
-    time: null
-  });
   const [dateTime, setDateTime] = useState(getNullDateTime());
   const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = useState(null);
-  const isValidDate = date => date && !isNaN(date.getTime());
-  const isValidTime = time => !isNaN(parseInt(time));
   const useDatePicker = useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const useTimePicker = useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const onDateTimeBlur = useCallback(e => {
@@ -2857,11 +2853,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]);
   useEffect(() => {
     if (dateTimeUpdateRequest) {
       if (dateTimeUpdateRequest.refreshOnly) {
@@ -4928,7 +4927,7 @@ function Html(props) {
 Html.config = {
   type: type$4,
   keyed: false,
-  label: 'HTML',
+  label: 'HTML view',
   group: 'presentation',
   create: (options = {}) => ({
     content: '',
@@ -4940,7 +4939,8 @@ const type$3 = 'expression';
 function ExpressionField(props) {
   const {
     field,
-    onChange
+    onChange,
+    value
   } = props;
   const {
     computeOn,
@@ -4955,12 +4955,12 @@ function ExpressionField(props) {
       value: evaluationMemo
     });
   }, [field, evaluationMemo, onChange]);
-  useEffectOnChange(evaluationMemo, () => {
-    if (computeOn !== 'change') {
+  useEffect(() => {
+    if (computeOn !== 'change' || evaluationMemo === value) {
       return;
     }
     sendValue();
-  }, [computeOn, sendValue]);
+  }, [computeOn, evaluationMemo, sendValue, value]);
   useEffect(() => {
     if (computeOn === 'presubmit') {
       eventBus.on('presubmit', sendValue);
@@ -4974,6 +4974,7 @@ ExpressionField.config = {
   label: 'Expression',
   group: 'basic-input',
   keyed: true,
+  emptyValue: null,
   escapeGridRender: true,
   create: (options = {}) => ({
     computeOn: 'change',