@bpmn-io/form-js-playground 1.8.7 → 1.9.0

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/form-playground.umd.js

@@ -1224,41 +1224,6 @@
     return result;
   }
 
-  /**
-   * Sort collection by criteria.
-   *
-   * @template T
-   *
-   * @param {Collection<T>} collection
-   * @param {Extractor<T, number | string>} extractor
-   *
-   * @return {Array}
-   */
-  function sortBy(collection, extractor) {
-    extractor = toExtractor(extractor);
-    let sorted = [];
-    forEach(collection, function (value, key) {
-      let disc = extractor(value, key);
-      let entry = {
-        d: disc,
-        v: value
-      };
-      for (var idx = 0; idx < sorted.length; idx++) {
-        let {
-          d
-        } = sorted[idx];
-        if (disc < d) {
-          sorted.splice(idx, 0, entry);
-          return;
-        }
-      }
-
-      // not inserted, append (!)
-      sorted.push(entry);
-    });
-    return map(sorted, e => e.v);
-  }
-
   /**
    * @param {string | ((e: any) => any) } extractor
    *
@@ -57810,24 +57775,26 @@
   }
   var lint = linter$1(cmFeelersLinter());
 
-  /**
-   * Creates a Feelers editor in the supplied container.
-   *
-   * @param {Object} config Configuration options for the Feelers editor.
-   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
-   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
-   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
-   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
-   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
-   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
-   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
-   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
-   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
-   * @param {String} [config.value] Initial value of the editor.
-   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
-   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
-   *
-   * @returns {Object} editor An instance of the FeelersEditor class.
+  /**
+   * Creates a Feelers editor in the supplied container.
+   *
+   * @param {Object} config Configuration options for the Feelers editor.
+   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
+   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
+   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
+   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
+   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
+   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
+   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
+   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
+   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
+   * @param {String} [config.value] Initial value of the editor.
+   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
+   * @param {Boolean} [config.singleLine] Set to true to limit the editor to a single line.
+   * @param {Boolean} [config.lineWrap] Set to true to enable line wrapping.
+   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
+   *
+   * @returns {Object} editor An instance of the FeelersEditor class.
    */
   function FeelersEditor({
     container,
@@ -57842,6 +57809,7 @@
     value = '',
     enableGutters = false,
     singleLine = false,
+    lineWrap = false,
     darkMode = false
   }) {
     const changeHandler = EditorView.updateListener.of(update => {
@@ -57881,7 +57849,7 @@
     const feelersLanguageSupport = createFeelersLanguageSupport(hostLanguageParser || hostLanguage && _getHostLanguageParser(hostLanguage));
     const extensions = [bracketMatching(), changeHandler, contentAttributesExtension, closeBrackets(), indentOnInput(), keyHandler, keymap.of([...defaultKeymap]), feelersLanguageSupport, lint, lintHandler, tooltipLayout, darkMode ? darkTheme : lightTheme, ...(enableGutters ? [
     // todo: adjust folding boundaries first foldGutter(),
-    lineNumbers()] : []), ...(singleLine ? [EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)] : [])];
+    lineNumbers()] : []), ...(singleLine ? [EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)] : []), ...(lineWrap ? [EditorView.lineWrapping] : [])];
     if (readOnly) {
       extensions.push(EditorView.editable.of(false));
     }
@@ -57898,10 +57866,10 @@
     return this;
   }
 
-  /**
-   * Replaces the content of the Editor
-   *
-   * @param {String} value
+  /**
+   * Replaces the content of the Editor
+   *
+   * @param {String} value
    */
   FeelersEditor.prototype.setValue = function (value) {
     this._cmEditor.dispatch({
@@ -57913,8 +57881,8 @@
     });
   };
 
-  /**
-   * Sets the focus in the editor.
+  /**
+   * Sets the focus in the editor.
    */
   FeelersEditor.prototype.focus = function (position) {
     const cmEditor = this._cmEditor;
@@ -57933,12 +57901,12 @@
     }
   };
 
-  /**
-   * Returns the current selection ranges. If no text is selected, a single
-   * range with the start and end index at the cursor position will be returned.
-   *
-   * @returns {Object} selection
-   * @returns {Array} selection.ranges
+  /**
+   * Returns the current selection ranges. If no text is selected, a single
+   * range with the start and end index at the cursor position will be returned.
+   *
+   * @returns {Object} selection
+   * @returns {Array} selection.ranges
    */
   FeelersEditor.prototype.getSelection = function () {
     return this._cmEditor.state.selection;
@@ -60818,39 +60786,6 @@
     });
     return result;
   }
-  const type$h = 'button';
-  function Button(props) {
-    const {
-      disabled,
-      onFocus,
-      onBlur,
-      field
-    } = props;
-    const {
-      action = 'submit'
-    } = field;
-    return e("div", {
-      class: formFieldClasses(type$h),
-      children: e("button", {
-        class: "fjs-button",
-        type: action,
-        disabled: disabled,
-        onFocus: () => onFocus && onFocus(),
-        onBlur: () => onBlur && onBlur(),
-        children: field.label
-      })
-    });
-  }
-  Button.config = {
-    type: type$h,
-    keyed: false,
-    label: 'Button',
-    group: 'action',
-    create: (options = {}) => ({
-      action: 'submit',
-      ...options
-    })
-  };
   const FormRenderContext = D$2({
     Empty: props => {
       return null;
@@ -61886,6 +61821,42 @@
       }
     }, [field, options, onChange, memoizedValues, loadState]);
   }
+  const type$h = 'button';
+  function Button(props) {
+    const {
+      disabled,
+      onFocus,
+      onBlur,
+      field
+    } = props;
+    const {
+      action = 'submit'
+    } = field;
+    const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', {
+      debug: true
+    });
+    return e("div", {
+      class: formFieldClasses(type$h),
+      children: e("button", {
+        class: "fjs-button",
+        type: action,
+        disabled: disabled,
+        onFocus: () => onFocus && onFocus(),
+        onBlur: () => onBlur && onBlur(),
+        children: evaluatedLabel
+      })
+    });
+  }
+  Button.config = {
+    type: type$h,
+    keyed: false,
+    label: 'Button',
+    group: 'action',
+    create: (options = {}) => ({
+      action: 'submit',
+      ...options
+    })
+  };
   function Description$2(props) {
     const {
       description,
@@ -66243,7 +66214,7 @@
       return this._formFields[type];
     }
   }
-  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression'];
+  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression'];
   const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
   /**
@@ -67492,7 +67463,10 @@
     const localExpressionContextInfo = d(() => ({
       data: parentExpressionContextInfo.data,
       this: itemValue,
-      parent: buildExpressionContext(parentExpressionContextInfo),
+      parent: buildExpressionContext({
+        ...parentExpressionContextInfo,
+        data: parentExpressionContextInfo.this
+      }),
       i: [...parentExpressionContextInfo.i, itemIndex + 1]
     }), [itemIndex, parentExpressionContextInfo, itemValue]);
     return !showRemove ? e(LocalExpressionContext.Provider, {
@@ -68399,13 +68373,11 @@
         if (config.repeatable) {
           this._enforceDefaultPath(field);
         }
-        if (field.path) {
-          this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
-            isRepeatable: config.repeatable,
-            claimerId: field.id,
-            knownAncestorIds: getAncestryList(_parent, this._formFieldRegistry)
-          });
-        }
+        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
+          isRepeatable: config.repeatable,
+          claimerId: field.id,
+          knownAncestorIds: getAncestryList(_parent, this._formFieldRegistry)
+        });
       }
       return field;
     }
@@ -70715,12 +70687,7 @@
    */
   var variables = context => {
     const variables = context.state.facet(variablesFacet$1)[0];
-    const options = variables.map(v => ({
-      label: v.name,
-      type: 'variable',
-      info: v.info,
-      detail: v.detail
-    }));
+    const options = variables.map(v => createVariableSuggestion(v));
 
     // In most cases, use what is typed before the cursor
     let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
@@ -70747,6 +70714,54 @@
     }
     return result;
   };
+
+  /**
+   * @param {import('..').Variable} variable
+   * @returns {import('@codemirror/autocomplete').Completion}
+   */
+  function createVariableSuggestion(variable) {
+    if (variable.type === 'function') {
+      return createFunctionVariable(variable);
+    }
+    return {
+      label: variable.name,
+      type: 'variable',
+      info: variable.info,
+      detail: variable.detail
+    };
+  }
+
+  /**
+   * @param {import('..').Variable} variable
+   * @returns {import('@codemirror/autocomplete').Completion}
+   */
+  function createFunctionVariable(variable) {
+    const {
+      name,
+      info,
+      detail,
+      params = []
+    } = variable;
+    const paramsWithNames = params.map(({
+      name,
+      type
+    }, index) => ({
+      name: name || `param ${index + 1}`,
+      type
+    }));
+    const template = `${name}(${paramsWithNames.map(p => '${' + p.name + '}').join(', ')})`;
+    const paramsSignature = paramsWithNames.map(({
+      name,
+      type
+    }) => type ? `${name}: ${type}` : name).join(', ');
+    const label = `${name}(${paramsSignature})`;
+    return snippetCompletion(template, {
+      label,
+      type: 'function',
+      info,
+      detail
+    });
+  }
   function autocompletion() {
     return [autocompletion$1({
       override: [variables, builtins, completeFromList(snippets.map(s => ({
@@ -70846,15 +70861,17 @@
 
   /**
    * @typedef {object} Variable
-   * @typedef {import('@codemirror/state').Extension} Extension
    * @property {string} name name or key of the variable
    * @property {string} [info] short information about the variable, e.g. type
    * @property {string} [detail] longer description of the variable content
    * @property {boolean} [isList] whether the variable is a list
-   * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
+   * @property {Array<Variable>} [schema] array of child variables if the variable is a context or list
+   * @property {'function'|'variable'} [type] type of the variable
+   * @property {Array<{name: string, type: string}>} [params] function parameters
    */
 
   const autocompletionConf = new Compartment();
+  const placeholderConf = new Compartment();
 
   /**
    * Creates a FEEL editor in the supplied container
@@ -70880,6 +70897,7 @@
     onChange = () => {},
     onKeyDown = () => {},
     onLint = () => {},
+    placeholder: placeholder$1 = '',
     readOnly = false,
     value = '',
     variables = []
@@ -70908,7 +70926,7 @@
         return tooltipContainer.getBoundingClientRect();
       }
     }) : [];
-    const extensions = [autocompletionConf.of(variablesFacet$1.of(variables)), autocompletion(), bracketMatching(), changeHandler, closeBrackets(), EditorView.contentAttributes.of(contentAttributes), indentOnInput(), keyHandler, keymap.of([...defaultKeymap]), language(), linter, lintHandler, tooltipLayout, theme, ...editorExtensions];
+    const extensions = [autocompletionConf.of(variablesFacet$1.of(variables)), autocompletion(), bracketMatching(), changeHandler, closeBrackets(), EditorView.contentAttributes.of(contentAttributes), indentOnInput(), keyHandler, keymap.of([...defaultKeymap]), language(), linter, lintHandler, placeholderConf.of(placeholder(placeholder$1)), tooltipLayout, theme, ...editorExtensions];
     if (readOnly) {
       extensions.push(EditorView.editable.of(false));
     }
@@ -70979,6 +70997,17 @@
     });
   };
 
+  /**
+   * Update placeholder text.
+   * @param {string} placeholder
+   * @returns {void}
+   */
+  FeelEditor.prototype.setPlaceholder = function (placeholder$1) {
+    this._cmEditor.dispatch({
+      effects: placeholderConf.reconfigure(placeholder(placeholder$1))
+    });
+  };
+
   /*!
   * tabbable 6.2.0
   * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -78718,6 +78747,21 @@
     height: "16",
     viewBox: "0 0 32 32"
   };
+  var CloseIcon = function CloseIcon(props) {
+    return e("svg", {
+      ...props,
+      children: e("path", {
+        fillRule: "evenodd",
+        d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+        fill: "currentColor"
+      })
+    });
+  };
+  CloseIcon.defaultProps = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16"
+  };
   function Header(props) {
     const {
       element,
@@ -79418,7 +79462,8 @@
         tooltipContainer,
         enableGutters,
         hostLanguage,
-        singleLine
+        singleLine,
+        lineWrap: true
       });
       setEditor(editor);
       return () => {
@@ -79455,7 +79500,7 @@
         title: "Open pop-up editor",
         class: "bio-properties-panel-open-feel-popup",
         onClick: () => onPopupOpen('feelers'),
-        children: e(ExternalLinkIcon, {})
+        children: e(PopupIcon, {})
       })]
     });
   });
@@ -79495,6 +79540,7 @@
       onFeelToggle = noop$5,
       onLint = noop$5,
       onPopupOpen = noop$5,
+      placeholder,
       popupOpen,
       disabled,
       tooltipContainer,
@@ -79531,6 +79577,7 @@
         onChange: handleInput,
         onKeyDown: onKeyDown,
         onLint: onLint,
+        placeholder: placeholder,
         tooltipContainer: tooltipContainer,
         value: localValue,
         variables: variables,
@@ -79560,6 +79607,12 @@
       }
       editor.setVariables(variables);
     }, [variables]);
+    y(() => {
+      if (!editor) {
+        return;
+      }
+      editor.setPlaceholder(placeholder);
+    }, [placeholder]);
     const handleClick = () => {
       ref.current.focus();
     };
@@ -79812,6 +79865,9 @@
       draggable,
       emit = () => {},
       title,
+      showCloseButton = false,
+      closeButtonTooltip = 'Close popup',
+      onClose,
       ...rest
     } = props;
 
@@ -79882,7 +79938,12 @@
       }), e("div", {
         class: "bio-properties-panel-popup__title",
         children: title
-      }), children]
+      }), children, showCloseButton && e("button", {
+        title: closeButtonTooltip,
+        class: "bio-properties-panel-popup__close",
+        onClick: onClose,
+        children: e(CloseIcon, {})
+      })]
     });
   }
   function Body(props) {
@@ -80100,6 +80161,9 @@
       children: [e(Popup.Title, {
         title: title,
         emit: emit,
+        showCloseButton: true,
+        closeButtonTooltip: "Save and close",
+        onClose: onClose,
         draggable: true,
         children: [type === 'feel' && e("a", {
           href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
@@ -80141,14 +80205,6 @@
             tooltipContainer: tooltipContainer
           })]
         })
-      }), e(Popup.Footer, {
-        children: e("button", {
-          type: "button",
-          onClick: () => onClose(),
-          title: "Close pop-up editor",
-          class: "bio-properties-panel-feel-popup__close-btn",
-          children: "Close"
-        })
       })]
     });
   }
@@ -80458,6 +80514,7 @@
       hostLanguage,
       onInput,
       onError,
+      placeholder,
       feel,
       value = '',
       disabled = false,
@@ -80632,6 +80689,7 @@
           },
           onLint: handleLint,
           onPopupOpen: handlePopupOpen,
+          placeholder: placeholder,
           value: feelOnlyValue,
           variables: variables,
           ref: editorRef,
@@ -80660,7 +80718,8 @@
       onInput,
       value,
       onFocus,
-      onBlur
+      onBlur,
+      placeholder
     } = props;
     const inputRef = s$1();
 
@@ -80693,6 +80752,7 @@
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value || ''
     });
   });
@@ -80750,7 +80810,8 @@
       onInput,
       value,
       onFocus,
-      onBlur
+      onBlur,
+      placeholder
     } = props;
     const inputRef = s$1();
 
@@ -80778,6 +80839,7 @@
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value || '',
       "data-gramm": "false"
     });
@@ -80873,6 +80935,7 @@
    * @param {Function} props.variables
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {string} [props.placeholder]
    * @param {string|import('preact').Component} props.tooltip
    */
   function FeelEntry(props) {
@@ -80895,6 +80958,7 @@
       variables,
       onFocus,
       onBlur,
+      placeholder,
       tooltip
     } = props;
     const [validationError, setValidationError] = l$1(null);
@@ -80938,6 +81002,7 @@
         onError: onError,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         example: example,
         hostLanguage: hostLanguage,
         singleLine: singleLine,
@@ -81125,7 +81190,6 @@
    *    id: String,
    *    items: Array<ListItemDefinition>,
    *    label: String,
-   *    shouldSort?: Boolean,
    *    shouldOpen?: Boolean
    * } } ListGroupDefinition
    *
@@ -81453,6 +81517,7 @@
           } else if (isFunction$3(focusableInput.focus)) {
             focusableInput.focus();
           }
+          focusableInput.scrollIntoView();
         }
       }
     }, [autoOpen, autoFocusEntry]);
@@ -81476,97 +81541,61 @@
       id,
       items,
       label,
-      shouldOpen = true,
-      shouldSort = true
+      shouldOpen = true
     } = props;
+    y(() => {
+      if (props.shouldSort != undefined) {
+        console.warn('the property \'shouldSort\' is no longer supported');
+      }
+    }, [props.shouldSort]);
     const groupRef = s$1(null);
     const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
     const [sticky, setSticky] = l$1(false);
     const onShow = A$1(() => setOpen(true), [setOpen]);
-    const [ordering, setOrdering] = l$1([]);
-    const [newItemAdded, setNewItemAdded] = l$1(false);
+    const [localItems, setLocalItems] = l$1([]);
+    const [newlyAddedItemIds, setNewlyAddedItemIds] = l$1([]);
 
     // Flag to mark that add button was clicked in the last render cycle
     const [addTriggered, setAddTriggered] = l$1(false);
-    const prevItems = usePrevious(items);
     const prevElement = usePrevious(element);
     const elementChanged = element !== prevElement;
-    const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
+    const shouldHandleEffects = !elementChanged && shouldOpen;
 
-    // reset initial ordering when element changes (before first render)
-    if (elementChanged) {
-      setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
-    }
-
-    // keep ordering in sync to items - and open changes
-
-    // (0) set initial ordering from given items
+    // (0) delay setting items
+    //
+    // We need to this to align the render cycles of items
+    // with the detection of newly added items.
+    // This is important, because the autoOpen property can
+    // only set per list item on its very first render.
     y(() => {
-      if (!prevItems || !shouldSort) {
-        setOrdering(createOrdering(items));
-      }
-    }, [items, element]);
+      setLocalItems(items);
+    }, [items]);
 
-    // (1) items were added
+    // (1) handle auto opening when items were added
     y(() => {
       // reset addTriggered flag
       setAddTriggered(false);
-      if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
-        let add = [];
-        items.forEach(item => {
-          if (!ordering.includes(item.id)) {
-            add.push(item.id);
-          }
-        });
-        let newOrdering = ordering;
+      if (shouldHandleEffects && localItems) {
+        if (addTriggered) {
+          const previousItemIds = localItems.map(item => item.id);
+          const currentItemsIds = items.map(item => item.id);
+          const newItemIds = currentItemsIds.filter(itemId => !previousItemIds.includes(itemId));
 
-        // open if not open, configured and triggered by add button
-        //
-        // TODO(marstamm): remove once we refactor layout handling for listGroups.
-        // Ideally, opening should be handled as part of the `add` callback and
-        // not be a concern for the ListGroup component.
-        if (addTriggered && !open && shouldOpen) {
-          toggleOpen();
-        }
-
-        // filter when not open and configured
-        if (!open && shouldSort) {
-          newOrdering = createOrdering(sortItems(items));
-        }
-
-        // add new items on top or bottom depending on sorting behavior
-        newOrdering = newOrdering.filter(item => !add.includes(item));
-        if (shouldSort) {
-          newOrdering.unshift(...add);
+          // open if not open, configured and triggered by add button
+          //
+          // TODO(marstamm): remove once we refactor layout handling for listGroups.
+          // Ideally, opening should be handled as part of the `add` callback and
+          // not be a concern for the ListGroup component.
+          if (!open && shouldOpen && newItemIds.length > 0) {
+            toggleOpen();
+          }
+          setNewlyAddedItemIds(newItemIds);
         } else {
-          newOrdering.push(...add);
+          // ignore newly added items that do not result from a triggered add
+          setNewlyAddedItemIds([]);
         }
-        setOrdering(newOrdering);
-        setNewItemAdded(addTriggered);
-      } else {
-        setNewItemAdded(false);
       }
-    }, [items, open, shouldHandleEffects, addTriggered]);
-
-    // (2) sort items on open if shouldSort is set
-    y(() => {
-      if (shouldSort && open && !newItemAdded) {
-        setOrdering(createOrdering(sortItems(items)));
-      }
-    }, [open, shouldSort]);
-
-    // (3) items were deleted
-    y(() => {
-      if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
-        let keep = [];
-        ordering.forEach(o => {
-          if (getItem(items, o)) {
-            keep.push(o);
-          }
-        });
-        setOrdering(keep);
-      }
-    }, [items, shouldHandleEffects]);
+    }, [items, open, shouldHandleEffects, addTriggered, localItems]);
 
     // set css class when group is sticky to top
     useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
@@ -81638,8 +81667,7 @@
         class: classNames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
         children: e(LayoutContext.Provider, {
           value: propertiesPanelContext,
-          children: ordering.map((o, index) => {
-            const item = getItem(items, o);
+          children: localItems.map((item, index) => {
             if (!item) {
               return;
             }
@@ -81649,7 +81677,7 @@
 
             // if item was added, open it
             // Existing items will not be affected as autoOpen is only applied on first render
-            const autoOpen = newItemAdded;
+            const autoOpen = newlyAddedItemIds.includes(item.id);
             return v$1(ListItem, {
               ...item,
               autoOpen: autoOpen,
@@ -81662,21 +81690,6 @@
       })]
     });
   }
-
-  // helpers ////////////////////
-
-  /**
-   * Sorts given items alphanumeric by label
-   */
-  function sortItems(items) {
-    return sortBy(items, i => i.label.toLowerCase());
-  }
-  function getItem(items, id) {
-    return find$1(items, i => i.id === id);
-  }
-  function createOrdering(items) {
-    return items.map(i => i.id);
-  }
   function Checkbox(props) {
     const {
       id,
@@ -81963,6 +81976,7 @@
       onFocus,
       onBlur,
       autoResize,
+      placeholder,
       rows = autoResize ? 1 : 2,
       tooltip
     } = props;
@@ -82005,6 +82019,7 @@
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         rows: rows,
         value: localValue,
         disabled: disabled,
@@ -82044,6 +82059,7 @@
       validate,
       onFocus,
       onBlur,
+      placeholder,
       autoResize,
       tooltip
     } = props;
@@ -82079,6 +82095,7 @@
         debounce: debounce,
         monospace: monospace,
         disabled: disabled,
+        placeholder: placeholder,
         autoResize: autoResize,
         tooltip: tooltip,
         element: element
@@ -82110,6 +82127,7 @@
       onInput,
       onFocus,
       onBlur,
+      placeholder,
       value = '',
       tooltip
     } = props;
@@ -82151,6 +82169,7 @@
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         value: localValue
       })]
     });
@@ -82184,6 +82203,7 @@
       validate,
       onFocus,
       onBlur,
+      placeholder,
       tooltip
     } = props;
     const globalError = useError(id);
@@ -82215,6 +82235,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         value: value,
         tooltip: tooltip,
         element: element
@@ -82361,81 +82382,63 @@
   function hasIntegerPathSegment(path) {
     return path.split('.').some(segment => /^\d+$/.test(segment));
   }
-  function useService(type, strict) {
+  const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
+  function getPropertiesPanelHeaderProvider(options = {}) {
     const {
-      getService
-    } = F$1(FormPropertiesPanelContext);
-    return getService(type, strict);
-  }
-
-  /**
-   * Retrieve list of variables from the form schema.
-   *
-   * @returns { string[] } list of variables used in form schema
-   */
-  function useVariables() {
-    const form = useService('formEditor');
-    const schema = form.getSchema();
-    return getSchemaVariables(schema);
+      getDocumentationRef,
+      formFields
+    } = options;
+    return {
+      getElementLabel: field => {
+        const {
+          type
+        } = field;
+        if (headerlessTypes.includes(type)) {
+          return '';
+        }
+        if (type === 'text') {
+          return textToLabel(field.text);
+        }
+        if (type === 'image') {
+          return field.alt;
+        }
+        if (type === 'default') {
+          return field.id;
+        }
+        return field.label;
+      },
+      getElementIcon: field => {
+        const {
+          type
+        } = field;
+        const fieldDefinition = formFields.get(type).config;
+        const Icon = fieldDefinition.icon || iconsByType(type);
+        if (Icon) {
+          return () => e(Icon, {
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          });
+        } else if (fieldDefinition.iconUrl) {
+          return getPaletteIcon({
+            iconUrl: fieldDefinition.iconUrl,
+            label: fieldDefinition.label
+          });
+        }
+      },
+      getTypeLabel: field => {
+        const {
+          type
+        } = field;
+        if (type === 'default') {
+          return 'Form';
+        }
+        const fieldDefinition = formFields.get(type).config;
+        return fieldDefinition.label || type;
+      },
+      getDocumentationRef
+    };
   }
-  const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
-  const PropertiesPanelHeaderProvider = {
-    getElementLabel: field => {
-      const {
-        type
-      } = field;
-      if (headerlessTypes.includes(type)) {
-        return '';
-      }
-      if (type === 'text') {
-        return textToLabel(field.text);
-      }
-      if (type === 'image') {
-        return field.alt;
-      }
-      if (type === 'default') {
-        return field.id;
-      }
-      return field.label;
-    },
-    getElementIcon: field => {
-      const {
-        type
-      } = field;
-
-      // @Note: We know that we are inside the properties panel context,
-      // so we can savely use the hook here.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const fieldDefinition = useService('formFields').get(type).config;
-      const Icon = fieldDefinition.icon || iconsByType(type);
-      if (Icon) {
-        return () => e(Icon, {
-          width: "36",
-          height: "36",
-          viewBox: "0 0 54 54"
-        });
-      } else if (fieldDefinition.iconUrl) {
-        return getPaletteIcon({
-          iconUrl: fieldDefinition.iconUrl,
-          label: fieldDefinition.label
-        });
-      }
-    },
-    getTypeLabel: field => {
-      const {
-        type
-      } = field;
-      if (type === 'default') {
-        return 'Form';
-      }
-
-      // @Note: We know that we are inside the properties panel context,
-      // so we can savely use the hook here.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const fieldDefinition = useService('formFields').get(type).config;
-      return fieldDefinition.label || type;
-    }
-  };
 
   /**
    * Provide placeholders for empty and multiple state.
@@ -82452,6 +82455,7 @@
       };
     }
   };
+  const EMPTY = {};
   function PropertiesPanel(props) {
     const {
       eventBus,
@@ -82461,7 +82465,7 @@
     const formEditor = injector.get('formEditor');
     const modeling = injector.get('modeling');
     const selectionModule = injector.get('selection');
-    const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+    const propertiesPanelConfig = injector.get('config.propertiesPanel') || EMPTY;
     const {
       feelPopupContainer
     } = propertiesPanelConfig;
@@ -82515,6 +82519,11 @@
         return updater(groups);
       }, []);
     }, [providers, selectedFormField, editField]);
+    const formFields = getService('formFields');
+    const PropertiesPanelHeaderProvider = d(() => getPropertiesPanelHeaderProvider({
+      getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
+      formFields
+    }), [formFields, propertiesPanelConfig]);
     return e("div", {
       class: "fjs-properties-panel",
       "data-field": selectedFormField && selectedFormField.id,
@@ -82685,6 +82694,23 @@
       setValue
     });
   }
+  function useService(type, strict) {
+    const {
+      getService
+    } = F$1(FormPropertiesPanelContext);
+    return getService(type, strict);
+  }
+
+  /**
+   * Retrieve list of variables from the form schema.
+   *
+   * @returns { string[] } list of variables used in form schema
+   */
+  function useVariables() {
+    const form = useService('formEditor');
+    const schema = form.getSchema();
+    return getSchemaVariables(schema);
+  }
   function AltTextEntry(props) {
     const {
       editField,
@@ -84940,8 +84966,7 @@
     });
     return {
       items,
-      add: addEntry,
-      shouldSort: false
+      add: addEntry
     };
   }
 
@@ -85772,8 +85797,7 @@
     });
     return {
       items,
-      add: addEntry,
-      shouldSort: false
+      add: addEntry
     };
   }
   function GeneralGroup(field, editField, getService) {
@@ -86269,8 +86293,7 @@
       id: 'custom-values',
       items,
       label: 'Custom properties',
-      tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.',
-      shouldSort: false
+      tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.'
     };
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -45,8 +45,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^1.8.7",
-    "@bpmn-io/form-js-viewer": "^1.8.7",
+    "@bpmn-io/form-js-editor": "^1.9.0",
+    "@bpmn-io/form-js-viewer": "^1.8.8",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/commands": "^6.5.0",
     "@codemirror/lang-json": "^6.0.1",
@@ -71,5 +71,5 @@
     "rollup-plugin-css-only": "^4.5.2",
     "style-loader": "^4.0.0"
   },
-  "gitHead": "aaaaf358018b2410011613345a5e254fccdea891"
+  "gitHead": "12f4d5ecd109d90e9203006097918daed1199d91"
 }