@bpmn-io/form-js-viewer 1.13.2 → 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,
@@ -5744,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
@@ -5761,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, {
@@ -5823,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",
@@ -5833,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();
@@ -6027,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;
 }
 
 /**
@@ -6270,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"
         }), "."]
       })]
@@ -6291,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)",
@@ -7496,7 +7495,7 @@ class RepeatRenderManager {
           showRemove: showRemove,
           ...restProps
         })
-      }))
+      }, itemIndex))
     });
   }
   RepeatFooter(props) {