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

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

@@ -2135,6 +2135,31 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
+.bio-properties-panel-popup .bio-properties-panel-popup__close {
+  margin: -12px;
+  margin-left: 12px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background-color: var(--popup-header-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  background-color: var(--popup-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  outline-offset: -2px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-top: 2px;
+}
+
 .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }

package/dist/assets/properties-panel.css

@@ -1334,6 +1334,31 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
+.bio-properties-panel-popup .bio-properties-panel-popup__close {
+  margin: -12px;
+  margin-left: 12px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background-color: var(--popup-header-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  background-color: var(--popup-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  outline-offset: -2px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-top: 2px;
+}
+
 .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }

package/dist/index.cjs

@@ -886,11 +886,10 @@ var SvgClose = function SvgClose(props) {
     fill: "currentColor"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.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); }
@@ -918,13 +917,12 @@ var SvgDelete = function SvgDelete(props) {
     transform: "translate(.536)"
   }), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentcolor",
-    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+    d: "M7.536 6h-1v6h1zm3 0h-1v6h1z"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.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); }
@@ -945,7 +943,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); }
@@ -957,10 +954,9 @@ var SvgSearch = function SvgSearch(props) {
     fill: "none"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.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); }
@@ -973,7 +969,7 @@ var SvgEmptyForm = function SvgEmptyForm(props) {
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.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__namespace.createElement("rect", {
     width: 70,
@@ -986,16 +982,16 @@ var SvgEmptyForm = function SvgEmptyForm(props) {
     fill: "#fff"
   }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.createElement("path", {
     stroke: "#000",
@@ -1015,7 +1011,6 @@ var SvgEmptyForm = function SvgEmptyForm(props) {
     d: "M78.969 36.367v-8"
   })));
 };
-var EmptyFormIcon = SvgEmptyForm;
 
 function EditorText(props) {
   const {
@@ -1558,7 +1553,7 @@ function Palette(props) {
       class: "fjs-palette-search-container",
       children: [jsxRuntime.jsx("span", {
         class: "fjs-palette-search-icon",
-        children: jsxRuntime.jsx(SearchIcon, {})
+        children: jsxRuntime.jsx(SvgSearch, {})
       }), jsxRuntime.jsx("input", {
         class: "fjs-palette-search",
         ref: inputRef,
@@ -1571,7 +1566,7 @@ function Palette(props) {
         title: "Clear content",
         class: "fjs-palette-search-clear",
         onClick: handleClear,
-        children: jsxRuntime.jsx(CloseIcon, {})
+        children: jsxRuntime.jsx(SvgClose, {})
       })]
     }), jsxRuntime.jsxs("div", {
       class: "fjs-palette-entries",
@@ -2202,7 +2197,7 @@ function EmptyForm() {
     class: "fjs-empty-editor",
     children: jsxRuntime.jsxs("div", {
       class: "fjs-empty-editor-card",
-      children: [jsxRuntime.jsx(EmptyFormIcon, {}), jsxRuntime.jsx("h2", {
+      children: [jsxRuntime.jsx(SvgEmptyForm, {}), jsxRuntime.jsx("h2", {
         children: "Build your form"
       }), jsxRuntime.jsx("span", {
         children: "Drag and drop components here to start designing."
@@ -2328,7 +2323,7 @@ function Element$1(props) {
         title: getRemoveButtonTitle(field, formFields),
         class: "fjs-context-pad-item",
         onClick: onRemove,
-        children: jsxRuntime.jsx(DeleteIcon$1, {})
+        children: jsxRuntime.jsx(SvgDelete, {})
       }) : null
     }), props.children, jsxRuntime.jsx(FieldResizer, {
       position: "left",
@@ -2385,7 +2380,7 @@ function Row(props) {
     class: classnames(DRAG_ROW_MOVE_CLS),
     children: [jsxRuntime.jsx("span", {
       class: "fjs-row-dragger",
-      children: jsxRuntime.jsx(DraggableIcon, {})
+      children: jsxRuntime.jsx(SvgDraggable, {})
     }), jsxRuntime.jsx("div", {
       class: classes.join(' '),
       style: props.style,
@@ -5398,6 +5393,21 @@ PopupIcon.defaultProps = {
   height: "16",
   viewBox: "0 0 32 32"
 };
+var CloseIcon = function CloseIcon(props) {
+  return jsxRuntime.jsx("svg", {
+    ...props,
+    children: jsxRuntime.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,
@@ -6098,7 +6108,8 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
       tooltipContainer,
       enableGutters,
       hostLanguage,
-      singleLine
+      singleLine,
+      lineWrap: true
     });
     setEditor(editor);
     return () => {
@@ -6135,7 +6146,7 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
-      children: jsxRuntime.jsx(ExternalLinkIcon, {})
+      children: jsxRuntime.jsx(PopupIcon, {})
     })]
   });
 });
@@ -6175,6 +6186,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
     onFeelToggle = noop$5,
     onLint = noop$5,
     onPopupOpen = noop$5,
+    placeholder,
     popupOpen,
     disabled,
     tooltipContainer,
@@ -6211,6 +6223,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
       onChange: handleInput,
       onKeyDown: onKeyDown,
       onLint: onLint,
+      placeholder: placeholder,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
@@ -6240,6 +6253,12 @@ const CodeEditor = React.forwardRef((props, ref) => {
     }
     editor.setVariables(variables);
   }, [variables]);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setPlaceholder(placeholder);
+  }, [placeholder]);
   const handleClick = () => {
     ref.current.focus();
   };
@@ -6492,6 +6511,9 @@ function Title(props) {
     draggable,
     emit = () => {},
     title,
+    showCloseButton = false,
+    closeButtonTooltip = 'Close popup',
+    onClose,
     ...rest
   } = props;
 
@@ -6562,7 +6584,12 @@ function Title(props) {
     }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-popup__title",
       children: title
-    }), children]
+    }), children, showCloseButton && jsxRuntime.jsx("button", {
+      title: closeButtonTooltip,
+      class: "bio-properties-panel-popup__close",
+      onClick: onClose,
+      children: jsxRuntime.jsx(CloseIcon, {})
+    })]
   });
 }
 function Body(props) {
@@ -6780,6 +6807,9 @@ function FeelPopupComponent(props) {
     children: [jsxRuntime.jsxs(Popup.Title, {
       title: title,
       emit: emit,
+      showCloseButton: true,
+      closeButtonTooltip: "Save and close",
+      onClose: onClose,
       draggable: true,
       children: [type === 'feel' && jsxRuntime.jsxs("a", {
         href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
@@ -6821,14 +6851,6 @@ function FeelPopupComponent(props) {
           tooltipContainer: tooltipContainer
         })]
       })
-    }), 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",
-        children: "Close"
-      })
     })]
   });
 }
@@ -7138,6 +7160,7 @@ function FeelTextfieldComponent(props) {
     hostLanguage,
     onInput,
     onError,
+    placeholder,
     feel,
     value = '',
     disabled = false,
@@ -7312,6 +7335,7 @@ function FeelTextfieldComponent(props) {
         },
         onLint: handleLint,
         onPopupOpen: handlePopupOpen,
+        placeholder: placeholder,
         value: feelOnlyValue,
         variables: variables,
         ref: editorRef,
@@ -7340,7 +7364,8 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = hooks.useRef();
 
@@ -7373,6 +7398,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || ''
   });
 });
@@ -7430,7 +7456,8 @@ React.forwardRef((props, ref) => {
     onInput,
     value,
     onFocus,
-    onBlur
+    onBlur,
+    placeholder
   } = props;
   const inputRef = hooks.useRef();
 
@@ -7458,6 +7485,7 @@ React.forwardRef((props, ref) => {
     onInput: e => onInput(e.target.value),
     onFocus: onFocus,
     onBlur: onBlur,
+    placeholder: placeholder,
     value: value || '',
     "data-gramm": "false"
   });
@@ -7553,6 +7581,7 @@ React.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) {
@@ -7575,6 +7604,7 @@ function FeelEntry(props) {
     variables,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const [validationError, setValidationError] = hooks.useState(null);
@@ -7618,6 +7648,7 @@ function FeelEntry(props) {
       onError: onError,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       example: example,
       hostLanguage: hostLanguage,
       singleLine: singleLine,
@@ -7805,7 +7836,6 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldSort?: Boolean,
  *    shouldOpen?: Boolean
  * } } ListGroupDefinition
  *
@@ -8133,6 +8163,7 @@ function ListItem(props) {
         } else if (minDash.isFunction(focusableInput.focus)) {
           focusableInput.focus();
         }
+        focusableInput.scrollIntoView();
       }
     }
   }, [autoOpen, autoFocusEntry]);
@@ -8156,97 +8187,61 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true,
-    shouldSort = true
+    shouldOpen = true
   } = props;
+  hooks.useEffect(() => {
+    if (props.shouldSort != undefined) {
+      console.warn('the property \'shouldSort\' is no longer supported');
+    }
+  }, [props.shouldSort]);
   const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [sticky, setSticky] = hooks.useState(false);
   const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = hooks.useState([]);
-  const [newItemAdded, setNewItemAdded] = hooks.useState(false);
+  const [localItems, setLocalItems] = hooks.useState([]);
+  const [newlyAddedItemIds, setNewlyAddedItemIds] = hooks.useState([]);
 
   // Flag to mark that add button was clicked in the last render cycle
   const [addTriggered, setAddTriggered] = hooks.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.
   hooks.useEffect(() => {
-    if (!prevItems || !shouldSort) {
-      setOrdering(createOrdering(items));
-    }
-  }, [items, element]);
+    setLocalItems(items);
+  }, [items]);
 
-  // (1) items were added
+  // (1) handle auto opening when items were added
   hooks.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
-  hooks.useEffect(() => {
-    if (shouldSort && open && !newItemAdded) {
-      setOrdering(createOrdering(sortItems(items)));
-    }
-  }, [open, shouldSort]);
-
-  // (3) items were deleted
-  hooks.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);
@@ -8318,8 +8313,7 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
-        children: ordering.map((o, index) => {
-          const item = getItem(items, o);
+        children: localItems.map((item, index) => {
           if (!item) {
             return;
           }
@@ -8329,7 +8323,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 preact.createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
@@ -8342,21 +8336,6 @@ function ListGroup(props) {
     })]
   });
 }
-
-// helpers ////////////////////
-
-/**
- * Sorts given items alphanumeric by label
- */
-function sortItems(items) {
-  return minDash.sortBy(items, i => i.label.toLowerCase());
-}
-function getItem(items, id) {
-  return minDash.find(items, i => i.id === id);
-}
-function createOrdering(items) {
-  return items.map(i => i.id);
-}
 function Checkbox(props) {
   const {
     id,
@@ -8643,6 +8622,7 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
+    placeholder,
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
@@ -8685,6 +8665,7 @@ function TextArea(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       rows: rows,
       value: localValue,
       disabled: disabled,
@@ -8724,6 +8705,7 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     autoResize,
     tooltip
   } = props;
@@ -8759,6 +8741,7 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
+      placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
       element: element
@@ -8790,6 +8773,7 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
+    placeholder,
     value = '',
     tooltip
   } = props;
@@ -8831,6 +8815,7 @@ function Textfield(props) {
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: localValue
     })]
   });
@@ -8864,6 +8849,7 @@ function TextfieldEntry(props) {
     validate,
     onFocus,
     onBlur,
+    placeholder,
     tooltip
   } = props;
   const globalError = useError(id);
@@ -8895,6 +8881,7 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value,
       tooltip: tooltip,
       element: element
@@ -11658,8 +11645,7 @@ function StaticOptionsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -12503,8 +12489,7 @@ function StaticColumnsSourceEntry(props) {
   });
   return {
     items,
-    add: addEntry,
-    shouldSort: false
+    add: addEntry
   };
 }
 
@@ -13006,8 +12991,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.'
   };
 }
 
@@ -13323,10 +13307,9 @@ var SvgRepeat = function SvgRepeat(props) {
     fill: "none"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.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) {
@@ -13352,7 +13335,7 @@ class EditorRepeatRenderManager {
   RepeatFooter() {
     return jsxRuntime.jsxs("div", {
       className: "fjs-repeat-render-footer",
-      children: [jsxRuntime.jsx(RepeatSvg, {}), jsxRuntime.jsx("span", {
+      children: [jsxRuntime.jsx(SvgRepeat, {}), jsxRuntime.jsx("span", {
         children: "Repeatable"
       })]
     });
@@ -13670,7 +13653,7 @@ function createFormEditor(options) {
   });
 }
 
-Object.defineProperty(exports, 'schemaVersion', {
+Object.defineProperty(exports, "schemaVersion", {
   enumerable: true,
   get: function () { return formJsViewer.schemaVersion; }
 });