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

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';
@@ -12,9 +12,9 @@ import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -23,11 +23,11 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
     const conditions = this._getConditions();
@@ -46,13 +46,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -73,12 +73,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -88,13 +88,13 @@ class ConditionChecker {
     return result === true;
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -602,7 +602,7 @@ class Validator {
     if (type === 'number') {
       const {
         decimalDigits,
-        step
+        increment
       } = field;
       if (value === 'NaN') {
         errors = [...errors, 'Value is not a number.'];
@@ -610,13 +610,13 @@ class Validator {
         if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
           errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
         }
-        if (step) {
+        if (increment) {
           const bigValue = Big(value);
-          const bigStep = Big(step);
-          const offset = bigValue.mod(bigStep);
+          const bigIncrement = Big(increment);
+          const offset = bigValue.mod(bigIncrement);
           if (offset.cmp(0) !== 0) {
             const previousValue = bigValue.minus(offset);
-            const nextValue = previousValue.plus(bigStep);
+            const nextValue = previousValue.plus(bigIncrement);
             errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
           }
         }
@@ -631,10 +631,10 @@ class Validator {
     if (validate.required && (isNil(value) || value === '')) {
       errors = [...errors, 'Field is required.'];
     }
-    if ('min' in validate && value && value < validate.min) {
+    if ('min' in validate && (value || value === 0) && value < validate.min) {
       errors = [...errors, `Field must have minimum value of ${validate.min}.`];
     }
-    if ('max' in validate && value && value > validate.max) {
+    if ('max' in validate && (value || value === 0) && value > validate.max) {
       errors = [...errors, `Field must have maximum value of ${validate.max}.`];
     }
     if ('minLength' in validate && value && value.trim().length < validate.minLength) {
@@ -703,11 +703,11 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
-/**
- * Retrieve variable names from given FEEL unary test.
- *
- * @param {string} unaryTest
- * @returns {string[]}
+/**
+ * Retrieve variable names from given FEEL unary test.
+ *
+ * @param {string} unaryTest
+ * @returns {string[]}
  */
 function getVariableNames(unaryTest) {
   const tree = parseUnaryTests(unaryTest);
@@ -722,11 +722,11 @@ function getVariableNames(unaryTest) {
   return Array.from(variables);
 }
 
-/**
- * Retrieve variable names from given FEEL expression.
- *
- * @param {string} expression
- * @returns {string[]}
+/**
+ * Retrieve variable names from given FEEL expression.
+ *
+ * @param {string} expression
+ * @returns {string[]}
  */
 function getExpressionVariableNames(expression) {
   const tree = parseExpressions(expression);
@@ -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]: ''
 };
 
@@ -812,10 +815,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -860,22 +863,22 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema) {
   if (!schema.components) {
@@ -917,32 +920,26 @@ function getSchemaVariables(schema) {
   return Array.from(new Set(variables));
 }
 
-// helper ///////////////
-
-function isExpression$1(value) {
-  return isString(value) && value.startsWith('=');
-}
-
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
   }
 
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -961,11 +958,11 @@ class Importer {
     }
   }
 
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
   importFormField(formField, parentId) {
     const {
@@ -1016,10 +1013,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1069,11 +1066,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 function sanitizeHTML(html) {
   const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
@@ -1093,15 +1090,15 @@ function sanitizeImageSource(src) {
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -1145,13 +1142,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -1203,14 +1200,14 @@ function safeMarkdown(markdown) {
   return sanitizeHTML(html);
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function safeImageSource(src) {
   return sanitizeImageSource(src);
@@ -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,18 +1252,20 @@ const FormRenderContext = createContext({
     return props.children;
   }
 });
+var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 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,16 +1378,17 @@ 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);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1399,17 +1396,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -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,14 +1745,15 @@ Checklist.label = 'Checklist';
 Checklist.keyed = true;
 Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
+Checklist.group = 'selection';
 
-/**
- * Check if condition is met with given variables.
- *
- * @param {string | undefined} condition
- * @param {import('../../types').Data} data
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Check if condition is met with given variables.
+ *
+ * @param {string | undefined} condition
+ * @param {import('../../types').Data} data
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition, data) {
   const initialData = useService('form')._getState().initialData;
@@ -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: "#000"
+  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
     }),
@@ -1925,23 +1928,15 @@ function Datepicker(props) {
 
   // setup flatpickr instance
   useEffect(() => {
-    if (disabled) {
-      setFlatpickrInstance(null);
-      return;
-    }
     let config = {
       allowInput: true,
       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 => {
@@ -1961,7 +1956,7 @@ function Datepicker(props) {
     // flatpicker logic that was lost when setting allowInput to true
     instance.config.onOpen = [() => instance.calendarContainer.addEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.addEventListener('mousedown', onCalendarMouseDown)];
     instance.config.onClose = [() => instance.calendarContainer.removeEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.removeEventListener('mousedown', onCalendarMouseDown)];
-  }, [disabled, disallowPassedDates]);
+  }, [disallowPassedDates]);
 
   // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
   useEffect(() => {
@@ -2025,7 +2020,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(),
@@ -2038,24 +2033,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: "#000"
+  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: "#000"
+  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) {
@@ -2078,7 +2073,7 @@ const DEFAULT_LABEL_GETTER = value => value;
 const NOOP = () => {};
 function DropdownList(props) {
   const {
-    keyEventsListener = window,
+    listenerElement = window,
     values = [],
     getLabel = DEFAULT_LABEL_GETTER,
     onValueSelected = NOOP,
@@ -2108,18 +2103,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) {
@@ -2147,6 +2142,7 @@ function DropdownList(props) {
     ref: dropdownContainer,
     tabIndex: -1,
     class: "fjs-dropdownlist",
+    onMouseDown: e => e.preventDefault(),
     style: {
       maxHeight: height,
       scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
@@ -2158,10 +2154,7 @@ function DropdownList(props) {
         }),
         onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
         onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-        onMouseDown: e => {
-          e.preventDefault();
-          onValueSelected(v);
-        },
+        onMouseDown: e => onValueSelected(v),
         children: getLabel(v)
       });
     }), !values.length && jsx("div", {
@@ -2294,7 +2287,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)
 
@@ -2345,7 +2338,7 @@ function Datetime(props) {
   } = validate;
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   const getNullDateTime = () => ({
     date: new Date(Date.parse(null)),
     time: null
@@ -2361,31 +2354,29 @@ function Datetime(props) {
       date,
       time
     } = getNullDateTime();
-    if (!disabled) {
-      switch (subtype) {
-        case DATETIME_SUBTYPES.DATE:
-          {
-            date = new Date(Date.parse(value));
-            break;
-          }
-        case DATETIME_SUBTYPES.TIME:
-          {
-            time = parseIsoTime(value);
-            break;
-          }
-        case DATETIME_SUBTYPES.DATETIME:
-          {
-            date = new Date(Date.parse(value));
-            time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
-            break;
-          }
-      }
+    switch (subtype) {
+      case DATETIME_SUBTYPES.DATE:
+        {
+          date = new Date(Date.parse(value));
+          break;
+        }
+      case DATETIME_SUBTYPES.TIME:
+        {
+          time = parseIsoTime(value);
+          break;
+        }
+      case DATETIME_SUBTYPES.DATETIME:
+        {
+          date = new Date(Date.parse(value));
+          time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
+          break;
+        }
     }
     setDateTime({
       date,
       time
     });
-  }, [subtype, value, disabled]);
+  }, [subtype, value]);
   const computeAndSetState = useCallback(({
     date,
     time
@@ -2488,12 +2479,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
   };
 };
@@ -2501,11 +2492,13 @@ 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.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxs("svg", {
@@ -2622,10 +2615,10 @@ function FormComponent(props) {
   });
 }
 
-/**
- *
- * @param {string | undefined} expression
- * @param {import('../../types').Data} data
+/**
+ *
+ * @param {string | undefined} expression
+ * @param {import('../../types').Data} data
  */
 function useEvaluation(expression, data) {
   const initialData = useService('form')._getState().initialData;
@@ -2642,9 +2635,9 @@ function useEvaluation(expression, data) {
   return conditionChecker.evaluate(expression, filteredData);
 }
 
-/**
- *
- * @param {string} value
+/**
+ *
+ * @param {string} value
  */
 function useExpressionValue(value) {
   const formData = useService('form')._getState().data;
@@ -2664,11 +2657,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",
@@ -2708,7 +2701,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", {
@@ -2727,13 +2720,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) {
@@ -2775,6 +2802,7 @@ function Numberfield(props) {
   }), [stringValueCache, value, field]);
   const displayValue = useMemo(() => {
     if (value === 'NaN') return 'NaN';
+    if (stringValueCache === '-') return '-';
     return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big(value).toFixed() : '';
   }, [stringValueCache, value, cacheValueMatchesState]);
   const arrowIncrementValue = useMemo(() => {
@@ -2794,6 +2822,10 @@ function Numberfield(props) {
 
     // treat commas as dots
     stringValue = stringValue.replaceAll(',', '.');
+    if (stringValue === '-') {
+      setStringValueCache('-');
+      return;
+    }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
       onChange({
@@ -2857,7 +2889,7 @@ function Numberfield(props) {
   };
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsxs("div", {
     class: formFieldClasses(type$6, {
       errors,
@@ -2873,7 +2905,7 @@ function Numberfield(props) {
       post: suffixAdorner,
       children: jsxs("div", {
         class: classNames('fjs-vertical-group', {
-          'disabled': disabled
+          'fjs-disabled': disabled
         }, {
           'hasErrors': errors.length
         }),
@@ -2894,22 +2926,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, {})
           })]
         })]
       })
@@ -2920,7 +2954,9 @@ function Numberfield(props) {
     })]
   });
 }
-Numberfield.create = (options = {}) => options;
+Numberfield.create = (options = {}) => ({
+  ...options
+});
 Numberfield.sanitizeValue = ({
   value,
   formField
@@ -2938,6 +2974,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) {
@@ -2968,7 +3005,7 @@ function Radio(props) {
   } = useValuesAsync(field);
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   return jsxs("div", {
     class: formFieldClasses(type$5, {
       errors,
@@ -3002,12 +3039,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
   };
 };
@@ -3016,121 +3058,359 @@ Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
 Radio.sanitizeValue = sanitizeSingleSelectValue;
-
-const type$4 = 'select';
-function Select(props) {
-  const {
-    disabled,
-    errors = [],
-    field,
-    value
-  } = props;
-  const {
-    description,
-    id,
-    label,
-    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);
-  return jsxs("div", {
-    class: formFieldClasses(type$4, {
-      errors,
-      disabled
-    }),
-    children: [jsx(Label, {
-      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}`);
-      })]
-    }), jsx(Description, {
-      description: description
-    }), jsx(Errors, {
-      errors: errors
-    })]
-  });
-}
-Select.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
-      label: 'Value',
-      value: 'value'
-    }],
-    ...options
-  };
-};
-Select.type = type$4;
-Select.label = 'Select';
-Select.keyed = true;
-Select.emptyValue = null;
-Select.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 CloseIcon = (({
+var XMarkIcon = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends$e({
-  width: "16",
-  height: "16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "8",
+  height: "8"
 }, 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"
+  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"
 })));
 
-const type$3 = 'taglist';
-function Taglist(props) {
+function SearchableSelect(props) {
   const {
+    id,
     disabled,
-    errors = [],
+    errors,
     field,
-    value: values = []
+    value
   } = props;
-  const {
-    description,
-    id,
-    label
-  } = field;
   const {
     formId
-  } = useContext(FormContext);
+  } = useContext(FormContext$1);
   const [filter, setFilter] = useState('');
-  const [filteredOptions, setFilteredOptions] = useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
-  const [hasOptionsLeft, setHasOptionsLeft] = useState(true);
+  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) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    onChange,
+    value
+  } = props;
+  const {
+    description,
+    id,
+    label,
+    searchable = false,
+    validate = {}
+  } = field;
+  const {
+    required
+  } = validate;
+  const {
+    formId
+  } = 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,
+      disabled
+    }),
+    children: [jsx(Label, {
+      id: prefixId(id, formId),
+      label: label,
+      required: required
+    }), searchable ? jsx(SearchableSelect, {
+      ...selectProps
+    }) : jsx(SimpleSelect, {
+      ...selectProps
+    }), jsx(Description, {
+      description: description
+    }), jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+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
+  };
+};
+Select.type = type$4;
+Select.label = 'Select';
+Select.keyed = true;
+Select.emptyValue = null;
+Select.sanitizeValue = sanitizeSingleSelectValue;
+Select.group = 'selection';
+
+const type$3 = 'taglist';
+function Taglist(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value: values = []
+  } = props;
+  const {
+    description,
+    id,
+    label
+  } = field;
+  const {
+    formId
+  } = useContext(FormContext$1);
+  const [filter, setFilter] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
+  const [hasOptionsLeft, setHasOptionsLeft] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
   const searchbarRef = useRef();
   const {
@@ -3214,6 +3494,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,
@@ -3224,23 +3505,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, {})
             })]
           });
         })
@@ -3252,7 +3535,7 @@ function Taglist(props) {
         onChange: onFilterChange,
         type: "text",
         value: filter,
-        placeholder: 'Search',
+        placeholder: disabled ? '' : 'Search',
         autoComplete: "off",
         onKeyDown: e => onInputKeyDown(e),
         onMouseDown: () => setIsEscapeClose(false),
@@ -3264,7 +3547,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),
@@ -3278,21 +3561,222 @@ function Taglist(props) {
     })]
   });
 }
-Taglist.create = function (options = {}) {
-  if (options.valuesKey) return options;
-  return {
-    values: [{
-      label: 'Value',
-      value: 'value'
-    }],
-    ...options
-  };
-};
-Taglist.type = type$3;
-Taglist.label = 'Taglist';
-Taglist.keyed = true;
-Taglist.emptyValue = [];
-Taglist.sanitizeValue = sanitizeMultiSelectValue;
+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 = 'Tag list';
+Taglist.keyed = true;
+Taglist.emptyValue = [];
+Taglist.sanitizeValue = sanitizeMultiSelectValue;
+Taglist.group = 'selection';
+
+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 = (({
@@ -3324,18 +3808,18 @@ var ChecklistIcon = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
   width: "54",
   height: "54",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+  fill: "none"
 }, props), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
-  fill: "#22242A"
+  d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
+  fill: "#161616"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
-  fill: "#22242A"
+  d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
+  fill: "#161616"
 })));
 
 function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
@@ -3536,226 +4020,13 @@ const iconsByType = {
   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 = {}) {
-  return {
-    ...options
-  };
-};
-Textarea.type = type;
-Textarea.label = 'Text area';
-Textarea.keyed = true;
-Textarea.emptyValue = '';
-Textarea.sanitizeValue = ({
-  value
-}) => isArray(value) || isObject(value) ? '' : String(value);
-
 const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Datetime, Radio, Select, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
     this._formFields = {};
     formFields.forEach(formField => {
-      const {
-        type
-      } = formField;
-      this.register(type, formField);
+      this.register(formField.type, formField);
     });
   }
   register(type, formField) {
@@ -3797,7 +4068,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,
@@ -4198,7 +4469,7 @@ class Form {
   }
 }
 
-const schemaVersion = 6;
+const schemaVersion = 7;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -4223,5 +4494,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