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

package/dist/index.cjs

@@ -1516,6 +1516,8 @@ function Palette(props) {
   const initialPaletteEntries = hooks.useRef(collectPaletteEntries(formFields));
   const [paletteEntries, setPaletteEntries] = hooks.useState(initialPaletteEntries.current);
   const [searchTerm, setSearchTerm] = hooks.useState('');
+
+  /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = hooks.useRef();
   const groups = groupEntries(paletteEntries);
   const simplifyString = hooks.useCallback(str => {
@@ -1638,7 +1640,8 @@ function collectPaletteEntries(formFields) {
       config: fieldConfig
     } = formField;
     return {
-      label: fieldConfig.label,
+      // fieldConfig.label is used to maintain backwards compatibility with custom form fields
+      label: fieldConfig.name || fieldConfig.label,
       type: type,
       group: fieldConfig.group,
       icon: fieldConfig.icon,
@@ -1941,6 +1944,29 @@ class Dragging {
         }
         return !target.classList.contains(DRAG_NO_DROP_CLS);
       },
+      transformOffset: (offset, event, element) => {
+        if (element.classList.contains(DRAG_ROW_MOVE_CLS)) {
+          const rowOffset = {
+            x: -5,
+            y: -60
+          };
+          return {
+            left: event.clientX + rowOffset.x,
+            top: event.clientY + rowOffset.y
+          };
+        }
+        if (element.classList.contains(DRAG_MOVE_CLS)) {
+          const iconOffset = {
+            x: -5,
+            y: -15
+          };
+          return {
+            left: event.clientX + iconOffset.x,
+            top: event.clientY + iconOffset.y
+          };
+        }
+        return offset;
+      },
       slideFactorX: 10,
       slideFactorY: 5
     };
@@ -2236,6 +2262,8 @@ function Element$1(props) {
     type,
     showOutline
   } = field;
+
+  /** @type {import("preact").RefObject<HTMLDivElement>} */
   const ref = hooks.useRef();
   const [hovered, setHovered] = hooks.useState(false);
   hooks.useEffect(() => {
@@ -7244,12 +7272,13 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.length)) {
+  const handleLint = useStaticCallback((lint = []) => {
+    const syntaxError = lint.some(report => report.type === 'Syntax Error');
+    if (syntaxError) {
+      onError('Unparsable FEEL expression.');
+    } else {
       onError(undefined);
-      return;
     }
-    onError('Unparsable FEEL expression.');
   });
   const handlePopupOpen = (type = 'feel') => {
     const popupOptions = {
@@ -8981,82 +9010,6 @@ const FormPropertiesPanelContext = preact.createContext({
   getService
 });
 
-function arrayAdd(array, index, item) {
-  const copy = [...array];
-  copy.splice(index, 0, item);
-  return copy;
-}
-function countDecimals(number) {
-  const num = Big(number);
-  if (num.toString() === num.toFixed(0)) return 0;
-  return num.toFixed().split('.')[1].length || 0;
-}
-
-/**
- *
- * @param {unknown} value
- * @returns {boolean}
- */
-function isValidNumber(value) {
-  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
-}
-function textToLabel(text) {
-  if (typeof text != 'string') return null;
-  for (const line of text.split('\n')) {
-    const displayLine = line.trim();
-
-    // we use the first non-whitespace line in the text as label
-    if (displayLine !== '') {
-      return displayLine;
-    }
-  }
-  return null;
-}
-
-/**
- * @param {string} path
- */
-function isValidDotPath(path) {
-  return /^\w+(\.\w+)*$/.test(path);
-}
-
-/**
- * @param {string} path
- */
-function isProhibitedPath(path) {
-  const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
-  return path.split('.').some(segment => prohibitedSegments.includes(segment));
-}
-const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
-const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
-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,
@@ -9067,19 +9020,8 @@ function getPropertiesPanelHeaderProvider(options = {}) {
       const {
         type
       } = field;
-      if (headerlessTypes.includes(type)) {
-        return '';
-      }
-      if (type === 'text') {
-        return textToLabel(field.text);
-      }
-      if (type === 'image') {
-        return field.alt;
-      }
-      if (type === 'default') {
-        return field.id;
-      }
-      return field.label;
+      const fieldDefinition = formFields.get(type).config;
+      return fieldDefinition.getSubheading ? fieldDefinition.getSubheading(field) : field.label;
     },
     getElementIcon: field => {
       const {
@@ -9108,7 +9050,7 @@ function getPropertiesPanelHeaderProvider(options = {}) {
         return 'Form';
       }
       const fieldDefinition = formFields.get(type).config;
-      return fieldDefinition.label || type;
+      return fieldDefinition.name || fieldDefinition.label || type;
     },
     getDocumentationRef
   };
@@ -9509,6 +9451,69 @@ function asArray(length) {
   }).map((_, i) => i + 1);
 }
 
+function arrayAdd(array, index, item) {
+  const copy = [...array];
+  copy.splice(index, 0, item);
+  return copy;
+}
+function countDecimals(number) {
+  const num = Big(number);
+  if (num.toString() === num.toFixed(0)) return 0;
+  return num.toFixed().split('.')[1].length || 0;
+}
+
+/**
+ *
+ * @param {unknown} value
+ * @returns {boolean}
+ */
+function isValidNumber(value) {
+  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
+}
+
+/**
+ * @param {string} path
+ */
+function isValidDotPath(path) {
+  return /^\w+(\.\w+)*$/.test(path);
+}
+
+/**
+ * @param {string} path
+ */
+function isProhibitedPath(path) {
+  const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
+  return path.split('.').some(segment => prohibitedSegments.includes(segment));
+}
+const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
+const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
+const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+function hasEntryConfigured(formFieldDefinition, entryId) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === entryId);
+}
+function hasOptionsGroupsConfigured(formFieldDefinition) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === 'values');
+}
+
+/**
+ * @param {string} path
+ */
+function hasIntegerPathSegment(path) {
+  return path.split('.').some(segment => /^\d+$/.test(segment));
+}
+
 function DescriptionEntry(props) {
   const {
     editField,
@@ -9521,7 +9526,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;
 }
@@ -9554,7 +9559,7 @@ function Description(props) {
   });
 }
 
-const EMPTY_OPTION = null;
+const EMPTY_OPTION = '';
 function DefaultValueEntry(props) {
   const {
     editField,
@@ -9573,26 +9578,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')
@@ -9601,13 +9606,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')
@@ -10689,7 +10694,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$1,
+    description: description$2,
     element: field,
     getValue,
     id,
@@ -10699,7 +10704,7 @@ function Text(props) {
     variables
   });
 }
-const description$1 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$2 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports markdown and templating.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10741,7 +10746,7 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description,
+    description: description$1,
     element: field,
     getValue,
     id,
@@ -10755,7 +10760,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$1 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -12571,6 +12576,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 minDash.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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: ["A comma-separated list of", ' ', jsxRuntime.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 minDash.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,
@@ -12637,6 +12744,12 @@ function GeneralGroup(field, editField, getService) {
   }), ...SelectEntries({
     field,
     editField
+  }), ...AcceptEntry({
+    field,
+    editField
+  }), ...MultipleEntry({
+    field,
+    editField
   }), ...DisabledEntry({
     field,
     editField