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

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

@@ -168,6 +168,7 @@
  * Context Pad
  */
 .fjs-editor-container .fjs-context-pad {
+  z-index: 2;
   position: absolute;
   top: 3px;
   right: 3px;

package/dist/index.cjs

@@ -717,7 +717,7 @@ function EditorText(props) {
     type,
     text = ''
   } = props.field;
-  const Icon = formJsViewer.iconsByType['text'];
+  const Icon = formJsViewer.iconsByType('text');
   if (!text) {
     return jsxRuntime.jsx("div", {
       class: editorFormFieldClasses(type),
@@ -883,11 +883,11 @@ function Palette(props) {
             label,
             type
           }) => {
-            const Icon = formJsViewer.iconsByType[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`,
+              title: `Create ${getIndefiniteArticle(type)} ${label} element`,
               children: [Icon ? jsxRuntime.jsx(Icon, {
                 class: "fjs-palette-field-icon",
                 width: "36",
@@ -926,6 +926,12 @@ function groupEntries(entries) {
   });
   return groups.filter(g => g.entries.length);
 }
+function getIndefiniteArticle(type) {
+  if (['image'].includes(type)) {
+    return 'an';
+  }
+  return 'a';
+}
 
 const CURSOR_CLS_PATTERN = /^fjs-cursor-.*$/;
 function set(mode) {
@@ -1264,7 +1270,7 @@ function CreatePreview(props) {
   } = 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);
@@ -5487,7 +5493,7 @@ const PropertiesPanelHeaderProvider = {
     const {
       type
     } = field;
-    const Icon = formJsViewer.iconsByType[type];
+    const Icon = formJsViewer.iconsByType(type);
     if (Icon) {
       return () => jsxRuntime.jsx(Icon, {
         width: "36",
@@ -5734,6 +5740,7 @@ function Description(props) {
   });
 }
 
+const EMPTY_OPTION = null;
 function DefaultOptionEntry(props) {
   const {
     editField,
@@ -5879,13 +5886,14 @@ function DefaultValueSingleSelect(props) {
     label
   } = props;
   const {
-    defaultValue,
+    defaultValue = EMPTY_OPTION,
     values = []
   } = field;
   const path = ['defaultValue'];
   const getOptions = () => {
     return [{
-      label: '<none>'
+      label: '<none>',
+      value: EMPTY_OPTION
     }, ...values];
   };
   const setValue = value => {
@@ -7345,7 +7353,7 @@ function ConstraintsGroup(field, editField) {
 
 const VALIDATION_TYPE_OPTIONS = {
   custom: {
-    value: undefined,
+    value: '',
     label: 'Custom'
   },
   email: {
@@ -7362,7 +7370,7 @@ function ValidationGroup(field, editField) {
     type
   } = field;
   const validate = minDash.get(field, ['validate'], {});
-  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate && 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;
   }