@bpmn-io/form-js-playground 1.7.0 → 1.7.1

package/dist/form-playground.umd.js

@@ -54112,7 +54112,8 @@
   }
   function Description$2(props) {
     const {
-      description
+      description,
+      id
     } = props;
     const evaluatedDescription = useSingleLineTemplateEvaluation(description || '', {
       debug: true
@@ -54121,6 +54122,7 @@
       return null;
     }
     return e("div", {
+      id: id,
       class: "fjs-form-field-description",
       children: evaluatedDescription
     });
@@ -54149,6 +54151,7 @@
   function Label$3(props) {
     const {
       id,
+      htmlFor,
       label,
       collapseOnEmpty = true,
       required = false
@@ -54157,12 +54160,14 @@
       debug: true
     });
     return e("label", {
-      for: id,
+      id: id,
+      for: htmlFor,
       class: classNames('fjs-form-field-label', {
         'fjs-incollapsible-label': !collapseOnEmpty
       }, props['class']),
       children: [props.children, evaluatedLabel, required && e("span", {
         class: "fjs-asterix",
+        "aria-hidden": true,
         children: "*"
       })]
     });
@@ -54172,7 +54177,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -54196,6 +54200,8 @@
         value: target.checked
       });
     };
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: classNames(formFieldClasses(type$f, {
         errors,
@@ -54205,7 +54211,7 @@
         'fjs-checked': value
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required,
         children: e("input", {
@@ -54218,13 +54224,16 @@
           onChange: onChange,
           onBlur: () => onBlur && onBlur(),
           onFocus: () => onFocus && onFocus(),
-          "aria-describedby": errorMessageId
+          required: required,
+          "aria-invalid": errors.length > 0,
+          "aria-describedby": [descriptionId, errorMessageId].join(' ')
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -54246,7 +54255,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -54293,6 +54301,8 @@
       values,
       onChange: props.onChange
     });
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: classNames(formFieldClasses(type$e, {
         errors,
@@ -54307,7 +54317,7 @@
         const itemDomId = `${domId}-${index}`;
         const isChecked = hasEqualValue(o.value, values);
         return e(Label$3, {
-          id: itemDomId,
+          htmlFor: itemDomId,
           label: o.label,
           class: classNames({
             'fjs-checked': isChecked
@@ -54323,14 +54333,17 @@
             onClick: () => toggleCheckbox(o.value),
             onBlur: onCheckboxBlur,
             onFocus: onCheckboxFocus,
-            "aria-describedby": errorMessageId
+            required: required,
+            "aria-invalid": errors.length > 0,
+            "aria-describedby": [descriptionId, errorMessageId].join(' ')
           })
         });
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -54409,6 +54422,7 @@
       }
     }, [viewerCommands, field, initialValue, initialValidationTrigger, indexes]);
     const onBlur = A$1(() => {
+      const value = get$1(data, valuePath);
       if (initialValidationTrigger) {
         setInitialValidationTrigger(false);
         viewerCommands.updateFieldValidation(field, value, indexes);
@@ -54416,7 +54430,7 @@
       eventBus.fire('formField.blur', {
         formField: field
       });
-    }, [eventBus, field, indexes, value, viewerCommands, initialValidationTrigger]);
+    }, [eventBus, field, indexes, viewerCommands, initialValidationTrigger, data, valuePath]);
     const onFocus = A$1(() => {
       eventBus.fire('formField.focus', {
         formField: field
@@ -54440,7 +54454,6 @@
     }
     const domId = `${prefixId$2(field.id, formId, indexes)}`;
     const fieldErrors = get$1(errors, [field.id, ...Object.values(indexes || {})]) || [];
-    const errorMessageId = errors.length === 0 ? undefined : `${domId}-error-message`;
     return e(Column, {
       field: field,
       class: gridColumnClasses(field),
@@ -54451,7 +54464,6 @@
           ...props,
           disabled: disabled,
           errors: fieldErrors,
-          errorMessageId: errorMessageId,
           domId: domId,
           onChange: disabled || readonly ? noop$1$1 : onChangeIndexed,
           onBlur: disabled || readonly ? noop$1$1 : onBlur,
@@ -54862,7 +54874,7 @@
     return e("div", {
       class: "fjs-datetime-subsection",
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         collapseOnEmpty: collapseLabelOnEmpty,
         required: required
@@ -55144,7 +55156,7 @@
     return e("div", {
       class: "fjs-datetime-subsection",
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         collapseOnEmpty: collapseLabelOnEmpty,
         required: required
@@ -55331,6 +55343,7 @@
       });
     }, []);
     const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId$2(id, formId)}-error-message`;
+    const descriptionId = `${prefixId$2(id, formId)}-description`;
     const datePickerProps = {
       label: dateLabel,
       collapseLabelOnEmpty: !timeLabel,
@@ -55343,7 +55356,7 @@
       date: dateTime.date,
       readonly,
       setDate,
-      'aria-describedby': errorMessageId
+      'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     const timePickerProps = {
       label: timeLabel,
@@ -55358,7 +55371,7 @@
       timeInterval,
       time: dateTime.time,
       setTime,
-      'aria-describedby': errorMessageId
+      'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return e("div", {
       class: formFieldClasses(type$d, {
@@ -55377,6 +55390,7 @@
           ...timePickerProps
         })]
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
         errors: allErrors,
@@ -55478,7 +55492,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: evaluatedLabel
       }), !evaluatedUrl && e(IFramePlaceholder, {
         text: "No content to show."
@@ -56283,7 +56297,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -56421,6 +56434,8 @@
         e.preventDefault();
       }
     };
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$a, {
         errors,
@@ -56428,7 +56443,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), e(TemplatedInputAdorner, {
@@ -56463,7 +56478,9 @@
             autoComplete: "off",
             step: incrementAmount,
             value: displayValue,
-            "aria-describedby": errorMessageId
+            "aria-describedby": [descriptionId, errorMessageId].join(' '),
+            required: required,
+            "aria-invalid": errors.length > 0
           }), e("div", {
             class: classNames('fjs-number-arrow-container', {
               'fjs-disabled': disabled,
@@ -56489,10 +56506,11 @@
           })]
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -56521,7 +56539,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -56567,6 +56584,8 @@
       value,
       onChange: props.onChange
     });
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$9, {
         errors,
@@ -56581,7 +56600,7 @@
         const itemDomId = `${domId}-${index}`;
         const isChecked = isEqual$1(option.value, value);
         return e(Label$3, {
-          id: itemDomId,
+          htmlFor: itemDomId,
           label: option.label,
           class: classNames({
             'fjs-checked': isChecked
@@ -56597,14 +56616,17 @@
             onClick: () => onChange(option.value),
             onBlur: onRadioBlur,
             onFocus: onRadioFocus,
-            "aria-describedby": errorMessageId
+            "aria-describedby": [descriptionId, errorMessageId].join(' '),
+            required: required,
+            "aria-invalid": errors.length > 0
           })
         }, index);
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -56680,7 +56702,7 @@
 
     // whenever we change the underlying value, set the label to it
     y(() => {
-      setFilter(label);
+      setFilter(label || '');
     }, [label]);
     const filteredOptions = d(() => {
       if (loadState !== LOAD_STATES.LOADED) {
@@ -56760,7 +56782,7 @@
     }, [onFocus]);
     const onInputBlur = A$1(() => {
       setIsDropdownExpanded(false);
-      setFilter(label);
+      setFilter(label || '');
       onBlur && onBlur();
     }, [onBlur, label]);
     return e(d$1, {
@@ -56855,6 +56877,9 @@
     }, [disabled, isDropdownExpanded, loadState, readonly, value]);
     const onMouseDown = A$1(e => {
       const input = inputRef.current;
+      if (disabled || !input) {
+        return;
+      }
       setIsDropdownExpanded(!isDropdownExpanded);
       if (isDropdownExpanded) {
         input.blur();
@@ -56862,7 +56887,7 @@
         input.focus();
       }
       e.preventDefault();
-    }, [isDropdownExpanded]);
+    }, [disabled, isDropdownExpanded]);
     const initialFocusIndex = d(() => value && findIndex$1(options, o => o.value === value) || 0, [options, value]);
     const onInputFocus = A$1(() => {
       if (!readonly) {
@@ -56933,7 +56958,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -56951,6 +56975,8 @@
     const {
       required
     } = validate;
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     const selectProps = {
       domId,
       disabled,
@@ -56961,7 +56987,9 @@
       value,
       onChange,
       readonly,
-      'aria-describedby': errorMessageId
+      required,
+      'aria-invalid': errors.length > 0,
+      'aria-describedby': [descriptionId, errorMessageId].join(' ')
     };
     return e("div", {
       class: formFieldClasses(type$8, {
@@ -56976,7 +57004,7 @@
         }
       },
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), searchable ? e(SearchableSelect, {
@@ -56984,10 +57012,11 @@
       }) : e(SimpleSelect, {
         ...selectProps
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -57115,7 +57144,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       onFocus,
       domId,
       onBlur,
@@ -57251,6 +57279,8 @@
       inputRef.current.focus();
     };
     const shouldDisplayDropdown = d(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       ref: focusScopeRef,
       class: formFieldClasses(type$5, {
@@ -57267,7 +57297,7 @@
       children: [e(Label$3, {
         label: label,
         required: required,
-        id: domId
+        htmlFor: domId
       }), !disabled && !readonly && !!values.length && e(SkipLink, {
         className: "fjs-taglist-skip-link",
         label: "Skip to search",
@@ -57315,7 +57345,9 @@
           onMouseDown: () => setIsEscapeClose(false),
           onFocus: onInputFocus,
           onBlur: onInputBlur,
-          "aria-describedby": errorMessageId
+          "aria-describedby": [descriptionId, errorMessageId].join(' '),
+          required: required,
+          "aria-invalid": errors.length > 0
         })]
       }), e("div", {
         class: "fjs-taglist-anchor",
@@ -57327,10 +57359,11 @@
           listenerElement: inputRef.current
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -57643,7 +57676,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -57679,6 +57711,8 @@
     const onInputFocus = () => {
       onFocus && onFocus();
     };
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$2, {
         errors,
@@ -57686,7 +57720,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), e(TemplatedInputAdorner, {
@@ -57704,13 +57738,16 @@
           onFocus: onInputFocus,
           type: "text",
           value: value,
-          "aria-describedby": errorMessageId
+          "aria-describedby": [descriptionId, errorMessageId].join(' '),
+          required: required,
+          "aria-invalid": errors.length > 0
         })
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -57742,7 +57779,6 @@
     const {
       disabled,
       errors = [],
-      errorMessageId,
       domId,
       onBlur,
       onFocus,
@@ -57786,6 +57822,8 @@
     y(() => {
       autoSizeTextarea(textareaRef.current);
     }, []);
+    const descriptionId = `${domId}-description`;
+    const errorMessageId = `${domId}-error-message`;
     return e("div", {
       class: formFieldClasses(type$1, {
         errors,
@@ -57793,7 +57831,7 @@
         readonly
       }),
       children: [e(Label$3, {
-        id: domId,
+        htmlFor: domId,
         label: label,
         required: required
       }), e("textarea", {
@@ -57806,12 +57844,15 @@
         onFocus: onInputFocus,
         value: value,
         ref: textareaRef,
-        "aria-describedby": errorMessageId
+        "aria-describedby": [descriptionId, errorMessageId].join(' '),
+        required: required,
+        "aria-invalid": errors.length > 0
       }), e(Description$2, {
+        id: descriptionId,
         description: description
       }), e(Errors, {
-        errors: errors,
-        id: errorMessageId
+        id: errorMessageId,
+        errors: errors
       })]
     });
   }
@@ -58027,7 +58068,7 @@
     return e("div", {
       class: formFieldClasses(type),
       children: [e(Label$3, {
-        id: prefixId$2(id),
+        htmlFor: prefixId$2(id),
         label: label
       }), e("div", {
         class: classNames('fjs-table-middle-container', {
@@ -58423,7 +58464,7 @@
     }
   }
   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'];
-  const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
+  const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
   /**
    * @typedef { import('../types').Schema } Schema
@@ -59452,47 +59493,17 @@
       };
       const parentExpressionContextInfo = F$1(LocalExpressionContext);
       return e(d$1, {
-        children: displayValues.map((value, index) => {
-          const elementProps = d(() => ({
-            ...restProps,
-            indexes: {
-              ...(indexes || {}),
-              [repeaterField.id]: index
-            }
-          }), [index]);
-          const localExpressionContextInfo = d(() => ({
-            data: parentExpressionContextInfo.data,
-            this: value,
-            parent: buildExpressionContext(parentExpressionContextInfo),
-            i: [...parentExpressionContextInfo.i, index + 1]
-          }), [index, value]);
-          return !showRemove ? e(LocalExpressionContext.Provider, {
-            value: localExpressionContextInfo,
-            children: e(RowsRenderer, {
-              ...elementProps
-            })
-          }) : e("div", {
-            class: "fjs-repeat-row-container",
-            children: [e("div", {
-              class: "fjs-repeat-row-rows",
-              children: e(LocalExpressionContext.Provider, {
-                value: localExpressionContextInfo,
-                children: e(RowsRenderer, {
-                  ...elementProps
-                })
-              })
-            }), e("button", {
-              class: "fjs-repeat-row-remove",
-              type: "button",
-              "aria-label": `Remove list item ${index + 1}`,
-              onClick: () => onDeleteItem(index),
-              children: e("div", {
-                class: "fjs-repeat-row-remove-icon-container",
-                children: e(DeleteSvg, {})
-              })
-            })]
-          });
-        })
+        children: displayValues.map((value, index) => e(RepetitionScaffold, {
+          index: index,
+          value: value,
+          parentExpressionContextInfo: parentExpressionContextInfo,
+          repeaterField: repeaterField,
+          RowsRenderer: RowsRenderer,
+          indexes: indexes,
+          onDeleteItem: onDeleteItem,
+          showRemove: showRemove,
+          ...restProps
+        }, index))
       });
     }
     RepeatFooter(props) {
@@ -59584,6 +59595,73 @@
       return nonCollapsedItems ? nonCollapsedItems : DEFAULT_NON_COLLAPSED_ITEMS;
     }
   }
+
+  /**
+   * Individual repetition of a repeated field and context scaffolding.
+   *
+   * @param {Object} props
+   * @param {number} props.index
+   * @param {Object} props.value
+   * @param {Object} props.parentExpressionContextInfo
+   * @param {Object} props.repeaterField
+   * @param {Function} props.RowsRenderer
+   * @param {Object} props.indexes
+   * @param {Function} props.onDeleteItem
+   * @param {boolean} props.showRemove
+   */
+
+  const RepetitionScaffold = props => {
+    const {
+      index,
+      value,
+      parentExpressionContextInfo,
+      repeaterField,
+      RowsRenderer,
+      indexes,
+      onDeleteItem,
+      showRemove,
+      ...restProps
+    } = props;
+    const elementProps = d(() => ({
+      ...restProps,
+      indexes: {
+        ...(indexes || {}),
+        [repeaterField.id]: index
+      }
+    }), [index, indexes, repeaterField.id, restProps]);
+    const localExpressionContextInfo = d(() => ({
+      data: parentExpressionContextInfo.data,
+      this: value,
+      parent: buildExpressionContext(parentExpressionContextInfo),
+      i: [...parentExpressionContextInfo.i, index + 1]
+    }), [index, parentExpressionContextInfo, value]);
+    return !showRemove ? e(LocalExpressionContext.Provider, {
+      value: localExpressionContextInfo,
+      children: e(RowsRenderer, {
+        ...elementProps
+      })
+    }) : e("div", {
+      class: "fjs-repeat-row-container",
+      children: [e("div", {
+        class: "fjs-repeat-row-rows",
+        children: e(LocalExpressionContext.Provider, {
+          value: localExpressionContextInfo,
+          children: e(RowsRenderer, {
+            ...elementProps
+          })
+        })
+      }), e("button", {
+        class: "fjs-repeat-row-remove",
+        type: "button",
+        "aria-label": `Remove list item ${index + 1}`,
+        onClick: () => onDeleteItem(index),
+        children: e("div", {
+          class: "fjs-repeat-row-remove-icon-container",
+          children: e(DeleteSvg, {})
+        })
+      })]
+    });
+  };
   RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
   const RepeatRenderModule$1 = {
     __init__: ['repeatRenderManager'],
@@ -76540,11 +76618,10 @@
       description,
       editField,
       field,
-      id,
-      defaultValue = 60 // default value for spacer
+      id
     } = props;
     const debounce = useService('debounce');
-    const getValue = e => get(field, ['height'], defaultValue);
+    const getValue = e => get(field, ['height'], null);
     const setValue = (value, error) => {
       if (error) {
         return;
@@ -76571,7 +76648,7 @@
     */
   const validate$7 = value => {
     if (typeof value !== 'number') {
-      return null;
+      return 'A number is required.';
     }
     if (!Number.isInteger(value)) {
       return 'Should be an integer.';
@@ -76583,7 +76660,6 @@
   function IFrameHeightEntry(props) {
     return [...HeightEntry({
       ...props,
-      defaultValue: 300,
       description: 'Height of the container in pixels.',
       isDefaultVisible: field => field.type === 'iframe'
     })];
@@ -76816,7 +76892,7 @@
 
   const description = e(d$1, {
     children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. ", e("a", {
-      href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
+      href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-html/",
       target: "_blank",
       children: "Learn more"
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -44,8 +44,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^1.7.0",
-    "@bpmn-io/form-js-viewer": "^1.7.0",
+    "@bpmn-io/form-js-editor": "^1.7.1",
+    "@bpmn-io/form-js-viewer": "^1.7.1",
     "@codemirror/autocomplete": "^6.12.0",
     "@codemirror/commands": "^6.1.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -70,5 +70,5 @@
     "rollup-plugin-css-only": "^4.0.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "8e289cb810b1fe7bea10b625263a67d9502d47bc"
+  "gitHead": "f6ffe2569d2d2f7fe6214ad5bb00b76f1d74ef1a"
 }