@bpmn-io/form-js-editor 1.8.6 → 1.8.8

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import Ids from 'ids';
 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 { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, set as set$1, reduce, without, isNil, has } from 'min-dash';
 import classnames from 'classnames';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from 'preact/hooks';
@@ -866,11 +866,10 @@ var SvgClose = function SvgClose(props) {
     fill: "currentColor"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("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",
+    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 8z",
     clipRule: "evenodd"
   })));
 };
-var CloseIcon = SvgClose;
 
 var _path$4, _path2$1;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -898,13 +897,12 @@ var SvgDelete = function SvgDelete(props) {
     transform: "translate(.536)"
   }), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
-    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+    d: "M7.536 6h-1v6h1zm3 0h-1v6h1z"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentcolor",
-    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
+    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3zm2 11V4h8v10zm6-13h-4v1h4z"
   })));
 };
-var DeleteIcon$1 = SvgDelete;
 
 var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
@@ -925,7 +923,6 @@ var SvgDraggable = function SvgDraggable(props) {
     }
   }));
 };
-var DraggableIcon = SvgDraggable;
 
 var _path$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
@@ -937,10 +934,9 @@ var SvgSearch = function SvgSearch(props) {
     fill: "none"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
-    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
+    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776zM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0"
   })));
 };
-var SearchIcon = SvgSearch;
 
 var _path$1, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -953,7 +949,7 @@ var SvgEmptyForm = function SvgEmptyForm(props) {
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "#FF832B",
     fillRule: "evenodd",
-    d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6h5Zm0-16h-5V46h5v16Zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3v8ZM43 19v5H27v-5h16Zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3h8ZM0 46h5v16H0V46Zm0 32h5v6h6v5H3a3 3 0 0 1-3-3v-8Zm27 11v-5h16v5H27Z",
+    d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6zm0-16h-5V46h5zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3zM43 19v5H27v-5zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3zM0 46h5v16H0zm0 32h5v6h6v5H3a3 3 0 0 1-3-3zm27 11v-5h16v5z",
     clipRule: "evenodd"
   })), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
     width: 70,
@@ -966,16 +962,16 @@ var SvgEmptyForm = function SvgEmptyForm(props) {
     fill: "#fff"
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556z",
     clipRule: "evenodd"
   }))), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
     fill: "#393939",
     fillRule: "evenodd",
-    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556z",
     clipRule: "evenodd"
   })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
     fill: "#393939",
-    d: "M75.43 45.185 70.6 46.48l-2.241-8.365 8.365 2.242-1.294 4.83Zm11.655 43.499 4.037 2.95-6.163 8.432-2.704-10.088 4.83-1.294Zm31.844-31.843 1.294-4.83 10.088 2.703-8.432 6.163-2.95-4.036Zm-11.044 8.072-3.535 3.535-4.128-4.127 4.713-3.445 2.95 4.037Zm8.557 8.556 3.535-3.535 3.536 3.535-3.536 3.536-3.535-3.536Zm-12.728 12.728 3.536 3.536-3.536 3.535-3.536-3.535 3.536-3.536Zm-8.557-8.556-4.036-2.951 3.444-4.713 4.128 4.128-3.536 3.535ZM80.26 43.89 91.915 87.39l-9.66 2.588L70.6 46.48l9.66-2.588Zm37.375 17.78L74.136 50.014l2.588-9.66 43.499 11.656-2.589 9.66Zm-12.699-.795 11.043-8.072 5.901 8.073-11.043 8.072-5.901-8.073Zm7.971 16.129-8.556-8.557 7.071-7.07 8.556 8.556-7.071 7.07Zm-12.728 5.657 12.728-12.728 7.071 7.07-12.727 12.729-7.072-7.071Zm-1.485-8.557 8.557 8.557-7.072 7.07-8.556-8.556 7.07-7.071ZM83.049 85.733 91.12 74.69l8.073 5.901-8.072 11.044-8.073-5.902Z",
+    d: "M75.43 45.185 70.6 46.48l-2.241-8.365 8.365 2.242zm11.655 43.499 4.037 2.95-6.163 8.432-2.704-10.088zm31.844-31.843 1.294-4.83 10.088 2.703-8.432 6.163zm-11.044 8.072-3.535 3.535-4.128-4.127 4.713-3.445zm8.557 8.556 3.535-3.535 3.536 3.535-3.536 3.536zm-12.728 12.728 3.536 3.536-3.536 3.535-3.536-3.535zm-8.557-8.556-4.036-2.951 3.444-4.713 4.128 4.128zM80.26 43.89 91.915 87.39l-9.66 2.588L70.6 46.48zm37.375 17.78L74.136 50.014l2.588-9.66 43.499 11.656zm-12.699-.795 11.043-8.072 5.901 8.073-11.043 8.072zm7.971 16.129-8.556-8.557 7.071-7.07 8.556 8.556zm-12.728 5.657 12.728-12.728 7.071 7.07-12.727 12.729zm-1.485-8.557 8.557 8.557-7.072 7.07-8.556-8.556zM83.049 85.733 91.12 74.69l8.073 5.901-8.072 11.044z",
     mask: "url(#EmptyForm_svg__a)"
   })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
     stroke: "#000",
@@ -995,7 +991,6 @@ var SvgEmptyForm = function SvgEmptyForm(props) {
     d: "M78.969 36.367v-8"
   })));
 };
-var EmptyFormIcon = SvgEmptyForm;
 
 function EditorText(props) {
   const {
@@ -1538,7 +1533,7 @@ function Palette(props) {
       class: "fjs-palette-search-container",
       children: [jsx("span", {
         class: "fjs-palette-search-icon",
-        children: jsx(SearchIcon, {})
+        children: jsx(SvgSearch, {})
       }), jsx("input", {
         class: "fjs-palette-search",
         ref: inputRef,
@@ -1551,7 +1546,7 @@ function Palette(props) {
         title: "Clear content",
         class: "fjs-palette-search-clear",
         onClick: handleClear,
-        children: jsx(CloseIcon, {})
+        children: jsx(SvgClose, {})
       })]
     }), jsxs("div", {
       class: "fjs-palette-entries",
@@ -2182,7 +2177,7 @@ function EmptyForm() {
     class: "fjs-empty-editor",
     children: jsxs("div", {
       class: "fjs-empty-editor-card",
-      children: [jsx(EmptyFormIcon, {}), jsx("h2", {
+      children: [jsx(SvgEmptyForm, {}), jsx("h2", {
         children: "Build your form"
       }), jsx("span", {
         children: "Drag and drop components here to start designing."
@@ -2308,7 +2303,7 @@ function Element$1(props) {
         title: getRemoveButtonTitle(field, formFields),
         class: "fjs-context-pad-item",
         onClick: onRemove,
-        children: jsx(DeleteIcon$1, {})
+        children: jsx(SvgDelete, {})
       }) : null
     }), props.children, jsx(FieldResizer, {
       position: "left",
@@ -2365,7 +2360,7 @@ function Row(props) {
     class: classnames(DRAG_ROW_MOVE_CLS),
     children: [jsx("span", {
       class: "fjs-row-dragger",
-      children: jsx(DraggableIcon, {})
+      children: jsx(SvgDraggable, {})
     }), jsx("div", {
       class: classes.join(' '),
       style: props.style,
@@ -5378,6 +5373,21 @@ PopupIcon.defaultProps = {
   height: "16",
   viewBox: "0 0 32 32"
 };
+var CloseIcon = function CloseIcon(props) {
+  return jsx("svg", {
+    ...props,
+    children: jsx("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,
@@ -6078,7 +6088,8 @@ const CodeEditor$1 = forwardRef((props, ref) => {
       tooltipContainer,
       enableGutters,
       hostLanguage,
-      singleLine
+      singleLine,
+      lineWrap: true
     });
     setEditor(editor);
     return () => {
@@ -6115,7 +6126,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
-      children: jsx(ExternalLinkIcon, {})
+      children: jsx(PopupIcon, {})
     })]
   });
 });
@@ -6155,6 +6166,7 @@ const CodeEditor = forwardRef((props, ref) => {
     onFeelToggle = noop$5,
     onLint = noop$5,
     onPopupOpen = noop$5,
+    placeholder,
     popupOpen,
     disabled,
     tooltipContainer,
@@ -6191,6 +6203,7 @@ const CodeEditor = forwardRef((props, ref) => {
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      placeholder: placeholder,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
@@ -6220,6 +6233,12 @@ const CodeEditor = forwardRef((props, ref) => {
     }
     editor.setVariables(variables);
   }, [variables]);
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setPlaceholder(placeholder);
+  }, [placeholder]);
   const handleClick = () => {
     ref.current.focus();
   };
@@ -6472,6 +6491,9 @@ function Title(props) {
     draggable,
     emit = () => {},
     title,
+    showCloseButton = false,
+    closeButtonTooltip = 'Close popup',
+    onClose,
     ...rest
   } = props;
 
@@ -6542,7 +6564,12 @@ function Title(props) {
     }), jsx("div", {
       class: "bio-properties-panel-popup__title",
       children: title
-    }), children]
+    }), children, showCloseButton && jsx("button", {
+      title: closeButtonTooltip,
+      class: "bio-properties-panel-popup__close",
+      onClick: onClose,
+      children: jsx(CloseIcon, {})
+    })]
   });
 }
 function Body(props) {
@@ -6760,6 +6787,9 @@ function FeelPopupComponent(props) {
     children: [jsxs(Popup.Title, {
       title: title,
       emit: emit,
+      showCloseButton: true,
+      closeButtonTooltip: "Save and close",
+      onClose: onClose,
       draggable: true,
       children: [type === 'feel' && jsxs("a", {
         href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
@@ -6801,14 +6831,6 @@ function FeelPopupComponent(props) {
           tooltipContainer: tooltipContainer
         })]
       })
-    }), jsx(Popup.Footer, {
-      children: jsx("button", {
-        type: "button",
-        onClick: () => onClose(),
-        title: "Close pop-up editor",
-        class: "bio-properties-panel-feel-popup__close-btn",
-        children: "Close"
-      })
     })]
   });
 }
@@ -7118,6 +7140,7 @@ function FeelTextfieldComponent(props) {
     hostLanguage,
     onInput,
     onError,
+    placeholder,
     feel,
     value = '',
     disabled = false,
@@ -7292,6 +7315,7 @@ function FeelTextfieldComponent(props) {
         },
         onLint: handleLint,
         onPopupOpen: handlePopupOpen,
+        placeholder: placeholder,
         value: feelOnlyValue,
         variables: variables,
         ref: editorRef,
@@ -7320,7 +7344,8 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = useRef();
 
@@ -7353,6 +7378,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || ''
   });
 });
@@ -7410,7 +7436,8 @@ forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = useRef();
 
@@ -7438,6 +7465,7 @@ forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || '',
     "data-gramm": "false"
   });
@@ -7533,6 +7561,7 @@ forwardRef((props, ref) => {
  * @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) {
@@ -7555,6 +7584,7 @@ function FeelEntry(props) {
     variables,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const [validationError, setValidationError] = useState(null);
@@ -7598,6 +7628,7 @@ function FeelEntry(props) {
       onError: onError,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       example: example,
       hostLanguage: hostLanguage,
       singleLine: singleLine,
@@ -7785,7 +7816,6 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldSort?: Boolean,
  *    shouldOpen?: Boolean
  * } } ListGroupDefinition
  *
@@ -8113,6 +8143,7 @@ function ListItem(props) {
         } else if (isFunction(focusableInput.focus)) {
           focusableInput.focus();
         }
+        focusableInput.scrollIntoView();
       }
     }
   }, [autoOpen, autoFocusEntry]);
@@ -8136,97 +8167,61 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true,
-    shouldSort = true
+    shouldOpen = true
   } = props;
+  useEffect(() => {
+    if (props.shouldSort != undefined) {
+      console.warn('the property \'shouldSort\' is no longer supported');
+    }
+  }, [props.shouldSort]);
   const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = useState([]);
-  const [newItemAdded, setNewItemAdded] = useState(false);
+  const [localItems, setLocalItems] = useState([]);
+  const [newlyAddedItemIds, setNewlyAddedItemIds] = useState([]);
 
   // Flag to mark that add button was clicked in the last render cycle
   const [addTriggered, setAddTriggered] = useState(false);
-  const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
-  const shouldHandleEffects = !elementChanged && (shouldSort || 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
+  const shouldHandleEffects = !elementChanged && shouldOpen;
+
+  // (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.
   useEffect(() => {
-    if (!prevItems || !shouldSort) {
-      setOrdering(createOrdering(items));
-    }
-  }, [items, element]);
+    setLocalItems(items);
+  }, [items]);
 
-  // (1) items were added
+  // (1) handle auto opening when items were added
   useEffect(() => {
     // 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);
+    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 (!open && shouldOpen && newItemIds.length > 0) {
+          toggleOpen();
         }
-      });
-      let newOrdering = ordering;
-
-      // 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);
+        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
-  useEffect(() => {
-    if (shouldSort && open && !newItemAdded) {
-      setOrdering(createOrdering(sortItems(items)));
-    }
-  }, [open, shouldSort]);
-
-  // (3) items were deleted
-  useEffect(() => {
-    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);
@@ -8298,8 +8293,7 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
-        children: ordering.map((o, index) => {
-          const item = getItem(items, o);
+        children: localItems.map((item, index) => {
           if (!item) {
             return;
           }
@@ -8309,7 +8303,7 @@ function ListGroup(props) {
 
           // 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 createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
@@ -8322,21 +8316,6 @@ function ListGroup(props) {
     })]
   });
 }
-
-// helpers ////////////////////
-
-/**
- * Sorts given items alphanumeric by label
- */
-function sortItems(items) {
-  return sortBy(items, i => i.label.toLowerCase());
-}
-function getItem(items, id) {
-  return find(items, i => i.id === id);
-}
-function createOrdering(items) {
-  return items.map(i => i.id);
-}
 function Checkbox(props) {
   const {
     id,
@@ -8623,6 +8602,7 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
+    placeholder,
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
@@ -8665,6 +8645,7 @@ function TextArea(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       rows: rows,
       value: localValue,
       disabled: disabled,
@@ -8704,6 +8685,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     autoResize,
     tooltip
   } = props;
@@ -8739,6 +8721,7 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
+      placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
       element: element
@@ -8770,6 +8753,7 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
+    placeholder,
     value = '',
     tooltip
   } = props;
@@ -8811,6 +8795,7 @@ function Textfield(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: localValue
     })]
   });
@@ -8844,6 +8829,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const globalError = useError(id);
@@ -8875,6 +8861,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value,
       tooltip: tooltip,
       element: element
@@ -11638,8 +11625,7 @@ function StaticOptionsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -12483,8 +12469,7 @@ function StaticColumnsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -12986,8 +12971,7 @@ function CustomPropertiesGroup(field, editField) {
     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.'
   };
 }
 
@@ -13303,10 +13287,9 @@ var SvgRepeat = function SvgRepeat(props) {
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
-    d: "M3 3h10.086l-1.793-1.793L12 .5l3 3-3 3-.707-.707L13.086 4H3v3.5H2V4a1.001 1.001 0 0 1 1-1ZM4.707 10.207 2.914 12H13V8.5h1V12a1.002 1.002 0 0 1-1 1H2.914l1.793 1.793L4 15.5l-3-3 3-3 .707.707Z"
+    d: "M3 3h10.086l-1.793-1.793L12 .5l3 3-3 3-.707-.707L13.086 4H3v3.5H2V4a1 1 0 0 1 1-1M4.707 10.207 2.914 12H13V8.5h1V12a1 1 0 0 1-1 1H2.914l1.793 1.793L4 15.5l-3-3 3-3z"
   })));
 };
-var RepeatSvg = SvgRepeat;
 
 class EditorRepeatRenderManager {
   constructor(formFields, formFieldRegistry) {
@@ -13332,7 +13315,7 @@ class EditorRepeatRenderManager {
   RepeatFooter() {
     return jsxs("div", {
       className: "fjs-repeat-render-footer",
-      children: [jsx(RepeatSvg, {}), jsx("span", {
+      children: [jsx(SvgRepeat, {}), jsx("span", {
         children: "Repeatable"
       })]
     });