npm - @bpmn-io/form-js-viewer - Versions diffs - 1.3.3 → 1.4.0 - Mend

@bpmn-io/form-js-viewer 1.3.3 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/LICENSE +22 -22
package/README.md +189 -164
package/dist/assets/form-js-base.css +1016 -987
package/dist/assets/form-js.css +29 -0
package/dist/index.cjs +831 -642
package/dist/index.cjs.map +1 -1
package/dist/index.es.js +826 -643
package/dist/index.es.js.map +1 -1
package/dist/types/index.d.ts +1 -1
package/dist/types/render/components/form-fields/Separator.d.ts +12 -0
package/dist/types/render/components/form-fields/parts/SkipLink.d.ts +1 -0
package/dist/types/render/components/index.d.ts +6 -1
package/dist/types/types.d.ts +35 -35
package/dist/types/util/index.d.ts +34 -3
package/package.json +2 -2

package/dist/index.es.js CHANGED Viewed

@@ -53,26 +53,26 @@ const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', o
   return [...new Set(variables)];
 };
-/**
- * Get the variable name at the specified index in a given path expression.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @param {number} index - The index of the variable name to retrieve.
- * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+/**
+ * Get the variable name at the specified index in a given path expression.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @param {number} index - The index of the variable name to retrieve.
+ * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
  */
 const _getVariableNameAtPathIndex = (root, index) => {
   const nodes = _linearizePathExpression(root);
   return nodes[index].variableName || null;
 };
-/**
- * Extracts the variables which are required of the external context for a given path expression.
- * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
- *
- * @param {Object} node - The root node of the path expression tree.
- * @param {number} initialDepth - The depth at which the root node is located in the outer context.
- * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
- * @returns {Set} - A set containing the extracted variable names.
+/**
+ * Extracts the variables which are required of the external context for a given path expression.
+ * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+ *
+ * @param {Object} node - The root node of the path expression tree.
+ * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+ * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+ * @returns {Set} - A set containing the extracted variable names.
  */
 const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
   // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -118,11 +118,11 @@ const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) =
   return new Set(extractedVariables);
 };
-/**
- * Deconstructs a path expression tree into an array of components.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @returns {Array<object>} An array of components in the path expression, in the correct order.
+/**
+ * Deconstructs a path expression tree into an array of components.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @returns {Array<object>} An array of components in the path expression, in the correct order.
  */
 const _linearizePathExpression = root => {
   let node = root;
@@ -141,13 +141,13 @@ const _linearizePathExpression = root => {
   return parts.reverse();
 };
-/**
- * Builds a simplified feel structure tree from the given parse tree and feel string.
- * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
- *
- * @param {Object} parseTree - The parse tree generated by a parser.
- * @param {string} feelString - The feel string used for parsing.
- * @returns {Object} The simplified feel structure tree.
+/**
+ * Builds a simplified feel structure tree from the given parse tree and feel string.
+ * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+ *
+ * @param {Object} parseTree - The parse tree generated by a parser.
+ * @param {string} feelString - The feel string used for parsing.
+ * @returns {Object} The simplified feel structure tree.
  */
 const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   const stack = [{
@@ -173,9 +173,9 @@ const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   return _extractFilterExpressions(stack[0].children[0]);
 };
-/**
- * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
- * This is done to simplify the extraction of variables and match the context hierarchy.
+/**
+ * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
+ * This is done to simplify the extraction of variables and match the context hierarchy.
  */
 const _extractFilterExpressions = tree => {
   const flattenedExpressionTree = {
@@ -216,25 +216,25 @@ class FeelExpressionLanguage {
     this._eventBus = eventBus;
   }
-  /**
-   * Determines if the given value is a FEEL expression.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a FEEL expression.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isExpression(value) {
     return isString(value) && value.startsWith('=');
   }
-  /**
-   * Retrieve variable names from a given FEEL expression.
-   *
-   * @param {string} expression
-   * @param {object} [options]
-   * @param {string} [options.type]
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
    */
   getVariableNames(expression, options = {}) {
     const {
@@ -249,13 +249,13 @@ class FeelExpressionLanguage {
     return getFlavouredFeelVariableNames(expression, type);
   }
-  /**
-   * 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) {
@@ -280,23 +280,23 @@ FeelExpressionLanguage.$inject = ['eventBus'];
 class FeelersTemplating {
   constructor() {}
-  /**
-   * Determines if the given value is a feelers template.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a feelers template.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isTemplate(value) {
     return isString(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
   }
-  /**
-   * Retrieve variable names from a given feelers template.
-   *
-   * @param {string} template
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given feelers template.
+   *
+   * @param {string} template
+   *
+   * @returns {string[]}
    */
   getVariableNames(template) {
     if (!this.isTemplate(template)) {
@@ -322,17 +322,17 @@ class FeelersTemplating {
     }, []);
   }
-  /**
-   * Evaluate a template.
-   *
-   * @param {string} template
-   * @param {Object<string, any>} context
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
-   * @returns
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
    */
   evaluate(template, context = {}, options = {}) {
     const {
@@ -347,22 +347,22 @@ class FeelersTemplating {
     });
   }
-  /**
-  * @typedef {Object} ExpressionWithDepth
-  * @property {number} depth - The depth of the expression in the syntax tree.
-  * @property {string} expression - The extracted expression
+  /**
+  * @typedef {Object} ExpressionWithDepth
+  * @property {number} depth - The depth of the expression in the syntax tree.
+  * @property {string} expression - The extracted expression
   */
-  /**
-  * Extracts all feel expressions in the template along with their depth in the syntax tree.
-  * The depth is incremented for child expressions of loops to account for context drilling.
-   * @name extractExpressionsWithDepth
-  * @param {string} template - A feelers template string.
-  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-  *
-  * @example
-  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-  * const extractedExpressions = _extractExpressionsWithDepth(template);
+  /**
+  * Extracts all feel expressions in the template along with their depth in the syntax tree.
+  * The depth is incremented for child expressions of loops to account for context drilling.
+  * @name extractExpressionsWithDepth
+  * @param {string} template - A feelers template string.
+  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+  *
+  * @example
+  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+  * const extractedExpressions = _extractExpressionsWithDepth(template);
   */
   _extractExpressionsWithDepth(template) {
     // build simplified feelers syntax tree
@@ -425,27 +425,31 @@ function prefixId(id, formId) {
   return `fjs-form-${id}`;
 }
-const type$c = 'button';
+const type$d = 'button';
 function Button(props) {
   const {
     disabled,
+    onFocus,
+    onBlur,
     field
   } = props;
   const {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$c),
+    class: formFieldClasses(type$d),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
       disabled: disabled,
+      onFocus: () => onFocus && onFocus(),
+      onBlur: () => onBlur && onBlur(),
       children: field.label
     })
   });
 }
 Button.config = {
-  type: type$c,
+  type: type$d,
   keyed: false,
   label: 'Button',
   group: 'action',
@@ -496,11 +500,11 @@ const FormRenderContext = createContext({
 });
 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({
@@ -516,10 +520,10 @@ function useService(type, strict) {
   return getService(type, strict);
 }
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
  */
 function useFilteredFormData() {
   const {
@@ -536,12 +540,12 @@ function useFilteredFormData() {
   }, [conditionChecker, data, initialData]);
 }
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
@@ -551,13 +555,13 @@ function useCondition(condition) {
   }, [conditionChecker, condition, filteredData]);
 }
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
  */
 function useExpressionEvaluation(value) {
   const formData = useFilteredFormData();
@@ -586,16 +590,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
-/**
- * Retrieve readonly value of a form field, given it can be an
- * expression optionally or configured globally.
- *
- * @typedef { import('../../types').FormProperties } FormProperties
- *
- * @param {any} formField
- * @param {FormProperties} properties
- *
- * @returns {boolean}
+/**
+ * Retrieve readonly value of a form field, given it can be an
+ * expression optionally or configured globally.
+ *
+ * @typedef { import('../../types').FormProperties } FormProperties
+ *
+ * @param {any} formField
+ * @param {FormProperties} properties
+ *
+ * @returns {boolean}
  */
 function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
@@ -619,12 +623,12 @@ function usePrevious(value, defaultValue, dependencies) {
   return ref.current;
 }
-/**
- * A custom hook to manage state changes with deep comparison.
- *
- * @param {any} value - The current value to manage.
- * @param {any} defaultValue - The initial default value for the state.
- * @returns {any} - Returns the current state.
+/**
+ * A custom hook to manage state changes with deep comparison.
+ *
+ * @param {any} value - The current value to manage.
+ * @param {any} defaultValue - The initial default value for the state.
+ * @returns {any} - Returns the current state.
  */
 function useDeepCompareState(value, defaultValue) {
   const [state, setState] = useState(defaultValue);
@@ -644,16 +648,16 @@ function compare(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useTemplateEvaluation(value, options) {
   const filteredData = useFilteredFormData();
@@ -666,17 +670,17 @@ function useTemplateEvaluation(value, options) {
   }, [filteredData, templating, value, options]);
 }
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * If the string contains multiple lines, only the first line is returned.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} [options]
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * If the string contains multiple lines, only the first line is returned.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} [options]
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useSingleLineTemplateEvaluation(value, options = {}) {
   const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -743,12 +747,13 @@ function Label(props) {
   });
 }
-const type$b = 'checkbox';
+const type$c = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = false
@@ -775,7 +780,7 @@ function Checkbox(props) {
   } = useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$b, {
+    class: classNames(formFieldClasses(type$c, {
       errors,
       disabled,
       readonly
@@ -794,7 +799,8 @@ function Checkbox(props) {
         id: prefixId(id, formId),
         type: "checkbox",
         onChange: onChange,
-        onBlur: onBlur,
+        onBlur: () => onBlur && onBlur(),
+        onFocus: () => onFocus && onFocus(),
         "aria-describedby": errorMessageId
       })
     }), jsx(Description, {
@@ -806,7 +812,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -880,8 +886,8 @@ function createEmptyOptions(options = {}) {
   };
 }
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -889,17 +895,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 {
@@ -1193,12 +1199,13 @@ function sanitizeMultiSelectValue(options) {
   }
 }
-const type$a = 'checklist';
+const type$b = 'checklist';
 function Checklist(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = []
@@ -1229,7 +1236,13 @@ function Checklist(props) {
     if (outerDivRef.current.contains(e.relatedTarget)) {
       return;
     }
-    onBlur();
+    onBlur && onBlur();
+  };
+  const onCheckboxFocus = e => {
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onFocus && onFocus();
   };
   const {
     state: loadState,
@@ -1240,7 +1253,7 @@ function Checklist(props) {
   } = useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$a, {
+    class: classNames(formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -1266,6 +1279,7 @@ function Checklist(props) {
           type: "checkbox",
           onClick: () => toggleCheckbox(v.value),
           onBlur: onCheckboxBlur,
+          onFocus: onCheckboxFocus,
           "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
@@ -1278,7 +1292,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   label: 'Checklist',
   group: 'selection',
@@ -1296,6 +1310,7 @@ function FormField(props) {
   const formFields = useService('formFields'),
     viewerCommands = useService('viewerCommands', false),
     pathRegistry = useService('pathRegistry'),
+    eventBus = useService('eventBus'),
     form = useService('form');
   const {
     initialData,
@@ -1323,7 +1338,15 @@ function FormField(props) {
     if (viewerCommands) {
       viewerCommands.updateFieldValidation(field, value);
     }
-  }, [viewerCommands, field, value]);
+    eventBus.fire('formField.blur', {
+      formField: field
+    });
+  }, [eventBus, viewerCommands, field, value]);
+  const onFocus = useCallback(() => {
+    eventBus.fire('formField.focus', {
+      formField: field
+    });
+  }, [eventBus, field]);
   useEffect(() => {
     if (viewerCommands && initialValue) {
       viewerCommands.updateFieldValidation(field, initialValue);
@@ -1345,6 +1368,7 @@ function FormField(props) {
         errors: errors[field.id],
         onChange: disabled || readonly ? noop$1 : onChange,
         onBlur: disabled || readonly ? noop$1 : onBlur,
+        onFocus: disabled || readonly ? noop$1 : onFocus,
         readonly: readonly,
         value: value
       })
@@ -1420,16 +1444,16 @@ FormComponent$1.config = {
   })
 };
-var _path$h;
-function _extends$k() { _extends$k = 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$k.apply(this, arguments); }
+var _path$i;
+function _extends$l() { _extends$l = 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$l.apply(this, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M19 2H9V0H7v2H2a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5V0h-2v2ZM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7Zm-5 4v17h24V11H2Z",
@@ -1438,12 +1462,12 @@ var SvgCalendar = function SvgCalendar(props) {
 };
 var CalendarIcon = SvgCalendar;
-/**
- * Returns date format for the provided locale.
- * If the locale is not provided, uses the browser's locale.
- *
- * @param {string} [locale] - The locale to get date format for.
- * @returns {string} The date format for the locale.
+/**
+ * Returns date format for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get date format for.
+ * @returns {string} The date format for the locale.
  */
 function getLocaleDateFormat(locale = 'default') {
   const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(Date.UTC(2020, 5, 5)));
@@ -1462,12 +1486,12 @@ function getLocaleDateFormat(locale = 'default') {
   }).join('');
 }
-/**
- * Returns readable date format for the provided locale.
- * If the locale is not provided, uses the browser's locale.
- *
- * @param {string} [locale] - The locale to get readable date format for.
- * @returns {string} The readable date format for the locale.
+/**
+ * Returns readable date format for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get readable date format for.
+ * @returns {string} The readable date format for the locale.
  */
 function getLocaleReadableDateFormat(locale) {
   let format = getLocaleDateFormat(locale).toLowerCase();
@@ -1484,12 +1508,12 @@ function getLocaleReadableDateFormat(locale) {
   return format;
 }
-/**
- * Returns flatpickr config for the provided locale.
- * If the locale is not provided, uses the browser's locale.
- *
- * @param {string} [locale] - The locale to get flatpickr config for.
- * @returns {object} The flatpickr config for the locale.
+/**
+ * Returns flatpickr config for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get flatpickr config for.
+ * @returns {object} The flatpickr config for the locale.
  */
 function getLocaleDateFlatpickrConfig(locale) {
   return flatpickerizeDateFormat(getLocaleDateFormat(locale));
@@ -1550,6 +1574,7 @@ function Datepicker(props) {
     label,
     collapseLabelOnEmpty,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -1637,13 +1662,17 @@ function Datepicker(props) {
   const onInputFocus = useCallback(e => {
     if (!flatpickrInstance || focusScopeRef.current.contains(e.relatedTarget) || readonly) return;
     flatpickrInstance.open();
-  }, [flatpickrInstance, readonly]);
+    onDateTimeFocus(e);
+  }, [flatpickrInstance, readonly, onDateTimeFocus]);
   // simulate an enter press on blur to make sure the date value is submitted in all scenarios
   const onInputBlur = useCallback(e => {
-    if (!isInputDirty || e.relatedTarget && e.relatedTarget.classList.contains('flatpickr-day')) return;
-    dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
-    setIsInputDirty(false);
+    const isFalseBlur = e.relatedTarget && e.relatedTarget.classList.contains('flatpickr-day');
+    if (isFalseBlur) return;
+    if (isInputDirty) {
+      dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
+      setIsInputDirty(false);
+    }
     onDateTimeBlur(e);
   }, [isInputDirty, onDateTimeBlur]);
   const fullId = `${prefixId(id, formId)}--date`;
@@ -1675,9 +1704,9 @@ function Datepicker(props) {
           placeholder: getLocaleReadableDateFormat(),
           autoComplete: "off",
           onFocus: onInputFocus,
+          onBlur: onInputBlur,
           onKeyDown: onInputKeyDown,
           onMouseDown: () => !flatpickrInstance.isOpen && !readonly && flatpickrInstance.open(),
-          onBlur: onInputBlur,
           onInput: () => setIsInputDirty(true),
           "data-input": true,
           "aria-describedby": props['aria-describedby']
@@ -1687,19 +1716,19 @@ function Datepicker(props) {
   });
 }
-var _path$g, _path2$4;
-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 _path$h, _path2$3;
+function _extends$k() { _extends$k = 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$k.apply(this, arguments); }
 var SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M6.222 25.64A14 14 0 1 0 21.778 2.36 14 14 0 0 0 6.222 25.64ZM7.333 4.023a12 12 0 1 1 13.334 19.955A12 12 0 0 1 7.333 4.022Z",
@@ -1810,6 +1839,7 @@ function Timepicker(props) {
     label,
     collapseLabelOnEmpty,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -1911,6 +1941,10 @@ function Timepicker(props) {
     propagateRawToMinute();
     onDateTimeBlur(e);
   };
+  const onInputFocus = e => {
+    onDateTimeFocus(e);
+    !readonly && useDropdown && setDropdownIsOpen(true);
+  };
   const onDropdownValueSelected = value => {
     setDropdownIsOpen(false);
     propagateRawToMinute(value);
@@ -1939,9 +1973,7 @@ function Timepicker(props) {
           disabled: disabled,
           readOnly: readonly,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
-          autoComplete: "off",
-          onFocus: () => !readonly && useDropdown && setDropdownIsOpen(true),
-          onClick: () => !readonly && useDropdown && setDropdownIsOpen(true)
+          autoComplete: "off"
           // @ts-ignore
           ,
@@ -1950,6 +1982,8 @@ function Timepicker(props) {
             useDropdown && setDropdownIsOpen(false);
           },
           onBlur: onInputBlur,
+          onFocus: onInputFocus,
+          onClick: () => !readonly && useDropdown && setDropdownIsOpen(true),
           onKeyDown: onInputKeyDown,
           "data-input": true,
           "aria-describedby": props['aria-describedby']
@@ -1965,12 +1999,13 @@ function Timepicker(props) {
   });
 }
-const type$9 = 'datetime';
+const type$a = 'datetime';
 function Datetime(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     onChange,
     readonly,
@@ -2009,8 +2044,14 @@ function Datetime(props) {
     if (e.relatedTarget && dateTimeGroupRef.current.contains(e.relatedTarget)) {
       return;
     }
-    onBlur();
+    onBlur && onBlur();
   }, [onBlur]);
+  const onDateTimeFocus = useCallback(e => {
+    if (e.relatedTarget && dateTimeGroupRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onFocus && onFocus();
+  }, [onFocus]);
   useEffect(() => {
     let {
       date,
@@ -2103,6 +2144,7 @@ function Datetime(props) {
     label: dateLabel,
     collapseLabelOnEmpty: !timeLabel,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -2117,6 +2159,7 @@ function Datetime(props) {
     label: timeLabel,
     collapseLabelOnEmpty: !dateLabel,
     onDateTimeBlur,
+    onDateTimeFocus,
     formId,
     required,
     disabled,
@@ -2128,7 +2171,7 @@ function Datetime(props) {
     'aria-describedby': errorMessageId
   };
   return jsxs("div", {
-    class: formFieldClasses(type$9, {
+    class: formFieldClasses(type$a, {
       errors: allErrors,
       disabled,
       readonly
@@ -2152,7 +2195,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$9,
+  type: type$a,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -2169,10 +2212,10 @@ Datetime.config = {
   }
 };
-/**
- * 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", {
@@ -2350,11 +2393,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}
  */
 // see https://github.com/developit/snarkdown/issues/70
@@ -2372,29 +2415,29 @@ function 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 sanitizeImageSource(src) {
   const valid = ALLOWED_IMAGE_SRC_PATTERN.test(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
@@ -2438,13 +2481,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
@@ -2467,9 +2510,9 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
-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); }
+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 SvgImagePlaceholder = function SvgImagePlaceholder(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 64,
@@ -2508,7 +2551,7 @@ var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
 };
 var ImagePlaceholder = SvgImagePlaceholder;
-const type$8 = 'image';
+const type$9 = 'image';
 function Image(props) {
   const {
     field
@@ -2529,7 +2572,7 @@ function Image(props) {
     formId
   } = useContext(FormContext$1);
   return jsx("div", {
-    class: formFieldClasses(type$8),
+    class: formFieldClasses(type$9),
     children: jsxs("div", {
       class: "fjs-image-container",
       children: [safeSource && jsx("img", {
@@ -2547,7 +2590,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$8,
+  type: type$9,
   keyed: false,
   label: 'Image view',
   group: 'presentation',
@@ -2574,14 +2617,14 @@ function TemplatedInputAdorner(props) {
   });
 }
-var _path$f;
-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 _path$g;
+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 SvgAngelDown = function SvgAngelDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2592,14 +2635,14 @@ var SvgAngelDown = function SvgAngelDown(props) {
 };
 var AngelDownIcon = SvgAngelDown;
-var _path$e;
-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 _path$f;
+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 SvgAngelUp = function SvgAngelUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2635,12 +2678,13 @@ function isNullEquivalentValue(value) {
   return value === undefined || value === null || value === '';
 }
-const type$7 = 'number';
+const type$8 = 'number';
 function Numberfield(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     value,
     readonly,
@@ -2773,7 +2817,7 @@ function Numberfield(props) {
   } = useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$7, {
+    class: formFieldClasses(type$8, {
       errors,
       disabled,
       readonly
@@ -2802,7 +2846,8 @@ function Numberfield(props) {
           id: prefixId(id, formId),
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress,
-          onBlur: onBlur
+          onBlur: () => onBlur && onBlur(),
+          onFocus: () => onFocus && onFocus()
           // @ts-ignore
           ,
@@ -2845,7 +2890,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$7,
+  type: type$8,
   keyed: true,
   label: 'Number',
   group: 'basic-input',
@@ -2868,12 +2913,13 @@ Numberfield.config = {
   })
 };
-const type$6 = 'radio';
+const type$7 = 'radio';
 function Radio(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value
@@ -2898,7 +2944,13 @@ function Radio(props) {
     if (outerDivRef.current.contains(e.relatedTarget)) {
       return;
     }
-    onBlur();
+    onBlur && onBlur();
+  };
+  const onRadioFocus = e => {
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onFocus && onFocus();
   };
   const {
     state: loadState,
@@ -2909,7 +2961,7 @@ function Radio(props) {
   } = useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$6, {
+    class: formFieldClasses(type$7, {
       errors,
       disabled,
       readonly
@@ -2935,6 +2987,7 @@ function Radio(props) {
           type: "radio",
           onClick: () => onChange(option.value),
           onBlur: onRadioBlur,
+          onFocus: onRadioFocus,
           "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
@@ -2947,7 +3000,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$6,
+  type: type$7,
   keyed: true,
   label: 'Radio',
   group: 'selection',
@@ -2956,14 +3009,14 @@ Radio.config = {
   create: createEmptyOptions
 };
-var _path$d;
-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 _path$e;
+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 SvgXMark = function SvgXMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2980,6 +3033,7 @@ function SearchableSelect(props) {
     disabled,
     errors,
     onBlur,
+    onFocus,
     field,
     readonly,
     value
@@ -2992,6 +3046,7 @@ function SearchableSelect(props) {
   const [shouldApplyFilter, setShouldApplyFilter] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
   const searchbarRef = useRef();
+  const eventBus = useService('eventBus');
   const {
     state: loadState,
     values: options
@@ -3013,14 +3068,6 @@ function SearchableSelect(props) {
     }
     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({
@@ -3028,6 +3075,32 @@ function SearchableSelect(props) {
       field
     });
   }, [field, props]);
+  const displayState = useMemo(() => {
+    const ds = {};
+    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
+    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
+    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
+    return ds;
+  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
+  const onAngelMouseDown = useCallback(e => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(!isDropdownExpanded);
+    const searchbar = searchbarRef.current;
+    isDropdownExpanded ? searchbar.blur() : searchbar.focus();
+    e.preventDefault();
+  }, [isDropdownExpanded]);
+  const onInputChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(true);
+    setShouldApplyFilter(true);
+    setFilter(target.value || '');
+    eventBus.fire('formField.search', {
+      formField: field,
+      value: target.value || ''
+    });
+  };
   const onInputKeyDown = useCallback(keyDownEvent => {
     switch (keyDownEvent.key) {
       case 'ArrowUp':
@@ -3052,20 +3125,21 @@ function SearchableSelect(props) {
         break;
     }
   }, [isDropdownExpanded, isEscapeClosed]);
-  const displayState = useMemo(() => {
-    const ds = {};
-    ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
-    ds.displayCross = ds.componentReady && value !== null && value !== undefined;
-    ds.displayDropdown = !disabled && !readonly && isDropdownExpanded && !isEscapeClosed;
-    return ds;
-  }, [disabled, isDropdownExpanded, isEscapeClosed, loadState, readonly, value]);
-  const onAngelMouseDown = useCallback(e => {
+  const onInputMouseDown = useCallback(() => {
     setIsEscapeClose(false);
-    setIsDropdownExpanded(!isDropdownExpanded);
-    const searchbar = searchbarRef.current;
-    isDropdownExpanded ? searchbar.blur() : searchbar.focus();
-    e.preventDefault();
-  }, [isDropdownExpanded]);
+    setIsDropdownExpanded(true);
+    setShouldApplyFilter(false);
+  }, []);
+  const onInputFocus = useCallback(() => {
+    setIsEscapeClose(false);
+    setIsDropdownExpanded(true);
+    onFocus && onFocus();
+  }, [onFocus]);
+  const onInputBlur = useCallback(() => {
+    setIsDropdownExpanded(false);
+    setFilter(valueLabel);
+    onBlur && onBlur();
+  }, [onBlur, valueLabel]);
   return jsxs(Fragment$1, {
     children: [jsxs("div", {
       id: prefixId(`${id}`, formId),
@@ -3081,26 +3155,15 @@ function SearchableSelect(props) {
         class: "fjs-input",
         ref: searchbarRef,
         id: prefixId(`${id}-search`, formId),
-        onChange: onChange,
+        onChange: onInputChange,
         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);
-          onBlur();
-        },
+        onKeyDown: onInputKeyDown,
+        onMouseDown: onInputMouseDown,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxs("span", {
         class: "fjs-select-cross",
@@ -3135,6 +3198,7 @@ function SimpleSelect(props) {
     disabled,
     errors,
     onBlur,
+    onFocus,
     field,
     readonly,
     value
@@ -3178,6 +3242,18 @@ function SimpleSelect(props) {
     e.preventDefault();
   }, [isDropdownExpanded]);
   const initialFocusIndex = useMemo(() => value && findIndex(options, o => o.value === value) || 0, [options, value]);
+  const onInputFocus = useCallback(() => {
+    if (!readonly) {
+      setIsDropdownExpanded(true);
+      onFocus && onFocus();
+    }
+  }, [onFocus, readonly]);
+  const onInputBlur = useCallback(() => {
+    if (!readonly) {
+      setIsDropdownExpanded(false);
+      onBlur && onBlur();
+    }
+  }, [onBlur, readonly]);
   return jsxs(Fragment$1, {
     children: [jsxs("div", {
       ref: selectRef,
@@ -3188,11 +3264,8 @@ function SimpleSelect(props) {
       }, {
         'hasErrors': errors.length
       }),
-      onFocus: () => setIsDropdownExpanded(true),
-      onBlur: () => {
-        setIsDropdownExpanded(false);
-        onBlur();
-      },
+      onFocus: onInputFocus,
+      onBlur: onInputBlur,
       onMouseDown: onMouseDown,
       children: [jsx("div", {
         class: classNames('fjs-select-display', {
@@ -3204,8 +3277,8 @@ function SimpleSelect(props) {
         id: prefixId(`${id}-search`, formId),
         class: "fjs-select-hidden-input",
         value: valueLabel,
-        onFocus: () => !readonly && setIsDropdownExpanded(true),
-        onBlur: () => !readonly && setIsDropdownExpanded(false),
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsx("span", {
         class: "fjs-select-cross",
@@ -3234,12 +3307,13 @@ function SimpleSelect(props) {
   });
 }
-const type$5 = 'select';
+const type$6 = 'select';
 function Select(props) {
   const {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     onChange,
     readonly,
@@ -3264,14 +3338,15 @@ function Select(props) {
     disabled,
     errors,
     onBlur,
+    onFocus,
     field,
     value,
     onChange,
     readonly,
     'aria-describedby': errorMessageId
-  }), [disabled, errors, field, id, value, onChange, onBlur, readonly, errorMessageId]);
+  }), [disabled, errors, field, id, value, onChange, onBlur, onFocus, readonly, errorMessageId]);
   return jsxs("div", {
-    class: formFieldClasses(type$5, {
+    class: formFieldClasses(type$6, {
       errors,
       disabled,
       readonly
@@ -3299,7 +3374,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$5,
+  type: type$6,
   keyed: true,
   label: 'Select',
   group: 'selection',
@@ -3308,6 +3383,23 @@ Select.config = {
   create: createEmptyOptions
 };
+const type$5 = 'separator';
+function Separator() {
+  return jsx("div", {
+    class: formFieldClasses(type$5),
+    children: jsx("hr", {})
+  });
+}
+Separator.config = {
+  type: type$5,
+  keyed: false,
+  label: 'Separator',
+  group: 'presentation',
+  create: (options = {}) => ({
+    ...options
+  })
+};
 const type$4 = 'spacer';
 function Spacer(props) {
   const {
@@ -3334,11 +3426,33 @@ Spacer.config = {
   })
 };
+function SkipLink(props) {
+  const {
+    className,
+    label,
+    onSkip
+  } = props;
+  const onKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      onSkip();
+    }
+  }, [onSkip]);
+  return jsx("a", {
+    href: "#",
+    class: classNames('fjs-skip-link', className),
+    onKeyDown: onKeyDown,
+    children: label
+  });
+}
 const type$3 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
     errors = [],
+    onFocus,
     onBlur,
     field,
     readonly,
@@ -3362,7 +3476,9 @@ function Taglist(props) {
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
   const [hasOptionsLeft, setHasOptionsLeft] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
-  const searchbarRef = useRef();
+  const focusScopeRef = useRef();
+  const inputRef = useRef();
+  const eventBus = useService('eventBus');
   const {
     state: loadState,
     values: options
@@ -3384,12 +3500,6 @@ function Taglist(props) {
   useEffect(() => {
     setHasOptionsLeft(options.length > values.length);
   }, [options.length, values.length]);
-  const onFilterChange = ({
-    target
-  }) => {
-    setIsEscapeClose(false);
-    setFilter(target.value);
-  };
   const selectValue = value => {
     if (filter) {
       setFilter('');
@@ -3410,6 +3520,16 @@ function Taglist(props) {
       field
     });
   };
+  const onInputChange = ({
+    target
+  }) => {
+    setIsEscapeClose(false);
+    setFilter(target.value || '');
+    eventBus.fire('formField.search', {
+      formField: field,
+      value: target.value || ''
+    });
+  };
   const onInputKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
@@ -3432,10 +3552,26 @@ function Taglist(props) {
         break;
     }
   };
-  const onComponentBlur = () => {
-    setIsDropdownExpanded(false);
-    setFilter('');
-    onBlur();
+  const onElementBlur = e => {
+    if (focusScopeRef.current.contains(e.relatedTarget)) return;
+    onBlur && onBlur();
+  };
+  const onElementFocus = e => {
+    if (focusScopeRef.current.contains(e.relatedTarget)) return;
+    onFocus && onFocus();
+  };
+  const onInputBlur = e => {
+    if (!readonly) {
+      setIsDropdownExpanded(false);
+      setFilter('');
+    }
+    onElementBlur(e);
+  };
+  const onInputFocus = e => {
+    if (!readonly) {
+      setIsDropdownExpanded(true);
+    }
+    onElementFocus(e);
   };
   const onTagRemoveClick = (event, value) => {
     const {
@@ -3446,11 +3582,15 @@ function Taglist(props) {
     // restore focus if there is no next sibling to focus
     const nextTag = target.closest('.fjs-taglist-tag').nextSibling;
     if (!nextTag) {
-      searchbarRef.current.focus();
+      inputRef.current.focus();
     }
   };
+  const onSkipToSearch = () => {
+    inputRef.current.focus();
+  };
   const shouldDisplayDropdown = useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
   return jsxs("div", {
+    ref: focusScopeRef,
     class: formFieldClasses(type$3, {
       errors,
       disabled,
@@ -3466,6 +3606,10 @@ function Taglist(props) {
       label: label,
       required: required,
       id: prefixId(`${id}-search`, formId)
+    }), !disabled && !readonly && !!values.length && jsx(SkipLink, {
+      className: "fjs-taglist-skip-link",
+      label: "Skip to search",
+      onSkip: onSkipToSearch
     }), jsxs("div", {
       class: classNames('fjs-taglist', {
         'fjs-disabled': disabled,
@@ -3487,6 +3631,8 @@ function Taglist(props) {
               type: "button",
               title: "Remove tag",
               class: "fjs-taglist-tag-remove",
+              onFocus: onElementFocus,
+              onBlur: onElementBlur,
               onClick: event => onTagRemoveClick(event, v),
               children: jsx(XMarkIcon, {})
             })]
@@ -3496,17 +3642,17 @@ function Taglist(props) {
         disabled: disabled,
         readOnly: readonly,
         class: "fjs-taglist-input",
-        ref: searchbarRef,
+        ref: inputRef,
         id: prefixId(`${id}-search`, formId),
-        onChange: onFilterChange,
+        onChange: onInputChange,
         type: "text",
         value: filter,
         placeholder: disabled || readonly ? undefined : 'Search',
         autoComplete: "off",
         onKeyDown: onInputKeyDown,
         onMouseDown: () => setIsEscapeClose(false),
-        onFocus: () => !readonly && setIsDropdownExpanded(true),
-        onBlur: () => !readonly && onComponentBlur(),
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
         "aria-describedby": errorMessageId
       })]
     }), jsx("div", {
@@ -3516,7 +3662,7 @@ function Taglist(props) {
         getLabel: o => o.label,
         onValueSelected: o => selectValue(o.value),
         emptyListMessage: hasOptionsLeft ? 'No results' : 'All values selected',
-        listenerElement: searchbarRef.current
+        listenerElement: inputRef.current
       })
     }), jsx(Description, {
       description: description
@@ -3626,6 +3772,7 @@ function Textfield(props) {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = ''
@@ -3677,7 +3824,8 @@ function Textfield(props) {
         readOnly: readonly,
         id: prefixId(id, formId),
         onInput: onChange,
-        onBlur: onBlur,
+        onBlur: () => onBlur && onBlur(),
+        onFocus: () => onFocus && onFocus(),
         type: "text",
         value: value,
         "aria-describedby": errorMessageId
@@ -3720,6 +3868,7 @@ function Textarea(props) {
     disabled,
     errors = [],
     onBlur,
+    onFocus,
     field,
     readonly,
     value = ''
@@ -3768,7 +3917,8 @@ function Textarea(props) {
       readonly: readonly,
       id: prefixId(id, formId),
       onInput: onInput,
-      onBlur: onBlur,
+      onBlur: () => onBlur && onBlur(),
+      onFocus: () => onFocus && onFocus(),
       value: value,
       ref: textareaRef,
       "aria-describedby": errorMessageId
@@ -3812,39 +3962,39 @@ const autoSizeTextarea = textarea => {
   textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
 };
-var _path$c;
-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 _path$d;
+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 SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 17a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V20a3 3 0 0 1 3-3h36zm-9 8.889H18v2.222h18v-2.222z"
   })));
 };
 var ButtonIcon = SvgButton;
-var _path$b;
-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 _path$c;
+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 SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     d: "M34 18H20a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V20a2 2 0 0 0-2-2zm-9 14-5-5 1.41-1.41L25 29.17l7.59-7.59L34 23l-9 9z"
   })));
 };
 var CheckboxIcon = SvgCheckbox;
 var _g, _use, _use2, _use3, _defs;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+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 SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: 54,
@@ -3878,18 +4028,18 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 var ChecklistIcon = SvgChecklist;
-var _path$a, _path2$3, _path3;
-function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
+var _path$b, _path2$2, _path3;
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 var SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
     d: "m35.13 37.603 1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984Z"
   })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
@@ -3898,27 +4048,27 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
-var _path$9, _path2$2;
-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); }
+var _path$a, _path2$1;
+function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
 var SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36Zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1Z"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
     d: "M11 22a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H12a1 1 0 0 1-1-1V22Z"
   })));
 };
 var TaglistIcon = SvgTaglist;
 var _rect, _rect2, _rect3;
-function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
+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); }
 var SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -3944,9 +4094,24 @@ var SvgForm = function SvgForm(props) {
 };
 var FormIcon = SvgForm;
+var _path$9;
+function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
+var SvgGroup = function SvgGroup(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
+  })));
+};
+var GroupIcon = SvgGroup;
 var _path$8;
 function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
-var SvgGroup = function SvgGroup(props) {
+var SvgNumber = function SvgNumber(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -3954,74 +4119,66 @@ var SvgGroup = function SvgGroup(props) {
     fill: "currentcolor"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
+    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
   })));
 };
-var GroupIcon = SvgGroup;
+var NumberIcon = SvgNumber;
 var _path$7;
 function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
-var SvgNumber = function SvgNumber(props) {
+var SvgRadio = function SvgRadio(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zM35 28.444h7l-3.5 4-3.5-4zM35 26h7l-3.5-4-3.5 4z"
+    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
   })));
 };
-var NumberIcon = SvgNumber;
+var RadioIcon = SvgRadio;
 var _path$6;
 function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
-var SvgRadio = function SvgRadio(props) {
+var SvgSelect = function SvgSelect(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
-    d: "M27 22c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16z"
+    fillRule: "evenodd",
+    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
   })));
 };
-var RadioIcon = SvgRadio;
+var SelectIcon = SvgSelect;
 var _path$5;
 function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
-var SvgSelect = function SvgSelect(props) {
+var SvgSeparator = function SvgSeparator(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1zm-12 7h9l-4.5 6-4.5-6z"
+    fill: "currentColor",
+    d: "M26.293 16.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 18.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4ZM9 26h36v2H9v-2Zm13.293 7.707 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 35.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
   })));
 };
-var SelectIcon = SvgSelect;
+var SeparatorIcon = SvgSeparator;
-var _path$4, _path2$1;
+var _path$4;
 function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
 var SvgSpacer = function SvgSpacer(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentcolor",
-    strokeLinecap: "square",
-    strokeWidth: 2,
-    d: "M9 23h36M9 31h36"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentcolor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "m23 17 4-4 4 4M31 37l-4 4-4-4"
+    fill: "currentColor",
+    d: "M9 15v2h36v-2H9Zm0 22v2h36v-2H9Zm17.293-17.707a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L27 21.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4Zm-4 11.414 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L27 32.586l-3.293-3.293a1 1 0 0 0-1.414 1.414Z"
   })));
 };
 var SpacerIcon = SvgSpacer;
@@ -4102,6 +4259,7 @@ const iconsByType = type => {
     number: NumberIcon,
     radio: RadioIcon,
     select: SelectIcon,
+    separator: SeparatorIcon,
     spacer: SpacerIcon,
     taglist: TaglistIcon,
     text: TextIcon,
@@ -4111,7 +4269,7 @@ const iconsByType = type => {
   }[type];
 };
-const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, Image, Numberfield, Datetime, Radio, Select, Spacer, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, Image, Numberfield, Datetime, Radio, Select, Spacer, Separator, Taglist, Text, Textfield, Textarea];
 class FormFields {
   constructor() {
@@ -4172,10 +4330,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');
@@ -4212,22 +4370,47 @@ 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[]}
+/**
+ * @typedef { import('../types').Schema } Schema
+ */
+/**
+ * Parse the schema for variables a form might make use of.
+ *
+ * @example
+ *
+ * // retrieve variables from schema
+ * const variables = getSchemaVariables(schema);
+ *
+ * @example
+ *
+ * // retrieve input variables from schema
+ * const inputVariables = getSchemaVariables(schema, { outputs: false });
+ *
+ * @example
+ *
+ * // retrieve output variables from schema
+ * const outputVariables = getSchemaVariables(schema, { inputs: false });
+ *
+ * @param {Schema} schema
+ * @param {object} [options]
+ * @param {any} [options.expressionLanguage]
+ * @param {any} [options.templating]
+ * @param {any} [options.formFields]
+ * @param {boolean} [options.inputs=true]
+ * @param {boolean} [options.outputs=true]
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema, options = {}) {
   const {
@@ -4310,9 +4493,9 @@ function runRecursively(formField, fn) {
   fn(formField);
 }
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 class ConditionChecker {
@@ -4322,13 +4505,13 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
-   * @param {Object} [options]
-   * @param {Function} [options.getFilterPath]
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
+   * @param {Object} [options]
+   * @param {Function} [options.getFilterPath]
    */
   applyConditions(properties, data = {}, options = {}) {
     const newProperties = clone(properties);
@@ -4357,13 +4540,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) {
@@ -4384,12 +4567,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) {
@@ -4425,12 +4608,12 @@ class MarkdownRenderer {
     this._converter = new showdown.Converter();
   }
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
    */
   render(markdown) {
     return this._converter.makeHtml(markdown);
@@ -5553,8 +5736,8 @@ Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form'];
 // helpers //////////
-/**
- * Helper function to evaluate optional FEEL validation values.
+/**
+ * Helper function to evaluate optional FEEL validation values.
  */
 function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
   const evaluatedValidate = {
@@ -5588,12 +5771,12 @@ function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form
 }
 class Importer {
-  /**
-   * @constructor
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('./PathRegistry').default } pathRegistry
-   * @param { import('./FieldFactory').default } fieldFactory
-   * @param { import('./FormLayouter').default } formLayouter
+  /**
+   * @constructor
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('./PathRegistry').default } pathRegistry
+   * @param { import('./FieldFactory').default } fieldFactory
+   * @param { import('./FormLayouter').default } formLayouter
    */
   constructor(formFieldRegistry, pathRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -5602,21 +5785,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
-  /**
-   * Import schema creating rows, fields, attaching additional
-   * information to each field and adding fields to the
-   * field registry.
-   *
-   * Additional information attached:
-   *
-   *   * `id` (unless present)
-   *   * `_parent`
-   *   * `_path`
-   *
-   * @param {any} schema
-   *
-   * @typedef {{ warnings: Error[], schema: any }} ImportResult
-   * @returns {ImportResult}
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
    */
   importSchema(schema) {
     // TODO: Add warnings
@@ -5641,12 +5824,12 @@ class Importer {
     this._pathRegistry.clear();
   }
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -5671,11 +5854,11 @@ class Importer {
     return field;
   }
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -5686,11 +5869,11 @@ class Importer {
 Importer.$inject = ['formFieldRegistry', 'pathRegistry', 'fieldFactory', 'formLayouter'];
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param  formFieldRegistry
-   * @param  formFields
+  /**
+   * @constructor
+   *
+   * @param  formFieldRegistry
+   * @param  formFields
    */
   constructor(formFieldRegistry, pathRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -5772,36 +5955,36 @@ class FieldFactory {
 }
 FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
-/**
- * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
- * It enables claiming, unclaiming, and validating paths within this structure.
- *
- * Example Tree Structure:
- *
- *   [
- *     {
- *       segment: 'root',
- *       claimCount: 1,
- *       children: [
- *         {
- *           segment: 'child1',
- *           claimCount: 2,
- *           children: null  // A leaf node (closed path)
- *         },
- *         {
- *           segment: 'child2',
- *           claimCount: 1,
- *           children: [
- *             {
- *               segment: 'subChild1',
- *               claimCount: 1,
- *               children: []  // An open node (open path)
- *             }
- *           ]
- *         }
- *       ]
- *     }
- *   ]
+/**
+ * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
+ * It enables claiming, unclaiming, and validating paths within this structure.
+ *
+ * Example Tree Structure:
+ *
+ *   [
+ *     {
+ *       segment: 'root',
+ *       claimCount: 1,
+ *       children: [
+ *         {
+ *           segment: 'child1',
+ *           claimCount: 2,
+ *           children: null  // A leaf node (closed path)
+ *         },
+ *         {
+ *           segment: 'child2',
+ *           claimCount: 1,
+ *           children: [
+ *             {
+ *               segment: 'subChild1',
+ *               claimCount: 1,
+ *               children: []  // An open node (open path)
+ *             }
+ *           ]
+ *         }
+ *       ]
+ *     }
+ *   ]
  */
 class PathRegistry {
   constructor(formFieldRegistry, formFields) {
@@ -5884,16 +6067,16 @@ class PathRegistry {
     }
   }
-  /**
-   * Applies a function (fn) recursively on a given field and its children.
-   *
-   * - `field`: Starting field object.
-   * - `fn`: Function to apply.
-   * - `context`: Optional object for passing data between calls.
-   *
-   * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
-   *
-   * @returns {boolean} Success status based on function execution.
+  /**
+   * Applies a function (fn) recursively on a given field and its children.
+   *
+   * - `field`: Starting field object.
+   * - `fn`: Function to apply.
+   * - `context`: Optional object for passing data between calls.
+   *
+   * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
+   *
+   * @returns {boolean} Success status based on function execution.
    */
   executeRecursivelyOnFields(field, fn, context = {}) {
     let result = true;
@@ -5927,15 +6110,15 @@ class PathRegistry {
     return result;
   }
-  /**
-   * Generates an array representing the binding path to an underlying data object for a form field.
-   *
-   * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
-   * @param {Object} [options={}] - Configuration options.
-   * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
-   * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
-   *
-   * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
+  /**
+   * Generates an array representing the binding path to an underlying data object for a form field.
+   *
+   * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
+   * @param {Object} [options={}] - Configuration options.
+   * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
+   * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
+   *
+   * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
    */
   getValuePath(field, options = {}) {
     const {
@@ -5979,23 +6162,23 @@ const _getNextSegment = (node, segment) => {
 };
 PathRegistry.$inject = ['formFieldRegistry', 'formFields'];
-/**
- * @typedef { { id: String, components: Array<String> } } FormRow
- * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
-/**
- * Maintains the Form layout in a given structure, for example
- *
- *  [
- *    {
- *      formFieldId: 'FormField_1',
- *      rows: [
- *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
- *      ]
- *    }
- *  ]
- *
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
  */
 class FormLayouter {
   constructor(eventBus) {
@@ -6005,8 +6188,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -6020,18 +6203,18 @@ class FormLayouter {
     rowsPerComponent.rows.push(row);
   }
-  /**
-   * @param {String} id
-   * @returns {FormRow}
+  /**
+   * @param {String} id
+   * @returns {FormRow}
    */
   getRow(id) {
     const rows = allRows(this._rows);
     return rows.find(r => r.id === id);
   }
-  /**
-   * @param {any} formField
-   * @returns {FormRow}
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
    */
   getRowForField(formField) {
     return allRows(this._rows).find(r => {
@@ -6042,9 +6225,9 @@ class FormLayouter {
     });
   }
-  /**
-   * @param {String} formFieldId
-   * @returns { Array<FormRow> }
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
    */
   getRows(formFieldId) {
     const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -6054,15 +6237,15 @@ class FormLayouter {
     return rowsForField.rows;
   }
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
@@ -6116,9 +6299,9 @@ function groupByRow(components, ids) {
   });
 }
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
  */
 function allRows(formRows) {
   return flatten(formRows.map(c => c.rows));
@@ -6240,55 +6423,55 @@ var core = {
   validator: ['type', Validator]
 };
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Data } Data
- * @typedef { import('./types').Errors } Errors
- * @typedef { import('./types').Schema } Schema
- * @typedef { import('./types').FormProperties } FormProperties
- * @typedef { import('./types').FormProperty } FormProperty
- * @typedef { import('./types').FormEvent } FormEvent
- * @typedef { import('./types').FormOptions } FormOptions
- *
- * @typedef { {
- *   data: Data,
- *   initialData: Data,
- *   errors: Errors,
- *   properties: FormProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Data } Data
+ * @typedef { import('./types').Errors } Errors
+ * @typedef { import('./types').Schema } Schema
+ * @typedef { import('./types').FormProperties } FormProperties
+ * @typedef { import('./types').FormProperty } FormProperty
+ * @typedef { import('./types').FormEvent } FormEvent
+ * @typedef { import('./types').FormOptions } FormOptions
+ *
+ * @typedef { {
+ *   data: Data,
+ *   initialData: Data,
+ *   errors: Errors,
+ *   properties: FormProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 const ids = new Ids([32, 36, 1]);
-/**
- * The form.
+/**
+ * The form.
  */
 class Form {
-  /**
-   * @constructor
-   * @param {FormOptions} options
+  /**
+   * @constructor
+   * @param {FormOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = createFormContainer();
     const {
@@ -6297,9 +6480,9 @@ class Form {
       properties = {}
     } = options;
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       initialData: null,
@@ -6323,9 +6506,9 @@ class Form {
     this._emit('form.clear');
   }
-  /**
-   * Destroy the form, removing it from DOM,
-   * if attached.
+  /**
+   * Destroy the form, removing it from DOM,
+   * if attached.
    */
   destroy() {
     // destroy form services
@@ -6336,13 +6519,13 @@ class Form {
     this._detach(false);
   }
-  /**
-   * Open a form schema with the given initial data.
-   *
-   * @param {Schema} schema
-   * @param {Data} [data]
-   *
-   * @return Promise<{ warnings: Array<any> }>
+  /**
+   * Open a form schema with the given initial data.
+   *
+   * @param {Schema} schema
+   * @param {Data} [data]
+   *
+   * @return Promise<{ warnings: Array<any> }>
    */
   importSchema(schema, data = {}) {
     return new Promise((resolve, reject) => {
@@ -6375,10 +6558,10 @@ class Form {
     });
   }
-  /**
-   * Submit the form, triggering all field validations.
-   *
-   * @returns { { data: Data, errors: Errors } }
+  /**
+   * Submit the form, triggering all field validations.
+   *
+   * @returns { { data: Data, errors: Errors } }
    */
   submit() {
     const {
@@ -6404,8 +6587,8 @@ class Form {
     });
   }
-  /**
-   * @returns {Errors}
+  /**
+   * @returns {Errors}
    */
   validate() {
     const formFieldRegistry = this.get('formFieldRegistry'),
@@ -6435,8 +6618,8 @@ class Form {
     return filteredErrors;
   }
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -6454,10 +6637,10 @@ class Form {
     this._detach();
   }
-  /**
-   * @private
-   *
-   * @param {boolean} [emit]
+  /**
+   * @private
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -6471,9 +6654,9 @@ class Form {
     parentNode.removeChild(container);
   }
-  /**
-   * @param {FormProperty} property
-   * @param {any} value
+  /**
+   * @param {FormProperty} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = set(this._getState().properties, [property], value);
@@ -6482,21 +6665,21 @@ class Form {
     });
   }
-  /**
-   * @param {FormEvent} type
-   * @param {Function} handler
+  /**
+   * @param {FormEvent} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
-  /**
-   * @private
-   *
-   * @param {FormOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @private
+   *
+   * @param {FormOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -6515,17 +6698,17 @@ class Form {
     }, core, ...modules, ...additionalModules]);
   }
-  /**
-   * @private
+  /**
+   * @private
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
-  /**
-   * @internal
-   *
-   * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
+  /**
+   * @internal
+   *
+   * @param { { add?: boolean, field: any, remove?: number, value?: any } } update
    */
   _update(update) {
     const {
@@ -6547,15 +6730,15 @@ class Form {
     });
   }
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -6565,22 +6748,22 @@ class Form {
     this._emit('changed', this._getState());
   }
-  /**
-  * @internal
+  /**
+  * @internal
   */
   _getModules() {
     return [ExpressionLanguageModule, MarkdownModule, ViewerCommandsModule];
   }
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);
   }
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getSubmitData() {
     const formFieldRegistry = this.get('formFieldRegistry'),
@@ -6608,16 +6791,16 @@ class Form {
     return filteredSubmitData;
   }
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _applyConditions(toFilter, data, options = {}) {
     const conditionChecker = this.get('conditionChecker');
     return conditionChecker.applyConditions(toFilter, data, options);
   }
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _initializeFieldData(data) {
     const formFieldRegistry = this.get('formFieldRegistry'),
@@ -6654,7 +6837,7 @@ class Form {
   }
 }
-const schemaVersion = 11;
+const schemaVersion = 12;
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -6679,5 +6862,5 @@ function createForm(options) {
   });
 }
-export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, Image, Importer, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, PathRegistry, Radio, Select, Spacer, 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, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, schemaVersion };
+export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, Description, Errors, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, Image, Importer, Label, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, PathRegistry, Radio, Select, Separator, Spacer, 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, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, sanitizeHTML, sanitizeImageSource, schemaVersion };
 //# sourceMappingURL=index.es.js.map