@bpmn-io/form-js-viewer 1.0.0 → 1.1.0

package/dist/index.es.js

@@ -1,28 +1,28 @@
 import Ids from 'ids';
-import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, set, groupBy, flatten, isUndefined, findIndex, isObject } from 'min-dash';
-import { parseExpressions, parseUnaryTests, evaluate, unaryTest } from 'feelin';
-import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
-import showdown from 'showdown';
+import { isString, uniqueBy, isArray, get, set, isFunction, isNumber, bind, assign, isNil, groupBy, flatten, isUndefined, findIndex, isObject } from 'min-dash';
 import Big from 'big.js';
+import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
+import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
-import { useContext, useMemo, useEffect, useState, useRef, useCallback } from 'preact/hooks';
+import { useContext, useMemo, useEffect, useState, useRef, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
 import * as React from 'preact/compat';
 import { createPortal } from 'preact/compat';
 import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
+import showdown from 'showdown';
 
-const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) => {
+const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', options = {}) => {
   const {
     depth = 0,
     specialDepthAccessors = {}
   } = options;
   if (!['expression', 'unaryTest'].includes(feelFlavour)) return [];
-  const tree = feelFlavour === 'expression' ? parseExpressions(feelString) : parseUnaryTests(feelString);
+  const tree = feelFlavour === 'expression' ? parseExpression(feelString) : parseUnaryTests(feelString);
   const simpleExpressionTree = _buildSimpleFeelStructureTree(tree, feelString);
-  return function _unfoldVariables(node) {
+  const variables = function _unfoldVariables(node) {
     if (node.name === 'PathExpression') {
       if (Object.keys(specialDepthAccessors).length === 0) {
         return depth === 0 ? [_getVariableNameAtPathIndex(node, 0)] : [];
@@ -35,12 +35,16 @@ const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) =>
 
     // for any other kind of node, traverse its children and flatten the result
     if (node.children) {
-      return node.children.reduce((acc, child) => {
+      const variables = node.children.reduce((acc, child) => {
         return acc.concat(_unfoldVariables(child));
       }, []);
+
+      // if we are within a filter context, we need to remove the item variable as it is used for iteration there
+      return node.name === 'FilterContext' ? variables.filter(name => name !== 'item') : variables;
     }
     return [];
   }(simpleExpressionTree);
+  return [...new Set(variables)];
 };
 
 /**
@@ -160,7 +164,45 @@ const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
       parent.children.push(result);
     }
   });
-  return stack[0].children[0];
+  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.
+ */
+const _extractFilterExpressions = tree => {
+  const flattenedExpressionTree = {
+    name: 'Root',
+    children: [tree]
+  };
+  const iterate = node => {
+    if (node.children) {
+      for (let x = 0; x < node.children.length; x++) {
+        if (node.children[x].name === 'FilterExpression') {
+          const filterTarget = node.children[x].children[0];
+          const filterExpression = node.children[x].children[2];
+
+          // bypass the filter expression
+          node.children[x] = filterTarget;
+          const taggedFilterExpression = {
+            name: 'FilterContext',
+            children: [filterExpression]
+          };
+
+          // append the filter expression to the root
+          flattenedExpressionTree.children.push(taggedFilterExpression);
+
+          // recursively iterate the expression
+          iterate(filterExpression);
+        } else {
+          iterate(node.children[x]);
+        }
+      }
+    }
+  };
+  iterate(tree);
+  return flattenedExpressionTree;
 };
 
 class FeelExpressionLanguage {
@@ -391,84 +433,816 @@ class ConditionChecker {
     if (!condition) {
       return null;
     }
-    if (!isString(condition) || !condition.startsWith('=')) {
-      return null;
+    if (!isString(condition) || !condition.startsWith('=')) {
+      return null;
+    }
+    try {
+      // cut off initial '='
+      const result = unaryTest(condition.slice(1), data);
+      return result;
+    } catch (error) {
+      this._eventBus.fire('error', {
+        error
+      });
+      return null;
+    }
+  }
+
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
+   */
+  _checkHideCondition(condition, data) {
+    if (!condition.hide) {
+      return false;
+    }
+    const result = this.check(condition.hide, data);
+    return result === true;
+  }
+  _getConditions() {
+    const formFields = this._formFieldRegistry.getAll();
+    return formFields.reduce((conditions, formField) => {
+      const {
+        key,
+        conditional: condition
+      } = formField;
+      if (key && condition) {
+        return [...conditions, {
+          key,
+          condition
+        }];
+      }
+      return conditions;
+    }, []);
+  }
+}
+ConditionChecker.$inject = ['formFieldRegistry', 'eventBus'];
+
+var ExpressionLanguageModule = {
+  __init__: ['expressionLanguage', 'templating', 'conditionChecker'],
+  expressionLanguage: ['type', FeelExpressionLanguage],
+  templating: ['type', FeelersTemplating],
+  conditionChecker: ['type', ConditionChecker]
+};
+
+// bootstrap showdown to support github flavored markdown
+showdown.setFlavor('github');
+class MarkdownRenderer {
+  constructor() {
+    this._converter = new showdown.Converter();
+  }
+
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
+   */
+  render(markdown) {
+    return this._converter.makeHtml(markdown);
+  }
+}
+MarkdownRenderer.$inject = [];
+
+var MarkdownModule = {
+  __init__: ['markdownRenderer'],
+  markdownRenderer: ['type', MarkdownRenderer]
+};
+
+/**
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../core/Types').ElementLike} ElementLike
+ *
+ * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('./CommandHandler').default} CommandHandler
+ *
+ * @typedef { any } CommandContext
+ * @typedef { {
+ *   new (...args: any[]) : CommandHandler
+ * } } CommandHandlerConstructor
+ * @typedef { {
+ *   [key: string]: CommandHandler;
+ * } } CommandHandlerMap
+ * @typedef { {
+ *   command: string;
+ *   context: any;
+ *   id?: any;
+ * } } CommandStackAction
+ * @typedef { {
+ *   actions: CommandStackAction[];
+ *   dirty: ElementLike[];
+ *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
+ *   atomic?: boolean;
+ * } } CurrentExecution
+ */
+
+/**
+ * A service that offers un- and redoable execution of commands.
+ *
+ * The command stack is responsible for executing modeling actions
+ * in a un- and redoable manner. To do this it delegates the actual
+ * command execution to {@link CommandHandler}s.
+ *
+ * Command handlers provide {@link CommandHandler#execute(ctx)} and
+ * {@link CommandHandler#revert(ctx)} methods to un- and redo a command
+ * identified by a command context.
+ *
+ *
+ * ## Life-Cycle events
+ *
+ * In the process the command stack fires a number of life-cycle events
+ * that other components to participate in the command execution.
+ *
+ *    * preExecute
+ *    * preExecuted
+ *    * execute
+ *    * executed
+ *    * postExecute
+ *    * postExecuted
+ *    * revert
+ *    * reverted
+ *
+ * A special event is used for validating, whether a command can be
+ * performed prior to its execution.
+ *
+ *    * canExecute
+ *
+ * Each of the events is fired as `commandStack.{eventName}` and
+ * `commandStack.{commandName}.{eventName}`, respectively. This gives
+ * components fine grained control on where to hook into.
+ *
+ * The event object fired transports `command`, the name of the
+ * command and `context`, the command context.
+ *
+ *
+ * ## Creating Command Handlers
+ *
+ * Command handlers should provide the {@link CommandHandler#execute(ctx)}
+ * and {@link CommandHandler#revert(ctx)} methods to implement
+ * redoing and undoing of a command.
+ *
+ * A command handler _must_ ensure undo is performed properly in order
+ * not to break the undo chain. It must also return the shapes that
+ * got changed during the `execute` and `revert` operations.
+ *
+ * Command handlers may execute other modeling operations (and thus
+ * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
+ * stack will properly group all commands together into a logical unit
+ * that may be re- and undone atomically.
+ *
+ * Command handlers must not execute other commands from within their
+ * core implementation (`execute`, `revert`).
+ *
+ *
+ * ## Change Tracking
+ *
+ * During the execution of the CommandStack it will keep track of all
+ * elements that have been touched during the command's execution.
+ *
+ * At the end of the CommandStack execution it will notify interested
+ * components via an 'elements.changed' event with all the dirty
+ * elements.
+ *
+ * The event can be picked up by components that are interested in the fact
+ * that elements have been changed. One use case for this is updating
+ * their graphical representation after moving / resizing or deletion.
+ *
+ * @see CommandHandler
+ *
+ * @param {EventBus} eventBus
+ * @param {Injector} injector
+ */
+function CommandStack(eventBus, injector) {
+  /**
+   * A map of all registered command handlers.
+   *
+   * @type {CommandHandlerMap}
+   */
+  this._handlerMap = {};
+
+  /**
+   * A stack containing all re/undoable actions on the diagram
+   *
+   * @type {CommandStackAction[]}
+   */
+  this._stack = [];
+
+  /**
+   * The current index on the stack
+   *
+   * @type {number}
+   */
+  this._stackIdx = -1;
+
+  /**
+   * Current active commandStack execution
+   *
+   * @type {CurrentExecution}
+   */
+  this._currentExecution = {
+    actions: [],
+    dirty: [],
+    trigger: null
+  };
+
+  /**
+   * @type {Injector}
+   */
+  this._injector = injector;
+
+  /**
+   * @type EventBus
+   */
+  this._eventBus = eventBus;
+
+  /**
+   * @type { number }
+   */
+  this._uid = 1;
+  eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
+    this.clear(false);
+  }, this);
+}
+CommandStack.$inject = ['eventBus', 'injector'];
+
+/**
+ * Execute a command.
+ *
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
+ */
+CommandStack.prototype.execute = function (command, context) {
+  if (!command) {
+    throw new Error('command required');
+  }
+  this._currentExecution.trigger = 'execute';
+  const action = {
+    command: command,
+    context: context
+  };
+  this._pushAction(action);
+  this._internalExecute(action);
+  this._popAction();
+};
+
+/**
+ * Check whether a command can be executed.
+ *
+ * Implementors may hook into the mechanism on two ways:
+ *
+ *   * in event listeners:
+ *
+ *     Users may prevent the execution via an event listener.
+ *     It must prevent the default action for `commandStack.(<command>.)canExecute` events.
+ *
+ *   * in command handlers:
+ *
+ *     If the method {@link CommandHandler#canExecute} is implemented in a handler
+ *     it will be called to figure out whether the execution is allowed.
+ *
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
+ *
+ * @return {boolean} Whether the command can be executed with the given context.
+ */
+CommandStack.prototype.canExecute = function (command, context) {
+  const action = {
+    command: command,
+    context: context
+  };
+  const handler = this._getHandler(command);
+  let result = this._fire(command, 'canExecute', action);
+
+  // handler#canExecute will only be called if no listener
+  // decided on a result already
+  if (result === undefined) {
+    if (!handler) {
+      return false;
+    }
+    if (handler.canExecute) {
+      result = handler.canExecute(context);
+    }
+  }
+  return result;
+};
+
+/**
+ * Clear the command stack, erasing all undo / redo history.
+ *
+ * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
+ */
+CommandStack.prototype.clear = function (emit) {
+  this._stack.length = 0;
+  this._stackIdx = -1;
+  if (emit !== false) {
+    this._fire('changed', {
+      trigger: 'clear'
+    });
+  }
+};
+
+/**
+ * Undo last command(s)
+ */
+CommandStack.prototype.undo = function () {
+  let action = this._getUndoAction(),
+    next;
+  if (action) {
+    this._currentExecution.trigger = 'undo';
+    this._pushAction(action);
+    while (action) {
+      this._internalUndo(action);
+      next = this._getUndoAction();
+      if (!next || next.id !== action.id) {
+        break;
+      }
+      action = next;
+    }
+    this._popAction();
+  }
+};
+
+/**
+ * Redo last command(s)
+ */
+CommandStack.prototype.redo = function () {
+  let action = this._getRedoAction(),
+    next;
+  if (action) {
+    this._currentExecution.trigger = 'redo';
+    this._pushAction(action);
+    while (action) {
+      this._internalExecute(action, true);
+      next = this._getRedoAction();
+      if (!next || next.id !== action.id) {
+        break;
+      }
+      action = next;
+    }
+    this._popAction();
+  }
+};
+
+/**
+ * Register a handler instance with the command stack.
+ *
+ * @param {string} command Command to be executed.
+ * @param {CommandHandler} handler Handler to execute the command.
+ */
+CommandStack.prototype.register = function (command, handler) {
+  this._setHandler(command, handler);
+};
+
+/**
+ * Register a handler type with the command stack  by instantiating it and
+ * injecting its dependencies.
+ *
+ * @param {string} command Command to be executed.
+ * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
+ */
+CommandStack.prototype.registerHandler = function (command, handlerCls) {
+  if (!command || !handlerCls) {
+    throw new Error('command and handlerCls must be defined');
+  }
+  const handler = this._injector.instantiate(handlerCls);
+  this.register(command, handler);
+};
+
+/**
+ * @return {boolean}
+ */
+CommandStack.prototype.canUndo = function () {
+  return !!this._getUndoAction();
+};
+
+/**
+ * @return {boolean}
+ */
+CommandStack.prototype.canRedo = function () {
+  return !!this._getRedoAction();
+};
+
+// stack access  //////////////////////
+
+CommandStack.prototype._getRedoAction = function () {
+  return this._stack[this._stackIdx + 1];
+};
+CommandStack.prototype._getUndoAction = function () {
+  return this._stack[this._stackIdx];
+};
+
+// internal functionality //////////////////////
+
+CommandStack.prototype._internalUndo = function (action) {
+  const command = action.command,
+    context = action.context;
+  const handler = this._getHandler(command);
+
+  // guard against illegal nested command stack invocations
+  this._atomicDo(() => {
+    this._fire(command, 'revert', action);
+    if (handler.revert) {
+      this._markDirty(handler.revert(context));
+    }
+    this._revertedAction(action);
+    this._fire(command, 'reverted', action);
+  });
+};
+CommandStack.prototype._fire = function (command, qualifier, event) {
+  if (arguments.length < 3) {
+    event = qualifier;
+    qualifier = null;
+  }
+  const names = qualifier ? [command + '.' + qualifier, qualifier] : [command];
+  let result;
+  event = this._eventBus.createEvent(event);
+  for (const name of names) {
+    result = this._eventBus.fire('commandStack.' + name, event);
+    if (event.cancelBubble) {
+      break;
+    }
+  }
+  return result;
+};
+CommandStack.prototype._createId = function () {
+  return this._uid++;
+};
+CommandStack.prototype._atomicDo = function (fn) {
+  const execution = this._currentExecution;
+  execution.atomic = true;
+  try {
+    fn();
+  } finally {
+    execution.atomic = false;
+  }
+};
+CommandStack.prototype._internalExecute = function (action, redo) {
+  const command = action.command,
+    context = action.context;
+  const handler = this._getHandler(command);
+  if (!handler) {
+    throw new Error('no command handler registered for <' + command + '>');
+  }
+  this._pushAction(action);
+  if (!redo) {
+    this._fire(command, 'preExecute', action);
+    if (handler.preExecute) {
+      handler.preExecute(context);
+    }
+    this._fire(command, 'preExecuted', action);
+  }
+
+  // guard against illegal nested command stack invocations
+  this._atomicDo(() => {
+    this._fire(command, 'execute', action);
+    if (handler.execute) {
+      // actual execute + mark return results as dirty
+      this._markDirty(handler.execute(context));
+    }
+
+    // log to stack
+    this._executedAction(action, redo);
+    this._fire(command, 'executed', action);
+  });
+  if (!redo) {
+    this._fire(command, 'postExecute', action);
+    if (handler.postExecute) {
+      handler.postExecute(context);
+    }
+    this._fire(command, 'postExecuted', action);
+  }
+  this._popAction();
+};
+CommandStack.prototype._pushAction = function (action) {
+  const execution = this._currentExecution,
+    actions = execution.actions;
+  const baseAction = actions[0];
+  if (execution.atomic) {
+    throw new Error('illegal invocation in <execute> or <revert> phase (action: ' + action.command + ')');
+  }
+  if (!action.id) {
+    action.id = baseAction && baseAction.id || this._createId();
+  }
+  actions.push(action);
+};
+CommandStack.prototype._popAction = function () {
+  const execution = this._currentExecution,
+    trigger = execution.trigger,
+    actions = execution.actions,
+    dirty = execution.dirty;
+  actions.pop();
+  if (!actions.length) {
+    this._eventBus.fire('elements.changed', {
+      elements: uniqueBy('id', dirty.reverse())
+    });
+    dirty.length = 0;
+    this._fire('changed', {
+      trigger: trigger
+    });
+    execution.trigger = null;
+  }
+};
+CommandStack.prototype._markDirty = function (elements) {
+  const execution = this._currentExecution;
+  if (!elements) {
+    return;
+  }
+  elements = isArray(elements) ? elements : [elements];
+  execution.dirty = execution.dirty.concat(elements);
+};
+CommandStack.prototype._executedAction = function (action, redo) {
+  const stackIdx = ++this._stackIdx;
+  if (!redo) {
+    this._stack.splice(stackIdx, this._stack.length, action);
+  }
+};
+CommandStack.prototype._revertedAction = function (action) {
+  this._stackIdx--;
+};
+CommandStack.prototype._getHandler = function (command) {
+  return this._handlerMap[command];
+};
+CommandStack.prototype._setHandler = function (command, handler) {
+  if (!command || !handler) {
+    throw new Error('command and handler required');
+  }
+  if (this._handlerMap[command]) {
+    throw new Error('overriding handler for command <' + command + '>');
+  }
+  this._handlerMap[command] = handler;
+};
+
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
+var commandModule = {
+  commandStack: ['type', CommandStack]
+};
+
+// config  ///////////////////
+
+const MINUTES_IN_DAY = 60 * 24;
+const DATETIME_SUBTYPES = {
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime'
+};
+const TIME_SERIALISING_FORMATS = {
+  UTC_OFFSET: 'utc_offset',
+  UTC_NORMALIZED: 'utc_normalized',
+  NO_TIMEZONE: 'no_timezone'
+};
+const DATETIME_SUBTYPES_LABELS = {
+  [DATETIME_SUBTYPES.DATE]: 'Date',
+  [DATETIME_SUBTYPES.TIME]: 'Time',
+  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
+};
+const TIME_SERIALISINGFORMAT_LABELS = {
+  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
+  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
+  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
+};
+const DATETIME_SUBTYPE_PATH = ['subtype'];
+const DATE_LABEL_PATH = ['dateLabel'];
+const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
+const TIME_LABEL_PATH = ['timeLabel'];
+const TIME_USE24H_PATH = ['use24h'];
+const TIME_INTERVAL_PATH = ['timeInterval'];
+const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
+
+// config  ///////////////////
+
+const VALUES_SOURCES = {
+  STATIC: 'static',
+  INPUT: 'input',
+  EXPRESSION: 'expression'
+};
+const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
+const VALUES_SOURCES_LABELS = {
+  [VALUES_SOURCES.STATIC]: 'Static',
+  [VALUES_SOURCES.INPUT]: 'Input data',
+  [VALUES_SOURCES.EXPRESSION]: 'Expression'
+};
+const VALUES_SOURCES_PATHS = {
+  [VALUES_SOURCES.STATIC]: ['values'],
+  [VALUES_SOURCES.INPUT]: ['valuesKey'],
+  [VALUES_SOURCES.EXPRESSION]: ['valuesExpression']
+};
+const VALUES_SOURCES_DEFAULTS = {
+  [VALUES_SOURCES.STATIC]: [{
+    label: 'Value',
+    value: 'value'
+  }],
+  [VALUES_SOURCES.INPUT]: '',
+  [VALUES_SOURCES.EXPRESSION]: '='
+};
+
+// helpers ///////////////////
+
+function getValuesSource(field) {
+  for (const source of Object.values(VALUES_SOURCES)) {
+    if (get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
+      return source;
+    }
+  }
+  return VALUES_SOURCE_DEFAULT;
+}
+
+function createInjector(bootstrapModules) {
+  const injector = new Injector(bootstrapModules);
+  injector.init();
+  return injector;
+}
+
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
+ */
+function createFormContainer(prefix = 'fjs') {
+  const container = document.createElement('div');
+  container.classList.add(`${prefix}-container`);
+  return container;
+}
+
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
+const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
+function findErrors(errors, path) {
+  return errors[pathStringify(path)];
+}
+function isRequired(field) {
+  return field.required;
+}
+function pathParse(path) {
+  if (!path) {
+    return [];
+  }
+  return path.split('.').map(key => {
+    return isNaN(parseInt(key)) ? key : parseInt(key);
+  });
+}
+function pathsEqual(a, b) {
+  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
+}
+function pathStringify(path) {
+  if (!path) {
+    return '';
+  }
+  return path.join('.');
+}
+const indices = {};
+function generateIndexForType(type) {
+  if (type in indices) {
+    indices[type]++;
+  } else {
+    indices[type] = 1;
+  }
+  return indices[type];
+}
+function generateIdForType(type) {
+  return `${type}${generateIndexForType(type)}`;
+}
+
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
+ */
+function clone(data, replacer) {
+  return JSON.parse(JSON.stringify(data, replacer));
+}
+
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
+ */
+function getSchemaVariables(schema, options = {}) {
+  const {
+    expressionLanguage = new FeelExpressionLanguage(null),
+    templating = new FeelersTemplating(),
+    inputs = true,
+    outputs = true
+  } = options;
+  if (!schema.components) {
+    return [];
+  }
+  const variables = schema.components.reduce((variables, component) => {
+    const {
+      key,
+      valuesKey,
+      type
+    } = component;
+    if (['button'].includes(type)) {
+      return variables;
+    }
+
+    // collect bi-directional variables
+    if (inputs || outputs) {
+      if (key) {
+        variables = [...variables, key];
+      }
     }
-    try {
-      // cut off initial '='
-      const result = unaryTest(condition.slice(1), data);
-      return result;
-    } catch (error) {
-      this._eventBus.fire('error', {
-        error
+
+    // collect input-only variables
+    if (inputs) {
+      if (valuesKey) {
+        variables = [...variables, valuesKey];
+      }
+      EXPRESSION_PROPERTIES.forEach(prop => {
+        const property = get(component, prop.split('.'));
+        if (property && expressionLanguage.isExpression(property)) {
+          const expressionVariables = expressionLanguage.getVariableNames(property, {
+            type: 'expression'
+          });
+          variables = [...variables, ...expressionVariables];
+        }
+      });
+      TEMPLATE_PROPERTIES.forEach(prop => {
+        const property = get(component, prop.split('.'));
+        if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
+          const templateVariables = templating.getVariableNames(property);
+          variables = [...variables, ...templateVariables];
+        }
       });
-      return null;
     }
-  }
+    return variables.filter(variable => variable !== undefined || variable !== null);
+  }, []);
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
-   */
-  _checkHideCondition(condition, data) {
-    if (!condition.hide) {
-      return false;
-    }
-    const result = this.check(condition.hide, data);
-    return result === true;
+  // remove duplicates
+  return Array.from(new Set(variables));
+}
+
+class UpdateFieldValidationHandler {
+  constructor(form, validator) {
+    this._form = form;
+    this._validator = validator;
   }
-  _getConditions() {
-    const formFields = this._formFieldRegistry.getAll();
-    return formFields.reduce((conditions, formField) => {
-      const {
-        key,
-        conditional: condition
-      } = formField;
-      if (key && condition) {
-        return [...conditions, {
-          key,
-          condition
-        }];
-      }
-      return conditions;
-    }, []);
+  execute(context) {
+    const {
+      field,
+      value
+    } = context;
+    const {
+      _path
+    } = field;
+    const {
+      errors
+    } = this._form._getState();
+    context.oldErrors = clone(errors);
+    const fieldErrors = this._validator.validateField(field, value);
+    const updatedErrors = set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+    this._form._setState({
+      errors: updatedErrors
+    });
+  }
+  revert(context) {
+    this._form._setState({
+      errors: context.oldErrors
+    });
   }
 }
-ConditionChecker.$inject = ['formFieldRegistry', 'eventBus'];
-
-var ExpressionLanguageModule = {
-  __init__: ['expressionLanguage', 'templating', 'conditionChecker'],
-  expressionLanguage: ['type', FeelExpressionLanguage],
-  templating: ['type', FeelersTemplating],
-  conditionChecker: ['type', ConditionChecker]
-};
+UpdateFieldValidationHandler.$inject = ['form', 'validator'];
 
-// bootstrap showdown to support github flavored markdown
-showdown.setFlavor('github');
-class MarkdownRenderer {
-  constructor() {
-    this._converter = new showdown.Converter();
+class ViewerCommands {
+  constructor(commandStack, eventBus) {
+    this._commandStack = commandStack;
+    eventBus.on('form.init', () => {
+      this.registerHandlers();
+    });
   }
-
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
-   */
-  render(markdown) {
-    return this._converter.makeHtml(markdown);
+  registerHandlers() {
+    Object.entries(this.getHandlers()).forEach(([id, handler]) => {
+      this._commandStack.registerHandler(id, handler);
+    });
+  }
+  getHandlers() {
+    return {
+      'formField.validation.update': UpdateFieldValidationHandler
+    };
+  }
+  updateFieldValidation(field, value) {
+    const context = {
+      field,
+      value
+    };
+    this._commandStack.execute('formField.validation.update', context);
   }
 }
-MarkdownRenderer.$inject = [];
+ViewerCommands.$inject = ['commandStack', 'eventBus'];
 
-var MarkdownModule = {
-  __init__: ['markdownRenderer'],
-  markdownRenderer: ['type', MarkdownRenderer]
+var ViewerCommandsModule = {
+  __depends__: [commandModule],
+  __init__: ['viewerCommands'],
+  viewerCommands: ['type', ViewerCommands]
 };
 
 var FN_REF = '__fn';
@@ -1260,229 +2034,46 @@ class FormLayouter {
         components: components.map(c => c.id)
       });
     });
-
-    // (3) traverse through nested components
-    components.forEach(field => this.calculateLayout(field));
-
-    // (4) fire event to notify interested parties
-    this._eventBus.fire('form.layoutCalculated', {
-      rows: this._rows
-    });
-  }
-  clear() {
-    this._rows = [];
-    this._ids.clear();
-
-    // fire event to notify interested parties
-    this._eventBus.fire('form.layoutCleared');
-  }
-}
-FormLayouter.$inject = ['eventBus'];
-
-// helpers //////
-
-function groupByRow(components, ids) {
-  return groupBy(components, c => {
-    // mitigate missing row by creating new (handle legacy)
-    const {
-      layout
-    } = c;
-    if (!layout || !layout.row) {
-      return ids.nextPrefixed('Row_');
-    }
-    return layout.row;
-  });
-}
-
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
- */
-function allRows(formRows) {
-  return flatten(formRows.map(c => c.rows));
-}
-
-// config  ///////////////////
-
-const MINUTES_IN_DAY = 60 * 24;
-const DATETIME_SUBTYPES = {
-  DATE: 'date',
-  TIME: 'time',
-  DATETIME: 'datetime'
-};
-const TIME_SERIALISING_FORMATS = {
-  UTC_OFFSET: 'utc_offset',
-  UTC_NORMALIZED: 'utc_normalized',
-  NO_TIMEZONE: 'no_timezone'
-};
-const DATETIME_SUBTYPES_LABELS = {
-  [DATETIME_SUBTYPES.DATE]: 'Date',
-  [DATETIME_SUBTYPES.TIME]: 'Time',
-  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
-};
-const TIME_SERIALISINGFORMAT_LABELS = {
-  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
-  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
-  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
-};
-const DATETIME_SUBTYPE_PATH = ['subtype'];
-const DATE_LABEL_PATH = ['dateLabel'];
-const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
-const TIME_LABEL_PATH = ['timeLabel'];
-const TIME_USE24H_PATH = ['use24h'];
-const TIME_INTERVAL_PATH = ['timeInterval'];
-const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
-
-// config  ///////////////////
-
-const VALUES_SOURCES = {
-  STATIC: 'static',
-  INPUT: 'input',
-  EXPRESSION: 'expression'
-};
-const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
-const VALUES_SOURCES_LABELS = {
-  [VALUES_SOURCES.STATIC]: 'Static',
-  [VALUES_SOURCES.INPUT]: 'Input data',
-  [VALUES_SOURCES.EXPRESSION]: 'Expression'
-};
-const VALUES_SOURCES_PATHS = {
-  [VALUES_SOURCES.STATIC]: ['values'],
-  [VALUES_SOURCES.INPUT]: ['valuesKey'],
-  [VALUES_SOURCES.EXPRESSION]: ['valuesExpression']
-};
-const VALUES_SOURCES_DEFAULTS = {
-  [VALUES_SOURCES.STATIC]: [{
-    label: 'Value',
-    value: 'value'
-  }],
-  [VALUES_SOURCES.INPUT]: '',
-  [VALUES_SOURCES.EXPRESSION]: '='
-};
-
-// helpers ///////////////////
-
-function getValuesSource(field) {
-  for (const source of Object.values(VALUES_SOURCES)) {
-    if (get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
-      return source;
-    }
-  }
-  return VALUES_SOURCE_DEFAULT;
-}
-
-function createInjector(bootstrapModules) {
-  const injector = new Injector(bootstrapModules);
-  injector.init();
-  return injector;
-}
-
-/**
- * @param {string?} prefix
- *
- * @returns Element
- */
-function createFormContainer(prefix = 'fjs') {
-  const container = document.createElement('div');
-  container.classList.add(`${prefix}-container`);
-  return container;
-}
-
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
-const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
-function findErrors(errors, path) {
-  return errors[pathStringify(path)];
-}
-function isRequired(field) {
-  return field.required;
-}
-function pathParse(path) {
-  if (!path) {
-    return [];
-  }
-  return path.split('.').map(key => {
-    return isNaN(parseInt(key)) ? key : parseInt(key);
-  });
-}
-function pathsEqual(a, b) {
-  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
-}
-function pathStringify(path) {
-  if (!path) {
-    return '';
+
+    // (3) traverse through nested components
+    components.forEach(field => this.calculateLayout(field));
+
+    // (4) fire event to notify interested parties
+    this._eventBus.fire('form.layoutCalculated', {
+      rows: this._rows
+    });
   }
-  return path.join('.');
-}
-const indices = {};
-function generateIndexForType(type) {
-  if (type in indices) {
-    indices[type]++;
-  } else {
-    indices[type] = 1;
+  clear() {
+    this._rows = [];
+    this._ids.clear();
+
+    // fire event to notify interested parties
+    this._eventBus.fire('form.layoutCleared');
   }
-  return indices[type];
-}
-function generateIdForType(type) {
-  return `${type}${generateIndexForType(type)}`;
 }
+FormLayouter.$inject = ['eventBus'];
 
-/**
- * @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));
-}
+// helpers //////
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
- */
-function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
-  if (!schema.components) {
-    return [];
-  }
-  const variables = schema.components.reduce((variables, component) => {
+function groupByRow(components, ids) {
+  return groupBy(components, c => {
+    // mitigate missing row by creating new (handle legacy)
     const {
-      key,
-      valuesKey,
-      type
-    } = component;
-    if (['button'].includes(type)) {
-      return variables;
-    }
-    if (key) {
-      variables = [...variables, key];
-    }
-    if (valuesKey) {
-      variables = [...variables, valuesKey];
+      layout
+    } = c;
+    if (!layout || !layout.row) {
+      return ids.nextPrefixed('Row_');
     }
-    EXPRESSION_PROPERTIES.forEach(prop => {
-      const property = get(component, prop.split('.'));
-      if (property && expressionLanguage.isExpression(property)) {
-        const expressionVariables = expressionLanguage.getVariableNames(property, {
-          type: 'expression'
-        });
-        variables = [...variables, ...expressionVariables];
-      }
-    });
-    TEMPLATE_PROPERTIES.forEach(prop => {
-      const property = get(component, prop.split('.'));
-      if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
-        const templateVariables = templating.getVariableNames(property);
-        variables = [...variables, ...templateVariables];
-      }
-    });
-    return variables;
-  }, []);
+    return layout.row;
+  });
+}
 
-  // remove duplicates
-  return Array.from(new Set(variables));
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
+ */
+function allRows(formRows) {
+  return flatten(formRows.map(c => c.rows));
 }
 
 class Importer {
@@ -1659,7 +2250,7 @@ function prefixId(id, formId) {
   return `fjs-form-${id}`;
 }
 
-const type$b = 'button';
+const type$c = 'button';
 function Button(props) {
   const {
     disabled,
@@ -1669,7 +2260,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsx("div", {
-    class: formFieldClasses(type$b),
+    class: formFieldClasses(type$c),
     children: jsx("button", {
       class: "fjs-button",
       type: action,
@@ -1679,7 +2270,7 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
   label: 'Button',
   group: 'action',
@@ -1939,11 +2530,12 @@ function Label(props) {
   });
 }
 
-const type$a = 'checkbox';
+const type$b = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value = false
@@ -1970,7 +2562,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$a, {
+    class: classNames(formFieldClasses(type$b, {
       errors,
       disabled,
       readonly
@@ -1989,6 +2581,7 @@ function Checkbox(props) {
         id: prefixId(id, formId),
         type: "checkbox",
         onChange: onChange,
+        onBlur: onBlur,
         "aria-describedby": errorMessageId
       })
     }), jsx(Description, {
@@ -2000,7 +2593,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -2343,11 +2936,12 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$9 = 'checklist';
+const type$a = 'checklist';
 function Checklist(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value = []
@@ -2358,6 +2952,7 @@ function Checklist(props) {
     label,
     validate = {}
   } = field;
+  const outerDivRef = useRef();
   const {
     required
   } = validate;
@@ -2373,6 +2968,12 @@ function Checklist(props) {
       value: newValue
     });
   };
+  const onCheckboxBlur = e => {
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onBlur();
+  };
   const {
     state: loadState,
     values: options
@@ -2382,11 +2983,12 @@ function Checklist(props) {
   } = useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: classNames(formFieldClasses(type$9, {
+    class: classNames(formFieldClasses(type$a, {
       errors,
       disabled,
       readonly
     })),
+    ref: outerDivRef,
     children: [jsx(Label, {
       label: label,
       required: required
@@ -2406,6 +3008,7 @@ function Checklist(props) {
           id: prefixId(`${id}-${index}`, formId),
           type: "checkbox",
           onClick: () => toggleCheckbox(v.value),
+          onBlur: onCheckboxBlur,
           "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
@@ -2418,7 +3021,7 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$9,
+  type: type$a,
   keyed: true,
   label: 'Checklist',
   group: 'selection',
@@ -2448,8 +3051,10 @@ function FormField(props) {
     onChange
   } = props;
   const formFields = useService('formFields'),
+    viewerCommands = useService('viewerCommands', false),
     form = useService('form');
   const {
+    initialData,
     data,
     errors,
     properties
@@ -2463,12 +3068,23 @@ function FormField(props) {
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
+  const initialValue = useMemo(() => get(initialData, field._path), [initialData, field._path]);
   const value = get(data, field._path);
   const fieldErrors = findErrors(errors, field._path);
   const readonly = useReadonly(field, properties);
 
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
+  const onBlur = useCallback(() => {
+    if (viewerCommands) {
+      viewerCommands.updateFieldValidation(field, value);
+    }
+  }, [viewerCommands, field, value]);
+  useEffect(() => {
+    if (viewerCommands && initialValue) {
+      viewerCommands.updateFieldValidation(field, initialValue);
+    }
+  }, [viewerCommands, field, initialValue]);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
   if (hidden) {
     return jsx(Empty, {});
@@ -2484,6 +3100,7 @@ function FormField(props) {
         disabled: disabled,
         errors: fieldErrors,
         onChange: disabled || readonly ? noop$1 : onChange,
+        onBlur: disabled || readonly ? noop$1 : onBlur,
         readonly: readonly,
         value: value
       })
@@ -2546,16 +3163,16 @@ Default.config = {
   })
 };
 
-var _path$g;
-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;
+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 SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__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",
@@ -2607,6 +3224,7 @@ function Datepicker(props) {
     id,
     label,
     collapseLabelOnEmpty,
+    onDateTimeBlur,
     formId,
     required,
     disabled,
@@ -2701,7 +3319,8 @@ function Datepicker(props) {
     if (!isInputDirty || e.relatedTarget && e.relatedTarget.classList.contains('flatpickr-day')) return;
     dateInputRef.current.dispatchEvent(ENTER_KEYDOWN_EVENT);
     setIsInputDirty(false);
-  }, [isInputDirty]);
+    onDateTimeBlur(e);
+  }, [isInputDirty, onDateTimeBlur]);
   const fullId = `${prefixId(id, formId)}--date`;
   return jsxs("div", {
     class: "fjs-datetime-subsection",
@@ -2743,19 +3362,19 @@ function Datepicker(props) {
   });
 }
 
-var _path$f, _path2$3;
-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 _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 SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__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",
@@ -2864,6 +3483,7 @@ function Timepicker(props) {
     id,
     label,
     collapseLabelOnEmpty,
+    onDateTimeBlur,
     formId,
     required,
     disabled,
@@ -2963,6 +3583,7 @@ function Timepicker(props) {
   const onInputBlur = e => {
     setDropdownIsOpen(false);
     propagateRawToMinute();
+    onDateTimeBlur(e);
   };
   const onDropdownValueSelected = value => {
     setDropdownIsOpen(false);
@@ -3018,11 +3639,12 @@ function Timepicker(props) {
   });
 }
 
-const type$8 = 'datetime';
+const type$9 = 'datetime';
 function Datetime(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     onChange,
     readonly,
@@ -3046,6 +3668,7 @@ function Datetime(props) {
   const {
     formId
   } = useContext(FormContext$1);
+  const dateTimeGroupRef = useRef();
   const getNullDateTime = () => ({
     date: new Date(Date.parse(null)),
     time: null
@@ -3056,6 +3679,12 @@ function Datetime(props) {
   const isValidTime = time => !isNaN(parseInt(time));
   const useDatePicker = useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const useTimePicker = useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
+  const onDateTimeBlur = useCallback(e => {
+    if (e.relatedTarget && dateTimeGroupRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onBlur();
+  }, [onBlur]);
   useEffect(() => {
     let {
       date,
@@ -3147,6 +3776,7 @@ function Datetime(props) {
     id,
     label: dateLabel,
     collapseLabelOnEmpty: !timeLabel,
+    onDateTimeBlur,
     formId,
     required,
     disabled,
@@ -3160,6 +3790,7 @@ function Datetime(props) {
     id,
     label: timeLabel,
     collapseLabelOnEmpty: !dateLabel,
+    onDateTimeBlur,
     formId,
     required,
     disabled,
@@ -3171,13 +3802,14 @@ function Datetime(props) {
     'aria-describedby': errorMessageId
   };
   return jsxs("div", {
-    class: formFieldClasses(type$8, {
+    class: formFieldClasses(type$9, {
       errors: allErrors,
       disabled,
       readonly
     }),
     children: [jsxs("div", {
       class: classNames('fjs-vertical-group'),
+      ref: dateTimeGroupRef,
       children: [useDatePicker && jsx(Datepicker, {
         ...datePickerProps
       }), useTimePicker && useDatePicker && jsx("div", {
@@ -3194,7 +3826,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$8,
+  type: type$9,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -3463,9 +4095,9 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$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 SvgImagePlaceholder = function SvgImagePlaceholder(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 64,
@@ -3504,7 +4136,7 @@ var SvgImagePlaceholder = function SvgImagePlaceholder(props) {
 };
 var ImagePlaceholder = SvgImagePlaceholder;
 
-const type$7 = 'image';
+const type$8 = 'image';
 function Image(props) {
   const {
     field
@@ -3525,7 +4157,7 @@ function Image(props) {
     formId
   } = useContext(FormContext$1);
   return jsx("div", {
-    class: formFieldClasses(type$7),
+    class: formFieldClasses(type$8),
     children: jsxs("div", {
       class: "fjs-image-container",
       children: [safeSource && jsx("img", {
@@ -3543,7 +4175,7 @@ function Image(props) {
   });
 }
 Image.config = {
-  type: type$7,
+  type: type$8,
   keyed: false,
   label: 'Image view',
   group: 'presentation',
@@ -3570,14 +4202,14 @@ function TemplatedInputAdorner(props) {
   });
 }
 
-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 SvgAngelDown = function SvgAngelDown(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",
@@ -3588,14 +4220,14 @@ var SvgAngelDown = function SvgAngelDown(props) {
 };
 var AngelDownIcon = SvgAngelDown;
 
-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 SvgAngelUp = function SvgAngelUp(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",
@@ -3606,11 +4238,12 @@ var SvgAngelUp = function SvgAngelUp(props) {
 };
 var AngelUpIcon = SvgAngelUp;
 
-const type$6 = 'number';
+const type$7 = 'number';
 function Numberfield(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     value,
     readonly,
@@ -3743,7 +4376,7 @@ function Numberfield(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
@@ -3771,7 +4404,8 @@ function Numberfield(props) {
           readOnly: readonly,
           id: prefixId(id, formId),
           onKeyDown: onKeyDown,
-          onKeyPress: onKeyPress
+          onKeyPress: onKeyPress,
+          onBlur: onBlur
 
           // @ts-ignore
           ,
@@ -3814,7 +4448,7 @@ function Numberfield(props) {
   });
 }
 Numberfield.config = {
-  type: type$6,
+  type: type$7,
   keyed: true,
   label: 'Number',
   group: 'basic-input',
@@ -3837,11 +4471,12 @@ Numberfield.config = {
   })
 };
 
-const type$5 = 'radio';
+const type$6 = 'radio';
 function Radio(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value
@@ -3852,6 +4487,7 @@ function Radio(props) {
     label,
     validate = {}
   } = field;
+  const outerDivRef = useRef();
   const {
     required
   } = validate;
@@ -3861,6 +4497,12 @@ function Radio(props) {
       value: v
     });
   };
+  const onRadioBlur = e => {
+    if (outerDivRef.current.contains(e.relatedTarget)) {
+      return;
+    }
+    onBlur();
+  };
   const {
     state: loadState,
     values: options
@@ -3870,11 +4512,12 @@ function Radio(props) {
   } = useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxs("div", {
-    class: formFieldClasses(type$5, {
+    class: formFieldClasses(type$6, {
       errors,
       disabled,
       readonly
     }),
+    ref: outerDivRef,
     children: [jsx(Label, {
       label: label,
       required: required
@@ -3894,6 +4537,7 @@ function Radio(props) {
           id: prefixId(`${id}-${index}`, formId),
           type: "radio",
           onClick: () => onChange(option.value),
+          onBlur: onRadioBlur,
           "aria-describedby": errorMessageId
         })
       }, `${id}-${index}`);
@@ -3906,7 +4550,7 @@ function Radio(props) {
   });
 }
 Radio.config = {
-  type: type$5,
+  type: type$6,
   keyed: true,
   label: 'Radio',
   group: 'selection',
@@ -3929,14 +4573,14 @@ Radio.config = {
   }
 };
 
-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 SvgXMark = function SvgXMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -3952,6 +4596,7 @@ function SearchableSelect(props) {
     id,
     disabled,
     errors,
+    onBlur,
     field,
     readonly,
     value
@@ -4071,6 +4716,7 @@ function SearchableSelect(props) {
         onBlur: () => {
           setIsDropdownExpanded(false);
           setFilter(valueLabel);
+          onBlur();
         },
         "aria-describedby": props['aria-describedby']
       }), displayState.displayCross && jsxs("span", {
@@ -4105,6 +4751,7 @@ function SimpleSelect(props) {
     id,
     disabled,
     errors,
+    onBlur,
     field,
     readonly,
     value
@@ -4159,7 +4806,10 @@ function SimpleSelect(props) {
         'hasErrors': errors.length
       }),
       onFocus: () => setIsDropdownExpanded(true),
-      onBlur: () => setIsDropdownExpanded(false),
+      onBlur: () => {
+        setIsDropdownExpanded(false);
+        onBlur();
+      },
       onMouseDown: onMouseDown,
       children: [jsx("div", {
         class: classNames('fjs-select-display', {
@@ -4201,11 +4851,12 @@ function SimpleSelect(props) {
   });
 }
 
-const type$4 = 'select';
+const type$5 = 'select';
 function Select(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     onChange,
     readonly,
@@ -4229,14 +4880,15 @@ function Select(props) {
     id,
     disabled,
     errors,
+    onBlur,
     field,
     value,
     onChange,
     readonly,
     'aria-describedby': errorMessageId
-  }), [disabled, errors, field, id, value, onChange, readonly, errorMessageId]);
+  }), [disabled, errors, field, id, value, onChange, onBlur, readonly, errorMessageId]);
   return jsxs("div", {
-    class: formFieldClasses(type$4, {
+    class: formFieldClasses(type$5, {
       errors,
       disabled,
       readonly
@@ -4264,7 +4916,7 @@ function Select(props) {
   });
 }
 Select.config = {
-  type: type$4,
+  type: type$5,
   keyed: true,
   label: 'Select',
   group: 'selection',
@@ -4287,11 +4939,38 @@ Select.config = {
   }
 };
 
+const type$4 = 'spacer';
+function Spacer(props) {
+  const {
+    field
+  } = props;
+  const {
+    height = 60
+  } = field;
+  return jsx("div", {
+    class: formFieldClasses(type$4),
+    style: {
+      height: height
+    }
+  });
+}
+Spacer.config = {
+  type: type$4,
+  keyed: false,
+  label: 'Spacer',
+  group: 'presentation',
+  create: (options = {}) => ({
+    height: 60,
+    ...options
+  })
+};
+
 const type$3 = 'taglist';
 function Taglist(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value: values = []
@@ -4384,9 +5063,10 @@ function Taglist(props) {
         break;
     }
   };
-  const onBlur = () => {
+  const onComponentBlur = () => {
     setIsDropdownExpanded(false);
     setFilter('');
+    onBlur();
   };
   const onTagRemoveClick = (event, value) => {
     const {
@@ -4457,9 +5137,7 @@ function Taglist(props) {
         onKeyDown: onInputKeyDown,
         onMouseDown: () => setIsEscapeClose(false),
         onFocus: () => !readonly && setIsDropdownExpanded(true),
-        onBlur: () => {
-          !readonly && onBlur();
-        },
+        onBlur: () => !readonly && onComponentBlur(),
         "aria-describedby": errorMessageId
       })]
     }), jsx("div", {
@@ -4592,6 +5270,7 @@ function Textfield(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value = ''
@@ -4643,6 +5322,7 @@ function Textfield(props) {
         readOnly: readonly,
         id: prefixId(id, formId),
         onInput: onChange,
+        onBlur: onBlur,
         type: "text",
         value: value,
         "aria-describedby": errorMessageId
@@ -4684,6 +5364,7 @@ function Textarea(props) {
   const {
     disabled,
     errors = [],
+    onBlur,
     field,
     readonly,
     value = ''
@@ -4706,22 +5387,12 @@ function Textarea(props) {
       value: target.value
     });
   };
-  const autoSizeTextarea = useCallback(textarea => {
-    // Ensures the textarea shrinks back, and improves resizing behavior consistency
-    textarea.style.height = '0px';
-    const computed = window.getComputedStyle(textarea);
-    const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + textarea.scrollHeight + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
-    const minHeight = 75;
-    const maxHeight = 350;
-    const displayHeight = Math.max(Math.min(calculatedHeight, maxHeight), minHeight);
-    textarea.style.height = `${displayHeight}px`;
-
-    // Overflow is hidden by default to hide scrollbar flickering
-    textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
-  }, []);
+  useLayoutEffect(() => {
+    autoSizeTextarea(textareaRef.current);
+  }, [value]);
   useEffect(() => {
     autoSizeTextarea(textareaRef.current);
-  }, [autoSizeTextarea, value]);
+  }, []);
   const {
     formId
   } = useContext(FormContext$1);
@@ -4742,6 +5413,7 @@ function Textarea(props) {
       readonly: readonly,
       id: prefixId(id, formId),
       onInput: onInput,
+      onBlur: onBlur,
       value: value,
       ref: textareaRef,
       "aria-describedby": errorMessageId
@@ -4766,40 +5438,58 @@ Textarea.config = {
     ...options
   })
 };
+const autoSizeTextarea = textarea => {
+  // Ensures the textarea shrinks back, and improves resizing behavior consistency
+  textarea.style.height = '0px';
+  const computed = window.getComputedStyle(textarea);
+  const heightFromLines = () => {
+    const lineHeight = parseInt(computed.getPropertyValue('line-height').replace('px', '')) || 0;
+    const lines = textarea.value ? textarea.value.toString().split('\n').length : 0;
+    return lines * lineHeight;
+  };
+  const calculatedHeight = parseInt(computed.getPropertyValue('border-top-width')) + parseInt(computed.getPropertyValue('padding-top')) + (textarea.scrollHeight || heightFromLines()) + parseInt(computed.getPropertyValue('padding-bottom')) + parseInt(computed.getPropertyValue('border-bottom-width'));
+  const minHeight = 75;
+  const maxHeight = 350;
+  const displayHeight = Math.max(Math.min(calculatedHeight || 0, maxHeight), minHeight);
+  textarea.style.height = `${displayHeight}px`;
+
+  // Overflow is hidden by default to hide scrollbar flickering
+  textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
+};
 
-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 SvgButton = function SvgButton(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", {
     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$a;
-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 _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 SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     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", {
     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$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); }
+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 SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: 54,
@@ -4833,18 +5523,18 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 var ChecklistIcon = SvgChecklist;
 
-var _path$9, _path2$2, _path3;
-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$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 SvgDatetime = function SvgDatetime(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: "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$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__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",
@@ -4853,27 +5543,27 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
 
-var _path$8, _path2$1;
-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 _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 SvgTaglist = function SvgTaglist(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,
     fill: "currentcolor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__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$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__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$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); }
+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 SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -4899,64 +5589,87 @@ var SvgForm = function SvgForm(props) {
 };
 var FormIcon = SvgForm;
 
-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 _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) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, 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"
   })));
 };
 var ColumnsIcon = SvgGroup;
 
-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 _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) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, 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"
   })));
 };
 var NumberIcon = SvgNumber;
 
-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 _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) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, 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"
   })));
 };
 var RadioIcon = SvgRadio;
 
-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 _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) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, 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"
   })));
 };
 var SelectIcon = SvgSelect;
 
+var _path$4, _path2$1;
+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: "none"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "square",
+    strokeWidth: 2,
+    d: "M9 23h36M9 31h36"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "m23 17 4-4 4 4M31 37l-4 4-4-4"
+  })));
+};
+var SpacerIcon = SvgSpacer;
+
 var _path$3;
 function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
 var SvgText = function SvgText(props) {
@@ -5032,6 +5745,7 @@ const iconsByType = type => {
     number: NumberIcon,
     radio: RadioIcon,
     select: SelectIcon,
+    spacer: SpacerIcon,
     taglist: TaglistIcon,
     text: TextIcon,
     textfield: TextfieldIcon,
@@ -5040,7 +5754,7 @@ const iconsByType = type => {
   }[type];
 };
 
-const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Datetime, Radio, Select, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Datetime, Radio, Select, Spacer, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -5451,7 +6165,7 @@ class Form {
   * @internal
   */
   _getModules() {
-    return [ExpressionLanguageModule, MarkdownModule];
+    return [ExpressionLanguageModule, MarkdownModule, ViewerCommandsModule];
   }
 
   /**
@@ -5496,7 +6210,7 @@ class Form {
   }
 }
 
-const schemaVersion = 9;
+const schemaVersion = 10;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -5521,5 +6235,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, Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Image, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, Radio, Select, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Image, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, 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, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
 //# sourceMappingURL=index.es.js.map