@bpmn-io/form-js-viewer 0.15.0-alpha.0 → 1.0.0-alpha.0

package/dist/index.cjs

@@ -1342,7 +1342,7 @@ function createFormContainer(prefix = 'fjs') {
   return container;
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+const EXPRESSION_PROPERTIES = ['alt', 'source', 'readonly', 'text'];
 const TEMPLATE_PROPERTIES = ['text'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
@@ -1590,14 +1590,16 @@ var importModule = {
 
 function formFieldClasses(type, {
   errors = [],
-  disabled = false
+  disabled = false,
+  readonly = false
 } = {}) {
   if (!type) {
     throw new Error('type required');
   }
   return classNames('fjs-form-field', `fjs-form-field-${type}`, {
     'fjs-has-errors': errors.length > 0,
-    'fjs-disabled': disabled
+    'fjs-disabled': disabled,
+    'fjs-readonly': readonly
   });
 }
 function gridColumnClasses(formField) {
@@ -1755,6 +1757,7 @@ function Checkbox(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = false
   } = props;
   const {
@@ -1781,7 +1784,8 @@ function Checkbox(props) {
   return jsxRuntime.jsxs("div", {
     class: classNames(formFieldClasses(type$a, {
       errors,
-      disabled
+      disabled,
+      readonly
     }), {
       'fjs-checked': value
     }),
@@ -1793,6 +1797,7 @@ function Checkbox(props) {
         checked: value,
         class: "fjs-input",
         disabled: disabled,
+        readOnly: readonly,
         id: prefixId(id, formId),
         type: "checkbox",
         onChange: onChange,
@@ -2154,6 +2159,7 @@ function Checklist(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = []
   } = props;
   const {
@@ -2188,7 +2194,8 @@ function Checklist(props) {
   return jsxRuntime.jsxs("div", {
     class: classNames(formFieldClasses(type$9, {
       errors,
-      disabled
+      disabled,
+      readonly
     })),
     children: [jsxRuntime.jsx(Label, {
       label: label,
@@ -2205,6 +2212,7 @@ function Checklist(props) {
           checked: value.includes(v.value),
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           id: prefixId(`${id}-${index}`, formId),
           type: "checkbox",
           onClick: () => toggleCheckbox(v.value),
@@ -2313,6 +2321,33 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
 
+/**
+ * Retrieve readonly value of a form field, given it can be an
+ * expression optionally or configured globally.
+ *
+ * @typedef { import('../../types').FormProperties } FormProperties
+ *
+ * @param {any} formField
+ * @param {FormProperties} properties
+ *
+ * @returns {boolean}
+ */
+function useReadonly(formField, properties = {}) {
+  const expressionLanguage = useService('expressionLanguage');
+  const conditionChecker = useService('conditionChecker', false);
+  const filteredData = useFilteredFormData();
+  const {
+    readonly
+  } = formField;
+  if (properties.readOnly) {
+    return true;
+  }
+  if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
+    return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
+  }
+  return readonly || false;
+}
+
 /**
  * Template a string reactively based on form data. If the string is not a template, it is returned as is.
  * Memoised to minimize re-renders
@@ -2359,7 +2394,10 @@ function FormField(props) {
   }
   const value = minDash.get(data, field._path);
   const fieldErrors = findErrors(errors, field._path);
-  const disabled = properties.readOnly || field.disabled || false;
+  const readonly = useReadonly(field, properties);
+
+  // add precedence: global readonly > form field disabled
+  const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
   if (hidden) {
     return jsxRuntime.jsx(Empty, {});
@@ -2374,7 +2412,8 @@ function FormField(props) {
         ...props,
         disabled: disabled,
         errors: fieldErrors,
-        onChange: disabled ? noop$1 : onChange,
+        onChange: disabled || readonly ? noop$1 : onChange,
+        readonly: readonly,
         value: value
       })
     })
@@ -2461,12 +2500,14 @@ function InputAdorner(props) {
     inputRef,
     children,
     disabled,
+    readonly,
     hasErrors
   } = props;
   const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
   return jsxRuntime.jsxs("div", {
     class: classNames('fjs-input-group', {
-      'fjs-disabled': disabled
+      'fjs-disabled': disabled,
+      'fjs-readonly': readonly
     }, {
       'hasErrors': hasErrors
     }),
@@ -2499,6 +2540,7 @@ function Datepicker(props) {
     disabled,
     disallowPassedDates,
     date,
+    readonly,
     setDate
   } = props;
   const dateInputRef = hooks.useRef();
@@ -2578,9 +2620,9 @@ function Datepicker(props) {
     }
   }, [flatpickrInstance, isInputDirty]);
   const onInputFocus = hooks.useCallback(e => {
-    if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget)) return;
+    if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget) || readonly) return;
     flatpickrInstance.open();
-  }, [flatpickrInstance]);
+  }, [flatpickrInstance, readonly]);
 
   // simulate an enter press on blur to make sure the date value is submitted in all scenarios
   const onInputBlur = hooks.useCallback(e => {
@@ -2599,6 +2641,7 @@ function Datepicker(props) {
     }), jsxRuntime.jsx(InputAdorner, {
       pre: jsxRuntime.jsx(CalendarIcon, {}),
       disabled: disabled,
+      readonly: readonly,
       rootRef: focusScopeRef,
       inputRef: dateInputRef,
       children: jsxRuntime.jsx("div", {
@@ -2612,11 +2655,12 @@ function Datepicker(props) {
           id: fullId,
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           placeholder: "mm/dd/yyyy",
           autoComplete: "off",
           onFocus: onInputFocus,
           onKeyDown: onInputKeyDown,
-          onMouseDown: () => !flatpickrInstance.isOpen && flatpickrInstance.open(),
+          onMouseDown: () => !flatpickrInstance.isOpen && !readonly && flatpickrInstance.open(),
           onBlur: onInputBlur,
           onInput: () => setIsInputDirty(true),
           "data-input": true,
@@ -2750,6 +2794,7 @@ function Timepicker(props) {
     formId,
     required,
     disabled,
+    readonly,
     use24h = false,
     timeInterval,
     time,
@@ -2855,6 +2900,7 @@ function Timepicker(props) {
       pre: jsxRuntime.jsx(ClockIcon, {}),
       inputRef: timeInputRef,
       disabled: disabled,
+      readonly: readonly,
       children: jsxRuntime.jsxs("div", {
         class: "fjs-timepicker fjs-timepicker-anchor",
         children: [jsxRuntime.jsx("input", {
@@ -2864,10 +2910,11 @@ function Timepicker(props) {
           class: "fjs-input",
           value: rawValue,
           disabled: disabled,
+          readOnly: readonly,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
           autoComplete: "off",
-          onFocus: () => useDropdown && setDropdownIsOpen(true),
-          onClick: () => useDropdown && setDropdownIsOpen(true)
+          onFocus: () => !readonly && useDropdown && setDropdownIsOpen(true),
+          onClick: () => !readonly && useDropdown && setDropdownIsOpen(true)
 
           // @ts-ignore
           ,
@@ -2898,6 +2945,7 @@ function Datetime(props) {
     errors = [],
     field,
     onChange,
+    readonly,
     value = ''
   } = props;
   const {
@@ -3024,6 +3072,7 @@ function Datetime(props) {
     disabled,
     disallowPassedDates,
     date: dateTime.date,
+    readonly,
     setDate,
     'aria-describedby': errorMessageId
   };
@@ -3034,6 +3083,7 @@ function Datetime(props) {
     formId,
     required,
     disabled,
+    readonly,
     use24h,
     timeInterval,
     time: dateTime.time,
@@ -3043,7 +3093,8 @@ function Datetime(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$8, {
       errors: allErrors,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsxRuntime.jsxs("div", {
       class: classNames('fjs-vertical-group'),
@@ -3447,6 +3498,7 @@ function Numberfield(props) {
     errors = [],
     field,
     value,
+    readonly,
     onChange
   } = props;
   const {
@@ -3519,6 +3571,9 @@ function Numberfield(props) {
     });
   }, [field, onChange, serializeToString]);
   const increment = () => {
+    if (readonly) {
+      return;
+    }
     const base = isValidNumber(value) ? Big(value) : Big(0);
     const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
 
@@ -3526,6 +3581,9 @@ function Numberfield(props) {
     setValue(stepFlooredValue.plus(arrowIncrementValue).toFixed());
   };
   const decrement = () => {
+    if (readonly) {
+      return;
+    }
     const base = isValidNumber(value) ? Big(value) : Big(0);
     const offset = base.mod(arrowIncrementValue);
     if (offset.cmp(0) === 0) {
@@ -3572,7 +3630,8 @@ function Numberfield(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$6, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
@@ -3580,11 +3639,13 @@ function Numberfield(props) {
       required: required
     }), jsxRuntime.jsx(InputAdorner, {
       disabled: disabled,
+      readonly: readonly,
       pre: prefixAdorner,
       post: suffixAdorner,
       children: jsxRuntime.jsxs("div", {
         class: classNames('fjs-vertical-group', {
-          'fjs-disabled': disabled
+          'fjs-disabled': disabled,
+          'fjs-readonly': readonly
         }, {
           'hasErrors': errors.length
         }),
@@ -3592,6 +3653,7 @@ function Numberfield(props) {
           ref: inputRef,
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           id: prefixId(id, formId),
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress
@@ -3606,7 +3668,8 @@ function Numberfield(props) {
           "aria-describedby": errorMessageId
         }), jsxRuntime.jsxs("div", {
           class: classNames('fjs-number-arrow-container', {
-            'fjs-disabled': disabled
+            'fjs-disabled': disabled,
+            'fjs-readonly': readonly
           }),
           children: [jsxRuntime.jsx("button", {
             class: "fjs-number-arrow-up",
@@ -3665,6 +3728,7 @@ function Radio(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value
   } = props;
   const {
@@ -3693,7 +3757,8 @@ function Radio(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$5, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsxRuntime.jsx(Label, {
       label: label,
@@ -3710,6 +3775,7 @@ function Radio(props) {
           checked: option.value === value,
           class: "fjs-input",
           disabled: disabled,
+          readOnly: readonly,
           id: prefixId(`${id}-${index}`, formId),
           type: "radio",
           onClick: () => onChange(option.value),
@@ -3771,6 +3837,7 @@ function SearchableSelect(props) {
     disabled,
     errors,
     field,
+    readonly,
     value
   } = props;
   const {
@@ -3843,11 +3910,11 @@ function SearchableSelect(props) {
   }, [isDropdownExpanded, isEscapeClosed]);
   const displayState = hooks.useMemo(() => {
     const ds = {};
-    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
     ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-    ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
     return ds;
-  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
   const onAngelMouseDown = hooks.useCallback(e => {
     setIsEscapeClose(false);
     setIsDropdownExpanded(!isDropdownExpanded);
@@ -3859,12 +3926,14 @@ function SearchableSelect(props) {
     children: [jsxRuntime.jsxs("div", {
       id: prefixId(`${id}`, formId),
       class: classNames('fjs-input-group', {
-        'disabled': disabled
+        'disabled': disabled,
+        'readonly': readonly
       }, {
         'hasErrors': errors.length
       }),
       children: [jsxRuntime.jsx("input", {
         disabled: disabled,
+        readOnly: readonly,
         class: "fjs-input",
         ref: searchbarRef,
         id: prefixId(`${id}-search`, formId),
@@ -3921,6 +3990,7 @@ function SimpleSelect(props) {
     disabled,
     errors,
     field,
+    readonly,
     value
   } = props;
   const {
@@ -3946,9 +4016,9 @@ function SimpleSelect(props) {
   }, [field, props]);
   const displayState = hooks.useMemo(() => {
     const ds = {};
-    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
     ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-    ds.displayDropdown = !disabled && isDropdownExpanded;
+    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded;
     return ds;
   }, [disabled, isDropdownExpanded, loadState, value]);
   const onMouseDown = hooks.useCallback(e => {
@@ -3967,7 +4037,8 @@ function SimpleSelect(props) {
       ref: selectRef,
       id: prefixId(`${id}`, formId),
       class: classNames('fjs-input-group', {
-        'disabled': disabled
+        disabled,
+        readonly
       }, {
         'hasErrors': errors.length
       }),
@@ -3984,8 +4055,8 @@ function SimpleSelect(props) {
         id: prefixId(`${id}-search`, formId),
         class: "fjs-select-hidden-input",
         value: valueLabel,
-        onFocus: () => setIsDropdownExpanded(true),
-        onBlur: () => setIsDropdownExpanded(false),
+        onFocus: () => !readonly && setIsDropdownExpanded(true),
+        onBlur: () => !readonly && setIsDropdownExpanded(false),
         "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxRuntime.jsx("span", {
         class: "fjs-select-cross",
@@ -4021,6 +4092,7 @@ function Select(props) {
     errors = [],
     field,
     onChange,
+    readonly,
     value
   } = props;
   const {
@@ -4044,12 +4116,14 @@ function Select(props) {
     field,
     value,
     onChange,
+    readonly,
     'aria-describedby': errorMessageId
-  }), [disabled, errors, field, id, value, onChange, errorMessageId]);
+  }), [disabled, errors, field, id, value, onChange, readonly, errorMessageId]);
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$4, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     onKeyDown: event => {
       if (event.key === 'Enter') {
@@ -4103,6 +4177,7 @@ function Taglist(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value: values = []
   } = props;
   const {
@@ -4193,6 +4268,10 @@ function Taglist(props) {
         break;
     }
   };
+  const onBlur = () => {
+    setIsDropdownExpanded(false);
+    setFilter('');
+  };
   const onTagRemoveClick = (event, value) => {
     const {
       target
@@ -4209,7 +4288,8 @@ function Taglist(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$3, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     onKeyDown: event => {
       if (event.key === 'Enter') {
@@ -4223,20 +4303,22 @@ function Taglist(props) {
       id: prefixId(`${id}-search`, formId)
     }), jsxRuntime.jsxs("div", {
       class: classNames('fjs-taglist', {
-        'fjs-disabled': disabled
+        'fjs-disabled': disabled,
+        'fjs-readonly': readonly
       }),
       children: [loadState === LOAD_STATES.LOADED && jsxRuntime.jsx("div", {
         class: "fjs-taglist-tags",
         children: values.map(v => {
           return jsxRuntime.jsxs("div", {
             class: classNames('fjs-taglist-tag', {
-              'fjs-disabled': disabled
+              'fjs-disabled': disabled,
+              'fjs-readonly': readonly
             }),
             onMouseDown: e => e.preventDefault(),
             children: [jsxRuntime.jsx("span", {
               class: "fjs-taglist-tag-label",
               children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-            }), !disabled && jsxRuntime.jsx("button", {
+            }), !disabled && !readonly && jsxRuntime.jsx("button", {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
@@ -4247,20 +4329,20 @@ function Taglist(props) {
         })
       }), jsxRuntime.jsx("input", {
         disabled: disabled,
+        readOnly: readonly,
         class: "fjs-taglist-input",
         ref: searchbarRef,
         id: prefixId(`${id}-search`, formId),
         onChange: onFilterChange,
         type: "text",
         value: filter,
-        placeholder: disabled ? undefined : 'Search',
+        placeholder: disabled || readonly ? undefined : 'Search',
         autoComplete: "off",
         onKeyDown: onInputKeyDown,
         onMouseDown: () => setIsEscapeClose(false),
-        onFocus: () => setIsDropdownExpanded(true),
+        onFocus: () => !readonly && setIsDropdownExpanded(true),
         onBlur: () => {
-          setIsDropdownExpanded(false);
-          setFilter('');
+          !readonly && onBlur();
         },
         "aria-describedby": errorMessageId
       })]
@@ -4395,6 +4477,7 @@ function Textfield(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = ''
   } = props;
   const {
@@ -4426,7 +4509,8 @@ function Textfield(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$1, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
@@ -4434,11 +4518,13 @@ function Textfield(props) {
       required: required
     }), jsxRuntime.jsx(InputAdorner, {
       disabled: disabled,
+      readonly: readonly,
       pre: prefixAdorner,
       post: suffixAdorner,
       children: jsxRuntime.jsx("input", {
         class: "fjs-input",
         disabled: disabled,
+        readOnly: readonly,
         id: prefixId(id, formId),
         onInput: onChange,
         type: "text",
@@ -4483,6 +4569,7 @@ function Textarea(props) {
     disabled,
     errors = [],
     field,
+    readonly,
     value = ''
   } = props;
   const {
@@ -4526,7 +4613,8 @@ function Textarea(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type, {
       errors,
-      disabled
+      disabled,
+      readonly
     }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
@@ -4535,6 +4623,7 @@ function Textarea(props) {
     }), jsxRuntime.jsx("textarea", {
       class: "fjs-textarea",
       disabled: disabled,
+      readonly: readonly,
       id: prefixId(id, formId),
       onInput: onInput,
       value: value,
@@ -5048,7 +5137,7 @@ class Form {
     const {
       properties
     } = this._getState();
-    if (properties.readOnly) {
+    if (properties.readOnly || properties.disabled) {
       throw new Error('form is read-only');
     }
     const data = this._getSubmitData();
@@ -5277,7 +5366,7 @@ class Form {
   }
 }
 
-const schemaVersion = 8;
+const schemaVersion = 9;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions