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

package/dist/index.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Ids = require('ids');
 var minDash = require('min-dash');
 var snarkdown = require('@bpmn-io/snarkdown');
+var classNames = require('classnames');
 var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var preact = require('preact');
 var React = require('preact/compat');
-var classNames = require('classnames');
 var Markup = require('preact-markup');
 var didi = require('didi');
 
@@ -17,13 +17,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
 var snarkdown__default = /*#__PURE__*/_interopDefaultLegacy(snarkdown);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Markup__default = /*#__PURE__*/_interopDefaultLegacy(Markup);
 
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 1000;
 var slice = Array.prototype.slice;
+
 /**
  * A general purpose event bus.
  *
@@ -107,13 +108,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.
  *
@@ -131,30 +133,25 @@ function EventBus() {
  * @param {Function} callback
  * @param {Object} [that] Pass context (`this`) to the callback
  */
-
 EventBus.prototype.on = function (events, priority, callback, that) {
   events = minDash.isArray(events) ? events : [events];
-
   if (minDash.isFunction(priority)) {
     that = callback;
     callback = priority;
     priority = DEFAULT_PRIORITY;
   }
-
   if (!minDash.isNumber(priority)) {
     throw new Error('priority must be a number');
   }
-
   var actualCallback = callback;
-
   if (that) {
-    actualCallback = minDash.bind(callback, that); // make sure we remember and are able to remove
+    actualCallback = minDash.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, {
@@ -164,6 +161,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
     });
   });
 };
+
 /**
  * Register an event listener that is executed only once.
  *
@@ -172,34 +170,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 (minDash.isFunction(priority)) {
     that = callback;
     callback = priority;
     priority = DEFAULT_PRIORITY;
   }
-
   if (!minDash.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.
  *
@@ -208,8 +202,6 @@ EventBus.prototype.once = function (event, priority, callback, that) {
  * @param {string|Array<string>} events
  * @param {Function} [callback]
  */
-
-
 EventBus.prototype.off = function (events, callback) {
   events = minDash.isArray(events) ? events : [events];
   var self = this;
@@ -217,6 +209,7 @@ EventBus.prototype.off = function (events, callback) {
     self._removeListener(event, callback);
   });
 };
+
 /**
  * Create an EventBus event.
  *
@@ -224,13 +217,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.
  *
@@ -261,45 +253,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 {
@@ -307,60 +294,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();
     }
@@ -370,9 +348,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).
@@ -389,67 +367,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;
@@ -458,29 +423,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) {
   minDash.assign(this, data || {});
 };
+
 /**
  * Invoke function. Be fast...
  *
@@ -489,50 +450,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 && (minDash.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 = [];
 
@@ -544,59 +502,44 @@ class FormFieldRegistry {
     this._ids = new Ids__default['default']([32, 36, 1]);
     this._keys = new Ids__default['default']([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'];
 
@@ -627,7 +570,6 @@ function pathParse(path) {
   if (!path) {
     return [];
   }
-
   return path.split('.').map(key => {
     return isNaN(parseInt(key)) ? key : parseInt(key);
   });
@@ -639,7 +581,6 @@ function pathStringify(path) {
   if (!path) {
     return '';
   }
-
   return path.join('.');
 }
 const indices = {};
@@ -649,22 +590,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
  *
@@ -677,26 +618,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;
   }, []);
 }
@@ -711,6 +647,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
@@ -721,15 +658,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,
@@ -740,14 +674,13 @@ class Importer {
       throw err;
     }
   }
+
   /**
    * @param {any} formField
    * @param {string} [parentId]
    *
    * @return {any} importedField
    */
-
-
   importFormField(formField, parentId) {
     const {
       components,
@@ -755,64 +688,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 {
@@ -820,22 +742,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]: minDash.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 = minDash.get(data, _path);
-
         if (!minDash.isUndefined(valueData) && fieldImplementation.sanitizeValue) {
           valueData = fieldImplementation.sanitizeValue({
             formField,
@@ -843,17 +767,15 @@ class Importer {
             value: valueData
           });
         }
-
         const initialFieldValue = !minDash.isUndefined(valueData) ? valueData : !minDash.isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
-        importedData = { ...importedData,
+        importedData = {
+          ...importedData,
           [_path[0]]: initialFieldValue
         };
       }
-
       return importedData;
     }, {});
   }
-
 }
 Importer.$inject = ['formFieldRegistry', 'formFields'];
 
@@ -862,30 +784,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
@@ -893,6 +811,7 @@ function sanitizeHTML(html) {
     return '';
   }
 }
+
 /**
  * Recursively sanitize a HTML node, potentially
  * removing it, its children or attributes.
@@ -903,51 +822,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.
  *
@@ -956,56 +872,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__default['default']('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__default['default'](line) : `<p>${snarkdown__default['default'](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);
@@ -1020,7 +931,6 @@ function sanitizeSingleSelectValue(options) {
     valuesKey,
     values
   } = formField;
-
   try {
     const validValues = (valuesKey ? minDash.get(data, [valuesKey]) : values).map(v => v.value) || [];
     return validValues.includes(value) ? value : null;
@@ -1040,7 +950,6 @@ function sanitizeMultiSelectValue(options) {
     valuesKey,
     values
   } = formField;
-
   try {
     const validValues = (valuesKey ? minDash.get(data, [valuesKey]) : values).map(v => v.value) || [];
     return value.filter(v => validValues.includes(v));
@@ -1051,7 +960,7 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$8 = 'button';
+const type$9 = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1061,7 +970,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     children: jsxRuntime.jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1070,15 +979,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;
 
@@ -1100,9 +1007,7 @@ const FormRenderContext = preact.createContext({
  *
  * @returns {any}
  */
-
 function getService(type, strict) {}
-
 const FormContext = preact.createContext({
   getService,
   formId: null
@@ -1112,11 +1017,9 @@ function Description(props) {
   const {
     description
   } = props;
-
   if (!description) {
     return null;
   }
-
   return jsxRuntime.jsx("div", {
     class: "fjs-form-field-description",
     children: description
@@ -1127,11 +1030,9 @@ function Errors(props) {
   const {
     errors
   } = props;
-
   if (!errors.length) {
     return null;
   }
-
   return jsxRuntime.jsx("div", {
     class: "fjs-form-field-error",
     children: jsxRuntime.jsx("ul", {
@@ -1152,7 +1053,7 @@ function Label(props) {
   } = props;
   return jsxRuntime.jsxs("label", {
     for: id,
-    class: "fjs-form-field-label",
+    class: classNames__default['default']('fjs-form-field-label', props['class']),
     children: [props.children, label || '', required && jsxRuntime.jsx("span", {
       class: "fjs-asterix",
       children: "*"
@@ -1160,7 +1061,7 @@ function Label(props) {
   });
 }
 
-const type$7 = 'checkbox';
+const type$8 = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1173,7 +1074,6 @@ function Checkbox(props) {
     id,
     label
   } = field;
-
   const onChange = ({
     target
   }) => {
@@ -1182,12 +1082,16 @@ function Checkbox(props) {
       value: target.checked
     });
   };
-
   const {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$7, errors),
+    class: classNames__default['default'](formFieldClasses(type$8, {
+      errors,
+      disabled
+    }), {
+      'fjs-checked': value
+    }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1207,17 +1111,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;
@@ -1232,12 +1134,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
@@ -1250,7 +1152,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,
@@ -1261,15 +1162,11 @@ function useValuesAsync (field) {
     error: undefined,
     state: LOAD_STATES.LOADING
   });
-
   const initialData = useService('form')._getState().initialData;
-
   hooks.useEffect(() => {
     let values = [];
-
     if (valuesKey !== undefined) {
       const keyedValues = (initialData || {})[valuesKey];
-
       if (keyedValues && Array.isArray(keyedValues)) {
         values = keyedValues;
       }
@@ -1279,25 +1176,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,
@@ -1310,22 +1204,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
@@ -1334,13 +1224,19 @@ function Checklist(props) {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$6, errors),
+    class: classNames__default['default'](formFieldClasses(type$7, {
+      errors,
+      disabled
+    })),
     children: [jsxRuntime.jsx(Label, {
       label: label
     }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
       return jsxRuntime.jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
         label: v.label,
+        class: classNames__default['default']({
+          'fjs-checked': value.includes(v.value)
+        }),
         required: false,
         children: jsxRuntime.jsx("input", {
           checked: value.includes(v.value),
@@ -1358,7 +1254,6 @@ function Checklist(props) {
     })]
   });
 }
-
 Checklist.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -1369,15 +1264,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,
@@ -1387,29 +1280,26 @@ function FormField(props) {
     _path
   } = field;
   const formFields = useService('formFields'),
-        form = useService('form');
-
+    form = useService('form');
   const {
     data,
     errors,
     properties
   } = form._getState();
-
   const {
     Element
   } = hooks.useContext(FormRenderContext);
   const FormFieldComponent = formFields.get(field.type);
-
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
-
   const value = minDash.get(data, _path);
   const fieldErrors = findErrors(errors, _path);
   const disabled = properties.readOnly || field.disabled || false;
   return jsxRuntime.jsx(Element, {
     field: field,
-    children: jsxRuntime.jsx(FormFieldComponent, { ...props,
+    children: jsxRuntime.jsx(FormFieldComponent, {
+      ...props,
       disabled: disabled,
       errors: fieldErrors,
       onChange: disabled ? noop$1 : onChange,
@@ -1433,21 +1323,20 @@ function Default(props) {
     class: "fjs-vertical-layout",
     field: field,
     children: [components.map(childField => {
-      return preact.createElement(FormField, { ...props,
+      return preact.createElement(FormField, {
+        ...props,
         key: childField.id,
         field: childField
       });
     }), components.length ? null : jsxRuntime.jsx(Empty, {})]
   });
 }
-
 Default.create = function (options = {}) {
   return {
     components: [],
     ...options
   };
 };
-
 Default.type = 'default';
 Default.keyed = false;
 
@@ -1456,7 +1345,6 @@ Default.keyed = false;
  *
  * @see http://bpmn.io/license for more information.
  */
-
 function Logo() {
   return jsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1473,16 +1361,13 @@ function Logo() {
     })]
   });
 }
-
 function Lightbox(props) {
   const {
     open
   } = props;
-
   if (!open) {
     return null;
   }
-
   return jsxRuntime.jsxs("div", {
     class: "fjs-powered-by-lightbox",
     style: "z-index: 100; position: fixed; top: 0; left: 0;right: 0; bottom: 0",
@@ -1510,7 +1395,6 @@ function Lightbox(props) {
     })]
   });
 }
-
 function Link(props) {
   return jsxRuntime.jsx("div", {
     class: "fjs-powered-by fjs-form-field",
@@ -1527,17 +1411,14 @@ function Link(props) {
     })
   });
 }
-
 function PoweredBy(props) {
   const [open, setOpen] = hooks.useState(false);
-
   function toggleOpen(open) {
     return event => {
       event.preventDefault();
       setOpen(open);
     };
   }
-
   return jsxRuntime.jsxs(preact.Fragment, {
     children: [React.createPortal(jsxRuntime.jsx(Lightbox, {
       open: open,
@@ -1549,30 +1430,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 jsxRuntime.jsxs("form", {
     class: "fjs-form",
     onSubmit: handleSubmit,
@@ -1584,7 +1459,7 @@ function FormComponent(props) {
   });
 }
 
-const type$5 = 'number';
+const type$6 = 'number';
 function Number(props) {
   const {
     disabled,
@@ -1601,7 +1476,6 @@ function Number(props) {
   const {
     required
   } = validate;
-
   const onChange = ({
     target
   }) => {
@@ -1612,12 +1486,14 @@ function Number(props) {
       })
     });
   };
-
   const {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$5, errors),
+    class: formFieldClasses(type$6, {
+      errors,
+      disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1636,25 +1512,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,
@@ -1671,14 +1545,12 @@ function Radio(props) {
   const {
     required
   } = validate;
-
   const onChange = v => {
     props.onChange({
       field,
       value: v
     });
   };
-
   const {
     state: loadState,
     values: options
@@ -1687,7 +1559,10 @@ function Radio(props) {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$4, errors),
+    class: formFieldClasses(type$5, {
+      errors,
+      disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       label: label,
       required: required
@@ -1695,6 +1570,9 @@ function Radio(props) {
       return jsxRuntime.jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
         label: option.label,
+        class: classNames__default['default']({
+          'fjs-checked': option.value === value
+        }),
         required: false,
         children: jsxRuntime.jsx("input", {
           checked: option.value === value,
@@ -1712,7 +1590,6 @@ function Radio(props) {
     })]
   });
 }
-
 Radio.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -1723,14 +1600,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,
@@ -1747,7 +1623,6 @@ function Select(props) {
   const {
     required
   } = validate;
-
   const onChange = ({
     target
   }) => {
@@ -1756,7 +1631,6 @@ function Select(props) {
       value: target.value === '' ? null : target.value
     });
   };
-
   const {
     state: loadState,
     values: options
@@ -1765,7 +1639,10 @@ function Select(props) {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$3, errors),
+    class: formFieldClasses(type$4, {
+      errors,
+      disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1791,7 +1668,6 @@ function Select(props) {
     })]
   });
 }
-
 Select.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -1802,8 +1678,7 @@ Select.create = function (options = {}) {
     ...options
   };
 };
-
-Select.type = type$3;
+Select.type = type$4;
 Select.label = 'Select';
 Select.keyed = true;
 Select.emptyValue = null;
@@ -1822,7 +1697,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) {
@@ -1833,7 +1708,6 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
       action();
     }
   }
-
   hooks.useEffect(() => {
     listenerElement.addEventListener('keydown', downHandler);
     return () => {
@@ -1843,9 +1717,7 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
 }
 
 const DEFAULT_LABEL_GETTER = value => value;
-
 const NOOP = () => {};
-
 function DropdownList(props) {
   const {
     keyEventsListener = window,
@@ -1865,7 +1737,6 @@ function DropdownList(props) {
   }, [values.length]);
   hooks.useEffect(() => {
     if (focusedValueIndex === 0) return;
-
     if (!focusedValueIndex || !values.length) {
       setFocusedValueIndex(0);
     } else if (focusedValueIndex >= values.length) {
@@ -1891,7 +1762,6 @@ function DropdownList(props) {
   }, keyEventsListener);
   hooks.useEffect(() => {
     const individualEntries = dropdownContainer.current.children;
-
     if (individualEntries.length && !mouseControl) {
       individualEntries[focusedValueIndex].scrollIntoView({
         block: 'nearest',
@@ -1899,23 +1769,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 jsxRuntime.jsxs("div", {
     ref: dropdownContainer,
     tabIndex: -1,
@@ -1941,7 +1807,7 @@ function DropdownList(props) {
   });
 }
 
-const type$2 = 'taglist';
+const type$3 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
@@ -1966,12 +1832,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 = hooks.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
   hooks.useEffect(() => {
     if (loadState === LOAD_STATES.LOADED) {
       setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
@@ -1982,37 +1850,32 @@ function Taglist(props) {
   hooks.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':
@@ -2020,32 +1883,29 @@ 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;
     }
   };
-
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$2, errors),
+    class: formFieldClasses(type$3, {
+      errors,
+      disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       label: label,
-      id: prefixId(id, formId)
+      id: prefixId(`${id}-search`, formId)
     }), jsxRuntime.jsxs("div", {
       class: classNames__default['default']('fjs-taglist', {
         'disabled': disabled
@@ -2097,7 +1957,6 @@ function Taglist(props) {
     })]
   });
 }
-
 Taglist.create = function (options = {}) {
   if (options.valuesKey) return options;
   return {
@@ -2108,14 +1967,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
@@ -2124,25 +1982,23 @@ function Text(props) {
     text = ''
   } = field;
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$1),
+    class: formFieldClasses(type$2),
     children: jsxRuntime.jsx(Markup__default['default'], {
       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,
@@ -2159,7 +2015,6 @@ function Textfield(props) {
   const {
     required
   } = validate;
-
   const onChange = ({
     target
   }) => {
@@ -2168,12 +2023,14 @@ function Textfield(props) {
       value: target.value
     });
   };
-
   const {
     formId
   } = hooks.useContext(FormContext);
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type, errors),
+    class: formFieldClasses(type$1, {
+      errors,
+      disabled
+    }),
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -2192,22 +2049,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
-}) => minDash.isArray(value) || minDash.isObject(value) ? null : String(value);
+}) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value);
 
-const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield];
+const type = 'textarea';
+function Textarea(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value = ''
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    validate = {}
+  } = field;
+  const {
+    required
+  } = validate;
+  const textareaRef = hooks.useRef();
+  const onInput = ({
+    target
+  }) => {
+    props.onChange({
+      field,
+      value: target.value
+    });
+  };
+  const autoSizeTextarea = hooks.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';
+  }, []);
+  hooks.useEffect(() => {
+    autoSizeTextarea(textareaRef.current);
+  }, [autoSizeTextarea, value]);
+  const {
+    formId
+  } = hooks.useContext(FormContext);
+  return jsxRuntime.jsxs("div", {
+    class: formFieldClasses(type, {
+      errors,
+      disabled
+    }),
+    children: [jsxRuntime.jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), jsxRuntime.jsx("textarea", {
+      class: "fjs-textarea",
+      disabled: disabled,
+      id: prefixId(id, formId),
+      onInput: onInput,
+      value: value,
+      ref: textareaRef
+    }), jsxRuntime.jsx(Description, {
+      description: description
+    }), jsxRuntime.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
+}) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value);
+
+const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -2219,15 +2155,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) {
@@ -2237,7 +2170,6 @@ function Renderer(config, eventBus, form, injector) {
       getService(type, strict = true) {
         return injector.get(type, strict);
       },
-
       formId: form._id
     };
     eventBus.on('changed', newState => {
@@ -2259,11 +2191,9 @@ function Renderer(config, eventBus, form, injector) {
     const {
       schema
     } = state;
-
     if (!schema) {
       return null;
     }
-
     return jsxRuntime.jsx(FormContext.Provider, {
       value: formContext,
       children: jsxRuntime.jsx(FormComponent, {
@@ -2273,7 +2203,6 @@ function Renderer(config, eventBus, form, injector) {
       })
     });
   };
-
   const {
     container
   } = config;
@@ -2323,10 +2252,10 @@ var core = {
  */
 
 const ids = new Ids__default['default']([32, 36, 1]);
+
 /**
  * The form.
  */
-
 class Form {
   /**
    * @constructor
@@ -2338,28 +2267,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,
@@ -2370,33 +2299,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.
    *
@@ -2405,8 +2332,6 @@ class Form {
    *
    * @return Promise<{ warnings: Array<any> }>
    */
-
-
   importSchema(schema, data = {}) {
     return new Promise((resolve, reject) => {
       try {
@@ -2416,18 +2341,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
         });
@@ -2436,168 +2358,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 formFieldRegistry = this.get('formFieldRegistry');
-    const data = formFieldRegistry.getAll().reduce((data, field) => {
-      const {
-        disabled,
-        _path
-      } = field; // do not submit disabled form fields
-
-      if (disabled || !_path) {
-        return data;
-      }
-
-      const value = minDash.get(this._getState().data, _path);
-      return { ...data,
-        [_path[0]]: value
-      };
-    }, {});
+    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 = minDash.get(data, _path);
       const fieldErrors = validator.validateField(field, value);
       return minDash.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 (minDash.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 = minDash.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
    *
@@ -2606,8 +2484,6 @@ class Form {
    *
    * @returns {Injector}
    */
-
-
   _createInjector(options, container) {
     const {
       additionalModules = [],
@@ -2624,21 +2500,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,
@@ -2647,54 +2521,71 @@ class Form {
     const {
       _path
     } = field;
-
     let {
       data,
       errors
     } = this._getState();
-
     const validator = this.get('validator');
     const fieldErrors = validator.validateField(field, value);
     minDash.set(data, _path, value);
     minDash.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
+      if (disabled || !_path) {
+        return data;
+      }
+      const value = minDash.get(this._getState().data, _path);
+      return {
+        ...data,
+        [_path[0]]: value
+      };
+    }, {});
+  }
 }
 
-const schemaVersion = 5;
+const schemaVersion = 6;
+
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
  */
@@ -2706,7 +2597,6 @@ const schemaVersion = 5;
  *
  * @return {Promise<Form>}
  */
-
 function createForm(options) {
   const {
     data,
@@ -2734,6 +2624,7 @@ exports.Radio = Radio;
 exports.Select = Select;
 exports.Taglist = Taglist;
 exports.Text = Text;
+exports.Textarea = Textarea;
 exports.Textfield = Textfield;
 exports.clone = clone;
 exports.createForm = createForm;