@bpmn-io/form-js-editor 0.11.1 → 0.12.1

package/dist/index.cjs

@@ -1,30 +1,19 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var formJsViewer = require('@bpmn-io/form-js-viewer');
 var Ids = require('ids');
 var minDash = require('min-dash');
+var classnames = require('classnames');
+var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('preact');
 var hooks$1 = require('preact/hooks');
 var dragula = require('dragula');
-var jsxRuntime = require('preact/jsx-runtime');
 var React = require('preact/compat');
 var minDom = require('min-dom');
 var arrayMove = require('array-move');
-var classnames = require('classnames');
 var FeelEditor = require('@bpmn-io/feel-editor');
 var Big = require('big.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Ids__default = /*#__PURE__*/_interopDefaultLegacy(Ids);
-var dragula__default = /*#__PURE__*/_interopDefaultLegacy(dragula);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var FeelEditor__default = /*#__PURE__*/_interopDefaultLegacy(FeelEditor);
-var Big__default = /*#__PURE__*/_interopDefaultLegacy(Big);
-
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY$2 = 1000;
 var slice = Array.prototype.slice;
@@ -683,9 +672,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 = formJsViewer.iconsByType('text');
+  if (!text) {
+    return jsxRuntime.jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxRuntime.jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsxRuntime.jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is empty"]
+      })
+    });
+  }
+  if (formJsViewer.isExpression(text)) {
+    return jsxRuntime.jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxRuntime.jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsxRuntime.jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is populated by an expression"]
+      })
+    });
+  }
+  return jsxRuntime.jsx(formJsViewer.Text, {
+    ...props,
+    disableLinks: true
+  });
+}
+EditorText.create = formJsViewer.Text.create;
+EditorText.type = formJsViewer.Text.type;
+EditorText.keyed = formJsViewer.Text.keyed;
+
+const editorFormFields = [EditorText];
+
+class EditorFormFields extends formJsViewer.FormFields {
+  constructor() {
+    super();
+    editorFormFields.forEach(formField => {
+      this.register(formField.type, formField);
+    });
+  }
+}
+
 const DragAndDropContext = preact.createContext({
   drake: null
 });
+var DragAndDropContext$1 = DragAndDropContext;
 
 /**
  * @param {string} type
@@ -697,11 +775,12 @@ function getService$1(type, strict) {}
 const FormEditorContext = preact.createContext({
   getService: getService$1
 });
+var FormEditorContext$1 = FormEditorContext;
 
 function useService$1 (type, strict) {
   const {
     getService
-  } = hooks$1.useContext(FormEditorContext);
+  } = hooks$1.useContext(FormEditorContext$1);
   return getService(type, strict);
 }
 
@@ -709,14 +788,157 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var ListDeleteIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React__default['default'].createElement("svg", _extends({
+}) => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "11",
   height: "14"
-}, props), /*#__PURE__*/React__default['default'].createElement("path", {
+}, props), /*#__PURE__*/React.createElement("path", {
   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 = formJsViewer.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] = hooks$1.useState(PALETTE_ENTRIES);
+  const [searchTerm, setSearchTerm] = hooks$1.useState('');
+  const inputRef = hooks$1.useRef();
+  const groups = groupEntries(entries);
+
+  // filter entries on search change
+  hooks$1.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 = hooks$1.useCallback(event => {
+    setSearchTerm(() => event.target.value);
+  }, [setSearchTerm]);
+  const handleClear = hooks$1.useCallback(event => {
+    setSearchTerm('');
+    inputRef.current.focus();
+  }, [inputRef, setSearchTerm]);
+  return jsxRuntime.jsxs("div", {
+    class: "fjs-palette",
+    children: [jsxRuntime.jsx("div", {
+      class: "fjs-palette-header",
+      title: "Components",
+      children: "Components"
+    }), jsxRuntime.jsxs("div", {
+      class: "fjs-palette-search-container",
+      children: [jsxRuntime.jsx("span", {
+        class: "fjs-palette-search-icon",
+        children: jsxRuntime.jsx(SearchIcon, {})
+      }), jsxRuntime.jsx("input", {
+        class: "fjs-palette-search",
+        ref: inputRef,
+        type: "text",
+        placeholder: "Search components",
+        value: searchTerm,
+        onInput: handleInput
+      }), searchTerm && jsxRuntime.jsx("button", {
+        title: "Clear content",
+        class: "fjs-palette-search-clear",
+        onClick: handleClear,
+        children: jsxRuntime.jsx(CloseIcon, {})
+      })]
+    }), jsxRuntime.jsxs("div", {
+      class: "fjs-palette-entries",
+      children: [groups.map(({
+        label,
+        entries,
+        id
+      }) => jsxRuntime.jsxs("div", {
+        class: "fjs-palette-group",
+        "data-group-id": id,
+        children: [jsxRuntime.jsx("span", {
+          class: "fjs-palette-group-title",
+          children: label
+        }), jsxRuntime.jsx("div", {
+          class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
+          children: entries.map(({
+            label,
+            type
+          }) => {
+            const Icon = formJsViewer.iconsByType(type);
+            return jsxRuntime.jsxs("div", {
+              class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+              "data-field-type": type,
+              title: `Create a ${label} element`,
+              children: [Icon ? jsxRuntime.jsx(Icon, {
+                class: "fjs-palette-field-icon",
+                width: "36",
+                height: "36",
+                viewBox: "0 0 54 54"
+              }) : null, jsxRuntime.jsx("span", {
+                class: "fjs-palette-field-text",
+                children: label
+              })]
+            });
+          })
+        })]
+      })), groups.length == 0 && jsxRuntime.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 = minDom.classes(document.body);
+  classes.removeMatching(CURSOR_CLS_PATTERN);
+  if (mode) {
+    classes.add('fjs-cursor-' + mode);
+  }
+}
+function unset() {
+  set(null);
+}
+
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -840,8 +1062,11 @@ function FormEditor$1(props) {
     drake
   };
   hooks$1.useEffect(() => {
+    const handleDragEvent = (type, context) => {
+      return eventBus.fire(type, context);
+    };
     const createDragulaInstance = () => {
-      const dragulaInstance = dragula__default['default']({
+      const dragulaInstance = dragula({
         isContainer(el) {
           return el.classList.contains('fjs-drag-container');
         },
@@ -854,6 +1079,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) {
@@ -910,9 +1185,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 {
@@ -950,7 +1223,7 @@ function FormEditor$1(props) {
   }, [propertiesPanelRef, propertiesPanel, hasDefaultPropertiesPanel]);
   return jsxRuntime.jsxs("div", {
     class: "fjs-form-editor",
-    children: [jsxRuntime.jsxs(DragAndDropContext.Provider, {
+    children: [jsxRuntime.jsxs(DragAndDropContext$1.Provider, {
       value: dragAndDropContext,
       children: [hasDefaultPalette && jsxRuntime.jsx("div", {
         class: "fjs-editor-palette-container",
@@ -988,14 +1261,32 @@ function getFormFieldIndex(parent, formField) {
 function CreatePreview(props) {
   const {
     drake
-  } = hooks$1.useContext(DragAndDropContext);
+  } = hooks$1.useContext(DragAndDropContext$1);
   function handleCloned(clone, original, type) {
     const fieldType = clone.dataset.fieldType;
-    const Icon = formJsViewer.iconsByType[fieldType];
+    const Icon = formJsViewer.iconsByType(fieldType);
+    const {
+      label
+    } = findPaletteEntry(fieldType);
     if (fieldType) {
       clone.innerHTML = '';
       clone.class = 'gu-mirror';
-      preact.render(jsxRuntime.jsx(Icon, {}), clone);
+      if (original.classList.contains('fjs-palette-field')) {
+        preact.render(jsxRuntime.jsxs("div", {
+          class: "fjs-palette-field",
+          children: [jsxRuntime.jsx(Icon, {
+            class: "fjs-palette-field-icon",
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          }), jsxRuntime.jsx("span", {
+            class: "fjs-palette-field-text",
+            children: label
+          })]
+        }), clone);
+      } else {
+        preact.render(jsxRuntime.jsx(Icon, {}), clone);
+      }
     }
   }
   hooks$1.useEffect(() => {
@@ -1016,6 +1307,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) {
@@ -1041,7 +1335,7 @@ class Renderer {
       }
       return jsxRuntime.jsx("div", {
         class: `fjs-container fjs-editor-container ${compact ? 'fjs-editor-compact' : ''}`,
-        children: jsxRuntime.jsx(FormEditorContext.Provider, {
+        children: jsxRuntime.jsx(FormEditorContext$1.Provider, {
           value: formEditorContext,
           children: jsxRuntime.jsx(FormEditor$1, {})
         })
@@ -1059,7 +1353,7 @@ Renderer.$inject = ['config.renderer', 'eventBus', 'formEditor', 'injector'];
 
 var renderModule = {
   __init__: ['formFields', 'renderer'],
-  formFields: ['type', formJsViewer.FormFields],
+  formFields: ['type', EditorFormFields],
   renderer: ['type', Renderer]
 };
 
@@ -2910,79 +3204,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 jsxRuntime.jsxs("div", {
-    class: "fjs-palette",
-    children: [jsxRuntime.jsxs("div", {
-      class: "fjs-palette-header",
-      title: "Form elements library",
-      children: [jsxRuntime.jsx("span", {
-        class: "fjs-hide-compact",
-        children: "FORM ELEMENTS "
-      }), "LIBRARY"]
-    }), jsxRuntime.jsx("div", {
-      class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-      children: types.map(({
-        label,
-        type
-      }) => {
-        const Icon = formJsViewer.iconsByType[type];
-        return jsxRuntime.jsxs("div", {
-          class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-          "data-field-type": type,
-          title: `Create a ${label} element`,
-          children: [Icon ? jsxRuntime.jsx(Icon, {
-            class: "fjs-palette-field-icon",
-            width: "36",
-            height: "36",
-            viewBox: "0 0 54 54"
-          }) : null, jsxRuntime.jsx("span", {
-            class: "fjs-palette-field-text",
-            children: label
-          })]
-        });
-      })
-    })]
-  });
-}
-
 class PaletteRenderer {
   constructor(paletteConfig, eventBus) {
     const {
@@ -3204,19 +3425,19 @@ const ErrorsContext = preact.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 = preact.createContext({
   eventBus: null
@@ -3228,20 +3449,20 @@ const LayoutContext = preact.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 {
@@ -3256,11 +3477,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 = hooks$1.useContext(EventContext);
@@ -3290,20 +3511,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 {
@@ -3322,11 +3543,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) {
@@ -3337,12 +3558,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 {
@@ -3373,20 +3594,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) {
   hooks$1.useEffect(() => {
@@ -3425,19 +3646,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 = hooks$1.useRef(callback);
@@ -3487,7 +3708,7 @@ function Group(props) {
     "data-group-id": 'group-' + id,
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
-      class: classnames__default['default']('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
         title: label,
@@ -3504,7 +3725,7 @@ function Group(props) {
         })]
       })]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default['default']('bio-properties-panel-group-entries', open ? 'open' : ''),
+      class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: entries.map(entry => {
@@ -3529,13 +3750,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 {
@@ -3560,72 +3781,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 {
@@ -3713,7 +3934,7 @@ function PropertiesPanel(props) {
           children: jsxRuntime.jsx(EventContext.Provider, {
             value: eventContext,
             children: jsxRuntime.jsxs("div", {
-              class: classnames__default['default']('bio-properties-panel', layout.open ? 'open' : ''),
+              class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
               children: [jsxRuntime.jsx(Header, {
                 element: element,
                 headerProvider: headerProvider
@@ -3781,13 +4002,13 @@ function CollapsibleEntry(props) {
   const placeholderLabel = '<empty>';
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
-    class: classnames__default['default']('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
+    class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
     children: [jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-collapsible-entry-header",
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
         title: label || placeholderLabel,
-        class: classnames__default['default']('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
+        class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
         title: "Toggle list item",
@@ -3802,7 +4023,7 @@ function CollapsibleEntry(props) {
         children: jsxRuntime.jsx(DeleteIcon, {})
       }) : null]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default['default']('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
+      class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: entries.map(entry => {
@@ -3850,8 +4071,8 @@ function ListItem(props) {
 }
 const noop$2 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -3956,7 +4177,7 @@ function ListGroup(props) {
     "data-group-id": 'group-' + id,
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
-      class: classnames__default['default']('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$2,
       children: [jsxRuntime.jsx("div", {
         title: label,
@@ -3985,7 +4206,7 @@ function ListGroup(props) {
         }) : null]
       })]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default['default']('bio-properties-panel-list', open && hasItems ? 'open' : ''),
+      class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: ordering.map((o, index) => {
@@ -4014,8 +4235,8 @@ function ListGroup(props) {
 
 // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 function sortItems(items) {
   return minDash.sortBy(items, i => i.label.toLowerCase());
@@ -4089,17 +4310,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 {
@@ -4187,10 +4408,10 @@ const CodeEditor = React.forwardRef((props, ref) => {
   hooks$1.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) {
@@ -4202,7 +4423,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
         onFeelToggle();
       }
     };
-    editor = new FeelEditor__default['default']({
+    editor = new FeelEditor({
       container: inputRef.current,
       onChange: handleInput,
       onKeyDown: onKeyDown,
@@ -4238,10 +4459,10 @@ const CodeEditor = React.forwardRef((props, ref) => {
     ref.current.focus();
   };
   return jsxRuntime.jsx("div", {
-    class: classnames__default['default']('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
+    class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
     children: jsxRuntime.jsx("div", {
       name: props.name,
-      class: classnames__default['default']('bio-properties-panel-input', localValue ? 'edited' : null),
+      class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
       ref: inputRef,
       onClick: handleClick
     })
@@ -4261,10 +4482,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 {
@@ -4285,7 +4506,7 @@ function FeelIcon(props) {
     }
   };
   return jsxRuntime.jsx("button", {
-    class: classnames__default['default']('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
+    class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
     title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
@@ -4538,17 +4759,17 @@ const OptionalFeelTextArea = React.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 {
@@ -4604,7 +4825,7 @@ function FeelEntry(props) {
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default['default'](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(FeelTextfield, {
       debounce: debounce,
@@ -4633,19 +4854,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 jsxRuntime.jsx(FeelEntry, {
@@ -4724,21 +4945,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 {
@@ -4754,25 +4976,55 @@ function NumberFieldEntry(props) {
     setValue,
     step,
     onFocus,
-    onBlur
+    onBlur,
+    validate
   } = props;
-  const value = getValue(element);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks$1.useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks$1.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks$1.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (minDash.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 jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-entry",
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.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), jsxRuntime.jsx(Description$1, {
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description$1, {
       forId: id,
       element: element,
       value: description
@@ -4794,7 +5046,7 @@ function Select(props) {
     label,
     onChange,
     options = [],
-    value,
+    value = '',
     disabled,
     onFocus,
     onBlur
@@ -4843,18 +5095,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 {
@@ -4873,7 +5125,7 @@ function SelectEntry(props) {
   const options = getOptions(element);
   const error = useError(id);
   return jsxRuntime.jsxs("div", {
-    class: classnames__default['default']('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Select, {
       id: id,
@@ -4944,7 +5196,7 @@ function TextArea(props) {
       id: prefixId$2(id),
       name: id,
       spellCheck: "false",
-      class: classnames__default['default']('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -4956,20 +5208,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 {
@@ -4989,7 +5241,7 @@ function TextAreaEntry(props) {
   const value = getValue(element);
   const error = useError(id);
   return jsxRuntime.jsxs("div", {
-    class: classnames__default['default']('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(TextArea, {
       id: id,
@@ -5072,19 +5324,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 {
@@ -5128,7 +5380,7 @@ function TextfieldEntry(props) {
   }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default['default']('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Textfield, {
       debounce: debounce,
@@ -5169,6 +5421,7 @@ function getService(type, strict) {}
 const PropertiesPanelContext = preact.createContext({
   getService
 });
+var FormPropertiesPanelContext = PropertiesPanelContext;
 
 function arrayAdd(array, index, item) {
   const copy = [...array];
@@ -5176,7 +5429,7 @@ function arrayAdd(array, index, item) {
   return copy;
 }
 function countDecimals(number) {
-  const num = Big__default['default'](number);
+  const num = Big(number);
   if (num.toString() === num.toFixed(0)) return 0;
   return num.toFixed().split('.')[1].length || 0;
 }
@@ -5234,7 +5487,7 @@ const PropertiesPanelHeaderProvider = {
     const {
       type
     } = field;
-    const Icon = formJsViewer.iconsByType[type];
+    const Icon = formJsViewer.iconsByType(type);
     if (Icon) {
       return () => jsxRuntime.jsx(Icon, {
         width: "36",
@@ -5320,7 +5573,7 @@ function Action(props) {
 function useService (type, strict) {
   const {
     getService
-  } = hooks$1.useContext(PropertiesPanelContext);
+  } = hooks$1.useContext(FormPropertiesPanelContext);
   return getService(type, strict);
 }
 
@@ -5594,7 +5847,7 @@ function DefaultValueNumber(props) {
     if (!isValidNumber(value)) return;
 
     // Enforces decimal notation so that we do not submit defaults in exponent form
-    return serializeToString ? Big__default['default'](value).toFixed() : value;
+    return serializeToString ? Big(value).toFixed() : value;
   };
   const setValue = value => {
     let newValue;
@@ -5935,6 +6188,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 = () => minDash.get(field, path, '');
+  const setValue = value => editField(field, path, value);
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue
+  });
+};
+
 function LabelEntry(props) {
   const {
     field
@@ -6114,11 +6407,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) {
@@ -6153,10 +6450,10 @@ function NumberArrowStep(props) {
     validate: value => {
       if (value === undefined || value === null) return;
       if (!isValidNumber(value)) return 'Should be a valid number.';
-      if (Big__default['default'](value).cmp(0) <= 0) return 'Should be greater than zero.';
+      if (Big(value).cmp(0) <= 0) return 'Should be greater than zero.';
       if (decimalDigitsSet) {
-        const minimumValue = Big__default['default'](`1e-${decimalDigits}`);
-        if (Big__default['default'](value).cmp(minimumValue) < 0) return `Should be at least ${minimumValue.toString()}.`;
+        const minimumValue = Big(`1e-${decimalDigits}`);
+        if (Big(value).cmp(minimumValue) < 0) return `Should be at least ${minimumValue.toString()}.`;
         if (countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits.`;
       }
     }
@@ -6200,7 +6497,7 @@ function SerializeToString(props) {
   const setValue = value => {
     // Whenever changing the formatting, make sure to change the default value type along with it
     if (defaultValue || defaultValue === 0) {
-      editField(field, ['defaultValue'], value ? Big__default['default'](defaultValue).toFixed() : Number(defaultValue));
+      editField(field, ['defaultValue'], value ? Big(defaultValue).toFixed() : Number(defaultValue));
     }
     return editField(field, path, value);
   };
@@ -6208,7 +6505,7 @@ function SerializeToString(props) {
     element: field,
     getValue,
     id,
-    label: 'Serialize to string',
+    label: 'Output as string',
     description: 'Allows arbitrary precision values',
     setValue
   });
@@ -6451,6 +6748,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,
@@ -6980,6 +7296,9 @@ function GeneralGroup(field, editField) {
   }), ...AltTextEntry({
     field,
     editField
+  }), ...SelectEntries({
+    field,
+    editField
   }), ...DisabledEntry({
     field,
     editField
@@ -7026,7 +7345,7 @@ function ConstraintsGroup(field, editField) {
 
 const VALIDATION_TYPE_OPTIONS = {
   custom: {
-    value: undefined,
+    value: '',
     label: 'Custom'
   },
   email: {
@@ -7043,7 +7362,7 @@ function ValidationGroup(field, editField) {
     type
   } = field;
   const validate = minDash.get(field, ['validate'], {});
-  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate?.validationType);
+  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate.validationType);
   if (!(INPUTS.includes(type) && type !== 'checkbox' && type !== 'checklist' && type !== 'taglist')) {
     return null;
   }
@@ -7191,7 +7510,7 @@ function Pattern(props) {
     element: field,
     getValue: getValue('pattern'),
     id,
-    label: 'Regular expression pattern',
+    label: 'Custom regular expression',
     setValue: onChange('pattern')
   });
 }
@@ -7247,7 +7566,7 @@ function ValidationType(props) {
     element: field,
     getValue: getValue('validationType'),
     id,
-    label: 'Regular expression validation',
+    label: 'Validation pattern',
     setValue,
     getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS)
   });
@@ -7493,7 +7812,7 @@ function FormPropertiesPanel(props) {
     "data-field": selectedFormField && selectedFormField.id,
     onFocusCapture: onFocus,
     onBlurCapture: onBlur,
-    children: jsxRuntime.jsx(PropertiesPanelContext.Provider, {
+    children: jsxRuntime.jsx(FormPropertiesPanelContext.Provider, {
       value: propertiesPanelContext,
       children: jsxRuntime.jsx(PropertiesPanel, {
         element: selectedFormField,
@@ -7576,7 +7895,7 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
-const ids = new Ids__default['default']([32, 36, 1]);
+const ids = new Ids([32, 36, 1]);
 
 /**
  * @typedef { import('./types').Injector } Injector
@@ -7882,9 +8201,7 @@ function createFormEditor(options) {
 
 Object.defineProperty(exports, 'schemaVersion', {
   enumerable: true,
-  get: function () {
-    return formJsViewer.schemaVersion;
-  }
+  get: function () { return formJsViewer.schemaVersion; }
 });
 exports.FormEditor = FormEditor;
 exports.createFormEditor = createFormEditor;