@bpmn-io/form-js-viewer 1.14.1-alpha.0 → 1.15.2

package/dist/index.es.js

@@ -5144,13 +5144,22 @@ function Textfield(props) {
   const {
     required
   } = validate;
-  const [onInputChange, flushOnChange] = useFlushDebounce(({
+  const [onChange, flushOnChange] = useFlushDebounce(({
     target
   }) => {
     props.onChange({
       value: target.value
     });
   });
+
+  /**
+   * @param {import('preact').JSX.TargetedEvent<HTMLInputElement, Event>} event
+   */
+  const onInputChange = event => {
+    onChange({
+      target: event.target
+    });
+  };
   const onInputBlur = () => {
     flushOnChange && flushOnChange();
     onBlur && onBlur();
@@ -5903,10 +5912,15 @@ var SvgDownload = function SvgDownload(props) {
 
 const type = 'documentPreview';
 
+/**
+ * @typedef DocumentEndpointBuilder
+ * @property {(document: DocumentMetadata) => string} buildUrl
+ */
+
 /**
  * @typedef DocumentMetadata
  * @property {string} documentId
- * @property {string} contentHash
+ * @property {string} endpoint
  * @property {Object} metadata
  * @property {string|undefined} [metadata.contentType]
  * @property {string} metadata.fileName
@@ -5915,7 +5929,6 @@ const type = 'documentPreview';
  * @property {string} id
  * @property {string} [title]
  * @property {string} [dataSource]
- * @property {string} [endpointKey]
  * @property {number} [maxHeight]
  * @property {string} [label]
  *
@@ -5927,18 +5940,18 @@ const type = 'documentPreview';
  * @returns {import("preact").JSX.Element}
  */
 function DocumentPreview(props) {
+  /** @type {DocumentEndpointBuilder | null} */
+  const documentEndpointBuilder = useService('documentEndpointBuilder', false);
   const {
     field,
     domId
   } = props;
   const {
     dataSource,
-    endpointKey,
     maxHeight,
     label
   } = field;
   const errorMessageId = `${domId}-error-message`;
-  const endpoint = useExpressionEvaluation(endpointKey || '');
   const data = useValidDocumentData(dataSource || '');
   const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
     debug: true
@@ -5951,18 +5964,19 @@ function DocumentPreview(props) {
     }), jsx("div", {
       class: `fjs-${type}-document-container`,
       id: domId,
-      children: isValidDocumentEndpoint(endpoint) ? data.map((document, index) => jsx(DocumentRenderer, {
-        documentMetadata: document,
-        endpoint: endpoint,
-        maxHeight: maxHeight,
-        domId: `${domId}-${index}`
-      }, document.documentId)) : null
+      children: data.map((document, index) => {
+        const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl(document)) ?? document.endpoint;
+        return isValidDocumentEndpoint(finalEndpoint) ? jsx(DocumentRenderer, {
+          documentMetadata: document,
+          endpoint: finalEndpoint,
+          maxHeight: maxHeight,
+          domId: `${domId}-${index}`
+        }, document.documentId) : null;
+      })
     }), jsx(Errors, {
       id: errorMessageId,
       errors: getErrors({
-        dataSource,
-        endpoint,
-        endpointKey
+        dataSource
       })
     })]
   });
@@ -5974,43 +5988,27 @@ DocumentPreview.config = {
   name: 'Document preview',
   create: (options = {}) => ({
     label: 'Document preview',
-    endpointKey: DEFAULT_ENDPOINT_KEY,
     ...options
   })
 };
 
 // helpers /////////////////////////////
 
-const DOCUMENT_ID_PLACEHOLDER = '{documentId}';
-const DEFAULT_ENDPOINT_KEY = '=defaultDocumentsEndpointKey';
-
 /**
  * @typedef GetErrorOptions
  * @property {string|undefined} dataSource
- * @property {string|undefined} endpointKey
- * @property {string|null} endpoint
  *
  * @param {GetErrorOptions} options
  * @returns {string[]}
  */
 function getErrors(options) {
   const {
-    dataSource,
-    endpointKey,
-    endpoint
+    dataSource
   } = options;
   let errors = [];
   if (!isString(dataSource) || dataSource.length < 1) {
     errors.push('Document reference is not defined.');
   }
-  if (!isString(endpointKey) || endpointKey.length < 1) {
-    errors.push('Endpoint key is not defined.');
-  }
-  if (endpointKey !== DEFAULT_ENDPOINT_KEY && !URL.canParse(endpoint)) {
-    errors.push(`If you change the endpoint key from "${DEFAULT_ENDPOINT_KEY}", the document preview won't work with Camunda Tasklist and you must provide a valid URL.`);
-  } else if (endpointKey !== DEFAULT_ENDPOINT_KEY && !isValidDocumentEndpoint(endpoint)) {
-    errors.push('Endpoint must contain "{documentId}".');
-  }
   return errors;
 }
 
@@ -6020,7 +6018,7 @@ function getErrors(options) {
  * @returns boolean
  */
 function isValidDocumentEndpoint(endpoint) {
-  return typeof endpoint === 'string' && URL.canParse(endpoint) && endpoint.includes(DOCUMENT_ID_PLACEHOLDER);
+  return typeof endpoint === 'string' && URL.canParse(endpoint);
 }
 
 /**
@@ -6057,9 +6055,11 @@ function PdfRenderer(props) {
     onError,
     errorMessageId
   } = props;
+  /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
   const [pdfObjectUrl, setPdfObjectUrl] = useState(null);
   const [hasError, setHasError] = useState(false);
   useEffect(() => {
+    /** @type {null | string} */
     let objectUrl = null;
     const fetchPdf = async () => {
       try {
@@ -6085,7 +6085,7 @@ function PdfRenderer(props) {
     };
   }, [url, onError]);
   return jsxs(Fragment, {
-    children: [pdfObjectUrl ? jsx("embed", {
+    children: [pdfObjectUrl !== null ? jsx("embed", {
       src: pdfObjectUrl,
       type: "application/pdf",
       class: `fjs-${type}-pdf-viewer`
@@ -6119,11 +6119,6 @@ function DocumentRenderer(props) {
   const [hasError, setHasError] = useState(false);
   const ref = useRef(null);
   const isInViewport = useInViewport(ref);
-  const fullUrl = buildUrl({
-    baseUrl: endpoint,
-    documentId: documentMetadata.documentId,
-    contentHash: documentMetadata.contentHash
-  });
   const singleDocumentContainerClassName = `fjs-${type}-single-document-container`;
   const errorMessageId = `${domId}-error-message`;
   const errorMessage = 'Unable to download document';
@@ -6136,11 +6131,11 @@ function DocumentRenderer(props) {
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
       children: [jsx("img", {
-        src: fullUrl,
+        src: endpoint,
         alt: metadata.fileName,
         class: `fjs-${type}-image`
       }), jsx(DownloadButton, {
-        endpoint: fullUrl,
+        endpoint: endpoint,
         fileName: metadata.fileName,
         onDownloadError: () => {
           setHasError(true);
@@ -6159,7 +6154,7 @@ function DocumentRenderer(props) {
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
       children: jsx(PdfRenderer, {
-        url: fullUrl,
+        url: endpoint,
         fileName: metadata.fileName,
         onError: () => setHasError(true),
         errorMessageId: errorMessageId
@@ -6179,7 +6174,7 @@ function DocumentRenderer(props) {
         errors: [errorMessage]
       }) : null]
     }), jsx(DownloadButton, {
-      endpoint: fullUrl,
+      endpoint: endpoint,
       fileName: metadata.fileName,
       onDownloadError: () => {
         setHasError(true);
@@ -6259,27 +6254,18 @@ function useInViewport(ref) {
 }
 
 /**
- * This solution should be a temporary fix, we should try to remove it via: https://github.com/bpmn-io/form-js/issues/1341
- *
- * @param {Object} options
- * @param {string} options.baseUrl
- * @param {string} options.documentId
- * @param {string} [options.contentHash]
- *
- * @returns {string}
+ * @template T
+ * @param {() => T} fn - Function to execute
+ * @returns {T | null}
  */
-function buildUrl(options) {
-  const {
-    baseUrl,
-    documentId,
-    contentHash
-  } = options;
-  const finalUrl = new URL(baseUrl.replace(DOCUMENT_ID_PLACEHOLDER, documentId));
-  if (contentHash !== undefined) {
-    finalUrl.searchParams.set('contentHash', contentHash);
+const tryCatch = fn => {
+  try {
+    return fn();
+  } catch (error) {
+    console.error(error);
+    return null;
   }
-  return decodeURI(finalUrl.toString());
-}
+};
 
 /**
  * This file must not be changed or exchanged.
@@ -6438,7 +6424,7 @@ class FormFields {
   }
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept', 'endpointKey', 'title'];
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept', 'title'];
 const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url', 'title'];
 
 /**