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

package/dist/index.es.js

@@ -260,16 +260,38 @@ class FeelExpressionLanguage {
    * @returns {any}
    */
   evaluate(expression, data = {}) {
-    if (!expression) {
+    if (!this.isExpression(expression)) {
       return null;
     }
-    if (!isString(expression) || !expression.startsWith('=')) {
+    try {
+      const {
+        value: result
+      } = 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
-      } = evaluate(expression.slice(1), data);
+      } = unaryTest(expression.slice(1), data);
       return result;
     } catch (error) {
       this._eventBus.fire('error', {
@@ -746,31 +768,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 = useContext(LocalExpressionContext);
+  return 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 = useContext(LocalExpressionContext);
-  return useMemo(() => {
-    return conditionChecker ? conditionChecker.check(condition, buildExpressionContext(expressionContextInfo)) : null;
-  }, [conditionChecker, condition, expressionContextInfo]);
+  return useUnaryTestEvaluation(condition);
 }
 
 /**
@@ -1258,16 +1302,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
  */
 function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
-  const conditionChecker = useService('conditionChecker', false);
-  const expressionContextInfo = 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;
 }
@@ -2496,6 +2540,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
@@ -5929,7 +5976,8 @@ const type = 'documentPreview';
 
 /**
  * @typedef DocumentEndpointBuilder
- * @property {(document: DocumentMetadata) => string} buildUrl
+ * @property {(document: DocumentMetadata) => string} [buildUrl]
+ * @property {(document: DocumentMetadata) => RequestInit|undefined} [buildRequestInit]
  */
 
 /**
@@ -5980,13 +6028,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) ? jsx(DocumentRenderer, {
+        const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl?.(document)) ?? document.endpoint;
+        if (!isValidDocumentEndpoint(finalEndpoint)) {
+          return null;
+        }
+        const requestInit = getDocumentRequestInit(documentEndpointBuilder, document);
+        return jsx(DocumentRenderer, {
           documentMetadata: document,
           endpoint: finalEndpoint,
+          requestInit: requestInit,
           maxHeight: maxHeight,
           domId: `${domId}-${index}`
-        }, document.documentId) : null;
+        }, document.documentId);
       })
     }), jsx(Errors, {
       id: errorMessageId,
@@ -6062,13 +6115,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] = useState(null);
@@ -6078,7 +6133,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();
@@ -6098,7 +6153,7 @@ function PdfRenderer(props) {
         URL.revokeObjectURL(objectUrl);
       }
     };
-  }, [url, onError]);
+  }, [url, onError, requestInit]);
   return jsxs(Fragment, {
     children: [pdfObjectUrl !== null ? jsx("embed", {
       src: pdfObjectUrl,
@@ -6111,12 +6166,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] = useState(null);
+  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 ? 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}
@@ -6126,7 +6230,8 @@ function DocumentRenderer(props) {
     documentMetadata,
     endpoint,
     maxHeight,
-    domId
+    domId,
+    requestInit
   } = props;
   const {
     metadata
@@ -6145,13 +6250,15 @@ function DocumentRenderer(props) {
         maxHeight
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
-      children: [jsx("img", {
-        src: endpoint,
+      children: [jsx(ImageRenderer, {
+        url: endpoint,
         alt: metadata.fileName,
-        class: `fjs-${type}-image`
+        requestInit: requestInit,
+        onError: () => setHasError(true)
       }), jsx(DownloadButton, {
         endpoint: endpoint,
         fileName: metadata.fileName,
+        requestInit: requestInit,
         onDownloadError: () => {
           setHasError(true);
         }
@@ -6171,6 +6278,7 @@ function DocumentRenderer(props) {
       children: jsx(PdfRenderer, {
         url: endpoint,
         fileName: metadata.fileName,
+        requestInit: requestInit,
         onError: () => setHasError(true),
         errorMessageId: errorMessageId
       })
@@ -6191,6 +6299,7 @@ function DocumentRenderer(props) {
     }), jsx(DownloadButton, {
       endpoint: endpoint,
       fileName: metadata.fileName,
+      requestInit: requestInit,
       onDownloadError: () => {
         setHasError(true);
       }
@@ -6203,6 +6312,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}
  */
@@ -6210,11 +6320,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;
@@ -6268,6 +6379,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
@@ -6444,6 +6565,8 @@ const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suff
 
 /**
  * @typedef { import('../types').Schema } Schema
+ * @typedef { import('../types').ExpressionLanguage } ExpressionLanguage
+ * @typedef { import('../types').Templating } Templating
  */
 
 /**
@@ -6466,8 +6589,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]
@@ -6566,15 +6689,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;
   }
 
@@ -6697,24 +6831,7 @@ class ConditionChecker {
    * @returns {boolean|null}
    */
   check(condition, data = {}) {
-    if (!condition) {
-      return null;
-    }
-    if (!isString(condition) || !condition.startsWith('=')) {
-      return null;
-    }
-    try {
-      // cut off initial '='
-      const {
-        value: result
-      } = unaryTest(condition.slice(1), data);
-      return result;
-    } catch (error) {
-      this._eventBus.fire('error', {
-        error
-      });
-      return null;
-    }
+    return this._expressionLanguage.evaluateUnaryTest(condition, data);
   }
 
   /**
@@ -6748,7 +6865,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'],
@@ -8258,6 +8375,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'];
@@ -8386,6 +8507,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
@@ -8398,6 +8525,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
@@ -9859,5 +9993,5 @@ function createForm(options) {
   });
 }
 
-export { ALLOW_ATTRIBUTE, Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Description, DocumentPreview, DynamicList, Errors, ExpressionField, ExpressionFieldModule, ExpressionLanguageModule, ExpressionLoopPreventer, FeelExpressionLanguage, FeelersTemplating, FieldFactory, FilePicker, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TEXT_VIEW_DEFAULT_TEXT, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runExpressionEvaluation, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles, wrapObjectKeysWithUnderscores };
+export { ALLOW_ATTRIBUTE, Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Description, DocumentPreview, DynamicList, Errors, ExpressionField, ExpressionFieldModule, ExpressionLanguageModule, ExpressionLoopPreventer, FeelExpressionLanguage, FeelersTemplating, FieldFactory, FilePicker, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TEXT_VIEW_DEFAULT_TEXT, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runExpressionEvaluation, runRecursively, runUnaryTestEvaluation, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles, wrapObjectKeysWithUnderscores };
 //# sourceMappingURL=index.es.js.map