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

package/dist/assets/form-js-base.css

@@ -93,10 +93,9 @@
 }
 
 .fjs-container .fjs-layout-row {
-  width: 100%;
+  flex: auto;
   padding: 9px 0;
   position: relative;
-  margin-left: 1px;
 }
 
 .fjs-container .fjs-column {
@@ -114,6 +113,8 @@
 
 .fjs-container .cds--grid .cds--row {
   align-items: start;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 @media (max-width: 66rem) {
@@ -134,6 +135,7 @@
   color: var(--color-text);
   background-color: var(--color-background);
   position: relative;
+  padding: 0 4px;
 }
 
 .fjs-container .fjs-form * {
@@ -270,7 +272,6 @@
   padding: 8px;
   width: auto !important;
   min-width: 34px;
-  max-width: 30%;
   display: flex;
   overflow: hidden;
 }
@@ -352,6 +353,7 @@
 .fjs-container .fjs-input-group .fjs-taglist,
 .fjs-container .fjs-input-group .fjs-select {
   height: unset;
+  min-width: min(60px, 50%);
   width: 100%;
 }
 
@@ -540,6 +542,7 @@
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
+.fjs-container .fjs-form-field.fjs-has-errors .fjs-taglist,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
   border-color: var(--color-warning);

package/dist/assets/form-js.css

@@ -81,10 +81,9 @@
 }
 
 .fjs-container .fjs-layout-row {
-  width: 100%;
+  flex: auto;
   padding: 9px 0;
   position: relative;
-  margin-left: 1px;
 }
 
 .fjs-container .fjs-column {
@@ -102,6 +101,8 @@
 
 .fjs-container .cds--grid .cds--row {
   align-items: start;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 @media (max-width: 66rem) {
@@ -121,6 +122,7 @@
   color: var(--color-text);
   background-color: var(--color-background);
   position: relative;
+  padding: 0 4px;
 }
 
 .fjs-container .fjs-form * {
@@ -257,7 +259,6 @@
   padding: 8px;
   width: auto !important;
   min-width: 34px;
-  max-width: 30%;
   display: flex;
   overflow: hidden;
 }
@@ -337,6 +338,7 @@
 .fjs-container .fjs-input-group .fjs-taglist,
 .fjs-container .fjs-input-group .fjs-select {
   height: unset;
+  min-width: min(60px, 50%);
   width: 100%;
 }
 
@@ -523,6 +525,7 @@
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
+.fjs-container .fjs-form-field.fjs-has-errors .fjs-taglist,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
 .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
   border-color: var(--color-warning);

package/dist/index.cjs

@@ -15,15 +15,164 @@ 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.
+   * Determines if the given value is a FEEL expression.
    *
-   * @param {string} value
+   * @param {any} value
    * @returns {boolean}
    *
    */
@@ -47,12 +196,10 @@ 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);
   }
 
   /**
@@ -80,37 +227,52 @@ 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));
+  }
+
+  /**
+   * 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
+      }));
+    }, []);
   }
 
   /**
@@ -137,6 +299,50 @@ 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 = [];
 
@@ -762,8 +968,13 @@ class Validator {
     if (validate.pattern && value && !new RegExp(validate.pattern).test(value)) {
       errors = [...errors, `Field must match pattern ${validate.pattern}.`];
     }
-    if (validate.required && (minDash.isNil(value) || value === '')) {
-      errors = [...errors, 'Field is required.'];
+    if (validate.required) {
+      const isUncheckedCheckbox = type === 'checkbox' && value === false;
+      const isUnsetValue = minDash.isNil(value) || value === '';
+      const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
+      if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
+        errors = [...errors, 'Field is required.'];
+      }
     }
     if ('min' in validate && (value || value === 0) && value < validate.min) {
       errors = [...errors, `Field must have minimum value of ${validate.min}.`];
@@ -1065,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)];
 }
@@ -1118,7 +1330,7 @@ function clone(data, replacer) {
  *
  * @return {string[]}
  */
-function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null)) {
+function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
   if (!schema.components) {
     return [];
   }
@@ -1153,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;
   }, []);
 
@@ -1467,8 +1686,12 @@ function Checkbox(props) {
   const {
     description,
     id,
-    label
+    label,
+    validate = {}
   } = field;
+  const {
+    required
+  } = validate;
   const onChange = ({
     target
   }) => {
@@ -1490,7 +1713,7 @@ function Checkbox(props) {
     children: [jsxRuntime.jsx(Label, {
       id: prefixId(id, formId),
       label: label,
-      required: false,
+      required: required,
       children: jsxRuntime.jsx("input", {
         checked: value,
         class: "fjs-input",
@@ -1857,8 +2080,12 @@ function Checklist(props) {
   const {
     description,
     id,
-    label
+    label,
+    validate = {}
   } = field;
+  const {
+    required
+  } = validate;
   const toggleCheckbox = v => {
     let newValue = [...value];
     if (!newValue.includes(v)) {
@@ -1884,7 +2111,8 @@ function Checklist(props) {
       disabled
     })),
     children: [jsxRuntime.jsx(Label, {
-      label: label
+      label: label,
+      required: required
     }), loadState == LOAD_STATES.LOADED && options.map((v, index) => {
       return jsxRuntime.jsx(Label, {
         id: prefixId(`${id}-${index}`, formId),
@@ -3706,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,
@@ -3754,8 +3988,12 @@ function Taglist(props) {
   const {
     description,
     id,
-    label
+    label,
+    validate = {}
   } = field;
+  const {
+    required
+  } = validate;
   const {
     formId
   } = hooks.useContext(FormContext$1);
@@ -3852,8 +4090,15 @@ function Taglist(props) {
       errors,
       disabled
     }),
+    onKeyDown: event => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
     children: [jsxRuntime.jsx(Label, {
       label: label,
+      required: required,
       id: prefixId(`${id}-search`, formId)
     }), jsxRuntime.jsxs("div", {
       class: classNames('fjs-taglist', {