@bpmn-io/form-js-editor 1.7.2 → 1.8.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import Ids from 'ids';
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, sortBy, find, set as set$1, reduce, without, isNil, has } from 'min-dash';
 import classnames from 'classnames';
@@ -1122,7 +1122,36 @@ function EditorTable(props) {
 }
 EditorTable.config = Table.config;
 
-const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable];
+const type = 'expression';
+function EditorExpressionField(props) {
+  const {
+    field
+  } = props;
+  const {
+    expression = ''
+  } = field;
+  const Icon = iconsByType('expression');
+  const expressionLanguage = useService$1('expressionLanguage');
+  let placeholderContent = 'Expression is empty';
+  if (expression.trim() && expressionLanguage.isExpression(expression)) {
+    placeholderContent = 'Expression';
+  }
+  return jsx("div", {
+    class: editorFormFieldClasses(type),
+    children: jsxs("div", {
+      class: "fjs-form-field-placeholder",
+      children: [jsx(Icon, {
+        viewBox: "0 0 54 54"
+      }), placeholderContent]
+    })
+  });
+}
+EditorExpressionField.config = {
+  ...ExpressionField.config,
+  escapeGridRender: false
+};
+
+const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
 
 class EditorFormFields extends FormFields {
   constructor() {
@@ -1417,7 +1446,7 @@ function getIndefiniteArticle(type) {
 }
 
 const PALETTE_GROUPS = [{
-  label: 'Basic input',
+  label: 'Input',
   id: 'basic-input'
 }, {
   label: 'Selection',
@@ -2139,7 +2168,6 @@ function Empty(props) {
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
-    formEditor = useService$1('formEditor'),
     formFieldRegistry = useService$1('formFieldRegistry'),
     formFields = useService$1('formFields'),
     modeling = useService$1('modeling'),
@@ -2161,18 +2189,24 @@ function Element$1(props) {
     function scrollIntoView({
       selection
     }) {
-      if (!selection || selection.id !== id || !ref.current) {
+      const scrollContainer = getScrollContainer(ref.current);
+      if (!selection || selection.type === 'default' || selection.id !== id || !scrollContainer || !ref.current) {
         return;
       }
-      const elementBounds = ref.current.getBoundingClientRect(),
-        containerBounds = formEditor._container.getBoundingClientRect();
-      if (elementBounds.top < 0 || elementBounds.top > containerBounds.bottom) {
-        ref.current.scrollIntoView();
+      const elementBounds = ref.current.getBoundingClientRect();
+      const scrollContainerBounds = scrollContainer.getBoundingClientRect();
+      const isElementLarger = elementBounds.height > scrollContainerBounds.height;
+      const isNotFullyVisible = elementBounds.bottom > scrollContainerBounds.bottom || elementBounds.top < scrollContainerBounds.top;
+      if (isNotFullyVisible && !isElementLarger) {
+        ref.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest'
+        });
       }
     }
     eventBus.on('selection.changed', scrollIntoView);
     return () => eventBus.off('selection.changed', scrollIntoView);
-  }, [eventBus, formEditor._container, id]);
+  }, [eventBus, id]);
   useLayoutEffect(() => {
     if (selection.isSelected(field)) {
       ref.current.focus();
@@ -2194,14 +2228,15 @@ function Element$1(props) {
     if (isSelected) {
       classes.push('fjs-editor-selected');
     }
-    if (showOutline) {
-      classes.push('fjs-outlined');
+    const grouplike = ['group', 'dynamiclist'].includes(type);
+    if (grouplike) {
+      classes.push(showOutline ? 'fjs-outlined' : 'fjs-dashed-outlined');
     }
     if (hovered) {
       classes.push('fjs-editor-hovered');
     }
     return classes.join(' ');
-  }, [hovered, isSelected, props.class, showOutline]);
+  }, [hovered, isSelected, props.class, showOutline, type]);
   const onRemove = event => {
     event.stopPropagation();
     const parentField = formFieldRegistry.get(field._parent);
@@ -5159,6 +5194,7 @@ class PaletteRenderer extends SectionModuleBase {
 PaletteRenderer.$inject = ['eventBus'];
 
 const PaletteModule = {
+  __init__: ['palette'],
   palette: ['type', PaletteRenderer]
 };
 
@@ -8954,7 +8990,7 @@ function useVariables() {
   return getSchemaVariables(schema);
 }
 
-const headerlessTypes = ['spacer', 'separator', 'html'];
+const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 const PropertiesPanelHeaderProvider = {
   getElementLabel: field => {
     const {
@@ -10773,6 +10809,83 @@ const validateNumberEntries = value => {
   }
 };
 
+function ExpressionFieldEntries(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const entries = [];
+  entries.push({
+    id: `${id}-expression`,
+    component: ExpressionFieldExpression,
+    isEdited: isEdited$6,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'expression'
+  });
+  entries.push({
+    id: `${id}-computeOn`,
+    component: ExpressionFieldComputeOn,
+    isEdited: isEdited$3,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'expression'
+  });
+  return entries;
+}
+function ExpressionFieldExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const getValue = () => field.expression || '';
+  const setValue = value => {
+    editField(field, ['expression'], value);
+  };
+  return FeelEntry({
+    debounce,
+    description: 'Define an expression to calculate the value of this field',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Target value',
+    setValue,
+    variables
+  });
+}
+function ExpressionFieldComputeOn(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const getValue = () => field.computeOn || '';
+  const setValue = value => {
+    editField(field, ['computeOn'], value);
+  };
+  const getOptions = () => [{
+    value: 'change',
+    label: 'Value changes'
+  }, {
+    value: 'presubmit',
+    label: 'Form submission'
+  }];
+  return SelectEntry({
+    id,
+    label: 'Compute on',
+    getValue,
+    setValue,
+    getOptions
+  });
+}
+
 function NumberSerializationEntry(props) {
   const {
     editField,
@@ -11733,14 +11846,22 @@ function Condition(props) {
       hide: value
     });
   };
+  let label = 'Hide if';
+  let description = 'Condition under which the field is hidden';
+
+  // special case for expression fields which do not render
+  if (field.type === 'expression') {
+    label = 'Deactivate if';
+    description = 'Condition under which the field is deactivated';
+  }
   return FeelEntry({
     debounce,
-    description: 'Condition under which the field is hidden',
+    description,
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Hide if',
+    label,
     setValue,
     variables
   });
@@ -12360,6 +12481,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...NumberEntries({
     field,
     editField
+  }), ...ExpressionFieldEntries({
+    field,
+    editField
   }), ...ImageSourceEntry({
     field,
     editField