@bpmn-io/form-js-playground 1.8.2 → 1.8.3

package/dist/form-playground.umd.js

@@ -51445,16 +51445,6 @@
     }, [func]);
     return [debounceFunc, flushFunc];
   }
-  function useEffectOnChange(value, callback, dependencies = []) {
-    const previousValue = usePrevious$1(value);
-    y(() => {
-      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.
@@ -51645,6 +51635,18 @@
   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));
@@ -52126,7 +52128,8 @@
       };
     }, [eventBus, viewerCommands]);
     y(() => {
-      if (initialValidationTrigger && initialValue) {
+      const hasInitialValue = initialValue && !isEqual$1(initialValue, []);
+      if (initialValidationTrigger && hasInitialValue) {
         setInitialValidationTrigger(false);
         viewerCommands.updateFieldValidation(field, initialValue, indexes);
       }
@@ -52948,14 +52951,8 @@
       formId
     } = F$1(FormContext);
     const dateTimeGroupRef = s$1();
-    const getNullDateTime = () => ({
-      date: new Date(Date.parse(null)),
-      time: null
-    });
     const [dateTime, setDateTime] = l$1(getNullDateTime());
     const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = l$1(null);
-    const isValidDate = date => date && !isNaN(date.getTime());
-    const isValidTime = time => !isNaN(parseInt(time));
     const useDatePicker = d(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
     const useTimePicker = d(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
     const onDateTimeBlur = A$1(e => {
@@ -53010,11 +53007,14 @@
       } 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]);
     y(() => {
       if (dateTimeUpdateRequest) {
         if (dateTimeUpdateRequest.refreshOnly) {
@@ -55351,7 +55351,7 @@
   Html.config = {
     type: type$4,
     keyed: false,
-    label: 'HTML',
+    label: 'HTML view',
     group: 'presentation',
     create: (options = {}) => ({
       content: '',
@@ -55362,7 +55362,8 @@
   function ExpressionField(props) {
     const {
       field,
-      onChange
+      onChange,
+      value
     } = props;
     const {
       computeOn,
@@ -55377,12 +55378,12 @@
         value: evaluationMemo
       });
     }, [field, evaluationMemo, onChange]);
-    useEffectOnChange(evaluationMemo, () => {
-      if (computeOn !== 'change') {
+    y(() => {
+      if (computeOn !== 'change' || evaluationMemo === value) {
         return;
       }
       sendValue();
-    }, [computeOn, sendValue]);
+    }, [computeOn, evaluationMemo, sendValue, value]);
     y(() => {
       if (computeOn === 'presubmit') {
         eventBus.on('presubmit', sendValue);
@@ -55396,6 +55397,7 @@
     label: 'Expression',
     group: 'basic-input',
     keyed: true,
+    emptyValue: null,
     escapeGridRender: true,
     create: (options = {}) => ({
       computeOn: 'change',
@@ -65143,7 +65145,7 @@
           class: "fjs-form-field-placeholder",
           children: [e(Icon, {
             viewBox: "0 0 54 54"
-          }), "Html is empty"]
+          }), "Html view is empty"]
         })
       });
     }
@@ -65154,7 +65156,7 @@
           class: "fjs-form-field-placeholder",
           children: [e(Icon, {
             viewBox: "0 0 54 54"
-          }), "Html is populated by an expression"]
+          }), "Html view is populated by an expression"]
         })
       });
     }
@@ -65165,7 +65167,7 @@
           class: "fjs-form-field-placeholder",
           children: [e(Icon, {
             viewBox: "0 0 54 54"
-          }), "Html is templated"]
+          }), "Html view is templated"]
         })
       });
     }
@@ -65244,13 +65246,14 @@
       field
     } = props;
     const {
-      expression = ''
+      expression = '',
+      key
     } = field;
     const Icon = iconsByType('expression');
     const expressionLanguage = useService$1('expressionLanguage');
     let placeholderContent = 'Expression is empty';
     if (expression.trim() && expressionLanguage.isExpression(expression)) {
-      placeholderContent = 'Expression';
+      placeholderContent = `Expression for '${key}'`;
     }
     return e("div", {
       class: editorFormFieldClasses(type),

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "A form-js playground",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs"
     },
@@ -44,8 +45,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^1.8.2",
-    "@bpmn-io/form-js-viewer": "^1.8.1",
+    "@bpmn-io/form-js-editor": "^1.8.3",
+    "@bpmn-io/form-js-viewer": "^1.8.3",
     "@codemirror/autocomplete": "^6.12.0",
     "@codemirror/commands": "^6.1.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -70,5 +71,5 @@
     "rollup-plugin-css-only": "^4.0.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "b2a7445d094381999756e3d08b252e00db30f05f"
+  "gitHead": "5b065bf91f29907ff39fee7f4252d639890bb84f"
 }