@bpmn-io/form-js-viewer 1.19.0 → 1.21.0

package/README.md

@@ -48,6 +48,37 @@ form.on('changed', 500, (event) => {
 });
 ```
 
+### Customize document preview requests
+
+If you use the `documentPreview` field and need custom authentication for file downloads/previews,
+you can provide a `documentEndpointBuilder` service via dependency injection.
+
+```javascript
+import { Form } from '@bpmn-io/form-js-viewer';
+
+const DocumentPreviewRequestModule = {
+  documentEndpointBuilder: [
+    'value',
+    {
+      buildUrl: (document) => document.endpoint,
+      buildRequestInit: (document) => ({
+        headers: {
+          'x-document-id': document.documentId,
+        },
+        credentials: 'include',
+      }),
+    },
+  ],
+};
+
+const form = new Form({
+  container: document.querySelector('#form'),
+  additionalModules: [DocumentPreviewRequestModule],
+});
+```
+
+`buildRequestInit` is optional, used to [configure the fetch request](https://developer.mozilla.org/en-US/docs/Web/API/RequestInit). If omitted, document requests use the default `fetch(url)` behavior.
+
 Check out [a full example](https://github.com/bpmn-io/form-js-examples).
 
 ## Styling

package/dist/index.cjs

@@ -280,16 +280,38 @@ class FeelExpressionLanguage {
    * @returns {any}
    */
   evaluate(expression, data = {}) {
-    if (!expression) {
+    if (!this.isExpression(expression)) {
       return null;
     }
-    if (!minDash.isString(expression) || !expression.startsWith('=')) {
+    try {
+      const {
+        value: result
+      } = feelin.evaluate(expression.slice(1), data);
+      return result;
+    } catch (error) {
+      this._eventBus.fire('error', {
+        error
+      });
+      return null;
+    }
+  }
+
+  /**
+   * Evaluate a unary test expression. Returns null for invalid/missing expressions.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {boolean|null}
+   */
+  evaluateUnaryTest(expression, data = {}) {
+    if (!this.isExpression(expression)) {
       return null;
     }
     try {
       const {
         value: result
-      } = feelin.evaluate(expression.slice(1), data);
+      } = feelin.unaryTest(expression.slice(1), data);
       return result;
     } catch (error) {
       this._eventBus.fire('error', {
@@ -766,31 +788,53 @@ function buildExpressionContext(context) {
 /**
  * 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 {import('../types').ExpressionLanguage} expressionLanguage - The expression language to use.
  * @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.
  */
 function runExpressionEvaluation(expressionLanguage, value, expressionContextInfo) {
-  if (expressionLanguage && expressionLanguage.isExpression(value)) {
+  if (expressionLanguage.isExpression(value)) {
     return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
   }
   return value;
 }
 
 /**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ * Evaluate a value as a unary test expression. Returns null for invalid/missing expressions or
+ * if the expression language is not available.
+ *
+ * @param {import('../types').ExpressionLanguage} expressionLanguage - The expression language to use.
+ * @param {string} value - The unary test expression to evaluate.
+ * @param {Object} expressionContextInfo - The context information to use.
+ * @returns {boolean | null} - Evaluated result, or null if expression is invalid/missing.
+ */
+function runUnaryTestEvaluation(expressionLanguage, value, expressionContextInfo) {
+  return expressionLanguage.evaluateUnaryTest(value, buildExpressionContext(expressionContextInfo));
+}
+
+/**
+ * Evaluate a unary test expression reactively. Returns null for invalid/missing expressions.
+ * The function is memoized to minimize re-renders.
+ *
+ * @param {string | undefined} value - A unary test expression to evaluate.
+ * @returns {boolean | null} - Evaluated result, or null if expression is invalid/missing.
+ */
+function useUnaryTestEvaluation(value) {
+  const expressionLanguage = useService('expressionLanguage');
+  const expressionContextInfo = hooks.useContext(LocalExpressionContext);
+  return hooks.useMemo(() => runUnaryTestEvaluation(expressionLanguage, value, expressionContextInfo), [expressionLanguage, expressionContextInfo, value]);
+}
+
+/**
+ * Evaluate if condition is met reactively based on the expression language and form data.
  *
  * @param {string | undefined} condition
  *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+ * @returns {boolean | null} true if condition is met, false if not, null if no condition or expression language
  */
 function useCondition(condition) {
-  const conditionChecker = useService('conditionChecker', false);
-  const expressionContextInfo = hooks.useContext(LocalExpressionContext);
-  return hooks.useMemo(() => {
-    return conditionChecker ? conditionChecker.check(condition, buildExpressionContext(expressionContextInfo)) : null;
-  }, [conditionChecker, condition, expressionContextInfo]);
+  return useUnaryTestEvaluation(condition);
 }
 
 /**
@@ -1278,16 +1322,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
  */
 function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
-  const conditionChecker = useService('conditionChecker', false);
-  const expressionContextInfo = hooks.useContext(LocalExpressionContext);
   const {
     readonly
   } = formField;
+  const isExpression = expressionLanguage && expressionLanguage.isExpression(readonly);
+  const evaluatedReadonly = useUnaryTestEvaluation(isExpression ? readonly : undefined);
   if (properties.readOnly) {
     return true;
   }
-  if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
-    return conditionChecker ? conditionChecker.check(readonly, buildExpressionContext(expressionContextInfo)) : false;
+  if (isExpression) {
+    return evaluatedReadonly === true;
   }
   return readonly || false;
 }
@@ -2516,6 +2560,9 @@ function Datepicker(props) {
     // flatpicker logic that was lost when setting allowInput to true
     instance.config.onOpen = [() => instance.calendarContainer.addEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.addEventListener('mousedown', onCalendarMouseDown)];
     instance.config.onClose = [() => instance.calendarContainer.removeEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.removeEventListener('mousedown', onCalendarMouseDown)];
+    return () => {
+      instance.destroy();
+    };
   }, [disallowPassedDates]);
 
   // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
@@ -5949,7 +5996,8 @@ const type = 'documentPreview';
 
 /**
  * @typedef DocumentEndpointBuilder
- * @property {(document: DocumentMetadata) => string} buildUrl
+ * @property {(document: DocumentMetadata) => string} [buildUrl]
+ * @property {(document: DocumentMetadata) => RequestInit|undefined} [buildRequestInit]
  */
 
 /**
@@ -6000,13 +6048,18 @@ function DocumentPreview(props) {
       class: `fjs-${type}-document-container`,
       id: domId,
       children: data.map((document, index) => {
-        const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl(document)) ?? document.endpoint;
-        return isValidDocumentEndpoint(finalEndpoint) ? jsxRuntime.jsx(DocumentRenderer, {
+        const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl?.(document)) ?? document.endpoint;
+        if (!isValidDocumentEndpoint(finalEndpoint)) {
+          return null;
+        }
+        const requestInit = getDocumentRequestInit(documentEndpointBuilder, document);
+        return jsxRuntime.jsx(DocumentRenderer, {
           documentMetadata: document,
           endpoint: finalEndpoint,
+          requestInit: requestInit,
           maxHeight: maxHeight,
           domId: `${domId}-${index}`
-        }, document.documentId) : null;
+        }, document.documentId);
       })
     }), jsxRuntime.jsx(Errors, {
       id: errorMessageId,
@@ -6082,13 +6135,15 @@ function useValidDocumentData(dataSource) {
  * @param {string} props.fileName
  * @param {Function} props.onError
  * @param {string} props.errorMessageId
+ * @param {RequestInit|undefined} props.requestInit
  * @returns {import("preact").JSX.Element}
  */
 function PdfRenderer(props) {
   const {
     url,
     onError,
-    errorMessageId
+    errorMessageId,
+    requestInit
   } = props;
   /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
   const [pdfObjectUrl, setPdfObjectUrl] = hooks.useState(null);
@@ -6098,7 +6153,7 @@ function PdfRenderer(props) {
     let objectUrl = null;
     const fetchPdf = async () => {
       try {
-        const response = await fetch(url);
+        const response = await fetch(url, requestInit);
         if (!response.ok) {
           setHasError(true);
           onError();
@@ -6118,7 +6173,7 @@ function PdfRenderer(props) {
         URL.revokeObjectURL(objectUrl);
       }
     };
-  }, [url, onError]);
+  }, [url, onError, requestInit]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [pdfObjectUrl !== null ? jsxRuntime.jsx("embed", {
       src: pdfObjectUrl,
@@ -6131,12 +6186,61 @@ function PdfRenderer(props) {
   });
 }
 
+/**
+ * @param {Object} props
+ * @param {string} props.url
+ * @param {string} props.alt
+ * @param {Function} props.onError
+ * @param {RequestInit|undefined} props.requestInit
+ * @returns {import("preact").JSX.Element}
+ */
+function ImageRenderer(props) {
+  const {
+    url,
+    alt,
+    onError,
+    requestInit
+  } = props;
+  /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
+  const [imageObjectUrl, setImageObjectUrl] = hooks.useState(null);
+  hooks.useEffect(() => {
+    /** @type {null | string} */
+    let objectUrl = null;
+    const fetchImage = async () => {
+      try {
+        const response = await fetch(url, requestInit);
+        if (!response.ok) {
+          onError();
+          return;
+        }
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        setImageObjectUrl(objectUrl);
+      } catch {
+        onError();
+      }
+    };
+    fetchImage();
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [url, onError, requestInit]);
+  return imageObjectUrl !== null ? jsxRuntime.jsx("img", {
+    src: imageObjectUrl,
+    alt: alt,
+    class: `fjs-${type}-image`
+  }) : null;
+}
+
 /**
  *
  * @param {Object} props
  * @param {DocumentMetadata} props.documentMetadata
  * @param {string} props.endpoint
  * @param {string} props.domId
+ * @param {RequestInit|undefined} props.requestInit
  * @param {number|undefined} props.maxHeight
  *
  * @returns {import("preact").JSX.Element}
@@ -6146,7 +6250,8 @@ function DocumentRenderer(props) {
     documentMetadata,
     endpoint,
     maxHeight,
-    domId
+    domId,
+    requestInit
   } = props;
   const {
     metadata
@@ -6165,13 +6270,15 @@ function DocumentRenderer(props) {
         maxHeight
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
-      children: [jsxRuntime.jsx("img", {
-        src: endpoint,
+      children: [jsxRuntime.jsx(ImageRenderer, {
+        url: endpoint,
         alt: metadata.fileName,
-        class: `fjs-${type}-image`
+        requestInit: requestInit,
+        onError: () => setHasError(true)
       }), jsxRuntime.jsx(DownloadButton, {
         endpoint: endpoint,
         fileName: metadata.fileName,
+        requestInit: requestInit,
         onDownloadError: () => {
           setHasError(true);
         }
@@ -6191,6 +6298,7 @@ function DocumentRenderer(props) {
       children: jsxRuntime.jsx(PdfRenderer, {
         url: endpoint,
         fileName: metadata.fileName,
+        requestInit: requestInit,
         onError: () => setHasError(true),
         errorMessageId: errorMessageId
       })
@@ -6211,6 +6319,7 @@ function DocumentRenderer(props) {
     }), jsxRuntime.jsx(DownloadButton, {
       endpoint: endpoint,
       fileName: metadata.fileName,
+      requestInit: requestInit,
       onDownloadError: () => {
         setHasError(true);
       }
@@ -6223,6 +6332,7 @@ function DocumentRenderer(props) {
  * @param {string} props.endpoint
  * @param {string} props.fileName
  * @param {Function} props.onDownloadError
+ * @param {RequestInit|undefined} props.requestInit
  *
  * @returns {import("preact").JSX.Element}
  */
@@ -6230,11 +6340,12 @@ function DownloadButton(props) {
   const {
     endpoint,
     fileName,
-    onDownloadError
+    onDownloadError,
+    requestInit
   } = props;
   const handleDownload = async () => {
     try {
-      const response = await fetch(endpoint);
+      const response = await fetch(endpoint, requestInit);
       if (!response.ok) {
         onDownloadError();
         return;
@@ -6288,6 +6399,16 @@ function useInViewport(ref) {
   return isInViewport;
 }
 
+/**
+ * @param {DocumentEndpointBuilder | null} documentEndpointBuilder
+ * @param {DocumentMetadata} document
+ * @returns {RequestInit|undefined}
+ */
+function getDocumentRequestInit(documentEndpointBuilder, document) {
+  const requestInit = tryCatch(() => documentEndpointBuilder?.buildRequestInit?.(document));
+  return requestInit !== null && typeof requestInit === 'object' ? requestInit : undefined;
+}
+
 /**
  * @template T
  * @param {() => T} fn - Function to execute
@@ -6464,6 +6585,8 @@ const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suff
 
 /**
  * @typedef { import('../types').Schema } Schema
+ * @typedef { import('../types').ExpressionLanguage } ExpressionLanguage
+ * @typedef { import('../types').Templating } Templating
  */
 
 /**
@@ -6486,8 +6609,8 @@ const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suff
  *
  * @param {Schema} schema
  * @param {object} [options]
- * @param {any} [options.expressionLanguage]
- * @param {any} [options.templating]
+ * @param {ExpressionLanguage} [options.expressionLanguage]
+ * @param {Templating} [options.templating]
  * @param {any} [options.formFields]
  * @param {boolean} [options.inputs=true]
  * @param {boolean} [options.outputs=true]
@@ -6586,15 +6709,26 @@ const getAncestryList = (formFieldId, formFieldRegistry) => {
   return ids;
 };
 
+/**
+ * @typedef { import('../../types').ExpressionLanguage } ExpressionLanguage
+ */
+
 /**
  * @typedef {object} Condition
  * @property {string} [hide]
  */
 
 class ConditionChecker {
-  constructor(formFieldRegistry, pathRegistry, eventBus) {
+  /**
+   * @param {Object} formFieldRegistry
+   * @param {Object} pathRegistry
+   * @param {ExpressionLanguage} expressionLanguage
+   * @param {Object} eventBus
+   */
+  constructor(formFieldRegistry, pathRegistry, expressionLanguage, eventBus) {
     this._formFieldRegistry = formFieldRegistry;
     this._pathRegistry = pathRegistry;
+    this._expressionLanguage = expressionLanguage;
     this._eventBus = eventBus;
   }
 
@@ -6717,24 +6851,7 @@ class ConditionChecker {
    * @returns {boolean|null}
    */
   check(condition, data = {}) {
-    if (!condition) {
-      return null;
-    }
-    if (!minDash.isString(condition) || !condition.startsWith('=')) {
-      return null;
-    }
-    try {
-      // cut off initial '='
-      const {
-        value: result
-      } = feelin.unaryTest(condition.slice(1), data);
-      return result;
-    } catch (error) {
-      this._eventBus.fire('error', {
-        error
-      });
-      return null;
-    }
+    return this._expressionLanguage.evaluateUnaryTest(condition, data);
   }
 
   /**
@@ -6768,7 +6885,7 @@ class ConditionChecker {
     return Array.isArray(parentObject) && (!parentObject.length || parentObject.every(item => item === undefined));
   }
 }
-ConditionChecker.$inject = ['formFieldRegistry', 'pathRegistry', 'eventBus'];
+ConditionChecker.$inject = ['formFieldRegistry', 'pathRegistry', 'expressionLanguage', 'eventBus'];
 
 const ExpressionLanguageModule = {
   __init__: ['expressionLanguage', 'templating', 'conditionChecker'],
@@ -8278,6 +8395,10 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
+/**
+ * @typedef { import('../types').ExpressionLanguage } ExpressionLanguage
+ */
+
 const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
 const VALIDATE_FEEL_PROPERTIES = ['min', 'max', 'minLength', 'maxLength'];
@@ -8406,6 +8527,12 @@ function runPresetValidation(field, validation, value) {
   }
   return errors;
 }
+
+/**
+ * @param {Object} validate
+ * @param {ExpressionLanguage} expressionLanguage
+ * @param {Object} expressionContextInfo
+ */
 function evaluateFEELValues(validate, expressionLanguage, expressionContextInfo) {
   const evaluatedValidate = {
     ...validate
@@ -8418,6 +8545,13 @@ function evaluateFEELValues(validate, expressionLanguage, expressionContextInfo)
   });
   return evaluatedValidate;
 }
+
+/**
+ * @param {Object} validate
+ * @param {ExpressionLanguage} expressionLanguage
+ * @param {Object} conditionChecker
+ * @param {Object} form
+ */
 function oldEvaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
   const evaluatedValidate = {
     ...validate
@@ -9971,6 +10105,7 @@ exports.pathParse = pathParse;
 exports.pathsEqual = pathsEqual;
 exports.runExpressionEvaluation = runExpressionEvaluation;
 exports.runRecursively = runRecursively;
+exports.runUnaryTestEvaluation = runUnaryTestEvaluation;
 exports.sanitizeDateTimePickerValue = sanitizeDateTimePickerValue;
 exports.sanitizeHTML = sanitizeHTML;
 exports.sanitizeIFrameSource = sanitizeIFrameSource;