@bpmn-io/form-js-viewer 1.8.0 → 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',
@@ -7002,6 +7003,8 @@ var slice = Array.prototype.slice;
  * var sum = eventBus.fire('sum', 1, 2);
  * console.log(sum); // 3
  * ```
+ *
+ * @template [EventMap=null]
  */
 function EventBus() {
   /**
@@ -7015,6 +7018,8 @@ function EventBus() {
 }
 
 /**
+ * @overlord
+ *
  * Register an event listener for events with the given name.
  *
  * The callback will be invoked with `event, ...additionalArguments`
@@ -7033,6 +7038,25 @@ function EventBus() {
  * @param {EventBusEventCallback<T>} callback
  * @param {any} [that] callback context
  */
+/**
+ * Register an event listener for events with the given name.
+ *
+ * The callback will be invoked with `event, ...additionalArguments`
+ * that have been passed to {@link EventBus#fire}.
+ *
+ * Returning false from a listener will prevent the events default action
+ * (if any is specified). To stop an event from being processed further in
+ * other listeners execute {@link Event#stopPropagation}.
+ *
+ * Returning anything but `undefined` from a listener will stop the listener propagation.
+ *
+ * @template {keyof EventMap} EventName
+ *
+ * @param {EventName} events to subscribe to
+ * @param {number} [priority=1000] listen priority
+ * @param {EventBusEventCallback<EventMap[EventName]>} callback
+ * @param {any} [that] callback context
+ */
 EventBus.prototype.on = function (events, priority, callback, that) {
   events = isArray(events) ? events : [events];
   if (isFunction(priority)) {
@@ -7063,6 +7087,8 @@ EventBus.prototype.on = function (events, priority, callback, that) {
 };
 
 /**
+ * @overlord
+ *
  * Register an event listener that is called only once.
  *
  * @template T
@@ -7072,6 +7098,16 @@ EventBus.prototype.on = function (events, priority, callback, that) {
  * @param {EventBusEventCallback<T>} callback
  * @param {any} [that] callback context
  */
+/**
+ * Register an event listener that is called only once.
+ *
+ * @template {keyof EventMap} EventName
+ *
+ * @param {EventName} events to subscribe to
+ * @param {number} [priority=1000] listen priority
+ * @param {EventBusEventCallback<EventMap[EventName]>} callback
+ * @param {any} [that] callback context
+ */
 EventBus.prototype.once = function (events, priority, callback, that) {
   var self = this;
   if (isFunction(priority)) {