@bpmn-io/form-js-editor 1.4.0 → 1.5.0-alpha.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, 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, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, VALUES_SOURCES, VALUES_SOURCES_PATHS, 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, getValuesSource, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, isString, set as set$1, reduce, isUndefined, without, has } from 'min-dash';
@@ -1970,6 +1970,7 @@ 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'),
     selection = useService$1('selection');
   const {
@@ -2055,6 +2056,7 @@ function Element$1(props) {
       field: field
     }), jsx(ContextPad, {
       children: selection.isSelected(field) && field.type !== 'default' ? jsx("button", {
+        title: getRemoveButtonTitle(field, formFields),
         class: "fjs-context-pad-item",
         onClick: onRemove,
         children: jsx(DeleteIcon$1, {})
@@ -2375,6 +2377,13 @@ function findPaletteEntry(type, formFields) {
 function defaultPropertiesPanel(propertiesPanelConfig) {
   return !(propertiesPanelConfig && propertiesPanelConfig.parent);
 }
+function getRemoveButtonTitle(formField, formFields) {
+  const entry = findPaletteEntry(formField.type, formFields);
+  if (!entry) {
+    return 'Remove form field';
+  }
+  return `Remove ${entry.label}`;
+}
 
 class Renderer {
   constructor(renderConfig, eventBus, formEditor, injector) {
@@ -3291,11 +3300,13 @@ class MoveFormFieldHandler {
    * @param { import('../../../FormEditor').default } formEditor
    * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormLayouter } formLayouter
    */
-  constructor(formEditor, formFieldRegistry, pathRegistry) {
+  constructor(formEditor, formFieldRegistry, pathRegistry, formLayouter) {
     this._formEditor = formEditor;
     this._formFieldRegistry = formFieldRegistry;
     this._pathRegistry = pathRegistry;
+    this._formLayouter = formLayouter;
   }
   execute(context) {
     this.moveFormField(context);
@@ -3342,8 +3353,8 @@ class MoveFormFieldHandler {
       }
       const formField = get(schema, [...sourcePath, sourceIndex]);
 
-      // (1) Add to row
-      updateRow(formField, targetRow ? targetRow.id : null);
+      // (1) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (2) Move form field
       mutate(get(schema, sourcePath), sourceIndex, targetIndex);
@@ -3368,8 +3379,8 @@ class MoveFormFieldHandler {
       get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
       const targetPath = [...targetFormField._path, 'components'];
 
-      // (4) Add to row
-      updateRow(formField, targetRow ? targetRow.id : null);
+      // (4) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (5) Add form field
       arrayAdd$1(get(schema, targetPath), targetIndex, formField);
@@ -3392,7 +3403,7 @@ class MoveFormFieldHandler {
     });
   }
 }
-MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
+MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
 
 class RemoveFormFieldHandler {
   /**
@@ -3982,12 +3993,21 @@ class FormLayoutUpdater extends CommandInterceptor {
     const {
       schema
     } = this._formEditor._getState();
+    const setRowIds = parent => {
+      if (!parent.components || !parent.components.length) {
+        return;
+      }
+      parent.components.forEach(formField => {
+        const row = this._formLayouter.getRowForField(formField);
+        updateRow(formField, row.id);
+
+        // handle children recursively
+        setRowIds(formField);
+      });
+    };
 
     // make sure rows are persisted in schema (e.g. for migration case)
-    schema.components.forEach(formField => {
-      const row = this._formLayouter.getRowForField(formField);
-      updateRow(formField, row.id);
-    });
+    setRowIds(schema);
   }
 }
 FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
@@ -4124,12 +4144,61 @@ class ValidateBehavior extends CommandInterceptor {
 }
 ValidateBehavior.$inject = ['eventBus'];
 
+class ValuesSourceBehavior extends CommandInterceptor {
+  constructor(eventBus) {
+    super(eventBus);
+
+    /**
+     * Cleanup properties on changing the values source.
+     *
+     * 1) Remove other sources, e.g. set `values` => remove `valuesKey` and `valuesExpression`
+     * 2) Remove default values for all other values sources
+     */
+    this.preExecute('formField.edit', function (context) {
+      const {
+        properties
+      } = context;
+      const newProperties = {};
+      if (!isValuesSourceUpdate(properties)) {
+        return;
+      }
+
+      // clean up value sources that are not to going to be set
+      Object.values(VALUES_SOURCES).forEach(source => {
+        const path = VALUES_SOURCES_PATHS[source];
+        if (get(properties, path) == undefined) {
+          newProperties[VALUES_SOURCES_PATHS[source]] = undefined;
+        }
+      });
+
+      // clean up default value
+      if (get(properties, VALUES_SOURCES_PATHS[VALUES_SOURCES.EXPRESSION]) !== undefined || get(properties, VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT]) !== undefined) {
+        newProperties['defaultValue'] = undefined;
+      }
+      context.properties = {
+        ...properties,
+        ...newProperties
+      };
+    }, true);
+  }
+}
+ValuesSourceBehavior.$inject = ['eventBus'];
+
+// helper ///////////////////
+
+function isValuesSourceUpdate(properties) {
+  return Object.values(VALUES_SOURCES_PATHS).some(path => {
+    return get(properties, path) !== undefined;
+  });
+}
+
 var behaviorModule = {
-  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior'],
+  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior', 'valuesSourceBehavior'],
   idBehavior: ['type', IdBehavior],
   keyBehavior: ['type', KeyBehavior],
   pathBehavior: ['type', PathBehavior],
-  validateBehavior: ['type', ValidateBehavior]
+  validateBehavior: ['type', ValidateBehavior],
+  valuesSourceBehavior: ['type', ValuesSourceBehavior]
 };
 
 /**
@@ -4858,6 +4927,29 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var HelpIcon = function HelpIcon(props) {
+  return jsxs("svg", {
+    ...props,
+    children: [jsx("path", {
+      d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
+    }), jsx("circle", {
+      cx: "16",
+      cy: "23.5",
+      r: "1.5"
+    }), jsx("path", {
+      d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
+    }), jsx("path", {
+      style: {
+        fill: "none"
+      },
+      d: "M0 0h32v32H0z"
+    })]
+  });
+};
+HelpIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
 function Header(props) {
   const {
     element,
@@ -5407,6 +5499,7 @@ function Group(props) {
           edited: edited,
           hasErrors: hasErrors
         }), jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -5587,6 +5680,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
@@ -5707,6 +5801,7 @@ const CodeEditor = forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
@@ -5751,6 +5846,7 @@ function FeelIcon(props) {
     }
   };
   return jsx("button", {
+    type: "button",
     class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
@@ -6197,6 +6293,12 @@ function FeelPopupComponent(props) {
       domNode: popupRef.current
     });
   }, []);
+  useEffect(() => {
+    // Set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
   return jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
@@ -6215,10 +6317,21 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsx(Popup.Title, {
+    children: [jsxs(Popup.Title, {
       title: title,
       emit: emit,
-      draggable: true
+      draggable: true,
+      children: [type === 'feel' && jsxs("a", {
+        href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
+        target: "_blank",
+        class: "bio-properties-panel-feel-popup__title-link",
+        children: ["Learn FEEL expressions", jsx(HelpIcon, {})]
+      }), type === 'feelers' && jsxs("a", {
+        href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
+        target: "_blank",
+        class: "bio-properties-panel-feel-popup__title-link",
+        children: ["Learn templating", jsx(HelpIcon, {})]
+      })]
     }), jsx(Popup.Body, {
       children: jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -6250,6 +6363,7 @@ function FeelPopupComponent(props) {
       })
     }), jsx(Popup.Footer, {
       children: jsx("button", {
+        type: "button",
         onClick: onClose,
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
@@ -7491,12 +7605,14 @@ function CollapsibleEntry(props) {
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsx("button", {
+        type: "button",
         title: "Toggle list item",
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
         children: jsx(ArrowIcon, {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
       }), remove ? jsx("button", {
+        type: "button",
         title: "Delete item",
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
@@ -7698,6 +7814,7 @@ function ListGroup(props) {
       }), jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxs("button", {
+          type: "button",
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
@@ -7710,6 +7827,7 @@ function ListGroup(props) {
           class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -10412,11 +10530,7 @@ function ValuesSourceSelect(props) {
   const setValue = value => {
     let newField = field;
     const newProperties = {};
-    Object.values(VALUES_SOURCES).forEach(source => {
-      // Clear all values source definitions and default the newly selected one
-      const newValue = value === source ? VALUES_SOURCES_DEFAULTS[source] : undefined;
-      newProperties[VALUES_SOURCES_PATHS[source]] = newValue;
-    });
+    newProperties[VALUES_SOURCES_PATHS[value]] = VALUES_SOURCES_DEFAULTS[value];
     newField = editField(field, newProperties);
     return newField;
   };