@bpmn-io/form-js-viewer 1.3.0-alpha.0 → 1.3.2

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
 import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
-import { useContext, useMemo, useEffect, useState, useRef, useCallback, useLayoutEffect } from 'preact/hooks';
+import { useContext, useMemo, useEffect, useRef, useState, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
 import * as React from 'preact/compat';
 import { createPortal } from 'preact/compat';
@@ -619,9 +619,14 @@ class ConditionChecker {
    *
    * @param {Object<string, any>} properties
    * @param {Object<string, any>} data
+   * @param {Object} [options]
+   * @param {Function} [options.getFilterPath]
    */
-  applyConditions(properties, data = {}) {
+  applyConditions(properties, data = {}, options = {}) {
     const newProperties = clone(properties);
+    const {
+      getFilterPath = field => this._pathRegistry.getValuePath(field)
+    } = options;
     const form = this._formFieldRegistry.getAll().find(field => field.type === 'default');
     if (!form) {
       throw new Error('form field registry has no form');
@@ -638,8 +643,7 @@ class ConditionChecker {
 
       // only clear the leaf nodes, as groups may both point to the same path
       if (context.isHidden && isClosed) {
-        const valuePath = this._pathRegistry.getValuePath(field);
-        this._clearObjectValueRecursively(valuePath, newProperties);
+        this._clearObjectValueRecursively(getFilterPath(field), newProperties);
       }
     });
     return newProperties;
@@ -2704,6 +2708,37 @@ function useReadonly(formField, properties = {}) {
   return readonly || false;
 }
 
+function usePrevious(value, defaultValue, dependencies) {
+  const ref = useRef(defaultValue);
+  useEffect(() => ref.current = value, dependencies);
+  return ref.current;
+}
+
+/**
+ * A custom hook to manage state changes with deep comparison.
+ *
+ * @param {any} value - The current value to manage.
+ * @param {any} defaultValue - The initial default value for the state.
+ * @returns {any} - Returns the current state.
+ */
+function useDeepCompareState(value, defaultValue) {
+  const [state, setState] = useState(defaultValue);
+  const previous = usePrevious(value, defaultValue, [value]);
+  const changed = !compare(previous, value);
+  useEffect(() => {
+    if (changed) {
+      setState(value);
+    }
+  }, [changed, value]);
+  return state;
+}
+
+// helpers //////////////////////////
+
+function compare(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
 /**
  * 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
@@ -2973,11 +3008,8 @@ function useValuesAsync (field) {
     state: LOAD_STATES.LOADING
   });
   const initialData = useService('form')._getState().initialData;
-  const evaluatedValues = useMemo(() => {
-    if (valuesExpression) {
-      return useExpressionEvaluation(valuesExpression);
-    }
-  }, [valuesExpression]);
+  const expressionEvaluation = useExpressionEvaluation(valuesExpression);
+  const evaluatedValues = useDeepCompareState(expressionEvaluation || [], []);
   useEffect(() => {
     let values = [];
 
@@ -2993,8 +3025,10 @@ function useValuesAsync (field) {
       values = Array.isArray(staticValues) ? staticValues : [];
 
       // expression
-    } else if (evaluatedValues && Array.isArray(evaluatedValues)) {
-      values = evaluatedValues;
+    } else if (valuesExpression) {
+      if (evaluatedValues && Array.isArray(evaluatedValues)) {
+        values = evaluatedValues;
+      }
     } else {
       setValuesGetter(buildErrorState('No values source defined in the form definition'));
       return;
@@ -3003,7 +3037,7 @@ function useValuesAsync (field) {
     // normalize data to support primitives and partially defined objects
     values = normalizeValuesData(values);
     setValuesGetter(buildLoadedState(values));
-  }, [valuesKey, staticValues, initialData]);
+  }, [valuesKey, staticValues, initialData, valuesExpression, evaluatedValues]);
   return valuesGetter;
 }
 const buildErrorState = error => ({
@@ -3022,7 +3056,6 @@ const ENTER_KEYDOWN_EVENT = new KeyboardEvent('keydown', {
   key: 'Enter',
   charCode: 13,
   keyCode: 13,
-  view: window,
   bubbles: true
 });
 function focusRelevantFlatpickerDay(flatpickrInstance) {
@@ -3788,7 +3821,8 @@ function DropdownList(props) {
   useEffect(() => {
     const individualEntries = dropdownContainer.current.children;
     if (individualEntries.length && !mouseControl) {
-      individualEntries[focusedValueIndex].scrollIntoView({
+      const focusedEntry = individualEntries[focusedValueIndex];
+      focusedEntry && focusedEntry.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
       });
@@ -6351,10 +6385,9 @@ class Form {
     }
     const data = this._getSubmitData();
     const errors = this.validate();
-    const filteredErrors = this._applyConditions(errors, data);
     const result = {
       data,
-      errors: filteredErrors
+      errors
     };
     this._emit('submit', result);
     return result;
@@ -6377,6 +6410,7 @@ class Form {
     const {
       data
     } = this._getState();
+    const getErrorPath = field => [field.id];
     const errors = formFieldRegistry.getAll().reduce((errors, field) => {
       const {
         disabled
@@ -6386,12 +6420,15 @@ class Form {
       }
       const value = get(data, pathRegistry.getValuePath(field));
       const fieldErrors = validator.validateField(field, value);
-      return set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
+      return set(errors, getErrorPath(field), fieldErrors.length ? fieldErrors : undefined);
     }, /** @type {Errors} */{});
+    const filteredErrors = this._applyConditions(errors, data, {
+      getFilterPath: getErrorPath
+    });
     this._setState({
-      errors
+      errors: filteredErrors
     });
-    return errors;
+    return filteredErrors;
   }
 
   /**
@@ -6570,9 +6607,9 @@ class Form {
   /**
    * @internal
    */
-  _applyConditions(toFilter, data) {
+  _applyConditions(toFilter, data, options = {}) {
     const conditionChecker = this.get('conditionChecker');
-    return conditionChecker.applyConditions(toFilter, data);
+    return conditionChecker.applyConditions(toFilter, data, options);
   }
 
   /**
@@ -6638,5 +6675,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, Image, Importer, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, PathRegistry, Radio, Select, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, schemaVersion };
+export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, Image, Importer, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, PathRegistry, Radio, Select, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, schemaVersion };
 //# sourceMappingURL=index.es.js.map