@bpmn-io/form-js-editor 1.7.3 → 1.8.1

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';
@@ -127,6 +127,8 @@ var slice = Array.prototype.slice;
  * var sum = eventBus.fire('sum', 1, 2);
  * console.log(sum); // 3
  * ```
+ *
+ * @template [EventMap=null]
  */
 function EventBus() {
   /**
@@ -140,6 +142,8 @@ function EventBus() {
 }
 
 /**
+ * @overlord
+ *
  * Register an event listener for events with the given name.
  *
  * The callback will be invoked with `event, ...additionalArguments`
@@ -158,6 +162,25 @@ function EventBus() {
  * @param {EventBusEventCallback<T>} callback
  * @param {any} [that] callback context
  */
+/**
+ * Register an event listener for events with the given name.
+ *
+ * The callback will be invoked with `event, ...additionalArguments`
+ * that have been passed to {@link EventBus#fire}.
+ *
+ * Returning false from a listener will prevent the events default action
+ * (if any is specified). To stop an event from being processed further in
+ * other listeners execute {@link Event#stopPropagation}.
+ *
+ * Returning anything but `undefined` from a listener will stop the listener propagation.
+ *
+ * @template {keyof EventMap} EventName
+ *
+ * @param {EventName} events to subscribe to
+ * @param {number} [priority=1000] listen priority
+ * @param {EventBusEventCallback<EventMap[EventName]>} callback
+ * @param {any} [that] callback context
+ */
 EventBus.prototype.on = function (events, priority, callback, that) {
   events = isArray(events) ? events : [events];
   if (isFunction(priority)) {
@@ -188,6 +211,8 @@ EventBus.prototype.on = function (events, priority, callback, that) {
 };
 
 /**
+ * @overlord
+ *
  * Register an event listener that is called only once.
  *
  * @template T
@@ -197,6 +222,16 @@ EventBus.prototype.on = function (events, priority, callback, that) {
  * @param {EventBusEventCallback<T>} callback
  * @param {any} [that] callback context
  */
+/**
+ * Register an event listener that is called only once.
+ *
+ * @template {keyof EventMap} EventName
+ *
+ * @param {EventName} events to subscribe to
+ * @param {number} [priority=1000] listen priority
+ * @param {EventBusEventCallback<EventMap[EventName]>} callback
+ * @param {any} [that] callback context
+ */
 EventBus.prototype.once = function (events, priority, callback, that) {
   var self = this;
   if (isFunction(priority)) {
@@ -1122,7 +1157,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 +1481,7 @@ function getIndefiniteArticle(type) {
 }
 
 const PALETTE_GROUPS = [{
-  label: 'Basic input',
+  label: 'Input',
   id: 'basic-input'
 }, {
   label: 'Selection',
@@ -2139,7 +2203,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 +2224,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 +2263,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);
@@ -2833,9 +2903,9 @@ EditorActions.prototype.unregister = function (action) {
 };
 
 /**
- * Returns the number of actions that are currently registered
+ * Returns the identifiers of all currently registered editor actions
  *
- * @return {number}
+ * @return {string[]}
  */
 EditorActions.prototype.getActions = function () {
   return Object.keys(this._actions);
@@ -3088,7 +3158,7 @@ Keyboard.prototype._isEventIgnored = function (event) {
   if (event.defaultPrevented) {
     return true;
   }
-  return isInput(event.target) && this._isModifiedKeyIgnored(event);
+  return (isInput(event.target) || isButton(event.target) && isKey([' ', 'Enter'], event)) && this._isModifiedKeyIgnored(event);
 };
 Keyboard.prototype._isModifiedKeyIgnored = function (event) {
   if (!isCmd(event)) {
@@ -3185,6 +3255,9 @@ Keyboard.prototype.isKey = isKey;
 function isInput(target) {
   return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
 }
+function isButton(target) {
+  return target && matches(target, 'button, input[type=submit], input[type=button], a[href], [aria-role=button]');
+}
 
 var LOW_PRIORITY$1 = 500;
 
@@ -5159,6 +5232,7 @@ class PaletteRenderer extends SectionModuleBase {
 PaletteRenderer.$inject = ['eventBus'];
 
 const PaletteModule = {
+  __init__: ['palette'],
   palette: ['type', PaletteRenderer]
 };
 
@@ -8954,7 +9028,7 @@ function useVariables() {
   return getSchemaVariables(schema);
 }
 
-const headerlessTypes = ['spacer', 'separator', 'html'];
+const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 const PropertiesPanelHeaderProvider = {
   getElementLabel: field => {
     const {
@@ -10773,6 +10847,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 +11884,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 +12519,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...NumberEntries({
     field,
     editField
+  }), ...ExpressionFieldEntries({
+    field,
+    editField
   }), ...ImageSourceEntry({
     field,
     editField