@bpmn-io/form-js-editor 0.11.0 → 0.12.0

package/dist/index.es.js

@@ -1,15 +1,15 @@
-import { FormFieldRegistry as FormFieldRegistry$1, clone, FormContext, FormRenderContext, FormComponent, iconsByType, FormFields, getSchemaVariables, Default, 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, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, clone, iconsByType, isExpression, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, getSchemaVariables, Default, 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, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, createFormContainer, createInjector, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set, isUndefined, without, has, isString } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set as set$1, isUndefined, without, has, isString } from 'min-dash';
+import classnames from 'classnames';
+import { jsx, jsxs } from 'preact/jsx-runtime';
 import { createContext, render, createElement } from 'preact';
-import { useContext, useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'preact/hooks';
+import { useContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect } from 'preact/hooks';
 import dragula from 'dragula';
-import { jsxs, jsx } from 'preact/jsx-runtime';
 import React, { forwardRef } from 'preact/compat';
-import { matches, closest, event, domify, query } from 'min-dom';
+import { classes, closest, event, matches, domify, query } from 'min-dom';
 import { mutate } from 'array-move';
-import classnames from 'classnames';
 import FeelEditor from '@bpmn-io/feel-editor';
 import Big from 'big.js';
 
@@ -671,9 +671,98 @@ var importModule = {
   importer: ['type', Importer]
 };
 
+function editorFormFieldClasses(type, {
+  disabled = false
+} = {}) {
+  if (!type) {
+    throw new Error('type required');
+  }
+  return classnames('fjs-form-field', `fjs-form-field-${type}`, {
+    'fjs-disabled': disabled
+  });
+}
+
+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); }
+var CloseIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$2({
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 4.7l-.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"
+})));
+
+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); }
+var SearchIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
+  width: "15",
+  height: "15",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
+  fill: "currentColor"
+})));
+
+function EditorText(props) {
+  const {
+    type,
+    text = ''
+  } = props.field;
+  const Icon = iconsByType['text'];
+  if (!text) {
+    return jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is empty"]
+      })
+    });
+  }
+  if (isExpression(text)) {
+    return jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is populated by an expression"]
+      })
+    });
+  }
+  return jsx(Text$1, {
+    ...props,
+    disableLinks: true
+  });
+}
+EditorText.create = Text$1.create;
+EditorText.type = Text$1.type;
+EditorText.keyed = Text$1.keyed;
+
+const editorFormFields = [EditorText];
+
+class EditorFormFields extends FormFields {
+  constructor() {
+    super();
+    editorFormFields.forEach(formField => {
+      this.register(formField.type, formField);
+    });
+  }
+}
+
 const DragAndDropContext = createContext({
   drake: null
 });
+var DragAndDropContext$1 = DragAndDropContext;
 
 /**
  * @param {string} type
@@ -685,11 +774,12 @@ function getService$1(type, strict) {}
 const FormEditorContext = createContext({
   getService: getService$1
 });
+var FormEditorContext$1 = FormEditorContext;
 
 function useService$1 (type, strict) {
   const {
     getService
-  } = useContext(FormEditorContext);
+  } = useContext(FormEditorContext$1);
   return getService(type, strict);
 }
 
@@ -705,6 +795,149 @@ var ListDeleteIcon = (({
   d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
 })));
 
+const PALETTE_ENTRIES = formFields.filter(f => f.type !== 'default').map(f => {
+  return {
+    label: f.label,
+    type: f.type,
+    group: f.group
+  };
+});
+const PALETTE_GROUPS = [{
+  label: 'Basic input',
+  id: 'basic-input'
+}, {
+  label: 'Selection',
+  id: 'selection'
+}, {
+  label: 'Presentation',
+  id: 'presentation'
+}, {
+  label: 'Action',
+  id: 'action'
+}];
+function Palette(props) {
+  const [entries, setEntries] = useState(PALETTE_ENTRIES);
+  const [searchTerm, setSearchTerm] = useState('');
+  const inputRef = useRef();
+  const groups = groupEntries(entries);
+
+  // filter entries on search change
+  useEffect(() => {
+    const filter = entry => {
+      if (!searchTerm) {
+        return true;
+      }
+      const search = entry.label.toLowerCase();
+      return searchTerm.toLowerCase().split(/\s/g).every(term => search.includes(term));
+    };
+    const entries = PALETTE_ENTRIES.filter(filter);
+    setEntries(entries);
+  }, [searchTerm]);
+  const handleInput = useCallback(event => {
+    setSearchTerm(() => event.target.value);
+  }, [setSearchTerm]);
+  const handleClear = useCallback(event => {
+    setSearchTerm('');
+    inputRef.current.focus();
+  }, [inputRef, setSearchTerm]);
+  return jsxs("div", {
+    class: "fjs-palette",
+    children: [jsx("div", {
+      class: "fjs-palette-header",
+      title: "Components",
+      children: "Components"
+    }), jsxs("div", {
+      class: "fjs-palette-search-container",
+      children: [jsx("span", {
+        class: "fjs-palette-search-icon",
+        children: jsx(SearchIcon, {})
+      }), jsx("input", {
+        class: "fjs-palette-search",
+        ref: inputRef,
+        type: "text",
+        placeholder: "Search components",
+        value: searchTerm,
+        onInput: handleInput
+      }), searchTerm && jsx("button", {
+        title: "Clear content",
+        class: "fjs-palette-search-clear",
+        onClick: handleClear,
+        children: jsx(CloseIcon, {})
+      })]
+    }), jsxs("div", {
+      class: "fjs-palette-entries",
+      children: [groups.map(({
+        label,
+        entries,
+        id
+      }) => jsxs("div", {
+        class: "fjs-palette-group",
+        "data-group-id": id,
+        children: [jsx("span", {
+          class: "fjs-palette-group-title",
+          children: label
+        }), jsx("div", {
+          class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
+          children: entries.map(({
+            label,
+            type
+          }) => {
+            const Icon = iconsByType[type];
+            return jsxs("div", {
+              class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+              "data-field-type": type,
+              title: `Create a ${label} element`,
+              children: [Icon ? jsx(Icon, {
+                class: "fjs-palette-field-icon",
+                width: "36",
+                height: "36",
+                viewBox: "0 0 54 54"
+              }) : null, jsx("span", {
+                class: "fjs-palette-field-text",
+                children: label
+              })]
+            });
+          })
+        })]
+      })), groups.length == 0 && jsx("div", {
+        class: "fjs-palette-no-entries",
+        children: "No components found."
+      })]
+    })]
+  });
+}
+
+// helpers ///////
+
+function groupEntries(entries) {
+  const groups = PALETTE_GROUPS.map(group => {
+    return {
+      ...group,
+      entries: []
+    };
+  });
+  const getGroup = id => groups.find(group => id === group.id);
+  entries.forEach(entry => {
+    const {
+      group
+    } = entry;
+    getGroup(group).entries.push(entry);
+  });
+  return groups.filter(g => g.entries.length);
+}
+
+const CURSOR_CLS_PATTERN = /^fjs-cursor-.*$/;
+function set(mode) {
+  const classes$1 = classes(document.body);
+  classes$1.removeMatching(CURSOR_CLS_PATTERN);
+  if (mode) {
+    classes$1.add('fjs-cursor-' + mode);
+  }
+}
+function unset() {
+  set(null);
+}
+
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -828,6 +1061,9 @@ function FormEditor$1(props) {
     drake
   };
   useEffect(() => {
+    const handleDragEvent = (type, context) => {
+      return eventBus.fire(type, context);
+    };
     const createDragulaInstance = () => {
       const dragulaInstance = dragula({
         isContainer(el) {
@@ -842,6 +1078,56 @@ function FormEditor$1(props) {
         slideFactorX: 10,
         slideFactorY: 5
       });
+
+      // bind life cycle events
+      dragulaInstance.on('drag', (element, source) => {
+        handleDragEvent('drag.start', {
+          element,
+          source
+        });
+      });
+      dragulaInstance.on('dragend', element => {
+        handleDragEvent('drag.end', {
+          element
+        });
+      });
+      dragulaInstance.on('drop', (element, target, source, sibling) => {
+        handleDragEvent('drag.drop', {
+          element,
+          target,
+          source,
+          sibling
+        });
+      });
+      dragulaInstance.on('over', (element, container, source) => {
+        handleDragEvent('drag.hover', {
+          element,
+          container,
+          source
+        });
+      });
+      dragulaInstance.on('out', (element, container, source) => {
+        handleDragEvent('drag.out', {
+          element,
+          container,
+          source
+        });
+      });
+      dragulaInstance.on('cancel', (element, container, source) => {
+        handleDragEvent('drag.cancel', {
+          element,
+          container,
+          source
+        });
+      });
+
+      // set custom styling
+      dragulaInstance.on('drag', () => {
+        set('grabbing');
+      });
+      dragulaInstance.on('dragend', () => {
+        unset();
+      });
       dragulaInstance.on('drop', (el, target, source, sibling) => {
         dragulaInstance.remove();
         if (!target) {
@@ -898,9 +1184,7 @@ function FormEditor$1(props) {
   const formContext = {
     getService(type, strict = true) {
       // TODO(philippfromme): clean up
-      if (type === 'formFieldRegistry') {
-        return new Map();
-      } else if (type === 'form') {
+      if (type === 'form') {
         return {
           _getState() {
             return {
@@ -938,7 +1222,7 @@ function FormEditor$1(props) {
   }, [propertiesPanelRef, propertiesPanel, hasDefaultPropertiesPanel]);
   return jsxs("div", {
     class: "fjs-form-editor",
-    children: [jsxs(DragAndDropContext.Provider, {
+    children: [jsxs(DragAndDropContext$1.Provider, {
       value: dragAndDropContext,
       children: [hasDefaultPalette && jsx("div", {
         class: "fjs-editor-palette-container",
@@ -976,14 +1260,32 @@ function getFormFieldIndex(parent, formField) {
 function CreatePreview(props) {
   const {
     drake
-  } = useContext(DragAndDropContext);
+  } = useContext(DragAndDropContext$1);
   function handleCloned(clone, original, type) {
     const fieldType = clone.dataset.fieldType;
     const Icon = iconsByType[fieldType];
+    const {
+      label
+    } = findPaletteEntry(fieldType);
     if (fieldType) {
       clone.innerHTML = '';
       clone.class = 'gu-mirror';
-      render(jsx(Icon, {}), clone);
+      if (original.classList.contains('fjs-palette-field')) {
+        render(jsxs("div", {
+          class: "fjs-palette-field",
+          children: [jsx(Icon, {
+            class: "fjs-palette-field-icon",
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          }), jsx("span", {
+            class: "fjs-palette-field-text",
+            children: label
+          })]
+        }), clone);
+      } else {
+        render(jsx(Icon, {}), clone);
+      }
     }
   }
   useEffect(() => {
@@ -1004,6 +1306,9 @@ function defaultPalette(paletteConfig) {
 function defaultPropertiesPanel(propertiesPanelConfig) {
   return !(propertiesPanelConfig && propertiesPanelConfig.parent);
 }
+function findPaletteEntry(type) {
+  return PALETTE_ENTRIES.find(entry => entry.type === type);
+}
 
 class Renderer {
   constructor(renderConfig, eventBus, formEditor, injector) {
@@ -1029,7 +1334,7 @@ class Renderer {
       }
       return jsx("div", {
         class: `fjs-container fjs-editor-container ${compact ? 'fjs-editor-compact' : ''}`,
-        children: jsx(FormEditorContext.Provider, {
+        children: jsx(FormEditorContext$1.Provider, {
           value: formEditorContext,
           children: jsx(FormEditor$1, {})
         })
@@ -1047,7 +1352,7 @@ Renderer.$inject = ['config.renderer', 'eventBus', 'formEditor', 'injector'];
 
 var renderModule = {
   __init__: ['formFields', 'renderer'],
-  formFields: ['type', FormFields],
+  formFields: ['type', EditorFormFields],
   renderer: ['type', Renderer]
 };
 
@@ -2364,10 +2669,40 @@ class KeyBehavior extends CommandInterceptor {
 }
 KeyBehavior.$inject = ['eventBus', 'modeling'];
 
+class ValidateBehavior extends CommandInterceptor {
+  constructor(eventBus) {
+    super(eventBus);
+
+    /**
+     * Remove custom validation if <validationType> is about to be added.
+     */
+    // @ts-ignore-next-line
+    this.preExecute('formField.edit', function (context) {
+      const {
+        properties
+      } = context;
+      const {
+        validate = {}
+      } = properties;
+      if (validate.validationType) {
+        const newValidate = {
+          ...validate
+        };
+        delete newValidate.minLength;
+        delete newValidate.maxLength;
+        delete newValidate.pattern;
+        properties['validate'] = newValidate;
+      }
+    }, true);
+  }
+}
+ValidateBehavior.$inject = ['eventBus'];
+
 var behaviorModule = {
-  __init__: ['idBehavior', 'keyBehavior'],
+  __init__: ['idBehavior', 'keyBehavior', 'validateBehavior'],
   idBehavior: ['type', IdBehavior],
-  keyBehavior: ['type', KeyBehavior]
+  keyBehavior: ['type', KeyBehavior],
+  validateBehavior: ['type', ValidateBehavior]
 };
 
 /**
@@ -2868,79 +3203,6 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-const types = [{
-  label: 'Text field',
-  type: 'textfield'
-}, {
-  label: 'Text area',
-  type: 'textarea'
-}, {
-  label: 'Number',
-  type: 'number'
-}, {
-  label: 'Datetime',
-  type: 'datetime'
-}, {
-  label: 'Checkbox',
-  type: 'checkbox'
-}, {
-  label: 'Checklist',
-  type: 'checklist'
-}, {
-  label: 'Taglist',
-  type: 'taglist'
-}, {
-  label: 'Radio',
-  type: 'radio'
-}, {
-  label: 'Select',
-  type: 'select'
-}, {
-  label: 'Text view',
-  type: 'text'
-}, {
-  label: 'Image view',
-  type: 'image'
-}, {
-  label: 'Button',
-  type: 'button'
-}];
-function Palette(props) {
-  return jsxs("div", {
-    class: "fjs-palette",
-    children: [jsxs("div", {
-      class: "fjs-palette-header",
-      title: "Form elements library",
-      children: [jsx("span", {
-        class: "fjs-hide-compact",
-        children: "FORM ELEMENTS "
-      }), "LIBRARY"]
-    }), jsx("div", {
-      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-      children: types.map(({
-        label,
-        type
-      }) => {
-        const Icon = iconsByType[type];
-        return jsxs("div", {
-          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-          "data-field-type": type,
-          title: `Create a ${label} element`,
-          children: [Icon ? jsx(Icon, {
-            class: "fjs-palette-field-icon",
-            width: "36",
-            height: "36",
-            viewBox: "0 0 54 54"
-          }) : null, jsx("span", {
-            class: "fjs-palette-field-text",
-            children: label
-          })]
-        });
-      })
-    })]
-  });
-}
-
 class PaletteRenderer {
   constructor(paletteConfig, eventBus) {
     const {
@@ -3162,19 +3424,19 @@ const ErrorsContext = createContext({
   errors: {}
 });
 
-/**
- * @typedef {Function} <propertiesPanel.showEntry> callback
- *
- * @example
- *
- * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
- *   // ...
- * });
- *
- * @param {Object} context
- * @param {boolean} [context.focus]
- *
- * @returns void
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
 const EventContext = createContext({
   eventBus: null
@@ -3186,20 +3448,20 @@ const LayoutContext = createContext({
   setLayoutForKey: () => {}
 });
 
-/**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {object} element
- *
- * @returns {string}
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 function useDescriptionContext(id, element) {
   const {
@@ -3214,11 +3476,11 @@ function useError(id) {
   return errors[id];
 }
 
-/**
- * Subscribe to an event immediately. Update subscription after inputs changed.
- *
- * @param {string} event
- * @param {Function} callback
+/**
+ * Subscribe to an event immediately. Update subscription after inputs changed.
+ *
+ * @param {string} event
+ * @param {Function} callback
  */
 function useEvent(event, callback, eventBus) {
   const eventContext = useContext(EventContext);
@@ -3248,20 +3510,20 @@ function useEvent(event, callback, eventBus) {
   }, [callback, event, eventBus]);
 }
 
-/**
- * Creates a state that persists in the global LayoutContext.
- *
- * @example
- * ```jsx
- * function Group(props) {
- *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
- * }
- * ```
- *
- * @param {(string|number)[]} path
- * @param {any} [defaultValue]
- *
- * @returns {[ any, Function ]}
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
  */
 function useLayoutState(path, defaultValue) {
   const {
@@ -3280,11 +3542,11 @@ function useLayoutState(path, defaultValue) {
   return [value, setState];
 }
 
-/**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
- *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
  */
 
 function usePrevious(value) {
@@ -3295,12 +3557,12 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Subscribe to `propertiesPanel.showEntry`.
- *
- * @param {string} id
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @param {string} id
+ *
+ * @returns {import('preact').Ref}
  */
 function useShowEntryEvent(id) {
   const {
@@ -3331,20 +3593,20 @@ function useShowEntryEvent(id) {
   return ref;
 }
 
-/**
- * @callback setSticky
- * @param {boolean} value
+/**
+ * @callback setSticky
+ * @param {boolean} value
  */
 
-/**
- * Use IntersectionObserver to identify when DOM element is in sticky mode.
- * If sticky is observered setSticky(true) will be called.
- * If sticky mode is left, setSticky(false) will be called.
- *
- *
- * @param {Object} ref
- * @param {string} scrollContainerSelector
- * @param {setSticky} setSticky
+/**
+ * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ * If sticky is observered setSticky(true) will be called.
+ * If sticky mode is left, setSticky(false) will be called.
+ *
+ *
+ * @param {Object} ref
+ * @param {string} scrollContainerSelector
+ * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   useEffect(() => {
@@ -3383,19 +3645,19 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
   }, [ref, scrollContainerSelector, setSticky]);
 }
 
-/**
- * Creates a static function reference with changing body.
- * This is necessary when external libraries require a callback function
- * that has references to state variables.
- *
- * Usage:
- * const callback = useStaticCallback((val) => {val === currentState});
- *
- * The `callback` reference is static and can be safely used in external
- * libraries or as a prop that does not cause rerendering of children.
- *
- * @param {Function} callback function with changing reference
- * @returns {Function} static function reference
+/**
+ * Creates a static function reference with changing body.
+ * This is necessary when external libraries require a callback function
+ * that has references to state variables.
+ *
+ * Usage:
+ * const callback = useStaticCallback((val) => {val === currentState});
+ *
+ * The `callback` reference is static and can be safely used in external
+ * libraries or as a prop that does not cause rerendering of children.
+ *
+ * @param {Function} callback function with changing reference
+ * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
   const callbackRef = useRef(callback);
@@ -3487,13 +3749,13 @@ function DataMarker() {
   });
 }
 
-/**
- * @typedef { {
- *  text: (element: object) => string,
- *  icon?: (element: Object) => import('preact').Component
- * } } PlaceholderDefinition
- *
- * @param { PlaceholderDefinition } props
+/**
+ * @typedef { {
+ *  text: (element: object) => string,
+ *  icon?: (element: Object) => import('preact').Component
+ * } } PlaceholderDefinition
+ *
+ * @param { PlaceholderDefinition } props
  */
 function Placeholder(props) {
   const {
@@ -3518,72 +3780,72 @@ const DEFAULT_LAYOUT = {
 };
 const DEFAULT_DESCRIPTION = {};
 
-/**
- * @typedef { {
- *    component: import('preact').Component,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldSort?: Boolean,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
  */
 
-/**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {PlaceholderProvider} [props.placeholderProvider]
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {Object} [props.eventBus]
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
   const {
@@ -3610,7 +3872,7 @@ function PropertiesPanel(props) {
   };
   const setLayoutForKey = (key, config) => {
     const newLayout = assign({}, layout);
-    set(newLayout, key, config);
+    set$1(newLayout, key, config);
     setLayout(newLayout);
   };
   const layoutContext = {
@@ -3808,8 +4070,8 @@ function ListItem(props) {
 }
 const noop$2 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -3972,8 +4234,8 @@ function ListGroup(props) {
 
 // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 function sortItems(items) {
   return sortBy(items, i => i.label.toLowerCase());
@@ -4047,17 +4309,17 @@ function Checkbox(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {boolean} [props.disabled]
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
   const {
@@ -4145,10 +4407,10 @@ const CodeEditor = forwardRef((props, ref) => {
   useEffect(() => {
     let editor;
 
-    /* Trigger FEEL toggle when
-     *
-     * - `backspace` is pressed
-     * - AND the cursor is at the beginning of the input
+    /* Trigger FEEL toggle when
+     *
+     * - `backspace` is pressed
+     * - AND the cursor is at the beginning of the input
      */
     const onKeyDown = e => {
       if (e.key !== 'Backspace' || !editor) {
@@ -4219,10 +4481,10 @@ function FeelIndicator(props) {
 }
 const noop$1 = () => {};
 
-/**
- * @param {Object} props
- * @param {Object} props.label
- * @param {String} props.feel
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
  */
 function FeelIcon(props) {
   const {
@@ -4496,17 +4758,17 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
   });
 });
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.validate
  */
 function FeelEntry(props) {
   const {
@@ -4591,19 +4853,19 @@ function FeelEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.validate
  */
 function FeelTextArea(props) {
   return jsx(FeelEntry, {
@@ -4682,21 +4944,22 @@ function NumberField(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
  */
 function NumberFieldEntry(props) {
   const {
@@ -4712,25 +4975,55 @@ function NumberFieldEntry(props) {
     setValue,
     step,
     onFocus,
-    onBlur
+    onBlur,
+    validate
   } = props;
-  const value = getValue(element);
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
   return jsxs("div", {
-    class: "bio-properties-panel-entry",
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsx(NumberField, {
       debounce: debounce,
       disabled: disabled,
       id: id,
       label: label,
-      onInput: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
+      onInput: onInput,
       max: max,
       min: min,
       step: step,
       value: value
-    }, element), jsx(Description$1, {
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
       forId: id,
       element: element,
       value: description
@@ -4752,7 +5045,7 @@ function Select(props) {
     label,
     onChange,
     options = [],
-    value,
+    value = '',
     disabled,
     onFocus,
     onBlur
@@ -4801,18 +5094,18 @@ function Select(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} [props.description]
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.getOptions
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
  */
 function SelectEntry(props) {
   const {
@@ -4914,20 +5207,20 @@ function TextArea(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} props.description
- * @param {boolean} props.debounce
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {number} props.rows
- * @param {boolean} props.monospace
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
   const {
@@ -5030,19 +5323,19 @@ function Textfield(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
   const {
@@ -5127,6 +5420,7 @@ function getService(type, strict) {}
 const PropertiesPanelContext = createContext({
   getService
 });
+var FormPropertiesPanelContext = PropertiesPanelContext;
 
 function arrayAdd(array, index, item) {
   const copy = [...array];
@@ -5278,7 +5572,7 @@ function Action(props) {
 function useService (type, strict) {
   const {
     getService
-  } = useContext(PropertiesPanelContext);
+  } = useContext(FormPropertiesPanelContext);
   return getService(type, strict);
 }
 
@@ -5893,6 +6187,46 @@ const SimpleStringComponent = props => {
   });
 };
 
+function simpleBoolEntryFactory(options) {
+  const {
+    id,
+    label,
+    path,
+    props
+  } = options;
+  const {
+    editField,
+    field
+  } = props;
+  return {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    component: SimpleBoolComponent,
+    isEdited: isEdited$7
+  };
+}
+const SimpleBoolComponent = props => {
+  const {
+    id,
+    label,
+    path,
+    field,
+    editField
+  } = props;
+  const getValue = () => get(field, path, '');
+  const setValue = value => editField(field, path, value);
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue
+  });
+};
+
 function LabelEntry(props) {
   const {
     field
@@ -6072,11 +6406,15 @@ function NumberDecimalDigits(props) {
     debounce,
     label: 'Decimal digits',
     element: field,
-    min: 0,
-    step: 1,
+    step: 'any',
     getValue,
     id,
-    setValue
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 0) return 'Should be greater than or equal to zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
   });
 }
 function NumberArrowStep(props) {
@@ -6166,7 +6504,7 @@ function SerializeToString(props) {
     element: field,
     getValue,
     id,
-    label: 'Serialize to string',
+    label: 'Output as string',
     description: 'Allows arbitrary precision values',
     setValue
   });
@@ -6409,6 +6747,25 @@ function TimeFormatSelect(props) {
   });
 }
 
+function SelectEntries(props) {
+  const {
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'select') {
+    return [];
+  }
+  const entries = [simpleBoolEntryFactory({
+    id: 'searchable',
+    path: ['searchable'],
+    label: 'Searchable',
+    props
+  })];
+  return entries;
+}
+
 function ValueEntry(props) {
   const {
     editField,
@@ -6447,7 +6804,7 @@ function Label(props) {
   const debounce = useService('debounce');
   const setValue = value => {
     const values = get(field, ['values']);
-    return editField(field, 'values', set(values, [index, 'label'], value));
+    return editField(field, 'values', set$1(values, [index, 'label'], value));
   };
   const getValue = () => {
     return get(field, ['values', index, 'label']);
@@ -6473,7 +6830,7 @@ function Value$1(props) {
   const debounce = useService('debounce');
   const setValue = value => {
     const values = get(field, ['values']);
-    return editField(field, 'values', set(values, [index, 'value'], value));
+    return editField(field, 'values', set$1(values, [index, 'value'], value));
   };
   const getValue = () => {
     return get(field, ['values', index, 'value']);
@@ -6788,7 +7145,7 @@ function AdornerEntry(props) {
   const onChange = key => {
     return value => {
       const appearance = get(field, ['appearance'], {});
-      editField(field, ['appearance'], set(appearance, [key], value));
+      editField(field, ['appearance'], set$1(appearance, [key], value));
     };
   };
   const getValue = key => {
@@ -6938,6 +7295,9 @@ function GeneralGroup(field, editField) {
   }), ...AltTextEntry({
     field,
     editField
+  }), ...SelectEntries({
+    field,
+    editField
   }), ...DisabledEntry({
     field,
     editField
@@ -7001,14 +7361,14 @@ function ValidationGroup(field, editField) {
     type
   } = field;
   const validate = get(field, ['validate'], {});
-  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate?.validationType);
+  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate && validate.validationType);
   if (!(INPUTS.includes(type) && type !== 'checkbox' && type !== 'checklist' && type !== 'taglist')) {
     return null;
   }
   const onChange = key => {
     return value => {
       const validate = get(field, ['validate'], {});
-      editField(field, ['validate'], set(validate, [key], value));
+      editField(field, ['validate'], set$1(validate, [key], value));
     };
   };
   const getValue = key => {
@@ -7030,6 +7390,7 @@ function ValidationGroup(field, editField) {
       component: ValidationType,
       getValue,
       field,
+      editField,
       isEdited: isEdited$1,
       onChange
     });
@@ -7148,7 +7509,7 @@ function Pattern(props) {
     element: field,
     getValue: getValue('pattern'),
     id,
-    label: 'Regular expression pattern',
+    label: 'Custom regular expression',
     setValue: onChange('pattern')
   });
 }
@@ -7196,15 +7557,7 @@ function ValidationType(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  const clearCustomValidation = () => {
-    onChange('minLength')(undefined);
-    onChange('maxLength')(undefined);
-    onChange('pattern')(undefined);
-  };
   const setValue = validationType => {
-    if (validationType) {
-      clearCustomValidation();
-    }
     onChange('validationType')(validationType || undefined);
   };
   return SelectEntry({
@@ -7212,7 +7565,7 @@ function ValidationType(props) {
     element: field,
     getValue: getValue('validationType'),
     id,
-    label: 'Regular expression validation',
+    label: 'Validation pattern',
     setValue,
     getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS)
   });
@@ -7458,7 +7811,7 @@ function FormPropertiesPanel(props) {
     "data-field": selectedFormField && selectedFormField.id,
     onFocusCapture: onFocus,
     onBlurCapture: onBlur,
-    children: jsx(PropertiesPanelContext.Provider, {
+    children: jsx(FormPropertiesPanelContext.Provider, {
       value: propertiesPanelContext,
       children: jsx(PropertiesPanel, {
         element: selectedFormField,
@@ -7722,7 +8075,7 @@ class FormEditor {
    * @param {any} value
    */
   setProperty(property, value) {
-    const properties = set(this._getState().properties, [property], value);
+    const properties = set$1(this._getState().properties, [property], value);
     this._setState({
       properties
     });