@bpmn-io/form-js-viewer 1.24.0 → 1.25.0

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

@@ -285,7 +285,8 @@
 }
 
 .fjs-container .fjs-inline-label {
-  align-items: center;
+  /* keep the input next to the first line of a wrapping label */
+  align-items: flex-start;
   display: flex;
 }
 
@@ -390,6 +391,11 @@
   line-height: var(--line-height-input);
   letter-spacing: var(--letter-spacing-input);
   color: var(--color-text);
+
+  /* wrap long option labels instead of cutting them off */
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
 }
 
 .fjs-container .fjs-form-field-checklist .fjs-form-field-label:first-child,

package/dist/assets/form-js.css

@@ -269,7 +269,8 @@
 }
 
 .fjs-container .fjs-inline-label {
-  align-items: center;
+  /* keep the input next to the first line of a wrapping label */
+  align-items: flex-start;
   display: flex;
 }
 
@@ -350,6 +351,10 @@
   line-height: var(--line-height-input);
   letter-spacing: var(--letter-spacing-input);
   color: var(--color-text);
+  /* wrap long option labels instead of cutting them off */
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
 }
 
 .fjs-container .fjs-form-field-checklist .fjs-form-field-label:first-child,

package/dist/index.cjs

@@ -59,7 +59,26 @@ const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', o
       // 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];
+    if (depth === 0 && node.name === 'VariableName') return [_cleanupVariableName(node.variableName)];
+
+    // skip function names - the function name is the only direct VariableName child of a
+    // FunctionInvocation (arguments are nested under Positional/NamedParameters), so drop it
+    if (node.name === 'FunctionInvocation') {
+      const args = node.children.filter(child => child.name !== 'VariableName');
+      return args.reduce((acc, child) => acc.concat(_unfoldVariables(child)), []);
+    }
+
+    // skip type names in instance of expressions
+    if (node.name === 'Type') {
+      return [];
+    }
+
+    // handle quantified (some...satisfies) and for expressions - exclude bound iteration variables
+    if (node.name === 'QuantifiedExpression' || node.name === 'ForExpression') {
+      const boundNames = _collectBoundVariableNames(node);
+      const variables = node.children.reduce((acc, child) => acc.concat(_unfoldVariables(child)), []);
+      return variables.filter(name => !boundNames.includes(name));
+    }
 
     // for any other kind of node, traverse its children and flatten the result
     if (node.children) {
@@ -184,6 +203,9 @@ const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
       if (node.type.name === 'VariableName') {
         nodeRepresentation.variableName = feelString.slice(node.from, node.to);
       }
+      if (node.type.name === 'Name') {
+        nodeRepresentation.variableName = feelString.slice(node.from, node.to);
+      }
       stack.push(nodeRepresentation);
     },
     leave: () => {
@@ -233,6 +255,53 @@ const _extractFilterExpressions = tree => {
   return flattenedExpressionTree;
 };
 
+/**
+ * FEEL keywords that may be incorrectly absorbed into variable names by the parser.
+ * For example, `variable1 not in (...)` parses as VariableName "variable1 not".
+ */
+const FEEL_TRAILING_KEYWORDS = ['not'];
+
+/**
+ * Cleans up a variable name by stripping trailing FEEL keywords that the parser
+ * may have incorrectly included as part of the variable name.
+ *
+ * @param {string} variableName - The raw variable name from the parse tree.
+ * @returns {string} The cleaned variable name.
+ */
+const _cleanupVariableName = variableName => {
+  for (const keyword of FEEL_TRAILING_KEYWORDS) {
+    if (variableName.endsWith(' ' + keyword)) {
+      return variableName.slice(0, -(keyword.length + 1));
+    }
+  }
+  return variableName;
+};
+
+/**
+ * Collects the names of variables bound by iteration constructs (e.g. `for x in ...`, `some x in ...`).
+ * These are locally scoped and should be excluded from the extracted variable set.
+ *
+ * @param {Object} node - A QuantifiedExpression or ForExpression node.
+ * @returns {string[]} The bound variable names.
+ */
+const _collectBoundVariableNames = node => {
+  const boundNames = [];
+  const collect = n => {
+    if (n.name === 'InExpression') {
+      // The Name node inside an InExpression is the bound iteration variable
+      const nameNode = n.children.find(child => child.name === 'Name');
+      if (nameNode && nameNode.variableName) {
+        boundNames.push(nameNode.variableName);
+      }
+    }
+    if (n.children) {
+      n.children.forEach(collect);
+    }
+  };
+  collect(node);
+  return boundNames;
+};
+
 class FeelExpressionLanguage {
   constructor(eventBus) {
     this._eventBus = eventBus;
@@ -1891,10 +1960,13 @@ function Label(props) {
     class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
-    children: [props.children, evaluatedLabel, required && jsxRuntime.jsx("span", {
-      class: "fjs-asterix",
-      "aria-hidden": true,
-      children: "*"
+    children: [props.children, jsxRuntime.jsxs("span", {
+      class: "fjs-label-content",
+      children: [evaluatedLabel, required && jsxRuntime.jsx("span", {
+        class: "fjs-asterix",
+        "aria-hidden": true,
+        children: "*"
+      })]
     })]
   });
 }
@@ -6091,11 +6163,10 @@ function DocumentPreview(props) {
         if (!isValidDocumentEndpoint(finalEndpoint)) {
           return null;
         }
-        const requestInit = getDocumentRequestInit(documentEndpointBuilder, document);
         return jsxRuntime.jsx(DocumentRenderer, {
           documentMetadata: document,
+          documentEndpointBuilder: documentEndpointBuilder,
           endpoint: finalEndpoint,
-          requestInit: requestInit,
           maxHeight: maxHeight,
           domId: `${domId}-${index}`
         }, document.documentId);
@@ -6277,9 +6348,9 @@ function ImageRenderer(props) {
  *
  * @param {Object} props
  * @param {DocumentMetadata} props.documentMetadata
+ * @param {DocumentEndpointBuilder | null} props.documentEndpointBuilder
  * @param {string} props.endpoint
  * @param {string} props.domId
- * @param {RequestInit|undefined} props.requestInit
  * @param {number|undefined} props.maxHeight
  *
  * @returns {import("preact").JSX.Element}
@@ -6287,10 +6358,10 @@ function ImageRenderer(props) {
 function DocumentRenderer(props) {
   const {
     documentMetadata,
+    documentEndpointBuilder,
     endpoint,
     maxHeight,
-    domId,
-    requestInit
+    domId
   } = props;
   const {
     metadata
@@ -6298,6 +6369,8 @@ function DocumentRenderer(props) {
   const [hasError, setHasError] = hooks.useState(false);
   const ref = hooks.useRef(null);
   const isInViewport = useInViewport(ref);
+  const onError = hooks.useCallback(() => setHasError(true), []);
+  const requestInit = hooks.useMemo(() => getDocumentRequestInit(documentEndpointBuilder, documentMetadata), [documentEndpointBuilder, documentMetadata]);
   const singleDocumentContainerClassName = `fjs-${type}-single-document-container`;
   const errorMessageId = `${domId}-error-message`;
   const errorMessage = 'Unable to download document';
@@ -6313,14 +6386,12 @@ function DocumentRenderer(props) {
         url: endpoint,
         alt: metadata.fileName,
         requestInit: requestInit,
-        onError: () => setHasError(true)
+        onError: onError
       }), jsxRuntime.jsx(DownloadButton, {
         endpoint: endpoint,
         fileName: metadata.fileName,
         requestInit: requestInit,
-        onDownloadError: () => {
-          setHasError(true);
-        }
+        onDownloadError: onError
       }), hasError ? jsxRuntime.jsx(Errors, {
         id: errorMessageId,
         errors: [errorMessage]
@@ -6338,7 +6409,7 @@ function DocumentRenderer(props) {
         url: endpoint,
         fileName: metadata.fileName,
         requestInit: requestInit,
-        onError: () => setHasError(true),
+        onError: onError,
         errorMessageId: errorMessageId
       })
     });
@@ -6359,9 +6430,7 @@ function DocumentRenderer(props) {
       endpoint: endpoint,
       fileName: metadata.fileName,
       requestInit: requestInit,
-      onDownloadError: () => {
-        setHasError(true);
-      }
+      onDownloadError: onError
     })]
   });
 }