@bpmn-io/form-js-viewer 0.7.2 → 0.8.0

package/dist/index.es.js

@@ -1,11 +1,12 @@
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, set, isString } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, isObject, set, isString } from 'min-dash';
 import snarkdown from '@bpmn-io/snarkdown';
 import { jsx, jsxs } from 'preact/jsx-runtime';
-import { useContext, useState, useCallback } from 'preact/hooks';
+import { useContext, useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
+import React, { createPortal } from 'preact/compat';
+import classNames from 'classnames';
 import Markup from 'preact-markup';
-import { createPortal } from 'preact/compat';
 import { Injector } from 'didi';
 
 var FN_REF = '__fn';
@@ -588,52 +589,15 @@ class FormFieldRegistry {
 FormFieldRegistry.$inject = ['eventBus'];
 
 function createInjector(bootstrapModules) {
-  const modules = [],
-        components = [];
-
-  function hasModule(module) {
-    return modules.includes(module);
-  }
-
-  function addModule(module) {
-    modules.push(module);
-  }
-
-  function visit(module) {
-    if (hasModule(module)) {
-      return;
-    }
-
-    (module.__depends__ || []).forEach(visit);
-
-    if (hasModule(module)) {
-      return;
-    }
-
-    addModule(module);
-    (module.__init__ || []).forEach(function (component) {
-      components.push(component);
-    });
-  }
-
-  bootstrapModules.forEach(visit);
-  const injector = new Injector(modules);
-  components.forEach(function (component) {
-    try {
-      injector[typeof component === 'string' ? 'get' : 'invoke'](component);
-    } catch (err) {
-      console.error('Failed to instantiate component');
-      console.error(err.stack);
-      throw err;
-    }
-  });
+  const injector = new Injector(bootstrapModules);
+  injector.init();
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -679,41 +643,76 @@ function generateIndexForType(type) {
 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[]}
+ */
+
+function getSchemaVariables(schema) {
+  if (!schema.components) {
+    return [];
+  }
+
+  return schema.components.reduce((variables, component) => {
+    const {
+      key,
+      valuesKey,
+      type
+    } = component;
+
+    if (['text', 'button'].includes(type)) {
+      return variables;
+    }
+
+    if (key) {
+      variables = [...variables, key];
+    }
+
+    if (valuesKey && !variables.includes(valuesKey)) {
+      variables = [...variables, valuesKey];
+    }
+
+    return variables;
+  }, []);
+}
 
 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
+    // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
     const warnings = [];
 
     try {
@@ -729,11 +728,11 @@ class Importer {
       throw err;
     }
   }
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
 
 
@@ -795,10 +794,10 @@ class Importer {
       this.importFormField(component, parentId);
     });
   }
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} importedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} importedData
    */
 
 
@@ -807,19 +806,39 @@ class Importer {
       const {
         defaultValue,
         _path,
-        type
-      } = formField;
-
-      if (!_path) {
-        return importedData;
-      } // (1) try to get value from data
-      // (2) try to get default value from form field
-      // (3) get empty value from form field
-
+        type,
+        valuesKey
+      } = formField; // get values defined via valuesKey
+
+      if (valuesKey) {
+        importedData = { ...importedData,
+          [valuesKey]: get(data, [valuesKey])
+        };
+      } // try to get value from data
+      // if unavailable - try to get default value from form field
+      // if unavailable - get empty value from form field
+
+
+      if (_path) {
+        const fieldImplementation = this._formFields.get(type);
+
+        let valueData = get(data, _path);
+
+        if (!isUndefined(valueData) && fieldImplementation.sanitizeValue) {
+          valueData = fieldImplementation.sanitizeValue({
+            formField,
+            data,
+            value: valueData
+          });
+        }
+
+        const initialFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldImplementation.emptyValue;
+        importedData = { ...importedData,
+          [_path[0]]: initialFieldValue
+        };
+      }
 
-      return { ...importedData,
-        [_path[0]]: get(data, _path, isUndefined(defaultValue) ? this._formFields.get(type).emptyValue : defaultValue)
-      };
+      return importedData;
     }, {});
   }
 
@@ -839,11 +858,11 @@ const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^
 const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
 
 const FORM_ELEMENT = document.createElement('form');
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 function sanitizeHTML(html) {
@@ -862,15 +881,15 @@ function sanitizeHTML(html) {
     return '';
   }
 }
-/**
- * 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) {
@@ -917,13 +936,13 @@ function sanitizeNode(node) {
     node.childNodes[i]);
   }
 }
-/**
- * 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}
  */
 
 
@@ -979,8 +998,48 @@ function safeMarkdown(markdown) {
   const html = markdownToHTML(markdown);
   return sanitizeHTML(html);
 }
+function sanitizeSingleSelectValue(options) {
+  const {
+    formField,
+    data,
+    value
+  } = options;
+  const {
+    valuesKey,
+    values
+  } = formField;
+
+  try {
+    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+    return validValues.includes(value) ? value : null;
+  } catch (error) {
+    // use default value in case of formatting error
+    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
+    return null;
+  }
+}
+function sanitizeMultiSelectValue(options) {
+  const {
+    formField,
+    data,
+    value
+  } = options;
+  const {
+    valuesKey,
+    values
+  } = formField;
+
+  try {
+    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+    return value.filter(v => validValues.includes(v));
+  } catch (error) {
+    // use default value in case of formatting error
+    // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
+    return [];
+  }
+}
 
-const type$6 = 'button';
+const type$8 = 'button';
 function Button(props) {
   const {
     disabled,
@@ -990,7 +1049,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$6),
+    class: formFieldClasses(type$8),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1007,7 +1066,7 @@ Button.create = function (options = {}) {
   };
 };
 
-Button.type = type$6;
+Button.type = type$8;
 Button.label = 'Button';
 Button.keyed = true;
 
@@ -1023,11 +1082,11 @@ const FormRenderContext = createContext({
   }
 });
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 
 function getService(type, strict) {}
@@ -1089,7 +1148,7 @@ function Label(props) {
   });
 }
 
-const type$5 = 'checkbox';
+const type$7 = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -1116,7 +1175,7 @@ function Checkbox(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$5, errors),
+    class: formFieldClasses(type$7, errors),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1142,11 +1201,15 @@ Checkbox.create = function (options = {}) {
   };
 };
 
-Checkbox.type = type$5;
+Checkbox.type = type$7;
 Checkbox.label = 'Checkbox';
 Checkbox.keyed = true;
 Checkbox.emptyValue = false;
 
+Checkbox.sanitizeValue = ({
+  value
+}) => value === true;
+
 function useService (type, strict) {
   const {
     getService
@@ -1154,6 +1217,153 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
+/**
+ * @enum { String }
+ */
+
+const LOAD_STATES = {
+  LOADING: 'loading',
+  LOADED: 'loaded',
+  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
+ */
+
+/**
+ * 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 {
+    valuesKey,
+    values: staticValues
+  } = field;
+  const [valuesGetter, setValuesGetter] = useState({
+    values: [],
+    error: undefined,
+    state: LOAD_STATES.LOADING
+  });
+
+  const initialData = useService('form')._getState().initialData;
+
+  useEffect(() => {
+    let values = [];
+
+    if (valuesKey !== undefined) {
+      const keyedValues = (initialData || {})[valuesKey];
+
+      if (keyedValues && Array.isArray(keyedValues)) {
+        values = keyedValues;
+      }
+    } else if (staticValues !== undefined) {
+      values = Array.isArray(staticValues) ? staticValues : [];
+    } else {
+      setValuesGetter(getErrorState('No values source defined in the form definition'));
+      return;
+    }
+
+    setValuesGetter(buildLoadedState(values));
+  }, [valuesKey, staticValues, initialData]);
+  return valuesGetter;
+}
+
+const getErrorState = error => ({
+  values: [],
+  error,
+  state: LOAD_STATES.ERROR
+});
+
+const buildLoadedState = values => ({
+  values,
+  error: undefined,
+  state: LOAD_STATES.LOADED
+});
+
+const type$6 = 'checklist';
+function Checklist(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value = []
+  } = props;
+  const {
+    description,
+    id,
+    label
+  } = field;
+
+  const toggleCheckbox = v => {
+    let newValue = [...value];
+
+    if (!newValue.includes(v)) {
+      newValue.push(v);
+    } else {
+      newValue = newValue.filter(x => x != v);
+    }
+
+    props.onChange({
+      field,
+      value: newValue
+    });
+  };
+
+  const {
+    state: loadState,
+    values: options
+  } = useValuesAsync(field);
+  const {
+    formId
+  } = useContext(FormContext);
+  return jsxs("div", {
+    class: formFieldClasses(type$6, errors),
+    children: [jsx(Label, {
+      label: label
+    }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
+      return jsx(Label, {
+        id: prefixId(`${id}-${index}`, formId),
+        label: v.label,
+        required: false,
+        children: jsx("input", {
+          checked: value.includes(v.value),
+          class: "fjs-input",
+          disabled: disabled,
+          id: prefixId(`${id}-${index}`, formId),
+          type: "checkbox",
+          onClick: () => toggleCheckbox(v.value)
+        })
+      }, `${id}-${index}`);
+    }), jsx(Description, {
+      description: description
+    }), jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+
+Checklist.create = function (options = {}) {
+  if (options.valuesKey) return options;
+  return {
+    values: [{
+      label: 'Value',
+      value: 'value'
+    }],
+    ...options
+  };
+};
+
+Checklist.type = type$6;
+Checklist.label = 'Checklist';
+Checklist.keyed = true;
+Checklist.emptyValue = [];
+Checklist.sanitizeValue = sanitizeMultiSelectValue;
+
 const noop$1 = () => false;
 
 function FormField(props) {
@@ -1229,10 +1439,10 @@ Default.create = function (options = {}) {
 Default.type = 'default';
 Default.keyed = false;
 
-/**
- * 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() {
@@ -1362,7 +1572,7 @@ function FormComponent(props) {
   });
 }
 
-const type$4 = 'number';
+const type$5 = 'number';
 function Number(props) {
   const {
     disabled,
@@ -1383,10 +1593,11 @@ function Number(props) {
   const onChange = ({
     target
   }) => {
-    const parsedValue = parseInt(target.value, 10);
     props.onChange({
       field,
-      value: isNaN(parsedValue) ? null : parsedValue
+      value: Number.sanitizeValue({
+        value: target.value
+      })
     });
   };
 
@@ -1394,7 +1605,7 @@ function Number(props) {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$4, errors),
+    class: formFieldClasses(type$5, errors),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1419,12 +1630,19 @@ Number.create = function (options = {}) {
   };
 };
 
-Number.type = type$4;
+Number.sanitizeValue = ({
+  value
+}) => {
+  const parsedValue = parseInt(value, 10);
+  return isNaN(parsedValue) ? null : parsedValue;
+};
+
+Number.type = type$5;
 Number.keyed = true;
 Number.label = 'Number';
 Number.emptyValue = null;
 
-const type$3 = 'radio';
+const type$4 = 'radio';
 function Radio(props) {
   const {
     disabled,
@@ -1436,8 +1654,7 @@ function Radio(props) {
     description,
     id,
     label,
-    validate = {},
-    values
+    validate = {}
   } = field;
   const {
     required
@@ -1450,26 +1667,30 @@ function Radio(props) {
     });
   };
 
+  const {
+    state: loadState,
+    values: options
+  } = useValuesAsync(field);
   const {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$3, errors),
+    class: formFieldClasses(type$4, errors),
     children: [jsx(Label, {
       label: label,
       required: required
-    }), values.map((v, index) => {
+    }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
       return jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
-        label: v.label,
+        label: option.label,
         required: false,
         children: jsx("input", {
-          checked: v.value === value,
+          checked: option.value === value,
           class: "fjs-input",
           disabled: disabled,
           id: prefixId(`${id}-${index}`, formId),
           type: "radio",
-          onClick: () => onChange(v.value)
+          onClick: () => onChange(option.value)
         })
       }, `${id}-${index}`);
     }), jsx(Description, {
@@ -1481,6 +1702,7 @@ function Radio(props) {
 }
 
 Radio.create = function (options = {}) {
+  if (options.valuesKey) return options;
   return {
     values: [{
       label: 'Value',
@@ -1490,12 +1712,13 @@ Radio.create = function (options = {}) {
   };
 };
 
-Radio.type = type$3;
+Radio.type = type$4;
 Radio.label = 'Radio';
 Radio.keyed = true;
 Radio.emptyValue = null;
+Radio.sanitizeValue = sanitizeSingleSelectValue;
 
-const type$2 = 'select';
+const type$3 = 'select';
 function Select(props) {
   const {
     disabled,
@@ -1507,8 +1730,7 @@ function Select(props) {
     description,
     id,
     label,
-    validate = {},
-    values
+    validate = {}
   } = field;
   const {
     required
@@ -1523,11 +1745,15 @@ function Select(props) {
     });
   };
 
+  const {
+    state: loadState,
+    values: options
+  } = useValuesAsync(field);
   const {
     formId
   } = useContext(FormContext);
   return jsxs("div", {
-    class: formFieldClasses(type$2, errors),
+    class: formFieldClasses(type$3, errors),
     children: [jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -1540,10 +1766,10 @@ function Select(props) {
       value: value || '',
       children: [jsx("option", {
         value: ""
-      }), values.map((v, index) => {
+      }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
         return jsx("option", {
-          value: v.value,
-          children: v.label
+          value: option.value,
+          children: option.label
         }, `${id}-${index}`);
       })]
     }), jsx(Description, {
@@ -1555,6 +1781,7 @@ function Select(props) {
 }
 
 Select.create = function (options = {}) {
+  if (options.valuesKey) return options;
   return {
     values: [{
       label: 'Value',
@@ -1564,10 +1791,317 @@ Select.create = function (options = {}) {
   };
 };
 
-Select.type = type$2;
+Select.type = type$3;
 Select.label = 'Select';
 Select.keyed = true;
 Select.emptyValue = null;
+Select.sanitizeValue = sanitizeSingleSelectValue;
+
+function _extends() { _extends = 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.apply(this, arguments); }
+var CloseIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  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: "#000"
+})));
+
+function useKeyDownAction(targetKey, action, listenerElement = window) {
+  function downHandler({
+    key
+  }) {
+    if (key === targetKey) {
+      action();
+    }
+  }
+
+  useEffect(() => {
+    listenerElement.addEventListener('keydown', downHandler);
+    return () => {
+      listenerElement.removeEventListener('keydown', downHandler);
+    };
+  });
+}
+
+const DEFAULT_LABEL_GETTER = value => value;
+
+const NOOP = () => {};
+
+function DropdownList(props) {
+  const {
+    keyEventsListener = window,
+    values = [],
+    getLabel = DEFAULT_LABEL_GETTER,
+    onValueSelected = NOOP,
+    height = 235,
+    emptyListMessage = 'No results'
+  } = props;
+  const [mouseControl, setMouseControl] = useState(true);
+  const [focusedValueIndex, setFocusedValueIndex] = useState(0);
+  const dropdownContainer = useRef();
+  const mouseScreenPos = useRef();
+  const focusedItem = useMemo(() => values.length ? values[focusedValueIndex] : null, [focusedValueIndex, values]);
+  const changeFocusedValueIndex = useCallback(delta => {
+    setFocusedValueIndex(x => Math.min(Math.max(0, x + delta), values.length - 1));
+  }, [values.length]);
+  useEffect(() => {
+    if (focusedValueIndex === 0) return;
+
+    if (!focusedValueIndex || !values.length) {
+      setFocusedValueIndex(0);
+    } else if (focusedValueIndex >= values.length) {
+      setFocusedValueIndex(values.length - 1);
+    }
+  }, [focusedValueIndex, values.length]);
+  useKeyDownAction('ArrowUp', () => {
+    if (values.length) {
+      changeFocusedValueIndex(-1);
+      setMouseControl(false);
+    }
+  }, keyEventsListener);
+  useKeyDownAction('ArrowDown', () => {
+    if (values.length) {
+      changeFocusedValueIndex(1);
+      setMouseControl(false);
+    }
+  }, keyEventsListener);
+  useKeyDownAction('Enter', () => {
+    if (focusedItem) {
+      onValueSelected(focusedItem);
+    }
+  }, keyEventsListener);
+  useEffect(() => {
+    const individualEntries = dropdownContainer.current.children;
+
+    if (individualEntries.length && !mouseControl) {
+      individualEntries[focusedValueIndex].scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [focusedValueIndex, mouseControl]);
+
+  const mouseMove = (e, i) => {
+    const userMoved = !mouseScreenPos.current || mouseScreenPos.current.x !== e.screenX && mouseScreenPos.current.y !== e.screenY;
+
+    if (userMoved) {
+      mouseScreenPos.current = {
+        x: e.screenX,
+        y: e.screenY
+      };
+
+      if (!mouseControl) {
+        setMouseControl(true);
+        setFocusedValueIndex(i);
+      }
+    }
+  };
+
+  return jsxs("div", {
+    ref: dropdownContainer,
+    tabIndex: -1,
+    class: "fjs-dropdownlist",
+    style: {
+      maxHeight: height
+    },
+    children: [!!values.length && values.map((v, i) => {
+      return jsx("div", {
+        class: 'fjs-dropdownlist-item' + (focusedValueIndex === i ? ' focused' : ''),
+        onMouseMove: e => mouseMove(e, i),
+        onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
+        onMouseDown: e => {
+          e.preventDefault();
+          onValueSelected(v);
+        },
+        children: getLabel(v)
+      });
+    }), !values.length && jsx("div", {
+      class: "fjs-dropdownlist-empty",
+      children: emptyListMessage
+    })]
+  });
+}
+
+const type$2 = 'taglist';
+function Taglist(props) {
+  const {
+    disabled,
+    errors = [],
+    field,
+    value: values = []
+  } = props;
+  const {
+    description,
+    id,
+    label
+  } = field;
+  const {
+    formId
+  } = useContext(FormContext);
+  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 {
+    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]); // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
+
+  useEffect(() => {
+    if (loadState === LOAD_STATES.LOADED) {
+      setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
+    } else {
+      setFilteredOptions([]);
+    }
+  }, [filter, JSON.stringify(values), options, loadState]);
+  useEffect(() => {
+    setHasOptionsLeft(options.length > values.length);
+  }, [options.length, values.length]);
+
+  const onFilterChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setFilter(target.value);
+  };
+
+  const selectValue = value => {
+    if (filter) {
+      setFilter('');
+    } // Ensure values cannot be double selected due to latency
+
+
+    if (values.at(-1) === value) {
+      return;
+    }
+
+    props.onChange({
+      value: [...values, value],
+      field
+    });
+  };
+
+  const deselectValue = value => {
+    props.onChange({
+      value: values.filter(v => v != value),
+      field
+    });
+  };
+
+  const onInputKeyDown = e => {
+    switch (e.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        // We do not want the cursor to seek in the search field when we press up and down
+        e.preventDefault();
+        break;
+
+      case 'Backspace':
+        if (!filter && values.length) {
+          deselectValue(values[values.length - 1]);
+        }
+
+        break;
+
+      case 'Escape':
+        setIsEscapeClose(true);
+        break;
+
+      case 'Enter':
+        if (isEscapeClosed) {
+          setIsEscapeClose(false);
+        }
+
+        break;
+    }
+  };
+
+  return jsxs("div", {
+    class: formFieldClasses(type$2, errors),
+    children: [jsx(Label, {
+      label: label,
+      id: prefixId(id, formId)
+    }), jsxs("div", {
+      class: classNames('fjs-taglist', {
+        'disabled': disabled
+      }),
+      children: [!disabled && loadState === LOAD_STATES.LOADED && values.map(v => {
+        return jsxs("div", {
+          class: "fjs-taglist-tag",
+          onMouseDown: e => e.preventDefault(),
+          children: [jsx("span", {
+            class: "fjs-taglist-tag-label",
+            children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
+          }), jsx("span", {
+            class: "fjs-taglist-tag-remove",
+            onMouseDown: () => deselectValue(v),
+            children: jsx(CloseIcon, {})
+          })]
+        });
+      }), jsx("input", {
+        disabled: disabled,
+        class: "fjs-taglist-input",
+        ref: searchbarRef,
+        id: prefixId(`${id}-search`, formId),
+        onChange: onFilterChange,
+        type: "text",
+        value: filter,
+        placeholder: 'Search',
+        autoComplete: "off",
+        onKeyDown: e => onInputKeyDown(e),
+        onMouseDown: () => setIsEscapeClose(false),
+        onFocus: () => setIsDropdownExpanded(true),
+        onBlur: () => {
+          setIsDropdownExpanded(false);
+          setFilter('');
+        }
+      })]
+    }), jsx("div", {
+      class: "fjs-taglist-anchor",
+      children: !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed && jsx(DropdownList, {
+        values: filteredOptions,
+        getLabel: o => o.label,
+        onValueSelected: o => selectValue(o.value),
+        emptyListMessage: hasOptionsLeft ? 'No results' : 'All values selected',
+        listenerElement: searchbarRef.current
+      })
+    }), jsx(Description, {
+      description: description
+    }), jsx(Errors, {
+      errors: errors
+    })]
+  });
+}
+
+Taglist.create = function (options = {}) {
+  if (options.valuesKey) return options;
+  return {
+    values: [{
+      label: 'Value',
+      value: 'value'
+    }],
+    ...options
+  };
+};
+
+Taglist.type = type$2;
+Taglist.label = 'Taglist';
+Taglist.keyed = true;
+Taglist.emptyValue = [];
+Taglist.sanitizeValue = sanitizeMultiSelectValue;
 
 const type$1 = 'text';
 function Text(props) {
@@ -1657,7 +2191,11 @@ Textfield.label = 'Text Field';
 Textfield.keyed = true;
 Textfield.emptyValue = '';
 
-const formFields = [Button, Checkbox, Default, Number, Radio, Select, Text, Textfield];
+Textfield.sanitizeValue = ({
+  value
+}) => isArray(value) || isObject(value) ? null : String(value);
+
+const formFields = [Button, Checkbox, Checklist, Default, Number, Radio, Select, Taglist, Text, Textfield];
 
 class FormFields {
   constructor() {
@@ -2144,7 +2682,7 @@ class Form {
 
 }
 
-const schemaVersion = 4;
+const schemaVersion = 5;
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
  */
@@ -2169,5 +2707,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Number, Radio, Select, Text, Textfield, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, Default, Form, FormComponent, FormContext, FormFieldRegistry, FormFields, FormRenderContext, Number, Radio, Select, Taglist, Text, Textfield, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
 //# sourceMappingURL=index.es.js.map