@bpmn-io/form-js-editor 1.10.1 → 1.11.0

package/dist/index.es.js

@@ -1496,6 +1496,8 @@ function Palette(props) {
   const initialPaletteEntries = useRef(collectPaletteEntries(formFields));
   const [paletteEntries, setPaletteEntries] = useState(initialPaletteEntries.current);
   const [searchTerm, setSearchTerm] = useState('');
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
   const groups = groupEntries(paletteEntries);
   const simplifyString = useCallback(str => {
@@ -1618,7 +1620,8 @@ function collectPaletteEntries(formFields) {
       config: fieldConfig
     } = formField;
     return {
-      label: fieldConfig.label,
+      // fieldConfig.label is used to maintain backwards compatibility with custom form fields
+      label: fieldConfig.name || fieldConfig.label,
       type: type,
       group: fieldConfig.group,
       icon: fieldConfig.icon,
@@ -1921,6 +1924,29 @@ class Dragging {
         }
         return !target.classList.contains(DRAG_NO_DROP_CLS);
       },
+      transformOffset: (offset, event, element) => {
+        if (element.classList.contains(DRAG_ROW_MOVE_CLS)) {
+          const rowOffset = {
+            x: -5,
+            y: -60
+          };
+          return {
+            left: event.clientX + rowOffset.x,
+            top: event.clientY + rowOffset.y
+          };
+        }
+        if (element.classList.contains(DRAG_MOVE_CLS)) {
+          const iconOffset = {
+            x: -5,
+            y: -15
+          };
+          return {
+            left: event.clientX + iconOffset.x,
+            top: event.clientY + iconOffset.y
+          };
+        }
+        return offset;
+      },
       slideFactorX: 10,
       slideFactorY: 5
     };
@@ -2216,6 +2242,8 @@ function Element$1(props) {
     type,
     showOutline
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const ref = useRef();
   const [hovered, setHovered] = useState(false);
   useEffect(() => {
@@ -7224,12 +7252,13 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.length)) {
+  const handleLint = useStaticCallback((lint = []) => {
+    const syntaxError = lint.some(report => report.type === 'Syntax Error');
+    if (syntaxError) {
+      onError('Unparsable FEEL expression.');
+    } else {
       onError(undefined);
-      return;
     }
-    onError('Unparsable FEEL expression.');
   });
   const handlePopupOpen = (type = 'feel') => {
     const popupOptions = {
@@ -8961,82 +8990,6 @@ const FormPropertiesPanelContext = createContext({
   getService
 });
 
-function arrayAdd(array, index, item) {
-  const copy = [...array];
-  copy.splice(index, 0, item);
-  return copy;
-}
-function countDecimals(number) {
-  const num = Big(number);
-  if (num.toString() === num.toFixed(0)) return 0;
-  return num.toFixed().split('.')[1].length || 0;
-}
-
-/**
- *
- * @param {unknown} value
- * @returns {boolean}
- */
-function isValidNumber(value) {
-  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
-}
-function textToLabel(text) {
-  if (typeof text != 'string') return null;
-  for (const line of text.split('\n')) {
-    const displayLine = line.trim();
-
-    // we use the first non-whitespace line in the text as label
-    if (displayLine !== '') {
-      return displayLine;
-    }
-  }
-  return null;
-}
-
-/**
- * @param {string} path
- */
-function isValidDotPath(path) {
-  return /^\w+(\.\w+)*$/.test(path);
-}
-
-/**
- * @param {string} path
- */
-function isProhibitedPath(path) {
-  const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
-  return path.split('.').some(segment => prohibitedSegments.includes(segment));
-}
-const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
-const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
-const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
-function hasEntryConfigured(formFieldDefinition, entryId) {
-  const {
-    propertiesPanelEntries = []
-  } = formFieldDefinition;
-  if (!propertiesPanelEntries.length) {
-    return false;
-  }
-  return propertiesPanelEntries.some(id => id === entryId);
-}
-function hasOptionsGroupsConfigured(formFieldDefinition) {
-  const {
-    propertiesPanelEntries = []
-  } = formFieldDefinition;
-  if (!propertiesPanelEntries.length) {
-    return false;
-  }
-  return propertiesPanelEntries.some(id => id === 'values');
-}
-
-/**
- * @param {string} path
- */
-function hasIntegerPathSegment(path) {
-  return path.split('.').some(segment => /^\d+$/.test(segment));
-}
-
-const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 function getPropertiesPanelHeaderProvider(options = {}) {
   const {
     getDocumentationRef,
@@ -9047,19 +9000,8 @@ function getPropertiesPanelHeaderProvider(options = {}) {
       const {
         type
       } = field;
-      if (headerlessTypes.includes(type)) {
-        return '';
-      }
-      if (type === 'text') {
-        return textToLabel(field.text);
-      }
-      if (type === 'image') {
-        return field.alt;
-      }
-      if (type === 'default') {
-        return field.id;
-      }
-      return field.label;
+      const fieldDefinition = formFields.get(type).config;
+      return fieldDefinition.getSubheading ? fieldDefinition.getSubheading(field) : field.label;
     },
     getElementIcon: field => {
       const {
@@ -9088,7 +9030,7 @@ function getPropertiesPanelHeaderProvider(options = {}) {
         return 'Form';
       }
       const fieldDefinition = formFields.get(type).config;
-      return fieldDefinition.label || type;
+      return fieldDefinition.name || fieldDefinition.label || type;
     },
     getDocumentationRef
   };
@@ -9489,6 +9431,69 @@ function asArray(length) {
   }).map((_, i) => i + 1);
 }
 
+function arrayAdd(array, index, item) {
+  const copy = [...array];
+  copy.splice(index, 0, item);
+  return copy;
+}
+function countDecimals(number) {
+  const num = Big(number);
+  if (num.toString() === num.toFixed(0)) return 0;
+  return num.toFixed().split('.')[1].length || 0;
+}
+
+/**
+ *
+ * @param {unknown} value
+ * @returns {boolean}
+ */
+function isValidNumber(value) {
+  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
+}
+
+/**
+ * @param {string} path
+ */
+function isValidDotPath(path) {
+  return /^\w+(\.\w+)*$/.test(path);
+}
+
+/**
+ * @param {string} path
+ */
+function isProhibitedPath(path) {
+  const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
+  return path.split('.').some(segment => prohibitedSegments.includes(segment));
+}
+const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
+const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
+const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+function hasEntryConfigured(formFieldDefinition, entryId) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === entryId);
+}
+function hasOptionsGroupsConfigured(formFieldDefinition) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === 'values');
+}
+
+/**
+ * @param {string} path
+ */
+function hasIntegerPathSegment(path) {
+  return path.split('.').some(segment => /^\d+$/.test(segment));
+}
+
 function DescriptionEntry(props) {
   const {
     editField,
@@ -9501,7 +9506,7 @@ function DescriptionEntry(props) {
     editField: editField,
     field: field,
     isEdited: isEdited$6,
-    isDefaultVisible: field => INPUTS.includes(field.type)
+    isDefaultVisible: field => field.type !== 'filepicker' && INPUTS.includes(field.type)
   });
   return entries;
 }
@@ -9534,7 +9539,7 @@ function Description(props) {
   });
 }
 
-const EMPTY_OPTION = null;
+const EMPTY_OPTION = '';
 function DefaultValueEntry(props) {
   const {
     editField,
@@ -9553,26 +9558,26 @@ function DefaultValueEntry(props) {
       return matchers(field);
     };
   }
-  const defaulValueBase = {
+  const defaultValueBase = {
     editField,
     field,
     id: 'defaultValue',
     label: 'Default value'
   };
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueCheckbox,
     isEdited: isEdited$3,
     isDefaultVisible: isDefaultVisible(field => field.type === 'checkbox')
   });
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueNumber,
     isEdited: isEdited,
     isDefaultVisible: isDefaultVisible(field => field.type === 'number')
   });
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueSingleSelect,
     isEdited: isEdited$3,
     isDefaultVisible: isDefaultVisible(field => field.type === 'radio' || field.type === 'select')
@@ -9581,13 +9586,13 @@ function DefaultValueEntry(props) {
   // todo(Skaiir): implement a multiselect equivalent (cf. https://github.com/bpmn-io/form-js/issues/265)
 
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueTextfield,
     isEdited: isEdited,
     isDefaultVisible: isDefaultVisible(field => field.type === 'textfield')
   });
   entries.push({
-    ...defaulValueBase,
+    ...defaultValueBase,
     component: DefaultValueTextarea,
     isEdited: isEdited$1,
     isDefaultVisible: isDefaultVisible(field => field.type === 'textarea')
@@ -10669,7 +10674,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$1,
+    description: description$2,
     element: field,
     getValue,
     id,
@@ -10679,7 +10684,7 @@ function Text(props) {
     variables
   });
 }
-const description$1 = jsxs(Fragment$1, {
+const description$2 = jsxs(Fragment$1, {
   children: ["Supports markdown and templating.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10721,7 +10726,7 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description,
+    description: description$1,
     element: field,
     getValue,
     id,
@@ -10735,7 +10740,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description = jsxs(Fragment$1, {
+const description$1 = jsxs(Fragment$1, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -12551,6 +12556,108 @@ function VersionTag(props) {
   });
 }
 
+function AcceptEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'accept',
+    component: Accept,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'filepicker'
+  });
+  return entries;
+}
+function Accept(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['accept'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Supported file formats',
+    singleLine: true,
+    setValue,
+    variables,
+    description
+  });
+}
+
+// helpers //////////
+
+const description = jsxs(Fragment$1, {
+  children: ["A comma-separated list of", ' ', jsx("a", {
+    href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
+    target: "_blank",
+    children: "file type specifiers"
+  })]
+});
+
+function MultipleEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'multiple',
+    component: Multiple,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'filepicker'
+  });
+  return entries;
+}
+function Multiple(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['multiple'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelToggleSwitchEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Upload multiple files',
+    inline: true,
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -12617,6 +12724,12 @@ function GeneralGroup(field, editField, getService) {
   }), ...SelectEntries({
     field,
     editField
+  }), ...AcceptEntry({
+    field,
+    editField
+  }), ...MultipleEntry({
+    field,
+    editField
   }), ...DisabledEntry({
     field,
     editField