@bpmn-io/form-js-viewer 0.10.0-alpha.0 → 0.10.0-alpha.2

package/dist/index.es.js

@@ -1,5 +1,7 @@
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, isObject, set, isString } from 'min-dash';
+import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, isObject, set } from 'min-dash';
+import { unaryTest, evaluate, parseUnaryTests, parseExpressions } from 'feelin';
+import Big from 'big.js';
 import snarkdown from '@bpmn-io/snarkdown';
 import classNames from 'classnames';
 import { jsx, jsxs } from 'preact/jsx-runtime';
@@ -9,6 +11,126 @@ import React, { createPortal } from 'preact/compat';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
+ */
+
+class ConditionChecker {
+  constructor(formFieldRegistry, eventBus) {
+    this._formFieldRegistry = formFieldRegistry;
+    this._eventBus = eventBus;
+  }
+
+  /**
+   * 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();
+    const newProperties = {
+      ...properties
+    };
+    for (const {
+      key,
+      condition
+    } of conditions) {
+      const shouldRemove = this._checkHideCondition(condition, data);
+      if (shouldRemove) {
+        delete newProperties[key];
+      }
+    }
+    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(condition, data = {}) {
+    if (!condition) {
+      return null;
+    }
+    if (!isString(condition) || !condition.startsWith('=')) {
+      return null;
+    }
+    try {
+      // cut off initial '='
+      const result = unaryTest(condition.slice(1), data);
+      return result;
+    } catch (error) {
+      this._eventBus.fire('error', {
+        error
+      });
+      return null;
+    }
+  }
+
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
+   */
+  _checkHideCondition(condition, data) {
+    if (!condition.hide) {
+      return false;
+    }
+    const result = this.check(condition.hide, data);
+    return result === true;
+  }
+
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {any}
+   */
+  evaluate(expression, data = {}) {
+    if (!expression) {
+      return null;
+    }
+    if (!isString(expression) || !expression.startsWith('=')) {
+      return null;
+    }
+    try {
+      const result = evaluate(expression.slice(1), data);
+      return result;
+    } catch (error) {
+      this._eventBus.fire('error', {
+        error
+      });
+      return null;
+    }
+  }
+  _getConditions() {
+    const formFields = this._formFieldRegistry.getAll();
+    return formFields.reduce((conditions, formField) => {
+      const {
+        key,
+        conditional: condition
+      } = formField;
+      if (key && condition) {
+        return [...conditions, {
+          key,
+          condition
+        }];
+      }
+      return conditions;
+    }, []);
+  }
+}
+ConditionChecker.$inject = ['formFieldRegistry', 'eventBus'];
+
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 1000;
 var slice = Array.prototype.slice;
@@ -442,14 +564,63 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
+function countDecimals(number) {
+  const num = Big(number);
+  if (num.toString() === num.toFixed(0)) return 0;
+  return num.toFixed().split('.')[1].length || 0;
+}
+function isValidNumber(value) {
+  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
+}
+function willKeyProduceValidNumber(key, previousValue, carretIndex, selectionWidth, decimalDigits) {
+  // Dot and comma are both treated as dot
+  previousValue = previousValue.replace(',', '.');
+  const isFirstDot = !previousValue.includes('.') && (key === '.' || key === ',');
+  const isFirstMinus = !previousValue.includes('-') && key === '-' && carretIndex === 0;
+  const keypressIsNumeric = /^[0-9]$/i.test(key);
+  const dotIndex = previousValue?.indexOf('.') ?? -1;
+
+  // If the carret is positioned after a dot, and the current decimal digits count is equal or greater to the maximum, disallow the key press
+  const overflowsDecimalSpace = typeof decimalDigits === 'number' && selectionWidth === 0 && dotIndex !== -1 && previousValue.includes('.') && previousValue.split('.')[1].length >= decimalDigits && carretIndex > dotIndex;
+  const keypressIsAllowedChar = keypressIsNumeric || decimalDigits !== 0 && isFirstDot || isFirstMinus;
+  return keypressIsAllowedChar && !overflowsDecimalSpace;
+}
+function isNullEquivalentValue(value) {
+  return value === undefined || value === null || value === '';
+}
+
 const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
 class Validator {
   validateField(field, value) {
     const {
+      type,
       validate
     } = field;
     let errors = [];
+    if (type === 'number') {
+      const {
+        decimalDigits,
+        step
+      } = field;
+      if (value === 'NaN') {
+        errors = [...errors, 'Value is not a number.'];
+      } else if (value) {
+        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) {
+          const bigValue = Big(value);
+          const bigStep = Big(step);
+          const offset = bigValue.mod(bigStep);
+          if (offset.cmp(0) !== 0) {
+            const previousValue = bigValue.minus(offset);
+            const nextValue = previousValue.plus(bigStep);
+            errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
+          }
+        }
+      }
+    }
     if (!validate) {
       return errors;
     }
@@ -531,6 +702,44 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
+/**
+ * Retrieve variable names from given FEEL unary test.
+ *
+ * @param {string} unaryTest
+ * @returns {string[]}
+ */
+function getVariableNames(unaryTest) {
+  const tree = parseUnaryTests(unaryTest);
+  const cursor = tree.cursor();
+  const variables = new Set();
+  do {
+    const node = cursor.node;
+    if (node.type.name === 'VariableName') {
+      variables.add(unaryTest.slice(node.from, node.to));
+    }
+  } while (cursor.next());
+  return Array.from(variables);
+}
+
+/**
+ * Retrieve variable names from given FEEL expression.
+ *
+ * @param {string} expression
+ * @returns {string[]}
+ */
+function getExpressionVariableNames(expression) {
+  const tree = parseExpressions(expression);
+  const cursor = tree.cursor();
+  const variables = new Set();
+  do {
+    const node = cursor.node;
+    if (node.type.name === 'VariableName') {
+      variables.add(expression.slice(node.from, node.to));
+    }
+  } while (cursor.next());
+  return Array.from(variables);
+}
+
 function createInjector(bootstrapModules) {
   const injector = new Injector(bootstrapModules);
   injector.init();
@@ -548,6 +757,7 @@ function createFormContainer(prefix = 'fjs') {
   return container;
 }
 
+const EXPRESSION_PROPERTIES = ['alt', 'source'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
 }
@@ -601,16 +811,16 @@ function clone(data, replacer) {
  *
  * @return {string[]}
  */
-
 function getSchemaVariables(schema) {
   if (!schema.components) {
     return [];
   }
-  return schema.components.reduce((variables, component) => {
+  const variables = schema.components.reduce((variables, component) => {
     const {
       key,
       valuesKey,
-      type
+      type,
+      conditional
     } = component;
     if (['text', 'button'].includes(type)) {
       return variables;
@@ -618,11 +828,33 @@ function getSchemaVariables(schema) {
     if (key) {
       variables = [...variables, key];
     }
-    if (valuesKey && !variables.includes(valuesKey)) {
+    if (valuesKey) {
       variables = [...variables, valuesKey];
     }
+    if (conditional && conditional.hide) {
+      // cut off initial '='
+      const conditionVariables = getVariableNames(conditional.hide.slice(1));
+      variables = [...variables, ...conditionVariables];
+    }
+    EXPRESSION_PROPERTIES.forEach(prop => {
+      const property = component[prop];
+      if (property && isExpression$1(property)) {
+        // cut off initial '='
+        const expressionVariables = getExpressionVariableNames(property.slice(1));
+        variables = [...variables, ...expressionVariables];
+      }
+    });
     return variables;
   }, []);
+
+  // remove duplicates
+  return Array.from(new Set(variables));
+}
+
+// helper ///////////////
+
+function isExpression$1(value) {
+  return isString(value) && value.startsWith('=');
 }
 
 class Importer {
@@ -651,11 +883,11 @@ class Importer {
     const warnings = [];
     try {
       const importedSchema = this.importFormField(clone(schema)),
-        importedData = this.importData(clone(data));
+        initializedData = this.initializeFieldValues(clone(data));
       return {
         warnings,
         schema: importedSchema,
-        data: importedData
+        data: initializedData
       };
     } catch (err) {
       err.warnings = warnings;
@@ -721,26 +953,16 @@ class Importer {
   /**
    * @param {Object} data
    *
-   * @return {Object} importedData
+   * @return {Object} initializedData
    */
-  importData(data) {
-    return this._formFieldRegistry.getAll().reduce((importedData, formField) => {
+  initializeFieldValues(data) {
+    return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
       const {
         defaultValue,
         _path,
-        type,
-        valuesKey
+        type
       } = formField;
 
-      // get values defined via valuesKey
-
-      if (valuesKey) {
-        importedData = {
-          ...importedData,
-          [valuesKey]: get(data, [valuesKey])
-        };
-      }
-
       // try to get value from data
       // if unavailable - try to get default value from form field
       // if unavailable - get empty value from form field
@@ -755,14 +977,14 @@ class Importer {
             value: valueData
           });
         }
-        const initialFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
-        importedData = {
-          ...importedData,
-          [_path[0]]: initialFieldValue
+        const initializedFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
+        initializedData = {
+          ...initializedData,
+          [_path[0]]: initializedFieldValue
         };
       }
-      return importedData;
-    }, {});
+      return initializedData;
+    }, data);
   }
 }
 Importer.$inject = ['formFieldRegistry', 'formFields'];
@@ -776,6 +998,7 @@ const NODE_TYPE_TEXT = 3,
 const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
 const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
 const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
+const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
 const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
 
 const FORM_ELEMENT = document.createElement('form');
@@ -799,6 +1022,10 @@ function sanitizeHTML(html) {
     return '';
   }
 }
+function sanitizeImageSource(src) {
+  const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
+  return valid ? src : '';
+}
 
 /**
  * Recursively sanitize a HTML node, potentially
@@ -909,6 +1136,19 @@ function safeMarkdown(markdown) {
   const html = markdownToHTML(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}
+ */
+function safeImageSource(src) {
+  return sanitizeImageSource(src);
+}
 function sanitizeSingleSelectValue(options) {
   const {
     formField,
@@ -948,7 +1188,7 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$9 = 'button';
+const type$a = 'button';
 function Button(props) {
   const {
     disabled,
@@ -958,7 +1198,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$9),
+    class: formFieldClasses(type$a),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -973,7 +1213,7 @@ Button.create = function (options = {}) {
     ...options
   };
 };
-Button.type = type$9;
+Button.type = type$a;
 Button.label = 'Button';
 Button.keyed = true;
 
@@ -1049,7 +1289,7 @@ function Label(props) {
   });
 }
 
-const type$8 = 'checkbox';
+const type$9 = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1074,7 +1314,7 @@ function Checkbox(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$8, {
+    class: classNames(formFieldClasses(type$9, {
       errors,
       disabled
     }), {
@@ -1104,7 +1344,7 @@ Checkbox.create = function (options = {}) {
     ...options
   };
 };
-Checkbox.type = type$8;
+Checkbox.type = type$9;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
 Checkbox.emptyValue = false;
@@ -1179,7 +1419,7 @@ const buildLoadedState = values => ({
   state: LOAD_STATES.LOADED
 });
 
-const type$7 = 'checklist';
+const type$8 = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1212,7 +1452,7 @@ function Checklist(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$7, {
+    class: classNames(formFieldClasses(type$8, {
       errors,
       disabled
     })),
@@ -1252,12 +1492,28 @@ Checklist.create = function (options = {}) {
     ...options
   };
 };
-Checklist.type = type$7;
+Checklist.type = type$8;
 Checklist.label = 'Checklist';
 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
+ */
+function useCondition(condition, data) {
+  const conditionChecker = useService('conditionChecker', false);
+  if (!conditionChecker) {
+    return null;
+  }
+  return conditionChecker.check(condition, data);
+}
+
 const noop$1 = () => false;
 function FormField(props) {
   const {
@@ -1275,7 +1531,8 @@ function FormField(props) {
     properties
   } = form._getState();
   const {
-    Element
+    Element,
+    Empty
   } = useContext(FormRenderContext);
   const FormFieldComponent = formFields.get(field.type);
   if (!FormFieldComponent) {
@@ -1284,6 +1541,10 @@ function FormField(props) {
   const value = get(data, _path);
   const fieldErrors = findErrors(errors, _path);
   const disabled = properties.readOnly || field.disabled || false;
+  const hidden = useHideCondition(field, data);
+  if (hidden) {
+    return jsx(Empty, {});
+  }
   return jsx(Element, {
     field: field,
     children: jsx(FormFieldComponent, {
@@ -1295,6 +1556,10 @@ function FormField(props) {
     })
   });
 }
+function useHideCondition(field, data) {
+  const hideCondition = field.conditional && field.conditional.hide;
+  return useCondition(hideCondition, data) === true;
+}
 
 function Default(props) {
   const {
@@ -1440,6 +1705,7 @@ function FormComponent(props) {
     class: "fjs-form",
     onSubmit: handleSubmit,
     onReset: handleReset,
+    noValidate: true,
     children: [jsx(FormField, {
       field: schema,
       onChange: onChange
@@ -1447,32 +1713,226 @@ function FormComponent(props) {
   });
 }
 
+/**
+ *
+ * @param {string | undefined} expression
+ * @param {import('../../types').Data} data
+ */
+function useEvaluation(expression, data) {
+  const conditionChecker = useService('conditionChecker', false);
+  if (!conditionChecker) {
+    return null;
+  }
+  return conditionChecker.evaluate(expression, data);
+}
+
+/**
+ *
+ * @param {string} value
+ */
+function useExpressionValue(value) {
+  const formData = useService('form')._getState().data;
+  if (!isExpression(value)) {
+    return value;
+  }
+
+  // We can ignore this hook rule as we do not use
+  // state or effects in our custom hooks
+  /* eslint-disable-next-line react-hooks/rules-of-hooks */
+  return useEvaluation(value, formData);
+}
+
+// helper ///////////////
+
+function isExpression(value) {
+  return isString(value) && value.startsWith('=');
+}
+
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var ImagePlaceholder = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
+  width: "64",
+  height: "64",
+  viewBox: "0 0 1280 1280",
+  xmlns: "http://www.w3.org/2000/svg",
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  strokeLinejoin: "round",
+  strokeMiterlimit: "2"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "#e5e9ed",
+  d: "M0 0h1280v1280H0z"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M910 410H370v470h540V410zm-57.333 57.333v355.334H427.333V467.333h425.334z",
+  fill: "#cad3db"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M810 770H480v-60l100-170 130 170 100-65v125z",
+  fill: "#cad3db"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "750",
+  cy: "550",
+  r: "50",
+  fill: "#cad3db",
+  transform: "translate(10 10)"
+})));
+
+const type$7 = 'image';
+function Image(props) {
+  const {
+    field
+  } = props;
+  const {
+    alt,
+    id,
+    source
+  } = field;
+  const safeSource = safeImageSource(useExpressionValue(source));
+  const altText = useExpressionValue(alt);
+  const {
+    formId
+  } = useContext(FormContext);
+  return jsx("div", {
+    class: formFieldClasses(type$7),
+    children: jsxs("div", {
+      class: "fjs-image-container",
+      children: [safeSource && jsx("img", {
+        alt: altText,
+        src: safeSource,
+        class: "fjs-image",
+        id: prefixId(id, formId)
+      }), !safeSource && jsx("div", {
+        class: "fjs-image-placeholder",
+        children: jsx(ImagePlaceholder, {
+          alt: "This is an image placeholder"
+        })
+      })]
+    })
+  });
+}
+Image.create = function (options = {}) {
+  return {
+    ...options
+  };
+};
+Image.type = type$7;
+Image.keyed = false;
+
 const type$6 = 'number';
-function Number(props) {
+function Numberfield(props) {
   const {
     disabled,
     errors = [],
     field,
-    value
+    value,
+    onChange
   } = props;
   const {
     description,
     id,
     label,
-    validate = {}
+    validate = {},
+    decimalDigits,
+    serializeToString = false,
+    increment: incrementValue
   } = field;
   const {
     required
   } = validate;
-  const onChange = ({
-    target
-  }) => {
-    props.onChange({
+  const inputRef = useRef();
+  const [stringValueCache, setStringValueCache] = useState('');
+
+  // checks whether the value currently in the form data is practically different from the one in the input field cache
+  // this allows us to guarantee the field always displays valid form data, but without auto-simplifying values like 1.000 to 1
+  const cacheValueMatchesState = useMemo(() => Numberfield.sanitizeValue({
+    value,
+    formField: field
+  }) === Numberfield.sanitizeValue({
+    value: stringValueCache,
+    formField: field
+  }), [stringValueCache, value, field]);
+  const displayValue = useMemo(() => {
+    if (value === 'NaN') return 'NaN';
+    return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big(value).toFixed() : '';
+  }, [stringValueCache, value, cacheValueMatchesState]);
+  const arrowIncrementValue = useMemo(() => {
+    if (incrementValue) return Big(incrementValue);
+    if (decimalDigits) return Big(`1e-${decimalDigits}`);
+    return Big('1');
+  }, [decimalDigits, incrementValue]);
+  const setValue = useCallback(stringValue => {
+    if (isNullEquivalentValue(stringValue)) {
+      setStringValueCache('');
+      onChange({
+        field,
+        value: null
+      });
+      return;
+    }
+
+    // treat commas as dots
+    stringValue = stringValue.replaceAll(',', '.');
+    if (isNaN(Number(stringValue))) {
+      setStringValueCache('NaN');
+      onChange({
+        field,
+        value: 'NaN'
+      });
+      return;
+    }
+    setStringValueCache(stringValue);
+    onChange({
       field,
-      value: Number.sanitizeValue({
-        value: target.value
-      })
+      value: serializeToString ? stringValue : Number(stringValue)
     });
+  }, [field, onChange, serializeToString]);
+  const increment = () => {
+    const base = isValidNumber(value) ? Big(value) : Big(0);
+    const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
+
+    // note: toFixed() behaves differently in big.js
+    setValue(stepFlooredValue.plus(arrowIncrementValue).toFixed());
+  };
+  const decrement = () => {
+    const base = isValidNumber(value) ? Big(value) : Big(0);
+    const offset = base.mod(arrowIncrementValue);
+    if (offset.cmp(0) === 0) {
+      // if we're already on a valid step, decrement
+      setValue(base.minus(arrowIncrementValue).toFixed());
+    } else {
+      // otherwise floor to the step
+      const stepFlooredValue = base.minus(base.mod(arrowIncrementValue));
+      setValue(stepFlooredValue.toFixed());
+    }
+  };
+  const onKeyDown = e => {
+    // delete the NaN state all at once on backspace or delete
+    if (value === 'NaN' && (e.code === 'Backspace' || e.code === 'Delete')) {
+      setValue(null);
+      e.preventDefault();
+      return;
+    }
+    if (e.code === 'ArrowUp') {
+      increment();
+      e.preventDefault();
+      return;
+    }
+    if (e.code === 'ArrowDown') {
+      decrement();
+      e.preventDefault();
+      return;
+    }
+  };
+
+  // intercept key presses which would lead to an invalid number
+  const onKeyPress = e => {
+    const carretIndex = inputRef.current.selectionStart;
+    const selectionWidth = inputRef.current.selectionStart - inputRef.current.selectionEnd;
+    const previousValue = inputRef.current.value;
+    if (!willKeyProduceValidNumber(e.key, previousValue, carretIndex, selectionWidth, decimalDigits)) {
+      e.preventDefault();
+    }
   };
   const {
     formId
@@ -1486,13 +1946,45 @@ function Number(props) {
       id: prefixId(id, formId),
       label: label,
       required: required
-    }), jsx("input", {
-      class: "fjs-input",
-      disabled: disabled,
-      id: prefixId(id, formId),
-      onInput: onChange,
-      type: "number",
-      value: value || ''
+    }), jsxs("div", {
+      class: classNames('fjs-input-group', {
+        'disabled': disabled
+      }, {
+        'hasErrors': errors.length
+      }),
+      children: [jsx("input", {
+        ref: inputRef,
+        class: "fjs-input",
+        disabled: disabled,
+        id: prefixId(id, formId),
+        onKeyDown: onKeyDown,
+        onKeyPress: onKeyPress
+
+        // @ts-ignore
+        ,
+        onInput: e => setValue(e.target.value),
+        type: "text",
+        autoComplete: "off",
+        step: arrowIncrementValue,
+        value: displayValue
+      }), jsxs("div", {
+        class: classNames('fjs-number-arrow-container', {
+          'disabled': disabled
+        }),
+        children: [jsx("button", {
+          class: "fjs-number-arrow-up",
+          onClick: () => increment(),
+          tabIndex: -1,
+          children: "\u02C4"
+        }), jsx("div", {
+          class: "fjs-number-arrow-separator"
+        }), jsx("button", {
+          class: "fjs-number-arrow-down",
+          onClick: () => decrement(),
+          tabIndex: -1,
+          children: "\u02C5"
+        })]
+      })]
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -1500,21 +1992,24 @@ function Number(props) {
     })]
   });
 }
-Number.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
-Number.sanitizeValue = ({
-  value
+Numberfield.create = (options = {}) => options;
+Numberfield.sanitizeValue = ({
+  value,
+  formField
 }) => {
-  const parsedValue = parseInt(value, 10);
-  return isNaN(parsedValue) ? null : parsedValue;
+  // null state is allowed
+  if (isNullEquivalentValue(value)) return null;
+
+  // if data cannot be parsed as a valid number, go into invalid NaN state
+  if (!isValidNumber(value)) return 'NaN';
+
+  // otherwise parse to formatting type
+  return formField.serializeToString ? value.toString() : Number(value);
 };
-Number.type = type$6;
-Number.keyed = true;
-Number.label = 'Number';
-Number.emptyValue = null;
+Numberfield.type = type$6;
+Numberfield.keyed = true;
+Numberfield.label = 'Number';
+Numberfield.emptyValue = null;
 
 const type$5 = 'radio';
 function Radio(props) {
@@ -1886,6 +2381,18 @@ function Taglist(props) {
         break;
     }
   };
+  const onTagRemoveClick = (event, value) => {
+    const {
+      target
+    } = event;
+    deselectValue(value);
+
+    // restore focus if there is no next sibling to focus
+    const nextTag = target.closest('.fjs-taglist-tag').nextSibling;
+    if (!nextTag) {
+      searchbarRef.current.focus();
+    }
+  };
   return jsxs("div", {
     class: formFieldClasses(type$3, {
       errors,
@@ -1898,19 +2405,24 @@ function Taglist(props) {
       class: classNames('fjs-taglist', {
         'disabled': disabled
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && values.map(v => {
-        return jsxs("div", {
-          class: "fjs-taglist-tag",
-          onMouseDown: e => e.preventDefault(),
-          children: [jsx("span", {
-            class: "fjs-taglist-tag-label",
-            children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-          }), jsx("span", {
-            class: "fjs-taglist-tag-remove",
-            onMouseDown: () => deselectValue(v),
-            children: jsx(CloseIcon, {})
-          })]
-        });
+      children: [!disabled && loadState === LOAD_STATES.LOADED && jsx("div", {
+        class: "fjs-taglist-tags",
+        children: values.map(v => {
+          return jsxs("div", {
+            class: "fjs-taglist-tag",
+            onMouseDown: e => e.preventDefault(),
+            children: [jsx("span", {
+              class: "fjs-taglist-tag-label",
+              children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
+            }), jsx("button", {
+              type: "button",
+              title: "Remove tag",
+              class: "fjs-taglist-tag-remove",
+              onClick: event => onTagRemoveClick(event, v),
+              children: jsx(CloseIcon, {})
+            })]
+          });
+        })
       }), jsx("input", {
         disabled: disabled,
         class: "fjs-taglist-input",
@@ -2131,7 +2643,7 @@ Textarea.sanitizeValue = ({
   value
 }) => isArray(value) || isObject(value) ? '' : String(value);
 
-const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Radio, Select, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -2211,6 +2723,7 @@ var renderModule = {
 
 var core = {
   __depends__: [importModule, renderModule],
+  conditionChecker: ['type', ConditionChecker],
   eventBus: ['type', EventBus],
   formFieldRegistry: ['type', FormFieldRegistry],
   validator: ['type', Validator]
@@ -2326,14 +2839,14 @@ class Form {
         this.clear();
         const {
           schema: importedSchema,
-          data: importedData,
+          data: initializedData,
           warnings
         } = this.get('importer').importSchema(schema, data);
         this._setState({
-          data: importedData,
+          data: initializedData,
           errors: {},
           schema: importedSchema,
-          initialData: clone(importedData)
+          initialData: clone(initializedData)
         });
         this._emit('import.done', {
           warnings
@@ -2365,14 +2878,13 @@ class Form {
     }
     const data = this._getSubmitData();
     const errors = this.validate();
-    this._emit('submit', {
-      data,
-      errors
-    });
-    return {
+    const filteredErrors = this._applyConditions(errors, data);
+    const result = {
       data,
-      errors
+      errors: filteredErrors
     };
+    this._emit('submit', result);
+    return result;
   }
   reset() {
     this._emit('reset');
@@ -2553,7 +3065,8 @@ class Form {
    */
   _getSubmitData() {
     const formFieldRegistry = this.get('formFieldRegistry');
-    return formFieldRegistry.getAll().reduce((data, field) => {
+    const formData = this._getState().data;
+    const submitData = formFieldRegistry.getAll().reduce((previous, field) => {
       const {
         disabled,
         _path
@@ -2561,14 +3074,24 @@ class Form {
 
       // do not submit disabled form fields
       if (disabled || !_path) {
-        return data;
+        return previous;
       }
-      const value = get(this._getState().data, _path);
+      const value = get(formData, _path);
       return {
-        ...data,
+        ...previous,
         [_path[0]]: value
       };
     }, {});
+    const filteredSubmitData = this._applyConditions(submitData, formData);
+    return filteredSubmitData;
+  }
+
+  /**
+   * @internal
+   */
+  _applyConditions(toFilter, data) {
+    const conditionChecker = this.get('conditionChecker');
+    return conditionChecker.applyConditions(toFilter, data);
   }
 }
 
@@ -2597,5 +3120,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Number, Radio, Select, Taglist, Text, Textarea, Textfield, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Image, Numberfield, Radio, Select, Taglist, Text, Textarea, Textfield, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
 //# sourceMappingURL=index.es.js.map