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

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

@@ -216,6 +216,17 @@
   display: none;
 }
 
+.fjs-no-json-lint .cm-activeLine,
+.fjs-no-json-lint .cm-activeLineGutter {
+  background: none;
+}
+
+.fjs-no-json-lint .cm-placeholder {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;

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

@@ -194,6 +194,17 @@
   display: none;
 }
 
+.fjs-no-json-lint .cm-activeLine,
+.fjs-no-json-lint .cm-activeLineGutter {
+  background: none;
+}
+
+.fjs-no-json-lint .cm-placeholder {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
+}
+
 .fjs-editor-container .fjs-form-editor {
   display: flex;
   flex: 1;
@@ -2052,6 +2063,8 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
@@ -2059,11 +2072,12 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -2091,7 +2105,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -2122,6 +2136,18 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto;
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;

package/dist/assets/properties-panel.css

@@ -1271,6 +1271,8 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
@@ -1278,11 +1280,12 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -1310,7 +1313,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -1341,6 +1344,18 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto; 
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;

package/dist/index.cjs

@@ -1990,6 +1990,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 {
@@ -2075,6 +2076,7 @@ function Element$1(props) {
       field: field
     }), jsxRuntime.jsx(ContextPad, {
       children: selection.isSelected(field) && field.type !== 'default' ? jsxRuntime.jsx("button", {
+        title: getRemoveButtonTitle(field, formFields),
         class: "fjs-context-pad-item",
         onClick: onRemove,
         children: jsxRuntime.jsx(DeleteIcon$1, {})
@@ -2395,6 +2397,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) {
@@ -3311,11 +3320,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);
@@ -3362,8 +3373,8 @@ class MoveFormFieldHandler {
       }
       const formField = minDash.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
       arrayMove.mutate(minDash.get(schema, sourcePath), sourceIndex, targetIndex);
@@ -3388,8 +3399,8 @@ class MoveFormFieldHandler {
       minDash.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(minDash.get(schema, targetPath), targetIndex, formField);
@@ -3412,7 +3423,7 @@ class MoveFormFieldHandler {
     });
   }
 }
-MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
+MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
 
 class RemoveFormFieldHandler {
   /**
@@ -4002,12 +4013,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'];
@@ -4144,12 +4164,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(formJsViewer.VALUES_SOURCES).forEach(source => {
+        const path = formJsViewer.VALUES_SOURCES_PATHS[source];
+        if (minDash.get(properties, path) == undefined) {
+          newProperties[formJsViewer.VALUES_SOURCES_PATHS[source]] = undefined;
+        }
+      });
+
+      // clean up default value
+      if (minDash.get(properties, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.EXPRESSION]) !== undefined || minDash.get(properties, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT]) !== undefined) {
+        newProperties['defaultValue'] = undefined;
+      }
+      context.properties = {
+        ...properties,
+        ...newProperties
+      };
+    }, true);
+  }
+}
+ValuesSourceBehavior.$inject = ['eventBus'];
+
+// helper ///////////////////
+
+function isValuesSourceUpdate(properties) {
+  return Object.values(formJsViewer.VALUES_SOURCES_PATHS).some(path => {
+    return minDash.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]
 };
 
 /**
@@ -4878,6 +4947,29 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var HelpIcon = function HelpIcon(props) {
+  return jsxRuntime.jsxs("svg", {
+    ...props,
+    children: [jsxRuntime.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"
+    }), jsxRuntime.jsx("circle", {
+      cx: "16",
+      cy: "23.5",
+      r: "1.5"
+    }), jsxRuntime.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"
+    }), jsxRuntime.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,
@@ -5427,6 +5519,7 @@ function Group(props) {
           edited: edited,
           hasErrors: hasErrors
         }), jsxRuntime.jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -5607,6 +5700,7 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
@@ -5727,6 +5821,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
@@ -5771,6 +5866,7 @@ function FeelIcon(props) {
     }
   };
   return jsxRuntime.jsx("button", {
+    type: "button",
     class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
@@ -6217,6 +6313,12 @@ function FeelPopupComponent(props) {
       domNode: popupRef.current
     });
   }, []);
+  hooks.useEffect(() => {
+    // Set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
   return jsxRuntime.jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
@@ -6235,10 +6337,21 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxRuntime.jsx(Popup.Title, {
+    children: [jsxRuntime.jsxs(Popup.Title, {
       title: title,
       emit: emit,
-      draggable: true
+      draggable: true,
+      children: [type === 'feel' && jsxRuntime.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", jsxRuntime.jsx(HelpIcon, {})]
+      }), type === 'feelers' && jsxRuntime.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", jsxRuntime.jsx(HelpIcon, {})]
+      })]
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -6270,6 +6383,7 @@ function FeelPopupComponent(props) {
       })
     }), jsxRuntime.jsx(Popup.Footer, {
       children: jsxRuntime.jsx("button", {
+        type: "button",
         onClick: onClose,
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
@@ -7511,12 +7625,14 @@ function CollapsibleEntry(props) {
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
+        type: "button",
         title: "Toggle list item",
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
         children: jsxRuntime.jsx(ArrowIcon, {
           class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
         })
       }), remove ? jsxRuntime.jsx("button", {
+        type: "button",
         title: "Delete item",
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
@@ -7718,6 +7834,7 @@ function ListGroup(props) {
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxRuntime.jsxs("button", {
+          type: "button",
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
@@ -7730,6 +7847,7 @@ function ListGroup(props) {
           class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsxRuntime.jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -10432,11 +10550,7 @@ function ValuesSourceSelect(props) {
   const setValue = value => {
     let newField = field;
     const newProperties = {};
-    Object.values(formJsViewer.VALUES_SOURCES).forEach(source => {
-      // Clear all values source definitions and default the newly selected one
-      const newValue = value === source ? formJsViewer.VALUES_SOURCES_DEFAULTS[source] : undefined;
-      newProperties[formJsViewer.VALUES_SOURCES_PATHS[source]] = newValue;
-    });
+    newProperties[formJsViewer.VALUES_SOURCES_PATHS[value]] = formJsViewer.VALUES_SOURCES_DEFAULTS[value];
     newField = editField(field, newProperties);
     return newField;
   };