@bpmn-io/form-js-viewer 0.10.1 → 0.11.0

package/dist/index.es.js

@@ -12,9 +12,9 @@ import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -23,11 +23,11 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
     const conditions = this._getConditions();
@@ -46,13 +46,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -73,12 +73,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -88,13 +88,13 @@ class ConditionChecker {
     return result === true;
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -602,7 +602,7 @@ class Validator {
     if (type === 'number') {
       const {
         decimalDigits,
-        step
+        increment
       } = field;
       if (value === 'NaN') {
         errors = [...errors, 'Value is not a number.'];
@@ -610,13 +610,13 @@ class Validator {
         if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
           errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
         }
-        if (step) {
+        if (increment) {
           const bigValue = Big(value);
-          const bigStep = Big(step);
-          const offset = bigValue.mod(bigStep);
+          const bigIncrement = Big(increment);
+          const offset = bigValue.mod(bigIncrement);
           if (offset.cmp(0) !== 0) {
             const previousValue = bigValue.minus(offset);
-            const nextValue = previousValue.plus(bigStep);
+            const nextValue = previousValue.plus(bigIncrement);
             errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
           }
         }
@@ -631,10 +631,10 @@ class Validator {
     if (validate.required && (isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
-    if ('min' in validate && value && value < validate.min) {
+    if ('min' in validate && (value || value === 0) && value < validate.min) {
       errors = [...errors, `Field must have minimum value of ${validate.min}.`];
     }
-    if ('max' in validate && value && value > validate.max) {
+    if ('max' in validate && (value || value === 0) && value > validate.max) {
       errors = [...errors, `Field must have maximum value of ${validate.max}.`];
     }
     if ('minLength' in validate && value && value.trim().length < validate.minLength) {
@@ -703,11 +703,11 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
-/**
- * Retrieve variable names from given FEEL unary test.
- *
- * @param {string} unaryTest
- * @returns {string[]}
+/**
+ * Retrieve variable names from given FEEL unary test.
+ *
+ * @param {string} unaryTest
+ * @returns {string[]}
  */
 function getVariableNames(unaryTest) {
   const tree = parseUnaryTests(unaryTest);
@@ -722,11 +722,11 @@ function getVariableNames(unaryTest) {
   return Array.from(variables);
 }
 
-/**
- * Retrieve variable names from given FEEL expression.
- *
- * @param {string} expression
- * @returns {string[]}
+/**
+ * Retrieve variable names from given FEEL expression.
+ *
+ * @param {string} expression
+ * @returns {string[]}
  */
 function getExpressionVariableNames(expression) {
   const tree = parseExpressions(expression);
@@ -812,10 +812,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -860,22 +860,22 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema) {
   if (!schema.components) {
@@ -924,25 +924,25 @@ function isExpression$1(value) {
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
   }
 
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -961,11 +961,11 @@ class Importer {
     }
   }
 
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
   importFormField(formField, parentId) {
     const {
@@ -1016,10 +1016,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1069,11 +1069,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 function sanitizeHTML(html) {
   const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
@@ -1093,15 +1093,15 @@ function sanitizeImageSource(src) {
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -1145,13 +1145,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -1203,14 +1203,14 @@ function safeMarkdown(markdown) {
   return sanitizeHTML(html);
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function safeImageSource(src) {
   return sanitizeImageSource(src);
@@ -1257,11 +1257,11 @@ const FormRenderContext = createContext({
   }
 });
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = createContext({
@@ -1390,8 +1390,8 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1399,17 +1399,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -1744,13 +1744,13 @@ Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
 
-/**
- * Check if condition is met with given variables.
- *
- * @param {string | undefined} condition
- * @param {import('../../types').Data} data
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Check if condition is met with given variables.
+ *
+ * @param {string | undefined} condition
+ * @param {import('../../types').Data} data
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition, data) {
   const initialData = useService('form')._getState().initialData;
@@ -1860,7 +1860,7 @@ var CalendarIcon = (({
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z",
-  fill: "#000"
+  fill: "currentColor"
 })));
 
 function InputAdorner(props) {
@@ -1925,10 +1925,6 @@ function Datepicker(props) {
 
   // setup flatpickr instance
   useEffect(() => {
-    if (disabled) {
-      setFlatpickrInstance(null);
-      return;
-    }
     let config = {
       allowInput: true,
       dateFormat: 'm/d/Y',
@@ -1961,7 +1957,7 @@ function Datepicker(props) {
     // flatpicker logic that was lost when setting allowInput to true
     instance.config.onOpen = [() => instance.calendarContainer.addEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.addEventListener('mousedown', onCalendarMouseDown)];
     instance.config.onClose = [() => instance.calendarContainer.removeEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.removeEventListener('mousedown', onCalendarMouseDown)];
-  }, [disabled, disallowPassedDates]);
+  }, [disallowPassedDates]);
 
   // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
   useEffect(() => {
@@ -2050,12 +2046,12 @@ var ClockIcon = (({
   xmlns: "http://www.w3.org/2000/svg"
 }, props), /*#__PURE__*/React.createElement("path", {
   d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-  fill: "#000"
+  fill: "currentColor"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z",
-  fill: "#000"
+  fill: "currentColor"
 })));
 
 function useKeyDownAction(targetKey, action, listenerElement = window) {
@@ -2147,6 +2143,7 @@ function DropdownList(props) {
     ref: dropdownContainer,
     tabIndex: -1,
     class: "fjs-dropdownlist",
+    onMouseDown: e => e.preventDefault(),
     style: {
       maxHeight: height,
       scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
@@ -2158,10 +2155,7 @@ function DropdownList(props) {
         }),
         onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
         onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-        onMouseDown: e => {
-          e.preventDefault();
-          onValueSelected(v);
-        },
+        onMouseDown: e => onValueSelected(v),
         children: getLabel(v)
       });
     }), !values.length && jsx("div", {
@@ -2361,31 +2355,29 @@ function Datetime(props) {
       date,
       time
     } = getNullDateTime();
-    if (!disabled) {
-      switch (subtype) {
-        case DATETIME_SUBTYPES.DATE:
-          {
-            date = new Date(Date.parse(value));
-            break;
-          }
-        case DATETIME_SUBTYPES.TIME:
-          {
-            time = parseIsoTime(value);
-            break;
-          }
-        case DATETIME_SUBTYPES.DATETIME:
-          {
-            date = new Date(Date.parse(value));
-            time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
-            break;
-          }
-      }
+    switch (subtype) {
+      case DATETIME_SUBTYPES.DATE:
+        {
+          date = new Date(Date.parse(value));
+          break;
+        }
+      case DATETIME_SUBTYPES.TIME:
+        {
+          time = parseIsoTime(value);
+          break;
+        }
+      case DATETIME_SUBTYPES.DATETIME:
+        {
+          date = new Date(Date.parse(value));
+          time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
+          break;
+        }
     }
     setDateTime({
       date,
       time
     });
-  }, [subtype, value, disabled]);
+  }, [subtype, value]);
   const computeAndSetState = useCallback(({
     date,
     time
@@ -2502,10 +2494,10 @@ Datetime.keyed = true;
 Datetime.emptyValue = null;
 Datetime.sanitizeValue = sanitizeDateTimePickerValue;
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxs("svg", {
@@ -2622,10 +2614,10 @@ function FormComponent(props) {
   });
 }
 
-/**
- *
- * @param {string | undefined} expression
- * @param {import('../../types').Data} data
+/**
+ *
+ * @param {string | undefined} expression
+ * @param {import('../../types').Data} data
  */
 function useEvaluation(expression, data) {
   const initialData = useService('form')._getState().initialData;
@@ -2642,9 +2634,9 @@ function useEvaluation(expression, data) {
   return conditionChecker.evaluate(expression, filteredData);
 }
 
-/**
- *
- * @param {string} value
+/**
+ *
+ * @param {string} value
  */
 function useExpressionValue(value) {
   const formData = useService('form')._getState().data;
@@ -2775,6 +2767,7 @@ function Numberfield(props) {
   }), [stringValueCache, value, field]);
   const displayValue = useMemo(() => {
     if (value === 'NaN') return 'NaN';
+    if (stringValueCache === '-') return '-';
     return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big(value).toFixed() : '';
   }, [stringValueCache, value, cacheValueMatchesState]);
   const arrowIncrementValue = useMemo(() => {
@@ -2794,6 +2787,10 @@ function Numberfield(props) {
 
     // treat commas as dots
     stringValue = stringValue.replaceAll(',', '.');
+    if (stringValue === '-') {
+      setStringValueCache('-');
+      return;
+    }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
       onChange({
@@ -3324,18 +3321,18 @@ var ChecklistIcon = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+  fill: "none"
 }, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
-  fill: "#22242A"
+  d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
+  fill: "#161616"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
-  fill: "#22242A"
+  d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
+  fill: "#161616"
 })));
 
 function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }