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

package/dist/index.cjs

@@ -445,7 +445,7 @@ function prefixId(id, formId) {
   return `fjs-form-${id}`;
 }
 
-const type$d = 'button';
+const type$e = 'button';
 function Button(props) {
   const {
     disabled,
@@ -457,7 +457,7 @@ function Button(props) {
     action = 'submit'
   } = field;
   return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$d),
+    class: formFieldClasses(type$e),
     children: jsxRuntime.jsx("button", {
       class: "fjs-button",
       type: action,
@@ -469,7 +469,7 @@ function Button(props) {
   });
 }
 Button.config = {
-  type: type$d,
+  type: type$e,
   keyed: false,
   label: 'Button',
   group: 'action',
@@ -767,7 +767,7 @@ function Label(props) {
   });
 }
 
-const type$c = 'checkbox';
+const type$d = 'checkbox';
 function Checkbox(props) {
   const {
     disabled,
@@ -800,7 +800,7 @@ function Checkbox(props) {
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: classNames(formFieldClasses(type$c, {
+    class: classNames(formFieldClasses(type$d, {
       errors,
       disabled,
       readonly
@@ -832,7 +832,7 @@ function Checkbox(props) {
   });
 }
 Checkbox.config = {
-  type: type$c,
+  type: type$d,
   keyed: true,
   label: 'Checkbox',
   group: 'selection',
@@ -846,54 +846,54 @@ Checkbox.config = {
 };
 
 // parses the options data from the provided form field and form data
-function getValuesData(formField, formData) {
+function getOptionsData(formField, formData) {
   const {
-    valuesKey,
-    values
+    valuesKey: optionsKey,
+    values: staticOptions
   } = formField;
-  return valuesKey ? minDash.get(formData, [valuesKey]) : values;
+  return optionsKey ? minDash.get(formData, [optionsKey]) : staticOptions;
 }
 
 // transforms the provided options into a normalized format, trimming invalid options
-function normalizeValuesData(valuesData) {
-  return valuesData.filter(_isValueSomething).map(v => _normalizeValueData(v)).filter(v => v);
+function normalizeOptionsData(optionsData) {
+  return optionsData.filter(_isOptionSomething).map(v => _normalizeOptionsData(v)).filter(v => v);
 }
-function _normalizeValueData(valueData) {
-  if (_isAllowedValue(valueData)) {
+function _normalizeOptionsData(optionData) {
+  if (_isAllowedOption(optionData)) {
     // if a primitive is provided, use it as label and value
     return {
-      value: valueData,
-      label: `${valueData}`
+      value: optionData,
+      label: `${optionData}`
     };
   }
-  if (typeof valueData === 'object') {
-    if (!valueData.label && _isAllowedValue(valueData.value)) {
+  if (typeof optionData === 'object') {
+    if (!optionData.label && _isAllowedOption(optionData.value)) {
       // if no label is provided, use the value as label
       return {
-        value: valueData.value,
-        label: `${valueData.value}`
+        value: optionData.value,
+        label: `${optionData.value}`
       };
     }
-    if (_isValueSomething(valueData.value) && _isAllowedValue(valueData.label)) {
+    if (_isOptionSomething(optionData.value) && _isAllowedOption(optionData.label)) {
       // if both value and label are provided, use them as is, in this scenario, the value may also be an object
-      return valueData;
+      return optionData;
     }
   }
   return null;
 }
-function _isAllowedValue(value) {
-  return _isReadableType(value) && _isValueSomething(value);
+function _isAllowedOption(option) {
+  return _isReadableType(option) && _isOptionSomething(option);
 }
-function _isReadableType(value) {
-  return ['number', 'string', 'boolean'].includes(typeof value);
+function _isReadableType(option) {
+  return ['number', 'string', 'boolean'].includes(typeof option);
 }
-function _isValueSomething(value) {
-  return value || value === 0 || value === false;
+function _isOptionSomething(option) {
+  return option || option === 0 || option === false;
 }
 function createEmptyOptions(options = {}) {
   const defaults = {};
 
-  // provide default values if valuesKey and valuesExpression are not set
+  // provide default options if valuesKey and valuesExpression are not set
   if (!options.valuesKey && !options.valuesExpression) {
     defaults.values = [{
       label: 'Value',
@@ -916,72 +916,96 @@ const LOAD_STATES = {
 };
 
 /**
- * @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} OptionsGetter
+ * @property {Object[]} options - The options data
+ * @property {(LOAD_STATES)} loadState - The options data's loading state, to use for conditional rendering
  */
 
 /**
- * A hook to load values for single and multiselect components.
+ * A hook to load options 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
+ * @param {Object} field - The form field to handle options for
+ * @return {OptionsGetter} optionsGetter - A options getter object providing loading state and options
  */
-function useValuesAsync (field) {
+function useOptionsAsync (field) {
   const {
-    valuesExpression,
-    valuesKey,
-    values: staticValues
+    valuesExpression: optionsExpression,
+    valuesKey: optionsKey,
+    values: staticOptions
   } = field;
-  const [valuesGetter, setValuesGetter] = hooks.useState({
-    values: [],
+  const [optionsGetter, setOptionsGetter] = hooks.useState({
+    options: [],
     error: undefined,
-    state: LOAD_STATES.LOADING
+    loadState: LOAD_STATES.LOADING
   });
   const initialData = useService('form')._getState().initialData;
-  const expressionEvaluation = useExpressionEvaluation(valuesExpression);
-  const evaluatedValues = useDeepCompareState(expressionEvaluation || [], []);
+  const expressionEvaluation = useExpressionEvaluation(optionsExpression);
+  const evaluatedOptions = useDeepCompareState(expressionEvaluation || [], []);
   hooks.useEffect(() => {
-    let values = [];
+    let options = [];
 
-    // dynamic values
-    if (valuesKey !== undefined) {
-      const keyedValues = (initialData || {})[valuesKey];
-      if (keyedValues && Array.isArray(keyedValues)) {
-        values = keyedValues;
+    // dynamic options
+    if (optionsKey !== undefined) {
+      const keyedOptions = (initialData || {})[optionsKey];
+      if (keyedOptions && Array.isArray(keyedOptions)) {
+        options = keyedOptions;
       }
 
-      // static values
-    } else if (staticValues !== undefined) {
-      values = Array.isArray(staticValues) ? staticValues : [];
+      // static options
+    } else if (staticOptions !== undefined) {
+      options = Array.isArray(staticOptions) ? staticOptions : [];
 
       // expression
-    } else if (valuesExpression) {
-      if (evaluatedValues && Array.isArray(evaluatedValues)) {
-        values = evaluatedValues;
+    } else if (optionsExpression) {
+      if (evaluatedOptions && Array.isArray(evaluatedOptions)) {
+        options = evaluatedOptions;
       }
     } else {
-      setValuesGetter(buildErrorState('No values source defined in the form definition'));
+      setOptionsGetter(buildErrorState('No options source defined in the form definition'));
       return;
     }
 
     // normalize data to support primitives and partially defined objects
-    values = normalizeValuesData(values);
-    setValuesGetter(buildLoadedState(values));
-  }, [valuesKey, staticValues, initialData, valuesExpression, evaluatedValues]);
-  return valuesGetter;
+    options = normalizeOptionsData(options);
+    setOptionsGetter(buildLoadedState(options));
+  }, [optionsKey, staticOptions, initialData, optionsExpression, evaluatedOptions]);
+  return optionsGetter;
 }
 const buildErrorState = error => ({
-  values: [],
+  options: [],
   error,
-  state: LOAD_STATES.ERROR
+  loadState: LOAD_STATES.ERROR
 });
-const buildLoadedState = values => ({
-  values,
+const buildLoadedState = options => ({
+  options,
   error: undefined,
-  state: LOAD_STATES.LOADED
+  loadState: LOAD_STATES.LOADED
 });
 
+function useCleanupMultiSelectValues (props) {
+  const {
+    field,
+    options,
+    loadState,
+    onChange,
+    values
+  } = props;
+
+  // Ensures that the values are always a subset of the possible options
+  hooks.useEffect(() => {
+    if (loadState !== LOAD_STATES.LOADED) {
+      return;
+    }
+    const hasValuesNotInOptions = values.some(v => !options.map(o => o.value).includes(v));
+    if (hasValuesNotInOptions) {
+      onChange({
+        field,
+        value: values.filter(v => options.map(o => o.value).includes(v))
+      });
+    }
+  }, [field, options, onChange, JSON.stringify(values), loadState]);
+}
+
 // config  ///////////////////
 
 const MINUTES_IN_DAY = 60 * 24;
@@ -1195,7 +1219,7 @@ function sanitizeSingleSelectValue(options) {
     value
   } = options;
   try {
-    const validValues = normalizeValuesData(getValuesData(formField, data)).map(v => v.value);
+    const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
     return validValues.includes(value) ? value : null;
   } catch (error) {
     // use default value in case of formatting error
@@ -1210,7 +1234,7 @@ function sanitizeMultiSelectValue(options) {
     value
   } = options;
   try {
-    const validValues = normalizeValuesData(getValuesData(formField, data)).map(v => v.value);
+    const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
     return value.filter(v => validValues.includes(v));
   } catch (error) {
     // use default value in case of formatting error
@@ -1219,7 +1243,7 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
-const type$b = 'checklist';
+const type$c = 'checklist';
 function Checklist(props) {
   const {
     disabled,
@@ -1228,7 +1252,7 @@ function Checklist(props) {
     onFocus,
     field,
     readonly,
-    value = []
+    value: values = []
   } = props;
   const {
     description,
@@ -1241,7 +1265,7 @@ function Checklist(props) {
     required
   } = validate;
   const toggleCheckbox = v => {
-    let newValue = [...value];
+    let newValue = [...values];
     if (!newValue.includes(v)) {
       newValue.push(v);
     } else {
@@ -1265,15 +1289,22 @@ function Checklist(props) {
     onFocus && onFocus();
   };
   const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
+    loadState,
+    options
+  } = useOptionsAsync(field);
+  useCleanupMultiSelectValues({
+    field,
+    loadState,
+    options,
+    values,
+    onChange: props.onChange
+  });
   const {
     formId
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   return jsxRuntime.jsxs("div", {
-    class: classNames(formFieldClasses(type$b, {
+    class: classNames(formFieldClasses(type$c, {
       errors,
       disabled,
       readonly
@@ -1287,11 +1318,11 @@ function Checklist(props) {
         id: prefixId(`${id}-${index}`, formId),
         label: v.label,
         class: classNames({
-          'fjs-checked': value.includes(v.value)
+          'fjs-checked': values.includes(v.value)
         }),
         required: false,
         children: jsxRuntime.jsx("input", {
-          checked: value.includes(v.value),
+          checked: values.includes(v.value),
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
@@ -1312,9 +1343,9 @@ function Checklist(props) {
   });
 }
 Checklist.config = {
-  type: type$b,
+  type: type$c,
   keyed: true,
-  label: 'Checklist',
+  label: 'Checkbox group',
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
@@ -1464,16 +1495,16 @@ FormComponent$1.config = {
   })
 };
 
-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 _path$k;
+function _extends$m() { _extends$m = 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$m.apply(this, arguments); }
 var SvgCalendar = function SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 14,
     height: 15,
     fill: "none",
     viewBox: "0 0 28 30"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.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",
@@ -1736,19 +1767,19 @@ function Datepicker(props) {
   });
 }
 
-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 _path$j, _path2$4;
+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 SvgClock = function SvgClock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none",
     viewBox: "0 0 28 29"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.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",
@@ -2019,7 +2050,7 @@ function Timepicker(props) {
   });
 }
 
-const type$a = 'datetime';
+const type$b = 'datetime';
 function Datetime(props) {
   const {
     disabled,
@@ -2191,7 +2222,7 @@ function Datetime(props) {
     'aria-describedby': errorMessageId
   };
   return jsxRuntime.jsxs("div", {
-    class: formFieldClasses(type$a, {
+    class: formFieldClasses(type$b, {
       errors: allErrors,
       disabled,
       readonly
@@ -2215,7 +2246,7 @@ function Datetime(props) {
   });
 }
 Datetime.config = {
-  type: type$a,
+  type: type$b,
   keyed: true,
   label: 'Date time',
   group: 'basic-input',
@@ -2395,7 +2426,7 @@ Group.config = {
   type: 'group',
   pathed: true,
   label: 'Group',
-  group: 'presentation',
+  group: 'container',
   create: (options = {}) => ({
     components: [],
     showOutline: true,
@@ -2409,6 +2440,7 @@ const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p
 const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
 const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
 const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
+const ALLOWED_IFRAME_SRC_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
 const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
 
 const FORM_ELEMENT = document.createElement('form');
@@ -2449,6 +2481,18 @@ function sanitizeImageSource(src) {
   return valid ? src : '';
 }
 
+/**
+ * Sanitizes an iframe source to ensure we only allow for links
+ * that start with http(s).
+ *
+ * @param {string} src
+ * @returns {string}
+ */
+function sanitizeIFrameSource(src) {
+  const valid = ALLOWED_IFRAME_SRC_PATTERN.test(src);
+  return valid ? src : '';
+}
+
 /**
  * Recursively sanitize a HTML node, potentially
  * removing it, its children or attributes.
@@ -2530,9 +2574,77 @@ function isValidAttribute(lcTag, lcName, value) {
   return true;
 }
 
-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); }
+const type$a = 'iframe';
+const DEFAULT_HEIGHT = 300;
+function IFrame(props) {
+  const {
+    field,
+    disabled,
+    readonly
+  } = props;
+  const {
+    height = DEFAULT_HEIGHT,
+    id,
+    label,
+    url
+  } = field;
+  const evaluatedUrl = useSingleLineTemplateEvaluation(url, {
+    debug: true
+  });
+  const safeUrl = hooks.useMemo(() => sanitizeIFrameSource(evaluatedUrl), [evaluatedUrl]);
+  const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
+    debug: true
+  });
+  const {
+    formId
+  } = hooks.useContext(FormContext$1);
+  return jsxRuntime.jsxs("div", {
+    class: formFieldClasses(type$a, {
+      disabled,
+      readonly
+    }),
+    children: [jsxRuntime.jsx(Label, {
+      id: prefixId(id, formId),
+      label: evaluatedLabel
+    }), !evaluatedUrl && jsxRuntime.jsx(IFramePlaceholder, {
+      text: "No content to show."
+    }), evaluatedUrl && safeUrl && jsxRuntime.jsx("iframe", {
+      src: safeUrl,
+      title: evaluatedLabel,
+      height: height,
+      class: "fjs-iframe",
+      id: prefixId(id, formId),
+      sandbox: ""
+    }), evaluatedUrl && !safeUrl && jsxRuntime.jsx(IFramePlaceholder, {
+      text: "External content couldn't be loaded."
+    })]
+  });
+}
+function IFramePlaceholder(props) {
+  const {
+    text = 'iFrame'
+  } = props;
+  return jsxRuntime.jsx("div", {
+    class: "fjs-iframe-placeholder",
+    children: jsxRuntime.jsx("p", {
+      class: "fjs-iframe-placeholder-text",
+      children: text
+    })
+  });
+}
+IFrame.config = {
+  type: type$a,
+  keyed: false,
+  label: 'iFrame',
+  group: 'container',
+  create: (options = {}) => ({
+    ...options
+  })
+};
+
+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 SvgImagePlaceholder = function SvgImagePlaceholder(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 64,
@@ -2637,14 +2749,14 @@ function TemplatedInputAdorner(props) {
   });
 }
 
-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 _path$i;
+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 SvgAngelDown = function SvgAngelDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2655,14 +2767,14 @@ var SvgAngelDown = function SvgAngelDown(props) {
 };
 var AngelDownIcon = SvgAngelDown;
 
-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$h;
+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 SvgAngelUp = function SvgAngelUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -2919,13 +3031,10 @@ Numberfield.config = {
     value,
     formField
   }) => {
-    // null state is allowed
-    if (isNullEquivalentValue(value)) return null;
+    // invalid value types are sanitized to null
+    if (isNullEquivalentValue(value) || !isValidNumber(value)) return null;
 
-    // if data cannot be parsed as a valid number, go into invalid NaN state
-    if (!isValidNumber(value)) return 'NaN';
-
-    // otherwise parse to formatting type
+    // otherwise, we return a string or a number depending on the form field configuration
     return formField.serializeToString ? value.toString() : Number(value);
   },
   create: (options = {}) => ({
@@ -2933,6 +3042,30 @@ Numberfield.config = {
   })
 };
 
+function useCleanupSingleSelectValue (props) {
+  const {
+    field,
+    options,
+    loadState,
+    onChange,
+    value
+  } = props;
+
+  // Ensures that the value is always one of the possible options
+  hooks.useEffect(() => {
+    if (loadState !== LOAD_STATES.LOADED) {
+      return;
+    }
+    const hasValueNotInOptions = value && !options.map(o => o.value).includes(value);
+    if (hasValueNotInOptions) {
+      onChange({
+        field,
+        value: null
+      });
+    }
+  }, [field, options, onChange, value, loadState]);
+}
+
 const type$7 = 'radio';
 function Radio(props) {
   const {
@@ -2973,9 +3106,16 @@ function Radio(props) {
     onFocus && onFocus();
   };
   const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
+    loadState,
+    options
+  } = useOptionsAsync(field);
+  useCleanupSingleSelectValue({
+    field,
+    loadState,
+    options,
+    value,
+    onChange: props.onChange
+  });
   const {
     formId
   } = hooks.useContext(FormContext$1);
@@ -3022,21 +3162,21 @@ function Radio(props) {
 Radio.config = {
   type: type$7,
   keyed: true,
-  label: 'Radio',
+  label: 'Radio group',
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
   create: createEmptyOptions
 };
 
-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$g;
+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 SvgXMark = function SvgXMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 8,
     height: 8
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     stroke: "currentColor",
@@ -3068,9 +3208,16 @@ function SearchableSelect(props) {
   const searchbarRef = hooks.useRef();
   const eventBus = useService('eventBus');
   const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
+    loadState,
+    options
+  } = useOptionsAsync(field);
+  useCleanupSingleSelectValue({
+    field,
+    loadState,
+    options,
+    value,
+    onChange: props.onChange
+  });
 
   // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
@@ -3228,10 +3375,18 @@ function SimpleSelect(props) {
   } = hooks.useContext(FormContext$1);
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
   const selectRef = hooks.useRef();
+  const inputRef = hooks.useRef();
   const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
+    loadState,
+    options
+  } = useOptionsAsync(field);
+  useCleanupSingleSelectValue({
+    field,
+    loadState,
+    options,
+    value,
+    onChange: props.onChange
+  });
 
   // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
@@ -3252,12 +3407,12 @@ function SimpleSelect(props) {
     return ds;
   }, [disabled, isDropdownExpanded, loadState, value]);
   const onMouseDown = hooks.useCallback(e => {
-    const select = selectRef.current;
+    const input = inputRef.current;
     setIsDropdownExpanded(!isDropdownExpanded);
     if (isDropdownExpanded) {
-      select.blur();
+      input.blur();
     } else {
-      select.focus();
+      input.focus();
     }
     e.preventDefault();
   }, [isDropdownExpanded]);
@@ -3294,6 +3449,7 @@ function SimpleSelect(props) {
         id: prefixId(`${id}-display`, formId),
         children: valueLabel || 'Select'
       }), !disabled && jsxRuntime.jsx("input", {
+        ref: inputRef,
         id: prefixId(`${id}-search`, formId),
         class: "fjs-select-hidden-input",
         value: valueLabel,
@@ -3492,34 +3648,36 @@ function Taglist(props) {
   } = hooks.useContext(FormContext$1);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
   const [filter, setFilter] = hooks.useState('');
-  const [filteredOptions, setFilteredOptions] = hooks.useState([]);
   const [isDropdownExpanded, setIsDropdownExpanded] = hooks.useState(false);
-  const [hasOptionsLeft, setHasOptionsLeft] = hooks.useState(true);
   const [isEscapeClosed, setIsEscapeClose] = hooks.useState(false);
   const focusScopeRef = hooks.useRef();
   const inputRef = hooks.useRef();
   const eventBus = useService('eventBus');
   const {
-    state: loadState,
-    values: options
-  } = useValuesAsync(field);
+    loadState,
+    options
+  } = useOptionsAsync(field);
+  useCleanupMultiSelectValues({
+    field,
+    loadState,
+    options,
+    values,
+    onChange: props.onChange
+  });
 
   // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = hooks.useMemo(() => Object.assign({}, ...options.map((o, x) => ({
     [o.value]: options[x]
   }))), [options]);
+  const hasOptionsLeft = hooks.useMemo(() => options.length > values.length, [options.length, values.length]);
 
   // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
-  hooks.useEffect(() => {
-    if (loadState === LOAD_STATES.LOADED) {
-      setFilteredOptions(options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value)));
-    } else {
-      setFilteredOptions([]);
+  const filteredOptions = hooks.useMemo(() => {
+    if (loadState !== LOAD_STATES.LOADED) {
+      return [];
     }
-  }, [filter, JSON.stringify(values), options, loadState]);
-  hooks.useEffect(() => {
-    setHasOptionsLeft(options.length > values.length);
-  }, [options.length, values.length]);
+    return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value));
+  }, [filter, options, JSON.stringify(values), loadState]);
   const selectValue = value => {
     if (filter) {
       setFilter('');
@@ -3646,7 +3804,7 @@ function Taglist(props) {
             onMouseDown: e => e.preventDefault(),
             children: [jsxRuntime.jsx("span", {
               class: "fjs-taglist-tag-label",
-              children: valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`
+              children: valueToOptionMap[v] ? valueToOptionMap[v].label : undefined
             }), !disabled && !readonly && jsxRuntime.jsx("button", {
               type: "button",
               title: "Remove tag",
@@ -3867,7 +4025,7 @@ Textfield.config = {
   sanitizeValue: ({
     value
   }) => {
-    if (minDash.isArray(value) || minDash.isObject(value)) {
+    if (minDash.isArray(value) || minDash.isObject(value) || minDash.isNil(value)) {
       return '';
     }
 
@@ -3958,7 +4116,7 @@ Textarea.config = {
   emptyValue: '',
   sanitizeValue: ({
     value
-  }) => minDash.isArray(value) || minDash.isObject(value) ? '' : String(value),
+  }) => minDash.isArray(value) || minDash.isObject(value) || minDash.isNil(value) ? '' : String(value),
   create: (options = {}) => ({
     ...options
   })
@@ -3982,84 +4140,64 @@ const autoSizeTextarea = textarea => {
   textarea.style.overflow = calculatedHeight > maxHeight ? 'visible' : 'hidden';
 };
 
-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$f;
+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 SvgButton = function SvgButton(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.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$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$e;
+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 SvgCheckbox = function SvgCheckbox(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.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$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$d;
+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 SvgChecklist = function SvgChecklist(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: 54,
     height: 54,
-    fill: "currentcolor"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__namespace.createElement("use", {
-    xlinkHref: "#Checklist_svg__a"
-  }), /*#__PURE__*/React__namespace.createElement("use", {
-    xlinkHref: "#Checklist_svg__a",
-    y: 24
-  }), /*#__PURE__*/React__namespace.createElement("use", {
-    xlinkHref: "#Checklist_svg__a",
-    y: 12
-  }))), _use || (_use = /*#__PURE__*/React__namespace.createElement("use", {
-    xlinkHref: "#Checklist_svg__b"
-  })), _use2 || (_use2 = /*#__PURE__*/React__namespace.createElement("use", {
-    xlinkHref: "#Checklist_svg__b",
-    y: 12
-  })), _use3 || (_use3 = /*#__PURE__*/React__namespace.createElement("use", {
-    xlinkHref: "#Checklist_svg__b",
-    y: 24
-  })), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Checklist_svg__a",
-    d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-6z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    id: "Checklist_svg__b",
-    d: "M23 14.5a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H24a1 1 0 0 1-1-1v-1z"
-  }))));
+    fill: "none"
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M14.35 24.75H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414ZM14.35 37.05H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414ZM14.35 12.45H19v4.65h-4.65v-4.65Zm-1.414-1.414a2 2 0 0 1 1.414-.586H19a2 2 0 0 1 2 2v4.65a2 2 0 0 1-2 2h-4.65a2 2 0 0 1-2-2v-4.65a2 2 0 0 1 .586-1.414Zm12.007 14.977a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Zm0 12.3a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Zm0-24.6a1 1 0 0 0-.293.707v.65a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-.65a1 1 0 0 0-1-1h-15a1 1 0 0 0-.707.293Z",
+    clipRule: "evenodd"
+  })));
 };
 var ChecklistIcon = SvgChecklist;
 
-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 _path$c, _path2$3, _path3;
+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 SvgDatetime = function SvgDatetime(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -4068,27 +4206,27 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
 
-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 _path$b, _path2$2;
+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 SvgTaglist = function SvgTaglist(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.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$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); }
+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 SvgForm = function SvgForm(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54
@@ -4114,9 +4252,24 @@ var SvgForm = function SvgForm(props) {
 };
 var FormIcon = SvgForm;
 
+var _path$a;
+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 SvgGroup = function SvgGroup(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 54,
+    height: 54,
+    fill: "currentcolor"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.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$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) {
+var SvgNumber = function SvgNumber(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -4124,58 +4277,58 @@ var SvgGroup = function SvgGroup(props) {
     fill: "currentcolor"
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.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$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 SvgNumber = function SvgNumber(props) {
+var SvgRadio = function SvgRadio(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.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$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 SvgRadio = function SvgRadio(props) {
+var SvgSelect = function SvgSelect(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.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$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 SvgSelect = function SvgSelect(props) {
+var SvgSeparator = function SvgSeparator(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.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$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 SvgSeparator = function SvgSeparator(props) {
+var SvgSpacer = function SvgSpacer(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -4183,43 +4336,43 @@ var SvgSeparator = function SvgSeparator(props) {
     fill: "none"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     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"
+    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 SeparatorIcon = SvgSeparator;
+var SpacerIcon = SvgSpacer;
 
 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) {
+var SvgText = function SvgText(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "none"
+    fill: "currentcolor"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    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"
+    d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.69 1.69 0 0 0-.86-.62 9.28 9.28 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.09 7.09 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.31 5.31 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21z"
   })));
 };
-var SpacerIcon = SvgSpacer;
+var TextIcon = SvgText;
 
 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) {
+var SvgTextfield = function SvgTextfield(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
     fill: "currentcolor"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M20.58 33.77h-3l-1.18-3.08H11l-1.1 3.08H7l5.27-13.54h2.89zm-5-5.36-1.86-5-1.83 5zM22 20.23h5.41a15.47 15.47 0 0 1 2.4.14 3.42 3.42 0 0 1 1.41.55 3.47 3.47 0 0 1 1 1.14 3 3 0 0 1 .42 1.58 3.26 3.26 0 0 1-1.91 2.94 3.63 3.63 0 0 1 1.91 1.22 3.28 3.28 0 0 1 .66 2 4 4 0 0 1-.43 1.8 3.63 3.63 0 0 1-1.09 1.4 3.89 3.89 0 0 1-1.83.65q-.69.07-3.3.09H22zm2.73 2.25v3.13h3.8a1.79 1.79 0 0 0 1.1-.49 1.41 1.41 0 0 0 .41-1 1.49 1.49 0 0 0-.35-1 1.54 1.54 0 0 0-1-.48c-.27 0-1.05-.05-2.34-.05zm0 5.39v3.62h2.57a11.52 11.52 0 0 0 1.88-.09 1.65 1.65 0 0 0 1-.54 1.6 1.6 0 0 0 .38-1.14 1.75 1.75 0 0 0-.29-1 1.69 1.69 0 0 0-.86-.62 9.28 9.28 0 0 0-2.41-.23zm19.62.92 2.65.84a5.94 5.94 0 0 1-2 3.29A5.74 5.74 0 0 1 41.38 34a5.87 5.87 0 0 1-4.44-1.84 7.09 7.09 0 0 1-1.73-5A7.43 7.43 0 0 1 37 21.87 6 6 0 0 1 41.54 20a5.64 5.64 0 0 1 4 1.47A5.33 5.33 0 0 1 47 24l-2.7.65a2.8 2.8 0 0 0-2.86-2.27A3.09 3.09 0 0 0 39 23.42a5.31 5.31 0 0 0-.93 3.5 5.62 5.62 0 0 0 .93 3.65 3 3 0 0 0 2.4 1.09 2.72 2.72 0 0 0 1.82-.66 4 4 0 0 0 1.13-2.21z"
+    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-32 4v10h-2V22h2z"
   })));
 };
-var TextIcon = SvgText;
+var TextfieldIcon = SvgTextfield;
 
 var _path$2;
 function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-var SvgTextfield = function SvgTextfield(props) {
+var SvgTextarea = function SvgTextarea(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
@@ -4227,25 +4380,30 @@ var SvgTextfield = function SvgTextfield(props) {
     fill: "currentcolor"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.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-32 4v10h-2V22h2z"
+    d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1zm-1.136 15.5.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
   })));
 };
-var TextfieldIcon = SvgTextfield;
+var TextareaIcon = SvgTextarea;
 
-var _path$1;
+var _path$1, _path2$1;
 function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgTextarea = function SvgTextarea(props) {
+var SvgIFrame = function SvgIFrame(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
+    d: "M34.467 37.3 41 31l-6.533-6.3-1.32 1.273L38.36 31l-5.213 5.027 1.32 1.273ZM19.533 24.7 13 31l6.533 6.3 1.32-1.273L15.64 31l5.214-5.027-1.32-1.273Zm4.127 14.832 1.805.468 4.875-17.532L28.535 22 23.66 39.532Z"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentcolor",
     fillRule: "evenodd",
-    d: "M45 13a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V16a3 3 0 0 1 3-3h36zm0 2H9a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V16a1 1 0 0 0-1-1zm-1.136 15.5.849.849-6.364 6.364-.849-.849 6.364-6.364zm.264 3.5.849.849-2.828 2.828-.849-.849L44.128 34zM13 19v10h-2V19h2z"
+    d: "M46 9a3 3 0 0 1 3 3v30a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V12a3 3 0 0 1 3-3h38Zm0 2H8a1 1 0 0 0-1 1v4h40v-4a1 1 0 0 0-1-1ZM7 42V18h40v24a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1Z",
+    clipRule: "evenodd"
   })));
 };
-var TextareaIcon = SvgTextarea;
+var IFrameIcon = SvgIFrame;
 
 var _path, _path2;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -4275,6 +4433,7 @@ const iconsByType = type => {
     columns: GroupIcon,
     datetime: DatetimeIcon,
     group: GroupIcon,
+    iframe: IFrameIcon,
     image: ImageIcon,
     number: NumberIcon,
     radio: RadioIcon,
@@ -4289,7 +4448,7 @@ const iconsByType = type => {
   }[type];
 };
 
-const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, Image, Numberfield, Datetime, Radio, Select, Spacer, Separator, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, IFrame, Image, Numberfield, Datetime, Radio, Select, Spacer, Separator, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -4361,8 +4520,8 @@ function createFormContainer(prefix = 'fjs') {
   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'];
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url'];
+const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
 function isRequired(field) {
   return field.required;
 }
@@ -6857,7 +7016,7 @@ class Form {
   }
 }
 
-const schemaVersion = 12;
+const schemaVersion = 13;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -6908,6 +7067,7 @@ exports.FormFields = FormFields;
 exports.FormLayouter = FormLayouter;
 exports.FormRenderContext = FormRenderContext$1;
 exports.Group = Group;
+exports.IFrame = IFrame;
 exports.Image = Image;
 exports.Importer = Importer;
 exports.Label = Label;
@@ -6952,6 +7112,10 @@ exports.pathParse = pathParse;
 exports.pathsEqual = pathsEqual;
 exports.runRecursively = runRecursively;
 exports.sanitizeHTML = sanitizeHTML;
+exports.sanitizeIFrameSource = sanitizeIFrameSource;
 exports.sanitizeImageSource = sanitizeImageSource;
 exports.schemaVersion = schemaVersion;
+exports.useExpressionEvaluation = useExpressionEvaluation;
+exports.useSingleLineTemplateEvaluation = useSingleLineTemplateEvaluation;
+exports.useTemplateEvaluation = useTemplateEvaluation;
 //# sourceMappingURL=index.cjs.map