@bpmn-io/form-js-viewer 1.11.0 → 1.11.1

package/dist/index.cjs

@@ -677,6 +677,12 @@ const FormContext = preact.createContext({
   formId: null
 });
 
+/**
+ * @template T
+ * @param {string} type
+ * @param {boolean} [strict=true]
+ * @returns {T | null}
+ */
 function useService(type, strict) {
   const {
     getService
@@ -755,11 +761,10 @@ function buildExpressionContext(context) {
 }
 
 /**
- * Evaluate a string based on the expressionLanguage and context information.
- * If the string is not an expression, it is returned as is.
+ * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
  *
  * @param {any} expressionLanguage - The expression language to use.
- * @param {string} value - The string to evaluate.
+ * @param {any} value - The static value or expression to evaluate.
  * @param {Object} expressionContextInfo - The context information to use.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
@@ -890,11 +895,10 @@ function _isAllowedValue(value) {
 }
 
 /**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
+ * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
  * The function is memoized to minimize re-renders.
  *
- * @param {string} value - The string to evaluate.
+ * @param {any} value - A static value or expression to evaluate.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
 function useExpressionEvaluation(value) {
@@ -1135,7 +1139,7 @@ function _isElementScrollable(el) {
 }
 
 const EMPTY_OBJECT = {};
-const EMPTY_ARRAY = [];
+const EMPTY_ARRAY$2 = [];
 
 /**
  * Custom hook to scroll an element within a scrollable container.
@@ -1151,7 +1155,7 @@ const EMPTY_ARRAY = [];
  */
 function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
   const _scrollOptions = scrollOptions || EMPTY_OBJECT;
-  const _flagRefs = flagRefs || EMPTY_ARRAY;
+  const _flagRefs = flagRefs || EMPTY_ARRAY$2;
   hooks.useEffect(() => {
     // return early if flags are not raised, or component is not mounted
     if (minDash.some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -1205,6 +1209,23 @@ function _getTopOffset(item, scrollContainer, options) {
   return 0;
 }
 
+/**
+ * If the value is a valid expression, we evaluate it. Otherwise, we continue with the value as-is.
+ * If the resulting value isn't a boolean, we return 'false'
+ * The function is memoized to minimize re-renders.
+ *
+ * @param {boolean | string} value - A static boolean or expression to evaluate.
+ * @returns {boolean} - Evaluated boolean result.
+ */
+function useBooleanExpressionEvaluation(value) {
+  const expressionLanguage = useService('expressionLanguage');
+  const expressionContextInfo = hooks.useContext(LocalExpressionContext);
+  return hooks.useMemo(() => {
+    const evaluationResult = runExpressionEvaluation(expressionLanguage, value, expressionContextInfo);
+    return typeof evaluationResult === 'boolean' ? evaluationResult : false;
+  }, [expressionLanguage, expressionContextInfo, value]);
+}
+
 /**
  * Returns the conditionally filtered data of a form reactively.
  * Memoised to minimize re-renders
@@ -1986,7 +2007,9 @@ Checklist.config = {
 };
 
 const noop$1 = () => false;
+const ids$2 = new Ids([32, 36, 1]);
 function FormField(props) {
+  const instanceIdRef = hooks.useRef(ids$2.next());
   const {
     field,
     indexes,
@@ -2032,22 +2055,28 @@ function FormField(props) {
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
-  const fieldInstance = hooks.useMemo(() => ({
-    id: field.id,
-    expressionContextInfo: localExpressionContext,
-    valuePath,
-    indexes
-  }), [field.id, valuePath, localExpressionContext, indexes]);
+  const instanceId = hooks.useMemo(() => {
+    if (!formFieldInstanceRegistry) {
+      return null;
+    }
+    return formFieldInstanceRegistry.syncInstance(instanceIdRef.current, {
+      id: field.id,
+      expressionContextInfo: localExpressionContext,
+      valuePath,
+      value,
+      indexes,
+      hidden
+    });
+  }, [formFieldInstanceRegistry, field.id, localExpressionContext, valuePath, value, indexes, hidden]);
+  const fieldInstance = instanceId ? formFieldInstanceRegistry.get(instanceId) : null;
 
-  // register form field instance
+  // cleanup the instance on unmount
   hooks.useEffect(() => {
-    if (formFieldInstanceRegistry && !hidden) {
-      const instanceId = formFieldInstanceRegistry.add(fieldInstance);
-      return () => {
-        formFieldInstanceRegistry.remove(instanceId);
-      };
+    const instanceId = instanceIdRef.current;
+    if (formFieldInstanceRegistry) {
+      return () => formFieldInstanceRegistry.cleanupInstance(instanceId);
     }
-  }, [fieldInstance, formFieldInstanceRegistry, hidden]);
+  }, [formFieldInstanceRegistry]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   hooks.useEffect(() => {
@@ -2066,7 +2095,7 @@ function FormField(props) {
   }, [eventBus, viewerCommands]);
   hooks.useEffect(() => {
     const hasInitialValue = initialValue && !isEqual(initialValue, []);
-    if (initialValidationTrigger && hasInitialValue) {
+    if (initialValidationTrigger && hasInitialValue && fieldInstance) {
       setInitialValidationTrigger(false);
       viewerCommands.updateFieldInstanceValidation(fieldInstance, initialValue);
     }
@@ -5686,7 +5715,11 @@ function getHeaderAriaLabel(sortBy, key, label) {
   return `Click to sort by ${label} ascending`;
 }
 
+const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
+
 const type = 'filepicker';
+const ids$1 = new Ids();
+const EMPTY_ARRAY$1 = [];
 
 /**
  * @typedef Props
@@ -5700,7 +5733,8 @@ const type = 'filepicker';
  * @property {string} field.id
  * @property {string} [field.label]
  * @property {string} [field.accept]
- * @property {boolean} [field.multiple]
+ * @property {string|boolean} [field.multiple]
+ * @property {string} [value]
  *
  * @param {Props} props
  * @returns {import("preact").JSX.Element}
@@ -5708,9 +5742,8 @@ const type = 'filepicker';
 function FilePicker(props) {
   /** @type {import("preact/hooks").Ref<HTMLInputElement>} */
   const fileInputRef = hooks.useRef(null);
-  /** @type {[File[],import("preact/hooks").StateUpdater<File[]>]} */
-  const [selectedFiles, setSelectedFiles] = hooks.useState([]);
-  const eventBus = useService('eventBus');
+  /** @type {import('../../FileRegistry').FileRegistry} */
+  const fileRegistry = useService('fileRegistry', false);
   const {
     field,
     onChange,
@@ -5718,33 +5751,59 @@ function FilePicker(props) {
     errors = [],
     disabled,
     readonly,
-    required
+    required,
+    value: filesKey = ''
   } = props;
   const {
     label,
-    multiple = '',
-    accept = '',
-    id
+    multiple = false,
+    accept = ''
   } = field;
+  /** @type {string} */
   const evaluatedAccept = useSingleLineTemplateEvaluation(accept);
-  const evaluatedMultiple = useSingleLineTemplateEvaluation(typeof multiple === 'string' ? multiple : multiple.toString()) === 'true';
+  const evaluatedMultiple = useBooleanExpressionEvaluation(multiple);
   const errorMessageId = `${domId}-error-message`;
+  /** @type {File[]} */
+  const selectedFiles = fileRegistry === null ? EMPTY_ARRAY$1 : fileRegistry.getFiles(filesKey);
   hooks.useEffect(() => {
-    const reset = () => {
-      setSelectedFiles([]);
+    if (filesKey && fileRegistry !== null && !fileRegistry.hasKey(filesKey)) {
       onChange({
         value: null
       });
-    };
-    eventBus.on('import.done', reset);
-    eventBus.on('reset', reset);
-    return () => {
-      eventBus.off('import.done', reset);
-      eventBus.off('reset', reset);
-    };
-  }, [eventBus, onChange]);
+    }
+  }, [fileRegistry, filesKey, onChange, selectedFiles.length]);
+  hooks.useEffect(() => {
+    const data = new DataTransfer();
+    selectedFiles.forEach(file => data.items.add(file));
+    fileInputRef.current.files = data.files;
+  }, [selectedFiles]);
+
+  /**
+   * @type import("preact").JSX.GenericEventHandler<HTMLInputElement>
+   */
+  const onFileChange = event => {
+    const input = /** @type {HTMLInputElement} */event.target;
+
+    // if we have an associated file key but no files are selected, clear the file key and associated files
+    if ((input.files === null || input.files.length === 0) && filesKey !== '') {
+      fileRegistry.deleteFiles(filesKey);
+      onChange({
+        value: null
+      });
+      return;
+    }
+    const files = Array.from(input.files);
+
+    // ensure fileKey exists
+    const updatedFilesKey = filesKey || ids$1.nextPrefixed(FILE_PICKER_FILE_KEY_PREFIX);
+    fileRegistry.setFiles(updatedFilesKey, files);
+    onChange({
+      value: updatedFilesKey
+    });
+  };
+  const isInputDisabled = disabled || readonly || fileRegistry === null;
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type, {
+    className: formFieldClasses(type, {
       errors,
       disabled,
       readonly
@@ -5759,29 +5818,17 @@ function FilePicker(props) {
       ref: fileInputRef,
       id: domId,
       name: domId,
-      multiple: evaluatedMultiple === false ? undefined : evaluatedMultiple,
-      accept: evaluatedAccept === '' ? undefined : evaluatedAccept,
-      onChange: event => {
-        const input = /** @type {HTMLInputElement} */event.target;
-        if (input.files === null || input.files.length === 0) {
-          onChange({
-            value: null
-          });
-          return;
-        }
-        const files = Array.from(input.files);
-        onChange({
-          value: `${id}_value_key`
-        });
-        setSelectedFiles(files);
-      }
+      disabled: isInputDisabled,
+      multiple: evaluatedMultiple || undefined,
+      accept: evaluatedAccept || undefined,
+      onChange: onFileChange
     }), jsxRuntime.jsxs("div", {
       className: "fjs-filepicker-container",
       children: [jsxRuntime.jsx("button", {
         type: "button",
-        disabled: disabled,
+        disabled: isInputDisabled,
         readonly: readonly,
-        class: "fjs-button",
+        className: "fjs-button fjs-filepicker-button",
         onClick: () => {
           fileInputRef.current.click();
         },
@@ -5802,11 +5849,6 @@ FilePicker.config = {
   label: 'File picker',
   group: 'basic-input',
   emptyValue: null,
-  sanitizeValue: ({
-    value
-  }) => {
-    return value;
-  },
   create: (options = {}) => ({
     ...options
   })
@@ -6203,11 +6245,21 @@ class ConditionChecker {
         // if we have a hidden repeatable field, and the data structure allows, we clear it directly at the root and stop recursion
         if (context.isHidden && isRepeatable) {
           context.preventRecursion = true;
+          this._eventBus.fire('conditionChecker.remove', {
+            item: {
+              [field.key]: minDash.get(workingData, getFilterPath(field, indexes))
+            }
+          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
 
         // for simple leaf fields, we always clear
         if (context.isHidden && isClosed) {
+          this._eventBus.fire('conditionChecker.remove', {
+            item: {
+              [field.key]: minDash.get(workingData, getFilterPath(field, indexes))
+            }
+          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
       });
@@ -7001,11 +7053,16 @@ var SvgDelete = function SvgDelete(props) {
 /* eslint-disable react-hooks/rules-of-hooks */
 
 class RepeatRenderManager {
-  constructor(form, formFields, formFieldRegistry, pathRegistry) {
+  constructor(form, formFields, formFieldRegistry, pathRegistry, eventBus) {
     this._form = form;
+    /** @type {import('../../render/FormFields').FormFields} */
     this._formFields = formFields;
+    /** @type {import('../../core/FormFieldRegistry').FormFieldRegistry} */
     this._formFieldRegistry = formFieldRegistry;
+    /** @type {import('../../core/PathRegistry').PathRegistry} */
     this._pathRegistry = pathRegistry;
+    /** @type {import('../../core/EventBus').EventBus} */
+    this._eventBus = eventBus;
     this.Repeater = this.Repeater.bind(this);
     this.RepeatFooter = this.RepeatFooter.bind(this);
   }
@@ -7045,11 +7102,18 @@ class RepeatRenderManager {
     const isCollapsed = collapseEnabled && sharedRepeatState.isCollapsed;
     const hasChildren = repeaterField.components && repeaterField.components.length > 0;
     const showRemove = repeaterField.allowAddRemove && hasChildren;
-    const displayValues = isCollapsed ? values.slice(0, nonCollapsedItems) : values;
-    const hiddenValues = isCollapsed ? values.slice(nonCollapsedItems) : [];
+
+    /**
+     * @param {number} index
+     */
     const onDeleteItem = index => {
       const updatedValues = values.slice();
-      updatedValues.splice(index, 1);
+      const removedItem = updatedValues.splice(index, 1)[0];
+      this._eventBus.fire('repeatRenderManager.remove', {
+        dataPath,
+        index,
+        item: removedItem
+      });
       props.onChange({
         field: repeaterField,
         value: updatedValues,
@@ -7057,21 +7121,13 @@ class RepeatRenderManager {
       });
     };
     const parentExpressionContextInfo = hooks.useContext(LocalExpressionContext);
-    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [displayValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
-        itemIndex: itemIndex,
-        itemValue: itemValue,
-        parentExpressionContextInfo: parentExpressionContextInfo,
-        repeaterField: repeaterField,
-        RowsRenderer: RowsRenderer,
-        indexes: indexes,
-        onDeleteItem: onDeleteItem,
-        showRemove: showRemove,
-        ...restProps
-      }, itemIndex)), hiddenValues.length > 0 ? jsxRuntime.jsx("div", {
-        className: "fjs-repeat-row-collapsed",
-        children: hiddenValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
-          itemIndex: itemIndex + nonCollapsedItems,
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: values.map((itemValue, itemIndex) => jsxRuntime.jsx("div", {
+        class: classNames({
+          'fjs-repeat-row-collapsed': isCollapsed ? itemIndex >= nonCollapsedItems : false
+        }),
+        children: jsxRuntime.jsx(RepetitionScaffold, {
+          itemIndex: itemIndex,
           itemValue: itemValue,
           parentExpressionContextInfo: parentExpressionContextInfo,
           repeaterField: repeaterField,
@@ -7080,8 +7136,8 @@ class RepeatRenderManager {
           onDeleteItem: onDeleteItem,
           showRemove: showRemove,
           ...restProps
-        }, itemIndex))
-      }) : null]
+        })
+      }))
     });
   }
   RepeatFooter(props) {
@@ -7124,6 +7180,11 @@ class RepeatRenderManager {
       });
       updatedValues.push(newItem);
       shouldScroll.current = true;
+      this._eventBus.fire('repeatRenderManager.add', {
+        dataPath,
+        index: updatedValues.length - 1,
+        item: newItem
+      });
       props.onChange({
         value: updatedValues
       });
@@ -7156,7 +7217,7 @@ class RepeatRenderManager {
         class: "fjs-repeat-render-collapse",
         onClick: toggle,
         children: isCollapsed ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(SvgExpand, {}), " ", `Expand all (${values.length})`]
+          children: [jsxRuntime.jsx(SvgExpand, {}), " ", `Expand all (${values.length - 1})`]
         }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(SvgCollapse, {}), " ", 'Collapse']
         })
@@ -7241,7 +7302,7 @@ const RepetitionScaffold = props => {
     })]
   });
 };
-RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
+RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry', 'eventBus'];
 
 const RepeatRenderModule = {
   __init__: ['repeatRenderManager'],
@@ -8631,39 +8692,52 @@ class FormFieldInstanceRegistry {
     this._formFieldInstances = {};
     eventBus.on('form.clear', () => this.clear());
   }
-  add(instance) {
+  syncInstance(instanceId, formFieldInfo) {
     const {
-      id,
-      expressionContextInfo,
-      valuePath,
-      indexes
-    } = instance;
-    const instanceId = [id, ...Object.values(indexes || {})].join('_');
-    if (this._formFieldInstances[instanceId]) {
-      throw new Error('this form field instance is already registered');
+      hidden,
+      ...restInfo
+    } = formFieldInfo;
+    const isInstanceExpected = !hidden;
+    const doesInstanceExist = this._formFieldInstances[instanceId];
+    if (isInstanceExpected && !doesInstanceExist) {
+      this._formFieldInstances[instanceId] = {
+        instanceId,
+        ...restInfo
+      };
+      this._eventBus.fire('formFieldInstance.added', {
+        instanceId
+      });
+    } else if (!isInstanceExpected && doesInstanceExist) {
+      delete this._formFieldInstances[instanceId];
+      this._eventBus.fire('formFieldInstance.removed', {
+        instanceId
+      });
+    } else if (isInstanceExpected && doesInstanceExist) {
+      const wasInstanceChanged = Object.keys(restInfo).some(key => {
+        return this._formFieldInstances[instanceId][key] !== restInfo[key];
+      });
+      if (wasInstanceChanged) {
+        this._formFieldInstances[instanceId] = {
+          instanceId,
+          ...restInfo
+        };
+        this._eventBus.fire('formFieldInstance.changed', {
+          instanceId
+        });
+      }
     }
-    this._formFieldInstances[instanceId] = {
-      id,
-      instanceId,
-      expressionContextInfo,
-      valuePath,
-      indexes
-    };
-    this._eventBus.fire('formFieldInstanceRegistry.changed', {
-      instanceId,
-      action: 'added'
-    });
     return instanceId;
   }
-  remove(instanceId) {
-    if (!this._formFieldInstances[instanceId]) {
-      return;
+  cleanupInstance(instanceId) {
+    if (this._formFieldInstances[instanceId]) {
+      delete this._formFieldInstances[instanceId];
+      this._eventBus.fire('formFieldInstance.removed', {
+        instanceId
+      });
     }
-    delete this._formFieldInstances[instanceId];
-    this._eventBus.fire('formFieldInstanceRegistry.changed', {
-      instanceId,
-      action: 'removed'
-    });
+  }
+  get(instanceId) {
+    return this._formFieldInstances[instanceId];
   }
   getAll() {
     return Object.values(this._formFieldInstances);
@@ -8743,10 +8817,122 @@ function Renderer(config, eventBus, form, injector) {
 }
 Renderer.$inject = ['config.renderer', 'eventBus', 'form', 'injector'];
 
+/**
+ * @typedef {Record<PropertyKey, unknown>} RemovedData
+ * @param {RemovedData} removedData
+ * @returns {string[]}
+ */
+const extractFileReferencesFromRemovedData = removedData => {
+  /** @type {string[]} */
+  const fileReferences = [];
+  if (removedData === null) {
+    return fileReferences;
+  }
+  Object.values(removedData).forEach(value => {
+    if (value === null) {
+      return;
+    }
+    if (typeof value === 'object') {
+      fileReferences.push(...extractFileReferencesFromRemovedData(/** @type {RemovedData} */value));
+    } else if (Array.isArray(value)) {
+      fileReferences.push(...value.map(extractFileReferencesFromRemovedData).flat());
+    } else if (typeof value === 'string' && value.startsWith(FILE_PICKER_FILE_KEY_PREFIX)) {
+      fileReferences.push(value);
+    }
+  });
+  return fileReferences;
+};
+
+const fileRegistry = Symbol('fileRegistry');
+const eventBusSymbol = Symbol('eventBus');
+const formFieldRegistrySymbol = Symbol('formFieldRegistry');
+const formFieldInstanceRegistrySymbol = Symbol('formFieldInstanceRegistry');
+const EMPTY_ARRAY = [];
+class FileRegistry {
+  /**
+   * @param {import('../core/EventBus').EventBus} eventBus
+   * @param {import('../core/FormFieldRegistry').FormFieldRegistry} formFieldRegistry
+   * @param {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} formFieldInstanceRegistry
+   */
+  constructor(eventBus, formFieldRegistry, formFieldInstanceRegistry) {
+    /** @type {Map<string, File[]>} */
+    this[fileRegistry] = new Map();
+    /** @type {import('../core/EventBus').EventBus} */
+    this[eventBusSymbol] = eventBus;
+    /** @type {import('../core/FormFieldRegistry').FormFieldRegistry} */
+    this[formFieldRegistrySymbol] = formFieldRegistry;
+    /** @type {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} */
+    this[formFieldInstanceRegistrySymbol] = formFieldInstanceRegistry;
+    const removeFileHandler = ({
+      item
+    }) => {
+      const fileReferences = extractFileReferencesFromRemovedData(item);
+
+      // Remove all file references from the registry
+      fileReferences.forEach(fileReference => {
+        this.deleteFiles(fileReference);
+      });
+    };
+    eventBus.on('form.clear', () => this.clear());
+    eventBus.on('conditionChecker.remove', removeFileHandler);
+    eventBus.on('repeatRenderManager.remove', removeFileHandler);
+  }
+
+  /**
+   * @param {string} id
+   * @param {File[]} files
+   */
+  setFiles(id, files) {
+    this[fileRegistry].set(id, files);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {File[]}
+   */
+  getFiles(id) {
+    return this[fileRegistry].get(id) || EMPTY_ARRAY;
+  }
+
+  /**
+   * @returns {string[]}
+   */
+  getKeys() {
+    return Array.from(this[fileRegistry].keys());
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  hasKey(id) {
+    return this[fileRegistry].has(id);
+  }
+
+  /**
+   * @param {string} id
+   */
+  deleteFiles(id) {
+    this[fileRegistry].delete(id);
+  }
+
+  /**
+   * @returns {Map<string, File[]>}
+   */
+  getAllFiles() {
+    return new Map(this[fileRegistry]);
+  }
+  clear() {
+    this[fileRegistry].clear();
+  }
+}
+FileRegistry.$inject = ['eventBus', 'formFieldRegistry', 'formFieldInstanceRegistry'];
+
 const RenderModule = {
   __init__: ['formFields', 'renderer'],
   formFields: ['type', FormFields],
-  renderer: ['type', Renderer]
+  renderer: ['type', Renderer],
+  fileRegistry: ['type', FileRegistry]
 };
 
 const CoreModule = {
@@ -8899,7 +9085,7 @@ class Form {
   /**
    * Submit the form, triggering all field validations.
    *
-   * @returns { { data: Data, errors: Errors } }
+   * @returns { { data: Data, errors: Errors, files: Map<string, File[]> } }
    */
   submit() {
     const {
@@ -8911,9 +9097,11 @@ class Form {
     this._emit('presubmit');
     const data = this._getSubmitData();
     const errors = this.validate();
+    const files = this.get('fileRegistry').getAllFiles();
     const result = {
       data,
-      errors
+      errors,
+      files
     };
     this._emit('submit', result);
     return result;