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

package/dist/index.es.js

@@ -907,7 +907,6 @@ function useDeepCompareMemoize(value) {
  * @enum { String }
  */
 const LOAD_STATES = {
-  LOADING: 'loading',
   LOADED: 'loaded',
   ERROR: 'error'
 };
@@ -1523,9 +1522,8 @@ function _getZeroPaddedString(time) {
   return time.toString().padStart(2, '0');
 }
 
-const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
-const ALLOWED_IFRAME_SRC_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
-
+const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i;
+const ALLOWED_IFRAME_SRC_PATTERN = /^(https):\/\/*/i;
 function sanitizeDateTimePickerValue(options) {
   const {
     formField,
@@ -1767,10 +1765,10 @@ function Errors(props) {
     "aria-live": "polite",
     id: id,
     children: jsx("ul", {
-      children: errors.map(error => {
+      children: errors.map((error, index) => {
         return jsx("li", {
           children: error
-        });
+        }, index);
       })
     })
   });
@@ -1789,7 +1787,7 @@ function Label(props) {
   });
   return jsxs("label", {
     id: id,
-    for: htmlFor,
+    htmlFor: htmlFor,
     class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
@@ -2272,7 +2270,7 @@ function RowsRenderer(props) {
             indexes: indexes
           });
         })
-      });
+      }, row.id);
     }), ' ']
   });
 }
@@ -2682,16 +2680,16 @@ function DropdownList(props) {
       maxHeight: height,
       scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
     },
-    children: [values.length > 0 && values.map((v, i) => {
+    children: [values.length > 0 && values.map((entry, index) => {
       return jsx("div", {
         class: classNames('fjs-dropdownlist-item', {
-          focused: focusedValueIndex === i
+          focused: focusedValueIndex === index
         }),
-        onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
-        onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-        onMouseDown: e => onValueSelected(v),
-        children: getLabel(v)
-      });
+        onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, index),
+        onMouseEnter: mouseControl ? () => setFocusedValueIndex(index) : undefined,
+        onMouseDown: e => onValueSelected(entry),
+        children: getLabel(entry)
+      }, entry.value);
     }), !values.length && jsx("div", {
       class: "fjs-dropdownlist-empty",
       children: emptyListMessage
@@ -4758,7 +4756,7 @@ function Taglist(props) {
       }),
       children: [loadState === LOAD_STATES.LOADED && jsx("div", {
         class: "fjs-taglist-tags",
-        children: values.map(v => {
+        children: values.map(entry => {
           return jsxs("div", {
             class: classNames('fjs-taglist-tag', {
               'fjs-disabled': disabled,
@@ -4767,17 +4765,17 @@ function Taglist(props) {
             onMouseDown: e => e.preventDefault(),
             children: [jsx("span", {
               class: "fjs-taglist-tag-label",
-              children: getLabelCorrelation(v)
+              children: getLabelCorrelation(entry)
             }), !disabled && !readonly && jsx("button", {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
               onFocus: onElementFocus,
               onBlur: onElementBlur,
-              onClick: event => onTagRemoveClick(event, v),
+              onClick: event => onTagRemoveClick(event, entry),
               children: jsx(SvgXMark, {})
             })]
-          });
+          }, entry);
         })
       }), jsx("input", {
         disabled: disabled,
@@ -5287,7 +5285,7 @@ function Textarea(props) {
     }), jsx("textarea", {
       class: "fjs-textarea",
       disabled: disabled,
-      readonly: readonly,
+      readOnly: readonly,
       id: domId,
       onInput: onInputChange,
       onBlur: onInputBlur,
@@ -5744,6 +5742,8 @@ const EMPTY_ARRAY$1 = [];
  * @property {string} [field.label]
  * @property {string} [field.accept]
  * @property {string|boolean} [field.multiple]
+ * @property {Object} [field.validate]
+ * @property {boolean} [field.validate.required]
  * @property {string} [value]
  *
  * @param {Props} props
@@ -5761,13 +5761,13 @@ function FilePicker(props) {
     errors = [],
     disabled,
     readonly,
-    required,
     value: filesKey = ''
   } = props;
   const {
     label,
     multiple = false,
-    accept = ''
+    accept = '',
+    validate = {}
   } = field;
   /** @type {string} */
   const evaluatedAccept = useSingleLineTemplateEvaluation(accept, {
@@ -5823,7 +5823,7 @@ function FilePicker(props) {
     children: [jsx(Label, {
       htmlFor: domId,
       label: label,
-      required: required
+      required: validate.required
     }), jsx("input", {
       type: "file",
       className: "fjs-hidden",
@@ -5833,13 +5833,14 @@ function FilePicker(props) {
       disabled: isInputDisabled,
       multiple: evaluatedMultiple || undefined,
       accept: evaluatedAccept || undefined,
-      onChange: onFileChange
+      onChange: onFileChange,
+      required: validate.required
     }), jsxs("div", {
       className: "fjs-filepicker-container",
       children: [jsx("button", {
         type: "button",
         disabled: isInputDisabled,
-        readonly: readonly,
+        readOnly: readonly,
         className: "fjs-button fjs-filepicker-button",
         onClick: () => {
           fileInputRef.current.click();
@@ -6027,7 +6028,7 @@ function isValidDocumentEndpoint(endpoint) {
  * @returns {metadata is DocumentMetadata}
  */
 function isValidDocument(document) {
-  return typeof document === 'object' && 'documentId' in document && 'metadata' in document && typeof document.metadata === 'object' && 'fileName' in document.metadata;
+  return typeof document === 'object' && document !== null && 'documentId' in document && 'metadata' in document && typeof document.metadata === 'object' && 'fileName' in document.metadata;
 }
 
 /**
@@ -6042,6 +6043,59 @@ function useValidDocumentData(dataSource) {
   return data.filter(isValidDocument);
 }
 
+/**
+ * @param {Object} props
+ * @param {string} props.url
+ * @param {string} props.fileName
+ * @param {Function} props.onError
+ * @param {string} props.errorMessageId
+ * @returns {import("preact").JSX.Element}
+ */
+function PdfRenderer(props) {
+  const {
+    url,
+    onError,
+    errorMessageId
+  } = props;
+  const [pdfObjectUrl, setPdfObjectUrl] = useState(null);
+  const [hasError, setHasError] = useState(false);
+  useEffect(() => {
+    let objectUrl = null;
+    const fetchPdf = async () => {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          setHasError(true);
+          onError();
+          return;
+        }
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        setPdfObjectUrl(objectUrl);
+      } catch {
+        setHasError(true);
+        onError();
+      }
+    };
+    fetchPdf();
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [url, onError]);
+  return jsxs(Fragment, {
+    children: [pdfObjectUrl ? jsx("embed", {
+      src: pdfObjectUrl,
+      type: "application/pdf",
+      class: `fjs-${type}-pdf-viewer`
+    }) : null, hasError ? jsx(Errors, {
+      id: errorMessageId,
+      errors: ['Unable to download document']
+    }) : null]
+  });
+}
+
 /**
  *
  * @param {Object} props
@@ -6098,20 +6152,18 @@ function DocumentRenderer(props) {
     });
   }
   if (isContentTypePresent && metadata.contentType.toLowerCase() === 'application/pdf' && isInViewport) {
-    return jsxs("div", {
+    return jsx("div", {
       class: singleDocumentContainerClassName,
       style: {
         maxHeight
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
-      children: [jsx("embed", {
-        src: fullUrl,
-        type: "application/pdf",
-        class: `fjs-${type}-pdf-viewer`
-      }), hasError ? jsx(Errors, {
-        id: errorMessageId,
-        errors: [errorMessage]
-      }) : null]
+      children: jsx(PdfRenderer, {
+        url: fullUrl,
+        fileName: metadata.fileName,
+        onError: () => setHasError(true),
+        errorMessageId: errorMessageId
+      })
     });
   }
   return jsxs("div", {
@@ -6270,14 +6322,14 @@ function Lightbox(props) {
       children: [jsx("a", {
         href: "https://bpmn.io",
         target: "_blank",
-        rel: "noopener",
+        rel: "noopener noreferrer",
         style: "margin: 15px 20px 15px 10px; align-self: center; color: var(--cds-icon-primary, #404040)",
         children: jsx(Logo, {})
       }), jsxs("span", {
         children: ["Web-based tooling for BPMN, DMN, and forms powered by", ' ', jsx("a", {
           href: "https://bpmn.io",
           target: "_blank",
-          rel: "noopener",
+          rel: "noopener noreferrer",
           children: "bpmn.io"
         }), "."]
       })]
@@ -6291,7 +6343,7 @@ function Link(props) {
     children: jsx("a", {
       href: "https://bpmn.io",
       target: "_blank",
-      rel: "noopener",
+      rel: "noopener noreferrer",
       class: "fjs-powered-by-link",
       title: "Powered by bpmn.io",
       style: "color: var(--cds-text-primary, #404040)",
@@ -7496,7 +7548,7 @@ class RepeatRenderManager {
           showRemove: showRemove,
           ...restProps
         })
-      }))
+      }, itemIndex))
     });
   }
   RepeatFooter(props) {