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

package/README.md

@@ -14,6 +14,7 @@ npm install @bpmn-io/form-js-editor
 import { FormEditor } from '@bpmn-io/form-js-editor';
 
 const schema = {
+  type: 'default',
   components: [
     {
       key: 'creditor',

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

@@ -1986,6 +1986,12 @@ textarea.bio-properties-panel-input {
   white-space: pre-wrap;
 }
 
+.bio-properties-panel-tooltip-content h1 {
+  font-size: var(--text-size-base);
+  font-weight: bold;
+  margin: 0;
+}
+
 .bio-properties-panel-tooltip-content code,
 .bio-properties-panel-tooltip-content pre {
   color: var(--description-color);

package/dist/assets/properties-panel.css

@@ -1183,6 +1183,12 @@ textarea.bio-properties-panel-input {
   white-space: pre-wrap;
 }
 
+.bio-properties-panel-tooltip-content h1 {
+  font-size: var(--text-size-base);
+  font-weight: bold;
+  margin: 0;
+}
+
 .bio-properties-panel-tooltip-content code,
 .bio-properties-panel-tooltip-content pre {
   color: var(--description-color);

package/dist/index.cjs

@@ -877,7 +877,7 @@ function useDebounce(fn) {
 }
 
 var _path$5;
-function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgClose = function SvgClose(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
@@ -892,7 +892,7 @@ var SvgClose = function SvgClose(props) {
 };
 
 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); }
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgDelete = function SvgDelete(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
@@ -925,7 +925,7 @@ var SvgDelete = function SvgDelete(props) {
 };
 
 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); }
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgDraggable = function SvgDraggable(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -945,7 +945,7 @@ var SvgDraggable = function SvgDraggable(props) {
 };
 
 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); }
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgSearch = function SvgSearch(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -959,7 +959,7 @@ var SvgSearch = function SvgSearch(props) {
 };
 
 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); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgEmptyForm = function SvgEmptyForm(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1516,6 +1516,8 @@ function Palette(props) {
   const initialPaletteEntries = hooks.useRef(collectPaletteEntries(formFields));
   const [paletteEntries, setPaletteEntries] = hooks.useState(initialPaletteEntries.current);
   const [searchTerm, setSearchTerm] = hooks.useState('');
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = hooks.useRef();
   const groups = groupEntries(paletteEntries);
   const simplifyString = hooks.useCallback(str => {
@@ -1638,7 +1640,8 @@ function collectPaletteEntries(formFields) {
       config: fieldConfig
     } = formField;
     return {
-      label: fieldConfig.label,
+      // fieldConfig.label is used to maintain backwards compatibility with custom form fields
+      label: fieldConfig.name || fieldConfig.label,
       type: type,
       group: fieldConfig.group,
       icon: fieldConfig.icon,
@@ -1941,6 +1944,29 @@ class Dragging {
         }
         return !target.classList.contains(DRAG_NO_DROP_CLS);
       },
+      transformOffset: (offset, event, element) => {
+        if (element.classList.contains(DRAG_ROW_MOVE_CLS)) {
+          const rowOffset = {
+            x: -5,
+            y: -60
+          };
+          return {
+            left: event.clientX + rowOffset.x,
+            top: event.clientY + rowOffset.y
+          };
+        }
+        if (element.classList.contains(DRAG_MOVE_CLS)) {
+          const iconOffset = {
+            x: -5,
+            y: -15
+          };
+          return {
+            left: event.clientX + iconOffset.x,
+            top: event.clientY + iconOffset.y
+          };
+        }
+        return offset;
+      },
       slideFactorX: 10,
       slideFactorY: 5
     };
@@ -2236,6 +2262,8 @@ function Element$1(props) {
     type,
     showOutline
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const ref = hooks.useRef();
   const [hovered, setHovered] = hooks.useState(false);
   hooks.useEffect(() => {
@@ -4691,7 +4719,7 @@ class MoveFormFieldHandler {
       updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (2) Move form field
-      arrayMove.mutate(minDash.get(schema, sourcePath), sourceIndex, targetIndex);
+      arrayMove.arrayMoveMutable(minDash.get(schema, sourcePath), sourceIndex, targetIndex);
 
       // (3) Update internal paths of new form field and its siblings (and their children)
       minDash.get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
@@ -5893,6 +5921,23 @@ function useStaticCallback(callback) {
   callbackRef.current = callback;
   return hooks.useCallback((...args) => callbackRef.current(...args), []);
 }
+function useElementVisible(element) {
+  const [visible, setVisible] = hooks.useState(!!element && !!element.clientHeight);
+  hooks.useLayoutEffect(() => {
+    if (!element) return;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      requestAnimationFrame(() => {
+        const newVisible = !!entry.contentRect.height;
+        if (newVisible !== visible) {
+          setVisible(newVisible);
+        }
+      });
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, [element, visible]);
+  return visible;
+}
 function Group(props) {
   const {
     element,
@@ -7227,12 +7272,13 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.length)) {
+  const handleLint = useStaticCallback((lint = []) => {
+    const syntaxError = lint.some(report => report.type === 'Syntax Error');
+    if (syntaxError) {
+      onError('Unparsable FEEL expression.');
+    } else {
       onError(undefined);
-      return;
     }
-    onError('Unparsable FEEL expression.');
   });
   const handlePopupOpen = (type = 'feel') => {
     const popupOptions = {
@@ -8080,6 +8126,28 @@ function useUpdateLayoutEffect(effect, deps) {
     }
   }, deps);
 }
+
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
+ */
+
+/**
+ * A simple translation stub to be used for multi-language support.
+ * Can be easily replaced with a more sophisticated solution.
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
+ */
+function translateFallback(template, replacements) {
+  replacements = replacements || {};
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}
 function CollapsibleEntry(props) {
   const {
     element,
@@ -8087,7 +8155,8 @@ function CollapsibleEntry(props) {
     id,
     label,
     open: shouldOpen,
-    remove
+    remove,
+    translate = translateFallback
   } = props;
   const [open, setOpen] = hooks.useState(shouldOpen);
   const toggleOpen = () => setOpen(!open);
@@ -8103,9 +8172,7 @@ function CollapsibleEntry(props) {
       }
     }, [onShow, setOpen])
   };
-
-  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
-  const placeholderLabel = '<empty>';
+  const placeholderLabel = translate('<empty>');
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
@@ -8118,14 +8185,14 @@ function CollapsibleEntry(props) {
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
         type: "button",
-        title: "Toggle list item",
+        title: translate('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",
+        title: translate('Delete item'),
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
         children: jsxRuntime.jsx(DeleteIcon, {})
@@ -8152,7 +8219,8 @@ function CollapsibleEntry(props) {
 function ListItem(props) {
   const {
     autoFocusEntry,
-    autoOpen
+    autoOpen,
+    translate = translateFallback
   } = props;
 
   // focus specified entry on auto open
@@ -8174,7 +8242,8 @@ function ListItem(props) {
     class: "bio-properties-panel-list-item",
     children: jsxRuntime.jsx(CollapsibleEntry, {
       ...props,
-      open: autoOpen
+      open: autoOpen,
+      translate: translate
     })
   });
 }
@@ -8190,7 +8259,8 @@ function ListGroup(props) {
     id,
     items,
     label,
-    shouldOpen = true
+    shouldOpen = false,
+    translate = translateFallback
   } = props;
   hooks.useEffect(() => {
     if (props.shouldSort != undefined) {
@@ -8198,57 +8268,25 @@ function ListGroup(props) {
     }
   }, [props.shouldSort]);
   const groupRef = hooks.useRef(null);
-  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const [sticky, setSticky] = hooks.useState(false);
   const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
   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 prevElement = usePrevious(element);
-  const elementChanged = element !== prevElement;
-  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(() => {
-    setLocalItems(items);
-  }, [items]);
+  const toggleOpen = hooks.useCallback(() => setOpen(!open), [open]);
+  const openItemIds = element === prevElement && open && addTriggered ? getNewItemIds(items, localItems) : [];
 
-  // (1) handle auto opening when items were added
+  // reset local state after items changed
   hooks.useEffect(() => {
-    // reset addTriggered flag
+    setLocalItems(items);
     setAddTriggered(false);
-    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();
-        }
-        setNewlyAddedItemIds(newItemIds);
-      } else {
-        // ignore newly added items that do not result from a triggered add
-        setNewlyAddedItemIds([]);
-      }
-    }
-  }, [items, open, shouldHandleEffects, addTriggered, localItems]);
+  }, [items]);
 
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
-  const toggleOpen = () => setOpen(!open);
   const hasItems = !!items.length;
   const propertiesPanelContext = {
     ...hooks.useContext(LayoutContext),
@@ -8256,6 +8294,7 @@ function ListGroup(props) {
   };
   const handleAddClick = e => {
     setAddTriggered(true);
+    setOpen(true);
     add(e);
   };
   const allErrors = useErrors();
@@ -8292,20 +8331,22 @@ function ListGroup(props) {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxRuntime.jsxs("button", {
           type: "button",
-          title: "Create new list item",
+          title: translate('Create new list item'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
           children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
             class: "bio-properties-panel-add-entry-label",
-            children: "Create"
+            children: translate('Create')
           }) : null]
         }) : null, hasItems ? jsxRuntime.jsx("div", {
-          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          title: translate(`List contains {numOfItems} item${items.length != 1 ? 's' : ''}`, {
+            numOfItems: items.length
+          }),
           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",
+          title: translate('Toggle section'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -8316,7 +8357,7 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
-        children: localItems.map((item, index) => {
+        children: items.map((item, index) => {
           if (!item) {
             return;
           }
@@ -8325,20 +8366,27 @@ function ListGroup(props) {
           } = item;
 
           // if item was added, open it
-          // Existing items will not be affected as autoOpen is only applied on first render
-          const autoOpen = newlyAddedItemIds.includes(item.id);
+          // existing items will not be affected as autoOpen
+          // is only applied on first render
+          const autoOpen = openItemIds.includes(item.id);
           return preact.createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
             element: element,
             index: index,
-            key: id
+            key: id,
+            translate: translate
           });
         })
       })
     })]
   });
 }
+function getNewItemIds(newItems, oldItems) {
+  const newIds = newItems.map(item => item.id);
+  const oldIds = oldItems.map(item => item.id);
+  return newIds.filter(itemId => !oldIds.includes(itemId));
+}
 function Checkbox(props) {
   const {
     id,
@@ -8624,13 +8672,14 @@ function TextArea(props) {
     monospace,
     onFocus,
     onBlur,
-    autoResize,
+    autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
+  const visible = useElementVisible(ref.current);
   const handleInputCallback = hooks.useMemo(() => {
     return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
@@ -8642,6 +8691,9 @@ function TextArea(props) {
   hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
+  hooks.useLayoutEffect(() => {
+    visible && autoResize && resizeToContents(ref.current);
+  }, [visible]);
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
@@ -8958,82 +9010,6 @@ const FormPropertiesPanelContext = preact.createContext({
   getService
 });
 
-function arrayAdd(array, index, item) {
-  const copy = [...array];
-  copy.splice(index, 0, item);
-  return copy;
-}
-function countDecimals(number) {
-  const num = Big(number);
-  if (num.toString() === num.toFixed(0)) return 0;
-  return num.toFixed().split('.')[1].length || 0;
-}
-
-/**
- *
- * @param {unknown} value
- * @returns {boolean}
- */
-function isValidNumber(value) {
-  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
-}
-function textToLabel(text) {
-  if (typeof text != 'string') return null;
-  for (const line of text.split('\n')) {
-    const displayLine = line.trim();
-
-    // we use the first non-whitespace line in the text as label
-    if (displayLine !== '') {
-      return displayLine;
-    }
-  }
-  return null;
-}
-
-/**
- * @param {string} path
- */
-function isValidDotPath(path) {
-  return /^\w+(\.\w+)*$/.test(path);
-}
-
-/**
- * @param {string} path
- */
-function isProhibitedPath(path) {
-  const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
-  return path.split('.').some(segment => prohibitedSegments.includes(segment));
-}
-const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
-const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
-const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
-function hasEntryConfigured(formFieldDefinition, entryId) {
-  const {
-    propertiesPanelEntries = []
-  } = formFieldDefinition;
-  if (!propertiesPanelEntries.length) {
-    return false;
-  }
-  return propertiesPanelEntries.some(id => id === entryId);
-}
-function hasOptionsGroupsConfigured(formFieldDefinition) {
-  const {
-    propertiesPanelEntries = []
-  } = formFieldDefinition;
-  if (!propertiesPanelEntries.length) {
-    return false;
-  }
-  return propertiesPanelEntries.some(id => id === 'values');
-}
-
-/**
- * @param {string} path
- */
-function hasIntegerPathSegment(path) {
-  return path.split('.').some(segment => /^\d+$/.test(segment));
-}
-
-const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 function getPropertiesPanelHeaderProvider(options = {}) {
   const {
     getDocumentationRef,
@@ -9044,19 +9020,8 @@ function getPropertiesPanelHeaderProvider(options = {}) {
       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;
+      const fieldDefinition = formFields.get(type).config;
+      return fieldDefinition.getSubheading ? fieldDefinition.getSubheading(field) : field.label;
     },
     getElementIcon: field => {
       const {
@@ -9085,7 +9050,7 @@ function getPropertiesPanelHeaderProvider(options = {}) {
         return 'Form';
       }
       const fieldDefinition = formFields.get(type).config;
-      return fieldDefinition.label || type;
+      return fieldDefinition.name || fieldDefinition.label || type;
     },
     getDocumentationRef
   };
@@ -9486,6 +9451,69 @@ function asArray(length) {
   }).map((_, i) => i + 1);
 }
 
+function arrayAdd(array, index, item) {
+  const copy = [...array];
+  copy.splice(index, 0, item);
+  return copy;
+}
+function countDecimals(number) {
+  const num = Big(number);
+  if (num.toString() === num.toFixed(0)) return 0;
+  return num.toFixed().split('.')[1].length || 0;
+}
+
+/**
+ *
+ * @param {unknown} value
+ * @returns {boolean}
+ */
+function isValidNumber(value) {
+  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
+}
+
+/**
+ * @param {string} path
+ */
+function isValidDotPath(path) {
+  return /^\w+(\.\w+)*$/.test(path);
+}
+
+/**
+ * @param {string} path
+ */
+function isProhibitedPath(path) {
+  const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
+  return path.split('.').some(segment => prohibitedSegments.includes(segment));
+}
+const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
+const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
+const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+function hasEntryConfigured(formFieldDefinition, entryId) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === entryId);
+}
+function hasOptionsGroupsConfigured(formFieldDefinition) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === 'values');
+}
+
+/**
+ * @param {string} path
+ */
+function hasIntegerPathSegment(path) {
+  return path.split('.').some(segment => /^\d+$/.test(segment));
+}
+
 function DescriptionEntry(props) {
   const {
     editField,
@@ -9531,7 +9559,7 @@ function Description(props) {
   });
 }
 
-const EMPTY_OPTION = null;
+const EMPTY_OPTION = '';
 function DefaultValueEntry(props) {
   const {
     editField,
@@ -12643,7 +12671,7 @@ function Multiple(props) {
     feel: 'optional',
     getValue,
     id,
-    label: 'Select multiple files',
+    label: 'Upload multiple files',
     inline: true,
     setValue,
     variables
@@ -13464,7 +13492,7 @@ const RenderInjectionModule = {
 };
 
 var _path;
-function _extends() { _extends = 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.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgRepeat = function SvgRepeat(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",