@bpmn-io/form-js-viewer 1.13.1 → 1.14.0

package/dist/index.es.js

@@ -1118,9 +1118,6 @@ function _isElementScrollable(el) {
   return (overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
 }
 
-const EMPTY_OBJECT = {};
-const EMPTY_ARRAY$2 = [];
-
 /**
  * Custom hook to scroll an element within a scrollable container.
  *
@@ -1134,8 +1131,8 @@ const EMPTY_ARRAY$2 = [];
  * @param {Array} [flagRefs] - An array of refs that are used as flags to control when to scroll.
  */
 function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
-  const _scrollOptions = scrollOptions || EMPTY_OBJECT;
-  const _flagRefs = flagRefs || EMPTY_ARRAY$2;
+  const _scrollOptions = scrollOptions;
+  const _flagRefs = flagRefs;
   useEffect(() => {
     // return early if flags are not raised, or component is not mounted
     if (some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -1523,9 +1520,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 +1763,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 +1785,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 +2268,7 @@ function RowsRenderer(props) {
             indexes: indexes
           });
         })
-      });
+      }, row.id);
     }), ' ']
   });
 }
@@ -2682,16 +2678,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 +4754,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 +4763,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 +5283,7 @@ function Textarea(props) {
     }), jsx("textarea", {
       class: "fjs-textarea",
       disabled: disabled,
-      readonly: readonly,
+      readOnly: readonly,
       id: domId,
       onInput: onInputChange,
       onBlur: onInputBlur,
@@ -5434,7 +5430,7 @@ function Table(props) {
     key
   }) => key);
   const evaluatedDataSource = useExpressionEvaluation(dataSource);
-  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource.filter(i => i !== undefined) : [];
+  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource.filter(entry => !isNil(entry) || typeof entry !== 'object') : [];
   const sortedData = sortBy === null ? data : sortByColumn(data, sortBy.key, sortBy.direction);
 
   /** @type {unknown[][]} */
@@ -5444,12 +5440,6 @@ function Table(props) {
   useEffect(() => {
     setCurrentPage(0);
   }, [rowCount, sortBy]);
-  const serializeCellData = cellData => {
-    if (cellData !== null && typeof cellData === 'object') {
-      return JSON.stringify(cellData);
-    }
-    return cellData;
-  };
 
   /** @param {string} key */
   function toggleSortBy(key) {
@@ -5720,6 +5710,17 @@ function getHeaderAriaLabel(sortBy, key, label) {
   return `Click to sort by ${label} ascending`;
 }
 
+/**
+ * @param {unknown} cellData
+ * @returns string
+ */
+function serializeCellData(cellData) {
+  if (cellData !== null && typeof cellData === 'object') {
+    return JSON.stringify(cellData);
+  }
+  return `${cellData || ''}`;
+}
+
 const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
 
 const type$1 = 'filepicker';
@@ -5739,6 +5740,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
@@ -5756,13 +5759,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, {
@@ -5818,7 +5821,7 @@ function FilePicker(props) {
     children: [jsx(Label, {
       htmlFor: domId,
       label: label,
-      required: required
+      required: validate.required
     }), jsx("input", {
       type: "file",
       className: "fjs-hidden",
@@ -5828,13 +5831,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();
@@ -5900,6 +5904,7 @@ const type = 'documentPreview';
 /**
  * @typedef DocumentMetadata
  * @property {string} documentId
+ * @property {string} contentHash
  * @property {Object} metadata
  * @property {string|undefined} [metadata.contentType]
  * @property {string} metadata.fileName
@@ -6021,7 +6026,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;
 }
 
 /**
@@ -6059,7 +6064,11 @@ function DocumentRenderer(props) {
   const [hasError, setHasError] = useState(false);
   const ref = useRef(null);
   const isInViewport = useInViewport(ref);
-  const fullUrl = endpoint.replace(DOCUMENT_ID_PLACEHOLDER, documentMetadata.documentId);
+  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';
@@ -6169,12 +6178,16 @@ function DownloadButton(props) {
 
 /**
  *
- * @param {import("preact").RefObject<HTMLElement>} ref
+ * @param {import("preact").RefObject<HTMLElement|null>} ref
  * @returns boolean
  */
 function useInViewport(ref) {
   const [isInViewport, setIsInViewport] = useState(false);
   useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
         setIsInViewport(true);
@@ -6182,18 +6195,39 @@ function useInViewport(ref) {
     }, {
       threshold: 0
     });
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
+    observer.observe(container);
     return () => {
-      if (ref.current) {
-        observer.unobserve(ref.current);
+      if (container) {
+        observer.unobserve(container);
       }
     };
   }, [ref]);
   return isInViewport;
 }
 
+/**
+ * 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}
+ */
+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);
+  }
+  return decodeURI(finalUrl.toString());
+}
+
 /**
  * This file must not be changed or exchanged.
  *
@@ -6235,14 +6269,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"
         }), "."]
       })]
@@ -6256,7 +6290,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)",
@@ -7461,7 +7495,7 @@ class RepeatRenderManager {
           showRemove: showRemove,
           ...restProps
         })
-      }))
+      }, itemIndex))
     });
   }
   RepeatFooter(props) {