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

package/dist/assets/form-js-base.css

@@ -458,13 +458,20 @@
   min-height: var(--form-field-height);
 }
 
-
 .fjs-container .fjs-datepicker,
-.fjs-container .fjs-timepicker,
-.fjs-container .fjs-datetime-subsection {
+.fjs-container .fjs-timepicker {
   width: 100%;
 }
 
+.fjs-container .fjs-datetime-subsection {
+  min-width: 0;
+  flex: 1;
+}
+
+.fjs-container .fjs-datetime-separator {
+  width: 10px;
+}
+
 .fjs-container .fjs-timepicker-anchor {
   height: 100%;
   display: flex;
@@ -474,10 +481,6 @@
   color: var(--color-icon-base);
 }
 
-.fjs-container .fjs-datetime-separator {
-  width: 10px;
-}
-
 .fjs-container .fjs-input-group {
   display: flex;
   width: 100%;
@@ -547,11 +550,6 @@
   border-radius: 3px;
 }
 
-.fjs-container .fjs-vertical-group {
-  display: flex;
-  width: 100%;
-}
-
 .fjs-container .flatpickr-wrapper {
   width: 100%;
   height: 100%;
@@ -599,6 +597,10 @@
   color: var(--cds-text-inverse, var(--color-text));
 }
 
+.fjs-container .fjs-form-field-number.fjs-readonly .fjs-number-arrow-container {
+  display: none;
+}
+
 .fjs-container .fjs-radio {
   display: flex;
   flex-direction: column;

package/dist/assets/form-js.css

@@ -443,11 +443,19 @@
 }
 
 .fjs-container .fjs-datepicker,
-.fjs-container .fjs-timepicker,
-.fjs-container .fjs-datetime-subsection {
+.fjs-container .fjs-timepicker {
   width: 100%;
 }
 
+.fjs-container .fjs-datetime-subsection {
+  min-width: 0;
+  flex: 1;
+}
+
+.fjs-container .fjs-datetime-separator {
+  width: 10px;
+}
+
 .fjs-container .fjs-timepicker-anchor {
   height: 100%;
   display: flex;
@@ -457,10 +465,6 @@
   color: var(--color-icon-base);
 }
 
-.fjs-container .fjs-datetime-separator {
-  width: 10px;
-}
-
 .fjs-container .fjs-input-group {
   display: flex;
   width: 100%;
@@ -529,11 +533,6 @@
   border-radius: 3px;
 }
 
-.fjs-container .fjs-vertical-group {
-  display: flex;
-  width: 100%;
-}
-
 .fjs-container .flatpickr-wrapper {
   width: 100%;
   height: 100%;
@@ -581,6 +580,10 @@
   color: var(--cds-text-inverse, var(--color-text));
 }
 
+.fjs-container .fjs-form-field-number.fjs-readonly .fjs-number-arrow-container {
+  display: none;
+}
+
 .fjs-container .fjs-radio {
   display: flex;
   flex-direction: column;

package/dist/index.cjs

@@ -639,9 +639,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');
@@ -658,8 +663,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;
@@ -2724,6 +2728,37 @@ function useReadonly(formField, properties = {}) {
   return readonly || false;
 }
 
+function usePrevious(value, defaultValue, dependencies) {
+  const ref = hooks.useRef(defaultValue);
+  hooks.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] = hooks.useState(defaultValue);
+  const previous = usePrevious(value, defaultValue, [value]);
+  const changed = !compare(previous, value);
+  hooks.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
@@ -2993,11 +3028,8 @@ function useValuesAsync (field) {
     state: LOAD_STATES.LOADING
   });
   const initialData = useService('form')._getState().initialData;
-  const evaluatedValues = hooks.useMemo(() => {
-    if (valuesExpression) {
-      return useExpressionEvaluation(valuesExpression);
-    }
-  }, [valuesExpression]);
+  const expressionEvaluation = useExpressionEvaluation(valuesExpression);
+  const evaluatedValues = useDeepCompareState(expressionEvaluation || [], []);
   hooks.useEffect(() => {
     let values = [];
 
@@ -3013,8 +3045,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;
@@ -3023,7 +3057,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 => ({
@@ -3042,7 +3076,6 @@ const ENTER_KEYDOWN_EVENT = new KeyboardEvent('keydown', {
   key: 'Enter',
   charCode: 13,
   keyCode: 13,
-  view: window,
   bubbles: true
 });
 function focusRelevantFlatpickerDay(flatpickrInstance) {
@@ -3808,7 +3841,8 @@ function DropdownList(props) {
   hooks.useEffect(() => {
     const individualEntries = dropdownContainer.current.children;
     if (individualEntries.length && !mouseControl) {
-      individualEntries[focusedValueIndex].scrollIntoView({
+      const focusedEntry = individualEntries[focusedValueIndex];
+      focusedEntry && focusedEntry.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
       });
@@ -6371,10 +6405,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;
@@ -6397,6 +6430,7 @@ class Form {
     const {
       data
     } = this._getState();
+    const getErrorPath = field => [field.id];
     const errors = formFieldRegistry.getAll().reduce((errors, field) => {
       const {
         disabled
@@ -6406,12 +6440,15 @@ class Form {
       }
       const value = minDash.get(data, pathRegistry.getValuePath(field));
       const fieldErrors = validator.validateField(field, value);
-      return minDash.set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
+      return minDash.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;
   }
 
   /**
@@ -6590,9 +6627,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);
   }
 
   /**
@@ -6676,6 +6713,7 @@ exports.FieldFactory = FieldFactory;
 exports.Form = Form;
 exports.FormComponent = FormComponent;
 exports.FormContext = FormContext$1;
+exports.FormField = FormField;
 exports.FormFieldRegistry = FormFieldRegistry;
 exports.FormFields = FormFields;
 exports.FormLayouter = FormLayouter;