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

package/dist/index.cjs

@@ -1138,9 +1138,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.
  *
@@ -1154,8 +1151,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;
   hooks.useEffect(() => {
     // return early if flags are not raised, or component is not mounted
     if (minDash.some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -1543,9 +1540,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,
@@ -1787,10 +1783,10 @@ function Errors(props) {
     "aria-live": "polite",
     id: id,
     children: jsxRuntime.jsx("ul", {
-      children: errors.map(error => {
+      children: errors.map((error, index) => {
         return jsxRuntime.jsx("li", {
           children: error
-        });
+        }, index);
       })
     })
   });
@@ -1809,7 +1805,7 @@ function Label(props) {
   });
   return jsxRuntime.jsxs("label", {
     id: id,
-    for: htmlFor,
+    htmlFor: htmlFor,
     class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
@@ -2292,7 +2288,7 @@ function RowsRenderer(props) {
             indexes: indexes
           });
         })
-      });
+      }, row.id);
     }), ' ']
   });
 }
@@ -2702,16 +2698,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 jsxRuntime.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 && jsxRuntime.jsx("div", {
       class: "fjs-dropdownlist-empty",
       children: emptyListMessage
@@ -4778,7 +4774,7 @@ function Taglist(props) {
       }),
       children: [loadState === LOAD_STATES.LOADED && jsxRuntime.jsx("div", {
         class: "fjs-taglist-tags",
-        children: values.map(v => {
+        children: values.map(entry => {
           return jsxRuntime.jsxs("div", {
             class: classNames('fjs-taglist-tag', {
               'fjs-disabled': disabled,
@@ -4787,17 +4783,17 @@ function Taglist(props) {
             onMouseDown: e => e.preventDefault(),
             children: [jsxRuntime.jsx("span", {
               class: "fjs-taglist-tag-label",
-              children: getLabelCorrelation(v)
+              children: getLabelCorrelation(entry)
             }), !disabled && !readonly && jsxRuntime.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: jsxRuntime.jsx(SvgXMark, {})
             })]
-          });
+          }, entry);
         })
       }), jsxRuntime.jsx("input", {
         disabled: disabled,
@@ -5307,7 +5303,7 @@ function Textarea(props) {
     }), jsxRuntime.jsx("textarea", {
       class: "fjs-textarea",
       disabled: disabled,
-      readonly: readonly,
+      readOnly: readonly,
       id: domId,
       onInput: onInputChange,
       onBlur: onInputBlur,
@@ -5764,6 +5760,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
@@ -5781,13 +5779,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, {
@@ -5843,7 +5841,7 @@ function FilePicker(props) {
     children: [jsxRuntime.jsx(Label, {
       htmlFor: domId,
       label: label,
-      required: required
+      required: validate.required
     }), jsxRuntime.jsx("input", {
       type: "file",
       className: "fjs-hidden",
@@ -5853,13 +5851,14 @@ function FilePicker(props) {
       disabled: isInputDisabled,
       multiple: evaluatedMultiple || undefined,
       accept: evaluatedAccept || undefined,
-      onChange: onFileChange
+      onChange: onFileChange,
+      required: validate.required
     }), jsxRuntime.jsxs("div", {
       className: "fjs-filepicker-container",
       children: [jsxRuntime.jsx("button", {
         type: "button",
         disabled: isInputDisabled,
-        readonly: readonly,
+        readOnly: readonly,
         className: "fjs-button fjs-filepicker-button",
         onClick: () => {
           fileInputRef.current.click();
@@ -6047,7 +6046,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;
 }
 
 /**
@@ -6290,14 +6289,14 @@ function Lightbox(props) {
       children: [jsxRuntime.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: jsxRuntime.jsx(Logo, {})
       }), jsxRuntime.jsxs("span", {
         children: ["Web-based tooling for BPMN, DMN, and forms powered by", ' ', jsxRuntime.jsx("a", {
           href: "https://bpmn.io",
           target: "_blank",
-          rel: "noopener",
+          rel: "noopener noreferrer",
           children: "bpmn.io"
         }), "."]
       })]
@@ -6311,7 +6310,7 @@ function Link(props) {
     children: jsxRuntime.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)",
@@ -7516,7 +7515,7 @@ class RepeatRenderManager {
           showRemove: showRemove,
           ...restProps
         })
-      }))
+      }, itemIndex))
     });
   }
   RepeatFooter(props) {