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

package/dist/index.es.js

@@ -1,10 +1,10 @@
 import Ids from 'ids';
-import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, set, isObject } from 'min-dash';
+import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, set, findIndex, isObject } from 'min-dash';
 import { unaryTest, evaluate, parseUnaryTests, parseExpressions } from 'feelin';
 import Big from 'big.js';
 import snarkdown from '@bpmn-io/snarkdown';
 import classNames from 'classnames';
-import { jsx, jsxs } from 'preact/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useState, useEffect, useRef, useCallback, useMemo } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
 import React, { createPortal } from 'preact/compat';
@@ -740,7 +740,7 @@ function getExpressionVariableNames(expression) {
   } while (cursor.next());
   return Array.from(variables);
 }
-function isExpression$2(value) {
+function isExpression$1(value) {
   return isString(value) && value.startsWith('=');
 }
 
@@ -791,7 +791,10 @@ const VALUES_SOURCES_PATHS = {
   [VALUES_SOURCES.INPUT]: ['valuesKey']
 };
 const VALUES_SOURCES_DEFAULTS = {
-  [VALUES_SOURCES.STATIC]: [],
+  [VALUES_SOURCES.STATIC]: [{
+    label: 'Value',
+    value: 'value'
+  }],
   [VALUES_SOURCES.INPUT]: ''
 };
 
@@ -917,12 +920,6 @@ function getSchemaVariables(schema) {
   return Array.from(new Set(variables));
 }
 
-// helper ///////////////
-
-function isExpression$1(value) {
-  return isString(value) && value.startsWith('=');
-}
-
 class Importer {
   /**
    * @constructor
@@ -1235,15 +1232,14 @@ function Button(props) {
     })
   });
 }
-Button.create = function (options = {}) {
-  return {
-    action: 'submit',
-    ...options
-  };
-};
+Button.create = (options = {}) => ({
+  action: 'submit',
+  ...options
+});
 Button.type = type$b;
 Button.label = 'Button';
 Button.keyed = true;
+Button.group = 'action';
 
 const FormRenderContext = createContext({
   Empty: props => {
@@ -1256,6 +1252,7 @@ const FormRenderContext = createContext({
     return props.children;
   }
 });
+var FormRenderContext$1 = FormRenderContext;
 
 /**
  * @param {string} type
@@ -1268,6 +1265,7 @@ const FormContext = createContext({
   getService,
   formId: null
 });
+var FormContext$1 = FormContext;
 
 function Description(props) {
   const {
@@ -1343,7 +1341,7 @@ function Checkbox(props) {
   };
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsxs("div", {
     class: classNames(formFieldClasses(type$a, {
       errors,
@@ -1370,11 +1368,9 @@ function Checkbox(props) {
     })]
   });
 }
-Checkbox.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
+Checkbox.create = (options = {}) => ({
+  ...options
+});
 Checkbox.type = type$a;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
@@ -1382,11 +1378,12 @@ Checkbox.emptyValue = false;
 Checkbox.sanitizeValue = ({
   value
 }) => value === true;
+Checkbox.group = 'selection';
 
 function useService (type, strict) {
   const {
     getService
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return getService(type, strict);
 }
 
@@ -1483,8 +1480,8 @@ function parseInputTime(stringTime) {
   if (is12h) {
     const isPM = workingString.includes('pm');
     const digits = workingString.match(/\d+/g);
-    const displayHour = parseInt(digits?.[0]);
-    const minute = parseInt(digits?.[1]) || 0;
+    const displayHour = parseInt(digits && digits[0]);
+    const minute = parseInt(digits && digits[1]) || 0;
     const isValidDisplayHour = isNumber(displayHour) && displayHour >= 1 && displayHour <= 12;
     const isValidMinute = minute >= 0 && minute <= 59;
     if (!isValidDisplayHour || !isValidMinute) return null;
@@ -1492,8 +1489,8 @@ function parseInputTime(stringTime) {
     return hour * 60 + minute;
   } else {
     const digits = workingString.match(/\d+/g);
-    const hour = parseInt(digits?.[0]);
-    const minute = parseInt(digits?.[1]);
+    const hour = parseInt(digits && digits[0]);
+    const minute = parseInt(digits && digits[1]);
     const isValidHour = isNumber(hour) && hour >= 0 && hour <= 23;
     const isValidMinute = isNumber(minute) && minute >= 0 && minute <= 59;
     if (!isValidHour || !isValidMinute) return null;
@@ -1696,7 +1693,7 @@ function Checklist(props) {
   } = useValuesAsync(field);
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsxs("div", {
     class: classNames(formFieldClasses(type$9, {
       errors,
@@ -1728,13 +1725,18 @@ function Checklist(props) {
     })]
   });
 }
-Checklist.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+Checklist.create = (options = {}) => {
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
       label: 'Value',
       value: 'value'
-    }],
+    }];
+  }
+  return {
+    ...defaults,
     ...options
   };
 };
@@ -1743,6 +1745,7 @@ Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
+Checklist.group = 'selection';
 
 /**
  * Check if condition is met with given variables.
@@ -1786,7 +1789,7 @@ function FormField(props) {
   const {
     Element,
     Empty
-  } = useContext(FormRenderContext);
+  } = useContext(FormRenderContext$1);
   const FormFieldComponent = formFields.get(field.type);
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
@@ -1818,7 +1821,7 @@ function Default(props) {
   const {
     Children,
     Empty
-  } = useContext(FormRenderContext);
+  } = useContext(FormRenderContext$1);
   const {
     field
   } = props;
@@ -1837,20 +1840,20 @@ function Default(props) {
     }), components.length ? null : jsx(Empty, {})]
   });
 }
-Default.create = function (options = {}) {
-  return {
-    components: [],
-    ...options
-  };
-};
+Default.create = (options = {}) => ({
+  components: [],
+  ...options
+});
 Default.type = 'default';
 Default.keyed = false;
+Default.label = null;
+Default.group = null;
 
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var CalendarIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$h({
+}) => /*#__PURE__*/React.createElement("svg", _extends$j({
   width: "14",
   height: "15",
   viewBox: "0 0 28 30",
@@ -1859,8 +1862,8 @@ var CalendarIcon = (({
 }, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z",
-  fill: "currentColor"
+  fill: "currentColor",
+  d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z"
 })));
 
 function InputAdorner(props) {
@@ -1873,10 +1876,10 @@ function InputAdorner(props) {
     disabled,
     hasErrors
   } = props;
-  const onAdornmentClick = () => inputRef?.current?.focus();
+  const onAdornmentClick = () => inputRef && inputRef.current && inputRef.current.focus();
   return jsxs("div", {
     class: classNames('fjs-input-group', {
-      'disabled': disabled
+      'fjs-disabled': disabled
     }, {
       'hasErrors': hasErrors
     }),
@@ -1884,11 +1887,17 @@ function InputAdorner(props) {
     children: [pre !== null && jsxs("span", {
       class: "fjs-input-adornment border-right border-radius-left",
       onClick: onAdornmentClick,
-      children: [" ", pre, " "]
+      children: [" ", isString(pre) ? jsx("span", {
+        class: "fjs-input-adornment-text",
+        children: pre
+      }) : pre, " "]
     }), children, post !== null && jsxs("span", {
       class: "fjs-input-adornment border-left border-radius-right",
       onClick: onAdornmentClick,
-      children: [" ", post, " "]
+      children: [" ", isString(post) ? jsx("span", {
+        class: "fjs-input-adornment-text",
+        children: post
+      }) : post, " "]
     })]
   });
 }
@@ -1930,14 +1939,10 @@ function Datepicker(props) {
       dateFormat: 'm/d/Y',
       static: true,
       clickOpens: false,
+      // TODO: support dates prior to 1900 (https://github.com/bpmn-io/form-js/issues/533)
+      minDate: disallowPassedDates ? 'today' : '01/01/1900',
       errorHandler: () => {/* do nothing, we expect the values to sometimes be erronous and we don't want warnings polluting the console */}
     };
-    if (disallowPassedDates) {
-      config = {
-        ...config,
-        minDate: 'today'
-      };
-    }
     const instance = flatpickr(dateInputRef.current, config);
     setFlatpickrInstance(instance);
     const onCalendarFocusOut = e => {
@@ -2021,7 +2026,7 @@ function Datepicker(props) {
           class: 'fjs-input',
           disabled: disabled,
           placeholder: "mm/dd/yyyy",
-          autoComplete: "false",
+          autoComplete: "off",
           onFocus: onInputFocus,
           onKeyDown: onInputKeyDown,
           onMouseDown: e => !flatpickrInstance.isOpen && flatpickrInstance.open(),
@@ -2034,24 +2039,24 @@ function Datepicker(props) {
   });
 }
 
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var ClockIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$g({
+}) => /*#__PURE__*/React.createElement("svg", _extends$i({
   width: "16",
   height: "16",
   viewBox: "0 0 28 29",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 }, props), /*#__PURE__*/React.createElement("path", {
-  d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-  fill: "currentColor"
+  fill: "currentColor",
+  d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z"
 }), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z",
-  fill: "currentColor"
+  fill: "currentColor",
+  d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z"
 })));
 
 function useKeyDownAction(targetKey, action, listenerElement = window) {
@@ -2074,7 +2079,7 @@ const DEFAULT_LABEL_GETTER = value => value;
 const NOOP = () => {};
 function DropdownList(props) {
   const {
-    keyEventsListener = window,
+    listenerElement = window,
     values = [],
     getLabel = DEFAULT_LABEL_GETTER,
     onValueSelected = NOOP,
@@ -2104,18 +2109,18 @@ function DropdownList(props) {
       changeFocusedValueIndex(-1);
       setMouseControl(false);
     }
-  }, keyEventsListener);
+  }, listenerElement);
   useKeyDownAction('ArrowDown', () => {
     if (values.length) {
       changeFocusedValueIndex(1);
       setMouseControl(false);
     }
-  }, keyEventsListener);
+  }, listenerElement);
   useKeyDownAction('Enter', () => {
     if (focusedItem) {
       onValueSelected(focusedItem);
     }
-  }, keyEventsListener);
+  }, listenerElement);
   useEffect(() => {
     const individualEntries = dropdownContainer.current.children;
     if (individualEntries.length && !mouseControl) {
@@ -2288,7 +2293,7 @@ function Timepicker(props) {
           value: rawValue,
           disabled: disabled,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
-          autoComplete: "false",
+          autoComplete: "off",
           onFocus: () => useDropdown && setDropdownIsOpen(true),
           onClick: () => useDropdown && setDropdownIsOpen(true)
 
@@ -2339,7 +2344,7 @@ function Datetime(props) {
   } = validate;
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   const getNullDateTime = () => ({
     date: new Date(Date.parse(null)),
     time: null
@@ -2480,12 +2485,12 @@ function Datetime(props) {
     })]
   });
 }
-Datetime.create = function (options = {}) {
-  const newOptions = {};
-  set(newOptions, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
-  set(newOptions, DATE_LABEL_PATH, 'Date');
+Datetime.create = (options = {}) => {
+  const defaults = {};
+  set(defaults, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES.DATE);
+  set(defaults, DATE_LABEL_PATH, 'Date');
   return {
-    ...newOptions,
+    ...defaults,
     ...options
   };
 };
@@ -2493,6 +2498,8 @@ Datetime.type = type$8;
 Datetime.keyed = true;
 Datetime.emptyValue = null;
 Datetime.sanitizeValue = sanitizeDateTimePickerValue;
+Datetime.label = 'Date time';
+Datetime.group = 'basic-input';
 
 /**
  * This file must not be changed or exchanged.
@@ -2656,11 +2663,11 @@ function isExpression(value) {
   return isString(value) && value.startsWith('=');
 }
 
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var ImagePlaceholder = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$f({
+}) => /*#__PURE__*/React.createElement("svg", _extends$h({
   width: "64",
   height: "64",
   viewBox: "0 0 1280 1280",
@@ -2700,7 +2707,7 @@ function Image(props) {
   const altText = useExpressionValue(alt);
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsx("div", {
     class: formFieldClasses(type$7),
     children: jsxs("div", {
@@ -2719,13 +2726,47 @@ function Image(props) {
     })
   });
 }
-Image.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
+Image.create = (options = {}) => ({
+  ...options
+});
 Image.type = type$7;
 Image.keyed = false;
+Image.label = 'Image view';
+Image.group = 'presentation';
+
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var AngelDownIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$g({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  fill: "currentColor",
+  stroke: "currentColor",
+  strokeWidth: ".5",
+  d: "M7.75 1.336L4 6.125.258 1.335 0 1.54l4 5.125L8 1.54zm0 0"
+})));
+
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var AngelUpIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$f({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  fill: "currentColor",
+  stroke: "currentColor",
+  strokeWidth: ".5",
+  d: "M7.75 6.664L4 1.875.258 6.665 0 6.46l4-5.125L8 6.46zm0 0"
+})));
 
 const type$6 = 'number';
 function Numberfield(props) {
@@ -2854,7 +2895,7 @@ function Numberfield(props) {
   };
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsxs("div", {
     class: formFieldClasses(type$6, {
       errors,
@@ -2870,7 +2911,7 @@ function Numberfield(props) {
       post: suffixAdorner,
       children: jsxs("div", {
         class: classNames('fjs-vertical-group', {
-          'disabled': disabled
+          'fjs-disabled': disabled
         }, {
           'hasErrors': errors.length
         }),
@@ -2891,22 +2932,24 @@ function Numberfield(props) {
           value: displayValue
         }), jsxs("div", {
           class: classNames('fjs-number-arrow-container', {
-            'disabled': disabled
+            'fjs-disabled': disabled
           }),
           children: [jsx("button", {
             class: "fjs-number-arrow-up",
             type: "button",
+            "aria-label": "Increment",
             onClick: () => increment(),
             tabIndex: -1,
-            children: "\u02C4"
+            children: jsx(AngelUpIcon, {})
           }), jsx("div", {
             class: "fjs-number-arrow-separator"
           }), jsx("button", {
             class: "fjs-number-arrow-down",
             type: "button",
+            "aria-label": "Decrement",
             onClick: () => decrement(),
             tabIndex: -1,
-            children: "\u02C5"
+            children: jsx(AngelDownIcon, {})
           })]
         })]
       })
@@ -2917,7 +2960,9 @@ function Numberfield(props) {
     })]
   });
 }
-Numberfield.create = (options = {}) => options;
+Numberfield.create = (options = {}) => ({
+  ...options
+});
 Numberfield.sanitizeValue = ({
   value,
   formField
@@ -2935,6 +2980,7 @@ Numberfield.type = type$6;
 Numberfield.keyed = true;
 Numberfield.label = 'Number';
 Numberfield.emptyValue = null;
+Numberfield.group = 'basic-input';
 
 const type$5 = 'radio';
 function Radio(props) {
@@ -2965,7 +3011,7 @@ function Radio(props) {
   } = useValuesAsync(field);
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsxs("div", {
     class: formFieldClasses(type$5, {
       errors,
@@ -2999,12 +3045,17 @@ function Radio(props) {
   });
 }
 Radio.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
       label: 'Value',
       value: 'value'
-    }],
+    }];
+  }
+  return {
+    ...defaults,
     ...options
   };
 };
@@ -3013,6 +3064,266 @@ Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
 Radio.sanitizeValue = sanitizeSingleSelectValue;
+Radio.group = 'selection';
+
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var XMarkIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$e({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  fill: "currentColor",
+  stroke: "currentColor",
+  strokeWidth: ".5",
+  d: "M4 3.766L7.43.336l.234.234L4.234 4l3.43 3.43-.234.234L4 4.234.57 7.664.336 7.43 3.766 4 .336.57.57.336zm0 0"
+})));
+
+function SearchableSelect(props) {
+  const {
+    id,
+    disabled,
+    errors,
+    field,
+    value
+  } = props;
+  const {
+    formId
+  } = useContext(FormContext$1);
+  const [filter, setFilter] = useState('');
+  const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
+  const [shouldApplyFilter, setShouldApplyFilter] = useState(true);
+  const [isEscapeClosed, setIsEscapeClose] = useState(false);
+  const searchbarRef = useRef();
+  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
+  const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
+    [o.value]: options[x]
+  }))), [options]);
+  const valueLabel = useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+
+  // whenever we change the underlying value, set the label to it
+  useEffect(() => {
+    setFilter(valueLabel);
+  }, [valueLabel]);
+  const filteredOptions = useMemo(() => {
+    if (loadState === LOAD_STATES.LOADED) {
+      return shouldApplyFilter ? options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase())) : options;
+    }
+    return [];
+  }, [filter, loadState, options, shouldApplyFilter]);
+  const onChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(true);
+    setShouldApplyFilter(true);
+    setFilter(target.value || '');
+  };
+  const setValue = useCallback(option => {
+    setFilter(option && option.label || '');
+    props.onChange({
+      value: option && option.value || null,
+      field
+    });
+  }, [field, props]);
+  const onInputKeyDown = useCallback(keyDownEvent => {
+    switch (keyDownEvent.key) {
+      case 'ArrowUp':
+        keyDownEvent.preventDefault();
+        break;
+      case 'ArrowDown':
+        {
+          if (!isDropdownExpanded) {
+            setIsDropdownExpanded(true);
+            setShouldApplyFilter(false);
+          }
+          keyDownEvent.preventDefault();
+          break;
+        }
+      case 'Escape':
+        setIsEscapeClose(true);
+        break;
+      case 'Enter':
+        if (isEscapeClosed) {
+          setIsEscapeClose(false);
+        }
+        break;
+    }
+  }, [isDropdownExpanded, isEscapeClosed]);
+  const displayState = useMemo(() => {
+    const ds = {};
+    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+    ds.displayDropdown = !disabled && isDropdownExpanded && !isEscapeClosed;
+    return ds;
+  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, value]);
+  const onAngelMouseDown = useCallback(e => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(!isDropdownExpanded);
+    const searchbar = searchbarRef.current;
+    isDropdownExpanded ? searchbar.blur() : searchbar.focus();
+    e.preventDefault();
+  }, [isDropdownExpanded]);
+  return jsxs(Fragment$1, {
+    children: [jsxs("div", {
+      id: prefixId(`${id}`, formId),
+      class: classNames('fjs-input-group', {
+        'disabled': disabled
+      }, {
+        'hasErrors': errors.length
+      }),
+      children: [jsx("input", {
+        disabled: disabled,
+        class: "fjs-input",
+        ref: searchbarRef,
+        id: prefixId(`${id}-search`, formId),
+        onChange: onChange,
+        type: "text",
+        value: filter,
+        placeholder: 'Search',
+        autoComplete: "off",
+        onKeyDown: e => onInputKeyDown(e),
+        onMouseDown: () => {
+          setIsEscapeClose(false);
+          setIsDropdownExpanded(true);
+          setShouldApplyFilter(false);
+        },
+        onFocus: () => {
+          setIsDropdownExpanded(true);
+          setShouldApplyFilter(false);
+        },
+        onBlur: () => {
+          setIsDropdownExpanded(false);
+          setFilter(valueLabel);
+        }
+      }), displayState.displayCross && jsxs("span", {
+        class: "fjs-select-cross",
+        onMouseDown: e => {
+          setValue(null);
+          e.preventDefault();
+        },
+        children: [jsx(XMarkIcon, {}), " "]
+      }), jsx("span", {
+        class: "fjs-select-arrow",
+        onMouseDown: e => onAngelMouseDown(e),
+        children: displayState.displayDropdown ? jsx(AngelUpIcon, {}) : jsx(AngelDownIcon, {})
+      })]
+    }), jsx("div", {
+      class: "fjs-select-anchor",
+      children: displayState.displayDropdown && jsx(DropdownList, {
+        values: filteredOptions,
+        getLabel: o => o.label,
+        onValueSelected: o => {
+          setValue(o);
+          setIsDropdownExpanded(false);
+        },
+        listenerElement: searchbarRef.current
+      })
+    })]
+  });
+}
+
+function SimpleSelect(props) {
+  const {
+    id,
+    disabled,
+    errors,
+    field,
+    value
+  } = props;
+  const {
+    formId
+  } = useContext(FormContext$1);
+  const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
+  const selectRef = useRef();
+  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
+  const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
+    [o.value]: options[x]
+  }))), [options]);
+  const valueLabel = useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+  const setValue = useCallback(option => {
+    props.onChange({
+      value: option && option.value || null,
+      field
+    });
+  }, [field, props]);
+  const displayState = useMemo(() => {
+    const ds = {};
+    ds.componentReady = !disabled && loadState === LOAD_STATES.LOADED;
+    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+    ds.displayDropdown = !disabled && isDropdownExpanded;
+    return ds;
+  }, [disabled, isDropdownExpanded, loadState, value]);
+  const onMouseDown = useCallback(e => {
+    const select = selectRef.current;
+    setIsDropdownExpanded(!isDropdownExpanded);
+    if (isDropdownExpanded) {
+      select.blur();
+    } else {
+      select.focus();
+    }
+    e.preventDefault();
+  }, [isDropdownExpanded]);
+  const initialFocusIndex = useMemo(() => value && findIndex(options, o => o.value === value) || 0, [options, value]);
+  return jsxs(Fragment$1, {
+    children: [jsxs("div", {
+      ref: selectRef,
+      id: prefixId(`${id}`, formId),
+      class: classNames('fjs-input-group', {
+        'disabled': disabled
+      }, {
+        'hasErrors': errors.length
+      }),
+      onFocus: () => setIsDropdownExpanded(true),
+      onBlur: () => setIsDropdownExpanded(false),
+      onMouseDown: e => onMouseDown(e),
+      tabIndex: disabled ? undefined : 0,
+      children: [jsx("div", {
+        class: classNames('fjs-select-display', {
+          'fjs-select-placeholder': !value
+        }),
+        id: prefixId(`${id}-display`, formId),
+        children: valueLabel || 'Select'
+      }), displayState.displayCross && jsx("span", {
+        class: "fjs-select-cross",
+        onMouseDown: e => {
+          setValue(null);
+          e.stopPropagation();
+        },
+        children: jsx(XMarkIcon, {})
+      }), jsx("span", {
+        class: "fjs-select-arrow",
+        children: displayState.displayDropdown ? jsx(AngelUpIcon, {}) : jsx(AngelDownIcon, {})
+      })]
+    }), jsx("div", {
+      class: "fjs-select-anchor",
+      children: displayState.displayDropdown && jsx(DropdownList, {
+        values: options,
+        getLabel: o => o.label,
+        initialFocusIndex: initialFocusIndex,
+        onValueSelected: o => {
+          setValue(o);
+          setIsDropdownExpanded(false);
+        },
+        listenerElement: selectRef.current
+      })
+    })]
+  });
+}
 
 const type$4 = 'select';
 function Select(props) {
@@ -3020,32 +3331,30 @@ function Select(props) {
     disabled,
     errors = [],
     field,
+    onChange,
     value
   } = props;
   const {
     description,
     id,
     label,
+    searchable = false,
     validate = {}
   } = field;
   const {
     required
   } = validate;
-  const onChange = ({
-    target
-  }) => {
-    props.onChange({
-      field,
-      value: target.value === '' ? null : target.value
-    });
-  };
-  const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
+  const selectProps = useMemo(() => ({
+    id,
+    disabled,
+    errors,
+    field,
+    value,
+    onChange
+  }), [disabled, errors, field, id, value, onChange]);
   return jsxs("div", {
     class: formFieldClasses(type$4, {
       errors,
@@ -3055,20 +3364,10 @@ function Select(props) {
       id: prefixId(id, formId),
       label: label,
       required: required
-    }), jsxs("select", {
-      class: "fjs-select",
-      disabled: disabled,
-      id: prefixId(id, formId),
-      onChange: onChange,
-      value: value || '',
-      children: [jsx("option", {
-        value: ""
-      }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
-        return jsx("option", {
-          value: option.value,
-          children: option.label
-        }, `${id}-${index}`);
-      })]
+    }), searchable ? jsx(SearchableSelect, {
+      ...selectProps
+    }) : jsx(SimpleSelect, {
+      ...selectProps
     }), jsx(Description, {
       description: description
     }), jsx(Errors, {
@@ -3076,13 +3375,18 @@ function Select(props) {
     })]
   });
 }
-Select.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+Select.create = (options = {}) => {
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
       label: 'Value',
       value: 'value'
-    }],
+    }];
+  }
+  return {
+    ...defaults,
     ...options
   };
 };
@@ -3091,22 +3395,7 @@ Select.label = 'Select';
 Select.keyed = true;
 Select.emptyValue = null;
 Select.sanitizeValue = sanitizeSingleSelectValue;
-
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
-var CloseIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$e({
-  width: "16",
-  height: "16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  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: "currentColor"
-})));
+Select.group = 'selection';
 
 const type$3 = 'taglist';
 function Taglist(props) {
@@ -3123,7 +3412,7 @@ function Taglist(props) {
   } = field;
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   const [filter, setFilter] = useState('');
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
@@ -3211,6 +3500,7 @@ function Taglist(props) {
       searchbarRef.current.focus();
     }
   };
+  const shouldDisplayDropdown = useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
   return jsxs("div", {
     class: formFieldClasses(type$3, {
       errors,
@@ -3221,23 +3511,25 @@ function Taglist(props) {
       id: prefixId(`${id}-search`, formId)
     }), jsxs("div", {
       class: classNames('fjs-taglist', {
-        'disabled': disabled
+        'fjs-disabled': disabled
       }),
-      children: [!disabled && loadState === LOAD_STATES.LOADED && jsx("div", {
+      children: [loadState === LOAD_STATES.LOADED && jsx("div", {
         class: "fjs-taglist-tags",
         children: values.map(v => {
           return jsxs("div", {
-            class: "fjs-taglist-tag",
+            class: classNames('fjs-taglist-tag', {
+              'fjs-disabled': disabled
+            }),
             onMouseDown: e => e.preventDefault(),
             children: [jsx("span", {
               class: "fjs-taglist-tag-label",
               children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
-            }), jsx("button", {
+            }), !disabled && jsx("button", {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
               onClick: event => onTagRemoveClick(event, v),
-              children: jsx(CloseIcon, {})
+              children: jsx(XMarkIcon, {})
             })]
           });
         })
@@ -3249,7 +3541,7 @@ function Taglist(props) {
         onChange: onFilterChange,
         type: "text",
         value: filter,
-        placeholder: 'Search',
+        placeholder: disabled ? '' : 'Search',
         autoComplete: "off",
         onKeyDown: e => onInputKeyDown(e),
         onMouseDown: () => setIsEscapeClose(false),
@@ -3261,7 +3553,7 @@ function Taglist(props) {
       })]
     }), jsx("div", {
       class: "fjs-taglist-anchor",
-      children: !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed && jsx(DropdownList, {
+      children: shouldDisplayDropdown && jsx(DropdownList, {
         values: filteredOptions,
         getLabel: o => o.label,
         onValueSelected: o => selectValue(o.value),
@@ -3275,33 +3567,234 @@ function Taglist(props) {
     })]
   });
 }
-Taglist.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
+Taglist.create = (options = {}) => {
+  const defaults = {};
+
+  // provide default values if valuesKey isn't set
+  if (!options.valuesKey) {
+    defaults.values = [{
       label: 'Value',
       value: 'value'
-    }],
+    }];
+  }
+  return {
+    ...defaults,
     ...options
   };
 };
 Taglist.type = type$3;
-Taglist.label = 'Taglist';
+Taglist.label = 'Tag list';
 Taglist.keyed = true;
 Taglist.emptyValue = [];
 Taglist.sanitizeValue = sanitizeMultiSelectValue;
+Taglist.group = 'selection';
 
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
-var ButtonIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$d({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "54",
-  height: "54"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
+const type$2 = 'text';
+function Text(props) {
+  const {
+    field,
+    disableLinks
+  } = props;
+  const {
+    text = ''
+  } = field;
+  const textValue = useExpressionValue(text) || '';
+  const componentOverrides = disableLinks ? {
+    'a': DisabledLink
+  } : {};
+  return jsx("div", {
+    class: formFieldClasses(type$2),
+    children: jsx(Markup, {
+      markup: safeMarkdown(textValue),
+      components: componentOverrides,
+      trim: false
+    })
+  });
+}
+Text.create = (options = {}) => ({
+  text: '# Text',
+  ...options
+});
+Text.type = type$2;
+Text.keyed = false;
+Text.group = 'presentation';
+Text.label = 'Text view';
+function DisabledLink({
+  href,
+  children
+}) {
+  return jsx("a", {
+    class: "fjs-disabled-link",
+    href: href,
+    tabIndex: -1,
+    children: children
+  });
+}
+
+const type$1 = 'textfield';
+function Textfield(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value = ''
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    appearance = {},
+    validate = {}
+  } = field;
+  const {
+    prefixAdorner,
+    suffixAdorner
+  } = appearance;
+  const {
+    required
+  } = validate;
+  const onChange = ({
+    target
+  }) => {
+    props.onChange({
+      field,
+      value: target.value
+    });
+  };
+  const {
+    formId
+  } = useContext(FormContext$1);
+  return jsxs("div", {
+    class: formFieldClasses(type$1, {
+      errors,
+      disabled
+    }),
+    children: [jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), jsx(InputAdorner, {
+      disabled: disabled,
+      pre: prefixAdorner,
+      post: suffixAdorner,
+      children: jsx("input", {
+        class: "fjs-input",
+        disabled: disabled,
+        id: prefixId(id, formId),
+        onInput: onChange,
+        type: "text",
+        value: value
+      })
+    }), jsx(Description, {
+      description: description
+    }), jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+Textfield.create = (options = {}) => ({
+  ...options
+});
+Textfield.type = type$1;
+Textfield.label = 'Text field';
+Textfield.keyed = true;
+Textfield.emptyValue = '';
+Textfield.sanitizeValue = ({
+  value
+}) => isArray(value) || isObject(value) ? '' : String(value);
+Textfield.group = 'basic-input';
+
+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$1);
+  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 = (options = {}) => ({
+  ...options
+});
+Textarea.type = type;
+Textarea.label = 'Text area';
+Textarea.keyed = true;
+Textarea.emptyValue = '';
+Textarea.sanitizeValue = ({
+  value
+}) => isArray(value) || isObject(value) ? '' : String(value);
+Textarea.group = 'basic-input';
+
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+var ButtonIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$d({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "54",
+  height: "54"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  d: "M45 17a3 3 0 013 3v14a3 3 0 01-3 3H9a3 3 0 01-3-3V20a3 3 0 013-3h36zm-9 8.889H18v2.222h18V25.89z"
 })));
 
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
@@ -3516,232 +4009,24 @@ var ImageIcon = (({
   fill: "#000"
 })));
 
-const iconsByType = {
-  button: ButtonIcon,
-  checkbox: CheckboxIcon,
-  checklist: ChecklistIcon,
-  columns: ColumnsIcon,
-  datetime: DatetimeIcon,
-  image: ImageIcon,
-  number: NumberIcon,
-  radio: RadioIcon,
-  select: SelectIcon,
-  taglist: TaglistIcon,
-  text: TextIcon,
-  textfield: TextfieldIcon,
-  textarea: TextareaIcon,
-  default: FormIcon
-};
-
-const type$2 = 'text';
-function Text(props) {
-  const {
-    field,
-    disabled
-  } = props;
-  const {
-    text = ''
-  } = field;
-  const textValue = useExpressionValue(text) || '';
-  return jsx("div", {
-    class: formFieldClasses(type$2),
-    children: renderText(field, textValue, disabled)
-  });
-}
-Text.create = function (options = {}) {
-  return {
-    text: '# Text',
-    ...options
-  };
-};
-Text.type = type$2;
-Text.keyed = false;
-
-// helper //////////////
-
-function renderText(field, content, disabled) {
-  const {
-    text
-  } = field;
-  const Icon = iconsByType['text'];
-  if (disabled) {
-    if (!text) {
-      return jsxs("div", {
-        class: "fjs-form-field-placeholder",
-        children: [jsx(Icon, {
-          viewBox: "0 0 54 54"
-        }), "Text view is empty"]
-      });
-    }
-    if (isExpression$2(text)) {
-      return jsxs("div", {
-        class: "fjs-form-field-placeholder",
-        children: [jsx(Icon, {
-          viewBox: "0 0 54 54"
-        }), "Text view is populated by an expression"]
-      });
-    }
-  }
-  return jsx(Markup, {
-    markup: safeMarkdown(content),
-    trim: false
-  });
-}
-
-const type$1 = 'textfield';
-function Textfield(props) {
-  const {
-    disabled,
-    errors = [],
-    field,
-    value = ''
-  } = props;
-  const {
-    description,
-    id,
-    label,
-    appearance = {},
-    validate = {}
-  } = field;
-  const {
-    prefixAdorner,
-    suffixAdorner
-  } = appearance;
-  const {
-    required
-  } = validate;
-  const onChange = ({
-    target
-  }) => {
-    props.onChange({
-      field,
-      value: target.value
-    });
-  };
-  const {
-    formId
-  } = useContext(FormContext);
-  return jsxs("div", {
-    class: formFieldClasses(type$1, {
-      errors,
-      disabled
-    }),
-    children: [jsx(Label, {
-      id: prefixId(id, formId),
-      label: label,
-      required: required
-    }), jsx(InputAdorner, {
-      disabled: disabled,
-      pre: prefixAdorner,
-      post: suffixAdorner,
-      children: jsx("input", {
-        class: "fjs-input",
-        disabled: disabled,
-        id: prefixId(id, formId),
-        onInput: onChange,
-        type: "text",
-        value: value
-      })
-    }), jsx(Description, {
-      description: description
-    }), jsx(Errors, {
-      errors: errors
-    })]
-  });
-}
-Textfield.create = function (options = {}) {
-  return {
-    ...options
-  };
-};
-Textfield.type = type$1;
-Textfield.label = 'Text field';
-Textfield.keyed = true;
-Textfield.emptyValue = '';
-Textfield.sanitizeValue = ({
-  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 = {}) {
+const iconsByType = type => {
   return {
-    ...options
-  };
+    button: ButtonIcon,
+    checkbox: CheckboxIcon,
+    checklist: ChecklistIcon,
+    columns: ColumnsIcon,
+    datetime: DatetimeIcon,
+    image: ImageIcon,
+    number: NumberIcon,
+    radio: RadioIcon,
+    select: SelectIcon,
+    taglist: TaglistIcon,
+    text: TextIcon,
+    textfield: TextfieldIcon,
+    textarea: TextareaIcon,
+    default: FormIcon
+  }[type];
 };
-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, Image, Numberfield, Datetime, Radio, Select, Taglist, Text, Textfield, Textarea];
 
@@ -3749,10 +4034,7 @@ class FormFields {
   constructor() {
     this._formFields = {};
     formFields.forEach(formField => {
-      const {
-        type
-      } = formField;
-      this.register(type, formField);
+      this.register(formField.type, formField);
     });
   }
   register(type, formField) {
@@ -3794,7 +4076,7 @@ function Renderer(config, eventBus, form, injector) {
     if (!schema) {
       return null;
     }
-    return jsx(FormContext.Provider, {
+    return jsx(FormContext$1.Provider, {
       value: formContext,
       children: jsx(FormComponent, {
         onChange: onChange,
@@ -4195,7 +4477,7 @@ class Form {
   }
 }
 
-const schemaVersion = 6;
+const schemaVersion = 7;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -4220,5 +4502,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Image, MINUTES_IN_DAY, Numberfield, Radio, Select, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormRenderContext$1 as FormRenderContext, Image, MINUTES_IN_DAY, Numberfield, Radio, Select, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getExpressionVariableNames, getSchemaVariables, getValuesSource, getVariableNames, iconsByType, isExpression$1 as isExpression, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
 //# sourceMappingURL=index.es.js.map