@bpmn-io/form-js-viewer 1.7.1 → 1.7.3

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { isString, get, isNil, isObject, some, isNumber, set, findIndex, isArray
 import Big from 'big.js';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
-import { useContext, useMemo, useRef, useEffect, useState, useCallback, useLayoutEffect } from 'preact/hooks';
+import { useContext, useMemo, useRef, useCallback, useEffect, useState, useLayoutEffect } from 'preact/hooks';
 import { createContext, createElement, Fragment as Fragment$1, render } from 'preact';
 import isEqual from 'lodash/isEqual';
 import flatpickr from 'flatpickr';
@@ -772,20 +772,59 @@ function useCondition(condition) {
   }, [conditionChecker, condition, expressionContextInfo]);
 }
 
-// parses the options data from the provided form field and form data
-function getOptionsData(formField, formData) {
+/**
+ * Returns the options data for the provided if they can be simply determined, ignoring expression defined options.
+ *
+ * @param {object} formField
+ * @param {object} formData
+ */
+function getSimpleOptionsData(formField, formData) {
   const {
+    valuesExpression: optionsExpression,
     valuesKey: optionsKey,
     values: staticOptions
   } = formField;
+  if (optionsExpression) {
+    return null;
+  }
   return optionsKey ? get(formData, [optionsKey]) : staticOptions;
 }
 
-// transforms the provided options into a normalized format, trimming invalid options
+/**
+ * Normalizes the provided options data to a format that can be used by the select components.
+ * If the options data is not valid, it is filtered out.
+ *
+ * @param {any[]} optionsData
+ *
+ * @returns {object[]}
+ */
 function normalizeOptionsData(optionsData) {
   return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !isNil(o));
 }
 
+/**
+ * Creates an options object with default values if no options are provided.
+ *
+ * @param {object} options
+ *
+ * @returns {object}
+ */
+function createEmptyOptions(options = {}) {
+  const defaults = {};
+
+  // provide default options if valuesKey and valuesExpression are not set
+  if (!options.valuesKey && !options.valuesExpression) {
+    defaults.values = [{
+      label: 'Value',
+      value: 'value'
+    }];
+  }
+  return {
+    ...defaults,
+    ...options
+  };
+}
+
 /**
  * Converts the provided option to a normalized format.
  * If the option is not valid, null is returned.
@@ -836,21 +875,6 @@ function _isAllowedValue(value) {
   }
   return _isAllowedPrimitive(value);
 }
-function createEmptyOptions(options = {}) {
-  const defaults = {};
-
-  // provide default options if valuesKey and valuesExpression are not set
-  if (!options.valuesKey && !options.valuesExpression) {
-    defaults.values = [{
-      label: 'Value',
-      value: 'value'
-    }];
-  }
-  return {
-    ...defaults,
-    ...options
-  };
-}
 
 /**
  * Evaluate a string reactively based on the expressionLanguage and form data.
@@ -871,29 +895,19 @@ function useExpressionEvaluation(value) {
   }, [expressionLanguage, expressionContextInfo, value]);
 }
 
-function usePrevious(value, defaultValue = null) {
-  const ref = useRef(defaultValue);
-  useEffect(() => ref.current = value, [value]);
-  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.
+ * @template T
+ * @param {T} value - The current value to manage.
+ * @returns {T} - Returns the current state.
  */
-function useDeepCompareState(value, defaultValue) {
-  const [state, setState] = useState(defaultValue);
-  const previous = usePrevious(value, defaultValue);
-  const changed = !isEqual(previous, value);
-  useEffect(() => {
-    if (changed) {
-      setState(value);
-    }
-  }, [changed, value]);
-  return state;
+function useDeepCompareMemoize(value) {
+  const ref = useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
 }
 
 /**
@@ -923,15 +937,10 @@ function useOptionsAsync(field) {
     valuesKey: optionsKey,
     values: staticOptions
   } = field;
-  const [optionsGetter, setOptionsGetter] = useState({
-    options: [],
-    error: undefined,
-    loadState: LOAD_STATES.LOADING
-  });
   const initialData = useService('form')._getState().initialData;
   const expressionEvaluation = useExpressionEvaluation(optionsExpression);
-  const evaluatedOptions = useDeepCompareState(expressionEvaluation || [], []);
-  useEffect(() => {
+  const evaluatedOptions = useDeepCompareMemoize(expressionEvaluation || []);
+  const optionsGetter = useMemo(() => {
     let options = [];
 
     // dynamic options
@@ -946,18 +955,16 @@ function useOptionsAsync(field) {
       options = Array.isArray(staticOptions) ? staticOptions : [];
 
       // expression
-    } else if (optionsExpression) {
-      if (evaluatedOptions && Array.isArray(evaluatedOptions)) {
-        options = evaluatedOptions;
-      }
+    } else if (optionsExpression && evaluatedOptions && Array.isArray(evaluatedOptions)) {
+      options = evaluatedOptions;
+
+      // error case
     } else {
-      setOptionsGetter(buildErrorState('No options source defined in the form definition'));
-      return;
+      return buildErrorState('No options source defined in the form definition');
     }
 
     // normalize data to support primitives and partially defined objects
-    options = normalizeOptionsData(options);
-    setOptionsGetter(buildLoadedState(options));
+    return buildLoadedState(normalizeOptionsData(options));
   }, [optionsKey, staticOptions, initialData, optionsExpression, evaluatedOptions]);
   return optionsGetter;
 }
@@ -1002,14 +1009,14 @@ const getDOMPurifyConfig = sanitizeStyleTags => {
   };
 };
 
-/**
- * A custom hook to build up security attributes from form configuration.
- *
- * @param {Object} security - The security configuration.
- * @returns {Array} - Returns a tuple with sandbox and allow attributes.
+/**
+ * A custom hook to build up security attributes from form configuration.
+ *
+ * @param {Object} security - The security configuration.
+ * @returns {Array} - Returns a tuple with sandbox and allow attributes.
  */
 function useSecurityAttributesMap(security) {
-  const securityMemoized = useDeepCompareState(security);
+  const securityMemoized = useDeepCompareMemoize(security);
   const sandbox = useMemo(() => SECURITY_ATTRIBUTES_DEFINITIONS.filter(({
     attribute
   }) => attribute === SANDBOX_ATTRIBUTE).filter(({
@@ -1181,6 +1188,12 @@ function useReadonly(formField, properties = {}) {
   return readonly || false;
 }
 
+function usePrevious(value, defaultValue = null) {
+  const ref = useRef(defaultValue);
+  useEffect(() => ref.current = value, [value]);
+  return ref.current;
+}
+
 function useFlushDebounce(func) {
   const timeoutRef = useRef(null);
   const lastArgsRef = useRef(null);
@@ -1445,8 +1458,16 @@ function sanitizeSingleSelectValue(options) {
     data,
     value
   } = options;
+  const {
+    valuesExpression: optionsExpression
+  } = formField;
   try {
-    const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+    // if options are expression evaluated, we don't need to sanitize the value against the options
+    // and defer to the field's internal validation
+    if (optionsExpression) {
+      return value;
+    }
+    const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
     return hasEqualValue(value, validValues) ? value : null;
   } catch (error) {
     // use default value in case of formatting error
@@ -1460,8 +1481,16 @@ function sanitizeMultiSelectValue(options) {
     data,
     value
   } = options;
+  const {
+    valuesExpression: optionsExpression
+  } = formField;
   try {
-    const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+    // if options are expression evaluated, we don't need to sanitize the values against the options
+    // and defer to the field's internal validation
+    if (optionsExpression) {
+      return value;
+    }
+    const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
     return value.filter(v => hasEqualValue(v, validValues));
   } catch (error) {
     // use default value in case of formatting error
@@ -1549,7 +1578,7 @@ function useCleanupMultiSelectValue(props) {
     onChange,
     values
   } = props;
-  const memoizedValues = useDeepCompareState(values, []);
+  const memoizedValues = useDeepCompareMemoize(values || []);
 
   // ensures that the values are always a subset of the possible options
   useEffect(() => {
@@ -2237,7 +2266,7 @@ function Datepicker(props) {
   const [forceFocusCalendar, setForceFocusCalendar] = useState(false);
 
   // ensures we render based on date value instead of reference
-  const date = useDeepCompareState(dateObject, null);
+  const date = useDeepCompareMemoize(dateObject);
 
   // shorts the date value back to the source
   useEffect(() => {
@@ -3673,8 +3702,8 @@ function Numberfield(props) {
             'fjs-readonly': readonly
           }),
           children: [jsx("button", {
-            class: "fjs-number-arrow-up",
             type: "button",
+            class: "fjs-number-arrow-up",
             "aria-label": "Increment",
             onClick: () => increment(),
             tabIndex: -1,
@@ -3682,8 +3711,8 @@ function Numberfield(props) {
           }), jsx("div", {
             class: "fjs-number-arrow-separator"
           }), jsx("button", {
-            class: "fjs-number-arrow-down",
             type: "button",
+            class: "fjs-number-arrow-down",
             "aria-label": "Decrement",
             onClick: () => decrement(),
             tabIndex: -1,
@@ -4354,7 +4383,7 @@ function Taglist(props) {
   } = useOptionsAsync(field);
 
   // ensures we render based on array content instead of reference
-  const values = useDeepCompareState(value || [], []);
+  const values = useDeepCompareMemoize(value || []);
   useCleanupMultiSelectValue({
     field,
     loadState,
@@ -6595,9 +6624,9 @@ class RepeatRenderManager {
     };
     const parentExpressionContextInfo = useContext(LocalExpressionContext);
     return jsx(Fragment, {
-      children: displayValues.map((value, index) => jsx(RepetitionScaffold, {
-        index: index,
-        value: value,
+      children: displayValues.map((itemValue, itemIndex) => jsx(RepetitionScaffold, {
+        itemIndex: itemIndex,
+        itemValue: itemValue,
         parentExpressionContextInfo: parentExpressionContextInfo,
         repeaterField: repeaterField,
         RowsRenderer: RowsRenderer,
@@ -6605,7 +6634,7 @@ class RepeatRenderManager {
         onDeleteItem: onDeleteItem,
         showRemove: showRemove,
         ...restProps
-      }, index))
+      }, itemIndex))
     });
   }
   RepeatFooter(props) {
@@ -6668,18 +6697,18 @@ class RepeatRenderManager {
         'fjs-remove-allowed': repeaterField.allowAddRemove
       }),
       children: [showAdd ? jsx("button", {
+        type: "button",
         readOnly: readonly,
         disabled: disabled || readonly,
         class: "fjs-repeat-render-add",
-        type: "button",
         ref: addButtonRef,
         onClick: onAddItem,
         children: jsxs(Fragment, {
           children: [jsx(AddSvg, {}), " ", 'Add new']
         })
       }) : null, collapseEnabled ? jsx("button", {
-        class: "fjs-repeat-render-collapse",
         type: "button",
+        class: "fjs-repeat-render-collapse",
         onClick: toggle,
         children: isCollapsed ? jsxs(Fragment, {
           children: [jsx(ExpandSvg, {}), " ", `Expand all (${values.length})`]
@@ -6702,8 +6731,8 @@ class RepeatRenderManager {
  * Individual repetition of a repeated field and context scaffolding.
  *
  * @param {Object} props
- * @param {number} props.index
- * @param {Object} props.value
+ * @param {number} props.itemIndex
+ * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
  * @param {Object} props.repeaterField
  * @param {Function} props.RowsRenderer
@@ -6714,8 +6743,8 @@ class RepeatRenderManager {
 
 const RepetitionScaffold = props => {
   const {
-    index,
-    value,
+    itemIndex,
+    itemValue,
     parentExpressionContextInfo,
     repeaterField,
     RowsRenderer,
@@ -6728,15 +6757,15 @@ const RepetitionScaffold = props => {
     ...restProps,
     indexes: {
       ...(indexes || {}),
-      [repeaterField.id]: index
+      [repeaterField.id]: itemIndex
     }
-  }), [index, indexes, repeaterField.id, restProps]);
+  }), [itemIndex, indexes, repeaterField.id, restProps]);
   const localExpressionContextInfo = useMemo(() => ({
     data: parentExpressionContextInfo.data,
-    this: value,
+    this: itemValue,
     parent: buildExpressionContext(parentExpressionContextInfo),
-    i: [...parentExpressionContextInfo.i, index + 1]
-  }), [index, parentExpressionContextInfo, value]);
+    i: [...parentExpressionContextInfo.i, itemIndex + 1]
+  }), [itemIndex, parentExpressionContextInfo, itemValue]);
   return !showRemove ? jsx(LocalExpressionContext.Provider, {
     value: localExpressionContextInfo,
     children: jsx(RowsRenderer, {
@@ -6753,10 +6782,10 @@ const RepetitionScaffold = props => {
         })
       })
     }), jsx("button", {
-      class: "fjs-repeat-row-remove",
       type: "button",
-      "aria-label": `Remove list item ${index + 1}`,
-      onClick: () => onDeleteItem(index),
+      class: "fjs-repeat-row-remove",
+      "aria-label": `Remove list item ${itemIndex + 1}`,
+      onClick: () => onDeleteItem(itemIndex),
       children: jsx("div", {
         class: "fjs-repeat-row-remove-icon-container",
         children: jsx(DeleteSvg, {})