@bpmn-io/form-js-viewer 0.9.9 → 0.10.0-alpha.1

package/dist/index.es.js

@@ -1,17 +1,18 @@
 import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, isObject, set, isString } from 'min-dash';
 import snarkdown from '@bpmn-io/snarkdown';
+import classNames from 'classnames';
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { useContext, useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
 import React, { createPortal } from 'preact/compat';
-import classNames from 'classnames';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 1000;
 var slice = Array.prototype.slice;
+
 /**
  * A general purpose event bus.
  *
@@ -95,13 +96,14 @@ var slice = Array.prototype.slice;
  * console.log(sum); // 3
  * ```
  */
-
 function EventBus() {
-  this._listeners = {}; // cleanup on destroy on lowest priority to allow
-  // message passing until the bitter end
+  this._listeners = {};
 
+  // cleanup on destroy on lowest priority to allow
+  // message passing until the bitter end
   this.on('diagram.destroy', 1, this._destroy, this);
 }
+
 /**
  * Register an event listener for events with the given name.
  *
@@ -119,30 +121,25 @@ function EventBus() {
  * @param {Function} callback
  * @param {Object} [that] Pass context (`this`) to the callback
  */
-
 EventBus.prototype.on = function (events, priority, callback, that) {
   events = isArray(events) ? events : [events];
-
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
     priority = DEFAULT_PRIORITY;
   }
-
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
   }
-
   var actualCallback = callback;
-
   if (that) {
-    actualCallback = bind(callback, that); // make sure we remember and are able to remove
+    actualCallback = bind(callback, that);
+
+    // make sure we remember and are able to remove
     // bound callbacks via {@link #off} using the original
     // callback
-
     actualCallback[FN_REF] = callback[FN_REF] || callback;
   }
-
   var self = this;
   events.forEach(function (e) {
     self._addListener(e, {
@@ -152,6 +149,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
     });
   });
 };
+
 /**
  * Register an event listener that is executed only once.
  *
@@ -160,34 +158,30 @@ EventBus.prototype.on = function (events, priority, callback, that) {
  * @param {Function} callback the callback to execute
  * @param {Object} [that] Pass context (`this`) to the callback
  */
-
-
 EventBus.prototype.once = function (event, priority, callback, that) {
   var self = this;
-
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
     priority = DEFAULT_PRIORITY;
   }
-
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
   }
-
   function wrappedCallback() {
     wrappedCallback.__isTomb = true;
     var result = callback.apply(that, arguments);
     self.off(event, wrappedCallback);
     return result;
-  } // make sure we remember and are able to remove
+  }
+
+  // make sure we remember and are able to remove
   // bound callbacks via {@link #off} using the original
   // callback
-
-
   wrappedCallback[FN_REF] = callback;
   this.on(event, priority, wrappedCallback);
 };
+
 /**
  * Removes event listeners by event and callback.
  *
@@ -196,8 +190,6 @@ EventBus.prototype.once = function (event, priority, callback, that) {
  * @param {string|Array<string>} events
  * @param {Function} [callback]
  */
-
-
 EventBus.prototype.off = function (events, callback) {
   events = isArray(events) ? events : [events];
   var self = this;
@@ -205,6 +197,7 @@ EventBus.prototype.off = function (events, callback) {
     self._removeListener(event, callback);
   });
 };
+
 /**
  * Create an EventBus event.
  *
@@ -212,13 +205,12 @@ EventBus.prototype.off = function (events, callback) {
  *
  * @return {Object} event, recognized by the eventBus
  */
-
-
 EventBus.prototype.createEvent = function (data) {
   var event = new InternalEvent();
   event.init(data);
   return event;
 };
+
 /**
  * Fires a named event.
  *
@@ -249,45 +241,40 @@ EventBus.prototype.createEvent = function (data) {
  * @return {boolean} the events return value, if specified or false if the
  *                   default action was prevented by listeners
  */
-
-
 EventBus.prototype.fire = function (type, data) {
   var event, firstListener, returnValue, args;
   args = slice.call(arguments);
-
   if (typeof type === 'object') {
     data = type;
     type = data.type;
   }
-
   if (!type) {
     throw new Error('no event type specified');
   }
-
   firstListener = this._listeners[type];
-
   if (!firstListener) {
     return;
-  } // we make sure we fire instances of our home made
-  // events here. We wrap them only once, though
-
+  }
 
+  // we make sure we fire instances of our home made
+  // events here. We wrap them only once, though
   if (data instanceof InternalEvent) {
     // we are fine, we alread have an event
     event = data;
   } else {
     event = this.createEvent(data);
-  } // ensure we pass the event as the first parameter
-
+  }
 
-  args[0] = event; // original event type (in case we delegate)
+  // ensure we pass the event as the first parameter
+  args[0] = event;
 
-  var originalType = event.type; // update event type before delegation
+  // original event type (in case we delegate)
+  var originalType = event.type;
 
+  // update event type before delegation
   if (type !== originalType) {
     event.type = type;
   }
-
   try {
     returnValue = this._invokeListeners(event, args, firstListener);
   } finally {
@@ -295,60 +282,51 @@ EventBus.prototype.fire = function (type, data) {
     if (type !== originalType) {
       event.type = originalType;
     }
-  } // set the return value to false if the event default
-  // got prevented and no other return value exists
-
+  }
 
+  // set the return value to false if the event default
+  // got prevented and no other return value exists
   if (returnValue === undefined && event.defaultPrevented) {
     returnValue = false;
   }
-
   return returnValue;
 };
-
 EventBus.prototype.handleError = function (error) {
   return this.fire('error', {
     error: error
   }) === false;
 };
-
 EventBus.prototype._destroy = function () {
   this._listeners = {};
 };
-
 EventBus.prototype._invokeListeners = function (event, args, listener) {
   var returnValue;
-
   while (listener) {
     // handle stopped propagation
     if (event.cancelBubble) {
       break;
     }
-
     returnValue = this._invokeListener(event, args, listener);
     listener = listener.next;
   }
-
   return returnValue;
 };
-
 EventBus.prototype._invokeListener = function (event, args, listener) {
   var returnValue;
-
   if (listener.callback.__isTomb) {
     return returnValue;
   }
-
   try {
     // returning false prevents the default action
-    returnValue = invokeFunction(listener.callback, args); // stop propagation on return value
+    returnValue = invokeFunction(listener.callback, args);
 
+    // stop propagation on return value
     if (returnValue !== undefined) {
       event.returnValue = returnValue;
       event.stopPropagation();
-    } // prevent default on return false
-
+    }
 
+    // prevent default on return false
     if (returnValue === false) {
       event.preventDefault();
     }
@@ -358,9 +336,9 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
       throw error;
     }
   }
-
   return returnValue;
 };
+
 /*
  * Add new listener with a certain priority to the list
  * of listeners (for the given event).
@@ -377,67 +355,54 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
  * @param {string} event
  * @param {Object} listener { priority, callback }
  */
-
-
 EventBus.prototype._addListener = function (event, newListener) {
   var listener = this._getListeners(event),
-      previousListener; // no prior listeners
-
+    previousListener;
 
+  // no prior listeners
   if (!listener) {
     this._setListeners(event, newListener);
-
     return;
-  } // ensure we order listeners by priority from
-  // 0 (high) to n > 0 (low)
-
+  }
 
+  // ensure we order listeners by priority from
+  // 0 (high) to n > 0 (low)
   while (listener) {
     if (listener.priority < newListener.priority) {
       newListener.next = listener;
-
       if (previousListener) {
         previousListener.next = newListener;
       } else {
         this._setListeners(event, newListener);
       }
-
       return;
     }
-
     previousListener = listener;
     listener = listener.next;
-  } // add new listener to back
-
+  }
 
+  // add new listener to back
   previousListener.next = newListener;
 };
-
 EventBus.prototype._getListeners = function (name) {
   return this._listeners[name];
 };
-
 EventBus.prototype._setListeners = function (name, listener) {
   this._listeners[name] = listener;
 };
-
 EventBus.prototype._removeListener = function (event, callback) {
   var listener = this._getListeners(event),
-      nextListener,
-      previousListener,
-      listenerCallback;
-
+    nextListener,
+    previousListener,
+    listenerCallback;
   if (!callback) {
     // clear listeners
     this._setListeners(event, null);
-
     return;
   }
-
   while (listener) {
     nextListener = listener.next;
     listenerCallback = listener.callback;
-
     if (listenerCallback === callback || listenerCallback[FN_REF] === callback) {
       if (previousListener) {
         previousListener.next = nextListener;
@@ -446,29 +411,25 @@ EventBus.prototype._removeListener = function (event, callback) {
         this._setListeners(event, nextListener);
       }
     }
-
     previousListener = listener;
     listener = nextListener;
   }
 };
+
 /**
  * A event that is emitted via the event bus.
  */
-
-
 function InternalEvent() {}
-
 InternalEvent.prototype.stopPropagation = function () {
   this.cancelBubble = true;
 };
-
 InternalEvent.prototype.preventDefault = function () {
   this.defaultPrevented = true;
 };
-
 InternalEvent.prototype.init = function (data) {
   assign(this, data || {});
 };
+
 /**
  * Invoke function. Be fast...
  *
@@ -477,50 +438,47 @@ InternalEvent.prototype.init = function (data) {
  *
  * @return {Any}
  */
-
-
 function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
+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 {
       validate
     } = field;
     let errors = [];
-
     if (!validate) {
       return errors;
     }
-
     if (validate.pattern && value && !new RegExp(validate.pattern).test(value)) {
       errors = [...errors, `Field must match pattern ${validate.pattern}.`];
     }
-
     if (validate.required && (isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
-
     if ('min' in validate && value && value < validate.min) {
       errors = [...errors, `Field must have minimum value of ${validate.min}.`];
     }
-
     if ('max' in validate && value && value > validate.max) {
       errors = [...errors, `Field must have maximum value of ${validate.max}.`];
     }
-
     if ('minLength' in validate && value && value.trim().length < validate.minLength) {
       errors = [...errors, `Field must have minimum length of ${validate.minLength}.`];
     }
-
     if ('maxLength' in validate && value && value.trim().length > validate.maxLength) {
       errors = [...errors, `Field must have maximum length of ${validate.maxLength}.`];
     }
-
+    if ('validationType' in validate && value && validate.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
+      errors = [...errors, 'Field must be a valid  international phone number. (e.g. +4930664040900)'];
+    }
+    if ('validationType' in validate && value && validate.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
+      errors = [...errors, 'Field must be a valid email.'];
+    }
     return errors;
   }
-
 }
 Validator.$inject = [];
 
@@ -532,59 +490,44 @@ class FormFieldRegistry {
     this._ids = new Ids([32, 36, 1]);
     this._keys = new Ids([32, 36, 1]);
   }
-
   add(formField) {
     const {
       id
     } = formField;
-
     if (this._formFields[id]) {
       throw new Error(`form field with ID ${id} already exists`);
     }
-
     this._eventBus.fire('formField.add', {
       formField
     });
-
     this._formFields[id] = formField;
   }
-
   remove(formField) {
     const {
       id
     } = formField;
-
     if (!this._formFields[id]) {
       return;
     }
-
     this._eventBus.fire('formField.remove', {
       formField
     });
-
     delete this._formFields[id];
   }
-
   get(id) {
     return this._formFields[id];
   }
-
   getAll() {
     return Object.values(this._formFields);
   }
-
   forEach(callback) {
     this.getAll().forEach(formField => callback(formField));
   }
-
   clear() {
     this._formFields = {};
-
     this._ids.clear();
-
     this._keys.clear();
   }
-
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
@@ -615,7 +558,6 @@ function pathParse(path) {
   if (!path) {
     return [];
   }
-
   return path.split('.').map(key => {
     return isNaN(parseInt(key)) ? key : parseInt(key);
   });
@@ -627,7 +569,6 @@ function pathStringify(path) {
   if (!path) {
     return '';
   }
-
   return path.join('.');
 }
 const indices = {};
@@ -637,22 +578,22 @@ function generateIndexForType(type) {
   } else {
     indices[type] = 1;
   }
-
   return indices[type];
 }
 function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
+
 /**
  * @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
  *
@@ -665,26 +606,21 @@ function getSchemaVariables(schema) {
   if (!schema.components) {
     return [];
   }
-
   return schema.components.reduce((variables, component) => {
     const {
       key,
       valuesKey,
       type
     } = component;
-
     if (['text', 'button'].includes(type)) {
       return variables;
     }
-
     if (key) {
       variables = [...variables, key];
     }
-
     if (valuesKey && !variables.includes(valuesKey)) {
       variables = [...variables, valuesKey];
     }
-
     return variables;
   }, []);
 }
@@ -699,6 +635,7 @@ class Importer {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
   }
+
   /**
    * Import schema adding `id`, `_parent` and `_path`
    * information to each field and adding it to the
@@ -709,15 +646,12 @@ class Importer {
    *
    * @return { { warnings: Array<any>, schema: any, data: any } }
    */
-
-
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
     const warnings = [];
-
     try {
       const importedSchema = this.importFormField(clone(schema)),
-            importedData = this.importData(clone(data));
+        importedData = this.importData(clone(data));
       return {
         warnings,
         schema: importedSchema,
@@ -728,14 +662,13 @@ class Importer {
       throw err;
     }
   }
+
   /**
    * @param {any} formField
    * @param {string} [parentId]
    *
    * @return {any} importedField
    */
-
-
   importFormField(formField, parentId) {
     const {
       components,
@@ -743,64 +676,53 @@ class Importer {
       type,
       id = generateIdForType(type)
     } = formField;
-
     if (parentId) {
       // set form field parent
       formField._parent = parentId;
     }
-
     if (!this._formFields.get(type)) {
       throw new Error(`form field of type <${type}> not supported`);
     }
-
     if (key) {
       // validate <key> uniqueness
       if (this._formFieldRegistry._keys.assigned(key)) {
         throw new Error(`form field with key <${key}> already exists`);
       }
+      this._formFieldRegistry._keys.claim(key, formField);
 
-      this._formFieldRegistry._keys.claim(key, formField); // TODO: buttons should not have key
-
-
+      // TODO: buttons should not have key
       if (type !== 'button') {
         // set form field path
         formField._path = [key];
       }
     }
-
     if (id) {
       // validate <id> uniqueness
       if (this._formFieldRegistry._ids.assigned(id)) {
         throw new Error(`form field with id <${id}> already exists`);
       }
-
       this._formFieldRegistry._ids.claim(id, formField);
-    } // set form field ID
-
+    }
 
+    // set form field ID
     formField.id = id;
-
     this._formFieldRegistry.add(formField);
-
     if (components) {
       this.importFormFields(components, id);
     }
-
     return formField;
   }
-
   importFormFields(components, parentId) {
     components.forEach(component => {
       this.importFormField(component, parentId);
     });
   }
+
   /**
    * @param {Object} data
    *
    * @return {Object} importedData
    */
-
-
   importData(data) {
     return this._formFieldRegistry.getAll().reduce((importedData, formField) => {
       const {
@@ -808,22 +730,24 @@ class Importer {
         _path,
         type,
         valuesKey
-      } = formField; // get values defined via valuesKey
+      } = formField;
+
+      // get values defined via valuesKey
 
       if (valuesKey) {
-        importedData = { ...importedData,
+        importedData = {
+          ...importedData,
           [valuesKey]: get(data, [valuesKey])
         };
-      } // try to get value from data
+      }
+
+      // try to get value from data
       // if unavailable - try to get default value from form field
       // if unavailable - get empty value from form field
 
-
       if (_path) {
         const fieldImplementation = this._formFields.get(type);
-
         let valueData = get(data, _path);
-
         if (!isUndefined(valueData) && fieldImplementation.sanitizeValue) {
           valueData = fieldImplementation.sanitizeValue({
             formField,
@@ -831,17 +755,15 @@ class Importer {
             value: valueData
           });
         }
-
         const initialFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
-        importedData = { ...importedData,
+        importedData = {
+          ...importedData,
           [_path[0]]: initialFieldValue
         };
       }
-
       return importedData;
     }, {});
   }
-
 }
 Importer.$inject = ['formFieldRegistry', 'formFields'];
 
@@ -850,30 +772,26 @@ var importModule = {
 };
 
 const NODE_TYPE_TEXT = 3,
-      NODE_TYPE_ELEMENT = 1;
+  NODE_TYPE_ELEMENT = 1;
 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 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');
+
 /**
  * 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');
   doc.normalize();
   const element = doc.body.firstChild;
-
   if (element) {
-    sanitizeNode(
-    /** @type Element */
-    element);
+    sanitizeNode( /** @type Element */element);
     return new XMLSerializer().serializeToString(element);
   } else {
     // handle the case that document parsing
@@ -881,6 +799,7 @@ function sanitizeHTML(html) {
     return '';
   }
 }
+
 /**
  * Recursively sanitize a HTML node, potentially
  * removing it, its children or attributes.
@@ -891,51 +810,48 @@ function sanitizeHTML(html) {
  *
  * @param {Element} node
  */
-
 function sanitizeNode(node) {
   // allow text nodes
   if (node.nodeType === NODE_TYPE_TEXT) {
     return;
-  } // disallow all other nodes but Element
-
+  }
 
+  // disallow all other nodes but Element
   if (node.nodeType !== NODE_TYPE_ELEMENT) {
     return node.remove();
   }
+  const lcTag = node.tagName.toLowerCase();
 
-  const lcTag = node.tagName.toLowerCase(); // disallow non-whitelisted tags
-
+  // disallow non-whitelisted tags
   if (!ALLOWED_NODES.includes(lcTag)) {
     return node.remove();
   }
+  const attributes = node.attributes;
 
-  const attributes = node.attributes; // clean attributes
-
+  // clean attributes
   for (let i = attributes.length; i--;) {
     const attribute = attributes[i];
     const name = attribute.name;
-    const lcName = name.toLowerCase(); // normalize node value
+    const lcName = name.toLowerCase();
 
+    // normalize node value
     const value = attribute.value.trim();
     node.removeAttribute(name);
     const valid = isValidAttribute(lcTag, lcName, value);
-
     if (valid) {
       node.setAttribute(name, value);
     }
-  } // force noopener on target="_blank" links
-
+  }
 
+  // force noopener on target="_blank" links
   if (lcTag === 'a' && node.getAttribute('target') === '_blank' && node.getAttribute('rel') !== 'noopener') {
     node.setAttribute('rel', 'noopener');
   }
-
   for (let i = node.childNodes.length; i--;) {
-    sanitizeNode(
-    /** @type Element */
-    node.childNodes[i]);
+    sanitizeNode( /** @type Element */node.childNodes[i]);
   }
 }
+
 /**
  * Validates attributes for validity.
  *
@@ -944,56 +860,51 @@ function sanitizeNode(node) {
  * @param {string} value
  * @return {boolean}
  */
-
-
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
   if (!ALLOWED_ATTRIBUTES.includes(lcName)) {
     return false;
-  } // disallow "DOM clobbering" / polution of document and wrapping form elements
-
+  }
 
+  // disallow "DOM clobbering" / polution of document and wrapping form elements
   if ((lcName === 'id' || lcName === 'name') && (value in document || value in FORM_ELEMENT)) {
     return false;
   }
-
   if (lcName === 'target' && value !== '_blank') {
     return false;
-  } // allow valid url links only
-
+  }
 
+  // allow valid url links only
   if (lcName === 'href' && !ALLOWED_URI_PATTERN.test(value.replace(ATTR_WHITESPACE_PATTERN, ''))) {
     return false;
   }
-
   return true;
 }
 
-function formFieldClasses(type, errors = []) {
+function formFieldClasses(type, {
+  errors = [],
+  disabled = false
+} = {}) {
   if (!type) {
     throw new Error('type required');
   }
-
-  const classes = ['fjs-form-field', `fjs-form-field-${type}`];
-
-  if (errors.length) {
-    classes.push('fjs-has-errors');
-  }
-
-  return classes.join(' ');
+  return classNames('fjs-form-field', `fjs-form-field-${type}`, {
+    'fjs-has-errors': errors.length > 0,
+    'fjs-disabled': disabled
+  });
 }
 function prefixId(id, formId) {
   if (formId) {
     return `fjs-form-${formId}-${id}`;
   }
-
   return `fjs-form-${id}`;
 }
 function markdownToHTML(markdown) {
   const htmls = markdown.split(/(?:\r?\n){2,}/).map(line => /^((\d+.)|[><\s#-*])/.test(line) ? snarkdown(line) : `<p>${snarkdown(line)}</p>`);
   return htmls.join('\n\n');
-} // see https://github.com/developit/snarkdown/issues/70
+}
 
+// see https://github.com/developit/snarkdown/issues/70
 function safeMarkdown(markdown) {
   const html = markdownToHTML(markdown);
   return sanitizeHTML(html);
@@ -1008,7 +919,6 @@ function sanitizeSingleSelectValue(options) {
     valuesKey,
     values
   } = formField;
-
   try {
     const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
     return validValues.includes(value) ? value : null;
@@ -1028,7 +938,6 @@ function sanitizeMultiSelectValue(options) {
     valuesKey,
     values
   } = formField;
-
   try {
     const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
     return value.filter(v => validValues.includes(v));
@@ -1039,7 +948,7 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$8 = 'button';
+const type$9 = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1049,7 +958,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1058,15 +967,13 @@ function Button(props) {
     })
   });
 }
-
 Button.create = function (options = {}) {
   return {
     action: 'submit',
     ...options
   };
 };
-
-Button.type = type$8;
+Button.type = type$9;
 Button.label = 'Button';
 Button.keyed = true;
 
@@ -1088,9 +995,7 @@ const FormRenderContext = createContext({
  *
  * @returns {any}
  */
-
 function getService(type, strict) {}
-
 const FormContext = createContext({
   getService,
   formId: null
@@ -1100,11 +1005,9 @@ function Description(props) {
   const {
     description
   } = props;
-
   if (!description) {
     return null;
   }
-
   return jsx("div", {
     class: "fjs-form-field-description",
     children: description
@@ -1115,11 +1018,9 @@ function Errors(props) {
   const {
     errors
   } = props;
-
   if (!errors.length) {
     return null;
   }
-
   return jsx("div", {
     class: "fjs-form-field-error",
     children: jsx("ul", {
@@ -1140,7 +1041,7 @@ function Label(props) {
   } = props;
   return jsxs("label", {
     for: id,
-    class: "fjs-form-field-label",
+    class: classNames('fjs-form-field-label', props['class']),
     children: [props.children, label || '', required && jsx("span", {
       class: "fjs-asterix",
       children: "*"
@@ -1148,7 +1049,7 @@ function Label(props) {
   });
 }
 
-const type$7 = 'checkbox';
+const type$8 = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1161,7 +1062,6 @@ function Checkbox(props) {
     id,
     label
   } = field;
-
   const onChange = ({
     target
   }) => {
@@ -1170,12 +1070,16 @@ function Checkbox(props) {
       value: target.checked
     });
   };
-
   const {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$7, errors),
+    class: classNames(formFieldClasses(type$8, {
+      errors,
+      disabled
+    }), {
+      'fjs-checked': value
+    }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1195,17 +1099,15 @@ function Checkbox(props) {
     })]
   });
 }
-
 Checkbox.create = function (options = {}) {
-  return { ...options
+  return {
+    ...options
   };
 };
-
-Checkbox.type = type$7;
+Checkbox.type = type$8;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
 Checkbox.emptyValue = false;
-
 Checkbox.sanitizeValue = ({
   value
 }) => value === true;
@@ -1220,12 +1122,12 @@ function useService (type, strict) {
 /**
  * @enum { String }
  */
-
 const LOAD_STATES = {
   LOADING: 'loading',
   LOADED: 'loaded',
   ERROR: 'error'
 };
+
 /**
  * @typedef {Object} ValuesGetter
  * @property {Object[]} values - The values data
@@ -1238,7 +1140,6 @@ const LOAD_STATES = {
  * @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 {
     valuesKey,
@@ -1249,15 +1150,11 @@ function useValuesAsync (field) {
     error: undefined,
     state: LOAD_STATES.LOADING
   });
-
   const initialData = useService('form')._getState().initialData;
-
   useEffect(() => {
     let values = [];
-
     if (valuesKey !== undefined) {
       const keyedValues = (initialData || {})[valuesKey];
-
       if (keyedValues && Array.isArray(keyedValues)) {
         values = keyedValues;
       }
@@ -1267,25 +1164,22 @@ function useValuesAsync (field) {
       setValuesGetter(getErrorState('No values source defined in the form definition'));
       return;
     }
-
     setValuesGetter(buildLoadedState(values));
   }, [valuesKey, staticValues, initialData]);
   return valuesGetter;
 }
-
 const getErrorState = error => ({
   values: [],
   error,
   state: LOAD_STATES.ERROR
 });
-
 const buildLoadedState = values => ({
   values,
   error: undefined,
   state: LOAD_STATES.LOADED
 });
 
-const type$6 = 'checklist';
+const type$7 = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1298,22 +1192,18 @@ function Checklist(props) {
     id,
     label
   } = field;
-
   const toggleCheckbox = v => {
     let newValue = [...value];
-
     if (!newValue.includes(v)) {
       newValue.push(v);
     } else {
       newValue = newValue.filter(x => x != v);
     }
-
     props.onChange({
       field,
       value: newValue
     });
   };
-
   const {
     state: loadState,
     values: options
@@ -1322,13 +1212,19 @@ function Checklist(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$6, errors),
+    class: classNames(formFieldClasses(type$7, {
+      errors,
+      disabled
+    })),
     children: [jsx(Label, {
       label: label
     }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
       return jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
         label: v.label,
+        class: classNames({
+          'fjs-checked': value.includes(v.value)
+        }),
         required: false,
         children: jsx("input", {
           checked: value.includes(v.value),
@@ -1346,7 +1242,6 @@ function Checklist(props) {
     })]
   });
 }
-
 Checklist.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -1357,15 +1252,13 @@ Checklist.create = function (options = {}) {
     ...options
   };
 };
-
-Checklist.type = type$6;
+Checklist.type = type$7;
 Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
 
 const noop$1 = () => false;
-
 function FormField(props) {
   const {
     field,
@@ -1375,29 +1268,26 @@ function FormField(props) {
     _path
   } = field;
   const formFields = useService('formFields'),
-        form = useService('form');
-
+    form = useService('form');
   const {
     data,
     errors,
     properties
   } = form._getState();
-
   const {
     Element
   } = useContext(FormRenderContext);
   const FormFieldComponent = formFields.get(field.type);
-
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
-
   const value = get(data, _path);
   const fieldErrors = findErrors(errors, _path);
   const disabled = properties.readOnly || field.disabled || false;
   return jsx(Element, {
     field: field,
-    children: jsx(FormFieldComponent, { ...props,
+    children: jsx(FormFieldComponent, {
+      ...props,
       disabled: disabled,
       errors: fieldErrors,
       onChange: disabled ? noop$1 : onChange,
@@ -1421,21 +1311,20 @@ function Default(props) {
     class: "fjs-vertical-layout",
     field: field,
     children: [components.map(childField => {
-      return createElement(FormField, { ...props,
+      return createElement(FormField, {
+        ...props,
         key: childField.id,
         field: childField
       });
     }), components.length ? null : jsx(Empty, {})]
   });
 }
-
 Default.create = function (options = {}) {
   return {
     components: [],
     ...options
   };
 };
-
 Default.type = 'default';
 Default.keyed = false;
 
@@ -1444,7 +1333,6 @@ Default.keyed = false;
  *
  * @see http://bpmn.io/license for more information.
  */
-
 function Logo() {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1461,16 +1349,13 @@ function Logo() {
     })]
   });
 }
-
 function Lightbox(props) {
   const {
     open
   } = props;
-
   if (!open) {
     return null;
   }
-
   return jsxs("div", {
     class: "fjs-powered-by-lightbox",
     style: "z-index: 100; position: fixed; top: 0; left: 0;right: 0; bottom: 0",
@@ -1498,7 +1383,6 @@ function Lightbox(props) {
     })]
   });
 }
-
 function Link(props) {
   return jsx("div", {
     class: "fjs-powered-by fjs-form-field",
@@ -1515,17 +1399,14 @@ function Link(props) {
     })
   });
 }
-
 function PoweredBy(props) {
   const [open, setOpen] = useState(false);
-
   function toggleOpen(open) {
     return event => {
       event.preventDefault();
       setOpen(open);
     };
   }
-
   return jsxs(Fragment, {
     children: [createPortal(jsx(Lightbox, {
       open: open,
@@ -1537,30 +1418,24 @@ function PoweredBy(props) {
 }
 
 const noop = () => {};
-
 function FormComponent(props) {
   const form = useService('form');
-
   const {
     schema
   } = form._getState();
-
   const {
     onSubmit = noop,
     onReset = noop,
     onChange = noop
   } = props;
-
   const handleSubmit = event => {
     event.preventDefault();
     onSubmit();
   };
-
   const handleReset = event => {
     event.preventDefault();
     onReset();
   };
-
   return jsxs("form", {
     class: "fjs-form",
     onSubmit: handleSubmit,
@@ -1572,7 +1447,7 @@ function FormComponent(props) {
   });
 }
 
-const type$5 = 'number';
+const type$6 = 'number';
 function Number(props) {
   const {
     disabled,
@@ -1589,7 +1464,6 @@ function Number(props) {
   const {
     required
   } = validate;
-
   const onChange = ({
     target
   }) => {
@@ -1600,12 +1474,14 @@ function Number(props) {
       })
     });
   };
-
   const {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$5, errors),
+    class: formFieldClasses(type$6, {
+      errors,
+      disabled
+    }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1624,25 +1500,23 @@ function Number(props) {
     })]
   });
 }
-
 Number.create = function (options = {}) {
-  return { ...options
+  return {
+    ...options
   };
 };
-
 Number.sanitizeValue = ({
   value
 }) => {
   const parsedValue = parseInt(value, 10);
   return isNaN(parsedValue) ? null : parsedValue;
 };
-
-Number.type = type$5;
+Number.type = type$6;
 Number.keyed = true;
 Number.label = 'Number';
 Number.emptyValue = null;
 
-const type$4 = 'radio';
+const type$5 = 'radio';
 function Radio(props) {
   const {
     disabled,
@@ -1659,14 +1533,12 @@ function Radio(props) {
   const {
     required
   } = validate;
-
   const onChange = v => {
     props.onChange({
       field,
       value: v
     });
   };
-
   const {
     state: loadState,
     values: options
@@ -1675,7 +1547,10 @@ function Radio(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$4, errors),
+    class: formFieldClasses(type$5, {
+      errors,
+      disabled
+    }),
     children: [jsx(Label, {
       label: label,
       required: required
@@ -1683,6 +1558,9 @@ function Radio(props) {
       return jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
         label: option.label,
+        class: classNames({
+          'fjs-checked': option.value === value
+        }),
         required: false,
         children: jsx("input", {
           checked: option.value === value,
@@ -1700,7 +1578,6 @@ function Radio(props) {
     })]
   });
 }
-
 Radio.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -1711,14 +1588,13 @@ Radio.create = function (options = {}) {
     ...options
   };
 };
-
-Radio.type = type$4;
+Radio.type = type$5;
 Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
 Radio.sanitizeValue = sanitizeSingleSelectValue;
 
-const type$3 = 'select';
+const type$4 = 'select';
 function Select(props) {
   const {
     disabled,
@@ -1735,7 +1611,6 @@ function Select(props) {
   const {
     required
   } = validate;
-
   const onChange = ({
     target
   }) => {
@@ -1744,7 +1619,6 @@ function Select(props) {
       value: target.value === '' ? null : target.value
     });
   };
-
   const {
     state: loadState,
     values: options
@@ -1753,7 +1627,10 @@ function Select(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$3, errors),
+    class: formFieldClasses(type$4, {
+      errors,
+      disabled
+    }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1779,7 +1656,6 @@ function Select(props) {
     })]
   });
 }
-
 Select.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -1790,8 +1666,7 @@ Select.create = function (options = {}) {
     ...options
   };
 };
-
-Select.type = type$3;
+Select.type = type$4;
 Select.label = 'Select';
 Select.keyed = true;
 Select.emptyValue = null;
@@ -1810,7 +1685,7 @@ var CloseIcon = (({
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z",
-  fill: "#000"
+  fill: "currentColor"
 })));
 
 function useKeyDownAction(targetKey, action, listenerElement = window) {
@@ -1821,7 +1696,6 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
       action();
     }
   }
-
   useEffect(() => {
     listenerElement.addEventListener('keydown', downHandler);
     return () => {
@@ -1831,9 +1705,7 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
 }
 
 const DEFAULT_LABEL_GETTER = value => value;
-
 const NOOP = () => {};
-
 function DropdownList(props) {
   const {
     keyEventsListener = window,
@@ -1853,7 +1725,6 @@ function DropdownList(props) {
   }, [values.length]);
   useEffect(() => {
     if (focusedValueIndex === 0) return;
-
     if (!focusedValueIndex || !values.length) {
       setFocusedValueIndex(0);
     } else if (focusedValueIndex >= values.length) {
@@ -1879,7 +1750,6 @@ function DropdownList(props) {
   }, keyEventsListener);
   useEffect(() => {
     const individualEntries = dropdownContainer.current.children;
-
     if (individualEntries.length && !mouseControl) {
       individualEntries[focusedValueIndex].scrollIntoView({
         block: 'nearest',
@@ -1887,23 +1757,19 @@ function DropdownList(props) {
       });
     }
   }, [focusedValueIndex, mouseControl]);
-
   const mouseMove = (e, i) => {
     const userMoved = !mouseScreenPos.current || mouseScreenPos.current.x !== e.screenX && mouseScreenPos.current.y !== e.screenY;
-
     if (userMoved) {
       mouseScreenPos.current = {
         x: e.screenX,
         y: e.screenY
       };
-
       if (!mouseControl) {
         setMouseControl(true);
         setFocusedValueIndex(i);
       }
     }
   };
-
   return jsxs("div", {
     ref: dropdownContainer,
     tabIndex: -1,
@@ -1929,7 +1795,7 @@ function DropdownList(props) {
   });
 }
 
-const type$2 = 'taglist';
+const type$3 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
@@ -1954,12 +1820,14 @@ function Taglist(props) {
   const {
     state: loadState,
     values: options
-  } = useValuesAsync(field); // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
+  } = useValuesAsync(field);
 
+  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
     [o.value]: options[x]
-  }))), [options]); // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
+  }))), [options]);
 
+  // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
   useEffect(() => {
     if (loadState === LOAD_STATES.LOADED) {
       setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
@@ -1970,37 +1838,32 @@ function Taglist(props) {
   useEffect(() => {
     setHasOptionsLeft(options.length > values.length);
   }, [options.length, values.length]);
-
   const onFilterChange = ({
     target
   }) => {
     setIsEscapeClose(false);
     setFilter(target.value);
   };
-
   const selectValue = value => {
     if (filter) {
       setFilter('');
-    } // Ensure values cannot be double selected due to latency
-
+    }
 
+    // Ensure values cannot be double selected due to latency
     if (values.at(-1) === value) {
       return;
     }
-
     props.onChange({
       value: [...values, value],
       field
     });
   };
-
   const deselectValue = value => {
     props.onChange({
       value: values.filter(v => v != value),
       field
     });
   };
-
   const onInputKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
@@ -2008,49 +1871,63 @@ function Taglist(props) {
         // We do not want the cursor to seek in the search field when we press up and down
         e.preventDefault();
         break;
-
       case 'Backspace':
         if (!filter && values.length) {
           deselectValue(values[values.length - 1]);
         }
-
         break;
-
       case 'Escape':
         setIsEscapeClose(true);
         break;
-
       case 'Enter':
         if (isEscapeClosed) {
           setIsEscapeClose(false);
         }
-
         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$2, errors),
+    class: formFieldClasses(type$3, {
+      errors,
+      disabled
+    }),
     children: [jsx(Label, {
       label: label,
-      id: prefixId(id, formId)
+      id: prefixId(`${id}-search`, formId)
     }), jsxs("div", {
       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",
@@ -2085,7 +1962,6 @@ function Taglist(props) {
     })]
   });
 }
-
 Taglist.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -2096,14 +1972,13 @@ Taglist.create = function (options = {}) {
     ...options
   };
 };
-
-Taglist.type = type$2;
+Taglist.type = type$3;
 Taglist.label = 'Taglist';
 Taglist.keyed = true;
 Taglist.emptyValue = [];
 Taglist.sanitizeValue = sanitizeMultiSelectValue;
 
-const type$1 = 'text';
+const type$2 = 'text';
 function Text(props) {
   const {
     field
@@ -2112,25 +1987,23 @@ function Text(props) {
     text = ''
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$1),
+    class: formFieldClasses(type$2),
     children: jsx(Markup, {
       markup: safeMarkdown(text),
       trim: false
     })
   });
 }
-
 Text.create = function (options = {}) {
   return {
     text: '# Text',
     ...options
   };
 };
-
-Text.type = type$1;
+Text.type = type$2;
 Text.keyed = false;
 
-const type = 'textfield';
+const type$1 = 'textfield';
 function Textfield(props) {
   const {
     disabled,
@@ -2147,7 +2020,6 @@ function Textfield(props) {
   const {
     required
   } = validate;
-
   const onChange = ({
     target
   }) => {
@@ -2156,12 +2028,14 @@ function Textfield(props) {
       value: target.value
     });
   };
-
   const {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type, errors),
+    class: formFieldClasses(type$1, {
+      errors,
+      disabled
+    }),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -2180,22 +2054,101 @@ function Textfield(props) {
     })]
   });
 }
-
 Textfield.create = function (options = {}) {
-  return { ...options
+  return {
+    ...options
   };
 };
-
-Textfield.type = type;
-Textfield.label = 'Text Field';
+Textfield.type = type$1;
+Textfield.label = 'Text field';
 Textfield.keyed = true;
 Textfield.emptyValue = '';
-
 Textfield.sanitizeValue = ({
   value
-}) => isArray(value) || isObject(value) ? null : String(value);
+}) => isArray(value) || isObject(value) ? '' : String(value);
+
+const type = 'textarea';
+function Textarea(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value = ''
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    validate = {}
+  } = field;
+  const {
+    required
+  } = validate;
+  const textareaRef = useRef();
+  const onInput = ({
+    target
+  }) => {
+    props.onChange({
+      field,
+      value: target.value
+    });
+  };
+  const autoSizeTextarea = useCallback(textarea => {
+    // Ensures the textarea shrinks back, and improves resizing behavior consistency
+    textarea.style.height = '0px';
+    const computed = window.getComputedStyle(textarea);
+    const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + textarea.scrollHeight + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
+    const minHeight = 75;
+    const maxHeight = 350;
+    const displayHeight = Math.max(Math.min(calculatedHeight, maxHeight), minHeight);
+    textarea.style.height = `${displayHeight}px`;
+
+    // Overflow is hidden by default to hide scrollbar flickering
+    textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
+  }, []);
+  useEffect(() => {
+    autoSizeTextarea(textareaRef.current);
+  }, [autoSizeTextarea, value]);
+  const {
+    formId
+  } = useContext(FormContext);
+  return jsxs("div", {
+    class: formFieldClasses(type, {
+      errors,
+      disabled
+    }),
+    children: [jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), jsx("textarea", {
+      class: "fjs-textarea",
+      disabled: disabled,
+      id: prefixId(id, formId),
+      onInput: onInput,
+      value: value,
+      ref: textareaRef
+    }), jsx(Description, {
+      description: description
+    }), jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+Textarea.create = function (options = {}) {
+  return {
+    ...options
+  };
+};
+Textarea.type = type;
+Textarea.label = 'Text area';
+Textarea.keyed = true;
+Textarea.emptyValue = '';
+Textarea.sanitizeValue = ({
+  value
+}) => isArray(value) || isObject(value) ? '' : String(value);
 
-const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield];
+const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -2207,15 +2160,12 @@ class FormFields {
       this.register(type, formField);
     });
   }
-
   register(type, formField) {
     this._formFields[type] = formField;
   }
-
   get(type) {
     return this._formFields[type];
   }
-
 }
 
 function Renderer(config, eventBus, form, injector) {
@@ -2225,7 +2175,6 @@ function Renderer(config, eventBus, form, injector) {
       getService(type, strict = true) {
         return injector.get(type, strict);
       },
-
       formId: form._id
     };
     eventBus.on('changed', newState => {
@@ -2247,11 +2196,9 @@ function Renderer(config, eventBus, form, injector) {
     const {
       schema
     } = state;
-
     if (!schema) {
       return null;
     }
-
     return jsx(FormContext.Provider, {
       value: formContext,
       children: jsx(FormComponent, {
@@ -2261,7 +2208,6 @@ function Renderer(config, eventBus, form, injector) {
       })
     });
   };
-
   const {
     container
   } = config;
@@ -2311,10 +2257,10 @@ var core = {
  */
 
 const ids = new Ids([32, 36, 1]);
+
 /**
  * The form.
  */
-
 class Form {
   /**
    * @constructor
@@ -2326,28 +2272,28 @@ class Form {
      * @type {OnEventType}
      */
     this.on = this._onEvent;
+
     /**
      * @public
      * @type {String}
      */
-
     this._id = ids.next();
+
     /**
      * @private
      * @type {Element}
      */
-
     this._container = createFormContainer();
     const {
       container,
       injector = this._createInjector(options, this._container),
       properties = {}
     } = options;
+
     /**
      * @private
      * @type {State}
      */
-
     this._state = {
       initialData: null,
       data: null,
@@ -2358,33 +2304,31 @@ class Form {
     this.get = injector.get;
     this.invoke = injector.invoke;
     this.get('eventBus').fire('form.init');
-
     if (container) {
       this.attachTo(container);
     }
   }
-
   clear() {
     // clear form services
-    this._emit('diagram.clear'); // clear diagram services (e.g. EventBus)
-
+    this._emit('diagram.clear');
 
+    // clear diagram services (e.g. EventBus)
     this._emit('form.clear');
   }
+
   /**
    * Destroy the form, removing it from DOM,
    * if attached.
    */
-
-
   destroy() {
     // destroy form services
-    this.get('eventBus').fire('form.destroy'); // destroy diagram services (e.g. EventBus)
+    this.get('eventBus').fire('form.destroy');
 
+    // destroy diagram services (e.g. EventBus)
     this.get('eventBus').fire('diagram.destroy');
-
     this._detach(false);
   }
+
   /**
    * Open a form schema with the given initial data.
    *
@@ -2393,8 +2337,6 @@ class Form {
    *
    * @return Promise<{ warnings: Array<any> }>
    */
-
-
   importSchema(schema, data = {}) {
     return new Promise((resolve, reject) => {
       try {
@@ -2404,18 +2346,15 @@ class Form {
           data: importedData,
           warnings
         } = this.get('importer').importSchema(schema, data);
-
         this._setState({
           data: importedData,
           errors: {},
           schema: importedSchema,
           initialData: clone(importedData)
         });
-
         this._emit('import.done', {
           warnings
         });
-
         return resolve({
           warnings
         });
@@ -2424,154 +2363,124 @@ class Form {
           error,
           warnings: error.warnings || []
         });
-
         return reject(error);
       }
     });
   }
+
   /**
    * Submit the form, triggering all field validations.
    *
    * @returns { { data: Data, errors: Errors } }
    */
-
-
   submit() {
     const {
       properties
     } = this._getState();
-
     if (properties.readOnly) {
       throw new Error('form is read-only');
     }
-
     const data = this._getSubmitData();
-
     const errors = this.validate();
-
     this._emit('submit', {
       data,
       errors
     });
-
     return {
       data,
       errors
     };
   }
-
   reset() {
     this._emit('reset');
-
     this._setState({
       data: clone(this._state.initialData),
       errors: {}
     });
   }
+
   /**
    * @returns {Errors}
    */
-
-
   validate() {
     const formFieldRegistry = this.get('formFieldRegistry'),
-          validator = this.get('validator');
-
+      validator = this.get('validator');
     const {
       data
     } = this._getState();
-
     const errors = formFieldRegistry.getAll().reduce((errors, field) => {
       const {
         disabled,
         _path
       } = field;
-
       if (disabled) {
         return errors;
       }
-
       const value = get(data, _path);
       const fieldErrors = validator.validateField(field, value);
       return set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
-    },
-    /** @type {Errors} */
-    {});
-
+    }, /** @type {Errors} */{});
     this._setState({
       errors
     });
-
     return errors;
   }
+
   /**
    * @param {Element|string} parentNode
    */
-
-
   attachTo(parentNode) {
     if (!parentNode) {
       throw new Error('parentNode required');
     }
-
     this.detach();
-
     if (isString(parentNode)) {
       parentNode = document.querySelector(parentNode);
     }
-
     const container = this._container;
     parentNode.appendChild(container);
-
     this._emit('attach');
   }
-
   detach() {
     this._detach();
   }
+
   /**
    * @private
    *
    * @param {boolean} [emit]
    */
-
-
   _detach(emit = true) {
     const container = this._container,
-          parentNode = container.parentNode;
-
+      parentNode = container.parentNode;
     if (!parentNode) {
       return;
     }
-
     if (emit) {
       this._emit('detach');
     }
-
     parentNode.removeChild(container);
   }
+
   /**
    * @param {FormProperty} property
    * @param {any} value
    */
-
-
   setProperty(property, value) {
     const properties = set(this._getState().properties, [property], value);
-
     this._setState({
       properties
     });
   }
+
   /**
    * @param {FormEvent} type
    * @param {Function} handler
    */
-
-
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
+
   /**
    * @private
    *
@@ -2580,8 +2489,6 @@ class Form {
    *
    * @returns {Injector}
    */
-
-
   _createInjector(options, container) {
     const {
       additionalModules = [],
@@ -2598,21 +2505,19 @@ class Form {
       form: ['value', this]
     }, core, ...modules, ...additionalModules]);
   }
+
   /**
    * @private
    */
-
-
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
+
   /**
    * @internal
    *
    * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
    */
-
-
   _update(update) {
     const {
       field,
@@ -2621,77 +2526,71 @@ class Form {
     const {
       _path
     } = field;
-
     let {
       data,
       errors
     } = this._getState();
-
     const validator = this.get('validator');
     const fieldErrors = validator.validateField(field, value);
     set(data, _path, value);
     set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
-
     this._setState({
       data: clone(data),
       errors: clone(errors)
     });
   }
+
   /**
    * @internal
    */
-
-
   _getState() {
     return this._state;
   }
+
   /**
    * @internal
    */
-
-
   _setState(state) {
-    this._state = { ...this._state,
+    this._state = {
+      ...this._state,
       ...state
     };
-
     this._emit('changed', this._getState());
   }
+
   /**
    * @internal
    */
-
-
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);
   }
+
   /**
    * @internal
    */
-
-
   _getSubmitData() {
     const formFieldRegistry = this.get('formFieldRegistry');
     return formFieldRegistry.getAll().reduce((data, field) => {
       const {
         disabled,
         _path
-      } = field; // do not submit disabled form fields
+      } = field;
 
+      // do not submit disabled form fields
       if (disabled || !_path) {
         return data;
       }
-
       const value = get(this._getState().data, _path);
-      return { ...data,
+      return {
+        ...data,
         [_path[0]]: value
       };
     }, {});
   }
-
 }
 
-const schemaVersion = 5;
+const schemaVersion = 6;
+
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
  */
@@ -2703,7 +2602,6 @@ const schemaVersion = 5;
  *
  * @return {Promise<Form>}
  */
-
 function createForm(options) {
   const {
     data,
@@ -2716,5 +2614,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Number, Radio, Select, Taglist, Text, 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, Number, 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