@bpmn-io/form-js-viewer 0.14.0 → 0.14.1

package/dist/index.cjs

@@ -15,30 +15,179 @@ var flatpickr = require('flatpickr');
 var Markup = require('preact-markup');
 var didi = require('didi');
 
+const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) => {
+  const {
+    depth = 0,
+    specialDepthAccessors = {}
+  } = options;
+  if (!['expression', 'unaryTest'].includes(feelFlavour)) return [];
+  const tree = feelFlavour === 'expression' ? feelin.parseExpressions(feelString) : feelin.parseUnaryTests(feelString);
+  const simpleExpressionTree = _buildSimpleFeelStructureTree(tree, feelString);
+  return function _unfoldVariables(node) {
+    if (node.name === 'PathExpression') {
+      if (Object.keys(specialDepthAccessors).length === 0) {
+        return depth === 0 ? [_getVariableNameAtPathIndex(node, 0)] : [];
+      }
+
+      // if using special depth accessors, use a more complex extraction
+      return Array.from(_smartExtractVariableNames(node, depth, specialDepthAccessors));
+    }
+    if (depth === 0 && node.name === 'VariableName') return [node.variableName];
+
+    // for any other kind of node, traverse its children and flatten the result
+    if (node.children) {
+      return node.children.reduce((acc, child) => {
+        return acc.concat(_unfoldVariables(child));
+      }, []);
+    }
+    return [];
+  }(simpleExpressionTree);
+};
+
+/**
+ * Get the variable name at the specified index in a given path expression.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @param {number} index - The index of the variable name to retrieve.
+ * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+ */
+const _getVariableNameAtPathIndex = (root, index) => {
+  const accessors = _deconstructPathExpression(root);
+  return accessors[index] || null;
+};
+
+/**
+ * Extracts the variables which are required of the external context for a given path expression.
+ * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+ *
+ * @param {Object} node - The root node of the path expression tree.
+ * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+ * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+ * @returns {Set} - A set containing the extracted variable names.
+ */
+const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
+  // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
+  // we track multiple of these to account for the fact that a path expression may be ambiguous due to special keywords
+  let accessorDepthInfos = [{
+    previous: null,
+    current: initialDepth - 1
+  }];
+  const extractedVariables = new Set();
+  const nodeAccessors = _deconstructPathExpression(node);
+  for (let i = 0; i < nodeAccessors.length; i++) {
+    const currentAccessor = nodeAccessors[i];
+    if (currentAccessor in specialDepthAccessors) {
+      const depthOffsets = specialDepthAccessors[currentAccessor];
+
+      // if the current accessor is a special keyword, we need to expand the current depth info set
+      // this is done to account for the ambiguity of keywords like parent, which may be used to access
+      // the parent of the current node, or a child variable of the same name
+      accessorDepthInfos = depthOffsets.reduce((accumulator, offset) => {
+        return [...accumulator, ...accessorDepthInfos.map(depthInfo => ({
+          previous: depthInfo.current,
+          current: depthInfo.current + offset
+        }))];
+      }, []).filter(depthInfo => depthInfo.current >= -1); // discard all depth infos which are out of bounds
+    } else {
+      // if the current accessor is not a special keyword, we know it's simply accessing a child
+      // hence we are now one level deeper in the tree and simply increment
+      accessorDepthInfos = accessorDepthInfos.map(depthInfo => ({
+        previous: depthInfo.current,
+        current: depthInfo.current + 1
+      }));
+    }
+
+    // finally, we check if for the current accessor, there is a scenario where:
+    // previous it was at depth -1 (i.e. the root context), and is now at depth 0 (i.e. a variable)
+    // these are the variables we need to request, so we add them to the set
+    if (accessorDepthInfos.some(depthInfo => depthInfo.previous === -1 && depthInfo.current === 0)) {
+      extractedVariables.add(currentAccessor);
+    }
+  }
+
+  // we return a set to avoid duplicates
+  return new Set(extractedVariables);
+};
+
+/**
+ * Deconstructs a path expression tree into an array of components.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @returns {Array<string>} An array of components in the path expression, in the correct order.
+ */
+const _deconstructPathExpression = root => {
+  let node = root;
+  let parts = [];
+
+  // Traverse the tree and collect path components
+  while (node.name === 'PathExpression') {
+    parts.push(node.children[1].variableName);
+    node = node.children[0];
+  }
+
+  // Add the last component to the array
+  parts.push(node.variableName);
+
+  // Reverse and return the array to get the correct order
+  return parts.reverse();
+};
+
+/**
+ * Builds a simplified feel structure tree from the given parse tree and feel string.
+ * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+ *
+ * @param {Object} parseTree - The parse tree generated by a parser.
+ * @param {string} feelString - The feel string used for parsing.
+ * @returns {Object} The simplified feel structure tree.
+ */
+const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
+  const stack = [{
+    children: []
+  }];
+  parseTree.iterate({
+    enter: node => {
+      const nodeRepresentation = {
+        name: node.type.name,
+        children: []
+      };
+      if (node.type.name === 'VariableName') {
+        nodeRepresentation.variableName = feelString.slice(node.from, node.to);
+      }
+      stack.push(nodeRepresentation);
+    },
+    leave: () => {
+      const result = stack.pop();
+      const parent = stack[stack.length - 1];
+      parent.children.push(result);
+    }
+  });
+  return stack[0].children[0];
+};
+
 class FeelExpressionLanguage {
   constructor(eventBus) {
     this._eventBus = eventBus;
   }
 
-  /**
-   * Determines if the given string is a FEEL expression.
-   *
-   * @param {string} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a FEEL expression.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isExpression(value) {
     return minDash.isString(value) && value.startsWith('=');
   }
 
-  /**
-   * Retrieve variable names from a given FEEL expression.
-   *
-   * @param {string} expression
-   * @param {object} [options]
-   * @param {string} [options.type]
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
    */
   getVariableNames(expression, options = {}) {
     const {
@@ -47,21 +196,19 @@ class FeelExpressionLanguage {
     if (!this.isExpression(expression)) {
       return [];
     }
-    if (type === 'unaryTest') {
-      return this._getUnaryVariableNames(expression);
-    } else if (type === 'expression') {
-      return this._getExpressionVariableNames(expression);
+    if (!['unaryTest', 'expression'].includes(type)) {
+      throw new Error('Unknown expression type: ' + type);
     }
-    throw new Error('Unknown expression type: ' + options.type);
+    return getFlavouredFeelVariableNames(expression, type);
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -80,50 +227,65 @@ class FeelExpressionLanguage {
       return null;
     }
   }
-  _getExpressionVariableNames(expression) {
-    const tree = feelin.parseExpressions(expression);
-    const cursor = tree.cursor();
-    const variables = new Set();
-    do {
-      const node = cursor.node;
-      if (node.type.name === 'VariableName') {
-        variables.add(expression.slice(node.from, node.to));
-      }
-    } while (cursor.next());
-    return Array.from(variables);
-  }
-  _getUnaryVariableNames(unaryTest) {
-    const tree = feelin.parseUnaryTests(unaryTest);
-    const cursor = tree.cursor();
-    const variables = new Set();
-    do {
-      const node = cursor.node;
-      if (node.type.name === 'VariableName') {
-        variables.add(unaryTest.slice(node.from, node.to));
-      }
-    } while (cursor.next());
-    return Array.from(variables);
-  }
 }
 FeelExpressionLanguage.$inject = ['eventBus'];
 
 class FeelersTemplating {
   constructor() {}
+
+  /**
+   * Determines if the given value is a feelers template.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
+   */
   isTemplate(value) {
-    return minDash.isString(value) && (value.startsWith('=') || /{{/.test(value));
+    return minDash.isString(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
   }
 
-  /**
-   * Evaluate a template.
-   *
-   * @param {string} template
-   * @param {Object<string, any>} context
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
-   * @returns
+  /**
+   * Retrieve variable names from a given feelers template.
+   *
+   * @param {string} template
+   *
+   * @returns {string[]}
+   */
+  getVariableNames(template) {
+    if (!this.isTemplate(template)) {
+      return [];
+    }
+    const expressions = this._extractExpressionsWithDepth(template);
+
+    // defines special accessors, and the change(s) in depth they could imply (e.g. parent can be used to access the parent context (depth - 1) or a child variable named parent (depth + 1)
+    const specialDepthAccessors = {
+      parent: [-1, 1],
+      _parent_: [-1],
+      this: [0, 1],
+      _this_: [0]
+    };
+    return expressions.reduce((variables, {
+      expression,
+      depth
+    }) => {
+      return variables.concat(getFlavouredFeelVariableNames(expression, 'expression', {
+        depth,
+        specialDepthAccessors
+      }));
+    }, []);
+  }
+
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
    */
   evaluate(template, context = {}, options = {}) {
     const {
@@ -137,12 +299,56 @@ class FeelersTemplating {
       buildDebugString
     });
   }
+
+  /**
+  * @typedef {Object} ExpressionWithDepth
+  * @property {number} depth - The depth of the expression in the syntax tree.
+  * @property {string} expression - The extracted expression
+  */
+
+  /**
+  * Extracts all feel expressions in the template along with their depth in the syntax tree.
+  * The depth is incremented for child expressions of loops to account for context drilling.
+  * @name extractExpressionsWithDepth
+  * @param {string} template - A feelers template string.
+  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+  *
+  * @example
+  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+  * const extractedExpressions = _extractExpressionsWithDepth(template);
+  */
+  _extractExpressionsWithDepth(template) {
+    // build simplified feelers syntax tree
+    const parseTree = feelers.parser.parse(template);
+    const tree = feelers.buildSimpleTree(parseTree, template);
+    return function _traverse(n, depth = 0) {
+      if (['Feel', 'FeelBlock'].includes(n.name)) {
+        return [{
+          depth,
+          expression: n.content
+        }];
+      }
+      if (n.name === 'LoopSpanner') {
+        const loopExpression = n.children[0].content;
+        const childResults = n.children.slice(1).reduce((acc, child) => {
+          return acc.concat(_traverse(child, depth + 1));
+        }, []);
+        return [{
+          depth,
+          expression: loopExpression
+        }, ...childResults];
+      }
+      return n.children.reduce((acc, child) => {
+        return acc.concat(_traverse(child, depth));
+      }, []);
+    }(tree);
+  }
 }
 FeelersTemplating.$inject = [];
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -151,11 +357,11 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
     const conditions = this._getConditions();
@@ -174,13 +380,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -201,12 +407,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -248,12 +454,12 @@ class MarkdownRenderer {
     this._converter = new showdown.Converter();
   }
 
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
    */
   render(markdown) {
     return this._converter.makeHtml(markdown);
@@ -842,23 +1048,23 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
-/**
- * @typedef { { id: String, components: Array<String> } } FormRow
- * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
 
-/**
- * Maintains the Form layout in a given structure, for example
- *
- *  [
- *    {
- *      formFieldId: 'FormField_1',
- *      rows: [
- *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
- *      ]
- *    }
- *  ]
- *
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
  */
 class FormLayouter {
   constructor(eventBus) {
@@ -868,8 +1074,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
 
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -883,18 +1089,18 @@ class FormLayouter {
     rowsPerComponent.rows.push(row);
   }
 
-  /**
-   * @param {String} id
-   * @returns {FormRow}
+  /**
+   * @param {String} id
+   * @returns {FormRow}
    */
   getRow(id) {
     const rows = allRows(this._rows);
     return rows.find(r => r.id === id);
   }
 
-  /**
-   * @param {any} formField
-   * @returns {FormRow}
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
    */
   getRowForField(formField) {
     return allRows(this._rows).find(r => {
@@ -905,9 +1111,9 @@ class FormLayouter {
     });
   }
 
-  /**
-   * @param {String} formFieldId
-   * @returns { Array<FormRow> }
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
    */
   getRows(formFieldId) {
     const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -917,15 +1123,15 @@ class FormLayouter {
     return rowsForField.rows;
   }
 
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
 
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
@@ -979,9 +1185,9 @@ function groupByRow(components, ids) {
   });
 }
 
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
  */
 function allRows(formRows) {
   return minDash.flatten(formRows.map(c => c.rows));
@@ -1058,10 +1264,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -1070,6 +1276,7 @@ function createFormContainer(prefix = 'fjs') {
 }
 
 const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+const TEMPLATE_PROPERTIES = ['text'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
 }
@@ -1106,24 +1313,24 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
-function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null)) {
+function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
   if (!schema.components) {
     return [];
   }
@@ -1158,6 +1365,13 @@ function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLangu
         variables = [...variables, ...expressionVariables];
       }
     });
+    TEMPLATE_PROPERTIES.forEach(prop => {
+      const property = component[prop];
+      if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
+        const templateVariables = templating.getVariableNames(property);
+        variables = [...variables, ...templateVariables];
+      }
+    });
     return variables;
   }, []);
 
@@ -1166,11 +1380,11 @@ function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLangu
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
-   * @param { import('../core').FormLayouter } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
+   * @param { import('../core').FormLayouter } formLayouter
    */
   constructor(formFieldRegistry, formFields, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1178,15 +1392,15 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -1207,11 +1421,11 @@ class Importer {
     }
   }
 
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
   importFormField(formField, parentId) {
     const {
@@ -1262,10 +1476,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1397,11 +1611,11 @@ const FormRenderContext = preact.createContext({
 });
 var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = preact.createContext({
@@ -1580,8 +1794,8 @@ function useService(type, strict) {
   return getService(type, strict);
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1589,17 +1803,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -1945,10 +2159,10 @@ Checklist.emptyValue = [];
 Checklist.sanitizeValue = sanitizeMultiSelectValue;
 Checklist.group = 'selection';
 
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
  */
 function useFilteredFormData() {
   const {
@@ -1965,12 +2179,12 @@ function useFilteredFormData() {
   }, [conditionChecker, data, initialData]);
 }
 
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
@@ -1980,13 +2194,13 @@ function useCondition(condition) {
   }, [conditionChecker, condition, filteredData]);
 }
 
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
  */
 function useExpressionEvaluation(value) {
   const formData = useFilteredFormData();
@@ -2015,16 +2229,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useTemplateEvaluation(value, options) {
   const filteredData = useFilteredFormData();
@@ -2775,10 +2989,10 @@ Datetime.sanitizeValue = sanitizeDateTimePickerValue;
 Datetime.label = 'Date time';
 Datetime.group = 'basic-input';
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxRuntime.jsxs("svg", {
@@ -2905,11 +3119,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 // see https://github.com/developit/snarkdown/issues/70
@@ -2927,29 +3141,29 @@ function sanitizeHTML(html) {
   }
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function sanitizeImageSource(src) {
   const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -2993,13 +3207,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -3720,6 +3934,12 @@ function Select(props) {
       errors,
       disabled
     }),
+    onKeyDown: event => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
       label: label,
@@ -3870,6 +4090,12 @@ function Taglist(props) {
       errors,
       disabled
     }),
+    onKeyDown: event => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
     children: [jsxRuntime.jsx(Label, {
       label: label,
       required: required,